camox 0.44.0 → 0.46.0

package/dist/features/canvas/useCanvasFrame.js

@@ -0,0 +1,148 @@
+import { NavigationProvider } from "../navigation/navigation.js";
+import { FrameContext } from "../preview/components/Frame.js";
+import { createCanvasDocument, observeCanvasDocument, pauseCanvasDocument } from "./canvasFrameDocument.js";
+import { useCanvasFrameInput } from "./useCanvasFrameInput.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/canvas/useCanvasFrame.tsx
+function toError(error) {
+	return error instanceof Error ? error : new Error(String(error));
+}
+/**
+* The document of an interactive Canvas frame and the root its content portals
+* into. It builds the frame document from the site document, takes over the
+* content root once the frame loads, sizes the frame to it, and keeps the
+* camera's input working over it. Failing to build or load the document throws
+* to the card's error boundary.
+*
+* 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, mode }) {
+	const iframeRef = React.useRef(null);
+	const [srcDoc, setSrcDoc] = React.useState();
+	const [mount, setMount] = React.useState(null);
+	const [iframe, setIframe] = React.useState(null);
+	const [failure, setFailure] = React.useState(null);
+	const live = mode === "live";
+	const resting = mode === "resting";
+	React.useEffect(() => {
+		try {
+			setSrcDoc(createCanvasDocument(previewDocument, href));
+		} catch (error) {
+			setFailure(toError(error));
+		}
+	}, [previewDocument, href]);
+	const restingRef = React.useRef(resting);
+	const sizing = React.useRef(null);
+	React.useLayoutEffect(() => {
+		restingRef.current = resting;
+		if (!resting) sizing.current?.resume();
+	}, [resting]);
+	React.useLayoutEffect(() => {
+		const iframe = iframeRef.current;
+		if (!iframe || !mount) return;
+		const stop = observeCanvasDocument(iframe, mount, viewportHeight, () => restingRef.current);
+		sizing.current = stop;
+		return () => {
+			stop();
+			sizing.current = null;
+		};
+	}, [
+		mount,
+		viewportHeight,
+		width
+	]);
+	React.useEffect(() => {
+		if (!mount || live) return;
+		return pauseCanvasDocument(mount.ownerDocument);
+	}, [mount, live]);
+	useCanvasFrameInput(iframeRef, mount);
+	if (failure) throw failure;
+	return {
+		iframeRef,
+		iframe,
+		mount,
+		iframeProps: {
+			ref: iframeRef,
+			srcDoc,
+			onLoad: () => {
+				try {
+					const loaded = iframeRef.current;
+					const root = (loaded?.contentDocument)?.querySelector("[data-camox-preview-root]");
+					if (!root) throw new Error("The page preview document has no content root.");
+					if (root === mount) return;
+					root.replaceChildren();
+					setMount(root);
+					setIframe(loaded);
+				} catch (error) {
+					setFailure(toError(error));
+				}
+			},
+			onError: () => setFailure(/* @__PURE__ */ new Error("The page preview document could not load."))
+		}
+	};
+}
+const noNavigation = () => {};
+/**
+* What a frame's content reads from its surroundings: the location it previews,
+* with navigation disabled, and the frame it renders in.
+*/
+function CanvasFrameProviders(t0) {
+	const $ = c(12);
+	const { pathname, href, mount, iframe, children } = t0;
+	let t1;
+	if ($[0] !== href || $[1] !== pathname) {
+		t1 = {
+			pathname,
+			href,
+			hash: "",
+			search: ""
+		};
+		$[0] = href;
+		$[1] = pathname;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = mount?.ownerDocument.defaultView ?? null;
+	let t3;
+	if ($[3] !== iframe || $[4] !== t2) {
+		t3 = {
+			window: t2,
+			iframeElement: iframe
+		};
+		$[3] = iframe;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(FrameContext.Provider, {
+			value: t3,
+			children
+		});
+		$[6] = children;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t1 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavigationProvider, {
+			location: t1,
+			navigate: noNavigation,
+			children: t4
+		});
+		$[9] = t1;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+/** Keeps a frame on its portal: links inside Canvas frames never navigate them. */
+function preventLinkNavigation(event) {
+	if (event.target.closest("a")) event.preventDefault();
+}
+
+//#endregion
+export { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame };

package/dist/features/canvas/useCanvasFrameInput.js

@@ -0,0 +1,97 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/canvas/useCanvasFrameInput.ts
+/** Hands a wheel gesture to the camera, at a point in the host document. */
+function dispatchCanvasWheel(target, event, clientX = event.clientX, clientY = event.clientY) {
+	event.preventDefault();
+	target.dispatchEvent(new WheelEvent("wheel", {
+		bubbles: true,
+		cancelable: true,
+		clientX,
+		clientY,
+		deltaX: event.deltaX,
+		deltaY: event.deltaY,
+		deltaMode: event.deltaMode,
+		ctrlKey: event.ctrlKey,
+		metaKey: event.metaKey,
+		shiftKey: event.shiftKey
+	}));
+}
+/**
+* Keep the Canvas camera working over host elements that sit outside its
+* viewport, such as the overlays drawn over the Preview page frame: wheel
+* events over them would otherwise never reach the camera.
+*/
+function forwardCanvasWheel(element, viewport) {
+	const forward = (event) => dispatchCanvasWheel(viewport, event);
+	element.addEventListener("wheel", forward, { passive: false });
+	return () => element.removeEventListener("wheel", forward);
+}
+/**
+* Keep the Canvas camera working over an interactive frame: forward its wheel
+* input, and the Space key that arms the hand tool, to the host document. They
+* bubble from the frame, unless it sits outside the Canvas and names the
+* element to dispatch them on.
+*/
+function useCanvasFrameInput(iframeRef, mount, target) {
+	const $ = c(5);
+	let t0;
+	let t1;
+	if ($[0] !== iframeRef || $[1] !== mount || $[2] !== target) {
+		t0 = () => {
+			const iframe = iframeRef.current;
+			if (!iframe || !mount) return;
+			const host = target ?? iframe;
+			const doc = mount.ownerDocument;
+			const forwardWheel = (event) => {
+				const rect = iframe.getBoundingClientRect();
+				const scale = rect.width / iframe.offsetWidth;
+				dispatchCanvasWheel(host, event, rect.left + event.clientX * scale, rect.top + event.clientY * scale);
+			};
+			const forwardSpace = (event_0) => {
+				if (event_0.code !== "Space") return;
+				const target_0 = event_0.target;
+				if (target_0?.isContentEditable || target_0?.closest?.("input, select, textarea")) return;
+				const forwarded = new KeyboardEvent(event_0.type, {
+					bubbles: true,
+					cancelable: true,
+					code: event_0.code,
+					key: event_0.key,
+					repeat: event_0.repeat,
+					ctrlKey: event_0.ctrlKey,
+					metaKey: event_0.metaKey,
+					altKey: event_0.altKey,
+					shiftKey: event_0.shiftKey
+				});
+				host.dispatchEvent(forwarded);
+				if (forwarded.defaultPrevented) event_0.preventDefault();
+			};
+			doc.addEventListener("wheel", forwardWheel, { passive: false });
+			doc.addEventListener("keydown", forwardSpace);
+			doc.addEventListener("keyup", forwardSpace);
+			return () => {
+				doc.removeEventListener("wheel", forwardWheel);
+				doc.removeEventListener("keydown", forwardSpace);
+				doc.removeEventListener("keyup", forwardSpace);
+			};
+		};
+		t1 = [
+			iframeRef,
+			mount,
+			target
+		];
+		$[0] = iframeRef;
+		$[1] = mount;
+		$[2] = target;
+		$[3] = t0;
+		$[4] = t1;
+	} else {
+		t0 = $[3];
+		t1 = $[4];
+	}
+	React.useEffect(t0, t1);
+}
+
+//#endregion
+export { forwardCanvasWheel, useCanvasFrameInput };

package/dist/features/canvas/useCanvasNearness.js

@@ -0,0 +1,57 @@
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+
+//#region src/features/canvas/useCanvasNearness.ts
+/** Frames count as near this far outside the Canvas viewport, relative to its size. */
+const NEAR_MARGIN = "100%";
+/**
+* Whether an element is near the Canvas viewport as the camera moves, and
+* whether it has ever been. Frames mount once they first come near, and only
+* stay live while near.
+*/
+function useCanvasNearness(ref) {
+	const $ = c(6);
+	const [near, setNear] = React.useState(false);
+	const [reached, setReached] = React.useState(false);
+	let t0;
+	let t1;
+	if ($[0] !== ref) {
+		t0 = () => {
+			const element = ref.current;
+			if (!element) return;
+			const observer = new IntersectionObserver((entries) => {
+				const entry = entries.at(-1);
+				if (!entry) return;
+				setNear(entry.isIntersecting);
+				if (entry.isIntersecting) setReached(true);
+			}, {
+				root: element.closest("[data-camox-canvas]"),
+				rootMargin: NEAR_MARGIN
+			});
+			observer.observe(element);
+			return () => observer.disconnect();
+		};
+		t1 = [ref];
+		$[0] = ref;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	React.useEffect(t0, t1);
+	let t2;
+	if ($[3] !== near || $[4] !== reached) {
+		t2 = {
+			near,
+			reached
+		};
+		$[3] = near;
+		$[4] = reached;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+}
+
+//#endregion
+export { useCanvasNearness };

package/dist/features/canvas/useDiscoveredPreviewPaths.js

@@ -0,0 +1,62 @@
+import { useProjectUuid } from "../../lib/auth.js";
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { reads, useReadQueries } from "../../lib/studio-reads.js";
+import { c } from "react/compiler-runtime";
+
+//#region src/features/canvas/useDiscoveredPreviewPaths.ts
+/** Each derived layout's first discovered page, keyed by layout id. */
+function useDiscoveredPreviewPaths(runtimeBasePath) {
+	const $ = c(11);
+	const projectUuid = useProjectUuid();
+	const t0 = useCamoxApp();
+	let ids;
+	let t1;
+	let t2;
+	if ($[0] !== projectUuid || $[1] !== runtimeBasePath || $[2] !== t0) {
+		ids = t0.getLayouts().filter(_temp).map(_temp2);
+		t1 = useReadQueries;
+		let t3;
+		if ($[6] !== projectUuid || $[7] !== runtimeBasePath) {
+			t3 = (layoutId) => reads.discoveredPath({
+				projectUuid,
+				runtimeBasePath,
+				layoutId
+			});
+			$[6] = projectUuid;
+			$[7] = runtimeBasePath;
+			$[8] = t3;
+		} else t3 = $[8];
+		t2 = ids.map(t3);
+		$[0] = projectUuid;
+		$[1] = runtimeBasePath;
+		$[2] = t0;
+		$[3] = ids;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		ids = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	let t3;
+	if ($[9] !== ids) {
+		t3 = (results) => new Map(results.flatMap((t4, index) => {
+			const { data } = t4;
+			return data ? [[ids[index], data]] : [];
+		}));
+		$[9] = ids;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t1(t2, t3);
+}
+function _temp2(t0) {
+	const { _internal: t1 } = t0;
+	const { id } = t1;
+	return id;
+}
+function _temp(layout) {
+	return layout._internal.kind === "derived" && layout._internal.routes;
+}
+
+//#endregion
+export { useDiscoveredPreviewPaths };

package/dist/features/content/CamoxContent.d.ts

@@ -1,6 +1,3 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/features/content/CamoxContent.d.ts
-declare const CamoxContent: () => _$react_jsx_runtime0.JSX.Element;
-//#endregion
-export { CamoxContent };
+export declare const CamoxContent: () => import("react").JSX.Element;
+//#endregion