camox 0.44.0 → 0.46.0

package/dist/features/canvas/CamoxCanvas.js

@@ -0,0 +1,1401 @@
+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 } from "./canvasStore.js";
+import { STUDIO_CANVAS_PATH } 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 { CANVAS_DEVICES, canvasLayoutId, canvasPageId, derivedLayoutIdOf, getCanvasPages } from "./canvasPages.js";
+import { CANVAS_SLOT_WIDTH, canvasSnapTargets, positionCanvasPages } 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 { CanvasSidebar } from "./sidebar/CanvasSidebar.js";
+import { useCanvasCamera } from "./useCanvasCamera.js";
+import { useCanvasNearness } from "./useCanvasNearness.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
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			children: [
+				/* @__PURE__ */ jsx("p", { children: "This page 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 Page's area in the Canvas row, with its frame. */
+function CanvasPageItem(t0) {
+	const $ = c(39);
+	const { page, pathname, selected, previewed, 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] !== framed || $[12] !== hovered || $[13] !== onPageActivate || $[14] !== page || $[15] !== pathname || $[16] !== previewed || $[17] !== runtimeBasePath || $[18] !== selectPage || $[19] !== selected || $[20] !== viewport) {
+		t5 = previewed ? /* @__PURE__ */ jsx(CanvasPreviewPageSlot, {
+			pageId: canvasPageId(page),
+			layoutId: canvasLayoutId(page),
+			width: viewport.width,
+			viewportHeight: viewport.height,
+			selected,
+			hovered,
+			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] = framed;
+		$[12] = hovered;
+		$[13] = onPageActivate;
+		$[14] = page;
+		$[15] = pathname;
+		$[16] = previewed;
+		$[17] = runtimeBasePath;
+		$[18] = selectPage;
+		$[19] = selected;
+		$[20] = viewport;
+		$[21] = t5;
+	} else t5 = $[21];
+	let t6;
+	if ($[22] !== pathname || $[23] !== selected || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsx(CanvasFrameBoundary, {
+			selected,
+			children: t5
+		}, pathname);
+		$[22] = pathname;
+		$[23] = selected;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[26] !== framed) {
+		t7 = /* @__PURE__ */ jsx(CanvasPageEdge, { shaded: framed });
+		$[26] = framed;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== page.key || $[29] !== pathname || $[30] !== t3 || $[31] !== t4 || $[32] !== t6 || $[33] !== 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]
+		});
+		$[28] = page.key;
+		$[29] = pathname;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = t8;
+	} else t8 = $[34];
+	let t9;
+	if ($[35] !== framed || $[36] !== page.key || $[37] !== t8) {
+		t9 = /* @__PURE__ */ jsx(CanvasSlot, {
+			itemKey: page.key,
+			framed,
+			children: t8
+		});
+		$[35] = framed;
+		$[36] = page.key;
+		$[37] = t8;
+		$[38] = t9;
+	} else t9 = $[38];
+	return t9;
+}
+/** 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(44);
+	const { ref, pages, selectedPage, previewedPage, intendedPageKey, 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 goTo = t1;
+	let t2;
+	if ($[5] !== follow || $[6] !== goTo) {
+		t2 = (pathname_0) => {
+			follow?.takeOver();
+			goTo(pathname_0);
+		};
+		$[5] = follow;
+		$[6] = goTo;
+		$[7] = t2;
+	} else t2 = $[7];
+	const selectPage = t2;
+	const latestSelectPage = React.useRef(selectPage);
+	let t3;
+	if ($[8] !== selectPage) {
+		t3 = () => {
+			latestSelectPage.current = selectPage;
+		};
+		$[8] = selectPage;
+		$[9] = t3;
+	} else t3 = $[9];
+	React.useLayoutEffect(t3);
+	const selectFramePage = (pathname_1) => latestSelectPage.current(pathname_1);
+	let t4;
+	if ($[10] !== apiUrl || $[11] !== projectUuid || $[12] !== runtimeBasePath) {
+		t4 = JSON.stringify([
+			apiUrl,
+			projectUuid,
+			runtimeBasePath
+		]);
+		$[10] = apiUrl;
+		$[11] = projectUuid;
+		$[12] = runtimeBasePath;
+		$[13] = t4;
+	} else t4 = $[13];
+	const workspaceKey = t4;
+	let t5;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {};
+		$[14] = t5;
+	} else t5 = $[14];
+	const [previewPathnames, setPreviewPathnames] = React.useState(t5);
+	const { items, width } = positionCanvasPages(pages);
+	let t6;
+	if ($[15] !== previewPathnames || $[16] !== previewedPage?.key || $[17] !== previewedPath || $[18] !== selectedPage?.key || $[19] !== selectedPath) {
+		t6 = (t7) => {
+			const { key, page, left } = t7;
+			return [key, {
+				page,
+				left,
+				pathname: key === selectedPage?.key ? selectedPath : previewedPath && key === previewedPage?.key ? previewedPath : previewPathnames[key] ?? page.pathname
+			}];
+		};
+		$[15] = previewPathnames;
+		$[16] = previewedPage?.key;
+		$[17] = previewedPath;
+		$[18] = selectedPage?.key;
+		$[19] = selectedPath;
+		$[20] = t6;
+	} else t6 = $[20];
+	const pageSlots = new Map(items.map(t6));
+	const framed = viewport.width < CANVAS_SLOT_WIDTH;
+	const snapTargets = canvasSnapTargets(items);
+	const snapRingRef = React.useRef(null);
+	const snapFlash = React.useRef(null);
+	let t7;
+	if ($[21] !== selectedPage?.key) {
+		t7 = (t8) => {
+			const { key: key_0 } = t8;
+			return key_0 === selectedPage?.key;
+		};
+		$[21] = selectedPage?.key;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== goTo || $[24] !== localized) {
+		t8 = () => goTo(localized(STUDIO_CANVAS_PATH));
+		$[23] = goTo;
+		$[24] = localized;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== follow) {
+		t9 = () => follow?.takeOver();
+		$[26] = follow;
+		$[27] = t9;
+	} else t9 = $[27];
+	const { viewportRef, contentRef, flyTo, mirrorCamera, reveal, fitAll } = useCanvasCamera(workspaceKey, snapTargets.find(t7), {
+		targets: snapTargets,
+		width,
+		onSelect: (key_1) => {
+			const pathname_2 = pageSlots.get(key_1)?.pathname;
+			if (pathname_2) selectPage(pathname_2);
+		},
+		selected: intendedPageKey && pageSlots.has(intendedPageKey) ? intendedPageKey : null,
+		onDeselect: t8,
+		onSnap: () => {
+			snapFlash.current = snapRingRef.current?.animate(SNAP_FLASH_KEYFRAMES, SNAP_FLASH_TIMING) ?? null;
+		},
+		onSnapStretched: () => snapFlash.current?.cancel(),
+		onEditorMove: t9
+	});
+	let t10;
+	if ($[28] !== mirrorCamera || $[29] !== reveal || $[30] !== workspaceKey) {
+		t10 = {
+			workspaceKey,
+			mirrorCamera,
+			reveal
+		};
+		$[28] = mirrorCamera;
+		$[29] = reveal;
+		$[30] = workspaceKey;
+		$[31] = t10;
+	} else t10 = $[31];
+	const workspace = t10;
+	const thumbnails = useWorkspaceThumbnails(workspaceKey);
+	const instructionsId = React.useId();
+	let t11;
+	let t12;
+	if ($[32] !== fitAll) {
+		t11 = () => {
+			let answered = canvasStore.getSnapshot().context.overviewRequests;
+			const subscription = canvasStore.subscribe((t13) => {
+				const { context } = t13;
+				if (context.overviewRequests === answered) return;
+				answered = context.overviewRequests;
+				fitAll();
+			});
+			return () => subscription.unsubscribe();
+		};
+		t12 = [fitAll];
+		$[32] = fitAll;
+		$[33] = t11;
+		$[34] = t12;
+	} else {
+		t11 = $[33];
+		t12 = $[34];
+	}
+	React.useEffect(t11, t12);
+	React.useImperativeHandle(ref, () => ({
+		showPage(key_2) {
+			const slot = pageSlots.get(key_2);
+			if (!slot) return;
+			if (slot.pathname && slot.pathname !== selectedPath) {
+				navigate({ to: `${slot.pathname}${location.search}${location.hash}` });
+				return;
+			}
+			flyTo(key_2);
+		},
+		showWholeCanvas() {
+			selectPage(localized(STUDIO_CANVAS_PATH));
+			fitAll();
+		}
+	}));
+	let t13;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = {
+			userSelect: "none",
+			overscrollBehavior: "none"
+		};
+		$[35] = t13;
+	} else t13 = $[35];
+	let t14;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {
+			gap: 240,
+			transform: CANVAS_WORLD_TRANSFORM,
+			transformOrigin: "0 0"
+		};
+		$[36] = t14;
+	} else t14 = $[36];
+	let t17;
+	if ($[37] !== pages.length) {
+		t17 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
+		$[37] = pages.length;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== instructionsId) {
+		t18 = /* @__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."
+		});
+		$[39] = instructionsId;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = { zIndex: 2 };
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== snapRingRef) {
+		t20 = /* @__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: t19
+		});
+		$[42] = snapRingRef;
+		$[43] = t20;
+	} else t20 = $[43];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: viewportRef,
+		role: "region",
+		"aria-label": "Page canvas",
+		"aria-describedby": instructionsId,
+		tabIndex: 0,
+		"data-camox-canvas": true,
+		className: "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",
+		style: t13,
+		children: [
+			/* @__PURE__ */ jsx(CanvasWorkspaceContext, {
+				value: workspace,
+				children: /* @__PURE__ */ jsx(CanvasThumbnailsContext, {
+					value: thumbnails,
+					children: /* @__PURE__ */ jsx(CanvasOverlaysShownContext, {
+						value: !!intendedPageKey,
+						children: /* @__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: t14,
+							children: [...pageSlots.values()].map((t15) => {
+								const { page: page_0, pathname: pathname_3 } = t15;
+								return /* @__PURE__ */ jsx(CanvasPageItem, {
+									page: page_0,
+									pathname: pathname_3,
+									selected: page_0.key === selectedPage?.key,
+									hover,
+									previewed: !!previewPageFrame && page_0.key === previewedPage?.key && pathname_3 === previewedPath,
+									framed,
+									viewport,
+									runtimeBasePath,
+									onActivate,
+									selectPage: selectFramePage
+								}, page_0.key);
+							})
+						})
+					})
+				})
+			}),
+			[...pageSlots.values()].map((t16) => {
+				const { page: page_1, pathname: pathname_4, left: left_0 } = t16;
+				return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
+					itemKey: page_1.key,
+					left: left_0,
+					children: /* @__PURE__ */ jsx(CanvasPageHeader, {
+						page: page_1,
+						pathname: pathname_4,
+						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_4) return;
+							selectPage(pathname_4);
+						},
+						onChange: (path) => {
+							const inLocale = localized(path);
+							setPreviewPathnames((current) => ({
+								...current,
+								[page_1.key]: inLocale
+							}));
+							selectPage(inLocale);
+						}
+					})
+				}, page_1.key);
+			}),
+			t17,
+			t18,
+			t20
+		]
+	});
+}
+function CamoxCanvas(t0) {
+	const $ = c(68);
+	const { runtimeBasePath } = t0;
+	const app = useCamoxApp();
+	const renamePage = useRenamePage();
+	const location = useLocation();
+	const viewportMode = useSelector(previewStore, _temp3);
+	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(_temp5, 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) : [];
+	let t8;
+	if ($[11] !== viewLocale.locales) {
+		t8 = (runtimePath) => parseLocalePath(runtimePath, viewLocale.locales).path === STUDIO_CANVAS_PATH;
+		$[11] = viewLocale.locales;
+		$[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 selectedPage = pageAt(location.pathname);
+	const previewedPath = React.use(PreviewPageFrameContext)?.pathname;
+	const previewedPage = previewedPath ? pageAt(previewedPath) : 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 intendedPage = pageAt(intended.pathname);
+	const navigate = useNavigate();
+	const workspace = React.useRef(null);
+	let t9;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = { enabled: false };
+		$[13] = t9;
+	} else t9 = $[13];
+	const { data: intendedFrameInput } = useReadQuery(reads.canvasFrame({
+		projectUuid,
+		runtimeBasePath,
+		pathname: intended.pathname,
+		derivedLayoutId: derivedLayoutIdOf(intendedPage)
+	}), t9);
+	const recordResult = derivedLayoutIdOf(intendedPage) ? intendedFrameInput?.derived?.result : void 0;
+	let t10;
+	if ($[14] !== recordResult) {
+		t10 = getPageRecord(recordResult);
+		$[14] = recordResult;
+		$[15] = t10;
+	} else t10 = $[15];
+	const pageRecord = t10;
+	usePreparationFailure((!project.isFetching ? project.error : null) ?? (!pages.isFetching ? pages.error : null));
+	const preparation = React.useContext(PreviewPreparationContext);
+	let t11;
+	let t12;
+	if ($[16] !== location.pathname || $[17] !== pages.error || $[18] !== pages.isPending || $[19] !== preparation || $[20] !== project.error || $[21] !== project.isPending || $[22] !== selectedPage || $[23] !== viewLocale.locales) {
+		t11 = () => {
+			if (project.isPending || pages.isPending || project.error || pages.error) return;
+			if (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}.`));
+		};
+		t12 = [
+			project.isPending,
+			pages.isPending,
+			project.error,
+			pages.error,
+			selectedPage,
+			location.pathname,
+			viewLocale.locales,
+			preparation
+		];
+		$[16] = location.pathname;
+		$[17] = pages.error;
+		$[18] = pages.isPending;
+		$[19] = preparation;
+		$[20] = project.error;
+		$[21] = project.isPending;
+		$[22] = selectedPage;
+		$[23] = viewLocale.locales;
+		$[24] = t11;
+		$[25] = t12;
+	} else {
+		t11 = $[24];
+		t12 = $[25];
+	}
+	React.useEffect(t11, t12);
+	if (project.error || pages.error) {
+		let t13;
+		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = /* @__PURE__ */ jsx("p", { children: "Could not load the site’s pages." });
+			$[26] = t13;
+		} else t13 = $[26];
+		let t14;
+		if ($[27] !== pages || $[28] !== project) {
+			t14 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				children: [t13, /* @__PURE__ */ jsx("button", {
+					className: "mt-4 underline",
+					onClick: () => {
+						if (project.error) project.refetch();
+						else pages.refetch();
+					},
+					children: "Try again"
+				})]
+			}) });
+			$[27] = pages;
+			$[28] = project;
+			$[29] = t14;
+		} else t14 = $[29];
+		return t14;
+	}
+	if (project.isPending || pages.isPending) {
+		let t13;
+		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+			t13 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsx("span", {
+				role: "status",
+				children: "Loading canvas…"
+			}) });
+			$[30] = t13;
+		} else t13 = $[30];
+		return t13;
+	}
+	const editingOwner = activeFrame?.pathname === intended.pathname ? activeFrame.owner : null;
+	let t13;
+	if ($[31] !== selectedPage?.kind) {
+		t13 = selectedPage?.kind === "curated" && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
+		$[31] = selectedPage?.kind;
+		$[32] = t13;
+	} else t13 = $[32];
+	const t14 = intendedPage?.key;
+	let t15;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (key) => workspace.current?.showPage(key);
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== canvasPages || $[35] !== t14) {
+		t16 = {
+			pages: canvasPages,
+			selectedKey: t14,
+			onShowPage: t15
+		};
+		$[34] = canvasPages;
+		$[35] = t14;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = () => workspace.current?.showWholeCanvas();
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== renamePage || $[42] !== t16) {
+		t18 = /* @__PURE__ */ jsx(CanvasSidebar, {
+			page: intendedPage,
+			navigator: t16,
+			onShowWholeCanvas: t17,
+			onRenamePage: renamePage,
+			owner: editingOwner,
+			pageRecord
+		});
+		$[38] = editingOwner;
+		$[39] = intendedPage;
+		$[40] = pageRecord;
+		$[41] = renamePage;
+		$[42] = t16;
+		$[43] = t18;
+	} else t18 = $[43];
+	let t19;
+	if ($[44] !== recordResult || $[45] !== t18) {
+		t19 = /* @__PURE__ */ jsx(PageRecordContext, {
+			value: recordResult,
+			children: t18
+		});
+		$[44] = recordResult;
+		$[45] = t18;
+		$[46] = t19;
+	} else t19 = $[46];
+	let t20;
+	if ($[47] !== intended || $[48] !== navigate || $[49] !== t19) {
+		t20 = /* @__PURE__ */ jsx(NavigationProvider, {
+			location: intended,
+			navigate,
+			children: t19
+		});
+		$[47] = intended;
+		$[48] = navigate;
+		$[49] = t19;
+		$[50] = t20;
+	} else t20 = $[50];
+	const t21 = intendedPage?.key;
+	let t22;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = (pathname, owner, release) => setActiveFrame({
+			pathname,
+			owner,
+			release
+		});
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== location || $[53] !== setIntent) {
+		t23 = (pathname_0) => setIntent({
+			from: location.pathname,
+			to: {
+				...location,
+				pathname: pathname_0,
+				href: new URL(`${pathname_0}${location.search}${location.hash}`, window.location.href).href
+			}
+		});
+		$[52] = location;
+		$[53] = setIntent;
+		$[54] = t23;
+	} else t23 = $[54];
+	let t24;
+	if ($[55] !== canvasPages || $[56] !== previewedPage || $[57] !== project.data.id || $[58] !== runtimeBasePath || $[59] !== selectedPage || $[60] !== t21 || $[61] !== t23 || $[62] !== viewport) {
+		t24 = /* @__PURE__ */ jsx(CanvasWorkspace, {
+			ref: workspace,
+			pages: canvasPages,
+			selectedPage,
+			previewedPage,
+			intendedPageKey: t21,
+			runtimeBasePath,
+			viewport,
+			onActivate: t22,
+			onSelectionIntent: t23
+		}, project.data.id);
+		$[55] = canvasPages;
+		$[56] = previewedPage;
+		$[57] = project.data.id;
+		$[58] = runtimeBasePath;
+		$[59] = selectedPage;
+		$[60] = t21;
+		$[61] = t23;
+		$[62] = viewport;
+		$[63] = t24;
+	} else t24 = $[63];
+	let t25;
+	if ($[64] !== t13 || $[65] !== t20 || $[66] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1 overflow-hidden",
+			children: [
+				t13,
+				t20,
+				t24
+			]
+		});
+		$[64] = t13;
+		$[65] = t20;
+		$[66] = t24;
+		$[67] = t25;
+	} else t25 = $[67];
+	return t25;
+}
+function _temp5() {
+	previewStore.send({ type: "clearSelection" });
+	return _temp4;
+}
+function _temp4() {
+	previewStore.send({ type: "clearSelection" });
+}
+function _temp3(state) {
+	return state.context.viewportMode;
+}
+
+//#endregion
+export { CamoxCanvas };