@povio/ui 5.0.0-rc.1 → 5.0.0-rc.11

package/dist/AppCanvasPage-BsQrZ8q7.js

@@ -0,0 +1,2497 @@
+import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
+import { a as getBoxHighlights, d as Pin, f as Moon, l as useUIConfiguration, o as HighlightOverlay, r as inspectElement, s as InspectorDetails, t as UIConfigurationModal, u as Sun } from "./UIConfigurator-C_2kgJtm.js";
+import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
+import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
+import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
+import { t as Upload } from "./upload-CXU83BJ4.js";
+import { t as X } from "./x-B6vfz8Ps.js";
+import { c as isEditableToken } from "./theme-model-DtTsIxou.js";
+import { t as componentArtboards } from "./groups-oQmSeqXn.js";
+import { Suspense, lazy, memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/code-xml.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$9 = {
+	name: "code-xml",
+	size: 24,
+	node: [
+		["path", {
+			d: "m18 16 4-4-4-4",
+			key: "1inbqp"
+		}],
+		["path", {
+			d: "m6 8-4 4 4 4",
+			key: "15zrgr"
+		}],
+		["path", {
+			d: "m14.5 4-5 16",
+			key: "e7oirm"
+		}]
+	],
+	aliases: ["code-2"]
+};
+__iconData$9.node;
+const CodeXml = createLucideIcon(__iconData$9);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/download.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$8 = {
+	name: "download",
+	size: 24,
+	node: [
+		["path", {
+			d: "M12 15V3",
+			key: "m9g1x1"
+		}],
+		["path", {
+			d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+			key: "ih7n3h"
+		}],
+		["path", {
+			d: "m7 10 5 5 5-5",
+			key: "brsn70"
+		}]
+	]
+};
+__iconData$8.node;
+const Download = createLucideIcon(__iconData$8);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$7 = {
+	name: "frame",
+	size: 24,
+	node: [
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "6",
+			y2: "6",
+			key: "15w7dq"
+		}],
+		["line", {
+			x1: "22",
+			x2: "2",
+			y1: "18",
+			y2: "18",
+			key: "1ip48p"
+		}],
+		["line", {
+			x1: "6",
+			x2: "6",
+			y1: "2",
+			y2: "22",
+			key: "a2lnyx"
+		}],
+		["line", {
+			x1: "18",
+			x2: "18",
+			y1: "2",
+			y2: "22",
+			key: "8vb6jd"
+		}]
+	]
+};
+__iconData$7.node;
+const Frame = createLucideIcon(__iconData$7);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/hand.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$6 = {
+	name: "hand",
+	size: 24,
+	node: [
+		["path", {
+			d: "M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2",
+			key: "1fvzgz"
+		}],
+		["path", {
+			d: "M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2",
+			key: "1kc0my"
+		}],
+		["path", {
+			d: "M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8",
+			key: "10h0bg"
+		}],
+		["path", {
+			d: "M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15",
+			key: "1s1gnw"
+		}]
+	]
+};
+__iconData$6.node;
+const Hand = createLucideIcon(__iconData$6);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$5 = {
+	name: "monitor",
+	size: 24,
+	node: [
+		["rect", {
+			width: "20",
+			height: "14",
+			x: "2",
+			y: "3",
+			rx: "2",
+			key: "48i651"
+		}],
+		["line", {
+			x1: "8",
+			x2: "16",
+			y1: "21",
+			y2: "21",
+			key: "1svkeh"
+		}],
+		["line", {
+			x1: "12",
+			x2: "12",
+			y1: "17",
+			y2: "21",
+			key: "vw1qmm"
+		}]
+	]
+};
+__iconData$5.node;
+const Monitor = createLucideIcon(__iconData$5);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$4 = {
+	name: "mouse-pointer-2",
+	size: 24,
+	node: [["path", {
+		d: "M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z",
+		key: "edeuup"
+	}]]
+};
+__iconData$4.node;
+const MousePointer2 = createLucideIcon(__iconData$4);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$3 = {
+	name: "panel-left",
+	size: 24,
+	node: [["rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2",
+		key: "afitv7"
+	}], ["path", {
+		d: "M9 3v18",
+		key: "fh3hqa"
+	}]],
+	aliases: ["sidebar"]
+};
+__iconData$3.node;
+const PanelLeft = createLucideIcon(__iconData$3);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panels-top-left.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$2 = {
+	name: "panels-top-left",
+	size: 24,
+	node: [
+		["rect", {
+			width: "18",
+			height: "18",
+			x: "3",
+			y: "3",
+			rx: "2",
+			key: "afitv7"
+		}],
+		["path", {
+			d: "M3 9h18",
+			key: "1pudct"
+		}],
+		["path", {
+			d: "M9 21V9",
+			key: "1oto5p"
+		}]
+	],
+	aliases: ["layout"]
+};
+__iconData$2.node;
+const PanelsTopLeft = createLucideIcon(__iconData$2);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$1 = {
+	name: "scan-line",
+	size: 24,
+	node: [
+		["path", {
+			d: "M3 7V5a2 2 0 0 1 2-2h2",
+			key: "aa7l1z"
+		}],
+		["path", {
+			d: "M17 3h2a2 2 0 0 1 2 2v2",
+			key: "4qcy5o"
+		}],
+		["path", {
+			d: "M21 17v2a2 2 0 0 1-2 2h-2",
+			key: "6vwrx8"
+		}],
+		["path", {
+			d: "M7 21H5a2 2 0 0 1-2-2v-2",
+			key: "ioqczr"
+		}],
+		["path", {
+			d: "M7 12h10",
+			key: "b7w52i"
+		}]
+	]
+};
+__iconData$1.node;
+const ScanLine = createLucideIcon(__iconData$1);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "settings-2",
+	size: 24,
+	node: [
+		["path", {
+			d: "M14 17H5",
+			key: "gfn3mx"
+		}],
+		["path", {
+			d: "M19 7h-9",
+			key: "6i9tg"
+		}],
+		["circle", {
+			cx: "17",
+			cy: "17",
+			r: "3",
+			key: "18b49y"
+		}],
+		["circle", {
+			cx: "7",
+			cy: "7",
+			r: "3",
+			key: "dfmy0x"
+		}]
+	]
+};
+__iconData.node;
+const Settings2 = createLucideIcon(__iconData);
+//#endregion
+//#region src/app-canvas/useFrameStartup.ts
+/** Bound concurrent bootstraps, without unloading any admitted page. */
+function useFrameStartup(keys, concurrency = 2) {
+	const [admitted, setAdmitted] = useState(() => /* @__PURE__ */ new Set());
+	const state = useRef({
+		keys: [],
+		admitted: /* @__PURE__ */ new Set(),
+		pending: /* @__PURE__ */ new Map()
+	});
+	const pumpRef = useRef(() => {});
+	const pump = useCallback(() => {
+		const current = state.current;
+		let changed = false;
+		for (const key of current.keys) {
+			if (current.pending.size >= concurrency) break;
+			if (current.admitted.has(key)) continue;
+			current.admitted.add(key);
+			changed = true;
+			current.pending.set(key, setTimeout(() => {
+				current.pending.delete(key);
+				pumpRef.current();
+			}, 3e4));
+		}
+		if (changed) setAdmitted(new Set(current.admitted));
+	}, [concurrency]);
+	pumpRef.current = pump;
+	const signature = JSON.stringify(keys);
+	useEffect(() => {
+		const next = JSON.parse(signature);
+		const wanted = new Set(next);
+		const current_0 = state.current;
+		current_0.keys = next;
+		let changed_0 = false;
+		for (const key_0 of current_0.admitted) {
+			if (wanted.has(key_0)) continue;
+			current_0.admitted.delete(key_0);
+			const timer = current_0.pending.get(key_0);
+			if (timer !== void 0) clearTimeout(timer);
+			current_0.pending.delete(key_0);
+			changed_0 = true;
+		}
+		if (changed_0) setAdmitted(new Set(current_0.admitted));
+		pump();
+	}, [signature, pump]);
+	useEffect(() => () => {
+		for (const timer_0 of state.current.pending.values()) clearTimeout(timer_0);
+		state.current.pending.clear();
+		state.current.admitted.clear();
+	}, []);
+	return {
+		admitted,
+		complete: useCallback((key_1) => {
+			if (!key_1) return;
+			const timer_1 = state.current.pending.get(key_1);
+			if (timer_1 === void 0) return;
+			clearTimeout(timer_1);
+			state.current.pending.delete(key_1);
+			pumpRef.current();
+		}, [])
+	};
+}
+//#endregion
+//#region src/app-canvas/PageLayers.tsx
+const excluded = /* @__PURE__ */ new Set([
+	"SCRIPT",
+	"STYLE",
+	"LINK",
+	"META",
+	"NOSCRIPT",
+	"TEMPLATE"
+]);
+function childrenOf(element) {
+	return Array.from(element.children).filter((child) => child.namespaceURI === "http://www.w3.org/1999/xhtml" && !excluded.has(child.tagName) && !child.hidden && child.getClientRects().length > 0);
+}
+function labelOf(element) {
+	return (element.getAttribute("aria-label") || element.getAttribute("alt") || (!element.children.length ? element.textContent?.trim().replace(/\s+/g, " ") : ""))?.slice(0, 48) || (element.id ? `#${element.id}` : "");
+}
+/** Only expanded branches are read and rendered; large pages do not create a second full DOM tree. */
+function PageLayers({ frame, title, selected, onSelect }) {
+	const [root, setRoot] = useState(null);
+	const [, refresh] = useReducer((value) => value + 1, 0);
+	const expanded = useRef(/* @__PURE__ */ new WeakSet());
+	const collapsed = useRef(/* @__PURE__ */ new WeakSet());
+	const ids = useRef(/* @__PURE__ */ new WeakMap());
+	const nextId = useRef(0);
+	const [limit, setLimit] = useState(300);
+	useEffect(() => {
+		if (!frame) return;
+		let observer;
+		let scheduled = null;
+		const update = () => {
+			scheduled = null;
+			refresh();
+		};
+		const attach = () => {
+			observer?.disconnect();
+			try {
+				const doc = frame.contentDocument;
+				const element = doc?.querySelector("#storybook-root, #app, #root") ?? doc?.body ?? null;
+				setRoot(element);
+				if (element) {
+					observer = new MutationObserver(() => {
+						if (scheduled === null) scheduled = requestAnimationFrame(update);
+					});
+					observer.observe(element, {
+						childList: true,
+						subtree: true,
+						attributes: true,
+						characterData: true
+					});
+				}
+			} catch {
+				setRoot(null);
+			}
+		};
+		attach();
+		frame.addEventListener("load", attach);
+		return () => {
+			observer?.disconnect();
+			frame.removeEventListener("load", attach);
+			if (scheduled !== null) cancelAnimationFrame(scheduled);
+		};
+	}, [frame]);
+	useEffect(() => {
+		if (!root || !selected || !root.contains(selected)) return;
+		for (let parent = selected.parentElement; parent && parent !== root; parent = parent.parentElement) {
+			expanded.current.add(parent);
+			collapsed.current.delete(parent);
+		}
+		refresh();
+	}, [root, selected]);
+	const toggle = (element_0, open) => {
+		if (open) {
+			expanded.current.delete(element_0);
+			collapsed.current.add(element_0);
+		} else {
+			expanded.current.add(element_0);
+			collapsed.current.delete(element_0);
+		}
+		refresh();
+	};
+	let count = 0;
+	let truncated = false;
+	const render = (element_1, depth) => {
+		if (++count > limit || depth > 60) {
+			truncated = true;
+			return null;
+		}
+		if (!ids.current.has(element_1)) ids.current.set(element_1, ++nextId.current);
+		const children = childrenOf(element_1);
+		const open_0 = !collapsed.current.has(element_1) && (depth < 2 || expanded.current.has(element_1));
+		const label = labelOf(element_1);
+		return /* @__PURE__ */ jsxs("div", {
+			role: "treeitem",
+			"aria-label": `${element_1.localName}${label ? ` ${label}` : ""}`,
+			"aria-level": depth + 1,
+			"aria-selected": element_1 === selected,
+			"aria-expanded": children.length ? open_0 : void 0,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-layer-row",
+				style: { paddingLeft: 8 + depth * 12 },
+				children: [children.length ? /* @__PURE__ */ jsx("button", {
+					className: "povio-canvas-layer-toggle",
+					"aria-label": `${open_0 ? "Collapse" : "Expand"} ${element_1.localName}${label ? ` ${label}` : ""}`,
+					onClick: () => toggle(element_1, open_0),
+					children: open_0 ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 })
+				}) : /* @__PURE__ */ jsx("span", { className: "povio-canvas-layer-spacer" }), /* @__PURE__ */ jsxs("button", {
+					className: "povio-canvas-layer-select",
+					title: `${element_1.localName}${label ? ` · ${label}` : ""}`,
+					onClick: () => onSelect(element_1),
+					onKeyDown: (event) => {
+						if (event.key === "ArrowRight" && children.length && !open_0) {
+							event.preventDefault();
+							toggle(element_1, false);
+						}
+						if (event.key === "ArrowLeft" && open_0) {
+							event.preventDefault();
+							toggle(element_1, true);
+						}
+					},
+					children: [/* @__PURE__ */ jsx("code", { children: element_1.localName }), label && /* @__PURE__ */ jsx("span", { children: label })]
+				})]
+			}), open_0 && !!children.length && /* @__PURE__ */ jsx("div", {
+				role: "group",
+				children: children.map((child) => render(child, depth + 1))
+			})]
+		}, ids.current.get(element_1));
+	};
+	const content = root ? childrenOf(root).map((element_2) => render(element_2, 0)) : null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "povio-canvas-layers",
+		"aria-label": `Layers for ${title}`,
+		children: [
+			/* @__PURE__ */ jsxs("header", { children: [
+				/* @__PURE__ */ jsx(CodeXml, { size: 14 }),
+				/* @__PURE__ */ jsx("strong", { children: "Layers" }),
+				/* @__PURE__ */ jsx("span", { children: title })
+			] }),
+			/* @__PURE__ */ jsx("div", {
+				role: "tree",
+				"aria-label": "HTML layers",
+				children: content
+			}),
+			!root && /* @__PURE__ */ jsx("p", { children: "Waiting for the page…" }),
+			truncated && /* @__PURE__ */ jsx("button", {
+				className: "povio-canvas-more-layers",
+				onClick: () => setLimit((value_0) => value_0 + 300),
+				children: "Show more layers"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/app-canvas/CanvasInspector.tsx
+/** Inspect the live iframe DOM using its own, unscaled viewport coordinates. */
+function useCanvasInspector(enabled, generation, isKnown) {
+	const [selection, setSelection] = useState(null);
+	const [measurement, setMeasurement] = useState(null);
+	const [pinned, setPinned] = useState(false);
+	const [highlightKey, setHighlightKey] = useState(null);
+	const hoverFrame = useRef(null);
+	const pending = useRef(null);
+	const clear = useCallback(() => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+		hoverFrame.current = null;
+		pending.current = null;
+		setSelection(null);
+		setMeasurement(null);
+		setPinned(false);
+		setHighlightKey(null);
+	}, []);
+	useEffect(() => {
+		if (!enabled) clear();
+	}, [enabled, clear]);
+	useEffect(() => {
+		clear();
+	}, [generation, clear]);
+	useEffect(() => () => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+	}, []);
+	const pick = useCallback((pageId, frame, clientX, clientY, pin) => {
+		if (!enabled || pinned && !pin) return;
+		const bounds = frame.getBoundingClientRect();
+		if (!bounds.width || !bounds.height) return;
+		try {
+			const doc = frame.contentDocument;
+			if (!doc) return;
+			const x = (clientX - bounds.left) * frame.clientWidth / bounds.width;
+			const y = (clientY - bounds.top) * frame.clientHeight / bounds.height;
+			const hit = doc.elementFromPoint(x, y);
+			const element = hit?.closest("button,input,textarea,select,a,label,[role],h1,h2,h3,h4,h5,h6,p") ?? hit;
+			if (!element || element === doc.documentElement || element === doc.body || element.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
+			const target = element;
+			setSelection((current) => current?.element === target ? current : {
+				pageId,
+				element: target
+			});
+			setHighlightKey(null);
+			if (pin) setPinned((current_0) => !(current_0 && selection?.element === target));
+		} catch {
+			clear();
+		}
+	}, [
+		enabled,
+		pinned,
+		selection,
+		clear
+	]);
+	const hover = useCallback((pageId_0, frame_0, x_0, y_0) => {
+		if (!enabled || pinned) return;
+		pending.current = () => pick(pageId_0, frame_0, x_0, y_0, false);
+		if (hoverFrame.current !== null) return;
+		hoverFrame.current = requestAnimationFrame(() => {
+			hoverFrame.current = null;
+			pending.current?.();
+			pending.current = null;
+		});
+	}, [
+		enabled,
+		pinned,
+		pick
+	]);
+	const select = useCallback((pageId_1, frame_1, x_1, y_1) => {
+		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
+		hoverFrame.current = null;
+		pending.current = null;
+		pick(pageId_1, frame_1, x_1, y_1, true);
+	}, [pick]);
+	useEffect(() => {
+		if (!enabled || !selection) return;
+		const { element: element_0 } = selection;
+		const doc_0 = element_0.ownerDocument;
+		const owner = doc_0.defaultView;
+		if (!owner) return;
+		let scheduled = null;
+		const measure = () => {
+			scheduled = null;
+			if (!element_0.isConnected) {
+				clear();
+				return;
+			}
+			const rect = element_0.getBoundingClientRect();
+			const snapshot = inspectElement(element_0, isKnown);
+			const details = highlightKey ? getBoxHighlights(element_0, highlightKey) : null;
+			const spacing = highlightKey ? [] : [
+				"padding.top",
+				"padding.right",
+				"padding.bottom",
+				"padding.left",
+				"margin.top",
+				"margin.right",
+				"margin.bottom",
+				"margin.left",
+				"gap.row",
+				"gap.column"
+			].flatMap((key) => {
+				const [kind, side] = key.split(".");
+				const raw = kind === "padding" ? snapshot.box.padding[side] : kind === "margin" ? snapshot.box.margin[side] : snapshot.box.gap[side];
+				if (!(Math.abs(Number.parseFloat(raw)) > 0)) return [];
+				const details_0 = getBoxHighlights(element_0, key);
+				const regions = details_0.regions.filter((region) => region.width > 0 && region.height > 0);
+				return regions.length ? [{
+					key,
+					label: details_0.label,
+					regions
+				}] : [];
+			});
+			if (!highlightKey) {
+				const seen = new Set(spacing.flatMap((item) => item.regions.map((region_0) => `${item.key}:${region_0.left}:${region_0.top}:${region_0.width}:${region_0.height}`)));
+				for (const child of Array.from(element_0.children).slice(0, 80)) {
+					if (child.namespaceURI !== "http://www.w3.org/1999/xhtml" || !child.getClientRects().length) continue;
+					const style = owner.getComputedStyle(child);
+					if (style.display === "none" || style.visibility === "hidden" || /^(absolute|fixed)$/.test(style.position)) continue;
+					for (const side_0 of [
+						"top",
+						"right",
+						"bottom",
+						"left"
+					]) {
+						if (!(Math.abs(Number.parseFloat(style.getPropertyValue(`margin-${side_0}`))) > 0)) continue;
+						const key_0 = `margin.${side_0}`;
+						const details_1 = getBoxHighlights(child, key_0);
+						const regions_0 = details_1.regions.filter((region_1) => {
+							const id = `${key_0}:${region_1.left}:${region_1.top}:${region_1.width}:${region_1.height}`;
+							if (seen.has(id)) return false;
+							seen.add(id);
+							return region_1.width > 0 && region_1.height > 0;
+						});
+						if (regions_0.length) spacing.push({
+							key: key_0,
+							label: details_1.label,
+							regions: regions_0
+						});
+					}
+				}
+			}
+			const next = {
+				snapshot,
+				spacing,
+				outline: {
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				},
+				highlight: details && highlightKey ? {
+					key: highlightKey,
+					...details
+				} : null
+			};
+			setMeasurement((current_1) => JSON.stringify(current_1) === JSON.stringify(next) ? current_1 : next);
+		};
+		const schedule = () => {
+			if (scheduled === null) scheduled = requestAnimationFrame(measure);
+		};
+		const mutations = new MutationObserver(schedule);
+		mutations.observe(doc_0.documentElement, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
+		});
+		const resize = new ResizeObserver(schedule);
+		resize.observe(element_0);
+		owner.addEventListener("scroll", schedule, true);
+		measure();
+		return () => {
+			mutations.disconnect();
+			resize.disconnect();
+			owner.removeEventListener("scroll", schedule, true);
+			if (scheduled !== null) cancelAnimationFrame(scheduled);
+		};
+	}, [
+		enabled,
+		selection,
+		highlightKey,
+		clear,
+		isKnown
+	]);
+	return {
+		selection,
+		selectElement: (pageId_2, element_1) => {
+			setSelection({
+				pageId: pageId_2,
+				element: element_1
+			});
+			setPinned(true);
+			setHighlightKey(null);
+		},
+		measurement,
+		pinned,
+		hover,
+		select,
+		clear,
+		highlight: setHighlightKey,
+		togglePin: () => setPinned((value) => !value)
+	};
+}
+function CanvasInspectorPanel(t0) {
+	const $ = c(22);
+	const { inspector, onClose, onSelectToken } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("strong", { children: "Inspector view" });
+		$[0] = t1;
+	} else t1 = $[0];
+	const t2 = !inspector.selection;
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Pin, { size: 14 });
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== inspector.pinned || $[3] !== inspector.togglePin || $[4] !== t2) {
+		t4 = /* @__PURE__ */ jsx("button", {
+			"aria-label": "Pin inspected element",
+			"aria-pressed": inspector.pinned,
+			disabled: t2,
+			onClick: inspector.togglePin,
+			children: t3
+		});
+		$[2] = inspector.pinned;
+		$[3] = inspector.togglePin;
+		$[4] = t2;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(X, { size: 15 });
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== onClose) {
+		t6 = /* @__PURE__ */ jsx("button", {
+			"aria-label": "Close inspector view",
+			onClick: onClose,
+			children: t5
+		});
+		$[7] = onClose;
+		$[8] = t6;
+	} else t6 = $[8];
+	let t7;
+	if ($[9] !== t4 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("header", { children: [
+			t1,
+			t4,
+			t6
+		] });
+		$[9] = t4;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	const t8 = inspector.pinned ? "Selection pinned · click it again to unpin" : "Hover a component · click to pin";
+	let t9;
+	if ($[12] !== t8) {
+		t9 = /* @__PURE__ */ jsx("p", {
+			className: "povio-canvas-inspect-hint",
+			children: t8
+		});
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement || $[16] !== onSelectToken) {
+		t10 = inspector.measurement ? /* @__PURE__ */ jsx(InspectorDetails, {
+			snapshot: inspector.measurement.snapshot,
+			onSelect: onSelectToken,
+			onHighlight: inspector.highlight
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "povio-canvas-inspect-hint",
+			children: "Inspect a live page to see its padding, margins, borders, radii and gaps."
+		});
+		$[14] = inspector.highlight;
+		$[15] = inspector.measurement;
+		$[16] = onSelectToken;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10 || $[19] !== t7 || $[20] !== t9) {
+		t11 = /* @__PURE__ */ jsxs("aside", {
+			className: "studio-inspector-panel povio-canvas-inspector",
+			"aria-label": "Inspector view",
+			children: [
+				t7,
+				t9,
+				t10
+			]
+		});
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
+	return t11;
+}
+function CanvasInspectionOverlay(t0) {
+	const $ = c(9);
+	const { measurement, width } = t0;
+	let t1;
+	if ($[0] !== measurement.outline) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			className: "studio-hover-outline",
+			style: measurement.outline
+		});
+		$[0] = measurement.outline;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== measurement.highlight || $[3] !== measurement.spacing || $[4] !== width) {
+		t2 = measurement.highlight ? /* @__PURE__ */ jsx(HighlightOverlay, {
+			highlight: measurement.highlight,
+			width
+		}) : measurement.spacing.map((highlight) => /* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-auto-spacing",
+			children: [/* @__PURE__ */ jsx(HighlightOverlay, {
+				highlight,
+				width
+			}), highlight.regions.map((region) => /* @__PURE__ */ jsx("span", {
+				className: "povio-canvas-spacing-value",
+				style: {
+					left: region.left + region.width / 2,
+					top: region.top + region.height / 2
+				},
+				children: highlight.label.split(": ")[1]
+			}, `${region.left}:${region.top}:${region.width}:${region.height}`))]
+		}, `${highlight.key}:${highlight.label}:${highlight.regions[0]?.left}:${highlight.regions[0]?.top}`));
+		$[2] = measurement.highlight;
+		$[3] = measurement.spacing;
+		$[4] = width;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-inspection-overlay",
+			"aria-hidden": "true",
+			children: [t1, t2]
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+//#region src/app-canvas/route-model.ts
+function joinPath(parent, path) {
+	return `${parent.replace(/\/$/, "")}/${path.replace(/^\//, "")}`.replace(/\/{2,}/g, "/") || "/";
+}
+function resolvePath(path, params) {
+	const missingParams = /* @__PURE__ */ new Set();
+	const value = (key, optional = false) => {
+		const actualKey = key || "_splat";
+		const raw = params[actualKey];
+		if (raw === void 0 || !optional && raw === "") {
+			if (!optional) missingParams.add(actualKey);
+			return "";
+		}
+		return actualKey === "_splat" ? raw.split("/").map(encodeURIComponent).join("/") : encodeURIComponent(raw);
+	};
+	return {
+		href: `/${path.split("/").map((segment) => {
+			if (segment.includes("{")) return segment.replace(/\{(-?)\$([^}]*)\}/g, (_, optional, key) => value(key, optional === "-"));
+			return segment.startsWith("$") ? value(segment.slice(1)) : segment;
+		}).filter(Boolean).join("/")}`,
+		missingParams: [...missingParams]
+	};
+}
+/** Catalog route destinations without executing loaders or needing every dynamic parameter. */
+function discoverCanvasPages(router, options = {}) {
+	const records = [];
+	const visited = /* @__PURE__ */ new Set();
+	function visit(route, parentPath, ancestors, root = false) {
+		if (visited.has(route)) return;
+		visited.add(route);
+		const localPath = route.path ?? route.options?.path;
+		const path = route.fullPath ?? (localPath ? joinPath(parentPath, localPath) : parentPath);
+		const id = route.id ?? route.options?.id ?? path;
+		const children = Object.values(route.children ?? {});
+		if (!root && localPath !== void 0 && !options.exclude?.includes(id) && !options.excludePaths?.some((excluded) => (excluded.replace(/\/$/, "") || "/") === (path.replace(/\/$/, "") || "/"))) records.push({
+			route,
+			id,
+			path,
+			ancestors,
+			index: localPath === "/"
+		});
+		for (const child of children) visit(child, path, [...ancestors, id]);
+	}
+	visit(router.routeTree, "/", [], true);
+	for (const route of Object.values(router.routesById ?? {})) if (!visited.has(route)) visit(route, "/", []);
+	const byPath = /* @__PURE__ */ new Map();
+	for (const record of records) {
+		const key = record.path.replace(/\/$/, "") || "/";
+		const existing = byPath.get(key);
+		if (!existing || record.index || record.ancestors.length > existing.ancestors.length) byPath.set(key, record);
+	}
+	const selectedIds = new Set([...byPath.values()].map(({ id }) => id));
+	const destinationIds = new Map(records.map((record) => [record.id, byPath.get(record.path.replace(/\/$/, "") || "/")?.id]));
+	return [...byPath.values()].map(({ id, path, ancestors }) => {
+		const example = options.examples?.[id];
+		const resolved = resolvePath(path, example?.params ?? {});
+		const query = new URLSearchParams();
+		for (const [key, value] of Object.entries(example?.search ?? {})) if (value !== void 0) query.set(key, typeof value === "string" ? value : JSON.stringify(value));
+		const queryString = query.toString();
+		return {
+			id,
+			path,
+			title: example?.title ?? (path === "/" ? "Home" : path),
+			href: resolved.missingParams.length ? void 0 : `${resolved.href}${queryString ? `?${queryString}` : ""}`,
+			parentId: [...ancestors].reverse().map((ancestor) => destinationIds.get(ancestor) ?? ancestor).find((ancestor) => ancestor !== id && selectedIds.has(ancestor)),
+			missingParams: resolved.missingParams,
+			kind: resolved.missingParams.length ? "unresolved" : "page"
+		};
+	});
+}
+/** Deterministic masonry placement. Full measured heights (including 20,000px pages) are never capped. */
+function layoutCanvasPages(pages, width, heights, positions = {}) {
+	const pageWidth = Number.isFinite(width) && width > 0 ? width : 1440;
+	const columns = Math.min(3, Math.max(1, pages.length));
+	const bottoms = Array.from({ length: columns }, () => 0);
+	for (const page of pages) {
+		const saved = positions[page.id];
+		if (!saved || !Number.isFinite(saved.x) || !Number.isFinite(saved.y)) continue;
+		const measured = heights[page.id];
+		const height = Number.isFinite(measured) && measured > 0 ? measured : 900;
+		for (let i = 0; i < columns; i++) {
+			const x = i * (pageWidth + 80);
+			if (saved.x < x + pageWidth && saved.x + pageWidth > x) bottoms[i] = Math.max(bottoms[i], saved.y + height + 128);
+		}
+	}
+	const result = [];
+	for (const page of pages) {
+		const measured = heights[page.id];
+		const height = Number.isFinite(measured) && measured > 0 ? measured : 900;
+		const column = bottoms.indexOf(Math.min(...bottoms));
+		const saved = positions[page.id];
+		const position = saved && Number.isFinite(saved.x) && Number.isFinite(saved.y) ? saved : {
+			x: column * (pageWidth + 80),
+			y: bottoms[column]
+		};
+		result.push({
+			...page,
+			...position,
+			width: pageWidth,
+			height
+		});
+		for (let i = 0; i < columns; i++) {
+			const x = i * (pageWidth + 80);
+			if (position.x < x + pageWidth && position.x + pageWidth > x) bottoms[i] = Math.max(bottoms[i], position.y + height + 128);
+		}
+	}
+	return result;
+}
+/** Match observed navigation back to a catalog destination, including optional and splat routes. */
+function matchCanvasPageHref(pages, href, base = "http://canvas.local/") {
+	let pathname;
+	try {
+		pathname = new URL(href, base).pathname.replace(/\/$/, "") || "/";
+	} catch {
+		return;
+	}
+	const exact = pages.find((page) => {
+		if (!page.href) return false;
+		try {
+			return (new URL(page.href, base).pathname.replace(/\/$/, "") || "/") === pathname;
+		} catch {
+			return false;
+		}
+	});
+	if (exact) return exact;
+	const escape = (part) => part.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	for (const page of pages) {
+		const pattern = page.path.split("/").filter(Boolean).map((part) => {
+			if (part === "$") return "/.+";
+			if (part.startsWith("$")) return "/[^/]+";
+			let text = "", cursor = 0;
+			let optional = false;
+			for (const match of part.matchAll(/\{(-?)\$([^}]*)\}/g)) {
+				text += escape(part.slice(cursor, match.index)) + (match[2] ? "[^/]+" : ".+");
+				cursor = match.index + match[0].length;
+				optional ||= match[1] === "-";
+			}
+			text += escape(part.slice(cursor));
+			return optional ? `(?:/${text})?` : `/${text}`;
+		}).join("");
+		if (new RegExp(`^${pattern || "/"}$`).test(pathname)) return page;
+	}
+}
+//#endregion
+//#region src/app-canvas/protocol.ts
+const canvasProtocol = "povio-app-canvas-v1";
+function canvasFrameIdentity() {
+	if (typeof window === "undefined" || window.parent === window) return null;
+	try {
+		const query = new URLSearchParams(window.location.search);
+		const name = window.name.startsWith(`povio-app-canvas-v1:`) ? JSON.parse(window.name.slice(20)) : null;
+		const id = query.get("__povio_canvas_frame") ?? name?.id;
+		const token = query.get("__povio_canvas_token") ?? name?.token;
+		const height = Number(query.get("__povio_canvas_height") ?? name?.viewportHeight ?? 900);
+		return typeof id === "string" && typeof token === "string" && token.length > 10 ? {
+			id,
+			token,
+			viewportHeight: Math.max(240, Math.min(4e3, height || 900))
+		} : null;
+	} catch {
+		return null;
+	}
+}
+const isAppCanvasFrame = () => !!canvasFrameIdentity();
+function validConfiguration(value) {
+	if (!value || typeof value !== "object") return false;
+	const config = value;
+	return !!config.theme && [
+		"light",
+		"dark",
+		"theme"
+	].every((key) => {
+		const tokens = config.theme[key];
+		return tokens && typeof tokens === "object" && Object.values(tokens).every((v) => typeof v === "string");
+	}) && !!config.config && typeof config.config === "object";
+}
+//#endregion
+//#region src/app-canvas/manifest.ts
+function createCanvasManifest() {
+	return {
+		version: 1,
+		positions: {},
+		examples: {},
+		manualEdges: [],
+		hiddenEdges: [],
+		breakpoint: "desktop"
+	};
+}
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value);
+	if (typeof value !== "object" || depth > 30 || ancestors.has(value)) return false;
+	ancestors.add(value);
+	const valid = Object.values(value).every((child) => isJSON(child, ancestors, depth + 1));
+	ancestors.delete(value);
+	return valid;
+}
+/** Sanitize either stored JSON text or an imported value, retaining valid v1 entries. */
+function parseCanvasManifest(input) {
+	const fallback = createCanvasManifest();
+	let value = input;
+	if (typeof value === "string") try {
+		value = JSON.parse(value);
+	} catch {
+		return fallback;
+	}
+	if (!isRecord(value) || value.version !== 1) return fallback;
+	const positions = Object.fromEntries(Object.entries(isRecord(value.positions) ? value.positions : {}).flatMap(([breakpoint, entries]) => {
+		if (!isRecord(entries)) return [];
+		return [[breakpoint, Object.fromEntries(Object.entries(entries).flatMap(([id, point]) => isRecord(point) && typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y) ? [[id, {
+			x: point.x,
+			y: point.y
+		}]] : []))]];
+	}));
+	const examples = Object.fromEntries(Object.entries(isRecord(value.examples) ? value.examples : {}).flatMap(([id, example]) => {
+		if (!isRecord(example)) return [];
+		const clean = {};
+		if (typeof example.title === "string") clean.title = example.title;
+		if (isRecord(example.params)) clean.params = Object.fromEntries(Object.entries(example.params).filter((entry) => typeof entry[1] === "string"));
+		if (isRecord(example.search)) clean.search = Object.fromEntries(Object.entries(example.search).filter(([, item]) => isJSON(item)));
+		return [[id, clean]];
+	}));
+	const manualEdges = (Array.isArray(value.manualEdges) ? value.manualEdges : []).flatMap((edge) => isRecord(edge) && typeof edge.from === "string" && edge.from.length > 0 && typeof edge.to === "string" && edge.to.length > 0 ? [{
+		from: edge.from,
+		to: edge.to
+	}] : []);
+	return {
+		version: 1,
+		positions,
+		examples,
+		manualEdges: [...new Map(manualEdges.map((edge) => [JSON.stringify(edge), edge])).values()],
+		hiddenEdges: [...new Set((Array.isArray(value.hiddenEdges) ? value.hiddenEdges : []).filter((edge) => typeof edge === "string"))],
+		breakpoint: typeof value.breakpoint === "string" && value.breakpoint.length > 0 ? value.breakpoint : fallback.breakpoint
+	};
+}
+//#endregion
+//#region src/app-canvas/AppCanvas.tsx
+const defaultCanvasBreakpoints = [
+	{
+		id: "mobile",
+		label: "Mobile",
+		width: 390,
+		height: 844
+	},
+	{
+		id: "tablet",
+		label: "Tablet",
+		width: 768,
+		height: 1024
+	},
+	{
+		id: "desktop",
+		label: "Desktop",
+		width: 1440,
+		height: 900
+	}
+];
+const emptyExamples = {};
+const emptyExclude = [];
+/** Zoom per wheel pixel, and the largest delta one wheel event may contribute. */
+const ZOOM_SENSITIVITY = .006;
+const ZOOM_DELTA_LIMIT = 40;
+function readManifest(key) {
+	if (typeof window === "undefined") return createCanvasManifest();
+	try {
+		return parseCanvasManifest(localStorage.getItem(key));
+	} catch {
+		return createCanvasManifest();
+	}
+}
+const PageFrame = memo(function PageFrame(t0) {
+	const $ = c(16);
+	const { id, src, width, height, name, interact, inspect, onLoad, register } = t0;
+	let t1;
+	if ($[0] !== id || $[1] !== register) {
+		t1 = (element) => register(id, element);
+		$[0] = id;
+		$[1] = register;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = !interact && !inspect;
+	const t3 = interact ? 0 : -1;
+	const t4 = `Page ${id}`;
+	let t5;
+	if ($[3] !== id || $[4] !== onLoad) {
+		t5 = (event) => onLoad(id, event.currentTarget);
+		$[3] = id;
+		$[4] = onLoad;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== height || $[7] !== name || $[8] !== src || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== width) {
+		t6 = /* @__PURE__ */ jsx("iframe", {
+			ref: t1,
+			inert: t2,
+			tabIndex: t3,
+			title: t4,
+			name,
+			src,
+			width,
+			height,
+			className: "povio-canvas-frame",
+			onLoad: t5
+		});
+		$[6] = height;
+		$[7] = name;
+		$[8] = src;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = width;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+});
+/** Live route artboards. The camera transforms only the canvas, never the iframe viewport width. */
+function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, excludePaths = emptyExclude, breakpoints = defaultCanvasBreakpoints, storageKey = "povio-app-canvas", frameUrl, componentsHref }) {
+	const configuration = useUIConfiguration();
+	const [manifest, setManifest] = useState(() => readManifest(storageKey));
+	const [runtime, setRuntime] = useState({});
+	const [selected, setSelected] = useState(null);
+	const [interact, setInteract] = useState(false);
+	const [inspectMode, setInspectMode] = useState(false);
+	const [dark, setDark] = useState(false);
+	/** The canvas shows either the app's pages or the component gallery's sections, as artboards either way. */
+	const [content, setContent] = useState("pages");
+	const [mobilePanel, setMobilePanel] = useState(null);
+	const [query, setQuery] = useState("");
+	const [notice, setNotice] = useState("");
+	const [documentGeneration, setDocumentGeneration] = useState(0);
+	const [reload, setReload] = useState({});
+	const zoomOutput = useRef(null);
+	const importInput = useRef(null);
+	const viewport = useRef(null), world = useRef(null);
+	const frames = useRef(/* @__PURE__ */ new Map());
+	const [token] = useState(() => crypto.randomUUID());
+	const revision = useRef(0), camera = useRef({
+		x: 40,
+		y: 40,
+		zoom: .25
+	}), pendingCamera = useRef(null);
+	const pointer = useRef(null);
+	const cameraRevision = useRef(0);
+	const bp = breakpoints.find((item) => item.id === manifest.breakpoint) ?? breakpoints[breakpoints.length - 1] ?? defaultCanvasBreakpoints[2];
+	const isKnownToken = useCallback((name) => isEditableToken(name, configuration.defaults), [configuration.defaults]);
+	const { hostComponents } = configuration;
+	useEffect(() => hostComponents(), [hostComponents]);
+	const inspector = useCanvasInspector(inspectMode, `${content}:${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`, isKnownToken);
+	const pageCatalog = useMemo(() => discoverCanvasPages(router, {
+		examples: {
+			...examples,
+			...manifest.examples
+		},
+		exclude,
+		excludePaths
+	}), [
+		router,
+		examples,
+		manifest.examples,
+		exclude,
+		excludePaths
+	]);
+	const componentCatalog = useMemo(() => componentsHref ? componentArtboards.map((group) => ({
+		id: `components:${group.toLowerCase()}`,
+		title: group,
+		path: group,
+		href: componentsHref(group),
+		missingParams: [],
+		kind: "page"
+	})) : [], [componentsHref]);
+	const catalog = content === "components" && componentCatalog.length ? componentCatalog : pageCatalog;
+	const startupKeys = useMemo(() => new Map(catalog.filter((page) => page.href).map((page_0) => [page_0.id, `${documentGeneration}:${bp.id}:${page_0.id}:${page_0.href}:${reload[page_0.id] ?? 0}`])), [
+		catalog,
+		documentGeneration,
+		bp.id,
+		reload
+	]);
+	const startup = useFrameStartup([...startupKeys.values()]);
+	const startupRef = useRef({
+		keys: startupKeys,
+		complete: startup.complete
+	});
+	startupRef.current = {
+		keys: startupKeys,
+		complete: startup.complete
+	};
+	const heights = useMemo(() => Object.fromEntries(catalog.map((page_1) => [page_1.id, runtime[`${bp.id}:${page_1.id}:${page_1.href ?? ""}`]?.height ?? bp.height])), [
+		catalog,
+		runtime,
+		bp
+	]);
+	const nodes = useMemo(() => layoutCanvasPages(catalog, bp.width, heights, manifest.positions[bp.id] ?? {}), [
+		catalog,
+		bp,
+		heights,
+		manifest.positions
+	]);
+	const nodeMap = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
+	const latest = useRef({
+		configuration: configuration.active,
+		dark,
+		interact,
+		bp,
+		catalog,
+		frameUrl
+	});
+	latest.current = {
+		configuration: configuration.active,
+		dark,
+		interact,
+		bp,
+		catalog,
+		frameUrl
+	};
+	const register = useCallback((id, frame) => {
+		if (frame) frames.current.set(id, frame);
+		else frames.current.delete(id);
+	}, []);
+	const paint = useCallback(() => {
+		if (world.current) {
+			world.current.style.transform = `translate3d(${camera.current.x}px,${camera.current.y}px,0) scale(${camera.current.zoom})`;
+			const zoom = String(camera.current.zoom);
+			if (world.current.style.getPropertyValue("--canvas-zoom") !== zoom) world.current.style.setProperty("--canvas-zoom", zoom);
+		}
+		if (zoomOutput.current) zoomOutput.current.textContent = `${Math.round(camera.current.zoom * 1e3) / 10}%`;
+		const canvas = viewport.current?.closest(".povio-app-canvas");
+		if (canvas) canvas.setAttribute("data-camera-revision", String(++cameraRevision.current));
+	}, []);
+	const schedulePaint = useCallback(() => {
+		if (pendingCamera.current !== null) return;
+		pendingCamera.current = requestAnimationFrame(() => {
+			pendingCamera.current = null;
+			paint();
+		});
+	}, [paint]);
+	const send = useCallback((id_0, type = "configuration") => {
+		const frame_0 = frames.current.get(id_0);
+		if (!frame_0?.contentWindow) return;
+		const current = latest.current;
+		try {
+			frame_0.contentWindow.postMessage({
+				protocol: canvasProtocol,
+				id: id_0,
+				token,
+				viewportHeight: current.bp.height,
+				type,
+				configuration: current.configuration,
+				revision: revision.current,
+				dark: current.dark,
+				interact: current.interact
+			}, new URL(frame_0.src).origin);
+		} catch {
+			setNotice("This configuration could not be sent to the page. Check for non-serializable values.");
+		}
+	}, [token]);
+	const focusPage = useCallback((id_1) => {
+		const node_0 = nodeMap.get(id_1), view = viewport.current;
+		if (!node_0 || !view) return;
+		setSelected(id_1);
+		camera.current.zoom = Math.min(1, Math.max(.08, (view.clientWidth - 100) / node_0.width));
+		camera.current.x = 40 - node_0.x * camera.current.zoom;
+		camera.current.y = 40 - node_0.y * camera.current.zoom;
+		paint();
+	}, [nodeMap, paint]);
+	const focusRef = useRef(focusPage);
+	focusRef.current = focusPage;
+	const matchHref = useCallback((href) => matchCanvasPageHref(latest.current.catalog, href, window.location.href), []);
+	useEffect(() => {
+		const queue = /* @__PURE__ */ new Map();
+		let batch = 0;
+		const flush = () => {
+			batch = 0;
+			const changes = Array.from(queue);
+			queue.clear();
+			setRuntime((current_0) => {
+				const next = { ...current_0 };
+				let changed = false;
+				for (const [key, item_0] of changes) {
+					if (frames.current.get(item_0.id) !== item_0.frame || item_0.frame.contentWindow !== item_0.source) continue;
+					next[key] = {
+						...next[key],
+						...item_0.change
+					};
+					changed = true;
+				}
+				return changed ? next : current_0;
+			});
+		};
+		const receive = (event) => {
+			const packet = event.data;
+			if (packet?.protocol !== "povio-app-canvas-v1" || packet.token !== token || typeof packet.id !== "string") return;
+			const frame_1 = frames.current.get(packet.id);
+			if (!frame_1 || event.source !== frame_1.contentWindow || event.origin !== new URL(frame_1.src).origin) return;
+			const key_0 = `${latest.current.bp.id}:${packet.id}:${latest.current.catalog.find((page_2) => page_2.id === packet.id)?.href ?? ""}`;
+			let change = {};
+			if (packet.type === "ready") {
+				startupRef.current.complete(startupRef.current.keys.get(packet.id));
+				change = {
+					ready: true,
+					href: packet.href,
+					timedOut: false
+				};
+				send(packet.id);
+				send(packet.id, "mode");
+			}
+			if (packet.type === "height" && typeof packet.height === "number" && Number.isFinite(packet.height) && packet.height > 0) change.height = packet.height;
+			if (packet.type === "warning" && typeof packet.warning === "string") change.warning = packet.warning;
+			if (packet.type === "ack" && typeof packet.revision === "number") change.revision = packet.revision;
+			if (packet.type === "navigate" && typeof packet.href === "string") {
+				const target = matchHref(packet.href);
+				if (target) focusRef.current(target.id);
+				else setNotice(`Navigation target is not in this canvas: ${packet.href}`);
+				return;
+			}
+			if (!Object.keys(change).length) return;
+			const pending = queue.get(key_0);
+			const previous = pending?.frame === frame_1 && pending.source === event.source ? pending.change : {};
+			queue.set(key_0, {
+				id: packet.id,
+				frame: frame_1,
+				source: event.source,
+				change: {
+					...previous,
+					...change
+				}
+			});
+			if (!batch) batch = requestAnimationFrame(flush);
+		};
+		window.addEventListener("message", receive);
+		return () => {
+			window.removeEventListener("message", receive);
+			cancelAnimationFrame(batch);
+		};
+	}, [
+		token,
+		send,
+		matchHref
+	]);
+	useEffect(() => {
+		const frame_2 = requestAnimationFrame(() => {
+			revision.current++;
+			for (const id_2 of frames.current.keys()) send(id_2);
+		});
+		return () => cancelAnimationFrame(frame_2);
+	}, [
+		configuration.active,
+		dark,
+		send
+	]);
+	useEffect(() => {
+		for (const id_3 of frames.current.keys()) send(id_3, "mode");
+	}, [interact, send]);
+	useEffect(() => {
+		try {
+			localStorage.setItem(storageKey, JSON.stringify(manifest));
+		} catch {
+			setNotice("Browser storage is unavailable; use Export layout to save this canvas.");
+		}
+	}, [manifest, storageKey]);
+	useEffect(() => {
+		paint();
+		const element = viewport.current;
+		if (!element) return;
+		const wheel = (event_0) => {
+			event_0.preventDefault();
+			if (event_0.ctrlKey || event_0.metaKey) {
+				const box = element.getBoundingClientRect();
+				const x = event_0.clientX - box.left, y = event_0.clientY - box.top;
+				const previous_0 = camera.current.zoom;
+				const unit = event_0.deltaMode === 1 ? 16 : event_0.deltaMode === 2 ? element.clientHeight : 1;
+				const delta = Math.max(-40, Math.min(ZOOM_DELTA_LIMIT, event_0.deltaY * unit));
+				const next_0 = Math.max(.005, Math.min(2, previous_0 * Math.exp(-delta * ZOOM_SENSITIVITY)));
+				camera.current.x = x - (x - camera.current.x) * next_0 / previous_0;
+				camera.current.y = y - (y - camera.current.y) * next_0 / previous_0;
+				camera.current.zoom = next_0;
+			} else {
+				camera.current.x -= event_0.deltaX;
+				camera.current.y -= event_0.deltaY;
+			}
+			schedulePaint();
+		};
+		const unscroll = () => {
+			if (element.scrollTop || element.scrollLeft) element.scrollTo(0, 0);
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		element.addEventListener("scroll", unscroll);
+		return () => {
+			element.removeEventListener("wheel", wheel);
+			element.removeEventListener("scroll", unscroll);
+			if (pendingCamera.current !== null) cancelAnimationFrame(pendingCamera.current);
+			pendingCamera.current = null;
+		};
+	}, [paint, schedulePaint]);
+	const fit = () => {
+		if (!nodes.length || !viewport.current) return;
+		const left = Math.min(...nodes.map((n) => n.x)), top = Math.min(...nodes.map((n_0) => n_0.y));
+		const width = Math.max(...nodes.map((n_1) => n_1.x + n_1.width)) - left, height = Math.max(...nodes.map((n_2) => n_2.y + n_2.height + 48)) - top;
+		camera.current.zoom = Math.max(.005, Math.min(1, (viewport.current.clientWidth - 80) / width, (viewport.current.clientHeight - 80) / height));
+		camera.current.x = 40 - left * camera.current.zoom;
+		camera.current.y = 40 - top * camera.current.zoom;
+		paint();
+	};
+	const fitRef = useRef(fit);
+	fitRef.current = fit;
+	const switchContent = (next_1) => {
+		if (next_1 === content) return;
+		setContent(next_1);
+		setSelected(null);
+		setQuery("");
+		requestAnimationFrame(() => fitRef.current());
+	};
+	const zoomTo = (value) => {
+		const view_0 = viewport.current;
+		if (!view_0) return;
+		const previous_1 = camera.current.zoom, next_2 = Math.max(.005, Math.min(2, value));
+		camera.current.x = view_0.clientWidth / 2 - (view_0.clientWidth / 2 - camera.current.x) * next_2 / previous_1;
+		camera.current.y = view_0.clientHeight / 2 - (view_0.clientHeight / 2 - camera.current.y) * next_2 / previous_1;
+		camera.current.zoom = next_2;
+		paint();
+	};
+	const stepZoom = (direction) => {
+		const stops = [
+			.005,
+			.01,
+			.02,
+			.05,
+			.1,
+			.25,
+			.5,
+			.75,
+			1,
+			1.5,
+			2
+		];
+		const current_1 = camera.current.zoom;
+		const next_3 = direction === 1 ? stops.find((value_0) => value_0 > current_1 + 1e-4) : [...stops].reverse().find((value_1) => value_1 < current_1 - 1e-4);
+		if (next_3 !== void 0) zoomTo(next_3);
+	};
+	const startPan = (event_1) => {
+		if (inspectMode && event_1.target.closest(".povio-canvas-frame-cover")) return;
+		if (event_1.button !== 0 || event_1.target.closest("button:not(.povio-canvas-frame-cover),input,select,.povio-canvas-node-header")) return;
+		event_1.currentTarget.setPointerCapture(event_1.pointerId);
+		pointer.current = {
+			id: event_1.pointerId,
+			x: event_1.clientX,
+			y: event_1.clientY,
+			startX: camera.current.x,
+			startY: camera.current.y
+		};
+	};
+	const move = (event_2) => {
+		const current_2 = pointer.current;
+		if (!current_2 || current_2.id !== event_2.pointerId) return;
+		const dx = event_2.clientX - current_2.x, dy = event_2.clientY - current_2.y;
+		if (current_2.node) {
+			const element_0 = world.current?.querySelector(`[data-node-index="${nodes.findIndex((n_3) => n_3.id === current_2.node)}"]`);
+			if (element_0) {
+				element_0.style.left = `${current_2.nodeX + dx / camera.current.zoom}px`;
+				element_0.style.top = `${current_2.nodeY + dy / camera.current.zoom}px`;
+			}
+		} else {
+			camera.current.x = current_2.startX + dx;
+			camera.current.y = current_2.startY + dy;
+			schedulePaint();
+		}
+	};
+	const end = (event_3) => {
+		const current_3 = pointer.current;
+		if (!current_3 || current_3.id !== event_3.pointerId) return;
+		if (current_3.node) {
+			const position = {
+				x: current_3.nodeX + (event_3.clientX - current_3.x) / camera.current.zoom,
+				y: current_3.nodeY + (event_3.clientY - current_3.y) / camera.current.zoom
+			};
+			setManifest((m) => ({
+				...m,
+				positions: {
+					...m.positions,
+					[bp.id]: {
+						...m.positions[bp.id],
+						[current_3.node]: position
+					}
+				}
+			}));
+		}
+		pointer.current = null;
+		if (event_3.currentTarget.hasPointerCapture(event_3.pointerId)) event_3.currentTarget.releasePointerCapture(event_3.pointerId);
+	};
+	const onLoad = useCallback((id_4, frame_3) => {
+		if (frames.current.get(id_4) !== frame_3) return;
+		startupRef.current.complete(startupRef.current.keys.get(id_4));
+		send(id_4);
+		send(id_4, "mode");
+	}, [send]);
+	useEffect(() => {
+		const timer = setTimeout(() => setRuntime((current_4) => {
+			const next_4 = { ...current_4 };
+			for (const page_3 of latest.current.catalog) {
+				const key_1 = `${latest.current.bp.id}:${page_3.id}:${page_3.href ?? ""}`;
+				if (page_3.href && frames.current.has(page_3.id) && !next_4[key_1]?.ready) next_4[key_1] = {
+					...next_4[key_1],
+					timedOut: true
+				};
+			}
+			return next_4;
+		}), 15e3);
+		return () => clearTimeout(timer);
+	}, [
+		bp.id,
+		catalog,
+		reload,
+		startup.admitted
+	]);
+	const exportLayout = () => {
+		const url = URL.createObjectURL(new Blob([JSON.stringify(manifest, null, 2)], { type: "application/json" }));
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "povio-app-canvas.json";
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(url), 1e3);
+	};
+	const width_0 = Math.max(1, ...nodes.map((n_4) => n_4.x + n_4.width + 80)), height_0 = Math.max(1, ...nodes.map((n_5) => n_5.y + n_5.height + 128));
+	const ready = nodes.filter((n_6) => runtime[`${bp.id}:${n_6.id}:${n_6.href ?? ""}`]?.ready).length;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "povio-app-canvas",
+		"data-mobile-panel": mobilePanel ?? "none",
+		"data-inspecting": inspectMode,
+		"aria-label": "App canvas",
+		"data-ready-count": ready,
+		"data-page-count": nodes.length,
+		"data-camera-revision": "0",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: importInput,
+				type: "file",
+				accept: "application/json,.json",
+				hidden: true,
+				"aria-label": "Import canvas layout",
+				onChange: async (event_4) => {
+					const file = event_4.currentTarget.files?.[0];
+					event_4.currentTarget.value = "";
+					if (!file) return;
+					try {
+						const raw = JSON.parse(await file.text());
+						if (raw?.version !== 1) throw new Error("version");
+						setManifest(parseCanvasManifest(raw));
+						setRuntime({});
+						setDocumentGeneration((value_2) => value_2 + 1);
+						setNotice("Layout imported.");
+					} catch {
+						setNotice("Choose a valid version 1 canvas layout JSON file.");
+					}
+				}
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-body",
+				children: [
+					/* @__PURE__ */ jsxs("aside", {
+						className: "povio-canvas-catalog",
+						"aria-label": "Page catalog",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-brand povio-canvas-content-switch",
+								role: "group",
+								"aria-label": "Canvas content",
+								children: [/* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "pages",
+									onClick: () => switchContent("pages"),
+									children: ["Pages", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: pageCatalog.length
+									})]
+								}), !!componentCatalog.length && /* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "components",
+									onClick: () => switchContent("components"),
+									children: ["Components", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: componentCatalog.length
+									})]
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-search",
+								children: [
+									/* @__PURE__ */ jsx(Search, { size: 14 }),
+									/* @__PURE__ */ jsx("input", {
+										"aria-label": content === "components" ? "Find component section" : "Find page",
+										placeholder: content === "components" ? "Find section…" : "Find page…",
+										value: query,
+										onChange: (event_5) => setQuery(event_5.target.value)
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-panel-close",
+										"aria-label": "Close pages panel",
+										onClick: () => setMobilePanel(null),
+										children: /* @__PURE__ */ jsx(X, { size: 16 })
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-page-list",
+								children: [nodes.filter((node_1) => `${node_1.title} ${node_1.path}`.toLowerCase().includes(query.toLowerCase())).map((node_2) => /* @__PURE__ */ jsxs("button", {
+									"aria-pressed": selected === node_2.id,
+									onClick: () => {
+										focusPage(node_2.id);
+										setMobilePanel(null);
+									},
+									children: [/* @__PURE__ */ jsx(Frame, { size: 15 }), /* @__PURE__ */ jsxs("span", {
+										className: "povio-canvas-page-label",
+										children: [/* @__PURE__ */ jsx("strong", { children: node_2.title }), node_2.kind === "unresolved" && /* @__PURE__ */ jsx("small", { children: "Needs parameters" })]
+									})]
+								}, node_2.id)), selected && nodeMap.get(selected)?.href && /* @__PURE__ */ jsx(PageLayers, {
+									frame: frames.current.get(selected) ?? null,
+									title: nodeMap.get(selected).title,
+									selected: inspector.selection?.pageId === selected ? inspector.selection.element : void 0,
+									onSelect: (element_1) => {
+										setInteract(false);
+										setInspectMode(true);
+										inspector.selectElement(selected, element_1);
+										setMobilePanel(null);
+										requestAnimationFrame(() => {
+											const node_3 = nodeMap.get(selected), view_1 = viewport.current;
+											if (!node_3 || !view_1 || !element_1.isConnected) return;
+											const rect = element_1.getBoundingClientRect();
+											camera.current.x = view_1.clientWidth / 2 - (node_3.x + rect.left + rect.width / 2) * camera.current.zoom;
+											camera.current.y = view_1.clientHeight / 2 - (node_3.y + 48 + rect.top + rect.height / 2) * camera.current.zoom;
+											paint();
+										});
+									}
+								}, `${bp.id}:${documentGeneration}:${reload[selected] ?? 0}:${selected}:${nodeMap.get(selected)?.href}`)]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-sidebar-actions",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-file-action",
+										onClick: exportLayout,
+										"aria-label": "Export layout",
+										title: "Export layout",
+										children: /* @__PURE__ */ jsx(Download, { size: 16 })
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-file-action",
+										onClick: () => importInput.current?.click(),
+										"aria-label": "Import layout",
+										title: "Import layout",
+										children: /* @__PURE__ */ jsx(Upload, { size: 16 })
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "povio-canvas-ready",
+										role: "status",
+										children: [
+											/* @__PURE__ */ jsx("i", {}),
+											ready,
+											"/",
+											nodes.length,
+											" ",
+											content === "components" ? "sections" : "pages",
+											" ready"
+										]
+									})
+								]
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						ref: viewport,
+						className: "povio-canvas-viewport",
+						onKeyDownCapture: (event_6) => {
+							if (inspectMode && event_6.key === "Escape") {
+								event_6.preventDefault();
+								inspector.clear();
+							}
+						},
+						onPointerDown: startPan,
+						onPointerMove: move,
+						onPointerUp: end,
+						onPointerCancel: (event_7) => {
+							const current_5 = pointer.current;
+							if (current_5?.node) {
+								const element_2 = world.current?.querySelector(`[data-node-index="${nodes.findIndex((node_4) => node_4.id === current_5.node)}"]`);
+								if (element_2) {
+									element_2.style.left = `${current_5.nodeX}px`;
+									element_2.style.top = `${current_5.nodeY}px`;
+								}
+							}
+							pointer.current = null;
+							if (event_7.currentTarget.hasPointerCapture(event_7.pointerId)) event_7.currentTarget.releasePointerCapture(event_7.pointerId);
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "povio-canvas-mobile-tools",
+								children: /* @__PURE__ */ jsx("button", {
+									"aria-label": "Toggle pages panel",
+									"aria-pressed": mobilePanel === "pages",
+									onClick: () => setMobilePanel(mobilePanel === "pages" ? null : "pages"),
+									children: /* @__PURE__ */ jsx(PanelLeft, { size: 18 })
+								})
+							}),
+							/* @__PURE__ */ jsx("div", {
+								ref: world,
+								className: "povio-canvas-world",
+								style: {
+									width: width_0,
+									height: height_0
+								},
+								children: nodes.map((node_5, index) => {
+									const state = runtime[`${bp.id}:${node_5.id}:${node_5.href ?? ""}`] ?? {};
+									let source = "";
+									let originError = false;
+									if (node_5.href) try {
+										const url_0 = new URL(frameUrl?.(node_5) ?? node_5.href, window.location.href);
+										if (url_0.origin !== window.location.origin) throw new Error("same origin required");
+										url_0.searchParams.delete("povioCanvas");
+										url_0.searchParams.delete("__povio_canvas_frame");
+										url_0.searchParams.delete("__povio_canvas_token");
+										url_0.searchParams.delete("__povio_canvas_height");
+										source = url_0.href;
+									} catch {
+										originError = true;
+									}
+									const redirected = state.href && node_5.href && new URL(state.href, window.location.href).pathname !== new URL(node_5.href, window.location.href).pathname;
+									return /* @__PURE__ */ jsxs("article", {
+										"data-node-index": index,
+										"data-page-id": node_5.id,
+										className: `povio-canvas-node${selected === node_5.id ? " is-selected" : ""}`,
+										style: {
+											left: node_5.x,
+											top: node_5.y,
+											width: node_5.width
+										},
+										children: [
+											/* @__PURE__ */ jsxs("header", {
+												className: "povio-canvas-node-header",
+												onPointerDown: (event_8) => {
+													if (event_8.button !== 0 || event_8.target.closest("button")) return;
+													event_8.stopPropagation();
+													viewport.current?.setPointerCapture(event_8.pointerId);
+													pointer.current = {
+														id: event_8.pointerId,
+														x: event_8.clientX,
+														y: event_8.clientY,
+														startX: 0,
+														startY: 0,
+														node: node_5.id,
+														nodeX: node_5.x,
+														nodeY: node_5.y
+													};
+													setSelected(node_5.id);
+												},
+												children: [
+													/* @__PURE__ */ jsx("strong", { children: node_5.title }),
+													/* @__PURE__ */ jsxs("span", { children: [
+														bp.width,
+														" × ",
+														Math.round(node_5.height).toLocaleString()
+													] }),
+													/* @__PURE__ */ jsx("button", {
+														"aria-label": `Focus ${node_5.title}`,
+														onClick: () => focusPage(node_5.id),
+														children: "↗"
+													}),
+													/* @__PURE__ */ jsx("button", {
+														"aria-label": `Reload ${node_5.title}`,
+														onClick: () => {
+															setRuntime((r) => ({
+																...r,
+																[`${bp.id}:${node_5.id}:${node_5.href ?? ""}`]: {}
+															}));
+															setReload((r_0) => ({
+																...r_0,
+																[node_5.id]: (r_0[node_5.id] ?? 0) + 1
+															}));
+														},
+														children: "↻"
+													})
+												]
+											}),
+											!node_5.href ? /* @__PURE__ */ jsxs("form", {
+												className: "povio-canvas-unresolved",
+												onSubmit: (event_9) => {
+													event_9.preventDefault();
+													const form = new FormData(event_9.currentTarget);
+													const enteredParams = Object.fromEntries(node_5.missingParams.map((key_2) => {
+														const value_3 = form.get(key_2);
+														return [key_2, typeof value_3 === "string" ? value_3 : ""];
+													}));
+													setManifest((m_0) => ({
+														...m_0,
+														examples: {
+															...m_0.examples,
+															[node_5.id]: {
+																...examples[node_5.id],
+																...m_0.examples[node_5.id],
+																params: {
+																	...examples[node_5.id]?.params,
+																	...m_0.examples[node_5.id]?.params,
+																	...enteredParams
+																}
+															}
+														}
+													}));
+												},
+												children: [
+													/* @__PURE__ */ jsx("strong", { children: "Route needs parameters" }),
+													/* @__PURE__ */ jsx("code", { children: node_5.path }),
+													node_5.missingParams.map((key_3) => /* @__PURE__ */ jsxs("label", { children: [key_3, /* @__PURE__ */ jsx("input", {
+														name: key_3,
+														required: true
+													})] }, key_3)),
+													/* @__PURE__ */ jsx("button", { children: "Render page" })
+												]
+											}) : originError ? /* @__PURE__ */ jsx("p", {
+												className: "povio-canvas-unresolved",
+												children: "Canvas pages must use the same origin."
+											}) : !startup.admitted.has(startupKeys.get(node_5.id) ?? "") ? /* @__PURE__ */ jsx("div", {
+												className: "povio-canvas-unresolved",
+												role: "status",
+												children: "Waiting to load page…"
+											}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+												/* @__PURE__ */ jsx(PageFrame, {
+													id: node_5.id,
+													interact,
+													inspect: inspectMode,
+													src: source,
+													width: bp.width,
+													height: node_5.height,
+													name: `${canvasProtocol}:${JSON.stringify({
+														id: node_5.id,
+														token,
+														viewportHeight: bp.height
+													})}`,
+													onLoad,
+													register
+												}, `${documentGeneration}:${bp.id}:${source}:${reload[node_5.id] ?? 0}`),
+												!interact && /* @__PURE__ */ jsx("button", {
+													type: "button",
+													className: "povio-canvas-frame-cover",
+													tabIndex: 0,
+													"aria-label": `Select ${node_5.title}`,
+													onKeyDown: (event_10) => {
+														if (event_10.key === "Enter" || event_10.key === " ") {
+															event_10.preventDefault();
+															setSelected(node_5.id);
+														}
+													},
+													onPointerMove: (event_11) => {
+														const frame_4 = frames.current.get(node_5.id);
+														if (frame_4) inspector.hover(node_5.id, frame_4, event_11.clientX, event_11.clientY);
+													},
+													onPointerDown: (event_12) => {
+														setSelected(node_5.id);
+														if (inspectMode) {
+															const frame_5 = frames.current.get(node_5.id);
+															if (frame_5) inspector.select(node_5.id, frame_5, event_12.clientX, event_12.clientY);
+														}
+													},
+													onClick: () => setSelected(node_5.id)
+												}),
+												inspectMode && inspector.selection?.pageId === node_5.id && inspector.measurement && /* @__PURE__ */ jsx(CanvasInspectionOverlay, {
+													measurement: inspector.measurement,
+													width: node_5.width
+												})
+											] }),
+											(redirected || state.warning || state.timedOut) && /* @__PURE__ */ jsxs("div", {
+												className: "povio-canvas-page-note",
+												children: [
+													redirected ? `Rendered ${state.href} (route redirected). ` : "",
+													state.warning,
+													state.timedOut && !state.ready && startup.admitted.has(startupKeys.get(node_5.id) ?? "") ? " Frame bridge has not connected. Check access or page errors." : ""
+												]
+											})
+										]
+									}, node_5.id);
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-tool-dock",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "povio-canvas-mode-switch",
+										role: "group",
+										"aria-label": "Canvas mode",
+										children: [
+											/* @__PURE__ */ jsxs("button", {
+												"aria-label": "Inspect layouts",
+												title: "Inspect layouts",
+												"aria-pressed": inspectMode,
+												onClick: () => {
+													setInteract(false);
+													setInspectMode(true);
+												},
+												children: [/* @__PURE__ */ jsx(ScanLine, { size: 18 }), /* @__PURE__ */ jsx("span", { children: "Inspect" })]
+											}),
+											/* @__PURE__ */ jsxs("button", {
+												"aria-label": "Pan",
+												title: "Pan",
+												"aria-pressed": !inspectMode && !interact,
+												onClick: () => {
+													setInspectMode(false);
+													setInteract(false);
+												},
+												children: [/* @__PURE__ */ jsx(Hand, { size: 18 }), /* @__PURE__ */ jsx("span", { children: "Pan" })]
+											}),
+											/* @__PURE__ */ jsxs("button", {
+												"aria-label": "Interact",
+												title: "Interact with pages",
+												"aria-pressed": interact,
+												onClick: () => {
+													setInspectMode(false);
+													setInteract(true);
+												},
+												children: [/* @__PURE__ */ jsx(MousePointer2, { size: 18 }), /* @__PURE__ */ jsx("span", { children: "Interact" })]
+											})
+										]
+									}),
+									/* @__PURE__ */ jsx("span", { className: "povio-canvas-dock-divider" }),
+									/* @__PURE__ */ jsxs("button", {
+										"aria-label": "Auto layout",
+										onClick: () => setManifest((m_1) => ({
+											...m_1,
+											positions: {
+												...m_1.positions,
+												[bp.id]: {}
+											}
+										})),
+										children: [/* @__PURE__ */ jsx(PanelsTopLeft, { size: 17 }), /* @__PURE__ */ jsx("span", { children: "Auto layout" })]
+									})
+								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-camera",
+								children: [
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-configure",
+										"aria-label": "Configure UI",
+										title: "Configure UI",
+										onClick: configuration.openFloating,
+										children: /* @__PURE__ */ jsx(Settings2, { size: 16 })
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-theme-toggle",
+										onClick: () => setDark(!dark),
+										"aria-pressed": dark,
+										"aria-label": dark ? "Dark" : "Light",
+										title: "Toggle page theme",
+										children: dark ? /* @__PURE__ */ jsx(Moon, { size: 16 }) : /* @__PURE__ */ jsx(Sun, { size: 16 })
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "povio-canvas-breakpoint",
+										children: [/* @__PURE__ */ jsx(Monitor, { size: 15 }), /* @__PURE__ */ jsx("select", {
+											"aria-label": "Canvas breakpoint",
+											value: bp.id,
+											onChange: (e) => {
+												if (e.target.value === bp.id) return;
+												setRuntime({});
+												setManifest((m_2) => ({
+													...m_2,
+													breakpoint: e.target.value
+												}));
+											},
+											children: breakpoints.map((item_1) => /* @__PURE__ */ jsxs("option", {
+												value: item_1.id,
+												children: [
+													item_1.label,
+													" · ",
+													item_1.width,
+													"px"
+												]
+											}, item_1.id))
+										})]
+									}),
+									/* @__PURE__ */ jsx("span", { className: "povio-canvas-dock-divider" }),
+									/* @__PURE__ */ jsx("button", {
+										onClick: () => stepZoom(-1),
+										"aria-label": "Zoom out",
+										children: "−"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "povio-canvas-zoom-reset",
+										"aria-label": "Zoom to 100%",
+										title: "Zoom to 100%",
+										onClick: () => zoomTo(1),
+										children: /* @__PURE__ */ jsx("output", {
+											ref: zoomOutput,
+											children: "25%"
+										})
+									}),
+									/* @__PURE__ */ jsx("button", {
+										onClick: () => stepZoom(1),
+										"aria-label": "Zoom in",
+										children: "+"
+									}),
+									/* @__PURE__ */ jsx("button", {
+										onClick: fit,
+										children: "Fit all"
+									})
+								]
+							})
+						]
+					}),
+					inspectMode && /* @__PURE__ */ jsx(CanvasInspectorPanel, {
+						inspector,
+						onClose: () => setInspectMode(false),
+						onSelectToken: configuration.revealToken
+					})
+				]
+			}),
+			notice && /* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-notice",
+				role: "status",
+				children: [notice, /* @__PURE__ */ jsx("button", {
+					onClick: () => setNotice(""),
+					children: "Dismiss"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/app-canvas/document-frame.ts
+/** Adapt a same-origin document to an uncropped, full-page canvas artboard. */
+function startCanvasDocument(doc, options) {
+	const win = doc.defaultView;
+	if (!win) throw new Error("Canvas document must belong to a window.");
+	const viewportHeight = Math.max(1, options.viewportHeight);
+	let interact = options.interact ?? false;
+	let destroyed = false;
+	let frame = 0;
+	let lastHeight = 0;
+	let lastLinks = "";
+	const originals = /* @__PURE__ */ new Map();
+	const mediaOriginals = /* @__PURE__ */ new Map();
+	const liveStyles = /* @__PURE__ */ new Set();
+	const liveMedia = /* @__PURE__ */ new Set();
+	const warnedSheets = /* @__PURE__ */ new WeakSet();
+	const positioned = /* @__PURE__ */ new WeakSet();
+	const set = (style, property, value, priority = "important") => {
+		liveStyles.add(style);
+		if (style.getPropertyValue(property) === value && style.getPropertyPriority(property) === priority) return;
+		let saved = originals.get(style);
+		if (!saved) {
+			saved = /* @__PURE__ */ new Map();
+			originals.set(style, saved);
+		}
+		if (!saved.has(property)) saved.set(property, [style.getPropertyValue(property), style.getPropertyPriority(property)]);
+		style.setProperty(property, value, priority);
+	};
+	const freezeUnits = (style) => {
+		liveStyles.add(style);
+		for (const property of Array.from(style)) {
+			const value = style.getPropertyValue(property);
+			const frozen = value.replace(/(-?(?:\d*\.)?\d+)(?:dvh|svh|lvh|vh)\b/gi, (_, amount) => `${Number(amount) * viewportHeight / 100}px`);
+			if (value !== frozen) set(style, property, frozen, style.getPropertyPriority(property));
+		}
+	};
+	const freezeMedia = (media) => {
+		liveMedia.add(media);
+		if (mediaOriginals.has(media)) return;
+		const original = media.mediaText;
+		const frozen = original.replace(/\([^()]*\b(?:height|orientation|aspect-ratio)\b[^()]*\)/gi, (predicate) => win.matchMedia(predicate).matches ? "(min-width: 0px)" : "(max-width: -1px)");
+		if (frozen !== original) {
+			mediaOriginals.set(media, original);
+			media.mediaText = frozen;
+		}
+	};
+	const visitRules = (rules) => {
+		for (const rule of Array.from(rules)) {
+			if ("style" in rule) freezeUnits(rule.style);
+			if ("media" in rule) freezeMedia(rule.media);
+			if ("cssRules" in rule) visitRules(rule.cssRules);
+			if ("styleSheet" in rule && rule.styleSheet) visitSheet(rule.styleSheet);
+		}
+	};
+	const visitSheet = (sheet) => {
+		try {
+			freezeMedia(sheet.media);
+			visitRules(sheet.cssRules);
+		} catch {
+			if (!warnedSheets.has(sheet)) {
+				warnedSheets.add(sheet);
+				const message = `App canvas cannot normalize inaccessible stylesheet ${sheet.href ?? "(inline)"}. Serve its CSS from the app origin for accurate full-page dimensions.`;
+				if (options.onWarning) options.onWarning(message);
+				else win.console.warn(message);
+			}
+		}
+	};
+	const anchorURL = (anchor) => {
+		try {
+			const url = new URL(anchor.getAttribute("href") ?? "", doc.baseURI);
+			return /^https?:$/.test(url.protocol) && url.origin === new URL(doc.baseURI).origin ? url.href : null;
+		} catch {
+			return null;
+		}
+	};
+	const refresh = () => {
+		if (destroyed) return;
+		if (frame) {
+			win.cancelAnimationFrame(frame);
+			frame = 0;
+		}
+		observer.disconnect();
+		liveStyles.clear();
+		liveMedia.clear();
+		for (const sheet of [...Array.from(doc.styleSheets), ...Array.from(doc.adoptedStyleSheets ?? [])]) visitSheet(sheet);
+		const elements = Array.from(doc.querySelectorAll("*")).filter((el) => "style" in el);
+		for (const el of elements) freezeUnits(el.style);
+		const snapshots = elements.map((el) => ({
+			el,
+			css: win.getComputedStyle(el),
+			rect: el.getBoundingClientRect()
+		}));
+		for (const { el, css, rect } of snapshots) {
+			if (!positioned.has(el) && (css.position === "fixed" || css.position === "sticky")) {
+				positioned.add(el);
+				if (css.position === "sticky") set(el.style, "position", "static");
+				else {
+					set(el.style, "position", "absolute");
+					const containingBlock = el.offsetParent;
+					const parentRect = containingBlock?.getBoundingClientRect();
+					const parentTop = containingBlock && containingBlock !== doc.body && containingBlock !== doc.documentElement ? (parentRect?.top ?? 0) + containingBlock.clientTop - containingBlock.scrollTop : -win.scrollY;
+					const parentLeft = containingBlock && containingBlock !== doc.body && containingBlock !== doc.documentElement ? (parentRect?.left ?? 0) + containingBlock.clientLeft - containingBlock.scrollLeft : -win.scrollX;
+					set(el.style, "top", `${rect.top - parentTop}px`);
+					set(el.style, "left", `${rect.left - parentLeft}px`);
+					set(el.style, "right", "auto");
+					set(el.style, "bottom", "auto");
+					set(el.style, "width", `${rect.width}px`);
+					set(el.style, "height", `${rect.height}px`);
+				}
+			}
+			if (/^(auto|scroll)$/.test(css.overflowY) && el.scrollHeight > el.clientHeight) {
+				let ancestor = el;
+				while (ancestor && ancestor !== doc.documentElement) {
+					set(ancestor.style, "height", "auto");
+					set(ancestor.style, "max-height", "none");
+					set(ancestor.style, "overflow-y", "visible");
+					set(ancestor.style, "flex-shrink", "0");
+					ancestor = ancestor.parentElement;
+				}
+			}
+		}
+		set(doc.documentElement.style, "height", "auto");
+		set(doc.documentElement.style, "min-height", "0px");
+		set(doc.documentElement.style, "overflow-y", "hidden");
+		if (doc.body) {
+			set(doc.body.style, "height", "auto");
+			set(doc.body.style, "min-height", "0px");
+		}
+		let bottom = 0;
+		for (const el of elements) {
+			if (el === doc.documentElement || el === doc.body || !el.getClientRects().length) continue;
+			bottom = Math.max(bottom, el.getBoundingClientRect().bottom + win.scrollY);
+		}
+		if (doc.body) bottom = Math.max(bottom, doc.body.getBoundingClientRect().bottom + win.scrollY);
+		const height = Math.max(viewportHeight, Math.ceil(bottom));
+		if (height !== lastHeight) {
+			lastHeight = height;
+			options.onHeight(height);
+		}
+		if (options.onLinks) {
+			const links = Array.from(doc.querySelectorAll("a[href]")).flatMap((anchor) => {
+				const href = anchorURL(anchor);
+				return href ? [{
+					href,
+					label: anchor.textContent?.trim() || anchor.getAttribute("aria-label") || href
+				}] : [];
+			});
+			const signature = JSON.stringify(links);
+			if (signature !== lastLinks) {
+				lastLinks = signature;
+				options.onLinks(links);
+			}
+		}
+		for (const style of originals.keys()) if (!liveStyles.has(style)) originals.delete(style);
+		for (const media of mediaOriginals.keys()) if (!liveMedia.has(media)) mediaOriginals.delete(media);
+		liveStyles.clear();
+		liveMedia.clear();
+		observer.observe(doc.documentElement, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true
+		});
+	};
+	const schedule = () => {
+		if (!destroyed && !frame) frame = win.requestAnimationFrame(refresh);
+	};
+	const observer = new win.MutationObserver(schedule);
+	const resize = new win.ResizeObserver(schedule);
+	resize.observe(doc.documentElement);
+	if (doc.body) resize.observe(doc.body);
+	const click = (event) => {
+		const anchor = event.target?.closest?.("a[href]");
+		if (interact && !anchor) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		if (anchor) {
+			const href = anchorURL(anchor);
+			if (href) options.onNavigate(href);
+		}
+	};
+	const submit = (event) => {
+		if (!interact) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	};
+	win.addEventListener("click", click, true);
+	win.addEventListener("submit", submit, true);
+	win.addEventListener("resize", schedule);
+	doc.addEventListener("load", schedule, true);
+	doc.fonts?.ready.then(schedule);
+	refresh();
+	return {
+		refresh,
+		setInteract(value) {
+			interact = value;
+		},
+		destroy() {
+			destroyed = true;
+			if (frame) win.cancelAnimationFrame(frame);
+			observer.disconnect();
+			resize.disconnect();
+			win.removeEventListener("click", click, true);
+			win.removeEventListener("submit", submit, true);
+			win.removeEventListener("resize", schedule);
+			doc.removeEventListener("load", schedule, true);
+			for (const [media, value] of mediaOriginals) media.mediaText = value;
+			for (const [style, values] of originals) for (const [property, [value, priority]] of values) if (value) style.setProperty(property, value, priority);
+			else style.removeProperty(property);
+		}
+	};
+}
+//#endregion
+//#region src/app-canvas/AppCanvasFrameBridge.tsx
+/** Mount once inside the application's existing UIConfigurationProvider. No separate app copy or theme fork. */
+function AppCanvasFrameBridge({ href }) {
+	const { setPreviewConfiguration } = useUIConfiguration();
+	const [identity] = useState(canvasFrameIdentity);
+	const currentHref = useRef(href);
+	currentHref.current = href;
+	useEffect(() => {
+		if (!identity) return;
+		const send = (data) => window.parent.postMessage({
+			protocol: canvasProtocol,
+			...identity,
+			...data
+		}, window.location.origin);
+		const renderer = startCanvasDocument(document, {
+			viewportHeight: identity.viewportHeight,
+			onHeight: (height) => send({
+				type: "height",
+				height
+			}),
+			onNavigate: (url) => send({
+				type: "navigate",
+				href: url
+			}),
+			onWarning: (warning) => send({
+				type: "warning",
+				warning
+			})
+		});
+		let ackFrame = 0;
+		const receive = (event) => {
+			const packet = event.data;
+			if (event.source !== window.parent || event.origin !== window.location.origin || packet?.protocol !== "povio-app-canvas-v1" || packet.token !== identity.token || packet.id !== identity.id) return;
+			if (packet.type === "mode") renderer.setInteract(!!packet.interact);
+			if (packet.type === "configuration" && validConfiguration(packet.configuration)) {
+				setPreviewConfiguration(packet.configuration);
+				document.documentElement.classList.toggle("dark", !!packet.dark);
+				cancelAnimationFrame(ackFrame);
+				ackFrame = requestAnimationFrame(() => {
+					send({
+						type: "ack",
+						revision: packet.revision
+					});
+				});
+			}
+		};
+		window.addEventListener("message", receive);
+		send({
+			type: "ready",
+			href: currentHref.current ?? window.location.href
+		});
+		return () => {
+			cancelAnimationFrame(ackFrame);
+			window.removeEventListener("message", receive);
+			renderer.destroy();
+			setPreviewConfiguration(null);
+		};
+	}, [identity, setPreviewConfiguration]);
+	useEffect(() => {
+		if (identity && href) window.parent.postMessage({
+			protocol: canvasProtocol,
+			...identity,
+			type: "ready",
+			href
+		}, window.location.origin);
+	}, [href, identity]);
+	return null;
+}
+//#endregion
+//#region src/app-canvas/AppCanvasPage.tsx
+const APP_CANVAS_PATH = "/_canvas";
+/** Must match `componentsFrameParam`; kept inline so the canvas page does not load the gallery eagerly. */
+const componentsParam = "povio-components";
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-C0Sf9RcC.js"));
+/** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
+function AppCanvasPage(t0) {
+	const $ = c(21);
+	let excludePaths;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({canvasPath: t1, excludePaths, ...props} = t0);
+		$[0] = t0;
+		$[1] = excludePaths;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		excludePaths = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const canvasPath = t1 === void 0 ? APP_CANVAS_PATH : t1;
+	let t2;
+	if ($[4] !== excludePaths) {
+		t2 = excludePaths ?? [];
+		$[4] = excludePaths;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== canvasPath || $[7] !== t2) {
+		t3 = /* @__PURE__ */ new Set([...t2, canvasPath]);
+		$[6] = canvasPath;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = [...t3];
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	const exclusions = t4;
+	if (isAppCanvasFrame()) {
+		let t5;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			const group = new URLSearchParams(window.location.search).get(componentsParam);
+			t5 = group ? /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { group })
+			}) : null;
+			$[11] = t5;
+		} else t5 = $[11];
+		return t5;
+	}
+	let t5;
+	if ($[12] !== canvasPath) {
+		t5 = (group_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(group_0)}`;
+		$[12] = canvasPath;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== exclusions || $[15] !== props || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(AppCanvas, {
+			...props,
+			excludePaths: exclusions,
+			componentsHref: t5
+		});
+		$[14] = exclusions;
+		$[15] = props;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(UIConfigurationModal, {});
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t6) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "povio-app-canvas-page",
+			"aria-label": "App canvas page",
+			children: [t6, t7]
+		});
+		$[19] = t6;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+//#endregion
+export { defaultCanvasBreakpoints as a, layoutCanvasPages as c, AppCanvas as i, AppCanvasPage as n, isAppCanvasFrame as o, AppCanvasFrameBridge as r, discoverCanvasPages as s, APP_CANVAS_PATH as t };