From 11ad4f8eb36f2b6019c9d7fd5a1cea1fb908c6ce Mon Sep 17 00:00:00 2001
From: Andrey <drmariarty00@gmail.com>
Date: Sun, 19 Jul 2026 23:45:13 +0300
Subject: [PATCH] :memo: docs(channels): add ADR-HUB-0037 and SPEC-HUB-0027
 with design baseline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Канал обработки становится объектом управления: список, карточка,
создание, политика, подключения и счётчики. Разделы AI-агентов и знаний
не затрагиваются — связь с агентом остаётся одной строкой со ссылкой.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 design/baseline/Каналы обработки/README.md    |   80 +
 .../_adherence.oxlintrc.json                  |  508 +++
 .../_ds_bundle.js                             | 3489 +++++++++++++++++
 .../_ds_manifest.json                         |    1 +
 .../readme.md                                 |  216 +
 .../styles.css                                |    4 +
 .../tokens/colors.css                         |   88 +
 .../tokens/effects.css                        |   40 +
 .../tokens/spacing.css                        |   36 +
 .../tokens/typography.css                     |   42 +
 .../Каналы обработки/assets/custocrm-mark.svg |    4 +
 design/baseline/Каналы обработки/support.js   | 1841 +++++++++
 .../Каналы обработки/Каналы Baseline.dc.html  |  609 +++
 13 files changed, 6958 insertions(+)
 create mode 100644 design/baseline/Каналы обработки/README.md
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_adherence.oxlintrc.json
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_bundle.js
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_manifest.json
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/readme.md
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/styles.css
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/colors.css
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/effects.css
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/spacing.css
 create mode 100644 design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/typography.css
 create mode 100644 design/baseline/Каналы обработки/assets/custocrm-mark.svg
 create mode 100644 design/baseline/Каналы обработки/support.js
 create mode 100644 design/baseline/Каналы обработки/Каналы Baseline.dc.html

diff --git a/design/baseline/Каналы обработки/README.md b/design/baseline/Каналы обработки/README.md
new file mode 100644
index 0000000..9e9dd36
--- /dev/null
+++ b/design/baseline/Каналы обработки/README.md	
@@ -0,0 +1,80 @@
+# Каналы обработки — design baseline (DG-02)
+
+Макет раздела **Компания → Каналы** (CustoCRM / ООО «Эдевс») по SPEC-HUB-0027 / ADR-HUB-0037.
+
+## Состав
+
+```
+Каналы Baseline.dc.html               — макет (6 кадров: A–E + состояния)
+support.js                            — рантайм Design Component (шаблон + логика)
+_ds/edevs-hub-design-system-…/        — дизайн-система: токены, styles.css, _ds_bundle.js
+assets/custocrm-mark.svg              — логотип CustoCRM
+```
+
+## Запуск
+
+Открыть `Каналы Baseline.dc.html` через локальный HTTP-сервер
+(из-за загрузки внешних файлов `file://` не подойдёт):
+
+```bash
+python3 -m http.server 8080
+# → http://localhost:8080/Каналы%20Baseline.dc.html
+```
+
+## Карта кадров (SPEC-HUB-0027 §11.6)
+
+- **A** — Список каналов: полная оболочка (sidebar + topbar). Фильтры-`UnderlineTabs` с count
+  (`Все · Продажи · Поддержка · Без отдела`), поиск, тумблер «Показывать архивные».
+  Плотная `baseline-table` в `table-card`. Колонки `КАНАЛ / ПРОДУКТ / ПОДКЛЮЧЕНИЯ /
+  AI-АГЕНТ / ДИАЛОГИ / ⋯`. Показано открытое меню строки с заблокированным «Удалить»
+  и причиной. §11.1.
+- **B** — Карточка канала **одной страницей, без вкладок**. Заголовок (`code · отдел ·
+  продукт`, действия «Изменить / Деактивировать / Удалить») и секции сверху вниз:
+  Назначение, Политика, Подключения, AI-агент (одна строка: имя · статус · модель +
+  ссылка «Открыть агента» на страницу агента наружу), Счётчики (открытые диалоги,
+  подключения + ссылка на диалоги). Настроек агента и знаний в карточке нет. §11.2.
+- **C** — Секция «Политика» на **непродуктовом** канале «Партнёрская линия».
+  Пять флагов с однострочным пояснением следствия; три флага (checkout P1,
+  attribution P2, обязательная идентичность P3) выключены и заблокированы с причиной. §11.2.
+- **D** — Секция «Подключения». Список подключений канала с отвязкой, действие
+  «Привязать» и модалка **переноса** подключения из другого канала (`force`),
+  с оговоркой, что диалоги остаются в прежнем канале. §11.1 / §6.6.
+- **E** — Мастер создания, **три шага** (Канал · Назначение · Подключения). Показан
+  финальный экран: канал создан, ведут его операторы, ссылка в раздел AI для создания
+  агента отдельным действием. Настроек агента и знаний в мастере нет. §11.3.
+- **S** — Состояния: пустой список (приглашение без «здесь пусто»), канал без агента
+  (секция AI-агент), архивный канал, ограниченный доступ (department scope), конфликт
+  удаления (409 с блокерами). §11.5 / §7.2.
+
+## Зафиксированные решения по открытым вопросам (README §5 задания)
+
+1. **Канал без отдела.** В колонке `КАНАЛ` под именем идёт `code · <чип «Без отдела»>` —
+   нейтральный чип на `--n-9`, а не пустая ячейка: канал читается как намеренно
+   безотдельный, а не как незаполненный черновик. Плюс отдельный таб-фильтр «Без отдела».
+   Такой канал виден только organization-scoped `channels.view` (§5.2).
+2. **Архивный канал (`isActive=false`).** Отдельный статус `Архивный` (полая точка,
+   приглушённый текст, фон строки `#fcfcfc`), а не «Выключено». По умолчанию скрыт,
+   показывается тумблером «Показывать архивные». Меню строки предлагает только
+   «Активировать». История диалогов сохраняется и доступна ссылкой из карточки
+   («История сохраняется даже после деактивации канала»).
+3. **Запрещённый инвариантом флаг политики.** Флаг выключен **и** заблокирован, рядом —
+   бейдж «Запрещено инвариантом» / «Недоступно» и однострочная причина со ссылкой на
+   инвариант (P1/P2/P3) и способ разблокировать («Назначить продукт»). Причина
+   объясняется, а не игнорируется молча при сохранении. Кадр C, флаг checkout выделен.
+4. **Колонка «Диалоги» в списке.** Оставлена. Обоснование: это дешёвый агрегат
+   (`counters.openConversations`, один запрос на список, §6.1), а открытые диалоги —
+   ключевой операционный сигнал канала. Полный разрез счётчиков (открытые диалоги и
+   подключения) остаётся в секции «Счётчики» карточки; в списке — только открытые
+   диалоги, numeric. Счётчика знаний в карточке канала нет: знания принадлежат агенту.
+
+## Технические примечания
+
+- Вёрстка — инлайн-стили поверх токенов дизайн-системы (`var(--*)` из `_ds/.../tokens`).
+  Цвета/типографика/отступы менять только через токены; сырые hex вне токенов не
+  используются (кроме служебного фона холста и подсветок строк из baseline-образца).
+- `ChannelBadge` (точка + короткий лейбл MAX/TG/Web на токенах `--channel-*`) применяется
+  экономно — только в колонке «Подключения» списка и в секции «Подключения» карточки
+  (ADR-HUB-0013).
+- Терминология: MAX/TG/Web — «Подключения»; «Канал» — сущность маршрутизации.
+- Данные — примеры; авторизация, инварианты и счётчики вычисляются на backend
+  (frontend не источник прав), см. SPEC-HUB-0027 §5–§7.
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_adherence.oxlintrc.json b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_adherence.oxlintrc.json
new file mode 100644
index 0000000..8419c5c
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_adherence.oxlintrc.json	
@@ -0,0 +1,508 @@
+{
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "react/forbid-elements": [
+      "warn",
+      {
+        "forbid": []
+      }
+    ],
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          {
+            "group": [
+              "components/cards/**",
+              "components/core/**",
+              "components/inbox/**",
+              "components/status/**",
+              "ui_kits/checkout/**",
+              "ui_kits/internal-hub/**",
+              "ui_kits/web-chat/**"
+            ],
+            "message": "Import design-system components from 'index.js', not component internals."
+          }
+        ]
+      }
+    ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system color token via var()."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via var()."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ActorBadge'] > JSXAttribute > JSXIdentifier[name!=/^(?:actor|initials|color|key|ref|className|style|children)$/]",
+        "message": "<ActorBadge> doesn't accept that prop. Declared props: actor, initials, color."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ActorBadge'] > JSXAttribute[name.name='actor'] > Literal[value!=/^(?:ai|human)$/]",
+        "message": "<ActorBadge> actor must be one of 'ai' | 'human'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='AttentionStatus'] > JSXAttribute > JSXIdentifier[name!=/^(?:level|label|key|ref|className|style|children)$/]",
+        "message": "<AttentionStatus> doesn't accept that prop. Declared props: level, label."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='AttentionStatus'] > JSXAttribute[name.name='level'] > Literal[value!=/^(?:ok|attention|critical)$/]",
+        "message": "<AttentionStatus> level must be one of 'ok' | 'attention' | 'critical'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Avatar'] > JSXAttribute > JSXIdentifier[name!=/^(?:initials|color|size|key|ref|className|style|children)$/]",
+        "message": "<Avatar> doesn't accept that prop. Declared props: initials, color, size."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|disabled|onClick|type|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: children, variant, size, disabled, onClick, type."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|secondary|ghost|danger)$/]",
+        "message": "<Button> variant must be one of 'primary' | 'secondary' | 'ghost' | 'danger'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
+        "message": "<Button> size must be one of 'sm' | 'md' | 'lg'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit)$/]",
+        "message": "<Button> type must be one of 'button' | 'submit'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ChannelBadge'] > JSXAttribute > JSXIdentifier[name!=/^(?:channel|title|key|ref|className|style|children)$/]",
+        "message": "<ChannelBadge> doesn't accept that prop. Declared props: channel, title."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ChannelBadge'] > JSXAttribute[name.name='channel'] > Literal[value!=/^(?:max|telegram|webchat)$/]",
+        "message": "<ChannelBadge> channel must be one of 'max' | 'telegram' | 'webchat'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|label|size|key|ref|className|style|children)$/]",
+        "message": "<Checkbox> doesn't accept that prop. Declared props: checked, onChange, label, size."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Checkbox'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md)$/]",
+        "message": "<Checkbox> size must be one of 'sm' | 'md'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='CommerceStatusTimeline'] > JSXAttribute > JSXIdentifier[name!=/^(?:steps|key|ref|className|style|children)$/]",
+        "message": "<CommerceStatusTimeline> doesn't accept that prop. Declared props: steps."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ConversationInboxItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|preview|channel|lastActor|initials|color|time|waiting|active|onClick|key|ref|className|style|children)$/]",
+        "message": "<ConversationInboxItem> doesn't accept that prop. Declared props: name, preview, channel, lastActor, initials, color, time, waiting, active, onClick."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ConversationInboxItem'] > JSXAttribute[name.name='channel'] > Literal[value!=/^(?:max|telegram|webchat)$/]",
+        "message": "<ConversationInboxItem> channel must be one of 'max' | 'telegram' | 'webchat'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ConversationInboxItem'] > JSXAttribute[name.name='lastActor'] > Literal[value!=/^(?:ai|human)$/]",
+        "message": "<ConversationInboxItem> lastActor must be one of 'ai' | 'human'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='DepartmentCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|meta|level|summary|icon|openLabel|onOpen|children|key|ref|className|style|children)$/]",
+        "message": "<DepartmentCard> doesn't accept that prop. Declared props: name, meta, level, summary, icon, openLabel, onOpen, children."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='DepartmentCard'] > JSXAttribute[name.name='level'] > Literal[value!=/^(?:ok|attention|critical)$/]",
+        "message": "<DepartmentCard> level must be one of 'ok' | 'attention' | 'critical'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|size|color|strokeWidth|key|ref|className|style|children)$/]",
+        "message": "<Icon> doesn't accept that prop. Declared props: name, size, color, strokeWidth."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Icon'] > JSXAttribute[name.name='name'] > Literal[value!=/^(?:dashboard|departments|employees|products|ai|integrations|settings|search|chevronDown|chevronRight|moreVertical|check|checkCircle|alertTriangle|alertCircle|xCircle|clock|refresh|arrowRight|arrowLeft|mail|lock|eye|eyeOff|card|sbp|shield|download|columns|bell|trash|edit|merge|bolt|cart|history|team|package2)$/]",
+        "message": "<Icon> name must be one of 'dashboard' | 'departments' | 'employees' | 'products' | 'ai' | 'integrations' | 'settings' | 'search' | 'chevronDown' | 'chevronRight' | 'moreVertical' | 'check' | 'checkCircle' | 'alertTriangle' | 'alertCircle' | 'xCircle' | 'clock' | 'refresh' | 'arrowRight' | 'arrowLeft' | 'mail' | 'lock' | 'eye' | 'eyeOff' | 'card' | 'sbp' | 'shield' | 'download' | 'columns' | 'bell' | 'trash' | 'edit' | 'merge' | 'bolt' | 'cart' | 'history' | 'team' | 'package2'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|size|badge|bare|label|onClick|key|ref|className|style|children)$/]",
+        "message": "<IconButton> doesn't accept that prop. Declared props: children, size, badge, bare, label, onClick."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|onChange|placeholder|label|required|type|disabled|error|hint|icon|suffix|fullWidth|key|ref|className|style|children)$/]",
+        "message": "<Input> doesn't accept that prop. Declared props: value, onChange, placeholder, label, required, type, disabled, error, hint, icon, suffix, fullWidth."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:text|email|password|tel)$/]",
+        "message": "<Input> type must be one of 'text' | 'email' | 'password' | 'tel'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IntegrationHealthCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:name|group|status|key|ref|className|style|children)$/]",
+        "message": "<IntegrationHealthCard> doesn't accept that prop. Declared props: name, group, status."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='IntegrationHealthCard'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:connected|degraded|error)$/]",
+        "message": "<IntegrationHealthCard> status must be one of 'connected' | 'degraded' | 'error'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='KnowledgeDocumentEditor'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|onTitleChange|docId|body|onBodyChange|rows|savedLabel|key|ref|className|style|children)$/]",
+        "message": "<KnowledgeDocumentEditor> doesn't accept that prop. Declared props: title, onTitleChange, docId, body, onBodyChange, rows, savedLabel."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='MetricCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|valueColor|dotColor|key|ref|className|style|children)$/]",
+        "message": "<MetricCard> doesn't accept that prop. Declared props: label, value, valueColor, dotColor."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='ProductAIReleaseCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:productName|productInitial|releaseId|live|iconBg|iconColor|stats|key|ref|className|style|children)$/]",
+        "message": "<ProductAIReleaseCard> doesn't accept that prop. Declared props: productName, productInitial, releaseId, live, iconBg, iconColor, stats."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|tone|pill|dot|dotColor|key|ref|className|style|children)$/]",
+        "message": "<Tag> doesn't accept that prop. Declared props: children, tone, pill, dot, dotColor."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|primary|success|warning|error|ai)$/]",
+        "message": "<Tag> tone must be one of 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'ai'."
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/index.js"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
+  "x-omelette": {
+    "components": {
+      "ActorBadge": {
+        "replaces": []
+      },
+      "AttentionStatus": {
+        "replaces": []
+      },
+      "Avatar": {
+        "replaces": []
+      },
+      "Button": {
+        "replaces": []
+      },
+      "ChannelBadge": {
+        "replaces": []
+      },
+      "Checkbox": {
+        "replaces": []
+      },
+      "CommerceStatusTimeline": {
+        "replaces": []
+      },
+      "ConversationInboxItem": {
+        "replaces": []
+      },
+      "DepartmentCard": {
+        "replaces": []
+      },
+      "Icon": {
+        "replaces": []
+      },
+      "IconButton": {
+        "replaces": []
+      },
+      "Input": {
+        "replaces": []
+      },
+      "IntegrationHealthCard": {
+        "replaces": []
+      },
+      "KnowledgeDocumentEditor": {
+        "replaces": []
+      },
+      "MetricCard": {
+        "replaces": []
+      },
+      "ProductAIReleaseCard": {
+        "replaces": []
+      },
+      "Tag": {
+        "replaces": []
+      }
+    },
+    "tokens": [
+      "--ai",
+      "--ai-bg",
+      "--ai-light",
+      "--ai-lighter",
+      "--border-default",
+      "--border-input",
+      "--border-strong",
+      "--channel-max",
+      "--channel-max-bg",
+      "--channel-telegram",
+      "--channel-telegram-bg",
+      "--channel-webchat",
+      "--channel-webchat-bg",
+      "--content-max",
+      "--duration-base",
+      "--duration-fast",
+      "--ease-standard",
+      "--error",
+      "--error-bg",
+      "--error-border",
+      "--error-text",
+      "--font-mono",
+      "--font-sans",
+      "--h-control",
+      "--h-control-2xl",
+      "--h-control-lg",
+      "--h-control-md",
+      "--h-control-sm",
+      "--h-control-xl",
+      "--h-topbar",
+      "--human",
+      "--info",
+      "--leading-loose",
+      "--leading-normal",
+      "--leading-relaxed",
+      "--leading-snug",
+      "--leading-tight",
+      "--n-1",
+      "--n-10",
+      "--n-11",
+      "--n-2",
+      "--n-3",
+      "--n-4",
+      "--n-5",
+      "--n-6",
+      "--n-7",
+      "--n-8",
+      "--n-9",
+      "--n-white",
+      "--primary",
+      "--primary-bg",
+      "--primary-border",
+      "--primary-hover",
+      "--primary-shadow",
+      "--product-firepage",
+      "--product-firepage-bg",
+      "--product-foxray",
+      "--product-foxray-bg",
+      "--radius-2xl",
+      "--radius-3xl",
+      "--radius-4xl",
+      "--radius-circle",
+      "--radius-lg",
+      "--radius-md",
+      "--radius-pill",
+      "--radius-sm",
+      "--radius-xl",
+      "--radius-xs",
+      "--shadow-lg",
+      "--shadow-md",
+      "--shadow-primary",
+      "--shadow-sm",
+      "--shadow-sticky",
+      "--shadow-xs",
+      "--sidebar-width",
+      "--space-1",
+      "--space-10",
+      "--space-11",
+      "--space-12",
+      "--space-13",
+      "--space-14",
+      "--space-15",
+      "--space-16",
+      "--space-17",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-7",
+      "--space-8",
+      "--space-9",
+      "--success",
+      "--success-bg",
+      "--success-bg-strong",
+      "--success-border",
+      "--success-text",
+      "--surface-card",
+      "--surface-chip",
+      "--surface-page",
+      "--surface-sunken",
+      "--text-2xl",
+      "--text-2xs",
+      "--text-2xs-tight",
+      "--text-base",
+      "--text-base-lg",
+      "--text-body",
+      "--text-disabled",
+      "--text-heading",
+      "--text-inverse",
+      "--text-lg",
+      "--text-link",
+      "--text-md",
+      "--text-secondary",
+      "--text-sm",
+      "--text-sm-lg",
+      "--text-sm-tight",
+      "--text-tertiary",
+      "--text-xl",
+      "--text-xs",
+      "--text-xs-tight",
+      "--tracking-tight",
+      "--tracking-tight-sm",
+      "--tracking-wide",
+      "--tracking-wider",
+      "--warning",
+      "--warning-bg",
+      "--warning-bg-strong",
+      "--warning-border",
+      "--warning-text",
+      "--weight-black",
+      "--weight-bold",
+      "--weight-medium",
+      "--weight-regular",
+      "--weight-semibold"
+    ],
+    "tokenKinds": {
+      "--n-1": "color",
+      "--n-2": "color",
+      "--n-3": "color",
+      "--n-4": "color",
+      "--n-5": "color",
+      "--n-6": "color",
+      "--n-7": "color",
+      "--n-8": "color",
+      "--n-9": "color",
+      "--n-10": "color",
+      "--n-11": "color",
+      "--n-white": "color",
+      "--primary": "color",
+      "--primary-hover": "color",
+      "--primary-bg": "color",
+      "--primary-border": "color",
+      "--primary-shadow": "shadow",
+      "--success": "color",
+      "--success-text": "font",
+      "--success-bg": "color",
+      "--success-bg-strong": "color",
+      "--success-border": "color",
+      "--warning": "color",
+      "--warning-text": "font",
+      "--warning-bg": "color",
+      "--warning-bg-strong": "color",
+      "--warning-border": "color",
+      "--error": "color",
+      "--error-text": "font",
+      "--error-bg": "color",
+      "--error-border": "color",
+      "--info": "color",
+      "--ai": "color",
+      "--ai-light": "color",
+      "--ai-lighter": "color",
+      "--ai-bg": "color",
+      "--human": "color",
+      "--channel-max": "color",
+      "--channel-max-bg": "color",
+      "--channel-telegram": "color",
+      "--channel-telegram-bg": "color",
+      "--channel-webchat": "color",
+      "--channel-webchat-bg": "color",
+      "--product-firepage": "color",
+      "--product-firepage-bg": "color",
+      "--product-foxray": "color",
+      "--product-foxray-bg": "color",
+      "--surface-page": "color",
+      "--surface-card": "color",
+      "--surface-sunken": "color",
+      "--surface-chip": "color",
+      "--text-heading": "font",
+      "--text-body": "font",
+      "--text-secondary": "font",
+      "--text-tertiary": "font",
+      "--text-disabled": "font",
+      "--text-inverse": "font",
+      "--text-link": "font",
+      "--border-default": "color",
+      "--border-input": "color",
+      "--border-strong": "color",
+      "--font-sans": "font",
+      "--font-mono": "font",
+      "--text-2xl": "font",
+      "--text-xl": "font",
+      "--text-lg": "font",
+      "--text-md": "font",
+      "--text-base-lg": "font",
+      "--text-base": "font",
+      "--text-sm-lg": "font",
+      "--text-sm": "font",
+      "--text-sm-tight": "font",
+      "--text-xs": "font",
+      "--text-xs-tight": "font",
+      "--text-2xs": "font",
+      "--text-2xs-tight": "font",
+      "--weight-regular": "font",
+      "--weight-medium": "font",
+      "--weight-semibold": "font",
+      "--weight-bold": "font",
+      "--weight-black": "font",
+      "--tracking-tight": "font",
+      "--tracking-tight-sm": "font",
+      "--tracking-wide": "font",
+      "--tracking-wider": "font",
+      "--leading-tight": "font",
+      "--leading-snug": "font",
+      "--leading-normal": "font",
+      "--leading-relaxed": "font",
+      "--leading-loose": "font",
+      "--space-1": "spacing",
+      "--space-2": "spacing",
+      "--space-3": "spacing",
+      "--space-4": "spacing",
+      "--space-5": "spacing",
+      "--space-6": "spacing",
+      "--space-7": "spacing",
+      "--space-8": "spacing",
+      "--space-9": "spacing",
+      "--space-10": "spacing",
+      "--space-11": "spacing",
+      "--space-12": "spacing",
+      "--space-13": "spacing",
+      "--space-14": "spacing",
+      "--space-15": "spacing",
+      "--space-16": "spacing",
+      "--space-17": "spacing",
+      "--h-control-sm": "spacing",
+      "--h-control-md": "spacing",
+      "--h-control": "spacing",
+      "--h-control-lg": "spacing",
+      "--h-control-xl": "spacing",
+      "--h-control-2xl": "spacing",
+      "--h-topbar": "spacing",
+      "--sidebar-width": "spacing",
+      "--content-max": "spacing",
+      "--radius-xs": "radius",
+      "--radius-sm": "radius",
+      "--radius-md": "radius",
+      "--radius-lg": "radius",
+      "--radius-xl": "radius",
+      "--radius-2xl": "radius",
+      "--radius-3xl": "radius",
+      "--radius-4xl": "radius",
+      "--radius-pill": "radius",
+      "--radius-circle": "radius",
+      "--shadow-xs": "shadow",
+      "--shadow-sm": "shadow",
+      "--shadow-md": "shadow",
+      "--shadow-lg": "shadow",
+      "--shadow-sticky": "shadow",
+      "--shadow-primary": "shadow",
+      "--ease-standard": "other",
+      "--duration-fast": "other",
+      "--duration-base": "other"
+    },
+    "fontFamilies": []
+  }
+}
\ No newline at end of file
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_bundle.js b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_bundle.js
new file mode 100644
index 0000000..c815d2b
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_bundle.js	
@@ -0,0 +1,3489 @@
+/* @ds-bundle: {"format":4,"namespace":"EdevsHubDesignSystem_e4c9df","components":[{"name":"CommerceStatusTimeline","sourcePath":"components/cards/CommerceStatusTimeline.jsx"},{"name":"DepartmentCard","sourcePath":"components/cards/DepartmentCard.jsx"},{"name":"IntegrationHealthCard","sourcePath":"components/cards/IntegrationHealthCard.jsx"},{"name":"MetricCard","sourcePath":"components/cards/MetricCard.jsx"},{"name":"ProductAIReleaseCard","sourcePath":"components/cards/ProductAIReleaseCard.jsx"},{"name":"Avatar","sourcePath":"components/core/Avatar.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Checkbox","sourcePath":"components/core/Checkbox.jsx"},{"name":"Icon","sourcePath":"components/core/Icon.jsx"},{"name":"ICON_NAMES","sourcePath":"components/core/Icon.jsx"},{"name":"IconButton","sourcePath":"components/core/IconButton.jsx"},{"name":"Input","sourcePath":"components/core/Input.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"ConversationInbox","sourcePath":"components/inbox/ConversationInbox.jsx"},{"name":"KnowledgeDocumentEditor","sourcePath":"components/inbox/KnowledgeDocumentEditor.jsx"},{"name":"ActorBadge","sourcePath":"components/status/ActorBadge.jsx"},{"name":"AttentionStatus","sourcePath":"components/status/AttentionStatus.jsx"},{"name":"ChannelBadge","sourcePath":"components/status/ChannelBadge.jsx"}],"sourceHashes":{"components/cards/CommerceStatusTimeline.jsx":"a71f119a6bcb","components/cards/DepartmentCard.jsx":"743b4f9632ec","components/cards/IntegrationHealthCard.jsx":"4888c60e9532","components/cards/MetricCard.jsx":"4edb7590ee04","components/cards/ProductAIReleaseCard.jsx":"53de80d598b8","components/core/Avatar.jsx":"e963633b7162","components/core/Button.jsx":"52b57248ad92","components/core/Checkbox.jsx":"412f119cdbb2","components/core/Icon.jsx":"f6c5a199fcf5","components/core/IconButton.jsx":"e8c066b43714","components/core/Input.jsx":"4561efdc9997","components/core/Tag.jsx":"48a8a3543145","components/inbox/ConversationInbox.jsx":"ea2ad8f6a755","components/inbox/KnowledgeDocumentEditor.jsx":"f97e9057fb25","components/status/ActorBadge.jsx":"11e6274f6875","components/status/AttentionStatus.jsx":"a22cbb5b37d2","components/status/ChannelBadge.jsx":"e15a0c45d45f","ui_kits/checkout/CheckoutWidget.jsx":"6d563825a7e0","ui_kits/internal-hub/AuthLoginPage.jsx":"b3ee3d8ea9ab","ui_kits/internal-hub/ClientsPage.jsx":"0a9fb9f5b11d","ui_kits/internal-hub/CommandCenterPage.jsx":"870dd4cd0c22","ui_kits/internal-hub/HubShell.jsx":"ce0eb4d2dc70","ui_kits/web-chat/WebChatWidget.jsx":"e4099f49f9c0"},"inlinedExternals":[],"unexposedExports":[]} */
+
+(() => {
+
+const __ds_ns = (window.EdevsHubDesignSystem_e4c9df = window.EdevsHubDesignSystem_e4c9df || {});
+
+const __ds_scope = {};
+
+(__ds_ns.__errors = __ds_ns.__errors || []);
+
+// components/cards/CommerceStatusTimeline.jsx
+try { (() => {
+const TONE = {
+  done: "#3f8f3f",
+  active: "var(--primary)",
+  pending: "var(--n-6)"
+};
+
+/* CommerceStatusTimeline — separates "payment confirmed" from "product
+   delivered" as distinct steps (SPEC-HUB-0007: payment and delivery states
+   must never be conflated). */
+function CommerceStatusTimeline(props) {
+  return React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 11
+    }
+  }, (props.steps ?? []).map((s, i) => React.createElement("div", {
+    key: i,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 11
+    }
+  }, s.state === "done" ? React.createElement("div", {
+    style: {
+      width: 22,
+      height: 22,
+      borderRadius: "50%",
+      background: "var(--success-bg-strong)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: 13,
+    height: 13,
+    fill: "none",
+    stroke: TONE.done,
+    strokeWidth: 2.6,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React.createElement("path", {
+    d: "M20 6 9 17l-5-5"
+  }))) : s.state === "active" ? React.createElement("div", {
+    style: {
+      width: 22,
+      height: 22,
+      borderRadius: "50%",
+      border: `2px solid ${TONE.active}`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none",
+      animation: "hub-pulse 1.6s ease-in-out infinite"
+    }
+  }, React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: "50%",
+      background: TONE.active
+    }
+  })) : React.createElement("div", {
+    style: {
+      width: 22,
+      height: 22,
+      borderRadius: "50%",
+      border: `2px solid ${TONE.pending}`,
+      flex: "none"
+    }
+  }), React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      color: s.state === "active" ? "var(--text-body)" : "var(--text-secondary)",
+      fontWeight: s.state === "active" ? 600 : 400
+    }
+  }, s.label))));
+}
+Object.assign(__ds_scope, { CommerceStatusTimeline });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/CommerceStatusTimeline.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/IntegrationHealthCard.jsx
+try { (() => {
+const STATUS = {
+  connected: {
+    dot: "#52c41a",
+    label: "Подключено",
+    color: "var(--success-text)"
+  },
+  degraded: {
+    dot: "#faad14",
+    label: "Деградация",
+    color: "var(--warning-text)"
+  },
+  error: {
+    dot: "#ff4d4f",
+    label: "Ошибка",
+    color: "var(--error-text)"
+  }
+};
+
+/* IntegrationHealthCard — one row per external integration (payments, AI
+   provider, channels, fulfillment) inside the Command Center right rail. */
+function IntegrationHealthCard(props) {
+  const s = STATUS[props.status ?? "connected"];
+  return React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 11,
+      padding: "10px 18px",
+      borderTop: "1px solid var(--n-9)"
+    }
+  }, React.createElement("span", {
+    style: {
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: s.dot,
+      flex: "none"
+    }
+  }), React.createElement("span", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, React.createElement("span", {
+    style: {
+      display: "block",
+      fontSize: 13,
+      fontWeight: 500,
+      color: "var(--text-body)",
+      lineHeight: 1.25
+    }
+  }, props.name), React.createElement("span", {
+    style: {
+      display: "block",
+      fontSize: 11,
+      color: "var(--text-disabled)"
+    }
+  }, props.group)), React.createElement("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: 500,
+      color: s.color,
+      flex: "none"
+    }
+  }, s.label));
+}
+Object.assign(__ds_scope, { IntegrationHealthCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/IntegrationHealthCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/MetricCard.jsx
+try { (() => {
+/* MetricCard — a single KPI cell: value + label only, per ADR-HUB-0013
+   ("карточки метрик должны содержать только показатель, контекст, изменение и состояние"). */
+function MetricCard(props) {
+  return React.createElement("div", {
+    style: {
+      background: "var(--surface-card)",
+      padding: "13px 15px"
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 5,
+      marginBottom: 7
+    }
+  }, props.dotColor ? React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: "50%",
+      background: props.dotColor
+    }
+  }) : null, React.createElement("span", {
+    style: {
+      fontSize: 12,
+      color: "var(--text-tertiary)"
+    }
+  }, props.label)), React.createElement("div", {
+    style: {
+      fontSize: 23,
+      fontWeight: 700,
+      color: props.valueColor ?? "var(--text-body)",
+      lineHeight: 1
+    }
+  }, props.value));
+}
+Object.assign(__ds_scope, { MetricCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/MetricCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Avatar.jsx
+try { (() => {
+function Avatar(props) {
+  const size = props.size ?? 32;
+  return React.createElement("div", {
+    style: {
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      background: props.color ?? "var(--primary)",
+      color: "#fff",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: Math.round(size * 0.38),
+      fontWeight: 600,
+      flex: "none"
+    }
+  }, props.initials);
+}
+Object.assign(__ds_scope, { Avatar });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Avatar.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Button.jsx
+try { (() => {
+const SIZES = {
+  sm: {
+    h: 30,
+    padX: 12,
+    font: "13px"
+  },
+  md: {
+    h: 36,
+    padX: 14,
+    font: "13px"
+  },
+  lg: {
+    h: 44,
+    padX: 22,
+    font: "14.5px"
+  }
+};
+function Button(props) {
+  const variant = props.variant ?? "primary";
+  const size = props.size ?? "md";
+  const disabled = !!props.disabled;
+  const s = SIZES[size] ?? SIZES.md;
+  const [hover, setHover] = React.useState(false);
+  const base = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 7,
+    height: s.h,
+    padding: `0 ${s.padX}px`,
+    borderRadius: "var(--radius-lg)",
+    fontSize: s.font,
+    fontWeight: 600,
+    fontFamily: "var(--font-sans)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    border: "1px solid transparent",
+    transition: "background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast)",
+    opacity: disabled ? 0.55 : 1,
+    whiteSpace: "nowrap"
+  };
+  const byVariant = {
+    primary: {
+      background: hover && !disabled ? "var(--primary-hover)" : "var(--primary)",
+      color: "var(--text-inverse)",
+      boxShadow: "var(--shadow-primary)"
+    },
+    secondary: {
+      background: "var(--surface-card)",
+      color: hover && !disabled ? "var(--primary)" : "var(--text-body)",
+      borderColor: hover && !disabled ? "var(--primary)" : "var(--n-6)"
+    },
+    ghost: {
+      background: hover && !disabled ? "var(--n-9)" : "transparent",
+      color: "var(--text-body)"
+    },
+    danger: {
+      background: hover && !disabled ? "#d9363e" : "var(--error)",
+      color: "var(--text-inverse)"
+    }
+  };
+  return React.createElement("button", {
+    style: {
+      ...base,
+      ...byVariant[variant]
+    },
+    disabled,
+    onClick: props.onClick,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    type: props.type ?? "button"
+  }, props.children);
+}
+Object.assign(__ds_scope, { Button });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Checkbox.jsx
+try { (() => {
+function Checkbox(props) {
+  const on = !!props.checked;
+  return React.createElement("button", {
+    type: "button",
+    onClick: props.onChange,
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 10,
+      background: "none",
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
+      textAlign: "left"
+    }
+  }, React.createElement("span", {
+    style: {
+      width: props.size === "sm" ? 17 : 20,
+      height: props.size === "sm" ? 17 : 20,
+      borderRadius: props.size === "sm" ? 5 : 6,
+      flex: "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      border: on ? "none" : "1.5px solid var(--n-6)",
+      background: on ? "var(--primary)" : "var(--surface-card)",
+      marginTop: props.label ? 1 : 0
+    }
+  }, on ? React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: props.size === "sm" ? 12 : 13,
+    height: props.size === "sm" ? 12 : 13,
+    fill: "none",
+    stroke: "#fff",
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, React.createElement("path", {
+    d: "M20 6 9 17l-5-5"
+  })) : null), props.label ? React.createElement("span", {
+    style: {
+      fontSize: 12,
+      color: "var(--text-secondary)",
+      lineHeight: 1.45
+    }
+  }, props.label) : null);
+}
+Object.assign(__ds_scope, { Checkbox });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Checkbox.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Icon.jsx
+try { (() => {
+/* Stroke icon set copied verbatim (path data) from the approved HTML baseline
+   (design/baseline/*.dc.html) — a Feather/Lucide-style outline set used
+   throughout Hub, Web Chat and Checkout. Not a bundled icon font/sprite in the
+   source repo: each screen inlines its own <svg>, so this component collects
+   the recurring ones into one reusable primitive. */
+const PATHS = {
+  dashboard: '<rect x="3" y="3" width="7" height="9" rx="1.4"/><rect x="14" y="3" width="7" height="5" rx="1.4"/><rect x="14" y="12" width="7" height="9" rx="1.4"/><rect x="3" y="16" width="7" height="5" rx="1.4"/>',
+  departments: '<path d="M3 21h18"/><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"/><path d="M9 8h1.5M13.5 8H15M9 12h1.5M13.5 12H15M9 16h1.5M13.5 16H15"/>',
+  employees: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  products: '<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/>',
+  ai: '<rect x="4" y="8" width="16" height="12" rx="2.5"/><path d="M12 8V4.5"/><circle cx="12" cy="3.5" r="1.2"/><circle cx="9" cy="13.5" r="1"/><circle cx="15" cy="13.5" r="1"/><path d="M2 13.5h2M20 13.5h2"/>',
+  integrations: '<path d="M9 8V2.5M15 8V2.5M18 8v5.5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/><path d="M12 17.5V22"/>',
+  settings: '<line x1="21" y1="6" x2="9" y2="6"/><line x1="3" y1="6" x2="5" y2="6"/><circle cx="7" cy="6" r="2"/><line x1="21" y1="12" x2="13" y2="12"/><line x1="3" y1="12" x2="9" y2="12"/><circle cx="11" cy="12" r="2"/><line x1="21" y1="18" x2="15" y2="18"/><line x1="3" y1="18" x2="11" y2="18"/><circle cx="13" cy="18" r="2"/>',
+  search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
+  chevronDown: '<polyline points="6 9 12 15 18 9"/>',
+  chevronRight: '<polyline points="9 18 15 12 9 6"/>',
+  moreVertical: '<circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  checkCircle: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4 12 14.01l-3-3"/>',
+  alertTriangle: '<path d="m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+  alertCircle: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>',
+  xCircle: '<circle cx="12" cy="12" r="9"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  refresh: '<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/>',
+  arrowRight: '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
+  arrowLeft: '<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>',
+  mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>',
+  lock: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  eye: '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
+  eyeOff: '<path d="M9.9 4.2A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a13 13 0 0 1-1.7 2.7M6.6 6.6A13 13 0 0 0 2 12s3 8 10 8a9 9 0 0 0 3.4-.6"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/><line x1="2" y1="2" x2="22" y2="22"/>',
+  card: '<rect x="2" y="5" width="20" height="14" rx="2.5"/><line x1="2" y1="10" x2="22" y2="10"/>',
+  sbp: '<path d="M12 2v20M12 2 5 9M12 2l7 7M12 22l-7-7M12 22l7-7"/>',
+  shield: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
+  columns: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
+  trash: '<path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/>',
+  edit: '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  merge: '<path d="M8 6h10M8 12h10M8 18h10"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/>',
+  bolt: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
+  cart: '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
+  history: '<path d="M3 12a9 9 0 1 1 9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>',
+  team: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
+  package2: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>'
+};
+function Icon(props) {
+  const name = props.name;
+  const size = props.size ?? 17;
+  const color = props.color ?? "currentColor";
+  const strokeWidth = props.strokeWidth ?? 1.8;
+  const d = PATHS[name];
+  if (!d) return null;
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: color,
+    strokeWidth: strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: props.style,
+    dangerouslySetInnerHTML: {
+      __html: d
+    }
+  });
+}
+const ICON_NAMES = Object.keys(PATHS);
+Object.assign(__ds_scope, { Icon, ICON_NAMES });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Icon.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/IconButton.jsx
+try { (() => {
+function IconButton(props) {
+  const size = props.size ?? 36;
+  const [hover, setHover] = React.useState(false);
+  return React.createElement("button", {
+    style: {
+      position: "relative",
+      width: size,
+      height: size,
+      borderRadius: "var(--radius-md)",
+      border: props.bare ? "none" : "1px solid var(--n-8)",
+      background: hover ? "var(--n-9)" : "var(--surface-card)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      color: hover ? "var(--text-body)" : "var(--text-secondary)",
+      flex: "none"
+    },
+    onClick: props.onClick,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    "aria-label": props.label,
+    title: props.label
+  }, props.children, props.badge ? React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: 6,
+      right: 7,
+      minWidth: 15,
+      height: 15,
+      padding: "0 4px",
+      borderRadius: 8,
+      background: "var(--error)",
+      color: "#fff",
+      fontSize: 10,
+      fontWeight: 600,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      border: "1.5px solid var(--surface-card)"
+    }
+  }, props.badge) : null);
+}
+Object.assign(__ds_scope, { IconButton });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/IconButton.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Input.jsx
+try { (() => {
+function Input(props) {
+  const [focused, setFocused] = React.useState(false);
+  const hasError = !!props.error;
+  const borderColor = hasError ? "var(--error-border)" : focused ? "var(--primary)" : "var(--border-input)";
+  return React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 5,
+      width: props.fullWidth === false ? "auto" : "100%"
+    }
+  }, props.label ? React.createElement("label", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 500,
+      color: "var(--text-secondary)"
+    }
+  }, props.label, props.required ? React.createElement("span", {
+    style: {
+      color: "var(--error-text)"
+    }
+  }, " *") : null) : null, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 9,
+      height: "var(--h-control-lg)",
+      padding: "0 13px",
+      border: `1px solid ${borderColor}`,
+      borderRadius: "var(--radius-lg)",
+      background: props.disabled ? "var(--n-9)" : "var(--surface-card)"
+    }
+  }, props.icon, React.createElement("input", {
+    type: props.type ?? "text",
+    value: props.value,
+    onChange: props.onChange,
+    placeholder: props.placeholder,
+    disabled: props.disabled,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    style: {
+      flex: 1,
+      border: "none",
+      outline: "none",
+      background: "transparent",
+      fontSize: 14,
+      color: "var(--text-body)",
+      fontFamily: "var(--font-sans)",
+      width: "100%"
+    }
+  }), props.suffix), props.hint ? React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: hasError ? "var(--error-text)" : "var(--text-tertiary)"
+    }
+  }, props.hint) : null);
+}
+Object.assign(__ds_scope, { Input });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Input.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Tag.jsx
+try { (() => {
+const TONES = {
+  neutral: {
+    bg: "var(--n-9)",
+    color: "var(--text-secondary)",
+    border: "transparent"
+  },
+  primary: {
+    bg: "var(--primary-bg)",
+    color: "#0958d9",
+    border: "transparent"
+  },
+  success: {
+    bg: "var(--success-bg)",
+    color: "var(--success-text)",
+    border: "var(--success-border)"
+  },
+  warning: {
+    bg: "var(--warning-bg)",
+    color: "var(--warning-text)",
+    border: "var(--warning-border)"
+  },
+  error: {
+    bg: "var(--error-bg)",
+    color: "var(--error-text)",
+    border: "var(--error-border)"
+  },
+  ai: {
+    bg: "var(--ai-bg)",
+    color: "var(--ai)",
+    border: "transparent"
+  }
+};
+function Tag(props) {
+  const t = TONES[props.tone ?? "neutral"];
+  return React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      padding: props.pill ? "3px 10px" : "2px 8px",
+      borderRadius: props.pill ? "var(--radius-pill)" : "var(--radius-xs)",
+      background: t.bg,
+      border: t.border !== "transparent" ? `1px solid ${t.border}` : "none",
+      fontSize: props.pill ? 12 : 11,
+      fontWeight: props.pill ? 600 : 500,
+      color: t.color,
+      whiteSpace: "nowrap"
+    }
+  }, props.dot ? React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: props.dotColor ?? t.color,
+      flex: "none"
+    }
+  }) : null, props.children);
+}
+Object.assign(__ds_scope, { Tag });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tag.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/ProductAIReleaseCard.jsx
+try { (() => {
+/* ProductAIReleaseCard — a snapshot of one AI knowledge/prompt release for a
+   product (e.g. Foxray, FirePage) inside the AI section. */
+function ProductAIReleaseCard(props) {
+  return React.createElement("div", {
+    style: {
+      background: "var(--surface-card)",
+      border: "1px solid var(--n-8)",
+      borderRadius: "var(--radius-2xl)",
+      padding: "16px 18px",
+      boxShadow: "var(--shadow-sm)"
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 10
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10
+    }
+  }, React.createElement("div", {
+    style: {
+      width: 34,
+      height: 34,
+      borderRadius: 9,
+      background: props.iconBg ?? "var(--ai-bg)",
+      color: props.iconColor ?? "var(--ai)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 14,
+      fontWeight: 700,
+      flex: "none"
+    }
+  }, props.productInitial), React.createElement("div", null, React.createElement("div", {
+    style: {
+      fontSize: 14.5,
+      fontWeight: 700,
+      color: "var(--text-heading)"
+    }
+  }, props.productName), React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-disabled)",
+      fontFamily: "var(--font-mono)"
+    }
+  }, props.releaseId))), React.createElement(__ds_scope.Tag, {
+    pill: true,
+    tone: props.live ? "success" : "neutral",
+    dot: true
+  }, props.live ? "Активен" : "Черновик")), React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 1,
+      background: "var(--n-8)",
+      border: "1px solid var(--n-8)",
+      borderRadius: "var(--radius-lg)",
+      overflow: "hidden"
+    }
+  }, (props.stats ?? []).map((s, i) => React.createElement("div", {
+    key: i,
+    style: {
+      flex: 1,
+      background: "#fff",
+      padding: "9px 11px"
+    }
+  }, React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-tertiary)",
+      marginBottom: 3
+    }
+  }, s.label), React.createElement("div", {
+    style: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: "var(--text-body)"
+    }
+  }, s.value)))));
+}
+Object.assign(__ds_scope, { ProductAIReleaseCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/ProductAIReleaseCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/inbox/KnowledgeDocumentEditor.jsx
+try { (() => {
+/* KnowledgeDocumentEditor — a minimal document editor shell for AI knowledge
+   base entries (ADR-HUB-0013 local component): title, meta, and a plain
+   textarea body — no rich-text chrome. */
+function KnowledgeDocumentEditor(props) {
+  return React.createElement("div", {
+    style: {
+      background: "var(--surface-card)",
+      border: "1px solid var(--n-8)",
+      borderRadius: "var(--radius-2xl)",
+      boxShadow: "var(--shadow-sm)",
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, React.createElement("div", {
+    style: {
+      padding: "14px 18px",
+      borderBottom: "1px solid var(--n-9)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }
+  }, React.createElement("div", null, React.createElement("input", {
+    value: props.title,
+    onChange: props.onTitleChange,
+    placeholder: "Название документа",
+    style: {
+      border: "none",
+      outline: "none",
+      fontSize: 15,
+      fontWeight: 700,
+      color: "var(--text-heading)",
+      fontFamily: "var(--font-sans)",
+      width: "100%"
+    }
+  }), React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-disabled)",
+      marginTop: 3,
+      fontFamily: "var(--font-mono)"
+    }
+  }, props.docId)), React.createElement("span", {
+    style: {
+      fontSize: 11.5,
+      color: "var(--text-tertiary)"
+    }
+  }, props.savedLabel ?? "Сохранено")), React.createElement("textarea", {
+    value: props.body,
+    onChange: props.onBodyChange,
+    placeholder: "Текст базы знаний…",
+    rows: props.rows ?? 10,
+    style: {
+      border: "none",
+      outline: "none",
+      resize: "vertical",
+      padding: "16px 18px",
+      fontSize: 13.5,
+      lineHeight: 1.6,
+      color: "var(--text-body)",
+      fontFamily: "var(--font-sans)"
+    }
+  }));
+}
+Object.assign(__ds_scope, { KnowledgeDocumentEditor });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/inbox/KnowledgeDocumentEditor.jsx", error: String((e && e.message) || e) }); }
+
+// components/status/ActorBadge.jsx
+try { (() => {
+/* ActorBadge — distinguishes an AI participant from a human operator in a
+   conversation timeline (ADR-HUB-0013: "ai"/"human" semantic tokens). */
+function ActorBadge(props) {
+  const isAI = props.actor === "ai";
+  if (isAI) {
+    return React.createElement("div", {
+      style: {
+        width: 28,
+        height: 28,
+        borderRadius: "50%",
+        background: "#eef0f2",
+        border: "1px solid #e3e6ea",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: "none"
+      }
+    }, React.createElement("svg", {
+      viewBox: "0 0 24 24",
+      width: 15,
+      height: 15,
+      fill: "none",
+      stroke: "#8c8c8c",
+      strokeWidth: 1.8,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, React.createElement("circle", {
+      cx: 12,
+      cy: 8,
+      r: 3.2
+    }), React.createElement("path", {
+      d: "M5.5 20a6.5 6.5 0 0 1 13 0"
+    })));
+  }
+  return React.createElement("div", {
+    style: {
+      width: 28,
+      height: 28,
+      borderRadius: "50%",
+      background: props.color ?? "var(--primary)",
+      color: "#fff",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 11,
+      fontWeight: 600,
+      flex: "none"
+    }
+  }, props.initials);
+}
+Object.assign(__ds_scope, { ActorBadge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/ActorBadge.jsx", error: String((e && e.message) || e) }); }
+
+// components/status/AttentionStatus.jsx
+try { (() => {
+const TONE = {
+  ok: {
+    dot: "#52c41a",
+    color: "var(--success-text)",
+    bg: "var(--success-bg)",
+    border: "var(--success-border)",
+    label: "Нормально"
+  },
+  attention: {
+    dot: "#faad14",
+    color: "var(--warning-text)",
+    bg: "var(--warning-bg)",
+    border: "var(--warning-border)",
+    label: "Требует внимания"
+  },
+  critical: {
+    dot: "#ff4d4f",
+    color: "var(--error-text)",
+    bg: "var(--error-bg)",
+    border: "var(--error-border)",
+    label: "Критично"
+  }
+};
+
+/* AttentionStatus — the company/department health chip (ADR-HUB-0013 local component).
+   Always pairs a colored dot with a text label so color is never the only signal. */
+function AttentionStatus(props) {
+  const t = TONE[props.level ?? "ok"];
+  return React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 7,
+      padding: "3px 11px",
+      borderRadius: "var(--radius-pill)",
+      background: t.bg,
+      border: `1px solid ${t.border}`
+    }
+  }, React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: "50%",
+      background: t.dot,
+      flex: "none"
+    }
+  }), React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 600,
+      color: t.color
+    }
+  }, props.label ?? t.label));
+}
+Object.assign(__ds_scope, { AttentionStatus });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/AttentionStatus.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/DepartmentCard.jsx
+try { (() => {
+/* DepartmentCard — the Command Center's per-department summary
+   (ADR-HUB-0013 local component). */
+function DepartmentCard(props) {
+  return React.createElement("div", {
+    style: {
+      background: "var(--surface-card)",
+      border: "1px solid var(--n-8)",
+      borderRadius: "var(--radius-2xl)",
+      padding: "20px 22px",
+      boxShadow: "var(--shadow-sm)"
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 14
+    }
+  }, React.createElement("div", {
+    style: {
+      width: 46,
+      height: 46,
+      borderRadius: 11,
+      background: "var(--primary-bg)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, React.createElement(__ds_scope.Icon, {
+    name: props.icon ?? "departments",
+    size: 23,
+    color: "var(--primary)"
+  })), React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10
+    }
+  }, React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 18,
+      fontWeight: 700,
+      color: "var(--text-heading)"
+    }
+  }, props.name), React.createElement(__ds_scope.AttentionStatus, {
+    level: props.level
+  })), React.createElement("div", {
+    style: {
+      marginTop: 4,
+      fontSize: 12.5,
+      color: "var(--text-tertiary)"
+    }
+  }, props.meta)), React.createElement(__ds_scope.Button, {
+    variant: "primary",
+    onClick: props.onOpen
+  }, props.openLabel ?? "Открыть отдел", React.createElement(__ds_scope.Icon, {
+    name: "arrowRight",
+    size: 16
+  }))), props.summary ? React.createElement("div", {
+    style: {
+      margin: "16px 0 0",
+      padding: "10px 14px",
+      background: "var(--surface-sunken)",
+      borderRadius: "var(--radius-md)",
+      fontSize: 13,
+      color: "var(--text-secondary)",
+      lineHeight: 1.5
+    }
+  }, props.summary) : null, props.children);
+}
+Object.assign(__ds_scope, { DepartmentCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/DepartmentCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/status/ChannelBadge.jsx
+try { (() => {
+const CHANNELS = {
+  max: {
+    label: "MAX",
+    color: "var(--channel-max)",
+    bg: "var(--channel-max-bg)"
+  },
+  telegram: {
+    label: "TG",
+    color: "var(--channel-telegram)",
+    bg: "var(--channel-telegram-bg)"
+  },
+  webchat: {
+    label: "Web",
+    color: "var(--channel-webchat)",
+    bg: "var(--channel-webchat-bg)"
+  }
+};
+
+/* ChannelBadge — differentiates MAX / Telegram / Web Chat without turning the
+   UI into a colorful mosaic (ADR-HUB-0013: "channel-*" tokens). */
+function ChannelBadge(props) {
+  const c = CHANNELS[props.channel];
+  return React.createElement("span", {
+    title: props.title ?? c.label,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 4,
+      padding: "2px 7px",
+      borderRadius: 5,
+      background: c.bg
+    }
+  }, React.createElement("span", {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: "50%",
+      background: c.color
+    }
+  }), React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 600,
+      color: c.color
+    }
+  }, c.label));
+}
+Object.assign(__ds_scope, { ChannelBadge });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/ChannelBadge.jsx", error: String((e && e.message) || e) }); }
+
+// components/inbox/ConversationInbox.jsx
+try { (() => {
+/* ConversationInbox — the realtime inbox list (ADR-HUB-0013 local component):
+   one row per conversation with channel, last actor, wait state and time. */
+function ConversationInbox(props) {
+  return React.createElement("div", {
+    style: {
+      background: "var(--surface-card)",
+      border: "1px solid var(--n-8)",
+      borderRadius: "var(--radius-2xl)",
+      overflow: "hidden"
+    }
+  }, (props.items ?? []).map((it, i) => React.createElement("div", {
+    key: i,
+    onClick: it.onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "12px 16px",
+      borderTop: i === 0 ? "none" : "1px solid var(--n-9)",
+      cursor: it.onClick ? "pointer" : "default",
+      background: it.active ? "var(--primary-bg)" : "transparent"
+    }
+  }, React.createElement(__ds_scope.ActorBadge, {
+    actor: it.lastActor,
+    initials: it.initials,
+    color: it.color
+  }), React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8
+    }
+  }, React.createElement("span", {
+    style: {
+      fontSize: 13.5,
+      fontWeight: 600,
+      color: "var(--text-heading)"
+    }
+  }, it.name), React.createElement(__ds_scope.ChannelBadge, {
+    channel: it.channel
+  })), React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "var(--text-tertiary)",
+      marginTop: 2,
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    }
+  }, it.preview)), React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      gap: 4,
+      flex: "none"
+    }
+  }, React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-disabled)"
+    }
+  }, it.time), it.waiting ? React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: "50%",
+      background: "var(--warning)"
+    }
+  }) : null))));
+}
+Object.assign(__ds_scope, { ConversationInbox });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/inbox/ConversationInbox.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/checkout/CheckoutWidget.jsx
+try { (() => {
+const {
+  CommerceStatusTimeline,
+  Icon,
+  Checkbox
+} = window.EdevsHubDesignSystem_e4c9df;
+
+/* Recreation of design/baseline/CheckoutPanel.dc.html — the public
+   pay.hub.edevs.tech checkout flow (SPEC-HUB-0007). Mobile-first, no Hub chrome. */
+function CheckoutWidget() {
+  const [st, setSt] = React.useState("checkout");
+  const [buyer, setBuyer] = React.useState("person");
+  const [pay, setPay] = React.useState("card");
+  const [a1, setA1] = React.useState(false);
+  const [a2, setA2] = React.useState(false);
+  const ready = a1 && a2;
+  const seg = k => ({
+    flex: 1,
+    height: 36,
+    borderRadius: 8,
+    border: "none",
+    fontSize: 12.5,
+    fontWeight: 600,
+    cursor: "pointer",
+    background: buyer === k ? "#1f1f1f" : "transparent",
+    color: buyer === k ? "#fff" : "#8c8c8c"
+  });
+  const cardBox = sel => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    width: "100%",
+    padding: "11px 13px",
+    borderRadius: 12,
+    background: "#fff",
+    cursor: "pointer",
+    textAlign: "left",
+    border: `1.5px solid ${sel ? "var(--primary)" : "#ececec"}`,
+    boxShadow: sel ? "0 0 0 3px rgba(22,119,255,0.08)" : "none"
+  });
+  const dot = sel => ({
+    width: 18,
+    height: 18,
+    borderRadius: "50%",
+    flex: "none",
+    border: sel ? "5px solid var(--primary)" : "2px solid #d9d9d9",
+    background: "#fff"
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      background: "#f4f5f7",
+      fontFamily: "var(--font-sans)",
+      color: "#1f1f1f",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "#fff",
+      borderBottom: "1px solid #ececec",
+      padding: "13px 18px",
+      display: "flex",
+      alignItems: "center",
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 30,
+      height: 30,
+      borderRadius: 8,
+      background: "#1f1f1f",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: 800,
+      flex: "none"
+    }
+  }, "F"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 14,
+      fontWeight: 700,
+      lineHeight: 1.1
+    }
+  }, "Foxray"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "#9a9a9a",
+      marginTop: 1
+    }
+  }, "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u043F\u043E\u043A\u0443\u043F\u043A\u0438")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 5,
+      padding: "4px 9px",
+      borderRadius: 7,
+      background: "#f1f6ec",
+      border: "1px solid #d7ead0",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "shield",
+    size: 12,
+    color: "#3f8f3f",
+    strokeWidth: 2.2
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 600,
+      color: "#3f8f3f"
+    }
+  }, "\u0417\u0430\u0449\u0438\u0449\u0435\u043D\u043E")), /*#__PURE__*/React.createElement("select", {
+    value: st,
+    onChange: e => setSt(e.target.value),
+    style: {
+      marginLeft: 8,
+      fontSize: 10.5,
+      border: "1px solid #ececec",
+      borderRadius: 6,
+      background: "#fafafa"
+    }
+  }, ["checkout", "preparing", "pending", "paid", "delivering", "done", "error", "expired"].map(s => /*#__PURE__*/React.createElement("option", {
+    key: s,
+    value: s
+  }, s)))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      overflowY: "auto"
+    }
+  }, st === "expired" && /*#__PURE__*/React.createElement(StateScreen, {
+    icon: "alertCircle",
+    tone: "#8c8c8c",
+    title: "\u0421\u0441\u044B\u043B\u043A\u0430 \u0431\u043E\u043B\u044C\u0448\u0435 \u043D\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442",
+    body: "\u0421\u0435\u0441\u0441\u0438\u044F \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u0438\u0441\u0442\u0435\u043A\u043B\u0430 \u0438\u043B\u0438 \u0431\u044B\u043B\u0430 \u043E\u0442\u043C\u0435\u043D\u0435\u043D\u0430. \u0412\u0435\u0440\u043D\u0438\u0442\u0435\u0441\u044C \u043D\u0430 \u0441\u0430\u0439\u0442 \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0430.",
+    cta: "\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430 foxray.pro"
+  }), st === "preparing" && /*#__PURE__*/React.createElement(StateScreen, {
+    spin: true,
+    title: "\u0413\u043E\u0442\u043E\u0432\u0438\u043C \u043E\u043F\u043B\u0430\u0442\u0443",
+    body: "\u041F\u0435\u0440\u0435\u043D\u0430\u043F\u0440\u0430\u0432\u043B\u044F\u0435\u043C \u043D\u0430 \u0437\u0430\u0449\u0438\u0449\u0451\u043D\u043D\u0443\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u0411\u0430\u043D\u043A\u0430 \u0422\u043E\u0447\u043A\u0430. \u041D\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0439\u0442\u0435 \u043E\u043A\u043D\u043E."
+  }), st === "pending" && /*#__PURE__*/React.createElement(StateScreen, {
+    icon: "clock",
+    tone: "var(--warning-text)",
+    toneBg: "var(--warning-bg-strong)",
+    title: "\u041F\u0440\u043E\u0432\u0435\u0440\u044F\u0435\u043C \u043E\u043F\u043B\u0430\u0442\u0443",
+    body: "\u0411\u0430\u043D\u043A \u0435\u0449\u0451 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044E. \u041C\u044B \u043D\u0435 \u0441\u043E\u0437\u0434\u0430\u0451\u043C \u043D\u043E\u0432\u044B\u0439 \u0437\u0430\u043A\u0430\u0437 \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438.",
+    cta: "\u041F\u0440\u043E\u0432\u0435\u0440\u0438\u0442\u044C \u0435\u0449\u0451 \u0440\u0430\u0437"
+  }), st === "error" && /*#__PURE__*/React.createElement(StateScreen, {
+    icon: "xCircle",
+    tone: "var(--error-text)",
+    toneBg: "var(--error-bg)",
+    title: "\u041F\u043B\u0430\u0442\u0451\u0436 \u043D\u0435 \u043F\u0440\u043E\u0448\u0451\u043B",
+    body: "\u0411\u0430\u043D\u043A \u043E\u0442\u043A\u043B\u043E\u043D\u0438\u043B \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044E. \u0414\u0435\u043D\u044C\u0433\u0438 \u043D\u0435 \u0441\u043F\u0438\u0441\u0430\u043D\u044B. \u041C\u043E\u0436\u043D\u043E \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u043E\u043F\u043B\u0430\u0442\u0443 \u0442\u043E\u0433\u043E \u0436\u0435 \u0437\u0430\u043A\u0430\u0437\u0430.",
+    cta: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u043E\u043F\u043B\u0430\u0442\u0443"
+  }), st === "paid" && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "26px 16px 20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 56,
+      height: 56,
+      borderRadius: "50%",
+      background: "var(--success-bg-strong)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: 28,
+    color: "#3f8f3f",
+    strokeWidth: 2.2
+  })), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 17,
+      fontWeight: 700
+    }
+  }, "\u041E\u043F\u043B\u0430\u0442\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0430"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "7px 0 0",
+      fontSize: 13,
+      color: "#6b6b6b"
+    }
+  }, "\u0427\u0435\u043A \u043E\u0442\u043F\u0440\u0430\u0432\u043B\u0435\u043D \u043D\u0430 ", /*#__PURE__*/React.createElement("b", {
+    style: {
+      color: "#262626"
+    }
+  }, "a.kovalenko@northwind.ru"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #ececec",
+      borderRadius: 13,
+      padding: "14px 16px",
+      display: "flex",
+      flexDirection: "column",
+      gap: 9
+    }
+  }, /*#__PURE__*/React.createElement(SummaryRow, {
+    k: "\u0417\u0430\u043A\u0430\u0437",
+    v: "HUB-2026-004187",
+    mono: true
+  }), /*#__PURE__*/React.createElement(SummaryRow, {
+    k: "\u041F\u0440\u043E\u0434\u0443\u043A\u0442",
+    v: "Foxray Max \xB7 6 \u043C\u0435\u0441\u0442"
+  }), /*#__PURE__*/React.createElement(SummaryRow, {
+    k: "\u0421\u0443\u043C\u043C\u0430",
+    v: "\u20BD95 040",
+    bold: true
+  }))), st === "delivering" && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "26px 16px 20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 56,
+      height: 56,
+      borderRadius: "50%",
+      background: "var(--primary-bg)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "package2",
+    size: 27,
+    color: "var(--primary)"
+  })), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 16,
+      fontWeight: 700
+    }
+  }, "\u0413\u043E\u0442\u043E\u0432\u0438\u043C \u0434\u043E\u0441\u0442\u0443\u043F \u043A \u043F\u0440\u043E\u0434\u0443\u043A\u0442\u0443"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "8px 0 0",
+      fontSize: 13,
+      color: "#6b6b6b"
+    }
+  }, "\u041E\u043F\u043B\u0430\u0442\u0430 \u043F\u0440\u043E\u0448\u043B\u0430. \u041F\u043B\u0430\u0442\u0438\u0442\u044C \u043F\u043E\u0432\u0442\u043E\u0440\u043D\u043E \u043D\u0435 \u043D\u0443\u0436\u043D\u043E.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #ececec",
+      borderRadius: 13,
+      padding: "14px 16px"
+    }
+  }, /*#__PURE__*/React.createElement(CommerceStatusTimeline, {
+    steps: [{
+      label: "Оплата подтверждена · ₽95 040",
+      state: "done"
+    }, {
+      label: "Подготовка рабочих мест",
+      state: "active"
+    }]
+  }))), st === "done" && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "26px 16px 20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 56,
+      height: 56,
+      borderRadius: "50%",
+      background: "var(--success-bg-strong)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "checkCircle",
+    size: 28,
+    color: "#3f8f3f",
+    strokeWidth: 2.2
+  })), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 17,
+      fontWeight: 700
+    }
+  }, "\u0413\u043E\u0442\u043E\u0432\u043E \u2014 \u0434\u043E\u0441\u0442\u0443\u043F \u043E\u0442\u043A\u0440\u044B\u0442"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "7px 0 0",
+      fontSize: 13,
+      color: "#6b6b6b"
+    }
+  }, "Foxray Max \u0430\u043A\u0442\u0438\u0432\u0438\u0440\u043E\u0432\u0430\u043D \u043D\u0430 6 \u043C\u0435\u0441\u0442.")), /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      height: 46,
+      borderRadius: 10,
+      background: "var(--primary)",
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: 600,
+      textDecoration: "none"
+    }
+  }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 Foxray", /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowRight",
+    size: 16
+  }))), st === "checkout" && /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "16px 16px 24px",
+      maxWidth: 520,
+      margin: "0 auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: "0.06em",
+      color: "#9a9a9a",
+      textTransform: "uppercase",
+      marginBottom: 6
+    }
+  }, "\u041E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u043F\u0438\u0441\u043A\u0438"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 19,
+      fontWeight: 800,
+      letterSpacing: "-0.01em"
+    }
+  }, "Foxray Max"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      color: "#6b6b6b",
+      marginTop: 3
+    }
+  }, "\u0413\u043E\u0434\u043E\u0432\u0430\u044F \u043F\u043E\u0434\u043F\u0438\u0441\u043A\u0430 \xB7 6 \u0440\u0430\u0431\u043E\u0447\u0438\u0445 \u043C\u0435\u0441\u0442")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #ececec",
+      borderRadius: 13,
+      overflow: "hidden",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "14px 16px 4px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 12,
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600
+    }
+  }, "Foxray Max"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11.5,
+      color: "#9a9a9a",
+      marginTop: 2
+    }
+  }, "6 \u043C\u0435\u0441\u0442 \xD7 \u20BD1 320 / \u043C\u0435\u0441 \xB7 12 \u043C\u0435\u0441")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600,
+      whiteSpace: "nowrap"
+    }
+  }, "\u20BD118 800")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      color: "#3f8f3f"
+    }
+  }, "\u0421\u043A\u0438\u0434\u043A\u0430 \u0437\u0430 \u0433\u043E\u0434\u043E\u0432\u0443\u044E \u043E\u043F\u043B\u0430\u0442\u0443 \xB7 \u221220%"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 600,
+      color: "#3f8f3f"
+    }
+  }, "\u2212\u20BD23 760"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderTop: "1px dashed #e8e8e8",
+      padding: "12px 16px",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-end"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      fontWeight: 700
+    }
+  }, "\u041F\u0435\u0440\u0432\u044B\u0439 \u043F\u043B\u0430\u0442\u0451\u0436"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "#9a9a9a",
+      marginTop: 2
+    }
+  }, "\u0411\u0435\u0437 \u041D\u0414\u0421 \xB7 \u0432\u0430\u043B\u044E\u0442\u0430 \u20BD (RUB)")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 22,
+      fontWeight: 800
+    }
+  }, "\u20BD95 040"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 700,
+      margin: "0 2px 9px"
+    }
+  }, "\u041F\u043E\u043A\u0443\u043F\u0430\u0442\u0435\u043B\u044C"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 6,
+      background: "#fff",
+      border: "1px solid #ececec",
+      borderRadius: 11,
+      padding: 4,
+      marginBottom: 12
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    style: seg("person"),
+    onClick: () => setBuyer("person")
+  }, "\u0424\u0438\u0437\u043B\u0438\u0446\u043E"), /*#__PURE__*/React.createElement("button", {
+    style: seg("ip"),
+    onClick: () => setBuyer("ip")
+  }, "\u0418\u041F"), /*#__PURE__*/React.createElement("button", {
+    style: seg("company"),
+    onClick: () => setBuyer("company")
+  }, "\u042E\u0440\u043B\u0438\u0446\u043E")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12.5,
+      fontWeight: 700,
+      margin: "0 2px 9px"
+    }
+  }, "\u0421\u043F\u043E\u0441\u043E\u0431 \u043E\u043F\u043B\u0430\u0442\u044B"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 9,
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    style: cardBox(pay === "card"),
+    onClick: () => setPay("card")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 38,
+      height: 38,
+      borderRadius: 9,
+      background: "var(--primary-bg)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "card",
+    size: 19,
+    color: "var(--primary)"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      textAlign: "left"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13.5,
+      fontWeight: 600
+    }
+  }, "\u0411\u0430\u043D\u043A\u043E\u0432\u0441\u043A\u0430\u044F \u043A\u0430\u0440\u0442\u0430"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11.5,
+      color: "#9a9a9a"
+    }
+  }, "\u0410\u0432\u0442\u043E\u043F\u0440\u043E\u0434\u043B\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u043F\u0438\u0441\u043A\u0438")), /*#__PURE__*/React.createElement("span", {
+    style: dot(pay === "card")
+  })), /*#__PURE__*/React.createElement("button", {
+    style: cardBox(pay === "sbp"),
+    onClick: () => setPay("sbp")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 38,
+      height: 38,
+      borderRadius: 9,
+      background: "var(--ai-bg)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "sbp",
+    size: 19,
+    color: "var(--ai)"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      textAlign: "left"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13.5,
+      fontWeight: 600
+    }
+  }, "\u0421\u0411\u041F"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11.5,
+      color: "#9a9a9a"
+    }
+  }, "\u0421\u0438\u0441\u0442\u0435\u043C\u0430 \u0431\u044B\u0441\u0442\u0440\u044B\u0445 \u043F\u043B\u0430\u0442\u0435\u0436\u0435\u0439")), /*#__PURE__*/React.createElement("span", {
+    style: dot(pay === "sbp")
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #ececec",
+      borderRadius: 13,
+      padding: "14px 16px",
+      display: "flex",
+      flexDirection: "column",
+      gap: 13,
+      marginBottom: 90
+    }
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: a1,
+    onChange: () => setA1(!a1),
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "\u041F\u0440\u0438\u043D\u0438\u043C\u0430\u044E \u0443\u0441\u043B\u043E\u0432\u0438\u044F \u043F\u043E\u043A\u0443\u043F\u043A\u0438 \u0438 \u043E\u0444\u0435\u0440\u0442\u0443, \u0441\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u0441 \u043F\u043E\u043B\u0438\u0442\u0438\u043A\u043E\u0439 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0434\u0430\u043D\u043D\u044B\u0445")
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    checked: a2,
+    onChange: () => setA2(!a2),
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, "\u0421\u043E\u0433\u043B\u0430\u0441\u0435\u043D \u043D\u0430 \u0440\u0435\u0433\u0443\u043B\u044F\u0440\u043D\u044B\u0435 \u0441\u043F\u0438\u0441\u0430\u043D\u0438\u044F ", /*#__PURE__*/React.createElement("b", null, "\u20BD95 040 / \u0433\u043E\u0434"), " \u0441 \u0430\u0432\u0442\u043E\u043F\u0440\u043E\u0434\u043B\u0435\u043D\u0438\u0435\u043C \u0434\u043E \u043E\u0442\u043C\u0435\u043D\u044B")
+  })))), st === "checkout" && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "#fff",
+      borderTop: "1px solid #ececec",
+      padding: "11px 16px 14px",
+      boxShadow: "var(--shadow-sticky)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: 9
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      color: "#8c8c8c"
+    }
+  }, "\u041A \u043E\u043F\u043B\u0430\u0442\u0435 \u0441\u0435\u0433\u043E\u0434\u043D\u044F"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 17,
+      fontWeight: 800
+    }
+  }, "\u20BD95 040")), /*#__PURE__*/React.createElement("button", {
+    disabled: !ready,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      width: "100%",
+      height: 48,
+      borderRadius: 11,
+      border: "none",
+      fontSize: 14.5,
+      fontWeight: 700,
+      cursor: ready ? "pointer" : "not-allowed",
+      background: ready ? "var(--primary)" : "#e6e6e6",
+      color: ready ? "#fff" : "#bfbfbf"
+    }
+  }, ready ? "Перейти к оплате" : "Примите условия выше", /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowRight",
+    size: 16
+  }))));
+}
+function StateScreen({
+  icon,
+  tone = "var(--primary)",
+  toneBg = "#f4f5f7",
+  title,
+  body,
+  cta,
+  spin
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      padding: "40px 28px"
+    }
+  }, spin ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 38,
+      height: 38,
+      borderRadius: "50%",
+      border: "3px solid #e6e6e6",
+      borderTopColor: "var(--primary)",
+      animation: "hub-spin .8s linear infinite",
+      marginBottom: 20
+    }
+  }) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 54,
+      height: 54,
+      borderRadius: "50%",
+      background: toneBg,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: 26,
+    color: tone
+  })), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 16,
+      fontWeight: 700
+    }
+  }, title), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "9px 0 0",
+      fontSize: 13,
+      color: "#6b6b6b",
+      lineHeight: 1.55,
+      maxWidth: 300
+    }
+  }, body), cta && /*#__PURE__*/React.createElement("button", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 8,
+      height: 44,
+      padding: "0 22px",
+      marginTop: 22,
+      borderRadius: 10,
+      background: "var(--primary)",
+      color: "#fff",
+      fontSize: 13.5,
+      fontWeight: 600,
+      border: "none",
+      cursor: "pointer"
+    }
+  }, cta));
+}
+function SummaryRow({
+  k,
+  v,
+  mono,
+  bold
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      color: "#8c8c8c"
+    }
+  }, k), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: bold ? 14 : 12.5,
+      fontWeight: 600,
+      color: "#262626",
+      fontFamily: mono ? "var(--font-mono)" : "inherit"
+    }
+  }, v));
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/checkout/CheckoutWidget.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/internal-hub/AuthLoginPage.jsx
+try { (() => {
+const {
+  Input,
+  Button,
+  Icon
+} = window.EdevsHubDesignSystem_e4c9df;
+
+/* Recreation of design/baseline/AUTH · Вход.dc.html */
+function AuthLoginPage({
+  onSuccess
+}) {
+  const [email, setEmail] = React.useState("");
+  const [pwd, setPwd] = React.useState("");
+  const [show, setShow] = React.useState(false);
+  const [error, setError] = React.useState(false);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: "100%",
+      minWidth: 1024,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "var(--surface-page)",
+      fontFamily: "var(--font-sans)",
+      padding: 24
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 400,
+      maxWidth: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      marginBottom: 24
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "../../assets/logo-mark.svg",
+    style: {
+      width: 48,
+      height: 48,
+      borderRadius: 13,
+      marginBottom: 14,
+      boxShadow: "0 4px 12px var(--primary-shadow)"
+    }
+  }), /*#__PURE__*/React.createElement("h1", {
+    style: {
+      margin: 0,
+      fontSize: 20,
+      fontWeight: 700,
+      letterSpacing: "-0.01em"
+    }
+  }, "Edevs Hub"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "5px 0 0",
+      fontSize: 13,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u0412\u0445\u043E\u0434 \u0432\u043E \u0432\u043D\u0443\u0442\u0440\u0435\u043D\u043D\u0438\u0439 \u043A\u0430\u0431\u0438\u043D\u0435\u0442")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid var(--n-8)",
+      borderRadius: 14,
+      boxShadow: "var(--shadow-md)",
+      padding: "26px 26px 24px"
+    }
+  }, error && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 10,
+      padding: "11px 13px",
+      background: "var(--error-bg)",
+      border: "1px solid var(--error-border)",
+      borderRadius: 9,
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "alertCircle",
+    size: 16,
+    color: "var(--error-text)"
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12.5,
+      color: "var(--error-text)",
+      lineHeight: 1.45
+    }
+  }, "\u041D\u0435\u0432\u0435\u0440\u043D\u044B\u0439 email \u0438\u043B\u0438 \u043F\u0430\u0440\u043E\u043B\u044C. \u041F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u0438 \u043F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u0441\u043D\u043E\u0432\u0430.")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 16
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "Email",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      name: "mail",
+      size: 16,
+      color: "var(--n-5)"
+    }),
+    value: email,
+    onChange: e => setEmail(e.target.value),
+    placeholder: "you@edevs.tech"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 22
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    label: "\u041F\u0430\u0440\u043E\u043B\u044C",
+    type: show ? "text" : "password",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      name: "lock",
+      size: 16,
+      color: "var(--n-5)"
+    }),
+    suffix: /*#__PURE__*/React.createElement("button", {
+      onClick: () => setShow(!show),
+      style: {
+        border: "none",
+        background: "none",
+        cursor: "pointer",
+        color: "var(--n-5)",
+        display: "flex"
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: show ? "eye" : "eyeOff",
+      size: 16
+    })),
+    value: pwd,
+    onChange: e => setPwd(e.target.value),
+    placeholder: "\u041F\u0430\u0440\u043E\u043B\u044C"
+  })), /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    size: "lg",
+    onClick: () => email && pwd ? onSuccess() : setError(true)
+  }, "\u0412\u043E\u0439\u0442\u0438", /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowRight",
+    size: 16
+  }))), /*#__PURE__*/React.createElement("p", {
+    style: {
+      textAlign: "center",
+      margin: "18px 0 0",
+      fontSize: 12,
+      color: "var(--n-5)"
+    }
+  }, "\u0414\u043E\u0441\u0442\u0443\u043F \u0442\u043E\u043B\u044C\u043A\u043E \u0434\u043B\u044F \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u043E\u0432 Edevs \xB7 \u0437\u0430\u0449\u0438\u0449\u0451\u043D\u043D\u043E\u0435 \u0441\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u0435")));
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/internal-hub/AuthLoginPage.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/internal-hub/ClientsPage.jsx
+try { (() => {
+const {
+  Avatar,
+  Tag,
+  Icon
+} = window.EdevsHubDesignSystem_e4c9df;
+const DATA = [{
+  name: "Мария Соколова",
+  initials: "МС",
+  color: "#eb6f4b",
+  cid: "CUS-4821",
+  email: "m.sokolova@workmail.ru",
+  ch: ["MAX"],
+  pr: ["FP"],
+  last: "5 мин назад",
+  open: 1,
+  orders: 0,
+  total: "—"
+}, {
+  name: "Дмитрий Орлов",
+  initials: "ДО",
+  color: "#3b82c4",
+  cid: "CUS-4789",
+  email: "d.orlov@gmail.com",
+  ch: ["TG"],
+  pr: ["FX"],
+  last: "8 мин назад",
+  open: 1,
+  orders: 2,
+  total: "₽4 980"
+}, {
+  name: "Елена Кузнецова",
+  initials: "ЕК",
+  color: "#9254de",
+  cid: "CUS-4702",
+  email: "e.kuznetsova@corp.ru",
+  ch: ["MAX", "WEB"],
+  pr: ["FX", "FP"],
+  last: "18 мин назад",
+  open: 1,
+  orders: 3,
+  total: "₽12 470"
+}, {
+  name: "Сергей Волков",
+  initials: "СВ",
+  color: "#13a8a8",
+  cid: "CUS-4655",
+  email: "s.volkov@mail.ru",
+  ch: ["TG"],
+  pr: ["FP"],
+  last: "26 мин назад",
+  open: 1,
+  orders: 1,
+  total: "₽2 490"
+}, {
+  name: "Павел Новиков",
+  initials: "ПН",
+  color: "#52a838",
+  cid: "CUS-4410",
+  email: "p.novikov@firm.io",
+  ch: ["MAX"],
+  pr: ["FP"],
+  last: "1 ч назад",
+  open: 0,
+  orders: 4,
+  total: "₽19 600"
+}];
+const CH = {
+  MAX: {
+    l: "MAX",
+    c: "var(--channel-max)",
+    bg: "var(--channel-max-bg)"
+  },
+  TG: {
+    l: "TG",
+    c: "var(--channel-telegram)",
+    bg: "var(--channel-telegram-bg)"
+  },
+  WEB: {
+    l: "Web",
+    c: "var(--channel-webchat)",
+    bg: "var(--channel-webchat-bg)"
+  }
+};
+const PR = {
+  FP: {
+    n: "FirePage",
+    tone: "primary"
+  },
+  FX: {
+    n: "Foxray",
+    tone: "ai"
+  }
+};
+function ClientsPage() {
+  const [q, setQ] = React.useState("");
+  const rows = DATA.filter(d => !q || d.name.toLowerCase().includes(q.toLowerCase()));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      marginBottom: 18
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      margin: 0,
+      fontSize: 24,
+      fontWeight: 700,
+      letterSpacing: "-0.02em",
+      color: "var(--text-heading)"
+    }
+  }, "\u041A\u043B\u0438\u0435\u043D\u0442\u044B"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "6px 0 0",
+      fontSize: 13.5,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B \u043E\u0442\u0434\u0435\u043B\u0430 \u043F\u0440\u043E\u0434\u0430\u0436 \xB7 \u043F\u043E\u043A\u0430\u0437\u0430\u043D\u043E ", rows.length, " \u0438\u0437 248"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 12,
+      background: "#fff",
+      border: "1px solid var(--n-8)",
+      borderRadius: 11,
+      padding: "11px 14px",
+      marginBottom: 16,
+      boxShadow: "var(--shadow-xs)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      height: 34,
+      padding: "0 11px",
+      border: "1px solid var(--n-7)",
+      borderRadius: 8,
+      background: "var(--surface-sunken)",
+      width: 280
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "search",
+    size: 15,
+    color: "var(--n-5)"
+  }), /*#__PURE__*/React.createElement("input", {
+    value: q,
+    onChange: e => setQ(e.target.value),
+    placeholder: "\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438\u043B\u0438 email\u2026",
+    style: {
+      border: "none",
+      outline: "none",
+      background: "transparent",
+      fontSize: 13,
+      width: "100%",
+      fontFamily: "inherit"
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid var(--n-8)",
+      borderRadius: 12,
+      boxShadow: "var(--shadow-sm)",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("table", {
+    style: {
+      width: "100%",
+      borderCollapse: "collapse",
+      fontSize: 13
+    }
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+    style: {
+      background: "var(--n-10)"
+    }
+  }, ["КЛИЕНТ", "КАНАЛЫ", "ПРОДУКТЫ", "ПОСЛ. ДИАЛОГ", "ОТКР.", "ЗАКАЗЫ", "СУММА ПОКУПОК"].map((h, i) => /*#__PURE__*/React.createElement("th", {
+    key: i,
+    style: {
+      textAlign: i >= 4 ? "right" : "left",
+      padding: "11px 12px",
+      fontSize: 11,
+      fontWeight: 600,
+      color: "var(--text-tertiary)",
+      borderBottom: "1px solid var(--n-8)"
+    }
+  }, h)))), /*#__PURE__*/React.createElement("tbody", null, rows.map((r, i) => /*#__PURE__*/React.createElement("tr", {
+    key: i,
+    style: {
+      borderBottom: "1px solid var(--n-9)"
+    }
+  }, /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px 16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 11
+    }
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    initials: r.initials,
+    color: r.color,
+    size: 34
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      fontWeight: 600,
+      color: "var(--primary)",
+      textDecoration: "none",
+      fontSize: 13.5
+    }
+  }, r.name), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      color: "var(--n-5)",
+      fontFamily: "var(--font-mono)"
+    }
+  }, r.cid)))), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 5
+    }
+  }, r.ch.map(c => /*#__PURE__*/React.createElement("span", {
+    key: c,
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 4,
+      padding: "2px 7px",
+      borderRadius: 5,
+      background: CH[c].bg
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: "50%",
+      background: CH[c].c
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 10.5,
+      fontWeight: 600,
+      color: CH[c].c
+    }
+  }, CH[c].l))))), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 5
+    }
+  }, r.pr.map(p => /*#__PURE__*/React.createElement(Tag, {
+    key: p,
+    tone: PR[p].tone
+  }, PR[p].n)))), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px",
+      color: "var(--text-secondary)"
+    }
+  }, r.last), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px",
+      textAlign: "right",
+      fontWeight: 600,
+      color: r.open > 0 ? "var(--warning-text)" : "var(--n-5)"
+    }
+  }, r.open), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px",
+      textAlign: "right",
+      color: "var(--text-secondary)"
+    }
+  }, r.orders), /*#__PURE__*/React.createElement("td", {
+    style: {
+      padding: "12px",
+      textAlign: "right",
+      fontWeight: 600
+    }
+  }, r.total)))))));
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/internal-hub/ClientsPage.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/internal-hub/CommandCenterPage.jsx
+try { (() => {
+const {
+  DepartmentCard,
+  MetricCard,
+  IntegrationHealthCard,
+  AttentionStatus
+} = window.EdevsHubDesignSystem_e4c9df;
+
+/* Recreation of design/baseline/Командный центр.dc.html */
+function CommandCenterPage({
+  onOpenDepartment
+}) {
+  const [scenario, setScenario] = React.useState("NORMAL");
+  const S = {
+    NORMAL: {
+      open: 42,
+      active: 9,
+      ai: 35,
+      op: 7,
+      wait: 0,
+      level: "ok",
+      summary: "AI ведёт большинство диалогов. Очередь оператора пуста."
+    },
+    ATTENTION: {
+      open: 58,
+      active: 14,
+      ai: 41,
+      op: 13,
+      wait: 4,
+      level: "attention",
+      summary: "Очередь оператора растёт, есть незавершённые платежи."
+    },
+    CRITICAL: {
+      open: 73,
+      active: 22,
+      ai: 29,
+      op: 35,
+      wait: 9,
+      level: "critical",
+      summary: "Сбой исполнения заказов и переполненная очередь операторов."
+    }
+  }[scenario];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "space-between",
+      marginBottom: 20
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", {
+    style: {
+      margin: 0,
+      fontSize: 26,
+      fontWeight: 700,
+      letterSpacing: "-0.02em",
+      color: "var(--text-heading)"
+    }
+  }, "\u041A\u043E\u043C\u0430\u043D\u0434\u043D\u044B\u0439 \u0446\u0435\u043D\u0442\u0440"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "6px 0 0",
+      fontSize: 13.5,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u0421\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435 \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438 \u043E\u0434\u043D\u0438\u043C \u0432\u0437\u0433\u043B\u044F\u0434\u043E\u043C \xB7 \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043E \u0442\u043E\u043B\u044C\u043A\u043E \u0447\u0442\u043E")), /*#__PURE__*/React.createElement("select", {
+    value: scenario,
+    onChange: e => setScenario(e.target.value),
+    style: {
+      height: 36,
+      borderRadius: 8,
+      border: "1px solid var(--n-6)",
+      padding: "0 10px",
+      fontSize: 13
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "NORMAL"
+  }, "\u0421\u0446\u0435\u043D\u0430\u0440\u0438\u0439: \u041D\u043E\u0440\u043C\u0430\u043B\u044C\u043D\u043E"), /*#__PURE__*/React.createElement("option", {
+    value: "ATTENTION"
+  }, "\u0421\u0446\u0435\u043D\u0430\u0440\u0438\u0439: \u0412\u043D\u0438\u043C\u0430\u043D\u0438\u0435"), /*#__PURE__*/React.createElement("option", {
+    value: "CRITICAL"
+  }, "\u0421\u0446\u0435\u043D\u0430\u0440\u0438\u0439: \u041A\u0440\u0438\u0442\u0438\u0447\u043D\u043E"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 16,
+      background: "#fff",
+      border: "1px solid var(--n-8)",
+      borderLeft: `3px solid ${scenario === "NORMAL" ? "#52c41a" : scenario === "ATTENTION" ? "#faad14" : "#ff4d4f"}`,
+      borderRadius: 10,
+      padding: "16px 20px",
+      marginBottom: 20,
+      boxShadow: "var(--shadow-xs)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 16,
+      fontWeight: 600,
+      color: "var(--text-heading)"
+    }
+  }, "\u041A\u043E\u043C\u043F\u0430\u043D\u0438\u044F:"), /*#__PURE__*/React.createElement(AttentionStatus, {
+    level: S.level
+  })), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "3px 0 0",
+      fontSize: 13.5,
+      color: "var(--text-secondary)"
+    }
+  }, S.summary)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 28
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "right"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u041E\u0442\u0434\u0435\u043B\u044B"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 18,
+      fontWeight: 600
+    }
+  }, "1")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "right"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u0412\u044B\u0440\u0443\u0447\u043A\u0430 \xB7 \u0441\u0435\u0433\u043E\u0434\u043D\u044F"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 18,
+      fontWeight: 600,
+      color: "var(--success-text)"
+    }
+  }, "\u20BD146 200")))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 20,
+      alignItems: "flex-start"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: "var(--text-secondary)",
+      marginBottom: 12
+    }
+  }, "\u041E\u0442\u0434\u0435\u043B\u044B"), /*#__PURE__*/React.createElement(DepartmentCard, {
+    name: "\u041F\u0440\u043E\u0434\u0430\u0436\u0438",
+    meta: "\u041E\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439: \u0410\u043D\u043D\u0430 \u041A\u043E\u0442\u043E\u0432\u0430 \xB7 4 \u0441\u043E\u0442\u0440\u0443\u0434\u043D\u0438\u043A\u0430 \xB7 1 AI-\u0430\u0433\u0435\u043D\u0442",
+    level: S.level,
+    summary: S.summary,
+    onOpen: onOpenDepartment
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: "0.05em",
+      color: "var(--n-5)",
+      margin: "16px 0 8px"
+    }
+  }, "\u0414\u0418\u0410\u041B\u041E\u0413\u0418 \u2014 \u0421\u0415\u0419\u0427\u0410\u0421"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(4,1fr)",
+      gap: 1,
+      background: "var(--n-8)",
+      border: "1px solid var(--n-8)",
+      borderRadius: 9,
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(MetricCard, {
+    label: "\u041E\u0442\u043A\u0440\u044B\u0442\u044B\u0435 \u0434\u0438\u0430\u043B\u043E\u0433\u0438",
+    value: S.open
+  }), /*#__PURE__*/React.createElement(MetricCard, {
+    label: "\u0410\u043A\u0442\u0438\u0432\u043D\u044B \u0437\u0430 15 \u043C\u0438\u043D",
+    value: S.active
+  }), /*#__PURE__*/React.createElement(MetricCard, {
+    label: "\u041D\u0430 AI",
+    value: S.ai,
+    dotColor: "var(--ai)"
+  }), /*#__PURE__*/React.createElement(MetricCard, {
+    label: "\u041E\u0436\u0438\u0434\u0430\u044E\u0442 \u043E\u043F\u0435\u0440\u0430\u0442\u043E\u0440\u0430",
+    value: S.wait,
+    valueColor: S.wait > 0 ? "var(--warning-text)" : undefined
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 320,
+      flex: "none",
+      display: "flex",
+      flexDirection: "column",
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid var(--n-8)",
+      borderRadius: 12,
+      boxShadow: "var(--shadow-sm)",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "15px 18px 12px",
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, "\u0421\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435 \u0438\u043D\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0439"), /*#__PURE__*/React.createElement(IntegrationHealthCard, {
+    name: "OpenRouter",
+    group: "AI-\u043F\u0440\u043E\u0432\u0430\u0439\u0434\u0435\u0440",
+    status: "connected"
+  }), /*#__PURE__*/React.createElement(IntegrationHealthCard, {
+    name: "\u0422\u043E\u0447\u043A\u0430",
+    group: "\u041F\u043B\u0430\u0442\u0435\u0436\u0438 \u0438 \u0444\u0438\u0441\u043A\u0430\u043B\u0438\u0437\u0430\u0446\u0438\u044F",
+    status: scenario === "NORMAL" ? "connected" : "degraded"
+  }), /*#__PURE__*/React.createElement(IntegrationHealthCard, {
+    name: "Fulfillment \xB7 FirePage",
+    group: "\u0418\u0441\u043F\u043E\u043B\u043D\u0435\u043D\u0438\u0435",
+    status: scenario === "CRITICAL" ? "error" : "connected"
+  })))));
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/internal-hub/CommandCenterPage.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/internal-hub/HubShell.jsx
+try { (() => {
+const {
+  Icon,
+  Avatar
+} = window.EdevsHubDesignSystem_e4c9df;
+const NAV = [{
+  key: "command",
+  label: "Командный центр",
+  icon: "dashboard"
+}, {
+  section: "КОМПАНИЯ"
+}, {
+  key: "departments",
+  label: "Отделы",
+  icon: "departments"
+}, {
+  key: "employees",
+  label: "Сотрудники",
+  icon: "employees"
+}, {
+  key: "products",
+  label: "Продукты",
+  icon: "products"
+}, {
+  section: "ПЛАТФОРМА"
+}, {
+  key: "ai",
+  label: "AI",
+  icon: "ai"
+}, {
+  key: "integrations",
+  label: "Интеграции",
+  icon: "integrations"
+}, {
+  key: "settings",
+  label: "Настройки",
+  icon: "settings"
+}];
+function HubShell({
+  page,
+  onNavigate,
+  crumb,
+  children
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      height: "100%",
+      minWidth: 1024,
+      overflow: "hidden",
+      background: "var(--surface-page)",
+      fontFamily: "var(--font-sans)",
+      color: "var(--text-body)"
+    }
+  }, /*#__PURE__*/React.createElement("aside", {
+    style: {
+      width: "var(--sidebar-width)",
+      flex: "none",
+      background: "#fff",
+      borderRight: "1px solid var(--n-8)",
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: "var(--h-topbar)",
+      flex: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: 11,
+      padding: "0 20px",
+      borderBottom: "1px solid var(--n-9)"
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "../../assets/logo-mark.svg",
+    style: {
+      width: 30,
+      height: 30,
+      borderRadius: 8
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      lineHeight: 1.15
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 14,
+      fontWeight: 600,
+      color: "var(--text-heading)",
+      letterSpacing: "-0.01em"
+    }
+  }, "Edevs Hub"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-tertiary)"
+    }
+  }, "\u0423\u0440\u043E\u0432\u0435\u043D\u044C \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438"))), /*#__PURE__*/React.createElement("nav", {
+    style: {
+      flex: 1,
+      overflowY: "auto",
+      padding: "12px 12px 8px"
+    }
+  }, NAV.map((item, i) => item.section ? /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: "0.06em",
+      color: "var(--n-5)",
+      padding: "14px 12px 6px"
+    }
+  }, item.section) : /*#__PURE__*/React.createElement("a", {
+    key: i,
+    href: "#",
+    onClick: e => {
+      e.preventDefault();
+      onNavigate(item.key);
+    },
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 11,
+      padding: "9px 12px",
+      borderRadius: 8,
+      textDecoration: "none",
+      marginBottom: 2,
+      position: "relative",
+      fontSize: 13.5,
+      fontWeight: page === item.key ? 600 : 500,
+      background: page === item.key ? "var(--primary-bg)" : "transparent",
+      color: page === item.key ? "#0958d9" : "var(--text-secondary)"
+    }
+  }, page === item.key && /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      left: 0,
+      top: 8,
+      bottom: 8,
+      width: 3,
+      borderRadius: "0 3px 3px 0",
+      background: "var(--primary)"
+    }
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: item.icon,
+    size: 17
+  }), item.label))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      borderTop: "1px solid var(--n-9)",
+      padding: "10px 12px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 11,
+      padding: "8px 10px",
+      borderRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    initials: "\u0418\u041F"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      lineHeight: 1.2
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600,
+      color: "var(--text-body)"
+    }
+  }, "\u0418\u0432\u0430\u043D \u041F\u0435\u0442\u0440\u043E\u0432"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11,
+      color: "var(--text-tertiary)"
+    }
+  }, "OWNER"))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0,
+      display: "flex",
+      flexDirection: "column"
+    }
+  }, /*#__PURE__*/React.createElement("header", {
+    style: {
+      height: "var(--h-topbar)",
+      flex: "none",
+      background: "#fff",
+      borderBottom: "1px solid var(--n-8)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "0 24px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      fontSize: 13,
+      color: "var(--text-tertiary)"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 500,
+      color: "var(--text-secondary)"
+    }
+  }, "Edevs"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "var(--n-6)"
+    }
+  }, "/"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontWeight: 600,
+      color: "var(--text-body)"
+    }
+  }, crumb)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 14
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    style: {
+      position: "relative",
+      width: 36,
+      height: 36,
+      borderRadius: 8,
+      border: "1px solid var(--n-8)",
+      background: "#fff",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      color: "var(--text-secondary)"
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "bell",
+    size: 18
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      position: "absolute",
+      top: 6,
+      right: 7,
+      width: 8,
+      height: 8,
+      borderRadius: "50%",
+      background: "var(--error)",
+      border: "1.5px solid #fff"
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 1,
+      height: 24,
+      background: "var(--n-8)"
+    }
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    initials: "\u0418\u041F",
+    size: 28
+  }))), /*#__PURE__*/React.createElement("main", {
+    style: {
+      flex: 1,
+      overflowY: "auto",
+      padding: "24px 28px 40px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "var(--content-max)",
+      margin: "0 auto"
+    }
+  }, children))));
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/internal-hub/HubShell.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/web-chat/WebChatWidget.jsx
+try { (() => {
+const {
+  ActorBadge,
+  Icon
+} = window.EdevsHubDesignSystem_e4c9df;
+
+/* Recreation of design/baseline/ChatPanel.dc.html — Foxray's embedded web-chat
+   widget. States: welcome (consent) / ai / operator handoff / checkout card / unavailable. */
+function WebChatWidget() {
+  const [state, setState] = React.useState("ai");
+  const isWelcome = state === "welcome";
+  const isAI = state === "ai";
+  const isOperator = state === "operator";
+  const isCheckout = state === "checkout";
+  const isUnavailable = state === "unavailable";
+  const isConversation = isAI || isOperator || isCheckout;
+  const status = isOperator || isCheckout ? {
+    label: "Отвечает специалист",
+    dot: "#52c41a"
+  } : isUnavailable ? {
+    label: "Временно недоступен",
+    dot: "#faad14"
+  } : isWelcome ? {
+    label: "Обычно отвечаем за пару минут",
+    dot: "#52c41a"
+  } : {
+    label: "Оператор · на связи",
+    dot: "#52c41a"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      background: "#fff",
+      fontFamily: "var(--font-sans)",
+      color: "#1f1f1f",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "var(--primary)",
+      padding: "14px 16px",
+      display: "flex",
+      alignItems: "center",
+      gap: 11
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 36,
+      height: 36,
+      borderRadius: 10,
+      background: "rgba(255,255,255,0.18)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none",
+      fontSize: 15,
+      fontWeight: 700,
+      color: "#fff"
+    }
+  }, "F"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 14.5,
+      fontWeight: 600,
+      color: "#fff",
+      lineHeight: 1.2
+    }
+  }, "Foxray"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 6,
+      marginTop: 2
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 7,
+      height: 7,
+      borderRadius: "50%",
+      background: status.dot,
+      flex: "none"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 11.5,
+      color: "rgba(255,255,255,0.92)"
+    }
+  }, status.label))), /*#__PURE__*/React.createElement("select", {
+    value: state,
+    onChange: e => setState(e.target.value),
+    style: {
+      background: "rgba(255,255,255,0.14)",
+      color: "#fff",
+      border: "none",
+      borderRadius: 8,
+      fontSize: 11,
+      padding: "5px 6px"
+    }
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "welcome"
+  }, "welcome"), /*#__PURE__*/React.createElement("option", {
+    value: "ai"
+  }, "ai"), /*#__PURE__*/React.createElement("option", {
+    value: "operator"
+  }, "operator"), /*#__PURE__*/React.createElement("option", {
+    value: "checkout"
+  }, "checkout"), /*#__PURE__*/React.createElement("option", {
+    value: "unavailable"
+  }, "unavailable"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 0,
+      overflowY: "auto",
+      background: "#f7f8fa",
+      padding: "16px 14px"
+    }
+  }, isWelcome && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      padding: "20px 12px 8px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 56,
+      height: 56,
+      borderRadius: 16,
+      background: "var(--primary-bg)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 24,
+      fontWeight: 700,
+      color: "var(--primary)"
+    }
+  }, "F")), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 17,
+      fontWeight: 700
+    }
+  }, "\u0427\u0430\u0442 Foxray"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "8px 0 0",
+      fontSize: 13,
+      color: "#595959",
+      lineHeight: 1.5,
+      maxWidth: 280
+    }
+  }, "\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u041F\u043E\u043C\u043E\u0433\u0443 \u043F\u043E\u0434\u043E\u0431\u0440\u0430\u0442\u044C \u0442\u0430\u0440\u0438\u0444 \u0438 \u043E\u0442\u0432\u0435\u0442\u0438\u0442\u044C \u043D\u0430 \u0432\u043E\u043F\u0440\u043E\u0441\u044B \u043F\u043E Foxray. \u0427\u0435\u043C \u043C\u043E\u0436\u0435\u043C \u043F\u043E\u043C\u043E\u0447\u044C?")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 18,
+      background: "#fff",
+      border: "1px solid #f0f0f0",
+      borderRadius: 12,
+      padding: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 12,
+      color: "#595959",
+      lineHeight: 1.5
+    }
+  }, "\u041F\u0440\u043E\u0434\u043E\u043B\u0436\u0430\u044F, \u0432\u044B \u0441\u043E\u0433\u043B\u0430\u0448\u0430\u0435\u0442\u0435\u0441\u044C \u043D\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0443 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439 \u0434\u043B\u044F \u043E\u0442\u0432\u0435\u0442\u0430 \u043D\u0430 \u043E\u0431\u0440\u0430\u0449\u0435\u043D\u0438\u0435. ", /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      color: "var(--primary)"
+    }
+  }, "\u041F\u043E\u043B\u0438\u0442\u0438\u043A\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0434\u0430\u043D\u043D\u044B\u0445"), " \xB7 \u0440\u0435\u0434. v3."))), isUnavailable && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      padding: "26px 14px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 52,
+      height: 52,
+      borderRadius: "50%",
+      background: "var(--warning-bg-strong)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "alertTriangle",
+    size: 26,
+    color: "var(--warning-text)"
+  })), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: 15,
+      fontWeight: 700
+    }
+  }, "\u0427\u0430\u0442 \u0432\u0440\u0435\u043C\u0435\u043D\u043D\u043E \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D"), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: "8px 0 0",
+      fontSize: 13,
+      color: "#595959",
+      lineHeight: 1.5,
+      maxWidth: 280
+    }
+  }, "\u041C\u044B \u043D\u0435 \u043C\u043E\u0436\u0435\u043C \u043F\u0440\u0438\u043D\u044F\u0442\u044C \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435 \u043F\u0440\u044F\u043C\u043E \u0441\u0435\u0439\u0447\u0430\u0441. \u041D\u0430\u043F\u0438\u0448\u0438\u0442\u0435 \u043D\u0430\u043C \u0432 \u0434\u0440\u0443\u0433\u043E\u043C \u043A\u0430\u043D\u0430\u043B\u0435."), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 9,
+      width: "100%",
+      maxWidth: 280,
+      marginTop: 18
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: "11px 13px",
+      border: "1px solid #efdbff",
+      background: "#fff",
+      borderRadius: 10,
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 26,
+      height: 26,
+      borderRadius: 7,
+      background: "#f2f0ff",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 9,
+      height: 9,
+      borderRadius: "50%",
+      background: "#6b5be0"
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 500,
+      color: "#262626",
+      flex: 1,
+      textAlign: "left"
+    }
+  }, "\u041D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u0432 MAX")), /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: "11px 13px",
+      border: "1px solid #d6ebfa",
+      background: "#fff",
+      borderRadius: 10,
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 26,
+      height: 26,
+      borderRadius: 7,
+      background: "#eaf6fd",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 9,
+      height: 9,
+      borderRadius: "50%",
+      background: "#2f8fd0"
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 500,
+      color: "#262626",
+      flex: 1,
+      textAlign: "left"
+    }
+  }, "\u041D\u0430\u043F\u0438\u0441\u0430\u0442\u044C \u0432 Telegram")))), isConversation && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center",
+      marginBottom: 14
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-block",
+      padding: "3px 11px",
+      borderRadius: 20,
+      background: "#eef0f2",
+      fontSize: 11,
+      color: "#8c8c8c"
+    }
+  }, "\u0421\u0435\u0433\u043E\u0434\u043D\u044F")), /*#__PURE__*/React.createElement(Bubble, {
+    mine: true,
+    text: "\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u0427\u0435\u043C Max \u043E\u0442\u043B\u0438\u0447\u0430\u0435\u0442\u0441\u044F \u043E\u0442 Pro?",
+    time: "14:01 \xB7 \u0434\u043E\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u043E"
+  }), /*#__PURE__*/React.createElement(AgentBubble, {
+    actor: "ai",
+    text: "Pro \u2014 \u0434\u043B\u044F \u043E\u0434\u043D\u043E\u0433\u043E \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F (\u20BD4 900/\u043C\u0435\u0441), Max \u2014 \u043A\u043E\u043C\u0430\u043D\u0434\u043D\u044B\u0439 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043D\u043D\u044B\u043C\u0438 \u043B\u0438\u043C\u0438\u0442\u0430\u043C\u0438 \u0438 \u043F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442\u043D\u043E\u0439 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 (\u20BD9 900/\u043C\u0435\u0441).",
+    meta: "\u041E\u043F\u0435\u0440\u0430\u0442\u043E\u0440 \xB7 14:01"
+  }), /*#__PURE__*/React.createElement(Bubble, {
+    mine: true,
+    text: "\u041D\u0430\u0441 6 \u0447\u0435\u043B\u043E\u0432\u0435\u043A, \u0431\u0435\u0440\u0451\u043C Max \u043D\u0430 \u0433\u043E\u0434.",
+    time: "14:02 \xB7 \u0434\u043E\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u043E"
+  }), isOperator && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center",
+      margin: "14px 0 12px"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 6,
+      padding: "5px 13px",
+      borderRadius: 20,
+      background: "var(--primary-bg)",
+      border: "1px solid var(--primary-border)",
+      fontSize: 11.5,
+      color: "#0958d9",
+      fontWeight: 500
+    }
+  }, "\u041F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u043B\u0441\u044F \u0441\u043F\u0435\u0446\u0438\u0430\u043B\u0438\u0441\u0442 \xB7 \u0438\u0441\u0442\u043E\u0440\u0438\u044F \u0443\u0436\u0435 \u0443 \u043D\u0435\u0433\u043E")), /*#__PURE__*/React.createElement(AgentBubble, {
+    actor: "human",
+    initials: "\u0410\u041A",
+    text: "\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439\u0442\u0435! \u0410\u043D\u043D\u0430, Foxray. \u041F\u043E\u043C\u043E\u0433\u0443 \u0441 \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u0435\u043C Max \u043D\u0430 6 \u043C\u0435\u0441\u0442.",
+    meta: "\u0410\u043D\u043D\u0430 \xB7 \u0441\u043F\u0435\u0446\u0438\u0430\u043B\u0438\u0441\u0442 \xB7 14:03"
+  })), isAI && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 8,
+      marginBottom: 4
+    }
+  }, /*#__PURE__*/React.createElement(ActorBadge, {
+    actor: "ai"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #eee",
+      borderRadius: "14px 14px 14px 4px",
+      padding: "12px 14px",
+      display: "flex",
+      alignItems: "center",
+      gap: 5
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: "var(--ai-lighter)",
+      animation: "hub-typing 1.2s infinite ease-in-out"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: "var(--ai-lighter)",
+      animation: "hub-typing 1.2s infinite ease-in-out .2s"
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: 6,
+      height: 6,
+      borderRadius: "50%",
+      background: "var(--ai-lighter)",
+      animation: "hub-typing 1.2s infinite ease-in-out .4s"
+    }
+  }))), isCheckout && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 8,
+      marginBottom: 6
+    }
+  }, /*#__PURE__*/React.createElement(ActorBadge, {
+    actor: "human",
+    initials: "\u0410\u041A",
+    color: "var(--primary)"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "84%",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #e8e8e8",
+      borderRadius: 14,
+      overflow: "hidden",
+      boxShadow: "var(--shadow-sm)"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "13px 15px 11px",
+      borderBottom: "1px solid #f5f5f5"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 11,
+      fontWeight: 600,
+      letterSpacing: "0.04em",
+      color: "var(--ai)",
+      marginBottom: 6
+    }
+  }, "\u041E\u0424\u041E\u0420\u041C\u041B\u0415\u041D\u0418\u0415 \u041F\u041E\u041A\u0423\u041F\u041A\u0418"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 15,
+      fontWeight: 700
+    }
+  }, "Foxray Max \xB7 6 \u043C\u0435\u0441\u0442"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "baseline",
+      gap: 7,
+      marginTop: 7
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 21,
+      fontWeight: 700
+    }
+  }, "\u20BD95 040"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      color: "#8c8c8c"
+    }
+  }, "/ \u0433\u043E\u0434 \xB7 \u221220%"))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "11px 15px 13px"
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "#",
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 7,
+      height: 40,
+      borderRadius: 9,
+      background: "var(--primary)",
+      color: "#fff",
+      fontSize: 13.5,
+      fontWeight: 600,
+      textDecoration: "none"
+    }
+  }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043F\u043E\u043A\u0443\u043F\u043A\u0435", /*#__PURE__*/React.createElement(Icon, {
+    name: "arrowRight",
+    size: 15
+  })))))))), isConversation && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "#fff",
+      borderTop: "1px solid #f0f0f0",
+      padding: "10px 12px 12px"
+    }
+  }, isAI && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 7,
+      flexWrap: "wrap",
+      marginBottom: 9
+    }
+  }, /*#__PURE__*/React.createElement(QuickReply, null, "\u0421\u0440\u0430\u0432\u043D\u0438\u0442\u044C \u0442\u0430\u0440\u0438\u0444\u044B"), /*#__PURE__*/React.createElement(QuickReply, null, "\u0415\u0441\u0442\u044C \u043B\u0438 \u043F\u0440\u043E\u0431\u043D\u044B\u0439 \u043F\u0435\u0440\u0438\u043E\u0434?")), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "flex-end",
+      gap: 8,
+      border: "1px solid #e8e8e8",
+      borderRadius: 12,
+      padding: "6px 6px 6px 12px"
+    }
+  }, /*#__PURE__*/React.createElement("textarea", {
+    rows: 1,
+    placeholder: "\u041D\u0430\u043F\u0438\u0448\u0438\u0442\u0435 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435\u2026",
+    style: {
+      flex: 1,
+      border: "none",
+      outline: "none",
+      resize: "none",
+      fontSize: 13.5,
+      lineHeight: 1.5,
+      color: "#262626",
+      fontFamily: "inherit",
+      padding: "6px 0"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    style: {
+      width: 34,
+      height: 34,
+      borderRadius: 8,
+      border: "none",
+      background: "var(--primary)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      flex: "none"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    width: 16,
+    height: 16,
+    fill: "none",
+    stroke: "#fff",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: "22",
+    y1: "2",
+    x2: "11",
+    y2: "13"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "22 2 15 22 11 13 2 9 22 2"
+  }))))), isWelcome && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "#fff",
+      borderTop: "1px solid #f0f0f0",
+      padding: "12px 14px 14px"
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setState("ai"),
+    style: {
+      width: "100%",
+      height: 44,
+      borderRadius: 10,
+      border: "none",
+      background: "var(--primary)",
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: 600,
+      cursor: "pointer"
+    }
+  }, "\u041F\u0440\u0438\u043D\u044F\u0442\u044C \u0438 \u043D\u0430\u0447\u0430\u0442\u044C \u0447\u0430\u0442")), isUnavailable && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: "none",
+      background: "#fafafa",
+      borderTop: "1px solid #f0f0f0",
+      padding: "12px 14px",
+      display: "flex",
+      alignItems: "center",
+      gap: 9,
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 12,
+      color: "#8c8c8c"
+    }
+  }, "\u041E\u0442\u043F\u0440\u0430\u0432\u043A\u0430 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439 \u043D\u0435\u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430")));
+}
+function Bubble({
+  text,
+  time
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "78%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "var(--primary)",
+      color: "#fff",
+      borderRadius: "14px 14px 4px 14px",
+      padding: "9px 13px",
+      fontSize: 13.5,
+      lineHeight: 1.45
+    }
+  }, text), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: "#bfbfbf",
+      margin: "3px 4px 0 0",
+      textAlign: "right"
+    }
+  }, time)));
+}
+function AgentBubble({
+  actor,
+  initials,
+  text,
+  meta
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      gap: 8,
+      marginBottom: 10
+    }
+  }, /*#__PURE__*/React.createElement(ActorBadge, {
+    actor: actor,
+    initials: initials,
+    color: "var(--primary)"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "78%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: "#fff",
+      border: "1px solid #eee",
+      borderRadius: "14px 14px 14px 4px",
+      padding: "9px 13px",
+      fontSize: 13.5,
+      lineHeight: 1.45,
+      color: "#262626"
+    }
+  }, text), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 10.5,
+      color: "#bfbfbf",
+      margin: "3px 0 0 4px"
+    }
+  }, meta)));
+}
+function QuickReply({
+  children
+}) {
+  return /*#__PURE__*/React.createElement("button", {
+    style: {
+      padding: "6px 12px",
+      borderRadius: 16,
+      border: "1px solid var(--primary-border)",
+      background: "#f0f7ff",
+      color: "#0958d9",
+      fontSize: 12,
+      fontWeight: 500,
+      cursor: "pointer"
+    }
+  }, children);
+}
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/web-chat/WebChatWidget.jsx", error: String((e && e.message) || e) }); }
+
+__ds_ns.CommerceStatusTimeline = __ds_scope.CommerceStatusTimeline;
+
+__ds_ns.DepartmentCard = __ds_scope.DepartmentCard;
+
+__ds_ns.IntegrationHealthCard = __ds_scope.IntegrationHealthCard;
+
+__ds_ns.MetricCard = __ds_scope.MetricCard;
+
+__ds_ns.ProductAIReleaseCard = __ds_scope.ProductAIReleaseCard;
+
+__ds_ns.Avatar = __ds_scope.Avatar;
+
+__ds_ns.Button = __ds_scope.Button;
+
+__ds_ns.Checkbox = __ds_scope.Checkbox;
+
+__ds_ns.Icon = __ds_scope.Icon;
+
+__ds_ns.ICON_NAMES = __ds_scope.ICON_NAMES;
+
+__ds_ns.IconButton = __ds_scope.IconButton;
+
+__ds_ns.Input = __ds_scope.Input;
+
+__ds_ns.Tag = __ds_scope.Tag;
+
+__ds_ns.ConversationInbox = __ds_scope.ConversationInbox;
+
+__ds_ns.KnowledgeDocumentEditor = __ds_scope.KnowledgeDocumentEditor;
+
+__ds_ns.ActorBadge = __ds_scope.ActorBadge;
+
+__ds_ns.AttentionStatus = __ds_scope.AttentionStatus;
+
+__ds_ns.ChannelBadge = __ds_scope.ChannelBadge;
+
+})();
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_manifest.json b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_manifest.json
new file mode 100644
index 0000000..6611105
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_manifest.json	
@@ -0,0 +1 @@
+{"namespace":"EdevsHubDesignSystem_e4c9df","components":[{"name":"CommerceStatusTimeline","sourcePath":"components/cards/CommerceStatusTimeline.jsx"},{"name":"DepartmentCard","sourcePath":"components/cards/DepartmentCard.jsx"},{"name":"IntegrationHealthCard","sourcePath":"components/cards/IntegrationHealthCard.jsx"},{"name":"MetricCard","sourcePath":"components/cards/MetricCard.jsx"},{"name":"ProductAIReleaseCard","sourcePath":"components/cards/ProductAIReleaseCard.jsx"},{"name":"Avatar","sourcePath":"components/core/Avatar.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Checkbox","sourcePath":"components/core/Checkbox.jsx"},{"name":"Icon","sourcePath":"components/core/Icon.jsx"},{"name":"ICON_NAMES","sourcePath":"components/core/Icon.jsx"},{"name":"IconButton","sourcePath":"components/core/IconButton.jsx"},{"name":"Input","sourcePath":"components/core/Input.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"ConversationInbox","sourcePath":"components/inbox/ConversationInbox.jsx"},{"name":"KnowledgeDocumentEditor","sourcePath":"components/inbox/KnowledgeDocumentEditor.jsx"},{"name":"ActorBadge","sourcePath":"components/status/ActorBadge.jsx"},{"name":"AttentionStatus","sourcePath":"components/status/AttentionStatus.jsx"},{"name":"ChannelBadge","sourcePath":"components/status/ChannelBadge.jsx"}],"startingPoints":[{"name":"CommerceStatusTimeline","path":"components/cards/CommerceStatusTimeline.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"Payment vs delivery step timeline for checkout/orders","viewport":"700x160"},{"name":"DepartmentCard","path":"components/cards/DepartmentCard.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"Command Center department summary card","viewport":"900x360"},{"name":"IntegrationHealthCard","path":"components/cards/IntegrationHealthCard.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"Single integration row (connected/degraded/error)","viewport":"700x90"},{"name":"MetricCard","path":"components/cards/MetricCard.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"Single KPI cell for metric grids","viewport":"700x120"},{"name":"ProductAIReleaseCard","path":"components/cards/ProductAIReleaseCard.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"AI knowledge/prompt release snapshot for one product","viewport":"700x180"},{"name":"Button","path":"components/core/Button.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Core","subtitle":"Primary/secondary/ghost/danger button","viewport":"700x220"},{"name":"IconButton","path":"components/core/IconButton.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Core","subtitle":"Square icon-only button with optional badge","viewport":"700x150"},{"name":"Input","path":"components/core/Input.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Core","subtitle":"Text field with label, icon and error state","viewport":"700x260"},{"name":"Tag","path":"components/core/Tag.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Core","subtitle":"Status pill and rectangular label tag","viewport":"700x150"},{"name":"KnowledgeDocumentEditor","path":"components/inbox/KnowledgeDocumentEditor.jsx","previewPath":"components/inbox/inbox.card.html","kind":"component","section":"Inbox","subtitle":"Plain-text knowledge base document editor","viewport":"700x380"},{"name":"ActorBadge","path":"components/status/ActorBadge.jsx","previewPath":"components/status/status.card.html","kind":"component","section":"Status","subtitle":"AI vs human avatar for conversation timelines","viewport":"700x110"},{"name":"AttentionStatus","path":"components/status/AttentionStatus.jsx","previewPath":"components/status/status.card.html","kind":"component","section":"Status","subtitle":"Company/department health chip (ok/attention/critical)","viewport":"700x120"},{"name":"ChannelBadge","path":"components/status/ChannelBadge.jsx","previewPath":"components/status/status.card.html","kind":"component","section":"Status","subtitle":"MAX / Telegram / Web Chat channel chip","viewport":"700x100"}],"cards":[{"path":"guidelines/logo-mark.card.html","group":"Brand","viewport":"700x160","subtitle":"Only mark found in the codebase — a blue rounded square with a bar-chart glyph","name":"Logo Mark"},{"path":"guidelines/radii-shadows.card.html","group":"Brand","viewport":"700x180","subtitle":"Soft, low-opacity shadows only — no glassmorphism","name":"Radii & Shadows"},{"path":"ui_kits/checkout/index.html","group":"Checkout","viewport":"440x760"},{"path":"guidelines/colors-ai-channels.card.html","group":"Colors","viewport":"700x160","subtitle":"AI/human split, MAX/Telegram/Web Chat, FirePage/Foxray","name":"AI, Channels & Products"},{"path":"guidelines/colors-neutrals.card.html","group":"Colors","viewport":"700x200","subtitle":"Text/border/surface neutral scale","name":"Neutrals"},{"path":"guidelines/colors-primary.card.html","group":"Colors","viewport":"700x160","subtitle":"Single accent — blue-6/blue-7, per ADR-HUB-0013","name":"Primary"},{"path":"guidelines/colors-semantic.card.html","group":"Colors","viewport":"700x160","subtitle":"success / warning / error / info","name":"Semantic"},{"path":"components/cards/cards.card.html","group":"Components","viewport":"900x520","subtitle":"MetricCard, DepartmentCard, IntegrationHealthCard, ProductAIReleaseCard, CommerceStatusTimeline","name":"Composite Cards"},{"path":"components/core/core.card.html","group":"Components","viewport":"700x560","subtitle":"Button, IconButton, Input, Checkbox, Tag, Avatar, Icon","name":"Core Primitives"},{"path":"components/inbox/inbox.card.html","group":"Components","viewport":"700x480","subtitle":"ConversationInbox, KnowledgeDocumentEditor","name":"Inbox & Knowledge"},{"path":"components/status/status.card.html","group":"Components","viewport":"700x420","subtitle":"AttentionStatus, ActorBadge, ChannelBadge","name":"Status & Badges"},{"path":"ui_kits/internal-hub/index.html","group":"Internal Hub","viewport":"1440x900"},{"path":"guidelines/spacing-metric-grid.card.html","group":"Spacing","viewport":"700x220","subtitle":"1px hairline-divided grid pattern","name":"Metric Grid In Use"},{"path":"guidelines/spacing-scale.card.html","group":"Spacing","viewport":"700x180","subtitle":"Compact-enterprise density — exact px, not a 4/8 grid","name":"Spacing Scale"},{"path":"guidelines/type-mono.card.html","group":"Type","viewport":"700x140","subtitle":"Order, release, event IDs and masked data","name":"Monospace / Technical IDs"},{"path":"guidelines/type-scale.card.html","group":"Type","viewport":"700x300","subtitle":"System font stack — no bespoke webfont","name":"Display & Body Scale"},{"path":"ui_kits/web-chat/index.html","group":"Web Chat","viewport":"420x680"}],"templates":[],"hasThumbnailHtml":false,"globalCssPaths":["tokens/colors.css","tokens/typography.css","tokens/spacing.css","tokens/effects.css","styles.css"],"tokens":[{"name":"--n-1","value":"#1f1f1f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-2","value":"#262626","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-3","value":"#595959","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-4","value":"#8c8c8c","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-5","value":"#bfbfbf","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-6","value":"#d9d9d9","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-7","value":"#e8e8e8","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-8","value":"#f0f0f0","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-9","value":"#f5f5f5","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-10","value":"#fafafa","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-11","value":"#f0f2f5","kind":"color","definedIn":"tokens/colors.css"},{"name":"--n-white","value":"#ffffff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--primary","value":"#1677ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--primary-hover","value":"#0958d9","kind":"color","definedIn":"tokens/colors.css"},{"name":"--primary-bg","value":"#e6f4ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--primary-border","value":"#91caff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--primary-shadow","value":"rgba(22, 119, 255, 0.3)","kind":"shadow","definedIn":"tokens/colors.css"},{"name":"--success","value":"#52c41a","kind":"color","definedIn":"tokens/colors.css"},{"name":"--success-text","value":"#389e0d","kind":"font","definedIn":"tokens/colors.css"},{"name":"--success-bg","value":"#f6ffed","kind":"color","definedIn":"tokens/colors.css"},{"name":"--success-bg-strong","value":"#f1f9ec","kind":"color","definedIn":"tokens/colors.css"},{"name":"--success-border","value":"#b7eb8f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--warning","value":"#faad14","kind":"color","definedIn":"tokens/colors.css"},{"name":"--warning-text","value":"#d48806","kind":"font","definedIn":"tokens/colors.css"},{"name":"--warning-bg","value":"#fffbe6","kind":"color","definedIn":"tokens/colors.css"},{"name":"--warning-bg-strong","value":"#fff7e6","kind":"color","definedIn":"tokens/colors.css"},{"name":"--warning-border","value":"#ffe58f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--error","value":"#ff4d4f","kind":"color","definedIn":"tokens/colors.css"},{"name":"--error-text","value":"#cf1322","kind":"font","definedIn":"tokens/colors.css"},{"name":"--error-bg","value":"#fff2f0","kind":"color","definedIn":"tokens/colors.css"},{"name":"--error-border","value":"#ffccc7","kind":"color","definedIn":"tokens/colors.css"},{"name":"--info","value":"#1677ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ai","value":"#722ed1","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ai-light","value":"#9254de","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ai-lighter","value":"#b37feb","kind":"color","definedIn":"tokens/colors.css"},{"name":"--ai-bg","value":"#f9f0ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--human","value":"#1677ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-max","value":"#6b5be0","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-max-bg","value":"#f2f0ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-telegram","value":"#2f8fd0","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-telegram-bg","value":"#eaf6fd","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-webchat","value":"#0f9b8e","kind":"color","definedIn":"tokens/colors.css"},{"name":"--channel-webchat-bg","value":"#e8f7f4","kind":"color","definedIn":"tokens/colors.css"},{"name":"--product-firepage","value":"#0958d9","kind":"color","definedIn":"tokens/colors.css"},{"name":"--product-firepage-bg","value":"#e6f4ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--product-foxray","value":"#722ed1","kind":"color","definedIn":"tokens/colors.css"},{"name":"--product-foxray-bg","value":"#f9f0ff","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-page","value":"var(--n-11)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-card","value":"var(--n-white)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-sunken","value":"#fafafa","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-chip","value":"#f7f8fa","kind":"color","definedIn":"tokens/colors.css"},{"name":"--text-heading","value":"var(--n-1)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-body","value":"var(--n-2)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-secondary","value":"var(--n-3)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-tertiary","value":"var(--n-4)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-disabled","value":"var(--n-5)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-inverse","value":"var(--n-white)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-link","value":"var(--primary)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--border-default","value":"var(--n-8)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-input","value":"var(--n-7)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-strong","value":"var(--n-6)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--font-sans","value":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif","kind":"font","definedIn":"tokens/typography.css"},{"name":"--font-mono","value":"\"SF Mono\", ui-monospace, Menlo, Consolas, monospace","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xl","value":"26px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xl","value":"24px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-lg","value":"20px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-md","value":"18px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-base-lg","value":"16px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-base","value":"14.5px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-sm-lg","value":"13.5px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-sm","value":"13px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-sm-tight","value":"12.5px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xs","value":"12px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-xs-tight","value":"11.5px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xs","value":"11px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-2xs-tight","value":"10.5px","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-regular","value":"400","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-medium","value":"500","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-semibold","value":"600","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-bold","value":"700","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-black","value":"800","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-tight","value":"-0.02em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-tight-sm","value":"-0.01em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-wide","value":"0.03em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-wider","value":"0.06em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-tight","value":"1.15","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-snug","value":"1.2","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-normal","value":"1.4","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-relaxed","value":"1.5","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-loose","value":"1.55","kind":"font","definedIn":"tokens/typography.css"},{"name":"--space-1","value":"2px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-2","value":"4px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-3","value":"6px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-4","value":"8px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-5","value":"9px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-6","value":"10px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-7","value":"11px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-8","value":"12px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-9","value":"14px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-10","value":"16px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-11","value":"18px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-12","value":"20px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-13","value":"22px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-14","value":"24px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-15","value":"28px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-16","value":"32px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-17","value":"36px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control-sm","value":"30px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control-md","value":"34px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control","value":"36px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control-lg","value":"42px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control-xl","value":"44px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-control-2xl","value":"48px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--h-topbar","value":"56px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--sidebar-width","value":"248px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--content-max","value":"1340px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--radius-xs","value":"5px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-sm","value":"7px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-md","value":"8px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-lg","value":"9px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-xl","value":"10px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-2xl","value":"12px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-3xl","value":"13px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-4xl","value":"14px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-pill","value":"999px","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--radius-circle","value":"50%","kind":"radius","definedIn":"tokens/effects.css"},{"name":"--shadow-xs","value":"0 1px 2px rgba(0, 0, 0, 0.03)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-sm","value":"0 1px 3px rgba(0, 0, 0, 0.04)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-md","value":"0 2px 12px rgba(0, 0, 0, 0.05)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-lg","value":"0 6px 20px rgba(0, 0, 0, 0.12)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-sticky","value":"0 -4px 16px rgba(0, 0, 0, 0.04)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--shadow-primary","value":"0 1px 2px rgba(22, 119, 255, 0.3)","kind":"shadow","definedIn":"tokens/effects.css"},{"name":"--ease-standard","value":"cubic-bezier(0.4, 0, 0.2, 1)","kind":"other","definedIn":"tokens/effects.css","annotation":"other"},{"name":"--duration-fast","value":"0.15s","kind":"other","definedIn":"tokens/effects.css","annotation":"other"},{"name":"--duration-base","value":"0.2s","kind":"other","definedIn":"tokens/effects.css","annotation":"other"}],"themes":[],"fonts":[],"brandFonts":[],"source":"spa"}
\ No newline at end of file
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/readme.md b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/readme.md
new file mode 100644
index 0000000..6a6b2a3
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/readme.md	
@@ -0,0 +1,216 @@
+# Edevs Hub — Design System
+
+Design system for **Edevs**, a Russian product IT company (`edevs.tech`) that builds applied
+digital products for narrow professional niches — currently **FoxRay** (cephalometric/TRG
+analysis for orthodontists) and **FirePage** (ready-made niche websites on a proprietary CMS,
+sold as a one-time license). This design system, however, documents **Edevs Hub**
+(`hub.edevs.tech`) — the internal company platform that runs sales, support, AI agents, and
+commerce for those products, plus the two small public-facing surfaces it exposes (Web Chat
+widget and Checkout).
+
+## Sources
+
+Everything here was extracted from the attached codebase, mounted read-only at
+`hub.edevs.tech/`:
+
+- `hub.edevs.tech/design/baseline/*.dc.html` — the team's own **approved HTML visual baseline**
+  (explicitly the canonical design source per `SPEC-HUB-0007`, section 3: *"Утверждённые
+  дизайн-файлы размещаются только в едином каноническом каталоге:
+  `code/hub.edevs.tech/design/baseline/`"*). ~35 screens covering Command Center, Sales
+  (overview/clients/dialogs/orders), Departments, Employees, Products, AI agents (list/create/
+  detail/knowledge), Integrations, Settings, Auth, the Web Chat widget, and the Checkout flow.
+- `hub.edevs.tech/design/baseline/uploads/ADR-HUB-0013-Internal-UI-Design-System.md` — the
+  Internal Hub UI design-system decision record (Ant Design + Ant Design X + "Edevs Hub Theme").
+- `hub.edevs.tech/design/baseline/uploads/SPEC-HUB-0007-Checkout-UI.md` — the public checkout
+  interface spec (`pay.hub.edevs.tech`).
+- `hub.edevs.tech/design/baseline/uploads/SPEC-HUB-0003-Web-Chat.md`,
+  `SPEC-HUB-0004-Internal-Hub-UI.md`, `SPEC-HUB-0005-Implemented-Internal-UI-Baseline.md`,
+  `SPEC-HUB-0001-First-Iteration.md`, `ADR-HUB-0017-AI-Agent-Configuration-UX.md` — supporting
+  specs referenced but not individually quoted below.
+- `hub.edevs.tech/packages/ui/src/theme.ts` — the actual Ant Design `ThemeConfig` ("Edevs Hub
+  Theme") used by the Internal UI: primary color, radii, per-component overrides.
+  `hub.edevs.tech/apps/internal-ui/src/styles/base.css` — global resets.
+- `hub.edevs.tech/apps/internal-ui/public/favicon.svg` — the one brand mark present in the repo.
+- `hub.edevs.tech/content/ai-content-company-filled.md` — the AI agent's system/persona prompts
+  for the main company site, used for the Content Fundamentals section below.
+- `hub.edevs.tech/apps/checkout` and `hub.edevs.tech/apps/web-chat` — app shells for the public
+  surfaces (the checkout app has no implementation yet; the design baseline is ground truth for
+  both).
+
+No Figma file or link was provided for this project — the HTML baseline above is the sole
+design source, and per the team's own spec it *is* the canonical one.
+
+## Products in scope
+
+1. **Internal Hub** (`hub.edevs.tech`, `apps/internal-ui`) — the OWNER/OPERATOR back office:
+   Command Center, Departments, Employees, Products, Sales workspace (overview, clients,
+   dialogs, orders), AI agents & knowledge, Integrations, Settings, Auth. Built on Ant Design +
+   Ant Design X, desktop-first (1024px+, designed for 1440px).
+2. **Web Chat** (`apps/web-chat`) — the embeddable public support/sales chat widget for
+   products like FoxRay, handling AI, human handoff, and inline checkout cards.
+3. **Checkout** (`apps/checkout`, `pay.hub.edevs.tech`) — the public, mobile-first purchase flow
+   that hands off to Bank Tochka for payment and separately tracks payment vs. product delivery.
+
+## Index
+
+- `styles.css` — root stylesheet, imports everything under `tokens/`.
+- `tokens/colors.css`, `typography.css`, `spacing.css`, `effects.css` — design tokens.
+- `assets/logo-mark.svg`, `favicon.svg` — the one brand mark found in the codebase.
+- `components/core/` — Button, IconButton, Input, Checkbox, Tag, Avatar, Icon (intentional
+  additions — see below).
+- `components/status/` — AttentionStatus, ActorBadge, ChannelBadge.
+- `components/cards/` — MetricCard, DepartmentCard, IntegrationHealthCard,
+  ProductAIReleaseCard, CommerceStatusTimeline.
+- `components/inbox/` — ConversationInbox, KnowledgeDocumentEditor.
+- `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand).
+- `ui_kits/internal-hub/` — Auth → Command Center → Sales · Clients, clickable.
+- `ui_kits/web-chat/` — the embeddable chat widget, all 5 states.
+- `ui_kits/checkout/` — the public checkout flow, all 8 states.
+
+## Components
+
+Full list (16), grouped by directory:
+
+- **Core** (intentional additions, see below): `Button`, `IconButton`, `Input`, `Checkbox`,
+  `Tag`, `Avatar`, `Icon`.
+- **Status** (from ADR-HUB-0013's local-component list): `AttentionStatus`, `ActorBadge`,
+  `ChannelBadge`.
+- **Cards** (from ADR-HUB-0013): `MetricCard`, `DepartmentCard`, `IntegrationHealthCard`,
+  `ProductAIReleaseCard`, `CommerceStatusTimeline`.
+- **Inbox** (from ADR-HUB-0013): `ConversationInbox`, `KnowledgeDocumentEditor`.
+
+### Intentional additions
+
+ADR-HUB-0013 states the Internal Hub is built on **Ant Design + Ant Design X**, with only ten
+named local composite components on top (listed under "Status/Cards/Inbox" above — built
+exactly as named). Ant Design itself isn't installable in this static-HTML environment, so to
+make the UI kits and composite components actually renderable, this system also includes a
+small set of Ant-Design-styled primitives that the ADR assumes but doesn't name:
+`Button`, `IconButton`, `Input`, `Checkbox`, `Tag`, `Avatar`, `Icon`. Their visuals (radii,
+heights, colors) are copied exactly from the approved HTML baseline, not invented — treat them
+as a faithful stand-in for the real Ant Design instance, not a design decision of their own.
+
+## Content fundamentals
+
+Drawn from the AI agent system prompts (`content/ai-content-company-filled.md`) and the copy
+throughout the baseline screens (Russian-language product, primary audience is Russian).
+
+- **Language & register:** Russian, informal-but-respectful "вы" register — direct, calm,
+  no hard-sell. The agent prompt is explicit: "Пиши как нормальный человек в мессенджере. Не как объявление, не как пресс-релиз и не как робот, который сразу вываливает всю информацию."
+- **Tone:** short, human paragraphs, answer the actual question first, then suggest a next
+  step: "Отвечай по сути вопроса, короткими живыми абзацами." and "Не дави на покупку. Главная задача общего агента — правильно понять потребность и направить человека туда, где он быстрее получит пользу."
+- **Formatting discipline:** no markdown inside chat replies — "Не используй markdown-разметку внутри ответа: не ставь заголовки, списки с маркерами, жирный текст, таблицы и разделители." UI copy elsewhere (Hub, checkout) mirrors this: plain sentences, no bullet-heavy microcopy.
+- **Emoji:** rare and situational, never decorative — "Уместные смайлики допустимы, но редко и по ситуации." No emoji appear anywhere in the Hub, Web Chat or Checkout baseline screens.
+- **Cultural register:** "Учитывай российский контекст общения: уважительно, прямо, без давления и без чрезмерной рекламности."
+- **Honesty/scope discipline:** never invent facts, prices, or promises outside the knowledge
+  base — "Если данных не хватает, не выдумывай. Скажи, что этот момент лучше уточнить у специалиста, и передай оператору." and pricing/legal specifics always come from the server, never the client: see Checkout spec §16 ("не доверять цене и составу из состояния браузера").
+- **Handoff phrasing:** warm, not robotic, when passing to a human — "При передаче не отвечай сухо. Напиши по-человечески: понял задачу, здесь лучше подключить специалиста, передаю вопрос."
+- **UI microcopy style (from the baseline):** short declarative status lines ("Готовим оплату",
+  "Оплата получена", "Требует внимания"), technical IDs always in monospace, money always as
+  `₽95 040` (₽ prefix, space thousands separator, no decimals for round sums).
+- **Domains:** only `edevs.tech` is the confirmed public site; `edevs.ru` is explicitly
+  forbidden in agent replies.
+
+## Visual foundations
+
+- **Overall direction (ADR-HUB-0013):** *"светлая тема; премиальный минимализм; высокая, но
+  контролируемая информационная плотность; спокойная нейтральная основа; один основной
+  акцентный цвет; цвет используется прежде всего для статусов и действий; минимум декоративных
+  элементов; отсутствие градиентов, стекломорфизма, неоновых эффектов и визуального шума;
+  desktop-first."* (light theme, premium minimalism, one accent color, color reserved for
+  status/action, no gradients/glassmorphism/neon, desktop-first for the internal Hub).
+- **Color:** one accent, `#1677ff` (Ant Design blue-6) with a `#0958d9` hover/active shade.
+  Semantic tokens are mandatory and separate from the accent: success/warning/error/info, plus
+  two Hub-specific roles — `ai` (purple, `#722ed1`) vs `human` (blue, same as primary) — and a
+  `channel-*` family (MAX purple, Telegram blue, Web Chat teal) used sparingly so multi-channel
+  screens don't turn into "a colorful mosaic" (ADR wording). Status color is never the sole
+  signal — always paired with text and, in tables, an icon or label.
+- **Type:** system font stack only — no bespoke webfont is loaded
+  (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`).
+  Technical identifiers (order/release/event IDs, emails, obscured phone numbers) switch to a
+  monospace stack. Headings use tight letter-spacing (−0.01 to −0.02em); table headers use wide
+  spacing (+0.03 to +0.06em) with all-caps and a muted gray.
+  Sizes are exact pixel values pulled from the baseline (26/24/20/18/16/14.5/13.5/13/12.5/12/
+  11/10.5px) — not snapped to a 4/8 grid.
+- **Spacing / density:** "compact enterprise" density is an explicit rule — *"большие пустые
+  поля и oversized-карточки запрещены"*. Padding values are odd/precise (9px, 11px, 13px, 14px,
+  18px…), not rounded. Control heights: 30/34/36/42/44/48px; topbar is a fixed 56px.
+- **Backgrounds:** flat solid colors only. Page background `#f0f2f5`, card surfaces pure white.
+  No photography, no illustrations, no repeating patterns/textures, no gradients anywhere
+  (buttons, cards, banners are all flat fills). The one "textured" pattern in the system is the
+  1px-gap metric grid (white cells on a `#f0f0f0` background, forming hairline dividers) — see
+  the Spacing → "Metric Grid In Use" card.
+- **Corners:** 7–9px on controls/inputs, 8–9px on buttons, 10–14px on cards/modals, full pill
+  on chips/segmented controls, circle on avatars.
+- **Cards:** white surface, 1px `#f0f0f0` border, soft shadow (`0 1px 3px rgba(0,0,0,.04)`),
+  12px radius as the default; no colored left-border accent except the Command Center's status
+  banner (a deliberate, singular exception tied to company health, not a general card pattern).
+- **Shadows:** shallow and near-neutral throughout — hairline (`0 1px 2px rgba(0,0,0,.03)`),
+  card (`0 1px 3px rgba(0,0,0,.04)`), modal (`0 2px 12px rgba(0,0,0,.05)`), dropdown
+  (`0 6px 20px rgba(0,0,0,.12)`). The one colored shadow is the primary button's blue-tinted
+  `0 1px 2px rgba(22,119,255,.3)`, used to make the single CTA per screen pop slightly.
+- **Animation:** minimal and functional only — a 3-dot typing indicator (`hub-typing`, opacity/
+  translateY loop), a spinner (`hub-spin`, rotate) for loading states, and a slow opacity pulse
+  (`hub-pulse`) for "in progress" states (e.g. delivering a purchased product). No entrance
+  animations, bounces, or parallax anywhere in the baseline.
+- **Hover states:** buttons/links darken (primary `#1677ff → #0958d9`); neutral surfaces get a
+  light gray fill (`transparent → #f5f5f5`) on hover; secondary buttons swap border+text to the
+  accent color on hover. No lightening-on-hover pattern is used.
+  **Press/active states:** not distinctly styled in the baseline (no scale/shrink pattern
+  observed) — treat hover as the primary interactive affordance; focus-visible gets a solid
+  2px accent outline (see `apps/internal-ui/src/styles/base.css`).
+  **Disabled:** 55% opacity + `cursor: not-allowed`.
+  **Focus:** border-color changes to the accent (inputs) or a visible 2px outline (buttons) —
+  never a glow/box-shadow ring.
+- **Borders:** hairline `#f0f0f0` almost everywhere (card edges, table row dividers, header
+  separators); slightly stronger `#d9d9d9`/`#e8e8e8` on interactive control outlines
+  (buttons, inputs) so they read as tappable against the flat background.
+- **Transparency & blur:** no blur/glassmorphism anywhere. The only translucent surfaces are
+  the Web Chat header's icon buttons (`rgba(255,255,255,0.14–0.26)` over the solid blue header)
+  and a full-viewport `position:fixed` transparent scrim used to close open dropdowns/menus.
+- **Imagery:** none — the product is data/status-dense enterprise software and transactional
+  flows, not marketing pages. No photography, no hand-drawn illustrations, no generic stock
+  imagery anywhere in the baseline; nothing to copy in for that reason.
+- **Layout rules:** Internal Hub is a fixed sidebar (≈248px) + topbar (56px) + scrollable
+  content shell, min-width 1024–1180px depending on screen, content capped at 1200–1340px and
+  centered. Web Chat and Checkout are separate, chrome-free, mobile-first single-column flows
+  with no sidebar/topbar — explicitly not governed by the Internal Hub's layout rules
+  (SPEC-HUB-0007 §4).
+
+## Iconography
+
+- **System:** hand-authored inline SVG, Feather/Lucide-style stroke icons (round caps/joins,
+  1.7–2.2px stroke, 24×24 viewBox) — every baseline screen inlines its own `<svg>` rather than
+  referencing a shared font or sprite sheet, so there is no icon font or `.svg` sprite file in
+  the repo to copy wholesale. This design system's `Icon` component (`components/core/Icon.jsx`)
+  collects the ~35 recurring glyphs actually used across the baseline (nav icons, status icons,
+  form icons, payment icons) into one reusable primitive with the *exact* path data copied from
+  the source screens — nothing was redrawn from imagination.
+- **Emoji:** never used anywhere in the product UI (only "rarely, situationally" in AI chat
+  replies per the content guidelines above).
+  **Unicode-as-icon:** limited to pagination chevrons (`‹ › …`) in table footers.
+- **Color:** icons are almost always `currentColor`/neutral gray (`#8c8c8c`/`#595959`), tinted
+  to the semantic/accent color only when they sit inside a status chip or colored icon tile
+  (e.g. a purple AI bolt icon on a light-purple tile).
+
+## Caveats & where I need your help
+
+1. **No Figma was attached** — everything above comes from the approved HTML baseline in
+   `design/baseline/`, which the team's own spec names as canonical. If a Figma file exists,
+   attach it and I can cross-check/tighten values.
+2. **No FoxRay/FirePage brand assets** — this system only covers Edevs Hub (the internal
+   platform + its two public surfaces). FoxRay/Foxray and FirePage are referenced only as
+   *product tags* inside Hub (colored labels, no logos). If you want their actual product UI
+   or marks in this system, please attach their codebases/design files.
+3. **No logo beyond the one favicon mark** — I did not draw one. If Edevs has a real wordmark
+   or icon set beyond `favicon.svg`, please attach it and I'll swap it in everywhere.
+4. **Ant Design isn't literally bundled** — see "Intentional additions" above; I built
+   faithful lightweight stand-ins instead of pulling in the real library, since only static
+   HTML/JS/CSS work in this environment.
+5. **Internal Hub UI kit covers 2 of many screens** (Command Center + Sales · Clients, behind a
+   working Auth gate) rather than all ~35 baseline screens — tell me which screens matter most
+   (Departments, AI agents, Orders, Settings…) and I'll extend the kit.
+
+**Ask:** tell me which of the ~35 baseline screens to turn into additional UI-kit pages next,
+and whether the Ant-Design-styled primitives above should stay as lightweight stand-ins or be
+swapped for real `antd` components if this ever moves into a real build environment.
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/styles.css b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/styles.css
new file mode 100644
index 0000000..0cd17b1
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/styles.css	
@@ -0,0 +1,4 @@
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/spacing.css";
+@import "./tokens/effects.css";
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/colors.css b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/colors.css
new file mode 100644
index 0000000..e20679d
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/colors.css	
@@ -0,0 +1,88 @@
+/* Edevs Hub — color tokens
+   Source: packages/ui/src/theme.ts (Ant Design ThemeConfig), apps/internal-ui/src/styles/base.css,
+   and design/baseline/*.dc.html (approved HTML baseline). Ant Design's default light palette,
+   customized with a single accent (#1677ff) per ADR-HUB-0013. */
+
+:root {
+  /* ---- base neutrals (Ant Design neutral scale as used in the baseline) ---- */
+  --n-1: #1f1f1f;   /* page/heading titles */
+  --n-2: #262626;   /* primary body text */
+  --n-3: #595959;   /* secondary text */
+  --n-4: #8c8c8c;   /* tertiary text / captions */
+  --n-5: #bfbfbf;   /* disabled / placeholder / faint */
+  --n-6: #d9d9d9;   /* strong border, control border */
+  --n-7: #e8e8e8;   /* input border */
+  --n-8: #f0f0f0;   /* hairline border */
+  --n-9: #f5f5f5;   /* hover surface */
+  --n-10: #fafafa;  /* table header surface */
+  --n-11: #f0f2f5;  /* app/page background */
+  --n-white: #ffffff;
+
+  /* ---- primary (blue-6 / blue-7) ---- */
+  --primary: #1677ff;
+  --primary-hover: #0958d9;
+  --primary-bg: #e6f4ff;
+  --primary-border: #91caff;
+  --primary-shadow: rgba(22, 119, 255, 0.3);
+
+  /* ---- semantic: success / warning / error / info ---- */
+  --success: #52c41a;
+  --success-text: #389e0d;
+  --success-bg: #f6ffed;
+  --success-bg-strong: #f1f9ec;
+  --success-border: #b7eb8f;
+
+  --warning: #faad14;
+  --warning-text: #d48806;
+  --warning-bg: #fffbe6;
+  --warning-bg-strong: #fff7e6;
+  --warning-border: #ffe58f;
+
+  --error: #ff4d4f;
+  --error-text: #cf1322;
+  --error-bg: #fff2f0;
+  --error-border: #ffccc7;
+
+  --info: #1677ff;
+
+  /* ---- role accents: AI vs human ---- */
+  --ai: #722ed1;
+  --ai-light: #9254de;
+  --ai-lighter: #b37feb;
+  --ai-bg: #f9f0ff;
+  --human: #1677ff;
+
+  /* ---- channel accents (MAX / Telegram / Web Chat) ---- */
+  --channel-max: #6b5be0;
+  --channel-max-bg: #f2f0ff;
+  --channel-telegram: #2f8fd0;
+  --channel-telegram-bg: #eaf6fd;
+  --channel-webchat: #0f9b8e;
+  --channel-webchat-bg: #e8f7f4;
+
+  /* ---- product accents (as tagged in tables/lists) ---- */
+  --product-firepage: #0958d9;
+  --product-firepage-bg: #e6f4ff;
+  --product-foxray: #722ed1;
+  --product-foxray-bg: #f9f0ff;
+
+  /* ---- surfaces ---- */
+  --surface-page: var(--n-11);
+  --surface-card: var(--n-white);
+  --surface-sunken: #fafafa;
+  --surface-chip: #f7f8fa;
+
+  /* ---- text aliases ---- */
+  --text-heading: var(--n-1);
+  --text-body: var(--n-2);
+  --text-secondary: var(--n-3);
+  --text-tertiary: var(--n-4);
+  --text-disabled: var(--n-5);
+  --text-inverse: var(--n-white);
+  --text-link: var(--primary);
+
+  /* ---- borders ---- */
+  --border-default: var(--n-8);
+  --border-input: var(--n-7);
+  --border-strong: var(--n-6);
+}
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/effects.css b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/effects.css
new file mode 100644
index 0000000..4fa2bb5
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/effects.css	
@@ -0,0 +1,40 @@
+/* Edevs Hub — radii, shadows, motion. "Премиальный минимализм": no gradients,
+   no glassmorphism/blur, no neon — shadows stay soft and near-black at low opacity. */
+
+:root {
+  --radius-xs: 5px;
+  --radius-sm: 7px;
+  --radius-md: 8px;
+  --radius-lg: 9px;
+  --radius-xl: 10px;
+  --radius-2xl: 12px;
+  --radius-3xl: 13px;
+  --radius-4xl: 14px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.12);
+  --shadow-sticky: 0 -4px 16px rgba(0, 0, 0, 0.04);
+  --shadow-primary: 0 1px 2px rgba(22, 119, 255, 0.3);
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
+  --duration-fast: 0.15s; /* @kind other */
+  --duration-base: 0.2s; /* @kind other */
+}
+
+@keyframes hub-typing {
+  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
+  40% { opacity: 1; transform: translateY(-2px); }
+}
+
+@keyframes hub-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes hub-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/spacing.css b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/spacing.css
new file mode 100644
index 0000000..5c15ebc
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/spacing.css	
@@ -0,0 +1,36 @@
+/* Edevs Hub — spacing tokens. Compact-enterprise density (ADR-HUB-0013):
+   "большие пустые поля и oversized-карточки запрещены". Values are the exact
+   paddings/gaps observed in the baseline, not snapped to a rounder grid. */
+
+:root {
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 9px;
+  --space-6: 10px;
+  --space-7: 11px;
+  --space-8: 12px;
+  --space-9: 14px;
+  --space-10: 16px;
+  --space-11: 18px;
+  --space-12: 20px;
+  --space-13: 22px;
+  --space-14: 24px;
+  --space-15: 28px;
+  --space-16: 32px;
+  --space-17: 36px;
+
+  /* control heights */
+  --h-control-sm: 30px;
+  --h-control-md: 34px;
+  --h-control: 36px;
+  --h-control-lg: 42px;
+  --h-control-xl: 44px;
+  --h-control-2xl: 48px;
+  --h-topbar: 56px;
+
+  /* layout */
+  --sidebar-width: 248px;
+  --content-max: 1340px;
+}
diff --git a/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/typography.css b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/typography.css
new file mode 100644
index 0000000..0d43222
--- /dev/null
+++ b/design/baseline/Каналы обработки/_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/typography.css	
@@ -0,0 +1,42 @@
+/* Edevs Hub — typography tokens
+   The internal Hub uses the Ant Design default system font stack — no bespoke webfont
+   is loaded (see ADR-HUB-0013: "используется системный font stack Ant Design без
+   обязательной внешней зависимости от загружаемого шрифта"). Technical identifiers
+   (order/release/event IDs, emails) use a monospace stack. */
+
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+
+  /* type scale, taken verbatim from the baseline (px, not snapped to a 4/8 grid) */
+  --text-2xl: 26px;   /* page hero title (Command Center) */
+  --text-xl: 24px;    /* page title */
+  --text-lg: 20px;     /* auth title */
+  --text-md: 18px;    /* card title */
+  --text-base-lg: 16px;
+  --text-base: 14.5px; /* buttons, primary body */
+  --text-sm-lg: 13.5px;
+  --text-sm: 13px;     /* table body */
+  --text-sm-tight: 12.5px;
+  --text-xs: 12px;     /* meta */
+  --text-xs-tight: 11.5px;
+  --text-2xs: 11px;    /* table header / eyebrow */
+  --text-2xs-tight: 10.5px;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-black: 800;
+
+  --tracking-tight: -0.02em;   /* large headings */
+  --tracking-tight-sm: -0.01em;
+  --tracking-wide: 0.03em;     /* table header eyebrows */
+  --tracking-wider: 0.06em;    /* nav section labels */
+
+  --leading-tight: 1.15;
+  --leading-snug: 1.2;
+  --leading-normal: 1.4;
+  --leading-relaxed: 1.5;
+  --leading-loose: 1.55;
+}
diff --git a/design/baseline/Каналы обработки/assets/custocrm-mark.svg b/design/baseline/Каналы обработки/assets/custocrm-mark.svg
new file mode 100644
index 0000000..1d49023
--- /dev/null
+++ b/design/baseline/Каналы обработки/assets/custocrm-mark.svg	
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1386 1386" fill="none">
+  <rect width="1386" height="1386" rx="300" fill="#1677FF"></rect>
+  <path d="M691.947 175C743.896 176.004 775.161 202.368 793.419 230.289C802.544 244.243 808.421 258.585 812.018 270.347C815.61 282.096 816.938 291.306 816.938 295.001C816.938 309.524 816.93 372.653 744.438 407.813V460.002H904.938V540.99L904.45 541.002L744.445 544.989L749.937 882.48C749.937 882.489 749.939 882.5 749.94 882.514C749.944 882.549 749.949 882.602 749.955 882.672C749.968 882.812 749.988 883.021 750.016 883.295C750.071 883.842 750.157 884.648 750.278 885.681C750.521 887.746 750.905 890.716 751.471 894.334C752.601 901.571 754.457 911.395 757.356 921.745C760.257 932.098 764.196 942.963 769.489 952.29C774.619 961.33 780.998 968.885 788.895 973.156L789.664 973.56L789.699 973.577L789.731 973.601C793.751 976.524 799.835 978.199 806.771 979.04C813.693 979.879 821.395 979.88 828.599 979.506C835.8 979.132 842.489 978.384 847.379 977.729C849.823 977.401 851.817 977.097 853.199 976.875C853.89 976.764 854.428 976.673 854.793 976.61C854.975 976.579 855.115 976.555 855.208 976.538C855.255 976.53 855.29 976.524 855.313 976.52C855.323 976.518 855.33 976.516 855.336 976.515C855.345 976.512 855.36 976.509 855.379 976.505C855.418 976.495 855.477 976.481 855.556 976.461C855.713 976.421 855.948 976.36 856.258 976.276C856.878 976.109 857.797 975.851 858.986 975.491C861.365 974.771 864.827 973.639 869.151 971.999C877.801 968.719 889.899 963.401 903.684 955.262C931.141 939.048 965.281 911.632 992.18 866.791C981.29 863.394 967.013 860.713 955.359 858.873C949.428 857.937 944.183 857.218 940.421 856.734C938.54 856.492 937.03 856.309 935.99 856.187C935.471 856.125 935.069 856.079 934.797 856.048C934.661 856.032 934.557 856.02 934.487 856.013C934.453 856.009 934.427 856.006 934.409 856.004C934.401 856.003 934.394 856.002 934.39 856.002C934.388 856.002 934.386 856.002 934.385 856.002L934.384 856.001H934.383L933.401 855.894L934.069 855.166L1073.57 703.165L1074.13 702.559L1074.41 703.333C1090.68 748.154 1096.94 802.964 1099.12 846.542C1100.22 868.336 1100.3 887.331 1100.1 900.879C1100 907.653 1099.84 913.065 1099.7 916.784C1099.63 918.644 1099.56 920.081 1099.51 921.053C1099.49 921.539 1099.47 921.909 1099.46 922.157C1099.45 922.282 1099.45 922.376 1099.44 922.438C1099.44 922.47 1099.44 922.494 1099.44 922.51C1099.44 922.517 1099.44 922.523 1099.44 922.527C1099.44 922.529 1099.44 922.531 1099.44 922.532C1099.43 922.533 1099.39 922.531 1098.94 922.505L1099.44 922.534L1099.39 923.361L1098.68 922.933L1048.66 892.726C1003.9 993.99 945.911 1044.08 883.83 1083.43C821.626 1122.85 755.486 1151.41 694.283 1209.87L693.948 1210.19L693.604 1209.88C626.889 1149.91 559.114 1118.72 497.414 1078.36C435.832 1038.08 380.46 988.73 338.686 892.68C328.31 897.648 315.933 905.371 306.086 911.902C301.091 915.215 296.752 918.217 293.662 920.391C292.117 921.478 290.883 922.358 290.037 922.966C289.614 923.269 289.288 923.505 289.067 923.665C288.957 923.745 288.874 923.806 288.817 923.847C288.789 923.867 288.768 923.883 288.754 923.894C288.747 923.899 288.741 923.903 288.737 923.905C288.736 923.906 288.734 923.907 288.733 923.907L288.732 923.908L288.048 924.408L287.941 923.567L288.438 923.505C287.942 923.568 287.942 923.567 287.941 923.566C287.941 923.566 287.941 923.564 287.94 923.562C287.94 923.559 287.94 923.555 287.939 923.549C287.938 923.537 287.936 923.518 287.933 923.494C287.927 923.446 287.918 923.373 287.906 923.277C287.884 923.086 287.851 922.8 287.81 922.424C287.727 921.67 287.611 920.551 287.478 919.085C287.21 916.153 286.872 911.834 286.587 906.28C286.016 895.173 285.656 879.126 286.5 859.358C288.189 819.824 294.695 765.402 313.962 705.85L314.224 705.041L314.803 705.662L455.303 856.163L455.976 856.884L454.997 857.001L397.147 863.923C397.186 864.016 397.228 864.119 397.276 864.232C397.53 864.832 397.917 865.718 398.445 866.858C399.502 869.139 401.127 872.437 403.397 876.495C407.939 884.612 415.061 895.773 425.381 907.932C446.013 932.242 479.425 960.545 530.546 976.515C553.481 979.493 570.422 978.743 581.621 977.252C587.224 976.506 591.391 975.575 594.151 974.832C595.531 974.461 596.561 974.137 597.242 973.906C597.583 973.791 597.836 973.699 598.004 973.637C598.088 973.606 598.151 973.581 598.191 973.565C598.211 973.558 598.227 973.552 598.236 973.548C598.241 973.546 598.244 973.544 598.246 973.543C598.249 973.542 598.254 973.54 598.26 973.537C598.274 973.531 598.297 973.521 598.326 973.508C598.386 973.48 598.477 973.436 598.598 973.376C598.839 973.256 599.199 973.068 599.661 972.8C600.586 972.264 601.923 971.408 603.553 970.142C606.812 967.608 611.246 963.425 615.904 956.842C625.218 943.678 635.442 920.895 638.938 882.477L642.432 544.989L482.925 541.002L482.438 540.99V460.002H642.483C642.506 459.763 642.536 459.433 642.572 459.019C642.654 458.09 642.768 456.741 642.895 455.058C643.147 451.691 643.45 446.988 643.652 441.648C644.054 431.045 644.053 417.961 642.48 407.824C603.762 387.517 586.111 359.35 578.152 336.227C574.167 324.647 572.613 314.338 572.056 306.921C571.777 303.212 571.748 300.226 571.788 298.164C571.808 297.133 571.846 296.333 571.879 295.789C571.895 295.517 571.91 295.309 571.921 295.169C571.926 295.099 571.931 295.045 571.935 295.009C571.936 294.991 571.938 294.977 571.938 294.968C571.939 294.966 571.938 294.964 571.938 294.963C571.939 294.949 571.939 294.927 571.94 294.899C571.943 294.844 571.946 294.761 571.951 294.652C571.961 294.436 571.979 294.115 572.006 293.697C572.06 292.862 572.156 291.639 572.317 290.081C572.641 286.965 573.233 282.51 574.307 277.145C576.454 266.416 580.529 252.039 588.245 237.454C603.689 208.261 633.709 178.262 691.909 175.001L691.929 175H691.947ZM693.938 234C658.867 234 630.438 262.43 630.438 297.5C630.438 332.57 658.867 361 693.938 361C729.008 361 757.438 332.57 757.438 297.5C757.438 262.43 729.008 234 693.938 234Z" fill="white"></path>
+</svg>
\ No newline at end of file
diff --git a/design/baseline/Каналы обработки/support.js b/design/baseline/Каналы обработки/support.js
new file mode 100644
index 0000000..dc9a1d5
--- /dev/null
+++ b/design/baseline/Каналы обработки/support.js	
@@ -0,0 +1,1841 @@
+// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`.
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/react.ts
+  function getReact() {
+    const R = window.React;
+    if (!R) throw new Error("dc-runtime: window.React is not available yet");
+    return R;
+  }
+  function getReactDOM() {
+    const RD = window.ReactDOM;
+    if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet");
+    return RD;
+  }
+  var h = ((...args) => getReact().createElement(
+    ...args
+  ));
+
+  // src/parse.ts
+  function parseDcDocument(doc) {
+    const dc = doc.querySelector("x-dc");
+    if (!dc) return null;
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template: dc.innerHTML,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDcText(src) {
+    const openMatch = /<x-dc(?:\s[^>]*)?>/.exec(src);
+    if (!openMatch) return null;
+    const close = src.lastIndexOf("</x-dc>");
+    if (close === -1 || close < openMatch.index) return null;
+    const template = src.slice(openMatch.index + openMatch[0].length, close);
+    const doc = new DOMParser().parseFromString(src, "text/html");
+    const scriptEl = doc.querySelector("script[data-dc-script]");
+    const { props, preview } = parseDataProps(
+      scriptEl?.getAttribute("data-props") ?? null
+    );
+    return {
+      template,
+      js: scriptEl ? scriptEl.textContent || "" : "",
+      props,
+      preview
+    };
+  }
+  function parseDataProps(raw) {
+    if (!raw) return { props: null, preview: null };
+    let parsed;
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return { props: null, preview: null };
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return { props: null, preview: null };
+    }
+    const obj = parsed;
+    const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null;
+    const rest = {};
+    for (const k of Object.keys(obj)) {
+      if (k[0] !== "$") rest[k] = obj[k];
+    }
+    return { props: Object.keys(rest).length ? rest : null, preview };
+  }
+  function dcNameFromPath(pathname) {
+    let p = pathname || "";
+    try {
+      p = decodeURIComponent(p);
+    } catch {
+    }
+    const base = p.split("/").pop() || "Root";
+    return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root";
+  }
+
+  // src/boot.ts
+  var BASE_CSS = `
+    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
+      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
+      border-radius:2px;box-sizing:border-box;overflow:hidden}
+    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
+    html.sc-dc-streaming .sc-placeholder,
+    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
+      background:color-mix(in srgb,currentColor 5%,transparent);
+      border-color:transparent}
+    html.sc-dc-streaming .sc-placeholder::before,
+    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
+      position:absolute;inset:0;pointer-events:none;
+      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
+      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
+    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
+    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
+      background:color-mix(in srgb,currentColor 8%,transparent)}
+    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
+      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
+    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
+      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
+      border-radius:2px;box-sizing:border-box;color:transparent;
+      user-select:none}
+    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
+      color:color-mix(in srgb,currentColor 50%,transparent);
+      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
+      padding:0 3px}
+    .sc-host.sc-has-error{position:relative}
+    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
+      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
+      border-radius:4px;white-space:pre-wrap;pointer-events:none}
+    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both
+       in sync until dc-runtime regains a build step. */
+    @media print {
+      @page { margin: 0.5cm; }
+      figure, table { break-inside: avoid; }
+      #dc-root, #dc-root > .sc-host { height: auto; }
+      *, *::before, *::after {
+        print-color-adjust: exact; -webkit-print-color-adjust: exact;
+        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
+        animation-delay: -99s !important; animation-duration: .001s !important;
+        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
+        animation-play-state: running !important; transition-duration: 0s !important;
+      }
+    }
+  `;
+  var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}";
+  function rootNameForDocument(doc, loc) {
+    let bootPath = loc.pathname || "";
+    if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) {
+      try {
+        bootPath = new URL(doc.baseURI || "/").pathname;
+      } catch {
+      }
+    }
+    return dcNameFromPath(bootPath);
+  }
+  function safeDecode(s) {
+    try {
+      return decodeURIComponent(s);
+    } catch {
+      return s;
+    }
+  }
+  function boot(runtime, doc = document) {
+    const parsed = parseDcDocument(doc);
+    if (!parsed) return null;
+    const React = getReact();
+    const rootName = rootNameForDocument(doc, location);
+    runtime.markFetched(rootName);
+    runtime.setRootName(rootName);
+    runtime.adoptParsed(rootName, parsed);
+    if (!window.__resources) {
+      fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => {
+        const raw = t ? parseDcText(t) : null;
+        if (raw?.template) runtime.updateHtml(rootName, raw.template);
+      }).catch(() => {
+      });
+    }
+    const dc = doc.querySelector("x-dc");
+    const hostEl = doc.createElement("div");
+    hostEl.id = "dc-root";
+    dc.replaceWith(hostEl);
+    if (!parsed.preview) {
+      const s = doc.createElement("style");
+      s.textContent = FULL_PAGE_CSS;
+      doc.head.appendChild(s);
+    }
+    const Root = runtime.getDC(rootName);
+    const entry = runtime.registry.get(rootName);
+    function StandaloneRoot() {
+      const [, setTick] = React.useState(0);
+      React.useEffect(() => {
+        const sub = () => setTick((n) => n + 1);
+        entry.subs.add(sub);
+        return () => {
+          entry.subs.delete(sub);
+        };
+      }, []);
+      const defaults = React.useMemo(() => {
+        const d = {};
+        for (const k in entry.propsMeta || {}) {
+          const v = entry.propsMeta?.[k]?.default;
+          if (v !== void 0) d[k] = v;
+        }
+        return d;
+      }, [entry.propsMeta]);
+      return h(Root, { ...defaults, ...entry.propOverrides || {} });
+    }
+    const ReactDOM = getReactDOM();
+    if (ReactDOM.createRoot)
+      ReactDOM.createRoot(hostEl).render(h(StandaloneRoot));
+    else ReactDOM.render(h(StandaloneRoot), hostEl);
+    return rootName;
+  }
+
+  // src/expr.ts
+  var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/;
+  var NUMBER_RE = /^-?\d+(\.\d+)?$/;
+  function resolve(vals, src) {
+    const expr = String(src).trim();
+    if (!expr) return void 0;
+    if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) {
+      return resolve(vals, expr.slice(1, -1));
+    }
+    const eq = findTopLevelEquality(expr);
+    if (eq) {
+      const lv = resolve(vals, expr.slice(0, eq.index));
+      const rv = resolve(vals, expr.slice(eq.index + eq.op.length));
+      switch (eq.op) {
+        case "===":
+          return lv === rv;
+        case "!==":
+          return lv !== rv;
+        case "==":
+          return lv == rv;
+        default:
+          return lv != rv;
+      }
+    }
+    if (expr[0] === "!") return !resolve(vals, expr.slice(1));
+    if (expr === "true") return true;
+    if (expr === "false") return false;
+    if (expr === "null") return null;
+    if (expr === "undefined") return void 0;
+    if (NUMBER_RE.test(expr)) return Number(expr);
+    if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) {
+      return expr.slice(1, -1);
+    }
+    return resolvePath(vals, expr);
+  }
+  function parensWrapWhole(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length - 1; i++) {
+      if (expr[i] === "(") depth++;
+      else if (expr[i] === ")") {
+        depth--;
+        if (depth === 0) return false;
+      }
+    }
+    return true;
+  }
+  function findTopLevelEquality(expr) {
+    let depth = 0;
+    for (let i = 0; i < expr.length; i++) {
+      const c = expr[i];
+      if (c === "[" || c === "(") depth++;
+      else if (c === "]" || c === ")") depth--;
+      else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") {
+        if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue;
+        if (!expr.slice(0, i).trim()) continue;
+        const op = expr[i + 2] === "=" ? c + "==" : c + "=";
+        return { index: i, op };
+      }
+    }
+    return null;
+  }
+  function resolvePath(vals, expr) {
+    const head = expr.match(IDENT_RE);
+    if (!head) return void 0;
+    let cur = vals == null ? void 0 : vals[head[0]];
+    let i = head[0].length;
+    while (i < expr.length) {
+      if (expr[i] === ".") {
+        const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/);
+        if (!m) return void 0;
+        cur = cur == null ? void 0 : cur[m[0]];
+        i += 1 + m[0].length;
+      } else if (expr[i] === "[") {
+        let depth = 1;
+        let j = i + 1;
+        while (j < expr.length && depth > 0) {
+          if (expr[j] === "[") depth++;
+          else if (expr[j] === "]") {
+            depth--;
+            if (depth === 0) break;
+          }
+          j++;
+        }
+        if (depth !== 0) return void 0;
+        const key = resolve(vals, expr.slice(i + 1, j));
+        cur = cur == null ? void 0 : cur[key];
+        i = j + 1;
+      } else {
+        return void 0;
+      }
+    }
+    return cur;
+  }
+
+  // src/encode.ts
+  var CAMEL_ATTR = "sc-camel-";
+  var INLINE_TEXT_TAGS = new Set(
+    "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split(
+      " "
+    )
+  );
+  var RAW_WRAP = {
+    select: "sc-raw-select",
+    table: "sc-raw-table",
+    tbody: "sc-raw-tbody",
+    thead: "sc-raw-thead",
+    tfoot: "sc-raw-tfoot",
+    tr: "sc-raw-tr",
+    td: "sc-raw-td",
+    th: "sc-raw-th",
+    caption: "sc-raw-caption"
+  };
+  var RAW_UNWRAP = Object.fromEntries(
+    Object.entries(RAW_WRAP).map(([k, v]) => [v, k])
+  );
+  var EVENT_MAP = {
+    onclick: "onClick",
+    onchange: "onChange",
+    oninput: "onInput",
+    onsubmit: "onSubmit",
+    onkeydown: "onKeyDown",
+    onkeyup: "onKeyUp",
+    onkeypress: "onKeyPress",
+    onmousedown: "onMouseDown",
+    onmouseup: "onMouseUp",
+    onmouseenter: "onMouseEnter",
+    onmouseleave: "onMouseLeave",
+    onfocus: "onFocus",
+    onblur: "onBlur",
+    ondoubleclick: "onDoubleClick",
+    oncontextmenu: "onContextMenu",
+    onmousemove: "onMouseMove",
+    onmouseover: "onMouseOver",
+    onmouseout: "onMouseOut",
+    onpointerdown: "onPointerDown",
+    onpointerup: "onPointerUp",
+    onpointermove: "onPointerMove",
+    onpointerenter: "onPointerEnter",
+    onpointerleave: "onPointerLeave",
+    onpointercancel: "onPointerCancel",
+    onpointerover: "onPointerOver",
+    onpointerout: "onPointerOut",
+    ongotpointercapture: "onGotPointerCapture",
+    onlostpointercapture: "onLostPointerCapture",
+    ontouchstart: "onTouchStart",
+    ontouchend: "onTouchEnd",
+    ontouchmove: "onTouchMove",
+    ontouchcancel: "onTouchCancel",
+    ondragstart: "onDragStart",
+    ondragend: "onDragEnd",
+    ondragenter: "onDragEnter",
+    ondragleave: "onDragLeave",
+    ondragover: "onDragOver",
+    onanimationstart: "onAnimationStart",
+    onanimationend: "onAnimationEnd",
+    onanimationiteration: "onAnimationIteration",
+    ontransitionend: "onTransitionEnd"
+  };
+  var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`;
+  var IMPORT_SELF_CLOSE_RE = new RegExp(
+    "<(x-import|dc-import)(" + ATTRS + ")/>",
+    "gi"
+  );
+  var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g;
+  function encodeCamelAttrs(html) {
+    return html.replace(
+      CAMEL_ATTR_RE,
+      (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq
+    );
+  }
+  function encodeCase(html) {
+    html = html.replace(
+      IMPORT_SELF_CLOSE_RE,
+      (_, t, a) => "<" + t + a + "></" + t + ">"
+    );
+    html = html.replace(/<helmet(\s|>)/gi, "<sc-helmet$1");
+    html = html.replace(/<\/helmet\s*>/gi, "</sc-helmet>");
+    html = encodeCamelAttrs(html);
+    for (const [real, alias] of Object.entries(RAW_WRAP)) {
+      html = html.replace(
+        new RegExp("(</?)" + real + "(?=[\\s>])", "gi"),
+        "$1" + alias
+      );
+    }
+    return html;
+  }
+  function kebabToCamel(s) {
+    return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+  }
+  function cssToObj(css) {
+    const o = {};
+    for (const decl of css.split(";")) {
+      const i = decl.indexOf(":");
+      if (i < 0) continue;
+      const prop = decl.slice(0, i).trim();
+      o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim();
+    }
+    return o;
+  }
+  function compileAttr(raw) {
+    const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/);
+    if (whole) {
+      const path = whole[1];
+      return (vals) => resolve(vals, path);
+    }
+    if (raw.includes("{{")) {
+      const parts = raw.split(/\{\{([\s\S]+?)\}\}/g);
+      return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join("");
+    }
+    return () => raw;
+  }
+
+  // src/compile.ts
+  function collectProps(node, kind, host) {
+    const propGetters = [];
+    const pseudoClasses = [];
+    let hintSize = null;
+    for (const { name, value } of [...node.attributes]) {
+      if (name === "sc-name" || name === "data-dc-tpl") continue;
+      let key = name;
+      if (key.startsWith(CAMEL_ATTR))
+        key = kebabToCamel(key.slice(CAMEL_ATTR.length));
+      if (key === "hint-size") {
+        hintSize = value;
+        continue;
+      }
+      if (key.startsWith("style-")) {
+        pseudoClasses.push(host.pseudoClass(key.slice(6), value));
+        continue;
+      }
+      if (kind !== "dom") {
+        if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-"))))
+          key = kebabToCamel(key);
+      } else {
+        if (key === "class") key = "className";
+        else if (key === "for") key = "htmlFor";
+        else if (key.startsWith("on"))
+          key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3);
+      }
+      propGetters.push([key, compileAttr(value)]);
+    }
+    return { propGetters, pseudoClasses, hintSize };
+  }
+  var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([
+    "position",
+    "left",
+    "right",
+    "top",
+    "bottom",
+    "inset",
+    "width",
+    "height",
+    "z-index",
+    "transform"
+  ]);
+  function hostPositionStyle(style) {
+    const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null;
+    if (!all) return void 0;
+    const out = {};
+    for (const [k, v] of Object.entries(all)) {
+      const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
+      if (HOST_STYLE_PROPS.has(kebab)) out[k] = v;
+    }
+    return Object.keys(out).length ? out : void 0;
+  }
+  function compileTemplate(html, host) {
+    const tpl = document.createElement("template");
+    //! nosemgrep: direct-inner-html-assignment
+    tpl.innerHTML = encodeCase(html);
+    let tplN = 0;
+    (function stamp(node) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        node.setAttribute("data-dc-tpl", String(tplN++));
+      }
+      for (const c of node.childNodes) stamp(c);
+    })(tpl.content);
+    const builders = walkChildren(tpl.content, host);
+    const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i)));
+    render.__annotated = tpl.innerHTML;
+    return render;
+  }
+  function walkChildren(node, host) {
+    return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null);
+  }
+  function walk(node, host) {
+    if (node.nodeType === Node.TEXT_NODE) return walkText(node);
+    if (node.nodeType !== Node.ELEMENT_NODE) return null;
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "sc-for") return walkFor(el, host);
+    if (tag === "sc-if") return walkIf(el, host);
+    if (tag === "x-import") return walkXImport(el, host);
+    if (tag === "sc-helmet") return host.helmet(el);
+    if (tag === "dc-import") return walkComponent(el, host);
+    return walkElement(el, host);
+  }
+  var warnedHoles = /* @__PURE__ */ new Set();
+  function warnUnresolved(ctx, what) {
+    const key = (ctx?.__name || "?") + "\0" + what;
+    if (warnedHoles.has(key)) return;
+    warnedHoles.add(key);
+    console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what);
+  }
+  function walkText(node) {
+    const txt = node.nodeValue ?? "";
+    if (!txt.includes("{{")) {
+      if (!txt.trim() && !txt.includes(" ")) return null;
+      return () => txt;
+    }
+    const parts = txt.split(/\{\{([\s\S]+?)\}\}/g);
+    return (vals, ctx, key) => h(
+      getReact().Fragment,
+      { key },
+      ...parts.map((p, i) => {
+        if (!(i & 1)) return p;
+        const v = resolve(vals, p);
+        if (v === void 0) {
+          if (!ctx?.__streamingNow) {
+            if (document.body?.hasAttribute("data-dc-editor-on")) {
+              return h(
+                "span",
+                { key: i, className: "sc-interp sc-unresolved" },
+                "{{ " + p.trim() + " }}"
+              );
+            }
+            warnUnresolved(
+              ctx,
+              "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty"
+            );
+            return null;
+          }
+          return h(
+            "span",
+            { key: i, className: "sc-interp sc-missing" },
+            p.trim()
+          );
+        }
+        if (getReact().isValidElement(v) || Array.isArray(v)) {
+          return h(getReact().Fragment, { key: i }, v);
+        }
+        if (v === null || typeof v === "boolean") return null;
+        return h("span", { key: i, className: "sc-interp" }, String(v));
+      })
+    );
+  }
+  function walkFor(el, host) {
+    const listGet = compileAttr(el.getAttribute("list") || "");
+    const asName = el.getAttribute("as") || "item";
+    const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10);
+    const kids = walkChildren(el, host);
+    const listSrc = el.getAttribute("list") || "";
+    return (vals, ctx, key) => {
+      let list = listGet(vals);
+      if (!Array.isArray(list)) {
+        if (!ctx?.__streamingNow) {
+          if (list !== void 0 && list !== null) {
+            warnUnresolved(
+              ctx,
+              'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")"
+            );
+          }
+          list = [];
+        } else {
+          list = hintN > 0 ? Array(hintN).fill(void 0) : [];
+        }
+      }
+      return h(
+        getReact().Fragment,
+        { key },
+        list.map((item, i) => {
+          const sub = { ...vals, [asName]: item, $index: i };
+          return h(
+            getReact().Fragment,
+            { key: i },
+            kids.map((b, j) => b(sub, ctx, j))
+          );
+        })
+      );
+    };
+  }
+  function walkIf(el, host) {
+    const valGet = compileAttr(el.getAttribute("value") || "");
+    const hintRaw = el.getAttribute("hint-placeholder-val");
+    const hintGet = hintRaw != null ? compileAttr(hintRaw) : null;
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      let v = valGet(vals);
+      if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals);
+      return v ? h(
+        getReact().Fragment,
+        { key },
+        kids.map((b, j) => b(vals, ctx, j))
+      ) : null;
+    };
+  }
+  function walkComponent(el, host) {
+    const name = el.getAttribute("name") || el.getAttribute("component") || "";
+    el.removeAttribute("name");
+    el.removeAttribute("component");
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const { propGetters, hintSize } = collectProps(el, "dc-import", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key,
+        __hintSize: hintSize,
+        __tplId: tplId,
+        __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0
+      };
+      for (const [k, g] of propGetters) {
+        const v = g(vals);
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return h(host.component(name), props);
+    };
+  }
+  function walkXImport(el, host) {
+    const globalNameGet = compileAttr(
+      el.getAttribute("component-from-global-scope") || ""
+    );
+    const exportNameGet = compileAttr(
+      el.getAttribute("component") || el.getAttribute("name") || ""
+    );
+    const fromRaw = el.getAttribute("from") || (el.getAttribute("component-from-global-scope") ? "" : el.getAttribute("src") || el.getAttribute("import") || "");
+    const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : [];
+    const url = urls.length ? urls[urls.length - 1] : "";
+    const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js";
+    const tplId = el.getAttribute("data-dc-tpl");
+    const styleRaw = el.getAttribute("style");
+    el.removeAttribute("style");
+    const styleGet = styleRaw != null ? compileAttr(styleRaw) : null;
+    const wrap = tplId != null || styleGet != null;
+    const { propGetters, hintSize } = collectProps(el, "x-import", host);
+    const hasContent = el.children.length > 0 || !!(el.textContent || "").trim();
+    const kids = hasContent ? walkChildren(el, host) : [];
+    const urlBindable = fromRaw.includes("{{");
+    if (urls.length && !urlBindable) {
+      let prev;
+      for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev);
+    }
+    const evalName = (g, vals) => {
+      const v = g(vals);
+      const s = v == null ? "" : String(v);
+      return s.includes("{{") ? "" : s;
+    };
+    return (vals, ctx, key) => {
+      const globalName = evalName(globalNameGet, vals);
+      const name = globalName || evalName(exportNameGet, vals);
+      const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name);
+      const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0;
+      const wrapper = wrap ? {
+        key,
+        className: "sc-host-x",
+        "data-dc-tpl": tplId,
+        style: hostStyle || { display: "contents" }
+      } : null;
+      if (!C) {
+        const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name);
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      const props = wrapper ? {} : { key };
+      let unresolvedHole = false;
+      for (const [k, g] of propGetters) {
+        if (k === "component" || k === "componentFromGlobalScope" || k === "from") {
+          continue;
+        }
+        const v = g(vals);
+        if (v === void 0) unresolvedHole = true;
+        if (k === "dcProps") {
+          if (v && typeof v === "object") Object.assign(props, v);
+          continue;
+        }
+        props[k] = v;
+      }
+      if (unresolvedHole && ctx?.__htmlStreamingNow) {
+        const ph = host.placeholder({
+          key: wrapper ? void 0 : key,
+          name,
+          hintSize,
+          error: null
+        });
+        return wrapper ? h("div", wrapper, ph) : ph;
+      }
+      if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j));
+      return wrapper ? h("div", wrapper, h(C, props)) : h(C, props);
+    };
+  }
+  function contentKey(el) {
+    const clone = el.cloneNode(true);
+    for (const d of clone.querySelectorAll("*")) {
+      while (d.attributes.length) d.removeAttribute(d.attributes[0].name);
+    }
+    const s = clone.innerHTML;
+    let h2 = 5381;
+    for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0;
+    return s.length + "." + (h2 >>> 0).toString(36);
+  }
+  var NEVER_CONTENT_KEYED = new Set(
+    "script style textarea option title select canvas iframe video audio".split(
+      " "
+    )
+  );
+  var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")";
+  function walkElement(el, host) {
+    const realTag = RAW_UNWRAP[el.localName] || el.localName;
+    const tplId = el.getAttribute("data-dc-tpl");
+    const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null;
+    const keySuffix = inlineOnly ? "|" + contentKey(el) : "";
+    const { propGetters, pseudoClasses } = collectProps(el, "dom", host);
+    const kids = walkChildren(el, host);
+    return (vals, ctx, key) => {
+      const props = {
+        key: key + keySuffix,
+        "data-dc-tpl": tplId
+      };
+      for (const [k, g] of propGetters) {
+        let v = g(vals);
+        if (k === "style" && typeof v === "string") v = cssToObj(v);
+        if ((k === "value" || k === "checked") && v === void 0) {
+          v = k === "checked" ? false : "";
+        }
+        props[k] = v;
+      }
+      if (pseudoClasses.length) {
+        props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" ");
+      }
+      return h(realTag, props, ...kids.map((b, j) => b(vals, ctx, j)));
+    };
+  }
+
+  // src/logic.ts
+  var StreamableLogic = class {
+    constructor(props) {
+      __publicField(this, "props");
+      __publicField(this, "state", {});
+      /** Back-pointer to the wrapper component, installed after construction. */
+      __publicField(this, "__host");
+      this.props = props || {};
+    }
+    setState(update, cb) {
+      this.__host && this.__host.__setLogicState(update, cb);
+    }
+    forceUpdate() {
+      this.__host && this.__host.forceUpdate();
+    }
+    componentDidMount() {
+    }
+    componentDidUpdate(_prevProps) {
+    }
+    componentWillUnmount() {
+    }
+    /** The flat object the template renders against (merged over props). */
+    renderVals() {
+      return {};
+    }
+  };
+  function evalDcLogic(src) {
+    //! nosemgrep: eval-and-function-constructor
+    const fn = new Function(
+      "DCLogic",
+      "StreamableLogic",
+      "React",
+      src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;'
+    );
+    return fn(StreamableLogic, StreamableLogic, getReact());
+  }
+
+  // src/component.ts
+  function shallowEqual(a, b) {
+    if (!b) return false;
+    const ak = Object.keys(a).filter((k) => k !== "children");
+    const bk = Object.keys(b).filter((k) => k !== "children");
+    if (ak.length !== bk.length) return false;
+    for (const k of ak) if (a[k] !== b[k]) return false;
+    return true;
+  }
+  function Placeholder({
+    name,
+    hintSize,
+    streaming,
+    error
+  }) {
+    const [w, hgt] = (hintSize || "100%,60px").split(",");
+    return h(
+      "div",
+      {
+        className: "sc-placeholder" + (streaming ? " sc-streaming" : ""),
+        style: { width: w.trim(), height: hgt && hgt.trim() },
+        title: name
+      },
+      error ? h(
+        "div",
+        { className: "sc-placeholder-error" },
+        (name ? name + ": " : "") + error
+      ) : null
+    );
+  }
+  function hintToMin(hint) {
+    if (!hint) return void 0;
+    const [w, hgt] = hint.split(",");
+    return { minWidth: w.trim(), minHeight: hgt && hgt.trim() };
+  }
+  function createComponentFactory(registry, ensureFetched) {
+    const React = getReact();
+    const AncestorContext = React.createContext([]);
+    class StreamableComponent extends React.Component {
+      constructor(props) {
+        super(props);
+        __publicField(this, "__name");
+        __publicField(this, "__sub");
+        __publicField(this, "__needsDidMount", false);
+        /** Snapshot of the registry's streaming flags taken at render time —
+         *  builders read it off the RenderCtx (this) to pick placeholder vs
+         *  render-nothing for unresolved values. */
+        __publicField(this, "__streamingNow", false);
+        __publicField(this, "__htmlStreamingNow", false);
+        /** When a construct throws, remember the (class, registry.ver, props)
+         *  triple so render-time reconcile doesn't re-attempt it on every parent
+         *  re-render. A registry bump (new class, template, external module
+         *  resolving via bumpAll) changes `ver` and breaks the memo so an
+         *  env-dependent constructor can self-heal. */
+        __publicField(this, "__failedLogic", null);
+        __publicField(this, "__failedUserProps", null);
+        __publicField(this, "__failedVer", -1);
+        /** Per-instance constructor error — kept here (not on the registry entry)
+         *  so one instance's successful construct can't hide a sibling's failure,
+         *  and a construct can never wipe an eval error `updateJs` recorded on
+         *  `r.logicError`. */
+        __publicField(this, "__ctorError", null);
+        __publicField(this, "logic");
+        this.__name = props.__name;
+        this.state = { __v: 0, __err: null };
+        this.__sub = () => {
+          if (this.state.__err) this.setState({ __err: null });
+          this.forceUpdate();
+        };
+        this.__makeLogic(registry.get(this.__name).Logic, null);
+        ensureFetched(this.__name);
+      }
+      /** Error-boundary hook: a render crash anywhere in this DC's subtree
+       *  (its own template, an x-import'd component, a child DC without its
+       *  own deeper boundary) lands here instead of unmounting the page. */
+      static getDerivedStateFromError(e) {
+        return { __err: e instanceof Error && e.message ? e.message : String(e) };
+      }
+      componentDidCatch(e, info) {
+        console.error(
+          "[dc-runtime] render error in <" + this.__name + ">:",
+          e,
+          info?.componentStack || ""
+        );
+      }
+      /** Instantiate the logic class (or the no-op base) and adopt `prevState`
+       *  over its initial state — used both at mount and on hot-swap. */
+      __makeLogic(Logic, prevState) {
+        const L = Logic || StreamableLogic;
+        try {
+          this.logic = new L(this.__userProps());
+          this.__failedLogic = null;
+          this.__failedUserProps = null;
+          this.__ctorError = null;
+        } catch (e) {
+          console.error(e);
+          this.__failedLogic = Logic;
+          this.__failedUserProps = this.__userProps();
+          this.__failedVer = registry.get(this.__name).ver;
+          this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+          this.logic = new StreamableLogic(
+            this.__userProps()
+          );
+        }
+        this.logic.__host = this;
+        if (prevState)
+          this.logic.state = { ...this.logic.state || {}, ...prevState };
+      }
+      /** The props the author's logic + template see — internal __-prefixed
+       *  wiring stripped. */
+      __userProps() {
+        const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props;
+        return rest;
+      }
+      __setLogicState(update, cb) {
+        const prev = this.logic.state;
+        const patch = typeof update === "function" ? update(prev) : update;
+        this.logic.state = { ...prev, ...patch };
+        this.setState((s) => ({ __v: s.__v + 1 }), cb);
+      }
+      /** Swap the logic instance when the registry's Logic class changed
+       *  (streaming completion, hot reload). State carries over; didMount
+       *  re-fires after the swap commits so refs exist. */
+      __reconcileLogic() {
+        const r = registry.get(this.__name);
+        const Next = r.Logic;
+        const Cur = this.logic.constructor;
+        if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) {
+          return;
+        }
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+        this.__makeLogic(Next, this.logic.state);
+        this.__needsDidMount = true;
+      }
+      componentDidMount() {
+        registry.get(this.__name).subs.add(this.__sub);
+        try {
+          this.logic.componentDidMount();
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      componentDidUpdate(prevProps) {
+        this.logic.props = this.__userProps();
+        if (this.__needsDidMount) {
+          if (this.state.__err || !registry.get(this.__name).tpl) return;
+          this.__needsDidMount = false;
+          try {
+            this.logic.componentDidMount();
+          } catch (e) {
+            console.error(e);
+          }
+        } else {
+          try {
+            this.logic.componentDidUpdate(prevProps);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      componentWillUnmount() {
+        registry.get(this.__name).subs.delete(this.__sub);
+        if (!this.__needsDidMount) {
+          try {
+            this.logic.componentWillUnmount();
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      }
+      render() {
+        const r = registry.get(this.__name);
+        const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : "");
+        const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0;
+        const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0;
+        const hostBase = {
+          className: cls,
+          style: hostStyle,
+          "data-sc-name": this.__name,
+          "data-dc-tpl": this.props.__tplId
+        };
+        const chain = Array.isArray(this.context) ? this.context : [];
+        if (chain.includes(this.__name)) {
+          const cycle = [
+            ...chain.slice(chain.indexOf(this.__name)),
+            this.__name
+          ].join(" \u2192 ");
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: "circular import: " + cycle
+            })
+          );
+        }
+        if (this.state.__err) {
+          return h(
+            "div",
+            { ...hostBase, className: cls + " sc-has-error" },
+            h(
+              "div",
+              { className: "sc-logic-error", "data-omelette-chrome": "" },
+              this.__name + ": " + this.state.__err
+            ),
+            h(Placeholder, {
+              name: this.__name,
+              hintSize: this.props.__hintSize,
+              error: this.state.__err
+            })
+          );
+        }
+        this.__reconcileLogic();
+        if (!r.tpl) {
+          return h(
+            "div",
+            hostBase,
+            h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize })
+          );
+        }
+        const userProps = this.__userProps();
+        this.logic.props = userProps;
+        let vals = userProps;
+        let renderErr = r.logicError || this.__ctorError;
+        try {
+          vals = { ...userProps, ...this.logic.renderVals() || {} };
+        } catch (e) {
+          console.error(e);
+          renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e));
+        }
+        this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming);
+        this.__htmlStreamingNow = !!r.htmlStreaming;
+        return h(
+          "div",
+          { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") },
+          renderErr && h(
+            "div",
+            { className: "sc-logic-error", "data-omelette-chrome": "" },
+            renderErr
+          ),
+          h(
+            AncestorContext.Provider,
+            { value: [...chain, this.__name] },
+            r.tpl(vals, this)
+          )
+        );
+      }
+    }
+    __publicField(StreamableComponent, "contextType", AncestorContext);
+    const named = /* @__PURE__ */ new Map();
+    function getDC(name) {
+      const hit = named.get(name);
+      if (hit) return hit;
+      function Dispatcher(p) {
+        const [, setTick] = React.useState(0);
+        React.useEffect(() => {
+          const sub = () => setTick((n) => n + 1);
+          registry.get(name).subs.add(sub);
+          return () => {
+            registry.get(name).subs.delete(sub);
+          };
+        }, []);
+        ensureFetched(name);
+        return h(StreamableComponent, { ...p, __name: name });
+      }
+      Dispatcher.displayName = name;
+      named.set(name, Dispatcher);
+      return Dispatcher;
+    }
+    return {
+      getDC,
+      StreamableComponent
+    };
+  }
+
+  // src/bundled.ts
+  function bundledBlob(url) {
+    const blobs = window.__resourceBlobs;
+    const b = blobs ? blobs[url.split("#")[0]] : void 0;
+    return b instanceof Blob ? b : null;
+  }
+
+  // src/cdn.ts
+  var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js";
+  var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z";
+  var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js";
+  var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1";
+  var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js";
+  var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y";
+  function cdnScriptFor(url, sri) {
+    const res = window.__resources;
+    const v = res ? res[url] : void 0;
+    return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri };
+  }
+
+  // src/external.ts
+  var isCustomElementName = (n) => !n.includes(".") && n.includes("-");
+  function isRenderableType(g) {
+    if (typeof g === "function") return !isElementClass(g);
+    return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol";
+  }
+  function resolveDottedPath(root, name) {
+    let cur = root;
+    for (const seg of name.split(".")) {
+      if (cur == null) return void 0;
+      cur = cur[seg];
+    }
+    return cur;
+  }
+  var GLOBAL_POLL_INTERVAL_MS = 50;
+  var GLOBAL_POLL_TIMEOUT_MS = 3e4;
+  function createExternalModules(onResolved) {
+    const cache = /* @__PURE__ */ new Map();
+    let babelLoading = null;
+    const reportedMissing = /* @__PURE__ */ new Map();
+    const polling = /* @__PURE__ */ new Set();
+    function ensureBabel() {
+      if (window.Babel) return Promise.resolve();
+      if (babelLoading) return babelLoading;
+      const babel = cdnScriptFor(BABEL_URL, BABEL_SRI);
+      babelLoading = new Promise((res, rej) => {
+        const s = document.createElement("script");
+        s.src = babel.src;
+        if (babel.integrity) {
+          s.integrity = babel.integrity;
+          s.crossOrigin = "anonymous";
+        }
+        s.onload = () => res();
+        s.onerror = rej;
+        document.head.appendChild(s);
+      });
+      return babelLoading;
+    }
+    const pending = /* @__PURE__ */ new Map();
+    function load(kind, url, after) {
+      const existing = pending.get(url);
+      if (existing) return existing;
+      cache.set(url, null);
+      console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")");
+      const ready = Promise.all([
+        kind === "jsx" ? ensureBabel() : Promise.resolve(),
+        after ?? Promise.resolve()
+      ]);
+      const p = ready.then(() => {
+        const pre = bundledBlob(url);
+        if (pre) return pre.text();
+        return fetch(url).then((r) => {
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.text();
+        });
+      }).then((src) => {
+        const code = kind === "jsx" ? window.Babel.transform(src, {
+          filename: url,
+          presets: ["react", "typescript"]
+        }).code : src;
+        const module = { exports: {} };
+        const before = new Set(Object.keys(window));
+        //! nosemgrep: eval-and-function-constructor
+        new Function("React", "module", "exports", "require", code)(
+          getReact(),
+          module,
+          module.exports,
+          () => ({})
+        );
+        const globals = {};
+        for (const k of Object.keys(window)) {
+          if (!before.has(k) && typeof window[k] === "function") {
+            globals[k] = window[k];
+          }
+        }
+        cache.set(url, { mod: module.exports, globals });
+        console.info(
+          "[dc-runtime] x-import: loaded",
+          url,
+          "\u2014 exports:",
+          Object.keys(module.exports),
+          "window globals:",
+          Object.keys(globals)
+        );
+        onResolved();
+      }).catch((e) => {
+        cache.set(url, {
+          mod: {},
+          globals: {},
+          error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e))
+        });
+        console.error(
+          "[dc-runtime] x-import: FAILED to load",
+          url,
+          "(" + kind + ")",
+          e
+        );
+        onResolved();
+      });
+      pending.set(url, p);
+      return p;
+    }
+    function resolve2(url, name) {
+      const entry = cache.get(url);
+      if (!entry) return null;
+      const { mod, globals } = entry;
+      const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default;
+      if (typeof C === "function") return C;
+      const key = url + "\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(
+          key,
+          entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")"
+        );
+        console.error(
+          "[dc-runtime] x-import: module",
+          url,
+          "loaded but has no component named",
+          JSON.stringify(name),
+          "\u2014 available exports:",
+          Object.keys(mod),
+          "window globals:",
+          Object.keys(globals),
+          ". The module must `module.exports = {" + name + "}` or set `window." + name + "`."
+        );
+      }
+      return null;
+    }
+    function waitForGlobal(name) {
+      if (polling.has(name)) return;
+      polling.add(name);
+      const started = Date.now();
+      const isCE = isCustomElementName(name);
+      const tick = () => {
+        const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name));
+        if (found) {
+          polling.delete(name);
+          onResolved();
+          return;
+        }
+        if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) {
+          console.warn(
+            "[dc-runtime] x-import: global",
+            JSON.stringify(name),
+            "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms"
+          );
+          return;
+        }
+        setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+      };
+      setTimeout(tick, GLOBAL_POLL_INTERVAL_MS);
+    }
+    function resolveGlobal(url, name) {
+      const isCE = isCustomElementName(name);
+      if (!url) {
+        if (isCE) {
+          if (customElements.get(name)) return name;
+          waitForGlobal(name);
+          return null;
+        }
+        const g2 = resolveDottedPath(window, name);
+        if (isRenderableType(g2)) return g2;
+        waitForGlobal(name);
+        return null;
+      }
+      const entry = cache.get(url);
+      if (!entry) return null;
+      if (isCE && customElements.get(name)) return name;
+      const g = entry.globals[name] ?? resolveDottedPath(window, name);
+      if (isRenderableType(g)) return g;
+      if (name.includes(".")) return null;
+      const key = url + "\0global\0" + name;
+      if (!reportedMissing.has(key)) {
+        reportedMissing.set(key, null);
+        if (isCE && !customElements.get(name)) {
+          console.warn(
+            "[dc-runtime] x-import:",
+            url,
+            "loaded but no custom element",
+            JSON.stringify(name),
+            "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element."
+          );
+        }
+      }
+      return name;
+    }
+    function getError(url, name) {
+      const entry = cache.get(url);
+      if (entry?.error) return entry.error;
+      return reportedMissing.get(url + "\0" + name) || null;
+    }
+    return { load, resolve: resolve2, resolveGlobal, getError };
+  }
+  function isElementClass(g) {
+    try {
+      return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement;
+    } catch {
+      return false;
+    }
+  }
+
+  // src/atomics.ts
+  var ATOMIC_CSS = (
+    // layout
+    ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}"
+  );
+
+  // src/helmet.ts
+  var DESIGN_DOC_MODE_RE = /<meta\b[^>]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i;
+  var CANVAS_BG_LIGHT = "#f0eee6";
+  var CANVAS_BG_DARK = "#2e2c26";
+  function createHelmetManager(doc, isStreaming) {
+    const mounted = /* @__PURE__ */ new Set();
+    const live = /* @__PURE__ */ new Map();
+    let designDocMode = null;
+    let canvasStyleEl = null;
+    let appTheme = "light";
+    try {
+      const ds = doc.documentElement.dataset.theme;
+      appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get(
+        "theme"
+      ) === "dark" ? "dark" : "light";
+    } catch {
+    }
+    function applyCanvasBg() {
+      if (!canvasStyleEl) return;
+      const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT;
+      canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`;
+    }
+    function postDesignMode(mode) {
+      if (window.parent === window) return;
+      try {
+        window.parent.postMessage({ type: "__dc_design_mode", mode }, "*");
+      } catch {
+      }
+    }
+    function setDesignDocMode(mode) {
+      if (mode === designDocMode) return;
+      designDocMode = mode;
+      postDesignMode(mode);
+      if (mode === "canvas") {
+        doc.documentElement.setAttribute("data-dc-canvas", "");
+        canvasStyleEl = doc.createElement("style");
+        canvasStyleEl.setAttribute("data-dc-canvas", "");
+        applyCanvasBg();
+        doc.head.appendChild(canvasStyleEl);
+      } else {
+        doc.documentElement.removeAttribute("data-dc-canvas");
+        canvasStyleEl?.remove();
+        canvasStyleEl = null;
+      }
+    }
+    window.addEventListener("message", (e) => {
+      const type = e.data && e.data.type;
+      if (type === "__dc_theme") {
+        const t = e.data.theme;
+        if (t === "light" || t === "dark") {
+          appTheme = t;
+          applyCanvasBg();
+        }
+        return;
+      }
+      if (!designDocMode || type !== "__dc_probe") return;
+      postDesignMode(designDocMode);
+    });
+    function compile(node) {
+      const raw = [...node.children];
+      const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null;
+      if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) {
+        mounted.add("__dc-atomics");
+        const el = doc.createElement("style");
+        el.id = "__dc-atomics";
+        el.textContent = ATOMIC_CSS;
+        doc.head.appendChild(el);
+      }
+      return (_vals, ctx) => {
+        const name = ctx && ctx.__name || "";
+        const streaming = !!(name && isStreaming(name));
+        for (let i = 0; i < raw.length; i++) {
+          const child = raw[i];
+          const tag = child.tagName;
+          const mayBePartial = streaming && !helmetClosed && i === raw.length - 1;
+          if (tag === "SCRIPT") {
+            if (mayBePartial) continue;
+            const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || "");
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            const el = doc.createElement("script");
+            for (const { name: an, value } of [...child.attributes])
+              el.setAttribute(an, value);
+            if (child.textContent) el.textContent = child.textContent;
+            doc.head.appendChild(el);
+          } else if (tag === "LINK" || tag === "META") {
+            if (mayBePartial) continue;
+            const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML);
+            if (mounted.has(key)) continue;
+            mounted.add(key);
+            if (tag === "LINK") {
+              const rel = (child.getAttribute("rel") || "").toLowerCase().split(/\s+/);
+              const href = (child.getAttribute("href") || "").trim();
+              const res = window.__resources;
+              const pre = res && rel.includes("stylesheet") && !rel.includes("alternate") ? res[href] : void 0;
+              const blob = typeof pre === "string" && pre ? bundledBlob(pre) : null;
+              if (blob) {
+                const el = doc.createElement("style");
+                if (child.hasAttribute("disabled")) {
+                  el.setAttribute("media", "not all");
+                } else if (child.getAttribute("media")) {
+                  el.setAttribute("media", child.getAttribute("media"));
+                }
+                if (child.getAttribute("title"))
+                  el.setAttribute("title", child.getAttribute("title"));
+                void blob.text().then((css) => {
+                  el.textContent = css;
+                });
+                doc.head.appendChild(el);
+                continue;
+              }
+            }
+            doc.head.appendChild(child.cloneNode(true));
+          } else {
+            const key = name + "|" + i;
+            let el = live.get(key);
+            if (!el || el.tagName !== tag) {
+              if (el) el.remove();
+              el = doc.createElement(tag.toLowerCase());
+              live.set(key, el);
+              doc.head.appendChild(el);
+            }
+            for (const { name: an, value } of [...child.attributes]) {
+              if (el.getAttribute(an) !== value) el.setAttribute(an, value);
+            }
+            if (el.textContent !== child.textContent)
+              el.textContent = child.textContent;
+          }
+        }
+        return null;
+      };
+    }
+    return { compile, setDesignDocMode };
+  }
+
+  // src/pseudo.ts
+  function scanUnquotedUrl(css, i) {
+    if (css[i] !== "u" && css[i] !== "U" || css.slice(i, i + 4).toLowerCase() !== "url(" || /[a-z0-9_-]/i.test(css[i - 1] ?? "")) {
+      return -1;
+    }
+    let j = i + 4;
+    while (j < css.length && /\s/.test(css[j])) j++;
+    if (css[j] === '"' || css[j] === "'") return -1;
+    while (j < css.length && css[j] !== ")") {
+      if (css[j] === "\\") j++;
+      j++;
+    }
+    return j < css.length ? j + 1 : css.length;
+  }
+  function stripComments(css) {
+    let out = "";
+    let quote = "";
+    for (let i = 0; i < css.length; i++) {
+      const c = css[i];
+      if (quote) {
+        if (c === "\\") {
+          out += c + (css[i + 1] ?? "");
+          i++;
+          continue;
+        }
+        if (c === quote) quote = "";
+        out += c;
+      } else if (c === "'" || c === '"') {
+        quote = c;
+        out += c;
+      } else if (c === "/" && css[i + 1] === "*") {
+        const end = css.indexOf("*/", i + 2);
+        i = end === -1 ? css.length : end + 1;
+        out += " ";
+      } else {
+        const end = scanUnquotedUrl(css, i);
+        if (end === -1) out += c;
+        else {
+          out += css.slice(i, end);
+          i = end - 1;
+        }
+      }
+    }
+    return out;
+  }
+  function importantify(css) {
+    css = stripComments(css);
+    const decls = [];
+    let start = 0;
+    let depth = 0;
+    let quote = "";
+    for (let i = 0; i < css.length; i++) {
+      const c = css[i];
+      if (quote) {
+        if (c === "\\") i++;
+        else if (c === quote) quote = "";
+      } else if (c === "'" || c === '"') quote = c;
+      else if (c === "(") depth++;
+      else if (c === ")") depth = Math.max(0, depth - 1);
+      else if (c === ";" && depth === 0) {
+        decls.push(css.slice(start, i));
+        start = i + 1;
+      } else {
+        const end = scanUnquotedUrl(css, i);
+        if (end !== -1) i = end - 1;
+      }
+    }
+    decls.push(css.slice(start));
+    return decls.map((d) => d.trim()).filter(Boolean).map((d) => /!\s*important$/i.test(d) ? d : d + " !important").join(";");
+  }
+  function createPseudoSheet(doc) {
+    let el = null;
+    const cache = /* @__PURE__ */ new Map();
+    let n = 0;
+    return (pseudo, css) => {
+      const k = pseudo + "|" + css;
+      const hit = cache.get(k);
+      if (hit) return hit;
+      if (!el) {
+        el = doc.createElement("style");
+        doc.head.appendChild(el);
+      }
+      const cls = "scp" + (n++).toString(36);
+      const isPseudoElement = pseudo === "before" || pseudo === "after";
+      const sel = isPseudoElement ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo;
+      el.sheet.insertRule(
+        sel + "{" + (isPseudoElement ? css : importantify(css)) + "}",
+        el.sheet.cssRules.length
+      );
+      cache.set(k, cls);
+      return cls;
+    };
+  }
+
+  // src/registry.ts
+  function createRegistry() {
+    const entries = /* @__PURE__ */ Object.create(null);
+    function get(name) {
+      return entries[name] || (entries[name] = {
+        html: "",
+        tpl: null,
+        Logic: null,
+        jsStreaming: false,
+        htmlStreaming: false,
+        ver: 0,
+        subs: /* @__PURE__ */ new Set(),
+        fetched: false
+      });
+    }
+    function bump(name) {
+      const r = get(name);
+      r.ver++;
+      for (const fn of r.subs) fn();
+    }
+    return {
+      entries,
+      get,
+      bump,
+      bumpAll() {
+        for (const n in entries) bump(n);
+      }
+    };
+  }
+
+  // src/runtime.ts
+  var COMPONENT_DIR = ".";
+  function createRuntime(doc = document) {
+    const registry = createRegistry();
+    const pseudoClass = createPseudoSheet(doc);
+    const helmet = createHelmetManager(
+      doc,
+      (name) => registry.get(name).htmlStreaming
+    );
+    const external = createExternalModules(() => registry.bumpAll());
+    const factory = createComponentFactory(registry, ensureFetched);
+    const host = {
+      component: (name) => factory.getDC(name),
+      placeholder: (props) => h(Placeholder, props),
+      helmet: (node) => helmet.compile(node),
+      loadExternal: (kind, url, after) => external.load(kind, url, after),
+      resolveExternal: (url, name) => external.resolve(url, name),
+      resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name),
+      resolveExternalError: (url, name) => external.getError(url, name),
+      pseudoClass
+    };
+    function ensureFetched(name) {
+      const r = registry.get(name);
+      if (r.fetched) return;
+      r.fetched = true;
+      const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html";
+      const res = window.__resources;
+      const pre = res ? res[url] : void 0;
+      const target = typeof pre === "string" && pre ? pre : url;
+      const blob = bundledBlob(target);
+      (blob ? blob.text() : fetch(target).then((res2) => {
+        if (!res2.ok) {
+          console.error(
+            '[dc-runtime] sibling fetch for "' + name + '" failed:',
+            url,
+            "returned",
+            res2.status,
+            "\u2014 the reference renders as an empty placeholder."
+          );
+          return "";
+        }
+        return res2.text();
+      })).then((t) => {
+        if (!t) return;
+        const parsed = parseDcText(t);
+        if (!parsed) {
+          console.error(
+            '[dc-runtime] sibling fetch for "' + name + '":',
+            url,
+            "has no <x-dc> block \u2014 not a Design Component."
+          );
+          return;
+        }
+        if (parsed.props) r.propsMeta = parsed.props;
+        if (parsed.preview) r.preview = parsed.preview;
+        if (parsed.template && !r.html) updateHtml(name, parsed.template);
+        if (parsed.js && !r.Logic) updateJs(name, parsed.js);
+      }).catch(
+        (e) => console.error(
+          '[dc-runtime] sibling fetch for "' + name + '" threw:',
+          url,
+          e
+        )
+      );
+    }
+    let rootName = null;
+    function updateHtml(name, html) {
+      const r = registry.get(name);
+      r.html = html;
+      if (name === rootName) {
+        const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null;
+        if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode);
+      }
+      try {
+        r.tpl = compileTemplate(html, host);
+      } catch (e) {
+        console.error("[dc-runtime] template compile FAILED for", name, e);
+      }
+      registry.bump(name);
+    }
+    function updateJs(name, src) {
+      const r = registry.get(name);
+      const seq = r.jsSeq = (r.jsSeq || 0) + 1;
+      try {
+        const Cls = evalDcLogic(src);
+        if (r.jsSeq !== seq) return;
+        if (typeof Cls !== "function") {
+          r.logicError = name + ".dc.html: <script data-dc-script> must define `class Component extends DCLogic`";
+        } else {
+          r.logicError = null;
+          r.Logic = Cls;
+        }
+      } catch (e) {
+        if (r.jsSeq !== seq) return;
+        console.error(
+          "[dc-runtime] logic class eval FAILED for",
+          name,
+          "\u2014 the template renders with props only.",
+          e
+        );
+        r.logicError = name + ": " + (e instanceof Error && e.message ? e.message : String(e));
+      }
+      registry.bump(name);
+    }
+    function setStreaming(name, kind, on) {
+      const r = registry.get(name);
+      if (kind === "html") r.htmlStreaming = !!on;
+      else r.jsStreaming = !!on;
+      let any = false;
+      for (const n in registry.entries) {
+        const e = registry.entries[n];
+        if (e && (e.htmlStreaming || e.jsStreaming)) {
+          any = true;
+          break;
+        }
+      }
+      doc.documentElement.classList.toggle("sc-dc-streaming", any);
+      registry.bump(name);
+    }
+    function dcUpdate(name, kind, content, streaming) {
+      if (streaming) registry.get(name).fetched = true;
+      if (kind === "html") {
+        setStreaming(name, "html", !!streaming);
+        updateHtml(name, content);
+      } else if (kind === "js") {
+        setStreaming(name, "js", !!streaming);
+        if (!streaming) updateJs(name, content);
+      } else if (kind === "props") {
+        const { props, preview } = parseDataProps(content);
+        const r = registry.get(name);
+        r.propsMeta = props ?? void 0;
+        r.preview = preview;
+        registry.bump(name);
+      }
+    }
+    function setProps(name, overrides) {
+      registry.get(name).propOverrides = overrides && typeof overrides === "object" ? { ...overrides } : null;
+      registry.bump(name);
+    }
+    function adoptParsed(name, parsed) {
+      if (!parsed) return;
+      const r = registry.get(name);
+      if (parsed.props) r.propsMeta = parsed.props;
+      if (parsed.preview) r.preview = parsed.preview;
+      if (parsed.template) updateHtml(name, parsed.template);
+      if (parsed.js) updateJs(name, parsed.js);
+    }
+    return {
+      registry,
+      getDC: factory.getDC,
+      updateHtml,
+      updateJs,
+      dcUpdate,
+      setProps,
+      adoptParsed,
+      setRootName: (name) => {
+        rootName = name;
+      },
+      markFetched: (name) => {
+        registry.get(name).fetched = true;
+      },
+      annotatedTemplate: (name) => {
+        const r = registry.get(name);
+        return r.tpl && r.tpl.__annotated || null;
+      },
+      templateSource: (name) => registry.get(name).html || null,
+      StreamableLogic
+    };
+  }
+
+  // src/stream-state.ts
+  function createStreamTracker(staleMs = 6e4, now = Date.now) {
+    const since = /* @__PURE__ */ new Map();
+    const liveOne = (n) => {
+      const t = since.get(n);
+      if (t === void 0) return false;
+      if (now() - t > staleMs) {
+        since.delete(n);
+        return false;
+      }
+      return true;
+    };
+    return {
+      push(name, streaming, viewportKey) {
+        if (viewportKey === "dc-model") return;
+        if (streaming) since.set(name, now());
+        else since.delete(name);
+      },
+      live(name) {
+        if (name !== void 0) return liveOne(name);
+        for (const n of [...since.keys()]) if (liveOne(n)) return true;
+        return false;
+      }
+    };
+  }
+
+  // src/index.ts
+  function hideRawTemplate() {
+    const s = document.createElement("style");
+    s.textContent = "x-dc{display:none!important}";
+    document.head.appendChild(s);
+  }
+  function loadScript(src, integrity) {
+    return new Promise((resolve2, reject) => {
+      //! nosemgrep: create-script-element
+      const s = document.createElement("script");
+      s.src = src;
+      if (integrity) {
+        s.integrity = integrity;
+        s.crossOrigin = "anonymous";
+      }
+      s.async = false;
+      s.onload = () => resolve2();
+      s.onerror = () => reject(new Error(`failed to load ${src}`));
+      document.head.appendChild(s);
+    });
+  }
+  function loadReactUmd() {
+    const w = window;
+    if (w.React && w.ReactDOM) return Promise.resolve();
+    const react = cdnScriptFor(REACT_URL, REACT_SRI);
+    const reactDom = cdnScriptFor(REACT_DOM_URL, REACT_DOM_SRI);
+    return Promise.all([
+      loadScript(react.src, react.integrity),
+      loadScript(reactDom.src, reactDom.integrity)
+    ]).then(() => void 0);
+  }
+  function init() {
+    const runtime = createRuntime(document);
+    let rootName = "Root";
+    const baseCss = document.createElement("style");
+    baseCss.textContent = BASE_CSS;
+    document.head.prepend(baseCss);
+    const notifyHost = () => {
+      if (window.parent === window) return;
+      const r = runtime.registry.entries[rootName];
+      try {
+        window.parent.postMessage(
+          {
+            type: "__dc_booted",
+            rootName,
+            propsMeta: r && r.propsMeta || null,
+            preview: r && r.preview || null
+          },
+          "*"
+        );
+      } catch {
+      }
+    };
+    const streams = createStreamTracker();
+    const api = {
+      __dcUpdate: (name, kind, content, streaming, viewportKey) => {
+        streams.push(name, streaming, viewportKey);
+        runtime.dcUpdate(name, kind, content, streaming);
+        if (name === rootName && !streaming && kind === "props") notifyHost();
+      },
+      __dcStreaming: (name) => streams.live(name),
+      __dcSetProps: (name, overrides) => runtime.setProps(name, overrides),
+      /** Name of the component currently mounted as the page root — DC tools
+       *  push their template-stream here when targeting "the open page". */
+      __dcRootName: () => rootName,
+      /** Editor bridge — the encoded, `data-dc-tpl`-annotated template source.
+       *  The host editor parses this into its own template DOM so it can map a
+       *  rendered node (carrying the same `data-dc-tpl`) back to the source
+       *  node that emitted it. Returns the encoded form (`sc-camel-*` attrs,
+       *  `<sc-raw-*>`/`<sc-helmet>` tags); the editor decodes on serialize. */
+      __dcAnnotatedTemplate: (name) => runtime.annotatedTemplate(name),
+      /** Editor bridge — the *original* (decoded) template source. */
+      __dcTemplateSource: (name) => runtime.templateSource(name),
+      __dcBoot: () => {
+        rootName = boot(runtime, document) ?? rootName;
+        notifyHost();
+      },
+      __dcRegistry: runtime.registry.entries,
+      getDC: (name) => runtime.getDC(name),
+      // `DCLogic` is the documented base class name; `StreamableLogic` is the
+      // implementation alias kept for any project that already references it.
+      DCLogic: runtime.StreamableLogic,
+      StreamableLogic: runtime.StreamableLogic
+    };
+    Object.assign(window, api);
+    window.__dcContentKeyed = true;
+    if (document.readyState !== "loading") api.__dcBoot();
+    else document.addEventListener("DOMContentLoaded", () => api.__dcBoot());
+  }
+  hideRawTemplate();
+  loadReactUmd().then(init).catch((err) => {
+    console.error("[dc] failed to load React or boot:", err);
+    throw err;
+  });
+})();
diff --git a/design/baseline/Каналы обработки/Каналы Baseline.dc.html b/design/baseline/Каналы обработки/Каналы Baseline.dc.html
new file mode 100644
index 0000000..45017b5
--- /dev/null
+++ b/design/baseline/Каналы обработки/Каналы Baseline.dc.html	
@@ -0,0 +1,609 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<meta name="design_doc_mode" content="canvas">
+<link rel="stylesheet" href="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/colors.css">
+<link rel="stylesheet" href="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/typography.css">
+<link rel="stylesheet" href="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/spacing.css">
+<link rel="stylesheet" href="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/tokens/effects.css">
+<link rel="stylesheet" href="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/styles.css">
+<script src="_ds/edevs-hub-design-system-e4c9df12-82c8-42b3-b819-63d92dfb8702/_ds_bundle.js"></script>
+<style>
+  * { box-sizing: border-box; }
+  body { margin: 0; background: #e9ebee; }
+  a { color: var(--primary); text-decoration: none; }
+  a:hover { color: var(--primary-hover); }
+  .ch-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+  .ch-scroll::-webkit-scrollbar-thumb { background: #d0d3d8; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
+</style>
+</helmet>
+
+<div style="font-family: var(--font-sans); color: var(--text-body); padding: 40px 48px 80px; min-width: 1480px; display: flex; flex-direction: column; gap: 40px;">
+
+  <!-- DOC HEADER -->
+  <div style="max-width: 1340px;">
+    <div style="display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--ai-bg); color: var(--ai); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 14px;">
+      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+      DG-02 · DESIGN BASELINE
+    </div>
+    <h1 style="margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">Каналы обработки — канал как объект управления</h1>
+    <p style="margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); max-width: 860px;">Утверждаемый макет раздела <b>Компания → Каналы</b> по SPEC-HUB-0027 / ADR-HUB-0037: список с фильтрами и меню строки, карточка канала одной страницей (без вкладок), секции «Политика» и «Подключения», мастер создания из трёх шагов, служебные состояния. Настройка агента и знания остаются в разделе AI и в этот baseline не входят. Терминология: MAX / TG / Web — это <b>подключения</b>; «канал» — сущность маршрутизации. Все данные — примеры.</p>
+    <div style="display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;">
+      <a href="#A" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">A · Список</a>
+      <a href="#B" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">B · Карточка</a>
+      <a href="#C" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">C · Политика</a>
+      <a href="#D" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">D · Подключения</a>
+      <a href="#E" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">E · Мастер</a>
+      <a href="#S" style="font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--n-6); border-radius: var(--radius-pill); background: #fff;">S · Состояния</a>
+    </div>
+  </div>
+
+  <!-- ============ FRAME A — LIST (FULL SHELL) ============ -->
+  <section id="A" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">A</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Список каналов — основной вид</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">фильтры по отделу · поиск и архивные · плотная таблица · меню строки</span>
+    </div>
+
+    <div style="width: 1340px; height: 880px; background: var(--surface-page); border: 1px solid var(--n-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; display: flex;">
+      <!-- SIDEBAR -->
+      <aside style="width: 248px; flex: none; background: #fff; border-right: 1px solid var(--n-8); display: flex; flex-direction: column;">
+        <div style="height: 56px; flex: none; display: flex; align-items: center; gap: 11px; padding: 0 20px; border-bottom: 1px solid var(--n-9);">
+          <img src="assets/custocrm-mark.svg" alt="CustoCRM" style="width: 30px; height: 30px; border-radius: 8px; flex: none;">
+          <div style="display: flex; flex-direction: column; line-height: 1.15;">
+            <span style="font-size: 14px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.01em;">CustoCRM</span>
+            <span style="font-size: 11px; color: var(--text-tertiary);">Управление компанией</span>
+          </div>
+        </div>
+        <nav style="flex: 1; overflow-y: auto; padding: 12px 12px 8px;">
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.4"/><rect x="14" y="3" width="7" height="5" rx="1.4"/><rect x="14" y="12" width="7" height="9" rx="1.4"/><rect x="3" y="16" width="7" height="5" rx="1.4"/></svg>Обзор</a>
+          <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--n-5); padding: 14px 12px 6px;">КОМПАНИЯ</div>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16"/><path d="M9 8h1.5M13.5 8H15M9 12h1.5M13.5 12H15M9 16h1.5M13.5 16H15"/></svg>Отделы</a>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>Сотрудники</a>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>Продукты</a>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; position: relative; font-size: 13.5px; font-weight: 600; background: var(--primary-bg); color: #0958d9;"><span style="position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary);"></span><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>Каналы</a>
+          <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--n-5); padding: 14px 12px 6px;">ПЛАТФОРМА</div>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="16" height="12" rx="2.5"/><path d="M12 8V4.5"/><circle cx="12" cy="3.5" r="1.2"/><circle cx="9" cy="13.5" r="1"/><circle cx="15" cy="13.5" r="1"/></svg>AI</a>
+          <div style="display: flex; flex-direction: column; padding: 2px 0 2px 30px; gap: 2px;">
+            <a href="#A" style="padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--text-secondary);">AI-агенты</a>
+            <a href="#A" style="padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--text-secondary);">Знания</a>
+            <a href="#A" style="padding: 6px 12px; border-radius: 7px; font-size: 13px; color: var(--text-secondary);">Использование AI</a>
+          </div>
+          <a href="#A" style="display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; margin-bottom: 2px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8V2.5M15 8V2.5M18 8v5.5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/><path d="M12 17.5V22"/></svg>Интеграции</a>
+        </nav>
+        <div style="flex: none; border-top: 1px solid var(--n-9); padding: 10px 12px;">
+          <div style="display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px;">
+            <div style="width: 34px; height: 34px; border-radius: 50%; background: var(--ai-bg); color: var(--ai); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none;">ИП</div>
+            <div style="display: flex; flex-direction: column; line-height: 1.2; flex: 1;">
+              <span style="font-size: 13px; font-weight: 600;">Иван Петров</span>
+              <span style="font-size: 11px; color: var(--text-tertiary);">OWNER</span>
+            </div>
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--text-tertiary)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
+          </div>
+        </div>
+      </aside>
+
+      <!-- MAIN -->
+      <div style="flex: 1; min-width: 0; display: flex; flex-direction: column;">
+        <header style="height: 56px; flex: none; background: #fff; border-bottom: 1px solid var(--n-8); display: flex; align-items: center; justify-content: space-between; padding: 0 24px;">
+          <div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary);">
+            <span style="font-weight: 500; color: var(--text-secondary);">ООО «Эдевс»</span><span style="color: var(--n-6);">/</span>
+            <span style="font-weight: 500; color: var(--text-secondary);">Компания</span><span style="color: var(--n-6);">/</span>
+            <span style="font-weight: 600; color: var(--text-body);">Каналы</span>
+          </div>
+          <div style="display: flex; align-items: center; gap: 14px;">
+            <div style="position: relative; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--n-8); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><b style="position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--error); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 1.5px solid #fff;">3</b></div>
+          </div>
+        </header>
+
+        <main class="ch-scroll" style="flex: 1; overflow-y: auto; padding: 22px 26px 32px;">
+          <!-- Page header -->
+          <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px;">
+            <div>
+              <h1 style="margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">Каналы</h1>
+              <p style="margin: 0; font-size: 13.5px; color: var(--text-secondary);">Точка маршрутизации диалогов: связывает отдел, продукт, подключения и — необязательно — AI-агента</p>
+            </div>
+            <div style="display: flex; gap: 10px; flex: none;">
+              <button style="display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-primary); cursor: pointer;"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Создать канал</button>
+            </div>
+          </div>
+
+          <!-- Filter tabs (UnderlineTabs with count) + tools -->
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--n-8); margin-bottom: 14px;">
+            <div style="display: flex; gap: 4px;">
+              <button style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 4px 0 4px; margin: 0 8px; border: none; background: none; border-bottom: 2px solid var(--primary); font-size: 13.5px; font-weight: 600; color: #0958d9; cursor: pointer;">Все<span style="font-size: 11px; font-weight: 600; color: #0958d9; background: var(--primary-bg); padding: 0 6px; border-radius: var(--radius-pill);">5</span></button>
+              <button style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 4px; margin: 0 8px; border: none; background: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer;">Продажи<span style="font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: var(--n-9); padding: 0 6px; border-radius: var(--radius-pill);">2</span></button>
+              <button style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 4px; margin: 0 8px; border: none; background: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer;">Поддержка<span style="font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: var(--n-9); padding: 0 6px; border-radius: var(--radius-pill);">1</span></button>
+              <button style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 4px; margin: 0 8px; border: none; background: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer;">Без отдела<span style="font-size: 11px; font-weight: 600; color: var(--text-tertiary); background: var(--n-9); padding: 0 6px; border-radius: var(--radius-pill);">1</span></button>
+            </div>
+            <div style="display: flex; align-items: center; gap: 10px; padding-bottom: 6px;">
+              <div style="width: 240px; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px; border: 1px solid var(--border-input); border-radius: var(--radius-lg); background: #fff;">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="var(--text-tertiary)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                <span style="flex: 1; font-size: 13px; color: var(--text-tertiary);">Поиск по имени и коду</span>
+              </div>
+              <label style="display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer;">
+                <span style="width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--n-6); position: relative; flex: none;"><span style="position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+                Показывать архивные
+              </label>
+            </div>
+          </div>
+
+          <!-- Table card -->
+          <div style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: visible;">
+            <table style="width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;">
+              <thead>
+                <tr style="background: var(--n-10); text-align: left;">
+                  <th style="padding: 10px 12px 10px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary); border-top-left-radius: var(--radius-2xl);">КАНАЛ</th>
+                  <th style="padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">ПРОДУКТ</th>
+                  <th style="padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">ПОДКЛЮЧЕНИЯ</th>
+                  <th style="padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">AI-АГЕНТ</th>
+                  <th style="padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary); text-align: right;">ДИАЛОГИ</th>
+                  <th style="padding: 10px 16px 10px 12px; width: 44px; border-top-right-radius: var(--radius-2xl);"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <!-- Row 1 — product sales, agent active, row menu OPEN -->
+                <tr style="border-top: 1px solid var(--n-8); cursor: pointer; position: relative;">
+                  <td style="padding: 12px 12px 12px 16px;"><a href="#B" style="font-weight: 600; color: var(--text-body);">FoxRay — продажи</a><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;"><span style="font-family: var(--font-mono);">foxray-sales</span> · Продажи</div></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--product-foxray-bg); font-size: 11.5px; font-weight: 600; color: var(--product-foxray);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--product-foxray);"></span>FoxRay</span></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; gap: 5px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-telegram-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-telegram);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-telegram);">TG</span></span><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-webchat-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-webchat);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-webchat);">Web</span></span></span></td>
+                  <td style="padding: 12px;"><div style="display: flex; flex-direction: column; align-items: flex-start; gap: 3px;"><a href="#" style="font-weight: 600; color: var(--primary);">FoxRay Sales</a><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span></div></td>
+                  <td style="padding: 12px; text-align: right; color: var(--text-body); font-variant-numeric: tabular-nums;">12</td>
+                  <td style="padding: 12px 16px 12px 12px; position: relative;">
+                    <span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--primary-border); background: var(--primary-bg); color: #0958d9;"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span>
+                    <!-- OPEN ROW MENU -->
+                    <div style="position: absolute; top: 44px; right: 16px; z-index: 5; width: 246px; background: #fff; border: 1px solid var(--n-7); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 6px; text-align: left;">
+                      <a href="#B" style="display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text-body);"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>Открыть</a>
+                      <a href="#D" style="display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text-body);"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8V2.5M15 8V2.5M18 8v5.5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z"/><path d="M12 17.5V22"/></svg>Привязать подключение</a>
+                      <div style="height: 1px; background: var(--n-8); margin: 5px 8px;"></div>
+                      <div style="display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--warning-text); cursor: pointer;"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>Деактивировать</div>
+                      <div style="display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--n-5); cursor: not-allowed;" title="Есть связанные записи">
+                        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="flex:none;margin-top:1px;"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg>
+                        <span style="line-height: 1.3;">Удалить<br><span style="font-size: 11px; color: var(--n-5);">Нельзя: 12 диалогов, агент</span></span>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <!-- Row 2 — support, agent active -->
+                <tr style="border-top: 1px solid var(--n-8); cursor: pointer;">
+                  <td style="padding: 12px 12px 12px 16px;"><a href="#B" style="font-weight: 600; color: var(--text-body);">FoxRay — поддержка</a><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;"><span style="font-family: var(--font-mono);">foxray-support</span> · Поддержка</div></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--product-foxray-bg); font-size: 11.5px; font-weight: 600; color: var(--product-foxray);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--product-foxray);"></span>FoxRay</span></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-webchat-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-webchat);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-webchat);">Web</span></span></td>
+                  <td style="padding: 12px;"><div style="display: flex; flex-direction: column; align-items: flex-start; gap: 3px;"><a href="#" style="font-weight: 600; color: var(--primary);">FoxRay Support</a><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span></div></td>
+                  <td style="padding: 12px; text-align: right; color: var(--text-body); font-variant-numeric: tabular-nums;">7</td>
+                  <td style="padding: 12px 16px 12px 12px; text-align: right;"><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-tertiary);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span></td>
+                </tr>
+                <!-- Row 3 — FirePage sales, MAX -->
+                <tr style="border-top: 1px solid var(--n-8); cursor: pointer;">
+                  <td style="padding: 12px 12px 12px 16px;"><a href="#B" style="font-weight: 600; color: var(--text-body);">FirePage — продажи</a><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;"><span style="font-family: var(--font-mono);">firepage-sales</span> · Продажи</div></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--product-firepage-bg); font-size: 11.5px; font-weight: 600; color: var(--product-firepage);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--product-firepage);"></span>FirePage</span></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-max-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-max);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-max);">MAX</span></span></td>
+                  <td style="padding: 12px;"><div style="display: flex; flex-direction: column; align-items: flex-start; gap: 3px;"><a href="#" style="font-weight: 600; color: var(--primary);">FirePage Sales</a><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span></div></td>
+                  <td style="padding: 12px; text-align: right; color: var(--text-body); font-variant-numeric: tabular-nums;">5</td>
+                  <td style="padding: 12px 16px 12px 12px; text-align: right;"><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-tertiary);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span></td>
+                </tr>
+                <!-- Row 4 — non-product, NO AGENT (operator channel), no department -->
+                <tr style="border-top: 1px solid var(--n-8); cursor: pointer;">
+                  <td style="padding: 12px 12px 12px 16px;"><a href="#B" style="font-weight: 600; color: var(--text-body);">Партнёрская линия</a><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;"><span style="font-family: var(--font-mono);">partners</span> · <span style="display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--n-9); font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); vertical-align: middle;">Без отдела</span></div></td>
+                  <td style="padding: 12px; color: var(--text-tertiary); font-size: 12.5px;">— непродуктовый</td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-telegram-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-telegram);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-telegram);">TG</span></span></td>
+                  <td style="padding: 12px;"><span style="font-size: 12.5px; color: var(--text-tertiary);">Нет агента</span><div style="font-size: 11px; color: var(--n-5); margin-top: 2px;">операторский канал</div></td>
+                  <td style="padding: 12px; text-align: right; color: var(--text-body); font-variant-numeric: tabular-nums;">3</td>
+                  <td style="padding: 12px 16px 12px 12px; text-align: right;"><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-tertiary);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span></td>
+                </tr>
+                <!-- Row 5 — ARCHIVED (visible because toggle on) -->
+                <tr style="border-top: 1px solid var(--n-8); cursor: pointer; background: #fcfcfc;">
+                  <td style="padding: 12px 12px 12px 16px;"><a href="#B" style="font-weight: 600; color: var(--text-tertiary);">FoxRay — вебинары</a><div style="font-size: 12px; color: var(--n-5); margin-top: 2px;"><span style="font-family: var(--font-mono);">foxray-webinars</span> · Продажи</div></td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--n-9); font-size: 11.5px; font-weight: 600; color: var(--n-5);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--n-5);"></span>FoxRay</span></td>
+                  <td style="padding: 12px; color: var(--n-5); font-size: 12.5px;">—</td>
+                  <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-tertiary);"><span style="width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--n-5); background: transparent;"></span>Архивный</span></td>
+                  <td style="padding: 12px; text-align: right; color: var(--text-tertiary); font-variant-numeric: tabular-nums;">0</td>
+                  <td style="padding: 12px 16px 12px 12px; text-align: right;"><span style="display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-tertiary);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="12" cy="19" r="1"/></svg></span></td>
+                </tr>
+              </tbody>
+            </table>
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--n-8); font-size: 12.5px; color: var(--text-tertiary);">
+              <span>5 каналов · 1 архивный</span>
+              <span>Счётчик «Диалоги» — открытые диалоги по <span style="font-family: var(--font-mono);">Conversation.channel</span></span>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ FRAME B — CARD (SINGLE PAGE, NO TABS) ============ -->
+  <section id="B" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">B</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Карточка канала — одна страница</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">без вкладок · секции сверху вниз: Назначение · Политика · Подключения · AI-агент · Счётчики</span>
+    </div>
+
+    <div style="width: 1180px; background: var(--surface-page); border: 1px solid var(--n-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; padding: 22px 24px 28px;">
+      <!-- breadcrumb -->
+      <div style="display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 14px;">
+        <a href="#A" style="color: var(--text-secondary); font-weight: 500;">Каналы</a><span style="color: var(--n-6);">/</span><span style="color: var(--text-body); font-weight: 600;">FoxRay — продажи</span>
+      </div>
+      <!-- HEADER -->
+      <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px;">
+        <div>
+          <h1 style="margin: 0 0 5px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">FoxRay — продажи</h1>
+          <div style="display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-tertiary);"><span style="font-family: var(--font-mono);">foxray-sales</span><span style="color: var(--n-6);">·</span>Продажи<span style="color: var(--n-6);">·</span><span style="display: inline-flex; align-items: center; gap: 5px;"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--product-foxray);"></span>FoxRay</span></div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 10px; flex: none;">
+          <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-border); padding: 5px 11px; border-radius: var(--radius-pill);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span>
+          <button style="display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer;"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Изменить</button>
+          <button style="display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--warning-text); cursor: pointer;"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>Деактивировать</button>
+          <span style="display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; color: var(--error-text); cursor: pointer;" title="Удалить"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg></span>
+        </div>
+      </div>
+
+      <!-- SECTIONS -->
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+
+        <!-- Назначение -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 20px;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;"><h3 style="margin: 0; margin-right: auto; font-size: 15px; font-weight: 600; color: var(--text-heading);">Назначение</h3><span style="font-size: 12px; color: var(--text-tertiary);">Отдел и продукт редактируются здесь</span></div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 13px;">
+            <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--n-9);"><span style="color: var(--text-tertiary);">Отдел</span><span style="color: var(--text-body); font-weight: 500;">Продажи</span></div>
+            <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--n-9);"><span style="color: var(--text-tertiary);">Продукт</span><span style="color: var(--text-body); font-weight: 500;">FoxRay</span></div>
+            <div style="display: flex; justify-content: space-between; padding: 8px 0;"><span style="color: var(--text-tertiary);">Код</span><span style="color: var(--text-body); font-family: var(--font-mono);">foxray-sales</span></div>
+            <div style="display: flex; justify-content: space-between; padding: 8px 0;"><span style="color: var(--text-tertiary);">Создан</span><span style="color: var(--text-body);">02 июл 2026</span></div>
+          </div>
+        </section>
+
+        <!-- Политика -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 8px 20px 12px;">
+          <div style="display: flex; align-items: center; gap: 12px; padding: 12px 0 4px;"><h3 style="margin: 0; margin-right: auto; font-size: 15px; font-weight: 600; color: var(--text-heading);">Политика</h3><span style="font-size: 12px; color: var(--text-tertiary);">Пресет: Продажи</span></div>
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--n-9);">
+            <div><div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Обязательная продуктовая идентичность</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">Диалог требует авторизации как владелец продукта.</div></div>
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--n-8); position: relative;"><span style="position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--n-5);"></span></span>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--n-9);">
+            <div><div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Анонимные сессии</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">Разрешает диалоги без идентификации пользователя.</div></div>
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--n-9);">
+            <div><div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Самозаявленный контакт</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">Позволяет пользователю указать контакт вручную.</div></div>
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--n-9);">
+            <div><div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Attribution продаж</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">Связывает продажу с диалогом канала.</div></div>
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+          </div>
+          <div style="display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--n-9);">
+            <div><div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Коммерческие действия (checkout)</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">Разрешает оформление заказа в диалоге.</div></div>
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+          </div>
+        </section>
+
+        <!-- Подключения -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 20px;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;"><h3 style="margin: 0; margin-right: auto; font-size: 15px; font-weight: 600; color: var(--text-heading);">Подключения</h3><button style="display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-body); cursor: pointer;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Привязать подключение</button></div>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <div style="display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--n-8); border-radius: var(--radius-lg);">
+              <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-telegram-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-telegram);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-telegram);">TG</span></span>
+              <div style="flex: 1; line-height: 1.3;"><div style="font-size: 13px; font-weight: 600; color: var(--text-body);">FoxRay Sales Bot</div><div style="font-size: 11.5px; color: var(--text-tertiary);">Telegram · @foxray_sales_bot</div></div>
+              <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success-text);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--success);"></span>OK</span>
+              <button style="height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--n-6); background: #fff; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer;">Отвязать</button>
+            </div>
+            <div style="display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--n-8); border-radius: var(--radius-lg);">
+              <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-webchat-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-webchat);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-webchat);">Web</span></span>
+              <div style="flex: 1; line-height: 1.3;"><div style="font-size: 13px; font-weight: 600; color: var(--text-body);">Виджет на foxray.ru</div><div style="font-size: 11.5px; color: var(--text-tertiary);">Web Chat · embed foxray-sales</div></div>
+              <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success-text);"><span style="width: 6px; height: 6px; border-radius: 50%; background: var(--success);"></span>OK</span>
+              <button style="height: 28px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--n-6); background: #fff; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer;">Отвязать</button>
+            </div>
+          </div>
+        </section>
+
+        <!-- AI-агент (one line) -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 18px 20px;">
+          <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 12px;">AI-АГЕНТ</div>
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <span style="width: 34px; height: 34px; border-radius: 9px; background: var(--ai-bg); color: var(--ai); display: flex; align-items: center; justify-content: center; flex: none;"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="16" height="12" rx="2.5"/><path d="M12 8V4.5"/><circle cx="12" cy="3.5" r="1.2"/><circle cx="9" cy="13.5" r="1"/><circle cx="15" cy="13.5" r="1"/></svg></span>
+            <div style="display: flex; align-items: center; gap: 10px; flex: 1; font-size: 13.5px; min-width: 0;">
+              <b style="color: var(--text-body);">FoxRay Sales</b>
+              <span style="color: var(--n-6);">·</span>
+              <span style="display: inline-flex; align-items: center; gap: 6px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span>
+              <span style="color: var(--n-6);">·</span>
+              <code style="font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);">claude-sonnet-4.6</code>
+            </div>
+            <a href="#" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary); flex: none;">Открыть агента<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
+          </div>
+        </section>
+
+        <!-- Счётчики -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 20px;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 14px;"><h3 style="margin: 0; margin-right: auto; font-size: 15px; font-weight: 600; color: var(--text-heading);">Счётчики</h3><a href="#A" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary);">Открыть диалоги канала<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a></div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+            <div style="background: var(--n-10); border: 1px solid var(--n-8); border-radius: var(--radius-xl); padding: 16px 18px;"><div style="font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 8px;">ОТКРЫТЫЕ ДИАЛОГИ</div><div style="font-size: 26px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums;">12</div></div>
+            <div style="background: var(--n-10); border: 1px solid var(--n-8); border-radius: var(--radius-xl); padding: 16px 18px;"><div style="font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 8px;">ПОДКЛЮЧЕНИЯ</div><div style="font-size: 26px; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums;">2</div></div>
+          </div>
+        </section>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ FRAME C — SECTION: POLICY (forbidden flag) ============ -->
+  <section id="C" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">C</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Секция «Политика» — запрещённый инвариантом флаг</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">пять флагов с пояснением следствия · флаг, запрещённый инвариантом, объясняет причину</span>
+    </div>
+
+    <div style="width: 1180px; background: var(--surface-page); border: 1px solid var(--n-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; padding: 22px 24px 28px;">
+      <div style="display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 14px;">
+        <a href="#A" style="color: var(--text-secondary); font-weight: 500;">Каналы</a><span style="color: var(--n-6);">/</span><span style="color: var(--text-body); font-weight: 600;">Партнёрская линия</span>
+      </div>
+      <div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px;">
+        <div>
+          <h1 style="margin: 0 0 5px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">Партнёрская линия</h1>
+          <div style="display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-tertiary);"><span style="font-family: var(--font-mono);">partners</span><span style="color: var(--n-6);">·</span><span style="display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--n-9); font-size: 10.5px; font-weight: 600;">Без отдела</span><span style="color: var(--n-6);">·</span>— непродуктовый</div>
+        </div>
+        <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-text); background: var(--success-bg); border: 1px solid var(--success-border); padding: 5px 11px; border-radius: var(--radius-pill);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>Активен</span>
+      </div>
+
+      <div style="display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start;">
+        <!-- flags -->
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 8px 20px 12px;">
+          <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 12px 0 4px;">СЕКЦИЯ «ПОЛИТИКА» · 5 ФЛАГОВ</div>
+          <!-- P3 requires identity — locked off -->
+          <div style="display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--n-9);">
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--n-8); position: relative; margin-top: 1px;"><span style="position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--n-5);"></span></span>
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; gap: 8px;"><span style="font-size: 13.5px; font-weight: 600; color: var(--text-tertiary);">Обязательная продуктовая идентичность</span><span style="display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); padding: 1px 7px; border-radius: var(--radius-pill);"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Недоступно</span></div>
+              <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5;">Требует продукта <b>(инвариант P3)</b>. Пользователь должен быть авторизован как владелец продукта. Назначьте продукт каналу, чтобы включить.</div>
+            </div>
+          </div>
+          <!-- anonymous — on -->
+          <div style="display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--n-9);">
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative; margin-top: 1px;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+            <div style="flex: 1;">
+              <div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Анонимные сессии</div>
+              <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5;">Разрешает диалоги без идентификации пользователя — партнёр может написать без входа.</div>
+            </div>
+          </div>
+          <!-- self-reported — on -->
+          <div style="display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--n-9);">
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--primary); position: relative; margin-top: 1px;"><span style="position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);"></span></span>
+            <div style="flex: 1;">
+              <div style="font-size: 13.5px; font-weight: 600; color: var(--text-body);">Самозаявленный контакт</div>
+              <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5;">Позволяет пользователю указать email или телефон вручную для обратной связи.</div>
+            </div>
+          </div>
+          <!-- P2 attribution — locked off -->
+          <div style="display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--n-9);">
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--n-8); position: relative; margin-top: 1px;"><span style="position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--n-5);"></span></span>
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; gap: 8px;"><span style="font-size: 13.5px; font-weight: 600; color: var(--text-tertiary);">Attribution продаж</span><span style="display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--warning-text); background: var(--warning-bg); border: 1px solid var(--warning-border); padding: 1px 7px; border-radius: var(--radius-pill);"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Недоступно</span></div>
+              <div style="font-size: 12px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.5;">Attribution недоступна непродуктовому каналу <b>(инвариант P2)</b>. Свяжите канал с продуктом, чтобы включить.</div>
+            </div>
+          </div>
+          <!-- P1 checkout — locked off (KEY) -->
+          <div style="display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; background: var(--warning-bg-strong); margin: 0 -20px; padding-left: 20px; padding-right: 20px; border-radius: var(--radius-lg);">
+            <span style="flex: none; width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--n-8); position: relative; margin-top: 1px;"><span style="position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--n-5);"></span></span>
+            <div style="flex: 1;">
+              <div style="display: flex; align-items: center; gap: 8px;"><span style="font-size: 13.5px; font-weight: 600; color: var(--text-tertiary);">Коммерческие действия (checkout)</span><span style="display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--warning-text); background: #fff; border: 1px solid var(--warning-border); padding: 1px 7px; border-radius: var(--radius-pill);"><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Запрещено инвариантом</span></div>
+              <div style="font-size: 12px; color: var(--warning-text); margin-top: 3px; line-height: 1.5;">Коммерческие действия недоступны непродуктовому каналу <b>(инвариант P1)</b>. Флаг не будет сохранён включённым, пока каналу не назначен продукт — причина показана, а не игнорируется молча.</div>
+              <a href="#B" style="display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--primary); margin-top: 8px;">Назначить продукт<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
+            </div>
+          </div>
+        </section>
+        <!-- side note -->
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 18px;">
+            <h4 style="margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-heading);">Контекст политики</h4>
+            <div style="display: flex; flex-direction: column; gap: 10px; font-size: 12.5px;">
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Продукт</span><span style="color: var(--text-tertiary);">— непродуктовый</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Отдел</span><span style="color: var(--text-body);">Без отдела</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Пресет</span><span style="color: var(--text-body);">Свой (CUSTOM)</span></div>
+            </div>
+          </section>
+          <section style="background: var(--primary-bg); border: 1px solid var(--primary-border); border-radius: var(--radius-2xl); padding: 16px 18px;">
+            <div style="font-size: 12.5px; color: #0958d9; line-height: 1.55;">Инварианты проверяются по итоговому состоянию: частичное сохранение запрещено. Чтобы включить коммерческие флаги, сначала назначьте продукт в секции «Назначение».</div>
+          </section>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ FRAME D — SECTION: CONNECTIONS + TRANSFER ============ -->
+  <section id="D" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">D</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Секция «Подключения» — привязка и перенос</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">список подключений канала · привязка · перенос между каналами с явным подтверждением (force)</span>
+    </div>
+
+    <div style="width: 1180px; height: 620px; position: relative; background: var(--surface-page); border: 1px solid var(--n-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; padding: 22px 24px 28px;">
+      <div style="display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 14px;">
+        <a href="#A" style="color: var(--text-secondary); font-weight: 500;">Каналы</a><span style="color: var(--n-6);">/</span><span style="color: var(--text-body); font-weight: 600;">FoxRay — продажи</span>
+      </div>
+      <div style="display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px;">
+        <h1 style="margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">FoxRay — продажи</h1>
+      </div>
+      <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 20px;">
+        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;"><h3 style="margin: 0; margin-right: auto; font-size: 15px; font-weight: 600; color: var(--text-heading);">Подключения</h3><button style="display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-lg); border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-primary); cursor: pointer;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Привязать подключение</button></div>
+        <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
+          <thead>
+            <tr style="text-align: left;">
+              <th style="padding: 8px 12px 8px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">ПОДКЛЮЧЕНИЕ</th>
+              <th style="padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">ПРОВАЙДЕР</th>
+              <th style="padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-tertiary);">СТАТУС</th>
+              <th style="padding: 8px 0 8px 12px; width: 110px; text-align: right;"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr style="border-top: 1px solid var(--n-8);">
+              <td style="padding: 12px 12px 12px 0;"><div style="font-weight: 600; color: var(--text-body);">FoxRay Sales Bot</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">@foxray_sales_bot</div></td>
+              <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-telegram-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-telegram);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-telegram);">TG</span></span></td>
+              <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>OK</span></td>
+              <td style="padding: 12px 0 12px 12px; text-align: right;"><button style="height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--n-6); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;">Отвязать</button></td>
+            </tr>
+            <tr style="border-top: 1px solid var(--n-8);">
+              <td style="padding: 12px 12px 12px 0;"><div style="font-weight: 600; color: var(--text-body);">Виджет на foxray.ru</div><div style="font-size: 12px; color: var(--text-tertiary); margin-top: 2px;">embed foxray-sales</div></td>
+              <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-webchat-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-webchat);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-webchat);">Web</span></span></td>
+              <td style="padding: 12px;"><span style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--success-text);"><span style="width: 7px; height: 7px; border-radius: 50%; background: var(--success);"></span>OK</span></td>
+              <td style="padding: 12px 0 12px 12px; text-align: right;"><button style="height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--n-6); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer;">Отвязать</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- overlay + transfer modal -->
+      <div style="position: absolute; inset: 0; background: rgba(15,20,30,0.28);"></div>
+      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 560px; background: #fff; border-radius: var(--radius-4xl); box-shadow: var(--shadow-lg); overflow: hidden;">
+        <div style="padding: 22px 24px 18px; border-bottom: 1px solid var(--n-8); display: flex; gap: 14px;">
+          <span style="flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--warning-bg); color: var(--warning-text); display: flex; align-items: center; justify-content: center;"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></span>
+          <div>
+            <h3 style="margin: 0 0 5px; font-size: 16px; font-weight: 600; color: var(--text-heading);">Перенести подключение в этот канал?</h3>
+            <p style="margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary);">Подключение <b>«FirePage MAX Bot»</b> уже привязано к каналу <b>«FirePage — продажи»</b>. Подключение принадлежит ровно одному каналу — перенос отвяжет его от прежнего.</p>
+          </div>
+        </div>
+        <div style="padding: 16px 24px;">
+          <div style="display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--n-8); border-radius: var(--radius-lg); background: var(--n-10);">
+            <span style="display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--channel-max-bg);"><span style="width: 5px; height: 5px; border-radius: 50%; background: var(--channel-max);"></span><span style="font-size: 10.5px; font-weight: 600; color: var(--channel-max);">MAX</span></span>
+            <div style="flex: 1; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary);"><span style="color: var(--text-tertiary);">FirePage — продажи</span><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="var(--primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg><b style="color: var(--text-body);">FoxRay — продажи</b></div>
+          </div>
+          <p style="margin: 12px 2px 0; font-size: 12px; color: var(--text-tertiary); line-height: 1.5;">Существующие диалоги остаются в прежнем канале (<span style="font-family: var(--font-mono);">Conversation.connection</span> — PROTECT). Действие пишется в аудит как перенос.</p>
+        </div>
+        <div style="display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--n-8);">
+          <span style="flex: 1;"></span>
+          <button style="height: 36px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer;">Отмена</button>
+          <button style="height: 36px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-primary); cursor: pointer;">Перенести подключение</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ FRAME E — CREATE WIZARD (three steps) ============ -->
+  <section id="E" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">E</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Мастер создания канала — три шага</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">Канал · Назначение · Подключения · финальный экран операторского канала</span>
+    </div>
+
+    <div style="width: 1180px; background: var(--surface-page); border: 1px solid var(--n-6); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; padding: 24px 28px 26px;">
+      <h1 style="margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-heading);">Создание канала</h1>
+      <p style="margin: 0 0 20px; font-size: 13.5px; color: var(--text-secondary);">Три шага. Настройка агента и знаний в мастер не входит — агент создаётся отдельным действием в разделе AI. Канал создаётся по завершении шага 2.</p>
+
+      <!-- stepper: 3 steps, all done -->
+      <div style="display: flex; align-items: center; gap: 0; margin-bottom: 24px; max-width: 720px;">
+        <div style="display: flex; align-items: center; gap: 10px;"><span style="width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex: none;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span style="font-size: 13px; font-weight: 600; color: var(--text-body);">Канал</span></div>
+        <div style="flex: 1; height: 2px; background: var(--success); margin: 0 12px;"></div>
+        <div style="display: flex; align-items: center; gap: 10px;"><span style="width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex: none;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span style="font-size: 13px; font-weight: 600; color: var(--text-body);">Назначение</span></div>
+        <div style="flex: 1; height: 2px; background: var(--success); margin: 0 12px;"></div>
+        <div style="display: flex; align-items: center; gap: 10px;"><span style="width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; flex: none;"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span style="font-size: 13px; font-weight: 600; color: var(--text-body);">Подключения</span></div>
+      </div>
+
+      <!-- final screen -->
+      <div style="display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start;">
+        <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 32px 28px; text-align: center;">
+          <div style="width: 52px; height: 52px; border-radius: 14px; background: var(--success-bg); color: var(--success-text); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></div>
+          <h3 style="margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text-heading);">Канал создан</h3>
+          <p style="margin: 0 auto 20px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; max-width: 440px;"><b style="color: var(--text-body);">Партнёрская линия</b> — операторский канал: AI-агента нет, диалоги ведут операторы. Канал принимает подключения, диалоги, заказы и attribution.</p>
+          <div style="display: flex; gap: 10px; justify-content: center;">
+            <a href="#B" style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-primary);">Открыть карточку канала</a>
+            <a href="#A" style="display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-body);">К списку каналов</a>
+          </div>
+        </section>
+        <div style="display: flex; flex-direction: column; gap: 16px;">
+          <section style="background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 18px;">
+            <h4 style="margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-heading);">Сводка канала</h4>
+            <div style="display: flex; flex-direction: column; gap: 10px; font-size: 12.5px;">
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Название</span><span style="color: var(--text-body); font-weight: 500;">Партнёрская линия</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Код</span><span style="color: var(--text-body); font-family: var(--font-mono);">partners</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Отдел</span><span style="color: var(--text-body);">Без отдела</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Продукт</span><span style="color: var(--text-tertiary);">— непродуктовый</span></div>
+              <div style="display: flex; justify-content: space-between;"><span style="color: var(--text-tertiary);">Подключения</span><span style="color: var(--text-body);">TG · 1</span></div>
+            </div>
+          </section>
+          <section style="background: var(--ai-bg); border: 1px solid #e4d4fb; border-radius: var(--radius-2xl); padding: 16px 18px;">
+            <div style="font-size: 12.5px; color: var(--ai); line-height: 1.55; margin-bottom: 12px;"><b>Нужен AI-агент?</b> Создайте его отдельным действием в разделе AI — он подключится к этому каналу.</div>
+            <a href="#A" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ai);">Перейти в раздел AI<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
+          </section>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ FRAME S — STATES ============ -->
+  <section id="S" style="display: flex; flex-direction: column; gap: 12px;">
+    <div style="display: flex; align-items: baseline; gap: 12px;">
+      <span style="font-size: 12px; font-weight: 700; color: #fff; background: var(--text-heading); padding: 3px 9px; border-radius: 6px;">S</span>
+      <h2 style="margin: 0; font-size: 17px; font-weight: 600; color: var(--text-heading);">Служебные состояния</h2>
+      <span style="font-size: 12.5px; color: var(--text-tertiary);">пустой список · канал без агента · архивный канал · ограниченный доступ · конфликт удаления</span>
+    </div>
+    <div style="display: flex; gap: 18px; flex-wrap: wrap;">
+      <!-- empty list -->
+      <div style="width: 372px; background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 40px 24px; text-align: center;">
+        <div style="width: 46px; height: 46px; border-radius: 12px; background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;"><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg></div>
+        <div style="font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 5px;">Создайте первый канал</div>
+        <p style="margin: 0 0 16px; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5;">Канал маршрутизирует диалоги от подключений к отделу, продукту и — при необходимости — к AI-агенту.</p>
+        <button style="height: 34px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-primary); cursor: pointer;">Создать канал</button>
+      </div>
+      <!-- channel without agent -->
+      <div style="width: 372px; background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 24px;">
+        <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 14px;">СЕКЦИЯ «AI-АГЕНТ» · КАНАЛ БЕЗ АГЕНТА</div>
+        <div style="text-align: center; padding: 20px 8px;">
+          <div style="width: 44px; height: 44px; border-radius: 11px; background: var(--ai-bg); color: var(--ai); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="8" width="16" height="12" rx="2.5"/><path d="M12 8V4.5"/><circle cx="12" cy="3.5" r="1.2"/><circle cx="9" cy="13.5" r="1"/><circle cx="15" cy="13.5" r="1"/></svg></div>
+          <div style="font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 5px;">Агента нет, канал ведут операторы</div>
+          <p style="margin: 0 0 16px; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5;">Валидное состояние канала. Агент создаётся отдельным действием в разделе AI.</p>
+          <a href="#A" style="display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--primary);">Создать агента в разделе AI<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
+        </div>
+      </div>
+      <!-- archived channel -->
+      <div style="width: 372px; background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 24px;">
+        <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 12px;">АРХИВНЫЙ КАНАЛ</div>
+        <div style="display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--n-8); border-radius: var(--radius-lg); background: #fcfcfc;">
+          <div style="flex: 1; line-height: 1.35;"><div style="font-size: 13.5px; font-weight: 600; color: var(--text-tertiary);">FoxRay — вебинары</div><div style="font-size: 11.5px; color: var(--n-5); font-family: var(--font-mono);">foxray-webinars</div></div>
+          <span style="display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); background: var(--n-9); padding: 3px 9px; border-radius: var(--radius-pill);"><span style="width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--n-5);"></span>Архивный</span>
+        </div>
+        <p style="margin: 12px 0 14px; font-size: 12px; color: var(--text-tertiary); line-height: 1.5;">Не принимает новые диалоги и не выбирается при привязке подключения. История диалогов сохранена и доступна.</p>
+        <button style="height: 32px; padding: 0 14px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-body); cursor: pointer;">Активировать</button>
+      </div>
+      <!-- restricted access -->
+      <div style="width: 372px; background: #fff; border: 1px solid var(--n-8); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); padding: 40px 24px; text-align: center;">
+        <div style="width: 46px; height: 46px; border-radius: 12px; background: var(--warning-bg); color: var(--warning-text); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;"><svg viewBox="0 0 24 24" width="23" height="23" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div>
+        <div style="font-size: 14px; font-weight: 600; color: var(--text-body); margin-bottom: 5px;">Доступ ограничен отделом</div>
+        <p style="margin: 0; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5;">Ваш scope <span style="font-family: var(--font-mono);">channels.view</span> охватывает отдел «Поддержка». Каналы других отделов и канал без отдела не показываются; счётчики фильтров считаются по видимому подмножеству.</p>
+      </div>
+      <!-- delete conflict -->
+      <div style="width: 566px; background: #fff; border: 1px solid var(--error-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); overflow: hidden;">
+        <div style="padding: 20px 22px 16px; display: flex; gap: 14px; border-bottom: 1px solid var(--n-8);">
+          <span style="flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--error-bg); color: var(--error-text); display: flex; align-items: center; justify-content: center;"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6"/></svg></span>
+          <div><h3 style="margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text-heading);">Канал нельзя удалить</h3><p style="margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;">Есть связанные записи. Вместо удаления используйте деактивацию — история сохранится.</p></div>
+        </div>
+        <div style="padding: 16px 22px;">
+          <div style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 10px;">БЛОКИРУЮЩИЕ СВЯЗИ</div>
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--n-8); border-radius: var(--radius-md); font-size: 12.5px;"><span style="color: var(--text-body);">Диалоги</span><span style="font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums;">143</span></div>
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--n-8); border-radius: var(--radius-md); font-size: 12.5px;"><span style="color: var(--text-body);">Подключения</span><span style="font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums;">1</span></div>
+            <div style="display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--n-8); border-radius: var(--radius-md); font-size: 12.5px;"><span style="color: var(--text-body);">Агент</span><span style="font-weight: 600; color: var(--text-body); font-variant-numeric: tabular-nums;">1</span></div>
+          </div>
+        </div>
+        <div style="display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--n-8);">
+          <span style="flex: 1;"></span>
+          <button style="height: 36px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--text-body); cursor: pointer;">Закрыть</button>
+          <button style="height: 36px; padding: 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--n-6); background: #fff; font-size: 13px; font-weight: 600; color: var(--warning-text); cursor: pointer;">Деактивировать вместо удаления</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+</x-dc>
+</body>
+</html>