@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/studio/index.js

@@ -0,0 +1,3297 @@
+"use client";
+import { PageHeader, MetricCard, DataTableBlock, StatGroup } from '../chunk-2ORA62OF.js';
+import { assetRefId, applyStoredTheme, AssetResolverProvider, ThemeEditor, applyThemeVars, tid, SectionHeading, PricingTable, Tabs as Tabs$1, Accordion, Gallery, VideoEmbed, ContactForm, Banner, MediaText, TeamGrid, Steps, TestimonialGrid, Columns, Spacer, Container, Hero, FeatureGrid, Testimonial, CTABanner, LogoCloud, FAQ, RichTextBlock, BlockImage, AvatarBlock, Navbar, Footer, ListBlock, isAssetRef, asAssetRef } from '../chunk-6P6AEQJB.js';
+export { ASSET_REF_PREFIX, AssetResolverProvider, asAssetRef, assetRefId, isAssetRef, useAssetRenderer, useAssetResolverActive } from '../chunk-6P6AEQJB.js';
+import { Callout } from '../chunk-UJE32SST.js';
+import { Timeline } from '../chunk-OVEQERPO.js';
+import { EmptyState } from '../chunk-P6GHJSLR.js';
+import '../chunk-S7PSMMRG.js';
+import { useConnectedAiTask, useConnection } from '../chunk-YBXCZEWS.js';
+import '../chunk-4EZVCGRL.js';
+import '../chunk-WW6EOVZA.js';
+import { useBlocksEnvironment } from '../chunk-76JDDMSP.js';
+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, ArrowLeft, Palette, Loader2, RotateCcw, ChevronUp, ChevronDown, BrainCircuit, Bot, LayoutGrid, FileJson, Download, Crop, ImagePlus, Upload, Link2, Check, MessagesSquare } from 'lucide-react';
+import { useArbi, useThumbnails, useConfigs, useAgents, useWorkspaceDocs, useAiTask, useDocuments, ImageCropModal, DEFAULT_ASPECT_OPTIONS, useConversations } from '@arbidocs/react';
+import { cn, Button, Card, CardHeader, CardTitle, CardContent, Badge, Switch, Checkbox, Tabs, TabsList, TabsTrigger, TabsContent, Separator } from '@arbidocs/react/ui';
+import { createContext, useContext, useEffect, useMemo, useState, useRef, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Link, useParams } from 'react-router-dom';
+import { Puck, Render } from '@measured/puck';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+var LiveDataContext = createContext(false);
+function useLiveDataActive() {
+  return useContext(LiveDataContext);
+}
+function LiveDataProvider({ children }) {
+  return /* @__PURE__ */ jsx(LiveDataContext.Provider, { value: true, children });
+}
+function WidgetPlaceholder({
+  label,
+  icon: Icon = Sparkles,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 rounded-lg bg-muted px-5 py-6 text-sm text-muted-foreground",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-background text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-1", children: "\xB7 live in the app" })
+        ] })
+      ]
+    }
+  );
+}
+function useActiveWorkspaceId() {
+  const { workspaceId, fallbackWorkspaceId } = useConnection();
+  return workspaceId ?? fallbackWorkspaceId ?? void 0;
+}
+function timeAgo(iso) {
+  if (!iso) return "";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const s = Math.max(0, Math.round((Date.now() - then) / 1e3));
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.round(h / 24)}d ago`;
+}
+var METRIC_SOURCES = {
+  documents: { label: "Documents", icon: FileText },
+  conversations: { label: "Agent threads", icon: Bot }
+};
+var asMetricSource = (s) => s in METRIC_SOURCES ? s : "documents";
+function AgentActivityLive({
+  title,
+  limit,
+  testId
+}) {
+  const wsId = useActiveWorkspaceId();
+  const { data, isLoading } = useConversations(wsId);
+  const rows = [...data ?? []].sort((a, b) => +new Date(b.updated_at ?? 0) - +new Date(a.updated_at ?? 0)).slice(0, limit);
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-lg p-5", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Bot, { className: "size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-loading`, children: "Loading agent threads\u2026" }) : rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-empty`, children: "No agent threads yet." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", "data-testid": `${testId}-list`, children: rows.map((c, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center justify-between gap-3",
+        "data-testid": `${testId}-item-${i}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 truncate", children: [
+            /* @__PURE__ */ jsx(MessagesSquare, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: c.title?.trim() || "Untitled thread" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: timeAgo(c.updated_at) })
+        ]
+      },
+      c.external_id ?? i
+    )) })
+  ] });
+}
+function LiveMetricInner({
+  label,
+  source,
+  accent,
+  testId
+}) {
+  const wsId = useActiveWorkspaceId();
+  const docs = useDocuments(wsId, { enabled: source === "documents" });
+  const convos = useConversations(wsId, { enabled: source === "conversations" });
+  const query = source === "documents" ? docs : convos;
+  const count = Array.isArray(query.data) ? query.data.length : 0;
+  return /* @__PURE__ */ jsx(
+    MetricCard,
+    {
+      label: label || METRIC_SOURCES[source].label,
+      value: query.isLoading ? "\u2014" : String(count),
+      accent,
+      icon: METRIC_SOURCES[source].icon,
+      testId
+    }
+  );
+}
+function AgentActivityBlock({
+  title,
+  limit,
+  testId
+}) {
+  return useLiveDataActive() ? /* @__PURE__ */ jsx(AgentActivityLive, { title, limit, testId }) : /* @__PURE__ */ jsx(WidgetPlaceholder, { label: String(title || "Agent activity"), icon: Bot, testId });
+}
+function LiveMetricBlock({
+  label,
+  source,
+  accent,
+  testId
+}) {
+  const src = asMetricSource(source);
+  return useLiveDataActive() ? /* @__PURE__ */ jsx(LiveMetricInner, { label, source: src, accent, testId }) : /* @__PURE__ */ jsx(
+    WidgetPlaceholder,
+    {
+      label: String(label || METRIC_SOURCES[src].label),
+      icon: METRIC_SOURCES[src].icon,
+      testId
+    }
+  );
+}
+function createLiveWidgets(kit) {
+  const { blockTestId } = kit;
+  const AgentActivityWidget = {
+    label: "Agent activity (live)",
+    fields: {
+      title: { type: "text", label: "Title" },
+      limit: { type: "number", label: "Rows", min: 1, max: 8 }
+    },
+    defaultProps: { title: "Recent agent activity", limit: 4 },
+    render: ({ id, title, limit }) => /* @__PURE__ */ jsx(AgentActivityBlock, { title, limit, testId: blockTestId(id) })
+  };
+  const LiveMetricWidget = {
+    label: "Live metric",
+    fields: {
+      label: { type: "text", label: "Label" },
+      source: {
+        type: "select",
+        label: "Source",
+        options: [
+          { label: "Documents", value: "documents" },
+          { label: "Agent threads", value: "conversations" }
+        ]
+      },
+      accent: {
+        type: "radio",
+        label: "Accent",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Primary", value: "primary" },
+          { label: "Success", value: "success" }
+        ]
+      }
+    },
+    defaultProps: { label: "", source: "documents", accent: "primary" },
+    render: ({ id, label, source, accent }) => /* @__PURE__ */ jsx(LiveMetricBlock, { label, source, accent, testId: blockTestId(id) })
+  };
+  return {
+    AgentActivity: AgentActivityWidget,
+    LiveMetric: LiveMetricWidget
+  };
+}
+function useAssetImage(docId) {
+  const arbi = useArbi();
+  const { data: thumbs } = useThumbnails([docId]);
+  const thumb = thumbs?.[docId];
+  const { data: objectUrl } = useQuery({
+    queryKey: ["arbi", "asset-image", docId],
+    queryFn: async () => {
+      const res = await arbi.documents.download(docId);
+      const blob = await res.blob();
+      return URL.createObjectURL(blob);
+    },
+    // Only download when the thumbnail is genuinely absent (not merely loading).
+    enabled: !!docId && thumbs != null && !thumb && arbi.hasWorkspace,
+    staleTime: 10 * 6e4
+  });
+  useEffect(() => {
+    return () => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [objectUrl]);
+  return thumb ?? objectUrl;
+}
+function AssetThumb({ docId, alt, className, testId }) {
+  const src = useAssetImage(docId);
+  return /* @__PURE__ */ jsx("img", { src: src ?? void 0, alt: alt ?? "", className, "data-testid": testId });
+}
+
+// src/studio/publish.ts
+function blobToDataUrl(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+function createArbiMaterializer(arbi, opts = {}) {
+  return async (docId) => {
+    try {
+      const res = await arbi.documents.download(docId);
+      const blob = await res.blob();
+      if (opts.publishAsset) return await opts.publishAsset(docId, blob);
+      return await blobToDataUrl(blob);
+    } catch {
+      return null;
+    }
+  };
+}
+function collectAssetRefs(node, acc) {
+  if (typeof node === "string") {
+    if (isAssetRef(node)) acc.add(node);
+    return;
+  }
+  if (Array.isArray(node)) {
+    for (const child of node) collectAssetRefs(child, acc);
+    return;
+  }
+  if (node && typeof node === "object") {
+    for (const value of Object.values(node)) collectAssetRefs(value, acc);
+  }
+}
+function replaceAssetRefs(node, replacements) {
+  if (typeof node === "string") {
+    return replacements.get(node) ?? node;
+  }
+  if (Array.isArray(node)) {
+    return node.map((child) => replaceAssetRefs(child, replacements));
+  }
+  if (node && typeof node === "object") {
+    const out = {};
+    for (const [key, value] of Object.entries(node)) {
+      out[key] = replaceAssetRefs(value, replacements);
+    }
+    return out;
+  }
+  return node;
+}
+async function materializePageData(data, materialize) {
+  const refs = /* @__PURE__ */ new Set();
+  collectAssetRefs(data, refs);
+  if (refs.size === 0) return data;
+  const replacements = /* @__PURE__ */ new Map();
+  await Promise.all(
+    [...refs].map(async (ref) => {
+      const src = await materialize(assetRefId(ref));
+      if (src) replacements.set(ref, src);
+    })
+  );
+  if (replacements.size === 0) return data;
+  return replaceAssetRefs(data, replacements);
+}
+var EMPTY_DATA = { content: [], root: {} };
+function StudioEditor({
+  config,
+  pages,
+  persistence,
+  themeBundle,
+  defaultTheme,
+  brandLabel,
+  backHref,
+  backLabel = "Back",
+  live,
+  initialSlug,
+  testIdPrefix = "studio",
+  publishAsset,
+  resetSeam = false
+}) {
+  const arbi = useArbi();
+  const { notify } = useBlocksEnvironment();
+  const materialize = useMemo(
+    () => createArbiMaterializer(arbi, { publishAsset }),
+    [arbi, publishAsset]
+  );
+  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 [loadError, setLoadError] = useState(null);
+  const latest = useRef(EMPTY_DATA);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setLoadError(null);
+    void (async () => {
+      let loaded;
+      try {
+        loaded = (await persistence.loadPage(arbi, live, slug)).data;
+      } catch (e) {
+        if (cancelled) return;
+        const message = e instanceof Error ? e.message : "Could not load the page";
+        setLoadError(message);
+        notify(message, "error");
+        setLoading(false);
+        return;
+      }
+      if (cancelled) return;
+      const next = loaded ?? EMPTY_DATA;
+      setData(next);
+      latest.current = next;
+      setRev((r) => r + 1);
+      setLoading(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [slug, live]);
+  useEffect(() => {
+    if (!resetSeam) return;
+    const w = window;
+    w.__studioResetSlug = (s) => persistence.deletePage(arbi, live, s);
+    return () => {
+      delete w.__studioResetSlug;
+    };
+  }, [resetSeam, arbi, live, persistence]);
+  const persist3 = useCallback(
+    async (toSave) => {
+      setSaving(true);
+      try {
+        const where = await persistence.savePage(arbi, live, slug, toSave);
+        const published = await materializePageData(toSave, materialize);
+        await persistence.savePublished(arbi, live, slug, published);
+        setVia(where);
+      } catch (e) {
+        notify(e instanceof Error ? e.message : "Could not save the page", "error");
+      } finally {
+        setSaving(false);
+      }
+    },
+    [arbi, live, slug, persistence, materialize, notify]
+  );
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      let stored;
+      try {
+        stored = (await persistence.loadTheme(arbi, live)).data;
+      } catch (e) {
+        notify(e instanceof Error ? e.message : "Could not load the theme", "error");
+        return;
+      }
+      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();
+    try {
+      return await persistence.saveTheme(arbi, live, snapshot);
+    } catch (e) {
+      notify(e instanceof Error ? e.message : "Could not save the theme", "error");
+      throw e;
+    }
+  }, [arbi, live, persistence, themeBundle, notify]);
+  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-primary",
+            "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-foreground", 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-primary hover:text-primary",
+            "data-testid": `${testIdPrefix}-theme-toggle`,
+            children: [
+              /* @__PURE__ */ jsx(Palette, { className: "size-4" }),
+              " Theme"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => void persist3(latest.current),
+            disabled: saving || loading || loadError !== null,
+            className: "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 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: loadError ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "alert",
+          className: "flex h-full items-center justify-center p-6 text-sm text-destructive",
+          "data-testid": `${testIdPrefix}-load-error`,
+          children: loadError
+        }
+      ) : 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(AssetResolverProvider, { render: AssetThumb, children: /* @__PURE__ */ jsx(
+        Puck,
+        {
+          config,
+          data,
+          onChange: (d) => {
+            latest.current = d;
+          },
+          onPublish: (d) => void persist3(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",
+  liveData = false,
+  initialData,
+  applyTheme = true
+}) {
+  const params = useParams();
+  const slug = slugProp ?? params.slug ?? "home";
+  const arbi = useArbi();
+  const [data, setData] = useState(initialData ?? null);
+  const [loading, setLoading] = useState(!initialData);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(!initialData);
+    setError(null);
+    void (async () => {
+      try {
+        const theme = applyTheme ? (await persistence.loadTheme(arbi, live)).data : void 0;
+        if (cancelled) return;
+        const page = initialData ?? (await persistence.loadPublished(arbi, live, slug)).data ?? (await persistence.loadPage(arbi, live, slug)).data;
+        if (cancelled) return;
+        if (applyTheme) {
+          applyThemeVars(
+            theme ? { ...defaultTheme, ...theme, colors: { ...defaultTheme.colors, ...theme.colors } } : defaultTheme
+          );
+        }
+        setData(page);
+        setLoading(false);
+      } catch (e) {
+        if (cancelled) return;
+        setError(e instanceof Error ? e.message : "Could not load the page");
+        setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [arbi, live, slug, persistence, defaultTheme, initialData, applyTheme]);
+  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 (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        className: "mx-auto max-w-2xl px-5 py-24 text-center text-sm text-destructive",
+        "data-testid": `${testIdPrefix}-render-error`,
+        children: error
+      }
+    );
+  }
+  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-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: body })
+        ]
+      }
+    );
+  }
+  const rendered = /* @__PURE__ */ jsx(Render, { config, data });
+  return /* @__PURE__ */ jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: liveData ? /* @__PURE__ */ jsx(LiveDataProvider, { children: rendered }) : rendered });
+}
+
+// src/studio/persistence.ts
+var StudioPersistenceError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.name = "StudioPersistenceError";
+  }
+};
+function createStudioPersistence(cfg) {
+  const WORKSPACE_ID = cfg.workspaceId;
+  const FOLDER = cfg.folder ?? "site";
+  const MODE = cfg.localStorageMode ?? "off";
+  function scoped(name) {
+    const scope = cfg.storageScope?.();
+    if (!scope) {
+      throw new StudioPersistenceError(
+        "Studio local storage needs a user/workspace scope (storageScope) before it can be used"
+      );
+    }
+    return `${cfg.storagePrefix}${scope}:${name}`;
+  }
+  const pageKey = (slug) => scoped(slug);
+  const publishedKey = (slug) => scoped(`published-${slug}`);
+  const themeKey = () => scoped(cfg.themeStorageKey ?? "theme");
+  const localAllowed = (arbiFailed) => MODE === "always" || MODE === "fallback" && arbiFailed;
+  function unavailable(what, cause) {
+    return new StudioPersistenceError(
+      `${what}: no ARBI session or the ARBI request failed, and local storage is not enabled`,
+      { cause }
+    );
+  }
+  const THEME_FILE = cfg.themeFileName ?? "theme.json";
+  const pageFile = cfg.pageFileName ?? ((slug) => `${slug}.json`);
+  const publishedFile = cfg.publishedFileName ?? ((slug) => `${slug}.published.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);
+    }
+  }
+  function writeLocal(key, data) {
+    try {
+      localStorage.setItem(key, JSON.stringify(data));
+    } catch (e) {
+      throw new StudioPersistenceError("Could not write to local storage", { cause: e });
+    }
+  }
+  async function writePage(arbi, live, kind, localKey, fileName, data) {
+    let failure;
+    if (canUseArbi(arbi, live)) {
+      try {
+        await uploadJson(arbi, fileName, data);
+        if (localAllowed(false)) writeLocal(localKey(), data);
+        return "arbi";
+      } catch (e) {
+        if (e instanceof StudioPersistenceError) throw e;
+        failure = e;
+      }
+    }
+    if (!localAllowed(true)) throw unavailable(`Cannot save ${kind} "${fileName}"`, failure);
+    writeLocal(localKey(), data);
+    return "local";
+  }
+  async function readPage(arbi, live, localKey, fileName) {
+    let arbiTried = false;
+    if (canUseArbi(arbi, live)) {
+      arbiTried = true;
+      try {
+        const data = await downloadJson(arbi, fileName);
+        if (data) return { data, via: "arbi" };
+      } catch (e) {
+        if (MODE === "off") throw unavailable(`Cannot load "${fileName}"`, e);
+      }
+    }
+    if (MODE === "off") {
+      if (arbiTried) return { data: null, via: "arbi" };
+      throw unavailable(`Cannot load "${fileName}"`);
+    }
+    return readLocal(localKey());
+  }
+  function readLocal(key) {
+    const raw = safeLocalGet(key);
+    return { data: raw ? JSON.parse(raw) : null, via: "local" };
+  }
+  function savePage(arbi, live, slug, data) {
+    return writePage(arbi, live, "page", () => pageKey(slug), pageFile(slug), data);
+  }
+  function loadPage(arbi, live, slug) {
+    return readPage(arbi, live, () => pageKey(slug), pageFile(slug));
+  }
+  function savePublished(arbi, live, slug, data) {
+    return writePage(
+      arbi,
+      live,
+      "published page",
+      () => publishedKey(slug),
+      publishedFile(slug),
+      data
+    );
+  }
+  function loadPublished(arbi, live, slug) {
+    return readPage(arbi, live, () => publishedKey(slug), publishedFile(slug));
+  }
+  async function deletePage(arbi, live, slug) {
+    if (MODE !== "off") {
+      try {
+        localStorage.removeItem(pageKey(slug));
+        localStorage.removeItem(publishedKey(slug));
+      } catch (e) {
+        if (e instanceof StudioPersistenceError) throw e;
+      }
+    }
+    if (!canUseArbi(arbi, live)) return;
+    try {
+      await arbi.selectWorkspace(WORKSPACE_ID);
+      const docs = await arbi.documents.list();
+      const names = [pageFile(slug), publishedFile(slug)];
+      const ids = docs.filter(
+        (d) => (d.folder ?? "").includes(FOLDER) && names.some((n) => (d.file_name ?? "").endsWith(n))
+      ).map((d) => d.external_id);
+      if (ids.length) await arbi.documents.delete(ids);
+    } catch (e) {
+      throw new StudioPersistenceError(`Could not delete the stored page "${slug}" from ARBI`, {
+        cause: e
+      });
+    }
+  }
+  async function saveTheme(arbi, live, theme) {
+    return writePage(arbi, live, "theme", themeKey, THEME_FILE, theme);
+  }
+  async function loadTheme(arbi, live) {
+    return readPage(arbi, live, themeKey, THEME_FILE);
+  }
+  function safeLocalGet(key) {
+    try {
+      return localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  }
+  return { savePage, loadPage, savePublished, loadPublished, deletePage, saveTheme, loadTheme };
+}
+function AiTextField({
+  value,
+  onChange,
+  name,
+  label,
+  multiline,
+  placeholder,
+  kind,
+  workspaceId,
+  buildPrompt,
+  testIdPrefix
+}) {
+  const { docIds } = useWorkspaceDocs(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 latestImageDocId(artifacts) {
+  for (let i = artifacts.length - 1; i >= 0; i--) {
+    if (artifacts[i].mode === "image") return artifacts[i].doc_ext_id;
+  }
+  return null;
+}
+function useImageGen() {
+  const task = useConnectedAiTask();
+  const { run } = task;
+  const generate = useCallback(
+    async (prompt, referenceDocIds = []) => {
+      const trimmed = prompt.trim();
+      if (!trimmed) return null;
+      const result = await run(`/image ${trimmed}`, referenceDocIds);
+      return latestImageDocId(result?.artifacts ?? []);
+    },
+    [run]
+  );
+  const docExtId = useMemo(() => latestImageDocId(task.artifacts), [task.artifacts]);
+  return {
+    docExtId,
+    status: task.status,
+    error: task.error,
+    isGenerating: task.isRunning,
+    generate,
+    reset: task.reset
+  };
+}
+function toJpgName(name) {
+  return name.replace(/\.[^.]+$/, "") + ".jpg";
+}
+var IMAGE_EXT = /\.(png|jpe?g|webp|gif|avif|svg)$/i;
+function ImageFieldControl({
+  value,
+  onChange,
+  name,
+  workspaceId,
+  folder,
+  testIdPrefix
+}) {
+  const [mode, setMode] = useState("asset");
+  const [url, setUrl] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [refIds, setRefIds] = useState([]);
+  const [cropSrc, setCropSrc] = useState(null);
+  const [cropName, setCropName] = useState("image.jpg");
+  const arbi = useArbi();
+  const gen = useImageGen();
+  const queryClient = useQueryClient();
+  const currentAssetImage = useAssetImage(isAssetRef(value) ? assetRefId(value) : "");
+  const tp = (...q) => tid(`${testIdPrefix}-image`, name, ...q);
+  const refreshAssets = () => queryClient.invalidateQueries({ queryKey: ["arbi", "documents", workspaceId] });
+  const { data: docs } = useDocuments(workspaceId);
+  const imageDocs = useMemo(
+    () => (docs ?? []).filter(
+      (d) => d.file_name && IMAGE_EXT.test(d.file_name)
+    ),
+    [docs]
+  );
+  const imageIds = useMemo(
+    () => imageDocs.map((d) => d.external_id),
+    [imageDocs]
+  );
+  const { data: thumbs } = useThumbnails(imageIds);
+  const onUpload = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setCropName(toJpgName(file.name));
+    setCropSrc(URL.createObjectURL(file));
+    e.target.value = "";
+  };
+  const openReframe = () => {
+    if (!currentAssetImage) return;
+    setCropName("reframe.jpg");
+    setCropSrc(currentAssetImage);
+  };
+  const uploadBlobAsAsset = async (blob, name2) => {
+    setBusy(true);
+    try {
+      await arbi.selectWorkspace(workspaceId);
+      const file = new File([blob], name2, { type: blob.type });
+      const res = await arbi.documents.uploadFile(file, name2, { folder });
+      const id = res.doc_ext_ids?.[0];
+      if (id) {
+        onChange(asAssetRef(id));
+        void refreshAssets();
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onCropComplete = async (result) => {
+    const src = cropSrc;
+    setCropSrc(null);
+    await uploadBlobAsAsset(result.blob, cropName);
+    if (src?.startsWith("blob:")) URL.revokeObjectURL(src);
+  };
+  const toggleRef = (id) => setRefIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
+  const onGenerate = async () => {
+    if (!prompt.trim() || gen.isGenerating) return;
+    const id = await gen.generate(prompt, refIds);
+    if (id) {
+      onChange(asAssetRef(id));
+      setRefIds([]);
+      void refreshAssets();
+    }
+  };
+  const MODES = [
+    { key: "asset", label: "Assets", icon: ImagePlus },
+    { key: "upload", label: "Upload", icon: Upload },
+    { key: "url", label: "URL", icon: Link2 },
+    { key: "generate", label: "Generate", icon: Sparkles }
+  ];
+  const inputClass = "w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary";
+  const tabClass = (on) => `inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium ${on ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", "data-testid": tp(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+      currentAssetImage ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: openReframe,
+          className: "absolute right-1.5 top-1.5 inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium text-foreground shadow-sm backdrop-blur hover:bg-background",
+          "data-testid": tp("reframe"),
+          children: [
+            /* @__PURE__ */ jsx(Crop, { className: "size-3" }),
+            " Crop"
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: MODES.map((m) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: tabClass(mode === m.key),
+        onClick: () => setMode(m.key),
+        "data-testid": tp("mode", m.key),
+        children: [
+          /* @__PURE__ */ jsx(m.icon, { className: "size-3" }),
+          " ",
+          m.label
+        ]
+      },
+      m.key
+    )) }),
+    mode === "asset" && /* @__PURE__ */ jsxs("div", { className: "grid max-h-48 grid-cols-3 gap-1.5 overflow-auto", "data-testid": tp("assets"), children: [
+      imageDocs.length === 0 && /* @__PURE__ */ jsx("p", { className: "col-span-3 py-3 text-center text-xs text-muted-foreground", children: "No image assets yet \u2014 upload or generate one." }),
+      imageDocs.map((d) => {
+        const thumb = thumbs?.[d.external_id];
+        const selected = value === asAssetRef(d.external_id);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(asAssetRef(d.external_id)),
+            className: `overflow-hidden rounded border ${selected ? "border-primary ring-1 ring-primary" : "border-border"}`,
+            title: d.file_name ?? "",
+            "data-testid": tp("asset", d.external_id),
+            children: thumb ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumb,
+                alt: d.file_name ?? "",
+                className: "aspect-square w-full bg-muted object-contain"
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "flex aspect-square w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(ImagePlus, { className: "size-4" }) })
+          },
+          d.external_id
+        );
+      })
+    ] }),
+    mode === "upload" && /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2 rounded-md border border-border px-2.5 py-1.5 text-sm text-foreground", children: [
+      busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+      busy ? "Uploading\u2026" : "Choose a file",
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          disabled: busy,
+          onChange: (e) => void onUpload(e),
+          "data-testid": tp("upload")
+        }
+      )
+    ] }),
+    mode === "url" && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: inputClass,
+          placeholder: "https://\u2026",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          "data-testid": tp("url")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50",
+          disabled: !url.trim(),
+          onClick: () => onChange(url.trim()),
+          "data-testid": tp("url-apply"),
+          children: "Use"
+        }
+      )
+    ] }),
+    mode === "generate" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      imageDocs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", "data-testid": tp("refs"), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Reference images",
+            refIds.length > 0 ? ` (${refIds.length})` : " (optional)"
+          ] }),
+          isAssetRef(value) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "text-xs font-medium text-primary hover:underline",
+              onClick: () => toggleRef(assetRefId(value)),
+              "data-testid": tp("vary-current"),
+              children: refIds.includes(assetRefId(value)) ? "Varying current" : "Vary current image"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid max-h-28 grid-cols-4 gap-1.5 overflow-auto", children: imageDocs.map((d) => {
+          const thumb = thumbs?.[d.external_id];
+          const on = refIds.includes(d.external_id);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleRef(d.external_id),
+              "aria-pressed": on,
+              className: `relative overflow-hidden rounded border ${on ? "border-primary ring-1 ring-primary" : "border-border"}`,
+              title: d.file_name ?? "",
+              "data-testid": tp("ref", d.external_id),
+              children: [
+                thumb ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: thumb,
+                    alt: d.file_name ?? "",
+                    className: "aspect-square w-full bg-muted object-contain"
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "flex aspect-square w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(ImagePlus, { className: "size-3.5" }) }),
+                on && /* @__PURE__ */ jsx("span", { className: "absolute right-0.5 top-0.5 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "size-2.5" }) })
+              ]
+            },
+            d.external_id
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: inputClass,
+          rows: 2,
+          placeholder: refIds.length > 0 ? "Describe the edit to apply\u2026" : "Describe the image\u2026",
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          "data-testid": tp("prompt")
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1.5 self-start rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-50",
+          disabled: !prompt.trim() || gen.isGenerating,
+          onClick: () => void onGenerate(),
+          "data-testid": tp("generate"),
+          children: [
+            gen.isGenerating ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }),
+            gen.isGenerating ? "Generating\u2026" : refIds.length > 0 ? `Generate from ${refIds.length} reference${refIds.length > 1 ? "s" : ""}` : "Generate"
+          ]
+        }
+      ),
+      gen.error && /* @__PURE__ */ jsx("span", { className: "text-xs text-destructive", role: "alert", children: gen.error })
+    ] }),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "self-start text-xs text-muted-foreground hover:text-foreground",
+        onClick: () => onChange(""),
+        "data-testid": tp("clear"),
+        children: "Clear"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageCropModal,
+      {
+        open: !!cropSrc,
+        image: cropSrc,
+        title: "Frame your image",
+        aspectOptions: DEFAULT_ASPECT_OPTIONS,
+        cropShape: "rect",
+        output: { maxSize: 1600 },
+        onComplete: onCropComplete,
+        onCancel: () => setCropSrc(null)
+      }
+    )
+  ] });
+}
+function createImageField(cfg) {
+  const { workspaceId } = cfg;
+  const folder = cfg.folder ?? "assets";
+  const testIdPrefix = cfg.testIdPrefix ?? "studio";
+  const imageField = (label) => ({
+    type: "custom",
+    label,
+    render: ({ value, onChange, name }) => /* @__PURE__ */ jsx(
+      ImageFieldControl,
+      {
+        value: value ?? "",
+        onChange,
+        name,
+        workspaceId,
+        folder,
+        testIdPrefix
+      }
+    )
+  });
+  return { imageField };
+}
+var TEXTURE_STYLE = {
+  backgroundImage: "radial-gradient(currentColor 0.5px, transparent 0.5px)",
+  backgroundSize: "4px 4px",
+  opacity: 0.04
+};
+var PADDING = {
+  none: "",
+  sm: "py-8 lg:py-10",
+  md: "py-16 lg:py-20",
+  lg: "py-24 lg:py-28"
+};
+var WIDTH = {
+  narrow: "max-w-3xl",
+  default: "max-w-7xl",
+  wide: "max-w-[90rem]",
+  full: "max-w-none"
+};
+var INVERTED_VARS = {
+  ["--color-background"]: "var(--color-foreground)",
+  ["--color-foreground"]: "var(--color-background)",
+  ["--color-card"]: "color-mix(in srgb, var(--color-foreground) 92%, #fff)",
+  ["--color-muted"]: "color-mix(in srgb, var(--color-foreground) 85%, #fff)",
+  ["--color-muted-foreground"]: "color-mix(in srgb, var(--color-background) 60%, transparent)",
+  ["--color-border"]: "color-mix(in srgb, var(--color-background) 18%, transparent)",
+  ["--color-accent"]: "color-mix(in srgb, var(--color-foreground) 80%, #fff)"
+};
+function Section({
+  children,
+  tone = "default",
+  padding = "md",
+  maxWidth = "default",
+  texture,
+  className = ""
+}) {
+  const inverted = tone === "ink";
+  const toneClass = inverted ? "bg-background text-foreground" : tone === "muted" ? "border-y border-border bg-card/40" : "";
+  return /* @__PURE__ */ jsxs("section", { className: cn("relative", toneClass), style: inverted ? INVERTED_VARS : void 0, children: [
+    texture && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0", style: TEXTURE_STYLE, "aria-hidden": true }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative mx-auto px-5 lg:px-8",
+          WIDTH[maxWidth],
+          PADDING[padding],
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var iconMap = {
+  FileText: FileText,
+  Folder,
+  Users,
+  Briefcase,
+  Calendar,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  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, image, eyebrowClassName) {
+  return {
+    eyebrowClassName,
+    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 },
+    imageField: (label) => image ? image(label) : { type: "text", label },
+    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, imageField, 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"),
+      emphasis: { type: "text", label: "Emphasised word" },
+      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: imageField("Side image"),
+      backgroundImage: imageField("Background image"),
+      overlay: boolRadio("Background overlay")
+    },
+    defaultProps: {
+      eyebrow: "Introducing",
+      title: "Build a better website, faster.",
+      emphasis: "",
+      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: "",
+      backgroundImage: "",
+      overlay: true
+    },
+    render: ({
+      id,
+      eyebrow,
+      title,
+      emphasis,
+      subtitle,
+      primaryCta,
+      secondaryCta,
+      align,
+      tone,
+      imageUrl,
+      backgroundImage,
+      overlay
+    }) => /* @__PURE__ */ jsx(
+      Hero,
+      {
+        eyebrow,
+        title,
+        emphasis,
+        subtitle,
+        primaryCta,
+        secondaryCta,
+        align,
+        tone,
+        imageUrl,
+        backgroundImage,
+        overlay,
+        eyebrowClassName: kit.eyebrowClassName,
+        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,
+      backgroundImage: imageField("Background image"),
+      overlay: boolRadio("Background overlay")
+    },
+    defaultProps: {
+      title: "Ready to get started?",
+      subtitle: "Join thousands of teams already building with us.",
+      cta: { label: "Start free trial", href: "#" },
+      tone: "default",
+      backgroundImage: "",
+      overlay: true
+    },
+    render: ({ id, title, subtitle, cta, tone, backgroundImage, overlay }) => /* @__PURE__ */ jsx(
+      CTABanner,
+      {
+        title,
+        subtitle,
+        cta,
+        tone,
+        backgroundImage,
+        overlay,
+        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 TimelineBlockConfig = {
+    label: "Timeline",
+    fields: {
+      view: {
+        type: "radio",
+        label: "View",
+        options: [
+          { label: "Reader chooses", value: "both" },
+          { label: "Calendar", value: "calendar" },
+          { label: "Gantt", value: "gantt" }
+        ]
+      },
+      height: { type: "number", label: "Height (px)", min: 200, max: 1200 },
+      items: {
+        type: "array",
+        label: "Entries",
+        arrayFields: {
+          label: textField("Label"),
+          description: textareaField("Description"),
+          start: { type: "text", label: "Start (YYYY-MM-DD)" },
+          end: { type: "text", label: "End (YYYY-MM-DD, optional)" }
+        },
+        defaultItemProps: { label: "Milestone", description: "", start: "", end: "" },
+        getItemSummary: (item) => item?.label || "Entry"
+      }
+    },
+    defaultProps: {
+      view: "both",
+      height: 520,
+      items: [
+        {
+          label: "Kick-off",
+          description: "Project starts.",
+          start: "2026-01-12",
+          end: ""
+        },
+        {
+          label: "Build phase",
+          description: "Design and implementation.",
+          start: "2026-01-19",
+          end: "2026-03-13"
+        },
+        {
+          label: "Launch",
+          description: "Public release.",
+          start: "2026-03-30",
+          end: ""
+        }
+      ]
+    },
+    render: ({ id, view, height, items }) => /* @__PURE__ */ jsx("div", { style: { height: height ?? 520 }, children: /* @__PURE__ */ jsx(
+      Timeline,
+      {
+        items: (items ?? []).filter((item) => !!item?.start).map((item, index) => ({
+          id: `${id}-${index}`,
+          label: item.label ?? "",
+          start: item.start,
+          end: item.end || void 0,
+          description: item.description || void 0
+        })),
+        view: view === "both" ? void 0 : view,
+        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: imageField("Image"),
+      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" }
+        ]
+      },
+      framed: boolRadio("Framed")
+    },
+    defaultProps: { src: "", alt: "Image", aspect: "16:9", rounded: "lg", framed: false },
+    render: ({ id, src, alt, aspect, rounded, framed }) => /* @__PURE__ */ jsx(
+      BlockImage,
+      {
+        src,
+        alt,
+        aspect,
+        rounded,
+        framed,
+        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,
+    Timeline: TimelineBlockConfig,
+    RichText: RichTextBlockConfig,
+    Callout: CalloutBlock,
+    Image: ImageBlock,
+    Avatar: AvatarBlockConfig,
+    Navbar: NavbarBlock,
+    Footer: FooterBlock,
+    List: ListBlockConfig
+  };
+}
+var lines = (s) => (s ?? "").split("\n").map((l) => l.trim()).filter(Boolean);
+function createSiteBlocks(kit) {
+  const { textField, textareaField, imageField, boolRadio, blockTestId } = kit;
+  const ctaField = (label) => ({
+    type: "object",
+    label,
+    objectFields: {
+      label: textField("Label"),
+      href: { type: "text", label: "Link" }
+    }
+  });
+  const columnsField = (values) => ({
+    type: "radio",
+    label: "Columns",
+    options: values.map((v) => ({ label: v, value: v }))
+  });
+  const PricingBlock = {
+    label: "Pricing",
+    fields: {
+      plans: {
+        type: "array",
+        label: "Plans",
+        getItemSummary: (item) => item?.name || "Plan",
+        defaultItemProps: {
+          name: "Plan",
+          price: "\xA30",
+          period: "mo",
+          description: "",
+          features: "Feature one\nFeature two",
+          ctaLabel: "Choose",
+          ctaHref: "#",
+          featured: false
+        },
+        arrayFields: {
+          name: textField("Name"),
+          price: { type: "text", label: "Price" },
+          period: { type: "text", label: "Period" },
+          description: textareaField("Description"),
+          features: { type: "textarea", label: "Features (one per line)" },
+          ctaLabel: { type: "text", label: "Button label" },
+          ctaHref: { type: "text", label: "Button link" },
+          featured: boolRadio("Featured")
+        }
+      }
+    },
+    defaultProps: {
+      plans: [
+        {
+          name: "Starter",
+          price: "\xA30",
+          period: "mo",
+          description: "For getting started.",
+          features: "Up to 3 projects\nCommunity support",
+          ctaLabel: "Get started",
+          ctaHref: "#",
+          featured: false
+        },
+        {
+          name: "Pro",
+          price: "\xA329",
+          period: "mo",
+          description: "For growing teams.",
+          features: "Unlimited projects\nPriority support\nAdvanced analytics",
+          ctaLabel: "Start free trial",
+          ctaHref: "#",
+          featured: true
+        },
+        {
+          name: "Enterprise",
+          price: "Custom",
+          period: "",
+          description: "For large organisations.",
+          features: "SSO & SAML\nDedicated success manager\nSLA",
+          ctaLabel: "Contact sales",
+          ctaHref: "#",
+          featured: false
+        }
+      ]
+    },
+    render: ({ id, plans }) => /* @__PURE__ */ jsx(
+      PricingTable,
+      {
+        plans: (plans ?? []).map(
+          (p) => ({
+            name: p.name,
+            price: p.price,
+            period: p.period,
+            description: p.description,
+            features: lines(p.features),
+            cta: { label: p.ctaLabel, href: p.ctaHref },
+            featured: p.featured
+          })
+        ),
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const TabsBlock = {
+    label: "Tabs",
+    fields: {
+      items: {
+        type: "array",
+        label: "Tabs",
+        getItemSummary: (item) => item?.label || "Tab",
+        defaultItemProps: { label: "Tab", content: "Tab content." },
+        arrayFields: {
+          label: textField("Label"),
+          content: textareaField("Content")
+        }
+      }
+    },
+    defaultProps: {
+      items: [
+        { label: "Overview", content: "A quick overview of this section." },
+        { label: "Details", content: "The finer details go here." },
+        { label: "FAQ", content: "Answers to common questions." }
+      ]
+    },
+    render: ({ id, items }) => /* @__PURE__ */ jsx(Tabs$1, { items, testId: blockTestId(id) })
+  };
+  const AccordionBlock = {
+    label: "Accordion",
+    fields: {
+      allowMultiple: boolRadio("Allow multiple open"),
+      items: {
+        type: "array",
+        label: "Items",
+        getItemSummary: (item) => item?.title || "Item",
+        defaultItemProps: { title: "Section", content: "Section content." },
+        arrayFields: {
+          title: textField("Title"),
+          content: textareaField("Content")
+        }
+      }
+    },
+    defaultProps: {
+      allowMultiple: false,
+      items: [
+        { title: "What is included?", content: "Everything you need to get started." },
+        { title: "How does billing work?", content: "Monthly or annually, cancel anytime." }
+      ]
+    },
+    render: ({ id, allowMultiple, items }) => /* @__PURE__ */ jsx(Accordion, { allowMultiple, items, testId: blockTestId(id) })
+  };
+  const GalleryBlock = {
+    label: "Gallery",
+    fields: {
+      columns: columnsField(["2", "3", "4"]),
+      aspect: {
+        type: "radio",
+        label: "Aspect",
+        options: [
+          { label: "1:1", value: "1:1" },
+          { label: "4:3", value: "4:3" },
+          { label: "16:9", value: "16:9" }
+        ]
+      },
+      images: {
+        type: "array",
+        label: "Images",
+        getItemSummary: (item) => item?.alt || "Image",
+        defaultItemProps: { src: "", alt: "Image", caption: "" },
+        arrayFields: {
+          src: imageField("Image"),
+          alt: { type: "text", label: "Alt text" },
+          caption: { type: "text", label: "Caption" }
+        }
+      }
+    },
+    defaultProps: {
+      columns: "3",
+      aspect: "1:1",
+      images: [
+        { src: "", alt: "Image one", caption: "" },
+        { src: "", alt: "Image two", caption: "" },
+        { src: "", alt: "Image three", caption: "" }
+      ]
+    },
+    render: ({ id, columns, aspect, images }) => /* @__PURE__ */ jsx(Gallery, { columns, aspect, images, testId: blockTestId(id) })
+  };
+  const VideoBlock = {
+    label: "Video",
+    fields: {
+      url: { type: "text", label: "Video URL (YouTube/Vimeo/Loom or file)" },
+      title: { type: "text", label: "Title" },
+      aspect: {
+        type: "radio",
+        label: "Aspect",
+        options: [
+          { label: "16:9", value: "16:9" },
+          { label: "4:3", value: "4:3" },
+          { label: "1:1", value: "1:1" }
+        ]
+      },
+      rounded: boolRadio("Rounded")
+    },
+    defaultProps: { url: "", title: "", aspect: "16:9", rounded: true },
+    render: ({ id, url, title, aspect, rounded }) => /* @__PURE__ */ jsx(
+      VideoEmbed,
+      {
+        url,
+        title,
+        aspect,
+        rounded,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const ContactFormBlock = {
+    label: "Contact form",
+    fields: {
+      submitLabel: { type: "text", label: "Submit label" },
+      action: { type: "text", label: "POST endpoint (optional)" },
+      successMessage: textareaField("Success message"),
+      fields: {
+        type: "array",
+        label: "Fields",
+        getItemSummary: (item) => item?.label || "Field",
+        defaultItemProps: { name: "field", label: "Field", type: "text", required: false },
+        arrayFields: {
+          name: { type: "text", label: "Name attribute" },
+          label: textField("Label"),
+          type: {
+            type: "select",
+            label: "Type",
+            options: [
+              { label: "Text", value: "text" },
+              { label: "Email", value: "email" },
+              { label: "Phone", value: "tel" },
+              { label: "Multi-line", value: "textarea" }
+            ]
+          },
+          required: boolRadio("Required")
+        }
+      }
+    },
+    defaultProps: {
+      submitLabel: "Send",
+      action: "",
+      successMessage: "Thanks \u2014 we\u2019ll be in touch shortly.",
+      fields: [
+        { name: "name", label: "Name", type: "text", required: true },
+        { name: "email", label: "Email", type: "email", required: true },
+        { name: "message", label: "Message", type: "textarea", required: true }
+      ]
+    },
+    render: ({ id, submitLabel, action, successMessage, fields }) => /* @__PURE__ */ jsx(
+      ContactForm,
+      {
+        submitLabel,
+        action: action || void 0,
+        successMessage,
+        fields,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const BannerBlock = {
+    label: "Banner",
+    fields: {
+      text: textField("Text"),
+      cta: ctaField("CTA"),
+      tone: {
+        type: "radio",
+        label: "Tone",
+        options: [
+          { label: "Primary", value: "primary" },
+          { label: "Muted", value: "muted" },
+          { label: "Dark", value: "ink" }
+        ]
+      }
+    },
+    defaultProps: {
+      text: "We just shipped something new.",
+      cta: { label: "Read more", href: "#" },
+      tone: "primary"
+    },
+    render: ({ id, text, cta, tone }) => /* @__PURE__ */ jsx(Banner, { text, cta, tone, testId: blockTestId(id) })
+  };
+  const MediaTextBlock = {
+    label: "Media & text",
+    fields: {
+      eyebrow: textField("Eyebrow"),
+      title: textField("Title"),
+      body: textareaField("Body", void 0, "lead"),
+      imageUrl: imageField("Image"),
+      mediaSide: {
+        type: "radio",
+        label: "Media side",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Right", value: "right" }
+        ]
+      },
+      cta: ctaField("CTA")
+    },
+    defaultProps: {
+      eyebrow: "",
+      title: "A closer look at what we do.",
+      body: "Pair a compelling visual with the copy that explains it \u2014 the classic split section, on any theme.",
+      imageUrl: "",
+      mediaSide: "left",
+      cta: { label: "Learn more", href: "#" }
+    },
+    render: ({ id, eyebrow, title, body, imageUrl, mediaSide, cta }) => /* @__PURE__ */ jsx(
+      MediaText,
+      {
+        eyebrow,
+        title,
+        body,
+        imageUrl,
+        mediaSide,
+        cta,
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const TeamGridBlock = {
+    label: "Team",
+    fields: {
+      columns: columnsField(["2", "3", "4"]),
+      members: {
+        type: "array",
+        label: "Members",
+        getItemSummary: (item) => item?.name || "Member",
+        defaultItemProps: { name: "New member", role: "Role", bio: "", avatarUrl: "" },
+        arrayFields: {
+          name: textField("Name"),
+          role: { type: "text", label: "Role" },
+          bio: textareaField("Bio"),
+          avatarUrl: { type: "text", label: "Avatar URL" }
+        }
+      }
+    },
+    defaultProps: {
+      columns: "3",
+      members: [
+        { name: "Alex Morgan", role: "Founder & CEO", bio: "", avatarUrl: "" },
+        { name: "Sam Rivera", role: "Head of Product", bio: "", avatarUrl: "" },
+        { name: "Jordan Lee", role: "Lead Engineer", bio: "", avatarUrl: "" }
+      ]
+    },
+    render: ({ id, columns, members }) => /* @__PURE__ */ jsx(TeamGrid, { columns, members, testId: blockTestId(id) })
+  };
+  const StepsBlock = {
+    label: "Steps",
+    fields: {
+      variant: {
+        type: "radio",
+        label: "Style",
+        options: [
+          { label: "Numbered", value: "numbered" },
+          { label: "Timeline", value: "timeline" }
+        ]
+      },
+      steps: {
+        type: "array",
+        label: "Steps",
+        getItemSummary: (item) => item?.title || "Step",
+        defaultItemProps: { title: "Step", description: "Describe this step." },
+        arrayFields: {
+          title: textField("Title"),
+          description: textareaField("Description")
+        }
+      }
+    },
+    defaultProps: {
+      variant: "numbered",
+      steps: [
+        { title: "Sign up", description: "Create your account in seconds." },
+        { title: "Configure", description: "Set things up to match your workflow." },
+        { title: "Launch", description: "Go live and start seeing results." }
+      ]
+    },
+    render: ({ id, variant, steps }) => /* @__PURE__ */ jsx(Steps, { variant, steps, testId: blockTestId(id) })
+  };
+  const TestimonialGridBlock = {
+    label: "Testimonial grid",
+    fields: {
+      columns: columnsField(["2", "3"]),
+      items: {
+        type: "array",
+        label: "Testimonials",
+        getItemSummary: (item) => item?.author || "Testimonial",
+        defaultItemProps: { quote: "A great quote.", author: "Author", role: "", avatarUrl: "" },
+        arrayFields: {
+          quote: textareaField("Quote"),
+          author: textField("Author"),
+          role: { type: "text", label: "Role" },
+          avatarUrl: { type: "text", label: "Avatar URL" }
+        }
+      }
+    },
+    defaultProps: {
+      columns: "3",
+      items: [
+        {
+          quote: "This changed how our whole team works.",
+          author: "Alex Morgan",
+          role: "CTO, Northwind",
+          avatarUrl: ""
+        },
+        {
+          quote: "The best tool we adopted this year.",
+          author: "Sam Rivera",
+          role: "Ops Lead, Acme",
+          avatarUrl: ""
+        },
+        {
+          quote: "Simple, fast, and it just works.",
+          author: "Jordan Lee",
+          role: "Founder, Globex",
+          avatarUrl: ""
+        }
+      ]
+    },
+    render: ({ id, columns, items }) => /* @__PURE__ */ jsx(TestimonialGrid, { columns, items, testId: blockTestId(id) })
+  };
+  return {
+    Pricing: PricingBlock,
+    Tabs: TabsBlock,
+    Accordion: AccordionBlock,
+    Gallery: GalleryBlock,
+    Video: VideoBlock,
+    ContactForm: ContactFormBlock,
+    Banner: BannerBlock,
+    MediaText: MediaTextBlock,
+    Team: TeamGridBlock,
+    Steps: StepsBlock,
+    TestimonialGrid: TestimonialGridBlock
+  };
+}
+var emptySlot2 = [];
+var METRIC_COLS = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3",
+  "4": "sm:grid-cols-2 lg:grid-cols-4"
+};
+var METRIC_GAP = { sm: "gap-3", md: "gap-4", lg: "gap-6" };
+function createArbiBlocksConfig(opts = {}) {
+  const kit = createBlockKit(opts.aiFields, opts.imageField, opts.eyebrowClassName);
+  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,
+        eyebrowClassName: kit.eyebrowClassName
+      }
+    ) })
+  };
+  const PageHeaderBlock = {
+    label: "Page header",
+    fields: {
+      title: textField("Title"),
+      eyebrow: textField("Eyebrow"),
+      description: textareaField("Description", void 0, "description"),
+      // `actions` is a slot so the top band can host real buttons/badges authored
+      // as blocks (drop a Button in), while the interactive body stays bespoke.
+      actions: { type: "slot", allow: ["Button", "Badge"] }
+    },
+    defaultProps: { title: "Page title", actions: emptySlot2 },
+    render: ({ id, title, eyebrow, description, actions: Actions }) => /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title,
+        eyebrow,
+        description,
+        actions: /* @__PURE__ */ jsx(Actions, { className: "flex items-center gap-2" }),
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const EmptyStateBlock = {
+    label: "Empty state",
+    fields: {
+      title: textField("Title"),
+      description: textareaField("Description", void 0, "description"),
+      icon: iconField(),
+      // `action` is a slot so an empty state can offer a real call-to-action button.
+      action: { type: "slot", allow: ["Button"] }
+    },
+    defaultProps: { title: "Nothing here yet", action: emptySlot2 },
+    render: ({ id, title, description, icon, action: Action }) => /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title,
+        description,
+        icon: resolveIcon(icon),
+        action: /* @__PURE__ */ jsx(Action, {}),
+        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: "Default", value: "default" },
+          { label: "Primary", value: "primary" },
+          { label: "Success", value: "success" },
+          { label: "Muted", value: "muted" }
+        ]
+      },
+      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: "default" },
+    render: ({ id, label, value, hint, accent, delta, icon }) => /* @__PURE__ */ jsx(
+      MetricCard,
+      {
+        label,
+        value,
+        hint,
+        accent,
+        delta,
+        icon: resolveIcon(icon),
+        testId: blockTestId(id)
+      }
+    )
+  };
+  const MetricRowBlock = {
+    label: "Metric row",
+    fields: {
+      columns: {
+        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" }
+        ]
+      },
+      // Static KPI tiles and (when registered) live metric widgets both belong in a band.
+      items: { type: "slot", allow: ["MetricCard", "LiveMetric"] }
+    },
+    defaultProps: { columns: "3", gap: "md", items: emptySlot2 },
+    render: ({ id, columns, gap, items: Items }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(
+      Items,
+      {
+        className: cn(
+          "grid grid-cols-1",
+          METRIC_COLS[columns] ?? METRIC_COLS["3"],
+          METRIC_GAP[gap] ?? METRIC_GAP.md
+        )
+      }
+    ) })
+  };
+  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: "Item", field: "item", 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: "Dark", value: "ink" }
+        ]
+      },
+      padding: {
+        type: "radio",
+        label: "Padding",
+        options: [
+          { label: "None", value: "none" },
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" }
+        ]
+      },
+      maxWidth: {
+        type: "radio",
+        label: "Width",
+        options: [
+          { label: "Narrow", value: "narrow" },
+          { label: "Default", value: "default" },
+          { label: "Wide", value: "wide" },
+          { label: "Full", value: "full" }
+        ]
+      },
+      texture: boolRadio("Texture")
+    },
+    defaultProps: {
+      tone: "default",
+      padding: "md",
+      maxWidth: "default",
+      texture: false,
+      children: []
+    },
+    render: ({ id, tone, padding, maxWidth, texture, children: Children }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(Section, { tone, padding, maxWidth, texture, 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 site = createSiteBlocks(kit);
+  const widgets = opts.liveWidgets ? createLiveWidgets(kit) : {};
+  const components = {
+    SectionHeading: SectionHeadingBlock,
+    PageHeader: PageHeaderBlock,
+    EmptyState: EmptyStateBlock,
+    MetricCard: MetricCardBlock,
+    MetricRow: MetricRowBlock,
+    DataTable: DataTableBlockConfig,
+    Section: SectionBlock,
+    Card: CardBlock,
+    Button: ButtonBlock,
+    Badge: BadgeBlock,
+    Separator: SeparatorBlock,
+    ...website,
+    ...site,
+    ...widgets
+  };
+  const config = {
+    categories: {
+      Layout: {
+        title: "Layout",
+        components: ["Section", "Container", "Columns", "Card", "Spacer"]
+      },
+      Marketing: {
+        title: "Marketing",
+        components: [
+          "Hero",
+          "FeatureGrid",
+          "StatGroup",
+          "Testimonial",
+          "TestimonialGrid",
+          "CTABanner",
+          "Banner",
+          "LogoCloud",
+          "FAQ",
+          "MediaText",
+          "Steps",
+          "Team"
+        ]
+      },
+      Content: {
+        title: "Content",
+        components: ["SectionHeading", "PageHeader", "EmptyState", "RichText", "Callout", "List"]
+      },
+      Interactive: { title: "Interactive", components: ["Tabs", "Accordion"] },
+      Media: { title: "Media", components: ["Image", "Avatar", "Gallery", "Video"] },
+      Commerce: { title: "Commerce", components: ["Pricing"] },
+      Forms: { title: "Forms", components: ["ContactForm"] },
+      Navigation: { title: "Navigation", components: ["Navbar", "Footer"] },
+      Data: { title: "Data", components: ["MetricRow", "MetricCard", "DataTable", "Timeline"] },
+      ...opts.liveWidgets ? { Widgets: { title: "Widgets", components: ["AgentActivity", "LiveMetric"] } } : {},
+      Primitives: { title: "Primitives", components: ["Button", "Badge", "Separator"] }
+    },
+    components,
+    root: {
+      render: ({ children }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("bg-background text-foreground font-sans", opts.root?.className),
+          "data-testid": opts.root?.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-lg",
+        "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-foreground", children: m.label }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-xs text-muted-foreground", children: m.to })
+                  ] }),
+                  m.arbi && /* @__PURE__ */ jsxs(Badge, { variant: "accent", className: "text-xs", 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-lg",
+        "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-primary" }),
+            " 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-foreground", children: v.title ?? "Untitled behaviour" }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-xs 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-lg", "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-primary" }),
+        " 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-foreground", children: (a.given_name ?? "Agent").replace(/-/g, " ") }),
+                /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-xs 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-primary" }),
+        " 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-foreground p-4 font-mono text-xs leading-relaxed text-background",
+        "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, AssetThumb, LiveDataProvider, ModuleManager, PageRenderer, Section, StudioEditor, StudioPersistenceError, VerticalBuilder, WidgetPlaceholder, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createSiteBlocks, createStudioPersistence, createVerticalExport, createWebsiteBlocks, iconMap, materializePageData, useAssetImage, useImageGen, useLiveDataActive };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map