Correct Hub and Engine component geometry

2026-07-10 03:14:43 +03:00 · 2026-07-10 03:14:43 +03:00 · 4a9ad01ea6
parent 73629d68c3
commit 4a9ad01ea6
28 changed files with 922 additions and 167 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,14 @@
 # Changelog

+## 0.2.0 — source-faithful geometry
+
+- Corrected the Hub header to the production three-axis shell with workspace, navigation and profile groups.
+- Added the reusable Hub administration navigation panel and its adjacent-content layout.
+- Added integrated and Engine split Select variants with source-accurate dropdown geometry.
+- Fixed Engine Environment Settings metrics, accent sections, ranges, checker and action layouts.
+- Made right-side inspectors modeless by default: no page dimming, backdrop close or scroll lock.
+- Updated the living catalog and registry from the audited source files and supplied screenshots.
+
 ## 0.1.0 — baseline

 - Established the standalone NODE.DC design-system repository.
@ -9,4 +18,3 @@
 - 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.
-
--- a/README.md
+++ b/README.md
@ -11,6 +11,7 @@
 - кнопки, поля, чекеры, range, select и dropdown;
 - модальные окна, подтверждения и боковые окна;
 - segmented navigation и статусы;
+- Hub header и левая admin navigation panel;
 - инспектор/панель настроек нового поколения;
 - поведение portal-слоёв, Escape, outside click и фокуса;
 - контракт темы: приложения меняют цветовую схему, а не геометрию компонентов.
@ -46,7 +47,7 @@ npm run build

 ## Статус

-Версия `0.1.x` — зафиксированный baseline. Исходные приложения на первом этапе не изменяются. Компоненты здесь построены по подтверждённым реализациям Launcher/Hub, CMS/SEO и двум новым участкам Engine: настройкам окружения и инспектору агентной ноды.
+Версия `0.2.x` — уточнённый baseline с точной геометрией Hub header/admin panel и новых Engine settings/agent inspector. Исходные приложения на первом этапе не изменяются.

 Подробности:

@ -58,4 +59,3 @@ npm run build
 - [Правила развития](docs/GOVERNANCE.md)
 - [План подключения приложений](docs/ADOPTION.md)
 - [Инвентарь следующих компонентов](docs/CANDIDATES.md)
-
--- a/apps/catalog/package.json
+++ b/apps/catalog/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nodedc/ui-catalog",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "private": true,
  "type": "module",
  "scripts": {
@ -9,8 +9,8 @@
    "typecheck": "tsc -b --pretty false"
  },
  "dependencies": {
-    "@nodedc/ui-core": "0.1.0",
-    "@nodedc/ui-react": "0.1.0",
+    "@nodedc/ui-core": "0.2.0",
+    "@nodedc/ui-react": "0.2.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
@ -22,4 +22,3 @@
    "vite": "^7.0.0"
  }
 }
-
--- a/apps/catalog/src/CatalogApp.tsx
+++ b/apps/catalog/src/CatalogApp.tsx
@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
 import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
 import {
+  AdminNavigationPanel,
  AppHeader,
  Button,
  Checker,
@ -11,6 +12,8 @@ import {
  FieldFrame,
  GlassSurface,
  HeaderProfile,
+  HeaderProfileButton,
+  HeaderAvatar,
  HeaderWorkspace,
  IconButton,
  Inspector,
@ -25,6 +28,12 @@ import {
 } from "@nodedc/ui-react";

 type CatalogSection = "foundation" | "controls" | "windows" | "inspector";
+type HubMode = "showcase" | "admin" | "platform";
+
+const engineAccentStyle = {
+  "--nodedc-accent-rgb": "148 123 219",
+  "--nodedc-on-accent-rgb": "247 248 244",
+} as CSSProperties;

 const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
  { label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
@ -89,9 +98,18 @@ export function CatalogApp() {
  const [theme, setTheme] = useState<NodedcTheme>("dark");
  const [accentHex, setAccentHex] = useState("#c3ff66");
  const [section, setSection] = useState<CatalogSection>("foundation");
+  const [hubMode, setHubMode] = useState<HubMode>("showcase");
+  const [adminSection, setAdminSection] = useState("invites");
  const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
  const [checker, setChecker] = useState(true);
-  const [range, setRange] = useState(64);
+  const [brightness, setBrightness] = useState(49);
+  const [glowDistance, setGlowDistance] = useState(105);
+  const [usePortColors, setUsePortColors] = useState(false);
+  const [connectionType, setConnectionType] = useState("spline");
+  const [lightColor, setLightColor] = useState("#7a3cff");
+  const [connectionColor, setConnectionColor] = useState("#404040");
+  const [fillColor, setFillColor] = useState("#8f83ff");
+  const [strokeColor, setStrokeColor] = useState("#2b2b36");
  const [modalOpen, setModalOpen] = useState(false);
  const [inspectorOpen, setInspectorOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
@ -111,40 +129,56 @@ export function CatalogApp() {

  const inspectorSections = [
    {
-      id: "definition",
-      label: "Definition Control",
-      description: "Параметры агентной ноды",
+      id: "illumination",
+      label: "Подсветка",
+      tone: "accent" as const,
      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} />
+          <ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
+          <RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
+          <RangeControl label="Дистанция свечения" value={glowDistance} min={0} max={200} formatValue={(value) => `${value}%`} onChange={setGlowDistance} />
        </>
      ),
    },
    {
-      id: "appearance",
-      label: "Внешний вид",
-      description: "Тема и акцент",
+      id: "connections",
+      label: "Связи",
+      tone: "accent" as const,
      content: (
-        <ControlRow label="Акцент"><ColorField value={accentHex} onChange={setAccentHex} /></ControlRow>
+        <>
+          <ControlRow label="Связи по умолчанию" layout="stack">
+            <Select
+              variant="split"
+              label="Тип связи"
+              value={connectionType}
+              options={[
+                { value: "spline", label: "Сплайн" },
+                { value: "straight", label: "Прямая" },
+                { value: "step", label: "Ступенчатая" },
+              ]}
+              onChange={setConnectionType}
+            />
+          </ControlRow>
+          <Checker checked={usePortColors} label="Использовать цвет портов" onChange={setUsePortColors} />
+          <ControlRow label="Цвет связей по умолчанию"><ColorField value={connectionColor} onChange={setConnectionColor} /></ControlRow>
+          <ControlRow label="Применить ко всем">
+            <Button variant="accent" shape="pill" width="full">Применить</Button>
+          </ControlRow>
+        </>
      ),
    },
    {
-      id: "runtime",
-      label: "Выполнение",
-      description: "Параметры запуска",
-      content: <Checker checked={false} label="Запускать автоматически" onChange={() => undefined} />,
+      id: "ports",
+      label: "Порты",
+      tone: "accent" as const,
+      content: (
+        <>
+          <ControlRow label="Заливка"><ColorField value={fillColor} onChange={setFillColor} /></ControlRow>
+          <RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
+          <ControlRow label="Обводка"><ColorField value={strokeColor} onChange={setStrokeColor} /></ControlRow>
+          <RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
+        </>
+      ),
    },
  ];

@ -154,7 +188,76 @@ export function CatalogApp() {
        brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
        center={
          <>
-            <HeaderWorkspace label="UI" />
+            <HeaderWorkspace label="DC" />
+            <SegmentedControl
+              label="Навигация Hub"
+              value={hubMode}
+              items={[
+                { value: "showcase", label: "Витрина" },
+                { value: "admin", label: "Администрирование" },
+                { value: "platform", label: "Платформа" },
+              ]}
+              onChange={setHubMode}
+            />
+          </>
+        }
+        right={
+          <HeaderProfile>
+            <IconButton label="Уведомления">▱</IconButton>
+            <HeaderProfileButton>Профиль</HeaderProfileButton>
+            <HeaderAvatar label="DC" />
+          </HeaderProfile>
+        }
+      />
+
+      {hubMode === "admin" ? (
+        <div className="catalog-admin-layer">
+          <AdminNavigationPanel
+            title="Администрирование"
+            onClose={() => setHubMode("showcase")}
+            contexts={[
+              {
+                id: "public",
+                label: "Открытый контур",
+                description: "Public access pool",
+                icon: "◎",
+              },
+              {
+                id: "company",
+                groupLabel: "Компании",
+                label: "DCTOUCH",
+                description: "ООО ДИСТАЧ",
+                icon: "▥",
+                active: true,
+                onSelect: () => undefined,
+                onToggle: () => undefined,
+              },
+            ]}
+            items={[
+              { id: "overview", label: "Обзор", icon: "▦" },
+              { id: "invites", label: "Инвайты", icon: "✉" },
+              { id: "members", label: "Участники", icon: "♙" },
+              { id: "access", label: "Доступы", icon: "⌁" },
+              { id: "groups", label: "Группы", icon: "☷" },
+            ]}
+            activeId={adminSection}
+            onItemChange={setAdminSection}
+            footer={
+              <>
+                <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">♢</span>
+                <span>Root Admin</span>
+              </>
+            }
+          />
+        </div>
+      ) : null}
+
+      <main className="catalog-main" data-admin-open={hubMode === "admin" ? "true" : undefined}>
+        <div className="catalog-hero">
+          <StatusBadge tone="accent">NODE.DC UI baseline</StatusBadge>
+          <h1>Один UI-контракт.<br />Разные приложения.</h1>
+          <p>Геометрия, окна и поведение остаются общими. Приложение выбирает тему и акцент, затем использует готовые компоненты.</p>
+          <div className="catalog-section-nav">
            <SegmentedControl
              label="Разделы каталога"
              value={section}
@ -166,23 +269,7 @@ export function CatalogApp() {
              ]}
              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>
        </div>

        <Section id="foundation" eyebrow="01 / Foundation" title="Материал и тема" description="Одинаковые поверхности проверяются в тёмной и светлой схеме без fork компонентов.">
@ -222,7 +309,7 @@ export function CatalogApp() {
          <div className="catalog-grid">
            <Preview title="Actions" note="shared geometry">
              <div className="catalog-inline catalog-inline--wrap">
-                <Button variant="accent">Сохранить</Button>
+                <Button variant="accent" shape="pill">Сохранить</Button>
                <Button>Отмена</Button>
                <Button variant="ghost">Подробнее</Button>
                <Button variant="danger">Удалить</Button>
@ -237,9 +324,24 @@ export function CatalogApp() {
            </Preview>
            <Preview title="Selection" note="portal dropdown">
              <div className="catalog-form">
-                <FieldFrame label="Статус">
+                <FieldFrame label="Hub / integrated select">
                  <Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
                </FieldFrame>
+                <FieldFrame label="Engine / split select">
+                  <div style={engineAccentStyle}>
+                    <Select
+                      variant="split"
+                      label="Тип связи"
+                      value={connectionType}
+                      options={[
+                        { value: "spline", label: "Сплайн" },
+                        { value: "straight", label: "Прямая" },
+                        { value: "step", label: "Ступенчатая" },
+                      ]}
+                      onChange={setConnectionType}
+                    />
+                  </div>
+                </FieldFrame>
                <Dropdown
                  trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
                    <Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} onClick={toggle}>Действия</Button>
@ -255,10 +357,12 @@ export function CatalogApp() {
                </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} />
+            <Preview title="Environment controls" note="exact Engine geometry">
+              <div className="catalog-engine-control-stack" style={engineAccentStyle}>
+                <ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
+                <RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
+                <Checker checked={checker} label="Использовать цвет портов" onChange={setChecker} />
+                <ControlRow label="Применить ко всем"><Button variant="accent" shape="pill" width="full">Применить</Button></ControlRow>
              </div>
            </Preview>
            <Preview title="Semantic status" note="not tied to accent" className="catalog-preview--wide">
@ -273,7 +377,7 @@ export function CatalogApp() {
          </div>
        </Section>

-        <Section id="windows" eyebrow="03 / Layers" title="Окна и подтверждения" description="Modal и side panel используют одну механику portal, Escape, focus trap и focus restore.">
+        <Section id="windows" eyebrow="03 / Layers" title="Окна и подтверждения" description="Modal и modeless side panel используют общий portal, Escape и focus restore; trap и scroll lock остаются только у modal.">
          <Preview title="Controlled windows" note="center / end / confirm">
            <div className="catalog-inline catalog-inline--wrap">
              <Button variant="accent" onClick={() => setModalOpen(true)}>Открыть окно</Button>
@ -285,9 +389,9 @@ export function CatalogApp() {

        <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 tone="strong" radius="panel" className="catalog-inspector-card" style={engineAccentStyle}>
+              <div className="catalog-inspector-title"><strong>Настройки окружения</strong><span>ENGINE / новый канон</span></div>
+              <Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
            </GlassSurface>
          </div>
        </Section>
@ -312,8 +416,15 @@ export function CatalogApp() {
        </div>
      </Window>

-      <Window open={inspectorOpen} title="Инспектор" subtitle="Agent Definition" placement="end" onClose={() => setInspectorOpen(false)}>
-        <Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
+      <Window
+        open={inspectorOpen}
+        title="Настройки окружения"
+        subtitle="ENGINE / новый канон"
+        placement="end"
+        style={engineAccentStyle}
+        onClose={() => setInspectorOpen(false)}
+      >
+        <Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
      </Window>

      <ConfirmationModal
@ -328,4 +439,3 @@ export function CatalogApp() {
    </div>
  );
 }
-
--- a/apps/catalog/src/styles.css
+++ b/apps/catalog/src/styles.css
@ -30,20 +30,16 @@ textarea {
  min-height: 100vh;
 }

-[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
-  filter: brightness(0.12);
+.catalog-admin-layer {
+  position: fixed;
+  z-index: 390;
+  top: 6.55rem;
+  bottom: 1.25rem;
+  left: 1.25rem;
 }

-.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;
+[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
+  filter: brightness(0.12);
 }

 .catalog-main {
@ -52,6 +48,13 @@ textarea {
  margin: 0 auto;
  gap: 8rem;
  padding: 5rem 0 10rem;
+  transition: width 500ms cubic-bezier(0.22, 1, 0.36, 1), margin-left 500ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.catalog-main[data-admin-open="true"] {
+  width: min(1180px, calc(100% - 25rem));
+  margin-right: 1rem;
+  margin-left: 24rem;
 }

 .catalog-hero {
@ -80,6 +83,10 @@ textarea {
  line-height: 1.5;
 }

+.catalog-section-nav {
+  margin-top: 0.6rem;
+}
+
 .catalog-section {
  display: grid;
  scroll-margin-top: 2rem;
@ -205,6 +212,13 @@ textarea {
  gap: 0.75rem;
 }

+.catalog-engine-control-stack {
+  display: grid;
+  width: min(var(--nodedc-inspector-inner-width), 100%);
+  justify-self: center;
+  gap: 0.75rem;
+}
+
 .catalog-surface-stack .nodedc-glass {
  min-height: 4rem;
  display: flex;
@ -227,12 +241,13 @@ textarea {

 .catalog-inspector-card {
  width: min(24.375rem, 100%);
+  padding: 1.125rem 0.75rem;
 }

 .catalog-inspector-title {
  display: grid;
  gap: 0.3rem;
-  padding: 0.75rem 0.75rem 1rem;
+  padding: 0 0.875rem 0.875rem;
 }

 .catalog-inspector-title span {
@ -246,6 +261,11 @@ textarea {
    padding-top: 2rem;
  }

+  .catalog-main[data-admin-open="true"] {
+    width: min(1180px, calc(100% - 2rem));
+    margin-inline: auto;
+  }
+
  .catalog-grid,
  .catalog-grid--foundation {
    grid-template-columns: 1fr;
@ -258,4 +278,11 @@ textarea {
  .catalog-inspector-stage {
    padding: 1rem;
  }
+
+  .catalog-admin-layer {
+    top: 0.875rem;
+    right: 0.875rem;
+    bottom: 0.875rem;
+    left: 0.875rem;
+  }
 }
--- a/docs/CANDIDATES.md
+++ b/docs/CANDIDATES.md
@ -8,7 +8,6 @@ Baseline намеренно отделяет готовые exports от изв
 - ProfileMenu — отделить визуальную карточку от identity/role API приложения.
 - ActionDropdown — добавить типизированные command rows поверх готового Dropdown.
 - DataTable — вынести toolbar, cells, loading/empty и row actions без entity schemas Launcher/Plane.
- SideNavigation — route-aware навигация отдельно от уже готового Inspector accordion.
 - AvatarStack — согласовать overflow, presence и picker mode.

 ## P2 — продуктовые patterns
@ -32,4 +31,3 @@ Baseline намеренно отделяет готовые exports от изв
 6. выпустить minor version.

 Так список сохраняет уже проделанную работу, но не превращает незавершённый локальный код в ложный канон.
-
--- a/docs/COMPONENTS.md
+++ b/docs/COMPONENTS.md
@ -57,7 +57,12 @@ Dropdown владеет floating-layer поведением:

 ## Select

-Select добавляет к Dropdown контролируемое значение, options и необязательный поиск. Native select не используется как видимый runtime UI, но может использоваться как fallback только в специально оговорённом legacy-контуре.
+Select добавляет к Dropdown контролируемое значение, options и необязательный поиск. У него две канонические формы:
+
+- `integrated` — единая pill-поверхность Hub/Launcher;
+- `split` — форма Engine с отдельной областью значения и отдельной кнопкой раскрытия `46 px`, между ними зазор `8 px`.
+
+Native select не используется как видимый runtime UI. Меню рендерится через portal; у Engine-варианта меню имеет радиус `20 px`, а строки — `14 px` и высоту `42 px`.

 ## Window

@ -66,7 +71,7 @@ Window — единая механика открытия modal и правой
 - приложение контролирует `open`;
 - библиотека управляет portal, focus entry/trap/restore, Escape, backdrop и scroll lock;
 - `center` — modal;
- `end` — inspector/settings/detail panel.
+- `end` — modeless inspector/settings/detail panel без затемнения, backdrop blur, backdrop close, focus trap и блокировки прокрутки страницы.

 Содержание, сохранение и запросы принадлежат приложению.

@ -88,6 +93,14 @@ Pill navigation для верхней панели и компактного п

 Компонент фиксирует положение логотипа, высоту и выравнивание, но не знает маршруты конкретного приложения.

+В Hub-форме центр состоит из круглого workspace trigger и segmented navigation. Справа используется единая profile-group поверхность с иконкой, подписью и круглым avatar. Эти элементы нельзя заменять случайными standalone-кнопками, сохраняя только приблизительную позицию.
+
+## AdminNavigationPanel
+
+Левая выезжающая панель Hub/Launcher. Библиотека владеет оболочкой `352 px`, радиусом `21.6 px`, внутренними отступами, full-bleed context/navigation pills, круглыми icon surfaces и анимацией появления. Приложение передаёт workspace/company, маршруты, active id и footer identity.
+
+На desktop открытая панель занимает отдельную колонку с зазором `12 px` до основного контента, а не перекрывает его затемнённым overlay.
+
 ## StatusBadge

 Статус использует semantic tone: neutral, success, warning, danger или accent. Бизнес-статус приложения маппится на tone в самом приложении.
@ -104,5 +117,6 @@ Inspector владеет:
 - вертикальным ритмом;
 - раскладкой label/control.

-Engine продолжает владеть определениями полей, типами нод и сохранением значений.
+Для Engine Environment Settings desktop-контракт точный: окно `390 px`, рабочая колонка `330 px`, строка `154 + 14 + 162 px`, высота контрола `46 px`, section header `50 px` с радиусом `12 px`. Accent-filled section headers и полноширинные range/checker/select сохраняют геометрию исходника.

+Engine продолжает владеть определениями полей, типами нод и сохранением значений.
--- a/docs/SOURCE_BASELINE.md
+++ b/docs/SOURCE_BASELINE.md
@ -13,6 +13,8 @@
 - button/modal/dropdown primitives;
 - общая логика admin windows.

+Для точной геометрии используются `src/widgets/top-bar/TopBar.tsx`, `src/widgets/admin-overlay/AdminOverlay.tsx` и `src/styles/globals.css`: трёхосевая шапка, круглый workspace trigger, segmented navigation, profile group и левая admin panel `352 px`.
+
 Существовавший `dc-ui-guideline` использован как исходный инвентарь. Он больше не должен развиваться как независимая копия после подключения центрального репозитория.

 ## SEO и CMS
@ -36,6 +38,8 @@ CMS подтверждает необходимость DOM-пакета без

 Все остальные legacy inspectors и старые plates не участвуют в принятии решений. Их будущее приведение к новому дизайну должно идти через эту библиотеку.

+Размеры зафиксированы непосредственно по разрешённым исходникам: панель `390 px`, контент `330 px`, control row `154/14/162 px`, control height `46 px`, split-select `276/8/46 px`, section header `50 px` и radius `12 px`. Скриншоты от 10 июля 2026 года использованы как визуальная проверка, а не как замена исходному CSS.
+
 ## Task Manager / Ops

 Используются только уже стандартизированные shared patterns и документы по dropdown/modal behavior. Известные legacy CustomMenu и screen-local wrappers не являются источником компонентов.
@ -56,4 +60,3 @@ CMS подтверждает необходимость DOM-пакета без
 - различную степень accessibility.

 Поэтому библиотека фиксирует очищенный API и поведение, сохраняя происхождение решения в реестре.
-
--- a/docs/WINDOWS_AND_LAYERS.md
+++ b/docs/WINDOWS_AND_LAYERS.md
@ -53,9 +53,10 @@ Side window использует ту же механику, но placement `end
 - будущих detail/settings panels;
 - CMS/SEO side editors, если они не требуют отдельного полноэкранного workflow.

+По умолчанию это modeless-слой: он не затемняет страницу, не перехватывает клики по основной области, не закрывается по backdrop, не блокирует body scroll и не удерживает Tab внутри панели. Escape и кнопка закрытия остаются доступны. Если конкретный workflow должен быть modal, это задаётся явно, а не получается случайно из placement.
+
 ## Управление состоянием

 Библиотека не создаёт глобальный store окон. Приложение владеет тем, какое окно открыто и какие данные в нём загружены. Библиотека владеет одинаковым поведением самого слоя.

 Если приложению позже потребуется stack нескольких modeless-окон, это будет отдельный пакетный контракт, а не расширение локального z-index.
-
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "nodedc-design-guideline",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "nodedc-design-guideline",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "workspaces": [
        "packages/*",
        "apps/*"
@ -25,10 +25,10 @@
    },
    "apps/catalog": {
      "name": "@nodedc/ui-catalog",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "dependencies": {
-        "@nodedc/ui-core": "0.1.0",
-        "@nodedc/ui-react": "0.1.0",
+        "@nodedc/ui-core": "0.2.0",
+        "@nodedc/ui-react": "0.2.0",
        "react": "^19.1.0",
        "react-dom": "^19.1.0"
      },
@ -1879,27 +1879,27 @@
    },
    "packages/tokens": {
      "name": "@nodedc/tokens",
-      "version": "0.1.0"
+      "version": "0.2.0"
    },
    "packages/ui-core": {
      "name": "@nodedc/ui-core",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "dependencies": {
-        "@nodedc/tokens": "0.1.0"
+        "@nodedc/tokens": "0.2.0"
      }
    },
    "packages/ui-dom": {
      "name": "@nodedc/ui-dom",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "dependencies": {
-        "@nodedc/ui-core": "0.1.0"
+        "@nodedc/ui-core": "0.2.0"
      }
    },
    "packages/ui-react": {
      "name": "@nodedc/ui-react",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "dependencies": {
-        "@nodedc/ui-core": "0.1.0"
+        "@nodedc/ui-core": "0.2.0"
      },
      "devDependencies": {
        "@types/react": "^19.1.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "nodedc-design-guideline",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "private": true,
  "description": "Canonical NODE.DC design system, reusable UI packages and living component catalog.",
  "type": "module",
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nodedc/tokens",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "type": "module",
  "files": ["tokens.json", "tokens.css", "themes.css"],
  "exports": {
--- a/packages/tokens/tokens.css
+++ b/packages/tokens/tokens.css
@ -16,6 +16,14 @@
  --nodedc-header-logo-width: 7.25rem;
  --nodedc-header-logo-height: 1.79rem;
  --nodedc-inspector-width: 24.375rem;
+  --nodedc-inspector-inner-width: 20.625rem;
+  --nodedc-inspector-label-width: 9.625rem;
+  --nodedc-inspector-control-width: 10.125rem;
+  --nodedc-inspector-control-gap: 0.875rem;
+  --nodedc-inspector-section-radius: 0.75rem;
+  --nodedc-inspector-button-radius: 1rem;
+  --nodedc-select-toggle-width: 2.875rem;
+  --nodedc-select-gap: 0.5rem;

  --nodedc-space-1: 0.25rem;
  --nodedc-space-2: 0.5rem;
@ -53,4 +61,3 @@
  --nodedc-font-weight-medium: 620;
  --nodedc-font-weight-strong: 760;
 }
-
--- a/packages/tokens/tokens.json
+++ b/packages/tokens/tokens.json
@ -26,7 +26,13 @@
    "headerPill": { "$type": "dimension", "$value": "55.2px" },
    "logoWidth": { "$type": "dimension", "$value": "116px" },
    "logoHeight": { "$type": "dimension", "$value": "28.64px" },
-    "inspectorWidth": { "$type": "dimension", "$value": "390px" }
+    "inspectorWidth": { "$type": "dimension", "$value": "390px" },
+    "inspectorInnerWidth": { "$type": "dimension", "$value": "330px" },
+    "inspectorLabelWidth": { "$type": "dimension", "$value": "154px" },
+    "inspectorControlWidth": { "$type": "dimension", "$value": "162px" },
+    "inspectorControlGap": { "$type": "dimension", "$value": "14px" },
+    "selectToggleWidth": { "$type": "dimension", "$value": "46px" },
+    "selectGap": { "$type": "dimension", "$value": "8px" }
  },
  "space": {
    "1": { "$type": "dimension", "$value": "4px" },
@ -58,4 +64,3 @@
    "toast": { "$type": "number", "$value": 950 }
  }
 }
-
--- a/packages/ui-core/package.json
+++ b/packages/ui-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nodedc/ui-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "type": "module",
  "files": ["dist", "styles.css"],
  "main": "./dist/index.js",
@ -17,6 +17,6 @@
    "typecheck": "tsc -p tsconfig.json --noEmit"
  },
  "dependencies": {
-    "@nodedc/tokens": "0.1.0"
+    "@nodedc/tokens": "0.2.0"
  }
 }
--- a/packages/ui-core/styles.css
+++ b/packages/ui-core/styles.css
@ -15,13 +15,13 @@
  box-sizing: border-box;
 }

-:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close) {
+:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close) {
  border: 0;
  outline: 0;
  font: inherit;
 }

-:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close):focus-visible {
+:where(.nodedc-button, .nodedc-icon-button, .nodedc-checker, .nodedc-select-trigger, .nodedc-select__toggle, .nodedc-dropdown-option, .nodedc-segmented__item, .nodedc-header__nav-item, .nodedc-inspector__section-trigger, .nodedc-window__close):focus-visible {
  background-color: var(--nodedc-focus-surface);
  box-shadow: var(--nodedc-glass-control-shadow), inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.22);
 }
@ -126,6 +126,14 @@
  width: 100%;
 }

+.nodedc-button[data-shape="pill"] {
+  border-radius: var(--nodedc-radius-circle);
+}
+
+.nodedc-button[data-shape="rounded"] {
+  border-radius: var(--nodedc-inspector-button-radius);
+}
+
 .nodedc-button[data-variant="primary"],
 .nodedc-button[data-variant="accent"] {
  --nodedc-button-bg: rgb(var(--nodedc-accent-rgb));
@ -313,7 +321,6 @@ textarea.nodedc-field__control {
 }

 .nodedc-checker__indicator {
-  position: relative;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--nodedc-radius-circle);
@ -321,29 +328,11 @@ textarea.nodedc-field__control {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
 }

-.nodedc-checker__indicator::after {
-  position: absolute;
-  inset: 50% auto auto 50%;
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: var(--nodedc-radius-circle);
-  background: rgb(var(--nodedc-on-accent-rgb));
-  content: "";
-  opacity: 0;
-  transform: translate(-50%, -50%) scale(0.4);
-  transition: opacity var(--nodedc-duration-fast) ease, transform var(--nodedc-duration-fast) ease;
-}
-
 .nodedc-checker[aria-checked="true"] .nodedc-checker__indicator {
  background: rgb(var(--nodedc-accent-rgb));
  box-shadow: none;
 }

-.nodedc-checker[aria-checked="true"] .nodedc-checker__indicator::after {
-  opacity: 1;
-  transform: translate(-50%, -50%) scale(1);
-}
-
 .nodedc-range {
  --nodedc-range-progress: 50%;
  position: relative;
@ -601,6 +590,59 @@ textarea.nodedc-field__control {
  box-shadow: var(--nodedc-glass-control-shadow);
 }

+.nodedc-header__profile .nodedc-icon-button {
+  width: var(--nodedc-header-row-height);
+  height: var(--nodedc-header-row-height);
+  flex-basis: var(--nodedc-header-row-height);
+  background: transparent;
+  box-shadow: none;
+}
+
+.nodedc-header__profile-button {
+  display: inline-flex;
+  min-height: calc(var(--nodedc-header-pill-height) - 0.64rem);
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--nodedc-radius-circle);
+  outline: 0;
+  background: transparent;
+  color: var(--nodedc-text-secondary);
+  padding: 0.2rem 1.2rem;
+  font: inherit;
+  font-size: var(--nodedc-font-size-sm);
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.nodedc-header__profile-button:hover,
+.nodedc-header__profile-button:focus-visible {
+  background: var(--nodedc-glass-control-hover);
+  color: var(--nodedc-text-primary);
+}
+
+.nodedc-header__avatar {
+  display: grid;
+  width: var(--nodedc-header-row-height);
+  height: var(--nodedc-header-row-height);
+  flex: 0 0 var(--nodedc-header-row-height);
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--nodedc-radius-circle);
+  background:
+    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.72), transparent 24%),
+    linear-gradient(135deg, rgb(166, 194, 109), rgb(142, 123, 139));
+  color: rgba(8, 8, 10, 0.96);
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.nodedc-header__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .nodedc-header__workspace {
  display: inline-grid;
  width: var(--nodedc-header-row-height);
@ -649,10 +691,276 @@ textarea.nodedc-field__control {
  color: var(--nodedc-glass-control-active-text);
 }

+.nodedc-admin-panel {
+  position: relative;
+  display: grid;
+  width: min(22rem, calc(100vw - 2.5rem));
+  height: 100%;
+  min-height: 0;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  gap: 1.05rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--nodedc-radius-card);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
+    rgba(10, 10, 13, 0.9);
+  color: var(--nodedc-text-primary);
+  padding: 1.1rem;
+  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.52);
+  backdrop-filter: blur(28px);
+  -webkit-backdrop-filter: blur(28px);
+  animation: nodedc-admin-panel-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes nodedc-admin-panel-in {
+  from { opacity: 0; transform: translateX(-1.6rem); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.nodedc-admin-panel__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 3.05rem;
+}
+
+.nodedc-admin-panel__head p,
+.nodedc-admin-panel__head h2 {
+  margin: 0;
+}
+
+.nodedc-admin-panel__head p {
+  color: var(--nodedc-text-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.nodedc-admin-panel__head h2 {
+  margin-top: 0.55rem;
+  font-size: 1.15rem;
+  font-weight: 780;
+  line-height: 1.1;
+}
+
+.nodedc-admin-panel__close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  display: grid;
+  width: 2.92rem;
+  height: 2.92rem;
+  place-items: center;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: var(--nodedc-radius-circle);
+  outline: 0;
+  background: transparent;
+  color: var(--nodedc-text-secondary);
+  cursor: pointer;
+}
+
+.nodedc-admin-panel__close:hover {
+  border-color: rgba(255, 255, 255, 0.3);
+  background: var(--nodedc-glass-control-hover);
+  color: var(--nodedc-text-primary);
+}
+
+.nodedc-admin-panel__contexts,
+.nodedc-admin-panel__context-group {
+  display: grid;
+  gap: 0.48rem;
+}
+
+.nodedc-admin-panel__context-group {
+  gap: 0.28rem;
+}
+
+.nodedc-admin-panel__group-label {
+  padding-inline: 0.35rem;
+  color: var(--nodedc-text-muted);
+  font-size: 0.68rem;
+  font-weight: 850;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.nodedc-admin-context {
+  display: grid;
+  width: calc(100% + 2.2rem);
+  min-height: 3.55rem;
+  margin-inline: -1.1rem;
+  grid-template-columns: minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: var(--nodedc-radius-circle);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nodedc-text-secondary);
+  opacity: 0.72;
+}
+
+.nodedc-admin-context[data-active="true"] {
+  background: rgba(74, 74, 74, 0.5);
+  color: var(--nodedc-text-primary);
+  opacity: 1;
+}
+
+.nodedc-admin-context--split {
+  grid-template-columns: minmax(0, 1fr) 2.92rem;
+}
+
+.nodedc-admin-context__main,
+.nodedc-admin-context__toggle {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.nodedc-admin-context__main {
+  display: flex;
+  min-width: 0;
+  min-height: 3.55rem;
+  align-items: center;
+  gap: 0.65rem;
+  padding: 5px 0 5px 5px;
+  text-align: left;
+}
+
+.nodedc-admin-context__toggle {
+  display: grid;
+  width: 2.92rem;
+  place-items: center;
+  border-radius: var(--nodedc-radius-circle);
+  color: var(--nodedc-text-muted);
+}
+
+.nodedc-admin-context__toggle:hover {
+  background: var(--nodedc-glass-control-hover);
+  color: var(--nodedc-text-primary);
+}
+
+.nodedc-admin-context__icon,
+.nodedc-admin-panel__nav-icon {
+  display: grid;
+  width: 2.92rem;
+  height: 2.92rem;
+  flex: 0 0 2.92rem;
+  place-items: center;
+  border-radius: var(--nodedc-radius-circle);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--nodedc-text-secondary);
+}
+
+.nodedc-admin-context__body {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+}
+
+.nodedc-admin-context__body strong,
+.nodedc-admin-context__body small {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodedc-admin-context__body strong {
+  font-size: 0.92rem;
+  font-weight: 800;
+}
+
+.nodedc-admin-context__body small {
+  color: var(--nodedc-text-muted);
+  font-size: 0.72rem;
+  font-weight: 750;
+}
+
+.nodedc-admin-panel__nav {
+  display: grid;
+  width: calc(100% + 2.2rem);
+  min-height: 0;
+  margin-inline: -1.1rem;
+  align-content: start;
+  gap: 0.22rem;
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.nodedc-admin-panel__nav::-webkit-scrollbar {
+  display: none;
+}
+
+.nodedc-admin-panel__nav-item,
+.nodedc-admin-panel__footer {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: 3.55rem;
+  align-items: center;
+  gap: 0.86rem;
+  border: 0;
+  border-radius: var(--nodedc-radius-circle);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--nodedc-text-secondary);
+  padding: 5px 0.9rem 5px calc(5px + 2.92rem + 0.86rem);
+  font: inherit;
+  font-size: 0.91rem;
+  font-weight: 570;
+  text-align: left;
+  opacity: 0.66;
+}
+
+.nodedc-admin-panel__nav-item {
+  cursor: pointer;
+  transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
+}
+
+.nodedc-admin-panel__nav-item:hover {
+  background: rgba(255, 255, 255, 0.085);
+  color: var(--nodedc-text-primary);
+  opacity: 0.92;
+  transform: translateY(-1px);
+}
+
+.nodedc-admin-panel__nav-item[data-active="true"] {
+  background: rgba(255, 255, 255, 0.115);
+  color: var(--nodedc-text-primary);
+  opacity: 1;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), 0 10px 22px rgba(0, 0, 0, 0.12);
+}
+
+.nodedc-admin-panel__nav-icon {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  background: rgba(255, 255, 255, 0.045);
+  transform: translateY(-50%);
+}
+
+.nodedc-admin-panel__nav-item[data-active="true"] .nodedc-admin-panel__nav-icon {
+  background: rgba(247, 248, 244, 0.96);
+  color: rgb(var(--nodedc-on-accent-rgb));
+}
+
+.nodedc-admin-panel__footer {
+  width: calc(100% + 2.2rem);
+  margin-inline: -1.1rem;
+  opacity: 0.82;
+}
+
 .nodedc-dropdown-anchor {
  display: inline-flex;
 }

+.nodedc-dropdown-anchor.nodedc-select-anchor {
+  display: block;
+  width: 100%;
+}
+
 .nodedc-dropdown-surface {
  position: fixed;
  z-index: var(--nodedc-layer-popover);
@ -756,6 +1064,83 @@ textarea.nodedc-field__control {
  line-height: 1.25;
 }

+.nodedc-select {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.nodedc-select__control {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) var(--nodedc-select-toggle-width);
+  gap: var(--nodedc-select-gap);
+}
+
+.nodedc-select__value {
+  display: flex;
+  height: var(--nodedc-control-height);
+  min-width: 0;
+  align-items: center;
+  gap: var(--nodedc-space-2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--nodedc-radius-control-compact);
+  background: var(--nodedc-field-bg);
+  color: var(--nodedc-text-primary);
+  padding: 0 0.95rem;
+  box-shadow: var(--nodedc-glass-control-shadow);
+  font-size: var(--nodedc-font-size-md);
+  font-weight: var(--nodedc-font-weight-medium);
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodedc-select__value > span:last-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodedc-select__toggle {
+  display: inline-grid;
+  width: var(--nodedc-select-toggle-width);
+  height: var(--nodedc-control-height);
+  place-items: center;
+  border: 0;
+  border-radius: var(--nodedc-radius-control-compact);
+  outline: 0;
+  background: var(--nodedc-glass-control-bg);
+  color: var(--nodedc-text-primary);
+  padding: 0;
+  box-shadow: var(--nodedc-glass-control-shadow);
+  cursor: pointer;
+}
+
+.nodedc-select__toggle:hover:not(:disabled),
+.nodedc-select__toggle[aria-expanded="true"] {
+  background: var(--nodedc-glass-control-hover);
+}
+
+.nodedc-select__toggle:focus-visible {
+  background: var(--nodedc-focus-surface);
+  box-shadow: var(--nodedc-glass-control-shadow), inset 0 0 0 1px rgba(var(--nodedc-accent-rgb), 0.22);
+}
+
+.nodedc-dropdown-surface.nodedc-select__menu {
+  gap: 0.125rem;
+  border-radius: var(--nodedc-radius-control);
+  background: var(--nodedc-field-bg);
+  padding: 0.4375rem;
+}
+
+.nodedc-select__menu .nodedc-dropdown-option {
+  min-height: 2.625rem;
+  border-radius: var(--nodedc-radius-control-compact);
+}
+
 .nodedc-select-trigger {
  display: grid;
  width: 100%;
@ -799,6 +1184,10 @@ textarea.nodedc-field__control {
  transform: translateY(2px) rotate(225deg);
 }

+.nodedc-select__toggle[aria-expanded="true"] .nodedc-select-trigger__chevron {
+  transform: translateY(2px) rotate(225deg);
+}
+
 .nodedc-overlay {
  position: fixed;
  z-index: var(--nodedc-layer-overlay);
@ -815,7 +1204,11 @@ textarea.nodedc-field__control {

 .nodedc-overlay[data-placement="end"] {
  place-items: end;
-  padding-top: 5.75rem;
+  padding: 5.75rem 1.5rem 1.5rem;
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  pointer-events: none;
 }

@keyframes nodedc-overlay-in {
@ -853,6 +1246,20 @@ textarea.nodedc-field__control {
  width: min(var(--nodedc-inspector-width), calc(100vw - 3rem));
  max-height: calc(100vh - 7.25rem);
  border-radius: var(--nodedc-radius-panel);
+  pointer-events: auto;
+}
+
+.nodedc-window[data-placement="end"] .nodedc-window__head {
+  min-height: 4.875rem;
+  padding: 1.125rem 0.75rem 0.875rem 1.625rem;
+}
+
+.nodedc-window[data-placement="end"] .nodedc-window__body {
+  padding: 0 0.75rem 1.125rem;
+}
+
+.nodedc-window[data-placement="end"] .nodedc-window__close {
+  border-radius: var(--nodedc-inspector-button-radius);
 }

@keyframes nodedc-window-in {
@ -998,6 +1405,7 @@ textarea.nodedc-field__control {

 .nodedc-inspector {
  display: grid;
+  width: min(var(--nodedc-inspector-inner-width), 100%);
  gap: 1px;
 }

@ -1018,7 +1426,7 @@ textarea.nodedc-field__control {
  min-height: 3.125rem;
  align-content: center;
  gap: 0.2rem;
-  border-radius: var(--nodedc-radius-control-compact);
+  border-radius: var(--nodedc-inspector-section-radius);
  background: var(--nodedc-glass-control-bg);
  color: var(--nodedc-text-secondary);
  padding: 0.55rem 0.75rem;
@ -1033,7 +1441,8 @@ textarea.nodedc-field__control {
  color: var(--nodedc-text-primary);
 }

-.nodedc-inspector__section-trigger[data-active="true"] {
+.nodedc-inspector__section-trigger[data-active="true"],
+.nodedc-inspector__section-trigger[data-tone="accent"] {
  background: rgb(var(--nodedc-accent-rgb));
  color: rgb(var(--nodedc-on-accent-rgb));
 }
@ -1066,10 +1475,11 @@ textarea.nodedc-field__control {

 .nodedc-control-row {
  display: grid;
+  width: min(var(--nodedc-inspector-inner-width), 100%);
  min-height: var(--nodedc-control-height);
-  grid-template-columns: minmax(7rem, 1fr) minmax(10rem, 1.1fr);
+  grid-template-columns: var(--nodedc-inspector-label-width) var(--nodedc-inspector-control-width);
  align-items: center;
-  gap: var(--nodedc-space-3);
+  gap: var(--nodedc-inspector-control-gap);
 }

 .nodedc-control-row[data-layout="stack"] {
@ -1081,7 +1491,7 @@ textarea.nodedc-field__control {
 .nodedc-control-row__label {
  color: var(--nodedc-text-secondary);
  font-size: var(--nodedc-font-size-sm);
-  font-weight: var(--nodedc-font-weight-medium);
+  font-weight: var(--nodedc-font-weight-regular);
  line-height: 1.3;
 }

@ -1129,6 +1539,10 @@ textarea.nodedc-field__control {
    padding: 0.875rem;
  }

+  .nodedc-window[data-placement="end"] .nodedc-window__body {
+    padding-inline: 0.75rem;
+  }
+
  .nodedc-control-row {
    grid-template-columns: 1fr;
    align-items: stretch;
--- a/packages/ui-dom/package.json
+++ b/packages/ui-dom/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nodedc/ui-dom",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/index.js",
@ -16,6 +16,6 @@
    "typecheck": "tsc -p tsconfig.json --noEmit"
  },
  "dependencies": {
-    "@nodedc/ui-core": "0.1.0"
+    "@nodedc/ui-core": "0.2.0"
  }
 }
--- a/packages/ui-react/package.json
+++ b/packages/ui-react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@nodedc/ui-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/index.js",
@ -16,7 +16,7 @@
    "typecheck": "tsc -p tsconfig.json --noEmit"
  },
  "dependencies": {
-    "@nodedc/ui-core": "0.1.0"
+    "@nodedc/ui-core": "0.2.0"
  },
  "peerDependencies": {
    "react": ">=18",
--- a/packages/ui-react/src/AdminNavigationPanel.tsx
+++ b/packages/ui-react/src/AdminNavigationPanel.tsx
@ -0,0 +1,102 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn";
+
+export interface AdminNavigationContext {
+  id: string;
+  label: string;
+  description?: string;
+  groupLabel?: string;
+  icon?: ReactNode;
+  active?: boolean;
+  onSelect?: () => void;
+  onToggle?: () => void;
+}
+
+export interface AdminNavigationItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+}
+
+export interface AdminNavigationPanelProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: string;
+  title: ReactNode;
+  contexts?: AdminNavigationContext[];
+  items: AdminNavigationItem[];
+  activeId?: string;
+  footer?: ReactNode;
+  closeLabel?: string;
+  onClose: () => void;
+  onItemChange: (id: string) => void;
+}
+
+export function AdminNavigationPanel({
+  eyebrow = "NODE.DC",
+  title,
+  contexts = [],
+  items,
+  activeId,
+  footer,
+  closeLabel = "Закрыть администрирование",
+  onClose,
+  onItemChange,
+  className,
+  ...props
+}: AdminNavigationPanelProps) {
+  return (
+    <aside className={cn("nodedc-admin-panel", className)} {...props}>
+      <header className="nodedc-admin-panel__head">
+        <div>
+          <p>{eyebrow}</p>
+          <h2>{title}</h2>
+        </div>
+        <button type="button" className="nodedc-admin-panel__close" aria-label={closeLabel} onClick={onClose}>
+          <span className="nodedc-close-mark" aria-hidden="true" />
+        </button>
+      </header>
+
+      <div className="nodedc-admin-panel__contexts">
+        {contexts.map((context) => (
+          <div className="nodedc-admin-panel__context-group" key={context.id}>
+            {context.groupLabel ? <span className="nodedc-admin-panel__group-label">{context.groupLabel}</span> : null}
+            <div
+              className={cn("nodedc-admin-context", context.onToggle && "nodedc-admin-context--split")}
+              data-active={context.active ? "true" : undefined}
+            >
+              <button type="button" className="nodedc-admin-context__main" onClick={context.onSelect}>
+                <span className="nodedc-admin-context__icon" aria-hidden="true">{context.icon}</span>
+                <span className="nodedc-admin-context__body">
+                  <strong>{context.label}</strong>
+                  {context.description ? <small>{context.description}</small> : null}
+                </span>
+              </button>
+              {context.onToggle ? (
+                <button type="button" className="nodedc-admin-context__toggle" aria-label={`Выбрать: ${context.label}`} onClick={context.onToggle}>
+                  <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <nav className="nodedc-admin-panel__nav" aria-label="Разделы администрирования">
+        {items.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            className="nodedc-admin-panel__nav-item"
+            data-active={activeId === item.id ? "true" : undefined}
+            onClick={() => onItemChange(item.id)}
+          >
+            <span className="nodedc-admin-panel__nav-icon" aria-hidden="true">{item.icon}</span>
+            <span>{item.label}</span>
+          </button>
+        ))}
+      </nav>
+
+      {footer ? <footer className="nodedc-admin-panel__footer">{footer}</footer> : null}
+    </aside>
+  );
+}
+
--- a/packages/ui-react/src/AppHeader.tsx
+++ b/packages/ui-react/src/AppHeader.tsx
@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 import { cn } from "./cn";

 export interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
@ -41,6 +41,23 @@ export function HeaderProfile({ children, className, ...props }: HTMLAttributes<
  return <div className={cn("nodedc-header__profile", className)} {...props}>{children}</div>;
 }

+export function HeaderProfileButton({ className, children, type = "button", ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
+  return <button type={type} className={cn("nodedc-header__profile-button", className)} {...props}>{children}</button>;
+}
+
+export interface HeaderAvatarProps extends HTMLAttributes<HTMLSpanElement> {
+  label: string;
+  imageUrl?: string;
+}
+
+export function HeaderAvatar({ label, imageUrl, className, ...props }: HeaderAvatarProps) {
+  return (
+    <span className={cn("nodedc-header__avatar", className)} title={label} {...props}>
+      {imageUrl ? <img src={imageUrl} alt="" /> : label.slice(0, 2).toUpperCase()}
+    </span>
+  );
+}
+
 export interface HeaderWorkspaceProps extends HTMLAttributes<HTMLSpanElement> {
  label: string;
  imageUrl?: string;
@ -53,4 +70,3 @@ export function HeaderWorkspace({ label, imageUrl, className, ...props }: Header
    </span>
  );
 }
-
--- a/packages/ui-react/src/Button.tsx
+++ b/packages/ui-react/src/Button.tsx
@ -4,11 +4,13 @@ import { cn } from "./cn";

 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "accent";
 export type ButtonSize = "default" | "compact";
+export type ButtonShape = "default" | "pill" | "rounded";

 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  width?: "auto" | "full";
+  shape?: ButtonShape;
  accent?: RgbTuple;
  icon?: ReactNode;
 }
@ -17,6 +19,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
    variant = "secondary",
    size = "default",
    width = "auto",
+    shape = "default",
    accent,
    icon,
    className,
@ -34,6 +37,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
        data-variant={variant}
        data-size={size === "default" ? undefined : size}
        data-width={width === "auto" ? undefined : width}
+        data-shape={shape === "default" ? undefined : shape}
        style={accentStyle ? { ...accentStyle, ...style } : style}
        {...props}
      >
--- a/packages/ui-react/src/Inspector.tsx
+++ b/packages/ui-react/src/Inspector.tsx
@ -8,6 +8,7 @@ export interface InspectorSectionSpec {
  group?: string;
  content: ReactNode;
  disabled?: boolean;
+  tone?: "default" | "accent";
 }

 export interface InspectorProps {
@ -64,6 +65,7 @@ export function Inspector({
                  className="nodedc-inspector__section-trigger"
                  data-open={isOpen ? "true" : undefined}
                  data-active={activeId === section.id ? "true" : undefined}
+                  data-tone={section.tone === "accent" ? "accent" : undefined}
                  aria-expanded={isOpen}
                  disabled={section.disabled}
                  onClick={() => toggle(section.id)}
@ -98,4 +100,3 @@ export function ControlRow({ label, children, layout = "inline", className }: Co
    </div>
  );
 }
-
--- a/packages/ui-react/src/Select.tsx
+++ b/packages/ui-react/src/Select.tsx
@ -11,6 +11,8 @@ export interface SelectOption<T extends string> {
  disabled?: boolean;
 }

+export type SelectVariant = "integrated" | "split";
+
 export interface SelectProps<T extends string> {
  value: T;
  options: Array<SelectOption<T>>;
@ -23,6 +25,7 @@ export interface SelectProps<T extends string> {
  minMenuWidth?: number;
  menuWidth?: number | "anchor";
  disabled?: boolean;
+  variant?: SelectVariant;
  className?: string;
  triggerClassName?: string;
  menuClassName?: string;
@ -40,6 +43,7 @@ export function Select<T extends string>({
  minMenuWidth = 180,
  menuWidth = "anchor",
  disabled = false,
+  variant = "integrated",
  className,
  triggerClassName,
  menuClassName,
@ -54,13 +58,13 @@ export function Select<T extends string>({

  return (
    <Dropdown
-      className={className}
+      className={cn("nodedc-select-anchor", className)}
      placement={placement}
      minWidth={minMenuWidth}
      width={menuWidth}
      disabled={disabled}
      surfaceRole="listbox"
-      surfaceClassName={menuClassName}
+      surfaceClassName={cn(variant === "split" && "nodedc-select__menu", menuClassName)}
      trigger={({ open, toggle, setTriggerRef, surfaceId }) => {
        const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
          if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
@ -68,6 +72,32 @@ export function Select<T extends string>({
            if (!open) toggle();
          }
        };
+        if (variant === "split") {
+          return (
+            <div className={cn("nodedc-select", triggerClassName)}>
+              <div className="nodedc-select__control">
+                <div ref={setTriggerRef} className="nodedc-select__value">
+                  {selected?.icon ? <span className="nodedc-select__value-icon">{selected.icon}</span> : null}
+                  <span>{selected?.label ?? "—"}</span>
+                </div>
+                <button
+                  type="button"
+                  className="nodedc-select__toggle"
+                  aria-label={label}
+                  aria-haspopup="listbox"
+                  aria-controls={surfaceId}
+                  aria-expanded={open}
+                  disabled={disabled}
+                  onClick={toggle}
+                  onKeyDown={handleKeyDown}
+                >
+                  <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+          );
+        }
+
        return (
          <button
            ref={setTriggerRef}
@ -126,4 +156,3 @@ export function Select<T extends string>({
    </Dropdown>
  );
 }
-
--- a/packages/ui-react/src/Window.tsx
+++ b/packages/ui-react/src/Window.tsx
@ -33,6 +33,7 @@ export interface WindowProps extends Omit<HTMLAttributes<HTMLDivElement>, "title
  closeOnBackdrop?: boolean;
  closeOnEscape?: boolean;
  lockBodyScroll?: boolean;
+  trapFocus?: boolean;
  onClose: () => void;
 }

@ -45,9 +46,10 @@ export function Window({
  size = "md",
  placement = "center",
  closeLabel = "Закрыть",
-  closeOnBackdrop = true,
+  closeOnBackdrop,
  closeOnEscape = true,
-  lockBodyScroll = true,
+  lockBodyScroll,
+  trapFocus,
  onClose,
  className,
  ...props
@ -55,12 +57,14 @@ export function Window({
  const titleId = useId();
  const descriptionId = useId();
  const dialogRef = useRef<HTMLDivElement>(null);
+  const shouldLockBodyScroll = lockBodyScroll ?? placement === "center";
+  const shouldTrapFocus = trapFocus ?? placement === "center";

  useEffect(() => {
    if (!open || typeof document === "undefined") return;
    const previousActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    const previousOverflow = document.body.style.overflow;
-    if (lockBodyScroll) document.body.style.overflow = "hidden";
+    if (shouldLockBodyScroll) document.body.style.overflow = "hidden";

    const frame = window.requestAnimationFrame(() => {
      const firstFocusable = dialogRef.current?.querySelector<HTMLElement>(focusableSelector);
@ -73,7 +77,7 @@ export function Window({
        onClose();
        return;
      }
-      if (event.key !== "Tab" || !dialogRef.current) return;
+      if (event.key !== "Tab" || !shouldTrapFocus || !dialogRef.current) return;
      const focusable = Array.from(dialogRef.current.querySelectorAll<HTMLElement>(focusableSelector));
      if (focusable.length === 0) {
        event.preventDefault();
@ -95,15 +99,17 @@ export function Window({
    return () => {
      window.cancelAnimationFrame(frame);
      document.removeEventListener("keydown", handleKeyDown);
-      if (lockBodyScroll) document.body.style.overflow = previousOverflow;
+      if (shouldLockBodyScroll) document.body.style.overflow = previousOverflow;
      previousActiveElement?.focus();
    };
-  }, [closeOnEscape, lockBodyScroll, onClose, open]);
+  }, [closeOnEscape, onClose, open, shouldLockBodyScroll, shouldTrapFocus]);

  if (!open || typeof document === "undefined") return null;

+  const allowBackdropClose = closeOnBackdrop ?? placement === "center";
+
  const handleBackdropPointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    if (closeOnBackdrop && event.target === event.currentTarget) onClose();
+    if (allowBackdropClose && event.target === event.currentTarget) onClose();
  };

  return createPortal(
@ -114,7 +120,7 @@ export function Window({
        data-size={size === "md" ? undefined : size}
        data-placement={placement}
        role="dialog"
-        aria-modal="true"
+        aria-modal={placement === "center" ? "true" : undefined}
        aria-labelledby={titleId}
        aria-describedby={subtitle ? descriptionId : undefined}
        tabIndex={-1}
@ -140,4 +146,3 @@ export function Window({
 export function WindowFooterActions({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("nodedc-window__footer-actions", className)} {...props}>{children}</div>;
 }
-
--- a/packages/ui-react/src/index.ts
+++ b/packages/ui-react/src/index.ts
@ -1,4 +1,5 @@
 export * from "./AppHeader";
+export * from "./AdminNavigationPanel";
 export * from "./Button";
 export * from "./Checker";
 export * from "./ConfirmationModal";
@ -11,4 +12,3 @@ export * from "./SegmentedControl";
 export * from "./Select";
 export * from "./StatusBadge";
 export * from "./Window";
-
--- a/registry/candidates.json
+++ b/registry/candidates.json
@ -42,16 +42,6 @@
      "requiredBehavior": ["toolbar", "responsive overflow", "row actions", "editable cells", "loading", "empty state"],
      "reasonNotBaseline": "The library should own presentation and interaction slots, not adopt Launcher entity schemas or Plane table models."
    },
-    {
-      "id": "side-navigation",
-      "classification": "planned-pattern",
-      "priority": "P1",
-      "referenceSources": ["launcher", "engine"],
-      "expectedPackage": "@nodedc/ui-react",
-      "dependsOn": ["glass-surface", "button", "status-badge"],
-      "requiredBehavior": ["sections", "active item", "optional nested groups", "compact viewport"],
-      "reasonNotBaseline": "Inspector accordion is implemented; application-level navigation requires a separate route-aware contract."
-    },
    {
      "id": "avatar-stack",
      "classification": "planned-primitive",
@ -124,4 +114,3 @@
    }
  ]
 }
-
--- a/registry/components.json
+++ b/registry/components.json
@ -24,6 +24,7 @@
      "domContract": ["nodedc-button", "nodedc-icon-button"],
      "summary": "Text and icon actions with shared sizing, states and computed accent contrast.",
      "variants": ["primary", "secondary", "ghost", "danger", "accent"],
+      "shapes": ["default", "pill", "rounded"],
      "rules": [
        "Icon-only actions are circular by default.",
        "Filled accent actions derive foreground contrast from the actual accent.",
@ -97,7 +98,13 @@
      "domPackage": "@nodedc/ui-dom",
      "domExports": ["createSelectController"],
      "summary": "Theme-independent selection control using the canonical dropdown layer.",
-      "behavior": ["controlled value", "optional search", "disabled options", "selected state", "portal menu"]
+      "variants": ["integrated", "split"],
+      "behavior": ["controlled value", "optional search", "disabled options", "selected state", "portal menu"],
+      "rules": [
+        "Integrated is the single-pill Hub/Launcher form.",
+        "Split is the Engine form: a separate value surface and a 46 px toggle separated by an 8 px gap.",
+        "The portal menu preserves its source-family row geometry instead of inheriting card radii."
+      ]
    },
    {
      "id": "window",
@ -108,10 +115,11 @@
      "domExports": ["createModalController"],
      "domContract": ["nodedc-overlay", "nodedc-window"],
      "summary": "Canonical controlled window for modal and right-side panel presentations.",
-      "behavior": ["portal to body", "focus entry", "focus trap", "focus restore", "Escape close", "backdrop close policy", "body scroll lock"],
+      "behavior": ["portal to body", "focus entry", "modal-only focus trap", "focus restore", "Escape close", "backdrop close policy", "modal-only body scroll lock"],
      "rules": [
        "Open state belongs to the application; focus/layer behavior belongs to the component.",
-        "The same window contract is used by Launcher, CMS and SEO; theme variables supply color differences."
+        "The same window contract is used by Launcher, CMS and SEO; theme variables supply color differences.",
+        "A right-side inspector is modeless by default: no dimming, no backdrop blur, no backdrop close, no focus trap and no body scroll lock."
      ]
    },
    {
@ -134,7 +142,7 @@
      "id": "app-header",
      "status": "baseline",
      "package": "@nodedc/ui-react",
-      "exports": ["AppHeader", "HeaderProfile", "HeaderWorkspace"],
+      "exports": ["AppHeader", "HeaderProfile", "HeaderProfileButton", "HeaderWorkspace", "HeaderAvatar"],
      "domContract": ["nodedc-header-shell", "nodedc-header"],
      "summary": "Three-axis NODE.DC application header with fixed brand geometry and composable center/right slots.",
      "anatomy": ["left brand", "optional left context", "center navigation/workspace", "right actions/profile"],
@ -143,6 +151,20 @@
        "Product routes and profile content are application data passed into stable slots."
      ]
    },
+    {
+      "id": "admin-navigation-panel",
+      "status": "baseline",
+      "package": "@nodedc/ui-react",
+      "exports": ["AdminNavigationPanel"],
+      "domContract": ["nodedc-admin-panel"],
+      "summary": "Hub-derived left administration panel with context selectors, route navigation, close action and footer identity.",
+      "anatomy": ["eyebrow and title", "close action", "workspace context", "company context", "route items", "footer identity"],
+      "rules": [
+        "The panel shell, full-bleed pills and icon circles are library geometry; routes and identity data remain application-owned.",
+        "The desktop panel is 352 px wide with a 21.6 px shell radius and opens beside, not over, the main Hub content.",
+        "Active route state uses the active surface and icon contrast from the theme."
+      ]
+    },
    {
      "id": "status-badge",
      "status": "baseline",
@ -160,9 +182,10 @@
      "summary": "Accordion settings/definition inspector derived only from the redesigned Engine environment and NDC agent inspector.",
      "rules": [
        "Legacy Engine inspectors are not reference implementations.",
-        "Domain-specific field definitions remain in Engine; reusable layout and controls live here."
+        "Domain-specific field definitions remain in Engine; reusable layout and controls live here.",
+        "Desktop Engine geometry is fixed at 390 px panel, 330 px content, 154/14/162 px control rows and 50 px section headers with a 12 px radius.",
+        "Accent-filled section headers belong to Environment Settings; neutral headers remain available for other approved inspector contexts."
      ]
    }
  ]
 }
-
--- a/registry/registry.json
+++ b/registry/registry.json
@ -1,6 +1,6 @@
 {
  "schemaVersion": "1.0.0",
-  "libraryVersion": "0.1.0",
+  "libraryVersion": "0.2.0",
  "name": "NODE.DC Design System",
  "purpose": "Canonical code-level UI system for current and future NODE.DC applications.",
  "packages": [