@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-A47AZPCL.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/illustrations/illustration-base.tsx
+var ILLUSTRATION_VIEW_BOX = "0 0 160 160";
+function illustrationSvgProps(size = "7rem", className) {
+  return {
+    viewBox: ILLUSTRATION_VIEW_BOX,
+    width: size,
+    height: size,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 4,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    role: "presentation",
+    focusable: "false",
+    className: cn("shrink-0", className)
+  };
+}
+var ILLUSTRATION_ACCENT_VAR = "--illustration-accent";
+function illustrationAccent(fallback) {
+  return `var(${ILLUSTRATION_ACCENT_VAR}, ${fallback})`;
+}
+
+export {
+  ILLUSTRATION_VIEW_BOX,
+  illustrationSvgProps,
+  ILLUSTRATION_ACCENT_VAR,
+  illustrationAccent
+};
+//# sourceMappingURL=chunk-A47AZPCL.js.map

package/dist/chunk-A47AZPCL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/illustration-base.tsx"],"sourcesContent":["import type { SVGProps } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Shared 160×160 canvas every illustration draws on. Keeping one constant\n * means every illustration's hand-authored coordinates line up on the same\n * grid — every subject's ink is drawn to fill an ~88×88 box centered at\n * (80, 78) (#24 fix round 1, P1-1), so the seven read as one optically-sized\n * family instead of varying 2.1× against each other.\n */\nexport const ILLUSTRATION_VIEW_BOX = \"0 0 160 160\";\n\nexport interface IllustrationProps extends SVGProps<SVGSVGElement> {\n  /**\n   * Rendered width & height (any CSS length — pass a `rem` value to stay\n   * density/zoom-aware). Illustrations are drawn to read clearly from about\n   * `4rem` (64px) up to `10rem` (160px).\n   * @default \"7rem\"\n   */\n  size?: string | number;\n}\n\n/**\n * The `<svg>`-level attributes every illustration shares: canvas, stroke\n * defaults (`currentColor`, so it themes with whatever text color the caller\n * or ambient context applies — e.g. `StatePanel` tints the error kind's slot\n * `text-destructive`), rem-based sizing, and decorative a11y (`aria-hidden`,\n * `role=\"presentation\"`) — every illustration is decorative; the state's\n * title/description text is the accessible content, never the artwork.\n *\n * Deliberately does NOT include `data-slot` — each illustration file declares\n * its own `data-slot=\"<name>-illustration\"` literal alongside this spread, so\n * the stable-selector convention (`.claude/rules/component-api.md`) is\n * visible per-component, not hidden behind a shared factory.\n */\nexport function illustrationSvgProps(size: string | number = \"7rem\", className?: string) {\n  return {\n    viewBox: ILLUSTRATION_VIEW_BOX,\n    width: size,\n    height: size,\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 4,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true as const,\n    role: \"presentation\" as const,\n    focusable: \"false\" as const,\n    className: cn(\"shrink-0\", className),\n  };\n}\n\n/**\n * Accent-semantics convention (#48 finding 1): an illustration draws at most\n * ONE accent mark (via `illustrationAccent()` below), and it exists ONLY\n * when it carries information the silhouette (the `currentColor`-stroked\n * subject) does not already supply on its own — never as ornamental\n * flourish wearing a meaning-bearing token. Applied across the seven\n * shipped illustrations:\n * - **Meaning-bearing (kept):** the \"×\" that turns a magnifying glass into\n *   \"no results\" (`NoResultsIllustration`), the keyhole that turns a padlock\n *   body into \"restricted\" (`NoAccessIllustration`), the checkmark that\n *   turns a bare ring into \"success\" (`SuccessIllustration`), the\n *   exclamation that turns a torn document into \"warning\" rather than\n *   merely \"broken\" (`ErrorIllustration`).\n * - **Was decorative-only, removed (#48):** the \"add\" badge on\n *   `EmptyListIllustration` (three rows already read as \"empty list\" on\n *   their own), the sparkle on `FirstRunIllustration` (the planted flag\n *   already reads as \"start here\"), and the broken-link fragments on\n *   `OfflineIllustration` (a slashed cloud already reads as \"disconnected\" —\n *   the universal \"no signal\" idiom). Their accent-free silhouettes carry\n *   the full state alone, matching how `ErrorIllustration`'s silhouette\n *   already did before this convention was written down.\n * Every illustration is `aria-hidden` regardless (the state's title/\n * description text is the ACCESSIBLE channel — see `illustrationSvgProps`\n * below), so this is a visual-consistency rule, not an a11y requirement on\n * its own; don't regress the silhouette-carries-meaning property while\n * redrawing any of the four kept accents above.\n */\n\n/**\n * The custom property every illustration's single meaning-bearing accent\n * reads through. `StatePanel` sets it on the illustration slot's wrapper for\n * `kind=\"error\"` (`var(--destructive-text)`) so the accent follows the\n * panel's tint instead of staying pinned to one hue inside a re-colored slot\n * (#24 fix round 1, P0-2) — without this, an illustration whose accent\n * defaults to the brand hue renders a lime badge on a red error panel. Falls\n * back to each illustration's own default hue when no ambient override is\n * set.\n */\nexport const ILLUSTRATION_ACCENT_VAR = \"--illustration-accent\";\n\n/**\n * Build the `style` value for an illustration's accent ink: honors the\n * ambient `--illustration-accent` override when set, otherwise `fallback`.\n * `fallback` must be the correct **mark rung** for the accent's hue — e.g.\n * `var(--primary-text)` (NOT `var(--primary)`, a plate color that measures\n * 1.42:1 on `--card` in the `light` theme — #24 fix round 1, P0-1; see\n * `.claude/rules/styling-and-tokens.md` \"Which status rung a graphical MARK\n * reaches for\"), `var(--success-text)` for a positive-outcome accent, or\n * `var(--destructive-text)` for an error accent — the TEXT rung, deliberately\n * distinct from the FILL rung (`--destructive`) `StatePanel` puts the\n * SUBJECT on for `kind=\"error\"`, so the two don't collapse onto one colour\n * (#48 finding 2).\n */\nexport function illustrationAccent(fallback: string): string {\n  return `var(${ILLUSTRATION_ACCENT_VAR}, ${fallback})`;\n}\n"],"mappings":";;;;;;AAUO,IAAM,wBAAwB;AAyB9B,SAAS,qBAAqB,OAAwB,QAAQ,WAAoB;AACvF,SAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW,GAAG,YAAY,SAAS;AAAA,EACrC;AACF;AAwCO,IAAM,0BAA0B;AAehC,SAAS,mBAAmB,UAA0B;AAC3D,SAAO,OAAO,uBAAuB,KAAK,QAAQ;AACpD;","names":[]}

package/dist/chunk-AA3SPDJU.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AA3SPDJU.js.map

package/dist/chunk-AA3SPDJU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AC7X3D2M.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AC7X3D2M.js.map

package/dist/chunk-AC7X3D2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AE6UDP36.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AE6UDP36.js.map

package/dist/chunk-AE6UDP36.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AFEFAGPW.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AFEFAGPW.js.map

package/dist/chunk-AFEFAGPW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AFJCS2WV.js

@@ -0,0 +1,95 @@
+"use client";
+
+// src/components/virtual-select/use-virtual-listbox.ts
+import { useCallback, useEffect, useState } from "react";
+function findNext(filtered, from) {
+  for (let i = Math.max(0, from); i < filtered.length; i++) {
+    if (!filtered[i]?.disabled) return i;
+  }
+  return -1;
+}
+function findPrev(filtered, from) {
+  for (let i = Math.min(from, filtered.length - 1); i >= 0; i--) {
+    if (!filtered[i]?.disabled) return i;
+  }
+  return -1;
+}
+function useVirtualListbox({
+  count,
+  filtered,
+  isOpen,
+  onSelect,
+  virtualizer
+}) {
+  const [activeIndex, setActiveIndexRaw] = useState(0);
+  useEffect(() => {
+    const first = findNext(filtered, 0);
+    setActiveIndexRaw(first >= 0 ? first : 0);
+  }, [filtered]);
+  useEffect(() => {
+    if (!isOpen) setActiveIndexRaw(0);
+  }, [isOpen]);
+  const setActiveIndex = useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      setActiveIndexRaw(clamped);
+      virtualizer?.scrollToIndex(clamped, { align: "auto" });
+    },
+    [count, virtualizer]
+  );
+  const onInputKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (count === 0) return;
+          const next = findNext(filtered, activeIndex + 1);
+          if (next >= 0) setActiveIndex(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (count === 0) return;
+          const prev = findPrev(filtered, activeIndex - 1);
+          if (prev >= 0) setActiveIndex(prev);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          if (count === 0) return;
+          const first = findNext(filtered, 0);
+          setActiveIndex(first >= 0 ? first : 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          if (count === 0) return;
+          const last = findPrev(filtered, filtered.length - 1);
+          setActiveIndex(last >= 0 ? last : 0);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (count === 0) return;
+          const opt = filtered[activeIndex];
+          if (opt && !opt.disabled) {
+            onSelect(opt.value);
+          }
+          break;
+        }
+        // Escape is handled by Radix Popover (it closes the portal and
+        // returns focus to the trigger). No additional handling required here.
+        default:
+          break;
+      }
+    },
+    [isOpen, count, filtered, activeIndex, setActiveIndex, onSelect]
+  );
+  return { activeIndex, setActiveIndex, onInputKeyDown };
+}
+
+export {
+  useVirtualListbox
+};
+//# sourceMappingURL=chunk-AFJCS2WV.js.map

package/dist/chunk-AFJCS2WV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/virtual-select/use-virtual-listbox.ts"],"sourcesContent":["// a2ui.exposed: yes\n\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { Virtualizer } from \"@tanstack/react-virtual\";\n\nexport interface VirtualSelectOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\ninterface UseVirtualListboxOptions {\n  count: number;\n  filtered: VirtualSelectOption[];\n  /** Reserved for future use (e.g. multi-select keyboard shortcuts). */\n  multiple?: boolean;\n  isOpen: boolean;\n  onSelect: (value: string) => void;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  virtualizer: Virtualizer<any, any> | null;\n}\n\ninterface UseVirtualListboxReturn {\n  activeIndex: number;\n  setActiveIndex: (index: number) => void;\n  onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** First non-disabled option index at or after `from`; -1 if none exists. */\nfunction findNext(filtered: VirtualSelectOption[], from: number): number {\n  for (let i = Math.max(0, from); i < filtered.length; i++) {\n    if (!filtered[i]?.disabled) return i;\n  }\n  return -1;\n}\n\n/** Last non-disabled option index at or before `from`; -1 if none exists. */\nfunction findPrev(filtered: VirtualSelectOption[], from: number): number {\n  for (let i = Math.min(from, filtered.length - 1); i >= 0; i--) {\n    if (!filtered[i]?.disabled) return i;\n  }\n  return -1;\n}\n\n/**\n * Keyboard navigation logic for the VirtualSelect listbox.\n * Encapsulates ArrowDown/Up/Home/End/Enter/Escape handling.\n * Focus stays on the search input; `aria-activedescendant` tracks the active row.\n */\nexport function useVirtualListbox({\n  count,\n  filtered,\n  isOpen,\n  onSelect,\n  virtualizer,\n}: UseVirtualListboxOptions): UseVirtualListboxReturn {\n  const [activeIndex, setActiveIndexRaw] = useState(0);\n\n  // When the filtered list changes, reset to the first enabled option.\n  useEffect(() => {\n    const first = findNext(filtered, 0);\n    setActiveIndexRaw(first >= 0 ? first : 0);\n  }, [filtered]);\n\n  // When the popover closes, reset to 0.\n  useEffect(() => {\n    if (!isOpen) setActiveIndexRaw(0);\n  }, [isOpen]);\n\n  const setActiveIndex = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, count - 1));\n      setActiveIndexRaw(clamped);\n      virtualizer?.scrollToIndex(clamped, { align: \"auto\" });\n    },\n    [count, virtualizer],\n  );\n\n  const onInputKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isOpen) return;\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const next = findNext(filtered, activeIndex + 1);\n          if (next >= 0) setActiveIndex(next);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const prev = findPrev(filtered, activeIndex - 1);\n          if (prev >= 0) setActiveIndex(prev);\n          break;\n        }\n        case \"Home\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const first = findNext(filtered, 0);\n          setActiveIndex(first >= 0 ? first : 0);\n          break;\n        }\n        case \"End\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const last = findPrev(filtered, filtered.length - 1);\n          setActiveIndex(last >= 0 ? last : 0);\n          break;\n        }\n        case \"Enter\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const opt = filtered[activeIndex];\n          if (opt && !opt.disabled) {\n            onSelect(opt.value);\n          }\n          break;\n        }\n        // Escape is handled by Radix Popover (it closes the portal and\n        // returns focus to the trigger). No additional handling required here.\n        default:\n          break;\n      }\n    },\n    [isOpen, count, filtered, activeIndex, setActiveIndex, onSelect],\n  );\n\n  return { activeIndex, setActiveIndex, onInputKeyDown };\n}\n"],"mappings":";;;AAGA,SAAS,aAAa,WAAW,gBAAgB;AA2BjD,SAAS,SAAS,UAAiC,MAAsB;AACvE,WAAS,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxD,QAAI,CAAC,SAAS,CAAC,GAAG,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAGA,SAAS,SAAS,UAAiC,MAAsB;AACvE,WAAS,IAAI,KAAK,IAAI,MAAM,SAAS,SAAS,CAAC,GAAG,KAAK,GAAG,KAAK;AAC7D,QAAI,CAAC,SAAS,CAAC,GAAG,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAOO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,CAAC,aAAa,iBAAiB,IAAI,SAAS,CAAC;AAGnD,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS,UAAU,CAAC;AAClC,sBAAkB,SAAS,IAAI,QAAQ,CAAC;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,mBAAkB,CAAC;AAAA,EAClC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkB;AACjB,YAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;AACtD,wBAAkB,OAAO;AACzB,mBAAa,cAAc,SAAS,EAAE,OAAO,OAAO,CAAC;AAAA,IACvD;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA6C;AAC5C,UAAI,CAAC,OAAQ;AAEb,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK,aAAa;AAChB,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,cAAc,CAAC;AAC/C,cAAI,QAAQ,EAAG,gBAAe,IAAI;AAClC;AAAA,QACF;AAAA,QACA,KAAK,WAAW;AACd,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,cAAc,CAAC;AAC/C,cAAI,QAAQ,EAAG,gBAAe,IAAI;AAClC;AAAA,QACF;AAAA,QACA,KAAK,QAAQ;AACX,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,QAAQ,SAAS,UAAU,CAAC;AAClC,yBAAe,SAAS,IAAI,QAAQ,CAAC;AACrC;AAAA,QACF;AAAA,QACA,KAAK,OAAO;AACV,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,SAAS,SAAS,CAAC;AACnD,yBAAe,QAAQ,IAAI,OAAO,CAAC;AACnC;AAAA,QACF;AAAA,QACA,KAAK,SAAS;AACZ,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,MAAM,SAAS,WAAW;AAChC,cAAI,OAAO,CAAC,IAAI,UAAU;AACxB,qBAAS,IAAI,KAAK;AAAA,UACpB;AACA;AAAA,QACF;AAAA;AAAA;AAAA,QAGA;AACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,OAAO,UAAU,aAAa,gBAAgB,QAAQ;AAAA,EACjE;AAEA,SAAO,EAAE,aAAa,gBAAgB,eAAe;AACvD;","names":[]}

package/dist/chunk-AQNLEP5F.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AQNLEP5F.js.map

package/dist/chunk-AQNLEP5F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AUQVJ7KO.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-AUQVJ7KO.js.map

package/dist/chunk-AUQVJ7KO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-AXKZBRZK.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  illustrationSvgProps
+} from "./chunk-A47AZPCL.js";
+
+// src/illustrations/first-run-illustration.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FirstRunIllustration = forwardRef(
+  function FirstRunIllustration2({ size, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        ...illustrationSvgProps(size, className),
+        "data-slot": "first-run-illustration",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("line", { x1: "64", y1: "122", x2: "64", y2: "46" }),
+          /* @__PURE__ */ jsx("path", { d: "M64,46 L100,54 L86,64 L100,74 L64,82 Z", strokeLinejoin: "round" }),
+          /* @__PURE__ */ jsx("line", { x1: "36", y1: "122", x2: "90", y2: "122" })
+        ]
+      }
+    );
+  }
+);
+FirstRunIllustration.displayName = "FirstRunIllustration";
+
+export {
+  FirstRunIllustration
+};
+//# sourceMappingURL=chunk-AXKZBRZK.js.map

package/dist/chunk-AXKZBRZK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/first-run-illustration.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { illustrationSvgProps, type IllustrationProps } from \"./illustration-base\";\n\n/**\n * First-run / onboarding state. A line-art planted flag — reads as \"start\n * here\" on its own silhouette, distinct from `SuccessIllustration`. No\n * accent mark, per the accent-semantics convention in `illustration-base.tsx`\n * (#48 finding 1): a decorative sparkle here would repeat information the\n * flag already supplies, not add any.\n */\nexport const FirstRunIllustration = forwardRef<SVGSVGElement, IllustrationProps>(\n  function FirstRunIllustration({ size, className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        {...illustrationSvgProps(size, className)}\n        data-slot=\"first-run-illustration\"\n        {...props}\n      >\n        <line x1=\"64\" y1=\"122\" x2=\"64\" y2=\"46\" />\n        <path d=\"M64,46 L100,54 L86,64 L100,74 L64,82 Z\" strokeLinejoin=\"round\" />\n        <line x1=\"36\" y1=\"122\" x2=\"90\" y2=\"122\" />\n      </svg>\n    );\n  },\n);\nFirstRunIllustration.displayName = \"FirstRunIllustration\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAarB,SAME,KANF;AAHC,IAAM,uBAAuB;AAAA,EAClC,SAASA,sBAAqB,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK;AAChE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,qBAAqB,MAAM,SAAS;AAAA,QACxC,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,IAAG,MAAK,IAAG,OAAM,IAAG,MAAK,IAAG,MAAK;AAAA,UACvC,oBAAC,UAAK,GAAE,0CAAyC,gBAAe,SAAQ;AAAA,UACxE,oBAAC,UAAK,IAAG,MAAK,IAAG,OAAM,IAAG,MAAK,IAAG,OAAM;AAAA;AAAA;AAAA,IAC1C;AAAA,EAEJ;AACF;AACA,qBAAqB,cAAc;","names":["FirstRunIllustration"]}

package/dist/chunk-AZEABCK4.js

@@ -0,0 +1,30 @@
+"use client";
+
+// src/lib/trigger-query.ts
+function isBoundary(text, index, boundary) {
+  if (index === 0) return true;
+  const previous = text[index - 1] ?? "";
+  if (boundary === "line-start") return previous === "\n";
+  return /\s/.test(previous) || previous === "(" || previous === "[";
+}
+function findTriggerQuery(text, caret, trigger, options) {
+  const boundary = options?.boundary ?? "word";
+  if (caret < trigger.length) return null;
+  const start = text.lastIndexOf(trigger, caret - trigger.length);
+  if (start < 0) return null;
+  const query = text.slice(start + trigger.length, caret);
+  if (/\s/.test(query)) return null;
+  if (!isBoundary(text, start, boundary)) return null;
+  if (options?.isTriggerConsumed?.(start)) return null;
+  return { start, query };
+}
+function replaceTriggerRun(text, queryStart, caret, insertText) {
+  const nextText = text.slice(0, queryStart) + insertText + text.slice(caret);
+  return { text: nextText, caret: queryStart + insertText.length };
+}
+
+export {
+  findTriggerQuery,
+  replaceTriggerRun
+};
+//# sourceMappingURL=chunk-AZEABCK4.js.map

package/dist/chunk-AZEABCK4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/trigger-query.ts"],"sourcesContent":["/**\n * The generic, component-agnostic half of a trigger-driven inline palette —\n * \"is the caret sitting inside a `trigger + query` run, and how do I splice a\n * chosen result back in\". Zero React, zero DOM, zero knowledge of mentions.\n *\n * Lifted out of `MentionInput`'s private `findQuery`/`isWordBoundary`\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 5) so a second\n * trigger-driven surface (a slash-command palette) reuses the algorithm instead\n * of re-implementing it. `MentionInput` consumes this module unchanged — see\n * `mention-input.tsx`.\n */\n\n/**\n * Where a trigger character is allowed to START a query.\n *\n * `\"word\"`       — index 0, or preceded by whitespace / \"(\" / \"[\".  (`MentionInput`'s\n *                  behaviour, unchanged — an \"@\" inside an email address must not open a popup.)\n * `\"line-start\"` — index 0, or preceded by \"\\n\".  (A slash palette: \"/help\" opens, \"cd /usr\" does not.)\n */\nexport type TriggerBoundary = \"word\" | \"line-start\";\n\n/** An in-progress `trigger + query` run under the caret. */\nexport interface TriggerQuery {\n  /** Offset of the trigger character in `text`. */\n  start: number;\n  /** The query WITHOUT the trigger character. */\n  query: string;\n}\n\nexport interface FindTriggerQueryOptions {\n  /** @default \"word\" */\n  boundary?: TriggerBoundary;\n  /**\n   * Veto a candidate whose trigger character has already been consumed by a\n   * committed token — `MentionInput` passes `mentionAt(...)` here so an\n   * inserted \"@Ada Lovelace\" cannot re-open the popup. Omit when there are no\n   * committed tokens (a slash palette has none).\n   */\n  isTriggerConsumed?: (start: number) => boolean;\n}\n\nfunction isBoundary(text: string, index: number, boundary: TriggerBoundary): boolean {\n  if (index === 0) return true;\n  const previous = text[index - 1] ?? \"\";\n  if (boundary === \"line-start\") return previous === \"\\n\";\n  return /\\s/.test(previous) || previous === \"(\" || previous === \"[\";\n}\n\n/**\n * Is the caret sitting inside a `trigger + query` run?\n *\n * DERIVED from committed text + caret, never intercepted at keydown — a\n * keydown-driven trigger must `preventDefault()` every printable character and\n * re-insert it by hand, which destroys IME composition, native undo, spellcheck\n * and paste. Deriving means the popup opens identically whether the trigger\n * arrived by typing, pasting, an IME commit, or a click that moved the caret\n * back into a half-typed query.\n */\nexport function findTriggerQuery(\n  text: string,\n  caret: number,\n  trigger: string,\n  options?: FindTriggerQueryOptions,\n): TriggerQuery | null {\n  const boundary = options?.boundary ?? \"word\";\n\n  if (caret < trigger.length) return null;\n  const start = text.lastIndexOf(trigger, caret - trigger.length);\n  if (start < 0) return null;\n\n  const query = text.slice(start + trigger.length, caret);\n  if (/\\s/.test(query)) return null;\n  if (!isBoundary(text, start, boundary)) return null;\n  if (options?.isTriggerConsumed?.(start)) return null;\n\n  return { start, query };\n}\n\n/** The plain-text half of an insert: splice `insertText` over the run, and say where the caret lands. */\nexport function replaceTriggerRun(\n  text: string,\n  queryStart: number,\n  caret: number,\n  insertText: string,\n): { text: string; caret: number } {\n  const nextText = text.slice(0, queryStart) + insertText + text.slice(caret);\n  return { text: nextText, caret: queryStart + insertText.length };\n}\n"],"mappings":";;;AAyCA,SAAS,WAAW,MAAc,OAAe,UAAoC;AACnF,MAAI,UAAU,EAAG,QAAO;AACxB,QAAM,WAAW,KAAK,QAAQ,CAAC,KAAK;AACpC,MAAI,aAAa,aAAc,QAAO,aAAa;AACnD,SAAO,KAAK,KAAK,QAAQ,KAAK,aAAa,OAAO,aAAa;AACjE;AAYO,SAAS,iBACd,MACA,OACA,SACA,SACqB;AACrB,QAAM,WAAW,SAAS,YAAY;AAEtC,MAAI,QAAQ,QAAQ,OAAQ,QAAO;AACnC,QAAM,QAAQ,KAAK,YAAY,SAAS,QAAQ,QAAQ,MAAM;AAC9D,MAAI,QAAQ,EAAG,QAAO;AAEtB,QAAM,QAAQ,KAAK,MAAM,QAAQ,QAAQ,QAAQ,KAAK;AACtD,MAAI,KAAK,KAAK,KAAK,EAAG,QAAO;AAC7B,MAAI,CAAC,WAAW,MAAM,OAAO,QAAQ,EAAG,QAAO;AAC/C,MAAI,SAAS,oBAAoB,KAAK,EAAG,QAAO;AAEhD,SAAO,EAAE,OAAO,MAAM;AACxB;AAGO,SAAS,kBACd,MACA,YACA,OACA,YACiC;AACjC,QAAM,WAAW,KAAK,MAAM,GAAG,UAAU,IAAI,aAAa,KAAK,MAAM,KAAK;AAC1E,SAAO,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,OAAO;AACjE;","names":[]}

package/dist/chunk-B23VW24W.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-B23VW24W.js.map

package/dist/chunk-B23VW24W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-B2RSOLLO.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-B2RSOLLO.js.map

package/dist/chunk-B2RSOLLO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-B5QQLMEE.js

@@ -0,0 +1,31 @@
+"use client";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/collapsible/collapsible.tsx
+import { forwardRef } from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsx } from "react/jsx-runtime";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = forwardRef(function CollapsibleContent3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Collapsible,
+  CollapsibleTrigger2 as CollapsibleTrigger,
+  CollapsibleContent2 as CollapsibleContent
+};
+//# sourceMappingURL=chunk-B5QQLMEE.js.map

package/dist/chunk-B5QQLMEE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Collapsible = CollapsiblePrimitive.Root;\nexport const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\nexport const CollapsibleContent = forwardRef<\n  ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,\n  ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>\n>(function CollapsibleContent({ className, ...props }, ref) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      ref={ref}\n      className={cn(\n        \"overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up data-[state=open]:[--tw-ease:var(--ease-entrance)] data-[state=closed]:[--tw-ease:var(--ease-exit)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,0BAA0B;AAWlC;AARG,IAAM,cAAmC;AACzC,IAAMA,sBAA0C;AAEhD,IAAMC,sBAAqB,WAGhC,SAASA,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["CollapsibleTrigger","CollapsibleContent"]}

package/dist/chunk-BLNXHETI.js

@@ -0,0 +1,163 @@
+"use client";
+import {
+  ILLUSTRATION_ACCENT_VAR
+} from "./chunk-A47AZPCL.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/state-panel/state-panel.tsx
+import "react";
+import { CircleAlert } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var statePanelVariants = cva(
+  [
+    "flex flex-col items-center justify-center gap-3 rounded-xl px-6 py-12 text-center",
+    "animate-in fade-in slide-in-from-bottom-2 duration-base ease-entrance"
+  ],
+  {
+    variants: {
+      kind: {
+        empty: "border border-dashed bg-surface",
+        // error: the non-color, monochrome-survivable cue is the rail's WIDTH
+        // (border-s-4, 4px, vs the 1px hairline on the other three edges) —
+        // not its hue (per styling-and-tokens.md's border/border-strong
+        // decision test: "if I deleted this line, could a sighted user still
+        // tell the two regions apart?" here it's the thickness that answers
+        // yes). So the rail's COLOR should stay in the destructive family
+        // like the rest of the panel, not fall back to the neutral
+        // `border-strong` rung — a 4px grey rail beside three red hairlines
+        // read as a CSS-specificity bug, not a deliberate accent (#71).
+        // `border-s-destructive` is the FILL rung (styling-and-tokens.md
+        // "which status rung a graphical MARK reaches for") — guaranteed
+        // >=3:1 against --card/--background in every theme, so it still
+        // satisfies the WCAG 1.4.11 non-text-contrast guarantee the old
+        // `border-border-strong` comment claimed. The icon (:87-91) and the
+        // eyebrow (:148-152 below) are the third and fourth non-color cues.
+        error: "border border-destructive/30 bg-destructive/5 border-s-4 border-s-destructive",
+        loading: ""
+      }
+    },
+    defaultVariants: { kind: "empty" }
+  }
+);
+var sizeMap = { sm: "size-4", md: "size-6", lg: "size-8" };
+function DefaultSpinner({ size = "md" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cn("animate-spin text-muted-foreground", sizeMap[size]),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4Z" })
+      ]
+    }
+  );
+}
+function DefaultErrorIcon() {
+  return /* @__PURE__ */ jsx(CircleAlert, { className: "size-10", "aria-hidden": "true" });
+}
+function StatePanel({
+  kind = "empty",
+  title,
+  description,
+  icon,
+  illustration,
+  titleAs: Tag = "h3",
+  loadingLabel,
+  size = "md",
+  actions,
+  className
+}) {
+  const { t } = useLocale();
+  const isLoading = kind === "loading";
+  const isError = kind === "error";
+  const resolvedLoadingLabel = loadingLabel ?? t("loading");
+  const roleProps = isLoading ? { role: "status", "aria-live": "polite" } : isError ? { role: "alert" } : {};
+  const resolvedTitle = title ?? (isError ? t("ui.statePanel.errorTitle") : void 0);
+  const resolvedDescription = description ?? (isError ? t("ui.statePanel.errorDescription") : void 0);
+  let resolvedIcon;
+  if (icon !== void 0) {
+    resolvedIcon = icon;
+  } else if (isLoading) {
+    resolvedIcon = /* @__PURE__ */ jsx(DefaultSpinner, { size });
+  } else if (isError) {
+    resolvedIcon = /* @__PURE__ */ jsx(DefaultErrorIcon, {});
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-kind": kind, className: cn(statePanelVariants({ kind }), className), ...roleProps, children: [
+    isError && /* @__PURE__ */ jsx("span", { className: "text-eyebrow uppercase text-destructive-text", children: t("ui.statePanel.errorEyebrow") }),
+    illustration ? (
+      // Illustration wins over `icon` when both are given. No `[&_svg]:size-10`
+      // clamp here — an illustration governs its own (rem-based) size, unlike
+      // the fixed-size icon slot below. For `kind="error"` this also sets the
+      // `--illustration-accent` custom property every illustration's accent
+      // ink reads through, so ANY illustration (not just `ErrorIllustration`)
+      // retints its accent to `--destructive-text` instead of staying pinned
+      // to its default hue inside a red-tinted slot (#24 fix round 1, P0-2).
+      // TEXT rung, not the FILL token below: the wrapper's `text-destructive`
+      // class already puts the SUBJECT (silhouette) on the fill rung, so an
+      // accent override reading the same `--destructive` token collapsed
+      // onto it and disappeared (#48 finding 2) — `--destructive-text` is a
+      // deliberately distinct, deeper rung (matches the fallback every
+      // other illustration's own accent already uses: `--primary-text`,
+      // `--success-text`) so the accent stays visible against the retinted
+      // silhouette.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(isError ? "text-destructive" : "text-muted-foreground"),
+          style: isError ? { [ILLUSTRATION_ACCENT_VAR]: "var(--destructive-text)" } : void 0,
+          children: illustration
+        }
+      )
+    ) : resolvedIcon ? (
+      // Error icon keeps text-destructive (not muted) so it stays visible even
+      // when rendered at low contrast. In monochrome themes the icon shape
+      // (CircleAlert) carries the cue; the color is supplemental.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("[&_svg]:size-10", isError ? "text-destructive" : "text-muted-foreground"),
+          children: resolvedIcon
+        }
+      )
+    ) : null,
+    (resolvedTitle || resolvedDescription) && // A 112px+ illustration (default `size="7rem"`) needs a heavier title
+    // to group with, and more air between the artwork and the copy than
+    // between the title and its own description — otherwise the caption
+    // reads as an afterthought under the artwork instead of one grouped
+    // unit (#47). `mt-2` (on top of the root's `gap-3`) only fires on the
+    // illustration path; the plain `icon` path (a fixed 40x40 glyph) is
+    // untouched. The title/description gap stays the tight `space-y-1`
+    // either way — that's the "one visually distinct unit" the two lines
+    // read as.
+    /* @__PURE__ */ jsxs("div", { className: cn("space-y-1", illustration && "mt-2"), children: [
+      resolvedTitle && /* @__PURE__ */ jsx(
+        Tag,
+        {
+          className: cn(
+            "font-semibold text-foreground",
+            illustration ? "text-subtitle" : "text-body"
+          ),
+          children: resolvedTitle
+        }
+      ),
+      resolvedDescription && /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-sm text-body text-muted-foreground", children: resolvedDescription })
+    ] }),
+    isLoading && resolvedLoadingLabel && /* @__PURE__ */ jsx("span", { className: "text-body text-muted-foreground", children: resolvedLoadingLabel }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-2", children: actions }) : null
+  ] });
+}
+
+export {
+  statePanelVariants,
+  StatePanel
+};
+//# sourceMappingURL=chunk-BLNXHETI.js.map

package/dist/chunk-BLNXHETI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/state-panel/state-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport { type CSSProperties, type ReactNode } from \"react\";\nimport { CircleAlert } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { ILLUSTRATION_ACCENT_VAR } from \"../../illustrations/illustration-base\";\nimport { useLocale } from \"../locale-provider\";\n\n// ─── Variants ────────────────────────────────────────────────────────────────\n\nexport const statePanelVariants = cva(\n  [\n    \"flex flex-col items-center justify-center gap-3 rounded-xl px-6 py-12 text-center\",\n    \"animate-in fade-in slide-in-from-bottom-2 duration-base ease-entrance\",\n  ],\n  {\n    variants: {\n      kind: {\n        empty: \"border border-dashed bg-surface\",\n        // error: the non-color, monochrome-survivable cue is the rail's WIDTH\n        // (border-s-4, 4px, vs the 1px hairline on the other three edges) —\n        // not its hue (per styling-and-tokens.md's border/border-strong\n        // decision test: \"if I deleted this line, could a sighted user still\n        // tell the two regions apart?\" here it's the thickness that answers\n        // yes). So the rail's COLOR should stay in the destructive family\n        // like the rest of the panel, not fall back to the neutral\n        // `border-strong` rung — a 4px grey rail beside three red hairlines\n        // read as a CSS-specificity bug, not a deliberate accent (#71).\n        // `border-s-destructive` is the FILL rung (styling-and-tokens.md\n        // \"which status rung a graphical MARK reaches for\") — guaranteed\n        // >=3:1 against --card/--background in every theme, so it still\n        // satisfies the WCAG 1.4.11 non-text-contrast guarantee the old\n        // `border-border-strong` comment claimed. The icon (:87-91) and the\n        // eyebrow (:148-152 below) are the third and fourth non-color cues.\n        error: \"border border-destructive/30 bg-destructive/5 border-s-4 border-s-destructive\",\n        loading: \"\",\n      },\n    },\n    defaultVariants: { kind: \"empty\" },\n  },\n);\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface StatePanelProps extends VariantProps<typeof statePanelVariants> {\n  /**\n   * The visual/semantic kind of state.\n   * - `\"empty\"` — neutral \"nothing here yet\" (dashed border, surface bg).\n   * - `\"error\"` — recoverable failure (destructive border/bg, alert role).\n   * - `\"loading\"` — in-progress (spinner, status/live-region role).\n   */\n  kind?: \"empty\" | \"error\" | \"loading\";\n  /** Heading text. */\n  title?: ReactNode;\n  /** Supporting description below the title. */\n  description?: ReactNode;\n  /**\n   * Icon shown above the title, clamped to a uniform 40×40 so mismatched\n   * glyphs stay tidy. For `\"error\"` defaults to a built-in warning triangle.\n   * For `\"loading\"` defaults to an animated spinner. Ignored when\n   * `illustration` is also provided — see `illustration`.\n   */\n  icon?: ReactNode;\n  /**\n   * A larger illustration (one of `@elabs-ai/components-ui`'s shipped\n   * `*Illustration` components, or a consumer's own `ReactNode`) shown above\n   * the title instead of `icon`. Unlike `icon`, it is **not** clamped to\n   * 40×40 — an illustration governs its own size (see each illustration's\n   * `size` prop, `rem`-based, ~64px–160px). Takes precedence over `icon`\n   * when both are given.\n   */\n  illustration?: ReactNode;\n  /**\n   * Heading level for the panel's title (#328 convention). Set this to the\n   * level that correctly follows whatever heading precedes this panel in\n   * the document outline — e.g. `\"h3\"` inside a `ChartCard` whose own title\n   * is an `<h2>`.\n   * @default \"h3\"\n   */\n  titleAs?: \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** Accessible label for the spinner in loading state. @default \"Loading…\" */\n  loadingLabel?: string;\n  /** Spinner size (loading kind only). @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Primary / secondary action buttons. */\n  actions?: ReactNode;\n  className?: string;\n}\n\n// ─── Default icons ────────────────────────────────────────────────────────────\n\nconst sizeMap: Record<string, string> = { sm: \"size-4\", md: \"size-6\", lg: \"size-8\" };\n\nfunction DefaultSpinner({ size = \"md\" }: { size?: \"sm\" | \"md\" | \"lg\" }) {\n  return (\n    <svg\n      className={cn(\"animate-spin text-muted-foreground\", sizeMap[size])}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n      <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4Z\" />\n    </svg>\n  );\n}\n\nfunction DefaultErrorIcon() {\n  // Use the Lucide CircleAlert icon (solid ring + exclamation) for the error state.\n  // Rendered at size-10 so it reads clearly even at small panel sizes.\n  return <CircleAlert className=\"size-10\" aria-hidden=\"true\" />;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\n/**\n * Unified state panel covering empty, error, and loading states.\n * Replaces the three separate `EmptyState` / `ErrorState` / `LoadingState` components\n * while keeping those as back-compat thin wrappers.\n */\nexport function StatePanel({\n  kind = \"empty\",\n  title,\n  description,\n  icon,\n  illustration,\n  titleAs: Tag = \"h3\",\n  loadingLabel,\n  size = \"md\",\n  actions,\n  className,\n}: StatePanelProps) {\n  const { t } = useLocale();\n  const isLoading = kind === \"loading\";\n  const isError = kind === \"error\";\n  const resolvedLoadingLabel = loadingLabel ?? t(\"loading\");\n\n  // Role: loading → status + live region; error → alert; empty → (none needed).\n  const roleProps = isLoading\n    ? ({ role: \"status\", \"aria-live\": \"polite\" } as const)\n    : isError\n      ? ({ role: \"alert\" } as const)\n      : {};\n\n  // Default title / description fallbacks for error state (mirroring old ErrorState).\n  const resolvedTitle = title ?? (isError ? t(\"ui.statePanel.errorTitle\") : undefined);\n  const resolvedDescription =\n    description ?? (isError ? t(\"ui.statePanel.errorDescription\") : undefined);\n\n  // Resolve displayed icon.\n  let resolvedIcon: ReactNode;\n  if (icon !== undefined) {\n    resolvedIcon = icon;\n  } else if (isLoading) {\n    resolvedIcon = <DefaultSpinner size={size} />;\n  } else if (isError) {\n    resolvedIcon = <DefaultErrorIcon />;\n  }\n\n  return (\n    <div data-kind={kind} className={cn(statePanelVariants({ kind }), className)} {...roleProps}>\n      {/* Error eyebrow: \"Error\" label shown above the icon so the panel reads\n          as an error structurally even in monochrome themes. This is running\n          TEXT, not a mark, so it takes the ink rung `text-destructive-text`\n          (>= 4.5:1, gated in themes-contrast.test.ts) — not the fill rung\n          `text-destructive`, whose contract is only the 3:1 mark bar (see\n          \"Which status rung a graphical MARK reaches for\", styling-and-tokens.md\n          #381). Combined with the thick left border from statePanelVariants it\n          gives two non-color structural cues. The icon below deliberately\n          KEEPS text-destructive: an icon is a mark, so the fill rung is\n          correct there — do not \"tidy\" it onto -text too. */}\n      {isError && (\n        <span className=\"text-eyebrow uppercase text-destructive-text\">\n          {t(\"ui.statePanel.errorEyebrow\")}\n        </span>\n      )}\n\n      {illustration ? (\n        // Illustration wins over `icon` when both are given. No `[&_svg]:size-10`\n        // clamp here — an illustration governs its own (rem-based) size, unlike\n        // the fixed-size icon slot below. For `kind=\"error\"` this also sets the\n        // `--illustration-accent` custom property every illustration's accent\n        // ink reads through, so ANY illustration (not just `ErrorIllustration`)\n        // retints its accent to `--destructive-text` instead of staying pinned\n        // to its default hue inside a red-tinted slot (#24 fix round 1, P0-2).\n        // TEXT rung, not the FILL token below: the wrapper's `text-destructive`\n        // class already puts the SUBJECT (silhouette) on the fill rung, so an\n        // accent override reading the same `--destructive` token collapsed\n        // onto it and disappeared (#48 finding 2) — `--destructive-text` is a\n        // deliberately distinct, deeper rung (matches the fallback every\n        // other illustration's own accent already uses: `--primary-text`,\n        // `--success-text`) so the accent stays visible against the retinted\n        // silhouette.\n        <div\n          className={cn(isError ? \"text-destructive\" : \"text-muted-foreground\")}\n          style={\n            isError\n              ? ({ [ILLUSTRATION_ACCENT_VAR]: \"var(--destructive-text)\" } as CSSProperties)\n              : undefined\n          }\n        >\n          {illustration}\n        </div>\n      ) : resolvedIcon ? (\n        // Error icon keeps text-destructive (not muted) so it stays visible even\n        // when rendered at low contrast. In monochrome themes the icon shape\n        // (CircleAlert) carries the cue; the color is supplemental.\n        <div\n          className={cn(\"[&_svg]:size-10\", isError ? \"text-destructive\" : \"text-muted-foreground\")}\n        >\n          {resolvedIcon}\n        </div>\n      ) : null}\n\n      {(resolvedTitle || resolvedDescription) && (\n        // A 112px+ illustration (default `size=\"7rem\"`) needs a heavier title\n        // to group with, and more air between the artwork and the copy than\n        // between the title and its own description — otherwise the caption\n        // reads as an afterthought under the artwork instead of one grouped\n        // unit (#47). `mt-2` (on top of the root's `gap-3`) only fires on the\n        // illustration path; the plain `icon` path (a fixed 40x40 glyph) is\n        // untouched. The title/description gap stays the tight `space-y-1`\n        // either way — that's the \"one visually distinct unit\" the two lines\n        // read as.\n        <div className={cn(\"space-y-1\", illustration && \"mt-2\")}>\n          {resolvedTitle && (\n            <Tag\n              className={cn(\n                \"font-semibold text-foreground\",\n                illustration ? \"text-subtitle\" : \"text-body\",\n              )}\n            >\n              {resolvedTitle}\n            </Tag>\n          )}\n          {resolvedDescription && (\n            <p className=\"mx-auto max-w-sm text-body text-muted-foreground\">\n              {resolvedDescription}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Loading label (visually shown as supporting text; also the live-region content). */}\n      {isLoading && resolvedLoadingLabel && (\n        <span className=\"text-body text-muted-foreground\">{resolvedLoadingLabel}</span>\n      )}\n\n      {actions ? <div className=\"mt-1 flex items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}