Establish NODE.DC design system baseline

apps/catalog/src/CatalogApp.tsx

@@ -0,0 +1,331 @@
+import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
+import {
+  AppHeader,
+  Button,
+  Checker,
+  ColorField,
+  ConfirmationModal,
+  ControlRow,
+  Dropdown,
+  FieldFrame,
+  GlassSurface,
+  HeaderProfile,
+  HeaderWorkspace,
+  IconButton,
+  Inspector,
+  RangeControl,
+  SegmentedControl,
+  Select,
+  StatusBadge,
+  TextAreaField,
+  TextField,
+  Window,
+  WindowFooterActions,
+} from "@nodedc/ui-react";
+
+type CatalogSection = "foundation" | "controls" | "windows" | "inspector";
+
+const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
+  { label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
+  { label: "Engine", value: [148, 123, 219], hex: "#947bdb" },
+  { label: "BIM", value: [78, 164, 255], hex: "#4ea4ff" },
+  { label: "SEO", value: [32, 32, 34], hex: "#202022" },
+];
+
+const selectOptions = [
+  { value: "active", label: "Активен", description: "Сервис доступен пользователям" },
+  { value: "maintenance", label: "Техработы", description: "Временно недоступен" },
+  { value: "disabled", label: "Отключён", description: "Запуск запрещён" },
+] as const;
+
+function rgbFromHex(hex: string): RgbTuple | null {
+  const normalized = hex.trim().replace(/^#/, "");
+  if (!/^[0-9a-f]{6}$/i.test(normalized)) return null;
+  return [
+    Number.parseInt(normalized.slice(0, 2), 16),
+    Number.parseInt(normalized.slice(2, 4), 16),
+    Number.parseInt(normalized.slice(4, 6), 16),
+  ];
+}
+
+function Section({ id, eyebrow, title, description, children }: {
+  id: string;
+  eyebrow: string;
+  title: string;
+  description: string;
+  children: ReactNode;
+}) {
+  return (
+    <section id={id} className="catalog-section">
+      <header className="catalog-section__head">
+        <span>{eyebrow}</span>
+        <h2>{title}</h2>
+        <p>{description}</p>
+      </header>
+      {children}
+    </section>
+  );
+}
+
+function Preview({ title, note, children, className }: {
+  title: string;
+  note?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <GlassSurface className={`catalog-preview ${className ?? ""}`} padding="lg">
+      <div className="catalog-preview__head">
+        <strong>{title}</strong>
+        {note ? <span>{note}</span> : null}
+      </div>
+      <div className="catalog-preview__body">{children}</div>
+    </GlassSurface>
+  );
+}
+
+export function CatalogApp() {
+  const [theme, setTheme] = useState<NodedcTheme>("dark");
+  const [accentHex, setAccentHex] = useState("#c3ff66");
+  const [section, setSection] = useState<CatalogSection>("foundation");
+  const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
+  const [checker, setChecker] = useState(true);
+  const [range, setRange] = useState(64);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [inspectorOpen, setInspectorOpen] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [projectName, setProjectName] = useState("NODE.DC Platform");
+  const [notes, setNotes] = useState("Общий контракт компонентов без доменной логики приложения.");
+
+  const accent = useMemo(() => rgbFromHex(accentHex) ?? accents[0].value, [accentHex]);
+
+  useEffect(() => {
+    applyNodedcTheme(document.documentElement, { theme, accent });
+  }, [accent, theme]);
+
+  const openSection = (next: CatalogSection) => {
+    setSection(next);
+    document.getElementById(next)?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const inspectorSections = [
+    {
+      id: "definition",
+      label: "Definition Control",
+      description: "Параметры агентной ноды",
+      content: (
+        <>
+          <ControlRow label="Активность"><Checker checked={checker} label="Агент активен" onChange={setChecker} /></ControlRow>
+          <ControlRow label="Модель">
+            <Select
+              label="Модель"
+              value="codex"
+              options={[
+                { value: "codex", label: "Codex" },
+                { value: "local", label: "Local executor" },
+              ]}
+              onChange={() => undefined}
+            />
+          </ControlRow>
+          <RangeControl label="Температура" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
+        </>
+      ),
+    },
+    {
+      id: "appearance",
+      label: "Внешний вид",
+      description: "Тема и акцент",
+      content: (
+        <ControlRow label="Акцент"><ColorField value={accentHex} onChange={setAccentHex} /></ControlRow>
+      ),
+    },
+    {
+      id: "runtime",
+      label: "Выполнение",
+      description: "Параметры запуска",
+      content: <Checker checked={false} label="Запускать автоматически" onChange={() => undefined} />,
+    },
+  ];
+
+  return (
+    <div className="catalog-app nodedc-ui-root" style={{ "--catalog-accent": accentHex } as CSSProperties}>
+      <AppHeader
+        brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
+        center={
+          <>
+            <HeaderWorkspace label="UI" />
+            <SegmentedControl
+              label="Разделы каталога"
+              value={section}
+              items={[
+                { value: "foundation", label: "Основа" },
+                { value: "controls", label: "Контролы" },
+                { value: "windows", label: "Окна" },
+                { value: "inspector", label: "Инспектор" },
+              ]}
+              onChange={openSection}
+            />
+          </>
+        }
+        right={
+          <HeaderProfile>
+            <IconButton label="Сменить тему" onClick={() => setTheme((current) => current === "dark" ? "light" : "dark")}>
+              {theme === "dark" ? "☼" : "◐"}
+            </IconButton>
+            <span className="catalog-avatar">DC</span>
+          </HeaderProfile>
+        }
+      />
+
+      <main className="catalog-main">
+        <div className="catalog-hero">
+          <StatusBadge tone="accent">baseline 0.1.0</StatusBadge>
+          <h1>Один UI-контракт.<br />Разные приложения.</h1>
+          <p>Геометрия, окна и поведение остаются общими. Приложение выбирает тему и акцент, затем использует готовые компоненты.</p>
+        </div>
+
+        <Section id="foundation" eyebrow="01 / Foundation" title="Материал и тема" description="Одинаковые поверхности проверяются в тёмной и светлой схеме без fork компонентов.">
+          <div className="catalog-grid catalog-grid--foundation">
+            <Preview title="Theme contract" note={theme === "dark" ? "dark glass" : "light glass"}>
+              <div className="catalog-theme-row">
+                <Button variant={theme === "dark" ? "accent" : "secondary"} onClick={() => setTheme("dark")}>Dark</Button>
+                <Button variant={theme === "light" ? "accent" : "secondary"} onClick={() => setTheme("light")}>Light</Button>
+              </div>
+              <div className="catalog-swatches">
+                {accents.map((item) => (
+                  <button
+                    key={item.label}
+                    type="button"
+                    className="catalog-swatch"
+                    data-active={item.hex.toLowerCase() === accentHex.toLowerCase() ? "true" : undefined}
+                    style={{ "--swatch": item.hex } as CSSProperties}
+                    onClick={() => setAccentHex(item.hex)}
+                  >
+                    <span />{item.label}
+                  </button>
+                ))}
+              </div>
+              <ColorField label="Свой accent" value={accentHex} onChange={setAccentHex} />
+            </Preview>
+            <Preview title="Glass hierarchy" note="default / strong / soft">
+              <div className="catalog-surface-stack">
+                <GlassSurface padding="md">Default surface</GlassSurface>
+                <GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
+                <GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
+              </div>
+            </Preview>
+          </div>
+        </Section>
+
+        <Section id="controls" eyebrow="02 / Primitives" title="Контролы" description="Общие actions, fields и selection primitives для React и DOM consumers.">
+          <div className="catalog-grid">
+            <Preview title="Actions" note="shared geometry">
+              <div className="catalog-inline catalog-inline--wrap">
+                <Button variant="accent">Сохранить</Button>
+                <Button>Отмена</Button>
+                <Button variant="ghost">Подробнее</Button>
+                <Button variant="danger">Удалить</Button>
+                <IconButton label="Настройки">⚙</IconButton>
+              </div>
+            </Preview>
+            <Preview title="Fields" note="label / hint / control">
+              <div className="catalog-form">
+                <TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
+                <TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
+              </div>
+            </Preview>
+            <Preview title="Selection" note="portal dropdown">
+              <div className="catalog-form">
+                <FieldFrame label="Статус">
+                  <Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
+                </FieldFrame>
+                <Dropdown
+                  trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
+                    <Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} onClick={toggle}>Действия</Button>
+                  )}
+                >
+                  {({ close }) => (
+                    <>
+                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Переименовать</span></button>
+                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Дублировать</span></button>
+                      <button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Архивировать</span></button>
+                    </>
+                  )}
+                </Dropdown>
+              </div>
+            </Preview>
+            <Preview title="Settings controls" note="new Engine generation">
+              <div className="catalog-form">
+                <Checker checked={checker} label="Автоматическое обновление" description="Применять изменения без перезапуска" onChange={setChecker} />
+                <RangeControl label="Интенсивность стекла" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
+              </div>
+            </Preview>
+            <Preview title="Semantic status" note="not tied to accent" className="catalog-preview--wide">
+              <div className="catalog-inline catalog-inline--wrap">
+                <StatusBadge>Черновик</StatusBadge>
+                <StatusBadge tone="success">Готово</StatusBadge>
+                <StatusBadge tone="warning">Нужна проверка</StatusBadge>
+                <StatusBadge tone="danger">Ошибка</StatusBadge>
+                <StatusBadge tone="accent">В работе</StatusBadge>
+              </div>
+            </Preview>
+          </div>
+        </Section>
+
+        <Section id="windows" eyebrow="03 / Layers" title="Окна и подтверждения" description="Modal и side panel используют одну механику portal, Escape, focus trap и focus restore.">
+          <Preview title="Controlled windows" note="center / end / confirm">
+            <div className="catalog-inline catalog-inline--wrap">
+              <Button variant="accent" onClick={() => setModalOpen(true)}>Открыть окно</Button>
+              <Button onClick={() => setInspectorOpen(true)}>Открыть инспектор</Button>
+              <Button variant="danger" onClick={() => setConfirmOpen(true)}>Проверить удаление</Button>
+            </div>
+          </Preview>
+        </Section>
+
+        <Section id="inspector" eyebrow="04 / Pattern" title="Inspector / Settings" description="Канон основан только на новом Environment Settings и NDC Agent Inspector, без legacy-инспекторов Engine.">
+          <div className="catalog-inspector-stage">
+            <GlassSurface tone="strong" radius="panel" padding="md" className="catalog-inspector-card">
+              <div className="catalog-inspector-title"><strong>Инспектор</strong><span>Agent Definition</span></div>
+              <Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
+            </GlassSurface>
+          </div>
+        </Section>
+      </main>
+
+      <Window
+        open={modalOpen}
+        title="Настройки сервиса"
+        subtitle="Единое окно Launcher / CMS / SEO"
+        onClose={() => setModalOpen(false)}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setModalOpen(false)}>Отмена</Button>
+            <WindowFooterActions><Button variant="accent" onClick={() => setModalOpen(false)}>Сохранить</Button></WindowFooterActions>
+          </>
+        }
+      >
+        <div className="catalog-form">
+          <TextField label="Название" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
+          <FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
+          <Checker checked={checker} label="Сервис активен" onChange={setChecker} />
+        </div>
+      </Window>
+
+      <Window open={inspectorOpen} title="Инспектор" subtitle="Agent Definition" placement="end" onClose={() => setInspectorOpen(false)}>
+        <Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
+      </Window>
+
+      <ConfirmationModal
+        open={confirmOpen}
+        title="Удалить конфигурацию?"
+        description={<>Конфигурация будет удалена. Это действие нельзя отменить.</>}
+        confirmLabel="Удалить"
+        danger
+        onClose={() => setConfirmOpen(false)}
+        onConfirm={() => setConfirmOpen(false)}
+      />
+    </div>
+  );
+}
+

apps/catalog/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@nodedc/ui-core/styles.css";
+import "./styles.css";
+import { CatalogApp } from "./CatalogApp";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <CatalogApp />
+  </StrictMode>,
+);
+

apps/catalog/src/styles.css

@@ -0,0 +1,261 @@
+:root {
+  background: var(--nodedc-canvas);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  background:
+    radial-gradient(circle at 72% 10%, rgba(var(--nodedc-accent-rgb), 0.09), transparent 28rem),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
+    var(--nodedc-canvas);
+  background-size: auto, 44px 44px, 44px 44px, auto;
+  color: var(--nodedc-text-primary);
+  transition: background-color 220ms ease, color 220ms ease;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+.catalog-app {
+  min-height: 100vh;
+}
+
+[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
+  filter: brightness(0.12);
+}
+
+.catalog-avatar {
+  display: inline-grid;
+  width: 3rem;
+  height: 3rem;
+  place-items: center;
+  border-radius: 999px;
+  background: rgb(var(--nodedc-accent-rgb));
+  color: rgb(var(--nodedc-on-accent-rgb));
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.catalog-main {
+  display: grid;
+  width: min(1180px, calc(100% - 2rem));
+  margin: 0 auto;
+  gap: 8rem;
+  padding: 5rem 0 10rem;
+}
+
+.catalog-hero {
+  display: grid;
+  min-height: 32rem;
+  align-content: center;
+  justify-items: start;
+  gap: 1.4rem;
+}
+
+.catalog-hero h1 {
+  max-width: 820px;
+  margin: 0;
+  color: var(--nodedc-text-primary);
+  font-size: clamp(3.1rem, 7vw, 6.4rem);
+  font-weight: 670;
+  letter-spacing: -0.065em;
+  line-height: 0.92;
+}
+
+.catalog-hero p {
+  max-width: 650px;
+  margin: 0;
+  color: var(--nodedc-text-secondary);
+  font-size: clamp(1rem, 1.6vw, 1.3rem);
+  line-height: 1.5;
+}
+
+.catalog-section {
+  display: grid;
+  scroll-margin-top: 2rem;
+  gap: 2rem;
+}
+
+.catalog-section__head {
+  display: grid;
+  max-width: 760px;
+  gap: 0.75rem;
+}
+
+.catalog-section__head span {
+  color: rgb(var(--nodedc-accent-rgb));
+  font-size: 0.72rem;
+  font-weight: 780;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.catalog-section__head h2 {
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 3.6rem);
+  font-weight: 650;
+  letter-spacing: -0.05em;
+  line-height: 1;
+}
+
+.catalog-section__head p {
+  margin: 0;
+  color: var(--nodedc-text-secondary);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.catalog-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.catalog-grid--foundation {
+  grid-template-columns: 1.1fr 0.9fr;
+}
+
+.catalog-preview {
+  min-height: 18rem;
+}
+
+.catalog-preview--wide {
+  grid-column: 1 / -1;
+}
+
+.catalog-preview__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.catalog-preview__head strong {
+  font-size: 0.92rem;
+}
+
+.catalog-preview__head span {
+  color: var(--nodedc-text-muted);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.catalog-preview__body {
+  display: grid;
+  min-height: 10rem;
+  align-content: center;
+  gap: 1rem;
+}
+
+.catalog-theme-row,
+.catalog-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.catalog-inline--wrap {
+  flex-wrap: wrap;
+}
+
+.catalog-swatches {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.catalog-swatch {
+  display: grid;
+  min-width: 0;
+  gap: 0.4rem;
+  border: 0;
+  border-radius: 0.9rem;
+  background: var(--nodedc-glass-control-bg);
+  color: var(--nodedc-text-muted);
+  padding: 0.55rem;
+  font-size: 0.68rem;
+  cursor: pointer;
+}
+
+.catalog-swatch span {
+  height: 2.4rem;
+  border-radius: 0.65rem;
+  background: var(--swatch);
+}
+
+.catalog-swatch[data-active="true"] {
+  background: var(--nodedc-glass-control-hover);
+  color: var(--nodedc-text-primary);
+}
+
+.catalog-surface-stack,
+.catalog-form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.catalog-surface-stack .nodedc-glass {
+  min-height: 4rem;
+  display: flex;
+  align-items: center;
+  color: var(--nodedc-text-secondary);
+  font-size: 0.78rem;
+}
+
+.catalog-inspector-stage {
+  display: flex;
+  min-height: 40rem;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 4rem;
+  border-radius: 2rem;
+  background:
+    radial-gradient(circle at 18% 24%, rgba(var(--nodedc-accent-rgb), 0.13), transparent 22rem),
+    color-mix(in srgb, var(--nodedc-canvas-soft) 86%, transparent);
+}
+
+.catalog-inspector-card {
+  width: min(24.375rem, 100%);
+}
+
+.catalog-inspector-title {
+  display: grid;
+  gap: 0.3rem;
+  padding: 0.75rem 0.75rem 1rem;
+}
+
+.catalog-inspector-title span {
+  color: var(--nodedc-text-muted);
+  font-size: 0.7rem;
+}
+
+@media (max-width: 820px) {
+  .catalog-main {
+    gap: 6rem;
+    padding-top: 2rem;
+  }
+
+  .catalog-grid,
+  .catalog-grid--foundation {
+    grid-template-columns: 1fr;
+  }
+
+  .catalog-preview--wide {
+    grid-column: auto;
+  }
+
+  .catalog-inspector-stage {
+    padding: 1rem;
+  }
+}