@riverbankcms/sdk 0.79.0 → 0.80.0

package/dist/PreviewEditorSidebar-QZG37QIF.mjs

@@ -0,0 +1,2655 @@
+"use client";
+import { resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSidebarChromeModel, resolvePreviewEditorGuidanceModel, ButtonVariantField, IconPickerField, EntryPickerField, ReferenceField, RichTextField, MediaField, FileField, LinkField, canInspectSiteStyle, mapContentSchemaToFormFields, usePreviewBlockCustomizeSelectionOptional, BlockEditor, usePreviewDesignCoordinator, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, createOptimisticActionRunner, syncStyleConfiguratorState, isPreviewingChange, planSiteStylePreviewChange, openRow, previewSiteStyle, applyResolvedSelections, previewButtonPersonality, previewHeaderLayout, previewHeaderStyle, planSiteChromeLookSelection, previewFooterLook, previewPaletteVariant, previewTypographyPreset, setTypographyBodyFontOverride, setTypographyHeadingFontOverride, clearTypographyFontOverrides, setPaletteOverrides, toggleRow, cancelPreview, dismissWarnings, dismissNotices, markApplyFailed, markApplySaved, markApplySaving, canApplySiteStyle, buildSiteChromeLookModels, cycleSiteChromeLookId, LinkWidgetProvider, ReferenceWidgetProvider, EntryPickerWidgetProvider, ButtonWidgetProvider, cycleableSiteChromeOptions, BUILT_IN_REFERENCE_KINDS, useRichTextImagePicker, RichTextWidgetProvider, useBlockCustomizeControls, MAX_QUICK_MANIFEST_FIELDS, parseReferenceKind } from './chunk-5NZGBSJF.mjs';
+import { unwrapResponse, useEntryController, useEditorUiStoreInstance, useUISelector, resolvePreviewSidebarTab, BackgroundGradientField, BackgroundColorField, unsafeAsEditorBlockId, Tabs, TabsList, TabsTrigger, Button, X, TabsContent, omitRouteTitleFieldFromManifest, getRouteMetadataManifestForType, createManifestValidation, createStoreBackend, ManifestForm, previewAssistantEnabled, Collapsible, CollapsibleTrigger, ChevronRight, CollapsibleContent, ContentFieldsForm, getCuratedSiteStyle, paletteOverridesSchema, findButtonPersonality, findPaletteVariant, findTypographyPreset, getHeaderLayout, getHeaderStyle, findFooterLook, footerLookCatalog, foldSubroute, SUBROUTE_KINDS, Smartphone, Tablet, Monitor, Maximize2, cn, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, expectParsedBrandedId, parseSiteId, buildThemeRuntime, SdkConfigProvider, PaletteProvider, MediaEditorProvider, curatedSiteStyles, ChevronLeft, requireEntriesForCuratedChoices, buttonPersonalities, typographyPresets, paletteVariants, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, FormRenderer, evaluateTypographyFontSlot, Callout, CalloutDescription, Separator, Surface, ColorPicker, Input } from './chunk-GYXKAUFV.mjs';
+import { usePreviewAuth, getDashboardUrl } from './chunk-BBLZSQEY.mjs';
+import './chunk-R7POPVJR.mjs';
+import { useMemo, useRef, useCallback, useEffect, useState, useTransition, useSyncExternalStore, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRouter } from 'next/navigation';
+
+// ../editor-blocks/src/widgets/entry-picker/loaders.ts
+function getStatusBadgeVariant(status) {
+  switch (status) {
+    case "published":
+      return "default";
+    case "draft":
+      return "secondary";
+    case "scheduled":
+      return "outline";
+    case "archived":
+      return "destructive";
+    default:
+      return "secondary";
+  }
+}
+function mapEntryPickerItems(entries, valueFrom) {
+  return entries.map((entry) => ({
+    value: valueFrom === "identifier" ? entry.identifier ?? entry.id : valueFrom === "slug" ? entry.slug ?? entry.id : entry.id,
+    label: entry.draftTitle || entry.title || entry.slug || entry.id,
+    id: entry.id,
+    identifier: entry.identifier ?? null,
+    slug: entry.slug ?? null,
+    badge: {
+      label: entry.status,
+      variant: getStatusBadgeVariant(entry.status)
+    }
+  }));
+}
+async function loadEntryPickerItems({
+  apiClient,
+  siteId,
+  contentType,
+  valueFrom
+}) {
+  const result = await apiClient({
+    endpoint: "listContentEntries",
+    params: { siteId, type: contentType }
+  });
+  const { entries } = unwrapResponse(result);
+  return mapEntryPickerItems(entries, valueFrom);
+}
+
+// ../editor-blocks/src/widgets/link/loaders.ts
+async function loadRoutableContentItems({
+  apiClient,
+  siteId
+}) {
+  const result = await apiClient({
+    endpoint: "getRoutableContent",
+    params: { siteId }
+  });
+  const payload = unwrapResponse(result);
+  return Array.isArray(payload?.items) ? payload.items : [];
+}
+
+// ../editor-blocks/src/widgets/reference/dynamicAdapters.ts
+function createDynamicReferenceAdapters(staticAdapters, createDynamicContentAdapter) {
+  return new Proxy(staticAdapters, {
+    get(target, prop) {
+      if (typeof prop !== "string") {
+        return void 0;
+      }
+      if (prop in target) {
+        return target[prop];
+      }
+      const parsed = parseReferenceKind(prop);
+      if (parsed.kind === "dynamicContent") {
+        return createDynamicContentAdapter(parsed.contentTypeKey);
+      }
+      return void 0;
+    }
+  });
+}
+
+// ../editor-blocks/src/widgets/reference/loaders.ts
+function defineReferenceLoader(referenceKind, loader) {
+  return Object.assign(loader, { referenceKind });
+}
+function formatStatusBadge(status) {
+  if (status === "published") {
+    return { label: "Published", variant: "default" };
+  }
+  if (status === "scheduled") {
+    return { label: "Scheduled", variant: "secondary" };
+  }
+  if (status === "archived") {
+    return { label: "Archived", variant: "outline" };
+  }
+  return { label: "Draft", variant: "outline" };
+}
+function hasSlug(entry) {
+  return entry.slug !== null;
+}
+var loadPostReferenceItems = defineReferenceLoader("post", async ({ apiClient, siteId }) => {
+  const result = await apiClient({
+    endpoint: "listContentEntries",
+    params: { siteId, type: "post" }
+  });
+  const { entries } = unwrapResponse(result);
+  return entries.filter(hasSlug).filter((entry) => entry.status === "published").map((entry) => ({
+    value: entry.slug,
+    label: entry.title || entry.slug || entry.id,
+    badge: formatStatusBadge(entry.status)
+  }));
+});
+var loadFormReferenceItems = defineReferenceLoader("form", async ({ apiClient, siteId }) => {
+  const result = await apiClient({
+    endpoint: "listForms",
+    params: { siteId }
+  });
+  const { forms } = unwrapResponse(result);
+  return forms.map((form) => ({
+    value: form.slug,
+    label: form.name
+  }));
+});
+var loadBookingFormReferenceItems = defineReferenceLoader("bookingForm", async ({ apiClient, siteId }) => {
+  const result = await apiClient({
+    endpoint: "listBookingForms",
+    params: { siteId }
+  });
+  const { forms } = unwrapResponse(result);
+  return forms.map((form) => ({
+    value: form.id,
+    label: form.name
+  }));
+});
+var loadAppointmentServiceReferenceItems = defineReferenceLoader(
+  "appointmentService",
+  async ({ apiClient, siteId }) => {
+    const result = await apiClient({
+      endpoint: "getAppointmentServicesReference",
+      params: { siteId }
+    });
+    const { options } = unwrapResponse(result);
+    return options.map((option) => ({
+      value: option.id,
+      label: option.label
+    }));
+  }
+);
+var loadAppointmentResourceReferenceItems = defineReferenceLoader(
+  "appointmentResource",
+  async ({ apiClient, siteId }) => {
+    const result = await apiClient({
+      endpoint: "getAppointmentResourcesReference",
+      params: { siteId }
+    });
+    const { options } = unwrapResponse(result);
+    return options.map((option) => ({
+      value: option.id,
+      label: option.label
+    }));
+  }
+);
+var loadPageReferenceItems = defineReferenceLoader("page", async ({ apiClient, siteId }) => {
+  const result = await apiClient({
+    endpoint: "getRoutableContent",
+    params: { siteId }
+  });
+  const { items } = unwrapResponse(result);
+  return items.filter((item) => item.entityType === "page").map((page) => ({
+    value: page.entityId,
+    label: page.title || "Untitled"
+  }));
+});
+var loadNewsletterListReferenceItems = defineReferenceLoader(
+  "newsletterList",
+  async ({ apiClient, siteId }) => {
+    const result = await apiClient({
+      endpoint: "listNewsletterLists",
+      params: { siteId }
+    });
+    const { lists } = unwrapResponse(result);
+    return lists.map((list) => ({
+      value: list.id,
+      label: list.name
+    }));
+  }
+);
+async function loadDynamicContentReferenceItems({
+  apiClient,
+  siteId,
+  contentTypeKey
+}) {
+  const result = await apiClient({
+    endpoint: "listContentEntries",
+    params: { siteId, type: contentTypeKey }
+  });
+  const { entries } = unwrapResponse(result);
+  return entries.filter((entry) => entry.status === "published").map((entry) => ({
+    value: entry.id,
+    label: entry.title || entry.slug || entry.id,
+    badge: { label: "Published", variant: "default" }
+  }));
+}
+var referenceLoaders = {
+  post: loadPostReferenceItems,
+  form: loadFormReferenceItems,
+  bookingForm: loadBookingFormReferenceItems,
+  appointmentService: loadAppointmentServiceReferenceItems,
+  appointmentResource: loadAppointmentResourceReferenceItems,
+  page: loadPageReferenceItems,
+  newsletterList: loadNewsletterListReferenceItems
+};
+
+// ../preview-next/src/client/widgets/widgetAdapters.ts
+var routableContentCache = /* @__PURE__ */ new Map();
+var entryPickerCache = /* @__PURE__ */ new Map();
+var referenceItemsCache = /* @__PURE__ */ new Map();
+var dynamicReferenceItemsCache = /* @__PURE__ */ new Map();
+var MAX_CACHE_ENTRIES = 50;
+function setBoundedCache(map, key, value) {
+  if (!map.has(key) && map.size >= MAX_CACHE_ENTRIES) {
+    const firstKey = map.keys().next().value;
+    if (firstKey !== void 0) {
+      map.delete(firstKey);
+    }
+  }
+  map.set(key, value);
+}
+function createCachedDynamicContentReferenceAdapter(contentTypeKey, previewClient, fallbackSiteId) {
+  return {
+    labels: {
+      loading: "Loading entries\u2026",
+      select: "Select an entry",
+      empty: "No entries found",
+      emptySelection: "Select an entry to continue."
+    },
+    loadItems: async ({ siteId }) => {
+      const resolvedSiteId = siteId || fallbackSiteId;
+      if (!resolvedSiteId) {
+        return [];
+      }
+      const cacheKey = `${resolvedSiteId}:content:${contentTypeKey}`;
+      const cached = dynamicReferenceItemsCache.get(cacheKey);
+      if (cached) return cached;
+      const promise = (async () => {
+        try {
+          return await loadDynamicContentReferenceItems({
+            apiClient: previewClient,
+            siteId: resolvedSiteId,
+            contentTypeKey
+          });
+        } catch (error) {
+          dynamicReferenceItemsCache.delete(cacheKey);
+          throw error;
+        }
+      })();
+      setBoundedCache(dynamicReferenceItemsCache, cacheKey, promise);
+      return promise;
+    }
+  };
+}
+function createCachedReferenceAdapterLoader(kind, loader, previewClient, fallbackSiteId) {
+  return async ({ siteId }) => {
+    const resolvedSiteId = siteId || fallbackSiteId;
+    if (!resolvedSiteId) {
+      return [];
+    }
+    const cacheKey = `${kind}:${resolvedSiteId}`;
+    const cached = referenceItemsCache.get(cacheKey);
+    if (cached) return cached;
+    const promise = (async () => {
+      try {
+        return await loader({ apiClient: previewClient, siteId: resolvedSiteId });
+      } catch (error) {
+        referenceItemsCache.delete(cacheKey);
+        throw error;
+      }
+    })();
+    setBoundedCache(referenceItemsCache, cacheKey, promise);
+    return promise;
+  };
+}
+function createPreviewLinkAdapters(previewClient) {
+  return {
+    fetchRoutableContent: async (currentSiteId) => {
+      const cached = routableContentCache.get(currentSiteId);
+      if (cached) return cached;
+      const promise = (async () => {
+        try {
+          return await loadRoutableContentItems({ apiClient: previewClient, siteId: currentSiteId });
+        } catch (error) {
+          routableContentCache.delete(currentSiteId);
+          throw error;
+        }
+      })();
+      setBoundedCache(routableContentCache, currentSiteId, promise);
+      return promise;
+    }
+  };
+}
+function createPreviewEntryPickerAdapter(previewClient) {
+  return {
+    loadItems: async ({ siteId, contentType, valueFrom }) => {
+      if (!siteId || !contentType) return [];
+      const cacheKey = `${siteId}:${contentType}:${valueFrom ?? "id"}`;
+      const cached = entryPickerCache.get(cacheKey);
+      if (cached) return cached;
+      const request = (async () => {
+        try {
+          return await loadEntryPickerItems({
+            apiClient: previewClient,
+            siteId,
+            contentType,
+            valueFrom
+          });
+        } catch (error) {
+          entryPickerCache.delete(cacheKey);
+          throw error;
+        }
+      })();
+      setBoundedCache(entryPickerCache, cacheKey, request);
+      return request;
+    },
+    labels: {
+      loading: "Loading entries...",
+      select: "Select an entry",
+      empty: "No entries found",
+      emptySelection: "Select an entry to embed.",
+      noContentType: "Select a content type first."
+    }
+  };
+}
+var previewReferenceChrome = {
+  post: {
+    labels: {
+      loading: "Loading posts\u2026",
+      select: "Select a post",
+      empty: "No posts found",
+      emptySelection: "Select a post to continue."
+    }
+  },
+  form: {
+    labels: {
+      loading: "Loading forms\u2026",
+      select: "Select a form",
+      empty: "No forms found",
+      emptySelection: "Select a form to continue."
+    }
+  },
+  bookingForm: {
+    labels: {
+      loading: "Loading booking forms\u2026",
+      select: "Select a booking form",
+      empty: "No booking forms yet",
+      emptySelection: "Select a booking form to enable appointment booking."
+    }
+  },
+  appointmentService: {
+    labels: {
+      loading: "Loading appointment services\u2026",
+      select: "Select a service",
+      empty: "No services available",
+      emptySelection: "Select a service to enable booking."
+    }
+  },
+  appointmentResource: {
+    labels: {
+      loading: "Loading resources\u2026",
+      select: "Select a resource",
+      empty: "No resources available",
+      emptySelection: "Select a resource (optional)."
+    }
+  },
+  page: {
+    labels: {
+      loading: "Loading pages\u2026",
+      select: "Select a page",
+      empty: "No pages available",
+      emptySelection: "Select a page."
+    }
+  },
+  newsletterList: {
+    labels: {
+      loading: "Loading lists\u2026",
+      select: "Select a list",
+      empty: "No lists yet",
+      emptySelection: "Select a newsletter list to subscribe users to."
+    }
+  }
+};
+function createPreviewReferenceAdapters(previewClient, fallbackSiteId) {
+  const brandedFallbackSiteId = void 0;
+  const adapters = {};
+  for (const kind of BUILT_IN_REFERENCE_KINDS) {
+    adapters[kind] = {
+      loadItems: createCachedReferenceAdapterLoader(
+        kind,
+        referenceLoaders[kind],
+        previewClient,
+        brandedFallbackSiteId
+      ),
+      labels: previewReferenceChrome[kind].labels
+    };
+  }
+  return createDynamicReferenceAdapters(
+    adapters,
+    (contentTypeKey) => createCachedDynamicContentReferenceAdapter(contentTypeKey, previewClient, brandedFallbackSiteId)
+  );
+}
+function PreviewFormProviderInner({ theme, children }) {
+  const { onPickImage, picker } = useRichTextImagePicker();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RichTextWidgetProvider, { theme, onPickImage, children }),
+    picker
+  ] });
+}
+function PreviewFormProvider({
+  siteId: rawSiteId,
+  theme = null,
+  previewClient,
+  bearerToken,
+  supabaseUrl,
+  mediaAssets,
+  sdkConfig,
+  children
+}) {
+  const siteId = useMemo(() => expectParsedBrandedId(parseSiteId(rawSiteId)), [rawSiteId]);
+  const linkAdapters = useMemo(() => createPreviewLinkAdapters(previewClient), [previewClient]);
+  const entryPickerAdapter = useMemo(() => createPreviewEntryPickerAdapter(previewClient), [previewClient]);
+  const referenceAdapters = useMemo(
+    () => createPreviewReferenceAdapters(previewClient),
+    [previewClient]
+  );
+  const paletteTokens = useMemo(() => {
+    if (!theme) return void 0;
+    try {
+      const runtime = buildThemeRuntime(theme);
+      return runtime.paletteTokens;
+    } catch {
+      return void 0;
+    }
+  }, [theme]);
+  return /* @__PURE__ */ jsx(SdkConfigProvider, { sdkConfig: sdkConfig ?? null, children: /* @__PURE__ */ jsx(PaletteProvider, { tokens: paletteTokens, children: /* @__PURE__ */ jsx(LinkWidgetProvider, { siteId, adapters: linkAdapters, children: /* @__PURE__ */ jsx(ReferenceWidgetProvider, { siteId, adapters: referenceAdapters, children: /* @__PURE__ */ jsx(EntryPickerWidgetProvider, { siteId, adapter: entryPickerAdapter, children: /* @__PURE__ */ jsx(
+    MediaEditorProvider,
+    {
+      siteId,
+      apiClient: previewClient,
+      bearerToken,
+      supabaseUrl,
+      mediaAssets,
+      children: /* @__PURE__ */ jsx(ButtonWidgetProvider, { buttonSystem: theme?.buttons ?? null, children: /* @__PURE__ */ jsx(PreviewFormProviderInner, { theme, children }) })
+    }
+  ) }) }) }) }) });
+}
+var previewWidgetOverrides = {
+  link: LinkField,
+  file: FileField,
+  media: MediaField,
+  richText: RichTextField,
+  reference: ReferenceField,
+  backgroundColor: BackgroundColorField,
+  backgroundGradient: BackgroundGradientField,
+  entryPicker: EntryPickerField,
+  iconPicker: IconPickerField,
+  buttonVariant: ButtonVariantField
+};
+function PreviewZoomControls({ zoom, onZoomChange, disabled }) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: String(zoom),
+      onValueChange: (value) => onZoomChange(value === "fit" ? "fit" : Number(value)),
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-20", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsx(SelectItem, { value: "33", children: "33%" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "50", children: "50%" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "75", children: "75%" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "100", children: "100%" }),
+          /* @__PURE__ */ jsx(SelectItem, { value: "fit", children: "Fit" })
+        ] })
+      ]
+    }
+  );
+}
+var VIEWPORT_PRESETS = [
+  { label: "Mobile", width: 375, icon: Smartphone },
+  { label: "Tablet", width: 768, icon: Tablet },
+  { label: "Desktop", width: 1440, icon: Monitor },
+  { label: "Full Width", width: "full", icon: Maximize2 }
+];
+function PreviewViewportControls({
+  mode,
+  width,
+  onModeChange,
+  onWidthChange,
+  className,
+  zoom,
+  onZoomChange
+}) {
+  const activePreset = VIEWPORT_PRESETS.find((p) => p.width === width);
+  const ActiveIcon = activePreset?.icon ?? Monitor;
+  const activeLabel = mode === "squeeze" ? "Auto fit" : activePreset?.label ?? `${width}px`;
+  const showZoomControls = mode === "fixed" && zoom !== void 0 && onZoomChange !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "gap-2", children: [
+        /* @__PURE__ */ jsx(ActiveIcon, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs", children: activeLabel })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Preview size" }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onModeChange("squeeze"), className: cn(mode === "squeeze" && "bg-accent"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Auto fit" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Matches the space beside the editor" })
+        ] }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onModeChange("fixed"), className: cn(mode === "fixed" && "bg-accent"), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Choose size" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview mobile, tablet, or desktop widths" })
+        ] }) })
+      ] })
+    ] }),
+    mode === "fixed" && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", children: activePreset?.label ?? `${width}px` }) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Screen size" }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        VIEWPORT_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => onWidthChange(preset.width),
+            className: cn(width === preset.width && "bg-accent"),
+            children: [
+              /* @__PURE__ */ jsx(preset.icon, { className: "mr-2 h-4 w-4" }),
+              preset.label,
+              typeof preset.width === "number" && /* @__PURE__ */ jsxs("span", { className: "ml-auto text-xs text-muted-foreground", children: [
+                preset.width,
+                "px"
+              ] })
+            ]
+          },
+          preset.label
+        ))
+      ] })
+    ] }),
+    showZoomControls ? /* @__PURE__ */ jsx(PreviewZoomControls, { zoom, onZoomChange }) : null
+  ] });
+}
+function SubrouteNotice({ model }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-b bg-amber-50 px-4 py-3 text-amber-950", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: model.title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm", children: model.body }),
+    model.cta ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "inline-flex items-center rounded-md bg-white px-3 py-1.5 text-sm font-medium text-amber-950 shadow-sm ring-1 ring-amber-900/10 hover:bg-amber-100",
+        href: model.cta.href,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: model.cta.label
+      }
+    ) }) : null,
+    model.fallbackMessage ? /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-amber-900/90", children: model.fallbackMessage }) : null
+  ] });
+}
+
+// ../preview-next/src/client/preview/subrouteNotice.ts
+function buildNoticeFromMeta(meta, payload, siteId) {
+  const name = meta.formatInstanceName(payload);
+  const title = name ? `You're previewing the ${name} ${meta.instanceNoun} of this ${meta.containerNoun}` : `You're previewing one ${meta.instanceNoun} of this ${meta.containerNoun}`;
+  const body = `Edits in this sidebar apply to the whole ${meta.containerNoun}, so they'll show up on every ${meta.instanceNoun}. Need to change just this ${meta.instanceNoun}? You can do that from your ${meta.listLabel}.`;
+  const ctaLabel = `Edit just this ${meta.instanceNoun}`;
+  let href = null;
+  try {
+    href = getDashboardUrl(`sites/${siteId}/${meta.subEditorPath(payload)}`);
+  } catch {
+    href = null;
+  }
+  return {
+    title,
+    body,
+    cta: href ? { label: ctaLabel, href } : null,
+    fallbackMessage: href ? null : "Dashboard links are unavailable. Set `NEXT_PUBLIC_DASHBOARD_URL` so preview can link back to the dashboard."
+  };
+}
+function resolveSubrouteNotice(ctx, args) {
+  if (!ctx) return null;
+  return foldSubroute(ctx, {
+    "event-occurrence": (occurrence) => buildNoticeFromMeta(SUBROUTE_KINDS["event-occurrence"], occurrence, args.siteId),
+    "course-run": (run) => buildNoticeFromMeta(SUBROUTE_KINDS["course-run"], run, args.siteId)
+  });
+}
+function EntryEditorPanel({
+  siteId,
+  entryData,
+  contentTypeSchema,
+  referenceContentTypeKeys,
+  draftContent,
+  currentTemplate,
+  theme,
+  apiClient,
+  bearerToken,
+  supabaseUrl,
+  entrySubrouteContext,
+  metadataPanel,
+  mediaAssets,
+  widgets,
+  viewportMode,
+  viewportWidth,
+  zoom,
+  onViewportModeChange,
+  onViewportWidthChange,
+  onZoomChange
+}) {
+  const [contentOpen, setContentOpen] = useState(true);
+  const [templateOpen, setTemplateOpen] = useState(false);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const contentFormFields = useMemo(
+    // content-model keeps a source-local structural field type so it can typecheck natively
+    // without importing @riverbankcms/blocks source. Preview is the integration boundary where
+    // those normalized fields are consumed as a block-form manifest.
+    () => contentTypeSchema ? mapContentSchemaToFormFields(contentTypeSchema, {
+      referenceContentTypeKeys
+    }) : [],
+    [contentTypeSchema, referenceContentTypeKeys]
+  );
+  const contentFormSpec = useMemo(
+    () => ({
+      name: "content-fields",
+      version: "1.0",
+      title: "Content",
+      component: "content-form",
+      description: "",
+      fields: contentFormFields,
+      slots: []
+    }),
+    [contentFormFields]
+  );
+  const contentInitialValues = useMemo(() => draftContent ?? {}, [draftContent]);
+  const subrouteNotice = useMemo(
+    () => resolveSubrouteNotice(entrySubrouteContext ?? null, { siteId }),
+    [entrySubrouteContext, siteId]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-4 py-2", children: /* @__PURE__ */ jsx(
+      PreviewViewportControls,
+      {
+        mode: viewportMode,
+        width: viewportWidth,
+        onModeChange: onViewportModeChange,
+        onWidthChange: onViewportWidthChange,
+        zoom,
+        onZoomChange
+      }
+    ) }),
+    subrouteNotice ? /* @__PURE__ */ jsx(SubrouteNotice, { model: subrouteNotice }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 space-y-0 overflow-auto", children: [
+      contentTypeSchema && entryData.type ? /* @__PURE__ */ jsx(Collapsible, { open: contentOpen, onOpenChange: setContentOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${contentOpen ? "rotate-90" : ""}` }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Content" })
+        ] }) }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsx(
+          PreviewFormProvider,
+          {
+            siteId,
+            theme: theme ?? null,
+            previewClient: apiClient,
+            bearerToken,
+            supabaseUrl,
+            mediaAssets,
+            children: /* @__PURE__ */ jsx(
+              ContentFieldsForm,
+              {
+                siteId,
+                form: contentFormSpec,
+                initialValues: contentInitialValues,
+                widgets
+              }
+            )
+          }
+        ) }) })
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-sm text-muted-foreground", children: "Content schema not available for this entry type." }) }),
+      currentTemplate && entryData.type ? /* @__PURE__ */ jsx(Collapsible, { open: templateOpen, onOpenChange: setTemplateOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${templateOpen ? "rotate-90" : ""}` }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Template" })
+        ] }) }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 px-4 pb-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-md border px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: currentTemplate.name }),
+            currentTemplate.description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: currentTemplate.description }) : null
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: (() => {
+                try {
+                  return getDashboardUrl(`sites/${siteId}/content/${entryData.type}/template`);
+                } catch {
+                  return "#";
+                }
+              })(),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "inline-flex items-center text-sm text-primary hover:underline",
+              children: "Edit template in dashboard \u2192"
+            }
+          )
+        ] }) })
+      ] }) }) : null,
+      metadataPanel ? /* @__PURE__ */ jsx(Collapsible, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+        /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${detailsOpen ? "rotate-90" : ""}` }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Details" })
+        ] }) }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: metadataPanel }) })
+      ] }) }) : null
+    ] })
+  ] });
+}
+var EMPTY_BLOCK_VALUES = {};
+function SelectedBlockCustomizePanel({
+  blockItems,
+  uiStoreForBlockEditor,
+  theme,
+  sdkConfig
+}) {
+  const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
+  const selection = customizeSelection?.selection ?? { kind: "none" };
+  if (selection.kind === "none") {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground", children: "Select a section in the preview to customize it." });
+  }
+  const selectedBlock = blockItems.find((block) => block.id === selection.blockId) ?? null;
+  if (!selectedBlock) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("p", { children: "This section is no longer on the page." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs font-medium text-foreground underline underline-offset-4",
+          onClick: customizeSelection?.clearInspection,
+          children: "Clear selection"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    SelectedBlockCustomizeFields,
+    {
+      block: selectedBlock,
+      blockId: selection.blockId,
+      uiStoreForBlockEditor,
+      theme,
+      sdkConfig
+    }
+  );
+}
+function SelectedBlockCustomizeFields({
+  block,
+  blockId,
+  uiStoreForBlockEditor,
+  theme,
+  sdkConfig
+}) {
+  const blockContent = useBlockCurrentValues(
+    uiStoreForBlockEditor,
+    blockId,
+    block.content ?? EMPTY_BLOCK_VALUES
+  );
+  const customizeControls = useBlockCustomizeControls({
+    blockId,
+    blockKind: block.kind,
+    content: blockContent,
+    uiStore: uiStoreForBlockEditor,
+    theme,
+    sdkConfig,
+    maxQuickFields: MAX_QUICK_MANIFEST_FIELDS
+  });
+  const { backend, manifest, panelFields, quickFields } = customizeControls;
+  if (!manifest || !backend) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground", children: "No customize controls are available for this section." });
+  }
+  if (quickFields.length === 0 && panelFields.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1 rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("p", { children: "No safe customize controls are available for this section yet." }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Content fields remain in Page Blocks." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: manifest.title }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: formatBlockKindLabel(block.kind) })
+    ] }),
+    quickFields.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "Quick controls" }),
+      /* @__PURE__ */ jsx(
+        FormRenderer,
+        {
+          fields: quickFields,
+          backend,
+          widgetOverrides: previewWidgetOverrides,
+          showSettingsTrigger: false,
+          blockKind: block.kind,
+          className: "space-y-4"
+        }
+      )
+    ] }) : null,
+    panelFields.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "More settings" }),
+      /* @__PURE__ */ jsx(
+        FormRenderer,
+        {
+          fields: panelFields,
+          backend,
+          widgetOverrides: previewWidgetOverrides,
+          showSettingsTrigger: false,
+          blockKind: block.kind,
+          className: "space-y-4"
+        }
+      )
+    ] }) : null
+  ] });
+}
+function useBlockCurrentValues(store, blockId, fallback) {
+  return useSyncExternalStore(
+    store.subscribe,
+    () => readBlockCurrentValues(store, blockId, fallback),
+    () => fallback
+  );
+}
+function readBlockCurrentValues(store, blockId, fallback) {
+  const values = store.getState().drafts.getCurrentValues(blockId);
+  return values ?? fallback;
+}
+function formatBlockKindLabel(blockKind) {
+  return blockKind.replace(/^block\./, "").replace(/^custom\./, "").replace(/[-_]+/g, " ");
+}
+function PageBlockEditorPanel({
+  siteId,
+  pageId,
+  theme,
+  apiClient,
+  bearerToken,
+  supabaseUrl,
+  blockItems,
+  uiStoreForBlockEditor,
+  blockEditorRef,
+  onBlocksChange,
+  metadataPanel,
+  designPanel,
+  sdkConfig,
+  mediaAssets,
+  viewportMode,
+  viewportWidth,
+  zoom,
+  onViewportModeChange,
+  onViewportWidthChange,
+  onZoomChange
+}) {
+  const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
+  const [designOpen, setDesignOpen] = useState(false);
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+  const [contentOpen, setContentOpen] = useState(true);
+  const [detailsOpen, setDetailsOpen] = useState(false);
+  const selectionKind = customizeSelection?.selection.kind;
+  const selectionRequestId = customizeSelection?.selection.kind === "selected" ? customizeSelection.selection.requestId : 0;
+  useEffect(() => {
+    if (selectionKind === "selected") {
+      setCustomizeOpen(true);
+    }
+  }, [selectionKind, selectionRequestId]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-4 py-2", children: /* @__PURE__ */ jsx(
+      PreviewViewportControls,
+      {
+        mode: viewportMode,
+        width: viewportWidth,
+        onModeChange: onViewportModeChange,
+        onWidthChange: onViewportWidthChange,
+        zoom,
+        onZoomChange
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PreviewFormProvider,
+      {
+        siteId,
+        theme: theme ?? null,
+        previewClient: apiClient,
+        bearerToken,
+        supabaseUrl,
+        mediaAssets,
+        sdkConfig: sdkConfig ?? null,
+        children: /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 space-y-0 overflow-auto", children: [
+          designPanel ? /* @__PURE__ */ jsx(Collapsible, { open: designOpen, onOpenChange: setDesignOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${designOpen ? "rotate-90" : ""}` }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Design" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: designPanel }) })
+          ] }) }) : null,
+          /* @__PURE__ */ jsx(Collapsible, { open: customizeOpen, onOpenChange: setCustomizeOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${customizeOpen ? "rotate-90" : ""}` }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Customize" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsx(
+              SelectedBlockCustomizePanel,
+              {
+                blockItems,
+                uiStoreForBlockEditor,
+                theme: theme ?? null,
+                sdkConfig: sdkConfig ?? null
+              }
+            ) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Collapsible, { open: contentOpen, onOpenChange: setContentOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${contentOpen ? "rotate-90" : ""}` }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Page Blocks" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsx(
+              BlockEditor,
+              {
+                ref: blockEditorRef,
+                siteId,
+                pageId,
+                blocks: blockItems,
+                uiStore: uiStoreForBlockEditor,
+                apiClient,
+                onBlocksChange,
+                widgetOverrides: previewWidgetOverrides,
+                sdkConfig: sdkConfig ?? null,
+                reorderControlMode: "drag-handle-only",
+                actionControlMode: "menu"
+              },
+              pageId
+            ) }) })
+          ] }) }),
+          metadataPanel ? /* @__PURE__ */ jsx(Collapsible, { open: detailsOpen, onOpenChange: setDetailsOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+            /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${detailsOpen ? "rotate-90" : ""}` }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Page Details" })
+            ] }) }),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: metadataPanel }) })
+          ] }) }) : null
+        ] })
+      }
+    )
+  ] });
+}
+function PreviewEditorGuidanceCard({
+  guidance,
+  completeSetupDisabled,
+  onCompleteSetup
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: guidance.cardClassName,
+      "data-preview-guidance-tone": guidance.tone,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-slate-900", children: guidance.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-slate-700", children: guidance.description }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            onClick: onCompleteSetup,
+            disabled: completeSetupDisabled,
+            children: guidance.ctaLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// ../ui/src/palette/hex.ts
+function normalizeHex(input, fallback = "#000000") {
+  if (!input) return fallback;
+  const trimmed = input.trim().replace(/^#/, "").toLowerCase();
+  const expanded = trimmed.length === 3 ? trimmed.split("").map((char) => char + char).join("") : trimmed;
+  if (!/^[0-9a-f]{6}$/i.test(expanded)) {
+    return fallback;
+  }
+  return `#${expanded}`;
+}
+function hexToRgb(hex) {
+  const normalized = normalizeHex(hex).replace("#", "");
+  const match = normalized.match(/.{2}/g);
+  if (!match || match.length < 3) return null;
+  const [r, g, b] = match.map((value) => parseInt(value, 16));
+  return [r, g, b];
+}
+function luminanceChannel(raw) {
+  const channel = raw / 255;
+  return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+}
+function contrastRatio(hexA, hexB) {
+  const rgbA = hexToRgb(hexA);
+  const rgbB = hexToRgb(hexB);
+  if (!rgbA || !rgbB) return 1;
+  const lumA = 0.2126 * luminanceChannel(rgbA[0]) + 0.7152 * luminanceChannel(rgbA[1]) + 0.0722 * luminanceChannel(rgbA[2]);
+  const lumB = 0.2126 * luminanceChannel(rgbB[0]) + 0.7152 * luminanceChannel(rgbB[1]) + 0.0722 * luminanceChannel(rgbB[2]);
+  const brighter = Math.max(lumA, lumB);
+  const darker = Math.min(lumA, lumB);
+  return Number(((brighter + 0.05) / (darker + 0.05)).toFixed(2));
+}
+var DEFAULT_BRAND_ROLES = [
+  { key: "primary", label: "Primary" },
+  { key: "secondary", label: "Secondary" },
+  { key: "accent", label: "Accent" }
+];
+var DEFAULT_FEEDBACK_ROLES = [
+  { key: "success", label: "Success" },
+  { key: "warning", label: "Warning" },
+  { key: "destructive", label: "Destructive" }
+];
+var DEFAULT_SURFACE_ROLES = [
+  { key: "background", label: "Background" },
+  { key: "surface", label: "Surface" },
+  { key: "text", label: "Text" },
+  { key: "border", label: "Border" }
+];
+function PaletteTokenEditor({
+  palette,
+  onChange,
+  hasInvalidValues = false,
+  brandRoles = DEFAULT_BRAND_ROLES,
+  feedbackRoles = DEFAULT_FEEDBACK_ROLES,
+  surfaceRoles = DEFAULT_SURFACE_ROLES,
+  showContrastChecks = true,
+  className
+}) {
+  const paletteValues = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of palette) {
+      if (entry?.name) map.set(entry.name, normalizeHex(entry.hex));
+    }
+    return map;
+  }, [palette]);
+  const getColor = (role) => paletteValues.get(role) ?? "#000000";
+  const handleRoleChange = (role, hex) => {
+    if (!isPlausibleHexInput(hex)) return;
+    onChange(role, normalizeHex(hex));
+  };
+  const backgroundHex = getColor("background");
+  const textHex = getColor("text");
+  const primaryHex = getColor("primary");
+  const contrast = contrastRatio(backgroundHex, textHex);
+  const actionContrast = contrastRatio(primaryHex, backgroundHex);
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    hasInvalidValues ? /* @__PURE__ */ jsx(Callout, { tone: "danger", role: "alert", className: "p-3", children: /* @__PURE__ */ jsx(CalloutDescription, { className: "mt-0", children: "Some palette values are invalid or incomplete." }) }) : null,
+    /* @__PURE__ */ jsx(ColorRoleGroup, { title: "Brand & accents", roles: brandRoles, getColor, onChange: handleRoleChange }),
+    /* @__PURE__ */ jsx(ColorRoleGroup, { title: "Feedback", roles: feedbackRoles, getColor, onChange: handleRoleChange }),
+    /* @__PURE__ */ jsx(ColorRoleGroup, { title: "Surfaces & text", roles: surfaceRoles, getColor, onChange: handleRoleChange }),
+    showContrastChecks ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          ContrastCard,
+          {
+            title: "Background \u2194 Text contrast",
+            value: contrast,
+            threshold: 4.5,
+            primaryLabel: "Background",
+            primaryHex: backgroundHex,
+            secondaryLabel: "Text",
+            secondaryHex: textHex
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContrastCard,
+          {
+            title: "Primary action contrast",
+            value: actionContrast,
+            threshold: 3,
+            primaryLabel: "Primary",
+            primaryHex,
+            secondaryLabel: "Background",
+            secondaryHex: backgroundHex
+          }
+        )
+      ] })
+    ] }) : null
+  ] });
+}
+function isPlausibleHexInput(value) {
+  const trimmed = value.trim();
+  return /^#?[0-9a-fA-F]{3}$/.test(trimmed) || /^#?[0-9a-fA-F]{6}$/.test(trimmed);
+}
+function ColorRoleGroup({ title, roles, getColor, onChange }) {
+  if (roles.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Adjust hex values or drag the color picker." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: roles.map((role) => /* @__PURE__ */ jsx(ColorRoleField, { role, value: getColor(role.key), onChange }, role.key)) })
+  ] });
+}
+function ColorRoleField({ role, value, onChange }) {
+  const inputId = useId();
+  const colorPickerLabel = `${role.label} colour picker`;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-muted p-3 space-y-2", children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-xs uppercase text-muted-foreground font-medium leading-5 block",
+        children: role.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorPicker,
+      {
+        value,
+        onChange: ((next) => {
+          if (typeof next === "string") {
+            onChange(role.key, next);
+          }
+        }),
+        className: "w-full",
+        "aria-label": colorPickerLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        value,
+        onChange: (event) => onChange(role.key, event.target.value),
+        className: "font-mono text-xs uppercase",
+        placeholder: "#000000"
+      }
+    )
+  ] });
+}
+function ContrastCard({ title, value, threshold, primaryLabel, primaryHex, secondaryLabel, secondaryHex }) {
+  const passes = value >= threshold;
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      variant: "background",
+      radius: "lg",
+      padding: "md",
+      className: cn(
+        "space-y-2 border text-sm",
+        passes ? "border-success/40 bg-success/10 text-success" : "border-warning/40 bg-warning/10 text-warning-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold", children: [
+            value,
+            ":1"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs", children: passes ? "Contrast meets WCAG AA guidance." : `Increase contrast to reach ${threshold}:1 or higher.` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-2 text-xs", children: [
+          /* @__PURE__ */ jsx(ContrastSwatch, { hex: primaryHex, label: primaryLabel }),
+          /* @__PURE__ */ jsx(ContrastSwatch, { hex: secondaryHex, label: secondaryLabel })
+        ] })
+      ]
+    }
+  );
+}
+function ContrastSwatch({ hex, label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "h-6 w-6 rounded-full border", style: { backgroundColor: hex } }),
+    /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs uppercase tracking-wide text-muted-foreground", children: [
+      label,
+      ": ",
+      hex
+    ] })
+  ] });
+}
+
+// ../preview-next/src/client/preview/styleConfiguratorApplyPayload.ts
+function buildApplySiteStyleSelectionBody(input) {
+  return {
+    siteStyleId: input.previewed.siteStyleId,
+    buttonPersonalityId: input.previewed.buttonPersonalityId,
+    paletteVariantId: input.previewed.paletteVariantId,
+    paletteOverrides: input.previewed.paletteOverrides,
+    typographyPresetId: input.previewed.typographyPresetId,
+    typographyBodyFontOverride: input.previewed.typographyBodyFontOverride,
+    typographyHeadingFontOverride: input.previewed.typographyHeadingFontOverride,
+    headerLookId: input.previewed.headerLookId,
+    headerLayoutId: input.previewed.headerLayoutId,
+    headerStyleId: input.previewed.headerStyleId,
+    footerLookId: input.previewed.footerLookId,
+    baseSelectionVersion: input.base.selectionVersion,
+    selectionId: input.selectionId ?? null
+  };
+}
+var MAX_FONT_RESULTS_WHEN_SEARCHING = 12;
+var MAX_FONT_RESULTS_WHEN_BROWSING = 8;
+var PALETTE_BRAND_ROLES = [
+  { key: "primary", label: "Primary" },
+  { key: "primaryForeground", label: "Primary text" },
+  { key: "secondary", label: "Secondary" },
+  { key: "accent", label: "Accent" }
+];
+var PALETTE_FEEDBACK_ROLES = [
+  { key: "success", label: "Success" },
+  { key: "warning", label: "Warning" },
+  { key: "destructive", label: "Destructive" }
+];
+var PALETTE_SURFACE_ROLES = [
+  { key: "background", label: "Background" },
+  { key: "surface", label: "Surface" },
+  { key: "surfaceAlt", label: "Alternate surface" },
+  { key: "muted", label: "Muted surface" },
+  { key: "text", label: "Text" },
+  { key: "border", label: "Border" }
+];
+function StyleConfigurator({
+  siteId,
+  apiClient,
+  theme,
+  selectionId,
+  selectionVersion = null,
+  selectionUpdatedAt,
+  initialSelections,
+  headerSelectionContext,
+  footerSelectionContext,
+  expandedRowRequest = null,
+  siteStyleAccess
+}) {
+  const router = useRouter();
+  const previewDesign = usePreviewDesignCoordinator();
+  const {
+    applyFailed,
+    applyStarted,
+    applySucceeded,
+    clearPreview,
+    previewTheme
+  } = previewDesign;
+  const [isRefreshPending, startRefreshTransition] = useTransition();
+  const baseSnapshot = useMemo(
+    () => resolveStyleConfiguratorInitialSnapshot({
+      theme,
+      initialSelections: {
+        ...initialSelections,
+        selectionVersion: initialSelections.selectionVersion ?? selectionVersion ?? 0,
+        selectionUpdatedAt: initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
+      },
+      headerSelectionContext,
+      footerSelectionContext
+    }),
+    [footerSelectionContext, headerSelectionContext, theme, initialSelections, selectionUpdatedAt, selectionVersion]
+  );
+  const [state, setState] = useState(
+    () => baseSnapshot ? createStyleConfiguratorState(baseSnapshot) : null
+  );
+  const hasLoadedState = state !== null;
+  const stateRef = useRef(state);
+  const clearPreviewRef = useRef(clearPreview);
+  const runnerRef = useRef(createOptimisticActionRunner());
+  const appliedExpandedRowRequestIdRef = useRef(null);
+  useEffect(() => {
+    stateRef.current = state;
+  }, [state]);
+  useEffect(() => {
+    clearPreviewRef.current = clearPreview;
+  }, [clearPreview]);
+  useEffect(() => {
+    if (!baseSnapshot) return;
+    setState((current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot));
+  }, [baseSnapshot]);
+  useEffect(() => {
+    if (!state || !baseSnapshot) {
+      clearPreview("style-configurator");
+      return;
+    }
+    if (!isPreviewingChange(state)) {
+      clearPreview("style-configurator");
+      return;
+    }
+    const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
+    if (!siteStyle) {
+      clearPreview("style-configurator");
+      return;
+    }
+    const result = planSiteStylePreviewChange({
+      siteStyle,
+      selection: state.previewed,
+      baseTheme: theme,
+      headerSelectionContext,
+      footerSelectionContext
+    });
+    previewTheme("style-configurator", result.themeOverlay, "site-style");
+  }, [state, baseSnapshot, clearPreview, previewTheme, headerSelectionContext, footerSelectionContext, theme]);
+  useEffect(() => {
+    const runner = runnerRef.current;
+    return () => {
+      runner.invalidate();
+      clearPreviewRef.current("style-configurator");
+    };
+  }, []);
+  useEffect(() => {
+    if (!expandedRowRequest) return;
+    if (appliedExpandedRowRequestIdRef.current === expandedRowRequest.id) return;
+    setState((current) => {
+      if (!current) return current;
+      appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
+      return openRow(current, expandedRowRequest.row === "header" ? "header-layout" : expandedRowRequest.row);
+    });
+  }, [expandedRowRequest, hasLoadedState]);
+  const handlePreviewSiteStyle = useCallback((siteStyleId) => {
+    setState((current) => {
+      if (!current) return current;
+      const next = previewSiteStyle(current, siteStyleId);
+      const siteStyle = getCuratedSiteStyle(siteStyleId);
+      if (!siteStyle) return next;
+      const result = planSiteStylePreviewChange({
+        siteStyle,
+        selection: next.previewed,
+        baseTheme: theme,
+        headerSelectionContext,
+        footerSelectionContext
+      });
+      return applyResolvedSelections(next, {
+        resolved: result.resolvedSelections,
+        warnings: result.warnings
+      });
+    });
+  }, [footerSelectionContext, headerSelectionContext, theme]);
+  const handlePreviewPersonality = useCallback((id) => {
+    setState((current) => current ? previewButtonPersonality(current, id) : current);
+  }, []);
+  const handlePreviewHeaderLayout = useCallback((id) => {
+    if (!id) return;
+    setState((current) => current ? previewHeaderLayout(current, id) : current);
+  }, []);
+  const handlePreviewHeaderStyle = useCallback((id) => {
+    if (!id) return;
+    setState((current) => current ? previewHeaderStyle(current, id) : current);
+  }, []);
+  const handlePreviewFooterLook = useCallback((id) => {
+    const plan = planSiteChromeLookSelection({ surface: "footer", lookId: id });
+    if (plan.kind !== "footer") return;
+    setState((current) => current ? previewFooterLook(current, plan.next.footerLookId) : current);
+  }, []);
+  const handlePreviewPalette = useCallback((id) => {
+    setState((current) => current ? previewPaletteVariant(current, id) : current);
+  }, []);
+  const handlePreviewTypographyPreset = useCallback((id) => {
+    setState((current) => current ? previewTypographyPreset(current, id) : current);
+  }, []);
+  const handleBodyFontOverride = useCallback((fontFamily) => {
+    setState((current) => current ? setTypographyBodyFontOverride(current, fontFamily) : current);
+  }, []);
+  const handleHeadingFontOverride = useCallback((fontFamily) => {
+    setState((current) => current ? setTypographyHeadingFontOverride(current, fontFamily) : current);
+  }, []);
+  const handleClearTypographyOverrides = useCallback(() => {
+    setState((current) => current ? clearTypographyFontOverrides(current) : current);
+  }, []);
+  const handleTokenOverride = useCallback((role, hex) => {
+    setState((current) => {
+      if (!current) return current;
+      const next = { ...current.previewed.paletteOverrides ?? {}, [role]: hex };
+      const parsed = paletteOverridesSchema.safeParse(next);
+      if (!parsed.success) return current;
+      return setPaletteOverrides(current, parsed.data);
+    });
+  }, []);
+  const handleResetOverrides = useCallback(() => {
+    setState((current) => current ? setPaletteOverrides(current, null) : current);
+  }, []);
+  const handleToggleRow = useCallback((row) => {
+    setState((current) => current ? toggleRow(current, row) : current);
+  }, []);
+  const handleCancel = useCallback(() => {
+    setState((current) => current ? cancelPreview(current) : current);
+  }, []);
+  const handleDismissWarnings = useCallback(() => {
+    setState((current) => current ? dismissWarnings(current) : current);
+  }, []);
+  const handleDismissNotices = useCallback(() => {
+    setState((current) => current ? dismissNotices(current) : current);
+  }, []);
+  const handleApply = useCallback(async () => {
+    const live = stateRef.current;
+    if (!live || !isPreviewingChange(live)) return;
+    const previewed = live.previewed;
+    const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
+    if (!siteStyle) return;
+    const compiled = planSiteStylePreviewChange({
+      siteStyle,
+      selection: previewed,
+      baseTheme: theme,
+      headerSelectionContext,
+      footerSelectionContext
+    });
+    const body = buildApplySiteStyleSelectionBody({
+      base: live.base,
+      previewed: {
+        ...previewed,
+        buttonPersonalityId: compiled.resolvedSelections.buttonPersonalityId,
+        paletteVariantId: compiled.resolvedSelections.paletteVariantId,
+        headerLayoutId: compiled.resolvedSelections.headerLayoutId,
+        headerStyleId: compiled.resolvedSelections.headerStyleId,
+        headerLookId: compiled.resolvedSelections.headerLookId,
+        typographyPresetId: compiled.resolvedSelections.typographyPresetId,
+        typographyBodyFontOverride: compiled.resolvedSelections.typographyBodyFontOverride,
+        typographyHeadingFontOverride: compiled.resolvedSelections.typographyHeadingFontOverride
+      },
+      selectionId
+    });
+    await runnerRef.current.run({
+      optimistic: () => {
+        applyStarted("style-configurator");
+        setState((current) => current ? markApplySaving(current) : current);
+      },
+      network: async () => {
+        const response = await apiClient({
+          endpoint: "applySiteStyleSelection",
+          params: { siteId },
+          body
+        });
+        return unwrapResponse(response);
+      },
+      onSuccess: (saved) => {
+        setState(
+          (current) => current ? markApplySaved(current, {
+            siteStyleId: previewed.siteStyleId,
+            selectionVersion: saved.selectionVersion,
+            selectionUpdatedAt: saved.selectionUpdatedAt ?? previewed.selectionUpdatedAt ?? null,
+            buttonPersonalityId: saved.buttonPersonalityId,
+            paletteVariantId: saved.paletteVariantId,
+            paletteOverrides: saved.paletteOverrides ?? null,
+            typographyPresetId: saved.typographyPresetId,
+            typographyBodyFontOverride: saved.typographyBodyFontOverride,
+            typographyHeadingFontOverride: saved.typographyHeadingFontOverride,
+            headerLookId: saved.headerLookId,
+            headerLayoutId: saved.headerLayoutId,
+            headerStyleId: saved.headerStyleId,
+            footerLookId: saved.footerLookId
+          }) : current
+        );
+        applySucceeded("style-configurator");
+        startRefreshTransition(() => {
+          router.refresh();
+        });
+      },
+      onError: (error) => {
+        applyFailed("style-configurator");
+        const applyError = classifyStyleApplyError(error);
+        if (applyError.kind === "stale") {
+          startRefreshTransition(() => {
+            router.refresh();
+          });
+        }
+        const message = applyError.message;
+        setState((current) => current ? markApplyFailed(current, message) : current);
+      }
+    });
+  }, [
+    apiClient,
+    footerSelectionContext,
+    headerSelectionContext,
+    applyFailed,
+    applyStarted,
+    applySucceeded,
+    router,
+    selectionId,
+    siteId,
+    startRefreshTransition,
+    theme
+  ]);
+  if (!state || !baseSnapshot) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading design controls..." });
+  }
+  const applyAllowed = canApplySiteStyle(siteStyleAccess);
+  const previewingChange = isPreviewingChange(state);
+  const saving = state.saveStatus.kind === "saving" || isRefreshPending;
+  const currentSiteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
+  if (!currentSiteStyle) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This site uses a Site Style that cannot be configured here." });
+  }
+  const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
+  const currentPaletteVariant = findPaletteVariant(state.previewed.paletteVariantId);
+  const currentTypographyPreset = state.previewed.typographyPresetId ? findTypographyPreset(state.previewed.typographyPresetId) : null;
+  const chromeLookModels = buildSiteChromeLookModels({
+    state,
+    siteStyle: currentSiteStyle,
+    headerSelectionContext,
+    footerSelectionContext
+  });
+  const currentHeaderLayout = getHeaderLayout(state.previewed.headerLayoutId);
+  const currentHeaderStyle = getHeaderStyle(state.previewed.headerStyleId);
+  const currentFooterLook = state.previewed.footerLookId ? findFooterLook(state.previewed.footerLookId) : findFooterLook(chromeLookModels.footer.renderedLookId);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, { warnings: state.warnings, onDismiss: handleDismissWarnings }) : null,
+    state.notices.length > 0 ? /* @__PURE__ */ jsx(NoticeBanner, { notices: state.notices, onDismiss: handleDismissNotices }) : null,
+    /* @__PURE__ */ jsx(
+      SiteStyleRow,
+      {
+        expanded: state.expandedRow === "style",
+        onToggle: () => handleToggleRow("style"),
+        current: currentSiteStyle,
+        onPreview: handlePreviewSiteStyle,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SiteChromeLookRow,
+      {
+        label: "Header layout",
+        ariaLabel: "Header layout",
+        defaultDescription: "Choose the header structure.",
+        expanded: state.expandedRow === "header-layout",
+        onToggle: () => handleToggleRow("header-layout"),
+        currentId: state.previewed.headerLayoutId,
+        currentLabel: currentHeaderLayout?.label ?? state.previewed.headerLayoutId,
+        scopeDescription: "Changes the header structure on every page.",
+        options: chromeLookModels.headerLayout.options,
+        diagnostics: [],
+        onCycle: (direction) => {
+          const next = cycleSiteChromeLookId(chromeLookModels.headerLayout.options, state.previewed.headerLayoutId, direction);
+          if (next !== void 0) handlePreviewHeaderLayout(next);
+        },
+        onPreview: handlePreviewHeaderLayout,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SiteChromeLookRow,
+      {
+        label: "Header look",
+        ariaLabel: "Header look",
+        defaultDescription: "Choose the header visual style.",
+        expanded: state.expandedRow === "header-style",
+        onToggle: () => handleToggleRow("header-style"),
+        currentId: state.previewed.headerStyleId,
+        currentLabel: currentHeaderStyle?.label ?? state.previewed.headerStyleId,
+        scopeDescription: "Changes the header surface and link style.",
+        options: chromeLookModels.headerStyle.options,
+        diagnostics: [],
+        onCycle: (direction) => {
+          const next = cycleSiteChromeLookId(chromeLookModels.headerStyle.options, state.previewed.headerStyleId, direction);
+          if (next !== void 0) handlePreviewHeaderStyle(next);
+        },
+        onPreview: handlePreviewHeaderStyle,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SiteChromeLookRow,
+      {
+        label: "Footer",
+        ariaLabel: "Footer",
+        defaultDescription: "Use the footer chosen for this site style.",
+        catalog: footerLookCatalog,
+        expanded: state.expandedRow === "footer",
+        onToggle: () => handleToggleRow("footer"),
+        currentId: state.previewed.footerLookId,
+        currentLabel: state.previewed.footerLookId ? currentFooterLook?.label ?? "Unknown footer Look" : `${currentFooterLook?.label ?? "Site style"} (default)`,
+        scopeDescription: "Changes the footer on every page.",
+        options: chromeLookModels.footer.options,
+        diagnostics: chromeLookModels.footer.diagnostics,
+        onCycle: (direction) => {
+          const next = cycleSiteChromeLookId(chromeLookModels.footer.options, state.previewed.footerLookId, direction);
+          if (next !== void 0) handlePreviewFooterLook(next);
+        },
+        onPreview: handlePreviewFooterLook,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PersonalityRow,
+      {
+        expanded: state.expandedRow === "buttons",
+        onToggle: () => handleToggleRow("buttons"),
+        siteStyle: currentSiteStyle,
+        currentId: state.previewed.buttonPersonalityId,
+        currentLabel: currentPersonality?.name ?? state.previewed.buttonPersonalityId,
+        onPreview: handlePreviewPersonality,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TypographyRow,
+      {
+        expanded: state.expandedRow === "typography",
+        onToggle: () => handleToggleRow("typography"),
+        apiClient,
+        siteStyle: currentSiteStyle,
+        currentPresetId: state.previewed.typographyPresetId,
+        currentLabel: currentTypographyPreset?.name ?? "Custom typography",
+        bodyFontOverride: state.previewed.typographyBodyFontOverride,
+        headingFontOverride: state.previewed.typographyHeadingFontOverride,
+        onPreviewPreset: handlePreviewTypographyPreset,
+        onBodyFontOverride: handleBodyFontOverride,
+        onHeadingFontOverride: handleHeadingFontOverride,
+        onClearOverrides: handleClearTypographyOverrides,
+        disabled: saving
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PaletteRow,
+      {
+        expanded: state.expandedRow === "palette",
+        onToggle: () => handleToggleRow("palette"),
+        siteStyle: currentSiteStyle,
+        currentId: state.previewed.paletteVariantId,
+        currentLabel: currentPaletteVariant?.name ?? state.previewed.paletteVariantId,
+        currentSwatch: currentPaletteVariant?.colors.find((c) => c.name === "primary")?.hex ?? null,
+        onPreview: handlePreviewPalette,
+        disabled: saving
+      }
+    ),
+    currentPaletteVariant ? /* @__PURE__ */ jsx(
+      ColoursRow,
+      {
+        expanded: state.expandedRow === "colours",
+        onToggle: () => handleToggleRow("colours"),
+        variant: currentPaletteVariant,
+        overrides: state.previewed.paletteOverrides,
+        onTokenChange: handleTokenOverride,
+        onReset: handleResetOverrides,
+        disabled: saving
+      }
+    ) : null,
+    previewingChange ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: handleCancel, disabled: saving, children: "Cancel" }),
+      applyAllowed ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: handleApply, disabled: saving, children: saving ? "Applying\u2026" : "Apply" }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview only \u2014 ask an admin to apply." })
+    ] }) : null,
+    state.saveStatus.kind === "saved" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: "Saved." }) : null,
+    state.saveStatus.kind === "failed" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: state.saveStatus.message }) : null
+  ] });
+}
+function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, children }) {
+  return /* @__PURE__ */ jsx(Collapsible, { open: expanded, onOpenChange: onToggle, children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-background", children: [
+    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-accent/30",
+        "aria-expanded": expanded,
+        children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4 transition", expanded && "rotate-90") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: currentLabel })
+          ] }),
+          swatch ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-5 w-5 shrink-0 rounded-full border border-black/10",
+              style: { backgroundColor: swatch },
+              "aria-hidden": "true"
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t px-3 py-3", children }) })
+  ] }) });
+}
+function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
+  return /* @__PURE__ */ jsx(StyleRowFrame, { label: "Site style", currentLabel: current.name, expanded, onToggle, children: /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Site style", className: "list-none space-y-1 p-0", children: curatedSiteStyles.map((style) => /* @__PURE__ */ jsx(
+    PickerOption,
+    {
+      selected: style.id === current.id,
+      label: style.name,
+      description: style.description,
+      onSelect: () => onPreview(style.id),
+      disabled
+    },
+    style.id
+  )) }) });
+}
+function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel, onPreview, disabled }) {
+  const options = useMemo(
+    () => requireEntriesForCuratedChoices(buttonPersonalities, siteStyle.buttonPersonalityChoices),
+    [siteStyle.buttonPersonalityChoices]
+  );
+  return /* @__PURE__ */ jsx(StyleRowFrame, { label: "Button style", currentLabel, expanded, onToggle, children: /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Button style", className: "list-none space-y-1 p-0", children: options.map((personality) => /* @__PURE__ */ jsx(
+    PickerOption,
+    {
+      selected: personality.id === currentId,
+      label: personality.name,
+      description: personality.description,
+      onSelect: () => onPreview(personality.id),
+      disabled
+    },
+    personality.id
+  )) }) });
+}
+function TypographyRow({
+  expanded,
+  onToggle,
+  apiClient,
+  siteStyle,
+  currentPresetId,
+  currentLabel,
+  bodyFontOverride,
+  headingFontOverride,
+  onPreviewPreset,
+  onBodyFontOverride,
+  onHeadingFontOverride,
+  onClearOverrides,
+  disabled
+}) {
+  const options = useMemo(
+    () => requireEntriesForCuratedChoices(typographyPresets, siteStyle.typographyPresetChoices),
+    [siteStyle.typographyPresetChoices]
+  );
+  const fontCatalog = useFontCatalog(apiClient, expanded);
+  const selectedPreset = currentPresetId ? findTypographyPreset(currentPresetId) : null;
+  return /* @__PURE__ */ jsxs(StyleRowFrame, { label: "Typography", currentLabel, expanded, onToggle, children: [
+    currentPresetId === null ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-muted-foreground/20 bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: "Current custom setup" }) : null,
+    /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Typography preset", className: "space-y-1", children: options.map((preset) => /* @__PURE__ */ jsx(
+      TypographyPresetOption,
+      {
+        preset,
+        selected: preset.id === currentPresetId,
+        onSelect: () => onPreviewPreset(preset.id),
+        disabled
+      },
+      preset.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3 border-t pt-3", children: [
+      selectedPreset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TypographyFontSlotPicker,
+          {
+            label: "Body font",
+            slot: "body",
+            preset: selectedPreset,
+            catalog: fontCatalog,
+            value: bodyFontOverride,
+            onChange: onBodyFontOverride,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TypographyFontSlotPicker,
+          {
+            label: "Heading font",
+            slot: "heading",
+            preset: selectedPreset,
+            catalog: fontCatalog,
+            value: headingFontOverride,
+            onChange: onHeadingFontOverride,
+            disabled
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Choose a typography preset to use curated font overrides." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          onClick: onClearOverrides,
+          disabled: disabled || !bodyFontOverride && !headingFontOverride,
+          children: "Use preset fonts"
+        }
+      )
+    ] })
+  ] });
+}
+function TypographyPresetOption({
+  preset,
+  selected,
+  onSelect,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      onClick: onSelect,
+      disabled,
+      className: cn(
+        "w-full rounded-md border px-3 py-2 text-left transition disabled:cursor-not-allowed disabled:opacity-50",
+        selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/60"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: preset.name }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: preset.description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wide", children: preset.defaultFonts.heading.split(",")[0] }),
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground", children: preset.defaultFonts.body.split(",")[0] })
+        ] })
+      ] })
+    }
+  ) });
+}
+function TypographyFontSlotPicker({
+  label,
+  slot,
+  preset,
+  catalog,
+  value,
+  onChange,
+  disabled
+}) {
+  const [query, setQuery] = useState("");
+  const defaultFont = primaryFontFamily(preset.defaultFonts[slot]);
+  const selectedFamily = value ?? defaultFont;
+  const recordsByFamily = useMemo(() => indexFontsByFamily(catalog.fonts), [catalog.fonts]);
+  const selectedFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(selectedFamily, recordsByFamily)
+  });
+  const recommendedFamilies = preset.recommendedFonts[slot];
+  const recommendedOptions = useMemo(
+    () => uniqueFontFamilies(recommendedFamilies),
+    [recommendedFamilies]
+  );
+  const browseOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    const source = normalizedQuery.length > 0 ? catalog.fonts.filter((font) => font.family.toLowerCase().includes(normalizedQuery)) : catalog.fonts;
+    return [...source].sort((a, b) => sortFontForPresetSlot(a, b, slot, preset, recordsByFamily)).slice(0, normalizedQuery.length > 0 ? MAX_FONT_RESULTS_WHEN_SEARCHING : MAX_FONT_RESULTS_WHEN_BROWSING);
+  }, [catalog.fonts, preset, query, recordsByFamily, slot]);
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2", "aria-label": label, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "truncate text-sm", children: value ? selectedFamily : `${defaultFont} (preset)` })
+      ] }),
+      /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit: selectedFit })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50",
+            value === null ? "border-foreground bg-accent/40" : "border-transparent hover:border-foreground/40 hover:bg-accent/20"
+          ),
+          onClick: () => onChange(null),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Use preset font" }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: defaultFont })
+          ]
+        }
+      ),
+      recommendedOptions.map((family) => /* @__PURE__ */ jsx(
+        FontFamilyOption,
+        {
+          family,
+          selected: value === family,
+          fit: evaluateTypographyFontSlot({
+            slot,
+            policy: preset.slotPolicies[slot],
+            capability: capabilityForFamily(family, recordsByFamily)
+          }),
+          onSelect: () => onChange(family),
+          disabled
+        },
+        family
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-md border bg-muted/20 p-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          value: query,
+          placeholder: `Search ${slot} fonts`,
+          onChange: (event) => setQuery(event.currentTarget.value),
+          disabled: disabled || catalog.kind === "loading",
+          className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      ),
+      catalog.kind === "loading" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Loading font catalog..." }) : catalog.kind === "failed" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: catalog.message }) : null,
+      browseOptions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-1 overflow-y-auto pr-1", children: browseOptions.map((font) => /* @__PURE__ */ jsx(
+        FontFamilyOption,
+        {
+          family: font.family,
+          selected: value === font.family,
+          fit: evaluateTypographyFontSlot({
+            slot,
+            policy: preset.slotPolicies[slot],
+            capability: capabilityFromFontRecord(font)
+          }),
+          onSelect: () => onChange(font.family),
+          disabled
+        },
+        font.family
+      )) }) : catalog.kind === "loaded" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No matching Google Fonts." }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "block space-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Brand or uploaded font name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: value ?? "",
+          placeholder: "Enter any font family",
+          onChange: (event) => onChange(normalizeFontFamilyOverride(event.currentTarget.value)),
+          disabled,
+          className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      )
+    ] })
+  ] });
+}
+function FontFamilyOption({
+  family,
+  selected,
+  fit,
+  onSelect,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50",
+        selected ? "border-foreground bg-accent/40" : "border-transparent bg-background hover:border-foreground/40 hover:bg-accent/20"
+      ),
+      onClick: onSelect,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: family }),
+        /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit })
+      ]
+    }
+  );
+}
+function TypographyFontFitBadge({ fit }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium",
+        fit.kind === "recommended" && "bg-emerald-100 text-emerald-800",
+        fit.kind === "compatible" && "bg-sky-100 text-sky-800",
+        fit.kind === "limited" && "bg-amber-100 text-amber-900",
+        fit.kind === "risky" && "bg-rose-100 text-rose-800",
+        fit.kind === "unknown" && "bg-muted text-muted-foreground"
+      ),
+      title: fit.reason,
+      children: typographyFontFitLabel(fit.kind)
+    }
+  );
+}
+function useFontCatalog(apiClient, enabled) {
+  const [catalog, setCatalog] = useState({ kind: "idle", fonts: [] });
+  const requestedClientRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    if (requestedClientRef.current === apiClient) return;
+    requestedClientRef.current = apiClient;
+    let cancelled = false;
+    setCatalog({ kind: "loading", fonts: [] });
+    async function loadFonts() {
+      try {
+        const response = await apiClient({ endpoint: "listFonts" });
+        const fonts = unwrapResponse(response);
+        if (!cancelled) {
+          setCatalog({
+            kind: "loaded",
+            fonts: Array.isArray(fonts) ? fonts : []
+          });
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setCatalog({
+            kind: "failed",
+            fonts: [],
+            message: error instanceof Error ? error.message : "Unable to load the font catalog."
+          });
+        }
+      }
+    }
+    void loadFonts();
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, enabled]);
+  return catalog;
+}
+function indexFontsByFamily(fonts) {
+  return new Map(fonts.map((font) => [font.family.toLowerCase(), font]));
+}
+function capabilityForFamily(family, recordsByFamily) {
+  const record = recordsByFamily.get(family.toLowerCase());
+  if (record) return capabilityFromFontRecord(record);
+  return {
+    source: "unknown",
+    family,
+    category: "unknown",
+    variants: []
+  };
+}
+function capabilityFromFontRecord(font) {
+  return {
+    source: "google",
+    family: font.family,
+    category: normalizeGoogleFontCategory(font.category),
+    variants: font.variants
+  };
+}
+function normalizeGoogleFontCategory(category) {
+  switch (category) {
+    case "serif":
+    case "sans-serif":
+    case "display":
+    case "handwriting":
+    case "monospace":
+      return category;
+    default:
+      return "unknown";
+  }
+}
+function sortFontForPresetSlot(a, b, slot, preset, recordsByFamily) {
+  const aFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(a.family, recordsByFamily)
+  });
+  const bFit = evaluateTypographyFontSlot({
+    slot,
+    policy: preset.slotPolicies[slot],
+    capability: capabilityForFamily(b.family, recordsByFamily)
+  });
+  const fitDelta = typographyFontFitRank(aFit.kind) - typographyFontFitRank(bFit.kind);
+  if (fitDelta !== 0) return fitDelta;
+  const popularityDelta = (a.popularity ?? Infinity) - (b.popularity ?? Infinity);
+  if (popularityDelta !== 0) return popularityDelta;
+  return a.family.localeCompare(b.family);
+}
+function typographyFontFitRank(kind) {
+  switch (kind) {
+    case "recommended":
+      return 0;
+    case "compatible":
+      return 1;
+    case "limited":
+      return 2;
+    case "risky":
+      return 3;
+    case "unknown":
+      return 4;
+    default: {
+      const exhaustive = kind;
+      return exhaustive;
+    }
+  }
+}
+function typographyFontFitLabel(kind) {
+  switch (kind) {
+    case "recommended":
+      return "Recommended";
+    case "compatible":
+      return "Compatible";
+    case "limited":
+      return "Limited";
+    case "risky":
+      return "Risky";
+    case "unknown":
+      return "Unknown";
+    default: {
+      const exhaustive = kind;
+      return exhaustive;
+    }
+  }
+}
+function primaryFontFamily(cssFamily) {
+  return cssFamily.split(",")[0]?.trim().replace(/^["']|["']$/gu, "") || cssFamily;
+}
+function uniqueFontFamilies(families) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const family of families) {
+    const normalized = primaryFontFamily(family);
+    const key = normalized.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    result.push(normalized);
+  }
+  return result;
+}
+function normalizeFontFamilyOverride(value) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+function SiteChromeLookRow({
+  label,
+  ariaLabel,
+  defaultDescription,
+  catalog,
+  options = [
+    {
+      id: null,
+      label: "Site style default",
+      description: defaultDescription,
+      available: true
+    },
+    ...(catalog ?? []).map((look) => ({ ...look, available: true }))
+  ],
+  diagnostics,
+  scopeDescription,
+  expanded,
+  onToggle,
+  currentId,
+  currentLabel,
+  onCycle,
+  onPreview,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(StyleRowFrame, { label, currentLabel, expanded, onToggle, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: scopeDescription }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onCycle("prev"),
+            className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-label": `Previous ${label.toLowerCase()}`,
+            disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
+            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onCycle("next"),
+            className: "grid h-8 w-8 place-items-center border-l hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+            "aria-label": `Next ${label.toLowerCase()}`,
+            disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
+            children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+          }
+        )
+      ] })
+    ] }),
+    diagnostics.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mb-3 list-none space-y-1 p-0 text-xs text-amber-700", children: diagnostics.map((diagnostic) => /* @__PURE__ */ jsx("li", { children: diagnostic }, diagnostic)) }) : null,
+    /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": ariaLabel, className: "list-none space-y-1 p-0", children: options.map((look) => /* @__PURE__ */ jsx(
+      PickerOption,
+      {
+        selected: look.id === currentId,
+        label: look.label,
+        description: look.description,
+        onSelect: () => onPreview(look.id),
+        disabled: disabled || !look.available
+      },
+      look.id ?? "site-style-default"
+    )) })
+  ] });
+}
+function PaletteRow({ expanded, onToggle, siteStyle, currentId, currentLabel, currentSwatch, onPreview, disabled }) {
+  const options = useMemo(
+    () => {
+      const recommended = requireEntriesForCuratedChoices(paletteVariants, siteStyle.paletteVariantChoices);
+      if (recommended.some((variant) => variant.id === currentId)) {
+        return recommended;
+      }
+      const current = findPaletteVariant(currentId);
+      return current ? [current, ...recommended] : recommended;
+    },
+    [currentId, siteStyle.paletteVariantChoices]
+  );
+  return /* @__PURE__ */ jsxs(
+    StyleRowFrame,
+    {
+      label: "Palette",
+      currentLabel,
+      swatch: currentSwatch,
+      expanded,
+      onToggle,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: "These palette bases are recommended for the current Site Style. Choose a base here, then edit exact colours in Palette colours." }),
+        /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Palette", className: "list-none space-y-1 p-0", children: options.map((variant) => {
+          const primaryHex = variant.colors.find((c) => c.name === "primary")?.hex;
+          return /* @__PURE__ */ jsx(
+            PickerOption,
+            {
+              selected: variant.id === currentId,
+              label: variant.name,
+              description: variant.description,
+              swatch: primaryHex,
+              onSelect: () => onPreview(variant.id),
+              disabled
+            },
+            variant.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function ColoursRow({ expanded, onToggle, variant, overrides, onTokenChange, onReset, disabled }) {
+  const mergedPalette = useMemo(() => {
+    return variant.colors.map((color) => ({
+      name: color.name,
+      hex: overrides?.[color.name] ?? color.hex
+    }));
+  }, [variant, overrides]);
+  const overrideCount = overrides ? Object.keys(overrides).length : 0;
+  const currentLabel = overrideCount > 0 ? `${overrideCount} colour${overrideCount === 1 ? "" : "s"} customised` : "Using selected palette";
+  return /* @__PURE__ */ jsx(
+    StyleRowFrame,
+    {
+      label: "Palette colours",
+      currentLabel,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Customise the palette tokens used across the site, including backgrounds, surfaces, text and borders." }),
+        /* @__PURE__ */ jsx(
+          PaletteTokenEditor,
+          {
+            palette: mergedPalette,
+            onChange: onTokenChange,
+            brandRoles: PALETTE_BRAND_ROLES,
+            feedbackRoles: PALETTE_FEEDBACK_ROLES,
+            surfaceRoles: PALETTE_SURFACE_ROLES,
+            showContrastChecks: false
+          }
+        ),
+        overrideCount > 0 ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: onReset,
+            disabled,
+            children: "Reset to variant"
+          }
+        ) }) : null
+      ] })
+    }
+  );
+}
+function PickerOption({ selected, label, description, swatch, onSelect, disabled }) {
+  return /* @__PURE__ */ jsx("li", { className: "list-none", children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": selected,
+      onClick: onSelect,
+      disabled,
+      className: cn(
+        "flex w-full items-center gap-3 rounded-md border px-3 py-2 text-left transition",
+        selected ? "border-foreground bg-accent/40 shadow-sm" : "border-transparent bg-background hover:border-foreground/40 hover:bg-accent/20",
+        disabled && "cursor-not-allowed opacity-60"
+      ),
+      children: [
+        swatch ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-5 w-5 shrink-0 rounded-full border border-black/10",
+            style: { backgroundColor: swatch },
+            "aria-hidden": "true"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: label }),
+          description ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description }) : null
+        ] })
+      ]
+    }
+  ) });
+}
+function classifyStyleApplyError(error) {
+  if (isRecord(error)) {
+    const status = error.status;
+    const code = error.code;
+    if (status === 409 || code === "resource:conflict") {
+      return {
+        kind: "stale",
+        message: "This design changed elsewhere. Refreshing the latest version now."
+      };
+    }
+  }
+  return {
+    kind: "other",
+    message: error instanceof Error ? error.message : "Unable to apply your selection."
+  };
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function WarningNotice({ warnings, onDismiss }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground", children: [
+    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { children: describeWarning(warning) }, `${warning.kind}-${index}`)) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
+  ] });
+}
+function NoticeBanner({ notices, onDismiss }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "rounded-md border border-muted-foreground/20 bg-muted/40 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: notices.map((notice, index) => /* @__PURE__ */ jsx("li", { children: describeNotice(notice) }, `${notice.kind}-${index}`)) }),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
+  ] });
+}
+function describeNotice(notice) {
+  switch (notice.kind) {
+    case "palette-overrides-hidden":
+      return "Custom colours are saved for the previous palette.";
+    case "palette-overrides-restored":
+      return "Custom colours restored for this palette.";
+  }
+}
+function describeWarning(warning) {
+  switch (warning.kind) {
+    case "rejected-personality":
+      return `Button style changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
+    case "rejected-palette":
+      return `Palette changed to ${warning.fellBackTo} because ${warning.requested} is not available.`;
+    case "rejected-typography-preset":
+      return `Typography changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
+    default: {
+      const exhaustive = warning;
+      return exhaustive;
+    }
+  }
+}
+function PreviewEditorSidebar({
+  surfaceId,
+  siteId,
+  dashboardBaseUrl = null,
+  pageId,
+  entryData,
+  contentTypeSchema,
+  referenceContentTypeKeys = [],
+  draftContent,
+  currentTemplate,
+  theme,
+  themeId = null,
+  themeSelectionId = null,
+  themeSelectionVersion = null,
+  themeSelectionUpdatedAt = null,
+  themeSelectionButtonPersonalityId = null,
+  themeSelectionPaletteVariantId = null,
+  themeSelectionPaletteOverrides = null,
+  themeSelectionHeaderLayoutId = null,
+  themeSelectionHeaderStyleId = null,
+  themeSelectionTypographyPresetId = null,
+  themeSelectionTypographyBodyFontOverride = null,
+  themeSelectionTypographyHeadingFontOverride = null,
+  themeSelectionHeaderLookId = null,
+  themeSelectionFooterLookId = null,
+  themeSelectionHeaderContext,
+  themeSelectionFooterContext,
+  designRowRequest = null,
+  apiClient,
+  bearerToken,
+  supabaseUrl,
+  entrySubrouteContext,
+  assistantPanel,
+  sdkConfig,
+  mediaAssets,
+  siteStyleAccess = { kind: "hidden" },
+  activeTab,
+  onTabChange,
+  onClose,
+  viewportMode,
+  viewportWidth,
+  zoom,
+  onViewportModeChange,
+  onViewportWidthChange,
+  onZoomChange
+}) {
+  const controller = useEntryController();
+  const controllerBlocks = controller.blocks;
+  const uiStore = useEditorUiStoreInstance();
+  const uiStoreForBlockEditor = useMemo(
+    () => ({
+      getState: uiStore.getState,
+      subscribe: (listener) => uiStore.subscribe(() => listener())
+    }),
+    [uiStore]
+  );
+  const focusRequest = useUISelector(uiStore, (s) => s.focusRequest);
+  const { canEdit } = usePreviewAuth();
+  const dashboardSetupHandoff = useMemo(
+    () => resolvePreviewDashboardSetupHandoff(),
+    []
+  );
+  const dashboardContinueUrl = useMemo(
+    () => buildPreviewDashboardSetupUrl(dashboardBaseUrl, dashboardSetupHandoff),
+    [dashboardBaseUrl, dashboardSetupHandoff]
+  );
+  const sidebarChrome = useMemo(
+    () => resolvePreviewSidebarChromeModel(surfaceId),
+    [surfaceId]
+  );
+  const editorGuidance = useMemo(
+    () => resolvePreviewEditorGuidanceModel({
+      surfaceId,
+      canEdit,
+      hasDashboardSetupHandoff: Boolean(dashboardSetupHandoff)
+    }),
+    [canEdit, dashboardSetupHandoff, surfaceId]
+  );
+  const showAssistantTab = previewAssistantEnabled && Boolean(assistantPanel);
+  const assistantAvailable = showAssistantTab && Boolean(pageId && bearerToken && canEdit);
+  const effectiveActiveTab = showAssistantTab ? resolvePreviewSidebarTab(activeTab) : "editor";
+  const blockItems = useMemo(
+    () => controllerBlocks.list,
+    [controllerBlocks.list]
+  );
+  const blockEditorRef = useRef(null);
+  const contentFormWidgets = useMemo(() => previewWidgetOverrides, []);
+  const handleBlocksChange = useCallback(
+    (nextItems) => {
+      controllerBlocks.actions.setList(nextItems);
+      const drafts = uiStore.getState().drafts;
+      const extractData = (content) => {
+        if (!content || typeof content !== "object") return null;
+        const obj = content;
+        if ("data" in obj && obj.data && typeof obj.data === "object") {
+          return obj.data;
+        }
+        return obj;
+      };
+      for (const block of nextItems) {
+        if (!block.id) continue;
+        const baseline = extractData(
+          block.content ?? block.draftContent ?? block.publishedContent ?? null
+        );
+        const blockId = unsafeAsEditorBlockId(block.id);
+        if (drafts.getBlockSnapshot(blockId)) {
+          drafts.updateBlockBaseline(blockId, baseline, { kind: block.kind });
+        } else {
+          drafts.initNewBlock(blockId, baseline, { kind: block.kind });
+        }
+      }
+    },
+    [controllerBlocks.actions, uiStore]
+  );
+  useEffect(() => {
+    const req = focusRequest;
+    if (!req?.blockId) return;
+    blockEditorRef.current?.focusField({
+      blockId: req.blockId,
+      fieldPath: req.fieldPath ?? void 0,
+      itemIndex: req.itemIndex ?? void 0
+    });
+    uiStore.getState().clearFocus();
+  }, [focusRequest, uiStore]);
+  const metadataSectionContent = useMemo(() => {
+    if (!pageId && !entryData) return null;
+    return /* @__PURE__ */ jsx(PreviewMetadataPanel, { contentTypeKey: entryData?.type ?? null });
+  }, [entryData, pageId]);
+  const editorPanel = entryData ? /* @__PURE__ */ jsx(
+    EntryEditorPanel,
+    {
+      siteId,
+      entryData,
+      contentTypeSchema,
+      referenceContentTypeKeys,
+      draftContent,
+      currentTemplate,
+      theme,
+      apiClient,
+      bearerToken,
+      supabaseUrl,
+      entrySubrouteContext,
+      metadataPanel: metadataSectionContent,
+      mediaAssets,
+      widgets: contentFormWidgets,
+      viewportMode,
+      viewportWidth,
+      zoom,
+      onViewportModeChange,
+      onViewportWidthChange,
+      onZoomChange
+    }
+  ) : pageId ? /* @__PURE__ */ jsx(
+    PageBlockEditorPanel,
+    {
+      siteId,
+      pageId,
+      theme,
+      apiClient,
+      bearerToken,
+      supabaseUrl,
+      blockItems,
+      uiStoreForBlockEditor,
+      blockEditorRef,
+      onBlocksChange: handleBlocksChange,
+      metadataPanel: metadataSectionContent,
+      designPanel: canInspectSiteStyle(siteStyleAccess) ? /* @__PURE__ */ jsx(
+        StyleConfigurator,
+        {
+          siteId,
+          apiClient,
+          theme,
+          themeId,
+          selectionId: themeSelectionId,
+          selectionVersion: themeSelectionVersion,
+          selectionUpdatedAt: themeSelectionUpdatedAt,
+          initialSelections: {
+            selectionVersion: themeSelectionVersion,
+            selectionUpdatedAt: themeSelectionUpdatedAt,
+            buttonPersonalityId: themeSelectionButtonPersonalityId,
+            paletteVariantId: themeSelectionPaletteVariantId,
+            paletteOverrides: themeSelectionPaletteOverrides,
+            headerLayoutId: themeSelectionHeaderLayoutId,
+            headerStyleId: themeSelectionHeaderStyleId,
+            typographyPresetId: themeSelectionTypographyPresetId,
+            typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
+            typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
+            headerLookId: themeSelectionHeaderLookId,
+            footerLookId: themeSelectionFooterLookId
+          },
+          headerSelectionContext: themeSelectionHeaderContext,
+          footerSelectionContext: themeSelectionFooterContext,
+          expandedRowRequest: designRowRequest,
+          siteStyleAccess
+        }
+      ) : null,
+      sdkConfig: sdkConfig ?? null,
+      mediaAssets,
+      viewportMode,
+      viewportWidth,
+      zoom,
+      onViewportModeChange,
+      onViewportWidthChange,
+      onZoomChange
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 p-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-md border border-dashed px-4 py-6 text-sm text-muted-foreground", children: "Block editing is only available when a page is selected." }) }) });
+  const assistantPanelDisplay = assistantAvailable ? assistantPanel : /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center text-sm text-muted-foreground", children: "AI Assistant is available for pages in preview mode." });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex h-full min-h-0 flex-col overflow-hidden pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))] ${sidebarChrome.rootClassName}`,
+      "data-preview-sidebar-tone": sidebarChrome.tone,
+      children: /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: effectiveActiveTab,
+          onValueChange: (value) => onTabChange(
+            resolvePreviewSidebarTab(value)
+          ),
+          className: "flex h-full min-h-0 flex-col overflow-hidden",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `shrink-0 flex items-center justify-between px-4 py-3 ${sidebarChrome.headerClassName}`,
+                children: [
+                  /* @__PURE__ */ jsxs(TabsList, { className: "h-8", children: [
+                    /* @__PURE__ */ jsx(TabsTrigger, { value: "editor", children: "Editor" }),
+                    showAssistantTab ? /* @__PURE__ */ jsx(TabsTrigger, { value: "assistant", children: "AI Assistant" }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: onClose,
+                      "aria-label": "Close sidebar",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+                    }
+                  )
+                ]
+              }
+            ),
+            editorGuidance ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b px-4 py-3", children: /* @__PURE__ */ jsx(
+              PreviewEditorGuidanceCard,
+              {
+                guidance: editorGuidance,
+                completeSetupDisabled: !dashboardContinueUrl,
+                onCompleteSetup: () => {
+                  if (!dashboardContinueUrl || typeof window === "undefined")
+                    return;
+                  window.location.href = dashboardContinueUrl;
+                }
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx(
+              TabsContent,
+              {
+                value: "editor",
+                forceMount: true,
+                className: "mt-0 min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden",
+                children: editorPanel
+              }
+            ),
+            showAssistantTab ? /* @__PURE__ */ jsx(
+              TabsContent,
+              {
+                value: "assistant",
+                forceMount: true,
+                className: "mt-0 min-h-0 flex-1 overflow-hidden data-[state=inactive]:hidden",
+                children: assistantPanelDisplay
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function PreviewMetadataPanel({
+  contentTypeKey
+}) {
+  const uiStore = useEditorUiStoreInstance();
+  const manifest = useMemo(() => {
+    return omitRouteTitleFieldFromManifest(
+      getRouteMetadataManifestForType(contentTypeKey)
+    );
+  }, [contentTypeKey]);
+  const validation = useMemo(
+    () => createManifestValidation(manifest),
+    [manifest]
+  );
+  const backend = useMemo(
+    () => createStoreBackend({
+      scope: "metadata",
+      store: uiStore,
+      validateFn: (values) => {
+        const result = validation.schema.safeParse(values);
+        if (!result.success) {
+          return result.error.issues;
+        }
+        return [];
+      }
+    }),
+    [uiStore, validation]
+  );
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(
+    ManifestForm,
+    {
+      manifest,
+      backend,
+      className: "space-y-4"
+    }
+  ) });
+}
+
+export { PreviewEditorSidebar };