camox 0.65.1 → 0.66.0

package/dist/features/canvas/CamoxCanvas.js

@@ -14,13 +14,13 @@ import { useRendererHost } from "../renderer/RendererFrames.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";
 import { PREVIEW_PAGE_SLOT_ATTRIBUTE, PreviewPageFrameContext } from "../preview/previewPageFrame.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
-import { canvasBlockOverlap } from "./canvasFrameDocument.js";
-import { PageRecordContext, getPageRecord } from "../preview/pageRecord.js";
+import { canvasSeamCover } from "./canvasFrameDocument.js";
+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, canvasSnapTargets, positionCanvasPages } from "./canvasItems.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";
@@ -51,6 +51,35 @@ const CANVAS_INSETS = {
 	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 usePreparationFailure(error, t0) {
 	const $ = c(5);
 	const selected = t0 === void 0 ? true : t0;
@@ -237,7 +266,7 @@ function CanvasPagePreview(props) {
 	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = (frame) => {
 			setSettledFrame(frame);
-			setSettles(_temp);
+			setSettles(_temp3);
 		};
 		$[22] = t6;
 	} else t6 = $[22];
@@ -252,16 +281,16 @@ function CanvasPagePreview(props) {
 			if (started.current >= settles) return;
 			const request = settles;
 			started.current = request;
-			const pixelRatio = window.devicePixelRatio;
+			const scale = Math.min(1, CANVAS_THUMBNAIL_MAX_ZOOM * window.devicePixelRatio);
 			const options = {
-				scale: Math.min(1, CANVAS_THUMBNAIL_MAX_ZOOM * pixelRatio),
-				blockOverlap: canvasBlockOverlap(CANVAS_THUMBNAIL_MAX_ZOOM, pixelRatio)
+				scale,
+				seamCover: canvasSeamCover(scale, 1)
 			};
 			const tokens = [
 				props.pathname,
 				props.pageId,
 				props.derivedLayoutId
-			].filter(_temp2);
+			].filter(_temp4);
 			thumbnails.capture(key, settledFrame, tokens, options).catch((error) => {
 				thumbnails.abandon(key);
 				console.warn(`[camox] Could not capture ${props.pathname} for the Canvas.`, error);
@@ -366,10 +395,10 @@ function CanvasPagePreview(props) {
 	} else t13 = $[52];
 	return t13;
 }
-function _temp2(token) {
+function _temp4(token) {
 	return !!token;
 }
-function _temp(count) {
+function _temp3(count) {
 	return count + 1;
 }
 function CanvasPageFrameLoader(t0) {
@@ -802,7 +831,7 @@ function useWorkspaceThumbnails(workspaceKey) {
 	return thumbnails;
 }
 function CanvasWorkspace(t0) {
-	const $ = c(42);
+	const $ = c(43);
 	const { ref, pages, selectedPage, previewedPage, intendedPageKey, runtimeBasePath, viewport, onActivate, onSelectionIntent } = t0;
 	const { apiUrl, projectUuid } = useAuthContext();
 	const renamePage = useRenamePage();
@@ -871,7 +900,8 @@ function CanvasWorkspace(t0) {
 		$[14] = t5;
 	} else t5 = $[14];
 	const [previewPathnames, setPreviewPathnames] = React.useState(t5);
-	const { items, width } = positionCanvasPages(pages);
+	const gap = useCanvasItemGap();
+	const { items, width } = positionCanvasPages(pages, gap);
 	let t6;
 	if ($[15] !== previewPathnames || $[16] !== previewedPage?.key || $[17] !== previewedPath || $[18] !== selectedPage?.key || $[19] !== selectedPath) {
 		t6 = (t7) => {
@@ -987,14 +1017,15 @@ function CanvasWorkspace(t0) {
 		$[35] = t13;
 	} else t13 = $[35];
 	let t14;
-	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[36] !== gap) {
 		t14 = {
-			gap: 240,
+			gap,
 			transform: CANVAS_WORLD_TRANSFORM,
 			transformOrigin: "0 0"
 		};
-		$[36] = t14;
-	} else t14 = $[36];
+		$[36] = gap;
+		$[37] = t14;
+	} else t14 = $[37];
 	const t17 = [...pageSlots.values()].map((t16) => {
 		const { page: page_1, pathname: pathname_4, left: left_0 } = t16;
 		return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
@@ -1025,26 +1056,26 @@ function CanvasWorkspace(t0) {
 		}, page_1.key);
 	});
 	let t18;
-	if ($[37] !== pages.length) {
+	if ($[38] !== pages.length) {
 		t18 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
-		$[37] = pages.length;
-		$[38] = t18;
-	} else t18 = $[38];
+		$[38] = pages.length;
+		$[39] = t18;
+	} else t18 = $[39];
 	let t19;
-	if ($[39] !== instructionsId) {
+	if ($[40] !== instructionsId) {
 		t19 = /* @__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."
 		});
-		$[39] = instructionsId;
-		$[40] = t19;
-	} else t19 = $[40];
+		$[40] = instructionsId;
+		$[41] = t19;
+	} else t19 = $[41];
 	let t20;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t20 = ["left", "right"].map(_temp3);
-		$[41] = t20;
-	} else t20 = $[41];
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = ["left", "right"].map(_temp5);
+		$[42] = t20;
+	} else t20 = $[42];
 	return /* @__PURE__ */ jsxs("div", {
 		ref: viewportRef,
 		role: "region",
@@ -1092,7 +1123,7 @@ function CanvasWorkspace(t0) {
 		]
 	});
 }
-function _temp3(side) {
+function _temp5(side) {
 	return /* @__PURE__ */ jsx("div", {
 		"aria-hidden": true,
 		"data-canvas-scrim": side,
@@ -1106,11 +1137,11 @@ function _temp3(side) {
 	}, side);
 }
 function CamoxCanvas(t0) {
-	const $ = c(68);
+	const $ = c(65);
 	const { runtimeBasePath } = t0;
 	const layouts = useRoutableLayouts();
 	const location = useLocation();
-	const viewportMode = useSelector(previewStore, _temp4);
+	const viewportMode = useSelector(previewStore, _temp6);
 	const viewport = CANVAS_DEVICES[viewportMode === "full" ? "desktop" : viewportMode];
 	const [activeFrame, setActiveFrame] = React.useState(null);
 	const selectedPath = location.pathname;
@@ -1140,7 +1171,7 @@ function CamoxCanvas(t0) {
 		t3 = [];
 		$[4] = t3;
 	} else t3 = $[4];
-	React.useEffect(_temp6, t3);
+	React.useEffect(_temp8, t3);
 	const projectUuid = useProjectUuid();
 	let t4;
 	if ($[5] !== projectUuid) {
@@ -1195,19 +1226,12 @@ function CamoxCanvas(t0) {
 		derivedLayoutId: derivedLayoutIdOf(intendedPage)
 	}), t9);
 	const recordResult = derivedLayoutIdOf(intendedPage) ? intendedFrameInput?.derived?.result : void 0;
-	let t10;
-	if ($[14] !== recordResult) {
-		t10 = getPageRecord(recordResult);
-		$[14] = recordResult;
-		$[15] = t10;
-	} else t10 = $[15];
-	const pageRecord = t10;
 	usePreparationFailure((!project.isFetching ? project.error : null) ?? (!pages.isFetching ? pages.error : null));
 	const preparation = React.useContext(PreviewPreparationContext);
+	let t10;
 	let t11;
-	let t12;
-	if ($[16] !== location.pathname || $[17] !== pages.error || $[18] !== pages.isPending || $[19] !== preparation || $[20] !== project.error || $[21] !== project.isPending || $[22] !== selectedPage || $[23] !== viewLocale.locales) {
-		t11 = () => {
+	if ($[14] !== location.pathname || $[15] !== pages.error || $[16] !== pages.isPending || $[17] !== preparation || $[18] !== project.error || $[19] !== project.isPending || $[20] !== selectedPage || $[21] !== viewLocale.locales) {
+		t10 = () => {
 			if (project.isPending || pages.isPending || project.error || pages.error) return;
 			if (parseLocalePath(location.pathname, viewLocale.locales).path === "/camox/canvas") {
 				preparation?.ready();
@@ -1216,7 +1240,7 @@ function CamoxCanvas(t0) {
 			if (selectedPage) return;
 			preparation?.fail(/* @__PURE__ */ new Error(`No canvas page matches ${location.pathname}.`));
 		};
-		t12 = [
+		t11 = [
 			project.isPending,
 			pages.isPending,
 			project.error,
@@ -1226,32 +1250,32 @@ function CamoxCanvas(t0) {
 			viewLocale.locales,
 			preparation
 		];
-		$[16] = location.pathname;
-		$[17] = pages.error;
-		$[18] = pages.isPending;
-		$[19] = preparation;
-		$[20] = project.error;
-		$[21] = project.isPending;
-		$[22] = selectedPage;
-		$[23] = viewLocale.locales;
-		$[24] = t11;
-		$[25] = t12;
+		$[14] = location.pathname;
+		$[15] = pages.error;
+		$[16] = pages.isPending;
+		$[17] = preparation;
+		$[18] = project.error;
+		$[19] = project.isPending;
+		$[20] = selectedPage;
+		$[21] = viewLocale.locales;
+		$[22] = t10;
+		$[23] = t11;
 	} else {
-		t11 = $[24];
-		t12 = $[25];
+		t10 = $[22];
+		t11 = $[23];
 	}
-	React.useEffect(t11, t12);
+	React.useEffect(t10, t11);
 	if (project.error || pages.error) {
+		let t12;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx("p", { children: "Could not load the site’s pages." });
+			$[24] = t12;
+		} else t12 = $[24];
 		let t13;
-		if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = /* @__PURE__ */ jsx("p", { children: "Could not load the site’s pages." });
-			$[26] = t13;
-		} else t13 = $[26];
-		let t14;
-		if ($[27] !== pages || $[28] !== project) {
-			t14 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsxs("div", {
+		if ($[25] !== pages || $[26] !== project) {
+			t13 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsxs("div", {
 				role: "alert",
-				children: [t13, /* @__PURE__ */ jsx("button", {
+				children: [t12, /* @__PURE__ */ jsx("button", {
 					className: "mt-4 underline",
 					onClick: () => {
 						if (project.error) project.refetch();
@@ -1260,104 +1284,102 @@ function CamoxCanvas(t0) {
 					children: "Try again"
 				})]
 			}) });
-			$[27] = pages;
-			$[28] = project;
-			$[29] = t14;
-		} else t14 = $[29];
-		return t14;
+			$[25] = pages;
+			$[26] = project;
+			$[27] = t13;
+		} else t13 = $[27];
+		return t13;
 	}
 	if (project.isPending || pages.isPending) {
-		let t13;
-		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-			t13 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsx("span", {
+		let t12;
+		if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+			t12 = /* @__PURE__ */ jsx(CanvasMessage, { children: /* @__PURE__ */ jsx("span", {
 				role: "status",
 				children: "Loading canvas…"
 			}) });
-			$[30] = t13;
-		} else t13 = $[30];
-		return t13;
+			$[28] = t12;
+		} else t12 = $[28];
+		return t12;
 	}
 	const editingOwner = activeFrame?.pathname === intended.pathname ? activeFrame.owner : null;
-	let t13;
-	if ($[31] !== selectedPage?.kind) {
-		t13 = selectedPage?.kind === "curated" && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
-		$[31] = selectedPage?.kind;
-		$[32] = t13;
-	} else t13 = $[32];
-	const t14 = intendedPage?.key;
+	let t12;
+	if ($[29] !== selectedPage?.kind) {
+		t12 = selectedPage?.kind === "curated" && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
+		$[29] = selectedPage?.kind;
+		$[30] = t12;
+	} else t12 = $[30];
+	const t13 = intendedPage?.key;
+	let t14;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = (key) => workspace.current?.showPage(key);
+		$[31] = t14;
+	} else t14 = $[31];
 	let t15;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = (key) => workspace.current?.showPage(key);
-		$[33] = t15;
-	} else t15 = $[33];
-	let t16;
-	if ($[34] !== canvasPages || $[35] !== t14) {
-		t16 = {
+	if ($[32] !== canvasPages || $[33] !== t13) {
+		t15 = {
 			pages: canvasPages,
-			selectedKey: t14,
-			onShowPage: t15
+			selectedKey: t13,
+			onShowPage: t14
 		};
-		$[34] = canvasPages;
-		$[35] = t14;
-		$[36] = t16;
-	} else t16 = $[36];
+		$[32] = canvasPages;
+		$[33] = t13;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = () => workspace.current?.showWholeCanvas();
+		$[35] = t16;
+	} else t16 = $[35];
 	let t17;
-	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = () => workspace.current?.showWholeCanvas();
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
-	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== runtimeBasePath || $[42] !== t16) {
-		t18 = /* @__PURE__ */ jsx(ContentSidebar, {
+	if ($[36] !== editingOwner || $[37] !== intendedPage || $[38] !== runtimeBasePath || $[39] !== t15) {
+		t17 = /* @__PURE__ */ jsx(ContentSidebar, {
 			page: intendedPage,
-			navigator: t16,
-			onShowWholeCanvas: t17,
+			navigator: t15,
+			onShowWholeCanvas: t16,
 			owner: editingOwner,
-			pageRecord,
 			runtimeBasePath
 		});
-		$[38] = editingOwner;
-		$[39] = intendedPage;
-		$[40] = pageRecord;
-		$[41] = runtimeBasePath;
-		$[42] = t16;
+		$[36] = editingOwner;
+		$[37] = intendedPage;
+		$[38] = runtimeBasePath;
+		$[39] = t15;
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] !== recordResult || $[42] !== t17) {
+		t18 = /* @__PURE__ */ jsx(PageRecordContext, {
+			value: recordResult,
+			children: t17
+		});
+		$[41] = recordResult;
+		$[42] = t17;
 		$[43] = t18;
 	} else t18 = $[43];
 	let t19;
-	if ($[44] !== recordResult || $[45] !== t18) {
-		t19 = /* @__PURE__ */ jsx(PageRecordContext, {
-			value: recordResult,
-			children: t18
-		});
-		$[44] = recordResult;
-		$[45] = t18;
-		$[46] = t19;
-	} else t19 = $[46];
-	let t20;
-	if ($[47] !== intended || $[48] !== navigate || $[49] !== t19) {
-		t20 = /* @__PURE__ */ jsx(NavigationProvider, {
+	if ($[44] !== intended || $[45] !== navigate || $[46] !== t18) {
+		t19 = /* @__PURE__ */ jsx(NavigationProvider, {
 			location: intended,
 			navigate,
-			children: t19
+			children: t18
 		});
-		$[47] = intended;
-		$[48] = navigate;
-		$[49] = t19;
-		$[50] = t20;
-	} else t20 = $[50];
-	const t21 = intendedPage?.key;
-	let t22;
-	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-		t22 = (pathname, owner, release) => setActiveFrame({
+		$[44] = intended;
+		$[45] = navigate;
+		$[46] = t18;
+		$[47] = t19;
+	} else t19 = $[47];
+	const t20 = intendedPage?.key;
+	let t21;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = (pathname, owner, release) => setActiveFrame({
 			pathname,
 			owner,
 			release
 		});
-		$[51] = t22;
-	} else t22 = $[51];
-	let t23;
-	if ($[52] !== location || $[53] !== setIntent) {
-		t23 = (pathname_0) => setIntent({
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== location || $[50] !== setIntent) {
+		t22 = (pathname_0) => setIntent({
 			from: location.pathname,
 			to: {
 				...location,
@@ -1365,58 +1387,58 @@ function CamoxCanvas(t0) {
 				href: new URL(`${pathname_0}${location.search}${location.hash}`, window.location.href).href
 			}
 		});
-		$[52] = location;
-		$[53] = setIntent;
-		$[54] = t23;
-	} else t23 = $[54];
-	let t24;
-	if ($[55] !== canvasPages || $[56] !== previewedPage || $[57] !== project.data.id || $[58] !== runtimeBasePath || $[59] !== selectedPage || $[60] !== t21 || $[61] !== t23 || $[62] !== viewport) {
-		t24 = /* @__PURE__ */ jsx(CanvasWorkspace, {
+		$[49] = location;
+		$[50] = setIntent;
+		$[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) {
+		t23 = /* @__PURE__ */ jsx(CanvasWorkspace, {
 			ref: workspace,
 			pages: canvasPages,
 			selectedPage,
 			previewedPage,
-			intendedPageKey: t21,
+			intendedPageKey: t20,
 			runtimeBasePath,
 			viewport,
-			onActivate: t22,
-			onSelectionIntent: t23
+			onActivate: t21,
+			onSelectionIntent: t22
 		}, project.data.id);
-		$[55] = canvasPages;
-		$[56] = previewedPage;
-		$[57] = project.data.id;
-		$[58] = runtimeBasePath;
-		$[59] = selectedPage;
-		$[60] = t21;
-		$[61] = t23;
-		$[62] = viewport;
-		$[63] = t24;
-	} else t24 = $[63];
-	let t25;
-	if ($[64] !== t13 || $[65] !== t20 || $[66] !== t24) {
-		t25 = /* @__PURE__ */ jsxs("div", {
+		$[52] = canvasPages;
+		$[53] = previewedPage;
+		$[54] = project.data.id;
+		$[55] = runtimeBasePath;
+		$[56] = selectedPage;
+		$[57] = t20;
+		$[58] = t22;
+		$[59] = viewport;
+		$[60] = t23;
+	} else t23 = $[60];
+	let t24;
+	if ($[61] !== t12 || $[62] !== t19 || $[63] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
 			className: "relative flex min-h-0 flex-1 overflow-hidden",
 			children: [
-				t13,
-				t20,
-				t24
+				t12,
+				t19,
+				t23
 			]
 		});
-		$[64] = t13;
-		$[65] = t20;
-		$[66] = t24;
-		$[67] = t25;
-	} else t25 = $[67];
-	return t25;
+		$[61] = t12;
+		$[62] = t19;
+		$[63] = t23;
+		$[64] = t24;
+	} else t24 = $[64];
+	return t24;
 }
-function _temp6() {
+function _temp8() {
 	previewStore.send({ type: "clearSelection" });
-	return _temp5;
+	return _temp7;
 }
-function _temp5() {
+function _temp7() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp4(state) {
+function _temp6(state) {
 	return state.context.viewportMode;
 }
 

package/dist/features/canvas/canvasFrameCapture.js

@@ -1,5 +1,3 @@
-import { BLOCK_OVERLAP_SELECTOR } from "./canvasFrameDocument.js";
-
 //#region src/features/canvas/canvasFrameCapture.ts
 const XHTML = "http://www.w3.org/1999/xhtml";
 const URL_PATTERN = /url\(\s*(["']?)([^"')]+)\1\s*\)/g;
@@ -149,7 +147,7 @@ function createFrameCapturer() {
 		}))).filter(Boolean).join("\n");
 	}
 	/** The SVG drawing `doc`'s content at `width` by `height` CSS pixels, at `scale`. */
-	async function documentSvg(doc, width, height, scale, blockOverlap) {
+	async function documentSvg(doc, width, height, scale, seamCover) {
 		const view = doc.defaultView;
 		if (!view || !doc.body) throw new Error("The frame has no document to capture.");
 		const html = doc.documentElement.cloneNode(false);
@@ -211,7 +209,7 @@ function createFrameCapturer() {
 		for (const element of Array.from(body.querySelectorAll("[data-camox-studio]"))) element.remove();
 		freezeAnimations(doc, clonesOf);
 		const background = [doc.documentElement, doc.body].map((element) => view.getComputedStyle(element).backgroundColor).find((color) => color && color !== "rgba(0, 0, 0, 0)");
-		if (blockOverlap !== void 0) html.style.setProperty("--camox-block-overlap", `${blockOverlap}px`);
+		if (seamCover !== void 0) html.style.setProperty("--camox-seam-cover", `${seamCover}px`);
 		html.style.setProperty("width", `${width}px`);
 		html.style.setProperty("height", `${height}px`);
 		html.style.setProperty("overflow", "hidden", "important");
@@ -234,14 +232,12 @@ function createFrameCapturer() {
 	* Draws a same-origin frame, as its content is now, at `scale` times its CSS size. Its
 	* animations are frozen where they are.
 	*/
-	async function capture(frame, { scale, blockOverlap }) {
+	async function capture(frame, { scale, seamCover }) {
 		const doc = sameOriginDocument(frame);
 		const width = frame.offsetWidth;
-		let height = frame.offsetHeight;
+		const height = frame.offsetHeight;
 		if (!doc || !width || !height) throw new Error("The frame can't be captured.");
-		const overlap = blockOverlapOf(doc);
-		if (blockOverlap !== void 0 && blockOverlap !== overlap) height += doc.querySelectorAll(BLOCK_OVERLAP_SELECTOR).length * (overlap - blockOverlap);
-		const svg = await documentSvg(doc, width, height, scale, blockOverlap);
+		const svg = await documentSvg(doc, width, height, scale, seamCover);
 		const image = new Image();
 		image.src = svgUrl(svg);
 		await image.decode();
@@ -345,9 +341,6 @@ function freezeAnimations(doc, clonesOf) {
 		}
 	}
 }
-function blockOverlapOf(doc) {
-	return parseFloat(doc.documentElement.style.getPropertyValue("--camox-block-overlap")) || 0;
-}
 function svgUrl(svg) {
 	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }