@riverbankcms/sdk 0.77.1 → 0.78.0

package/dist/{chunk-2SPENC5M.mjs → chunk-F7RTCZYN.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-SXOLGNMX.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-NIDXI46P.mjs';
+import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-TXDES5P2.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, 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-OECWLDHN.mjs';
+import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-SVMMM2NA.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';
 
@@ -436,7 +436,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);
@@ -629,6 +629,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]
@@ -855,6 +858,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 +869,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 })
                       }
                     )
@@ -1354,9 +1359,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 +1383,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,
@@ -2390,8 +2409,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 +2427,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 +2559,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 +2601,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 +2636,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 +2663,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 +2691,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 +2707,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 +2764,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 +2857,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 +2988,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 +3016,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 +3034,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 +3052,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 +3075,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 +3088,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-RIKFQ72L.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
 var PreviewEditorUI = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-P7RN4CDS.mjs');
+  const mod = await import('./PreviewEditorUI-XO7TUWKK.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {

package/dist/{chunk-IENWFSLO.mjs → chunk-NIDXI46P.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { assertNever2, deriveNearestCompatibleHeaderStyle, findLegacyHeaderLookIdForSelection, compileSiteThemeFromSelections, footerLookCatalog, getOrderedHeaderStyleIdsForLayout, getOrderedHeaderLayoutIdsForCuration, footerLookRejectionReasonLabel, getHeaderStyle, getHeaderLayout, writePlanForLookCustomizationCommand, siteStyleIdFromTheme, getCuratedSiteStyle } from './chunk-KWJPDZH2.mjs';
+import { assertNever2, deriveNearestCompatibleHeaderStyle, findLegacyHeaderLookIdForSelection, compileSiteThemeFromSelections, footerLookCatalog, getOrderedHeaderStyleIdsForLayout, getOrderedHeaderLayoutIdsForCuration, footerLookRejectionReasonLabel, getHeaderStyle, getHeaderLayout, writePlanForLookCustomizationCommand, siteStyleIdFromTheme, getCuratedSiteStyle } from './chunk-OECWLDHN.mjs';
 import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';