elcrm 1.1.15 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elcrm",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "CLI @elcrm/*: doctor --fix (порядок проекта), update, css, docs, cursor, migrate",
   "type": "module",
   "license": "MIT",

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

@@ -14,7 +14,7 @@ Shell UI: оболочка, шапка, секции, списки, Dropdown / R
 import {
   Layout, Header, Footer, Brand, Avatar, AvatarName, AvatarGroup, Badge,
   Menu, Dropdown, Section, NavSections, TabSections, Breadcrumb, Stack,
-  Card, Stat, ActionGroup, TextGroup, ItemColumn, List, Item, PageHead, PageShell, Sidebar, Popover,
+  Card, Stat, ActionGroup, TextGroup, ItemColumn, List, Item, PageHead, PageShell, ChatList, ChatMessages, ChatSplit, Sidebar, Popover,
   Loading, EmptyState, RadioGroup, PricingGroup, PricingTable,
   createLazyResolver,
 } from "@elcrm/components";
@@ -24,10 +24,13 @@ import type { PricingPlan } from "@elcrm/components";
 ## Роли layout
 
 - **PageShell** — каркас модуля (`scroll` в body + footer). `scroll={false}` — без внутреннего скролла.
+- **ChatList** — колонка диалогов: слоты `header` / `footer`, `children` = `List` + `Item`. Токены `--chat-list-width`, `--chat-*` (алиасы `--shell-*`).
+- **ChatMessages** — колонка переписки. `bodyRef` / `onBodyScroll`. Паддинги `--chat-messages-*-padding`.
+- **ChatSplit** — ряд `list` + `messages` (`--chat-split-gap`).
 - **PageHead** — title + actions. `sup` — текст или Badge сразу после title (надстрочно; `0` скрыт). `sticky` — шапка прилипает к верху скролла (фон `--shell-bg`). `children` — фильтры/поиск под заголовком, отступ `--shell-gap`.
 - **Section** — блок контента / auth.
-- **Layout / Header** — оболочка приложения. `Layout sidebar={<Sidebar />}` — ряд: меню слева + контент.
-- **Sidebar** — левое меню. `variant="cards"` (карточки) или `"plain"` (плоский backoffice). `groups` + `value`. Слоты: `brand`, `extra`, `footer`. Пункты: `--sidebar-item-font-size`, `--sidebar-item-padding`, `--sidebar-icon-size`, `--sidebar-group-font-size`. Не наследуют `body` 18px (`Item` `font: inherit` перебит).
+- **Layout / Header** — оболочка приложения. `Layout sidebar={<Sidebar />}` — ряд: меню слева + контент. `fixed={["header", "footer", "sidebar"]}` (по умолчанию) — эти слоты не скроллятся, крутится только `children`. `fixed={[]}` — поток страницы. Высота каркаса: `--layout-height` (`100dvh`).
+- **Sidebar** — левое меню. `variant="cards"` (карточки) или `"plain"` (плоский backoffice). `groups` + `value`. Слоты: `brand`, `extra`, `footer`. Меню аккаунта: `footerItems` (как у Dropdown) + `onFooterSelect` — клик по `footer` открывает панель, справа ⋮. Пункты: `--sidebar-item-font-size`, `--sidebar-item-padding`, `--sidebar-icon-size`, `--sidebar-group-font-size`. Не наследуют `body` 18px (`Item` `font: inherit` перебит).
 - **Stack** — ряд/колонка/сетка (`direction="row"|"column"|"grid"`). Не `Block` / `Row` / `Column`. Сетка: `auto-fit` + `--stack-grid-min`, либо `columns={4}` / `columns={["1fr", "100px", "auto"]}`. С `columns` ряды `stretch` (карточки не наезжают); в одну линию — `style={{ alignItems: "center" }}`. Не `height: 100%` у детей сетки.
 - **Card** — курсор: `--card-pointer` (`auto` / `pointer`). Сетка Stack: `--stack-grid-min`.
 - **Stat** — метрика: `label` + `value`, `tone` как у Badge, `labelMuted`. Не собирать из `span` в приложении.
@@ -55,6 +58,8 @@ import type { PricingPlan } from "@elcrm/components";
 
 ## Можно
 
+- `--layout-height` — высота каркаса `Layout` при `fixed` (по умолчанию `100dvh`).
+- Узкие токены (`--chat-*`, `--sidebar-*`, `--item-column-*`) по умолчанию = `--shell-*`. Переопределяй только отличие.
 - Задать `--shell-color` / `--shell-padding` / `--shell-radius` один раз — большинство компонентов подхватят.
 - `--popup-shadow` общий с `@elcrm/form`.
 - `elcrm css` — недостающие `--shell-*`.

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

@@ -23,7 +23,7 @@ const form = useForm({ login: "", password: "" });
 
 Канонические поля: `StringField`, `PasswordField`, `TextareaField`, `NumberField`, `PercentField`, `MoneyField`, `MaskField`, `PhoneField`, `EmailField`, `UrlField`, `DateField`, `TimeField`, `SelectField`, `OptionsField`, `ModalField`, `RangeField`, `CheckField`, `RadioField`, `TagsField`, `RatingField`, `CodeField`, `FileField`, `DragDropField`, `RichTextField`, `ColorField`, `HiddenField`, `DisplayField`, `SearchField`, `TabsField`.
 
-`before` / `after` — слоты (иконки). Размеры: `"s"` | `"m"` | `"l"`, не `sm`/`md`.
+`disabled`, `size` (`"s"` | `"m"` | `"l"`) — у всех видимых `*Field` (кроме `HiddenField`).
 
 `PasswordField`: `generate` — кнопка случайного пароля. `true` → `Az09#` (A–Z, a–z, 0–9, символы). `generate="A"` только заглавные, `"59"` цифры 5–9, `"#"` только символы. Длина — `maxLength` или 12.
 

package/templates/orbit/src/style/theme-dark.css

@@ -127,7 +127,7 @@ body[data-theme="dark"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
-  --shell-bg: var(--bg);
+  --shell-bg: var(--shell-background-muted);
   --sidebar-block-bg: var(--shell-background);
   --sidebar-block-border: var(--shell-border);
   --sidebar-block-shadow: none;
@@ -145,4 +145,7 @@ body[data-theme="dark"] {
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
+
+  --chat-background: var(--shell-background);
+  --chat-border: 1px solid var(--shell-border);
 }

package/templates/orbit/src/style/theme-light.css

@@ -127,7 +127,7 @@ body[data-theme="light"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
-  --shell-bg: var(--bg);
+  --shell-bg: var(--shell-background-muted);
   --sidebar-block-bg: var(--shell-background);
   --sidebar-block-border: var(--shell-border);
   --sidebar-block-shadow: none;
@@ -145,4 +145,7 @@ body[data-theme="light"] {
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
+
+  --chat-background: var(--shell-background);
+  --chat-border: 1px solid var(--shell-border);
 }

package/templates/orbit/src/style/theme.css

@@ -78,6 +78,7 @@
   --shell-status-size: 10px;
   --shell-disabled-opacity: 0.55;
   --shell-z: 1000;
+  --layout-height: 100dvh;
   --elcrm-z-popover: 1000;
 
   /* —— узкие (@elcrm/components) —— */
@@ -92,7 +93,7 @@
   --section-title-size-md: 1.25rem;
   --section-auth-card-max-width: 22rem;
 
-  --nav-sections-padding: 1.5rem 1.75rem 2.5rem;
+  --nav-sections-padding: var(--section-padding);
   --nav-sections-nav-width: 220px;
   --nav-sections-main-max-width: 720px;
 
@@ -117,20 +118,32 @@
   --stack-grid-min: 180px;
   /* Задаётся Stack через style при columns=…; дефолт — одна колонка */
   --stack-columns-template: minmax(0, 1fr);
-  --item-column-gap: 12px;
+  --item-column-gap: var(--shell-gap);
   --item-column-icon-size: 40px;
-  --item-column-icon-radius: 999px;
+  --item-column-icon-radius: var(--avatar-radius);
+  --item-column-title-size: var(--shell-font-size);
+  --item-column-title-line: 1.3;
   --stat-value-size: 1.75rem;
+  --action-group-gap: var(--shell-gap-sm);
   --sidebar-width: 260px;
-  --sidebar-pad-x: 12px;
-  --sidebar-pad-y: 16px;
-  --sidebar-block-radius: 14px;
-  --sidebar-item-font-size: 13px;
+  --sidebar-pad-x: var(--shell-gap);
+  --sidebar-pad-y: var(--shell-gap-lg);
+  --sidebar-block-radius: var(--shell-radius);
+  --sidebar-item-font-size: var(--shell-font-size-sm);
   --sidebar-item-padding: 6px 10px;
   --sidebar-icon-size: 16px;
   --sidebar-group-font-size: 11px;
   --pricing-card-min-width: 16rem;
   --pricing-table-label-width: 10rem;
+  --chat-list-width: 340px;
+  --chat-split-gap: var(--shell-gap-lg);
+  --chat-radius: var(--shell-radius);
+  --chat-header-padding: var(--shell-gap);
+  --chat-body-padding: 0;
+  --chat-footer-padding: var(--shell-gap);
+  --chat-messages-header-padding: 14px 16px;
+  --chat-messages-body-padding: 16px 16px 20px;
+  --chat-messages-footer-padding: 10px 12px 12px;
 }
 
 /* —— база приложения (без захардкоженных цветов) —— */

package/templates/panel/web/src/style/theme-dark.css

@@ -127,7 +127,7 @@ body[data-theme="dark"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
-  --shell-bg: var(--bg);
+  --shell-bg: var(--shell-background-muted);
   --sidebar-block-bg: var(--shell-background);
   --sidebar-block-border: var(--shell-border);
   --sidebar-block-shadow: none;
@@ -145,4 +145,6 @@ body[data-theme="dark"] {
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
+  --chat-background: var(--shell-background);
+  --chat-border: 1px solid var(--shell-border);
 }

package/templates/panel/web/src/style/theme-light.css

@@ -127,7 +127,7 @@ body[data-theme="light"] {
   --shell-border: var(--line);
   --shell-background: var(--panel);
   --shell-background-muted: var(--bg);
-  --shell-bg: var(--bg);
+  --shell-bg: var(--shell-background-muted);
   --sidebar-block-bg: var(--shell-background);
   --sidebar-block-border: var(--shell-border);
   --sidebar-block-shadow: none;
@@ -145,4 +145,6 @@ body[data-theme="light"] {
   --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
+  --chat-background: var(--shell-background);
+  --chat-border: 1px solid var(--shell-border);
 }

package/templates/panel/web/src/style/theme.css

@@ -78,6 +78,7 @@
   --shell-status-size: 10px;
   --shell-disabled-opacity: 0.55;
   --shell-z: 1000;
+  --layout-height: 100dvh;
   --elcrm-z-popover: 1000;
 
   /* —— узкие (@elcrm/components) —— */
@@ -92,7 +93,7 @@
   --section-title-size-md: 1.25rem;
   --section-auth-card-max-width: 22rem;
 
-  --nav-sections-padding: 1.5rem 1.75rem 2.5rem;
+  --nav-sections-padding: var(--section-padding);
   --nav-sections-nav-width: 220px;
   --nav-sections-main-max-width: 720px;
 
@@ -117,19 +118,32 @@
   --stack-grid-min: 180px;
   /* Задаётся Stack через style при columns=…; дефолт — одна колонка */
   --stack-columns-template: minmax(0, 1fr);
-  --item-column-gap: 12px;
+  --item-column-gap: var(--shell-gap);
   --item-column-icon-size: 40px;
-  --item-column-icon-radius: 999px;
+  --item-column-icon-radius: var(--avatar-radius);
+  --item-column-title-size: var(--shell-font-size);
+  --item-column-title-line: 1.3;
+  --stat-value-size: 1.75rem;
+  --action-group-gap: var(--shell-gap-sm);
   --sidebar-width: 248px;
-  --sidebar-pad-x: 12px;
-  --sidebar-pad-y: 16px;
-  --sidebar-block-radius: 14px;
-  --sidebar-item-font-size: 13px;
+  --sidebar-pad-x: var(--shell-gap);
+  --sidebar-pad-y: var(--shell-gap-lg);
+  --sidebar-block-radius: var(--shell-radius);
+  --sidebar-item-font-size: var(--shell-font-size-sm);
   --sidebar-item-padding: 6px 10px;
   --sidebar-icon-size: 16px;
   --sidebar-group-font-size: 11px;
   --pricing-card-min-width: 16rem;
   --pricing-table-label-width: 10rem;
+  --chat-list-width: 340px;
+  --chat-split-gap: var(--shell-gap-lg);
+  --chat-radius: var(--shell-radius);
+  --chat-header-padding: var(--shell-gap);
+  --chat-body-padding: 0;
+  --chat-footer-padding: var(--shell-gap);
+  --chat-messages-header-padding: 14px 16px;
+  --chat-messages-body-padding: 16px 16px 20px;
+  --chat-messages-footer-padding: 10px 12px 12px;
 }
 
 /* —— база приложения (без захардкоженных цветов) —— */