@riverbankcms/sdk 0.102.0 → 0.103.0

package/dist/client/rendering.mjs

@@ -11783,6 +11783,8 @@ var init_schema$1 = __esmMin((() => {
 		navStyle: headerNavStyle,
 		navColor: themeColorTokenSchema.nullable().optional(),
 		navWeight: navFontWeight.default("medium"),
+		navTypography: z$1.enum(["body", "heading"]).optional(),
+		navTextSize: navLinkStyleSchema.shape.textSize,
 		container: headerContainerSchema,
 		border: headerBorderSchema,
 		shadow: componentShadowSchema.optional(),
@@ -13441,9 +13443,38 @@ var init_backgroundAppearance = __esmMin((() => {
 }));
 var init_compositionBudget = __esmMin((() => {
 	init_types$16();
-})), init_schemaVersionedJson = __esmMin((() => {})), noneBoundaryOption, softBoundaryOption, spaciousBoundaryOption;
+}));
+var init_schemaVersionedJson = __esmMin((() => {}));
+//#endregion
+//#region ../theme-core/src/site-styles/sectionTransitions.ts
+function boundaryRuntimeMetrics(family, size, heightExpression) {
+	return {
+		family,
+		size,
+		heightCss: heightExpression.includes(" ") ? `calc(${heightExpression})` : heightExpression,
+		reserveCss: `calc((${heightExpression}) / 2)`
+	};
+}
+function boundaryRuntimeMetricsForTransition(transition) {
+	return sectionBoundaryRuntimeMetricsByTransition[transition];
+}
+var sectionBoundaryRuntimeMetricsByTransition, noneBoundaryOption, softBoundaryOption, spaciousBoundaryOption;
 var init_sectionTransitions = __esmMin((() => {
 	init_types$16();
+	sectionBoundaryRuntimeMetricsByTransition = {
+		none: null,
+		"soft-fade-short": boundaryRuntimeMetrics("gradient", "medium", "6rem + 2px"),
+		"soft-fade-long": boundaryRuntimeMetrics("gradient", "spacious", "10rem"),
+		"soft-fade-expansive": boundaryRuntimeMetrics("gradient", "expansive", "14rem"),
+		"wave-edge": boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"),
+		"wave-edge-balanced": boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"),
+		"wave-edge-gentle": boundaryRuntimeMetrics("wave", "compact", "4.5rem + 2px"),
+		"wave-edge-bold": boundaryRuntimeMetrics("wave", "large", "7rem + 2px"),
+		"wave-edge-drift": boundaryRuntimeMetrics("wave", "medium", "6rem + 2px"),
+		"angle-edge": boundaryRuntimeMetrics("angle", "medium", "6rem + 2px"),
+		"angle-edge-subtle": boundaryRuntimeMetrics("angle", "compact", "4.5rem + 2px"),
+		"angle-edge-steep": boundaryRuntimeMetrics("angle", "large", "7rem + 2px")
+	};
 	noneBoundaryOption = {
 		id: asBoundaryOptionId("break:none"),
 		label: "None",
@@ -13508,12 +13539,12 @@ function validateUniquePageDesignPins(intent, ctx) {
 		label: "block Look pin"
 	});
 	addDuplicateStringIssues(ctx, {
-		values: intent.boundaryPins.map((pin) => boundaryKey(pin.previousBlockId, pin.nextBlockId)),
+		values: intent.boundaryPins.map((pin) => boundaryKey$1(pin.previousBlockId, pin.nextBlockId)),
 		path: ["boundaryPins"],
 		label: "boundary pin"
 	});
 }
-function boundaryKey(previousBlockId, nextBlockId) {
+function boundaryKey$1(previousBlockId, nextBlockId) {
 	return makeBoundaryId(previousBlockId, nextBlockId);
 }
 var pageDesignUserPinnedAppearanceChoiceSchema, pageDesignUserPinnedBoundaryChoiceSchema, pageDesignBoundaryTreatmentSchema, pageDesignUserPinnedBoundaryTreatmentChoiceSchema, pageDesignBlockLookPinSchema, pageDesignBoundaryPinSchema, legacyPageDesignBoundaryPinSchema;
@@ -13961,7 +13992,7 @@ function asHeaderStyleId(value) {
 * optional nested styling fields that would otherwise leak from another Look.
 */
 function baseHeader(theme) {
-	const { navLinkStyle: _navLinkStyle, dropdownStyle: _dropdownStyle, ctaVariant: _ctaVariant, navContainer: _navContainer, container: _container, shadow: _shadow, logo: _logo, logoText: _logoText, border: _border, ...header } = theme.header;
+	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;
 	return {
 		...header,
 		navContainer: {
@@ -16098,6 +16129,7 @@ var init_runtimeCompiler = __esmMin((() => {
 	init_designState();
 	init_types$16();
 	init_accessibleSurfaces();
+	init_sectionTransitions();
 	defaultDesignRuntimeRules = defineDesignRuntimeRules({
 		sectionSurfaces: {
 			base: {},
@@ -17895,13 +17927,22 @@ function toSiteChromeBackgroundColorTokens(tokenNames) {
 		return token ? [token] : [];
 	});
 }
-var siteChromeBackgroundColorTokens, quickSiteChromeBackgroundColorTokens, init_siteChromeBackgrounds = __esmMin((() => {
+var siteChromeBackgroundColorTokens, quickSiteChromeBackgroundColorTokens;
+var init_siteChromeBackgrounds = __esmMin((() => {
 	init_backgroundAppearance();
 	init_rawStyleFields();
 	siteChromeBackgroundColorTokens = toSiteChromeBackgroundColorTokens(backgroundAppearanceColorTokenNames);
 	quickSiteChromeBackgroundColorTokens = toSiteChromeBackgroundColorTokens(backgroundAppearanceQuickColorTokenNames);
 	siteChromeBackgroundColorTokens.filter((token) => !quickSiteChromeBackgroundColorTokens.includes(token));
-})), themeTokenRecipeOptions;
+}));
+function mergeHeaderNavTypographyPreference(style, preferences) {
+	return preferences.typography === "inherit" && preferences.fontSize === "inherit" ? style : {
+		...style,
+		...preferences.typography === "inherit" ? {} : { typography: preferences.typography },
+		...preferences.fontSize === "inherit" ? {} : { textSize: preferences.fontSize }
+	};
+}
+var init_siteChromeNavPreferences = __esmMin((() => {})), themeTokenRecipeOptions;
 var init_tokenRecipes = __esmMin((() => {
 	themeTokenRecipeOptions = {
 		palette: [
@@ -17986,6 +18027,7 @@ var init_site_styles = __esmMin((() => {
 	init_runtimeCompiler();
 	init_sectionTransitions();
 	init_siteChromeBackgrounds();
+	init_siteChromeNavPreferences();
 	init_siteStyleThemeCompiler();
 	init_siteStyleBlockPolicies();
 	init_sourceCatalogs();
@@ -129109,6 +129151,7 @@ Object.keys(NAV_LINK_PRESETS);
 //#endregion
 //#region ../theme-core/src/header/generateHeaderCss.ts
 init_resolver$1();
+init_siteChromeNavPreferences();
 init_shared$5();
 init_breakpoints();
 init_navDropdownSizing();
@@ -129290,15 +129333,19 @@ function generateLogoTextBehaviorStyles(logoText, themeId) {
 * legacy navStyle, navWeight, navColor, and navEffects settings.
 */
 function generateNavLinkStyles(header, themeId, tokens, theme, contrastTreatment, navTextSize) {
+	const navPreferences = {
+		typography: header.navTypography ?? "inherit",
+		fontSize: header.navTextSize ?? "inherit"
+	};
 	if (header.navLinkStyle) return generateNavLinkCSS({
 		themeId,
 		tokens,
 		theme,
-		style: contrastTreatment || navTextSize ? {
+		style: mergeHeaderNavTypographyPreference(contrastTreatment || navTextSize ? {
 			...header.navLinkStyle,
 			...contrastTreatment ? { contrastTreatment } : {},
 			...navTextSize ? { textSize: navTextSize } : {}
-		} : header.navLinkStyle,
+		} : header.navLinkStyle, navPreferences),
 		className: "header-nav-link"
 	});
 	const navStyle = header.navStyle ?? "minimal";
@@ -129370,7 +129417,7 @@ function generateNavLinkStyles(header, themeId, tokens, theme, contrastTreatment
 		themeId,
 		tokens,
 		theme,
-		style: mergedStyle,
+		style: mergeHeaderNavTypographyPreference(mergedStyle, navPreferences),
 		className: "header-nav-link"
 	});
 }
@@ -129722,6 +129769,7 @@ function generateFooterBottomTextLinkStyles(footer, themeId, tokens) {
 //#endregion
 //#region ../theme-core/src/layout/generateLayoutCss.ts
 init_breakpoints();
+init_sectionTransitions();
 /**
 * Generate layout CSS for theme scope (background, text color)
 *
@@ -129763,6 +129811,9 @@ const boldWaveTransitionMask = svgDataUrl("<svg viewBox='0 0 1440 72' xmlns='htt
 const driftWaveTransitionMask = 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 generateSiteStyleTransitionCss(themeId) {
 	const selector = `:where([data-theme-scope="${themeId}"])`;
+	const compactBoundaryHeight = requiredBoundaryHeightCss("wave-edge-gentle");
+	const mediumBoundaryHeight = requiredBoundaryHeightCss("wave-edge");
+	const largeBoundaryHeight = requiredBoundaryHeightCss("wave-edge-bold");
 	return `${selector} [data-style-group^='site-style-transition-'] {
   position: relative;
   z-index: 2;
@@ -129770,23 +129821,48 @@ function generateSiteStyleTransitionCss(themeId) {
   --site-style-transition-to: rgb(var(--tb-background));
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-'] {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-'] {
   position: relative;
   z-index: 3;
   height: 0;
   pointer-events: none;
+  --site-style-boundary-height: ${mediumBoundaryHeight};
+}
+
+${selector} [data-block][data-site-style-boundary-before] > :where([data-slot='section']) {
+  padding-top: calc(var(--rb-section-pad-y, 0rem) + var(--site-style-boundary-before-reserve, 0rem));
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-']::after,
-${selector} [data-block-transition][data-style-group^='site-style-transition-angle-edge-']::after,
-${selector} [data-block-transition][data-style-group^='site-style-transition-soft-fade']::after {
+${selector} [data-block][data-site-style-boundary-after] > :where([data-slot='section']) {
+  padding-bottom: calc(var(--rb-section-pad-y, 0rem) + var(--site-style-boundary-after-reserve, 0rem));
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-']::before,
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-']::before,
+${selector} [data-block-boundary][data-style-group^='site-style-transition-soft-fade']::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
-  bottom: -2px;
+  top: 0;
+  transform: translateY(-50%);
+  z-index: 0;
+  height: var(--site-style-boundary-height);
+  background: var(--site-style-transition-from);
+  pointer-events: none;
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-']::after,
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-']::after,
+${selector} [data-block-boundary][data-style-group^='site-style-transition-soft-fade']::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  transform: translateY(-50%);
   z-index: 1;
-  height: calc(6rem + 2px);
+  height: var(--site-style-boundary-height);
   pointer-events: none;
 }
 
@@ -129824,7 +129900,7 @@ ${selector} [data-style-group$='-to-brand-depth-band'] {
   --site-style-transition-to: rgb(var(--tb-primary-800));
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-soft-fade']::after {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-soft-fade']::after {
   /* Fallback for browsers without color-mix(). */
   background: linear-gradient(
     to bottom,
@@ -129840,30 +129916,37 @@ ${selector} [data-block-transition][data-style-group^='site-style-transition-sof
   );
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-soft-fade-long-']::after {
-  height: 10rem;
+${selector} [data-block-boundary][data-style-group^='site-style-transition-soft-fade-long-'] {
+  --site-style-boundary-height: ${requiredBoundaryHeightCss("soft-fade-long")};
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-soft-fade-expansive-']::after {
-  height: 14rem;
+${selector} [data-block-boundary][data-style-group^='site-style-transition-soft-fade-expansive-'] {
+  --site-style-boundary-height: ${requiredBoundaryHeightCss("soft-fade-expansive")};
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-angle-edge-']::after {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-']::after {
+  height: calc(var(--site-style-boundary-height) + 2px);
   background: var(--site-style-transition-to);
   clip-path: polygon(0 42%, 100% 8%, 100% 100%, 0 100%);
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-angle-edge-subtle-']::after {
-  height: calc(4.5rem + 2px);
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-subtle-'] {
+  --site-style-boundary-height: ${compactBoundaryHeight};
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-subtle-']::after {
   clip-path: polygon(0 34%, 100% 18%, 100% 100%, 0 100%);
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-angle-edge-steep-']::after {
-  height: calc(7rem + 2px);
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-steep-'] {
+  --site-style-boundary-height: ${largeBoundaryHeight};
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-angle-edge-steep-']::after {
   clip-path: polygon(0 54%, 100% 0%, 100% 100%, 0 100%);
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-']::after {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-']::after {
   background: var(--site-style-transition-to);
   mask-image: url("${classicWaveTransitionMask}");
   mask-repeat: no-repeat;
@@ -129873,28 +129956,39 @@ ${selector} [data-block-transition][data-style-group^='site-style-transition-wav
   -webkit-mask-size: 100% 100%;
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-balanced-']::after {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-balanced-']::after {
   mask-image: url("${balancedWaveTransitionMask}");
   -webkit-mask-image: url("${balancedWaveTransitionMask}");
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-gentle-']::after {
-  height: calc(4.5rem + 2px);
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-gentle-'] {
+  --site-style-boundary-height: ${compactBoundaryHeight};
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-gentle-']::after {
   mask-image: url("${gentleWaveTransitionMask}");
   -webkit-mask-image: url("${gentleWaveTransitionMask}");
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-bold-']::after {
-  height: calc(7rem + 2px);
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-bold-'] {
+  --site-style-boundary-height: ${largeBoundaryHeight};
+}
+
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-bold-']::after {
   mask-image: url("${boldWaveTransitionMask}");
   -webkit-mask-image: url("${boldWaveTransitionMask}");
 }
 
-${selector} [data-block-transition][data-style-group^='site-style-transition-wave-edge-drift-']::after {
+${selector} [data-block-boundary][data-style-group^='site-style-transition-wave-edge-drift-']::after {
   mask-image: url("${driftWaveTransitionMask}");
   -webkit-mask-image: url("${driftWaveTransitionMask}");
 }`;
 }
+function requiredBoundaryHeightCss(transition) {
+	const metrics = boundaryRuntimeMetricsForTransition(transition);
+	if (!metrics) throw new Error(`Missing boundary runtime metrics for ${transition}`);
+	return metrics.heightCss;
+}
 function svgDataUrl(svg) {
 	return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
@@ -132039,13 +132133,15 @@ init_fragments();
 init_colorStyles();
 init_typeGuards();
 init_media();
-function PageRenderer$1({ theme, page, usePlaceholders = false, dataContext, wrapBlock, registry, themeTokens: providedThemeTokens, routeMap, blockOverrides, sdkConfig, customBlocks, previewAuthoring }) {
+function PageRenderer$1({ theme, page, runtimeBoundaries, usePlaceholders = false, dataContext, wrapBlock, wrapBoundary, registry, themeTokens: providedThemeTokens, routeMap, blockOverrides, sdkConfig, customBlocks, previewAuthoring }) {
 	const imageResolveContext = React$1.useMemo(() => resolvePageRendererImageResolveContext(dataContext), [
 		dataContext?.imageResolveContext,
 		dataContext?.mediaAssets,
 		dataContext?.siteId,
 		dataContext?.supabaseUrl
 	]);
+	const boundaryByAdjacentBlockIds = React$1.useMemo(() => boundaryMapForAdjacentBlockIds(runtimeBoundaries ?? []), [runtimeBoundaries]);
+	const usesRuntimeBoundaries = runtimeBoundaries !== void 0;
 	if (!page || page.blocks.length === 0) return /* @__PURE__ */ jsx("div", {
 		className: "rb-p-6 rb-caption",
 		style: textColorStyle("mutedText"),
@@ -132057,6 +132153,17 @@ function PageRenderer$1({ theme, page, usePlaceholders = false, dataContext, wra
 	return /* @__PURE__ */ jsx("div", { children: page.blocks.map((block, index) => {
 		const blockPosition = pageBlockPosition(index, page.blocks.length);
 		const blockKey = block.id ?? `${block.kind}-${index}`;
+		const previousBlock = page.blocks[index - 1] ?? null;
+		const nextBlock = page.blocks[index + 1] ?? null;
+		const boundaryBefore = boundaryBetweenBlocks(previousBlock, block, boundaryByAdjacentBlockIds);
+		const boundaryAfter = boundaryBetweenBlocks(block, nextBlock, boundaryByAdjacentBlockIds);
+		const boundaryElement = renderBoundaryAfterBlock({
+			block,
+			nextBlock,
+			blockKey,
+			boundaryByAdjacentBlockIds,
+			wrapBoundary
+		});
 		const cleanKind = block.kind.replace(/^block\./, "");
 		const definition = getBlockDefinition(block.kind);
 		const managesOwnWrapper = definition?.manifest.behaviours?.managesOwnWrapper;
@@ -132079,11 +132186,18 @@ function PageRenderer$1({ theme, page, usePlaceholders = false, dataContext, wra
 			imageResolveContext,
 			previewAuthoring
 		};
-		if (!shouldUseWrapper) return /* @__PURE__ */ jsx(MemoBlockSection, { ...blockSectionProps }, blockKey);
+		if (!shouldUseWrapper) {
+			const rendered = /* @__PURE__ */ jsx(MemoBlockSection, { ...blockSectionProps }, `${blockKey}:block`);
+			return boundaryElement ? /* @__PURE__ */ jsxs(React$1.Fragment, { children: [rendered, boundaryElement] }, blockKey) : rendered;
+		}
 		const wrapperClassName = [`block-${cleanKind}`, wrapBlock ? "group relative" : null].filter(Boolean).join(" ");
 		const styleGroup = typeof renderableContent.styleGroup === "string" ? renderableContent.styleGroup : void 0;
 		const blockLook = typeof renderableContent.blockLook === "string" ? renderableContent.blockLook : void 0;
 		const transitionStyle = transitionCssVarsStyle(renderableContent);
+		const blockStyle = mergeStyleObjects(transitionStyle, boundaryReserveCssVarsStyle({
+			before: boundaryBefore,
+			after: boundaryAfter
+		}));
 		const blockElement = /* @__PURE__ */ jsx("div", {
 			className: wrapperClassName,
 			"data-block": cleanKind,
@@ -132093,11 +132207,14 @@ function PageRenderer$1({ theme, page, usePlaceholders = false, dataContext, wra
 			"data-block-variant": variantKey ?? void 0,
 			"data-block-look": blockLook,
 			"data-page-block-position": blockPosition,
+			"data-site-style-boundary-before": boundaryBefore?.metrics.size,
+			"data-site-style-boundary-after": boundaryAfter?.metrics.size,
 			"data-style-group": styleGroup,
-			style: transitionStyle,
+			style: blockStyle,
 			children: /* @__PURE__ */ jsx(MemoBlockSection, { ...blockSectionProps })
 		}, blockKey);
-		if (!isSiteStyleTransitionStyleGroup(styleGroup)) return blockElement;
+		if (boundaryElement) return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [blockElement, boundaryElement] }, blockKey);
+		if (usesRuntimeBoundaries || !isSiteStyleTransitionStyleGroup(styleGroup)) return blockElement;
 		return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [blockElement, /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
 			"data-block-transition": "",
@@ -132110,6 +132227,53 @@ function PageRenderer$1({ theme, page, usePlaceholders = false, dataContext, wra
 function isSiteStyleTransitionStyleGroup(value) {
 	return value?.startsWith("site-style-transition-") === true;
 }
+function boundaryMapForAdjacentBlockIds(boundaries) {
+	return new Map(boundaries.map((boundary) => [boundaryKey(boundary.previousBlockId, boundary.nextBlockId), boundary]));
+}
+function boundaryKey(previousBlockId, nextBlockId) {
+	return `${previousBlockId}\u0000${nextBlockId}`;
+}
+function boundaryBetweenBlocks(previousBlock, nextBlock, boundaryByAdjacentBlockIds) {
+	const previousBlockId = previousBlock?.id ?? null;
+	const nextBlockId = nextBlock?.id ?? null;
+	if (!previousBlockId || !nextBlockId) return null;
+	return boundaryByAdjacentBlockIds.get(boundaryKey(previousBlockId, nextBlockId)) ?? null;
+}
+function renderBoundaryAfterBlock(input) {
+	const previousBlockId = input.block.id;
+	const nextBlockId = input.nextBlock?.id ?? null;
+	if (!previousBlockId || !nextBlockId) return null;
+	const boundary = input.boundaryByAdjacentBlockIds.get(boundaryKey(previousBlockId, nextBlockId));
+	if (!boundary) return null;
+	const rendered = /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-block-boundary": "",
+		"data-boundary-id": boundary.boundaryId,
+		"data-boundary-previous-block-id": boundary.previousBlockId,
+		"data-boundary-next-block-id": boundary.nextBlockId,
+		"data-style-group": boundary.styleGroup,
+		style: boundaryCssVarsStyle(boundary)
+	}, `${input.blockKey}:boundary`);
+	return input.wrapBoundary ? input.wrapBoundary(boundary, rendered) : rendered;
+}
+function boundaryCssVarsStyle(boundary) {
+	return {
+		"--site-style-transition-from": boundary.cssVars.from,
+		"--site-style-transition-to": boundary.cssVars.to
+	};
+}
+function boundaryReserveCssVarsStyle(input) {
+	const before = input.before ? boundaryReserveValueForTreatment(input.before) : null;
+	const after = input.after ? boundaryReserveValueForTreatment(input.after) : null;
+	if (!before && !after) return void 0;
+	return {
+		...before ? { "--site-style-boundary-before-reserve": before } : {},
+		...after ? { "--site-style-boundary-after-reserve": after } : {}
+	};
+}
+function boundaryReserveValueForTreatment(boundary) {
+	return boundary.metrics.reserveCss;
+}
 function transitionCssVarsStyle(content) {
 	const transitionStyles = isObjectRecord$1(content._transitionStyles) ? content._transitionStyles : null;
 	const cssVars = isObjectRecord$1(transitionStyles?.cssVars) ? transitionStyles.cssVars : null;
@@ -132121,6 +132285,14 @@ function transitionCssVarsStyle(content) {
 		...to ? { "--site-style-transition-to": to } : {}
 	};
 }
+function mergeStyleObjects(left, right) {
+	if (!left) return right;
+	if (!right) return left;
+	return {
+		...left,
+		...right
+	};
+}
 function pageBlockPosition(index, blockCount) {
 	if (blockCount <= 1) return "only";
 	if (index === 0) return "first";
@@ -134035,52 +134207,53 @@ const containerResponsiveThemeCss = `/*
 
   /* Semantic spacing tokens (replaces Tailwind maps in src/system/spacing.ts) */
   .rb-section-pad-none {
-    padding-top: 0;
-    padding-bottom: 0;
+    --rb-section-pad-y: 0rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
   .rb-section-pad-compact {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    --rb-section-pad-y: 1.5rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
   .rb-section-pad-cozy {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
+    --rb-section-pad-y: 2.5rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
   .rb-section-pad-medium {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
+    --rb-section-pad-y: 3rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
   .rb-section-pad-comfortable {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
+    --rb-section-pad-y: 4rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
   .rb-section-pad-spacious {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
+    --rb-section-pad-y: 5rem;
+    padding-top: var(--rb-section-pad-y);
+    padding-bottom: var(--rb-section-pad-y);
   }
 
   @container rb-site (min-width: 640px) {
 
     @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
       .rb-section-pad-compact {
-        padding-top: 2rem;
-        padding-bottom: 2rem;
+        --rb-section-pad-y: 2rem;
       }
       .rb-section-pad-cozy {
-        padding-top: 3.5rem;
-        padding-bottom: 3.5rem;
+        --rb-section-pad-y: 3.5rem;
       }
       .rb-section-pad-medium {
-        padding-top: 4rem;
-        padding-bottom: 4rem;
+        --rb-section-pad-y: 4rem;
       }
       .rb-section-pad-comfortable {
-        padding-top: 5rem;
-        padding-bottom: 5rem;
+        --rb-section-pad-y: 5rem;
       }
       .rb-section-pad-spacious {
-        padding-top: 7rem;
-        padding-bottom: 7rem;
+        --rb-section-pad-y: 7rem;
       }
     }
 
@@ -135470,30 +135643,122 @@ const containerResponsiveThemeCss = `/*
   :where(.theme-scope) .header-logo-text {
     font-size: 1.125rem; /* matches rb-text-lg */
     line-height: 1.75rem;
+    margin-inline: -0.18em;
+    padding-inline: 0.18em;
     transition: font-size 300ms var(--motion-ease, ease);
   }
 
-  /* Mobile: reduce site title size (~30%) to keep header compact */
+  /* Centered variant uses larger title */
+  :where(.theme-scope) .header-variant-centered .header-logo-text {
+    font-size: 1.25rem; /* matches rb-text-xl */
+    line-height: 1.75rem;
+  }
+
+  :where(.theme-scope) .header-logo-size-compact .header-logo-text {
+    font-size: 0.95rem;
+    line-height: 1.5rem;
+  }
+  :where(.theme-scope) .header-logo-size-standard .header-logo-text {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  :where(.theme-scope) .header-logo-size-generous .header-logo-text {
+    font-size: 1.35rem;
+    line-height: 1.9rem;
+  }
+  :where(.theme-scope) .header-logo-size-display .header-logo-text {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+
+  :where(.theme-scope)
+    .header-variant-centered
+    .header-logo-size-compact
+    .header-logo-text {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+  :where(.theme-scope)
+    .header-variant-centered
+    .header-logo-size-standard
+    .header-logo-text {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  :where(.theme-scope)
+    .header-variant-centered
+    .header-logo-size-generous
+    .header-logo-text {
+    font-size: 1.6rem;
+    line-height: 2rem;
+  }
+  :where(.theme-scope)
+    .header-variant-centered
+    .header-logo-size-display
+    .header-logo-text {
+    font-size: 2.1rem;
+    line-height: 2.5rem;
+  }
+
+  /* Mobile: reduce site title size to keep header compact */
   @container rb-site (max-width: 767px) {
 @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
-:where(.theme-scope) .header-logo-text {
+:where(.theme-scope) .header-logo-text,
+    :where(.theme-scope) .header-logo-size-standard .header-logo-text {
       font-size: 0.8rem;
       line-height: 1.25rem;
     }
 
-    :where(.theme-scope) .header-variant-centered .header-logo-text {
+    :where(.theme-scope) .header-logo-size-compact .header-logo-text {
+      font-size: 0.75rem;
+      line-height: 1.15rem;
+    }
+
+    :where(.theme-scope) .header-logo-size-generous .header-logo-text {
+      font-size: 1rem;
+      line-height: 1.4rem;
+    }
+
+    :where(.theme-scope) .header-logo-size-display .header-logo-text {
+      font-size: 1.25rem;
+      line-height: 1.65rem;
+    }
+
+    :where(.theme-scope) .header-variant-centered .header-logo-text,
+    :where(.theme-scope)
+      .header-variant-centered
+      .header-logo-size-standard
+      .header-logo-text {
       font-size: 0.875rem;
       line-height: 1.25rem;
     }
+
+    :where(.theme-scope)
+      .header-variant-centered
+      .header-logo-size-compact
+      .header-logo-text {
+      font-size: 0.8rem;
+      line-height: 1.2rem;
+    }
+
+    :where(.theme-scope)
+      .header-variant-centered
+      .header-logo-size-generous
+      .header-logo-text {
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+    }
+
+    :where(.theme-scope)
+      .header-variant-centered
+      .header-logo-size-display
+      .header-logo-text {
+      font-size: 1.35rem;
+      line-height: 1.75rem;
+    }
 }
 }
 
-  /* Centered variant uses larger title */
-  :where(.theme-scope) .header-variant-centered .header-logo-text {
-    font-size: 1.25rem; /* matches rb-text-xl */
-    line-height: 1.75rem;
-  }
-
   /* =================================================================
    Shrink on Scroll - Logo & Title
    ================================================================= */
@@ -143845,7 +144110,7 @@ function toPageHydrationBootstrapConfig(props) {
 		mediaAssets: props.mediaAssets
 	};
 }
-function PageContent({ page, theme, themeTokens: providedTokens, siteId, resolvedData, bookingOfferingPresets, routeMap, pagesByIdentifier, entriesByIdentifier, wrapBlock, registry, usePlaceholders = false, blockOverrides, sdkConfig, customBlocks, supabaseUrl, mediaAssets, apiBaseUrl, portalToken, previewToken, dataContext, themeRuntime = defaultPageThemeRuntime }) {
+function PageContent({ page, runtimeBoundaries, theme, themeTokens: providedTokens, siteId, resolvedData, bookingOfferingPresets, routeMap, pagesByIdentifier, entriesByIdentifier, wrapBlock, registry, usePlaceholders = false, blockOverrides, sdkConfig, customBlocks, supabaseUrl, mediaAssets, apiBaseUrl, portalToken, previewToken, dataContext, themeRuntime = defaultPageThemeRuntime }) {
 	const baseTokens = providedTokens ?? buildThemeRuntime(theme).tokens;
 	return renderWithSdkThemeRuntime({
 		themeRuntime,
@@ -143853,6 +144118,7 @@ function PageContent({ page, theme, themeTokens: providedTokens, siteId, resolve
 		children: /* @__PURE__ */ jsx(PageRenderer, {
 			theme,
 			page,
+			runtimeBoundaries,
 			themeTokens: sdkConfig?.theme?.palette ? {
 				...baseTokens,
 				palette: {
@@ -147120,6 +147386,7 @@ async function loadPageWithDeps(deps, params) {
 	}
 	return {
 		page: pageOutline,
+		runtimeBoundaries: pageData.runtimeBoundaries,
 		theme: support.theme,
 		sdkConfig: support.sdkConfig,
 		siteId,
@@ -149847,6 +150114,7 @@ async function loadContentFromContentResponseWithDeps(deps, params) {
 			ogImageId: pageRecord.ogImageId ?? null
 		},
 		page: pageOutline,
+		runtimeBoundaries: pageData.runtimeBoundaries,
 		theme: support.theme,
 		siteId,
 		...support.customBlocks ? { customBlocks: support.customBlocks } : {},