@riverbankcms/sdk 0.101.0 → 0.103.0

package/dist/server/rendering/server.mjs

@@ -11221,6 +11221,7 @@ const themeV2RuntimeStyleFieldNames = [
 	"_sectionStyles",
 	"_containerStyles",
 	"_cardStyles",
+	"_transitionStyles",
 	"styleGroup"
 ];
 const themeV2BlockSpecificRawStyleFieldNames = [
@@ -11969,6 +11970,8 @@ const headerSchema = z$1.object({
 	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(),
@@ -13574,6 +13577,31 @@ function uniqueStrings(values) {
 }
 //#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)`
+	};
+}
+const 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")
+};
+function boundaryRuntimeMetricsForTransition(transition) {
+	return sectionBoundaryRuntimeMetricsByTransition[transition];
+}
 const noneBoundaryOption = {
 	id: asBoundaryOptionId("break:none"),
 	label: "None",
@@ -13735,12 +13763,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);
 }
 //#endregion
@@ -14261,7 +14289,7 @@ const overlayLogoAccommodations = [
 * 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: {
@@ -14334,12 +14362,12 @@ const headerStyleCatalog = defineExactCatalog()([
 	},
 	{
 		id: asHeaderStyleId("fine-line"),
-		label: "Fine Line",
-		description: "Light surface with a crisp lower rule and underline hover.",
+		label: "Seamless",
+		description: "Borderless surface with underline hover for a quieter page transition.",
 		supportedLayoutIds: supportedLayouts(["classic", "centered"]),
 		navInteraction: "underline-grow",
-		surface: "bordered",
-		defaultDepth: "line",
+		surface: "neutral",
+		defaultDepth: "none",
 		navTypography: "plain",
 		moods: [
 			"calm",
@@ -17950,6 +17978,15 @@ function toSiteChromeBackgroundColorTokens(tokenNames) {
 	});
 }
 //#endregion
+//#region ../theme-core/src/site-styles/siteChromeNavPreferences.ts
+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 }
+	};
+}
+//#endregion
 //#region ../theme-core/src/site-styles/tokenRecipes.ts
 const themeTokenRecipeOptions = {
 	palette: [
@@ -33869,6 +33906,7 @@ const eventListingBlockDefinition = {
 					} },
 					seeAllUrl: { $bind: {
 						from: "content.seeAllUrl",
+						fallback: "",
 						transforms: [{ id: "links.resolve" }]
 					} },
 					loadMoreText: { $bind: {
@@ -34205,6 +34243,7 @@ const eventCalendarLayout = [styledSection({
 			} },
 			seeAllUrl: { $bind: {
 				from: "content.seeAllUrl",
+				fallback: "",
 				transforms: [{ id: "links.resolve" }]
 			} },
 			loadMoreText: { $bind: {
@@ -41664,15 +41703,15 @@ function Grid({ as: Comp = "div", cols = {
 }
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/layout.tsx
-const SectionNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, allowOverflow, ...props }) => /* @__PURE__ */ jsx(Section, {
+const SectionNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, allowOverflow, ...props }) => /* @__PURE__ */ jsx(Section, {
 	...props,
 	allowOverflow
 });
-const StackNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Stack, { ...props });
-const InlineNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Inline, { ...props });
-const GridNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Grid, { ...props });
-const DivNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx("div", { ...props });
-const FigureNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx("figure", { ...props });
+const StackNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Stack, { ...props });
+const InlineNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Inline, { ...props });
+const GridNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx(Grid, { ...props });
+const DivNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx("div", { ...props });
+const FigureNode = ({ blockId: _blockId, blockKind: _blockKind, blockContent: _blockContent, fragmentRegistry: _fragmentRegistry, previewAuthoring: _previewAuthoring, pathBase: _pathBase, ...props }) => /* @__PURE__ */ jsx("figure", { ...props });
 //#endregion
 //#region ../path-utils/src/index.ts
 const PATH_SEPARATOR_REGEX$1 = /\./g;
@@ -46920,6 +46959,7 @@ function applyTransformsAndFallback(value, binding, context) {
 		viewModel: context.viewModel
 	}, transforms);
 	if (binding.transforms && binding.transforms.length > 0 && transformed === null) {
+		if (binding.fallback !== void 0) return binding.fallback;
 		if (process.env.NODE_ENV === "development") console.warn("[block-system] Transform returned null for binding", {
 			bindingFrom: binding.from,
 			transforms: binding.transforms?.map((t) => t.id)
@@ -48848,7 +48888,7 @@ function generateHeaderRootStyles(header, themeId, tokens, _theme) {
 		}
 	}
 	if (header.positioning === "sticky" || header.positioning === "fixed") {
-		const shadowVar = getComponentShadowVar(header.shadow?.elevation ?? "sm");
+		const shadowVar = getComponentShadowVar(header.shadow?.elevation ?? "none");
 		if (shadowVar) rules.push(`box-shadow: ${shadowVar};`);
 	}
 	const baseBlock = `\n${selector} {\n  ${rules.join("\n  ")}\n}\n`;
@@ -48931,15 +48971,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";
@@ -49011,7 +49055,7 @@ function generateNavLinkStyles(header, themeId, tokens, theme, contrastTreatment
 		themeId,
 		tokens,
 		theme,
-		style: mergedStyle,
+		style: mergeHeaderNavTypographyPreference(mergedStyle, navPreferences),
 		className: "header-nav-link"
 	});
 }
@@ -49402,6 +49446,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;
@@ -49409,23 +49456,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][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;
+  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-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-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;
-  bottom: -2px;
+  top: 0;
+  transform: translateY(-50%);
   z-index: 1;
-  height: calc(6rem + 2px);
+  height: var(--site-style-boundary-height);
   pointer-events: none;
 }
 
@@ -49463,7 +49535,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,
@@ -49479,30 +49551,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;
@@ -49512,28 +49591,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)}`;
 }
@@ -51656,13 +51746,15 @@ function sourceLabel(source) {
 }
 //#endregion
 //#region ../blocks/src/PageRenderer.tsx
-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"),
@@ -51674,6 +51766,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;
@@ -51696,10 +51799,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,
@@ -51709,21 +51820,92 @@ 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: 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": "",
 			"data-block-transition-for": block.id ?? blockKey,
-			"data-style-group": styleGroup
+			"data-style-group": styleGroup,
+			style: transitionStyle
 		})] }, blockKey);
 	}) });
 }
 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(content._transitionStyles) ? content._transitionStyles : null;
+	const cssVars = isObjectRecord(transitionStyles?.cssVars) ? transitionStyles.cssVars : null;
+	const from = typeof cssVars?.from === "string" ? cssVars.from : null;
+	const to = typeof cssVars?.to === "string" ? cssVars.to : null;
+	if (!from && !to) return void 0;
+	return {
+		...from ? { "--site-style-transition-from": from } : {},
+		...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";
@@ -53672,52 +53854,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;
       }
     }
 
@@ -55107,30 +55290,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
    ================================================================= */
@@ -63427,7 +63702,7 @@ function renderWithSdkThemeRuntime({ themeRuntime, theme, children }) {
 }
 //#endregion
 //#region src/rendering/components/pageShared.tsx
-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,
@@ -63435,6 +63710,7 @@ function PageContent({ page, theme, themeTokens: providedTokens, siteId, resolve
 		children: /* @__PURE__ */ jsx(PageRenderer, {
 			theme,
 			page,
+			runtimeBoundaries,
 			themeTokens: sdkConfig?.theme?.palette ? {
 				...baseTokens,
 				palette: {
@@ -64913,7 +65189,7 @@ z$1.object({ acceptExtraSiteCharge: z$1.boolean().optional() });
 //#region ../surfaces/src/index.ts
 const SURFACE_IDS = ["core", "macadamia"];
 const DEFAULT_SURFACE_ID = "core";
-SURFACE_IDS.filter((surfaceId) => surfaceId !== DEFAULT_SURFACE_ID);
+[...SURFACE_IDS.filter((surfaceId) => surfaceId !== DEFAULT_SURFACE_ID)];
 const CANONICAL_REFUND_PLANNER_ERROR_CODES = [
 	...[
 		"already_refunded",
@@ -64962,6 +65238,7 @@ const VERTICAL_IDS = [
 	"training_provider",
 	"retreat_centre",
 	"music_school",
+	"voice_singing",
 	"performing_arts_school",
 	"community_wellbeing",
 	"venue_event_space"
@@ -65014,6 +65291,11 @@ const VERTICAL_BOOKING_PRESETS = [
 	preset("music_school.terms", "music_school", "course", "Term", "Terms", "Multi-week term blocks or fixed-date group courses."),
 	preset("music_school.workshops", "music_school", "workshop", "Workshop", "Workshops", "One-off workshops, masterclasses, or intensives."),
 	preset("music_school.performances", "music_school", "performance", "Performance", "Performances", "Concerts, recitals, showcases, or ticketed performances."),
+	preset("voice_singing.lessons", "voice_singing", "appointment", "Voice session", "Voice sessions", "One-to-one singing lessons, voice coaching, or private practice sessions."),
+	preset("voice_singing.classes", "voice_singing", "class", "Ongoing weekly session", "Ongoing weekly sessions", "Regular choirs, voice circles, community singing, or group practice."),
+	preset("voice_singing.terms", "voice_singing", "course", "Singing term", "Singing terms", "Multi-week choir terms, voice courses, or fixed-date group programmes."),
+	preset("voice_singing.workshops", "voice_singing", "workshop", "Workshop", "Workshops", "One-off singing workshops, voice journeys, or devotional singing sessions."),
+	preset("voice_singing.performances", "voice_singing", "performance", "Performance", "Performances", "Choir concerts, sharing events, recitals, or community performances."),
 	preset("performing_arts_school.classes", "performing_arts_school", "class", "Class", "Classes", "Regular group classes, rehearsals, or weekly sessions."),
 	preset("performing_arts_school.terms", "performing_arts_school", "course", "Term", "Terms", "Multi-week term blocks or fixed-date course groups."),
 	preset("performing_arts_school.workshops", "performing_arts_school", "workshop", "Workshop", "Workshops", "One-off workshops, masterclasses, or intensives."),