elcrm 1.1.2 → 1.1.3

package/dist/vite/concat-css.js

@@ -1,9 +1,21 @@
 // src/vite/concat-css.ts
 import { readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+var SKIP_CSS = new Set([
+  "index.css",
+  "tokens.css",
+  "light.css",
+  "dark.css",
+  "themes.css"
+]);
 function concatDistCss(options) {
   const outFile = options.outFile ?? "index.css";
-  const files = readdirSync(options.distDir).filter((f) => f.endsWith(".css") && f !== outFile).sort();
+  const skip = new Set([
+    ...SKIP_CSS,
+    outFile,
+    ...options.skip ?? []
+  ]);
+  const files = readdirSync(options.distDir).filter((f) => f.endsWith(".css") && !skip.has(f)).sort();
   const css = files.map((f) => readFileSync(join(options.distDir, f), "utf8")).join(`
 `);
   const outPath = join(options.distDir, outFile);

package/dist/vite/postbuild.js

@@ -12,9 +12,21 @@ import { join as join2 } from "node:path";
 // src/vite/concat-css.ts
 import { readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+var SKIP_CSS = new Set([
+  "index.css",
+  "tokens.css",
+  "light.css",
+  "dark.css",
+  "themes.css"
+]);
 function concatDistCss(options) {
   const outFile = options.outFile ?? "index.css";
-  const files = readdirSync(options.distDir).filter((f) => f.endsWith(".css") && f !== outFile).sort();
+  const skip = new Set([
+    ...SKIP_CSS,
+    outFile,
+    ...options.skip ?? []
+  ]);
+  const files = readdirSync(options.distDir).filter((f) => f.endsWith(".css") && !skip.has(f)).sort();
   const css = files.map((f) => readFileSync(join(options.distDir, f), "utf8")).join(`
 `);
   const outPath = join(options.distDir, outFile);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "elcrm",
-  "version": "1.1.2",
-  "description": "CLI @elcrm/*: update, create, migrate front, audit, doctor, test, build, css",
+  "version": "1.1.3",
+  "description": "CLI @elcrm/*: update, create, migrate front/components, audit, doctor, test, build, css",
   "type": "module",
   "license": "MIT",
   "author": "MaSkal <dev@elcrm.online>",
@@ -47,8 +47,9 @@
     "build": "bun build ./src/index.ts --outdir ./dist --target bun --format esm && bun build ./src/vite/plugin-css-scoped.ts --outfile ./dist/vite/plugin-css-scoped.js --target node --format esm --packages external && bun build ./src/vite/discover-lib.ts --outfile ./dist/vite/discover-lib.js --target node --format esm --packages external && bun build ./src/vite/concat-css.ts --outfile ./dist/vite/concat-css.js --target node --format esm --packages external && bun build ./src/vite/check-tokens.ts --outfile ./dist/vite/check-tokens.js --target node --format esm --packages external && bun build ./src/vite/postbuild.ts --outfile ./dist/vite/postbuild.js --target node --format esm --packages external && node ./scripts/chmod-bin.mjs && node ./scripts/copy-vite-dts.mjs",
     "dev": "bun run ./src/index.ts",
     "elcrm": "bun run ./src/index.ts",
+    "test": "bun test src/lib/migrate",
     "link:local": "bun run build && bun link",
-    "prepublishOnly": "bun run build",
+    "prepublishOnly": "bun run test && bun run build",
     "publish:npm": "npm publish"
   },
   "keywords": [

package/templates/elcrm-cursor/AGENTS.md

@@ -6,7 +6,9 @@
 
 Корень UI: `Alert.Init` / `Modal.Init` / `Notice.Init` / `Form.Init` + `LoadRoute`. Кнопки `@elcrm/button`, поля `@elcrm/form`, модалки `Modal.Create`.
 
-Нельзя: native input/button, react-router, axios, MUI/antd/tailwind, `themes.css`, `size="sm"|"md"`.
+Свой компонент: JSDoc на русском (зачем, props, слоты, `@example`). Без него не сдавать.
+
+Нельзя: native input/button, react-router, axios, MUI/antd/tailwind, `themes.css`, `size="sm"|"md"`. Свой CSS — `var(--button-*)` / `--field-*` / `--item-*` из theme, не `#hex`.
 
 Перед сдачей: `elcrm test` (в panel — из корня). После смены пакетов: `elcrm update --fix --test`.
 

package/templates/elcrm-cursor/rules/elcrm-jsdoc.mdc

@@ -0,0 +1,89 @@
+---
+description: JSDoc у каждого компонента — props, слоты, пример
+globs: "**/*.{tsx,ts,jsx,js}"
+alwaysApply: false
+---
+
+# JSDoc компонентов (обязательно)
+
+У **каждого** React-компонента и публичной функции — блок JSDoc на русском **до** объявления. Без него компонент не считают законченным. Цель: по ховеру в IDE видно props, слоты, что рендерится.
+
+Не дублировать шпаргалку пакета (`docs/BUTTON.elCRM.md`) целиком — кратко + ссылка, если это обёртка над `@elcrm/*`.
+
+## Шаблон компонента
+
+```tsx
+/**
+ * Шапка приложения: слоты brand / nav / search / actions.
+ *
+ * @example
+ * <Header />
+ *
+ * Слоты (что можно передать):
+ * - brand — логотип (`Brand`)
+ * - nav — пункты (`Menu`)
+ * - search — `@elcrm/search`
+ * - actions — кнопки, `Avatar`, `Tooltip`
+ *
+ * @see Header из `@elcrm/components` — те же слоты
+ */
+export default function Header() { … }
+```
+
+## Шаблон с props
+
+Тип props — отдельный `type` / `interface`, каждое поле с `@param` **или** JSDoc на поле типа:
+
+```ts
+type Props = {
+  /** Логин для текста в теле модалки */
+  login?: string;
+  /** Закрытие; `Modal.Create` прокидывает сам */
+  onClose?: () => void;
+};
+
+/**
+ * Демо-модалка модуля Home.
+ *
+ * @param props.login - отображаемое имя
+ * @returns очередь `Modal.Create` → `{ Open, Icon }`
+ *
+ * @example
+ * Open({ login: "admin" })
+ */
+function Screen({ login }: Props) { … }
+```
+
+## Что обязательно описать
+
+| Тема | Как писать |
+| --- | --- |
+| Зачем компонент | первая строка |
+| Props | имя, тип в коде, смысл, default если не очевиден |
+| Слоты / children | что класть: `Button`, `StringField`, не «react node» |
+| Размер | `"s" \| "m" \| "l"` |
+| Роутер | какой ключ (`module`, `section`, `listTab`) |
+| Связь с пакетом | `@elcrm/form` поле, `@elcrm/button` `onSend` |
+| Токены | если кастомный CSS: какие `--*` |
+
+## Функции / хуки
+
+```ts
+/**
+ * Берёт ключ секции из роутера, только если он есть в списке модуля.
+ *
+ * @param value - `Router.useRouter("section")`
+ * @param keys - допустимые value секций
+ * @param fallback - секция по умолчанию
+ */
+export function pickRouteKey(value: unknown, keys: readonly string[], fallback: string): string
+```
+
+## Нельзя
+
+- Пустой `/** Header */` без props/слотов
+- JSDoc на английском в app (код и доки — русские)
+- Описывать внутренности пакета вместо его шпаргалки — для `@elcrm/button` достаточно «см. docs/BUTTON.elCRM.md», для **своей** обёртки — полный разбор слотов
+- Новый компонент в `src/` без JSDoc (в т.ч. `sections/*.tsx`, `modal/*.tsx`)
+
+При правке существующего компонента без JSDoc — **добавить блок сразу**, не ждать отдельной задачи.

package/templates/elcrm-cursor/rules/elcrm-lib.mdc

@@ -59,6 +59,7 @@ alwaysApply: true
 
 ### 1. Публичный API (компонент, хук, функция, тип, props)
 
+- [ ] JSDoc на русском у каждого экспорта: props, слоты, `@example`
 - [ ] Экспорт в `index` и `package.json` `exports`
 - [ ] `README.md` этого пакета
 - [ ] **Шпаргалка в elCRM.cli** (таблица выше) — те же можно/нельзя, что в README

package/templates/elcrm-cursor/rules/elcrm-packages.mdc

@@ -13,7 +13,7 @@ alwaysApply: true
 
 | Файл                     | Пакет                  | Делать так                                              |
 | ------------------------ | ---------------------- | ------------------------------------------------------- |
-| `CLI.elCRM.md`           | `elcrm`                | `update --fix --test`, migrate, test, css, docs, cursor |
+| `CLI.elCRM.md`           | `elcrm`                | `upd` (сам CLI), `update --fix --test`, docs, cursor |
 | `API.elCRM.md`           | `@elcrm/api`           | `Api.create` + `Api.query("router/method", body)`       |
 | `ALERT.elCRM.md`         | `@elcrm/alert`         | `<Alert.Init />`, `Alert.Send` / `Confirm`              |
 | `BUTTON.elCRM.md`        | `@elcrm/button`        | `<Button onSend>`, size s/m/l, не `<button>`            |
@@ -26,7 +26,7 @@ alwaysApply: true
 | `TOOLTIP.elCRM.md`       | `@elcrm/tooltip`       | `<Tooltip content>`, не `title`                         |
 | `ICONS.elCRM.md`         | `@elcrm/icons`         | `Icons.Line`, vite `icons()`, `icons update`            |
 | `FORM.elCRM.md`          | `@elcrm/form`          | поля + useForm, не native input                         |
-| `COMPONENTS.elCRM.md`    | `@elcrm/components`    | Layout/Header/Section/NavSections                       |
+| `COMPONENTS.elCRM.md`    | `@elcrm/components`    | Layout/Header/Section/Stack/NavSections; migrate components |
 | `SERVER.elCRM.md`        | `@elcrm/server`        | createServer + createRouter, не REST, не node:fs        |
 
 ## Корень приложения (panel)

package/templates/elcrm-cursor/rules/elcrm-theme.mdc

@@ -11,3 +11,4 @@ alwaysApply: false
 - Не класть `--*` в `modules/**/style.css`, если это цвет/размер оболочки.
 - Не `import "@elcrm/*/themes.css"`. Не shorthand `1px solid` в `--field-border-hover`.
 - Недостающие дефолты: `elcrm css` (уже заданные не затирает).
+- Кастомный UI — `var(--layout-*)` / `--button-*` / `--field-*` / `--item-*`, не новые цвета в модуле.

package/templates/elcrm-cursor/rules/elcrm-tokens.mdc

@@ -0,0 +1,40 @@
+---
+description: Кастомный UI — сначала токены @elcrm/*, не свои цвета и px
+globs: "**/*.{tsx,jsx,css}"
+alwaysApply: false
+---
+
+# Кастомные элементы → токены библиотек
+
+Свой блок/обёртка/CSS модуля — **не** новый `#hex` и не магические `14px`, если уже есть переменная пакета. Смотри `src/style/theme.css` + light/dark (их заполняет `elcrm css`).
+
+## Сначала существующий токен
+
+| Нужно | Брать из |
+| --- | --- |
+| Фон/текст/бордер страницы | `--layout-*`, `--section-*`, `--card-*` |
+| Шапка / подвал | `--header-*`, `--footer-*` |
+| Список / строка | `--list-*`, `--item-*` |
+| Кнопка | `--button-*` (variant + hover/active/disabled) |
+| Поле ввода | `--field-*`, `--popup-shadow` |
+| Меню / вкладки | `--menu-*`, `--nav-sections-*`, `--tab-sections-*` |
+| Тост / алерт / тултип | `--notice-*`, `--alert-*`, `--tooltip-*` |
+| Отступ стека | `--block-gap`, `--row-gap`, `--column-gap` |
+| Размер контрола | `s` / `m` / `l` у компонента, не свои px |
+
+В CSS: `color: var(--item-color)`, `padding: var(--card-padding)`, `border-radius: var(--card-radius)`.
+
+В inline-style допустимо только `var(--…)`, не литерал цвета.
+
+## Если токена нет
+
+1. Похожий из той же группы (`--item-background-hover` вместо нового `--my-hover`).
+2. Редко — объявить `--*` в theme (цвет в **light и dark**, геометрия в `theme.css`) и использовать `var()`.
+3. Не копировать значения из `node_modules/@elcrm/*/dist` в модуль.
+
+## Нельзя
+
+- Свой `style={{ color: "#333" }}` / `background: white`
+- Дублировать `--button-primary-bg` под другим именем
+- `themes.css` из пакета
+- shorthand `1px solid …` в `--field-border-hover|focus|error|disabled`

package/templates/elcrm-cursor/rules/elcrm-ui.mdc

@@ -37,5 +37,6 @@ src/style/theme*.css + elcrm.css
 
 ## CSS / запреты
 
+- Кастомный блок: `var(--токен)` из theme / `@elcrm/*` — правило `elcrm-tokens`. Не свой `#hex` и не случайные px.
 - Токены в theme, не `themes.css`, не `size="sm"|"md"`, не native input/select/textarea.
 - Border hover/focus полей — только цвет.

package/templates/elcrm-cursor/rules/elcrm.mdc

@@ -7,7 +7,7 @@ alwaysApply: true
 
 **Всегда** сверяйся со шпаргалками: `docs/*.elCRM.md` и `.cursor/docs/*.elCRM.md` (каталог пакетов — правило `elcrm-packages`). Не выдумывай методы. Обновить: `elcrm docs && elcrm cursor`.
 
-Комментарии и документация — **на русском**. Минимум зависимостей. Компоненты разделяй по обязанностям.
+Комментарии и документация — **на русском**. У каждого компонента — JSDoc (props, слоты, пример): правило `elcrm-jsdoc`. Минимум зависимостей. Компоненты разделяй по обязанностям.
 
 ## Стек
 

package/templates/elcrm-docs/CLI.elCRM.md

@@ -2,7 +2,7 @@
 
 # `elcrm` CLI
 
-Глобально: `bun i -g elcrm`. В приложении — после смены `@elcrm/*`:
+Глобально: `bun i -g elcrm` или `elcrm upd` (latest). В приложении — после смены `@elcrm/*`:
 
 ```bash
 elcrm update --fix --test
@@ -13,9 +13,10 @@ elcrm cursor
 
 | Команда | Зачем |
 | --- | --- |
-| `update [--dry] [--core] [--fix] [--test]` | latest `@elcrm/*`; `--fix` = migrate front + css; `--test` = elcrm test |
+| `upd` | сам CLI → latest (`bun i -g elcrm@latest`) |
+| `update [--dry] [--core] [--fix] [--test]` | latest `@elcrm/*` в проекте; `--fix` = migrate front + css; `--test` = elcrm test |
 | `create` / `init` | шаблоны `app` \| `lib` \| `panel` |
-| `migrate <name> [--dry]` | `front` (пакет), `form-aliases`, `form-tokens`, `size-sml`, `field-border`, `modal-create`, `legacy-hacks`, `socket-server` |
+| `migrate <name> [--dry]` | `front` (пакет), `form-aliases`, `form-tokens`, `components`, `size-sml`, `field-border`, `modal-create`, `legacy-hacks`, `socket-server` |
 | `audit [--fix]` | старые API; `--fix` = migrate front |
 | `doctor [--fix]` | стандарты; сервер --fix → `bunx elcrm-server update` |
 | `test [--front\|--server] [--no-scripts]` | статический анализ + scripts |

package/templates/elcrm-docs/COMPONENTS.elCRM.md

@@ -2,67 +2,72 @@
 
 # `@elcrm/components`
 
-Shell UI: оболочка страницы, шапка, секции, списки. **Цвета и размеры задаёт приложение** (`theme.css` + `theme-light` / `theme-dark`). Fallback в пакете нет. `elcrm css` дописывает недостающие токены.
+Shell UI: оболочка, шапка, секции, списки, Dropdown / RadioGroup / Pricing* / Avatar* / Breadcrumb / Stack.  
+**Цвета и размеры задаёт приложение** (`theme.css` + `theme-light` / `theme-dark`). Fallback в пакете нет.
+
+Токены как у form: сначала общие **`--shell-*`** (+ `--control-*`, `--popup-shadow`), потом узкие (`--header-height`, `--section-padding`, `--avatar-size-*`, …).  
+Дефолты подтягивает `elcrm css` из `@elcrm/components/tokens.css` + `light.css` / `dark.css`.
+
+Группы — через `items` / `groups`, идентификатор пункта — **`value`**.
 
 ```ts
 import {
-  Layout, Header, Footer, Brand, Avatar, Badge,
-  Menu, Section, NavSections, TabSections,
-  Card, List, Item, Block, Row, Column,
-  Loading, EmptyState, createLazyResolver,
+  Layout, Header, Footer, Brand, Avatar, AvatarName, AvatarGroup, Badge,
+  Menu, Dropdown, Section, NavSections, TabSections, Breadcrumb, Stack,
+  Card, List, Item, PageHead, PageShell,
+  Loading, EmptyState, RadioGroup, PricingGroup, PricingTable,
+  createLazyResolver,
 } from "@elcrm/components";
+import type { PricingPlan } from "@elcrm/components";
 ```
 
-Точечно: `import { Header } from "@elcrm/components/Header"`.
+## Роли layout
 
-## Компоненты
+- **PageShell** — каркас модуля (скролл + footer).
+- **PageHead** — title + actions.
+- **Section** — блок контента / auth.
+- **Layout / Header** — оболочка приложения.
+- **Stack** — ряд/колонка (`direction="row"|"column"`). Не `Block` / `Row` / `Column`.
 
-| | Назначение | Ключевые props |
-| --- | --- | --- |
-| Layout | страница | `header`, `footer`, `children` |
-| Header | слоты шапки | `brand`, `nav`, `search`, `actions` |
-| Footer | подвал | `children` |
-| Brand | логотип | `as`, `onClick` |
-| Avatar | фото / инициалы | `src`, `name`, `size` (`s`/`m`/`l`) |
-| Badge | статус | `tone` |
-| Menu | нав (не overlay) | `items`, `activeKey`, `onSelect` |
-| Section | блок / auth | `title`, `description`, `icon`, `actions`, `variant` |
-| NavSections | сайдбар + lazy | `groups`, `resolveSection` |
-| TabSections | вкладки + lazy | `items`, `resolveSection` |
-| Card / List / Item | карточка, список | Item: `as`, `active` |
-| Block / Row / Column | стеки | `gap` |
-| Loading / EmptyState | плейсхолдеры | |
-| createLazyResolver | кэш `import()` | `(key) => import(…)` |
+## Меню
 
-Слоты Header заполняет приложение: поиск `@elcrm/search`, кнопки `@elcrm/button`, иконки `@elcrm/icons`.
+- **Menu** — inline-навигация в шапке.
+- **Dropdown** — выпадающее меню по `items`/`groups`.
+- **`@elcrm/overlay`** — portal / позиционирование / z-stack для своих попапов.
 
-## Структура приложения (panel)
+## Avatar
 
-```
-src/
-  App.tsx                 # Init: Alert, Modal, Notice, Form, LoadRoute
-  pages/Auth.tsx Main.tsx
-  modules/<Name>/
-    index.tsx
-    router.sections.ts
-    sections/<Key>.tsx    # export default
-    modal/                # опционально
-  component/              # локальные обёртки (Header приложения)
-  style/theme.css theme-light.css theme-dark.css elcrm.css
-```
+- **Avatar** — фото / инициалы (`name` только для инициалов).
+- **AvatarName** — `title` + `description` (+ `name` для инициалов).
+- **AvatarGroup** — `items` с `value` / `title` / `name` / `src`.
+
+## Pricing
 
-- Секции: `createLazyResolver((key) => import(\`./sections/${key}.tsx\`))`.
-- Ключи роутера не смешивать (`section` vs `listTab` vs `accountTab`) — иначе lazy откроет не ту секцию.
-- Auth-экран: `<Section variant="auth">`, поля из `@elcrm/form`, submit через `@elcrm/button` `onSend`.
+Один тип `PricingPlan` и один массив `plans` → и `PricingGroup`, и `PricingTable` (+ `sections` у Table).
 
 ## Можно
 
-Токены только в theme-файлах приложения. Импорт `@elcrm/components/style.css` — опционально (единый файл).
+- Задать `--shell-color` / `--shell-padding` / `--shell-radius` один раз — большинство компонентов подхватят.
+- `--popup-shadow` общий с `@elcrm/form`.
+- `elcrm css` — недостающие `--shell-*`.
+- Импорт `@elcrm/components/style.css` — опционально.
 
 ## Нельзя
 
-- `import "@elcrm/…/themes.css"` — пакеты больше не отдают темы.
-- Свои `<button>` / нативные инпуты вместо `@elcrm/button` / `@elcrm/form` в UI приложения.
-- `size="sm"|"md"` → `"s"|"m"` (`elcrm migrate size-sml`).
-- Дублировать toolbar-токены в модульных CSS — общий класс + theme.
-- Хардкодить цвета в компонентах модулей, если есть токен.
+- `import "@elcrm/…/themes.css"`.
+- `Block` / `Row` / `Column` — `Stack` (`elcrm migrate components`).
+- `key` / `activeKey` / `defaultActiveKey` в группах — `value` / `defaultValue` (`elcrm migrate components`).
+- Нативные `<button>` / инпуты вместо `@elcrm/button` / `@elcrm/form` в приложении.
+- `size="sm"|"md"` → `"s"|"m"`.
+- Хардкод цветов в модулях приложения, если есть токен.
+
+## Обновление проекта
+
+```bash
+elcrm update --fix --test
+elcrm css
+elcrm docs
+elcrm cursor
+```
+
+Пилюля: `elcrm migrate components` (также внутри `migrate front` / `update --fix`).

package/templates/panel/web/src/App.tsx

@@ -6,11 +6,25 @@ import { Form } from "@elcrm/form";
 import { LoadRoute } from "@elcrm/router";
 import { createLazyResolver } from "./lazyRoute";
 
-/** Страницы: src/pages/Auth.tsx, Main.tsx */
 const resolvePage = createLazyResolver((segment) =>
   import(`./pages/${segment}.tsx`),
 );
 
+/**
+ * Корень UI: глобальные Init пакетов + страница (`LoadRoute` variant=`page`).
+ *
+ * Init (по одному):
+ * - `Alert.Init` — диалоги
+ * - `Modal.Init` — очередь модалок (`Modal.Create` / Open)
+ * - `Notice.Init` — тосты (`position`, `durationMs`, `maxVisible`)
+ * - `Notifications.Init` — inbox (без autoSync в демо)
+ * - `Form.Init` — `onNotice` → `Notice.Remark`
+ *
+ * Страницы: `src/pages/{Auth|Main}.tsx`, default `Main`.
+ *
+ * @example
+ * <App />
+ */
 export default function App() {
   return (
     <>

package/templates/panel/web/src/component/Header.tsx

@@ -13,7 +13,20 @@ import { Search } from "@elcrm/search";
 import useStateData from "../state";
 import { getTheme, toggleTheme, type ThemeMode } from "../lib/theme";
 
-/** Шапка panel на слотах @elcrm/components */
+/**
+ * Шапка panel: слоты `@elcrm/components` `Header`.
+ *
+ * Слоты:
+ * - `brand` — `Brand`, клик → модуль `Home`
+ * - `nav` — `Menu` (`value` = `Router.module`: Home | List | Account | Settings)
+ * - `search` — `@elcrm/search`
+ * - `actions` — тема (`Button` ghost), `Avatar` → Account, выход (`Alert.Send`)
+ *
+ * Роутер: ключ `module`. Тема: `lib/theme` + localStorage.
+ *
+ * @example
+ * <Layout header={<Header />} />
+ */
 export default function Header() {
   const { user } = useStateData(["user"]);
   const module = Router.useRouter("module");
@@ -48,13 +61,13 @@ export default function Header() {
       }
       nav={
         <Menu
-          activeKey={String(module || "Home")}
+          value={String(module || "Home")}
           onSelect={onTab}
           items={[
-            { key: "Home", label: "Главная" },
-            { key: "List", label: "Список" },
-            { key: "Account", label: "Аккаунт" },
-            { key: "Settings", label: "Настройки" },
+            { value: "Home", label: "Главная" },
+            { value: "List", label: "Список" },
+            { value: "Account", label: "Аккаунт" },
+            { value: "Settings", label: "Настройки" },
           ]}
         />
       }

package/templates/panel/web/src/lazyRoute.ts

@@ -1,3 +1,9 @@
+/**
+ * Реэкспорт `createLazyResolver` — кэш `import()` для LoadRoute / NavSections / TabSections.
+ *
+ * @example
+ * const resolve = createLazyResolver((key) => import(`./sections/${key}.tsx`));
+ */
 export {
   createLazyResolver,
   type LazyRouteChunk,

package/templates/panel/web/src/lib/routeKey.ts

@@ -1,4 +1,11 @@
-/** Ключ вкладки/секции только если он есть в списке модуля */
+/**
+ * Ключ вкладки/секции из роутера, только если он есть в списке модуля.
+ * Иначе после смены модуля откроется чужой lazy-чанк.
+ *
+ * @param value - `Router.useRouter("section" | "listTab" | "accountTab")`
+ * @param keys - допустимые `value` из router.sections
+ * @param fallback - секция по умолчанию
+ */
 export function pickRouteKey(
   value: unknown,
   keys: readonly string[],

package/templates/panel/web/src/lib/theme.ts

@@ -1,9 +1,14 @@
-/** Тема panel: localStorage + data-theme на html/body */
-
+/**
+ * Тема panel: `data-theme` на html/body + localStorage `elcrm-panel-theme`.
+ * Цвета — `theme-light.css` / `theme-dark.css`.
+ */
 export type ThemeMode = "dark" | "light";
 
 const STORAGE_KEY = "elcrm-panel-theme";
 
+/**
+ * Текущая тема (`dark`, если ключа нет).
+ */
 export function getTheme(): ThemeMode {
   try {
     const v = localStorage.getItem(STORAGE_KEY);
@@ -14,7 +19,11 @@ export function getTheme(): ThemeMode {
   return "dark";
 }
 
-/** Применить тему к документу */
+/**
+ * Ставит `data-theme` и `color-scheme` на document.
+ *
+ * @param theme - `light` | `dark`, по умолчанию `getTheme()`
+ */
 export function applyTheme(theme: ThemeMode = getTheme()): void {
   const root = document.documentElement;
   const body = document.body;
@@ -23,6 +32,9 @@ export function applyTheme(theme: ThemeMode = getTheme()): void {
   root.style.colorScheme = theme;
 }
 
+/**
+ * Сохранить тему и применить к DOM.
+ */
 export function setTheme(theme: ThemeMode): void {
   try {
     localStorage.setItem(STORAGE_KEY, theme);
@@ -32,6 +44,11 @@ export function setTheme(theme: ThemeMode): void {
   applyTheme(theme);
 }
 
+/**
+ * Переключить light ↔ dark.
+ *
+ * @returns новая тема
+ */
 export function toggleTheme(): ThemeMode {
   const next: ThemeMode = getTheme() === "dark" ? "light" : "dark";
   setTheme(next);

package/templates/panel/web/src/modules/Account/index.tsx

@@ -8,17 +8,21 @@ import { Router } from "@elcrm/router";
 import { pickRouteKey } from "../../lib/routeKey";
 import { ACCOUNT_TAB_DEFAULT, ACCOUNT_TABS } from "./router.sections";
 
-/** Lazy: modules/Account/sections/{Key}.tsx */
-const resolveSection = createLazyResolver((key) =>
-  import(`./sections/${key}.tsx`),
+const resolveSection = createLazyResolver((value) =>
+  import(`./sections/${value}.tsx`),
 );
 
-const ACCOUNT_KEYS = ACCOUNT_TABS.map((t) => t.key);
+const ACCOUNT_KEYS = ACCOUNT_TABS.map((t) => t.value);
 
-/** Модуль «Аккаунт»: Section (заголовок) + горизонтальные вкладки */
+/**
+ * Аккаунт: `Section` + `TabSections`.
+ *
+ * Роутер: ключ `accountTab` (не смешивать с `section` / `listTab`).
+ * Секции: `sections/{Value}.tsx`.
+ */
 export default function Account() {
   const tab = Router.useRouter("accountTab");
-  const activeKey = pickRouteKey(tab, ACCOUNT_KEYS, ACCOUNT_TAB_DEFAULT);
+  const value = pickRouteKey(tab, ACCOUNT_KEYS, ACCOUNT_TAB_DEFAULT);
 
   return (
     <Section
@@ -28,8 +32,8 @@ export default function Account() {
     >
       <TabSections
         items={ACCOUNT_TABS}
-        activeKey={activeKey}
-        onChange={(key) => Router.setRouter("accountTab", key)}
+        value={value}
+        onValueChange={(next) => Router.setRouter("accountTab", next)}
         resolveSection={resolveSection}
         loading={<Loading />}
         navLabel="Разделы аккаунта"

package/templates/panel/web/src/modules/Account/router.sections.ts

@@ -1,9 +1,11 @@
 import type { TabSectionsItem } from "@elcrm/components";
 
-/** Вкладки модуля Account (ключ = файл sections/{Key}.tsx) */
+/**
+ * Вкладки Account. `value` = `sections/{Value}.tsx`.
+ */
 export const ACCOUNT_TABS: TabSectionsItem[] = [
-  { key: "Profile", label: "Профиль" },
-  { key: "Sessions", label: "Сессии", badge: 1 },
+  { value: "Profile", label: "Профиль" },
+  { value: "Sessions", label: "Сессии", badge: 1 },
 ];
 
 export const ACCOUNT_TAB_DEFAULT = "Profile";

package/templates/panel/web/src/modules/Account/sections/Profile.tsx

@@ -1,12 +1,17 @@
 import React from "react";
-import { Card, Column } from "@elcrm/components";
+import { Card, Stack } from "@elcrm/components";
 import { Api } from "@elcrm/api";
 import { Button } from "@elcrm/button";
 import { Notice } from "@elcrm/notice";
 import { DisplayField, EmailField, StringField, useForm } from "@elcrm/form";
 import useStateData from "../../../state";
 
-/** Вкладка: профиль */
+/**
+ * Вкладка аккаунта: профиль.
+ *
+ * Поля: `DisplayField` login, `StringField` display_name, `EmailField` email.
+ * Сохранение: `Button` → `Api.query("auth/profile")` + `loadUser()`.
+ */
 export default function Profile() {
   const { user, loadUser } = useStateData(["user", "loadUser"]);
   const form = useForm({
@@ -45,7 +50,7 @@ export default function Profile() {
 
   return (
     <Card style={{ maxWidth: "28rem" }}>
-      <Column gap="0.75rem">
+      <Stack gap="0.75rem">
         <DisplayField
           name="login"
           form={form}
@@ -69,7 +74,7 @@ export default function Profile() {
           disabled={busy}
           onClick={() => void onSave()}
         />
-      </Column>
+      </Stack>
     </Card>
   );
 }