@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-XJQADN6S.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  resolveFileKind
+} from "./chunk-IRUZDWJ3.js";
+
+// src/lib/file-icon.ts
+import {
+  File,
+  FileArchive,
+  FileCode,
+  FileDigit,
+  FileImage,
+  FileMusic,
+  FileSpreadsheet,
+  FileText,
+  FileType,
+  FileVideoCamera,
+  Presentation
+} from "lucide-react";
+var FILE_CATEGORY_ICONS = {
+  image: FileImage,
+  video: FileVideoCamera,
+  audio: FileMusic,
+  document: FileText,
+  spreadsheet: FileSpreadsheet,
+  presentation: Presentation,
+  code: FileCode,
+  text: FileType,
+  data: FileDigit,
+  archive: FileArchive,
+  unknown: File
+};
+function fileIconFor(name, mediaType) {
+  return FILE_CATEGORY_ICONS[resolveFileKind(name, mediaType).category];
+}
+
+export {
+  FILE_CATEGORY_ICONS,
+  fileIconFor
+};
+//# sourceMappingURL=chunk-XJQADN6S.js.map

package/dist/chunk-XJQADN6S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/file-icon.ts"],"sourcesContent":["/**\n * One glyph per {@link FileCategory} — the single icon map for file-shaped UI.\n *\n * Supersedes two package-private maps that could not see each other:\n * `PRODUCED_ASSET_ICONS` (`@elabs-ai/components-ai` file-tree, keyed by\n * the five-member `ContextAssetType`) and `mediaCategoryIcons` (same package,\n * attachments, keyed by six MIME buckets) — so the same `.csv` drew a table glyph\n * in one surface and a generic document glyph in the other.\n *\n * Lucide per `.claude/rules/icons.md`: these are generic UI glyphs, not product\n * vocabulary, so nothing here belongs in\n * `@elabs-ai/components-icons`.\n *\n * Values only — this module holds component REFERENCES, it renders nothing.\n * Icons inherit color from `currentColor`; the category is never carried by hue\n * alone, so a caller must still supply a text label or an `aria-label` on the\n * control (WCAG 1.4.1).\n */\n\nimport {\n  File,\n  FileArchive,\n  FileCode,\n  FileDigit,\n  FileImage,\n  FileMusic,\n  FileSpreadsheet,\n  FileText,\n  FileType,\n  FileVideoCamera,\n  type LucideIcon,\n  Presentation,\n} from \"lucide-react\";\n\nimport { type FileCategory, resolveFileKind } from \"./file-kind\";\n\n/** The glyph for each coarse file shape. Exhaustive over {@link FileCategory}. */\nexport const FILE_CATEGORY_ICONS: Readonly<Record<FileCategory, LucideIcon>> = {\n  image: FileImage,\n  video: FileVideoCamera,\n  audio: FileMusic,\n  document: FileText,\n  spreadsheet: FileSpreadsheet,\n  presentation: Presentation,\n  code: FileCode,\n  text: FileType,\n  data: FileDigit,\n  archive: FileArchive,\n  unknown: File,\n};\n\n/**\n * The glyph for a file, resolved from its name and (optionally) MIME.\n * Falls back to the generic file glyph rather than throwing.\n */\nexport function fileIconFor(name: string, mediaType?: string): LucideIcon {\n  return FILE_CATEGORY_ICONS[resolveFileKind(name, mediaType).category];\n}\n"],"mappings":";;;;;;AAmBA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AAKA,IAAM,sBAAkE;AAAA,EAC7E,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAMO,SAAS,YAAY,MAAc,WAAgC;AACxE,SAAO,oBAAoB,gBAAgB,MAAM,SAAS,EAAE,QAAQ;AACtE;","names":[]}

package/dist/chunk-XYFEQHEM.js

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

package/dist/chunk-XYFEQHEM.js.map

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

package/dist/chunk-Y33ZFTMR.js

@@ -0,0 +1,163 @@
+"use client";
+import {
+  ILLUSTRATION_ACCENT_VAR
+} from "./chunk-CEQ3YKHR.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.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-Y33ZFTMR.js.map

package/dist/chunk-Y33ZFTMR.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":";;;;;;;;;;;;AAEA,OAAmD;AACnD,SAAS,mBAAmB;AAC5B,SAAS,WAA8B;AA4FnC,SAME,KANF;AArFG,IAAM,qBAAqB;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBP,OAAO;AAAA,QACP,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,QAAQ;AAAA,EACnC;AACF;AAmDA,IAAM,UAAkC,EAAE,IAAI,UAAU,IAAI,UAAU,IAAI,SAAS;AAEnF,SAAS,eAAe,EAAE,OAAO,KAAK,GAAkC;AACtE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,sCAAsC,QAAQ,IAAI,CAAC;AAAA,MACjE,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,eAAY;AAAA,MAEZ;AAAA,4BAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F,oBAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,0CAAyC;AAAA;AAAA;AAAA,EAC9F;AAEJ;AAEA,SAAS,mBAAmB;AAG1B,SAAO,oBAAC,eAAY,WAAU,WAAU,eAAY,QAAO;AAC7D;AASO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,MAAM;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,YAAY,SAAS;AAC3B,QAAM,UAAU,SAAS;AACzB,QAAM,uBAAuB,gBAAgB,EAAE,SAAS;AAGxD,QAAM,YAAY,YACb,EAAE,MAAM,UAAU,aAAa,SAAS,IACzC,UACG,EAAE,MAAM,QAAQ,IACjB,CAAC;AAGP,QAAM,gBAAgB,UAAU,UAAU,EAAE,0BAA0B,IAAI;AAC1E,QAAM,sBACJ,gBAAgB,UAAU,EAAE,gCAAgC,IAAI;AAGlE,MAAI;AACJ,MAAI,SAAS,QAAW;AACtB,mBAAe;AAAA,EACjB,WAAW,WAAW;AACpB,mBAAe,oBAAC,kBAAe,MAAY;AAAA,EAC7C,WAAW,SAAS;AAClB,mBAAe,oBAAC,oBAAiB;AAAA,EACnC;AAEA,SACE,qBAAC,SAAI,aAAW,MAAM,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,SAAS,GAAI,GAAG,WAW/E;AAAA,eACC,oBAAC,UAAK,WAAU,gDACb,YAAE,4BAA4B,GACjC;AAAA,IAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAgBC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,UAAU,qBAAqB,uBAAuB;AAAA,UACpE,OACE,UACK,EAAE,CAAC,uBAAuB,GAAG,0BAA0B,IACxD;AAAA,UAGL;AAAA;AAAA,MACH;AAAA,QACE;AAAA;AAAA;AAAA;AAAA,MAIF;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,mBAAmB,UAAU,qBAAqB,uBAAuB;AAAA,UAEtF;AAAA;AAAA,MACH;AAAA,QACE;AAAA,KAEF,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUjB,qBAAC,SAAI,WAAW,GAAG,aAAa,gBAAgB,MAAM,GACnD;AAAA,uBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,eAAe,kBAAkB;AAAA,UACnC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAED,uBACC,oBAAC,OAAE,WAAU,oDACV,+BACH;AAAA,OAEJ;AAAA,IAID,aAAa,wBACZ,oBAAC,UAAK,WAAU,mCAAmC,gCAAqB;AAAA,IAGzE,UAAU,oBAAC,SAAI,WAAU,gCAAgC,mBAAQ,IAAS;AAAA,KAC7E;AAEJ;","names":[]}

package/dist/chunk-YA2QGLUL.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  illustrationSvgProps
+} from "./chunk-CEQ3YKHR.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-YA2QGLUL.js.map

package/dist/chunk-YA2QGLUL.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-YCFOFNQF.js

@@ -0,0 +1,28 @@
+"use client";
+
+// src/lib/use-mobile.ts
+import { useSyncExternalStore } from "react";
+var MOBILE_BREAKPOINT = 768;
+function subscribe(breakpoint, onStoreChange) {
+  const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+  mql.addEventListener("change", onStoreChange);
+  return () => mql.removeEventListener("change", onStoreChange);
+}
+function getSnapshot(breakpoint) {
+  return window.innerWidth < breakpoint;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useIsMobile(breakpoint = MOBILE_BREAKPOINT) {
+  return useSyncExternalStore(
+    (onStoreChange) => subscribe(breakpoint, onStoreChange),
+    () => getSnapshot(breakpoint),
+    getServerSnapshot
+  );
+}
+
+export {
+  useIsMobile
+};
+//# sourceMappingURL=chunk-YCFOFNQF.js.map

package/dist/chunk-YCFOFNQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-mobile.ts"],"sourcesContent":["\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nfunction subscribe(breakpoint: number, onStoreChange: () => void) {\n  const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n  mql.addEventListener(\"change\", onStoreChange);\n  return () => mql.removeEventListener(\"change\", onStoreChange);\n}\n\nfunction getSnapshot(breakpoint: number) {\n  return window.innerWidth < breakpoint;\n}\n\n// SSR / first-paint snapshot: no viewport to measure yet, so report \"not\n// mobile\" rather than guessing — this must match what the server rendered to\n// avoid a hydration mismatch, and useSyncExternalStore re-syncs to the real\n// value on the client before paint (no desktop-layout flash).\nfunction getServerSnapshot() {\n  return false;\n}\n\n/**\n * Returns true when the viewport is below `breakpoint` (default 768px, the\n * mobile breakpoint). Additive optional argument (ADR 0035 §5) — every\n * existing zero-arg call site is unchanged. A caller with its own threshold\n * (e.g. `ContextRail`'s `overlayBreakpoint`) passes it directly instead of a\n * second hook.\n */\nexport function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT): boolean {\n  return useSyncExternalStore(\n    (onStoreChange) => subscribe(breakpoint, onStoreChange),\n    () => getSnapshot(breakpoint),\n    getServerSnapshot,\n  );\n}\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AAErC,IAAM,oBAAoB;AAE1B,SAAS,UAAU,YAAoB,eAA2B;AAChE,QAAM,MAAM,OAAO,WAAW,eAAe,aAAa,CAAC,KAAK;AAChE,MAAI,iBAAiB,UAAU,aAAa;AAC5C,SAAO,MAAM,IAAI,oBAAoB,UAAU,aAAa;AAC9D;AAEA,SAAS,YAAY,YAAoB;AACvC,SAAO,OAAO,aAAa;AAC7B;AAMA,SAAS,oBAAoB;AAC3B,SAAO;AACT;AASO,SAAS,YAAY,aAAqB,mBAA4B;AAC3E,SAAO;AAAA,IACL,CAAC,kBAAkB,UAAU,YAAY,aAAa;AAAA,IACtD,MAAM,YAAY,UAAU;AAAA,IAC5B;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-YFGFNFVW.js

@@ -0,0 +1,59 @@
+"use client";
+import {
+  toggleVariants
+} from "./chunk-LG33MONJ.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/toggle-group/toggle-group.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var ToggleGroupContext = createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = forwardRef(function ToggleGroup2({ className, variant, size, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-1",
+        // Segmented groups carry the TabsList track (recessed muted fill);
+        // the raised active segment comes from the item variant.
+        variant === "segmented" && "gap-0 rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+});
+var ToggleGroupItem = forwardRef(function ToggleGroupItem2({ className, children, variant, size, ...props }, ref) {
+  const ctx = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({ variant: ctx.variant ?? variant, size: ctx.size ?? size }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};
+//# sourceMappingURL=chunk-YFGFNFVW.js.map

package/dist/chunk-YFGFNFVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toggle-group/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { toggleVariants } from \"../toggle\";\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>;\nconst ToggleGroupContext = createContext<ToggleVariantProps>({\n  size: \"default\",\n  variant: \"default\",\n});\n\nexport const ToggleGroup = forwardRef<\n  ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & ToggleVariantProps\n>(function ToggleGroup({ className, variant, size, children, ...props }, ref) {\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-1\",\n        // Segmented groups carry the TabsList track (recessed muted fill);\n        // the raised active segment comes from the item variant.\n        variant === \"segmented\" && \"gap-0 rounded-lg bg-muted p-1 text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n});\n\nexport const ToggleGroupItem = forwardRef<\n  ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & ToggleVariantProps\n>(function ToggleGroupItem({ className, children, variant, size, ...props }, ref) {\n  const ctx = useContext(ToggleGroupContext);\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({ variant: ctx.variant ?? variant, size: ctx.size ?? size }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,YAAY,0BAA0B;AACtC,OAAkC;AA0B5B;AArBN,IAAM,qBAAqB,cAAkC;AAAA,EAC3D,MAAM;AAAA,EACN,SAAS;AACX,CAAC;AAEM,IAAM,cAAc,WAGzB,SAASA,aAAY,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5E,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA,YAAY,eAAe;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,KAAK,GACjD,UACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,kBAAkB,WAG7B,SAASC,iBAAgB,EAAE,WAAW,UAAU,SAAS,MAAM,GAAG,MAAM,GAAG,KAAK;AAChF,QAAM,MAAM,WAAW,kBAAkB;AACzC,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,IAAI,WAAW,SAAS,MAAM,IAAI,QAAQ,KAAK,CAAC;AAAA,QAC1E;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["ToggleGroup","ToggleGroupItem"]}

package/dist/chunk-YFKKMDJL.js

@@ -0,0 +1,35 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/hover-card/hover-card.tsx
+import { forwardRef } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { jsx } from "react/jsx-runtime";
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = forwardRef(function HoverCardContent2({ className, align = "center", sideOffset = 4, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    HoverCardPrimitive.Content,
+    {
+      ref,
+      "data-slot": "hover-card-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent
+};
+//# sourceMappingURL=chunk-YFKKMDJL.js.map

package/dist/chunk-YFKKMDJL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { cn } from \"../../lib/cn\";\n\nexport const HoverCard = HoverCardPrimitive.Root;\nexport const HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nexport const HoverCardContent = forwardRef<\n  ElementRef<typeof HoverCardPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(function HoverCardContent({ className, align = \"center\", sideOffset = 4, ...props }, ref) {\n  return (\n    <HoverCardPrimitive.Content\n      ref={ref}\n      data-slot=\"hover-card-content\"\n      align={align}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 w-64 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,wBAAwB;AAWhC;AARG,IAAM,YAA+B;AACrC,IAAM,mBAAsC;AAE5C,IAAM,mBAAmB,WAG9B,SAASA,kBAAiB,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,KAAK;AAC1F,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["HoverCardContent"]}

package/dist/chunk-YHVXYOL6.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/drafting-marks/drafting-marks.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DRAFTING_MARKS_WIDTH = 560;
+var DRAFTING_MARKS_HEIGHT = 360;
+var ANCHOR_CLASS = {
+  "top-start": "top-0 start-0 rtl:-scale-x-100",
+  "top-end": "top-0 end-0 -scale-x-100 rtl:scale-x-100",
+  "bottom-start": "bottom-0 start-0 -scale-y-100 rtl:-scale-x-100",
+  "bottom-end": "bottom-0 end-0 -scale-100 rtl:scale-x-100"
+};
+var DraftingMarks = React.forwardRef(
+  function DraftingMarks2({ anchor = "top-start", accent = true, className, style, ...props }, ref) {
+    const dotsId = `drafting-dots-${React.useId().replace(/:/g, "")}`;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-slot": "drafting-marks",
+        "data-anchor": anchor,
+        fill: "none",
+        height: DRAFTING_MARKS_HEIGHT,
+        width: DRAFTING_MARKS_WIDTH,
+        viewBox: `0 0 ${DRAFTING_MARKS_WIDTH} ${DRAFTING_MARKS_HEIGHT}`,
+        stroke: "var(--hairline-ink-strong)",
+        strokeWidth: 1,
+        className: cn("pointer-events-none absolute max-w-none", ANCHOR_CLASS[anchor], className),
+        style: {
+          // Fades away from its own corner (authored top-left; the mirror carries the mask along).
+          maskImage: "var(--drafting-marks-fade, var(--deco-fade-corner))",
+          WebkitMaskImage: "var(--drafting-marks-fade, var(--deco-fade-corner))",
+          ...style
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: dotsId, width: 12, height: 12, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("circle", { cx: 6, cy: 6, r: 0.75, fill: "var(--hairline-ink-strong)", stroke: "none" }) }) }),
+          /* @__PURE__ */ jsx("rect", { x: 132, y: 36, width: 216, height: 48, fill: `url(#${dotsId})`, stroke: "none" }),
+          accent ? /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: 40,
+              y: 96.5,
+              width: 56,
+              height: 44,
+              fill: "var(--chart-2)",
+              fillOpacity: 0.16,
+              stroke: "none"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("path", { d: "M0 96.5H520M520 90.5v12" }),
+          /* @__PURE__ */ jsx("path", { d: "M96.5 0v300M90.5 300.5h12" }),
+          /* @__PURE__ */ jsx("path", { d: "M72.5 24v250M0 140.5h210", strokeDasharray: "1 4" }),
+          /* @__PURE__ */ jsx("path", { d: "M252.5 96.5A156 156 0 0 1 40 241.8" }),
+          /* @__PURE__ */ jsx("path", { d: "M96.5 40.5A56 56 0 0 0 40.5 96.5V241.8" }),
+          /* @__PURE__ */ jsx("path", { d: "M40.5 222.5h78M118.5 218.5v8" }),
+          /* @__PURE__ */ jsx("path", { d: "M18.5 40v28M14.5 40.5h8M14.5 67.5h8" }),
+          /* @__PURE__ */ jsx("path", { d: "M52 322.5h12M58.5 316v12M404 44.5h12M410.5 38v12M236 292.5h12M242.5 286v12" }),
+          /* @__PURE__ */ jsx("path", { d: "M300.5 300.5H470M300.5 300.5V236M300.5 244.5A56 56 0 0 1 356.5 300.5M300.5 252.5A48 48 0 0 1 348.5 300.5M300.5 260.5A40 40 0 0 1 340.5 300.5" }),
+          accent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("rect", { x: 289, y: 222, width: 7, height: 12, fill: "var(--primary)", stroke: "none" }),
+            /* @__PURE__ */ jsx("circle", { cx: 96.5, cy: 96.5, r: 3, fill: "var(--primary)", stroke: "none" })
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+
+export {
+  DRAFTING_MARKS_WIDTH,
+  DRAFTING_MARKS_HEIGHT,
+  DraftingMarks
+};
+//# sourceMappingURL=chunk-YHVXYOL6.js.map

package/dist/chunk-YHVXYOL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/drafting-marks/drafting-marks.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\n\n/** Which corner of the host the drawing grows out of. Logical: `start`/`end` follow the text direction. */\nexport type DraftingMarksAnchor = \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\";\n\nexport interface DraftingMarksProps extends Omit<React.SVGAttributes<SVGSVGElement>, \"children\"> {\n  /** The corner the construction grows out of, and fades away from. Default `\"top-start\"`. */\n  anchor?: DraftingMarksAnchor;\n  /**\n   * Ink the two small accents — a `--primary` station point and a `--chart-2` tinted plate.\n   * `false` keeps the whole drawing in rule ink. Default `true`.\n   */\n  accent?: boolean;\n}\n\n/** The drawing's own size, in px. Fixed, so every hairline stays one device-crisp pixel. */\nexport const DRAFTING_MARKS_WIDTH = 560;\nexport const DRAFTING_MARKS_HEIGHT = 360;\n\n// The drawing is authored ONCE, growing out of the top-left corner; the other three anchors\n// are the same drawing mirrored. `start`/`end` are logical, so the mirror itself flips under RTL.\nconst ANCHOR_CLASS: Record<DraftingMarksAnchor, string> = {\n  \"top-start\": \"top-0 start-0 rtl:-scale-x-100\",\n  \"top-end\": \"top-0 end-0 -scale-x-100 rtl:scale-x-100\",\n  \"bottom-start\": \"bottom-0 start-0 -scale-y-100 rtl:-scale-x-100\",\n  \"bottom-end\": \"bottom-0 end-0 -scale-100 rtl:scale-x-100\",\n};\n\n/**\n * DraftingMarks — a quiet construction drawing in one corner of a header or hero band: two\n * guides that cross at a station point, the arcs struck from it, a dimension tick, a field of\n * dots and a few registration crosses. It is the hairline family's one ILLUSTRATION: where the\n * `hairline-*` utilities rule edges, this gives an empty corner the look of a sheet someone\n * measured on.\n *\n * Decorative and inert: `aria-hidden`, `pointer-events: none`, absolutely positioned in the\n * corner named by `anchor` and faded out away from it, so it never reaches the text in the\n * middle of the band (`--drafting-marks-fade` swaps the falloff — e.g.\n * `var(--deco-fade-corner-tight)` where the copy comes close). Put it first inside a positioned (`relative`) host that clips\n * (`overflow-hidden`). Lines take the theme's `--hairline-ink-strong`; the two accents take\n * `--primary` and `--chart-2` — no literal colour, so it re-inks with the theme.\n *\n * One per band, in a corner the content leaves empty. It is a ground gesture like the paper\n * utilities — never behind body text, never inside a control.\n */\nexport const DraftingMarks = React.forwardRef<SVGSVGElement, DraftingMarksProps>(\n  function DraftingMarks({ anchor = \"top-start\", accent = true, className, style, ...props }, ref) {\n    const dotsId = `drafting-dots-${React.useId().replace(/:/g, \"\")}`;\n    return (\n      <svg\n        ref={ref}\n        aria-hidden=\"true\"\n        data-slot=\"drafting-marks\"\n        data-anchor={anchor}\n        fill=\"none\"\n        height={DRAFTING_MARKS_HEIGHT}\n        width={DRAFTING_MARKS_WIDTH}\n        viewBox={`0 0 ${DRAFTING_MARKS_WIDTH} ${DRAFTING_MARKS_HEIGHT}`}\n        stroke=\"var(--hairline-ink-strong)\"\n        strokeWidth={1}\n        className={cn(\"pointer-events-none absolute max-w-none\", ANCHOR_CLASS[anchor], className)}\n        style={{\n          // Fades away from its own corner (authored top-left; the mirror carries the mask along).\n          maskImage: \"var(--drafting-marks-fade, var(--deco-fade-corner))\",\n          WebkitMaskImage: \"var(--drafting-marks-fade, var(--deco-fade-corner))\",\n          ...style,\n        }}\n        {...props}\n      >\n        <defs>\n          <pattern id={dotsId} width={12} height={12} patternUnits=\"userSpaceOnUse\">\n            <circle cx={6} cy={6} r={0.75} fill=\"var(--hairline-ink-strong)\" stroke=\"none\" />\n          </pattern>\n        </defs>\n\n        {/* The dot field, tucked between the guides. */}\n        <rect x={132} y={36} width={216} height={48} fill={`url(#${dotsId})`} stroke=\"none\" />\n\n        {/* The tinted plate, hung from the horizontal guide. */}\n        {accent ? (\n          <rect\n            x={40}\n            y={96.5}\n            width={56}\n            height={44}\n            fill=\"var(--chart-2)\"\n            fillOpacity={0.16}\n            stroke=\"none\"\n          />\n        ) : null}\n\n        {/* Guides: they cross at the station point (96.5, 96.5). Half-pixel centres keep a\n            1px stroke on one device row. */}\n        <path d=\"M0 96.5H520M520 90.5v12\" />\n        <path d=\"M96.5 0v300M90.5 300.5h12\" />\n        <path d=\"M72.5 24v250M0 140.5h210\" strokeDasharray=\"1 4\" />\n\n        {/* Arcs struck from the station point. */}\n        <path d=\"M252.5 96.5A156 156 0 0 1 40 241.8\" />\n        <path d=\"M96.5 40.5A56 56 0 0 0 40.5 96.5V241.8\" />\n        <path d=\"M40.5 222.5h78M118.5 218.5v8\" />\n\n        {/* A dimension tick and the registration crosses. */}\n        <path d=\"M18.5 40v28M14.5 40.5h8M14.5 67.5h8\" />\n        <path d=\"M52 322.5h12M58.5 316v12M404 44.5h12M410.5 38v12M236 292.5h12M242.5 286v12\" />\n\n        {/* A door-swing of three concentric arcs, further along the floor line. */}\n        <path d=\"M300.5 300.5H470M300.5 300.5V236M300.5 244.5A56 56 0 0 1 356.5 300.5M300.5 252.5A48 48 0 0 1 348.5 300.5M300.5 260.5A40 40 0 0 1 340.5 300.5\" />\n\n        {accent ? (\n          <>\n            <rect x={289} y={222} width={7} height={12} fill=\"var(--primary)\" stroke=\"none\" />\n            <circle cx={96.5} cy={96.5} r={3} fill=\"var(--primary)\" stroke=\"none\" />\n          </>\n        ) : null}\n      </svg>\n    );\n  },\n);\n"],"mappings":";;;;;;AAAA,YAAY,WAAW;AAwEX,SAuCF,UAvCE,KAuCF,YAvCE;AAvDL,IAAM,uBAAuB;AAC7B,IAAM,wBAAwB;AAIrC,IAAM,eAAoD;AAAA,EACxD,aAAa;AAAA,EACb,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,cAAc;AAChB;AAmBO,IAAM,gBAAsB;AAAA,EACjC,SAASA,eAAc,EAAE,SAAS,aAAa,SAAS,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,KAAK;AAC/F,UAAM,SAAS,iBAAuB,YAAM,EAAE,QAAQ,MAAM,EAAE,CAAC;AAC/D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,aAAU;AAAA,QACV,eAAa;AAAA,QACb,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS,OAAO,oBAAoB,IAAI,qBAAqB;AAAA,QAC7D,QAAO;AAAA,QACP,aAAa;AAAA,QACb,WAAW,GAAG,2CAA2C,aAAa,MAAM,GAAG,SAAS;AAAA,QACxF,OAAO;AAAA;AAAA,UAEL,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,UACC,8BAAC,aAAQ,IAAI,QAAQ,OAAO,IAAI,QAAQ,IAAI,cAAa,kBACvD,8BAAC,YAAO,IAAI,GAAG,IAAI,GAAG,GAAG,MAAM,MAAK,8BAA6B,QAAO,QAAO,GACjF,GACF;AAAA,UAGA,oBAAC,UAAK,GAAG,KAAK,GAAG,IAAI,OAAO,KAAK,QAAQ,IAAI,MAAM,QAAQ,MAAM,KAAK,QAAO,QAAO;AAAA,UAGnF,SACC;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACH,GAAG;AAAA,cACH,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,aAAa;AAAA,cACb,QAAO;AAAA;AAAA,UACT,IACE;AAAA,UAIJ,oBAAC,UAAK,GAAE,2BAA0B;AAAA,UAClC,oBAAC,UAAK,GAAE,6BAA4B;AAAA,UACpC,oBAAC,UAAK,GAAE,4BAA2B,iBAAgB,OAAM;AAAA,UAGzD,oBAAC,UAAK,GAAE,sCAAqC;AAAA,UAC7C,oBAAC,UAAK,GAAE,0CAAyC;AAAA,UACjD,oBAAC,UAAK,GAAE,gCAA+B;AAAA,UAGvC,oBAAC,UAAK,GAAE,uCAAsC;AAAA,UAC9C,oBAAC,UAAK,GAAE,8EAA6E;AAAA,UAGrF,oBAAC,UAAK,GAAE,gJAA+I;AAAA,UAEtJ,SACC,iCACE;AAAA,gCAAC,UAAK,GAAG,KAAK,GAAG,KAAK,OAAO,GAAG,QAAQ,IAAI,MAAK,kBAAiB,QAAO,QAAO;AAAA,YAChF,oBAAC,YAAO,IAAI,MAAM,IAAI,MAAM,GAAG,GAAG,MAAK,kBAAiB,QAAO,QAAO;AAAA,aACxE,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["DraftingMarks"]}

package/dist/chunk-YIFB24WW.js

@@ -0,0 +1,37 @@
+"use client";
+
+// src/components/theme-switcher/use-theme-transition.ts
+import { useCallback } from "react";
+import { useReducedMotion, useTheme } from "@elabs-ai/components-tokens";
+function useThemeTransition(effect = "polygon") {
+  const { theme, setTheme, themeDefinitions } = useTheme();
+  const reduced = useReducedMotion();
+  return useCallback(
+    (next) => {
+      if (next === theme) return;
+      if (typeof document === "undefined") {
+        setTheme(next);
+        return;
+      }
+      const doc = document;
+      if (reduced || typeof doc.startViewTransition !== "function") {
+        setTheme(next);
+        return;
+      }
+      const root = document.documentElement;
+      root.dataset.vt = themeDefinitions.find((d) => d.value === next)?.dark ? "to-dark" : "to-light";
+      root.dataset.vtEffect = effect;
+      const transition = doc.startViewTransition(() => setTheme(next));
+      transition.finished.finally(() => {
+        delete root.dataset.vt;
+        delete root.dataset.vtEffect;
+      });
+    },
+    [theme, setTheme, reduced, effect, themeDefinitions]
+  );
+}
+
+export {
+  useThemeTransition
+};
+//# sourceMappingURL=chunk-YIFB24WW.js.map

package/dist/chunk-YIFB24WW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme-switcher/use-theme-transition.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport { useReducedMotion, useTheme, type ThemeName } from \"@elabs-ai/components-tokens\";\n\n/** Whole-screen reveal effects for the animated theme switch (View Transitions API). */\nexport type ThemeTransitionEffect = \"polygon\" | \"circle\" | \"circle-blur\" | \"triangle\";\n\ntype ViewTransitionDocument = Document & {\n  startViewTransition?: (callback: () => void | Promise<void>) => { finished: Promise<void> };\n};\n\n/**\n * Returns a theme setter that animates the whole-screen switch via the View\n * Transitions API (the chanhdai.com \"theme toggle effect\", adapted to brand-ui).\n *\n * - Direction-aware: sets `data-vt=\"to-dark|to-light\"` on `<html>` from the\n *   target theme's `dark` flag, so the clip-path wipes the right way for ANY\n *   theme (not just light/dark).\n * - `data-vt-effect` selects the reveal shape (default \"polygon\").\n * - Motion-aware: under `useReducedMotion()` (OS or in-app preference) — or when\n *   the browser lacks `startViewTransition` — it falls back to an instant,\n *   unanimated `setTheme`.\n *\n * The visual is pure CSS on `::view-transition-*` in `@elabs-ai/components-tokens` themes.css;\n * this hook only orchestrates it.\n */\nexport function useThemeTransition(effect: ThemeTransitionEffect = \"polygon\") {\n  const { theme, setTheme, themeDefinitions } = useTheme();\n  const reduced = useReducedMotion();\n\n  return useCallback(\n    (next: ThemeName) => {\n      if (next === theme) return;\n      if (typeof document === \"undefined\") {\n        setTheme(next);\n        return;\n      }\n      const doc = document as ViewTransitionDocument;\n      if (reduced || typeof doc.startViewTransition !== \"function\") {\n        setTheme(next);\n        return;\n      }\n      const root = document.documentElement;\n      // The direction of the reveal comes from the provider's REGISTRY entry\n      // for the incoming theme (ADR 0029) — a consumer theme animates correctly\n      // without registering here. `resolveThemeIsDark` is deliberately NOT used:\n      // it reads the CURRENT computed `color-scheme`, and `next` has not been\n      // applied yet, so it would report the OUTGOING theme's direction.\n      root.dataset.vt = themeDefinitions.find((d) => d.value === next)?.dark\n        ? \"to-dark\"\n        : \"to-light\";\n      root.dataset.vtEffect = effect;\n      const transition = doc.startViewTransition(() => setTheme(next));\n      transition.finished.finally(() => {\n        delete root.dataset.vt;\n        delete root.dataset.vtEffect;\n      });\n    },\n    [theme, setTheme, reduced, effect, themeDefinitions],\n  );\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,gBAAgC;AAwBpD,SAAS,mBAAmB,SAAgC,WAAW;AAC5E,QAAM,EAAE,OAAO,UAAU,iBAAiB,IAAI,SAAS;AACvD,QAAM,UAAU,iBAAiB;AAEjC,SAAO;AAAA,IACL,CAAC,SAAoB;AACnB,UAAI,SAAS,MAAO;AACpB,UAAI,OAAO,aAAa,aAAa;AACnC,iBAAS,IAAI;AACb;AAAA,MACF;AACA,YAAM,MAAM;AACZ,UAAI,WAAW,OAAO,IAAI,wBAAwB,YAAY;AAC5D,iBAAS,IAAI;AACb;AAAA,MACF;AACA,YAAM,OAAO,SAAS;AAMtB,WAAK,QAAQ,KAAK,iBAAiB,KAAK,CAAC,MAAM,EAAE,UAAU,IAAI,GAAG,OAC9D,YACA;AACJ,WAAK,QAAQ,WAAW;AACxB,YAAM,aAAa,IAAI,oBAAoB,MAAM,SAAS,IAAI,CAAC;AAC/D,iBAAW,SAAS,QAAQ,MAAM;AAChC,eAAO,KAAK,QAAQ;AACpB,eAAO,KAAK,QAAQ;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO,UAAU,SAAS,QAAQ,gBAAgB;AAAA,EACrD;AACF;","names":[]}

package/dist/chunk-YK4H7VWM.js

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

package/dist/chunk-YK4H7VWM.js.map

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

package/dist/chunk-YMFEBGTU.js

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

package/dist/chunk-YMFEBGTU.js.map

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