@arbidocs/blocks 0.3.110

package/dist/index.js

@@ -0,0 +1,3634 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
+import { MessageSquare, Cpu, Code, Cloud, Layers, Target, Award, MapPin, Phone, Mail, Lock, Globe, Heart, Star, Rocket, Shield, Zap, Sparkles, Gavel, Scale, Bell, Activity, BarChart3, DollarSign, TrendingUp, Info, AlertCircle, CheckCircle, Clock, Calendar, Briefcase, Users, Folder, FileText, RotateCcw, Palette, Search, ArrowUpRight, ArrowDownRight, ImageIcon, ArrowRight, Quote, ChevronDown, XCircle, AlertTriangle, CheckCircle2, ArrowLeft, Loader2, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Check, Save, Download } from 'lucide-react';
+import { Input, Card, CardHeader, CardTitle, CardContent, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider } from '@arbidocs/react';
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { AgGridReact } from 'ag-grid-react';
+import { themeQuartz, AllCommunityModule } from 'ag-grid-community';
+import { Link, useParams } from 'react-router-dom';
+import { Puck, Render } from '@measured/puck';
+
+// src/prompts.ts
+function matterToContext(m) {
+  return {
+    title: m.title,
+    client: m.clientName,
+    court: m.court ?? void 0,
+    claimNumber: m.claimNumber ?? void 0,
+    practice: m.practice,
+    summary: m.summary
+  };
+}
+function createPromptLibrary(config) {
+  const {
+    firmName,
+    jurisdiction = "English",
+    language = "British English",
+    reviewerTitle = "qualified solicitor",
+    complianceOfficer = "MLRO"
+  } = config;
+  const HOUSE_RULES = `You are ${firmName}'s litigation AI, working for a regulated ${jurisdiction} law firm.
+Ground every statement in the supplied documents and cite the source document (and page/section where possible) for each material point.
+If the documents do not support a point, say so plainly rather than inventing it. Write in concise ${language} for a ${reviewerTitle}. This is a draft for a lawyer to review \u2014 never present it as final legal advice.`;
+  const withContext = (m, body) => {
+    if (!m) return `${HOUSE_RULES}
+
+${body}`;
+    const facts = [
+      `Matter: ${m.title}`,
+      m.client && `Client: ${m.client}`,
+      m.court && `Forum: ${m.court}`,
+      m.claimNumber && `Case reference: ${m.claimNumber}`,
+      m.practice && `Practice area: ${m.practice}`
+    ].filter(Boolean).join("\n");
+    return `${HOUSE_RULES}
+
+Context for this matter:
+${facts}
+
+${body}`;
+  };
+  const prompts = {
+    /** Executive brief of the matter, from the live bundle. */
+    brief: (m) => withContext(
+      m,
+      `Produce a crisp executive brief of this matter for a partner picking it up cold. Cover, with citations: (1) what the dispute is about, (2) the parties and their roles, (3) the key issues in play, (4) the current procedural posture, and (5) the two or three things that most need attention next. Keep it under 300 words.`
+    ),
+    /** Sourced chronology of events. */
+    chronology: (m) => withContext(
+      m,
+      `Build a chronology of every material dated event across the documents. Output a table with columns: Date | Event | Source (document + page). Order strictly by date. Include correspondence, transactions, procedural steps and factual events. Flag any date that is ambiguous or disputed in the documents.`
+    ),
+    /** Disclosure / relevance + privilege review. */
+    disclosure: (m) => withContext(
+      m,
+      `Act as a disclosure reviewer. For each document, assess: (a) relevance to the issues in dispute (High / Medium / Low, with a one-line reason), and (b) whether it may attract legal professional privilege or contain sensitive/personal data that needs redaction \u2014 with your reasoning. Present as a table: Document | Relevance | Privilege/PII risk | Reason. Be conservative: when unsure about privilege, flag it for a lawyer.`
+    ),
+    /** Merits / risk assessment — the real "AI outlook". */
+    risk: (m) => withContext(
+      m,
+      `Give a balanced merits assessment grounded in the documents. Cover: the strongest points for our client, the strongest points against, key evidential gaps, and the main quantum drivers. End with a single calibrated headline: an overall assessment of the client's position (Strong / Favourable / Balanced / Difficult) with a one-sentence justification. Cite sources throughout. Be candid about weaknesses \u2014 a partner needs the downside, not comfort.`
+    ),
+    /** Extract deadlines / key dates with rule references. */
+    deadlines: (m) => withContext(
+      m,
+      `Extract every deadline, key date and time-limited step referenced in the documents. Output a table: Due date | Event | Rule/basis (e.g. CPR reference, contractual clause, court order) | Source document. Include implied deadlines (e.g. a defence due 28 days after service) and note the trigger. Flag anything overdue or imminent.`
+    ),
+    /** Draft a document (letter / pleading / note). */
+    draft: (kind, m) => withContext(
+      m,
+      `Draft a first-pass ${kind} for this matter, grounded in the documents. Use the correct ${jurisdiction} litigation format and tone. Where a fact relies on a document, cite it inline in [square brackets] so the solicitor can verify. Leave clearly-marked [PLACEHOLDERS] where information is missing rather than guessing. Add a short "Points to verify before sending" list at the end.`
+    ),
+    /** Free-form question about the matter. */
+    ask: (question, m) => withContext(m, `Question: ${question}`),
+    /**
+     * Draft a clean document artifact (output IS the document — no preamble).
+     *
+     * Pure single-pass generation from the matter context: it deliberately does
+     * NOT tell the agent to look up or cite the document bundle. Asking a drafting
+     * agent to "cite the source behind each fact" sends it into a retrieval loop
+     * that can spin for minutes before emitting a token; a lawyer wants a fast
+     * first draft to refine, so we draft from the known matter facts and mark
+     * genuinely-missing specifics as [PLACEHOLDER]. (Grounded, cited analysis is
+     * what {@link brief}/{@link risk} are for.)
+     */
+    draftArtifact: (kind, instructions, m) => withContext(
+      m,
+      `Draft a ${kind} for this matter now, in a single pass, using only the matter context above \u2014 do not look anything up.${instructions ? ` Specific instructions: ${instructions}.` : ""}
+
+Keep it tight \u2014 about 180\u2013240 words, the essential body only. Where a specific detail isn't given in the context, insert a clearly-marked [PLACEHOLDER] and keep drafting \u2014 never stop to search for it.
+
+Output ONLY the finished document in clean Markdown \u2014 a short title, then the body in correct ${jurisdiction} litigation format. No commentary before or after the document.`
+    ),
+    /**
+     * Revise a supplied passage. Returns ONLY the full revised text (no commentary),
+     * so the app can diff it against the original into a redline.
+     */
+    revise: (original, instruction, m) => withContext(
+      m,
+      `Revise the following passage per this instruction: "${instruction}". Improve it for an ${jurisdiction} disputes matter \u2014 tighten drafting, close gaps, and align with the documents where relevant.
+
+Return ONLY the complete revised passage as plain text. No preamble, no explanation, no markdown fences \u2014 just the revised words so they can be compared against the original.
+
+PASSAGE:
+"""${original}"""`
+    ),
+    /** Morning digest across the matter. */
+    digest: (m) => withContext(
+      m,
+      `Write a short "start of day" brief for the fee-earner on this matter (5-6 bullet points). Surface: what changed or is newly relevant in the documents, the most pressing deadline or risk, and one concrete recommended next action. Be specific and cite sources. Keep it scannable.`
+    ),
+    /** UTBMS-coded billing narrative from time context. */
+    billing: (activity, m) => withContext(
+      m,
+      `Draft a compliant, client-ready time-entry narrative for the following work: "${activity}". Write it in the third person, be specific about what was done and why it advanced the matter, avoid block-billing language, and suggest the most appropriate UTBMS task and activity codes. Keep it to 1-2 sentences.`
+    ),
+    /** Closing / lessons-learned memo. */
+    closing: (m) => withContext(
+      m,
+      `Draft a matter closing memo grounded in the documents. Cover: the outcome, a concise narrative of how the matter resolved, key lessons for similar future matters, and any residual risks or follow-up obligations (limitation, undertakings, retention). Cite sources.`
+    ),
+    /** Thought-leadership / insight article from the matter's themes. */
+    insight: (m) => withContext(
+      m,
+      `Using the legal and commercial themes in these documents, draft an 800-word thought-leadership insight article suitable for the firm's website. Anonymise all party-specific and confidential details \u2014 write about the legal principles and practical lessons, not this specific client. Give it a compelling headline and a two-sentence standfirst. This is marketing content; keep it authoritative but accessible.`
+    ),
+    /** Auto-tagging / issue classification of documents. */
+    autoTag: (m) => withContext(
+      m,
+      `Propose a concise set of issue tags and document-type labels for this bundle so it can be organised. For each document, suggest 2-4 short tags (e.g. issue, document type, key party). Output as: Document | Suggested tags. Keep tags reusable and consistent across the set.`
+    ),
+    /** Verify uploaded onboarding documents against a KYC/CDD checklist. */
+    kyc: (clientName, m) => withContext(
+      m,
+      `Act as ${firmName}'s client onboarding / KYC-CDD analyst for a new client, "${clientName}". Review the documents in this workspace against the firm's onboarding checklist and report each item as \u2705 satisfied, \u26A0\uFE0F partial, or \u274C missing, with a one-line reason citing the source.
+
+Checklist:
+1. Proof of identity (individual) or certificate of incorporation (entity)
+2. Proof of registered/residential address
+3. Beneficial ownership / corporate authority to instruct
+4. Source of funds / source of wealth indication
+5. Sanctions / PEP screening flags apparent from the papers
+
+Output a Markdown table: Item | Status | Notes (source). End with an overall onboarding recommendation (Proceed / Proceed with conditions / Do not proceed) and any information still required. This is a compliance aid; the ${complianceOfficer} signs off.`
+    ),
+    // ── Pitch / intake stage (may run before a workspace has full documents) ──
+    /** Triage a prospective enquiry. */
+    triage: (enquiry, m) => withContext(
+      m,
+      `A prospective client has made this enquiry:
+
+"""${enquiry}"""
+
+Triage it for the firm. Provide: (1) the likely practice area and a one-line matter description, (2) an initial risk/complexity rating with reasons, (3) the key questions we must ask before taking it on, and (4) any obvious limitation or urgency concerns. Be practical.`
+    ),
+    /** Conflict-of-interest style check against the workspace. */
+    conflict: (parties, m) => withContext(
+      m,
+      `Run a conflict-awareness check. The prospective matter involves these parties/entities:
+
+"""${parties}"""
+
+Search the documents for any mention of these names or closely related entities that could indicate a conflict of interest or prior involvement. Report each potential match with the source and a plain-English explanation of why it might matter. If nothing is found, say so clearly. This is a screening aid, not a substitute for a formal conflict search.`
+    ),
+    /** Capability statement / pitch letter. */
+    pitch: (opportunity, m) => withContext(
+      m,
+      `Draft a persuasive one-page capability statement to pitch for this opportunity:
+
+"""${opportunity}"""
+
+Lead with why the firm is the right choice, reference relevant experience at a thematic level (no confidential client details), set out the proposed team and approach, and close with a clear next step. Confident but not boastful.`
+    )
+  };
+  const WORKFLOW_ACTIONS = [
+    { id: "brief", title: "Matter brief", prompt: prompts.brief },
+    { id: "chronology", title: "Build a chronology", prompt: prompts.chronology },
+    { id: "disclosure", title: "Review for disclosure", prompt: prompts.disclosure },
+    { id: "risk", title: "Merits & risk", prompt: prompts.risk }
+  ];
+  return { prompts, WORKFLOW_ACTIONS };
+}
+
+// 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 clearThemeVars(theme, optionsOrRoot = {}) {
+  const { mode = "flat", root = document.documentElement } = normalizeOptions(optionsOrRoot);
+  if (mode === "cssVars") {
+    removeCssVars();
+    return;
+  }
+  for (const key of Object.keys(theme.colors)) {
+    root.style.removeProperty(`--color-${key}`);
+  }
+  root.style.removeProperty("--font-display");
+  root.style.removeProperty("--font-sans");
+  root.style.removeProperty("--radius");
+}
+function createThemeStore(config) {
+  const { defaultTheme, presets, storageKey } = config;
+  const useStore = create()(
+    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 })),
+        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 setRadius = useStore((s) => s.setRadius);
+  const applyPreset = useStore((s) => s.applyPreset);
+  const reset = useStore((s) => s.reset);
+  const [saving, setSaving] = useState(false);
+  const [savedVia, setSavedVia] = useState(null);
+  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__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    presets.map((p) => /* @__PURE__ */ 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__ */ 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__ */ jsx(RotateCcw, { className: "size-3" }),
+          " Reset"
+        ]
+      }
+    )
+  ] });
+  const colorRow = (k, label) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx(
+        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 Typography = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: "Display font stack" }),
+      /* @__PURE__ */ jsx(
+        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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: "Body font stack" }),
+      /* @__PURE__ */ jsx(
+        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__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("span", { className: "block text-xs text-muted-foreground", children: [
+        "Base radius \u2014 ",
+        radius,
+        "rem"
+      ] }),
+      /* @__PURE__ */ 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__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", "data-testid": tid2("preview"), children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Live preview" }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rounded-[var(--radius)] bg-primary p-4 text-primary-foreground", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-display text-lg font-semibold", children: preview?.title ?? "Preview" }),
+        preview?.subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80", children: preview.subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-1.5", children: tokens.map((t) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          title: t.label,
+          className: "aspect-square rounded-md border border-border",
+          style: { background: `var(--color-${t.key})` }
+        },
+        t.key
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-[var(--radius)] border border-border bg-[color:var(--color-ai-accent-soft,var(--color-accent))] p-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[color:var(--color-ai-accent,var(--color-primary))]", children: "AI action surface" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Themed by the AI-kit accent tokens." })
+      ] })
+    ] })
+  ] });
+  const SaveBar = onSave && /* @__PURE__ */ jsxs("div", { className: "mt-6 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",
+        "data-testid": tid2("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": tid2("via"), children: [
+      "stored via ",
+      savedVia
+    ] })
+  ] });
+  if (variant === "drawer") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-y-auto bg-card p-5", "data-testid": testIdPrefix, children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-4 flex items-center justify-between", children: /* @__PURE__ */ jsx("h2", { className: "font-display text-lg font-semibold text-foreground", children: "Theme" }) }),
+      Presets,
+      /* @__PURE__ */ jsx("p", { className: "mt-5 mb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "Colours" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: tokens.map((t) => colorRow(t.key, t.label)) }),
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_320px]", "data-testid": testIdPrefix, children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+          /* @__PURE__ */ jsx(Palette, { className: "size-4 text-[color:var(--color-primary)]" }),
+          " Presets"
+        ] }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: Presets })
+      ] }),
+      groups.map((group) => /* @__PURE__ */ jsxs(
+        Card,
+        {
+          variant: "elevated",
+          className: "rounded-xl",
+          "data-testid": tid2(`group-${group}`),
+          children: [
+            /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: groupLabels[group] ?? group }) }),
+            /* @__PURE__ */ jsx(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__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: "Typography & shape" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: Typography })
+      ] }),
+      SaveBar
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "lg:sticky lg:top-4 lg:self-start", children: Preview })
+  ] });
+}
+var ConnectionContext = createContext(null);
+function ConnectionProvider({
+  config,
+  children
+}) {
+  const arbi = useArbi();
+  const isLiveConfigured = config.apiUrl.length > 0;
+  const demoWorkspaceId = config.demoWorkspaceId ?? "demo-firm";
+  const [status, setStatus] = useState("disconnected");
+  const [user, setUser] = useState(null);
+  const [workspaceId, setWorkspaceId] = useState(null);
+  const [mode, setMode] = useState("demo");
+  const [error, setError] = useState(null);
+  const enterDemo = useCallback(() => {
+    setMode("demo");
+    setStatus("demo");
+    setError(null);
+    setUser({ name: config.demoUser.name, email: config.demoUser.email });
+    setWorkspaceId(demoWorkspaceId);
+  }, [config.demoUser.name, config.demoUser.email, demoWorkspaceId]);
+  const login = useCallback(
+    async (email, password) => {
+      setError(null);
+      if (!isLiveConfigured) {
+        enterDemo();
+        return;
+      }
+      setStatus("connecting");
+      setMode("live");
+      try {
+        await arbi.login(email, password);
+        const workspaces = await arbi.workspaces.list();
+        if (workspaces?.length) {
+          const preferred = config.workspaceId;
+          const target = (preferred ? workspaces.find((w) => w.external_id === preferred) : void 0) ?? workspaces[0];
+          await arbi.selectWorkspace(target.external_id);
+          setWorkspaceId(target.external_id);
+        }
+        setUser({ name: email.split("@")[0], email });
+        setStatus("authenticated");
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Sign-in failed. Check your credentials.");
+        setStatus("error");
+      }
+    },
+    [arbi, enterDemo, isLiveConfigured, config.workspaceId]
+  );
+  const logout = useCallback(() => {
+    if (mode === "live") {
+      void arbi.logout?.();
+    }
+    setUser(null);
+    setWorkspaceId(null);
+    setStatus("disconnected");
+    setError(null);
+  }, [arbi, mode]);
+  const setWorkspace = useCallback((id) => setWorkspaceId(id), []);
+  const value = useMemo(
+    () => ({
+      mode,
+      status,
+      user,
+      workspaceId,
+      apiConfigured: isLiveConfigured,
+      apiUrl: config.apiUrl,
+      error,
+      assistantConfig: config.assistantConfig,
+      fallbackWorkspaceId: config.workspaceId,
+      login,
+      enterDemo,
+      logout,
+      setWorkspace
+    }),
+    [
+      mode,
+      status,
+      user,
+      workspaceId,
+      isLiveConfigured,
+      config.apiUrl,
+      config.assistantConfig,
+      config.workspaceId,
+      error,
+      login,
+      enterDemo,
+      logout,
+      setWorkspace
+    ]
+  );
+  return /* @__PURE__ */ jsx(ConnectionContext.Provider, { value, children });
+}
+function useConnection() {
+  const ctx = useContext(ConnectionContext);
+  if (!ctx) throw new Error("useConnection must be used within ConnectionProvider");
+  return ctx;
+}
+var isAuthenticated = (s) => s === "demo" || s === "authenticated";
+function ConnectionBoundWebSocket({ children }) {
+  const { status } = useConnection();
+  return /* @__PURE__ */ jsx(ArbiWebSocketProvider, { enabled: status === "authenticated", children });
+}
+function LegalArbiProvider({
+  config,
+  children
+}) {
+  const [queryClient] = useState(
+    () => new QueryClient({
+      defaultOptions: { queries: { staleTime: 3e4, retry: 1, refetchOnWindowFocus: false } }
+    })
+  );
+  const providerUrl = config.apiUrl || config.demoApiUrl || "https://demo.arbi.local";
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(ArbiProvider, { url: providerUrl, children: /* @__PURE__ */ jsx(ConnectionProvider, { config, children: /* @__PURE__ */ jsx(ConnectionBoundWebSocket, { children }) }) }) });
+}
+function useFirmAiTask() {
+  const { assistantConfig } = useConnection();
+  const task = useAiTask();
+  const kitRun = task.run;
+  const run = useCallback(
+    (question, docIds, opts) => kitRun(question, docIds, { ...opts, model: opts?.model ?? assistantConfig }),
+    [kitRun, assistantConfig]
+  );
+  return { ...task, run };
+}
+function useWorkspaceDocs() {
+  const { workspaceId, fallbackWorkspaceId } = useConnection();
+  return useWorkspaceDocs$1(workspaceId ?? fallbackWorkspaceId);
+}
+function useSemanticSearch() {
+  const { docIds } = useWorkspaceDocs();
+  return useSemanticSearch$1(docIds);
+}
+
+// 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 EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 px-6 py-12 text-center",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        Icon && /* @__PURE__ */ jsx("div", { className: "mb-3 flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
+        /* @__PURE__ */ jsx("p", { className: "font-display text-base font-semibold text-ink", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
+      ]
+    }
+  );
+}
+var alignClass = { left: "text-left", right: "text-right", center: "text-center" };
+function DataTable({
+  columns,
+  rows,
+  getRowId,
+  onRowClick,
+  area,
+  emptyTitle = "Nothing to show",
+  emptyDescription,
+  className
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle, description: emptyDescription, testId: tid(area, "empty") });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl border border-border bg-card", className), children: /* @__PURE__ */ jsxs(Table, { "data-testid": tid(area, "table"), children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: columns.map((c) => /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        className: cn(c.align && alignClass[c.align], c.headClassName),
+        children: c.header
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
+      const id = getRowId(row);
+      return /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-testid": tid(area, "row", id),
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          className: cn(onRowClick && "cursor-pointer"),
+          children: columns.map((c) => /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: cn(c.align && alignClass[c.align], c.className),
+              children: c.render(row)
+            },
+            c.key
+          ))
+        },
+        id
+      );
+    }) })
+  ] }) });
+}
+function DataTableBlock({ columns, rows, caption, emptyText, testId }) {
+  const area = testId ?? "data-table-block";
+  const tableColumns = columns.map((col, index) => ({
+    key: col.field || `col-${index}`,
+    header: col.header,
+    align: col.align,
+    render: (row) => row.cells[col.field] ?? ""
+  }));
+  const tableRows = rows.map((cells, index) => ({ __id: String(index), cells }));
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+    caption ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mb-2 text-sm text-muted-foreground",
+        "data-testid": testId ? `${testId}-caption` : void 0,
+        children: caption
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns: tableColumns,
+        rows: tableRows,
+        getRowId: (row) => row.__id,
+        area,
+        emptyTitle: emptyText
+      }
+    )
+  ] });
+}
+var arbiTheme = themeQuartz.withParams({
+  // Font settings
+  fontFamily: {
+    googleFont: "Nunito"
+  },
+  fontSize: 14,
+  headerFontSize: 13,
+  headerFontWeight: 600,
+  // Sizing
+  headerHeight: 44,
+  rowHeight: 40,
+  cellHorizontalPadding: 16,
+  // Borders - structural settings only.
+  // Row border is a real hairline in the theme border colour (not hardcoded
+  // white, which was invisible on the light-mode background and wrong in dark
+  // mode) so adjacent rows are clearly separated — important now that rows can
+  // be tall and multi-line (e.g. the Abstract column).
+  rowBorder: { style: "solid", width: 1, color: "hsl(var(--border))" },
+  columnBorder: false,
+  // No column borders - using CSS dividers instead
+  wrapperBorder: false,
+  // No rounded corners for clean look (except checkboxes)
+  borderRadius: 0,
+  wrapperBorderRadius: 0,
+  checkboxBorderRadius: 2
+  // Keep checkboxes square
+});
+function GridView({
+  items,
+  columnDefs,
+  getItemId,
+  selection,
+  emptyState,
+  isLoading = false,
+  loadingMessage = "Loading...",
+  gridOptions,
+  onGridReady,
+  onCellValueChanged,
+  onRowClick,
+  persistState = false,
+  gridState,
+  onGridStateChange,
+  initialVisibleColumns,
+  className = "w-full",
+  height = 500,
+  rowHeight,
+  testId = "grid-view",
+  pinnedBottomRowData,
+  pinnedTopRowData,
+  pagination = false,
+  paginationPageSizeSelector,
+  showEmpty
+}) {
+  const gridApiRef = useRef(null);
+  const initialRowHeightRef = useRef(rowHeight);
+  const initialGridStateRef = useRef(gridState);
+  const initialState = useMemo(() => {
+    if (!persistState) return void 0;
+    return initialGridStateRef.current;
+  }, [persistState]);
+  const saveGridState = useCallback(() => {
+    if (!persistState || !onGridStateChange || !gridApiRef.current) return;
+    const state = gridApiRef.current.getState();
+    onGridStateChange(state);
+  }, [persistState, onGridStateChange]);
+  const ensureSelectionColumnVisible = useCallback(() => {
+    if (!gridApiRef.current || !selection?.mode) return;
+    const currentState = gridApiRef.current.getColumnState();
+    const selectionColumn = currentState.find((col) => col.colId === "ag-Grid-SelectionColumn");
+    const selectionColumnIndex = currentState.findIndex(
+      (col) => col.colId === "ag-Grid-SelectionColumn"
+    );
+    if (!selectionColumn || selectionColumn.hide || selectionColumnIndex !== 0) {
+      gridApiRef.current.setColumnsVisible(["ag-Grid-SelectionColumn"], true);
+      gridApiRef.current.applyColumnState({
+        state: [
+          {
+            colId: "ag-Grid-SelectionColumn",
+            hide: false,
+            width: selectionColumn?.width || 48,
+            pinned: null
+            // Ensure not pinned in wrong position
+          }
+        ],
+        defaultState: { hide: void 0 },
+        applyOrder: false
+      });
+      if (selectionColumnIndex !== 0) {
+        gridApiRef.current.moveColumns(["ag-Grid-SelectionColumn"], 0);
+      }
+    }
+  }, [selection?.mode]);
+  const getRowId = useCallback(
+    (params) => {
+      return getItemId(params.data);
+    },
+    [getItemId]
+  );
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+  const onSelectionChangeRef = useRef(selection?.onSelectionChange);
+  onSelectionChangeRef.current = selection?.onSelectionChange;
+  const handleSelectionChanged = useCallback(() => {
+    if (!onSelectionChangeRef.current || !gridApiRef.current) return;
+    const selectedNodes = gridApiRef.current.getSelectedNodes();
+    const selectedData = selectedNodes.map((node) => node.data).filter((item) => item !== void 0);
+    onSelectionChangeRef.current(selectedData);
+  }, []);
+  const handleRowClicked = useCallback(
+    (event) => {
+      if (!onRowClick || !event.data) return;
+      const target = event.event?.target;
+      if (target?.closest('button, input, a, select, textarea, [role="button"]')) return;
+      onRowClick(event.data);
+    },
+    [onRowClick]
+  );
+  const handleGridReady = useCallback(
+    (event) => {
+      gridApiRef.current = event.api;
+      if (!initialState && initialVisibleColumns?.length) {
+        const currentState = event.api.getColumnState();
+        const stateMap = new Map(currentState.map((col) => [col.colId, col]));
+        const visibleSet = new Set(initialVisibleColumns);
+        const selectionCol = stateMap.get("ag-Grid-SelectionColumn");
+        const orderedState = [
+          // Selection column first - ALWAYS visible, create if not in state
+          selectionCol ? { ...selectionCol, hide: false } : { colId: "ag-Grid-SelectionColumn", hide: false, width: 48 },
+          // Visible columns in specified order
+          ...initialVisibleColumns.filter((colId) => colId !== "ag-Grid-SelectionColumn").map((colId) => {
+            const col = stateMap.get(colId);
+            return col ? { ...col, hide: false } : void 0;
+          }),
+          // Hidden columns (everything else)
+          ...currentState.filter((col) => col.colId !== "ag-Grid-SelectionColumn" && !visibleSet.has(col.colId)).map((col) => ({ ...col, hide: true }))
+        ].filter((col) => col !== void 0);
+        event.api.applyColumnState({ state: orderedState, applyOrder: true });
+      }
+      if (initialState && initialVisibleColumns?.length) {
+        const currentState = event.api.getColumnState();
+        const savedColIds = new Set(
+          initialState.columnOrder?.orderedColIds ?? currentState.map((c) => c.colId)
+        );
+        const newCols = currentState.filter(
+          (col) => !savedColIds.has(col.colId) && col.colId !== "ag-Grid-SelectionColumn"
+        );
+        if (newCols.length > 0) {
+          const defaultVisible = new Set(initialVisibleColumns);
+          event.api.applyColumnState({
+            state: newCols.map((col) => ({
+              ...col,
+              hide: !defaultVisible.has(col.colId)
+            }))
+          });
+        }
+      }
+      ensureSelectionColumnVisible();
+      if (onGridReady) {
+        onGridReady({ api: event.api });
+      }
+      const sel = selectionRef.current;
+      if (sel && sel.selected.length > 0) {
+        const selectedIds = new Set(sel.selected.map(getItemId));
+        event.api.forEachNode((node) => {
+          if (node.data && selectedIds.has(getItemId(node.data))) {
+            node.setSelected(true);
+          }
+        });
+      }
+    },
+    [onGridReady, getItemId, ensureSelectionColumnVisible, initialState, initialVisibleColumns]
+  );
+  const handleFirstDataRendered = useCallback(() => {
+    ensureSelectionColumnVisible();
+  }, [ensureSelectionColumnVisible]);
+  const handleModelUpdated = useCallback(() => {
+  }, []);
+  const prevItemsRef = useRef([]);
+  useEffect(() => {
+    prevItemsRef.current = items;
+  }, [items]);
+  const handleStateUpdated = useCallback(() => {
+    saveGridState();
+  }, [saveGridState]);
+  const defaultOptions = useMemo(() => {
+    return {
+      // Initial row height (stable — captured once). Live changes go through the
+      // imperative effect, not this option, to avoid column-state churn.
+      rowHeight: initialRowHeightRef.current,
+      suppressMenuHide: true,
+      // Prevent hiding columns since we don't have enterprise sidebar
+      maintainColumnOrder: true,
+      // Preserve column order when columns are added/removed
+      // Row virtualization: Render rows as needed for performance
+      // rowBuffer renders extra rows above/below viewport for smoother scrolling
+      rowBuffer: 10,
+      // Render 10 extra rows above/below viewport for smooth scrolling
+      suppressColumnVirtualisation: false,
+      // Keep column virtualization enabled
+      suppressRowVirtualisation: false,
+      // ENABLE row virtualization - only render visible rows
+      animateRows: false,
+      // Disable row animations
+      suppressColumnMoveAnimation: true,
+      // Disable column move/resize animations
+      // Efficient updates with React Query cache
+      // getRowId enables change detection - grid only re-renders changed rows
+      // Works perfectly with React Query's cache updates
+      getRowId,
+      rowSelection: selection?.mode ? {
+        mode: selection.mode === "single" ? "singleRow" : "multiRow",
+        selectAll: "filtered",
+        // Header checkbox selects all filtered rows (across all pages)
+        // In multi-row mode, only checkboxes should toggle selection (clicking row body would replace selection)
+        enableClickSelection: selection.mode === "single",
+        checkboxes: true,
+        headerCheckbox: selection.mode === "multiple"
+      } : void 0,
+      selectionColumnDef: selection?.mode ? {
+        sortable: selection.mode === "multiple",
+        width: 48,
+        lockVisible: true,
+        // Cannot be hidden
+        suppressMovable: true
+        // Cannot be moved
+      } : void 0,
+      // Use normal layout for better performance - autoHeight causes forced reflows
+      domLayout: "normal",
+      // Stop editing when clicking outside the cell/grid
+      stopEditingWhenCellsLoseFocus: true,
+      // Additional performance optimizations
+      suppressCellFocus: true,
+      // Don't focus cells on click (faster)
+      suppressRowHoverHighlight: true,
+      // Disable hover highlight - reduces DOM manipulation during scroll
+      suppressScrollOnNewData: true,
+      // Don't scroll when data updates
+      suppressAggFuncInHeader: true,
+      // Don't show aggregation functions (faster)
+      // Tooltip UX: the AG Grid default show-delay is 2 s which hurts
+      // discoverability for cells where tooltips carry the "reveal full
+      // content" affordance for non-editable users. 300 ms is snappy
+      // without being accidental. tooltipInteraction lets users hover
+      // onto the tooltip itself (e.g. to select / copy long text).
+      // These are AG Grid's native tooltip controls — no React / Radix
+      // provider involved, zero per-row cost; tooltip DOM is created on
+      // demand when hover-delay elapses and destroyed on mouseout.
+      tooltipShowDelay: 300,
+      tooltipHideDelay: 4e3,
+      tooltipInteraction: true,
+      // Pagination (disabled by default)
+      pagination,
+      paginationPageSizeSelector,
+      defaultColDef: {
+        sortable: true,
+        resizable: true,
+        unSortIcon: true,
+        // Show unsort icon
+        sortingOrder: ["asc", "desc", null],
+        // 3-way sorting: asc → desc → unsorted (AG Grid default)
+        wrapText: false,
+        // Disable text wrapping for cleaner display
+        autoHeight: false,
+        // Use fixed row height from theme
+        wrapHeaderText: false,
+        // Disable header text wrapping for cleaner look
+        autoHeaderHeight: false,
+        // Fixed header height
+        filterParams: {
+          maxNumConditions: 1,
+          buttons: ["reset"]
+        }
+      }
+    };
+  }, [selection?.mode, getRowId, pagination, paginationPageSizeSelector]);
+  const combinedOptions = useMemo(
+    () => ({ ...defaultOptions, ...gridOptions }),
+    [defaultOptions, gridOptions]
+  );
+  const containerStyle = useMemo(() => {
+    const style = { height };
+    if (rowHeight) {
+      const LINE_PX = 14 * 1.35;
+      const BORDER = 2;
+      const PREFERRED_PAD = 16;
+      const padTotal = Math.max(0, Math.min(PREFERRED_PAD, rowHeight - BORDER - LINE_PX));
+      const lines = Math.max(1, Math.floor((rowHeight - BORDER - padTotal) / LINE_PX));
+      const vars = style;
+      vars["--abstract-pad-y"] = `${padTotal / 2}px`;
+      vars["--abstract-max-h"] = `${lines * LINE_PX + padTotal + BORDER}px`;
+    }
+    return style;
+  }, [height, rowHeight]);
+  useEffect(() => {
+    const api = gridApiRef.current;
+    if (!api || api.isDestroyed() || !rowHeight) return;
+    api.setGridOption("rowHeight", rowHeight);
+    api.resetRowHeights();
+  }, [rowHeight]);
+  const containerClassName = useMemo(() => {
+    const baseClass = className || "";
+    const shadowClass = "shadow-sm";
+    const alignClass2 = rowHeight ? "ag-cells-centered" : "";
+    return [baseClass, shadowClass, alignClass2].filter(Boolean).join(" ");
+  }, [className, rowHeight]);
+  if (isLoading) {
+    const skeletonRowCount = 12;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `${testId}-loading`,
+        className: containerClassName,
+        style: containerStyle,
+        "aria-busy": "true",
+        "aria-label": loadingMessage,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex h-11 items-center gap-4 border-b border-border/40 px-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-6 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-32 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-28 rounded bg-muted animate-pulse" }),
+            /* @__PURE__ */ jsx("div", { className: "h-3 w-16 rounded bg-muted animate-pulse ml-auto" })
+          ] }),
+          Array.from({ length: skeletonRowCount }).map((_, rowIdx) => /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center gap-4 border-b border-border/20 px-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-sm bg-muted/70 animate-pulse" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/70 animate-pulse",
+                style: { width: `${20 + rowIdx * 17 % 40}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/60 animate-pulse",
+                style: { width: `${8 + rowIdx * 11 % 12}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/60 animate-pulse",
+                style: { width: `${6 + rowIdx * 7 % 10}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-3 rounded bg-muted/50 animate-pulse ml-auto",
+                style: { width: `${5 + rowIdx * 5 % 8}%` }
+              }
+            )
+          ] }, rowIdx))
+        ]
+      }
+    );
+  }
+  if ((showEmpty ?? items.length === 0) && emptyState) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `${testId}-empty`,
+        className: "flex flex-col justify-center items-center h-96 text-center p-6",
+        children: [
+          emptyState.icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 mb-4", children: emptyState.icon }),
+          emptyState.title && /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium mb-2", children: emptyState.title }),
+          emptyState.message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6 max-w-md", children: emptyState.message }),
+          emptyState.action
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: containerClassName, style: containerStyle, "data-testid": testId, children: /* @__PURE__ */ jsx(
+    AgGridReact,
+    {
+      theme: arbiTheme,
+      modules: [AllCommunityModule],
+      columnDefs,
+      rowData: items,
+      pinnedBottomRowData,
+      pinnedTopRowData,
+      getRowId,
+      initialState,
+      onGridReady: handleGridReady,
+      onFirstDataRendered: handleFirstDataRendered,
+      onModelUpdated: handleModelUpdated,
+      onSelectionChanged: handleSelectionChanged,
+      onCellValueChanged,
+      onRowClicked: handleRowClicked,
+      onStateUpdated: handleStateUpdated,
+      ...combinedOptions
+    }
+  ) });
+}
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  actions,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", className),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "eyebrow mb-1", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-ink", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      ]
+    }
+  );
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  lead,
+  align = "left",
+  className,
+  invert
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", align === "center" && "mx-auto text-center", className), children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "eyebrow mb-3", children: eyebrow }),
+    /* @__PURE__ */ jsx(
+      "h2",
+      {
+        className: cn(
+          "font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+          invert ? "text-parchment" : "text-ink"
+        ),
+        children: title
+      }
+    ),
+    lead && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-4 text-lg leading-relaxed",
+          invert ? "text-parchment/70" : "text-muted-foreground"
+        ),
+        children: lead
+      }
+    )
+  ] });
+}
+function Toolbar({
+  search,
+  onSearch,
+  searchPlaceholder = "Search\u2026",
+  filters,
+  actions,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [
+          onSearch && /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-xs", children: [
+            /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: search,
+                onChange: (e) => onSearch(e.target.value),
+                placeholder: searchPlaceholder,
+                className: "bg-card text-sm placeholder:text-muted-foreground/70 focus-visible:border-ring/60 focus-visible:ring-2 focus-visible:ring-ring/50 pl-8",
+                "data-testid": testId ? `${testId}-search` : "toolbar-search"
+              }
+            )
+          ] }),
+          filters
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+      ]
+    }
+  );
+}
+function MetricCard({
+  label,
+  value,
+  icon: Icon,
+  hint,
+  delta,
+  accent = "ink",
+  testId
+}) {
+  const accentColor = accent === "emerald" ? "text-emerald" : accent === "brass" ? "text-[color:var(--color-brass)]" : "text-ink";
+  const deltaGood = delta?.good ?? delta?.direction === "up";
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "card-hover rounded-xl p-5", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+      Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-4 shrink-0", accentColor) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-2 font-display text-2xl font-semibold tracking-tight",
+        "data-testid": testId && `${testId}-value`,
+        children: value
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-2", children: [
+      delta && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-0.5 text-xs font-medium",
+            deltaGood ? "text-success" : "text-destructive"
+          ),
+          children: [
+            delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
+            delta.value
+          ]
+        }
+      ),
+      hint && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: hint })
+    ] })
+  ] });
+}
+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",
+  className,
+  testId
+}) {
+  const shape = cn(ASPECT[aspect] ?? ASPECT["16:9"], ROUNDED[rounded] ?? ROUNDED.lg);
+  if (src) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: cn("w-full object-cover", shape, className),
+        "data-testid": testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsx(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 Hero({
+  eyebrow,
+  title,
+  subtitle,
+  primaryCta,
+  secondaryCta,
+  align = "left",
+  tone = "default",
+  imageUrl,
+  testId
+}) {
+  const subtle = tone === "ink" ? "text-background/70" : "text-muted-foreground";
+  const eyebrowClass = tone === "ink" ? "text-background/60" : "text-muted-foreground";
+  const centered = align === "center";
+  const copy = /* @__PURE__ */ jsxs("div", { className: cn("max-w-2xl", centered && "mx-auto text-center"), children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm font-semibold uppercase tracking-wider", eyebrowClass), children: eyebrow }),
+    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-semibold tracking-tight text-balance sm:text-5xl", children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg leading-relaxed", subtle), children: subtitle }),
+    (primaryCta?.label || secondaryCta?.label) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("mt-8 flex flex-col gap-3 sm:flex-row", centered && "sm:justify-center"),
+        children: [
+          primaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", children: /* @__PURE__ */ jsxs("a", { href: primaryCta.href || "#", children: [
+            primaryCta.label,
+            /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+          ] }) }),
+          secondaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: "outline", children: /* @__PURE__ */ jsx("a", { href: secondaryCta.href || "#", children: secondaryCta.label }) })
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("section", { className: cn(TONE_SURFACE[tone] ?? TONE_SURFACE.default), "data-testid": testId, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-5 py-20 lg:px-8 lg:py-28", children: centered ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-12", children: [
+    copy,
+    imageUrl && /* @__PURE__ */ jsx(
+      BlockImage,
+      {
+        src: imageUrl,
+        aspect: "16:9",
+        rounded: "lg",
+        className: "w-full max-w-4xl",
+        testId: testId && `${testId}-image`
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    copy,
+    /* @__PURE__ */ jsx(
+      BlockImage,
+      {
+        src: imageUrl,
+        aspect: "4:5",
+        rounded: "lg",
+        testId: testId && `${testId}-image`
+      }
+    )
+  ] }) }) });
+}
+var COLS = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3"
+};
+function FeatureGrid({ columns = "3", items, testId }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-5", COLS[columns] ?? COLS["3"]), "data-testid": testId, children: (items ?? []).map((item, i) => {
+    const Icon = item.icon;
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        variant: "outline",
+        className: "h-full p-6",
+        "data-testid": testId && `${testId}-item-${i}`,
+        children: [
+          Icon && /* @__PURE__ */ jsx("span", { className: "mb-4 inline-flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: item.title }),
+          item.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: item.description })
+        ]
+      },
+      i
+    );
+  }) });
+}
+var GRID = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 sm:grid-cols-3",
+  4: "grid-cols-2 lg:grid-cols-4"
+};
+function StatGroup({ items, testId }) {
+  const list = items ?? [];
+  const cols = GRID[Math.min(list.length, 4)] ?? GRID[4];
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-8", cols), "data-testid": testId, children: list.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsx("dt", { className: "sr-only", children: item.label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-4xl font-semibold tracking-tight sm:text-5xl", children: item.value }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: item.label })
+  ] }, i)) });
+}
+function Testimonial({ quote, author, role, avatarUrl, testId }) {
+  return /* @__PURE__ */ jsxs(Card, { variant: "outline", className: "mx-auto max-w-3xl p-8 text-center", "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Quote, { className: "mx-auto size-8 text-primary/40", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("blockquote", { className: "mt-4 text-xl font-medium leading-relaxed text-balance", children: quote }),
+    (author || avatarUrl) && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-center gap-3", children: [
+      (avatarUrl || author) && /* @__PURE__ */ jsxs(Avatar, { children: [
+        avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: avatarUrl, alt: author ?? "" }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: initials(author || "?") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+        author && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: author }),
+        role && /* @__PURE__ */ 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", testId }) {
+  const subtle = tone === "default" ? "text-primary-foreground/80" : tone === "ink" ? "text-background/70" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl px-8 py-14 text-center",
+        TONE_SURFACE2[tone] ?? TONE_SURFACE2.default
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-2xl text-lg", subtle), children: subtitle }),
+        cta?.label && /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: tone === "default" ? "secondary" : "default", children: /* @__PURE__ */ jsxs("a", { href: cta.href || "#", children: [
+          cta.label,
+          /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+        ] }) }) })
+      ]
+    }
+  );
+}
+function LogoCloud({ items, testId }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", "data-testid": testId, children: (items ?? []).map((item, i) => /* @__PURE__ */ 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__ */ jsx("div", { className: "mx-auto max-w-3xl divide-y divide-border", "data-testid": testId, children: (items ?? []).map((item, i) => /* @__PURE__ */ jsxs("details", { className: "group py-4", "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between gap-4 text-left text-base font-medium", children: [
+      item.question,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-180" })
+    ] }),
+    item.answer && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: item.answer })
+  ] }, i)) });
+}
+function RichTextBlock({ content, testId }) {
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl", "data-testid": testId, children: /* @__PURE__ */ jsx(AiMarkdown, { children: content ?? "" }) });
+}
+var STYLES = {
+  info: { wrap: "border-primary/30 bg-primary/5", icon: "text-primary", Icon: Info },
+  success: { wrap: "border-success/30 bg-success/10", icon: "text-success", Icon: CheckCircle2 },
+  warning: { wrap: "border-warning/40 bg-warning/10", icon: "text-warning", Icon: AlertTriangle },
+  danger: {
+    wrap: "border-destructive/30 bg-destructive/10",
+    icon: "text-destructive",
+    Icon: XCircle
+  }
+};
+function Callout({ variant = "info", title, body, testId }) {
+  const style = STYLES[variant] ?? STYLES.info;
+  const Icon = style.Icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex gap-3 rounded-lg border p-4 text-foreground", style.wrap),
+      "data-testid": testId,
+      role: "note",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: cn("mt-0.5 size-5 shrink-0", style.icon), "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }),
+          body && /* @__PURE__ */ 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__ */ jsxs(Avatar, { className: cn(SIZE[size] ?? SIZE.md), "data-testid": testId, children: [
+    src && /* @__PURE__ */ jsx(AvatarImage, { src, alt: name }),
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "font-semibold", children: initials(name || "?") })
+  ] });
+}
+function Navbar({ brand, links, cta, testId }) {
+  return /* @__PURE__ */ jsx("header", { className: "border-b border-border bg-background", "data-testid": testId, children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex max-w-7xl items-center justify-between gap-6 px-5 py-4 lg:px-8", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tight", children: brand }),
+    /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-6 md:flex", children: (links ?? []).map((link, i) => /* @__PURE__ */ 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__ */ jsx(Button, { asChild: true, size: "sm", children: /* @__PURE__ */ jsx("a", { href: cta.href || "#", children: cta.label }) })
+  ] }) });
+}
+function Footer({ columns, copyright, testId }) {
+  return /* @__PURE__ */ jsx("footer", { className: "border-t border-border bg-muted text-foreground", "data-testid": testId, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-5 py-14 lg:px-8", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs("div", { "data-testid": testId && `${testId}-col-${i}`, children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight", children: col.heading }),
+      /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: (col.links ?? []).map((link, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link.href || "#",
+          className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+          children: link.label
+        }
+      ) }, j)) })
+    ] }, i)) }),
+    copyright && /* @__PURE__ */ 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 = 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__ */ jsx("li", { className: "leading-relaxed marker:text-muted-foreground", children: item.text }, i));
+  return ordered ? /* @__PURE__ */ jsx("ol", { className, "data-testid": testId, children: content }) : /* @__PURE__ */ jsx("ul", { className, "data-testid": testId, children: content });
+}
+var GRID2 = {
+  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__ */ jsx(
+    "div",
+    {
+      className: cn("grid grid-cols-1", GRID2[count] ?? GRID2[3], GAP[gap] ?? GAP.md),
+      "data-testid": testId,
+      children: columns.map((col, i) => /* @__PURE__ */ 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__ */ jsx("div", { className: 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__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto w-full",
+        WIDTH[width] ?? WIDTH.default,
+        PADDING[padding] ?? PADDING.md
+      ),
+      "data-testid": testId,
+      children
+    }
+  );
+}
+var EMPTY_DATA = { content: [], root: {} };
+function StudioEditor({
+  config,
+  pages,
+  persistence,
+  themeBundle,
+  defaultTheme,
+  brandLabel,
+  backHref,
+  backLabel = "Back",
+  live,
+  initialSlug,
+  testIdPrefix = "studio"
+}) {
+  const arbi = useArbi();
+  const [slug, setSlug] = useState(initialSlug ?? pages[0]?.slug ?? "home");
+  const [data, setData] = useState(EMPTY_DATA);
+  const [rev, setRev] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [themeOpen, setThemeOpen] = useState(false);
+  const [via, setVia] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const latest = useRef(EMPTY_DATA);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    void (async () => {
+      const { data: loaded } = await persistence.loadPage(arbi, live, slug);
+      if (cancelled) return;
+      const next = loaded ?? EMPTY_DATA;
+      setData(next);
+      latest.current = next;
+      setRev((r) => r + 1);
+      setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [slug, live]);
+  const persist4 = useCallback(
+    async (toSave) => {
+      setSaving(true);
+      const where = await persistence.savePage(arbi, live, slug, toSave);
+      setVia(where);
+      setSaving(false);
+    },
+    [arbi, live, slug, persistence]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      const { data: stored } = await persistence.loadTheme(arbi, live);
+      if (cancelled || !stored) return;
+      themeBundle.useStore.setState({
+        colors: { ...defaultTheme.colors, ...stored.colors },
+        fonts: stored.fonts ?? defaultTheme.fonts,
+        radius: stored.radius ?? defaultTheme.radius,
+        activePresetId: null
+      });
+      applyStoredTheme(themeBundle);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [arbi, live]);
+  const saveThemeToArbi = useCallback(async () => {
+    const snapshot = themeBundle.useStore.getState().snapshot();
+    return persistence.saveTheme(arbi, live, snapshot);
+  }, [arbi, live, persistence, themeBundle]);
+  return /* @__PURE__ */ jsxs("div", { className: "al-studio", "data-testid": "page-studio", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-3 border-b border-border bg-card px-4 py-2", children: [
+      backHref && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Link,
+          {
+            to: backHref,
+            className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground hover:text-emerald",
+            "data-testid": `${testIdPrefix}-back`,
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+              " ",
+              backLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "h-4 w-px bg-border" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-display text-sm font-semibold text-ink", children: brandLabel }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: slug,
+          onChange: (e) => setSlug(e.target.value),
+          className: "rounded border border-border bg-background px-2 py-1 text-sm",
+          "data-testid": `${testIdPrefix}-slug`,
+          children: pages.map((p) => /* @__PURE__ */ jsx("option", { value: p.slug, children: p.label }, p.slug))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        via && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "text-xs text-muted-foreground",
+            "data-testid": `${testIdPrefix}-save-via`,
+            children: [
+              "saved via ",
+              via
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setThemeOpen((o) => !o),
+            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:border-emerald hover:text-emerald",
+            "data-testid": `${testIdPrefix}-theme-toggle`,
+            children: [
+              /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+              " Theme"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void persist4(latest.current),
+            disabled: saving || loading,
+            className: "inline-flex items-center gap-1.5 rounded-md bg-emerald px-3 py-1.5 text-sm font-medium text-parchment hover:bg-emerald-bright disabled:opacity-60",
+            "data-testid": `${testIdPrefix}-publish`,
+            children: [
+              saving ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Rocket, { className: "size-4" }),
+              saving ? "Publishing\u2026" : "Publish"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "al-studio__puck relative flex", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: loading ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+          "data-testid": `${testIdPrefix}-loading`,
+          children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-4 animate-spin" }),
+            " Loading \u201C",
+            slug,
+            "\u201D\u2026"
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        Puck,
+        {
+          config,
+          data,
+          onChange: (d) => {
+            latest.current = d;
+          },
+          onPublish: (d) => void persist4(d)
+        },
+        `${slug}-${rev}`
+      ) }),
+      themeOpen && /* @__PURE__ */ jsx(
+        "aside",
+        {
+          className: "w-80 shrink-0 border-l border-border",
+          "data-testid": `${testIdPrefix}-theme-drawer`,
+          children: /* @__PURE__ */ jsx(
+            ThemeEditor,
+            {
+              bundle: themeBundle,
+              variant: "drawer",
+              testIdPrefix: `${testIdPrefix}-theme`,
+              onSave: saveThemeToArbi
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function PageRenderer({
+  config,
+  persistence,
+  defaultTheme,
+  live,
+  slug: slugProp,
+  emptyState,
+  testIdPrefix = "studio"
+}) {
+  const params = useParams();
+  const slug = slugProp ?? params.slug ?? "home";
+  const arbi = useArbi();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    void (async () => {
+      const [{ data: page }, { data: theme }] = await Promise.all([
+        persistence.loadPage(arbi, live, slug),
+        persistence.loadTheme(arbi, live)
+      ]);
+      if (cancelled) return;
+      applyThemeVars(
+        theme ? { ...defaultTheme, ...theme, colors: { ...defaultTheme.colors, ...theme.colors } } : defaultTheme
+      );
+      setData(page);
+      setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [arbi, live, slug, persistence, defaultTheme]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex min-h-[60vh] items-center justify-center text-sm text-muted-foreground",
+        "data-testid": `${testIdPrefix}-render-loading`,
+        children: "Loading page\u2026"
+      }
+    );
+  }
+  if (!data || data.content.length === 0) {
+    const title = emptyState?.title ?? "Nothing published yet";
+    const body = emptyState?.body ?? `Publish the \u201C${slug}\u201D page to see it here.`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "mx-auto max-w-2xl px-5 py-24 text-center",
+        "data-testid": `${testIdPrefix}-render-empty`,
+        children: [
+          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold text-ink", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: body })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: /* @__PURE__ */ jsx(Render, { config, data }) });
+}
+
+// src/studio/persistence.ts
+function createStudioPersistence(cfg) {
+  const WORKSPACE_ID = cfg.workspaceId;
+  const FOLDER = cfg.folder ?? "site";
+  const pageKey = (slug) => `${cfg.storagePrefix}${slug}`;
+  const THEME_KEY = cfg.themeStorageKey ?? `${cfg.storagePrefix}theme`;
+  const THEME_FILE = cfg.themeFileName ?? "theme.json";
+  const pageFile = cfg.pageFileName ?? ((slug) => `${slug}.json`);
+  function canUseArbi(arbi, live) {
+    return live && !!arbi;
+  }
+  async function uploadJson(arbi, fileName, obj) {
+    await arbi.selectWorkspace(WORKSPACE_ID);
+    const blob = new Blob([JSON.stringify(obj, null, 2)], { type: "application/json" });
+    await arbi.documents.uploadFile(blob, fileName, { folder: FOLDER });
+  }
+  async function downloadJson(arbi, fileName) {
+    await arbi.selectWorkspace(WORKSPACE_ID);
+    const docs = await arbi.documents.list();
+    const match = docs.filter((d) => (d.file_name ?? "").endsWith(fileName) && (d.folder ?? "").includes(FOLDER)).sort((a, b) => a.created_at < b.created_at ? 1 : -1)[0];
+    if (!match) return null;
+    try {
+      const res = await arbi.documents.download(match.external_id);
+      return JSON.parse(await res.text());
+    } catch {
+      const parsed = await arbi.documents.getParsedContent(match.external_id, "content");
+      const raw = typeof parsed?.content === "string" ? parsed.content : JSON.stringify(parsed);
+      return JSON.parse(raw);
+    }
+  }
+  async function savePage(arbi, live, slug, data) {
+    try {
+      localStorage.setItem(pageKey(slug), JSON.stringify(data));
+    } catch {
+    }
+    if (canUseArbi(arbi, live)) {
+      try {
+        await uploadJson(arbi, pageFile(slug), data);
+        console.info(`[studio] saved page "${slug}" \u2192 ARBI (${WORKSPACE_ID})`);
+        return "arbi";
+      } catch (e) {
+        console.warn(`[studio] ARBI save failed for "${slug}", kept localStorage`, e);
+      }
+    }
+    console.info(`[studio] saved page "${slug}" \u2192 localStorage`);
+    return "local";
+  }
+  async function loadPage(arbi, live, slug) {
+    if (canUseArbi(arbi, live)) {
+      try {
+        const data = await downloadJson(arbi, pageFile(slug));
+        if (data) {
+          console.info(`[studio] loaded page "${slug}" \u2190 ARBI`);
+          return { data, via: "arbi" };
+        }
+      } catch (e) {
+        console.warn(`[studio] ARBI load failed for "${slug}", trying localStorage`, e);
+      }
+    }
+    const raw = safeLocalGet(pageKey(slug));
+    console.info(`[studio] loaded page "${slug}" \u2190 localStorage`);
+    return { data: raw ? JSON.parse(raw) : null, via: "local" };
+  }
+  async function saveTheme(arbi, live, theme) {
+    try {
+      localStorage.setItem(THEME_KEY, JSON.stringify(theme));
+    } catch {
+    }
+    if (canUseArbi(arbi, live)) {
+      try {
+        await uploadJson(arbi, THEME_FILE, theme);
+        console.info(`[studio] saved theme \u2192 ARBI (${WORKSPACE_ID})`);
+        return "arbi";
+      } catch (e) {
+        console.warn("[studio] ARBI theme save failed, kept localStorage", e);
+      }
+    }
+    console.info("[studio] saved theme \u2192 localStorage");
+    return "local";
+  }
+  async function loadTheme(arbi, live) {
+    if (canUseArbi(arbi, live)) {
+      try {
+        const data = await downloadJson(arbi, THEME_FILE);
+        if (data) return { data, via: "arbi" };
+      } catch (e) {
+        console.warn("[studio] ARBI theme load failed, trying localStorage", e);
+      }
+    }
+    const raw = safeLocalGet(THEME_KEY);
+    return { data: raw ? JSON.parse(raw) : null, via: "local" };
+  }
+  function safeLocalGet(key) {
+    try {
+      return localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  }
+  return { savePage, loadPage, saveTheme, loadTheme };
+}
+function AiTextField({
+  value,
+  onChange,
+  name,
+  label,
+  multiline,
+  placeholder,
+  kind,
+  workspaceId,
+  buildPrompt,
+  testIdPrefix
+}) {
+  const { docIds } = useWorkspaceDocs$1(workspaceId);
+  const task = useAiTask();
+  const [active, setActive] = useState(false);
+  const activeRef = useRef(false);
+  useEffect(() => {
+    if (activeRef.current && task.text) onChange(task.text);
+  }, [task.text, onChange]);
+  useEffect(() => {
+    if (active && !task.isRunning) {
+      activeRef.current = false;
+      setActive(false);
+    }
+  }, [active, task.isRunning]);
+  const write = async () => {
+    if (task.isRunning) return;
+    activeRef.current = true;
+    setActive(true);
+    await task.run(buildPrompt({ kind, label, current: value ?? "" }), docIds);
+  };
+  const inputTid = tid(`${testIdPrefix}-field`, name);
+  return /* @__PURE__ */ jsxs("div", { className: "al-ai-field", children: [
+    multiline ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "al-ai-field__input",
+        rows: 5,
+        value: value ?? "",
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        "data-testid": inputTid
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "al-ai-field__input",
+        value: value ?? "",
+        placeholder,
+        onChange: (e) => onChange(e.target.value),
+        "data-testid": inputTid
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "al-ai-field__btn",
+        onClick: () => void write(),
+        disabled: task.isRunning,
+        "data-testid": tid(`${testIdPrefix}-ai-write`, name),
+        title: "Draft this field with AI, grounded in the marketing workspace",
+        children: [
+          task.isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "size-3" }),
+          task.isRunning ? "Writing\u2026" : "Write with AI"
+        ]
+      }
+    )
+  ] });
+}
+function createAiFields(cfg) {
+  const { workspaceId, buildPrompt } = cfg;
+  const defaultKind = cfg.defaultKind ?? "copy";
+  const testIdPrefix = cfg.testIdPrefix ?? "studio";
+  const aiText = (label, placeholder) => ({
+    type: "custom",
+    label,
+    render: ({ value, onChange, name }) => /* @__PURE__ */ jsx(
+      AiTextField,
+      {
+        value: value ?? "",
+        onChange,
+        name,
+        label,
+        placeholder,
+        kind: defaultKind,
+        workspaceId,
+        buildPrompt,
+        testIdPrefix
+      }
+    )
+  });
+  const aiTextarea = (label, placeholder, kind = defaultKind) => ({
+    type: "custom",
+    label,
+    render: ({ value, onChange, name }) => /* @__PURE__ */ jsx(
+      AiTextField,
+      {
+        value: value ?? "",
+        onChange,
+        name,
+        label,
+        placeholder,
+        kind,
+        workspaceId,
+        buildPrompt,
+        testIdPrefix,
+        multiline: true
+      }
+    )
+  });
+  return { aiText, aiTextarea };
+}
+function Section({ children, tone = "default", className = "" }) {
+  const toneClass = tone === "ink" ? "bg-ink text-parchment" : tone === "muted" ? "border-y border-border bg-card/40" : "";
+  return /* @__PURE__ */ jsx("section", { className: `relative ${toneClass}`, children: /* @__PURE__ */ jsx("div", { className: `mx-auto max-w-7xl px-5 py-16 lg:px-8 lg:py-20 ${className}`, children }) });
+}
+var iconMap = {
+  FileText,
+  Folder,
+  Users,
+  Briefcase,
+  Calendar,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Info: Info,
+  TrendingUp,
+  DollarSign,
+  BarChart3,
+  Activity,
+  Bell,
+  Scale,
+  Gavel,
+  Sparkles: Sparkles,
+  // Marketing set
+  Zap,
+  Shield,
+  Rocket: Rocket,
+  Star,
+  Heart,
+  Globe,
+  Lock,
+  Mail,
+  Phone,
+  MapPin,
+  Award,
+  Target,
+  Layers,
+  Cloud,
+  Code,
+  Cpu,
+  MessageSquare
+};
+var ICON_OPTIONS = [
+  { label: "None", value: "" },
+  ...Object.keys(iconMap).map((name) => ({ label: name, value: name }))
+];
+function createBlockKit(ai) {
+  return {
+    textField: (label, placeholder) => ai ? ai.aiText(label, placeholder) : { type: "text", label, placeholder },
+    textareaField: (label, placeholder, kind) => ai ? ai.aiTextarea(label, placeholder, kind) : { type: "textarea", label, placeholder },
+    boolRadio: (label) => ({
+      type: "radio",
+      label,
+      options: [
+        { label: "No", value: false },
+        { label: "Yes", value: true }
+      ]
+    }),
+    iconField: (label = "Icon") => ({ type: "select", label, options: ICON_OPTIONS }),
+    resolveIcon: (name) => name ? iconMap[name] : void 0,
+    blockTestId: (id) => tid("arbi-block", id)
+  };
+}
+var emptySlot = [];
+var renderSlot = (slot) => {
+  if (typeof slot !== "function") return null;
+  const Slot = slot;
+  return /* @__PURE__ */ jsx(Slot, {});
+};
+var toneField = {
+  type: "radio",
+  label: "Tone",
+  options: [
+    { label: "Default", value: "default" },
+    { label: "Muted", value: "muted" },
+    { label: "Ink", value: "ink" }
+  ]
+};
+function createWebsiteBlocks(kit) {
+  const { textField, textareaField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
+  const ctaField = (label) => ({
+    type: "object",
+    label,
+    objectFields: {
+      label: textField("Label"),
+      href: { type: "text", label: "Link" }
+    }
+  });
+  const ColumnsBlock = {
+    label: "Columns",
+    fields: {
+      count: {
+        type: "radio",
+        label: "Columns",
+        options: [
+          { label: "2", value: 2 },
+          { label: "3", value: 3 },
+          { label: "4", value: 4 }
+        ]
+      },
+      gap: {
+        type: "radio",
+        label: "Gap",
+        options: [
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" }
+        ]
+      },
+      col1: { type: "slot" },
+      col2: { type: "slot" },
+      col3: { type: "slot" },
+      col4: { type: "slot" }
+    },
+    defaultProps: {
+      count: 3,
+      gap: "md",
+      col1: emptySlot,
+      col2: emptySlot,
+      col3: emptySlot,
+      col4: emptySlot
+    },
+    render: ({ id, count, gap, col1, col2, col3, col4 }) => {
+      const n = Number(count) || 3;
+      const columns = [col1, col2, col3, col4].slice(0, n).map(renderSlot);
+      return /* @__PURE__ */ jsx(Columns, { count: n, gap, columns, testId: blockTestId(id) });
+    }
+  };
+  const SpacerBlock = {
+    label: "Spacer",
+    fields: {
+      size: {
+        type: "radio",
+        label: "Size",
+        options: [
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" },
+          { label: "XL", value: "xl" }
+        ]
+      }
+    },
+    defaultProps: { size: "md" },
+    render: ({ id, size }) => /* @__PURE__ */ jsx(Spacer, { size, testId: blockTestId(id) })
+  };
+  const ContainerBlock = {
+    label: "Container",
+    fields: {
+      width: {
+        type: "radio",
+        label: "Width",
+        options: [
+          { label: "Narrow", value: "narrow" },
+          { label: "Default", value: "default" },
+          { label: "Wide", value: "wide" },
+          { label: "Full", value: "full" }
+        ]
+      },
+      padding: {
+        type: "radio",
+        label: "Padding",
+        options: [
+          { label: "None", value: "none" },
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" }
+        ]
+      },
+      children: { type: "slot" }
+    },
+    defaultProps: { width: "default", padding: "md", children: emptySlot },
+    render: ({ id, width, padding, children }) => /* @__PURE__ */ jsx(Container, { width, padding, testId: blockTestId(id), children: renderSlot(children) })
+  };
+  const HeroBlock = {
+    label: "Hero",
+    fields: {
+      eyebrow: textField("Eyebrow"),
+      title: textField("Title"),
+      subtitle: textareaField("Subtitle", void 0, "lead"),
+      primaryCta: ctaField("Primary CTA"),
+      secondaryCta: ctaField("Secondary CTA"),
+      align: {
+        type: "radio",
+        label: "Align",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" }
+        ]
+      },
+      tone: toneField,
+      imageUrl: { type: "text", label: "Image URL" }
+    },
+    defaultProps: {
+      eyebrow: "Introducing",
+      title: "Build a better website, faster.",
+      subtitle: "A flexible platform that helps your team ship polished, on-brand pages without waiting on engineering.",
+      primaryCta: { label: "Get started", href: "#" },
+      secondaryCta: { label: "Learn more", href: "#" },
+      align: "left",
+      tone: "default",
+      imageUrl: ""
+    },
+    render: ({ id, eyebrow, title, subtitle, primaryCta, secondaryCta, align, tone, imageUrl }) => /* @__PURE__ */ jsx(
+      Hero,
+      {
+        eyebrow,
+        title,
+        subtitle,
+        primaryCta,
+        secondaryCta,
+        align,
+        tone,
+        imageUrl,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const FeatureGridBlock = {
+    label: "Feature grid",
+    fields: {
+      columns: {
+        type: "radio",
+        label: "Columns",
+        options: [
+          { label: "2", value: "2" },
+          { label: "3", value: "3" }
+        ]
+      },
+      items: {
+        type: "array",
+        label: "Features",
+        arrayFields: {
+          icon: iconField(),
+          title: textField("Title"),
+          description: textareaField("Description")
+        },
+        defaultItemProps: {
+          icon: "Sparkles",
+          title: "Feature",
+          description: "Describe this feature."
+        },
+        getItemSummary: (item) => item?.title || "Feature"
+      }
+    },
+    defaultProps: {
+      columns: "3",
+      items: [
+        {
+          icon: "Zap",
+          title: "Fast by default",
+          description: "Ship pages in minutes with sensible, on-brand defaults."
+        },
+        {
+          icon: "Shield",
+          title: "Secure & reliable",
+          description: "Enterprise-grade security baked into every layer."
+        },
+        {
+          icon: "Layers",
+          title: "Composable",
+          description: "Mix and match blocks to build any layout you need."
+        }
+      ]
+    },
+    render: ({ id, columns, items }) => {
+      const list = (items ?? []).map(
+        (it) => ({
+          ...it,
+          icon: resolveIcon(it.icon)
+        })
+      );
+      return /* @__PURE__ */ jsx(FeatureGrid, { columns, items: list, testId: blockTestId(id) });
+    }
+  };
+  const StatGroupBlock = {
+    label: "Stat group",
+    fields: {
+      items: {
+        type: "array",
+        label: "Stats",
+        arrayFields: {
+          value: textField("Value"),
+          label: textField("Label")
+        },
+        defaultItemProps: { value: "100%", label: "Metric" },
+        getItemSummary: (item) => item?.label || "Stat"
+      }
+    },
+    defaultProps: {
+      items: [
+        { value: "10k+", label: "Active users" },
+        { value: "99.9%", label: "Uptime" },
+        { value: "4.9/5", label: "Customer rating" },
+        { value: "24/7", label: "Support" }
+      ]
+    },
+    render: ({ id, items }) => /* @__PURE__ */ jsx(StatGroup, { items, testId: blockTestId(id) })
+  };
+  const TestimonialBlock = {
+    label: "Testimonial",
+    fields: {
+      quote: textareaField("Quote"),
+      author: textField("Author"),
+      role: textField("Role"),
+      avatarUrl: { type: "text", label: "Avatar URL" }
+    },
+    defaultProps: {
+      quote: "This is the best tool our team has adopted in years. It just works.",
+      author: "Alex Morgan",
+      role: "Head of Product, Northwind",
+      avatarUrl: ""
+    },
+    render: ({ id, quote, author, role, avatarUrl }) => /* @__PURE__ */ jsx(
+      Testimonial,
+      {
+        quote,
+        author,
+        role,
+        avatarUrl,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const CTABannerBlock = {
+    label: "CTA banner",
+    fields: {
+      title: textField("Title"),
+      subtitle: textareaField("Subtitle"),
+      cta: ctaField("Button"),
+      tone: toneField
+    },
+    defaultProps: {
+      title: "Ready to get started?",
+      subtitle: "Join thousands of teams already building with us.",
+      cta: { label: "Start free trial", href: "#" },
+      tone: "default"
+    },
+    render: ({ id, title, subtitle, cta, tone }) => /* @__PURE__ */ jsx(CTABanner, { title, subtitle, cta, tone, testId: blockTestId(id) })
+  };
+  const LogoCloudBlock = {
+    label: "Logo cloud",
+    fields: {
+      items: {
+        type: "array",
+        label: "Logos",
+        arrayFields: { label: textField("Label") },
+        defaultItemProps: { label: "Brand" },
+        getItemSummary: (item) => item?.label || "Logo"
+      }
+    },
+    defaultProps: {
+      items: [
+        { label: "Northwind" },
+        { label: "Acme" },
+        { label: "Globex" },
+        { label: "Initech" },
+        { label: "Umbrella" }
+      ]
+    },
+    render: ({ id, items }) => /* @__PURE__ */ jsx(LogoCloud, { items, testId: blockTestId(id) })
+  };
+  const FAQBlock = {
+    label: "FAQ",
+    fields: {
+      items: {
+        type: "array",
+        label: "Questions",
+        arrayFields: {
+          question: textField("Question"),
+          answer: textareaField("Answer")
+        },
+        defaultItemProps: { question: "A question?", answer: "The answer." },
+        getItemSummary: (item) => item?.question || "Question"
+      }
+    },
+    defaultProps: {
+      items: [
+        {
+          question: "How does the free trial work?",
+          answer: "You get full access for 14 days, no credit card required."
+        },
+        {
+          question: "Can I change plans later?",
+          answer: "Yes \u2014 upgrade or downgrade at any time from your dashboard."
+        },
+        {
+          question: "Do you offer support?",
+          answer: "Every plan includes 24/7 support from our team."
+        }
+      ]
+    },
+    render: ({ id, items }) => /* @__PURE__ */ jsx(FAQ, { items, testId: blockTestId(id) })
+  };
+  const RichTextBlockConfig = {
+    label: "Rich text",
+    fields: {
+      content: textareaField("Content", void 0, "body")
+    },
+    defaultProps: {
+      content: "## About us\n\nWe build tools that help teams do their best work. Our platform combines **power** and _simplicity_ so you can focus on what matters.\n\n- Fast to learn\n- Easy to scale\n- Loved by teams"
+    },
+    render: ({ id, content }) => /* @__PURE__ */ jsx(RichTextBlock, { content, testId: blockTestId(id) })
+  };
+  const CalloutBlock = {
+    label: "Callout",
+    fields: {
+      variant: {
+        type: "radio",
+        label: "Variant",
+        options: [
+          { label: "Info", value: "info" },
+          { label: "Success", value: "success" },
+          { label: "Warning", value: "warning" },
+          { label: "Danger", value: "danger" }
+        ]
+      },
+      title: textField("Title"),
+      body: textareaField("Body")
+    },
+    defaultProps: {
+      variant: "info",
+      title: "Good to know",
+      body: "This is a helpful note that draws attention to important information."
+    },
+    render: ({ id, variant, title, body }) => /* @__PURE__ */ jsx(Callout, { variant, title, body, testId: blockTestId(id) })
+  };
+  const ImageBlock = {
+    label: "Image",
+    fields: {
+      src: { type: "text", label: "Image URL" },
+      alt: textField("Alt text"),
+      aspect: {
+        type: "radio",
+        label: "Aspect",
+        options: [
+          { label: "16:9", value: "16:9" },
+          { label: "4:3", value: "4:3" },
+          { label: "1:1", value: "1:1" },
+          { label: "21:9", value: "21:9" }
+        ]
+      },
+      rounded: {
+        type: "radio",
+        label: "Rounded",
+        options: [
+          { label: "None", value: "none" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" },
+          { label: "Full", value: "full" }
+        ]
+      }
+    },
+    defaultProps: { src: "", alt: "Image", aspect: "16:9", rounded: "lg" },
+    render: ({ id, src, alt, aspect, rounded }) => /* @__PURE__ */ jsx(BlockImage, { src, alt, aspect, rounded, testId: blockTestId(id) })
+  };
+  const AvatarBlockConfig = {
+    label: "Avatar",
+    fields: {
+      src: { type: "text", label: "Image URL" },
+      name: textField("Name"),
+      size: {
+        type: "radio",
+        label: "Size",
+        options: [
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" },
+          { label: "XL", value: "xl" }
+        ]
+      }
+    },
+    defaultProps: { src: "", name: "Jane Doe", size: "md" },
+    render: ({ id, src, name, size }) => /* @__PURE__ */ jsx(AvatarBlock, { src, name, size, testId: blockTestId(id) })
+  };
+  const NavbarBlock = {
+    label: "Navbar",
+    fields: {
+      brand: textField("Brand"),
+      links: {
+        type: "array",
+        label: "Links",
+        arrayFields: {
+          label: textField("Label"),
+          href: { type: "text", label: "Link" }
+        },
+        defaultItemProps: { label: "Link", href: "#" },
+        getItemSummary: (item) => item?.label || "Link"
+      },
+      cta: ctaField("CTA")
+    },
+    defaultProps: {
+      brand: "Acme",
+      links: [
+        { label: "Product", href: "#" },
+        { label: "Pricing", href: "#" },
+        { label: "About", href: "#" },
+        { label: "Contact", href: "#" }
+      ],
+      cta: { label: "Sign up", href: "#" }
+    },
+    render: ({ id, brand, links, cta }) => /* @__PURE__ */ jsx(Navbar, { brand, links, cta, testId: blockTestId(id) })
+  };
+  const FooterBlock = {
+    label: "Footer",
+    fields: {
+      columns: {
+        type: "array",
+        label: "Columns",
+        arrayFields: {
+          heading: textField("Heading"),
+          links: {
+            type: "array",
+            label: "Links",
+            arrayFields: {
+              label: textField("Label"),
+              href: { type: "text", label: "Link" }
+            },
+            defaultItemProps: { label: "Link", href: "#" },
+            getItemSummary: (item) => item?.label || "Link"
+          }
+        },
+        defaultItemProps: { heading: "Column", links: [{ label: "Link", href: "#" }] },
+        getItemSummary: (item) => item?.heading || "Column"
+      },
+      copyright: { type: "text", label: "Copyright" }
+    },
+    defaultProps: {
+      columns: [
+        {
+          heading: "Product",
+          links: [
+            { label: "Features", href: "#" },
+            { label: "Pricing", href: "#" }
+          ]
+        },
+        {
+          heading: "Company",
+          links: [
+            { label: "About", href: "#" },
+            { label: "Careers", href: "#" }
+          ]
+        },
+        {
+          heading: "Resources",
+          links: [
+            { label: "Blog", href: "#" },
+            { label: "Docs", href: "#" }
+          ]
+        },
+        {
+          heading: "Legal",
+          links: [
+            { label: "Privacy", href: "#" },
+            { label: "Terms", href: "#" }
+          ]
+        }
+      ],
+      copyright: "\xA9 2026 Acme, Inc. All rights reserved."
+    },
+    render: ({ id, columns, copyright }) => /* @__PURE__ */ jsx(Footer, { columns, copyright, testId: blockTestId(id) })
+  };
+  const ListBlockConfig = {
+    label: "List",
+    fields: {
+      ordered: boolRadio("Ordered"),
+      items: {
+        type: "array",
+        label: "Items",
+        arrayFields: { text: textField("Text") },
+        defaultItemProps: { text: "List item" },
+        getItemSummary: (item) => item?.text || "Item"
+      }
+    },
+    defaultProps: {
+      ordered: false,
+      items: [{ text: "First item" }, { text: "Second item" }, { text: "Third item" }]
+    },
+    render: ({ id, ordered, items }) => /* @__PURE__ */ jsx(ListBlock, { ordered, items, testId: blockTestId(id) })
+  };
+  return {
+    Columns: ColumnsBlock,
+    Spacer: SpacerBlock,
+    Container: ContainerBlock,
+    Hero: HeroBlock,
+    FeatureGrid: FeatureGridBlock,
+    StatGroup: StatGroupBlock,
+    Testimonial: TestimonialBlock,
+    CTABanner: CTABannerBlock,
+    LogoCloud: LogoCloudBlock,
+    FAQ: FAQBlock,
+    RichText: RichTextBlockConfig,
+    Callout: CalloutBlock,
+    Image: ImageBlock,
+    Avatar: AvatarBlockConfig,
+    Navbar: NavbarBlock,
+    Footer: FooterBlock,
+    List: ListBlockConfig
+  };
+}
+function createArbiBlocksConfig(opts = {}) {
+  const kit = createBlockKit(opts.aiFields);
+  const { textField, textareaField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
+  const SectionHeadingBlock = {
+    label: "Section heading",
+    fields: {
+      title: textField("Title"),
+      eyebrow: textField("Eyebrow"),
+      lead: textareaField("Lead", void 0, "lead"),
+      align: {
+        type: "radio",
+        label: "Align",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Center", value: "center" }
+        ]
+      },
+      invert: boolRadio("Invert (on dark)")
+    },
+    defaultProps: { title: "Section title", align: "left", invert: false },
+    render: ({ id, title, eyebrow, lead, align, invert }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(SectionHeading, { title, eyebrow, lead, align, invert }) })
+  };
+  const PageHeaderBlock = {
+    label: "Page header",
+    fields: {
+      title: textField("Title"),
+      eyebrow: textField("Eyebrow"),
+      description: textareaField("Description", void 0, "description")
+    },
+    defaultProps: { title: "Page title" },
+    // `actions` (ReactNode) is deferred for v1 — see module notes.
+    render: ({ id, title, eyebrow, description }) => /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title,
+        eyebrow,
+        description,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const EmptyStateBlock = {
+    label: "Empty state",
+    fields: {
+      title: textField("Title"),
+      description: textareaField("Description", void 0, "description"),
+      icon: iconField()
+    },
+    defaultProps: { title: "Nothing here yet" },
+    // `action` (ReactNode) is deferred for v1 — see module notes.
+    render: ({ id, title, description, icon }) => /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title,
+        description,
+        icon: resolveIcon(icon),
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const MetricCardBlock = {
+    label: "Metric card",
+    fields: {
+      label: { type: "text", label: "Label" },
+      value: { type: "text", label: "Value" },
+      hint: { type: "text", label: "Hint" },
+      accent: {
+        type: "radio",
+        label: "Accent",
+        options: [
+          { label: "Ink", value: "ink" },
+          { label: "Emerald", value: "emerald" },
+          { label: "Brass", value: "brass" }
+        ]
+      },
+      delta: {
+        type: "object",
+        label: "Delta",
+        objectFields: {
+          value: { type: "text", label: "Value" },
+          direction: {
+            type: "radio",
+            label: "Direction",
+            options: [
+              { label: "Up", value: "up" },
+              { label: "Down", value: "down" }
+            ]
+          },
+          good: boolRadio("Good")
+        }
+      },
+      icon: iconField()
+    },
+    defaultProps: { label: "Metric", value: "0", accent: "ink" },
+    render: ({ id, label, value, hint, accent, delta, icon }) => /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        label,
+        value,
+        hint,
+        accent,
+        delta,
+        icon: resolveIcon(icon),
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const DataTableBlockConfig = {
+    label: "Data table",
+    fields: {
+      caption: textField("Caption"),
+      columns: {
+        type: "array",
+        label: "Columns",
+        arrayFields: {
+          header: { type: "text", label: "Header" },
+          field: { type: "text", label: "Field key" },
+          align: {
+            type: "radio",
+            label: "Align",
+            options: [
+              { label: "Left", value: "left" },
+              { label: "Right", value: "right" },
+              { label: "Center", value: "center" }
+            ]
+          }
+        },
+        defaultItemProps: { header: "Column", field: "field", align: "left" },
+        getItemSummary: (item) => item?.header || "Column"
+      },
+      rows: {
+        type: "array",
+        label: "Rows",
+        arrayFields: {
+          cells: {
+            type: "array",
+            label: "Cells",
+            arrayFields: {
+              value: { type: "text", label: "Value" }
+            },
+            defaultItemProps: { value: "" },
+            getItemSummary: (item) => item?.value || "Cell"
+          }
+        },
+        defaultItemProps: { cells: [{ value: "" }, { value: "" }] },
+        getItemSummary: (_item, i) => `Row ${(i ?? 0) + 1}`
+      },
+      emptyText: textField("Empty text")
+    },
+    defaultProps: {
+      columns: [
+        { header: "Matter", field: "matter", align: "left" },
+        { header: "Status", field: "status", align: "left" }
+      ],
+      rows: [
+        { cells: [{ value: "Acme v. Globex" }, { value: "Active" }] },
+        { cells: [{ value: "Initech Merger" }, { value: "Closed" }] }
+      ],
+      emptyText: "No rows yet"
+    },
+    render: ({ id, columns, rows, caption, emptyText }) => {
+      const cols = columns ?? [];
+      const rawRows = rows ?? [];
+      const recordRows = rawRows.map((row) => {
+        const record = {};
+        cols.forEach((col, index) => {
+          record[col.field || `col-${index}`] = row.cells?.[index]?.value ?? "";
+        });
+        return record;
+      });
+      const normalisedCols = cols.map((col, index) => ({
+        ...col,
+        field: col.field || `col-${index}`
+      }));
+      return /* @__PURE__ */ jsx(
+        DataTableBlock,
+        {
+          columns: normalisedCols,
+          rows: recordRows,
+          caption,
+          emptyText,
+          testId: blockTestId(id)
+        }
+      );
+    }
+  };
+  const SectionBlock = {
+    label: "Section",
+    fields: {
+      children: { type: "slot" },
+      tone: {
+        type: "radio",
+        label: "Tone",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Muted", value: "muted" },
+          { label: "Ink", value: "ink" }
+        ]
+      }
+    },
+    defaultProps: { tone: "default", children: [] },
+    render: ({ id, tone, children: Children }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(Section, { tone, children: /* @__PURE__ */ jsx(Children, {}) }) })
+  };
+  const CardBlock = {
+    label: "Card",
+    fields: {
+      variant: {
+        type: "select",
+        label: "Variant",
+        options: [
+          { label: "Flat", value: "flat" },
+          { label: "Outline", value: "outline" },
+          { label: "Elevated", value: "elevated" }
+        ]
+      },
+      children: { type: "slot" }
+    },
+    defaultProps: { variant: "flat", children: [] },
+    render: ({ id, variant, children: Children }) => /* @__PURE__ */ jsx(Card, { variant, className: "p-5", "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(Children, {}) })
+  };
+  const ButtonBlock = {
+    label: "Button",
+    fields: {
+      children: { type: "text", label: "Label" },
+      variant: {
+        type: "select",
+        label: "Variant",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Accent", value: "accent" },
+          { label: "Destructive", value: "destructive" },
+          { label: "Outline", value: "outline" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Ghost", value: "ghost" },
+          { label: "Link", value: "link" }
+        ]
+      },
+      size: {
+        type: "select",
+        label: "Size",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Small", value: "sm" },
+          { label: "Large", value: "lg" },
+          { label: "Icon", value: "icon" }
+        ]
+      }
+    },
+    defaultProps: { variant: "default", size: "default", children: "Button" },
+    render: ({ id, children, variant, size }) => /* @__PURE__ */ jsx(Button, { variant, size, "data-testid": blockTestId(id), children })
+  };
+  const BadgeBlock = {
+    label: "Badge",
+    fields: {
+      text: { type: "text", label: "Text" },
+      variant: {
+        type: "select",
+        label: "Variant",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Accent", value: "accent" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Destructive", value: "destructive" },
+          { label: "Outline", value: "outline" }
+        ]
+      }
+    },
+    defaultProps: { text: "Badge", variant: "default" },
+    render: ({ id, text, variant }) => /* @__PURE__ */ jsx(Badge, { variant, "data-testid": blockTestId(id), children: text })
+  };
+  const SeparatorBlock = {
+    label: "Separator",
+    fields: {},
+    defaultProps: {},
+    render: ({ id }) => /* @__PURE__ */ jsx(Separator, { "data-testid": blockTestId(id) })
+  };
+  const website = createWebsiteBlocks(kit);
+  const components = {
+    SectionHeading: SectionHeadingBlock,
+    PageHeader: PageHeaderBlock,
+    EmptyState: EmptyStateBlock,
+    MetricCard: MetricCardBlock,
+    DataTable: DataTableBlockConfig,
+    Section: SectionBlock,
+    Card: CardBlock,
+    Button: ButtonBlock,
+    Badge: BadgeBlock,
+    Separator: SeparatorBlock,
+    ...website
+  };
+  const config = {
+    categories: {
+      Layout: {
+        title: "Layout",
+        components: ["Section", "Container", "Columns", "Card", "Spacer"]
+      },
+      Marketing: {
+        title: "Marketing",
+        components: [
+          "Hero",
+          "FeatureGrid",
+          "StatGroup",
+          "Testimonial",
+          "CTABanner",
+          "LogoCloud",
+          "FAQ"
+        ]
+      },
+      Content: {
+        title: "Content",
+        components: ["SectionHeading", "PageHeader", "EmptyState", "RichText", "Callout", "List"]
+      },
+      Media: { title: "Media", components: ["Image", "Avatar"] },
+      Navigation: { title: "Navigation", components: ["Navbar", "Footer"] },
+      Data: { title: "Data", components: ["MetricCard", "DataTable"] },
+      Primitives: { title: "Primitives", components: ["Button", "Badge", "Separator"] }
+    },
+    components,
+    root: {
+      render: ({ children }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-background text-foreground font-sans",
+          "data-testid": "arbi-blocks-page-root",
+          children
+        }
+      )
+    }
+  };
+  return config;
+}
+
+// src/builder/modules/registry.ts
+function createModuleRegistry(appNav) {
+  const DEFAULT_MODULES = appNav.flatMap(
+    (section, sIdx) => section.items.map((item, iIdx) => ({
+      id: item.id,
+      label: item.label,
+      section: section.heading,
+      icon: item.icon,
+      to: item.to,
+      arbi: item.arbi ?? false,
+      end: item.end ?? false,
+      // Global order that preserves section grouping then in-section order.
+      defaultOrder: sIdx * 100 + iIdx
+    }))
+  );
+  const SECTION_ORDER = appNav.map((s) => s.heading);
+  const toNavItem = (m) => ({
+    to: m.to,
+    label: m.label,
+    icon: m.icon,
+    id: m.id,
+    arbi: m.arbi || void 0,
+    end: m.end || void 0
+  });
+  return { DEFAULT_MODULES, SECTION_ORDER, toNavItem };
+}
+function createModuleStore({
+  registry,
+  storageKey
+}) {
+  const { DEFAULT_MODULES, SECTION_ORDER, toNavItem } = registry;
+  function isEnabled(overrides, id2) {
+    return overrides[id2]?.enabled ?? true;
+  }
+  const id = (m) => m.id;
+  function orderOf(overrides, m) {
+    return overrides[id(m)]?.order ?? m.defaultOrder;
+  }
+  const useModuleStore = create()(
+    persist(
+      (set, get) => ({
+        overrides: {},
+        toggle: (moduleId) => {
+          const m = DEFAULT_MODULES.find((x) => x.id === moduleId);
+          if (!m) return;
+          const cur = get().overrides;
+          const prev = cur[moduleId] ?? { enabled: true, order: m.defaultOrder };
+          set({
+            overrides: { ...cur, [moduleId]: { ...prev, enabled: !isEnabled(cur, moduleId) } }
+          });
+        },
+        move: (moduleId, dir) => {
+          const cur = get().overrides;
+          const target = DEFAULT_MODULES.find((x) => x.id === moduleId);
+          if (!target) return;
+          const siblings = DEFAULT_MODULES.filter((x) => x.section === target.section).sort(
+            (a2, b2) => orderOf(cur, a2) - orderOf(cur, b2)
+          );
+          const idx = siblings.findIndex((x) => x.id === moduleId);
+          const swapIdx = dir === "up" ? idx - 1 : idx + 1;
+          if (swapIdx < 0 || swapIdx >= siblings.length) return;
+          const a = siblings[idx];
+          const b = siblings[swapIdx];
+          const next = { ...cur };
+          next[a.id] = { enabled: isEnabled(cur, a.id), order: orderOf(cur, b) };
+          next[b.id] = { enabled: isEnabled(cur, b.id), order: orderOf(cur, a) };
+          set({ overrides: next });
+        },
+        reset: () => set({ overrides: {} })
+      }),
+      { name: storageKey }
+    )
+  );
+  function useResolvedModules() {
+    const overrides = useModuleStore((s) => s.overrides);
+    return useMemo(() => {
+      return SECTION_ORDER.map((section) => ({
+        section,
+        modules: DEFAULT_MODULES.filter((m) => m.section === section).map((m) => ({ ...m, enabled: isEnabled(overrides, m.id), order: orderOf(overrides, m) })).sort((a, b) => a.order - b.order)
+      }));
+    }, [overrides]);
+  }
+  function useEnabledNav() {
+    const grouped = useResolvedModules();
+    return useMemo(
+      () => grouped.map((g) => ({
+        heading: g.section,
+        items: g.modules.filter((m) => m.enabled).map(toNavItem)
+      })).filter((s) => s.items.length > 0),
+      [grouped]
+    );
+  }
+  return { useModuleStore, useResolvedModules, useEnabledNav };
+}
+var toggle = (list, id) => list.includes(id) ? list.filter((x) => x !== id) : [...list, id];
+function createAgentSelectionStore({
+  storageKey
+}) {
+  return create()(
+    persist(
+      (set) => ({
+        configIds: [],
+        agentIds: [],
+        toggleConfig: (id) => set((s) => ({ configIds: toggle(s.configIds, id) })),
+        toggleAgent: (id) => set((s) => ({ agentIds: toggle(s.agentIds, id) })),
+        clear: () => set({ configIds: [], agentIds: [] })
+      }),
+      { name: storageKey }
+    )
+  );
+}
+
+// src/builder/export.ts
+function createVerticalExport(cfg) {
+  const { vertical, themeStore, moduleStore, agentStore, registry } = cfg;
+  const { DEFAULT_MODULES, SECTION_ORDER } = registry;
+  function buildVerticalConfig() {
+    const { colors, fonts, radius } = themeStore.getState();
+    const { overrides } = moduleStore.useModuleStore.getState();
+    const { configIds, agentIds } = agentStore.getState();
+    const modules = DEFAULT_MODULES.map((m) => ({
+      id: m.id,
+      label: m.label,
+      section: m.section,
+      to: m.to,
+      arbi: m.arbi,
+      enabled: overrides[m.id]?.enabled ?? true,
+      order: overrides[m.id]?.order ?? m.defaultOrder
+    })).sort(
+      (a, b) => SECTION_ORDER.indexOf(a.section) - SECTION_ORDER.indexOf(b.section) || a.order - b.order
+    );
+    return {
+      version: 1,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      vertical,
+      theme: { colors, fonts, radius },
+      modules,
+      agents: { configIds, agentIds }
+    };
+  }
+  function serialize(config = buildVerticalConfig()) {
+    return JSON.stringify(config, null, 2);
+  }
+  function download(config = buildVerticalConfig()) {
+    const blob = new Blob([serialize(config)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${config.vertical.key}-vertical.json`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+  return { buildVerticalConfig, serialize, download };
+}
+function ModuleManager({ store, testIdPrefix = "builder" }) {
+  const grouped = store.useResolvedModules();
+  const toggle2 = store.useModuleStore((s) => s.toggle);
+  const move = store.useModuleStore((s) => s.move);
+  const reset = store.useModuleStore((s) => s.reset);
+  const enabledCount = grouped.reduce((n, g) => n + g.modules.filter((m) => m.enabled).length, 0);
+  const total = grouped.reduce((n, g) => n + g.modules.length, 0);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", "data-testid": `${testIdPrefix}-modules`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", "data-testid": `${testIdPrefix}-modules-count`, children: [
+        enabledCount,
+        " of ",
+        total,
+        " modules enabled"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: reset,
+          "data-testid": `${testIdPrefix}-modules-reset`,
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" }),
+            " Reset"
+          ]
+        }
+      )
+    ] }),
+    grouped.map((group) => /* @__PURE__ */ jsxs(
+      Card,
+      {
+        variant: "elevated",
+        className: "rounded-xl",
+        "data-testid": tid(`${testIdPrefix}-modules-section`, group.section),
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: group.section }) }),
+          /* @__PURE__ */ jsx(CardContent, { className: "space-y-1.5", children: group.modules.map((m, idx) => {
+            const Icon = m.icon;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center gap-3 rounded-md border border-border/60 bg-card px-3 py-2",
+                "data-testid": tid(`${testIdPrefix}-module`, m.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "icon",
+                        variant: "ghost",
+                        className: "size-6",
+                        disabled: idx === 0,
+                        onClick: () => move(m.id, "up"),
+                        "aria-label": `Move ${m.label} up`,
+                        "data-testid": tid(`${testIdPrefix}-module-up`, m.id),
+                        children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "icon",
+                        variant: "ghost",
+                        className: "size-6",
+                        disabled: idx === group.modules.length - 1,
+                        onClick: () => move(m.id, "down"),
+                        "aria-label": `Move ${m.label} down`,
+                        "data-testid": tid(`${testIdPrefix}-module-down`, m.id),
+                        children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: m.label }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: m.to })
+                  ] }),
+                  m.arbi && /* @__PURE__ */ jsxs(Badge, { variant: "accent", className: "text-[10px]", children: [
+                    /* @__PURE__ */ jsx(Sparkles, { className: "size-3" }),
+                    " ARBI"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: m.enabled,
+                      onCheckedChange: () => toggle2(m.id),
+                      "aria-label": `Enable ${m.label}`,
+                      "data-testid": tid(`${testIdPrefix}-module-toggle`, m.id)
+                    }
+                  )
+                ]
+              },
+              m.id
+            );
+          }) })
+        ]
+      },
+      group.section
+    ))
+  ] });
+}
+var TIER_VARIANT = {
+  Premium: "default",
+  Wise: "accent",
+  Fast: "secondary",
+  auto: "secondary"
+};
+function ConfigModelBadge({ configId, testIdPrefix }) {
+  const arbi = useArbi();
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["builder", "config-model", configId],
+    queryFn: async () => (await arbi.agentConfig.get(configId)).Agents.AGENT_MODEL_NAME,
+    staleTime: 6e4
+  });
+  const tier = isLoading ? "\u2026" : isError || !data ? "\u2014" : data;
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: TIER_VARIANT[tier] ?? "secondary",
+      "data-testid": tid(`${testIdPrefix}-agents-config-tier`, configId),
+      children: [
+        /* @__PURE__ */ jsx(Cpu, { className: "size-3" }),
+        " ",
+        tier
+      ]
+    }
+  );
+}
+function AgentsPanel({ store, testIdPrefix = "builder" }) {
+  const { data: configs, isLoading: configsLoading } = useConfigs();
+  const { data: agents = [], isLoading: agentsLoading } = useAgents();
+  const configIds = store((s) => s.configIds);
+  const agentIds = store((s) => s.agentIds);
+  const toggleConfig = store((s) => s.toggleConfig);
+  const toggleAgent = store((s) => s.toggleAgent);
+  const versions = configs?.versions ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": `${testIdPrefix}-agents`, children: [
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        variant: "elevated",
+        className: "rounded-xl",
+        "data-testid": `${testIdPrefix}-agents-configs`,
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+            /* @__PURE__ */ jsx(BrainCircuit, { className: "size-4 text-emerald" }),
+            " Behaviour configurations",
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1", children: versions.length })
+          ] }) }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-1.5", children: [
+            configsLoading && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading configurations\u2026" }),
+            !configsLoading && versions.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No configurations found on this workspace." }),
+            versions.map((v) => /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex cursor-pointer items-center gap-3 rounded-md border border-border/60 bg-card px-3 py-2",
+                "data-testid": tid(`${testIdPrefix}-agents-config`, v.external_id),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: configIds.includes(v.external_id),
+                      onCheckedChange: () => toggleConfig(v.external_id),
+                      "data-testid": tid(`${testIdPrefix}-agents-config-toggle`, v.external_id)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: v.title ?? "Untitled behaviour" }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: v.external_id })
+                  ] }),
+                  /* @__PURE__ */ jsx(ConfigModelBadge, { configId: v.external_id, testIdPrefix })
+                ]
+              },
+              v.external_id
+            ))
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", "data-testid": `${testIdPrefix}-agents-agents`, children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+        /* @__PURE__ */ jsx(Bot, { className: "size-4 text-emerald" }),
+        " Agents",
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1", children: agents.length })
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-1.5", children: [
+        agentsLoading && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading agents\u2026" }),
+        !agentsLoading && agents.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No agents provisioned." }),
+        agents.map((a) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex cursor-pointer items-center gap-3 rounded-md border border-border/60 bg-card px-3 py-2",
+            "data-testid": tid(`${testIdPrefix}-agents-agent`, a.external_id),
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: agentIds.includes(a.external_id),
+                  onCheckedChange: () => toggleAgent(a.external_id),
+                  "data-testid": tid(`${testIdPrefix}-agents-agent-toggle`, a.external_id)
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: (a.given_name ?? "Agent").replace(/-/g, " ") }),
+                /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: a.external_id })
+              ] })
+            ]
+          },
+          a.external_id
+        ))
+      ] })
+    ] })
+  ] });
+}
+function ExportPanel({
+  themeBundle,
+  moduleStore,
+  agentStore,
+  exporter,
+  testIdPrefix
+}) {
+  const theme = themeBundle.useStore();
+  const modules = moduleStore.useModuleStore();
+  const agents = agentStore();
+  const json = useMemo(() => exporter.serialize(), [theme, modules, agents, exporter]);
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", "data-testid": `${testIdPrefix}-export-panel`, children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between text-base", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(FileJson, { className: "size-4 text-emerald" }),
+        " Vertical config"
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          variant: "accent",
+          onClick: () => exporter.download(),
+          "data-testid": `${testIdPrefix}-export`,
+          children: [
+            /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+            " Download JSON"
+          ]
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: "scrollbar-slim max-h-[520px] overflow-auto rounded-md bg-ink p-4 font-mono text-[11px] leading-relaxed text-parchment",
+        "data-testid": `${testIdPrefix}-export-preview`,
+        children: json
+      }
+    ) })
+  ] });
+}
+function VerticalBuilder({
+  themeBundle,
+  moduleStore,
+  agentStore,
+  exporter,
+  themePreview,
+  header,
+  testIdPrefix = "builder"
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": `page-${testIdPrefix}`, children: [
+    header,
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "theme", children: [
+      /* @__PURE__ */ jsxs(TabsList, { "data-testid": `${testIdPrefix}-tabs`, children: [
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "theme", "data-testid": `${testIdPrefix}-tab-theme`, children: [
+          /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+          " Theme"
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "modules", "data-testid": `${testIdPrefix}-tab-modules`, children: [
+          /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }),
+          " Modules"
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "agents", "data-testid": `${testIdPrefix}-tab-agents`, children: [
+          /* @__PURE__ */ jsx(Bot, { className: "size-4" }),
+          " Agents"
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { value: "export", "data-testid": `${testIdPrefix}-tab-export`, children: [
+          /* @__PURE__ */ jsx(FileJson, { className: "size-4" }),
+          " Export"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "theme", children: /* @__PURE__ */ jsx(
+        ThemeEditor,
+        {
+          bundle: themeBundle,
+          variant: "panel",
+          testIdPrefix: `${testIdPrefix}-theme`,
+          preview: themePreview
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "modules", children: /* @__PURE__ */ jsx(ModuleManager, { store: moduleStore, testIdPrefix }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "agents", children: /* @__PURE__ */ jsx(AgentsPanel, { store: agentStore, testIdPrefix }) }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "export", children: /* @__PURE__ */ jsx(
+        ExportPanel,
+        {
+          themeBundle,
+          moduleStore,
+          agentStore,
+          exporter,
+          testIdPrefix
+        }
+      ) })
+    ] })
+  ] });
+}
+
+export { AgentsPanel, AvatarBlock, BlockImage, CTABanner, Callout, Columns, ConnectionProvider, Container, DataTable, DataTableBlock, EmptyState, FAQ, FeatureGrid, Footer, GridView, Hero, LegalArbiProvider, ListBlock, LogoCloud, MetricCard, ModuleManager, Navbar, PageHeader, PageRenderer, RichTextBlock, Section, SectionHeading, Spacer, StatGroup, StudioEditor, THEME_STYLE_ID, Testimonial, ThemeEditor, Toolbar, VerticalBuilder, applyStoredTheme, applyThemeVars, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createBlockKit, createModuleRegistry, createModuleStore, createPromptLibrary, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAuthenticated, matterToContext, pct, tid, toHslTriplet, useConnection, useFirmAiTask, useSemanticSearch, useWorkspaceDocs };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map