camox 0.44.0 → 0.45.0

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

@@ -1,79 +1,78 @@
 import { actionsStore } from "../../provider/actionsStore.js";
+import { NavigationDisabled, NavigationLocation } from "../../navigation/navigation.js";
+import { ArtifactStudioContext } from "../../../core/hooks/useArtifactHost.js";
 import { checkIfInputFocused, cn } from "../../../lib/utils.js";
-import { SharedChromeContext } from "../../runtime/SharedChromeContext.js";
-import { areCommentsEnabled } from "../commentsEnabled.js";
-import { previewStore, selectIsCommentMode, selectIsEditMode } from "../previewStore.js";
-import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
-import { PreviewPageContext } from "../previewSelection.js";
+import { previewStore } from "../previewStore.js";
+import { useEditingFrameClaim, useEditingOwner } from "../editingFrame.js";
 import { Frame, useFrame } from "./Frame.js";
+import { previewPageIframeProps, usePreviewPageFrame } from "../previewPageFrame.js";
+import { EditableSurfaceContext } from "../../../core/hooks/useIsEditable.js";
+import { adoptCanvasDocument, pauseCanvasDocument } from "../../canvas/canvasFrameDocument.js";
+import { CanvasWorkspaceContext } from "../../canvas/canvasZoom.js";
+import { forwardCanvasWheel, useCanvasFrameInput } from "../../canvas/useCanvasFrameInput.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
+import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
-import { FieldToolbar } from "./FieldToolbar.js";
 import { MobilePreviewDrawer } from "./MobilePreviewDrawer.js";
 import { Overlays } from "./Overlays.js";
 import { OverlayTracker } from "./OverlayTracker.js";
-import { PreviewComments } from "./PreviewComments.js";
-import { PreviewToolbar } from "./PreviewToolbar.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { PanelContent } from "@camox/ui/panel";
+import { flushSync } from "react-dom";
 
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
-	const $ = c(9);
-	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
-		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
-	}
-	const { children, style, className, onIframeReady } = t0;
+	const $ = c(8);
+	const { children, style, className, iframeProps, inCanvas, onIframeReady } = t0;
 	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(KeyDownForwarder, {});
+		$[0] = t1;
+	} else t1 = $[0];
 	let t2;
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(FieldOverlayStyles, {});
-		t2 = /* @__PURE__ */ jsx(KeyDownForwarder, {});
-		t3 = /* @__PURE__ */ jsx(OverlayTracker, {});
-		$[1] = t1;
-		$[2] = t2;
-		$[3] = t3;
-	} else {
-		t1 = $[1];
-		t2 = $[2];
-		t3 = $[3];
-	}
-	let t4;
-	if ($[4] !== children || $[5] !== className || $[6] !== onIframeReady || $[7] !== style) {
-		t4 = /* @__PURE__ */ jsxs(Frame, {
+	if ($[1] !== children || $[2] !== className || $[3] !== iframeProps || $[4] !== inCanvas || $[5] !== onIframeReady || $[6] !== style) {
+		t2 = /* @__PURE__ */ jsxs(Frame, {
 			className,
 			style,
+			iframeProps,
+			inCanvas,
 			onIframeReady,
-			children: [
-				children,
-				t1,
-				t2,
-				t3
-			]
+			children: [children, t1]
 		});
-		$[4] = children;
-		$[5] = className;
-		$[6] = onIframeReady;
-		$[7] = style;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[1] = children;
+		$[2] = className;
+		$[3] = iframeProps;
+		$[4] = inCanvas;
+		$[5] = onIframeReady;
+		$[6] = style;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/** Shared by the single-page preview and each canvas document. */
+const PreviewFrameEffects = () => {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(FieldOverlayStyles, {}),
+			/* @__PURE__ */ jsx(KeyDownForwarder, {}),
+			/* @__PURE__ */ jsx(OverlayTracker, {})
+		] });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
 };
 const KeyDownForwarder = () => {
-	const $ = c(5);
-	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
-	}
+	const $ = c(4);
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
 	let t0;
 	let t1;
-	if ($[1] !== actions || $[2] !== iframeWindow) {
+	if ($[0] !== actions || $[1] !== iframeWindow) {
 		t0 = () => {
 			if (!iframeWindow || !iframeWindow.parent || iframeWindow.parent === iframeWindow) return;
 			const handleKeyDown = (e) => {
@@ -113,310 +112,612 @@ const KeyDownForwarder = () => {
 			};
 		};
 		t1 = [iframeWindow, actions];
-		$[1] = actions;
-		$[2] = iframeWindow;
-		$[3] = t0;
-		$[4] = t1;
+		$[0] = actions;
+		$[1] = iframeWindow;
+		$[2] = t0;
+		$[3] = t1;
 	} else {
-		t0 = $[3];
-		t1 = $[4];
+		t0 = $[2];
+		t1 = $[3];
 	}
 	React.useEffect(t0, t1);
 	return null;
 };
+/** The preview's read-only tree is never editable, whether or not the Canvas shows. */
+const READ_ONLY_ARTIFACT_STUDIO = {
+	editing: false,
+	canvas: false
+};
 const viewportClassName = {
 	tablet: "h-[1024px] w-[768px] max-h-full max-w-full",
 	mobile: "h-175 w-[393px] max-h-full max-w-full"
 };
 function CuratedBlockShortcuts() {
-	const $ = c(1);
-	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
-		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
-	}
 	useBlockActionsShortcuts();
 	return null;
 }
-const PreviewPanel = (t0) => {
-	const $ = c(34);
-	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
-		for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
-	}
-	const { children, isMobileExperience: t1, page, projectName: t2, toolbarProps } = t0;
-	const isMobileExperience = t1 === void 0 ? false : t1;
-	const projectName = t2 === void 0 ? "Project" : t2;
-	const sharedChrome = React.useContext(SharedChromeContext);
-	const t3 = page?.id ?? null;
+/**
+* What the Preview page frame does while it shows in the Canvas, like any Canvas
+* frame: it takes its slot's size, keeps the camera's input, activates its Page
+* when used, pauses with the camera, and draws its editing overlays.
+*/
+function PreviewPageCanvasEffects(t0) {
+	const $ = c(30);
+	const { owner } = t0;
+	const { window: frameWindow, iframeElement } = useFrame();
+	const { frame, slot, inCanvas } = usePreviewPageFrame();
+	const iframeRef = React.useRef(iframeElement);
+	let t1;
+	if ($[0] !== iframeElement) {
+		t1 = () => {
+			iframeRef.current = iframeElement;
+		};
+		$[0] = iframeElement;
+		$[1] = t1;
+	} else t1 = $[1];
+	React.useLayoutEffect(t1);
+	let t2;
+	if ($[2] !== frameWindow?.document) {
+		t2 = frameWindow?.document.querySelector("[data-camox-preview-root]");
+		$[2] = frameWindow?.document;
+		$[3] = t2;
+	} else t2 = $[3];
+	const root = t2;
+	const placed = inCanvas && slot && iframeElement && root ? slot : null;
+	const viewportHeight = placed?.viewportHeight;
+	let t3;
 	let t4;
-	if ($[1] !== children || $[2] !== t3) {
-		t4 = /* @__PURE__ */ jsx(PreviewPageContext, {
-			value: t3,
+	if ($[4] !== frame || $[5] !== iframeElement || $[6] !== root || $[7] !== viewportHeight) {
+		t3 = () => {
+			if (!frame || !iframeElement || !root || viewportHeight === void 0) return;
+			const undo = adoptCanvasDocument(iframeElement, root, viewportHeight);
+			const report = () => frame.setHeight(Number.parseFloat(iframeElement.ownerDocument.defaultView.getComputedStyle(iframeElement).height));
+			report();
+			let pending = 0;
+			const resize = new ResizeObserver(() => {
+				cancelAnimationFrame(pending);
+				pending = requestAnimationFrame(report);
+			});
+			resize.observe(iframeElement);
+			return () => {
+				cancelAnimationFrame(pending);
+				resize.disconnect();
+				undo();
+			};
+		};
+		t4 = [
+			frame,
+			iframeElement,
+			root,
+			viewportHeight
+		];
+		$[4] = frame;
+		$[5] = iframeElement;
+		$[6] = root;
+		$[7] = viewportHeight;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	React.useLayoutEffect(t3, t4);
+	const live = !placed || placed.mode === "live";
+	let t5;
+	let t6;
+	if ($[10] !== live || $[11] !== root) {
+		t5 = () => {
+			if (live || !root) return;
+			return pauseCanvasDocument(root.ownerDocument);
+		};
+		t6 = [live, root];
+		$[10] = live;
+		$[11] = root;
+		$[12] = t5;
+		$[13] = t6;
+	} else {
+		t5 = $[12];
+		t6 = $[13];
+	}
+	React.useEffect(t5, t6);
+	useCanvasFrameInput(iframeRef, placed ? root ?? null : null, placed?.viewport);
+	const onInteract = placed?.onInteract;
+	let t7;
+	if ($[14] !== onInteract || $[15] !== root?.ownerDocument) {
+		t7 = () => {
+			const doc = root?.ownerDocument;
+			if (!doc || !onInteract) return;
+			const preventLinkNavigation = _temp2;
+			for (const type of [
+				"pointerdown",
+				"focusin",
+				"click"
+			]) doc.addEventListener(type, onInteract, true);
+			doc.addEventListener("click", preventLinkNavigation);
+			return () => {
+				for (const type_0 of [
+					"pointerdown",
+					"focusin",
+					"click"
+				]) doc.removeEventListener(type_0, onInteract, true);
+				doc.removeEventListener("click", preventLinkNavigation);
+			};
+		};
+		$[14] = onInteract;
+		$[15] = root?.ownerDocument;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== onInteract || $[18] !== root) {
+		t8 = [root, onInteract];
+		$[17] = onInteract;
+		$[18] = root;
+		$[19] = t8;
+	} else t8 = $[19];
+	React.useEffect(t7, t8);
+	let t10;
+	let t9;
+	if ($[20] !== frame || $[21] !== iframeElement) {
+		t9 = () => {
+			if (!frame || !iframeElement) return;
+			frame.setIframe(iframeElement);
+			return () => frame.setIframe(null);
+		};
+		t10 = [frame, iframeElement];
+		$[20] = frame;
+		$[21] = iframeElement;
+		$[22] = t10;
+		$[23] = t9;
+	} else {
+		t10 = $[22];
+		t9 = $[23];
+	}
+	React.useEffect(t9, t10);
+	if (!placed) return null;
+	let t11;
+	let t12;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(FieldOverlayStyles, {});
+		t12 = /* @__PURE__ */ jsx(OverlayTracker, {});
+		$[24] = t11;
+		$[25] = t12;
+	} else {
+		t11 = $[24];
+		t12 = $[25];
+	}
+	const t13 = owner?.kind === "page";
+	let t14;
+	if ($[26] !== iframeElement || $[27] !== owner || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t11,
+			t12,
+			/* @__PURE__ */ jsx(Overlays, {
+				frame: iframeElement,
+				owner,
+				canAddBlocks: t13
+			})
+		] });
+		$[26] = iframeElement;
+		$[27] = owner;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	return t14;
+}
+function _temp2(event) {
+	if (event.target?.closest?.("a")) event.preventDefault();
+}
+const PreviewPanel = (t0) => {
+	const $ = c(80);
+	const { children, active: t1, isMobileExperience: t2, page, layoutId, pageLocation, projectName: t3 } = t0;
+	const active = t1 === void 0 ? true : t1;
+	const isMobileExperience = t2 === void 0 ? false : t2;
+	const projectName = t3 === void 0 ? "Project" : t3;
+	const t4 = page?.id;
+	let t5;
+	if ($[0] !== layoutId || $[1] !== t4) {
+		t5 = {
+			pageId: t4,
+			layoutId
+		};
+		$[0] = layoutId;
+		$[1] = t4;
+		$[2] = t5;
+	} else t5 = $[2];
+	const owner = useEditingOwner(t5);
+	const [iframe, setIframe] = React.useState(null);
+	const claim = useEditingFrameClaim(iframe, owner);
+	let t6;
+	if ($[3] !== active || $[4] !== claim) {
+		t6 = () => {
+			if (active) claim();
+		};
+		$[3] = active;
+		$[4] = claim;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== active || $[7] !== claim || $[8] !== owner) {
+		t7 = [
+			active,
+			owner,
+			claim
+		];
+		$[6] = active;
+		$[7] = claim;
+		$[8] = owner;
+		$[9] = t7;
+	} else t7 = $[9];
+	React.useLayoutEffect(t6, t7);
+	const viewportMode = useSelector(previewStore, _temp3);
+	const isToolbarHidden = useSelector(previewStore, _temp4);
+	const { frame, slot, inCanvas, revealed } = usePreviewPageFrame();
+	const placed = !isMobileExperience && inCanvas ? slot : null;
+	const underCanvas = revealed && !isMobileExperience;
+	let t8;
+	if ($[10] !== frame) {
+		t8 = (element) => frame?.setOverlays(element);
+		$[10] = frame;
+		$[11] = t8;
+	} else t8 = $[11];
+	const overlaysRef = t8;
+	const t9 = !!placed?.selected;
+	const t10 = placed?.workspace ?? null;
+	const t11 = !!placed;
+	let t12;
+	if ($[12] !== children) {
+		t12 = /* @__PURE__ */ jsx(ArtifactStudioContext, {
+			value: READ_ONLY_ARTIFACT_STUDIO,
 			children
 		});
-		$[1] = children;
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
-	const previewContent = t4;
-	const iframeElement = useSelector(previewStore, _temp2);
-	const handleIframeReady = _temp3;
-	const viewportMode = useSelector(previewStore, _temp4);
-	const isEditMode = useSelector(previewStore, selectIsEditMode);
-	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
-	const isToolbarHidden = useSelector(previewStore, _temp5);
-	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = [];
-		$[4] = t5;
-	} else t5 = $[4];
-	React.useEffect(_temp15, t5);
+		$[12] = children;
+		$[13] = t12;
+	} else t12 = $[13];
+	let t13;
+	if ($[14] !== owner) {
+		t13 = /* @__PURE__ */ jsx(PreviewPageCanvasEffects, { owner });
+		$[14] = owner;
+		$[15] = t13;
+	} else t13 = $[15];
+	let t14;
+	if ($[16] !== t11 || $[17] !== t12 || $[18] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(NavigationDisabled, {
+			disabled: t11,
+			children: [t12, t13]
+		});
+		$[16] = t11;
+		$[17] = t12;
+		$[18] = t13;
+		$[19] = t14;
+	} else t14 = $[19];
+	let t15;
+	if ($[20] !== t10 || $[21] !== t14) {
+		t15 = /* @__PURE__ */ jsx(CanvasWorkspaceContext, {
+			value: t10,
+			children: t14
+		});
+		$[20] = t10;
+		$[21] = t14;
+		$[22] = t15;
+	} else t15 = $[22];
+	let t16;
+	if ($[23] !== t15 || $[24] !== t9) {
+		t16 = /* @__PURE__ */ jsx(EditableSurfaceContext, {
+			value: t9,
+			children: t15
+		});
+		$[23] = t15;
+		$[24] = t9;
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] !== pageLocation || $[27] !== t16) {
+		t17 = /* @__PURE__ */ jsx(NavigationLocation, {
+			location: pageLocation,
+			children: t16
+		});
+		$[26] = pageLocation;
+		$[27] = t16;
+		$[28] = t17;
+	} else t17 = $[28];
+	const pageContent = t17;
 	if (isMobileExperience) {
-		let t6;
-		if ($[5] !== previewContent) {
-			t6 = /* @__PURE__ */ jsx("div", {
+		let t18;
+		if ($[29] !== pageContent) {
+			t18 = /* @__PURE__ */ jsx("div", {
 				className: "relative min-h-0 flex-1",
 				children: /* @__PURE__ */ jsx(PreviewFrame, {
 					className: "h-full w-full",
-					onIframeReady: handleIframeReady,
-					children: previewContent
+					onIframeReady: setIframe,
+					children: pageContent
 				})
 			});
-			$[5] = previewContent;
-			$[6] = t6;
-		} else t6 = $[6];
-		let t7;
-		if ($[7] !== isToolbarHidden || $[8] !== page || $[9] !== projectName || $[10] !== sharedChrome || $[11] !== toolbarProps) {
-			t7 = !isToolbarHidden && (page ? /* @__PURE__ */ jsx(MobilePreviewDrawer, {
+			$[29] = pageContent;
+			$[30] = t18;
+		} else t18 = $[30];
+		let t19;
+		if ($[31] !== active || $[32] !== isToolbarHidden || $[33] !== page || $[34] !== projectName) {
+			t19 = active && !isToolbarHidden && page && /* @__PURE__ */ jsx(MobilePreviewDrawer, {
 				page,
 				projectName
-			}) : !sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps }));
-			$[7] = isToolbarHidden;
-			$[8] = page;
-			$[9] = projectName;
-			$[10] = sharedChrome;
-			$[11] = toolbarProps;
-			$[12] = t7;
-		} else t7 = $[12];
-		let t8;
-		if ($[13] !== t6 || $[14] !== t7) {
-			t8 = /* @__PURE__ */ jsxs(PanelContent, {
+			});
+			$[31] = active;
+			$[32] = isToolbarHidden;
+			$[33] = page;
+			$[34] = projectName;
+			$[35] = t19;
+		} else t19 = $[35];
+		let t20;
+		if ($[36] !== t18 || $[37] !== t19) {
+			t20 = /* @__PURE__ */ jsxs(PanelContent, {
 				className: "flex min-h-0 flex-col overflow-hidden bg-black",
-				children: [t6, t7]
+				children: [t18, t19]
 			});
-			$[13] = t6;
-			$[14] = t7;
-			$[15] = t8;
-		} else t8 = $[15];
-		return t8;
+			$[36] = t18;
+			$[37] = t19;
+			$[38] = t20;
+		} else t20 = $[38];
+		let t21;
+		if ($[39] !== owner || $[40] !== t20) {
+			t21 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+				value: owner,
+				children: t20
+			});
+			$[39] = owner;
+			$[40] = t20;
+			$[41] = t21;
+		} else t21 = $[41];
+		return t21;
 	}
+	const device = viewportMode !== "full" && !placed;
+	const t18 = !underCanvas && "bg-black";
+	let t19;
+	if ($[42] !== t18) {
+		t19 = cn("relative overflow-hidden", t18);
+		$[42] = t18;
+		$[43] = t19;
+	} else t19 = $[43];
+	const t20 = !placed && "inset-0";
+	const t21 = underCanvas && (!placed || placed.hidden) && "invisible";
+	const t22 = device && "checkered flex items-center justify-center";
+	let t23;
+	if ($[44] !== t20 || $[45] !== t21 || $[46] !== t22) {
+		t23 = cn("absolute", t20, t21, t22);
+		$[44] = t20;
+		$[45] = t21;
+		$[46] = t22;
+		$[47] = t23;
+	} else t23 = $[47];
+	const t24 = placed && "absolute top-0 left-0 in-data-[canvas-promoted]:will-change-transform";
+	const t25 = !placed && !device && "h-full w-full";
+	let t26;
+	if ($[48] !== device || $[49] !== t24 || $[50] !== t25 || $[51] !== viewportMode) {
+		t26 = cn(t24, t25, device && cn("relative overflow-hidden", viewportClassName[viewportMode]));
+		$[48] = device;
+		$[49] = t24;
+		$[50] = t25;
+		$[51] = viewportMode;
+		$[52] = t26;
+	} else t26 = $[52];
+	let t27;
+	if ($[53] !== placed) {
+		t27 = placed ? {
+			width: placed.width,
+			transform: `translate(calc(var(--canvas-x, 0px) + ${placed.left}px * var(--canvas-zoom, 1)), calc(var(--canvas-y, 0px) + ${placed.top}px * var(--canvas-zoom, 1))) scale(var(--canvas-zoom, 1))`,
+			transformOrigin: "0 0"
+		} : void 0;
+		$[53] = placed;
+		$[54] = t27;
+	} else t27 = $[54];
+	const t28 = !placed && !device && "checkered h-full w-full";
+	const t29 = device && "overflow-auto";
+	let t30;
+	if ($[55] !== t28 || $[56] !== t29) {
+		t30 = cn(t28, t29);
+		$[55] = t28;
+		$[56] = t29;
+		$[57] = t30;
+	} else t30 = $[57];
+	const t31 = !!placed;
+	let t32;
+	if ($[58] !== pageContent || $[59] !== t30 || $[60] !== t31) {
+		t32 = /* @__PURE__ */ jsx(PreviewFrame, {
+			className: t30,
+			iframeProps: previewPageIframeProps,
+			inCanvas: t31,
+			onIframeReady: setIframe,
+			children: pageContent
+		});
+		$[58] = pageContent;
+		$[59] = t30;
+		$[60] = t31;
+		$[61] = t32;
+	} else t32 = $[61];
+	const t33 = !placed;
+	let t34;
+	if ($[62] !== overlaysRef || $[63] !== t33) {
+		t34 = /* @__PURE__ */ jsx("div", {
+			ref: overlaysRef,
+			"data-preview-page-overlays": true,
+			className: "pointer-events-none absolute inset-0",
+			hidden: t33
+		});
+		$[62] = overlaysRef;
+		$[63] = t33;
+		$[64] = t34;
+	} else t34 = $[64];
+	let t35;
+	if ($[65] !== t26 || $[66] !== t27 || $[67] !== t32 || $[68] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			"data-preview-page-host": true,
+			className: t26,
+			style: t27,
+			children: [t32, t34]
+		});
+		$[65] = t26;
+		$[66] = t27;
+		$[67] = t32;
+		$[68] = t34;
+		$[69] = t35;
+	} else t35 = $[69];
+	let t36;
+	if ($[70] !== placed || $[71] !== t23 || $[72] !== t35) {
+		t36 = /* @__PURE__ */ jsx(PreviewPageClip, {
+			slot: placed,
+			className: t23,
+			children: t35
+		});
+		$[70] = placed;
+		$[71] = t23;
+		$[72] = t35;
+		$[73] = t36;
+	} else t36 = $[73];
+	let t37;
+	if ($[74] !== t19 || $[75] !== t36) {
+		t37 = /* @__PURE__ */ jsx(PanelContent, {
+			className: t19,
+			children: t36
+		});
+		$[74] = t19;
+		$[75] = t36;
+		$[76] = t37;
+	} else t37 = $[76];
+	let t38;
+	if ($[77] !== owner || $[78] !== t37) {
+		t38 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: owner,
+			children: t37
+		});
+		$[77] = owner;
+		$[78] = t37;
+		$[79] = t38;
+	} else t38 = $[79];
+	return t38;
+};
+/**
+* Fills the Preview, or clips the frame to the Canvas viewport above the Canvas
+* row, where the camera moves it. Space + drag pans through it, and wheel input
+* over its overlays moves the camera like over the rest of the Canvas.
+*/
+function PreviewPageClip(t0) {
+	const $ = c(19);
+	const { slot, className, children } = t0;
+	const ref = React.useRef(null);
+	const [rect, setRect] = React.useState(null);
+	const viewport = slot?.viewport;
+	const mirrorCamera = slot?.workspace?.mirrorCamera;
+	let t1;
+	let t2;
+	if ($[0] !== viewport) {
+		t1 = () => {
+			const clip = ref.current;
+			const parent = clip?.offsetParent;
+			if (!clip || !parent || !viewport) {
+				setRect(null);
+				return;
+			}
+			const measure = () => {
+				const from = parent.getBoundingClientRect();
+				const to = viewport.getBoundingClientRect();
+				setRect({
+					left: to.left - from.left,
+					top: to.top - from.top,
+					width: to.width,
+					height: to.height
+				});
+			};
+			measure();
+			const resize = new ResizeObserver(() => flushSync(measure));
+			resize.observe(viewport);
+			resize.observe(parent);
+			return () => resize.disconnect();
+		};
+		t2 = [viewport];
+		$[0] = viewport;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== mirrorCamera) {
+		t3 = () => {
+			const clip_0 = ref.current;
+			if (!clip_0 || !mirrorCamera) return;
+			return mirrorCamera(clip_0);
+		};
+		t4 = [mirrorCamera];
+		$[3] = mirrorCamera;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t3 = $[4];
+		t4 = $[5];
+	}
+	React.useLayoutEffect(t3, t4);
+	let t5;
 	let t6;
-	if ($[16] !== isCommentMode || $[17] !== page) {
-		t6 = page && !isCommentMode && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
-		$[16] = isCommentMode;
-		$[17] = page;
-		$[18] = t6;
-	} else t6 = $[18];
-	let t7;
-	if ($[19] !== page) {
-		t7 = areCommentsEnabled() && page && /* @__PURE__ */ jsx(PreviewComments, {}, page.id);
-		$[19] = page;
-		$[20] = t7;
-	} else t7 = $[20];
+	if ($[6] !== viewport) {
+		t5 = () => {
+			const clip_1 = ref.current;
+			if (!clip_1 || !viewport) return;
+			return forwardCanvasWheel(clip_1, viewport);
+		};
+		t6 = [viewport];
+		$[6] = viewport;
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		t5 = $[7];
+		t6 = $[8];
+	}
+	React.useEffect(t5, t6);
+	const t7 = slot && "pointer-events-none overflow-clip *:pointer-events-auto data-[canvas-pan]:**:pointer-events-none";
 	let t8;
-	if ($[21] !== iframeElement || $[22] !== isCommentMode || $[23] !== isEditMode || $[24] !== page || $[25] !== previewContent || $[26] !== sharedChrome || $[27] !== toolbarProps || $[28] !== viewportMode) {
-		t8 = /* @__PURE__ */ jsx(PanelContent, {
-			className: "relative overflow-hidden bg-black",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0",
-				children: viewportMode === "full" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(PreviewFrame, {
-						className: "checkered h-full w-full",
-						onIframeReady: handleIframeReady,
-						children: previewContent
-					}),
-					isEditMode && !isCommentMode && /* @__PURE__ */ jsx(Overlays, {
-						iframeElement,
-						canAddBlocks: !!page
-					}),
-					isEditMode && !isCommentMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
-					!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
-				] }) : /* @__PURE__ */ jsxs("div", {
-					className: cn("checkered flex h-full justify-center", isEditMode ? "items-start" : "items-center"),
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: cn("relative overflow-hidden", viewportClassName[viewportMode], isEditMode && "mt-8"),
-							children: [/* @__PURE__ */ jsx(PreviewFrame, {
-								className: "overflow-auto",
-								onIframeReady: handleIframeReady,
-								children: previewContent
-							}), isEditMode && !isCommentMode && /* @__PURE__ */ jsx(Overlays, {
-								iframeElement,
-								canAddBlocks: !!page
-							})]
-						}),
-						isEditMode && !isCommentMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
-						!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
-					]
-				})
-			})
-		});
-		$[21] = iframeElement;
-		$[22] = isCommentMode;
-		$[23] = isEditMode;
-		$[24] = page;
-		$[25] = previewContent;
-		$[26] = sharedChrome;
-		$[27] = toolbarProps;
-		$[28] = viewportMode;
-		$[29] = t8;
-	} else t8 = $[29];
+	if ($[9] !== className || $[10] !== t7) {
+		t8 = cn(className, t7);
+		$[9] = className;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
 	let t9;
-	if ($[30] !== t6 || $[31] !== t7 || $[32] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t6,
-			t7,
-			t8
-		] });
-		$[30] = t6;
-		$[31] = t7;
-		$[32] = t8;
-		$[33] = t9;
-	} else t9 = $[33];
-	return t9;
-};
+	if ($[12] !== rect || $[13] !== slot) {
+		t9 = slot && rect ? {
+			...rect,
+			zIndex: 1
+		} : void 0;
+		$[12] = rect;
+		$[13] = slot;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== children || $[16] !== t8 || $[17] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-preview-page-clip": true,
+			className: t8,
+			style: t9,
+			children
+		});
+		$[15] = children;
+		$[16] = t8;
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	return t10;
+}
 function _temp(state) {
 	return state.context.actions;
 }
-function _temp2(state) {
-	return state.context.iframeElement;
-}
-function _temp3(element) {
-	previewStore.send({
-		type: "setIframeElement",
-		element
-	});
+function _temp3(state) {
+	return state.context.viewportMode;
 }
 function _temp4(state_0) {
-	return state_0.context.viewportMode;
-}
-function _temp5(state_1) {
-	return state_1.context.isToolbarHidden;
-}
-function _temp6() {
-	return true;
-}
-function _temp7() {
-	return previewStore.send({ type: "cycleViewportMode" });
-}
-function _temp8() {
-	return true;
-}
-function _temp9() {
-	return previewStore.send({
-		type: "setViewportMode",
-		mode: "full"
-	});
-}
-function _temp0() {
-	return true;
-}
-function _temp1() {
-	return previewStore.send({
-		type: "setViewportMode",
-		mode: "tablet"
-	});
-}
-function _temp10() {
-	return true;
-}
-function _temp11() {
-	return previewStore.send({
-		type: "setViewportMode",
-		mode: "mobile"
-	});
-}
-function _temp12() {
-	return true;
-}
-function _temp13() {
-	previewStore.send({
-		type: "setCommentMode",
-		enabled: false
-	});
-	previewStore.send({ type: "clearSelection" });
-}
-function _temp14(a) {
-	return a.id;
-}
-function _temp15() {
-	const actions = [
-		{
-			id: "cycle-viewport-mode",
-			label: "Cycle viewport mode",
-			aliases: [
-				"Responsive preview",
-				"Viewport preview",
-				"Device preview"
-			],
-			groupLabel: "Preview",
-			checkIfAvailable: _temp6,
-			execute: _temp7,
-			shortcut: { key: "m" }
-		},
-		{
-			id: "set-viewport-full",
-			label: "Set full viewport",
-			aliases: [
-				"Full preview",
-				"Desktop preview",
-				"Full width preview"
-			],
-			groupLabel: "Preview",
-			checkIfAvailable: _temp8,
-			execute: _temp9
-		},
-		{
-			id: "set-viewport-tablet",
-			label: "Set tablet viewport",
-			aliases: ["Tablet preview", "Responsive preview"],
-			groupLabel: "Preview",
-			checkIfAvailable: _temp0,
-			execute: _temp1
-		},
-		{
-			id: "set-viewport-mobile",
-			label: "Set mobile viewport",
-			aliases: [
-				"Mobile preview",
-				"Phone preview",
-				"Responsive preview"
-			],
-			groupLabel: "Preview",
-			checkIfAvailable: _temp10,
-			execute: _temp11
-		},
-		{
-			id: "clear-selection",
-			label: "Clear selection",
-			aliases: ["Deselect", "Unselect"],
-			groupLabel: "Preview",
-			checkIfAvailable: _temp12,
-			execute: _temp13,
-			shortcut: { key: "Escape" }
-		}
-	];
-	actionsStore.send({
-		type: "registerManyActions",
-		actions
-	});
-	return () => {
-		actionsStore.send({
-			type: "unregisterManyActions",
-			ids: actions.map(_temp14)
-		});
-	};
+	return state_0.context.isToolbarHidden;
 }
 
 //#endregion
-export { PreviewPanel };
+export { CuratedBlockShortcuts, PreviewFrame, PreviewFrameEffects, PreviewPanel };