camox 0.45.0 → 0.47.0

package/dist/features/canvas/sidebar/CanvasNavigator.js

@@ -1,224 +1,122 @@
-import { cn } from "../../../lib/utils.js";
 import { previewStore } from "../../preview/previewStore.js";
 import { canvasPagePath } from "../canvasPages.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronsUpDown, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, commandFilter } from "@camox/ui/command";
 
 //#region src/features/canvas/sidebar/CanvasNavigator.tsx
-/** Blocks behind a bordered toggle, collapsed until opened. */
-function CollapsedBlocks(t0) {
-	const $ = c(14);
-	const { label, children } = t0;
-	const [expanded, setExpanded] = React.useState(false);
-	let t1;
-	let t2;
-	let t3;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = cn("hover:bg-accent/75 flex w-full cursor-default items-center gap-2 px-3 py-2 text-left text-sm", "focus-visible:rounded-none focus-visible:ring-inset");
-		t2 = () => setExpanded(_temp);
-		t3 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-4 shrink-0" });
-		$[0] = t1;
-		$[1] = t2;
-		$[2] = t3;
-	} else {
-		t1 = $[0];
-		t2 = $[1];
-		t3 = $[2];
-	}
-	let t4;
-	if ($[3] !== label) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: label
-		});
-		$[3] = label;
-		$[4] = t4;
-	} else t4 = $[4];
-	let t5;
-	if ($[5] !== expanded || $[6] !== t4) {
-		t5 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": expanded,
-			className: t1,
-			onClick: t2,
-			children: [t3, t4]
-		});
-		$[5] = expanded;
-		$[6] = t4;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== children || $[9] !== expanded) {
-		t6 = expanded && /* @__PURE__ */ jsx("div", {
-			className: "border-input border-t p-1",
-			children
-		});
-		$[8] = children;
-		$[9] = expanded;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== t5 || $[12] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "border-input flex flex-col overflow-hidden rounded-lg border shadow-xs",
-			children: [t5, t6]
-		});
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
-	} else t7 = $[13];
-	return t7;
-}
-function _temp(value) {
-	return !value;
-}
-function canvasItemLabel(item) {
-	return item.kind === "page" ? item.page.title : item.block._internal.title;
-}
-/** Search an item by its label, and a Page by its path too, never by its key. */
-function canvasItemKeywords(item) {
-	const label = canvasItemLabel(item);
-	const path = item.kind === "page" ? canvasPagePath(item.page) : null;
-	return path ? [label, path] : [label];
-}
 /**
-* The Canvas Navigator, shown while nothing is selected: every item of the Canvas,
-* in Canvas order, grouped under its shelf with its count, and a search that takes
-* focus. Pages show with their path; blocks start collapsed, though a search still
-* finds them. Picking an item shows it: the camera goes to it.
+* The Canvas Navigator, shown while nothing is selected: every Page of the Canvas,
+* in Canvas order, with its path, and a search that takes focus. Picking a Page
+* shows it: the camera goes to it.
 */
 function CanvasNavigator(t0) {
-	const $ = c(20);
-	const { shelves, selectedKey, onShowItem } = t0;
+	const $ = c(17);
+	const { pages, selectedKey, onShowPage } = t0;
 	const [search, setSearch] = React.useState("");
 	let t1;
 	if ($[0] !== search) {
-		t1 = search.trim();
-		$[0] = search;
-		$[1] = t1;
-	} else t1 = $[1];
-	const searching = t1 !== "";
-	let t2;
-	if ($[2] !== onShowItem || $[3] !== selectedKey) {
-		t2 = (item) => {
-			const selected = item.key === selectedKey;
-			const path = item.kind === "page" ? canvasPagePath(item.page) : null;
-			return /* @__PURE__ */ jsx(CommandItem, {
-				value: item.key,
-				keywords: canvasItemKeywords(item),
-				"data-checked": selected,
-				"aria-current": selected ? "true" : void 0,
-				onSelect: () => onShowItem(item.key),
-				children: item.kind === "page" ? /* @__PURE__ */ jsxs("div", {
-					className: "flex min-w-0 flex-col py-0.5",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate font-medium",
-						children: canvasItemLabel(item)
-					}), path && /* @__PURE__ */ jsx("span", {
-						className: "text-muted-foreground truncate font-mono text-xs",
-						children: path
-					})]
-				}) : /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: canvasItemLabel(item)
-				})
-			}, item.key);
-		};
-		$[2] = onShowItem;
-		$[3] = selectedKey;
-		$[4] = t2;
-	} else t2 = $[4];
-	const renderItem = t2;
-	let t3;
-	if ($[5] !== search) {
-		t3 = /* @__PURE__ */ jsx(CommandInput, {
-			placeholder: "Search the Canvas…",
+		t1 = /* @__PURE__ */ jsx(CommandInput, {
+			placeholder: "Search pages…",
 			autoFocus: true,
 			value: search,
 			onValueChange: setSearch
 		});
-		$[5] = search;
-		$[6] = t3;
-	} else t3 = $[6];
+		$[0] = search;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CommandEmpty, { children: "Nothing found." });
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = `Pages (${pages.length})`;
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(CommandEmpty, { children: "Nothing found." });
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== renderItem || $[9] !== searching || $[10] !== shelves) {
-		let t6;
-		if ($[12] !== renderItem || $[13] !== searching) {
-			t6 = (shelf) => {
-				const heading = `${shelf.label} (${shelf.items.length})`;
-				if (shelf.key === "shelf:pages") return /* @__PURE__ */ jsxs(CommandGroup, {
-					heading,
-					children: [shelf.items.map(renderItem), /* @__PURE__ */ jsx("div", {
-						className: "p-1",
-						children: /* @__PURE__ */ jsxs(Button, {
-							type: "button",
-							variant: "secondary",
-							className: "w-full",
-							onClick: _temp3,
-							children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
-						})
-					})]
-				}, shelf.key);
-				return /* @__PURE__ */ jsx(CommandGroup, {
-					heading: searching ? heading : void 0,
-					children: searching || shelf.items.length === 0 ? shelf.items.map(renderItem) : /* @__PURE__ */ jsx("div", {
-						className: "p-1",
-						children: /* @__PURE__ */ jsx(CollapsedBlocks, {
-							label: `${shelf.items.length} ${shelf.items.length === 1 ? "block" : "blocks"}`,
-							children: shelf.items.map(renderItem)
-						})
+	if ($[3] !== onShowPage || $[4] !== pages || $[5] !== selectedKey) {
+		let t5;
+		if ($[7] !== onShowPage || $[8] !== selectedKey) {
+			t5 = (page) => {
+				const selected = page.key === selectedKey;
+				const path = canvasPagePath(page);
+				return /* @__PURE__ */ jsx(CommandItem, {
+					value: page.key,
+					keywords: path ? [page.title, path] : [page.title],
+					"data-checked": selected,
+					"aria-current": selected ? "true" : void 0,
+					onSelect: () => onShowPage(page.key),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col py-0.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: page.title
+						}), path && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground truncate font-mono text-xs",
+							children: path
+						})]
 					})
-				}, shelf.key);
+				}, page.key);
 			};
-			$[12] = renderItem;
-			$[13] = searching;
-			$[14] = t6;
-		} else t6 = $[14];
-		t5 = shelves.map(t6);
-		$[8] = renderItem;
-		$[9] = searching;
-		$[10] = shelves;
-		$[11] = t5;
-	} else t5 = $[11];
+			$[7] = onShowPage;
+			$[8] = selectedKey;
+			$[9] = t5;
+		} else t5 = $[9];
+		t4 = pages.map(t5);
+		$[3] = onShowPage;
+		$[4] = pages;
+		$[5] = selectedKey;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "p-1",
+			children: /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "secondary",
+				className: "w-full",
+				onClick: _temp2,
+				children: [/* @__PURE__ */ jsx(Plus, {}), "Create page"]
+			})
+		});
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[15] !== t5) {
+	if ($[11] !== t3 || $[12] !== t4) {
 		t6 = /* @__PURE__ */ jsxs(CommandList, {
 			className: "max-h-none flex-1",
-			children: [t4, t5]
+			children: [t2, /* @__PURE__ */ jsxs(CommandGroup, {
+				heading: t3,
+				children: [t4, t5]
+			})]
 		});
-		$[15] = t5;
-		$[16] = t6;
-	} else t6 = $[16];
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
 	let t7;
-	if ($[17] !== t3 || $[18] !== t6) {
+	if ($[14] !== t1 || $[15] !== t6) {
 		t7 = /* @__PURE__ */ jsx("div", {
 			"data-canvas-navigator": true,
 			className: "flex min-h-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsxs(Command$1, {
 				className: "rounded-none! bg-transparent",
-				filter: _temp2,
-				children: [t3, t6]
+				filter: _temp,
+				children: [t1, t6]
 			})
 		});
-		$[17] = t3;
-		$[18] = t6;
-		$[19] = t7;
-	} else t7 = $[19];
+		$[14] = t1;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
 	return t7;
 }
-function _temp3() {
+function _temp2() {
 	return previewStore.send({ type: "openCreatePageModal" });
 }
-function _temp2(_value, search_0, keywords) {
+function _temp(_value, search_0, keywords) {
 	return commandFilter(keywords?.join(" ") ?? "", search_0);
 }
 

package/dist/features/canvas/sidebar/CanvasSidebar.js

@@ -1,7 +1,6 @@
 import { CanvasSidebarFrame } from "./CanvasSidebarFrame.js";
 import { CreatePageModal } from "../../preview/components/CreatePageModal.js";
 import { CanvasNavigator } from "./CanvasNavigator.js";
-import { CatalogBlockInspector } from "./CatalogBlockInspector.js";
 import { PageInspector } from "./PageInspector.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,50 +8,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/canvas/sidebar/CanvasSidebar.tsx
 /**
 * The sidebar beside the Canvas. Without a selection, it shows the Canvas Navigator;
-* with one, the Canvas Inspector of the selected Page or block of the Block Catalog.
+* with one, the Canvas Inspector of the selected Page.
 */
 function CanvasSidebar(t0) {
-	const $ = c(12);
-	const { page, catalog, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
+	const $ = c(11);
+	const { page, navigator, onShowWholeCanvas, onRenamePage, owner: t1, pageRecord } = t0;
 	const owner = t1 === void 0 ? null : t1;
-	const t2 = catalog?.block._internal.title ?? page?.title ?? "Canvas navigator";
+	const t2 = page?.title ?? "Canvas navigator";
 	let t3;
-	if ($[0] !== catalog || $[1] !== navigator || $[2] !== onRenamePage || $[3] !== onShowWholeCanvas || $[4] !== owner || $[5] !== page || $[6] !== pageRecord) {
-		t3 = catalog ? /* @__PURE__ */ jsx(CatalogBlockInspector, {
-			block: catalog.block,
-			projectId: catalog.projectId,
-			onBack: onShowWholeCanvas
-		}) : page ? /* @__PURE__ */ jsx(PageInspector, {
+	if ($[0] !== navigator || $[1] !== onRenamePage || $[2] !== onShowWholeCanvas || $[3] !== owner || $[4] !== page || $[5] !== pageRecord) {
+		t3 = page ? /* @__PURE__ */ jsx(PageInspector, {
 			page,
 			owner,
 			pageRecord,
 			onBack: onShowWholeCanvas,
 			onRenamePage
 		}) : /* @__PURE__ */ jsx(CanvasNavigator, { ...navigator });
-		$[0] = catalog;
-		$[1] = navigator;
-		$[2] = onRenamePage;
-		$[3] = onShowWholeCanvas;
-		$[4] = owner;
-		$[5] = page;
-		$[6] = pageRecord;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[0] = navigator;
+		$[1] = onRenamePage;
+		$[2] = onShowWholeCanvas;
+		$[3] = owner;
+		$[4] = page;
+		$[5] = pageRecord;
+		$[6] = t3;
+	} else t3 = $[6];
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(CreatePageModal, {});
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = t4;
+	} else t4 = $[7];
 	let t5;
-	if ($[9] !== t2 || $[10] !== t3) {
+	if ($[8] !== t2 || $[9] !== t3) {
 		t5 = /* @__PURE__ */ jsxs(CanvasSidebarFrame, {
 			label: t2,
 			children: [t3, t4]
 		});
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t5;
-	} else t5 = $[11];
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
 	return t5;
 }
 

package/dist/features/canvas/sidebar/CuratedPageInspector.js

@@ -1,7 +1,7 @@
 import { useProjectUuid } from "../../../lib/auth.js";
 import { reads, useRead } from "../../../lib/studio-reads.js";
 import { useLocalePath } from "../../../lib/view-locale.js";
-import { AddBlockDialog } from "../../preview/components/AddBlockDialog.js";
+import { AddBlockSheet } from "../../preview/components/AddBlockSheet.js";
 import { PreviewEditingOwnerContext } from "../../preview/previewSelection.js";
 import { PageInfo } from "../../preview/components/PageInfo.js";
 import { PageTree } from "../../preview/components/PageTree.js";
@@ -51,7 +51,7 @@ function CuratedPageInspector() {
 	const t3 = owner?.kind === "page" && owner.pageId === pageId;
 	let t4;
 	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(AddBlockDialog, { focusCreatedBlock: t3 });
+		t4 = /* @__PURE__ */ jsx(AddBlockSheet, { focusCreatedBlock: t3 });
 		$[6] = t3;
 		$[7] = t4;
 	} else t4 = $[7];

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";
@@ -71,13 +71,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 	}, []);
 	/**
-	* Pan immediately so a world x sits at or right of a screen x; never pans
-	* otherwise, nor while a selection holds the camera.
-	*/
-	const keepInView = React.useCallback((worldX, screenX) => {
-		flightControls.current?.keepInView(worldX, screenX);
-	}, []);
-	/**
 	* Pan vertically to an element inside a Canvas frame, such as a selected block,
 	* unless enough of it already shows. A page flight or a drag in progress keeps the camera.
 	*/
@@ -240,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);
@@ -271,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({
@@ -278,7 +276,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				workspaceKey,
 				view: {
 					camera,
-					fitted: Math.abs(camera.scale - minimumScale) < 1e-8
+					fitted: isOverview(camera)
 				}
 			});
 		};
@@ -433,18 +431,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 		flightControls.current = {
 			flyTo: startFlight,
-			keepInView: (worldX, screenX) => {
-				const x = screenX - worldX * camera.scale;
-				if (selection || camera.x >= x) return;
-				cancelCameraFlight();
-				restoredCamera = void 0;
-				fittingInitialPage = false;
-				gesture = void 0;
-				applyCamera({
-					...camera,
-					x
-				}, true);
-			},
 			reveal: (element, immediate) => {
 				const frame = element.ownerDocument.defaultView?.frameElement;
 				if (!frame || flight && !flight.pan || pointers.size) return;
@@ -535,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);
@@ -793,7 +779,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		contentRef,
 		flyTo,
 		mirrorCamera,
-		keepInView,
 		reveal,
 		fitAll
 	};

package/dist/features/canvas/useCanvasFrame.js

@@ -20,7 +20,7 @@ function toError(error) {
 * Unless live, the frame's document is paused. A resting frame keeps its size:
 * its content is hidden, and must not shrink the frame and move the Canvas.
 */
-function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, subject, mode }) {
+function useCanvasFrame({ previewDocument, href, width, viewportHeight, mode }) {
 	const iframeRef = React.useRef(null);
 	const [srcDoc, setSrcDoc] = React.useState();
 	const [mount, setMount] = React.useState(null);
@@ -44,7 +44,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 	React.useLayoutEffect(() => {
 		const iframe = iframeRef.current;
 		if (!iframe || !mount) return;
-		const stop = observeCanvasDocument(iframe, mount, viewportHeight, fit, () => restingRef.current);
+		const stop = observeCanvasDocument(iframe, mount, viewportHeight, () => restingRef.current);
 		sizing.current = stop;
 		return () => {
 			stop();
@@ -53,8 +53,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 	}, [
 		mount,
 		viewportHeight,
-		width,
-		fit
+		width
 	]);
 	React.useEffect(() => {
 		if (!mount || live) return;
@@ -73,7 +72,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 				try {
 					const loaded = iframeRef.current;
 					const root = (loaded?.contentDocument)?.querySelector("[data-camox-preview-root]");
-					if (!root) throw new Error(`The ${subject} preview document has no content root.`);
+					if (!root) throw new Error("The page preview document has no content root.");
 					if (root === mount) return;
 					root.replaceChildren();
 					setMount(root);
@@ -82,7 +81,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, fit, sub
 					setFailure(toError(error));
 				}
 			},
-			onError: () => setFailure(/* @__PURE__ */ new Error(`The ${subject} preview document could not load.`))
+			onError: () => setFailure(/* @__PURE__ */ new Error("The page preview document could not load."))
 		}
 	};
 }