@boost33/ui 0.8.1 → 0.9.0

package/dist/components/Backdrop/icons.d.ts

@@ -0,0 +1,70 @@
+export declare const ChevronRight: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const ChevronLeft: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const ChevronDown: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const ChevronUp: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** arrow-up: a table column sorted ascending (Batch 3 · Lists). 16px, stroke 2 (ADR-0017, D17). */
+export declare const ArrowUp: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** arrow-down: a table column sorted descending (Batch 3 · Lists). */
+export declare const ArrowDown: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Close: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Search: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Dots: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Plus: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Check: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Minus: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Pin: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const PinFilled: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const CheckCircleFilled: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+export declare const Circle: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** layout-sidebar-left-collapse */
+export declare const Collapse: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** layout-sidebar-left-expand */
+export declare const Expand: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** adjustments-horizontal, the filter button's glyph */
+export declare const Filter: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** loader-2, spun by the button's loading state */
+export declare const Spinner: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;
+/** alert-circle, the `warning` meaning in backdrop-icons.ts: a field's error line */
+export declare const AlertCircle: ({ size }: {
+    size?: number;
+}) => import("react").JSX.Element;

package/dist/components/Backdrop/icons.js

@@ -0,0 +1,103 @@
+import { jsxs as h, jsx as l } from "react/jsx-runtime";
+function a({ size: t = 18, strokeWidth: d = 1.75, children: e }) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: t,
+      height: t,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: d,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { flexShrink: 0, display: "block" },
+      children: e
+    }
+  );
+}
+const r = ({ size: t = 16 }) => /* @__PURE__ */ l(a, { size: t, strokeWidth: 2, children: /* @__PURE__ */ l("path", { d: "M9 6l6 6l-6 6" }) }), i = ({ size: t = 16 }) => /* @__PURE__ */ l(a, { size: t, children: /* @__PURE__ */ l("path", { d: "M6 9l6 6l6 -6" }) }), o = ({ size: t = 18 }) => /* @__PURE__ */ l(a, { size: t, children: /* @__PURE__ */ l("path", { d: "M6 15l6 -6l6 6" }) }), c = ({ size: t = 16 }) => /* @__PURE__ */ h(a, { size: t, strokeWidth: 2, children: [
+  /* @__PURE__ */ l("path", { d: "M12 5l0 14" }),
+  /* @__PURE__ */ l("path", { d: "M18 11l-6 -6" }),
+  /* @__PURE__ */ l("path", { d: "M6 11l6 -6" })
+] }), p = ({ size: t = 16 }) => /* @__PURE__ */ h(a, { size: t, strokeWidth: 2, children: [
+  /* @__PURE__ */ l("path", { d: "M12 5l0 14" }),
+  /* @__PURE__ */ l("path", { d: "M18 13l-6 6" }),
+  /* @__PURE__ */ l("path", { d: "M6 13l6 6" })
+] }), s = ({ size: t = 20 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M18 6l-12 12" }),
+  /* @__PURE__ */ l("path", { d: "M6 6l12 12" })
+] }), M = ({ size: t = 18 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }),
+  /* @__PURE__ */ l("path", { d: "M21 21l-6 -6" })
+] }), k = ({ size: t = 18 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }),
+  /* @__PURE__ */ l("path", { d: "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" }),
+  /* @__PURE__ */ l("path", { d: "M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" })
+] }), u = ({ size: t = 18 }) => /* @__PURE__ */ h(a, { size: t, strokeWidth: 2, children: [
+  /* @__PURE__ */ l("path", { d: "M12 5l0 14" }),
+  /* @__PURE__ */ l("path", { d: "M5 12l14 0" })
+] }), f = ({ size: t = 14 }) => /* @__PURE__ */ l(a, { size: t, strokeWidth: 2.5, children: /* @__PURE__ */ l("path", { d: "M5 12l5 5l10 -10" }) }), v = ({ size: t = 14 }) => /* @__PURE__ */ l(a, { size: t, strokeWidth: 2.5, children: /* @__PURE__ */ l("path", { d: "M5 12l14 0" }) }), C = ({ size: t = 16 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" }),
+  /* @__PURE__ */ l("path", { d: "M9 15l-4.5 4.5" }),
+  /* @__PURE__ */ l("path", { d: "M14.5 4l5.5 5.5" })
+] }), w = ({ size: t = 16 }) => /* @__PURE__ */ l("svg", { "aria-hidden": "true", focusable: "false", width: t, height: t, viewBox: "0 0 24 24", style: { flexShrink: 0, display: "block" }, children: /* @__PURE__ */ l(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M15.113 3.21l.094 .083l5.5 5.5a1 1 0 0 1 -1.175 1.59l-3.172 3.171l-1.424 3.797a1 1 0 0 1 -.158 .277l-.07 .08l-1.5 1.5a1 1 0 0 1 -1.32 .082l-.095 -.083l-2.793 -2.792l-3.793 3.792a1 1 0 0 1 -1.497 -1.32l.083 -.094l3.792 -3.793l-2.792 -2.793a1 1 0 0 1 -.083 -1.32l.083 -.094l1.5 -1.5a1 1 0 0 1 .258 -.187l.098 -.042l3.796 -1.425l3.171 -3.17a1 1 0 0 1 1.497 -1.26z"
+  }
+) }), x = ({ size: t = 20 }) => /* @__PURE__ */ l("svg", { "aria-hidden": "true", focusable: "false", width: t, height: t, viewBox: "0 0 24 24", style: { flexShrink: 0, display: "block" }, children: /* @__PURE__ */ l(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
+  }
+) }), m = ({ size: t = 20 }) => /* @__PURE__ */ l(a, { size: t, children: /* @__PURE__ */ l("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }) }), W = ({ size: t = 20 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }),
+  /* @__PURE__ */ l("path", { d: "M9 4v16" }),
+  /* @__PURE__ */ l("path", { d: "M15 10l-2 2l2 2" })
+] }), g = ({ size: t = 20 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" }),
+  /* @__PURE__ */ l("path", { d: "M9 4v16" }),
+  /* @__PURE__ */ l("path", { d: "M14 10l2 2l-2 2" })
+] }), y = ({ size: t = 18 }) => /* @__PURE__ */ h(a, { size: t, children: [
+  /* @__PURE__ */ l("path", { d: "M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }),
+  /* @__PURE__ */ l("path", { d: "M4 6l8 0" }),
+  /* @__PURE__ */ l("path", { d: "M16 6l4 0" }),
+  /* @__PURE__ */ l("path", { d: "M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }),
+  /* @__PURE__ */ l("path", { d: "M4 12l2 0" }),
+  /* @__PURE__ */ l("path", { d: "M10 12l10 0" }),
+  /* @__PURE__ */ l("path", { d: "M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }),
+  /* @__PURE__ */ l("path", { d: "M4 18l11 0" }),
+  /* @__PURE__ */ l("path", { d: "M19 18l1 0" })
+] }), b = ({ size: t = 16 }) => /* @__PURE__ */ l(a, { size: t, strokeWidth: 2, children: /* @__PURE__ */ l("path", { d: "M12 3a9 9 0 1 0 9 9" }) }), S = ({ size: t = 16 }) => /* @__PURE__ */ h(a, { size: t, strokeWidth: 2, children: [
+  /* @__PURE__ */ l("path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" }),
+  /* @__PURE__ */ l("path", { d: "M12 8v4" }),
+  /* @__PURE__ */ l("path", { d: "M12 16h.01" })
+] });
+export {
+  S as AlertCircle,
+  p as ArrowDown,
+  c as ArrowUp,
+  f as Check,
+  x as CheckCircleFilled,
+  i as ChevronDown,
+  r as ChevronRight,
+  o as ChevronUp,
+  m as Circle,
+  s as Close,
+  W as Collapse,
+  k as Dots,
+  g as Expand,
+  y as Filter,
+  v as Minus,
+  C as Pin,
+  w as PinFilled,
+  u as Plus,
+  M as Search,
+  b as Spinner
+};
+//# sourceMappingURL=icons.js.map

package/dist/components/Backdrop/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sources":["../../../src/components/Backdrop/icons.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\n/*\n * The handful of glyphs the Backdrop components draw themselves: chevrons, a\n * close cross, the search lens, the \"…\" of an overflow menu, a plus, a check,\n * the pin, and the strip's collapse/expand toggle. Paths are Tabler's (MIT),\n * the icon set the Paper file is drawn with, copied as data so the package takes\n * no icon dependency -- the same choice AccountMenu/icons.tsx made.\n *\n * Every other icon a Backdrop component shows (rail items, menu rows, chips) is\n * passed in by the consumer as a ReactNode: the package does not know what a\n * campaign or an inbox looks like (CLAUDE.md, \"No component here knows what a\n * lead, a campaign or a prospect is\").\n *\n * Decorative by construction: aria-hidden, stroked in currentColor so the\n * surrounding text colour (and therefore the theme) decides the ink.\n */\n\nfunction Glyph({ size = 18, strokeWidth = 1.75, children }: { size?: number; strokeWidth?: number; children: ReactNode }) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={strokeWidth}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      style={{ flexShrink: 0, display: 'block' }}\n    >\n      {children}\n    </svg>\n  )\n}\n\nexport const ChevronRight = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M9 6l6 6l-6 6\" />\n  </Glyph>\n)\n\nexport const ChevronLeft = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M15 6l-6 6l6 6\" />\n  </Glyph>\n)\n\nexport const ChevronDown = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M6 9l6 6l6 -6\" />\n  </Glyph>\n)\n\nexport const ChevronUp = ({ size = 18 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M6 15l6 -6l6 6\" />\n  </Glyph>\n)\n\n/** arrow-up: a table column sorted ascending (Batch 3 · Lists). 16px, stroke 2 (ADR-0017, D17). */\nexport const ArrowUp = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 11l-6 -6\" />\n    <path d=\"M6 11l6 -6\" />\n  </Glyph>\n)\n\n/** arrow-down: a table column sorted descending (Batch 3 · Lists). */\nexport const ArrowDown = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M18 13l-6 6\" />\n    <path d=\"M6 13l6 6\" />\n  </Glyph>\n)\n\nexport const Close = ({ size = 20 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M18 6l-12 12\" />\n    <path d=\"M6 6l12 12\" />\n  </Glyph>\n)\n\nexport const Search = ({ size = 18 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\" />\n    <path d=\"M21 21l-6 -6\" />\n  </Glyph>\n)\n\nexport const Dots = ({ size = 18 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\n    <path d=\"M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\n    <path d=\"M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\" />\n  </Glyph>\n)\n\nexport const Plus = ({ size = 18 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M12 5l0 14\" />\n    <path d=\"M5 12l14 0\" />\n  </Glyph>\n)\n\nexport const Check = ({ size = 14 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2.5}>\n    <path d=\"M5 12l5 5l10 -10\" />\n  </Glyph>\n)\n\nexport const Minus = ({ size = 14 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2.5}>\n    <path d=\"M5 12l14 0\" />\n  </Glyph>\n)\n\nexport const Pin = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4\" />\n    <path d=\"M9 15l-4.5 4.5\" />\n    <path d=\"M14.5 4l5.5 5.5\" />\n  </Glyph>\n)\n\nexport const PinFilled = ({ size = 16 }: { size?: number }) => (\n  <svg aria-hidden=\"true\" focusable=\"false\" width={size} height={size} viewBox=\"0 0 24 24\" style={{ flexShrink: 0, display: 'block' }}>\n    <path\n      fill=\"currentColor\"\n      d=\"M15.113 3.21l.094 .083l5.5 5.5a1 1 0 0 1 -1.175 1.59l-3.172 3.171l-1.424 3.797a1 1 0 0 1 -.158 .277l-.07 .08l-1.5 1.5a1 1 0 0 1 -1.32 .082l-.095 -.083l-2.793 -2.792l-3.793 3.792a1 1 0 0 1 -1.497 -1.32l.083 -.094l3.792 -3.793l-2.792 -2.793a1 1 0 0 1 -.083 -1.32l.083 -.094l1.5 -1.5a1 1 0 0 1 .258 -.187l.098 -.042l3.796 -1.425l3.171 -3.17a1 1 0 0 1 1.497 -1.26z\"\n    />\n  </svg>\n)\n\nexport const CheckCircleFilled = ({ size = 20 }: { size?: number }) => (\n  <svg aria-hidden=\"true\" focusable=\"false\" width={size} height={size} viewBox=\"0 0 24 24\" style={{ flexShrink: 0, display: 'block' }}>\n    <path\n      fill=\"currentColor\"\n      d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"\n    />\n  </svg>\n)\n\nexport const Circle = ({ size = 20 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n  </Glyph>\n)\n\n/** layout-sidebar-left-collapse */\nexport const Collapse = ({ size = 20 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\n    <path d=\"M9 4v16\" />\n    <path d=\"M15 10l-2 2l2 2\" />\n  </Glyph>\n)\n\n/** layout-sidebar-left-expand */\nexport const Expand = ({ size = 20 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\n    <path d=\"M9 4v16\" />\n    <path d=\"M14 10l2 2l-2 2\" />\n  </Glyph>\n)\n\n/** adjustments-horizontal, the filter button's glyph */\nexport const Filter = ({ size = 18 }: { size?: number }) => (\n  <Glyph size={size}>\n    <path d=\"M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" />\n    <path d=\"M4 6l8 0\" />\n    <path d=\"M16 6l4 0\" />\n    <path d=\"M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" />\n    <path d=\"M4 12l2 0\" />\n    <path d=\"M10 12l10 0\" />\n    <path d=\"M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0\" />\n    <path d=\"M4 18l11 0\" />\n    <path d=\"M19 18l1 0\" />\n  </Glyph>\n)\n\n/** loader-2, spun by the button's loading state */\nexport const Spinner = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M12 3a9 9 0 1 0 9 9\" />\n  </Glyph>\n)\n\n/** alert-circle, the `warning` meaning in backdrop-icons.ts: a field's error line */\nexport const AlertCircle = ({ size = 16 }: { size?: number }) => (\n  <Glyph size={size} strokeWidth={2}>\n    <path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n    <path d=\"M12 8v4\" />\n    <path d=\"M12 16h.01\" />\n  </Glyph>\n)\n"],"names":["Glyph","size","strokeWidth","children","jsx","ChevronRight","ChevronDown","ChevronUp","ArrowUp","jsxs","ArrowDown","Close","Search","Dots","Plus","Check","Minus","Pin","PinFilled","CheckCircleFilled","Circle","Collapse","Expand","Filter","Spinner","AlertCircle"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boost33/ui",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "The app shell every Boost33 product renders inside.",
   "license": "UNLICENSED",
   "type": "module",
@@ -26,13 +26,18 @@
       "import": "./dist/index.js"
     },
     "./style.css": "./dist/style.css",
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./backdrop": {
+      "types": "./dist/backdrop.d.ts",
+      "import": "./dist/backdrop.js"
+    },
+    "./backdrop.css": "./dist/backdrop.css"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "lint": "eslint .",
-    "build": "vite build",
+    "build": "vite build && vite build --mode backdrop",
     "prepublishOnly": "npm run typecheck && npm run test && npm run lint && npm run build",
     "tokens": "npx tsx scripts/generate-tokens.mts",
     "specimen:dev": "vite --config vite.specimen.config.mts",
@@ -46,7 +51,9 @@
     "token-order-check": "npx tsx scripts/token-order-check.mts",
     "afk": "npx tsx .sandcastle/main.mts",
     "hooks:install": "git config core.hooksPath .githooks",
-    "prepare": "git config core.hooksPath .githooks || true"
+    "prepare": "git config core.hooksPath .githooks || true",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -54,11 +61,17 @@
   },
   "devDependencies": {
     "@ai-hero/sandcastle": "^0.12.0",
+    "@chromatic-com/storybook": "^5.6.0",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/outfit": "^5.3.0",
     "@playwright/test": "^1.63.0",
+    "@storybook/addon-a11y": "^10.6.6",
+    "@storybook/addon-docs": "^10.6.6",
+    "@storybook/addon-mcp": "^10.6.6",
+    "@storybook/addon-vitest": "^10.6.6",
+    "@storybook/react-vite": "^10.6.6",
     "@tabler/icons-react": "^3.46.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -68,12 +81,18 @@
     "@types/pngjs": "^6.0.5",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@vitest/browser-playwright": "4.1.11",
+    "@vitest/coverage-v8": "4.1.11",
+    "chromatic": "^18.14.2",
     "eslint": "^10.9.1",
     "jsdom": "^25.0.1",
     "pixelmatch": "^7.2.0",
+    "playwright": "^1.63.0",
     "pngjs": "^7.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "storybook": "^10.6.6",
+    "storybook-addon-pseudo-states": "10.6.6",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.68.0",