@arbidocs/blocks 0.3.111 → 0.3.113

package/dist/index.js

@@ -1,8 +1,8 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
-import { MessageSquare, Cpu, Code, Cloud, Layers, Target, Award, MapPin, Phone, Mail, Lock, Globe, Heart, Star, Rocket, Shield, Zap, Sparkles, Gavel, Scale, Bell, Activity, BarChart3, DollarSign, TrendingUp, Info, AlertCircle, CheckCircle, Clock, Calendar, Briefcase, Users, Folder, FileText, RotateCcw, Palette, Search, ArrowUpRight, ArrowDownRight, ImageIcon, ArrowRight, Quote, ChevronDown, XCircle, AlertTriangle, CheckCircle2, ArrowLeft, Loader2, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Check, Save, Download } from 'lucide-react';
-import { Input, Card, CardHeader, CardTitle, CardContent, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider } from '@arbidocs/react';
+import { MessageSquare, Cpu, Code, Cloud, Layers, Target, Award, MapPin, Phone, Mail, Lock, Globe, Heart, Star, Rocket, Shield, Zap, Sparkles, Gavel, Scale, Bell, Activity, BarChart3, DollarSign, TrendingUp, Info, AlertCircle, CheckCircle, Clock, Calendar, Briefcase, Users, Folder, FileText, RotateCcw, Palette, Search, ArrowUpRight, ArrowDownRight, ImageIcon, ArrowRight, Quote, ChevronDown, XCircle, AlertTriangle, CheckCircle2, Check, ArrowLeft, Loader2, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Save, Download, ImagePlus, Upload, Link2 } from 'lucide-react';
+import { Input, Card, CardHeader, CardTitle, CardContent, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs as Tabs$1, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider, useDocuments, useThumbnails } from '@arbidocs/react';
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
@@ -808,7 +808,7 @@ function EmptyState({
       "data-testid": testId,
       children: [
         Icon && /* @__PURE__ */ jsx("div", { className: "mb-3 flex size-11 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
-        /* @__PURE__ */ jsx("p", { className: "font-display text-base font-semibold text-ink", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "font-display text-base font-semibold text-foreground", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
       ]
@@ -1176,10 +1176,10 @@ function GridView({
       const BORDER = 2;
       const PREFERRED_PAD = 16;
       const padTotal = Math.max(0, Math.min(PREFERRED_PAD, rowHeight - BORDER - LINE_PX));
-      const lines = Math.max(1, Math.floor((rowHeight - BORDER - padTotal) / LINE_PX));
+      const lines2 = Math.max(1, Math.floor((rowHeight - BORDER - padTotal) / LINE_PX));
       const vars = style;
       vars["--abstract-pad-y"] = `${padTotal / 2}px`;
-      vars["--abstract-max-h"] = `${lines * LINE_PX + padTotal + BORDER}px`;
+      vars["--abstract-max-h"] = `${lines2 * LINE_PX + padTotal + BORDER}px`;
     }
     return style;
   }, [height, rowHeight]);
@@ -1301,8 +1301,8 @@ function PageHeader({
       "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          eyebrow && /* @__PURE__ */ jsx("p", { className: "eyebrow mb-1", children: eyebrow }),
-          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-ink", children: title }),
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold tracking-tight text-foreground", children: title }),
           description && /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-sm text-muted-foreground", children: description })
         ] }),
         actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
@@ -1316,16 +1316,26 @@ function SectionHeading({
   lead,
   align = "left",
   className,
-  invert
+  invert,
+  eyebrowClassName
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", align === "center" && "mx-auto text-center", className), children: [
-    eyebrow && /* @__PURE__ */ jsx("p", { className: "eyebrow mb-3", children: eyebrow }),
+    eyebrow && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mb-3 text-xs font-semibold uppercase tracking-wider",
+          eyebrowClassName ?? (invert ? "text-background/60" : "text-muted-foreground")
+        ),
+        children: eyebrow
+      }
+    ),
     /* @__PURE__ */ jsx(
       "h2",
       {
         className: cn(
           "font-display text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
-          invert ? "text-parchment" : "text-ink"
+          invert ? "text-background" : "text-foreground"
         ),
         children: title
       }
@@ -1335,7 +1345,7 @@ function SectionHeading({
       {
         className: cn(
           "mt-4 text-lg leading-relaxed",
-          invert ? "text-parchment/70" : "text-muted-foreground"
+          invert ? "text-background/70" : "text-muted-foreground"
         ),
         children: lead
       }
@@ -1387,15 +1397,15 @@ function MetricCard({
   icon: Icon,
   hint,
   delta,
-  accent = "ink",
+  accent = "default",
   testId
 }) {
-  const accentColor = accent === "emerald" ? "text-emerald" : accent === "brass" ? "text-[color:var(--color-brass)]" : "text-ink";
+  const accentStyle = accent && accent !== "default" ? { color: `var(--color-${accent})` } : void 0;
   const deltaGood = delta?.good ?? delta?.direction === "up";
   return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "card-hover rounded-xl p-5", "data-testid": testId, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
-      Icon && /* @__PURE__ */ jsx(Icon, { className: cn("size-4 shrink-0", accentColor) })
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", style: accentStyle })
     ] }),
     /* @__PURE__ */ jsx(
       "p",
@@ -1423,6 +1433,54 @@ function MetricCard({
     ] })
   ] });
 }
+var ASSET_REF_PREFIX = "asset:";
+function asAssetRef(docId) {
+  return `${ASSET_REF_PREFIX}${docId}`;
+}
+function assetRefId(src) {
+  return src.slice(ASSET_REF_PREFIX.length);
+}
+var AssetResolverContext = createContext(false);
+function AssetResolverProvider({ children }) {
+  return /* @__PURE__ */ jsx(AssetResolverContext.Provider, { value: true, children });
+}
+function useAssetResolverActive() {
+  return useContext(AssetResolverContext);
+}
+function isAssetRef(src) {
+  return !!src && src.startsWith(ASSET_REF_PREFIX);
+}
+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 });
+}
 var ASPECT = {
   "16:9": "aspect-video",
   "4:3": "aspect-[4/3]",
@@ -1441,11 +1499,28 @@ function BlockImage({
   alt = "",
   aspect = "16:9",
   rounded = "lg",
+  framed,
   className,
   testId
 }) {
-  const shape = cn(ASPECT[aspect] ?? ASPECT["16:9"], ROUNDED[rounded] ?? ROUNDED.lg);
-  if (src) {
+  const shape = cn(
+    ASPECT[aspect] ?? ASPECT["16:9"],
+    ROUNDED[rounded] ?? ROUNDED.lg,
+    framed && "ring-1 ring-border shadow-xl"
+  );
+  const canResolve = useAssetResolverActive();
+  if (canResolve && isAssetRef(src)) {
+    return /* @__PURE__ */ jsx(
+      AssetThumb,
+      {
+        docId: assetRefId(src),
+        alt,
+        className: cn("w-full object-cover", shape, className),
+        testId
+      }
+    );
+  }
+  if (src && !isAssetRef(src)) {
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -1477,38 +1552,82 @@ var TONE_SURFACE = {
   muted: "bg-muted text-foreground",
   ink: "bg-foreground text-background"
 };
+function renderTitle(title, emphasis) {
+  if (!emphasis || !title.includes(emphasis)) return title;
+  const parts = title.split(emphasis);
+  return parts.map((part, i) => /* @__PURE__ */ jsxs("span", { children: [
+    part,
+    i < parts.length - 1 && /* @__PURE__ */ jsx("span", { className: "text-primary", children: emphasis })
+  ] }, i));
+}
 function Hero({
   eyebrow,
   title,
+  emphasis,
   subtitle,
   primaryCta,
   secondaryCta,
   align = "left",
   tone = "default",
   imageUrl,
+  backgroundImage,
+  overlay = true,
+  eyebrowClassName,
   testId
 }) {
-  const subtle = tone === "ink" ? "text-background/70" : "text-muted-foreground";
-  const eyebrowClass = tone === "ink" ? "text-background/60" : "text-muted-foreground";
-  const centered = align === "center";
-  const copy = /* @__PURE__ */ jsxs("div", { className: cn("max-w-2xl", centered && "mx-auto text-center"), children: [
-    eyebrow && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm font-semibold uppercase tracking-wider", eyebrowClass), children: eyebrow }),
-    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-semibold tracking-tight text-balance sm:text-5xl", children: title }),
-    subtitle && /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg leading-relaxed", subtle), children: subtitle }),
-    (primaryCta?.label || secondaryCta?.label) && /* @__PURE__ */ jsxs(
-      "div",
+  const onDark = Boolean(backgroundImage) || tone === "ink";
+  const subtle = onDark ? "text-background/70" : "text-muted-foreground";
+  const eyebrowClass = eyebrowClassName ?? (onDark ? "text-background/60" : "text-muted-foreground");
+  const centered = align === "center" || Boolean(backgroundImage);
+  const heading = renderTitle(title, emphasis);
+  const copy = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "max-w-2xl",
+        centered && "mx-auto text-center",
+        backgroundImage && "text-background"
+      ),
+      children: [
+        eyebrow && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm font-semibold uppercase tracking-wider", eyebrowClass), children: eyebrow }),
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-semibold tracking-tight text-balance sm:text-5xl", children: heading }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg leading-relaxed", subtle), children: subtitle }),
+        (primaryCta?.label || secondaryCta?.label) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("mt-8 flex flex-col gap-3 sm:flex-row", centered && "sm:justify-center"),
+            children: [
+              primaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", children: /* @__PURE__ */ jsxs("a", { href: primaryCta.href || "#", children: [
+                primaryCta.label,
+                /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+              ] }) }),
+              secondaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: "outline", children: /* @__PURE__ */ jsx("a", { href: secondaryCta.href || "#", children: secondaryCta.label }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (backgroundImage) {
+    const bgStyle = {
+      backgroundImage: `url("${backgroundImage}")`,
+      backgroundSize: "cover",
+      backgroundPosition: "center"
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
       {
-        className: cn("mt-8 flex flex-col gap-3 sm:flex-row", centered && "sm:justify-center"),
+        className: "relative isolate overflow-hidden",
+        style: bgStyle,
+        "data-testid": testId,
+        "data-bg": testId && `${testId}-bg`,
         children: [
-          primaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", children: /* @__PURE__ */ jsxs("a", { href: primaryCta.href || "#", children: [
-            primaryCta.label,
-            /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
-          ] }) }),
-          secondaryCta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: "outline", children: /* @__PURE__ */ jsx("a", { href: secondaryCta.href || "#", children: secondaryCta.label }) })
+          overlay && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("div", { className: "relative mx-auto max-w-7xl px-5 py-28 lg:px-8 lg:py-36", children: copy })
         ]
       }
-    )
-  ] });
+    );
+  }
   return /* @__PURE__ */ jsx("section", { className: cn(TONE_SURFACE[tone] ?? TONE_SURFACE.default), "data-testid": testId, children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-7xl px-5 py-20 lg:px-8 lg:py-28", children: centered ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-12", children: [
     copy,
     imageUrl && /* @__PURE__ */ jsx(
@@ -1593,23 +1712,49 @@ var TONE_SURFACE2 = {
   muted: "bg-muted text-foreground",
   ink: "bg-foreground text-background"
 };
-function CTABanner({ title, subtitle, cta, tone = "default", testId }) {
-  const subtle = tone === "default" ? "text-primary-foreground/80" : tone === "ink" ? "text-background/70" : "text-muted-foreground";
+function CTABanner({
+  title,
+  subtitle,
+  cta,
+  tone = "default",
+  backgroundImage,
+  overlay = true,
+  testId
+}) {
+  const onImage = Boolean(backgroundImage);
+  const subtle = onImage ? "text-white/80" : tone === "default" ? "text-primary-foreground/80" : tone === "ink" ? "text-background/70" : "text-muted-foreground";
+  const bgStyle = backgroundImage ? {
+    backgroundImage: `url("${backgroundImage}")`,
+    backgroundSize: "cover",
+    backgroundPosition: "center"
+  } : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-2xl px-8 py-14 text-center",
-        TONE_SURFACE2[tone] ?? TONE_SURFACE2.default
+        "relative isolate overflow-hidden rounded-2xl px-8 py-14 text-center",
+        onImage ? "text-white" : TONE_SURFACE2[tone] ?? TONE_SURFACE2.default
       ),
+      style: bgStyle,
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
-        subtitle && /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-2xl text-lg", subtle), children: subtitle }),
-        cta?.label && /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(Button, { asChild: true, size: "lg", variant: tone === "default" ? "secondary" : "default", children: /* @__PURE__ */ jsxs("a", { href: cta.href || "#", children: [
-          cta.label,
-          /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
-        ] }) }) })
+        onImage && overlay && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-2xl text-lg", subtle), children: subtitle }),
+          cta?.label && /* @__PURE__ */ jsx("div", { className: "mt-8", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              asChild: true,
+              size: "lg",
+              variant: tone === "default" && !onImage ? "secondary" : "default",
+              children: /* @__PURE__ */ jsxs("a", { href: cta.href || "#", children: [
+                cta.label,
+                /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+              ] })
+            }
+          ) })
+        ] })
       ]
     }
   );
@@ -1774,6 +1919,449 @@ function Container({ width = "default", padding = "md", children, testId }) {
     }
   );
 }
+function PricingTable({ plans, testId }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-6", (plans?.length ?? 0) >= 3 ? "md:grid-cols-3" : "sm:grid-cols-2"),
+      "data-testid": testId,
+      children: (plans ?? []).map((plan, i) => /* @__PURE__ */ jsxs(
+        Card,
+        {
+          variant: plan.featured ? "elevated" : "outline",
+          className: cn("flex h-full flex-col p-6", plan.featured && "ring-2 ring-primary"),
+          "data-testid": testId && `${testId}-item-${i}`,
+          children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: plan.name }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-3xl font-semibold tracking-tight", children: plan.price }),
+              plan.period && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                "/",
+                plan.period
+              ] })
+            ] }),
+            plan.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: plan.description }),
+            plan.features && plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-5 flex-1 space-y-2", children: plan.features.map((f, j) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-primary" }),
+              /* @__PURE__ */ jsx("span", { children: f })
+            ] }, j)) }),
+            plan.cta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, className: "mt-6 w-full", variant: plan.featured ? "default" : "outline", children: /* @__PURE__ */ jsx("a", { href: plan.cta.href || "#", children: plan.cta.label }) })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function Tabs({ items, testId }) {
+  const [active, setActive] = useState(0);
+  const list = items ?? [];
+  const current = list[Math.min(active, Math.max(list.length - 1, 0))];
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 border-b border-border", role: "tablist", children: list.map((t, i) => {
+      const selected = i === active;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          onClick: () => setActive(i),
+          className: cn(
+            "-mb-px border-b-2 px-4 py-2 text-sm font-medium transition-colors",
+            selected ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+          ),
+          "data-testid": testId && `${testId}-tab-${i}`,
+          children: t.label
+        },
+        i
+      );
+    }) }),
+    current && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        className: "pt-5 text-sm leading-relaxed text-muted-foreground",
+        "data-testid": testId && `${testId}-panel`,
+        children: current.content
+      }
+    )
+  ] });
+}
+function Accordion({ items, allowMultiple = false, testId }) {
+  const [open, setOpen] = useState([]);
+  const toggle2 = (i) => setOpen(
+    (prev) => prev.includes(i) ? prev.filter((n) => n !== i) : allowMultiple ? [...prev, i] : [i]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "divide-y divide-border border-y border-border", "data-testid": testId, children: (items ?? []).map((item, i) => {
+    const isOpen = open.includes(i);
+    return /* @__PURE__ */ jsxs("div", { "data-testid": testId && `${testId}-item-${i}`, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": isOpen,
+          onClick: () => toggle2(i),
+          className: "flex w-full items-center justify-between gap-4 py-4 text-left text-base font-medium",
+          "data-testid": testId && `${testId}-trigger-${i}`,
+          children: [
+            item.title,
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn("size-4 shrink-0 transition-transform", isOpen && "rotate-180")
+              }
+            )
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "pb-4 text-sm leading-relaxed text-muted-foreground",
+          "data-testid": testId && `${testId}-content-${i}`,
+          children: item.content
+        }
+      )
+    ] }, i);
+  }) });
+}
+var COLS2 = {
+  "2": "grid-cols-2",
+  "3": "grid-cols-2 sm:grid-cols-3",
+  "4": "grid-cols-2 sm:grid-cols-4"
+};
+function Gallery({
+  images,
+  columns = "3",
+  aspect = "1:1",
+  rounded = "lg",
+  testId
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", COLS2[columns] ?? COLS2["3"]), "data-testid": testId, children: (images ?? []).map((img, i) => /* @__PURE__ */ jsxs("figure", { "data-testid": testId && `${testId}-item-${i}`, children: [
+    /* @__PURE__ */ jsx(
+      BlockImage,
+      {
+        src: img.src,
+        alt: img.alt,
+        aspect,
+        rounded,
+        testId: testId && `${testId}-item-${i}-image`
+      }
+    ),
+    img.caption && /* @__PURE__ */ jsx("figcaption", { className: "mt-1.5 text-xs text-muted-foreground", children: img.caption })
+  ] }, i)) });
+}
+var ASPECT2 = {
+  "16:9": "aspect-video",
+  "4:3": "aspect-[4/3]",
+  "1:1": "aspect-square"
+};
+function toEmbedUrl(url) {
+  if (!url) return null;
+  const yt = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([\w-]{11})/);
+  if (yt) return `https://www.youtube.com/embed/${yt[1]}`;
+  const vimeo = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+  const loom = url.match(/loom\.com\/(?:share|embed)\/([\w-]+)/);
+  if (loom) return `https://www.loom.com/embed/${loom[1]}`;
+  return null;
+}
+function VideoEmbed({
+  url,
+  title,
+  aspect = "16:9",
+  rounded = true,
+  testId
+}) {
+  const embed = toEmbedUrl(url);
+  const frame = cn(
+    "w-full overflow-hidden border border-border bg-muted",
+    ASPECT2[aspect] ?? ASPECT2["16:9"],
+    rounded && "rounded-lg"
+  );
+  return /* @__PURE__ */ jsx("div", { className: frame, "data-testid": testId, children: embed ? /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: embed,
+      title: title || "Embedded video",
+      className: "size-full",
+      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: true,
+      "data-testid": testId && `${testId}-iframe`
+    }
+  ) : url ? /* @__PURE__ */ jsx("video", { src: url, controls: true, className: "size-full", "data-testid": testId && `${testId}-video` }) : null });
+}
+function ContactForm({
+  fields,
+  submitLabel = "Send",
+  action,
+  successMessage = "Thanks \u2014 we\u2019ll be in touch shortly.",
+  testId
+}) {
+  const [sent, setSent] = useState(false);
+  const list = fields ?? [];
+  const onSubmit = (e) => {
+    if (!action) {
+      e.preventDefault();
+      setSent(true);
+    }
+  };
+  if (sent) {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "rounded-lg border border-border bg-muted p-6 text-center text-sm text-foreground",
+        role: "status",
+        "data-testid": testId && `${testId}-success`,
+        children: successMessage
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      action,
+      method: action ? "post" : void 0,
+      onSubmit,
+      className: "mx-auto flex max-w-xl flex-col gap-4",
+      "data-testid": testId,
+      children: [
+        list.map((f, i) => {
+          const inputClass = "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground outline-none focus:border-primary";
+          return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1.5 text-left", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: f.label }),
+            f.type === "textarea" ? /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                name: f.name,
+                required: f.required,
+                rows: 4,
+                className: inputClass,
+                "data-testid": testId && `${testId}-field-${f.name}`
+              }
+            ) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                name: f.name,
+                type: f.type || "text",
+                required: f.required,
+                className: inputClass,
+                "data-testid": testId && `${testId}-field-${f.name}`
+              }
+            )
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            className: cn("mt-1 self-start"),
+            "data-testid": testId && `${testId}-submit`,
+            children: submitLabel
+          }
+        )
+      ]
+    }
+  );
+}
+var TONE = {
+  primary: "bg-primary text-primary-foreground",
+  muted: "bg-muted text-foreground",
+  ink: "bg-foreground text-background"
+};
+function Banner({ text, cta, tone = "primary", testId }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full px-5 py-2.5 text-center text-sm", TONE[tone] ?? TONE.primary),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: text }),
+        cta?.label && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: cta.href || "#",
+            className: "ml-2 inline-flex items-center gap-1 font-semibold underline underline-offset-4",
+            "data-testid": testId && `${testId}-cta`,
+            children: [
+              cta.label,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-3.5" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function MediaText({
+  eyebrow,
+  title,
+  body,
+  imageUrl,
+  mediaSide = "left",
+  cta,
+  testId
+}) {
+  const media = /* @__PURE__ */ jsx(BlockImage, { src: imageUrl, aspect: "4:3", rounded: "lg", testId: testId && `${testId}-image` });
+  const copy = /* @__PURE__ */ jsxs("div", { children: [
+    eyebrow && /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+    /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-balance", children: title }),
+    body && /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg leading-relaxed text-muted-foreground", children: body }),
+    cta?.label && /* @__PURE__ */ jsx(Button, { asChild: true, className: "mt-6", children: /* @__PURE__ */ jsxs("a", { href: cta.href || "#", children: [
+      cta.label,
+      /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+    ] }) })
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: "grid items-center gap-10 lg:grid-cols-2", "data-testid": testId, children: mediaSide === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    copy,
+    media
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    media,
+    copy
+  ] }) });
+}
+var COLS3 = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3",
+  "4": "sm:grid-cols-2 lg:grid-cols-4"
+};
+function TeamGrid({ members, columns = "3", testId }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", COLS3[columns] ?? COLS3["3"]), "data-testid": testId, children: (members ?? []).map((m, i) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outline",
+      className: "flex h-full flex-col items-center p-6 text-center",
+      "data-testid": testId && `${testId}-item-${i}`,
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "size-20", children: [
+          m.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: m.avatarUrl, alt: m.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: initials(m.name || "?") })
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: m.name }),
+        m.role && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary", children: m.role }),
+        m.bio && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: m.bio })
+      ]
+    },
+    i
+  )) });
+}
+function Steps({ steps, variant = "numbered", testId }) {
+  const list = steps ?? [];
+  if (variant === "timeline") {
+    return /* @__PURE__ */ jsx("ol", { className: "relative ml-3 border-l border-border", "data-testid": testId, children: list.map((s, i) => /* @__PURE__ */ jsxs("li", { className: "mb-8 ml-6 last:mb-0", "data-testid": testId && `${testId}-item-${i}`, children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute -left-3 flex size-6 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: i + 1 }),
+      /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight", children: s.title }),
+      s.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-muted-foreground", children: s.description })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid gap-6", list.length >= 4 ? "md:grid-cols-4" : "sm:grid-cols-3"),
+      "data-testid": testId,
+      children: list.map((s, i) => /* @__PURE__ */ jsxs("div", { "data-testid": testId && `${testId}-item-${i}`, children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary", children: i + 1 }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-4 text-base font-semibold tracking-tight", children: s.title }),
+        s.description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: s.description })
+      ] }, i))
+    }
+  );
+}
+var COLS4 = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3"
+};
+function TestimonialGrid({ items, columns = "3", testId }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", COLS4[columns] ?? COLS4["3"]), "data-testid": testId, children: (items ?? []).map((t, i) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outline",
+      className: "flex h-full flex-col p-6",
+      "data-testid": testId && `${testId}-item-${i}`,
+      children: [
+        /* @__PURE__ */ jsx(Quote, { className: "size-6 text-primary/40", "aria-hidden": true }),
+        /* @__PURE__ */ jsx("blockquote", { className: "mt-3 flex-1 text-base leading-relaxed", children: t.quote }),
+        (t.author || t.avatarUrl) && /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
+            t.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: t.avatarUrl, alt: t.author ?? "" }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: initials(t.author || "?") })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            t.author && /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: t.author }),
+            t.role && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t.role })
+          ] })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+
+// 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,
@@ -1786,9 +2374,14 @@ function StudioEditor({
   backLabel = "Back",
   live,
   initialSlug,
-  testIdPrefix = "studio"
+  testIdPrefix = "studio",
+  publishAsset
 }) {
   const arbi = useArbi();
+  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);
@@ -1816,11 +2409,16 @@ function StudioEditor({
   const persist4 = useCallback(
     async (toSave) => {
       setSaving(true);
-      const where = await persistence.savePage(arbi, live, slug, toSave);
-      setVia(where);
-      setSaving(false);
+      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);
+      } finally {
+        setSaving(false);
+      }
     },
-    [arbi, live, slug, persistence]
+    [arbi, live, slug, persistence, materialize]
   );
   useEffect(() => {
     let cancelled = false;
@@ -1850,7 +2448,7 @@ function StudioEditor({
           Link,
           {
             to: backHref,
-            className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm text-muted-foreground hover:text-emerald",
+            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" }),
@@ -1861,7 +2459,7 @@ function StudioEditor({
         ),
         /* @__PURE__ */ jsx("span", { className: "h-4 w-px bg-border" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "font-display text-sm font-semibold text-ink", children: brandLabel }),
+      /* @__PURE__ */ jsx("span", { className: "font-display text-sm font-semibold text-foreground", children: brandLabel }),
       /* @__PURE__ */ jsx(
         "select",
         {
@@ -1889,7 +2487,7 @@ function StudioEditor({
           {
             type: "button",
             onClick: () => setThemeOpen((o) => !o),
-            className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:border-emerald hover:text-emerald",
+            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" }),
@@ -1903,7 +2501,7 @@ function StudioEditor({
             type: "button",
             onClick: () => void persist4(latest.current),
             disabled: saving || loading,
-            className: "inline-flex items-center gap-1.5 rounded-md bg-emerald px-3 py-1.5 text-sm font-medium text-parchment hover:bg-emerald-bright disabled:opacity-60",
+            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" }),
@@ -1926,7 +2524,7 @@ function StudioEditor({
             "\u201D\u2026"
           ]
         }
-      ) : /* @__PURE__ */ jsx(
+      ) : /* @__PURE__ */ jsx(AssetResolverProvider, { children: /* @__PURE__ */ jsx(
         Puck,
         {
           config,
@@ -1937,7 +2535,7 @@ function StudioEditor({
           onPublish: (d) => void persist4(d)
         },
         `${slug}-${rev}`
-      ) }),
+      ) }) }),
       themeOpen && /* @__PURE__ */ jsx(
         "aside",
         {
@@ -1975,11 +2573,13 @@ function PageRenderer({
     let cancelled = false;
     setLoading(true);
     void (async () => {
-      const [{ data: page }, { data: theme }] = await Promise.all([
-        persistence.loadPage(arbi, live, slug),
+      const [{ data: published }, { data: theme }] = await Promise.all([
+        persistence.loadPublished(arbi, live, slug),
         persistence.loadTheme(arbi, live)
       ]);
       if (cancelled) return;
+      const page = published ?? (await persistence.loadPage(arbi, live, slug)).data;
+      if (cancelled) return;
       applyThemeVars(
         theme ? { ...defaultTheme, ...theme, colors: { ...defaultTheme.colors, ...theme.colors } } : defaultTheme
       );
@@ -2009,7 +2609,7 @@ function PageRenderer({
         className: "mx-auto max-w-2xl px-5 py-24 text-center",
         "data-testid": `${testIdPrefix}-render-empty`,
         children: [
-          /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-semibold text-ink", children: title }),
+          /* @__PURE__ */ jsx("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 })
         ]
       }
@@ -2023,9 +2623,11 @@ function createStudioPersistence(cfg) {
   const WORKSPACE_ID = cfg.workspaceId;
   const FOLDER = cfg.folder ?? "site";
   const pageKey = (slug) => `${cfg.storagePrefix}${slug}`;
+  const publishedKey = (slug) => `${cfg.storagePrefix}published-${slug}`;
   const THEME_KEY = cfg.themeStorageKey ?? `${cfg.storagePrefix}theme`;
   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;
   }
@@ -2048,39 +2650,47 @@ function createStudioPersistence(cfg) {
       return JSON.parse(raw);
     }
   }
-  async function savePage(arbi, live, slug, data) {
+  async function writePage(arbi, live, kind, localKey, fileName, data) {
     try {
-      localStorage.setItem(pageKey(slug), JSON.stringify(data));
+      localStorage.setItem(localKey, JSON.stringify(data));
     } catch {
     }
     if (canUseArbi(arbi, live)) {
       try {
-        await uploadJson(arbi, pageFile(slug), data);
-        console.info(`[studio] saved page "${slug}" \u2192 ARBI (${WORKSPACE_ID})`);
+        await uploadJson(arbi, fileName, data);
+        console.info(`[studio] saved ${kind} "${fileName}" \u2192 ARBI (${WORKSPACE_ID})`);
         return "arbi";
       } catch (e) {
-        console.warn(`[studio] ARBI save failed for "${slug}", kept localStorage`, e);
+        console.warn(`[studio] ARBI save failed for "${fileName}", kept localStorage`, e);
       }
     }
-    console.info(`[studio] saved page "${slug}" \u2192 localStorage`);
+    console.info(`[studio] saved ${kind} "${fileName}" \u2192 localStorage`);
     return "local";
   }
-  async function loadPage(arbi, live, slug) {
+  async function readPage(arbi, live, localKey, fileName) {
     if (canUseArbi(arbi, live)) {
       try {
-        const data = await downloadJson(arbi, pageFile(slug));
-        if (data) {
-          console.info(`[studio] loaded page "${slug}" \u2190 ARBI`);
-          return { data, via: "arbi" };
-        }
+        const data = await downloadJson(arbi, fileName);
+        if (data) return { data, via: "arbi" };
       } catch (e) {
-        console.warn(`[studio] ARBI load failed for "${slug}", trying localStorage`, e);
+        console.warn(`[studio] ARBI load failed for "${fileName}", trying localStorage`, e);
       }
     }
-    const raw = safeLocalGet(pageKey(slug));
-    console.info(`[studio] loaded page "${slug}" \u2190 localStorage`);
+    const raw = safeLocalGet(localKey);
     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 saveTheme(arbi, live, theme) {
     try {
       localStorage.setItem(THEME_KEY, JSON.stringify(theme));
@@ -2117,7 +2727,7 @@ function createStudioPersistence(cfg) {
       return null;
     }
   }
-  return { savePage, loadPage, saveTheme, loadTheme };
+  return { savePage, loadPage, savePublished, loadPublished, saveTheme, loadTheme };
 }
 function AiTextField({
   value,
@@ -2232,14 +2842,286 @@ function createAiFields(cfg) {
   });
   return { aiText, aiTextarea };
 }
-function Section({ children, tone = "default", className = "" }) {
-  const toneClass = tone === "ink" ? "bg-ink text-parchment" : tone === "muted" ? "border-y border-border bg-card/40" : "";
-  return /* @__PURE__ */ jsx("section", { className: `relative ${toneClass}`, children: /* @__PURE__ */ jsx("div", { className: `mx-auto max-w-7xl px-5 py-16 lg:px-8 lg:py-20 ${className}`, children }) });
+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;
 }
-var iconMap = {
-  FileText,
-  Folder,
-  Users,
+function useImageGen() {
+  const task = useFirmAiTask();
+  const { run } = task;
+  const generate = useCallback(
+    async (prompt) => {
+      const trimmed = prompt.trim();
+      if (!trimmed) return null;
+      const result = await run(`/image ${trimmed}`, []);
+      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
+  };
+}
+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 arbi = useArbi();
+  const gen = useImageGen();
+  const tp = (...q) => tid(`${testIdPrefix}-image`, name, ...q);
+  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 = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setBusy(true);
+    try {
+      await arbi.selectWorkspace(workspaceId);
+      const res = await arbi.documents.uploadFile(file, file.name, { folder });
+      const id = res.doc_ext_ids?.[0];
+      if (id) onChange(asAssetRef(id));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onGenerate = async () => {
+    if (!prompt.trim() || gen.isGenerating) return;
+    const id = await gen.generate(prompt);
+    if (id) onChange(asAssetRef(id));
+  };
+  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__ */ jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+    /* @__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 object-cover"
+              }
+            ) : /* @__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: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: inputClass,
+          rows: 2,
+          placeholder: "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" : "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"
+      }
+    )
+  ] });
+}
+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 PADDING2 = {
+  none: "",
+  sm: "py-8 lg:py-10",
+  md: "py-16 lg:py-20",
+  lg: "py-24 lg:py-28"
+};
+var WIDTH2 = {
+  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",
+          WIDTH2[maxWidth],
+          PADDING2[padding],
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+var iconMap = {
+  FileText,
+  Folder,
+  Users,
   Briefcase,
   Calendar,
   Clock,
@@ -2277,10 +3159,12 @@ var ICON_OPTIONS = [
   { label: "None", value: "" },
   ...Object.keys(iconMap).map((name) => ({ label: name, value: name }))
 ];
-function createBlockKit(ai) {
+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,
@@ -2310,7 +3194,7 @@ var toneField = {
   ]
 };
 function createWebsiteBlocks(kit) {
-  const { textField, textareaField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
+  const { textField, textareaField, imageField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
   const ctaField = (label) => ({
     type: "object",
     label,
@@ -2409,6 +3293,7 @@ function createWebsiteBlocks(kit) {
     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"),
@@ -2421,29 +3306,51 @@ function createWebsiteBlocks(kit) {
         ]
       },
       tone: toneField,
-      imageUrl: { type: "text", label: "Image URL" }
+      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: ""
+      imageUrl: "",
+      backgroundImage: "",
+      overlay: true
     },
-    render: ({ id, eyebrow, title, subtitle, primaryCta, secondaryCta, align, tone, imageUrl }) => /* @__PURE__ */ jsx(
+    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)
       }
     )
@@ -2560,15 +3467,30 @@ function createWebsiteBlocks(kit) {
       title: textField("Title"),
       subtitle: textareaField("Subtitle"),
       cta: ctaField("Button"),
-      tone: toneField
+      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"
+      tone: "default",
+      backgroundImage: "",
+      overlay: true
     },
-    render: ({ id, title, subtitle, cta, tone }) => /* @__PURE__ */ jsx(CTABanner, { title, subtitle, cta, tone, testId: blockTestId(id) })
+    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",
@@ -2660,7 +3582,7 @@ function createWebsiteBlocks(kit) {
   const ImageBlock = {
     label: "Image",
     fields: {
-      src: { type: "text", label: "Image URL" },
+      src: imageField("Image"),
       alt: textField("Alt text"),
       aspect: {
         type: "radio",
@@ -2681,10 +3603,21 @@ function createWebsiteBlocks(kit) {
           { label: "L", value: "lg" },
           { label: "Full", value: "full" }
         ]
-      }
+      },
+      framed: boolRadio("Framed")
     },
-    defaultProps: { src: "", alt: "Image", aspect: "16:9", rounded: "lg" },
-    render: ({ id, src, alt, aspect, rounded }) => /* @__PURE__ */ jsx(BlockImage, { src, alt, aspect, rounded, testId: blockTestId(id) })
+    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",
@@ -2830,8 +3763,440 @@ function createWebsiteBlocks(kit) {
     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, { 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
+  };
+}
 function createArbiBlocksConfig(opts = {}) {
-  const kit = createBlockKit(opts.aiFields);
+  const kit = createBlockKit(opts.aiFields, opts.imageField, opts.eyebrowClassName);
   const { textField, textareaField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
   const SectionHeadingBlock = {
     label: "Section heading",
@@ -2850,7 +4215,17 @@ function createArbiBlocksConfig(opts = {}) {
       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 }) })
+    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",
@@ -2900,9 +4275,10 @@ function createArbiBlocksConfig(opts = {}) {
         type: "radio",
         label: "Accent",
         options: [
-          { label: "Ink", value: "ink" },
-          { label: "Emerald", value: "emerald" },
-          { label: "Brass", value: "brass" }
+          { label: "Default", value: "default" },
+          { label: "Primary", value: "primary" },
+          { label: "Success", value: "success" },
+          { label: "Muted", value: "muted" }
         ]
       },
       delta: {
@@ -2923,7 +4299,7 @@ function createArbiBlocksConfig(opts = {}) {
       },
       icon: iconField()
     },
-    defaultProps: { label: "Metric", value: "0", accent: "ink" },
+    defaultProps: { label: "Metric", value: "0", accent: "default" },
     render: ({ id, label, value, hint, accent, delta, icon }) => /* @__PURE__ */ jsx(
       MetricCard,
       {
@@ -3026,12 +4402,39 @@ function createArbiBlocksConfig(opts = {}) {
         options: [
           { label: "Default", value: "default" },
           { label: "Muted", value: "muted" },
-          { label: "Ink", value: "ink" }
+          { 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: []
     },
-    defaultProps: { tone: "default", children: [] },
-    render: ({ id, tone, children: Children }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(Section, { tone, children: /* @__PURE__ */ jsx(Children, {}) }) })
+    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",
@@ -3107,6 +4510,7 @@ function createArbiBlocksConfig(opts = {}) {
     render: ({ id }) => /* @__PURE__ */ jsx(Separator, { "data-testid": blockTestId(id) })
   };
   const website = createWebsiteBlocks(kit);
+  const site = createSiteBlocks(kit);
   const components = {
     SectionHeading: SectionHeadingBlock,
     PageHeader: PageHeaderBlock,
@@ -3118,7 +4522,8 @@ function createArbiBlocksConfig(opts = {}) {
     Button: ButtonBlock,
     Badge: BadgeBlock,
     Separator: SeparatorBlock,
-    ...website
+    ...website,
+    ...site
   };
   const config = {
     categories: {
@@ -3133,16 +4538,24 @@ function createArbiBlocksConfig(opts = {}) {
           "FeatureGrid",
           "StatGroup",
           "Testimonial",
+          "TestimonialGrid",
           "CTABanner",
+          "Banner",
           "LogoCloud",
-          "FAQ"
+          "FAQ",
+          "MediaText",
+          "Steps",
+          "Team"
         ]
       },
       Content: {
         title: "Content",
         components: ["SectionHeading", "PageHeader", "EmptyState", "RichText", "Callout", "List"]
       },
-      Media: { title: "Media", components: ["Image", "Avatar"] },
+      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: ["MetricCard", "DataTable"] },
       Primitives: { title: "Primitives", components: ["Button", "Badge", "Separator"] }
@@ -3152,8 +4565,8 @@ function createArbiBlocksConfig(opts = {}) {
       render: ({ children }) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: "bg-background text-foreground font-sans",
-          "data-testid": "arbi-blocks-page-root",
+          className: cn("bg-background text-foreground font-sans", opts.root?.className),
+          "data-testid": opts.root?.testId ?? "arbi-blocks-page-root",
           children
         }
       )
@@ -3393,7 +4806,7 @@ function ModuleManager({ store, testIdPrefix = "builder" }) {
                   ] }),
                   /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: m.label }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: m.label }),
                     /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: m.to })
                   ] }),
                   m.arbi && /* @__PURE__ */ jsxs(Badge, { variant: "accent", className: "text-[10px]", children: [
@@ -3464,7 +4877,7 @@ function AgentsPanel({ store, testIdPrefix = "builder" }) {
         "data-testid": `${testIdPrefix}-agents-configs`,
         children: [
           /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-            /* @__PURE__ */ jsx(BrainCircuit, { className: "size-4 text-emerald" }),
+            /* @__PURE__ */ jsx(BrainCircuit, { className: "size-4 text-primary" }),
             " Behaviour configurations",
             /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1", children: versions.length })
           ] }) }),
@@ -3486,7 +4899,7 @@ function AgentsPanel({ store, testIdPrefix = "builder" }) {
                     }
                   ),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: v.title ?? "Untitled behaviour" }),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: v.title ?? "Untitled behaviour" }),
                     /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: v.external_id })
                   ] }),
                   /* @__PURE__ */ jsx(ConfigModelBadge, { configId: v.external_id, testIdPrefix })
@@ -3500,7 +4913,7 @@ function AgentsPanel({ store, testIdPrefix = "builder" }) {
     ),
     /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", "data-testid": `${testIdPrefix}-agents-agents`, children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
-        /* @__PURE__ */ jsx(Bot, { className: "size-4 text-emerald" }),
+        /* @__PURE__ */ jsx(Bot, { className: "size-4 text-primary" }),
         " Agents",
         /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1", children: agents.length })
       ] }) }),
@@ -3522,7 +4935,7 @@ function AgentsPanel({ store, testIdPrefix = "builder" }) {
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-ink", children: (a.given_name ?? "Agent").replace(/-/g, " ") }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: (a.given_name ?? "Agent").replace(/-/g, " ") }),
                 /* @__PURE__ */ jsx("p", { className: "truncate font-mono text-[11px] text-muted-foreground", children: a.external_id })
               ] })
             ]
@@ -3547,7 +4960,7 @@ function ExportPanel({
   return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl", "data-testid": `${testIdPrefix}-export-panel`, children: [
     /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between text-base", children: [
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(FileJson, { className: "size-4 text-emerald" }),
+        /* @__PURE__ */ jsx(FileJson, { className: "size-4 text-primary" }),
         " Vertical config"
       ] }),
       /* @__PURE__ */ jsxs(
@@ -3567,7 +4980,7 @@ function ExportPanel({
     /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
       "pre",
       {
-        className: "scrollbar-slim max-h-[520px] overflow-auto rounded-md bg-ink p-4 font-mono text-[11px] leading-relaxed text-parchment",
+        className: "scrollbar-slim max-h-[520px] overflow-auto rounded-md bg-foreground p-4 font-mono text-[11px] leading-relaxed text-background",
         "data-testid": `${testIdPrefix}-export-preview`,
         children: json
       }
@@ -3585,7 +4998,7 @@ function VerticalBuilder({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", "data-testid": `page-${testIdPrefix}`, children: [
     header,
-    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "theme", children: [
+    /* @__PURE__ */ jsxs(Tabs$1, { 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" }),
@@ -3629,6 +5042,6 @@ function VerticalBuilder({
   ] });
 }
 
-export { AgentsPanel, AvatarBlock, BlockImage, CTABanner, Callout, Columns, ConnectionProvider, Container, DataTable, DataTableBlock, EmptyState, FAQ, FeatureGrid, Footer, GridView, Hero, LegalArbiProvider, ListBlock, LogoCloud, MetricCard, ModuleManager, Navbar, PageHeader, PageRenderer, RichTextBlock, Section, SectionHeading, Spacer, StatGroup, StudioEditor, THEME_STYLE_ID, Testimonial, ThemeEditor, Toolbar, VerticalBuilder, applyStoredTheme, applyThemeVars, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createBlockKit, createModuleRegistry, createModuleStore, createPromptLibrary, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAuthenticated, matterToContext, pct, tid, toHslTriplet, useConnection, useFirmAiTask, useSemanticSearch, useWorkspaceDocs };
+export { ASSET_REF_PREFIX, Accordion, AgentsPanel, AssetResolverProvider, AvatarBlock, Banner, BlockImage, CTABanner, Callout, Columns, ConnectionProvider, ContactForm, Container, DataTable, DataTableBlock, EmptyState, FAQ, FeatureGrid, Footer, Gallery, GridView, Hero, LegalArbiProvider, ListBlock, LogoCloud, MediaText, MetricCard, ModuleManager, Navbar, PageHeader, PageRenderer, PricingTable, RichTextBlock, Section, SectionHeading, Spacer, StatGroup, Steps, StudioEditor, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, Toolbar, VerticalBuilder, VideoEmbed, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAssetRef, isAuthenticated, materializePageData, matterToContext, pct, tid, toEmbedUrl, toHslTriplet, useAssetResolverActive, useConnection, useFirmAiTask, useImageGen, useSemanticSearch, useWorkspaceDocs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map