camox 0.45.0 → 0.47.0

package/dist/features/canvas/CanvasPageFrame.js

@@ -10,10 +10,10 @@ import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
 import { Overlays } from "../preview/components/Overlays.js";
 import { PreviewFrameEffects } from "../preview/components/PreviewPanel.js";
 import { PageContent } from "../preview/CamoxPreview.js";
-import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
 import { CanvasOverlays } from "./CanvasOverlays.js";
 import "../preview/EditablePageContent.js";
 import { useFrameSettled } from "./canvasThumbnails.js";
+import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -115,8 +115,6 @@ function PageFrame(t0) {
 			href,
 			width,
 			viewportHeight,
-			fit: "page",
-			subject: "page",
 			mode
 		};
 		$[5] = href;

package/dist/features/canvas/CanvasPreviewPageSlot.js

@@ -13,12 +13,31 @@ import overlayStyles from "virtual:camox-overlay-css";
 
 //#region src/features/canvas/CanvasPreviewPageSlot.tsx
 /**
+* An element's place in the Canvas row, in world space. Its own offset is only
+* relative to its nearest positioned ancestor, such as its Page, so the offsets
+* add up to the row.
+*/
+function canvasRowOffset(element, row) {
+	let left = 0;
+	let top = 0;
+	let current = element;
+	while (current && current !== row) {
+		left += current.offsetLeft;
+		top += current.offsetTop;
+		current = current.offsetParent;
+	}
+	return {
+		left,
+		top
+	};
+}
+/**
 * The selected Page's place in the Canvas row, where the Preview's own page
 * frame shows instead of a frame of the Canvas. Toggling the Canvas then never remounts
 * the page, and neither does deselecting it, which keeps it in the frame. The slot takes the frame's height, and draws the Canvas overlays
 * over it.
 */
-function CanvasPreviewPageSlot({ pageId, layoutId, width, viewportHeight, selected, hovered, hidden = false, shaded = false, onActivate }) {
+function CanvasPreviewPageSlot({ pageId, layoutId, width, viewportHeight, selected, hovered, shaded = false, onActivate }) {
 	const ref = React.useRef(null);
 	const owner = useEditingOwner({
 		pageId,
@@ -41,16 +60,17 @@ function CanvasPreviewPageSlot({ pageId, layoutId, width, viewportHeight, select
 	React.useLayoutEffect(() => {
 		const element = ref.current;
 		const viewport = element?.closest("[data-camox-canvas]");
-		if (!frame || !element || !viewport) return;
+		const row = element?.closest("[data-canvas-items]");
+		if (!frame || !element || !viewport || !row) return;
+		const { left, top } = canvasRowOffset(element, row);
 		const next = {
 			viewport,
-			left: element.offsetLeft,
-			top: element.offsetTop,
+			left,
+			top,
 			width,
 			viewportHeight,
 			mode,
 			selected,
-			hidden,
 			workspace,
 			onInteract
 		};
@@ -100,4 +120,4 @@ function CanvasPreviewPageSlot({ pageId, layoutId, width, viewportHeight, select
 }
 
 //#endregion
-export { CanvasPreviewPageSlot };
+export { CanvasPreviewPageSlot, canvasRowOffset };

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);
@@ -131,7 +146,7 @@ function fitCanvasPage(viewport, page) {
 	const scale = Math.max(Number.EPSILON, Math.min(2, (viewport.width - padding * 2) / Math.max(1, page.width)));
 	return {
 		x: (viewport.width - page.width * scale) / 2 - page.left * scale,
-		y: Math.min(108, viewport.height / 3),
+		y: Math.min(76, viewport.height / 3),
 		scale
 	};
 }
@@ -143,11 +158,11 @@ function placeCanvasPageAnchor(viewport, page, documentY, scale, frameOffsetY =
 		scale
 	};
 }
-/** Reserve readable padding, unscaled Shelf Markers and page headers in the fitted overview. */
+/** Reserve readable padding and unscaled page headers in the fitted overview. */
 function canvasInsets(viewport) {
 	return {
 		x: Math.min(64, viewport.width / 4),
-		top: Math.min(148, viewport.height / 3),
+		top: Math.min(116, viewport.height / 3),
 		bottom: Math.min(64, viewport.height / 4)
 	};
 }
@@ -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/canvasFrameDocument.js

@@ -166,27 +166,12 @@ function pauseCanvasDocument(doc) {
 		for (const element of media) if (element.isConnected && element.paused) element.play().catch(() => {});
 	};
 }
-/**
-* The stylesheets of a site document's head, which shape how any content
-* renders in it. Pages of a site share them, while their titles, metadata and
-* preloads differ.
-*/
-function canvasDocumentStyles(previewDocument) {
-	if (!previewDocument) return "";
-	const doc = new DOMParser().parseFromString(previewDocument, "text/html");
-	return Array.from(doc.head.querySelectorAll("style, link[rel=\"stylesheet\"]")).map((style) => style.outerHTML).join("\n");
-}
-function measureCanvasDocument(iframe, root, baseline, fit = "page") {
+function measureCanvasDocument(iframe, root, baseline) {
 	const doc = root.ownerDocument;
 	adaptCanvasStyleSheets(doc);
 	iframe.style.height = `${baseline}px`;
 	const bodyRect = doc.body.getBoundingClientRect();
 	const rootRect = root.getBoundingClientRect();
-	if (fit === "content") {
-		const height = exactBottom(rootRect.bottom, root.scrollHeight + rootRect.top);
-		iframe.style.height = `${Math.max(1, height)}px`;
-		return;
-	}
 	const height = exactBottom(Math.max(rootRect.bottom, bodyRect.bottom), doc.body.scrollHeight + bodyRect.top, doc.documentElement.scrollHeight, root.scrollHeight + rootRect.top);
 	iframe.style.height = `${Math.max(baseline, height)}px`;
 }
@@ -208,7 +193,7 @@ function exactBottom(boxesBottom, ...scrollBottoms) {
 * While `suspended` (a resting frame, whose content is hidden), the frame keeps its size.
 * Once `resume` is called, it re-measures only if its content or size changed meanwhile.
 */
-function observeCanvasDocument(iframe, root, viewportHeight, fit = "page", suspended = () => false) {
+function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => false) {
 	const doc = root.ownerDocument;
 	const baseline = Math.max(1, viewportHeight);
 	doc.documentElement.style.setProperty("--camox-viewport-height", `${baseline}px`);
@@ -242,7 +227,7 @@ function observeCanvasDocument(iframe, root, viewportHeight, fit = "page", suspe
 	function measure() {
 		frame = 0;
 		if (suspended()) return;
-		measureCanvasDocument(iframe, root, baseline, fit);
+		measureCanvasDocument(iframe, root, baseline);
 		const elements = /* @__PURE__ */ new Set([
 			doc.body,
 			root,
@@ -314,4 +299,4 @@ function observeCanvasDocument(iframe, root, viewportHeight, fit = "page", suspe
 }
 
 //#endregion
-export { BLOCK_OVERLAP_SELECTOR, adaptCanvasStyleSheets, adoptCanvasDocument, canvasBlockOverlap, canvasDocumentStyles, canvasPageHref, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };
+export { BLOCK_OVERLAP_SELECTOR, adaptCanvasStyleSheets, adoptCanvasDocument, canvasBlockOverlap, canvasPageHref, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };

package/dist/features/canvas/canvasItems.js

@@ -2,114 +2,24 @@ import { CANVAS_DEVICES } from "./canvasPages.js";
 
 //#region src/features/canvas/canvasItems.ts
 const CANVAS_ITEM_GAP = 240;
-const CANVAS_SHELF_GAP = 480;
 const CANVAS_SLOT_WIDTH = CANVAS_DEVICES.desktop.width;
-/** Per-kind layout and camera behavior. */
-const CANVAS_ITEM_KINDS = {
-	page: {
-		width: CANVAS_SLOT_WIDTH,
-		snappable: true
-	},
-	block: {
-		width: CANVAS_SLOT_WIDTH,
-		snappable: true
-	}
-};
-/** The key of a block's item in the Canvas row. */
-function canvasBlockKey(blockId) {
-	return `block:${blockId}`;
-}
-/** The Block Catalog: every page-content Block Definition, alphabetically by title. */
-function getBlockCatalog(blocks) {
-	return blocks.filter((block) => !block._internal.layoutOnly).sort((a, b) => a._internal.title.localeCompare(b._internal.title));
-}
-function getCanvasShelves(pages, blocks) {
-	return [{
-		key: "shelf:pages",
-		label: "Pages",
-		items: pages.map((page) => ({
-			kind: "page",
-			key: page.key,
-			page
-		}))
-	}, {
-		key: "shelf:blocks",
-		label: "Blocks",
-		shownWhenEmpty: true,
-		collapsedByDefault: true,
-		unmountedWhenCollapsed: true,
-		items: getBlockCatalog(blocks).map((block) => ({
-			kind: "block",
-			key: canvasBlockKey(block._internal.id),
-			block
-		}))
-	}];
-}
 /**
-* World-space positions of the Canvas row, matching its flex layout, and the
-* markers above it. Items of collapsed shelves are left out of the row; each
-* collapsed shelf, or empty one that is still shown, takes a zero-width slot
-* instead, so its marker keeps a place and shows as collapsed.
+* World-space positions of the Canvas row, matching its flex layout: every Page
+* side by side, in Canvas order.
 */
-function positionCanvasShelves(shelves, collapsed = /* @__PURE__ */ new Set()) {
-	const items = [];
-	const markers = [];
-	let left = 0;
-	for (const shelf of shelves) {
-		if (!isCanvasShelfShown(shelf)) continue;
-		const start = left;
-		const marker = {
-			key: shelf.key,
-			label: shelf.label,
-			count: shelf.items.length
-		};
-		if (collapsed.has(shelf.key) || shelf.items.length === 0) {
-			markers.push({
-				...marker,
-				start,
-				end: start,
-				collapsed: true
-			});
-			left += 480;
-			continue;
-		}
-		for (const item of shelf.items) {
-			const { width } = CANVAS_ITEM_KINDS[item.kind];
-			items.push({
-				...item,
-				left,
-				width
-			});
-			left += width + 240;
-		}
-		const end = left - 240;
-		markers.push({
-			...marker,
-			start,
-			end,
-			collapsed: false
-		});
-		left = end + 480;
-	}
+function positionCanvasPages(pages) {
 	return {
-		items,
-		markers,
-		width: Math.max(0, left - 480)
+		items: pages.map((page, index) => ({
+			key: page.key,
+			page,
+			left: index * (CANVAS_SLOT_WIDTH + 240),
+			width: CANVAS_SLOT_WIDTH
+		})),
+		width: Math.max(0, pages.length * (CANVAS_SLOT_WIDTH + 240) - 240)
 	};
 }
-/** The shelves collapsed when the Canvas first opens in a Studio session. */
-function getDefaultCollapsedShelves(shelves) {
-	return shelves.filter((shelf) => shelf.collapsedByDefault).map(({ key }) => key);
-}
-/** Whether a shelf has a marker and a place in the row. */
-function isCanvasShelfShown(shelf) {
-	return shelf.items.length > 0 || shelf.shownWhenEmpty === true;
-}
-function isCanvasBlock(item) {
-	return item.kind === "block";
-}
 function canvasSnapTargets(items) {
-	return items.filter((item) => CANVAS_ITEM_KINDS[item.kind].snappable).map(({ key, left, width }) => ({
+	return items.map(({ key, left, width }) => ({
 		key,
 		left,
 		width
@@ -117,4 +27,4 @@ function canvasSnapTargets(items) {
 }
 
 //#endregion
-export { CANVAS_SLOT_WIDTH, canvasBlockKey, canvasSnapTargets, getBlockCatalog, getCanvasShelves, getDefaultCollapsedShelves, isCanvasBlock, isCanvasShelfShown, positionCanvasShelves };
+export { CANVAS_SLOT_WIDTH, canvasSnapTargets, positionCanvasPages };

package/dist/features/canvas/canvasStore.js

@@ -1,5 +1,3 @@
-import { c } from "react/compiler-runtime";
-import * as React from "react";
 import { createStore } from "@xstate/store";
 
 //#region src/features/canvas/canvasStore.ts
@@ -10,36 +8,17 @@ import { createStore } from "@xstate/store";
 const canvasStore = createStore({
 	context: {
 		views: {},
-		collapsedShelves: {},
+		/** Workspaces whose camera is moving, until it has been still for a moment. */
 		moving: {},
+		/** Counts requests to zoom out to the whole Canvas; a mounted Canvas answers each new one. */
 		overviewRequests: 0
 	},
 	on: {
 		reset: () => ({
 			views: {},
-			collapsedShelves: {},
 			moving: {},
 			overviewRequests: 0
 		}),
-		openShelves: (context, event) => ({
-			...context,
-			collapsedShelves: {
-				...context.collapsedShelves,
-				[event.workspaceKey]: event.collapsed
-			}
-		}),
-		setShelfCollapsed: (context, event) => {
-			const collapsed = context.collapsedShelves[event.workspaceKey] ?? [];
-			if (collapsed.includes(event.shelfKey) === event.collapsed) return context;
-			const next = event.collapsed ? [...collapsed, event.shelfKey] : collapsed.filter((key) => key !== event.shelfKey);
-			return {
-				...context,
-				collapsedShelves: {
-					...context.collapsedShelves,
-					[event.workspaceKey]: next
-				}
-			};
-		},
 		requestOverview: (context) => ({
 			...context,
 			overviewRequests: context.overviewRequests + 1
@@ -76,74 +55,6 @@ const canvasStore = createStore({
 		}
 	}
 });
-function subscribe(onChange) {
-	const subscription = canvasStore.subscribe(onChange);
-	return () => subscription.unsubscribe();
-}
-const noShelves = [];
-/**
-* The keys of a workspace's collapsed shelves. The first time a workspace opens
-* in the session, `defaults` are collapsed. It always opens with the shelf
-* holding the selection expanded, so the camera can start on the selection.
-*/
-function useCollapsedShelves(workspaceKey, defaults, selectedShelf) {
-	const $ = c(12);
-	let t0;
-	if ($[0] !== workspaceKey) {
-		t0 = () => canvasStore.getSnapshot().context.collapsedShelves[workspaceKey];
-		$[0] = workspaceKey;
-		$[1] = t0;
-	} else t0 = $[1];
-	const stored = React.useSyncExternalStore(subscribe, t0, _temp);
-	let t1;
-	if ($[2] !== defaults || $[3] !== selectedShelf || $[4] !== workspaceKey) {
-		t1 = () => (canvasStore.getSnapshot().context.collapsedShelves[workspaceKey] ?? defaults).filter((key) => key !== selectedShelf);
-		$[2] = defaults;
-		$[3] = selectedShelf;
-		$[4] = workspaceKey;
-		$[5] = t1;
-	} else t1 = $[5];
-	const [opening, setOpening] = React.useState(t1);
-	let t2;
-	let t3;
-	if ($[6] !== opening || $[7] !== workspaceKey) {
-		t2 = () => {
-			if (!opening) return;
-			canvasStore.send({
-				type: "openShelves",
-				workspaceKey,
-				collapsed: opening
-			});
-			setOpening(null);
-		};
-		t3 = [opening, workspaceKey];
-		$[6] = opening;
-		$[7] = workspaceKey;
-		$[8] = t2;
-		$[9] = t3;
-	} else {
-		t2 = $[8];
-		t3 = $[9];
-	}
-	React.useLayoutEffect(t2, t3);
-	const keys = opening ?? stored ?? noShelves;
-	let t4;
-	if ($[10] !== keys) {
-		t4 = new Set(keys);
-		$[10] = keys;
-		$[11] = t4;
-	} else t4 = $[11];
-	return t4;
-}
-function _temp() {}
-function setShelfCollapsed(workspaceKey, shelfKey, collapsed) {
-	canvasStore.send({
-		type: "setShelfCollapsed",
-		workspaceKey,
-		shelfKey,
-		collapsed
-	});
-}
 
 //#endregion
-export { canvasStore, setShelfCollapsed, useCollapsedShelves };
+export { canvasStore };