@elcrm/components 0.2.14 → 0.5.2

package/dist/kit-manifest.json

@@ -0,0 +1,1646 @@
+{
+  "format": "elcrm-kit-manifest-v1",
+  "package": "@elcrm/components",
+  "version": "0.5.2",
+  "pkg": "components",
+  "generatedAt": "2026-08-30T02:34:28.296Z",
+  "components": [
+    {
+      "slug": "ActionGroup",
+      "title": "ActionGroup",
+      "description": "Ряд действий в строке списка / карточке (`role=\"toolbar\"`). Роли: тулбар иконок справа в Card. Кнопки — `@elcrm/button` / свои слоты. Слоты — `children` (и опционально `actions` массивом узлов). Не путать с декларативными `items` у Menu / RadioGroup.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<ActionGroup label=\"Действия: Иван\">\n  <Button variant=\"ghost\" onClick={edit}>Изменить</Button>\n  <Button variant=\"ghost\" onClick={remove}>Удалить</Button>\n</ActionGroup>\n\n<ActionGroup\n  label=\"Ещё\"\n  actions={[\n    <Button key=\"copy\" variant=\"ghost\">Копировать</Button>,\n  ]}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Подпись тулбара (`aria-label`)"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode[]",
+          "description": "Кнопки массивом узлов (не декларативные `items` групп). Можно вместе с `children` (сначала `actions`)."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Свои кнопки / слоты"
+        }
+      ]
+    },
+    {
+      "slug": "Avatar",
+      "title": "Avatar",
+      "description": "Аватар: фото или инициалы, опционально статус присутствия. Когда использовать: - круглая миниатюра пользователя без текстовой подписи рядом; - в шапке, списках, {@link AvatarGroup}. Связанные компоненты: - {@link AvatarName} — аватар + видимые `title` / `description` (`name` у Avatar остаётся только для инициалов); - {@link AvatarGroup} — стопка аватаров из `items`. CSS-токены: `--avatar-*` (в т.ч. `--avatar-size-s|m|l`, `--avatar-radius`). Скругление: `radius={10}` или `style={{ [\"--avatar-radius\"]: \"10px\" }}`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "// фото + статус\n<Avatar src=\"/u/42.jpg\" alt=\"Иван Петров\" size=\"m\" status=\"online\" />\n\n// без фото — только инициалы из name\n<Avatar name=\"Иван Петров\" size=\"s\" />\n\n// подпись в UI — через AvatarName (title + description)\n<AvatarName\n  name=\"Иван Петров\"\n  title=\"Иван Петров\"\n  description=\"ivan@elcrm.app\"\n/>"
+        }
+      ],
+      "props": []
+    },
+    {
+      "slug": "AvatarGroup",
+      "title": "AvatarGroup",
+      "description": "Стопка аватаров с оверлапом, счётчиком «+N» и опциональной кнопкой добавления.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<AvatarGroup\n  items={items}\n  max={5}\n  add\n  onAdd={() => openInvite()}\n  onValueChange={(value) => openProfile(value)}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "AvatarGroupItem[]",
+          "description": "Список людей / аватаров."
+        },
+        {
+          "name": "max",
+          "type": "number",
+          "description": "Сколько аватаров показать до «+N». По умолчанию все."
+        },
+        {
+          "name": "size",
+          "type": "UiSize",
+          "description": "Размер аватаров: `s` | `m` | `l`."
+        },
+        {
+          "name": "add",
+          "type": "boolean",
+          "description": "Кнопка «+» справа."
+        },
+        {
+          "name": "addLabel",
+          "type": "string",
+          "description": "Подпись для кнопки добавления (`aria-label`)."
+        },
+        {
+          "name": "onAdd",
+          "type": "() => void",
+          "description": "Клик по кнопке добавления."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Клик по аватару (`item.value`)."
+        }
+      ]
+    },
+    {
+      "slug": "AvatarName",
+      "title": "AvatarName",
+      "description": "Аватар + видимые `title` и `description` в одну строку. Когда использовать: - строка пользователя в списке / меню / карточке; - нужна подпись рядом с фото (не только инициалы). Связанные компоненты: - {@link Avatar} — только круг (без текста); `name` там лишь для инициалов; - {@link AvatarGroup} — стопка без подписей. Канон: `title` / `description` для UI-текста; `name` — только инициалы. CSS-токены: `--avatar-name-title-color`, `--avatar-name-description-color`, аватар — `--avatar-*`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<AvatarName\n  src=\"/u/42.jpg\"\n  name=\"Иван Петров\"\n  title=\"Иван Петров\"\n  description=\"ivan@elcrm.app\"\n  size=\"m\"\n  status=\"online\"\n/>\n\n<AvatarName\n  as=\"button\"\n  name=\"Мария\"\n  title=\"Мария Смирнова\"\n  description=\"Менеджер\"\n  onClick={() => openProfile()}\n/>"
+        }
+      ],
+      "props": []
+    },
+    {
+      "slug": "Badge",
+      "title": "Badge",
+      "description": "Компактная метка / статус (роль, состояние). Не заменяет Button. Props (`BadgeProps`): - `tone` — `neutral` | `accent` | `success` | `warning` | `danger` - `size` — `s` | `m` | `l` (по умолчанию `m`) - `dot` — точка слева (как online / offline) - `children` — текст метки - плюс атрибуты `span` (`className`, `style`, …)",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Badge tone=\"accent\" size=\"s\">ADMIN</Badge>\n<Badge tone=\"success\" size=\"s\" dot>online</Badge>"
+        }
+      ],
+      "props": [
+        {
+          "name": "tone",
+          "type": "BadgeTone",
+          "description": "Цвет по смыслу. `neutral` | `accent` | `success` | `warning` | `danger`"
+        },
+        {
+          "name": "size",
+          "type": "BadgeSize",
+          "description": "Размер пилюли. `s` — в строке списка; `m` — обычная; `l` — крупнее. По умолчанию `m`."
+        },
+        {
+          "name": "dot",
+          "type": "boolean",
+          "description": "Точка статуса слева (цвет = `tone`)"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Текст метки"
+        }
+      ]
+    },
+    {
+      "slug": "Banner",
+      "title": "Banner",
+      "description": "Статусная полоса (offline, maintenance). Не toast — не путать с Notice.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Banner tone=\"info\" role=\"status\">\n  Каталог из снимка <code>kit-catalog.json</code>\n</Banner>"
+        }
+      ],
+      "props": [
+        {
+          "name": "tone",
+          "type": "BannerTone",
+          "description": "Визуальный акцент"
+        }
+      ]
+    },
+    {
+      "slug": "Brand",
+      "title": "Brand",
+      "description": "Название / логотип в шапке. По умолчанию статичный `strong`. Кликабельный — `as=\"button\"` или `as=\"a\"`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Header brand={<Brand>elCRM</Brand>} />\n<Header brand={<Brand as=\"a\" href=\"/\">elCRM</Brand>} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "\"strong\"",
+          "description": "Тег: статичный заголовок (по умолчанию)"
+        },
+        {
+          "name": "as",
+          "type": "\"button\"",
+          "description": "Тег: кнопка"
+        },
+        {
+          "name": "as",
+          "type": "\"a\"",
+          "description": "Тег: ссылка на главную"
+        }
+      ]
+    },
+    {
+      "slug": "Breadcrumb",
+      "title": "Breadcrumb",
+      "description": "Хлебные крошки пути из декларативного массива `items`. Когда использовать: - показать иерархию страницы / вложенных разделов; - нужна свёртка длинного пути (`collapseAfter`). Связанные компоненты: - {@link PageHead} — шапка страницы, куда часто кладут Breadcrumb; - {@link Dropdown} — если крошка с `dropdown` открывает меню выбора. API: декларативные `items`. Идентификатор — `value` (не `key`). Compound-слоты не используются. CSS-токены: `--shell-*`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const items = [\n  { value: \"home\", label: \"Главная\", href: \"/\" },\n  { value: \"settings\", label: \"Настройки\", href: \"/settings\" },\n  { value: \"team\", label: \"Команда\", icon: <Avatar name=\"Team\" size=\"s\" /> },\n];\n\n<Breadcrumb\n  items={items}\n  separator=\"chevron\"\n  collapseAfter={2}\n  onValueChange={(value) => navigate(items.find((i) => i.value === value)?.href ?? \"/\")}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "BreadcrumbItem[]",
+          "description": "Цепочка крошек (`value` — идентификатор)."
+        },
+        {
+          "name": "separator",
+          "type": "BreadcrumbSeparator",
+          "description": "Разделитель: chevron `>`, slash `/` или свой node."
+        },
+        {
+          "name": "collapseAfter",
+          "type": "number",
+          "description": "Свернуть середину: первые N пунктов, «…», последний. Например `2` → Home, Settings, …, Team."
+        },
+        {
+          "name": "onEllipsisClick",
+          "type": "() => void",
+          "description": "Клик по «…» (если нужно раскрыть путь)."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Клик по пункту (`item.value`)."
+        }
+      ]
+    },
+    {
+      "slug": "Card",
+      "title": "Card",
+      "description": "Карточка-контейнер с опциональным заголовком. Роли: Card = визуальная рамка для группы контента; для секций модуля — Section; для списков — List / Item.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Card title=\"Тариф\">\n  <p>Базовый план</p>\n</Card>"
+        },
+        {
+          "title": "Пример 2",
+          "code": "<Card title=\"Тенанты\" style={{ [\"--card-pointer\" as string]: \"pointer\" }}>\n  12\n</Card>"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок карточки (если нет — только children)"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Содержимое карточки"
+        }
+      ]
+    },
+    {
+      "slug": "ChatList",
+      "title": "ChatList",
+      "description": "Колонка списка диалогов (`aside`).",
+      "importFrom": "@elcrm/components",
+      "examples": [],
+      "props": []
+    },
+    {
+      "slug": "ChatMessages",
+      "title": "ChatMessages",
+      "description": "Колонка переписки (`section`).",
+      "importFrom": "@elcrm/components",
+      "examples": [],
+      "props": []
+    },
+    {
+      "slug": "CodeBlock",
+      "title": "CodeBlock",
+      "description": "Блок кода: bar + pre. Подсветку передаёт приложение через `children`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<CodeBlock title=\"Пример\" code={snippet} onCopy={() => copy(snippet)} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок в полосе над кодом"
+        },
+        {
+          "name": "code",
+          "type": "string",
+          "description": "Текст без подсветки (если нет children)"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Подсветка / разметка — свой рендер в pre"
+        },
+        {
+          "name": "onCopy",
+          "type": "() => void",
+          "description": "Кнопка «Копировать»; без onCopy не показывается"
+        },
+        {
+          "name": "copyLabel",
+          "type": "string",
+          "description": "Подпись кнопки копирования"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Доп. действия справа в bar"
+        }
+      ]
+    },
+    {
+      "slug": "Dropdown",
+      "title": "Dropdown",
+      "description": "Выпадающее меню: триггер + панель с `groups` / `items` (portal, {@link Popover}). Когда использовать: - действия строки списка, переключатели колонок, контекстные пункты у кнопки. Отличия: - {@link Menu} — инлайн-навигация в потоке (шапка), без панели; - {@link Popover} — свой контент в portal, без `items`. API: декларативные `items` / `groups`. Идентификатор пункта — `value` (не `key`). Compound-слоты (`Dropdown.Item`) не используются. CSS-токены: `--shell-*`, узкие `--dropdown-min-width` / `--dropdown-max-width` / `--dropdown-max-height`, `--popup-shadow`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const groups = [\n  {\n    title: \"Действия\",\n    items: [\n      { value: \"edit\", label: \"Изменить\", icon: <Icons.Line name=\"edit\" /> },\n      { value: \"delete\", label: \"Удалить\", danger: true },\n    ],\n  },\n  {\n    title: \"Колонки\",\n    items: [\n      { value: \"email\", label: \"Email\", checkbox: true, checked: true },\n      { value: \"phone\", label: \"Телефон\", checkbox: true },\n    ],\n  },\n];\n\n<Dropdown\n  label=\"Действия\"\n  groups={groups}\n  closeOnSelect={false}\n  onValueChange={(value) => console.log(value)}\n/>"
+        }
+      ],
+      "props": []
+    },
+    {
+      "slug": "EmptyState",
+      "title": "EmptyState",
+      "description": "Заглушка «нет данных»: иконка, заголовок, описание, действия. Роли: EmptyState после загрузки при пустом списке; во время загрузки — Loading; для секций с контентом — Section.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<EmptyState\n  title=\"Нет клиентов\"\n  description=\"Создайте первого клиента\"\n  actions={<Button>Создать</Button>}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок заглушки"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Поясняющий текст"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Иконка над заголовком"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Кнопки / CTA под описанием"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Доп. контент между описанием и actions"
+        }
+      ]
+    },
+    {
+      "slug": "Footer",
+      "title": "Footer",
+      "description": "Подвал страницы или модуля. Роли: Footer в Layout (глобальный) или в PageShell как `footer` (прибит к низу модуля).",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Layout footer={<Footer>© elCRM · v1.0</Footer>}>\n  …\n</Layout>"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Содержимое подвала (копирайт, ссылки, статус)"
+        }
+      ]
+    },
+    {
+      "slug": "Header",
+      "title": "Header",
+      "description": "Шапка приложения со слотами brand / nav / search / actions. Роли: Header = верхняя полоса в Layout; Brand — логотип/название; рядом — Menu, поиск из `@elcrm/form`, кнопки `@elcrm/button`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Header\n  brand={<Brand>elCRM</Brand>}\n  nav={<Menu items={navItems} />}\n  actions={<Button>Выйти</Button>}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "brand",
+          "type": "React.ReactNode",
+          "description": "Логотип / название (часто `<Brand />`)"
+        },
+        {
+          "name": "nav",
+          "type": "React.ReactNode",
+          "description": "Навигация (Menu, ссылки)"
+        },
+        {
+          "name": "search",
+          "type": "React.ReactNode",
+          "description": "Поиск или фильтр в шапке"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Действия справа (кнопки, аватар, колокольчик)"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Доп. контент после слотов"
+        }
+      ]
+    },
+    {
+      "slug": "Healthmap",
+      "title": "Healthmap",
+      "description": "Теплокарта активности по дням (как GitHub contribution graph). Роли: Healthmap = визуализация `days[]`; данные грузит приложение (`Api.query` / свой RPC), не сам компонент.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Healthmap\n  data={heatmap}\n  loading={pending}\n  year={year}\n  onYearChange={setYear}\n  brandName=\"eKivi\"\n  brandSub=\"клиенты\"\n  unit={{ one: \"событие\", few: \"события\", many: \"событий\" }}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "data",
+          "type": "HealthmapData | null",
+          "description": "Данные года; `null` — пустая сетка."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "description": "Показать «Загрузка…» в заголовке."
+        },
+        {
+          "name": "year",
+          "type": "number | null",
+          "description": "Выбранный год. - `undefined` — uncontrolled (внутри берётся последний из `data.years`); - `null` — controlled «последний год» (как в ответе сервера); - число — конкретный год."
+        },
+        {
+          "name": "onYearChange",
+          "type": "(year: number | null) => void",
+          "description": "Смена года (клик по вкладке)."
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "description": "Подсказка под сеткой."
+        },
+        {
+          "name": "brandName",
+          "type": "string",
+          "description": "Бренд в боковой колонке KPI."
+        },
+        {
+          "name": "brandSub",
+          "type": "string",
+          "description": "Подпись под брендом."
+        },
+        {
+          "name": "unit",
+          "type": "HealthmapUnit",
+          "description": "Единицы для склонения счётчиков."
+        },
+        {
+          "name": "months",
+          "type": "readonly string[]",
+          "description": "12 коротких названий месяцев (янв…дек). По умолчанию — русские."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "Locale для длинной даты в tooltip (`toLocaleDateString`). @default \"ru-RU\""
+        },
+        {
+          "name": "loadingLabel",
+          "type": "string",
+          "description": "Текст «Загрузка…» в заголовке."
+        },
+        {
+          "name": "lastYearLabel",
+          "type": "string",
+          "description": "Фраза «последний год» в заголовке."
+        },
+        {
+          "name": "weekdays",
+          "type": "readonly string[]",
+          "description": "7 подписей дней недели (Пн…Вс). Пустая строка — слот без текста (компактная колонка как у GitHub). @default [\"Пн\",\"\",\"Ср\",\"\",\"Пт\",\"\",\"\"]"
+        }
+      ]
+    },
+    {
+      "slug": "IconButton",
+      "title": "IconButton",
+      "description": "Иконка-кнопка: `Icons.Line` + {@link ShellIconButton} + {@link Tooltip}.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<IconButton name=\"power\" label=\"Выход\" onClick={logout} />\n<IconButton name=\"copy_01\" label=\"Копировать\" tooltip=\"Скопировать CSS\" onClick={copy} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "description": "Имя из `icons update` / `Icons.Line` (в приложении — `IconLineName`)"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Подпись: `aria-label` и текст tooltip по умолчанию"
+        },
+        {
+          "name": "tooltip",
+          "type": "React.ReactNode | false",
+          "description": "Подсказка; `false` — без Tooltip (например, внутри toolbar с aria-label)"
+        },
+        {
+          "name": "iconSize",
+          "type": "number",
+          "description": "Размер SVG; по умолчанию от `size` кнопки"
+        },
+        {
+          "name": "tooltipPlacement",
+          "type": "TooltipPlacement",
+          "description": "Сторона tooltip"
+        }
+      ]
+    },
+    {
+      "slug": "Item",
+      "title": "Item",
+      "description": "Элемент списка / строки меню: кнопка, ссылка или `<li>`. Роли: Item внутри List / Menu; для групповых списков выбора — RadioGroup / Dropdown с `items` (не собирайте Item вручную).",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<List>\n  <Item active>Текущий</Item>\n  <Item as=\"button\" variant=\"card\" active>Карточка</Item>\n</List>"
+        }
+      ],
+      "props": [
+        {
+          "name": "as",
+          "type": "\"li\"",
+          "description": "Тег: элемент списка (по умолчанию; внутри `<List>` / `<ul>`)"
+        },
+        {
+          "name": "as",
+          "type": "\"button\"",
+          "description": "Тег: кнопка"
+        },
+        {
+          "name": "as",
+          "type": "\"a\"",
+          "description": "Тег: ссылка"
+        }
+      ]
+    },
+    {
+      "slug": "ItemColumn",
+      "title": "ItemColumn",
+      "description": "Колонка содержимого строки списка: иконка слева, текст столбиком, слоты справа. Роли: внутри {@link Item} / {@link Card} (идеи, тикеты, inbox). Не заменяет Item (клик / active) и не AvatarName (там фото).",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Item as=\"button\" onClick={open}>\n  <ItemColumn\n    icon={<Icon />}\n    title=\"Тема\"\n    extra={<Badge size=\"s\" tone=\"accent\">Новые</Badge>}\n    description=\"Превью текста…\"\n    meta={[\"★ 2\", \"3 комм.\", \"Иван\"]}\n  />\n</Item>"
+        }
+      ],
+      "props": [
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Иконка слева"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок"
+        },
+        {
+          "name": "extra",
+          "type": "React.ReactNode",
+          "description": "Справа сверху у title (Badge, счётчик)"
+        },
+        {
+          "name": "aside",
+          "type": "React.ReactNode",
+          "description": "Правая колонка (верхний край)"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Описание / превью"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Подвал целиком"
+        },
+        {
+          "name": "meta",
+          "type": "React.ReactNode[]",
+          "description": "Куски подвала через точку — если нет `footer`"
+        },
+        {
+          "name": "size",
+          "type": "UiSize",
+          "description": "Размер текста"
+        },
+        {
+          "name": "unread",
+          "type": "boolean",
+          "description": "Жирный title (непрочитанное)"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Доп. строки под footer"
+        }
+      ]
+    },
+    {
+      "slug": "Layout",
+      "title": "Layout",
+      "description": "Оболочка приложения: шапка, основной контент, подвал. Роли: Layout = каркас страницы; внутри — Header / Section / PageShell / Footer. Используйте как корневой каркас маршрута или приложения. `fixed` — какие слоты не крутятся вместе со страницей. По умолчанию `[\"header\", \"footer\", \"sidebar\"]`: скроллится только `children` в `<main>`. Пустой массив — обычный поток, скролл у предка. Высота каркаса: `--layout-height` (по умолчанию `100dvh`). Вложенный стенд: `--layout-height: 100%` у родителя с явной высотой.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Layout\n  fixed={[\"header\", \"footer\", \"sidebar\"]}\n  sidebar={<Sidebar groups={groups} value={page} onValueChange={setPage} />}\n  header={<Header brand=\"App\" />}\n  footer={<Footer>© elCRM</Footer>}\n>\n  <PageShell>…</PageShell>\n</Layout>"
+        }
+      ],
+      "props": [
+        {
+          "name": "sidebar",
+          "type": "React.ReactNode",
+          "description": "Левая колонка (обычно `<Sidebar />`) — ряд: сайдбар + контент"
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Слот шапки (обычно `<Header />`)"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Слот подвала (обычно `<Footer />`)"
+        },
+        {
+          "name": "fixed",
+          "type": "LayoutFixedSlot[]",
+          "description": "Какие слоты зафиксированы (не прокручиваются). По умолчанию все: `header`, `footer`, `sidebar`. `[]` — ничего не фиксировать."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Основной контент страницы (рендерится в `<main>`)"
+        }
+      ]
+    },
+    {
+      "slug": "List",
+      "title": "List",
+      "description": "Список (`<ul>`) — вертикальный или горизонтальный. Роли: List = контейнер; элементы — Item (или свои `<li>`). Для навигации / меню смотрите Menu, NavSections.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<List>\n  <Item as=\"li\">Первый</Item>\n  <Item as=\"li\" active>Второй</Item>\n</List>"
+        }
+      ],
+      "props": [
+        {
+          "name": "row",
+          "type": "boolean",
+          "description": "Горизонтальный список"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Элементы списка (обычно `<Item as=\"li\" />`)"
+        }
+      ]
+    },
+    {
+      "slug": "Loading",
+      "title": "Loading",
+      "description": "Плейсхолдер состояния загрузки (`role=\"status\"`). Роли: Loading = индикация ожидания данных; при пустом результате после загрузки — EmptyState.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "{isLoading ? <Loading>Загружаем клиентов…</Loading> : <List>…</List>}"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Текст или кастомный индикатор (по умолчанию «Загрузка…»)"
+        }
+      ]
+    },
+    {
+      "slug": "Menu",
+      "title": "Menu",
+      "description": "Навигационное меню в потоке документа (шапка, сайдбар-ряд) — не popover.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Menu\n  items={items}\n  value={section}\n  onValueChange={setSection}\n  vertical\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "MenuItem[]",
+          "description": "Декларативный список пунктов. Групповые UI elCRM используют `items`, а не compound-слоты."
+        },
+        {
+          "name": "vertical",
+          "type": "boolean",
+          "description": "Вертикальный ряд пунктов."
+        },
+        {
+          "name": "variant",
+          "type": "\"plain\" | \"line\"",
+          "description": "`plain` — пилюли. `line` — вкладки с нижней чертой (фильтры страницы)."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Активный `value` пункта (если у item не задан `active`). Идентификатор — `value`, не `key`."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный `value` (неконтролируемый режим)."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Выбор пункта: получает `item.value`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Дополнительный контент внутри `<nav>` (редко)."
+        }
+      ]
+    },
+    {
+      "slug": "NavSections",
+      "title": "NavSections",
+      "description": "Макет «настройки / профиль»: вертикальный сайдбар + lazy-секция справа. Когда использовать: - страницы с несколькими разделами и боковым меню; - контент секции грузится по `value` через `resolveSection`. Связанные компоненты: - {@link TabSections} — то же, но вкладки горизонтально; - {@link createLazyResolver} из `lazyRoute` — кэш lazy-импортов; - {@link Menu} — простая навигация без панелей. API: декларативные `groups` / `items`. Идентификатор раздела — `value` (не `key`). У пункта `items` + `defaultOpen` — раскрываемое подменю (как у Sidebar). Compound-слоты (`NavSections.Item`) не используются. CSS-токены: `--shell-*`, `--nav-sections-padding`, `--nav-sections-nav-width`, `--nav-sections-main-max-width`, `--sidebar-indent`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const groups = [\n  {\n    value: \"docs\",\n    label: \"Документация\",\n    items: [\n      {\n        value: \"bridge\",\n        label: \"VK Bridge\",\n        defaultOpen: true,\n        items: [\n          { value: \"intro\", label: \"Введение\" },\n          { value: \"events\", label: \"События\" },\n        ],\n      },\n    ],\n  },\n];\n\n<NavSections\n  groups={groups}\n  resolveSection={resolveSection}\n  value={section}\n  onValueChange={setSection}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "groups",
+          "type": "NavSectionsGroup[]",
+          "description": "Группы бокового меню."
+        },
+        {
+          "name": "resolveSection",
+          "type": "(value: string) => LazyRouteChunk | React.ComponentType",
+          "description": "Резолвер панели справа по `value`. Обычно: `createLazyResolver((v) => import(\\`./sections/${v}.tsx\\`))`. Не нужен, если передали `children`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Готовая панель без lazy (вместо `resolveSection`). Приложение само рендерит контент по `value`."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Контролируемый активный `value`."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный `value` в неконтролируемом режиме."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Смена активного раздела (`next` = `item.value`)."
+        },
+        {
+          "name": "open",
+          "type": "string[]",
+          "description": "Раскрытые родители (их `value`). Контролируемый режим. Вместе с `onOpenChange`."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "string[]",
+          "description": "Начально раскрытые (плюс `item.defaultOpen` и предки выбранного)."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: string[]) => void",
+          "description": "Смена набора раскрытых родителей"
+        },
+        {
+          "name": "loading",
+          "type": "React.ReactNode",
+          "description": "Fallback для `<Suspense>` при ленивой загрузке секции."
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Низ сайдбара (например кнопка «Назад»)."
+        },
+        {
+          "name": "navLabel",
+          "type": "string",
+          "description": "`aria-label` для `<nav>`."
+        }
+      ]
+    },
+    {
+      "slug": "PageHead",
+      "title": "PageHead",
+      "description": "Заголовок страницы: title слева, actions справа в одной линии. Роли: PageHead = шапка контента внутри PageShell / Section; для полноценной секции с description/icon — Section; глобальная шапка приложения — Header.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<PageShell scroll>\n  <PageHead title=\"Идеи\" sup={<Badge size=\"s\" tone=\"accent\">4</Badge>} sticky>\n    <Menu items={tabs} value={tab} onValueChange={setTab} />\n  </PageHead>\n  …\n</PageShell>"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок страницы"
+        },
+        {
+          "name": "sup",
+          "type": "React.ReactNode",
+          "description": "Надстрочный слот сразу после title: текст или {@link Badge}. Пусто / `0` / `false` — не рендерим."
+        },
+        {
+          "name": "subtitle",
+          "type": "React.ReactNode",
+          "description": "Подзаголовок"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Кнопки / поиск справа в одной строке с заголовком"
+        },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "description": "Прилипает к верху скролла предка (`PageShell` с `scroll`). По умолчанию `false`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Контент под строкой заголовка (фильтры, поиск, вкладки). Между title и children — `--shell-gap`."
+        }
+      ]
+    },
+    {
+      "slug": "PageShell",
+      "title": "PageShell",
+      "description": "Каркас модуля: опциональный скролл в body, footer прибит к низу. Роли: PageShell = внутренний каркас контента в Layout; сверху часто PageHead / Section, снизу — панель действий.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<PageShell wide scroll footer={<Footer><Button>Сохранить</Button></Footer>}>\n  <PageHead title=\"Редактор\" sticky />\n  …\n</PageShell>"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Контент модуля"
+        },
+        {
+          "name": "wide",
+          "type": "boolean",
+          "description": "Шире контент (редакторы, таблицы)"
+        },
+        {
+          "name": "scroll",
+          "type": "boolean",
+          "description": "Скролл внутри body. По умолчанию `true`. `false` — шелл растёт с контентом, крутит предок."
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Нижняя панель вне скролла"
+        }
+      ]
+    },
+    {
+      "slug": "PanelInfo",
+      "title": "PanelInfo",
+      "description": "Выезжающая панель справа: шапка / body / footer. Широкий экран — flex-колонка рядом со списком (`aside`). Узкий (`max-width: 56rem`) — `dialog` + `aria-modal`, затемнение, focus trap и `acquireOverlayZIndex`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<PanelInfo\n  open={!!row}\n  title={row?.name ?? \"\"}\n  onClose={() => setId(null)}\n  footer={<Button width=\"l\" label=\"Сохранить\" onSend={onSave} />}\n>\n  <StringField name=\"name\" form={form} label=\"Название\" />\n</PanelInfo>"
+        }
+      ],
+      "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "Открыта ли панель (controlled)."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "description": "Начальное открытие (uncontrolled)."
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок шапки."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "description": "Смена open (крестик / фон / Escape)."
+        },
+        {
+          "name": "onClose",
+          "type": "() => void",
+          "description": "Закрытие. Эквивалент `onOpenChange(false)`. Удобный алиас для controlled-режима."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Тело — форма (`@elcrm/form` поля) или любой контент. Скроллится между шапкой и footer."
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Низ вне скролла — обычно `Stack` + `@elcrm/button` («Отмена» / «Сохранить»)."
+        },
+        {
+          "name": "headerExtra",
+          "type": "React.ReactNode",
+          "description": "Доп. действия в шапке слева от крестика."
+        },
+        {
+          "name": "close",
+          "type": "React.ReactNode",
+          "description": "Слот кнопки закрытия. По умолчанию — крестик. Приложение может подставить `@elcrm/button`."
+        }
+      ]
+    },
+    {
+      "slug": "Popover",
+      "title": "Popover",
+      "description": "Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`). Роли: Popover = свой попап (слот `children`). Типовое меню пунктов — {@link Dropdown}. Якорь — без `cloneElement`: - `trigger={(api) => <button {...api.anchorProps}>…</button>}` — канон; - `trigger={<span>…</span>}` — клик/ARIA на обёртке.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Popover\n  trigger={(api) => (\n    <Button {...api.anchorProps}>Ещё</Button>\n  )}\n  label=\"Действия\"\n  role=\"dialog\"\n>\n  <List><Item as=\"button\">Скачать</Item></List>\n</Popover>"
+        }
+      ],
+      "props": [
+        {
+          "name": "trigger",
+          "type": "React.ReactNode | ((api: PopoverTriggerApi) => React.ReactNode)",
+          "description": "Якорь: узел **или** render-prop с {@link PopoverTriggerApi}. Render-prop — без clone; пропы на кнопку через `anchorProps`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Содержимое панели"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "description": "Контролируемое открытие"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "description": "Начальное открытие"
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: boolean) => void",
+          "description": "Смена open"
+        },
+        {
+          "name": "align",
+          "type": "\"start\" | \"end\"",
+          "description": "Выравнивание панели"
+        },
+        {
+          "name": "placement",
+          "type": "PopoverPlacement",
+          "description": "Куда открывать панель. `top` — всегда вверх (футер Sidebar). @default \"auto\""
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "Не открывать по клику на якорь"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "aria-label панели"
+        },
+        {
+          "name": "role",
+          "type": "React.AriaRole",
+          "description": "role панели. По умолчанию без роли (произвольный контент). Меню пунктов — `role=\"menu\"` ({@link Dropdown})."
+        },
+        {
+          "name": "panelClassName",
+          "type": "string",
+          "description": "Класс панели (portal)"
+        },
+        {
+          "name": "fitContent",
+          "type": "boolean",
+          "description": "Высота по контенту: без `maxHeight` и без внутреннего скролла. Для меню аккаунта Sidebar (`Dropdown tone=\"account\"`)."
+        }
+      ]
+    },
+    {
+      "slug": "PricingGroup",
+      "title": "PricingGroup",
+      "description": "Горизонтальная группа тарифных карточек из декларативного `items`. Когда использовать: - страница тарифов / upgrade без матрицы сравнения; - один и тот же массив {@link PricingPlan} позже уйдёт в {@link PricingTable}. Связанные компоненты: - {@link PricingTable} — сравнительная матрица поверх тех же `items`; - {@link RadioGroup} — выбор опции с индикатором, не обязательно тариф. Общий тип плана — {@link PricingPlan}. Идентификатор — `value` (не `key`). Compound-слоты не используются. CSS-токены: `--shell-*`, узкие `--pricing-card-min-width`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const items: PricingPlan[] = [\n  {\n    value: \"starter\",\n    title: \"Starter\",\n    price: \"$9\",\n    meta: \"в месяц\",\n    features: [\"1 проект\", \"Email-поддержка\"],\n    actions: <Button onSend={…}>Выбрать</Button>,\n  },\n  {\n    value: \"pro\",\n    title: \"Pro\",\n    price: \"$29\",\n    badge: \"Popular\",\n    badgePlacement: \"float\",\n    highlighted: true,\n    features: [\"Безлимит\", \"SSO\"],\n    actions: <Button onSend={…}>Выбрать</Button>,\n  },\n];\n\n<PricingGroup items={items} selectable value={plan} onValueChange={setPlan} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "PricingPlan[]",
+          "description": "Тарифные карточки — тот же shape, что у {@link PricingTable}."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Выбранный план (controlled), сравнивается с `item.value`."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный выбранный план (uncontrolled)."
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "description": "Клик по карточке выбирает value (actions не трогают выбор)."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "Заблокировать выбор."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Смена выбранного плана."
+        }
+      ]
+    },
+    {
+      "slug": "PricingTable",
+      "title": "PricingTable",
+      "description": "Сравнительная таблица тарифов: колонки из `items` + матрица `sections`. Когда использовать: - страница сравнения фич между планами; - те же {@link PricingPlan} уже используются в {@link PricingGroup}. Связанные компоненты: - {@link PricingGroup} — карточки без матрицы; - общий тип — {@link PricingPlan}. API: декларативные `items` (+ `sections`). Идентификатор плана — `value` (не `key`). Compound-слоты не используются. CSS-токены: `--shell-*`, узкие `--pricing-table-label-width`, `--pricing-card-min-width`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const items: PricingPlan[] = [\n  { value: \"starter\", title: \"Starter\", price: \"$9\", actions: <Button>…</Button> },\n  { value: \"pro\", title: \"Pro\", price: \"$29\", highlighted: true, actions: <Button>…</Button> },\n];\n\nconst sections = [\n  {\n    title: \"Команда\",\n    rows: [\n      {\n        key: \"seats\",\n        label: \"Участники\",\n        values: { starter: \"3\", pro: \"Безлимит\" },\n      },\n      {\n        key: \"sso\",\n        label: \"SSO\",\n        hint: \"Единый вход\",\n        values: { starter: false, pro: true },\n      },\n    ],\n  },\n];\n\n<PricingTable items={items} sections={sections} selectable />"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "PricingTableItem[]",
+          "description": "Колонки планов — тот же shape, что у {@link PricingGroup}."
+        },
+        {
+          "name": "sections",
+          "type": "PricingTableSection[]",
+          "description": "Матрица сравнения (секции → строки → values по plan.value)."
+        },
+        {
+          "name": "footerActions",
+          "type": "boolean",
+          "description": "Повторить actions внизу таблицы (как на макетах)."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Выбранный план (controlled)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный план (uncontrolled)."
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "description": "Клик по шапке колонки выбирает план."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "Заблокировать выбор."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Смена выбранного плана (`item.value`)."
+        }
+      ]
+    },
+    {
+      "slug": "RadioGroup",
+      "title": "RadioGroup",
+      "description": "Группа выбора одной опции из декларативного массива `items`. Когда использовать: - выбор тарифа, способа оплаты, человека, варианта настроек карточкой; - нужен check/radio-индикатор и опциональные icon / meta / actions. Связанные компоненты: - {@link PricingGroup} — тарифные карточки без radio-индикатора; - {@link AvatarName} — часто как `icon` / контент опции «человек». API: только `items` + value/onValueChange. Compound-слоты (`RadioGroup.Item`) не используются. Идентификатор опции — `value` (не `key`). CSS-токены: `--shell-*`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const items = [\n  {\n    value: \"basic\",\n    icon: <Icons.Line name=\"zap\" />,\n    title: \"Basic\",\n    description: \"Для старта\",\n    meta: \"$9/мес\",\n  },\n  {\n    value: \"pro\",\n    title: \"Pro\",\n    description: \"Для команд\",\n    price: \"$29\",\n    badge: <Badge>Popular</Badge>,\n    variant: \"split\",\n  },\n];\n\n<RadioGroup\n  items={items}\n  value={plan}\n  onValueChange={setPlan}\n  indicator=\"check\"\n  indicatorSide=\"end\"\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "RadioGroupItem[]",
+          "description": "Декларативный список опций."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Выбранное значение (controlled)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальное значение (uncontrolled)."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "description": "`name` для скрытых `input[type=radio]`."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "Заблокировать всю группу."
+        },
+        {
+          "name": "indicator",
+          "type": "RadioIndicator",
+          "description": "`check` — квадрат с галочкой; `radio` — круг."
+        },
+        {
+          "name": "indicatorSide",
+          "type": "RadioIndicatorSide",
+          "description": "Сторона индикатора в row-варианте."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Смена выбора (`next` = `item.value`)."
+        }
+      ]
+    },
+    {
+      "slug": "Section",
+      "title": "Section",
+      "description": "Единая секция страницы: заголовок, описание, иконка, контент, действия. Роли (не путать): - `Layout` — оболочка приложения (`<main>` внутри); - `PageShell` — каркас модуля (скролл + footer); - `PageHead` — строка title + actions на странице; - `Section` — блок контента / auth / подраздел. Тело (`children`) — тот же ряд/колонка/сетка, что у `Stack` (`direction` / `gap` / `columns`). Ряд кнопок в `actions` — оберни в `<Stack direction=\"row\">`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Section title=\"Фильтры\" direction=\"row\" gap={12}>\n  <SearchField name=\"q\" />\n  <Button>Найти</Button>\n</Section>\n<Section title=\"Карточки\" direction=\"grid\" columns={3} gap={16}>\n  <Stat label=\"Всего\" value={10} />\n</Section>"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Заголовок секции"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Подзаголовок / описание"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Иконка / логотип над или рядом с заголовком"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Основной контент секции"
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Блок действий под контентом (колонка; для ряда — Stack direction=\"row\")"
+        },
+        {
+          "name": "variant",
+          "type": "\"page\" | \"block\" | \"auth\"",
+          "description": "`page` — секция модуля / панель настроек. `block` — блок внутри панели (заголовок + разделитель). `auth` — центрированная карточка входа."
+        },
+        {
+          "name": "align",
+          "type": "\"start\" | \"center\"",
+          "description": "Выравнивание шапки (`start` по умолчанию, для `auth` — `center`)"
+        },
+        {
+          "name": "titleSize",
+          "type": "\"md\" | \"lg\"",
+          "description": "Размер заголовка"
+        },
+        {
+          "name": "direction",
+          "type": "StackDirection",
+          "description": "Раскладка тела: как у Stack (по умолчанию `column`)"
+        },
+        {
+          "name": "gap",
+          "type": "number | string",
+          "description": "Отступ между детьми тела"
+        },
+        {
+          "name": "columns",
+          "type": "StackColumns",
+          "description": "Сетка тела: число колонок или треки (только при `direction=\"grid\"`)"
+        },
+        {
+          "name": "as",
+          "type": "\"section\" | \"main\" | \"div\"",
+          "description": "HTML-тег корня. По умолчанию `section` (Layout уже даёт `<main>`). Явно `main` — только если Section сам корень страницы без Layout."
+        }
+      ]
+    },
+    {
+      "slug": "Sidebar",
+      "title": "Sidebar",
+      "description": "Левая колонка приложения: бренд, группы меню, футер. Роли: Sidebar = навигация приложения; не путать с NavSections (сайдбар внутри страницы + lazy-панель). `variant=\"cards\"` — секции-карточки (elWMS Console). `variant=\"plain\"` — плоский список и заголовок группы (backoffice). Иконки, колокольчик, тема, выход — слоты приложения (`brand`, `extra`, `footer`). Роутер не подключаем.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Sidebar\n  variant=\"cards\"\n  value={page}\n  onValueChange={setPage}\n  brand={<Brand as=\"strong\">App</Brand>}\n  extra={<Notifications.Bell />}\n  groups={[\n    {\n      value: \"docs\",\n      items: [\n        { value: \"games\", label: \"VK Games\" },\n        {\n          value: \"bridge\",\n          label: \"VK Bridge\",\n          defaultOpen: true,\n          items: [\n            { value: \"intro\", label: \"Введение\" },\n            { value: \"events\", label: \"События\", items: [\n              { value: \"evt-init\", label: \"VKWebAppInit\" },\n            ] },\n          ],\n        },\n      ],\n    },\n  ]}\n  footer={<AvatarName title=\"Паша\" description=\"mail@…\" />}\n  footerItems={[\n    { value: \"home\", label: \"Главная\", icon: <Icon /> },\n    { value: \"theme\", label: \"Тема\", submenu: true },\n    { value: \"logout\", label: \"Выйти\", danger: true },\n  ]}\n  onFooterValueChange={(value) => console.log(value)}\n  version=\"v 0.2.26\"\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "groups",
+          "type": "SidebarGroup[]",
+          "description": "Группы пунктов (`value` + `items`). Канон — только `groups`."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Текущий пункт (controlled)."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный пункт (uncontrolled)."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Выбор пункта (только листья, без вложенных `items`)."
+        },
+        {
+          "name": "open",
+          "type": "string[]",
+          "description": "Раскрытые родители (их `value`). Контролируемый режим. Вместе с `onOpenChange`."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "string[]",
+          "description": "Начально раскрытые (плюс `item.defaultOpen` и предки выбранного)."
+        },
+        {
+          "name": "onOpenChange",
+          "type": "(open: string[]) => void",
+          "description": "Смена набора раскрытых родителей"
+        },
+        {
+          "name": "variant",
+          "type": "SidebarVariant",
+          "description": "`cards` — блоки-карточки. `plain` — плоский список. @default \"cards\""
+        },
+        {
+          "name": "brand",
+          "type": "React.ReactNode",
+          "description": "Логотип / название"
+        },
+        {
+          "name": "extra",
+          "type": "React.ReactNode",
+          "description": "Справа от бренда (колокольчик)"
+        },
+        {
+          "name": "footer",
+          "type": "React.ReactNode",
+          "description": "Низ: тема, выход или карточка пользователя"
+        },
+        {
+          "name": "footerItems",
+          "type": "DropdownItem[]",
+          "description": "Меню по клику на `footer` (Dropdown, `placement=\"top\"`). Есть пункты → футер становится триггером, справа ⋮."
+        },
+        {
+          "name": "onFooterValueChange",
+          "type": "(value: string, item: DropdownItem) => void",
+          "description": "Выбор пункта меню аккаунта"
+        },
+        {
+          "name": "footerMenuLabel",
+          "type": "string",
+          "description": "`aria-label` панели меню аккаунта"
+        },
+        {
+          "name": "version",
+          "type": "React.ReactNode",
+          "description": "Версия под футером"
+        }
+      ]
+    },
+    {
+      "slug": "SplitPane",
+      "title": "SplitPane",
+      "description": "Две панели с перетаскиваемым разделителем.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<SplitPane\n  direction=\"horizontal\"\n  ratio={ratio}\n  onRatioChange={setRatio}\n  first={<Preview />}\n  second={<Editor />}\n/>\n<SplitPane direction=\"horizontal\" defaultRatio={0.58} first={…} second={…} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "ratio",
+          "type": "number",
+          "description": "Доля первой панели 0…1 (controlled)."
+        },
+        {
+          "name": "defaultRatio",
+          "type": "number",
+          "description": "Начальная доля (uncontrolled). @default 0.5"
+        }
+      ]
+    },
+    {
+      "slug": "Stack",
+      "title": "Stack",
+      "description": "Универсальный стек (ряд / колонка) с отступами между детьми. Роли: Stack = базовая раскладка (Block / Row / Column удалены — `elcrm migrate components`). Внутри Section, Card, форм и списков действий.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Stack direction=\"row\" gap={12}>\n  <Button>Отмена</Button>\n  <Button>Сохранить</Button>\n</Stack>\n<Stack direction=\"grid\" columns={[\"1fr\", \"100px\", \"100px\"]} gap={12} />"
+        }
+      ],
+      "props": [
+        {
+          "name": "direction",
+          "type": "StackDirection",
+          "description": "Направление: по умолчанию `column`. `grid` — сетка"
+        },
+        {
+          "name": "columns",
+          "type": "StackColumns",
+          "description": "Сетка: `4` — четыре равные колонки; `[\"1fr\", \"100px\", \"auto\"]` — свои треки (число в массиве = px)."
+        },
+        {
+          "name": "gap",
+          "type": "number | string",
+          "description": "Отступ между детьми: число (px) или CSS-строка"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Дочерние элементы стека"
+        }
+      ]
+    },
+    {
+      "slug": "Stat",
+      "title": "Stat",
+      "description": "Карточка-метрика: подпись сверху, крупное число снизу. Роли: сводка на PageHead / над списком. Не заменяет Card с произвольным контентом.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Stack direction=\"grid\" gap={12}>\n  <Stat label=\"Всего\" value={10} labelMuted={false} />\n  <Stat label=\"Admin\" value={6} tone=\"accent\" />\n</Stack>"
+        }
+      ],
+      "props": [
+        {
+          "name": "label",
+          "type": "React.ReactNode",
+          "description": "Подпись метрики"
+        },
+        {
+          "name": "value",
+          "type": "React.ReactNode",
+          "description": "Значение"
+        },
+        {
+          "name": "tone",
+          "type": "StatTone",
+          "description": "Цвет числа"
+        },
+        {
+          "name": "labelMuted",
+          "type": "boolean",
+          "description": "Приглушить подпись (по умолчанию да)"
+        }
+      ]
+    },
+    {
+      "slug": "Table",
+      "title": "Table",
+      "description": "Таблица данных: обёртка со скроллом + стили shell. Подпись таблицы — нативный `<caption>` в `children` (a11y).",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Table stickyHeader>\n  <caption className=\"sr-only\">Пользователи</caption>\n  <thead>\n    <tr>\n      <th>Имя</th>\n      <th>Тип</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>label</code></td>\n      <td>string</td>\n    </tr>\n  </tbody>\n</Table>"
+        }
+      ],
+      "props": [
+        {
+          "name": "layout",
+          "type": "\"auto\" | \"fixed\"",
+          "description": "`fixed` — равномерные колонки, ширины через col/colgroup в children."
+        },
+        {
+          "name": "stickyHeader",
+          "type": "boolean",
+          "description": "Липкий `<thead>` при скролле обёртки. Фон шапки: `--table-head-background` (иначе `--shell-background`)."
+        }
+      ]
+    },
+    {
+      "slug": "TabSections",
+      "title": "TabSections",
+      "description": "Как {@link NavSections}, но вкладки горизонтально; без собственного заголовка — обычно оборачивают в `Section` / `PageHead`. Когда использовать: - несколько панелей на одной странице с горизонтальным переключением; - контент грузится lazy по `value`. Связанные компоненты: - {@link NavSections} — сайдбар + секции; - {@link createLazyResolver} — кэш lazy-импортов; - `Section` — обёртка с заголовком страницы. API: декларативные `items`. Идентификатор — `value` (не `key`). Compound-слоты не используются. CSS-токены: `--shell-*`.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "const items = [\n  { value: \"members\", label: \"Участники\", badge: 12 },\n  { value: \"invites\", label: \"Приглашения\" },\n];\n\nconst resolveSection = createLazyResolver(\n  (v) => import(`./sections/${v}.tsx`),\n);\n\n<TabSections\n  items={items}\n  resolveSection={resolveSection}\n  value={tab}\n  onValueChange={setTab}\n  actions={<Button size=\"s\">Фильтр</Button>}\n/>"
+        }
+      ],
+      "props": [
+        {
+          "name": "items",
+          "type": "TabSectionsItem[]",
+          "description": "Горизонтальные вкладки. `value` пункта обычно = имя файла секции для `resolveSection`."
+        },
+        {
+          "name": "resolveSection",
+          "type": "(value: string) => LazyRouteChunk | React.ComponentType",
+          "description": "Резолвер панели по `value`. Обычно: `createLazyResolver((v) => import(\\`./sections/${v}.tsx\\`))`. Не нужен, если передали `children`."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Готовая панель без lazy (вместо `resolveSection`)."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Контролируемый активный `value`."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "description": "Начальный `value` (неконтролируемый режим)."
+        },
+        {
+          "name": "onValueChange",
+          "type": "(value: string) => void",
+          "description": "Смена вкладки (`next` = `item.value`)."
+        },
+        {
+          "name": "loading",
+          "type": "React.ReactNode",
+          "description": "Fallback для `<Suspense>`."
+        },
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Справа в ряду вкладок (фильтр, сортировка…)."
+        },
+        {
+          "name": "navLabel",
+          "type": "string",
+          "description": "`aria-label` для `<nav>` вкладок."
+        }
+      ]
+    },
+    {
+      "slug": "Text",
+      "title": "Text",
+      "description": "Короткий текст с тоном. Для пары title+description — {@link TextGroup}.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Text tone=\"muted\">Ничего не найдено</Text>"
+        }
+      ],
+      "props": [
+        {
+          "name": "tone",
+          "type": "TextTone",
+          "description": "Семантика цвета: default = `--shell-color`, muted = `--shell-color-muted`"
+        },
+        {
+          "name": "as",
+          "type": "\"p\" | \"span\" | \"div\" | \"label\" | \"strong\" | \"em\"",
+          "description": "HTML-тег"
+        }
+      ]
+    },
+    {
+      "slug": "TextGroup",
+      "title": "TextGroup",
+      "description": "Две строки текста: заголовок + приглушённая подпись. Роли: мета в строке списка (тенант + slug), без аватара. С аватаром — {@link AvatarName}.",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<TextGroup title=\"SHMEL\" description=\"wms-k8voao47\" />"
+        }
+      ],
+      "props": [
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Основная строка"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Подпись (email, slug…)"
+        },
+        {
+          "name": "size",
+          "type": "UiSize",
+          "description": "Размер типографики"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Доп. строки под подписью"
+        }
+      ]
+    },
+    {
+      "slug": "Toolbar",
+      "title": "Toolbar",
+      "description": "Ряд контролов одной высоты: поиск, поля, кнопки, меню. Роли: Toolbar = фильтры / действия над списком (`PageHead.children`). Иконки в карточке — `ActionGroup`. Размер: - CSS: `data-size` → `--control-height` / `--field-height` / `--button-height`; - JS: {@link useToolbar} (как {@link Dropdown}).",
+      "importFrom": "@elcrm/components",
+      "examples": [
+        {
+          "title": "Пример",
+          "code": "<Toolbar size=\"s\" align=\"end\" label=\"Фильтры\">\n  <Search value={q} onValue={setQ} />\n  <Button label=\"Создать\" />\n</Toolbar>"
+        }
+      ],
+      "props": [
+        {
+          "name": "size",
+          "type": "UiSize",
+          "description": "Общий размер: токены `data-size` + {@link useToolbar}. Явный `size` у ребёнка важнее контекста. @default \"s\""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "description": "Подпись для `aria-label`."
+        },
+        {
+          "name": "align",
+          "type": "ToolbarAlign",
+          "description": "Направление ряда (`justify-content`). @default \"start\""
+        },
+        {
+          "name": "width",
+          "type": "ToolbarWidth",
+          "description": "Ширина корня: `l` — `100%` (фильтры над списком), `s` — по контенту (компактный ряд, не растягивать). @default \"l\""
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Узлы тулбара (`*Field`, `Search`, `Button`, `Dropdown`, …). Размер — через контекст / CSS, не через cloneElement."
+        }
+      ]
+    }
+  ]
+}