camox 0.47.0 → 0.51.0

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/content/ContentAssets.js

@@ -1,6 +1,5 @@
 import { useProjectUuid } from "../../lib/auth.js";
 import { reads, useReadQuery } from "../../lib/studio-reads.js";
-import { checkIfInputFocused } from "../../lib/utils.js";
 import { UploadDropZone } from "./components/UploadDropZone.js";
 import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../hooks/use-file-upload.js";
@@ -10,12 +9,13 @@ import { AssetCard } from "./components/AssetCard.js";
 import { useMarqueeSelection } from "../../hooks/use-marquee-selection.js";
 import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
 import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { PanelContent } from "@camox/ui/panel";
 import { ImageIcon, UploadIcon } from "lucide-react";
+import { useHotkey } from "@tanstack/react-hotkeys";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/content/ContentAssets.tsx
@@ -74,31 +74,27 @@ const ContentAssets = () => {
 		$[10] = t8;
 	} else t8 = $[10];
 	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
-	let t10;
 	let t9;
-	if ($[11] !== lightboxFileId) {
-		t9 = () => {
-			const handleKeyDown = (event) => {
-				if (event.key !== "Escape") return;
-				if (lightboxFileId !== null) return;
-				if (checkIfInputFocused()) return;
-				setSelectedIds(_temp);
-			};
-			document.addEventListener("keydown", handleKeyDown);
-			return () => document.removeEventListener("keydown", handleKeyDown);
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => setSelectedIds(_temp);
+		$[11] = t9;
+	} else t9 = $[11];
+	const t10 = lightboxFileId === null;
+	let t11;
+	if ($[12] !== t10) {
+		t11 = {
+			enabled: t10,
+			ignoreInputs: true,
+			preventDefault: false,
+			stopPropagation: false
 		};
-		t10 = [lightboxFileId];
-		$[11] = lightboxFileId;
 		$[12] = t10;
-		$[13] = t9;
-	} else {
-		t10 = $[12];
-		t9 = $[13];
-	}
-	useEffect(t9, t10);
-	let t11;
+		$[13] = t11;
+	} else t11 = $[13];
+	useHotkey("Escape", t9, t11);
+	let t12;
 	if ($[14] !== didDragRef) {
-		t11 = () => {
+		t12 = () => {
 			if (didDragRef.current) {
 				didDragRef.current = false;
 				return;
@@ -106,20 +102,20 @@ const ContentAssets = () => {
 			setSelectedIds(/* @__PURE__ */ new Set());
 		};
 		$[14] = didDragRef;
-		$[15] = t11;
-	} else t11 = $[15];
-	let t12;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
 	if ($[16] !== files) {
-		t12 = files === void 0 && /* @__PURE__ */ jsx("div", {
+		t13 = files === void 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: Array.from({ length: 12 }, _temp2)
 		});
 		$[16] = files;
-		$[17] = t12;
-	} else t12 = $[17];
-	let t13;
+		$[17] = t13;
+	} else t13 = $[17];
+	let t14;
 	if ($[18] !== files?.length || $[19] !== uploadFiles) {
-		t13 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
+		t14 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex max-w-sm flex-col items-center gap-2 text-center",
@@ -150,9 +146,9 @@ const ContentAssets = () => {
 								type: "file",
 								className: "sr-only",
 								multiple: true,
-								onChange: (event_0) => {
-									if (event_0.target.files) uploadFiles(event_0.target.files);
-									event_0.target.value = "";
+								onChange: (event) => {
+									if (event.target.files) uploadFiles(event.target.files);
+									event.target.value = "";
 								}
 							})
 						]
@@ -162,11 +158,11 @@ const ContentAssets = () => {
 		});
 		$[18] = files?.length;
 		$[19] = uploadFiles;
-		$[20] = t13;
-	} else t13 = $[20];
-	let t14;
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
 	if ($[21] !== files || $[22] !== selectedIds) {
-		t14 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+		t15 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
 				file,
@@ -184,11 +180,11 @@ const ContentAssets = () => {
 		});
 		$[21] = files;
 		$[22] = selectedIds;
-		$[23] = t14;
-	} else t14 = $[23];
-	let t15;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
 	if ($[24] !== selectionRect) {
-		t15 = selectionRect && /* @__PURE__ */ jsx("div", {
+		t16 = selectionRect && /* @__PURE__ */ jsx("div", {
 			className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
 			style: {
 				left: selectionRect.left,
@@ -198,61 +194,61 @@ const ContentAssets = () => {
 			}
 		});
 		$[24] = selectionRect;
-		$[25] = t15;
-	} else t15 = $[25];
-	let t16;
-	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15) {
-		t16 = /* @__PURE__ */ jsxs(PanelContent, {
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(PanelContent, {
 			ref: containerRef,
 			className: "relative p-4 select-none",
-			onClick: t11,
+			onClick: t12,
 			onPointerDown: handlers.onPointerDown,
 			onPointerMove: handlers.onPointerMove,
 			onPointerUp: handlers.onPointerUp,
 			children: [
-				t12,
 				t13,
 				t14,
-				t15
+				t15,
+				t16
 			]
 		});
 		$[26] = handlers.onPointerDown;
 		$[27] = handlers.onPointerMove;
 		$[28] = handlers.onPointerUp;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t14;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
-	let t17;
-	if ($[35] !== t16 || $[36] !== uploadFiles) {
-		t17 = /* @__PURE__ */ jsx("div", {
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17 || $[36] !== uploadFiles) {
+		t18 = /* @__PURE__ */ jsx("div", {
 			className: "flex min-h-0 min-w-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsx(UploadDropZone, {
 				onDrop: uploadFiles,
 				className: "flex min-h-0 flex-1 flex-col",
-				children: t16
+				children: t17
 			})
 		});
-		$[35] = t16;
+		$[35] = t17;
 		$[36] = uploadFiles;
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
 	if ($[38] !== clearAll || $[39] !== uploads) {
-		t18 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
+		t19 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
 			uploads,
 			onClose: clearAll
 		});
 		$[38] = clearAll;
 		$[39] = uploads;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
 	if ($[41] !== deleteFiles || $[42] !== selectedIds) {
-		t19 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
+		t20 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
 			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground",
@@ -274,11 +270,11 @@ const ContentAssets = () => {
 		});
 		$[41] = deleteFiles;
 		$[42] = selectedIds;
-		$[43] = t19;
-	} else t19 = $[43];
-	let t20;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
 	if ($[44] !== lightboxFileId) {
-		t20 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+		t21 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: true,
 			onOpenChange: (open) => {
 				if (!open) setLightboxFileId(null);
@@ -286,23 +282,23 @@ const ContentAssets = () => {
 			fileId: lightboxFileId
 		});
 		$[44] = lightboxFileId;
-		$[45] = t20;
-	} else t20 = $[45];
-	let t21;
-	if ($[46] !== t17 || $[47] !== t18 || $[48] !== t19 || $[49] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t17,
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t18,
 			t19,
-			t20
+			t20,
+			t21
 		] });
-		$[46] = t17;
-		$[47] = t18;
-		$[48] = t19;
-		$[49] = t20;
-		$[50] = t21;
-	} else t21 = $[50];
-	return t21;
+		$[46] = t18;
+		$[47] = t19;
+		$[48] = t20;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
 };
 function _temp(prev) {
 	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();

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;
 }