@riverbankcms/sdk 0.107.0 → 0.108.0

package/dist/server/page-converter.mjs

@@ -4554,104 +4554,153 @@ const showtimePill = defineButtonPersonality({
 	}
 });
 //#endregion
-//#region ../theme-core/src/buttons/personalities/index.ts
-const buttonPersonalities = [
-	defineButtonPersonality({
-		id: "soft-pill",
-		name: "Soft Pill",
-		description: "Rounded pills with a gentle lift on hover. Quietly modern.",
-		tags: {
-			tone: "classic",
-			energy: "calm",
-			motion: "subtle",
-			era: "organic"
+//#region ../theme-core/src/buttons/personalities/soft-pill.ts
+/**
+* Soft Pill — rounded-full pill buttons with a hover lift. The default for
+* Calm Studio and Modern Wellness; reads as quietly modern and welcoming.
+*/
+const softPill = defineButtonPersonality({
+	id: "soft-pill",
+	name: "Soft Pill",
+	description: "Rounded pills with a gentle lift on hover. Quietly modern.",
+	tags: {
+		tone: "classic",
+		energy: "calm",
+		motion: "subtle",
+		era: "organic"
+	},
+	buttonSystem: {
+		global: {
+			cornerStyle: "pill",
+			shadow: "low",
+			textTransform: "none",
+			fontWeight: 500,
+			borderWidth: 2,
+			hoverTransform: "lift",
+			hoverColor: "none"
 		},
-		buttonSystem: {
-			global: {
-				cornerStyle: "pill",
-				shadow: "low",
-				textTransform: "none",
-				fontWeight: 500,
-				borderWidth: 2,
-				hoverTransform: "lift",
-				hoverColor: "none"
-			},
-			variants: [
-				{
-					id: "primary",
-					name: "Primary",
-					enabled: true,
-					priority: 1,
-					background: {
-						type: "solid",
-						colorToken: "primary"
-					},
-					textColorToken: "primaryForeground",
-					borderRadius: "rounded-full",
-					shadow: {
-						elevation: "low",
-						softness: "soft",
-						position: "bottom"
-					},
-					effects: {
-						hover: [{
-							effectId: "lift",
-							options: { translateY: "-1px" }
-						}],
-						active: [{
-							effectId: "scale-down",
-							options: { scale: "0.98" }
-						}]
-					}
-				},
-				{
-					id: "secondary",
-					name: "Secondary",
-					enabled: true,
-					priority: 2,
-					background: { type: "transparent" },
-					textColorToken: "primary",
-					borderRadius: "rounded-full",
-					border: {
-						widthClass: "border-2",
-						colorToken: "primary"
-					},
-					effects: { hover: [{
-						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
-					}] }
+		variants: [
+			{
+				id: "primary",
+				name: "Primary",
+				enabled: true,
+				priority: 1,
+				background: {
+					type: "solid",
+					colorToken: "primary"
 				},
-				{
-					id: "outline",
-					name: "Outline",
-					enabled: true,
-					priority: 3,
-					background: { type: "transparent" },
-					textColorToken: "text",
-					borderRadius: "rounded-full",
-					border: {
-						widthClass: "border",
-						colorToken: "border"
-					},
-					effects: { hover: [{
-						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
-					}] }
+				textColorToken: "primaryForeground",
+				borderRadius: "rounded-full",
+				shadow: {
+					elevation: "low",
+					softness: "soft",
+					position: "bottom"
 				},
-				{
-					id: "ghost",
-					name: "Ghost",
-					enabled: true,
-					priority: 3,
-					background: { type: "transparent" },
-					textColorToken: "text",
-					borderRadius: "rounded-full",
-					effects: { hover: [{
-						effectId: "background-on-hover",
-						options: { colorToken: "surface" }
-					}] }
+				effects: {
+					hover: [{
+						effectId: "lift",
+						options: { translateY: "-1px" }
+					}],
+					active: [{
+						effectId: "scale-down",
+						options: { scale: "0.98" }
+					}]
 				}
-			]
+			},
+			{
+				id: "secondary",
+				name: "Secondary",
+				enabled: true,
+				priority: 2,
+				background: { type: "transparent" },
+				textColorToken: "primary",
+				borderRadius: "rounded-full",
+				border: {
+					widthClass: "border-2",
+					colorToken: "primary"
+				},
+				effects: { hover: [{
+					effectId: "background-on-hover",
+					options: { colorToken: "surface" }
+				}] }
+			},
+			{
+				id: "outline",
+				name: "Outline",
+				enabled: true,
+				priority: 3,
+				background: { type: "transparent" },
+				textColorToken: "text",
+				borderRadius: "rounded-full",
+				border: {
+					widthClass: "border",
+					colorToken: "border"
+				},
+				effects: { hover: [{
+					effectId: "background-on-hover",
+					options: { colorToken: "surface" }
+				}] }
+			},
+			{
+				id: "ghost",
+				name: "Ghost",
+				enabled: true,
+				priority: 3,
+				background: { type: "transparent" },
+				textColorToken: "text",
+				borderRadius: "rounded-full",
+				effects: { hover: [{
+					effectId: "background-on-hover",
+					options: { colorToken: "surface" }
+				}] }
+			}
+		]
+	}
+});
+//#endregion
+//#region ../theme-core/src/buttons/personalities/two-tone-pill.ts
+const solidSecondary = {
+	id: "secondary",
+	name: "Secondary",
+	enabled: true,
+	priority: 2,
+	background: {
+		type: "solid",
+		colorToken: "secondary"
+	},
+	textColorToken: "onSecondary",
+	borderRadius: "rounded-full",
+	shadow: {
+		elevation: "none",
+		softness: null,
+		position: "bottom"
+	},
+	effects: {
+		hover: [{
+			effectId: "background-on-hover-alpha",
+			options: {
+				colorToken: "secondary",
+				opacity: 88
+			}
+		}],
+		active: [{
+			effectId: "scale-down",
+			options: { scale: "0.98" }
+		}]
+	}
+};
+//#endregion
+//#region ../theme-core/src/buttons/personalities/index.ts
+const buttonPersonalities = [
+	softPill,
+	defineButtonPersonality({
+		id: "two-tone-pill",
+		name: "Two-tone Pill",
+		description: "Rounded pills with distinct solid primary and secondary brand colours.",
+		tags: softPill.tags,
+		buttonSystem: {
+			...softPill.buttonSystem,
+			variants: softPill.buttonSystem.variants.map((variant) => variant.id === "secondary" ? solidSecondary : variant)
 		}
 	}),
 	earthPill,
@@ -6110,6 +6159,7 @@ const navFontWeight = z$1.enum([
 	"bold"
 ]);
 const headerMaxWidth = z$1.enum(["container", "full"]);
+const headerBarFrame = z$1.enum(["full-bleed", "inset-shell"]);
 const headerContainerSchema = z$1.object({
 	rounded: z$1.enum([
 		"none",
@@ -6254,6 +6304,7 @@ const headerSchema = z$1.object({
 	positioning: headerPositioning,
 	shrinkOnScroll: z$1.boolean(),
 	maxWidth: headerMaxWidth,
+	barFrame: headerBarFrame.optional(),
 	logoOverride: mediaSchema$1.nullable().optional(),
 	background: headerBackgroundSchema.default({
 		type: "color",
@@ -6263,6 +6314,7 @@ const headerSchema = z$1.object({
 	navStyle: headerNavStyle,
 	navColor: themeColorTokenSchema.nullable().optional(),
 	navWeight: navFontWeight.default("medium"),
+	navFontRole: z$1.enum(["body", "heading"]).optional(),
 	navTypography: z$1.enum(["body", "heading"]).optional(),
 	navTextSize: navLinkStyleSchema.shape.textSize,
 	navPlacement: z$1.enum(["end", "center"]).optional(),
@@ -6278,7 +6330,21 @@ const headerSchema = z$1.object({
 	ctaTreatment: headerCtaTreatmentSchema.optional(),
 	ctaVariant: z$1.string().min(1).optional(),
 	dropdownStyle: dropdownStyleSchema
-});
+}).transform(normaliseHeaderNavFontRole);
+/**
+* Normalises the legacy `navTypography` font-role alias into the canonical
+* `navFontRole` field so persisted themes migrate at the parse boundary without
+* a data migration. `navFontRole` always wins when both are present; the legacy
+* field is dropped so we never carry a dual write forward.
+*/
+function normaliseHeaderNavFontRole(header) {
+	if (header.navTypography === void 0) return header;
+	const { navTypography, ...rest } = header;
+	return header.navFontRole === void 0 ? {
+		...rest,
+		navFontRole: navTypography
+	} : rest;
+}
 const footerVariant = z$1.enum([
 	"simple",
 	"columns",
@@ -8084,7 +8150,7 @@ const overlayLogoAccommodations = [
 * optional nested styling fields that would otherwise leak from another Look.
 */
 function baseHeader(theme) {
-	const { navLinkStyle: _navLinkStyle, navTypography: _navTypography, navTextSize: _navTextSize, dropdownStyle: _dropdownStyle, ctaVariant: _ctaVariant, navContainer: _navContainer, container: _container, shadow: _shadow, logo: _logo, logoText: _logoText, border: _border, ...header } = theme.header;
+	const { navLinkStyle: _navLinkStyle, navFontRole: _navFontRole, navTypography: _navTypography, navTextSize: _navTextSize, dropdownStyle: _dropdownStyle, ctaVariant: _ctaVariant, navContainer: _navContainer, container: _container, shadow: _shadow, logo: _logo, logoText: _logoText, border: _border, ...header } = theme.header;
 	return {
 		...header,
 		navContainer: {
@@ -8233,6 +8299,17 @@ const headerStyleCatalog = defineExactCatalog()([
 		navTypography: "brand-caps",
 		moods: ["expressive"]
 	},
+	{
+		id: asHeaderStyleId("brand-capsule"),
+		label: "Brand Capsule",
+		description: "Solid brand chrome designed as a floating capsule, with quiet-caps nav, a soft pill active state, and an inverted CTA pill.",
+		supportedLayoutIds: supportedLayouts(["classic"]),
+		navInteraction: "pill-background",
+		surface: "brand-solid",
+		defaultDepth: "shadow",
+		navTypography: "quiet-caps",
+		moods: ["expressive", "professional"]
+	},
 	{
 		id: asHeaderStyleId("serif-line"),
 		label: "Serif Line",
@@ -8326,6 +8403,7 @@ const headerStyleCompatibilityOrder = /* @__PURE__ */ new Map([
 		"brand-bar",
 		"brand-underline",
 		"brand-pill",
+		"brand-capsule",
 		"serif-line",
 		"flat-tabs"
 	])],
@@ -8363,6 +8441,11 @@ headerStyleRepairChain([
 	"brand-pill",
 	"brand-bar",
 	"minimal"
+]), headerStyleRepairChain([
+	"brand-capsule",
+	"brand-pill",
+	"brand-bar",
+	"minimal"
 ]), headerStyleRepairChain([
 	"pill-nav",
 	"soft-bar",
@@ -10600,6 +10683,7 @@ const curatedSiteStyles = [
 		],
 		buttonPersonalityChoices: [
 			buttonChoice("soft-pill"),
+			buttonChoice("two-tone-pill"),
 			buttonChoice("pebble"),
 			buttonChoice("editorial-link"),
 			buttonChoice("brushed-wash")
@@ -11779,6 +11863,7 @@ const curatedSiteStyles = [
 		],
 		buttonPersonalityChoices: [
 			buttonChoice("quiet-arrow"),
+			buttonChoice("two-tone-pill"),
 			buttonChoice("flat-ink"),
 			buttonChoice("editorial-link")
 		],
@@ -12637,7 +12722,7 @@ const ALLOWED_TRANSFORM_IDS = [
 	"media.fromUrl",
 	"background.resolveStyle",
 	"background.resolveColorsStyle",
-	"background.resolveAllowOverflow",
+	"background.resolveFrameClassName",
 	"background.resolveImageStyle",
 	"background.resolveImageClassName",
 	"background.resolveOverlayStyle",
@@ -14265,6 +14350,7 @@ function devValidate(node) {
 }
 //#endregion
 //#region ../blocks/src/system/node/fragments/backgroundLayer.ts
+const BACKGROUND_FRAME_BASE_CLASS = "rb-background-frame rb-absolute rb-inset-0 rb-z-neg-10 rb-h-full rb-w-full rb-isolate rb-pointer-events-none";
 /**
 * Creates background layer nodes for rendering backgrounds from field data.
 *
@@ -14330,6 +14416,34 @@ function backgroundLayer(path, options = {}) {
 	];
 }
 /**
+* Wrap decorative background layers in their own clipping frame.
+*
+* Foreground content remains outside this frame, so editor outlines, focus
+* rings, and floating controls are never clipped by a visual background.
+* Backgrounds that explicitly opt into overflow keep that behavior within
+* the decorative layer rather than changing the content root.
+*/
+function backgroundFrame(path, options = {}) {
+	const { leadingNodes = [], ...layerOptions } = options;
+	const framedLayerOptions = {
+		...layerOptions,
+		styleClassName: layerOptions.styleClassName ?? "background-style rb-absolute rb-inset-0 rb-z-0 rb-h-full rb-w-full rb-pointer-events-none",
+		imageClassName: layerOptions.imageClassName ?? "rb-absolute rb-z-0",
+		overlayClassName: layerOptions.overlayClassName ?? "background-overlay rb-absolute rb-inset-0 rb-z-0 rb-h-full rb-w-full rb-pointer-events-none"
+	};
+	return el("div", {
+		className: { $bind: {
+			from: path,
+			transforms: [{
+				id: "background.resolveFrameClassName",
+				options: { baseClass: BACKGROUND_FRAME_BASE_CLASS }
+			}],
+			fallback: `${BACKGROUND_FRAME_BASE_CLASS} rb-overflow-hidden`
+		} },
+		style: { borderRadius: "inherit" }
+	}, [...leadingNodes, ...backgroundLayer(path, framedLayerOptions)]);
+}
+/**
 * Creates a media node for rendering background image/video media with conditional rendering.
 *
 * This helper creates a media element that:
@@ -14491,8 +14605,8 @@ function sectionContainer(children, opts) {
 *     - content
 */
 function styledContainer(config) {
-	const { children, rootType = "div", rootProps, bindFrom = "_containerStyles", baseClassName = "rb-relative rb-isolate rb-overflow-hidden", imageClassName = "rb-absolute rb-z-neg-10", constrainWidth = true } = config;
-	const backgroundNodes = backgroundLayer(`${bindFrom}.background`, { imageClassName });
+	const { children, rootType = "div", rootProps, bindFrom = "_containerStyles", baseClassName = "rb-relative rb-isolate rb-overflow-visible", imageClassName = "rb-absolute rb-z-0", constrainWidth = true } = config;
+	const backgroundNode = backgroundFrame(`${bindFrom}.background`, { imageClassName });
 	const childrenArray = Array.isArray(children) ? children : [children];
 	const { className: _ignoredClassName, style: _ignoredStyle, ...safeRootProps } = rootProps ?? {};
 	return el(rootType, {
@@ -14515,7 +14629,7 @@ function styledContainer(config) {
 			}],
 			fallback: constrainWidth ? `${baseClassName} rb-container` : baseClassName
 		} }
-	}, [...backgroundNodes, ...childrenArray]);
+	}, [backgroundNode, ...childrenArray]);
 }
 //#endregion
 //#region ../blocks/src/system/spacing.ts
@@ -14532,7 +14646,7 @@ const DEFAULT_SECTION_SPACING = "medium";
 * - Creating a section wrapper with background theme
 * - Adding background color/gradient/image layers
 * - Binding className to section styles with transform
-* - Binding allowOverflow for background positioning
+* - Keeping foreground overflow visible while decorative backgrounds clip independently
 * - Wrapping content children
 *
 * Use this helper to eliminate 25+ lines of boilerplate section setup code.
@@ -14568,8 +14682,8 @@ const DEFAULT_SECTION_SPACING = "medium";
 * });
 */
 function styledSection(config) {
-	const { children, baseClass = "rb-px-6", spacing = DEFAULT_SECTION_SPACING, background = "background", bindFrom = "_sectionStyles", imageClassName = "rb-absolute rb-z-neg-10", renderBackgroundImage = true, backgroundImageLoading, backgroundImageFetchPriority, allowOverflow = false, fullWidthPath } = config;
-	const renderedBackgroundNodes = backgroundLayer(`${bindFrom}.background`, {
+	const { children, baseClass = "rb-px-6", spacing = DEFAULT_SECTION_SPACING, background = "background", bindFrom = "_sectionStyles", imageClassName = "rb-absolute rb-z-0", renderBackgroundImage = true, backgroundImageLoading, backgroundImageFetchPriority, fullWidthPath } = config;
+	const renderedBackgroundNode = backgroundFrame(`${bindFrom}.background`, {
 		imageClassName,
 		fallbackToken: background,
 		omitImageLayer: !renderBackgroundImage,
@@ -14592,13 +14706,8 @@ function styledSection(config) {
 					fullWidthPath
 				}
 			}]
-		} },
-		allowOverflow: allowOverflow ? true : { $bind: {
-			from: `${bindFrom}.background`,
-			transforms: [{ id: "background.resolveAllowOverflow" }],
-			fallback: false
 		} }
-	}, [...renderedBackgroundNodes, ...childrenArray]);
+	}, [renderedBackgroundNode, ...childrenArray]);
 }
 //#endregion
 //#region ../blocks/src/system/node/fragments/ctaButton.ts
@@ -15009,9 +15118,12 @@ function responsiveTwoColumn({ image, text, ratioFrom, imagePositionFrom, gapCla
 //#endregion
 //#region ../blocks/src/system/node/fragments/styledCard.ts
 function styledCard(children, opts, ...mods) {
-	const baseClassName = opts.baseClassName ?? "rb-relative rb-isolate rb-overflow-hidden rb-border";
-	const defaultBackgroundLayer = el("div", { className: "rb-absolute rb-inset-0 rb-z-neg-10 rb-h-full rb-w-full rb-pointer-events-none rb-bg-surface" });
-	const backgroundNodes = backgroundLayer(opts.backgroundFrom);
+	const baseClassName = opts.baseClassName ?? "rb-relative rb-isolate rb-overflow-visible rb-border";
+	const defaultBackgroundLayer = el("div", {
+		className: "rb-absolute rb-inset-0 rb-z-neg-10 rb-h-full rb-w-full rb-pointer-events-none rb-bg-surface",
+		style: { borderRadius: "inherit" }
+	});
+	const backgroundNode = backgroundFrame(opts.backgroundFrom);
 	const style = {
 		...opts.style ?? {},
 		borderColor: { $bind: {
@@ -15038,7 +15150,7 @@ function styledCard(children, opts, ...mods) {
 		...style ? { style } : {}
 	}, [
 		defaultBackgroundLayer,
-		...backgroundNodes,
+		backgroundNode,
 		...children
 	], ...mods);
 }
@@ -16041,7 +16153,7 @@ function buildTestimonialCard(...mods) {
 	}, props({ value: "“" })), richText({ className: "rb-prose rb-max-w-none" }, bind("testimonial.content.body"), when("testimonial.content.body"))]), el("div", { className: "rb-testimonial-attribution" }, buildAttributionNodes())])], {
 		stylesFrom: "content._cardStyles",
 		backgroundFrom: "content._cardStyles.background",
-		baseClassName: "rb-testimonial-card rb-relative rb-isolate rb-flex rb-h-full rb-flex-col rb-overflow-hidden rb-p-8"
+		baseClassName: "rb-testimonial-card rb-relative rb-isolate rb-flex rb-h-full rb-flex-col rb-overflow-visible rb-p-8"
 	}, ...mods);
 }
 /**
@@ -16513,39 +16625,6 @@ const formEmbedFragment = defineFragment({
 	}
 });
 //#endregion
-//#region ../blocks/src/system/fragments/library/footerBottomText.ts
-const footerBottomTextFragment = defineFragment({
-	id: "footerBottomText",
-	title: "Footer Text",
-	description: "Rich text content for the main footer body and optional bottom bar.",
-	fields: [{
-		id: "bodyText",
-		type: "richText",
-		label: "Body text",
-		description: "Appears in the main footer area.",
-		ui: { variant: "limited" }
-	}, {
-		id: "bottomText",
-		type: "richText",
-		label: "Bottom bar text",
-		description: "Appears in the optional footer bottom bar.",
-		ui: { variant: "limited" }
-	}],
-	layout: [richText({
-		className: "rb-prose rb-prose-sm rb-mx-auto rb-max-w-3xl rb-text-center",
-		style: textColorStyle("text/80")
-	}, when("bodyText"), bind("bodyText", { transforms: [{
-		id: "content.interpolateRichTextTokens",
-		options: { tokens: ["year", "site_name"] }
-	}] })), richText({
-		className: "rb-prose rb-prose-sm rb-mx-auto rb-max-w-3xl rb-text-center",
-		style: textColorStyle("text/80")
-	}, when("bottomText"), bind("bottomText", { transforms: [{
-		id: "content.interpolateRichTextTokens",
-		options: { tokens: ["year", "site_name"] }
-	}] }))]
-});
-//#endregion
 //#region ../blocks/src/system/fragments/library/singleButton.ts
 const singleButtonFragment = defineFragment({
 	id: "singleButton",
@@ -16718,7 +16797,7 @@ function createFaqAccordionLayout(options = {}) {
 						options: {
 							axis: "all",
 							includeSpacing: false,
-							baseClass: "rb-faq-item rb-relative rb-isolate rb-overflow-hidden"
+							baseClass: "rb-faq-item rb-relative rb-isolate rb-overflow-visible"
 						}
 					}]
 				},
@@ -17842,7 +17921,6 @@ function splitLayoutWith(children) {
 			}
 		}),
 		renderBackgroundImage: false,
-		allowOverflow: true,
 		baseClass: ""
 	});
 }
@@ -18470,7 +18548,7 @@ function postCard(children, ...mods) {
 	return styledCard(children, {
 		stylesFrom: "content._cardStyles",
 		backgroundFrom: "content._cardStyles.background",
-		baseClassName: "rb-relative rb-isolate rb-overflow-hidden rb-border rb-flex rb-flex-col rb-h-full"
+		baseClassName: "rb-relative rb-isolate rb-overflow-visible rb-border rb-flex rb-flex-col rb-h-full"
 	}, ...mods);
 }
 const gridPostCard = postCard([postImageLink("rb-h-48 rb-w-full rb-object-cover rb-transition-transform rb-hover-scale-105", {
@@ -18506,7 +18584,7 @@ const stackPostCard = styledCard([inline({
 ])])], {
 	stylesFrom: "content._cardStyles",
 	backgroundFrom: "content._cardStyles.background",
-	baseClassName: "rb-relative rb-isolate rb-overflow-hidden rb-border"
+	baseClassName: "rb-relative rb-isolate rb-overflow-visible rb-border"
 }, repeat("data.posts", "post"));
 const emptyState$2 = {
 	...styledCard([text({
@@ -18515,7 +18593,7 @@ const emptyState$2 = {
 	}, bind("content.emptyMessage", { fallback: "No posts published yet." }))], {
 		stylesFrom: "content._cardStyles",
 		backgroundFrom: "content._cardStyles.background",
-		baseClassName: "rb-relative rb-isolate rb-overflow-hidden rb-border rb-border-dashed rb-p-8 rb-text-center"
+		baseClassName: "rb-relative rb-isolate rb-overflow-visible rb-border rb-border-dashed rb-p-8 rb-text-center"
 	}),
 	$when: {
 		when: { from: "data.posts[0]" },
@@ -18525,7 +18603,7 @@ const emptyState$2 = {
 function blogListingShell(children) {
 	return styledSection({
 		children: styledContainer({
-			baseClassName: "rb-relative rb-isolate rb-overflow-hidden",
+			baseClassName: "rb-relative rb-isolate rb-overflow-visible",
 			children
 		}),
 		baseClass: ""
@@ -18937,7 +19015,7 @@ const copyLayout = fragmentLayoutNode$1(formCopyFragment.layout);
 const formSurface = styledContainer({
 	bindFrom: "_containerStyles",
 	constrainWidth: false,
-	baseClassName: "rb-form-surface rb-relative rb-isolate rb-overflow-hidden",
+	baseClassName: "rb-form-surface rb-relative rb-isolate rb-overflow-visible",
 	children: fragmentLayoutNode$1(formEmbedFragment.layout)
 });
 function createFormLayout(variant) {
@@ -19371,7 +19449,7 @@ function desktopOnlyDisplay(display) {
 }
 //#endregion
 //#region ../blocks/src/system/blocks/site-header.ts
-const whenTransformed$1 = (from, transformId, equals = true) => (node) => ({
+const whenTransformed = (from, transformId, equals = true) => (node) => ({
 	...node,
 	$when: {
 		when: {
@@ -19399,7 +19477,7 @@ const logoRow = link({
 	text({
 		as: "strong",
 		className: "header-logo-text rb-truncate"
-	}, whenTransformed$1("$root.theme.header.logo", "layout.headerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
+	}, whenTransformed("$root.theme.header.logo", "layout.headerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
 ]);
 const centeredLogoRow = link({
 	href: "/",
@@ -19419,7 +19497,7 @@ const centeredLogoRow = link({
 	text({
 		as: "strong",
 		className: "header-logo-text"
-	}, whenTransformed$1("$root.theme.header.logo", "layout.headerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
+	}, whenTransformed("$root.theme.header.logo", "layout.headerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
 ]);
 const createNavRow = (className, align = "end") => navRow({
 	className: `${className} header-nav-row`,
@@ -19551,7 +19629,7 @@ const classicLayout = inline({
 	logoRow,
 	createNavRow(`rb-ml-auto ${desktopOnlyDisplay("flex")} rb-gap-6`),
 	headerCta
-], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "inline"));
+], whenTransformed("$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` })),
@@ -19562,7 +19640,7 @@ const classicCenteredNavLayout = inline({
 	logoRow,
 	createNavRow(`rb-flex-1 rb-justify-center ${desktopOnlyDisplay("flex")} rb-gap-6`, "center"),
 	headerCta
-], whenTransformed$1("$root.theme.header", "layout.classicNavMode", "centered"));
+], whenTransformed("$root.theme.header", "layout.classicNavMode", "centered"));
 const centeredLayout = stack({
 	gap: "md",
 	align: "center",
@@ -19625,7 +19703,6 @@ const siteHeaderBlockDefinition = { manifest: createBlockManifest({
 			transforms: pipe(tx("layout.headerSectionBackground")),
 			fallback: "background"
 		}),
-		allowOverflow: true,
 		className: bindProp("$root.theme.header", {
 			transforms: pipe(tx("layout.headerRootClass")),
 			fallback: "header-root rb-z-40 rb-w-full transition-theme"
@@ -19675,218 +19752,154 @@ const footerNavGroupsLayout = stack({
 	linkRequired: true,
 	target: { $bind: { from: "entry.target" } },
 	rel: { $bind: { from: "entry.rel" } }
-}, [text({ as: "span" }, bind("entry.label"))], repeat("group.children", "entry"))])], repeat("footerMenu.groups", "group"))], when("footerMenu.groups"));
+}, [text({ as: "span" }, bind("entry.label"))], repeat("group.children", "entry"))])], repeat("footerMenu.groups", "group"))], whenCollectionHasItems("footerMenu.groups"));
 //#endregion
 //#region ../blocks/src/system/blocks/site-footer.ts
-const footerTextLayout = () => materializeFragment({ fragment: footerBottomTextFragment }).layout;
-const whenTransformed = (from, transformId, equals = true) => (node) => ({
-	...node,
-	$when: {
-		when: {
-			from,
-			transforms: [{ id: transformId }]
-		},
-		equals
-	}
-});
-const bottomBarTextLayout = () => {
-	const bottomTextNode = footerTextLayout()[1];
-	return bottomTextNode ? [bottomTextNode] : [];
-};
-const bodyTextLayout = () => {
-	const bodyTextNode = footerTextLayout()[0];
-	return bodyTextNode ? [bodyTextNode] : [];
-};
-const businessAddressLayout = () => [text({
-	as: "p",
-	className: "rb-caption rb-opacity-80"
-}, bind("site.businessAddress.displayAddress"), when("content.showBusinessAddress", { equals: true }))];
-const inlineBottomTextLayout = () => {
-	const bottomTextNode = footerTextLayout()[1];
-	if (!bottomTextNode) return [];
-	return [when("$root.theme.footer.bottomBar.enabled", {
-		equals: true,
-		not: true
-	})(bottomTextNode)];
-};
-const simpleFooterLayout = stack({
-	gap: "md",
-	align: "start",
-	className: { $bind: {
-		from: "$root.theme.footer",
-		transforms: [{ id: "layout.footerSimpleRootClass" }],
-		fallback: "rb-container rb-flex rb-w-full rb-flex-col rb-items-start rb-gap-4 rb-py-10 rb-text-left"
-	} }
-}, [
-	link({
-		href: "/",
-		className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{
-				id: "layout.footerLogoClass",
-				options: { requireExplicitShow: true }
-			}],
-			fallback: "rb-hidden"
-		} }
-	}, [
-		media({ className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{ id: "layout.footerLogoMediaClass" }],
-			fallback: "rb-w-auto"
-		} } }, when("content.logo"), bind("content.logo")),
-		stack({ className: "rb-contents" }, [media({ className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{ id: "layout.footerLogoMediaClass" }],
-			fallback: "rb-w-auto"
-		} } }, when("site.logo"), bind("site.logo"))], when("content.logo", { not: true })),
-		text({
-			as: "strong",
-			className: "footer-logo-text rb-nav-text"
-		}, whenTransformed("$root.theme.footer", "layout.footerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
-	]),
-	footerNav({
-		collectionPath: "footerMenu.items",
-		mode: "flatten",
-		className: { $bind: {
-			from: "$root.theme.footer.navLayout",
-			transforms: [{ id: "layout.footerSimpleNavClass" }],
-			fallback: "footer-nav rb-flex rb-flex-wrap rb-justify-start rb-gap-x-6 rb-gap-y-3"
-		} },
-		linkClassName: "footer-nav-link rb-inline-flex rb-items-center rb-px-4 rb-py-2 rb-nav-text transition-theme-standard"
-	}),
-	...bodyTextLayout(),
-	...businessAddressLayout(),
-	...inlineBottomTextLayout()
-], when("$root.theme.footer.variant", { equals: "simple" }));
-const columnsFooterLayout = stack({
-	gap: "xl",
-	align: "start",
+const brandLogo = link({
+	href: "/",
 	className: { $bind: {
-		from: "$root.theme.footer.maxWidth",
+		from: "$root.theme.footer.logo",
 		transforms: [{
-			id: "layout.maxWidthClass",
-			options: { base: "rb-flex rb-w-full rb-flex-col rb-gap-10 rb-py-12" }
+			id: "layout.footerLogoClass",
+			options: { base: "footer-logo rb-inline-flex rb-items-center rb-gap-3 rb-no-underline" }
 		}],
-		fallback: "rb-container rb-flex rb-w-full rb-flex-col rb-gap-10 rb-py-12"
+		fallback: "footer-logo rb-inline-flex rb-items-center rb-gap-3 rb-no-underline"
 	} }
-}, [
-	footerNavGroupsLayout,
-	inline({ className: "rb-flex rb-w-full rb-flex-wrap rb-items-center rb-justify-between rb-gap-4" }, [text({
-		as: "strong",
-		className: "rb-block rb-nav-text",
-		style: textColorStyle("text")
-	}, whenTransformed("$root.theme.footer", "layout.footerLogoTextVisible"), bind("site.title", { fallback: "Your Site" })), footerNav({
-		collectionPath: "footerMenu.items",
-		mode: "links-only",
-		className: "rb-flex rb-flex-wrap rb-justify-end rb-gap-x-6 rb-gap-y-3",
-		linkClassName: "footer-nav-link rb-inline-flex rb-items-center rb-px-4 rb-py-2 rb-nav-text transition-theme-standard"
-	})]),
-	...bodyTextLayout(),
-	...businessAddressLayout(),
-	...inlineBottomTextLayout()
-], when("$root.theme.footer.variant", { equals: "columns" }));
-const splitFooterLayout = stack({
-	gap: "xl",
-	align: "start",
+}, [media({ className: { $bind: {
+	from: "$root.theme.footer.logo",
+	transforms: [{
+		id: "layout.footerLogoMediaClass",
+		options: { base: "rb-h-10 rb-w-auto" }
+	}],
+	fallback: "rb-h-10 rb-w-auto"
+} } }, when("module.showLogo", { equals: true }), when("content.logo"), bind("content.logo")), text({
+	as: "strong",
+	className: "footer-logo-text rb-nav-text"
+}, when("module.showTitle", { equals: true }), bind("site.title", { fallback: "Your Site" }))], when("module.kind", { equals: "brand" }));
+const navigation = stack({
+	gap: "md",
+	className: "rb-w-full"
+}, [footerNavGroupsLayout, footerNav({
+	collectionPath: "footerMenu.items",
+	mode: "links-only",
 	className: { $bind: {
-		from: "$root.theme.footer.maxWidth",
-		transforms: [{
-			id: "layout.maxWidthClass",
-			options: { base: "rb-flex rb-w-full rb-flex-col rb-gap-10 rb-py-12" }
-		}],
-		fallback: "rb-container rb-flex rb-w-full rb-flex-col rb-gap-10 rb-py-12"
-	} }
+		from: "module.navigationClassName",
+		fallback: "footer-nav rb-flex rb-flex-wrap rb-gap-x-6 rb-gap-y-3"
+	} },
+	linkClassName: "footer-nav-link rb-nav-text transition-theme-standard"
+})], when("module.kind", { equals: "navigation" }));
+const legalNavigation = footerNav({
+	collectionPath: "legalFooterMenu.items",
+	mode: "links-only",
+	className: "rb-flex rb-flex-wrap rb-gap-x-4 rb-gap-y-2",
+	linkClassName: "footer-nav-link rb-caption transition-theme-standard"
+});
+const address = text({
+	as: "address",
+	className: "rb-not-italic rb-opacity-80"
+}, when("module.kind", { equals: "business-address" }), bind("module.address"));
+const contact = stack({
+	gap: "sm",
+	className: "rb-items-start"
+}, [link({
+	href: { $bind: { from: "contactLink.href" } },
+	className: "rb-nav-text rb-break-words transition-theme-standard"
+}, [text({ as: "span" }, bind("contactLink.label"))], repeat("module.contactLinks", "contactLink"))], when("module.kind", { equals: "contact" }));
+const hours = stack({
+	gap: "sm",
+	className: "rb-w-full"
+}, [inline({ className: "rb-flex rb-w-full rb-justify-between rb-gap-4" }, [text({
+	as: "span",
+	className: "rb-label"
+}, bind("hoursDay.weekday")), text({
+	as: "span",
+	className: "rb-caption rb-opacity-80"
+}, bind("hoursDay.hours"))], repeat("module.openingHours", "hoursDay")), text({
+	as: "p",
+	className: "rb-caption rb-opacity-70"
+}, bind("module.timeZone"), when("module.timeZone"))], when("module.kind", { equals: "opening-hours" }));
+const socials = inline({ className: "rb-flex rb-flex-wrap rb-gap-x-5 rb-gap-y-3" }, [link({
+	href: { $bind: { from: "social.href" } },
+	target: "_blank",
+	rel: "noreferrer noopener",
+	"aria-label": { $bind: { from: "social.label" } },
+	className: "rb-nav-text transition-theme-standard"
+}, [icon({ className: "rb-h-5 rb-w-5" }, bind("social.icon"), when("social.icon")), text({ as: "span" }, bind("social.label"), when("social.icon", { equals: null }))], repeat("module.socialLinks", "social"))], when("module.kind", { equals: "social-links" }));
+const authoredCopy = richText({
+	className: "rb-prose rb-prose-sm rb-max-w-none",
+	style: textColorStyle("text/80")
+}, when("module.content"), bind("module.content", { transforms: [{
+	id: "content.interpolateRichTextTokens",
+	options: { tokens: ["year", "site_name"] }
+}] }));
+const footerGroup = stack({
+	gap: "md",
+	align: "stretch",
+	className: "rb-min-w-0",
+	"data-footer-group": { $bind: { from: "group.kind" } }
+}, [stack({
+	gap: "md",
+	align: "start",
+	"data-preview-footer-module-id": { $bind: { from: "module.id" } }
 }, [
-	inline({ className: { $bind: {
-		from: "$root.theme.footer.logo",
-		transforms: [{ id: "layout.footerSplitMainClass" }],
-		fallback: "rb-flex rb-w-full rb-flex-col rb-items-start rb-justify-between rb-gap-8 rb-md-flex-row rb-md-items-end"
-	} } }, [stack({}, [footerNav({
-		collectionPath: "footerMenu.items",
-		mode: "flatten",
-		className: { $bind: {
-			from: "$root.theme.footer.navLayout",
-			transforms: [{ id: "layout.footerSplitNavSingleClass" }],
-			fallback: "rb-w-full rb-space-y-3 rb-text-left"
-		} },
-		linkClassName: "footer-nav-link rb-inline-flex rb-items-center rb-whitespace-nowrap rb-nav-text transition-theme-standard"
-	})]), link({
-		href: "/",
-		className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{ id: "layout.footerLogoClass" }],
-			fallback: "footer-logo rb-inline-flex rb-items-center rb-justify-end rb-gap-3 rb-self-end rb-no-underline rb-text-right rb-transition-opacity rb-hover-opacity-80"
-		} }
-	}, [
-		media({ className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{ id: "layout.footerLogoMediaClass" }],
-			fallback: "rb-w-auto"
-		} } }, when("content.logo"), bind("content.logo")),
-		stack({ className: "rb-contents" }, [media({ className: { $bind: {
-			from: "$root.theme.footer.logo",
-			transforms: [{ id: "layout.footerLogoMediaClass" }],
-			fallback: "rb-w-auto"
-		} } }, when("site.logo"), bind("site.logo"))], when("content.logo", { not: true })),
-		text({
-			as: "strong",
-			className: "footer-logo-text rb-nav-text"
-		}, whenTransformed("$root.theme.footer", "layout.footerLogoTextVisible"), bind("site.title", { fallback: "Your Site" }))
-	])]),
-	...businessAddressLayout(),
-	...inlineBottomTextLayout()
-], when("$root.theme.footer.variant", { equals: "split" }));
-const footerLayout = section({
-	background: "background",
+	text({
+		as: "h2",
+		className: "rb-label",
+		style: textColorStyle("text/70")
+	}, bind("module.heading"), when("module.heading")),
+	brandLogo,
+	navigation,
+	stack({
+		gap: "sm",
+		className: "rb-w-full"
+	}, [legalNavigation], when("module.kind", { equals: "legal-navigation" })),
+	address,
+	contact,
+	hours,
+	socials,
+	stack({ className: "rb-w-full" }, [authoredCopy], when("module.kind", { equals: "supporting-text" })),
+	stack({ className: "rb-w-full rb-lg-col-span-3" }, [authoredCopy], when("module.kind", { equals: "legal" }))
+], repeat("group.modules", "module"))], repeat("region.groups", "group"));
+const footerMainRegion = stack({
+	className: { $bind: { from: "region.className" } },
+	"data-footer-region": { $bind: { from: "region.kind" } }
+}, [footerGroup], when("region.kind", { equals: "main" }), repeat("content.footerRuntime.regions", "region"));
+const footerBottomRegion = stack({ className: { $bind: {
+	from: "$root.theme.footer",
+	transforms: [{ id: "layout.footerBottomBarContainerClass" }],
+	fallback: "rb-w-full"
+} } }, [stack({
 	className: { $bind: {
 		from: "$root.theme.footer",
-		transforms: [{ id: "layout.footerRootClass" }],
-		fallback: "rb-w-full rb-border-t transition-theme"
+		transforms: [{ id: "layout.footerBottomBarClass" }],
+		fallback: "rb-w-full rb-border-t rb-px-6 rb-py-6 rb-text-center"
 	} },
 	style: { $bind: {
 		from: "$root.theme.footer",
-		transforms: [{ id: "layout.footerRootStyle" }],
-		fallback: mergeStyles(backgroundColorStyle("surface"), surfaceForegroundStyle({ text: "rgb(var(--tb-text))" }), borderColorStyle("border"))
-	} }
-}, [
-	simpleFooterLayout,
-	columnsFooterLayout,
-	splitFooterLayout,
-	stack({
-		className: { $bind: {
-			from: "$root.theme.footer",
-			transforms: [{ id: "layout.footerBottomBarClass" }],
-			fallback: "rb-w-full rb-border-t rb-py-5"
-		} },
-		style: { $bind: {
-			from: "$root.theme.footer",
-			transforms: [{ id: "layout.footerBottomBarStyle" }]
-		} }
-	}, [stack({ className: { $bind: {
-		from: "$root.theme.footer",
-		transforms: [{ id: "layout.footerBottomBarContainerClass" }],
-		fallback: "rb-container"
-	} } }, [...bottomBarTextLayout()])], when("$root.theme.footer.bottomBar.enabled", { equals: true }))
-]);
+		transforms: [{ id: "layout.footerBottomBarStyle" }]
+	} },
+	"data-footer-region": "bottom"
+}, [footerGroup])], when("region.kind", { equals: "bottom" }), repeat("content.footerRuntime.regions", "region"));
 const siteFooterBlockDefinition = { manifest: createBlockManifest({
 	id: "block.site-footer",
 	title: "Site Footer",
 	category: "layout",
-	fragments: [{
-		fragment: footerBottomTextFragment,
-		fieldPriority: 0
-	}],
 	skipSectionStyles: true,
-	additionalFields: [{
-		id: "showBusinessAddress",
-		type: "boolean",
-		label: "Add business address to site footer?",
-		required: false,
-		defaultValue: false,
-		ui: { intent: "content" }
-	}],
-	layout: footerLayout,
-	description: "Site-wide footer with navigation links and optional columns.",
+	layout: section({
+		background: "background",
+		className: { $bind: {
+			from: "$root.theme.footer",
+			transforms: [{ id: "layout.footerRootClass" }],
+			fallback: "rb-w-full rb-border-t transition-theme"
+		} },
+		style: { $bind: {
+			from: "$root.theme.footer",
+			transforms: [{ id: "layout.footerRootStyle" }],
+			fallback: mergeStyles(backgroundColorStyle("surface"), surfaceForegroundStyle({ text: "rgb(var(--tb-text))" }), borderColorStyle("border"))
+		} },
+		"data-footer-membership": { $bind: { from: "content.footerRuntime.membershipKey" } }
+	}, [footerMainRegion, footerBottomRegion]),
+	description: "Site-wide composed footer with canonical shared details.",
 	styleTokens: { spacing: "md" },
 	paletteHidden: true
 }) };
@@ -20364,7 +20377,7 @@ const repeatedItemsNode = repeaterFragmentLayout({
 				id: "boxStyles.all",
 				options: {
 					axis: "all",
-					baseClass: "rb-collection-item rb-relative rb-isolate rb-overflow-hidden rb-border"
+					baseClass: "rb-collection-item rb-relative rb-isolate rb-overflow-visible rb-border"
 				}
 			}]
 		},