@riverbankcms/sdk 0.77.1 → 0.78.2

package/dist/{chunk-6SMUFTXD.mjs → chunk-OKMBEAXY.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { ApiRequestError, markPreviewAuthExpired } from './chunk-VX7B5VAC.mjs';
+import { ApiRequestError, markPreviewAuthExpired } from './chunk-CR5HKAGU.mjs';
 import { createContext, useContext, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { QueryClient, MutationCache, QueryCache, QueryClientProvider } from '@tanstack/react-query';

package/dist/{chunk-XGB3TDIC.mjs → chunk-R7POPVJR.mjs}

@@ -5,13 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
+var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __export = (target, all) => {
@@ -35,4 +29,4 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-export { __commonJS, __export, __require, __toESM };
+export { __commonJS, __export, __toESM };

package/dist/{chunk-2SPENC5M.mjs → chunk-RGTOD4AJ.mjs}

@@ -1,9 +1,9 @@
 "use client";
-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-IENWFSLO.mjs';
-import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-ZYEJLCTN.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-KWJPDZH2.mjs';
-import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-VX7B5VAC.mjs';
+import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-OKMBEAXY.mjs';
+import { PreviewThemeOverlayProvider, PreviewDesignCoordinatorProvider, resolveSiteStyleAccess, usePreviewDesignCoordinator, createOptimisticActionRunner, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, syncStyleConfiguratorState, buildSiteChromeLookModels, planSiteStylePreviewChange, markApplyFailed, markApplySaved, markApplySaving, previewHeaderStyle, previewHeaderLayout, previewFooterLook, cycleSiteChromeLookId, usePreviewThemeOverlay, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, planSiteChromeLookSelection, sanitizeDashboardPath } from './chunk-4QEGTLK6.mjs';
+import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-6HYXHRAI.mjs';
+import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, useEditorUiStore, ResizableSplitPane, BlockApiProvider, EditorProvider, getCuratedSiteStyle, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, useEditorUiStoreInstance, surfaceResolutionContextFromTheme, unsafeAsEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, planSiteDocument, ThemeScope, FixedBottomSurface, Button, unwrapResponse, X, ChevronLeft, ChevronRight, RotateCcw, PreviewRichTextEditor, RichText, PreviewTextEditor, Text, buildThemeRuntime, renderBlock, siteHeaderManifest, siteFooterManifest, SiteDocumentLayout, SITE_CHROME_CLASS_NAMES, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, buildEditorModelRuntimeFieldsByBlockId, applyCompiledRuntimeFieldsToContent, assertNever2, getBlockDefinition, systemCustomizeFacetDefinitionsForBlock, systemCustomizeFacetAppliesToLayoutVariant, systemCustomizeFacetCurrentValue, systemCustomizeFacetLabelForValue, visibleHeaderClearancePx, systemCustomizeFacetNextValue, EDITABLE_SURFACE_FORWARDING_PROP, assertNever, SITE_CHROME_VISIBLE_HEADER_SELECTOR } from './chunk-MCRQMPET.mjs';
+import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-CR5HKAGU.mjs';
 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';
 
@@ -123,9 +123,12 @@ function previewProjectionsFromAiOverlays(overlays) {
   }
   return projections;
 }
+function toStringArray(value) {
+  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+}
 function applyStructureProjection(blockItems, projection) {
-  const order = projection.viewMode === "before" ? projection.before.blockIds : projection.after.blockIds;
-  if (!Array.isArray(order) || order.length === 0) return blockItems.slice();
+  const order = projection.viewMode === "before" ? toStringArray(projection.before.blockIds) : toStringArray(projection.after.blockIds);
+  if (order.length === 0) return blockItems.slice();
   const itemsById = /* @__PURE__ */ new Map();
   const unknownIdItems = [];
   for (const item of blockItems) {
@@ -256,7 +259,7 @@ function getDraftSnapshots(uiStore) {
 }
 function mergeBlockWithDraft(block, draftMap, index, projections = []) {
   const id = block.id ?? null;
-  const editorBlockId = id ? asEditorBlockId(id) : null;
+  const editorBlockId = id ? unsafeAsEditorBlockId(id) : null;
   const snap = editorBlockId ? draftMap.get(editorBlockId) ?? null : null;
   const rawDraft = snap?.current ?? null;
   const draftContent = editorBlockId ? applyPreviewContentFieldProjections(editorBlockId, rawDraft, projections) : rawDraft;
@@ -436,7 +439,7 @@ function cyclePageDesignBlockLayout(block, direction) {
   };
 }
 function cyclePageDesignBlockLook(block, direction) {
-  if (block.availableLooks.length === 0) return null;
+  if (block.availableLooks.length <= 1) return null;
   const lookIds = block.availableLooks.map((look) => look.id);
   const values = [null, ...lookIds];
   const currentIndex = cycleChoiceIndex(block.look, values, direction);
@@ -584,6 +587,9 @@ function focusableElementsIn(root) {
     )
   ).filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true");
 }
+function isUnknownArray(value) {
+  return Array.isArray(value);
+}
 function BlockToolbar({
   blockId,
   blockKind,
@@ -629,6 +635,9 @@ function BlockToolbar({
   const hasLookControls = Boolean(
     designBlock && designBlock.availableLooks.length > 0
   );
+  const canCycleLook = Boolean(
+    designBlock && designBlock.availableLooks.length > 1
+  );
   const facetControls = useMemo(
     () => previewCustomizeFacetControlsFor(blockKind, content, designBlock),
     [blockKind, content, designBlock]
@@ -649,7 +658,7 @@ function BlockToolbar({
     state.setPreviewSidebarTab("editor");
     state.setDrawerOpen(true);
     state.requestFocus({
-      blockId: asEditorBlockId(blockId),
+      blockId: unsafeAsEditorBlockId(blockId),
       fieldPath: focusTarget.fieldPath,
       itemIndex: focusTarget.itemIndex
     });
@@ -855,6 +864,7 @@ function BlockToolbar({
                         onClick: cycleLook("prev"),
                         className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
                         "aria-label": "Previous look",
+                        disabled: !canCycleLook,
                         children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
                       }
                     ),
@@ -865,6 +875,7 @@ function BlockToolbar({
                         onClick: cycleLook("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 look",
+                        disabled: !canCycleLook,
                         children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
                       }
                     )
@@ -912,7 +923,7 @@ function findFirstFieldPath(fields, data, prefix) {
     }
     if (field.type === "repeater" && field.schema) {
       const collection = isRecord3(data) ? data[field.id] : void 0;
-      const items = Array.isArray(collection) ? collection : [];
+      const items = isUnknownArray(collection) ? collection : [];
       if (items.length > 0) {
         const firstItem = items[0];
         const nested = findFirstFieldPath(field.schema.fields, firstItem, [
@@ -1252,7 +1263,7 @@ function EditablePageRenderer(props) {
       const previousBlock = blockIndex > 0 ? blockItemsForRender[blockIndex - 1] ?? null : null;
       const canonicalBlockIndex = blockItems.findIndex((b) => b.id === blockId);
       const canonicalPreviousBlock = canonicalBlockIndex > 0 ? blockItems[canonicalBlockIndex - 1] ?? null : null;
-      const editorBlockId = asEditorBlockId(blockId);
+      const editorBlockId = unsafeAsEditorBlockId(blockId);
       if (!block) {
         return /* @__PURE__ */ jsx(EditableBlockProvider, { blockId, children: rendered });
       }
@@ -1354,9 +1365,7 @@ function usePreviewHeaderClearance() {
       }
       const style = window.getComputedStyle(header);
       const isOverlayHeader = style.position === "fixed" || style.position === "sticky";
-      setClearance(
-        isOverlayHeader ? Math.ceil(header.getBoundingClientRect().height) : 0
-      );
+      setClearance(isOverlayHeader ? measuredOverlayHeaderClearancePx(header) : 0);
     };
     update();
     const mutationObserver = new MutationObserver(update);
@@ -1380,6 +1389,22 @@ function findPreviewOverlayHeader() {
     ".block-site-header.rb-fixed, .block-site-header.rb-sticky"
   );
 }
+function measuredOverlayHeaderClearancePx(header) {
+  const visibleHeader = findVisibleHeaderMeasurementTarget(header);
+  return visibleHeaderClearancePx(
+    visibleHeader ? visibleHeader.getBoundingClientRect() : header.getBoundingClientRect()
+  );
+}
+function findVisibleHeaderMeasurementTarget(header) {
+  const candidates = Array.from(
+    header.querySelectorAll(SITE_CHROME_VISIBLE_HEADER_SELECTOR)
+  );
+  return candidates.find((candidate) => {
+    const style = window.getComputedStyle(candidate);
+    const rect = candidate.getBoundingClientRect();
+    return style.display !== "none" && rect.height > 0 && rect.bottom > 0;
+  }) ?? null;
+}
 function PreviewAuthInit({
   children,
   session,
@@ -1551,7 +1576,7 @@ function usePreviewKeepAlive({ enabled, fetcher, onExpired, intervalMs = DEFAULT
         }
       }
     }
-    keepAlive();
+    void keepAlive();
     const id = window.setInterval(keepAlive, withJitter(intervalMs));
     return () => {
       isActive = false;
@@ -2390,8 +2415,17 @@ function SiteChromeCustomizeProvider({
     (surface) => {
       if (!state || !lookModels) return { kind: "unavailable" };
       if (surface === "header") {
+        const currentLayoutId = state.previewed.headerLayoutId;
+        const selectedLayout = lookModels.headerLayout.options.find(
+          (option) => option.id === currentLayoutId
+        );
+        const renderedLayout = lookModels.headerLayout.options.find(
+          (option) => option.id === lookModels.headerLayout.renderedLayoutId
+        );
         const currentId2 = state.previewed.headerStyleId;
-        const selected2 = lookModels.headerStyle.options.find((option) => option.id === currentId2);
+        const selected2 = lookModels.headerStyle.options.find(
+          (option) => option.id === currentId2
+        );
         const rendered2 = lookModels.headerStyle.options.find(
           (option) => option.id === lookModels.headerStyle.renderedStyleId
         );
@@ -2399,6 +2433,9 @@ function SiteChromeCustomizeProvider({
           kind: "available",
           surface: "header",
           label: "Header",
+          currentLayoutId,
+          currentLayoutLabel: selectedLayout?.label ?? (renderedLayout ? `${renderedLayout.label} (default)` : "Unknown Layout"),
+          layoutOptions: lookModels.headerLayout.options,
           currentId: currentId2,
           currentLabel: selected2?.label ?? (rendered2 ? `${rendered2.label} (default)` : "Unknown Look"),
           options: lookModels.headerStyle.options,
@@ -2528,6 +2565,16 @@ function SiteChromeCustomizeProvider({
     },
     [applyAllowed, persistSelection]
   );
+  const selectHeaderLayout = useCallback(
+    (layoutId) => {
+      if (!applyAllowed) return;
+      const current = stateRef.current;
+      if (!current) return;
+      const nextState = previewHeaderLayout(current, layoutId);
+      persistSelection("header", nextState.previewed);
+    },
+    [applyAllowed, persistSelection]
+  );
   const selectFooterLook = useCallback(
     (lookId) => {
       if (!applyAllowed) return;
@@ -2560,12 +2607,28 @@ function SiteChromeCustomizeProvider({
     },
     [getSurfaceState, selectFooterLook, selectHeaderStyle]
   );
+  const cycleSurfaceLayout = useCallback(
+    (surface, direction) => {
+      const currentState = getSurfaceState(surface);
+      if (currentState.kind !== "available" || currentState.surface !== "header") {
+        return;
+      }
+      const next = cycleSiteChromeLookId(
+        currentState.layoutOptions,
+        currentState.currentLayoutId,
+        direction
+      );
+      if (next !== void 0 && next !== null) selectHeaderLayout(next);
+    },
+    [getSurfaceState, selectHeaderLayout]
+  );
   const value = useMemo(
     () => ({
       getSurfaceState,
-      cycleSurfaceLook
+      cycleSurfaceLook,
+      cycleSurfaceLayout
     }),
-    [cycleSurfaceLook, getSurfaceState]
+    [cycleSurfaceLayout, cycleSurfaceLook, getSurfaceState]
   );
   return /* @__PURE__ */ jsx(SiteChromeCustomizeContext.Provider, { value, children });
 }
@@ -2579,9 +2642,9 @@ function useSiteChromeCustomizeOptional() {
 }
 
 // ../blocks/src/client/site-chrome.tsx
-function renderSiteChromeBlock(model, surface, theme) {
+function renderSiteChromeBlock(model, surface, theme, options = {}) {
   const spec = model[surface];
-  const themeConfig = applyThemeConfigOverride(theme, spec.themeConfigOverride);
+  const themeConfig = options.themeConfigOverrideMode === "ignore" ? theme : applyThemeConfigOverride(theme, spec.themeConfigOverride);
   const themeRuntime = buildThemeRuntime(themeConfig);
   const manifest = surface === "header" ? siteHeaderManifest : siteFooterManifest;
   return renderBlock(manifest, spec.content, {
@@ -2606,7 +2669,8 @@ function mergeDefinedObject(base, override) {
   ]);
 }
 function SiteChromeCustomizeButton({
-  surface
+  surface,
+  containerClassName = "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"
 }) {
   const customize = useSiteChromeCustomizeOptional();
   const customizePanelId = useId();
@@ -2633,6 +2697,12 @@ function SiteChromeCustomizeButton({
     if (surfaceState.kind !== "available") return 0;
     return surfaceState.options.filter((option) => option.available).length;
   }, [surfaceState]);
+  const cycleableLayoutOptionCount = useMemo(() => {
+    if (surfaceState.kind !== "available" || surfaceState.surface !== "header") {
+      return 0;
+    }
+    return surfaceState.layoutOptions.filter((option) => option.available).length;
+  }, [surfaceState]);
   const toggleCustomize = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -2643,7 +2713,7 @@ function SiteChromeCustomizeButton({
     }
     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: [
+  return /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -2700,6 +2770,44 @@ function SiteChromeCustomizeButton({
             )
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            surfaceState.surface === "header" ? /* @__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: "Layout" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: surfaceState.currentLayoutLabel })
+              ] }),
+              /* @__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?.cycleSurfaceLayout(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} Layout`,
+                    disabled: surfaceState.saving || !surfaceState.applyAllowed || cycleableLayoutOptionCount <= 1,
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      customize?.cycleSurfaceLayout(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} Layout`,
+                    disabled: surfaceState.saving || !surfaceState.applyAllowed || cycleableLayoutOptionCount <= 1,
+                    children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                  }
+                )
+              ] })
+            ] }) : null,
             /* @__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" }),
@@ -2755,35 +2863,116 @@ function SiteChromeEditableSurface({
   return renderEditableSurface(
     children,
     surface,
-    /* @__PURE__ */ jsx(SiteChromeCustomizeButton, { surface }),
     { preserveSingleComponentRoot }
   );
 }
-function renderEditableSurface(children, surface, customizeButton, options) {
+function renderEditableSurface(children, surface, 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)) {
+  if (isValidElement(child) && child.type !== Fragment$1 && (isHostElement(child) || options.preserveSingleComponentRoot || isEditableSurfaceForwardingElement(child))) {
     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
+        /* @__PURE__ */ jsx(SiteChromeCustomizeButton, { surface })
       ] })
     });
   }
+  if (surface === "header") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group/site-chrome",
+        "data-preview-site-chrome-surface": surface,
+        style: { display: "contents" },
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            SiteChromeCustomizeButton,
+            {
+              surface,
+              containerClassName: "pointer-events-auto fixed right-4 top-4 z-[70] opacity-0 transition group-focus-within/site-chrome:opacity-100 group-hover/site-chrome:opacity-100"
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs("div", { className: "group/site-chrome relative", "data-preview-site-chrome-surface": surface, children: [
     children,
-    customizeButton
+    /* @__PURE__ */ jsx(SiteChromeCustomizeButton, { surface })
   ] });
 }
 function isHostElement(child) {
   return typeof child.type === "string";
 }
+function isEditableSurfaceForwardingElement(child) {
+  return typeof child.type !== "string" && child.type !== Fragment$1 && child.type[EDITABLE_SURFACE_FORWARDING_PROP] === true;
+}
 function joinClassNames(...values) {
   const className = values.filter(Boolean).join(" ");
   return className.length > 0 ? className : void 0;
 }
+
+// ../preview-next/src/client/preview/previewDocumentFrame.ts
+var PREVIEW_DOCUMENT_FRAME_CLASS_NAME = "builder-preview-document-frame";
+function planPreviewDocumentFrame(input) {
+  switch (input.viewportMode) {
+    case "squeeze":
+      return {
+        kind: "squeeze",
+        frameClassName: PREVIEW_DOCUMENT_FRAME_CLASS_NAME,
+        frameDataProps: {
+          "data-builder-preview-document-frame": "squeeze",
+          "data-builder-preview-document-scale": "none"
+        }
+      };
+    case "fixed":
+      return planFixedPreviewDocumentFrame(input);
+    default:
+      return assertNever3(input.viewportMode);
+  }
+}
+function planFixedPreviewDocumentFrame(input) {
+  const scale = normalizePreviewScale(input.scale);
+  const targetWidthPx = input.viewportWidth === "full" ? 1440 : input.viewportWidth;
+  const scaledWidth = targetWidthPx * scale;
+  const scaledHeight = input.contentHeight > 0 ? input.contentHeight * scale : null;
+  const wrapperStyle = {
+    width: `${scaledWidth}px`,
+    margin: "0 auto"
+  };
+  if (scaledHeight !== null) {
+    wrapperStyle.height = `${scaledHeight}px`;
+  } else {
+    wrapperStyle.minHeight = "100%";
+  }
+  return {
+    kind: "fixed",
+    targetWidthPx,
+    wrapperStyle,
+    contentStyle: {
+      minHeight: "100%",
+      width: `${targetWidthPx}px`,
+      ...scale === 1 ? {} : { zoom: scale }
+    },
+    siteDocumentStyle: { width: `${targetWidthPx}px` },
+    frameClassName: PREVIEW_DOCUMENT_FRAME_CLASS_NAME,
+    frameDataProps: {
+      "data-builder-preview-document-frame": "fixed",
+      "data-builder-preview-document-scale": scale === 1 ? "none" : "scaled",
+      "data-builder-preview-fixed-header-behavior": "fixed-as-sticky"
+    }
+  };
+}
+function normalizePreviewScale(scale) {
+  if (!Number.isFinite(scale) || scale <= 0) return 1;
+  return scale;
+}
+function assertNever3(value) {
+  throw new Error(`Unhandled preview viewport mode: ${String(value)}`);
+}
 function PreviewThemedSiteDocument({
   children,
   useThemeScope,
@@ -2805,9 +2994,13 @@ function PreviewThemedSiteDocument({
     headerVariant: effectiveTheme.header?.variant ?? null,
     hasVisibleBanner: Boolean(bannerNode)
   });
-  const headerNode = siteChromeRenderModel ? /* @__PURE__ */ jsx(SiteChromeEditableSurface, { surface: "header", children: renderSiteChromeBlock(siteChromeRenderModel, "header", effectiveTheme) }) : staticHeaderNode;
+  const headerNode = siteChromeRenderModel ? /* @__PURE__ */ jsx(SiteChromeEditableSurface, { surface: "header", children: renderSiteChromeBlock(siteChromeRenderModel, "header", effectiveTheme, {
+    themeConfigOverrideMode: "ignore"
+  }) }) : 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 footerNode = canRenderFooterReactively && siteChromeRenderModel ? /* @__PURE__ */ jsx(SiteChromeEditableSurface, { surface: "footer", preserveSingleComponentRoot: true, children: renderSiteChromeBlock(siteChromeRenderModel, "footer", effectiveTheme, {
+    themeConfigOverrideMode: "ignore"
+  }) }) : staticFooterNode;
   const documentNode = renderPreviewDocument({
     viewportMode,
     viewportWidth,
@@ -2829,7 +3022,7 @@ function PreviewThemedSiteDocument({
     {
       theme: effectiveTheme,
       responsiveMode: useContainerResponsiveMode ? "container" : "viewport",
-      className: "flex flex-1 flex-col",
+      className: "rb-flex rb-flex-1 rb-flex-col",
       children: documentNode
     }
   );
@@ -2847,7 +3040,14 @@ function renderPreviewDocument({
   footerNode,
   children
 }) {
+  const framePlan = planPreviewDocumentFrame({
+    viewportMode,
+    viewportWidth,
+    scale,
+    contentHeight
+  });
   if (viewportMode === "squeeze") {
+    if (framePlan.kind !== "squeeze") return null;
     return /* @__PURE__ */ jsx(
       SiteDocumentLayout,
       {
@@ -2858,35 +3058,20 @@ function renderPreviewDocument({
         bannerNode,
         footerNode,
         minHeightClassName: null,
-        className: "flex-1 pb-[calc(var(--builder-editor-chrome-offset,0px)+var(--builder-preview-banner-offset,0px))]",
+        className: `${framePlan.frameClassName} rb-flex-1 rb-preview-editor-offset`,
         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(
+    if (framePlan.kind !== "fixed") return null;
+    return /* @__PURE__ */ jsx("div", { ref: scaleContainerRef, className: "h-full overflow-auto", children: /* @__PURE__ */ jsx("div", { style: framePlan.wrapperStyle, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: contentRef,
-        className: "border-x shadow-sm",
-        style: {
-          minHeight: "100%",
-          width: `${targetWidthPx}px`,
-          transform: `scale(${scale})`,
-          transformOrigin: "top left"
-        },
+        className: `${framePlan.frameClassName} border-x shadow-sm`,
+        style: framePlan.contentStyle,
+        ...framePlan.frameDataProps,
         children: /* @__PURE__ */ jsx(
           SiteDocumentLayout,
           {
@@ -2896,9 +3081,9 @@ function renderPreviewDocument({
             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` },
+            minHeightClassName: SITE_CHROME_CLASS_NAMES.fullMinHeight,
+            className: "rb-preview-editor-offset",
+            style: framePlan.siteDocumentStyle,
             children
           }
         )
@@ -2909,11 +3094,11 @@ function renderPreviewDocument({
 }
 var previewContainerResponsiveEnabled = process.env.NEXT_PUBLIC_ENABLE_PREVIEW_CONTAINER_RESPONSIVE !== "false";
 var PreviewEditorSidebar = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorSidebar-DVUG7GK4.mjs');
+  const mod = await import('./PreviewEditorSidebar-4DXLYX2V.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
 var PreviewEditorUI = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-P7RN4CDS.mjs');
+  const mod = await import('./PreviewEditorUI-CS5P4N3P.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {