@elcrm/components 0.2.13 → 0.5.1

package/dist/Sidebar-Bouhd5SS.js

@@ -0,0 +1,205 @@
+import e from "react";
+import { D as M } from "./Dropdown-CR_XxNak.js";
+import { c as x } from "./cx-CcykAxZN.js";
+import { c as O, b as P, a as j, i as z } from "./navTree-BRyaILN9.js";
+import { h as A } from "./rovingKeys-Di9N1Nct.js";
+import { u as q } from "./useControllableValue-BaE0VR5d.js";
+import { B as T } from "./Badge-BjScAXGy.js";
+import { I as W } from "./Item-CGpkMJu0.js";
+import { b as G } from "./badgeText-CRzlIzi3.js";
+import './Sidebar.css';const H = "nsr", J = "nsb", Q = "nsx", U = "nsg", V = "nss", X = "nsp", Y = "nsh", Z = "nsn", _ = "nsi", $ = "nsa", ee = "nso", ne = "nsl", te = "nsd", ae = "nsc", le = "nsm", se = "nsf", ce = "nsq", re = "nsw", oe = "nsu", ie = "nsk", ue = "nsv", n = {
+  root: H,
+  brand: J,
+  xtra: Q,
+  groups: U,
+  section: V,
+  plain: X,
+  heading: Y,
+  nav: Z,
+  item: _,
+  active: $,
+  oico: ee,
+  label: ne,
+  dot: te,
+  chevron: ae,
+  menu: le,
+  footer: se,
+  qmenu: ce,
+  who: re,
+  userbtn: oe,
+  kebab: ie,
+  ver: ue
+};
+function me({ className: s }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: s, viewBox: "0 0 16 16", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }), /* @__PURE__ */ e.createElement("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" }));
+}
+function de({ className: s }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: s, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
+    "path",
+    {
+      d: "M2.5 4.5 6 8l3.5-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ));
+}
+function B({
+  items: s,
+  value: v,
+  focusValue: b,
+  open: p,
+  onValueChange: d,
+  onToggle: E
+}) {
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, s.map((a) => {
+    const f = a.items, c = f != null && f.length > 0, o = c && p.includes(a.value), i = G(a.badge), u = !c && v === a.value, N = a.value === (b ?? v);
+    return /* @__PURE__ */ e.createElement("li", { key: a.value }, /* @__PURE__ */ e.createElement(
+      W,
+      {
+        as: "button",
+        active: u,
+        className: x(n.item, u && n.active),
+        "data-value": a.value,
+        "aria-current": u ? "page" : void 0,
+        "aria-expanded": c ? o : void 0,
+        "data-open": o ? "true" : void 0,
+        tabIndex: N ? 0 : -1,
+        onClick: () => {
+          c ? E(a.value) : d == null || d(a.value);
+        }
+      },
+      a.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.oico, "aria-hidden": !0 }, a.icon) : null,
+      /* @__PURE__ */ e.createElement("span", { className: n.label }, a.label),
+      i != null ? /* @__PURE__ */ e.createElement(T, { className: n.dot, tone: "accent", size: "s" }, i) : null,
+      c ? /* @__PURE__ */ e.createElement(de, { className: n.chevron }) : null
+    ), c && o ? /* @__PURE__ */ e.createElement("ul", { className: n.menu }, /* @__PURE__ */ e.createElement(
+      B,
+      {
+        items: f,
+        value: v,
+        focusValue: b,
+        open: p,
+        onValueChange: d,
+        onToggle: E
+      }
+    )) : null);
+  }));
+}
+function xe({
+  groups: s = [],
+  value: v,
+  defaultValue: b,
+  onValueChange: p,
+  open: d,
+  defaultOpen: E,
+  onOpenChange: a,
+  variant: f = "cards",
+  brand: c,
+  extra: o,
+  footer: i,
+  footerItems: u,
+  onFooterValueChange: N,
+  footerMenuLabel: C = "Меню аккаунта",
+  version: h,
+  className: D,
+  "aria-label": S = "Основное меню"
+}) {
+  const [l, y] = q(
+    v,
+    b,
+    p
+  ), [m = [], k] = q(
+    d,
+    O(s, E, l),
+    a
+  ), g = e.useRef(l);
+  e.useEffect(() => {
+    if (l == null || l === g.current) {
+      g.current = l;
+      return;
+    }
+    g.current = l;
+    const r = P(s, l).filter((L) => !m.includes(L));
+    r.length && k([...m, ...r]);
+  }, [l, s, m, k]);
+  const I = (t) => {
+    k(
+      m.includes(t) ? m.filter((r) => r !== t) : [...m, t]
+    );
+  }, w = e.useRef(null), F = j(s).map((t) => t.value), [R, K] = e.useState(l);
+  return e.useEffect(() => {
+    l && K(l);
+  }, [l]), /* @__PURE__ */ e.createElement(
+    "aside",
+    {
+      className: x(n.root, f === "plain" && n.plain, D),
+      "aria-label": S
+    },
+    c != null || o != null ? /* @__PURE__ */ e.createElement("div", { className: n.brand }, c, o != null ? /* @__PURE__ */ e.createElement("div", { className: n.xtra }, o) : null) : null,
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        ref: w,
+        className: n.groups,
+        onKeyDown: (t) => A(t, {
+          values: F,
+          value: R,
+          vertical: !0,
+          focusRoot: w.current,
+          onSelect: (r) => {
+            K(r), z(s, r) || y(r);
+          }
+        })
+      },
+      s.map((t) => /* @__PURE__ */ e.createElement(
+        "nav",
+        {
+          key: t.value,
+          className: n.section,
+          "aria-label": t.title ?? "Навигация"
+        },
+        t.title ? /* @__PURE__ */ e.createElement("div", { className: n.heading }, t.title) : null,
+        /* @__PURE__ */ e.createElement("ul", { className: n.nav }, /* @__PURE__ */ e.createElement(
+          B,
+          {
+            items: t.items ?? [],
+            value: l,
+            focusValue: R,
+            open: m,
+            onValueChange: y,
+            onToggle: I
+          }
+        ))
+      ))
+    ),
+    i != null || h != null ? /* @__PURE__ */ e.createElement("div", { className: x(n.section, n.footer) }, i != null && u != null && u.length > 0 ? /* @__PURE__ */ e.createElement(
+      M,
+      {
+        className: n.qmenu,
+        tone: "account",
+        align: "start",
+        placement: "top",
+        label: C,
+        trigger: (t) => /* @__PURE__ */ e.createElement(
+          "button",
+          {
+            type: "button",
+            className: n.userbtn,
+            "data-open": t.open ? "true" : void 0,
+            ...t.anchorProps
+          },
+          /* @__PURE__ */ e.createElement("span", { className: n.who }, i),
+          /* @__PURE__ */ e.createElement(me, { className: n.kebab })
+        ),
+        items: u,
+        onValueChange: N
+      }
+    ) : i, h != null ? /* @__PURE__ */ e.createElement("div", { className: n.ver }, h) : null) : null
+  );
+}
+export {
+  xe as S
+};

package/dist/Sidebar.css

@@ -1 +1 @@
-@layer elcrm-components{.c2r{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width, 248px);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y, 16px) var(--sidebar-pad-x, 12px);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.c2b{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px 8px;min-width:0}.c2x{flex-shrink:0;margin-left:auto}.c2g{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.c2s{box-sizing:border-box;flex-shrink:0;padding:8px}.c2p{--sidebar-plain: 1}.c2r:not(.c2p) .c2s{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.c2h{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.c2n{margin:0;padding:0;list-style:none}.c2n>li{list-style:none}.c2n .c2i:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:8px;margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:8px;background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.c2n .c2i:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.c2n .c2i:is(button).c2a,.c2n .c2i:is(button)[aria-current=page],.c2n .c2i:is(button)[data-active=true],.c2n .c2i:is(button).c2a:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.c2o{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.c2o :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.c2a .c2o{color:var(--sidebar-icon-active)}.c2l{flex:1;min-width:0}.c2d{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.c2c{flex-shrink:0;width:12px;height:12px;margin-left:auto;color:var(--shell-color-muted);transition:transform .15s ease}.c2n .c2i:is(button)[data-open=true] .c2c{transform:rotate(180deg);color:inherit}.c2m{margin:0;padding:0 0 0 var(--sidebar-indent);list-style:none}.c2m>li{list-style:none}.c2f{margin-top:auto}.c2q{display:flex;width:100%;min-width:0;flex:0 0 auto;height:auto;align-items:center}.c2q>*{display:flex;width:100%;min-width:0;height:auto;align-items:center}.c2w{display:flex;width:100%;min-width:0;align-items:center}.c2u{display:flex;align-items:center;width:100%;min-width:0;gap:var(--shell-gap-sm);margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left}.c2k{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.c2v{margin-top:var(--shell-gap-sm);font-size:11px;color:var(--shell-color-muted);text-align:center}@media (max-width: 900px){.c2r{width:72px;padding:12px 8px}.c2l,.c2h,.c2v,.c2c,.c2m{display:none}.c2b{flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px 0}.c2x{margin-left:0}.c2s{padding:6px}.c2n .c2i{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.c2n .c2d{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}
+@layer elcrm-components{.nsr{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;width:var(--sidebar-width);min-width:0;min-height:0;height:100%;max-height:100%;padding:var(--sidebar-pad-y) var(--sidebar-pad-x);gap:var(--shell-gap-sm, 8px);color:var(--shell-color);align-self:stretch}.nsb{display:flex;flex-direction:row;align-items:center;gap:var(--shell-gap);padding:4px var(--shell-gap-sm);min-width:0}.nsx{flex-shrink:0;margin-left:auto}.nsg{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--shell-gap-sm);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.nss{box-sizing:border-box;flex-shrink:0;padding:var(--shell-gap-sm)}.nsp{--sidebar-plain: 1}.nsr:not(.nsp) .nss{background:var(--sidebar-block-bg);border:1px solid var(--sidebar-block-border);border-radius:var(--sidebar-block-radius);box-shadow:var(--sidebar-block-shadow)}.nsh{margin:2px 10px 6px;font-size:var(--sidebar-group-font-size);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted)}.nsn{margin:0;padding:0;list-style:none}.nsn>li{list-style:none}.nsn .nsi:is(button){position:relative;display:flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;gap:var(--shell-gap-sm);margin:0 0 1px;padding:var(--sidebar-item-padding);border:0;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color-muted);font-family:inherit;font-size:var(--sidebar-item-font-size);font-weight:500;line-height:1.25;letter-spacing:0;text-align:left;cursor:pointer}.nsn .nsi:is(button):hover{color:var(--shell-color);background:var(--shell-background-hover)}.nsn .nsi:is(button).nsa,.nsn .nsi:is(button)[aria-current=page],.nsn .nsi:is(button)[data-active=true],.nsn .nsi:is(button).nsa:hover{color:var(--sidebar-item-active);background:var(--sidebar-item-active-bg)}.nso{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:inherit}.nso :is(svg){display:block;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size)}.nsa .nso{color:var(--sidebar-icon-active)}.nsl{flex:1;min-width:0}.nsd{flex-shrink:0;min-width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);padding:0 4px;font-size:10px}.nsc{flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);margin-left:auto;color:var(--shell-color-muted);transition:transform .15s ease}.nsn .nsi:is(button)[data-open=true] .nsc{transform:rotate(180deg);color:inherit}.nsm{margin:0;padding:0 0 0 var(--sidebar-indent);list-style:none}.nsm>li{list-style:none}.nsf{margin-top:auto}.nsq{position:relative;display:flex;width:100%;min-width:0;flex:0 0 auto;height:auto;align-items:stretch}.nsq>*{display:flex;width:100%;min-width:0;height:auto;align-items:stretch}.nsw{display:flex;flex:1 1 auto;width:100%;min-width:0;align-items:center}.nsw>*{flex:1 1 auto;min-width:0;max-width:100%}.nsu{display:flex;align-items:center;gap:var(--sidebar-account-chip-gap);width:100%;min-width:0;margin:0;padding:var(--sidebar-account-chip-padding);border:none;border-radius:var(--sidebar-account-chip-radius);background:transparent;font:inherit;color:var(--shell-color);cursor:pointer;text-align:left;transition:background .15s ease}.nsu:hover,.nsu[data-open=true]{background:var(--shell-background-hover)}.nsk{flex-shrink:0;width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);color:var(--shell-color-muted)}.nsv{margin-top:2px;padding:4px 8px 2px;font-size:11px;line-height:1.2;color:var(--shell-color-muted);text-align:left;-webkit-user-select:text;user-select:text}@media (max-width: 900px){.nsr{width:72px;padding:var(--shell-gap) var(--shell-gap-sm)}.nsl,.nsh,.nsv,.nsc,.nsm{display:none}.nsb{flex-direction:column;justify-content:center;align-items:center;gap:var(--shell-gap-sm);padding:4px 0}.nsx{margin-left:0}.nss{padding:6px}.nsn .nsi{justify-content:center;align-items:center;gap:0;width:100%;min-height:40px;padding:10px 0}.nsn .nsd{position:absolute;top:4px;right:4px;min-width:14px;height:14px;padding:0 4px;font-size:.625rem;line-height:14px;pointer-events:none}}}

package/dist/Sidebar.d.ts

@@ -1,27 +1,16 @@
 import { default as React } from 'react';
 import { DropdownItem } from './Dropdown';
+import { NavTreeItem } from './navTree';
 /** Вид колонки: карточки (консоль) или плоский список (backoffice) */
 export type SidebarVariant = "cards" | "plain";
-/** Пункт бокового меню. Идентификатор — `value`. */
-export type SidebarItem = {
-    value: string;
-    /** Подпись */
+/**
+ * Пункт бокового меню. База — {@link NavTreeItem}; здесь `label: string` + `badge`.
+ */
+export type SidebarItem = Omit<NavTreeItem, "label" | "items"> & {
     label: string;
-    /** Иконка (слот приложения) */
-    icon?: React.ReactNode;
     /** Счётчик справа */
     badge?: number | string | null;
-    /**
-     * Вложенные пункты — есть → шеврон и раскрытие.
-     * Клик по родителю только открывает/закрывает, `onSelect` не зовём.
-     */
     items?: SidebarItem[];
-    /**
-     * Подменю открыто при первом рендере.
-     * Если выбран потомок — ветка откроется сама.
-     * @default false
-     */
-    defaultOpen?: boolean;
 };
 /** Группа пунктов. `title` — «Аккаунт» / «Админ». */
 export type SidebarGroup = {
@@ -46,7 +35,7 @@ export type SidebarGroup = {
  * <Sidebar
  *   variant="cards"
  *   value={page}
- *   onSelect={setPage}
+ *   onValueChange={setPage}
  *   brand={<Brand as="strong">App</Brand>}
  *   extra={<Notifications.Bell />}
  *   groups={[
@@ -74,22 +63,25 @@ export type SidebarGroup = {
  *     { value: "theme", label: "Тема", submenu: true },
  *     { value: "logout", label: "Выйти", danger: true },
  *   ]}
- *   onFooterSelect={(value) => console.log(value)}
+ *   onFooterValueChange={(value) => console.log(value)}
  *   version="v 0.2.26"
  * />
  * ```
  *
+ * Меню аккаунта (`footerItems`): chip как elWMS SidebarUserMenu + `Dropdown tone="account"`
+ * (токены `--sidebar-account-*`).
+ *
  * Токены: `--sidebar-*`, цвета — `--shell-*`.
  */
 export type SidebarProps = {
-    /** Группы пунктов (`value` + `items`) */
+    /** Группы пунктов (`value` + `items`). Канон — только `groups`. */
     groups?: SidebarGroup[];
-    /** То же, что `groups` (совместимость) */
-    items?: SidebarGroup[];
-    /** Текущий пункт */
+    /** Текущий пункт (controlled). */
     value?: string;
-    /** Выбор пункта (только листья, без `items`) */
-    onSelect?: (value: string) => void;
+    /** Начальный пункт (uncontrolled). */
+    defaultValue?: string;
+    /** Выбор пункта (только листья, без вложенных `items`). */
+    onValueChange?: (value: string) => void;
     /**
      * Раскрытые родители (их `value`). Контролируемый режим.
      * Вместе с `onOpenChange`.
@@ -119,7 +111,7 @@ export type SidebarProps = {
      */
     footerItems?: DropdownItem[];
     /** Выбор пункта меню аккаунта */
-    onFooterSelect?: (value: string, item: DropdownItem) => void;
+    onFooterValueChange?: (value: string, item: DropdownItem) => void;
     /** `aria-label` панели меню аккаунта */
     footerMenuLabel?: string;
     /** Версия под футером */
@@ -133,4 +125,4 @@ export type SidebarProps = {
  *
  * @see Layout, Brand, Item, Badge, NavSections
  */
-export declare function Sidebar({ groups, items, value, onSelect, open: openProp, defaultOpen, onOpenChange, variant, brand, extra, footer, footerItems, onFooterSelect, footerMenuLabel, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;
+export declare function Sidebar({ groups, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, variant, brand, extra, footer, footerItems, onFooterValueChange, footerMenuLabel, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;

package/dist/Sidebar.js

@@ -1,4 +1,4 @@
-import { S as e } from "./Sidebar-CYFaPqdC.js";
+import { S as e } from "./Sidebar-Bouhd5SS.js";
 export {
   e as Sidebar
 };

package/dist/SplitPane-DBa-g9td.js

@@ -0,0 +1,92 @@
+import m from "react";
+import { c as C } from "./cx-CcykAxZN.js";
+import { u as P } from "./useControllableValue-BaE0VR5d.js";
+import './SplitPane.css';function E(e, o, p, y) {
+  if (o <= 0) return e;
+  const l = p / o, c = 1 - y / o;
+  return c < l ? 0.5 : Math.max(l, Math.min(c, e));
+}
+const H = "dsr", K = "dsx", U = "dsy", V = "dsp", X = "dsh", i = {
+  root: H,
+  xaxis: K,
+  yaxis: U,
+  pane: V,
+  handle: X
+}, g = 6;
+function v() {
+  if (typeof document > "u") return g;
+  const e = getComputedStyle(document.documentElement).getPropertyValue("--split-handle-size").trim(), o = Number.parseFloat(e);
+  return Number.isFinite(o) && o > 0 ? o : g;
+}
+function q({
+  direction: e,
+  ratio: o,
+  defaultRatio: p = 0.5,
+  onRatioChange: y,
+  minFirst: l = 140,
+  minSecond: c = 140,
+  first: R,
+  second: S,
+  className: k,
+  ...N
+}) {
+  const x = m.useRef(null), D = e === "horizontal" ? "x" : "y", [r = p, z] = P(
+    o,
+    p,
+    y
+  ), L = (t) => {
+    t.preventDefault();
+    const a = x.current;
+    if (!a) return;
+    const n = v(), s = a.getBoundingClientRect(), u = e === "horizontal" ? s.width - n : s.height - n, d = (h, A) => {
+      const B = e === "horizontal" ? h - s.left : A - s.top;
+      z(E(B / u, u, l, c));
+    };
+    d(t.clientX, t.clientY);
+    const f = (h) => {
+      d(h.clientX, h.clientY);
+    }, b = () => {
+      document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", b), document.body.style.cursor = "", document.body.style.userSelect = "";
+    };
+    document.body.style.cursor = e === "horizontal" ? "col-resize" : "row-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", f), document.addEventListener("pointerup", b);
+  }, w = v(), M = `calc((100% - ${w}px) * ${r})`, $ = `calc((100% - ${w}px) * ${1 - r})`;
+  return /* @__PURE__ */ m.createElement(
+    "div",
+    {
+      ref: x,
+      className: C(i.root, D === "x" ? i.xaxis : i.yaxis, k),
+      ...N
+    },
+    /* @__PURE__ */ m.createElement("div", { className: i.pane, style: { flexBasis: M } }, R),
+    /* @__PURE__ */ m.createElement(
+      "button",
+      {
+        type: "button",
+        className: i.handle,
+        role: "separator",
+        "aria-label": "Разделитель панелей",
+        "aria-orientation": e === "horizontal" ? "vertical" : "horizontal",
+        "aria-valuenow": Math.round(r * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuetext": `${Math.round(r * 100)}%`,
+        onPointerDown: L,
+        onKeyDown: (t) => {
+          const a = t.shiftKey ? 0.1 : 0.02;
+          let n;
+          if (e === "horizontal" ? t.key === "ArrowLeft" ? n = r - a : t.key === "ArrowRight" && (n = r + a) : t.key === "ArrowUp" ? n = r - a : t.key === "ArrowDown" && (n = r + a), t.key === "Home" ? n = 0 : t.key === "End" && (n = 1), n == null) return;
+          t.preventDefault();
+          const s = x.current;
+          if (!s) return;
+          const u = v(), d = s.getBoundingClientRect(), f = e === "horizontal" ? d.width - u : d.height - u;
+          z(E(n, f, l, c));
+        }
+      }
+    ),
+    /* @__PURE__ */ m.createElement("div", { className: i.pane, style: { flexBasis: $ } }, S)
+  );
+}
+export {
+  q as S,
+  E as c
+};

package/dist/SplitPane.css

@@ -1 +1 @@
-@layer elcrm-components{.cFr{display:flex;min-height:0;min-width:0}.cFx{flex-direction:row}.cFy{flex-direction:column}.cFp{min-width:0;min-height:0;overflow:auto}.cFh{flex:0 0 var(--split-handle-size);margin:0;padding:0;border:0;background:var(--split-handle-bg);cursor:col-resize;touch-action:none}.cFy .cFh{cursor:row-resize}.cFh:hover,.cFh:focus-visible{background:var(--split-handle-bg-hover)}}
+@layer elcrm-components{.dsr{display:flex;min-height:0;min-width:0}.dsx{flex-direction:row}.dsy{flex-direction:column}.dsp{min-width:0;min-height:0;overflow:auto}.dsh{flex:0 0 var(--split-handle-size);margin:0;padding:0;border:0;background:var(--split-handle-bg);cursor:col-resize;touch-action:none}.dsy .dsh{cursor:row-resize}.dsh:hover,.dsh:focus-visible{background:var(--split-handle-bg-hover)}}

package/dist/SplitPane.d.ts

@@ -2,9 +2,11 @@ import { default as React } from 'react';
 export type SplitPaneDirection = "horizontal" | "vertical";
 export type SplitPaneProps = React.HTMLAttributes<HTMLDivElement> & {
     direction: SplitPaneDirection;
-    /** Доля первой панели 0…1 */
-    ratio: number;
-    onRatioChange: (ratio: number) => void;
+    /** Доля первой панели 0…1 (controlled). */
+    ratio?: number;
+    /** Начальная доля (uncontrolled). @default 0.5 */
+    defaultRatio?: number;
+    onRatioChange?: (ratio: number) => void;
     minFirst?: number;
     minSecond?: number;
     first: React.ReactNode;
@@ -17,13 +19,12 @@ export type SplitPaneProps = React.HTMLAttributes<HTMLDivElement> & {
  * ```tsx
  * <SplitPane
  *   direction="horizontal"
- *   ratio={0.58}
+ *   ratio={ratio}
  *   onRatioChange={setRatio}
  *   first={<Preview />}
  *   second={<Editor />}
  * />
+ * <SplitPane direction="horizontal" defaultRatio={0.58} first={…} second={…} />
  * ```
- *
- * Токены: `--split-handle-size`, `--split-handle-bg`.
  */
-export declare function SplitPane({ direction, ratio, onRatioChange, minFirst, minSecond, first, second, className, ...rest }: SplitPaneProps): React.JSX.Element;
+export declare function SplitPane({ direction, ratio: ratioProp, defaultRatio, onRatioChange, minFirst, minSecond, first, second, className, ...rest }: SplitPaneProps): React.JSX.Element;

package/dist/SplitPane.js

@@ -1,4 +1,4 @@
-import { S as t, c as i } from "./SplitPane-DR7PCZ8f.js";
+import { S as t, c as i } from "./SplitPane-DBa-g9td.js";
 export {
   t as SplitPane,
   i as clampSplitRatio

package/dist/Stack-BPTehVYc.js

@@ -0,0 +1,53 @@
+import i from "react";
+import { c as u } from "./cx-CcykAxZN.js";
+import './Stack.css';function c(t) {
+  if (t != null)
+    return { gap: typeof t == "number" ? `${t}px` : t };
+}
+const f = "ksr", p = "ksc", d = "ksg", k = "ksh", g = "ksn", o = {
+  root: f,
+  column: p,
+  grid: d,
+  horizontal: k,
+  named: g
+};
+function h(t) {
+  if (typeof t == "number")
+    return t <= 0 ? void 0 : `repeat(${t}, minmax(0, 1fr))`;
+  if (t.length !== 0)
+    return t.map((n) => typeof n == "number" ? `${n}px` : n).join(" ");
+}
+function y({
+  direction: t = "column",
+  columns: n,
+  gap: e,
+  children: a,
+  className: m,
+  style: s,
+  ...l
+}) {
+  const r = t === "grid" && n != null ? h(n) : void 0;
+  return /* @__PURE__ */ i.createElement(
+    "div",
+    {
+      className: u(
+        o.root,
+        t === "column" && o.column,
+        t === "row" && o.horizontal,
+        t === "grid" && (r ? o.named : o.grid),
+        m
+      ),
+      style: {
+        ...c(e),
+        ...r ? { "--stack-columns-template": r } : null,
+        ...s
+      },
+      ...l
+    },
+    a
+  );
+}
+export {
+  y as S,
+  h as s
+};

package/dist/Stack.css

@@ -1 +1 @@
-@layer elcrm-components{.c1r{box-sizing:border-box;min-width:0;gap:var(--shell-gap)}.c1c,.c1g{width:100%}.c1c{display:flex;flex-direction:column}.c1h{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:100%}.c1g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stack-grid-min)),1fr))}.c1n{display:grid;width:100%;align-items:stretch;grid-template-columns:var(--stack-columns-template)}}
+@layer elcrm-components{.ksr{box-sizing:border-box;min-width:0;gap:var(--shell-gap)}.ksc,.ksg{width:100%}.ksc{display:flex;flex-direction:column}.ksh{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;width:auto;max-width:100%}.ksg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--stack-grid-min)),1fr))}.ksn{display:grid;width:100%;align-items:stretch;grid-template-columns:var(--stack-columns-template)}}

package/dist/Stack.d.ts

@@ -8,7 +8,8 @@ export declare function stackColumnsTemplate(columns: StackColumns): string | un
 /**
  * Универсальный стек (ряд / колонка) с отступами между детьми.
  *
- * Роли: Stack = базовая раскладка; заменяет устаревшие Block / Row / Column.
+ * Роли: Stack = базовая раскладка (Block / Row / Column удалены —
+ * `elcrm migrate components`).
  * Внутри Section, Card, форм и списков действий.
  *
  * @example

package/dist/Stack.js

@@ -1,4 +1,4 @@
-import { S as t, s as e } from "./Stack-XkmPSswj.js";
+import { S as t, s as e } from "./Stack-BPTehVYc.js";
 export {
   t as Stack,
   e as stackColumnsTemplate

package/dist/Stat-p8j4PjrC.js

@@ -0,0 +1,28 @@
+import e from "react";
+import { C as u } from "./Card-a7N8Uh_H.js";
+import { c as n } from "./cx-CcykAxZN.js";
+import './Stat.css';const p = "ktr", k = "ktl", g = "kte", i = "ktv", d = "kta", w = "ktu", f = "ktw", v = "ktd", b = "ktn", t = {
+  root: p,
+  label: k,
+  emph: g,
+  value: i,
+  accent: d,
+  up: w,
+  warning: f,
+  danger: v,
+  neutral: b
+};
+function N({
+  label: c,
+  value: r,
+  tone: a = "neutral",
+  labelMuted: s = !0,
+  className: o,
+  ...l
+}) {
+  const m = a === "accent" ? t.accent : a === "success" ? t.up : a === "warning" ? t.warning : a === "danger" ? t.danger : t.neutral;
+  return /* @__PURE__ */ e.createElement(u, { className: n(t.root, m, o), ...l }, /* @__PURE__ */ e.createElement("span", { className: n(t.label, !s && t.emph) }, c), /* @__PURE__ */ e.createElement("span", { className: t.value }, r));
+}
+export {
+  N as S
+};

package/dist/Stat.css

@@ -1 +1 @@
-@layer elcrm-components{.c4r{display:flex;flex-direction:column;gap:6px}.c4l{font-size:var(--shell-font-size-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted);line-height:1.2}.c4e{color:var(--shell-color)}.c4v{font-size:var(--stat-value-size);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--shell-color)}.c4a .c4v{color:var(--shell-color-accent)}.c4u .c4v{color:var(--shell-color-success)}.c4w .c4v{color:var(--shell-color-warning)}.c4d .c4v{color:var(--shell-color-danger)}}
+@layer elcrm-components{.ktr{display:flex;flex-direction:column;gap:6px}.ktl{font-size:var(--shell-font-size-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-color-muted);line-height:1.2}.kte{color:var(--shell-color)}.ktv{font-size:var(--stat-value-size);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--shell-color)}.kta .ktv{color:var(--shell-color-accent)}.ktu .ktv{color:var(--shell-color-success)}.ktw .ktv{color:var(--shell-color-warning)}.ktd .ktv{color:var(--shell-color-danger)}.ktn .ktv{color:var(--shell-color)}}

package/dist/Stat.js

@@ -1,4 +1,4 @@
-import { S as o } from "./Stat-sKXJwz5L.js";
+import { S as o } from "./Stat-p8j4PjrC.js";
 export {
   o as Stat
 };

package/dist/TabSections-Dppe9wiz.js

@@ -0,0 +1,84 @@
+import a, { useMemo as k, useId as x, useRef as C, Suspense as K } from "react";
+import { c as p } from "./cx-CcykAxZN.js";
+import { h as S } from "./rovingKeys-Di9N1Nct.js";
+import { u as T } from "./useControllableValue-BaE0VR5d.js";
+import './TabSections.css';const w = "ntr", D = "ntb", M = "ntn", P = "ntt", h = "nta", j = "nte", q = "nts", z = "ntm", l = {
+  root: w,
+  bar: D,
+  nav: M,
+  tab: P,
+  active: h,
+  ember: j,
+  slot: q,
+  main: z
+};
+function H({
+  items: s = [],
+  resolveSection: b,
+  children: o,
+  value: f,
+  defaultValue: c,
+  onValueChange: E,
+  loading: N = null,
+  actions: u,
+  className: y,
+  navLabel: I = "Вкладки"
+}) {
+  const R = k(() => {
+    var e;
+    return c || (((e = s.find((n) => !n.disabled)) == null ? void 0 : e.value) ?? "");
+  }, [c, s]), [t, d] = T(
+    f,
+    R,
+    E
+  ), $ = s.filter((e) => !e.disabled).map((e) => e.value), r = x(), v = C(null), m = `${r}-panel`, i = o == null && t && b ? b(t) : null;
+  return /* @__PURE__ */ a.createElement("div", { className: p(l.root, y) }, /* @__PURE__ */ a.createElement("div", { className: l.bar }, /* @__PURE__ */ a.createElement(
+    "nav",
+    {
+      ref: v,
+      className: l.nav,
+      "aria-label": I,
+      role: "tablist",
+      onKeyDown: (e) => S(e, {
+        values: $,
+        value: t,
+        onSelect: d,
+        focusRoot: v.current
+      })
+    },
+    s.map((e) => {
+      const n = e.value === t, g = `${r}-tab-${e.value}`;
+      return /* @__PURE__ */ a.createElement(
+        "button",
+        {
+          key: e.value,
+          id: g,
+          type: "button",
+          role: "tab",
+          className: p(l.tab, n && l.active),
+          "data-value": e.value,
+          "data-active": n ? "true" : void 0,
+          "aria-selected": n,
+          "aria-controls": m,
+          tabIndex: n ? 0 : -1,
+          disabled: e.disabled,
+          onClick: () => d(e.value)
+        },
+        /* @__PURE__ */ a.createElement("span", null, e.label),
+        e.badge != null && e.badge !== "" ? /* @__PURE__ */ a.createElement("em", { className: l.ember }, e.badge) : null
+      );
+    })
+  ), u != null ? /* @__PURE__ */ a.createElement("div", { className: l.slot }, u) : null), /* @__PURE__ */ a.createElement(
+    "div",
+    {
+      id: m,
+      className: l.main,
+      role: "tabpanel",
+      "aria-labelledby": t ? `${r}-tab-${t}` : void 0
+    },
+    o ?? (i ? /* @__PURE__ */ a.createElement(K, { fallback: N }, a.createElement(i)) : null)
+  ));
+}
+export {
+  H as T
+};