@riverbankcms/sdk 0.111.0 → 0.119.0

package/dist/server/page-converter.mjs

@@ -2715,151 +2715,6 @@ z$1.discriminatedUnion("kind", [
 	})
 ]);
 //#endregion
-//#region ../theme-core/src/surfaces/foregroundContract.ts
-const SURFACE_FOREGROUND_CSS_VARS = {
-	text: "--rb-surface-text-color",
-	heading: "--rb-surface-heading-color",
-	link: "--rb-surface-link-color",
-	supporting: "--rb-surface-supporting-color"
-};
-const DEFAULT_SURFACE_TEXT_COLOR = "rgb(var(--tb-text, 17 24 39))";
-const DEFAULT_ROLE_FALLBACKS = {
-	text: DEFAULT_SURFACE_TEXT_COLOR,
-	heading: DEFAULT_SURFACE_TEXT_COLOR,
-	link: "rgb(var(--tb-primary, var(--tb-text, 17 24 39)))",
-	supporting: "rgb(var(--tb-mutedText, 100 116 139))"
-};
-function requireSurfaceColorValue(role, value) {
-	const normalized = value.trim();
-	if (normalized.length === 0) throw new RangeError(`Surface foreground ${role} must be a non-empty CSS color.`);
-	return normalized;
-}
-function completeSurfaceForegrounds(input) {
-	const text = requireSurfaceColorValue("text", input.text);
-	return {
-		text,
-		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
-		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
-		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
-	};
-}
-function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
-	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
-	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
-	if (role === "text") return `var(${roleVariable}, ${fallback})`;
-	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
-}
-function surfaceForegroundValueWithOpacity(role, opacityPercent) {
-	if (!Number.isFinite(opacityPercent) || opacityPercent < 0 || opacityPercent > 100) throw new RangeError("Surface foreground opacity must be between 0 and 100.");
-	return `color-mix(in srgb, ${surfaceForegroundValue(role)} ${opacityPercent}%, transparent)`;
-}
-function surfaceForegroundStyle(input) {
-	const foregrounds = completeSurfaceForegrounds(input);
-	return {
-		color: foregrounds.text,
-		[SURFACE_FOREGROUND_CSS_VARS.text]: foregrounds.text,
-		[SURFACE_FOREGROUND_CSS_VARS.heading]: foregrounds.heading,
-		[SURFACE_FOREGROUND_CSS_VARS.link]: foregrounds.link,
-		[SURFACE_FOREGROUND_CSS_VARS.supporting]: foregrounds.supporting
-	};
-}
-//#endregion
-//#region ../theme-core/src/utils/colorStyles.ts
-const COLOR_VAR_PREFIX = "--tb-";
-function parseToken(source) {
-	const parts = parseColorTokenParts(source);
-	if (parts.kind === "raw") return {
-		token: source,
-		raw: parts.value
-	};
-	if (parts.kind === "invalid") return { token: source };
-	return {
-		token: parts.token,
-		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
-	};
-}
-const SURFACE_TEXT_ROLE_BY_TOKEN = {
-	text: "text",
-	heading: "heading",
-	mutedText: "supporting"
-};
-function surfaceRoleForTextToken(token) {
-	return Object.prototype.hasOwnProperty.call(SURFACE_TEXT_ROLE_BY_TOKEN, token) ? SURFACE_TEXT_ROLE_BY_TOKEN[token] : null;
-}
-/**
-* Converts a theme color token to a CSS rgb value.
-* This is the primary function for applying theme colors to CSS properties.
-*
-* @param token - Theme color token (semantic, with opacity, or raw)
-* @returns CSS color value (rgb with optional alpha, or raw CSS value)
-*
-* @example
-* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
-* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
-* rgbColorValue('raw:transparent') // => 'transparent'
-*/
-function rgbColorValue(token) {
-	const { token: baseToken, opacityPercent, raw } = parseToken(token);
-	if (raw) return raw;
-	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
-}
-/**
-* Creates a backgroundColor style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with backgroundColor
-*/
-function backgroundColorStyle(token) {
-	return { backgroundColor: rgbColorValue(token) };
-}
-/**
-* Creates a text color style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with color
-*/
-function textColorStyle(token) {
-	const parsed = parseToken(token);
-	const surfaceRole = parsed.raw ? null : surfaceRoleForTextToken(parsed.token);
-	if (surfaceRole) return { color: parsed.opacityPercent === void 0 ? surfaceForegroundValue(surfaceRole) : surfaceForegroundValueWithOpacity(surfaceRole, parsed.opacityPercent) };
-	return { color: rgbColorValue(token) };
-}
-/**
-* Creates a border color style object from a theme token.
-*
-* @param token - Theme color token
-* @returns CSSProperties with borderColor
-*/
-function borderColorStyle(token) {
-	return { borderColor: rgbColorValue(token) };
-}
-/**
-* Merges multiple CSSProperties objects into a single object.
-* Later styles override earlier ones. Undefined values are filtered out.
-* Returns undefined if the merged result is empty.
-*
-* @param styles - Variable number of CSSProperties objects (can be undefined)
-* @returns Merged CSSProperties object, or undefined if empty
-*
-* @example
-* mergeStyles(
-*   backgroundColorStyle('surface'),
-*   textColorStyle('text'),
-*   borderColorStyle('border')
-* )
-* // => { backgroundColor: '...', color: '...', borderColor: '...' }
-*/
-function mergeStyles(...styles) {
-	const merged = {};
-	for (const style of styles) {
-		if (!style) continue;
-		Object.assign(merged, style);
-	}
-	return Object.keys(merged).length ? merged : void 0;
-}
-//#endregion
 //#region ../theme-core/src/lib/media.ts
 const hotspotSchema$1 = z.object({
 	x: z.number().min(0).max(1),
@@ -2917,111 +2772,6 @@ const mediaSchema$1 = z.object({
 	transform: transformSchema$1.optional()
 });
 //#endregion
-//#region ../theme-core/src/buttons/effectClassification.ts
-/**
-* Exhaustive live policy for every registered effect id.
-*
-* The resolver consumes the transition payload directly, so adding an effect
-* cannot update classification without also defining its runtime behavior.
-*/
-const BUTTON_EFFECT_POLICIES = {
-	"darken-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "darker"
-		}
-	},
-	"lighten-background": {
-		classification: "colour-transition",
-		transition: {
-			kind: "adjust-shade",
-			direction: "lighter"
-		}
-	},
-	"background-on-hover": {
-		classification: "colour-transition",
-		transition: { kind: "replace-background" }
-	},
-	"background-on-hover-alpha": {
-		classification: "unsupported-colour",
-		reason: "alpha_requires_surface"
-	},
-	"fade-background": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"opacity-reduce": {
-		classification: "unsupported-colour",
-		reason: "changes_element_opacity"
-	},
-	"gradient-text": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"text-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_foreground"
-	},
-	"border-color-change": {
-		classification: "unsupported-colour",
-		reason: "changes_border"
-	},
-	"aurora-glow": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"cosmic-stardust": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"animated-gradient-border-fill": {
-		classification: "unsupported-background-overlay",
-		reason: "unresolved_background_overlay"
-	},
-	"nav-underline": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-base": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-hover": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"nav-frosted-active": {
-		classification: "not-button",
-		reason: "not_button_effect"
-	},
-	"animated-gradient": { classification: "non-colour" },
-	"border-glow": { classification: "non-colour" },
-	"drop-shadow": { classification: "non-colour" },
-	"inner-shadow": { classification: "non-colour" },
-	"neumorphic-shadow": { classification: "non-colour" },
-	"outer-glow": { classification: "non-colour" },
-	"retro-3d-shadow": { classification: "non-colour" },
-	"scale-up": { classification: "non-colour" },
-	"scale-down": { classification: "non-colour" },
-	lift: { classification: "non-colour" },
-	"press-down": { classification: "non-colour" },
-	pop: { classification: "non-colour" },
-	"border-bottom-grow": { classification: "non-colour" },
-	"sketchy-border": { classification: "non-colour" },
-	"pulse-animation": { classification: "non-colour" }
-};
-function getButtonEffectPolicy(effectId) {
-	return Object.prototype.hasOwnProperty.call(BUTTON_EFFECT_POLICIES, effectId) ? BUTTON_EFFECT_POLICIES[effectId] : null;
-}
-function classifyButtonEffectId(effectId) {
-	return getButtonEffectPolicy(effectId)?.classification ?? "unknown";
-}
-//#endregion
 //#region ../theme-core/src/buttons/types.ts
 /**
 * Standard semantic variant roles a theme exposes.
@@ -3038,6 +2788,13 @@ const VARIANT_ROLES = [
 	"tertiary",
 	"accent"
 ];
+/**
+* Canonical persisted/CSS-safe button variant identifier.
+*
+* IDs become class selectors, so keep the contract deliberately narrower than
+* an arbitrary string and shared with every authoring/runtime boundary.
+*/
+const buttonVariantIdSchema = z$1.string().min(1).max(50).regex(/^[a-z0-9-]+$/, "Button variant IDs may contain lowercase letters, numbers, and hyphens only");
 function parseOpaqueButtonColourToken(value) {
 	const token = parseThemeColorToken(value);
 	if (token === null) return null;
@@ -3052,6 +2809,109 @@ const opaqueButtonColourTokenSchema = themeColorTokenSchema.refine((value) => pa
 	if (token === null) throw new Error("Invariant: opaque button token passed its schema");
 	return token;
 });
+const buttonShadeAmountSchema = z$1.number().finite().min(0).max(900).multipleOf(100);
+const buttonShadowIntensitySchema = z$1.enum([
+	"subtle",
+	"medium",
+	"strong"
+]);
+/**
+* The complete persisted button-effect contract.
+*
+* Navigation has its own generic interactive-effect model. Button variants use
+* this closed union so unsupported effect IDs, unknown option keys, and unsafe
+* CSS values cannot become representable after the schema boundary.
+*/
+const buttonEffectApplicationSchema = z$1.discriminatedUnion("effectId", [
+	z$1.strictObject({
+		effectId: z$1.literal("darken-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lighten-background"),
+		options: z$1.strictObject({ amount: buttonShadeAmountSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("background-on-hover"),
+		options: z$1.strictObject({ colorToken: opaqueButtonColourTokenSchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("animated-gradient"),
+		options: z$1.strictObject({ direction: z$1.enum(["horizontal", "vertical"]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("drop-shadow"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("inner-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("neumorphic-shadow"),
+		options: z$1.strictObject({
+			mode: z$1.enum(["raised", "pressed"]).optional(),
+			intensity: buttonShadowIntensitySchema.optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("retro-3d-shadow"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-up"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"1.02",
+			"1.03",
+			"1.05",
+			"1.10"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("scale-down"),
+		options: z$1.strictObject({ scale: z$1.enum([
+			"0.90",
+			"0.95",
+			"0.97",
+			"0.98"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("lift"),
+		options: z$1.strictObject({ amount: z$1.enum([
+			"0.25",
+			"0.5",
+			"1"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("press-down"),
+		options: z$1.strictObject({}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("pop"),
+		options: z$1.strictObject({ intensity: z$1.enum([
+			"subtle",
+			"medium",
+			"dramatic"
+		]).optional() }).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("border-bottom-grow"),
+		options: z$1.strictObject({
+			height: z$1.union([z$1.literal(1), z$1.literal(2)]).optional(),
+			origin: z$1.enum([
+				"left",
+				"center",
+				"right"
+			]).optional()
+		}).optional()
+	}),
+	z$1.strictObject({
+		effectId: z$1.literal("sketchy-border"),
+		options: z$1.strictObject({ intensity: buttonShadowIntensitySchema.optional() }).optional()
+	})
+]);
 const cornerStyleSchema = z$1.enum([
 	"square",
 	"rounded",
@@ -3086,13 +2946,7 @@ const hoverTransformSchema = z$1.enum([
 	"scale",
 	"press"
 ]);
-const hoverColorSchema = z$1.enum([
-	"none",
-	"brighten",
-	"darken",
-	"saturate",
-	"token"
-]);
+z$1.enum(["none", "token"]);
 const buttonPaddingPresetSchema = z$1.enum([
 	"compact",
 	"default",
@@ -3153,7 +3007,7 @@ const buttonSizesSchema = z$1.object({
 	lg,
 	xl: xl ?? lg
 }));
-const canonicalButtonGlobalSettingsSchema = z$1.object({
+const buttonGlobalSettingsBaseSchema = z$1.strictObject({
 	cornerStyle: cornerStyleSchema,
 	cornerRadius: z$1.number().min(0).max(24).optional(),
 	/**
@@ -3166,30 +3020,23 @@ const canonicalButtonGlobalSettingsSchema = z$1.object({
 	shadow: shadowSizeSchema.optional(),
 	textTransform: textTransformSchema,
 	fontWeight: fontWeightSchema,
-	/**
-	* @deprecated Set per-variant via `variant.border.widthClass` instead.
-	* Schema field is preserved so existing presets parse; the value is unread
-	* by the current generator and will be removed once the legacy
-	* `primitives/content/components/Button.tsx` slot exports are deleted.
-	*/
-	borderWidth: z$1.union([
-		z$1.literal(1),
-		z$1.literal(2),
-		z$1.literal(3)
-	]),
 	typography: buttonTypographySchema.optional(),
 	fontSize: z$1.string().optional(),
 	letterSpacing: letterSpacingSchema.optional(),
 	italic: z$1.boolean().optional(),
 	paddingPreset: buttonPaddingPresetSchema.optional(),
 	hoverTransform: hoverTransformSchema,
-	hoverColor: hoverColorSchema,
-	hoverColorToken: opaqueButtonColourTokenSchema.optional(),
 	gradientStyle: gradientStyleSchema.optional(),
 	gradientAngle: z$1.number().min(0).max(360).optional(),
 	gradientSharpness: gradientSharpnessSchema.optional()
 });
-const buttonGlobalSettingsSchema = z$1.preprocess(normalizeLegacyButtonGlobalInput, canonicalButtonGlobalSettingsSchema);
+const buttonGlobalSettingsSchema = z$1.discriminatedUnion("hoverColor", [buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("none"),
+	hoverColorToken: z$1.never().optional()
+}), buttonGlobalSettingsBaseSchema.extend({
+	hoverColor: z$1.literal("token"),
+	hoverColorToken: opaqueButtonColourTokenSchema
+})]);
 const gradientDirectionSchema$1 = z$1.enum([
 	"to-r",
 	"to-l",
@@ -3201,11 +3048,11 @@ const gradientDirectionSchema$1 = z$1.enum([
 	"to-bl"
 ]);
 const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("solid"),
 		colorToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("gradient"),
 		stops: z$1.array(opaqueButtonColourTokenSchema).min(2).transform((stops) => {
 			const [first, second, ...rest] = stops;
@@ -3219,19 +3066,15 @@ const buttonColourTreatmentSchema = z$1.discriminatedUnion("type", [
 		direction: gradientDirectionSchema$1,
 		foregroundToken: opaqueButtonColourTokenSchema
 	}),
-	z$1.object({
+	z$1.strictObject({
 		type: z$1.literal("surface"),
 		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()
-});
-const buttonBorderSchema = z$1.object({ widthClass: z$1.string() });
-const buttonVariantAffordanceSchema = z$1.object({ iconId: z$1.string().min(1) });
-const variantShadowSchema = z$1.object({
+const buttonBorderSchema = z$1.strictObject({ widthClass: z$1.string() });
+const buttonVariantAffordanceSchema = z$1.strictObject({ iconId: z$1.string().min(1) });
+const variantShadowSchema = z$1.strictObject({
 	elevation: z$1.enum([
 		"none",
 		"low",
@@ -3244,13 +3087,13 @@ const variantShadowSchema = z$1.object({
 		"hard"
 	]).nullable(),
 	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
-	colorToken: themeColorTokenSchema.optional()
+	colorToken: opaqueButtonColourTokenSchema.optional()
 });
-const variantEffectsSchema = z$1.object({
-	base: z$1.array(effectApplicationSchema$1).optional(),
-	hover: z$1.array(effectApplicationSchema$1).optional(),
-	active: z$1.array(effectApplicationSchema$1).optional(),
-	focus: z$1.array(effectApplicationSchema$1).optional()
+const variantEffectsSchema = z$1.strictObject({
+	base: z$1.array(buttonEffectApplicationSchema).optional(),
+	hover: z$1.array(buttonEffectApplicationSchema).optional(),
+	active: z$1.array(buttonEffectApplicationSchema).optional(),
+	focus: z$1.array(buttonEffectApplicationSchema).optional()
 });
 /**
 * Per-variant size overrides schema — every entry is optional.
@@ -3271,8 +3114,8 @@ const variantSizeOverridesSchema = z$1.object({
 * default (e.g. link-style variants declaring zero horizontal padding at
 * every size).
 */
-const canonicalButtonVariantSchema = z$1.object({
-	id: z$1.string(),
+const buttonVariantSchema = z$1.strictObject({
+	id: buttonVariantIdSchema,
 	name: z$1.string().min(1).max(20),
 	enabled: z$1.boolean(),
 	priority: prioritySchema,
@@ -3286,154 +3129,73 @@ const canonicalButtonVariantSchema = z$1.object({
 	sizes: variantSizeOverridesSchema.optional(),
 	affordance: buttonVariantAffordanceSchema.optional()
 });
-/**
-* Temporary persisted-theme admission boundary for issue #1206.
-*
-* Production inventory on 2026-07-22 found 22 rows using the old independent
-* `textColorToken`/border colour shape. New source and all downstream code use
-* only the canonical relationship. Delete this preprocessor after the reviewed
-* production rewrite reports zero legacy rows.
-*/
-const buttonVariantSchema = z$1.preprocess(normalizeLegacyButtonVariantInput, canonicalButtonVariantSchema);
-const buttonSystemSchema = z$1.object({
+const buttonSystemSchema = z$1.strictObject({
 	global: buttonGlobalSettingsSchema,
 	variants: z$1.array(buttonVariantSchema).min(1).max(6),
 	sizes: buttonSizesSchema.optional()
+}).superRefine((system, ctx) => {
+	const seen = /* @__PURE__ */ new Set();
+	system.variants.forEach((variant, index) => {
+		if (seen.has(variant.id)) ctx.addIssue({
+			code: "custom",
+			path: [
+				"variants",
+				index,
+				"id"
+			],
+			message: `Duplicate button variant ID: ${variant.id}`
+		});
+		seen.add(variant.id);
+	});
 });
-function normalizeLegacyButtonVariantInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const background = input.background;
-	if (!isUnknownRecord(background)) return input;
-	if (!(background.type === "transparent" || Object.prototype.hasOwnProperty.call(input, "textColorToken") || isUnknownRecord(input.border) && Object.prototype.hasOwnProperty.call(input.border, "colorToken") || hasLegacyButtonEffects(input.effects) || hasLegacyAlphaToken(input, background))) return input;
-	const { textColorToken, ...withoutLegacyText } = input;
-	const normalizedBorder = isUnknownRecord(input.border) && typeof input.border.widthClass === "string" ? { widthClass: input.border.widthClass } : input.border;
-	const normalizedAffordance = isUnknownRecord(input.affordance) && typeof input.affordance.iconId === "string" ? { iconId: input.affordance.iconId } : input.affordance;
-	const normalizedEffects = normalizeLegacyButtonEffects(input.effects, background.type);
-	const hoverBackgroundToken = stripLegacyTokenAlpha(input.hoverBackgroundToken);
-	if (background.type === "transparent") return {
-		...withoutLegacyText,
-		background: {
-			type: "surface",
-			role: "link"
-		},
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
-	};
-	if (background.type === "gradient") {
-		const stops = Array.isArray(background.stops) ? background.stops.map(stripLegacyTokenAlpha) : background.stops;
-		return {
-			...withoutLegacyText,
-			background: {
-				...background,
-				stops,
-				foregroundToken: stripLegacyTokenAlpha(background.foregroundToken ?? textColorToken)
-			},
-			border: normalizedBorder,
-			affordance: normalizedAffordance,
-			effects: normalizedEffects,
-			hoverBackgroundToken
-		};
-	}
-	return {
-		...withoutLegacyText,
-		background: background.type === "solid" ? {
-			...background,
-			colorToken: stripLegacyTokenAlpha(background.colorToken)
-		} : background,
-		border: normalizedBorder,
-		affordance: normalizedAffordance,
-		effects: normalizedEffects,
-		hoverBackgroundToken
-	};
+//#endregion
+//#region ../theme-core/src/surfaces/foregroundContract.ts
+const SURFACE_FOREGROUND_CSS_VARS = {
+	text: "--rb-surface-text-color",
+	heading: "--rb-surface-heading-color",
+	link: "--rb-surface-link-color",
+	supporting: "--rb-surface-supporting-color"
+};
+const DEFAULT_SURFACE_TEXT_COLOR = "rgb(var(--tb-text, 17 24 39))";
+const DEFAULT_ROLE_FALLBACKS = {
+	text: DEFAULT_SURFACE_TEXT_COLOR,
+	heading: DEFAULT_SURFACE_TEXT_COLOR,
+	link: "rgb(var(--tb-primary, var(--tb-text, 17 24 39)))",
+	supporting: "rgb(var(--tb-mutedText, 100 116 139))"
+};
+function requireSurfaceColorValue(role, value) {
+	const normalized = value.trim();
+	if (normalized.length === 0) throw new RangeError(`Surface foreground ${role} must be a non-empty CSS color.`);
+	return normalized;
 }
-function normalizeLegacyButtonGlobalInput(input) {
-	if (!isUnknownRecord(input)) return input;
-	const hoverColorToken = stripLegacyTokenAlpha(input.hoverColorToken);
-	return hoverColorToken === input.hoverColorToken ? input : {
-		...input,
-		hoverColorToken
+function completeSurfaceForegrounds(input) {
+	const text = requireSurfaceColorValue("text", input.text);
+	return {
+		text,
+		heading: input.heading === void 0 ? text : requireSurfaceColorValue("heading", input.heading),
+		link: input.link === void 0 ? text : requireSurfaceColorValue("link", input.link),
+		supporting: input.supporting === void 0 ? text : requireSurfaceColorValue("supporting", input.supporting)
 	};
 }
-function hasLegacyAlphaToken(input, background) {
-	const stops = isUnknownArray(background.stops) ? background.stops : [];
-	return [
-		input.hoverBackgroundToken,
-		background.colorToken,
-		background.foregroundToken,
-		...stops
-	].some((token) => stripLegacyTokenAlpha(token) !== token);
-}
-function stripLegacyTokenAlpha(value) {
-	if (typeof value !== "string") return value;
-	const slashIndex = value.indexOf("/");
-	return slashIndex < 0 ? value : value.slice(0, slashIndex);
-}
-function hasLegacyButtonEffects(input) {
-	if (!isUnknownRecord(input)) return false;
-	return [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	].some((state) => {
-		const effects = input[state];
-		return Array.isArray(effects) && effects.some((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return true;
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification !== "colour-transition" && classification !== "non-colour") return true;
-			return effect.effectId === "background-on-hover" && isUnknownRecord(effect.options) && stripLegacyTokenAlpha(effect.options.colorToken) !== effect.options.colorToken;
-		});
-	});
-}
-function normalizeLegacyButtonEffects(input, backgroundType) {
-	if (!isUnknownRecord(input)) return input;
-	const normalized = {};
-	for (const state of [
-		"base",
-		"hover",
-		"active",
-		"focus"
-	]) {
-		const effects = input[state];
-		if (!Array.isArray(effects)) continue;
-		const safeEffects = effects.flatMap((effect) => {
-			if (!isUnknownRecord(effect) || typeof effect.effectId !== "string") return [];
-			const classification = classifyButtonEffectId(effect.effectId);
-			if (classification === "non-colour") return [effect];
-			if (classification !== "colour-transition") return [];
-			if (effect.effectId === "background-on-hover") {
-				const options = isUnknownRecord(effect.options) ? effect.options : null;
-				const colorToken = options === null ? null : parseOpaqueButtonColourToken(stripLegacyTokenAlpha(options.colorToken));
-				return colorToken === null ? [] : [{
-					...effect,
-					options: {
-						...options,
-						colorToken
-					}
-				}];
-			}
-			if (backgroundType !== "solid") return [];
-			const rawAmount = isUnknownRecord(effect.options) ? effect.options.amount : void 0;
-			const amount = typeof rawAmount === "number" && rawAmount > 0 ? Math.max(100, Math.round(rawAmount / 100) * 100) : 100;
-			return [{
-				...effect,
-				options: {
-					...isUnknownRecord(effect.options) ? effect.options : {},
-					amount
-				}
-			}];
-		});
-		if (safeEffects.length > 0) normalized[state] = safeEffects;
-	}
-	return Object.keys(normalized).length === 0 ? void 0 : normalized;
+function surfaceForegroundValue(role, outsideProviderFallback = DEFAULT_ROLE_FALLBACKS[role]) {
+	const roleVariable = SURFACE_FOREGROUND_CSS_VARS[role];
+	const fallback = requireSurfaceColorValue("fallback", outsideProviderFallback);
+	if (role === "text") return `var(${roleVariable}, ${fallback})`;
+	return `var(${roleVariable}, var(${SURFACE_FOREGROUND_CSS_VARS.text}, ${fallback}))`;
 }
-function isUnknownRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
+function surfaceForegroundValueWithOpacity(role, opacityPercent) {
+	if (!Number.isFinite(opacityPercent) || opacityPercent < 0 || opacityPercent > 100) throw new RangeError("Surface foreground opacity must be between 0 and 100.");
+	return `color-mix(in srgb, ${surfaceForegroundValue(role)} ${opacityPercent}%, transparent)`;
 }
-function isUnknownArray(value) {
-	return Array.isArray(value);
+function surfaceForegroundStyle(input) {
+	const foregrounds = completeSurfaceForegrounds(input);
+	return {
+		color: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.text]: foregrounds.text,
+		[SURFACE_FOREGROUND_CSS_VARS.heading]: foregrounds.heading,
+		[SURFACE_FOREGROUND_CSS_VARS.link]: foregrounds.link,
+		[SURFACE_FOREGROUND_CSS_VARS.supporting]: foregrounds.supporting
+	};
 }
 buttonSizeNameSchema.options;
 //#endregion
@@ -3590,7 +3352,6 @@ const quietArrowRecipe = defineButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 500,
-			borderWidth: 1,
 			typography: "body",
 			fontSize: "text-sm",
 			letterSpacing: "loose",
@@ -3654,7 +3415,7 @@ const quietArrowRecipe = defineButtonStyleRecipe({
 					affordance: { iconId: "ArrowRight" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -3765,7 +3526,6 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 2,
 			hoverTransform: "lift",
 			hoverColor: "none"
 		},
@@ -3784,10 +3544,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 						position: "bottom"
 					},
 					effects: {
-						hover: [{
-							effectId: "lift",
-							options: { translateY: "-1px" }
-						}],
+						hover: [{ effectId: "lift" }],
 						active: [{
 							effectId: "scale-down",
 							options: { scale: "0.98" }
@@ -3806,7 +3563,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -3821,7 +3578,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -3835,7 +3592,7 @@ const softPillRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-full",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -3865,7 +3622,6 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "lift",
 			hoverColor: "none",
 			typography: "body",
@@ -3901,12 +3657,9 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 						position: "bottom"
 					},
 					effects: {
-						hover: [{
-							effectId: "lift",
-							options: { translateY: "-1px" }
-						}, {
+						hover: [{ effectId: "lift" }, {
 							effectId: "background-on-hover",
-							options: { colorToken: "accent" }
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
 						}],
 						active: [{
 							effectId: "scale-down",
@@ -3926,7 +3679,7 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "muted" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
 					}] }
 				}
 			},
@@ -3941,7 +3694,7 @@ const earthPillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -4001,7 +3754,6 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 			shadow: "medium",
 			textTransform: "none",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -4042,7 +3794,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "background" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
 					}] }
 				}
 			},
@@ -4057,7 +3809,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4071,7 +3823,7 @@ const confidentChipRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-md",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4106,7 +3858,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "square",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -4124,7 +3875,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 2,
-							colorToken: "text",
 							origin: "left"
 						}
 					}] }
@@ -4143,7 +3893,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "mutedText",
 							origin: "left"
 						}
 					}] }
@@ -4162,7 +3911,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -4186,7 +3934,6 @@ const editorialLinkRecipe = defineStaticButtonStyleRecipe({
 					effectId: "border-bottom-grow",
 					options: {
 						height: 2,
-						colorToken: "accent",
 						origin: "left"
 					}
 				}] } }
@@ -4208,7 +3955,6 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "pill",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 2,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -4253,7 +3999,7 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "accent" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("accent") }
 					}] }
 				}
 			},
@@ -4268,7 +4014,7 @@ const pebbleRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4323,7 +4069,6 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "none",
 			fontWeight: 500,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -4388,7 +4133,7 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4402,7 +4147,7 @@ const brushedWashRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-lg",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4431,7 +4176,6 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none",
 			letterSpacing: "loose"
@@ -4489,7 +4233,7 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4504,7 +4248,7 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4538,7 +4282,6 @@ const inkStampRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -4569,7 +4312,6 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "none",
 			fontWeight: 600,
-			borderWidth: 1,
 			typography: "body",
 			letterSpacing: "tight",
 			paddingPreset: "default",
@@ -4601,12 +4343,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					affordance: { iconId: "ArrowRight" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "secondary" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("secondary") }
 					}] }
 				}
 			},
@@ -4619,12 +4358,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					border: { widthClass: "border" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -4637,12 +4373,9 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					border: { widthClass: "border" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}, {
+					effects: { hover: [{ effectId: "lift" }, {
 						effectId: "background-on-hover",
-						options: { colorToken: "surfaceAlt" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surfaceAlt") }
 					}] }
 				}
 			},
@@ -4654,10 +4387,7 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 						role: "link"
 					},
 					borderRadius: "rounded-lg",
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}] }
+					effects: { hover: [{ effectId: "lift" }] }
 				}
 			},
 			accent: {
@@ -4669,10 +4399,7 @@ const flatInkRecipe = defineStaticButtonStyleRecipe({
 					},
 					borderRadius: "rounded-lg",
 					affordance: { iconId: "ArrowRight" },
-					effects: { hover: [{
-						effectId: "lift",
-						options: { translateY: "-2px" }
-					}] }
+					effects: { hover: [{ effectId: "lift" }] }
 				}
 			}
 		}
@@ -4693,9 +4420,8 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 			shadow: "low",
 			textTransform: "uppercase",
 			fontWeight: 700,
-			borderWidth: 2,
 			hoverTransform: "lift",
-			hoverColor: "darken",
+			hoverColor: "none",
 			typography: "body",
 			paddingPreset: "spacious",
 			italic: false
@@ -4753,7 +4479,7 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border-2" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "background" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("background") }
 					}] }
 				}
 			},
@@ -4767,7 +4493,7 @@ const showtimePillRecipe = defineStaticButtonStyleRecipe({
 					borderRadius: "rounded-full",
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4802,7 +4528,6 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 			typography: "heading",
 			fontWeight: 700,
 			fontSize: "text-lg",
-			borderWidth: 2,
 			hoverTransform: "none",
 			hoverColor: "none"
 		},
@@ -4837,7 +4562,7 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 						elevation: "high",
 						softness: "hard",
 						position: "bottom-right",
-						colorToken: "text"
+						colorToken: unsafeAsOpaqueButtonColourToken("text")
 					},
 					effects: { hover: [{ effectId: "press-down" }] }
 				}
@@ -4855,7 +4580,7 @@ const joyStampRecipe = defineStaticButtonStyleRecipe({
 						elevation: "high",
 						softness: "hard",
 						position: "bottom-right",
-						colorToken: "secondary"
+						colorToken: unsafeAsOpaqueButtonColourToken("secondary")
 					},
 					effects: { hover: [{ effectId: "press-down" }] }
 				}
@@ -4900,7 +4625,6 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 			cornerStyle: "rounded",
 			textTransform: "uppercase",
 			fontWeight: 600,
-			borderWidth: 1,
 			hoverTransform: "none",
 			hoverColor: "none",
 			letterSpacing: "loose"
@@ -4936,7 +4660,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					effects: {
 						hover: [{
 							effectId: "background-on-hover",
-							options: { colorToken: "primary-100" }
+							options: { colorToken: unsafeAsOpaqueButtonColourToken("primary-100") }
 						}],
 						active: [{
 							effectId: "scale-down",
@@ -4956,7 +4680,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("surface") }
 					}] }
 				}
 			},
@@ -4971,7 +4695,7 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 					border: { widthClass: "border" },
 					effects: { hover: [{
 						effectId: "background-on-hover",
-						options: { colorToken: "muted" }
+						options: { colorToken: unsafeAsOpaqueButtonColourToken("muted") }
 					}] }
 				}
 			},
@@ -5005,7 +4729,6 @@ const ornateRitualRecipe = defineStaticButtonStyleRecipe({
 						effectId: "border-bottom-grow",
 						options: {
 							height: 1,
-							colorToken: "accent",
 							origin: "left"
 						}
 					}] }
@@ -6110,6 +5833,102 @@ new Set(themeV2NormalEditorRawStyleFieldNames);
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
 const siteChromeBackgroundOverrideOwner = "site-chrome-editor";
 //#endregion
+//#region ../theme-core/src/utils/colorStyles.ts
+const COLOR_VAR_PREFIX = "--tb-";
+function parseToken(source) {
+	const parts = parseColorTokenParts(source);
+	if (parts.kind === "raw") return {
+		token: source,
+		raw: parts.value
+	};
+	if (parts.kind === "invalid") return { token: source };
+	return {
+		token: parts.token,
+		opacityPercent: parts.opacityPercent === null ? void 0 : parts.opacityPercent
+	};
+}
+const SURFACE_TEXT_ROLE_BY_TOKEN = {
+	text: "text",
+	heading: "heading",
+	mutedText: "supporting"
+};
+function surfaceRoleForTextToken(token) {
+	return Object.prototype.hasOwnProperty.call(SURFACE_TEXT_ROLE_BY_TOKEN, token) ? SURFACE_TEXT_ROLE_BY_TOKEN[token] : null;
+}
+/**
+* Converts a theme color token to a CSS rgb value.
+* This is the primary function for applying theme colors to CSS properties.
+*
+* @param token - Theme color token (semantic, with opacity, or raw)
+* @returns CSS color value (rgb with optional alpha, or raw CSS value)
+*
+* @example
+* rgbColorValue('primary') // => 'rgb(var(--tb-primary))'
+* rgbColorValue('surface/95') // => 'rgb(var(--tb-surface) / 0.95)'
+* rgbColorValue('raw:transparent') // => 'transparent'
+*/
+function rgbColorValue(token) {
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
+	if (raw) return raw;
+	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
+}
+/**
+* Creates a backgroundColor style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with backgroundColor
+*/
+function backgroundColorStyle(token) {
+	return { backgroundColor: rgbColorValue(token) };
+}
+/**
+* Creates a text color style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with color
+*/
+function textColorStyle(token) {
+	const parsed = parseToken(token);
+	const surfaceRole = parsed.raw ? null : surfaceRoleForTextToken(parsed.token);
+	if (surfaceRole) return { color: parsed.opacityPercent === void 0 ? surfaceForegroundValue(surfaceRole) : surfaceForegroundValueWithOpacity(surfaceRole, parsed.opacityPercent) };
+	return { color: rgbColorValue(token) };
+}
+/**
+* Creates a border color style object from a theme token.
+*
+* @param token - Theme color token
+* @returns CSSProperties with borderColor
+*/
+function borderColorStyle(token) {
+	return { borderColor: rgbColorValue(token) };
+}
+/**
+* Merges multiple CSSProperties objects into a single object.
+* Later styles override earlier ones. Undefined values are filtered out.
+* Returns undefined if the merged result is empty.
+*
+* @param styles - Variable number of CSSProperties objects (can be undefined)
+* @returns Merged CSSProperties object, or undefined if empty
+*
+* @example
+* mergeStyles(
+*   backgroundColorStyle('surface'),
+*   textColorStyle('text'),
+*   borderColorStyle('border')
+* )
+* // => { backgroundColor: '...', color: '...', borderColor: '...' }
+*/
+function mergeStyles(...styles) {
+	const merged = {};
+	for (const style of styles) {
+		if (!style) continue;
+		Object.assign(merged, style);
+	}
+	return Object.keys(merged).length ? merged : void 0;
+}
+//#endregion
 //#region ../theme-core/src/utils/tokenOrColor.ts
 /**
 * Runtime color-reference fields intentionally accept any string, including
@@ -13103,6 +12922,7 @@ const DISPLAY_MEDIA_KINDS = [
 	"video",
 	"audio"
 ];
+const DEFAULT_MEDIA_FIELD_KINDS = ["image"];
 const PUBLIC_FILE_FIELD_KINDS = [
 	"document",
 	"spreadsheet",
@@ -13303,18 +13123,28 @@ const inlineTextFieldSchema = baseFieldSchema.extend({
 	maxLength: z$1.number().int().positive().optional(),
 	plainTextField: z$1.string().min(1).optional()
 });
+function hasMediaDefaultIdentifier(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value) && typeof value.identifier === "string" && value.identifier.trim().length > 0;
+}
+function validateMediaFieldDefault(field, ctx) {
+	if (field.defaultValue !== void 0 && field.defaultValue !== null && !hasMediaDefaultIdentifier(field.defaultValue)) ctx.addIssue({
+		code: z$1.ZodIssueCode.custom,
+		path: ["defaultValue"],
+		message: `${field.type} defaultValue must be null or an object with a non-empty identifier`
+	});
+}
 const mediaFieldSchema = baseFieldSchema.extend({
 	type: z$1.literal("media"),
-	mediaKinds: z$1.array(z$1.enum(MEDIA_KINDS)).default(["image"]).transform((kinds) => {
+	mediaKinds: z$1.array(z$1.enum(MEDIA_KINDS)).default([...DEFAULT_MEDIA_FIELD_KINDS]).transform((kinds) => {
 		const displayKinds = kinds.filter(isDisplayMediaKind);
-		return displayKinds.length > 0 ? displayKinds : ["image"];
+		return displayKinds.length > 0 ? displayKinds : [...DEFAULT_MEDIA_FIELD_KINDS];
 	}),
 	aspectRatio: z$1.string().optional()
-});
+}).superRefine(validateMediaFieldDefault);
 const fileFieldSchema = baseFieldSchema.extend({
 	type: z$1.literal("file"),
 	fileKinds: z$1.array(z$1.enum(PUBLIC_FILE_FIELD_KINDS)).default([...PUBLIC_FILE_FIELD_KINDS])
-});
+}).superRefine(validateMediaFieldDefault);
 const booleanFieldSchema = baseFieldSchema.extend({ type: z$1.literal("boolean") });
 const dateFieldSchema = baseFieldSchema.extend({ type: z$1.literal("date") });
 const timeFieldSchema = baseFieldSchema.extend({ type: z$1.literal("time") });
@@ -22102,11 +21932,8 @@ const mediaSchema = z.discriminatedUnion("type", [
 * This module provides a single source of truth for TipTap rich text validation
 * across both the block-form editor and the block rendering system.
 *
-* Format compatibility:
-* - Unwrapped format (new): { type: 'doc', content: [...] }
-* - Wrapped format (legacy): { doc: { type: 'doc', content: [...] } }
-*
-* Both formats are supported for backward compatibility during migration.
+* Rich-text fields use one canonical root shape:
+* `{ type: 'doc', content: [...] }`.
 */
 /**
 * TipTap document node schema (recursive structure)
@@ -22119,17 +21946,40 @@ const mediaSchema = z.discriminatedUnion("type", [
 * - marks: Text formatting marks (e.g., bold, italic)
 */
 const TipTapMarkSchema = z$1.object({
-	type: z$1.string(),
+	type: z$1.string().min(1),
 	attrs: z$1.record(z$1.string(), z$1.unknown()).optional()
-});
+}).strict();
 const TipTapNodeSchema = z$1.lazy(() => z$1.object({
-	type: z$1.string(),
+	type: z$1.string().min(1),
 	content: z$1.array(TipTapNodeSchema).optional(),
 	text: z$1.string().optional(),
 	attrs: z$1.record(z$1.string(), z$1.unknown()).optional(),
 	marks: z$1.array(TipTapMarkSchema).optional()
+}).strict().superRefine((node, ctx) => {
+	if (node.type === "doc") ctx.addIssue({
+		code: "custom",
+		path: ["type"],
+		message: "Document nodes are only valid at the rich-text root"
+	});
+	if (node.type === "text") {
+		if (node.text === void 0 || node.text.length === 0) ctx.addIssue({
+			code: "custom",
+			path: ["text"],
+			message: "Text nodes require a non-empty text value"
+		});
+		if (node.content !== void 0) ctx.addIssue({
+			code: "custom",
+			path: ["content"],
+			message: "Text nodes cannot contain child nodes"
+		});
+		return;
+	}
+	if (node.text !== void 0) ctx.addIssue({
+		code: "custom",
+		path: ["text"],
+		message: "Only text nodes can contain a text value"
+	});
 }));
-z$1.union([TipTapNodeSchema, z$1.object({ doc: TipTapNodeSchema })]);
 /**
 * Canonical schema for a TipTap rich-text document root.
 *
@@ -22138,13 +21988,11 @@ z$1.union([TipTapNodeSchema, z$1.object({ doc: TipTapNodeSchema })]);
 * (dummy content, editor output, migrations) must emit, and the shape every
 * non-legacy consumer can rely on.
 *
-* Legacy envelopes are read-tolerated by {@link RichTextValueSchema} but
-* normalised before reaching anywhere typed as `RichTextDoc`.
 */
 const RichTextDocSchema = z$1.object({
 	type: z$1.literal("doc"),
 	content: z$1.array(TipTapNodeSchema)
-});
+}).strict();
 function createHardBreakNode() {
 	return { type: "hardBreak" };
 }
@@ -34892,17 +34740,12 @@ function stringToTipTapDoc(text) {
 * Handles:
 * - Plain strings → TipTap doc with paragraphs
 * - Already valid TipTap docs → pass through
-* - Legacy { doc: {...} } wrapper → unwrap
 */
 function coerceRichTextDefaultValue(value) {
 	if (value === null || value === void 0) return null;
-	if (value && typeof value === "object" && "doc" in value) {
-		const doc = value.doc;
-		if (doc && typeof doc === "object" && "type" in doc) return doc;
-	}
 	if (typeof value === "string") return stringToTipTapDoc(value);
-	if (value && typeof value === "object" && "type" in value) return value;
-	return null;
+	const parsed = RichTextDocSchema.safeParse(value);
+	return parsed.success ? parsed.data : null;
 }
 /**
 * Check if a Pass 1 field is a repeater field.
@@ -35977,7 +35820,7 @@ ${fieldList}
 
 1. **Text fields**: Extract plain text content, strip HTML tags
 2. **RichText fields**: Preserve structure as simplified JSON (type: "doc", content: [...])
-3. **Media fields**: Extract src URL, alt text → { src: "...", alt: "..." }
+3. **Media fields**: Use only an existing CMS media identifier → { type: "image", identifier: "...", alt: "..." }. Never emit a URL-only media object or invent an identifier; omit the field if no identifier is available.
 4. **Link fields**: Extract href, label → { href: "...", label: "..." }
 5. **Repeater fields**: Create array of objects with item field values
 6. **Select fields**: Match to one of the allowed options