From 73629d68c34ce162d2c66bfdd9534b822125f282 Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Fri, 10 Jul 2026 02:34:36 +0300 Subject: [PATCH] Establish NODE.DC design system baseline --- .editorconfig | 13 + .gitignore | 7 + AGENTS.md | 22 + CHANGELOG.md | 12 + README.md | 61 + apps/catalog/index.html | 14 + apps/catalog/package.json | 25 + apps/catalog/public/nodedc-logo.svg | 1 + apps/catalog/src/CatalogApp.tsx | 331 ++++ apps/catalog/src/main.tsx | 12 + apps/catalog/src/styles.css | 261 +++ apps/catalog/tsconfig.json | 10 + apps/catalog/vite.config.ts | 10 + docs/ADOPTION.md | 69 + docs/ARCHITECTURE.md | 79 + docs/CANDIDATES.md | 35 + docs/COMPONENTS.md | 108 ++ docs/GOVERNANCE.md | 56 + docs/SOURCE_BASELINE.md | 59 + docs/THEMING.md | 56 + docs/WINDOWS_AND_LAYERS.md | 61 + package-lock.json | 1916 +++++++++++++++++++ package.json | 29 + packages/tokens/package.json | 11 + packages/tokens/themes.css | 67 + packages/tokens/tokens.css | 56 + packages/tokens/tokens.json | 61 + packages/ui-core/package.json | 22 + packages/ui-core/src/accent.ts | 38 + packages/ui-core/src/floating.ts | 67 + packages/ui-core/src/index.ts | 4 + packages/ui-core/src/theme.ts | 28 + packages/ui-core/styles.css | 1154 +++++++++++ packages/ui-core/tsconfig.json | 9 + packages/ui-dom/package.json | 21 + packages/ui-dom/src/floating.ts | 131 ++ packages/ui-dom/src/index.ts | 5 + packages/ui-dom/src/modal.ts | 117 ++ packages/ui-dom/src/select.ts | 67 + packages/ui-dom/tsconfig.json | 9 + packages/ui-react/package.json | 31 + packages/ui-react/src/AppHeader.tsx | 56 + packages/ui-react/src/Button.tsx | 71 + packages/ui-react/src/Checker.tsx | 41 + packages/ui-react/src/ConfirmationModal.tsx | 76 + packages/ui-react/src/Dropdown.tsx | 148 ++ packages/ui-react/src/Field.tsx | 75 + packages/ui-react/src/Glass.tsx | 37 + packages/ui-react/src/Inspector.tsx | 101 + packages/ui-react/src/RangeControl.tsx | 70 + packages/ui-react/src/SegmentedControl.tsx | 46 + packages/ui-react/src/Select.tsx | 129 ++ packages/ui-react/src/StatusBadge.tsx | 17 + packages/ui-react/src/Window.tsx | 143 ++ packages/ui-react/src/cn.ts | 4 + packages/ui-react/src/index.ts | 14 + packages/ui-react/tsconfig.json | 9 + registry/candidates.json | 127 ++ registry/components.json | 168 ++ registry/registry.json | 42 + registry/sources.json | 107 ++ scripts/validate-registry.mjs | 56 + tsconfig.base.json | 19 + 63 files changed, 6701 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 AGENTS.md create mode 100644 CHANGELOG.md create mode 100644 README.md create mode 100644 apps/catalog/index.html create mode 100644 apps/catalog/package.json create mode 100644 apps/catalog/public/nodedc-logo.svg create mode 100644 apps/catalog/src/CatalogApp.tsx create mode 100644 apps/catalog/src/main.tsx create mode 100644 apps/catalog/src/styles.css create mode 100644 apps/catalog/tsconfig.json create mode 100644 apps/catalog/vite.config.ts create mode 100644 docs/ADOPTION.md create mode 100644 docs/ARCHITECTURE.md create mode 100644 docs/CANDIDATES.md create mode 100644 docs/COMPONENTS.md create mode 100644 docs/GOVERNANCE.md create mode 100644 docs/SOURCE_BASELINE.md create mode 100644 docs/THEMING.md create mode 100644 docs/WINDOWS_AND_LAYERS.md create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 packages/tokens/package.json create mode 100644 packages/tokens/themes.css create mode 100644 packages/tokens/tokens.css create mode 100644 packages/tokens/tokens.json create mode 100644 packages/ui-core/package.json create mode 100644 packages/ui-core/src/accent.ts create mode 100644 packages/ui-core/src/floating.ts create mode 100644 packages/ui-core/src/index.ts create mode 100644 packages/ui-core/src/theme.ts create mode 100644 packages/ui-core/styles.css create mode 100644 packages/ui-core/tsconfig.json create mode 100644 packages/ui-dom/package.json create mode 100644 packages/ui-dom/src/floating.ts create mode 100644 packages/ui-dom/src/index.ts create mode 100644 packages/ui-dom/src/modal.ts create mode 100644 packages/ui-dom/src/select.ts create mode 100644 packages/ui-dom/tsconfig.json create mode 100644 packages/ui-react/package.json create mode 100644 packages/ui-react/src/AppHeader.tsx create mode 100644 packages/ui-react/src/Button.tsx create mode 100644 packages/ui-react/src/Checker.tsx create mode 100644 packages/ui-react/src/ConfirmationModal.tsx create mode 100644 packages/ui-react/src/Dropdown.tsx create mode 100644 packages/ui-react/src/Field.tsx create mode 100644 packages/ui-react/src/Glass.tsx create mode 100644 packages/ui-react/src/Inspector.tsx create mode 100644 packages/ui-react/src/RangeControl.tsx create mode 100644 packages/ui-react/src/SegmentedControl.tsx create mode 100644 packages/ui-react/src/Select.tsx create mode 100644 packages/ui-react/src/StatusBadge.tsx create mode 100644 packages/ui-react/src/Window.tsx create mode 100644 packages/ui-react/src/cn.ts create mode 100644 packages/ui-react/src/index.ts create mode 100644 packages/ui-react/tsconfig.json create mode 100644 registry/candidates.json create mode 100644 registry/components.json create mode 100644 registry/registry.json create mode 100644 registry/sources.json create mode 100644 scripts/validate-registry.mjs create mode 100644 tsconfig.base.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..6fe3ca1 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..938dda4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,7 @@ +node_modules/ +dist/ +.DS_Store +*.log +.vite/ +coverage/ +*.tsbuildinfo diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..95af649 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,22 @@ +# NODE.DC Design System rules + +This repository is the canonical home of reusable NODE.DC interface foundations and components. + +Before adding UI to a NODE.DC application: + +1. Read `registry/registry.json` and `docs/COMPONENTS.md`. +2. Reuse an existing package export if the required primitive or pattern already exists. +3. If a reusable capability is missing, add it here first and consume a released version from the application. +4. Do not copy component source into an application. Temporary adapters must stay thin and be documented in `docs/ADOPTION.md`. +5. Application-specific domain UI remains in the application, but its controls and surfaces must be composed from this system. + +Canonical source limits: + +- Launcher/Hub, CMS and SEO are the reference product family for application shell, headers, windows and common controls. +- From Engine, only the redesigned environment settings, shared glass controls and NDC agent inspector are approved reference sources. +- Legacy Engine inspectors and legacy Engine plates are explicitly non-canonical. +- Task Manager contributes only already-standardized shared behavior and components. Its legacy local menus are non-canonical. +- BIM Viewer contributes validated non-React integration requirements. + +Every component change must update its registry entry and the living catalog. Preserve keyboard behavior, portal layering and theme independence. + diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..57770f9 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,12 @@ +# Changelog + +## 0.1.0 — baseline + +- Established the standalone NODE.DC design-system repository. +- Added canonical tokens and dark/light glass theme contracts. +- Added framework-neutral positioning and theme utilities. +- Added DOM controllers for dropdowns and modal windows. +- Added React primitives, overlays, navigation and inspector/settings patterns. +- Added a living catalog and machine-readable component/source registry. +- Recorded the initial audit boundary without modifying source applications. + diff --git a/README.md b/README.md new file mode 100644 index 0000000..08e59ff --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# NODE.DC Design Guideline + +Единый источник компонентов и правил интерфейса NODE.DC. + +Это не архив скриншотов и не описание того, как разные приложения когда-то стилизовали одинаковый контрол. Репозиторий содержит реальные переиспользуемые пакеты, машинный реестр и живой каталог. Новые приложения должны подключать эти пакеты, выбирать тему/акцент и собирать предметный интерфейс из готовых элементов. + +## Что здесь является каноном + +- общая геометрия приложения и верхней панели; +- glass-материал, поверхности и слои; +- кнопки, поля, чекеры, range, select и dropdown; +- модальные окна, подтверждения и боковые окна; +- segmented navigation и статусы; +- инспектор/панель настроек нового поколения; +- поведение portal-слоёв, Escape, outside click и фокуса; +- контракт темы: приложения меняют цветовую схему, а не геометрию компонентов. + +## Что не является каноном + +- старые инспекторы и старые плашки Engine; +- legacy dropdown/menu реализации Task Manager; +- доменная логика нод, BIM-моделей, SEO pipeline или задач; +- локальные копии компонентов внутри приложений. + +## Пакеты + +- `@nodedc/tokens` — JSON и CSS custom properties. +- `@nodedc/ui-core` — общие стили, тема, контраст и расчёт floating-layer. +- `@nodedc/ui-react` — React-компоненты. +- `@nodedc/ui-dom` — JS/DOM-контроллеры для BIM Viewer, CMS и других приложений без React. +- `@nodedc/ui-catalog` — живой стенд всех канонических компонентов. + +## Быстрый запуск каталога + +```bash +npm install +npm run dev +``` + +Полная проверка: + +```bash +npm run check +npm run build +``` + +## Статус + +Версия `0.1.x` — зафиксированный baseline. Исходные приложения на первом этапе не изменяются. Компоненты здесь построены по подтверждённым реализациям Launcher/Hub, CMS/SEO и двум новым участкам Engine: настройкам окружения и инспектору агентной ноды. + +Подробности: + +- [Архитектура](docs/ARCHITECTURE.md) +- [Компоненты](docs/COMPONENTS.md) +- [Темы](docs/THEMING.md) +- [Окна и слои](docs/WINDOWS_AND_LAYERS.md) +- [Границы исходного аудита](docs/SOURCE_BASELINE.md) +- [Правила развития](docs/GOVERNANCE.md) +- [План подключения приложений](docs/ADOPTION.md) +- [Инвентарь следующих компонентов](docs/CANDIDATES.md) + diff --git a/apps/catalog/index.html b/apps/catalog/index.html new file mode 100644 index 0000000..1d72386 --- /dev/null +++ b/apps/catalog/index.html @@ -0,0 +1,14 @@ + + + + + + + NODE.DC UI Catalog + + +
+ + + + diff --git a/apps/catalog/package.json b/apps/catalog/package.json new file mode 100644 index 0000000..4914bb8 --- /dev/null +++ b/apps/catalog/package.json @@ -0,0 +1,25 @@ +{ + "name": "@nodedc/ui-catalog", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite --host 127.0.0.1", + "build": "tsc -b && vite build", + "typecheck": "tsc -b --pretty false" + }, + "dependencies": { + "@nodedc/ui-core": "0.1.0", + "@nodedc/ui-react": "0.1.0", + "react": "^19.1.0", + "react-dom": "^19.1.0" + }, + "devDependencies": { + "@types/react": "^19.1.0", + "@types/react-dom": "^19.1.0", + "@vitejs/plugin-react": "^4.6.0", + "typescript": "^5.8.3", + "vite": "^7.0.0" + } +} + diff --git a/apps/catalog/public/nodedc-logo.svg b/apps/catalog/public/nodedc-logo.svg new file mode 100644 index 0000000..ba1dbe5 --- /dev/null +++ b/apps/catalog/public/nodedc-logo.svg @@ -0,0 +1 @@ + diff --git a/apps/catalog/src/CatalogApp.tsx b/apps/catalog/src/CatalogApp.tsx new file mode 100644 index 0000000..9e00f94 --- /dev/null +++ b/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 ( +
+
+ {eyebrow} +

{title}

+

{description}

+
+ {children} +
+ ); +} + +function Preview({ title, note, children, className }: { + title: string; + note?: string; + children: ReactNode; + className?: string; +}) { + return ( + +
+ {title} + {note ? {note} : null} +
+
{children}
+ + ); +} + +export function CatalogApp() { + const [theme, setTheme] = useState("dark"); + const [accentHex, setAccentHex] = useState("#c3ff66"); + const [section, setSection] = useState("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: ( + <> + + + + + ( + + )} + > + {({ close }) => ( + <> + + + + + )} + + + + +
+ + `${value}%`} onChange={setRange} /> +
+ + +
+ Черновик + Готово + Нужна проверка + Ошибка + В работе +
+ + + + +
+ +
+ + + +
+ +
+ +
+
+ +
ИнспекторAgent Definition
+ + +
+
+ + + setModalOpen(false)} + footer={ + <> + + + + } + > +
+ setProjectName(event.target.value)} /> + + + ); +} + +export interface TextAreaFieldProps extends TextareaHTMLAttributes { + label: string; + hint?: string; + description?: string; + fieldClassName?: string; +} + +export function TextAreaField({ + label, + hint, + description, + fieldClassName, + className, + id, + ...props +}: TextAreaFieldProps) { + const generatedId = useId(); + const controlId = id ?? generatedId; + return ( + +