camox 0.44.0 → 0.46.0

package/dist/features/canvas/CanvasLoadingScreen.js

@@ -0,0 +1,35 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Spinner } from "@camox/ui/spinner";
+
+//#region src/features/canvas/CanvasLoadingScreen.tsx
+/**
+* Covers where the Canvas will show while it loads, in the Canvas's own background, so the
+* Canvas appears onto it rather than replacing some version of the page. A spinner at its
+* center shows the Canvas is loading.
+*/
+function CanvasLoadingScreen(t0) {
+	const $ = c(4);
+	const { spinner: t1 } = t0;
+	const spinner = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[0] !== spinner) {
+		t2 = spinner && /* @__PURE__ */ jsx(Spinner, { className: "text-muted-foreground size-6" });
+		$[0] = spinner;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-loading": true,
+			className: "bg-muted absolute inset-0 grid place-items-center",
+			children: t2
+		});
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+
+//#endregion
+export { CanvasLoadingScreen };

package/dist/features/canvas/CanvasOverlays.js

@@ -0,0 +1,254 @@
+import { previewStore, selectIsCanvasShown } from "../preview/previewStore.js";
+import { useEditingFrame } from "../preview/editingFrame.js";
+import { postOverlayMessage } from "../preview/overlayMessages.js";
+import { FieldToolbar } from "../preview/components/FieldToolbar.js";
+import { canvasInsertionSeams } from "./canvasInsertionSeams.js";
+import { observeCanvasOverlays } from "./canvasOverlayGeometry.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useSelector } from "@xstate/store-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { PlusIcon } from "lucide-react";
+
+//#region src/features/canvas/CanvasOverlays.tsx
+/** Geometry stays in page coordinates. CSS projects it through the camera without
+* measuring the page or rerendering React during pan/zoom. */
+function canvasOverlayStyle(rect) {
+	return {
+		position: "absolute",
+		left: `calc(${rect.x}px * var(--canvas-zoom, 1))`,
+		top: `calc(${rect.y}px * var(--canvas-zoom, 1))`,
+		width: `calc(${rect.width}px * var(--canvas-zoom, 1))`,
+		height: `calc(${rect.height}px * var(--canvas-zoom, 1))`
+	};
+}
+/**
+* Whether the Canvas draws editing overlays: only while it has a selection. Zoomed
+* out past the snap, with nothing selected, no frame shows any.
+*/
+const CanvasOverlaysShownContext = React.createContext(true);
+function CanvasOverlays(t0) {
+	const $ = c(48);
+	const { document, activate, canAddBlocks: t1, pageHovered: t2, children } = t0;
+	const canAddBlocks = t1 === void 0 ? false : t1;
+	const pageHovered = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[0] = t3;
+	} else t3 = $[0];
+	const [targets, setTargets] = React.useState(t3);
+	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
+	const shown = React.use(CanvasOverlaysShownContext);
+	const { document: editingDocument } = useEditingFrame();
+	const [breadcrumbHoveredDocument, setBreadcrumbHoveredDocument] = React.useState(null);
+	const isEditingFrame = !!document && editingDocument === document;
+	const pageHover = pageHovered || isEditingFrame && breadcrumbHoveredDocument === document;
+	let t4;
+	let t5;
+	if ($[1] !== document) {
+		t4 = () => {
+			const frameWindow = document?.defaultView;
+			if (!frameWindow) return;
+			const onMessage = (event) => {
+				if (event.data?.type === "CAMOX_HOVER_PAGE") setBreadcrumbHoveredDocument(document);
+				if (event.data?.type === "CAMOX_HOVER_PAGE_END") setBreadcrumbHoveredDocument(null);
+			};
+			frameWindow.addEventListener("message", onMessage);
+			return () => frameWindow.removeEventListener("message", onMessage);
+		};
+		t5 = [document];
+		$[1] = document;
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t4 = $[2];
+		t5 = $[3];
+	}
+	React.useEffect(t4, t5);
+	let t6;
+	let t7;
+	if ($[4] !== document) {
+		t6 = () => {
+			if (!document) return;
+			return observeCanvasOverlays(document, setTargets);
+		};
+		t7 = [document];
+		$[4] = document;
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t6 = $[5];
+		t7 = $[6];
+	}
+	React.useEffect(t6, t7);
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t8;
+	let t9;
+	if ($[7] !== activate || $[8] !== canAddBlocks || $[9] !== children || $[10] !== document || $[11] !== isCanvasShown || $[12] !== isEditingFrame || $[13] !== pageHover || $[14] !== shown || $[15] !== targets) {
+		const seams = canAddBlocks ? canvasInsertionSeams(targets) : [];
+		if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+			t15 = { position: "relative" };
+			$[25] = t15;
+		} else t15 = $[25];
+		t16 = children;
+		t8 = "camox-canvas-overlays";
+		t9 = true;
+		const t17 = isCanvasShown && shown ? "block" : "none";
+		if ($[26] !== t17) {
+			t10 = {
+				position: "absolute",
+				left: 0,
+				top: 0,
+				width: "calc(100% * var(--canvas-zoom, 1))",
+				height: "calc(100% * var(--canvas-zoom, 1))",
+				zIndex: 10,
+				pointerEvents: "none",
+				display: t17,
+				transform: "scale(calc(1 / var(--canvas-zoom, 1)))",
+				transformOrigin: "0 0"
+			};
+			$[26] = t17;
+			$[27] = t10;
+		} else t10 = $[27];
+		if ($[28] !== pageHover) {
+			t11 = pageHover && /* @__PURE__ */ jsx("div", {
+				className: "camox-canvas-outline",
+				"data-canvas-page-outline": true,
+				style: {
+					position: "absolute",
+					inset: 0
+				}
+			});
+			$[28] = pageHover;
+			$[29] = t11;
+		} else t11 = $[29];
+		if ($[30] !== document || $[31] !== isCanvasShown || $[32] !== isEditingFrame) {
+			t12 = isCanvasShown && isEditingFrame && /* @__PURE__ */ jsx(FieldToolbar, { document });
+			$[30] = document;
+			$[31] = isCanvasShown;
+			$[32] = isEditingFrame;
+			$[33] = t12;
+		} else t12 = $[33];
+		if ($[34] !== targets) {
+			t13 = targets.flatMap(_temp);
+			$[34] = targets;
+			$[35] = t13;
+		} else t13 = $[35];
+		t14 = isCanvasShown && seams.map((seam) => /* @__PURE__ */ jsxs("div", {
+			"data-canvas-overlay-control": true,
+			"data-canvas-insertion-seam": seam.key,
+			className: "group/seam flex items-center justify-center",
+			style: {
+				position: "absolute",
+				left: 0,
+				top: `calc(${seam.y}px * var(--canvas-zoom, 1))`,
+				width: "100%",
+				height: 40,
+				transform: "translateY(-50%)",
+				pointerEvents: "auto",
+				cursor: "default"
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				"data-canvas-insertion-line": true,
+				className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 opacity-0 group-focus-within/seam:opacity-100 group-hover/seam:opacity-100",
+				style: {
+					height: "var(--camox-overlay-width-hover)",
+					backgroundColor: "var(--camox-overlay-color-hover)"
+				}
+			}), /* @__PURE__ */ jsxs(Button, {
+				size: "xs",
+				className: "relative z-10 text-white opacity-0 shadow-sm group-focus-within/seam:opacity-100 group-hover/seam:opacity-100",
+				style: { backgroundColor: "var(--camox-overlay-color-selected)" },
+				onClick: (event_0) => {
+					event_0.stopPropagation();
+					activate();
+					postOverlayMessage(seam.request);
+				},
+				children: [/* @__PURE__ */ jsx(PlusIcon, {}), "Add block"]
+			})]
+		}, seam.key));
+		$[7] = activate;
+		$[8] = canAddBlocks;
+		$[9] = children;
+		$[10] = document;
+		$[11] = isCanvasShown;
+		$[12] = isEditingFrame;
+		$[13] = pageHover;
+		$[14] = shown;
+		$[15] = targets;
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t12;
+		$[19] = t13;
+		$[20] = t14;
+		$[21] = t15;
+		$[22] = t16;
+		$[23] = t8;
+		$[24] = t9;
+	} else {
+		t10 = $[16];
+		t11 = $[17];
+		t12 = $[18];
+		t13 = $[19];
+		t14 = $[20];
+		t15 = $[21];
+		t16 = $[22];
+		t8 = $[23];
+		t9 = $[24];
+	}
+	let t17;
+	if ($[36] !== t10 || $[37] !== t11 || $[38] !== t12 || $[39] !== t13 || $[40] !== t14 || $[41] !== t8 || $[42] !== t9) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: t8,
+			"data-canvas-overlays": t9,
+			style: t10,
+			children: [
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[36] = t10;
+		$[37] = t11;
+		$[38] = t12;
+		$[39] = t13;
+		$[40] = t14;
+		$[41] = t8;
+		$[42] = t9;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== t15 || $[45] !== t16 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			style: t15,
+			children: [t16, t17]
+		});
+		$[44] = t15;
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	return t18;
+}
+function _temp(target, index) {
+	return target.hovered || target.focused ? target.rects.map((rect, fragment) => /* @__PURE__ */ jsx("div", {
+		className: "camox-canvas-outline",
+		"data-camox-highlight-focused": target.focused || void 0,
+		"data-camox-inline": target.inline || void 0,
+		"data-camox-overlay-mode": target.synced ? "synced" : void 0,
+		style: canvasOverlayStyle(rect)
+	}, `${index}:${fragment}`)) : [];
+}
+
+//#endregion
+export { CanvasOverlays, CanvasOverlaysShownContext, canvasOverlayStyle };

package/dist/features/canvas/CanvasPageEdge.js

@@ -0,0 +1,87 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/canvas/CanvasPageEdge.tsx
+/**
+* A device pixel, in the CSS pixels of the Canvas world the camera scales. It follows the zoom
+* the camera last rested at: following each step of a zoom would repaint every item each frame.
+*/
+const DEVICE_PIXEL = "calc(1px / (var(--canvas-rest-zoom, var(--canvas-zoom, 1)) * var(--canvas-pixel-ratio, 1)))";
+/**
+* The edge of a Page or block frame in the Canvas, drawn over the frame. Where
+* the edge falls partway through a screen pixel, the blocks and the site's
+* background under them each cover only part of that pixel, and the background
+* shows through as a light line. One opaque band, from a device pixel outside the
+* edge to one inside, covers that pixel whole, in the colors of the ring and
+* Canvas around the frame.
+*/
+function CanvasPageEdge(t0) {
+	const $ = c(14);
+	const { shaded } = t0;
+	const band = _temp;
+	const t1 = shaded && "color-mix(in oklab, var(--color-foreground) 5%, transparent)";
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== t1) {
+		const layers = [
+			"rgb(0 0 0 / 0.1)",
+			t1,
+			"var(--color-muted)"
+		].filter(_temp2);
+		t4 = true;
+		t5 = true;
+		t6 = "pointer-events-none absolute";
+		t3 = `calc(-1 * ${DEVICE_PIXEL})`;
+		t2 = layers.map(band);
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+	} else {
+		t2 = $[1];
+		t3 = $[2];
+		t4 = $[3];
+		t5 = $[4];
+		t6 = $[5];
+	}
+	const t7 = t2.join(", ");
+	let t8;
+	if ($[6] !== t3 || $[7] !== t7) {
+		t8 = {
+			inset: t3,
+			boxShadow: t7
+		};
+		$[6] = t3;
+		$[7] = t7;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== t4 || $[10] !== t5 || $[11] !== t6 || $[12] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": t4,
+			"data-canvas-page-edge": t5,
+			className: t6,
+			style: t8
+		});
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	return t9;
+}
+function _temp2(color_0) {
+	return !!color_0;
+}
+function _temp(color) {
+	return `inset 0 0 0 calc(2 * ${DEVICE_PIXEL}) ${color}`;
+}
+
+//#endregion
+export { CanvasPageEdge };

package/dist/features/canvas/CanvasPageFrame.js

@@ -0,0 +1,333 @@
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
+import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
+import { PreviewPreparationContext } from "../preview/previewPreparation.js";
+import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { canvasPageHref, measureCanvasDocument } from "./canvasFrameDocument.js";
+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 { 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";
+import { HydrationBoundary } from "@tanstack/react-query";
+import { createPortal } from "react-dom";
+import overlayStyles from "virtual:camox-overlay-css";
+
+//#region src/features/canvas/CanvasPageFrame.tsx
+function PageContentCommitted(t0) {
+	const $ = c(9);
+	const { selected, frame, viewportHeight, onCommitted } = t0;
+	const preparation = React.useContext(PreviewPreparationContext);
+	const committed = React.useEffectEvent(onCommitted);
+	let t1;
+	if ($[0] !== committed) {
+		t1 = () => committed();
+		$[0] = committed;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[2] = t2;
+	} else t2 = $[2];
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== frame || $[4] !== preparation || $[5] !== selected || $[6] !== viewportHeight) {
+		t3 = () => {
+			if (!selected) return;
+			const iframe = frame.current;
+			const root = iframe?.contentDocument?.querySelector("[data-camox-preview-root]");
+			if (iframe && root) measureCanvasDocument(iframe, root, viewportHeight);
+			preparation?.ready();
+		};
+		t4 = [
+			selected,
+			preparation,
+			frame,
+			viewportHeight
+		];
+		$[3] = frame;
+		$[4] = preparation;
+		$[5] = selected;
+		$[6] = viewportHeight;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	React.useEffect(t3, t4);
+	return null;
+}
+/**
+* Parent owns /_camox/data loading and the per-card error boundary. Documents are
+* isolated, but their cache and editing runtime are shared with the studio.
+*/
+function CanvasPageFrame(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageFrame, { ...props }, props.input.pathname);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function PageFrame(t0) {
+	const $ = c(67);
+	const { input, width, viewportHeight, pageId, selected: t1, hovered: t2, mode: t3, onActivate, onSettled } = t0;
+	const selected = t1 === void 0 ? false : t1;
+	const hovered = t2 === void 0 ? false : t2;
+	const mode = t3 === void 0 ? "live" : t3;
+	const camoxApp = useCamoxApp();
+	let t4;
+	if ($[0] !== input) {
+		t4 = canvasPageHref(input);
+		$[0] = input;
+		$[1] = t4;
+	} else t4 = $[1];
+	const href = t4;
+	const t5 = input.derived?.layout.layoutId;
+	let t6;
+	if ($[2] !== pageId || $[3] !== t5) {
+		t6 = {
+			pageId,
+			layoutId: t5
+		};
+		$[2] = pageId;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const owner = useEditingOwner(t6);
+	let t7;
+	if ($[5] !== href || $[6] !== input.previewDocument || $[7] !== mode || $[8] !== viewportHeight || $[9] !== width) {
+		t7 = {
+			previewDocument: input.previewDocument,
+			href,
+			width,
+			viewportHeight,
+			mode
+		};
+		$[5] = href;
+		$[6] = input.previewDocument;
+		$[7] = mode;
+		$[8] = viewportHeight;
+		$[9] = width;
+		$[10] = t7;
+	} else t7 = $[10];
+	const { iframeRef, iframe, mount, iframeProps } = useCanvasFrame(t7);
+	const claim = useEditingFrameClaim(iframe, owner);
+	const [committed, setCommitted] = React.useState(false);
+	useFrameSettled(committed ? iframe : null, mount, onSettled);
+	let t8;
+	if ($[11] !== claim || $[12] !== onActivate || $[13] !== owner) {
+		t8 = (source) => {
+			if (!owner) return;
+			onActivate(owner, source, claim());
+		};
+		$[11] = claim;
+		$[12] = onActivate;
+		$[13] = owner;
+		$[14] = t8;
+	} else t8 = $[14];
+	const activateOwner = t8;
+	let t9;
+	if ($[15] !== activateOwner) {
+		t9 = () => activateOwner("interaction");
+		$[15] = activateOwner;
+		$[16] = t9;
+	} else t9 = $[16];
+	const activate = t9;
+	let t10;
+	if ($[17] !== activateOwner) {
+		t10 = () => activateOwner("selection");
+		$[17] = activateOwner;
+		$[18] = t10;
+	} else t10 = $[18];
+	const activateSelected = React.useEffectEvent(t10);
+	let t11;
+	if ($[19] !== activateSelected || $[20] !== mount || $[21] !== owner || $[22] !== selected) {
+		t11 = () => {
+			if (!selected || !mount || !owner) return;
+			activateSelected();
+		};
+		$[19] = activateSelected;
+		$[20] = mount;
+		$[21] = owner;
+		$[22] = selected;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== mount || $[25] !== owner || $[26] !== selected) {
+		t12 = [
+			selected,
+			mount,
+			owner
+		];
+		$[24] = mount;
+		$[25] = owner;
+		$[26] = selected;
+		$[27] = t12;
+	} else t12 = $[27];
+	React.useEffect(t11, t12);
+	const t13 = input.dehydratedState;
+	const t14 = mount?.ownerDocument ?? null;
+	const t15 = owner?.kind === "page";
+	let t16;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== iframeProps || $[30] !== input.pathname || $[31] !== viewportHeight || $[32] !== width) {
+		t17 = iframeProps.srcDoc && /* @__PURE__ */ jsx("iframe", {
+			...iframeProps,
+			title: `Page preview: ${input.pathname}`,
+			style: {
+				display: "block",
+				width,
+				height: viewportHeight,
+				border: 0
+			}
+		});
+		$[29] = iframeProps;
+		$[30] = input.pathname;
+		$[31] = viewportHeight;
+		$[32] = width;
+		$[33] = t17;
+	} else t17 = $[33];
+	let t18;
+	if ($[34] !== activate || $[35] !== camoxApp || $[36] !== iframe || $[37] !== iframeRef || $[38] !== input.derived || $[39] !== mode || $[40] !== mount || $[41] !== owner || $[42] !== selected || $[43] !== viewportHeight) {
+		t18 = mount && createPortal(/* @__PURE__ */ jsx(React.Activity, {
+			mode: mode === "resting" ? "hidden" : "visible",
+			children: /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: /* @__PURE__ */ jsx("div", {
+					role: "status",
+					children: "Loading page…"
+				}),
+				children: /* @__PURE__ */ jsx(ArtifactsRunContext, {
+					value: selected,
+					children: /* @__PURE__ */ jsx(EditableSurfaceContext, {
+						value: selected,
+						children: /* @__PURE__ */ jsxs("div", {
+							style: { display: "contents" },
+							onPointerDownCapture: activate,
+							onFocusCapture: activate,
+							onClickCapture: activate,
+							onClick: preventLinkNavigation,
+							children: [
+								input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+									camoxApp,
+									derived: input.derived
+								}) : /* @__PURE__ */ jsx(PageContent, {}),
+								/* @__PURE__ */ jsx(PreviewFrameEffects, {}),
+								/* @__PURE__ */ jsx(Overlays, {
+									frame: iframe,
+									owner,
+									canAddBlocks: owner?.kind === "page"
+								}),
+								/* @__PURE__ */ jsx(PageContentCommitted, {
+									selected,
+									frame: iframeRef,
+									viewportHeight,
+									onCommitted: () => setCommitted(true)
+								})
+							]
+						})
+					})
+				})
+			})
+		}), mount);
+		$[34] = activate;
+		$[35] = camoxApp;
+		$[36] = iframe;
+		$[37] = iframeRef;
+		$[38] = input.derived;
+		$[39] = mode;
+		$[40] = mount;
+		$[41] = owner;
+		$[42] = selected;
+		$[43] = viewportHeight;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== activate || $[46] !== hovered || $[47] !== t14 || $[48] !== t15 || $[49] !== t17 || $[50] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(CanvasOverlays, {
+			document: t14,
+			activate,
+			pageHovered: hovered,
+			canAddBlocks: t15,
+			children: [
+				t16,
+				t17,
+				t18
+			]
+		});
+		$[45] = activate;
+		$[46] = hovered;
+		$[47] = t14;
+		$[48] = t15;
+		$[49] = t17;
+		$[50] = t18;
+		$[51] = t19;
+	} else t19 = $[51];
+	let t20;
+	if ($[52] !== input.previewDocument || $[53] !== t19) {
+		t20 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
+			value: input.previewDocument,
+			children: t19
+		});
+		$[52] = input.previewDocument;
+		$[53] = t19;
+		$[54] = t20;
+	} else t20 = $[54];
+	let t21;
+	if ($[55] !== href || $[56] !== iframe || $[57] !== input.pathname || $[58] !== mount || $[59] !== t20) {
+		t21 = /* @__PURE__ */ jsx(CanvasFrameProviders, {
+			pathname: input.pathname,
+			href,
+			mount,
+			iframe,
+			children: t20
+		});
+		$[55] = href;
+		$[56] = iframe;
+		$[57] = input.pathname;
+		$[58] = mount;
+		$[59] = t20;
+		$[60] = t21;
+	} else t21 = $[60];
+	let t22;
+	if ($[61] !== t13 || $[62] !== t21) {
+		t22 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t13,
+			children: t21
+		});
+		$[61] = t13;
+		$[62] = t21;
+		$[63] = t22;
+	} else t22 = $[63];
+	let t23;
+	if ($[64] !== owner || $[65] !== t22) {
+		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: owner,
+			children: t22
+		});
+		$[64] = owner;
+		$[65] = t22;
+		$[66] = t23;
+	} else t23 = $[66];
+	return t23;
+}
+
+//#endregion
+export { CanvasPageFrame };