camox 0.48.0 → 0.52.1

package/dist/core/layoutContext.d.ts

@@ -1,3 +1,4 @@
+import "../lib/locale-path.js";
 //#region src/core/layoutContext.d.ts
 /**
  * The context every layout `to*` option receives. Each name always means the same thing and is

package/dist/core/lib/contentType.js

@@ -6,7 +6,7 @@ import { uuidv7JsonSchema } from "@camox/api-contract/ids";
 //#region src/core/lib/contentType.ts
 /** A collection's content field named `key`, if it has one. */
 function collectionField(collection, key) {
-	const properties = collection?._internal.contentSchema.properties;
+	const properties = collection?.contentSchema.properties;
 	return properties && Object.hasOwn(properties, key) ? properties[key] : void 0;
 }
 var FieldToken = class {
@@ -232,7 +232,7 @@ function _fileList(options) {
 * included); definition sync applies the same rules.
 */
 function validateQuery(query, collection) {
-	const problem = referenceQueryProblem(query, (key) => collectionField(collection, key)?.fieldType);
+	const problem = referenceQueryProblem(query, (key) => collectionField(collection._internal, key)?.fieldType);
 	if (problem) throw new Error(`Query on "${collection._internal.id}": ${problem}`);
 	return query;
 }

package/dist/core/recordItem.js

@@ -56,12 +56,12 @@ function recordPageValues(collection, { data: record, published }) {
 * A record's title and description: its collection's templates filled with its fields' plain
 * text, as the API fills them. For records edited here, before the API names them again.
 */
-function recordText$1(collection, content) {
-	if (!collection) return {
+function recordText$1(templates, content) {
+	if (!templates) return {
 		title: "",
 		description: null
 	};
-	return recordText(collection._internal, (name) => fieldPlainText(content[name]));
+	return recordText(templates, (name) => fieldPlainText(content[name]));
 }
 /**
 * The first field a collection's title template names, such as `firstName` in

package/dist/features/canvas/CamoxCanvas.js

@@ -3,17 +3,18 @@ import { parseLocalePath } from "../../lib/locale-path.js";
 import { useOptionalDraftScope } from "../../lib/draft-scope.js";
 import { useViewLocale } from "../../lib/view-locale-context.js";
 import { NavigationProvider, useLocation, useNavigate } from "../navigation/navigation.js";
-import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
 import { pageMutations } from "../../lib/queries.js";
+import { useRoutableLayouts } from "../../lib/studio-definitions.js";
 import { useLocalizedPath } from "../../lib/view-locale.js";
 import { canvasStore } from "./canvasStore.js";
-import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { previewStore } from "../preview/previewStore.js";
+import { CanvasWorkspaceContext } from "./canvasZoom.js";
+import { useRendererHost } from "../renderer/RendererFrames.js";
+import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { PREVIEW_PAGE_SLOT_ATTRIBUTE, PreviewPageFrameContext } from "../preview/previewPageFrame.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
 import { canvasBlockOverlap } from "./canvasFrameDocument.js";
-import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { PageRecordContext, getPageRecord } from "../preview/pageRecord.js";
 import { CuratedBlockShortcuts } from "../preview/components/PreviewPanel.js";
 import { FollowAgentContext } from "../studio/followAgentContext.js";
@@ -707,12 +708,13 @@ function useRenamePage() {
 }
 /**
 * The still images of a workspace's Pages, where the browser draws them faithfully. They refresh
-* while the camera is still, and all go stale when the website's code changes.
+* while the camera is still, and all go stale when the website's code changes: each time another
+* renderer document connects, for a new revision or another draft.
 */
 function useWorkspaceThumbnails(workspaceKey) {
 	const $ = c(13);
 	const queryClient = useQueryClient();
-	const app = useCamoxApp();
+	const renderer = useRendererHost();
 	let t0;
 	if ($[0] !== queryClient) {
 		t0 = () => canvasThumbnailsSupported() ? createCanvasThumbnails(queryClient) : null;
@@ -753,17 +755,15 @@ function useWorkspaceThumbnails(workspaceKey) {
 		t4 = $[8];
 	}
 	React.useEffect(t3, t4);
-	const previousApp = React.useRef(app);
 	let t5;
 	let t6;
-	if ($[9] !== app || $[10] !== thumbnails) {
+	if ($[9] !== renderer || $[10] !== thumbnails) {
 		t5 = () => {
-			if (previousApp.current === app) return;
-			previousApp.current = app;
-			thumbnails?.markAllStale();
+			if (!renderer || !thumbnails) return;
+			return renderer.subscribe(() => thumbnails.markAllStale());
 		};
-		t6 = [app, thumbnails];
-		$[9] = app;
+		t6 = [renderer, thumbnails];
+		$[9] = renderer;
 		$[10] = thumbnails;
 		$[11] = t5;
 		$[12] = t6;
@@ -1084,7 +1084,7 @@ function CanvasWorkspace(t0) {
 function CamoxCanvas(t0) {
 	const $ = c(68);
 	const { runtimeBasePath } = t0;
-	const app = useCamoxApp();
+	const layouts = useRoutableLayouts();
 	const renamePage = useRenamePage();
 	const location = useLocation();
 	const viewportMode = useSelector(previewStore, _temp3);
@@ -1142,7 +1142,7 @@ function CamoxCanvas(t0) {
 	const pages = useReadQuery(t5, t7);
 	const discoveredPaths = useDiscoveredPreviewPaths(runtimeBasePath);
 	const viewLocale = useViewLocale();
-	const canvasPages = pages.data ? getCanvasPages(pages.data, app.getLayouts(), discoveredPaths, viewLocale.locale) : [];
+	const canvasPages = pages.data ? getCanvasPages(pages.data, layouts, discoveredPaths, viewLocale.locale) : [];
 	let t8;
 	if ($[11] !== viewLocale.locales) {
 		t8 = (runtimePath) => parseLocalePath(runtimePath, viewLocale.locales).path === STUDIO_CANVAS_PATH;
@@ -1150,7 +1150,7 @@ function CamoxCanvas(t0) {
 		$[12] = t8;
 	} else t8 = $[12];
 	const isCanvasPath = t8;
-	const pageAt = (runtimePath_0) => isCanvasPath(runtimePath_0) ? void 0 : selectedCanvasPage(canvasPages, app.getLayouts(), runtimePath_0, viewLocale.locales);
+	const pageAt = (runtimePath_0) => isCanvasPath(runtimePath_0) ? void 0 : selectedCanvasPage(canvasPages, layouts, runtimePath_0, viewLocale.locales);
 	const selectedPage = pageAt(location.pathname);
 	const previewedPath = React.use(PreviewPageFrameContext)?.pathname;
 	const previewedPage = previewedPath ? pageAt(previewedPath) : void 0;

package/dist/features/canvas/CanvasLoadingScreen.js

@@ -9,25 +9,29 @@ import { Spinner } from "@camox/ui/spinner";
 * center shows the Canvas is loading.
 */
 function CanvasLoadingScreen(t0) {
-	const $ = c(4);
-	const { spinner: t1 } = t0;
+	const $ = c(5);
+	const { spinner: t1, label } = t0;
 	const spinner = t1 === void 0 ? true : t1;
 	let t2;
-	if ($[0] !== spinner) {
-		t2 = spinner && /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground size-6" });
-		$[0] = spinner;
-		$[1] = t2;
-	} else t2 = $[1];
+	if ($[0] !== label || $[1] !== spinner) {
+		t2 = spinner && /* @__PURE__ */ jsx(Spinner, {
+			className: "text-muted-foreground size-6",
+			"aria-label": label
+		});
+		$[0] = label;
+		$[1] = spinner;
+		$[2] = t2;
+	} else t2 = $[2];
 	let t3;
-	if ($[2] !== t2) {
+	if ($[3] !== t2) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-loading": true,
 			className: "bg-muted absolute inset-0 grid place-items-center",
 			children: t2
 		});
-		$[2] = t2;
-		$[3] = t3;
-	} else t3 = $[3];
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
 	return t3;
 }
 

package/dist/features/canvas/CanvasPageFrame.js

@@ -1,17 +1,14 @@
-import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
-import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
+import { RendererSlot, useRendererHost } from "../renderer/RendererFrames.js";
 import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
 import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
-import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
 import { canvasPageHref, measureCanvasDocument } from "./canvasFrameDocument.js";
-import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
 import { Overlays } from "../preview/components/Overlays.js";
 import { PreviewFrameEffects } from "../preview/components/PreviewPanel.js";
-import { PageContent } from "../preview/CamoxPreview.js";
 import { CanvasOverlays } from "./CanvasOverlays.js";
-import "../preview/EditablePageContent.js";
 import { useFrameSettled } from "./canvasThumbnails.js";
 import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
 import { c } from "react/compiler-runtime";
@@ -69,8 +66,8 @@ function PageContentCommitted(t0) {
 	return null;
 }
 /**
-* Parent owns /_camox/data loading and the per-card error boundary. Documents are
-* isolated, but their cache and editing runtime are shared with the studio.
+* Parent owns /_camox/data loading and the per-card error boundary. The studio keeps the frame's
+* document, overlays and editing; the renderer frame renders the page into its slot.
 */
 function CanvasPageFrame(props) {
 	const $ = c(2);
@@ -83,12 +80,11 @@ function CanvasPageFrame(props) {
 	return t0;
 }
 function PageFrame(t0) {
-	const $ = c(67);
+	const $ = c(69);
 	const { input, width, viewportHeight, pageId, selected: t1, hovered: t2, mode: t3, onActivate, onSettled } = t0;
 	const selected = t1 === void 0 ? false : t1;
 	const hovered = t2 === void 0 ? false : t2;
 	const mode = t3 === void 0 ? "live" : t3;
-	const camoxApp = useCamoxApp();
 	let t4;
 	if ($[0] !== input) {
 		t4 = canvasPageHref(input);
@@ -127,6 +123,8 @@ function PageFrame(t0) {
 	const { iframeRef, iframe, mount, iframeProps } = useCanvasFrame(t7);
 	const claim = useEditingFrameClaim(iframe, owner);
 	const [committed, setCommitted] = React.useState(false);
+	const renderer = useRendererHost();
+	const [rendered, setRendered] = React.useState(false);
 	useFrameSettled(committed ? iframe : null, mount, onSettled);
 	let t8;
 	if ($[11] !== claim || $[12] !== onActivate || $[13] !== owner) {
@@ -206,61 +204,57 @@ function PageFrame(t0) {
 		$[33] = t17;
 	} else t17 = $[33];
 	let t18;
-	if ($[34] !== activate || $[35] !== camoxApp || $[36] !== iframe || $[37] !== iframeRef || $[38] !== input.derived || $[39] !== mode || $[40] !== mount || $[41] !== owner || $[42] !== selected || $[43] !== viewportHeight) {
-		t18 = mount && createPortal(/* @__PURE__ */ jsx(React.Activity, {
-			mode: mode === "resting" ? "hidden" : "visible",
-			children: /* @__PURE__ */ jsx(React.Suspense, {
-				fallback: /* @__PURE__ */ jsx("div", {
-					role: "status",
-					children: "Loading page…"
-				}),
-				children: /* @__PURE__ */ jsx(ArtifactsRunContext, {
-					value: selected,
-					children: /* @__PURE__ */ jsx(EditableSurfaceContext, {
-						value: selected,
-						children: /* @__PURE__ */ jsxs("div", {
-							style: { display: "contents" },
-							onPointerDownCapture: activate,
-							onFocusCapture: activate,
-							onClickCapture: activate,
-							onClick: preventLinkNavigation,
-							children: [
-								input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
-									camoxApp,
-									derived: input.derived
-								}) : /* @__PURE__ */ jsx(PageContent, {}),
-								/* @__PURE__ */ jsx(PreviewFrameEffects, {}),
-								/* @__PURE__ */ jsx(Overlays, {
-									frame: iframe,
-									owner,
-									canAddBlocks: owner?.kind === "page"
-								}),
-								/* @__PURE__ */ jsx(PageContentCommitted, {
-									selected,
-									frame: iframeRef,
-									viewportHeight,
-									onCommitted: () => setCommitted(true)
-								})
-							]
+	if ($[34] !== activate || $[35] !== iframe || $[36] !== iframeRef || $[37] !== input.derived?.layoutId || $[38] !== input.pathname || $[39] !== mode || $[40] !== mount || $[41] !== owner || $[42] !== rendered || $[43] !== renderer || $[44] !== selected || $[45] !== viewportHeight) {
+		t18 = mount && renderer && createPortal(/* @__PURE__ */ jsx(ArtifactsRunContext, {
+			value: selected,
+			children: /* @__PURE__ */ jsx(EditableSurfaceContext, {
+				value: selected,
+				children: /* @__PURE__ */ jsxs("div", {
+					style: { display: "contents" },
+					onPointerDownCapture: activate,
+					onFocusCapture: activate,
+					onClickCapture: activate,
+					onClick: preventLinkNavigation,
+					children: [
+						/* @__PURE__ */ jsx(RendererSlot, {
+							pathname: input.pathname,
+							derivedLayoutId: input.derived?.layoutId,
+							resting: mode === "resting",
+							onRendered: () => setRendered(true),
+							onFailed: () => setRendered(true)
+						}),
+						/* @__PURE__ */ jsx(PreviewFrameEffects, {}),
+						/* @__PURE__ */ jsx(Overlays, {
+							frame: iframe,
+							owner,
+							canAddBlocks: owner?.kind === "page"
+						}),
+						rendered && /* @__PURE__ */ jsx(PageContentCommitted, {
+							selected,
+							frame: iframeRef,
+							viewportHeight,
+							onCommitted: () => setCommitted(true)
 						})
-					})
+					]
 				})
 			})
 		}), mount);
 		$[34] = activate;
-		$[35] = camoxApp;
-		$[36] = iframe;
-		$[37] = iframeRef;
-		$[38] = input.derived;
+		$[35] = iframe;
+		$[36] = iframeRef;
+		$[37] = input.derived?.layoutId;
+		$[38] = input.pathname;
 		$[39] = mode;
 		$[40] = mount;
 		$[41] = owner;
-		$[42] = selected;
-		$[43] = viewportHeight;
-		$[44] = t18;
-	} else t18 = $[44];
+		$[42] = rendered;
+		$[43] = renderer;
+		$[44] = selected;
+		$[45] = viewportHeight;
+		$[46] = t18;
+	} else t18 = $[46];
 	let t19;
-	if ($[45] !== activate || $[46] !== hovered || $[47] !== t14 || $[48] !== t15 || $[49] !== t17 || $[50] !== t18) {
+	if ($[47] !== activate || $[48] !== hovered || $[49] !== t14 || $[50] !== t15 || $[51] !== t17 || $[52] !== t18) {
 		t19 = /* @__PURE__ */ jsxs(CanvasOverlays, {
 			document: t14,
 			activate,
@@ -272,26 +266,26 @@ function PageFrame(t0) {
 				t18
 			]
 		});
-		$[45] = activate;
-		$[46] = hovered;
-		$[47] = t14;
-		$[48] = t15;
-		$[49] = t17;
-		$[50] = t18;
-		$[51] = t19;
-	} else t19 = $[51];
+		$[47] = activate;
+		$[48] = hovered;
+		$[49] = t14;
+		$[50] = t15;
+		$[51] = t17;
+		$[52] = t18;
+		$[53] = t19;
+	} else t19 = $[53];
 	let t20;
-	if ($[52] !== input.previewDocument || $[53] !== t19) {
+	if ($[54] !== input.previewDocument || $[55] !== t19) {
 		t20 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
 			value: input.previewDocument,
 			children: t19
 		});
-		$[52] = input.previewDocument;
-		$[53] = t19;
-		$[54] = t20;
-	} else t20 = $[54];
+		$[54] = input.previewDocument;
+		$[55] = t19;
+		$[56] = t20;
+	} else t20 = $[56];
 	let t21;
-	if ($[55] !== href || $[56] !== iframe || $[57] !== input.pathname || $[58] !== mount || $[59] !== t20) {
+	if ($[57] !== href || $[58] !== iframe || $[59] !== input.pathname || $[60] !== mount || $[61] !== t20) {
 		t21 = /* @__PURE__ */ jsx(CanvasFrameProviders, {
 			pathname: input.pathname,
 			href,
@@ -299,33 +293,33 @@ function PageFrame(t0) {
 			iframe,
 			children: t20
 		});
-		$[55] = href;
-		$[56] = iframe;
-		$[57] = input.pathname;
-		$[58] = mount;
-		$[59] = t20;
-		$[60] = t21;
-	} else t21 = $[60];
+		$[57] = href;
+		$[58] = iframe;
+		$[59] = input.pathname;
+		$[60] = mount;
+		$[61] = t20;
+		$[62] = t21;
+	} else t21 = $[62];
 	let t22;
-	if ($[61] !== t13 || $[62] !== t21) {
+	if ($[63] !== t13 || $[64] !== t21) {
 		t22 = /* @__PURE__ */ jsx(HydrationBoundary, {
 			state: t13,
 			children: t21
 		});
-		$[61] = t13;
-		$[62] = t21;
-		$[63] = t22;
-	} else t22 = $[63];
+		$[63] = t13;
+		$[64] = t21;
+		$[65] = t22;
+	} else t22 = $[65];
 	let t23;
-	if ($[64] !== owner || $[65] !== t22) {
+	if ($[66] !== owner || $[67] !== t22) {
 		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
 			value: owner,
 			children: t22
 		});
-		$[64] = owner;
-		$[65] = t22;
-		$[66] = t23;
-	} else t23 = $[66];
+		$[66] = owner;
+		$[67] = t22;
+		$[68] = t23;
+	} else t23 = $[68];
 	return t23;
 }
 

package/dist/features/canvas/CanvasPreviewPageSlot.js

@@ -1,8 +1,8 @@
+import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
 import { ViewportContinuityContext } from "../preview/viewportContinuity.js";
 import { usePreviewPageFrame } from "../preview/previewPageFrame.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
-import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { useCanvasFrameMode } from "./canvasFrameMode.js";
 import { CanvasOverlays } from "./CanvasOverlays.js";
 import { CanvasPageEdge } from "./CanvasPageEdge.js";

package/dist/features/canvas/DerivedPagePathInput.js

@@ -1,6 +1,6 @@
 import { parseLocalePath } from "../../lib/locale-path.js";
 import { useViewLocale } from "../../lib/view-locale-context.js";
-import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { useRoutableLayouts } from "../../lib/studio-definitions.js";
 import { matchDerivedLayout, routeSegments } from "../../core/derivedRoutes.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -30,16 +30,16 @@ function DerivedPagePathInput(props) {
 function PagePathForm(t0) {
 	const $ = c(46);
 	const { page, pathname, onChange } = t0;
-	const app = useCamoxApp();
+	const layouts = useRoutableLayouts();
 	const { locales } = useViewLocale();
 	let t1;
-	if ($[0] !== app || $[1] !== locales || $[2] !== page.layoutId || $[3] !== pathname) {
+	if ($[0] !== layouts || $[1] !== locales || $[2] !== page.layoutId || $[3] !== pathname) {
 		t1 = () => {
 			if (!pathname || /[?#]/.test(pathname)) return {};
-			const match = matchDerivedLayout(app.getLayouts(), parseLocalePath(pathname, locales).path);
+			const match = matchDerivedLayout(layouts, parseLocalePath(pathname, locales).path);
 			return match && match.layout._internal.id === page.layoutId ? match.params : {};
 		};
-		$[0] = app;
+		$[0] = layouts;
 		$[1] = locales;
 		$[2] = page.layoutId;
 		$[3] = pathname;
@@ -55,7 +55,7 @@ function PagePathForm(t0) {
 	let t4;
 	let t5;
 	let t6;
-	if ($[5] !== app || $[6] !== errorId || $[7] !== invalid || $[8] !== onChange || $[9] !== page.layoutId || $[10] !== page.title || $[11] !== values) {
+	if ($[5] !== errorId || $[6] !== invalid || $[7] !== layouts || $[8] !== onChange || $[9] !== page.layoutId || $[10] !== page.title || $[11] !== values) {
 		const segments = routeSegments(page.layoutId);
 		params = [...new Set(segments.filter(_temp).map(_temp2))];
 		let t7;
@@ -71,9 +71,9 @@ function PagePathForm(t0) {
 			return value && !value.includes("/") && value !== "." && value !== "..";
 		});
 		let t8;
-		if ($[21] !== app || $[22] !== page.layoutId || $[23] !== path || $[24] !== validParams) {
-			t8 = validParams && !/[?#]/.test(path) && matchDerivedLayout(app.getLayouts(), path)?.layout._internal.id === page.layoutId;
-			$[21] = app;
+		if ($[21] !== layouts || $[22] !== page.layoutId || $[23] !== path || $[24] !== validParams) {
+			t8 = validParams && !/[?#]/.test(path) && matchDerivedLayout(layouts, path)?.layout._internal.id === page.layoutId;
+			$[21] = layouts;
 			$[22] = page.layoutId;
 			$[23] = path;
 			$[24] = validParams;
@@ -135,9 +135,9 @@ function PagePathForm(t0) {
 				]
 			}, param_0);
 		});
-		$[5] = app;
-		$[6] = errorId;
-		$[7] = invalid;
+		$[5] = errorId;
+		$[6] = invalid;
+		$[7] = layouts;
 		$[8] = onChange;
 		$[9] = page.layoutId;
 		$[10] = page.title;

package/dist/features/canvas/canvasOverlayGeometry.js

@@ -1,7 +1,7 @@
 import { PREVIEW_PAUSED_ATTRIBUTE } from "../../core/lib/previewPaused.js";
+import { repeatableItemElements, subscribeRepeatableItems } from "../preview/repeatableItemTargets.js";
 import { readBlockInsertion } from "./canvasInsertionSeams.js";
 import { resolveOverlayHighlights } from "../preview/overlayHighlights.js";
-import { repeatableItemElements, subscribeRepeatableItems } from "../preview/repeatableItemTargets.js";
 
 //#region src/features/canvas/canvasOverlayGeometry.ts
 const targetSelector = "[data-camox-field-id], [data-camox-block-id]";

package/dist/features/canvas/canvasStore.js

@@ -8,9 +8,7 @@ import { createStore } from "@xstate/store";
 const canvasStore = createStore({
 	context: {
 		views: {},
-		/** Workspaces whose camera is moving, until it has been still for a moment. */
 		moving: {},
-		/** Counts requests to zoom out to the whole Canvas; a mounted Canvas answers each new one. */
 		overviewRequests: 0
 	},
 	on: {
@@ -19,6 +17,8 @@ const canvasStore = createStore({
 			moving: {},
 			overviewRequests: 0
 		}),
+		/** Takes the studio's state, in the renderer frame's document: only its connection sends it. */
+		mirror: (_, event) => event.context,
 		requestOverview: (context) => ({
 			...context,
 			overviewRequests: context.overviewRequests + 1

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

@@ -1,4 +1,4 @@
-import { formatShortcut } from "../../../lib/utils.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import "../../preview/components/PageNicknameField.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,8 +1,8 @@
 import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useRead } from "../../../lib/studio-reads.js";
 import { useLocalePath } from "../../../lib/view-locale.js";
-import { AddBlockSheet } from "../../preview/components/AddBlockSheet.js";
 import { PreviewEditingOwnerContext } from "../../preview/previewSelection.js";
+import { AddBlockSheet } from "../../preview/components/AddBlockSheet.js";
 import { PageInfo } from "../../preview/components/PageInfo.js";
 import { PageTree } from "../../preview/components/PageTree.js";
 import { PageOverview } from "./PageOverview.js";

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

@@ -1,5 +1,5 @@
-import { useCamoxApp } from "../../provider/components/CamoxAppContext.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
+import { useLayoutDefinition } from "../../../lib/studio-definitions.js";
 import { BlocksGroup, CollapsedPageTree, LayoutBlockItem } from "../../preview/components/PageTree.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const EMPTY_PAGE = { blockIds: [] };
 /** A layout page's blocks: all its layout's, before and after where page content would be. */
 function LayoutPageBlocks(t0) {
-	const $ = c(12);
+	const $ = c(9);
 	const { layout } = t0;
 	let t1;
 	if ($[0] !== layout) {
@@ -20,22 +20,14 @@ function LayoutPageBlocks(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const { beforeBlocks, afterBlocks } = usePageBlocks(t1);
-	const app = useCamoxApp();
-	let t2;
-	if ($[2] !== app || $[3] !== layout.layoutId) {
-		t2 = app.getLayoutById(layout.layoutId)?._internal.title ?? layout.layoutId;
-		$[2] = app;
-		$[3] = layout.layoutId;
-		$[4] = t2;
-	} else t2 = $[4];
-	const layoutName = t2;
-	const t3 = beforeBlocks.length + afterBlocks.length;
-	let t4;
-	if ($[5] !== afterBlocks || $[6] !== beforeBlocks || $[7] !== layoutName) {
-		t4 = /* @__PURE__ */ jsx("div", {
+	const layoutName = useLayoutDefinition(layout.layoutId)?.title ?? layout.layoutId;
+	const t2 = beforeBlocks.length + afterBlocks.length;
+	let t3;
+	if ($[2] !== afterBlocks || $[3] !== beforeBlocks || $[4] !== layoutName) {
+		t3 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-4 py-1",
-			children: [["Before", beforeBlocks], ["After", afterBlocks]].map((t5) => {
-				const [title, blocks] = t5;
+			children: [["Before", beforeBlocks], ["After", afterBlocks]].map((t4) => {
+				const [title, blocks] = t4;
 				return /* @__PURE__ */ jsxs("section", {
 					className: "space-y-1",
 					children: [/* @__PURE__ */ jsx("h2", {
@@ -56,22 +48,22 @@ function LayoutPageBlocks(t0) {
 				}, title);
 			})
 		});
-		$[5] = afterBlocks;
-		$[6] = beforeBlocks;
-		$[7] = layoutName;
+		$[2] = afterBlocks;
+		$[3] = beforeBlocks;
+		$[4] = layoutName;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(BlocksGroup, { children: /* @__PURE__ */ jsx(CollapsedPageTree, {
+			blockCount: t2,
+			children: t3
+		}) });
+		$[6] = t2;
+		$[7] = t3;
 		$[8] = t4;
 	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t3 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsx(BlocksGroup, { children: /* @__PURE__ */ jsx(CollapsedPageTree, {
-			blockCount: t3,
-			children: t4
-		}) });
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+	return t4;
 }
 
 //#endregion

package/dist/features/canvas/useCanvasCamera.js

@@ -2,8 +2,8 @@ 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, 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 { 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 { createCanvasFlight, createCanvasPan } from "./canvasFlight.js";
 import * as React from "react";