@elcrm/components 0.2.13 → 0.5.1

package/dist/lazyRoute.d.ts

@@ -3,14 +3,18 @@ import { ComponentType, LazyExoticComponent } from 'react';
  * Lazy-компонент секции для {@link NavSections} / {@link TabSections}.
  */
 export type LazyRouteChunk = LazyExoticComponent<ComponentType<Record<string, unknown>>>;
+/**
+ * Резолвер секций: `(segment) => lazy` + `clear` для сброса кэша / retry.
+ */
+export type LazyResolver = ((segment: string) => LazyRouteChunk) & {
+    /** Сбросить кэш: один сегмент или весь. Следующий вызов снова вызовет `load`. */
+    clear: (segment?: string) => void;
+};
 /**
  * Кэш lazy-чанков: один `lazy()` на сегмент (иначе remount при каждом рендере).
  *
- * Когда использовать: `resolveSection` у {@link NavSections} / {@link TabSections}.
- * Шаблон `import()` должен быть статичным для Vite.
- *
- * @param load — функция загрузки модуля по сегменту (`value` пункта меню/вкладки).
- * @returns резолвер `(segment) => LazyRouteChunk`.
+ * При ошибке загрузки слот сбрасывается — повторный mount может retry.
+ * Явный сброс: `resolve.clear()` / `resolve.clear("intro")`.
  *
  * @example
  * ```tsx
@@ -19,8 +23,10 @@ export type LazyRouteChunk = LazyExoticComponent<ComponentType<Record<string, un
  * );
  *
  * <NavSections groups={groups} resolveSection={resolveSection} />
+ * // после падения чанка:
+ * resolveSection.clear("intro");
  * ```
  */
 export declare function createLazyResolver(load: (segment: string) => Promise<{
     default: ComponentType<Record<string, unknown>>;
-}>): (segment: string) => LazyRouteChunk;
+}>): LazyResolver;

package/dist/light.css

@@ -24,6 +24,18 @@ body[data-theme="light"] {
   --sidebar-item-active: var(--shell-color);
   --sidebar-item-active-bg: var(--shell-background-selected);
   --sidebar-icon-active: var(--shell-color-accent);
+  /* панель аккаунта — цвета текущей темы */
+  --sidebar-account-menu-bg: var(--shell-background);
+  --sidebar-account-menu-color: var(--shell-color);
+  --sidebar-account-menu-border: var(--shell-border);
+  --sidebar-account-menu-shadow: var(--popup-shadow, var(--shell-shadow));
+  --sidebar-account-item-hover: var(--shell-background-hover);
+  --sidebar-account-item-icon: var(--shell-color-muted);
+  --sidebar-account-danger-hover: color-mix(
+    in srgb,
+    var(--shell-color-danger) 12%,
+    transparent
+  );
 
   --avatar-background: var(--shell-color-accent);
   --avatar-color: var(--button-primary-fg);

package/dist/navTree.d.ts

@@ -1,10 +1,22 @@
-/** Узел дерева меню (Sidebar / NavSections). */
+import { ReactNode } from 'react';
+/**
+ * Общий узел дерева меню (Sidebar / NavSections).
+ * Расширяйте полями (`badge`, …), не дублируйте `value` / `items` / `defaultOpen`.
+ */
 export type NavTreeNode = {
     value: string;
     items?: NavTreeNode[];
     defaultOpen?: boolean;
     disabled?: boolean;
 };
+/**
+ * Узел с подписью и опциональной иконкой — канон для Sidebar / NavSections.
+ */
+export type NavTreeItem = NavTreeNode & {
+    label: ReactNode;
+    icon?: ReactNode;
+    items?: NavTreeItem[];
+};
 export declare function walkNavTree<T extends NavTreeNode>(items: T[] | undefined, fn: (item: T, ancestors: string[]) => void, ancestors?: string[]): void;
 export declare function walkNavGroups<T extends NavTreeNode>(groups: {
     items?: T[];

package/dist/rovingKeys-Di9N1Nct.js

@@ -0,0 +1,23 @@
+function d(e) {
+  return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function g(e, { values: n, value: c, onSelect: l, vertical: f, focusRoot: o }) {
+  if (n.length === 0) return;
+  const p = f ? "ArrowUp" : "ArrowLeft", i = f ? "ArrowDown" : "ArrowRight";
+  let t;
+  if (e.key === "Home") t = n[0];
+  else if (e.key === "End") t = n[n.length - 1];
+  else if (e.key === p || e.key === i) {
+    const r = Math.max(0, n.indexOf(c ?? "")), y = e.key === i ? 1 : -1;
+    t = n[(r + y + n.length) % n.length];
+  } else return;
+  if (t != null && (e.preventDefault(), l(t), o)) {
+    const r = o.querySelector(
+      `[data-value="${d(t)}"]`
+    );
+    r instanceof HTMLElement && r.focus();
+  }
+}
+export {
+  g as h
+};

package/dist/rovingKeys.d.ts

@@ -5,9 +5,15 @@ type Opts = {
     onSelect: (value: string) => void;
     /** `true` — стрелки вверх/вниз, иначе влево/вправо */
     vertical?: boolean;
+    /**
+     * Корень для переноса фокуса на `[data-value="…"]`.
+     * Без него меняется только выбранное значение (как раньше).
+     */
+    focusRoot?: ParentNode | null;
 };
 /**
  * Перемещение выбора по списку `value` (меню, вкладки).
+ * При `focusRoot` ещё и фокусирует элемент с `data-value`.
  */
-export declare function handleRovingKeys(event: KeyboardEvent, { values, value, onSelect, vertical }: Opts): void;
+export declare function handleRovingKeys(event: KeyboardEvent, { values, value, onSelect, vertical, focusRoot }: Opts): void;
 export {};

package/dist/stackGap.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 /**
- * Inline-стиль `gap` для {@link Stack} (и устаревших Block/Row/Column).
+ * Inline-стиль `gap` для {@link Stack}.
  *
  * - число → `"Npx"`
  * - строка → как есть (`"0.75rem"`)

package/dist/tokens.css

@@ -12,6 +12,7 @@
   --shell-font-size: var(--control-font-size);
   --shell-font-size-sm: 13px;
   --shell-font-size-lg: 18px;
+  --control-font-size-s: 0.8125rem;
   --shell-font-weight: 600;
   --shell-gap: 12px;
   --shell-gap-sm: 8px;
@@ -41,7 +42,7 @@
   --header-height: 52px;
   --header-shadow: none;
   --header-margin: 0;
-  --header-z: 20;
+  --header-z: 30;
   /* shorthand: толщина + стиль + цвет, все стороны. Только снизу — `none` и линия через --header-shadow */
   --header-border: 1px solid var(--shell-border);
   /* выравнивание nav в оставшейся ширине шапки: flex-start | center | flex-end */
@@ -103,17 +104,27 @@
   --item-column-icon-radius: var(--avatar-radius);
   --item-column-title-size: var(--shell-font-size);
   --item-column-title-line: 1.3;
+  --item-column-meta-size: var(--shell-font-size-sm);
 
   /* —— sidebar —— */
   --sidebar-width: 248px;
   --sidebar-pad-x: var(--shell-gap);
   --sidebar-pad-y: var(--shell-gap-lg);
-  --sidebar-block-radius: var(--shell-radius);
+  --sidebar-block-radius: 14px;
   --sidebar-item-font-size: var(--shell-font-size-sm);
   --sidebar-item-padding: 6px 10px;
   --sidebar-icon-size: 16px;
   --sidebar-group-font-size: 11px;
   --sidebar-indent: 14px;
+  /* меню аккаунта (футер Sidebar, как elWMS SidebarUserMenu) */
+  --sidebar-account-chip-radius: 14px;
+  --sidebar-account-chip-padding: 8px;
+  --sidebar-account-chip-gap: 10px;
+  --sidebar-account-menu-radius: 18px;
+  --sidebar-account-menu-padding: 6px;
+  --sidebar-account-item-radius: 12px;
+  --sidebar-account-item-padding: 10px 12px;
+  --sidebar-account-item-gap: 12px;
 
   /* —— chat —— */
   --chat-list-width: 340px;
@@ -131,6 +142,8 @@
   --table-cell-padding: 0.55rem 0.7rem;
   --table-head-font-size: 0.75rem;
   --table-code-font-size: 0.8rem;
+  --table-head-background: var(--shell-background);
+  --table-max-height: none;
 
   /* —— code-block —— */
   --code-block-bg: var(--shell-background);
@@ -153,4 +166,9 @@
   --banner-padding: 0.55rem 0.85rem;
   --banner-bg: color-mix(in srgb, var(--shell-color-accent) 8%, var(--shell-bg));
   --banner-border: color-mix(in srgb, var(--shell-color-accent) 35%, var(--shell-border));
+
+  /* —— loading / empty —— */
+  --loading-min-height: min(50vh, 24rem);
+  --empty-max-width: 36rem;
+  --empty-padding: 2rem;
 }

package/dist/useControllableValue-BaE0VR5d.js

@@ -0,0 +1,13 @@
+import { useState as d, useRef as i } from "react";
+function V(r, s, o) {
+  var n;
+  const [c, u] = d(s), e = r !== void 0, t = i(e);
+  return typeof process < "u" && ((n = process.env) == null ? void 0 : n.NODE_ENV) !== "production" && t.current !== e && console.warn(
+    "[@elcrm/components] useControllableValue: не переключайте controlled ↔ uncontrolled (value то undefined, то задан)."
+  ), t.current = e, [e ? r : c, (l) => {
+    e || u(l), o == null || o(l);
+  }];
+}
+export {
+  V as u
+};

package/dist/useControllableValue.d.ts

@@ -1,4 +1,7 @@
 /**
  * Controlled / uncontrolled значение (как `value` + `defaultValue` у групп).
+ *
+ * Не переключайте режим в рантайме (`value` то `undefined`, то задан) —
+ * в dev будет предупреждение.
  */
 export declare function useControllableValue<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): [T | undefined, (next: T) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elcrm/components",
-  "version": "0.2.13",
+  "version": "0.5.1",
   "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, Healthmap, PanelInfo, PageHead, PageShell, Section, Stack, Stat и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",
@@ -84,17 +84,61 @@
     },
     "./package.json": "./package.json"
   },
+  "scripts": {
+    "dev": "vite --config test/vite.config.ts",
+    "build": "vite build",
+    "postbuild": "node scripts/postbuild.mjs",
+    "check:css": "node scripts/check-css-scoped.mjs",
+    "check:tokens": "node scripts/check-tokens.mjs",
+    "test": "vitest run",
+    "test:build": "vite build --config test/vite.config.ts",
+    "test:preview": "vite preview --config test/vite.config.ts",
+    "prepublishOnly": "npm run check:css && npm run check:tokens && npm run test && npm run build",
+    "prepack": "node scripts/publish-manifest.mjs pack",
+    "postpack": "node scripts/publish-manifest.mjs restore",
+    "manifest:public": "node scripts/publish-manifest.mjs write",
+    "pack:temp": "node scripts/publish-manifest.mjs pack-temp",
+    "pack:check": "npm pack --dry-run"
+  },
   "peerDependencies": {
-    "@elcrm/button": "1.2.0",
-    "@elcrm/icons": "0.1.5",
-    "@elcrm/tooltip": "0.1.2",
+    "@elcrm/button": "^1.2.0",
+    "@elcrm/icons": "^0.1.5",
+    "@elcrm/tooltip": "^0.1.2",
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "peerDependenciesMeta": {
+    "@elcrm/button": {
+      "optional": true
+    },
+    "@elcrm/icons": {
+      "optional": true
+    },
+    "@elcrm/tooltip": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     }
+  },
+  "devDependencies": {
+    "@elcrm/button": "^1.2.0",
+    "@elcrm/icons": "^0.1.5",
+    "@elcrm/tooltip": "^0.1.2",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.13.10",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.3.1",
+    "elcrm": "file:../elCRM.cli",
+    "jsdom": "^26.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.8.2",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vitest": "^3.0.8"
   }
 }

package/dist/ActionGroup-ChKFW0mt.js

@@ -1,27 +0,0 @@
-import e from "react";
-import { c as n } from "./cx-CcykAxZN.js";
-import './ActionGroup.css';const s = "c5r", i = {
-  r: s
-};
-function p({
-  label: r,
-  items: o,
-  children: t,
-  className: a,
-  ...c
-}) {
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: n(i.r, a),
-      role: "toolbar",
-      "aria-label": r,
-      ...c
-    },
-    o,
-    t
-  );
-}
-export {
-  p as A
-};

package/dist/Avatar-loGgFt72.js

@@ -1,113 +0,0 @@
-import a from "react";
-import { c as p } from "./cx-CcykAxZN.js";
-import './Avatar.css';const h = "car", x = "cav", A = "cas", C = "cam", S = "cal", z = "caa", B = "cai", F = "cab", R = "cao", U = "caf", e = {
-  r: h,
-  v: x,
-  s: A,
-  m: C,
-  l: S,
-  a: z,
-  i: B,
-  b: F,
-  o: R,
-  f: U
-};
-function $(t) {
-  const n = t.trim();
-  if (!n) return "?";
-  const s = n.split(/\s+/).filter(Boolean);
-  return s.length >= 2 ? (s[0][0] + s[1][0]).toUpperCase() : n.slice(0, 2).toUpperCase();
-}
-function D(t) {
-  if (!(t == null || t === ""))
-    return {
-      "--avatar-radius": typeof t == "number" ? `${t}px` : t
-    };
-}
-function j({ status: t }) {
-  return /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: p(e.b, t === "online" ? e.o : e.f),
-      "data-status": t,
-      "aria-hidden": !0
-    }
-  );
-}
-function k({
-  src: t,
-  label: n,
-  children: s,
-  name: c,
-  status: o
-}) {
-  const l = t != null && t !== "" ? /* @__PURE__ */ a.createElement("img", { className: e.i, src: t, alt: n ?? "", draggable: !1 }) : s ?? (c != null ? $(c) : "?");
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement("span", { className: e.v }, l), o != null ? /* @__PURE__ */ a.createElement(j, { status: o }) : null);
-}
-function G(t) {
-  const {
-    src: n,
-    alt: s,
-    name: c,
-    size: o = "m",
-    status: l,
-    active: i,
-    children: b,
-    className: y,
-    radius: E,
-    as: f = "span",
-    style: N,
-    ...m
-  } = t, g = o === "s" ? e.s : o === "l" ? e.l : e.m, u = p(e.r, g, i && e.a, y), r = s ?? c, d = { ...D(E), ...N }, v = /* @__PURE__ */ a.createElement(
-    k,
-    {
-      src: n,
-      label: r,
-      name: c,
-      status: l,
-      children: b
-    }
-  );
-  return f === "button" ? /* @__PURE__ */ a.createElement(
-    "button",
-    {
-      type: "button",
-      className: u,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": l,
-      style: d,
-      ...m
-    },
-    v
-  ) : f === "div" ? /* @__PURE__ */ a.createElement(
-    "div",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": l,
-      style: d,
-      ...m
-    },
-    v
-  ) : /* @__PURE__ */ a.createElement(
-    "span",
-    {
-      className: u,
-      role: r ? "img" : void 0,
-      "aria-label": r,
-      "data-active": i ? "true" : void 0,
-      "data-status": l,
-      style: d,
-      ...m
-    },
-    v
-  );
-}
-export {
-  G as A,
-  D as a,
-  $ as i
-};

package/dist/AvatarGroup-D1gnT3Od.js

@@ -1,81 +0,0 @@
-import n from "react";
-import { A as f } from "./Avatar-loGgFt72.js";
-import { c as u } from "./cx-CcykAxZN.js";
-import './AvatarGroup.css';const G = "cyr", I = "cyi", M = "cyo", R = "cyd", S = "cys", j = "cym", q = "cyl", l = {
-  r: G,
-  i: I,
-  o: M,
-  d: R,
-  s: S,
-  m: j,
-  l: q
-};
-function w(a) {
-  if (a.name != null && a.name !== "") return a.name;
-  if (a.title != null && a.title !== "") return a.title;
-}
-function F({
-  items: a,
-  max: c,
-  size: s = "m",
-  add: g = !1,
-  addLabel: v = "Добавить",
-  onAdd: r,
-  onItemClick: i,
-  className: E,
-  "aria-label": h = "Аватары",
-  ...N
-}) {
-  const p = s === "s" ? l.s : s === "l" ? l.l : l.m, k = c != null && c >= 0 ? Math.min(c, a.length) : a.length, y = a.slice(0, k), e = a.length - y.length;
-  return /* @__PURE__ */ n.createElement(
-    "div",
-    {
-      className: u(l.r, E),
-      role: "group",
-      "aria-label": h,
-      ...N
-    },
-    y.map((t, o) => {
-      const C = t.value ?? t.title ?? t.name ?? t.src ?? String(o), b = w(t), m = t.alt ?? t.title ?? t.name, P = i != null;
-      return /* @__PURE__ */ n.createElement("span", { key: C, className: l.i, style: { zIndex: o + 1 } }, P ? /* @__PURE__ */ n.createElement(
-        f,
-        {
-          as: "button",
-          src: t.src,
-          name: b,
-          alt: m,
-          size: s,
-          status: t.status,
-          onClick: ($) => {
-            $.stopPropagation(), i(t, o);
-          }
-        }
-      ) : /* @__PURE__ */ n.createElement(
-        f,
-        {
-          src: t.src,
-          name: b,
-          alt: m,
-          size: s,
-          status: t.status
-        }
-      ));
-    }),
-    e > 0 ? /* @__PURE__ */ n.createElement("span", { className: u(l.o, p), "aria-label": `Ещё ${e}` }, "+", e) : null,
-    g ? /* @__PURE__ */ n.createElement(
-      "button",
-      {
-        type: "button",
-        className: u(l.d, p),
-        "aria-label": v,
-        onClick: (t) => {
-          t.stopPropagation(), r == null || r();
-        }
-      },
-      "+"
-    ) : null
-  );
-}
-export {
-  F as A
-};

package/dist/AvatarName-0BzyfpMq.js

@@ -1,68 +0,0 @@
-import t from "react";
-import { A as b } from "./Avatar-loGgFt72.js";
-import { c as g } from "./cx-CcykAxZN.js";
-import './AvatarName.css';const y = "czr", A = "czc", h = "czx", C = "czt", F = "czd", I = "czs", R = "czm", S = "czl", e = {
-  r: y,
-  c: A,
-  x: h,
-  t: C,
-  d: F,
-  s: I,
-  m: R,
-  l: S
-};
-function $(s, n) {
-  if (s != null && s !== "") return s;
-  if (typeof n == "string") return n;
-}
-function w(s) {
-  const {
-    src: n,
-    name: c,
-    title: m,
-    description: i,
-    size: a = "m",
-    radius: p,
-    status: z,
-    className: E,
-    children: N,
-    extra: u,
-    as: d = "div",
-    ...r
-  } = s, x = a === "s" ? e.s : a === "l" ? e.l : e.m, l = g(e.r, x, E), f = m ?? (typeof c == "string" ? c : void 0), v = $(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-    b,
-    {
-      src: n,
-      name: v,
-      size: a,
-      radius: p,
-      status: z
-    }
-  ), /* @__PURE__ */ t.createElement("span", { className: e.c }, f != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, f) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, N), u != null ? /* @__PURE__ */ t.createElement("span", { className: e.x }, u) : null);
-  return d === "button" ? /* @__PURE__ */ t.createElement(
-    "button",
-    {
-      type: "button",
-      className: l,
-      ...r
-    },
-    o
-  ) : d === "a" ? /* @__PURE__ */ t.createElement(
-    "a",
-    {
-      className: l,
-      ...r
-    },
-    o
-  ) : /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      className: l,
-      ...r
-    },
-    o
-  );
-}
-export {
-  w as A
-};

package/dist/Badge-jp-9iNNL.js

@@ -1,28 +0,0 @@
-import t from "react";
-import { c as j } from "./cx-CcykAxZN.js";
-import './Badge.css';const u = "cjr", i = "cjs", p = "cjm", w = "cjl", f = "cjn", g = "cja", N = "cju", h = "cjw", x = "cjd", z = "cjo", s = {
-  r: u,
-  s: i,
-  m: p,
-  l: w,
-  n: f,
-  a: g,
-  u: N,
-  w: h,
-  d: x,
-  o: z
-};
-function E(e) {
-  const {
-    tone: c = "neutral",
-    size: n = "m",
-    dot: o,
-    children: a,
-    className: r,
-    ...l
-  } = e, m = c === "accent" ? s.a : c === "success" ? s.u : c === "warning" ? s.w : c === "danger" ? s.d : s.n, d = n === "s" ? s.s : n === "l" ? s.l : s.m;
-  return /* @__PURE__ */ t.createElement("span", { className: j(s.r, d, m, r), ...l }, o ? /* @__PURE__ */ t.createElement("span", { className: s.o, "aria-hidden": !0 }) : null, a);
-}
-export {
-  E as B
-};

package/dist/Banner-B72lcEMo.js

@@ -1,34 +0,0 @@
-import e from "react";
-import { c as a } from "./cx-CcykAxZN.js";
-import './Banner.css';const i = "cLr", d = "cLi", m = "cLw", f = "cLd", w = "cLs", s = {
-  r: i,
-  i: d,
-  w: m,
-  d: f,
-  s: w
-}, L = {
-  info: s.i,
-  warning: s.w,
-  danger: s.d,
-  success: s.s
-};
-function p({
-  tone: c = "info",
-  className: n,
-  role: t = "status",
-  children: o,
-  ...r
-}) {
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      className: a(s.r, L[c], n),
-      role: t,
-      ...r
-    },
-    o
-  );
-}
-export {
-  p as B
-};

package/dist/Block-Bu7NEA0g.js

@@ -1,8 +0,0 @@
-import t from "react";
-import { S as e } from "./Stack-XkmPSswj.js";
-function n({ row: o, ...r }) {
-  return /* @__PURE__ */ t.createElement(e, { direction: o ? "row" : "column", ...r });
-}
-export {
-  n as B
-};