camox 0.44.0 → 0.45.0

package/dist/features/canvas/CamoxCanvas.js

@@ -0,0 +1,1734 @@
+import { useAuthContext, useProjectUuid } from "../../lib/auth.js";
+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 { useLocalizedPath } from "../../lib/view-locale.js";
+import { canvasStore, setShelfCollapsed, useCollapsedShelves } from "./canvasStore.js";
+import { STUDIO_CANVAS_PATH, blockCatalogPath, matchBlockCatalogPath } from "../studio/routes.js";
+import { previewStore } from "../preview/previewStore.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";
+import { useCanvasFrameMode } from "./canvasFrameMode.js";
+import { useCanvasNearness } from "./useCanvasNearness.js";
+import { CanvasBlockFrame } from "./CanvasBlockFrame.js";
+import { CanvasBlockHeader } from "./CanvasBlockHeader.js";
+import { CANVAS_DEVICES, canvasLayoutId, canvasPageId, derivedLayoutIdOf, getCanvasPages } from "./canvasPages.js";
+import { CANVAS_SLOT_WIDTH, canvasBlockKey, canvasSnapTargets, getBlockCatalog, getCanvasShelves, getDefaultCollapsedShelves, isCanvasBlock, isCanvasShelfShown, positionCanvasShelves } from "./canvasItems.js";
+import { CanvasOverlaysShownContext } from "./CanvasOverlays.js";
+import { CanvasPageEdge } from "./CanvasPageEdge.js";
+import { CANVAS_THUMBNAIL_MAX_ZOOM, CanvasThumbnailsContext, canvasThumbnailsSupported, createCanvasThumbnails, useCanvasThumbnail } from "./canvasThumbnails.js";
+import { CanvasPageFrame } from "./CanvasPageFrame.js";
+import { CanvasPageHeader } from "./CanvasPageHeader.js";
+import { CanvasPreviewPageSlot } from "./CanvasPreviewPageSlot.js";
+import { CANVAS_WORLD_TRANSFORM, canvasScreenAbove, canvasScreenLength, canvasScreenX } from "./canvasScreenSpace.js";
+import { selectedCanvasPage } from "./canvasSelection.js";
+import { CanvasShelfMarkers } from "./CanvasShelfMarker.js";
+import { CanvasSidebar } from "./sidebar/CanvasSidebar.js";
+import { useCanvasCamera } from "./useCanvasCamera.js";
+import { useDiscoveredPreviewPaths } from "./useDiscoveredPreviewPaths.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createStore as createStore$1 } from "@xstate/store";
+
+//#region src/features/canvas/CamoxCanvas.tsx
+function usePreparationFailure(error, t0) {
+	const $ = c(5);
+	const selected = t0 === void 0 ? true : t0;
+	const preparation = React.useContext(PreviewPreparationContext);
+	let t1;
+	let t2;
+	if ($[0] !== error || $[1] !== preparation || $[2] !== selected) {
+		t1 = () => {
+			if (error && selected) preparation?.fail(error);
+		};
+		t2 = [
+			error,
+			selected,
+			preparation
+		];
+		$[0] = error;
+		$[1] = preparation;
+		$[2] = selected;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	React.useEffect(t1, t2);
+}
+function PreparationFailure(t0) {
+	const { error, selected } = t0;
+	usePreparationFailure(error, selected);
+	return null;
+}
+function CanvasMessage(t0) {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground grid min-h-64 place-items-center p-8 text-center text-sm",
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/** A per-card error boundary, so a failing frame never takes the Canvas down. */
+var CanvasFrameBoundary = class extends React.Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	render() {
+		if (!this.state.error) return this.props.children;
+		return /* @__PURE__ */ jsxs(CanvasMessage, { children: [/* @__PURE__ */ jsx(PreparationFailure, {
+			error: this.state.error,
+			selected: this.props.selected ?? false
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			children: [
+				/* @__PURE__ */ jsxs("p", { children: [
+					"This ",
+					this.props.subject,
+					" could not be rendered."
+				] }),
+				/* @__PURE__ */ jsx("p", {
+					className: "mt-2",
+					children: this.state.error.message
+				}),
+				/* @__PURE__ */ jsx("button", {
+					className: "mt-4 underline",
+					onClick: () => this.setState({ error: null }),
+					children: "Try again"
+				})
+			]
+		})] });
+	}
+};
+/**
+* A Page loads its frame once it first comes near the Canvas viewport, and the
+* selected Page right away, wherever the camera is. The frame then stays
+* mounted, but only runs while selected and the camera is still.
+*
+* Zoomed out, or away from the camera, a Page shows a still image of its frame
+* instead, once it has one: the frame unmounts. Its frame comes back near the
+* camera when zoomed in, out of sight until it settles, so the swap doesn't show.
+* Frames come and go only while the camera is still.
+*/
+function CanvasPagePreview(props) {
+	const $ = c(53);
+	const ref = React.useRef(null);
+	const { near, reached } = useCanvasNearness(ref);
+	let t0;
+	if ($[0] !== near || $[1] !== props.selected) {
+		t0 = {
+			near,
+			selected: props.selected
+		};
+		$[0] = near;
+		$[1] = props.selected;
+		$[2] = t0;
+	} else t0 = $[2];
+	const mode = useCanvasFrameMode(t0);
+	const workspaceKey = React.use(CanvasWorkspaceContext)?.workspaceKey;
+	const draftId = useOptionalDraftScope().draftId;
+	const { locale } = useViewLocale();
+	let t1;
+	if ($[3] !== draftId || $[4] !== locale || $[5] !== props.derivedLayoutId || $[6] !== props.pathname || $[7] !== props.runtimeBasePath || $[8] !== props.viewport.width) {
+		t1 = JSON.stringify([
+			draftId,
+			locale,
+			props.runtimeBasePath,
+			props.pathname,
+			props.derivedLayoutId ?? null,
+			props.viewport.width
+		]);
+		$[3] = draftId;
+		$[4] = locale;
+		$[5] = props.derivedLayoutId;
+		$[6] = props.pathname;
+		$[7] = props.runtimeBasePath;
+		$[8] = props.viewport.width;
+		$[9] = t1;
+	} else t1 = $[9];
+	const key = t1;
+	const { thumbnails, thumbnail, refreshing } = useCanvasThumbnail(key);
+	let t2;
+	if ($[10] !== thumbnails || $[11] !== workspaceKey) {
+		t2 = (state) => {
+			if (!thumbnails || workspaceKey == null) return false;
+			return (state.context.views[workspaceKey]?.camera.scale ?? .4) < CANVAS_THUMBNAIL_MAX_ZOOM;
+		};
+		$[10] = thumbnails;
+		$[11] = workspaceKey;
+		$[12] = t2;
+	} else t2 = $[12];
+	const zoomedOut = useSelector(canvasStore, t2);
+	const [loaded, setLoaded] = React.useState(false);
+	if ((reached || props.selected) && !loaded) setLoaded(true);
+	const wantsLive = props.selected || near && !zoomedOut;
+	const wantsFrame = loaded && (wantsLive || refreshing || !thumbnail);
+	const [frameShown, setFrameShown] = React.useState(false);
+	const [settledFrame, setSettledFrame] = React.useState(null);
+	const [settles, setSettles] = React.useState(0);
+	const [captured, setCaptured] = React.useState(0);
+	const captureRequested = settles > captured;
+	const waiting = frameShown !== wantsFrame || captureRequested;
+	let t3;
+	if ($[13] !== thumbnails || $[14] !== waiting || $[15] !== workspaceKey) {
+		t3 = (state_0) => !!thumbnails && waiting && workspaceKey != null && !!state_0.context.moving[workspaceKey];
+		$[13] = thumbnails;
+		$[14] = waiting;
+		$[15] = workspaceKey;
+		$[16] = t3;
+	} else t3 = $[16];
+	const moving = useSelector(canvasStore, t3);
+	if (frameShown !== wantsFrame && (!moving || !thumbnail)) {
+		setFrameShown(wantsFrame);
+		if (!wantsFrame) {
+			setSettledFrame(null);
+			setCaptured(settles);
+		}
+	}
+	const imageShown = !!thumbnail && !(frameShown && settledFrame && wantsLive);
+	const stale = !!thumbnail?.stale && near && !wantsLive;
+	let t4;
+	let t5;
+	if ($[17] !== key || $[18] !== stale || $[19] !== thumbnails) {
+		t4 = () => {
+			if (!stale || !thumbnails) return;
+			return thumbnails.requestRefresh(key);
+		};
+		t5 = [
+			stale,
+			thumbnails,
+			key
+		];
+		$[17] = key;
+		$[18] = stale;
+		$[19] = thumbnails;
+		$[20] = t4;
+		$[21] = t5;
+	} else {
+		t4 = $[20];
+		t5 = $[21];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (frame) => {
+			setSettledFrame(frame);
+			setSettles(_temp);
+		};
+		$[22] = t6;
+	} else t6 = $[22];
+	const onSettled = t6;
+	const resting = mode === "resting";
+	const started = React.useRef(0);
+	let t7;
+	let t8;
+	if ($[23] !== captureRequested || $[24] !== key || $[25] !== moving || $[26] !== props.derivedLayoutId || $[27] !== props.pageId || $[28] !== props.pathname || $[29] !== resting || $[30] !== settledFrame || $[31] !== settles || $[32] !== thumbnails) {
+		t7 = () => {
+			if (!captureRequested || moving || resting || !settledFrame || !thumbnails) return;
+			if (started.current >= settles) return;
+			const request = settles;
+			started.current = request;
+			const pixelRatio = window.devicePixelRatio;
+			const options = {
+				scale: Math.min(1, CANVAS_THUMBNAIL_MAX_ZOOM * pixelRatio),
+				blockOverlap: canvasBlockOverlap(CANVAS_THUMBNAIL_MAX_ZOOM, pixelRatio)
+			};
+			const tokens = [
+				props.pathname,
+				props.pageId,
+				props.derivedLayoutId
+			].filter(_temp2);
+			thumbnails.capture(key, settledFrame, tokens, options).catch((error) => {
+				thumbnails.abandon(key);
+				console.warn(`[camox] Could not capture ${props.pathname} for the Canvas.`, error);
+			}).finally(() => setCaptured((count_0) => Math.max(count_0, request)));
+		};
+		t8 = [
+			captureRequested,
+			settles,
+			moving,
+			resting,
+			settledFrame,
+			thumbnails,
+			key,
+			props.pathname,
+			props.pageId,
+			props.derivedLayoutId
+		];
+		$[23] = captureRequested;
+		$[24] = key;
+		$[25] = moving;
+		$[26] = props.derivedLayoutId;
+		$[27] = props.pageId;
+		$[28] = props.pathname;
+		$[29] = resting;
+		$[30] = settledFrame;
+		$[31] = settles;
+		$[32] = thumbnails;
+		$[33] = t7;
+		$[34] = t8;
+	} else {
+		t7 = $[33];
+		t8 = $[34];
+	}
+	React.useEffect(t7, t8);
+	const t9 = near || props.selected ? void 0 : "hidden";
+	let t10;
+	if ($[35] !== props.viewport.height || $[36] !== t9) {
+		t10 = {
+			position: "relative",
+			minHeight: props.viewport.height,
+			visibility: t9
+		};
+		$[35] = props.viewport.height;
+		$[36] = t9;
+		$[37] = t10;
+	} else t10 = $[37];
+	let t11;
+	if ($[38] !== frameShown || $[39] !== imageShown || $[40] !== mode || $[41] !== props || $[42] !== thumbnails) {
+		t11 = frameShown && /* @__PURE__ */ jsx("div", {
+			style: { visibility: imageShown ? "hidden" : void 0 },
+			children: /* @__PURE__ */ jsx(CanvasPageFrameLoader, {
+				...props,
+				mode,
+				onSettled: thumbnails ? onSettled : void 0
+			})
+		});
+		$[38] = frameShown;
+		$[39] = imageShown;
+		$[40] = mode;
+		$[41] = props;
+		$[42] = thumbnails;
+		$[43] = t11;
+	} else t11 = $[43];
+	let t12;
+	if ($[44] !== frameShown || $[45] !== imageShown || $[46] !== props || $[47] !== thumbnail) {
+		t12 = imageShown && thumbnail && /* @__PURE__ */ jsx("img", {
+			src: thumbnail.url,
+			alt: "",
+			draggable: false,
+			"data-canvas-thumbnail": "",
+			onClick: (event) => {
+				if (!event.currentTarget.closest("[data-canvas-pan]")) props.onSelect();
+			},
+			style: {
+				display: "block",
+				width: thumbnail.width,
+				height: thumbnail.height,
+				...frameShown ? {
+					position: "absolute",
+					top: 0,
+					left: 0
+				} : {}
+			}
+		});
+		$[44] = frameShown;
+		$[45] = imageShown;
+		$[46] = props;
+		$[47] = thumbnail;
+		$[48] = t12;
+	} else t12 = $[48];
+	let t13;
+	if ($[49] !== t10 || $[50] !== t11 || $[51] !== t12) {
+		t13 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			style: t10,
+			children: [t11, t12]
+		});
+		$[49] = t10;
+		$[50] = t11;
+		$[51] = t12;
+		$[52] = t13;
+	} else t13 = $[52];
+	return t13;
+}
+function _temp2(token) {
+	return !!token;
+}
+function _temp(count) {
+	return count + 1;
+}
+function CanvasPageFrameLoader(t0) {
+	const $ = c(23);
+	const { pathname, runtimeBasePath, derivedLayoutId, pageId, viewport, selected, hovered, mode, onActivate, onSettled } = t0;
+	const projectUuid = useProjectUuid();
+	let t1;
+	if ($[0] !== derivedLayoutId || $[1] !== pathname || $[2] !== projectUuid || $[3] !== runtimeBasePath) {
+		t1 = reads.canvasFrame({
+			projectUuid,
+			runtimeBasePath,
+			pathname,
+			derivedLayoutId
+		});
+		$[0] = derivedLayoutId;
+		$[1] = pathname;
+		$[2] = projectUuid;
+		$[3] = runtimeBasePath;
+		$[4] = t1;
+	} else t1 = $[4];
+	const { data, error, isPending, isFetching, refetch } = useReadQuery(t1);
+	usePreparationFailure(isFetching ? null : error, selected);
+	if (isPending) {
+		let t2;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsx("span", {
+				role: "status",
+				children: "Loading page…"
+			}) });
+			$[5] = t2;
+		} else t2 = $[5];
+		return t2;
+	}
+	if (error) {
+		let t2;
+		if ($[6] !== error.message) {
+			t2 = /* @__PURE__ */ jsx("p", { children: error.message });
+			$[6] = error.message;
+			$[7] = t2;
+		} else t2 = $[7];
+		let t3;
+		if ($[8] !== refetch) {
+			t3 = /* @__PURE__ */ jsx("button", {
+				className: "mt-4 underline",
+				onClick: () => void refetch(),
+				children: "Try again"
+			});
+			$[8] = refetch;
+			$[9] = t3;
+		} else t3 = $[9];
+		let t4;
+		if ($[10] !== t2 || $[11] !== t3) {
+			t4 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				children: [t2, t3]
+			}) });
+			$[10] = t2;
+			$[11] = t3;
+			$[12] = t4;
+		} else t4 = $[12];
+		return t4;
+	}
+	let t2;
+	if ($[13] !== data || $[14] !== hovered || $[15] !== mode || $[16] !== onActivate || $[17] !== onSettled || $[18] !== pageId || $[19] !== selected || $[20] !== viewport.height || $[21] !== viewport.width) {
+		t2 = /* @__PURE__ */ jsx(CanvasPageFrame, {
+			input: data,
+			width: viewport.width,
+			viewportHeight: viewport.height,
+			pageId,
+			selected,
+			hovered,
+			mode,
+			onActivate,
+			onSettled
+		});
+		$[13] = data;
+		$[14] = hovered;
+		$[15] = mode;
+		$[16] = onActivate;
+		$[17] = onSettled;
+		$[18] = pageId;
+		$[19] = selected;
+		$[20] = viewport.height;
+		$[21] = viewport.width;
+		$[22] = t2;
+	} else t2 = $[22];
+	return t2;
+}
+const SNAP_FLASH_KEYFRAMES = [
+	{ opacity: 0 },
+	{
+		opacity: 1,
+		offset: .15
+	},
+	{ opacity: 0 }
+];
+const SNAP_FLASH_TIMING = {
+	duration: 600,
+	easing: "ease-out"
+};
+/** A frame header above an item's slot, at a constant on-screen height. */
+function CanvasHeaderSlot(t0) {
+	const $ = c(10);
+	const { itemKey, left, children } = t0;
+	let t1;
+	if ($[0] !== left) {
+		t1 = canvasScreenX(left);
+		$[0] = left;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = canvasScreenAbove(52);
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = `translate(${t1}, ${t2})`;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = canvasScreenLength(CANVAS_SLOT_WIDTH);
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== t3) {
+		t5 = {
+			height: 52,
+			transform: t3,
+			width: t4,
+			willChange: "transform",
+			zIndex: 2
+		};
+		$[4] = t3;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== children || $[7] !== itemKey || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-header": itemKey,
+			className: "@container/canvas-header absolute top-0 left-0 pb-3",
+			style: t5,
+			children
+		});
+		$[6] = children;
+		$[7] = itemKey;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+/** World-space room above and below a frame narrower than its area. */
+const CANVAS_FRAMED_PADDING = 40;
+/**
+* An item's area in the Canvas row, which the camera snaps to, with the item's
+* frame centered in it. A frame narrower than its area shows the area in a
+* shade of its own, with room above and below the frame.
+*/
+function CanvasSlot(t0) {
+	const $ = c(7);
+	const { itemKey, framed, children } = t0;
+	const t1 = framed || void 0;
+	const t2 = framed ? CANVAS_FRAMED_PADDING : 0;
+	let t3;
+	if ($[0] !== t2) {
+		t3 = {
+			width: CANVAS_SLOT_WIDTH,
+			paddingBlock: t2
+		};
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== children || $[3] !== itemKey || $[4] !== t1 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-slot": itemKey,
+			"data-canvas-slot-shaded": t1,
+			className: "data-canvas-slot-shaded:bg-foreground/5 flex shrink-0 justify-center",
+			style: t3,
+			children
+		});
+		$[2] = children;
+		$[3] = itemKey;
+		$[4] = t1;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+/**
+* The Page whose header the pointer is over, which outlines its frame. Kept out
+* of the Canvas's state, so hovering re-renders only the frames it outlines.
+*/
+function createCanvasHover() {
+	return createStore$1({
+		context: { pageKey: null },
+		on: { set: (context, event) => context.pageKey === event.pageKey ? context : { pageKey: event.pageKey } }
+	});
+}
+/** A Block Catalog block's area in the Canvas row, with its frame. */
+function CanvasBlockItem(t0) {
+	const $ = c(24);
+	const { itemKey, block, projectId, runtimeBasePath, viewport, framed, selected, selectBlock } = t0;
+	let t1;
+	if ($[0] !== viewport.width) {
+		t1 = { width: viewport.width };
+		$[0] = viewport.width;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== block || $[3] !== selectBlock) {
+		t2 = () => selectBlock(block);
+		$[2] = block;
+		$[3] = selectBlock;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== block || $[6] !== projectId || $[7] !== runtimeBasePath || $[8] !== selected || $[9] !== t2 || $[10] !== viewport.height || $[11] !== viewport.width) {
+		t3 = /* @__PURE__ */ jsx(CanvasFrameBoundary, {
+			subject: "block",
+			children: /* @__PURE__ */ jsx(CanvasBlockFrame, {
+				block,
+				projectId,
+				runtimeBasePath,
+				width: viewport.width,
+				viewportHeight: viewport.height,
+				selected,
+				onSelect: t2
+			})
+		});
+		$[5] = block;
+		$[6] = projectId;
+		$[7] = runtimeBasePath;
+		$[8] = selected;
+		$[9] = t2;
+		$[10] = viewport.height;
+		$[11] = viewport.width;
+		$[12] = t3;
+	} else t3 = $[12];
+	let t4;
+	if ($[13] !== framed) {
+		t4 = /* @__PURE__ */ jsx(CanvasPageEdge, { shaded: framed });
+		$[13] = framed;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== block._internal.id || $[16] !== t1 || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			"data-canvas-block": block._internal.id,
+			className: "bg-background relative shrink-0 shadow-xl ring-1 ring-black/10",
+			style: t1,
+			children: [t3, t4]
+		});
+		$[15] = block._internal.id;
+		$[16] = t1;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== framed || $[21] !== itemKey || $[22] !== t5) {
+		t6 = /* @__PURE__ */ jsx(CanvasSlot, {
+			itemKey,
+			framed,
+			children: t5
+		});
+		$[20] = framed;
+		$[21] = itemKey;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
+	return t6;
+}
+/** A Page's area in the Canvas row, with its frame. */
+function CanvasPageItem(t0) {
+	const $ = c(40);
+	const { page, pathname, selected, previewed, collapsed, framed, viewport, runtimeBasePath, onActivate, selectPage, hover } = t0;
+	let t1;
+	if ($[0] !== page.key) {
+		t1 = (state) => state.context.pageKey === page.key;
+		$[0] = page.key;
+		$[1] = t1;
+	} else t1 = $[1];
+	const hovered = useSelector(hover, t1);
+	let t2;
+	if ($[2] !== onActivate || $[3] !== pathname || $[4] !== selectPage) {
+		t2 = (owner, source, release) => {
+			if (!pathname) return;
+			onActivate(pathname, owner, release);
+			if (source === "interaction") selectPage(pathname);
+		};
+		$[2] = onActivate;
+		$[3] = pathname;
+		$[4] = selectPage;
+		$[5] = t2;
+	} else t2 = $[5];
+	const onPageActivate = t2;
+	let t3;
+	if ($[6] !== previewed) {
+		t3 = previewed ? { [PREVIEW_PAGE_SLOT_ATTRIBUTE]: "" } : {};
+		$[6] = previewed;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== viewport.height || $[9] !== viewport.width) {
+		t4 = {
+			width: viewport.width,
+			minHeight: viewport.height
+		};
+		$[8] = viewport.height;
+		$[9] = viewport.width;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== collapsed || $[12] !== framed || $[13] !== hovered || $[14] !== onPageActivate || $[15] !== page || $[16] !== pathname || $[17] !== previewed || $[18] !== runtimeBasePath || $[19] !== selectPage || $[20] !== selected || $[21] !== viewport) {
+		t5 = previewed ? /* @__PURE__ */ jsx(CanvasPreviewPageSlot, {
+			pageId: canvasPageId(page),
+			layoutId: canvasLayoutId(page),
+			width: viewport.width,
+			viewportHeight: viewport.height,
+			selected,
+			hovered,
+			hidden: collapsed,
+			shaded: framed,
+			onActivate: onPageActivate
+		}) : pathname ? /* @__PURE__ */ jsx(CanvasPagePreview, {
+			hovered,
+			pathname,
+			runtimeBasePath,
+			derivedLayoutId: derivedLayoutIdOf(page),
+			pageId: canvasPageId(page),
+			viewport,
+			selected,
+			onActivate: onPageActivate,
+			onSelect: () => selectPage(pathname)
+		}) : /* @__PURE__ */ jsx(CanvasMessage, { children: "Choose a page path above to preview this layout." });
+		$[11] = collapsed;
+		$[12] = framed;
+		$[13] = hovered;
+		$[14] = onPageActivate;
+		$[15] = page;
+		$[16] = pathname;
+		$[17] = previewed;
+		$[18] = runtimeBasePath;
+		$[19] = selectPage;
+		$[20] = selected;
+		$[21] = viewport;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== pathname || $[24] !== selected || $[25] !== t5) {
+		t6 = /* @__PURE__ */ jsx(CanvasFrameBoundary, {
+			subject: "page",
+			selected,
+			children: t5
+		}, pathname);
+		$[23] = pathname;
+		$[24] = selected;
+		$[25] = t5;
+		$[26] = t6;
+	} else t6 = $[26];
+	let t7;
+	if ($[27] !== framed) {
+		t7 = /* @__PURE__ */ jsx(CanvasPageEdge, { shaded: framed });
+		$[27] = framed;
+		$[28] = t7;
+	} else t7 = $[28];
+	let t8;
+	if ($[29] !== page.key || $[30] !== pathname || $[31] !== t3 || $[32] !== t4 || $[33] !== t6 || $[34] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			"data-canvas-page": page.key,
+			"data-canvas-pathname": pathname,
+			...t3,
+			className: "bg-background relative shrink-0 shadow-xl ring-1 ring-black/10",
+			style: t4,
+			children: [t6, t7]
+		});
+		$[29] = page.key;
+		$[30] = pathname;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== framed || $[37] !== page.key || $[38] !== t8) {
+		t9 = /* @__PURE__ */ jsx(CanvasSlot, {
+			itemKey: page.key,
+			framed,
+			children: t8
+		});
+		$[36] = framed;
+		$[37] = page.key;
+		$[38] = t8;
+		$[39] = t9;
+	} else t9 = $[39];
+	return t9;
+}
+/** A block header with the number of Pages placing the block. */
+function CanvasBlockUsageHeader(t0) {
+	const $ = c(7);
+	const { projectId, block, onSelect } = t0;
+	let t1;
+	if ($[0] !== block._internal.id || $[1] !== projectId) {
+		t1 = reads.pagesUsingBlock({
+			projectId,
+			type: block._internal.id
+		});
+		$[0] = block._internal.id;
+		$[1] = projectId;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = useReadQuery(t1).data?.length;
+	let t3;
+	if ($[3] !== block || $[4] !== onSelect || $[5] !== t2) {
+		t3 = /* @__PURE__ */ jsx(CanvasBlockHeader, {
+			block,
+			pageCount: t2,
+			onSelect
+		});
+		$[3] = block;
+		$[4] = onSelect;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/** Gives a Page a new nickname, keeping its path. */
+function useRenamePage() {
+	const $ = c(4);
+	const studioCache = useStudioCache();
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = pageMutations.update();
+		$[0] = t0;
+	} else t0 = $[0];
+	const updatePage = useMutation(t0);
+	let t1;
+	if ($[1] !== studioCache || $[2] !== updatePage) {
+		t1 = async (pageId, nickname) => {
+			const page = await studioCache.ensure(reads.page({ id: pageId }));
+			await updatePage.mutateAsync({
+				id: pageId,
+				nickname,
+				pathSegment: page.pathSegment,
+				parentPageId: page.parentPageId
+			});
+		};
+		$[1] = studioCache;
+		$[2] = updatePage;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+/**
+* 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.
+*/
+function useWorkspaceThumbnails(workspaceKey) {
+	const $ = c(13);
+	const queryClient = useQueryClient();
+	const app = useCamoxApp();
+	let t0;
+	if ($[0] !== queryClient) {
+		t0 = () => canvasThumbnailsSupported() ? createCanvasThumbnails(queryClient) : null;
+		$[0] = queryClient;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [thumbnails] = React.useState(t0);
+	let t1;
+	let t2;
+	if ($[2] !== thumbnails) {
+		t1 = () => thumbnails?.connect();
+		t2 = [thumbnails];
+		$[2] = thumbnails;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[5] !== thumbnails || $[6] !== workspaceKey) {
+		t3 = () => {
+			if (!thumbnails) return;
+			const update = () => thumbnails.setMoving(!!canvasStore.getSnapshot().context.moving[workspaceKey]);
+			update();
+			const subscription = canvasStore.subscribe(update);
+			return () => subscription.unsubscribe();
+		};
+		t4 = [thumbnails, workspaceKey];
+		$[5] = thumbnails;
+		$[6] = workspaceKey;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	React.useEffect(t3, t4);
+	const previousApp = React.useRef(app);
+	let t5;
+	let t6;
+	if ($[9] !== app || $[10] !== thumbnails) {
+		t5 = () => {
+			if (previousApp.current === app) return;
+			previousApp.current = app;
+			thumbnails?.markAllStale();
+		};
+		t6 = [app, thumbnails];
+		$[9] = app;
+		$[10] = thumbnails;
+		$[11] = t5;
+		$[12] = t6;
+	} else {
+		t5 = $[11];
+		t6 = $[12];
+	}
+	React.useEffect(t5, t6);
+	return thumbnails;
+}
+function CanvasWorkspace(t0) {
+	const $ = c(89);
+	const { ref, projectId, pages, blocks, selectedPage, selectedBlock, previewedPage, intendedItemKey, runtimeBasePath, viewport, onActivate, onSelectionIntent } = t0;
+	const { apiUrl, projectUuid } = useAuthContext();
+	const renamePage = useRenamePage();
+	const location = useLocation();
+	const navigate = useNavigate();
+	const previewPageFrame = React.use(PreviewPageFrameContext);
+	const localized = useLocalizedPath();
+	const [hover] = React.useState(createCanvasHover);
+	const selectedPath = location.pathname;
+	const previewedPath = previewPageFrame?.pathname;
+	const follow = React.use(FollowAgentContext);
+	let t1;
+	if ($[0] !== location.hash || $[1] !== location.search || $[2] !== navigate || $[3] !== onSelectionIntent) {
+		t1 = (pathname) => {
+			onSelectionIntent(pathname);
+			navigate({
+				to: `${pathname}${location.search}${location.hash}`,
+				source: "canvas"
+			});
+		};
+		$[0] = location.hash;
+		$[1] = location.search;
+		$[2] = navigate;
+		$[3] = onSelectionIntent;
+		$[4] = t1;
+	} else t1 = $[4];
+	const goToItem = t1;
+	let t2;
+	if ($[5] !== follow || $[6] !== goToItem) {
+		t2 = (pathname_0) => {
+			follow?.takeOver();
+			goToItem(pathname_0);
+		};
+		$[5] = follow;
+		$[6] = goToItem;
+		$[7] = t2;
+	} else t2 = $[7];
+	const selectPage = t2;
+	let t3;
+	if ($[8] !== localized || $[9] !== selectPage) {
+		t3 = (block) => selectPage(localized(blockCatalogPath(block._internal.id)));
+		$[8] = localized;
+		$[9] = selectPage;
+		$[10] = t3;
+	} else t3 = $[10];
+	const selectBlock = t3;
+	let t4;
+	if ($[11] !== selectBlock || $[12] !== selectPage) {
+		t4 = {
+			selectPage,
+			selectBlock
+		};
+		$[11] = selectBlock;
+		$[12] = selectPage;
+		$[13] = t4;
+	} else t4 = $[13];
+	const latestSelect = React.useRef(t4);
+	let t5;
+	if ($[14] !== selectBlock || $[15] !== selectPage) {
+		t5 = () => {
+			latestSelect.current = {
+				selectPage,
+				selectBlock
+			};
+		};
+		$[14] = selectBlock;
+		$[15] = selectPage;
+		$[16] = t5;
+	} else t5 = $[16];
+	React.useLayoutEffect(t5);
+	let t6;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (pathname_1) => latestSelect.current.selectPage(pathname_1);
+		$[17] = t6;
+	} else t6 = $[17];
+	const selectFramePage = t6;
+	let t7;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (block_0) => latestSelect.current.selectBlock(block_0);
+		$[18] = t7;
+	} else t7 = $[18];
+	const selectFrameBlock = t7;
+	let t8;
+	if ($[19] !== apiUrl || $[20] !== projectUuid || $[21] !== runtimeBasePath) {
+		t8 = JSON.stringify([
+			apiUrl,
+			projectUuid,
+			runtimeBasePath
+		]);
+		$[19] = apiUrl;
+		$[20] = projectUuid;
+		$[21] = runtimeBasePath;
+		$[22] = t8;
+	} else t8 = $[22];
+	const workspaceKey = t8;
+	let t9;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {};
+		$[23] = t9;
+	} else t9 = $[23];
+	const [previewPathnames, setPreviewPathnames] = React.useState(t9);
+	const shelves = getCanvasShelves(pages, blocks);
+	let t10;
+	if ($[24] !== selectedBlock || $[25] !== selectedPage?.key) {
+		t10 = selectedPage?.key ?? (selectedBlock && canvasBlockKey(selectedBlock._internal.id));
+		$[24] = selectedBlock;
+		$[25] = selectedPage?.key;
+		$[26] = t10;
+	} else t10 = $[26];
+	const selectedItemKey = t10;
+	const collapsedShelves = useCollapsedShelves(workspaceKey, getDefaultCollapsedShelves(shelves), shelves.find((shelf) => shelf.items.some((t11) => {
+		const { key } = t11;
+		return key === selectedItemKey;
+	}))?.key);
+	let t12;
+	if ($[27] !== collapsedShelves || $[28] !== workspaceKey) {
+		t12 = (shelfKey) => setShelfCollapsed(workspaceKey, shelfKey, !collapsedShelves.has(shelfKey));
+		$[27] = collapsedShelves;
+		$[28] = workspaceKey;
+		$[29] = t12;
+	} else t12 = $[29];
+	const toggleShelf = t12;
+	const { items, markers, width } = positionCanvasShelves(shelves, collapsedShelves);
+	const positions = new Map(items.map(_temp3));
+	const blocksByKey = new Map(items.filter(isCanvasBlock).map(_temp4));
+	const pageSlots = new Map(pages.map((page) => [page.key, {
+		page,
+		left: positions.get(page.key),
+		pathname: page.key === selectedPage?.key ? selectedPath : previewedPath && page.key === previewedPage?.key ? previewedPath : previewPathnames[page.key] ?? page.pathname
+	}]));
+	const selectedKey = selectedItemKey && positions.has(selectedItemKey) ? selectedItemKey : null;
+	const hiddenSelectedShelf = shelves.find((shelf_0) => collapsedShelves.has(shelf_0.key) && shelf_0.items.some((t13) => {
+		const { key: key_0 } = t13;
+		return key_0 === selectedItemKey;
+	}))?.key;
+	const framed = viewport.width < CANVAS_SLOT_WIDTH;
+	const snapTargets = canvasSnapTargets(items);
+	const snapRingRef = React.useRef(null);
+	const snapFlash = React.useRef(null);
+	let t14;
+	if ($[30] !== selectedKey) {
+		t14 = (t15) => {
+			const { key: key_1 } = t15;
+			return key_1 === selectedKey;
+		};
+		$[30] = selectedKey;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== goToItem || $[33] !== localized) {
+		t15 = () => goToItem(localized(STUDIO_CANVAS_PATH));
+		$[32] = goToItem;
+		$[33] = localized;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== follow) {
+		t16 = () => follow?.takeOver();
+		$[35] = follow;
+		$[36] = t16;
+	} else t16 = $[36];
+	const { viewportRef, contentRef, flyTo, mirrorCamera, keepInView, reveal, fitAll } = useCanvasCamera(workspaceKey, snapTargets.find(t14), {
+		targets: snapTargets,
+		width,
+		onSelect: (key_2) => {
+			const block_1 = blocksByKey.get(key_2);
+			if (block_1) return selectBlock(block_1);
+			const pathname_2 = pageSlots.get(key_2)?.pathname;
+			if (pathname_2) selectPage(pathname_2);
+		},
+		selected: intendedItemKey && positions.has(intendedItemKey) ? intendedItemKey : null,
+		onDeselect: t15,
+		onSnap: () => {
+			snapFlash.current = snapRingRef.current?.animate(SNAP_FLASH_KEYFRAMES, SNAP_FLASH_TIMING) ?? null;
+		},
+		onSnapStretched: () => snapFlash.current?.cancel(),
+		onEditorMove: t16
+	});
+	let t17;
+	if ($[37] !== mirrorCamera || $[38] !== reveal || $[39] !== workspaceKey) {
+		t17 = {
+			workspaceKey,
+			mirrorCamera,
+			reveal
+		};
+		$[37] = mirrorCamera;
+		$[38] = reveal;
+		$[39] = workspaceKey;
+		$[40] = t17;
+	} else t17 = $[40];
+	const workspace = t17;
+	const thumbnails = useWorkspaceThumbnails(workspaceKey);
+	const collapsingShelf = React.useRef(null);
+	React.useLayoutEffect(() => {
+		const marker = markers.find((t18) => {
+			const { key: key_3 } = t18;
+			return key_3 === collapsingShelf.current;
+		});
+		collapsingShelf.current = null;
+		if (marker) keepInView(marker.start, 12);
+	});
+	const instructionsId = React.useId();
+	const previousPath = React.useRef(selectedPath);
+	React.useEffect(() => {
+		if (previousPath.current === selectedPath) return;
+		if (location.source !== "canvas" && hiddenSelectedShelf) {
+			setShelfCollapsed(workspaceKey, hiddenSelectedShelf, false);
+			return;
+		}
+		if (location.source !== "canvas" && !selectedKey) return;
+		previousPath.current = selectedPath;
+	}, [
+		selectedPath,
+		location.source,
+		selectedKey,
+		hiddenSelectedShelf,
+		workspaceKey
+	]);
+	const [pendingFlight, setPendingFlight] = React.useState(null);
+	const pendingFlightPlaced = !!pendingFlight && positions.has(pendingFlight);
+	let t19;
+	let t20;
+	if ($[41] !== flyTo || $[42] !== pendingFlight || $[43] !== pendingFlightPlaced) {
+		t19 = () => {
+			if (!pendingFlight || !pendingFlightPlaced) return;
+			setPendingFlight(null);
+			flyTo(pendingFlight);
+		};
+		t20 = [
+			pendingFlight,
+			pendingFlightPlaced,
+			flyTo
+		];
+		$[41] = flyTo;
+		$[42] = pendingFlight;
+		$[43] = pendingFlightPlaced;
+		$[44] = t19;
+		$[45] = t20;
+	} else {
+		t19 = $[44];
+		t20 = $[45];
+	}
+	React.useEffect(t19, t20);
+	let t21;
+	let t22;
+	if ($[46] !== fitAll) {
+		t21 = () => {
+			let answered = canvasStore.getSnapshot().context.overviewRequests;
+			const subscription = canvasStore.subscribe((t23) => {
+				const { context } = t23;
+				if (context.overviewRequests === answered) return;
+				answered = context.overviewRequests;
+				fitAll();
+			});
+			return () => subscription.unsubscribe();
+		};
+		t22 = [fitAll];
+		$[46] = fitAll;
+		$[47] = t21;
+		$[48] = t22;
+	} else {
+		t21 = $[47];
+		t22 = $[48];
+	}
+	React.useEffect(t21, t22);
+	React.useImperativeHandle(ref, () => ({
+		showItem(key_4) {
+			const shelf_1 = shelves.find((candidate) => candidate.items.some((item_1) => item_1.key === key_4));
+			const item_2 = shelf_1?.items.find((candidate_0) => candidate_0.key === key_4);
+			if (!shelf_1 || !item_2) return;
+			const pathname_3 = item_2.kind === "block" ? localized(blockCatalogPath(item_2.block._internal.id)) : pageSlots.get(key_4)?.pathname;
+			if (pathname_3 && pathname_3 !== selectedPath) {
+				navigate({ to: `${pathname_3}${location.search}${location.hash}` });
+				return;
+			}
+			if (collapsedShelves.has(shelf_1.key)) toggleShelf(shelf_1.key);
+			setPendingFlight(key_4);
+		},
+		showWholeCanvas() {
+			selectPage(localized(STUDIO_CANVAS_PATH));
+			fitAll();
+		}
+	}));
+	const t23 = "region";
+	const t24 = "Page canvas";
+	const t25 = 0;
+	const t26 = true;
+	const t27 = "bg-muted relative min-h-0 min-w-0 flex-1 touch-none overflow-clip outline-none *:*:[--canvas-x:initial] *:*:[--canvas-y:initial] data-[canvas-pan]:cursor-grab data-[canvas-pan]:**:cursor-[inherit]! data-[canvas-pan=dragging]:cursor-grabbing data-[canvas-pan]:[&_iframe]:pointer-events-none";
+	let t28;
+	if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+		t28 = {
+			userSelect: "none",
+			overscrollBehavior: "none"
+		};
+		$[49] = t28;
+	} else t28 = $[49];
+	const t29 = !!intendedItemKey;
+	let t30;
+	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = {
+			gap: 480,
+			transform: CANVAS_WORLD_TRANSFORM,
+			transformOrigin: "0 0"
+		};
+		$[50] = t30;
+	} else t30 = $[50];
+	const t31 = shelves.map((shelf_2) => {
+		if (!isCanvasShelfShown(shelf_2)) return null;
+		const collapsed = collapsedShelves.has(shelf_2.key) || shelf_2.items.length === 0;
+		return /* @__PURE__ */ jsx("div", {
+			"data-canvas-shelf": shelf_2.key,
+			inert: collapsed,
+			className: `flex shrink-0 items-start ${collapsed ? "invisible w-0" : ""}`,
+			style: { gap: 240 },
+			children: (collapsed && shelf_2.unmountedWhenCollapsed ? [] : shelf_2.items).map((item_3) => {
+				if (item_3.kind === "block") return /* @__PURE__ */ jsx(CanvasBlockItem, {
+					itemKey: item_3.key,
+					block: item_3.block,
+					projectId,
+					runtimeBasePath,
+					viewport,
+					framed,
+					selected: item_3.block._internal.id === selectedBlock?._internal.id,
+					selectBlock: selectFrameBlock
+				}, item_3.key);
+				const slot = pageSlots.get(item_3.key);
+				if (!slot) return null;
+				const { page: page_0, pathname: pathname_4 } = slot;
+				return /* @__PURE__ */ jsx(CanvasPageItem, {
+					page: page_0,
+					pathname: pathname_4,
+					selected: page_0.key === selectedPage?.key,
+					hover,
+					previewed: !!previewPageFrame && page_0.key === previewedPage?.key && pathname_4 === previewedPath,
+					collapsed,
+					framed,
+					viewport,
+					runtimeBasePath,
+					onActivate,
+					selectPage: selectFramePage
+				}, page_0.key);
+			})
+		}, shelf_2.key);
+	});
+	let t32;
+	if ($[51] !== contentRef || $[52] !== t31) {
+		t32 = /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			"data-canvas-items": true,
+			className: "absolute top-0 left-0 flex w-max items-start in-data-[canvas-promoted]:will-change-transform",
+			style: t30,
+			children: t31
+		});
+		$[51] = contentRef;
+		$[52] = t31;
+		$[53] = t32;
+	} else t32 = $[53];
+	let t33;
+	if ($[54] !== t29 || $[55] !== t32) {
+		t33 = /* @__PURE__ */ jsx(CanvasOverlaysShownContext, {
+			value: t29,
+			children: t32
+		});
+		$[54] = t29;
+		$[55] = t32;
+		$[56] = t33;
+	} else t33 = $[56];
+	let t34;
+	if ($[57] !== t33 || $[58] !== thumbnails) {
+		t34 = /* @__PURE__ */ jsx(CanvasThumbnailsContext, {
+			value: thumbnails,
+			children: t33
+		});
+		$[57] = t33;
+		$[58] = thumbnails;
+		$[59] = t34;
+	} else t34 = $[59];
+	let t35;
+	if ($[60] !== t34 || $[61] !== workspace) {
+		t35 = /* @__PURE__ */ jsx(CanvasWorkspaceContext, {
+			value: workspace,
+			children: t34
+		});
+		$[60] = t34;
+		$[61] = workspace;
+		$[62] = t35;
+	} else t35 = $[62];
+	let t36;
+	if ($[63] !== toggleShelf) {
+		t36 = (marker_0) => {
+			if (!marker_0.collapsed) collapsingShelf.current = marker_0.key;
+			toggleShelf(marker_0.key);
+		};
+		$[63] = toggleShelf;
+		$[64] = t36;
+	} else t36 = $[64];
+	let t37;
+	if ($[65] !== markers || $[66] !== t36) {
+		t37 = /* @__PURE__ */ jsx(CanvasShelfMarkers, {
+			markers,
+			onToggle: t36
+		});
+		$[65] = markers;
+		$[66] = t36;
+		$[67] = t37;
+	} else t37 = $[67];
+	const t39 = [...pageSlots.values()].map((t38) => {
+		const { page: page_1, pathname: pathname_5, left } = t38;
+		return left === void 0 ? null : /* @__PURE__ */ jsx(CanvasHeaderSlot, {
+			itemKey: page_1.key,
+			left,
+			children: /* @__PURE__ */ jsx(CanvasPageHeader, {
+				page: page_1,
+				pathname: pathname_5,
+				onRename: page_1.kind === "curated" ? (nickname) => renamePage(page_1.pageId, nickname) : void 0,
+				selected: page_1.key === selectedPage?.key,
+				onHoverChange: (hovered) => hover.send({
+					type: "set",
+					pageKey: hovered ? page_1.key : null
+				}),
+				onSelect: () => {
+					if (!pathname_5) return;
+					selectPage(pathname_5);
+				},
+				onChange: (path) => {
+					const inLocale = localized(path);
+					setPreviewPathnames((current) => ({
+						...current,
+						[page_1.key]: inLocale
+					}));
+					selectPage(inLocale);
+				}
+			})
+		}, page_1.key);
+	});
+	let t40;
+	if ($[68] !== projectId || $[69] !== selectBlock) {
+		t40 = (t41) => {
+			const { key: key_5, left: left_0, block: block_2 } = t41;
+			return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
+				itemKey: key_5,
+				left: left_0,
+				children: /* @__PURE__ */ jsx(CanvasBlockUsageHeader, {
+					projectId,
+					block: block_2,
+					onSelect: () => selectBlock(block_2)
+				})
+			}, key_5);
+		};
+		$[68] = projectId;
+		$[69] = selectBlock;
+		$[70] = t40;
+	} else t40 = $[70];
+	const t41 = items.filter(isCanvasBlock).map(t40);
+	let t42;
+	if ($[71] !== pages.length) {
+		t42 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
+		$[71] = pages.length;
+		$[72] = t42;
+	} else t42 = $[72];
+	let t43;
+	if ($[73] !== instructionsId) {
+		t43 = /* @__PURE__ */ jsx("p", {
+			id: instructionsId,
+			className: "sr-only",
+			children: "Scroll, or hold Space and drag, to pan. Pinch or Ctrl/⌘ + scroll to zoom. Click a page to edit it. Focus the canvas and use plus or minus to zoom, arrow keys to pan, 0 for 100%, or Home / Shift+1 to fit all pages."
+		});
+		$[73] = instructionsId;
+		$[74] = t43;
+	} else t43 = $[74];
+	let t44;
+	if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
+		t44 = { zIndex: 2 };
+		$[75] = t44;
+	} else t44 = $[75];
+	let t45;
+	if ($[76] !== snapRingRef) {
+		t45 = /* @__PURE__ */ jsx("div", {
+			ref: snapRingRef,
+			"aria-hidden": true,
+			"data-canvas-snap-ring": true,
+			className: "ring-primary pointer-events-none absolute inset-0 opacity-0 ring-3 ring-inset",
+			style: t44
+		});
+		$[76] = snapRingRef;
+		$[77] = t45;
+	} else t45 = $[77];
+	let t46;
+	if ($[78] !== instructionsId || $[79] !== t28 || $[80] !== t35 || $[81] !== t37 || $[82] !== t39 || $[83] !== t41 || $[84] !== t42 || $[85] !== t43 || $[86] !== t45 || $[87] !== viewportRef) {
+		t46 = /* @__PURE__ */ jsxs("div", {
+			ref: viewportRef,
+			role: t23,
+			"aria-label": t24,
+			"aria-describedby": instructionsId,
+			tabIndex: t25,
+			"data-camox-canvas": t26,
+			className: t27,
+			style: t28,
+			children: [
+				t35,
+				t37,
+				t39,
+				t41,
+				t42,
+				t43,
+				t45
+			]
+		});
+		$[78] = instructionsId;
+		$[79] = t28;
+		$[80] = t35;
+		$[81] = t37;
+		$[82] = t39;
+		$[83] = t41;
+		$[84] = t42;
+		$[85] = t43;
+		$[86] = t45;
+		$[87] = viewportRef;
+		$[88] = t46;
+	} else t46 = $[88];
+	return t46;
+}
+function _temp4(item_0) {
+	return [item_0.key, item_0.block];
+}
+function _temp3(item) {
+	return [item.key, item.left];
+}
+function CamoxCanvas(t0) {
+	const $ = c(60);
+	const { runtimeBasePath } = t0;
+	const app = useCamoxApp();
+	const renamePage = useRenamePage();
+	const location = useLocation();
+	const viewportMode = useSelector(previewStore, _temp5);
+	const viewport = CANVAS_DEVICES[viewportMode === "full" ? "desktop" : viewportMode];
+	const [activeFrame, setActiveFrame] = React.useState(null);
+	const selectedPath = location.pathname;
+	const previousPath = React.useRef(selectedPath);
+	let t1;
+	let t2;
+	if ($[0] !== activeFrame || $[1] !== selectedPath) {
+		t1 = () => {
+			if (previousPath.current === selectedPath) return;
+			previousPath.current = selectedPath;
+			if (!activeFrame || activeFrame.pathname === selectedPath) return;
+			activeFrame.release();
+			setActiveFrame(null);
+		};
+		t2 = [activeFrame, selectedPath];
+		$[0] = activeFrame;
+		$[1] = selectedPath;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[4] = t3;
+	} else t3 = $[4];
+	React.useEffect(_temp7, t3);
+	const projectUuid = useProjectUuid();
+	let t4;
+	if ($[5] !== projectUuid) {
+		t4 = reads.project({ projectUuid });
+		$[5] = projectUuid;
+		$[6] = t4;
+	} else t4 = $[6];
+	const project = useReadQuery(t4);
+	let t5;
+	if ($[7] !== projectUuid) {
+		t5 = reads.pageList({ projectUuid });
+		$[7] = projectUuid;
+		$[8] = t5;
+	} else t5 = $[8];
+	const t6 = !!project.data;
+	let t7;
+	if ($[9] !== t6) {
+		t7 = { enabled: t6 };
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	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 selectionAt = (runtimePath) => {
+		const pathname = parseLocalePath(runtimePath, viewLocale.locales).path;
+		if (pathname === "/camox/canvas") return {};
+		const blockId = matchBlockCatalogPath(pathname);
+		if (!blockId) return { page: selectedCanvasPage(canvasPages, app.getLayouts(), runtimePath, viewLocale.locales) };
+		const block = app.getBlockById(blockId);
+		return { block: block && !block._internal.layoutOnly ? block : void 0 };
+	};
+	const { page: selectedPage, block: selectedBlock } = selectionAt(location.pathname);
+	const previewedPath = React.use(PreviewPageFrameContext)?.pathname;
+	const previewedPage = previewedPath ? selectionAt(previewedPath).page : void 0;
+	const [intent, setIntent] = React.useState(null);
+	if (intent && intent.from !== location.pathname) setIntent(null);
+	const intended = intent?.from === location.pathname ? intent.to : location;
+	const intendedSelection = selectionAt(intended.pathname);
+	const navigate = useNavigate();
+	const workspace = React.useRef(null);
+	let t8;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { enabled: false };
+		$[11] = t8;
+	} else t8 = $[11];
+	const { data: intendedFrameInput } = useReadQuery(reads.canvasFrame({
+		projectUuid,
+		runtimeBasePath,
+		pathname: intended.pathname,
+		derivedLayoutId: derivedLayoutIdOf(intendedSelection.page)
+	}), t8);
+	const recordResult = derivedLayoutIdOf(intendedSelection.page) ? intendedFrameInput?.derived?.result : void 0;
+	let t9;
+	if ($[12] !== recordResult) {
+		t9 = getPageRecord(recordResult);
+		$[12] = recordResult;
+		$[13] = t9;
+	} else t9 = $[13];
+	const pageRecord = t9;
+	usePreparationFailure((!project.isFetching ? project.error : null) ?? (!pages.isFetching ? pages.error : null));
+	const preparation = React.useContext(PreviewPreparationContext);
+	React.useEffect(() => {
+		if (project.isPending || pages.isPending || project.error || pages.error) return;
+		if (selectedBlock || parseLocalePath(location.pathname, viewLocale.locales).path === "/camox/canvas") {
+			preparation?.ready();
+			return;
+		}
+		if (selectedPage) return;
+		preparation?.fail(/* @__PURE__ */ new Error(`No canvas page matches ${location.pathname}.`));
+	}, [
+		project.isPending,
+		pages.isPending,
+		project.error,
+		pages.error,
+		selectedPage,
+		selectedBlock,
+		location.pathname,
+		viewLocale.locales,
+		preparation
+	]);
+	if (project.error || pages.error) {
+		let t10;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = /* @__PURE__ */ jsx("p", { children: "Could not load the site’s pages." });
+			$[14] = t10;
+		} else t10 = $[14];
+		let t11;
+		if ($[15] !== pages || $[16] !== project) {
+			t11 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				children: [t10, /* @__PURE__ */ jsx("button", {
+					className: "mt-4 underline",
+					onClick: () => {
+						if (project.error) project.refetch();
+						else pages.refetch();
+					},
+					children: "Try again"
+				})]
+			}) });
+			$[15] = pages;
+			$[16] = project;
+			$[17] = t11;
+		} else t11 = $[17];
+		return t11;
+	}
+	if (project.isPending || pages.isPending) {
+		let t10;
+		if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+			t10 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsx("span", {
+				role: "status",
+				children: "Loading canvas…"
+			}) });
+			$[18] = t10;
+		} else t10 = $[18];
+		return t10;
+	}
+	const editingOwner = activeFrame?.pathname === intended.pathname ? activeFrame.owner : null;
+	const blockCatalog = getBlockCatalog(app.getBlocks());
+	const intendedItemKey = intendedSelection.page?.key ?? (intendedSelection.block && canvasBlockKey(intendedSelection.block._internal.id));
+	const t10 = "flex min-h-0 flex-1 overflow-hidden";
+	const t11 = selectedPage?.kind === "curated" && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
+	const T0 = NavigationProvider;
+	const T1 = PageRecordContext;
+	const T2 = CanvasSidebar;
+	const t12 = intendedSelection.page;
+	const t13 = intendedSelection.block && {
+		block: intendedSelection.block,
+		projectId: project.data.id
+	};
+	const t14 = getCanvasShelves(canvasPages, blockCatalog);
+	let t15;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (key) => workspace.current?.showItem(key);
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== intendedItemKey || $[21] !== t14) {
+		t16 = {
+			shelves: t14,
+			selectedKey: intendedItemKey,
+			onShowItem: t15
+		};
+		$[20] = intendedItemKey;
+		$[21] = t14;
+		$[22] = t16;
+	} else t16 = $[22];
+	let t17;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => workspace.current?.showWholeCanvas();
+		$[23] = t17;
+	} else t17 = $[23];
+	let t18;
+	if ($[24] !== T2 || $[25] !== editingOwner || $[26] !== intendedSelection || $[27] !== pageRecord || $[28] !== renamePage || $[29] !== t13 || $[30] !== t16) {
+		t18 = /* @__PURE__ */ jsx(T2, {
+			page: t12,
+			catalog: t13,
+			navigator: t16,
+			onShowWholeCanvas: t17,
+			onRenamePage: renamePage,
+			owner: editingOwner,
+			pageRecord
+		});
+		$[24] = T2;
+		$[25] = editingOwner;
+		$[26] = intendedSelection;
+		$[27] = pageRecord;
+		$[28] = renamePage;
+		$[29] = t13;
+		$[30] = t16;
+		$[31] = t18;
+	} else t18 = $[31];
+	let t19;
+	if ($[32] !== T1 || $[33] !== recordResult || $[34] !== t18) {
+		t19 = /* @__PURE__ */ jsx(T1, {
+			value: recordResult,
+			children: t18
+		});
+		$[32] = T1;
+		$[33] = recordResult;
+		$[34] = t18;
+		$[35] = t19;
+	} else t19 = $[35];
+	let t20;
+	if ($[36] !== T0 || $[37] !== intended || $[38] !== navigate || $[39] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T0, {
+			location: intended,
+			navigate,
+			children: t19
+		});
+		$[36] = T0;
+		$[37] = intended;
+		$[38] = navigate;
+		$[39] = t19;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = (pathname_0, owner, release) => setActiveFrame({
+			pathname: pathname_0,
+			owner,
+			release
+		});
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== location || $[43] !== setIntent) {
+		t22 = (pathname_1) => setIntent({
+			from: location.pathname,
+			to: {
+				...location,
+				pathname: pathname_1,
+				href: new URL(`${pathname_1}${location.search}${location.hash}`, window.location.href).href
+			}
+		});
+		$[42] = location;
+		$[43] = setIntent;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	if ($[45] !== blockCatalog || $[46] !== canvasPages || $[47] !== intendedItemKey || $[48] !== previewedPage || $[49] !== project.data.id || $[50] !== runtimeBasePath || $[51] !== selectedBlock || $[52] !== selectedPage || $[53] !== t22 || $[54] !== viewport) {
+		t23 = /* @__PURE__ */ jsx(CanvasWorkspace, {
+			ref: workspace,
+			projectId: project.data.id,
+			pages: canvasPages,
+			blocks: blockCatalog,
+			selectedPage,
+			selectedBlock,
+			previewedPage,
+			intendedItemKey,
+			runtimeBasePath,
+			viewport,
+			onActivate: t21,
+			onSelectionIntent: t22
+		}, project.data.id);
+		$[45] = blockCatalog;
+		$[46] = canvasPages;
+		$[47] = intendedItemKey;
+		$[48] = previewedPage;
+		$[49] = project.data.id;
+		$[50] = runtimeBasePath;
+		$[51] = selectedBlock;
+		$[52] = selectedPage;
+		$[53] = t22;
+		$[54] = viewport;
+		$[55] = t23;
+	} else t23 = $[55];
+	let t24;
+	if ($[56] !== t11 || $[57] !== t20 || $[58] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [
+				t11,
+				t20,
+				t23
+			]
+		});
+		$[56] = t11;
+		$[57] = t20;
+		$[58] = t23;
+		$[59] = t24;
+	} else t24 = $[59];
+	return t24;
+}
+function _temp7() {
+	previewStore.send({ type: "clearSelection" });
+	return _temp6;
+}
+function _temp6() {
+	previewStore.send({ type: "clearSelection" });
+}
+function _temp5(state) {
+	return state.context.viewportMode;
+}
+
+//#endregion
+export { CamoxCanvas };