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>
+  );
+}
+