@elcrm/components 0.2.9 → 0.2.13

package/dist/Sidebar-CYFaPqdC.js

@@ -0,0 +1,178 @@
+import e from "react";
+import { B as K } from "./Badge-jp-9iNNL.js";
+import { D as R } from "./Dropdown-DosvDR13.js";
+import { I as F } from "./Item-D4okhsfW.js";
+import { b as I } from "./badgeText-CRzlIzi3.js";
+import { c as f } from "./cx-CcykAxZN.js";
+import { c as L, b as M } from "./navTree-BRyaILN9.js";
+import { u as O } from "./useControllableValue-CWqH1kpM.js";
+import './Sidebar.css';const T = "c2r", V = "c2b", j = "c2x", z = "c2g", A = "c2s", W = "c2p", $ = "c2h", G = "c2n", H = "c2i", J = "c2a", P = "c2o", Q = "c2l", U = "c2d", X = "c2c", Y = "c2m", Z = "c2f", _ = "c2q", S = "c2w", ee = "c2u", ne = "c2k", ce = "c2v", n = {
+  r: T,
+  b: V,
+  x: j,
+  g: z,
+  s: A,
+  p: W,
+  h: $,
+  n: G,
+  i: H,
+  a: J,
+  o: P,
+  l: Q,
+  d: U,
+  c: X,
+  m: Y,
+  f: Z,
+  q: _,
+  w: S,
+  u: ee,
+  k: ne,
+  v: ce
+};
+function te({ className: l }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: l, 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 le({
+  footer: l,
+  className: u,
+  ...c
+}) {
+  const o = /* @__PURE__ */ e.createElement(te, { className: n.k });
+  if (e.isValidElement(l) && typeof l.type != "string") {
+    const s = l.props;
+    return e.cloneElement(l, {
+      as: "button",
+      extra: s.extra ?? o,
+      className: f(s.className, u),
+      ...c,
+      onClick: (t) => {
+        var i, a;
+        (i = s.onClick) == null || i.call(s, t), (a = c.onClick) == null || a.call(c, t);
+      }
+    });
+  }
+  return /* @__PURE__ */ e.createElement("button", { type: "button", className: f(n.u, u), ...c }, /* @__PURE__ */ e.createElement("span", { className: n.w }, l), o);
+}
+function ae({ className: l }) {
+  return /* @__PURE__ */ e.createElement("svg", { className: l, 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 x({
+  items: l,
+  value: u,
+  open: c,
+  onSelect: o,
+  onToggle: s
+}) {
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, l.map((t) => {
+    const i = t.items, a = i != null && i.length > 0, E = a && c.includes(t.value), p = I(t.badge), m = !a && u === t.value;
+    return /* @__PURE__ */ e.createElement("li", { key: t.value }, /* @__PURE__ */ e.createElement(
+      F,
+      {
+        as: "button",
+        active: m,
+        className: f(n.i, m && n.a),
+        "aria-current": m ? "page" : void 0,
+        "aria-expanded": a ? E : void 0,
+        "data-open": E ? "true" : void 0,
+        onClick: () => {
+          a ? s(t.value) : o == null || o(t.value);
+        }
+      },
+      t.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.o, "aria-hidden": !0 }, t.icon) : null,
+      /* @__PURE__ */ e.createElement("span", { className: n.l }, t.label),
+      p != null ? /* @__PURE__ */ e.createElement(K, { className: n.d, tone: "accent", size: "s" }, p) : null,
+      a ? /* @__PURE__ */ e.createElement(ae, { className: n.c }) : null
+    ), a && E ? /* @__PURE__ */ e.createElement("ul", { className: n.m }, /* @__PURE__ */ e.createElement(
+      x,
+      {
+        items: i,
+        value: u,
+        open: c,
+        onSelect: o,
+        onToggle: s
+      }
+    )) : null);
+  }));
+}
+function pe({
+  groups: l,
+  items: u,
+  value: c,
+  onSelect: o,
+  open: s,
+  defaultOpen: t,
+  onOpenChange: i,
+  variant: a = "cards",
+  brand: E,
+  extra: p,
+  footer: m,
+  footerItems: g,
+  onFooterSelect: y,
+  footerMenuLabel: C = "Меню аккаунта",
+  version: v,
+  className: w,
+  "aria-label": q = "Основное меню"
+}) {
+  const N = l ?? u ?? [], [d = [], k] = O(
+    s,
+    L(N, t, c),
+    i
+  ), h = e.useRef(c);
+  e.useEffect(() => {
+    if (c == null || c === h.current) {
+      h.current = c;
+      return;
+    }
+    h.current = c;
+    const b = M(N, c).filter((D) => !d.includes(D));
+    b.length && k([...d, ...b]);
+  }, [c, N, d, k]);
+  const B = (r) => {
+    k(
+      d.includes(r) ? d.filter((b) => b !== r) : [...d, r]
+    );
+  };
+  return /* @__PURE__ */ e.createElement(
+    "aside",
+    {
+      className: f(n.r, a === "plain" && n.p, w),
+      "aria-label": q
+    },
+    E != null || p != null ? /* @__PURE__ */ e.createElement("div", { className: n.b }, E, p != null ? /* @__PURE__ */ e.createElement("div", { className: n.x }, p) : null) : null,
+    /* @__PURE__ */ e.createElement("div", { className: n.g }, N.map((r) => /* @__PURE__ */ e.createElement("nav", { key: r.value, className: n.s, "aria-label": r.title ?? "Навигация" }, r.title ? /* @__PURE__ */ e.createElement("div", { className: n.h }, r.title) : null, /* @__PURE__ */ e.createElement("ul", { className: n.n }, /* @__PURE__ */ e.createElement(
+      x,
+      {
+        items: r.items ?? [],
+        value: c,
+        open: d,
+        onSelect: o,
+        onToggle: B
+      }
+    ))))),
+    m != null || v != null ? /* @__PURE__ */ e.createElement("div", { className: f(n.s, n.f) }, m != null && g != null && g.length > 0 ? /* @__PURE__ */ e.createElement(
+      R,
+      {
+        className: n.q,
+        align: "start",
+        placement: "top",
+        label: C,
+        trigger: /* @__PURE__ */ e.createElement(le, { footer: m, className: n.w }),
+        items: g,
+        onSelect: y
+      }
+    ) : m, v != null ? /* @__PURE__ */ e.createElement("div", { className: n.v }, v) : null) : null
+  );
+}
+export {
+  pe 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}.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{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{.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}}}

package/dist/Sidebar.d.ts

@@ -11,6 +11,17 @@ export type SidebarItem = {
     icon?: React.ReactNode;
     /** Счётчик справа */
     badge?: number | string | null;
+    /**
+     * Вложенные пункты — есть → шеврон и раскрытие.
+     * Клик по родителю только открывает/закрывает, `onSelect` не зовём.
+     */
+    items?: SidebarItem[];
+    /**
+     * Подменю открыто при первом рендере.
+     * Если выбран потомок — ветка откроется сама.
+     * @default false
+     */
+    defaultOpen?: boolean;
 };
 /** Группа пунктов. `title` — «Аккаунт» / «Админ». */
 export type SidebarGroup = {
@@ -39,8 +50,23 @@ export type SidebarGroup = {
  *   brand={<Brand as="strong">App</Brand>}
  *   extra={<Notifications.Bell />}
  *   groups={[
- *     { value: "main", items: [{ value: "home", label: "Обзор", icon: <Icon /> }] },
- *     { value: "admin", title: "Админ", items: [{ value: "users", label: "Люди" }] },
+ *     {
+ *       value: "docs",
+ *       items: [
+ *         { value: "games", label: "VK Games" },
+ *         {
+ *           value: "bridge",
+ *           label: "VK Bridge",
+ *           defaultOpen: true,
+ *           items: [
+ *             { value: "intro", label: "Введение" },
+ *             { value: "events", label: "События", items: [
+ *               { value: "evt-init", label: "VKWebAppInit" },
+ *             ] },
+ *           ],
+ *         },
+ *       ],
+ *     },
  *   ]}
  *   footer={<AvatarName title="Паша" description="mail@…" />}
  *   footerItems={[
@@ -62,8 +88,19 @@ export type SidebarProps = {
     items?: SidebarGroup[];
     /** Текущий пункт */
     value?: string;
-    /** Выбор пункта */
+    /** Выбор пункта (только листья, без `items`) */
     onSelect?: (value: string) => void;
+    /**
+     * Раскрытые родители (их `value`). Контролируемый режим.
+     * Вместе с `onOpenChange`.
+     */
+    open?: string[];
+    /**
+     * Начально раскрытые (плюс `item.defaultOpen` и предки выбранного).
+     */
+    defaultOpen?: string[];
+    /** Смена набора раскрытых родителей */
+    onOpenChange?: (open: string[]) => void;
     /**
      * `cards` — блоки-карточки.
      * `plain` — плоский список.
@@ -96,4 +133,4 @@ export type SidebarProps = {
  *
  * @see Layout, Brand, Item, Badge, NavSections
  */
-export declare function Sidebar({ groups, items, value, onSelect, variant, brand, extra, footer, footerItems, onFooterSelect, footerMenuLabel, version, className, "aria-label": ariaLabel, }: SidebarProps): React.JSX.Element;
+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;

package/dist/Sidebar.js

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

package/dist/SplitPane-DR7PCZ8f.js

@@ -0,0 +1,74 @@
+import o from "react";
+import { c as P } from "./cx-CcykAxZN.js";
+import './SplitPane.css';function $(t, e, l, i) {
+  if (e <= 0) return t;
+  const r = l / e, c = 1 - i / e;
+  return c < r ? 0.5 : Math.max(r, Math.min(c, t));
+}
+const B = "cFr", C = "cFx", D = "cFy", H = "cFp", X = "cFh", n = {
+  r: B,
+  x: C,
+  y: D,
+  p: H,
+  h: X
+}, z = 6;
+function E() {
+  if (typeof document > "u") return z;
+  const t = getComputedStyle(document.documentElement).getPropertyValue("--split-handle-size").trim(), e = Number.parseFloat(t);
+  return Number.isFinite(e) && e > 0 ? e : z;
+}
+function V({
+  direction: t,
+  ratio: e,
+  onRatioChange: l,
+  minFirst: i = 140,
+  minSecond: r = 140,
+  first: c,
+  second: S,
+  className: b,
+  ...F
+}) {
+  const m = o.useRef(null), R = t === "horizontal" ? "x" : "y", N = (u) => {
+    u.preventDefault();
+    const p = m.current;
+    if (!p) return;
+    const f = E(), s = p.getBoundingClientRect(), h = t === "horizontal" ? s.width - f : s.height - f, y = (a, L) => {
+      const M = t === "horizontal" ? a - s.left : L - s.top;
+      l($(M / h, h, i, r));
+    };
+    y(u.clientX, u.clientY);
+    const x = (a) => {
+      y(a.clientX, a.clientY);
+    }, v = () => {
+      document.removeEventListener("pointermove", x), document.removeEventListener("pointerup", v), document.body.style.cursor = "", document.body.style.userSelect = "";
+    };
+    document.body.style.cursor = t === "horizontal" ? "col-resize" : "row-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", x), document.addEventListener("pointerup", v);
+  }, d = E(), g = `calc((100% - ${d}px) * ${e})`, w = `calc((100% - ${d}px) * ${1 - e})`;
+  return /* @__PURE__ */ o.createElement(
+    "div",
+    {
+      ref: m,
+      className: P(n.r, R === "x" ? n.x : n.y, b),
+      ...F
+    },
+    /* @__PURE__ */ o.createElement("div", { className: n.p, style: { flexBasis: g } }, c),
+    /* @__PURE__ */ o.createElement(
+      "button",
+      {
+        type: "button",
+        className: n.h,
+        role: "separator",
+        "aria-orientation": t === "horizontal" ? "vertical" : "horizontal",
+        "aria-valuenow": Math.round(e * 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        onPointerDown: N
+      }
+    ),
+    /* @__PURE__ */ o.createElement("div", { className: n.p, style: { flexBasis: w } }, S)
+  );
+}
+export {
+  V as S,
+  $ as c
+};

package/dist/SplitPane.css

@@ -0,0 +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)}}

package/dist/SplitPane.d.ts

@@ -0,0 +1,29 @@
+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;
+    minFirst?: number;
+    minSecond?: number;
+    first: React.ReactNode;
+    second: React.ReactNode;
+};
+/**
+ * Две панели с перетаскиваемым разделителем.
+ *
+ * @example
+ * ```tsx
+ * <SplitPane
+ *   direction="horizontal"
+ *   ratio={0.58}
+ *   onRatioChange={setRatio}
+ *   first={<Preview />}
+ *   second={<Editor />}
+ * />
+ * ```
+ *
+ * Токены: `--split-handle-size`, `--split-handle-bg`.
+ */
+export declare function SplitPane({ direction, ratio, onRatioChange, minFirst, minSecond, first, second, className, ...rest }: SplitPaneProps): React.JSX.Element;

package/dist/SplitPane.js

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

package/dist/Table-BoDr3X2d.js

@@ -0,0 +1,25 @@
+import e from "react";
+import { c as n } from "./cx-CcykAxZN.js";
+import './Table.css';const r = "cDw", f = "cDt", m = "cDf", t = {
+  w: r,
+  t: f,
+  f: m
+};
+function w({
+  layout: c = "auto",
+  className: a,
+  children: o,
+  ...s
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: t.w }, /* @__PURE__ */ e.createElement(
+    "table",
+    {
+      className: n(t.t, c === "fixed" && t.f, a),
+      ...s
+    },
+    o
+  ));
+}
+export {
+  w as T
+};

package/dist/Table.css

@@ -0,0 +1 @@
+@layer elcrm-components{.cDw{overflow:auto}.cDt{width:100%;border-collapse:collapse;font-size:var(--table-font-size);color:var(--shell-color)}.cDf{table-layout:fixed}.cDt th,.cDt td{padding:var(--table-cell-padding);border-bottom:1px solid var(--shell-border);text-align:left;vertical-align:top}.cDt th{color:var(--shell-color-muted);font-weight:var(--shell-font-weight);font-size:var(--table-head-font-size);text-transform:uppercase;letter-spacing:.04em}.cDt code{font-size:var(--table-code-font-size)}}

package/dist/Table.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
+    /** `fixed` — равномерные колонки, ширины через col/colgroup в children. */
+    layout?: "auto" | "fixed";
+};
+/**
+ * Таблица данных: обёртка со скроллом + стили shell.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <thead>
+ *     <tr>
+ *       <th>Имя</th>
+ *       <th>Тип</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td><code>label</code></td>
+ *       <td>string</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ * ```
+ *
+ * Токены: `--table-*`, `--shell-border`, `--shell-color`.
+ */
+export declare function Table({ layout, className, children, ...rest }: TableProps): React.JSX.Element;

package/dist/Table.js

@@ -0,0 +1,4 @@
+import { T as o } from "./Table-BoDr3X2d.js";
+export {
+  o as Table
+};

package/dist/index.css

@@ -8,6 +8,8 @@
 
 @layer elcrm-components{.cjr{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.2rem .5rem;border-radius:999px;border:0;font-size:var(--shell-font-size-sm);font-weight:600;line-height:1;white-space:nowrap}.cjs{padding:2px var(--shell-gap-sm);font-size:var(--shell-font-size-sm);letter-spacing:.04em}.cjm{padding:.2rem .5rem;font-size:var(--shell-font-size-sm)}.cjl{padding:.3rem .65rem;font-size:var(--shell-font-size)}.cjn{background:var(--shell-background-hover);color:var(--shell-color)}.cja{background:color-mix(in srgb,var(--shell-color-accent) 16%,transparent);color:var(--shell-color-accent)}.cju{background:color-mix(in srgb,var(--shell-color-success) 16%,transparent);color:var(--shell-color-success)}.cjw{background:color-mix(in srgb,var(--shell-color-warning) 16%,transparent);color:var(--shell-color-warning)}.cjd{background:color-mix(in srgb,var(--shell-color-danger) 16%,transparent);color:var(--shell-color-danger)}.cjo{flex-shrink:0;width:.45em;height:.45em;border-radius:50%;background:currentColor}}
 
+@layer elcrm-components{.cLr{margin:0;padding:var(--banner-padding);border:1px solid var(--banner-border);border-radius:var(--shell-radius);background:var(--banner-bg);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.45}.cLi{--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))}.cLw{--banner-bg: color-mix(in srgb, var(--shell-color-warning) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-warning) 40%, var(--shell-border))}.cLd{--banner-bg: color-mix(in srgb, var(--shell-color-danger) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-danger) 40%, var(--shell-border))}.cLs{--banner-bg: color-mix(in srgb, var(--shell-color-success) 10%, var(--shell-bg));--banner-border: color-mix(in srgb, var(--shell-color-success) 40%, var(--shell-border))}.cLr code{font-size:.92em}}
+
 @layer elcrm-components{.cnr{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:0;background:transparent;font:inherit;font-weight:700;letter-spacing:.02em;color:var(--shell-color);white-space:nowrap;cursor:pointer;text-decoration:none}.cnr:hover{color:var(--shell-color-accent)}}
 
 @layer elcrm-components{.c0r{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm);list-style:none;margin:0;padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.c0i{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);min-width:0;color:inherit}.c0i:is(a,button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:0;border:none;background:transparent;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-decoration:none}.c0i:is(a,button):hover{color:var(--shell-color)}.c0c,.c0i[aria-current=page]{color:var(--shell-color-accent);cursor:default}.c0n{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);overflow:hidden;border-radius:calc(var(--shell-radius) * .5);color:inherit}.c0n img{width:100%;height:100%;object-fit:cover;display:block}.c0l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c0d{display:inline-flex;flex-shrink:0;width:.75rem;height:.75rem;color:var(--shell-color-muted)}.c0s{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:var(--shell-color-muted);-webkit-user-select:none;user-select:none}.c0v{width:.75rem;height:.75rem;display:block}.c0e{display:inline-flex;align-items:center;justify-content:center;min-width:1em;color:var(--shell-color-muted);letter-spacing:.05em}.c0e:is(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;padding:.15rem .35rem;border:none;border-radius:calc(var(--shell-radius) * .4);background:transparent;font:inherit;color:inherit;cursor:pointer}.c0e:is(button):hover{background:var(--shell-background-hover);color:var(--shell-color)}}
@@ -16,6 +18,8 @@
 
 @layer elcrm-components{.c8r{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--chat-background);border:var(--chat-border);border-radius:var(--chat-radius)}.c8l{width:var(--chat-list-width);max-width:100%}.c8g{width:100%}.c8h{flex:0 0 auto;padding:var(--chat-header-padding);border-bottom:var(--chat-border)}.c8b{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--chat-body-padding)}.c8g .c8h{padding:var(--chat-messages-header-padding)}.c8g .c8b{display:flex;flex-direction:column;padding:var(--chat-messages-body-padding)}.c8f{flex:0 0 auto;padding:var(--chat-footer-padding);border-top:var(--chat-border)}.c8g .c8f{padding:var(--chat-messages-footer-padding)}.c8p{display:flex;align-items:stretch;gap:var(--chat-split-gap);min-height:0;height:100%}.c8p>*{min-height:0}}
 
+@layer elcrm-components{.cEr{border:1px solid var(--shell-border);border-radius:var(--shell-radius);background:var(--code-block-bg);overflow:hidden}.cEb{display:flex;justify-content:space-between;align-items:center;gap:var(--shell-gap-sm);padding:var(--code-block-bar-padding);border-bottom:1px solid var(--shell-border);font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cEp{margin:0;padding:var(--code-block-padding);overflow:auto;font-family:var(--code-block-font-family);font-size:var(--code-block-font-size);line-height:var(--code-block-line-height);color:var(--shell-color);white-space:pre}.cEa{display:inline-flex;align-items:center;gap:.35rem;flex-shrink:0}.cEc{border:0;background:transparent;color:var(--shell-color-accent);cursor:pointer;font:inherit;padding:0}.cEc:hover,.cEc:focus-visible{text-decoration:underline}}
+
 @layer elcrm-components{.crr{position:relative;display:inline-flex;vertical-align:middle}.crt{display:inline-flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:var(--shell-padding);box-sizing:border-box;font:inherit;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.2}.crt[data-size]{height:var(--control-height);min-height:var(--control-height);padding-block:0;box-sizing:border-box}.crt:hover{background:var(--shell-background-hover)}.crt[data-open=true]{border-color:var(--shell-color-accent);color:var(--shell-color-accent)}.crc{display:inline-flex;width:var(--shell-icon-size);height:var(--shell-icon-size);flex-shrink:0;color:var(--shell-color-muted)}.crt[data-open=true] .crc{color:var(--shell-color-accent)}.crp{min-width:0}.crh{margin:0;padding:var(--shell-padding);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-muted);line-height:1.3}.crg{display:flex;flex-direction:column;gap:2px}.crd{height:0;margin:var(--shell-gap-sm) 0;border:0;border-top:1px solid var(--shell-border)}.cri{display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;margin:0;padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;font-size:var(--shell-font-size);font-weight:500;color:var(--shell-color);background:transparent;border:none;border-radius:calc(var(--shell-radius) * .7);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1.35}.cri:hover:not(:disabled),.cri:focus-visible:not(:disabled){background:var(--shell-background-hover);outline:none}.cri[data-checked=true]{background:var(--shell-background-selected)}.cri[data-danger=true]{color:var(--shell-color-danger)}.cri[data-danger=true] .crn,.cri[data-danger=true] .crm{color:inherit}.cri:disabled,.cri[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.crn,.crk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crk{color:var(--shell-color-accent)}.crl{flex:1;min-width:0}.cru{flex-shrink:0;margin-left:auto;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.crm{display:inline-flex;flex-shrink:0;margin-left:auto;width:var(--shell-icon-size);height:var(--shell-icon-size);color:var(--shell-color-muted)}.crb{display:inline-flex;flex-shrink:0;width:var(--shell-status-size);height:var(--shell-status-size);border-radius:50%}.cro{background:var(--shell-color-success)}.crf{background:var(--shell-color-muted)}.crx{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;width:var(--shell-check-size);height:var(--shell-check-size);border:1px solid var(--shell-border);border-radius:calc(var(--shell-radius) * .4);background:var(--shell-background);color:var(--avatar-color)}.cry{border-color:var(--shell-color-accent);background:var(--shell-color-accent)}.crv{width:70%;height:70%;display:block}}
 
 @layer elcrm-components{.cpr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--shell-gap);padding:var(--shell-padding);text-align:center;color:var(--shell-color-muted)}.cpi{display:flex;margin-bottom:var(--shell-gap-sm);color:var(--shell-color-muted)}.cpt{margin:0;font-size:var(--shell-font-size-lg);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cpd{margin:0;max-width:22rem;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cpa{display:flex;flex-wrap:wrap;gap:var(--shell-gap-sm);justify-content:center;margin-top:var(--shell-gap)}}
@@ -38,7 +42,7 @@
 
 @layer elcrm-components{.cmr{display:flex;align-items:center;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cmv{flex-direction:column;align-items:stretch}.cmi{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--button-color-muted);padding:var(--button-padding);border-radius:var(--button-radius);font:inherit;line-height:1;cursor:pointer;text-align:left;gap:var(--shell-gap-sm)}.cmd{flex-shrink:0;min-width:16px;height:16px;padding:0 4px;font-size:10px}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--button-background-hover);color:var(--button-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--button-background-selected);color:var(--button-color)}.cmu{width:100%;align-items:stretch;gap:1.25rem;padding:0;border-bottom:1px solid var(--shell-border)}.cmu .cmi{border-radius:0;background:transparent;padding:.45rem .1rem .55rem;border-bottom:2px solid transparent;margin-bottom:-1px}.cmu .cmi:hover{background:transparent;color:var(--shell-color)}.cmu .cma,.cmu .cmi[aria-current=page],.cmu .cmi[data-active=true]{background:transparent;color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}}
 
-@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}
+@layer elcrm-components{.cvr{display:flex;align-items:stretch;gap:var(--shell-gap-lg);width:100%;flex:1 1 auto;min-height:0;box-sizing:border-box;padding:var(--nav-sections-padding)}.cvn{display:flex;flex-direction:column;gap:var(--shell-gap);flex:0 0 var(--nav-sections-nav-width);width:var(--nav-sections-nav-width);min-width:var(--nav-sections-nav-width);box-sizing:border-box}.cvg{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--shell-gap);border-bottom:1px solid var(--shell-border)}.cvg:last-of-type{border-bottom:none;padding-bottom:0}.cvl{font-size:var(--sidebar-group-font-size);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted);padding:0 var(--shell-padding-inline) var(--shell-gap-sm)}.cvi:is(button){position:relative;display:flex;width:100%;align-items:center;font-size:var(--shell-font-size-sm)}.cva:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 2px 2px 0;background:var(--shell-color-accent)}.cvi:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cvc{display:inline-flex;flex:0 0 auto;color:var(--shell-color-muted);line-height:0}.cva .cvc{color:var(--shell-color)}.cvt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cve{flex-shrink:0;width:12px;height:12px;margin-left:auto;color:var(--shell-color-muted);transition:transform .15s ease}.cvi:is(button)[data-open=true] .cve{transform:rotate(180deg);color:inherit}.cvs{display:flex;flex-direction:column;gap:2px;padding-inline-start:var(--sidebar-indent)}.cvf{margin-top:auto;padding-top:var(--shell-gap);border-top:1px solid var(--shell-border)}.cvm{flex:1 1 auto;min-width:0;max-width:var(--nav-sections-main-max-width);width:100%;min-height:0;overflow:auto}@media (max-width: 720px){.cvr{flex-direction:column}.cvn{flex:none;width:100%;min-width:0;max-width:none}}}
 
 @layer elcrm-components{.ccr{display:flex;flex-direction:column;gap:var(--shell-gap);margin:0 0 var(--shell-gap)}.cck{position:sticky;top:0;z-index:var(--shell-z);background:var(--shell-bg)}.ccw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--shell-gap-sm)}.cct{min-width:0;max-width:36rem}.cch{margin:0;display:flex;align-items:flex-start;gap:.4em;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.15}.ccn{min-width:0}.ccu{display:inline-flex;align-items:center;margin-top:.12em;font-size:.7rem;font-weight:600;line-height:1;color:var(--shell-color-muted)}.ccs{margin:var(--shell-gap-sm) 0 0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.cca{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.ccc{display:flex;flex-direction:column;gap:var(--shell-gap);min-width:0}}
 
@@ -56,7 +60,9 @@
 
 @layer elcrm-components{.cep{display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--section-padding);flex:1;min-width:0}.ceu{box-sizing:border-box;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:var(--section-padding)}.cek{box-sizing:border-box;width:100%;max-width:var(--section-auth-card-max-width);padding:var(--shell-gap-lg);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow);display:flex;flex-direction:column;gap:var(--shell-gap)}.ceh{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cec{text-align:center;align-items:center}.cei{display:flex;margin-bottom:var(--shell-gap-sm)}.cec .cei{justify-content:center}.cet{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);letter-spacing:-.02em;color:var(--shell-color);line-height:1.25}.ced{font-size:var(--section-title-size-md)}.cee{margin:0;font-size:var(--shell-font-size);color:var(--shell-color-muted);line-height:1.45}.ceb{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;text-align:left}.ces{display:flex;flex-direction:column;gap:var(--shell-gap-sm);width:100%}.cel{display:flex;flex-direction:column;gap:var(--shell-gap);margin-bottom:var(--shell-gap-lg);padding-bottom:var(--shell-gap-lg);border-bottom:1px solid var(--shell-border)}.cel:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.cel .cet{font-size:var(--shell-font-size);font-weight:var(--shell-font-weight)}}
 
-@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}.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{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{.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{.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{.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)}}
 
@@ -64,6 +70,8 @@
 
 @layer elcrm-components{.ctr{display:flex;flex-direction:column;gap:var(--shell-gap);width:100%;min-width:0}.ctb{display:flex;align-items:flex-end;gap:var(--shell-gap);border-bottom:1px solid var(--shell-border);min-width:0}.ctn{display:flex;align-items:stretch;gap:var(--shell-gap-lg);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin}.ctt{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:var(--shell-gap-sm);flex:0 0 auto;margin:0 0 -1px;padding:var(--shell-padding-block) .15rem;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--shell-color-muted);font:inherit;font-size:var(--shell-font-size);font-weight:500;white-space:nowrap;cursor:pointer}.ctt:hover:not(:disabled){color:var(--shell-color)}.cta{color:var(--shell-color);border-bottom-color:var(--shell-color-accent)}.ctt:disabled{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cte{display:inline-flex;align-items:center;justify-content:center;min-width:1.15em;height:1.15em;padding:0 .35em;border-radius:999px;background:var(--shell-color-danger);color:var(--avatar-color);font-size:var(--sidebar-group-font-size);font-style:normal;font-weight:700;line-height:1}.cts{flex:0 0 auto;display:flex;align-items:center;padding-bottom:var(--shell-gap-sm)}.ctm{min-width:0;width:100%}}
 
+@layer elcrm-components{.cDw{overflow:auto}.cDt{width:100%;border-collapse:collapse;font-size:var(--table-font-size);color:var(--shell-color)}.cDf{table-layout:fixed}.cDt th,.cDt td{padding:var(--table-cell-padding);border-bottom:1px solid var(--shell-border);text-align:left;vertical-align:top}.cDt th{color:var(--shell-color-muted);font-weight:var(--shell-font-weight);font-size:var(--table-head-font-size);text-transform:uppercase;letter-spacing:.04em}.cDt code{font-size:var(--table-code-font-size)}}
+
 @layer elcrm-components{.c6r{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}.c6t{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c6d{margin:0;font-size:var(--shell-font-size-sm);font-weight:400;color:var(--shell-color-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c6s .c6t{font-size:var(--shell-font-size-sm)}.c6l .c6t{font-size:var(--shell-font-size-lg)}.c6l .c6d{font-size:var(--shell-font-size)}}
 
 @layer elcrm-components{.cCr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--toolbar-gap);width:100%;min-width:0;box-sizing:border-box;--field-width: auto}.cCr>[data-field]{flex:0 1 auto;width:auto;min-width:0;max-width:100%}.cCr>[data-field=search]{flex:1 1 var(--field-search-min-width, 10rem);width:auto!important;max-width:none}.cCr[data-width=s]{display:inline-flex;width:auto;max-width:100%}.cCr[data-align=center]{justify-content:center}.cCr[data-align=end]{justify-content:flex-end}.cCr[data-align=between]{justify-content:space-between}.cCr[data-size=s]{--control-height: var(--control-height-s);--field-height: var(--control-height-s);--control-font-size: 13px;--button-height: var(--button-height-s);--button-height-m: var(--button-height-s);--button-padding: var(--button-padding-s);--button-size-m: var(--button-size-s)}.cCr[data-size=l]{--control-height: var(--control-height-l);--field-height: var(--control-height-l);--button-height: var(--button-height-l);--button-height-m: var(--button-height-l);--button-size-m: var(--button-size-l)}}

package/dist/index.d.ts

@@ -81,6 +81,16 @@ export { Healthmap } from './Healthmap';
 export type { HealthmapProps, HealthmapData, HealthmapDay, HealthmapUnit, } from './Healthmap';
 export { PanelInfo } from './PanelInfo';
 export type { PanelInfoProps } from './PanelInfo';
+export { Table } from './Table';
+export type { TableProps } from './Table';
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';
+export { SplitPane, clampSplitRatio } from './SplitPane';
+export type { SplitPaneProps, SplitPaneDirection } from './SplitPane';
+export { Banner } from './Banner';
+export type { BannerProps, BannerTone } from './Banner';
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
 export { acquireOverlayZIndex, releaseOverlayZIndex, peekOverlayZIndex, } from './overlayZ';
 export { createLazyResolver } from './lazyRoute';
 export type { LazyRouteChunk } from './lazyRoute';

package/dist/index.es.d.ts

@@ -81,6 +81,16 @@ export { Healthmap } from './Healthmap';
 export type { HealthmapProps, HealthmapData, HealthmapDay, HealthmapUnit, } from './Healthmap';
 export { PanelInfo } from './PanelInfo';
 export type { PanelInfoProps } from './PanelInfo';
+export { Table } from './Table';
+export type { TableProps } from './Table';
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';
+export { SplitPane, clampSplitRatio } from './SplitPane';
+export type { SplitPaneProps, SplitPaneDirection } from './SplitPane';
+export { Banner } from './Banner';
+export type { BannerProps, BannerTone } from './Banner';
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
 export { acquireOverlayZIndex, releaseOverlayZIndex, peekOverlayZIndex, } from './overlayZ';
 export { createLazyResolver } from './lazyRoute';
 export type { LazyRouteChunk } from './lazyRoute';