@arbidocs/blocks 0.5.63 → 0.5.65

package/dist/chunk-N5WJBQYF.cjs

@@ -1,476 +0,0 @@
-"use client";
-'use strict';
-
-var chunkNWNVWO6L_cjs = require('./chunk-NWNVWO6L.cjs');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var ui = require('@arbidocs/react/ui');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/theme/color.ts
-var NUM = String.raw`-?\d*\.?\d+(?:e-?\d+)?`;
-var TRIPLET_RE = new RegExp(String.raw`^(${NUM})(?:deg)?\s+(${NUM})%\s+(${NUM})%$`);
-var HSL_FN_RE = new RegExp(
-  String.raw`^hsla?\(\s*(${NUM})(?:deg)?[\s,]+(${NUM})%[\s,]+(${NUM})%\s*(?:[,/]\s*${NUM}%?\s*)?\)$`,
-  "i"
-);
-var RGB_FN_RE = new RegExp(
-  String.raw`^rgba?\(\s*(${NUM})[\s,]+(${NUM})[\s,]+(${NUM})\s*(?:[,/]\s*${NUM}%?\s*)?\)$`,
-  "i"
-);
-var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
-var fmt = (n) => String(Math.round(n * 10) / 10);
-function rgbToHsl({ r, g, b }) {
-  const rn = r / 255;
-  const gn = g / 255;
-  const bn = b / 255;
-  const max = Math.max(rn, gn, bn);
-  const min = Math.min(rn, gn, bn);
-  const l = (max + min) / 2;
-  const d = max - min;
-  let h = 0;
-  let s = 0;
-  if (d !== 0) {
-    s = d / (1 - Math.abs(2 * l - 1));
-    if (max === rn) h = 60 * ((gn - bn) / d % 6);
-    else if (max === gn) h = 60 * ((bn - rn) / d + 2);
-    else h = 60 * ((rn - gn) / d + 4);
-  }
-  if (h < 0) h += 360;
-  return { h, s: s * 100, l: l * 100 };
-}
-function hslToRgb({ h, s, l }) {
-  const sn = clamp(s, 0, 100) / 100;
-  const ln = clamp(l, 0, 100) / 100;
-  const hn = (h % 360 + 360) % 360;
-  const c = (1 - Math.abs(2 * ln - 1)) * sn;
-  const x = c * (1 - Math.abs(hn / 60 % 2 - 1));
-  const m = ln - c / 2;
-  const [r1, g1, b1] = hn < 60 ? [c, x, 0] : hn < 120 ? [x, c, 0] : hn < 180 ? [0, c, x] : hn < 240 ? [0, x, c] : hn < 300 ? [x, 0, c] : [c, 0, x];
-  return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
-}
-function parseHex(value) {
-  let hex = value.slice(1);
-  if (hex.length === 3 || hex.length === 4) {
-    hex = hex.slice(0, 3).split("").map((ch) => ch + ch).join("");
-  } else if (hex.length === 8) {
-    hex = hex.slice(0, 6);
-  }
-  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null;
-  return {
-    r: parseInt(hex.slice(0, 2), 16),
-    g: parseInt(hex.slice(2, 4), 16),
-    b: parseInt(hex.slice(4, 6), 16)
-  };
-}
-function parseColor(value) {
-  const c = value.trim();
-  if (c.startsWith("#")) return parseHex(c);
-  const rgb = RGB_FN_RE.exec(c);
-  if (rgb) return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) };
-  const hsl = HSL_FN_RE.exec(c) ?? TRIPLET_RE.exec(c);
-  if (hsl) return hslToRgb({ h: Number(hsl[1]), s: Number(hsl[2]), l: Number(hsl[3]) });
-  return null;
-}
-function parseHsl(value) {
-  const c = value.trim();
-  const m = TRIPLET_RE.exec(c) ?? HSL_FN_RE.exec(c);
-  if (m) return { h: Number(m[1]), s: Number(m[2]), l: Number(m[3]) };
-  const rgb = parseColor(c);
-  return rgb ? rgbToHsl(rgb) : null;
-}
-function formatHslTriplet({ h, s, l }) {
-  return `${fmt((h % 360 + 360) % 360)} ${fmt(s)}% ${fmt(l)}%`;
-}
-function toHslTriplet(color) {
-  const c = color.trim();
-  if (TRIPLET_RE.test(c)) return c;
-  const hsl = parseHsl(c);
-  return hsl ? formatHslTriplet(hsl) : c;
-}
-function toCssColor(value) {
-  const c = value.trim();
-  return TRIPLET_RE.test(c) ? `hsl(${c})` : c;
-}
-
-// src/theme/tokens.ts
-var THEME_STYLE_ID = "arbi-theme-vars";
-function themeCssVars(colors) {
-  const vars = {};
-  for (const [key, value] of Object.entries(colors)) {
-    vars[`--${key}`] = toHslTriplet(value);
-    vars[`--color-${key}`] = toCssColor(value);
-  }
-  return vars;
-}
-function themeMetaVars(theme) {
-  return {
-    "--font-display": theme.fonts.display,
-    "--font-sans": theme.fonts.sans,
-    "--radius": `${theme.radius}rem`
-  };
-}
-function renderBlock(selector, vars) {
-  const body = Object.entries(vars).map(([name, value]) => `  ${name}: ${value};`).join("\n");
-  return `${selector} {
-${body}
-}`;
-}
-function emitCssVars(theme, dark) {
-  if (typeof document === "undefined") return;
-  let css = renderBlock(":root", { ...themeCssVars(theme.colors), ...themeMetaVars(theme) });
-  if (dark) css += `
-${renderBlock(":root.dark", themeCssVars(dark))}`;
-  let style = document.getElementById(THEME_STYLE_ID);
-  if (!style) {
-    style = document.createElement("style");
-    style.id = THEME_STYLE_ID;
-    document.head.appendChild(style);
-  }
-  style.textContent = css;
-}
-function removeCssVars() {
-  if (typeof document === "undefined") return;
-  document.getElementById(THEME_STYLE_ID)?.remove();
-}
-function normalizeOptions(optionsOrRoot) {
-  if (typeof HTMLElement !== "undefined" && optionsOrRoot instanceof HTMLElement) {
-    return { root: optionsOrRoot };
-  }
-  return optionsOrRoot;
-}
-function applyThemeVars(theme, optionsOrRoot = {}) {
-  const { mode = "flat", dark, root = document.documentElement } = normalizeOptions(optionsOrRoot);
-  if (mode === "cssVars") {
-    emitCssVars(theme, dark);
-    return;
-  }
-  for (const [name, value] of Object.entries({
-    ...themeCssVars(theme.colors),
-    ...themeMetaVars(theme)
-  })) {
-    root.style.setProperty(name, value);
-  }
-}
-function applyFontVars(fonts, root = document.documentElement) {
-  root.style.setProperty("--font-display", fonts.display);
-  root.style.setProperty("--font-sans", fonts.sans);
-}
-function clearFontVars(root = document.documentElement) {
-  root.style.removeProperty("--font-display");
-  root.style.removeProperty("--font-sans");
-}
-function clearThemeVars(theme, optionsOrRoot = {}) {
-  const { mode = "flat", root = document.documentElement } = normalizeOptions(optionsOrRoot);
-  if (mode === "cssVars") {
-    removeCssVars();
-    return;
-  }
-  for (const key of Object.keys(theme.colors)) {
-    root.style.removeProperty(`--${key}`);
-    root.style.removeProperty(`--color-${key}`);
-  }
-  root.style.removeProperty("--font-display");
-  root.style.removeProperty("--font-sans");
-  root.style.removeProperty("--radius");
-}
-function ThemeEditor({
-  bundle,
-  variant = "panel",
-  preview,
-  onSave,
-  testIdPrefix = "theme",
-  defaultOpen = false
-}) {
-  const { useStore, tokens, presets, groupLabels, mode, darkColors } = bundle;
-  const colors = useStore((s) => s.colors);
-  const fonts = useStore((s) => s.fonts);
-  const radius = useStore((s) => s.radius);
-  const activePresetId = useStore((s) => s.activePresetId);
-  const setColor = useStore((s) => s.setColor);
-  const setFont = useStore((s) => s.setFont);
-  const setFontPairing = useStore((s) => s.setFontPairing);
-  const setRadius = useStore((s) => s.setRadius);
-  const applyPreset = useStore((s) => s.applyPreset);
-  const reset = useStore((s) => s.reset);
-  const [open, setOpen] = react.useState(defaultOpen);
-  const [saving, setSaving] = react.useState(false);
-  const [savedVia, setSavedVia] = react.useState(null);
-  react.useEffect(() => {
-    applyThemeVars({ colors, fonts, radius }, { mode, dark: darkColors });
-  }, [colors, fonts, radius, mode, darkColors]);
-  const tid = (suffix) => `${testIdPrefix}-${suffix}`;
-  const groups = [...new Set(tokens.map((t) => t.group))];
-  const save = async () => {
-    if (!onSave) return;
-    setSaving(true);
-    try {
-      const via = await onSave();
-      setSavedVia(typeof via === "string" ? via : "saved");
-    } catch {
-      setSavedVia(null);
-    } finally {
-      setSaving(false);
-    }
-  };
-  const Presets = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-    presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => applyPreset(p.id),
-        className: `rounded-full border px-3 py-1 text-xs font-medium transition-colors ${activePresetId === p.id ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary"}`,
-        "data-testid": tid(`preset-${p.id}`),
-        children: p.label
-      },
-      p.id
-    )),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: reset,
-        className: "ml-auto inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground",
-        "data-testid": tid("reset"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { className: "size-3" }),
-          " Reset"
-        ]
-      }
-    )
-  ] });
-  const colorRow = (k, label) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "color",
-        value: colors[k] ?? "#000000",
-        onChange: (e) => setColor(k, e.target.value),
-        className: "size-9 shrink-0 cursor-pointer rounded-md border border-border bg-transparent",
-        "aria-label": label,
-        "data-testid": tid(`color-${k}`)
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          value: colors[k] ?? "",
-          onChange: (e) => setColor(k, e.target.value),
-          "aria-label": `${label} hex value`,
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring h-7 font-mono text-xs",
-          "data-testid": tid(`hex-${k}`)
-        }
-      )
-    ] })
-  ] }, k);
-  const activePairing = chunkNWNVWO6L_cjs.matchFontPairing(fonts);
-  const Typography = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: "Typeface" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          value: activePairing?.id ?? "",
-          onChange: (e) => setFontPairing(e.target.value),
-          "aria-label": "Typeface",
-          className: "mt-1 h-8 w-full rounded-md border border-border bg-card px-2 text-xs text-foreground focus-visible:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "data-testid": tid("font-pairing"),
-          children: [
-            !activePairing && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Custom" }),
-            chunkNWNVWO6L_cjs.FONT_PAIRINGS.map((pairing) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: pairing.id, children: pairing.label }, pairing.id))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: activePairing?.description ?? "Hand-edited font stacks." })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: "Display font stack" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          value: fonts.display,
-          onChange: (e) => setFont("display", e.target.value),
-          "aria-label": "Display font stack",
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs",
-          "data-testid": tid("font-display")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-muted-foreground", children: "Body font stack" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Input,
-        {
-          value: fonts.sans,
-          onChange: (e) => setFont("sans", e.target.value),
-          "aria-label": "Body font stack",
-          className: "bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs",
-          "data-testid": tid("font-sans")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "block text-xs text-muted-foreground", children: [
-        "Base radius \u2014 ",
-        radius,
-        "rem"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min: 0,
-          max: 1.5,
-          step: 0.125,
-          value: radius,
-          onChange: (e) => setRadius(Number(e.target.value)),
-          "aria-label": "Base radius",
-          className: "mt-2 w-full accent-[color:var(--color-primary)]",
-          "data-testid": tid("radius")
-        }
-      )
-    ] })
-  ] });
-  const Preview = /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { variant: "elevated", className: "rounded-lg", "data-testid": tid("preview"), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CardTitle, { className: "text-base", children: "Live preview" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.CardContent, { className: "space-y-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-[var(--radius)] bg-primary p-4 text-primary-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-display text-lg font-semibold", children: preview?.title ?? "Preview" }),
-        preview?.subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs opacity-80", children: preview.subtitle })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1.5", children: tokens.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          title: t.label,
-          className: "aspect-square rounded-md border border-border",
-          style: { background: `var(--color-${t.key})` }
-        },
-        t.key
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-[var(--radius)] border border-border bg-[color:var(--color-ai-accent-soft,var(--color-accent))] p-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[color:var(--color-ai-accent,var(--color-primary))]", children: "AI action surface" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Themed by the AI-kit accent tokens." })
-      ] })
-    ] })
-  ] });
-  const SaveBar = onSave && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => void save(),
-        disabled: saving,
-        className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60",
-        "data-testid": tid("save"),
-        children: [
-          savedVia ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "size-4" }),
-          saving ? "Saving\u2026" : savedVia ? "Saved" : "Save theme"
-        ]
-      }
-    ),
-    savedVia && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", "data-testid": tid("via"), children: [
-      "stored via ",
-      savedVia
-    ] })
-  ] });
-  if (variant === "collapsed") {
-    const controlsId = `${testIdPrefix}-controls`;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", "data-testid": testIdPrefix, children: [
-      Presets,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-8 gap-1.5 @xl:grid-cols-12", "aria-hidden": "true", children: tokens.slice(0, 12).map((t) => /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          title: t.label,
-          className: "aspect-square rounded-md border border-border",
-          style: { background: `var(--color-${t.key})` }
-        },
-        t.key
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => setOpen((o) => !o),
-          "aria-expanded": open,
-          "aria-controls": controlsId,
-          className: "inline-flex items-center gap-1.5 text-sm font-medium text-foreground hover:text-primary",
-          "data-testid": tid("customize"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `size-4 transition-transform ${open ? "rotate-180" : ""}` }),
-            "Customize colours and type"
-          ]
-        }
-      ),
-      open && /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          id: controlsId,
-          className: "max-h-[28rem] overflow-y-auto rounded-md border border-border bg-card p-4",
-          "data-testid": tid("controls"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Colours" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3 @xl:grid-cols-2", children: tokens.map((t) => colorRow(t.key, t.label)) }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Typography & shape" }),
-            Typography
-          ]
-        }
-      ),
-      SaveBar
-    ] });
-  }
-  if (variant === "drawer") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-y-auto bg-card p-5", "data-testid": testIdPrefix, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-lg font-semibold text-foreground", children: "Theme" }) }),
-      Presets,
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-5 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Colours" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: tokens.map((t) => colorRow(t.key, t.label)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Typography & shape" }),
-      Typography,
-      SaveBar
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_320px]", "data-testid": testIdPrefix, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { variant: "elevated", className: "rounded-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CardTitle, { className: "flex items-center gap-2 text-base", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "size-4 text-[color:var(--color-primary)]" }),
-          " Presets"
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.CardContent, { children: Presets })
-      ] }),
-      groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Card,
-        {
-          variant: "elevated",
-          className: "rounded-lg",
-          "data-testid": tid(`group-${group}`),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CardTitle, { className: "text-base", children: groupLabels[group] ?? group }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.CardContent, { className: "grid gap-3 @xl:grid-cols-2", children: tokens.filter((t) => t.group === group).map((t) => colorRow(t.key, t.label)) })
-          ]
-        },
-        group
-      )),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { variant: "elevated", className: "rounded-lg", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.CardTitle, { className: "text-base", children: "Typography & shape" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.CardContent, { children: Typography })
-      ] }),
-      SaveBar
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-4 lg:self-start", children: Preview })
-  ] });
-}
-
-exports.THEME_STYLE_ID = THEME_STYLE_ID;
-exports.ThemeEditor = ThemeEditor;
-exports.applyFontVars = applyFontVars;
-exports.applyThemeVars = applyThemeVars;
-exports.clearFontVars = clearFontVars;
-exports.clearThemeVars = clearThemeVars;
-exports.themeCssVars = themeCssVars;
-exports.themeMetaVars = themeMetaVars;
-exports.toHslTriplet = toHslTriplet;
-//# sourceMappingURL=chunk-N5WJBQYF.cjs.map
-//# sourceMappingURL=chunk-N5WJBQYF.cjs.map

package/dist/chunk-N5WJBQYF.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/theme/color.ts","../src/theme/tokens.ts","../src/theme/ThemeEditor.tsx"],"names":["useState","useEffect","jsxs","jsx","RotateCcw","Input","matchFontPairing","FONT_PAIRINGS","Card","CardHeader","CardTitle","CardContent","Check","Save","ChevronDown","Palette"],"mappings":"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","file":"chunk-N5WJBQYF.cjs","sourcesContent":["/**\n * Colour math for the theme store: parse the formats a theme value comes in (hex, `rgb()`,\n * `hsl()`, a raw `H S% L%` triplet) and convert between them.\n *\n * Pure functions, no DOM. A theme value is kept in whatever format the host wrote it (Clarum's\n * `@theme` is hex, the ARBI app's stylesheet is triplets); these helpers turn it into the two\n * formats the document needs: the raw triplet the blocks contract reads (`hsl(var(--primary))`)\n * and a full colour for Tailwind's `--color-*` map.\n */\n\nexport interface Rgb {\n  /** 0..255 */\n  r: number\n  g: number\n  b: number\n}\n\nexport interface Hsl {\n  /** Hue in degrees, 0..360. */\n  h: number\n  /** Saturation, 0..100. */\n  s: number\n  /** Lightness, 0..100. */\n  l: number\n}\n\nconst NUM = String.raw`-?\\d*\\.?\\d+(?:e-?\\d+)?`\nconst TRIPLET_RE = new RegExp(String.raw`^(${NUM})(?:deg)?\\s+(${NUM})%\\s+(${NUM})%$`)\nconst HSL_FN_RE = new RegExp(\n  String.raw`^hsla?\\(\\s*(${NUM})(?:deg)?[\\s,]+(${NUM})%[\\s,]+(${NUM})%\\s*(?:[,/]\\s*${NUM}%?\\s*)?\\)$`,\n  'i'\n)\nconst RGB_FN_RE = new RegExp(\n  String.raw`^rgba?\\(\\s*(${NUM})[\\s,]+(${NUM})[\\s,]+(${NUM})\\s*(?:[,/]\\s*${NUM}%?\\s*)?\\)$`,\n  'i'\n)\n\n/** True for a raw `H S% L%` triplet (the blocks contract's format, no `hsl()`). */\nexport function isHslTriplet(value: string): boolean {\n  return TRIPLET_RE.test(value.trim())\n}\n\nconst clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n))\n\n/** Round to one decimal and drop a trailing `.0`, so `50.0` prints as `50`. */\nconst fmt = (n: number) => String(Math.round(n * 10) / 10)\n\nexport function rgbToHsl({ r, g, b }: Rgb): Hsl {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const l = (max + min) / 2\n  const d = max - min\n  let h = 0\n  let s = 0\n  if (d !== 0) {\n    s = d / (1 - Math.abs(2 * l - 1))\n    if (max === rn) h = 60 * (((gn - bn) / d) % 6)\n    else if (max === gn) h = 60 * ((bn - rn) / d + 2)\n    else h = 60 * ((rn - gn) / d + 4)\n  }\n  if (h < 0) h += 360\n  return { h, s: s * 100, l: l * 100 }\n}\n\nexport function hslToRgb({ h, s, l }: Hsl): Rgb {\n  const sn = clamp(s, 0, 100) / 100\n  const ln = clamp(l, 0, 100) / 100\n  const hn = ((h % 360) + 360) % 360\n  const c = (1 - Math.abs(2 * ln - 1)) * sn\n  const x = c * (1 - Math.abs(((hn / 60) % 2) - 1))\n  const m = ln - c / 2\n  const [r1, g1, b1] =\n    hn < 60\n      ? [c, x, 0]\n      : hn < 120\n        ? [x, c, 0]\n        : hn < 180\n          ? [0, c, x]\n          : hn < 240\n            ? [0, x, c]\n            : hn < 300\n              ? [x, 0, c]\n              : [c, 0, x]\n  return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 }\n}\n\nfunction parseHex(value: string): Rgb | null {\n  let hex = value.slice(1)\n  if (hex.length === 3 || hex.length === 4) {\n    hex = hex\n      .slice(0, 3)\n      .split('')\n      .map((ch) => ch + ch)\n      .join('')\n  } else if (hex.length === 8) {\n    hex = hex.slice(0, 6)\n  }\n  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return null\n  return {\n    r: parseInt(hex.slice(0, 2), 16),\n    g: parseInt(hex.slice(2, 4), 16),\n    b: parseInt(hex.slice(4, 6), 16),\n  }\n}\n\n/**\n * Parse a theme colour value to RGB: `#rgb`, `#rrggbb` (alpha ignored), `rgb()`/`rgba()`,\n * `hsl()`/`hsla()` and a raw triplet. Anything else (`oklch()`, a `var()`) is `null`.\n */\nexport function parseColor(value: string): Rgb | null {\n  const c = value.trim()\n  if (c.startsWith('#')) return parseHex(c)\n  const rgb = RGB_FN_RE.exec(c)\n  if (rgb) return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]) }\n  const hsl = HSL_FN_RE.exec(c) ?? TRIPLET_RE.exec(c)\n  if (hsl) return hslToRgb({ h: Number(hsl[1]), s: Number(hsl[2]), l: Number(hsl[3]) })\n  return null\n}\n\n/** HSL of a colour value, or `null` when it cannot be parsed. A triplet keeps its exact numbers. */\nexport function parseHsl(value: string): Hsl | null {\n  const c = value.trim()\n  const m = TRIPLET_RE.exec(c) ?? HSL_FN_RE.exec(c)\n  if (m) return { h: Number(m[1]), s: Number(m[2]), l: Number(m[3]) }\n  const rgb = parseColor(c)\n  return rgb ? rgbToHsl(rgb) : null\n}\n\nconst hex2 = (n: number) =>\n  Math.round(clamp(n, 0, 255))\n    .toString(16)\n    .padStart(2, '0')\n\nexport function rgbToHex({ r, g, b }: Rgb): string {\n  return `#${hex2(r)}${hex2(g)}${hex2(b)}`\n}\n\nexport function hslToHex(hsl: Hsl): string {\n  return rgbToHex(hslToRgb(hsl))\n}\n\n/** `#rrggbb` of any parseable value (what `<input type=\"color\">` needs); `fallback` otherwise. */\nexport function toHex(value: string, fallback = '#000000'): string {\n  const rgb = parseColor(value)\n  return rgb ? rgbToHex(rgb) : fallback\n}\n\n/** `H S% L%` of an HSL value, one decimal. */\nexport function formatHslTriplet({ h, s, l }: Hsl): string {\n  return `${fmt(((h % 360) + 360) % 360)} ${fmt(s)}% ${fmt(l)}%`\n}\n\n/**\n * Convert a colour to the blocks contract's `H S% L%` triplet.\n *\n * An existing triplet passes through untouched (so a host that seeds its stylesheet's exact\n * triplets gets a byte-identical no-op). Hex, `rgb()` and `hsl()` convert with one decimal, the\n * precision of the stylesheets. Values it cannot parse (`oklch()`, `var()`) are returned unchanged.\n */\nexport function toHslTriplet(color: string): string {\n  const c = color.trim()\n  if (TRIPLET_RE.test(c)) return c\n  const hsl = parseHsl(c)\n  return hsl ? formatHslTriplet(hsl) : c\n}\n\n/**\n * The full colour for a Tailwind `--color-*` variable: a raw triplet is wrapped as `hsl(...)`, any\n * other value (hex, `rgb()`, `oklch()`) is already a colour and is kept as written.\n */\nexport function toCssColor(value: string): string {\n  const c = value.trim()\n  return TRIPLET_RE.test(c) ? `hsl(${c})` : c\n}\n","/**\n * The theme-token model. Firm-agnostic: the token *catalog*, default values and\n * presets are supplied by the consuming app (via {@link createThemeStore}); this\n * module owns the shared types and the logic for writing tokens onto the live\n * document.\n *\n * **One value, both outputs.** The blocks token contract is raw HSL triplets\n * (`--primary: 228 50% 25%`, read as `hsl(var(--primary))`), and Tailwind's\n * `--color-*` map is derived from them. A host may theme either half (Clarum's\n * `@theme` is hex `--color-*`; the ARBI app's stylesheet is triplets), so every\n * token is written to BOTH from the one value ({@link themeCssVars}): the triplet\n * and the full colour. Tailwind resolves a `--color-*` where it is declared, so a\n * theme that wrote only the triplets would leave `bg-primary` behind, and one\n * that wrote only `--color-*` would leave every part that reads a triplet\n * directly (step bar, charts, calendar, grid, canvas) on the package defaults.\n *\n * Where the variables are written is the emit model, {@link ThemeEmitMode}:\n *\n * - `'flat'` (default): inline custom properties on `<html>`, plus `--font-*` /\n *   `--radius`. Inline styles override the stylesheet defaults, so an edit\n *   previews live across the whole app and reverts cleanly. No dark variant.\n *\n * - `'cssVars'`: an injected `<style id=\"arbi-theme-vars\">` appended to `<head>`\n *   with a `:root { light } / :root.dark { dark }` structure, so an app with a\n *   real `.dark` variant keeps it. The injected sheet is *unlayered*, so it wins\n *   over the app's own `@layer base` colours at equal specificity.\n */\nimport { toCssColor, toHslTriplet } from './color'\n\nexport { toHslTriplet }\n\nexport interface ColorToken {\n  /** Key without a prefix, e.g. \"primary\" → `--primary` and `--color-primary`. */\n  key: string\n  label: string\n  /** Grouping id for the panel layout (e.g. \"shadcn\" | \"brand\" | \"ai\"). */\n  group: string\n}\n\nexport interface ThemeFonts {\n  display: string\n  sans: string\n}\n\nexport interface ThemeTokens {\n  /** Colour values keyed by token key (hex, `rgb()`, `hsl()` or a raw triplet). */\n  colors: Record<string, string>\n  fonts: ThemeFonts\n  /** Base radius in rem. */\n  radius: number\n}\n\nexport interface ThemePreset {\n  id: string\n  label: string\n  tokens: ThemeTokens\n}\n\n/** Where a theme is written on the document. See the module doc for the models. */\nexport type ThemeEmitMode = 'flat' | 'cssVars'\n\nexport interface ApplyThemeOptions {\n  /** Emit model. Defaults to `'flat'`. */\n  mode?: ThemeEmitMode\n  /**\n   * `cssVars` mode only: dark-variant colour values keyed by token key. Emitted\n   * under `:root.dark`. When omitted, only `:root` is emitted — note that an\n   * overridden light token then also applies in dark (the injected `:root` is\n   * unlayered and beats the app's own `.dark` rules), so a host with a dark mode\n   * MUST supply this for every editable token to keep dark mode intact.\n   */\n  dark?: Record<string, string>\n  /** `flat` mode only: target element. Defaults to `document.documentElement`. */\n  root?: HTMLElement\n}\n\n/** Id of the injected `<style>` that carries the `cssVars`-mode custom properties. */\nexport const THEME_STYLE_ID = 'arbi-theme-vars'\n\n/**\n * The custom properties one set of colour values paints: for every key, the raw triplet\n * (`--primary: 214 51.7% 11.4%`) and Tailwind's full colour (`--color-primary`: hex as written, or\n * `hsl(<triplet>)` for a triplet value), from the one value. A value the converter does not know\n * (`oklch()`, `var()`) is written unchanged to both, as the contract's full-colour tokens\n * (`--status-*`) expect.\n */\nexport function themeCssVars(colors: Record<string, string>): Record<string, string> {\n  const vars: Record<string, string> = {}\n  for (const [key, value] of Object.entries(colors)) {\n    vars[`--${key}`] = toHslTriplet(value)\n    vars[`--color-${key}`] = toCssColor(value)\n  }\n  return vars\n}\n\n/** The typography and shape variables of a theme. */\nexport function themeMetaVars(\n  theme: Pick<ThemeTokens, 'fonts' | 'radius'>\n): Record<string, string> {\n  return {\n    '--font-display': theme.fonts.display,\n    '--font-sans': theme.fonts.sans,\n    '--radius': `${theme.radius}rem`,\n  }\n}\n\nfunction renderBlock(selector: string, vars: Record<string, string>): string {\n  const body = Object.entries(vars)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n')\n  return `${selector} {\\n${body}\\n}`\n}\n\nfunction emitCssVars(theme: ThemeTokens, dark?: Record<string, string>): void {\n  if (typeof document === 'undefined') return\n  let css = renderBlock(':root', { ...themeCssVars(theme.colors), ...themeMetaVars(theme) })\n  if (dark) css += `\\n${renderBlock(':root.dark', themeCssVars(dark))}`\n  let style = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null\n  if (!style) {\n    style = document.createElement('style')\n    style.id = THEME_STYLE_ID\n    document.head.appendChild(style)\n  }\n  style.textContent = css\n}\n\nfunction removeCssVars(): void {\n  if (typeof document === 'undefined') return\n  document.getElementById(THEME_STYLE_ID)?.remove()\n}\n\nfunction normalizeOptions(optionsOrRoot: ApplyThemeOptions | HTMLElement): ApplyThemeOptions {\n  if (typeof HTMLElement !== 'undefined' && optionsOrRoot instanceof HTMLElement) {\n    return { root: optionsOrRoot }\n  }\n  return optionsOrRoot as ApplyThemeOptions\n}\n\n/**\n * Write a theme onto the live document: every colour as both its triplet and its `--color-*`\n * (see {@link themeCssVars}), plus `--font-*` / `--radius`.\n *\n * In `flat` mode (default) inline on `document.documentElement` (or a supplied root). In `cssVars`\n * mode into an injected `<style#arbi-theme-vars>` with a `:root.dark` block for `dark` (see the\n * module doc). The legacy `applyThemeVars(theme, rootElement)` call form still works.\n */\nexport function applyThemeVars(\n  theme: ThemeTokens,\n  optionsOrRoot: ApplyThemeOptions | HTMLElement = {}\n): void {\n  const { mode = 'flat', dark, root = document.documentElement } = normalizeOptions(optionsOrRoot)\n\n  if (mode === 'cssVars') {\n    emitCssVars(theme, dark)\n    return\n  }\n\n  for (const [name, value] of Object.entries({\n    ...themeCssVars(theme.colors),\n    ...themeMetaVars(theme),\n  })) {\n    root.style.setProperty(name, value)\n  }\n}\n\n/**\n * Set ONLY the typography vars, as inline styles on the root element.\n *\n * Typography is often chosen independently of colour — an app may let a reader\n * pick a typeface while its palette is owned elsewhere. Writing the two vars\n * inline (rather than through `applyThemeVars`) keeps this orthogonal in two\n * ways: it touches no colour or radius token, and an inline style outranks any\n * selector, so a font choice survives a `cssVars`-mode theme that emits its own\n * `:root` block (the ARBI studio's theme editor does exactly that).\n */\nexport function applyFontVars(\n  fonts: ThemeFonts,\n  root: HTMLElement = document.documentElement\n): void {\n  root.style.setProperty('--font-display', fonts.display)\n  root.style.setProperty('--font-sans', fonts.sans)\n}\n\n/** Undo {@link applyFontVars}, reverting to the stylesheet's own font tokens. */\nexport function clearFontVars(root: HTMLElement = document.documentElement): void {\n  root.style.removeProperty('--font-display')\n  root.style.removeProperty('--font-sans')\n}\n\n/**\n * Remove a theme's overrides, reverting to the stylesheet defaults.\n *\n * In `flat` mode removes the inline overrides (both halves) for the theme's keys. In `cssVars`\n * mode removes the injected `<style#arbi-theme-vars>` in full (restoring the app's own colours\n * exactly).\n */\nexport function clearThemeVars(\n  theme: ThemeTokens,\n  optionsOrRoot: ApplyThemeOptions | HTMLElement = {}\n): void {\n  const { mode = 'flat', root = document.documentElement } = normalizeOptions(optionsOrRoot)\n\n  if (mode === 'cssVars') {\n    removeCssVars()\n    return\n  }\n\n  for (const key of Object.keys(theme.colors)) {\n    root.style.removeProperty(`--${key}`)\n    root.style.removeProperty(`--color-${key}`)\n  }\n  root.style.removeProperty('--font-display')\n  root.style.removeProperty('--font-sans')\n  root.style.removeProperty('--radius')\n}\n","/**\n * The one theme editor, shared by every surface. `variant=\"panel\"` is the roomy\n * back-office layout (grouped token cards + a live preview); `variant=\"drawer\"`\n * is the compact slide-over beside the studio canvas; `variant=\"collapsed\"` is\n * the settings-page form: presets and a swatch strip always visible, the colour\n * and typography controls behind a \"Customize\" disclosure in a bounded scroller\n * (the full editor is very tall). All drive the same\n * {@link ThemeBundle} store, so there is a single token model, preset list and\n * apply path. Firm-agnostic: chrome uses only universal surface tokens and the\n * preview renders the theme's own swatches, so it needs no brand-specific\n * component variants.\n */\nimport { useEffect, useState } from 'react'\nimport { RotateCcw, Palette, Save, Check, ChevronDown } from 'lucide-react'\nimport { Card, CardHeader, CardTitle, CardContent, Input } from '@arbidocs/react/ui'\nimport { applyThemeVars } from './tokens'\nimport { FONT_PAIRINGS, matchFontPairing } from './fontPairings'\nimport type { ThemeBundle } from './store'\n\nexport interface ThemeEditorProps {\n  /** The host's theme store bundle (from createThemeStore). */\n  bundle: ThemeBundle\n  variant?: 'panel' | 'drawer' | 'collapsed'\n  /** Firm identity shown in the panel's live-preview header. */\n  preview?: { title: string; subtitle?: string }\n  /** Optional persistence side-channel (e.g. save theme to ARBI); returns a \"via\" label. */\n  onSave?: () => Promise<string | void>\n  /** Stable testid namespace, e.g. \"builder-theme\" | \"studio-theme\". */\n  testIdPrefix?: string\n  /** `collapsed` only: start with the controls open. */\n  defaultOpen?: boolean\n}\n\nexport function ThemeEditor({\n  bundle,\n  variant = 'panel',\n  preview,\n  onSave,\n  testIdPrefix = 'theme',\n  defaultOpen = false,\n}: ThemeEditorProps) {\n  const { useStore, tokens, presets, groupLabels, mode, darkColors } = bundle\n  const colors = useStore((s) => s.colors)\n  const fonts = useStore((s) => s.fonts)\n  const radius = useStore((s) => s.radius)\n  const activePresetId = useStore((s) => s.activePresetId)\n  const setColor = useStore((s) => s.setColor)\n  const setFont = useStore((s) => s.setFont)\n  const setFontPairing = useStore((s) => s.setFontPairing)\n  const setRadius = useStore((s) => s.setRadius)\n  const applyPreset = useStore((s) => s.applyPreset)\n  const reset = useStore((s) => s.reset)\n\n  const [open, setOpen] = useState(defaultOpen)\n  const [saving, setSaving] = useState(false)\n  const [savedVia, setSavedVia] = useState<string | null>(null)\n\n  // Live preview: reflect every token change onto the running app, using the\n  // host's emit mode (flat inline vars, or injected HSL-triplet cssVars).\n  useEffect(() => {\n    applyThemeVars({ colors, fonts, radius }, { mode, dark: darkColors })\n  }, [colors, fonts, radius, mode, darkColors])\n\n  const tid = (suffix: string) => `${testIdPrefix}-${suffix}`\n  const groups = [...new Set(tokens.map((t) => t.group))]\n\n  const save = async () => {\n    if (!onSave) return\n    setSaving(true)\n    try {\n      const via = await onSave()\n      setSavedVia(typeof via === 'string' ? via : 'saved')\n    } catch {\n      // The host's onSave reports the failure (notify); never show a false \"saved\".\n      setSavedVia(null)\n    } finally {\n      setSaving(false)\n    }\n  }\n\n  // ── Presets row ────────────────────────────────────────────────────────────\n  const Presets = (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      {presets.map((p) => (\n        <button\n          key={p.id}\n          type=\"button\"\n          onClick={() => applyPreset(p.id)}\n          className={`rounded-full border px-3 py-1 text-xs font-medium transition-colors ${\n            activePresetId === p.id\n              ? 'border-primary bg-primary text-primary-foreground'\n              : 'border-border text-foreground hover:border-primary'\n          }`}\n          data-testid={tid(`preset-${p.id}`)}\n        >\n          {p.label}\n        </button>\n      ))}\n      <button\n        type=\"button\"\n        onClick={reset}\n        className=\"ml-auto inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground\"\n        data-testid={tid('reset')}\n      >\n        <RotateCcw className=\"size-3\" /> Reset\n      </button>\n    </div>\n  )\n\n  // ── A single colour control ─────────────────────────────────────────────────\n  // A plain function (not a component) so it inlines into the parent tree: this\n  // avoids remounting the inputs on every keystroke (which would drop focus).\n  const colorRow = (k: string, label: string) => (\n    <div key={k} className=\"flex items-center gap-3\">\n      <input\n        type=\"color\"\n        value={colors[k] ?? '#000000'}\n        onChange={(e) => setColor(k, e.target.value)}\n        className=\"size-9 shrink-0 cursor-pointer rounded-md border border-border bg-transparent\"\n        aria-label={label}\n        data-testid={tid(`color-${k}`)}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <span className=\"block text-xs text-muted-foreground\">{label}</span>\n        <Input\n          value={colors[k] ?? ''}\n          onChange={(e) => setColor(k, e.target.value)}\n          aria-label={`${label} hex value`}\n          className=\"bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring h-7 font-mono text-xs\"\n          data-testid={tid(`hex-${k}`)}\n        />\n      </div>\n    </div>\n  )\n\n  // ── Typography + radius ─────────────────────────────────────────────────────\n  // The pairing picker is the primary control; the raw stacks below stay for\n  // anyone who needs a face the catalog doesn't carry. Editing a stack by hand\n  // drops the selection to \"Custom\" rather than silently mismatching.\n  const activePairing = matchFontPairing(fonts)\n  const Typography = (\n    <div className=\"space-y-4\">\n      <div>\n        <span className=\"block text-xs text-muted-foreground\">Typeface</span>\n        <select\n          value={activePairing?.id ?? ''}\n          onChange={(e) => setFontPairing(e.target.value)}\n          aria-label=\"Typeface\"\n          className=\"mt-1 h-8 w-full rounded-md border border-border bg-card px-2 text-xs text-foreground focus-visible:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          data-testid={tid('font-pairing')}\n        >\n          {!activePairing && <option value=\"\">Custom</option>}\n          {FONT_PAIRINGS.map((pairing) => (\n            <option key={pairing.id} value={pairing.id}>\n              {pairing.label}\n            </option>\n          ))}\n        </select>\n        <p className=\"mt-1 text-xs text-muted-foreground\">\n          {activePairing?.description ?? 'Hand-edited font stacks.'}\n        </p>\n      </div>\n      <div>\n        <span className=\"block text-xs text-muted-foreground\">Display font stack</span>\n        <Input\n          value={fonts.display}\n          onChange={(e) => setFont('display', e.target.value)}\n          aria-label=\"Display font stack\"\n          className=\"bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs\"\n          data-testid={tid('font-display')}\n        />\n      </div>\n      <div>\n        <span className=\"block text-xs text-muted-foreground\">Body font stack</span>\n        <Input\n          value={fonts.sans}\n          onChange={(e) => setFont('sans', e.target.value)}\n          aria-label=\"Body font stack\"\n          className=\"bg-card placeholder:text-muted-foreground focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring mt-1 font-mono text-xs\"\n          data-testid={tid('font-sans')}\n        />\n      </div>\n      <div>\n        <span className=\"block text-xs text-muted-foreground\">Base radius — {radius}rem</span>\n        <input\n          type=\"range\"\n          min={0}\n          max={1.5}\n          step={0.125}\n          value={radius}\n          onChange={(e) => setRadius(Number(e.target.value))}\n          aria-label=\"Base radius\"\n          className=\"mt-2 w-full accent-[color:var(--color-primary)]\"\n          data-testid={tid('radius')}\n        />\n      </div>\n    </div>\n  )\n\n  // ── Live preview (panel only) — renders the theme's own swatches ────────────\n  const Preview = (\n    <Card variant=\"elevated\" className=\"rounded-lg\" data-testid={tid('preview')}>\n      <CardHeader>\n        <CardTitle className=\"text-base\">Live preview</CardTitle>\n      </CardHeader>\n      <CardContent className=\"space-y-3\">\n        <div className=\"rounded-[var(--radius)] bg-primary p-4 text-primary-foreground\">\n          <p className=\"font-display text-lg font-semibold\">{preview?.title ?? 'Preview'}</p>\n          {preview?.subtitle && <p className=\"text-xs opacity-80\">{preview.subtitle}</p>}\n        </div>\n        <div className=\"grid grid-cols-6 gap-1.5\">\n          {tokens.map((t) => (\n            <div\n              key={t.key}\n              title={t.label}\n              className=\"aspect-square rounded-md border border-border\"\n              style={{ background: `var(--color-${t.key})` }}\n            />\n          ))}\n        </div>\n        <div className=\"rounded-[var(--radius)] border border-border bg-[color:var(--color-ai-accent-soft,var(--color-accent))] p-3\">\n          <p className=\"text-sm font-medium text-[color:var(--color-ai-accent,var(--color-primary))]\">\n            AI action surface\n          </p>\n          <p className=\"text-xs text-muted-foreground\">Themed by the AI-kit accent tokens.</p>\n        </div>\n      </CardContent>\n    </Card>\n  )\n\n  const SaveBar = onSave && (\n    <div className=\"mt-6 flex items-center gap-3\">\n      <button\n        type=\"button\"\n        onClick={() => void save()}\n        disabled={saving}\n        className=\"inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60\"\n        data-testid={tid('save')}\n      >\n        {savedVia ? <Check className=\"size-4\" /> : <Save className=\"size-4\" />}\n        {saving ? 'Saving…' : savedVia ? 'Saved' : 'Save theme'}\n      </button>\n      {savedVia && (\n        <span className=\"text-xs text-muted-foreground\" data-testid={tid('via')}>\n          stored via {savedVia}\n        </span>\n      )}\n    </div>\n  )\n\n  // ── Collapsed layout — settings pages ───────────────────────────────────────\n  if (variant === 'collapsed') {\n    const controlsId = `${testIdPrefix}-controls`\n    return (\n      <div className=\"space-y-3\" data-testid={testIdPrefix}>\n        {Presets}\n        <div className=\"grid grid-cols-8 gap-1.5 @xl:grid-cols-12\" aria-hidden=\"true\">\n          {tokens.slice(0, 12).map((t) => (\n            <div\n              key={t.key}\n              title={t.label}\n              className=\"aspect-square rounded-md border border-border\"\n              style={{ background: `var(--color-${t.key})` }}\n            />\n          ))}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setOpen((o) => !o)}\n          aria-expanded={open}\n          aria-controls={controlsId}\n          className=\"inline-flex items-center gap-1.5 text-sm font-medium text-foreground hover:text-primary\"\n          data-testid={tid('customize')}\n        >\n          <ChevronDown className={`size-4 transition-transform ${open ? 'rotate-180' : ''}`} />\n          Customize colours and type\n        </button>\n        {open && (\n          <div\n            id={controlsId}\n            className=\"max-h-[28rem] overflow-y-auto rounded-md border border-border bg-card p-4\"\n            data-testid={tid('controls')}\n          >\n            <p className=\"mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground\">\n              Colours\n            </p>\n            <div className=\"grid gap-3 @xl:grid-cols-2\">\n              {tokens.map((t) => colorRow(t.key, t.label))}\n            </div>\n            <p className=\"mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground\">\n              Typography &amp; shape\n            </p>\n            {Typography}\n          </div>\n        )}\n        {SaveBar}\n      </div>\n    )\n  }\n\n  // ── Drawer layout — compact, single column ──────────────────────────────────\n  if (variant === 'drawer') {\n    return (\n      <div className=\"flex h-full flex-col overflow-y-auto bg-card p-5\" data-testid={testIdPrefix}>\n        <div className=\"mb-4 flex items-center justify-between\">\n          <h2 className=\"font-display text-lg font-semibold text-foreground\">Theme</h2>\n        </div>\n        {Presets}\n        <p className=\"mt-5 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground\">\n          Colours\n        </p>\n        <div className=\"space-y-3\">{tokens.map((t) => colorRow(t.key, t.label))}</div>\n        <p className=\"mt-6 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground\">\n          Typography &amp; shape\n        </p>\n        {Typography}\n        {SaveBar}\n      </div>\n    )\n  }\n\n  // ── Panel layout — grouped cards + live preview ─────────────────────────────\n  return (\n    <div className=\"grid gap-6 lg:grid-cols-[1fr_320px]\" data-testid={testIdPrefix}>\n      <div className=\"space-y-6\">\n        <Card variant=\"elevated\" className=\"rounded-lg\">\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2 text-base\">\n              <Palette className=\"size-4 text-[color:var(--color-primary)]\" /> Presets\n            </CardTitle>\n          </CardHeader>\n          <CardContent>{Presets}</CardContent>\n        </Card>\n\n        {groups.map((group) => (\n          <Card\n            key={group}\n            variant=\"elevated\"\n            className=\"rounded-lg\"\n            data-testid={tid(`group-${group}`)}\n          >\n            <CardHeader>\n              <CardTitle className=\"text-base\">{groupLabels[group] ?? group}</CardTitle>\n            </CardHeader>\n            <CardContent className=\"grid gap-3 @xl:grid-cols-2\">\n              {tokens.filter((t) => t.group === group).map((t) => colorRow(t.key, t.label))}\n            </CardContent>\n          </Card>\n        ))}\n\n        <Card variant=\"elevated\" className=\"rounded-lg\">\n          <CardHeader>\n            <CardTitle className=\"text-base\">Typography &amp; shape</CardTitle>\n          </CardHeader>\n          <CardContent>{Typography}</CardContent>\n        </Card>\n        {SaveBar}\n      </div>\n\n      <div className=\"lg:sticky lg:top-4 lg:self-start\">{Preview}</div>\n    </div>\n  )\n}\n"]}