@smwb/ui-react 2.7.0 → 2.9.0

package/dist/headless/components/dataDisplay/qrCode/qrCode.js

@@ -0,0 +1,76 @@
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import { forwardRef as A, useMemo as E } from "react";
+import N from "clsx";
+import { encode as q } from "uqr";
+import { qrCodePath as v } from "./qrCodePath.js";
+const x = {
+  "too-long": "QR code: value too long",
+  "encode-failed": "QR code: value could not be encoded"
+}, M = 32, w = 256;
+var _;
+const r = (_ = globalThis.__smwbQrCodeWarnings) != null ? _ : globalThis.__smwbQrCodeWarnings = /* @__PURE__ */ new Set(), b = (e, o) => {
+  r.has(e) || r.size >= M || (r.add(e), console.error(`[smwb] QrCode: ${o}`));
+}, S = (e, o) => {
+  if (e instanceof RangeError && /too long/i.test(e.message)) {
+    const s = Math.ceil(o.length / w);
+    return b(
+      `too-long:${s}`,
+      `value is too long to encode as a QR code (${o.length} characters; this notice is once per ${w}-character band)`
+    ), "too-long";
+  }
+  const n = e instanceof Error ? `${e.name}: ${e.message}` : String(e);
+  return b(`failed:${n}`, `value could not be encoded as a QR code (${n})`), "encode-failed";
+}, P = A(function({
+  className: o,
+  value: n,
+  size: s = 192,
+  caption: l,
+  label: p = "QR code",
+  errorCorrection: i = "M",
+  quietZone: m = 4,
+  "data-testid": C = "qr-code",
+  ...R
+}, $) {
+  var u, h;
+  const a = E(() => {
+    try {
+      return { modules: q(n, { ecc: i, border: 0 }).data, failure: null };
+    } catch (Q) {
+      return { modules: null, failure: S(Q, n) };
+    }
+  }, [n, i]), c = ((h = (u = a.modules) == null ? void 0 : u.length) != null ? h : 0) + 2 * m, g = a.modules ? v(a.modules, m) : "", t = a.failure;
+  return /* @__PURE__ */ f(
+    "figure",
+    {
+      ...R,
+      ref: $,
+      "data-testid": C,
+      "data-error": t != null ? t : void 0,
+      className: N("smwb-qr-code", o),
+      children: [
+        /* @__PURE__ */ f(
+          "svg",
+          {
+            className: "smwb-qr-code__image",
+            role: "img",
+            "aria-label": t === null ? p : x[t],
+            viewBox: `0 0 ${c} ${c}`,
+            width: s,
+            height: s,
+            shapeRendering: "crispEdges",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ d("rect", { className: "smwb-qr-code__light", width: c, height: c, fill: "rgb(255,255,255)" }),
+              g && /* @__PURE__ */ d("path", { className: "smwb-qr-code__dark", d: g, fill: "rgb(0,0,0)" })
+            ]
+          }
+        ),
+        l ? /* @__PURE__ */ d("figcaption", { className: "smwb-qr-code__caption", children: l }) : null
+      ]
+    }
+  );
+});
+export {
+  P as QrCode
+};
+//# sourceMappingURL=qrCode.js.map

package/dist/headless/components/dataDisplay/qrCode/qrCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrCode.js","sources":["../../../../../src/components/dataDisplay/qrCode/qrCode.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport cn from \"clsx\";\nimport { encode } from \"uqr\";\nimport { qrCodePath } from \"./qrCodePath\";\n\n/** Error-correction level: L 7%, M 15%, Q 25%, H 30% of the code may be damaged or covered. */\nexport type QrCodeErrorCorrection = \"L\" | \"M\" | \"Q\" | \"H\";\n\nexport interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\" | \"role\"> {\n  /** Text encoded in the code (a URL, a pairing token). Encoded as UTF-8 bytes. */\n  value: string;\n  /** Side of the code, quiet zone included, in pixels. Default 192. */\n  size?: number | undefined;\n  /** Shown under the code (a `<figcaption>`), e.g. \"Scan with the phone app\". */\n  caption?: React.ReactNode;\n  /** Accessible name of the image. Default \"QR code\". */\n  label?: string | undefined;\n  /** Error-correction level: L 7%, M 15% (default), Q 25%, H 30% of the code may be damaged or covered. */\n  errorCorrection?: QrCodeErrorCorrection | undefined;\n  /** Light margin around the code in modules. Default 4, the minimum the QR spec asks for; smaller values hurt scanning. */\n  quietZone?: number | undefined;\n  /** Test id of the root; `qr-code` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\n// Why the encoding failed, as the root's `data-error`, and the name the image takes then.\ntype QrCodeFailure = \"too-long\" | \"encode-failed\";\nconst FAILURE_LABEL: Record<QrCodeFailure, string> = {\n  \"too-long\": \"QR code: value too long\",\n  \"encode-failed\": \"QR code: value could not be encoded\",\n};\n\n// Warns once per distinct cause, never per value: the registry keys on the cause the\n// message reports — a capacity band, or the error text — not on the value, so a\n// `QrCode` bound to a text field neither keeps a multi-KB string alive per keystroke nor\n// logs a new line for every character typed. The cap bounds the registry itself: past it\n// the warning stays quiet instead of growing. It lives on globalThis so the server bundle\n// and the client module of one SSR runtime share it: the cause logs once per runtime, not\n// once per bundle. A process.env guard is deliberately not used — like dagView.tsx it\n// would silence only dev SSR.\nconst MAX_WARNED_CAUSES = 32;\nconst CAPACITY_BAND = 256; // characters: one notice per band, not per length\nconst warnedCauses = ((globalThis as { __smwbQrCodeWarnings?: Set<string> }).__smwbQrCodeWarnings ??= new Set());\nconst warnOnce = (cause: string, message: string): void => {\n  if (warnedCauses.has(cause) || warnedCauses.size >= MAX_WARNED_CAUSES) {\n    return;\n  }\n  warnedCauses.add(cause);\n  // eslint-disable-next-line no-console\n  console.error(`[smwb] QrCode: ${message}`);\n};\n\n// `uqr` reports a value past the QR capacity as a RangeError(\"Data too long\"); it throws\n// other errors for other inputs (a lone surrogate fails in `encodeURI`, an untyped\n// `errorCorrection` fails in its own lookup). Only the first of those is \"too long\", so\n// the failure is read off the error instead of assumed, and the rest are named as what\n// they are.\nconst noteEncodeFailure = (error: unknown, value: string): QrCodeFailure => {\n  if (error instanceof RangeError && /too long/i.test(error.message)) {\n    const band = Math.ceil(value.length / CAPACITY_BAND);\n    warnOnce(\n      `too-long:${band}`,\n      `value is too long to encode as a QR code (${value.length} characters; this notice is once per ` +\n        `${CAPACITY_BAND}-character band)`\n    );\n    return \"too-long\";\n  }\n  const reason = error instanceof Error ? `${error.name}: ${error.message}` : String(error);\n  warnOnce(`failed:${reason}`, `value could not be encoded as a QR code (${reason})`);\n  return \"encode-failed\";\n};\n\n/**\n * A QR code of `value` as an SVG image (role=img): dark modules on a white square —\n * including the quiet zone — in every theme, so a phone camera reads it in dark mode\n * too. With `caption` the code sits in a `<figure>` named by the caption. A `value`\n * past the QR capacity renders an empty white square with `data-error=\"too-long\"`,\n * any other encode failure with `data-error=\"encode-failed\"`, instead of throwing.\n */\nexport const QrCode = forwardRef<HTMLElement, QrCodeProps>(function QrCode(\n  {\n    className,\n    value,\n    size = 192,\n    caption,\n    label = \"QR code\",\n    errorCorrection = \"M\",\n    quietZone = 4,\n    \"data-testid\": dataTestId = \"qr-code\",\n    ...rest\n  },\n  ref\n) {\n  const encoded = useMemo(() => {\n    try {\n      return { modules: encode(value, { ecc: errorCorrection, border: 0 }).data, failure: null };\n    } catch (error) {\n      return { modules: null, failure: noteEncodeFailure(error, value) };\n    }\n  }, [value, errorCorrection]);\n\n  // N: the whole canvas in modules — matrix plus the quiet zone on every side.\n  const moduleCount = encoded.modules?.length ?? 0;\n  const canvas = moduleCount + 2 * quietZone;\n  const path = encoded.modules ? qrCodePath(encoded.modules, quietZone) : \"\";\n  const failure = encoded.failure;\n\n  return (\n    <figure\n      {...rest}\n      ref={ref}\n      data-testid={dataTestId}\n      data-error={failure ?? undefined}\n      className={cn(\"smwb-qr-code\", className)}\n    >\n      <svg\n        className=\"smwb-qr-code__image\"\n        role=\"img\"\n        aria-label={failure === null ? label : FAILURE_LABEL[failure]}\n        viewBox={`0 0 ${canvas} ${canvas}`}\n        width={size}\n        height={size}\n        shapeRendering=\"crispEdges\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect className=\"smwb-qr-code__light\" width={canvas} height={canvas} fill=\"rgb(255,255,255)\" />\n        {path && <path className=\"smwb-qr-code__dark\" d={path} fill=\"rgb(0,0,0)\" />}\n      </svg>\n      {caption ? <figcaption className=\"smwb-qr-code__caption\">{caption}</figcaption> : null}\n    </figure>\n  );\n});\n\nexport default QrCode;\n"],"names":["FAILURE_LABEL","MAX_WARNED_CAUSES","CAPACITY_BAND","warnedCauses","_a","warnOnce","cause","message","noteEncodeFailure","error","value","band","reason","QrCode","forwardRef","className","size","caption","label","errorCorrection","quietZone","dataTestId","rest","ref","encoded","useMemo","encode","canvas","_b","path","qrCodePath","failure","jsxs","cn","jsx"],"mappings":";;;;;AA2BA,MAAMA,IAA+C;AAAA,EACnD,YAAY;AAAA,EACZ,iBAAiB;AACnB,GAUMC,IAAoB,IACpBC,IAAgB;;AACtB,MAAMC,KAAiBC,IAAA,WAAsD,yBAAtD,OAAAA,IAAA,WAAsD,uBAAyB,oBAAI,IAAA,GACpGC,IAAW,CAACC,GAAeC,MAA0B;AACzD,EAAIJ,EAAa,IAAIG,CAAK,KAAKH,EAAa,QAAQF,MAGpDE,EAAa,IAAIG,CAAK,GAEtB,QAAQ,MAAM,kBAAkBC,CAAO,EAAE;AAC3C,GAOMC,IAAoB,CAACC,GAAgBC,MAAiC;AAC1E,MAAID,aAAiB,cAAc,YAAY,KAAKA,EAAM,OAAO,GAAG;AAClE,UAAME,IAAO,KAAK,KAAKD,EAAM,SAASR,CAAa;AACnD,WAAAG;AAAA,MACE,YAAYM,CAAI;AAAA,MAChB,6CAA6CD,EAAM,MAAM,wCACpDR,CAAa;AAAA,IAAA,GAEb;AAAA,EACT;AACA,QAAMU,IAASH,aAAiB,QAAQ,GAAGA,EAAM,IAAI,KAAKA,EAAM,OAAO,KAAK,OAAOA,CAAK;AACxF,SAAAJ,EAAS,UAAUO,CAAM,IAAI,4CAA4CA,CAAM,GAAG,GAC3E;AACT,GASaC,IAASC,EAAqC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,OAAAL;AAAA,EACA,MAAAM,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,iBAAAC,IAAkB;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;;AACA,QAAMC,IAAUC,EAAQ,MAAM;AAC5B,QAAI;AACF,aAAO,EAAE,SAASC,EAAOhB,GAAO,EAAE,KAAKS,GAAiB,QAAQ,EAAA,CAAG,EAAE,MAAM,SAAS,KAAA;AAAA,IACtF,SAASV,GAAO;AACd,aAAO,EAAE,SAAS,MAAM,SAASD,EAAkBC,GAAOC,CAAK,EAAA;AAAA,IACjE;AAAA,EACF,GAAG,CAACA,GAAOS,CAAe,CAAC,GAIrBQ,MADcC,KAAAxB,IAAAoB,EAAQ,YAAR,gBAAApB,EAAiB,WAAjB,OAAAwB,IAA2B,KAClB,IAAIR,GAC3BS,IAAOL,EAAQ,UAAUM,EAAWN,EAAQ,SAASJ,CAAS,IAAI,IAClEW,IAAUP,EAAQ;AAExB,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGV;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MACb,cAAYU,KAAA,OAAAA,IAAW;AAAA,MACvB,WAAWE,EAAG,gBAAgBlB,CAAS;AAAA,MAEvC,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAYD,MAAY,OAAOb,IAAQlB,EAAc+B,CAAO;AAAA,YAC5D,SAAS,OAAOJ,CAAM,IAAIA,CAAM;AAAA,YAChC,OAAOX;AAAA,YACP,QAAQA;AAAA,YACR,gBAAe;AAAA,YACf,OAAM;AAAA,YAEN,UAAA;AAAA,cAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,uBAAsB,OAAOP,GAAQ,QAAQA,GAAQ,MAAK,mBAAA,CAAmB;AAAA,cAC5FE,uBAAS,QAAA,EAAK,WAAU,sBAAqB,GAAGA,GAAM,MAAK,aAAA,CAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAE1EZ,IAAU,gBAAAiB,EAAC,cAAA,EAAW,WAAU,yBAAyB,aAAQ,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxF,CAAC;"}

package/dist/headless/components/dataDisplay/qrCode/qrCodePath.js

@@ -0,0 +1,20 @@
+function i(n, o) {
+  const r = [];
+  for (let l = 0; l < n.length; l += 1) {
+    const h = n[l];
+    let e = 0;
+    for (; h !== void 0 && e < h.length; )
+      if (h[e]) {
+        let t = 1;
+        for (; e + t < h.length && h[e + t]; )
+          t += 1;
+        r.push(`M${e + o} ${l + o}h${t}v1h-${t}z`), e += t;
+      } else
+        e += 1;
+  }
+  return r.join("");
+}
+export {
+  i as qrCodePath
+};
+//# sourceMappingURL=qrCodePath.js.map

package/dist/headless/components/dataDisplay/qrCode/qrCodePath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrCodePath.js","sources":["../../../../../src/components/dataDisplay/qrCode/qrCodePath.ts"],"sourcesContent":["/**\n * The `d` string of the QR code's dark modules: one run-length subpath per horizontal\n * run of dark modules (`M{x} {y}h{n}v1h-{n}z`), in row order and offset by the quiet\n * zone. Pure and deterministic — the same matrix always yields the same string, on the\n * server and in the browser, in ui-react and ui-solid.\n */\nexport function qrCodePath(data: readonly (readonly boolean[])[], quietZone: number): string {\n  const parts: string[] = [];\n  for (let y = 0; y < data.length; y += 1) {\n    const row = data[y];\n    let x = 0;\n    while (row !== undefined && x < row.length) {\n      if (row[x]) {\n        let run = 1;\n        while (x + run < row.length && row[x + run]) {\n          run += 1;\n        }\n        parts.push(`M${x + quietZone} ${y + quietZone}h${run}v1h-${run}z`);\n        x += run;\n      } else {\n        x += 1;\n      }\n    }\n  }\n  return parts.join(\"\");\n}\n"],"names":["qrCodePath","data","quietZone","parts","y","row","x","run"],"mappings":"AAMO,SAASA,EAAWC,GAAuCC,GAA2B;AAC3F,QAAMC,IAAkB,CAAA;AACxB,WAASC,IAAI,GAAGA,IAAIH,EAAK,QAAQG,KAAK,GAAG;AACvC,UAAMC,IAAMJ,EAAKG,CAAC;AAClB,QAAIE,IAAI;AACR,WAAOD,MAAQ,UAAaC,IAAID,EAAI;AAClC,UAAIA,EAAIC,CAAC,GAAG;AACV,YAAIC,IAAM;AACV,eAAOD,IAAIC,IAAMF,EAAI,UAAUA,EAAIC,IAAIC,CAAG;AACxC,UAAAA,KAAO;AAET,QAAAJ,EAAM,KAAK,IAAIG,IAAIJ,CAAS,IAAIE,IAAIF,CAAS,IAAIK,CAAG,OAAOA,CAAG,GAAG,GACjED,KAAKC;AAAA,MACP;AACE,QAAAD,KAAK;AAAA,EAGX;AACA,SAAOH,EAAM,KAAK,EAAE;AACtB;"}

package/dist/headless/components/dataDisplay/stat/stat.js

@@ -1,46 +1,58 @@
 import { jsxs as _, jsx as s } from "react/jsx-runtime";
-import i from "react";
+import c from "react";
 import w from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-const S = i.forwardRef(function({ className: l, label: n, value: a, hint: r, icon: t, tone: o = "neutral", variant: e = "tile", href: m, children: c, ...b }, u) {
+import { Icon as f } from "../../base/icon/icon.js";
+const R = c.forwardRef(function({
+  className: l,
+  label: e,
+  value: a,
+  hint: n,
+  icon: t,
+  tone: o = "neutral",
+  variant: r = "tile",
+  href: m,
+  children: i,
+  "data-testid": p = "stat",
+  ...b
+}, u) {
   return /* @__PURE__ */ _(
     m ? "a" : "div",
     {
       ...b,
       ref: u,
       ...m ? { href: m } : {},
-      "data-testid": "stat",
+      "data-testid": p,
       className: w(
         "smwb-stat",
-        `smwb-stat_${e}`,
+        `smwb-stat_${r}`,
         `smwb-stat_tone-${o}`,
         { "smwb-stat_link": !!m, "smwb-stat_with-icon": !!t },
         l
       ),
       children: [
-        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(d, { name: t, size: 20 }) : t }) : null,
-        /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: n }),
+        t ? /* @__PURE__ */ s("span", { className: "smwb-stat__icon", "aria-hidden": "true", children: typeof t == "string" ? /* @__PURE__ */ s(f, { name: t, size: 20 }) : t }) : null,
+        /* @__PURE__ */ s("span", { className: "smwb-stat__label", children: e }),
         /* @__PURE__ */ s("span", { className: "smwb-stat__value", children: a }),
-        r ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: r }) : null,
-        c ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: c }) : null
+        n ? /* @__PURE__ */ s("span", { className: "smwb-stat__hint", children: n }) : null,
+        i ? /* @__PURE__ */ s("div", { className: "smwb-stat__extra", children: i }) : null
       ]
     }
   );
-}), R = i.forwardRef(function({ className: l, style: n, minItemWidth: a, children: r, ...t }, o) {
-  const e = typeof a == "number" ? `${a}px` : a;
+}), $ = c.forwardRef(function({ className: l, style: e, minItemWidth: a, children: n, ...t }, o) {
+  const r = typeof a == "number" ? `${a}px` : a;
   return /* @__PURE__ */ s(
     "div",
     {
       ...t,
       ref: o,
       className: w("smwb-stat-group", l),
-      style: e === void 0 ? n : { ...n, "--smwb-stat-min": e },
-      children: r
+      style: r === void 0 ? e : { ...e, "--smwb-stat-min": r },
+      children: n
     }
   );
 });
 export {
-  S as Stat,
-  R as StatGroup
+  R as Stat,
+  $ as StatGroup
 };
 //# sourceMappingURL=stat.js.map

package/dist/headless/components/dataDisplay/stat/stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"stat.js","sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  { className, label, value, hint, icon, tone = \"neutral\", variant = \"tile\", href, children, ...rest },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid=\"stat\"\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;AA4BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,MAAAC,GAAM,MAAAC,IAAO,WAAW,SAAAC,IAAU,QAAQ,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAC9FC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWJ,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGE;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIH,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAY;AAAA,MACZ,WAAWK;AAAA,QACT;AAAA,QACA,aAAaN,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAS,EAACC,KAAK,MAAMV,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAS,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QAC1C,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,QACzCC,IAAO,gBAAAU,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDL,IAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAL,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYO,IAAYhB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAgB,GAAO,cAAAC,GAAc,UAAAT,GAAU,GAAGC,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBZ,CAAS;AAAA,MAC1C,OAAOkB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAV;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"stat.js","sources":["../../../../../src/components/dataDisplay/stat/stat.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type StatTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface StatProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  className?: string;\n  /** What the figure counts. */\n  label: ReactNode;\n  /** The figure — a number, or a short value such as \"3 / 14\". */\n  value: ReactNode;\n  /** A line under the value: a comparison, a period, a caveat. */\n  hint?: ReactNode;\n  /** An icon beside the figure: a Material Symbols name or an element. */\n  icon?: string | ReactNode;\n  /** Colour of the accent (a tile's edge, the icon). `warning` and `error` colour the figure too. */\n  tone?: StatTone;\n  /** `tile`: a bordered card with an accent edge, for KPIs. `plain`: text only, for rows of small figures. */\n  variant?: \"tile\" | \"plain\";\n  /** Make the whole stat a link to what the figure is made of. */\n  href?: string;\n  /** Test id of the root; `stat` unless given. */\n  \"data-testid\"?: string;\n}\n\n/**\n * A figure with its label: a KPI tile on a dashboard, or a small stat in a row.\n * Children go under it — a meter, a sparkline, a note.\n */\nexport const Stat = React.forwardRef<HTMLElement, PropsWithChildren<StatProps>>(function Stat(\n  {\n    className,\n    label,\n    value,\n    hint,\n    icon,\n    tone = \"neutral\",\n    variant = \"tile\",\n    href,\n    children,\n    \"data-testid\": dataTestId = \"stat\",\n    ...rest\n  },\n  ref\n) {\n  const Tag = (href ? \"a\" : \"div\") as \"div\";\n  return (\n    <Tag\n      {...rest}\n      ref={ref as React.Ref<HTMLDivElement>}\n      {...(href ? { href } : {})}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-stat\",\n        `smwb-stat_${variant}`,\n        `smwb-stat_tone-${tone}`,\n        { \"smwb-stat_link\": !!href, \"smwb-stat_with-icon\": !!icon },\n        className\n      )}\n    >\n      {icon ? (\n        <span className=\"smwb-stat__icon\" aria-hidden=\"true\">\n          {typeof icon === \"string\" ? <Icon name={icon} size={20} /> : icon}\n        </span>\n      ) : null}\n      <span className=\"smwb-stat__label\">{label}</span>\n      <span className=\"smwb-stat__value\">{value}</span>\n      {hint ? <span className=\"smwb-stat__hint\">{hint}</span> : null}\n      {children ? <div className=\"smwb-stat__extra\">{children}</div> : null}\n    </Tag>\n  );\n});\n\nexport interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** Narrowest a stat may get before the row wraps; a CSS length or px. 9rem by default. */\n  minItemWidth?: number | string;\n}\n\n/** A responsive row of stats: as many columns as fit, each at least `minItemWidth` wide. */\nexport const StatGroup = React.forwardRef<HTMLDivElement, PropsWithChildren<StatGroupProps>>(function StatGroup(\n  { className, style, minItemWidth, children, ...rest },\n  ref\n) {\n  const width = typeof minItemWidth === \"number\" ? `${minItemWidth}px` : minItemWidth;\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-stat-group\", className)}\n      style={width === undefined ? style : ({ ...style, \"--smwb-stat-min\": width } as CSSProperties)}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport default Stat;\n"],"names":["Stat","React","className","label","value","hint","icon","tone","variant","href","children","dataTestId","rest","ref","jsxs","cn","jsx","Icon","StatGroup","style","minItemWidth","width"],"mappings":";;;;AA8BO,MAAMA,IAAOC,EAAM,WAAsD,SAC9E;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AAEA,SACE,gBAAAC;AAAA,IAFWL,IAAO,MAAM;AAAA,IAEvB;AAAA,MACE,GAAGG;AAAA,MACJ,KAAAC;AAAA,MACC,GAAIJ,IAAO,EAAE,MAAAA,EAAA,IAAS,CAAA;AAAA,MACvB,eAAaE;AAAA,MACb,WAAWI;AAAA,QACT;AAAA,QACA,aAAaP,CAAO;AAAA,QACpB,kBAAkBD,CAAI;AAAA,QACtB,EAAE,kBAAkB,CAAC,CAACE,GAAM,uBAAuB,CAAC,CAACH,EAAA;AAAA,QACrDJ;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAI,sBACE,QAAA,EAAK,WAAU,mBAAkB,eAAY,QAC3C,UAAA,OAAOA,KAAS,WAAW,gBAAAU,EAACC,KAAK,MAAMX,GAAM,MAAM,IAAI,IAAKA,GAC/D,IACE;AAAA,QACJ,gBAAAU,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAb,GAAM;AAAA,QAC1C,gBAAAa,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAZ,GAAM;AAAA,QACzCC,IAAO,gBAAAW,EAAC,QAAA,EAAK,WAAU,mBAAmB,aAAK,IAAU;AAAA,QACzDN,IAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,oBAAoB,UAAAN,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvE,CAAC,GASYQ,IAAYjB,EAAM,WAA8D,SAC3F,EAAE,WAAAC,GAAW,OAAAiB,GAAO,cAAAC,GAAc,UAAAV,GAAU,GAAGE,EAAA,GAC/CC,GACA;AACA,QAAMQ,IAAQ,OAAOD,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AACvE,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,mBAAmBb,CAAS;AAAA,MAC1C,OAAOmB,MAAU,SAAYF,IAAS,EAAE,GAAGA,GAAO,mBAAmBE,EAAA;AAAA,MAEpE,UAAAX;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/headless/components/dataDisplay/statusDot/statusDot.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import f from "clsx";
+const $ = b(function({ className: d, status: t, color: o, size: m = "md", pulse: s, label: i, "data-testid": r = "status-dot", ...n }, w) {
+  const a = t != null ? t : o === void 0 ? "unknown" : void 0;
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      ...n,
+      ref: w,
+      role: "img",
+      "aria-label": i,
+      "data-testid": r,
+      className: f(
+        "smwb-status-dot",
+        `smwb-status-dot_size-${m}`,
+        a && `smwb-status-dot_status-${a}`,
+        o && `smwb-status-dot_color-${o}`,
+        { "smwb-status-dot_pulse": s != null ? s : t === "active" },
+        d
+      )
+    }
+  );
+});
+export {
+  $ as StatusDot
+};
+//# sourceMappingURL=statusDot.js.map

package/dist/headless/components/dataDisplay/statusDot/statusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusDot.js","sources":["../../../../../src/components/dataDisplay/statusDot/statusDot.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\n/** What the marker says: `active` is under way, `attention` waits for someone, `idle` rests, `done` is finished. */\nexport type StatusDotStatus = \"active\" | \"attention\" | \"idle\" | \"done\" | \"error\" | \"unknown\";\n\n/** The theme colour names `Chip` takes; `default` is the neutral on-surface colour. */\nexport type StatusDotColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type StatusDotSize = \"sm\" | \"md\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"role\" | \"children\" | \"aria-label\"> {\n  /** Class name(s) for the dot's root `<span>`. */\n  className?: string;\n  /**\n   * What the dot says, and so its colour: `active` info, `attention` warning, `idle` neutral, `done` success,\n   * `error` error. `unknown` is a ring in the outline colour. Without `status` (and without `color`) the dot is\n   * `unknown`.\n   */\n  status?: StatusDotStatus | undefined;\n  /**\n   * A theme colour instead of the status's own, or on its own with no `status` (a plain disc). Given with a\n   * `status`, the status still sets the shape.\n   */\n  color?: StatusDotColor | undefined;\n  /** `md` (12px) unless given; `sm` is 8px. */\n  size?: StatusDotSize | undefined;\n  /**\n   * A ring spreads from the dot. On unless given for `active`, off for every other status. Never drawn while the\n   * user prefers reduced motion.\n   */\n  pulse?: boolean | undefined;\n  /** What the dot means in words, e.g. \"Working\": the accessible name, read by assistive technology. */\n  label: string;\n  /** Test id of the root; `status-dot` unless given. */\n  \"data-testid\"?: string | undefined;\n}\n\n/** A small status marker: a dot coloured and shaped by `status`, named by `label`. */\nexport const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(\n  { className, status, color, size = \"md\", pulse, label, \"data-testid\": dataTestId = \"status-dot\", ...rest },\n  ref\n) {\n  // A bare colour is a plain disc; with neither, the dot is \"unknown\".\n  const shown = status ?? (color === undefined ? \"unknown\" : undefined);\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      role=\"img\"\n      aria-label={label}\n      data-testid={dataTestId}\n      className={cn(\n        \"smwb-status-dot\",\n        `smwb-status-dot_size-${size}`,\n        shown && `smwb-status-dot_status-${shown}`,\n        color && `smwb-status-dot_color-${color}`,\n        { \"smwb-status-dot_pulse\": pulse ?? status === \"active\" },\n        className\n      )}\n    />\n  );\n});\n\nexport default StatusDot;\n"],"names":["StatusDot","forwardRef","className","status","color","size","pulse","label","dataTestId","rest","ref","shown","jsx","cn"],"mappings":";;;AAuCO,MAAMA,IAAYC,EAA4C,SACnE,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,IAAO,MAAM,OAAAC,GAAO,OAAAC,GAAO,eAAeC,IAAa,cAAc,GAAGC,EAAA,GACpGC,GACA;AAEA,QAAMC,IAAQR,KAAA,OAAAA,IAAWC,MAAU,SAAY,YAAY;AAC3D,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,KAAAC;AAAA,MACA,MAAK;AAAA,MACL,cAAYH;AAAA,MACZ,eAAaC;AAAA,MACb,WAAWK;AAAA,QACT;AAAA,QACA,wBAAwBR,CAAI;AAAA,QAC5BM,KAAS,0BAA0BA,CAAK;AAAA,QACxCP,KAAS,yBAAyBA,CAAK;AAAA,QACvC,EAAE,yBAAyBE,KAAA,OAAAA,IAASH,MAAW,SAAA;AAAA,QAC/CD;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN,CAAC;"}

package/dist/headless/components/dataDisplay/swimlanes/swimlanes.js

@@ -0,0 +1,355 @@
+import { jsx as F, jsxs as Me } from "react/jsx-runtime";
+import s from "react";
+import ie from "clsx";
+import { useControllableState as He } from "../../../hooks/useControllableState.js";
+import { useEventCallback as Q } from "../../../hooks/useEventCallback.js";
+import { useForkRef as Te } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as D } from "../../../hooks/useSafeLayoutEffect.js";
+import { useVirtualList as Ce } from "../../../hooks/useVirtualList.js";
+import { isOwnClick as Le } from "../../../utils/ownClick.js";
+const ke = 64, Ke = 480, De = 4, Fe = 'a[href], button, input, select, textarea, iframe, summary, audio[controls], video[controls], [tabindex], [contenteditable]:not([contenteditable="false"])', X = (w) => typeof w == "number" ? `${w}px` : w, Ne = (w, c) => w.length === c.length && w.every((a, p) => a === c[p]);
+function ze(w, c, a, p) {
+  const x = p.count - 1;
+  if (x < 0) return null;
+  const u = (d) => Math.min(x, Math.max(0, d)), h = (d) => d === a.index ? null : { index: d, col: a.col }, b = (d) => d === a.col ? null : { index: a.index, col: d };
+  if (c.ctrlKey || c.metaKey || c.altKey)
+    return !c.ctrlKey || c.metaKey || c.altKey ? null : w === "Home" ? h(0) : w === "End" ? h(x) : null;
+  switch (w) {
+    case "ArrowDown":
+      return h(u(a.index + 1));
+    case "ArrowUp":
+      return h(u(a.index - 1));
+    case "ArrowRight":
+      return b(1);
+    case "ArrowLeft":
+      return b(0);
+    case "Home":
+      return b(0);
+    case "End":
+      return b(1);
+    case "PageDown":
+      return h(u(a.index + p.pageSize));
+    case "PageUp":
+      return h(u(a.index - p.pageSize));
+    default:
+      return null;
+  }
+}
+const Oe = s.memo(function({
+  lane: c,
+  index: a,
+  selected: p,
+  selectable: x,
+  tabCol: u,
+  rowHeight: h,
+  handlers: b
+}) {
+  const d = (C, M, g, L) => /* @__PURE__ */ F(
+    "div",
+    {
+      className: M,
+      role: C,
+      tabIndex: u === g ? 0 : -1,
+      onClick: (R) => b.onCellClick(R, c.id, g),
+      onFocus: (R) => b.onCellFocus(R, c.id, g),
+      children: L
+    }
+  );
+  return /* @__PURE__ */ Me(
+    "div",
+    {
+      className: ie("smwb-swimlanes__row", {
+        "smwb-swimlanes__row_selected": p,
+        "smwb-swimlanes__row_disabled": !!c.disabled
+      }),
+      role: "row",
+      "aria-rowindex": a + 1,
+      "aria-selected": x ? p : void 0,
+      "aria-disabled": c.disabled ? !0 : void 0,
+      "data-lane-id": c.id,
+      style: { top: a * h },
+      ref: (C) => {
+        b.registerRow(c.id, C);
+      },
+      children: [
+        d("rowheader", "smwb-swimlanes__header", 0, c.header),
+        d("gridcell", "smwb-swimlanes__content", 1, c.content)
+      ]
+    }
+  );
+}), Pe = s.forwardRef(function(c, a) {
+  const {
+    className: p,
+    style: x,
+    lanes: u,
+    label: h,
+    selectedId: b,
+    defaultSelectedId: d,
+    onSelectedChange: C,
+    selectable: M = !0,
+    rowHeight: g = ke,
+    headerWidth: L,
+    contentMinWidth: R,
+    height: k,
+    overscan: ue = De,
+    emptyLabel: ae,
+    onScroll: B,
+    onKeyDown: V,
+    "data-testid": de = "swimlanes",
+    ...fe
+  } = c, H = s.useRef(null), j = s.useRef(null), N = s.useRef(/* @__PURE__ */ new Map()), me = Te(a, H), G = u.length === 0, y = s.useMemo(() => {
+    const e = /* @__PURE__ */ new Map();
+    return u.forEach((t, n) => {
+      e.has(t.id) || e.set(t.id, n);
+    }), e;
+  }, [u]), $ = s.useMemo(() => [...y.keys()], [y]), q = s.useRef($);
+  Ne(q.current, $) || (q.current = $);
+  const E = q.current, [we, Y] = He({
+    value: b,
+    defaultValue: d != null ? d : null,
+    onChange: C
+  }), _ = M ? we : null, [T, z] = s.useState(null), S = s.useMemo(() => {
+    if (T !== null && y.has(T.laneId)) return T;
+    if (_ !== null && y.has(_)) return { laneId: _, col: 0 };
+    const e = E[0];
+    return e === void 0 ? null : { laneId: e, col: 0 };
+  }, [T, _, y, E]), Z = s.useRef(S);
+  Z.current = S;
+  const he = typeof k == "number" ? k : Ke, [ee, pe] = s.useState(0), J = ee > 0 ? ee : he, I = Ce({
+    itemCount: u.length,
+    itemHeight: g,
+    viewportHeight: J,
+    overscan: ue
+  }), P = s.useMemo(() => {
+    const e = /* @__PURE__ */ new Set();
+    for (let t = I.startIndex; t < I.endIndex; t++) e.add(t);
+    if (S !== null) {
+      const t = y.get(S.laneId);
+      t !== void 0 && e.add(t);
+    }
+    return [...e].sort((t, n) => t - n);
+  }, [I.startIndex, I.endIndex, S, y]), be = s.useMemo(() => P.map((e) => {
+    var t, n;
+    return (n = (t = u[e]) == null ? void 0 : t.id) != null ? n : "";
+  }).join("|"), [P, u]), f = s.useRef({
+    selectable: M,
+    selected: _,
+    setSelected: Y,
+    active: T,
+    viewportHeight: J,
+    rowHeight: g,
+    lanes: u,
+    indexById: y,
+    onScroll: I.onScroll
+  });
+  f.current = {
+    selectable: M,
+    selected: _,
+    setSelected: Y,
+    active: T,
+    viewportHeight: J,
+    rowHeight: g,
+    lanes: u,
+    indexById: y,
+    onScroll: I.onScroll
+  };
+  const ge = (e, t) => {
+    var o;
+    const n = (o = N.current.get(e)) == null ? void 0 : o.children[t];
+    return n instanceof HTMLElement ? n : null;
+  }, ye = (e) => {
+    const t = H.current, n = j.current;
+    if (t === null || n === null || !(e instanceof Element)) return null;
+    const o = e.getAttribute("role");
+    if (o !== "rowheader" && o !== "gridcell") return null;
+    const i = o === "rowheader" ? 0 : 1, r = e.parentElement;
+    if (r === null || r.parentElement !== n || n.parentElement !== t) return null;
+    const l = r.dataset.laneId;
+    return l === void 0 ? null : { laneId: l, col: i };
+  }, O = s.useRef(null), Se = (e) => {
+    const t = H.current;
+    if (t === null) return;
+    const { rowHeight: n, viewportHeight: o } = f.current, i = t.clientHeight || o, r = e * n, l = r < t.scrollTop ? r : r + n > t.scrollTop + i ? r + n - i : t.scrollTop;
+    l !== t.scrollTop && (t.scrollTop = l, f.current.onScroll({ currentTarget: { scrollTop: l } }));
+  }, ve = (e, t) => {
+    const n = f.current.lanes[e];
+    n !== void 0 && (Se(e), z({ laneId: n.id, col: t }), O.current = { laneId: n.id, col: t });
+  }, xe = () => {
+    var o;
+    const { rowHeight: e, viewportHeight: t } = f.current, n = ((o = H.current) == null ? void 0 : o.clientHeight) || t;
+    return Math.max(1, Math.floor(n / e) - 1);
+  }, te = (e) => {
+    const { selectable: t, selected: n, setSelected: o } = f.current;
+    if (!t) return;
+    const i = f.current.indexById.get(e), r = i === void 0 ? void 0 : f.current.lanes[i];
+    r === void 0 || r.disabled || n !== e && o(e);
+  }, ne = Q(
+    (e, t, n) => {
+      Le(e, e.currentTarget) && (z({ laneId: t, col: n }), te(t));
+    }
+  ), re = Q(
+    (e, t, n) => {
+      e.currentTarget.contains(e.target) && z({ laneId: t, col: n });
+    }
+  ), oe = Q((e, t) => {
+    t !== null ? N.current.set(e, t) : N.current.delete(e);
+  }), Ie = s.useMemo(
+    () => ({ onCellClick: ne, onCellFocus: re, registerRow: oe }),
+    [ne, re, oe]
+  ), Re = (e) => {
+    V == null || V(e);
+    const t = ye(e.target);
+    if (t === null) return;
+    const { ctrlKey: n, metaKey: o, altKey: i } = e;
+    if (!n && !o && !i) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault(), te(t.laneId);
+        return;
+      }
+      if (e.key === "Escape") {
+        if (f.current.selected === null) return;
+        e.preventDefault(), f.current.setSelected(null);
+        return;
+      }
+    }
+    const r = f.current.indexById.get(t.laneId);
+    if (r === void 0) return;
+    const l = ze(
+      e.key,
+      { ctrlKey: n, metaKey: o, altKey: i },
+      { index: r, col: t.col },
+      { count: f.current.lanes.length, pageSize: xe() }
+    );
+    l !== null && (e.preventDefault(), ve(l.index, l.col));
+  }, Ee = (e) => {
+    B == null || B(e), I.onScroll(e);
+  };
+  D(() => {
+    const e = H.current;
+    if (e === null || typeof ResizeObserver != "function") return;
+    const t = new ResizeObserver(() => {
+      pe(e.clientHeight);
+    });
+    return t.observe(e), () => t.disconnect();
+  }, []), D(() => {
+    var t;
+    const e = O.current;
+    e !== null && (O.current = null, (t = ge(e.laneId, e.col)) == null || t.focus({ preventScroll: !0 }));
+  });
+  const se = s.useRef(null);
+  D(() => {
+    var v;
+    const e = se.current;
+    if (se.current = E, e === null || e === E) return;
+    const t = new Set(E), { selected: n, setSelected: o, active: i } = f.current, r = n !== null && !t.has(n) && e.includes(n);
+    if (r && o(null), i === null || t.has(i.laneId)) return;
+    z(null);
+    const l = (v = H.current) == null ? void 0 : v.ownerDocument;
+    if (l === void 0 || l.activeElement !== null && l.activeElement !== l.body) return;
+    const A = !r && n !== null && t.has(n) ? n : E[0];
+    A !== void 0 && (O.current = { laneId: A, col: 0 });
+  }, [E]);
+  const le = s.useRef(/* @__PURE__ */ new WeakMap()), ce = s.useRef(/* @__PURE__ */ new WeakMap()), W = s.useCallback(() => {
+    var o, i, r, l;
+    const e = (i = (o = Z.current) == null ? void 0 : o.laneId) != null ? i : null, t = le.current, n = ce.current;
+    for (const [A, v] of N.current)
+      for (const U of Array.from(v.children))
+        for (const m of U.querySelectorAll(Fe)) {
+          t.has(m) || t.set(m, m.getAttribute("tabindex")), m.getAttribute("tabindex") !== ((r = n.get(m)) != null ? r : null) && t.set(m, m.getAttribute("tabindex"));
+          const K = A === e ? (l = t.get(m)) != null ? l : null : "-1";
+          if (m.getAttribute("tabindex") === K) {
+            n.set(m, K);
+            continue;
+          }
+          K === null ? m.removeAttribute("tabindex") : m.setAttribute("tabindex", K), n.set(m, K);
+        }
+  }, []);
+  D(() => {
+    W();
+  }, [S, be, W]), D(() => {
+    const e = j.current;
+    if (e === null || typeof MutationObserver != "function") return;
+    const t = new MutationObserver((n) => {
+      var l;
+      const o = le.current, i = ce.current;
+      let r = !1;
+      for (const A of n) {
+        if (A.type !== "attributes") {
+          r = !0;
+          continue;
+        }
+        const v = A.target;
+        if (!i.has(v)) continue;
+        const U = v.getAttribute("tabindex");
+        U !== ((l = i.get(v)) != null ? l : null) && (o.set(v, U), r = !0);
+      }
+      r && W();
+    });
+    return t.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["tabindex"]
+    }), () => t.disconnect();
+  }, [W]);
+  const _e = G ? {} : {
+    role: "grid",
+    "aria-rowcount": u.length,
+    "aria-colcount": 2,
+    ...h === void 0 ? {} : { "aria-label": h }
+  }, Ae = s.useMemo(() => {
+    const e = {};
+    k !== void 0 && (e.height = X(k));
+    const t = e;
+    return t["--smwb-swimlanes-row-height"] = `${g}px`, L !== void 0 && (t["--smwb-swimlanes-header-width"] = X(L)), R !== void 0 && (t["--smwb-swimlanes-content-min-width"] = X(R)), { ...e, ...x };
+  }, [k, g, L, R, x]);
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      ...fe,
+      ref: me,
+      "data-testid": de,
+      className: ie("smwb-swimlanes", { "smwb-swimlanes_empty": G }, p),
+      style: Ae,
+      ..._e,
+      onScroll: Ee,
+      onKeyDown: Re,
+      children: G ? (
+        // No grid role and no row count: an empty grid has no rows, which fails
+        // the role's required children.
+        /* @__PURE__ */ F("div", { className: "smwb-swimlanes__empty", children: ae })
+      ) : /* @__PURE__ */ F(
+        "div",
+        {
+          className: "smwb-swimlanes__sizer",
+          role: "presentation",
+          ref: j,
+          style: { height: I.totalHeight },
+          children: P.map((e) => {
+            const t = u[e];
+            return t === void 0 ? null : /* @__PURE__ */ F(
+              Oe,
+              {
+                lane: t,
+                index: e,
+                selected: _ === t.id,
+                selectable: M,
+                tabCol: S !== null && S.laneId === t.id ? S.col : -1,
+                rowHeight: g,
+                handlers: Ie
+              },
+              t.id
+            );
+          })
+        }
+      )
+    }
+  );
+});
+export {
+  Ke as SWIMLANES_DEFAULT_HEIGHT,
+  De as SWIMLANES_DEFAULT_OVERSCAN,
+  ke as SWIMLANES_DEFAULT_ROW_HEIGHT,
+  Pe as Swimlanes
+};
+//# sourceMappingURL=swimlanes.js.map