@elcrm/components 0.2.5 → 0.2.7

package/dist/overlayZ-BvHbYC1x.js

@@ -0,0 +1,23 @@
+function a() {
+  const e = globalThis;
+  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
+}
+function c() {
+  const e = a();
+  e.seq += 1;
+  const t = 1e3 + e.seq * 10;
+  return e.active.add(t), t;
+}
+function n(e) {
+  const t = a();
+  t.active.delete(e), t.active.size === 0 && (t.seq = 0);
+}
+function r() {
+  const e = a();
+  return e.active.size === 0 ? 1e3 : Math.max(...e.active);
+}
+export {
+  c as a,
+  r as p,
+  n as r
+};

package/dist/tokens.css

@@ -25,6 +25,16 @@
   --shell-disabled-opacity: 0.55;
   --shell-z: var(--elcrm-z-popover, 1000);
   --layout-height: 100dvh;
+  /* отступ каркаса; 0 — на всю ширину вьюпорта */
+  --layout-padding: 0;
+  --layout-margin: 0;
+  --layout-gap: 0;
+  --layout-main-radius: 0;
+  --layout-main-background: transparent;
+  --layout-main-shadow: none;
+  --layout-main-border: none;
+  /* none — без ограничения; иначе например 1440px */
+  --layout-max-width: none;
 
   /* —— header —— */
   --header-radius: var(--shell-radius);
@@ -34,6 +44,8 @@
   --header-z: 20;
   /* shorthand: толщина + стиль + цвет, все стороны. Только снизу — `none` и линия через --header-shadow */
   --header-border: 1px solid var(--shell-border);
+  /* выравнивание nav в оставшейся ширине шапки: flex-start | center | flex-end */
+  --header-nav-justify: flex-start;
 
   /* —— section / nav-sections —— */
   --section-padding: 1.5rem 1.75rem 2.5rem;
@@ -69,6 +81,21 @@
   --stat-value-size: 1.75rem;
   --action-group-gap: var(--shell-gap-sm);
 
+  /* —— panel-info —— */
+  --panel-info-width: min(22rem, 42vw);
+  --panel-info-width-min: 16rem;
+  --panel-info-overlay-max: 24rem;
+  --panel-info-backdrop: color-mix(in srgb, var(--shell-color) 35%, transparent);
+
+  /* —— healthmap —— */
+  --healthmap-cell: 12px;
+  --healthmap-gap: 3px;
+  --healthmap-l0: var(--shell-background-muted);
+  --healthmap-l1: color-mix(in srgb, var(--shell-color-success) 25%, var(--shell-background-muted));
+  --healthmap-l2: color-mix(in srgb, var(--shell-color-success) 45%, transparent);
+  --healthmap-l3: color-mix(in srgb, var(--shell-color-success) 70%, transparent);
+  --healthmap-l4: var(--shell-color-success);
+
   /* —— item-column —— */
   --item-column-gap: var(--shell-gap);
   --item-column-icon-size: 40px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elcrm/components",
-  "version": "0.2.5",
-  "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
+  "version": "0.2.7",
+  "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, Healthmap, PanelInfo, PageHead, PageShell, Section, Stack, Stat и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",
   "license": "MIT",
@@ -84,18 +84,6 @@
     },
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "dev": "vite --config test/vite.config.ts",
-    "build": "vite build",
-    "postbuild": "node scripts/postbuild.mjs",
-    "check:css": "node scripts/check-css-scoped.mjs",
-    "check:tokens": "node scripts/check-tokens.mjs",
-    "test": "vitest run",
-    "test:build": "vite build --config test/vite.config.ts",
-    "test:preview": "vite preview --config test/vite.config.ts",
-    "prepublishOnly": "npm run check:css && npm run check:tokens && npm run test && npm run build",
-    "pack:check": "npm pack --dry-run"
-  },
   "peerDependencies": {
     "@types/react": ">=18.0.0",
     "react": ">=18.0.0",
@@ -105,22 +93,5 @@
     "@types/react": {
       "optional": true
     }
-  },
-  "devDependencies": {
-    "@elcrm/storybook": "file:../elCRM.storybook",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.10",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.3.1",
-    "elcrm": "file:../elCRM.cli",
-    "jsdom": "^26.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.8.2",
-    "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.0.3",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vitest": "^3.0.8"
   }
 }

package/dist/Popover-D5RymtcJ.js

@@ -1,156 +0,0 @@
-import u, { useRef as E, useId as $, useState as T, useLayoutEffect as A, useEffect as B } from "react";
-import { createPortal as ee } from "react-dom";
-import { c as F } from "./cx-CcykAxZN.js";
-import { u as te } from "./useControllableValue-CWqH1kpM.js";
-import './Popover.css';const V = 1e3, ne = 10;
-function b() {
-  const e = globalThis;
-  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
-}
-function oe() {
-  const e = b();
-  e.seq += 1;
-  const t = V + e.seq * ne;
-  return e.active.add(t), t;
-}
-function N(e) {
-  const t = b();
-  t.active.delete(e), t.active.size === 0 && (t.seq = 0);
-}
-function ve() {
-  const e = b();
-  return e.active.size === 0 ? V : Math.max(...e.active);
-}
-const se = "c3r", ie = "c3t", re = "c3p", H = {
-  r: se,
-  t: ie,
-  p: re
-};
-function ce(e, t) {
-  const c = (t == null ? void 0 : t.querySelector("button, a, [role='button']")) ?? (t == null ? void 0 : t.firstElementChild);
-  return (c instanceof HTMLElement ? c : t ?? e).getBoundingClientRect();
-}
-function ae(e, t) {
-  return e != null && e.top === t.top && e.left === t.left && e.minWidth === t.minWidth && e.maxHeight === t.maxHeight;
-}
-function le(e, t, c, p) {
-  if (!u.isValidElement(e)) return e;
-  const d = e.props.onClick;
-  return u.cloneElement(e, {
-    "aria-haspopup": "menu",
-    "aria-expanded": t,
-    "aria-controls": t ? c : void 0,
-    onClick: (v) => {
-      d == null || d(v), p();
-    }
-  });
-}
-function he({
-  trigger: e,
-  children: t,
-  open: c,
-  defaultOpen: p = !1,
-  onOpenChange: d,
-  align: v = "end",
-  placement: x = "auto",
-  disabled: z = !1,
-  label: D,
-  role: K = "menu",
-  className: j,
-  panelClassName: G
-}) {
-  const w = E(null), P = E(null), y = E(null), g = $(), [s = !1, J] = te(
-    c,
-    p,
-    d
-  ), [m, W] = T(null), [a, q] = T(null), L = E(null);
-  L.current = a;
-  const M = (o) => {
-    z && o || J(o);
-  };
-  A(() => {
-    if (s) {
-      a == null && q(oe());
-      return;
-    }
-    a != null && (N(a), q(null));
-  }, [s, a]), B(() => () => {
-    L.current != null && N(L.current);
-  }, []);
-  const R = () => {
-    var S;
-    const o = w.current;
-    if (!o) return;
-    const n = ce(o, P.current), i = 8, l = 8, r = ((S = y.current) == null ? void 0 : S.offsetHeight) ?? 0, f = window.innerHeight - n.bottom - i - l, U = n.top - i - l, X = r > 0 ? r : 160, I = x === "bottom" || x !== "top" && f >= X, Y = Math.min(
-      420,
-      Math.max(120, I ? f : U)
-    ), h = Math.max(200, n.width), _ = v === "end" ? Math.max(8, Math.min(n.right - h, window.innerWidth - h - 8)) : Math.max(8, Math.min(n.left, window.innerWidth - h - 8)), O = { top: I ? n.bottom + i : Math.max(l, n.top - i - (r > 0 ? r : 0)), left: _, minWidth: h, maxHeight: Y };
-    W((C) => ae(C, O) ? C : O);
-  };
-  A(() => {
-    if (!s) {
-      W(null);
-      return;
-    }
-    R();
-    const o = window.requestAnimationFrame(() => R()), n = () => R();
-    return window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
-      window.cancelAnimationFrame(o), window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
-    };
-  }, [s, v, x, t]), B(() => {
-    if (!s) return;
-    const o = (i) => {
-      var r, f;
-      const l = i.target;
-      (r = w.current) != null && r.contains(l) || (f = y.current) != null && f.contains(l) || M(!1);
-    }, n = (i) => {
-      i.key === "Escape" && M(!1);
-    };
-    return document.addEventListener("mousedown", o), document.addEventListener("keydown", n), () => {
-      document.removeEventListener("mousedown", o), document.removeEventListener("keydown", n);
-    };
-  }, [s]);
-  const Q = {
-    position: "fixed",
-    zIndex: a ?? 1e3,
-    ...m ? {
-      top: m.top,
-      bottom: "auto",
-      left: m.left,
-      minWidth: m.minWidth,
-      maxHeight: m.maxHeight
-    } : { visibility: "hidden", pointerEvents: "none" }
-  }, Z = s ? /* @__PURE__ */ u.createElement(
-    "div",
-    {
-      ref: y,
-      id: g,
-      role: K,
-      "aria-label": D,
-      className: F(H.p, G),
-      style: Q,
-      onMouseDown: (o) => o.stopPropagation()
-    },
-    t
-  ) : null, k = () => {
-    z || M(!s);
-  };
-  return /* @__PURE__ */ u.createElement("div", { ref: w, className: F(H.r, j) }, /* @__PURE__ */ u.createElement(
-    "div",
-    {
-      ref: P,
-      className: H.t,
-      "aria-haspopup": "menu",
-      "aria-expanded": s,
-      "aria-controls": s ? g : void 0,
-      onClick: u.isValidElement(e) ? void 0 : k
-    },
-    le(e, s, g, k)
-  ), Z && typeof document < "u" ? ee(Z, document.body) : null);
-}
-export {
-  he as P,
-  oe as a,
-  ve as p,
-  N as r
-};