@riverbankcms/sdk 0.101.0 → 0.102.0

package/dist/{PreviewEditorSidebar-DBpy0KTh.mjs → PreviewEditorSidebar-BKkhhkJk.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 { $d as ChevronLeft, $l as DropdownMenuContent, A as markApplySaving, Ai as findTypographyPreset, B as setPaletteOverrides, Bl as Collapsible, Bt as ManifestForm, C as createStyleConfiguratorState, Cl as Input, D as isPreviewingChange, Di as getCuratedSiteStyle, Dl as TabsTrigger, Du as unsafeAsEditorBlockId, E as dismissWarnings, Ed as Monitor, El as TabsList, F as previewHeaderStyle, Fi as getHeaderLayout, Gt as createStoreBackend, H as syncStyleConfiguratorState, Hl as CollapsibleTrigger, Ht as createManifestValidation, I as previewPaletteVariant, Ii as getHeaderStyle, Ji as paletteVariants, L as previewSiteStyle, M as previewButtonPersonality, Mi as requireEntriesForCuratedChoices, Mt as deriveRouteMetadataPresentation, N as previewFooterLook, Nc as buttonPersonalities, Ni as findFooterLook, Nt as resolvePageRouteSlug, O as markApplyFailed, Od as Maximize2, P as previewHeaderLayout, Pc as findButtonPersonality, Pi as getFooterLayout, Pt as resolveContentTitle, Q as resolvePreviewSidebarTab, Qd as ChevronRight, Ql as DropdownMenu, R as previewTypographyPreset, S as cancelPreview, Sl as PopoverTrigger, Su as cn, T as dismissNotices, Ti as curatedSiteStyles, Tl as TabsContent, U as toggleRow, Ut as FormRenderer, V as styleConfiguratorHistoryEntryForPersistedSelection, Vl as CollapsibleContent, W as typographySelectionSnapshotFromFlat, Yi as paletteOverridesSchema, Z as createOptimisticActionRunner, Zl as Surface, _ as usePreviewDesignCoordinator, _d as Smartphone, _l as SelectValue, _t as useEditorUiStore, b as applyResolvedSelections, bl as Popover, c as selectionSnapshotFromApplySiteStyleSelectionResponse, cd as X$1, d as buildSiteChromeLookModels, dt as useUISelector, en as listEntryPageContentSlots, eu as DropdownMenuItem, f as cycleSiteChromeLookId, gl as SelectTrigger, h as planSiteChromeLookSelection, hl as SelectItem, j as openRow, ji as typographyPresets, k as markApplySaved, kd as LoaderCircle, ki as evaluateTypographyFontSlot, l as planSiteStylePreviewChange, m as planSiteChromeFooterLayoutSelection, md as Tablet, ml as SelectContent, mt as useEntryController, n as useSiteChromeCustomizeOptional, nu as DropdownMenuSeparator, p as cycleableSiteChromeOptions, pl as Select, qi as findPaletteVariant, qu as assertNever$1, ru as DropdownMenuTrigger, s as buildApplySiteStyleSelectionBody, tu as DropdownMenuLabel, u as resolveStyleConfiguratorInitialSnapshot, ut as ContentFieldsForm, vt as useEditorUiStoreInstance, w as deriveStyleConfiguratorCapabilities, wl as Tabs, x as applyTypographyDraftPatch, xl as PopoverContent, yu as Button, z as resetTypographyToSaved } from "./SiteChromeCustomizeContext-Bh9-DtMQ.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-CA2k7Z_T.mjs";
+import { t as Separator } from "./separator-CRoP34pT.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";
@@ -2212,6 +2212,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 +2268,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 +2357,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
 		});
@@ -2390,7 +2425,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,
@@ -2505,14 +2547,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 +2685,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 +2713,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 +3003,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 +3052,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 +3060,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 +3088,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 +3105,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 +3127,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"
 				})]

package/dist/{PreviewEditorUI-Fg6I2R2T.mjs → PreviewEditorUI-DIvTqcqI.mjs}

@@ -1,7 +1,7 @@
 "use client";
-import { Bd as EllipsisVertical, Cd as Palette, Dd as LoaderCircle, Dt as useMultiAutosave, Il as DialogHeader, Ll as DialogTitle, Nl as DialogContent, Pl as DialogDescription, Qd as ChevronDown, Ql as DropdownMenuItem, Rd as Eye, Sd as PenLine, Xl as DropdownMenu, Zl as DropdownMenuContent, _t as useEditorUiStore, _u as Button, a as previewDesignHistoryDomainForCommand, bu as cn, cd as Undo2, gt as classifyHistoryShortcut, ht as useEntryEditorController, i as usePreviewDesignHistoryOrder, jl as Dialog, ld as TriangleAlert, ll as TooltipTrigger, lt as useEditor, md as Sparkles, n as useSiteChromeCustomizeOptional, o as selectPreviewDesignHistoryDomain, ol as Tooltip, sl as TooltipContent, tu as DropdownMenuTrigger, vt as useEditorUiStoreInstance, vu as cva, xd as Pencil, yd as Redo2 } from "./SiteChromeCustomizeContext-GwZc89KN.mjs";
-import { d as unwrapResponse, r as usePreviewAuth } from "./previewAuthStore-Da74OL0X.mjs";
-import { C as FixedBottomSurface, a as usePreviewPageDesignEditorState, c as applyPreviewChromeSurfaceToElement, l as resolvePreviewChromeSurface, o as PREVIEW_CHROME_PORTAL_CLASS_NAME, s as PREVIEW_CHROME_THEME_CLASS_NAME, u as setPreviewSidebarTab } from "./SdkPreviewModeRuntime-DFQP-Q53.mjs";
+import { $l as DropdownMenuContent, Bd as Eye, Cd as Pencil, Fl as DialogContent, Hd as EllipsisVertical, Il as DialogDescription, Nl as Dialog, Ot as useMultiAutosave, Ql as DropdownMenu, Rl as DialogHeader, Su as cn, Td as Palette, _t as useEditorUiStore, a as previewDesignHistoryDomainForCommand, bu as cva, cl as Tooltip, dd as TriangleAlert, dl as TooltipTrigger, ef as ChevronDown, eu as DropdownMenuItem, gd as Sparkles, gt as classifyHistoryShortcut, ht as useEntryEditorController, i as usePreviewDesignHistoryOrder, kd as LoaderCircle, ll as TooltipContent, lt as useEditor, n as useSiteChromeCustomizeOptional, o as selectPreviewDesignHistoryDomain, ru as DropdownMenuTrigger, ud as Undo2, vt as useEditorUiStoreInstance, wd as PenLine, xd as Redo2, yu as Button, zl as DialogTitle } from "./SiteChromeCustomizeContext-Bh9-DtMQ.mjs";
+import { d as unwrapResponse, r as usePreviewAuth } from "./previewAuthStore-ByPPZqmp.mjs";
+import { C as FixedBottomSurface, a as usePreviewPageDesignEditorState, c as applyPreviewChromeSurfaceToElement, l as resolvePreviewChromeSurface, o as PREVIEW_CHROME_PORTAL_CLASS_NAME, s as PREVIEW_CHROME_THEME_CLASS_NAME, u as setPreviewSidebarTab } from "./SdkPreviewModeRuntime-CA2k7Z_T.mjs";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/{PreviewQueryProvider-BICQLAUF.mjs → PreviewQueryProvider-ZF6TXq5Q.mjs}

@@ -1,5 +1,5 @@
 "use client";
-import { n as markPreviewAuthExpired, s as ApiRequestError } from "./previewAuthStore-Da74OL0X.mjs";
+import { n as markPreviewAuthExpired, s as ApiRequestError } from "./previewAuthStore-ByPPZqmp.mjs";
 import { createContext, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";