@riverbankcms/sdk 0.101.0 → 0.103.0

package/dist/{PreviewEditorSidebar-DBpy0KTh.mjs → PreviewEditorSidebar-DkNpCPja.mjs}

@@ -1,8 +1,8 @@
 "use client";
-import { $l as DropdownMenuLabel, $t as listEntryPageContentSlots, A as markApplySaving, Ai as requireEntriesForCuratedChoices, B as setTypographyBodyFontOverride, Bl as CollapsibleTrigger, C as createStyleConfiguratorState, Ci as curatedSiteStyles, Cl as TabsContent, D as isPreviewingChange, Dd as LoaderCircle, Di as evaluateTypographyFontSlot, E as dismissWarnings, Ed as Maximize2, F as previewHeaderStyle, Gi as findPaletteVariant, Gu as assertNever$1, H as styleConfiguratorHistoryEntryForPersistedSelection, Ht as FormRenderer, I as previewPaletteVariant, Ki as paletteVariants, L as previewSiteStyle, M as previewButtonPersonality, Mc as findButtonPersonality, Mi as getFooterLayout, Mt as resolvePageRouteSlug, N as previewFooterLook, Ni as getHeaderLayout, Nt as resolveContentTitle, O as markApplyFailed, Oi as findTypographyPreset, P as previewHeaderLayout, Pi as getHeaderStyle, Q as resolvePreviewSidebarTab, Ql as DropdownMenuItem, R as previewTypographyPreset, Rl as Collapsible, S as clearTypographyFontOverrides, Sl as Tabs, T as dismissNotices, Ti as getCuratedSiteStyle, Tl as TabsTrigger, Tu as unsafeAsEditorBlockId, U as syncStyleConfiguratorState, V as setTypographyHeadingFontOverride, Vt as createManifestValidation, W as toggleRow, Wt as createStoreBackend, Xd as ChevronRight, Xl as DropdownMenu, Yl as Surface, Z as createOptimisticActionRunner, Zd as ChevronLeft, Zl as DropdownMenuContent, _ as usePreviewDesignCoordinator, _t as useEditorUiStore, _u as Button, b as applyResolvedSelections, bl as PopoverTrigger, bu as cn, c as selectionSnapshotFromApplySiteStyleSelectionResponse, d as buildSiteChromeLookModels, dl as Select, dt as useUISelector, eu as DropdownMenuSeparator, f as cycleSiteChromeLookId, fd as Tablet, fl as SelectContent, h as planSiteChromeLookSelection, hd as Smartphone, hl as SelectValue, j as openRow, jc as buttonPersonalities, ji as findFooterLook, jt as deriveRouteMetadataPresentation, k as markApplySaved, ki as typographyPresets, l as planSiteStylePreviewChange, m as planSiteChromeFooterLayoutSelection, ml as SelectTrigger, mt as useEntryController, n as useSiteChromeCustomizeOptional, od as X$1, p as cycleableSiteChromeOptions, pl as SelectItem, qi as paletteOverridesSchema, s as buildApplySiteStyleSelectionBody, tu as DropdownMenuTrigger, u as resolveStyleConfiguratorInitialSnapshot, ut as ContentFieldsForm, vl as Popover, vt as useEditorUiStoreInstance, w as deriveStyleConfiguratorCapabilities, wd as Monitor, wl as TabsList, x as cancelPreview, xl as Input, yl as PopoverContent, z as setPaletteOverrides, zl as CollapsibleContent, zt as ManifestForm } from "./SiteChromeCustomizeContext-GwZc89KN.mjs";
-import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-Da74OL0X.mjs";
-import { S as isAdapterReferenceKind, T as CalloutDescription, _ as usePreviewBlockCustomizeSelectionOptional, b as previewWidgetOverrides, d as buildPreviewDashboardSetupUrl, f as resolvePreviewDashboardSetupHandoff, g as canInspectSiteStyle, h as canApplySiteStyle, m as resolvePreviewSidebarChromeModel, p as resolvePreviewEditorGuidanceModel, v as useBlockCustomizeControls, w as Callout, x as BlockEditor, y as PreviewFormProvider } from "./SdkPreviewModeRuntime-DFQP-Q53.mjs";
-import { t as Separator } from "./separator-BVk7GvGN.mjs";
+import { A as markApplySaving, Al as TabsTrigger, Au as unsafeAsEditorBlockId, B as setPaletteOverrides, Bt as ManifestForm, C as createStyleConfiguratorState, Cl as Popover, D as isPreviewingChange, Di as curatedSiteStyles, Dl as Tabs, E as dismissWarnings, El as Input, F as previewHeaderStyle, Fi as findFooterLook, Gl as CollapsibleTrigger, Gt as createStoreBackend, H as syncStyleConfiguratorState, Ht as createManifestValidation, I as previewPaletteVariant, Ic as buttonPersonalities, Ii as getFooterLayout, L as previewSiteStyle, Lc as findButtonPersonality, Li as getHeaderLayout, M as previewButtonPersonality, Md as LoaderCircle, Mi as findTypographyPreset, Mt as deriveRouteMetadataPresentation, N as previewFooterLook, Ni as typographyPresets, Nt as resolvePageRouteSlug, O as markApplyFailed, Ol as TabsContent, P as previewHeaderLayout, Pi as requireEntriesForCuratedChoices, Pt as resolveContentTitle, Q as resolvePreviewSidebarTab, Qi as paletteOverridesSchema, R as previewTypographyPreset, Ri as getHeaderStyle, S as cancelPreview, Su as Button, T as dismissNotices, Tl as PopoverTrigger, Tu as cn, U as toggleRow, Ul as Collapsible, Ut as FormRenderer, V as styleConfiguratorHistoryEntryForPersistedSelection, W as typographySelectionSnapshotFromFlat, Wl as CollapsibleContent, Xi as findPaletteVariant, Xu as assertNever$1, Z as createOptimisticActionRunner, Zi as paletteVariants, _ as usePreviewDesignCoordinator, _d as Tablet, _l as SelectContent, _t as useEditorUiStore, au as DropdownMenuSeparator, b as applyResolvedSelections, bd as Smartphone, bl as SelectValue, c as selectionSnapshotFromApplySiteStyleSelectionResponse, d as buildSiteChromeLookModels, dd as X$1, dt as useUISelector, en as listEntryPageContentSlots, eu as Surface, f as cycleSiteChromeLookId, gl as Select, h as planSiteChromeLookSelection, iu as DropdownMenuLabel, j as openRow, jd as Maximize2, ji as evaluateTypographyFontSlot, k as markApplySaved, kd as Monitor, ki as getCuratedSiteStyle, kl as TabsList, l as planSiteStylePreviewChange, m as planSiteChromeFooterLayoutSelection, mt as useEntryController, n as useSiteChromeCustomizeOptional, nf as ChevronLeft, ns as assertNever$2, nu as DropdownMenuContent, ou as DropdownMenuTrigger, p as cycleableSiteChromeOptions, ru as DropdownMenuItem, s as buildApplySiteStyleSelectionBody, tf as ChevronRight, tu as DropdownMenu, u as resolveStyleConfiguratorInitialSnapshot, ut as ContentFieldsForm, vl as SelectItem, vt as useEditorUiStoreInstance, w as deriveStyleConfiguratorCapabilities, wl as PopoverContent, x as applyTypographyDraftPatch, yl as SelectTrigger, z as resetTypographyToSaved } from "./SiteChromeCustomizeContext-CO1sTK_W.mjs";
+import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-ByPPZqmp.mjs";
+import { S as isAdapterReferenceKind, T as CalloutDescription, _ as usePreviewBlockCustomizeSelectionOptional, b as previewWidgetOverrides, d as buildPreviewDashboardSetupUrl, f as resolvePreviewDashboardSetupHandoff, g as canInspectSiteStyle, h as canApplySiteStyle, m as resolvePreviewSidebarChromeModel, p as resolvePreviewEditorGuidanceModel, v as useBlockCustomizeControls, w as Callout, x as BlockEditor, y as PreviewFormProvider } from "./SdkPreviewModeRuntime-5bCsXK2y.mjs";
+import { t as Separator } from "./separator-CM2C5Axs.mjs";
 import React, { forwardRef, useCallback, 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";
@@ -1562,12 +1562,13 @@ function formatBlockKindLabel(blockKind) {
 }
 //#endregion
 //#region ../preview-next/src/client/preview/PageBlockEditorPanel.tsx
-function PageBlockEditorPanel({ siteId, pageId, theme, apiClient, bearerToken, supabaseUrl, blockItems, uiStoreForBlockEditor, blockEditorRef, onBlocksChange, metadataPanel, linkedEntrySection, designPanel, sdkConfig, mediaAssets, bookingOfferingPresets, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function PageBlockEditorPanel({ siteId, pageId, theme, apiClient, bearerToken, supabaseUrl, blockItems, uiStoreForBlockEditor, blockEditorRef, onBlocksChange, metadataPanel, linkedEntrySection, designPanel, designOpenRequestId = null, sdkConfig, mediaAssets, bookingOfferingPresets, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
 	const [designOpen, setDesignOpen] = useState(false);
 	const [customizeOpen, setCustomizeOpen] = useState(false);
 	const [contentOpen, setContentOpen] = useState(true);
 	const [detailsOpen, setDetailsOpen] = useState(false);
+	const designSectionRef = useRef(null);
 	const customizeSectionRef = useRef(null);
 	const selectionKind = customizeSelection?.selection.kind;
 	const selectionRequestId = customizeSelection?.selection.kind === "selected" ? customizeSelection.selection.requestId : 0;
@@ -1594,6 +1595,14 @@ function PageBlockEditorPanel({ siteId, pageId, theme, apiClient, bearerToken, s
 			});
 		}
 	}, [selectionKind, selectionRequestId]);
+	useEffect(() => {
+		if (designOpenRequestId === null) return;
+		setDesignOpen(true);
+		designSectionRef.current?.scrollIntoView({
+			block: "start",
+			behavior: "smooth"
+		});
+	}, [designOpenRequestId]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-0 flex-col overflow-hidden",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1627,6 +1636,7 @@ function PageBlockEditorPanel({ siteId, pageId, theme, apiClient, bearerToken, s
 						open: designOpen,
 						onOpenChange: setDesignOpen,
 						children: /* @__PURE__ */ jsxs("div", {
+							ref: designSectionRef,
 							className: "border-b",
 							children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
 								asChild: true,
@@ -2107,7 +2117,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 	const router = useRouter();
 	const previewDesign = usePreviewDesignCoordinator();
 	const siteChromeCustomize = useSiteChromeCustomizeOptional();
-	const setSiteStyleStagedPreviewActive = siteChromeCustomize?.siteStyleHistory.setStagedPreviewActive;
+	const setSiteStyleStagedPreviewActive = siteChromeCustomize?.siteStyleHistory?.setStagedPreviewActive;
 	const { applyFailed, applyStarted, applySucceeded, clearPreview, previewTheme } = previewDesign;
 	const [isRefreshPending, startRefreshTransition] = useTransition();
 	const baseSnapshot = useMemo(() => resolveStyleConfiguratorInitialSnapshot({
@@ -2194,7 +2204,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		setState((current) => {
 			if (!current) return current;
 			appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
-			return openRow(current, expandedRowRequest.row === "header" ? "header-layout" : expandedRowRequest.row);
+			return openRow(current, expandedRowForPreviewDesignRow(expandedRowRequest.row));
 		});
 	}, [expandedRowRequest, hasLoadedState]);
 	const handlePreviewSiteStyle = useCallback((siteStyleId) => {
@@ -2212,6 +2222,10 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 			});
 			return applyResolvedSelections(next, {
 				resolved: result.resolvedSelections,
+				...result.resolvedSelections.typographySelection.kind === "custom" ? { typographySelection: {
+					kind: "custom",
+					typography: result.themeOverlay.typography
+				} } : {},
 				warnings: result.warnings
 			});
 		});
@@ -2264,14 +2278,44 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 	const handlePreviewTypographyPreset = useCallback((id) => {
 		setState((current) => current ? previewTypographyPreset(current, id) : current);
 	}, []);
-	const handleBodyFontOverride = useCallback((fontFamily) => {
-		setState((current) => current ? setTypographyBodyFontOverride(current, fontFamily) : current);
-	}, []);
-	const handleHeadingFontOverride = useCallback((fontFamily) => {
-		setState((current) => current ? setTypographyHeadingFontOverride(current, fontFamily) : current);
-	}, []);
-	const handleClearTypographyOverrides = useCallback(() => {
-		setState((current) => current ? clearTypographyFontOverrides(current) : current);
+	const patchTypography = useCallback((patch) => {
+		setState((current) => {
+			if (!current) return current;
+			const siteStyle = getCuratedSiteStyle(current.previewed.siteStyleId);
+			if (!siteStyle) return current;
+			return applyTypographyDraftPatch(current, planSiteStylePreviewChange({
+				siteStyle,
+				selection: current.previewed,
+				baseTheme: theme,
+				headerSelectionContext,
+				footerSelectionContext
+			}).themeOverlay.typography, patch);
+		});
+	}, [
+		footerSelectionContext,
+		headerSelectionContext,
+		theme
+	]);
+	const handleHeadingTypographyChange = useCallback((patch) => {
+		patchTypography({
+			kind: "heading",
+			patch
+		});
+	}, [patchTypography]);
+	const handleBodyTypographyChange = useCallback((patch) => {
+		patchTypography({
+			kind: "body",
+			patch
+		});
+	}, [patchTypography]);
+	const handleTypographyScaleChange = useCallback((scale) => {
+		patchTypography({
+			kind: "scale",
+			scale
+		});
+	}, [patchTypography]);
+	const handleResetTypography = useCallback(() => {
+		setState((current) => current ? resetTypographyToSaved(current) : current);
 	}, []);
 	const handleTokenOverride = useCallback((role, hex) => {
 		setState((current) => {
@@ -2323,9 +2367,10 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				headerLayoutId: compiled.resolvedSelections.headerLayoutId,
 				headerStyleId: compiled.resolvedSelections.headerStyleId,
 				headerLookId: compiled.resolvedSelections.headerLookId,
-				typographyPresetId: compiled.resolvedSelections.typographyPresetId,
-				typographyBodyFontOverride: compiled.resolvedSelections.typographyBodyFontOverride,
-				typographyHeadingFontOverride: compiled.resolvedSelections.typographyHeadingFontOverride
+				typographySelection: compiled.resolvedSelections.typographySelection.kind === "custom" ? {
+					kind: "custom",
+					typography: compiled.themeOverlay.typography
+				} : typographySelectionSnapshotFromFlat(compiled.resolvedSelections)
 			},
 			selectionId
 		});
@@ -2345,7 +2390,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				const persisted = selectionSnapshotFromApplySiteStyleSelectionResponse(saved, previewed);
 				const historyEntry = styleConfiguratorHistoryEntryForPersistedSelection(live, persisted);
 				setState((current) => current ? markApplySaved(current, persisted) : current);
-				if (historyEntry) siteChromeCustomize?.siteStyleHistory.recordAppliedSelection(historyEntry);
+				if (historyEntry) siteChromeCustomize?.siteStyleHistory?.recordAppliedSelection(historyEntry);
 				applySucceeded("style-configurator");
 				startRefreshTransition(() => {
 					router.refresh();
@@ -2390,7 +2435,14 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 	});
 	const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
 	const currentPaletteVariant = findPaletteVariant(state.previewed.paletteVariantId);
-	const currentTypographyPreset = state.previewed.typographyPresetId ? findTypographyPreset(state.previewed.typographyPresetId) : null;
+	const currentTypographyPreset = state.previewed.typographySelection.kind === "preset" && state.previewed.typographySelection.presetId ? findTypographyPreset(state.previewed.typographySelection.presetId) : null;
+	const currentTypography = planSiteStylePreviewChange({
+		siteStyle: currentSiteStyle,
+		selection: state.previewed,
+		baseTheme: theme,
+		headerSelectionContext,
+		footerSelectionContext
+	}).themeOverlay.typography;
 	const chromeLookModels = buildSiteChromeLookModels({
 		state,
 		siteStyle: currentSiteStyle,
@@ -2401,6 +2453,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 	const currentHeaderStyle = getHeaderStyle(state.previewed.headerStyleId);
 	const currentFooterLayout = getFooterLayout(chromeLookModels.footerLayout.renderedLayoutId);
 	const currentFooterLook = state.previewed.footerLookId ? findFooterLook(state.previewed.footerLookId) : findFooterLook(chromeLookModels.footer.renderedLookId);
+	const headerSurfaceState = siteChromeCustomize?.getSurfaceState("header") ?? { kind: "unavailable" };
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-3",
 		children: [
@@ -2453,7 +2506,13 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 					if (next !== void 0) handlePreviewHeaderStyle(next);
 				},
 				onPreview: handlePreviewHeaderStyle,
-				disabled: saving
+				disabled: saving,
+				extraControls: isHeaderMenuSurfaceState(headerSurfaceState) ? /* @__PURE__ */ jsx(HeaderMenuControls, {
+					state: headerSurfaceState,
+					disabled: saving,
+					onMenuFontChange: siteChromeCustomize?.setHeaderMenuFont,
+					onMenuFontSizeChange: siteChromeCustomize?.setHeaderMenuFontSize
+				}) : null
 			}),
 			/* @__PURE__ */ jsx(SiteChromeLookRow, {
 				label: "Footer layout",
@@ -2505,14 +2564,14 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				onToggle: () => handleToggleRow("typography"),
 				apiClient,
 				siteStyle: currentSiteStyle,
-				currentPresetId: state.previewed.typographyPresetId,
+				typography: currentTypography,
+				currentPresetId: state.previewed.typographySelection.kind === "preset" ? state.previewed.typographySelection.presetId : null,
 				currentLabel: currentTypographyPreset?.name ?? "Custom typography",
-				bodyFontOverride: state.previewed.typographyBodyFontOverride,
-				headingFontOverride: state.previewed.typographyHeadingFontOverride,
 				onPreviewPreset: handlePreviewTypographyPreset,
-				onBodyFontOverride: handleBodyFontOverride,
-				onHeadingFontOverride: handleHeadingFontOverride,
-				onClearOverrides: handleClearTypographyOverrides,
+				onHeadingChange: handleHeadingTypographyChange,
+				onBodyChange: handleBodyTypographyChange,
+				onScaleChange: handleTypographyScaleChange,
+				onReset: handleResetTypography,
 				disabled: saving
 			}),
 			/* @__PURE__ */ jsx(PaletteRow, {
@@ -2643,21 +2702,25 @@ function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel
 		})
 	});
 }
-function TypographyRow({ expanded, onToggle, apiClient, siteStyle, currentPresetId, currentLabel, bodyFontOverride, headingFontOverride, onPreviewPreset, onBodyFontOverride, onHeadingFontOverride, onClearOverrides, disabled }) {
+function TypographyRow({ expanded, onToggle, apiClient, siteStyle, typography, currentPresetId, currentLabel, onPreviewPreset, onHeadingChange, onBodyChange, onScaleChange, onReset, disabled }) {
+	const [headingOpen, setHeadingOpen] = useState(true);
+	const [bodyOpen, setBodyOpen] = useState(false);
 	const options = useMemo(() => requireEntriesForCuratedChoices(typographyPresets, siteStyle.typographyPresetChoices), [siteStyle.typographyPresetChoices]);
 	const fontCatalog = useFontCatalog(apiClient, expanded);
-	const selectedPreset = currentPresetId ? findTypographyPreset(currentPresetId) : null;
+	const fontPolicyPreset = (currentPresetId ? findTypographyPreset(currentPresetId) : null) ?? options[0] ?? typographyPresets[0];
+	if (!fontPolicyPreset) return 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", {
+		children: [/* @__PURE__ */ jsxs("section", {
+			"aria-label": "Start from preset",
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: "Start from preset"
+			}), /* @__PURE__ */ jsx("ul", {
 				role: "radiogroup",
 				"aria-label": "Typography preset",
 				className: "space-y-1",
@@ -2667,40 +2730,262 @@ function TypographyRow({ expanded, onToggle, apiClient, siteStyle, currentPreset
 					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$1, { 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, {
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-3 space-y-2 border-t pt-3",
+			children: [
+				/* @__PURE__ */ jsxs(TypographyDisclosure, {
+					label: "Heading",
+					open: headingOpen,
+					onOpenChange: setHeadingOpen,
+					children: [
+						/* @__PURE__ */ jsx(TypographyFontSlotPicker, {
+							label: "Heading font",
+							slot: "heading",
+							preset: fontPolicyPreset,
+							catalog: fontCatalog,
+							value: typography.headings.default.family,
+							onChange: (family) => onHeadingChange({ family }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Weight",
+							value: typography.headings.default.weight,
+							options: typographyWeightOptions,
+							onChange: (weight) => onHeadingChange({ weight }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Line height",
+							value: typography.headings.default.lineHeight,
+							options: typographyLineHeightOptions,
+							onChange: (lineHeight) => onHeadingChange({ lineHeight }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Scale",
+							value: normalizeTypographyScaleForControl(typography.scale),
+							options: typographyScaleOptions,
+							onChange: onScaleChange,
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographyColorTokenControl, {
+							value: typography.headings.default.colorToken ?? "text",
+							onChange: (colorToken) => onHeadingChange({ colorToken: colorToken === "text" ? null : colorToken }),
+							disabled
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(TypographyDisclosure, {
+					label: "Body",
+					open: bodyOpen,
+					onOpenChange: setBodyOpen,
+					children: [
+						/* @__PURE__ */ jsx(TypographyFontSlotPicker, {
+							label: "Body font",
+							slot: "body",
+							preset: fontPolicyPreset,
+							catalog: fontCatalog,
+							value: typography.body.family,
+							onChange: (family) => onBodyChange({ family }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Size",
+							value: typography.body.size,
+							options: bodySizeOptions,
+							onChange: (size) => onBodyChange({ size }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Weight",
+							value: typography.body.weight,
+							options: typographyWeightOptions,
+							onChange: (weight) => onBodyChange({ weight }),
+							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Line height",
+							value: typography.body.lineHeight,
+							options: typographyLineHeightOptions,
+							onChange: (lineHeight) => onBodyChange({ lineHeight }),
+							disabled
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
 					type: "button",
 					size: "sm",
 					variant: "outline",
-					onClick: onClearOverrides,
-					disabled: disabled || !bodyFontOverride && !headingFontOverride,
-					children: "Use preset fonts"
-				})]
-			})
-		]
+					onClick: onReset,
+					disabled,
+					children: "Reset typography"
+				})
+			]
+		})]
+	});
+}
+const typographyWeightOptions = [
+	{
+		value: "light",
+		label: "Light"
+	},
+	{
+		value: "regular",
+		label: "Regular"
+	},
+	{
+		value: "medium",
+		label: "Medium"
+	},
+	{
+		value: "semibold",
+		label: "Semibold"
+	},
+	{
+		value: "bold",
+		label: "Bold"
+	}
+];
+const typographyLineHeightOptions = [
+	{
+		value: "normal",
+		label: "Normal"
+	},
+	{
+		value: "relaxed",
+		label: "Relaxed"
+	},
+	{
+		value: "loose",
+		label: "Loose"
+	}
+];
+const bodySizeOptions = [
+	{
+		value: "md",
+		label: "Medium"
+	},
+	{
+		value: "lg",
+		label: "Large"
+	},
+	{
+		value: "xl",
+		label: "Extra large"
+	}
+];
+const typographyScaleOptions = [
+	{
+		value: "compact",
+		label: "Compact"
+	},
+	{
+		value: "balanced",
+		label: "Balanced"
+	},
+	{
+		value: "spacious",
+		label: "Spacious"
+	}
+];
+const headingColorTokenOptions = [
+	{
+		value: "text",
+		label: "Text"
+	},
+	{
+		value: "primary",
+		label: "Primary"
+	},
+	{
+		value: "secondary",
+		label: "Secondary"
+	},
+	{
+		value: "accent",
+		label: "Accent"
+	}
+];
+function TypographyDisclosure({ label, open, onOpenChange, children }) {
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rounded-md border bg-muted/10",
+			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium hover:bg-accent/30",
+					"aria-expanded": open,
+					children: [/* @__PURE__ */ jsx(ChevronRight, {
+						className: cn("h-4 w-4 transition", open && "rotate-90"),
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", { children: label })]
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "space-y-3 border-t px-3 py-3",
+				children
+			}) })]
+		})
 	});
 }
+function TypographySelectControl({ label, value, options, onChange, disabled }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "block space-y-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("select", {
+			value,
+			onChange: (event) => onChange(event.currentTarget.value),
+			disabled,
+			className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
+			children: options.map((option) => /* @__PURE__ */ jsx("option", {
+				value: option.value,
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+function TypographyColorTokenControl({ value, onChange, disabled }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "space-y-2",
+		"aria-label": "Default heading color",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: "Default heading color"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-[11px] text-muted-foreground",
+				children: "Sections may override"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-1",
+			children: headingColorTokenOptions.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cn("rounded-md border px-2 py-1.5 text-left text-xs transition disabled:cursor-not-allowed disabled:opacity-50", value === option.value ? "border-primary bg-primary/10" : "border-border hover:bg-muted/60"),
+				"aria-pressed": value === option.value,
+				onClick: () => onChange(option.value),
+				disabled,
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+function normalizeTypographyScaleForControl(scale) {
+	switch (scale) {
+		case "compact":
+		case "balanced":
+		case "spacious": return scale;
+		case "minorThird": return "compact";
+		case "majorThird": return "balanced";
+		case "perfectFourth": return "spacious";
+		default: return "balanced";
+	}
+}
 function TypographyPresetOption({ preset, selected, onSelect, disabled }) {
 	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
 		type: "button",
@@ -2735,8 +3020,24 @@ function TypographyPresetOption({ preset, selected, onSelect, disabled }) {
 }
 function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChange, disabled }) {
 	const [query, setQuery] = useState("");
+	const [manualFamilyDraft, setManualFamilyDraft] = useState(value);
 	const defaultFont = primaryFontFamily(preset.defaultFonts[slot]);
-	const selectedFamily = value ?? defaultFont;
+	const selectedFamily = primaryFontFamily(value);
+	useEffect(() => {
+		setManualFamilyDraft(value);
+	}, [value]);
+	const commitManualFamilyDraft = useCallback(() => {
+		const normalized = normalizeFontFamilyOverride(manualFamilyDraft);
+		if (!normalized) {
+			setManualFamilyDraft(value);
+			return;
+		}
+		onChange(normalized);
+	}, [
+		manualFamilyDraft,
+		onChange,
+		value
+	]);
 	const recordsByFamily = useMemo(() => indexFontsByFamily(catalog.fonts), [catalog.fonts]);
 	const selectedFit = evaluateTypographyFontSlot({
 		slot,
@@ -2768,7 +3069,7 @@ function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChang
 						children: label
 					}), /* @__PURE__ */ jsx("div", {
 						className: "truncate text-sm",
-						children: value ? selectedFamily : `${defaultFont} (preset)`
+						children: selectedFamily
 					})]
 				}), /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit: selectedFit })]
 			}),
@@ -2776,19 +3077,19 @@ function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChang
 				className: "grid grid-cols-1 gap-1",
 				children: [/* @__PURE__ */ jsxs("button", {
 					type: "button",
-					className: cn("rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50", value === null ? "border-foreground bg-accent/40" : "border-transparent hover:border-foreground/40 hover:bg-accent/20"),
-					onClick: () => onChange(null),
+					className: cn("rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50", selectedFamily === defaultFont ? "border-foreground bg-accent/40" : "border-transparent hover:border-foreground/40 hover:bg-accent/20"),
+					onClick: () => onChange(preset.defaultFonts[slot]),
 					disabled,
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "font-medium",
-						children: "Use preset font"
+						children: "Use recipe font"
 					}), /* @__PURE__ */ jsx("span", {
 						className: "ml-2 text-xs text-muted-foreground",
 						children: defaultFont
 					})]
 				}), recommendedOptions.map((family) => /* @__PURE__ */ jsx(FontFamilyOption, {
 					family,
-					selected: value === family,
+					selected: selectedFamily === family,
 					fit: evaluateTypographyFontSlot({
 						slot,
 						policy: preset.slotPolicies[slot],
@@ -2804,6 +3105,7 @@ function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChang
 					/* @__PURE__ */ jsx("input", {
 						type: "search",
 						value: query,
+						"aria-label": `Search ${slot} fonts`,
 						placeholder: `Search ${slot} fonts`,
 						onChange: (event) => setQuery(event.currentTarget.value),
 						disabled: disabled || catalog.kind === "loading",
@@ -2820,7 +3122,7 @@ function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChang
 						className: "max-h-56 space-y-1 overflow-y-auto pr-1",
 						children: browseOptions.map((font) => /* @__PURE__ */ jsx(FontFamilyOption, {
 							family: font.family,
-							selected: value === font.family,
+							selected: selectedFamily === font.family,
 							fit: evaluateTypographyFontSlot({
 								slot,
 								policy: preset.slotPolicies[slot],
@@ -2842,9 +3144,14 @@ function TypographyFontSlotPicker({ label, slot, preset, catalog, value, onChang
 					children: "Brand or uploaded font name"
 				}), /* @__PURE__ */ jsx("input", {
 					type: "text",
-					value: value ?? "",
+					value: manualFamilyDraft,
 					placeholder: "Enter any font family",
-					onChange: (event) => onChange(normalizeFontFamilyOverride(event.currentTarget.value)),
+					onChange: (event) => setManualFamilyDraft(event.currentTarget.value),
+					onBlur: commitManualFamilyDraft,
+					onKeyDown: (event) => {
+						if (event.key !== "Enter") return;
+						event.currentTarget.blur();
+					},
 					disabled,
 					className: "h-8 w-full rounded-md border bg-background px-2 text-sm outline-none focus:border-primary disabled:cursor-not-allowed disabled:opacity-50"
 				})]
@@ -3003,7 +3310,7 @@ function SiteChromeLookRow({ label, ariaLabel, defaultDescription, catalog, opti
 }, ...(catalog ?? []).map((look) => ({
 	...look,
 	available: true
-}))], diagnostics, scopeDescription, expanded, onToggle, currentId, currentLabel, onCycle, onPreview, disabled }) {
+}))], diagnostics, scopeDescription, expanded, onToggle, currentId, currentLabel, onCycle, onPreview, disabled, extraControls }) {
 	return /* @__PURE__ */ jsxs(StyleRowFrame, {
 		label,
 		currentLabel,
@@ -3038,6 +3345,10 @@ function SiteChromeLookRow({ label, ariaLabel, defaultDescription, catalog, opti
 				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,
+			extraControls ? /* @__PURE__ */ jsx("div", {
+				className: "mb-3",
+				children: extraControls
+			}) : null,
 			/* @__PURE__ */ jsx("ul", {
 				role: "radiogroup",
 				"aria-label": ariaLabel,
@@ -3053,6 +3364,40 @@ function SiteChromeLookRow({ label, ariaLabel, defaultDescription, catalog, opti
 		]
 	});
 }
+function isHeaderMenuSurfaceState(state) {
+	return state.kind === "available" && state.surface === "header" && Array.isArray(state.menuFontOptions) && Array.isArray(state.menuFontSizeOptions);
+}
+function HeaderMenuControls({ state, disabled, onMenuFontChange, onMenuFontSizeChange }) {
+	const controlDisabled = disabled || !state.applyAllowed;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-2 gap-2 rounded-md border bg-muted/20 p-2",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "block text-xs font-medium text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: "Menu font" }), /* @__PURE__ */ jsx("select", {
+				className: "mt-1 h-8 w-full rounded-md border bg-background px-2 text-sm text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				value: state.menuFont,
+				onChange: (event) => onMenuFontChange?.(event.currentTarget.value),
+				disabled: controlDisabled,
+				children: state.menuFontOptions.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))
+			})]
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "block text-xs font-medium text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("span", { children: "Menu font size" }), /* @__PURE__ */ jsx("select", {
+				className: "mt-1 h-8 w-full rounded-md border bg-background px-2 text-sm text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				value: state.menuFontSize,
+				onChange: (event) => onMenuFontSizeChange?.(event.currentTarget.value),
+				disabled: controlDisabled,
+				children: state.menuFontSizeOptions.map((option) => /* @__PURE__ */ jsx("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))
+			})]
+		})]
+	});
+}
 function PaletteRow({ expanded, onToggle, siteStyle, currentId, currentLabel, currentSwatch, onPreview, disabled }) {
 	const options = useMemo(() => {
 		const recommended = requireEntriesForCuratedChoices(paletteVariants, siteStyle.paletteVariantChoices);
@@ -3171,6 +3516,16 @@ function classifyStyleApplyError(error) {
 		message: error instanceof Error ? error.message : "Unable to apply your selection."
 	};
 }
+function expandedRowForPreviewDesignRow(row) {
+	switch (row) {
+		case "header": return "header-layout";
+		case "header-layout":
+		case "header-style":
+		case "footer-layout":
+		case "footer": return row;
+		default: return assertNever$2(row, "Unhandled preview design row");
+	}
+}
 function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
@@ -3344,6 +3699,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		blockEditorRef,
 		onBlocksChange: handleBlocksChange,
 		metadataPanel: metadataSectionContent,
+		designOpenRequestId: designRowRequest?.id ?? null,
 		designPanel: canInspectSiteStyle(siteStyleAccess) ? /* @__PURE__ */ jsx(StyleConfigurator, {
 			siteId,
 			apiClient,