@riverbankcms/sdk 0.147.0 → 0.149.0

package/dist/{PreviewEditorSidebar-DtpB3_sS.mjs → PreviewEditorSidebar-DBKln68M.mjs}

@@ -1,27 +1,12 @@
 "use client";
-import { $ as FooterComposerPanel, $i as resolveSdkFooterMode, A as markApplySaving, An as ThemeScope, Ar as getCuratedSiteStyle, B as setPaletteColors, Ba as DropdownMenu, Bi as findButtonStyleRecipe, Br as curatedPalettes, C as cancelPreview, Ca as PopoverContent, D as isPreviewingChange, Da as TabsContent, E as dismissWarnings, Ea as Tabs, Eo as assertNever$1, F as previewFooterLook, Ga as DropdownMenuTrigger, H as syncStyleConfiguratorState, Ha as DropdownMenuItem, Hi as updateButtonStyleHoverPreference, I as previewHeaderLayout, Ia as Collapsible, L as previewHeaderStyle, La as CollapsibleContent, Lt as BlockEditor, M as palettePreviewProjection, Mr as findFooterLook, N as previewButtonStyle, Nr as getHeaderLayout, O as markApplyFailed, Oa as TabsList, Or as curatedSiteStyles, P as previewCuratedPalette, Pr as getHeaderStyle, Q as resolvePreviewSidebarTab, R as previewSiteStyle, Ra as CollapsibleTrigger, Ri as buttonStyleHoverPreferenceValue, S as applyTypographyDraftPatch, Sa as Popover, T as deriveStyleConfiguratorCapabilities, Ta as Input, U as toggleRow, Ua as DropdownMenuLabel, Ui as updateButtonStyleSelectionChoice, Ut as useEditorUiStore, V as styleConfiguratorHistoryEntryForPersistedSelection, Va as DropdownMenuContent, Vi as resolveButtonStyleSelection, Wa as DropdownMenuSeparator, Wi as buttonStyleSelectionKey, Wt as useEditorUiStoreInstance, X as resolveStyleConfiguratorInitialSnapshot, Xa as X$1, Xi as paletteColorEntries, Ya as cn, Yi as VARIANT_ROLES, Z as createOptimisticActionRunner, Zi as paletteColorsSchema, _ as reportPreviewDesignError, _a as SelectTrigger, _n as createStoreBackend, _o as ChevronLeft, an as isAdapterReferenceKind, at as ContentFieldsForm, b as planSiteChromeSelection, ba as CalloutDescription, c as selectionSnapshotFromApplySiteStyleSelectionResponse, cn as resolvePageRouteSlug, do as LoaderCircle, eo as Tablet, f as usePreviewDesignCoordinator, fn as ManifestForm, g as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, ga as SelectItem, go as ChevronRight, ha as SelectContent, hn as FormRenderer, j as openRow, k as markApplySaved, ka as TabsTrigger, l as deriveSiteStylePreviewUpdate, li as ThemedButtonSpecimen, ln as resolveContentTitle, lo as Monitor, lt as useEntryController, ma as Select, mn as createManifestValidation, n as useSiteChromeCustomizeOptional, no as Smartphone, ot as useUISelector, qa as Button, ro as SlidersHorizontal, s as buildApplySiteStyleSelectionBody, sn as deriveRouteMetadataPresentation, u as planConfiguratorPreview, uo as Maximize2, v as buildSiteChromeSelectionModels, va as SelectValue, vo as ChevronDown, w as createStyleConfiguratorState, wa as PopoverTrigger, wo as unsafeAsEditorBlockId, x as applyResolvedSelections, xa as SearchInput, xn as listEntryPageContentSlots, y as cycleSiteChromeSelectionId, ya as Callout, yo as Check, z as resetTypographyToSaved, za as Surface, zi as buttonStyleSelectionParameterValue } from "./SiteChromeCustomizeContext-DQXZXiqS.mjs";
-import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-C_EHQ5XA.mjs";
-import { t as Separator } from "./separator-C9qDP95Z.mjs";
-import { S as getSiteFontsStorageUrl, _ as usePreviewBlockCustomizeSelectionOptional, b as buildFontPreviewUrl, d as buildPreviewDashboardSetupUrl, f as resolvePreviewDashboardSetupHandoff, g as useBlockCustomizeControls, h as usePreviewSiteFontStorageUrl, m as resolvePreviewSidebarChromeModel, p as resolvePreviewEditorGuidanceModel, u as canInspectSiteStyle, v as PreviewFormProvider, x as generateFontFaceCss, y as previewWidgetOverrides } from "./SdkPreviewModeRuntime-DMMNCngt.mjs";
+import { $ as FooterComposerPanel, $i as VARIANT_ROLES, $o as syncStateOf, $t as createStoreBackend, A as markApplySaving, Ai as curatedSiteStyles, An as listPageSurfaceContentSlots, B as setPaletteColors, Ba as CalloutDescription, Bn as resolvePageRouteSlug, C as cancelPreview, D as isPreviewingChange, Do as Maximize2, E as dismissWarnings, Eo as Monitor, F as previewFooterLook, Fa as SelectContent, Fn as routeLifecycleContext, Fo as ChevronDown, Ga as Input, Gi as curatedPalettes, H as syncStyleConfiguratorState, Ha as Popover, Hn as useEditorUiStore, I as previewHeaderLayout, Ia as SelectItem, Ii as resolveSdkFooterMode, Io as Check, Ja as TabsList, Ji as findButtonStyleRecipe, Jt as BlockEditor, Ka as Tabs, Ki as buttonStyleHoverPreferenceValue, L as previewHeaderStyle, La as SelectTrigger, Li as findFooterLook, Ln as isAdapterReferenceKind, Lo as Button, M as palettePreviewProjection, Mi as getCuratedSiteStyle, N as previewButtonStyle, No as ChevronRight, O as markApplyFailed, On as createManifestValidation, Oo as LoaderCircle, P as previewCuratedPalette, Pa as Select, Po as ChevronLeft, Q as resolvePreviewSidebarTab, Qi as buttonStyleSelectionKey, Qo as displayedValues, Qt as FormRenderer, R as previewSiteStyle, Ra as SelectValue, Ri as getHeaderLayout, S as applyTypographyDraftPatch, T as deriveStyleConfiguratorCapabilities, U as toggleRow, Ua as PopoverContent, Un as useEditorUiStoreInstance, Uo as canWriteLinkedEntry, V as styleConfiguratorHistoryEntryForPersistedSelection, Va as SearchInput, Vn as resolveContentTitle, Vo as isEdited, Wa as PopoverTrigger, X as resolveStyleConfiguratorInitialSnapshot, Xi as updateButtonStyleHoverPreference, Ya as TabsTrigger, Yi as resolveButtonStyleSelection, Z as createOptimisticActionRunner, Zi as updateButtonStyleSelectionChoice, Zt as ManifestForm, _ as reportPreviewDesignError, _a as paletteColorEntries, _o as Tablet, ao as Surface, at as ContentFieldsForm, b as planSiteChromeSelection, bo as SlidersHorizontal, c as selectionSnapshotFromApplySiteStyleSelectionResponse, co as DropdownMenuItem, do as DropdownMenuTrigger, es as valueStatus, f as usePreviewDesignCoordinator, ft as useAutosaveStatus, g as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, io as CollapsibleTrigger, ir as toEditorBlockItem, j as openRow, jn as blocksKeys, jr as ThemedButtonSpecimen, k as markApplySaved, kn as listEntryPageContentSlots, l as deriveSiteStylePreviewUpdate, lo as DropdownMenuLabel, lt as useEntryController, n as useSiteChromeCustomizeOptional, no as Collapsible, ns as assertNever$1, oo as DropdownMenu, ot as useUISelector, po as X$1, qa as TabsContent, qi as buttonStyleSelectionParameterValue, ro as CollapsibleContent, s as buildApplySiteStyleSelectionBody, so as DropdownMenuContent, sr as ThemeScope, u as planConfiguratorPreview, uo as DropdownMenuSeparator, v as buildSiteChromeSelectionModels, va as paletteColorsSchema, vt as LinkedEntryLeaseBanner, w as createStyleConfiguratorState, x as applyResolvedSelections, y as cycleSiteChromeSelectionId, yo as Smartphone, z as resetTypographyToSaved, za as Callout, zi as getHeaderStyle, zn as deriveRouteMetadataPresentation, zo as cn } from "./SiteChromeCustomizeContext-JYA0cJ_Z.mjs";
+import { a as usePreviewAuth, m as getDashboardUrl, p as unwrapResponse } from "./previewAuthStore-BBmV7UsW.mjs";
+import { t as Separator } from "./separator-ByL72zUT.mjs";
+import { C as getSiteFontsStorageUrl, S as generateFontFaceCss, _ as useBlockCustomizeControls, b as previewWidgetOverrides, d as canInspectSiteStyle, f as buildPreviewDashboardSetupUrl, g as usePreviewSiteFontStorageUrl, h as resolvePreviewSidebarChromeModel, m as resolvePreviewEditorGuidanceModel, p as resolvePreviewDashboardSetupHandoff, v as usePreviewBlockCustomizeSelectionOptional, x as buildFontPreviewUrl, y as PreviewFormProvider } from "./SdkPreviewModeRuntime-DJPmPY-r.mjs";
 import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation.js";
-//#region ../preview-next/src/client/preview/footerInspection.ts
-/** Shared by sidebar routing and the footer panel's initial editing target. */
-function resolveFooterInspection(inspection) {
-	return inspection?.kind === "footer" || inspection?.kind === "footer-module" ? inspection : null;
-}
-function footerComposerInspectionProps(inspection) {
-	return {
-		initialTarget: inspection?.kind === "footer-module" ? {
-			kind: "module",
-			moduleId: inspection.moduleId
-		} : { kind: "overview" },
-		initialTargetRequestId: inspection?.requestId
-	};
-}
-//#endregion
 //#region ../../node_modules/.pnpm/react-colorful@5.7.0_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/react-colorful/dist/index.mjs
 function u() {
 	return (u = Object.assign || function(e) {
@@ -362,6 +347,88 @@ var R, U = "undefined" != typeof window ? useLayoutEffect : useEffect, V = funct
 	return React.createElement(Q, u({}, r, { colorModel: W }));
 };
 //#endregion
+//#region ../ui/src/palette/hex.ts
+/**
+* Hex colour helpers shared by every palette-editing surface (Macadamia
+* onboarding swatches, the LiveThemeEditor, the Style configurator advanced
+* row). Consolidates three prior duplicates: `normalizeColorPickerValue` in
+* Macadamia, `normalizeHex` + `contrastRatio` formerly in
+* `theme-editor/utils.ts`, and the inline regex in `updateColorRole`.
+*
+* Pure functions; no DOM, no React.
+*/
+/**
+* Coerces user input into a canonical lowercase `#RRGGBB` form. Accepts
+* 3-digit shorthand, case-insensitive 6-digit hex, and the same forms with or
+* without a leading `#`; returns `fallback` for any other shape (empty
+* string, garbage, characters outside `[0-9a-f]`, wrong length, etc.). Pass
+* a `fallback` to make the fallback explicit at the call site — defaulting
+* to `'#000000'` preserves the former theme-editor helper semantics.
+*/
+function normalizeHex(input, fallback = "#000000") {
+	if (!input) return fallback;
+	const trimmed = input.trim().replace(/^#/, "").toLowerCase();
+	const expanded = trimmed.length === 3 ? trimmed.split("").map((char) => char + char).join("") : trimmed;
+	if (!/^[0-9a-f]{6}$/i.test(expanded)) return fallback;
+	return `#${expanded}`;
+}
+function hexToRgb(hex) {
+	const match = normalizeHex(hex).replace("#", "").match(/.{2}/g);
+	if (!match || match.length < 3) return null;
+	const [r, g, b] = match.map((value) => parseInt(value, 16));
+	return [
+		r,
+		g,
+		b
+	];
+}
+function luminanceChannel(raw) {
+	const channel = raw / 255;
+	return channel <= .03928 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
+}
+/**
+* WCAG relative luminance + contrast ratio. Rounded to 2 decimal places so
+* the result is stable for UI display.
+*/
+function contrastRatio(hexA, hexB) {
+	const rgbA = hexToRgb(hexA);
+	const rgbB = hexToRgb(hexB);
+	if (!rgbA || !rgbB) return 1;
+	const lumA = .2126 * luminanceChannel(rgbA[0]) + .7152 * luminanceChannel(rgbA[1]) + .0722 * luminanceChannel(rgbA[2]);
+	const lumB = .2126 * luminanceChannel(rgbB[0]) + .7152 * luminanceChannel(rgbB[1]) + .0722 * luminanceChannel(rgbB[2]);
+	const brighter = Math.max(lumA, lumB);
+	const darker = Math.min(lumA, lumB);
+	return Number(((brighter + .05) / (darker + .05)).toFixed(2));
+}
+//#endregion
+//#region ../ui/src/palette/useHexDraft.ts
+/** Keeps incomplete text local while sending only complete colors to consumers. */
+function useHexDraft(value, onChange) {
+	const [draft, setDraft] = useState(value);
+	useEffect(() => {
+		setDraft(value);
+	}, [value]);
+	const changeDraft = (next) => {
+		setDraft(next);
+		if (/^#?[0-9a-fA-F]{6}$/.test(next.trim())) onChange(normalizeHex(next));
+	};
+	const finishDraft = () => {
+		if (/^#?[0-9a-fA-F]{3}$/.test(draft.trim())) {
+			const normalized = normalizeHex(draft);
+			setDraft(normalized);
+			onChange(normalized);
+			return;
+		}
+		if (!normalizeHex(draft, "")) setDraft(value);
+	};
+	return {
+		draft,
+		changeDraft,
+		finishDraft,
+		setDraft
+	};
+}
+//#endregion
 //#region ../ui/src/color-picker.tsx
 function useForwardedRef(ref) {
 	const innerRef = useRef(null);
@@ -378,6 +445,7 @@ const ColorPicker = forwardRef(({ disabled, value, onChange, onBlur, name, class
 	const parsedValue = useMemo(() => {
 		return value || "#FFFFFF";
 	}, [value]);
+	const { draft, changeDraft, finishDraft, setDraft } = useHexDraft(parsedValue, onChange);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("inline-block", props.style ? "" : ""),
 		children: [/* @__PURE__ */ jsxs(Popover, {
@@ -406,14 +474,17 @@ const ColorPicker = forwardRef(({ disabled, value, onChange, onBlur, name, class
 				className: "w-full",
 				children: [/* @__PURE__ */ jsx(Z, {
 					color: parsedValue,
-					onChange
+					onChange: (next) => {
+						setDraft(next);
+						onChange(next);
+					}
 				}), /* @__PURE__ */ jsx(Input, {
+					"aria-label": "Hex colour",
 					maxLength: 7,
-					onChange: (e) => {
-						onChange(e?.currentTarget?.value);
-					},
+					onChange: (event) => changeDraft(event.currentTarget.value),
+					onBlur: finishDraft,
 					ref,
-					value: parsedValue
+					value: draft
 				})]
 			})]
 		}), label ? /* @__PURE__ */ jsx("div", {
@@ -818,6 +889,21 @@ function normalizeFieldUi(value) {
 	return value;
 }
 //#endregion
+//#region ../preview-next/src/client/preview/footerInspection.ts
+/** Shared by sidebar routing and the footer panel's initial editing target. */
+function resolveFooterInspection(inspection) {
+	return inspection?.kind === "footer" || inspection?.kind === "footer-module" ? inspection : null;
+}
+function footerComposerInspectionProps(inspection) {
+	return {
+		initialTarget: inspection?.kind === "footer-module" ? {
+			kind: "module",
+			moduleId: inspection.moduleId
+		} : { kind: "overview" },
+		initialTargetRequestId: inspection?.requestId
+	};
+}
+//#endregion
 //#region ../preview-next/src/client/preview/PreviewZoomControls.tsx
 function PreviewZoomControls({ zoom, onZoomChange, disabled }) {
 	return /* @__PURE__ */ jsxs(Select, {
@@ -1075,13 +1161,37 @@ function resolveSubrouteNotice(ctx, args) {
 const EMPTY_BLOCKS = [];
 const EMPTY_SLOTS = [];
 const EMPTY_SELECTION = { kind: "none" };
-function entryPageContentSlotsKey(siteId, typeKey, entryId) {
-	return [
-		"preview-entry-page-content-slots",
+/**
+* The shared slot-list keys, so the controller's refreshes (a lease grant, a
+* discard that reverts sections) re-read this panel's slots.
+*/
+function pageContentSlotsKey(siteId, typeKey, entryId, pageSurfaceId) {
+	return pageSurfaceId ? blocksKeys.surfaceSlots(siteId, pageSurfaceId) : blocksKeys.entrySlots(siteId, typeKey, entryId);
+}
+function loadContentSlots(apiClient, siteId, typeKey, entryId, pageSurfaceId) {
+	return pageSurfaceId ? listPageSurfaceContentSlots(apiClient, {
 		siteId,
-		typeKey,
+		pageSurfaceId
+	}) : listEntryPageContentSlots(apiClient, {
+		siteId,
+		type: typeKey,
 		entryId
-	];
+	});
+}
+function slotOwner(slot, typeKey, entryId, pageSurfaceId) {
+	if (!pageSurfaceId) return {
+		kind: "entry-slot",
+		type: typeKey,
+		entryId,
+		slotKey: slot.slotKey
+	};
+	if (!("compositionHash" in slot)) throw new Error("Page surface slot is missing its revision");
+	return {
+		kind: "surface-slot",
+		pageSurfaceId,
+		slotKey: slot.slotKey,
+		compositionHash: slot.compositionHash
+	};
 }
 function getAllowedBlockKinds(slot) {
 	return slot.allowedBlocks.blockKinds;
@@ -1126,26 +1236,23 @@ function updateBlocksWithSavedContent(blocks, blockId, content) {
 function getErrorMessage(error) {
 	return error instanceof Error ? error.message : "Unable to load Page Content.";
 }
-function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId, theme = null, apiClient, sdkConfig = null, widgets }) {
+function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId, pageSurfaceId, theme = null, apiClient, sdkConfig = null, widgets }) {
 	const router = useRouter();
 	const queryClient = useQueryClient();
 	const uiStore = useEditorUiStoreInstance();
 	const blockEditorRef = useRef(null);
 	const focusRequest = useEditorUiStore((state) => state.focusRequest);
-	const blockAutosaveStatus = useEditorUiStore((state) => state.autosave.blocks.status);
+	const blockAutosaveStatus = useAutosaveStatus("blocks").status;
 	const [slotSelection, setSlotSelection] = useState(EMPTY_SELECTION);
-	const queryKey = useMemo(() => entryPageContentSlotsKey(siteId, typeKey, entryId), [
+	const queryKey = useMemo(() => pageContentSlotsKey(siteId, typeKey, entryId, pageSurfaceId), [
 		entryId,
+		pageSurfaceId,
 		siteId,
 		typeKey
 	]);
 	const slotsQuery = useQuery({
 		queryKey,
-		queryFn: () => listEntryPageContentSlots(apiClient, {
-			siteId,
-			type: typeKey,
-			entryId
-		}),
+		queryFn: () => loadContentSlots(apiClient, siteId, typeKey, entryId, pageSurfaceId),
 		staleTime: 3e4
 	});
 	const handleBlockSave = useCallback((blockId, content) => {
@@ -1175,7 +1282,17 @@ function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId,
 	const warnings = slotsQuery.data?.warnings ?? [];
 	const selection = useMemo(() => resolveSlotSelection(slotSelection, slots), [slotSelection, slots]);
 	const selectedSlot = useMemo(() => findSelectedSlot(selection, slots), [selection, slots]);
-	const selectedBlocks = selectedSlot?.blocks ?? EMPTY_BLOCKS;
+	const selectedBlocks = useMemo(() => (selectedSlot?.blocks ?? EMPTY_BLOCKS).map(toEditorBlockItem), [selectedSlot]);
+	const collectionReads = useMemo(() => slots.map((slot) => ({
+		owner: slotOwner(slot, typeKey, entryId, pageSurfaceId),
+		currentBlockIds: slot.blocks.map((block) => block.id),
+		publishedBlockIds: slot.publishedBlockIds
+	})), [
+		slots,
+		typeKey,
+		entryId,
+		pageSurfaceId
+	]);
 	const focusRequestedBlockField = useCallback((editor) => {
 		if (!editor) return false;
 		if (!focusRequest?.blockId) return false;
@@ -1227,13 +1344,12 @@ function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId,
 			ref: handleBlockEditorRef,
 			siteId,
 			dashboardBaseUrl,
-			owner: {
-				kind: "entry-slot",
-				type: typeKey,
-				entryId,
-				slotKey: selectedSlot.slotKey
+			owner: slotOwner(selectedSlot, typeKey, entryId, pageSurfaceId),
+			source: {
+				kind: "server",
+				blocks: selectedBlocks
 			},
-			blocks: [...selectedBlocks],
+			collectionReads,
 			apiClient,
 			uiStore,
 			theme,
@@ -1263,7 +1379,11 @@ function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId,
 			value: selectedSlot.slotKey,
 			onValueChange: async (nextSlotKey) => {
 				if (blockAutosaveStatus === "saving") return;
-				await uiStore.getState().autosave.saveNow(["blocks"]);
+				const blockKeys = uiStore.getState().drafts.inspect().map((draft) => ({
+					kind: "block",
+					blockId: draft.id
+				}));
+				await uiStore.getState().autosave.flushValues("save-draft", { keys: blockKeys }).catch(() => null);
 				setSlotSelection({
 					kind: "selected",
 					slotKey: nextSlotKey
@@ -1285,7 +1405,7 @@ function EntrySlotBlockEditorPanel({ siteId, dashboardBaseUrl, typeKey, entryId,
 }
 //#endregion
 //#region ../preview-next/src/client/preview/EntryEditorPanel.tsx
-function EntryEditorPanel({ siteId, dashboardBaseUrl, entryData, contentTypeSchema, referenceContentTypeKeys, draftContent, currentTemplate, theme, apiClient, entrySubrouteContext, metadataPanel, linkedEntrySection, widgets, sdkConfig, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function EntryEditorPanel({ siteId, dashboardBaseUrl, entryData, pageSurfaceId, contentTypeSchema, referenceContentTypeKeys, draftContent, currentTemplate, theme, apiClient, entrySubrouteContext, metadataPanel, linkedEntrySection, widgets, sdkConfig, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const [contentOpen, setContentOpen] = useState(true);
 	const [pageContentOpen, setPageContentOpen] = useState(false);
 	const [templateOpen, setTemplateOpen] = useState(false);
@@ -1350,7 +1470,6 @@ function EntryEditorPanel({ siteId, dashboardBaseUrl, entryData, contentTypeSche
 									theme: theme ?? null,
 									previewClient: apiClient,
 									children: /* @__PURE__ */ jsx(ContentFieldsForm, {
-										siteId,
 										form: contentFormSpec,
 										initialValues: contentInitialValues,
 										widgets
@@ -1387,6 +1506,7 @@ function EntryEditorPanel({ siteId, dashboardBaseUrl, entryData, contentTypeSche
 									dashboardBaseUrl,
 									typeKey: entryData.type,
 									entryId: entryData.id,
+									pageSurfaceId,
 									theme,
 									apiClient,
 									sdkConfig: sdkConfig ?? null,
@@ -1753,7 +1873,7 @@ function PageBlockEditorPanel(props) {
 								kind: "page",
 								pageId: props.pageId
 							},
-							blocks: props.blockItems,
+							source: { kind: "mounted" },
 							uiStore: props.uiStoreForBlockEditor,
 							apiClient: props.apiClient,
 							onBlocksChange: props.onBlocksChange,
@@ -1906,60 +2026,6 @@ function PreviewEditorGuidanceCard({ guidance, completeSetupDisabled, onComplete
 	});
 }
 //#endregion
-//#region ../ui/src/palette/hex.ts
-/**
-* Hex colour helpers shared by every palette-editing surface (Macadamia
-* onboarding swatches, the LiveThemeEditor, the Style configurator advanced
-* row). Consolidates three prior duplicates: `normalizeColorPickerValue` in
-* Macadamia, `normalizeHex` + `contrastRatio` formerly in
-* `theme-editor/utils.ts`, and the inline regex in `updateColorRole`.
-*
-* Pure functions; no DOM, no React.
-*/
-/**
-* Coerces user input into a canonical lowercase `#RRGGBB` form. Accepts
-* 3-digit shorthand, case-insensitive 6-digit hex, and the same forms with or
-* without a leading `#`; returns `fallback` for any other shape (empty
-* string, garbage, characters outside `[0-9a-f]`, wrong length, etc.). Pass
-* a `fallback` to make the fallback explicit at the call site — defaulting
-* to `'#000000'` preserves the former theme-editor helper semantics.
-*/
-function normalizeHex(input, fallback = "#000000") {
-	if (!input) return fallback;
-	const trimmed = input.trim().replace(/^#/, "").toLowerCase();
-	const expanded = trimmed.length === 3 ? trimmed.split("").map((char) => char + char).join("") : trimmed;
-	if (!/^[0-9a-f]{6}$/i.test(expanded)) return fallback;
-	return `#${expanded}`;
-}
-function hexToRgb(hex) {
-	const match = normalizeHex(hex).replace("#", "").match(/.{2}/g);
-	if (!match || match.length < 3) return null;
-	const [r, g, b] = match.map((value) => parseInt(value, 16));
-	return [
-		r,
-		g,
-		b
-	];
-}
-function luminanceChannel(raw) {
-	const channel = raw / 255;
-	return channel <= .03928 ? channel / 12.92 : Math.pow((channel + .055) / 1.055, 2.4);
-}
-/**
-* WCAG relative luminance + contrast ratio. Rounded to 2 decimal places so
-* the result is stable for UI display.
-*/
-function contrastRatio(hexA, hexB) {
-	const rgbA = hexToRgb(hexA);
-	const rgbB = hexToRgb(hexB);
-	if (!rgbA || !rgbB) return 1;
-	const lumA = .2126 * luminanceChannel(rgbA[0]) + .7152 * luminanceChannel(rgbA[1]) + .0722 * luminanceChannel(rgbA[2]);
-	const lumB = .2126 * luminanceChannel(rgbB[0]) + .7152 * luminanceChannel(rgbB[1]) + .0722 * luminanceChannel(rgbB[2]);
-	const brighter = Math.max(lumA, lumB);
-	const darker = Math.min(lumA, lumB);
-	return Number(((brighter + .05) / (darker + .05)).toFixed(2));
-}
-//#endregion
 //#region ../ui/src/palette/PaletteTokenEditor.tsx
 const DEFAULT_BRAND_ROLES = [
 	{
@@ -2115,6 +2181,7 @@ function ColorRoleGroup({ title, roles, getColor, onChange, disabled }) {
 function ColorRoleField({ role, value, onChange, disabled }) {
 	const inputId = useId();
 	const colorPickerLabel = `${role.label} colour picker`;
+	const { draft, changeDraft, finishDraft, setDraft } = useHexDraft(value, (hex) => onChange(role.key, hex));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "rounded-lg bg-muted p-3 space-y-2",
 		children: [
@@ -2126,7 +2193,10 @@ function ColorRoleField({ role, value, onChange, disabled }) {
 			/* @__PURE__ */ jsx(ColorPicker, {
 				value,
 				onChange: (next) => {
-					if (typeof next === "string") onChange(role.key, next);
+					if (typeof next === "string") {
+						setDraft(next);
+						onChange(role.key, next);
+					}
 				},
 				className: "w-full",
 				"aria-label": colorPickerLabel,
@@ -2134,8 +2204,9 @@ function ColorRoleField({ role, value, onChange, disabled }) {
 			}),
 			/* @__PURE__ */ jsx(Input, {
 				id: inputId,
-				value,
-				onChange: (event) => onChange(role.key, event.target.value),
+				value: draft,
+				onChange: (event) => changeDraft(event.target.value),
+				onBlur: finishDraft,
 				className: "font-mono text-xs uppercase",
 				placeholder: "#000000",
 				disabled
@@ -4441,7 +4512,10 @@ function isRecord(value) {
 }
 //#endregion
 //#region ../preview-next/src/client/preview/PreviewEditorSidebar.tsx
-function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, pageId, entryData, contentTypeSchema, referenceContentTypeKeys = [], draftContent, currentTemplate, theme, themeId = null, themeSelectionId = null, themeSelectionVersion = null, themeSelectionUpdatedAt = null, themeSelectionButtonStyleSelection = null, themeSelectionButtonStyleRepairs, themeSelectionHeaderSelection = null, themeSelectionFooterLookId = null, themeSelectionHeaderLogo, apiClient, bearerToken, entrySubrouteContext, assistantPanel, sdkConfig, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, onFooterSaved, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function assistantTabAvailable(input) {
+	return input.enabled && Boolean(input.pageId && input.bearerToken && input.canEdit);
+}
+function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, pageId, pageNodeType, entryData, contentTypeSchema, referenceContentTypeKeys = [], draftContent, currentTemplate, theme, themeId = null, themeSelectionId = null, themeSelectionVersion = null, themeSelectionUpdatedAt = null, themeSelectionButtonStyleSelection = null, themeSelectionButtonStyleRepairs, themeSelectionHeaderSelection = null, themeSelectionFooterLookId = null, themeSelectionHeaderLogo, apiClient, bearerToken, entrySubrouteContext, assistantPanel, sdkConfig, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, onFooterSaved, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const controller = useEntryController();
 	const controllerBlocks = controller.blocks;
 	const uiStore = useEditorUiStoreInstance();
@@ -4467,28 +4541,16 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		surfaceId
 	]);
 	const showAssistantTab = Boolean(assistantPanel);
-	const assistantAvailable = showAssistantTab && Boolean(pageId && bearerToken && canEdit);
+	const assistantAvailable = assistantTabAvailable({
+		enabled: showAssistantTab,
+		pageId,
+		bearerToken,
+		canEdit
+	});
 	const effectiveActiveTab = showAssistantTab ? resolvePreviewSidebarTab(activeTab) : "editor";
 	const blockItems = useMemo(() => controllerBlocks.list, [controllerBlocks.list]);
 	const blockEditorRef = useRef(null);
 	const contentFormWidgets = useMemo(() => previewWidgetOverrides, []);
-	const handleBlocksChange = useCallback((nextItems) => {
-		controllerBlocks.actions.setList(nextItems);
-		const drafts = uiStore.getState().drafts;
-		const extractData = (content) => {
-			if (!content || typeof content !== "object") return null;
-			const obj = content;
-			if ("data" in obj && obj.data && typeof obj.data === "object") return obj.data;
-			return obj;
-		};
-		for (const block of nextItems) {
-			if (!block.id) continue;
-			const baseline = extractData(block.content ?? block.draftContent ?? block.publishedContent ?? null);
-			const blockId = unsafeAsEditorBlockId(block.id);
-			if (drafts.getBlockSnapshot(blockId)) drafts.updateBlockBaseline(blockId, baseline, { kind: block.kind });
-			else drafts.initNewBlock(blockId, baseline, { kind: block.kind });
-		}
-	}, [controllerBlocks.actions, uiStore]);
 	useEffect(() => {
 		if (entryData) return;
 		const req = focusRequest;
@@ -4506,10 +4568,12 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		return /* @__PURE__ */ jsx(PreviewMetadataPanel, {
 			ownerKind: entryData ? "content" : "page",
 			contentTypeKey: entryData?.type ?? null,
-			entry: controller.entry
+			entry: controller.entry,
+			statusMessage: controller.toolbar.publishedMessage ?? null
 		});
 	}, [
 		controller.entry,
+		controller.toolbar.publishedMessage,
 		entryData,
 		pageId
 	]);
@@ -4543,6 +4607,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		siteId,
 		dashboardBaseUrl,
 		entryData,
+		pageSurfaceId: pageNodeType === "page_surface" ? pageId : null,
 		contentTypeSchema,
 		referenceContentTypeKeys,
 		draftContent,
@@ -4569,7 +4634,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		blockItems,
 		uiStoreForBlockEditor,
 		blockEditorRef,
-		onBlocksChange: handleBlocksChange,
+		onBlocksChange: controllerBlocks.actions.setList,
 		metadataPanel: metadataSectionContent,
 		designTakeoverActive,
 		designPanel: canInspectSiteStyle(siteStyleAccess) ? /* @__PURE__ */ jsx(StyleConfigurator, {
@@ -4669,10 +4734,33 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		})
 	});
 }
-function PreviewMetadataPanel({ ownerKind, contentTypeKey, entry }) {
-	const uiStore = useEditorUiStoreInstance();
+function PreviewMetadataPanel({ ownerKind, contentTypeKey, entry, statusMessage }) {
+	const metadataPresentation = usePreviewMetadataPresentation(ownerKind, contentTypeKey, entry);
+	const manifest = metadataPresentation.manifest;
+	const backend = usePreviewMetadataBackend(manifest, routeLifecycleContext(entry)?.draftStatus ?? "draft");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			metadataPresentation.kind === "page-homepage" ? /* @__PURE__ */ jsx("div", {
+				className: "inline-flex rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground",
+				children: "Homepage"
+			}) : null,
+			statusMessage ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				"data-testid": "preview-metadata-status",
+				children: statusMessage
+			}) : null,
+			/* @__PURE__ */ jsx(ManifestForm, {
+				manifest,
+				backend,
+				className: "space-y-4"
+			})
+		]
+	});
+}
+function usePreviewMetadataPresentation(ownerKind, contentTypeKey, entry) {
 	const currentSlug = useEditorUiStore((state) => state.metadata.getAtPath("draftSlug")) ?? void 0;
-	const metadataPresentation = useMemo(() => {
+	return useMemo(() => {
 		if (ownerKind === "content") return deriveRouteMetadataPresentation({
 			kind: "content",
 			typeKey: contentTypeKey
@@ -4689,33 +4777,89 @@ function PreviewMetadataPanel({ ownerKind, contentTypeKey, entry }) {
 		entry,
 		ownerKind
 	]);
-	const manifest = metadataPresentation.manifest;
-	const isHomepage = metadataPresentation.kind === "page-homepage";
+}
+/** The metadata form's backend; slug auto-generation reads the snapshot's status from its read-only context (row SL1). */
+function usePreviewMetadataBackend(manifest, draftStatus) {
+	const uiStore = useEditorUiStoreInstance();
 	const validation = useMemo(() => createManifestValidation(manifest), [manifest]);
-	const backend = useMemo(() => createStoreBackend({
+	return useMemo(() => createStoreBackend({
 		scope: "metadata",
 		store: uiStore,
+		context: { draftStatus },
 		validateFn: (values) => {
 			const result = validation.schema.safeParse(values);
-			if (!result.success) return result.error.issues;
-			return [];
+			return result.success ? [] : result.error.issues;
 		}
-	}), [uiStore, validation]);
+	}), [
+		draftStatus,
+		uiStore,
+		validation
+	]);
+}
+function LinkedEntryEditorPanel({ siteId, apiClient, theme, widgets, entry, fields }) {
+	const uiStore = useEditorUiStoreInstance();
+	const canWrite = useUISelector(uiStore, (state) => canWriteLinkedEntry(state, entry.meta.entryId));
+	const { manifest, backend } = useLinkedEntryForm(entry, fields, widgets);
+	const syncState = syncStateOf(entry.sync);
+	const errorMessage = syncState.kind === "failed" ? syncState.error : null;
+	const dirty = isEdited(entry.sync);
+	const isSaving = valueStatus(entry.sync) === "saving";
+	const displayTitle = resolveContentTitle(displayedValues(entry.sync), entry.meta.titleField, entry.meta.title);
 	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"
-		})]
+		className: "bg-muted/20",
+		children: [
+			/* @__PURE__ */ jsx(LinkedEntryLeaseBanner, { entryId: entry.meta.entryId }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-3 px-4 py-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate text-sm font-medium",
+						children: displayTitle
+					}), /* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-xs leading-5 text-muted-foreground",
+						children: "Changes update this linked entry wherever it appears."
+					})]
+				}), /* @__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",
+				inert: !canWrite,
+				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,
+					children: /* @__PURE__ */ jsx(ManifestForm, {
+						manifest,
+						backend,
+						widgetOverrides: widgets,
+						className: "space-y-4"
+					})
+				})]
+			})
+		]
 	});
 }
-function LinkedEntryEditorPanel({ siteId, apiClient, theme, widgets, entry, fields }) {
+function useLinkedEntryForm(entry, fields, widgets) {
 	const uiStore = useEditorUiStoreInstance();
-	const linkedEntriesAutosave = useUISelector(uiStore, (state) => state.autosave.linkedEntries);
 	const manifest = useMemo(() => ({
 		name: `linked-content-${entry.meta.contentTypeKey}`,
 		version: "1.0",
@@ -4730,65 +4874,17 @@ function LinkedEntryEditorPanel({ siteId, apiClient, theme, widgets, entry, fiel
 		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;
-	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__ */ jsxs("div", {
-				className: "min-w-0",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "truncate text-sm font-medium",
-					children: resolveContentTitle(entry.current ?? entry.baseline ?? null, entry.meta.titleField, entry.meta.title)
-				}), /* @__PURE__ */ jsx("p", {
-					className: "mt-1 text-xs leading-5 text-muted-foreground",
-					children: "Changes update this linked entry wherever it appears."
-				})]
-			}), /* @__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,
-				children: /* @__PURE__ */ jsx(ManifestForm, {
-					manifest,
-					backend,
-					widgetOverrides: widgets,
-					className: "space-y-4"
-				})
-			})]
-		})]
-	});
+	return {
+		manifest,
+		backend: useMemo(() => createStoreBackend({
+			scope: "linkedContent",
+			store: uiStore,
+			validateFn: (values) => {
+				const result = validation.schema.safeParse(values);
+				return result.success ? [] : result.error.issues;
+			}
+		}), [uiStore, validation])
+	};
 }
 function buildLinkedEntrySidebarSection(input) {
 	const { snapshot, inspection, renderContent } = input;