@riverbankcms/sdk 0.104.1 → 0.104.3

package/dist/client/hooks.mjs

@@ -461,6 +461,234 @@ function featuresFromHex(hex) {
 	};
 }
 //#endregion
+//#region ../theme-core/src/tokens/colorTokenParts.ts
+function parseOpacityPercent(source) {
+	const trimmed = source.trim();
+	if (!trimmed) return null;
+	if (!/^\d{1,3}(?:\.\d+)?$/.test(trimmed)) return null;
+	const value = Number(trimmed);
+	if (!Number.isFinite(value)) return null;
+	if (value < 0 || value > 100) return null;
+	return value;
+}
+function parseColorTokenParts(source) {
+	const trimmed = source.trim();
+	if (trimmed.startsWith("raw:")) return {
+		kind: "raw",
+		value: trimmed.slice(4)
+	};
+	const [token, opacityRaw, extra] = trimmed.split("/");
+	if (!token || extra !== void 0) return {
+		kind: "invalid",
+		token: trimmed
+	};
+	if (opacityRaw === void 0) return {
+		kind: "token",
+		token,
+		opacityPercent: null
+	};
+	const opacityPercent = parseOpacityPercent(opacityRaw);
+	if (opacityPercent === null) return {
+		kind: "invalid",
+		token: trimmed
+	};
+	return {
+		kind: "token",
+		token,
+		opacityPercent
+	};
+}
+//#endregion
+//#region ../theme-core/src/tokens/blockColorTokens.ts
+const blockColorTokenNames = [
+	"text",
+	"heading",
+	"mutedText",
+	"surface",
+	"background",
+	"foreground",
+	"border",
+	"primary",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"info",
+	"error",
+	"destructive",
+	"scrim",
+	"shadow",
+	"onPrimary",
+	"onSecondary",
+	"onAccent",
+	"onSuccess",
+	"onWarning",
+	"onInfo",
+	"onError",
+	"onDestructive",
+	"onSurface"
+];
+const blockColorTokenNameSet = new Set(blockColorTokenNames);
+function isBlockColorToken(value) {
+	if (typeof value !== "string") return false;
+	const parts = parseColorTokenParts(value);
+	return parts.kind === "token" && blockColorTokenNameSet.has(parts.token);
+}
+function parseBlockColorToken(value) {
+	if (!isBlockColorToken(value)) return null;
+	return value.trim();
+}
+//#endregion
+//#region ../theme-core/src/tokens/themeColorTokens.ts
+/**
+* Known palette role token names. This is the low-level source of truth for
+* palette roles used by palette variants, Theme V2 schemas, and runtime color
+* reference parsing.
+*/
+const PALETTE_TOKEN_NAMES = [
+	"primary",
+	"primaryForeground",
+	"secondary",
+	"accent",
+	"success",
+	"warning",
+	"destructive",
+	"background",
+	"surface",
+	"surfaceAlt",
+	"muted",
+	"text",
+	"border"
+];
+const paletteTokenNameSchema = z$1.enum(PALETTE_TOKEN_NAMES);
+const themeColorBaseTokenNames = [
+	...PALETTE_TOKEN_NAMES,
+	...blockColorTokenNames,
+	"white",
+	"neutral",
+	"primaryText",
+	"secondaryForeground",
+	"accentForeground"
+];
+const themeColorBaseTokenSet = new Set(themeColorBaseTokenNames);
+const themeColorShadeSteps = [
+	"50",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900",
+	"950"
+];
+const shadeStepSet = new Set(themeColorShadeSteps);
+function isKnownBaseToken(value) {
+	return themeColorBaseTokenSet.has(value);
+}
+function isKnownShadeToken(value) {
+	const match = value.match(/^([a-zA-Z][a-zA-Z0-9]*)(?:-([0-9]{2,3}))$/);
+	if (!match) return false;
+	const [, base, shade] = match;
+	return Boolean(base && shade && isKnownBaseToken(base) && shadeStepSet.has(shade));
+}
+function isThemeColorTokenBase(value) {
+	return isKnownBaseToken(value) || isKnownShadeToken(value);
+}
+function isThemeColorToken(value) {
+	if (typeof value !== "string") return false;
+	const parts = parseColorTokenParts(value);
+	return parts.kind === "token" && isThemeColorTokenBase(parts.token);
+}
+function parseThemeColorToken(value) {
+	if (!isThemeColorToken(value)) return null;
+	return value.trim();
+}
+const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
+//#endregion
+//#region ../theme-core/src/palette/colors.ts
+const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
+const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
+const paletteModeSchema = z$1.enum(["light", "dark"]);
+z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
+const paletteColorsSchema = z$1.object({
+	primary: hexColorSchema,
+	primaryForeground: hexColorSchema,
+	secondary: hexColorSchema,
+	accent: hexColorSchema,
+	success: hexColorSchema,
+	warning: hexColorSchema,
+	destructive: hexColorSchema,
+	background: hexColorSchema,
+	surface: hexColorSchema,
+	surfaceAlt: hexColorSchema,
+	muted: hexColorSchema,
+	text: hexColorSchema,
+	border: hexColorSchema
+}).strict().transform((value) => value);
+function normalizePaletteHex(value) {
+	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
+	const normalized = value.toLowerCase();
+	if (normalized.length === 7) return normalized;
+	const triplet = normalized.slice(1);
+	const red = triplet.charAt(0);
+	const green = triplet.charAt(1);
+	const blue = triplet.charAt(2);
+	return `#${red}${red}${green}${green}${blue}${blue}`;
+}
+function paletteColorsFromEntries(entries) {
+	const values = {};
+	for (const entry of entries) {
+		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
+		if (!parsedRole.success) return {
+			ok: false,
+			error: {
+				kind: "unknown-role",
+				role: entry.name
+			}
+		};
+		const role = parsedRole.data;
+		if (values[role] !== void 0) return {
+			ok: false,
+			error: {
+				kind: "duplicate-role",
+				role
+			}
+		};
+		const hex = normalizePaletteHex(entry.hex);
+		if (!hex) return {
+			ok: false,
+			error: {
+				kind: "invalid-color",
+				role,
+				value: entry.hex
+			}
+		};
+		values[role] = hex;
+	}
+	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
+	if (missing.length > 0) return {
+		ok: false,
+		error: {
+			kind: "missing-roles",
+			roles: missing
+		}
+	};
+	return {
+		ok: true,
+		colors: paletteColorsSchema.parse(values)
+	};
+}
+function requirePaletteColorsFromEntries(entries) {
+	const result = paletteColorsFromEntries(entries);
+	if (result.ok) return result.colors;
+	throw new Error(`Invalid complete palette: ${result.error.kind}`);
+}
+new Set(PALETTE_TOKEN_NAMES);
+//#endregion
 //#region ../../node_modules/.pnpm/@vibrant+image@4.0.4/node_modules/@vibrant/image/dist/esm/histogram.js
 var Histogram = class {
 	constructor(pixels, opts) {
@@ -1473,254 +1701,27 @@ function _generateEmptySwatches(palette, _maxPopulation, opts) {
 	if (!palette.DarkMuted && palette.DarkVibrant) {
 		let [h, s, l] = palette.DarkVibrant.hsl;
 		l = opts.targetMutesSaturation;
-		palette.DarkMuted = new Swatch(hslToRgb(h, s, l), 0);
-	}
-	if (!palette.LightMuted && palette.LightVibrant) {
-		let [h, s, l] = palette.LightVibrant.hsl;
-		l = opts.targetMutesSaturation;
-		palette.LightMuted = new Swatch(hslToRgb(h, s, l), 0);
-	}
-}
-const DefaultGenerator = ((swatches, opts) => {
-	opts = Object.assign({}, DefaultOpts, opts);
-	const maxPopulation = _findMaxPopulation(swatches);
-	const palette = _generateVariationColors(swatches, maxPopulation, opts);
-	_generateEmptySwatches(palette, maxPopulation, opts);
-	return palette;
-});
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/pipeline/index.js
-const pipeline = new BasicPipeline().filter.register("default", (r, g, b, a) => a >= 125 && !(r > 250 && g > 250 && b > 250)).quantizer.register("mmcq", MMCQ).generator.register("default", DefaultGenerator);
-//#endregion
-//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/browser.js
-Vibrant.use(pipeline);
-//#endregion
-//#region ../theme-core/src/tokens/colorTokenParts.ts
-function parseOpacityPercent(source) {
-	const trimmed = source.trim();
-	if (!trimmed) return null;
-	if (!/^\d{1,3}(?:\.\d+)?$/.test(trimmed)) return null;
-	const value = Number(trimmed);
-	if (!Number.isFinite(value)) return null;
-	if (value < 0 || value > 100) return null;
-	return value;
-}
-function parseColorTokenParts(source) {
-	const trimmed = source.trim();
-	if (trimmed.startsWith("raw:")) return {
-		kind: "raw",
-		value: trimmed.slice(4)
-	};
-	const [token, opacityRaw, extra] = trimmed.split("/");
-	if (!token || extra !== void 0) return {
-		kind: "invalid",
-		token: trimmed
-	};
-	if (opacityRaw === void 0) return {
-		kind: "token",
-		token,
-		opacityPercent: null
-	};
-	const opacityPercent = parseOpacityPercent(opacityRaw);
-	if (opacityPercent === null) return {
-		kind: "invalid",
-		token: trimmed
-	};
-	return {
-		kind: "token",
-		token,
-		opacityPercent
-	};
-}
-//#endregion
-//#region ../theme-core/src/tokens/blockColorTokens.ts
-const blockColorTokenNames = [
-	"text",
-	"heading",
-	"mutedText",
-	"surface",
-	"background",
-	"foreground",
-	"border",
-	"primary",
-	"secondary",
-	"accent",
-	"success",
-	"warning",
-	"info",
-	"error",
-	"destructive",
-	"scrim",
-	"shadow",
-	"onPrimary",
-	"onSecondary",
-	"onAccent",
-	"onSuccess",
-	"onWarning",
-	"onInfo",
-	"onError",
-	"onDestructive",
-	"onSurface"
-];
-const blockColorTokenNameSet = new Set(blockColorTokenNames);
-function isBlockColorToken(value) {
-	if (typeof value !== "string") return false;
-	const parts = parseColorTokenParts(value);
-	return parts.kind === "token" && blockColorTokenNameSet.has(parts.token);
-}
-function parseBlockColorToken(value) {
-	if (!isBlockColorToken(value)) return null;
-	return value.trim();
-}
-//#endregion
-//#region ../theme-core/src/tokens/themeColorTokens.ts
-/**
-* Known palette role token names. This is the low-level source of truth for
-* palette roles used by palette variants, Theme V2 schemas, and runtime color
-* reference parsing.
-*/
-const PALETTE_TOKEN_NAMES = [
-	"primary",
-	"primaryForeground",
-	"secondary",
-	"accent",
-	"success",
-	"warning",
-	"destructive",
-	"background",
-	"surface",
-	"surfaceAlt",
-	"muted",
-	"text",
-	"border"
-];
-const paletteTokenNameSchema = z$1.enum(PALETTE_TOKEN_NAMES);
-const themeColorBaseTokenNames = [
-	...PALETTE_TOKEN_NAMES,
-	...blockColorTokenNames,
-	"white",
-	"neutral",
-	"primaryText",
-	"secondaryForeground",
-	"accentForeground"
-];
-const themeColorBaseTokenSet = new Set(themeColorBaseTokenNames);
-const themeColorShadeSteps = [
-	"50",
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900",
-	"950"
-];
-const shadeStepSet = new Set(themeColorShadeSteps);
-function isKnownBaseToken(value) {
-	return themeColorBaseTokenSet.has(value);
-}
-function isKnownShadeToken(value) {
-	const match = value.match(/^([a-zA-Z][a-zA-Z0-9]*)(?:-([0-9]{2,3}))$/);
-	if (!match) return false;
-	const [, base, shade] = match;
-	return Boolean(base && shade && isKnownBaseToken(base) && shadeStepSet.has(shade));
-}
-function isThemeColorTokenBase(value) {
-	return isKnownBaseToken(value) || isKnownShadeToken(value);
-}
-function isThemeColorToken(value) {
-	if (typeof value !== "string") return false;
-	const parts = parseColorTokenParts(value);
-	return parts.kind === "token" && isThemeColorTokenBase(parts.token);
-}
-function parseThemeColorToken(value) {
-	if (!isThemeColorToken(value)) return null;
-	return value.trim();
-}
-const themeColorTokenSchema = z$1.string().min(1).refine((value) => Boolean(isThemeColorToken(value)), "Expected a known Theme V2 color token");
-//#endregion
-//#region ../theme-core/src/palette/colors.ts
-const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/;
-const NORMALIZABLE_HEX_REGEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
-const hexColorSchema = z$1.string().regex(HEX_COLOR_REGEX, "Hex must be #RRGGBB (lowercase)").transform((value) => value);
-const paletteModeSchema = z$1.enum(["light", "dark"]);
-z$1.string().regex(/^[0-9a-f]{64}$/, "Palette hash must be a lowercase SHA-256 value").transform((value) => value);
-const paletteColorsSchema = z$1.object({
-	primary: hexColorSchema,
-	primaryForeground: hexColorSchema,
-	secondary: hexColorSchema,
-	accent: hexColorSchema,
-	success: hexColorSchema,
-	warning: hexColorSchema,
-	destructive: hexColorSchema,
-	background: hexColorSchema,
-	surface: hexColorSchema,
-	surfaceAlt: hexColorSchema,
-	muted: hexColorSchema,
-	text: hexColorSchema,
-	border: hexColorSchema
-}).strict().transform((value) => value);
-function normalizePaletteHex(value) {
-	if (!NORMALIZABLE_HEX_REGEX.test(value)) return null;
-	const normalized = value.toLowerCase();
-	if (normalized.length === 7) return normalized;
-	const triplet = normalized.slice(1);
-	const red = triplet.charAt(0);
-	const green = triplet.charAt(1);
-	const blue = triplet.charAt(2);
-	return `#${red}${red}${green}${green}${blue}${blue}`;
-}
-function paletteColorsFromEntries(entries) {
-	const values = {};
-	for (const entry of entries) {
-		const parsedRole = paletteTokenNameSchema.safeParse(entry.name);
-		if (!parsedRole.success) return {
-			ok: false,
-			error: {
-				kind: "unknown-role",
-				role: entry.name
-			}
-		};
-		const role = parsedRole.data;
-		if (values[role] !== void 0) return {
-			ok: false,
-			error: {
-				kind: "duplicate-role",
-				role
-			}
-		};
-		const hex = normalizePaletteHex(entry.hex);
-		if (!hex) return {
-			ok: false,
-			error: {
-				kind: "invalid-color",
-				role,
-				value: entry.hex
-			}
-		};
-		values[role] = hex;
+		palette.DarkMuted = new Swatch(hslToRgb(h, s, l), 0);
+	}
+	if (!palette.LightMuted && palette.LightVibrant) {
+		let [h, s, l] = palette.LightVibrant.hsl;
+		l = opts.targetMutesSaturation;
+		palette.LightMuted = new Swatch(hslToRgb(h, s, l), 0);
 	}
-	const missing = PALETTE_TOKEN_NAMES.filter((role) => values[role] === void 0);
-	if (missing.length > 0) return {
-		ok: false,
-		error: {
-			kind: "missing-roles",
-			roles: missing
-		}
-	};
-	return {
-		ok: true,
-		colors: paletteColorsSchema.parse(values)
-	};
-}
-function requirePaletteColorsFromEntries(entries) {
-	const result = paletteColorsFromEntries(entries);
-	if (result.ok) return result.colors;
-	throw new Error(`Invalid complete palette: ${result.error.kind}`);
 }
+const DefaultGenerator = ((swatches, opts) => {
+	opts = Object.assign({}, DefaultOpts, opts);
+	const maxPopulation = _findMaxPopulation(swatches);
+	const palette = _generateVariationColors(swatches, maxPopulation, opts);
+	_generateEmptySwatches(palette, maxPopulation, opts);
+	return palette;
+});
+//#endregion
+//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/pipeline/index.js
+const pipeline = new BasicPipeline().filter.register("default", (r, g, b, a) => a >= 125 && !(r > 250 && g > 250 && b > 250)).quantizer.register("mmcq", MMCQ).generator.register("default", DefaultGenerator);
+//#endregion
+//#region ../../node_modules/.pnpm/node-vibrant@4.0.4/node_modules/node-vibrant/dist/esm/browser.js
+Vibrant.use(pipeline);
 //#endregion
 //#region ../theme-core/src/site-styles/styleTags.ts
 /**
@@ -1995,6 +1996,71 @@ const brandLedJewel = defineCuratedPalette({
 		}
 	]
 });
+const brandLedSpruce = defineCuratedPalette({
+	id: "brand-led-spruce",
+	name: "Brand-led — Spruce",
+	description: "Spruce-ink primary and moss secondary with an amber accent over a green-mist ground and hairline sage borders.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		era: "editorial"
+	},
+	mode: "light",
+	colors: [
+		{
+			name: "primary",
+			hex: "#14312b"
+		},
+		{
+			name: "secondary",
+			hex: "#356a59"
+		},
+		{
+			name: "accent",
+			hex: "#f08a4b"
+		},
+		{
+			name: "success",
+			hex: "#356a59"
+		},
+		{
+			name: "warning",
+			hex: "#f08a4b"
+		},
+		{
+			name: "destructive",
+			hex: "#b5561f"
+		},
+		{
+			name: "background",
+			hex: "#ecefe9"
+		},
+		{
+			name: "surface",
+			hex: "#ffffff"
+		},
+		{
+			name: "surfaceAlt",
+			hex: "#f4f6f1"
+		},
+		{
+			name: "muted",
+			hex: "#5c6a64"
+		},
+		{
+			name: "text",
+			hex: "#1c2a26"
+		},
+		{
+			name: "primaryForeground",
+			hex: "#f4f7f1"
+		},
+		{
+			name: "border",
+			hex: "#d7ddd2"
+		}
+	]
+});
 const brandLedBurgundyGold = defineCuratedPalette({
 	id: "brand-led-burgundy-gold",
 	name: "Brand-led — Burgundy Gold",
@@ -2534,6 +2600,7 @@ const curatedPalettes = [
 	brandLedWarm,
 	brandLedJewel,
 	brandLedBurgundyGold,
+	brandLedSpruce,
 	defineCuratedPalette({
 		id: "warm-neutral-clay",
 		name: "Warm Neutral — Clay",
@@ -2998,6 +3065,55 @@ 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) {
@@ -3009,9 +3125,17 @@ function parseToken(source) {
 	if (parts.kind === "invalid") return { token: source };
 	return {
 		token: parts.token,
-		alpha: parts.opacityPercent === null ? void 0 : parts.opacityPercent / 100
+		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.
@@ -3025,11 +3149,11 @@ function parseToken(source) {
 * rgbColorValue('raw:transparent') // => 'transparent'
 */
 function rgbColorValue(token) {
-	const { token: baseToken, alpha, raw } = parseToken(token);
+	const { token: baseToken, opacityPercent, raw } = parseToken(token);
 	if (raw) return raw;
 	const cssVar = `${COLOR_VAR_PREFIX}${baseToken}`;
-	if (alpha === void 0) return `rgb(var(${cssVar}))`;
-	return `rgb(var(${cssVar}) / ${alpha})`;
+	if (opacityPercent === void 0) return `rgb(var(${cssVar}))`;
+	return `rgb(var(${cssVar}) / ${opacityPercent / 100})`;
 }
 /**
 * Creates a backgroundColor style object from a theme token.
@@ -3047,6 +3171,9 @@ function backgroundColorStyle(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) };
 }
 /**
@@ -3316,6 +3443,10 @@ const buttonBorderSchema = z$1.object({
 	widthClass: z$1.string(),
 	colorToken: themeColorTokenSchema
 });
+const buttonVariantAffordanceSchema = z$1.object({
+	iconId: z$1.string().min(1),
+	colorToken: themeColorTokenSchema.optional()
+});
 const variantShadowSchema = z$1.object({
 	elevation: z$1.enum([
 		"none",
@@ -3369,7 +3500,8 @@ const buttonVariantSchema = z$1.object({
 	border: buttonBorderSchema.optional(),
 	hoverBackgroundToken: z$1.string().optional(),
 	effects: variantEffectsSchema.optional(),
-	sizes: variantSizeOverridesSchema.optional()
+	sizes: variantSizeOverridesSchema.optional(),
+	affordance: buttonVariantAffordanceSchema.optional()
 });
 const buttonSystemSchema = z$1.object({
 	global: buttonGlobalSettingsSchema,
@@ -3914,6 +4046,136 @@ const editorialLink = defineButtonPersonality({
 	}
 });
 //#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.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		motion: "subtle",
+		era: "editorial"
+	},
+	buttonSystem: {
+		global: {
+			cornerStyle: "rounded",
+			shadow: "low",
+			textTransform: "none",
+			fontWeight: 600,
+			borderWidth: 1,
+			typography: "body",
+			letterSpacing: "tight",
+			paddingPreset: "default",
+			hoverTransform: "lift",
+			hoverColor: "none"
+		},
+		sizes: {
+			sm: {
+				padding: "0.625rem 1.125rem",
+				fontSize: "text-sm"
+			},
+			md: { padding: "0.8125rem 1.375rem" },
+			lg: {
+				padding: "0.9375rem 1.625rem",
+				fontSize: "text-lg"
+			},
+			xl: {
+				padding: "1.0625rem 2rem",
+				fontSize: "text-xl"
+			}
+		},
+		variants: [
+			{
+				id: "primary",
+				name: "Primary",
+				enabled: true,
+				priority: 1,
+				background: {
+					type: "solid",
+					colorToken: "primary"
+				},
+				textColorToken: "primaryForeground",
+				borderRadius: "rounded-lg",
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accent"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "secondary" }
+				}] }
+			},
+			{
+				id: "secondary",
+				name: "Secondary",
+				enabled: true,
+				priority: 2,
+				background: { type: "transparent" },
+				textColorToken: "primary",
+				borderRadius: "rounded-lg",
+				border: {
+					widthClass: "border",
+					colorToken: "border"
+				},
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				effects: { hover: [{
+					effectId: "lift",
+					options: { translateY: "-2px" }
+				}, {
+					effectId: "background-on-hover",
+					options: { colorToken: "surfaceAlt" }
+				}] }
+			},
+			{
+				id: "accent",
+				name: "Accent",
+				enabled: true,
+				priority: 3,
+				background: {
+					type: "solid",
+					colorToken: "accent"
+				},
+				textColorToken: "accentForeground",
+				borderRadius: "rounded-lg",
+				shadow: {
+					elevation: "none",
+					softness: null,
+					position: "bottom"
+				},
+				affordance: {
+					iconId: "ArrowRight",
+					colorToken: "accentForeground"
+				},
+				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
@@ -4684,6 +4946,7 @@ const buttonPersonalities = [
 	editorialLink,
 	pebble,
 	inkStamp,
+	flatInk,
 	brushedWash,
 	showtimePill,
 	joyStamp,
@@ -5041,11 +5304,31 @@ const gradientStopSchema = z$1.object({
 	position: z$1.number().min(0).max(100)
 });
 /**
-* Gradient configuration
+* Radial gradient shape. Optional; defaults to `circle` (the historical shape)
+* so existing radial gradients are byte-identical.
+*
+* Named `RadialGradientShape` to avoid clashing with `styles/gradients.ts`'s
+* `GradientShape` (which names the gradient *kind*: linear/radial/conic).
+*/
+const radialGradientShapeSchema = z$1.enum(["circle", "ellipse"]);
+/**
+* Gradient configuration.
+*
+* `type` is optional and defaults to `'linear'` so gradients persisted without a
+* type (or with an explicit `'linear'`) render exactly as before. `'radial'` and
+* `'conic'` are additive kinds:
+*   - linear: `angle` (degrees)
+*   - radial: optional `shape` (circle/ellipse) + `position`
+*   - conic:  optional `angle` (from-angle, degrees) + `position`
 */
 const gradientConfigSchema = z$1.object({
-	type: z$1.enum(["linear", "radial"]),
+	type: z$1.enum([
+		"linear",
+		"radial",
+		"conic"
+	]).default("linear"),
 	angle: z$1.number().min(0).max(360).optional(),
+	shape: radialGradientShapeSchema.optional(),
 	position: z$1.string().optional(),
 	stops: z$1.array(gradientStopSchema).min(2)
 });
@@ -6026,6 +6309,7 @@ const typographyScaleSchema = z$1.enum([
 	"majorThird",
 	"perfectFourth"
 ]);
+const eyebrowTypographyStyleSchema = z$1.object({ family: z$1.string().min(1) });
 const typographySchema = z$1.object({
 	body: bodyTypographyStyleSchema,
 	headings: z$1.object({
@@ -6038,7 +6322,8 @@ const typographySchema = z$1.object({
 		h6: headingTypographyOverridesSchema.optional()
 	}),
 	scale: typographyScaleSchema,
-	proseLinkStyle: proseLinkStyleSchema.optional()
+	proseLinkStyle: proseLinkStyleSchema.optional(),
+	eyebrow: eyebrowTypographyStyleSchema.optional()
 });
 const spaceSchema = z$1.enum([
 	"comfortable",
@@ -6063,7 +6348,8 @@ const shadow = z$1.object({
 		"soft",
 		"hard"
 	]).nullable(),
-	position: z$1.enum(["bottom", "bottom-right"]).default("bottom")
+	position: z$1.enum(["bottom", "bottom-right"]).default("bottom"),
+	colorToken: themeColorTokenSchema.optional()
 });
 const border = z$1.object({
 	width: z$1.enum([
@@ -6308,6 +6594,7 @@ const headerSchema = z$1.object({
 	navWeight: navFontWeight.default("medium"),
 	navTypography: z$1.enum(["body", "heading"]).optional(),
 	navTextSize: navLinkStyleSchema.shape.textSize,
+	navPlacement: z$1.enum(["end", "center"]).optional(),
 	container: headerContainerSchema,
 	border: headerBorderSchema,
 	shadow: componentShadowSchema.optional(),
@@ -8513,6 +8800,13 @@ const legacyHeaderLookAliases = defineExactCatalog()([
 			styleId: asHeaderStyleId("minimal")
 		}
 	},
+	{
+		lookId: asHeaderLookId("classic-centered-nav"),
+		selection: {
+			layoutId: asHeaderLayoutId("classic"),
+			styleId: asHeaderStyleId("fine-line")
+		}
+	},
 	{
 		lookId: asHeaderLookId("brand-solid"),
 		selection: {
@@ -8583,6 +8877,50 @@ function getCompatibleHeaderStyleIds(layoutId) {
 		return isHeaderStyleCompatibleWithLayout(getHeaderStyleOrThrow(styleId), layoutId);
 	});
 }
+function applyNavTypography(style, typography) {
+	switch (typography) {
+		case "plain": return style;
+		case "heading": return {
+			...style,
+			typography: "heading",
+			fontWeight: "medium",
+			letterSpacing: "wide"
+		};
+		case "quiet-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wide"
+		};
+		case "brand-caps": return {
+			...style,
+			textTransform: "uppercase",
+			textSize: "sm",
+			letterSpacing: "wider"
+		};
+		default: return assertNever$1(typography, "Unhandled header nav typography");
+	}
+}
+function underlineNavLinkStyle(colorToken, underlineColorToken, typography = "plain") {
+	return applyNavTypography({
+		name: "Underline grow",
+		typography: "body",
+		fontWeight: "medium",
+		textTransform: "none",
+		italic: false,
+		colorToken,
+		padding: "compact",
+		paddingX: "compact",
+		borderRadius: "none",
+		effects: { hover: [{
+			effectId: "nav-underline",
+			options: {
+				style: "grow",
+				...underlineColorToken ? { colorToken: underlineColorToken } : {}
+			}
+		}] }
+	}, typography);
+}
 function themedHeaderShadow(theme) {
 	switch (theme.shadow.elevation) {
 		case "none": return;
@@ -8682,6 +9020,38 @@ function cleanBaseHeader(theme) {
 		ctaGap: "default"
 	};
 }
+function classicCenteredNavHeader(theme) {
+	return {
+		...baseHeader(theme),
+		variant: "classic",
+		navPlacement: "center",
+		positioning: "sticky",
+		shrinkOnScroll: false,
+		background: {
+			type: "color",
+			color: "surface"
+		},
+		textColor: "text",
+		navColor: "text",
+		navStyle: "underline-grow",
+		navWeight: "medium",
+		navLinkStyle: underlineNavLinkStyle("text", "accent"),
+		border: {
+			style: "solid",
+			width: "thin",
+			position: "bottom",
+			colorToken: "border"
+		},
+		ctaTreatment: "primary",
+		ctaVariant: resolveHeaderCtaVariant(theme, "primary"),
+		ctaGap: "default",
+		logoText: {
+			mobileMaxWidth: "sm",
+			mobileWrapLines: 1,
+			hideOnShrink: false
+		}
+	};
+}
 function serifLineHeader(theme) {
 	return {
 		...baseHeader(theme),
@@ -8846,6 +9216,21 @@ const headerLookCatalog = defineExactCatalog()([
 		logoAccommodations: inlineClassicLogoAccommodations,
 		compile: cleanBaseHeader
 	},
+	{
+		id: asHeaderLookId("classic-centered-nav"),
+		label: "Centered nav",
+		visualTreatment: "solid-neutral",
+		layoutBehavior: "sticky",
+		configuration: {
+			structure: "inline-classic",
+			treatment: "solid-neutral",
+			behavior: "sticky"
+		},
+		openingRequirement: "none",
+		maxRecommendedNavItems: 6,
+		logoAccommodations: inlineClassicLogoAccommodations,
+		compile: classicCenteredNavHeader
+	},
 	{
 		id: asHeaderLookId("brand-solid"),
 		label: "Brand solid",
@@ -10012,6 +10397,74 @@ const typographyPresets = [
 				}
 			}
 		}
+	}),
+	defineTypographyPreset({
+		id: "typography-preset:fulcrum",
+		name: "Fulcrum",
+		description: "Newsreader serif headings over an IBM Plex Sans body, with an IBM Plex Mono eyebrow role for uppercase kickers and mono captions.",
+		defaultFonts: {
+			body: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+			heading: "Newsreader, Georgia, \"Times New Roman\", serif"
+		},
+		recommendedFonts: {
+			body: [
+				"IBM Plex Sans",
+				"Source Sans 3",
+				"Inter"
+			],
+			heading: [
+				"Newsreader",
+				"Source Serif 4",
+				"Lora"
+			]
+		},
+		slotPolicies: {
+			body: bodyReadablePolicy,
+			heading: displayHeadingPolicy
+		},
+		typography: {
+			body: {
+				family: "IBM Plex Sans, system-ui, -apple-system, sans-serif",
+				size: "lg",
+				weight: "regular",
+				lineHeight: "relaxed",
+				letterSpacing: "normal"
+			},
+			headings: {
+				default: {
+					family: "Newsreader, Georgia, \"Times New Roman\", serif",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					colorToken: "primary",
+					italic: null,
+					case: null
+				},
+				h1: {
+					size: "2xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h2: {
+					size: "xl",
+					weight: "medium",
+					lineHeight: "normal",
+					letterSpacing: "tight",
+					italic: null
+				},
+				h3: {
+					size: "md",
+					weight: "semibold",
+					lineHeight: "normal",
+					letterSpacing: "normal",
+					italic: null
+				}
+			},
+			scale: "spacious",
+			eyebrow: { family: "IBM Plex Mono, ui-monospace, \"SF Mono\", monospace" }
+		}
 	})
 ];
 new Map(typographyPresets.map((preset) => [preset.id, preset]));
@@ -10232,7 +10685,8 @@ const curatedSiteStyleIdValues = [
 	"site-style:bold-launch",
 	"site-style:south-west-twerk-school",
 	"site-style:kirtan-ornate",
-	"site-style:original-joy"
+	"site-style:original-joy",
+	"site-style:fulcrum"
 ];
 const quietBudget = {
 	accentDensity: "low",
@@ -11686,6 +12140,104 @@ const curatedSiteStyles = [
 			buttonChoice("showtime-pill")
 		],
 		paletteRecommendations: [paletteRecommendation("warm-dark-ember")]
+	}),
+	defineCuratedSiteStyle({
+		id: "site-style:fulcrum",
+		name: "Fulcrum",
+		headingDecoration: {
+			family: "short-center-rule",
+			colorToken: "accent"
+		},
+		description: "Spruce-ink and moss with an amber climax, Newsreader serif over IBM Plex Sans, hairline sage borders and flat buttons — a grounded, editorial physiotherapy skin.",
+		generationBrief: "Use a calm, clinician-led voice: precise, reassuring and specific rather than clinical-cold. Lead with the assessment-treatment-rehab journey, mono uppercase eyebrows for practical labels (hours, registrations, appointment windows), Newsreader serif headings over IBM Plex Sans body, and a single amber call to action as the page climax. Keep proof concrete (registrations, same-week appointments, return-to-activity outcomes) and avoid spa or hard-sell wellness language or medical claims.",
+		siteCreatorSelection: {
+			kind: "site_creator_keyword_heuristic",
+			priority: 28
+		},
+		selectionKeywordRules: [
+			{
+				kind: "substring",
+				value: "physiotherap"
+			},
+			{
+				kind: "word",
+				value: "physio"
+			},
+			{
+				kind: "phrase",
+				value: "sports injury"
+			},
+			{
+				kind: "phrase",
+				value: "rehab clinic"
+			},
+			{
+				kind: "substring",
+				value: "musculoskeletal"
+			},
+			{
+				kind: "phrase",
+				value: "sports therapy"
+			}
+		],
+		tokenRecipes: {
+			palette: "brand-led",
+			contrast: "standard",
+			radius: "rounded",
+			shadow: "subtle",
+			typography: "serif-editorial",
+			spacing: "airy",
+			motion: "subtle"
+		},
+		compositionBudget: quietBudget,
+		typographyPresetChoices: [
+			typographyChoice("typography-preset:fulcrum"),
+			typographyChoice("typography-preset:editorial-serif"),
+			typographyChoice("typography-preset:modern-sans")
+		],
+		defaultTypographyPresetId: "typography-preset:fulcrum",
+		themeOverrides: {
+			shadow: { colorToken: "primary" },
+			accordions: {
+				background: null,
+				spacing: "comfortable",
+				corners: "square",
+				border: null,
+				shadow: null,
+				icon: {
+					style: "plus-minus",
+					position: "right",
+					size: "md",
+					colorToken: "accent"
+				},
+				trigger: {
+					textColorToken: "primary",
+					fontWeight: "medium",
+					fontFamily: "heading",
+					fontScale: "md"
+				},
+				hover: { textColorToken: "secondary" },
+				content: { textColorToken: "muted" }
+			},
+			testimonialQuote: serifDisplayQuote
+		},
+		recommendedHeaderLookIds: [
+			"classic-centered-nav",
+			"serif-line",
+			"centered-calm",
+			"clean-base"
+		],
+		recommendedFooterLookIds: ["footer-editorial-columns", "footer-muted-grounding"],
+		buttonPersonalityChoices: [
+			buttonChoice("flat-ink"),
+			buttonChoice("confident-chip"),
+			buttonChoice("editorial-link")
+		],
+		paletteRecommendations: [
+			paletteRecommendation("brand-led-spruce"),
+			paletteRecommendation("warm-neutral-forest"),
+			paletteRecommendation("soft-natural-sage")
+		]
 	})
 ];
 new Map(curatedSiteStyles.map((style) => [style.id, style]));
@@ -12127,7 +12679,15 @@ function gradientToCss(config, tokens) {
 	const stops = config.stops.map((stop) => {
 		return `${tokens[stop.color] ?? "#000000"} ${stop.position}%`;
 	}).join(", ");
-	if (config.type === "radial") return `radial-gradient(circle at ${config.position ?? "center"}, ${stops})`;
+	const type = config.type ?? "linear";
+	if (type === "radial") {
+		const position = config.position ?? "center";
+		return `radial-gradient(${config.shape ?? "circle"} at ${position}, ${stops})`;
+	}
+	if (type === "conic") {
+		const position = config.position ?? "center";
+		return `conic-gradient(from ${config.angle ?? 0}deg at ${position}, ${stops})`;
+	}
 	return `linear-gradient(${config.angle ?? 180}deg, ${stops})`;
 }
 const BREAKPOINT_LG = 1024;
@@ -14921,7 +15481,7 @@ function resolveBackgroundColorValue(value, context) {
 	return resolveThemeColorReferenceValue(value, { palette: context.theme?.palette });
 }
 //#endregion
-//#region ../blocks/src/system/transforms/registry/_utils/sectionForegroundStyles.ts
+//#region ../blocks/src/system/transforms/registry/_utils/surfaceForegroundStyles.ts
 function readColorToken(input, key) {
 	const value = input[key];
 	return typeof value === "string" && value.trim().length > 0 ? value.trim() : null;
@@ -14930,18 +15490,17 @@ function resolveOptionalForegroundColor(value, context) {
 	if (!value) return null;
 	return resolveBackgroundColorValue(value, context);
 }
-function resolveSectionForegroundStyles(value, context) {
+function resolveSurfaceForegroundStyles(value, context) {
 	if (!value || typeof value !== "object") return {};
 	const input = value;
 	const resolvedText = resolveOptionalForegroundColor(readColorToken(input, "textColor"), context);
 	if (!resolvedText) return {};
-	return {
-		color: resolvedText,
-		"--section-text-color": resolvedText,
-		"--section-heading-color": resolveOptionalForegroundColor(readColorToken(input, "headingColor"), context) ?? resolvedText,
-		"--section-link-color": resolveOptionalForegroundColor(readColorToken(input, "linkColor"), context) ?? resolvedText,
-		"--section-supporting-color": resolveOptionalForegroundColor(readColorToken(input, "supportingColor"), context) ?? resolvedText
-	};
+	return { ...surfaceForegroundStyle({
+		text: resolvedText,
+		heading: resolveOptionalForegroundColor(readColorToken(input, "headingColor"), context) ?? void 0,
+		link: resolveOptionalForegroundColor(readColorToken(input, "linkColor"), context) ?? void 0,
+		supporting: resolveOptionalForegroundColor(readColorToken(input, "supportingColor"), context) ?? void 0
+	}) };
 }
 //#endregion
 //#region ../blocks/src/system/transforms/registry/boxStyles.ts
@@ -15275,67 +15834,12 @@ const containerStylesResolveBoxClassName = {
 	}
 };
 /**
-* Resolves section text color style object.
-*
-* The value should be the `_sectionStyles.background.textColor` token.
-* Returns an empty object when unset so the section inherits text color.
-*
-* Outputs both `color` and `--section-text-color` CSS variable so that
-* headings (which have explicit color rules in typography CSS) can inherit
-* the section's text color via the CSS variable cascade.
-*/
-const sectionTextColorStyleTransform = {
-	id: "sectionStyles.resolveTextColorStyle",
-	kind: "formatter",
-	summary: "Resolve section text color token into a style object",
-	run: (value, options, context) => {
-		const fallbackToken = options?.fallbackToken;
-		if (typeof value === "string" && value.trim()) {
-			const colorValue = resolveBackgroundColorValue(value.trim(), context);
-			return {
-				color: colorValue,
-				"--section-text-color": colorValue
-			};
-		}
-		if (typeof fallbackToken === "string" && fallbackToken.trim()) {
-			const colorValue = resolveBackgroundColorValue(fallbackToken.trim(), context);
-			return {
-				color: colorValue,
-				"--section-text-color": colorValue
-			};
-		}
-		return {};
-	}
-};
-/**
-* Resolves section heading color style object.
-*
-* The value should be the `_sectionStyles.background.headingColor` token.
-* Returns an empty object when unset so headings inherit from textColor or default.
-*
-* Outputs `--section-heading-color` CSS variable which typography CSS can use
-* to style headings differently from body text within a section.
-*/
-const sectionHeadingColorStyleTransform = {
-	id: "sectionStyles.resolveHeadingColorStyle",
-	kind: "formatter",
-	summary: "Resolve section heading color token into a style object",
-	run: (value, options, context) => {
-		const fallbackToken = options?.fallbackToken;
-		if (typeof value === "string" && value.trim()) return { "--section-heading-color": resolveBackgroundColorValue(value.trim(), context) };
-		if (typeof fallbackToken === "string" && fallbackToken.trim()) return { "--section-heading-color": resolveBackgroundColorValue(fallbackToken.trim(), context) };
-		return {};
-	}
-};
-/**
-* Resolves section foreground colors from the background object.
+* Resolves surface foreground colors from the background object.
 *
 * The value should be the full `_sectionStyles.background` object.
 * Outputs:
-* - `color` and `--section-text-color` from background.textColor
-* - `--section-heading-color` from background.headingColor (falls back to textColor if not set)
-* - `--section-link-color` from background.linkColor (falls back to textColor if not set)
-* - `--section-supporting-color` from background.supportingColor (falls back to textColor if not set)
+* - `color` and the complete `--rb-surface-*-color` contract
+* - optional roles fall back atomically to background.textColor
 *
 * This combined transform replaces separate foreground color transforms
 * when both need to be applied to the same style prop.
@@ -15343,8 +15847,8 @@ const sectionHeadingColorStyleTransform = {
 const sectionColorsStyleTransform = {
 	id: "sectionStyles.resolveColorsStyle",
 	kind: "formatter",
-	summary: "Resolve section foreground colors into a style object",
-	run: (value, _options, context) => resolveSectionForegroundStyles(value, context)
+	summary: "Resolve surface foreground colors into a style object",
+	run: (value, _options, context) => resolveSurfaceForegroundStyles(value, context)
 };
 /**
 * Maps semantic gap values to theme-aware gap classes.
@@ -15383,8 +15887,6 @@ const boxStylesTransforms = [
 	sectionClassNameTransform,
 	containerStylesResolveClassName,
 	containerStylesResolveBoxClassName,
-	sectionTextColorStyleTransform,
-	sectionHeadingColorStyleTransform,
 	sectionColorsStyleTransform,
 	{
 		id: "boxStyles.semanticGap",
@@ -16288,7 +16790,29 @@ const ctaRowFragment = defineFragment({
 	fields: [createCtasRepeater({
 		label: "Calls to action",
 		itemLabel: "CTA",
-		maxItems: 3
+		maxItems: 3,
+		button: { variants: [
+			{
+				value: "primary",
+				label: "Primary"
+			},
+			{
+				value: "secondary",
+				label: "Secondary"
+			},
+			{
+				value: "outline",
+				label: "Outline"
+			},
+			{
+				value: "link",
+				label: "Link"
+			},
+			{
+				value: "accent",
+				label: "Accent"
+			}
+		] }
 	})],
 	layout: [ctaRow({
 		collectionPath: "content.ctas",
@@ -16569,6 +17093,55 @@ function buildGridCardsLayout(className) {
 	return el("div", { className }, buildResponsiveGridCards());
 }
 /**
+* Build a single "featured editorial" testimonial card.
+*
+* This card type deliberately renders NO avatar/headshot: an amber quote mark,
+* the quote body, then the author name and a context line. Colour + surface
+* treatment is driven entirely by `variantClass` (see testimonials.css):
+*   - `rb-testimonials-fe-card--feature` → spruce-ink card (dark primary bg)
+*   - `rb-testimonials-fe-card--plain`   → white surface card
+*
+* Extra modifiers (`repeat`, `when`) are forwarded to the card node so the
+* caller can drive first-vs-rest branching.
+*/
+function buildFeaturedEditorialCard(variantClass, ...mods) {
+	const quoteMark = text({
+		as: "span",
+		className: "rb-testimonials-fe-qmark",
+		"aria-hidden": "true"
+	}, props({ value: "“" }));
+	const quote = richText({ className: "rb-testimonials-fe-quote rb-max-w-none" }, bind("testimonial.content.body"), when("testimonial.content.body"));
+	const meta = el("div", { className: "rb-testimonials-fe-meta" }, [text({
+		as: "strong",
+		className: "rb-testimonials-fe-name"
+	}, bind("testimonial.content.name", { fallback: "Anonymous" })), text({
+		as: "span",
+		className: "rb-testimonials-fe-context"
+	}, when("testimonial.content.jobTitle"), bind("testimonial.content.jobTitle"))]);
+	return el("div", { className: `rb-testimonials-fe-card ${variantClass}` }, [
+		quoteMark,
+		quote,
+		meta
+	], ...mods);
+}
+/**
+* Build the "featured editorial" layout: an asymmetric two-column arrangement
+* where the FIRST testimonial is a large featured (spruce-ink) card and the
+* remaining testimonials stack as white cards beside it.
+*
+* First-vs-rest branching is done without an offset primitive: the featured
+* card uses `repeat(..., { limit: 1 })` (entry 0 only), and the rest column
+* repeats over every entry but skips index 0 via `when("tIndex", { equals: 0,
+* not: true })`. The `$when` guard is re-evaluated per repeated item with the
+* index scope in context, so entry 0 produces no node in the rest column.
+*/
+function buildFeaturedEditorialLayout() {
+	return el("div", { className: "rb-testimonials-fe-grid" }, [buildFeaturedEditorialCard("rb-testimonials-fe-card--feature", repeat("data.entries", "testimonial", { limit: 1 })), el("div", { className: "rb-testimonials-fe-col" }, [buildFeaturedEditorialCard("rb-testimonials-fe-card--plain", repeat("data.entries", "testimonial", { indexName: "tIndex" }), when("tIndex", {
+		equals: 0,
+		not: true
+	}))])]);
+}
+/**
 * Fragment definition for testimonials carousel.
 * Provides field definitions and data loader configuration.
 *
@@ -19586,7 +20159,7 @@ const defaultLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
 		children: stack({
-			gap: "xl",
+			gap: "lg",
 			className: "rb-w-full rb-max-w-4xl rb-mx-auto"
 		}, [headingLayout, accordionLayout])
 	}),
@@ -19603,7 +20176,7 @@ const questionColumnsLayout = styledSection({
 	children: styledContainer({
 		baseClassName: "rb-relative rb-isolate",
 		children: stack({
-			gap: "xl",
+			gap: "lg",
 			className: "rb-w-full"
 		}, [headingLayout, questionColumnsAccordionLayout])
 	}),
@@ -19768,7 +20341,26 @@ const formattingTransforms = [
 	arrayLengthTransform,
 	jsonArrayTransform,
 	csvTransform,
-	marqueeLoopTransform
+	marqueeLoopTransform,
+	{
+		id: "value.mapToken",
+		kind: "formatter",
+		summary: "Map a state/enum value to a theme token colour (rgb(var(--tb-<role>)))",
+		schema: z$1.object({
+			/**
+			* Maps an input state/enum value (stringified) to a theme token ROLE name
+			* (e.g. `secondary`, `accent`, `muted`, `border`). The role is wrapped to
+			* `rgb(var(--tb-<role>))` so the result drops straight into a `style` binding.
+			*/
+			cases: z$1.record(z$1.string(), z$1.string()),
+			/** Role used when the value matches no case. Omit to yield `undefined`. */
+			fallback: z$1.string().optional()
+		}),
+		run: (value, options) => {
+			const role = options.cases[String(value)] ?? options.fallback;
+			return role ? `rgb(var(--tb-${role}))` : void 0;
+		}
+	}
 ];
 //#endregion
 //#region ../blocks/src/system/transforms/registry/ui.ts
@@ -20352,6 +20944,26 @@ const headerLogoTextVisibleTransform = {
 		return resolveHeaderBrandDisplay(asPartialObject(value)) !== "logo-only";
 	}
 };
+/**
+* Selects which classic-layout nav row should render.
+*
+* - `'inline'`  → classic variant with the historical logo-left / nav-right row
+* - `'centered'`→ classic variant with a centred (flex-1) nav and a right CTA
+* - `'other'`   → not a classic variant (centered/floating/transparent handle it)
+*
+* Consumed by the site-header block's `$when` gates so the two classic rows are
+* mutually exclusive without introducing a new top-level header variant.
+*/
+const classicNavModeTransform = {
+	id: "layout.classicNavMode",
+	kind: "formatter",
+	summary: "Resolve which classic-layout nav row to render",
+	run: (value) => {
+		const header = asPartialObject(value);
+		if (header?.variant !== "classic") return "other";
+		return header?.navPlacement === "center" ? "centered" : "inline";
+	}
+};
 const maxWidthClassTransform = {
 	id: "layout.maxWidthClass",
 	kind: "string",
@@ -20534,8 +21146,9 @@ const footerRootStyleTransform = {
 				styleParts.push(backgroundColorStyle(token));
 			}
 		}
-		if (visuals.textColorOverride) styleParts.push({ color: visuals.textColorOverride });
-		else if (visuals.textColorToken) styleParts.push(textColorStyle(visuals.textColorToken));
+		const foreground = visuals.textColorOverride ?? (visuals.textColorToken ? rgbColorValue(visuals.textColorToken) : null);
+		if (!visuals.isTransparent && foreground) styleParts.push(surfaceForegroundStyle({ text: foreground }));
+		else if (foreground) styleParts.push({ color: foreground });
 		styleParts.push(borderColorStyle("border"));
 		return mergeStyles(...styleParts);
 	}
@@ -20621,18 +21234,16 @@ const footerBottomBarStyleTransform = {
 		const styleParts = [];
 		const background = bottomBar?.background;
 		if (background?.type === "color") styleParts.push(backgroundColorStyle(background.color ?? "surface"));
-		if (bottomBar?.textColor) styleParts.push(textColorStyle(bottomBar.textColor));
 		const borderColorToken = bottomBar?.borderTop?.colorToken;
 		if (borderColorToken) styleParts.push(borderColorStyle(borderColorToken));
 		else styleParts.push(borderColorStyle("border"));
 		const borderWidth = bottomBar?.borderTop?.width;
 		if (borderWidth && borderWidth !== "none") styleParts.push({ borderTopWidth: borderWidth === "thin" ? "1px" : borderWidth === "medium" ? "2px" : "3px" });
 		else if (borderWidth === "none") styleParts.push({ borderTopWidth: "0px" });
-		if (!bottomBar?.textColor) {
-			const visuals = resolveBackgroundVisualStyles(extractBackgroundColorToken(background, "surface"), context.theme);
-			if (visuals.textColorOverride) styleParts.push({ color: visuals.textColorOverride });
-			else if (visuals.textColorToken) styleParts.push(textColorStyle(visuals.textColorToken));
-		}
+		const visuals = resolveBackgroundVisualStyles(extractBackgroundColorToken(background, "surface"), context.theme);
+		const foreground = bottomBar?.textColor ? rgbColorValue(bottomBar.textColor) : visuals.textColorOverride ?? (visuals.textColorToken ? rgbColorValue(visuals.textColorToken) : null);
+		if (background?.type === "color" && foreground) styleParts.push(surfaceForegroundStyle({ text: foreground }));
+		else if (foreground && bottomBar?.textColor) styleParts.push({ color: foreground });
 		return mergeStyles(...styleParts);
 	}
 };
@@ -20767,6 +21378,7 @@ const layoutTransforms = [
 	headerLogoClassTransform,
 	headerLogoMediaClassTransform,
 	headerLogoTextVisibleTransform,
+	classicNavModeTransform,
 	footerRootClassTransform,
 	headerRootStyleTransform,
 	headerSectionBackgroundTransform,
@@ -21173,7 +21785,18 @@ const classicLayout = inline({
 	logoRow,
 	createNavRow(`rb-ml-auto ${desktopOnlyDisplay("flex")} rb-gap-6`),
 	headerCta
-], when("$root.theme.header.variant", { equals: "classic" }));
+], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "inline"));
+const classicCenteredNavLayout = inline({
+	className: bindProp("$root.theme.header.maxWidth", {
+		transforms: pipe(tx("layout.maxWidthClass", { base: `rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6` })),
+		fallback: `rb-container rb-header-layout ${desktopOnlyDisplay("flex")} rb-w-full rb-items-center rb-gap-6`
+	}),
+	align: "center"
+}, [
+	logoRow,
+	createNavRow(`rb-flex-1 rb-justify-center ${desktopOnlyDisplay("flex")} rb-gap-6`, "center"),
+	headerCta
+], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "centered"));
 const centeredLayout = stack({
 	gap: "md",
 	align: "center",
@@ -21248,6 +21871,7 @@ const siteHeaderBlockDefinition = { manifest: createBlockManifest({
 	}, [
 		mobileHeaderBar,
 		classicLayout,
+		classicCenteredNavLayout,
 		centeredLayout,
 		transparentLayout,
 		floatingLayout,
@@ -21456,7 +22080,7 @@ const footerLayout = section({
 	style: { $bind: {
 		from: "$root.theme.footer",
 		transforms: [{ id: "layout.footerRootStyle" }],
-		fallback: mergeStyles(backgroundColorStyle("surface"), textColorStyle("text"), borderColorStyle("border"))
+		fallback: mergeStyles(backgroundColorStyle("surface"), surfaceForegroundStyle({ text: "rgb(var(--tb-text))" }), borderColorStyle("border"))
 	} }
 }, [
 	simpleFooterLayout,
@@ -21510,7 +22134,7 @@ const backgroundImageClassName = "rb-absolute rb-inset-0 rb-z-neg-10 rb-h-full r
 */
 const wrapVariant$2 = (variantLayout) => styledSection({
 	children: styledContainer({ children: stack({
-		gap: "xl",
+		gap: "lg",
 		className: "rb-relative"
 	}, [...testimonialsHeadingFragment.layout, variantLayout]) }),
 	baseClass: "",
@@ -21536,6 +22160,26 @@ const splitGridLayout = styledSection({
 	spacing: "comfortable",
 	imageClassName: backgroundImageClassName
 });
+const featuredEditorialLayout = styledSection({
+	children: styledContainer({
+		baseClassName: "rb-relative rb-isolate",
+		children: stack({
+			gap: "lg",
+			className: "rb-relative"
+		}, [el("div", { className: "rb-testimonials-fe-head" }, [text({
+			as: "h2",
+			className: "rb-text-left",
+			headingDecoration: "off"
+		}, when("content.heading"), bind("content.heading")), el("div", { className: "rb-testimonials-fe-leadin" }, [text({
+			as: "p",
+			className: "rb-prose",
+			style: textColorStyle("mutedText")
+		}, when("content.subheading"), bind("content.subheading"))])]), buildFeaturedEditorialLayout()])
+	}),
+	baseClass: "",
+	spacing: "comfortable",
+	imageClassName: backgroundImageClassName
+});
 const additionalFields = parseFieldDefinitions([
 	...testimonialsHeadingFragment.fields,
 	{
@@ -21623,6 +22267,7 @@ const testimonialsBlockDefinition = {
 			carousel: carouselLayout$1,
 			grid: gridLayout$1,
 			"split-grid": splitGridLayout,
+			"featured-editorial": featuredEditorialLayout,
 			highlight: highlightLayout
 		},
 		defaultVariant: "carousel",
@@ -21642,6 +22287,11 @@ const testimonialsBlockDefinition = {
 				description: "Heading on the left with testimonial cards on the right",
 				icon: "PanelLeft"
 			},
+			"featured-editorial": {
+				label: "Featured editorial",
+				description: "A large featured ink quote beside a column of stacked cards (no avatars)",
+				icon: "Quote"
+			},
 			highlight: {
 				label: "Highlight",
 				description: "A single, centered testimonial with no carousel",
@@ -22114,7 +22764,7 @@ function grid$2(props, children) {
 const cardsLayout = styledSection({
 	children: styledContainer({
 		rootType: "stack",
-		rootProps: { gap: "xl" },
+		rootProps: { gap: "lg" },
 		children: [stack({
 			gap: "sm",
 			className: "rb-feature-cards-heading rb-mx-auto rb-max-w-3xl rb-text-center"
@@ -24001,8 +24651,11 @@ const recoverEmptyDescriptionWhenActive = {
 	kind: "recover-empty-when-active",
 	placeholder: "Add description"
 };
-function eventSectionHeaderLayoutNodes() {
-	return [text({ as: "h2" }, bind("content.heading"), when("content.heading", { authoringPresence: recoverEmptyHeadingWhenActive })), richText({ className: "rb-prose rb-max-w-none" }, bind("content.description"), when("content.description", { authoringPresence: recoverEmptyDescriptionWhenActive }))];
+function eventSectionHeaderLayoutNodes(options = {}) {
+	const headingNode = text({ as: "h2" }, bind("content.heading"), when("content.heading", { authoringPresence: recoverEmptyHeadingWhenActive }));
+	const descriptionNode = richText({ className: "rb-prose rb-max-w-none" }, bind("content.description"), when("content.description", { authoringPresence: recoverEmptyDescriptionWhenActive }));
+	if (options.splitClassName) return [el("div", { className: options.splitClassName }, [headingNode, descriptionNode])];
+	return [headingNode, descriptionNode];
 }
 //#endregion
 //#region ../blocks/src/system/blocks/shop.shared.ts
@@ -24069,7 +24722,8 @@ const eventCalendarDisplayModeValues = [
 	"combined",
 	"calendar",
 	"list",
-	"timetable"
+	"timetable",
+	"week-board"
 ];
 const eventCalendarDefaultViewValues = ["month", "week"];
 const eventCalendarListLayoutValues = [
@@ -26511,7 +27165,7 @@ const eventCalendarLayout = [styledSection({
 	children: styledContainer({
 		rootType: "stack",
 		rootProps: { gap: "lg" },
-		children: [...eventSectionHeaderLayoutNodes(), el("event-calendar", withApiBindings({
+		children: [...eventSectionHeaderLayoutNodes({ splitClassName: "event-section-head event-section-head--split" }), el("event-calendar", withApiBindings({
 			events: { $bind: { from: "data.events" } },
 			stage: { $bind: {
 				from: "$root.previewStage",
@@ -26622,6 +27276,10 @@ const eventCalendarAdditionalFields = [
 				value: "timetable",
 				label: "Timetable"
 			},
+			{
+				value: "week-board",
+				label: "Week board"
+			},
 			{
 				value: "list",
 				label: "List"
@@ -26804,7 +27462,8 @@ const eventCalendarAdditionalFields = [
 				oneOf: [
 					"combined",
 					"calendar",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}
 		}
@@ -26907,7 +27566,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}
 		}
@@ -26942,7 +27602,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -26965,7 +27626,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -26988,7 +27650,8 @@ const eventCalendarAdditionalFields = [
 					"combined",
 					"calendar",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, {
 				field: "showFilters",
@@ -27010,7 +27673,8 @@ const eventCalendarAdditionalFields = [
 				oneOf: [
 					"combined",
 					"list",
-					"timetable"
+					"timetable",
+					"week-board"
 				]
 			}, { allOf: [{
 				field: "variant",
@@ -27186,6 +27850,7 @@ const eventCalendarVariants = {
 	combined: eventCalendarLayout[0],
 	calendar: eventCalendarLayout[0],
 	timetable: eventCalendarLayout[0],
+	"week-board": eventCalendarLayout[0],
 	list: eventCalendarLayout[0]
 };
 const eventCalendarContentShape = {
@@ -27199,6 +27864,7 @@ const eventCalendarContentShape = {
 				{ value: "combined" },
 				{ value: "calendar" },
 				{ value: "timetable" },
+				{ value: "week-board" },
 				{ value: "list" }
 			]
 		},
@@ -27265,6 +27931,7 @@ const eventCalendarBlockDefinition = {
 			combined: { label: "Combined" },
 			calendar: { label: "Calendar" },
 			timetable: { label: "Timetable" },
+			"week-board": { label: "Week board" },
 			list: { label: "List" }
 		}
 	}, eventCalendarContentShape),
@@ -32442,6 +33109,12 @@ const systemBlockDefinitions = [
 				family: "centered",
 				weight: "featured",
 				bias: "soft"
+			}),
+			layoutProfile({
+				variantKey: "featured-editorial",
+				family: "split",
+				weight: "featured",
+				bias: "soft"
 			})
 		]
 	})),
@@ -32574,6 +33247,11 @@ const systemBlockDefinitions = [
 				variantKey: "timetable",
 				family: "stack",
 				weight: "standard"
+			}),
+			layoutProfile({
+				variantKey: "week-board",
+				family: "stack",
+				weight: "standard"
 			})
 		]
 	})),
@@ -32882,8 +33560,8 @@ const backgroundTransforms = [
 	{
 		id: "background.resolveColorsStyle",
 		kind: "formatter",
-		summary: "Resolve section foreground colors from a background object into scoped CSS vars",
-		run: (value, _options, context) => resolveSectionForegroundStyles(value, context)
+		summary: "Resolve surface foreground colors from a background object into scoped CSS vars",
+		run: (value, _options, context) => resolveSurfaceForegroundStyles(value, context)
 	},
 	{
 		id: "background.resolveAllowOverflow",