camox 0.43.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

@@ -0,0 +1,227 @@
+import { IconSvg } from "../../../core/lib/icons.js";
+import { c } from "react/compiler-runtime";
+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 { 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
+const COLUMNS = 7;
+const ROW_HEIGHT = 44;
+function IconPicker({ value, ids, onSelect }) {
+	"use no memo";
+	const scrollRef = useRef(null);
+	const [ready, setReady] = useState(false);
+	useEffect(() => setReady(true), []);
+	const [search, setSearch] = useState("");
+	const [activeId, setActiveId] = useState(value);
+	const filteredIds = useMemo(() => {
+		const query = search.trim();
+		if (!query) return ids;
+		return ids.map((id) => ({
+			id,
+			score: commandFilter(id, query)
+		})).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);
+	const virtualizer = useVirtualizer({
+		count: Math.ceil(filteredIds.length / COLUMNS),
+		getScrollElement: () => scrollRef.current,
+		estimateSize: () => ROW_HEIGHT,
+		overscan: 2,
+		initialOffset: () => activeRow * ROW_HEIGHT,
+		rangeExtractor: (range) => [.../* @__PURE__ */ new Set([...defaultRangeExtractor(range), activeRow])].sort((a, b) => a - b)
+	});
+	return /* @__PURE__ */ jsx(Combobox.Root, {
+		inline: true,
+		open: ready,
+		grid: true,
+		virtualized: true,
+		autoHighlight: true,
+		loopFocus: false,
+		items: ids,
+		filteredItems: filteredIds,
+		value,
+		inputValue: search,
+		onInputValueChange: (nextSearch) => {
+			setSearch(nextSearch);
+			setActiveId("");
+			virtualizer.scrollToOffset(0);
+		},
+		onItemHighlighted: (id, { index, reason }) => {
+			setActiveId(id ?? "");
+			if (index < 0 || reason === "pointer") return;
+			virtualizer.scrollToIndex(Math.floor(index / COLUMNS), { align: "auto" });
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 p-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "p-1 pb-0",
+				children: /* @__PURE__ */ jsxs(InputGroup, {
+					className: "border-input/30 bg-input/30 h-8 rounded-lg shadow-none",
+					children: [/* @__PURE__ */ jsx(Combobox.Input, {
+						render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+						"aria-label": "Search icons",
+						placeholder: "Search icons…"
+					}), /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-4" }) })]
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "p-1",
+				children: [/* @__PURE__ */ jsx(Combobox.List, {
+					ref: scrollRef,
+					"aria-rowcount": Math.ceil(filteredIds.length / COLUMNS),
+					"aria-colcount": COLUMNS,
+					"aria-label": "Choose icon",
+					className: "no-scrollbar max-h-72 overflow-x-hidden overflow-y-auto",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "relative",
+						style: { height: virtualizer.getTotalSize() },
+						children: virtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Combobox.Row, {
+							"aria-rowindex": row.index + 1,
+							className: "absolute top-0 left-0 grid w-full grid-cols-7 gap-1",
+							style: {
+								height: 40,
+								transform: `translateY(${row.start}px)`
+							},
+							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,
+									index,
+									"aria-colindex": column + 1,
+									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,
+										className: "size-5"
+									})
+								}, id);
+							})
+						}, row.key))
+					})
+				}), !filteredIds.length && /* @__PURE__ */ jsx("div", {
+					role: "status",
+					className: "py-6 text-center text-sm",
+					children: "No matching icons."
+				})]
+			})]
+		})
+	});
+}
+function IconFieldEditor(t0) {
+	const $ = c(24);
+	const { value, ids, onChange } = t0;
+	const [open, setOpen] = useState(false);
+	let t1;
+	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"
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== value) {
+		t2 = /* @__PURE__ */ jsx(IconSvg, {
+			iconId: value,
+			className: "size-4 shrink-0"
+		});
+		$[1] = value;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== value) {
+		t3 = value.split(":")[1] ?? value;
+		$[3] = value;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t2 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-2",
+			children: [t2, t4]
+		});
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" });
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(PopoverTrigger, {
+			render: t1,
+			children: [t5, t6]
+		});
+		$[11] = t5;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== ids || $[14] !== onChange || $[15] !== open || $[16] !== value) {
+		t8 = open && /* @__PURE__ */ jsx(IconPicker, {
+			value,
+			ids,
+			onSelect: (id) => {
+				onChange(id);
+				setOpen(false);
+			}
+		});
+		$[13] = ids;
+		$[14] = onChange;
+		$[15] = open;
+		$[16] = value;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t8) {
+		t9 = /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			side: "bottom",
+			className: "w-80 p-0",
+			children: t8
+		});
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== open || $[21] !== t7 || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [t7, t9]
+			})
+		});
+		$[20] = open;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+
+//#endregion
+export { IconFieldEditor };