camox 0.46.0 → 0.48.0

package/dist/features/canvas/canvasCamera.js

@@ -24,16 +24,31 @@ const MAX_CANVAS_ZOOM = 2;
 */
 const MIN_CANVAS_ZOOM = .1;
 /** Log-scale zoom per pixel of Ctrl/⌘ + wheel, including trackpad pinches. */
-const CANVAS_WHEEL_ZOOM_RATE = .01056;
+const CANVAS_WHEEL_ZOOM_RATE = .0139392;
 /** Relative (log-scale) bands make the detent feel the same at every page width. */
-const ZOOM_SNAP_CAPTURE = .14;
-const ZOOM_SNAP_RELEASE = .18;
+const ZOOM_SNAP_CAPTURE = .168;
+const ZOOM_SNAP_RELEASE = .216;
 /** Fractions of viewport width: acquire near center, then hold a wider detent. */
-const PAN_SNAP_CAPTURE = .12;
-const PAN_SNAP_RELEASE = .18;
+const PAN_SNAP_CAPTURE = .144;
+const PAN_SNAP_RELEASE = .216;
 function isCanvasPageScale(scale, pageScale) {
 	return pageScale !== void 0 && Math.abs(Math.log(scale / pageScale)) < 1e-8;
 }
+/** Signed screen distance from a target's center to the viewport's center. */
+function canvasTargetOffset(camera, viewport, target) {
+	return camera.x + (target.left + target.width / 2) * camera.scale - viewport.width / 2;
+}
+/**
+* Near a target's page fit in both zoom and position, so a pan snaps onto a
+* page without its zoom matching exactly. A held snap releases from wider bands
+* than it captures.
+*/
+function isInCanvasSnapWindow(camera, viewport, target, held) {
+	const fit = fitCanvasPage(viewport, target);
+	const zoomBand = held ? ZOOM_SNAP_RELEASE : ZOOM_SNAP_CAPTURE;
+	const panBand = viewport.width * (held ? PAN_SNAP_RELEASE : PAN_SNAP_CAPTURE);
+	return Math.abs(Math.log(camera.scale / fit.scale)) <= zoomBand && Math.abs(canvasTargetOffset(camera, viewport, target)) <= panBand;
+}
 /** Snapped to a target: at its page fit, centered on it. */
 function isCanvasCameraSnapped(camera, viewport, target) {
 	const fit = fitCanvasPage(viewport, target);
@@ -226,4 +241,4 @@ function canvasWheelDelta(delta, mode, viewportSize) {
 }
 
 //#endregion
-export { CANVAS_OVERSCROLL, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };
+export { CANVAS_OVERSCROLL, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasTargetOffset, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };

package/dist/features/canvas/sidebar/CanvasSidebarFrame.js

@@ -24,7 +24,7 @@ function CanvasSidebarFrame(t0) {
 	}
 	let t1;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { width: 250 };
+		t1 = { width: 265 };
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;

package/dist/features/canvas/useCanvasCamera.js

@@ -2,7 +2,7 @@ import { canvasStore } from "./canvasStore.js";
 import { ViewportContinuityContext, captureViewportAnchor, resolveViewportAnchor } from "../preview/viewportContinuity.js";
 import { canvasPageIframe } from "../preview/previewPageFrame.js";
 import { canvasBlockOverlap } from "./canvasFrameDocument.js";
-import { CANVAS_WHEEL_ZOOM_RATE, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
+import { CANVAS_WHEEL_ZOOM_RATE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
 import { revealScrollDelta } from "../preview/selectionReveal.js";
 import { createCanvasFlight, createCanvasPan } from "./canvasFlight.js";
 import * as React from "react";
@@ -233,16 +233,17 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 			const candidate = findCanvasSnapTarget(intended, viewportSize, targets());
 			const fit = candidate && fitCanvasPage(viewportSize, candidate);
-			if (!candidate || !fit || !isCanvasPageScale(base.scale, fit.scale)) return intended;
-			const held = Math.abs(base.x - fit.x) < 1e-8;
-			const band = viewportSize.width * (held ? PAN_SNAP_RELEASE : PAN_SNAP_CAPTURE);
-			if (Math.abs(intended.x - fit.x) > band) return intended;
+			if (!candidate || !fit || fit.scale < minimumScale) return intended;
+			const held = isCanvasCameraSnapped(base, viewportSize, candidate);
+			if (!isInCanvasSnapWindow(intended, viewportSize, candidate, held)) return intended;
 			if (selection !== candidate.key) rowRef.current?.onSnap?.();
 			select(candidate.key);
-			return {
-				...intended,
-				x: fit.x
-			};
+			gesture.intendedX += (candidate.left + candidate.width / 2) * (intended.scale - fit.scale);
+			return constrain({
+				x: fit.x,
+				y: rescaleY(intended, fit.scale),
+				scale: fit.scale
+			});
 		};
 		const endZoom = () => {
 			ownerWindow.clearTimeout(zoomEnd);
@@ -264,6 +265,10 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			else delete element.dataset.canvasPan;
 		};
 		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const isOverview = (view) => {
+			const overview = canvasOverview(viewportSize, contentSize);
+			return Math.abs(view.scale - overview.scale) < 1e-8 && Math.abs(view.x - overview.x) < .5 && Math.abs(view.y - overview.y) < .5;
+		};
 		const remember = () => {
 			if (restoredCamera || fittingInitialPage || !viewportSize.width || !viewportSize.height) return;
 			canvasStore.send({
@@ -271,7 +276,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				workspaceKey,
 				view: {
 					camera,
-					fitted: Math.abs(camera.scale - minimumScale) < 1e-8
+					fitted: isOverview(camera)
 				}
 			});
 		};
@@ -516,7 +521,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 			const nextContent = measureContent();
 			if (nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
-			const wasFitted = Math.abs(target.scale - minimumScale) < 1e-8;
+			const wasFitted = isOverview(target);
 			gesture = void 0;
 			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
 			updateGeometry(nextViewport, nextContent);

package/dist/features/content/ContentCollection.js

@@ -177,9 +177,15 @@ const ContentCollection = (t0) => {
 						itemId: record.id
 					}),
 					className: "focus-visible:bg-accent flex min-w-0 flex-1 items-center gap-2 px-4 py-3 text-sm",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate",
-						children: record.label || "Untitled item"
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-col items-start text-left",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "max-w-full truncate",
+							children: record.title || "Untitled item"
+						}), record.description && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground max-w-full truncate text-xs",
+							children: record.description
+						})]
 					}), record.duplicatePageValue && /* @__PURE__ */ jsx("span", {
 						className: "text-destructive shrink-0 text-xs",
 						title: "Another item's page has the same URL. Change one of them before publishing.",
@@ -189,7 +195,7 @@ const ContentCollection = (t0) => {
 					projectUuid,
 					collectionId: collection.collectionId,
 					id: record.id,
-					label: record.label,
+					label: record.title,
 					compact: true
 				})]
 			}, record.id)), /* @__PURE__ */ jsx("li", {
@@ -244,9 +250,9 @@ const ContentCollection = (t0) => {
 	return t14;
 };
 const fieldLabel = (name, schema) => schema.title ?? name.replace(/([A-Z])/g, " $1").replace(/^./, (letter) => letter.toUpperCase());
-function CollectionItemForm({ contentSchema, label, projectUuid, collectionId, record, initialContent, onSaved }) {
+function CollectionItemForm({ contentSchema, toTitle, projectUuid, collectionId, record, initialContent, onSaved }) {
 	const studioCache = useStudioCache();
-	const fields = collectionFormFields(contentSchema, label);
+	const fields = collectionFormFields(contentSchema, toTitle);
 	const [savedRecord, setSavedRecord] = useState(record);
 	const [error, setError] = useState(null);
 	const create = useMutation(collectionMutations.create());
@@ -502,7 +508,7 @@ const ContentCollectionItemEditor = (t0) => {
 	if ($[20] !== collectionId || $[21] !== definition || $[22] !== initialContent || $[23] !== itemId || $[24] !== onSaved || $[25] !== projectUuid || $[26] !== recordQuery) {
 		t9 = definition && (!itemId || recordQuery.data) && /* @__PURE__ */ jsx(CollectionItemForm, {
 			contentSchema: definition.contentSchema,
-			label: definition.label,
+			toTitle: definition.toTitle,
 			projectUuid,
 			collectionId,
 			record: itemId ? recordQuery.data : void 0,

package/dist/features/content/collection-form.js

@@ -1,8 +1,12 @@
 import { isLexicalState, lexicalStateToPlainText } from "../../core/lib/lexicalState.js";
+import { titleField } from "../../core/recordItem.js";
 
 //#region src/features/content/collection-form.ts
-function collectionFormFields(contentSchema, label) {
-	return Object.entries(contentSchema.properties).sort(([a], [b]) => Number(b === label) - Number(a === label));
+/** The form's fields, the one the record's title starts with first. */
+function collectionFormFields(contentSchema, toTitle) {
+	const schema = contentSchema;
+	const first = titleField(toTitle);
+	return Object.entries(schema.properties).sort(([a], [b]) => Number(b === first) - Number(a === first));
 }
 function collectionFormDefaults(fields, content = {}) {
 	return Object.fromEntries(fields.map(([name, schema]) => {

package/dist/features/content/components/MissingFromLocale.js

@@ -144,7 +144,7 @@ function missingGroups(missing, collections) {
 				entity: "record",
 				id: record.id,
 				collectionId: record.collectionId,
-				name: record.label || "Untitled item"
+				name: record.title || "Untitled item"
 			}))
 		});
 	}

package/dist/features/og/pageImage.js

@@ -0,0 +1,89 @@
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/og/pageImage.tsx
+/** The size every page image renders at, which the page head states. */
+const PAGE_IMAGE_SIZE = {
+	width: 1200,
+	height: 630
+};
+/**
+* A page's image, chosen in order: the editor's custom image, else `/og` for the page, which
+* renders its layout's `toImage` or Camox's default image. `/og` names the page by its path,
+* with its locale's prefix.
+*/
+function pageImageUrl({ origin, path, customImageUrl }) {
+	return customImageUrl || `${origin}/og?${new URLSearchParams({ path }).toString()}`;
+}
+/** Camox's default image, for a page whose layout has no `toImage`: its title and project. */
+function DefaultPageImage(t0) {
+	const $ = c(9);
+	const { page, project } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+			width: "100%",
+			height: "100%",
+			backgroundColor: "#09090b",
+			padding: "60px 80px"
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== project.name) {
+		t2 = project.name && /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: 24,
+				color: "#a1a1aa",
+				marginBottom: 24,
+				textTransform: "uppercase",
+				letterSpacing: "0.1em"
+			},
+			children: project.name
+		});
+		$[1] = project.name;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			fontSize: 64,
+			fontWeight: 700,
+			color: "#fafafa",
+			lineHeight: 1.2
+		};
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== page.title) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			style: t3,
+			children: page.title
+		});
+		$[4] = page.title;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t2 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			style: t1,
+			children: [t2, t4]
+		});
+		$[6] = t2;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+/** Renders a page image as a PNG response. Server only. */
+async function renderPageImage(element) {
+	if (import.meta.env?.SSR === false) throw new Error("OG images can only be rendered on the server.");
+	const { ImageResponse } = await import("camox/_internal/imageResponse");
+	return new ImageResponse(element, PAGE_IMAGE_SIZE);
+}
+
+//#endregion
+export { DefaultPageImage, PAGE_IMAGE_SIZE, pageImageUrl, renderPageImage };

package/dist/features/page/CuratedPageContent.js

@@ -1,8 +1,10 @@
 import { useProjectUuid } from "../../lib/auth.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
 import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
 import { reads, useRead } from "../../lib/studio-reads.js";
 import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
+import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { useLocalePath } from "../../lib/view-locale.js";
 import { SharedLayoutContent } from "./SharedLayoutContent.js";
 import { c } from "react/compiler-runtime";
@@ -84,7 +86,7 @@ function PageBlock(t0) {
 }
 /** A curated page as visitors see it, without editing. */
 function CuratedPageContent() {
-	const $ = c(19);
+	const $ = c(23);
 	const pathname = useLocalePath();
 	const projectUuid = useProjectUuid();
 	const camoxApp = useCamoxApp();
@@ -108,49 +110,60 @@ function CuratedPageContent() {
 		$[5] = t1;
 	} else t1 = $[5];
 	const layout = t1;
+	const { locale } = useViewLocale();
 	let t2;
-	if ($[6] !== pageBlocks) {
-		t2 = pageBlocks.map(_temp);
-		$[6] = pageBlocks;
-		$[7] = t2;
-	} else t2 = $[7];
-	const pageBlocksContent = t2;
+	if ($[6] !== locale || $[7] !== pageData) {
+		t2 = curatedLayoutContext(pageData, locale);
+		$[6] = locale;
+		$[7] = pageData;
+		$[8] = t2;
+	} else t2 = $[8];
+	const context = t2;
+	let t3;
+	if ($[9] !== pageBlocks) {
+		t3 = pageBlocks.map(_temp);
+		$[9] = pageBlocks;
+		$[10] = t3;
+	} else t3 = $[10];
+	const pageBlocksContent = t3;
 	if (!layout) {
-		let t3;
-		if ($[8] !== pageBlocksContent) {
-			t3 = /* @__PURE__ */ jsx("main", {
+		let t4;
+		if ($[11] !== pageBlocksContent) {
+			t4 = /* @__PURE__ */ jsx("main", {
 				className: "flex min-h-screen flex-col",
 				children: pageBlocksContent
 			});
-			$[8] = pageBlocksContent;
-			$[9] = t3;
-		} else t3 = $[9];
-		return t3;
+			$[11] = pageBlocksContent;
+			$[12] = t4;
+		} else t4 = $[12];
+		return t4;
 	}
-	let t3;
-	if ($[10] !== afterBlocks || $[11] !== beforeBlocks) {
-		t3 = [...beforeBlocks, ...afterBlocks];
-		$[10] = afterBlocks;
-		$[11] = beforeBlocks;
-		$[12] = t3;
-	} else t3 = $[12];
 	let t4;
-	if ($[13] !== layout || $[14] !== layoutFiles || $[15] !== layoutItems || $[16] !== pageBlocksContent || $[17] !== t3) {
-		t4 = /* @__PURE__ */ jsx(SharedLayoutContent, {
+	if ($[13] !== afterBlocks || $[14] !== beforeBlocks) {
+		t4 = [...beforeBlocks, ...afterBlocks];
+		$[13] = afterBlocks;
+		$[14] = beforeBlocks;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== context || $[17] !== layout || $[18] !== layoutFiles || $[19] !== layoutItems || $[20] !== pageBlocksContent || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx(SharedLayoutContent, {
 			layout,
-			blocks: t3,
+			context,
+			blocks: t4,
 			files: layoutFiles,
 			repeatableItems: layoutItems,
 			children: pageBlocksContent
 		});
-		$[13] = layout;
-		$[14] = layoutFiles;
-		$[15] = layoutItems;
-		$[16] = pageBlocksContent;
-		$[17] = t3;
-		$[18] = t4;
-	} else t4 = $[18];
-	return t4;
+		$[16] = context;
+		$[17] = layout;
+		$[18] = layoutFiles;
+		$[19] = layoutItems;
+		$[20] = pageBlocksContent;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
 }
 function _temp(block) {
 	return /* @__PURE__ */ jsx(BlockErrorBoundary, {

package/dist/features/page/DerivedPageContent.js

@@ -1,4 +1,7 @@
+import { useViewLocale } from "../../lib/view-locale-context.js";
 import { usePageBlocks } from "../../lib/normalized-data.js";
+import { asCollectionItem, recordPageValues } from "../../core/recordItem.js";
+import { buildLayoutContext } from "../../core/layoutContext.js";
 import { SharedLayoutContent } from "./SharedLayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -6,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/features/page/DerivedPageContent.tsx
 const EMPTY_PAGE = { blockIds: [] };
 function DerivedPageContent(t0) {
-	const $ = c(14);
+	const $ = c(18);
 	const { camoxApp, derived } = t0;
 	let t1;
 	if ($[0] !== derived.layout) {
@@ -18,38 +21,62 @@ function DerivedPageContent(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const { beforeBlocks, afterBlocks, layoutFiles, layoutItems } = usePageBlocks(t1);
+	const { locale } = useViewLocale();
+	let layout;
+	let result;
 	let t2;
-	if ($[2] !== camoxApp || $[3] !== derived.layoutId) {
-		t2 = camoxApp.getLayoutById(derived.layoutId);
+	if ($[2] !== camoxApp || $[3] !== derived || $[4] !== locale) {
+		layout = camoxApp.getLayoutById(derived.layoutId);
+		if (!layout) throw new Error(`Unknown derived layout: ${derived.layoutId}`);
+		const { page, result: t3 } = derived;
+		result = t3;
+		const record = asCollectionItem(result);
+		const collection = record && camoxApp.getCollectionById(record.collectionId);
+		t2 = buildLayoutContext(layout._internal, {
+			path: page?.path ?? "",
+			locale: locale.tag,
+			projectName: page?.projectName ?? "",
+			data: result?.data,
+			params: page?.params,
+			record: record && collection ? recordPageValues(collection, record) : void 0
+		});
 		$[2] = camoxApp;
-		$[3] = derived.layoutId;
-		$[4] = t2;
-	} else t2 = $[4];
-	const layout = t2;
-	if (!layout) throw new Error(`Unknown derived layout: ${derived.layoutId}`);
+		$[3] = derived;
+		$[4] = locale;
+		$[5] = layout;
+		$[6] = result;
+		$[7] = t2;
+	} else {
+		layout = $[5];
+		result = $[6];
+		t2 = $[7];
+	}
+	const context = t2;
 	let t3;
-	if ($[5] !== afterBlocks || $[6] !== beforeBlocks) {
+	if ($[8] !== afterBlocks || $[9] !== beforeBlocks) {
 		t3 = [...beforeBlocks, ...afterBlocks];
-		$[5] = afterBlocks;
-		$[6] = beforeBlocks;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[8] = afterBlocks;
+		$[9] = beforeBlocks;
+		$[10] = t3;
+	} else t3 = $[10];
 	let t4;
-	if ($[8] !== derived.result || $[9] !== layout || $[10] !== layoutFiles || $[11] !== layoutItems || $[12] !== t3) {
+	if ($[11] !== context || $[12] !== layout || $[13] !== layoutFiles || $[14] !== layoutItems || $[15] !== result || $[16] !== t3) {
 		t4 = /* @__PURE__ */ jsx(SharedLayoutContent, {
 			layout,
-			result: derived.result,
+			context,
+			result,
 			blocks: t3,
 			files: layoutFiles,
 			repeatableItems: layoutItems
 		});
-		$[8] = derived.result;
-		$[9] = layout;
-		$[10] = layoutFiles;
-		$[11] = layoutItems;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
+		$[11] = context;
+		$[12] = layout;
+		$[13] = layoutFiles;
+		$[14] = layoutItems;
+		$[15] = result;
+		$[16] = t3;
+		$[17] = t4;
+	} else t4 = $[17];
 	return t4;
 }
 

package/dist/features/page/SharedLayoutContent.js

@@ -6,8 +6,8 @@ import { jsx } from "react/jsx-runtime";
 //#region src/features/page/SharedLayoutContent.tsx
 /** Shared before/after rendering for both curated and data-derived pages. */
 function SharedLayoutContent(t0) {
-	const $ = c(15);
-	const { layout, blocks, files, repeatableItems, result, children } = t0;
+	const $ = c(16);
+	const { layout, context, blocks, files, repeatableItems, result, children } = t0;
 	let result_0;
 	if ($[0] !== blocks) {
 		result_0 = {};
@@ -22,41 +22,45 @@ function SharedLayoutContent(t0) {
 		$[1] = result_0;
 	} else result_0 = $[1];
 	const layoutBlocks = result_0;
-	const Component = layout._internal.component;
+	const ToReact = layout._internal.toReact;
 	let t1;
-	if ($[2] !== Component || $[3] !== children) {
-		t1 = /* @__PURE__ */ jsx(Component, { children });
-		$[2] = Component;
+	if ($[2] !== ToReact || $[3] !== children || $[4] !== context) {
+		t1 = /* @__PURE__ */ jsx(ToReact, {
+			...context,
+			children
+		});
+		$[2] = ToReact;
 		$[3] = children;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[4] = context;
+		$[5] = t1;
+	} else t1 = $[5];
 	let t2;
-	if ($[5] !== layout._internal.Provider || $[6] !== layoutBlocks || $[7] !== result || $[8] !== t1) {
+	if ($[6] !== layout._internal.Provider || $[7] !== layoutBlocks || $[8] !== result || $[9] !== t1) {
 		t2 = /* @__PURE__ */ jsx(layout._internal.Provider, {
 			layoutBlocks,
 			result,
 			children: t1
 		});
-		$[5] = layout._internal.Provider;
-		$[6] = layoutBlocks;
-		$[7] = result;
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
+		$[6] = layout._internal.Provider;
+		$[7] = layoutBlocks;
+		$[8] = result;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[10] !== blocks || $[11] !== files || $[12] !== repeatableItems || $[13] !== t2) {
+	if ($[11] !== blocks || $[12] !== files || $[13] !== repeatableItems || $[14] !== t2) {
 		t3 = /* @__PURE__ */ jsx(NormalizedDataProvider, {
 			files,
 			repeatableItems,
 			blocks,
 			children: t2
 		});
-		$[10] = blocks;
-		$[11] = files;
-		$[12] = repeatableItems;
-		$[13] = t2;
-		$[14] = t3;
-	} else t3 = $[14];
+		$[11] = blocks;
+		$[12] = files;
+		$[13] = repeatableItems;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
 	return t3;
 }