@riverbankcms/sdk 0.144.0 → 0.146.0

package/dist/server/theme-bridge.mjs

@@ -4809,12 +4809,23 @@ function defineExactCatalog() {
 function asDesignBlockId(value) {
 	return brandNonEmptyString(value, "DesignBlockId");
 }
+function asDesignBoundaryId(value) {
+	const boundaryId = brandNonEmptyString(value, "DesignBoundaryId");
+	if (!boundaryId.startsWith("boundary:")) throw new Error(`DesignBoundaryId must start with "boundary:". Received: ${value}`);
+	return boundaryId;
+}
+function asLayoutVariantKey(value) {
+	return brandNonEmptyString(value, "LayoutVariantKey");
+}
 function asAppearancePresetId(value) {
 	return brandNonEmptyString(value, "AppearancePresetId");
 }
 function asBoundaryOptionId(value) {
 	return brandNonEmptyString(value, "BoundaryOptionId");
 }
+function asPageFlowPresetId(value) {
+	return brandNonEmptyString(value, "PageFlowPresetId");
+}
 function asSiteStyleId(value) {
 	const siteStyleId = brandNonEmptyString(value, "SiteStyleId");
 	if (!siteStyleId.startsWith("site-style:")) throw new Error(`SiteStyleId must start with "site-style:". Received: ${value}`);
@@ -4823,6 +4834,18 @@ function asSiteStyleId(value) {
 function asDesignSystemTemplateId(value) {
 	return brandNonEmptyString(value, "DesignSystemTemplateId");
 }
+function toNonEmptyReadonlyArray(values) {
+	const [first, ...rest] = values;
+	return first === void 0 ? null : [first, ...rest];
+}
+function requireNonEmptyReadonlyArray(values, message = "Expected a non-empty array.") {
+	const result = toNonEmptyReadonlyArray(values);
+	if (!result) throw new Error(message);
+	return result;
+}
+function makeBoundaryId(previousBlockId, nextBlockId) {
+	return asDesignBoundaryId(`boundary:${encodeURIComponent(previousBlockId)}:${encodeURIComponent(nextBlockId)}`);
+}
 function brandNonEmptyString(value, label) {
 	if (value.length === 0) throw new Error(`${label} must be a non-empty string.`);
 	return value;
@@ -4987,16 +5010,18 @@ const themeV2RuntimeStyleFieldNames = [
 	"_frameStyles",
 	"_sectionStyles",
 	"_containerStyles",
-	"_cardStyles",
-	"_transitionStyles",
-	"styleGroup"
+	"_cardStyles"
 ];
 const themeV2BlockSpecificRawStyleFieldNames = [
 	"_contentCardStyles",
 	"_heroLayoutStyles",
 	"_textCardStyles"
 ];
-const themeV2NormalEditorRawStyleFieldNames = [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
+const themeV2NormalEditorRawStyleFieldNames = [
+	...themeV2RuntimeStyleFieldNames,
+	...themeV2BlockSpecificRawStyleFieldNames,
+	"styleGroup"
+];
 new Set(themeV2NormalEditorRawStyleFieldNames);
 [...themeV2RuntimeStyleFieldNames, ...themeV2BlockSpecificRawStyleFieldNames];
 const pageDesignEditorBackgroundOverrideOwner = "page-design-editor";
@@ -8941,6 +8966,261 @@ z.object({
 	authority: styleAuthoritySchema
 }).strict();
 //#endregion
+//#region ../theme-core/src/site-styles/transitionCatalogue.ts
+/**
+* Family order for pickers. Entries below are listed family by family in this
+* same order, so the flat option list and the grouped families agree.
+*/
+const transitionCatalogueFamilies = [
+	{
+		id: "gradient",
+		label: "Gradient"
+	},
+	{
+		id: "wave",
+		label: "Wave"
+	},
+	{
+		id: "angle",
+		label: "Angle"
+	}
+];
+const mediumHeight = "6rem + 2px";
+const compactHeight = "4.5rem + 2px";
+const largeHeight = "7rem + 2px";
+/**
+* The single source of transition vocabulary. Order is significant: it is the
+* order of `boundaryOptions` (after `none`) and of each family's variants,
+* which persisted pins, page-flow presets and the editor picker all rely on.
+*
+* Shapes match what `generateLayoutCss` draws today. Structured
+* amplitude/frequency treatments (issue 826) extend this list later.
+*/
+const transitionCatalogueEntries = defineExactCatalog()([
+	{
+		intent: "soft-fade-short",
+		optionId: asBoundaryOptionId("break:soft"),
+		family: "gradient",
+		variantId: "soft",
+		label: "Soft",
+		variantLabel: "Soft",
+		treatment: {
+			kind: "soft-fade",
+			height: "medium",
+			curve: "soft"
+		},
+		size: "medium",
+		heightExpression: mediumHeight,
+		shape: { kind: "fade" }
+	},
+	{
+		intent: "soft-fade-long",
+		optionId: asBoundaryOptionId("break:spacious"),
+		family: "gradient",
+		variantId: "spacious",
+		label: "Spacious",
+		variantLabel: "Spacious",
+		treatment: {
+			kind: "soft-fade",
+			height: "large",
+			curve: "spacious"
+		},
+		size: "spacious",
+		heightExpression: "10rem",
+		shape: { kind: "fade" }
+	},
+	{
+		intent: "soft-fade-expansive",
+		optionId: asBoundaryOptionId("break:expansive"),
+		family: "gradient",
+		variantId: "expansive",
+		label: "Expansive",
+		variantLabel: "Expansive",
+		treatment: {
+			kind: "soft-fade",
+			height: "expansive",
+			curve: "expansive"
+		},
+		size: "expansive",
+		heightExpression: "14rem",
+		shape: { kind: "fade" }
+	},
+	{
+		intent: "wave-edge-balanced",
+		optionId: asBoundaryOptionId("break:wave-balanced"),
+		family: "wave",
+		variantId: "balanced",
+		label: "Balanced wave",
+		variantLabel: "Balanced",
+		treatment: {
+			kind: "wave-edge",
+			height: "medium",
+			amplitude: "balanced",
+			rhythm: "double",
+			symmetry: "symmetrical"
+		},
+		size: "medium",
+		heightExpression: mediumHeight,
+		shape: {
+			kind: "wave",
+			mask: "balanced"
+		}
+	},
+	{
+		intent: "wave-edge",
+		optionId: asBoundaryOptionId("break:wave"),
+		family: "wave",
+		variantId: "classic",
+		label: "Classic wave",
+		variantLabel: "Classic",
+		treatment: {
+			kind: "wave-edge",
+			height: "medium",
+			amplitude: "balanced",
+			rhythm: "double",
+			symmetry: "asymmetrical"
+		},
+		size: "medium",
+		heightExpression: mediumHeight,
+		shape: {
+			kind: "wave",
+			mask: "classic"
+		}
+	},
+	{
+		intent: "wave-edge-gentle",
+		optionId: asBoundaryOptionId("break:wave-gentle"),
+		family: "wave",
+		variantId: "gentle",
+		label: "Gentle wave",
+		variantLabel: "Gentle",
+		treatment: {
+			kind: "wave-edge",
+			height: "compact",
+			amplitude: "subtle",
+			rhythm: "single",
+			symmetry: "symmetrical"
+		},
+		size: "compact",
+		heightExpression: compactHeight,
+		shape: {
+			kind: "wave",
+			mask: "gentle"
+		}
+	},
+	{
+		intent: "wave-edge-bold",
+		optionId: asBoundaryOptionId("break:wave-bold"),
+		family: "wave",
+		variantId: "bold",
+		label: "Bold wave",
+		variantLabel: "Bold",
+		treatment: {
+			kind: "wave-edge",
+			height: "large",
+			amplitude: "bold",
+			rhythm: "double",
+			symmetry: "symmetrical"
+		},
+		size: "large",
+		heightExpression: largeHeight,
+		shape: {
+			kind: "wave",
+			mask: "bold"
+		}
+	},
+	{
+		intent: "wave-edge-drift",
+		optionId: asBoundaryOptionId("break:wave-drift"),
+		family: "wave",
+		variantId: "drift",
+		label: "Drift wave",
+		variantLabel: "Drift",
+		treatment: {
+			kind: "wave-edge",
+			height: "medium",
+			amplitude: "balanced",
+			rhythm: "double",
+			symmetry: "drift"
+		},
+		size: "medium",
+		heightExpression: mediumHeight,
+		shape: {
+			kind: "wave",
+			mask: "drift"
+		}
+	},
+	{
+		intent: "angle-edge-subtle",
+		optionId: asBoundaryOptionId("break:angle-subtle"),
+		family: "angle",
+		variantId: "subtle",
+		label: "Subtle angle",
+		variantLabel: "Subtle",
+		treatment: {
+			kind: "angle-edge",
+			height: "compact",
+			slope: "subtle",
+			direction: "forward"
+		},
+		size: "compact",
+		heightExpression: compactHeight,
+		shape: {
+			kind: "angle",
+			polygon: {
+				startTopPercent: 34,
+				endTopPercent: 18
+			}
+		}
+	},
+	{
+		intent: "angle-edge",
+		optionId: asBoundaryOptionId("break:angle-balanced"),
+		family: "angle",
+		variantId: "balanced",
+		label: "Balanced angle",
+		variantLabel: "Balanced",
+		treatment: {
+			kind: "angle-edge",
+			height: "medium",
+			slope: "balanced",
+			direction: "forward"
+		},
+		size: "medium",
+		heightExpression: mediumHeight,
+		shape: {
+			kind: "angle",
+			polygon: {
+				startTopPercent: 42,
+				endTopPercent: 8
+			}
+		}
+	},
+	{
+		intent: "angle-edge-steep",
+		optionId: asBoundaryOptionId("break:angle-steep"),
+		family: "angle",
+		variantId: "steep",
+		label: "Steep angle",
+		variantLabel: "Steep",
+		treatment: {
+			kind: "angle-edge",
+			height: "large",
+			slope: "steep",
+			direction: "forward"
+		},
+		size: "large",
+		heightExpression: largeHeight,
+		shape: {
+			kind: "angle",
+			polygon: {
+				startTopPercent: 54,
+				endTopPercent: 0
+			}
+		}
+	}
+]);
+//#endregion
 //#region ../theme-core/src/site-styles/sectionTransitions.ts
 function boundaryRuntimeMetrics(family, size, heightExpression) {
 	return {
@@ -8950,19 +9230,913 @@ function boundaryRuntimeMetrics(family, size, heightExpression) {
 		reserveCss: `calc((${heightExpression}) / 2)`
 	};
 }
-boundaryRuntimeMetrics("gradient", "medium", "6rem + 2px"), boundaryRuntimeMetrics("gradient", "spacious", "10rem"), boundaryRuntimeMetrics("gradient", "expansive", "14rem"), boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"), boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"), boundaryRuntimeMetrics("wave", "compact", "4.5rem + 2px"), boundaryRuntimeMetrics("wave", "large", "7rem + 2px"), boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"), boundaryRuntimeMetrics("angle", "medium", "6rem + 2px"), boundaryRuntimeMetrics("angle", "compact", "4.5rem + 2px"), boundaryRuntimeMetrics("angle", "large", "7rem + 2px");
-asBoundaryOptionId("break:none");
-asBoundaryOptionId("break:soft");
-asBoundaryOptionId("break:spacious");
-asBoundaryOptionId("break:expansive");
+new Map(transitionCatalogueEntries.map((entry) => [entry.intent, entry]));
+new Map(transitionCatalogueEntries.map((entry) => [entry.intent, boundaryRuntimeMetrics(entry.family, entry.size, entry.heightExpression)]));
+/**
+* The catalogue's compile-time coverage check guarantees an entry per
+* decorative intent, so a miss here is a broken invariant, not bad input.
+*/
+function requireCatalogueValue(values, intent) {
+	const value = values.get(intent);
+	if (value === void 0) throw new Error(`Transition catalogue has no entry for ${intent}`);
+	return value;
+}
+const noneBoundaryOption = {
+	id: asBoundaryOptionId("break:none"),
+	label: "None",
+	transitionAfter: "none",
+	treatment: { kind: "none" }
+};
+const boundaryOptionByIntent = new Map(transitionCatalogueEntries.map((entry) => [entry.intent, {
+	id: entry.optionId,
+	label: entry.label,
+	transitionAfter: entry.intent,
+	treatment: entry.treatment
+}]));
+function boundaryOptionForTransitionIntent(intent) {
+	return requireCatalogueValue(boundaryOptionByIntent, intent);
+}
+const softBoundaryOption = boundaryOptionForTransitionIntent("soft-fade-short");
+const spaciousBoundaryOption = boundaryOptionForTransitionIntent("soft-fade-long");
+boundaryOptionForTransitionIntent("soft-fade-expansive");
+boundaryOptionForTransitionIntent("wave-edge");
+boundaryOptionForTransitionIntent("wave-edge-balanced");
+boundaryOptionForTransitionIntent("wave-edge-gentle");
+boundaryOptionForTransitionIntent("wave-edge-bold");
+boundaryOptionForTransitionIntent("wave-edge-drift");
+boundaryOptionForTransitionIntent("angle-edge-subtle");
+boundaryOptionForTransitionIntent("angle-edge");
+boundaryOptionForTransitionIntent("angle-edge-steep");
+/**
+* Must remain non-empty; downstream code indexes `[0]` as the documented default.
+*/
+const boundaryOptions = [noneBoundaryOption, ...transitionCatalogueEntries.map((entry) => boundaryOptionForTransitionIntent(entry.intent))];
+const noneTransitionVariant = {
+	familyId: "none",
+	variantId: "none",
+	label: "None",
+	boundaryOption: noneBoundaryOption
+};
+function transitionVariantForEntry(entry) {
+	return {
+		familyId: entry.family,
+		variantId: entry.variantId,
+		label: entry.variantLabel,
+		boundaryOption: boundaryOptionForTransitionIntent(entry.intent)
+	};
+}
+const sectionTransitionFamilies = [{
+	id: "none",
+	label: "None",
+	variants: [noneTransitionVariant]
+}, ...transitionCatalogueFamilies.map((family) => ({
+	id: family.id,
+	label: family.label,
+	variants: requireNonEmptyReadonlyArray(transitionCatalogueEntries.filter((entry) => entry.family === family.id).map(transitionVariantForEntry), `Transition family ${family.id} has no catalogue entries.`)
+}))];
+new Map(boundaryOptions.map((option) => [option.id, option]));
+new Map(boundaryOptions.map((option) => [stableTreatmentKey(option.treatment), option]));
+new Map(sectionTransitionFamilies.flatMap((family) => family.variants.map((variant) => [variant.boundaryOption.id, variant])));
+new Map(sectionTransitionFamilies.map((family) => [family.id, family]));
+function stableTreatmentKey(treatment) {
+	switch (treatment.kind) {
+		case "none": return "none";
+		case "soft-fade": return `${treatment.kind}:${treatment.height}:${treatment.curve}`;
+		case "wave-edge": return [
+			treatment.kind,
+			treatment.height,
+			treatment.amplitude,
+			treatment.rhythm,
+			treatment.symmetry
+		].join(":");
+		case "angle-edge": return [
+			treatment.kind,
+			treatment.height,
+			treatment.slope,
+			treatment.direction
+		].join(":");
+		case "legacy-unsupported": return `${treatment.kind}:${treatment.boundaryOptionId}`;
+	}
+}
+asPageFlowPresetId("flow:quiet"), noneBoundaryOption.id, asPageFlowPresetId("flow:balanced"), softBoundaryOption.id, asPageFlowPresetId("flow:expressive"), spaciousBoundaryOption.id;
+asBoundaryOptionId("break:unknown");
+const pageDesignUserPinnedAppearanceChoiceSchema = z.object({
+	kind: z.literal("user-pinned"),
+	value: z.string().min(1).transform(asAppearancePresetId)
+}).strict();
+const pageDesignUserPinnedBoundaryChoiceSchema = z.object({
+	kind: z.literal("user-pinned"),
+	value: z.string().min(1).transform(asBoundaryOptionId)
+}).strict();
+const pageDesignBoundaryTreatmentSchema = z.discriminatedUnion("kind", [
+	z.object({ kind: z.literal("none") }).strict(),
+	z.object({
+		kind: z.literal("soft-fade"),
+		height: z.enum([
+			"compact",
+			"medium",
+			"large",
+			"expansive"
+		]),
+		curve: z.enum([
+			"soft",
+			"spacious",
+			"expansive"
+		])
+	}).strict(),
+	z.object({
+		kind: z.literal("wave-edge"),
+		height: z.enum([
+			"compact",
+			"medium",
+			"large"
+		]),
+		amplitude: z.enum([
+			"subtle",
+			"balanced",
+			"bold"
+		]),
+		rhythm: z.enum(["single", "double"]),
+		symmetry: z.enum([
+			"symmetrical",
+			"asymmetrical",
+			"drift"
+		])
+	}).strict(),
+	z.object({
+		kind: z.literal("angle-edge"),
+		height: z.enum([
+			"compact",
+			"medium",
+			"large"
+		]),
+		slope: z.enum([
+			"subtle",
+			"balanced",
+			"steep"
+		]),
+		direction: z.enum(["forward", "reverse"])
+	}).strict(),
+	z.object({
+		kind: z.literal("legacy-unsupported"),
+		boundaryOptionId: z.string().min(1).transform(asBoundaryOptionId)
+	}).strict()
+]);
+const pageDesignUserPinnedBoundaryTreatmentChoiceSchema = z.object({
+	kind: z.literal("user-pinned"),
+	value: pageDesignBoundaryTreatmentSchema
+}).strict();
+const pageDesignBlockLookPinSchema = z.object({
+	blockId: z.string().min(1).transform(asDesignBlockId),
+	blockKind: z.string().min(1),
+	choice: pageDesignUserPinnedAppearanceChoiceSchema
+}).strict();
+const pageDesignBoundaryPinSchema = z.object({
+	boundaryId: z.string().min(1).transform(asDesignBoundaryId),
+	previousBlockId: z.string().min(1).transform(asDesignBlockId),
+	nextBlockId: z.string().min(1).transform(asDesignBlockId),
+	choice: pageDesignUserPinnedBoundaryTreatmentChoiceSchema
+}).strict().superRefine(validateBoundaryPinIdMatchesBlocks);
+const legacyPageDesignBoundaryPinSchema = z.object({
+	boundaryId: z.string().min(1).transform(asDesignBoundaryId),
+	previousBlockId: z.string().min(1).transform(asDesignBlockId),
+	nextBlockId: z.string().min(1).transform(asDesignBlockId),
+	choice: pageDesignUserPinnedBoundaryChoiceSchema
+}).strict().superRefine(validateBoundaryPinIdMatchesBlocks);
+z.object({
+	schemaVersion: z.literal(1),
+	siteStyleId: z.string().min(1).transform(asSiteStyleId),
+	pageFlowPresetId: z.string().min(1).transform(asPageFlowPresetId),
+	blockLookPins: z.array(pageDesignBlockLookPinSchema),
+	boundaryPins: z.array(legacyPageDesignBoundaryPinSchema)
+}).strict().superRefine(validateUniquePageDesignPins);
+z.object({
+	schemaVersion: z.literal(2),
+	siteStyleId: z.string().min(1).transform(asSiteStyleId),
+	pageFlowPresetId: z.string().min(1).transform(asPageFlowPresetId),
+	blockLookPins: z.array(pageDesignBlockLookPinSchema),
+	boundaryPins: z.array(pageDesignBoundaryPinSchema)
+}).strict().superRefine(validateUniquePageDesignPins);
+function addDuplicateStringIssues(ctx, input) {
+	const seen = /* @__PURE__ */ new Set();
+	const duplicates = /* @__PURE__ */ new Set();
+	for (const value of input.values) {
+		if (seen.has(value)) duplicates.add(value);
+		seen.add(value);
+	}
+	for (const duplicate of duplicates) ctx.addIssue({
+		code: z.ZodIssueCode.custom,
+		path: [...input.path],
+		message: `Duplicate ${input.label}: ${duplicate}.`
+	});
+}
+function validateBoundaryPinIdMatchesBlocks(pin, ctx) {
+	const expectedBoundaryId = makeBoundaryId(pin.previousBlockId, pin.nextBlockId);
+	if (pin.boundaryId !== expectedBoundaryId) ctx.addIssue({
+		code: z.ZodIssueCode.custom,
+		path: ["boundaryId"],
+		message: `Boundary id must match previousBlockId and nextBlockId. Expected ${expectedBoundaryId}.`
+	});
+}
+function validateUniquePageDesignPins(intent, ctx) {
+	addDuplicateStringIssues(ctx, {
+		values: intent.blockLookPins.map((pin) => pin.blockId),
+		path: ["blockLookPins"],
+		label: "block Look pin"
+	});
+	addDuplicateStringIssues(ctx, {
+		values: intent.boundaryPins.map((pin) => makeBoundaryId(pin.previousBlockId, pin.nextBlockId)),
+		path: ["boundaryPins"],
+		label: "boundary pin"
+	});
+}
+//#endregion
+//#region ../theme-core/src/site-styles/appearancePresetResolution.ts
+function assertValidOptionGroups(preset) {
+	preset.optionGroups?.forEach((group) => {
+		defineLookOptionGroup(group);
+	});
+}
+/**
+* Every Look carries a card role. A Look that says nothing about cards renders
+* none, which is the overwhelming majority of them; the card-bearing ones name
+* the role they want and the site style owns how it looks.
+*/
+function defineBlockAppearancePreset(preset) {
+	assertValidOptionGroups(preset);
+	return {
+		...preset,
+		design: {
+			...preset.design,
+			cardRole: preset.design.cardRole ?? "none"
+		}
+	};
+}
+//#endregion
+//#region ../theme-core/src/site-styles/blockAppearancePresets.ts
+/**
+* A Look is a composition: which section surface, which content frame, and —
+* where it wants one — which *card role* it asks the site style for. It never
+* states how a card looks; that is the site style's identity.
+*
+* A Look with no `cardRole` asks the site style for no card at all
+* (`defineBlockAppearancePreset` defaults it to `none`) — the block's own
+* composition still governs how its items look. The per-Look rationale for the card-bearing ones lives
+* in `.project/plans/1297-card-role-contract-site-styles-own-card-surfaces/mapping-table.md`.
+*/
+const brandScrimOptionGroups = [{
+	id: "image-surface-treatment",
+	label: "Treatment",
+	defaultOptionId: "brand-scrim-primary",
+	options: [{
+		id: "brand-scrim-primary",
+		label: "Brand scrim",
+		designPatch: { imageSurfaceTreatment: {
+			kind: "brand-scrim",
+			token: "primary"
+		} }
+	}, {
+		id: "neutral-scrim",
+		label: "Neutral scrim",
+		designPatch: { imageSurfaceTreatment: { kind: "neutral-scrim" } }
+	}]
+}];
+const microBannerLayoutPatches = [{
+	constraints: { layoutVariantKeys: ["micro"] },
+	designPatch: { sectionHeight: "banner" }
+}];
+defineBlockAppearancePreset({
+	id: "hero-immersive-image",
+	target: "hero",
+	label: "Immersive image hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	layoutPatches: [{
+		constraints: { layoutVariantKeys: ["micro"] },
+		designPatch: {
+			sectionHeight: "banner",
+			heroTypographyScale: "display"
+		}
+	}],
+	design: {
+		sectionSurface: "hero-image",
+		contentFrame: plainFrame,
+		sectionHeight: "hero",
+		heroComposition: "center",
+		heroTypographyScale: "display",
+		imageSurfaceTreatment: { kind: "neutral-wash" }
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-bottom-left-panel",
+	target: "hero",
+	label: "Bottom-left panel hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	optionGroups: [{
+		id: "image-surface-treatment",
+		label: "Treatment",
+		defaultOptionId: "neutral-scrim",
+		options: [{
+			id: "neutral-scrim",
+			label: "Neutral scrim",
+			designPatch: { imageSurfaceTreatment: {
+				kind: "neutral-scrim",
+				intensity: "balanced"
+			} }
+		}, {
+			id: "brand-scrim-primary",
+			label: "Brand scrim",
+			designPatch: { imageSurfaceTreatment: {
+				kind: "brand-scrim",
+				token: "primary",
+				intensity: "balanced"
+			} }
+		}]
+	}],
+	layoutPatches: [{
+		constraints: { layoutVariantKeys: ["micro"] },
+		designPatch: {
+			sectionHeight: "banner",
+			heroTypographyScale: "editorial"
+		}
+	}],
+	design: {
+		sectionSurface: "hero-image",
+		contentFrame: panelFrame("raised"),
+		sectionHeight: "immersive",
+		heroComposition: "bottom-left",
+		heroTypographyScale: "display",
+		imageSurfaceTreatment: {
+			kind: "neutral-scrim",
+			intensity: "balanced"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-poster-image",
+	target: "hero",
+	label: "Poster image hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	layoutPatches: [{
+		constraints: { layoutVariantKeys: ["micro"] },
+		designPatch: {
+			sectionHeight: "banner",
+			heroTypographyScale: "display"
+		}
+	}],
+	design: {
+		sectionSurface: "hero-image",
+		contentFrame: plainFrame,
+		sectionHeight: "immersive",
+		heroComposition: "center",
+		heroTypographyScale: "poster",
+		imageSurfaceTreatment: {
+			kind: "brand-scrim",
+			token: "primary",
+			intensity: "strong"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-brand-scrim",
+	target: "hero",
+	label: "Brand scrim image hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	optionGroups: brandScrimOptionGroups,
+	layoutPatches: microBannerLayoutPatches,
+	design: {
+		sectionSurface: "hero-image",
+		contentFrame: plainFrame,
+		sectionHeight: "immersive",
+		heroComposition: "center",
+		heroTypographyScale: "display",
+		imageSurfaceTreatment: {
+			kind: "brand-scrim",
+			token: "primary"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-brand-scrim-fixed-frame",
+	target: "hero",
+	label: "Fixed-frame brand scrim hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	optionGroups: brandScrimOptionGroups,
+	layoutPatches: microBannerLayoutPatches,
+	design: {
+		sectionSurface: "hero-image",
+		contentFrame: plainFrame,
+		sectionHeight: "immersive",
+		heroComposition: "center",
+		heroTypographyScale: "display",
+		imageSurfaceTreatment: {
+			kind: "brand-scrim",
+			token: "primary"
+		},
+		imageSurfaceMotion: "fixed-frame",
+		eyebrowTreatment: "accent-pill-bounce"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-brand-depth-expressive",
+	target: "hero",
+	label: "Expressive brand-depth hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["centered", "compact"] },
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		heroComposition: "center",
+		heroTypographyScale: "editorial",
+		eyebrowTreatment: "accent-pill-bounce"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-contained-intro",
+	target: "hero",
+	label: "Contained intro hero",
+	blockKinds: ["block.hero"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: panelFrame("inset"),
+		heroComposition: "center",
+		heroTypographyScale: "editorial"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-split-editorial",
+	target: "hero",
+	label: "Editorial split hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["split"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		heroTypographyScale: "editorial"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-split-brand",
+	target: "hero",
+	label: "Brand split hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["split"] },
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		heroTypographyScale: "display",
+		eyebrowTreatment: "accent-pill-bounce"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-split-soft-panel",
+	target: "hero",
+	label: "Soft panel split hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["split"] },
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: panelFrame("raised"),
+		heroTypographyScale: "editorial"
+	}
+}), defineBlockAppearancePreset({
+	id: "hero-split-accent",
+	target: "hero",
+	label: "Accent split hero",
+	blockKinds: ["block.hero"],
+	constraints: { layoutFamilies: ["split"] },
+	design: {
+		sectionSurface: "accent-band",
+		contentFrame: panelFrame("raised"),
+		heroTypographyScale: "display"
+	}
+}), defineBlockAppearancePreset({
+	id: "intro-editorial-statement",
+	target: "intro",
+	label: "Editorial intro statement",
+	blockKinds: ["block.intro"],
+	constraints: { layoutVariantKeys: ["centered-copy", "statement-copy"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "intro",
+			treatment: "editorial-statement"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "intro-portrait-bio",
+	target: "intro",
+	label: "Portrait and bio",
+	blockKinds: ["block.intro"],
+	constraints: { layoutVariantKeys: ["media-copy"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "intro",
+			treatment: "portrait-bio"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-default-cards",
+	target: "offerings",
+	label: "Default offering cards",
+	blockKinds: ["block.offerings-preview"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-secondary-cards",
+	target: "offerings",
+	label: "Secondary offering cards",
+	blockKinds: ["block.offerings-preview"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: plainFrame,
+		cardRole: "alternative"
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-non-carded",
+	target: "offerings",
+	label: "Non-carded offerings",
+	blockKinds: ["block.offerings-preview"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: plainFrame,
+		cardRole: "open"
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-paired-feature-cards",
+	target: "offerings",
+	label: "Paired feature cards",
+	blockKinds: ["block.offerings-preview"],
+	constraints: { layoutVariantKeys: ["cards"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "alternative",
+		composition: {
+			kind: "offerings-preview",
+			treatment: "paired-feature-cards"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-open-editorial-columns",
+	target: "offerings",
+	label: "Open editorial columns",
+	blockKinds: ["block.offerings-preview"],
+	constraints: { layoutVariantKeys: ["cards"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "open",
+		composition: {
+			kind: "offerings-preview",
+			treatment: "open-editorial-columns"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "offerings-preview-joined-programme-panel",
+	target: "offerings",
+	label: "Joined programme panel",
+	blockKinds: ["block.offerings-preview"],
+	constraints: { layoutVariantKeys: ["cards"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default",
+		composition: {
+			kind: "offerings-preview",
+			treatment: "joined-programme-panel"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-raised-rule",
+	target: "feature-cards",
+	label: "Raised cards with rule",
+	blockKinds: ["block.feature-cards"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-bold-colors",
+	target: "feature-cards",
+	label: "Bold colour-blocked cards",
+	blockKinds: ["block.feature-cards"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "alternative"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-editorial-columns",
+	target: "feature-cards",
+	label: "Editorial open columns",
+	blockKinds: ["block.feature-cards"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: plainFrame,
+		cardRole: "open"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-asymmetric-emphasis",
+	target: "feature-cards",
+	label: "Asymmetric emphasis pair",
+	blockKinds: ["block.feature-cards"],
+	constraints: { layoutFamilies: ["grid"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "feature-cards",
+			treatment: "asymmetric-emphasis"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-framed-programme",
+	target: "feature-cards",
+	label: "Framed programme cards",
+	blockKinds: ["block.feature-cards"],
+	constraints: { layoutFamilies: ["grid"] },
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		cardRole: "alternative",
+		composition: {
+			kind: "feature-cards",
+			treatment: "framed-programme"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-soft-panels",
+	target: "feature-cards",
+	label: "Soft tinted panels",
+	blockKinds: ["block.feature-cards"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "alternative"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-editorial-diptych",
+	target: "feature-cards",
+	label: "Editorial diptych",
+	blockKinds: ["block.feature-cards"],
+	constraints: { layoutVariantKeys: ["editorial-diptych"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-editorial-pathways",
+	target: "feature-cards",
+	label: "Editorial pathways",
+	blockKinds: ["block.feature-cards"],
+	constraints: { layoutVariantKeys: ["editorial-pathways"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "feature-cards-photo-tiles",
+	target: "feature-cards",
+	label: "Photo tiles",
+	blockKinds: ["block.feature-cards"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "events-lined-panel",
+	target: "events",
+	label: "Raised event panel",
+	blockKinds: ["block.event-calendar", "block.event-listing"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: panelFrame("raised")
+	}
+}), defineBlockAppearancePreset({
+	id: "events-ruled-register",
+	target: "events",
+	label: "Ruled event register",
+	blockKinds: ["block.event-calendar", "block.event-listing"],
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		eventListTreatment: "ruled-register"
+	}
+}), defineBlockAppearancePreset({
+	id: "events-editorial-register",
+	target: "events",
+	label: "Editorial event register",
+	blockKinds: ["block.event-calendar", "block.event-listing"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		eventListTreatment: "editorial-register"
+	}
+}), defineBlockAppearancePreset({
+	id: "events-dense-index",
+	target: "events",
+	label: "Dense event index",
+	blockKinds: ["block.event-calendar", "block.event-listing"],
+	design: {
+		sectionSurface: "accent-band",
+		contentFrame: plainFrame,
+		eventListTreatment: "dense-index"
+	}
+}), defineBlockAppearancePreset({
+	id: "schedule-details-brand-depth",
+	target: "events",
+	label: "Brand-depth schedule details",
+	blockKinds: ["block.event-details"],
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		tileTreatment: "brand-depth"
+	}
+}), defineBlockAppearancePreset({
+	id: "media-text-flush-feature",
+	target: "media-text",
+	label: "Flush media feature",
+	blockKinds: ["block.media-text"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: flushPanelFrame({ bleed: "start" })
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-simple-cards",
+	target: "testimonials",
+	label: "Simple testimonial cards",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-raised-panel",
+	target: "testimonials",
+	label: "Raised testimonial panel",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: panelFrame("raised"),
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-accent-panel",
+	target: "testimonials",
+	label: "Accent testimonial panel",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "accent-band",
+		contentFrame: panelFrame("raised"),
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-default-cards",
+	target: "testimonials",
+	label: "Default cards",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-statement-cards",
+	target: "testimonials",
+	label: "Statement cards",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "accent-band",
+		contentFrame: plainFrame,
+		cardRole: "alternative"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-brand-statement-cards",
+	target: "testimonials",
+	label: "Brand statement cards",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame,
+		cardRole: "alternative"
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-non-carded",
+	target: "testimonials",
+	label: "Non-carded",
+	blockKinds: ["block.testimonials"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "testimonials",
+			treatment: "open-editorial"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-evergreen-lead",
+	target: "testimonials",
+	label: "Evergreen lead",
+	blockKinds: ["block.testimonials"],
+	constraints: { layoutVariantKeys: ["featured-editorial"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "testimonials",
+			treatment: "evergreen-lead"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-room-and-response",
+	target: "testimonials",
+	label: "Room and response",
+	blockKinds: ["block.testimonials"],
+	constraints: { layoutVariantKeys: ["featured-editorial"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "testimonials",
+			treatment: "room-and-response"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "testimonials-open-floor",
+	target: "testimonials",
+	label: "Open floor",
+	blockKinds: ["block.testimonials"],
+	constraints: { layoutVariantKeys: ["featured-editorial"] },
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		composition: {
+			kind: "testimonials",
+			treatment: "open-floor"
+		}
+	}
+}), defineBlockAppearancePreset({
+	id: "faq-base-accordion",
+	target: "faq",
+	label: "Base accordion FAQ",
+	blockKinds: ["block.faq"],
+	design: {
+		sectionSurface: "base",
+		contentFrame: plainFrame,
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "faq-contained-help",
+	target: "faq",
+	label: "Contained help panel",
+	blockKinds: ["block.faq"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: panelFrame("inset"),
+		cardRole: "default"
+	}
+}), defineBlockAppearancePreset({
+	id: "contact-form-panel",
+	target: "contact-form",
+	label: "Raised form panel",
+	blockKinds: ["block.form"],
+	design: {
+		sectionSurface: "muted-band",
+		contentFrame: panelFrame("raised")
+	}
+}), defineBlockAppearancePreset({
+	id: "booking-brand-band",
+	target: "contact-form",
+	label: "Brand band booking",
+	blockKinds: ["block.appointment-booking"],
+	design: {
+		sectionSurface: "brand-depth-band",
+		contentFrame: plainFrame
+	}
+}), defineBlockAppearancePreset({
+	id: "cta-accent-band",
+	target: "cta",
+	label: "Accent CTA band",
+	blockKinds: ["block.cta-full"],
+	design: {
+		sectionSurface: "accent-band",
+		contentFrame: plainFrame,
+		eyebrowTreatment: "accent"
+	}
+});
+asPageFlowPresetId("generated-default");
+asSiteStyleId("site-style:south-west-twerk-school");
+asAppearancePresetId("hero-brand-scrim-fixed-frame");
+asLayoutVariantKey("classic");
+asLayoutVariantKey("micro");
 asBoundaryOptionId("break:wave");
-asBoundaryOptionId("break:wave-balanced");
-asBoundaryOptionId("break:wave-gentle");
-asBoundaryOptionId("break:wave-bold");
-asBoundaryOptionId("break:wave-drift");
-asBoundaryOptionId("break:angle-subtle");
-asBoundaryOptionId("break:angle-balanced");
-asBoundaryOptionId("break:angle-steep");
 //#endregion
 //#region ../theme-core/src/site-styles/runtimeCompiler.ts
 function defineSectionForegroundRuntimeTokens(input) {
@@ -8986,7 +10160,7 @@ function defineComponentRuntimeRules(rules) {
 }
 /**
 * Default design rules translate semantic page-level choices into the current
-* runtime's section background and transition style-group vocabulary.
+* runtime's section background vocabulary.
 */
 const defaultDesignRuntimeRules = defineDesignRuntimeRules({
 	sectionSurfaces: {
@@ -9021,8 +10195,7 @@ const defaultDesignRuntimeRules = defineDesignRuntimeRules({
 			color: "surface",
 			opacity: .88
 		}
-	},
-	transitionClassName: (transition, fromSurface, toSurface) => transition === "none" ? null : `site-style-transition-${transition}-from-${fromSurface}-to-${toSurface}`
+	}
 });
 /**
 * Default component rules translate frame and item-surface semantics into the
@@ -10737,13 +11910,269 @@ const curatedSiteStyles = [
 	})
 ];
 new Map(curatedSiteStyles.map((style) => [style.id, style]));
-svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V46C130 55 260 24 420 30C590 36 690 62 860 42C1035 21 1160 47 1305 36C1365 31 1415 33 1440 38V72H0Z' fill='white'/></svg>");
-svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V42C120 24 240 24 360 42C480 60 600 60 720 42C840 24 960 24 1080 42C1200 60 1320 60 1440 42V72H0Z' fill='white'/></svg>");
-svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V43C180 32 300 32 480 43C660 54 780 54 960 43C1140 32 1260 32 1440 43V72H0Z' fill='white'/></svg>");
-svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V44C90 14 270 14 360 44C450 74 630 74 720 44C810 14 990 14 1080 44C1170 74 1350 74 1440 44V72H0Z' fill='white'/></svg>");
-svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0 72V39C115 31 205 54 340 48C505 41 610 16 760 33C920 51 1015 64 1160 44C1280 27 1375 35 1440 50V72H0Z' fill='white'/></svg>");
-function svgDataUrl(svg) {
-	return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+//#endregion
+//#region ../theme-core/src/inputs/checkable.ts
+/**
+* Checkbox and radio CSS shared by the full theme generator and the SDK
+* theme bridge, so both render the same customer-facing controls.
+*
+* Emits:
+* - .form-checkbox / .form-radio: the controls themselves. The tick and dot
+*   are drawn with ::before so their colour comes from theme tokens rather
+*   than a baked-in SVG.
+* - .form-check: a label row holding a control and its text. The control
+*   lines up with the first line of text, so long labels wrap cleanly.
+* - .form-check--tile: a bordered, fully clickable panel for agreements
+*   (booking consent, consent fields) that tints when ticked.
+*/
+const CHECKABLE_SIZE = "1.375rem";
+/** Never fully round: a round checkbox reads as a radio. */
+const CHECKBOX_RADIUS = {
+	square: "0",
+	soft: "0.25rem",
+	rounded: "0.375rem",
+	pill: "0.375rem"
+};
+/** Tiles hold wrapping text, so pill themes get a generous radius, not a capsule. */
+const TILE_RADIUS = {
+	square: "0",
+	soft: "0.5rem",
+	rounded: "0.75rem",
+	pill: "1rem"
+};
+const ON_ACCENT_TOKENS = {
+	primary: "onPrimary",
+	secondary: "onSecondary",
+	accent: "onAccent"
+};
+/**
+* Colour for the tick/dot drawn on top of the accent fill. Uses the palette's
+* matching "on" token where there is one, falling back to white.
+*/
+/** The accent at full strength: `primary/70` becomes `primary`. */
+function solidAccentToken(accentToken) {
+	const parsed = parseColorTokenParts(accentToken);
+	return parsed.kind === "token" ? parsed.token : accentToken;
+}
+function checkableMarkColor(accentToken) {
+	const parsed = parseColorTokenParts(accentToken);
+	const onToken = parsed.kind === "token" ? ON_ACCENT_TOKENS[parsed.token] : void 0;
+	return onToken ? `rgb(var(--tb-${onToken}, 255 255 255))` : "rgb(255 255 255)";
+}
+function checkableSelectors(root) {
+	return {
+		checkbox: `${root} .form-checkbox`,
+		radio: `${root} .form-radio`,
+		check: `${root} .form-check`,
+		tile: `${root} .form-check--tile`
+	};
+}
+/** The box and circle themselves, unchecked. */
+function controlBaseCss(sel, input) {
+	const border = input.borderWidth === "0" ? "1px" : input.borderWidth;
+	return [
+		`${sel.checkbox},
+${sel.radio} {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: ${CHECKABLE_SIZE};
+  height: ${CHECKABLE_SIZE};
+  margin: 0;
+  flex-shrink: 0;
+  border: ${border} solid ${input.borderColor};
+  background-color: ${input.background};
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}`,
+		`${sel.checkbox} {
+  border-radius: ${CHECKBOX_RADIUS[input.corners]};
+}`,
+		`${sel.radio} {
+  border-radius: 9999px;
+}`
+	];
+}
+/** The tick and dot, drawn with ::before so their colour is a theme token. */
+function controlMarkCss(sel, accentToken) {
+	return [
+		`${sel.checkbox}::before,
+${sel.radio}::before {
+  content: "";
+  background-color: ${checkableMarkColor(accentToken)};
+  transform: scale(0);
+  transition: transform 0.12s ease;
+}`,
+		`${sel.checkbox}::before {
+  width: 0.75rem;
+  height: 0.75rem;
+  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);
+}`,
+		`${sel.radio}::before {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}`
+	];
+}
+function controlStateCss(sel, input) {
+	const accent = rgbColorValue(solidAccentToken(input.accentToken));
+	return [
+		`${sel.checkbox}:hover,
+${sel.radio}:hover,
+${sel.check}:hover > .form-checkbox,
+${sel.check}:hover > .form-radio {
+  border-color: ${accent};
+}`,
+		`${sel.checkbox}:checked,
+${sel.radio}:checked {
+  background-color: ${accent};
+  border-color: ${accent};
+}`,
+		`${sel.checkbox}:checked::before,
+${sel.radio}:checked::before {
+  transform: scale(1);
+}`,
+		`${sel.checkbox}:focus-visible,
+${sel.radio}:focus-visible {
+  outline: 2px solid ${accent};
+  outline-offset: 2px;
+}`,
+		`${sel.checkbox}:disabled,
+${sel.radio}:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}`
+	];
+}
+/** Label row: control lined up with the first line of wrapping text. */
+function checkRowCss(sel) {
+	return [
+		`${sel.check} {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  line-height: 1.5;
+  cursor: pointer;
+}`,
+		`${sel.check} > .form-checkbox,
+${sel.check} > .form-radio {
+  margin-top: 0.0625rem;
+  margin-top: max(0px, calc((1lh - ${CHECKABLE_SIZE}) / 2));
+}`,
+		`${sel.check}:has(> :disabled) {
+  cursor: not-allowed;
+}`
+	];
+}
+function agreementTileCss(sel, input) {
+	const accent = rgbColorValue(solidAccentToken(input.accentToken));
+	return [
+		`${sel.tile} {
+  padding: 0.875rem 1rem;
+  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-radius: ${TILE_RADIUS[input.corners]};
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}`,
+		`${sel.tile}:hover {
+  border-color: color-mix(in srgb, ${accent} 55%, transparent);
+}`,
+		`${sel.tile}:has(> .form-checkbox:checked) {
+  border-color: ${accent};
+  background-color: color-mix(in srgb, ${accent} 7%, transparent);
+}`,
+		`${sel.tile}:has(> .form-checkbox[aria-invalid="true"]) {
+  border-color: ${input.errorColor};
+}`
+	];
+}
+function checkableMediaCss(sel) {
+	return [`@media (prefers-reduced-motion: reduce) {
+  ${sel.checkbox}, ${sel.radio}, ${sel.checkbox}::before, ${sel.radio}::before, ${sel.tile} {
+    transition: none;
+  }
+}`, `@media (forced-colors: active) {
+  ${sel.checkbox}::before,
+  ${sel.radio}::before {
+    background-color: CanvasText;
+  }
+}`];
+}
+/**
+* Exposes the accent and mark colours so other choice controls (newsletter
+* topic chips) match the checkboxes without re-deriving the theme tokens.
+*/
+function checkableVarsCss(input) {
+	return [`${input.root} {
+  --rb-check-accent: ${rgbColorValue(solidAccentToken(input.accentToken))};
+  --rb-check-mark: ${checkableMarkColor(input.accentToken)};
+}`];
+}
+function generateCheckableCss(input) {
+	const sel = checkableSelectors(input.root);
+	return [
+		...checkableVarsCss(input),
+		...controlBaseCss(sel, input),
+		...controlMarkCss(sel, input.accentToken),
+		...controlStateCss(sel, input),
+		...checkRowCss(sel),
+		...agreementTileCss(sel, input),
+		...checkableMediaCss(sel)
+	].join("\n\n");
+}
+//#endregion
+//#region ../theme-core/src/inputs/inputGroup.ts
+/**
+* Input group: a field and an action (usually a themed button) sharing one
+* input-styled shell, e.g. the newsletter email + Sign up row.
+*
+* The shell `.form-input-group` takes the theme's `.form-input` rules (the
+* generators add it to that selector list, plus focus and error), so it
+* follows the site's input background, border, corners and shadow. This file
+* only adds the layout overrides and the borderless inner field.
+*/
+const INPUT_GROUP_SELECTOR = ".form-input-group";
+/** Shell focus ring follows the field only, not the button beside it. */
+const INPUT_GROUP_FOCUS_SELECTOR = ".form-input-group:has(> .form-input-group-field:focus-visible)";
+const INPUT_GROUP_ERROR_SELECTOR = ".form-input-group:has(> .form-input-group-field[aria-invalid=\"true\"])";
+const GROUP_INSET = "0.25rem";
+/**
+* @param root - scoped root selector
+* @param padding - the theme's input padding shorthand (`block inline`), so the
+*   inner field's text sits where a plain input's text would.
+*/
+function generateInputGroupCss(root, padding) {
+	const [block = padding, inline = block] = padding.trim().split(/\s+/);
+	return `${root} .form-input-group {
+  display: flex;
+  align-items: stretch;
+  gap: ${GROUP_INSET};
+  padding: ${GROUP_INSET};
+}
+
+${root} .form-input-group-field {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+  padding: calc(${block} - ${GROUP_INSET}) calc(${inline} - ${GROUP_INSET});
+}
+
+${root} .form-input-group-field::placeholder {
+  color: inherit;
+  opacity: 0.6;
+}
+
+${root} .form-input-group > :not(.form-input-group-field) {
+  flex-shrink: 0;
+}`;
 }
 //#endregion
 //#region ../theme-core/src/status/generateStatusCss.ts
@@ -12048,6 +13477,9 @@ const containerResponsiveThemeCss = `/*
   .rb-h-4 {
     height: 1rem;
   }
+  .rb-h-5 {
+    height: 1.25rem;
+  }
   .rb-h-8 {
     height: 2rem;
   }
@@ -16013,6 +17445,10 @@ const containerResponsiveThemeCss = `/*
   margin-bottom: 0.25rem;
 }
 
+:where(.theme-scope) :where([data-block='event-registration']) .er-consent-check {
+  margin-top: 0.75rem;
+}
+
 :where(.theme-scope) :where([data-block='event-registration']) .er-required {
   color: var(--er-required);
 }
@@ -20732,13 +22168,6 @@ const containerResponsiveThemeCss = `/*
   margin: 0;
 }
 
-/* Inline field (checkbox, radio with label) */
-:where(.theme-scope) :where([data-block="form"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 /* Success state */
 :where(.theme-scope) :where([data-block="form"]) .fb-success {
   background-color: var(--fb-success-bg);
@@ -22855,9 +24284,11 @@ const containerResponsiveThemeCss = `/*
  */
 
 /* Newsletter copy styling */
+/* Size only: weight, family and colour come from the theme's heading styles */
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
+  line-height: 1.15;
+  text-wrap: balance;
 }
 
 :where(.theme-scope) :where([data-block="newsletter-signup"]) .newsletter-copy-subtitle {
@@ -22881,37 +24312,150 @@ const containerResponsiveThemeCss = `/*
   gap: var(--rb-gap-sm, 0.75rem);
 }
 
-/* Individual field styling */
+/* Extra preset fields (name, company...). Labels are visually hidden, so
+   these sit in a row above the email entry. */
+:where(.theme-scope) .newsletter-extra-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+  gap: 0.5rem;
+}
+
 :where(.theme-scope) .newsletter-field {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
+  text-align: left;
 }
 
-/* Topic choices (visitor picks what to hear about). Same treatment as the
-   form block's .fb-fieldset / .fb-inline, defined here because the newsletter
-   form also renders inside contact-newsletter and the site footer. */
-:where(.theme-scope) .newsletter-topics {
+/* Email entry: the email field and the themed submit button share one shell.
+   The shell's look (background, border, corners, focus ring) comes from the
+   theme's input system via .form-input-group; this only handles layout. */
+:where(.theme-scope) .newsletter-entry {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  text-align: left;
+}
+
+:where(.theme-scope) .newsletter-entry-group > button {
+  white-space: nowrap;
+}
+
+/* Too narrow for field and button side by side (phones, footer columns):
+   stack them inside the shell and keep pill themes from turning the taller
+   shell into a capsule. */
+@container (max-width: 22rem) {
+  :where(.theme-scope) .newsletter-entry .newsletter-entry-group {
+    flex-direction: column;
+    border-radius: min(var(--rb-input-radius, 0.5rem), 1rem);
+  }
+
+  :where(.theme-scope) .newsletter-entry .newsletter-entry-group > button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Topic choices (visitor picks what to hear about) as toggle chips. Each chip
+   is a real checkbox underneath; the chip is its visible face. */
+:where(.theme-scope) .newsletter-topics {
   border: none;
   padding: 0;
   margin: 0;
   min-width: 0;
 }
 
-:where(.theme-scope) .newsletter-topics > legend {
+:where(.theme-scope) .newsletter-topics-legend {
   padding: 0;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.625rem;
+  font-size: 0.9375rem;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
 }
 
-:where(.theme-scope) .newsletter-topic-choice {
+:where(.theme-scope) .newsletter-topic-chips {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
+:where(.theme-scope) .newsletter-stacked .newsletter-topics-legend {
+  width: 100%;
+}
+
+:where(.theme-scope) .newsletter-stacked .newsletter-topic-chips {
+  justify-content: center;
+}
+
+:where(.theme-scope) .newsletter-topic-chip {
+  position: relative;
+  display: inline-flex;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.9375rem;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-radius: var(--rb-button-radius, var(--rb-input-radius, 9999px));
+  font-size: 0.9375rem;
+  line-height: 1.3;
+  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+/* Tick that grows in when the chip is on */
+:where(.theme-scope) .newsletter-topic-chip > span::before {
+  content: "";
+  width: 0;
+  height: 0.7em;
+  background-color: currentColor;
+  clip-path: polygon(14% 52%, 0 67%, 38% 100%, 100% 22%, 85% 8%, 37% 70%);
+  transition: width 0.15s ease;
+}
+
+:where(.theme-scope) .newsletter-topic-chip:hover > span {
+  border-color: currentColor;
+}
+
+/* Same accent and mark colours as the theme's checkboxes */
+:where(.theme-scope) .newsletter-topic-chip > input:checked + span {
+  background-color: var(--rb-check-accent, rgb(var(--tb-primary)));
+  border-color: var(--rb-check-accent, rgb(var(--tb-primary)));
+  color: var(--rb-check-mark, rgb(var(--tb-onPrimary, 255 255 255)));
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:checked + span::before {
+  width: 0.7em;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:focus-visible + span {
+  outline: 2px solid var(--rb-check-accent, rgb(var(--tb-primary)));
+  outline-offset: 2px;
+}
+
+:where(.theme-scope) .newsletter-topic-chip > input:disabled + span {
+  opacity: 0.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.theme-scope) .newsletter-topic-chip > span,
+  :where(.theme-scope) .newsletter-topic-chip > span::before {
+    transition: none;
+  }
+}
+
 /* Error panel and field notes. The form block scopes these to its own
    data-block, so the newsletter form (which also renders in the footer)
    needs its own copy of the treatment. */
@@ -22929,13 +24473,7 @@ const containerResponsiveThemeCss = `/*
   color: var(--fb-error-text);
 }
 
-/* Required indicator */
-:where(.theme-scope) .newsletter-required {
-  color: rgb(var(--tb-primary));
-  margin-left: 0.125rem;
-}
-
-/* Submit button container */
+/* Submit button container (only when a preset has no email field) */
 :where(.theme-scope) .newsletter-submit {
   margin-top: 0.5rem;
 }
@@ -22947,52 +24485,29 @@ const containerResponsiveThemeCss = `/*
   justify-content: center;
 }
 
-/* Privacy note */
+/* Privacy note: quieter than the intro so the entry row leads */
 :where(.theme-scope) .newsletter-privacy-note {
   margin-top: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39)));
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--rb-surface-supporting-color, var(--rb-surface-text-color, rgb(var(--tb-text, 17 24 39))));
+  opacity: 0.85;
   text-align: center;
 }
 
 /* =============================================================================
- * Inline Variant - Horizontal layout
+ * Inline Variant - left-aligned, wider entry row
  * =============================================================================
  */
 
-:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
-  flex-direction: row;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: var(--rb-gap-sm, 0.75rem);
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-field {
-  flex: 1 1 auto;
-  min-width: 10rem;
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-submit {
-  margin-top: 0;
-  flex-shrink: 0;
-}
-
-:where(.theme-scope) .newsletter-inline .newsletter-topics {
-  flex-basis: 100%;
+:where(.theme-scope) .newsletter-inline .newsletter-form {
+  max-width: 40rem;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-/* Mobile fallback for inline variant */
-@container rb-site (max-width: 640px) {
-@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
-    flex-direction: column;
-  }
-
-  :where(.theme-scope) .newsletter-inline .newsletter-field {
-    min-width: 100%;
-  }
-}
+:where(.theme-scope) .newsletter-inline .newsletter-privacy-note {
+  text-align: left;
 }
 
 /* =============================================================================
@@ -23130,12 +24645,6 @@ const containerResponsiveThemeCss = `/*
   margin: 0;
 }
 
-:where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-success,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-error,
 :where(.theme-scope) :where([data-block="contact-newsletter"]) .fb-empty {
@@ -25032,6 +26541,44 @@ const containerResponsiveThemeCss = `/*
     flex: 0 0 auto;
   }
 }
+}
+
+/* =============================================================================
+ * Site footer: social links
+ *
+ * Icon links get a 40px tap target with a hairline ring drawn from the link's
+ * own colour, so it follows the footer's text colour on any surface. Links
+ * without an icon (unknown platforms) stay plain text.
+ * =============================================================================
+ */
+
+:where(.theme-scope) .rb-footer-socials {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.25rem;
+}
+
+:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon) {
+  display: inline-grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+  border-radius: 9999px;
+}
+
+:where(.theme-scope) .rb-footer-socials:has(.rb-footer-social-icon) {
+  gap: 0.5rem;
+}
+
+:where(.theme-scope) .rb-footer-social-link:has(> .rb-footer-social-icon):hover {
+  border-color: currentColor;
+}
+
+:where(.theme-scope) .rb-footer-social-icon {
+  width: 1.5rem;
+  height: 1.5rem;
 }`;
 //#endregion
 //#region ../theme-core/src/ThemeScopeCore.tsx
@@ -25281,6 +26828,7 @@ const BORDER_WIDTH_MAP = {
 	medium: "2px",
 	thick: "4px"
 };
+const INPUT_PADDING = "0.5rem 0.75rem";
 const SHADOW_VALUES = {
 	none: "none",
 	low: "0 1px 2px rgba(0,0,0,0.04)",
@@ -25314,16 +26862,18 @@ function generateInputCoreCss(scopeId, settings) {
   color: rgb(var(--tb-${settings.textToken}));
   border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
   border-radius: ${borderRadius};
-  padding: 0.5rem 0.75rem;
+  padding: ${INPUT_PADDING};
   font-size: 1rem;
   width: 100%;
   outline: none;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
   ${settings.shadow !== "none" ? `box-shadow: ${SHADOW_VALUES[settings.shadow]};` : ""}
 `.trim();
-	cssBlocks.push(`${root} .form-input {
+	cssBlocks.push(`${root} .form-input,
+${root} ${INPUT_GROUP_SELECTOR} {
   ${sharedInputRules}
 }`);
+	cssBlocks.push(generateInputGroupCss(root, INPUT_PADDING));
 	cssBlocks.push(`${root} .form-textarea {
   ${sharedInputRules}
   resize: vertical;
@@ -25340,14 +26890,16 @@ function generateInputCoreCss(scopeId, settings) {
 }`);
 	cssBlocks.push(`${root} .form-input:focus-visible,
 ${root} .form-textarea:focus-visible,
-${root} .form-select:focus-visible {
+${root} .form-select:focus-visible,
+${root} ${INPUT_GROUP_FOCUS_SELECTOR} {
   outline: none;
   box-shadow: 0 0 0 ${settings.focusRingWidth}px rgb(var(--tb-${settings.focusRingToken}));
   border-color: rgb(var(--tb-${settings.focusRingToken}));
 }`);
 	cssBlocks.push(`${root} .form-input[aria-invalid="true"],
 ${root} .form-textarea[aria-invalid="true"],
-${root} .form-select[aria-invalid="true"] {
+${root} .form-select[aria-invalid="true"],
+${root} ${INPUT_GROUP_ERROR_SELECTOR} {
   border-color: rgb(var(--tb-${settings.errorBorderToken}));
   color: rgb(var(--tb-${settings.errorTextToken}));
 }`);
@@ -25359,46 +26911,15 @@ ${root} .form-select:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }`);
-	cssBlocks.push(`${root} .form-checkbox {
-  appearance: none;
-  width: 1.125rem;
-  height: 1.125rem;
-  flex-shrink: 0;
-  border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
-  border-radius: 0.25rem;
-  background-color: rgb(var(--tb-${settings.backgroundToken}));
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}`);
-	cssBlocks.push(`${root} .form-radio {
-  appearance: none;
-  width: 1.125rem;
-  height: 1.125rem;
-  flex-shrink: 0;
-  border: ${borderWidth} solid rgb(var(--tb-${settings.borderToken}));
-  border-radius: 9999px;
-  background-color: rgb(var(--tb-${settings.backgroundToken}));
-  cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}`);
-	cssBlocks.push(`${root} .form-checkbox:checked {
-  background-color: rgb(var(--tb-${settings.focusRingToken}));
-  border-color: rgb(var(--tb-${settings.focusRingToken}));
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}`);
-	cssBlocks.push(`${root} .form-radio:checked {
-  background-color: rgb(var(--tb-${settings.focusRingToken}));
-  border-color: rgb(var(--tb-${settings.focusRingToken}));
-  background-image: radial-gradient(circle, white 40%, transparent 40%);
-}`);
-	cssBlocks.push(`${root} .form-checkbox:focus-visible,
-${root} .form-radio:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 ${settings.focusRingWidth}px rgb(var(--tb-${settings.focusRingToken}));
-}`);
+	cssBlocks.push(generateCheckableCss({
+		root,
+		borderWidth,
+		borderColor: `rgb(var(--tb-${settings.borderToken}))`,
+		background: `rgb(var(--tb-${settings.backgroundToken}))`,
+		corners: settings.corners,
+		accentToken: settings.focusRingToken,
+		errorColor: `rgb(var(--tb-${settings.errorBorderToken}))`
+	}));
 	return cssBlocks.join("\n\n");
 }
 /**