elcrm 1.1.2 → 1.1.3

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

@@ -1,6 +1,6 @@
 import { Card, EmptyState } from "@elcrm/components";
 
-/** Вкладка: демо списка (как вкладки в Children) */
+/** Вкладка «Сессии»: демо `EmptyState` (контент из `sections/Sessions.tsx`). */
 export default function Sessions() {
   return (
     <Card>

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Card, Row, Section } from "@elcrm/components";
+import { Card, Stack, Section } from "@elcrm/components";
 import { Button } from "@elcrm/button";
 import { Notice } from "@elcrm/notice";
 import { Modal } from "@elcrm/modal";
@@ -7,7 +7,14 @@ import { Notifications } from "@elcrm/notifications";
 import { Tooltip } from "@elcrm/tooltip";
 import useStateData from "../../state";
 
-/** Модуль «Главная» — демо стека @elcrm/* */
+/**
+ * Модуль «Главная»: `Section` + `Card` + демо Modal / Notice.
+ *
+ * Роутер: `module=Home`. Модалка: `Modal.Open("Home", "Demo", { login })`.
+ *
+ * @example
+ * // LoadRoute variant="module"
+ */
 export default function Home() {
   const { user } = useStateData(["user"]);
 
@@ -40,7 +47,7 @@ export default function Home() {
       }
     >
       <Card title="Демо действий">
-        <Row gap="0.75rem">
+        <Stack direction="row" gap="0.75rem">
           <Tooltip content="Открыть модалку">
             <Button label="Modal" onClick={openDemoModal} />
           </Tooltip>
@@ -49,7 +56,7 @@ export default function Home() {
             variant="secondary"
             onClick={pushNotice}
           />
-        </Row>
+        </Stack>
       </Card>
     </Section>
   );

package/templates/panel/web/src/modules/Home/modal/Demo.tsx

@@ -3,9 +3,19 @@ import { Button } from "@elcrm/button";
 import { Modal } from "@elcrm/modal";
 
 type Props = {
+  /** Логин текущего пользователя (из Home) */
   login?: string;
 };
 
+/**
+ * Демо-окно модуля Home (`@elcrm/modal`).
+ *
+ * @param props.login - текст в теле
+ * @returns `Modal.Create` → `{ Open, Icon }` (файл: `modules/Home/modal/Demo.tsx`)
+ *
+ * @example
+ * Modal.Open("Home", "Demo", { login: "admin" })
+ */
 function Screen({ login }: Props) {
   return (
     <Modal.Main title="Демо Modal" size="s">

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

@@ -9,20 +9,21 @@ import { pickRouteKey } from "../../lib/routeKey";
 import { LIST_TAB_DEFAULT, LIST_TABS } from "./router.sections";
 import "./style.css";
 
-/** Lazy: modules/List/sections/{Key}.tsx */
-const resolveSection = createLazyResolver((key) =>
-  import(`./sections/${key}.tsx`),
+const resolveSection = createLazyResolver((value) =>
+  import(`./sections/${value}.tsx`),
 );
 
-const LIST_KEYS = LIST_TABS.map((t) => t.key);
+const LIST_KEYS = LIST_TABS.map((t) => t.value);
 
 /**
- * Демо `List` / `Item` из @elcrm/components.
- * Стили: --list-*, --item-* в theme-*.css
+ * Демо `List` / `Item` (`@elcrm/components`).
+ *
+ * Роутер: ключ `listTab` (`Basic` | `Rows` | `Horizontal`).
+ * Токены строк: `--shell-*` в theme-light/dark.
  */
 export default function ListModule() {
   const tab = Router.useRouter("listTab");
-  const activeKey = pickRouteKey(tab, LIST_KEYS, LIST_TAB_DEFAULT);
+  const value = pickRouteKey(tab, LIST_KEYS, LIST_TAB_DEFAULT);
 
   return (
     <Section
@@ -31,15 +32,15 @@ export default function ListModule() {
       description={
         <>
           Пример настройки <code>List</code> и <code>Item</code>. Токены{" "}
-          <code>--list-*</code>, <code>--item-*</code> в{" "}
-          <code>theme-dark.css</code> / <code>theme-light.css</code>.
+          <code>--shell-*</code> в <code>theme-dark.css</code> /{" "}
+          <code>theme-light.css</code>.
         </>
       }
     >
       <TabSections
         items={LIST_TABS}
-        activeKey={activeKey}
-        onChange={(key) => Router.setRouter("listTab", key)}
+        value={value}
+        onValueChange={(next) => Router.setRouter("listTab", next)}
         resolveSection={resolveSection}
         loading={<Loading />}
         navLabel="Примеры списка"

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

@@ -1,10 +1,12 @@
 import type { TabSectionsItem } from "@elcrm/components";
 
-/** Вкладки демо List / Item */
+/**
+ * Вкладки List. `value` = `sections/{Value}.tsx`.
+ */
 export const LIST_TABS: TabSectionsItem[] = [
-  { key: "Basic", label: "Базовый" },
-  { key: "Rows", label: "Строки", badge: 3 },
-  { key: "Horizontal", label: "Ряд" },
+  { value: "Basic", label: "Базовый" },
+  { value: "Rows", label: "Строки", badge: 3 },
+  { value: "Horizontal", label: "Ряд" },
 ];
 
 export const LIST_TAB_DEFAULT = "Basic";

package/templates/panel/web/src/modules/List/sections/Basic.tsx

@@ -8,7 +8,7 @@ const ITEMS = [
   { key: "settings", label: "Настройки", hint: "NavSections" },
 ];
 
-/** Кликабельные Item (button) + active */
+/** Кликабельные `Item` (`as` button) + `active`. Токены hover/selected — `--shell-*`. */
 export default function Basic() {
   const [active, setActive] = useState("home");
 
@@ -16,8 +16,8 @@ export default function Basic() {
     <Card title="List + Item (button)">
       <p className="muted list-demo-hint">
         Клик выбирает строку (`active`). Hover / active — через{" "}
-        <code>--item-background-hover</code>,{" "}
-        <code>--item-background-active</code>.
+        <code>--shell-background-hover</code>,{" "}
+        <code>--shell-background-selected</code>.
       </p>
       <List>
         {ITEMS.map((item) => (

package/templates/panel/web/src/modules/List/sections/Horizontal.tsx

@@ -2,7 +2,7 @@ import { Card, Item, List } from "@elcrm/components";
 
 const CHIPS = ["Все", "Новые", "Активные", "Архив"];
 
-/** List row — горизонтальный ряд Item */
+/** Горизонтальный ряд: проп `row` у `List`, чипы как `Item`. */
 export default function Horizontal() {
   return (
     <Card title="List row">

package/templates/panel/web/src/modules/List/sections/Rows.tsx

@@ -32,14 +32,17 @@ const ROWS: Row[] = [
   },
 ];
 
-/** Плотные строки как в списке «Дети» */
+/**
+ * Плотные строки списка: `Item as="li"` + `Avatar` + `Badge`.
+ * Оболочка — `--shell-padding` / `--shell-radius` / `--shell-gap-sm`.
+ */
 export default function Rows() {
   return (
     <Card title="Строки (layout внутри Item)">
       <p className="muted list-demo-hint">
         Разметка контента — ваша; оболочка и отступы — токены{" "}
-        <code>--item-padding</code>, <code>--item-radius</code>,{" "}
-        <code>--list-gap</code>.
+        <code>--shell-padding</code>, <code>--shell-radius</code>,{" "}
+        <code>--shell-gap-sm</code>.
       </p>
       <List className="list-demo-rows">
         {ROWS.map((row) => (

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

@@ -6,19 +6,25 @@ import {
   SETTINGS_SECTION_GROUPS,
 } from "./router.sections";
 
-/** Lazy: modules/Settings/sections/{Key}.tsx */
-const resolveSection = createLazyResolver((key) =>
-  import(`./sections/${key}.tsx`),
+const resolveSection = createLazyResolver((value) =>
+  import(`./sections/${value}.tsx`),
 );
 
 const SETTINGS_KEYS = SETTINGS_SECTION_GROUPS.flatMap((g) =>
-  g.items.map((i) => i.key),
+  g.items.map((i) => i.value),
 );
 
-/** Модуль «Настройки»: сайдбар + секции из ./sections */
+/**
+ * Настройки: `NavSections` (сайдбар + lazy-секции).
+ *
+ * Роутер: ключ `section` (`Profile` | `Appearance` | `General`).
+ * Файлы: `sections/{Value}.tsx`, `export default`.
+ *
+ * @see SETTINGS_SECTION_GROUPS
+ */
 export default function Settings() {
   const section = Router.useRouter("section");
-  const activeKey = pickRouteKey(
+  const value = pickRouteKey(
     section,
     SETTINGS_KEYS,
     SETTINGS_SECTION_DEFAULT,
@@ -27,8 +33,8 @@ export default function Settings() {
   return (
     <NavSections
       groups={SETTINGS_SECTION_GROUPS}
-      activeKey={activeKey}
-      onChange={(key) => Router.setRouter("section", key)}
+      value={value}
+      onValueChange={(next) => Router.setRouter("section", next)}
       resolveSection={resolveSection}
       loading={<Loading />}
       navLabel="Разделы настроек"

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

@@ -1,17 +1,20 @@
 import type { NavSectionsGroup } from "@elcrm/components";
 
-/** Секции модуля Settings (ключ = файл sections/{Key}.tsx) */
+/**
+ * Группы сайдбара Settings.
+ * `items[].value` = имя файла `sections/{Value}.tsx`.
+ */
 export const SETTINGS_SECTION_GROUPS: NavSectionsGroup[] = [
   {
     label: "Личное",
     items: [
-      { key: "Profile", label: "Профиль" },
-      { key: "Appearance", label: "Оформление" },
+      { value: "Profile", label: "Профиль" },
+      { value: "Appearance", label: "Оформление" },
     ],
   },
   {
     label: "Система",
-    items: [{ key: "General", label: "Общие" }],
+    items: [{ value: "General", label: "Общие" }],
   },
 ];
 

package/templates/panel/web/src/modules/Settings/sections/Appearance.tsx

@@ -1,9 +1,13 @@
-import { Row, Section } from "@elcrm/components";
+import { Stack, Section } from "@elcrm/components";
 import { Button } from "@elcrm/button";
 import { getTheme, setTheme, type ThemeMode } from "../../../lib/theme";
 import { useState } from "react";
 
-/** Секция настроек: тема оформления */
+/**
+ * Секция настроек: тема (`light` | `dark`).
+ *
+ * Кнопки `@elcrm/button`; значение — `lib/theme` (localStorage + `data-theme`).
+ */
 export default function Appearance() {
   const [theme, setThemeState] = useState<ThemeMode>(() => getTheme());
 
@@ -19,7 +23,7 @@ export default function Appearance() {
       description="Тема интерфейса панели. Значение сохраняется в localStorage."
     >
       <Section variant="block" title="Тема">
-        <Row gap={8}>
+        <Stack direction="row" gap={8}>
           <Button
             label="Светлая"
             width="s"
@@ -32,7 +36,7 @@ export default function Appearance() {
             variant={theme === "dark" ? "primary" : "secondary"}
             onClick={() => apply("dark")}
           />
-        </Row>
+        </Stack>
       </Section>
     </Section>
   );

package/templates/panel/web/src/modules/Settings/sections/General.tsx

@@ -3,7 +3,11 @@ import { Button } from "@elcrm/button";
 import { Notice } from "@elcrm/notice";
 import { StringField, useForm } from "@elcrm/form";
 
-/** Секция настроек: общие (демо) */
+/**
+ * Секция настроек: общие (демо, без API).
+ *
+ * `StringField` name / description + `Button` → `Notice.Success`.
+ */
 export default function General() {
   const form = useForm({
     name: "Panel",

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

@@ -6,7 +6,11 @@ import { Notice } from "@elcrm/notice";
 import { DisplayField, EmailField, StringField, useForm } from "@elcrm/form";
 import useStateData from "../../../state";
 
-/** Секция настроек: профиль */
+/**
+ * Секция настроек: профиль (`Section` + `variant="block"`).
+ *
+ * Те же поля, что вкладка Account/Profile: `auth/profile`.
+ */
 export default function Profile() {
   const { user, loadUser } = useStateData(["user", "loadUser"]);
   const form = useForm({

package/templates/panel/web/src/pages/Auth.tsx

@@ -8,6 +8,16 @@ import { PasswordField, StringField, useForm } from "@elcrm/form";
 import { Crypto } from "@elcrm/crypto";
 import { usePasskeySupport } from "@elcrm/passkey";
 
+/**
+ * Экран входа (`Section variant="auth"`).
+ *
+ * Поля `@elcrm/form`: `login` (`StringField`), `password` (`PasswordField`) + `useForm`.
+ * Submit: `Button onSend` → `Api.query("auth/pass", { login, password })`.
+ * Успех: `Router.mergeRouter({ page: "Main", module: "Home" })`.
+ *
+ * @example
+ * // LoadRoute variant="page" → Auth.tsx
+ */
 export default function Auth() {
   const form = useForm({ login: "", password: "" });
   const passkeySupport = usePasskeySupport();

package/templates/panel/web/src/pages/Main.tsx

@@ -4,11 +4,17 @@ import useStateData from "../state";
 import { LoadRoute } from "@elcrm/router";
 import { createLazyResolver } from "../lazyRoute";
 
-/** Модули: src/modules/{Home|List|Account|Settings}/index.tsx */
 const resolveModule = createLazyResolver((segment) =>
   import(`../modules/${segment}/index.tsx`),
 );
 
+/**
+ * Оболочка авторизованной зоны: `Layout` + `Header` + модули.
+ *
+ * `LoadRoute` variant=`module`, default `Home`.
+ * Чанки: `src/modules/{Home|List|Account|Settings}/index.tsx`.
+ * `preUpload` — `loadUser()` (`auth/me`).
+ */
 export default function Main() {
   const root = document.getElementById("root");
   if (root) root.dataset.page = "main";

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

@@ -1,6 +1,7 @@
 import { State } from "@elcrm/state";
 import { Api } from "@elcrm/api";
 
+/** Пользователь панели (поля с `auth/me` / `auth/profile`). */
 export type PanelUser = {
   id: number;
   login: string;
@@ -12,9 +13,17 @@ export type PanelUser = {
 
 type Store = {
   user: PanelUser | null;
+  /** Подтянуть профиль: `Api.query("auth/me")`. */
   loadUser: () => Promise<void>;
 };
 
+/**
+ * Глобальный store `@elcrm/state`: текущий user.
+ *
+ * @example
+ * const { user } = useStateData(["user"]);
+ * await useStateData.getState().loadUser();
+ */
 const useStateData = State.create<Store>((set) => ({
   user: null,
   loadUser: async () => {

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

@@ -16,6 +16,7 @@ body[data-theme="dark"] {
   --accent: #5b8cff;
   --danger: #ff6b6b;
   --success: #3dd68c;
+  --warning: #f59e0b;
   --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
 
   /* —— button —— */
@@ -148,93 +149,23 @@ body[data-theme="dark"] {
   --color-text: var(--text);
   --color-field-focus: var(--field-background);
 
-  /* —— @elcrm/components —— */
-  --layout-background: var(--bg);
-
-  --header-background: color-mix(in srgb, var(--panel) 92%, var(--bg));
-  --header-color: var(--text);
-  --header-border: var(--line);
-
-  --footer-background: transparent;
-  --footer-color: var(--muted);
-  --footer-border: var(--line);
-
-  --item-background: transparent;
-  --item-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
-  --item-background-active: color-mix(in srgb, var(--text) 12%, transparent);
-  --item-color: var(--text);
-  --item-color-muted: var(--muted);
-  --item-border: transparent;
-
-  --card-background: var(--panel);
-  --card-border: var(--line);
-  --card-shadow: var(--shadow);
-
-  --menu-item-background: transparent;
-  --menu-item-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
-  --menu-item-background-active: color-mix(
-    in srgb,
-    var(--text) 10%,
-    transparent
-  );
-  --menu-item-color: var(--muted);
-  --menu-item-color-active: var(--text);
-
-  --loading-color: var(--muted);
-
-  --section-title-color: var(--text);
-  --section-description-color: var(--muted);
-  --section-auth-card-background: var(--panel);
-  --section-auth-card-border: var(--line);
-  --section-auth-card-shadow: var(--shadow);
-  --section-block-border: var(--line);
-
-  --nav-sections-label-color: var(--muted);
-  --nav-sections-item-color: var(--text);
-  --nav-sections-item-background-hover: color-mix(
-    in srgb,
-    var(--text) 8%,
-    transparent
-  );
-  --nav-sections-item-background-active: color-mix(
-    in srgb,
-    var(--text) 10%,
-    transparent
-  );
-  --nav-sections-accent: var(--accent);
-  --nav-sections-icon-color: var(--muted);
-  --nav-sections-group-border: var(--line);
-  --nav-sections-footer-border: var(--line);
-
-  --tab-sections-border: var(--line);
-  --tab-sections-color: var(--muted);
-  --tab-sections-color-active: var(--text);
-  --tab-sections-accent: var(--text);
-  --tab-sections-badge-background: var(--danger);
-  --tab-sections-badge-color: #ffffff;
-
-  --avatar-background: var(--accent);
-  --avatar-color: var(--button-primary-fg, #fff);
-  --avatar-border: 1px solid var(--line);
+  /* —— @elcrm/components: shell (общие) + узкие avatar —— */
+  --shell-color: var(--text);
+  --shell-color-muted: var(--muted);
+  --shell-color-accent: var(--accent);
+  --shell-color-danger: var(--danger);
+  --shell-color-success: var(--success);
+  --shell-color-warning: var(--warning);
+  --shell-border: var(--line);
+  --shell-background: var(--panel);
+  --shell-background-muted: var(--bg);
+  --shell-background-hover: color-mix(in srgb, var(--text) 8%, transparent);
+  --shell-background-selected: color-mix(in srgb, var(--accent) 14%, transparent);
+  --shell-shadow: var(--shadow);
+
+  --avatar-background: var(--shell-color-accent);
+  --avatar-color: var(--button-primary-fg);
+  --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
-
-  --badge-neutral-background: color-mix(in srgb, var(--text) 10%, transparent);
-  --badge-neutral-color: var(--text);
-  --badge-accent-background: color-mix(in srgb, var(--accent) 22%, transparent);
-  --badge-accent-color: var(--accent);
-  --badge-success-background: color-mix(in srgb, var(--success, #22c55e) 22%, transparent);
-  --badge-success-color: var(--success, #22c55e);
-  --badge-warning-background: color-mix(in srgb, var(--warning, #f59e0b) 22%, transparent);
-  --badge-warning-color: var(--warning, #f59e0b);
-  --badge-danger-background: color-mix(in srgb, var(--danger) 22%, transparent);
-  --badge-danger-color: var(--danger);
-
-  --brand-color: var(--header-color);
-  --brand-color-hover: var(--header-color);
-
-  --empty-state-color: var(--muted);
-  --empty-state-icon-color: var(--muted);
-  --empty-state-title-color: var(--text);
-  --empty-state-description-color: var(--muted);
 }

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

@@ -16,6 +16,7 @@ body[data-theme="light"] {
   --accent: #3b6ef5;
   --danger: #d64545;
   --success: #1f9d62;
+  --warning: #d97706;
   --shadow: 0 8px 24px rgba(26, 31, 41, 0.1);
 
   /* —— button —— */
@@ -148,93 +149,23 @@ body[data-theme="light"] {
   --color-text: var(--text);
   --color-field-focus: var(--field-background);
 
-  /* —— @elcrm/components —— */
-  --layout-background: var(--bg);
-
-  --header-background: color-mix(in srgb, var(--panel) 96%, var(--bg));
-  --header-color: var(--text);
-  --header-border: var(--line);
-
-  --footer-background: transparent;
-  --footer-color: var(--muted);
-  --footer-border: var(--line);
-
-  --item-background: transparent;
-  --item-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
-  --item-background-active: color-mix(in srgb, var(--text) 10%, transparent);
-  --item-color: var(--text);
-  --item-color-muted: var(--muted);
-  --item-border: transparent;
-
-  --card-background: var(--panel);
-  --card-border: var(--line);
-  --card-shadow: var(--shadow);
-
-  --menu-item-background: transparent;
-  --menu-item-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
-  --menu-item-background-active: color-mix(
-    in srgb,
-    var(--text) 10%,
-    transparent
-  );
-  --menu-item-color: var(--muted);
-  --menu-item-color-active: var(--text);
-
-  --loading-color: var(--muted);
-
-  --section-title-color: var(--text);
-  --section-description-color: var(--muted);
-  --section-auth-card-background: var(--panel);
-  --section-auth-card-border: var(--line);
-  --section-auth-card-shadow: var(--shadow);
-  --section-block-border: var(--line);
-
-  --nav-sections-label-color: var(--muted);
-  --nav-sections-item-color: var(--text);
-  --nav-sections-item-background-hover: color-mix(
-    in srgb,
-    var(--text) 6%,
-    transparent
-  );
-  --nav-sections-item-background-active: color-mix(
-    in srgb,
-    var(--text) 10%,
-    transparent
-  );
-  --nav-sections-accent: var(--accent);
-  --nav-sections-icon-color: var(--muted);
-  --nav-sections-group-border: var(--line);
-  --nav-sections-footer-border: var(--line);
-
-  --tab-sections-border: var(--line);
-  --tab-sections-color: var(--muted);
-  --tab-sections-color-active: var(--text);
-  --tab-sections-accent: var(--text);
-  --tab-sections-badge-background: var(--danger);
-  --tab-sections-badge-color: #ffffff;
-
-  --avatar-background: var(--accent);
-  --avatar-color: var(--button-primary-fg, #fff);
-  --avatar-border: 1px solid var(--line);
+  /* —— @elcrm/components: shell (общие) + узкие avatar —— */
+  --shell-color: var(--text);
+  --shell-color-muted: var(--muted);
+  --shell-color-accent: var(--accent);
+  --shell-color-danger: var(--danger);
+  --shell-color-success: var(--success);
+  --shell-color-warning: var(--warning);
+  --shell-border: var(--line);
+  --shell-background: var(--panel);
+  --shell-background-muted: var(--bg);
+  --shell-background-hover: color-mix(in srgb, var(--text) 6%, transparent);
+  --shell-background-selected: color-mix(in srgb, var(--accent) 10%, transparent);
+  --shell-shadow: var(--shadow);
+
+  --avatar-background: var(--shell-color-accent);
+  --avatar-color: var(--button-primary-fg);
+  --avatar-border: 1px solid var(--shell-border);
   --avatar-outline-active: 2px solid
     color-mix(in srgb, var(--accent) 70%, white);
-
-  --badge-neutral-background: color-mix(in srgb, var(--text) 8%, transparent);
-  --badge-neutral-color: var(--text);
-  --badge-accent-background: color-mix(in srgb, var(--accent) 16%, transparent);
-  --badge-accent-color: var(--accent);
-  --badge-success-background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent);
-  --badge-success-color: var(--success, #16a34a);
-  --badge-warning-background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent);
-  --badge-warning-color: var(--warning, #d97706);
-  --badge-danger-background: color-mix(in srgb, var(--danger) 16%, transparent);
-  --badge-danger-color: var(--danger);
-
-  --brand-color: var(--header-color);
-  --brand-color-hover: var(--header-color);
-
-  --empty-state-color: var(--muted);
-  --empty-state-icon-color: var(--muted);
-  --empty-state-title-color: var(--text);
-  --empty-state-description-color: var(--muted);
 }