camox 0.52.2 → 0.53.1

package/dist/features/canvas/useCanvasCamera.js

@@ -45,6 +45,12 @@ function isTextEntry(target) {
 function rescaleY(camera, scale) {
 	return camera.y > 0 ? camera.y : camera.y * scale / camera.scale;
 }
+const NO_INSETS = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
 /** Animate only the camera's CSS properties; page trees never rerender on pan/zoom. */
 function useCanvasCamera(workspaceKey, initialTarget, row) {
 	const continuity = React.useContext(ViewportContinuityContext);
@@ -102,20 +108,22 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			capture: true,
 			passive: false
 		});
-		let viewportSize = {
-			width: viewport.clientWidth,
-			height: viewport.clientHeight
+		let insets = rowRef.current?.insets ?? NO_INSETS;
+		const measureViewport = () => {
+			insets = rowRef.current?.insets ?? NO_INSETS;
+			return {
+				width: Math.max(0, viewport.clientWidth - insets.left - insets.right),
+				height: Math.max(0, viewport.clientHeight - insets.top - insets.bottom)
+			};
 		};
+		let viewportSize = measureViewport();
 		const measureContent = () => ({
 			width: rowRef.current?.width ?? content.offsetWidth,
 			height: content.offsetHeight
 		});
 		let contentSize = measureContent();
 		let minimumScale = canvasMinimumScale(viewportSize, contentSize);
-		const updateGeometry = (nextViewport = {
-			width: viewport.clientWidth,
-			height: viewport.clientHeight
-		}, nextContent = measureContent()) => {
+		const updateGeometry = (nextViewport = measureViewport(), nextContent = measureContent()) => {
 			viewportSize = nextViewport;
 			contentSize = nextContent;
 			minimumScale = canvasMinimumScale(viewportSize, contentSize);
@@ -128,7 +136,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
 		let stretch;
 		let zoomEnd = 0;
-		let landing;
 		const constrain = (next, stretched = !!stretch) => constrainCanvasCamera(next, viewportSize, contentSize, canvasMaximumScale(viewportSize, targets(), minimumScale), stretched);
 		const saved = canvasStore.getSnapshot().context.views[workspaceKey];
 		const savedCamera = saved && !saved.fitted ? saved.camera : void 0;
@@ -194,16 +201,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				y: anchored.y + translation.y
 			};
 			if (!candidate || !fit || !isCanvasPageScale(snapped, fit.scale)) return next;
-			const entered = selection !== candidate.key;
-			if (entered) landing = {
-				key: candidate.key,
-				stretched
-			};
-			else if (stretched && landing && !landing.stretched) {
-				landing.stretched = true;
-				rowRef.current?.onSnapStretched?.();
-			}
-			if (entered && !stretched) rowRef.current?.onSnap?.();
 			select(candidate.key);
 			return {
 				...next,
@@ -236,7 +233,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			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);
 			gesture.intendedX += (candidate.left + candidate.width / 2) * (intended.scale - fit.scale);
 			return constrain({
@@ -254,8 +250,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				markMoving();
 				applyCamera(next);
 			}
-			if (landing?.stretched && landing.key === selection) rowRef.current?.onSnap?.();
-			landing = void 0;
 		};
 		const pointers = /* @__PURE__ */ new Map();
 		let spaceHeld = false;
@@ -317,8 +311,8 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			if (!wasMoving) setMoving(true);
 		};
 		const paintElement = (element) => {
-			element.style.setProperty("--canvas-x", `${camera.x}px`);
-			element.style.setProperty("--canvas-y", `${camera.y}px`);
+			element.style.setProperty("--canvas-x", `${camera.x + insets.left}px`);
+			element.style.setProperty("--canvas-y", `${camera.y + insets.top}px`);
 			element.style.setProperty("--canvas-zoom", String(camera.scale));
 			element.style.setProperty("--canvas-pixel-ratio", String(ownerWindow.devicePixelRatio));
 		};
@@ -413,7 +407,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			gesture = void 0;
 			ownerWindow.clearTimeout(zoomEnd);
 			stretch = void 0;
-			landing = void 0;
 			updateGeometry();
 			camera = constrain(camera, true);
 			target = constrain(destinationCamera());
@@ -435,7 +428,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				const frame = element.ownerDocument.defaultView?.frameElement;
 				if (!frame || flight && !flight.pan || pointers.size) return;
 				const rect = element.getBoundingClientRect();
-				const worldTop = (frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top + rect.top * camera.scale - camera.y) / camera.scale;
+				const worldTop = (frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top + rect.top * camera.scale - camera.y) / camera.scale;
 				const delta = revealScrollDelta({
 					top: target.y + worldTop * target.scale,
 					bottom: target.y + (worldTop + rect.height) * target.scale
@@ -483,7 +476,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				const held = flight ? void 0 : targetOf(selection);
 				const element = held && Array.from(content.querySelectorAll("[data-canvas-page]")).find((element) => element.dataset.canvasPage === held.key);
 				const doc = element ? canvasPageIframe(element)?.contentDocument : void 0;
-				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
+				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top + insets.top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
 				return {
 					camera: { ...camera },
 					pathname: element ? element.dataset.canvasPathname : void 0,
@@ -505,7 +498,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				} : fit;
 				if (anchor && doc) {
 					const y = resolveViewportAnchor(doc, anchor);
-					const frameOffsetY = page ? (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - camera.y) / camera.scale : 0;
+					const frameOffsetY = page ? (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top - camera.y) / camera.scale : 0;
 					next = placeCanvasPageAnchor(viewportSize, destination, y, fit.scale, frameOffsetY);
 				}
 				fittingInitialPage = false;
@@ -515,12 +508,10 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 		if (continuity) continuity.canvas = continuityBinding;
 		const resize = new ResizeObserver(() => {
-			const nextViewport = {
-				width: viewport.clientWidth,
-				height: viewport.clientHeight
-			};
+			const previousInsets = insets;
+			const nextViewport = measureViewport();
 			const nextContent = measureContent();
-			if (nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
+			if (insets.left === previousInsets.left && insets.top === previousInsets.top && nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
 			const wasFitted = isOverview(target);
 			gesture = void 0;
 			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
@@ -559,14 +550,14 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const localPoint = (x, y) => {
 			const rect = viewport.getBoundingClientRect();
 			return {
-				x: x - rect.left,
-				y: y - rect.top
+				x: x - rect.left - insets.left,
+				y: y - rect.top - insets.top
 			};
 		};
 		const onWheel = (event) => {
 			event.preventDefault();
-			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewport.clientWidth);
-			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewport.clientHeight);
+			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewportSize.width);
+			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewportSize.height);
 			if (!dx && !dy) return;
 			rowRef.current?.onEditorMove?.();
 			cancelCameraFlight();
@@ -664,7 +655,13 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const onFocusIn = (event) => {
 			if (!isControl(event.target)) return;
 			const rect = event.target.getBoundingClientRect();
-			const bounds = viewport.getBoundingClientRect();
+			const viewportRect = viewport.getBoundingClientRect();
+			const bounds = {
+				left: viewportRect.left + insets.left,
+				top: viewportRect.top + insets.top,
+				right: viewportRect.left + insets.left + viewportSize.width,
+				bottom: viewportRect.top + insets.top + viewportSize.height
+			};
 			const dx = Math.max(0, bounds.left + 16 - rect.left) - Math.max(0, rect.right - bounds.right + 16);
 			const dy = Math.max(0, bounds.top + 16 - rect.top) - Math.max(0, rect.bottom - bounds.bottom + 16);
 			if (!dx && !dy) return;
@@ -689,8 +686,8 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				"ArrowDown"
 			].includes(event.key) || event.shiftKey && event.code === "Digit1") cancelCameraFlight();
 			const center = {
-				x: viewport.clientWidth / 2,
-				y: viewport.clientHeight / 2
+				x: viewportSize.width / 2,
+				y: viewportSize.height / 2
 			};
 			const factor = event.key === "+" || event.key === "=" ? 1.25 : event.key === "-" ? .8 : event.key === "0" ? 1 / target.scale : void 0;
 			if (factor) {

package/dist/features/preview/CamoxPreview.js

@@ -12,10 +12,10 @@ import { usePageDestinations } from "../../hooks/use-page-destinations.js";
 import { useLocalePath, useLocalizedPath } from "../../lib/view-locale.js";
 import { CanvasLoadingScreen } from "../canvas/CanvasLoadingScreen.js";
 import { canvasStore } from "../canvas/canvasStore.js";
+import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
 import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
-import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
 import { RendererFramesProvider, RendererSlot, useRendererHost, useRendererStatus } from "../renderer/RendererFrames.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";

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

@@ -1,8 +1,8 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
-import { formatShortcut } from "../../../lib/shortcuts.js";
 import { isBlockSelection, previewStore, selectionForPage, selectionItemId } from "../previewStore.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { entityName } from "../entityName.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
 import { usePreviewedPage } from "../CamoxPreview.js";

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

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { useEditingFrame } from "../editingFrame.js";
+import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
 import { FrameContext } from "./Frame.js";
 import { c } from "react/compiler-runtime";

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

@@ -203,7 +203,7 @@ function CanvasPreview({ enabled, pathname, pagePathname, runtimeBasePath, place
 					className: "relative flex min-h-0 flex-1",
 					"data-preview-surface": true,
 					children: [
-						enabled && phase !== "failed" && placeholder,
+						enabled && phase === "preparing" && placeholder,
 						/* @__PURE__ */ jsxs("div", {
 							className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
 							"data-read-only-preview": true,

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

@@ -4,9 +4,9 @@ import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { pageMutations } from "../../../lib/queries.js";
 import { useLayoutDefinitions } from "../../../lib/studio-definitions.js";
 import { useLocalizedPath } from "../../../lib/view-locale.js";
-import { PageNicknameField } from "./PageNicknameField.js";
 import { previewStore } from "../previewStore.js";
 import { PageLocationFieldset } from "./PageLocationFieldset.js";
+import { PageNicknameField } from "./PageNicknameField.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { useSelector } from "@xstate/store-react";

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

@@ -5,8 +5,8 @@ import { DrillRow } from "./DrillRow.js";
 import { ReferenceFieldEditor } from "./ReferenceFieldEditor.js";
 import { ReferenceListFieldEditor } from "./ReferenceListFieldEditor.js";
 import { previewStore } from "../previewStore.js";
-import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { overlayFieldId, recordPlacementId } from "../overlayMessages.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
 import { IconFieldEditor } from "./IconFieldEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";

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

@@ -1,5 +1,5 @@
-import { useFrame } from "./Frame.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { useFrame } from "./Frame.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";