@riverbankcms/sdk 0.80.0 → 0.81.0

package/dist/{chunk-7PCYG6YV.mjs → chunk-3PTVPAT4.mjs}

@@ -1,11 +1,12 @@
 "use client";
-import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-MPBNEVPB.mjs';
-import { PreviewThemeOverlayProvider, PreviewDesignCoordinatorProvider, PreviewBlockCustomizeSelectionProvider, resolveSiteStyleAccess, usePreviewDesignCoordinator, createOptimisticActionRunner, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, syncStyleConfiguratorState, buildSiteChromeLookModels, planSiteStylePreviewChange, markApplyFailed, markApplySaved, markApplySaving, previewHeaderStyle, previewHeaderLayout, previewFooterLook, cycleSiteChromeLookId, usePreviewThemeOverlay, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, planSiteChromeLookSelection, usePreviewBlockCustomizeSelectionOptional, useBlockCustomizeControls, MAX_CUSTOMIZE_POPOVER_ROWS, MAX_QUICK_MANIFEST_FIELDS, sanitizeDashboardPath } from './chunk-5NZGBSJF.mjs';
-import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-HTB4BMKD.mjs';
-import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, useEditorUiStore, ResizableSplitPane, BlockApiProvider, EditorProvider, MediaEditorProvider, getCuratedSiteStyle, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, useEditorUiStoreInstance, surfaceResolutionContextFromTheme, unsafeAsEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, planSiteDocument, ThemeScope, FixedBottomSurface, Button, unwrapResponse, X, ChevronLeft, ChevronRight, RotateCcw, parseBackgroundOverrideFromContent, rankBackgroundImagePoolItems, imagePoolForOverride, resolveBackgroundCapability, enabledBackgroundModes, FormRenderer, 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, backgroundColorTokens, Image, useMediaEditorOptional, defaultBackgroundOverrideForMode, Upload, MediaEditor, visibleHeaderClearancePx, systemCustomizeFacetNextValue, planBackgroundTransition, GRADIENT_PRESETS, gradientToCss, parseMediaAssetId, planBackgroundOverride, EDITABLE_SURFACE_FORWARDING_PROP, assertNever, SITE_CHROME_VISIBLE_HEADER_SELECTOR } from './chunk-GYXKAUFV.mjs';
-import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-BBLZSQEY.mjs';
-import React9, { createContext, useMemo, useState, useEffect, useRef, useCallback, useId, useReducer, Children, isValidElement, Fragment as Fragment$1, cloneElement, useContext } from 'react';
+import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-4T5JIPWY.mjs';
+import { PreviewBlockCustomizeSelectionProvider, resolveSiteStyleAccess, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, usePreviewBlockCustomizeSelectionOptional, useBlockCustomizeControls, MAX_CUSTOMIZE_POPOVER_ROWS, MAX_QUICK_MANIFEST_FIELDS, sanitizeDashboardPath } from './chunk-3QWQ2MUQ.mjs';
+import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState } from './chunk-3VT7LZY2.mjs';
+import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, useEditorUiStore, PreviewThemeOverlayProvider, PreviewDesignCoordinatorProvider, SiteChromeCustomizeProvider, ResizableSplitPane, BlockApiProvider, EditorProvider, PreviewDesignHistoryOrderProvider, MediaEditorProvider, useEditorUiStoreInstance, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, surfaceResolutionContextFromTheme, unsafeAsEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, usePreviewThemeOverlay, planSiteDocument, ThemeScope, FixedBottomSurface, Button, sectionTransitionVariantForBoundaryOptionId, sectionTransitionFamilyForBoundaryOptionId, sectionTransitionFamilies, X, defaultSectionTransitionVariantForFamily, RotateCcw, parseBackgroundOverrideFromContent, rankBackgroundImagePoolItems, imagePoolForOverride, resolveBackgroundCapability, enabledBackgroundModes, FormRenderer, stableSerialize, prefetchBlockData, isSupportedLoaderEndpoint, 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, backgroundColorTokens, ChevronLeft, ChevronRight, createMicrobatcher, unwrapResponse, normalizePublicApiLoaderParams, visibleHeaderClearancePx, LINKED_CONTENT_ENTRY_META_KEY, unsafeAsLinkedContentEntryId, useMediaEditorOptional, Image, defaultBackgroundOverrideForMode, decodePublicProductCategorySelectorQuery, EDITABLE_SURFACE_FORWARDING_PROP, useSiteChromeCustomizeOptional, assertNever, SITE_CHROME_VISIBLE_HEADER_SELECTOR, GRADIENT_PRESETS, resolveImageUrlWithContext, gradientToCss, Upload, MediaEditor, SECTION_BACKGROUND_MIN_SOURCE_WIDTH, SECTION_BACKGROUND_MIN_SOURCE_HEIGHT, parseMediaAssetId, planBackgroundOverride, planBackgroundTransition, systemCustomizeFacetNextValue } from './chunk-WUHKQBB6.mjs';
+import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken } from './chunk-E3NZYEKF.mjs';
+import React10, { 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';
+import { createPortal } from 'react-dom';
 
 // ../preview-next/src/client/utils/path.ts
 var PATH_SEPARATOR_REGEX = /\./g;
@@ -252,12 +253,90 @@ function blockHasPreviewContentFieldProjection(blockId, projections) {
   );
 }
 
+// ../preview-next/src/client/blocks/linkedEntryRenderOverlay.ts
+function applyLinkedEntryRenderOverlay(value, overlays) {
+  if (overlays.size === 0) return value;
+  return overlayValue(value, overlays);
+}
+function applyLinkedEntryRenderOverlayToDataContext(dataContext, overlays) {
+  if (!dataContext?.resolvedData || overlays.size === 0) {
+    return dataContext;
+  }
+  const resolvedData = applyLinkedEntryRenderOverlay(
+    dataContext.resolvedData,
+    overlays
+  );
+  if (resolvedData === dataContext.resolvedData) {
+    return dataContext;
+  }
+  return {
+    ...dataContext,
+    resolvedData
+  };
+}
+function overlayValue(value, overlays) {
+  if (Array.isArray(value)) {
+    let changed2 = false;
+    const next2 = value.map((item) => {
+      const overlaid = overlayValue(item, overlays);
+      if (overlaid !== item) changed2 = true;
+      return overlaid;
+    });
+    return changed2 ? next2 : value;
+  }
+  if (!isRecord3(value)) return value;
+  const meta = parseLinkedEntryMeta(value[LINKED_CONTENT_ENTRY_META_KEY]);
+  if (meta) {
+    const overlay = overlays.get(unsafeAsLinkedContentEntryId(meta.entryId));
+    if (overlay) {
+      const title = resolveOverlayTitle(overlay.content, meta);
+      return {
+        ...value,
+        title,
+        content: overlay.content,
+        optimisticHash: overlay.optimisticHash,
+        [LINKED_CONTENT_ENTRY_META_KEY]: {
+          ...meta,
+          title,
+          optimisticHash: overlay.optimisticHash
+        }
+      };
+    }
+  }
+  let changed = false;
+  const next = {};
+  for (const [key, child] of Object.entries(value)) {
+    const overlaid = overlayValue(child, overlays);
+    if (overlaid !== child) changed = true;
+    next[key] = overlaid;
+  }
+  return changed ? next : value;
+}
+function resolveOverlayTitle(content, meta) {
+  const titleField = meta.contentType.titleField;
+  if (titleField) {
+    const value = content[titleField];
+    if (typeof value === "string" && value.trim().length > 0) {
+      return value;
+    }
+  }
+  return meta.title;
+}
+function parseLinkedEntryMeta(value) {
+  if (!isRecord3(value)) return null;
+  return value.kind === "linked-content-entry" && typeof value.entryId === "string" ? value : null;
+}
+function isRecord3(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
 // ../preview-next/src/client/blocks/composer/mergeDrafts.ts
+var EMPTY_LINKED_ENTRY_OVERLAY = /* @__PURE__ */ new Map();
 function getDraftSnapshots(uiStore) {
   const snapshots = uiStore.getState().drafts.inspect();
   return new Map(snapshots.map((snap) => [snap.id, snap]));
 }
-function mergeBlockWithDraft(block, draftMap, index, projections = []) {
+function mergeBlockWithDraft(block, draftMap, index, projections = [], linkedEntryOverlays = EMPTY_LINKED_ENTRY_OVERLAY) {
   const id = block.id ?? null;
   const editorBlockId = id ? unsafeAsEditorBlockId(id) : null;
   const snap = editorBlockId ? draftMap.get(editorBlockId) ?? null : null;
@@ -269,20 +348,22 @@ function mergeBlockWithDraft(block, draftMap, index, projections = []) {
     kind: block.kind,
     purpose: "content",
     orderIndex: block.orderIndex ?? index,
-    content: renderContent(block, baseline, projections),
-    draftContent: renderContent(block, draftContent, projections),
+    content: renderContent(block, baseline, projections, linkedEntryOverlays),
+    draftContent: renderContent(block, draftContent, projections, linkedEntryOverlays),
     publishedContent: renderContent(
       block,
       block.publishedContent ?? null,
-      projections
+      projections,
+      EMPTY_LINKED_ENTRY_OVERLAY
     ),
     bindings: block.bindings ?? null
   };
 }
-function renderContent(block, content, projections) {
+function renderContent(block, content, projections, linkedEntryOverlays) {
+  const overlaidContent = applyLinkedEntryRenderOverlay(content, linkedEntryOverlays);
   return applyPreviewRuntimeContentProjections(
     block,
-    content,
+    overlaidContent,
     projections
   );
 }
@@ -333,18 +414,20 @@ function composePageFromBlocks(args, cacheRef) {
   const aiProjections = previewProjectionsFromAiOverlays(
     uiStore.getState().aiOverlays
   );
+  const linkedEntryOverlays = getLinkedEntryRenderOverlays(uiStore);
   return composePreviewRenderPage(
     {
       page,
       blockItems,
       draftSnapshots: Array.from(draftMap.values()),
-      projections: [...aiProjections, ...projections]
+      projections: [...aiProjections, ...projections],
+      linkedEntryOverlays
     },
     cacheRef
   );
 }
 function composePreviewRenderPage(args, cacheRef) {
-  const { page, blockItems, draftSnapshots, projections } = args;
+  const { page, blockItems, draftSnapshots, projections, linkedEntryOverlays } = args;
   if (!page) return page;
   if (!blockItems.length) return page;
   const draftMap = draftSnapshotMap(draftSnapshots);
@@ -353,7 +436,7 @@ function composePreviewRenderPage(args, cacheRef) {
     projections
   );
   const enrichedBlocks = projectedBlockItems.map(
-    (block, index) => mergeBlockWithDraft(block, draftMap, index, projections)
+    (block, index) => mergeBlockWithDraft(block, draftMap, index, projections, linkedEntryOverlays)
   );
   const sortedBlocks = [...enrichedBlocks].sort(
     (a, b) => (a.orderIndex ?? 0) - (b.orderIndex ?? 0)
@@ -361,9 +444,35 @@ function composePreviewRenderPage(args, cacheRef) {
   const renderedBlocks = applyCacheOptimization(sortedBlocks, cacheRef);
   return { ...page, blocks: renderedBlocks };
 }
+function getLinkedEntryRenderOverlays(uiStore) {
+  const linkedEntries = uiStore.getState().linkedEntries.inspect();
+  const overlays = /* @__PURE__ */ new Map();
+  for (const linkedEntry of linkedEntries) {
+    const content = linkedEntry.current ?? linkedEntry.baseline;
+    if (!content) continue;
+    overlays.set(linkedEntry.meta.entryId, {
+      content,
+      optimisticHash: linkedEntry.meta.optimisticHash
+    });
+  }
+  return overlays;
+}
 function draftSnapshotMap(snapshots) {
   return new Map(snapshots.map((snap) => [snap.id, snap]));
 }
+
+// ../preview-next/src/client/preview/linkedEntryEditEvents.ts
+var LINKED_ENTRY_EDIT_EVENT = "riverbank:preview:linked-entry-edit";
+function dispatchLinkedEntryEditEvent(target) {
+  window.dispatchEvent(new CustomEvent(LINKED_ENTRY_EDIT_EVENT, {
+    detail: target
+  }));
+}
+function isLinkedEntryEditEvent(event) {
+  if (!(event instanceof CustomEvent)) return false;
+  const detail = event.detail;
+  return Boolean(detail) && typeof detail === "object" && detail.kind === "linked-content-entry";
+}
 function requireClientRegistryComponent(key) {
   const component = clientComponentRegistry[key];
   if (!component) {
@@ -388,6 +497,37 @@ var RichTextWithEditor = ({ value, path, ...rest }) => {
   }
   return /* @__PURE__ */ jsx(RichText, { ...rest, path, doc: value });
 };
+var LinkedEntryEditFrame = ({ target, children }) => {
+  const { isEditingMode } = useEditor();
+  if (!isEditingMode) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group/linked-entry-edit relative",
+      "data-linked-entry-id": target.entryId,
+      "data-linked-entry-type": target.contentTypeKey,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Edit ${target.contentTypeLabel}: ${target.title}`,
+            className: "absolute right-2 top-2 z-20 rounded-full border border-white/80 bg-neutral-950/85 px-3 py-1 text-xs font-medium text-white opacity-0 shadow-sm transition focus:opacity-100 group-hover/linked-entry-edit:opacity-100",
+            onClick: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              dispatchLinkedEntryEditEvent(target);
+            },
+            children: "Edit"
+          }
+        )
+      ]
+    }
+  );
+};
 var ButtonWithEditorInterception = (props) => {
   const { isEditingMode } = useEditor();
   if (!isEditingMode) {
@@ -411,14 +551,599 @@ var editorRegistry = {
   text: TextWithEditor,
   richText: RichTextWithEditor,
   button: ButtonWithEditorInterception,
-  media: requireClientRegistryComponent("media")
+  media: requireClientRegistryComponent("media"),
+  linkedEntryEditFrame: LinkedEntryEditFrame
 };
 
+// ../preview-next/src/client/preview/previewChromePlacement.ts
+var PREVIEW_CHROME_EDGE_OFFSET_PX = 8;
+var DEFAULT_PREVIEW_CHROME_FLOATING_PLACEMENT = Object.freeze({
+  kind: "anchor-top-right",
+  topPx: PREVIEW_CHROME_EDGE_OFFSET_PX,
+  rightPx: PREVIEW_CHROME_EDGE_OFFSET_PX
+});
+function headerClearanceFromPx(px) {
+  return Number.isFinite(px) && px > 0 ? { kind: "overlay", px: Math.ceil(px) } : { kind: "none" };
+}
+function findFirstEditableContentBlockIndex(blocks) {
+  const index = blocks.findIndex((block) => block.kind !== "block.site-header");
+  return index >= 0 ? index : null;
+}
+function blockReceivesHeaderClearance(blocks, blockIndex) {
+  return findFirstEditableContentBlockIndex(blocks) === blockIndex;
+}
+function planBlockToolbarPlacement(input) {
+  if (input.headerClearance.kind === "overlay" && blockReceivesHeaderClearance(input.blocks, input.blockIndex)) {
+    return {
+      kind: "anchor-top-right",
+      topPx: input.headerClearance.px + PREVIEW_CHROME_EDGE_OFFSET_PX,
+      rightPx: PREVIEW_CHROME_EDGE_OFFSET_PX
+    };
+  }
+  return {
+    kind: "anchor-top-right",
+    topPx: PREVIEW_CHROME_EDGE_OFFSET_PX,
+    rightPx: PREVIEW_CHROME_EDGE_OFFSET_PX
+  };
+}
+function planSiteChromeCustomizePlacement(input) {
+  if (input.surface === "header" && !isUsableAnchorBox(input.anchorBox)) {
+    return {
+      kind: "viewport-top-right",
+      topPx: PREVIEW_CHROME_EDGE_OFFSET_PX * 2,
+      rightPx: PREVIEW_CHROME_EDGE_OFFSET_PX * 2
+    };
+  }
+  return {
+    kind: "anchor-top-right",
+    topPx: PREVIEW_CHROME_EDGE_OFFSET_PX,
+    rightPx: PREVIEW_CHROME_EDGE_OFFSET_PX
+  };
+}
+function resolvePreviewChromeFloatingPosition(input) {
+  if (input.placement.kind === "viewport-top-right") {
+    return {
+      topPx: input.placement.topPx,
+      rightPx: input.placement.rightPx
+    };
+  }
+  const anchorBox = input.anchorBox;
+  if (!isUsableAnchorBox(anchorBox)) {
+    return {
+      topPx: input.placement.topPx,
+      rightPx: input.placement.rightPx
+    };
+  }
+  return {
+    topPx: Math.max(
+      PREVIEW_CHROME_EDGE_OFFSET_PX,
+      anchorBox.top - (input.containerTopEdgePx ?? 0) + input.placement.topPx
+    ),
+    rightPx: Math.max(
+      PREVIEW_CHROME_EDGE_OFFSET_PX,
+      input.containerRightEdgePx - anchorBox.right + input.placement.rightPx
+    )
+  };
+}
+function isUsableAnchorBox(box) {
+  return Boolean(
+    box && Number.isFinite(box.top) && Number.isFinite(box.right) && Number.isFinite(box.bottom) && Number.isFinite(box.height) && box.height > 0
+  );
+}
+var PreviewChromeLayerContext = createContext(null);
+function PreviewChromeLayerProvider({
+  children
+}) {
+  const [portalTarget, setPortalTarget] = useState(null);
+  const listenersRef = useRef(/* @__PURE__ */ new Set());
+  const notifyLayout = useCallback(() => {
+    listenersRef.current.forEach((listener) => listener());
+  }, []);
+  const subscribeLayout = useCallback((listener) => {
+    listenersRef.current.add(listener);
+    return () => {
+      listenersRef.current.delete(listener);
+    };
+  }, []);
+  useEffect(() => {
+    let frame = null;
+    const scheduleNotify = () => {
+      if (frame !== null) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        notifyLayout();
+      });
+    };
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(scheduleNotify) : null;
+    mutationObserver?.observe(document.body, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+    window.addEventListener("resize", scheduleNotify);
+    window.addEventListener("scroll", scheduleNotify, true);
+    return () => {
+      if (frame !== null) {
+        window.cancelAnimationFrame(frame);
+      }
+      mutationObserver?.disconnect();
+      window.removeEventListener("resize", scheduleNotify);
+      window.removeEventListener("scroll", scheduleNotify, true);
+    };
+  }, [notifyLayout]);
+  const value = useMemo(
+    () => ({ portalTarget, subscribeLayout }),
+    [portalTarget, subscribeLayout]
+  );
+  return /* @__PURE__ */ jsxs(PreviewChromeLayerContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setPortalTarget,
+        className: "pointer-events-none fixed inset-0 z-[70]",
+        "data-preview-chrome-layer": ""
+      }
+    )
+  ] });
+}
+function usePreviewChromeLayerOptional() {
+  return useContext(PreviewChromeLayerContext);
+}
+function PreviewChromeFloatingControl({
+  anchorSelector,
+  placement,
+  fallbackClassName,
+  fallbackStyle,
+  portalClassName = "absolute z-[70] flex gap-1 transition",
+  forceVisible = false,
+  children
+}) {
+  const layer = usePreviewChromeLayerOptional();
+  const probeRef = useRef(null);
+  const anchorElementRef = useRef(null);
+  const [controlElement, setControlElement] = useState(
+    null
+  );
+  const [anchorElement, setAnchorElement] = useState(null);
+  const [anchorBox, setAnchorBox] = useState(
+    null
+  );
+  const [themeCustomProperties, setThemeCustomProperties] = useState({});
+  const [isActive, setIsActive] = useState(false);
+  const hoverStateRef = useRef({ anchor: false, control: false });
+  useEffect(() => {
+    if (!layer?.portalTarget) return;
+    let resizeObserver = null;
+    const readAnchor = () => probeRef.current?.closest(anchorSelector);
+    const update = () => {
+      const anchor = readAnchor();
+      if (anchor !== anchorElementRef.current) {
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+        anchorElementRef.current = anchor;
+        setAnchorElement(anchor);
+        if (anchor && typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(update);
+          resizeObserver.observe(anchor);
+        }
+      }
+      if (!anchor) {
+        setAnchorBox(null);
+        setThemeCustomProperties({});
+        return;
+      }
+      const rect = anchor.getBoundingClientRect();
+      setThemeCustomProperties(readThemeCustomProperties(anchor));
+      setAnchorBox({
+        top: rect.top,
+        right: rect.right,
+        bottom: rect.bottom,
+        height: rect.height
+      });
+    };
+    update();
+    const unsubscribe = layer.subscribeLayout(update);
+    return () => {
+      resizeObserver?.disconnect();
+      anchorElementRef.current = null;
+      unsubscribe();
+    };
+  }, [anchorSelector, layer]);
+  useEffect(() => {
+    if (!anchorElement || !controlElement) return;
+    hoverStateRef.current = { anchor: false, control: false };
+    const show = (event) => {
+      updatePreviewChromeHoverState(
+        hoverStateRef.current,
+        event.currentTarget,
+        anchorElement,
+        controlElement,
+        true
+      );
+      setIsActive(true);
+    };
+    const hideIfFocusLeft = (event) => {
+      updatePreviewChromeHoverState(
+        hoverStateRef.current,
+        event.currentTarget,
+        anchorElement,
+        controlElement,
+        false
+      );
+      window.setTimeout(() => {
+        const active = document.activeElement;
+        const hoverState = hoverStateRef.current;
+        const nextIsActive = Boolean(
+          hoverState.anchor || hoverState.control || active && (anchorElement.contains(active) || controlElement.contains(active))
+        );
+        setIsActive(nextIsActive);
+      }, 0);
+    };
+    anchorElement.addEventListener("mouseenter", show);
+    anchorElement.addEventListener("mouseleave", hideIfFocusLeft);
+    anchorElement.addEventListener("focusin", show);
+    anchorElement.addEventListener("focusout", hideIfFocusLeft);
+    controlElement.addEventListener("mouseenter", show);
+    controlElement.addEventListener("mouseleave", hideIfFocusLeft);
+    controlElement.addEventListener("focusin", show);
+    controlElement.addEventListener("focusout", hideIfFocusLeft);
+    return () => {
+      anchorElement.removeEventListener("mouseenter", show);
+      anchorElement.removeEventListener("mouseleave", hideIfFocusLeft);
+      anchorElement.removeEventListener("focusin", show);
+      anchorElement.removeEventListener("focusout", hideIfFocusLeft);
+      controlElement.removeEventListener("mouseenter", show);
+      controlElement.removeEventListener("mouseleave", hideIfFocusLeft);
+      controlElement.removeEventListener("focusin", show);
+      controlElement.removeEventListener("focusout", hideIfFocusLeft);
+    };
+  }, [anchorElement, controlElement]);
+  if (!layer?.portalTarget) {
+    return /* @__PURE__ */ jsx("div", { className: fallbackClassName, style: fallbackStyle, children });
+  }
+  const resolvedPlacement = typeof placement === "function" ? placement(anchorBox) : placement;
+  const position = resolvePreviewChromeFloatingPosition({
+    anchorBox,
+    containerTopEdgePx: resolvePortalTopEdgePx(layer.portalTarget),
+    containerRightEdgePx: resolvePortalRightEdgePx(layer.portalTarget),
+    placement: resolvedPlacement
+  });
+  const isVisible = forceVisible || isActive;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: probeRef, "aria-hidden": "true", style: { display: "contents" } }),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setControlElement,
+          className: joinClassNames(
+            portalClassName,
+            isVisible ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+          ),
+          style: {
+            ...themeCustomProperties,
+            top: position.topPx,
+            right: position.rightPx
+          },
+          children
+        }
+      ),
+      layer.portalTarget
+    )
+  ] });
+}
+function readThemeCustomProperties(element) {
+  if (typeof window === "undefined") return {};
+  const computedStyle = window.getComputedStyle(element);
+  const properties = {};
+  copyThemeCustomProperties(computedStyle, properties);
+  for (let current = element; current; current = current.parentElement) {
+    copyThemeCustomProperties(current.style, properties);
+  }
+  return properties;
+}
+function copyThemeCustomProperties(style, target) {
+  for (let index = 0; index < style.length; index += 1) {
+    const propertyName = style.item(index);
+    if (!propertyName.startsWith("--tb-")) continue;
+    const propertyValue = style.getPropertyValue(propertyName).trim();
+    if (propertyValue.length > 0 && target[propertyName] === void 0) {
+      target[propertyName] = propertyValue;
+    }
+  }
+}
+function resolvePortalRightEdgePx(portalTarget) {
+  const rect = portalTarget.getBoundingClientRect();
+  if (Number.isFinite(rect.right) && rect.right > 0) {
+    return rect.right;
+  }
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  return window.innerWidth;
+}
+function resolvePortalTopEdgePx(portalTarget) {
+  const rect = portalTarget.getBoundingClientRect();
+  return Number.isFinite(rect.top) ? rect.top : 0;
+}
+function joinClassNames(...values) {
+  const className = values.filter(Boolean).join(" ");
+  return className.length > 0 ? className : void 0;
+}
+function updatePreviewChromeHoverState(hoverState, currentTarget, anchorElement, controlElement, value) {
+  if (currentTarget === anchorElement) {
+    hoverState.anchor = value;
+  } else if (currentTarget === controlElement) {
+    hoverState.control = value;
+  }
+}
+function useDialogFocusTrap(input) {
+  const { open, onClose } = input;
+  const dialogRef = useRef(null);
+  const initialFocusRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  useEffect(() => {
+    if (open) {
+      initialFocusRef.current?.focus();
+      return;
+    }
+    const returnFocusTarget = returnFocusRef.current;
+    returnFocusRef.current = null;
+    returnFocusTarget?.focus();
+  }, [open]);
+  const registerInitialFocus = useCallback((node) => {
+    initialFocusRef.current = node;
+  }, []);
+  const setReturnFocusTarget = useCallback((node) => {
+    returnFocusRef.current = node;
+  }, []);
+  const handleDialogKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusableElements = focusableElementsIn(dialogRef.current);
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (!firstElement || !lastElement) return;
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+        return;
+      }
+      if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    },
+    [onClose]
+  );
+  return {
+    dialogRef,
+    registerInitialFocus,
+    setReturnFocusTarget,
+    handleDialogKeyDown
+  };
+}
+function focusableElementsIn(root) {
+  if (!root) return [];
+  return Array.from(
+    root.querySelectorAll(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true");
+}
+
 // ../preview-next/src/client/preview/previewCustomizeControlStyles.ts
 var previewCustomizePillButtonClassName = "rounded-full bg-black/80 px-2.5 py-1 text-xs text-white shadow hover:bg-black";
+function useCustomizePopoverController() {
+  const panelId = useId();
+  const descriptionId = `${panelId}-description`;
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const {
+    dialogRef,
+    registerInitialFocus,
+    setReturnFocusTarget,
+    handleDialogKeyDown
+  } = useDialogFocusTrap({
+    open,
+    onClose: close
+  });
+  const toggle = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!open) {
+        setReturnFocusTarget(
+          event.currentTarget instanceof HTMLElement ? event.currentTarget : buttonRef.current
+        );
+      }
+      setOpen((current) => !current);
+    },
+    [open, setReturnFocusTarget]
+  );
+  return {
+    open,
+    close,
+    toggle,
+    buttonRef,
+    panelId,
+    descriptionId,
+    dialogRef,
+    registerInitialFocus,
+    handleDialogKeyDown
+  };
+}
+function CustomizePillButton({
+  buttonRef,
+  ariaLabel,
+  open,
+  controlsId,
+  onClick,
+  disabled = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: buttonRef,
+      type: "button",
+      onClick,
+      className: previewCustomizePillButtonClassName,
+      "aria-label": ariaLabel,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? controlsId : void 0,
+      disabled,
+      children: "Customize"
+    }
+  );
+}
+function CustomizePopoverShell({
+  panelId,
+  descriptionId,
+  dialogLabel,
+  eyebrow,
+  title,
+  dialogRef,
+  closeButtonRef,
+  onClose,
+  onKeyDown,
+  spacing = "normal",
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: panelId,
+      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": dialogLabel,
+      "aria-describedby": descriptionId,
+      ref: dialogRef,
+      onKeyDown,
+      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: eyebrow }),
+            /* @__PURE__ */ jsx("div", { id: descriptionId, className: "text-sm font-semibold", children: title })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeButtonRef,
+              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();
+                onClose();
+              },
+              children: "Close"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: spacing === "compact" ? "space-y-2" : "space-y-3", children })
+      ]
+    }
+  );
+}
+function CustomizeCycleRow({
+  label,
+  valueLabel,
+  previousLabel,
+  nextLabel,
+  availability,
+  onPrevious,
+  onNext
+}) {
+  const reasonId = useId();
+  const disabled = availability.kind === "unavailable";
+  const unavailableReason = availability.kind === "unavailable" ? cycleUnavailableReasonLabel(availability.reason) : null;
+  return /* @__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: label }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: valueLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
+      unavailableReason ? /* @__PURE__ */ jsx("span", { id: reasonId, className: "sr-only", children: unavailableReason }) : null,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onPrevious();
+          },
+          className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-label": previousLabel,
+          "aria-describedby": unavailableReason ? reasonId : void 0,
+          title: unavailableReason ?? void 0,
+          disabled,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onNext();
+          },
+          className: "grid h-8 w-8 place-items-center border-l hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-label": nextLabel,
+          "aria-describedby": unavailableReason ? reasonId : void 0,
+          title: unavailableReason ?? void 0,
+          disabled,
+          children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+        }
+      )
+    ] })
+  ] });
+}
+function cycleAvailability(input) {
+  if (input.kind === "available") {
+    return input;
+  }
+  return { kind: "unavailable", reason: input.kind };
+}
+function cycleUnavailableReasonLabel(reason) {
+  if (reason === "preview-only") {
+    return "Preview-only users cannot change this control.";
+  }
+  if (reason === "single-option") {
+    return "There are no other options to cycle to.";
+  }
+  return reason;
+}
+function cycleAvailabilityFromFlags(input) {
+  if (!input.applyAllowed) {
+    return { kind: "unavailable", reason: "preview-only" };
+  }
+  if (!input.canCycle) {
+    return { kind: "unavailable", reason: "single-option" };
+  }
+  return { kind: "available" };
+}
 
 // ../preview-next/src/client/blocks/isRecord.ts
-function isRecord3(value) {
+function isRecord4(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
 }
 
@@ -484,35 +1209,18 @@ function setPageDesignBlockBackground(input) {
   });
   const plan = planBackgroundOverride(current, capability, input.override);
   if (plan.kind !== "apply") return null;
+  const imageAsset = plan.override.kind === "image" ? imagePoolAssetForMediaId(input.imagePool, plan.override.mediaId) : void 0;
   return {
     kind: "set-background",
     blockId: input.block.blockId,
     override: plan.override,
     fromOverride: plan.fromOverride,
-    baseContentId: input.block.contentRevision?.contentId ?? null
+    baseContentId: input.block.contentRevision?.contentId ?? null,
+    ...imageAsset ? { imageAsset } : {}
   };
 }
-function cyclePageDesignBoundaryBreak(boundary, direction) {
-  if (boundary.availableBreaks.length === 0) return null;
-  const breakIds = boundary.availableBreaks.map((option) => option.id);
-  const values = [null, ...breakIds];
-  const currentIndex = cycleChoiceIndex(boundary.breakChoice, values, direction);
-  if (currentIndex === -1) return null;
-  const nextIndex = direction === "next" ? (currentIndex + 1) % values.length : currentIndex === 0 ? values.length - 1 : currentIndex - 1;
-  const boundaryOptionId = values[nextIndex];
-  if (boundaryOptionId === void 0) return null;
-  return {
-    ...boundaryOptionId ? {
-      kind: "set-boundary",
-      previousBlockId: boundary.previousBlockId,
-      nextBlockId: boundary.nextBlockId,
-      boundaryOptionId
-    } : {
-      kind: "reset-boundary",
-      previousBlockId: boundary.previousBlockId,
-      nextBlockId: boundary.nextBlockId
-    }
-  };
+function imagePoolAssetForMediaId(imagePool, mediaId) {
+  return imagePool?.find((item) => item.mediaId === mediaId)?.mediaAsset;
 }
 function cycleChoiceIndex(choice, values, direction) {
   if (choice.kind === "user-pinned" && choice.status === "supported") {
@@ -543,68 +1251,37 @@ function previewCustomizeFacetControlsFor(blockKind, content, designBlock) {
     };
   });
 }
-function useDialogFocusTrap(input) {
-  const { open, onClose } = input;
-  const dialogRef = useRef(null);
-  const initialFocusRef = useRef(null);
-  const returnFocusRef = useRef(null);
-  useEffect(() => {
-    if (open) {
-      initialFocusRef.current?.focus();
-      return;
-    }
-    const returnFocusTarget = returnFocusRef.current;
-    returnFocusRef.current = null;
-    returnFocusTarget?.focus();
-  }, [open]);
-  const registerInitialFocus = useCallback((node) => {
-    initialFocusRef.current = node;
-  }, []);
-  const setReturnFocusTarget = useCallback((node) => {
-    returnFocusRef.current = node;
-  }, []);
-  const handleDialogKeyDown = useCallback(
-    (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      if (event.key !== "Tab") return;
-      const focusableElements = focusableElementsIn(dialogRef.current);
-      if (focusableElements.length === 0) {
-        event.preventDefault();
-        return;
-      }
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      if (!firstElement || !lastElement) return;
-      if (event.shiftKey && document.activeElement === firstElement) {
-        event.preventDefault();
-        lastElement.focus();
-        return;
-      }
-      if (!event.shiftKey && document.activeElement === lastElement) {
-        event.preventDefault();
-        firstElement.focus();
-      }
-    },
-    [onClose]
+
+// ../preview-next/src/client/blocks/blockCustomizePopoverRows.ts
+function buildBlockCustomizeBuiltinRows({
+  designBlock,
+  facetControls,
+  hasLayoutControls,
+  hasLookControls,
+  hasBackgroundControls
+}) {
+  const rows = [];
+  if (designBlock?.layout && hasLayoutControls) {
+    rows.push({ kind: "variant", block: designBlock });
+  }
+  if (designBlock?.layout?.status === "unsupported") {
+    rows.push({ kind: "unsupported-variant-warning" });
+  }
+  if (designBlock && hasLookControls) {
+    rows.push({ kind: "look", block: designBlock });
+  }
+  if (hasBackgroundControls) {
+    rows.push({ kind: "background" });
+  }
+  rows.push(
+    ...facetControls.map(
+      (control) => ({ kind: "facet", control })
+    )
   );
-  return {
-    dialogRef,
-    registerInitialFocus,
-    setReturnFocusTarget,
-    handleDialogKeyDown
-  };
+  return rows;
 }
-function focusableElementsIn(root) {
-  if (!root) return [];
-  return Array.from(
-    root.querySelectorAll(
-      'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    )
-  ).filter((element) => !element.hasAttribute("disabled") && element.getAttribute("aria-hidden") !== "true");
+function blockCustomizeBuiltinRowBudget(rows) {
+  return rows.length;
 }
 function isUnknownArray(value) {
   return Array.isArray(value);
@@ -614,7 +1291,7 @@ function BlockToolbar({
   blockKind,
   content,
   theme = null,
-  headerClearancePx = 0
+  placement = DEFAULT_PREVIEW_CHROME_FLOATING_PLACEMENT
 }) {
   const uiStore = useEditorUiStoreInstance();
   const editorBlockId = useMemo(() => unsafeAsEditorBlockId(blockId), [blockId]);
@@ -622,41 +1299,25 @@ function BlockToolbar({
     (state) => state.drafts.getCurrentValues(editorBlockId)
   );
   const customizeContent = useMemo(
-    () => isRecord3(draftContent) ? draftContent : content,
+    () => isRecord4(draftContent) ? draftContent : content,
     [content, draftContent]
   );
   const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
-  const customizePanelId = useId();
-  const customizeDescriptionId = `${customizePanelId}-description`;
+  const popover = useCustomizePopoverController();
   const focusTarget = useMemo(
     () => computeDefaultFocus(blockKind, customizeContent),
     [blockKind, customizeContent]
   );
-  const [customizeOpen, setCustomizeOpen] = useState(false);
   const [backgroundChooserOpen, setBackgroundChooserOpen] = useState(false);
   const [backgroundColorPalette, setBackgroundColorPalette] = useState(null);
-  const customizeButtonRef = useRef(null);
   const {
     state: pageDesignState,
     applyAction: applyPageDesignAction,
-    isHistoryPending,
     historyFailure,
     backgroundImagePool = [],
     backgroundImagePoolStatus = "idle",
     loadBackgroundImagePool = async () => []
   } = usePreviewPageDesignEditorState();
-  const closeCustomize = useCallback(() => {
-    setCustomizeOpen(false);
-  }, []);
-  const {
-    dialogRef: customizeDialogRef,
-    registerInitialFocus: registerCustomizeInitialFocus,
-    setReturnFocusTarget: setCustomizeReturnFocusTarget,
-    handleDialogKeyDown: handleCustomizeDialogKeyDown
-  } = useDialogFocusTrap({
-    open: customizeOpen,
-    onClose: closeCustomize
-  });
   const designBlock = useMemo(() => {
     if (pageDesignState.kind !== "loaded") return null;
     return pageDesignState.editorModel.blocks.find(
@@ -669,11 +1330,12 @@ function BlockToolbar({
   const hasLookControls = Boolean(
     designBlock && designBlock.availableLooks.length > 0
   );
-  const canCycleLook = Boolean(
-    designBlock && designBlock.availableLooks.length > 1
-  );
   const facetControls = useMemo(
-    () => previewCustomizeFacetControlsFor(blockKind, customizeContent, designBlock),
+    () => previewCustomizeFacetControlsFor(
+      blockKind,
+      customizeContent,
+      designBlock
+    ),
     [blockKind, customizeContent, designBlock]
   );
   const hasFacetControls = facetControls.length > 0;
@@ -690,6 +1352,26 @@ function BlockToolbar({
     ),
     [backgroundImagePool, currentBackground]
   );
+  const backgroundCycleImagePool = useMemo(
+    () => {
+      if (currentBackground.kind === "supported" && currentBackground.override.kind === "image") {
+        const currentOverride = currentBackground.override;
+        const currentExistsInPool = backgroundImagePool.some(
+          (item) => item.mediaId === currentOverride.mediaId
+        );
+        if (!currentExistsInPool) {
+          return rankBackgroundImagePoolItems(
+            dedupeBackgroundImagePool([
+              ...imagePoolForOverride(currentOverride),
+              ...backgroundImagePool
+            ])
+          );
+        }
+      }
+      return rankBackgroundImagePoolItems(backgroundImagePool);
+    },
+    [backgroundImagePool, currentBackground]
+  );
   const backgroundCapability = useMemo(
     () => designBlock ? resolveBackgroundCapability({
       block: designBlock,
@@ -698,14 +1380,34 @@ function BlockToolbar({
     }) : null,
     [backgroundColorPalette, designBlock, mergedBackgroundImagePool]
   );
+  const backgroundTransitionCapability = useMemo(
+    () => backgroundCapability ? { ...backgroundCapability, imagePool: backgroundCycleImagePool } : null,
+    [backgroundCapability, backgroundCycleImagePool]
+  );
   const enabledBackgroundModeList = useMemo(
     () => backgroundCapability ? enabledBackgroundModes(backgroundCapability) : [],
     [backgroundCapability]
   );
   const hasBackgroundControls = currentBackground.kind === "supported" && enabledBackgroundModeList.length > 1;
-  const builtInCustomizeRowCount = (hasLayoutControls ? 1 : 0) + facetControls.length + (hasBackgroundControls ? 1 : 0) + (hasLookControls ? 1 : 0);
+  const builtInCustomizeRows = useMemo(
+    () => buildBlockCustomizeBuiltinRows({
+      designBlock,
+      facetControls,
+      hasLayoutControls,
+      hasLookControls,
+      hasBackgroundControls
+    }),
+    [
+      designBlock,
+      facetControls,
+      hasBackgroundControls,
+      hasLayoutControls,
+      hasLookControls
+    ]
+  );
+  const builtInCustomizeRowCount = blockCustomizeBuiltinRowBudget(builtInCustomizeRows);
   const manifestCustomize = useBlockCustomizeControls({
-    blockId,
+    blockId: editorBlockId,
     blockKind,
     content: customizeContent,
     uiStore,
@@ -719,24 +1421,23 @@ function BlockToolbar({
   const hasOverflowCustomizeControls = manifestCustomize.hasOverflowControls;
   const quickManifestBackend = manifestCustomize.backend;
   const canCycleBackgroundMode = enabledBackgroundModeList.length > 1;
-  const canCycleBackgroundValue = currentBackground.kind === "supported" && backgroundCapability ? canCycleBackgroundOverrideValue(
+  const canCycleBackgroundValue = currentBackground.kind === "supported" && backgroundTransitionCapability ? canCycleBackgroundOverrideValue(
     currentBackground.override,
-    backgroundCapability
+    backgroundTransitionCapability
   ) : false;
   const hasCustomizeControls = hasLayoutControls || hasLookControls || hasFacetControls || hasBackgroundControls || quickManifestFields.length > 0 || hasSidebarCustomizeControls;
-  const isSavingCustomize = isHistoryPending;
   useEffect(() => {
     if (!hasCustomizeControls) {
-      setCustomizeOpen(false);
+      popover.close();
       setBackgroundChooserOpen(false);
     }
-  }, [hasCustomizeControls]);
+  }, [hasCustomizeControls, popover.close]);
   useEffect(() => {
-    if (!customizeOpen) return;
+    if (!popover.open) return;
     setBackgroundColorPalette(readBackgroundColorPaletteSnapshot());
-  }, [customizeOpen, pageDesignState]);
+  }, [pageDesignState, popover.open]);
   useEffect(() => {
-    if (!customizeOpen || !backgroundCapability?.modes.includes("image")) {
+    if (!popover.open || !backgroundCapability?.modes.includes("image")) {
       return;
     }
     if (backgroundImagePoolStatus !== "idle") return;
@@ -744,8 +1445,8 @@ function BlockToolbar({
   }, [
     backgroundCapability,
     backgroundImagePoolStatus,
-    customizeOpen,
-    loadBackgroundImagePool
+    loadBackgroundImagePool,
+    popover.open
   ]);
   const handleEdit = (e) => {
     e.preventDefault();
@@ -763,40 +1464,32 @@ function BlockToolbar({
   const inspectBlock = useCallback(() => {
     customizeSelection?.inspectBlock(unsafeAsEditorBlockId(blockId));
   }, [blockId, customizeSelection]);
-  const openCustomizeSettings = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    inspectBlock();
-    const state = uiStore.getState();
-    setPreviewSidebarTab("editor");
-    state.setPreviewSidebarTab("editor");
-    state.setDrawerOpen(true);
-  }, [inspectBlock, uiStore]);
-  const cycleLayout = (direction) => (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const openSidebarCustomize = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      inspectBlock();
+      const state = uiStore.getState();
+      setPreviewSidebarTab("editor");
+      state.setPreviewSidebarTab("editor");
+      state.setDrawerOpen(true);
+    },
+    [inspectBlock, uiStore]
+  );
+  const cycleLayout = (direction) => {
     if (!designBlock) return;
     const action = cyclePageDesignBlockLayout(designBlock, direction);
     if (!action) return;
     saveBlockCustomizeAction(action);
   };
-  const cycleLook = (direction) => (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const cycleLook = (direction) => {
     if (!designBlock) return;
     const action = cyclePageDesignBlockLook(designBlock, direction);
     if (!action) return;
     saveBlockCustomizeAction(action);
   };
-  const handleFacetCycle = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const cycleFacet = (control, direction) => {
     if (!designBlock) return;
-    const facetId = e.currentTarget.dataset.facetId;
-    const direction = e.currentTarget.dataset.direction;
-    if (direction !== "prev" && direction !== "next") return;
-    const control = facetControls.find((candidate) => candidate.facetId === facetId) ?? null;
-    if (!control) return;
     const action = cyclePageDesignBlockFacet({
       block: designBlock,
       facetId: control.facetId,
@@ -824,12 +1517,12 @@ function BlockToolbar({
     setBackgroundChooserOpen(false);
   };
   const saveBackgroundTransition = (transition) => {
-    if (!designBlock || !backgroundCapability || currentBackground.kind !== "supported") {
+    if (!designBlock || !backgroundTransitionCapability || currentBackground.kind !== "supported") {
       return;
     }
     const plan = planBackgroundTransition(
       currentBackground.override,
-      backgroundCapability,
+      backgroundTransitionCapability,
       transition
     );
     if (plan.kind !== "apply") return;
@@ -846,34 +1539,31 @@ function BlockToolbar({
     void applyPageDesignAction(action, { runtimeContent: customizeContent });
   };
   const toggleCustomize = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!customizeOpen) {
+    if (!popover.open) {
       inspectBlock();
-      setCustomizeReturnFocusTarget(
-        e.currentTarget instanceof HTMLElement ? e.currentTarget : customizeButtonRef.current
-      );
     }
-    setCustomizeOpen((open) => !open);
+    popover.toggle(e);
   };
   return /* @__PURE__ */ jsxs(
-    "div",
+    PreviewChromeFloatingControl,
     {
-      className: "pointer-events-auto absolute right-2 z-50 flex gap-1 opacity-0 transition group-focus-within:opacity-100 group-hover:opacity-100",
-      style: { top: headerClearancePx > 0 ? headerClearancePx + 8 : 8 },
+      anchorSelector: "[data-block-id]",
+      placement,
+      fallbackClassName: "pointer-events-auto absolute z-50 flex gap-1 opacity-0 transition group-focus-within:opacity-100 group-hover:opacity-100",
+      fallbackStyle: {
+        top: placement.topPx,
+        right: placement.rightPx
+      },
+      forceVisible: popover.open,
       children: [
         hasCustomizeControls ? /* @__PURE__ */ jsx(
-          "button",
+          CustomizePillButton,
           {
-            ref: customizeButtonRef,
-            type: "button",
-            onClick: toggleCustomize,
-            className: previewCustomizePillButtonClassName,
-            "aria-label": "Customize",
-            "aria-expanded": customizeOpen,
-            "aria-haspopup": "dialog",
-            "aria-controls": customizeOpen ? customizePanelId : void 0,
-            children: isSavingCustomize ? "Saving..." : "Customize"
+            buttonRef: popover.buttonRef,
+            ariaLabel: "Customize",
+            open: popover.open,
+            controlsId: popover.panelId,
+            onClick: toggleCustomize
           }
         ) : null,
         /* @__PURE__ */ jsx(
@@ -885,266 +1575,59 @@ function BlockToolbar({
             children: "Edit"
           }
         ),
-        customizeOpen && (designBlock || hasSidebarCustomizeControls) ? /* @__PURE__ */ jsxs(
-          "div",
+        popover.open && (designBlock || hasSidebarCustomizeControls) ? /* @__PURE__ */ jsxs(
+          CustomizePopoverShell,
           {
-            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 section",
-            "aria-describedby": customizeDescriptionId,
-            ref: customizeDialogRef,
-            onKeyDown: handleCustomizeDialogKeyDown,
-            onClick: (event) => event.stopPropagation(),
+            panelId: popover.panelId,
+            descriptionId: popover.descriptionId,
+            dialogLabel: "Customize section",
+            eyebrow: "Section",
+            title: formatBlockKindLabel(blockKind),
+            dialogRef: popover.dialogRef,
+            closeButtonRef: popover.registerInitialFocus,
+            onClose: popover.close,
+            onKeyDown: popover.handleDialogKeyDown,
+            spacing: "compact",
             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: "Section" }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      id: customizeDescriptionId,
-                      className: "text-sm font-semibold",
-                      children: formatBlockKindLabel(blockKind)
-                    }
-                  )
-                ] }),
-                /* @__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-2", children: [
-                designBlock?.layout && hasLayoutControls ? /* @__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: layoutLabel(
-                      designBlock.availableLayouts,
-                      designBlock.layout.effectiveValue
-                    ) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: cycleLayout("prev"),
-                        className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                        "aria-label": "Previous layout",
-                        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: cycleLayout("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 layout",
-                        children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-                      }
-                    )
-                  ] })
-                ] }) : null,
-                designBlock?.layout?.status === "unsupported" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700", children: "This layout is no longer available. The preview is using the closest safe option." }) : null,
-                facetControls.map((control) => /* @__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: control.label }),
-                        /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: control.valueLabel })
-                      ] }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: handleFacetCycle,
-                            "data-facet-id": control.facetId,
-                            "data-direction": "prev",
-                            className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                            "aria-label": `Previous ${control.label.toLowerCase()}`,
-                            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: handleFacetCycle,
-                            "data-facet-id": control.facetId,
-                            "data-direction": "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 ${control.label.toLowerCase()}`,
-                            children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-                          }
-                        )
-                      ] })
-                    ]
-                  },
-                  control.facetId
-                )),
-                hasBackgroundControls && currentBackground.kind === "supported" && backgroundCapability ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-stretch overflow-hidden rounded-full border bg-background", children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleBackgroundCycle({
-                          kind: "cycle-mode",
-                          direction: "prev"
-                        }),
-                        className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                        "aria-label": "Previous background mode",
-                        disabled: !canCycleBackgroundMode,
-                        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 border-x px-2 py-1 text-center", children: [
-                      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium leading-3 text-muted-foreground", children: "Background:" }),
-                      /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-semibold leading-4", children: backgroundModeLabel(currentBackground.override.kind) })
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleBackgroundCycle({
-                          kind: "cycle-mode",
-                          direction: "next"
-                        }),
-                        className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                        "aria-label": "Next background mode",
-                        disabled: !canCycleBackgroundMode,
-                        children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-stretch overflow-hidden rounded-full border bg-background", children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleBackgroundCycle({
-                          kind: "cycle-value",
-                          direction: "prev"
-                        }),
-                        className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                        "aria-label": "Previous background value",
-                        disabled: !canCycleBackgroundValue,
-                        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        className: "flex min-w-0 flex-1 items-center justify-center gap-2 border-x px-2 py-1 text-center hover:bg-muted",
-                        "aria-expanded": backgroundChooserOpen,
-                        "aria-label": `Choose background ${backgroundOverrideLabel(currentBackground.override).toLowerCase()}`,
-                        onClick: (event) => {
-                          event.preventDefault();
-                          event.stopPropagation();
-                          setBackgroundChooserOpen((open) => !open);
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(BackgroundPreviewSwatch, { override: currentBackground.override }),
-                          /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium", children: backgroundOverrideValueLabel(
-                            currentBackground.override,
-                            mergedBackgroundImagePool
-                          ) })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleBackgroundCycle({
-                          kind: "cycle-value",
-                          direction: "next"
-                        }),
-                        className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-                        "aria-label": "Next background value",
-                        disabled: !canCycleBackgroundValue,
-                        children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
-                      }
-                    )
-                  ] }),
-                  backgroundChooserOpen ? /* @__PURE__ */ jsx(
-                    BackgroundChooser,
-                    {
-                      capability: backgroundCapability,
-                      current: currentBackground.override,
-                      enabledModes: enabledBackgroundModeList,
-                      imagePoolStatus: backgroundImagePoolStatus,
-                      onChoose: chooseBackgroundOverride
-                    }
-                  ) : null
-                ] }) : null,
-                quickManifestFields.length > 0 && quickManifestBackend ? /* @__PURE__ */ jsx("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsx(
-                  FormRenderer,
-                  {
-                    fields: quickManifestFields,
-                    backend: quickManifestBackend,
-                    showSettingsTrigger: false,
-                    blockKind,
-                    className: "space-y-3"
-                  }
-                ) }) : null,
-                hasLookControls && designBlock ? /* @__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: lookLabel(designBlock) })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        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 })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        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 })
-                      }
-                    )
-                  ] })
-                ] }) : null,
-                historyFailure ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-700", children: historyFailure }) : null,
-                hasOverflowCustomizeControls ? /* @__PURE__ */ jsx("div", { className: "border-t pt-2", children: /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: "w-full rounded-md border bg-background px-3 py-2 text-sm font-medium hover:bg-muted",
-                    onClick: openCustomizeSettings,
-                    children: "Settings"
-                  }
-                ) }) : null
-              ] })
+              builtInCustomizeRows.map(
+                (row) => renderBlockCustomizeBuiltinRow(row, {
+                  backgroundCapability,
+                  backgroundChooserOpen,
+                  canCycleBackgroundMode,
+                  canCycleBackgroundValue,
+                  currentBackground,
+                  cycleLayout,
+                  cycleLook,
+                  cycleFacet,
+                  enabledBackgroundModeList,
+                  handleBackgroundCycle,
+                  imagePoolStatus: backgroundImagePoolStatus,
+                  mergedBackgroundImagePool,
+                  onChooseBackgroundOverride: chooseBackgroundOverride,
+                  onToggleBackgroundChooser: () => setBackgroundChooserOpen((open) => !open)
+                })
+              ),
+              quickManifestFields.length > 0 && quickManifestBackend ? /* @__PURE__ */ jsx("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsx(
+                FormRenderer,
+                {
+                  fields: quickManifestFields,
+                  backend: quickManifestBackend,
+                  showSettingsTrigger: false,
+                  blockKind,
+                  className: "space-y-3"
+                }
+              ) }) : null,
+              historyFailure ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-700", children: historyFailure }) : null,
+              hasOverflowCustomizeControls ? /* @__PURE__ */ jsx("div", { className: "border-t pt-2", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Open detailed customization settings",
+                  className: "w-full rounded-md border bg-background px-3 py-2 text-sm font-medium hover:bg-muted",
+                  onClick: openSidebarCustomize,
+                  children: "Customize"
+                }
+              ) }) : null
             ]
           }
         ) : null
@@ -1152,16 +1635,178 @@ function BlockToolbar({
     }
   );
 }
+function renderBlockCustomizeBuiltinRow(row, context) {
+  switch (row.kind) {
+    case "variant":
+      return /* @__PURE__ */ jsx(
+        CustomizeCycleRow,
+        {
+          label: "Variant",
+          valueLabel: layoutLabel(
+            row.block.availableLayouts,
+            row.block.layout?.effectiveValue ?? ""
+          ),
+          previousLabel: "Previous variant",
+          nextLabel: "Next variant",
+          availability: cycleAvailability({ kind: "available" }),
+          onPrevious: () => context.cycleLayout("prev"),
+          onNext: () => context.cycleLayout("next")
+        },
+        "variant"
+      );
+    case "unsupported-variant-warning":
+      return /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700", children: "This layout is no longer available. The preview is using the closest safe option." }, "unsupported-variant-warning");
+    case "look":
+      return /* @__PURE__ */ jsx(
+        CustomizeCycleRow,
+        {
+          label: "Look",
+          valueLabel: lookLabel(row.block),
+          previousLabel: "Previous look",
+          nextLabel: "Next look",
+          availability: cycleAvailability(
+            canCycleLookForRow(row.block) ? { kind: "available" } : { kind: "single-option" }
+          ),
+          onPrevious: () => context.cycleLook("prev"),
+          onNext: () => context.cycleLook("next")
+        },
+        "look"
+      );
+    case "background":
+      if (context.currentBackground.kind !== "supported" || !context.backgroundCapability) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch overflow-hidden rounded-full border bg-background", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: context.handleBackgroundCycle({
+                kind: "cycle-mode",
+                direction: "prev"
+              }),
+              className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Previous background mode",
+              disabled: !context.canCycleBackgroundMode,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 border-x px-2 py-1 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium leading-3 text-muted-foreground", children: "Background:" }),
+            /* @__PURE__ */ jsx("div", { className: "truncate text-xs font-semibold leading-4", children: backgroundModeLabel(context.currentBackground.override.kind) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: context.handleBackgroundCycle({
+                kind: "cycle-mode",
+                direction: "next"
+              }),
+              className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Next background mode",
+              disabled: !context.canCycleBackgroundMode,
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch overflow-hidden rounded-full border bg-background", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: context.handleBackgroundCycle({
+                kind: "cycle-value",
+                direction: "prev"
+              }),
+              className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Previous background value",
+              disabled: !context.canCycleBackgroundValue,
+              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex min-w-0 flex-1 items-center justify-center gap-2 border-x px-2 py-1 text-center hover:bg-muted",
+              "aria-expanded": context.backgroundChooserOpen,
+              "aria-label": `Choose background ${backgroundOverrideLabel(context.currentBackground.override).toLowerCase()}`,
+              onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                context.onToggleBackgroundChooser();
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  BackgroundPreviewSwatch,
+                  {
+                    override: context.currentBackground.override,
+                    imagePool: context.mergedBackgroundImagePool
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium", children: backgroundOverrideValueLabel(
+                  context.currentBackground.override,
+                  context.mergedBackgroundImagePool
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: context.handleBackgroundCycle({
+                kind: "cycle-value",
+                direction: "next"
+              }),
+              className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+              "aria-label": "Next background value",
+              disabled: !context.canCycleBackgroundValue,
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+            }
+          )
+        ] }),
+        context.backgroundChooserOpen ? /* @__PURE__ */ jsx(
+          BackgroundChooser,
+          {
+            capability: context.backgroundCapability,
+            current: context.currentBackground.override,
+            imagePoolStatus: context.imagePoolStatus,
+            onChoose: context.onChooseBackgroundOverride
+          }
+        ) : null
+      ] }, "background");
+    case "facet":
+      return /* @__PURE__ */ jsx(
+        CustomizeCycleRow,
+        {
+          label: row.control.label,
+          valueLabel: row.control.valueLabel,
+          previousLabel: `Previous ${row.control.label.toLowerCase()}`,
+          nextLabel: `Next ${row.control.label.toLowerCase()}`,
+          availability: cycleAvailability({ kind: "available" }),
+          onPrevious: () => context.cycleFacet(row.control, "prev"),
+          onNext: () => context.cycleFacet(row.control, "next")
+        },
+        `facet:${row.control.facetId}`
+      );
+    default:
+      return assertNever2(row, "Unhandled block customize builtin row");
+  }
+}
+function canCycleLookForRow(block) {
+  return block.availableLooks.length > 1;
+}
 function BackgroundChooser({
   capability,
   current,
-  enabledModes,
   imagePoolStatus,
   onChoose
 }) {
   const mediaEditorContext = useMediaEditorOptional();
   const [mediaPickerOpenKey, setMediaPickerOpenKey] = useState(0);
-  const enabledModeSet = new Set(enabledModes);
   const images = rankBackgroundImagePoolItems(capability.imagePool ?? []);
   const recommendedTokens = capability.recommendedColorTokens ?? capability.colorTokens ?? [];
   const advancedTokens = capability.advancedColorTokens ?? [];
@@ -1177,21 +1822,30 @@ function BackgroundChooser({
     onChoose({ kind: "image", mediaId: parsed.value });
     setMediaPickerOpenKey(0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2 max-h-80 overflow-y-auto rounded-md border bg-muted/20 p-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-2 grid grid-cols-4 gap-1", children: ["default", "color", "gradient", "image"].map((mode) => /* @__PURE__ */ jsx(
+  const renderColorOptions = () => recommendedTokens.length || advancedTokens.length ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Colors" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: recommendedTokens.map((token) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: `rounded-md border px-2 py-1 text-xs ${current.kind === mode ? "border-foreground bg-foreground text-background" : "bg-background hover:bg-muted"} disabled:cursor-not-allowed disabled:opacity-50`,
-        disabled: !enabledModeSet.has(mode),
-        onClick: chooseFromClick(defaultBackgroundOverrideForMode(mode, capability)),
-        children: backgroundModeLabel(mode)
+        className: `flex min-w-0 items-center gap-2 rounded-md border px-2 py-1 text-left text-xs hover:bg-muted ${current.kind === "color" && current.token === token ? "border-foreground" : "bg-background"}`,
+        onClick: chooseFromClick({ kind: "color", token }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-3 w-3 shrink-0 rounded-full border",
+              style: { backgroundColor: tokenSwatchCss(token) }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: formatTokenLabel(token) })
+        ]
       },
-      mode
+      token
     )) }),
-    recommendedTokens.length || advancedTokens.length ? /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Colors" }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: recommendedTokens.map((token) => /* @__PURE__ */ jsxs(
+    advancedTokens.length ? /* @__PURE__ */ jsxs("details", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "More colors" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 grid grid-cols-2 gap-1", children: advancedTokens.map((token) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -1209,78 +1863,72 @@ function BackgroundChooser({
           ]
         },
         token
-      )) }),
-      advancedTokens.length ? /* @__PURE__ */ jsxs("details", { className: "mt-1", children: [
-        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "More colors" }),
-        /* @__PURE__ */ jsx("div", { className: "mt-1 grid grid-cols-2 gap-1", children: advancedTokens.map((token) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: `flex min-w-0 items-center gap-2 rounded-md border px-2 py-1 text-left text-xs hover:bg-muted ${current.kind === "color" && current.token === token ? "border-foreground" : "bg-background"}`,
-            onClick: chooseFromClick({ kind: "color", token }),
-            children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "h-3 w-3 shrink-0 rounded-full border",
-                  style: { backgroundColor: tokenSwatchCss(token) }
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: formatTokenLabel(token) })
-            ]
-          },
-          token
-        )) })
-      ] }) : null
-    ] }) : null,
-    capability.gradientIds?.length ? /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Gradients" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: capability.gradientIds.map((gradientId) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `w-full rounded-md border px-2 py-1 text-left text-xs hover:bg-muted ${current.kind === "gradient" && current.gradientId === gradientId ? "border-foreground" : "bg-background"}`,
-          onClick: chooseFromClick({ kind: "gradient", gradientId }),
-          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "h-4 w-8 shrink-0 rounded border",
-                style: { backgroundImage: gradientPreviewCss(gradientId) }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: gradientLabel(gradientId) })
-          ] })
-        },
-        gradientId
       )) })
-    ] }) : null,
-    capability.modes.includes("image") ? /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Images" }),
-      mediaEditorContext ? /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "mb-2 inline-flex w-full items-center justify-center gap-2 rounded-md border bg-background px-2 py-1.5 text-xs font-medium hover:bg-muted",
-          onClick: (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            setMediaPickerOpenKey((key) => key + 1);
-          },
-          children: [
-            /* @__PURE__ */ jsx(Upload, { size: 13 }),
-            "Media library"
-          ]
-        }
-      ) : null,
-      images.length ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: images.map((item) => /* @__PURE__ */ jsx(
+    ] }) : null
+  ] }) : null;
+  const renderGradientOptions = () => capability.gradientIds?.length ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Gradients" }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: capability.gradientIds.map((gradientId) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `w-full rounded-md border px-2 py-1 text-left text-xs hover:bg-muted ${current.kind === "gradient" && current.gradientId === gradientId ? "border-foreground" : "bg-background"}`,
+        onClick: chooseFromClick({ kind: "gradient", gradientId }),
+        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-4 w-8 shrink-0 rounded border",
+              style: { backgroundImage: gradientPreviewCss(gradientId) }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: gradientLabel(gradientId) })
+        ] })
+      },
+      gradientId
+    )) })
+  ] }) : null;
+  const renderImageOptions = () => capability.modes.includes("image") ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Images" }),
+    mediaEditorContext ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "mb-2 inline-flex w-full items-center justify-center gap-2 rounded-md border bg-background px-2 py-1.5 text-xs font-medium hover:bg-muted",
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          setMediaPickerOpenKey((key) => key + 1);
+        },
+        children: [
+          /* @__PURE__ */ jsx(Upload, { size: 13 }),
+          "Media library"
+        ]
+      }
+    ) : null,
+    images.length ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: images.map((item) => {
+      const thumbnailUrl = backgroundImagePreviewUrl(
+        item,
+        mediaEditorContext
+      );
+      return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: `w-full rounded-md border px-2 py-1 text-left text-xs hover:bg-muted ${current.kind === "image" && current.mediaId === item.mediaId ? "border-foreground" : "bg-background"}`,
-          onClick: chooseFromClick({ kind: "image", mediaId: item.mediaId }),
+          onClick: chooseFromClick({
+            kind: "image",
+            mediaId: item.mediaId
+          }),
           children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "grid h-7 w-9 shrink-0 place-items-center rounded border bg-muted", children: /* @__PURE__ */ jsx(Image, { size: 14 }) }),
+            /* @__PURE__ */ jsx("span", { className: "grid h-7 w-9 shrink-0 place-items-center overflow-hidden rounded border bg-muted", children: thumbnailUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                alt: "",
+                className: "h-full w-full object-cover",
+                src: thumbnailUrl
+              }
+            ) : /* @__PURE__ */ jsx(Image, { size: 14 }) }),
             /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.label ?? "Image" }),
               /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: imageSourceLabel(item.source) })
@@ -1288,25 +1936,51 @@ function BackgroundChooser({
           ] })
         },
         `${item.source}:${item.mediaId}`
-      )) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: imagePoolStatus === "loading" ? "Loading images..." : "No images available yet." }),
-      mediaPickerOpenKey > 0 && mediaEditorContext ? /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(
-        MediaEditor,
-        {
-          value: void 0,
-          onChange: chooseMediaValue,
-          allowedKinds: ["image"],
-          mediaPickerAutoOpen: true,
-          showPreview: false,
-          showAltInput: false,
-          uploadIntent: { tag: "media-library", allowedRenderUses: ["image"] },
-          onUploadComplete: (asset) => {
-            onChoose({ kind: "image", mediaId: asset.id });
-            setMediaPickerOpenKey(0);
-          }
+      );
+    }) }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: imagePoolStatus === "loading" ? "Loading images..." : "No background-ready images yet." }),
+    mediaPickerOpenKey > 0 && mediaEditorContext ? /* @__PURE__ */ jsx("div", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(
+      MediaEditor,
+      {
+        value: void 0,
+        onChange: chooseMediaValue,
+        allowedKinds: ["image"],
+        mediaPickerAutoOpen: true,
+        mediaPickerPolicy: {
+          assetSelection: backgroundMediaPickerAssetSelection
         },
-        mediaPickerOpenKey
-      ) }) : null
-    ] }) : null
+        showPreview: false,
+        showAltInput: false,
+        uploadIntent: {
+          tag: "media-library",
+          allowedRenderUses: ["image"]
+        },
+        onUploadComplete: (asset) => {
+          if (backgroundMediaPickerAssetSelection(asset).tag === "disabled") {
+            return;
+          }
+          onChoose({ kind: "image", mediaId: asset.id });
+          setMediaPickerOpenKey(0);
+        }
+      },
+      mediaPickerOpenKey
+    ) }) : null
+  ] }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 max-h-80 overflow-y-auto rounded-md border bg-muted/20 p-2", children: [
+    current.kind === "default" ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center gap-2 rounded-md border border-foreground bg-background px-2 py-1 text-left text-xs",
+        onClick: chooseFromClick(defaultBackgroundOverrideForMode("default", capability)),
+        children: [
+          /* @__PURE__ */ jsx(BackgroundPreviewSwatch, { override: current, imagePool: images }),
+          /* @__PURE__ */ jsx("span", { children: "Default background" })
+        ]
+      }
+    ) : null,
+    current.kind === "color" ? renderColorOptions() : null,
+    current.kind === "gradient" ? renderGradientOptions() : null,
+    current.kind === "image" ? renderImageOptions() : null
   ] });
 }
 function computeDefaultFocus(blockKind, content) {
@@ -1331,7 +2005,7 @@ function findFirstFieldPath(fields, data, prefix) {
     }
     const nextPrefix = [...prefix, field.id];
     if (field.type === "group") {
-      const groupValue = isRecord3(data) ? data[field.id] : void 0;
+      const groupValue = isRecord4(data) ? data[field.id] : void 0;
       const nested = findFirstFieldPath(
         field.schema.fields,
         groupValue,
@@ -1341,7 +2015,7 @@ function findFirstFieldPath(fields, data, prefix) {
       continue;
     }
     if (field.type === "repeater" && field.schema) {
-      const collection = isRecord3(data) ? data[field.id] : void 0;
+      const collection = isRecord4(data) ? data[field.id] : void 0;
       const items = isUnknownArray(collection) ? collection : [];
       if (items.length > 0) {
         const firstItem = items[0];
@@ -1414,7 +2088,11 @@ function canCycleBackgroundOverrideValue(override, capability) {
       return rankBackgroundImagePoolItems(capability.imagePool ?? []).length > 1;
   }
 }
-function BackgroundPreviewSwatch({ override }) {
+function BackgroundPreviewSwatch({
+  override,
+  imagePool
+}) {
+  const mediaEditorContext = useMediaEditorOptional();
   const baseClassName = "grid h-6 w-9 shrink-0 place-items-center overflow-hidden rounded-md border";
   switch (override.kind) {
     case "default":
@@ -1436,8 +2114,47 @@ function BackgroundPreviewSwatch({ override }) {
         }
       );
     case "image":
-      return /* @__PURE__ */ jsx("span", { className: `${baseClassName} bg-muted`, children: /* @__PURE__ */ jsx(Image, { size: 15 }) });
+      const imageItem = imagePool.find((item) => item.mediaId === override.mediaId);
+      const thumbnailUrl = imageItem ? backgroundImagePreviewUrl(imageItem, mediaEditorContext) : void 0;
+      return /* @__PURE__ */ jsx("span", { className: `${baseClassName} bg-muted`, children: thumbnailUrl ? /* @__PURE__ */ jsx("img", { alt: "", className: "h-full w-full object-cover", src: thumbnailUrl }) : /* @__PURE__ */ jsx(Image, { size: 15 }) });
+  }
+}
+function backgroundImagePreviewUrl(item, mediaEditorContext) {
+  const asset = item.mediaAsset;
+  if (!asset) return void 0;
+  return resolveImageUrlWithContext(
+    {
+      type: "image",
+      assetId: asset.id,
+      ...asset.identifier ? { identifier: asset.identifier } : {},
+      storageBucket: asset.storageBucket,
+      storagePath: asset.storagePath,
+      ...asset.width != null ? { width: asset.width } : {},
+      ...asset.height != null ? { height: asset.height } : {},
+      mimeType: asset.mimeType
+    },
+    { width: 72, height: 48, resize: "cover", quality: 70 },
+    mediaEditorContext?.imageResolveContext ?? null
+  );
+}
+function backgroundMediaPickerAssetSelection(asset) {
+  if (isMarkedBackgroundAsset(asset)) return { tag: "selectable" };
+  if (asset.width == null || asset.height == null) {
+    return {
+      tag: "disabled",
+      reason: "This image is missing dimensions, so it cannot be checked for background use."
+    };
+  }
+  if (asset.width < SECTION_BACKGROUND_MIN_SOURCE_WIDTH || asset.height < SECTION_BACKGROUND_MIN_SOURCE_HEIGHT) {
+    return {
+      tag: "disabled",
+      reason: `Background images need to be at least ${SECTION_BACKGROUND_MIN_SOURCE_WIDTH}x${SECTION_BACKGROUND_MIN_SOURCE_HEIGHT}. This image is ${asset.width}x${asset.height}.`
+    };
   }
+  return { tag: "selectable" };
+}
+function isMarkedBackgroundAsset(asset) {
+  return asset.fileUses?.some((fileUse) => fileUse.tag === "site-background-asset") ?? false;
 }
 function backgroundModeLabel(mode) {
   return mode === "default" ? "Default" : formatVariantLabel(mode);
@@ -1461,7 +2178,9 @@ function tokenSwatchCss(token) {
   return `rgb(var(--tb-${token}))`;
 }
 function gradientPreviewCss(gradientId) {
-  const preset = GRADIENT_PRESETS.find((candidate) => candidate.id === gradientId);
+  const preset = GRADIENT_PRESETS.find(
+    (candidate) => candidate.id === gradientId
+  );
   if (!preset) {
     return "linear-gradient(135deg, rgb(var(--tb-primary)), rgb(var(--tb-secondary)))";
   }
@@ -1491,7 +2210,21 @@ function dedupeBackgroundImagePool(items) {
   const seen = /* @__PURE__ */ new Set();
   const deduped = [];
   for (const item of items) {
-    if (seen.has(item.mediaId)) continue;
+    if (seen.has(item.mediaId)) {
+      const existingIndex = deduped.findIndex(
+        (candidate) => candidate.mediaId === item.mediaId
+      );
+      const existing = deduped[existingIndex];
+      if (existing && !existing.mediaAsset && item.mediaAsset) {
+        deduped[existingIndex] = {
+          ...existing,
+          mediaAsset: item.mediaAsset,
+          label: existing.label ?? item.label,
+          rank: existing.rank ?? item.rank
+        };
+      }
+      continue;
+    }
     seen.add(item.mediaId);
     deduped.push(item);
   }
@@ -1564,12 +2297,15 @@ function BoundaryControl({
       });
     });
   };
-  const applyBoundaryBreak = (direction) => (event) => {
+  const applyBoundaryOption = (boundaryOptionId) => (event) => {
     event.preventDefault();
     event.stopPropagation();
-    const action = cyclePageDesignBoundaryBreak(boundary, direction);
-    if (!action) return;
-    saveBoundaryAction(action);
+    saveBoundaryAction({
+      kind: "set-boundary",
+      previousBlockId: boundary.previousBlockId,
+      nextBlockId: boundary.nextBlockId,
+      boundaryOptionId
+    });
   };
   const resetBoundaryBreak = (event) => {
     event.preventDefault();
@@ -1580,19 +2316,26 @@ function BoundaryControl({
       nextBlockId: boundary.nextBlockId
     });
   };
+  const selectedVariant = sectionTransitionVariantForBoundaryOptionId(
+    boundary.breakChoice.effectiveValue
+  );
+  const selectedFamily = sectionTransitionFamilyForBoundaryOptionId(
+    boundary.breakChoice.effectiveValue
+  ) ?? sectionTransitionFamilies[0];
+  const variantOptions = selectedFamily.variants.length > 1 ? selectedFamily.variants : null;
   return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 -translate-y-1/2", children: /* @__PURE__ */ jsxs("div", { className: "group/boundary relative flex h-full items-center justify-center", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-sky-500/10 opacity-0 transition-opacity duration-150 group-hover/boundary:opacity-100 group-focus-within/boundary:opacity-100" }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: "pointer-events-auto relative z-10 rounded-full border border-white/20 bg-zinc-950/85 px-3 py-1 text-xs font-semibold text-white opacity-0 shadow-lg shadow-zinc-950/25 backdrop-blur transition hover:bg-zinc-900 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-300 group-hover/boundary:opacity-100 group-focus-within/boundary:opacity-100",
+        className: "pointer-events-auto relative z-10 flex h-12 min-w-32 items-center justify-center rounded-full opacity-0 transition hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-sky-300 group-hover/boundary:opacity-100 group-focus-within/boundary:opacity-100",
         "aria-controls": open ? panelId : void 0,
         "aria-expanded": open,
         "aria-haspopup": "dialog",
         "aria-label": "Customize section break",
         onClick: openPanel,
-        children: "Break"
+        children: /* @__PURE__ */ jsx("span", { className: "rounded-full border border-white/20 bg-zinc-950/85 px-3 py-1 text-xs font-semibold text-white shadow-lg shadow-zinc-950/25 backdrop-blur transition hover:bg-zinc-900", children: "Break" })
       }
     ),
     open ? /* @__PURE__ */ jsxs(
@@ -1629,32 +2372,39 @@ function BoundaryControl({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-slate-200 bg-slate-50 p-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
+          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-slate-200 bg-slate-50 p-2 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: boundaryBreakLabel(boundary) }),
+            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-slate-500", children: boundaryBreakModeLabel(boundary) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-medium text-slate-500", children: "Type" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1", children: sectionTransitionFamilies.map((family) => /* @__PURE__ */ jsx(
+              SectionTransitionFamilyButton,
               {
-                type: "button",
-                className: "rounded-md p-2 text-slate-600 transition hover:bg-white hover:text-slate-950 focus:outline-none focus:ring-2 focus:ring-sky-400",
-                "aria-label": "Previous section break",
-                onClick: applyBoundaryBreak("prev"),
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": "true" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-center", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: boundaryBreakLabel(boundary) }),
-              /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-slate-500", children: boundaryBreakModeLabel(boundary) })
+                family,
+                active: selectedFamily.id === family.id,
+                onClick: applyBoundaryOption(
+                  defaultSectionTransitionVariantForFamily(family.id).boundaryOption.id
+                )
+              },
+              family.id
+            )) })
+          ] }),
+          variantOptions ? /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-1 text-xs font-medium text-slate-500", children: [
+              selectedFamily.label,
+              " style"
             ] }),
-            /* @__PURE__ */ jsx(
-              "button",
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 rounded-lg border border-slate-200 bg-slate-50 p-1", children: variantOptions.map((variant) => /* @__PURE__ */ jsx(
+              SectionTransitionVariantButton,
               {
-                type: "button",
-                className: "rounded-md p-2 text-slate-600 transition hover:bg-white hover:text-slate-950 focus:outline-none focus:ring-2 focus:ring-sky-400",
-                "aria-label": "Next section break",
-                onClick: applyBoundaryBreak("next"),
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })
-              }
-            )
-          ] }),
+                variant,
+                active: selectedVariant?.boundaryOption.id === variant.boundaryOption.id,
+                onClick: applyBoundaryOption(variant.boundaryOption.id)
+              },
+              variant.boundaryOption.id
+            )) })
+          ] }) : null,
           panelStatus ? /* @__PURE__ */ jsx("p", { id: panelStatus.id, className: "mt-2 text-xs text-slate-500", children: panelStatus.text }) : null,
           display.canReset ? /* @__PURE__ */ jsxs(
             "button",
@@ -1675,6 +2425,46 @@ function BoundaryControl({
     ) : null
   ] }) });
 }
+function SectionTransitionFamilyButton({
+  family,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: sectionTransitionChoiceClassName(active),
+      "aria-pressed": active,
+      "aria-label": `Use ${family.label} section break`,
+      onClick,
+      children: family.label
+    }
+  );
+}
+function SectionTransitionVariantButton({
+  variant,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: sectionTransitionChoiceClassName(active),
+      "aria-pressed": active,
+      "aria-label": `Use ${variant.label} section break`,
+      onClick,
+      children: variant.label
+    }
+  );
+}
+function sectionTransitionChoiceClassName(active) {
+  return [
+    "min-h-8 flex-1 rounded-md px-2.5 text-xs font-medium transition focus:outline-none focus:ring-2 focus:ring-sky-400",
+    active ? "bg-slate-950 text-white shadow-sm" : "bg-transparent text-slate-600 hover:bg-white hover:text-slate-950"
+  ].join(" ");
+}
 function boundaryBreakLabel(boundary) {
   return boundaryBreakDisplay(boundary).label;
 }
@@ -1738,7 +2528,9 @@ function resolveRuntimePreviewSource(input) {
   }
   return { kind: "preserve-server-runtime" };
 }
+var MAX_PREVIEW_BLOCK_DATA_BATCH_SIZE = 25;
 function EditablePageRenderer(props) {
+  const { blockDataApiClient = null, ...pageRendererProps } = props;
   const { blocks } = useEntryEditorController();
   const uiStore = useEditorUiStoreInstance();
   const { state: pageDesignState } = usePreviewPageDesignEditorState();
@@ -1749,21 +2541,45 @@ function EditablePageRenderer(props) {
     (state) => state.aiOverlays.hasActiveProposals()
   );
   const allowInlineEditing = isEditingMode && !isStreaming && !hasProposals;
-  const isEntryTemplatePage = Boolean(props.dataContext?.contentEntry);
-  const headerClearancePx = usePreviewHeaderClearance();
+  const isEntryTemplatePage = Boolean(pageRendererProps.dataContext?.contentEntry);
+  const headerClearance = usePreviewHeaderClearance();
   const cacheRef = useRef(/* @__PURE__ */ new Map());
-  const draftsVersion = useEditorUiStore((state) => {
+  const renderStateVersion = useEditorUiStore((state) => {
     const snapshots = state.drafts.inspect();
+    const linkedEntries = state.linkedEntries.inspect();
     const overlayRevision = state.aiOverlays.revision;
-    return `${snapshots.map((s) => `${s.id}:${s.version}`).join("|")}|overlay:${overlayRevision}`;
+    return [
+      snapshots.map((s) => `${s.id}:${s.version}`).join("|"),
+      linkedEntries.map((entry) => `${entry.meta.entryId}:${entry.version}`).join("|"),
+      `overlay:${overlayRevision}`
+    ].join("|");
   });
+  const linkedEntryOverlays = useMemo(() => {
+    const overlays = /* @__PURE__ */ new Map();
+    for (const linkedEntry of uiStore.getState().linkedEntries.inspect()) {
+      const content = linkedEntry.current ?? linkedEntry.baseline;
+      if (!content) continue;
+      overlays.set(linkedEntry.meta.entryId, {
+        content,
+        optimisticHash: linkedEntry.meta.optimisticHash
+      });
+    }
+    return overlays;
+  }, [uiStore, renderStateVersion]);
+  const linkedEntryDataContext = useMemo(
+    () => applyLinkedEntryRenderOverlayToDataContext(
+      pageRendererProps.dataContext,
+      linkedEntryOverlays
+    ),
+    [linkedEntryOverlays, pageRendererProps.dataContext]
+  );
   const aiProjections = useMemo(
     () => previewProjectionsFromAiOverlays(uiStore.getState().aiOverlays),
-    [uiStore, draftsVersion]
+    [uiStore, renderStateVersion]
   );
   const surfaceResolutionContext = useMemo(
-    () => hasThemePalette(props.theme) ? surfaceResolutionContextFromTheme(props.theme) : null,
-    [props.theme]
+    () => hasThemePalette(pageRendererProps.theme) ? surfaceResolutionContextFromTheme(pageRendererProps.theme) : null,
+    [pageRendererProps.theme]
   );
   const runtimePreviewSource = useMemo(
     () => resolveRuntimePreviewSource({
@@ -1786,19 +2602,34 @@ function EditablePageRenderer(props) {
   const mergedPage = useMemo(() => {
     return composePageFromBlocks(
       {
-        page: props.page,
+        page: pageRendererProps.page,
         blockItems,
         uiStore,
         projections: renderProjections
       },
       cacheRef
     );
-  }, [blockItems, props.page, renderProjections, uiStore, draftsVersion]);
+  }, [
+    blockItems,
+    pageRendererProps.page,
+    renderProjections,
+    uiStore,
+    renderStateVersion
+  ]);
+  const renderPage = mergedPage ?? pageRendererProps.page;
   const wrapBlockWithProvider = useCallback(
     (blockId, rendered) => {
-      const blockIndex = blockItemsForRender.findIndex((b) => b.id === blockId);
-      const block = blockIndex >= 0 ? blockItemsForRender[blockIndex] ?? null : null;
-      const previousBlock = blockIndex > 0 ? blockItemsForRender[blockIndex - 1] ?? null : null;
+      const renderedBlocks = renderPage?.blocks ?? [];
+      const controllerBlockIndex = blockItemsForRender.findIndex(
+        (b) => b.id === blockId
+      );
+      const renderedBlockIndex = renderedBlocks.findIndex(
+        (b) => b.id === blockId
+      );
+      const blockIndex = controllerBlockIndex >= 0 ? controllerBlockIndex : renderedBlockIndex;
+      const chromeBlocks = controllerBlockIndex >= 0 ? blockItemsForRender : renderedBlocks;
+      const block = blockIndex >= 0 ? chromeBlocks[blockIndex] ?? null : null;
+      const previousBlock = blockIndex > 0 ? chromeBlocks[blockIndex - 1] ?? null : null;
       const canonicalBlockIndex = blockItems.findIndex((b) => b.id === blockId);
       const canonicalPreviousBlock = canonicalBlockIndex > 0 ? blockItems[canonicalBlockIndex - 1] ?? null : null;
       const editorBlockId = unsafeAsEditorBlockId(blockId);
@@ -1839,8 +2670,12 @@ function EditablePageRenderer(props) {
               blockId,
               blockKind: block.kind,
               content,
-              theme: props.theme,
-              headerClearancePx: shouldClearHeaderForBlock(blockItemsForRender, blockIndex) ? headerClearancePx : 0
+              theme: pageRendererProps.theme,
+              placement: planBlockToolbarPlacement({
+                blocks: chromeBlocks,
+                blockIndex,
+                headerClearance
+              })
             }
           )
         ] }) : null
@@ -1854,16 +2689,29 @@ function EditablePageRenderer(props) {
       aiProjections,
       blockItems,
       blockItemsForRender,
-      headerClearancePx,
+      headerClearance,
+      isEntryTemplatePage,
+      pageRendererProps.theme,
       renderProjections,
+      renderPage?.blocks,
       uiStore
     ]
   );
+  const liveResolvedData = usePreviewBlockResolvedData({
+    page: renderPage,
+    dataContext: linkedEntryDataContext,
+    apiClient: blockDataApiClient
+  });
+  const dataContext = useMemo(
+    () => mergeResolvedDataContext(linkedEntryDataContext, liveResolvedData),
+    [linkedEntryDataContext, liveResolvedData]
+  );
   const rendererProps = {
-    ...props,
-    page: mergedPage,
-    registry: allowInlineEditing ? editorRegistry : props.registry ?? clientComponentRegistry,
-    wrapBlock: allowInlineEditing ? wrapBlockWithProvider : props.wrapBlock,
+    ...pageRendererProps,
+    page: renderPage,
+    registry: allowInlineEditing ? editorRegistry : pageRendererProps.registry ?? clientComponentRegistry,
+    wrapBlock: allowInlineEditing ? wrapBlockWithProvider : pageRendererProps.wrapBlock,
+    dataContext,
     // Phase 10: the legacy `isEditingMode` flag forced the renderer into
     // draft-mode validation; `usePlaceholders` consolidates that into a
     // narrowly-scoped fallback. The editor's contract is unchanged: a user
@@ -1875,16 +2723,258 @@ function EditablePageRenderer(props) {
   };
   return /* @__PURE__ */ jsx(PageRenderer, { ...rendererProps });
 }
+function usePreviewBlockResolvedData(args) {
+  const { page, dataContext, apiClient } = args;
+  const cacheKey = useMemo(() => {
+    if (!apiClient || !dataContext?.siteId) return null;
+    return stableSerialize({
+      siteId: dataContext.siteId,
+      pageId: dataContext.pageId ?? null,
+      previewStage: dataContext.previewStage ?? "published",
+      blocks: page.blocks.map((block) => ({
+        id: block.id,
+        kind: block.kind,
+        content: block.content ?? null,
+        draftContent: block.draftContent ?? null,
+        publishedContent: block.publishedContent ?? null
+      }))
+    });
+  }, [apiClient, dataContext?.pageId, dataContext?.previewStage, dataContext?.siteId, page]);
+  const [resolvedData, setResolvedData] = useState(null);
+  useEffect(() => {
+    if (!apiClient || !dataContext?.siteId || !cacheKey) {
+      setResolvedData(null);
+      return;
+    }
+    let cancelled = false;
+    const context = buildPreviewBlockDataContext(dataContext);
+    const loaderClient = createPreviewBlockDataApiClient(apiClient, context);
+    void prefetchBlockData(page, context, {
+      apiClient: loaderClient,
+      isValidEndpoint: isSupportedLoaderEndpoint,
+      onError: () => {
+      }
+    }).then((data) => {
+      if (!cancelled) setResolvedData({ key: cacheKey, data });
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiClient, cacheKey, dataContext, page]);
+  return resolvedData?.data ?? null;
+}
+function buildPreviewBlockDataContext(dataContext) {
+  return {
+    siteId: dataContext.siteId,
+    pageId: dataContext.pageId,
+    previewStage: dataContext.previewStage,
+    root: {
+      ...dataContext.routes ? { routes: dataContext.routes } : {},
+      ...dataContext.pagesByIdentifier ? { pagesByIdentifier: dataContext.pagesByIdentifier } : {},
+      ...dataContext.entriesByIdentifier ? { entriesByIdentifier: dataContext.entriesByIdentifier } : {},
+      occurrenceContext: dataContext.occurrenceContext ?? null,
+      entrySubrouteContext: dataContext.entrySubrouteContext ?? null,
+      contentEntry: dataContext.contentEntry ?? null,
+      bookingOfferingPresets: dataContext.bookingOfferingPresets ?? []
+    }
+  };
+}
+function mergeResolvedDataContext(dataContext, liveResolvedData) {
+  if (!dataContext || !liveResolvedData) return dataContext;
+  return {
+    ...dataContext,
+    resolvedData: {
+      ...dataContext.resolvedData ?? {},
+      ...liveResolvedData
+    }
+  };
+}
+function createPreviewBlockDataApiClient(dashboardApiClient, context) {
+  const batcher = createMicrobatcher({
+    maxBatchSize: MAX_PREVIEW_BLOCK_DATA_BATCH_SIZE,
+    runBatch: async (requests) => {
+      if (!context.siteId) {
+        return requests.reduce((acc, request) => {
+          acc[request.id] = {
+            ok: false,
+            error: { code: "missing_site_id", message: "Missing siteId" }
+          };
+          return acc;
+        }, {});
+      }
+      const envelope = await dashboardApiClient({
+        endpoint: "batchBlockLoaders",
+        params: {
+          siteId: context.siteId,
+          stage: context.previewStage
+        },
+        body: { requests }
+      });
+      const payload = unwrapResponse(envelope);
+      return payload.results;
+    }
+  });
+  return async ({ endpoint, params }) => {
+    if (!isSupportedLoaderEndpoint(endpoint)) {
+      throw new Error(`Unsupported block loader endpoint: ${endpoint}`);
+    }
+    const normalizedParams = normalizePublicApiLoaderParams(endpoint, params, context);
+    if (isBatchableEndpoint(endpoint)) {
+      const batchParams = toBatchParams(endpoint, normalizedParams);
+      const batchKey = `${endpoint}:${stableSerialize(batchParams ?? null)}`;
+      return batcher.getOrEnqueue(
+        batchKey,
+        (id) => buildBatchLoaderRequest(id, endpoint, batchParams)
+      );
+    }
+    return callDirectLoaderApiEndpoint(
+      dashboardApiClient,
+      endpoint,
+      normalizedParams
+    );
+  };
+}
+async function callDirectLoaderApiEndpoint(dashboardApiClient, endpoint, params) {
+  switch (endpoint) {
+    case "listPublishedEntries":
+      return unwrapResponse(await dashboardApiClient({
+        endpoint,
+        params
+      }));
+    case "getPublishedEntryPreview":
+      return unwrapResponse(await dashboardApiClient({
+        endpoint,
+        params
+      }));
+    case "listPublicPasses":
+      return unwrapResponse(await dashboardApiClient({
+        endpoint,
+        params
+      }));
+    case "listPublicMemberships":
+      return unwrapResponse(await dashboardApiClient({
+        endpoint,
+        params
+      }));
+  }
+}
+function isBatchableEndpoint(endpoint) {
+  return endpoint === "listPublicEvents" || endpoint === "getPublicEventDetails" || endpoint === "listPublicCourses" || endpoint === "listPublicRouteCandidates" || endpoint === "listPublicTeamMembers" || endpoint === "listPublicProducts" || endpoint === "getPublicBookingServices" || endpoint === "getPublicFormById";
+}
+function buildBatchLoaderRequest(id, endpoint, params) {
+  switch (endpoint) {
+    case "listPublicEvents": {
+      const typedParams = params;
+      return typedParams ? { id, endpoint, params: typedParams } : { id, endpoint };
+    }
+    case "getPublicEventDetails": {
+      const typedParams = params;
+      return typedParams ? { id, endpoint, params: typedParams } : { id, endpoint };
+    }
+    case "listPublicCourses": {
+      const typedParams = params;
+      return typedParams ? { id, endpoint, params: typedParams } : { id, endpoint };
+    }
+    case "listPublicRouteCandidates":
+      return { id, endpoint };
+    case "listPublicProducts": {
+      const typedParams = params;
+      return typedParams ? { id, endpoint, params: typedParams } : { id, endpoint };
+    }
+    case "listPublicTeamMembers":
+      return { id, endpoint };
+    case "getPublicBookingServices": {
+      const typedParams = params;
+      return typedParams ? { id, endpoint, params: typedParams } : { id, endpoint };
+    }
+    case "getPublicFormById":
+      return {
+        id,
+        endpoint,
+        params: params ?? { formId: "" }
+      };
+  }
+}
+function stripUndefined(obj) {
+  const out = {};
+  for (const [key, value] of Object.entries(obj)) {
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+}
+function normalizeIdsParam(ids) {
+  if (!ids) return void 0;
+  const parts = ids.split(",").map((id) => id.trim()).filter(Boolean).sort();
+  return parts.length ? parts.join(",") : void 0;
+}
+function toBatchParams(endpoint, params) {
+  if (endpoint === "listPublicEvents") {
+    const p = stripUndefined({
+      limit: params.limit || void 0,
+      from: params.from || void 0,
+      to: params.to || void 0,
+      afterStartsAt: params.afterStartsAt || void 0,
+      afterId: params.afterId || void 0,
+      categoryIds: params.categoryIds || void 0,
+      venueId: params.venueId || void 0,
+      staffMemberId: params.staffMemberId || void 0,
+      kind: params.kind || void 0,
+      eventSurface: params.eventSurface || void 0,
+      eventPresets: params.eventPresets || void 0,
+      scheduleScope: params.scheduleScope || void 0,
+      entryId: params.entryId || void 0,
+      seriesId: params.seriesId || void 0,
+      includeOccurrenceId: params.includeOccurrenceId || void 0,
+      detailLevel: params.detailLevel || void 0,
+      readProfile: params.readProfile || void 0
+    });
+    return Object.keys(p).length ? p : void 0;
+  }
+  if (endpoint === "getPublicEventDetails") {
+    const p = stripUndefined({
+      limit: params.limit || void 0,
+      from: params.from || void 0,
+      to: params.to || void 0,
+      afterStartsAt: params.afterStartsAt || void 0,
+      afterId: params.afterId || void 0,
+      categoryIds: params.categoryIds || void 0,
+      venueId: params.venueId || void 0,
+      staffMemberId: params.staffMemberId || void 0,
+      kind: params.kind || void 0,
+      eventSurface: params.eventSurface || void 0,
+      eventPresets: params.eventPresets || void 0,
+      scheduleScope: params.scheduleScope || void 0,
+      entryId: params.entryId || void 0,
+      seriesId: params.seriesId || void 0,
+      includeOccurrenceId: params.includeOccurrenceId || void 0
+    });
+    return Object.keys(p).length ? p : void 0;
+  }
+  if (endpoint === "listPublicCourses") {
+    const p = stripUndefined({ limit: params.limit || void 0 });
+    return Object.keys(p).length ? p : void 0;
+  }
+  if (endpoint === "listPublicProducts") {
+    const p = stripUndefined({
+      categorySelector: decodePublicProductCategorySelectorQuery(params) ?? void 0
+    });
+    return Object.keys(p).length ? p : void 0;
+  }
+  if (endpoint === "getPublicBookingServices") {
+    const p = stripUndefined({ ids: normalizeIdsParam(params.ids || void 0) });
+    return Object.keys(p).length ? p : void 0;
+  }
+  if (endpoint === "getPublicFormById") {
+    return { formId: params.formId ?? "" };
+  }
+  return void 0;
+}
 function hasThemePalette(theme) {
   return Boolean(theme?.palette);
 }
-function shouldClearHeaderForBlock(blocks, blockIndex) {
-  const block = blocks[blockIndex];
-  if (block?.kind !== "block.hero") return false;
-  return blocks.slice(0, blockIndex).every((candidate) => candidate.kind === "block.site-header");
-}
 function usePreviewHeaderClearance() {
-  const [clearance, setClearance] = useState(0);
+  const [clearance, setClearance] = useState({ kind: "none" });
   useEffect(() => {
     let observedHeader = null;
     let resizeObserver = null;
@@ -1899,12 +2989,19 @@ function usePreviewHeaderClearance() {
         }
       }
       if (!header) {
-        setClearance(0);
+        setClearance(
+          (current) => current.kind === "none" ? current : { kind: "none" }
+        );
         return;
       }
       const style = window.getComputedStyle(header);
       const isOverlayHeader = style.position === "fixed" || style.position === "sticky";
-      setClearance(isOverlayHeader ? measuredOverlayHeaderClearancePx(header) : 0);
+      const nextClearance = headerClearanceFromPx(
+        isOverlayHeader ? measuredOverlayHeaderClearancePx(header) : 0
+      );
+      setClearance(
+        (current) => headerClearanceEquals(current, nextClearance) ? current : nextClearance
+      );
     };
     update();
     const mutationObserver = new MutationObserver(update);
@@ -1923,6 +3020,15 @@ function usePreviewHeaderClearance() {
   }, []);
   return clearance;
 }
+function headerClearanceEquals(left, right) {
+  if (left.kind !== right.kind) return false;
+  switch (left.kind) {
+    case "none":
+      return true;
+    case "overlay":
+      return right.kind === "overlay" && left.px === right.px;
+  }
+}
 function findPreviewOverlayHeader() {
   return document.querySelector(
     ".block-site-header.rb-fixed, .block-site-header.rb-sticky"
@@ -2388,25 +3494,25 @@ var INITIAL_ONBOARDING_CONFIRMATION_STATE = {
   resendFeedback: null,
   statusLoadFailed: false
 };
-function isRecord4(value) {
+function isRecord5(value) {
   return value !== null && typeof value === "object";
 }
 function getErrorMessageFromEnvelope(payload, fallback) {
-  const error = isRecord4(payload) ? payload.error : null;
-  const message = isRecord4(error) ? error.message : null;
+  const error = isRecord5(payload) ? payload.error : null;
+  const message = isRecord5(error) ? error.message : null;
   return typeof message === "string" && message.trim().length > 0 ? message : fallback;
 }
 function isLaunchReadiness(value) {
-  return isRecord4(value) && Array.isArray(value.requirements) && typeof value.pendingRequiredCount === "number" && typeof value.pendingRecommendedCount === "number" && typeof value.pendingOptionalCount === "number" && isRecord4(value.goLiveDecision) && (value.goLiveDecision.kind === "allowed" || value.goLiveDecision.kind === "blocked");
+  return isRecord5(value) && Array.isArray(value.requirements) && typeof value.pendingRequiredCount === "number" && typeof value.pendingRecommendedCount === "number" && typeof value.pendingOptionalCount === "number" && isRecord5(value.goLiveDecision) && (value.goLiveDecision.kind === "allowed" || value.goLiveDecision.kind === "blocked");
 }
 function isOnboardingPreviewStatusResponse(value) {
-  return isRecord4(value) && typeof value.dashboardUnlocked === "boolean" && typeof value.requiresEmailConfirmation === "boolean" && isLaunchReadiness(value.launchReadiness);
+  return isRecord5(value) && typeof value.dashboardUnlocked === "boolean" && typeof value.requiresEmailConfirmation === "boolean" && isLaunchReadiness(value.launchReadiness);
 }
 function isResendOnboardingPreviewConfirmationResponse(value) {
-  return isRecord4(value) && (value.result === "resent" || value.result === "already_confirmed") && typeof value.dashboardUnlocked === "boolean" && typeof value.requiresEmailConfirmation === "boolean" && isLaunchReadiness(value.launchReadiness);
+  return isRecord5(value) && (value.result === "resent" || value.result === "already_confirmed") && typeof value.dashboardUnlocked === "boolean" && typeof value.requiresEmailConfirmation === "boolean" && isLaunchReadiness(value.launchReadiness);
 }
 function getSuccessData(payload, isData) {
-  if (!isRecord4(payload) || payload.success !== true || !isData(payload.data)) {
+  if (!isRecord5(payload) || payload.success !== true || !isData(payload.data)) {
     return null;
   }
   return payload.data;
@@ -2872,313 +3978,6 @@ function PreviewAuthBanner({
     )
   ] });
 }
-var SiteChromeCustomizeContext = createContext(null);
-function SiteChromeCustomizeProvider({
-  children,
-  siteId,
-  apiClient,
-  theme,
-  themeId = null,
-  selectionId = null,
-  selectionVersion = null,
-  selectionUpdatedAt = null,
-  initialSelections,
-  headerSelectionContext,
-  footerSelectionContext,
-  siteStyleAccess = { kind: "hidden" }
-}) {
-  const previewDesign = usePreviewDesignCoordinator();
-  const { clearPreview, previewTheme } = previewDesign;
-  const runnerRef = useRef(createOptimisticActionRunner());
-  const saveQueueRef = useRef(Promise.resolve());
-  const latestSelectionUpdatedAtRef = useRef(
-    initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
-  );
-  const initialSelectionVersion = initialSelections.selectionVersion ?? selectionVersion ?? 0;
-  const baseSnapshot = useMemo(
-    () => resolveStyleConfiguratorInitialSnapshot({
-      theme,
-      initialSelections: {
-        ...initialSelections,
-        selectionVersion: initialSelectionVersion,
-        selectionUpdatedAt: initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
-      },
-      headerSelectionContext,
-      footerSelectionContext
-    }),
-    [footerSelectionContext, headerSelectionContext, initialSelectionVersion, initialSelections, selectionUpdatedAt, theme]
-  );
-  const [state, setState] = useState(
-    () => 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]);
-  useEffect(() => {
-    if (!baseSnapshot) {
-      setState(null);
-      return;
-    }
-    setState(
-      (current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot)
-    );
-  }, [baseSnapshot]);
-  useEffect(() => {
-    const runner = runnerRef.current;
-    return () => {
-      runner.invalidate();
-      clearPreviewRef.current("site-chrome");
-    };
-  }, []);
-  const lookModels = useMemo(() => {
-    if (!state) return null;
-    const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
-    if (!siteStyle) return null;
-    return buildSiteChromeLookModels({
-      state,
-      siteStyle,
-      headerSelectionContext,
-      footerSelectionContext
-    });
-  }, [footerSelectionContext, headerSelectionContext, state]);
-  const applyAllowed = siteStyleAccess.kind === "apply-allowed";
-  const getSurfaceState = useCallback(
-    (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 rendered2 = lookModels.headerStyle.options.find(
-          (option) => option.id === lookModels.headerStyle.renderedStyleId
-        );
-        return {
-          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,
-          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",
-        surface: "footer",
-        label: "Footer",
-        currentId,
-        currentLabel: selected?.label ?? (currentId ? "Unknown Look" : `${rendered?.label ?? "Site style"} (default)`),
-        options: lookModels.footer.options,
-        diagnostics: lookModels.footer.diagnostics,
-        saving: state.saveStatus.kind === "saving",
-        failure: state.saveStatus.kind === "failed" ? state.saveStatus.message : null,
-        applyAllowed
-      };
-    },
-    [applyAllowed, lookModels, state]
-  );
-  const persistSelection = useCallback(
-    (surface, nextSnapshot) => {
-      const siteStyle = getCuratedSiteStyle(nextSnapshot.siteStyleId);
-      if (!siteStyle) return;
-      const compiled = planSiteStylePreviewChange({
-        siteStyle,
-        selection: nextSnapshot,
-        baseTheme: theme,
-        headerSelectionContext,
-        footerSelectionContext
-      });
-      void runnerRef.current.run({
-        optimistic: () => {
-          previewTheme("site-chrome", compiled.themeOverlay, "site-chrome");
-          setState((latest) => {
-            if (!latest) return latest;
-            return markApplySaving({ ...latest, previewed: nextSnapshot });
-          });
-        },
-        network: async () => {
-          const runSave = async () => {
-            const body = surface === "header" ? {
-              surface,
-              lookId: nextSnapshot.headerLookId,
-              layoutId: nextSnapshot.headerLayoutId,
-              styleId: nextSnapshot.headerStyleId,
-              theme: compiled.themeOverlay,
-              themeId: themeId ?? null,
-              selectionId: selectionId ?? null,
-              baseSelectionUpdatedAt: latestSelectionUpdatedAtRef.current
-            } : {
-              surface,
-              lookId: nextSnapshot.footerLookId,
-              theme: compiled.themeOverlay,
-              themeId: themeId ?? null,
-              selectionId: selectionId ?? null,
-              baseSelectionUpdatedAt: latestSelectionUpdatedAtRef.current
-            };
-            const response = await apiClient({
-              endpoint: "saveSiteChromeLookSelection",
-              params: { siteId },
-              body
-            });
-            const saved = unwrapResponse(response);
-            latestSelectionUpdatedAtRef.current = saved.selectionUpdatedAt ?? latestSelectionUpdatedAtRef.current;
-            return saved;
-          };
-          const queuedSave = saveQueueRef.current.catch(() => void 0).then(runSave);
-          saveQueueRef.current = queuedSave.then(
-            () => void 0,
-            () => void 0
-          );
-          return queuedSave;
-        },
-        onSuccess: (saved) => {
-          latestSelectionUpdatedAtRef.current = saved.selectionUpdatedAt ?? latestSelectionUpdatedAtRef.current;
-          const persisted = {
-            siteStyleId: nextSnapshot.siteStyleId,
-            selectionVersion: nextSnapshot.selectionVersion,
-            selectionUpdatedAt: saved.selectionUpdatedAt ?? nextSnapshot.selectionUpdatedAt ?? null,
-            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);
-        },
-        onError: (error) => {
-          const message = error instanceof Error ? error.message : "Unable to apply your selection.";
-          setState((latest) => latest ? markApplyFailed(latest, message) : latest);
-        }
-      });
-    },
-    [
-      apiClient,
-      footerSelectionContext,
-      headerSelectionContext,
-      previewTheme,
-      selectionId,
-      siteId,
-      themeId,
-      theme
-    ]
-  );
-  const selectHeaderStyle = useCallback(
-    (styleId) => {
-      if (!applyAllowed) return;
-      const current = stateRef.current;
-      if (!current) return;
-      const nextState = previewHeaderStyle(current, styleId);
-      persistSelection("header", nextState.previewed);
-    },
-    [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;
-      const current = stateRef.current;
-      if (!current) return;
-      const nextState = previewFooterLook(current, planFooterLookSelection(lookId));
-      persistSelection("footer", nextState.previewed);
-    },
-    [applyAllowed, persistSelection]
-  );
-  const cycleSurfaceLook = useCallback(
-    (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) selectFooterLook(next);
-    },
-    [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,
-      cycleSurfaceLayout
-    }),
-    [cycleSurfaceLayout, cycleSurfaceLook, getSurfaceState]
-  );
-  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, options = {}) {
@@ -3212,22 +4011,7 @@ function SiteChromeCustomizeButton({
   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();
-  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 popover = useCustomizePopoverController();
   const surfaceState = customize?.getSurfaceState(surface) ?? {
     kind: "unavailable"
   };
@@ -3242,157 +4026,133 @@ function SiteChromeCustomizeButton({
     }
     return surfaceState.layoutOptions.filter((option) => option.available).length;
   }, [surfaceState]);
-  const toggleCustomize = (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!customizeOpen) {
-      setCustomizeReturnFocusTarget(
-        event.currentTarget instanceof HTMLElement ? event.currentTarget : customizeButtonRef.current
-      );
+  const controlPlan = useMemo(() => {
+    if (surfaceState.kind !== "available") return { cycleRows: [] };
+    return {
+      cycleRows: [
+        ...surfaceState.surface === "header" ? [
+          {
+            label: "Layout",
+            valueLabel: surfaceState.currentLayoutLabel,
+            previousLabel: `Previous ${surface} Layout`,
+            nextLabel: `Next ${surface} Layout`,
+            availability: cycleAvailabilityFromFlags({
+              canCycle: cycleableLayoutOptionCount > 1,
+              applyAllowed: surfaceState.applyAllowed
+            }),
+            onPrevious: () => customize?.cycleSurfaceLayout(surface, "prev"),
+            onNext: () => customize?.cycleSurfaceLayout(surface, "next")
+          }
+        ] : [],
+        {
+          label: "Look",
+          valueLabel: surfaceState.currentLabel,
+          previousLabel: `Previous ${surface} Look`,
+          nextLabel: `Next ${surface} Look`,
+          availability: cycleAvailabilityFromFlags({
+            canCycle: cycleableOptionCount > 1,
+            applyAllowed: surfaceState.applyAllowed
+          }),
+          onPrevious: () => customize?.cycleSurfaceLook(surface, "prev"),
+          onNext: () => customize?.cycleSurfaceLook(surface, "next")
+        }
+      ]
+    };
+  }, [
+    customize,
+    cycleableLayoutOptionCount,
+    cycleableOptionCount,
+    surface,
+    surfaceState
+  ]);
+  return /* @__PURE__ */ jsxs(
+    PreviewChromeFloatingControl,
+    {
+      anchorSelector: "[data-preview-site-chrome-surface]",
+      placement: (anchorBox) => planSiteChromeCustomizePlacement({ surface, anchorBox }),
+      fallbackClassName: containerClassName,
+      forceVisible: popover.open,
+      children: [
+        /* @__PURE__ */ jsx(
+          CustomizePillButton,
+          {
+            buttonRef: popover.buttonRef,
+            ariaLabel: `Customize ${surface}`,
+            open: popover.open,
+            controlsId: popover.panelId,
+            onClick: popover.toggle,
+            disabled: !hasCustomizeControls
+          }
+        ),
+        popover.open && surfaceState.kind === "available" ? /* @__PURE__ */ jsxs(
+          CustomizePopoverShell,
+          {
+            panelId: popover.panelId,
+            descriptionId: popover.descriptionId,
+            dialogLabel: `Customize ${surface}`,
+            eyebrow: "Site",
+            title: surfaceState.label,
+            dialogRef: popover.dialogRef,
+            closeButtonRef: popover.registerInitialFocus,
+            onClose: popover.close,
+            onKeyDown: popover.handleDialogKeyDown,
+            children: [
+              controlPlan.cycleRows.map((row) => /* @__PURE__ */ jsx(CustomizeCycleRow, { ...row }, row.label)),
+              surfaceState.surface === "header" ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 border-t pt-3", children: [
+                /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Display" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "mt-1 h-8 w-full rounded-md border bg-background px-2 text-sm text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                      value: surfaceState.brandDisplay,
+                      onChange: (event) => {
+                        event.stopPropagation();
+                        customize?.setHeaderBrandDisplay(
+                          event.currentTarget.value
+                        );
+                      },
+                      disabled: !surfaceState.applyAllowed,
+                      children: surfaceState.brandDisplayOptions.map((option) => /* @__PURE__ */ jsx(
+                        "option",
+                        {
+                          value: option.value,
+                          disabled: option.disabled,
+                          children: option.label
+                        },
+                        option.value
+                      ))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("label", { className: "block text-xs font-medium text-muted-foreground", children: [
+                  /* @__PURE__ */ jsx("span", { children: "Logo size" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      className: "mt-1 h-8 w-full rounded-md border bg-background px-2 text-sm text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                      value: surfaceState.logoSize,
+                      onChange: (event) => {
+                        event.stopPropagation();
+                        customize?.setHeaderLogoSize(
+                          event.currentTarget.value
+                        );
+                      },
+                      disabled: !surfaceState.applyAllowed,
+                      children: surfaceState.logoSizeOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+                    }
+                  )
+                ] })
+              ] }) : null,
+              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
+      ]
     }
-    setCustomizeOpen((open) => !open);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: containerClassName, 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: [
-            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" }),
-                /* @__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,
@@ -3410,7 +4170,7 @@ function renderEditableSurface(children, surface, options) {
   const child = childArray.length === 1 ? childArray[0] : null;
   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"),
+      className: joinClassNames2(child.props.className, "group/site-chrome relative"),
       "data-preview-site-chrome-surface": surface,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         child.props.children,
@@ -3449,7 +4209,7 @@ function isHostElement(child) {
 function isEditableSurfaceForwardingElement(child) {
   return typeof child.type !== "string" && child.type !== Fragment$1 && child.type[EDITABLE_SURFACE_FORWARDING_PROP] === true;
 }
-function joinClassNames(...values) {
+function joinClassNames2(...values) {
   const className = values.filter(Boolean).join(" ");
   return className.length > 0 ? className : void 0;
 }
@@ -3631,13 +4391,27 @@ function renderPreviewDocument({
   }
   return null;
 }
+function LinkedEntryEditEventBridge() {
+  const uiStore = useEditorUiStoreInstance();
+  useEffect(() => {
+    const handleLinkedEntryEdit = (event) => {
+      if (!isLinkedEntryEditEvent(event)) return;
+      uiStore.getState().linkedEntries.open(event.detail);
+    };
+    window.addEventListener(LINKED_ENTRY_EDIT_EVENT, handleLinkedEntryEdit);
+    return () => {
+      window.removeEventListener(LINKED_ENTRY_EDIT_EVENT, handleLinkedEntryEdit);
+    };
+  }, [uiStore]);
+  return null;
+}
 var previewContainerResponsiveEnabled = process.env.NEXT_PUBLIC_ENABLE_PREVIEW_CONTAINER_RESPONSIVE !== "false";
-var PreviewEditorSidebar = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorSidebar-QZG37QIF.mjs');
+var PreviewEditorSidebar = React10.lazy(async () => {
+  const mod = await import('./PreviewEditorSidebar-RDCMEXIJ.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
-var PreviewEditorUI = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-AXIKSMZA.mjs');
+var PreviewEditorUI = React10.lazy(async () => {
+  const mod = await import('./PreviewEditorUI-NYGQ6K7B.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {
@@ -3853,7 +4627,7 @@ function PreviewShellLayout({
     {
       className: "relative flex h-full min-h-0 flex-col overflow-auto bg-muted/30",
       style: previewPaneContainmentStyle,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(PreviewChromeLayerProvider, { children: /* @__PURE__ */ jsx(
         PreviewThemedSiteDocument,
         {
           useThemeScope,
@@ -3870,7 +4644,7 @@ function PreviewShellLayout({
           siteChromeRenderModel,
           children
         }
-      )
+      ) })
     }
   );
   const rightPane = /* @__PURE__ */ jsx(
@@ -3878,7 +4652,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(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
         PreviewEditorSidebar,
         {
           surfaceId,
@@ -3933,7 +4707,7 @@ function PreviewShellLayout({
       ) })
     }
   );
-  const editorUI = /* @__PURE__ */ jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+  const editorUI = /* @__PURE__ */ jsx(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
     PreviewEditorUI,
     {
       inMaintenanceMode: maintenanceModeEnabled,
@@ -3978,6 +4752,7 @@ function PreviewShellLayout({
       footerSelectionContext: themeSelectionFooterContext,
       siteStyleAccess,
       children: /* @__PURE__ */ jsxs(PreviewBlockCustomizeSelectionProvider, { children: [
+        /* @__PURE__ */ jsx(LinkedEntryEditEventBridge, {}),
         editorUI,
         previewBanner,
         /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden bg-background", children: isOpen ? /* @__PURE__ */ jsx(
@@ -4077,7 +4852,7 @@ function PreviewShell({
           initialBlocks,
           pageMetadata,
           apiClient,
-          children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx(PreviewDesignHistoryOrderProvider, { children: /* @__PURE__ */ jsx(
             PreviewPageDesignEditorStateProvider,
             {
               apiClient,
@@ -4141,7 +4916,7 @@ function PreviewShell({
                 }
               )
             }
-          )
+          ) })
         }
       ) })
     }
@@ -4156,17 +4931,6 @@ function defaultDesignEditorEligibility(input) {
   }
   return { kind: "unsupported" };
 }
-
-// ../preview-next/src/client/preview/previewSurface.ts
-function resolvePreviewSurfaceIdFromSearch(search) {
-  return parseSurfaceId(new URLSearchParams(search).get(PREVIEW_SURFACE_PARAM));
-}
-function resolvePreviewSurfaceId() {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  return resolvePreviewSurfaceIdFromSearch(window.location.search);
-}
 function SdkPreviewModeRuntime(props) {
   const {
     apiBaseUrl,
@@ -4180,7 +4944,7 @@ function SdkPreviewModeRuntime(props) {
     useThemeScope = true
   } = props;
   const resolvedDashboardBaseUrl = dashboardBaseUrl ?? deriveDashboardBaseUrlFromApiBaseUrl(apiBaseUrl);
-  const surfaceId = props.surfaceId ?? resolvePreviewSurfaceId() ?? DEFAULT_SURFACE_ID;
+  const surfaceId = props.surfaceId ?? DEFAULT_SURFACE_ID;
   const theme = content.theme;
   const page = content.page;
   const routeMap = content.routeMap ?? void 0;