camox 0.46.0 → 0.47.0

package/dist/features/canvas/canvasCamera.js

@@ -24,16 +24,31 @@ const MAX_CANVAS_ZOOM = 2;
 */
 const MIN_CANVAS_ZOOM = .1;
 /** Log-scale zoom per pixel of Ctrl/⌘ + wheel, including trackpad pinches. */
-const CANVAS_WHEEL_ZOOM_RATE = .01056;
+const CANVAS_WHEEL_ZOOM_RATE = .012672;
 /** Relative (log-scale) bands make the detent feel the same at every page width. */
-const ZOOM_SNAP_CAPTURE = .14;
-const ZOOM_SNAP_RELEASE = .18;
+const ZOOM_SNAP_CAPTURE = .168;
+const ZOOM_SNAP_RELEASE = .216;
 /** Fractions of viewport width: acquire near center, then hold a wider detent. */
-const PAN_SNAP_CAPTURE = .12;
-const PAN_SNAP_RELEASE = .18;
+const PAN_SNAP_CAPTURE = .144;
+const PAN_SNAP_RELEASE = .216;
 function isCanvasPageScale(scale, pageScale) {
 	return pageScale !== void 0 && Math.abs(Math.log(scale / pageScale)) < 1e-8;
 }
+/** Signed screen distance from a target's center to the viewport's center. */
+function canvasTargetOffset(camera, viewport, target) {
+	return camera.x + (target.left + target.width / 2) * camera.scale - viewport.width / 2;
+}
+/**
+* Near a target's page fit in both zoom and position, so a pan snaps onto a
+* page without its zoom matching exactly. A held snap releases from wider bands
+* than it captures.
+*/
+function isInCanvasSnapWindow(camera, viewport, target, held) {
+	const fit = fitCanvasPage(viewport, target);
+	const zoomBand = held ? ZOOM_SNAP_RELEASE : ZOOM_SNAP_CAPTURE;
+	const panBand = viewport.width * (held ? PAN_SNAP_RELEASE : PAN_SNAP_CAPTURE);
+	return Math.abs(Math.log(camera.scale / fit.scale)) <= zoomBand && Math.abs(canvasTargetOffset(camera, viewport, target)) <= panBand;
+}
 /** Snapped to a target: at its page fit, centered on it. */
 function isCanvasCameraSnapped(camera, viewport, target) {
 	const fit = fitCanvasPage(viewport, target);
@@ -226,4 +241,4 @@ function canvasWheelDelta(delta, mode, viewportSize) {
 }
 
 //#endregion
-export { CANVAS_OVERSCROLL, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };
+export { CANVAS_OVERSCROLL, CANVAS_WHEEL_ZOOM_RATE, MIN_CANVAS_ZOOM, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_SNAP_CAPTURE, ZOOM_SNAP_RELEASE, ZOOM_STRETCH, canvasInsets, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasTargetOffset, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvas, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, isInCanvasSnapWindow, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt };

package/dist/features/canvas/useCanvasCamera.js

@@ -2,7 +2,7 @@ import { canvasStore } from "./canvasStore.js";
 import { ViewportContinuityContext, captureViewportAnchor, resolveViewportAnchor } from "../preview/viewportContinuity.js";
 import { canvasPageIframe } from "../preview/previewPageFrame.js";
 import { canvasBlockOverlap } from "./canvasFrameDocument.js";
-import { CANVAS_WHEEL_ZOOM_RATE, PAN_SNAP_CAPTURE, PAN_SNAP_RELEASE, ZOOM_STRETCH, canvasMaximumScale, canvasMinimumScale, canvasOverview, canvasVerticalRail, canvasWheelDelta, constrainCanvasCamera, findCanvasSnapTarget, fitCanvasPage, isCanvasCameraSnapped, isCanvasPageScale, placeCanvasPageAnchor, snapCanvasZoom, stretchCanvasZoom, unstretchCanvasZoom, zoomCanvasAt } from "./canvasCamera.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";
 import * as React from "react";
@@ -233,16 +233,17 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 			const candidate = findCanvasSnapTarget(intended, viewportSize, targets());
 			const fit = candidate && fitCanvasPage(viewportSize, candidate);
-			if (!candidate || !fit || !isCanvasPageScale(base.scale, fit.scale)) return intended;
-			const held = Math.abs(base.x - fit.x) < 1e-8;
-			const band = viewportSize.width * (held ? PAN_SNAP_RELEASE : PAN_SNAP_CAPTURE);
-			if (Math.abs(intended.x - fit.x) > band) return intended;
+			if (!candidate || !fit || fit.scale < minimumScale) return intended;
+			const held = isCanvasCameraSnapped(base, viewportSize, candidate);
+			if (!isInCanvasSnapWindow(intended, viewportSize, candidate, held)) return intended;
 			if (selection !== candidate.key) rowRef.current?.onSnap?.();
 			select(candidate.key);
-			return {
-				...intended,
-				x: fit.x
-			};
+			gesture.intendedX += (candidate.left + candidate.width / 2) * (intended.scale - fit.scale);
+			return constrain({
+				x: fit.x,
+				y: rescaleY(intended, fit.scale),
+				scale: fit.scale
+			});
 		};
 		const endZoom = () => {
 			ownerWindow.clearTimeout(zoomEnd);
@@ -264,6 +265,10 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			else delete element.dataset.canvasPan;
 		};
 		const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const isOverview = (view) => {
+			const overview = canvasOverview(viewportSize, contentSize);
+			return Math.abs(view.scale - overview.scale) < 1e-8 && Math.abs(view.x - overview.x) < .5 && Math.abs(view.y - overview.y) < .5;
+		};
 		const remember = () => {
 			if (restoredCamera || fittingInitialPage || !viewportSize.width || !viewportSize.height) return;
 			canvasStore.send({
@@ -271,7 +276,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				workspaceKey,
 				view: {
 					camera,
-					fitted: Math.abs(camera.scale - minimumScale) < 1e-8
+					fitted: isOverview(camera)
 				}
 			});
 		};
@@ -516,7 +521,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			};
 			const nextContent = measureContent();
 			if (nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
-			const wasFitted = Math.abs(target.scale - minimumScale) < 1e-8;
+			const wasFitted = isOverview(target);
 			gesture = void 0;
 			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
 			updateGeometry(nextViewport, nextContent);

package/dist/features/preview/CamoxPreview.js

@@ -17,6 +17,7 @@ import { canvasStore } from "../canvas/canvasStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
 import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { studioStore } from "../studio/studioStore.js";
 import { previewStore, selectIsCanvasShown } from "./previewStore.js";
@@ -617,7 +618,7 @@ function usePrefetchCanvas(enabled, projectUuid) {
 }
 /** Studio chrome is shared; only curated previews require a Camox page record. */
 const PreviewShell = (t0) => {
-	const $ = c(49);
+	const $ = c(53);
 	const { children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath: t1 } = t0;
 	const runtimeBasePath = t1 === void 0 ? "" : t1;
 	const isAuthenticated = useIsAuthenticated();
@@ -663,26 +664,42 @@ const PreviewShell = (t0) => {
 	const editingOwner = t2;
 	let t3;
 	let t4;
-	if ($[4] !== isMobileStudio) {
+	if ($[4] !== isAuthenticated || $[5] !== isMobileStudio) {
 		t3 = () => {
-			if (!isMobileStudio) return;
-			previewStore.send({ type: "hideCanvas" });
-			previewStore.send({ type: "closeAddBlockSheet" });
+			if (isAuthenticated && takeShowCanvasRequest() && !isMobileStudio) previewStore.send({ type: "showCanvas" });
 		};
-		t4 = [isMobileStudio];
-		$[4] = isMobileStudio;
-		$[5] = t3;
-		$[6] = t4;
+		t4 = [isAuthenticated, isMobileStudio];
+		$[4] = isAuthenticated;
+		$[5] = isMobileStudio;
+		$[6] = t3;
+		$[7] = t4;
 	} else {
-		t3 = $[5];
-		t4 = $[6];
+		t3 = $[6];
+		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
-	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
 	let t5;
 	let t6;
-	if ($[7] !== isAuthenticated || $[8] !== isCanvasShown || $[9] !== isMobileStudio) {
+	if ($[8] !== isMobileStudio) {
 		t5 = () => {
+			if (!isMobileStudio) return;
+			previewStore.send({ type: "hideCanvas" });
+			previewStore.send({ type: "closeAddBlockSheet" });
+		};
+		t6 = [isMobileStudio];
+		$[8] = isMobileStudio;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	React.useEffect(t5, t6);
+	useCanvasOnlyLocation(!!canvasOnly && isAuthenticated, isCanvasShown, isMobileStudio, pageLocation);
+	let t7;
+	let t8;
+	if ($[11] !== isAuthenticated || $[12] !== isCanvasShown || $[13] !== isMobileStudio) {
+		t7 = () => {
 			const actions = [
 				{
 					id: "hide-canvas",
@@ -732,140 +749,140 @@ const PreviewShell = (t0) => {
 				});
 			};
 		};
-		t6 = [
+		t8 = [
 			isCanvasShown,
 			isAuthenticated,
 			isMobileStudio
 		];
-		$[7] = isAuthenticated;
-		$[8] = isCanvasShown;
-		$[9] = isMobileStudio;
-		$[10] = t5;
-		$[11] = t6;
+		$[11] = isAuthenticated;
+		$[12] = isCanvasShown;
+		$[13] = isMobileStudio;
+		$[14] = t7;
+		$[15] = t8;
 	} else {
-		t5 = $[10];
-		t6 = $[11];
+		t7 = $[14];
+		t8 = $[15];
 	}
-	React.useEffect(t5, t6);
+	React.useEffect(t7, t8);
 	if (!isAuthenticated) {
-		let t7;
-		if ($[12] !== children) {
-			t7 = /* @__PURE__ */ jsx(Fragment, { children });
-			$[12] = children;
-			$[13] = t7;
-		} else t7 = $[13];
-		return t7;
+		let t9;
+		if ($[16] !== children) {
+			t9 = /* @__PURE__ */ jsx(Fragment, { children });
+			$[16] = children;
+			$[17] = t9;
+		} else t9 = $[17];
+		return t9;
 	}
-	const t7 = !isCanvasShown && "bg-black";
-	let t8;
-	if ($[14] !== t7) {
-		t8 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t7);
-		$[14] = t7;
-		$[15] = t8;
-	} else t8 = $[15];
-	const t9 = pageLocation?.pathname;
-	const t10 = !canvasOnly;
-	const t11 = !!derivedLayout;
-	let t12;
-	if ($[16] !== t10 || $[17] !== t11) {
-		t12 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
-			page: t10,
-			layoutPage: t11
+	const t9 = !isCanvasShown && "bg-black";
+	let t10;
+	if ($[18] !== t9) {
+		t10 = cn("bg-background relative flex h-full min-h-0 flex-1 flex-col overflow-hidden", t9);
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	const t11 = pageLocation?.pathname;
+	const t12 = !canvasOnly;
+	const t13 = !!derivedLayout;
+	let t14;
+	if ($[20] !== t12 || $[21] !== t13) {
+		t14 = /* @__PURE__ */ jsx(CanvasSidebarSkeleton, {
+			page: t12,
+			layoutPage: t13
 		});
-		$[16] = t10;
-		$[17] = t11;
-		$[18] = t12;
-	} else t12 = $[18];
-	const t13 = !isCanvasEnabled;
-	const t14 = pageData?.page;
-	const t15 = derivedLayout?.layoutId;
-	const t16 = pageData?.projectName;
-	let t17;
-	if ($[19] !== children || $[20] !== isMobileStudio || $[21] !== pageLocation || $[22] !== t13 || $[23] !== t14 || $[24] !== t15 || $[25] !== t16) {
-		t17 = /* @__PURE__ */ jsx("div", {
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	const t15 = !isCanvasEnabled;
+	const t16 = pageData?.page;
+	const t17 = derivedLayout?.layoutId;
+	const t18 = pageData?.projectName;
+	let t19;
+	if ($[23] !== children || $[24] !== isMobileStudio || $[25] !== pageLocation || $[26] !== t15 || $[27] !== t16 || $[28] !== t17 || $[29] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
 			className: "flex min-h-0 flex-1 flex-row items-stretch",
 			children: /* @__PURE__ */ jsx(PreviewPanel, {
-				active: t13,
+				active: t15,
 				isMobileExperience: isMobileStudio,
-				page: t14,
-				layoutId: t15,
+				page: t16,
+				layoutId: t17,
 				pageLocation,
-				projectName: t16,
+				projectName: t18,
 				children
 			})
 		});
-		$[19] = children;
-		$[20] = isMobileStudio;
-		$[21] = pageLocation;
-		$[22] = t13;
-		$[23] = t14;
-		$[24] = t15;
-		$[25] = t16;
-		$[26] = t17;
-	} else t17 = $[26];
-	let t18;
-	if ($[27] !== isCanvasEnabled || $[28] !== pathname || $[29] !== runtimeBasePath || $[30] !== t12 || $[31] !== t17 || $[32] !== t9) {
-		t18 = /* @__PURE__ */ jsx(CanvasPreview, {
+		$[23] = children;
+		$[24] = isMobileStudio;
+		$[25] = pageLocation;
+		$[26] = t15;
+		$[27] = t16;
+		$[28] = t17;
+		$[29] = t18;
+		$[30] = t19;
+	} else t19 = $[30];
+	let t20;
+	if ($[31] !== isCanvasEnabled || $[32] !== pathname || $[33] !== runtimeBasePath || $[34] !== t11 || $[35] !== t14 || $[36] !== t19) {
+		t20 = /* @__PURE__ */ jsx(CanvasPreview, {
 			enabled: isCanvasEnabled,
 			pathname,
-			pagePathname: t9,
+			pagePathname: t11,
 			runtimeBasePath,
-			placeholder: t12,
-			children: t17
+			placeholder: t14,
+			children: t19
 		});
-		$[27] = isCanvasEnabled;
-		$[28] = pathname;
-		$[29] = runtimeBasePath;
-		$[30] = t12;
-		$[31] = t17;
-		$[32] = t9;
-		$[33] = t18;
-	} else t18 = $[33];
-	let t19;
-	if ($[34] !== isCanvasEnabled || $[35] !== pageId) {
-		t19 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
-		$[34] = isCanvasEnabled;
-		$[35] = pageId;
+		$[31] = isCanvasEnabled;
+		$[32] = pathname;
+		$[33] = runtimeBasePath;
+		$[34] = t11;
+		$[35] = t14;
 		$[36] = t19;
-	} else t19 = $[36];
-	let t20;
-	if ($[37] !== t18 || $[38] !== t19 || $[39] !== t8) {
-		t20 = /* @__PURE__ */ jsxs("div", {
-			className: t8,
-			children: [t18, t19]
-		});
-		$[37] = t18;
-		$[38] = t19;
-		$[39] = t8;
-		$[40] = t20;
-	} else t20 = $[40];
+		$[37] = t20;
+	} else t20 = $[37];
 	let t21;
-	if ($[41] !== editingOwner || $[42] !== t20) {
-		t21 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
-			value: editingOwner,
-			children: t20
+	if ($[38] !== isCanvasEnabled || $[39] !== pageId) {
+		t21 = !isCanvasEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CreatePageModal, {}), pageId != null && /* @__PURE__ */ jsx(AddBlockSheet, {})] });
+		$[38] = isCanvasEnabled;
+		$[39] = pageId;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== t10 || $[42] !== t20 || $[43] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("div", {
+			className: t10,
+			children: [t20, t21]
 		});
-		$[41] = editingOwner;
+		$[41] = t10;
 		$[42] = t20;
 		$[43] = t21;
-	} else t21 = $[43];
-	let t22;
-	if ($[44] !== projectUuid) {
-		t22 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
-		$[44] = projectUuid;
-		$[45] = t22;
-	} else t22 = $[45];
+		$[44] = t22;
+	} else t22 = $[44];
 	let t23;
-	if ($[46] !== t21 || $[47] !== t22) {
-		t23 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
+	if ($[45] !== editingOwner || $[46] !== t22) {
+		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: editingOwner,
+			children: t22
+		});
+		$[45] = editingOwner;
+		$[46] = t22;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== projectUuid) {
+		t24 = /* @__PURE__ */ jsx(ContentCollectionItemSheet, { projectUuid });
+		$[48] = projectUuid;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== t23 || $[51] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(CollectionItemSheetProvider, {
 			onRouteTargetClose: _temp9,
-			children: [t21, t22]
+			children: [t23, t24]
 		});
-		$[46] = t21;
-		$[47] = t22;
-		$[48] = t23;
-	} else t23 = $[48];
-	return t23;
+		$[50] = t23;
+		$[51] = t24;
+		$[52] = t25;
+	} else t25 = $[52];
+	return t25;
 };
 /** Zooms out to the whole Canvas, from anywhere in the site or the Studio. */
 function useShowCanvasAction() {

package/dist/features/preview/components/PreviewToolbar.js

@@ -14,130 +14,116 @@ import * as Tooltip$1 from "@camox/ui/tooltip";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
-const PreviewToolbar = (t0) => {
-	const $ = c(24);
-	const { onCanvasShownChange } = t0;
+const PreviewToolbar = () => {
+	const $ = c(21);
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	const isToolbarHidden = useSelector(previewStore, _temp);
 	const viewportMode = useSelector(previewStore, _temp2);
 	if (isToolbarHidden) return null;
-	let t1;
-	if ($[0] !== onCanvasShownChange) {
-		t1 = (checked) => {
-			if (onCanvasShownChange) {
-				onCanvasShownChange(checked);
-				return;
-			}
-			previewStore.send({ type: checked ? "showCanvas" : "hideCanvas" });
-		};
-		$[0] = onCanvasShownChange;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== isCanvasShown || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Switch, {
+	let t0;
+	if ($[0] !== isCanvasShown) {
+		t0 = /* @__PURE__ */ jsx(Switch, {
 			id: "show-canvas",
 			checked: isCanvasShown,
-			onCheckedChange: t1
+			onCheckedChange: _temp3
 		});
-		$[2] = isCanvasShown;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsxs(Label, {
+		$[0] = isCanvasShown;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs(Label, {
 			htmlFor: "show-canvas",
 			className: "flex items-center gap-2",
 			children: ["Show canvas ", formatShortcut(TOGGLE_CANVAS_SHORTCUT)]
 		});
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t2) {
-		t4 = /* @__PURE__ */ jsxs("div", {
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-2 px-2",
 			onPointerEnter: prefetchCanvas,
 			onFocus: prefetchCanvas,
-			children: [t2, t3]
+			children: [t0, t1]
 		});
-		$[6] = t2;
-		$[7] = t4;
-	} else t4 = $[7];
-	const t5 = viewportMode === "full" ? "desktop" : viewportMode;
-	let t6;
-	if ($[8] !== t5) {
-		t6 = /* @__PURE__ */ jsx(DeviceSelector, {
-			value: t5,
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = viewportMode === "full" ? "desktop" : viewportMode;
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(DeviceSelector, {
+			value: t3,
 			desktopLabel: "Full view",
-			onValueChange: _temp3
+			onValueChange: _temp4
 		});
-		$[8] = t5;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] !== isCanvasShown) {
-		t7 = /* @__PURE__ */ jsx(Button, {
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== isCanvasShown) {
+		t5 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
 			disabled: isCanvasShown,
-			onClick: _temp4,
+			onClick: _temp5,
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
-		$[10] = isCanvasShown;
+		$[7] = isCanvasShown;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(X, {});
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t5,
+			children: t6
+		});
+		$[10] = t5;
 		$[11] = t7;
 	} else t7 = $[11];
 	let t8;
 	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(X, {});
+		t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
 		$[12] = t8;
 	} else t8 = $[12];
 	let t9;
 	if ($[13] !== t7) {
-		t9 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t7,
-			children: t8
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: "-ml-2 flex items-center gap-2",
+			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t7, t8] })
 		});
 		$[13] = t7;
 		$[14] = t9;
 	} else t9 = $[14];
 	let t10;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
-		$[15] = t10;
-	} else t10 = $[15];
-	let t11;
-	if ($[16] !== t9) {
-		t11 = /* @__PURE__ */ jsx("div", {
-			className: "-ml-2 flex items-center gap-2",
-			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t9, t10] })
-		});
-		$[16] = t9;
-		$[17] = t11;
-	} else t11 = $[17];
-	let t12;
-	if ($[18] !== t11 || $[19] !== t6) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+	if ($[15] !== t4 || $[16] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-6 self-stretch",
-			children: [t6, t11]
+			children: [t4, t9]
 		});
-		$[18] = t11;
-		$[19] = t6;
-		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== t12 || $[22] !== t4) {
-		t13 = /* @__PURE__ */ jsxs(FloatingToolbar, {
+		$[15] = t4;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10 || $[19] !== t2) {
+		t11 = /* @__PURE__ */ jsxs(FloatingToolbar, {
 			className: "fixed bottom-2 w-max justify-between gap-6 transition-none",
-			children: [t4, t12]
+			children: [t2, t10]
 		});
-		$[21] = t12;
-		$[22] = t4;
-		$[23] = t13;
-	} else t13 = $[23];
-	return t13;
+		$[18] = t10;
+		$[19] = t2;
+		$[20] = t11;
+	} else t11 = $[20];
+	return t11;
 };
 function _temp(state) {
 	return state.context.isToolbarHidden;
@@ -145,13 +131,16 @@ function _temp(state) {
 function _temp2(state_0) {
 	return state_0.context.viewportMode;
 }
-function _temp3(device) {
+function _temp3(checked) {
+	return previewStore.send({ type: checked ? "showCanvas" : "hideCanvas" });
+}
+function _temp4(device) {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: device === "desktop" ? "full" : device
 	});
 }
-function _temp4() {
+function _temp5() {
 	return previewStore.send({ type: "hideToolbar" });
 }
 

package/dist/features/provider/CamoxProvider.js

@@ -1,17 +1,17 @@
 import { useSignInRedirect } from "../../lib/auth.js";
 import { useLocation } from "../navigation/navigation.js";
+import { useSignInShortcut } from "./signInShortcut.js";
 import { STUDIO_BASE_PATH } from "../studio/routes.js";
 import { AuthGate } from "../../components/AuthGate.js";
 import { AuthenticatedCamoxProvider } from "./AuthenticatedCamoxProvider.js";
-import { CoreCamoxProvider, isLocalhostPreview } from "./CoreCamoxProvider.js";
-import { LocalhostPreviewProvider } from "./LocalhostPreviewProvider.js";
+import { CoreCamoxProvider } from "./CoreCamoxProvider.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/features/provider/CamoxProvider.tsx
 function UnauthenticatedExperience(t0) {
-	const $ = c(12);
+	const $ = c(10);
 	const { children } = t0;
 	const { pathname } = useLocation();
 	let t1;
@@ -48,25 +48,17 @@ function UnauthenticatedExperience(t0) {
 		t4 = $[7];
 	}
 	React.useEffect(t3, t4);
+	useSignInShortcut(!isStudio);
 	if (isStudio) return null;
-	if (isLocalhostPreview()) {
-		let t5;
-		if ($[8] !== children) {
-			t5 = /* @__PURE__ */ jsx(LocalhostPreviewProvider, { children });
-			$[8] = children;
-			$[9] = t5;
-		} else t5 = $[9];
-		return t5;
-	}
 	let t5;
-	if ($[10] !== children) {
+	if ($[8] !== children) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			className: "bg-background min-h-screen",
 			children
 		});
-		$[10] = children;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[8] = children;
+		$[9] = t5;
+	} else t5 = $[9];
 	return t5;
 }
 function CamoxProvider(props) {

package/dist/features/provider/CoreCamoxProvider.js

@@ -9,11 +9,6 @@ import { jsx } from "react/jsx-runtime";
 import { replaceEqualDeep, useQueryClient } from "@tanstack/react-query";
 
 //#region src/features/provider/CoreCamoxProvider.tsx
-function isLocalhostPreview() {
-	if (typeof window === "undefined") return false;
-	const { hostname } = window.location;
-	return hostname === "localhost" || hostname.endsWith(".localhost") || hostname === "127.0.0.1" || hostname === "[::1]" || hostname === "::1";
-}
 function CoreCamoxProvider({ apiUrl, authenticationUrl, camoxApp, children, projectUuid, initialAuthenticated = false, initialProject }) {
 	const queryClient = useQueryClient();
 	const authClient = React.useMemo(() => createCamoxAuthClient(apiUrl), [apiUrl]);
@@ -94,4 +89,4 @@ function createWindowDraftScope(queryClient) {
 }
 
 //#endregion
-export { CoreCamoxProvider, isLocalhostPreview };
+export { CoreCamoxProvider };

package/dist/features/provider/signInShortcut.js

@@ -0,0 +1,60 @@
+import { useSignInRedirect } from "../../lib/auth.js";
+import { TOGGLE_CANVAS_SHORTCUT } from "../preview/previewConstants.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/provider/signInShortcut.ts
+/** Marks the URL a sign-in returns to, so the Studio opens on the Canvas there. */
+const SHOW_CANVAS_PARAM = "camox-show-canvas";
+function showCanvasCallbackHref() {
+	const url = new URL(window.location.href);
+	url.searchParams.set(SHOW_CANVAS_PARAM, "");
+	return url.href;
+}
+function isTyping() {
+	const element = document.activeElement;
+	return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLElement && element.isContentEditable;
+}
+/**
+* While signed out, the shortcut that shows the Canvas signs in instead, then shows the Canvas
+* on the page it was pressed on. Fields keep it, since sites often submit forms with it.
+*/
+function useSignInShortcut(enabled) {
+	const $ = c(4);
+	const signIn = useSignInRedirect(showCanvasCallbackHref);
+	let t0;
+	let t1;
+	if ($[0] !== enabled || $[1] !== signIn) {
+		t0 = () => {
+			if (!enabled) return;
+			const handleKeyDown = (event) => {
+				if (event.key !== TOGGLE_CANVAS_SHORTCUT.key || !(event.metaKey || event.ctrlKey)) return;
+				if (event.altKey || event.shiftKey || event.defaultPrevented || isTyping()) return;
+				event.preventDefault();
+				signIn();
+			};
+			window.addEventListener("keydown", handleKeyDown);
+			return () => window.removeEventListener("keydown", handleKeyDown);
+		};
+		t1 = [enabled, signIn];
+		$[0] = enabled;
+		$[1] = signIn;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+}
+/** Whether a sign-in from the shortcut led here. Removes the mark, so it shows the Canvas once. */
+function takeShowCanvasRequest() {
+	const url = new URL(window.location.href);
+	if (!url.searchParams.has(SHOW_CANVAS_PARAM)) return false;
+	url.searchParams.delete(SHOW_CANVAS_PARAM);
+	window.history.replaceState(window.history.state, "", url);
+	return true;
+}
+
+//#endregion
+export { takeShowCanvasRequest, useSignInShortcut };

package/dist/features/runtime/RuntimeChrome.js

@@ -1,8 +1,8 @@
 import { previewStore, selectIsCanvasShown } from "../preview/previewStore.js";
 import { shownRecordPage } from "../preview/pageRecord.js";
 import { Navbar } from "../studio/components/Navbar.js";
-import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
 import { EditingFallbackContext } from "./editingFallback.js";
+import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
 import { StudioEditingFallback } from "../preview/components/StudioEditingFallback.js";
 import { ChatSidebar } from "../studio/components/ChatSidebar.js";
 import { FollowAgentProvider } from "../studio/FollowAgentProvider.js";

package/dist/features/runtime/pageApp.js

@@ -1,11 +1,12 @@
 import { useAuthState, useSignInRedirect } from "../../lib/auth.js";
 import { DraftScopeContext } from "../../lib/draft-scope.js";
 import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { useSignInShortcut } from "../provider/signInShortcut.js";
 import { PreviewDocumentContext } from "./PreviewDocumentContext.js";
 import { PreviewActivation } from "../preview/components/PreviewActivation.js";
 import { Frame } from "../preview/components/Frame.js";
 import { PreviewSignInPage } from "../provider/PreviewSignInPage.js";
-import { CoreCamoxProvider, isLocalhostPreview } from "../provider/CoreCamoxProvider.js";
+import { CoreCamoxProvider } from "../provider/CoreCamoxProvider.js";
 import { CuratedPageContent } from "../page/CuratedPageContent.js";
 import { EditingFallbackSlot } from "./editingFallback.js";
 import { PageNavigationProvider } from "./pageNavigation.js";
@@ -96,7 +97,6 @@ function PageApp(t0) {
 	return t6;
 }
 const LazyEditablePageExperience = React.lazy(() => import("../preview/EditablePageExperience.js").then((module) => ({ default: module.EditablePageExperience })));
-const LazyLocalhostPreviewProvider = React.lazy(() => import("../provider/LocalhostPreviewProvider.js").then((module) => ({ default: module.LocalhostPreviewProvider })));
 /** Editing lists and adds any block, so it waits for every definition, not only the page's. */
 function AllBlocks({ camoxApp, children }) {
 	React.use(camoxApp.loadAllBlocks());
@@ -116,7 +116,7 @@ var EditingActivationBoundary = class extends React.Component {
 };
 const subscribeToHydration = () => () => {};
 function PageExperience(t0) {
-	const $ = c(46);
+	const $ = c(38);
 	const { camoxApp, input, queryClient, studioDocument } = t0;
 	const { isAuthenticated, isLoading } = useAuthState();
 	const hasHydrated = React.useSyncExternalStore(subscribeToHydration, _temp, _temp2);
@@ -145,6 +145,7 @@ function PageExperience(t0) {
 		t2 = $[5];
 	}
 	React.useEffect(t1, t2);
+	useSignInShortcut(hasHydrated && !studioOnly && !isAuthenticated && !isLoading);
 	let t3;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("div", {
@@ -248,50 +249,21 @@ function PageExperience(t0) {
 		return t11;
 	}
 	if (studioOnly) return null;
-	if (hasHydrated && isLocalhostPreview()) {
-		let t7;
-		if ($[35] !== readOnlyPage) {
-			t7 = /* @__PURE__ */ jsx(LazyLocalhostPreviewProvider, { children: readOnlyPage });
-			$[35] = readOnlyPage;
-			$[36] = t7;
-		} else t7 = $[36];
-		let t8;
-		if ($[37] !== camoxApp || $[38] !== t7) {
-			t8 = /* @__PURE__ */ jsx(AllBlocks, {
-				camoxApp,
-				children: t7
-			});
-			$[37] = camoxApp;
-			$[38] = t7;
-			$[39] = t8;
-		} else t8 = $[39];
-		let t9;
-		if ($[40] !== readOnlyPage || $[41] !== t8) {
-			t9 = /* @__PURE__ */ jsx(React.Suspense, {
-				fallback: readOnlyPage,
-				children: t8
-			});
-			$[40] = readOnlyPage;
-			$[41] = t8;
-			$[42] = t9;
-		} else t9 = $[42];
-		return t9;
-	}
 	if (studioDocument) {
 		let t7;
-		if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
 			t7 = { height: "100vh" };
-			$[43] = t7;
-		} else t7 = $[43];
+			$[35] = t7;
+		} else t7 = $[35];
 		let t8;
-		if ($[44] !== isolatedPage) {
+		if ($[36] !== isolatedPage) {
 			t8 = /* @__PURE__ */ jsx("div", {
 				style: t7,
 				children: isolatedPage
 			});
-			$[44] = isolatedPage;
-			$[45] = t8;
-		} else t8 = $[45];
+			$[36] = isolatedPage;
+			$[37] = t8;
+		} else t8 = $[37];
 		return t8;
 	}
 	return readOnlyPage;

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.46.0";
+var version = "0.47.0";
 
 //#endregion
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "camox",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "license": "MIT",
   "bin": {
     "camox": "./bin/camox.mjs"
@@ -129,9 +129,9 @@
     "shiki": "^4.5.0",
     "unhead": "^3.4.3",
     "zod": "^4.6.7",
-    "@camox/api-contract": "0.46.0",
-    "@camox/ui": "0.46.0",
-    "@camox/cli": "0.46.0"
+    "@camox/ui": "0.47.0",
+    "@camox/api-contract": "0.47.0",
+    "@camox/cli": "0.47.0"
   },
   "devDependencies": {
     "@earendil-works/pi-ai": "1.3.0",

package/dist/features/provider/LocalhostPreviewProvider.js

@@ -1,158 +0,0 @@
-import { actionsStore } from "./actionsStore.js";
-import { useSignInRedirect } from "../../lib/auth.js";
-import { TOGGLE_CANVAS_SHORTCUT } from "../preview/previewConstants.js";
-import { useApplyTheme } from "../studio/useTheme.js";
-import { PreviewPanel } from "../preview/components/PreviewPanel.js";
-import { useAdminShortcuts } from "./useAdminShortcuts.js";
-import { PreviewToolbar } from "../preview/components/PreviewToolbar.js";
-import { c } from "react/compiler-runtime";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Toaster } from "@camox/ui/toaster";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import studioCssUrl from "virtual:camox-studio-css";
-
-//#region src/features/provider/LocalhostPreviewProvider.tsx
-function LocalhostPreviewProvider(t0) {
-	const $ = c(22);
-	const { children } = t0;
-	const signInRedirect = useSignInRedirect();
-	const { resolvedTheme } = useApplyTheme();
-	const [isSignInOpen, setIsSignInOpen] = React.useState(false);
-	useAdminShortcuts();
-	let t1;
-	let t2;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = () => {
-			const actions = [{
-				id: "sign-in-to-edit",
-				label: "Sign in to edit",
-				aliases: ["Show canvas", "Edit mode"],
-				groupLabel: "Website",
-				checkIfAvailable: _temp,
-				execute: () => setIsSignInOpen(true),
-				shortcut: TOGGLE_CANVAS_SHORTCUT
-			}];
-			actionsStore.send({
-				type: "registerManyActions",
-				actions
-			});
-			return () => {
-				actionsStore.send({
-					type: "unregisterManyActions",
-					ids: actions.map(_temp2)
-				});
-			};
-		};
-		t2 = [];
-		$[0] = t1;
-		$[1] = t2;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-	}
-	React.useEffect(t1, t2);
-	let t3;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx("link", {
-			rel: "stylesheet",
-			href: studioCssUrl,
-			"data-camox-studio": true
-		});
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { bottom: "1rem" };
-		$[3] = t4;
-	} else t4 = $[3];
-	let t5;
-	if ($[4] !== resolvedTheme) {
-		t5 = /* @__PURE__ */ jsx(Toaster, {
-			theme: resolvedTheme,
-			position: "bottom-right",
-			offset: t4
-		});
-		$[4] = resolvedTheme;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== children) {
-		t6 = /* @__PURE__ */ jsx(PreviewPanel, { children });
-		$[6] = children;
-		$[7] = t6;
-	} else t6 = $[7];
-	let t7;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(PreviewToolbar, { onCanvasShownChange: (checked) => {
-			if (checked) setIsSignInOpen(true);
-		} });
-		$[8] = t7;
-	} else t7 = $[8];
-	let t8;
-	if ($[9] !== t6) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "bg-background relative flex h-screen flex-col overflow-hidden",
-			children: [t6, t7]
-		});
-		$[9] = t6;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Sign in to edit" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "You need to sign in before you can show the canvas." })] });
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(AlertDialogCancel, {
-			variant: "outline",
-			size: "default",
-			children: "Cancel"
-		});
-		$[12] = t10;
-	} else t10 = $[12];
-	let t11;
-	if ($[13] !== signInRedirect) {
-		t11 = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [t9, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [t10, /* @__PURE__ */ jsx(AlertDialogAction, {
-			onClick: signInRedirect,
-			children: "Sign in"
-		})] })] });
-		$[13] = signInRedirect;
-		$[14] = t11;
-	} else t11 = $[14];
-	let t12;
-	if ($[15] !== isSignInOpen || $[16] !== t11) {
-		t12 = /* @__PURE__ */ jsx(AlertDialog, {
-			open: isSignInOpen,
-			onOpenChange: setIsSignInOpen,
-			children: t11
-		});
-		$[15] = isSignInOpen;
-		$[16] = t11;
-		$[17] = t12;
-	} else t12 = $[17];
-	let t13;
-	if ($[18] !== t12 || $[19] !== t5 || $[20] !== t8) {
-		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t3,
-			t5,
-			t8,
-			t12
-		] });
-		$[18] = t12;
-		$[19] = t5;
-		$[20] = t8;
-		$[21] = t13;
-	} else t13 = $[21];
-	return t13;
-}
-function _temp2(action) {
-	return action.id;
-}
-function _temp() {
-	return true;
-}
-
-//#endregion
-export { LocalhostPreviewProvider };