camox 0.44.0 → 0.45.0

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

@@ -1,84 +1,138 @@
 import { NormalizedDataProvider } from "../../../lib/normalized-data.js";
 import { BlockErrorBoundary } from "./BlockErrorBoundary.js";
-import { previewStore } from "../previewStore.js";
+import { cn } from "../../../lib/utils.js";
+import { useEditingFrame } from "../editingFrame.js";
 import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
 import { FrameContext } from "./Frame.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useSelector } from "@xstate/store-react";
 import { createPortal } from "react-dom";
 
 //#region src/features/preview/components/BlockThumbnail.tsx
 const VIEWPORT_WIDTH = 1200;
 const VIEWPORT_HEIGHT = 800;
-const ThumbnailFrame = ({ block, width }) => {
-	const sourceFrame = useSelector(previewStore, (state) => state.context.iframeElement);
+const ThumbnailFrame = (t0) => {
+	const $ = c(29);
+	const { block, width } = t0;
+	const sourceDocument = useEditingFrame().document;
 	const [frame, setFrame] = React.useState(null);
 	const [root, setRoot] = React.useState(null);
 	const [content, setContent] = React.useState(null);
 	const [contentHeight, setContentHeight] = React.useState(VIEWPORT_HEIGHT);
-	const bundle = React.useMemo(() => block._internal.getPeekBundle(), [block]);
-	const initialize = React.useCallback(() => {
-		const doc = frame?.contentDocument;
-		const mount = doc?.querySelector("[data-camox-preview-root]");
-		if (!doc || !mount) return;
-		const source = sourceFrame?.contentDocument ?? document;
-		doc.head.replaceChildren();
-		const base = doc.createElement("base");
-		base.href = source.baseURI;
-		doc.head.appendChild(base);
-		source.querySelectorAll("style, link[rel=\"stylesheet\"]").forEach((style) => {
-			if (isSiteStyle(style)) doc.head.appendChild(style.cloneNode(true));
-		});
-		if (source !== document) for (const [from, to] of [
-			[source.documentElement, doc.documentElement],
-			[source.body, doc.body],
-			[source.querySelector("[data-camox-preview-root]"), mount]
-		]) {
-			if (!from || !to) continue;
-			for (const attribute of Array.from(from.attributes)) if (!attribute.name.startsWith("on")) to.setAttribute(attribute.name, attribute.value);
-		}
-		const reset = doc.createElement("style");
-		reset.textContent = `
-      html, body { margin: 0 !important; overflow: hidden !important; }
-      *, *::before, *::after {
-        animation: none !important;
-        transition: none !important;
-        caret-color: transparent !important;
-      }
-    `;
-		doc.head.appendChild(reset);
-		doc.body.inert = true;
-		setRoot(mount);
-	}, [frame, sourceFrame]);
-	React.useEffect(() => {
-		initialize();
-	}, [initialize]);
-	React.useEffect(() => {
-		if (!content) return;
-		const observer = new ResizeObserver(() => {
-			setContentHeight(content.getBoundingClientRect().height);
-		});
-		observer.observe(content);
-		return () => observer.disconnect();
-	}, [content]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative max-h-full w-full shrink-0 overflow-hidden",
-		style: { height: contentHeight * width / VIEWPORT_WIDTH },
-		children: [/* @__PURE__ */ jsx("iframe", {
+	let t1;
+	if ($[0] !== block._internal) {
+		t1 = block._internal.getPeekBundle();
+		$[0] = block._internal;
+		$[1] = t1;
+	} else t1 = $[1];
+	const bundle = t1;
+	let t2;
+	if ($[2] !== frame?.contentDocument || $[3] !== sourceDocument) {
+		t2 = () => {
+			const doc = frame?.contentDocument;
+			const mount = doc?.querySelector("[data-camox-preview-root]");
+			if (!doc || !mount) return;
+			const source = sourceDocument ?? document;
+			doc.head.replaceChildren();
+			const base = doc.createElement("base");
+			base.href = source.baseURI;
+			doc.head.appendChild(base);
+			source.querySelectorAll("style, link[rel=\"stylesheet\"]").forEach((style) => {
+				if (isSiteStyle(style)) doc.head.appendChild(style.cloneNode(true));
+			});
+			if (source !== document) for (const [from, to] of [
+				[source.documentElement, doc.documentElement],
+				[source.body, doc.body],
+				[source.querySelector("[data-camox-preview-root]"), mount]
+			]) {
+				if (!from || !to) continue;
+				for (const attribute of Array.from(from.attributes)) if (!attribute.name.startsWith("on")) to.setAttribute(attribute.name, attribute.value);
+			}
+			const reset = doc.createElement("style");
+			reset.textContent = "\n      html, body { margin: 0 !important; overflow: hidden !important; }\n      *, *::before, *::after {\n        animation: none !important;\n        transition: none !important;\n        caret-color: transparent !important;\n      }\n    ";
+			doc.head.appendChild(reset);
+			doc.body.setAttribute("inert", "");
+			setRoot(mount);
+		};
+		$[2] = frame?.contentDocument;
+		$[3] = sourceDocument;
+		$[4] = t2;
+	} else t2 = $[4];
+	const initialize = t2;
+	let t3;
+	let t4;
+	if ($[5] !== initialize) {
+		t3 = () => {
+			initialize();
+		};
+		t4 = [initialize];
+		$[5] = initialize;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[8] !== content) {
+		t5 = () => {
+			if (!content) return;
+			const observer = new ResizeObserver(() => {
+				setContentHeight(content.getBoundingClientRect().height);
+			});
+			observer.observe(content);
+			return () => observer.disconnect();
+		};
+		t6 = [content];
+		$[8] = content;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	React.useEffect(t5, t6);
+	const t7 = contentHeight * width / VIEWPORT_WIDTH;
+	let t8;
+	if ($[11] !== t7) {
+		t8 = { height: t7 };
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	const t9 = `${block._internal.title} preview`;
+	const t10 = `scale(${width / VIEWPORT_WIDTH})`;
+	let t11;
+	if ($[13] !== t10) {
+		t11 = {
+			width: VIEWPORT_WIDTH,
+			height: VIEWPORT_HEIGHT,
+			transform: t10
+		};
+		$[13] = t10;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] !== initialize || $[16] !== t11 || $[17] !== t9) {
+		t12 = /* @__PURE__ */ jsx("iframe", {
 			ref: setFrame,
-			title: `${block._internal.title} preview`,
+			title: t9,
 			srcDoc: EMPTY_PREVIEW_DOCUMENT,
 			onLoad: initialize,
 			tabIndex: -1,
 			className: "pointer-events-none absolute top-0 left-0 origin-top-left border-0",
-			style: {
-				width: VIEWPORT_WIDTH,
-				height: VIEWPORT_HEIGHT,
-				transform: `scale(${width / VIEWPORT_WIDTH})`
-			}
-		}), root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
+			style: t11
+		});
+		$[15] = initialize;
+		$[16] = t11;
+		$[17] = t9;
+		$[18] = t12;
+	} else t12 = $[18];
+	let t13;
+	if ($[19] !== block._internal.Component || $[20] !== block._internal.id || $[21] !== bundle || $[22] !== frame || $[23] !== root) {
+		t13 = root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
 			value: {
 				window: frame?.contentWindow ?? null,
 				iframeElement: frame
@@ -87,7 +141,7 @@ const ThumbnailFrame = ({ block, width }) => {
 				ref: setContent,
 				style: { display: "flow-root" },
 				children: /* @__PURE__ */ jsx(BlockErrorBoundary, {
-					blockId: 0,
+					blockId: "thumbnail",
 					blockType: block._internal.id,
 					children: /* @__PURE__ */ jsx(React.Suspense, {
 						fallback: null,
@@ -96,7 +150,7 @@ const ThumbnailFrame = ({ block, width }) => {
 							repeatableItems: bundle.repeatableItems,
 							children: /* @__PURE__ */ jsx(block._internal.Component, {
 								blockData: {
-									_id: 0,
+									_id: "thumbnail",
 									type: block._internal.id,
 									content: bundle.block.content,
 									settings: bundle.block.settings,
@@ -108,23 +162,38 @@ const ThumbnailFrame = ({ block, width }) => {
 					})
 				})
 			})
-		}), root)]
-	});
+		}), root);
+		$[19] = block._internal.Component;
+		$[20] = block._internal.id;
+		$[21] = bundle;
+		$[22] = frame;
+		$[23] = root;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] !== t12 || $[26] !== t13 || $[27] !== t8) {
+		t14 = /* @__PURE__ */ jsxs("div", {
+			className: "relative max-h-full w-full shrink-0 overflow-hidden",
+			style: t8,
+			children: [t12, t13]
+		});
+		$[25] = t12;
+		$[26] = t13;
+		$[27] = t8;
+		$[28] = t14;
+	} else t14 = $[28];
+	return t14;
 };
 const BlockThumbnail = (t0) => {
-	const $ = c(13);
-	if ($[0] !== "150232a0d21c91d8fa59376f05913c9b4e2cabef4981a57296ed2c5c473bef0b") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "150232a0d21c91d8fa59376f05913c9b4e2cabef4981a57296ed2c5c473bef0b";
-	}
-	const { block } = t0;
+	const $ = c(15);
+	const { block, className } = t0;
 	const ref = React.useRef(null);
 	const [isVisible, setIsVisible] = React.useState(false);
 	const [width, setWidth] = React.useState(0);
 	const checkerSize = 8 * (1 + width / VIEWPORT_WIDTH);
 	let t1;
 	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = () => {
 			const element = ref.current;
 			if (!element) return;
@@ -144,48 +213,55 @@ const BlockThumbnail = (t0) => {
 			};
 		};
 		t2 = [];
-		$[1] = t1;
-		$[2] = t2;
+		$[0] = t1;
+		$[1] = t2;
 	} else {
-		t1 = $[1];
-		t2 = $[2];
+		t1 = $[0];
+		t2 = $[1];
 	}
 	React.useEffect(t1, t2);
 	let t3;
-	if ($[3] !== checkerSize || $[4] !== width) {
-		t3 = width > 0 ? {
+	if ($[2] !== className) {
+		t3 = cn("checkered pointer-events-none relative flex h-28 w-full items-center overflow-hidden", className);
+		$[2] = className;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== checkerSize || $[5] !== width) {
+		t4 = width > 0 ? {
 			backgroundSize: `${checkerSize * 2}px ${checkerSize * 2}px`,
 			backgroundPosition: `0 0, 0 ${checkerSize}px, ${checkerSize}px ${-checkerSize}px, ${-checkerSize}px 0`
 		} : void 0;
-		$[3] = checkerSize;
-		$[4] = width;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== block || $[7] !== isVisible || $[8] !== width) {
-		t4 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
+		$[4] = checkerSize;
+		$[5] = width;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== block || $[8] !== isVisible || $[9] !== width) {
+		t5 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
 			block,
 			width
 		});
-		$[6] = block;
-		$[7] = isVisible;
-		$[8] = width;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
+		$[7] = block;
+		$[8] = isVisible;
+		$[9] = width;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx("div", {
 			ref,
-			className: "checkered pointer-events-none relative flex h-28 w-full items-center overflow-hidden",
-			style: t3,
+			className: t3,
+			style: t4,
 			"aria-hidden": "true",
-			children: t4
+			children: t5
 		});
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
 };
 
 //#endregion

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

@@ -0,0 +1,243 @@
+import { ViewportContinuity, ViewportContinuityContext } from "../viewportContinuity.js";
+import { PreviewActivationContext } from "./PreviewActivation.js";
+import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
+import { PreviewPageFrame, PreviewPageFrameContext } from "../previewPageFrame.js";
+import { PreviewPreparationContext } from "../previewPreparation.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "@camox/ui/toaster";
+
+//#region src/features/preview/components/CanvasPreview.tsx
+let loadedCanvas;
+let loadingCanvas;
+function importCanvas() {
+	loadingCanvas ??= import("../../canvas/CamoxCanvas.js").then((module) => loadedCanvas = { default: module.CamoxCanvas }, (error) => {
+		loadingCanvas = void 0;
+		throw error;
+	});
+	return loadingCanvas;
+}
+/**
+* Downloads the Canvas code ahead of showing it, so the first show only waits for its data.
+* Only call it from the signed-in Studio: visitors must never download editing code.
+*/
+function prefetchCanvas() {
+	importCanvas().catch(() => {});
+}
+const loadCanvas = () => {
+	if (!loadedCanvas) return importCanvas();
+	const module = loadedCanvas;
+	return { then: (resolve) => resolve(module) };
+};
+var CanvasBoundary = class extends React.Component {
+	state = { failed: false };
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	componentDidCatch(error) {
+		this.props.onError(error);
+	}
+	render() {
+		if (this.state.failed) return null;
+		return this.props.children;
+	}
+};
+var ViewportHandoff = class extends React.Component {
+	getSnapshotBeforeUpdate(previous) {
+		const { continuity, enabled, pathname } = this.props;
+		if (previous.enabled !== enabled) {
+			if (enabled || previous.canvasVisible) continuity.transition(enabled, previous.pathname);
+			else continuity.pendingCanvas = null;
+		}
+		if (previous.pathname !== pathname) continuity.navigate(pathname);
+		return null;
+	}
+	componentDidUpdate() {}
+	render() {
+		return this.props.children;
+	}
+};
+/** A failed preparation offers to retry, until it is retried or the Canvas is hidden. */
+function useFailureToast(failed, retry) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== failed || $[1] !== retry) {
+		t0 = () => {
+			if (!failed) return;
+			const id = toast.error("Could not load studio.", {
+				duration: Infinity,
+				action: {
+					label: "Retry",
+					onClick: retry
+				}
+			});
+			return () => {
+				toast.dismiss(id);
+			};
+		};
+		t1 = [failed, retry];
+		$[0] = failed;
+		$[1] = retry;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+}
+/**
+* Suspense handles module loading; the Canvas signals readiness once laid out.
+* The Preview stays mounted throughout: while the Canvas shows, its page frame
+* sits in the selected Page's slot.
+*/
+function CanvasPreview({ enabled, pathname, pagePathname, runtimeBasePath, placeholder, children }) {
+	const [continuity] = React.useState(() => new ViewportContinuity());
+	const [preparation, setPreparation] = React.useState({
+		enabled,
+		pathname,
+		attempt: 0,
+		phase: "preparing",
+		instance: 0,
+		warm: false
+	});
+	if (preparation.enabled !== enabled || preparation.phase !== "ready" && preparation.pathname !== pathname) setPreparation({
+		...preparation,
+		enabled,
+		pathname,
+		attempt: preparation.attempt + 1,
+		phase: "preparing",
+		instance: preparation.instance + (preparation.phase === "failed" ? 1 : 0)
+	});
+	const { attempt, phase, instance, warm } = preparation;
+	const activeAttempt = React.useRef({
+		attempt,
+		enabled
+	});
+	React.useInsertionEffect(() => {
+		activeAttempt.current = {
+			attempt,
+			enabled
+		};
+	}, [attempt, enabled]);
+	const retry = React.useCallback(() => {
+		setPreparation((current) => {
+			if (!current.enabled || current.attempt !== attempt || current.phase !== "failed") return current;
+			return {
+				...current,
+				attempt: current.attempt + 1,
+				phase: "preparing",
+				instance: current.instance + 1
+			};
+		});
+	}, [attempt]);
+	useFailureToast(enabled && phase === "failed", retry);
+	const ready = enabled && phase === "ready";
+	const activatePreview = React.useContext(PreviewActivationContext);
+	React.useLayoutEffect(() => {
+		if (ready) activatePreview?.();
+	}, [ready, activatePreview]);
+	const signals = React.useMemo(() => ({
+		ready: (options) => {
+			if (!activeAttempt.current.enabled || activeAttempt.current.attempt !== attempt) return;
+			if (options?.restore !== false) continuity.restoreCanvas();
+			setPreparation((current) => {
+				if (!current.enabled || current.attempt !== attempt || current.phase !== "preparing") return current;
+				return {
+					...current,
+					phase: "ready",
+					warm: true
+				};
+			});
+		},
+		fail: (_error) => {
+			setPreparation((current) => {
+				if (!current.enabled || current.attempt !== attempt || current.phase !== "preparing") return current;
+				return {
+					...current,
+					phase: "failed",
+					warm: false
+				};
+			});
+		}
+	}), [attempt, continuity]);
+	const Canvas = React.useMemo(() => React.lazy(loadCanvas), [instance]);
+	const onFatalError = React.useCallback((_error) => {
+		setPreparation((current) => {
+			if (!current.enabled) return current.warm ? {
+				...current,
+				warm: false
+			} : current;
+			if (current.attempt !== attempt) return current;
+			return {
+				...current,
+				pathname,
+				attempt: current.phase === "ready" ? current.attempt + 1 : current.attempt,
+				phase: "failed",
+				warm: false
+			};
+		});
+	}, [attempt, pathname]);
+	const [pageFrame] = React.useState(() => new PreviewPageFrame());
+	const pageFrameContext = React.useMemo(() => ({
+		frame: pageFrame,
+		revealed: ready,
+		pathname: pagePathname
+	}), [
+		pageFrame,
+		ready,
+		pagePathname
+	]);
+	return /* @__PURE__ */ jsx(ViewportContinuityContext, {
+		value: continuity,
+		children: /* @__PURE__ */ jsx(PreviewPageFrameContext, {
+			value: pageFrameContext,
+			children: /* @__PURE__ */ jsx(ViewportHandoff, {
+				enabled,
+				canvasVisible: ready,
+				pathname,
+				continuity,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative flex min-h-0 flex-1",
+					"data-preview-surface": true,
+					children: [
+						enabled && phase !== "failed" && placeholder,
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
+							"data-read-only-preview": true,
+							children: [children, enabled && phase === "preparing" && /* @__PURE__ */ jsx(CanvasLoadingScreen, { spinner: !warm })]
+						}),
+						phase !== "failed" && (enabled || warm) && /* @__PURE__ */ jsx(React.Activity, {
+							mode: enabled ? "visible" : "hidden",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "absolute inset-0 flex min-h-0 flex-col",
+								"data-canvas-preparation": phase,
+								"aria-hidden": !ready,
+								inert: !ready,
+								style: {
+									opacity: ready ? 1 : 0,
+									pointerEvents: ready ? void 0 : "none"
+								},
+								children: /* @__PURE__ */ jsx(CanvasBoundary, {
+									onError: onFatalError,
+									children: /* @__PURE__ */ jsx(PreviewPreparationContext, {
+										value: signals,
+										children: /* @__PURE__ */ jsx(React.Suspense, {
+											fallback: null,
+											children: /* @__PURE__ */ jsx(Canvas, { runtimeBasePath })
+										})
+									})
+								})
+							})
+						}, instance)
+					]
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+export { CanvasPreview, prefetchCanvas };