@arbidocs/blocks 0.5.63 → 0.5.65

package/dist/chunk-C2S246BV.js

@@ -0,0 +1,1225 @@
+"use client";
+import { DEFAULT_THEME_PREVIEW_LABELS, themeMetaVars, themeCssVars, Tabs, applyThemeVars, CONTRAST_PAIRS, contrastIssues, contrastRatio, keysOfInput, toCssColor, toHex, parseColor } from './chunk-J77BACGX.js';
+import { matchFontPairing, FONT_PAIRINGS } from './chunk-NHZK64TQ.js';
+import { Callout } from './chunk-UJE32SST.js';
+import { Sidebar } from './chunk-6QZ35CTZ.js';
+import { Chart } from './chunk-WKYKDTNM.js';
+import { ProgressChevronBar, ProgressChevron } from './chunk-LRPGXNMA.js';
+import { ToneBadge } from './chunk-5LXQPP2K.js';
+import { useMemo, useState, useEffect, useId } from 'react';
+import { Home, Inbox, FileText, Undo2, Redo2, RotateCcw, AlertTriangle, Wand2, Check, ChevronDown, Save, Bell } from 'lucide-react';
+import { cn, Button, Input, Card, CardHeader, CardTitle, CardContent } from '@arbidocs/react/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var noop = () => void 0;
+function radiusAliased() {
+  if (typeof document === "undefined" || typeof getComputedStyle !== "function") return false;
+  const root = getComputedStyle(document.documentElement);
+  const base = root.getPropertyValue("--radius").trim();
+  return base !== "" && root.getPropertyValue("--radius-md").trim() === base;
+}
+function ThemePreview({
+  colors,
+  fonts,
+  radius,
+  scheme,
+  highlight = null,
+  compact = false,
+  labels: labelOverrides,
+  title,
+  subtitle,
+  testId = "theme-preview"
+}) {
+  const labels = { ...DEFAULT_THEME_PREVIEW_LABELS, ...labelOverrides };
+  const aliased = useMemo(radiusAliased, []);
+  const style = useMemo(() => {
+    const vars = {
+      ...themeCssVars(colors),
+      ...themeMetaVars({ fonts, radius })
+    };
+    if (aliased) {
+      vars["--radius-sm"] = `${radius}rem`;
+      vars["--radius-md"] = `${radius}rem`;
+    }
+    return vars;
+  }, [colors, fonts, radius, aliased]);
+  const part = (id, children, className) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-preview-part": id,
+      "data-highlighted": highlight?.has(id) || void 0,
+      className: cn(
+        "min-w-0 rounded-[calc(var(--radius)+4px)] transition-opacity duration-150 motion-reduce:transition-none",
+        highlight && !highlight.has(id) && "opacity-30",
+        highlight?.has(id) && "outline-2 outline-offset-4 outline-dashed outline-foreground",
+        className
+      ),
+      children
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      inert: true,
+      "data-testid": testId,
+      "data-scheme": scheme,
+      style,
+      className: cn(
+        scheme === "dark" && "dark",
+        "@container min-w-0 rounded-lg border border-border bg-background p-4 font-sans text-foreground",
+        highlight?.has("page") && "outline-2 outline-offset-2 outline-dashed outline-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-display text-lg font-semibold leading-tight", children: title ?? labels.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle ?? labels.subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4", !compact && "@lg:grid-cols-2"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
+            part(
+              "buttons",
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsx(Button, { size: "sm", children: labels.primaryAction }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "accent", children: labels.accentAction }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: labels.secondaryAction }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", children: labels.outlineAction }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", variant: "destructive", children: labels.dangerAction })
+              ] })
+            ),
+            part(
+              "input",
+              /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium", children: [
+                labels.fieldLabel,
+                /* @__PURE__ */ jsx(Input, { className: "mt-1", placeholder: labels.fieldPlaceholder, readOnly: true })
+              ] })
+            ),
+            part(
+              "card",
+              /* @__PURE__ */ jsxs(Card, { variant: "outline", className: "border-border shadow-sm", children: [
+                /* @__PURE__ */ jsx(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle, { className: "font-display text-base", children: labels.title }) }),
+                /* @__PURE__ */ jsx(CardContent, { className: "text-sm text-muted-foreground", children: labels.cardBody })
+              ] })
+            ),
+            part(
+              "tabs",
+              /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  items: labels.tabs.map((label, i) => ({
+                    label,
+                    content: i === 0 ? labels.tabBody : ""
+                  }))
+                }
+              )
+            ),
+            part(
+              "sidebar",
+              /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border bg-sidebar p-2", children: [
+                /* @__PURE__ */ jsx(
+                  Sidebar.NavItem,
+                  {
+                    label: labels.nav[0],
+                    icon: /* @__PURE__ */ jsx(Home, { className: "size-4" }),
+                    onSelect: noop,
+                    active: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Sidebar.NavItem,
+                  {
+                    label: labels.nav[1],
+                    icon: /* @__PURE__ */ jsx(Inbox, { className: "size-4" }),
+                    onSelect: noop,
+                    count: 3
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Sidebar.NavItem,
+                  {
+                    label: labels.nav[2],
+                    icon: /* @__PURE__ */ jsx(FileText, { className: "size-4" }),
+                    onSelect: noop
+                  }
+                )
+              ] })
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
+            part(
+              "stepbar",
+              /* @__PURE__ */ jsxs(ProgressChevronBar, { "aria-label": labels.steps.join(", "), children: [
+                /* @__PURE__ */ jsx(ProgressChevron, { kind: "start", phase: "done", children: /* @__PURE__ */ jsx("span", { className: "px-1 text-xs font-medium", children: labels.steps[0] }) }),
+                /* @__PURE__ */ jsx(ProgressChevron, { kind: "start", phase: "running", current: true, children: /* @__PURE__ */ jsx("span", { className: "px-1 text-xs font-medium", children: labels.steps[1] }) }),
+                /* @__PURE__ */ jsx(ProgressChevron, { phase: "blocked", children: /* @__PURE__ */ jsx("span", { className: "px-1 text-xs font-medium", children: labels.steps[2] }) })
+              ] })
+            ),
+            part(
+              "chart",
+              /* @__PURE__ */ jsx(
+                Chart,
+                {
+                  type: "bar",
+                  ariaLabel: labels.chartLabel,
+                  labels: labels.chartMonths,
+                  series: [
+                    { key: "a", label: labels.chartSeries[0], values: [12, 18, 15, 22] },
+                    { key: "b", label: labels.chartSeries[1], values: [9, 14, 13, 19] }
+                  ]
+                }
+              )
+            ),
+            part(
+              "toast",
+              /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 rounded-lg border border-border bg-card p-3 text-foreground shadow-lg", children: [
+                /* @__PURE__ */ jsx(Bell, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground", "aria-hidden": true }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.toastTitle }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: labels.toastBody })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground", children: labels.toastAction })
+              ] })
+            ),
+            part(
+              "badges",
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+                /* @__PURE__ */ jsx(ToneBadge, { tone: "neutral", children: labels.badges.neutral }),
+                /* @__PURE__ */ jsx(ToneBadge, { tone: "success", children: labels.badges.success }),
+                /* @__PURE__ */ jsx(ToneBadge, { tone: "warning", children: labels.badges.warning }),
+                /* @__PURE__ */ jsx(ToneBadge, { tone: "danger", children: labels.badges.danger }),
+                /* @__PURE__ */ jsx(ToneBadge, { tone: "ai", children: labels.badges.ai })
+              ] })
+            ),
+            part(
+              "alerts",
+              /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+                /* @__PURE__ */ jsx(Callout, { variant: "info", body: labels.alerts.info }),
+                /* @__PURE__ */ jsx(Callout, { variant: "danger", body: labels.alerts.danger })
+              ] })
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/theme/editorModel.ts
+var SECTION_COPY = {
+  brand: {
+    title: "Brand",
+    affects: "Affects buttons, links, active tabs, focus rings, the step bar, the first chart series and the type."
+  },
+  surfaces: {
+    title: "Surfaces",
+    affects: "Affects the page, cards, menus, borders, fields, the sidebar and hover highlights."
+  },
+  text: {
+    title: "Text and readability",
+    affects: "Affects every text colour. Pairs below the WCAG AA contrast level are flagged here."
+  },
+  status: {
+    title: "Status",
+    affects: "Affects error, warning and success messages, badges and alerts."
+  },
+  charts: {
+    title: "Charts",
+    affects: "Affects the series colours of charts and dashboards."
+  },
+  advanced: {
+    title: "Advanced",
+    affects: "Set any single colour by hand. A colour you set stops following the brand inputs until you reset it."
+  }
+};
+var FONT_DISPLAY = "font-display";
+var FONT_SANS = "font-sans";
+var RADIUS = "radius";
+var STATUS = (hue) => ["bg", "text", "border", "solid", "text-strong"].map((p) => `${hue}-${p}`);
+var PART_TOKENS = {
+  page: ["background", "foreground", FONT_SANS],
+  buttons: [
+    "primary",
+    "primary-foreground",
+    "ai-accent",
+    "ai-accent-foreground",
+    "muted",
+    "foreground",
+    "border",
+    "background",
+    "destructive",
+    "destructive-foreground",
+    "ring",
+    RADIUS,
+    FONT_SANS
+  ],
+  input: ["input", "background", "foreground", "muted-foreground", "ring", RADIUS],
+  card: ["card", "card-foreground", "border", "muted-foreground", FONT_DISPLAY, RADIUS],
+  tabs: ["primary", "foreground", "muted-foreground", "border", "ring"],
+  sidebar: [
+    "sidebar",
+    "sidebar-foreground",
+    "sidebar-muted",
+    "sidebar-accent",
+    "sidebar-accent-foreground",
+    "sidebar-border",
+    "sidebar-primary",
+    "accent",
+    "accent-foreground",
+    "muted",
+    "muted-foreground"
+  ],
+  stepbar: ["wf-start", "muted", "muted-foreground", "card", "foreground", "destructive", "ring"],
+  chart: ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "muted-foreground", "border"],
+  toast: [
+    "card",
+    "foreground",
+    "border",
+    "muted-foreground",
+    "primary",
+    "primary-foreground",
+    RADIUS
+  ],
+  badges: [
+    "ai-soft",
+    "ai-ink",
+    "muted",
+    "muted-foreground",
+    "accent",
+    "primary",
+    ...STATUS("red"),
+    ...STATUS("green"),
+    ...STATUS("yellow")
+  ],
+  alerts: ["primary", "destructive", "foreground", "muted-foreground", RADIUS]
+};
+function partsOf(keys) {
+  const wanted = new Set(keys);
+  const parts = /* @__PURE__ */ new Set();
+  for (const [part, tokens] of Object.entries(PART_TOKENS)) {
+    if (tokens.some((t) => wanted.has(t))) parts.add(part);
+  }
+  return parts;
+}
+function readDocumentTokens(keys, scheme) {
+  if (typeof document === "undefined" || typeof getComputedStyle !== "function") return {};
+  const probe = document.createElement("div");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.display = "none";
+  if (scheme === "dark") probe.className = "dark";
+  document.body.appendChild(probe);
+  try {
+    const style = getComputedStyle(probe);
+    const out = {};
+    for (const key of keys) {
+      const raw = style.getPropertyValue(`--${key}`).trim();
+      if (raw) out[key] = raw;
+    }
+    return out;
+  } finally {
+    probe.remove();
+  }
+}
+function hintProps(keys, onHint) {
+  return {
+    onPointerEnter: () => onHint(keys),
+    onPointerLeave: () => onHint(null),
+    onFocus: () => onHint(keys),
+    onBlur: () => onHint(null)
+  };
+}
+var FIELD = "h-8 rounded-md border border-input bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function ColorField({
+  label,
+  hint,
+  value,
+  onChange,
+  keys,
+  onHint,
+  testIds,
+  trailing
+}) {
+  const id = useId();
+  const hex = toHex(value, "#000000");
+  const [draft, setDraft] = useState(hex);
+  useEffect(() => setDraft(hex), [hex]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", ...hintProps(keys, onHint), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: `${id}-swatch`,
+        type: "color",
+        value: hex,
+        onChange: (e) => onChange(e.target.value),
+        className: "size-9 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-0.5",
+        "aria-label": label,
+        "data-testid": testIds.color
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `${id}-hex`, className: "block text-sm font-medium text-foreground", children: label }),
+      hint && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: `${id}-hex`,
+        value: draft,
+        onChange: (e) => {
+          setDraft(e.target.value);
+          if (/^#[0-9a-fA-F]{6}$/.test(e.target.value) && parseColor(e.target.value)) {
+            onChange(e.target.value.toLowerCase());
+          }
+        },
+        onBlur: () => setDraft(hex),
+        spellCheck: false,
+        "aria-label": `${label} hex value`,
+        className: cn(FIELD, "w-[5.5rem] shrink-0 font-mono"),
+        "data-testid": testIds.hex
+      }
+    ),
+    trailing
+  ] });
+}
+function Segmented({
+  label,
+  value,
+  options,
+  onChange,
+  keys,
+  onHint,
+  testId
+}) {
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": label, className: "flex flex-wrap gap-1", "data-testid": testId, children: options.map((option) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": value === option.value,
+      onClick: () => onChange(option.value),
+      ...hintProps(keys, onHint),
+      className: cn(
+        "rounded-md border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+        value === option.value ? "border-primary bg-primary text-primary-foreground" : "border-input bg-background text-foreground hover:bg-muted"
+      ),
+      "data-testid": `${testId}-${option.value}`,
+      children: option.label
+    },
+    option.value
+  )) });
+}
+function SliderField({
+  label,
+  valueText,
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  ends,
+  keys,
+  onHint,
+  testId
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { ...hintProps(keys, onHint), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: valueText })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "range",
+        min,
+        max,
+        step,
+        value,
+        "aria-valuetext": valueText,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "mt-2 w-full accent-[color:var(--color-primary)]",
+        "data-testid": testId
+      }
+    ),
+    ends && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx("span", { children: ends[0] }),
+      /* @__PURE__ */ jsx("span", { children: ends[1] })
+    ] })
+  ] });
+}
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+  keys,
+  onHint,
+  testId,
+  hint
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { ...hintProps(keys, onHint), children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: cn(FIELD, "mt-1 w-full"),
+        "data-testid": testId,
+        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: hint })
+  ] });
+}
+var CHART_KEYS = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
+var SURFACE_SWATCHES = [
+  ["background", "Page"],
+  ["card", "Cards"],
+  ["muted", "Muted"],
+  ["accent", "Hover"],
+  ["border", "Borders"],
+  ["sidebar", "Sidebar"]
+];
+var faceName = (stack) => (stack.split(",")[0] ?? stack).replace(/["']/g, "").replace(/ Variable$/, "").trim();
+function faceOptions(current, stacks) {
+  const unique = [...new Set(stacks)];
+  const options = unique.map((value) => ({
+    value,
+    label: value.startsWith("ui-") ? "System" : faceName(value)
+  }));
+  if (!unique.includes(current))
+    options.unshift({ value: current, label: `Custom (${faceName(current)})` });
+  return options;
+}
+var isTextEntry = (el) => el instanceof HTMLElement && (el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.tagName === "INPUT" && !["range", "color", "button"].includes(el.type));
+function ThemeEditor({
+  bundle,
+  variant = "panel",
+  preview,
+  previewLabels,
+  onSave,
+  testIdPrefix = "theme",
+  defaultOpen = false
+}) {
+  const { useStore, tokens, presets, groupLabels, mode, darkColors } = bundle;
+  const hasDark = darkColors !== void 0;
+  const colors = useStore((s) => s.colors);
+  const dark = useStore((s) => s.dark);
+  const fonts = useStore((s) => s.fonts);
+  const radius = useStore((s) => s.radius);
+  const inputs = useStore((s) => s.inputs);
+  const overrides = useStore((s) => s.overrides);
+  const activePresetId = useStore((s) => s.activePresetId);
+  const canUndo = useStore((s) => s.past.length > 0);
+  const canRedo = useStore((s) => s.future.length > 0);
+  const store = useStore.getState;
+  const [open, setOpen] = useState(defaultOpen);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [previewMode, setPreviewMode] = useState("light");
+  const [hint, setHint] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [savedVia, setSavedVia] = useState(null);
+  useEffect(() => {
+    applyThemeVars({ colors, fonts, radius }, { mode, dark: hasDark ? dark : void 0 });
+  }, [colors, dark, fonts, radius, mode, hasDark]);
+  const tid = (suffix) => `${testIdPrefix}-${suffix}`;
+  const highlight = useMemo(() => hint ? partsOf(hint) : null, [hint]);
+  const schemes = hasDark ? ["light", "dark"] : ["light"];
+  const setOf = (scheme) => scheme === "dark" ? dark : colors;
+  const neededKeys = useMemo(
+    () => [
+      .../* @__PURE__ */ new Set([
+        ...CONTRAST_PAIRS.flatMap((p) => [p.fg, p.bg]),
+        ...CHART_KEYS,
+        ...SURFACE_SWATCHES.map(([k]) => k)
+      ])
+    ],
+    []
+  );
+  const lightMissing = neededKeys.filter((k) => colors[k] === void 0).join(",");
+  const darkMissing = neededKeys.filter((k) => dark[k] === void 0).join(",");
+  const pageLight = useMemo(
+    () => readDocumentTokens(lightMissing ? lightMissing.split(",") : [], "light"),
+    [lightMissing]
+  );
+  const pageDark = useMemo(
+    () => hasDark ? readDocumentTokens(darkMissing ? darkMissing.split(",") : [], "dark") : {},
+    [darkMissing, hasDark]
+  );
+  const resolve = (scheme) => (key) => setOf(scheme)[key] ?? (scheme === "dark" ? pageDark : pageLight)[key];
+  const issues = schemes.flatMap(
+    (scheme) => contrastIssues(resolve(scheme)).map((issue) => ({ ...issue, scheme }))
+  );
+  const fix = (issue) => store().setColor(issue.fg, issue.fix, issue.scheme);
+  const fixAll = () => {
+    for (const scheme of schemes) {
+      for (const pair of CONTRAST_PAIRS) {
+        const s = useStore.getState();
+        const set = scheme === "dark" ? s.dark : s.colors;
+        const lookup = (k) => set[k] ?? (scheme === "dark" ? pageDark : pageLight)[k];
+        const [issue] = contrastIssues(lookup, [pair]);
+        if (issue) s.setColor(issue.fg, issue.fix, scheme);
+      }
+    }
+  };
+  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 onKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey) || isTextEntry(e.target)) return;
+    const key = e.key.toLowerCase();
+    if (key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      store().undo();
+    } else if (key === "z" && e.shiftKey || key === "y") {
+      e.preventDefault();
+      store().redo();
+    }
+  };
+  const inputKeys = (input) => keysOfInput(input);
+  const setInput = useStore((s) => s.setInput);
+  const toolbarButton = "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11";
+  const Toolbar = /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    presets.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": "Presets", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Start from" }),
+      presets.map((p) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => store().applyPreset(p.id),
+          "aria-pressed": activePresetId === p.id,
+          className: cn(
+            "rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+            activePresetId === p.id ? "border-primary bg-primary text-primary-foreground" : "border-input text-foreground hover:border-primary"
+          ),
+          "data-testid": tid(`preset-${p.id}`),
+          children: p.label
+        },
+        p.id
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => store().undo(),
+          disabled: !canUndo,
+          className: toolbarButton,
+          "aria-keyshortcuts": "Control+Z Meta+Z",
+          "data-testid": tid("undo"),
+          children: [
+            /* @__PURE__ */ jsx(Undo2, { className: "size-3.5", "aria-hidden": true }),
+            " Undo"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => store().redo(),
+          disabled: !canRedo,
+          className: toolbarButton,
+          "aria-keyshortcuts": "Control+Shift+Z Meta+Shift+Z",
+          "data-testid": tid("redo"),
+          children: [
+            /* @__PURE__ */ jsx(Redo2, { className: "size-3.5", "aria-hidden": true }),
+            " Redo"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => store().reset(),
+          className: toolbarButton,
+          "data-testid": tid("reset"),
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5", "aria-hidden": true }),
+            " Reset"
+          ]
+        }
+      ),
+      hasDark && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          label: "Preview",
+          value: previewMode,
+          options: [
+            { value: "light", label: "Light" },
+            { value: "dark", label: "Dark" },
+            ...variant === "panel" ? [{ value: "both", label: "Both" }] : []
+          ],
+          onChange: setPreviewMode,
+          keys: [],
+          onHint: () => void 0,
+          testId: tid("preview-mode")
+        }
+      ) })
+    ] })
+  ] });
+  const Warning = issues.length > 0 && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-2 rounded-md border border-yellow-border bg-yellow-bg px-3 py-2 text-sm text-yellow-text",
+      "data-testid": tid("contrast-warning"),
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 shrink-0", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+          issues.length === 1 ? "1 colour pair is hard to read." : `${issues.length} colour pairs are hard to read.`,
+          " ",
+          "See Text and readability."
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: fixAll,
+            className: "inline-flex items-center gap-1 rounded-md border border-yellow-border bg-background px-2 py-1 text-xs font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-testid": tid("fix-all"),
+            children: [
+              /* @__PURE__ */ jsx(Wand2, { className: "size-3.5", "aria-hidden": true }),
+              " Fix all"
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const section = (id, body) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": tid(`section-${id}-title`),
+      className: "rounded-lg border border-border bg-card p-4",
+      "data-testid": tid(`section-${id}`),
+      children: [
+        /* @__PURE__ */ jsx("h3", { id: tid(`section-${id}-title`), className: "text-sm font-semibold text-foreground", children: SECTION_COPY[id].title }),
+        /* @__PURE__ */ jsx("p", { className: "mb-4 mt-0.5 text-xs text-muted-foreground", children: SECTION_COPY[id].affects }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: body })
+      ]
+    }
+  );
+  const swatch = (key, title, scheme = "light") => {
+    const value = resolve(scheme)(key);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        title,
+        className: "inline-block size-6 rounded-md border border-border",
+        style: { background: value ? toCssColor(value) : "transparent" }
+      },
+      `${scheme}-${key}`
+    );
+  };
+  const activePairing = matchFontPairing(fonts);
+  const warmthWords = Math.abs(inputs.warmth) < 0.05 ? "Neutral" : `${inputs.warmth > 0 ? "Warm" : "Cool"} ${Math.round(Math.abs(inputs.warmth) * 100)}%`;
+  const Brand = section(
+    "brand",
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "Primary colour",
+          hint: "Filled buttons, links, the active tab, focus rings.",
+          value: inputs.primary,
+          onChange: (v) => setInput("primary", v),
+          keys: inputKeys("primary"),
+          onHint: setHint,
+          testIds: { color: tid("color-primary"), hex: tid("hex-primary") }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "Accent colour",
+          hint: "Highlights, AI actions, the second chart series.",
+          value: inputs.accent,
+          onChange: (v) => setInput("accent", v),
+          keys: inputKeys("accent"),
+          onHint: setHint,
+          testIds: { color: tid("color-accent"), hex: tid("hex-accent") }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderField,
+        {
+          label: "Corner radius",
+          valueText: radius === 0 ? "Square" : `${radius}rem`,
+          value: radius,
+          min: 0,
+          max: 1.5,
+          step: 0.125,
+          onChange: (v) => store().setRadius(v),
+          ends: ["Square", "Round"],
+          keys: [RADIUS],
+          onHint: setHint,
+          testId: tid("radius")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SelectField,
+        {
+          label: "Typeface pairing",
+          value: activePairing?.id ?? "",
+          options: [
+            ...activePairing ? [] : [{ value: "", label: "Custom" }],
+            ...FONT_PAIRINGS.map((p) => ({ value: p.id, label: p.label }))
+          ],
+          onChange: (id) => store().setFontPairing(id),
+          keys: [FONT_DISPLAY, FONT_SANS],
+          onHint: setHint,
+          testId: tid("font-pairing"),
+          hint: activePairing?.description ?? "Faces chosen one by one."
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 @md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: "Headings",
+            value: fonts.display,
+            options: faceOptions(
+              fonts.display,
+              FONT_PAIRINGS.flatMap((p) => [p.display, p.sans])
+            ),
+            onChange: (v) => store().setFont("display", v),
+            keys: [FONT_DISPLAY],
+            onHint: setHint,
+            testId: tid("font-display-face")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SelectField,
+          {
+            label: "Body text",
+            value: fonts.sans,
+            options: faceOptions(
+              fonts.sans,
+              FONT_PAIRINGS.map((p) => p.sans)
+            ),
+            onChange: (v) => store().setFont("sans", v),
+            keys: [FONT_SANS],
+            onHint: setHint,
+            testId: tid("font-sans-face")
+          }
+        )
+      ] })
+    ] })
+  );
+  const Surfaces = section(
+    "surfaces",
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SliderField,
+        {
+          label: "Surface tone",
+          valueText: warmthWords,
+          value: inputs.warmth,
+          min: -1,
+          max: 1,
+          step: 0.05,
+          onChange: (v) => setInput("warmth", v),
+          ends: ["Cool", "Warm"],
+          keys: inputKeys("warmth"),
+          onHint: setHint,
+          testId: tid("warmth")
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: "Sidebar" }),
+        /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            label: "Sidebar",
+            value: inputs.sidebar,
+            options: [
+              { value: "light", label: "Light" },
+              { value: "brand", label: "Brand panel" }
+            ],
+            onChange: (v) => setInput("sidebar", v),
+            keys: inputKeys("sidebar"),
+            onHint: setHint,
+            testId: tid("sidebar-style")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...hintProps(
+            SURFACE_SWATCHES.map(([k]) => k),
+            setHint
+          ),
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs text-muted-foreground", children: "Derived from the tone" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", "data-testid": tid("surface-swatches"), children: SURFACE_SWATCHES.map(([key, title]) => swatch(key, title)) })
+          ]
+        }
+      )
+    ] })
+  );
+  const Text = section(
+    "text",
+    /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border text-sm", "data-testid": tid("contrast-list"), children: CONTRAST_PAIRS.map((pair) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex flex-wrap items-center gap-2 py-2",
+        ...hintProps([pair.fg, pair.bg], setHint),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-foreground", children: pair.label }),
+          schemes.map((scheme) => {
+            const lookup = resolve(scheme);
+            const fg = lookup(pair.fg);
+            const bg = lookup(pair.bg);
+            const ratio = fg && bg ? contrastRatio(fg, bg) : null;
+            const issue = issues.find(
+              (i) => i.scheme === scheme && i.fg === pair.fg && i.bg === pair.bg
+            );
+            const word = hasDark ? scheme === "dark" ? "Dark " : "Light " : "";
+            if (ratio === null) {
+              return /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                word,
+                "n/a"
+              ] }, scheme);
+            }
+            return issue ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => fix(issue),
+                className: "inline-flex items-center gap-1 rounded-full border border-red-border bg-red-bg px-2 py-0.5 text-xs font-medium text-red-text hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-label": `${pair.label}${word ? `, ${word.trim().toLowerCase()}` : ""}: ${ratio.toFixed(1)} to 1, below ${pair.min}. Fix`,
+                "data-testid": tid(`fix-${pair.fg}-${pair.bg}-${scheme}`),
+                children: [
+                  word,
+                  ratio.toFixed(1),
+                  ":1 \xB7 Fix"
+                ]
+              },
+              scheme
+            ) : /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-full border border-green-border bg-green-bg px-2 py-0.5 text-xs font-medium text-green-text",
+                children: [
+                  /* @__PURE__ */ jsx(Check, { className: "size-3", "aria-hidden": true }),
+                  word,
+                  ratio.toFixed(1),
+                  ":1"
+                ]
+              },
+              scheme
+            );
+          })
+        ]
+      },
+      `${pair.fg}/${pair.bg}`
+    )) })
+  );
+  const Status = section(
+    "status",
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "Danger",
+          hint: "Errors, destructive actions.",
+          value: inputs.danger,
+          onChange: (v) => setInput("danger", v),
+          keys: inputKeys("danger"),
+          onHint: setHint,
+          testIds: { color: tid("color-danger"), hex: tid("hex-danger") }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "Success",
+          hint: "Completed, approved, healthy.",
+          value: inputs.success,
+          onChange: (v) => setInput("success", v),
+          keys: inputKeys("success"),
+          onHint: setHint,
+          testIds: { color: tid("color-success"), hex: tid("hex-success") }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorField,
+        {
+          label: "Warning",
+          hint: "Needs attention soon.",
+          value: inputs.warning,
+          onChange: (v) => setInput("warning", v),
+          keys: inputKeys("warning"),
+          onHint: setHint,
+          testIds: { color: tid("color-warning"), hex: tid("hex-warning") }
+        }
+      )
+    ] })
+  );
+  const Charts = section(
+    "charts",
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          label: "Chart colours",
+          value: inputs.charts,
+          options: [
+            { value: "harmonious", label: "In harmony with the brand" },
+            { value: "distinct", label: "Distinct hues" }
+          ],
+          onChange: (v) => setInput("charts", v),
+          keys: inputKeys("charts"),
+          onHint: setHint,
+          testId: tid("chart-style")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex gap-1.5",
+          "data-testid": tid("chart-swatches"),
+          ...hintProps(CHART_KEYS, setHint),
+          children: CHART_KEYS.map((key, i) => swatch(key, `Series ${i + 1}`))
+        }
+      )
+    ] })
+  );
+  const editScheme = previewMode === "dark" ? "dark" : "light";
+  const groups = [...new Set(tokens.map((t) => t.group))];
+  const Advanced = /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": tid("section-advanced-title"),
+      className: "rounded-lg border border-border bg-card p-4",
+      "data-testid": tid("section-advanced"),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setAdvancedOpen((o) => !o),
+            "aria-expanded": advancedOpen,
+            "aria-controls": tid("advanced"),
+            className: "flex w-full items-center justify-between gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-testid": tid("advanced-toggle"),
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: tid("section-advanced-title"),
+                    className: "block text-sm font-semibold text-foreground",
+                    children: SECTION_COPY.advanced.title
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: SECTION_COPY.advanced.affects })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ChevronDown,
+                {
+                  className: cn("size-4 shrink-0 transition-transform", advancedOpen && "rotate-180"),
+                  "aria-hidden": true
+                }
+              )
+            ]
+          }
+        ),
+        advancedOpen && /* @__PURE__ */ jsxs("div", { id: tid("advanced"), className: "mt-4 space-y-5", "data-testid": tid("advanced"), children: [
+          hasDark && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "Editing the ",
+            editScheme,
+            " colours. Switch the preview to edit the other set."
+          ] }),
+          groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-testid": tid(`group-${group}`), children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: groupLabels[group] ?? group }),
+            tokens.filter((t) => t.group === group).map((t) => /* @__PURE__ */ jsx(
+              ColorField,
+              {
+                label: t.label,
+                value: setOf(editScheme)[t.key] ?? resolve(editScheme)(t.key) ?? "#000000",
+                onChange: (v) => store().setColor(t.key, v, editScheme),
+                keys: [t.key],
+                onHint: setHint,
+                testIds: { color: tid(`token-${t.key}`), hex: tid(`token-hex-${t.key}`) },
+                trailing: overrides.includes(t.key) && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => store().clearOverride(t.key),
+                    className: "shrink-0 rounded-md px-1.5 py-1 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "aria-label": `Reset ${t.label} to follow the brand inputs`,
+                    "data-testid": tid(`token-reset-${t.key}`),
+                    children: "Reset"
+                  }
+                )
+              },
+              t.key
+            ))
+          ] }, group)),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Font stacks" }),
+            ["display", "sans"].map((which) => /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-foreground", children: [
+              which === "display" ? "Headings stack" : "Body stack",
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: fonts[which],
+                  onChange: (e) => store().setFont(which, e.target.value),
+                  spellCheck: false,
+                  className: "mt-1 h-8 w-full rounded-md border border-input bg-background px-2 font-mono text-xs text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "data-testid": tid(which === "display" ? "font-display" : "font-sans")
+                }
+              )
+            ] }, which))
+          ] })
+        ] })
+      ]
+    }
+  );
+  const Sections = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    Brand,
+    Surfaces,
+    Text,
+    Status,
+    Charts,
+    Advanced
+  ] });
+  const previewFor = (scheme, testId, compact) => /* @__PURE__ */ jsx(
+    ThemePreview,
+    {
+      colors: setOf(scheme),
+      fonts,
+      radius,
+      scheme,
+      highlight,
+      compact,
+      labels: previewLabels,
+      title: preview?.title,
+      subtitle: preview?.subtitle,
+      testId
+    },
+    scheme
+  );
+  const Previews = (compact) => {
+    const shown = previewMode === "both" && hasDark ? ["light", "dark"] : [hasDark ? previewMode : "light"];
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", "aria-label": "Live preview", role: "group", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", "aria-live": "polite", children: [
+        "Live preview",
+        shown.length > 1 ? ", light and dark" : hasDark ? `, ${shown[0]}` : "",
+        ". Point at a control to see what it changes."
+      ] }),
+      shown.map(
+        (scheme, i) => previewFor(scheme, i === 0 ? tid("preview") : tid(`preview-${scheme}`), compact)
+      )
+    ] });
+  };
+  const SaveBar = onSave && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-testid": tid("save"),
+        children: [
+          savedVia ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Save, { className: "size-4" }),
+          saving ? "Saving\u2026" : savedVia ? "Saved" : "Save theme"
+        ]
+      }
+    ),
+    savedVia && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", "data-testid": tid("via"), children: [
+      "stored via ",
+      savedVia
+    ] })
+  ] });
+  if (variant === "collapsed") {
+    const controlsId = tid("controls");
+    return /* @__PURE__ */ jsxs("div", { className: "@container space-y-3", "data-testid": testIdPrefix, onKeyDown, children: [
+      Toolbar,
+      Warning,
+      /* @__PURE__ */ 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "data-testid": tid("customize"),
+          children: [
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn("size-4 transition-transform", open && "rotate-180"),
+                "aria-hidden": true
+              }
+            ),
+            "Customize colours and type"
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: controlsId,
+          className: "grid max-h-[36rem] gap-4 overflow-y-auto rounded-md border border-border p-3 @3xl:grid-cols-[minmax(0,1fr)_minmax(0,22rem)]",
+          "data-testid": tid("controls"),
+          children: [
+            Sections,
+            /* @__PURE__ */ jsx("div", { className: "@3xl:sticky @3xl:top-0 @3xl:self-start", children: Previews(true) })
+          ]
+        }
+      ),
+      SaveBar
+    ] });
+  }
+  if (variant === "drawer") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "@container flex h-full flex-col gap-4 overflow-y-auto bg-background p-4",
+        "data-testid": testIdPrefix,
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("h2", { className: "font-display text-lg font-semibold text-foreground", children: "Theme" }),
+          Toolbar,
+          Warning,
+          Previews(true),
+          Sections,
+          SaveBar
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "@container space-y-4", "data-testid": testIdPrefix, onKeyDown, children: [
+    Toolbar,
+    Warning,
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,30rem)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-4", children: [
+        Sections,
+        SaveBar
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "order-first min-w-0 lg:order-none lg:sticky lg:top-4 lg:self-start", children: Previews(false) })
+    ] })
+  ] });
+}
+
+export { ThemeEditor, ThemePreview };
+//# sourceMappingURL=chunk-C2S246BV.js.map
+//# sourceMappingURL=chunk-C2S246BV.js.map