@riverbankcms/sdk 0.78.2 → 0.79.0

package/dist/{chunk-RGTOD4AJ.mjs → chunk-4HCW7FHJ.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-A3HHFKVT.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-LCY32PXF.mjs';
+import { resolvePreviewChromeSurface, getPreviewSidebarTab, onPreviewSidebarOpenRequest, getPreviewChromeSurfaceDataProps, PREVIEW_CHROME_THEME_CLASS_NAME, setPreviewSidebarTab, PreviewPageDesignEditorStateProvider, usePreviewPageDesignEditorState, PREVIEW_SURFACE_PARAM } from './chunk-GP555I66.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, 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, Image, useMediaEditorOptional, defaultBackgroundOverrideForMode, Upload, MediaEditor, visibleHeaderClearancePx, systemCustomizeFacetNextValue, GRADIENT_PRESETS, planBackgroundTransition, parseMediaAssetId, planBackgroundOverride, EDITABLE_SURFACE_FORWARDING_PROP, assertNever, SITE_CHROME_VISIBLE_HEADER_SELECTOR } from './chunk-V47ZU33I.mjs';
+import { API_ENDPOINTS, createBearerAPIClient, isPreviewRuntimeSessionEditable, DEFAULT_SURFACE_ID, initPreviewAuth, usePreviewAuth, usePreviewAuthFetch, markPreviewAuthExpired, usePreviewToken, parseSurfaceId } from './chunk-K2IIF34C.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);
@@ -604,12 +623,16 @@ function BlockToolbar({
     [blockKind, content]
   );
   const [customizeOpen, setCustomizeOpen] = useState(false);
+  const [backgroundChooserOpen, setBackgroundChooserOpen] = useState(false);
   const customizeButtonRef = useRef(null);
   const {
     state: pageDesignState,
     applyAction: applyPageDesignAction,
     isHistoryPending,
-    historyFailure
+    historyFailure,
+    backgroundImagePool = [],
+    backgroundImagePoolStatus = "idle",
+    loadBackgroundImagePool = async () => []
   } = usePreviewPageDesignEditorState();
   const closeCustomize = useCallback(() => {
     setCustomizeOpen(false);
@@ -643,13 +666,51 @@ function BlockToolbar({
     [blockKind, content, designBlock]
   );
   const hasFacetControls = facetControls.length > 0;
-  const hasCustomizeControls = hasLayoutControls || hasLookControls || hasFacetControls;
+  const currentBackground = useMemo(
+    () => parseBackgroundOverrideFromContent(content),
+    [content]
+  );
+  const mergedBackgroundImagePool = useMemo(
+    () => rankBackgroundImagePoolItems(
+      dedupeBackgroundImagePool([
+        ...currentBackground.kind === "supported" ? imagePoolForOverride(currentBackground.override) : [],
+        ...backgroundImagePool
+      ])
+    ),
+    [backgroundImagePool, currentBackground]
+  );
+  const backgroundCapability = useMemo(
+    () => designBlock ? resolveBackgroundCapability({
+      block: designBlock,
+      imagePool: mergedBackgroundImagePool
+    }) : null,
+    [designBlock, mergedBackgroundImagePool]
+  );
+  const enabledBackgroundModeList = useMemo(
+    () => backgroundCapability ? enabledBackgroundModes(backgroundCapability) : [],
+    [backgroundCapability]
+  );
+  const hasBackgroundControls = currentBackground.kind === "supported" && enabledBackgroundModeList.length > 1;
+  const hasCustomizeControls = hasLayoutControls || hasLookControls || hasFacetControls || hasBackgroundControls;
   const isSavingCustomize = isHistoryPending;
   useEffect(() => {
     if (!hasCustomizeControls) {
       setCustomizeOpen(false);
+      setBackgroundChooserOpen(false);
     }
   }, [hasCustomizeControls]);
+  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();
@@ -697,6 +758,42 @@ 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: content,
+      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: content,
+      imagePool: mergedBackgroundImagePool
+    });
+    if (!action) return;
+    saveBlockCustomizeAction(action);
+  };
   const saveBlockCustomizeAction = (action) => {
     void applyPageDesignAction(action);
   };
@@ -851,6 +948,100 @@ function BlockToolbar({
                   },
                   control.facetId
                 )),
+                hasBackgroundControls && currentBackground.kind === "supported" && backgroundCapability ? /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex min-w-0 items-center gap-2 text-left",
+                        "aria-expanded": backgroundChooserOpen,
+                        onClick: (event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          setBackgroundChooserOpen((open) => !open);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(BackgroundPreviewSwatch, { override: currentBackground.override }),
+                          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Background" }),
+                            /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted-foreground", children: backgroundOverrideLabel(currentBackground.override) })
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center 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",
+                            "aria-label": "Previous background mode",
+                            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: handleBackgroundCycle({
+                              kind: "cycle-mode",
+                              direction: "next"
+                            }),
+                            className: "grid h-8 w-8 place-items-center border-l hover:bg-muted",
+                            "aria-label": "Next background mode",
+                            children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center 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: currentBackground.override.kind === "default",
+                            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: handleBackgroundCycle({
+                              kind: "cycle-value",
+                              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 background value",
+                            disabled: currentBackground.override.kind === "default",
+                            children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] }),
+                  backgroundChooserOpen ? /* @__PURE__ */ jsx(
+                    BackgroundChooser,
+                    {
+                      capability: backgroundCapability,
+                      current: currentBackground.override,
+                      enabledModes: enabledBackgroundModeList,
+                      imagePoolStatus: backgroundImagePoolStatus,
+                      onChoose: chooseBackgroundOverride
+                    }
+                  ) : null
+                ] }) : null,
                 hasLookControls ? /* @__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" }),
@@ -890,6 +1081,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 +1307,83 @@ 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 BackgroundPreviewSwatch({ override }) {
+  const baseClassName = "grid h-8 w-10 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)))";
+  const stops = preset.stops.map((stop) => `${tokenSwatchCss(stop.color)} ${stop.position}%`).join(", ");
+  return preset.type === "radial" ? `radial-gradient(circle, ${stops})` : `linear-gradient(${preset.angle ?? 135}deg, ${stops})`;
+}
+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,
@@ -3094,11 +3519,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-56NMJMIK.mjs');
   return { default: mod.PreviewEditorSidebar };
 });
 var PreviewEditorUI = React9.lazy(async () => {
-  const mod = await import('./PreviewEditorUI-CS5P4N3P.mjs');
+  const mod = await import('./PreviewEditorUI-27KJVEET.mjs');
   return { default: mod.PreviewEditorUI };
 });
 var previewPaneContainmentStyle = {
@@ -3574,59 +3999,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
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         }

package/dist/{chunk-OKMBEAXY.mjs → chunk-A3HHFKVT.mjs}

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