@riverbankcms/sdk 0.76.0 → 0.77.0

package/dist/{chunk-Q4OLG66B.mjs → chunk-EAWHBECW.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-Z7JLNTJR.mjs';
-import { PreviewThemeOverlayProvider, resolveSiteStyleAccess, usePreviewThemeOverlay, createOptimisticActionRunner, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, syncStyleConfiguratorState, buildSiteChromeLookModels, markApplyFailed, markApplySaved, markApplySaving, planSiteChromeLookSelection, previewHeaderLook, previewFooterLook, cycleSiteChromeLookId, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, sanitizeDashboardPath } from './chunk-TW2Y4RR5.mjs';
-import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-V5VORNEJ.mjs';
-import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, planSiteDocument, useEditorUiStore, SiteDocumentLayout, ResizableSplitPane, BlockApiProvider, EditorProvider, getCuratedSiteStyle, compileSiteThemeFromSelections, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, useEditorUiStoreInstance, surfaceResolutionContextFromTheme, asEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, ThemeScope, FixedBottomSurface, Button, unwrapResponse, X, ChevronLeft, ChevronRight, RotateCcw, PreviewRichTextEditor, RichText, PreviewTextEditor, Text, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, buildEditorModelRuntimeFieldsByBlockId, applyCompiledRuntimeFieldsToContent, assertNever2, getBlockDefinition, systemCustomizeFacetDefinitionsForBlock, systemCustomizeFacetAppliesToLayoutVariant, systemCustomizeFacetCurrentValue, systemCustomizeFacetLabelForValue, systemCustomizeFacetNextValue, assertNever } from './chunk-LYI7TEMH.mjs';
+import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-6SMUFTXD.mjs';
+import { PreviewThemeOverlayProvider, PreviewDesignCoordinatorProvider, resolveSiteStyleAccess, usePreviewDesignCoordinator, createOptimisticActionRunner, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, syncStyleConfiguratorState, buildSiteChromeLookModels, planSiteStylePreviewChange, markApplyFailed, markApplySaved, markApplySaving, previewHeaderStyle, previewFooterLook, cycleSiteChromeLookId, usePreviewThemeOverlay, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, planSiteChromeLookSelection, sanitizeDashboardPath } from './chunk-GSQX43EZ.mjs';
+import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-ANKDYZ2E.mjs';
+import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, useEditorUiStore, ResizableSplitPane, BlockApiProvider, EditorProvider, getCuratedSiteStyle, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, useEditorUiStoreInstance, surfaceResolutionContextFromTheme, asEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, planSiteDocument, ThemeScope, FixedBottomSurface, Button, unwrapResponse, X, ChevronLeft, ChevronRight, RotateCcw, PreviewRichTextEditor, RichText, PreviewTextEditor, Text, buildThemeRuntime, renderBlock, siteHeaderManifest, siteFooterManifest, SiteDocumentLayout, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, buildEditorModelRuntimeFieldsByBlockId, applyCompiledRuntimeFieldsToContent, assertNever2, getBlockDefinition, systemCustomizeFacetDefinitionsForBlock, systemCustomizeFacetAppliesToLayoutVariant, systemCustomizeFacetCurrentValue, systemCustomizeFacetLabelForValue, systemCustomizeFacetNextValue, assertNever } from './chunk-WLQBJN2Z.mjs';
 import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-VX7B5VAC.mjs';
-import React7, { createContext, useMemo, useState, useEffect, useRef, useCallback, useId, useReducer } from 'react';
+import React9, { createContext, useMemo, useState, useEffect, useRef, useCallback, useId, useReducer, Children, isValidElement, Fragment as Fragment$1, cloneElement, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // ../preview-next/src/client/utils/path.ts
@@ -2323,7 +2323,8 @@ function SiteChromeCustomizeProvider({
   footerSelectionContext,
   siteStyleAccess = { kind: "hidden" }
 }) {
-  const { setOverrideTheme } = usePreviewThemeOverlay();
+  const previewDesign = usePreviewDesignCoordinator();
+  const { clearPreview, previewTheme } = previewDesign;
   const runnerRef = useRef(createOptimisticActionRunner());
   const saveQueueRef = useRef(Promise.resolve());
   const latestSelectionUpdatedAtRef = useRef(
@@ -2347,9 +2348,13 @@ function SiteChromeCustomizeProvider({
     () => baseSnapshot ? createStyleConfiguratorState(baseSnapshot) : null
   );
   const stateRef = useRef(state);
+  const clearPreviewRef = useRef(clearPreview);
   useEffect(() => {
     stateRef.current = state;
   }, [state]);
+  useEffect(() => {
+    clearPreviewRef.current = clearPreview;
+  }, [clearPreview]);
   useEffect(() => {
     latestSelectionUpdatedAtRef.current = baseSnapshot?.selectionUpdatedAt ?? null;
   }, [baseSnapshot?.selectionUpdatedAt]);
@@ -2366,9 +2371,9 @@ function SiteChromeCustomizeProvider({
     const runner = runnerRef.current;
     return () => {
       runner.invalidate();
-      setOverrideTheme(null, { source: "site-chrome" });
+      clearPreviewRef.current("site-chrome");
     };
-  }, [setOverrideTheme]);
+  }, []);
   const lookModels = useMemo(() => {
     if (!state) return null;
     const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
@@ -2384,19 +2389,38 @@ function SiteChromeCustomizeProvider({
   const getSurfaceState = useCallback(
     (surface) => {
       if (!state || !lookModels) return { kind: "unavailable" };
-      const model = lookModels[surface];
-      const currentId = surface === "header" ? state.previewed.headerLookId : state.previewed.footerLookId;
-      const selected = model.options.find((option) => option.id === currentId);
-      const rendered = model.options.find(
-        (option) => option.id === model.renderedLookId
+      if (surface === "header") {
+        const currentId2 = state.previewed.headerStyleId;
+        const selected2 = lookModels.headerStyle.options.find((option) => option.id === currentId2);
+        const rendered2 = lookModels.headerStyle.options.find(
+          (option) => option.id === lookModels.headerStyle.renderedStyleId
+        );
+        return {
+          kind: "available",
+          surface: "header",
+          label: "Header",
+          currentId: currentId2,
+          currentLabel: selected2?.label ?? (rendered2 ? `${rendered2.label} (default)` : "Unknown Look"),
+          options: lookModels.headerStyle.options,
+          diagnostics: [],
+          saving: state.saveStatus.kind === "saving",
+          failure: state.saveStatus.kind === "failed" ? state.saveStatus.message : null,
+          applyAllowed
+        };
+      }
+      const currentId = state.previewed.footerLookId;
+      const selected = lookModels.footer.options.find((option) => option.id === currentId);
+      const rendered = lookModels.footer.options.find(
+        (option) => option.id === lookModels.footer.renderedLookId
       );
       return {
         kind: "available",
-        label: surface === "header" ? "Header" : "Footer",
+        surface: "footer",
+        label: "Footer",
         currentId,
         currentLabel: selected?.label ?? (currentId ? "Unknown Look" : `${rendered?.label ?? "Site style"} (default)`),
-        options: model.options,
-        diagnostics: model.diagnostics,
+        options: lookModels.footer.options,
+        diagnostics: lookModels.footer.diagnostics,
         saving: state.saveStatus.kind === "saving",
         failure: state.saveStatus.kind === "failed" ? state.saveStatus.message : null,
         applyAllowed
@@ -2408,19 +2432,16 @@ function SiteChromeCustomizeProvider({
     (surface, nextSnapshot) => {
       const siteStyle = getCuratedSiteStyle(nextSnapshot.siteStyleId);
       if (!siteStyle) return;
-      const compiled = compileSiteThemeFromSelections({
+      const compiled = planSiteStylePreviewChange({
         siteStyle,
-        buttonPersonalityId: nextSnapshot.buttonPersonalityId,
-        paletteVariantId: nextSnapshot.paletteVariantId,
-        paletteOverrides: nextSnapshot.paletteOverrides,
-        headerLookId: nextSnapshot.headerLookId,
-        footerLookId: nextSnapshot.footerLookId,
+        selection: nextSnapshot,
+        baseTheme: theme,
         headerSelectionContext,
         footerSelectionContext
       });
       void runnerRef.current.run({
         optimistic: () => {
-          setOverrideTheme(compiled.theme, { source: "site-chrome" });
+          previewTheme("site-chrome", compiled.themeOverlay, "site-chrome");
           setState((latest) => {
             if (!latest) return latest;
             return markApplySaving({ ...latest, previewed: nextSnapshot });
@@ -2431,14 +2452,16 @@ function SiteChromeCustomizeProvider({
             const body = surface === "header" ? {
               surface,
               lookId: nextSnapshot.headerLookId,
-              theme: compiled.theme,
+              layoutId: nextSnapshot.headerLayoutId,
+              styleId: nextSnapshot.headerStyleId,
+              theme: compiled.themeOverlay,
               themeId: themeId ?? null,
               selectionId: selectionId ?? null,
               baseSelectionUpdatedAt: latestSelectionUpdatedAtRef.current
             } : {
               surface,
               lookId: nextSnapshot.footerLookId,
-              theme: compiled.theme,
+              theme: compiled.themeOverlay,
               themeId: themeId ?? null,
               selectionId: selectionId ?? null,
               baseSelectionUpdatedAt: latestSelectionUpdatedAtRef.current
@@ -2468,7 +2491,12 @@ function SiteChromeCustomizeProvider({
             buttonPersonalityId: compiled.resolvedSelections.buttonPersonalityId,
             paletteVariantId: compiled.resolvedSelections.paletteVariantId,
             paletteOverrides: nextSnapshot.paletteOverrides,
+            typographyPresetId: compiled.resolvedSelections.typographyPresetId,
+            typographyBodyFontOverride: compiled.resolvedSelections.typographyBodyFontOverride,
+            typographyHeadingFontOverride: compiled.resolvedSelections.typographyHeadingFontOverride,
             headerLookId: saved.headerLookId ?? nextSnapshot.headerLookId,
+            headerLayoutId: saved.headerLayoutId ?? compiled.resolvedSelections.headerLayoutId,
+            headerStyleId: saved.headerStyleId ?? compiled.resolvedSelections.headerStyleId,
             footerLookId: saved.footerLookId ?? nextSnapshot.footerLookId
           };
           setState((latest) => latest ? markApplySaved(latest, persisted) : latest);
@@ -2483,26 +2511,30 @@ function SiteChromeCustomizeProvider({
       apiClient,
       footerSelectionContext,
       headerSelectionContext,
+      previewTheme,
       selectionId,
-      setOverrideTheme,
       siteId,
-      themeId
+      themeId,
+      theme
     ]
   );
-  const selectSurfaceLook = useCallback(
-    (surface, lookId) => {
+  const selectHeaderStyle = useCallback(
+    (styleId) => {
       if (!applyAllowed) return;
       const current = stateRef.current;
       if (!current) return;
-      const plan = surface === "header" ? planSiteChromeLookSelection({
-        surface,
-        lookId
-      }) : planSiteChromeLookSelection({
-        surface,
-        lookId
-      });
-      const nextState = plan.kind === "header" ? previewHeaderLook(current, plan.next.headerLookId) : previewFooterLook(current, plan.next.footerLookId);
-      persistSelection(surface, nextState.previewed);
+      const nextState = previewHeaderStyle(current, styleId);
+      persistSelection("header", nextState.previewed);
+    },
+    [applyAllowed, persistSelection]
+  );
+  const selectFooterLook = useCallback(
+    (lookId) => {
+      if (!applyAllowed) return;
+      const current = stateRef.current;
+      if (!current) return;
+      const nextState = previewFooterLook(current, planFooterLookSelection(lookId));
+      persistSelection("footer", nextState.previewed);
     },
     [applyAllowed, persistSelection]
   );
@@ -2510,16 +2542,23 @@ function SiteChromeCustomizeProvider({
     (surface, direction) => {
       const currentState = getSurfaceState(surface);
       if (currentState.kind !== "available") return;
+      if (currentState.surface === "header") {
+        const next2 = cycleSiteChromeLookId(
+          currentState.options,
+          currentState.currentId,
+          direction
+        );
+        if (next2 !== void 0 && next2 !== null) selectHeaderStyle(next2);
+        return;
+      }
       const next = cycleSiteChromeLookId(
         currentState.options,
         currentState.currentId,
         direction
       );
-      if (next !== void 0) {
-        selectSurfaceLook(surface, next);
-      }
+      if (next !== void 0) selectFooterLook(next);
     },
-    [getSurfaceState, selectSurfaceLook]
+    [getSurfaceState, selectFooterLook, selectHeaderStyle]
   );
   const value = useMemo(
     () => ({
@@ -2530,13 +2569,351 @@ function SiteChromeCustomizeProvider({
   );
   return /* @__PURE__ */ jsx(SiteChromeCustomizeContext.Provider, { value, children });
 }
+function planFooterLookSelection(lookId) {
+  const plan = planSiteChromeLookSelection({ surface: "footer", lookId });
+  if (plan.kind !== "footer") return lookId;
+  return plan.next.footerLookId;
+}
+function useSiteChromeCustomizeOptional() {
+  return useContext(SiteChromeCustomizeContext);
+}
+
+// ../blocks/src/client/site-chrome.tsx
+function renderSiteChromeBlock(model, surface, theme) {
+  const spec = model[surface];
+  const themeConfig = applyThemeConfigOverride(theme, spec.themeConfigOverride);
+  const themeRuntime = buildThemeRuntime(themeConfig);
+  const manifest = surface === "header" ? siteHeaderManifest : siteFooterManifest;
+  return renderBlock(manifest, spec.content, {
+    registry: clientComponentRegistry,
+    theme: themeRuntime.tokens,
+    themeConfig,
+    viewModelOverrides: spec.viewModelOverrides
+  });
+}
+function applyThemeConfigOverride(theme, override) {
+  if (!override) return theme;
+  return {
+    ...theme,
+    ...override.header ? { header: mergeDefinedObject(theme.header, override.header) } : {},
+    ...override.footer ? { footer: mergeDefinedObject(theme.footer, override.footer) } : {}
+  };
+}
+function mergeDefinedObject(base, override) {
+  return Object.fromEntries([
+    ...Object.entries(base ?? {}),
+    ...Object.entries(override).filter(([, value]) => value !== void 0)
+  ]);
+}
+function SiteChromeCustomizeButton({
+  surface
+}) {
+  const customize = useSiteChromeCustomizeOptional();
+  const customizePanelId = useId();
+  const customizeDescriptionId = `${customizePanelId}-description`;
+  const [customizeOpen, setCustomizeOpen] = useState(false);
+  const customizeButtonRef = useRef(null);
+  const closeCustomize = useCallback(() => {
+    setCustomizeOpen(false);
+  }, []);
+  const {
+    dialogRef: customizeDialogRef,
+    registerInitialFocus: registerCustomizeInitialFocus,
+    setReturnFocusTarget: setCustomizeReturnFocusTarget,
+    handleDialogKeyDown: handleCustomizeDialogKeyDown
+  } = useDialogFocusTrap({
+    open: customizeOpen,
+    onClose: closeCustomize
+  });
+  const surfaceState = customize?.getSurfaceState(surface) ?? {
+    kind: "unavailable"
+  };
+  const hasCustomizeControls = surfaceState.kind === "available";
+  const cycleableOptionCount = useMemo(() => {
+    if (surfaceState.kind !== "available") return 0;
+    return surfaceState.options.filter((option) => option.available).length;
+  }, [surfaceState]);
+  const toggleCustomize = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!customizeOpen) {
+      setCustomizeReturnFocusTarget(
+        event.currentTarget instanceof HTMLElement ? event.currentTarget : customizeButtonRef.current
+      );
+    }
+    setCustomizeOpen((open) => !open);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto absolute right-2 top-2 z-50 opacity-0 transition group-focus-within/site-chrome:opacity-100 group-hover/site-chrome:opacity-100", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: customizeButtonRef,
+        type: "button",
+        onClick: toggleCustomize,
+        className: previewCustomizePillButtonClassName,
+        "aria-label": `Customize ${surface}`,
+        "aria-expanded": customizeOpen,
+        "aria-haspopup": "dialog",
+        "aria-controls": customizeOpen ? customizePanelId : void 0,
+        disabled: !hasCustomizeControls,
+        children: surfaceState.kind === "available" && surfaceState.saving ? "Saving..." : "Customize"
+      }
+    ),
+    customizeOpen && surfaceState.kind === "available" ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: customizePanelId,
+        className: "builder-dashboard-chrome-theme fixed inset-x-3 bottom-[calc(var(--builder-editor-chrome-offset,0px)+1rem)] z-[70] rounded-lg border bg-background p-3 text-foreground shadow-xl sm:absolute sm:inset-x-auto sm:bottom-auto sm:right-0 sm:top-9 sm:w-72",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": `Customize ${surface}`,
+        "aria-describedby": customizeDescriptionId,
+        ref: customizeDialogRef,
+        onKeyDown: handleCustomizeDialogKeyDown,
+        onClick: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "Site" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: customizeDescriptionId,
+                  className: "text-sm font-semibold",
+                  children: surfaceState.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: registerCustomizeInitialFocus,
+                type: "button",
+                className: "rounded-full px-2 py-1 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+                onClick: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  closeCustomize();
+                },
+                children: "Close"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Look" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: surfaceState.currentLabel })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      customize?.cycleSurfaceLook(surface, "prev");
+                    },
+                    className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+                    "aria-label": `Previous ${surface} Look`,
+                    disabled: surfaceState.saving || !surfaceState.applyAllowed || cycleableOptionCount <= 1,
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      customize?.cycleSurfaceLook(surface, "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 ${surface} Look`,
+                    disabled: surfaceState.saving || !surfaceState.applyAllowed || cycleableOptionCount <= 1,
+                    children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                  }
+                )
+              ] })
+            ] }),
+            surfaceState.diagnostics.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-1 text-xs text-amber-700", children: surfaceState.diagnostics.map((diagnostic) => /* @__PURE__ */ jsx("li", { children: diagnostic }, diagnostic)) }) : null,
+            surfaceState.failure ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-700", children: surfaceState.failure }) : null,
+            !surfaceState.applyAllowed ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Preview only - ask an admin to apply." }) : null
+          ] })
+        ]
+      }
+    ) : null
+  ] });
+}
+function SiteChromeEditableSurface({
+  surface,
+  children,
+  preserveSingleComponentRoot = false
+}) {
+  return renderEditableSurface(
+    children,
+    surface,
+    /* @__PURE__ */ jsx(SiteChromeCustomizeButton, { surface }),
+    { preserveSingleComponentRoot }
+  );
+}
+function renderEditableSurface(children, surface, customizeButton, options) {
+  const childArray = Children.toArray(children);
+  const child = childArray.length === 1 ? childArray[0] : null;
+  if (isValidElement(child) && child.type !== Fragment$1 && (isHostElement(child) || options.preserveSingleComponentRoot)) {
+    return cloneElement(child, {
+      className: joinClassNames(child.props.className, "group/site-chrome relative"),
+      "data-preview-site-chrome-surface": surface,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        child.props.children,
+        customizeButton
+      ] })
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "group/site-chrome relative", "data-preview-site-chrome-surface": surface, children: [
+    children,
+    customizeButton
+  ] });
+}
+function isHostElement(child) {
+  return typeof child.type === "string";
+}
+function joinClassNames(...values) {
+  const className = values.filter(Boolean).join(" ");
+  return className.length > 0 ? className : void 0;
+}
+function PreviewThemedSiteDocument({
+  children,
+  useThemeScope,
+  useContainerResponsiveMode,
+  viewportMode,
+  viewportWidth,
+  scale,
+  contentHeight,
+  scaleContainerRef,
+  contentRef,
+  staticHeaderNode,
+  bannerNode,
+  staticFooterNode,
+  siteChromeRenderModel
+}) {
+  const { effectiveTheme } = usePreviewThemeOverlay();
+  const siteDocumentPlan = planSiteDocument({
+    headerPositioning: effectiveTheme.header?.positioning ?? "static",
+    headerVariant: effectiveTheme.header?.variant ?? null,
+    hasVisibleBanner: Boolean(bannerNode)
+  });
+  const headerNode = siteChromeRenderModel ? /* @__PURE__ */ jsx(SiteChromeEditableSurface, { surface: "header", children: renderSiteChromeBlock(siteChromeRenderModel, "header", effectiveTheme) }) : staticHeaderNode;
+  const canRenderFooterReactively = Boolean(siteChromeRenderModel) && siteChromeRenderModel?.footer.canRenderReactively !== false;
+  const footerNode = canRenderFooterReactively && siteChromeRenderModel ? /* @__PURE__ */ jsx(SiteChromeEditableSurface, { surface: "footer", preserveSingleComponentRoot: true, children: renderSiteChromeBlock(siteChromeRenderModel, "footer", effectiveTheme) }) : staticFooterNode;
+  const documentNode = renderPreviewDocument({
+    viewportMode,
+    viewportWidth,
+    scale,
+    contentHeight,
+    scaleContainerRef,
+    contentRef,
+    siteDocumentPlan,
+    headerNode,
+    bannerNode,
+    footerNode,
+    children
+  });
+  if (!useThemeScope) {
+    return documentNode;
+  }
+  return /* @__PURE__ */ jsx(
+    ThemeScope,
+    {
+      theme: effectiveTheme,
+      responsiveMode: useContainerResponsiveMode ? "container" : "viewport",
+      className: "flex flex-1 flex-col",
+      children: documentNode
+    }
+  );
+}
+function renderPreviewDocument({
+  viewportMode,
+  viewportWidth,
+  scale,
+  contentHeight,
+  scaleContainerRef,
+  contentRef,
+  siteDocumentPlan,
+  headerNode,
+  bannerNode,
+  footerNode,
+  children
+}) {
+  if (viewportMode === "squeeze") {
+    return /* @__PURE__ */ jsx(
+      SiteDocumentLayout,
+      {
+        as: "main",
+        role: "main",
+        plan: siteDocumentPlan,
+        headerNode,
+        bannerNode,
+        footerNode,
+        minHeightClassName: null,
+        className: "flex-1 pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))]",
+        children
+      }
+    );
+  }
+  if (viewportMode === "fixed") {
+    const targetWidthPx = viewportWidth === "full" ? 1440 : viewportWidth;
+    const scaledWidth = targetWidthPx * scale;
+    const scaledHeight = contentHeight > 0 ? contentHeight * scale : 0;
+    const wrapperStyle = {
+      width: `${scaledWidth}px`,
+      margin: "0 auto"
+    };
+    if (scaledHeight > 0) {
+      wrapperStyle.height = `${scaledHeight}px`;
+    } else {
+      wrapperStyle.minHeight = "100%";
+    }
+    return /* @__PURE__ */ jsx("div", { ref: scaleContainerRef, className: "h-full overflow-auto", children: /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: contentRef,
+        className: "border-x shadow-sm",
+        style: {
+          minHeight: "100%",
+          width: `${targetWidthPx}px`,
+          transform: `scale(${scale})`,
+          transformOrigin: "top left"
+        },
+        children: /* @__PURE__ */ jsx(
+          SiteDocumentLayout,
+          {
+            as: "main",
+            role: "main",
+            plan: siteDocumentPlan,
+            headerNode,
+            bannerNode,
+            footerNode,
+            minHeightClassName: "min-h-full",
+            className: "pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))]",
+            style: { width: `${targetWidthPx}px` },
+            children
+          }
+        )
+      }
+    ) }) });
+  }
+  return null;
+}
 var previewContainerResponsiveEnabled = process.env.NEXT_PUBLIC_ENABLE_PREVIEW_CONTAINER_RESPONSIVE !== "false";
-var PreviewEditorSidebar = React7.lazy(async () => {
-  const mod = await import('./PreviewEditorSidebar-X2HWXFOL.mjs');
+var PreviewEditorSidebar = React9.lazy(async () => {
+  const mod = await import('./PreviewEditorSidebar-XSX7QKHQ.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
-var PreviewEditorUI = React7.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-AQXIXPOH.mjs');
+var PreviewEditorUI = React9.lazy(async () => {
+  const mod = await import('./PreviewEditorUI-YZNEZ3QD.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {
@@ -2565,6 +2942,11 @@ function PreviewShellLayout({
   themeSelectionButtonPersonalityId = null,
   themeSelectionPaletteVariantId = null,
   themeSelectionPaletteOverrides = null,
+  themeSelectionHeaderLayoutId = null,
+  themeSelectionHeaderStyleId = null,
+  themeSelectionTypographyPresetId = null,
+  themeSelectionTypographyBodyFontOverride = null,
+  themeSelectionTypographyHeadingFontOverride = null,
   themeSelectionHeaderLookId = null,
   themeSelectionFooterLookId = null,
   themeSelectionHeaderContext,
@@ -2583,18 +2965,11 @@ function PreviewShellLayout({
   const headerNode = layout?.headerNode ?? null;
   const bannerNode = layout?.bannerNode ?? null;
   const footerNode = layout?.footerNode ?? null;
+  const siteChromeRenderModel = layout?.siteChromeRenderModel ?? null;
   const surfaceDocument = useMemo(
     () => resolvePreviewChromeSurface(surfaceId),
     [surfaceId]
   );
-  const siteDocumentPlan = useMemo(
-    () => planSiteDocument({
-      headerPositioning: theme.header?.positioning ?? "static",
-      headerVariant: theme.header?.variant ?? null,
-      hasVisibleBanner: Boolean(bannerNode)
-    }),
-    [bannerNode, theme.header?.positioning, theme.header?.variant]
-  );
   const isOpen = useEditorUiStore((s) => s.drawerOpen);
   const setDrawerOpen = useEditorUiStore((s) => s.setDrawerOpen);
   const sidebarTab = useEditorUiStore((s) => s.previewSidebarTab);
@@ -2749,91 +3124,29 @@ function PreviewShellLayout({
     }
     return ZOOM_PERCENTAGES[zoom];
   }, [viewportMode, viewportWidth, zoom, containerWidth]);
-  const renderPreviewContent = useCallback(() => {
-    if (viewportMode === "squeeze") {
-      return /* @__PURE__ */ jsx(
-        SiteDocumentLayout,
-        {
-          as: "main",
-          role: "main",
-          plan: siteDocumentPlan,
-          headerNode,
-          bannerNode,
-          footerNode,
-          minHeightClassName: null,
-          className: "flex-1 pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))]",
-          children
-        }
-      );
-    }
-    if (viewportMode === "fixed") {
-      const targetWidthPx = viewportWidth === "full" ? 1440 : viewportWidth;
-      const scaledWidth = targetWidthPx * scale;
-      const scaledHeight = contentHeight > 0 ? contentHeight * scale : 0;
-      const wrapperStyle = {
-        width: `${scaledWidth}px`,
-        margin: "0 auto"
-      };
-      if (scaledHeight > 0) {
-        wrapperStyle.height = `${scaledHeight}px`;
-      } else {
-        wrapperStyle.minHeight = "100%";
-      }
-      return /* @__PURE__ */ jsx("div", { ref: scaleContainerRef, className: "h-full overflow-auto", children: /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: contentRef,
-          className: "border-x shadow-sm",
-          style: {
-            minHeight: "100%",
-            width: `${targetWidthPx}px`,
-            transform: `scale(${scale})`,
-            transformOrigin: "top left"
-          },
-          children: /* @__PURE__ */ jsx(
-            SiteDocumentLayout,
-            {
-              as: "main",
-              role: "main",
-              plan: siteDocumentPlan,
-              headerNode,
-              bannerNode,
-              footerNode,
-              minHeightClassName: "min-h-full",
-              className: "pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))]",
-              style: { width: `${targetWidthPx}px` },
-              children
-            }
-          )
-        }
-      ) }) });
-    }
-    return null;
-  }, [
-    viewportMode,
-    viewportWidth,
-    siteDocumentPlan,
-    headerNode,
-    bannerNode,
-    children,
-    footerNode,
-    scale,
-    contentHeight,
-    scaleContainerRef
-  ]);
-  const previewContent = renderPreviewContent();
   const leftPane = /* @__PURE__ */ jsx(
     "div",
     {
       className: "relative flex h-full min-h-0 flex-col overflow-auto bg-muted/30",
       style: previewPaneContainmentStyle,
-      children: useThemeScope ? /* @__PURE__ */ jsx(
-        PreviewThemeScopeBoundary,
+      children: /* @__PURE__ */ jsx(
+        PreviewThemedSiteDocument,
         {
+          useThemeScope,
           useContainerResponsiveMode: previewContainerResponsiveEnabled,
-          children: previewContent
+          viewportMode,
+          viewportWidth,
+          scale,
+          contentHeight,
+          scaleContainerRef,
+          contentRef,
+          staticHeaderNode: headerNode,
+          bannerNode,
+          staticFooterNode: footerNode,
+          siteChromeRenderModel,
+          children
         }
-      ) : previewContent
+      )
     }
   );
   const rightPane = /* @__PURE__ */ jsx(
@@ -2841,7 +3154,7 @@ function PreviewShellLayout({
     {
       className: `${PREVIEW_CHROME_THEME_CLASS_NAME} flex h-full min-h-0 flex-col overflow-hidden ${surfaceDocument.surfaceClassName ?? ""}`,
       ...getPreviewChromeSurfaceDataProps(surfaceDocument),
-      children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         PreviewEditorSidebar,
         {
           surfaceId,
@@ -2863,6 +3176,11 @@ function PreviewShellLayout({
           themeSelectionButtonPersonalityId,
           themeSelectionPaletteVariantId,
           themeSelectionPaletteOverrides,
+          themeSelectionHeaderLayoutId,
+          themeSelectionHeaderStyleId,
+          themeSelectionTypographyPresetId,
+          themeSelectionTypographyBodyFontOverride,
+          themeSelectionTypographyHeadingFontOverride,
           themeSelectionHeaderLookId,
           themeSelectionFooterLookId,
           themeSelectionHeaderContext,
@@ -2891,7 +3209,7 @@ function PreviewShellLayout({
       ) })
     }
   );
-  const editorUI = /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+  const editorUI = /* @__PURE__ */ jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
     PreviewEditorUI,
     {
       inMaintenanceMode: maintenanceModeEnabled,
@@ -2909,7 +3227,7 @@ function PreviewShellLayout({
     }
   );
   if (!isOpen) {
-    return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsx(PreviewDesignCoordinatorProvider, { children: /* @__PURE__ */ jsxs(
       SiteChromeCustomizeProvider,
       {
         siteId,
@@ -2925,6 +3243,11 @@ function PreviewShellLayout({
           buttonPersonalityId: themeSelectionButtonPersonalityId,
           paletteVariantId: themeSelectionPaletteVariantId,
           paletteOverrides: themeSelectionPaletteOverrides,
+          headerLayoutId: themeSelectionHeaderLayoutId,
+          headerStyleId: themeSelectionHeaderStyleId,
+          typographyPresetId: themeSelectionTypographyPresetId,
+          typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
+          typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
           headerLookId: themeSelectionHeaderLookId,
           footerLookId: themeSelectionFooterLookId
         },
@@ -2937,9 +3260,9 @@ function PreviewShellLayout({
           /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden bg-background", children: leftPane })
         ]
       }
-    ) });
+    ) }) });
   }
-  return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsx(PreviewDesignCoordinatorProvider, { children: /* @__PURE__ */ jsxs(
     SiteChromeCustomizeProvider,
     {
       siteId,
@@ -2955,6 +3278,11 @@ function PreviewShellLayout({
         buttonPersonalityId: themeSelectionButtonPersonalityId,
         paletteVariantId: themeSelectionPaletteVariantId,
         paletteOverrides: themeSelectionPaletteOverrides,
+        headerLayoutId: themeSelectionHeaderLayoutId,
+        headerStyleId: themeSelectionHeaderStyleId,
+        typographyPresetId: themeSelectionTypographyPresetId,
+        typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
+        typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
         headerLookId: themeSelectionHeaderLookId,
         footerLookId: themeSelectionFooterLookId
       },
@@ -2982,22 +3310,7 @@ function PreviewShellLayout({
         ) })
       ]
     }
-  ) });
-}
-function PreviewThemeScopeBoundary({
-  children,
-  useContainerResponsiveMode
-}) {
-  const { effectiveTheme } = usePreviewThemeOverlay();
-  return /* @__PURE__ */ jsx(
-    ThemeScope,
-    {
-      theme: effectiveTheme,
-      responsiveMode: useContainerResponsiveMode ? "container" : "viewport",
-      className: "flex flex-1 flex-col",
-      children
-    }
-  );
+  ) }) });
 }
 function PreviewShell({
   children,
@@ -3018,6 +3331,11 @@ function PreviewShell({
   themeSelectionButtonPersonalityId = null,
   themeSelectionPaletteVariantId = null,
   themeSelectionPaletteOverrides = null,
+  themeSelectionHeaderLayoutId = null,
+  themeSelectionHeaderStyleId = null,
+  themeSelectionTypographyPresetId = null,
+  themeSelectionTypographyBodyFontOverride = null,
+  themeSelectionTypographyHeadingFontOverride = null,
   themeSelectionHeaderLookId = null,
   themeSelectionFooterLookId = null,
   themeSelectionHeaderContext,
@@ -3102,6 +3420,11 @@ function PreviewShell({
                     themeSelectionButtonPersonalityId,
                     themeSelectionPaletteVariantId,
                     themeSelectionPaletteOverrides,
+                    themeSelectionHeaderLayoutId,
+                    themeSelectionHeaderStyleId,
+                    themeSelectionTypographyPresetId,
+                    themeSelectionTypographyBodyFontOverride,
+                    themeSelectionTypographyHeadingFontOverride,
                     themeSelectionHeaderLookId,
                     themeSelectionFooterLookId,
                     themeSelectionHeaderContext,
@@ -3167,7 +3490,7 @@ function SdkPreviewModeRuntime(props) {
   const customBlocks = content.customBlocks ?? null;
   const typedBlockOverrides = blockOverrides ?? null;
   const sdkConfigForEditor = useMemo(() => {
-    const blocks = sdkConfig?.customBlocks ?? customBlocks ?? void 0;
+    const blocks = customBlocks ?? sdkConfig?.customBlocks ?? void 0;
     if (!blocks || blocks.length === 0) return null;
     return { customBlocks: blocks };
   }, [sdkConfig, customBlocks]);