@riverbankcms/sdk 0.80.0 → 0.81.0

package/dist/{PreviewEditorSidebar-QZG37QIF.mjs → PreviewEditorSidebar-RDCMEXIJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
-import { resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSidebarChromeModel, resolvePreviewEditorGuidanceModel, ButtonVariantField, IconPickerField, EntryPickerField, ReferenceField, RichTextField, MediaField, FileField, LinkField, canInspectSiteStyle, mapContentSchemaToFormFields, usePreviewBlockCustomizeSelectionOptional, BlockEditor, usePreviewDesignCoordinator, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, createOptimisticActionRunner, syncStyleConfiguratorState, isPreviewingChange, planSiteStylePreviewChange, openRow, previewSiteStyle, applyResolvedSelections, previewButtonPersonality, previewHeaderLayout, previewHeaderStyle, planSiteChromeLookSelection, previewFooterLook, previewPaletteVariant, previewTypographyPreset, setTypographyBodyFontOverride, setTypographyHeadingFontOverride, clearTypographyFontOverrides, setPaletteOverrides, toggleRow, cancelPreview, dismissWarnings, dismissNotices, markApplyFailed, markApplySaved, markApplySaving, canApplySiteStyle, buildSiteChromeLookModels, cycleSiteChromeLookId, LinkWidgetProvider, ReferenceWidgetProvider, EntryPickerWidgetProvider, ButtonWidgetProvider, cycleableSiteChromeOptions, BUILT_IN_REFERENCE_KINDS, useRichTextImagePicker, RichTextWidgetProvider, useBlockCustomizeControls, MAX_QUICK_MANIFEST_FIELDS, parseReferenceKind } from './chunk-5NZGBSJF.mjs';
-import { unwrapResponse, useEntryController, useEditorUiStoreInstance, useUISelector, resolvePreviewSidebarTab, BackgroundGradientField, BackgroundColorField, unsafeAsEditorBlockId, Tabs, TabsList, TabsTrigger, Button, X, TabsContent, omitRouteTitleFieldFromManifest, getRouteMetadataManifestForType, createManifestValidation, createStoreBackend, ManifestForm, previewAssistantEnabled, Collapsible, CollapsibleTrigger, ChevronRight, CollapsibleContent, ContentFieldsForm, getCuratedSiteStyle, paletteOverridesSchema, findButtonPersonality, findPaletteVariant, findTypographyPreset, getHeaderLayout, getHeaderStyle, findFooterLook, footerLookCatalog, foldSubroute, SUBROUTE_KINDS, Smartphone, Tablet, Monitor, Maximize2, cn, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, expectParsedBrandedId, parseSiteId, buildThemeRuntime, SdkConfigProvider, PaletteProvider, MediaEditorProvider, curatedSiteStyles, ChevronLeft, requireEntriesForCuratedChoices, buttonPersonalities, typographyPresets, paletteVariants, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, FormRenderer, evaluateTypographyFontSlot, Callout, CalloutDescription, Separator, Surface, ColorPicker, Input } from './chunk-GYXKAUFV.mjs';
-import { usePreviewAuth, getDashboardUrl } from './chunk-BBLZSQEY.mjs';
+import { resolvePreviewDashboardSetupHandoff, buildPreviewDashboardSetupUrl, resolvePreviewSidebarChromeModel, resolvePreviewEditorGuidanceModel, SiteOptionPickerField, ButtonVariantField, IconPickerField, EntryPickerField, ReferenceField, RichTextField, MediaField, FileField, LinkField, canInspectSiteStyle, mapContentSchemaToFormFields, usePreviewBlockCustomizeSelectionOptional, BlockEditor, canApplySiteStyle, LinkWidgetProvider, ReferenceWidgetProvider, EntryPickerWidgetProvider, SiteOptionWidgetProvider, ButtonWidgetProvider, createSiteOptionWidgetAdapters, createSiteOptionApiLoader, BUILT_IN_REFERENCE_KINDS, useRichTextImagePicker, RichTextWidgetProvider, useBlockCustomizeControls, MAX_QUICK_MANIFEST_FIELDS, parseReferenceKind } from './chunk-3QWQ2MUQ.mjs';
+import { unwrapResponse, useEntryController, useEditorUiStoreInstance, useUISelector, resolvePreviewSidebarTab, BackgroundGradientField, BackgroundColorField, unsafeAsEditorBlockId, Tabs, TabsList, TabsTrigger, Button, X, TabsContent, useEditorUiStore, deriveRouteMetadataPresentation, resolvePageRouteSlug, createManifestValidation, createStoreBackend, ManifestForm, previewAssistantEnabled, Collapsible, CollapsibleTrigger, ChevronRight, CollapsibleContent, ContentFieldsForm, usePreviewDesignCoordinator, useSiteChromeCustomizeOptional, resolveStyleConfiguratorInitialSnapshot, createStyleConfiguratorState, isPreviewingChange, createOptimisticActionRunner, syncStyleConfiguratorState, getCuratedSiteStyle, planSiteStylePreviewChange, openRow, previewSiteStyle, applyResolvedSelections, previewButtonPersonality, previewHeaderLayout, previewHeaderStyle, planSiteChromeLookSelection, previewFooterLook, previewPaletteVariant, previewTypographyPreset, setTypographyBodyFontOverride, setTypographyHeadingFontOverride, clearTypographyFontOverrides, paletteOverridesSchema, setPaletteOverrides, toggleRow, cancelPreview, dismissWarnings, dismissNotices, deriveStyleConfiguratorCapabilities, buildApplySiteStyleSelectionBody, markApplyFailed, selectionSnapshotFromApplySiteStyleSelectionResponse, styleConfiguratorHistoryEntryForPersistedSelection, markApplySaved, markApplySaving, findButtonPersonality, findPaletteVariant, findTypographyPreset, buildSiteChromeLookModels, getHeaderLayout, getHeaderStyle, findFooterLook, cycleSiteChromeLookId, footerLookCatalog, resolveContentTitle, foldSubroute, SUBROUTE_KINDS, Smartphone, Tablet, Monitor, Maximize2, cn, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem, expectParsedBrandedId, parseSiteId, buildThemeRuntime, SdkConfigProvider, PaletteProvider, MediaEditorProvider, curatedSiteStyles, ChevronLeft, cycleableSiteChromeOptions, requireEntriesForCuratedChoices, buttonPersonalities, typographyPresets, paletteVariants, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, FormRenderer, evaluateTypographyFontSlot, Callout, CalloutDescription, Separator, Surface, ColorPicker, Input } from './chunk-WUHKQBB6.mjs';
+import { usePreviewAuth, getDashboardUrl } from './chunk-E3NZYEKF.mjs';
 import './chunk-R7POPVJR.mjs';
 import { useMemo, useRef, useCallback, useEffect, useState, useTransition, useSyncExternalStore, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -216,6 +216,7 @@ var referenceLoaders = {
 // ../preview-next/src/client/widgets/widgetAdapters.ts
 var routableContentCache = /* @__PURE__ */ new Map();
 var entryPickerCache = /* @__PURE__ */ new Map();
+var siteOptionItemsCache = /* @__PURE__ */ new Map();
 var referenceItemsCache = /* @__PURE__ */ new Map();
 var dynamicReferenceItemsCache = /* @__PURE__ */ new Map();
 var MAX_CACHE_ENTRIES = 50;
@@ -332,6 +333,28 @@ function createPreviewEntryPickerAdapter(previewClient) {
     }
   };
 }
+function createCachedSiteOptionLoader(loadItems) {
+  return async ({ siteId, source }) => {
+    const cacheKey = `${source}:${siteId}`;
+    const cached = siteOptionItemsCache.get(cacheKey);
+    if (cached) return cached;
+    const promise = (async () => {
+      try {
+        return await loadItems({ siteId, source });
+      } catch (error) {
+        siteOptionItemsCache.delete(cacheKey);
+        throw error;
+      }
+    })();
+    setBoundedCache(siteOptionItemsCache, cacheKey, promise);
+    return promise;
+  };
+}
+function createPreviewSiteOptionAdapters(previewClient) {
+  return createSiteOptionWidgetAdapters({
+    loadItems: createCachedSiteOptionLoader(createSiteOptionApiLoader(previewClient))
+  });
+}
 var previewReferenceChrome = {
   post: {
     labels: {
@@ -429,6 +452,7 @@ function PreviewFormProvider({
   const siteId = useMemo(() => expectParsedBrandedId(parseSiteId(rawSiteId)), [rawSiteId]);
   const linkAdapters = useMemo(() => createPreviewLinkAdapters(previewClient), [previewClient]);
   const entryPickerAdapter = useMemo(() => createPreviewEntryPickerAdapter(previewClient), [previewClient]);
+  const siteOptionAdapters = useMemo(() => createPreviewSiteOptionAdapters(previewClient), [previewClient]);
   const referenceAdapters = useMemo(
     () => createPreviewReferenceAdapters(previewClient),
     [previewClient]
@@ -442,7 +466,7 @@ function PreviewFormProvider({
       return void 0;
     }
   }, [theme]);
-  return /* @__PURE__ */ jsx(SdkConfigProvider, { sdkConfig: sdkConfig ?? null, children: /* @__PURE__ */ jsx(PaletteProvider, { tokens: paletteTokens, children: /* @__PURE__ */ jsx(LinkWidgetProvider, { siteId, adapters: linkAdapters, children: /* @__PURE__ */ jsx(ReferenceWidgetProvider, { siteId, adapters: referenceAdapters, children: /* @__PURE__ */ jsx(EntryPickerWidgetProvider, { siteId, adapter: entryPickerAdapter, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SdkConfigProvider, { sdkConfig: sdkConfig ?? null, children: /* @__PURE__ */ jsx(PaletteProvider, { tokens: paletteTokens, children: /* @__PURE__ */ jsx(LinkWidgetProvider, { siteId, adapters: linkAdapters, children: /* @__PURE__ */ jsx(ReferenceWidgetProvider, { siteId, adapters: referenceAdapters, children: /* @__PURE__ */ jsx(EntryPickerWidgetProvider, { siteId, adapter: entryPickerAdapter, children: /* @__PURE__ */ jsx(SiteOptionWidgetProvider, { siteId, adapters: siteOptionAdapters, children: /* @__PURE__ */ jsx(
     MediaEditorProvider,
     {
       siteId,
@@ -452,7 +476,7 @@ function PreviewFormProvider({
       mediaAssets,
       children: /* @__PURE__ */ jsx(ButtonWidgetProvider, { buttonSystem: theme?.buttons ?? null, children: /* @__PURE__ */ jsx(PreviewFormProviderInner, { theme, children }) })
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 var previewWidgetOverrides = {
   link: LinkField,
@@ -464,7 +488,8 @@ var previewWidgetOverrides = {
   backgroundGradient: BackgroundGradientField,
   entryPicker: EntryPickerField,
   iconPicker: IconPickerField,
-  buttonVariant: ButtonVariantField
+  buttonVariant: ButtonVariantField,
+  siteOptionPicker: SiteOptionPickerField
 };
 function PreviewZoomControls({ zoom, onZoomChange, disabled }) {
   return /* @__PURE__ */ jsxs(
@@ -550,6 +575,25 @@ function PreviewViewportControls({
     showZoomControls ? /* @__PURE__ */ jsx(PreviewZoomControls, { zoom, onZoomChange }) : null
   ] });
 }
+function PreviewSidebarSection({
+  label,
+  defaultOpen = false,
+  openRequestId = null,
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen || openRequestId !== null);
+  useEffect(() => {
+    if (openRequestId === null) return;
+    setOpen(true);
+  }, [openRequestId]);
+  return /* @__PURE__ */ jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
+    /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
+      /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${open ? "rotate-90" : ""}` }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: label })
+    ] }) }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children })
+  ] }) });
+}
 function SubrouteNotice({ model }) {
   return /* @__PURE__ */ jsxs("div", { className: "border-b bg-amber-50 px-4 py-3 text-amber-950", children: [
     /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: model.title }),
@@ -607,6 +651,7 @@ function EntryEditorPanel({
   supabaseUrl,
   entrySubrouteContext,
   metadataPanel,
+  linkedEntrySection,
   mediaAssets,
   widgets,
   viewportMode,
@@ -659,6 +704,14 @@ function EntryEditorPanel({
     ) }),
     subrouteNotice ? /* @__PURE__ */ jsx(SubrouteNotice, { model: subrouteNotice }) : null,
     /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 space-y-0 overflow-auto", children: [
+      linkedEntrySection ? /* @__PURE__ */ jsx(
+        PreviewSidebarSection,
+        {
+          label: linkedEntrySection.label,
+          openRequestId: linkedEntrySection.openRequestId,
+          children: linkedEntrySection.content
+        }
+      ) : null,
       contentTypeSchema && entryData.type ? /* @__PURE__ */ jsx(Collapsible, { open: contentOpen, onOpenChange: setContentOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
         /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
           /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${contentOpen ? "rotate-90" : ""}` }),
@@ -812,7 +865,7 @@ function SelectedBlockCustomizeFields({
       )
     ] }) : null,
     panelFields.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "More settings" }),
+      /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase text-muted-foreground", children: "More controls" }),
       /* @__PURE__ */ jsx(
         FormRenderer,
         {
@@ -853,6 +906,7 @@ function PageBlockEditorPanel({
   blockEditorRef,
   onBlocksChange,
   metadataPanel,
+  linkedEntrySection,
   designPanel,
   sdkConfig,
   mediaAssets,
@@ -870,6 +924,17 @@ function PageBlockEditorPanel({
   const [detailsOpen, setDetailsOpen] = useState(false);
   const selectionKind = customizeSelection?.selection.kind;
   const selectionRequestId = customizeSelection?.selection.kind === "selected" ? customizeSelection.selection.requestId : 0;
+  const handleCustomizeBlock = useCallback(
+    (blockId) => {
+      customizeSelection?.inspectBlock(blockId);
+      setCustomizeOpen(true);
+    },
+    [customizeSelection]
+  );
+  const blockActionPresentation = useMemo(
+    () => customizeSelection ? { kind: "menu", customize: { kind: "external", onSelect: handleCustomizeBlock } } : { kind: "menu", customize: { kind: "modal" } },
+    [customizeSelection, handleCustomizeBlock]
+  );
   useEffect(() => {
     if (selectionKind === "selected") {
       setCustomizeOpen(true);
@@ -898,6 +963,14 @@ function PageBlockEditorPanel({
         mediaAssets,
         sdkConfig: sdkConfig ?? null,
         children: /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 space-y-0 overflow-auto", children: [
+          linkedEntrySection ? /* @__PURE__ */ jsx(
+            PreviewSidebarSection,
+            {
+              label: linkedEntrySection.label,
+              openRequestId: linkedEntrySection.openRequestId,
+              children: linkedEntrySection.content
+            }
+          ) : null,
           designPanel ? /* @__PURE__ */ jsx(Collapsible, { open: designOpen, onOpenChange: setDesignOpen, children: /* @__PURE__ */ jsxs("div", { className: "border-b", children: [
             /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40", children: [
               /* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${designOpen ? "rotate-90" : ""}` }),
@@ -935,10 +1008,10 @@ function PageBlockEditorPanel({
                 uiStore: uiStoreForBlockEditor,
                 apiClient,
                 onBlocksChange,
+                actionPresentation: blockActionPresentation,
                 widgetOverrides: previewWidgetOverrides,
                 sdkConfig: sdkConfig ?? null,
-                reorderControlMode: "drag-handle-only",
-                actionControlMode: "menu"
+                reorderControlMode: "drag-handle-only"
               },
               pageId
             ) }) })
@@ -1184,25 +1257,6 @@ function ContrastSwatch({ hex, label }) {
     ] })
   ] });
 }
-
-// ../preview-next/src/client/preview/styleConfiguratorApplyPayload.ts
-function buildApplySiteStyleSelectionBody(input) {
-  return {
-    siteStyleId: input.previewed.siteStyleId,
-    buttonPersonalityId: input.previewed.buttonPersonalityId,
-    paletteVariantId: input.previewed.paletteVariantId,
-    paletteOverrides: input.previewed.paletteOverrides,
-    typographyPresetId: input.previewed.typographyPresetId,
-    typographyBodyFontOverride: input.previewed.typographyBodyFontOverride,
-    typographyHeadingFontOverride: input.previewed.typographyHeadingFontOverride,
-    headerLookId: input.previewed.headerLookId,
-    headerLayoutId: input.previewed.headerLayoutId,
-    headerStyleId: input.previewed.headerStyleId,
-    footerLookId: input.previewed.footerLookId,
-    baseSelectionVersion: input.base.selectionVersion,
-    selectionId: input.selectionId ?? null
-  };
-}
 var MAX_FONT_RESULTS_WHEN_SEARCHING = 12;
 var MAX_FONT_RESULTS_WHEN_BROWSING = 8;
 var PALETTE_BRAND_ROLES = [
@@ -1239,6 +1293,8 @@ function StyleConfigurator({
 }) {
   const router = useRouter();
   const previewDesign = usePreviewDesignCoordinator();
+  const siteChromeCustomize = useSiteChromeCustomizeOptional();
+  const setSiteStyleStagedPreviewActive = siteChromeCustomize?.siteStyleHistory.setStagedPreviewActive;
   const {
     applyFailed,
     applyStarted,
@@ -1258,12 +1314,20 @@ function StyleConfigurator({
       headerSelectionContext,
       footerSelectionContext
     }),
-    [footerSelectionContext, headerSelectionContext, theme, initialSelections, selectionUpdatedAt, selectionVersion]
+    [
+      footerSelectionContext,
+      headerSelectionContext,
+      theme,
+      initialSelections,
+      selectionUpdatedAt,
+      selectionVersion
+    ]
   );
   const [state, setState] = useState(
     () => baseSnapshot ? createStyleConfiguratorState(baseSnapshot) : null
   );
   const hasLoadedState = state !== null;
+  const hasStagedSiteStylePreview = state ? isPreviewingChange(state) : false;
   const stateRef = useRef(state);
   const clearPreviewRef = useRef(clearPreview);
   const runnerRef = useRef(createOptimisticActionRunner());
@@ -1274,9 +1338,18 @@ function StyleConfigurator({
   useEffect(() => {
     clearPreviewRef.current = clearPreview;
   }, [clearPreview]);
+  useEffect(() => {
+    if (!setSiteStyleStagedPreviewActive) return;
+    setSiteStyleStagedPreviewActive(hasStagedSiteStylePreview);
+    return () => {
+      setSiteStyleStagedPreviewActive(false);
+    };
+  }, [hasStagedSiteStylePreview, setSiteStyleStagedPreviewActive]);
   useEffect(() => {
     if (!baseSnapshot) return;
-    setState((current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot));
+    setState(
+      (current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot)
+    );
   }, [baseSnapshot]);
   useEffect(() => {
     if (!state || !baseSnapshot) {
@@ -1300,7 +1373,15 @@ function StyleConfigurator({
       footerSelectionContext
     });
     previewTheme("style-configurator", result.themeOverlay, "site-style");
-  }, [state, baseSnapshot, clearPreview, previewTheme, headerSelectionContext, footerSelectionContext, theme]);
+  }, [
+    state,
+    baseSnapshot,
+    clearPreview,
+    previewTheme,
+    headerSelectionContext,
+    footerSelectionContext,
+    theme
+  ]);
   useEffect(() => {
     const runner = runnerRef.current;
     return () => {
@@ -1314,34 +1395,44 @@ function StyleConfigurator({
     setState((current) => {
       if (!current) return current;
       appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
-      return openRow(current, expandedRowRequest.row === "header" ? "header-layout" : expandedRowRequest.row);
+      return openRow(
+        current,
+        expandedRowRequest.row === "header" ? "header-layout" : expandedRowRequest.row
+      );
     });
   }, [expandedRowRequest, hasLoadedState]);
-  const handlePreviewSiteStyle = useCallback((siteStyleId) => {
-    setState((current) => {
-      if (!current) return current;
-      const next = previewSiteStyle(current, siteStyleId);
-      const siteStyle = getCuratedSiteStyle(siteStyleId);
-      if (!siteStyle) return next;
-      const result = planSiteStylePreviewChange({
-        siteStyle,
-        selection: next.previewed,
-        baseTheme: theme,
-        headerSelectionContext,
-        footerSelectionContext
-      });
-      return applyResolvedSelections(next, {
-        resolved: result.resolvedSelections,
-        warnings: result.warnings
+  const handlePreviewSiteStyle = useCallback(
+    (siteStyleId) => {
+      setState((current) => {
+        if (!current) return current;
+        const next = previewSiteStyle(current, siteStyleId);
+        const siteStyle = getCuratedSiteStyle(siteStyleId);
+        if (!siteStyle) return next;
+        const result = planSiteStylePreviewChange({
+          siteStyle,
+          selection: next.previewed,
+          baseTheme: theme,
+          headerSelectionContext,
+          footerSelectionContext
+        });
+        return applyResolvedSelections(next, {
+          resolved: result.resolvedSelections,
+          warnings: result.warnings
+        });
       });
-    });
-  }, [footerSelectionContext, headerSelectionContext, theme]);
+    },
+    [footerSelectionContext, headerSelectionContext, theme]
+  );
   const handlePreviewPersonality = useCallback((id) => {
-    setState((current) => current ? previewButtonPersonality(current, id) : current);
+    setState(
+      (current) => current ? previewButtonPersonality(current, id) : current
+    );
   }, []);
   const handlePreviewHeaderLayout = useCallback((id) => {
     if (!id) return;
-    setState((current) => current ? previewHeaderLayout(current, id) : current);
+    setState(
+      (current) => current ? previewHeaderLayout(current, id) : current
+    );
   }, []);
   const handlePreviewHeaderStyle = useCallback((id) => {
     if (!id) return;
@@ -1350,34 +1441,54 @@ function StyleConfigurator({
   const handlePreviewFooterLook = useCallback((id) => {
     const plan = planSiteChromeLookSelection({ surface: "footer", lookId: id });
     if (plan.kind !== "footer") return;
-    setState((current) => current ? previewFooterLook(current, plan.next.footerLookId) : current);
+    setState(
+      (current) => current ? previewFooterLook(current, plan.next.footerLookId) : current
+    );
   }, []);
   const handlePreviewPalette = useCallback((id) => {
-    setState((current) => current ? previewPaletteVariant(current, id) : current);
-  }, []);
-  const handlePreviewTypographyPreset = useCallback((id) => {
-    setState((current) => current ? previewTypographyPreset(current, id) : current);
+    setState(
+      (current) => current ? previewPaletteVariant(current, id) : current
+    );
   }, []);
+  const handlePreviewTypographyPreset = useCallback(
+    (id) => {
+      setState(
+        (current) => current ? previewTypographyPreset(current, id) : current
+      );
+    },
+    []
+  );
   const handleBodyFontOverride = useCallback((fontFamily) => {
-    setState((current) => current ? setTypographyBodyFontOverride(current, fontFamily) : current);
+    setState(
+      (current) => current ? setTypographyBodyFontOverride(current, fontFamily) : current
+    );
   }, []);
   const handleHeadingFontOverride = useCallback((fontFamily) => {
-    setState((current) => current ? setTypographyHeadingFontOverride(current, fontFamily) : current);
+    setState(
+      (current) => current ? setTypographyHeadingFontOverride(current, fontFamily) : current
+    );
   }, []);
   const handleClearTypographyOverrides = useCallback(() => {
-    setState((current) => current ? clearTypographyFontOverrides(current) : current);
+    setState(
+      (current) => current ? clearTypographyFontOverrides(current) : current
+    );
   }, []);
   const handleTokenOverride = useCallback((role, hex) => {
     setState((current) => {
       if (!current) return current;
-      const next = { ...current.previewed.paletteOverrides ?? {}, [role]: hex };
+      const next = {
+        ...current.previewed.paletteOverrides ?? {},
+        [role]: hex
+      };
       const parsed = paletteOverridesSchema.safeParse(next);
       if (!parsed.success) return current;
       return setPaletteOverrides(current, parsed.data);
     });
   }, []);
   const handleResetOverrides = useCallback(() => {
-    setState((current) => current ? setPaletteOverrides(current, null) : current);
+    setState(
+      (current) => current ? setPaletteOverrides(current, null) : current
+    );
   }, []);
   const handleToggleRow = useCallback((row) => {
     setState((current) => current ? toggleRow(current, row) : current);
@@ -1394,6 +1505,7 @@ function StyleConfigurator({
   const handleApply = useCallback(async () => {
     const live = stateRef.current;
     if (!live || !isPreviewingChange(live)) return;
+    if (!deriveStyleConfiguratorCapabilities(live).canApplyStaged) return;
     const previewed = live.previewed;
     const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
     if (!siteStyle) return;
@@ -1433,23 +1545,22 @@ function StyleConfigurator({
         return unwrapResponse(response);
       },
       onSuccess: (saved) => {
+        const persisted = selectionSnapshotFromApplySiteStyleSelectionResponse(
+          saved,
+          previewed
+        );
+        const historyEntry = styleConfiguratorHistoryEntryForPersistedSelection(
+          live,
+          persisted
+        );
         setState(
-          (current) => current ? markApplySaved(current, {
-            siteStyleId: previewed.siteStyleId,
-            selectionVersion: saved.selectionVersion,
-            selectionUpdatedAt: saved.selectionUpdatedAt ?? previewed.selectionUpdatedAt ?? null,
-            buttonPersonalityId: saved.buttonPersonalityId,
-            paletteVariantId: saved.paletteVariantId,
-            paletteOverrides: saved.paletteOverrides ?? null,
-            typographyPresetId: saved.typographyPresetId,
-            typographyBodyFontOverride: saved.typographyBodyFontOverride,
-            typographyHeadingFontOverride: saved.typographyHeadingFontOverride,
-            headerLookId: saved.headerLookId,
-            headerLayoutId: saved.headerLayoutId,
-            headerStyleId: saved.headerStyleId,
-            footerLookId: saved.footerLookId
-          }) : current
+          (current) => current ? markApplySaved(current, persisted) : current
         );
+        if (historyEntry) {
+          siteChromeCustomize?.siteStyleHistory.recordAppliedSelection(
+            historyEntry
+          );
+        }
         applySucceeded("style-configurator");
         startRefreshTransition(() => {
           router.refresh();
@@ -1464,7 +1575,13 @@ function StyleConfigurator({
           });
         }
         const message = applyError.message;
-        setState((current) => current ? markApplyFailed(current, message) : current);
+        setState(
+          (current) => current ? markApplyFailed(
+            current,
+            message,
+            applyError.kind === "stale" ? "stale" : "retryable"
+          ) : current
+        );
       }
     });
   }, [
@@ -1476,6 +1593,7 @@ function StyleConfigurator({
     applySucceeded,
     router,
     selectionId,
+    siteChromeCustomize?.siteStyleHistory,
     siteId,
     startRefreshTransition,
     theme
@@ -1484,14 +1602,19 @@ function StyleConfigurator({
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading design controls..." });
   }
   const applyAllowed = canApplySiteStyle(siteStyleAccess);
+  const stagedCapabilities = deriveStyleConfiguratorCapabilities(state);
   const previewingChange = isPreviewingChange(state);
-  const saving = state.saveStatus.kind === "saving" || isRefreshPending;
+  const saving = stagedCapabilities.isApplyingStaged || isRefreshPending;
   const currentSiteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
   if (!currentSiteStyle) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This site uses a Site Style that cannot be configured here." });
   }
-  const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
-  const currentPaletteVariant = findPaletteVariant(state.previewed.paletteVariantId);
+  const currentPersonality = findButtonPersonality(
+    state.previewed.buttonPersonalityId
+  );
+  const currentPaletteVariant = findPaletteVariant(
+    state.previewed.paletteVariantId
+  );
   const currentTypographyPreset = state.previewed.typographyPresetId ? findTypographyPreset(state.previewed.typographyPresetId) : null;
   const chromeLookModels = buildSiteChromeLookModels({
     state,
@@ -1503,8 +1626,20 @@ function StyleConfigurator({
   const currentHeaderStyle = getHeaderStyle(state.previewed.headerStyleId);
   const currentFooterLook = state.previewed.footerLookId ? findFooterLook(state.previewed.footerLookId) : findFooterLook(chromeLookModels.footer.renderedLookId);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-    state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, { warnings: state.warnings, onDismiss: handleDismissWarnings }) : null,
-    state.notices.length > 0 ? /* @__PURE__ */ jsx(NoticeBanner, { notices: state.notices, onDismiss: handleDismissNotices }) : null,
+    state.warnings.length > 0 ? /* @__PURE__ */ jsx(
+      WarningNotice,
+      {
+        warnings: state.warnings,
+        onDismiss: handleDismissWarnings
+      }
+    ) : null,
+    state.notices.length > 0 ? /* @__PURE__ */ jsx(
+      NoticeBanner,
+      {
+        notices: state.notices,
+        onDismiss: handleDismissNotices
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       SiteStyleRow,
       {
@@ -1529,7 +1664,11 @@ function StyleConfigurator({
         options: chromeLookModels.headerLayout.options,
         diagnostics: [],
         onCycle: (direction) => {
-          const next = cycleSiteChromeLookId(chromeLookModels.headerLayout.options, state.previewed.headerLayoutId, direction);
+          const next = cycleSiteChromeLookId(
+            chromeLookModels.headerLayout.options,
+            state.previewed.headerLayoutId,
+            direction
+          );
           if (next !== void 0) handlePreviewHeaderLayout(next);
         },
         onPreview: handlePreviewHeaderLayout,
@@ -1550,7 +1689,11 @@ function StyleConfigurator({
         options: chromeLookModels.headerStyle.options,
         diagnostics: [],
         onCycle: (direction) => {
-          const next = cycleSiteChromeLookId(chromeLookModels.headerStyle.options, state.previewed.headerStyleId, direction);
+          const next = cycleSiteChromeLookId(
+            chromeLookModels.headerStyle.options,
+            state.previewed.headerStyleId,
+            direction
+          );
           if (next !== void 0) handlePreviewHeaderStyle(next);
         },
         onPreview: handlePreviewHeaderStyle,
@@ -1572,7 +1715,11 @@ function StyleConfigurator({
         options: chromeLookModels.footer.options,
         diagnostics: chromeLookModels.footer.diagnostics,
         onCycle: (direction) => {
-          const next = cycleSiteChromeLookId(chromeLookModels.footer.options, state.previewed.footerLookId, direction);
+          const next = cycleSiteChromeLookId(
+            chromeLookModels.footer.options,
+            state.previewed.footerLookId,
+            direction
+          );
           if (next !== void 0) handlePreviewFooterLook(next);
         },
         onPreview: handlePreviewFooterLook,
@@ -1635,14 +1782,40 @@ function StyleConfigurator({
       }
     ) : null,
     previewingChange ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: handleCancel, disabled: saving, children: "Cancel" }),
-      applyAllowed ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: handleApply, disabled: saving, children: saving ? "Applying\u2026" : "Apply" }) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview only \u2014 ask an admin to apply." })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          onClick: handleCancel,
+          disabled: !stagedCapabilities.canCancelStaged || saving,
+          children: "Cancel"
+        }
+      ),
+      applyAllowed ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          onClick: handleApply,
+          disabled: !stagedCapabilities.canApplyStaged || saving,
+          children: saving ? "Applying\u2026" : "Apply"
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Preview only \u2014 ask an admin to apply." })
     ] }) : null,
     state.saveStatus.kind === "saved" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-success", children: "Saved." }) : null,
     state.saveStatus.kind === "failed" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: state.saveStatus.message }) : null
   ] });
 }
-function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, children }) {
+function StyleRowFrame({
+  label,
+  currentLabel,
+  swatch,
+  expanded,
+  onToggle,
+  children
+}) {
   return /* @__PURE__ */ jsx(Collapsible, { open: expanded, onOpenChange: onToggle, children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-background", children: [
     /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
@@ -1651,7 +1824,12 @@ function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, childr
         className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-accent/30",
         "aria-expanded": expanded,
         children: [
-          /* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4 transition", expanded && "rotate-90") }),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn("h-4 w-4 transition", expanded && "rotate-90")
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }),
             /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: currentLabel })
@@ -1670,35 +1848,86 @@ function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, childr
     /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "border-t px-3 py-3", children }) })
   ] }) });
 }
-function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
-  return /* @__PURE__ */ jsx(StyleRowFrame, { label: "Site style", currentLabel: current.name, expanded, onToggle, children: /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Site style", className: "list-none space-y-1 p-0", children: curatedSiteStyles.map((style) => /* @__PURE__ */ jsx(
-    PickerOption,
+function SiteStyleRow({
+  expanded,
+  onToggle,
+  current,
+  onPreview,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(
+    StyleRowFrame,
     {
-      selected: style.id === current.id,
-      label: style.name,
-      description: style.description,
-      onSelect: () => onPreview(style.id),
-      disabled
-    },
-    style.id
-  )) }) });
+      label: "Site style",
+      currentLabel: current.name,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          role: "radiogroup",
+          "aria-label": "Site style",
+          className: "list-none space-y-1 p-0",
+          children: curatedSiteStyles.map((style) => /* @__PURE__ */ jsx(
+            PickerOption,
+            {
+              selected: style.id === current.id,
+              label: style.name,
+              description: style.description,
+              onSelect: () => onPreview(style.id),
+              disabled
+            },
+            style.id
+          ))
+        }
+      )
+    }
+  );
 }
-function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel, onPreview, disabled }) {
+function PersonalityRow({
+  expanded,
+  onToggle,
+  siteStyle,
+  currentId,
+  currentLabel,
+  onPreview,
+  disabled
+}) {
   const options = useMemo(
-    () => requireEntriesForCuratedChoices(buttonPersonalities, siteStyle.buttonPersonalityChoices),
+    () => requireEntriesForCuratedChoices(
+      buttonPersonalities,
+      siteStyle.buttonPersonalityChoices
+    ),
     [siteStyle.buttonPersonalityChoices]
   );
-  return /* @__PURE__ */ jsx(StyleRowFrame, { label: "Button style", currentLabel, expanded, onToggle, children: /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Button style", className: "list-none space-y-1 p-0", children: options.map((personality) => /* @__PURE__ */ jsx(
-    PickerOption,
+  return /* @__PURE__ */ jsx(
+    StyleRowFrame,
     {
-      selected: personality.id === currentId,
-      label: personality.name,
-      description: personality.description,
-      onSelect: () => onPreview(personality.id),
-      disabled
-    },
-    personality.id
-  )) }) });
+      label: "Button style",
+      currentLabel,
+      expanded,
+      onToggle,
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          role: "radiogroup",
+          "aria-label": "Button style",
+          className: "list-none space-y-1 p-0",
+          children: options.map((personality) => /* @__PURE__ */ jsx(
+            PickerOption,
+            {
+              selected: personality.id === currentId,
+              label: personality.name,
+              description: personality.description,
+              onSelect: () => onPreview(personality.id),
+              disabled
+            },
+            personality.id
+          ))
+        }
+      )
+    }
+  );
 }
 function TypographyRow({
   expanded,
@@ -1716,63 +1945,83 @@ function TypographyRow({
   disabled
 }) {
   const options = useMemo(
-    () => requireEntriesForCuratedChoices(typographyPresets, siteStyle.typographyPresetChoices),
+    () => requireEntriesForCuratedChoices(
+      typographyPresets,
+      siteStyle.typographyPresetChoices
+    ),
     [siteStyle.typographyPresetChoices]
   );
   const fontCatalog = useFontCatalog(apiClient, expanded);
   const selectedPreset = currentPresetId ? findTypographyPreset(currentPresetId) : null;
-  return /* @__PURE__ */ jsxs(StyleRowFrame, { label: "Typography", currentLabel, expanded, onToggle, children: [
-    currentPresetId === null ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-muted-foreground/20 bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: "Current custom setup" }) : null,
-    /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Typography preset", className: "space-y-1", children: options.map((preset) => /* @__PURE__ */ jsx(
-      TypographyPresetOption,
-      {
-        preset,
-        selected: preset.id === currentPresetId,
-        onSelect: () => onPreviewPreset(preset.id),
-        disabled
-      },
-      preset.id
-    )) }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3 border-t pt-3", children: [
-      selectedPreset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(
+    StyleRowFrame,
+    {
+      label: "Typography",
+      currentLabel,
+      expanded,
+      onToggle,
+      children: [
+        currentPresetId === null ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-muted-foreground/20 bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: "Current custom setup" }) : null,
         /* @__PURE__ */ jsx(
-          TypographyFontSlotPicker,
+          "ul",
           {
-            label: "Body font",
-            slot: "body",
-            preset: selectedPreset,
-            catalog: fontCatalog,
-            value: bodyFontOverride,
-            onChange: onBodyFontOverride,
-            disabled
+            role: "radiogroup",
+            "aria-label": "Typography preset",
+            className: "space-y-1",
+            children: options.map((preset) => /* @__PURE__ */ jsx(
+              TypographyPresetOption,
+              {
+                preset,
+                selected: preset.id === currentPresetId,
+                onSelect: () => onPreviewPreset(preset.id),
+                disabled
+              },
+              preset.id
+            ))
           }
         ),
-        /* @__PURE__ */ jsx(
-          TypographyFontSlotPicker,
-          {
-            label: "Heading font",
-            slot: "heading",
-            preset: selectedPreset,
-            catalog: fontCatalog,
-            value: headingFontOverride,
-            onChange: onHeadingFontOverride,
-            disabled
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Choose a typography preset to use curated font overrides." }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "sm",
-          variant: "outline",
-          onClick: onClearOverrides,
-          disabled: disabled || !bodyFontOverride && !headingFontOverride,
-          children: "Use preset fonts"
-        }
-      )
-    ] })
-  ] });
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3 border-t pt-3", children: [
+          selectedPreset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              TypographyFontSlotPicker,
+              {
+                label: "Body font",
+                slot: "body",
+                preset: selectedPreset,
+                catalog: fontCatalog,
+                value: bodyFontOverride,
+                onChange: onBodyFontOverride,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TypographyFontSlotPicker,
+              {
+                label: "Heading font",
+                slot: "heading",
+                preset: selectedPreset,
+                catalog: fontCatalog,
+                value: headingFontOverride,
+                onChange: onHeadingFontOverride,
+                disabled
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Choose a typography preset to use curated font overrides." }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              onClick: onClearOverrides,
+              disabled: disabled || !bodyFontOverride && !headingFontOverride,
+              children: "Use preset fonts"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function TypographyPresetOption({
   preset,
@@ -1817,7 +2066,10 @@ function TypographyFontSlotPicker({
   const [query, setQuery] = useState("");
   const defaultFont = primaryFontFamily(preset.defaultFonts[slot]);
   const selectedFamily = value ?? defaultFont;
-  const recordsByFamily = useMemo(() => indexFontsByFamily(catalog.fonts), [catalog.fonts]);
+  const recordsByFamily = useMemo(
+    () => indexFontsByFamily(catalog.fonts),
+    [catalog.fonts]
+  );
   const selectedFit = evaluateTypographyFontSlot({
     slot,
     policy: preset.slotPolicies[slot],
@@ -1830,8 +2082,15 @@ function TypographyFontSlotPicker({
   );
   const browseOptions = useMemo(() => {
     const normalizedQuery = query.trim().toLowerCase();
-    const source = normalizedQuery.length > 0 ? catalog.fonts.filter((font) => font.family.toLowerCase().includes(normalizedQuery)) : catalog.fonts;
-    return [...source].sort((a, b) => sortFontForPresetSlot(a, b, slot, preset, recordsByFamily)).slice(0, normalizedQuery.length > 0 ? MAX_FONT_RESULTS_WHEN_SEARCHING : MAX_FONT_RESULTS_WHEN_BROWSING);
+    const source = normalizedQuery.length > 0 ? catalog.fonts.filter(
+      (font) => font.family.toLowerCase().includes(normalizedQuery)
+    ) : catalog.fonts;
+    return [...source].sort(
+      (a, b) => sortFontForPresetSlot(a, b, slot, preset, recordsByFamily)
+    ).slice(
+      0,
+      normalizedQuery.length > 0 ? MAX_FONT_RESULTS_WHEN_SEARCHING : MAX_FONT_RESULTS_WHEN_BROWSING
+    );
   }, [catalog.fonts, preset, query, recordsByFamily, slot]);
   return /* @__PURE__ */ jsxs("section", { className: "space-y-2", "aria-label": label, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
@@ -1943,7 +2202,9 @@ function FontFamilyOption({
     }
   );
 }
-function TypographyFontFitBadge({ fit }) {
+function TypographyFontFitBadge({
+  fit
+}) {
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -1961,7 +2222,10 @@ function TypographyFontFitBadge({ fit }) {
   );
 }
 function useFontCatalog(apiClient, enabled) {
-  const [catalog, setCatalog] = useState({ kind: "idle", fonts: [] });
+  const [catalog, setCatalog] = useState({
+    kind: "idle",
+    fonts: []
+  });
   const requestedClientRef = useRef(null);
   useEffect(() => {
     if (!enabled) return;
@@ -2125,60 +2389,86 @@ function SiteChromeLookRow({
   onPreview,
   disabled
 }) {
-  return /* @__PURE__ */ jsxs(StyleRowFrame, { label, currentLabel, expanded, onToggle, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: scopeDescription }),
-      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onCycle("prev"),
-            className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
-            "aria-label": `Previous ${label.toLowerCase()}`,
-            disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
-            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
-          }
-        ),
+  return /* @__PURE__ */ jsxs(
+    StyleRowFrame,
+    {
+      label,
+      currentLabel,
+      expanded,
+      onToggle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: scopeDescription }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center overflow-hidden rounded-full border bg-background", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onCycle("prev"),
+                className: "grid h-8 w-8 place-items-center hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50",
+                "aria-label": `Previous ${label.toLowerCase()}`,
+                disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onCycle("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 ${label.toLowerCase()}`,
+                disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+              }
+            )
+          ] })
+        ] }),
+        diagnostics.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mb-3 list-none space-y-1 p-0 text-xs text-amber-700", children: diagnostics.map((diagnostic) => /* @__PURE__ */ jsx("li", { children: diagnostic }, diagnostic)) }) : null,
         /* @__PURE__ */ jsx(
-          "button",
+          "ul",
           {
-            type: "button",
-            onClick: () => onCycle("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 ${label.toLowerCase()}`,
-            disabled: disabled || cycleableSiteChromeOptions(options).length <= 1,
-            children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+            role: "radiogroup",
+            "aria-label": ariaLabel,
+            className: "list-none space-y-1 p-0",
+            children: options.map((look) => /* @__PURE__ */ jsx(
+              PickerOption,
+              {
+                selected: look.id === currentId,
+                label: look.label,
+                description: look.description,
+                onSelect: () => onPreview(look.id),
+                disabled: disabled || !look.available
+              },
+              look.id ?? "site-style-default"
+            ))
           }
         )
-      ] })
-    ] }),
-    diagnostics.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mb-3 list-none space-y-1 p-0 text-xs text-amber-700", children: diagnostics.map((diagnostic) => /* @__PURE__ */ jsx("li", { children: diagnostic }, diagnostic)) }) : null,
-    /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": ariaLabel, className: "list-none space-y-1 p-0", children: options.map((look) => /* @__PURE__ */ jsx(
-      PickerOption,
-      {
-        selected: look.id === currentId,
-        label: look.label,
-        description: look.description,
-        onSelect: () => onPreview(look.id),
-        disabled: disabled || !look.available
-      },
-      look.id ?? "site-style-default"
-    )) })
-  ] });
-}
-function PaletteRow({ expanded, onToggle, siteStyle, currentId, currentLabel, currentSwatch, onPreview, disabled }) {
-  const options = useMemo(
-    () => {
-      const recommended = requireEntriesForCuratedChoices(paletteVariants, siteStyle.paletteVariantChoices);
-      if (recommended.some((variant) => variant.id === currentId)) {
-        return recommended;
-      }
-      const current = findPaletteVariant(currentId);
-      return current ? [current, ...recommended] : recommended;
-    },
-    [currentId, siteStyle.paletteVariantChoices]
+      ]
+    }
   );
+}
+function PaletteRow({
+  expanded,
+  onToggle,
+  siteStyle,
+  currentId,
+  currentLabel,
+  currentSwatch,
+  onPreview,
+  disabled
+}) {
+  const options = useMemo(() => {
+    const recommended = requireEntriesForCuratedChoices(
+      paletteVariants,
+      siteStyle.paletteVariantChoices
+    );
+    if (recommended.some((variant) => variant.id === currentId)) {
+      return recommended;
+    }
+    const current = findPaletteVariant(currentId);
+    return current ? [current, ...recommended] : recommended;
+  }, [currentId, siteStyle.paletteVariantChoices]);
   return /* @__PURE__ */ jsxs(
     StyleRowFrame,
     {
@@ -2189,26 +2479,44 @@ function PaletteRow({ expanded, onToggle, siteStyle, currentId, currentLabel, cu
       onToggle,
       children: [
         /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: "These palette bases are recommended for the current Site Style. Choose a base here, then edit exact colours in Palette colours." }),
-        /* @__PURE__ */ jsx("ul", { role: "radiogroup", "aria-label": "Palette", className: "list-none space-y-1 p-0", children: options.map((variant) => {
-          const primaryHex = variant.colors.find((c) => c.name === "primary")?.hex;
-          return /* @__PURE__ */ jsx(
-            PickerOption,
-            {
-              selected: variant.id === currentId,
-              label: variant.name,
-              description: variant.description,
-              swatch: primaryHex,
-              onSelect: () => onPreview(variant.id),
-              disabled
-            },
-            variant.id
-          );
-        }) })
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            role: "radiogroup",
+            "aria-label": "Palette",
+            className: "list-none space-y-1 p-0",
+            children: options.map((variant) => {
+              const primaryHex = variant.colors.find(
+                (c) => c.name === "primary"
+              )?.hex;
+              return /* @__PURE__ */ jsx(
+                PickerOption,
+                {
+                  selected: variant.id === currentId,
+                  label: variant.name,
+                  description: variant.description,
+                  swatch: primaryHex,
+                  onSelect: () => onPreview(variant.id),
+                  disabled
+                },
+                variant.id
+              );
+            })
+          }
+        )
       ]
     }
   );
 }
-function ColoursRow({ expanded, onToggle, variant, overrides, onTokenChange, onReset, disabled }) {
+function ColoursRow({
+  expanded,
+  onToggle,
+  variant,
+  overrides,
+  onTokenChange,
+  onReset,
+  disabled
+}) {
   const mergedPalette = useMemo(() => {
     return variant.colors.map((color) => ({
       name: color.name,
@@ -2252,7 +2560,14 @@ function ColoursRow({ expanded, onToggle, variant, overrides, onTokenChange, onR
     }
   );
 }
-function PickerOption({ selected, label, description, swatch, onSelect, disabled }) {
+function PickerOption({
+  selected,
+  label,
+  description,
+  swatch,
+  onSelect,
+  disabled
+}) {
   return /* @__PURE__ */ jsx("li", { className: "list-none", children: /* @__PURE__ */ jsxs(
     "button",
     {
@@ -2303,16 +2618,30 @@ function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
 function WarningNotice({ warnings, onDismiss }) {
-  return /* @__PURE__ */ jsxs("div", { role: "status", className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground", children: [
-    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { children: describeWarning(warning) }, `${warning.kind}-${index}`)) }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground",
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { children: describeWarning(warning) }, `${warning.kind}-${index}`)) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
+      ]
+    }
+  );
 }
 function NoticeBanner({ notices, onDismiss }) {
-  return /* @__PURE__ */ jsxs("div", { role: "status", className: "rounded-md border border-muted-foreground/20 bg-muted/40 px-3 py-2 text-xs", children: [
-    /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: notices.map((notice, index) => /* @__PURE__ */ jsx("li", { children: describeNotice(notice) }, `${notice.kind}-${index}`)) }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: "rounded-md border border-muted-foreground/20 bg-muted/40 px-3 py-2 text-xs",
+      children: [
+        /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: notices.map((notice, index) => /* @__PURE__ */ jsx("li", { children: describeNotice(notice) }, `${notice.kind}-${index}`)) }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onDismiss, className: "mt-2 underline", children: "Dismiss" })
+      ]
+    }
+  );
 }
 function describeNotice(notice) {
   switch (notice.kind) {
@@ -2393,6 +2722,11 @@ function PreviewEditorSidebar({
     [uiStore]
   );
   const focusRequest = useUISelector(uiStore, (s) => s.focusRequest);
+  const activeLinkedEntrySnapshot = useUISelector(
+    uiStore,
+    (s) => s.linkedEntries.getSelectedSnapshot()
+  );
+  const previewInspection = useUISelector(uiStore, (s) => s.previewInspection);
   const { canEdit } = usePreviewAuth();
   const dashboardSetupHandoff = useMemo(
     () => resolvePreviewDashboardSetupHandoff(),
@@ -2462,8 +2796,33 @@ function PreviewEditorSidebar({
   }, [focusRequest, uiStore]);
   const metadataSectionContent = useMemo(() => {
     if (!pageId && !entryData) return null;
-    return /* @__PURE__ */ jsx(PreviewMetadataPanel, { contentTypeKey: entryData?.type ?? null });
-  }, [entryData, pageId]);
+    return /* @__PURE__ */ jsx(
+      PreviewMetadataPanel,
+      {
+        ownerKind: entryData ? "content" : "page",
+        contentTypeKey: entryData?.type ?? null,
+        entry: controller.entry
+      }
+    );
+  }, [controller.entry, entryData, pageId]);
+  const linkedEntrySection = buildLinkedEntrySidebarSection({
+    snapshot: activeLinkedEntrySnapshot,
+    inspection: previewInspection,
+    renderContent: (snapshot) => /* @__PURE__ */ jsx(
+      LinkedEntryEditorPanel,
+      {
+        siteId,
+        apiClient,
+        bearerToken,
+        supabaseUrl,
+        theme,
+        mediaAssets,
+        widgets: contentFormWidgets,
+        entry: snapshot,
+        fields: findLinkedEntryFieldsFromSnapshot(snapshot)
+      }
+    )
+  });
   const editorPanel = entryData ? /* @__PURE__ */ jsx(
     EntryEditorPanel,
     {
@@ -2479,6 +2838,7 @@ function PreviewEditorSidebar({
       supabaseUrl,
       entrySubrouteContext,
       metadataPanel: metadataSectionContent,
+      linkedEntrySection,
       mediaAssets,
       widgets: contentFormWidgets,
       viewportMode,
@@ -2534,6 +2894,7 @@ function PreviewEditorSidebar({
       ) : null,
       sdkConfig: sdkConfig ?? null,
       mediaAssets,
+      linkedEntrySection,
       viewportMode,
       viewportWidth,
       zoom,
@@ -2616,14 +2977,32 @@ function PreviewEditorSidebar({
   );
 }
 function PreviewMetadataPanel({
-  contentTypeKey
+  ownerKind,
+  contentTypeKey,
+  entry
 }) {
   const uiStore = useEditorUiStoreInstance();
-  const manifest = useMemo(() => {
-    return omitRouteTitleFieldFromManifest(
-      getRouteMetadataManifestForType(contentTypeKey)
+  const currentSlug = useEditorUiStore(
+    (state) => state.metadata.getAtPath("draftSlug")
+  ) ?? void 0;
+  const metadataPresentation = useMemo(() => {
+    if (ownerKind === "content") {
+      return deriveRouteMetadataPresentation(
+        { kind: "content", typeKey: contentTypeKey },
+        { omitTitle: true }
+      );
+    }
+    const routeSlug = resolvePageRouteSlug(entry, currentSlug);
+    if (!routeSlug) {
+      throw new Error("Expected routable page entry for preview metadata");
+    }
+    return deriveRouteMetadataPresentation(
+      { kind: "page", routeSlug },
+      { omitTitle: true }
     );
-  }, [contentTypeKey]);
+  }, [contentTypeKey, currentSlug, entry, ownerKind]);
+  const manifest = metadataPresentation.manifest;
+  const isHomepage = metadataPresentation.kind === "page-homepage";
   const validation = useMemo(
     () => createManifestValidation(manifest),
     [manifest]
@@ -2642,14 +3021,143 @@ function PreviewMetadataPanel({
     }),
     [uiStore, validation]
   );
-  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsx(
-    ManifestForm,
-    {
-      manifest,
-      backend,
-      className: "space-y-4"
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    isHomepage ? /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground", children: "Homepage" }) : null,
+    /* @__PURE__ */ jsx(
+      ManifestForm,
+      {
+        manifest,
+        backend,
+        className: "space-y-4"
+      }
+    )
+  ] });
+}
+function LinkedEntryEditorPanel({
+  siteId,
+  apiClient,
+  bearerToken,
+  supabaseUrl,
+  theme,
+  mediaAssets,
+  widgets,
+  entry,
+  fields
+}) {
+  const uiStore = useEditorUiStoreInstance();
+  const linkedEntriesAutosave = useUISelector(
+    uiStore,
+    (state) => state.autosave.linkedEntries
+  );
+  const manifest = useMemo(
+    () => ({
+      name: `linked-content-${entry.meta.contentTypeKey}`,
+      version: "1.0",
+      title: entry.meta.contentTypeLabel,
+      component: "content-form",
+      description: "",
+      fields: fields.map((field) => ({
+        ...field,
+        label: fieldIdToLabel(field.id)
+      })),
+      slots: []
+    }),
+    [entry.meta.contentTypeKey, entry.meta.contentTypeLabel, fields]
+  );
+  const validation = useMemo(
+    () => createManifestValidation(manifest, { widgets }),
+    [manifest, widgets]
+  );
+  const backend = useMemo(
+    () => createStoreBackend({
+      scope: "linkedContent",
+      store: uiStore,
+      validateFn: (values) => {
+        const result = validation.schema.safeParse(values);
+        return result.success ? [] : result.error.issues;
+      }
+    }),
+    [uiStore, validation]
+  );
+  const syncState = entry.syncState;
+  const errorMessage = syncState.kind === "failed" ? syncState.error : null;
+  const dirty = syncState.kind === "pending" || syncState.kind === "failed";
+  const isSaving = linkedEntriesAutosave.status === "saving" && dirty;
+  const displayTitle = resolveContentTitle(
+    entry.current ?? entry.baseline ?? null,
+    entry.meta.titleField,
+    entry.meta.title
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "bg-muted/20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-4 py-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: displayTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => {
+            if (dirty) {
+              uiStore.getState().linkedEntries.discard(entry.meta.entryId);
+            } else {
+              uiStore.getState().linkedEntries.close();
+            }
+          },
+          children: dirty ? "Discard" : "Close"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+      errorMessage ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-red-500 bg-red-50 px-3 py-2 text-sm text-red-700", children: errorMessage }) : isSaving ? /* @__PURE__ */ jsx("div", { className: "mb-3 rounded-md border border-sky-500 bg-sky-50 px-3 py-2 text-sm text-sky-700", children: "Saving changes" }) : null,
+      /* @__PURE__ */ jsx(
+        PreviewFormProvider,
+        {
+          siteId,
+          theme: theme ?? null,
+          previewClient: apiClient,
+          bearerToken,
+          supabaseUrl,
+          mediaAssets,
+          children: /* @__PURE__ */ jsx(
+            ManifestForm,
+            {
+              manifest,
+              backend,
+              widgetOverrides: widgets,
+              className: "space-y-4"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function buildLinkedEntrySidebarSection(input) {
+  const { snapshot, inspection, renderContent } = input;
+  if (!snapshot || inspection.kind !== "linked-entry") return null;
+  if (snapshot.meta.entryId !== inspection.entryId) return null;
+  return {
+    label: snapshot.meta.contentTypeLabel,
+    openRequestId: inspection.requestId,
+    content: renderContent(snapshot)
+  };
+}
+function findLinkedEntryFieldsFromSnapshot(snapshot) {
+  return snapshot.meta.fields.flatMap((field) => {
+    if (typeof field.id !== "string" || typeof field.type !== "string") {
+      return [];
     }
-  ) });
+    return [{
+      id: field.id,
+      type: field.type,
+      mediaKinds: Array.isArray(field.mediaKinds) ? field.mediaKinds.filter((item) => typeof item === "string") : null,
+      fileKinds: Array.isArray(field.fileKinds) ? field.fileKinds.filter((item) => typeof item === "string") : null
+    }];
+  });
+}
+function fieldIdToLabel(fieldId) {
+  return fieldId.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[-_\s]+/).filter((part) => part.length > 0).map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(" ");
 }
 
 export { PreviewEditorSidebar };