@elcrm/components 0.1.1 → 0.2.0

package/dist/ItemColumn.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+import { UiSize } from './types';
+/**
+ * Колонка содержимого строки списка: иконка слева, текст столбиком, слоты справа.
+ *
+ * Роли: внутри {@link Item} / {@link Card} (идеи, тикеты, inbox).
+ * Не заменяет Item (клик / active) и не AvatarName (там фото).
+ *
+ * @param icon кружок слева (иконка приложения)
+ * @param title первая строка
+ * @param extra бейджи в правом верхнем углу строки title
+ * @param aside колонка справа на всю высоту (дата, действия)
+ * @param description превью / вторая строка
+ * @param footer третья строка (мета)
+ * @param meta куски футера через «·» (если нет footer)
+ * @param size `s` | `m` | `l`
+ * @param unread жирный title (непрочитанное)
+ *
+ * @example
+ * ```tsx
+ * <Item as="button" onClick={open}>
+ *   <ItemColumn
+ *     icon={<Icon />}
+ *     title="Тема"
+ *     extra={<Badge size="s" tone="accent">Новые</Badge>}
+ *     description="Превью текста…"
+ *     meta={["★ 2", "3 комм.", "Иван"]}
+ *   />
+ * </Item>
+ * ```
+ *
+ * Токены: `--item-column-gap`, `--item-column-icon-size`, `--item-column-icon-radius`,
+ * `--item-column-title-size`, `--item-column-title-line`.
+ */
+export type ItemColumnProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Иконка слева */
+    icon?: React.ReactNode;
+    /** Заголовок */
+    title?: React.ReactNode;
+    /** Справа сверху у title (Badge, счётчик) */
+    extra?: React.ReactNode;
+    /** Правая колонка (верхний край) */
+    aside?: React.ReactNode;
+    /** Описание / превью */
+    description?: React.ReactNode;
+    /** Подвал целиком */
+    footer?: React.ReactNode;
+    /** Куски подвала через точку — если нет `footer` */
+    meta?: React.ReactNode[];
+    /** Размер текста */
+    size?: UiSize;
+    /** Жирный title (непрочитанное) */
+    unread?: boolean;
+    /** Доп. строки под footer */
+    children?: React.ReactNode;
+};
+/**
+ * Иконка + колонка title / description / footer (+ extra / aside).
+ *
+ * @see Item, TextGroup, AvatarName, Badge
+ */
+export declare function ItemColumn({ icon, title, extra, aside, description, footer, meta, size, unread, children, className, ...rest }: ItemColumnProps): React.JSX.Element;

package/dist/ItemColumn.js

@@ -0,0 +1,4 @@
+import { I as e } from "./ItemColumn-M7a9L8CI.js";
+export {
+  e as ItemColumn
+};

package/dist/Layout-mi6Ghayv.js

@@ -0,0 +1,31 @@
+import l from "react";
+import { c as a } from "./cx-CcykAxZN.js";
+import './Layout.css';const f = "clr", h = "clx", k = "clm", x = "cls", F = "clb", L = "cla", g = "clk", y = "clh", D = "clf", n = {
+  r: f,
+  x: h,
+  m: k,
+  s: x,
+  b: F,
+  a: L,
+  k: g,
+  h: y,
+  f: D
+}, p = ["header", "footer", "sidebar"];
+function o(e, c) {
+  return (e ?? p).includes(c);
+}
+function I({
+  sidebar: e,
+  header: c,
+  footer: t,
+  fixed: s,
+  children: b,
+  className: m,
+  ...r
+}) {
+  const u = c != null && o(s, "header"), i = t != null && o(s, "footer"), v = e != null && o(s, "sidebar"), E = (s ?? p).length > 0, N = /* @__PURE__ */ l.createElement("main", { className: n.m }, c != null && !u ? c : null, b, t != null && !i ? t : null), d = /* @__PURE__ */ l.createElement(l.Fragment, null, u ? /* @__PURE__ */ l.createElement("div", { className: n.h }, c) : null, N, i ? /* @__PURE__ */ l.createElement("div", { className: n.f }, t) : null);
+  return e != null ? /* @__PURE__ */ l.createElement("div", { className: a(n.r, n.s, E && n.x, m), ...r }, /* @__PURE__ */ l.createElement("div", { className: a(n.a, v && n.k) }, e), /* @__PURE__ */ l.createElement("div", { className: n.b }, d)) : /* @__PURE__ */ l.createElement("div", { className: a(n.r, E && n.x, m), ...r }, d);
+}
+export {
+  I as L
+};

package/dist/Layout.css

@@ -1 +1 @@
-@layer elcrm-components{.clr{display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;max-height:100%;overflow:hidden;background:var(--shell-background-muted);gap:0}.clm{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}}
+@layer elcrm-components{.clr{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-sizing:border-box;background:var(--shell-background-muted);gap:0}.clx{height:var(--layout-height);max-height:var(--layout-height);overflow:hidden}.clm{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}.clr:not(.clx){height:auto;max-height:none;overflow:visible}.clr:not(.clx) .clm{overflow:visible;flex:0 1 auto;min-height:auto}.cls{flex-direction:row;align-items:stretch}.clb{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden}.clr:not(.clx) .clb{overflow:visible}.cla{display:flex;flex-direction:column;flex:0 0 auto;min-height:0;align-self:stretch}.clk{overflow:hidden}.cla:not(.clk){overflow:auto}.cla>*{flex:1 1 auto;min-height:0;height:auto;max-height:100%}.clh,.clf{flex:0 0 auto;min-width:0}}

package/dist/Layout.d.ts

@@ -1,30 +1,52 @@
 import { default as React } from 'react';
+/** Слот каркаса, который можно закрепить вне скролла `children`. */
+export type LayoutFixedSlot = "header" | "footer" | "sidebar";
 /**
  * Оболочка приложения: шапка, основной контент, подвал.
  *
  * Роли: Layout = каркас страницы; внутри — Header / Section / PageShell / Footer.
  * Используйте как корневой каркас маршрута или приложения.
  *
+ * `fixed` — какие слоты не крутятся вместе со страницей.
+ * По умолчанию `["header", "footer", "sidebar"]`: скроллится только `children` в `<main>`.
+ * Пустой массив — обычный поток, скролл у предка.
+ *
+ * Высота каркаса: `--layout-height` (по умолчанию `100dvh`).
+ * Вложенный стенд: `--layout-height: 100%` у родителя с явной высотой.
+ *
  * @example
  * ```tsx
- * <Layout header={<Header brand="App" />} footer={<Footer>© 2026</Footer>}>
- *   <Section title="Главная">…</Section>
+ * <Layout
+ *   fixed={["header", "footer", "sidebar"]}
+ *   sidebar={<Sidebar groups={groups} value={page} onSelect={setPage} />}
+ *   header={<Header brand="App" />}
+ *   footer={<Footer>© elCRM</Footer>}
+ * >
+ *   <PageShell>…</PageShell>
  * </Layout>
  * ```
  *
- * Токены: `--shell-background-muted` (фон main), прочие `--shell-*`.
+ * Токены: `--layout-height`, `--shell-background-muted`, прочие `--shell-*`.
  */
 export type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Левая колонка (обычно `<Sidebar />`) — ряд: сайдбар + контент */
+    sidebar?: React.ReactNode;
     /** Слот шапки (обычно `<Header />`) */
     header?: React.ReactNode;
     /** Слот подвала (обычно `<Footer />`) */
     footer?: React.ReactNode;
+    /**
+     * Какие слоты зафиксированы (не прокручиваются).
+     * По умолчанию все: `header`, `footer`, `sidebar`.
+     * `[]` — ничего не фиксировать.
+     */
+    fixed?: LayoutFixedSlot[];
     /** Основной контент страницы (рендерится в `<main>`) */
     children?: React.ReactNode;
 };
 /**
- * Оболочка страницы: header + main + footer.
+ * Оболочка: опционально `sidebar` слева, затем header + main + footer.
  *
- * @see Header, Footer, Section, PageShell
+ * @see Sidebar, Header, Footer, Section, PageShell
  */
-export declare function Layout({ header, footer, children, className, ...rest }: LayoutProps): React.JSX.Element;
+export declare function Layout({ sidebar, header, footer, fixed, children, className, ...rest }: LayoutProps): React.JSX.Element;

package/dist/Layout.js

@@ -1,4 +1,4 @@
-import { L as r } from "./Layout-Xb3-xsmA.js";
+import { L as r } from "./Layout-mi6Ghayv.js";
 export {
   r as Layout
 };

package/dist/Loading-DkkG7RcE.js

@@ -0,0 +1,16 @@
+import e from "react";
+import { c as s } from "./cx-CcykAxZN.js";
+import './Loading.css';const i = "cgr", n = "cgi", r = {
+  r: i,
+  i: n
+};
+function l({
+  children: t = "Загрузка…",
+  className: a,
+  ...c
+}) {
+  return /* @__PURE__ */ e.createElement("div", { className: s(r.r, a), role: "status", ...c }, /* @__PURE__ */ e.createElement("span", { className: r.i, "aria-hidden": !0 }), t);
+}
+export {
+  l as L
+};

package/dist/Loading.css

@@ -1 +1 @@
-@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;padding:var(--shell-gap-lg);color:var(--shell-color-muted)}}
+@layer elcrm-components{.cgr{display:flex;align-items:center;justify-content:center;gap:var(--shell-gap-sm);padding:var(--shell-gap-lg);color:var(--shell-color-muted)}.cgi{box-sizing:border-box;width:var(--shell-icon-size);height:var(--shell-icon-size);border:2px solid var(--shell-border);border-top-color:var(--shell-color-accent);border-radius:var(--avatar-radius);animation:cgspin .7s linear infinite}}@keyframes cgspin{to{transform:rotate(360deg)}}

package/dist/Loading.d.ts

@@ -17,7 +17,7 @@ export type LoadingProps = React.HTMLAttributes<HTMLDivElement> & {
     children?: React.ReactNode;
 };
 /**
- * Плейсхолдер загрузки.
+ * Плейсхолдер загрузки со спиннером.
  *
  * @see EmptyState, PageShell
  */

package/dist/Loading.js

@@ -1,4 +1,4 @@
-import { L as r } from "./Loading-ChGq9peU.js";
+import { L as r } from "./Loading-DkkG7RcE.js";
 export {
   r as Loading
 };

package/dist/Menu-DuXQv-zT.js

@@ -0,0 +1,66 @@
+import d from "react";
+import { B as g } from "./Badge-jp-9iNNL.js";
+import { b as x } from "./badgeText-CRzlIzi3.js";
+import { c as i } from "./cx-CcykAxZN.js";
+import { h as y } from "./rovingKeys-CGlfTtNQ.js";
+import './Menu.css';const h = "cmr", k = "cmv", E = "cmi", N = "cmd", w = "cma", B = "cmu", n = {
+  r: h,
+  v: k,
+  i: E,
+  d: N,
+  a: w,
+  u: B
+};
+function D({
+  items: s,
+  vertical: l,
+  variant: u = "plain",
+  value: e,
+  onSelect: c,
+  children: b,
+  className: p,
+  ...m
+}) {
+  const f = (s ?? []).filter((a) => !a.disabled).map((a) => a.value), o = u === "line";
+  return /* @__PURE__ */ d.createElement(
+    "nav",
+    {
+      className: i(n.r, l && n.v, o && n.u, p),
+      role: o ? "tablist" : void 0,
+      onKeyDown: c ? (a) => y(a, {
+        values: f,
+        value: e,
+        onSelect: c,
+        vertical: l
+      }) : void 0,
+      ...m
+    },
+    s == null ? void 0 : s.map((a) => {
+      const r = a.active ?? (e != null && a.value === e), t = x(a.badge);
+      return /* @__PURE__ */ d.createElement(
+        "button",
+        {
+          key: a.value,
+          type: "button",
+          role: o ? "tab" : void 0,
+          className: i(n.i, r && n.a),
+          "data-active": r ? "true" : void 0,
+          "aria-current": o ? void 0 : r ? "page" : void 0,
+          "aria-selected": o ? r : void 0,
+          tabIndex: o ? r ? 0 : -1 : void 0,
+          disabled: a.disabled,
+          onClick: () => {
+            var v;
+            (v = a.onClick) == null || v.call(a), c == null || c(a.value);
+          }
+        },
+        a.label,
+        t != null ? /* @__PURE__ */ d.createElement(g, { className: n.d, tone: "accent", size: "s" }, t) : null
+      );
+    }),
+    b
+  );
+}
+export {
+  D as M
+};

package/dist/Menu.css

@@ -1 +1 @@
-@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(--shell-color-muted);padding:var(--shell-padding);border-radius:var(--shell-radius);font:inherit;line-height:1;cursor:pointer;text-align:left}.cmi>svg{display:block;flex-shrink:0}.cmi:hover{background:var(--shell-background-hover);color:var(--shell-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--shell-background-selected);color:var(--shell-color)}}
+@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(--shell-color-muted);padding:var(--shell-padding);border-radius:var(--shell-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(--shell-background-hover);color:var(--shell-color)}.cma,.cmi[aria-current=page],.cmi[data-active=true]{background:var(--shell-background-selected);color:var(--shell-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)}}

package/dist/Menu.d.ts

@@ -19,6 +19,11 @@ export type MenuItem = {
     onClick?: () => void;
     /** Недоступный пункт. */
     disabled?: boolean;
+    /**
+     * Счётчик справа (`Badge`).
+     * `0`, `null`, `""` — не рендерим.
+     */
+    badge?: number | string | null;
 };
 /**
  * Props компонента {@link Menu}.
@@ -34,6 +39,11 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
     items?: MenuItem[];
     /** Вертикальный ряд пунктов. */
     vertical?: boolean;
+    /**
+     * `plain` — пилюли.
+     * `line` — вкладки с нижней чертой (фильтры страницы).
+     */
+    variant?: "plain" | "line";
     /**
      * Активный `value` пункта (если у item не задан `active`).
      * Идентификатор — `value`, не `key`.
@@ -53,18 +63,20 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
  *
  * Связанные компоненты:
  * - {@link Dropdown} — выпадающая панель рядом с триггером;
- * - `@elcrm/overlay` — портальный popover/меню поверх страницы;
+ * - {@link Popover} / {@link Dropdown} — панель в portal;
  * - {@link NavSections} / {@link TabSections} — разделы с lazy-контентом.
  *
  * API: декларативные `items` (идентификатор — `value`). Compound-слоты не используются.
  *
+ * @param variant `plain` (пилюли) или `line` (черта снизу)
+ *
  * CSS-токены: `--shell-*` (цвета/отступы shell-навигации).
  *
  * @example
  * ```tsx
  * const items = [
  *   { value: "home", label: "Главная" },
- *   { value: "team", label: "Команда", disabled: true },
+ *   { value: "team", label: "Команда", badge: 3 },
  * ];
  *
  * <Menu
@@ -75,4 +87,4 @@ export type MenuProps = Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> & {
  * />
  * ```
  */
-export declare function Menu({ items, vertical, value, onSelect, children, className, ...rest }: MenuProps): React.JSX.Element;
+export declare function Menu({ items, vertical, variant, value, onSelect, children, className, ...rest }: MenuProps): React.JSX.Element;

package/dist/Menu.js

@@ -1,4 +1,4 @@
-import { M as r } from "./Menu-DRBHvSdJ.js";
+import { M as r } from "./Menu-DuXQv-zT.js";
 export {
   r as Menu
 };

package/dist/NavSections-BpyZPimZ.js

@@ -0,0 +1,79 @@
+import a, { useMemo as h, Suspense as S } from "react";
+import { c as d } from "./cx-CcykAxZN.js";
+import { I as g } from "./Item-D4okhsfW.js";
+import { h as x } from "./rovingKeys-CGlfTtNQ.js";
+import { u as C } from "./useControllableValue-CWqH1kpM.js";
+import './NavSections.css';const I = "cvr", K = "cvn", M = "cvg", R = "cvl", V = "cvi", w = "cva", D = "cvc", P = "cvt", j = "cvf", q = "cvm", l = {
+  r: I,
+  n: K,
+  g: M,
+  l: R,
+  i: V,
+  a: w,
+  c: D,
+  t: P,
+  f: j,
+  m: q
+};
+function z(n) {
+  for (const m of n) {
+    const c = m.items.find((s) => !s.disabled);
+    if (c) return c.value;
+  }
+  return "";
+}
+function J({
+  groups: n,
+  resolveSection: m,
+  value: c,
+  defaultValue: s,
+  onValueChange: f,
+  loading: b = null,
+  footer: i,
+  className: E,
+  navLabel: N = "Разделы"
+}) {
+  const p = h(
+    () => s || z(n),
+    [s, n]
+  ), [r, v] = C(
+    c,
+    p,
+    f
+  ), k = n.flatMap((e) => e.items).filter((e) => !e.disabled).map((e) => e.value), u = r ? m(r) : null;
+  return /* @__PURE__ */ a.createElement("div", { className: d(l.r, E) }, /* @__PURE__ */ a.createElement(
+    "nav",
+    {
+      className: l.n,
+      "aria-label": N,
+      onKeyDown: (e) => x(e, {
+        values: k,
+        value: r,
+        onSelect: v,
+        vertical: !0
+      })
+    },
+    n.map((e, y) => /* @__PURE__ */ a.createElement("div", { key: y, className: l.g }, e.label != null ? /* @__PURE__ */ a.createElement("div", { className: l.l }, e.label) : null, e.items.map((t) => {
+      const o = t.value === r;
+      return /* @__PURE__ */ a.createElement(
+        g,
+        {
+          key: t.value,
+          as: "button",
+          active: o,
+          className: d(l.i, o && l.a),
+          "data-active": o ? "true" : void 0,
+          "aria-current": o ? "page" : void 0,
+          disabled: t.disabled,
+          onClick: () => v(t.value)
+        },
+        t.icon != null ? /* @__PURE__ */ a.createElement("span", { className: l.c, "aria-hidden": !0 }, t.icon) : null,
+        /* @__PURE__ */ a.createElement("span", { className: l.t }, t.label)
+      );
+    }))),
+    i != null ? /* @__PURE__ */ a.createElement("div", { className: l.f }, i) : null
+  ), /* @__PURE__ */ a.createElement("div", { className: l.m }, u ? /* @__PURE__ */ a.createElement(S, { fallback: b }, a.createElement(u)) : null));
+}
+export {
+  J as N
+};

package/dist/NavSections.css

@@ -1 +1 @@
-@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:11px;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{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:var(--shell-gap-sm);width:100%;text-align:left;border:none;border-radius:var(--shell-radius);background:transparent;color:var(--shell-color);font:inherit;font-size:var(--shell-font-size-sm);padding:var(--shell-padding);cursor:pointer;position:relative}.cvi:hover:not(:disabled){background:var(--shell-background-hover)}.cva{background:var(--shell-background-selected)}.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;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}}}

package/dist/NavSections.js

@@ -1,4 +1,4 @@
-import { N as e } from "./NavSections-NDcIDD6H.js";
+import { N as e } from "./NavSections-BpyZPimZ.js";
 export {
   e as NavSections
 };

package/dist/PageHead-DgaJ1mXY.js

@@ -0,0 +1,31 @@
+import c from "react";
+import { c as o } from "./cx-CcykAxZN.js";
+import './PageHead.css';const u = "ccr", f = "cck", i = "ccw", E = "cct", N = "cch", d = "ccn", h = "ccu", v = "ccs", w = "cca", k = "ccc", e = {
+  r: u,
+  k: f,
+  w: i,
+  t: E,
+  h: N,
+  n: d,
+  u: h,
+  s: v,
+  a: w,
+  c: k
+};
+function p(t) {
+  return !(t == null || t === !1 || t === "" || typeof t == "number" && t === 0 || t === "0");
+}
+function g({
+  title: t,
+  sup: n,
+  subtitle: a,
+  actions: l,
+  sticky: r,
+  className: m,
+  children: s
+}) {
+  return /* @__PURE__ */ c.createElement("div", { className: o(e.r, r && e.k, m) }, /* @__PURE__ */ c.createElement("div", { className: e.w }, /* @__PURE__ */ c.createElement("div", { className: e.t }, /* @__PURE__ */ c.createElement("h1", { className: e.h }, /* @__PURE__ */ c.createElement("span", { className: e.n }, t), p(n) ? /* @__PURE__ */ c.createElement("span", { className: e.u }, n) : null), a != null ? /* @__PURE__ */ c.createElement("p", { className: e.s }, a) : null), l != null ? /* @__PURE__ */ c.createElement("div", { className: e.a }, l) : null), s != null ? /* @__PURE__ */ c.createElement("div", { className: e.c }, s) : null);
+}
+export {
+  g as P
+};

package/dist/PageHead.css

@@ -1 +1 @@
-@layer elcrm-components{.ccr{margin:0 0 var(--shell-gap-lg)}.ccw{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--shell-gap)}.cct{min-width:0;max-width:36rem}.cch{margin:0;font-size:var(--section-title-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.25}.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)}}
+@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}}

package/dist/PageHead.d.ts

@@ -8,8 +8,10 @@ import { default as React } from 'react';
  *
  * @example
  * ```tsx
- * <PageShell>
- *   <PageHead title="Клиенты" subtitle="Все компании" actions={<Button>Создать</Button>} />
+ * <PageShell scroll>
+ *   <PageHead title="Идеи" sup={<Badge size="s" tone="accent">4</Badge>} sticky>
+ *     <Menu items={tabs} value={tab} onSelect={setTab} />
+ *   </PageHead>
  *   …
  * </PageShell>
  * ```
@@ -19,18 +21,38 @@ import { default as React } from 'react';
 export type PageHeadProps = {
     /** Заголовок страницы */
     title: React.ReactNode;
+    /**
+     * Надстрочный слот сразу после title: текст или {@link Badge}.
+     * Пусто / `0` / `false` — не рендерим.
+     */
+    sup?: React.ReactNode;
     /** Подзаголовок */
     subtitle?: React.ReactNode;
     /** Кнопки / поиск справа в одной строке с заголовком */
     actions?: React.ReactNode;
+    /**
+     * Прилипает к верху скролла предка (`PageShell` с `scroll`).
+     * По умолчанию `false`.
+     */
+    sticky?: boolean;
     /** Доп. CSS-класс */
     className?: string;
-    /** Контент под строкой заголовка (фильтры, Breadcrumb) */
+    /**
+     * Контент под строкой заголовка (фильтры, поиск, вкладки).
+     * Между title и children — `--shell-gap`.
+     */
     children?: React.ReactNode;
 };
 /**
- * Заголовок: title слева, actions справа (одна линия).
+ * Заголовок: title слева (+ `sup` сверху), actions справа.
  *
- * @see PageShell, Section, Header
+ * @param props.title — заголовок
+ * @param props.sup — текст или Badge после title (надстрочно)
+ * @param props.subtitle — строка под заголовком
+ * @param props.actions — кнопки справа
+ * @param props.sticky — прилипает к скроллу
+ * @param props.children — фильтры / вкладки под шапкой
+ *
+ * @see PageShell, Section, Header, Badge
  */
-export declare function PageHead({ title, subtitle, actions, className, children, }: PageHeadProps): React.JSX.Element;
+export declare function PageHead({ title, sup, subtitle, actions, sticky, className, children, }: PageHeadProps): React.JSX.Element;

package/dist/PageHead.js

@@ -1,4 +1,4 @@
-import { P as o } from "./PageHead-Baz9BLuA.js";
+import { P as o } from "./PageHead-DgaJ1mXY.js";
 export {
   o as PageHead
 };

package/dist/{PageShell-CghThHS3.js → PageShell-D9EZiO8o.js}

@@ -1,28 +1,30 @@
 import e from "react";
 import { c as l } from "./cx-CcykAxZN.js";
-import './PageShell.css';const m = "ckr", o = "ckw", f = "ckb", i = "ckf", c = {
+import './PageShell.css';const m = "ckr", f = "ckw", i = "ckb", k = "ckf", u = "cko", c = {
   r: m,
-  w: o,
-  b: f,
-  f: i
+  w: f,
+  b: i,
+  f: k,
+  o: u
 };
-function u({
+function d({
   children: s,
-  className: a,
-  wide: n,
+  className: n,
+  wide: o,
+  scroll: r = !0,
   footer: t,
-  ...r
+  ...a
 }) {
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ...r,
-      className: l(c.r, n && c.w, a)
+      ...a,
+      className: l(c.r, o && c.w, !r && c.o, n)
     },
     /* @__PURE__ */ e.createElement("div", { className: c.b }, s),
     t != null ? /* @__PURE__ */ e.createElement("div", { className: c.f }, t) : null
   );
 }
 export {
-  u as P
+  d as P
 };

package/dist/PageShell.css

@@ -1 +1 @@
-@layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}}
+@layer elcrm-components{.ckr{flex:1 1 auto;min-height:0;height:100%;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--shell-padding);overflow:hidden}.ckw{max-width:none}.ckb{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--shell-gap)}.ckf{flex:0 0 auto;padding-top:var(--shell-gap-sm)}.cko{overflow:visible;height:auto}.cko .ckb{overflow:visible;flex:0 1 auto;min-height:auto}}

package/dist/PageShell.d.ts

@@ -1,14 +1,14 @@
 import { default as React } from 'react';
 /**
- * Каркас модуля: скролл в body, опциональный footer прибит к низу.
+ * Каркас модуля: опциональный скролл в body, footer прибит к низу.
  *
  * Роли: PageShell = внутренний каркас контента в Layout;
  * сверху часто PageHead / Section, снизу — панель действий.
  *
  * @example
  * ```tsx
- * <PageShell wide footer={<Footer><Button>Сохранить</Button></Footer>}>
- *   <PageHead title="Редактор" />
+ * <PageShell wide scroll footer={<Footer><Button>Сохранить</Button></Footer>}>
+ *   <PageHead title="Редактор" sticky />
  *   …
  * </PageShell>
  * ```
@@ -16,18 +16,23 @@ import { default as React } from 'react';
  * Токены: `--shell-*`.
  */
 export type PageShellProps = {
-    /** Контент модуля (скроллится) */
+    /** Контент модуля */
     children: React.ReactNode;
     /** Доп. CSS-класс */
     className?: string;
     /** Шире контент (редакторы, таблицы) */
     wide?: boolean;
+    /**
+     * Скролл внутри body. По умолчанию `true`.
+     * `false` — шелл растёт с контентом, крутит предок.
+     */
+    scroll?: boolean;
     /** Нижняя панель вне скролла */
     footer?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className">;
 /**
- * Каркас модуля: скролл в body, footer прибит к низу.
+ * Каркас модуля: скролл в body (если `scroll`), footer прибит к низу.
  *
  * @see PageHead, Layout, Section, Footer
  */
-export declare function PageShell({ children, className, wide, footer, ...rootProps }: PageShellProps): React.JSX.Element;
+export declare function PageShell({ children, className, wide, scroll, footer, ...rootProps }: PageShellProps): React.JSX.Element;

package/dist/PageShell.js

@@ -1,4 +1,4 @@
-import { P as l } from "./PageShell-CghThHS3.js";
+import { P as l } from "./PageShell-D9EZiO8o.js";
 export {
   l as PageShell
 };