@arbidocs/blocks 0.5.22 → 0.5.24

package/dist/chunk-IJJKUTKM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DataTableBlock.tsx","../src/components/MetricCard.tsx","../src/components/StatGroup.tsx"],"names":["jsxs","jsx","cn"],"mappings":"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","file":"chunk-IJJKUTKM.js","sourcesContent":["/**\n * A **serializable** data table for the Puck builder.\n *\n * The library's developer-facing {@link DataTable} is driven by `Column<T>` whose\n * `header`/`render` are React nodes and functions — powerful, but non-serializable,\n * so it can never be a Puck block. `DataTableBlock` closes that gap with a flat,\n * JSON-safe schema (string headers, string field keys, string cells) and rebuilds\n * the non-serializable `Column<Row>[]` internally, rendering through the very same\n * {@link DataTable} so it inherits the library's markup and tokens verbatim.\n */\nimport { DataTable, type Column } from './DataTable'\n\nexport interface DataTableBlockColumn {\n  /** Column heading text. */\n  header: string\n  /** Key used to look a cell up in each row record. */\n  field: string\n  /** Cell/heading alignment. */\n  align?: 'left' | 'right' | 'center'\n}\n\nexport interface DataTableBlockProps {\n  /** Serializable column schema. */\n  columns: DataTableBlockColumn[]\n  /** One record per row; cells are looked up by each column's `field`. */\n  rows: Array<Record<string, string>>\n  /** Optional caption rendered above the table. */\n  caption?: string\n  /** Empty-state title shown when there are no rows. */\n  emptyText?: string\n  /** testid area prefix; also set on the wrapper element. */\n  testId?: string\n}\n\n/** A row wrapper so {@link DataTable} gets a stable id without polluting the record. */\ninterface TableRowData {\n  __id: string\n  cells: Record<string, string>\n}\n\n/**\n * Renders a {@link DataTable} from a flat, serializable schema. Columns are mapped\n * to `Column<TableRowData>[]` (header string, positional-stable key, alignment) and\n * each cell is resolved by `field`; rows carry a synthetic id for React keys/testids.\n */\nexport function DataTableBlock({ columns, rows, caption, emptyText, testId }: DataTableBlockProps) {\n  const area = testId ?? 'data-table-block'\n\n  const tableColumns: Column<TableRowData>[] = columns.map((col, index) => ({\n    key: col.field || `col-${index}`,\n    header: col.header,\n    align: col.align,\n    render: (row) => row.cells[col.field] ?? '',\n  }))\n\n  const tableRows: TableRowData[] = rows.map((cells, index) => ({ __id: String(index), cells }))\n\n  return (\n    <div data-testid={testId}>\n      {caption ? (\n        <p\n          className=\"mb-2 text-sm text-muted-foreground\"\n          data-testid={testId ? `${testId}-caption` : undefined}\n        >\n          {caption}\n        </p>\n      ) : null}\n      <DataTable\n        columns={tableColumns}\n        rows={tableRows}\n        getRowId={(row) => row.__id}\n        area={area}\n        emptyTitle={emptyText}\n      />\n    </div>\n  )\n}\n","import type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { ArrowDownRight, ArrowUpRight } from 'lucide-react'\nimport { Card, cn } from '@arbidocs/react/ui'\nimport { ActionLink } from './ActionLink'\n\nexport interface MetricCardProps {\n  label: ReactNode\n  value: ReactNode\n  icon?: LucideIcon\n  hint?: ReactNode\n  delta?: { value: string; direction: 'up' | 'down'; good?: boolean }\n  /**\n   * Icon accent as a theme colour-token key (e.g. `primary`, `success`, or the host's own brand\n   * token). Resolved to `var(--color-<accent>)` at render. `'default'` inherits `foreground`.\n   */\n  accent?: string\n  /** Show a placeholder instead of the value (the figure is still being fetched). */\n  isLoading?: boolean\n  /** Makes the tile a real link (ctrl/cmd-click works). */\n  href?: string\n  /** Click handler; with `href`, a plain click calls it instead of navigating. */\n  onSelect?: () => void\n  className?: string\n  testId?: string\n}\n\n/** The one true KPI tile. Used across every dashboard and module header. */\nexport function MetricCard({\n  label,\n  value,\n  icon: Icon,\n  hint,\n  delta,\n  accent = 'default',\n  isLoading = false,\n  href,\n  onSelect,\n  className,\n  testId,\n}: MetricCardProps) {\n  const accentStyle =\n    accent && accent !== 'default' ? { color: `var(--color-${accent})` } : undefined\n  const deltaGood = delta?.good ?? delta?.direction === 'up'\n  const isInteractive = Boolean(href || onSelect)\n  const card = (\n    <Card\n      variant=\"elevated\"\n      className={cn('card-hover min-w-0 rounded-xl p-5', className)}\n      data-testid={isInteractive ? undefined : testId}\n      aria-busy={isLoading || undefined}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <p className=\"min-w-0 text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </p>\n        {Icon && <Icon className=\"size-4 shrink-0\" style={accentStyle} />}\n      </div>\n      {isLoading ? (\n        <div\n          className=\"mt-2 h-8 w-20 animate-pulse rounded bg-muted\"\n          data-slot=\"metric-card-skeleton\"\n        />\n      ) : (\n        <p\n          className=\"mt-2 font-display text-2xl font-semibold tracking-tight [overflow-wrap:anywhere]\"\n          data-testid={testId && `${testId}-value`}\n        >\n          {value}\n        </p>\n      )}\n      <div className=\"mt-1 flex items-center gap-2\">\n        {delta && !isLoading && (\n          <span\n            className={cn(\n              'inline-flex items-center gap-0.5 text-xs font-medium',\n              deltaGood ? 'text-success' : 'text-destructive'\n            )}\n          >\n            {delta.direction === 'up' ? (\n              <ArrowUpRight className=\"size-3\" />\n            ) : (\n              <ArrowDownRight className=\"size-3\" />\n            )}\n            {delta.value}\n          </span>\n        )}\n        {hint && <span className=\"text-xs text-muted-foreground\">{hint}</span>}\n      </div>\n    </Card>\n  )\n  if (!isInteractive) return card\n  return (\n    <ActionLink\n      href={href}\n      onSelect={onSelect}\n      className=\"block rounded-xl text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n      data-testid={testId}\n    >\n      {card}\n    </ActionLink>\n  )\n}\n","import { cn } from '@arbidocs/react/ui'\n\nexport interface StatItem {\n  value: string\n  label: string\n  /** Optional caption under the label (e.g. a qualifier or unit). */\n  sub?: string\n}\n\nexport interface StatGroupProps {\n  items: StatItem[]\n  testId?: string\n}\n\nconst GRID: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-2 sm:grid-cols-3',\n  4: 'grid-cols-2 lg:grid-cols-4',\n}\n\n/** Big-number stat group — headline metrics with captions. */\nexport function StatGroup({ items, testId }: StatGroupProps) {\n  const list = items ?? []\n  const cols = GRID[Math.min(list.length, 4)] ?? GRID[4]\n  return (\n    <dl className={cn('grid gap-8', cols)} data-testid={testId}>\n      {list.map((item, i) => (\n        <div key={i} className=\"min-w-0 text-center\" data-testid={testId && `${testId}-item-${i}`}>\n          <dt className=\"sr-only\">{item.label}</dt>\n          <dd className=\"text-4xl font-semibold tracking-tight [overflow-wrap:anywhere] sm:text-5xl\">\n            {item.value}\n          </dd>\n          <p className=\"mt-2 text-sm text-muted-foreground\">{item.label}</p>\n          {item.sub && <p className=\"mt-1 text-xs text-muted-foreground/80\">{item.sub}</p>}\n        </div>\n      ))}\n    </dl>\n  )\n}\n"]}

package/dist/{chunk-ZX663X3X.cjs → chunk-KNRAKOCO.cjs}

@@ -1,14 +1,15 @@
 "use client";
 'use strict';
 
+var chunkKUQOHPKP_cjs = require('./chunk-KUQOHPKP.cjs');
 var chunkNWNVWO6L_cjs = require('./chunk-NWNVWO6L.cjs');
 var chunkUFEXJIEY_cjs = require('./chunk-UFEXJIEY.cjs');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var react = require('react');
-var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 
 function _interopNamespace(e) {
@@ -31,134 +32,6 @@ function _interopNamespace(e) {
 
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
-// src/theme/tokens.ts
-var THEME_STYLE_ID = "arbi-theme-vars";
-var TRIPLET_RE = /^-?\d+(?:\.\d+)?\s+-?\d+(?:\.\d+)?%\s+-?\d+(?:\.\d+)?%$/;
-function parseRgb(color) {
-  if (color.startsWith("#")) {
-    let hex = color.slice(1);
-    if (hex.length === 3) {
-      hex = hex.split("").map((ch) => ch + ch).join("");
-    }
-    if (hex.length === 6 && /^[0-9a-fA-F]{6}$/.test(hex)) {
-      return {
-        r: parseInt(hex.slice(0, 2), 16),
-        g: parseInt(hex.slice(2, 4), 16),
-        b: parseInt(hex.slice(4, 6), 16)
-      };
-    }
-    return null;
-  }
-  const m = color.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
-  if (m) return { r: Number(m[1]), g: Number(m[2]), b: Number(m[3]) };
-  return null;
-}
-function rgbToHslTriplet(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));
-    switch (max) {
-      case rn:
-        h = 60 * ((gn - bn) / d % 6);
-        break;
-      case gn:
-        h = 60 * ((bn - rn) / d + 2);
-        break;
-      default:
-        h = 60 * ((rn - gn) / d + 4);
-        break;
-    }
-  }
-  if (h < 0) h += 360;
-  return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-}
-function toHslTriplet(color) {
-  const c = color.trim();
-  if (TRIPLET_RE.test(c)) return c;
-  const rgb = parseRgb(c);
-  if (!rgb) return c;
-  return rgbToHslTriplet(rgb.r, rgb.g, rgb.b);
-}
-function renderTripletBlock(colors) {
-  return Object.entries(colors).map(([key, value]) => `  --${key}: ${toHslTriplet(value)};`).join("\n");
-}
-function emitCssVars(theme, dark) {
-  if (typeof document === "undefined") return;
-  const meta = [
-    `  --font-display: ${theme.fonts.display};`,
-    `  --font-sans: ${theme.fonts.sans};`,
-    `  --radius: ${theme.radius}rem;`
-  ].join("\n");
-  let css = `:root {
-${renderTripletBlock(theme.colors)}
-${meta}
-}`;
-  if (dark) {
-    css += `
-:root.dark {
-${renderTripletBlock(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 [key, value] of Object.entries(theme.colors)) {
-    root.style.setProperty(`--color-${key}`, value);
-  }
-  root.style.setProperty("--font-display", theme.fonts.display);
-  root.style.setProperty("--font-sans", theme.fonts.sans);
-  root.style.setProperty("--radius", `${theme.radius}rem`);
-}
-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(`--color-${key}`);
-  }
-  root.style.removeProperty("--font-display");
-  root.style.removeProperty("--font-sans");
-  root.style.removeProperty("--radius");
-}
 function createThemeStore(config) {
   const { defaultTheme, presets, storageKey } = config;
   const useStore = zustand.create()(
@@ -204,295 +77,7 @@ function createThemeStore(config) {
 }
 function applyStoredTheme(bundle) {
   const { colors, fonts, radius } = bundle.useStore.getState();
-  applyThemeVars({ colors, fonts, radius }, { mode: bundle.mode, dark: bundle.darkColors });
-}
-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 })
-  ] });
+  chunkKUQOHPKP_cjs.applyThemeVars({ colors, fonts, radius }, { mode: bundle.mode, dark: bundle.darkColors });
 }
 function SectionHeading({
   eyebrow,
@@ -1654,27 +1239,20 @@ exports.RichTextBlock = RichTextBlock;
 exports.SectionHeading = SectionHeading;
 exports.Spacer = Spacer;
 exports.Steps = Steps;
-exports.THEME_STYLE_ID = THEME_STYLE_ID;
 exports.Tabs = Tabs;
 exports.TeamGrid = TeamGrid;
 exports.Testimonial = Testimonial;
 exports.TestimonialGrid = TestimonialGrid;
-exports.ThemeEditor = ThemeEditor;
 exports.VideoEmbed = VideoEmbed;
-exports.applyFontVars = applyFontVars;
 exports.applyStoredTheme = applyStoredTheme;
-exports.applyThemeVars = applyThemeVars;
 exports.asAssetRef = asAssetRef;
 exports.assetRefId = assetRefId;
-exports.clearFontVars = clearFontVars;
-exports.clearThemeVars = clearThemeVars;
 exports.createThemeStore = createThemeStore;
 exports.formatIndex = formatIndex;
 exports.isAssetRef = isAssetRef;
 exports.toEmbedUrl = toEmbedUrl;
-exports.toHslTriplet = toHslTriplet;
 exports.useAssetRenderer = useAssetRenderer;
 exports.useAssetResolverActive = useAssetResolverActive;
 exports.useEditorialTone = useEditorialTone;
-//# sourceMappingURL=chunk-ZX663X3X.cjs.map
-//# sourceMappingURL=chunk-ZX663X3X.cjs.map
+//# sourceMappingURL=chunk-KNRAKOCO.cjs.map
+//# sourceMappingURL=chunk-KNRAKOCO.cjs.map