@elcrm/components 0.2.11 → 0.2.13

package/dist/kit-manifest.json

@@ -1,1523 +0,0 @@
-{
-  "format": "elcrm-kit-manifest-v1",
-  "package": "@elcrm/components",
-  "version": "0.2.11",
-  "pkg": "components",
-  "generatedAt": "2026-08-23T09:13:24.421Z",
-  "components": [
-    {
-      "slug": "ActionGroup",
-      "title": "ActionGroup",
-      "description": "Ряд действий в строке списка / карточке (`role=\"toolbar\"`). Роли: тулбар иконок справа в Card. Кнопки — `@elcrm/button` / свои слоты, не нативный `<button>` в приложении.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<ActionGroup\n  label=\"Действия: Иван\"\n  items={[\n    <Button key=\"edit\" variant=\"ghost\" onClick={edit}>Изменить</Button>,\n    <Button key=\"del\" variant=\"ghost\" onClick={remove}>Удалить</Button>,\n  ]}\n/>\n\n<ActionGroup label=\"Ещё\">\n  <Button variant=\"ghost\">Копировать</Button>\n</ActionGroup>"
-        }
-      ],
-      "props": [
-        {
-          "name": "label",
-          "type": "string",
-          "description": "Подпись тулбара (`aria-label`)"
-        },
-        {
-          "name": "items",
-          "type": "React.ReactNode[]",
-          "description": "Кнопки массивом узлов"
-        },
-        {
-          "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» и опциональной кнопкой добавления. Когда использовать: - участники задачи / канала / сделки в одну строку; - нужно ограничить видимое число (`max`) и добавить «+». Связанные компоненты: - {@link Avatar} — одиночный аватар; - {@link AvatarName} — аватар с текстовой подписью (`title` / `description`). API: декларативные `items`. Идентификатор предпочтительно `value` (не `key`). Compound-слоты не используются. CSS-токены: `--avatar-group-*`, размеры из `--avatar-size-*`.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "const items = [\n  { value: \"u1\", name: \"Иван Петров\", src: \"/u/1.jpg\", status: \"online\" },\n  { value: \"u2\", name: \"Мария Смирнова\" },\n  { value: \"u3\", name: \"Алексей\" },\n];\n\n<AvatarGroup\n  items={items}\n  max={5}\n  size=\"m\"\n  add\n  onAdd={() => openInvite()}\n  onItemClick={(item) => openProfile(item.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": "onItemClick",
-          "type": "(item: AvatarGroupItem, index: number) => void",
-          "description": "Клик по аватару."
-        }
-      ]
-    },
-    {
-      "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": "Block",
-      "title": "Block",
-      "description": "Block",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "// Было:\n<Block row gap={8}>…</Block>\n// Стало:\n<Stack direction=\"row\" gap={8}>…</Stack>"
-        }
-      ],
-      "props": [
-        {
-          "name": "row",
-          "type": "boolean",
-          "description": "@deprecated Используйте `<Stack direction=\"row\">`. Если `true` — горизонтальный стек."
-        }
-      ]
-    },
-    {
-      "slug": "Brand",
-      "title": "Brand",
-      "description": "Название / логотип в шапке. Роли: Brand = кликабельный или статичный бренд в Header; рендерится как `button` (по умолчанию), `a` или `strong`.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<Header brand={<Brand as=\"a\" href=\"/\">elCRM</Brand>} />"
-        }
-      ],
-      "props": [
-        {
-          "name": "as",
-          "type": "\"button\"",
-          "description": "Тег: кнопка (по умолчанию)"
-        },
-        {
-          "name": "as",
-          "type": "\"strong\"",
-          "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  onItemClick={(item) => navigate(item.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": "onItemClick",
-          "type": "(item: BreadcrumbItem, index: number) => void",
-          "description": "Клик по пункту (кроме текущего и disabled)."
-        }
-      ]
-    },
-    {
-      "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": "Column",
-      "title": "Column",
-      "description": "Column",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "// Было:\n<Column gap={12}>…</Column>\n// Стало:\n<Stack gap={12}>…</Stack>"
-        }
-      ],
-      "props": []
-    },
-    {
-      "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  onSelect={(value) => console.log(value)}\n/>"
-        }
-      ],
-      "props": [
-        {
-          "name": "items",
-          "type": "DropdownItem[]",
-          "description": "Плоский декларативный список пунктов. Для секций с разделителями используйте `groups`."
-        },
-        {
-          "name": "groups",
-          "type": "DropdownGroup[]",
-          "description": "Секции с разделителями между ними."
-        },
-        {
-          "name": "trigger",
-          "type": "React.ReactNode",
-          "description": "Кастомный триггер; иначе кнопка из `label`."
-        },
-        {
-          "name": "label",
-          "type": "React.ReactNode",
-          "description": "Текст встроенного триггера."
-        },
-        {
-          "name": "hideChevron",
-          "type": "boolean",
-          "description": "Скрыть chevron у встроенного триггера."
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode",
-          "description": "Заголовок панели (если не задан в `groups[].title`)."
-        },
-        {
-          "name": "align",
-          "type": "\"start\" | \"end\"",
-          "description": "Выравнивание панели относительно триггера."
-        },
-        {
-          "name": "placement",
-          "type": "\"auto\" | \"top\" | \"bottom\"",
-          "description": "Куда открывать панель. Футер Sidebar передаёт `top`. @default \"auto\""
-        },
-        {
-          "name": "open",
-          "type": "boolean",
-          "description": "Контролируемое открытие."
-        },
-        {
-          "name": "defaultOpen",
-          "type": "boolean",
-          "description": "Начальное открытие (неконтролируемый режим)."
-        },
-        {
-          "name": "onOpenChange",
-          "type": "(open: boolean) => void",
-          "description": "Колбэк смены open."
-        },
-        {
-          "name": "closeOnSelect",
-          "type": "boolean",
-          "description": "Закрывать панель после выбора. Для checkbox обычно `false`."
-        },
-        {
-          "name": "disabled",
-          "type": "boolean",
-          "description": "Заблокировать триггер."
-        },
-        {
-          "name": "size",
-          "type": "UiSize",
-          "description": "Высота встроенного триггера (`--control-height`). Внутри {@link Toolbar} берётся из тулбара, если не задан."
-        },
-        {
-          "name": "onSelect",
-          "type": "(value: string, item: DropdownItem) => void",
-          "description": "Выбор пункта: `value` + сам item."
-        }
-      ]
-    },
-    {
-      "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": "Выбранный год. `null` — «последний год» (как в ответе сервера). Контролируемый режим: вместе с `onYearChange`."
-        },
-        {
-          "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": "Единицы для склонения счётчиков."
-        }
-      ]
-    },
-    {
-      "slug": "Item",
-      "title": "Item",
-      "description": "Элемент списка / строки меню: кнопка, ссылка или `<li>`. Роли: Item внутри List / Menu; для групповых списков выбора — RadioGroup / Dropdown с `items` (не собирайте Item вручную).",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<List>\n  <Item as=\"li\" active>Текущий</Item>\n  <Item as=\"button\" variant=\"card\" active>Карточка</Item>\n</List>"
-        }
-      ],
-      "props": [
-        {
-          "name": "as",
-          "type": "\"button\"",
-          "description": "Тег: кнопка (по умолчанию)"
-        },
-        {
-          "name": "as",
-          "type": "\"a\"",
-          "description": "Тег: ссылка"
-        },
-        {
-          "name": "as",
-          "type": "\"li\"",
-          "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} onSelect={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. Когда использовать: - горизонтальная/вертикальная навигация в layout; - нужно подсветить текущий раздел по `value`. Связанные компоненты: - {@link Dropdown} — выпадающая панель рядом с триггером; - {@link Popover} / {@link Dropdown} — панель в portal; - {@link NavSections} / {@link TabSections} — разделы с lazy-контентом. API: декларативные `items` (идентификатор — `value`). Compound-слоты не используются.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "const items = [\n  { value: \"home\", label: \"Главная\" },\n  { value: \"team\", label: \"Команда\", badge: 3 },\n];\n\n<Menu\n  items={items}\n  value={section}\n  onSelect={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": "onSelect",
-          "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    label: \"Документация\",\n    items: [\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      { value: \"auth\", label: \"Авторизация VK\" },\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\\`))`."
-        },
-        {
-          "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} onSelect={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-колонка рядом со списком. Узкий (`max-width: 56rem`) — поверх контента с затемнением и `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": "Открыта ли панель."
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode",
-          "description": "Заголовок шапки."
-        },
-        {
-          "name": "onClose",
-          "type": "() => void",
-          "description": "Закрытие: крестик / фон / Escape."
-        },
-        {
-          "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}. Инлайн-навигация — {@link Menu} (не путать). Бывший `@elcrm/overlay` `Menu` — этот компонент (`Popover`).",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<Popover\n  trigger={<Button>Ещё</Button>}\n  label=\"Действия\"\n  align=\"end\"\n>\n  <List>\n    <Item as=\"button\">Скачать</Item>\n  </List>\n</Popover>"
-        }
-      ],
-      "props": [
-        {
-          "name": "trigger",
-          "type": "React.ReactNode",
-          "description": "Якорь (кнопка / иконка)"
-        },
-        {
-          "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 панели"
-        },
-        {
-          "name": "panelClassName",
-          "type": "string",
-          "description": "Класс панели (portal)"
-        }
-      ]
-    },
-    {
-      "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": "Row",
-      "title": "Row",
-      "description": "Row",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "// Было:\n<Row gap={8}>…</Row>\n// Стало:\n<Stack direction=\"row\" gap={8}>…</Stack>"
-        }
-      ],
-      "props": []
-    },
-    {
-      "slug": "Section",
-      "title": "Section",
-      "description": "Единая секция страницы: заголовок, описание, иконка, контент, действия. Роли: Section = блок модуля / панель / auth-карточка; для строки «title + actions» на странице — PageHead; каркас со скроллом — PageShell.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<Section title=\"Настройки\" description=\"Профиль и безопасность\" variant=\"page\">\n  <Stack gap={16}>…</Stack>\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": "Блок действий (кнопки под контентом или в шапке)"
-        },
-        {
-          "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": "as",
-          "type": "\"section\" | \"main\" | \"div\"",
-          "description": "HTML-тег корня (`main` / `section` / `div`)"
-        }
-      ]
-    },
-    {
-      "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  onSelect={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  onFooterSelect={(value) => console.log(value)}\n  version=\"v 0.2.26\"\n/>"
-        }
-      ],
-      "props": [
-        {
-          "name": "groups",
-          "type": "SidebarGroup[]",
-          "description": "Группы пунктов (`value` + `items`)"
-        },
-        {
-          "name": "items",
-          "type": "SidebarGroup[]",
-          "description": "То же, что `groups` (совместимость)"
-        },
-        {
-          "name": "value",
-          "type": "string",
-          "description": "Текущий пункт"
-        },
-        {
-          "name": "onSelect",
-          "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": "onFooterSelect",
-          "type": "(value: string, item: DropdownItem) => void",
-          "description": "Выбор пункта меню аккаунта"
-        },
-        {
-          "name": "footerMenuLabel",
-          "type": "string",
-          "description": "`aria-label` панели меню аккаунта"
-        },
-        {
-          "name": "version",
-          "type": "React.ReactNode",
-          "description": "Версия под футером"
-        }
-      ]
-    },
-    {
-      "slug": "Stack",
-      "title": "Stack",
-      "description": "Универсальный стек (ряд / колонка) с отступами между детьми. Роли: Stack = базовая раскладка; заменяет устаревшие Block / Row / Column. Внутри 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": "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\\`))`."
-        },
-        {
-          "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": "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`. Пакет не зависит от `@elcrm/form` / `@elcrm/button`: размер уходит пропом `size` и токенами `--field-height` / `--button-height-*`.",
-      "importFrom": "@elcrm/components",
-      "examples": [
-        {
-          "title": "Пример",
-          "code": "<Toolbar size=\"s\" align=\"end\" label=\"Фильтры\">\n  <Search value={q} onValue={setQ} />\n  <Button label=\"Создать\" />\n</Toolbar>\n<Toolbar width=\"s\" align=\"center\">\n  <Button label=\"Отмена\" />\n  <Button label=\"Сохранить\" />\n</Toolbar>"
-        }
-      ],
-      "props": [
-        {
-          "name": "size",
-          "type": "UiSize",
-          "description": "Общий размер вложенных Field / Search / Button / Dropdown / Badge. Явный `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`, …). Компонентам без `size` прокидывается размер тулбара."
-        }
-      ]
-    }
-  ]
-}