@riverbankcms/sdk 0.108.0 → 0.111.0

package/README.md

@@ -14,6 +14,7 @@ A lightweight TypeScript SDK for consuming Riverbank CMS content in React Server
 - ✅ **Custom blocks** - Define site-specific blocks with full CMS editing support
 - ✅ **Content tooling** - Define content type schema in config and sync pages, entries, and navigation through explicit content push scopes
 - ✅ **Site URLs** - Configure preview and live URLs for dashboard integration
+- ✅ **Timezone-safe dates** - Format event and booking times in an explicit IANA timezone
 
 ## Installation
 
@@ -187,6 +188,13 @@ SDK sites that need bespoke appointment booking UI can use the headless booking
 
 SDK sites that need bespoke event registration UI can use the headless event registration runtime from `@riverbankcms/sdk/bookings`. See [`docs/headless-event-registration.md`](./docs/headless-event-registration.md) for the real `blockOverrides` pattern with an `'event-registration'` override, `HeadlessEventRegistrationProvider`, `getEventRegistrationOverrideInput`, and `useHeadlessEventRegistrationFlow`.
 
+### Date and time formatting
+
+Use `@riverbankcms/sdk/date-time` to render event and booking timestamps in
+their intended timezone, including daylight-saving changes. See
+[`docs/date-time-formatting.md`](./docs/date-time-formatting.md) for the
+formatters, compact event-time defaults, range behavior, and error handling.
+
 ### Server-Side API
 
 ```tsx
@@ -1597,6 +1605,14 @@ Token values can be:
 - **CSS variable refs**: `'var(--brand-purple)'` (passed through)
 - **RGB values**: `'109 40 217'` (used directly)
 
+CSS variable references are suitable for emitted variables, structural block
+styles, cards, and inputs. Opt-in generated button skins resolve and validate
+foreground/background contrast while building the runtime, so every token used
+by `components.buttons` must be a concrete hex or RGB value. When your design
+system owns brand colours through `var(...)`, leave `components.buttons`
+disabled and style the button classes in your design-system CSS, or provide
+concrete button tokens to ThemeBridge.
+
 Canonical tokens win when aliases are also present. Accepted aliases are `text -> foreground`, `mutedText -> mutedForeground`, `white -> primaryForeground`, and `danger -> destructive`.
 
 ### Design Presets
@@ -1688,7 +1704,8 @@ Add custom CSS rules scoped to theme components:
 
 ### Pass-Through to Design Systems
 
-Reference existing CSS variables from your design system:
+Reference existing CSS variables from your design system when ThemeBridge is
+not generating button skins:
 
 ```tsx
 <ThemeBridgeProvider
@@ -1699,6 +1716,9 @@ Reference existing CSS variables from your design system:
       background: 'var(--ds-bg)',
       foreground: 'var(--ds-text)',
     },
+    components: {
+      buttons: false,
+    },
   }}
 >
 ```

package/dist/{PreviewEditorSidebar-BBT-kZAM.mjs → PreviewEditorSidebar-CTR6LUhN.mjs}

@@ -1,9 +1,9 @@
 "use client";
-import { $l as Input, A as deriveStyleConfiguratorCapabilities, Au as DropdownMenuItem, B as previewButtonPersonality, Bd as X$1, Ca as curatedPalettes, Ct as useEntryController, D as committedPaletteForSnapshot, Da as paletteColorsEqual, Dt as useEditorUiStoreInstance, Du as Surface, E as cancelPreview, Ea as paletteColorEntries, Et as useEditorUiStore, F as markApplySaving, G as previewSitePalette, Gl as SelectTrigger, H as previewFooterLook, Hl as Select, Ht as resolvePageRouteSlug, I as openRow, If as Check, J as resetTypographyToSaved, K as previewSiteStyle, Kd as Tablet, Kl as SelectValue, L as paletteMutationCapability, M as isPreviewingChange, Mu as DropdownMenuSeparator, N as markApplyFailed, Nf as ChevronRight, Nu as DropdownMenuTrigger, O as createPalette, Oa as paletteColorsSchema, Ou as DropdownMenu, P as markApplySaved, Pf as ChevronLeft, Q as toggleRow, Ql as PopoverTrigger, Qt as FormRenderer, Qu as cn, R as palettePreviewProjection, T as applyTypographyDraftPatch, Ta as buildPaletteLibraryReadModel, Td as assertNever$1, U as previewHeaderLayout, Ui as getCuratedSiteStyle, Ul as SelectContent, Ut as resolveContentTitle, V as previewCuratedPalette, Vi as curatedSiteStyles, Vt as deriveRouteMetadataPresentation, W as previewHeaderStyle, Wl as SelectItem, X as styleConfiguratorHistoryEntryForPersistedSelection, Xd as SlidersHorizontal, Xl as Popover, Y as setPaletteColors, Yd as Smartphone, Yl as SearchInput, Yt as ManifestForm, Yu as Button, Z as syncStyleConfiguratorState, Zl as PopoverContent, Zt as createManifestValidation, _ as planSiteChromeFooterLayoutSelection, _u as CollapsibleContent, af as Monitor, at as createOptimisticActionRunner, bt as useUISelector, c as selectionSnapshotFromApplySiteStyleSelectionResponse, ca as findFooterLook, cf as LoaderCircle, d as PREVIEW_DESIGN_REFRESH_ERROR_MESSAGE, da as getHeaderStyle, dn as listEntryPageContentSlots, en as createStoreBackend, eu as Tabs, f as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, g as cycleableSiteChromeOptions, gu as Collapsible, h as cycleSiteChromeLookId, id as unsafeAsEditorBlockId, j as dismissWarnings, ju as DropdownMenuLabel, k as createStyleConfiguratorState, ku as DropdownMenuContent, l as resolveStyleConfiguratorInitialSnapshot, la as getFooterLayout, m as buildSiteChromeLookModels, n as useSiteChromeCustomizeOptional, nl as buttonPersonalities, nu as TabsList, ot as resolvePreviewSidebarTab, p as reportPreviewDesignError, q as reconcilePaletteLibraryActive, rl as findButtonPersonality, ru as TabsTrigger, s as buildApplySiteStyleSelectionBody, sa as requireEntriesForCuratedChoices, sf as Maximize2, st as FooterComposerPanel, tf as Plus, tu as TabsContent, u as PREVIEW_DESIGN_LOAD_ERROR_MESSAGE, ua as getHeaderLayout, v as planSiteChromeLookSelection, vu as CollapsibleTrigger, w as applyResolvedSelections, wa as findCuratedPalette, x as usePreviewDesignCoordinator, y as planSiteStylePreviewChange, yt as ContentFieldsForm, z as prepareStalePaletteRetry } from "./SiteChromeCustomizeContext-BQUY2dEk.mjs";
-import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-a_cBD28m.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-CuDjXH6o.mjs";
-import { t as Separator } from "./separator-5ahRBC85.mjs";
-import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
+import { $t as createStoreBackend, A as dismissWarnings, Ad as assertNever$1, B as previewCuratedPalette, Bf as Check, Bi as getCuratedSiteStyle, Bt as deriveRouteMetadataPresentation, C as applyResolvedSelections, Ca as curatedPalettes, Cu as CollapsibleTrigger, D as createPalette, Da as paletteColorsEqual, E as committedPaletteForSnapshot, Ea as paletteColorEntries, Et as useEditorUiStoreInstance, F as openRow, Fu as DropdownMenuItem, G as previewSiteStyle, Gd as X$1, H as previewHeaderLayout, Ht as resolveContentTitle, I as paletteMutationCapability, Iu as DropdownMenuLabel, J as setPaletteColors, Jl as SelectContent, Jt as ManifestForm, K as reconcilePaletteLibraryActive, L as palettePreviewProjection, Lf as ChevronRight, Lu as DropdownMenuSeparator, M as markApplyFailed, Mu as Surface, N as markApplySaved, Nu as DropdownMenu, O as createStyleConfiguratorState, Oa as paletteColorsSchema, P as markApplySaving, Pu as DropdownMenuContent, R as prepareStalePaletteRetry, Rf as ChevronLeft, Ri as curatedSiteStyles, Ru as DropdownMenuTrigger, St as useEntryController, Su as CollapsibleContent, T as cancelPreview, Ta as buildPaletteLibraryReadModel, Tt as useEditorUiStore, U as previewHeaderStyle, V as previewFooterLook, Vt as resolvePageRouteSlug, W as previewSitePalette, X as syncStyleConfiguratorState, Xl as SelectTrigger, Xt as createManifestValidation, Y as styleConfiguratorHistoryEntryForPersistedSelection, Yl as SelectItem, Z as toggleRow, Zd as Tablet, Zl as SelectValue, Zt as FormRenderer, _ as planSiteChromeLookSelection, aa as getHeaderLayout, al as updateButtonStyleSelectionChoice, at as resolvePreviewSidebarTab, au as Tabs, b as usePreviewDesignCoordinator, c as selectionSnapshotFromApplySiteStyleSelectionResponse, cu as TabsTrigger, d as PREVIEW_DESIGN_REFRESH_ERROR_MESSAGE, ed as Button, ef as Smartphone, eu as SearchInput, f as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, ff as Maximize2, g as cycleableSiteChromeOptions, h as cycleSiteChromeLookId, ia as findFooterLook, il as resolveButtonStyleSelection, it as createOptimisticActionRunner, iu as Input, j as isPreviewingChange, k as deriveStyleConfiguratorCapabilities, l as resolveStyleConfiguratorInitialSnapshot, ld as unsafeAsEditorBlockId, m as buildSiteChromeLookModels, n as useSiteChromeCustomizeOptional, nl as buttonStyleSelectionParameterValue, nu as PopoverContent, oa as getHeaderStyle, of as Plus, ol as buttonStyleSelectionKey, ot as FooterComposerPanel, ou as TabsContent, p as reportPreviewDesignError, pf as LoaderCircle, q as resetTypographyToSaved, ql as Select, rd as cn, rl as findButtonStyleRecipe, ru as PopoverTrigger, s as buildApplySiteStyleSelectionBody, su as TabsList, tf as SlidersHorizontal, tu as Popover, u as PREVIEW_DESIGN_LOAD_ERROR_MESSAGE, uf as Monitor, un as listEntryPageContentSlots, v as planSiteStylePreviewChange, vl as themeButtonClassName, vt as ContentFieldsForm, w as applyTypographyDraftPatch, wa as findCuratedPalette, xu as Collapsible, yt as useUISelector, z as previewButtonStyle } from "./SiteChromeCustomizeContext-DOSDLCiJ.mjs";
+import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-BkT1D06A.mjs";
+import { C as generateFontFaceCss, D as Callout, O as CalloutDescription, S as buildFontPreviewUrl, T as ThemeScope, _ as useBlockCustomizeControls, b as BlockEditor, d as resolvePreviewDashboardSetupHandoff, f as resolvePreviewEditorGuidanceModel, g as usePreviewBlockCustomizeSelectionOptional, h as canInspectSiteStyle, m as canApplySiteStyle, p as resolvePreviewSidebarChromeModel, u as buildPreviewDashboardSetupUrl, v as PreviewFormProvider, w as getSiteFontsStorageUrl, x as isAdapterReferenceKind, y as previewWidgetOverrides } from "./SdkPreviewModeRuntime-DeOTAFvR.mjs";
+import { t as Separator } from "./separator-Bln8izQ9.mjs";
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation.js";
@@ -1563,13 +1563,27 @@ function formatBlockKindLabel(blockKind) {
 	return blockKind.replace(/^block\./, "").replace(/^custom\./, "").replace(/[-_]+/g, " ");
 }
 //#endregion
+//#region ../preview-next/src/client/preview/PreviewDesignOpenRequestContext.tsx
+const PreviewDesignOpenRequestContext = createContext(null);
+function PreviewDesignOpenRequestProvider({ request, children }) {
+	return /* @__PURE__ */ jsx(PreviewDesignOpenRequestContext.Provider, {
+		value: request,
+		children
+	});
+}
+function usePreviewDesignOpenRequest() {
+	return useContext(PreviewDesignOpenRequestContext);
+}
+//#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, designTakeoverActive = false, 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, designTakeoverActive = false, sdkConfig, mediaAssets, bookingOfferingPresets, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const customizeSelection = usePreviewBlockCustomizeSelectionOptional();
 	const [designOpen, setDesignOpen] = useState(false);
 	const [customizeOpen, setCustomizeOpen] = useState(false);
 	const [contentOpen, setContentOpen] = useState(true);
 	const [detailsOpen, setDetailsOpen] = useState(false);
+	const pendingDesignOpenRequest = useUISelector(uiStoreForBlockEditor, (state) => state.previewDesignOpenRequest);
+	const [designOpenRequest, setDesignOpenRequest] = useState(null);
 	const designSectionRef = useRef(null);
 	const customizeSectionRef = useRef(null);
 	const selectionKind = customizeSelection?.selection.kind;
@@ -1598,13 +1612,15 @@ function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClie
 		}
 	}, [selectionKind, selectionRequestId]);
 	useEffect(() => {
-		if (designOpenRequestId === null) return;
+		if (!pendingDesignOpenRequest) return;
+		setDesignOpenRequest(pendingDesignOpenRequest);
 		setDesignOpen(true);
 		designSectionRef.current?.scrollIntoView({
 			block: "start",
 			behavior: "smooth"
 		});
-	}, [designOpenRequestId]);
+		uiStoreForBlockEditor.getState().consumePreviewDesignOpenRequest(pendingDesignOpenRequest.requestId);
+	}, [pendingDesignOpenRequest, uiStoreForBlockEditor]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full min-h-0 flex-col overflow-hidden",
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1661,7 +1677,10 @@ function PageBlockEditorPanel({ siteId, pageId, dashboardBaseUrl, theme, apiClie
 								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
+									children: /* @__PURE__ */ jsx(PreviewDesignOpenRequestProvider, {
+										request: designOpenRequest,
+										children: designPanel
+									})
 								})
 							})]
 						})
@@ -1794,8 +1813,8 @@ function PreviewEditorGuidanceCard({ guidance, completeSetupDisabled, onComplete
 * Hex colour helpers shared by every palette-editing surface (Macadamia
 * onboarding swatches, the LiveThemeEditor, the Style configurator advanced
 * row). Consolidates three prior duplicates: `normalizeColorPickerValue` in
-* Macadamia, `normalizeHex` + `contrastRatio` in `theme-editor/utils.ts`, and
-* the inline regex in `updateColorRole`.
+* Macadamia, `normalizeHex` + `contrastRatio` formerly in
+* `theme-editor/utils.ts`, and the inline regex in `updateColorRole`.
 *
 * Pure functions; no DOM, no React.
 */
@@ -1805,7 +1824,7 @@ function PreviewEditorGuidanceCard({ guidance, completeSetupDisabled, onComplete
 * without a leading `#`; returns `fallback` for any other shape (empty
 * string, garbage, characters outside `[0-9a-f]`, wrong length, etc.). Pass
 * a `fallback` to make the fallback explicit at the call site — defaulting
-* to `'#000000'` keeps the legacy `theme-editor/utils.ts` semantics.
+* to `'#000000'` preserves the former theme-editor helper semantics.
 */
 function normalizeHex(input, fallback = "#000000") {
 	if (!input) return fallback;
@@ -2078,6 +2097,102 @@ function ContrastSwatch({ hex, label }) {
 	});
 }
 //#endregion
+//#region ../preview-next/src/client/preview/ButtonStylePicker.tsx
+function ButtonStylePicker({ selections, current, previewTheme, onPreview, disabled }) {
+	const recipe = findButtonStyleRecipe(current.styleId);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-label": "Button style",
+			className: "grid grid-cols-1 gap-2",
+			children: selections.map((selection) => {
+				const optionRecipe = findButtonStyleRecipe(selection.styleId);
+				const selected = selection.styleId === current.styleId;
+				return /* @__PURE__ */ jsxs("label", {
+					className: cn("relative block cursor-pointer rounded-md border p-2 transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", selected ? "border-foreground bg-accent/40 shadow-sm" : "border-border bg-background hover:border-foreground/40 hover:bg-accent/20", disabled && "cursor-not-allowed opacity-60"),
+					children: [
+						/* @__PURE__ */ jsx("input", {
+							type: "radio",
+							name: "button-style",
+							value: selection.styleId,
+							checked: selected,
+							onChange: () => onPreview(selection),
+							disabled,
+							className: "absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: optionRecipe.accessibilityLabel
+						}),
+						/* @__PURE__ */ jsx(ButtonStylePreviewPair, {
+							selection: selected ? current : selection,
+							previewTheme
+						})
+					]
+				}, buttonStyleSelectionKey(selection));
+			})
+		}), recipe.controls.map((control) => {
+			const currentValue = buttonStyleSelectionParameterValue(current, control.parameter);
+			return /* @__PURE__ */ jsxs("fieldset", {
+				className: "space-y-2 rounded-md border border-border p-3",
+				disabled,
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "px-1 text-xs font-medium",
+					children: control.label
+				}), /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 gap-2",
+					children: control.options.map((option) => /* @__PURE__ */ jsxs("label", {
+						className: cn("relative cursor-pointer rounded-md border px-2 py-1.5 text-center text-xs has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", currentValue === option.value ? "border-foreground bg-accent/40" : "border-border hover:border-foreground/40"),
+						children: [/* @__PURE__ */ jsx("input", {
+							type: "radio",
+							name: `button-style-${current.styleId}-${control.parameter}`,
+							value: option.value,
+							checked: currentValue === option.value,
+							onChange: () => {
+								const updated = updateButtonStyleSelectionChoice(current, control.parameter, option.value);
+								if (updated.kind === "updated") onPreview(updated.selection);
+							},
+							className: "absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+						}), option.label]
+					}, option.value))
+				})]
+			}, control.parameter);
+		})]
+	});
+}
+function ButtonStylePreviewPair({ selection, previewTheme, compact = false }) {
+	const resolved = resolveButtonStyleSelection(selection);
+	if (resolved.kind === "error") return null;
+	return /* @__PURE__ */ jsx(ThemeScope, {
+		theme: {
+			...previewTheme,
+			buttons: resolved.buttonSystem
+		},
+		themeId: `button-style-preview-${encodeURIComponent(buttonStyleSelectionKey(selection))}`,
+		className: cn("relative overflow-hidden bg-transparent", compact ? "h-7" : "h-11"),
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn("absolute left-0 top-1/2 flex w-[142%] -translate-y-1/2 origin-left items-center gap-2", compact ? "scale-[0.56]" : "scale-[0.7]"),
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: themeButtonClassName({
+					variant: "primary",
+					size: "sm",
+					extraClassName: "inline-flex shrink-0 items-center justify-center whitespace-nowrap"
+				}),
+				children: "Get started"
+			}), /* @__PURE__ */ jsx("span", {
+				className: themeButtonClassName({
+					variant: "secondary",
+					size: "sm",
+					extraClassName: "inline-flex shrink-0 items-center justify-center whitespace-nowrap"
+				}),
+				children: "Learn more"
+			})]
+		})
+	});
+}
+//#endregion
 //#region ../preview-next/src/client/preview/typographyFontCatalog.ts
 const typographyFontCategories = [
 	{
@@ -3092,7 +3207,8 @@ const PALETTE_SURFACE_ROLES = [
 		label: "Border"
 	}
 ];
-function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, headerSelectionContext, footerSelectionContext, expandedRowRequest = null, onFocusedSurfaceChange, siteStyleAccess }) {
+function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, headerSelectionContext, onFocusedSurfaceChange, siteStyleAccess }) {
+	const designOpenRequest = usePreviewDesignOpenRequest();
 	const router = useRouter();
 	const previewDesign = usePreviewDesignCoordinator();
 	const siteChromeCustomize = useSiteChromeCustomizeOptional();
@@ -3106,10 +3222,8 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 			selectionVersion: initialSelections.selectionVersion ?? selectionVersion ?? 0,
 			selectionUpdatedAt: initialSelections.selectionUpdatedAt ?? selectionUpdatedAt ?? null
 		},
-		headerSelectionContext,
-		footerSelectionContext
+		headerSelectionContext
 	}), [
-		footerSelectionContext,
 		headerSelectionContext,
 		theme,
 		initialSelections,
@@ -3170,8 +3284,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 			siteStyle,
 			selection: state.previewed,
 			baseTheme: theme,
-			headerSelectionContext,
-			footerSelectionContext
+			headerSelectionContext
 		}).themeOverlay, "site-style");
 	}, [
 		state,
@@ -3179,7 +3292,6 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		clearPreview,
 		previewTheme,
 		headerSelectionContext,
-		footerSelectionContext,
 		theme
 	]);
 	useEffect(() => {
@@ -3190,14 +3302,14 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		};
 	}, []);
 	useEffect(() => {
-		if (!expandedRowRequest) return;
-		if (appliedExpandedRowRequestIdRef.current === expandedRowRequest.id) return;
+		if (!designOpenRequest) return;
+		if (appliedExpandedRowRequestIdRef.current === designOpenRequest.requestId) return;
 		setState((current) => {
 			if (!current) return current;
-			appliedExpandedRowRequestIdRef.current = expandedRowRequest.id;
-			return openRow(current, expandedRowForPreviewDesignRow(expandedRowRequest.row));
+			appliedExpandedRowRequestIdRef.current = designOpenRequest.requestId;
+			return openRow(current, expandedRowForPreviewDesignRow(designOpenRequest.row));
 		});
-	}, [expandedRowRequest, hasLoadedState]);
+	}, [designOpenRequest, hasLoadedState]);
 	const handlePreviewSiteStyle = useCallback((siteStyleId) => {
 		setState((current) => {
 			if (!current) return current;
@@ -3208,8 +3320,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				siteStyle,
 				selection: next.previewed,
 				baseTheme: theme,
-				headerSelectionContext,
-				footerSelectionContext
+				headerSelectionContext
 			});
 			return applyResolvedSelections(next, {
 				resolved: {
@@ -3219,13 +3330,9 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				warnings: result.warnings
 			});
 		});
-	}, [
-		footerSelectionContext,
-		headerSelectionContext,
-		theme
-	]);
-	const handlePreviewPersonality = useCallback((id) => {
-		setState((current) => current ? previewButtonPersonality(current, id) : current);
+	}, [headerSelectionContext, theme]);
+	const handlePreviewButtonStyle = useCallback((id) => {
+		setState((current) => current ? previewButtonStyle(current, id) : current);
 	}, []);
 	const handlePreviewHeaderLayout = useCallback((id) => {
 		if (!id) return;
@@ -3243,25 +3350,6 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		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;
@@ -3289,15 +3377,10 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				siteStyle,
 				selection: current.previewed,
 				baseTheme: theme,
-				headerSelectionContext,
-				footerSelectionContext
+				headerSelectionContext
 			}).themeOverlay.typography, patch);
 		});
-	}, [
-		footerSelectionContext,
-		headerSelectionContext,
-		theme
-	]);
+	}, [headerSelectionContext, theme]);
 	const handleHeadingTypographyChange = useCallback((patch) => {
 		patchTypography({
 			kind: "heading",
@@ -3375,15 +3458,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 			setState(live);
 		}
 		const previewed = live.previewed;
-		const siteStyle = getCuratedSiteStyle(previewed.siteStyleId);
-		if (!siteStyle) return;
-		const compiled = planSiteStylePreviewChange({
-			siteStyle,
-			selection: previewed,
-			baseTheme: theme,
-			headerSelectionContext,
-			footerSelectionContext
-		});
+		if (!getCuratedSiteStyle(previewed.siteStyleId)) return;
 		await runnerRef.current.run({
 			optimistic: () => {
 				applyStarted("style-configurator");
@@ -3392,15 +3467,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 			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,
-						footerLookId: compiled.resolvedSelections.footerLookId,
-						typography: compiled.themeOverlay.typography
-					},
+					previewed,
 					selectionId
 				});
 				if (!body.ok) throw new StyleApplyPlanError(paletteApplyPlanErrorMessage(body.error));
@@ -3432,7 +3499,6 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		});
 	}, [
 		apiClient,
-		footerSelectionContext,
 		headerSelectionContext,
 		applyFailed,
 		applyStarted,
@@ -3458,29 +3524,26 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 		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 = 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({
+	const currentPreviewPlan = planSiteStylePreviewChange({
 		siteStyle: currentSiteStyle,
 		selection: state.previewed,
 		baseTheme: theme,
-		headerSelectionContext,
-		footerSelectionContext
-	}).themeOverlay.typography;
+		headerSelectionContext
+	});
+	const currentTypography = currentPreviewPlan.themeOverlay.typography;
 	const chromeLookModels = buildSiteChromeLookModels({
 		state,
 		siteStyle: currentSiteStyle,
-		headerSelectionContext,
-		footerSelectionContext
+		headerSelectionContext
 	});
 	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", {
@@ -3573,32 +3636,14 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				}) : 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.",
+				label: "Footer links",
+				ariaLabel: "Footer link treatment",
+				defaultDescription: "Use the footer link treatment 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.",
+				currentLabel: state.previewed.footerLookId ? currentFooterLook?.label ?? "Unknown footer link treatment" : `${currentFooterLook?.label ?? "Site style"} (default)`,
+				scopeDescription: "Changes footer navigation links on every page.",
 				options: chromeLookModels.footer.options,
 				diagnostics: chromeLookModels.footer.diagnostics,
 				onCycle: (direction) => {
@@ -3608,13 +3653,13 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				onPreview: handlePreviewFooterLook,
 				disabled: aggregateMutationControlsDisabled
 			}),
-			/* @__PURE__ */ jsx(PersonalityRow, {
+			/* @__PURE__ */ jsx(ButtonStyleRow, {
 				expanded: state.expandedRow === "buttons",
 				onToggle: () => handleToggleRow("buttons"),
 				siteStyle: currentSiteStyle,
-				currentId: state.previewed.buttonPersonalityId,
-				currentLabel: currentPersonality?.name ?? state.previewed.buttonPersonalityId,
-				onPreview: handlePreviewPersonality,
+				current: state.previewed.buttonStyleSelection,
+				previewTheme: currentPreviewPlan.themeOverlay,
+				onPreview: handlePreviewButtonStyle,
 				disabled: aggregateMutationControlsDisabled
 			}),
 			/* @__PURE__ */ jsx(TypographyRow, {
@@ -3703,7 +3748,7 @@ function StyleConfiguratorSaveControls({ previewingChange, applyAllowed, saving,
 		}) : null
 	] });
 }
-function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, children }) {
+function StyleRowFrame({ label, currentLabel, currentSummary, swatch, expanded, onToggle, children }) {
 	return /* @__PURE__ */ jsx(Collapsible, {
 		open: expanded,
 		onOpenChange: onToggle,
@@ -3722,7 +3767,10 @@ function StyleRowFrame({ label, currentLabel, swatch, expanded, onToggle, childr
 							children: [/* @__PURE__ */ jsx("div", {
 								className: "text-xs uppercase tracking-wide text-muted-foreground",
 								children: label
-							}), /* @__PURE__ */ jsx("div", {
+							}), currentSummary ? /* @__PURE__ */ jsx("div", {
+								"aria-label": currentLabel,
+								children: currentSummary
+							}) : /* @__PURE__ */ jsx("div", {
 								className: "truncate text-sm font-medium",
 								children: currentLabel
 							})]
@@ -3761,23 +3809,23 @@ function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
 		})
 	});
 }
-function PersonalityRow({ expanded, onToggle, siteStyle, currentId, currentLabel, onPreview, disabled }) {
+function ButtonStyleRow({ expanded, onToggle, siteStyle, current, previewTheme, onPreview, disabled }) {
 	return /* @__PURE__ */ jsx(StyleRowFrame, {
 		label: "Button style",
-		currentLabel,
+		currentLabel: findButtonStyleRecipe(current.styleId).accessibilityLabel,
+		currentSummary: /* @__PURE__ */ jsx(ButtonStylePreviewPair, {
+			selection: current,
+			previewTheme,
+			compact: true
+		}),
 		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))
+		children: /* @__PURE__ */ jsx(ButtonStylePicker, {
+			selections: siteStyle.buttonStyleChoices,
+			current,
+			previewTheme,
+			onPreview,
+			disabled
 		})
 	});
 }
@@ -4175,6 +4223,7 @@ function paletteApplyPlanErrorMessage(error) {
 	switch (error) {
 		case "invalid-palette-state": return "Palette details are unavailable. Refresh and try again.";
 		case "curated-palette-missing": return "This curated palette is no longer available. Refresh and try again.";
+		case "no-selection-changes": return "There are no design changes to apply.";
 		default: return assertNever$1(error);
 	}
 }
@@ -4212,7 +4261,6 @@ function expandedRowForPreviewDesignRow(row) {
 		case "header": return "header-layout";
 		case "header-layout":
 		case "header-style":
-		case "footer-layout":
 		case "footer": return row;
 		default: return assertNever$1(row, "Unhandled preview design row");
 	}
@@ -4236,11 +4284,11 @@ function WarningNotice({ warnings, onDismiss }) {
 	});
 }
 function describeWarning(warning) {
-	return `Button style changed to ${warning.fellBackTo} because ${warning.requested} is not offered for this site style.`;
+	return `Button style changed to ${warning.fellBackTo.styleId} 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, 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, onFooterSaved, 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, themeSelectionButtonStyleSelection = null, runtimePaletteState, themeSelectionHeaderLayoutId = null, themeSelectionHeaderStyleId = null, themeSelectionHeaderLookId = null, themeSelectionFooterLookId = null, themeSelectionHeaderContext, apiClient, bearerToken, supabaseUrl, entrySubrouteContext, assistantPanel, sdkConfig, mediaAssets, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, onFooterSaved, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const controller = useEntryController();
 	const controllerBlocks = controller.blocks;
 	const uiStore = useEditorUiStoreInstance();
@@ -4367,7 +4415,6 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 		blockEditorRef,
 		onBlocksChange: handleBlocksChange,
 		metadataPanel: metadataSectionContent,
-		designOpenRequestId: designRowRequest?.id ?? null,
 		designTakeoverActive,
 		designPanel: canInspectSiteStyle(siteStyleAccess) ? /* @__PURE__ */ jsx(StyleConfigurator, {
 			siteId,
@@ -4380,7 +4427,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 			initialSelections: {
 				selectionVersion: themeSelectionVersion,
 				selectionUpdatedAt: themeSelectionUpdatedAt,
-				buttonPersonalityId: themeSelectionButtonPersonalityId,
+				buttonStyleSelection: themeSelectionButtonStyleSelection,
 				runtimePaletteState,
 				headerLayoutId: themeSelectionHeaderLayoutId,
 				headerStyleId: themeSelectionHeaderStyleId,
@@ -4388,8 +4435,6 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 				footerLookId: themeSelectionFooterLookId
 			},
 			headerSelectionContext: themeSelectionHeaderContext,
-			footerSelectionContext: themeSelectionFooterContext,
-			expandedRowRequest: designRowRequest,
 			onFocusedSurfaceChange: setDesignTakeoverActive,
 			siteStyleAccess
 		}) : null,
@@ -4422,6 +4467,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 			manageLinksHref: `${dashboardBaseUrl?.replace(/\/$/u, "") ?? ""}/dashboard/sites/${siteId}/navigation`,
 			manageSettingsHref: `${dashboardBaseUrl?.replace(/\/$/u, "") ?? ""}/dashboard/sites/${siteId}/settings`,
 			legalRegion: theme?.footer?.bottomBar?.enabled === true ? "separate" : "integrated",
+			loadingFallback: /* @__PURE__ */ jsx(ContentSpinner, { className: "py-8" }),
 			initialTarget: previewInspection.kind === "footer-module" ? {
 				kind: "module",
 				moduleId: previewInspection.moduleId