camox 0.44.0 → 0.45.0

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

@@ -1,6 +1,9 @@
 import { useLocation, useNavigate } from "../../navigation/navigation.js";
 import { cn } from "../../../lib/utils.js";
+import { listenForLinkIntent } from "../../runtime/linkPrefetch.js";
+import { PageViewportContext } from "../../runtime/pageViewport.js";
 import { PreviewDocumentContext } from "../../runtime/PreviewDocumentContext.js";
+import { ViewportContinuityContext, capturePreviewAnchor, restorePreviewAnchor } from "../viewportContinuity.js";
 import { PreviewActivationContext } from "./PreviewActivation.js";
 import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
 import { c } from "react/compiler-runtime";
@@ -19,28 +22,24 @@ function useFrame() {
 	return context;
 }
 function ClearServerMarkup(t0) {
-	const $ = c(5);
-	if ($[0] !== "46ee340e26c292b1d34ac0ef6952dfd17e06dacaf64fa1db1faae4faca07737a") {
-		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "46ee340e26c292b1d34ac0ef6952dfd17e06dacaf64fa1db1faae4faca07737a";
-	}
+	const $ = c(4);
 	const { nodes } = t0;
 	const activate = React.useContext(PreviewActivationContext);
 	let t1;
 	let t2;
-	if ($[1] !== activate || $[2] !== nodes) {
+	if ($[0] !== activate || $[1] !== nodes) {
 		t1 = () => {
 			nodes.forEach(_temp);
 			activate?.();
 		};
 		t2 = [nodes, activate];
-		$[1] = activate;
-		$[2] = nodes;
-		$[3] = t1;
-		$[4] = t2;
+		$[0] = activate;
+		$[1] = nodes;
+		$[2] = t1;
+		$[3] = t2;
 	} else {
-		t1 = $[3];
-		t2 = $[4];
+		t1 = $[2];
+		t2 = $[3];
 	}
 	React.useLayoutEffect(t1, t2);
 	return null;
@@ -48,20 +47,30 @@ function ClearServerMarkup(t0) {
 function _temp(node) {
 	return node.remove();
 }
-const Frame = ({ children, className, style, copyStyles = true, serverOnly = false, onIframeReady }) => {
+const Frame = ({ children, className, style, copyStyles = true, serverOnly = false, onIframeReady, iframeProps, inCanvas = false }) => {
+	const inCanvasRef = React.useRef(inCanvas);
 	const navigate = useNavigate();
 	const { pathname, hash, href } = useLocation();
 	const previewDocument = React.useContext(PreviewDocumentContext);
+	const continuity = React.useContext(ViewportContinuityContext);
+	const pageViewport = React.useContext(PageViewportContext);
 	const [srcDoc] = React.useState(previewDocument ?? "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>");
 	const [serverNodes, setServerNodes] = React.useState([]);
 	const initializedDocument = React.useRef(null);
 	const navigateRef = React.useRef(navigate);
-	navigateRef.current = navigate;
+	React.useLayoutEffect(() => {
+		inCanvasRef.current = inCanvas;
+		navigateRef.current = navigate;
+	});
 	const iframeRef = React.useRef(null);
 	const [iframeWindow, setIframeWindow] = React.useState(null);
 	const [iframeElement, setIframeElement] = React.useState(null);
 	const [mountNode, setMountNode] = React.useState(null);
 	const [hasOpenPopup, setHasOpenPopup] = React.useState(false);
+	const positionedLocation = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (continuity?.pendingPreview?.pathname === pathname && iframeRef.current) iframeRef.current.style.visibility = "hidden";
+	});
 	React.useEffect(() => {
 		const iframe = iframeRef.current;
 		if (!iframe) return;
@@ -72,15 +81,15 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 			if (!iframeDoc || !iframeWin || !root || initializedDocument.current === iframeDoc) return;
 			initializedDocument.current = iframeDoc;
 			iframeWin.addEventListener("click", (e) => {
-				if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
+				if (inCanvasRef.current || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return;
 				const anchor = e.target.closest("a");
 				if (!anchor?.href || anchor.hasAttribute("download")) return;
 				if (anchor.target && anchor.target !== "_self") return;
 				e.preventDefault();
 				navigateRef.current({ to: new URL(anchor.getAttribute("href"), window.location.href).href });
 			});
-			if (copyStyles && srcDoc === "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>") Array.from(document.head.querySelectorAll("style, link[rel=\"stylesheet\"]")).filter(isSiteStyle).forEach((style_0) => {
-				const clonedStyle = style_0.cloneNode(true);
+			if (copyStyles && srcDoc === "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>") Array.from(document.head.querySelectorAll("style, link[rel=\"stylesheet\"]")).filter(isSiteStyle).forEach((style) => {
+				const clonedStyle = style.cloneNode(true);
 				iframeDoc.head.appendChild(clonedStyle);
 			});
 			if (serverOnly) return;
@@ -101,14 +110,29 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 		srcDoc,
 		serverOnly
 	]);
-	React.useEffect(() => {
+	React.useLayoutEffect(() => {
 		if (!iframeWindow || !mountNode) return;
+		if (positionedLocation.current?.doc === iframeWindow.document && positionedLocation.current.href === href) return;
+		const opened = positionedLocation.current?.doc !== iframeWindow.document;
+		if (positionedLocation.current && continuity?.checkpoint) continuity.checkpoint.moved = true;
+		positionedLocation.current = {
+			doc: iframeWindow.document,
+			href
+		};
 		let base = iframeWindow.document.querySelector("base");
 		if (!base) {
 			base = iframeWindow.document.createElement("base");
 			iframeWindow.document.head.insertBefore(base, iframeWindow.document.head.firstChild);
 		}
 		base.href = href;
+		if (continuity?.pendingPreview?.pathname === pathname) {
+			pageViewport?.placed(href);
+			return;
+		}
+		if (pageViewport && !inCanvasRef.current) {
+			if (opened) pageViewport.opened(iframeWindow, href);
+			return;
+		}
 		if (!hash) {
 			iframeWindow.scrollTo({ top: 0 });
 			return;
@@ -121,11 +145,74 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 		hash,
 		href,
 		iframeWindow,
-		mountNode
+		mountNode,
+		continuity,
+		pageViewport
+	]);
+	React.useLayoutEffect(() => {
+		if (!pageViewport || !iframeWindow || !mountNode || inCanvas) return;
+		const release = pageViewport.attach(iframeWindow);
+		const stopListening = listenForLinkIntent(iframeWindow.document, (anchor) => pageViewport.prefetchLink(anchor));
+		return () => {
+			stopListening();
+			release();
+		};
+	}, [
+		pageViewport,
+		iframeWindow,
+		mountNode,
+		inCanvas
+	]);
+	React.useLayoutEffect(() => {
+		if (!continuity || !iframeWindow || !mountNode || inCanvas) return;
+		const doc = iframeWindow.document;
+		const center = doc.elementFromPoint?.(iframeWindow.innerWidth / 2, iframeWindow.innerHeight / 2);
+		let scroll = doc.scrollingElement;
+		for (let element = center; element && element !== doc.body; element = element.parentElement) {
+			const overflow = iframeWindow.getComputedStyle(element).overflowY;
+			if (/(auto|scroll)/.test(overflow) && element.scrollHeight > element.clientHeight) {
+				scroll = element;
+				break;
+			}
+		}
+		if (!scroll) return;
+		const capture = () => capturePreviewAnchor(doc, scroll);
+		const pending = continuity.pendingPreview;
+		if (pending?.pathname === pathname) {
+			restorePreviewAnchor(doc, scroll, pending.anchor);
+			continuity.pendingPreview = null;
+		}
+		let previousTop = scroll.scrollTop;
+		let previousLeft = scroll.scrollLeft;
+		if (iframeRef.current) iframeRef.current.style.visibility = "";
+		const onScroll = () => {
+			if (scroll.scrollTop === previousTop && scroll.scrollLeft === previousLeft) return;
+			previousTop = scroll.scrollTop;
+			previousLeft = scroll.scrollLeft;
+			continuity.previewMoved(pathname, capture());
+		};
+		const binding = { capture: () => {
+			onScroll();
+			return capture();
+		} };
+		continuity.preview = binding;
+		doc.addEventListener("scroll", onScroll, true);
+		return () => {
+			doc.removeEventListener("scroll", onScroll, true);
+			if (continuity.preview === binding) continuity.preview = null;
+		};
+	}, [
+		continuity,
+		iframeWindow,
+		mountNode,
+		pathname,
+		hash,
+		inCanvas
 	]);
 	React.useEffect(() => {
 		const checkForOpenPopup = () => {
-			setHasOpenPopup(document.body.querySelector("[data-base-ui-portal] [data-open]") !== null);
+			const hasPopup = document.body.querySelector("[data-base-ui-portal] [data-open]") !== null;
+			setHasOpenPopup(hasPopup);
 		};
 		checkForOpenPopup();
 		const observer = new MutationObserver(checkForOpenPopup);
@@ -148,6 +235,7 @@ const Frame = ({ children, className, style, copyStyles = true, serverOnly = fal
 				iframeElement
 			},
 			children: [/* @__PURE__ */ jsx("iframe", {
+				...iframeProps,
 				ref: iframeRef,
 				title: "Page preview",
 				srcDoc,

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

@@ -4,10 +4,10 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { ChevronsUpDown, SearchIcon } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
-import { commandFilter } from "@camox/ui/command";
 import { Combobox } from "@base-ui/react/combobox";
+import { commandFilter } from "@camox/ui/command";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/features/preview/components/IconFieldEditor.tsx
@@ -26,7 +26,7 @@ function IconPicker({ value, ids, onSelect }) {
 		return ids.map((id) => ({
 			id,
 			score: commandFilter(id, query)
-		})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ id: id_0 }) => id_0);
+		})).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ id }) => id);
 	}, [ids, search]);
 	const activeIndex = Math.max(0, filteredIds.indexOf(activeId));
 	const activeRow = Math.floor(activeIndex / COLUMNS);
@@ -36,7 +36,7 @@ function IconPicker({ value, ids, onSelect }) {
 		estimateSize: () => ROW_HEIGHT,
 		overscan: 2,
 		initialOffset: () => activeRow * ROW_HEIGHT,
-		rangeExtractor: (range) => [...new Set([...defaultRangeExtractor(range), activeRow])].sort((a_0, b_0) => a_0 - b_0)
+		rangeExtractor: (range) => [.../* @__PURE__ */ new Set([...defaultRangeExtractor(range), activeRow])].sort((a, b) => a - b)
 	});
 	return /* @__PURE__ */ jsx(Combobox.Root, {
 		inline: true,
@@ -54,8 +54,8 @@ function IconPicker({ value, ids, onSelect }) {
 			setActiveId("");
 			virtualizer.scrollToOffset(0);
 		},
-		onItemHighlighted: (id_1, { index, reason }) => {
-			setActiveId(id_1 ?? "");
+		onItemHighlighted: (id, { index, reason }) => {
+			setActiveId(id ?? "");
 			if (index < 0 || reason === "pointer") return;
 			virtualizer.scrollToIndex(Math.floor(index / COLUMNS), { align: "auto" });
 		},
@@ -86,24 +86,24 @@ function IconPicker({ value, ids, onSelect }) {
 							"aria-rowindex": row.index + 1,
 							className: "absolute top-0 left-0 grid w-full grid-cols-7 gap-1",
 							style: {
-								height: ROW_HEIGHT - 4,
+								height: 40,
 								transform: `translateY(${row.start}px)`
 							},
-							children: filteredIds.slice(row.index * COLUMNS, (row.index + 1) * COLUMNS).map((id_2, column) => {
-								const index_0 = row.index * COLUMNS + column;
+							children: filteredIds.slice(row.index * COLUMNS, (row.index + 1) * COLUMNS).map((id, column) => {
+								const index = row.index * COLUMNS + column;
 								return /* @__PURE__ */ jsx(Combobox.Item, {
-									value: id_2,
-									index: index_0,
+									value: id,
+									index,
 									"aria-colindex": column + 1,
-									onClick: () => onSelect(id_2),
-									title: id_2,
-									"aria-label": id_2,
+									onClick: () => onSelect(id),
+									title: id,
+									"aria-label": id,
 									className: "text-muted-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-selected:bg-accent data-selected:text-accent-foreground flex cursor-default items-center justify-center rounded-sm p-2 outline-none",
 									children: /* @__PURE__ */ jsx(IconSvg, {
-										iconId: id_2,
+										iconId: id,
 										className: "size-5"
 									})
-								}, id_2);
+								}, id);
 							})
 						}, row.key))
 					})
@@ -117,73 +117,69 @@ function IconPicker({ value, ids, onSelect }) {
 	});
 }
 function IconFieldEditor(t0) {
-	const $ = c(25);
-	if ($[0] !== "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5") {
-		for (let $i = 0; $i < 25; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "06a7f09856913d7ee595c1cdc9745a723a0630fd9b9973c23b1dc93d15da4da5";
-	}
+	const $ = c(24);
 	const { value, ids, onChange } = t0;
 	const [open, setOpen] = useState(false);
 	let t1;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Button, {
 			variant: "outline",
 			role: "combobox",
 			"aria-label": "Choose icon",
 			className: "w-full justify-between"
 		});
-		$[1] = t1;
-	} else t1 = $[1];
+		$[0] = t1;
+	} else t1 = $[0];
 	let t2;
-	if ($[2] !== value) {
+	if ($[1] !== value) {
 		t2 = /* @__PURE__ */ jsx(IconSvg, {
 			iconId: value,
 			className: "size-4 shrink-0"
 		});
-		$[2] = value;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[1] = value;
+		$[2] = t2;
+	} else t2 = $[2];
 	let t3;
-	if ($[4] !== value) {
+	if ($[3] !== value) {
 		t3 = value.split(":")[1] ?? value;
-		$[4] = value;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[3] = value;
+		$[4] = t3;
+	} else t3 = $[4];
 	let t4;
-	if ($[6] !== t3) {
+	if ($[5] !== t3) {
 		t4 = /* @__PURE__ */ jsx("span", {
 			className: "truncate",
 			children: t3
 		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
 	let t5;
-	if ($[8] !== t2 || $[9] !== t4) {
+	if ($[7] !== t2 || $[8] !== t4) {
 		t5 = /* @__PURE__ */ jsxs("span", {
 			className: "flex min-w-0 items-center gap-2",
 			children: [t2, t4]
 		});
-		$[8] = t2;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
 	let t6;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" });
-		$[11] = t6;
-	} else t6 = $[11];
+		$[10] = t6;
+	} else t6 = $[10];
 	let t7;
-	if ($[12] !== t5) {
+	if ($[11] !== t5) {
 		t7 = /* @__PURE__ */ jsxs(PopoverTrigger, {
 			render: t1,
 			children: [t5, t6]
 		});
-		$[12] = t5;
-		$[13] = t7;
-	} else t7 = $[13];
+		$[11] = t5;
+		$[12] = t7;
+	} else t7 = $[12];
 	let t8;
-	if ($[14] !== ids || $[15] !== onChange || $[16] !== open || $[17] !== value) {
+	if ($[13] !== ids || $[14] !== onChange || $[15] !== open || $[16] !== value) {
 		t8 = open && /* @__PURE__ */ jsx(IconPicker, {
 			value,
 			ids,
@@ -192,25 +188,25 @@ function IconFieldEditor(t0) {
 				setOpen(false);
 			}
 		});
-		$[14] = ids;
-		$[15] = onChange;
-		$[16] = open;
-		$[17] = value;
-		$[18] = t8;
-	} else t8 = $[18];
+		$[13] = ids;
+		$[14] = onChange;
+		$[15] = open;
+		$[16] = value;
+		$[17] = t8;
+	} else t8 = $[17];
 	let t9;
-	if ($[19] !== t8) {
+	if ($[18] !== t8) {
 		t9 = /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
 			side: "bottom",
 			className: "w-80 p-0",
 			children: t8
 		});
-		$[19] = t8;
-		$[20] = t9;
-	} else t9 = $[20];
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
 	let t10;
-	if ($[21] !== open || $[22] !== t7 || $[23] !== t9) {
+	if ($[20] !== open || $[21] !== t7 || $[22] !== t9) {
 		t10 = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col",
 			children: /* @__PURE__ */ jsxs(Popover, {
@@ -219,11 +215,11 @@ function IconFieldEditor(t0) {
 				children: [t7, t9]
 			})
 		});
-		$[21] = open;
-		$[22] = t7;
-		$[23] = t9;
-		$[24] = t10;
-	} else t10 = $[24];
+		$[20] = open;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
 	return t10;
 }