@riverbankcms/sdk 0.130.2 → 0.134.0

package/CHANGELOG.md

@@ -6,6 +6,16 @@ until the next version ships and then gets the version it went out in.
 
 ## Unreleased
 
+### Routable content includes native page surfaces (#1332)
+
+- **`RoutableContentItem` is now a discriminated union.** The public routable-
+  content feed can return `entityType: 'pageSurface'` for native event/course
+  routes. Page-surface items have `identifier`, `contentTypeKey`, and
+  `contentTypeName` fixed to `null`; page/content variants retain their own
+  identifier metadata. The route status fields now expose the API's closed
+  status union rather than `string`. Consumers that construct these objects
+  directly may need to provide the variant-specific metadata fields.
+
 ### Breaking: the `transparent` header variant is gone
 
 - **`Layout`'s `headerVariant` prop no longer accepts `'transparent'`.** The
@@ -37,9 +47,9 @@ consumer needs to change anything.
     filled media frame and background that variant's layout expects), while
     `'alternative'` gets the card surface only. The two spellings of "statement
     card" are therefore not interchangeable inside `editorial-diptych`.
-- **`CardStylesContent` names a card surface with `role`.** `cardVariant` is the
-  legacy name for the same thing and still parses; where both are present,
-  `role` wins.
+- **`CardStylesContent` names a card surface with `role`.** Persisted
+  `cardVariant` values are repaired to `role` by the release migration; the SDK
+  and renderer no longer expose a parallel compatibility field.
 - **Missing compiled fields declared.** `MediaTextContent._frameStyles`,
   `CollectionContent._cardStyles` and `EventCalendarContent._containerStyles`
   are now part of the SDK's block content types, alongside the card fields on

package/dist/{PreviewEditorSidebar-BY-1QdE2.mjs → PreviewEditorSidebar-DfRhJPFQ.mjs}

@@ -1,8 +1,8 @@
 "use client";
-import { $ as FooterComposerPanel, $i as SearchInput, A as markApplySaved, Ai as paletteColorsSchema, B as resetTypographyToSaved, Bt as useEditorUiStoreInstance, C as applyTypographyDraftPatch, Ca as DropdownMenuTrigger, Cr as curatedSiteStyles, D as dismissWarnings, Da as cn, Dr as findFooterLook, E as deriveStyleConfiguratorCapabilities, En as ThemeScope, F as previewCuratedPalette, Fa as X$1, Fr as curatedPalettes, H as styleConfiguratorHistoryEntryForPersistedSelection, Ha as SlidersHorizontal, I as previewFooterLook, Ja as Monitor, Ji as SelectItem, Ki as Select, L as previewHeaderLayout, M as openRow, N as palettePreviewProjection, Nt as BlockEditor, O as isPreviewingChange, Or as getHeaderLayout, P as previewButtonStyle, Q as resolvePreviewSidebarTab, Qi as CalloutDescription, R as previewHeaderStyle, S as applyResolvedSelections, Sa as DropdownMenuSeparator, Si as themeButtonClassName, T as createStyleConfiguratorState, Ta as Button, Tr as getCuratedSiteStyle, U as syncStyleConfiguratorState, V as setPaletteColors, Va as Smartphone, W as toggleRow, Xa as LoaderCircle, Xi as SelectValue, Ya as Maximize2, Yi as SelectTrigger, Z as createOptimisticActionRunner, Zi as Callout, _ as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, _a as Surface, _i as buttonStyleSelectionParameterValue, _n as listEntryPageContentSlots, aa as TabsContent, an as resolveContentTitle, at as useUISelector, b as cycleSiteChromeSelectionId, ba as DropdownMenuItem, bi as updateButtonStyleSelectionChoice, c as selectionSnapshotFromApplySiteStyleSelectionResponse, cn as ManifestForm, ct as useEntryController, d as resolveStyleConfiguratorInitialSnapshot, dn as FormRenderer, ea as Popover, ga as CollapsibleTrigger, ha as CollapsibleContent, ia as Tabs, in as resolvePageRouteSlug, io as Check, it as ContentFieldsForm, j as markApplySaving, ja as assertNever$1, k as markApplyFailed, ka as unsafeAsEditorBlockId, ki as paletteColorEntries, kr as getHeaderStyle, l as deriveSiteStylePreviewUpdate, ma as Collapsible, n as useSiteChromeCustomizeOptional, na as PopoverTrigger, no as ChevronLeft, oa as TabsList, p as usePreviewDesignCoordinator, pn as createStoreBackend, qi as SelectContent, ra as Input, rn as deriveRouteMetadataPresentation, s as buildApplySiteStyleSelectionBody, sa as TabsTrigger, ta as PopoverContent, tn as isAdapterReferenceKind, to as ChevronRight, u as planSiteStylePreviewChange, un as createManifestValidation, v as reportPreviewDesignError, va as DropdownMenu, vi as findButtonStyleRecipe, w as cancelPreview, x as planSiteChromeSelection, xa as DropdownMenuLabel, xi as buttonStyleSelectionKey, y as buildSiteChromeSelectionModels, ya as DropdownMenuContent, yi as resolveButtonStyleSelection, z as previewSiteStyle, za as Tablet, zt as useEditorUiStore } from "./SiteChromeCustomizeContext-BhUG_72i.mjs";
-import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-CX1C_KJ4.mjs";
-import { t as Separator } from "./separator-BXlYN_gr.mjs";
-import { S as getSiteFontsStorageUrl, _ as usePreviewBlockCustomizeSelectionOptional, b as buildFontPreviewUrl, d as buildPreviewDashboardSetupUrl, f as resolvePreviewDashboardSetupHandoff, g as useBlockCustomizeControls, h as usePreviewSiteFontStorageUrl, m as resolvePreviewSidebarChromeModel, p as resolvePreviewEditorGuidanceModel, u as canInspectSiteStyle, v as PreviewFormProvider, x as generateFontFaceCss, y as previewWidgetOverrides } from "./SdkPreviewModeRuntime-B1pWnhu-.mjs";
+import { $ as FooterComposerPanel, $a as Maximize2, $i as SelectTrigger, A as markApplySaved, B as resetTypographyToSaved, Bt as useEditorUiStoreInstance, C as applyTypographyDraftPatch, Ca as DropdownMenuContent, Ci as updateButtonStyleSelectionChoice, Cr as curatedSiteStyles, D as dismissWarnings, Da as DropdownMenuTrigger, Dr as findFooterLook, E as deriveStyleConfiguratorCapabilities, Ea as DropdownMenuSeparator, En as ThemeScope, F as previewCuratedPalette, Fa as assertNever$1, Fr as curatedPalettes, Ga as Smartphone, H as styleConfiguratorHistoryEntryForPersistedSelection, I as previewFooterLook, Ka as SlidersHorizontal, L as previewHeaderLayout, M as openRow, N as palettePreviewProjection, Na as unsafeAsEditorBlockId, Ni as paletteColorEntries, Nt as BlockEditor, O as isPreviewingChange, Or as getHeaderLayout, P as previewButtonStyle, Pi as paletteColorsSchema, Q as resolvePreviewSidebarTab, Qa as Monitor, Qi as SelectItem, R as previewHeaderStyle, S as applyResolvedSelections, Sa as DropdownMenu, Si as updateButtonStyleHoverPreference, T as createStyleConfiguratorState, Ta as DropdownMenuLabel, Ti as themeButtonClassName, Tr as getCuratedSiteStyle, U as syncStyleConfiguratorState, Ua as Tablet, V as setPaletteColors, W as toggleRow, Xi as Select, Z as createOptimisticActionRunner, Zi as SelectContent, _ as PREVIEW_DESIGN_SAVE_ERROR_MESSAGE, _n as listEntryPageContentSlots, aa as PopoverContent, an as resolveContentTitle, ao as ChevronRight, at as useUISelector, b as cycleSiteChromeSelectionId, ba as CollapsibleTrigger, bi as findButtonStyleRecipe, c as selectionSnapshotFromApplySiteStyleSelectionResponse, ca as Tabs, cn as ManifestForm, co as Check, ct as useEntryController, d as resolveStyleConfiguratorInitialSnapshot, da as TabsTrigger, dn as FormRenderer, ea as SelectValue, eo as LoaderCircle, ia as Popover, in as resolvePageRouteSlug, it as ContentFieldsForm, j as markApplySaving, ja as cn, ji as VARIANT_ROLES, k as markApplyFailed, ka as Button, kr as getHeaderStyle, l as deriveSiteStylePreviewUpdate, la as TabsContent, n as useSiteChromeCustomizeOptional, na as CalloutDescription, oa as PopoverTrigger, oo as ChevronLeft, p as usePreviewDesignCoordinator, pn as createStoreBackend, ra as SearchInput, rn as deriveRouteMetadataPresentation, s as buildApplySiteStyleSelectionBody, sa as Input, so as ChevronDown, ta as Callout, tn as isAdapterReferenceKind, u as planSiteStylePreviewChange, ua as TabsList, un as createManifestValidation, v as reportPreviewDesignError, va as Collapsible, vi as buttonStyleHoverPreferenceValue, w as cancelPreview, wa as DropdownMenuItem, wi as buttonStyleSelectionKey, x as planSiteChromeSelection, xa as Surface, xi as resolveButtonStyleSelection, y as buildSiteChromeSelectionModels, ya as CollapsibleContent, yi as buttonStyleSelectionParameterValue, z as previewSiteStyle, za as X$1, zt as useEditorUiStore } from "./SiteChromeCustomizeContext-DVMTMvqA.mjs";
+import { d as unwrapResponse, f as getDashboardUrl, r as usePreviewAuth } from "./previewAuthStore-BFKd4LrN.mjs";
+import { t as Separator } from "./separator-CMhj6BTi.mjs";
+import { S as getSiteFontsStorageUrl, _ as usePreviewBlockCustomizeSelectionOptional, b as buildFontPreviewUrl, d as buildPreviewDashboardSetupUrl, f as resolvePreviewDashboardSetupHandoff, g as useBlockCustomizeControls, h as usePreviewSiteFontStorageUrl, m as resolvePreviewSidebarChromeModel, p as resolvePreviewEditorGuidanceModel, u as canInspectSiteStyle, v as PreviewFormProvider, x as generateFontFaceCss, y as previewWidgetOverrides } from "./SdkPreviewModeRuntime-8CyGCXir.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";
@@ -464,7 +464,10 @@ function ContentSpinner({ className, size = "xl" }) {
 * consumers (notice, SEO, breadcrumbs, …).
 */
 function foldSubroute(ctx, fold) {
-	return fold["event-occurrence"](ctx.occurrence);
+	switch (ctx.kind) {
+		case "event-occurrence": return fold["event-occurrence"](ctx.occurrence);
+		case "event-run": return fold["event-run"](ctx.run);
+	}
 }
 //#endregion
 //#region ../blocks/src/subroutes/formatDate.ts
@@ -503,14 +506,24 @@ function formatOccurrenceDate(iso) {
 * Adding a new {@link EntrySubrouteKind} requires a new entry here; the
 * `Record<EntrySubrouteKind, …>` shape will refuse to compile otherwise.
 */
-const SUBROUTE_KINDS = { "event-occurrence": {
-	kind: "event-occurrence",
-	containerNoun: "event",
-	instanceNoun: "date",
-	listLabel: "events list",
-	formatInstanceName: (occurrence) => formatOccurrenceDate(occurrence.startsAt),
-	subEditorPath: () => "bookings/events"
-} };
+const SUBROUTE_KINDS = {
+	"event-occurrence": {
+		kind: "event-occurrence",
+		containerNoun: "event",
+		instanceNoun: "date",
+		listLabel: "events list",
+		formatInstanceName: (occurrence) => formatOccurrenceDate(occurrence.startsAt),
+		subEditorPath: () => "bookings/events"
+	},
+	"event-run": {
+		kind: "event-run",
+		containerNoun: "event",
+		instanceNoun: "run",
+		listLabel: "event runs",
+		formatInstanceName: (run) => run.name,
+		subEditorPath: () => "bookings/events"
+	}
+};
 //#endregion
 //#region ../content-model/src/contentManifest.ts
 function assertNever(value) {
@@ -1037,7 +1050,10 @@ function buildNoticeFromMeta(meta, payload, siteId) {
 */
 function resolveSubrouteNotice(ctx, args) {
 	if (!ctx) return null;
-	return foldSubroute(ctx, { "event-occurrence": (occurrence) => buildNoticeFromMeta(SUBROUTE_KINDS["event-occurrence"], occurrence, args.siteId) });
+	return foldSubroute(ctx, {
+		"event-occurrence": (occurrence) => buildNoticeFromMeta(SUBROUTE_KINDS["event-occurrence"], occurrence, args.siteId),
+		"event-run": (run) => buildNoticeFromMeta(SUBROUTE_KINDS["event-run"], run, args.siteId)
+	});
 }
 //#endregion
 //#region ../preview-next/src/client/preview/EntrySlotBlockEditorPanel.tsx
@@ -2156,67 +2172,301 @@ function ContrastSwatch({ hex, label }) {
 	});
 }
 //#endregion
+//#region ../preview-next/src/client/preview/ButtonHoverRoleControls.tsx
+const ROLE_LABELS = {
+	primary: "Primary button",
+	secondary: "Secondary button",
+	outline: "Outline button",
+	ghost: "Ghost button",
+	accent: "Accent button"
+};
+function ButtonHoverRoleControls({ control, current, previewTheme, onPreview, disabled = false }) {
+	const [advancedOpen, setAdvancedOpen] = useState(false);
+	const [expandedRole, setExpandedRole] = useState(null);
+	const instanceId = useId();
+	const advancedOptionsId = `${instanceId}-button-hover-role-options`;
+	const themeScopeId = `button-hover-roles-${encodeURIComponent(instanceId)}`;
+	const resolved = resolveButtonStyleSelection(current);
+	if (resolved.kind === "error") return null;
+	const theme = {
+		...previewTheme,
+		buttons: resolved.buttonSystem
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: "rounded-md border border-border",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-testid": "button-hover-advanced-options",
+			"aria-expanded": advancedOpen,
+			"aria-controls": advancedOptionsId,
+			disabled,
+			onClick: () => setAdvancedOpen((open) => !open),
+			className: "flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left text-xs font-medium disabled:cursor-not-allowed disabled:opacity-60",
+			children: [/* @__PURE__ */ jsx("span", { children: "Advanced options" }), /* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground",
+				children: [VARIANT_ROLES.length, " button types"]
+			})]
+		}), advancedOpen ? /* @__PURE__ */ jsxs("div", {
+			id: advancedOptionsId,
+			className: "border-t border-border p-3",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "mb-3 text-xs text-muted-foreground",
+				children: "Choose how each kind of button reacts. Recommended keeps this personality’s coordinated defaults."
+			}), /* @__PURE__ */ jsx(ThemeScope, {
+				theme,
+				themeId: themeScopeId,
+				className: "space-y-2 bg-transparent",
+				children: VARIANT_ROLES.map((role) => /* @__PURE__ */ jsx(ButtonHoverRoleRow, {
+					role,
+					instanceId,
+					control,
+					current,
+					expanded: expandedRole === role,
+					disabled,
+					onToggle: () => setExpandedRole((expanded) => expanded === role ? null : role),
+					onPreview
+				}, role))
+			})]
+		}) : null]
+	});
+}
+function ButtonHoverRoleRow({ role, instanceId, control, current, expanded, disabled, onToggle, onPreview }) {
+	const preference = buttonStyleHoverPreferenceValue(current, control.parameter, role);
+	const preferenceSummary = preference === null ? "Recommended" : control.options.find((option) => option.value === preference)?.label ?? preference;
+	const editorId = `${instanceId}-button-hover-editor-${role}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "overflow-hidden rounded-md border border-border bg-background",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-testid": `button-hover-role-${role}`,
+			"aria-expanded": expanded,
+			"aria-controls": editorId,
+			disabled,
+			onClick: onToggle,
+			className: "flex w-full items-center gap-2 p-2 text-left disabled:cursor-not-allowed disabled:opacity-60",
+			children: [
+				/* @__PURE__ */ jsx(ButtonSpecimen, {
+					role,
+					text: ROLE_LABELS[role]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("ml-auto text-[11px]", preference === null ? "text-muted-foreground" : "font-medium text-foreground"),
+					children: preferenceSummary
+				}),
+				expanded ? /* @__PURE__ */ jsx(ChevronDown, {
+					className: "h-3.5 w-3.5 shrink-0",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ jsx(ChevronRight, {
+					className: "h-3.5 w-3.5 shrink-0",
+					"aria-hidden": "true"
+				})
+			]
+		}), expanded ? /* @__PURE__ */ jsx(ButtonHoverRoleEditor, {
+			id: editorId,
+			role,
+			groupName: `${instanceId}-button-hover-${role}`,
+			control,
+			current,
+			preference,
+			disabled,
+			onPreview
+		}) : null]
+	});
+}
+function ButtonHoverRoleEditor({ id, role, groupName, control, current, preference, disabled, onPreview }) {
+	const choices = [{
+		value: null,
+		label: "Recommended"
+	}, ...control.options.map((option) => ({
+		value: option.value,
+		label: option.label
+	}))];
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: "space-y-3 border-t border-border p-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [
+				/* @__PURE__ */ jsxs("h3", {
+					className: "text-xs font-medium",
+					children: [ROLE_LABELS[role], " hover"]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-[11px] text-muted-foreground",
+					children: "Choose the colour relationship. Riverbank derives a safe text colour."
+				}),
+				preference === "secondary" || preference === "accent" ? /* @__PURE__ */ jsx("p", {
+					role: "note",
+					className: "mt-1 text-[11px] text-muted-foreground",
+					children: "If this colour would not be readable on a section, Riverbank uses a contextual shade there and keeps your choice here."
+				}) : null
+			] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-[1fr_auto_1fr] items-end gap-2",
+				children: [
+					/* @__PURE__ */ jsx(LabeledSpecimen, {
+						label: "Normal",
+						role
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "pb-2 text-xs text-muted-foreground",
+						"aria-hidden": "true",
+						children: "→"
+					}),
+					/* @__PURE__ */ jsx(LabeledSpecimen, {
+						label: "Hover",
+						role,
+						forceHover: true
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("fieldset", {
+				disabled,
+				className: "space-y-1.5",
+				children: [/* @__PURE__ */ jsxs("legend", {
+					className: "sr-only",
+					children: [ROLE_LABELS[role], " hover treatment"]
+				}), choices.map((choice) => /* @__PURE__ */ jsx(HoverChoice, {
+					role,
+					groupName,
+					parameter: control.parameter,
+					value: choice.value,
+					label: choice.label,
+					checked: preference === choice.value,
+					current,
+					onPreview
+				}, choice.value ?? "recommended"))]
+			})
+		]
+	});
+}
+function HoverChoice({ role, groupName, parameter, value, label, checked, current, onPreview }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("flex cursor-pointer items-center gap-2 rounded-md border px-2 py-2 text-xs has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring", checked ? "border-foreground bg-accent/30" : "border-border"),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			"data-testid": `button-hover-choice-${role}-${value ?? "recommended"}`,
+			name: groupName,
+			"aria-label": `${ROLE_LABELS[role]} hover: ${label}`,
+			checked,
+			onChange: () => {
+				const updated = updateButtonStyleHoverPreference(current, parameter, role, value);
+				if (updated.kind === "updated") onPreview(updated.selection);
+			}
+		}), value === "secondary" || value === "accent" ? /* @__PURE__ */ jsx(ButtonSpecimen, {
+			role: value,
+			text: value === "secondary" ? "Secondary button colour" : "Accent button colour"
+		}) : /* @__PURE__ */ jsx("span", { children: label })]
+	});
+}
+function LabeledSpecimen({ label, role, forceHover = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "mb-1 block text-[10px] uppercase tracking-wide text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx(ButtonSpecimen, {
+			role,
+			text: "Get started",
+			forceHover
+		})]
+	});
+}
+function ButtonSpecimen({ role, text, forceHover = false }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-force-hover": forceHover ? "true" : void 0,
+		className: themeButtonClassName({
+			variant: role,
+			size: "sm",
+			extraClassName: "pointer-events-none inline-flex min-w-0 shrink justify-center whitespace-nowrap text-[11px]"
+		}),
+		children: text
+	});
+}
+//#endregion
 //#region ../preview-next/src/client/preview/ButtonStylePicker.tsx
-function ButtonStylePicker({ selections, current, previewTheme, onPreview, disabled }) {
+function ButtonStylePicker({ selections, current, previewTheme, onPreview, disabled, repairs = [] }) {
 	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));
+		children: [
+			repairs.filter((repair) => repair.styleId === current.styleId).length > 0 ? /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground",
+				children: "A saved button option was no longer available. That option is now Recommended; your button personality and other choices were kept."
+			}) : null,
+			/* @__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) => {
+				if (control.kind === "button-hover-by-role") return /* @__PURE__ */ jsx(ButtonHoverRoleControls, {
+					control,
+					current,
+					previewTheme,
+					onPreview,
+					disabled
+				}, control.parameter);
+				return /* @__PURE__ */ jsx(ButtonStyleChoiceControl, {
+					control,
+					current,
+					onPreview,
+					disabled
+				}, control.parameter);
 			})
-		}), 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 ButtonStyleChoiceControl({ control, current, onPreview, disabled }) {
+	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))
 		})]
 	});
 }
@@ -2252,6 +2502,30 @@ function ButtonStylePreviewPair({ selection, previewTheme, compact = false }) {
 	});
 }
 //#endregion
+//#region ../preview-next/src/client/preview/StyleConfiguratorWarningNotice.tsx
+function StyleConfiguratorWarningNotice({ warnings, onDismiss }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground",
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "space-y-1",
+			children: warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { children: describeWarning(warning) }, `${warning.kind}-${index}`))
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: onDismiss,
+			className: "mt-2 underline",
+			children: "Dismiss"
+		})]
+	});
+}
+function describeWarning(warning) {
+	switch (warning.kind) {
+		case "rejected-button-style": return `Button style changed to ${warning.fellBackTo.styleId} because ${warning.requested} is not offered for this site style.`;
+		case "repaired-header-selection": return `Header changed to ${warning.resolved.layoutId} / ${warning.resolved.styleId} because the requested combination is not offered for this site style.`;
+		case "recompiled-missing-button-system": return "Buttons were rebuilt from the saved button preference because the applied theme did not contain a button system.";
+	}
+}
+//#endregion
 //#region ../preview-next/src/client/preview/HeaderMenuControls.tsx
 function isHeaderMenuSurfaceState(state) {
 	return state.kind === "available" && state.surface === "header";
@@ -3323,7 +3597,7 @@ const PALETTE_SURFACE_ROLES = [
 		label: "Border"
 	}
 ];
-function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, headerLogoContext, onFocusedSurfaceChange }) {
+function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVersion = null, selectionUpdatedAt, initialSelections, buttonStyleRepairs, headerLogoContext, onFocusedSurfaceChange }) {
 	const designOpenRequest = usePreviewDesignOpenRequest();
 	const router = useRouter();
 	const previewDesign = usePreviewDesignCoordinator();
@@ -3653,7 +3927,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-3",
 		children: [
-			state.warnings.length > 0 ? /* @__PURE__ */ jsx(WarningNotice, {
+			state.warnings.length > 0 ? /* @__PURE__ */ jsx(StyleConfiguratorWarningNotice, {
 				warnings: state.warnings,
 				onDismiss: handleDismissWarnings
 			}) : null,
@@ -3731,6 +4005,7 @@ function StyleConfigurator({ siteId, apiClient, theme, selectionId, selectionVer
 				current: state.previewed.buttonStyleSelection,
 				previewTheme: currentPreviewPlan.themeOverlay,
 				onPreview: handlePreviewButtonStyle,
+				repairs: buttonStyleRepairs,
 				disabled: aggregateMutationControlsDisabled
 			}),
 			/* @__PURE__ */ jsx(TypographyRow, {
@@ -3868,7 +4143,7 @@ function SiteStyleRow({ expanded, onToggle, current, onPreview, disabled }) {
 		})
 	});
 }
-function ButtonStyleRow({ expanded, onToggle, siteStyle, current, previewTheme, onPreview, disabled }) {
+function ButtonStyleRow({ expanded, onToggle, siteStyle, current, previewTheme, onPreview, repairs, disabled }) {
 	return /* @__PURE__ */ jsx(StyleRowFrame, {
 		label: "Button style",
 		currentLabel: findButtonStyleRecipe(current.styleId).accessibilityLabel,
@@ -3884,6 +4159,7 @@ function ButtonStyleRow({ expanded, onToggle, siteStyle, current, previewTheme,
 			current,
 			previewTheme,
 			onPreview,
+			repairs,
 			disabled
 		})
 	});
@@ -4146,30 +4422,9 @@ function expandedRowForPreviewDesignRow(row) {
 function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
-function WarningNotice({ warnings, onDismiss }) {
-	return /* @__PURE__ */ jsxs("div", {
-		role: "status",
-		className: "rounded-md border border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning-foreground",
-		children: [/* @__PURE__ */ jsx("ul", {
-			className: "space-y-1",
-			children: warnings.map((warning, index) => /* @__PURE__ */ jsx("li", { children: describeWarning(warning) }, `${warning.kind}-${index}`))
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: onDismiss,
-			className: "mt-2 underline",
-			children: "Dismiss"
-		})]
-	});
-}
-function describeWarning(warning) {
-	switch (warning.kind) {
-		case "rejected-button-style": return `Button style changed to ${warning.fellBackTo.styleId} because ${warning.requested} is not offered for this site style.`;
-		case "repaired-header-selection": return `Header changed to ${warning.resolved.layoutId} / ${warning.resolved.styleId} because the requested combination 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, themeSelectionButtonStyleSelection = null, themeSelectionHeaderSelection = null, themeSelectionFooterLookId = null, themeSelectionHeaderLogo, apiClient, bearerToken, entrySubrouteContext, assistantPanel, sdkConfig, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, onFooterSaved, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
+function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, pageId, entryData, contentTypeSchema, referenceContentTypeKeys = [], draftContent, currentTemplate, theme, themeId = null, themeSelectionId = null, themeSelectionVersion = null, themeSelectionUpdatedAt = null, themeSelectionButtonStyleSelection = null, themeSelectionButtonStyleRepairs, themeSelectionHeaderSelection = null, themeSelectionFooterLookId = null, themeSelectionHeaderLogo, apiClient, bearerToken, entrySubrouteContext, assistantPanel, sdkConfig, bookingOfferingPresets, siteStyleAccess = { kind: "hidden" }, activeTab, onTabChange, onClose, onFooterSaved, viewportMode, viewportWidth, zoom, onViewportModeChange, onViewportWidthChange, onZoomChange }) {
 	const controller = useEntryController();
 	const controllerBlocks = controller.blocks;
 	const uiStore = useEditorUiStoreInstance();
@@ -4317,6 +4572,7 @@ function PreviewEditorSidebar({ surfaceId, siteId, dashboardBaseUrl = null, page
 				headerSelection: themeSelectionHeaderSelection,
 				footerLookId: themeSelectionFooterLookId
 			},
+			buttonStyleRepairs: themeSelectionButtonStyleRepairs,
 			headerLogoContext: themeSelectionHeaderLogo,
 			onFocusedSurfaceChange: setDesignTakeoverActive
 		}) : null,

package/dist/{PreviewEditorUI-BS34jI9_.mjs → PreviewEditorUI-Dppxcr_g.mjs}

@@ -1,7 +1,7 @@
 "use client";
-import { $a as Eye, At as useEditor, Ba as Sparkles, Bt as useEditorUiStoreInstance, Ca as DropdownMenuTrigger, Da as cn, Ea as cva, Ga as Pencil, Gi as TooltipTrigger, Ka as PenLine, La as Undo2, Ra as TriangleAlert, Rt as classifyHistoryShortcut, Ta as Button, Ui as Tooltip, Wa as Redo2, Wi as TooltipContent, Xa as LoaderCircle, Xt as useMultiAutosave, a as previewDesignHistoryDomainForCommand, ba as DropdownMenuItem, ca as Dialog, eo as EllipsisVertical, fa as DialogHeader, i as usePreviewDesignHistoryOrder, la as DialogContent, lt as useEntryEditorController, n as useSiteChromeCustomizeOptional, o as selectPreviewDesignHistoryDomain, pa as DialogTitle, qa as Palette, ro as ChevronDown, ua as DialogDescription, va as DropdownMenu, ya as DropdownMenuContent, zt as useEditorUiStore } from "./SiteChromeCustomizeContext-BhUG_72i.mjs";
-import { d as unwrapResponse, r as usePreviewAuth } from "./previewAuthStore-CX1C_KJ4.mjs";
-import { C as FixedBottomSurface, a as usePreviewPageDesignEditorState, c as applyPreviewChromeSurfaceToElement, l as resolvePreviewChromeSurface, o as PREVIEW_CHROME_PORTAL_CLASS_NAME, s as PREVIEW_CHROME_THEME_CLASS_NAME } from "./SdkPreviewModeRuntime-B1pWnhu-.mjs";
+import { Aa as cva, At as useEditor, Bt as useEditorUiStoreInstance, Ca as DropdownMenuContent, Da as DropdownMenuTrigger, Ha as TriangleAlert, Ja as Redo2, Ji as TooltipContent, Rt as classifyHistoryShortcut, Sa as DropdownMenu, Va as Undo2, Wa as Sparkles, Xa as PenLine, Xt as useMultiAutosave, Ya as Pencil, Yi as TooltipTrigger, Za as Palette, _a as DialogTitle, a as previewDesignHistoryDomainForCommand, eo as LoaderCircle, fa as Dialog, ga as DialogHeader, i as usePreviewDesignHistoryOrder, io as EllipsisVertical, ja as cn, ka as Button, lt as useEntryEditorController, ma as DialogDescription, n as useSiteChromeCustomizeOptional, o as selectPreviewDesignHistoryDomain, pa as DialogContent, qi as Tooltip, ro as Eye, so as ChevronDown, wa as DropdownMenuItem, zt as useEditorUiStore } from "./SiteChromeCustomizeContext-DVMTMvqA.mjs";
+import { d as unwrapResponse, r as usePreviewAuth } from "./previewAuthStore-BFKd4LrN.mjs";
+import { C as FixedBottomSurface, a as usePreviewPageDesignEditorState, c as applyPreviewChromeSurfaceToElement, l as resolvePreviewChromeSurface, o as PREVIEW_CHROME_PORTAL_CLASS_NAME, s as PREVIEW_CHROME_THEME_CLASS_NAME } from "./SdkPreviewModeRuntime-8CyGCXir.mjs";
 import * as React$1 from "react";
 import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/{PreviewQueryProvider-BD0kOjtI.mjs → PreviewQueryProvider-D51gQaG3.mjs}

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