@riverbankcms/sdk 0.78.2 → 0.80.0

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

@@ -1,9 +1,9 @@
 "use client";
-import { useOptionalPreviewLayout, PreviewQueryProvider } from './chunk-OKMBEAXY.mjs';
-import { PreviewThemeOverlayProvider, PreviewDesignCoordinatorProvider, resolveSiteStyleAccess, usePreviewDesignCoordinator, createOptimisticActionRunner, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, syncStyleConfiguratorState, buildSiteChromeLookModels, planSiteStylePreviewChange, markApplyFailed, markApplySaved, markApplySaving, previewHeaderStyle, previewHeaderLayout, previewFooterLook, cycleSiteChromeLookId, usePreviewThemeOverlay, resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSetupBannerModel, planSiteChromeLookSelection, sanitizeDashboardPath } from './chunk-4QEGTLK6.mjs';
-import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-6HYXHRAI.mjs';
-import { clientComponentRegistry, deriveLaunchReadiness, DEFAULT_LAUNCH_READINESS_INPUT, useEditorUiStore, ResizableSplitPane, BlockApiProvider, EditorProvider, getCuratedSiteStyle, useEditor, createRoutingHelpers, createSnapshotFromPageRecord, EntryControllerProvider, useEntryEditorController, useEditorUiStoreInstance, surfaceResolutionContextFromTheme, unsafeAsEditorBlockId, EditableBlockProvider, asDesignBlockId, PageRenderer, planSiteDocument, ThemeScope, FixedBottomSurface, Button, unwrapResponse, X, ChevronLeft, ChevronRight, RotateCcw, PreviewRichTextEditor, RichText, PreviewTextEditor, Text, buildThemeRuntime, renderBlock, siteHeaderManifest, siteFooterManifest, SiteDocumentLayout, SITE_CHROME_CLASS_NAMES, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, buildEditorModelRuntimeFieldsByBlockId, applyCompiledRuntimeFieldsToContent, assertNever2, getBlockDefinition, systemCustomizeFacetDefinitionsForBlock, systemCustomizeFacetAppliesToLayoutVariant, systemCustomizeFacetCurrentValue, systemCustomizeFacetLabelForValue, visibleHeaderClearancePx, systemCustomizeFacetNextValue, EDITABLE_SURFACE_FORWARDING_PROP, assertNever, SITE_CHROME_VISIBLE_HEADER_SELECTOR } from './chunk-MCRQMPET.mjs';
-import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-CR5HKAGU.mjs';
+import { 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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -473,6 +473,25 @@ function cyclePageDesignBlockFacet(input) {
     baseContentId: input.block.contentRevision?.contentId ?? null
   };
 }
+function setPageDesignBlockBackground(input) {
+  const current = input.currentContent ? parseBackgroundOverrideFromContent(input.currentContent) : {
+    kind: "supported",
+    override: input.fromOverride ?? { kind: "default" }
+  };
+  const capability = resolveBackgroundCapability({
+    block: input.block,
+    imagePool: input.imagePool ?? imagePoolForOverride(input.override)
+  });
+  const plan = planBackgroundOverride(current, capability, input.override);
+  if (plan.kind !== "apply") return null;
+  return {
+    kind: "set-background",
+    blockId: input.block.blockId,
+    override: plan.override,
+    fromOverride: plan.fromOverride,
+    baseContentId: input.block.contentRevision?.contentId ?? null
+  };
+}
 function cyclePageDesignBoundaryBreak(boundary, direction) {
   if (boundary.availableBreaks.length === 0) return null;
   const breakIds = boundary.availableBreaks.map((option) => option.id);
@@ -594,22 +613,37 @@ function BlockToolbar({
   blockId,
   blockKind,
   content,
+  theme = null,
   headerClearancePx = 0
 }) {
   const uiStore = useEditorUiStoreInstance();
+  const editorBlockId = useMemo(() => unsafeAsEditorBlockId(blockId), [blockId]);
+  const draftContent = useEditorUiStore(
+    (state) => state.drafts.getCurrentValues(editorBlockId)
+  );
+  const customizeContent = useMemo(
+    () => isRecord3(draftContent) ? draftContent : content,
+    [content, draftContent]
+  );
+  const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
   const customizePanelId = useId();
   const customizeDescriptionId = `${customizePanelId}-description`;
   const focusTarget = useMemo(
-    () => computeDefaultFocus(blockKind, content),
-    [blockKind, content]
+    () => 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
+    historyFailure,
+    backgroundImagePool = [],
+    backgroundImagePoolStatus = "idle",
+    loadBackgroundImagePool = async () => []
   } = usePreviewPageDesignEditorState();
   const closeCustomize = useCallback(() => {
     setCustomizeOpen(false);
@@ -639,17 +673,80 @@ function BlockToolbar({
     designBlock && designBlock.availableLooks.length > 1
   );
   const facetControls = useMemo(
-    () => previewCustomizeFacetControlsFor(blockKind, content, designBlock),
-    [blockKind, content, designBlock]
+    () => previewCustomizeFacetControlsFor(blockKind, customizeContent, designBlock),
+    [blockKind, customizeContent, designBlock]
   );
   const hasFacetControls = facetControls.length > 0;
-  const hasCustomizeControls = hasLayoutControls || hasLookControls || hasFacetControls;
+  const currentBackground = useMemo(
+    () => parseBackgroundOverrideFromContent(customizeContent),
+    [customizeContent]
+  );
+  const mergedBackgroundImagePool = useMemo(
+    () => rankBackgroundImagePoolItems(
+      dedupeBackgroundImagePool([
+        ...currentBackground.kind === "supported" ? imagePoolForOverride(currentBackground.override) : [],
+        ...backgroundImagePool
+      ])
+    ),
+    [backgroundImagePool, currentBackground]
+  );
+  const backgroundCapability = useMemo(
+    () => designBlock ? resolveBackgroundCapability({
+      block: designBlock,
+      imagePool: mergedBackgroundImagePool,
+      palette: backgroundColorPalette
+    }) : null,
+    [backgroundColorPalette, designBlock, mergedBackgroundImagePool]
+  );
+  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 manifestCustomize = useBlockCustomizeControls({
+    blockId,
+    blockKind,
+    content: customizeContent,
+    uiStore,
+    theme,
+    maxQuickFields: MAX_QUICK_MANIFEST_FIELDS,
+    maxPopoverRows: MAX_CUSTOMIZE_POPOVER_ROWS,
+    builtInPopoverRows: builtInCustomizeRowCount
+  });
+  const quickManifestFields = manifestCustomize.quickFields;
+  const hasSidebarCustomizeControls = manifestCustomize.hasControls;
+  const hasOverflowCustomizeControls = manifestCustomize.hasOverflowControls;
+  const quickManifestBackend = manifestCustomize.backend;
+  const canCycleBackgroundMode = enabledBackgroundModeList.length > 1;
+  const canCycleBackgroundValue = currentBackground.kind === "supported" && backgroundCapability ? canCycleBackgroundOverrideValue(
+    currentBackground.override,
+    backgroundCapability
+  ) : false;
+  const hasCustomizeControls = hasLayoutControls || hasLookControls || hasFacetControls || hasBackgroundControls || quickManifestFields.length > 0 || hasSidebarCustomizeControls;
   const isSavingCustomize = isHistoryPending;
   useEffect(() => {
     if (!hasCustomizeControls) {
       setCustomizeOpen(false);
+      setBackgroundChooserOpen(false);
     }
   }, [hasCustomizeControls]);
+  useEffect(() => {
+    if (!customizeOpen) return;
+    setBackgroundColorPalette(readBackgroundColorPaletteSnapshot());
+  }, [customizeOpen, pageDesignState]);
+  useEffect(() => {
+    if (!customizeOpen || !backgroundCapability?.modes.includes("image")) {
+      return;
+    }
+    if (backgroundImagePoolStatus !== "idle") return;
+    void loadBackgroundImagePool();
+  }, [
+    backgroundCapability,
+    backgroundImagePoolStatus,
+    customizeOpen,
+    loadBackgroundImagePool
+  ]);
   const handleEdit = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -658,11 +755,23 @@ function BlockToolbar({
     state.setPreviewSidebarTab("editor");
     state.setDrawerOpen(true);
     state.requestFocus({
-      blockId: unsafeAsEditorBlockId(blockId),
+      blockId: editorBlockId,
       fieldPath: focusTarget.fieldPath,
       itemIndex: focusTarget.itemIndex
     });
   };
+  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();
@@ -697,13 +806,50 @@ function BlockToolbar({
     if (!action) return;
     saveBlockCustomizeAction(action);
   };
+  const handleBackgroundCycle = (action) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    saveBackgroundTransition(action);
+  };
+  const chooseBackgroundOverride = (override) => {
+    if (!designBlock) return;
+    const action = setPageDesignBlockBackground({
+      block: designBlock,
+      override,
+      currentContent: customizeContent,
+      imagePool: mergedBackgroundImagePool
+    });
+    if (!action) return;
+    saveBlockCustomizeAction(action);
+    setBackgroundChooserOpen(false);
+  };
+  const saveBackgroundTransition = (transition) => {
+    if (!designBlock || !backgroundCapability || currentBackground.kind !== "supported") {
+      return;
+    }
+    const plan = planBackgroundTransition(
+      currentBackground.override,
+      backgroundCapability,
+      transition
+    );
+    if (plan.kind !== "apply") return;
+    const action = setPageDesignBlockBackground({
+      block: designBlock,
+      override: plan.override,
+      currentContent: customizeContent,
+      imagePool: mergedBackgroundImagePool
+    });
+    if (!action) return;
+    saveBlockCustomizeAction(action);
+  };
   const saveBlockCustomizeAction = (action) => {
-    void applyPageDesignAction(action);
+    void applyPageDesignAction(action, { runtimeContent: customizeContent });
   };
   const toggleCustomize = (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!customizeOpen) {
+      inspectBlock();
       setCustomizeReturnFocusTarget(
         e.currentTarget instanceof HTMLElement ? e.currentTarget : customizeButtonRef.current
       );
@@ -739,7 +885,7 @@ function BlockToolbar({
             children: "Edit"
           }
         ),
-        customizeOpen && designBlock ? /* @__PURE__ */ jsxs(
+        customizeOpen && (designBlock || hasSidebarCustomizeControls) ? /* @__PURE__ */ jsxs(
           "div",
           {
             id: customizePanelId,
@@ -780,7 +926,7 @@ function BlockToolbar({
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                designBlock.layout && hasLayoutControls ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-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(
@@ -811,7 +957,7 @@ function BlockToolbar({
                     )
                   ] })
                 ] }) : 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,
+                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",
                   {
@@ -851,7 +997,114 @@ function BlockToolbar({
                   },
                   control.facetId
                 )),
-                hasLookControls ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                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) })
@@ -881,7 +1134,16 @@ function BlockToolbar({
                     )
                   ] })
                 ] }) : null,
-                historyFailure ? /* @__PURE__ */ jsx("p", { className: "text-xs text-red-700", children: historyFailure }) : 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
               ] })
             ]
           }
@@ -890,6 +1152,163 @@ function BlockToolbar({
     }
   );
 }
+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 ?? [];
+  const chooseFromClick = (override) => (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onChoose(override);
+  };
+  const chooseMediaValue = (value) => {
+    if (value?.type !== "image" || !value.assetId) return;
+    const parsed = parseMediaAssetId(value.assetId);
+    if (!parsed.ok) return;
+    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(
+      "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)
+      },
+      mode
+    )) }),
+    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(
+        "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
+      )) }),
+      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(
+        "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 }),
+          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__ */ 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) })
+            ] })
+          ] })
+        },
+        `${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);
+          }
+        },
+        mediaPickerOpenKey
+      ) }) : null
+    ] }) : null
+  ] });
+}
 function computeDefaultFocus(blockKind, content) {
   const definition = getBlockDefinition(blockKind);
   if (!definition?.manifest) {
@@ -959,6 +1378,125 @@ function lookLabel(block) {
   }
   return option?.label ?? "Selected look";
 }
+function backgroundOverrideLabel(override) {
+  switch (override.kind) {
+    case "default":
+      return "Default";
+    case "color":
+      return `Color: ${formatTokenLabel(override.token)}`;
+    case "gradient":
+      return `Gradient: ${gradientLabel(override.gradientId)}`;
+    case "image":
+      return "Image";
+  }
+}
+function backgroundOverrideValueLabel(override, imagePool) {
+  switch (override.kind) {
+    case "default":
+      return "Default";
+    case "color":
+      return formatTokenLabel(override.token);
+    case "gradient":
+      return gradientLabel(override.gradientId);
+    case "image":
+      return imagePool.find((item) => item.mediaId === override.mediaId)?.label ?? "Image";
+  }
+}
+function canCycleBackgroundOverrideValue(override, capability) {
+  switch (override.kind) {
+    case "default":
+      return false;
+    case "color":
+      return (capability.colorTokens?.length ?? 0) > 1;
+    case "gradient":
+      return (capability.gradientIds?.length ?? 0) > 1;
+    case "image":
+      return rankBackgroundImagePoolItems(capability.imagePool ?? []).length > 1;
+  }
+}
+function BackgroundPreviewSwatch({ override }) {
+  const baseClassName = "grid h-6 w-9 shrink-0 place-items-center overflow-hidden rounded-md border";
+  switch (override.kind) {
+    case "default":
+      return /* @__PURE__ */ jsx("span", { className: `${baseClassName} bg-background`, children: /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full border bg-muted" }) });
+    case "color":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: baseClassName,
+          style: { backgroundColor: tokenSwatchCss(override.token) }
+        }
+      );
+    case "gradient":
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: baseClassName,
+          style: { backgroundImage: gradientPreviewCss(override.gradientId) }
+        }
+      );
+    case "image":
+      return /* @__PURE__ */ jsx("span", { className: `${baseClassName} bg-muted`, children: /* @__PURE__ */ jsx(Image, { size: 15 }) });
+  }
+}
+function backgroundModeLabel(mode) {
+  return mode === "default" ? "Default" : formatVariantLabel(mode);
+}
+function gradientLabel(gradientId) {
+  return GRADIENT_PRESETS.find((preset) => preset.id === gradientId)?.name ?? formatVariantLabel(gradientId);
+}
+function imageSourceLabel(source) {
+  switch (source) {
+    case "current":
+      return "Current";
+    case "generated-ambient":
+      return "Generated";
+    case "previous-background":
+      return "Previous";
+    case "general-media":
+      return "Media library";
+  }
+}
+function tokenSwatchCss(token) {
+  return `rgb(var(--tb-${token}))`;
+}
+function gradientPreviewCss(gradientId) {
+  const preset = GRADIENT_PRESETS.find((candidate) => candidate.id === gradientId);
+  if (!preset) {
+    return "linear-gradient(135deg, rgb(var(--tb-primary)), rgb(var(--tb-secondary)))";
+  }
+  return gradientToCss(
+    preset,
+    Object.fromEntries(
+      preset.stops.map((stop) => [stop.color, tokenSwatchCss(stop.color)])
+    )
+  );
+}
+function readBackgroundColorPaletteSnapshot() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return null;
+  }
+  const rootStyle = window.getComputedStyle(document.documentElement);
+  const bodyStyle = document.body ? window.getComputedStyle(document.body) : null;
+  const entries = backgroundColorTokens.flatMap((token) => {
+    const value = rootStyle.getPropertyValue(`--tb-${token}`).trim() || bodyStyle?.getPropertyValue(`--tb-${token}`).trim() || "";
+    return value ? [[token, value]] : [];
+  });
+  return entries.length > 0 ? Object.fromEntries(entries) : null;
+}
+function formatTokenLabel(token) {
+  return formatVariantLabel(token.replace(/\//g, " "));
+}
+function dedupeBackgroundImagePool(items) {
+  const seen = /* @__PURE__ */ new Set();
+  const deduped = [];
+  for (const item of items) {
+    if (seen.has(item.mediaId)) continue;
+    seen.add(item.mediaId);
+    deduped.push(item);
+  }
+  return deduped;
+}
 function BoundaryControl({
   previousBlockId,
   nextBlockId,
@@ -1301,6 +1839,7 @@ function EditablePageRenderer(props) {
               blockId,
               blockKind: block.kind,
               content,
+              theme: props.theme,
               headerClearancePx: shouldClearHeaderForBlock(blockItemsForRender, blockIndex) ? headerClearancePx : 0
             }
           )
@@ -3094,11 +3633,11 @@ function renderPreviewDocument({
 }
 var previewContainerResponsiveEnabled = process.env.NEXT_PUBLIC_ENABLE_PREVIEW_CONTAINER_RESPONSIVE !== "false";
 var PreviewEditorSidebar = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorSidebar-4DXLYX2V.mjs');
+  const mod = await import('./PreviewEditorSidebar-QZG37QIF.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
 var PreviewEditorUI = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-CS5P4N3P.mjs');
+  const mod = await import('./PreviewEditorUI-AXIKSMZA.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {
@@ -3411,43 +3950,7 @@ function PreviewShellLayout({
       surfaceId
     }
   );
-  if (!isOpen) {
-    return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsx(PreviewDesignCoordinatorProvider, { children: /* @__PURE__ */ jsxs(
-      SiteChromeCustomizeProvider,
-      {
-        siteId,
-        apiClient,
-        theme,
-        themeId,
-        selectionId: themeSelectionId,
-        selectionVersion: themeSelectionVersion,
-        selectionUpdatedAt: themeSelectionUpdatedAt,
-        initialSelections: {
-          selectionVersion: themeSelectionVersion,
-          selectionUpdatedAt: themeSelectionUpdatedAt,
-          buttonPersonalityId: themeSelectionButtonPersonalityId,
-          paletteVariantId: themeSelectionPaletteVariantId,
-          paletteOverrides: themeSelectionPaletteOverrides,
-          headerLayoutId: themeSelectionHeaderLayoutId,
-          headerStyleId: themeSelectionHeaderStyleId,
-          typographyPresetId: themeSelectionTypographyPresetId,
-          typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
-          typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
-          headerLookId: themeSelectionHeaderLookId,
-          footerLookId: themeSelectionFooterLookId
-        },
-        headerSelectionContext: themeSelectionHeaderContext,
-        footerSelectionContext: themeSelectionFooterContext,
-        siteStyleAccess,
-        children: [
-          editorUI,
-          previewBanner,
-          /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden bg-background", children: leftPane })
-        ]
-      }
-    ) }) });
-  }
-  return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsx(PreviewDesignCoordinatorProvider, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(PreviewThemeOverlayProvider, { baseTheme: theme, children: /* @__PURE__ */ jsx(PreviewDesignCoordinatorProvider, { children: /* @__PURE__ */ jsx(
     SiteChromeCustomizeProvider,
     {
       siteId,
@@ -3474,10 +3977,10 @@ function PreviewShellLayout({
       headerSelectionContext: themeSelectionHeaderContext,
       footerSelectionContext: themeSelectionFooterContext,
       siteStyleAccess,
-      children: [
+      children: /* @__PURE__ */ jsxs(PreviewBlockCustomizeSelectionProvider, { children: [
         editorUI,
         previewBanner,
-        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden bg-background", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "fixed inset-0 overflow-hidden bg-background", children: isOpen ? /* @__PURE__ */ jsx(
           ResizableSplitPane,
           {
             left: leftPane,
@@ -3492,8 +3995,8 @@ function PreviewShellLayout({
             onSplitChange: (split) => handleSidebarWidthChange(100 - split),
             splitPercent: 100 - sidebarWidth
           }
-        ) })
-      ]
+        ) : leftPane })
+      ] })
     }
   ) }) });
 }
@@ -3574,59 +4077,69 @@ function PreviewShell({
           initialBlocks,
           pageMetadata,
           apiClient,
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx(
             PreviewPageDesignEditorStateProvider,
             {
               apiClient,
               siteId,
               pageId,
               enabled: designEditorEnabled,
-              children: [
-                /* @__PURE__ */ jsx(PreviewKeepAliveClient, { baseFetch }),
-                /* @__PURE__ */ jsx(
-                  PreviewShellLayout,
-                  {
-                    theme,
-                    surfaceId,
-                    siteId,
-                    dashboardBaseUrl,
-                    pageId,
-                    entryData: entryData ?? null,
-                    contentTypeSchema,
-                    referenceContentTypeKeys,
-                    draftContent,
-                    currentTemplate,
-                    apiClient,
-                    bearerToken: previewToken,
-                    themeId,
-                    themeSelectionId,
-                    themeSelectionVersion,
-                    themeSelectionUpdatedAt,
-                    themeSelectionButtonPersonalityId,
-                    themeSelectionPaletteVariantId,
-                    themeSelectionPaletteOverrides,
-                    themeSelectionHeaderLayoutId,
-                    themeSelectionHeaderStyleId,
-                    themeSelectionTypographyPresetId,
-                    themeSelectionTypographyBodyFontOverride,
-                    themeSelectionTypographyHeadingFontOverride,
-                    themeSelectionHeaderLookId,
-                    themeSelectionFooterLookId,
-                    themeSelectionHeaderContext,
-                    themeSelectionFooterContext,
-                    supabaseUrl,
-                    isSiteLaunched,
-                    maintenanceModeEnabled,
-                    entrySubrouteContext,
-                    assistantPanel,
-                    sdkConfig: sdkConfig ?? null,
-                    mediaAssets,
-                    useThemeScope,
-                    siteStyleAccess,
-                    children
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsxs(
+                MediaEditorProvider,
+                {
+                  siteId,
+                  apiClient,
+                  bearerToken: previewToken,
+                  supabaseUrl,
+                  mediaAssets,
+                  children: [
+                    /* @__PURE__ */ jsx(PreviewKeepAliveClient, { baseFetch }),
+                    /* @__PURE__ */ jsx(
+                      PreviewShellLayout,
+                      {
+                        theme,
+                        surfaceId,
+                        siteId,
+                        dashboardBaseUrl,
+                        pageId,
+                        entryData: entryData ?? null,
+                        contentTypeSchema,
+                        referenceContentTypeKeys,
+                        draftContent,
+                        currentTemplate,
+                        apiClient,
+                        bearerToken: previewToken,
+                        themeId,
+                        themeSelectionId,
+                        themeSelectionVersion,
+                        themeSelectionUpdatedAt,
+                        themeSelectionButtonPersonalityId,
+                        themeSelectionPaletteVariantId,
+                        themeSelectionPaletteOverrides,
+                        themeSelectionHeaderLayoutId,
+                        themeSelectionHeaderStyleId,
+                        themeSelectionTypographyPresetId,
+                        themeSelectionTypographyBodyFontOverride,
+                        themeSelectionTypographyHeadingFontOverride,
+                        themeSelectionHeaderLookId,
+                        themeSelectionFooterLookId,
+                        themeSelectionHeaderContext,
+                        themeSelectionFooterContext,
+                        supabaseUrl,
+                        isSiteLaunched,
+                        maintenanceModeEnabled,
+                        entrySubrouteContext,
+                        assistantPanel,
+                        sdkConfig: sdkConfig ?? null,
+                        mediaAssets,
+                        useThemeScope,
+                        siteStyleAccess,
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         }