@riverbankcms/sdk 0.109.0 → 0.111.0

package/dist/server/theme.mjs

@@ -138,39 +138,6 @@ function parseThemeColorToken(value) {
 }
 const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
 //#endregion
-//#region ../theme-core/src/site-styles/styleTags.ts
-/**
-* Descriptive style-axis metadata for button personalities and palette
-* variants. Site Style picker shape is curated explicitly; these tags remain
-* for catalog audit, docs, and future discovery tooling.
-*/
-const STYLE_AXIS_VALUES = {
-	tone: [
-		"minimal",
-		"classic",
-		"bold"
-	],
-	energy: ["calm", "vibrant"],
-	motion: [
-		"subtle",
-		"standard",
-		"expressive"
-	],
-	era: [
-		"editorial",
-		"modern",
-		"organic",
-		"technical",
-		"retro"
-	]
-};
-const styleTagsSchema = z$1.object({
-	tone: z$1.enum(STYLE_AXIS_VALUES.tone).optional(),
-	energy: z$1.enum(STYLE_AXIS_VALUES.energy).optional(),
-	motion: z$1.enum(STYLE_AXIS_VALUES.motion).optional(),
-	era: z$1.enum(STYLE_AXIS_VALUES.era).optional()
-});
-//#endregion
 //#region ../theme-core/src/lib/media.ts
 const hotspotSchema = z.object({
 	x: z.number().min(0).max(1),
@@ -511,7 +478,7 @@ const gradientDirectionSchema$1 = z$1.enum([
 	"to-br",
 	"to-bl"
 ]);
-const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
+const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
 	z$1.object({
 		type: z$1.literal("solid"),
 		colorToken: opaqueButtonColourTokenSchema
@@ -535,6 +502,7 @@ const buttonBackgroundSchema = z$1.discriminatedUnion("type", [
 		role: z$1.literal("link")
 	})
 ]);
+const buttonBackgroundSchema = buttonColourTreatmentSchema;
 const effectApplicationSchema$1 = z$1.object({
 	effectId: z$1.string(),
 	options: z$1.record(z$1.string(), z$1.json()).optional()
@@ -747,265 +715,429 @@ function isUnknownArray(value) {
 }
 buttonSizeNameSchema.options;
 //#endregion
-//#region ../theme-core/src/buttons/personalities/types.ts
-function asButtonPersonalityId(value) {
-	if (value.length === 0) throw new Error("ButtonPersonalityId must be a non-empty string");
-	return value;
+//#region ../theme-core/src/buttons/styles/domain.ts
+const PUBLIC_BUTTON_ROLES = [
+	"primary",
+	"secondary",
+	"outline",
+	"ghost",
+	"accent"
+];
+function defineButtonStyleRecipe(recipe) {
+	return recipe;
 }
-const buttonPersonalityIdSchema = z$1.string().min(1).transform((value) => asButtonPersonalityId(value));
-z$1.object({
-	id: buttonPersonalityIdSchema,
-	name: z$1.string().min(1),
-	description: z$1.string().min(1),
-	tags: styleTagsSchema,
-	buttonSystem: buttonSystemSchema
-});
-/**
-* Helper for personality file modules to keep the call site short and
-* type-safe. `as const satisfies ...` would also work but produces wider
-* types at use sites.
-*/
-function defineButtonPersonality(input) {
+function materializeButtonRoles(definitions) {
+	const primary = materializeCompleteRole("primary", definitions.primary.appearance);
+	const secondary = materializeCompleteRole("secondary", definitions.secondary.appearance);
+	const completeRoles = {
+		primary,
+		secondary
+	};
 	return {
-		id: asButtonPersonalityId(input.id),
-		name: input.name,
-		description: input.description,
-		tags: input.tags,
-		buttonSystem: buttonSystemSchema.parse(input.buttonSystem)
+		primary,
+		secondary,
+		outline: materializeSupportingRole("outline", definitions.outline, completeRoles),
+		ghost: materializeSupportingRole("ghost", definitions.ghost, completeRoles),
+		accent: materializeSupportingRole("accent", definitions.accent, completeRoles)
+	};
+}
+function resolveButtonStyleRecipe(recipe, parameters) {
+	const parsedParameters = recipe.parameterSchema.safeParse(parameters);
+	if (!parsedParameters.success) return {
+		kind: "error",
+		error: {
+			kind: "invalid-parameters",
+			styleId: recipe.id,
+			issues: parsedParameters.error.issues.map((issue) => issue.message)
+		}
+	};
+	const definition = recipe.defineSystem(parsedParameters.data);
+	const roles = materializeButtonRoles(definition.roles);
+	const buttonSystem = {
+		global: definition.global,
+		variants: PUBLIC_BUTTON_ROLES.map((role) => roles[role]),
+		...definition.sizes ? { sizes: definition.sizes } : {}
+	};
+	const parsedButtonSystem = buttonSystemSchema.safeParse(buttonSystem);
+	if (!parsedButtonSystem.success) return {
+		kind: "error",
+		error: {
+			kind: "invalid-button-system",
+			styleId: recipe.id,
+			issues: parsedButtonSystem.error.issues.map((issue) => issue.message)
+		}
+	};
+	return {
+		kind: "resolved",
+		buttonSystem: parsedButtonSystem.data
+	};
+}
+function materializeSupportingRole(role, definition, completeRoles) {
+	if (definition.kind === "complete") return materializeCompleteRole(role, definition.appearance);
+	return {
+		...completeRoles[definition.from],
+		...definition.overrides,
+		id: role,
+		name: roleName(role),
+		enabled: true,
+		priority: 3
 	};
 }
+function materializeCompleteRole(role, appearance) {
+	return {
+		...appearance,
+		id: role,
+		name: roleName(role),
+		enabled: true,
+		priority: rolePriority(role)
+	};
+}
+function roleName(role) {
+	return role.charAt(0).toUpperCase() + role.slice(1);
+}
+function rolePriority(role) {
+	if (role === "primary") return 1;
+	if (role === "secondary") return 2;
+	return 3;
+}
 //#endregion
-//#region ../theme-core/src/buttons/personalities/brushed-wash.ts
-/**
-* Brushed Wash — gradient backgrounds that read as watercolour washes.
-* Generous padding, soft shadows; pairs with vibrant organic brands.
-*/
-const brushedWash = defineButtonPersonality({
-	id: "brushed-wash",
-	name: "Brushed Wash",
-	description: "Watercolour-gradient buttons with soft shadows and generous padding.",
+//#region ../theme-core/src/buttons/styles/selection.ts
+const BUTTON_STYLE_IDS = [
+	"soft-pill",
+	"earth-pill",
+	"confident-chip",
+	"editorial-link",
+	"pebble",
+	"ink-stamp",
+	"flat-ink",
+	"brushed-wash",
+	"showtime-pill",
+	"joy-stamp",
+	"ornate-ritual",
+	"quiet-arrow"
+];
+const quietArrowParametersSchema = z$1.object({ secondaryTreatment: z$1.enum(["outlined", "solid-accent"]) }).strict();
+const emptyParametersSchema$1 = z$1.object({}).strict();
+function selectionBranch(styleId, parameters) {
+	return z$1.object({
+		styleId: z$1.literal(styleId),
+		parameters
+	}).strict();
+}
+z$1.discriminatedUnion("styleId", [
+	selectionBranch("soft-pill", emptyParametersSchema$1),
+	selectionBranch("earth-pill", emptyParametersSchema$1),
+	selectionBranch("confident-chip", emptyParametersSchema$1),
+	selectionBranch("editorial-link", emptyParametersSchema$1),
+	selectionBranch("pebble", emptyParametersSchema$1),
+	selectionBranch("ink-stamp", emptyParametersSchema$1),
+	selectionBranch("flat-ink", emptyParametersSchema$1),
+	selectionBranch("brushed-wash", emptyParametersSchema$1),
+	selectionBranch("showtime-pill", emptyParametersSchema$1),
+	selectionBranch("joy-stamp", emptyParametersSchema$1),
+	selectionBranch("ornate-ritual", emptyParametersSchema$1),
+	selectionBranch("quiet-arrow", quietArrowParametersSchema)
+]);
+//#endregion
+//#region ../theme-core/src/buttons/styles/recipes/quietArrow.ts
+const quietArrowRecipe = defineButtonStyleRecipe({
+	id: "quiet-arrow",
+	accessibilityLabel: "Wide uppercase buttons with trailing arrows",
 	tags: {
 		tone: "classic",
-		energy: "vibrant",
-		motion: "standard",
-		era: "organic"
+		energy: "calm",
+		motion: "subtle",
+		era: "editorial"
 	},
-	buttonSystem: {
+	parameterSchema: quietArrowParametersSchema,
+	defaultParameters: { secondaryTreatment: "outlined" },
+	controls: [{
+		kind: "choice",
+		parameter: "secondaryTreatment",
+		label: "Secondary button treatment",
+		options: [{
+			value: "outlined",
+			label: "Outlined"
+		}, {
+			value: "solid-accent",
+			label: "Solid accent"
+		}]
+	}],
+	defineSystem: (parameters) => ({
 		global: {
 			cornerStyle: "rounded",
-			shadow: "low",
-			textTransform: "none",
+			textTransform: "uppercase",
 			fontWeight: 500,
 			borderWidth: 1,
+			typography: "body",
+			fontSize: "text-sm",
+			letterSpacing: "loose",
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.75rem 2rem",
+				padding: "0.625rem 1.25rem",
+				fontSize: "text-xs"
+			},
+			md: {
+				padding: "0.8125rem 1.75rem",
 				fontSize: "text-sm"
 			},
-			md: { padding: "1rem 2.5rem" },
 			lg: {
-				padding: "1.25rem 3rem",
-				fontSize: "text-lg"
+				padding: "0.9375rem 2.125rem",
+				fontSize: "text-sm"
 			},
 			xl: {
-				padding: "1.625rem 3.75rem",
-				fontSize: "text-xl"
+				padding: "1.0625rem 2.5rem",
+				fontSize: "text-base"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "gradient",
-					stops: ["primary", "accent"],
-					direction: "to-r",
-					foregroundToken: "primaryForeground"
-				},
-				borderRadius: "rounded-lg",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: unsafeAsOpaqueButtonColourToken("primary")
+					},
+					borderRadius: "rounded-xl",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
+				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: parameters.secondaryTreatment === "solid-accent" ? {
+					background: {
+						type: "solid",
+						colorToken: unsafeAsOpaqueButtonColourToken("accent")
+					},
+					borderRadius: "rounded-xl",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
+				} : {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl",
+					border: { widthClass: "border" },
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surfaceAlt" }
+					}] }
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "gradient",
-					stops: ["secondary", "accent"],
-					direction: "to-br",
-					foregroundToken: "primaryForeground"
-				},
-				borderRadius: "rounded-lg",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl",
+					border: { widthClass: "border" }
 				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-xl"
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: unsafeAsOpaqueButtonColourToken("accent")
+				} }
 			}
-		]
-	}
+		}
+	})
 });
 //#endregion
-//#region ../theme-core/src/buttons/personalities/confident-chip.ts
-/**
-* Confident Chip — moderate-radius solid buttons that read as competent and
-* direct. Default for Clear Professional; works for any modern brand voice.
-*/
-const confidentChip = defineButtonPersonality({
-	id: "confident-chip",
-	name: "Confident Chip",
-	description: "Mid-radius solid buttons with a crisp hover.",
+//#region ../theme-core/src/buttons/styles/recipes/defineStaticButtonStyleRecipe.ts
+const emptyParametersSchema = z$1.object({}).strict();
+function defineStaticButtonStyleRecipe(input) {
+	const system = normalizeSystem(input.system);
+	return defineButtonStyleRecipe({
+		id: input.id,
+		accessibilityLabel: input.accessibilityLabel,
+		tags: input.tags,
+		parameterSchema: emptyParametersSchema,
+		defaultParameters: {},
+		controls: [],
+		defineSystem: () => system
+	});
+}
+function normalizeSystem(input) {
+	return {
+		global: buttonGlobalSettingsSchema.parse(input.global),
+		...input.sizes ? { sizes: input.sizes } : {},
+		roles: {
+			primary: normalizeCompleteRole(input.roles.primary),
+			secondary: normalizeCompleteRole(input.roles.secondary),
+			outline: normalizeSupportingRole(input.roles.outline),
+			ghost: normalizeSupportingRole(input.roles.ghost),
+			accent: normalizeSupportingRole(input.roles.accent)
+		}
+	};
+}
+function normalizeCompleteRole(role) {
+	return {
+		kind: "complete",
+		appearance: normalizeAppearance(role.appearance)
+	};
+}
+function normalizeSupportingRole(role) {
+	if (role.kind === "complete") return normalizeCompleteRole(role);
+	return {
+		kind: "derive",
+		from: role.from,
+		...role.overrides ? { overrides: normalizeAppearanceOverrides(role.overrides) } : {}
+	};
+}
+function normalizeAppearance(appearance) {
+	const { background, hoverBackgroundToken, ...rest } = appearance;
+	return {
+		...rest,
+		background: buttonColourTreatmentSchema.parse(background),
+		...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
+	};
+}
+function normalizeAppearanceOverrides(overrides) {
+	const { background, hoverBackgroundToken, ...rest } = overrides;
+	return {
+		...rest,
+		...background ? { background: buttonColourTreatmentSchema.parse(background) } : {},
+		...hoverBackgroundToken ? { hoverBackgroundToken: opaqueButtonColourTokenSchema.parse(hoverBackgroundToken) } : {}
+	};
+}
+//#endregion
+//#region ../theme-core/src/buttons/styles/recipes/staticRecipes.ts
+const softPillRecipe = defineStaticButtonStyleRecipe({
+	id: "soft-pill",
+	accessibilityLabel: "Rounded pill buttons with a gentle hover lift",
 	tags: {
 		tone: "classic",
 		energy: "calm",
-		motion: "standard",
-		era: "modern"
+		motion: "subtle",
+		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
-			shadow: "medium",
+			cornerStyle: "pill",
+			shadow: "low",
 			textTransform: "none",
-			fontWeight: 600,
-			borderWidth: 1,
-			hoverTransform: "none",
+			fontWeight: 500,
+			borderWidth: 2,
+			hoverTransform: "lift",
 			hoverColor: "none"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-md",
-				shadow: {
-					elevation: "medium",
-					softness: "soft",
-					position: "bottom"
-				},
-				effects: {
-					hover: [{
-						effectId: "darken-background",
-						options: { amount: 100 }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.97" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					},
+					effects: {
+						hover: [{
+							effectId: "lift",
+							options: { translateY: "-1px" }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "surface"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "background" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/earth-pill.ts
-/**
-* Earth Pill - warm studio pills with compact, primary-coloured ghost CTAs.
-* Built for grounded editorial wellness styles such as Soft Earth.
-*/
-const earthPill = defineButtonPersonality({
+const earthPillRecipe = defineStaticButtonStyleRecipe({
 	id: "earth-pill",
-	name: "Earth Pill",
-	description: "Compact terracotta pills with quiet primary-coloured ghost CTAs.",
+	accessibilityLabel: "Compact rounded buttons with a quiet hover lift",
 	tags: {
 		tone: "classic",
 		energy: "calm",
 		motion: "subtle",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "pill",
 			shadow: "low",
@@ -1032,119 +1164,222 @@ const earthPill = defineButtonPersonality({
 				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
-				},
-				effects: {
-					hover: [{
-						effectId: "lift",
-						options: { translateY: "-1px" }
-					}, {
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					},
+					effects: {
+						hover: [{
+							effectId: "lift",
+							options: { translateY: "-1px" }
+						}, {
+							effectId: "background-on-hover",
+							options: { colorToken: "accent" }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
+				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "accent" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
+						options: { colorToken: "muted" }
+					}] }
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "muted" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surfaceAlt" }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "none",
+						softness: null,
+						position: "bottom"
+					},
+					sizes: {
+						sm: {
+							padding: "0.25rem 0",
+							fontSize: "text-sm"
+						},
+						md: { padding: "0.375rem 0" },
+						lg: {
+							padding: "0.5rem 0",
+							fontSize: "text-lg"
+						},
+						xl: {
+							padding: "0.625rem 0",
+							fontSize: "text-xl"
+						}
+					}
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				shadow: {
-					elevation: "none",
-					softness: null,
-					position: "bottom"
-				},
-				sizes: {
-					sm: {
-						padding: "0.25rem 0",
-						fontSize: "text-sm"
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
+			}
+		}
+	}
+});
+const confidentChipRecipe = defineStaticButtonStyleRecipe({
+	id: "confident-chip",
+	accessibilityLabel: "Moderately rounded solid buttons with a crisp hover",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		motion: "standard",
+		era: "modern"
+	},
+	system: {
+		global: {
+			cornerStyle: "rounded",
+			shadow: "medium",
+			textTransform: "none",
+			fontWeight: 600,
+			borderWidth: 1,
+			hoverTransform: "none",
+			hoverColor: "none"
+		},
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
 					},
-					md: { padding: "0.375rem 0" },
-					lg: {
-						padding: "0.5rem 0",
-						fontSize: "text-lg"
+					borderRadius: "rounded-md",
+					shadow: {
+						elevation: "medium",
+						softness: "soft",
+						position: "bottom"
 					},
-					xl: {
-						padding: "0.625rem 0",
-						fontSize: "text-xl"
+					effects: {
+						hover: [{
+							effectId: "darken-background",
+							options: { amount: 100 }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.97" }
+						}]
 					}
 				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "surface"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "background" }
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/editorial-link.ts
-/**
-* Editorial Link — all variants are link-style with a growing underline.
-* Default for Warm Editorial and Quiet Luxury; reads as refined and quiet.
-*/
-const editorialLink = defineButtonPersonality({
+const editorialSizes = {
+	sm: { padding: "0.25rem 0" },
+	md: { padding: "0.5rem 0" },
+	lg: { padding: "0.625rem 0" },
+	xl: { padding: "0.75rem 0" }
+};
+const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 	id: "editorial-link",
-	name: "Editorial Link",
-	description: "Link-style with a growing underline. Refined, typographic.",
+	accessibilityLabel: "Flat typographic buttons with an underline treatment",
 	tags: {
 		tone: "minimal",
 		energy: "calm",
 		motion: "subtle",
 		era: "editorial"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "square",
 			textTransform: "none",
@@ -1153,455 +1388,323 @@ const editorialLink = defineButtonPersonality({
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: { padding: "0.25rem 0" },
-					md: { padding: "0.5rem 0" },
-					lg: { padding: "0.625rem 0" },
-					xl: { padding: "0.75rem 0" }
-				},
-				effects: { base: [{
-					effectId: "border-bottom-grow",
-					options: {
-						height: 2,
-						colorToken: "text",
-						origin: "left"
-					}
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 2,
+							colorToken: "text",
+							origin: "left"
+						}
+					}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: { padding: "0.25rem 0" },
-					md: { padding: "0.5rem 0" },
-					lg: { padding: "0.625rem 0" },
-					xl: { padding: "0.75rem 0" }
-				},
-				effects: { base: [{
-					effectId: "border-bottom-grow",
-					options: {
-						height: 1,
-						colorToken: "mutedText",
-						origin: "left"
-					}
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							colorToken: "mutedText",
+							origin: "left"
+						}
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes,
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							colorToken: "accent",
+							origin: "left"
+						}
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: editorialSizes
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: { padding: "0.25rem 0" },
-					md: { padding: "0.5rem 0" },
-					lg: { padding: "0.625rem 0" },
-					xl: { padding: "0.75rem 0" }
-				},
-				effects: { base: [{
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { effects: { base: [{
 					effectId: "border-bottom-grow",
 					options: {
-						height: 1,
+						height: 2,
 						colorToken: "accent",
 						origin: "left"
 					}
-				}] }
-			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: { padding: "0.25rem 0" },
-					md: { padding: "0.5rem 0" },
-					lg: { padding: "0.625rem 0" },
-					xl: { padding: "0.75rem 0" }
-				}
+				}] } }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/flat-ink.ts
-/**
-* Flat Ink — a solid ink primary, a hairline ghost secondary, and a single
-* amber accent climax, all completely flat (no drop shadow) with a modest
-* radius. Reads as grounded, editorial and clinician-precise: the Fulcrum
-* physiotherapy voice. The primary shifts to the secondary (moss) on hover and
-* every variant lifts 2px; the amber accent is meant to be used sparingly as
-* the page's one conversion climax.
-*/
-const flatInk = defineButtonPersonality({
-	id: "flat-ink",
-	name: "Flat Ink",
-	description: "Flat solid-ink primary, hairline ghost secondary, and a single amber accent climax — modest radius, no shadow.",
+const pebbleRecipe = defineStaticButtonStyleRecipe({
+	id: "pebble",
+	accessibilityLabel: "Generously padded pill buttons",
 	tags: {
 		tone: "classic",
 		energy: "calm",
-		motion: "subtle",
-		era: "editorial"
+		motion: "standard",
+		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
+			cornerStyle: "pill",
 			textTransform: "none",
-			fontWeight: 600,
-			borderWidth: 1,
-			typography: "body",
-			letterSpacing: "tight",
-			paddingPreset: "default",
-			hoverTransform: "lift",
+			fontWeight: 500,
+			borderWidth: 2,
+			hoverTransform: "none",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.625rem 1.125rem",
+				padding: "0.625rem 1.75rem",
 				fontSize: "text-sm"
 			},
-			md: { padding: "0.8125rem 1.375rem" },
+			md: { padding: "0.875rem 2.25rem" },
 			lg: {
-				padding: "0.9375rem 1.625rem",
+				padding: "1.125rem 2.75rem",
 				fontSize: "text-lg"
 			},
 			xl: {
-				padding: "1.0625rem 2rem",
+				padding: "1.5rem 3.5rem",
 				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-lg",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}, {
-					effectId: "background-on-hover",
-					options: { colorToken: "secondary" }
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "darken-background",
+						options: { amount: 100 }
+					}] }
+				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "accent" }
+					}] }
+				}
+			},
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-lg",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}, {
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					sizes: {
+						sm: {
+							padding: "0.375rem 0.875rem",
+							fontSize: "text-sm"
+						},
+						md: { padding: "0.5rem 1rem" },
+						lg: {
+							padding: "0.625rem 1.25rem",
+							fontSize: "text-lg"
+						},
+						xl: {
+							padding: "0.75rem 1.5rem",
+							fontSize: "text-xl"
+						}
+					}
+				}
 			},
-			{
-				id: "accent",
-				name: "Accent",
-				enabled: true,
-				priority: 3,
-				background: {
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
 					type: "solid",
 					colorToken: "accent"
-				},
-				borderRadius: "rounded-lg",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "lift",
-					options: { translateY: "-2px" }
-				}] }
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/ink-stamp.ts
-/**
-* Ink Stamp — solid earthy fills with a bordered, hand-stamped block-print
-* feel. Reads as bold and handmade; suits expressive craft brands.
-*/
-const inkStamp = defineButtonPersonality({
-	id: "ink-stamp",
-	name: "Ink Stamp",
-	description: "Hand-stamped block-print buttons with a slight lift on hover.",
+const brushedWashRecipe = defineStaticButtonStyleRecipe({
+	id: "brushed-wash",
+	accessibilityLabel: "Generously padded gradient buttons with soft shadows",
 	tags: {
-		tone: "bold",
+		tone: "classic",
 		energy: "vibrant",
 		motion: "standard",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "rounded",
-			textTransform: "uppercase",
-			fontWeight: 600,
+			shadow: "low",
+			textTransform: "none",
+			fontWeight: 500,
 			borderWidth: 1,
 			hoverTransform: "none",
-			hoverColor: "none",
-			letterSpacing: "loose"
+			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.5rem 1.25rem",
-				fontSize: "text-xs"
-			},
-			md: {
-				padding: "0.75rem 1.75rem",
+				padding: "0.75rem 2rem",
 				fontSize: "text-sm"
 			},
+			md: { padding: "1rem 2.5rem" },
 			lg: {
-				padding: "0.875rem 2.25rem",
-				fontSize: "text-base"
+				padding: "1.25rem 3rem",
+				fontSize: "text-lg"
 			},
 			xl: {
-				padding: "1.125rem 2.75rem",
-				fontSize: "text-lg"
+				padding: "1.625rem 3.75rem",
+				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-md",
-				effects: {
-					hover: [{
-						effectId: "drop-shadow",
-						options: { intensity: "medium" }
-					}, {
-						effectId: "scale-up",
-						options: { scale: "1.02" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "gradient",
+						stops: ["primary", "accent"],
+						direction: "to-r",
+						foregroundToken: "primaryForeground"
+					},
+					borderRadius: "rounded-lg",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: {
-						padding: "0.375rem 0",
-						fontSize: "text-xs"
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "gradient",
+						stops: ["secondary", "accent"],
+						direction: "to-br",
+						foregroundToken: "primaryForeground"
 					},
-					md: {
-						padding: "0.5rem 0",
-						fontSize: "text-sm"
-					},
-					lg: {
-						padding: "0.625rem 0",
-						fontSize: "text-base"
-					},
-					xl: {
-						padding: "0.75rem 0",
-						fontSize: "text-lg"
-					}
-				},
-				effects: { base: [{
-					effectId: "border-bottom-grow",
-					options: {
-						height: 1,
-						colorToken: "accent",
-						origin: "left"
+					borderRadius: "rounded-lg",
+					shadow: {
+						elevation: "low",
+						softness: "soft",
+						position: "bottom"
 					}
-				}] }
-			}
-		]
-	}
-});
-//#endregion
-//#region ../theme-core/src/buttons/personalities/joy-stamp.ts
-/**
-* Joy Stamp — neo-brutalist pills with a hard, brand-coloured offset shadow
-* that collapses as the button presses into it on hover. Authored for the
-* Original Joy site style: a cream "stamp" shadow under the solid primary, and
-* a brown shadow under the cream outline. Reads as bold, warm, and handmade.
-*
-* The coloured offset shadow relies on the per-variant `shadow.colorToken`
-* extension; the press is the shared `press-down` effect, which matches its
-* translate to each variant's own shadow offset.
-*/
-const joyStamp = defineButtonPersonality({
-	id: "joy-stamp",
-	name: "Joy Stamp",
-	description: "Pill buttons with a hard, brand-coloured offset shadow that presses in on hover.",
-	tags: {
-		tone: "bold",
-		energy: "vibrant",
-		motion: "expressive",
-		era: "organic"
-	},
-	buttonSystem: {
-		global: {
-			cornerStyle: "pill",
-			shadow: "high",
-			textTransform: "none",
-			typography: "heading",
-			fontWeight: 700,
-			fontSize: "text-lg",
-			borderWidth: 2,
-			hoverTransform: "none",
-			hoverColor: "none"
-		},
-		sizes: {
-			sm: {
-				padding: "0.625rem 1.25rem",
-				fontSize: "text-base"
+				}
 			},
-			md: {
-				padding: "0.875rem 1.75rem",
-				fontSize: "text-lg"
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			lg: {
-				padding: "1.125rem 2.25rem",
-				fontSize: "text-xl"
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			xl: {
-				padding: "1.25rem 2.75rem",
-				fontSize: "text-2xl"
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		},
-		variants: [{
-			id: "primary",
-			name: "Primary",
-			enabled: true,
-			priority: 1,
-			background: {
-				type: "solid",
-				colorToken: "primary"
-			},
-			borderRadius: "rounded-full",
-			shadow: {
-				elevation: "high",
-				softness: "hard",
-				position: "bottom-right",
-				colorToken: "text"
-			},
-			effects: { hover: [{ effectId: "press-down" }] }
-		}, {
-			id: "secondary",
-			name: "Secondary",
-			enabled: true,
-			priority: 2,
-			background: {
-				type: "surface",
-				role: "link"
-			},
-			borderRadius: "rounded-full",
-			border: { widthClass: "border-2" },
-			shadow: {
-				elevation: "high",
-				softness: "hard",
-				position: "bottom-right",
-				colorToken: "secondary"
-			},
-			effects: { hover: [{ effectId: "press-down" }] }
-		}]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/ornate-ritual.ts
-/**
-* Ornate Ritual — framed, ceremonial buttons with jewel-toned fills and
-* deliberate spacing. Designed for music, ceremony, and soulful event sites.
-*/
-const ornateRitual = defineButtonPersonality({
-	id: "ornate-ritual",
-	name: "Ornate Ritual",
-	description: "Ceremonial framed buttons with jewel-toned fills and quiet color-change hover states.",
+const inkStampRecipe = defineStaticButtonStyleRecipe({
+	id: "ink-stamp",
+	accessibilityLabel: "Uppercase block-print buttons with a playful hover",
 	tags: {
-		tone: "classic",
+		tone: "bold",
 		energy: "vibrant",
-		motion: "subtle",
+		motion: "standard",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
@@ -1613,655 +1716,656 @@ const ornateRitual = defineButtonPersonality({
 		},
 		sizes: {
 			sm: {
-				padding: "0.5625rem 1.25rem",
+				padding: "0.5rem 1.25rem",
 				fontSize: "text-xs"
 			},
 			md: {
 				padding: "0.75rem 1.75rem",
-				fontSize: "text-xs"
+				fontSize: "text-sm"
 			},
 			lg: {
 				padding: "0.875rem 2.25rem",
-				fontSize: "text-sm"
+				fontSize: "text-base"
 			},
 			xl: {
-				padding: "1rem 2.75rem",
-				fontSize: "text-base"
+				padding: "1.125rem 2.75rem",
+				fontSize: "text-lg"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: {
-					hover: [{
-						effectId: "background-on-hover",
-						options: { colorToken: "primary-100" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-md",
+					effects: {
+						hover: [{
+							effectId: "drop-shadow",
+							options: { intensity: "medium" }
+						}, {
+							effectId: "scale-up",
+							options: { scale: "1.02" }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "secondary"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
-			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-md",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "muted" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-none",
-				sizes: {
-					sm: {
-						padding: "0.375rem 0",
-						fontSize: "text-xs"
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					md: {
-						padding: "0.5rem 0",
-						fontSize: "text-sm"
+					borderRadius: "rounded-md",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
+			},
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					lg: {
-						padding: "0.625rem 0",
-						fontSize: "text-base"
+					borderRadius: "rounded-none",
+					sizes: {
+						sm: {
+							padding: "0.375rem 0",
+							fontSize: "text-xs"
+						},
+						md: {
+							padding: "0.5rem 0",
+							fontSize: "text-sm"
+						},
+						lg: {
+							padding: "0.625rem 0",
+							fontSize: "text-base"
+						},
+						xl: {
+							padding: "0.75rem 0",
+							fontSize: "text-lg"
+						}
 					},
-					xl: {
-						padding: "0.75rem 0",
-						fontSize: "text-lg"
-					}
-				},
-				effects: { base: [{
-					effectId: "border-bottom-grow",
-					options: {
-						height: 1,
-						colorToken: "accent",
-						origin: "left"
-					}
-				}] }
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							colorToken: "accent",
+							origin: "left"
+						}
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/pebble.ts
-/**
-* Pebble — large pill primaries with generous padding. Reads as spa-luxurious
-* and natural; pairs well with wellness/yoga/dance brands.
-*/
-const pebble = defineButtonPersonality({
-	id: "pebble",
-	name: "Pebble",
-	description: "Generous pill buttons with a quiet colour-softening hover.",
+const flatInkRecipe = defineStaticButtonStyleRecipe({
+	id: "flat-ink",
+	accessibilityLabel: "Flat rounded buttons with arrow affordances",
 	tags: {
 		tone: "classic",
 		energy: "calm",
-		motion: "standard",
-		era: "organic"
+		motion: "subtle",
+		era: "editorial"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "pill",
+			cornerStyle: "rounded",
 			textTransform: "none",
-			fontWeight: 500,
-			borderWidth: 2,
-			hoverTransform: "none",
+			fontWeight: 600,
+			borderWidth: 1,
+			typography: "body",
+			letterSpacing: "tight",
+			paddingPreset: "default",
+			hoverTransform: "lift",
 			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
-				padding: "0.625rem 1.75rem",
+				padding: "0.625rem 1.125rem",
 				fontSize: "text-sm"
 			},
-			md: { padding: "0.875rem 2.25rem" },
+			md: { padding: "0.8125rem 1.375rem" },
 			lg: {
-				padding: "1.125rem 2.75rem",
+				padding: "0.9375rem 1.625rem",
 				fontSize: "text-lg"
 			},
 			xl: {
-				padding: "1.5rem 3.5rem",
+				padding: "1.0625rem 2rem",
 				fontSize: "text-xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "darken-background",
-					options: { amount: 100 }
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-lg",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "lift",
+						options: { translateY: "-2px" }
+					}, {
+						effectId: "background-on-hover",
+						options: { colorToken: "secondary" }
+					}] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "accent" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "lift",
+						options: { translateY: "-2px" }
+					}, {
+						effectId: "background-on-hover",
+						options: { colorToken: "surfaceAlt" }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-lg",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "lift",
+						options: { translateY: "-2px" }
+					}, {
+						effectId: "background-on-hover",
+						options: { colorToken: "surfaceAlt" }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				sizes: {
-					sm: {
-						padding: "0.375rem 0.875rem",
-						fontSize: "text-sm"
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
 					},
-					md: { padding: "0.5rem 1rem" },
-					lg: {
-						padding: "0.625rem 1.25rem",
-						fontSize: "text-lg"
+					borderRadius: "rounded-lg",
+					effects: { hover: [{
+						effectId: "lift",
+						options: { translateY: "-2px" }
+					}] }
+				}
+			},
+			accent: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "accent"
 					},
-					xl: {
-						padding: "0.75rem 1.5rem",
-						fontSize: "text-xl"
-					}
+					borderRadius: "rounded-lg",
+					affordance: { iconId: "ArrowRight" },
+					effects: { hover: [{
+						effectId: "lift",
+						options: { translateY: "-2px" }
+					}] }
 				}
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/quiet-arrow.ts
-/**
-* Quiet Arrow — wide, flat editorial buttons for grounded service businesses.
-* Primary and secondary keep stable semantic colours; surrounding surfaces are
-* responsible for contrast rather than reversing the button roles.
-*/
-const quietArrow = defineButtonPersonality({
-	id: "quiet-arrow",
-	name: "Quiet Arrow",
-	description: "Wide, flat arrow buttons with a solid primary and a primary-colour outlined secondary.",
+const showtimePillRecipe = defineStaticButtonStyleRecipe({
+	id: "showtime-pill",
+	accessibilityLabel: "Bold uppercase pill buttons with playful movement",
 	tags: {
-		tone: "classic",
-		energy: "calm",
-		motion: "subtle",
-		era: "editorial"
+		tone: "bold",
+		energy: "vibrant",
+		motion: "expressive",
+		era: "modern"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "rounded",
+			cornerStyle: "pill",
+			shadow: "low",
 			textTransform: "uppercase",
-			fontWeight: 500,
-			borderWidth: 1,
+			fontWeight: 700,
+			borderWidth: 2,
+			hoverTransform: "lift",
+			hoverColor: "darken",
 			typography: "body",
-			fontSize: "text-sm",
-			letterSpacing: "loose",
-			hoverTransform: "none",
-			hoverColor: "none"
+			paddingPreset: "spacious",
+			italic: false
 		},
 		sizes: {
 			sm: {
 				padding: "0.625rem 1.25rem",
-				fontSize: "text-xs"
+				fontSize: "0.875rem"
 			},
 			md: {
-				padding: "0.8125rem 1.75rem",
-				fontSize: "text-sm"
+				padding: "0.875rem 1.75rem",
+				fontSize: "1rem"
 			},
 			lg: {
-				padding: "0.9375rem 2.125rem",
-				fontSize: "text-sm"
+				padding: "1.125rem 2.25rem",
+				fontSize: "1.125rem"
 			},
 			xl: {
-				padding: "1.0625rem 2.5rem",
-				fontSize: "text-base"
+				padding: "1.125rem 2.25rem",
+				fontSize: "1.125rem"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-xl",
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "darken-background",
-					options: { amount: 100 }
-				}] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "pop" }] }
+				}
+			},
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{ effectId: "pop" }] }
+				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl",
-				border: { widthClass: "border" },
-				affordance: { iconId: "ArrowRight" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surfaceAlt" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "background" }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl",
-				border: { widthClass: "border" }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-xl"
+			accent: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "secondary"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "pop" }] }
+				}
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/showtime-pill.ts
-/**
-* Showtime Pill — bold, spacious, fully rounded buttons with playful pop
-* motion. Suits energetic schools, performers, festivals, and community brands
-* that need calls to action to feel loud without becoming visually chaotic.
-*/
-const showtimePill = defineButtonPersonality({
-	id: "showtime-pill",
-	name: "Showtime Pill",
-	description: "Bold pill buttons with uppercase labels, generous padding, and a playful pop.",
+const joyStampRecipe = defineStaticButtonStyleRecipe({
+	id: "joy-stamp",
+	accessibilityLabel: "Bold pill buttons with a hard offset shadow",
 	tags: {
 		tone: "bold",
 		energy: "vibrant",
 		motion: "expressive",
-		era: "modern"
+		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
 			cornerStyle: "pill",
-			shadow: "low",
-			textTransform: "uppercase",
+			shadow: "high",
+			textTransform: "none",
+			typography: "heading",
 			fontWeight: 700,
+			fontSize: "text-lg",
 			borderWidth: 2,
-			hoverTransform: "lift",
-			hoverColor: "darken",
-			typography: "body",
-			paddingPreset: "spacious",
-			italic: false
+			hoverTransform: "none",
+			hoverColor: "none"
 		},
 		sizes: {
 			sm: {
 				padding: "0.625rem 1.25rem",
-				fontSize: "0.875rem"
+				fontSize: "text-base"
 			},
 			md: {
 				padding: "0.875rem 1.75rem",
-				fontSize: "1rem"
+				fontSize: "text-lg"
 			},
 			lg: {
 				padding: "1.125rem 2.25rem",
-				fontSize: "1.125rem"
+				fontSize: "text-xl"
 			},
 			xl: {
-				padding: "1.125rem 2.25rem",
-				fontSize: "1.125rem"
+				padding: "1.25rem 2.75rem",
+				fontSize: "text-2xl"
 			}
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{ effectId: "pop" }] }
-			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{ effectId: "pop" }] }
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-full",
+					shadow: {
+						elevation: "high",
+						softness: "hard",
+						position: "bottom-right",
+						colorToken: "text"
+					},
+					effects: { hover: [{ effectId: "press-down" }] }
+				}
 			},
-			{
-				id: "hero",
-				name: "Hero",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "secondary"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{ effectId: "pop" }] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					border: { widthClass: "border-2" },
+					shadow: {
+						elevation: "high",
+						softness: "hard",
+						position: "bottom-right",
+						colorToken: "secondary"
+					},
+					effects: { hover: [{ effectId: "press-down" }] }
+				}
 			},
-			{
-				id: "header",
-				name: "Header",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "solid",
-					colorToken: "background"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "derive",
+				from: "secondary"
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "background" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-full",
+					effects: { hover: [{ effectId: "press-down" }] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
-//#endregion
-//#region ../theme-core/src/buttons/personalities/soft-pill.ts
-/**
-* Soft Pill — rounded-full pill buttons with a hover lift. The default for
-* Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
-*/
-const softPill = defineButtonPersonality({
-	id: "soft-pill",
-	name: "Soft Pill",
-	description: "Rounded pills with a gentle lift on hover. Quietly modern.",
+const ornateRitualRecipe = defineStaticButtonStyleRecipe({
+	id: "ornate-ritual",
+	accessibilityLabel: "Uppercase framed buttons with restrained movement",
 	tags: {
 		tone: "classic",
-		energy: "calm",
+		energy: "vibrant",
 		motion: "subtle",
 		era: "organic"
 	},
-	buttonSystem: {
+	system: {
 		global: {
-			cornerStyle: "pill",
-			shadow: "low",
-			textTransform: "none",
-			fontWeight: 500,
-			borderWidth: 2,
-			hoverTransform: "lift",
-			hoverColor: "none"
+			cornerStyle: "rounded",
+			textTransform: "uppercase",
+			fontWeight: 600,
+			borderWidth: 1,
+			hoverTransform: "none",
+			hoverColor: "none",
+			letterSpacing: "loose"
 		},
-		variants: [
-			{
-				id: "primary",
-				name: "Primary",
-				enabled: true,
-				priority: 1,
-				background: {
-					type: "solid",
-					colorToken: "primary"
-				},
-				borderRadius: "rounded-full",
-				shadow: {
-					elevation: "low",
-					softness: "soft",
-					position: "bottom"
-				},
-				effects: {
-					hover: [{
-						effectId: "lift",
-						options: { translateY: "-1px" }
-					}],
-					active: [{
-						effectId: "scale-down",
-						options: { scale: "0.98" }
-					}]
+		sizes: {
+			sm: {
+				padding: "0.5625rem 1.25rem",
+				fontSize: "text-xs"
+			},
+			md: {
+				padding: "0.75rem 1.75rem",
+				fontSize: "text-xs"
+			},
+			lg: {
+				padding: "0.875rem 2.25rem",
+				fontSize: "text-sm"
+			},
+			xl: {
+				padding: "1rem 2.75rem",
+				fontSize: "text-base"
+			}
+		},
+		roles: {
+			primary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "primary"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: {
+						hover: [{
+							effectId: "background-on-hover",
+							options: { colorToken: "primary-100" }
+						}],
+						active: [{
+							effectId: "scale-down",
+							options: { scale: "0.98" }
+						}]
+					}
 				}
 			},
-			{
-				id: "secondary",
-				name: "Secondary",
-				enabled: true,
-				priority: 2,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border-2" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			secondary: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "solid",
+						colorToken: "secondary"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "surface" }
+					}] }
+				}
 			},
-			{
-				id: "outline",
-				name: "Outline",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				border: { widthClass: "border" },
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			outline: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-md",
+					border: { widthClass: "border" },
+					effects: { hover: [{
+						effectId: "background-on-hover",
+						options: { colorToken: "muted" }
+					}] }
+				}
 			},
-			{
-				id: "ghost",
-				name: "Ghost",
-				enabled: true,
-				priority: 3,
-				background: {
-					type: "surface",
-					role: "link"
-				},
-				borderRadius: "rounded-full",
-				effects: { hover: [{
-					effectId: "background-on-hover",
-					options: { colorToken: "surface" }
-				}] }
+			ghost: {
+				kind: "complete",
+				appearance: {
+					background: {
+						type: "surface",
+						role: "link"
+					},
+					borderRadius: "rounded-none",
+					sizes: {
+						sm: {
+							padding: "0.375rem 0",
+							fontSize: "text-xs"
+						},
+						md: {
+							padding: "0.5rem 0",
+							fontSize: "text-sm"
+						},
+						lg: {
+							padding: "0.625rem 0",
+							fontSize: "text-base"
+						},
+						xl: {
+							padding: "0.75rem 0",
+							fontSize: "text-lg"
+						}
+					},
+					effects: { base: [{
+						effectId: "border-bottom-grow",
+						options: {
+							height: 1,
+							colorToken: "accent",
+							origin: "left"
+						}
+					}] }
+				}
+			},
+			accent: {
+				kind: "derive",
+				from: "primary",
+				overrides: { background: {
+					type: "solid",
+					colorToken: "accent"
+				} }
 			}
-		]
+		}
 	}
 });
 //#endregion
-//#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
-const solidSecondary = {
-	id: "secondary",
-	name: "Secondary",
-	enabled: true,
-	priority: 2,
-	background: {
-		type: "solid",
-		colorToken: unsafeAsOpaqueButtonColourToken("secondary")
-	},
-	borderRadius: "rounded-full",
-	shadow: {
-		elevation: "none",
-		softness: null,
-		position: "bottom"
-	},
-	effects: {
-		hover: [{
-			effectId: "background-on-hover-alpha",
-			options: {
-				colorToken: "secondary",
-				opacity: 88
-			}
-		}],
-		active: [{
-			effectId: "scale-down",
-			options: { scale: "0.98" }
-		}]
-	}
-};
-//#endregion
-//#region ../theme-core/src/buttons/personalities/index.ts
-const buttonPersonalities = [
-	softPill,
-	defineButtonPersonality({
-		id: "two-tone-pill",
-		name: "Two-tone Pill",
-		description: "Rounded pills with distinct solid primary and secondary brand colours.",
-		tags: softPill.tags,
-		buttonSystem: {
-			...softPill.buttonSystem,
-			variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
-		}
-	}),
-	earthPill,
-	confidentChip,
-	editorialLink,
-	pebble,
-	inkStamp,
-	flatInk,
-	brushedWash,
-	showtimePill,
-	joyStamp,
-	ornateRitual,
-	quietArrow
+//#region ../theme-core/src/buttons/styles/registry.ts
+const buttonStyleRecipes = [
+	softPillRecipe,
+	earthPillRecipe,
+	confidentChipRecipe,
+	editorialLinkRecipe,
+	pebbleRecipe,
+	inkStampRecipe,
+	flatInkRecipe,
+	brushedWashRecipe,
+	showtimePillRecipe,
+	joyStampRecipe,
+	ornateRitualRecipe,
+	quietArrowRecipe
 ];
-new Map(buttonPersonalities.map((p) => [p.id, p]));
-buttonPersonalities.map((personality) => ({
-	id: personality.id,
-	name: personality.name,
-	description: personality.description,
-	category: presetCategory(personality),
-	buttonSystem: personality.buttonSystem,
-	compatibility: {
-		...personality.tags.tone ? { tones: [personality.tags.tone] } : {},
-		...personality.tags.energy ? { energies: [personality.tags.energy] } : {}
+const recipesById = new Map(buttonStyleRecipes.map((recipe) => [recipe.id, recipe]));
+function findButtonStyleRecipe(id) {
+	const recipe = recipesById.get(id);
+	if (recipe === void 0) throw new Error(`Button style registry is missing known style ${id}`);
+	return recipe;
+}
+function resolveButtonStyleSelection(selection) {
+	switch (selection.styleId) {
+		case "soft-pill": return resolveButtonStyleRecipe(softPillRecipe, selection.parameters);
+		case "earth-pill": return resolveButtonStyleRecipe(earthPillRecipe, selection.parameters);
+		case "confident-chip": return resolveButtonStyleRecipe(confidentChipRecipe, selection.parameters);
+		case "editorial-link": return resolveButtonStyleRecipe(editorialLinkRecipe, selection.parameters);
+		case "pebble": return resolveButtonStyleRecipe(pebbleRecipe, selection.parameters);
+		case "ink-stamp": return resolveButtonStyleRecipe(inkStampRecipe, selection.parameters);
+		case "flat-ink": return resolveButtonStyleRecipe(flatInkRecipe, selection.parameters);
+		case "brushed-wash": return resolveButtonStyleRecipe(brushedWashRecipe, selection.parameters);
+		case "showtime-pill": return resolveButtonStyleRecipe(showtimePillRecipe, selection.parameters);
+		case "joy-stamp": return resolveButtonStyleRecipe(joyStampRecipe, selection.parameters);
+		case "ornate-ritual": return resolveButtonStyleRecipe(ornateRitualRecipe, selection.parameters);
+		case "quiet-arrow": return resolveButtonStyleRecipe(quietArrowRecipe, selection.parameters);
 	}
-}));
-function presetCategory(personality) {
-	switch (personality.tags.era) {
+}
+function defaultButtonStyleSelectionFor(styleId) {
+	return {
+		styleId,
+		parameters: findButtonStyleRecipe(styleId).defaultParameters
+	};
+}
+if (buttonStyleRecipes.map((recipe) => recipe.id).length !== BUTTON_STYLE_IDS.length || BUTTON_STYLE_IDS.some((id) => !recipesById.has(id))) throw new Error("Button style registry and ButtonStyleId catalog are out of sync");
+buttonStyleRecipes.map((recipe) => {
+	const resolved = resolveButtonStyleSelection(defaultButtonStyleSelectionFor(recipe.id));
+	if (resolved.kind === "error") throw new Error(`Invalid registered button style ${recipe.id}: ${resolved.error.issues.join(", ")}`);
+	return {
+		id: recipe.id,
+		name: recipe.accessibilityLabel,
+		description: recipe.accessibilityLabel,
+		category: presetCategory(recipe),
+		buttonSystem: resolved.buttonSystem,
+		compatibility: {
+			...recipe.tags.tone ? { tones: [recipe.tags.tone] } : {},
+			...recipe.tags.energy ? { energies: [recipe.tags.energy] } : {}
+		}
+	};
+});
+function presetCategory(recipe) {
+	switch (recipe.tags.era) {
 		case "retro": return "retro";
 		case "editorial": return "minimal";
 		case "organic": return "artistic";
-		case "modern": return personality.tags.tone === "bold" ? "modern" : "technical";
+		case "modern": return recipe.tags.tone === "bold" ? "modern" : "technical";
 		case "technical": return "technical";
 		case void 0: return "modern";
 	}