@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/docs/figures/TreeDiagram.js

@@ -0,0 +1,76 @@
+// src/components/docs/figures/TreeDiagram.tsx
+import * as React from "react";
+import {
+  childItems,
+  defineAsciiItem,
+  AsciiFrameBody,
+  hasHost,
+  itemText,
+  listItems,
+  nestedList,
+  textOf
+} from "./FigureFrame.js";
+import { cn } from "../../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Node = defineAsciiItem("Node");
+function directTextOf(children) {
+  return React.Children.toArray(children).filter((child) => !(React.isValidElement(child) && (child.type === "ul" || child.type === "ol"))).map((child) => React.isValidElement(child) ? directTextOf(child.props.children) : String(child)).join("").replace(/\s+/g, " ").trim();
+}
+function nodesFromList(items) {
+  return items.map((item) => {
+    const kids = nodesFromList(nestedList(item));
+    const text = directTextOf(item.props.children) || itemText(item);
+    const [label, meta] = text.split(/\s+[—–]\s+/);
+    return {
+      label: label || text,
+      meta,
+      accent: hasHost(item.props.children, ["strong", "b"]),
+      children: kids.length > 0 ? kids : void 0
+    };
+  });
+}
+function nodesOf(children) {
+  const listed = nodesFromList(listItems(children));
+  if (listed.length > 0) return listed;
+  return childItems(children, Node).map((node) => {
+    const kids = nodesOf(node.children);
+    return { label: node.label ?? (kids.length === 0 ? textOf(node.children) : ""), meta: node.meta, accent: node.accent, children: kids.length > 0 ? kids : void 0 };
+  });
+}
+function flatten(nodes, prefix = "", trail = "root", isRoot = true) {
+  const singleRoot = isRoot && nodes.length === 1;
+  return nodes.flatMap((node, index) => {
+    const last = index === nodes.length - 1;
+    const branch = singleRoot ? "" : prefix + (last ? "\u2514\u2500 " : "\u251C\u2500 ");
+    const key = `${trail}/${node.label}-${index}`;
+    const childPrefix = singleRoot ? "" : prefix + (last ? "   " : "\u2502  ");
+    const row = { key, branch, label: node.label, meta: node.meta, accent: node.accent };
+    return [row, ...node.children ? flatten(node.children, childPrefix, key, false) : []];
+  });
+}
+var TreeDiagram = React.forwardRef(function TreeDiagram2({ label = "Tree diagram", nodes, children, className, ...rest }, ref) {
+  const rows = flatten(nodes ?? nodesOf(children));
+  const hasAccent = rows.some((row) => row.accent);
+  return /* @__PURE__ */ jsxs(AsciiFrameBody, { "data-slot": "tree-diagram", ref, ...rest, className: cn("overflow-x-auto", className), children: [
+    /* @__PURE__ */ jsx("ul", { className: "flex min-w-max flex-col gap-1", "aria-label": label, children: rows.map((row) => {
+      const emphasized = hasAccent && row.accent;
+      return /* @__PURE__ */ jsxs("li", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-6", children: [
+        /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "select-none text-content-muted", children: row.branch }),
+          /* @__PURE__ */ jsx("span", { className: cn(emphasized ? "text-accent-primary" : "text-content-primary"), children: row.label })
+        ] }),
+        row.meta ? /* @__PURE__ */ jsx("span", { className: cn("tabular-nums", emphasized ? "text-accent-secondary" : "text-content-secondary"), children: row.meta }) : /* @__PURE__ */ jsx("span", {})
+      ] }, row.key);
+    }) }),
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      "Tree with ",
+      rows.length,
+      " nodes."
+    ] })
+  ] });
+});
+export {
+  Node,
+  TreeDiagram
+};
+//# sourceMappingURL=TreeDiagram.js.map

package/dist/components/docs/figures/TreeDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/docs/figures/TreeDiagram.tsx"],"sourcesContent":["/**\n * Adapted from mdxcn by Keshav Bagaade, MIT licensed.\n * Source: https://github.com/keshav-exe/mdxcn/blob/2928126ba146ebbae9c2351deca27d27bb40e744/registry/default/graph-tree/graph-tree.tsx\n * The local port removes motion and graph variables while retaining nested\n * Markdown and `<Node>` children as the data interface.\n */\n\nimport type { ReactNode } from 'react';\nimport * as React from 'react';\nimport {\n  childItems,\n  defineAsciiItem,\n  AsciiFrameBody,\n  hasHost,\n  itemText,\n  listItems,\n  nestedList,\n  textOf,\n} from './FigureFrame';\nimport { cn } from '../../../lib/recipe';\n\nexport interface TreeNode {\n  label: string;\n  meta?: string;\n  accent?: boolean;\n  children?: TreeNode[];\n}\n\nexport interface NodeProps {\n  /** Label falls back to child text when there are no nested nodes. */\n  label?: string;\n  meta?: string;\n  accent?: boolean;\n  children?: ReactNode;\n}\n\nexport interface TreeDiagramProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible name; the enclosing FigureFrame owns the caption. */\n  label?: string;\n  /** Data form. If omitted, the component reads nested Markdown or `<Node>` children. */\n  nodes?: TreeNode[];\n  /** Nested Markdown list or `<Node>` content used to derive nodes. */\n  children?: ReactNode;\n  /** Additional classes for this tree. */\n  className?: string;\n}\n\n/** MDX-only tree item, for example `<Node meta=\"ui\">graph-frame.tsx</Node>`. */\nexport const Node = defineAsciiItem<NodeProps>('Node');\n\nfunction directTextOf(children: ReactNode): string {\n  return React.Children.toArray(children)\n    .filter((child) => !(React.isValidElement(child) && (child.type === 'ul' || child.type === 'ol')))\n    .map((child) => React.isValidElement(child) ? directTextOf((child.props as { children?: ReactNode }).children) : String(child))\n    .join('')\n    .replace(/\\s+/g, ' ')\n    .trim();\n}\n\nfunction nodesFromList(items: ReturnType<typeof listItems>): TreeNode[] {\n  return items.map((item) => {\n    const kids = nodesFromList(nestedList(item));\n    const text = directTextOf((item.props as { children?: ReactNode }).children) || itemText(item);\n    const [label, meta] = text.split(/\\s+[—–]\\s+/);\n    return {\n      label: label || text,\n      meta,\n      accent: hasHost((item.props as { children?: ReactNode }).children, ['strong', 'b']),\n      children: kids.length > 0 ? kids : undefined,\n    };\n  });\n}\n\nfunction nodesOf(children: ReactNode): TreeNode[] {\n  const listed = nodesFromList(listItems(children));\n  if (listed.length > 0) return listed;\n  return childItems(children, Node).map((node) => {\n    const kids = nodesOf(node.children);\n    return { label: node.label ?? (kids.length === 0 ? textOf(node.children) : ''), meta: node.meta, accent: node.accent, children: kids.length > 0 ? kids : undefined };\n  });\n}\n\ninterface FlatRow extends Omit<TreeNode, 'children'> {\n  key: string;\n  branch: string;\n}\n\nfunction flatten(nodes: TreeNode[], prefix = '', trail = 'root', isRoot = true): FlatRow[] {\n  const singleRoot = isRoot && nodes.length === 1;\n  return nodes.flatMap((node, index) => {\n    const last = index === nodes.length - 1;\n    const branch = singleRoot ? '' : prefix + (last ? '└─ ' : '├─ ');\n    const key = `${trail}/${node.label}-${index}`;\n    const childPrefix = singleRoot ? '' : prefix + (last ? '   ' : '│  ');\n    const row: FlatRow = { key, branch, label: node.label, meta: node.meta, accent: node.accent };\n    return [row, ...(node.children ? flatten(node.children, childPrefix, key, false) : [])];\n  });\n}\n\n/** Renders a nested file-like tree and keeps the node count available to screen readers. */\nexport const TreeDiagram = React.forwardRef<HTMLDivElement, TreeDiagramProps>(function TreeDiagram({ label = 'Tree diagram', nodes, children, className, ...rest }, ref) {\n  const rows = flatten(nodes ?? nodesOf(children));\n  const hasAccent = rows.some((row) => row.accent);\n\n  return (\n      <AsciiFrameBody data-slot=\"tree-diagram\" ref={ref} {...rest} className={cn('overflow-x-auto', className)}>\n        <ul className=\"flex min-w-max flex-col gap-1\" aria-label={label}>\n          {rows.map((row) => {\n            const emphasized = hasAccent && row.accent;\n            return <li className=\"grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-6\" key={row.key}>\n              <span className=\"whitespace-nowrap\"><span aria-hidden=\"true\" className=\"select-none text-content-muted\">{row.branch}</span><span className={cn(emphasized ? 'text-accent-primary' : 'text-content-primary')}>{row.label}</span></span>\n              {row.meta ? <span className={cn('tabular-nums', emphasized ? 'text-accent-secondary' : 'text-content-secondary')}>{row.meta}</span> : <span />}\n            </li>;\n          })}\n        </ul>\n        <span className=\"sr-only\">Tree with {rows.length} nodes.</span>\n      </AsciiFrameBody>\n  );\n});\n"],"mappings":"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","names":["TreeDiagram"]}

package/dist/components/docs/figures/UptimeStrip.js

@@ -0,0 +1,68 @@
+// src/components/docs/figures/UptimeStrip.tsx
+import * as React from "react";
+import { AsciiFrameBody, AsciiFrameTick, AsciiFrameTrack, resolveGlyphs, words } from "./FigureFrame.js";
+import { cn } from "../../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function statusClass(palette, status) {
+  if (status === "ok") return "text-accent-primary";
+  if (status === "degraded") return palette === "multi" ? "text-accent-secondary" : "text-content-secondary";
+  return "text-content-muted";
+}
+var UptimeStrip = React.forwardRef(function UptimeStrip2({ label = "Uptime", days: daysProp, from, to, columns = 30, glyphs, palette, className, ...rest }, ref) {
+  const days = words(daysProp);
+  const known = days.filter((day) => day !== "empty");
+  const ok = known.filter((day) => day === "ok").length;
+  const percent = known.length === 0 ? 0 : Math.round(ok / known.length * 100);
+  const cols = Math.max(1, columns);
+  const set = resolveGlyphs(glyphs);
+  const last = set.length - 1;
+  const mark = {
+    ok: set[last] ?? "\u2588",
+    degraded: set[Math.min(2, last)] ?? "\u2592",
+    down: set[0] ?? "\xB7",
+    empty: "-"
+  };
+  const rows = [];
+  for (let index = 0; index < days.length; index += cols) rows.push(days.slice(index, index + cols));
+  return /* @__PURE__ */ jsxs(AsciiFrameBody, { "data-slot": "uptime-strip", ref, ...rest, className: cn("flex flex-col items-start gap-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-fit max-w-full flex-col gap-4 overflow-x-auto", role: "region", tabIndex: 0, "aria-label": `${label} status chart`, children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex select-none flex-col gap-1", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AsciiFrameTrack, { className: "w-auto justify-start gap-0.5", children: row.map((day, index) => /* @__PURE__ */ jsx(AsciiFrameTick, { className: cn("flex-none", statusClass(palette, day)), children: mark[day] }, `${rowIndex}-${index}`)) }) }, rowIndex)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("p", { className: "tabular-nums text-accent-primary", children: [
+          percent,
+          "%"
+        ] }),
+        from || to ? /* @__PURE__ */ jsxs("p", { className: "flex gap-3 text-content-muted", children: [
+          from ? /* @__PURE__ */ jsx("span", { children: from }) : null,
+          to ? /* @__PURE__ */ jsx("span", { children: to }) : null
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap gap-x-4 gap-y-1 text-content-muted", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-accent-primary", children: mark.ok }),
+        " up"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: statusClass(palette, "degraded"), children: mark.degraded }),
+        " slow"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-content-muted", children: mark.down }),
+        " down"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      percent,
+      " percent uptime over ",
+      known.length,
+      " days",
+      from && to ? `, ${from} to ${to}` : "",
+      "."
+    ] })
+  ] });
+});
+export {
+  UptimeStrip
+};
+//# sourceMappingURL=UptimeStrip.js.map

package/dist/components/docs/figures/UptimeStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/docs/figures/UptimeStrip.tsx"],"sourcesContent":["/**\n * Adapted from mdxcn by Keshav Bagaade, MIT licensed.\n * Source: https://github.com/keshav-exe/mdxcn/blob/2928126ba146ebbae9c2351deca27d27bb40e744/registry/default/graph-uptime/graph-uptime.tsx\n * The local port removes motion and graph variables in favour of deterministic\n * rendering and the design system's semantic token classes.\n */\n\nimport * as React from 'react';\nimport { AsciiFrameBody, AsciiFrameTick, AsciiFrameTrack, resolveGlyphs, words, type Glyphs, type FigurePalette } from './FigureFrame';\nimport { cn } from '../../../lib/recipe';\n\nexport type UptimeStatus = 'ok' | 'degraded' | 'down' | 'empty';\n\nexport interface UptimeStripProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Accessible name; the enclosing FigureFrame owns the caption. */\n  label?: string;\n  /** `['ok', 'down']` or `'ok ok down'`; accepted values are ok, degraded, down, and empty. */\n  days: UptimeStatus[] | string;\n  /** Optional label for the first status mark. */\n  from?: string;\n  /** Optional label for the last status mark. */\n  to?: string;\n  /** Number of status marks per row. */\n  columns?: number;\n  /** Glyph set name or custom glyph sequence. */\n  glyphs?: Glyphs;\n  /** Accent palette used for health states. */\n  palette?: FigurePalette;\n  /** Additional classes for this strip. */\n  className?: string;\n}\n\nfunction statusClass(palette: FigurePalette | undefined, status: UptimeStatus): string {\n  if (status === 'ok') return 'text-accent-primary';\n  if (status === 'degraded') return palette === 'multi' ? 'text-accent-secondary' : 'text-content-secondary';\n  return 'text-content-muted';\n}\n\n/** Renders compact service health marks with a text summary for assistive technology. */\nexport const UptimeStrip = React.forwardRef<HTMLDivElement, UptimeStripProps>(function UptimeStrip({ label = 'Uptime', days: daysProp, from, to, columns = 30, glyphs, palette, className, ...rest }, ref) {\n  const days = words<UptimeStatus>(daysProp);\n  const known = days.filter((day) => day !== 'empty');\n  const ok = known.filter((day) => day === 'ok').length;\n  const percent = known.length === 0 ? 0 : Math.round((ok / known.length) * 100);\n  const cols = Math.max(1, columns);\n  const set = resolveGlyphs(glyphs);\n  const last = set.length - 1;\n  const mark: Record<UptimeStatus, string> = {\n    ok: set[last] ?? '█',\n    degraded: set[Math.min(2, last)] ?? '▒',\n    down: set[0] ?? '·',\n    empty: '-',\n  };\n  const rows: UptimeStatus[][] = [];\n  for (let index = 0; index < days.length; index += cols) rows.push(days.slice(index, index + cols));\n\n  return (\n      <AsciiFrameBody data-slot=\"uptime-strip\" ref={ref} {...rest} className={cn('flex flex-col items-start gap-4', className)}>\n        <div className=\"flex w-fit max-w-full flex-col gap-4 overflow-x-auto\" role=\"region\" tabIndex={0} aria-label={`${label} status chart`}>\n          <div aria-hidden=\"true\" className=\"flex select-none flex-col gap-1\">\n            {rows.map((row, rowIndex) => (\n              <div key={rowIndex}>\n                <AsciiFrameTrack className=\"w-auto justify-start gap-0.5\">\n                  {row.map((day, index) => <AsciiFrameTick className={cn('flex-none', statusClass(palette, day))} key={`${rowIndex}-${index}`}>{mark[day]}</AsciiFrameTick>)}\n                </AsciiFrameTrack>\n              </div>\n            ))}\n          </div>\n          <div className=\"flex flex-wrap items-baseline justify-between gap-3\">\n            <p className=\"tabular-nums text-accent-primary\">{percent}%</p>\n            {from || to ? <p className=\"flex gap-3 text-content-muted\">{from ? <span>{from}</span> : null}{to ? <span>{to}</span> : null}</p> : null}\n          </div>\n        </div>\n        <p className=\"flex flex-wrap gap-x-4 gap-y-1 text-content-muted\">\n          <span><span className=\"text-accent-primary\">{mark.ok}</span> up</span>\n          <span><span className={statusClass(palette, 'degraded')}>{mark.degraded}</span> slow</span>\n          <span><span className=\"text-content-muted\">{mark.down}</span> down</span>\n        </p>\n        <span className=\"sr-only\">{percent} percent uptime over {known.length} days{from && to ? `, ${from} to ${to}` : ''}.</span>\n      </AsciiFrameBody>\n  );\n});\n"],"mappings":";AAOA,YAAY,WAAW;AACvB,SAAS,gBAAgB,gBAAgB,iBAAiB,eAAe,aAA8C;AACvH,SAAS,UAAU;AAsDwB,cAM/B,YAN+B;AA/B3C,SAAS,YAAY,SAAoC,QAA8B;AACrF,MAAI,WAAW,KAAM,QAAO;AAC5B,MAAI,WAAW,WAAY,QAAO,YAAY,UAAU,0BAA0B;AAClF,SAAO;AACT;AAGO,IAAM,cAAoB,iBAA6C,SAASA,aAAY,EAAE,QAAQ,UAAU,MAAM,UAAU,MAAM,IAAI,UAAU,IAAI,QAAQ,SAAS,WAAW,GAAG,KAAK,GAAG,KAAK;AACzM,QAAM,OAAO,MAAoB,QAAQ;AACzC,QAAM,QAAQ,KAAK,OAAO,CAAC,QAAQ,QAAQ,OAAO;AAClD,QAAM,KAAK,MAAM,OAAO,CAAC,QAAQ,QAAQ,IAAI,EAAE;AAC/C,QAAM,UAAU,MAAM,WAAW,IAAI,IAAI,KAAK,MAAO,KAAK,MAAM,SAAU,GAAG;AAC7E,QAAM,OAAO,KAAK,IAAI,GAAG,OAAO;AAChC,QAAM,MAAM,cAAc,MAAM;AAChC,QAAM,OAAO,IAAI,SAAS;AAC1B,QAAM,OAAqC;AAAA,IACzC,IAAI,IAAI,IAAI,KAAK;AAAA,IACjB,UAAU,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC,KAAK;AAAA,IACpC,MAAM,IAAI,CAAC,KAAK;AAAA,IAChB,OAAO;AAAA,EACT;AACA,QAAM,OAAyB,CAAC;AAChC,WAAS,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS,KAAM,MAAK,KAAK,KAAK,MAAM,OAAO,QAAQ,IAAI,CAAC;AAEjG,SACI,qBAAC,kBAAe,aAAU,gBAAe,KAAW,GAAG,MAAM,WAAW,GAAG,mCAAmC,SAAS,GACrH;AAAA,yBAAC,SAAI,WAAU,wDAAuD,MAAK,UAAS,UAAU,GAAG,cAAY,GAAG,KAAK,iBACnH;AAAA,0BAAC,SAAI,eAAY,QAAO,WAAU,mCAC/B,eAAK,IAAI,CAAC,KAAK,aACd,oBAAC,SACC,8BAAC,mBAAgB,WAAU,gCACxB,cAAI,IAAI,CAAC,KAAK,UAAU,oBAAC,kBAAe,WAAW,GAAG,aAAa,YAAY,SAAS,GAAG,CAAC,GAAiC,eAAK,GAAG,KAAjC,GAAG,QAAQ,IAAI,KAAK,EAAe,CAAiB,GAC3J,KAHQ,QAIV,CACD,GACH;AAAA,MACA,qBAAC,SAAI,WAAU,uDACb;AAAA,6BAAC,OAAE,WAAU,oCAAoC;AAAA;AAAA,UAAQ;AAAA,WAAC;AAAA,QACzD,QAAQ,KAAK,qBAAC,OAAE,WAAU,iCAAiC;AAAA,iBAAO,oBAAC,UAAM,gBAAK,IAAU;AAAA,UAAM,KAAK,oBAAC,UAAM,cAAG,IAAU;AAAA,WAAK,IAAO;AAAA,SACtI;AAAA,OACF;AAAA,IACA,qBAAC,OAAE,WAAU,qDACX;AAAA,2BAAC,UAAK;AAAA,4BAAC,UAAK,WAAU,uBAAuB,eAAK,IAAG;AAAA,QAAO;AAAA,SAAG;AAAA,MAC/D,qBAAC,UAAK;AAAA,4BAAC,UAAK,WAAW,YAAY,SAAS,UAAU,GAAI,eAAK,UAAS;AAAA,QAAO;AAAA,SAAK;AAAA,MACpF,qBAAC,UAAK;AAAA,4BAAC,UAAK,WAAU,sBAAsB,eAAK,MAAK;AAAA,QAAO;AAAA,SAAK;AAAA,OACpE;AAAA,IACA,qBAAC,UAAK,WAAU,WAAW;AAAA;AAAA,MAAQ;AAAA,MAAsB,MAAM;AAAA,MAAO;AAAA,MAAM,QAAQ,KAAK,KAAK,IAAI,OAAO,EAAE,KAAK;AAAA,MAAG;AAAA,OAAC;AAAA,KACtH;AAEN,CAAC;","names":["UptimeStrip"]}

package/dist/components/docs/figures/index.js

@@ -0,0 +1,24 @@
+// src/components/docs/figures/index.ts
+import { FigureFrame } from "./FigureFrame.js";
+export { FlowDiagram, Path } from "./FlowDiagram.js";
+export { Event, Timeline } from "./Timeline.js";
+export { ChangeSummary, Line } from "./ChangeSummary.js";
+export { BeforeAfter, Slope } from "./BeforeAfter.js";
+export { UptimeStrip } from "./UptimeStrip.js";
+export { Node, TreeDiagram } from "./TreeDiagram.js";
+export { FileChangeTree } from "./FileChangeTree.js";
+export { DrawingSheet } from "./DrawingSheet.js";
+export { IndexedSection } from "./IndexedSection.js";
+export { ActivityGrid } from "./ActivityGrid.js";
+export { GanttChart } from "./GanttChart.js";
+export { Terminal } from "./Terminal.js";
+export { Step, Steps } from "./Steps.js";
+export { SwatchCompare } from "./SwatchCompare.js";
+export { MetricStrip } from "./MetricStrip.js";
+export { TokenTable } from "./TokenTable.js";
+export { Decision, Option } from "./Decision.js";
+export { Term, TermGrid } from "./TermGrid.js";
+export {
+  FigureFrame
+};
+//# sourceMappingURL=index.js.map

package/dist/components/docs/figures/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/docs/figures/index.ts"],"sourcesContent":["export { FigureFrame } from './FigureFrame';\nexport type { FigureFrameProps } from './FigureFrame';\nexport * from './FlowDiagram';\nexport * from './Timeline';\nexport * from './ChangeSummary';\nexport * from './BeforeAfter';\nexport * from './UptimeStrip';\nexport * from './TreeDiagram';\nexport * from './FileChangeTree';\nexport * from './DrawingSheet';\nexport * from './IndexedSection';\nexport * from './ActivityGrid';\nexport * from './GanttChart';\nexport * from './Terminal';\nexport * from './Steps';\nexport * from './SwatchCompare';\nexport * from './MetricStrip';\nexport * from './TokenTable';\nexport * from './Decision';\nexport * from './TermGrid';\n"],"mappings":";AAAA,SAAS,mBAAmB;AAE5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/docs/index.js

@@ -0,0 +1,15 @@
+// src/components/docs/index.ts
+export { AnchorHeading, createAnchorHeading } from "./AnchorHeading.js";
+export { Breadcrumbs } from "./Breadcrumbs.js";
+export { CodeBlock, CodeBlockAttachment } from "./CodeBlock.js";
+export { CodeTab, CodeTabs } from "./CodeTabs.js";
+export { DocPager } from "./DocPager.js";
+export { DocsHeader } from "./DocsHeader.js";
+export { DocsLayout } from "./DocsLayout.js";
+export { DocsLink, DocsLinkProvider, useDocsLinkComponent } from "./DocsLinkProvider.js";
+export { DocsSidebar } from "./DocsSidebar.js";
+export { Prose } from "./Prose.js";
+export { TableOfContents, collectHeadings } from "./TableOfContents.js";
+export { mdxComponents } from "./mdxComponents.js";
+export { ActivityGrid, BeforeAfter, ChangeSummary, Decision, DrawingSheet, Event, FigureFrame, FileChangeTree, FlowDiagram, GanttChart, IndexedSection, Line, MetricStrip, Node, Option, Path, Slope, Step, Steps, SwatchCompare, Term, TermGrid, Terminal, Timeline, TokenTable, TreeDiagram, UptimeStrip } from "./figures/index.js";
+//# sourceMappingURL=index.js.map

package/dist/components/docs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/index.ts"],"sourcesContent":["// Documentation portal surface: layout chrome, navigation, and the MDX bridge.\n\nexport * from './AnchorHeading';\nexport * from './Breadcrumbs';\nexport * from './CodeBlock';\nexport * from './CodeTabs';\nexport * from './DocPager';\nexport * from './DocsHeader';\nexport * from './DocsLayout';\nexport * from './DocsLinkProvider';\nexport * from './DocsSidebar';\nexport * from './Prose';\nexport * from './TableOfContents';\nexport * from './mdxComponents';\nexport * from './figures';\n"],"mappings":";AAEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/docs/mdxComponents.js

@@ -0,0 +1,108 @@
+"use client";
+
+// src/components/docs/mdxComponents.tsx
+import { isValidElement } from "react";
+import { AnchorHeading, createAnchorHeading } from "./AnchorHeading.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { CodeTab, CodeTabs } from "./CodeTabs.js";
+import { DocsLink } from "./DocsLinkProvider.js";
+import { NoteBlock } from "../NoteBlock.js";
+import { TLDR } from "../TLDR.js";
+import { Badge } from "../Badge.js";
+import { Card } from "../Card.js";
+import { Tag } from "../Tag.js";
+import { AsciiDivider } from "../AsciiDivider.js";
+import {
+  FigureFrame,
+  ActivityGrid,
+  BeforeAfter,
+  ChangeSummary,
+  FlowDiagram,
+  GanttChart,
+  Timeline,
+  TreeDiagram,
+  FileChangeTree,
+  DrawingSheet,
+  IndexedSection,
+  UptimeStrip,
+  Event,
+  Line,
+  Node,
+  Path,
+  Slope,
+  Step,
+  Steps,
+  Terminal,
+  SwatchCompare,
+  MetricStrip,
+  TokenTable,
+  Decision,
+  Option,
+  TermGrid,
+  Term
+} from "./figures/index.js";
+import { jsx } from "react/jsx-runtime";
+function languageOf(children) {
+  if (!isValidElement(children)) return void 0;
+  const match = /language-([\w-]+)/.exec(children.props.className ?? "");
+  return match?.[1];
+}
+function MdxPre({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(CodeBlock, { language: languageOf(children), ...rest, children });
+}
+function MdxAnchor({ href, children, ...rest }) {
+  if (!href) return /* @__PURE__ */ jsx("a", { ...rest, children });
+  return /* @__PURE__ */ jsx(DocsLink, { href, ...rest, children });
+}
+var mdxComponents = {
+  h1: createAnchorHeading(1),
+  h2: createAnchorHeading(2),
+  h3: createAnchorHeading(3),
+  h4: createAnchorHeading(4),
+  h5: createAnchorHeading(5),
+  h6: createAnchorHeading(6),
+  pre: MdxPre,
+  a: MdxAnchor,
+  // Available to authors as JSX inside MDX.
+  AnchorHeading,
+  NoteBlock,
+  TLDR,
+  Badge,
+  Card,
+  Tag,
+  AsciiDivider,
+  CodeBlock,
+  CodeTabs,
+  CodeTab,
+  FigureFrame,
+  ActivityGrid,
+  BeforeAfter,
+  ChangeSummary,
+  FlowDiagram,
+  GanttChart,
+  Timeline,
+  TreeDiagram,
+  FileChangeTree,
+  DrawingSheet,
+  IndexedSection,
+  UptimeStrip,
+  Terminal,
+  Steps,
+  Path,
+  Event,
+  Line,
+  Slope,
+  Node,
+  Step,
+  SwatchCompare,
+  MetricStrip,
+  TokenTable,
+  Decision,
+  Option,
+  TermGrid,
+  Term
+};
+export {
+  mdxComponents
+};
+//# sourceMappingURL=mdxComponents.js.map

package/dist/components/docs/mdxComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/mdxComponents.tsx"],"sourcesContent":["'use client';\n\nimport { isValidElement } from 'react';\nimport type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';\nimport { AnchorHeading, createAnchorHeading } from './AnchorHeading';\nimport { CodeBlock } from './CodeBlock';\nimport { CodeTab, CodeTabs } from './CodeTabs';\nimport { DocsLink } from './DocsLinkProvider';\nimport { NoteBlock } from '../NoteBlock';\nimport { TLDR } from '../TLDR';\nimport { Badge } from '../Badge';\nimport { Card } from '../Card';\nimport { Tag } from '../Tag';\nimport { AsciiDivider } from '../AsciiDivider';\nimport {\n  FigureFrame,\n  ActivityGrid,\n  BeforeAfter,\n  ChangeSummary,\n  FlowDiagram,\n  GanttChart,\n  Timeline,\n  TreeDiagram,\n  FileChangeTree,\n  DrawingSheet,\n  IndexedSection,\n  UptimeStrip,\n  Event,\n  Line,\n  Node,\n  Path,\n  Slope,\n  Step,\n  Steps,\n  Terminal,\n  SwatchCompare,\n  MetricStrip,\n  TokenTable,\n  Decision,\n  Option,\n  TermGrid,\n  Term,\n} from './figures';\n\n/**\n * Pull `language-ts` off the `<code>` child that MDX nests inside every `<pre>`,\n * so the code block can label itself without the caller threading metadata\n * through the compiler.\n */\nfunction languageOf(children: ReactNode): string | undefined {\n  if (!isValidElement<{ className?: string }>(children)) return undefined;\n  const match = /language-([\\w-]+)/.exec(children.props.className ?? '');\n  return match?.[1];\n}\n\nfunction MdxPre({ children, ...rest }: HTMLAttributes<HTMLPreElement>) {\n  return (\n    <CodeBlock language={languageOf(children)} {...rest}>\n      {children}\n    </CodeBlock>\n  );\n}\n\nfunction MdxAnchor({ href, children, ...rest }: AnchorHTMLAttributes<HTMLAnchorElement>) {\n  // MDX types `href` as optional; an anchor without one is a bare fragment\n  // target and must not go through the router.\n  if (!href) return <a {...rest}>{children}</a>;\n\n  return (\n    <DocsLink href={href} {...rest}>\n      {children}\n    </DocsLink>\n  );\n}\n\n/**\n * The shared HTML-tag → component map for compiled MDX.\n *\n * Exported as one object so every consumer — the docs portal, the blog, a\n * Storybook preview — renders Markdown identically. Divergence here is the\n * usual way two sites drift apart while nominally sharing a design system.\n *\n * Headings resolve to {@link AnchorHeading}, giving every section a `#slug`\n * target and a copy-link affordance. Pass the map straight to an\n * `<MDXProvider components={...}>` or to `getMDXComponent(code)(...)`.\n *\n * Elements not listed (`ul`, `ol`, `table`, `blockquote`, `hr`, inline `code`)\n * are deliberately left as native tags and styled by `prose.css` — wrapping\n * them in components would cost a lot of bundle for no visual gain.\n */\nexport const mdxComponents = {\n  h1: createAnchorHeading(1),\n  h2: createAnchorHeading(2),\n  h3: createAnchorHeading(3),\n  h4: createAnchorHeading(4),\n  h5: createAnchorHeading(5),\n  h6: createAnchorHeading(6),\n  pre: MdxPre,\n  a: MdxAnchor,\n\n  // Available to authors as JSX inside MDX.\n  AnchorHeading,\n  NoteBlock,\n  TLDR,\n  Badge,\n  Card,\n  Tag,\n  AsciiDivider,\n  CodeBlock,\n  CodeTabs,\n  CodeTab,\n  FigureFrame,\n  ActivityGrid,\n  BeforeAfter,\n  ChangeSummary,\n  FlowDiagram,\n  GanttChart,\n  Timeline,\n  TreeDiagram,\n  FileChangeTree,\n  DrawingSheet,\n  IndexedSection,\n  UptimeStrip,\n  Terminal,\n  Steps,\n  Path,\n  Event,\n  Line,\n  Slope,\n  Node,\n  Step,\n  SwatchCompare,\n  MetricStrip,\n  TokenTable,\n  Decision,\n  Option,\n  TermGrid,\n  Term,\n};\n\nexport type MdxComponents = typeof mdxComponents;\n"],"mappings":";;;AAEA,SAAS,sBAAsB;AAE/B,SAAS,eAAe,2BAA2B;AACnD,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB;AAClC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAeH;AARJ,SAAS,WAAW,UAAyC;AAC3D,MAAI,CAAC,eAAuC,QAAQ,EAAG,QAAO;AAC9D,QAAM,QAAQ,oBAAoB,KAAK,SAAS,MAAM,aAAa,EAAE;AACrE,SAAO,QAAQ,CAAC;AAClB;AAEA,SAAS,OAAO,EAAE,UAAU,GAAG,KAAK,GAAmC;AACrE,SACE,oBAAC,aAAU,UAAU,WAAW,QAAQ,GAAI,GAAG,MAC5C,UACH;AAEJ;AAEA,SAAS,UAAU,EAAE,MAAM,UAAU,GAAG,KAAK,GAA4C;AAGvF,MAAI,CAAC,KAAM,QAAO,oBAAC,OAAG,GAAG,MAAO,UAAS;AAEzC,SACE,oBAAC,YAAS,MAAa,GAAG,MACvB,UACH;AAEJ;AAiBO,IAAM,gBAAgB;AAAA,EAC3B,IAAI,oBAAoB,CAAC;AAAA,EACzB,IAAI,oBAAoB,CAAC;AAAA,EACzB,IAAI,oBAAoB,CAAC;AAAA,EACzB,IAAI,oBAAoB,CAAC;AAAA,EACzB,IAAI,oBAAoB,CAAC;AAAA,EACzB,IAAI,oBAAoB,CAAC;AAAA,EACzB,KAAK;AAAA,EACL,GAAG;AAAA;AAAA,EAGH;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}

package/dist/components/experiments/DesignSandbox.js

@@ -0,0 +1,206 @@
+"use client";
+
+// src/components/experiments/DesignSandbox.tsx
+import React, { useState } from "react";
+import { cn } from "../../lib/recipe.js";
+import { PageTitle } from "../PageTitle.js";
+import { Card } from "../Card.js";
+import { Button } from "../Button.js";
+import { Badge } from "../Badge.js";
+import { NoteBlock } from "../NoteBlock.js";
+import { TLDR } from "../TLDR.js";
+import { Input } from "../Input.js";
+import { Select } from "../Select.js";
+import { StatCard } from "../StatCard.js";
+import { DataTable } from "../DataTable.js";
+import { Modal } from "../Modal.js";
+import { Tag } from "../Tag.js";
+import { PageHeader } from "../PageHeader.js";
+import { SectionContainer } from "../SectionContainer.js";
+import { SlideDeck } from "../slides/SlideDeck.js";
+import { Slide } from "../slides/Slide.js";
+import { LoremIpsumPost } from "../blog/LoremIpsumPost.js";
+import { useTheme } from "../ThemeProvider.js";
+import { LEVELS } from "../../theme/levels.js";
+import { Activity, ShieldCheck, Cpu, DollarSign, ShoppingBag } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DesignSandbox = () => {
+  const { level, cycleLevel, setLevel, levels } = useTheme();
+  const [activeTab, setActiveTab] = useState("components");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const usersData = [
+    { id: "usr-001", name: "Ryan Kelly", role: "Architect & Lead", status: "active", usage: "98.4%" },
+    { id: "usr-002", name: "Alex Vance", role: "DevOps Engineer", status: "active", usage: "74.2%" },
+    { id: "usr-003", name: "Elena Rostova", role: "Security Ops", status: "pending", usage: "12.0%" },
+    { id: "usr-004", name: "Marcus Chen", role: "Data Pipeline", status: "disabled", usage: "0.0%" }
+  ];
+  const filteredUsers = usersData.filter(
+    (u) => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.role.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "design-sandbox", className: "max-w-7xl mx-auto px-4 sm:px-6 py-8 text-content-primary font-mono", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start flex-wrap gap-4 mb-8", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(PageTitle, { subtitle: "Universal Brutalist Component Library & Dual-Mode Surface", bracketed: true, children: "DESIGN SYSTEM SURFACE" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2 bg-surface-base p-2 border-2 border-edge-strong", children: levels.map((t) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setLevel(t),
+          "aria-pressed": level === t,
+          title: LEVELS[t].description,
+          className: cn(
+            "font-mono font-bold text-xs px-3 py-1.5 border-2 border-edge-strong uppercase transition-all",
+            level === t ? "bg-accent-primary text-content-inverse" : "bg-transparent text-content-primary hover:bg-surface-raised"
+          ),
+          children: LEVELS[t].label
+        },
+        t
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mb-8 border-b-2 border-edge-strong pb-4 overflow-x-auto", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: () => setActiveTab("components"), variant: activeTab === "components" ? "tertiary" : "default", bracketed: true, size: "sm", children: "COMPONENTS & THEMES" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setActiveTab("saas"), variant: activeTab === "saas" ? "tertiary" : "default", bracketed: true, size: "sm", children: "SAAS DASHBOARD" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setActiveTab("ecommerce"), variant: activeTab === "ecommerce" ? "tertiary" : "default", bracketed: true, size: "sm", children: "E-COMMERCE SHOWCASE" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setActiveTab("slides"), variant: activeTab === "slides" ? "tertiary" : "default", bracketed: true, size: "sm", children: "PRESENTATION DECK" }),
+      /* @__PURE__ */ jsx(Button, { onClick: () => setActiveTab("post"), variant: activeTab === "post" ? "tertiary" : "default", bracketed: true, size: "sm", children: "EDITORIAL BLOG" })
+    ] }),
+    activeTab === "components" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+      /* @__PURE__ */ jsxs(TLDR, { children: [
+        "The design system operates across a ladder of ",
+        levels.length,
+        " first-class levels, darkest to lightest:",
+        " ",
+        levels.map((t, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          i > 0 && (i === levels.length - 1 ? ", and " : ", "),
+          /* @__PURE__ */ jsx("strong", { children: LEVELS[t].label.toUpperCase() }),
+          " (",
+          LEVELS[t].description.replace(/\.$/, ""),
+          ")"
+        ] }, t)),
+        ". Every level declares its own surfaces, inks and accents; components address roles, never levels."
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-display text-xl font-bold text-accent-primary mb-4", children: "[ BADGES & BUTTON VARIANTS ]" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 flex-wrap mb-6", children: [
+          /* @__PURE__ */ jsx(Badge, { accent: "primary", children: "CYAN BADGE" }),
+          /* @__PURE__ */ jsx(Badge, { accent: "tertiary", children: "PINK BADGE" }),
+          /* @__PURE__ */ jsx(Badge, { accent: "secondary", children: "YELLOW BADGE" }),
+          /* @__PURE__ */ jsx(Badge, { accent: "success", children: "NEON GREEN" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 flex-wrap", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "primary", bracketed: true, children: "PRIMARY CYAN" }),
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", bracketed: true, children: "ACCENT PINK" }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", bracketed: true, children: "WARNING YELLOW" }),
+          /* @__PURE__ */ jsxs(Button, { onClick: cycleLevel, bracketed: true, children: [
+            "CYCLE LEVEL: ",
+            LEVELS[level].label.toUpperCase()
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-surface-raised border-2 border-edge-strong p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-display text-xl font-bold text-accent-secondary mb-4", children: "[ FORM & INPUT PRIMITIVES ]" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-4", children: [
+          /* @__PURE__ */ jsx(Input, { label: "System API Key", placeholder: "sk-brutalist-...", helperText: "Required for cloud SDK initialization" }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Environment Tier",
+              options: [
+                { label: "Production (US-East)", value: "prod-us" },
+                { label: "Staging (EU-West)", value: "stage-eu" },
+                { label: "Local Development Sandbox", value: "dev-local" }
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setIsModalOpen(true), variant: "secondary", bracketed: true, size: "sm", children: "TRIGGER ACTION DIALOG" })
+      ] }),
+      /* @__PURE__ */ jsx(NoteBlock, { title: "SECURITY COMPLIANCE DIRECTIVE", type: "warning", children: "All design system primitives strictly enforce dual-mode token remappings. Direct hardcoded hex literals are forbidden to ensure ink-on-paper sketch mode readability." })
+    ] }),
+    activeTab === "saas" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-display text-2xl font-bold text-accent-primary uppercase", children: "[ CLOUD OPERATIONS COMMAND CENTER ]" }),
+        /* @__PURE__ */ jsx("div", { className: "w-full sm:w-72", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "Search cluster workloads...",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value)
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+        /* @__PURE__ */ jsx(StatCard, { title: "SYSTEM HEALTH", value: "99.98%", change: "+0.04%", changeType: "positive", icon: Activity, accent: "primary", subtitle: "42 Nodes Healthy" }),
+        /* @__PURE__ */ jsx(StatCard, { title: "COMPUTE LATENCY", value: "14.2 ms", change: "-3.1 ms", changeType: "positive", icon: Cpu, accent: "tertiary", subtitle: "Sub-20ms SLA MET" }),
+        /* @__PURE__ */ jsx(StatCard, { title: "SECURITY AUDIT", value: "100%", change: "PASSED", changeType: "positive", icon: ShieldCheck, accent: "success", subtitle: "0 Critical Alerts" }),
+        /* @__PURE__ */ jsx(StatCard, { title: "EST. CLOUD COST", value: "$2,410", change: "+$120", changeType: "negative", icon: DollarSign, accent: "secondary", subtitle: "Monthly Budget" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-display text-lg font-bold text-content-primary mb-3 uppercase", children: "[ AUTHORIZED WORKSPACE OPERATORS ]" }),
+        /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            keyExtractor: (r) => r.id,
+            columns: [
+              { header: "USER ID", accessor: "id" },
+              { header: "OPERATOR NAME", accessor: "name" },
+              { header: "ROLE ASSIGNMENT", accessor: "role" },
+              {
+                header: "STATUS",
+                accessor: (r) => /* @__PURE__ */ jsx(Badge, { accent: r.status === "active" ? "success" : r.status === "pending" ? "secondary" : "tertiary", children: r.status.toUpperCase() })
+              },
+              { header: "RESOURCE USAGE", accessor: "usage" }
+            ],
+            data: filteredUsers
+          }
+        )
+      ] })
+    ] }),
+    activeTab === "ecommerce" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsx(PageHeader, { title: "BRUTALIST HARDWARE GEAR", subtitle: "High-performance developer gear & edge modules", accent: "tertiary", icon: ShoppingBag }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 flex-wrap mb-4", children: [
+        /* @__PURE__ */ jsx(Tag, { text: "ALL GEAR", accent: "tertiary" }),
+        /* @__PURE__ */ jsx(Tag, { text: "EDGE NODES", accent: "primary" }),
+        /* @__PURE__ */ jsx(Tag, { text: "TERMINAL HARDWARE", accent: "secondary" }),
+        /* @__PURE__ */ jsx(Tag, { text: "SECURITY KEYS", accent: "success" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx(Card, { title: "NEON TERMINAL DISPLAY", description: "Ultra-wide 4K brutalist developer monitor with anti-glare matte coating.", filename: "hardware_display.spec", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-display text-2xl font-bold text-accent-primary", children: "$899.00" }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", bracketed: true, children: "ADD TO CART" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Card, { title: "CYBERDECK MECHANICAL", description: "Hotswappable mechanical keyboard with custom laser-engraved keycaps.", filename: "keyboard_v2.spec", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-display text-2xl font-bold text-accent-tertiary", children: "$349.00" }),
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", bracketed: true, children: "ADD TO CART" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Card, { title: "HSM HARDWARE TOKEN", description: "FIPS 140-3 Level 4 physical cryptographic key with hardware destruction.", filename: "hsm_security.spec", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-display text-2xl font-bold text-accent-secondary", children: "$199.00" }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", bracketed: true, children: "ADD TO CART" })
+        ] }) })
+      ] })
+    ] }),
+    activeTab === "slides" && /* @__PURE__ */ jsx("div", { className: "border-4 border-edge-strong p-6 bg-surface-base", children: /* @__PURE__ */ jsxs(SlideDeck, { children: [
+      /* @__PURE__ */ jsxs(Slide, { title: "BUILDING SINGULAR DESIGN SURFACES", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xl text-content-secondary font-mono mb-4", children: "> Dual-Mode Token Remappings across Dark, Dim, and Sketch." }),
+        /* @__PURE__ */ jsx(Badge, { accent: "primary", children: "REUSABLE ENGINE" })
+      ] }),
+      /* @__PURE__ */ jsxs(Slide, { title: "ZERO TOKEN DRIFT PRINCIPLE", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xl text-content-secondary font-mono mb-4", children: "> Every downstream app imports @rtkelly-labs/design-system/tailwind-preset." }),
+        /* @__PURE__ */ jsx(Badge, { accent: "tertiary", children: "SINGLE SOURCE OF TRUTH" })
+      ] })
+    ] }) }),
+    activeTab === "post" && /* @__PURE__ */ jsx(SectionContainer, { children: /* @__PURE__ */ jsx(LoremIpsumPost, {}) }),
+    /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "CONFIRM SYSTEM OVERRIDE", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-4", children: [
+        "Are you sure you want to execute system configuration override on node ",
+        /* @__PURE__ */ jsx("strong", { children: "cluster-us-east-1" }),
+        "?"
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-mono text-content-muted", children: "> This action will trigger a rolling reload of active workload containers." })
+    ] })
+  ] });
+};
+export {
+  DesignSandbox
+};
+//# sourceMappingURL=DesignSandbox.js.map

package/dist/components/experiments/DesignSandbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/experiments/DesignSandbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '../../lib/recipe';\nimport { PageTitle } from '../PageTitle';\nimport { Card } from '../Card';\nimport { Button } from '../Button';\nimport { Badge } from '../Badge';\nimport { NoteBlock } from '../NoteBlock';\nimport { TLDR } from '../TLDR';\nimport { Input } from '../Input';\nimport { Select } from '../Select';\nimport { StatCard } from '../StatCard';\nimport { DataTable } from '../DataTable';\nimport { Modal } from '../Modal';\nimport { Tag } from '../Tag';\nimport { PageHeader } from '../PageHeader';\nimport { SectionContainer } from '../SectionContainer';\nimport { SlideDeck } from '../slides/SlideDeck';\nimport { Slide } from '../slides/Slide';\nimport { LoremIpsumPost } from '../blog/LoremIpsumPost';\nimport { useTheme } from '../ThemeProvider';\nimport { LEVELS } from '../../theme/levels';\nimport { Activity, ShieldCheck, Cpu, DollarSign, Layers, Search, ShoppingBag } from 'lucide-react';\n\ninterface UserRecord {\n  id: string;\n  name: string;\n  role: string;\n  status: 'active' | 'pending' | 'disabled';\n  usage: string;\n}\n\nexport const DesignSandbox: React.FC = () => {\n  /*\n   * The strict hook, deliberately. Unlike `DocsHeader`, this component does\n   * not *adapt* to the level — a\n   * sandbox whose whole purpose is switching between Levels cannot render\n   * meaningfully without a provider, so failing loudly is correct. The\n   * distinction is required-versus-adapts; see `useOptionalTheme` for the other\n   * side of it.\n   */\n  const { level, cycleLevel, setLevel, levels } = useTheme();\n  const [activeTab, setActiveTab] = useState<'components' | 'saas' | 'ecommerce' | 'slides' | 'post'>('components');\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const usersData: UserRecord[] = [\n    { id: 'usr-001', name: 'Ryan Kelly', role: 'Architect & Lead', status: 'active', usage: '98.4%' },\n    { id: 'usr-002', name: 'Alex Vance', role: 'DevOps Engineer', status: 'active', usage: '74.2%' },\n    { id: 'usr-003', name: 'Elena Rostova', role: 'Security Ops', status: 'pending', usage: '12.0%' },\n    { id: 'usr-004', name: 'Marcus Chen', role: 'Data Pipeline', status: 'disabled', usage: '0.0%' },\n  ];\n\n  const filteredUsers = usersData.filter(\n    (u) => u.name.toLowerCase().includes(searchQuery.toLowerCase()) || u.role.toLowerCase().includes(searchQuery.toLowerCase())\n  );\n\n  return (\n    <div data-slot=\"design-sandbox\" className=\"max-w-7xl mx-auto px-4 sm:px-6 py-8 text-content-primary font-mono\">\n      {/* Sandbox Header */}\n      <div className=\"flex justify-between items-start flex-wrap gap-4 mb-8\">\n        <div>\n          <PageTitle subtitle=\"Universal Brutalist Component Library & Dual-Mode Surface\" bracketed>\n            DESIGN SYSTEM SURFACE\n          </PageTitle>\n        </div>\n\n        {/* 3-Way Theme Switcher Controls */}\n        <div className=\"flex gap-2 bg-surface-base p-2 border-2 border-edge-strong\">\n          {levels.map((t) => (\n            <button\n              key={t}\n              type=\"button\"\n              onClick={() => setLevel(t)}\n              aria-pressed={level === t}\n              title={LEVELS[t].description}\n              className={cn(\n                'font-mono font-bold text-xs px-3 py-1.5 border-2 border-edge-strong uppercase transition-all',\n                level === t\n                  ? 'bg-accent-primary text-content-inverse'\n                  : 'bg-transparent text-content-primary hover:bg-surface-raised'\n              )}\n            >\n              {LEVELS[t].label}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Navigation Sub-Tabs */}\n      <div className=\"flex gap-2 mb-8 border-b-2 border-edge-strong pb-4 overflow-x-auto\">\n        <Button onClick={() => setActiveTab('components')} variant={activeTab === 'components' ? 'tertiary' : 'default'} bracketed size=\"sm\">\n          COMPONENTS & THEMES\n        </Button>\n        <Button onClick={() => setActiveTab('saas')} variant={activeTab === 'saas' ? 'tertiary' : 'default'} bracketed size=\"sm\">\n          SAAS DASHBOARD\n        </Button>\n        <Button onClick={() => setActiveTab('ecommerce')} variant={activeTab === 'ecommerce' ? 'tertiary' : 'default'} bracketed size=\"sm\">\n          E-COMMERCE SHOWCASE\n        </Button>\n        <Button onClick={() => setActiveTab('slides')} variant={activeTab === 'slides' ? 'tertiary' : 'default'} bracketed size=\"sm\">\n          PRESENTATION DECK\n        </Button>\n        <Button onClick={() => setActiveTab('post')} variant={activeTab === 'post' ? 'tertiary' : 'default'} bracketed size=\"sm\">\n          EDITORIAL BLOG\n        </Button>\n      </div>\n\n      {/* Tab 1: Core Components & Themes Grid */}\n      {activeTab === 'components' && (\n        <div className=\"flex flex-col gap-8\">\n          {/* Theme Matrix Callout */}\n          <TLDR>\n            The design system operates across a ladder of {levels.length} first-class levels, darkest to lightest:{' '}\n            {levels.map((t, i) => (\n              <React.Fragment key={t}>\n                {i > 0 && (i === levels.length - 1 ? ', and ' : ', ')}\n                <strong>{LEVELS[t].label.toUpperCase()}</strong> ({LEVELS[t].description.replace(/\\.$/, '')})\n              </React.Fragment>\n            ))}\n            . Every level declares its own surfaces, inks and accents; components address roles, never levels.\n          </TLDR>\n\n          {/* Card & Button Primitives */}\n          <Card>\n            <h3 className=\"font-display text-xl font-bold text-accent-primary mb-4\">\n              [ BADGES & BUTTON VARIANTS ]\n            </h3>\n            <div className=\"flex gap-3 flex-wrap mb-6\">\n              <Badge accent=\"primary\">CYAN BADGE</Badge>\n              <Badge accent=\"tertiary\">PINK BADGE</Badge>\n              <Badge accent=\"secondary\">YELLOW BADGE</Badge>\n              <Badge accent=\"success\">NEON GREEN</Badge>\n            </div>\n            <div className=\"flex gap-3 flex-wrap\">\n              <Button variant=\"primary\" bracketed>PRIMARY CYAN</Button>\n              <Button variant=\"tertiary\" bracketed>ACCENT PINK</Button>\n              <Button variant=\"secondary\" bracketed>WARNING YELLOW</Button>\n              <Button onClick={cycleLevel} bracketed>CYCLE LEVEL: {LEVELS[level].label.toUpperCase()}</Button>\n            </div>\n          </Card>\n\n          {/* Form Primitives */}\n          <div className=\"bg-surface-raised border-2 border-edge-strong p-6\">\n            <h3 className=\"font-display text-xl font-bold text-accent-secondary mb-4\">\n              [ FORM & INPUT PRIMITIVES ]\n            </h3>\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-4\">\n              <Input label=\"System API Key\" placeholder=\"sk-brutalist-...\" helperText=\"Required for cloud SDK initialization\" />\n              <Select\n                label=\"Environment Tier\"\n                options={[\n                  { label: 'Production (US-East)', value: 'prod-us' },\n                  { label: 'Staging (EU-West)', value: 'stage-eu' },\n                  { label: 'Local Development Sandbox', value: 'dev-local' },\n                ]}\n              />\n            </div>\n            <Button onClick={() => setIsModalOpen(true)} variant=\"secondary\" bracketed size=\"sm\">\n              TRIGGER ACTION DIALOG\n            </Button>\n          </div>\n\n          {/* Callouts */}\n          <NoteBlock title=\"SECURITY COMPLIANCE DIRECTIVE\" type=\"warning\">\n            All design system primitives strictly enforce dual-mode token remappings. Direct hardcoded hex literals are forbidden to ensure ink-on-paper sketch mode readability.\n          </NoteBlock>\n        </div>\n      )}\n\n      {/* Tab 2: SaaS Dashboard Sample Page */}\n      {activeTab === 'saas' && (\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex justify-between items-center flex-wrap gap-4\">\n            <h2 className=\"font-display text-2xl font-bold text-accent-primary uppercase\">\n              [ CLOUD OPERATIONS COMMAND CENTER ]\n            </h2>\n            <div className=\"w-full sm:w-72\">\n              <Input\n                placeholder=\"Search cluster workloads...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n              />\n            </div>\n          </div>\n\n          {/* KPI Stat Cards Grid */}\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n            <StatCard title=\"SYSTEM HEALTH\" value=\"99.98%\" change=\"+0.04%\" changeType=\"positive\" icon={Activity} accent=\"primary\" subtitle=\"42 Nodes Healthy\" />\n            <StatCard title=\"COMPUTE LATENCY\" value=\"14.2 ms\" change=\"-3.1 ms\" changeType=\"positive\" icon={Cpu} accent=\"tertiary\" subtitle=\"Sub-20ms SLA MET\" />\n            <StatCard title=\"SECURITY AUDIT\" value=\"100%\" change=\"PASSED\" changeType=\"positive\" icon={ShieldCheck} accent=\"success\" subtitle=\"0 Critical Alerts\" />\n            <StatCard title=\"EST. CLOUD COST\" value=\"$2,410\" change=\"+$120\" changeType=\"negative\" icon={DollarSign} accent=\"secondary\" subtitle=\"Monthly Budget\" />\n          </div>\n\n          {/* Data Table */}\n          <div className=\"mt-4\">\n            <h3 className=\"font-display text-lg font-bold text-content-primary mb-3 uppercase\">\n              [ AUTHORIZED WORKSPACE OPERATORS ]\n            </h3>\n            <DataTable<UserRecord>\n              keyExtractor={(r) => r.id}\n              columns={[\n                { header: 'USER ID', accessor: 'id' },\n                { header: 'OPERATOR NAME', accessor: 'name' },\n                { header: 'ROLE ASSIGNMENT', accessor: 'role' },\n                {\n                  header: 'STATUS',\n                  accessor: (r) => (\n                    <Badge accent={r.status === 'active' ? 'success' : r.status === 'pending' ? 'secondary' : 'tertiary'}>\n                      {r.status.toUpperCase()}\n                    </Badge>\n                  ),\n                },\n                { header: 'RESOURCE USAGE', accessor: 'usage' },\n              ]}\n              data={filteredUsers}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Tab 3: E-Commerce & Product Showcase */}\n      {activeTab === 'ecommerce' && (\n        <div className=\"flex flex-col gap-6\">\n          <PageHeader title=\"BRUTALIST HARDWARE GEAR\" subtitle=\"High-performance developer gear & edge modules\" accent=\"tertiary\" icon={ShoppingBag} />\n\n          <div className=\"flex gap-2 flex-wrap mb-4\">\n            <Tag text=\"ALL GEAR\" accent=\"tertiary\" />\n            <Tag text=\"EDGE NODES\" accent=\"primary\" />\n            <Tag text=\"TERMINAL HARDWARE\" accent=\"secondary\" />\n            <Tag text=\"SECURITY KEYS\" accent=\"success\" />\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n            <Card title=\"NEON TERMINAL DISPLAY\" description=\"Ultra-wide 4K brutalist developer monitor with anti-glare matte coating.\" filename=\"hardware_display.spec\">\n              <div className=\"mt-4 flex justify-between items-center\">\n                <span className=\"font-display text-2xl font-bold text-accent-primary\">$899.00</span>\n                <Button variant=\"primary\" size=\"sm\" bracketed>ADD TO CART</Button>\n              </div>\n            </Card>\n            <Card title=\"CYBERDECK MECHANICAL\" description=\"Hotswappable mechanical keyboard with custom laser-engraved keycaps.\" filename=\"keyboard_v2.spec\">\n              <div className=\"mt-4 flex justify-between items-center\">\n                <span className=\"font-display text-2xl font-bold text-accent-tertiary\">$349.00</span>\n                <Button variant=\"tertiary\" size=\"sm\" bracketed>ADD TO CART</Button>\n              </div>\n            </Card>\n            <Card title=\"HSM HARDWARE TOKEN\" description=\"FIPS 140-3 Level 4 physical cryptographic key with hardware destruction.\" filename=\"hsm_security.spec\">\n              <div className=\"mt-4 flex justify-between items-center\">\n                <span className=\"font-display text-2xl font-bold text-accent-secondary\">$199.00</span>\n                <Button variant=\"secondary\" size=\"sm\" bracketed>ADD TO CART</Button>\n              </div>\n            </Card>\n          </div>\n        </div>\n      )}\n\n      {/* Tab 4: Slide Deck Engine */}\n      {activeTab === 'slides' && (\n        <div className=\"border-4 border-edge-strong p-6 bg-surface-base\">\n          <SlideDeck>\n            <Slide title=\"BUILDING SINGULAR DESIGN SURFACES\">\n              <p className=\"text-xl text-content-secondary font-mono mb-4\">&gt; Dual-Mode Token Remappings across Dark, Dim, and Sketch.</p>\n              <Badge accent=\"primary\">REUSABLE ENGINE</Badge>\n            </Slide>\n            <Slide title=\"ZERO TOKEN DRIFT PRINCIPLE\">\n              <p className=\"text-xl text-content-secondary font-mono mb-4\">&gt; Every downstream app imports @rtkelly-labs/design-system/tailwind-preset.</p>\n              <Badge accent=\"tertiary\">SINGLE SOURCE OF TRUTH</Badge>\n            </Slide>\n          </SlideDeck>\n        </div>\n      )}\n\n      {/* Tab 5: Editorial & Blog Post */}\n      {activeTab === 'post' && (\n        <SectionContainer>\n          <LoremIpsumPost />\n        </SectionContainer>\n      )}\n\n      {/* Modal Dialog */}\n      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title=\"CONFIRM SYSTEM OVERRIDE\">\n        <p className=\"mb-4\">Are you sure you want to execute system configuration override on node <strong>cluster-us-east-1</strong>?</p>\n        <p className=\"text-xs font-mono text-content-muted\">&gt; This action will trigger a rolling reload of active workload containers.</p>\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}