camox 0.77.0 → 0.78.0

package/dist/features/canvas/CamoxCanvas.js

@@ -9,6 +9,9 @@ import { useRoutableLayouts } from "../../lib/studio-definitions.js";
 import { useLocalizedPath } from "../../lib/view-locale.js";
 import { canvasStore } from "./canvasStore.js";
 import { previewStore } from "../preview/previewStore.js";
+import { CANVAS_DEVICES, canvasLayoutId, canvasPageId, derivedLayoutIdOf, getCanvasPages } from "./canvasPages.js";
+import { canvasSnapTargets, positionCanvasPages } from "./canvasItems.js";
+import { useCanvasLayout } from "./useCanvasLayout.js";
 import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { useRendererHost } from "../renderer/RendererFrames.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
@@ -19,8 +22,6 @@ import { PageRecordContext } 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, canvasItemGap, 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";
@@ -45,40 +46,13 @@ import { createStore as createStore$1 } from "@xstate/store";
 * The Canvas spans the studio under its sidebars, the Content Sidebar on its left and the Agent Sidebar on
 * its right: the camera frames and snaps Pages between them, and above the studio's bottom edge.
 */
-const CANVAS_INSETS = {
-	top: 0,
-	right: 265,
-	bottom: 8,
-	left: 265
-};
-function subscribeToWindowWidth(onChange) {
-	window.addEventListener("resize", onChange);
-	return () => window.removeEventListener("resize", onChange);
-}
-/**
-* The gap between Pages in the Canvas row. The Canvas spans the window, so the gap follows the
-* window's width. It reads the window from the first render, before the camera measures the Canvas.
-*/
-function useCanvasItemGap() {
-	const $ = c(2);
-	const windowWidth = React.useSyncExternalStore(subscribeToWindowWidth, _temp, _temp2);
-	const width = Math.max(0, windowWidth - CANVAS_INSETS.left - CANVAS_INSETS.right);
-	let t0;
-	if ($[0] !== width) {
-		t0 = canvasItemGap({
-			width,
-			height: 0
-		}, CANVAS_INSETS.right);
-		$[0] = width;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-function _temp2() {
-	return 0;
-}
-function _temp() {
-	return window.innerWidth;
+function canvasInsets(sidebarWidth) {
+	return {
+		top: 0,
+		right: sidebarWidth,
+		bottom: 8,
+		left: sidebarWidth
+	};
 }
 function usePreparationFailure(error, t0) {
 	const $ = c(5);
@@ -266,7 +240,7 @@ function CanvasPagePreview(props) {
 	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = (frame) => {
 			setSettledFrame(frame);
-			setSettles(_temp3);
+			setSettles(_temp);
 		};
 		$[22] = t6;
 	} else t6 = $[22];
@@ -290,7 +264,7 @@ function CanvasPagePreview(props) {
 				props.pathname,
 				props.pageId,
 				props.derivedLayoutId
-			].filter(_temp4);
+			].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);
@@ -395,10 +369,10 @@ function CanvasPagePreview(props) {
 	} else t13 = $[52];
 	return t13;
 }
-function _temp4(token) {
+function _temp2(token) {
 	return !!token;
 }
-function _temp3(count) {
+function _temp(count) {
 	return count + 1;
 }
 function CanvasPageFrameLoader(t0) {
@@ -518,8 +492,8 @@ function scrimGradient(towards, inset) {
 }
 /** 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;
+	const $ = c(12);
+	const { itemKey, left, width, children } = t0;
 	let t1;
 	if ($[0] !== left) {
 		t1 = canvasScreenX(left);
@@ -533,12 +507,13 @@ function CanvasHeaderSlot(t0) {
 	} 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];
+	if ($[3] !== width) {
+		t4 = canvasScreenLength(width);
+		$[3] = width;
+		$[4] = t4;
+	} else t4 = $[4];
 	let t5;
-	if ($[4] !== t3) {
+	if ($[5] !== t3 || $[6] !== t4) {
 		t5 = {
 			height: 52,
 			transform: t3,
@@ -546,22 +521,23 @@ function CanvasHeaderSlot(t0) {
 			willChange: "transform",
 			zIndex: 2
 		};
-		$[4] = t3;
-		$[5] = t5;
-	} else t5 = $[5];
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
 	let t6;
-	if ($[6] !== children || $[7] !== itemKey || $[8] !== t5) {
+	if ($[8] !== children || $[9] !== itemKey || $[10] !== 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];
+		$[8] = children;
+		$[9] = itemKey;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
 	return t6;
 }
 /** World-space room above and below a frame narrower than its area. */
@@ -572,21 +548,22 @@ const CANVAS_FRAMED_PADDING = 40;
 * shade of its own, with room above and below the frame.
 */
 function CanvasSlot(t0) {
-	const $ = c(7);
-	const { itemKey, framed, children } = t0;
+	const $ = c(8);
+	const { itemKey, width, framed, children } = t0;
 	const t1 = framed || void 0;
 	const t2 = framed ? CANVAS_FRAMED_PADDING : 0;
 	let t3;
-	if ($[0] !== t2) {
+	if ($[0] !== t2 || $[1] !== width) {
 		t3 = {
-			width: CANVAS_SLOT_WIDTH,
+			width,
 			paddingBlock: t2
 		};
 		$[0] = t2;
-		$[1] = t3;
-	} else t3 = $[1];
+		$[1] = width;
+		$[2] = t3;
+	} else t3 = $[2];
 	let t4;
-	if ($[2] !== children || $[3] !== itemKey || $[4] !== t1 || $[5] !== t3) {
+	if ($[3] !== children || $[4] !== itemKey || $[5] !== t1 || $[6] !== t3) {
 		t4 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-slot": itemKey,
 			"data-canvas-slot-shaded": t1,
@@ -594,12 +571,12 @@ function CanvasSlot(t0) {
 			style: t3,
 			children
 		});
-		$[2] = children;
-		$[3] = itemKey;
-		$[4] = t1;
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[3] = children;
+		$[4] = itemKey;
+		$[5] = t1;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
 	return t4;
 }
 /**
@@ -614,8 +591,8 @@ function createCanvasHover() {
 }
 /** 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;
+	const $ = c(40);
+	const { page, pathname, selected, previewed, slotWidth, framed, viewport, runtimeBasePath, onActivate, selectPage, hover } = t0;
 	let t1;
 	if ($[0] !== page.key) {
 		t1 = (state) => state.context.pageKey === page.key;
@@ -722,17 +699,19 @@ function CanvasPageItem(t0) {
 		$[34] = t8;
 	} else t8 = $[34];
 	let t9;
-	if ($[35] !== framed || $[36] !== page.key || $[37] !== t8) {
+	if ($[35] !== framed || $[36] !== page.key || $[37] !== slotWidth || $[38] !== t8) {
 		t9 = /* @__PURE__ */ jsx(CanvasSlot, {
 			itemKey: page.key,
+			width: slotWidth,
 			framed,
 			children: t8
 		});
 		$[35] = framed;
 		$[36] = page.key;
-		$[37] = t8;
-		$[38] = t9;
-	} else t9 = $[38];
+		$[37] = slotWidth;
+		$[38] = t8;
+		$[39] = t9;
+	} else t9 = $[39];
 	return t9;
 }
 /** Gives a Page a new nickname, keeping its path. */
@@ -831,8 +810,8 @@ function useWorkspaceThumbnails(workspaceKey) {
 	return thumbnails;
 }
 function CanvasWorkspace(t0) {
-	const $ = c(43);
-	const { ref, pages, selectedPage, previewedPage, intendedPageKey, runtimeBasePath, viewport, onActivate, onSelectionIntent } = t0;
+	const $ = c(46);
+	const { ref, pages, selectedPage, previewedPage, intendedPageKey, runtimeBasePath, device, onActivate, onSelectionIntent } = t0;
 	const { apiUrl, projectUuid } = useAuthContext();
 	const renamePage = useRenamePage();
 	const location = useLocation();
@@ -900,51 +879,62 @@ function CanvasWorkspace(t0) {
 		$[14] = t5;
 	} else t5 = $[14];
 	const [previewPathnames, setPreviewPathnames] = React.useState(t5);
-	const gap = useCanvasItemGap();
-	const { items, width } = positionCanvasPages(pages, gap);
+	const { sidebarWidth, slotWidth, gap } = useCanvasLayout();
 	let t6;
-	if ($[15] !== previewPathnames || $[16] !== previewedPage?.key || $[17] !== previewedPath || $[18] !== selectedPage?.key || $[19] !== selectedPath) {
-		t6 = (t7) => {
-			const { key, page, left } = t7;
+	if ($[15] !== sidebarWidth) {
+		t6 = canvasInsets(sidebarWidth);
+		$[15] = sidebarWidth;
+		$[16] = t6;
+	} else t6 = $[16];
+	const insets = t6;
+	const { items, width } = positionCanvasPages(pages, gap, slotWidth);
+	const viewport = device === "desktop" ? {
+		width: slotWidth,
+		height: CANVAS_DEVICES.desktop.height
+	} : CANVAS_DEVICES[device];
+	let t7;
+	if ($[17] !== previewPathnames || $[18] !== previewedPage?.key || $[19] !== previewedPath || $[20] !== selectedPage?.key || $[21] !== selectedPath) {
+		t7 = (t8) => {
+			const { key, page, left } = t8;
 			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);
-	let t7;
-	if ($[21] !== selectedPage?.key) {
-		t7 = (t8) => {
-			const { key: key_0 } = t8;
-			return key_0 === selectedPage?.key;
-		};
-		$[21] = selectedPage?.key;
+		$[17] = previewPathnames;
+		$[18] = previewedPage?.key;
+		$[19] = previewedPath;
+		$[20] = selectedPage?.key;
+		$[21] = selectedPath;
 		$[22] = t7;
 	} else t7 = $[22];
+	const pageSlots = new Map(items.map(t7));
+	const framed = viewport.width < slotWidth;
+	const snapTargets = canvasSnapTargets(items);
 	let t8;
-	if ($[23] !== goTo || $[24] !== localized) {
-		t8 = () => goTo(localized(STUDIO_CANVAS_PATH));
-		$[23] = goTo;
-		$[24] = localized;
-		$[25] = t8;
-	} else t8 = $[25];
+	if ($[23] !== selectedPage?.key) {
+		t8 = (t9) => {
+			const { key: key_0 } = t9;
+			return key_0 === selectedPage?.key;
+		};
+		$[23] = selectedPage?.key;
+		$[24] = t8;
+	} else t8 = $[24];
 	let t9;
-	if ($[26] !== follow) {
-		t9 = () => follow?.takeOver();
-		$[26] = follow;
+	if ($[25] !== goTo || $[26] !== localized) {
+		t9 = () => goTo(localized(STUDIO_CANVAS_PATH));
+		$[25] = goTo;
+		$[26] = localized;
 		$[27] = t9;
 	} else t9 = $[27];
-	const { viewportRef, contentRef, flyTo, mirrorCamera, reveal, fitAll } = useCanvasCamera(workspaceKey, snapTargets.find(t7), {
+	let t10;
+	if ($[28] !== follow) {
+		t10 = () => follow?.takeOver();
+		$[28] = follow;
+		$[29] = t10;
+	} else t10 = $[29];
+	const { viewportRef, contentRef, flyTo, mirrorCamera, reveal, fitAll } = useCanvasCamera(workspaceKey, snapTargets.find(t8), {
 		targets: snapTargets,
 		width,
 		onSelect: (key_1) => {
@@ -952,47 +942,47 @@ function CanvasWorkspace(t0) {
 			if (pathname_2) selectPage(pathname_2);
 		},
 		selected: intendedPageKey && pageSlots.has(intendedPageKey) ? intendedPageKey : null,
-		onDeselect: t8,
-		insets: CANVAS_INSETS,
-		onEditorMove: t9
+		onDeselect: t9,
+		insets,
+		onEditorMove: t10
 	});
-	let t10;
-	if ($[28] !== mirrorCamera || $[29] !== reveal || $[30] !== workspaceKey) {
-		t10 = {
+	let t11;
+	if ($[30] !== mirrorCamera || $[31] !== reveal || $[32] !== workspaceKey) {
+		t11 = {
 			workspaceKey,
 			mirrorCamera,
 			reveal
 		};
-		$[28] = mirrorCamera;
-		$[29] = reveal;
-		$[30] = workspaceKey;
-		$[31] = t10;
-	} else t10 = $[31];
-	const workspace = t10;
+		$[30] = mirrorCamera;
+		$[31] = reveal;
+		$[32] = workspaceKey;
+		$[33] = t11;
+	} else t11 = $[33];
+	const workspace = t11;
 	const thumbnails = useWorkspaceThumbnails(workspaceKey);
 	const instructionsId = React.useId();
-	let t11;
 	let t12;
-	if ($[32] !== fitAll) {
-		t11 = () => {
+	let t13;
+	if ($[34] !== fitAll) {
+		t12 = () => {
 			let answered = canvasStore.getSnapshot().context.overviewRequests;
-			const subscription = canvasStore.subscribe((t13) => {
-				const { context } = t13;
+			const subscription = canvasStore.subscribe((t14) => {
+				const { context } = t14;
 				if (context.overviewRequests === answered) return;
 				answered = context.overviewRequests;
 				fitAll();
 			});
 			return () => subscription.unsubscribe();
 		};
-		t12 = [fitAll];
-		$[32] = fitAll;
-		$[33] = t11;
-		$[34] = t12;
+		t13 = [fitAll];
+		$[34] = fitAll;
+		$[35] = t12;
+		$[36] = t13;
 	} else {
-		t11 = $[33];
-		t12 = $[34];
+		t12 = $[35];
+		t13 = $[36];
 	}
-	React.useEffect(t11, t12);
+	React.useEffect(t12, t13);
 	React.useImperativeHandle(ref, () => ({
 		showPage(key_2) {
 			const slot = pageSlots.get(key_2);
@@ -1008,29 +998,30 @@ function CanvasWorkspace(t0) {
 			fitAll();
 		}
 	}));
-	let t13;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = {
+	let t14;
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {
 			userSelect: "none",
 			overscrollBehavior: "none"
 		};
-		$[35] = t13;
-	} else t13 = $[35];
-	let t14;
-	if ($[36] !== gap) {
-		t14 = {
+		$[37] = t14;
+	} else t14 = $[37];
+	let t15;
+	if ($[38] !== gap) {
+		t15 = {
 			gap,
 			transform: CANVAS_WORLD_TRANSFORM,
 			transformOrigin: "0 0"
 		};
-		$[36] = gap;
-		$[37] = t14;
-	} else t14 = $[37];
-	const t17 = [...pageSlots.values()].map((t16) => {
-		const { page: page_1, pathname: pathname_4, left: left_0 } = t16;
+		$[38] = gap;
+		$[39] = t15;
+	} else t15 = $[39];
+	const t18 = [...pageSlots.values()].map((t17) => {
+		const { page: page_1, pathname: pathname_4, left: left_0 } = t17;
 		return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
 			itemKey: page_1.key,
 			left: left_0,
+			width: slotWidth,
 			children: /* @__PURE__ */ jsx(CanvasPageHeader, {
 				page: page_1,
 				pathname: pathname_4,
@@ -1055,27 +1046,38 @@ function CanvasWorkspace(t0) {
 			})
 		}, page_1.key);
 	});
-	let t18;
-	if ($[38] !== pages.length) {
-		t18 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
-		$[38] = pages.length;
-		$[39] = t18;
-	} else t18 = $[39];
 	let t19;
-	if ($[40] !== instructionsId) {
-		t19 = /* @__PURE__ */ jsx("p", {
+	if ($[40] !== pages.length) {
+		t19 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
+		$[40] = pages.length;
+		$[41] = t19;
+	} else t19 = $[41];
+	let t20;
+	if ($[42] !== instructionsId) {
+		t20 = /* @__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."
 		});
-		$[40] = instructionsId;
-		$[41] = t19;
-	} else t19 = $[41];
-	let t20;
-	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = ["left", "right"].map(_temp5);
-		$[42] = t20;
-	} else t20 = $[42];
+		$[42] = instructionsId;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
+	if ($[44] !== insets) {
+		t21 = ["left", "right"].map((side) => /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			"data-canvas-scrim": side,
+			className: "pointer-events-none absolute inset-y-0",
+			style: {
+				[side]: 0,
+				width: insets[side] + 16,
+				background: scrimGradient(side, insets[side]),
+				zIndex: 2
+			}
+		}, side));
+		$[44] = insets;
+		$[45] = t21;
+	} else t21 = $[45];
 	return /* @__PURE__ */ jsxs("div", {
 		ref: viewportRef,
 		role: "region",
@@ -1084,7 +1086,7 @@ function CanvasWorkspace(t0) {
 		tabIndex: 0,
 		"data-camox-canvas": true,
 		className: "bg-canvas 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,
+		style: t14,
 		children: [
 			/* @__PURE__ */ jsx(CanvasWorkspaceContext, {
 				value: workspace,
@@ -1096,15 +1098,16 @@ function CanvasWorkspace(t0) {
 							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;
+							style: t15,
+							children: [...pageSlots.values()].map((t16) => {
+								const { page: page_0, pathname: pathname_3 } = t16;
 								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,
+									slotWidth,
 									framed,
 									viewport,
 									runtimeBasePath,
@@ -1116,33 +1119,20 @@ function CanvasWorkspace(t0) {
 					})
 				})
 			}),
-			t17,
 			t18,
 			t19,
-			t20
+			t20,
+			t21
 		]
 	});
 }
-function _temp5(side) {
-	return /* @__PURE__ */ jsx("div", {
-		"aria-hidden": true,
-		"data-canvas-scrim": side,
-		className: "pointer-events-none absolute inset-y-0",
-		style: {
-			[side]: 0,
-			width: CANVAS_INSETS[side] + 16,
-			background: scrimGradient(side, CANVAS_INSETS[side]),
-			zIndex: 2
-		}
-	}, side);
-}
 function CamoxCanvas(t0) {
 	const $ = c(65);
 	const { runtimeBasePath } = t0;
 	const layouts = useRoutableLayouts();
 	const location = useLocation();
-	const viewportMode = useSelector(previewStore, _temp6);
-	const viewport = CANVAS_DEVICES[viewportMode === "full" ? "desktop" : viewportMode];
+	const viewportMode = useSelector(previewStore, _temp3);
+	const device = viewportMode === "full" ? "desktop" : viewportMode;
 	const [activeFrame, setActiveFrame] = React.useState(null);
 	const selectedPath = location.pathname;
 	const previousPath = React.useRef(selectedPath);
@@ -1171,7 +1161,7 @@ function CamoxCanvas(t0) {
 		t3 = [];
 		$[4] = t3;
 	} else t3 = $[4];
-	React.useEffect(_temp8, t3);
+	React.useEffect(_temp5, t3);
 	const projectUuid = useProjectUuid();
 	let t4;
 	if ($[5] !== projectUuid) {
@@ -1392,7 +1382,7 @@ function CamoxCanvas(t0) {
 		$[51] = t22;
 	} else t22 = $[51];
 	let t23;
-	if ($[52] !== canvasPages || $[53] !== previewedPage || $[54] !== project.data.id || $[55] !== runtimeBasePath || $[56] !== selectedPage || $[57] !== t20 || $[58] !== t22 || $[59] !== viewport) {
+	if ($[52] !== canvasPages || $[53] !== device || $[54] !== previewedPage || $[55] !== project.data.id || $[56] !== runtimeBasePath || $[57] !== selectedPage || $[58] !== t20 || $[59] !== t22) {
 		t23 = /* @__PURE__ */ jsx(CanvasWorkspace, {
 			ref: workspace,
 			pages: canvasPages,
@@ -1400,18 +1390,18 @@ function CamoxCanvas(t0) {
 			previewedPage,
 			intendedPageKey: t20,
 			runtimeBasePath,
-			viewport,
+			device,
 			onActivate: t21,
 			onSelectionIntent: t22
 		}, project.data.id);
 		$[52] = canvasPages;
-		$[53] = previewedPage;
-		$[54] = project.data.id;
-		$[55] = runtimeBasePath;
-		$[56] = selectedPage;
-		$[57] = t20;
-		$[58] = t22;
-		$[59] = viewport;
+		$[53] = device;
+		$[54] = previewedPage;
+		$[55] = project.data.id;
+		$[56] = runtimeBasePath;
+		$[57] = selectedPage;
+		$[58] = t20;
+		$[59] = t22;
 		$[60] = t23;
 	} else t23 = $[60];
 	let t24;
@@ -1431,14 +1421,14 @@ function CamoxCanvas(t0) {
 	} else t24 = $[64];
 	return t24;
 }
-function _temp8() {
+function _temp5() {
 	previewStore.send({ type: "clearSelection" });
-	return _temp7;
+	return _temp4;
 }
-function _temp7() {
+function _temp4() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp6(state) {
+function _temp3(state) {
 	return state.context.viewportMode;
 }
 

package/dist/features/canvas/canvasCameraController.js

@@ -1,5 +1,5 @@
-import { revealScrollDelta } from "../preview/selectionReveal.js";
 import { CANVAS_WHEEL_ZOOM_RATE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.js";
+import { revealScrollDelta } from "../preview/selectionReveal.js";
 import { createCanvasFlight, createCanvasPan } from "./canvasFlight.js";
 
 //#region src/features/canvas/canvasCameraController.ts