@arbidocs/blocks 0.3.119 → 0.3.121

package/dist/chunk-AHWIZJ4M.cjs

@@ -0,0 +1,1540 @@
+'use strict';
+
+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');
+
+// 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");
+}
+
+// src/theme/fontPairings.ts
+var SERIF_TAIL = "ui-serif, Georgia, serif";
+var SANS_TAIL = "ui-sans-serif, system-ui, sans-serif";
+var FONT_PAIRINGS = [
+  {
+    id: "system",
+    label: "System",
+    description: "The reader\u2019s own interface font. Loads nothing.",
+    display: SANS_TAIL,
+    sans: SANS_TAIL,
+    packages: []
+  },
+  {
+    id: "newsreader-inter",
+    label: "Newsreader / Inter",
+    description: "Editorial serif headlines over a neutral, highly legible body.",
+    display: `"Newsreader Variable", ${SERIF_TAIL}`,
+    sans: `"Inter Variable", ${SANS_TAIL}`,
+    packages: ["@fontsource-variable/newsreader", "@fontsource-variable/inter"]
+  },
+  {
+    id: "fraunces-inter",
+    label: "Fraunces / Inter",
+    description: "Characterful, slightly literary display with a quiet body.",
+    display: `"Fraunces Variable", ${SERIF_TAIL}`,
+    sans: `"Inter Variable", ${SANS_TAIL}`,
+    packages: ["@fontsource-variable/fraunces", "@fontsource-variable/inter"]
+  },
+  {
+    id: "source-serif-inter",
+    label: "Source Serif / Inter",
+    description: "A workhorse serif for headings; sober and institutional.",
+    display: `"Source Serif 4 Variable", ${SERIF_TAIL}`,
+    sans: `"Inter Variable", ${SANS_TAIL}`,
+    packages: ["@fontsource-variable/source-serif-4", "@fontsource-variable/inter"]
+  },
+  {
+    id: "inter",
+    label: "Inter",
+    description: "One neutral grotesque throughout. Product-like, no contrast.",
+    display: `"Inter Variable", ${SANS_TAIL}`,
+    sans: `"Inter Variable", ${SANS_TAIL}`,
+    packages: ["@fontsource-variable/inter"]
+  },
+  {
+    id: "montserrat-nunito",
+    label: "Montserrat / Nunito",
+    description: "Geometric headings over a rounded body. ARBI\u2019s historic look.",
+    display: `"Montserrat Variable", ${SANS_TAIL}`,
+    sans: `"Nunito Variable", ${SANS_TAIL}`,
+    packages: ["@fontsource-variable/montserrat", "@fontsource-variable/nunito"]
+  }
+];
+function getFontPairing(id) {
+  return FONT_PAIRINGS.find((p) => p.id === id);
+}
+function matchFontPairing(fonts) {
+  return FONT_PAIRINGS.find((p) => p.display === fonts.display && p.sans === fonts.sans);
+}
+function fontPackages(pairings = FONT_PAIRINGS) {
+  return [...new Set(pairings.flatMap((p) => p.packages))].sort();
+}
+function createThemeStore(config) {
+  const { defaultTheme, presets, storageKey } = config;
+  const useStore = zustand.create()(
+    middleware.persist(
+      (set, get) => ({
+        ...defaultTheme,
+        activePresetId: presets[0]?.id ?? null,
+        setColor: (key, value) => set((s) => ({ colors: { ...s.colors, [key]: value }, activePresetId: null })),
+        setFont: (which, value) => set((s) => ({ fonts: { ...s.fonts, [which]: value }, activePresetId: null })),
+        // A pairing sets both faces together — that is the whole point of it.
+        // Unknown ids are ignored rather than clearing the typography.
+        setFontPairing: (pairingId) => {
+          const pairing = getFontPairing(pairingId);
+          if (!pairing) return;
+          set({ fonts: { display: pairing.display, sans: pairing.sans } });
+        },
+        setRadius: (radius) => set({ radius, activePresetId: null }),
+        applyPreset: (presetId) => {
+          const preset = presets.find((p) => p.id === presetId);
+          if (!preset) return;
+          set({
+            colors: { ...preset.tokens.colors },
+            fonts: { ...preset.tokens.fonts },
+            radius: preset.tokens.radius,
+            activePresetId: presetId
+          });
+        },
+        reset: () => set({
+          colors: { ...defaultTheme.colors },
+          fonts: { ...defaultTheme.fonts },
+          radius: defaultTheme.radius,
+          activePresetId: presets[0]?.id ?? null
+        }),
+        snapshot: () => {
+          const { colors, fonts, radius } = get();
+          return { colors, fonts, radius };
+        }
+      }),
+      { name: storageKey }
+    )
+  );
+  return { ...config, useStore };
+}
+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"
+}) {
+  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 [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 tid2 = (suffix) => `${testIdPrefix}-${suffix}`;
+  const groups = [...new Set(tokens.map((t) => t.group))];
+  const save = async () => {
+    if (!onSave) return;
+    setSaving(true);
+    const via = await onSave();
+    setSavedVia(typeof via === "string" ? via : "saved");
+    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": tid2(`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": tid2("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": tid2(`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),
+          className: "bg-card placeholder:text-muted-foreground/70 focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring/50 h-7 font-mono text-xs",
+          "data-testid": tid2(`hex-${k}`)
+        }
+      )
+    ] })
+  ] }, k);
+  const activePairing = 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),
+          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/50",
+          "data-testid": tid2("font-pairing"),
+          children: [
+            !activePairing && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Custom" }),
+            FONT_PAIRINGS.map((pairing) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: pairing.id, children: pairing.label }, pairing.id))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[11px] 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),
+          className: "bg-card placeholder:text-muted-foreground/70 focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring/50 mt-1 font-mono text-xs",
+          "data-testid": tid2("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),
+          className: "bg-card placeholder:text-muted-foreground/70 focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring/50 mt-1 font-mono text-xs",
+          "data-testid": tid2("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)),
+          className: "mt-2 w-full accent-[color:var(--color-primary)]",
+          "data-testid": tid2("radius")
+        }
+      )
+    ] })
+  ] });
+  const Preview = /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { variant: "elevated", className: "rounded-xl", "data-testid": tid2("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": tid2("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": tid2("via"), children: [
+      "stored via ",
+      savedVia
+    ] })
+  ] });
+  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-[10px] 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-[10px] 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-xl", 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-xl",
+          "data-testid": tid2(`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 sm: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-xl", 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 })
+  ] });
+}
+
+// src/lib/testid.ts
+function tid(...parts) {
+  return parts.filter((p) => p !== void 0 && p !== false && p !== "").map(
+    (p) => String(p).trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")
+  ).join("-");
+}
+
+// src/lib/format.ts
+function gbp(value, compact = false) {
+  return new Intl.NumberFormat("en-GB", {
+    style: "currency",
+    currency: "GBP",
+    maximumFractionDigits: compact && Math.abs(value) >= 1e3 ? 1 : 0,
+    notation: compact ? "compact" : "standard"
+  }).format(value);
+}
+function initials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function parseIso(iso) {
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(iso);
+  const d = new Date(dateOnly ? `${iso}T00:00:00` : iso);
+  if (Number.isNaN(d.getTime())) throw new Error(`Invalid ISO date: ${iso}`);
+  return d;
+}
+function fmtDate(iso) {
+  try {
+    return new Intl.DateTimeFormat("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    }).format(parseIso(iso));
+  } catch {
+    return iso;
+  }
+}
+function fmtDateTime(iso) {
+  try {
+    return new Intl.DateTimeFormat("en-GB", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+    }).format(parseIso(iso));
+  } catch {
+    return iso;
+  }
+}
+var RELATIVE_UNITS = [
+  ["year", 31536e3],
+  ["month", 2592e3],
+  ["week", 604800],
+  ["day", 86400],
+  ["hour", 3600],
+  ["minute", 60],
+  ["second", 1]
+];
+function fromNow(iso, from = /* @__PURE__ */ new Date()) {
+  try {
+    const diffSeconds = (parseIso(iso).getTime() - from.getTime()) / 1e3;
+    const abs = Math.abs(diffSeconds);
+    const rtf = new Intl.RelativeTimeFormat("en-GB", { numeric: "always" });
+    for (const [unit, secs] of RELATIVE_UNITS) {
+      if (abs >= secs || unit === "second") {
+        const value = Math.round(diffSeconds / secs);
+        return rtf.format(value, unit);
+      }
+    }
+    return rtf.format(0, "second");
+  } catch {
+    return iso;
+  }
+}
+function daysUntil(iso, from = /* @__PURE__ */ new Date()) {
+  try {
+    const target = parseIso(iso);
+    const a = Date.UTC(target.getFullYear(), target.getMonth(), target.getDate());
+    const b = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+    return Math.round((a - b) / 864e5);
+  } catch {
+    return 0;
+  }
+}
+function hrs(n) {
+  return `${n.toFixed(1)}h`;
+}
+function pct(n) {
+  return `${Math.round(n)}%`;
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  lead,
+  align = "left",
+  className,
+  invert,
+  eyebrowClassName
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cn("max-w-3xl", align === "center" && "mx-auto text-center", className), children: [
+    eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: ui.cn(
+          "mb-3 text-xs font-semibold uppercase tracking-wider",
+          eyebrowClassName ?? (invert ? "text-background/60" : "text-muted-foreground")
+        ),
+        children: eyebrow
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: ui.cn(
+          "font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+          invert ? "text-background" : "text-foreground"
+        ),
+        children: title
+      }
+    ),
+    lead && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: ui.cn(
+          "mt-4 text-lg leading-relaxed",
+          invert ? "text-background/70" : "text-muted-foreground"
+        ),
+        children: lead
+      }
+    )
+  ] });
+}
+var ASSET_REF_PREFIX = "asset:";
+function asAssetRef(docId) {
+  return `${ASSET_REF_PREFIX}${docId}`;
+}
+function assetRefId(src) {
+  return src.slice(ASSET_REF_PREFIX.length);
+}
+var AssetResolverContext = react.createContext(null);
+function AssetResolverProvider({
+  render,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AssetResolverContext.Provider, { value: render, children });
+}
+function useAssetRenderer() {
+  return react.useContext(AssetResolverContext);
+}
+function useAssetResolverActive() {
+  return useAssetRenderer() !== null;
+}
+function isAssetRef(src) {
+  return !!src && src.startsWith(ASSET_REF_PREFIX);
+}
+var ASPECT = {
+  "16:9": "aspect-video",
+  "4:3": "aspect-[4/3]",
+  "1:1": "aspect-square",
+  "21:9": "aspect-[21/9]",
+  "4:5": "aspect-[4/5]"
+};
+var ROUNDED = {
+  none: "rounded-none",
+  md: "rounded-md",
+  lg: "rounded-xl",
+  full: "rounded-full"
+};
+function BlockImage({
+  src,
+  alt = "",
+  aspect = "16:9",
+  rounded = "lg",
+  framed,
+  className,
+  testId
+}) {
+  const shape = ui.cn(
+    ASPECT[aspect] ?? ASPECT["16:9"],
+    ROUNDED[rounded] ?? ROUNDED.lg,
+    framed && "ring-1 ring-border shadow-xl"
+  );
+  const AssetRenderer = useAssetRenderer();
+  if (AssetRenderer && isAssetRef(src)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      AssetRenderer,
+      {
+        docId: assetRefId(src),
+        alt,
+        className: ui.cn("w-full object-cover", shape, className),
+        testId
+      }
+    );
+  }
+  if (src && !isAssetRef(src)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: ui.cn("w-full object-cover", shape, className),
+        "data-testid": testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn(
+        "flex w-full items-center justify-center overflow-hidden border border-border",
+        "bg-gradient-to-br from-muted via-card to-accent text-muted-foreground",
+        shape,
+        className
+      ),
+      "data-testid": testId,
+      "aria-label": alt || "Image placeholder",
+      role: "img",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "size-8 opacity-60" })
+    }
+  );
+}
+var TONE_SURFACE = {
+  default: "bg-background text-foreground",
+  muted: "bg-muted text-foreground",
+  ink: "bg-foreground text-background"
+};
+function renderTitle(title, emphasis) {
+  if (!emphasis || !title.includes(emphasis)) return title;
+  const parts = title.split(emphasis);
+  return parts.map((part, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+    part,
+    i < parts.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary", children: emphasis })
+  ] }, i));
+}
+function Hero({
+  eyebrow,
+  title,
+  emphasis,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  align = "left",
+  tone = "default",
+  imageUrl,
+  backgroundImage,
+  overlay = true,
+  eyebrowClassName,
+  testId
+}) {
+  const onDark = Boolean(backgroundImage) || tone === "ink";
+  const subtle = onDark ? "text-background/70" : "text-muted-foreground";
+  const eyebrowClass = eyebrowClassName ?? (onDark ? "text-background/60" : "text-muted-foreground");
+  const centered = align === "center" || Boolean(backgroundImage);
+  const heading = renderTitle(title, emphasis);
+  const copy = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn(
+        "max-w-2xl",
+        centered && "mx-auto text-center",
+        backgroundImage && "text-background"
+      ),
+      children: [
+        eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cn("mb-4 text-sm font-semibold uppercase tracking-wider", eyebrowClass), children: eyebrow }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-semibold tracking-tight text-balance sm:text-5xl", children: heading }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cn("mt-6 text-lg leading-relaxed", subtle), children: subtitle }),
+        (primaryCta?.label || secondaryCta?.label) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: ui.cn("mt-8 flex flex-col gap-3 sm:flex-row", centered && "sm:justify-center"),
+            children: [
+              primaryCta?.label && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { asChild: true, size: "lg", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: primaryCta.href || "#", children: [
+                primaryCta.label,
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4" })
+              ] }) }),
+              secondaryCta?.label && /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Button,
+                {
+                  asChild: true,
+                  size: "lg",
+                  variant: "outline",
+                  className: ui.cn(
+                    onDark && "border-background/35 bg-transparent text-background hover:bg-background/10 hover:text-background"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: secondaryCta.href || "#", children: secondaryCta.label })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (backgroundImage) {
+    const bgStyle = {
+      backgroundImage: `url("${backgroundImage}")`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        className: "relative isolate overflow-hidden",
+        style: bgStyle,
+        "data-testid": testId,
+        "data-bg": testId && `${testId}-bg`,
+        children: [
+          overlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/55", "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto max-w-7xl px-5 py-28 lg:px-8 lg:py-36", children: copy })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: ui.cn(TONE_SURFACE[tone] ?? TONE_SURFACE.default), "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-5 py-20 lg:px-8 lg:py-28", children: centered ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-12", children: [
+    copy,
+    imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+      BlockImage,
+      {
+        src: imageUrl,
+        aspect: "16:9",
+        rounded: "lg",
+        className: "w-full max-w-4xl",
+        testId: testId && `${testId}-image`
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    copy,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BlockImage,
+      {
+        src: imageUrl,
+        aspect: "4:5",
+        rounded: "lg",
+        testId: testId && `${testId}-image`
+      }
+    )
+  ] }) }) });
+}
+function BlockLink({ href, linkComponent: Link, className, children }) {
+  if (!href) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  if (Link) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Link, { href, className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, children });
+}
+var COLS = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3"
+};
+function FeatureGrid({ columns = "3", items, linkComponent, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("grid gap-5", COLS[columns] ?? COLS["3"]), "data-testid": testId, children: (items ?? []).map((item, i) => {
+    const Icon = item.icon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BlockLink,
+      {
+        href: item.href,
+        linkComponent,
+        className: ui.cn("block h-full", item.href && "group"),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Card,
+          {
+            variant: "outline",
+            className: ui.cn(
+              "h-full p-6",
+              item.href && "transition-colors group-hover:border-primary/40"
+            ),
+            "data-testid": testId && `${testId}-item-${i}`,
+            children: [
+              Icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-4 inline-flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-5" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold tracking-tight", children: item.title }),
+              item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: item.description })
+            ]
+          }
+        )
+      },
+      i
+    );
+  }) });
+}
+function Testimonial({ quote, author, role, avatarUrl, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { variant: "outline", className: "mx-auto max-w-3xl p-8 text-center", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "mx-auto size-8 text-primary/40", "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "mt-4 text-xl font-medium leading-relaxed text-balance", children: quote }),
+    (author || avatarUrl) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-center gap-3", children: [
+      (avatarUrl || author) && /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { children: [
+        avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: avatarUrl, alt: author ?? "" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { children: initials(author || "?") })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-left", children: [
+        author && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: author }),
+        role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: role })
+      ] })
+    ] })
+  ] });
+}
+var TONE_SURFACE2 = {
+  default: "bg-primary text-primary-foreground",
+  muted: "bg-muted text-foreground",
+  ink: "bg-foreground text-background"
+};
+function CTABanner({
+  title,
+  subtitle,
+  cta,
+  tone = "default",
+  backgroundImage,
+  overlay = true,
+  testId
+}) {
+  const onImage = Boolean(backgroundImage);
+  const subtle = onImage ? "text-white/80" : tone === "default" ? "text-primary-foreground/80" : tone === "ink" ? "text-background/70" : "text-muted-foreground";
+  const bgStyle = backgroundImage ? {
+    backgroundImage: `url("${backgroundImage}")`,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn(
+        "relative isolate overflow-hidden rounded-2xl px-8 py-14 text-center",
+        onImage ? "text-white" : TONE_SURFACE2[tone] ?? TONE_SURFACE2.default
+      ),
+      style: bgStyle,
+      "data-testid": testId,
+      children: [
+        onImage && overlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/55", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: ui.cn("mx-auto mt-4 max-w-2xl text-lg", subtle), children: subtitle }),
+          cta?.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              asChild: true,
+              size: "lg",
+              variant: tone === "default" && !onImage ? "secondary" : "default",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: cta.href || "#", children: [
+                cta.label,
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4" })
+              ] })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function LogoCloud({ items, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", "data-testid": testId, children: (items ?? []).map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "rounded-md border border-border bg-muted px-5 py-2.5 text-sm font-semibold uppercase tracking-wide text-muted-foreground",
+      "data-testid": testId && `${testId}-item-${i}`,
+      children: item.label
+    },
+    i
+  )) });
+}
+function FAQ({ items, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-3xl divide-y divide-border", "data-testid": testId, children: (items ?? []).map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group py-4", "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 text-left text-base font-medium", children: [
+      item.question,
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" })
+    ] }),
+    item.answer && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: item.answer })
+  ] }, i)) });
+}
+function RichTextBlock({ content, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-3xl", "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(ui.AiMarkdown, { children: content ?? "" }) });
+}
+var STYLES = {
+  info: { wrap: "border-primary/30 bg-primary/5", icon: "text-primary", Icon: lucideReact.Info },
+  success: { wrap: "border-success/30 bg-success/10", icon: "text-success", Icon: lucideReact.CheckCircle2 },
+  warning: { wrap: "border-warning/40 bg-warning/10", icon: "text-warning", Icon: lucideReact.AlertTriangle },
+  danger: {
+    wrap: "border-destructive/30 bg-destructive/10",
+    icon: "text-destructive",
+    Icon: lucideReact.XCircle
+  }
+};
+function Callout({ variant = "info", title, body, testId }) {
+  const style = STYLES[variant] ?? STYLES.info;
+  const Icon = style.Icon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn("flex gap-3 rounded-lg border p-4 text-foreground", style.wrap),
+      "data-testid": testId,
+      role: "note",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: ui.cn("mt-0.5 size-5 shrink-0", style.icon), "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: title }),
+          body && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: body })
+        ] })
+      ]
+    }
+  );
+}
+var SIZE = {
+  sm: "size-8 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-14 text-base",
+  xl: "size-20 text-xl"
+};
+function AvatarBlock({ src, name = "", size = "md", testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: ui.cn(SIZE[size] ?? SIZE.md), "data-testid": testId, children: [
+    src && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src, alt: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { className: "font-semibold", children: initials(name || "?") })
+  ] });
+}
+function Navbar({ brand, links, cta, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: "border-b border-border bg-background", "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-4 lg:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tight", children: brand }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden items-center gap-6 md:flex", children: (links ?? []).map((link, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: link.href || "#",
+        className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+        "data-testid": testId && `${testId}-link-${i}`,
+        children: link.label
+      },
+      i
+    )) }),
+    cta?.label && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.href || "#", children: cta.label }) })
+  ] }) });
+}
+function Footer({ columns, copyright, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "border-t border-border bg-muted text-foreground", "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl px-5 py-14 lg:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId && `${testId}-col-${i}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold tracking-tight", children: col.heading }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-4 space-y-2", children: (col.links ?? []).map((link, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: link.href || "#",
+          className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+          children: link.label
+        }
+      ) }, j)) })
+    ] }, i)) }),
+    copyright && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-12 border-t border-border pt-6 text-sm text-muted-foreground", children: copyright })
+  ] }) });
+}
+function ListBlock({ ordered = false, items, testId }) {
+  const list = items ?? [];
+  const className = ui.cn(
+    "mx-auto max-w-3xl space-y-2 pl-5 text-foreground",
+    ordered ? "list-decimal" : "list-disc"
+  );
+  const content = list.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "leading-relaxed marker:text-muted-foreground", children: item.text }, i));
+  return ordered ? /* @__PURE__ */ jsxRuntime.jsx("ol", { className, "data-testid": testId, children: content }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className, "data-testid": testId, children: content });
+}
+var GRID = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+var GAP = {
+  sm: "gap-3",
+  md: "gap-6",
+  lg: "gap-10"
+};
+function Columns({ count = 3, gap = "md", columns, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn("grid grid-cols-1", GRID[count] ?? GRID[3], GAP[gap] ?? GAP.md),
+      "data-testid": testId,
+      children: columns.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": testId && `${testId}-col-${i}`, children: col }, i))
+    }
+  );
+}
+var SIZE2 = {
+  sm: "h-4",
+  md: "h-8",
+  lg: "h-16",
+  xl: "h-24"
+};
+function Spacer({ size = "md", testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("w-full", SIZE2[size] ?? SIZE2.md), "data-testid": testId, "aria-hidden": true });
+}
+var WIDTH = {
+  narrow: "max-w-3xl",
+  default: "max-w-5xl",
+  wide: "max-w-7xl",
+  full: "max-w-none"
+};
+var PADDING = {
+  none: "px-0 py-0",
+  sm: "px-4 py-6",
+  md: "px-5 py-12 lg:px-8",
+  lg: "px-5 py-20 lg:px-8"
+};
+function Container({ width = "default", padding = "md", children, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn(
+        "mx-auto w-full",
+        WIDTH[width] ?? WIDTH.default,
+        PADDING[padding] ?? PADDING.md
+      ),
+      "data-testid": testId,
+      children
+    }
+  );
+}
+function PricingTable({ plans, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn("grid gap-6", (plans?.length ?? 0) >= 3 ? "md:grid-cols-3" : "sm:grid-cols-2"),
+      "data-testid": testId,
+      children: (plans ?? []).map((plan, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Card,
+        {
+          variant: plan.featured ? "elevated" : "outline",
+          className: ui.cn("flex h-full flex-col p-6", plan.featured && "ring-2 ring-primary"),
+          "data-testid": testId && `${testId}-item-${i}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold tracking-tight", children: plan.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-baseline gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-semibold tracking-tight", children: plan.price }),
+              plan.period && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                "/",
+                plan.period
+              ] })
+            ] }),
+            plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: plan.description }),
+            plan.features && plan.features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-5 flex-1 space-y-2", children: plan.features.map((f, j) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "mt-0.5 size-4 shrink-0 text-primary" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: f })
+            ] }, j)) }),
+            plan.cta?.label && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { asChild: true, className: "mt-6 w-full", variant: plan.featured ? "default" : "outline", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: plan.cta.href || "#", children: plan.cta.label }) })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function Tabs({ items, testId }) {
+  const [active, setActive] = react.useState(0);
+  const list = items ?? [];
+  const current = list[Math.min(active, Math.max(list.length - 1, 0))];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 border-b border-border", role: "tablist", children: list.map((t, i) => {
+      const selected = i === active;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          onClick: () => setActive(i),
+          className: ui.cn(
+            "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors",
+            selected ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+          ),
+          "data-testid": testId && `${testId}-tab-${i}`,
+          children: t.label
+        },
+        i
+      );
+    }) }),
+    current && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tabpanel",
+        className: "pt-5 text-sm leading-relaxed text-muted-foreground",
+        "data-testid": testId && `${testId}-panel`,
+        children: current.content
+      }
+    )
+  ] });
+}
+function Accordion({ items, allowMultiple = false, testId }) {
+  const [open, setOpen] = react.useState([]);
+  const toggle = (i) => setOpen(
+    (prev) => prev.includes(i) ? prev.filter((n) => n !== i) : allowMultiple ? [...prev, i] : [i]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-border border-y border-border", "data-testid": testId, children: (items ?? []).map((item, i) => {
+    const isOpen = open.includes(i);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId && `${testId}-item-${i}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": isOpen,
+          onClick: () => toggle(i),
+          className: "flex w-full items-center justify-between gap-4 py-4 text-left text-base font-medium",
+          "data-testid": testId && `${testId}-trigger-${i}`,
+          children: [
+            item.title,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronDown,
+              {
+                className: ui.cn("size-4 shrink-0 transition-transform", isOpen && "rotate-180")
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "pb-4 text-sm leading-relaxed text-muted-foreground",
+          "data-testid": testId && `${testId}-content-${i}`,
+          children: item.content
+        }
+      )
+    ] }, i);
+  }) });
+}
+var COLS2 = {
+  "2": "grid-cols-2",
+  "3": "grid-cols-2 sm:grid-cols-3",
+  "4": "grid-cols-2 sm:grid-cols-4"
+};
+function Gallery({
+  images,
+  columns = "3",
+  aspect = "1:1",
+  rounded = "lg",
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("grid gap-4", COLS2[columns] ?? COLS2["3"]), "data-testid": testId, children: (images ?? []).map((img, i) => /* @__PURE__ */ jsxRuntime.jsxs("figure", { "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BlockImage,
+      {
+        src: img.src,
+        alt: img.alt,
+        aspect,
+        rounded,
+        testId: testId && `${testId}-item-${i}-image`
+      }
+    ),
+    img.caption && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "mt-1.5 text-xs text-muted-foreground", children: img.caption })
+  ] }, i)) });
+}
+var ASPECT2 = {
+  "16:9": "aspect-video",
+  "4:3": "aspect-[4/3]",
+  "1:1": "aspect-square"
+};
+function toEmbedUrl(url) {
+  if (!url) return null;
+  const yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]{11})/);
+  if (yt) return `https://www.youtube.com/embed/${yt[1]}`;
+  const vimeo = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+  const loom = url.match(/loom\.com\/(?:share|embed)\/([\w-]+)/);
+  if (loom) return `https://www.loom.com/embed/${loom[1]}`;
+  return null;
+}
+function VideoEmbed({
+  url,
+  title,
+  aspect = "16:9",
+  rounded = true,
+  testId
+}) {
+  const embed = toEmbedUrl(url);
+  const frame = ui.cn(
+    "w-full overflow-hidden border border-border bg-muted",
+    ASPECT2[aspect] ?? ASPECT2["16:9"],
+    rounded && "rounded-lg"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frame, "data-testid": testId, children: embed ? /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      src: embed,
+      title: title || "Embedded video",
+      className: "size-full",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true,
+      "data-testid": testId && `${testId}-iframe`
+    }
+  ) : url ? /* @__PURE__ */ jsxRuntime.jsx("video", { src: url, controls: true, className: "size-full", "data-testid": testId && `${testId}-video` }) : null });
+}
+function ContactForm({
+  fields,
+  submitLabel = "Send",
+  action,
+  successMessage = "Thanks \u2014 we\u2019ll be in touch shortly.",
+  testId
+}) {
+  const [sent, setSent] = react.useState(false);
+  const list = fields ?? [];
+  const onSubmit = (e) => {
+    if (!action) {
+      e.preventDefault();
+      setSent(true);
+    }
+  };
+  if (sent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "rounded-lg border border-border bg-muted p-6 text-center text-sm text-foreground",
+        role: "status",
+        "data-testid": testId && `${testId}-success`,
+        children: successMessage
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      action,
+      method: action ? "post" : void 0,
+      onSubmit,
+      className: "mx-auto flex max-w-xl flex-col gap-4",
+      "data-testid": testId,
+      children: [
+        list.map((f, i) => {
+          const inputClass = "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground outline-none focus:border-primary";
+          return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col gap-1.5 text-left", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: f.label }),
+            f.type === "textarea" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                name: f.name,
+                required: f.required,
+                rows: 4,
+                className: inputClass,
+                "data-testid": testId && `${testId}-field-${f.name}`
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                name: f.name,
+                type: f.type || "text",
+                required: f.required,
+                className: inputClass,
+                "data-testid": testId && `${testId}-field-${f.name}`
+              }
+            )
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            type: "submit",
+            className: ui.cn("mt-1 self-start"),
+            "data-testid": testId && `${testId}-submit`,
+            children: submitLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var TONE = {
+  primary: "bg-primary text-primary-foreground",
+  muted: "bg-muted text-foreground",
+  ink: "bg-foreground text-background"
+};
+function Banner({ text, cta, tone = "primary", testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn("w-full px-5 py-2.5 text-center text-sm", TONE[tone] ?? TONE.primary),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: text }),
+        cta?.label && /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: cta.href || "#",
+            className: "ml-2 inline-flex items-center gap-1 font-semibold underline underline-offset-4",
+            "data-testid": testId && `${testId}-cta`,
+            children: [
+              cta.label,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-3.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaText({
+  eyebrow,
+  title,
+  body,
+  imageUrl,
+  mediaSide = "left",
+  cta,
+  testId
+}) {
+  const media = /* @__PURE__ */ jsxRuntime.jsx(BlockImage, { src: imageUrl, aspect: "4:3", rounded: "lg", testId: testId && `${testId}-image` });
+  const copy = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    eyebrow && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance", children: title }),
+    body && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg leading-relaxed text-muted-foreground", children: body }),
+    cta?.label && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { asChild: true, className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: cta.href || "#", children: [
+      cta.label,
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "size-4" })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid items-center gap-10 lg:grid-cols-2", "data-testid": testId, children: mediaSide === "right" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    copy,
+    media
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    media,
+    copy
+  ] }) });
+}
+var COLS3 = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3",
+  "4": "sm:grid-cols-2 lg:grid-cols-4"
+};
+function TeamGrid({ members, columns = "3", linkComponent, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("grid gap-6", COLS3[columns] ?? COLS3["3"]), "data-testid": testId, children: (members ?? []).map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    BlockLink,
+    {
+      href: m.href,
+      linkComponent,
+      className: ui.cn("block h-full", m.href && "group"),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Card,
+        {
+          variant: "outline",
+          className: ui.cn(
+            "flex h-full flex-col items-center p-6 text-center",
+            m.href && "transition-colors group-hover:border-primary/40"
+          ),
+          "data-testid": testId && `${testId}-item-${i}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: "size-20", children: [
+              m.avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: m.avatarUrl, alt: m.name }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { children: initials(m.name || "?") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: m.name }),
+            m.role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-primary", children: m.role }),
+            m.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: m.bio })
+          ]
+        }
+      )
+    },
+    i
+  )) });
+}
+function Steps({ steps, variant = "numbered", testId }) {
+  const list = steps ?? [];
+  if (variant === "timeline") {
+    return /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "relative ml-3 border-l border-border", "data-testid": testId, children: list.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "mb-8 ml-6 last:mb-0", "data-testid": testId && `${testId}-item-${i}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -left-3 flex size-6 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: i + 1 }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold tracking-tight", children: s.title }),
+      s.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: s.description })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ui.cn("grid gap-6", list.length >= 4 ? "md:grid-cols-4" : "sm:grid-cols-3"),
+      "data-testid": testId,
+      children: list.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": testId && `${testId}-item-${i}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary", children: i + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: s.title }),
+        s.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: s.description })
+      ] }, i))
+    }
+  );
+}
+var COLS4 = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3"
+};
+function TestimonialGrid({ items, columns = "3", testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("grid gap-6", COLS4[columns] ?? COLS4["3"]), "data-testid": testId, children: (items ?? []).map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Card,
+    {
+      variant: "outline",
+      className: "flex h-full flex-col p-6",
+      "data-testid": testId && `${testId}-item-${i}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "size-6 text-primary/40", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "mt-3 flex-1 text-base leading-relaxed", children: t.quote }),
+        (t.author || t.avatarUrl) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: "size-9", children: [
+            t.avatarUrl && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: t.avatarUrl, alt: t.author ?? "" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { children: initials(t.author || "?") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            t.author && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: t.author }),
+            t.role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: t.role })
+          ] })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+
+exports.ASSET_REF_PREFIX = ASSET_REF_PREFIX;
+exports.Accordion = Accordion;
+exports.AssetResolverProvider = AssetResolverProvider;
+exports.AvatarBlock = AvatarBlock;
+exports.Banner = Banner;
+exports.BlockImage = BlockImage;
+exports.BlockLink = BlockLink;
+exports.CTABanner = CTABanner;
+exports.Callout = Callout;
+exports.Columns = Columns;
+exports.ContactForm = ContactForm;
+exports.Container = Container;
+exports.FAQ = FAQ;
+exports.FONT_PAIRINGS = FONT_PAIRINGS;
+exports.FeatureGrid = FeatureGrid;
+exports.Footer = Footer;
+exports.Gallery = Gallery;
+exports.Hero = Hero;
+exports.ListBlock = ListBlock;
+exports.LogoCloud = LogoCloud;
+exports.MediaText = MediaText;
+exports.Navbar = Navbar;
+exports.PricingTable = PricingTable;
+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.daysUntil = daysUntil;
+exports.fmtDate = fmtDate;
+exports.fmtDateTime = fmtDateTime;
+exports.fontPackages = fontPackages;
+exports.fromNow = fromNow;
+exports.gbp = gbp;
+exports.getFontPairing = getFontPairing;
+exports.hrs = hrs;
+exports.initials = initials;
+exports.isAssetRef = isAssetRef;
+exports.matchFontPairing = matchFontPairing;
+exports.pct = pct;
+exports.tid = tid;
+exports.toEmbedUrl = toEmbedUrl;
+exports.toHslTriplet = toHslTriplet;
+exports.useAssetRenderer = useAssetRenderer;
+exports.useAssetResolverActive = useAssetResolverActive;
+//# sourceMappingURL=chunk-AHWIZJ4M.cjs.map
+//# sourceMappingURL=chunk-AHWIZJ4M.cjs.map