@riverbankcms/sdk 0.104.3 → 0.107.0

package/dist/{PreviewEditorSidebar-CBMhU9p_.mjs → PreviewEditorSidebar-DpAbAl08.mjs}

@@ -1,8 +1,8 @@
 "use client";
-import { $i as getFooterLayout, $l as CollapsibleContent, A as openRow, Ai as getCuratedSiteStyle, B as setPaletteColors, Bc as buttonPersonalities, Bd as Maximize2, Bt as ManifestForm, C as createStyleConfiguratorState, D as markApplyFailed, Dl as SelectItem, E as isPreviewingChange, Ed as Tablet, El as SelectContent, F as previewHeaderLayout, Fl as Input, Gt as createStoreBackend, H as syncStyleConfiguratorState, Ht as createManifestValidation, I as previewHeaderStyle, Il as Tabs, Ji as evaluateTypographyFontSlot, L as previewSiteStyle, Ll as TabsContent, M as previewButtonPersonality, Ml as Popover, Mt as deriveRouteMetadataPresentation, N as previewCuratedPalette, Nl as PopoverContent, Nt as resolvePageRouteSlug, O as markApplySaved, Oi as curatedSiteStyles, Ol as SelectTrigger, P as previewFooterLook, Pl as PopoverTrigger, Pt as resolveContentTitle, Pu as cn, Q as resolvePreviewSidebarTab, Qi as findFooterLook, Ql as Collapsible, R as previewTypographyPreset, Rd as Monitor, Rl as TabsList, S as cancelPreview, T as dismissWarnings, Tl as Select, U as toggleRow, Ut as FormRenderer, V as styleConfiguratorHistoryEntryForPersistedSelection, Vc as findButtonPersonality, Vd as LoaderCircle, W as typographySelectionSnapshotFromFlat, Xi as typographyPresets, Yi as findTypographyPreset, Z as createOptimisticActionRunner, Zi as requireEntriesForCuratedChoices, _ as usePreviewDesignCoordinator, _a as paletteColorsSchema, _t as useEditorUiStore, ad as assertNever$1, b as applyResolvedSelections, bd as X$1, c as selectionSnapshotFromApplySiteStyleSelectionResponse, d as buildSiteChromeLookModels, dt as useUISelector, du as DropdownMenuContent, ea as getHeaderLayout, en as listEntryPageContentSlots, eu as CollapsibleTrigger, f as cycleSiteChromeLookId, ff as ChevronRight, fu as DropdownMenuItem, ga as paletteColorsEqual, h as planSiteChromeLookSelection, ha as paletteColorEntries, hu as DropdownMenuTrigger, j as paletteMutationCapability, ju as Button, k as markApplySaving, kd as Smartphone, kl as SelectValue, l as planSiteStylePreviewChange, lu as Surface, m as planSiteChromeFooterLayoutSelection, ma as findCuratedPalette, mt as useEntryController, mu as DropdownMenuSeparator, n as useSiteChromeCustomizeOptional, p as cycleableSiteChromeOptions, pa as curatedPalettes, pf as ChevronLeft, pu as DropdownMenuLabel, s as buildApplySiteStyleSelectionBody, ta as getHeaderStyle, u as resolveStyleConfiguratorInitialSnapshot, ut as ContentFieldsForm, uu as DropdownMenu, vt as useEditorUiStoreInstance, w as deriveStyleConfiguratorCapabilities, x as applyTypographyDraftPatch, z as resetTypographyToSaved, zl as TabsTrigger, zu as unsafeAsEditorBlockId } from "./SiteChromeCustomizeContext-Cx0NMdyv.mjs";
-import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-CfquDtTh.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-Iq12HjL7.mjs";
-import { t as Separator } from "./separator-BhAR_Xmf.mjs";
+import { A as markApplySaved, B as previewHeaderStyle, Bl as Popover, C as committedPaletteForSnapshot, Cf as ChevronLeft, Cu as DropdownMenuTrigger, D as dismissWarnings, E as deriveStyleConfiguratorCapabilities, F as prepareStalePaletteRetry, Fd as Tablet, Fl as SelectTrigger, G as setPaletteColors, Gl as TabsContent, H as previewSiteStyle, Hl as PopoverTrigger, Hu as cn, I as previewButtonPersonality, Ii as getCuratedSiteStyle, Il as SelectValue, It as deriveRouteMetadataPresentation, J as toggleRow, Jd as Monitor, K as styleConfiguratorHistoryEntryForPersistedSelection, Kc as buttonPersonalities, Kl as TabsList, Kt as createManifestValidation, L as previewCuratedPalette, Lt as resolvePageRouteSlug, M as openRow, Ml as Select, N as paletteMutationCapability, Nl as SelectContent, O as isPreviewingChange, P as palettePreviewProjection, Pi as curatedSiteStyles, Pl as SelectItem, R as previewFooterLook, Rd as Smartphone, Rt as resolveContentTitle, S as cancelPreview, Sf as ChevronRight, St as useEditorUiStoreInstance, Su as DropdownMenuSeparator, T as createStyleConfiguratorState, Tf as Check, U as reconcilePaletteLibraryActive, Ul as Input, V as previewSitePalette, Vl as PopoverContent, W as resetTypographyToSaved, Wd as Plus, Wl as Tabs, Wt as ManifestForm, Xd as Maximize2, Yt as createStoreBackend, Zd as LoaderCircle, _ as usePreviewDesignCoordinator, _a as findCuratedPalette, _u as Surface, b as applyResolvedSelections, ba as paletteColorsEqual, bu as DropdownMenuItem, c as selectionSnapshotFromApplySiteStyleSelectionResponse, cu as CollapsibleTrigger, d as cycleSiteChromeLookId, ea as requireEntriesForCuratedChoices, f as cycleableSiteChromeOptions, ga as curatedPalettes, h as planSiteStylePreviewChange, ht as useUISelector, ia as getHeaderStyle, in as listEntryPageContentSlots, j as markApplySaving, k as markApplyFailed, kd as X$1, l as resolveStyleConfiguratorInitialSnapshot, m as planSiteChromeLookSelection, md as assertNever$1, mt as ContentFieldsForm, n as useSiteChromeCustomizeOptional, na as getFooterLayout, nt as resolvePreviewSidebarTab, ou as Collapsible, p as planSiteChromeFooterLayoutSelection, q as syncStyleConfiguratorState, qc as findButtonPersonality, ql as TabsTrigger, qt as FormRenderer, qu as unsafeAsEditorBlockId, ra as getHeaderLayout, s as buildApplySiteStyleSelectionBody, su as CollapsibleContent, ta as findFooterLook, tt as createOptimisticActionRunner, u as buildSiteChromeLookModels, va as buildPaletteLibraryReadModel, vt as useEntryController, vu as DropdownMenu, w as createPalette, x as applyTypographyDraftPatch, xa as paletteColorsSchema, xt as useEditorUiStore, xu as DropdownMenuLabel, ya as paletteColorEntries, yu as DropdownMenuContent, z as previewHeaderLayout, zd as SlidersHorizontal, zl as SearchInput, zu as Button } from "./SiteChromeCustomizeContext-C_sizso-.mjs";
+import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-BPcJPzdz.mjs";
+import { C as buildFontPreviewUrl, D as Callout, O as CalloutDescription, S as isAdapterReferenceKind, T as getSiteFontsStorageUrl, _ 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 generateFontFaceCss, x as BlockEditor, y as PreviewFormProvider } from "./SdkPreviewModeRuntime-CVB7urtl.mjs";
+import { t as Separator } from "./separator-BoMSQnsP.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";
@@ -1564,7 +1564,7 @@ function formatBlockKindLabel(blockKind) {
 }
 //#endregion
 //#region ../preview-next/src/client/preview/PageBlockEditorPanel.tsx
-function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClient, bearerToken, supabaseUrl, blockItems, uiStoreForBlockEditor, blockEditorRef, onBlocksChange, metadataPanel, linkedEntrySection, designPanel, designOpenRequestId = null, sdkConfig, mediaAssets, bookingOfferingPresets, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClient, bearerToken, supabaseUrl, blockItems, uiStoreForBlockEditor, blockEditorRef, onBlocksChange, metadataPanel, linkedEntrySection, designPanel, designOpenRequestId = null, designTakeoverActive = false, sdkConfig, mediaAssets, bookingOfferingPresets, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
 	const [designOpen, setDesignOpen] = useState(false);
 	const [customizeOpen, setCustomizeOpen] = useState(false);
@@ -1627,35 +1627,48 @@ function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClie
 			bookingOfferingPresets,
 			sdkConfig: sdkConfig ?? null,
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "min-h-0 flex-1 space-y-0 overflow-auto",
+				className: `min-h-0 flex-1 space-y-0 ${designTakeoverActive ? "flex flex-col overflow-hidden" : "overflow-auto"}`,
+				"data-design-takeover-active": designTakeoverActive ? "true" : "false",
 				children: [
-					linkedEntrySection ? /* @__PURE__ */ jsx(PreviewSidebarSection, {
-						label: linkedEntrySection.label,
-						openRequestId: linkedEntrySection.openRequestId,
-						children: linkedEntrySection.content
+					linkedEntrySection ? /* @__PURE__ */ jsx("div", {
+						hidden: designTakeoverActive,
+						"data-design-takeover-sibling": true,
+						children: /* @__PURE__ */ jsx(PreviewSidebarSection, {
+							label: linkedEntrySection.label,
+							openRequestId: linkedEntrySection.openRequestId,
+							children: linkedEntrySection.content
+						})
 					}) : null,
 					designPanel ? /* @__PURE__ */ jsx(Collapsible, {
-						open: designOpen,
-						onOpenChange: setDesignOpen,
+						className: designTakeoverActive ? "flex min-h-0 flex-1 flex-col overflow-hidden" : void 0,
+						open: designTakeoverActive || designOpen,
+						onOpenChange: (open) => {
+							if (!designTakeoverActive) setDesignOpen(open);
+						},
 						children: /* @__PURE__ */ jsxs("div", {
 							ref: designSectionRef,
-							className: "border-b",
+							className: designTakeoverActive ? "flex min-h-0 flex-1 flex-col overflow-hidden" : "border-b",
 							children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
 								asChild: true,
 								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40",
-									children: [/* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${designOpen ? "rotate-90" : ""}` }), /* @__PURE__ */ jsx("span", {
+									className: `flex shrink-0 cursor-pointer items-center gap-2 px-4 py-3 hover:bg-accent/40 ${designTakeoverActive ? "border-b" : ""}`,
+									children: [/* @__PURE__ */ jsx(ChevronRight, { className: `h-4 w-4 transition ${designTakeoverActive || designOpen ? "rotate-90" : ""}` }), /* @__PURE__ */ jsx("span", {
 										className: "text-sm font-semibold",
 										children: "Design"
 									})]
 								})
-							}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
-								className: "px-4 pb-4",
-								children: designPanel
-							}) })]
+							}), /* @__PURE__ */ jsx(CollapsibleContent, {
+								className: designTakeoverActive ? "min-h-0 flex-1 data-[state=open]:h-full data-[state=open]:overflow-hidden" : void 0,
+								children: /* @__PURE__ */ jsx("div", {
+									className: designTakeoverActive ? "h-full min-h-0" : "px-4 pb-4",
+									children: designPanel
+								})
+							})]
 						})
 					}) : null,
 					/* @__PURE__ */ jsx(Collapsible, {
+						hidden: designTakeoverActive,
+						"data-design-takeover-sibling": true,
 						open: customizeOpen,
 						onOpenChange: setCustomizeOpen,
 						children: /* @__PURE__ */ jsxs("div", {
@@ -1682,6 +1695,8 @@ function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClie
 						})
 					}),
 					/* @__PURE__ */ jsx(Collapsible, {
+						hidden: designTakeoverActive,
+						"data-design-takeover-sibling": true,
 						open: contentOpen,
 						onOpenChange: setContentOpen,
 						children: /* @__PURE__ */ jsxs("div", {
@@ -1718,6 +1733,8 @@ function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClie
 						})
 					}),
 					metadataPanel ? /* @__PURE__ */ jsx(Collapsible, {
+						hidden: designTakeoverActive,
+						"data-design-takeover-sibling": true,
 						open: detailsOpen,
 						onOpenChange: setDetailsOpen,
 						children: /* @__PURE__ */ jsxs("div", {
@@ -2061,712 +2078,516 @@ function ContrastSwatch({ hex, label }) {
 	});
 }
 //#endregion
-//#region ../preview-next/src/client/preview/StyleConfigurator.tsx
-const MAX_FONT_RESULTS_WHEN_SEARCHING = 12;
-const MAX_FONT_RESULTS_WHEN_BROWSING = 8;
-const PALETTE_BRAND_ROLES = [
+//#region ../preview-next/src/client/preview/typographyFontCatalog.ts
+const typographyFontCategories = [
 	{
-		key: "primary",
-		label: "Primary"
+		value: "all",
+		label: "All"
 	},
 	{
-		key: "primaryForeground",
-		label: "Primary text"
+		value: "sans-serif",
+		label: "Sans"
 	},
 	{
-		key: "secondary",
-		label: "Secondary"
+		value: "serif",
+		label: "Serif"
 	},
 	{
-		key: "accent",
-		label: "Accent"
-	}
-];
-const PALETTE_FEEDBACK_ROLES = [
-	{
-		key: "success",
-		label: "Success"
+		value: "display",
+		label: "Display"
 	},
 	{
-		key: "warning",
-		label: "Warning"
+		value: "handwriting",
+		label: "Handwriting"
 	},
 	{
-		key: "destructive",
-		label: "Destructive"
+		value: "monospace",
+		label: "Mono"
 	}
 ];
-const PALETTE_SURFACE_ROLES = [
-	{
-		key: "background",
-		label: "Background"
-	},
-	{
-		key: "surface",
-		label: "Surface"
-	},
-	{
-		key: "surfaceAlt",
-		label: "Alternate surface"
-	},
-	{
-		key: "muted",
-		label: "Muted surface"
-	},
-	{
-		key: "text",
-		label: "Text"
-	},
-	{
-		key: "border",
-		label: "Border"
+function buildTypographyFontCatalog(input) {
+	const normalizedQuery = input.query.trim().toLocaleLowerCase();
+	const site = input.siteFonts.map(siteFontOption).filter((option) => fontOptionMatches(option, normalizedQuery, input.category)).sort(compareFontOptionsAlphabetically);
+	const siteFamilies = new Set(input.siteFonts.map((font) => familyKey(font.familyName)));
+	return {
+		site,
+		google: input.googleFonts.map(googleFontOption).filter((option) => !siteFamilies.has(familyKey(option.family))).filter((option) => fontOptionMatches(option, normalizedQuery, input.category)).sort(compareGoogleOptions)
+	};
+}
+function visibleTypographyFontOptions(input) {
+	const initial = input.options.slice(0, input.limit);
+	if (input.limit <= 0 || initial.some((option) => familyKey(option.family) === familyKey(input.selectedFamily))) return initial;
+	const selected = input.options.find((option) => familyKey(option.family) === familyKey(input.selectedFamily));
+	if (!selected) return initial;
+	return [...initial.slice(0, Math.max(0, input.limit - 1)), selected];
+}
+function fontOptionForFamily(family, catalog) {
+	const key = familyKey(primaryFontFamily(family));
+	const site = catalog.siteFonts.find((font) => familyKey(font.familyName) === key);
+	if (site) return siteFontOption(site);
+	const google = catalog.googleFonts.find((font) => familyKey(font.family) === key);
+	return google ? googleFontOption(google) : null;
+}
+function primaryFontFamily(cssFamily) {
+	return cssFamily.split(",")[0]?.trim().replace(/^["']|["']$/gu, "") || cssFamily;
+}
+function siteFontOption(font) {
+	return {
+		source: "site",
+		family: font.familyName,
+		label: font.displayName ?? font.familyName,
+		category: normalizeCategory(font.category),
+		siteFont: font
+	};
+}
+function googleFontOption(font) {
+	return {
+		source: "google",
+		family: font.family,
+		label: font.family,
+		category: normalizeCategory(font.category),
+		googleFont: font
+	};
+}
+function normalizeCategory(category) {
+	switch (category) {
+		case "sans-serif":
+		case "serif":
+		case "display":
+		case "handwriting":
+		case "monospace": return category;
+		default: return null;
 	}
-];
-function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, headerSelectionContext, footerSelectionContext, expandedRowRequest = null, siteStyleAccess }) {
-	const router = useRouter();
-	const previewDesign = usePreviewDesignCoordinator();
-	const siteChromeCustomize = useSiteChromeCustomizeOptional();
-	const setSiteStyleStagedPreviewActive = siteChromeCustomize?.siteStyleHistory?.setStagedPreviewActive;
-	const { applyFailed, applyStarted, applySucceeded, clearPreview, previewTheme } = previewDesign;
-	const [isRefreshPending, startRefreshTransition] = useTransition();
-	const baseSnapshot = useMemo(() => resolveStyleConfiguratorInitialSnapshot({
-		theme,
-		initialSelections: {
-			...initialSelections,
-			selectionVersion: initialSelections.selectionVersion ?? selectionVersion ?? 0,
-			selectionUpdatedAt: initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
-		},
-		headerSelectionContext,
-		footerSelectionContext
-	}), [
-		footerSelectionContext,
-		headerSelectionContext,
-		theme,
-		initialSelections,
-		selectionUpdatedAt,
-		selectionVersion
-	]);
-	const [state, setState] = useState(() => baseSnapshot ? createStyleConfiguratorState(baseSnapshot) : null);
-	const hasLoadedState = state !== null;
-	const hasStagedSiteStylePreview = state ? isPreviewingChange(state) : false;
-	const stateRef = useRef(state);
-	const clearPreviewRef = useRef(clearPreview);
-	const runnerRef = useRef(createOptimisticActionRunner());
-	const appliedExpandedRowRequestIdRef = useRef(null);
-	useEffect(() => {
-		stateRef.current = state;
-	}, [state]);
-	useEffect(() => {
-		clearPreviewRef.current = clearPreview;
-	}, [clearPreview]);
+}
+function fontOptionMatches(option, normalizedQuery, category) {
+	const matchesQuery = normalizedQuery.length === 0 || option.family.toLocaleLowerCase().includes(normalizedQuery) || option.label.toLocaleLowerCase().includes(normalizedQuery);
+	const matchesCategory = category === "all" || option.category === category;
+	return matchesQuery && matchesCategory;
+}
+function compareGoogleOptions(left, right) {
+	if (left.source !== "google" || right.source !== "google") return compareFontOptionsAlphabetically(left, right);
+	return (left.googleFont.popularity ?? Number.POSITIVE_INFINITY) - (right.googleFont.popularity ?? Number.POSITIVE_INFINITY) || compareFontOptionsAlphabetically(left, right);
+}
+function compareFontOptionsAlphabetically(left, right) {
+	return left.label.localeCompare(right.label);
+}
+function familyKey(family) {
+	return family.trim().toLocaleLowerCase();
+}
+//#endregion
+//#region ../preview-next/src/client/preview/StyleConfigurator.typography.tsx
+const typographyOverviewSurface = { kind: "overview" };
+function useTypographyFontCatalog(apiClient, siteId, enabled) {
+	const [google, setGoogle] = useState({
+		kind: "idle",
+		value: []
+	});
+	const [site, setSite] = useState({
+		kind: "idle",
+		value: []
+	});
+	const googleRequestRef = useRef(null);
+	const siteRequestRef = useRef(null);
 	useEffect(() => {
-		if (!setSiteStyleStagedPreviewActive) return;
-		setSiteStyleStagedPreviewActive(hasStagedSiteStylePreview);
+		if (!enabled) return;
+		if (googleRequestRef.current?.apiClient === apiClient) return;
+		let cancelled = false;
+		googleRequestRef.current = {
+			apiClient,
+			status: "loading"
+		};
+		setGoogle((current) => ({
+			kind: "loading",
+			value: current.value
+		}));
+		async function loadGoogleFonts() {
+			try {
+				const value = unwrapResponse(await apiClient({ endpoint: "listFonts" }));
+				if (!cancelled) {
+					googleRequestRef.current = {
+						apiClient,
+						status: "loaded"
+					};
+					setGoogle({
+						kind: "loaded",
+						value: Array.isArray(value) ? value : []
+					});
+				}
+			} catch (error) {
+				if (!cancelled) {
+					googleRequestRef.current = null;
+					setGoogle({
+						kind: "failed",
+						value: [],
+						message: errorMessage(error, "Unable to load Google Fonts.")
+					});
+				}
+			}
+		}
+		loadGoogleFonts();
 		return () => {
-			setSiteStyleStagedPreviewActive(false);
+			cancelled = true;
+			if (googleRequestRef.current?.status === "loading") googleRequestRef.current = null;
 		};
-	}, [hasStagedSiteStylePreview, setSiteStyleStagedPreviewActive]);
-	useEffect(() => {
-		if (!baseSnapshot) return;
-		setState((current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot));
-	}, [baseSnapshot]);
+	}, [apiClient, enabled]);
 	useEffect(() => {
-		if (!state || !baseSnapshot) {
-			clearPreview("style-configurator");
-			return;
-		}
-		if (!isPreviewingChange(state)) {
-			clearPreview("style-configurator");
-			return;
-		}
-		const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
-		if (!siteStyle) {
-			clearPreview("style-configurator");
-			return;
+		if (!enabled) return;
+		if (siteRequestRef.current?.apiClient === apiClient && siteRequestRef.current.siteId === siteId) return;
+		let cancelled = false;
+		siteRequestRef.current = {
+			apiClient,
+			siteId,
+			status: "loading"
+		};
+		setSite((current) => ({
+			kind: "loading",
+			value: current.value
+		}));
+		async function loadSiteFonts() {
+			try {
+				const value = unwrapResponse(await apiClient({
+					endpoint: "listSiteFonts",
+					params: { siteId }
+				}));
+				if (!cancelled) {
+					siteRequestRef.current = {
+						apiClient,
+						siteId,
+						status: "loaded"
+					};
+					setSite({
+						kind: "loaded",
+						value: Array.isArray(value?.fonts) ? value.fonts : []
+					});
+				}
+			} catch (error) {
+				if (!cancelled) {
+					siteRequestRef.current = null;
+					setSite({
+						kind: "failed",
+						value: [],
+						message: errorMessage(error, "Unable to load your fonts.")
+					});
+				}
+			}
 		}
-		previewTheme("style-configurator", planSiteStylePreviewChange({
-			siteStyle,
-			selection: state.previewed,
-			baseTheme: theme,
-			headerSelectionContext,
-			footerSelectionContext
-		}).themeOverlay, "site-style");
-	}, [
-		state,
-		baseSnapshot,
-		clearPreview,
-		previewTheme,
-		headerSelectionContext,
-		footerSelectionContext,
-		theme
-	]);
-	useEffect(() => {
-		const runner = runnerRef.current;
+		loadSiteFonts();
 		return () => {
-			runner.invalidate();
-			clearPreviewRef.current("style-configurator");
+			cancelled = true;
+			if (siteRequestRef.current?.status === "loading") siteRequestRef.current = null;
 		};
-	}, []);
-	useEffect(() => {
-		if (!expandedRowRequest) return;
-		if (appliedExpandedRowRequestIdRef.current === expandedRowRequest.id) return;
-		setState((current) => {
-			if (!current) return current;
-			appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
-			return openRow(current, expandedRowForPreviewDesignRow(expandedRowRequest.row));
-		});
-	}, [expandedRowRequest, hasLoadedState]);
-	const handlePreviewSiteStyle = useCallback((siteStyleId) => {
-		setState((current) => {
-			if (!current) return current;
-			const next = previewSiteStyle(current, siteStyleId);
-			const siteStyle = getCuratedSiteStyle(siteStyleId);
-			if (!siteStyle) return next;
-			const result = planSiteStylePreviewChange({
-				siteStyle,
-				selection: next.previewed,
-				baseTheme: theme,
-				headerSelectionContext,
-				footerSelectionContext
-			});
-			return applyResolvedSelections(next, {
-				resolved: result.resolvedSelections,
-				...result.resolvedSelections.typographySelection.kind === "custom" ? { typographySelection: {
-					kind: "custom",
-					typography: result.themeOverlay.typography
-				} } : {},
-				warnings: result.warnings
-			});
-		});
 	}, [
-		footerSelectionContext,
-		headerSelectionContext,
-		theme
+		apiClient,
+		enabled,
+		siteId
 	]);
-	const handlePreviewPersonality = useCallback((id) => {
-		setState((current) => current ? previewButtonPersonality(current, id) : current);
-	}, []);
-	const handlePreviewHeaderLayout = useCallback((id) => {
-		if (!id) return;
-		setState((current) => current ? previewHeaderLayout(current, id) : current);
-	}, []);
-	const handlePreviewHeaderStyle = useCallback((id) => {
-		if (!id) return;
-		setState((current) => current ? previewHeaderStyle(current, id) : current);
-	}, []);
-	const handlePreviewFooterLook = useCallback((id) => {
-		const plan = planSiteChromeLookSelection({
-			surface: "footer",
-			lookId: id
-		});
-		if (plan.kind !== "footer") return;
-		setState((current) => current ? previewFooterLook(current, plan.next.footerLookId) : current);
-	}, []);
-	const handlePreviewFooterLayout = useCallback((id) => {
-		if (!id) return;
-		setState((current) => {
-			if (!current) return current;
-			const siteStyle = getCuratedSiteStyle(current.previewed.siteStyleId);
-			if (!siteStyle) return current;
-			const models = buildSiteChromeLookModels({
-				state: current,
-				siteStyle,
-				headerSelectionContext,
-				footerSelectionContext
-			});
-			const nextLookId = planSiteChromeFooterLayoutSelection({
-				layoutId: id,
-				currentLookId: current.previewed.footerLookId ?? models.footer.renderedLookId
-			});
-			return nextLookId ? previewFooterLook(current, nextLookId) : current;
-		});
-	}, [footerSelectionContext, headerSelectionContext]);
-	const handlePreviewPalette = useCallback((id) => {
-		const curated = findCuratedPalette(id);
-		if (!curated) return;
-		setState((current) => current ? previewCuratedPalette(current, {
-			paletteId: curated.id,
-			colors: curated.colors,
-			mode: curated.mode
-		}) : current);
-	}, []);
-	const handlePreviewTypographyPreset = useCallback((id) => {
-		setState((current) => current ? previewTypographyPreset(current, id) : 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) => {
-			if (!current) return current;
-			const palette = current.previewed.palette;
-			if (palette.kind === "invalid") return current;
-			if (!(role in palette.colors)) return current;
-			const nextColors = paletteColorsSchema.safeParse({
-				...palette.colors,
-				[role]: hex
-			});
-			return nextColors.success ? setPaletteColors(current, nextColors.data) : current;
-		});
-	}, []);
-	const handleResetOverrides = useCallback(() => {
-		setState((current) => {
-			if (!current || current.previewed.palette.kind !== "migrated-curated") return current;
-			const curated = findCuratedPalette(current.previewed.palette.paletteId);
-			return curated ? setPaletteColors(current, curated.colors) : current;
-		});
-	}, []);
-	const handleToggleRow = useCallback((row) => {
-		setState((current) => current ? toggleRow(current, row) : current);
-	}, []);
-	const handleCancel = useCallback(() => {
-		setState((current) => current ? cancelPreview(current) : current);
-	}, []);
-	const handleDismissWarnings = useCallback(() => {
-		setState((current) => current ? dismissWarnings(current) : current);
-	}, []);
-	const handleApply = useCallback(async () => {
-		const live = stateRef.current;
-		if (!live || !isPreviewingChange(live)) return;
-		if (!deriveStyleConfiguratorCapabilities(live).canApplyStaged) return;
-		const previewed = live.previewed;
-		const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
-		if (!siteStyle) return;
-		const compiled = planSiteStylePreviewChange({
-			siteStyle,
-			selection: previewed,
-			baseTheme: theme,
-			headerSelectionContext,
-			footerSelectionContext
-		});
-		await runnerRef.current.run({
-			optimistic: () => {
-				applyStarted("style-configurator");
-				setState((current) => current ? markApplySaving(current) : current);
-			},
-			network: async () => {
-				const body = buildApplySiteStyleSelectionBody({
-					base: live.base,
-					previewed: {
-						...previewed,
-						buttonPersonalityId: compiled.resolvedSelections.buttonPersonalityId,
-						headerLayoutId: compiled.resolvedSelections.headerLayoutId,
-						headerStyleId: compiled.resolvedSelections.headerStyleId,
-						headerLookId: compiled.resolvedSelections.headerLookId,
-						typographySelection: compiled.resolvedSelections.typographySelection.kind === "custom" ? {
-							kind: "custom",
-							typography: compiled.themeOverlay.typography
-						} : typographySelectionSnapshotFromFlat(compiled.resolvedSelections)
-					},
-					selectionId
-				});
-				if (!body.ok) throw new Error(paletteApplyPlanErrorMessage(body.error));
-				return unwrapResponse(await apiClient({
-					endpoint: "applySiteStyleSelection",
-					params: { siteId },
-					body: body.body
-				}));
-			},
-			onSuccess: (saved) => {
-				const persisted = selectionSnapshotFromApplySiteStyleSelectionResponse(saved, previewed);
-				const historyEntry = styleConfiguratorHistoryEntryForPersistedSelection(live, persisted);
-				setState((current) => current ? markApplySaved(current, persisted) : current);
-				if (historyEntry) siteChromeCustomize?.siteStyleHistory?.recordAppliedSelection(historyEntry);
-				applySucceeded("style-configurator");
-				startRefreshTransition(() => {
-					router.refresh();
-				});
-			},
-			onError: (error) => {
-				applyFailed("style-configurator");
-				const applyError = classifyStyleApplyError(error);
-				if (applyError.kind === "stale") startRefreshTransition(() => {
-					router.refresh();
-				});
-				const message = applyError.message;
-				setState((current) => current ? markApplyFailed(current, message, applyError.kind === "stale" ? "stale" : "retryable") : current);
-			}
-		});
-	}, [
-		apiClient,
-		footerSelectionContext,
-		headerSelectionContext,
-		applyFailed,
-		applyStarted,
-		applySucceeded,
-		router,
-		selectionId,
-		siteChromeCustomize?.siteStyleHistory,
-		siteId,
-		startRefreshTransition,
-		theme
-	]);
-	if (!state || !baseSnapshot) return /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-muted-foreground",
-		children: "Loading design controls..."
-	});
-	const applyAllowed = canApplySiteStyle(siteStyleAccess);
-	const stagedCapabilities = deriveStyleConfiguratorCapabilities(state);
-	const previewingChange = isPreviewingChange(state);
-	const saving = stagedCapabilities.isApplyingStaged || isRefreshPending;
-	const aggregateMutationControlsDisabled = saving || !stagedCapabilities.canPreviewStaged;
-	const currentSiteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
-	if (!currentSiteStyle) return /* @__PURE__ */ jsx("p", {
-		className: "text-sm text-muted-foreground",
-		children: "This site uses a Site Style that cannot be configured here."
-	});
-	const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
-	const currentPalette = state.previewed.palette;
-	const paletteMutation = paletteMutationCapability(state);
-	const paletteControlsDisabled = saving || paletteMutation.kind !== "editable";
-	const currentCuratedPalette = currentPalette.kind === "migrated-curated" ? findCuratedPalette(currentPalette.paletteId) : 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,
-		headerSelectionContext,
-		footerSelectionContext
-	});
-	const currentHeaderLayout = getHeaderLayout(state.previewed.headerLayoutId);
-	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 {
+		google,
+		site
+	};
+}
+function TypographyOverviewContent({ typography, catalog, onChooseFont, onOpenAdvanced, onReset, disabled }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-3",
 		children: [
-			state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, {
-				warnings: state.warnings,
-				onDismiss: handleDismissWarnings
-			}) : null,
-			/* @__PURE__ */ jsx(SiteStyleRow, {
-				expanded: state.expandedRow === "style",
-				onToggle: () => handleToggleRow("style"),
-				current: currentSiteStyle,
-				onPreview: handlePreviewSiteStyle,
-				disabled: aggregateMutationControlsDisabled
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsx(TypographyRoleSummary, {
+					slot: "heading",
+					family: typography.headings.default.family,
+					catalog,
+					onChoose: () => onChooseFont("heading"),
+					disabled
+				}), /* @__PURE__ */ jsx(TypographyRoleSummary, {
+					slot: "body",
+					family: typography.body.family,
+					catalog,
+					onChoose: () => onChooseFont("body"),
+					disabled
+				})]
 			}),
-			/* @__PURE__ */ jsx(SiteChromeLookRow, {
-				label: "Header layout",
-				ariaLabel: "Header layout",
-				defaultDescription: "Choose the header structure.",
-				expanded: state.expandedRow === "header-layout",
-				onToggle: () => handleToggleRow("header-layout"),
-				currentId: state.previewed.headerLayoutId,
-				currentLabel: currentHeaderLayout?.label ?? state.previewed.headerLayoutId,
-				scopeDescription: "Changes the header structure on every page.",
-				options: chromeLookModels.headerLayout.options,
-				diagnostics: [],
-				onCycle: (direction) => {
-					const next = cycleSiteChromeLookId(chromeLookModels.headerLayout.options, state.previewed.headerLayoutId, direction);
-					if (next !== void 0) handlePreviewHeaderLayout(next);
-				},
-				onPreview: handlePreviewHeaderLayout,
-				disabled: aggregateMutationControlsDisabled
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-t pt-3",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					className: "flex-1 justify-between",
+					onClick: onOpenAdvanced,
+					disabled,
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(SlidersHorizontal, {
+							className: "h-3.5 w-3.5",
+							"aria-hidden": "true"
+						}), "Advanced typography"]
+					}), /* @__PURE__ */ jsx(ChevronRight, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})]
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "ghost",
+					onClick: onReset,
+					disabled,
+					children: "Reset"
+				})]
 			}),
-			/* @__PURE__ */ jsx(SiteChromeLookRow, {
-				label: "Header look",
-				ariaLabel: "Header look",
-				defaultDescription: "Choose the header visual style.",
-				expanded: state.expandedRow === "header-style",
-				onToggle: () => handleToggleRow("header-style"),
-				currentId: state.previewed.headerStyleId,
-				currentLabel: currentHeaderStyle?.label ?? state.previewed.headerStyleId,
-				scopeDescription: "Changes the header surface and link style.",
-				options: chromeLookModels.headerStyle.options,
-				diagnostics: [],
-				onCycle: (direction) => {
-					const next = cycleSiteChromeLookId(chromeLookModels.headerStyle.options, state.previewed.headerStyleId, direction);
-					if (next !== void 0) handlePreviewHeaderStyle(next);
-				},
-				onPreview: handlePreviewHeaderStyle,
-				disabled: aggregateMutationControlsDisabled,
-				extraControls: isHeaderMenuSurfaceState(headerSurfaceState) ? /* @__PURE__ */ jsx(HeaderMenuControls, {
-					state: headerSurfaceState,
-					disabled: saving,
-					onMenuFontChange: siteChromeCustomize?.setHeaderMenuFont,
-					onMenuFontSizeChange: siteChromeCustomize?.setHeaderMenuFontSize
-				}) : null
+			/* @__PURE__ */ jsx(SiteFontFaceStyles, { siteFonts: catalog.site.value })
+		]
+	});
+}
+function TypographyRoleSummary({ slot, family, catalog, onChoose, disabled }) {
+	const primaryFamily = primaryFontFamily(family);
+	const option = fontOptionForFamily(primaryFamily, {
+		googleFonts: catalog.google.value,
+		siteFonts: catalog.site.value
+	});
+	const label = slot === "heading" ? "Heading" : "Body";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "group flex w-full items-center gap-3 rounded-md border bg-background px-3 py-3 text-left transition hover:border-foreground/30 hover:bg-accent/20 disabled:cursor-not-allowed disabled:opacity-50",
+		"aria-label": `Choose ${label.toLocaleLowerCase()} font, currently ${primaryFamily}`,
+		onClick: onChoose,
+		disabled,
+		children: [
+			/* @__PURE__ */ jsx(FontPreviewText, {
+				family: primaryFamily,
+				source: option?.source ?? "unknown",
+				className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted/70 text-xl",
+				children: slot === "heading" ? "Hh" : "Aa"
 			}),
-			/* @__PURE__ */ jsx(SiteChromeLookRow, {
-				label: "Footer layout",
-				ariaLabel: "Footer layout",
-				defaultDescription: "Choose the footer structure.",
-				expanded: state.expandedRow === "footer-layout",
-				onToggle: () => handleToggleRow("footer-layout"),
-				currentId: chromeLookModels.footerLayout.renderedLayoutId,
-				currentLabel: currentFooterLayout?.label ?? chromeLookModels.footerLayout.renderedLayoutId,
-				scopeDescription: "Changes the footer structure on every page.",
-				options: chromeLookModels.footerLayout.options,
-				diagnostics: [],
-				onCycle: (direction) => {
-					const next = cycleSiteChromeLookId(chromeLookModels.footerLayout.options, chromeLookModels.footerLayout.renderedLayoutId, direction);
-					if (next !== void 0) handlePreviewFooterLayout(next);
-				},
-				onPreview: handlePreviewFooterLayout,
-				disabled: aggregateMutationControlsDisabled
-			}),
-			/* @__PURE__ */ jsx(SiteChromeLookRow, {
-				label: "Footer look",
-				ariaLabel: "Footer look",
-				defaultDescription: "Use the footer look chosen for this site style.",
-				expanded: state.expandedRow === "footer",
-				onToggle: () => handleToggleRow("footer"),
-				currentId: state.previewed.footerLookId,
-				currentLabel: state.previewed.footerLookId ? currentFooterLook?.label ?? "Unknown footer Look" : `${currentFooterLook?.label ?? "Site style"} (default)`,
-				scopeDescription: "Changes the footer on every page.",
-				options: chromeLookModels.footer.options,
-				diagnostics: chromeLookModels.footer.diagnostics,
-				onCycle: (direction) => {
-					const next = cycleSiteChromeLookId(chromeLookModels.footer.options, state.previewed.footerLookId, direction);
-					if (next !== void 0) handlePreviewFooterLook(next);
-				},
-				onPreview: handlePreviewFooterLook,
-				disabled: aggregateMutationControlsDisabled
-			}),
-			/* @__PURE__ */ jsx(PersonalityRow, {
-				expanded: state.expandedRow === "buttons",
-				onToggle: () => handleToggleRow("buttons"),
-				siteStyle: currentSiteStyle,
-				currentId: state.previewed.buttonPersonalityId,
-				currentLabel: currentPersonality?.name ?? state.previewed.buttonPersonalityId,
-				onPreview: handlePreviewPersonality,
-				disabled: aggregateMutationControlsDisabled
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block text-xs font-medium text-muted-foreground",
+					children: label
+				}), /* @__PURE__ */ jsx(FontPreviewText, {
+					family: primaryFamily,
+					source: option?.source ?? "unknown",
+					className: "block truncate text-base",
+					children: primaryFamily
+				})]
 			}),
-			/* @__PURE__ */ jsx(TypographyRow, {
-				expanded: state.expandedRow === "typography",
-				onToggle: () => handleToggleRow("typography"),
-				apiClient,
-				siteStyle: currentSiteStyle,
-				typography: currentTypography,
-				currentPresetId: state.previewed.typographySelection.kind === "preset" ? state.previewed.typographySelection.presetId : null,
-				currentLabel: currentTypographyPreset?.name ?? "Custom typography",
-				onPreviewPreset: handlePreviewTypographyPreset,
-				onHeadingChange: handleHeadingTypographyChange,
-				onBodyChange: handleBodyTypographyChange,
-				onScaleChange: handleTypographyScaleChange,
-				onReset: handleResetTypography,
-				disabled: aggregateMutationControlsDisabled
+			/* @__PURE__ */ jsx(ChevronRight, {
+				className: "h-4 w-4 shrink-0 text-muted-foreground transition group-hover:text-foreground",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}
+function TypographyFontPickerTakeover({ slot, value, catalog, onBack, onChange, disabled }) {
+	const [query, setQuery] = useState("");
+	const [category, setCategory] = useState("all");
+	const [visibleGoogleCount, setVisibleGoogleCount] = useState(24);
+	const selectedFamily = primaryFontFamily(value);
+	const catalogResult = useMemo(() => buildTypographyFontCatalog({
+		googleFonts: catalog.google.value,
+		siteFonts: catalog.site.value,
+		query,
+		category
+	}), [
+		catalog.google.value,
+		catalog.site.value,
+		category,
+		query
+	]);
+	const searching = query.trim().length > 0;
+	const visibleGoogle = searching ? catalogResult.google : visibleTypographyFontOptions({
+		options: catalogResult.google,
+		selectedFamily,
+		limit: visibleGoogleCount
+	});
+	const hasMore = !searching && visibleGoogle.length < catalogResult.google.length;
+	const title = slot === "heading" ? "Heading font" : "Body font";
+	useEffect(() => {
+		setVisibleGoogleCount(24);
+	}, [category, slot]);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-background",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "shrink-0 space-y-3 border-b p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "icon",
+							variant: "ghost",
+							className: "h-8 w-8 shrink-0",
+							onClick: onBack,
+							"aria-label": "Back to typography",
+							children: /* @__PURE__ */ jsx(ChevronLeft, {
+								className: "h-4 w-4",
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("h2", {
+								className: "text-sm font-semibold",
+								children: title
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "truncate text-xs text-muted-foreground",
+								children: ["Current: ", selectedFamily]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(SearchInput, {
+						value: query,
+						onChange: (event) => setQuery(event.currentTarget.value),
+						placeholder: "Search fonts",
+						"aria-label": `Search ${slot} fonts`,
+						disabled
+					}),
+					/* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": "Font category",
+						className: "flex gap-1 overflow-x-auto pb-0.5",
+						children: typographyFontCategories.map((option) => /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							variant: category === option.value ? "secondary" : "ghost",
+							className: "h-7 shrink-0 px-2 text-xs",
+							"aria-pressed": category === option.value,
+							onClick: () => setCategory(option.value),
+							disabled,
+							children: option.label
+						}, option.value))
+					})
+				]
 			}),
-			/* @__PURE__ */ jsx(PaletteRow, {
-				expanded: state.expandedRow === "palette",
-				onToggle: () => handleToggleRow("palette"),
-				siteStyle: currentSiteStyle,
-				currentId: currentCuratedPalette?.id ?? null,
-				currentLabel: currentCuratedPalette?.name ?? (currentPalette.kind === "migrated-site" ? "Site palette" : "Custom palette"),
-				currentSwatch: currentCuratedPalette?.colors.primary ?? null,
-				onPreview: handlePreviewPalette,
-				mutationCapability: paletteMutation,
-				disabled: paletteControlsDisabled
+			/* @__PURE__ */ jsxs("div", {
+				"data-typography-font-catalog-scroll": true,
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-2",
+				children: [
+					/* @__PURE__ */ jsx(FontCatalogFeedback, { catalog }),
+					catalogResult.site.length > 0 ? /* @__PURE__ */ jsx(FontOptionSection, {
+						label: "Your fonts",
+						children: catalogResult.site.map((option) => /* @__PURE__ */ jsx(TypographyFontOptionRow, {
+							option,
+							selected: familyMatches(selectedFamily, option.family),
+							onSelect: () => onChange(option.family),
+							disabled
+						}, `site:${option.family}`))
+					}) : null,
+					visibleGoogle.length > 0 ? /* @__PURE__ */ jsxs(FontOptionSection, {
+						label: searching ? "Matching fonts" : "Popular fonts",
+						children: [visibleGoogle.map((option) => /* @__PURE__ */ jsx(TypographyFontOptionRow, {
+							option,
+							selected: familyMatches(selectedFamily, option.family),
+							onSelect: () => onChange(option.family),
+							disabled
+						}, `google:${option.family}`)), hasMore ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							variant: "ghost",
+							className: "mt-1 w-full",
+							onClick: () => setVisibleGoogleCount((count) => count + 24),
+							disabled,
+							children: "Show more fonts"
+						}) : null]
+					}) : catalog.google.kind === "loaded" && catalog.site.kind === "loaded" ? /* @__PURE__ */ jsx("p", {
+						className: "px-2 py-8 text-center text-sm text-muted-foreground",
+						children: "No fonts match your search."
+					}) : null
+				]
 			}),
-			currentPalette.kind !== "invalid" ? /* @__PURE__ */ jsx(ColoursRow, {
-				expanded: state.expandedRow === "colours",
-				onToggle: () => handleToggleRow("colours"),
-				palette: currentPalette.colors,
-				isCustom: !currentCuratedPalette || currentPalette.mode !== currentCuratedPalette.mode || !paletteColorsEqual(currentPalette.colors, currentCuratedPalette.colors),
-				onTokenChange: handleTokenOverride,
-				onReset: handleResetOverrides,
-				disabled: paletteControlsDisabled,
-				mutationCapability: paletteMutation
-			}) : null,
-			previewingChange ? /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2 pt-2",
-				children: [/* @__PURE__ */ jsx(Button, {
-					type: "button",
-					size: "sm",
-					variant: "outline",
-					onClick: handleCancel,
-					disabled: !stagedCapabilities.canCancelStaged || saving,
-					children: "Cancel"
-				}), applyAllowed ? /* @__PURE__ */ jsx(Button, {
-					type: "button",
-					size: "sm",
-					onClick: handleApply,
-					disabled: !stagedCapabilities.canApplyStaged || saving,
-					children: saving ? "Applying…" : "Apply"
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: "Preview only — ask an admin to apply."
-				})]
-			}) : null,
-			state.saveStatus.kind === "saved" ? /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-success",
-				children: "Saved."
-			}) : null,
-			state.saveStatus.kind === "failed" ? /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-destructive",
-				children: state.saveStatus.message
-			}) : null
+			/* @__PURE__ */ jsx(SiteFontFaceStyles, { siteFonts: catalog.site.value })
 		]
 	});
 }
-function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, children }) {
-	return /* @__PURE__ */ jsx(Collapsible, {
-		open: expanded,
-		onOpenChange: onToggle,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "rounded-md border bg-background",
-			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-accent/30",
-					"aria-expanded": expanded,
-					children: [
-						/* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4 transition", expanded && "rotate-90") }),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex-1 min-w-0",
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "text-xs uppercase tracking-wide text-muted-foreground",
-								children: label
-							}), /* @__PURE__ */ jsx("div", {
-								className: "truncate text-sm font-medium",
-								children: currentLabel
-							})]
-						}),
-						swatch ? /* @__PURE__ */ jsx("span", {
-							className: "h-5 w-5 shrink-0 rounded-full border border-black/10",
-							style: { backgroundColor: swatch },
-							"aria-hidden": "true"
-						}) : null
-					]
-				})
-			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
-				className: "border-t px-3 py-3",
-				children
-			}) })]
-		})
+function FontOptionSection({ label, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: "mb-3 last:mb-0",
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "sticky top-0 z-[1] bg-background px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "space-y-0.5",
+			children
+		})]
 	});
 }
-function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
-	return /* @__PURE__ */ jsx(StyleRowFrame, {
-		label: "Site style",
-		currentLabel: current.name,
-		expanded,
-		onToggle,
-		children: /* @__PURE__ */ jsx("ul", {
-			role: "radiogroup",
-			"aria-label": "Site style",
-			className: "list-none space-y-1 p-0",
-			children: curatedSiteStyles.map((style) => /* @__PURE__ */ jsx(PickerOption, {
-				selected: style.id === current.id,
-				label: style.name,
-				description: style.description,
-				onSelect: () => onPreview(style.id),
-				disabled
-			}, style.id))
-		})
+function TypographyFontOptionRow({ option, selected, onSelect, disabled }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-pressed": selected,
+		"aria-label": option.label,
+		className: cn("flex min-h-11 w-full items-center gap-3 rounded-md border border-transparent px-3 py-2 text-left transition disabled:cursor-not-allowed disabled:opacity-50", selected ? "border-primary/60 bg-primary/10" : "hover:border-border hover:bg-accent/30"),
+		onClick: onSelect,
+		disabled,
+		children: [/* @__PURE__ */ jsx(FontPreviewText, {
+			family: option.family,
+			source: option.source,
+			className: "min-w-0 flex-1 truncate text-base",
+			children: option.label
+		}), selected ? /* @__PURE__ */ jsx(Check, {
+			className: "h-4 w-4 shrink-0 text-primary",
+			"aria-hidden": "true"
+		}) : null]
 	});
 }
-function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel, onPreview, disabled }) {
-	return /* @__PURE__ */ jsx(StyleRowFrame, {
-		label: "Button style",
-		currentLabel,
-		expanded,
-		onToggle,
-		children: /* @__PURE__ */ jsx("ul", {
-			role: "radiogroup",
-			"aria-label": "Button style",
-			className: "list-none space-y-1 p-0",
-			children: useMemo(() => requireEntriesForCuratedChoices(buttonPersonalities, siteStyle.buttonPersonalityChoices), [siteStyle.buttonPersonalityChoices]).map((personality) => /* @__PURE__ */ jsx(PickerOption, {
-				selected: personality.id === currentId,
-				label: personality.name,
-				description: personality.description,
-				onSelect: () => onPreview(personality.id),
-				disabled
-			}, personality.id))
-		})
+function FontCatalogFeedback({ catalog }) {
+	if ((catalog.google.kind === "loading" || catalog.google.kind === "idle") && catalog.google.value.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "px-2 py-6 text-center text-sm text-muted-foreground",
+		children: "Loading font catalog…"
 	});
+	const failureMessages = [catalog.site.kind === "failed" ? catalog.site.message : null, catalog.google.kind === "failed" ? catalog.google.message : null].filter((message) => message !== null);
+	if (failureMessages.length > 0) return /* @__PURE__ */ jsx("div", {
+		className: "mb-2 space-y-1",
+		children: failureMessages.map((message) => /* @__PURE__ */ jsx("p", {
+			className: "rounded-md bg-muted/60 px-3 py-2 text-xs text-muted-foreground",
+			children: message
+		}, message))
+	});
+	return null;
 }
-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 fontPolicyPreset = (currentPresetId ? findTypographyPreset(currentPresetId) : null) ?? options[0] ?? typographyPresets[0];
-	if (!fontPolicyPreset) return null;
-	return /* @__PURE__ */ jsxs(StyleRowFrame, {
-		label: "Typography",
-		currentLabel,
-		expanded,
-		onToggle,
-		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",
-				children: options.map((preset) => /* @__PURE__ */ jsx(TypographyPresetOption, {
-					preset,
-					selected: preset.id === currentPresetId,
-					onSelect: () => onPreviewPreset(preset.id),
-					disabled
-				}, preset.id))
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "mt-3 space-y-2 border-t pt-3",
-			children: [
-				/* @__PURE__ */ jsxs(TypographyDisclosure, {
+function TypographyAdvancedTakeover({ typography, catalog, onBack, onHeadingChange, onBodyChange, onScaleChange, disabled }) {
+	const headingOption = fontOptionForFamily(typography.headings.default.family, {
+		googleFonts: catalog.google.value,
+		siteFonts: catalog.site.value
+	});
+	const bodyOption = fontOptionForFamily(typography.body.family, {
+		googleFonts: catalog.google.value,
+		siteFonts: catalog.site.value
+	});
+	const headingWeightWarning = unsupportedWeightMessage(headingOption, typography.headings.default.weight, typography.headings.default.italic === true ? "italic" : "normal");
+	const bodyWeightWarning = unsupportedWeightMessage(bodyOption, typography.body.weight, "normal");
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Advanced typography",
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden bg-background",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex items-center gap-2 border-b p-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "icon",
+					variant: "ghost",
+					className: "h-8 w-8 shrink-0",
+					onClick: onBack,
+					"aria-label": "Back to typography",
+					children: /* @__PURE__ */ jsx(ChevronLeft, {
+						className: "h-4 w-4",
+						"aria-hidden": "true"
+					})
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-sm font-semibold",
+					children: "Advanced typography"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: "Fine-tune the type system."
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 space-y-2 overflow-y-auto p-3",
+				children: [/* @__PURE__ */ jsxs(TypographyDisclosure, {
 					label: "Heading",
-					open: headingOpen,
-					onOpenChange: setHeadingOpen,
+					defaultOpen: true,
 					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,
@@ -2774,6 +2595,7 @@ function TypographyRow({ expanded, onToggle, apiClient, siteStyle, typography, c
 							onChange: (weight) => onHeadingChange({ weight }),
 							disabled
 						}),
+						headingWeightWarning ? /* @__PURE__ */ jsx(ContextualFontWarning, { message: headingWeightWarning }) : null,
 						/* @__PURE__ */ jsx(TypographySelectControl, {
 							label: "Line height",
 							value: typography.headings.default.lineHeight,
@@ -2781,6 +2603,13 @@ function TypographyRow({ expanded, onToggle, apiClient, siteStyle, typography, c
 							onChange: (lineHeight) => onHeadingChange({ lineHeight }),
 							disabled
 						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Letter spacing",
+							value: typography.headings.default.letterSpacing,
+							options: typographyLetterSpacingOptions,
+							onChange: (letterSpacing) => onHeadingChange({ letterSpacing }),
+							disabled
+						}),
 						/* @__PURE__ */ jsx(TypographySelectControl, {
 							label: "Scale",
 							value: normalizeTypographyScaleForControl(typography.scale),
@@ -2788,27 +2617,31 @@ function TypographyRow({ expanded, onToggle, apiClient, siteStyle, typography, c
 							onChange: onScaleChange,
 							disabled
 						}),
+						/* @__PURE__ */ jsx(HeadingCaseControl, {
+							value: typography.headings.default.case,
+							onChange: (value) => onHeadingChange({ case: value }),
+							disabled
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "flex w-full items-center justify-between rounded-md border px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+							"aria-pressed": typography.headings.default.italic === true,
+							onClick: () => onHeadingChange({ italic: typography.headings.default.italic === true ? null : true }),
+							disabled,
+							children: ["Italic headings", /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: typography.headings.default.italic === true ? "On" : "Default"
+							})]
+						}),
 						/* @__PURE__ */ jsx(TypographyColorTokenControl, {
-							value: typography.headings.default.colorToken ?? "text",
+							value: normalizeHeadingColorTokenForControl(typography.headings.default.colorToken),
 							onChange: (colorToken) => onHeadingChange({ colorToken: colorToken === "text" ? null : colorToken }),
 							disabled
 						})
 					]
-				}),
-				/* @__PURE__ */ jsxs(TypographyDisclosure, {
+				}), /* @__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,
@@ -2823,41 +2656,300 @@ function TypographyRow({ expanded, onToggle, apiClient, siteStyle, typography, c
 							onChange: (weight) => onBodyChange({ weight }),
 							disabled
 						}),
+						bodyWeightWarning ? /* @__PURE__ */ jsx(ContextualFontWarning, { message: bodyWeightWarning }) : null,
 						/* @__PURE__ */ jsx(TypographySelectControl, {
 							label: "Line height",
 							value: typography.body.lineHeight,
 							options: typographyLineHeightOptions,
 							onChange: (lineHeight) => onBodyChange({ lineHeight }),
 							disabled
+						}),
+						/* @__PURE__ */ jsx(TypographySelectControl, {
+							label: "Letter spacing",
+							value: typography.body.letterSpacing,
+							options: typographyLetterSpacingOptions,
+							onChange: (letterSpacing) => onBodyChange({ letterSpacing }),
+							disabled
 						})
 					]
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					type: "button",
-					size: "sm",
-					variant: "outline",
-					onClick: onReset,
-					disabled,
-					children: "Reset typography"
-				})
-			]
-		})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(SiteFontFaceStyles, { siteFonts: catalog.site.value })
+		]
 	});
 }
-const typographyWeightOptions = [
-	{
-		value: "light",
-		label: "Light"
-	},
-	{
-		value: "regular",
-		label: "Regular"
-	},
-	{
-		value: "medium",
-		label: "Medium"
-	},
-	{
+function TypographyDisclosure({ label, defaultOpen = false, children }) {
+	const [open, setOpen] = useState(defaultOpen);
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		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"
+					}), 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__ */ jsxs(Select, {
+			value,
+			onValueChange: (next) => {
+				const option = options.find((candidate) => candidate.value === next);
+				if (option) onChange(option.value);
+			},
+			disabled,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				size: "sm",
+				className: "w-full",
+				"aria-label": label,
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: option.label
+			}, option.value)) })]
+		})]
+	});
+}
+function HeadingCaseControl({ value, onChange, disabled }) {
+	const options = [
+		{
+			value: "default",
+			label: "Default",
+			resolved: null
+		},
+		{
+			value: "normal",
+			label: "Normal",
+			resolved: "normal"
+		},
+		{
+			value: "uppercase",
+			label: "Uppercase",
+			resolved: "uppercase"
+		},
+		{
+			value: "smallCaps",
+			label: "Small caps",
+			resolved: "smallCaps"
+		}
+	];
+	return /* @__PURE__ */ jsxs("label", {
+		className: "block space-y-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-xs font-medium text-muted-foreground",
+			children: "Case"
+		}), /* @__PURE__ */ jsxs(Select, {
+			value: value ?? "default",
+			onValueChange: (next) => {
+				const option = options.find((candidate) => candidate.value === next);
+				if (option) onChange(option.resolved);
+			},
+			disabled,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				size: "sm",
+				className: "w-full",
+				"aria-label": "Heading case",
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				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", { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: "Default heading color"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-[11px] text-muted-foreground",
+				children: "Sections may override this for readability."
+			}),
+			value.kind === "existing" ? /* @__PURE__ */ jsxs("p", {
+				className: "mt-1 text-[11px] text-muted-foreground",
+				children: [
+					"Current: ",
+					formatColorTokenLabel(value.value),
+					" (outside quick choices)"
+				]
+			}) : null
+		] }), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-2 gap-1",
+			children: headingColorTokenOptions.map((option) => /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: value.kind === "curated" && value.value === option.value ? "secondary" : "outline",
+				className: "justify-start text-xs",
+				"aria-pressed": value.kind === "curated" && value.value === option.value,
+				onClick: () => onChange(option.value),
+				disabled,
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+function ContextualFontWarning({ message }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: "rounded-md bg-warning/10 px-2 py-1.5 text-xs text-muted-foreground",
+		children: message
+	});
+}
+function FontPreviewText({ family, source, className, children }) {
+	const elementRef = useRef(null);
+	const [visible, setVisible] = useState(() => typeof globalThis.IntersectionObserver !== "function");
+	useEffect(() => {
+		if (visible || source !== "google") return;
+		const element = elementRef.current;
+		if (!element || typeof globalThis.IntersectionObserver !== "function") {
+			setVisible(true);
+			return;
+		}
+		const observer = new globalThis.IntersectionObserver((entries) => {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			setVisible(true);
+			observer.disconnect();
+		}, { rootMargin: "160px 0px" });
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [source, visible]);
+	useEffect(() => {
+		if (!visible || source !== "google") return;
+		ensureGoogleFontPreviewLink(family);
+	}, [
+		family,
+		source,
+		visible
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		ref: elementRef,
+		className,
+		style: source === "site" || source === "google" ? { fontFamily: quoteFontFamily(family) } : void 0,
+		children
+	});
+}
+function SiteFontFaceStyles({ siteFonts }) {
+	const css = useMemo(() => {
+		const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+		if (!supabaseUrl || siteFonts.length === 0) return "";
+		return generateFontFaceCss([...siteFonts], getSiteFontsStorageUrl(supabaseUrl));
+	}, [siteFonts]);
+	return css ? /* @__PURE__ */ jsx("style", {
+		"data-typography-site-fonts": true,
+		children: css
+	}) : null;
+}
+function ensureGoogleFontPreviewLink(family) {
+	const url = buildFontPreviewUrl(family);
+	if (Array.from(document.head.querySelectorAll("link[data-font-preview]")).some((link) => link.href === url)) return;
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = url;
+	link.dataset.fontPreview = family;
+	document.head.appendChild(link);
+}
+function unsupportedWeightMessage(option, weight, style) {
+	if (!option) return null;
+	const numericWeight = semanticFontWeight(weight);
+	if (option.source === "site") {
+		const font = option.siteFont;
+		if (font.isVariable && font.variableWeightMin !== null && font.variableWeightMax !== null) return numericWeight >= font.variableWeightMin && numericWeight <= font.variableWeightMax && font.files.some((file) => file.style === style) ? null : unsupportedFontStyleMessage(option.label, style);
+		return font.files.some((file) => file.weight === numericWeight && file.style === style) ? null : unsupportedFontStyleMessage(option.label, style);
+	}
+	const variants = new Set(option.googleFont.variants);
+	return (style === "italic" ? variants.has(numericWeight === 400 ? "italic" : `${numericWeight}italic`) : variants.has(String(numericWeight)) || numericWeight === 400 && variants.has("regular")) ? null : unsupportedFontStyleMessage(option.label, style);
+}
+function unsupportedFontStyleMessage(family, style) {
+	return style === "italic" ? `${family} may not include italics at this weight.` : `${family} may not include this weight.`;
+}
+function semanticFontWeight(weight) {
+	switch (weight) {
+		case "light": return 300;
+		case "regular": return 400;
+		case "medium": return 500;
+		case "semibold": return 600;
+		case "bold": return 700;
+	}
+}
+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";
+	}
+}
+function normalizeHeadingColorTokenForControl(value) {
+	switch (value) {
+		case "primary":
+		case "secondary":
+		case "accent": return {
+			kind: "curated",
+			value
+		};
+		case "text":
+		case void 0:
+		case null: return {
+			kind: "curated",
+			value: "text"
+		};
+		default: return {
+			kind: "existing",
+			value
+		};
+	}
+}
+function formatColorTokenLabel(value) {
+	const words = value.replace(/([a-z])([A-Z])/gu, "$1 $2").replace(/[-_]+/gu, " ").toLocaleLowerCase();
+	return `${words.charAt(0).toLocaleUpperCase()}${words.slice(1)}`;
+}
+function familyMatches(left, right) {
+	return left.toLocaleLowerCase() === right.toLocaleLowerCase();
+}
+function quoteFontFamily(family) {
+	return `"${family.replace(/["\\]/gu, "")}", sans-serif`;
+}
+function errorMessage(error, fallback) {
+	return error instanceof Error && error.message ? error.message : fallback;
+}
+const typographyWeightOptions = [
+	{
+		value: "light",
+		label: "Light"
+	},
+	{
+		value: "regular",
+		label: "Regular"
+	},
+	{
+		value: "medium",
+		label: "Medium"
+	},
+	{
 		value: "semibold",
 		label: "Semibold"
 	},
@@ -2880,6 +2972,20 @@ const typographyLineHeightOptions = [
 		label: "Loose"
 	}
 ];
+const typographyLetterSpacingOptions = [
+	{
+		value: "tight",
+		label: "Tight"
+	},
+	{
+		value: "normal",
+		label: "Normal"
+	},
+	{
+		value: "loose",
+		label: "Loose"
+	}
+];
 const bodySizeOptions = [
 	{
 		value: "md",
@@ -2911,7 +3017,7 @@ const typographyScaleOptions = [
 const headingColorTokenOptions = [
 	{
 		value: "text",
-		label: "Text"
+		label: "Default text"
 	},
 	{
 		value: "primary",
@@ -2926,400 +3032,768 @@ const headingColorTokenOptions = [
 		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
-			}) })]
-		})
+//#endregion
+//#region ../preview-next/src/client/preview/StyleConfigurator.tsx
+const PALETTE_BRAND_ROLES = [
+	{
+		key: "primary",
+		label: "Primary"
+	},
+	{
+		key: "primaryForeground",
+		label: "Primary text"
+	},
+	{
+		key: "secondary",
+		label: "Secondary"
+	},
+	{
+		key: "accent",
+		label: "Accent"
+	}
+];
+const PALETTE_FEEDBACK_ROLES = [
+	{
+		key: "success",
+		label: "Success"
+	},
+	{
+		key: "warning",
+		label: "Warning"
+	},
+	{
+		key: "destructive",
+		label: "Destructive"
+	}
+];
+const PALETTE_SURFACE_ROLES = [
+	{
+		key: "background",
+		label: "Background"
+	},
+	{
+		key: "surface",
+		label: "Surface"
+	},
+	{
+		key: "surfaceAlt",
+		label: "Alternate surface"
+	},
+	{
+		key: "muted",
+		label: "Muted surface"
+	},
+	{
+		key: "text",
+		label: "Text"
+	},
+	{
+		key: "border",
+		label: "Border"
+	}
+];
+function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, headerSelectionContext, footerSelectionContext, expandedRowRequest = null, onFocusedSurfaceChange, siteStyleAccess }) {
+	const router = useRouter();
+	const previewDesign = usePreviewDesignCoordinator();
+	const siteChromeCustomize = useSiteChromeCustomizeOptional();
+	const setSiteStyleStagedPreviewActive = siteChromeCustomize?.siteStyleHistory?.setStagedPreviewActive;
+	const { applyFailed, applyStarted, applySucceeded, clearPreview, previewTheme } = previewDesign;
+	const [isRefreshPending, startRefreshTransition] = useTransition();
+	const baseSnapshot = useMemo(() => resolveStyleConfiguratorInitialSnapshot({
+		theme,
+		initialSelections: {
+			...initialSelections,
+			selectionVersion: initialSelections.selectionVersion ?? selectionVersion ?? 0,
+			selectionUpdatedAt: initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
+		},
+		headerSelectionContext,
+		footerSelectionContext
+	}), [
+		footerSelectionContext,
+		headerSelectionContext,
+		theme,
+		initialSelections,
+		selectionUpdatedAt,
+		selectionVersion
+	]);
+	const [state, setState] = useState(() => baseSnapshot ? createStyleConfiguratorState(baseSnapshot) : null);
+	const [typographySurface, setTypographySurface] = useState(typographyOverviewSurface);
+	const fontCatalog = useTypographyFontCatalog(apiClient, siteId, state?.expandedRow === "typography");
+	const hasLoadedState = state !== null;
+	const hasStagedSiteStylePreview = state ? isPreviewingChange(state) : false;
+	const hasFocusedTypographySurface = state?.expandedRow === "typography" && typographySurface.kind !== "overview";
+	const stateRef = useRef(state);
+	const clearPreviewRef = useRef(clearPreview);
+	const runnerRef = useRef(createOptimisticActionRunner());
+	const appliedExpandedRowRequestIdRef = useRef(null);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	useEffect(() => {
+		if (state?.expandedRow !== "typography" && typographySurface.kind !== "overview") setTypographySurface(typographyOverviewSurface);
+	}, [state?.expandedRow, typographySurface.kind]);
+	useEffect(() => {
+		onFocusedSurfaceChange?.(hasFocusedTypographySurface);
+		return () => {
+			if (hasFocusedTypographySurface) onFocusedSurfaceChange?.(false);
+		};
+	}, [hasFocusedTypographySurface, onFocusedSurfaceChange]);
+	useEffect(() => {
+		clearPreviewRef.current = clearPreview;
+	}, [clearPreview]);
+	useEffect(() => {
+		if (!setSiteStyleStagedPreviewActive) return;
+		setSiteStyleStagedPreviewActive(hasStagedSiteStylePreview);
+		return () => {
+			setSiteStyleStagedPreviewActive(false);
+		};
+	}, [hasStagedSiteStylePreview, setSiteStyleStagedPreviewActive]);
+	useEffect(() => {
+		if (!baseSnapshot) return;
+		setState((current) => current ? syncStyleConfiguratorState(current, baseSnapshot) : createStyleConfiguratorState(baseSnapshot));
+	}, [baseSnapshot]);
+	useEffect(() => {
+		if (!state || !baseSnapshot) {
+			clearPreview("style-configurator");
+			return;
+		}
+		if (!isPreviewingChange(state)) {
+			clearPreview("style-configurator");
+			return;
+		}
+		const siteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
+		if (!siteStyle) {
+			clearPreview("style-configurator");
+			return;
+		}
+		previewTheme("style-configurator", planSiteStylePreviewChange({
+			siteStyle,
+			selection: state.previewed,
+			baseTheme: theme,
+			headerSelectionContext,
+			footerSelectionContext
+		}).themeOverlay, "site-style");
+	}, [
+		state,
+		baseSnapshot,
+		clearPreview,
+		previewTheme,
+		headerSelectionContext,
+		footerSelectionContext,
+		theme
+	]);
+	useEffect(() => {
+		const runner = runnerRef.current;
+		return () => {
+			runner.invalidate();
+			clearPreviewRef.current("style-configurator");
+		};
+	}, []);
+	useEffect(() => {
+		if (!expandedRowRequest) return;
+		if (appliedExpandedRowRequestIdRef.current === expandedRowRequest.id) return;
+		setState((current) => {
+			if (!current) return current;
+			appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
+			return openRow(current, expandedRowForPreviewDesignRow(expandedRowRequest.row));
+		});
+	}, [expandedRowRequest, hasLoadedState]);
+	const handlePreviewSiteStyle = useCallback((siteStyleId) => {
+		setState((current) => {
+			if (!current) return current;
+			const next = previewSiteStyle(current, siteStyleId);
+			const siteStyle = getCuratedSiteStyle(siteStyleId);
+			if (!siteStyle) return next;
+			const result = planSiteStylePreviewChange({
+				siteStyle,
+				selection: next.previewed,
+				baseTheme: theme,
+				headerSelectionContext,
+				footerSelectionContext
+			});
+			return applyResolvedSelections(next, {
+				resolved: {
+					...result.resolvedSelections,
+					typography: result.themeOverlay.typography
+				},
+				warnings: result.warnings
+			});
+		});
+	}, [
+		footerSelectionContext,
+		headerSelectionContext,
+		theme
+	]);
+	const handlePreviewPersonality = useCallback((id) => {
+		setState((current) => current ? previewButtonPersonality(current, id) : current);
+	}, []);
+	const handlePreviewHeaderLayout = useCallback((id) => {
+		if (!id) return;
+		setState((current) => current ? previewHeaderLayout(current, id) : current);
+	}, []);
+	const handlePreviewHeaderStyle = useCallback((id) => {
+		if (!id) return;
+		setState((current) => current ? previewHeaderStyle(current, id) : current);
+	}, []);
+	const handlePreviewFooterLook = useCallback((id) => {
+		const plan = planSiteChromeLookSelection({
+			surface: "footer",
+			lookId: id
+		});
+		if (plan.kind !== "footer") return;
+		setState((current) => current ? previewFooterLook(current, plan.next.footerLookId) : current);
+	}, []);
+	const handlePreviewFooterLayout = useCallback((id) => {
+		if (!id) return;
+		setState((current) => {
+			if (!current) return current;
+			const siteStyle = getCuratedSiteStyle(current.previewed.siteStyleId);
+			if (!siteStyle) return current;
+			const models = buildSiteChromeLookModels({
+				state: current,
+				siteStyle,
+				headerSelectionContext,
+				footerSelectionContext
+			});
+			const nextLookId = planSiteChromeFooterLayoutSelection({
+				layoutId: id,
+				currentLookId: current.previewed.footerLookId ?? models.footer.renderedLookId
+			});
+			return nextLookId ? previewFooterLook(current, nextLookId) : current;
+		});
+	}, [footerSelectionContext, headerSelectionContext]);
+	const handlePreviewPaletteItem = useCallback((item) => {
+		setState((current) => {
+			if (!current) return current;
+			if (item.kind === "curated") return previewCuratedPalette(current, item.valueKey);
+			return previewSitePalette(current, {
+				paletteId: item.paletteId,
+				colors: item.colors,
+				mode: item.mode,
+				version: item.version
+			});
+		});
+	}, []);
+	const handleCreatePalette = useCallback(() => {
+		setState((current) => current ? createPalette(current) : current);
+	}, []);
+	const handlePaletteLibraryLoaded = useCallback((response) => {
+		setState((current) => current ? reconcilePaletteLibraryActive(current, response.active, response.palettes) : 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) => {
+			if (!current) return current;
+			const palette = palettePreviewProjection(current.previewed.palette);
+			if (palette.kind === "invalid") return current;
+			if (!(role in palette.colors)) return current;
+			const nextColors = paletteColorsSchema.safeParse({
+				...palette.colors,
+				[role]: hex
+			});
+			return nextColors.success ? setPaletteColors(current, nextColors.data) : current;
+		});
+	}, []);
+	const handleResetOverrides = useCallback(() => {
+		setState((current) => {
+			if (!current) return current;
+			const palette = palettePreviewProjection(current.previewed.palette);
+			const sourceValueKey = palette.kind === "curated" ? palette.valueKey : palette.kind === "curated-fork" ? palette.sourceValueKey : null;
+			if (!sourceValueKey) return current;
+			const curated = findCuratedPalette(sourceValueKey);
+			return curated ? setPaletteColors(current, curated.colors) : current;
+		});
+	}, []);
+	const handleToggleRow = useCallback((row) => {
+		if (row === "typography") setTypographySurface(typographyOverviewSurface);
+		setState((current) => current ? toggleRow(current, row) : current);
+	}, []);
+	const handleCancel = useCallback(() => {
+		setTypographySurface(typographyOverviewSurface);
+		setState((current) => current ? cancelPreview(current) : current);
+	}, []);
+	const handleDismissWarnings = useCallback(() => {
+		setState((current) => current ? dismissWarnings(current) : current);
+	}, []);
+	const handleApply = useCallback(async (retry = false) => {
+		const current = stateRef.current;
+		let live = current;
+		if (current && retry) try {
+			const paletteAuthority = await apiClient({
+				endpoint: "listSiteThemePalettes",
+				params: { siteId }
+			}).then(unwrapResponse);
+			live = prepareStalePaletteRetry(reconcilePaletteLibraryActive(current, paletteAuthority.active, paletteAuthority.palettes), { sitePalettes: paletteAuthority.palettes });
+		} catch (error) {
+			const message = error instanceof Error ? error.message : "Unable to refresh palette authority. Your palette draft is still here.";
+			setState((latest) => latest ? markApplyFailed(latest, message, "stale") : latest);
+			return;
+		}
+		if (!live || !isPreviewingChange(live)) return;
+		if (!deriveStyleConfiguratorCapabilities(live).canApplyStaged) return;
+		if (live !== current) {
+			stateRef.current = live;
+			setState(live);
+		}
+		const previewed = live.previewed;
+		const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
+		if (!siteStyle) return;
+		const compiled = planSiteStylePreviewChange({
+			siteStyle,
+			selection: previewed,
+			baseTheme: theme,
+			headerSelectionContext,
+			footerSelectionContext
+		});
+		await runnerRef.current.run({
+			optimistic: () => {
+				applyStarted("style-configurator");
+				setState((current) => current ? markApplySaving(current) : current);
+			},
+			network: async () => {
+				const body = buildApplySiteStyleSelectionBody({
+					base: live.base,
+					previewed: {
+						...previewed,
+						buttonPersonalityId: compiled.resolvedSelections.buttonPersonalityId,
+						headerLayoutId: compiled.resolvedSelections.headerLayoutId,
+						headerStyleId: compiled.resolvedSelections.headerStyleId,
+						headerLookId: compiled.resolvedSelections.headerLookId,
+						typography: compiled.themeOverlay.typography
+					},
+					selectionId
+				});
+				if (!body.ok) throw new Error(paletteApplyPlanErrorMessage(body.error));
+				return unwrapResponse(await apiClient({
+					endpoint: "applySiteStyleSelection",
+					params: { siteId },
+					body: body.body
+				}));
+			},
+			onSuccess: (saved) => {
+				const persisted = selectionSnapshotFromApplySiteStyleSelectionResponse(saved, previewed);
+				const historyEntry = styleConfiguratorHistoryEntryForPersistedSelection(live, persisted);
+				setState((current) => current ? markApplySaved(current, persisted) : current);
+				if (historyEntry) siteChromeCustomize?.siteStyleHistory?.recordAppliedSelection(historyEntry);
+				applySucceeded("style-configurator");
+				startRefreshTransition(() => {
+					router.refresh();
+				});
+			},
+			onError: (error) => {
+				applyFailed("style-configurator");
+				const applyError = classifyStyleApplyError(error);
+				if (applyError.kind === "stale") startRefreshTransition(() => {
+					router.refresh();
+				});
+				const message = applyError.message;
+				setState((current) => current ? markApplyFailed(current, message, applyError.kind === "stale" ? "stale" : "retryable") : current);
+			}
+		});
+	}, [
+		apiClient,
+		footerSelectionContext,
+		headerSelectionContext,
+		applyFailed,
+		applyStarted,
+		applySucceeded,
+		router,
+		selectionId,
+		siteChromeCustomize?.siteStyleHistory,
+		siteId,
+		startRefreshTransition,
+		theme
+	]);
+	if (!state || !baseSnapshot) return /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-muted-foreground",
+		children: "Loading design controls..."
 	});
-}
-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))
-		})]
+	const applyAllowed = canApplySiteStyle(siteStyleAccess);
+	const stagedCapabilities = deriveStyleConfiguratorCapabilities(state);
+	const previewingChange = isPreviewingChange(state);
+	const saving = stagedCapabilities.isApplyingStaged || isRefreshPending;
+	const aggregateMutationControlsDisabled = saving || !stagedCapabilities.canPreviewStaged;
+	const currentSiteStyle = getCuratedSiteStyle(state.previewed.siteStyleId);
+	if (!currentSiteStyle) return /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-muted-foreground",
+		children: "This site uses a Site Style that cannot be configured here."
 	});
-}
-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"
-			})]
+	const currentPersonality = findButtonPersonality(state.previewed.buttonPersonalityId);
+	const currentPalette = palettePreviewProjection(state.previewed.palette);
+	const paletteMutation = paletteMutationCapability(state);
+	const paletteControlsDisabled = saving || !stagedCapabilities.canPreviewStaged || paletteMutation.kind !== "editable";
+	const currentCuratedValueKey = currentPalette.kind === "curated" ? currentPalette.valueKey : currentPalette.kind === "curated-fork" ? currentPalette.sourceValueKey : null;
+	const currentCuratedPalette = currentCuratedValueKey ? findCuratedPalette(currentCuratedValueKey) : null;
+	const paletteIsCustom = currentPalette.kind !== "invalid" && (!currentCuratedPalette || currentPalette.mode !== currentCuratedPalette.mode || !paletteColorsEqual(currentPalette.colors, currentCuratedPalette.colors));
+	const currentTypography = planSiteStylePreviewChange({
+		siteStyle: currentSiteStyle,
+		selection: state.previewed,
+		baseTheme: theme,
+		headerSelectionContext,
+		footerSelectionContext
+	}).themeOverlay.typography;
+	const chromeLookModels = buildSiteChromeLookModels({
+		state,
+		siteStyle: currentSiteStyle,
+		headerSelectionContext,
+		footerSelectionContext
+	});
+	const currentHeaderLayout = getHeaderLayout(state.previewed.headerLayoutId);
+	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" };
+	if (state.expandedRow === "typography" && typographySurface.kind !== "overview") return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full min-h-0 flex-col",
+		"data-style-configurator-focused-surface": true,
+		children: [typographySurface.kind === "font-picker" ? /* @__PURE__ */ jsx(TypographyFontPickerTakeover, {
+			slot: typographySurface.slot,
+			value: typographySurface.slot === "heading" ? currentTypography.headings.default.family : currentTypography.body.family,
+			catalog: fontCatalog,
+			onBack: () => setTypographySurface(typographyOverviewSurface),
+			onChange: (family) => typographySurface.slot === "heading" ? handleHeadingTypographyChange({ family }) : handleBodyTypographyChange({ family }),
+			disabled: aggregateMutationControlsDisabled
+		}) : /* @__PURE__ */ jsx(TypographyAdvancedTakeover, {
+			typography: currentTypography,
+			catalog: fontCatalog,
+			onBack: () => setTypographySurface(typographyOverviewSurface),
+			onHeadingChange: handleHeadingTypographyChange,
+			onBodyChange: handleBodyTypographyChange,
+			onScaleChange: handleTypographyScaleChange,
+			disabled: aggregateMutationControlsDisabled
 		}), /* @__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))
+			className: "shrink-0 px-3 pb-3",
+			children: /* @__PURE__ */ jsx(StyleConfiguratorSaveControls, {
+				previewingChange,
+				applyAllowed,
+				saving,
+				canCancel: stagedCapabilities.canCancelStaged,
+				canApply: stagedCapabilities.canApplyStaged,
+				saveStatus: state.saveStatus,
+				onCancel: handleCancel,
+				onApply: () => void handleApply(),
+				onRetry: () => void handleApply(true)
+			})
 		})]
 	});
-}
-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",
-		role: "radio",
-		"aria-checked": selected,
-		onClick: onSelect,
-		disabled,
-		className: cn("w-full rounded-md border px-3 py-2 text-left transition disabled:cursor-not-allowed disabled:opacity-50", selected ? "border-primary bg-primary/5" : "border-border hover:bg-muted/60"),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-sm font-medium",
-					children: preset.name
-				}), /* @__PURE__ */ jsx("div", {
-					className: "text-xs text-muted-foreground",
-					children: preset.description
-				})]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "shrink-0 text-right",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "text-[11px] font-semibold uppercase tracking-wide",
-					children: preset.defaultFonts.heading.split(",")[0]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "text-[11px] text-muted-foreground",
-					children: preset.defaultFonts.body.split(",")[0]
-				})]
-			})]
-		})
-	}) });
-}
-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 = 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,
-		policy: preset.slotPolicies[slot],
-		capability: capabilityForFamily(selectedFamily, recordsByFamily)
-	});
-	const recommendedFamilies = preset.recommendedFonts[slot];
-	const recommendedOptions = useMemo(() => uniqueFontFamilies(recommendedFamilies), [recommendedFamilies]);
-	const browseOptions = useMemo(() => {
-		const normalizedQuery = query.trim().toLowerCase();
-		return [...normalizedQuery.length > 0 ? catalog.fonts.filter((font) => font.family.toLowerCase().includes(normalizedQuery)) : catalog.fonts].sort((a, b) => sortFontForPresetSlot(a, b, slot, preset, recordsByFamily)).slice(0, normalizedQuery.length > 0 ? MAX_FONT_RESULTS_WHEN_SEARCHING : MAX_FONT_RESULTS_WHEN_BROWSING);
-	}, [
-		catalog.fonts,
-		preset,
-		query,
-		recordsByFamily,
-		slot
-	]);
-	return /* @__PURE__ */ jsxs("section", {
-		className: "space-y-2",
-		"aria-label": label,
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
 		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-3",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "min-w-0",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-xs font-medium text-muted-foreground",
-						children: label
-					}), /* @__PURE__ */ jsx("div", {
-						className: "truncate text-sm",
-						children: selectedFamily
-					})]
-				}), /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit: selectedFit })]
+			state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, {
+				warnings: state.warnings,
+				onDismiss: handleDismissWarnings
+			}) : null,
+			/* @__PURE__ */ jsx(SiteStyleRow, {
+				expanded: state.expandedRow === "style",
+				onToggle: () => handleToggleRow("style"),
+				current: currentSiteStyle,
+				onPreview: handlePreviewSiteStyle,
+				disabled: aggregateMutationControlsDisabled
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				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", 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 recipe font"
-					}), /* @__PURE__ */ jsx("span", {
-						className: "ml-2 text-xs text-muted-foreground",
-						children: defaultFont
-					})]
-				}), recommendedOptions.map((family) => /* @__PURE__ */ jsx(FontFamilyOption, {
-					family,
-					selected: selectedFamily === family,
-					fit: evaluateTypographyFontSlot({
-						slot,
-						policy: preset.slotPolicies[slot],
-						capability: capabilityForFamily(family, recordsByFamily)
-					}),
-					onSelect: () => onChange(family),
-					disabled
-				}, family))]
+			/* @__PURE__ */ jsx(SiteChromeLookRow, {
+				label: "Header layout",
+				ariaLabel: "Header layout",
+				defaultDescription: "Choose the header structure.",
+				expanded: state.expandedRow === "header-layout",
+				onToggle: () => handleToggleRow("header-layout"),
+				currentId: state.previewed.headerLayoutId,
+				currentLabel: currentHeaderLayout?.label ?? state.previewed.headerLayoutId,
+				scopeDescription: "Changes the header structure on every page.",
+				options: chromeLookModels.headerLayout.options,
+				diagnostics: [],
+				onCycle: (direction) => {
+					const next = cycleSiteChromeLookId(chromeLookModels.headerLayout.options, state.previewed.headerLayoutId, direction);
+					if (next !== void 0) handlePreviewHeaderLayout(next);
+				},
+				onPreview: handlePreviewHeaderLayout,
+				disabled: aggregateMutationControlsDisabled
+			}),
+			/* @__PURE__ */ jsx(SiteChromeLookRow, {
+				label: "Header look",
+				ariaLabel: "Header look",
+				defaultDescription: "Choose the header visual style.",
+				expanded: state.expandedRow === "header-style",
+				onToggle: () => handleToggleRow("header-style"),
+				currentId: state.previewed.headerStyleId,
+				currentLabel: currentHeaderStyle?.label ?? state.previewed.headerStyleId,
+				scopeDescription: "Changes the header surface and link style.",
+				options: chromeLookModels.headerStyle.options,
+				diagnostics: [],
+				onCycle: (direction) => {
+					const next = cycleSiteChromeLookId(chromeLookModels.headerStyle.options, state.previewed.headerStyleId, direction);
+					if (next !== void 0) handlePreviewHeaderStyle(next);
+				},
+				onPreview: handlePreviewHeaderStyle,
+				disabled: aggregateMutationControlsDisabled,
+				extraControls: isHeaderMenuSurfaceState(headerSurfaceState) ? /* @__PURE__ */ jsx(HeaderMenuControls, {
+					state: headerSurfaceState,
+					disabled: saving,
+					onMenuFontChange: siteChromeCustomize?.setHeaderMenuFont,
+					onMenuFontSizeChange: siteChromeCustomize?.setHeaderMenuFontSize
+				}) : null
+			}),
+			/* @__PURE__ */ jsx(SiteChromeLookRow, {
+				label: "Footer layout",
+				ariaLabel: "Footer layout",
+				defaultDescription: "Choose the footer structure.",
+				expanded: state.expandedRow === "footer-layout",
+				onToggle: () => handleToggleRow("footer-layout"),
+				currentId: chromeLookModels.footerLayout.renderedLayoutId,
+				currentLabel: currentFooterLayout?.label ?? chromeLookModels.footerLayout.renderedLayoutId,
+				scopeDescription: "Changes the footer structure on every page.",
+				options: chromeLookModels.footerLayout.options,
+				diagnostics: [],
+				onCycle: (direction) => {
+					const next = cycleSiteChromeLookId(chromeLookModels.footerLayout.options, chromeLookModels.footerLayout.renderedLayoutId, direction);
+					if (next !== void 0) handlePreviewFooterLayout(next);
+				},
+				onPreview: handlePreviewFooterLayout,
+				disabled: aggregateMutationControlsDisabled
+			}),
+			/* @__PURE__ */ jsx(SiteChromeLookRow, {
+				label: "Footer look",
+				ariaLabel: "Footer look",
+				defaultDescription: "Use the footer look chosen for this site style.",
+				expanded: state.expandedRow === "footer",
+				onToggle: () => handleToggleRow("footer"),
+				currentId: state.previewed.footerLookId,
+				currentLabel: state.previewed.footerLookId ? currentFooterLook?.label ?? "Unknown footer Look" : `${currentFooterLook?.label ?? "Site style"} (default)`,
+				scopeDescription: "Changes the footer on every page.",
+				options: chromeLookModels.footer.options,
+				diagnostics: chromeLookModels.footer.diagnostics,
+				onCycle: (direction) => {
+					const next = cycleSiteChromeLookId(chromeLookModels.footer.options, state.previewed.footerLookId, direction);
+					if (next !== void 0) handlePreviewFooterLook(next);
+				},
+				onPreview: handlePreviewFooterLook,
+				disabled: aggregateMutationControlsDisabled
+			}),
+			/* @__PURE__ */ jsx(PersonalityRow, {
+				expanded: state.expandedRow === "buttons",
+				onToggle: () => handleToggleRow("buttons"),
+				siteStyle: currentSiteStyle,
+				currentId: state.previewed.buttonPersonalityId,
+				currentLabel: currentPersonality?.name ?? state.previewed.buttonPersonalityId,
+				onPreview: handlePreviewPersonality,
+				disabled: aggregateMutationControlsDisabled
+			}),
+			/* @__PURE__ */ jsx(TypographyRow, {
+				expanded: state.expandedRow === "typography",
+				onToggle: () => handleToggleRow("typography"),
+				typography: currentTypography,
+				catalog: fontCatalog,
+				currentLabel: `${primaryFontFamily(currentTypography.headings.default.family)} / ${primaryFontFamily(currentTypography.body.family)}`,
+				onChooseFont: (slot) => setTypographySurface({
+					kind: "font-picker",
+					slot
+				}),
+				onOpenAdvanced: () => setTypographySurface({ kind: "advanced" }),
+				onReset: handleResetTypography,
+				disabled: aggregateMutationControlsDisabled
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "space-y-2 rounded-md border bg-muted/20 p-2",
-				children: [
-					/* @__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",
-						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"
-					}),
-					catalog.kind === "loading" ? /* @__PURE__ */ jsx("p", {
-						className: "text-xs text-muted-foreground",
-						children: "Loading font catalog..."
-					}) : catalog.kind === "failed" ? /* @__PURE__ */ jsx("p", {
-						className: "text-xs text-muted-foreground",
-						children: catalog.message
-					}) : null,
-					browseOptions.length > 0 ? /* @__PURE__ */ jsx("div", {
-						className: "max-h-56 space-y-1 overflow-y-auto pr-1",
-						children: browseOptions.map((font) => /* @__PURE__ */ jsx(FontFamilyOption, {
-							family: font.family,
-							selected: selectedFamily === font.family,
-							fit: evaluateTypographyFontSlot({
-								slot,
-								policy: preset.slotPolicies[slot],
-								capability: capabilityFromFontRecord(font)
-							}),
-							onSelect: () => onChange(font.family),
-							disabled
-						}, font.family))
-					}) : catalog.kind === "loaded" ? /* @__PURE__ */ jsx("p", {
-						className: "text-xs text-muted-foreground",
-						children: "No matching Google Fonts."
-					}) : null
-				]
+			/* @__PURE__ */ jsx(PaletteRow, {
+				expanded: state.expandedRow === "palette",
+				onToggle: () => handleToggleRow("palette"),
+				apiClient,
+				siteId,
+				siteStyle: currentSiteStyle,
+				palette: currentPalette,
+				committedSelection: committedPaletteForSnapshot(state.base.palette)?.selection ?? null,
+				onPreview: handlePreviewPaletteItem,
+				onCreate: handleCreatePalette,
+				onLibraryLoaded: handlePaletteLibraryLoaded,
+				isCustom: paletteIsCustom,
+				onTokenChange: handleTokenOverride,
+				onReset: handleResetOverrides,
+				mutationCapability: paletteMutation,
+				disabled: saving || !applyAllowed,
+				mutationDisabled: paletteControlsDisabled || !applyAllowed
 			}),
-			/* @__PURE__ */ jsxs("label", {
-				className: "block space-y-1",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-xs text-muted-foreground",
-					children: "Brand or uploaded font name"
-				}), /* @__PURE__ */ jsx("input", {
-					type: "text",
-					value: manualFamilyDraft,
-					placeholder: "Enter any font family",
-					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"
-				})]
+			/* @__PURE__ */ jsx(StyleConfiguratorSaveControls, {
+				previewingChange,
+				applyAllowed,
+				saving,
+				canCancel: stagedCapabilities.canCancelStaged,
+				canApply: stagedCapabilities.canApplyStaged,
+				saveStatus: state.saveStatus,
+				onCancel: handleCancel,
+				onApply: () => void handleApply(),
+				onRetry: () => void handleApply(true)
 			})
 		]
 	});
 }
-function FontFamilyOption({ family, selected, fit, onSelect, disabled }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		className: cn("flex w-full items-center justify-between gap-3 rounded-md border px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50", selected ? "border-foreground bg-accent/40" : "border-transparent bg-background hover:border-foreground/40 hover:bg-accent/20"),
-		onClick: onSelect,
-		disabled,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate font-medium",
-			children: family
-		}), /* @__PURE__ */ jsx(TypographyFontFitBadge, { fit })]
-	});
+function StyleConfiguratorSaveControls({ previewingChange, applyAllowed, saving, canCancel, canApply, saveStatus, onCancel, onApply, onRetry }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		previewingChange ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 pt-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				onClick: onCancel,
+				disabled: !canCancel || saving,
+				children: "Cancel"
+			}), applyAllowed ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				onClick: onApply,
+				disabled: !canApply || saving,
+				children: saving ? "Applying…" : "Apply"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground",
+				children: "Preview only — ask an admin to apply."
+			})]
+		}) : null,
+		saveStatus.kind === "saved" ? /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-success",
+			children: "Saved."
+		}) : null,
+		saveStatus.kind === "failed" ? /* @__PURE__ */ jsxs("div", {
+			role: "status",
+			className: "flex items-center gap-2 text-xs text-destructive",
+			children: [/* @__PURE__ */ jsx("span", { children: saveStatus.message }), saveStatus.failureKind === "stale" && previewingChange && applyAllowed ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				onClick: onRetry,
+				disabled: saving,
+				children: "Retry"
+			}) : null]
+		}) : null
+	] });
 }
-function TypographyFontFitBadge({ fit }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium", fit.kind === "recommended" && "bg-emerald-100 text-emerald-800", fit.kind === "compatible" && "bg-sky-100 text-sky-800", fit.kind === "limited" && "bg-amber-100 text-amber-900", fit.kind === "risky" && "bg-rose-100 text-rose-800", fit.kind === "unknown" && "bg-muted text-muted-foreground"),
-		title: fit.reason,
-		children: typographyFontFitLabel(fit.kind)
+function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, children }) {
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open: expanded,
+		onOpenChange: onToggle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rounded-md border bg-background",
+			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-accent/30",
+					"aria-expanded": expanded,
+					children: [
+						/* @__PURE__ */ jsx(ChevronRight, { className: cn("h-4 w-4 transition", expanded && "rotate-90") }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "text-xs uppercase tracking-wide text-muted-foreground",
+								children: label
+							}), /* @__PURE__ */ jsx("div", {
+								className: "truncate text-sm font-medium",
+								children: currentLabel
+							})]
+						}),
+						swatch ? /* @__PURE__ */ jsx("span", {
+							className: "h-5 w-5 shrink-0 rounded-full border border-black/10",
+							style: { backgroundColor: swatch },
+							"aria-hidden": "true"
+						}) : null
+					]
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "border-t px-3 py-3",
+				children
+			}) })]
+		})
 	});
 }
-function useFontCatalog(apiClient, enabled) {
-	const [catalog, setCatalog] = useState({
-		kind: "idle",
-		fonts: []
+function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
+	return /* @__PURE__ */ jsx(StyleRowFrame, {
+		label: "Site style",
+		currentLabel: current.name,
+		expanded,
+		onToggle,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "radiogroup",
+			"aria-label": "Site style",
+			className: "list-none space-y-1 p-0",
+			children: curatedSiteStyles.map((style) => /* @__PURE__ */ jsx(PickerOption, {
+				selected: style.id === current.id,
+				label: style.name,
+				description: style.description,
+				onSelect: () => onPreview(style.id),
+				disabled
+			}, style.id))
+		})
 	});
-	const requestedClientRef = useRef(null);
-	useEffect(() => {
-		if (!enabled) return;
-		if (requestedClientRef.current === apiClient) return;
-		requestedClientRef.current = apiClient;
-		let cancelled = false;
-		setCatalog({
-			kind: "loading",
-			fonts: []
-		});
-		async function loadFonts() {
-			try {
-				const fonts = unwrapResponse(await apiClient({ endpoint: "listFonts" }));
-				if (!cancelled) setCatalog({
-					kind: "loaded",
-					fonts: Array.isArray(fonts) ? fonts : []
-				});
-			} catch (error) {
-				if (!cancelled) setCatalog({
-					kind: "failed",
-					fonts: [],
-					message: error instanceof Error ? error.message : "Unable to load the font catalog."
-				});
-			}
-		}
-		loadFonts();
-		return () => {
-			cancelled = true;
-		};
-	}, [apiClient, enabled]);
-	return catalog;
-}
-function indexFontsByFamily(fonts) {
-	return new Map(fonts.map((font) => [font.family.toLowerCase(), font]));
-}
-function capabilityForFamily(family, recordsByFamily) {
-	const record = recordsByFamily.get(family.toLowerCase());
-	if (record) return capabilityFromFontRecord(record);
-	return {
-		source: "unknown",
-		family,
-		category: "unknown",
-		variants: []
-	};
-}
-function capabilityFromFontRecord(font) {
-	return {
-		source: "google",
-		family: font.family,
-		category: normalizeGoogleFontCategory(font.category),
-		variants: font.variants
-	};
-}
-function normalizeGoogleFontCategory(category) {
-	switch (category) {
-		case "serif":
-		case "sans-serif":
-		case "display":
-		case "handwriting":
-		case "monospace": return category;
-		default: return "unknown";
-	}
-}
-function sortFontForPresetSlot(a, b, slot, preset, recordsByFamily) {
-	const aFit = evaluateTypographyFontSlot({
-		slot,
-		policy: preset.slotPolicies[slot],
-		capability: capabilityForFamily(a.family, recordsByFamily)
-	});
-	const bFit = evaluateTypographyFontSlot({
-		slot,
-		policy: preset.slotPolicies[slot],
-		capability: capabilityForFamily(b.family, recordsByFamily)
-	});
-	const fitDelta = typographyFontFitRank(aFit.kind) - typographyFontFitRank(bFit.kind);
-	if (fitDelta !== 0) return fitDelta;
-	const popularityDelta = (a.popularity ?? Infinity) - (b.popularity ?? Infinity);
-	if (popularityDelta !== 0) return popularityDelta;
-	return a.family.localeCompare(b.family);
-}
-function typographyFontFitRank(kind) {
-	switch (kind) {
-		case "recommended": return 0;
-		case "compatible": return 1;
-		case "limited": return 2;
-		case "risky": return 3;
-		case "unknown": return 4;
-		default: return kind;
-	}
-}
-function typographyFontFitLabel(kind) {
-	switch (kind) {
-		case "recommended": return "Recommended";
-		case "compatible": return "Compatible";
-		case "limited": return "Limited";
-		case "risky": return "Risky";
-		case "unknown": return "Unknown";
-		default: return kind;
-	}
-}
-function primaryFontFamily(cssFamily) {
-	return cssFamily.split(",")[0]?.trim().replace(/^["']|["']$/gu, "") || cssFamily;
 }
-function uniqueFontFamilies(families) {
-	const seen = /* @__PURE__ */ new Set();
-	const result = [];
-	for (const family of families) {
-		const normalized = primaryFontFamily(family);
-		const key = normalized.toLowerCase();
-		if (seen.has(key)) continue;
-		seen.add(key);
-		result.push(normalized);
-	}
-	return result;
+function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel, onPreview, disabled }) {
+	return /* @__PURE__ */ jsx(StyleRowFrame, {
+		label: "Button style",
+		currentLabel,
+		expanded,
+		onToggle,
+		children: /* @__PURE__ */ jsx("ul", {
+			role: "radiogroup",
+			"aria-label": "Button style",
+			className: "list-none space-y-1 p-0",
+			children: useMemo(() => requireEntriesForCuratedChoices(buttonPersonalities, siteStyle.buttonPersonalityChoices), [siteStyle.buttonPersonalityChoices]).map((personality) => /* @__PURE__ */ jsx(PickerOption, {
+				selected: personality.id === currentId,
+				label: personality.name,
+				description: personality.description,
+				onSelect: () => onPreview(personality.id),
+				disabled
+			}, personality.id))
+		})
+	});
 }
-function normalizeFontFamilyOverride(value) {
-	const trimmed = value.trim();
-	return trimmed.length > 0 ? trimmed : null;
+function TypographyRow({ expanded, onToggle, typography, catalog, currentLabel, onChooseFont, onOpenAdvanced, onReset, disabled }) {
+	return /* @__PURE__ */ jsx(StyleRowFrame, {
+		label: "Typography",
+		currentLabel,
+		expanded,
+		onToggle,
+		children: /* @__PURE__ */ jsx(TypographyOverviewContent, {
+			typography,
+			catalog,
+			onChooseFont,
+			onOpenAdvanced,
+			onReset,
+			disabled
+		})
+	});
 }
 function SiteChromeLookRow({ label, ariaLabel, defaultDescription, catalog, options = [{
 	id: null,
@@ -3417,93 +3891,254 @@ function HeaderMenuControls({ state, disabled, onMenuFontChange, onMenuFontSizeC
 		})]
 	});
 }
-function PaletteRow({ expanded, onToggle, siteStyle, currentId, currentLabel, currentSwatch, onPreview, mutationCapability, disabled }) {
-	const options = useMemo(() => {
-		const recommended = requireEntriesForCuratedChoices(curatedPalettes, siteStyle.paletteRecommendations);
-		if (recommended.some((variant) => variant.id === currentId)) return recommended;
-		const current = currentId ? findCuratedPalette(currentId) : null;
-		return current ? [current, ...recommended] : recommended;
-	}, [currentId, siteStyle.paletteRecommendations]);
+function PaletteRow({ expanded, onToggle, apiClient, siteId, siteStyle, palette, committedSelection, onPreview, onCreate, onLibraryLoaded, isCustom, onTokenChange, onReset, mutationCapability, disabled, mutationDisabled }) {
+	const [library, setLibrary] = useState({
+		kind: "idle",
+		palettes: []
+	});
+	const optionRefs = useRef([]);
+	const activeSelection = selectionForPaletteSnapshot(palette) ?? committedSelection;
+	const libraryModel = useMemo(() => buildPaletteLibraryReadModel({
+		active: activeSelection ? {
+			kind: "available",
+			selection: activeSelection
+		} : { kind: "invalid" },
+		sitePalettes: library.palettes,
+		curatedPalettes,
+		recommendations: siteStyle.paletteRecommendations.map((recommendation) => recommendation.id)
+	}), [
+		activeSelection,
+		library.palettes,
+		siteStyle.paletteRecommendations
+	]);
+	useEffect(() => {
+		if (!expanded || library.kind !== "idle") return;
+		setLibrary((current) => ({
+			kind: "loading",
+			palettes: current.palettes
+		}));
+	}, [expanded, library.kind]);
+	useEffect(() => {
+		if (library.kind !== "loading") return;
+		let cancelled = false;
+		apiClient({
+			endpoint: "listSiteThemePalettes",
+			params: { siteId }
+		}).then(unwrapResponse).then((response) => {
+			if (cancelled) return;
+			setLibrary({
+				kind: "loaded",
+				palettes: response.palettes
+			});
+			onLibraryLoaded(response);
+		}).catch((error) => {
+			if (cancelled) return;
+			setLibrary((current) => ({
+				kind: "failed",
+				palettes: current.palettes,
+				message: error instanceof Error ? error.message : "Unable to load palettes."
+			}));
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		apiClient,
+		library.kind,
+		onLibraryLoaded,
+		siteId
+	]);
+	const items = libraryModel?.ok ? [
+		...libraryModel.model.yours,
+		...libraryModel.model.suggested,
+		...libraryModel.model.more
+	] : [];
+	const currentLabel = palette.kind === "new-site" ? "New palette" : "Selected palette";
+	const onOptionKeyDown = (event, index) => {
+		if (items.length === 0) return;
+		const direction = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : event.key === "ArrowUp" || event.key === "ArrowLeft" ? -1 : 0;
+		if (direction === 0) return;
+		event.preventDefault();
+		const nextIndex = (index + direction + items.length) % items.length;
+		const next = items[nextIndex];
+		if (!next) return;
+		onPreview(next);
+		optionRefs.current[nextIndex]?.focus();
+	};
 	return /* @__PURE__ */ jsxs(StyleRowFrame, {
 		label: "Palette",
 		currentLabel,
-		swatch: currentSwatch,
+		swatch: palette.kind === "invalid" ? null : palette.colors.primary,
 		expanded,
 		onToggle,
 		children: [
-			/* @__PURE__ */ jsx("p", {
-				className: "mb-3 text-xs text-muted-foreground",
-				children: "These palette bases are recommended for the current Site Style. Choose a base here, then edit exact colours in Palette colours."
-			}),
 			mutationCapability.kind === "blocked" && mutationCapability.reason === "invalid-palette" ? /* @__PURE__ */ jsx("div", {
 				role: "status",
 				className: "mb-3 flex items-center justify-between gap-3 rounded-md border border-muted px-3 py-2 text-xs text-muted-foreground",
 				children: /* @__PURE__ */ jsx("span", { children: mutationCapability.message })
 			}) : null,
-			/* @__PURE__ */ jsx("ul", {
+			library.kind === "loading" ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: "Loading palettes..."
+			}) : null,
+			library.kind === "failed" ? /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "space-y-2 text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("p", { children: library.message }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					onClick: () => setLibrary({
+						kind: "idle",
+						palettes: library.palettes
+					}),
+					children: "Retry loading palettes"
+				})]
+			}) : null,
+			libraryModel.ok ? /* @__PURE__ */ jsxs("div", {
 				role: "radiogroup",
-				"aria-label": "Palette",
-				className: "list-none space-y-1 p-0",
-				children: options.map((variant) => {
-					const primaryHex = variant.colors.primary;
-					return /* @__PURE__ */ jsx(PickerOption, {
-						selected: variant.id === currentId,
-						label: variant.name,
-						description: variant.description,
-						swatch: primaryHex,
-						onSelect: () => onPreview(variant.id),
+				"aria-label": "Palette library",
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ jsx(PaletteLibraryGroup, {
+						label: "Your palettes",
+						items: libraryModel.model.yours,
+						offset: 0,
+						optionRefs,
+						onPreview,
+						onOptionKeyDown,
 						disabled
-					}, variant.id);
-				})
-			})
+					}),
+					/* @__PURE__ */ jsx(PaletteLibraryGroup, {
+						label: "Suggested for this style",
+						items: libraryModel.model.suggested,
+						offset: libraryModel.model.yours.length,
+						optionRefs,
+						onPreview,
+						onOptionKeyDown,
+						disabled
+					}),
+					/* @__PURE__ */ jsx(PaletteLibraryGroup, {
+						label: "More palettes",
+						items: libraryModel.model.more,
+						offset: libraryModel.model.yours.length + libraryModel.model.suggested.length,
+						optionRefs,
+						onPreview,
+						onOptionKeyDown,
+						disabled
+					})
+				]
+			}) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "text-xs text-muted-foreground",
+				children: "Palette details are unavailable."
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				size: "sm",
+				variant: "outline",
+				className: "mt-3",
+				onClick: onCreate,
+				disabled: mutationDisabled,
+				children: [/* @__PURE__ */ jsx(Plus, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				}), "Create palette"]
+			}),
+			palette.kind !== "invalid" ? /* @__PURE__ */ jsx(PaletteTokenControls, {
+				palette: palette.colors,
+				isCustom,
+				onTokenChange,
+				onReset,
+				disabled: mutationDisabled
+			}) : null
 		]
 	});
 }
-function ColoursRow({ expanded, onToggle, palette, isCustom, onTokenChange, onReset, mutationCapability, disabled }) {
-	const mergedPalette = useMemo(() => paletteColorEntries(palette), [palette]);
-	return /* @__PURE__ */ jsx(StyleRowFrame, {
-		label: "Palette colours",
-		currentLabel: isCustom ? "Custom palette colours" : "Using selected palette",
-		expanded,
-		onToggle,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "space-y-3",
-			children: [
-				/* @__PURE__ */ jsx("p", {
-					className: "text-xs text-muted-foreground",
-					children: "Customise the palette tokens used across the site, including backgrounds, surfaces, text and borders."
-				}),
-				mutationCapability.kind === "blocked" ? /* @__PURE__ */ jsx("div", {
-					role: "status",
-					className: "flex items-center justify-between gap-3 rounded-md border border-muted px-3 py-2 text-xs text-muted-foreground",
-					children: /* @__PURE__ */ jsx("span", { children: mutationCapability.message })
-				}) : null,
-				/* @__PURE__ */ jsx("fieldset", {
-					disabled,
-					className: "min-w-0 border-0 p-0",
-					children: /* @__PURE__ */ jsx(PaletteTokenEditor, {
-						palette: mergedPalette,
-						onChange: onTokenChange,
-						brandRoles: PALETTE_BRAND_ROLES,
-						feedbackRoles: PALETTE_FEEDBACK_ROLES,
-						surfaceRoles: PALETTE_SURFACE_ROLES,
-						showContrastChecks: false,
-						disabled
-					})
-				}),
-				isCustom ? /* @__PURE__ */ jsx("div", {
-					className: "flex justify-end",
-					children: /* @__PURE__ */ jsx(Button, {
-						type: "button",
-						variant: "outline",
-						size: "sm",
-						onClick: onReset,
-						disabled,
-						children: "Reset to variant"
+function PaletteLibraryGroup({ label, items, offset, optionRefs, onPreview, onOptionKeyDown, disabled }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		children: [/* @__PURE__ */ jsx("h3", {
+			className: "mb-1.5 text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-4 gap-2",
+			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
+				ref: (element) => {
+					optionRefs.current[offset + index] = element;
+				},
+				type: "button",
+				role: "radio",
+				"aria-label": item.accessibleLabel,
+				"aria-checked": item.selected,
+				disabled,
+				onClick: () => onPreview(item),
+				onKeyDown: (event) => onOptionKeyDown(event, offset + index),
+				className: cn("relative h-10 overflow-hidden rounded-md border p-0.5 outline-none transition focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", item.selected ? "border-foreground ring-1 ring-foreground" : "border-border hover:border-foreground/60"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "grid h-full grid-cols-5 overflow-hidden rounded-[3px]",
+					"aria-hidden": "true",
+					children: item.swatch.map((color, swatchIndex) => /* @__PURE__ */ jsx("span", { style: { backgroundColor: color } }, `${paletteLibraryItemKey(item)}:${swatchIndex}`))
+				}), item.selected ? /* @__PURE__ */ jsx("span", {
+					className: "absolute right-1 top-1 grid size-4 place-items-center rounded-full bg-foreground text-background",
+					children: /* @__PURE__ */ jsx(Check, {
+						"aria-hidden": "true",
+						className: "size-3"
 					})
-				}) : null
-			]
-		})
+				}) : null]
+			}, paletteLibraryItemKey(item)))
+		})]
+	});
+}
+function paletteLibraryItemKey(item) {
+	return item.kind === "curated" ? `curated:${item.valueKey}` : `site:${item.paletteId}`;
+}
+function selectionForPaletteSnapshot(palette) {
+	switch (palette.kind) {
+		case "curated": return {
+			kind: "curated",
+			valueKey: palette.valueKey
+		};
+		case "curated-fork": return {
+			kind: "curated",
+			valueKey: palette.sourceValueKey
+		};
+		case "site": return {
+			kind: "site",
+			paletteId: palette.paletteId
+		};
+		case "new-site":
+		case "invalid": return null;
+		default: return assertNever$1(palette);
+	}
+}
+function PaletteTokenControls({ palette, isCustom, onTokenChange, onReset, disabled }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mt-4 space-y-3 border-t pt-4",
+		children: [/* @__PURE__ */ jsx("fieldset", {
+			disabled,
+			className: "min-w-0 border-0 p-0",
+			children: /* @__PURE__ */ jsx(PaletteTokenEditor, {
+				palette: useMemo(() => paletteColorEntries(palette), [palette]),
+				onChange: onTokenChange,
+				brandRoles: PALETTE_BRAND_ROLES,
+				feedbackRoles: PALETTE_FEEDBACK_ROLES,
+				surfaceRoles: PALETTE_SURFACE_ROLES,
+				showContrastChecks: false,
+				disabled
+			})
+		}), isCustom ? /* @__PURE__ */ jsx("div", {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				onClick: onReset,
+				disabled,
+				children: "Reset to variant"
+			})
+		}) : null]
 	});
 }
 function PickerOption({ selected, label, description, swatch, onSelect, disabled }) {
@@ -3544,6 +4179,10 @@ function classifyStyleApplyError(error) {
 	if (isRecord(error)) {
 		const status = error.status;
 		const code = error.code;
+		if (code === "PALETTE_CAP_REACHED") return {
+			kind: "palette-cap",
+			message: "This site has reached its palette limit. Your palette draft is still here."
+		};
 		if (status === 409 || code === "resource:conflict") return {
 			kind: "stale",
 			message: "This design changed elsewhere. Refreshing the latest version now."
@@ -3583,16 +4222,11 @@ function WarningNotice({ warnings, onDismiss }) {
 	});
 }
 function describeWarning(warning) {
-	switch (warning.kind) {
-		case "rejected-personality": return `Button style changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
-		case "rejected-palette": return `Palette changed to ${warning.fellBackTo} because ${warning.requested} is not available.`;
-		case "rejected-typography-preset": return `Typography changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
-		default: return warning;
-	}
+	return `Button style changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
 }
 //#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, themeSelectionButtonPersonalityId = null, runtimePaletteState = null, themeSelectionPaletteVariantId = null, themeSelectionPaletteOverrides = null, themeSelectionHeaderLayoutId = null, themeSelectionHeaderStyleId = null, themeSelectionTypographyPresetId = null, themeSelectionTypographyBodyFontOverride = null, themeSelectionTypographyHeadingFontOverride = null, themeSelectionHeaderLookId = null, themeSelectionFooterLookId = null, themeSelectionHeaderContext, themeSelectionFooterContext, designRowRequest = null, apiClient, bearerToken, supabaseUrl, entrySubrouteContext, assistantPanel, sdkConfig, mediaAssets, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, pageId, entryData, contentTypeSchema, referenceContentTypeKeys = [], draftContent, currentTemplate, theme, themeId = null, themeSelectionId = null, themeSelectionVersion = null, themeSelectionUpdatedAt = null, themeSelectionButtonPersonalityId = null, runtimePaletteState, themeSelectionHeaderLayoutId = null, themeSelectionHeaderStyleId = null, themeSelectionHeaderLookId = null, themeSelectionFooterLookId = null, themeSelectionHeaderContext, themeSelectionFooterContext, designRowRequest = null, apiClient, bearerToken, supabaseUrl, entrySubrouteContext, assistantPanel, sdkConfig, mediaAssets, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const controller = useEntryController();
 	const controllerBlocks = controller.blocks;
 	const uiStore = useEditorUiStoreInstance();
@@ -3603,6 +4237,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 	const focusRequest = useUISelector(uiStore, (s) => s.focusRequest);
 	const activeLinkedEntrySnapshot = useUISelector(uiStore, (s) => s.linkedEntries.getSelectedSnapshot());
 	const previewInspection = useUISelector(uiStore, (s) => s.previewInspection);
+	const [designTakeoverActive, setDesignTakeoverActive] = useState(false);
 	const { canEdit } = usePreviewAuth();
 	const dashboardSetupHandoff = useMemo(() => resolvePreviewDashboardSetupHandoff(), []);
 	const dashboardContinueUrl = useMemo(() => buildPreviewDashboardSetupUrl(dashboardBaseUrl, dashboardSetupHandoff), [dashboardBaseUrl, dashboardSetupHandoff]);
@@ -3719,6 +4354,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		onBlocksChange: handleBlocksChange,
 		metadataPanel: metadataSectionContent,
 		designOpenRequestId: designRowRequest?.id ?? null,
+		designTakeoverActive,
 		designPanel: canInspectSiteStyle(siteStyleAccess) ? /* @__PURE__ */ jsx(StyleConfigurator, {
 			siteId,
 			apiClient,
@@ -3732,19 +4368,15 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 				selectionUpdatedAt: themeSelectionUpdatedAt,
 				buttonPersonalityId: themeSelectionButtonPersonalityId,
 				runtimePaletteState,
-				paletteVariantId: themeSelectionPaletteVariantId,
-				paletteOverrides: themeSelectionPaletteOverrides,
 				headerLayoutId: themeSelectionHeaderLayoutId,
 				headerStyleId: themeSelectionHeaderStyleId,
-				typographyPresetId: themeSelectionTypographyPresetId,
-				typographyBodyFontOverride: themeSelectionTypographyBodyFontOverride,
-				typographyHeadingFontOverride: themeSelectionTypographyHeadingFontOverride,
 				headerLookId: themeSelectionHeaderLookId,
 				footerLookId: themeSelectionFooterLookId
 			},
 			headerSelectionContext: themeSelectionHeaderContext,
 			footerSelectionContext: themeSelectionFooterContext,
 			expandedRowRequest: designRowRequest,
+			onFocusedSurfaceChange: setDesignTakeoverActive,
 			siteStyleAccess
 		}) : null,
 		sdkConfig: sdkConfig ?? null,