foss-design 0.9.8 → 0.9.10

package/dist/viewer-lib/index.js

@@ -2329,19 +2329,36 @@ var staticSource = {
 		return text;
 	}
 };
-/** `url` against a unit's base; an empty base leaves it as the doc has it. */
+/**
+* `url` against a unit's base, or '' when it may not be loaded. Docs come from builds anyone who
+* can push has written, so a URL is only kept when it is http(s) and, for a unit build, inside
+* that unit's base: a `javascript:` frame source would run with the viewer's own origin.
+*/
 function resolveUrl(url, base) {
-	if (!base) return url;
 	try {
-		const root = new URL(base.endsWith("/") ? base : `${base}/`, document.baseURI);
-		return new URL(url, root).href;
+		const page = typeof document === "undefined" ? "http://localhost/" : document.baseURI;
+		if (!base) {
+			const own = new URL(url, page);
+			return own.protocol === "http:" || own.protocol === "https:" ? url : "";
+		}
+		const root = new URL(base.endsWith("/") ? base : `${base}/`, page);
+		const resolved = new URL(url, root);
+		return resolved.origin === root.origin && resolved.href.startsWith(root.href) ? resolved.href : "";
+	} catch {
+		return "";
+	}
+}
+/** An external page for a `url` item: http or https only. */
+function externalUrl(url) {
+	try {
+		const parsed = new URL(url);
+		return parsed.protocol === "http:" || parsed.protocol === "https:" ? parsed.href : "";
 	} catch {
-		return url;
+		return "";
 	}
 }
-/** A canvas with its frame, snapshot and image URLs resolved against its unit's base. */
+/** A canvas with its frame, snapshot and image URLs resolved against its unit's base, unsafe ones dropped. */
 function resolveCanvas(doc, base) {
-	if (!base) return doc;
 	const at = (url) => resolveUrl(url, base);
 	return {
 		...doc,
@@ -2351,10 +2368,12 @@ function resolveCanvas(doc, base) {
 				...section,
 				items: section.items.map((item) => {
 					if (item.kind === "screen") {
-						const each = (set) => set ? Object.fromEntries(Object.entries(set).map(([theme, url]) => [theme, url && at(url)])) : void 0;
+						const each = (set) => set ? Object.fromEntries(Object.entries(set).map(([theme, url]) => [theme, url && at(url)]).filter(([, url]) => url)) : void 0;
+						const url = at(item.url);
 						return {
 							...item,
-							url: at(item.url),
+							url,
+							missing: item.missing || !url,
 							snapshots: each(item.snapshots),
 							thumbs: each(item.thumbs)
 						};
@@ -2363,6 +2382,10 @@ function resolveCanvas(doc, base) {
 						...item,
 						url: at(item.url)
 					};
+					if (item.kind === "url") return {
+						...item,
+						url: externalUrl(item.url)
+					};
 					return item;
 				})
 			}))
@@ -2371,7 +2394,6 @@ function resolveCanvas(doc, base) {
 }
 /** A design system with its specimen and asset URLs resolved against the system unit's base. */
 function resolveSystem(doc, base) {
-	if (!base) return doc;
 	const at = (url) => resolveUrl(url, base);
 	return {
 		...doc,
@@ -7794,1926 +7816,52 @@ function linkPath(href, base = "/") {
 	return url.pathname + url.search + url.hash;
 }
 //#endregion
-//#region viewer/src/lib/frames.ts
-/** Routes runtime messages to whoever listens to the frame that sent them. */
-var handlers = /* @__PURE__ */ new Map();
-window.addEventListener("message", (event) => {
-	const data = event.data;
-	if (data?.source !== "design-runtime" || !event.source) return;
-	for (const handler of handlers.get(event.source) ?? []) handler(data);
-});
-function listenToFrame(frame, handler) {
-	let win = null;
-	const detach = () => {
-		if (!win) return;
-		const set = handlers.get(win);
-		set?.delete(handler);
-		if (!set?.size) handlers.delete(win);
-		win = null;
-	};
-	const attach = () => {
-		detach();
-		win = frame.contentWindow;
-		if (!win) return;
-		const set = handlers.get(win) ?? /* @__PURE__ */ new Set();
-		set.add(handler);
-		handlers.set(win, set);
-	};
-	attach();
-	frame.addEventListener("load", attach);
-	return () => {
-		frame.removeEventListener("load", attach);
-		detach();
-	};
-}
-function sendToFrame(frame, message) {
-	frame?.contentWindow?.postMessage({
-		source: "design-viewer",
-		...message
-	}, "*");
-}
-/** Tell a frame it sits on the canvas, so it hands the wheel to the viewer. */
-function claimWheel(frame) {
-	sendToFrame(frame, { type: "canvas" });
-}
+//#region ../../node_modules/.pnpm/marked@18.0.14/node_modules/marked/lib/marked.esm.js
 /**
-* A wheel the frame had no use for (it reached its edge, or holds nothing that scrolls): scroll
-* whatever scrolls around the frame, as the browser would if the frame's edges passed it on.
+* marked v18.0.14 - a markdown parser
+* Copyright (c) 2018-2026, MarkedJS. (MIT License)
+* Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
+* https://github.com/markedjs/marked
 */
-function scrollAround(frame, delta) {
-	for (let node = frame.parentElement; node; node = node.parentElement) {
-		const style = getComputedStyle(node);
-		const scrolls = (overflow) => /(auto|scroll|overlay)/.test(overflow);
-		const y = scrolls(style.overflowY) && node.scrollHeight > node.clientHeight;
-		const x = scrolls(style.overflowX) && node.scrollWidth > node.clientWidth;
-		if (y || x) {
-			node.scrollBy({
-				left: x ? delta.deltaX : 0,
-				top: y ? delta.deltaY : 0,
-				behavior: "instant"
-			});
-			return;
-		}
-	}
-	window.scrollBy({
-		left: delta.deltaX,
-		top: delta.deltaY,
-		behavior: "instant"
-	});
-}
-function sendTheme(frame, theme) {
-	sendToFrame(frame, {
-		type: "theme",
-		theme
-	});
-}
-/** Load the frame again; works whatever origin it is on. */
-function reloadFrame(frame) {
-	if (!frame) return;
-	frame.src = frame.src;
-}
 /**
-* Where the dev server's frames load from. Browsers give each site its own
-* process, so frames served from the viewer's twin host (localhost ↔ 127.0.0.1,
-* both reach the same server) run their scripts and animations off the viewer's
-* thread: a canvas full of live screens still pans smoothly. Any other host,
-* and static builds, keep frames on the viewer's origin.
+* DO NOT EDIT THIS FILE
+* The code in this file is generated from files in ./src/
 */
-var FRAME_ORIGIN = (() => {
-	if (STATIC_SITE) return "";
-	const { protocol, hostname, port } = window.location;
-	const twin = hostname === "localhost" ? "127.0.0.1" : hostname === "127.0.0.1" ? "localhost" : null;
-	return twin ? `${protocol}//${twin}${port ? `:${port}` : ""}` : "";
-})();
-/** A frame URL with the theme it should open in. */
-function frameSrc(url, theme, extra) {
-	const [path = "", query = ""] = url.split("?");
-	const params = new URLSearchParams(query);
-	params.set("theme", theme);
-	for (const [key, value] of Object.entries(extra ?? {})) params.set(key, value);
-	return `${path.startsWith("/") ? FRAME_ORIGIN : ""}${path}?${params.toString()}`;
-}
-/** Absolute URL for opening a frame in a new tab. */
-function absoluteUrl(url) {
-	return new URL(url, document.baseURI).toString();
+function I() {
+	return {
+		async: !1,
+		breaks: !1,
+		extensions: null,
+		gfm: !0,
+		hooks: null,
+		pedantic: !1,
+		renderer: null,
+		silent: !1,
+		tokenizer: null,
+		walkTokens: null
+	};
 }
-/**
-* A link, form or history push the runtime kept from leaving its frame. The path goes to the
-* screen whose `route` matches it best (a relative `href` resolves against the route of the
-* screen it is in); without routes, a path whose last part names a screen still opens it. A
-* link to another site opens in a new tab. A push nobody's route matches belongs to the
-* screen's own router; a link or form that leads nowhere stays put with a note.
-*/
-function followLink(message, canvas, go, from) {
-	if (message.form) {
-		toast("Forms are not sent from a screen", void 0, "info");
-		return;
-	}
-	if (message.path === null) {
-		const tab = window.open(message.href, "_blank");
-		if (tab) tab.opener = null;
-		else toast("Link to another site", message.href, "info");
-		return;
-	}
-	const frames = canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url")));
-	const here = frames.find((item) => item.id === from);
-	const path = message.raw === void 0 ? message.path : linkPath(message.raw, here?.routes?.[0]);
-	if (path === null) return;
-	const routed = matchRoute(frames.map((item) => ({
-		routes: (item.routes ?? []).map(compileRoute),
-		value: item.id
-	})), path);
-	if (routed) {
-		if (routed !== from) go(routed);
-		return;
-	}
-	const bare = path.split(/[?#]/)[0].replace(/\/+$/, "");
-	let name = bare.slice(bare.lastIndexOf("/") + 1).replace(/\.html?$/, "");
-	try {
-		name = decodeURIComponent(name);
-	} catch {}
-	if (name && name !== from && frames.some((item) => item.id === name)) go(name);
-	else if (!message.pushed) toast("No screen for this link", path, "info");
+var y = I();
+function W(l) {
+	y = l;
 }
-//#endregion
-//#region viewer/src/components/inspector.tsx
-/**
-* Inspect frames: while `enabled`, every frame in `frames` highlights on hover
-* and picks on click. The inspecting runs inside each frame (see the runtime's
-* inspect.ts); this side only switches it and shows what the frames report.
-* The pick outlives `enabled` (so a quick ⌘-hold leaves the panel open) until
-* it is cleared.
-*/
-function useInspection(frames, enabled, options) {
-	const project = useProject().data;
-	const tokens = useSystem(!!project?.system).data?.tokens;
-	const [selected, setSelected] = useState(null);
-	const state = useRef({
-		enabled,
-		tokens
-	});
-	state.current = {
-		enabled,
-		tokens
+var A = { exec: () => null };
+function C(l) {
+	let e = [];
+	return (t) => {
+		let n = Math.max(0, Math.min(3, t - 1)), s = e[n];
+		return s || (s = l(n), e[n] = s), s;
 	};
-	const onEscape = useRef(options.onEscape);
-	onEscape.current = options.onEscape;
-	const framesRef = useRef(frames);
-	framesRef.current = frames;
-	const told = useRef(/* @__PURE__ */ new Map());
-	const tell = (frame, force = false) => {
-		const { enabled: on, tokens: list } = state.current;
-		const last = told.current.get(frame);
-		if (!force && last?.on === on && last.tokens === list) return;
-		told.current.set(frame, {
-			on,
-			tokens: list
-		});
-		sendToFrame(frame, {
-			type: "inspect",
-			on,
-			tokens: on ? list ?? [] : void 0
-		});
+}
+function h(l, e = "") {
+	let t = typeof l == "string" ? l : l.source, n = {
+		replace: (s, r) => {
+			let o = typeof r == "string" ? r : r.source;
+			return o = o.replace(x.caret, "$1"), t = t.replace(s, o), n;
+		},
+		getRegex: () => new RegExp(t, e)
 	};
-	useEffect(() => {
-		for (const frame of frames) tell(frame);
-		for (const frame of told.current.keys()) if (!frames.includes(frame)) told.current.delete(frame);
-	}, [
-		frames,
-		enabled,
-		tokens
-	]);
-	useEffect(() => {
-		const offs = frames.map((frame) => listenToFrame(frame, (message) => {
-			if (message.type === "ready") {
-				if (state.current.enabled) tell(frame, true);
-				else told.current.set(frame, { on: false });
-			} else if (message.type === "inspect") {
-				if (message.info) {
-					for (const other of framesRef.current) if (other !== frame) sendToFrame(other, {
-						type: "inspect-select",
-						ref: null
-					});
-					setSelected({
-						info: message.info,
-						frame
-					});
-				} else setSelected((current) => current?.frame === frame ? null : current);
-			} else if (message.type === "inspect-escape") onEscape.current();
-		}));
-		return () => {
-			for (const off of offs) off();
-		};
-	}, [frames]);
-	const frame = selected && frames.includes(selected.frame) ? selected.frame : null;
-	return {
-		info: frame ? selected.info : null,
-		frame,
-		/** Pick another element in the same frame by its ref, or clear the pick. */
-		select(ref) {
-			if (ref === null) {
-				for (const each of framesRef.current) sendToFrame(each, {
-					type: "inspect-select",
-					ref: null
-				});
-				setSelected(null);
-			} else if (selected) sendToFrame(selected.frame, {
-				type: "inspect-select",
-				ref
-			});
-		}
-	};
-}
-/**
-* True while ⌘ or Ctrl is held on its own, in the viewer or inside any of
-* `frames`. A modifier used for a shortcut (⌘K, ⌘C) does not count.
-*/
-function useModifierHold(frames) {
-	const [held, setHeld] = useState(false);
-	useEffect(() => {
-		const isModifier = (key) => key === "Meta" || key === "Control";
-		let down = false;
-		let combo = false;
-		let timer;
-		const release = () => {
-			down = false;
-			clearTimeout(timer);
-			setHeld(false);
-		};
-		const press = (key) => {
-			if (isModifier(key)) {
-				if (down) return;
-				down = true;
-				combo = false;
-				timer = setTimeout(() => {
-					if (down && !combo) setHeld(true);
-				}, 150);
-			} else if (down) {
-				combo = true;
-				clearTimeout(timer);
-				setHeld(false);
-			}
-		};
-		const onDown = (event) => press(event.key);
-		const onUp = (event) => {
-			if (isModifier(event.key)) release();
-		};
-		window.addEventListener("keydown", onDown, true);
-		window.addEventListener("keyup", onUp, true);
-		window.addEventListener("blur", release);
-		const offs = frames.map((frame) => listenToFrame(frame, (message) => {
-			if (message.type === "key") {
-				if (message.down) press(message.name);
-				else if (isModifier(message.name)) release();
-			} else if (message.type === "blur") release();
-		}));
-		return () => {
-			window.removeEventListener("keydown", onDown, true);
-			window.removeEventListener("keyup", onUp, true);
-			window.removeEventListener("blur", release);
-			for (const off of offs) off();
-			clearTimeout(timer);
-		};
-	}, [frames]);
-	return held;
-}
-function Section({ title, children, right }) {
-	return /* @__PURE__ */ jsxs("section", {
-		className: "border-t border-rule pb-2 first:border-t-0",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-9 items-center justify-between px-4 text-[12px] font-medium text-muted",
-			children: [title, right]
-		}), children]
-	});
-}
-function Line({ label, children }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "grid min-h-7 grid-cols-[92px_minmax(0,1fr)] items-center gap-x-3 px-4 py-0.5 text-[12.5px]",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-muted",
-			children: label
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 items-center gap-1.5 text-ink",
-			children
-		})]
-	});
-}
-function TokenChip({ name }) {
-	if (!name) return null;
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => void copyText(`var(${name})`, "Token copied"),
-		title: "Copy var()",
-		className: "shrink-0 cursor-pointer truncate rounded-[4px] border-0 bg-action-soft px-1.5 py-px font-mono text-[11px] text-action",
-		children: name
-	});
-}
-function Value$1({ children, title }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: "min-w-0 truncate font-mono text-[12px]",
-		title,
-		children
-	});
-}
-function ColorLine({ label, color }) {
-	return /* @__PURE__ */ jsxs(Line, {
-		label,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "size-3.5 shrink-0 rounded-[3px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
-				style: { background: color.css }
-			}),
-			/* @__PURE__ */ jsx(Value$1, {
-				title: color.css,
-				children: color.value
-			}),
-			/* @__PURE__ */ jsx(TokenChip, { name: color.token })
-		]
-	});
-}
-var dash = (value) => value ? String(value) : "–";
-function Layer({ label, values, className, children }) {
-	const [top, right, bottom, left] = values;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative grid grid-cols-[28px_minmax(0,1fr)_28px] grid-rows-[20px_auto_20px] rounded-[4px]", className),
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "absolute top-1 left-1.5 text-[9.5px] tracking-wide text-muted uppercase",
-				children: label
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "col-start-2 self-center text-center",
-				children: dash(top)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "row-start-2 self-center text-center",
-				children: dash(left)
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "row-start-2 col-start-2",
-				children
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "row-start-2 col-start-3 self-center text-center",
-				children: dash(right)
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "row-start-3 col-start-2 self-center text-center",
-				children: dash(bottom)
-			})
-		]
-	});
-}
-function BoxModel({ info }) {
-	const content = {
-		w: Math.max(0, info.rect.w - info.border[1] - info.border[3] - info.padding[1] - info.padding[3]),
-		h: Math.max(0, info.rect.h - info.border[0] - info.border[2] - info.padding[0] - info.padding[2])
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: "px-4 pt-1 pb-2 font-mono text-[11px] text-ink2",
-		children: /* @__PURE__ */ jsx(Layer, {
-			label: "margin",
-			values: info.margin,
-			className: "border border-dashed border-rule-strong bg-[#f6b26b]/15",
-			children: /* @__PURE__ */ jsx(Layer, {
-				label: "border",
-				values: info.border,
-				className: "border border-rule-strong bg-[#f9e27d]/15",
-				children: /* @__PURE__ */ jsx(Layer, {
-					label: "padding",
-					values: info.padding,
-					className: "border border-rule-strong bg-[#93c47d]/20",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex h-8 items-center justify-center rounded-[3px] border border-rule-strong bg-[#6fa8dc]/25 text-ink",
-						children: [
-							Math.round(content.w * 100) / 100,
-							" × ",
-							Math.round(content.h * 100) / 100
-						]
-					})
-				})
-			})
-		})
-	});
-}
-function Crumbs({ info, onSelect }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-center gap-1 px-4 pb-2",
-		children: [info.path.slice(-4).map((crumb, index) => /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-1",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => onSelect(crumb.ref),
-				className: "cursor-pointer rounded-[4px] border-0 bg-soft2 px-1.5 py-0.5 font-mono text-[11px] text-ink2 hover:text-ink",
-				children: crumb.label
-			}), /* @__PURE__ */ jsx(Icon, {
-				name: "chevron-right",
-				size: 11,
-				className: "text-muted"
-			})]
-		}, index)), /* @__PURE__ */ jsx("span", {
-			className: "rounded-[4px] bg-action-soft px-1.5 py-0.5 font-mono text-[11px] text-action",
-			children: info.label
-		})]
-	});
-}
-/** The right sidebar: what the selected element is and how it is styled. */
-function InspectorPanel({ info, onSelect, onClose, active }) {
-	return /* @__PURE__ */ jsxs("aside", {
-		"data-ui": true,
-		className: "flex w-[320px] shrink-0 flex-col overflow-hidden border-l border-rule bg-surface",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex h-[46px] shrink-0 items-center justify-between border-b border-rule pr-2 pl-4",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-2 text-[14px] font-semibold",
-					children: [/* @__PURE__ */ jsx(Icon, {
-						name: "pointer",
-						size: 15,
-						className: "text-action"
-					}), " Inspect"]
-				}), /* @__PURE__ */ jsx(IconButton, {
-					icon: "x",
-					label: "Close inspector (I)",
-					onClick: onClose
-				})]
-			}),
-			!info ? /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col items-center gap-2 px-6 py-10 text-center",
-				children: [
-					/* @__PURE__ */ jsx(Icon, {
-						name: "pointer",
-						size: 22,
-						className: "text-muted"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-[13.5px] text-ink2",
-						children: active ? "Click an element in any screen." : `Hold ${MOD_KEY} to highlight, click to inspect.`
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-[12.5px] leading-[1.5] text-muted",
-						children: "Hover shows margin, padding and content. Clicks go to the inspector, not the screen."
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "mt-2 flex items-center gap-1.5 text-[12px] text-muted",
-						children: [
-							/* @__PURE__ */ jsx(Kbd, { children: "I" }),
-							" toggle · hold ",
-							/* @__PURE__ */ jsx(Kbd, { children: MOD_KEY }),
-							" · ",
-							/* @__PURE__ */ jsx(Kbd, { children: "esc" }),
-							" clear"
-						]
-					})
-				]
-			}) : /* @__PURE__ */ jsxs("div", {
-				className: "min-h-0 grow overflow-y-auto",
-				children: [
-					/* @__PURE__ */ jsxs(Section, {
-						title: "Element",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex flex-col gap-1 px-4 pb-2",
-							children: [
-								/* @__PURE__ */ jsx("div", {
-									className: "flex min-w-0 items-baseline gap-1.5",
-									children: info.component?.owners[0] ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
-										className: "truncate font-mono text-[14px] font-medium text-ink",
-										children: [
-											"<",
-											info.component.owners[0],
-											">"
-										]
-									}), /* @__PURE__ */ jsx("span", {
-										className: "truncate font-mono text-[12px] text-muted",
-										children: info.tag
-									})] }) : /* @__PURE__ */ jsx("span", {
-										className: "truncate font-mono text-[14px] font-medium text-ink",
-										children: info.label
-									})
-								}),
-								info.component && info.component.owners.length > 1 ? /* @__PURE__ */ jsxs("span", {
-									className: "truncate text-[12px] text-muted",
-									children: ["in ", info.component.owners.slice(1).join(" ← ")]
-								}) : null,
-								info.component?.file ? /* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: () => void copyText(info.component.file, "Path copied"),
-									className: "w-fit max-w-full cursor-pointer truncate border-0 bg-transparent p-0 text-left font-mono text-[11.5px] text-muted hover:text-ink2",
-									title: "Copy path",
-									children: info.component.file
-								}) : null,
-								info.text ? /* @__PURE__ */ jsxs("span", {
-									className: "line-clamp-2 text-[12.5px] text-ink2",
-									children: [
-										"“",
-										info.text,
-										"”"
-									]
-								}) : null
-							]
-						}), /* @__PURE__ */ jsx(Crumbs, {
-							info,
-							onSelect
-						})]
-					}),
-					/* @__PURE__ */ jsxs(Section, {
-						title: "Box",
-						children: [
-							/* @__PURE__ */ jsx(BoxModel, { info }),
-							/* @__PURE__ */ jsx(Line, {
-								label: "Size",
-								children: /* @__PURE__ */ jsxs(Value$1, { children: [
-									info.rect.w,
-									" × ",
-									info.rect.h
-								] })
-							}),
-							/* @__PURE__ */ jsx(Line, {
-								label: "Position",
-								children: /* @__PURE__ */ jsxs(Value$1, { children: [
-									"x ",
-									info.rect.x,
-									" · y ",
-									info.rect.y
-								] })
-							})
-						]
-					}),
-					info.layout.length ? /* @__PURE__ */ jsx(Section, {
-						title: "Layout",
-						children: info.layout.map(([label, value]) => /* @__PURE__ */ jsx(Line, {
-							label,
-							children: /* @__PURE__ */ jsx(Value$1, {
-								title: value,
-								children: value
-							})
-						}, label))
-					}) : null,
-					info.typography ? /* @__PURE__ */ jsxs(Section, {
-						title: "Typography",
-						children: [
-							/* @__PURE__ */ jsxs(Line, {
-								label: "Font",
-								children: [/* @__PURE__ */ jsx(Value$1, {
-									title: info.typography.family,
-									children: info.typography.family.split(",")[0]?.replace(/["']/g, "")
-								}), /* @__PURE__ */ jsx(TokenChip, { name: info.typography.familyToken })]
-							}),
-							/* @__PURE__ */ jsxs(Line, {
-								label: "Size",
-								children: [/* @__PURE__ */ jsxs(Value$1, { children: [
-									info.typography.size,
-									" / ",
-									info.typography.lineHeight
-								] }), /* @__PURE__ */ jsx(TokenChip, { name: info.typography.sizeToken })]
-							}),
-							/* @__PURE__ */ jsx(Line, {
-								label: "Weight",
-								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.weight })
-							}),
-							info.typography.letterSpacing !== "normal" ? /* @__PURE__ */ jsx(Line, {
-								label: "Tracking",
-								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.letterSpacing })
-							}) : null,
-							/* @__PURE__ */ jsx(ColorLine, {
-								label: "Color",
-								color: info.typography.color
-							}),
-							info.typography.align !== "start" ? /* @__PURE__ */ jsx(Line, {
-								label: "Align",
-								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.align })
-							}) : null,
-							info.typography.transform ? /* @__PURE__ */ jsx(Line, {
-								label: "Transform",
-								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.transform })
-							}) : null
-						]
-					}) : null,
-					Object.values(info.appearance).some(Boolean) ? /* @__PURE__ */ jsxs(Section, {
-						title: "Appearance",
-						children: [
-							info.appearance.background ? /* @__PURE__ */ jsx(ColorLine, {
-								label: "Background",
-								color: info.appearance.background
-							}) : null,
-							info.appearance.backgroundImage ? /* @__PURE__ */ jsx(Line, {
-								label: "Image",
-								children: /* @__PURE__ */ jsx(Value$1, {
-									title: info.appearance.backgroundImage,
-									children: info.appearance.backgroundImage
-								})
-							}) : null,
-							info.appearance.border ? /* @__PURE__ */ jsxs(Line, {
-								label: "Border",
-								children: [
-									/* @__PURE__ */ jsx("span", {
-										className: "size-3.5 shrink-0 rounded-[3px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
-										style: { background: info.appearance.border.color.css }
-									}),
-									/* @__PURE__ */ jsxs(Value$1, { children: [
-										info.appearance.border.width,
-										" ",
-										info.appearance.border.style,
-										" ",
-										info.appearance.border.color.value
-									] }),
-									/* @__PURE__ */ jsx(TokenChip, { name: info.appearance.border.color.token })
-								]
-							}) : null,
-							info.appearance.radius ? /* @__PURE__ */ jsxs(Line, {
-								label: "Radius",
-								children: [/* @__PURE__ */ jsx(Value$1, { children: info.appearance.radius.value }), /* @__PURE__ */ jsx(TokenChip, { name: info.appearance.radius.token })]
-							}) : null,
-							info.appearance.shadow ? /* @__PURE__ */ jsxs(Line, {
-								label: "Shadow",
-								children: [/* @__PURE__ */ jsx(Value$1, {
-									title: info.appearance.shadow.value,
-									children: info.appearance.shadow.value
-								}), /* @__PURE__ */ jsx(TokenChip, { name: info.appearance.shadow.token })]
-							}) : null,
-							info.appearance.opacity ? /* @__PURE__ */ jsx(Line, {
-								label: "Opacity",
-								children: /* @__PURE__ */ jsx(Value$1, { children: info.appearance.opacity })
-							}) : null
-						]
-					}) : null,
-					info.classes.length ? /* @__PURE__ */ jsx(Section, {
-						title: "Classes",
-						right: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: () => void copyText(info.classes.join(" "), "Classes copied"),
-							className: "cursor-pointer border-0 bg-transparent text-[12px] text-muted hover:text-ink2",
-							children: "Copy"
-						}),
-						children: /* @__PURE__ */ jsx("div", {
-							className: "flex flex-wrap gap-1 px-4 pb-1",
-							children: info.classes.map((name) => /* @__PURE__ */ jsx("span", {
-								className: "rounded-[4px] bg-soft2 px-1.5 py-0.5 font-mono text-[11px] text-ink2",
-								children: name
-							}, name))
-						})
-					}) : null,
-					info.attributes.length ? /* @__PURE__ */ jsx(Section, {
-						title: "Attributes",
-						children: info.attributes.map(([name, value]) => /* @__PURE__ */ jsx(Line, {
-							label: name,
-							children: /* @__PURE__ */ jsx(Value$1, {
-								title: value,
-								children: value
-							})
-						}, name))
-					}) : null,
-					info.children.length ? /* @__PURE__ */ jsx(Section, {
-						title: `Children · ${info.children.length}`,
-						children: /* @__PURE__ */ jsx("div", {
-							className: "flex flex-col px-2 pb-1",
-							children: info.children.map((child, index) => /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => onSelect(child.ref),
-								className: "flex h-7 cursor-pointer items-center gap-2 rounded-[6px] border-0 bg-transparent px-2 text-left font-mono text-[12px] text-ink2 hover:bg-soft2",
-								children: [/* @__PURE__ */ jsx(Icon, {
-									name: "chevron-right",
-									size: 12,
-									className: "text-muted"
-								}), /* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: child.label
-								})]
-							}, index))
-						})
-					}) : null
-				]
-			}),
-			info ? /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center gap-2 border-t border-rule bg-soft px-4 py-2.5",
-				children: /* @__PURE__ */ jsx(Button, {
-					icon: "copy",
-					onClick: () => void copyText(info.css, "CSS copied"),
-					className: "grow",
-					children: "Copy CSS"
-				})
-			}) : null
-		]
-	});
-}
-//#endregion
-//#region viewer/src/ui/badge.tsx
-var BADGE = {
-	neutral: "bg-soft2 text-ink2",
-	action: "bg-action-soft text-action",
-	ok: "bg-ok-soft text-ok-text",
-	danger: "bg-danger-soft text-danger-text"
-};
-function Badge({ tone = "neutral", children, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex h-[22px] shrink-0 items-center gap-1 whitespace-nowrap rounded-[6px] px-2 text-[12px] font-medium", BADGE[tone], className),
-		children
-	});
-}
-function Count({ value, tone = "neutral" }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[4px] px-[5px] text-[11.5px] font-semibold tabular", tone === "action" ? "bg-action-soft text-action" : tone === "danger" ? "bg-danger-soft text-danger-text" : "bg-soft2 text-ink2"),
-		children: value
-	});
-}
-//#endregion
-//#region viewer/src/ui/panel.tsx
-function Panel({ children, className, style }) {
-	return /* @__PURE__ */ jsx("section", {
-		className: cn("min-w-0 shrink-0 overflow-hidden rounded-[10px] border border-rule bg-surface", className),
-		style,
-		children
-	});
-}
-function PanelHead({ title, count, sub, right, as: Heading = "h2" }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-[46px] items-center justify-between gap-3 px-4",
-		children: [/* @__PURE__ */ jsxs(Heading, {
-			className: "m-0 flex min-w-0 items-center gap-2 whitespace-nowrap text-[14px] font-semibold",
-			children: [
-				title,
-				count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: count }) : null,
-				sub ? /* @__PURE__ */ jsx("span", {
-					className: "truncate text-[12.5px] font-normal text-muted",
-					children: sub
-				}) : null
-			]
-		}), right ? /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2",
-			children: right
-		}) : null]
-	});
-}
-function PanelTabs({ items, value, onChange, right }) {
-	const indicator = useId();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-[46px] items-center justify-between gap-3 px-4",
-		children: [/* @__PURE__ */ jsx("div", {
-			role: "tablist",
-			className: "flex gap-5",
-			children: items.map((item) => {
-				const on = item.value === value;
-				return /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					role: "tab",
-					"aria-selected": on,
-					onClick: () => onChange(item.value),
-					className: cn("relative flex h-[46px] cursor-pointer items-center gap-1.5 border-0 bg-transparent px-0.5 text-[14px] transition-colors", on ? "font-semibold text-ink" : "font-medium text-ink2 hover:text-ink"),
-					children: [
-						item.label,
-						item.count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null,
-						on ? /* @__PURE__ */ jsx(motion.span, {
-							layoutId: indicator,
-							className: "absolute inset-x-0 bottom-0 h-[2px] bg-ink",
-							transition: {
-								type: "spring",
-								stiffness: 520,
-								damping: 42
-							}
-						}) : null
-					]
-				}, item.value);
-			})
-		}), right ? /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2",
-			children: right
-		}) : null]
-	});
-}
-function Cell({ align, children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex min-w-0 items-center gap-2", align === "r" && "justify-end text-right", align === "c" && "justify-center"),
-		children
-	});
-}
-function cells(children, align) {
-	return Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx(Cell, {
-		align: align?.[index] ?? "l",
-		children: child
-	}, index));
-}
-function THead({ cols, align, labels }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "grid h-8 items-center gap-x-4 border-t border-rule bg-soft px-4 text-[12.5px] text-muted",
-		style: { gridTemplateColumns: cols },
-		children: labels.map((label, index) => /* @__PURE__ */ jsx(Cell, {
-			align: align?.[index] ?? "l",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "whitespace-nowrap",
-				children: label
-			})
-		}, index))
-	});
-}
-var rowClass = (first, interactive, className) => cn("grid items-center gap-x-4 border-rule", !first && "border-t", interactive && "cursor-pointer transition-colors hover:bg-soft", className);
-function Row({ cols, align, minH = 44, pad = "10px 16px", children, first, className, onClick, title }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: rowClass(first, !!onClick, className),
-		style: {
-			gridTemplateColumns: cols,
-			minHeight: minH,
-			padding: pad
-		},
-		onClick,
-		title,
-		children: cells(children, align)
-	});
-}
-/** A table row that navigates somewhere in the app. */
-function RowLink({ to, cols, align, minH = 44, pad = "10px 16px", first, className, children }) {
-	return /* @__PURE__ */ jsx(Link, {
-		href: to,
-		className: cn(rowClass(first, true, className), "text-inherit no-underline"),
-		style: {
-			gridTemplateColumns: cols,
-			minHeight: minH,
-			padding: pad
-		},
-		children: cells(children, align)
-	});
-}
-function KV({ label, children, labelWidth = 180, minH = 40, end = false }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "grid content-center items-baseline gap-x-4 border-t border-rule px-4 py-2",
-		style: {
-			gridTemplateColumns: `min(${labelWidth}px, 42%) minmax(0, 1fr)`,
-			minHeight: minH
-		},
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-[13px] text-muted",
-			children: label
-		}), /* @__PURE__ */ jsx("div", {
-			className: cn("flex min-w-0 flex-wrap items-center gap-2", end && "justify-end"),
-			children
-		})]
-	});
-}
-function PanelBody({ children, pad = "16px", gap = 16, top = true, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col", top && "border-t border-rule", className),
-		style: {
-			padding: pad,
-			gap
-		},
-		children
-	});
-}
-function PanelFoot({ left, right }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between gap-3 border-t border-rule bg-soft px-4 py-3",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 items-center gap-2 text-[12.5px] text-muted",
-			children: left
-		}), /* @__PURE__ */ jsx("div", {
-			className: "flex items-center gap-2",
-			children: right
-		})]
-	});
-}
-/** Bottom summary strip. */
-function Strip({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex min-h-[38px] shrink-0 items-center gap-2 border-t border-rule bg-soft px-4 py-2 text-[12.5px] text-muted", className),
-		children
-	});
-}
-/** Group header row inside tables. */
-function GroupRow({ children, sub }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex h-9 items-center gap-2.5 border-t border-rule bg-soft px-4 text-[13px] font-medium",
-		children: [children, sub ? /* @__PURE__ */ jsx("span", {
-			className: "text-[12.5px] font-normal text-muted",
-			children: sub
-		}) : null]
-	});
-}
-//#endregion
-//#region viewer/src/components/issues.tsx
-function IssueList({ issues, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-col", className),
-		children: issues.map((issue, index) => /* @__PURE__ */ jsxs("div", {
-			className: "flex items-start gap-2.5 border-t border-rule px-4 py-2.5 text-[13px] first:border-t-0",
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: issue.severity === "error" ? "alert" : "info",
-				size: 15,
-				className: cn("mt-0.5", issue.severity === "error" ? "text-danger-text" : "text-action")
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-col gap-0.5",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-ink",
-					children: issue.message
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-[12px] break-all text-muted",
-					children: [issue.file, issue.at ? ` · ${issue.at}` : ""]
-				})]
-			})]
-		}, index))
-	});
-}
-/** Problems found in the project's files, as a panel. */
-function IssuesPanel({ issues, title = "Problems" }) {
-	if (!issues.length) return null;
-	const errors = issues.filter((issue) => issue.severity === "error").length;
-	return /* @__PURE__ */ jsxs(Panel, {
-		className: errors ? "border-danger/40" : void 0,
-		children: [/* @__PURE__ */ jsx(PanelHead, {
-			title,
-			count: issues.length,
-			sub: errors ? `${errors} blocking` : "warnings"
-		}), /* @__PURE__ */ jsx("div", {
-			className: "border-t border-rule",
-			children: /* @__PURE__ */ jsx(IssueList, { issues })
-		})]
-	});
-}
-//#endregion
-//#region viewer/src/components/slide-panel.tsx
-var EASE = [
-	.2,
-	.7,
-	.2,
-	1
-];
-/**
-* A side panel that slides open and shut. The wrapper animates its width while
-* the content keeps its own, so nothing inside reflows mid-animation.
-*/
-function SlidePanel({ open, side, width, children }) {
-	return /* @__PURE__ */ jsx(AnimatePresence, {
-		initial: false,
-		children: open ? /* @__PURE__ */ jsx(motion.div, {
-			initial: {
-				width: 0,
-				opacity: .6
-			},
-			animate: {
-				width,
-				opacity: 1
-			},
-			exit: {
-				width: 0,
-				opacity: .6
-			},
-			transition: {
-				duration: .22,
-				ease: EASE
-			},
-			className: cn("flex min-h-0 shrink-0 overflow-hidden", side === "right" ? "justify-start" : "justify-end"),
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex min-h-0 shrink-0",
-				style: { width },
-				children
-			})
-		}, "panel") : null
-	});
-}
-//#endregion
-//#region viewer/src/ui/page.tsx
-/** Page body under the top bar. */
-function Content({ children, className, gap = 20, wide = false }) {
-	return /* @__PURE__ */ jsx("main", {
-		className: cn("mx-auto flex w-full min-h-0 grow flex-col px-8 pt-6 pb-7 animate-[q-fade-in_160ms_ease-out] max-md:px-4 max-md:pt-4", wide ? "max-w-[1440px]" : "max-w-[1200px]", className),
-		style: { gap },
-		children
-	});
-}
-function PageHead({ title, sub, right, badge, crumbs }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex shrink-0 items-end justify-between gap-6 max-md:flex-col max-md:items-stretch max-md:gap-3",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-col gap-1",
-			children: [
-				crumbs ? /* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-1.5 text-[13px] text-muted",
-					children: crumbs
-				}) : null,
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ jsx("h1", {
-						className: "m-0 text-[22px] font-semibold tracking-[-0.01em]",
-						children: title
-					}), badge]
-				}),
-				sub ? /* @__PURE__ */ jsx("div", {
-					className: "text-[13px] [overflow-wrap:anywhere] text-muted",
-					children: sub
-				}) : null
-			]
-		}), right ? /* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap items-center gap-2",
-			children: right
-		}) : null]
-	});
-}
-function SubNav({ items, label }) {
-	const [location] = useLocation();
-	return /* @__PURE__ */ jsx("nav", {
-		"aria-label": label,
-		className: "flex flex-col gap-0.5",
-		children: items.map((item) => {
-			const active = location === item.to;
-			return /* @__PURE__ */ jsxs(Link, {
-				href: item.to,
-				"aria-current": active ? "page" : void 0,
-				className: cn("relative flex h-8 items-center gap-2 whitespace-nowrap rounded-[6px] px-3 text-[13.5px] no-underline transition-colors focus-visible:outline-offset-[-2px]", active ? "font-medium text-ink" : "text-ink2 hover:bg-soft2"),
-				children: [
-					active ? /* @__PURE__ */ jsx(motion.span, {
-						layoutId: "sub-nav-active",
-						"aria-hidden": true,
-						className: "absolute inset-0 z-0 rounded-[6px] bg-soft2",
-						transition: {
-							type: "spring",
-							stiffness: 520,
-							damping: 42
-						}
-					}) : null,
-					/* @__PURE__ */ jsx("span", {
-						className: "relative z-[1] min-w-0 truncate",
-						children: item.label
-					}),
-					item.hint ? /* @__PURE__ */ jsx("span", {
-						className: "relative z-[1] ml-auto text-[12px] font-normal text-muted",
-						children: item.hint
-					}) : null
-				]
-			}, item.to);
-		})
-	});
-}
-function NavLabel({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "px-3 pt-4 pb-1 text-[12px] text-muted",
-		children
-	});
-}
-/** Standalone message card: not found, empty, failed to load. */
-function NoticeCard({ title, text, action }) {
-	return /* @__PURE__ */ jsxs(Panel, {
-		className: "flex w-[480px] max-w-full flex-col items-center gap-2 px-6 py-8 text-center",
-		children: [
-			/* @__PURE__ */ jsx("h1", {
-				className: "m-0 text-[16px] font-semibold",
-				children: title
-			}),
-			text ? /* @__PURE__ */ jsx("div", {
-				className: "m-0 max-w-[400px] text-[14px] text-ink2",
-				children: text
-			}) : null,
-			action ? /* @__PURE__ */ jsx("div", {
-				className: "mt-3 flex flex-wrap justify-center gap-2",
-				children: action
-			}) : null
-		]
-	});
-}
-/** NoticeCard centred in the free space. */
-function Notice(props) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "flex min-h-[50vh] grow items-center justify-center p-6 max-md:px-4",
-		children: /* @__PURE__ */ jsx(NoticeCard, { ...props })
-	});
-}
-//#endregion
-//#region viewer/src/pages/not-found.tsx
-function NotFound({ title = "Nothing here", text }) {
-	const scoped = !!useViewer().scope;
-	return /* @__PURE__ */ jsx(Notice, {
-		title,
-		text: text ?? "This address does not match a canvas or a page of the design system.",
-		action: scoped ? void 0 : /* @__PURE__ */ jsx(ButtonLink, {
-			to: "/",
-			children: "All canvases"
-		})
-	});
-}
-//#endregion
-//#region viewer/src/pages/canvas/camera.ts
-/** The farthest out the camera goes; past it a page is specks, and every one of them still costs. */
-var MIN_ZOOM = .1;
-var clampZoom = (z, min = MIN_ZOOM) => Math.min(8, Math.max(min, z));
-/** The canvas camera. Lives outside React so panning never re-renders the tree. */
-var CameraStore = class {
-	camera = {
-		x: 0,
-		y: 0,
-		z: 1
-	};
-	/** How far out the camera may go; the viewport sets it from the size of the page. */
-	minZoom = MIN_ZOOM;
-	listeners = /* @__PURE__ */ new Set();
-	animation = 0;
-	subscribe(listener) {
-		this.listeners.add(listener);
-		return () => {
-			this.listeners.delete(listener);
-		};
-	}
-	set(next) {
-		this.camera = {
-			x: next.x,
-			y: next.y,
-			z: clampZoom(next.z, this.minZoom)
-		};
-		for (const listener of this.listeners) listener(this.camera);
-	}
-	/** Stop any animation: the user took over. */
-	interrupt() {
-		cancelAnimationFrame(this.animation);
-		this.animation = 0;
-	}
-	panBy(dx, dy) {
-		this.interrupt();
-		const { x, y, z } = this.camera;
-		this.set({
-			x: x + dx,
-			y: y + dy,
-			z
-		});
-	}
-	/** Zoom by `factor` keeping the screen point (sx, sy) in place. */
-	zoomAt(sx, sy, factor) {
-		this.interrupt();
-		const { x, y, z } = this.camera;
-		const next = clampZoom(z * factor, this.minZoom);
-		const wx = (sx - x) / z;
-		const wy = (sy - y) / z;
-		this.set({
-			x: sx - wx * next,
-			y: sy - wy * next,
-			z: next
-		});
-	}
-	animateTo(target, duration = 320) {
-		this.interrupt();
-		const from = { ...this.camera };
-		const to = {
-			...target,
-			z: clampZoom(target.z, this.minZoom)
-		};
-		if (duration <= 0 || matchMedia("(prefers-reduced-motion: reduce)").matches) {
-			this.set(to);
-			return;
-		}
-		const start = performance.now();
-		const step = (now) => {
-			const t = Math.min(1, (now - start) / duration);
-			const e = 1 - (1 - t) ** 3;
-			const z = from.z * (to.z / from.z) ** e;
-			const k = from.z === to.z ? e : (z - from.z) / (to.z - from.z);
-			this.set({
-				x: from.x + (to.x - from.x) * k,
-				y: from.y + (to.y - from.y) * k,
-				z
-			});
-			if (t < 1) this.animation = requestAnimationFrame(step);
-			else this.animation = 0;
-		};
-		this.animation = requestAnimationFrame(step);
-	}
-	toWorld(sx, sy) {
-		const { x, y, z } = this.camera;
-		return {
-			x: (sx - x) / z,
-			y: (sy - y) / z
-		};
-	}
-};
-/**
-* The camera that shows `rect` inside a viewport of `w`×`h` with `pad` screen pixels around it.
-* When `rect` does not fit even at `minZoom`, it lines up with the top (and the left, if it is too wide).
-*/
-function fitRect(rect, w, h, pad = 72, maxZoom = 1, minZoom = MIN_ZOOM) {
-	const z = clampZoom(Math.min((w - pad * 2) / Math.max(rect.w, 1), (h - pad * 2) / Math.max(rect.h, 1), maxZoom), minZoom);
-	const place = (start, size, room) => size * z <= room - pad * 2 ? room / 2 - (start + size / 2) * z : pad - start * z;
-	return {
-		z,
-		x: place(rect.x, rect.w, w),
-		y: place(rect.y, rect.h, h)
-	};
-}
-function intersects(a, b) {
-	return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
-}
-//#endregion
-//#region viewer/src/ui/choice.tsx
-function Switch({ checked, onChange, label, disabled }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role: "switch",
-		"aria-checked": checked,
-		"aria-label": label,
-		disabled,
-		onClick: () => onChange?.(!checked),
-		className: cn("relative h-[18px] w-[32px] shrink-0 cursor-pointer rounded-[9px] border-0 p-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-ink" : "bg-rule-strong"),
-		children: /* @__PURE__ */ jsx("span", {
-			className: "absolute top-[2px] left-[2px] size-[14px] rounded-full bg-surface shadow-[0_1px_2px_rgba(0,0,0,0.25)] transition-transform duration-200 ease-[cubic-bezier(0.2,0.7,0.2,1)]",
-			style: { transform: checked ? "translateX(14px)" : "none" }
-		})
-	});
-}
-function Segmented({ items, value, onChange, label, stretch, size = "ctrl" }) {
-	const indicator = useId();
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"aria-label": label,
-		className: cn("shrink-0 items-center gap-0.5 rounded-[6px] bg-track p-[3px]", size === "ctrl" ? "h-ctrl" : "h-7", stretch ? "flex" : "inline-flex"),
-		children: items.map((item) => {
-			const on = item.value === value;
-			return /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-pressed": on,
-				title: item.title,
-				onClick: () => onChange(item.value),
-				className: cn("relative flex h-full cursor-pointer items-center justify-center whitespace-nowrap rounded-[4px] border-0 bg-transparent font-medium transition-colors", size === "ctrl" ? "px-2.5 text-ctrl" : "px-2 text-[12.5px]", stretch && "flex-1", on ? "text-ink" : "text-muted hover:text-ink2"),
-				children: [on ? /* @__PURE__ */ jsx(motion.span, {
-					layoutId: indicator,
-					className: "absolute inset-0 z-0 rounded-[4px] bg-surface shadow-[0_1px_2px_rgba(0,0,0,0.10)]",
-					transition: {
-						type: "spring",
-						stiffness: 520,
-						damping: 42
-					}
-				}) : null, /* @__PURE__ */ jsx("span", {
-					className: "relative z-[1] flex items-center gap-1.5",
-					children: item.label
-				})]
-			}, item.value);
-		})
-	});
-}
-//#endregion
-//#region viewer/src/pages/canvas/full-page.tsx
-/** The full-window page of one screen, relative to the viewer's base. */
-var fullHref = (canvas, item, theme) => `/c/${encodeURIComponent(canvas)}/full/${encodeURIComponent(item)}?theme=${theme}`;
-/**
-* "Open in a new tab" for a screen. A sandboxed viewer serves screens to its frames only, so the
-* tab gets the full-window page of the viewer; otherwise the screen's own URL.
-*/
-function useOpenUrl(canvasId, item, theme) {
-	const { frameSandbox } = useViewer();
-	const { base } = useRouter();
-	if (!item) return null;
-	if (item.kind === "url") return item.url;
-	if (!frameSandbox) return absoluteUrl(frameSrc(item.url, item.theme ?? theme));
-	return absoluteUrl(`${base}${fullHref(canvasId, item.id, item.theme ?? theme)}`);
-}
-/** `/c/:canvas/full/:item`: one screen filling the window, a way out on hover and Esc. */
-function FullPage({ canvasId, itemId }) {
-	const { data: canvas, error, isLoading } = useCanvas(canvasId);
-	const [, navigate] = useLocation();
-	const { frameSandbox } = useViewer();
-	const appTheme = useTheme();
-	const frame = useRef(null);
-	const param = new URLSearchParams(window.location.search).get("theme");
-	const items = canvas ? canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url"))) : [];
-	const item = items.find((entry) => entry.id === itemId);
-	const theme = (item?.kind === "screen" ? item.theme : void 0) ?? (param === "light" || param === "dark" ? param : canvas?.theme ?? appTheme);
-	const url = item ? item.kind === "screen" ? frameSrc(item.url, theme) : item.url : "";
-	const back = `/c/${encodeURIComponent(canvasId)}`;
-	useEffect(() => {
-		if (item) document.title = `${item.title} · ${canvas?.title ?? ""}`;
-	}, [item, canvas?.title]);
-	useEffect(() => {
-		const onKey = (event) => {
-			if (event.key === "Escape") navigate(back);
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [navigate, back]);
-	useEffect(() => {
-		const el = frame.current;
-		if (!el || item?.kind !== "screen") return;
-		return listenToFrame(el, (message) => {
-			if (message.type === "keydown" && message.code === "Escape") navigate(back);
-			else if (message.type === "go") {
-				const id = message.target.includes("/") ? message.target.split("/")[1] : message.target;
-				if (items.some((entry) => entry.id === id)) navigate(fullHref(canvasId, id, theme), { replace: true });
-			} else if (message.type === "link" && canvas) followLink(message, canvas, (id) => navigate(fullHref(canvasId, id, theme), { replace: true }), itemId);
-		});
-	}, [url, item?.kind]);
-	if (error) return /* @__PURE__ */ jsx(NotFound, {
-		title: "Canvas not found",
-		text: error.message
-	});
-	if (isLoading || !canvas) return /* @__PURE__ */ jsx("div", { className: "h-dvh bg-surface" });
-	if (!item) return /* @__PURE__ */ jsx(NotFound, {
-		title: "Screen not found",
-		text: `No screen "${itemId}" on this canvas.`
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "group fixed inset-0 bg-surface",
-		children: [/* @__PURE__ */ jsx("iframe", {
-			ref: frame,
-			src: url,
-			title: item.title,
-			allow: "clipboard-read; clipboard-write; fullscreen",
-			sandbox: frameSandbox,
-			className: "block h-full w-full border-0",
-			style: { colorScheme: theme },
-			onLoad: () => item.kind === "screen" && sendTheme(frame.current, theme)
-		}, `${item.id}:${item.kind === "screen" ? item.rev : item.url}`), /* @__PURE__ */ jsx("div", {
-			className: "pointer-events-none absolute inset-x-0 top-0 flex justify-end p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
-			children: /* @__PURE__ */ jsxs(Link, {
-				href: back,
-				className: "pointer-events-auto flex h-8 items-center gap-2 rounded-[8px] border border-rule bg-surface px-3 text-[12.5px] text-ink2 no-underline shadow-pop hover:text-ink",
-				children: [
-					/* @__PURE__ */ jsx(Icon, {
-						name: "x",
-						size: 14
-					}),
-					"Back to ",
-					canvas.title,
-					/* @__PURE__ */ jsx(Kbd, { children: "esc" })
-				]
-			})
-		})]
-	});
-}
-//#endregion
-//#region viewer/src/pages/canvas/sidebar.tsx
-function itemIcon(item) {
-	if (item.kind === "note") return "note";
-	if (item.kind === "image") return "image";
-	if (item.kind === "url") return "globe";
-	return item.frame.width < 600 ? "smartphone" : item.frame.width < 1100 ? "tablet" : "monitor";
-}
-function pageHref(canvas, page) {
-	return `/c/${encodeURIComponent(canvas.id)}/p/${encodeURIComponent(page.id)}`;
-}
-/** Pages of the canvas and the items on the current one. */
-function Sidebar({ canvas, page, store, onPick }) {
-	const selected = useStore(store, (state) => state.selected);
-	const errors = useStore(store, (state) => state.frames);
-	return /* @__PURE__ */ jsxs("aside", {
-		"data-ui": true,
-		className: "flex w-[264px] shrink-0 flex-col overflow-hidden border-r border-rule bg-surface",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1 border-b border-rule px-4 py-3.5",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "truncate text-[14px] font-semibold",
-				children: canvas.title
-			}), canvas.description ? /* @__PURE__ */ jsx("div", {
-				className: "line-clamp-3 text-[12.5px] leading-[1.45] text-muted",
-				children: canvas.description
-			}) : null]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "min-h-0 grow overflow-y-auto pb-4",
-			children: [
-				canvas.pages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-					className: "px-4 pt-3 pb-1 text-[12px] text-muted",
-					children: "Pages"
-				}), /* @__PURE__ */ jsx("nav", {
-					className: "flex flex-col gap-0.5 px-2",
-					children: canvas.pages.map((p) => {
-						const count = p.sections.reduce((sum, s) => sum + s.items.filter((i) => i.kind === "screen" || i.kind === "url").length, 0);
-						return /* @__PURE__ */ jsxs(Link, {
-							href: pageHref(canvas, p),
-							className: cn("flex h-8 items-center gap-2 rounded-[6px] px-2.5 text-[13.5px] no-underline transition-colors focus-visible:outline-offset-[-2px]", p.id === page.id ? "bg-soft2 font-medium text-ink" : "text-ink2 hover:bg-soft2"),
-							children: [
-								/* @__PURE__ */ jsx(Icon, {
-									name: "file",
-									size: 15,
-									className: "text-muted"
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "min-w-0 grow truncate",
-									children: p.title
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "text-[12px] text-muted tabular",
-									children: count
-								})
-							]
-						}, p.id);
-					})
-				})] }) : null,
-				/* @__PURE__ */ jsx("div", {
-					className: "px-4 pt-3 pb-1 text-[12px] text-muted",
-					children: canvas.pages.length > 1 ? page.title : "Layers"
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex flex-col px-2",
-					children: page.sections.map((section) => /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col",
-						children: [section.title ? /* @__PURE__ */ jsxs("div", {
-							className: "flex h-7 items-center gap-2 px-2.5 pt-1 text-[12px] font-medium text-ink2",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "truncate",
-								children: section.title
-							}), /* @__PURE__ */ jsx(Count, { value: section.items.length })]
-						}) : null, section.items.map((item) => {
-							const hasErrors = (errors[item.id]?.errors.length ?? 0) > 0 || item.kind === "screen" && item.missing;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => onPick(item.id),
-								className: cn("flex h-8 w-full cursor-pointer items-center gap-2 rounded-[6px] border-0 px-2.5 text-left text-[13px] transition-colors focus-visible:outline-offset-[-2px]", section.title && "pl-4", selected === item.id ? "bg-action-soft text-ink" : "bg-transparent text-ink2 hover:bg-soft2"),
-								children: [
-									/* @__PURE__ */ jsx(Icon, {
-										name: itemIcon(item),
-										size: 15,
-										className: "text-muted"
-									}),
-									/* @__PURE__ */ jsx("span", {
-										className: "min-w-0 grow truncate",
-										children: item.title || (item.kind === "note" ? "Note" : item.id)
-									}),
-									hasErrors ? /* @__PURE__ */ jsx("span", { className: "size-[7px] shrink-0 rounded-full bg-danger" }) : null
-								]
-							}, item.id);
-						})]
-					}, section.id))
-				})
-			]
-		})]
-	});
-}
-//#endregion
-//#region viewer/src/pages/canvas/canvas-bar.tsx
-/** The canvas page's top bar: the canvas and its pages, screen theme, inspect and play. */
-function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSidebar, onPlay, canPlay, inspect, onInspect }) {
-	const [, navigate] = useLocation();
-	const { slots, scope } = useViewer();
-	const titleRef = useRef(null);
-	const endRef = useRef(null);
-	const compact = useFitBar(titleRef, endRef, [
-		canvas.title,
-		page?.title,
-		canvas.pages.length
-	]);
-	return /* @__PURE__ */ jsxs(BarCompactProvider, {
-		value: compact,
-		children: [/* @__PURE__ */ jsxs(Bar, { children: [
-			slots.barStart,
-			slots.brand ? slots.brand : scope ? /* @__PURE__ */ jsx(Mark, {}) : /* @__PURE__ */ jsx(Tooltip, {
-				content: "All canvases",
-				children: /* @__PURE__ */ jsx(Link, {
-					href: "/",
-					className: "flex items-center",
-					"aria-label": "All canvases",
-					children: /* @__PURE__ */ jsx(Mark, {})
-				})
-			}),
-			/* @__PURE__ */ jsx(IconButton, {
-				icon: "panel-left",
-				label: sidebar ? "Hide sidebar (⌘\\)" : "Show sidebar (⌘\\)",
-				onClick: () => onSidebar(!sidebar)
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: titleRef,
-				className: "flex min-w-0 items-center gap-1.5 text-[14px]",
-				children: [/* @__PURE__ */ jsx("span", {
-					"data-fit": true,
-					className: "truncate font-semibold",
-					children: canvas.title
-				}), page && canvas.pages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
-					name: "chevron-right",
-					size: 14,
-					className: "shrink-0 text-muted"
-				}), /* @__PURE__ */ jsxs(Menu, {
-					width: 240,
-					trigger: /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "flex h-ctrl cursor-pointer items-center gap-1 rounded-[6px] border-0 bg-transparent px-2 text-[14px] text-ink2 hover:bg-soft2",
-						children: [/* @__PURE__ */ jsx("span", {
-							"data-fit": true,
-							className: "truncate",
-							children: page.title
-						}), /* @__PURE__ */ jsx(Icon, {
-							name: "chevron-down",
-							size: 14,
-							className: "text-muted"
-						})]
-					}),
-					children: [/* @__PURE__ */ jsx(MenuLabel, { children: "Pages" }), canvas.pages.map((p) => /* @__PURE__ */ jsxs(MenuItem, {
-						active: p.id === page.id,
-						onSelect: () => navigate(pageHref(canvas, p)),
-						children: [/* @__PURE__ */ jsx(Icon, {
-							name: "file",
-							size: 15,
-							className: "text-muted"
-						}), p.title]
-					}, p.id))]
-				})] }) : null]
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				ref: endRef,
-				className: "ml-auto flex shrink-0 items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx(Segmented, {
-						label: "Screen theme",
-						value: theme,
-						onChange: onTheme,
-						items: [{
-							value: "light",
-							label: /* @__PURE__ */ jsx(Icon, {
-								name: "sun",
-								size: 15
-							}),
-							title: "Light screens"
-						}, {
-							value: "dark",
-							label: /* @__PURE__ */ jsx(Icon, {
-								name: "moon",
-								size: 15
-							}),
-							title: "Dark screens"
-						}]
-					}),
-					/* @__PURE__ */ jsx(InspectToggle, {
-						on: inspect,
-						onChange: onInspect,
-						compact
-					}),
-					/* @__PURE__ */ jsx(Tooltip, {
-						content: /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center gap-1.5",
-							children: ["Play ", /* @__PURE__ */ jsx(Kbd, { children: "P" })]
-						}),
-						children: /* @__PURE__ */ jsx(Button, {
-							kind: "secondary",
-							icon: "play",
-							onClick: onPlay,
-							disabled: !canPlay,
-							"aria-label": "Play",
-							className: compact ? "w-ctrl px-0" : void 0,
-							children: compact ? null : "Play"
-						})
-					}),
-					/* @__PURE__ */ jsx(SearchButton, {
-						width: 180,
-						label: "Search",
-						compact
-					}),
-					/* @__PURE__ */ jsx(ThemeMenu, {}),
-					slots.barEnd
-				]
-			})
-		] }), slots.belowBar ? /* @__PURE__ */ jsx("div", {
-			className: "shrink-0",
-			children: slots.belowBar
-		}) : null]
-	});
-}
-/** The selected item's name and actions, floating over the bottom of the canvas. */
-function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
-	const selected = useStore(store, (state) => state.selected);
-	const active = useStore(store, (state) => state.active);
-	const status = useStore(store, (state) => selected ? state.frames[selected] : void 0);
-	const item = layoutItems.find((i) => i.id === selected);
-	const openUrl = useOpenUrl(canvas.id, item?.kind === "screen" || item?.kind === "url" ? item : void 0, theme);
-	if (!item) return null;
-	const frame = item.kind === "screen" || item.kind === "url";
-	const reload = () => reloadFrame(document.querySelector(`[data-item="${CSS.escape(item.id)}"] iframe`));
-	const errors = status?.errors ?? [];
-	return /* @__PURE__ */ jsx("div", {
-		"data-ui": true,
-		className: "pointer-events-none absolute inset-x-0 bottom-5 z-20 flex justify-center px-4",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "pointer-events-auto flex max-w-full flex-col overflow-hidden rounded-[10px] border border-rule bg-surface shadow-pop animate-[q-pop_120ms_ease-out]",
-			children: [errors.length ? /* @__PURE__ */ jsxs("div", {
-				className: "flex max-h-40 items-start gap-2 overflow-y-auto border-b border-rule bg-danger-soft px-3.5 py-2 font-mono text-[12px] whitespace-pre-wrap text-danger-text",
-				children: [/* @__PURE__ */ jsx(Icon, {
-					name: "alert",
-					size: 14,
-					className: "mt-px"
-				}), /* @__PURE__ */ jsx("span", {
-					className: "min-w-0",
-					children: errors.join("\n")
-				})]
-			}) : null, /* @__PURE__ */ jsxs("div", {
-				className: "flex h-[44px] items-center gap-1 pr-1.5 pl-3.5",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex min-w-0 items-center gap-2 pr-2",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "truncate text-[13.5px] font-medium",
-							children: item.title || item.id
-						}), frame && active === item.id ? /* @__PURE__ */ jsxs("span", {
-							className: "flex shrink-0 items-center gap-1.5 text-[12px] text-muted",
-							children: [
-								/* @__PURE__ */ jsx(Icon, {
-									name: "pointer",
-									size: 13
-								}),
-								" ",
-								inspect ? "Inspecting" : "Interacting",
-								" ",
-								/* @__PURE__ */ jsx(Kbd, { children: "esc" })
-							]
-						}) : frame ? /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 text-[12px] text-muted",
-							children: inspect ? "Click an element to inspect it" : "Click the screen to interact"
-						}) : null]
-					}),
-					frame ? /* @__PURE__ */ jsx(Tooltip, {
-						content: /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center gap-1.5",
-							children: ["Play ", /* @__PURE__ */ jsx(Kbd, { children: "↵" })]
-						}),
-						children: /* @__PURE__ */ jsx(IconButton, {
-							icon: "play",
-							label: "Play",
-							onClick: () => onPlay(item.id)
-						})
-					}) : null,
-					openUrl ? /* @__PURE__ */ jsx(Tooltip, {
-						content: "Open in a new tab",
-						children: /* @__PURE__ */ jsx("a", {
-							href: openUrl,
-							target: "_blank",
-							rel: "noreferrer",
-							"aria-label": "Open in a new tab",
-							className: "inline-flex h-ctrl w-ctrl items-center justify-center rounded-[6px] text-muted hover:bg-soft2 hover:text-ink2",
-							children: /* @__PURE__ */ jsx(Icon, {
-								name: "external",
-								size: 16
-							})
-						})
-					}) : null,
-					frame ? /* @__PURE__ */ jsx(Tooltip, {
-						content: "Reload",
-						children: /* @__PURE__ */ jsx(IconButton, {
-							icon: "refresh",
-							label: "Reload",
-							onClick: reload
-						})
-					}) : null,
-					item.kind === "screen" ? /* @__PURE__ */ jsx(Tooltip, {
-						content: "Copy source path",
-						children: /* @__PURE__ */ jsx(IconButton, {
-							icon: "copy",
-							label: "Copy source path",
-							onClick: () => void copyText(item.file, "Path copied")
-						})
-					}) : null,
-					/* @__PURE__ */ jsx(Tooltip, {
-						content: /* @__PURE__ */ jsxs("span", {
-							className: "flex items-center gap-1.5",
-							children: ["Zoom to ", /* @__PURE__ */ jsx(Kbd, { children: "⇧2" })]
-						}),
-						children: /* @__PURE__ */ jsx(IconButton, {
-							icon: "fit",
-							label: "Zoom to",
-							onClick: () => window.dispatchEvent(new CustomEvent("design:focus", { detail: {
-								canvas: canvas.id,
-								item: item.id
-							} }))
-						})
-					})
-				]
-			})]
-		})
-	});
-}
-/** The inspect mode switch: a button that stays pressed while on. */
-function InspectToggle({ on, onChange, compact = false }) {
-	return /* @__PURE__ */ jsx(Tooltip, {
-		content: /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-1.5",
-			children: ["Inspect elements ", /* @__PURE__ */ jsx(Kbd, { children: "I" })]
-		}),
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-pressed": on,
-			"aria-label": "Inspect elements",
-			onClick: () => onChange(!on),
-			className: cn("inline-flex h-ctrl shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[6px] border text-ctrl font-medium", compact ? "w-ctrl px-0" : "px-ctrl", on ? "border-action-line bg-action-soft text-action" : "border-rule-strong bg-surface text-ink hover:bg-soft"),
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: "pointer",
-				size: 15
-			}), compact ? null : "Inspect"]
-		})
-	});
-}
-//#endregion
-//#region viewer/src/pages/canvas/layout.ts
-var SECTION_GAP = 280;
-var ITEM_GAP = 96;
-var ROW_GAP = 150;
-var HEADER_GAP = 110;
-var HEADER_MIN_WIDTH = 720;
-var isFrame = (item) => item.kind === "screen" || item.kind === "url";
-function itemSize(item, sizes) {
-	const measured = sizes[item.id];
-	if (item.kind === "screen" || item.kind === "url") {
-		const w = item.frame.width;
-		if (item.frame.height !== "auto") return {
-			w,
-			h: item.frame.height
-		};
-		const fallback = item.kind === "screen" ? item.measuredHeight : void 0;
-		return {
-			w,
-			h: measured?.h ?? fallback ?? 900
-		};
-	}
-	if (item.kind === "note") return {
-		w: item.width,
-		h: measured?.h ?? Math.max(80, Math.ceil(item.text.length / 38) * 26 + 40)
-	};
-	const w = item.width ?? measured?.w ?? 480;
-	return {
-		w,
-		h: measured?.w ? measured.h / measured.w * w : measured?.h ?? w * .62
-	};
-}
-function sectionHeaderHeight(section, sizes) {
-	if (!section.title && !section.description) return 0;
-	return sizes[`section:${section.id}`]?.h ?? (section.title ? 56 : 0) + (section.description ? 60 : 0);
-}
-/** Sections stack top to bottom; items run left to right, wrapping after `columns`. */
-function layoutPage(page, sizes) {
-	const items = [];
-	const sections = [];
-	if (page.layout === "free") {
-		let cursor = 0;
-		for (const section of page.sections) for (const item of section.items) {
-			const { w, h } = itemSize(item, sizes);
-			const x = item.x ?? cursor;
-			const y = item.y ?? 0;
-			cursor = Math.max(cursor, x + w + ITEM_GAP);
-			items.push({
-				item,
-				section,
-				x,
-				y,
-				w,
-				h
-			});
-		}
-	} else {
-		let y = 0;
-		for (const section of page.sections) {
-			const header = sectionHeaderHeight(section, sizes);
-			const top = y;
-			let rowY = y + (header ? header + HEADER_GAP : 0);
-			let x = 0;
-			let rowHeight = 0;
-			let width = 0;
-			let column = 0;
-			for (const item of section.items) {
-				if (section.columns && column === section.columns) {
-					rowY += rowHeight + ROW_GAP;
-					x = 0;
-					rowHeight = 0;
-					column = 0;
-				}
-				const { w, h } = itemSize(item, sizes);
-				items.push({
-					item,
-					section,
-					x,
-					y: rowY,
-					w,
-					h
-				});
-				x += w + ITEM_GAP;
-				width = Math.max(width, x - ITEM_GAP);
-				rowHeight = Math.max(rowHeight, h);
-				column++;
-			}
-			const bottom = rowY + rowHeight;
-			sections.push({
-				section,
-				x: 0,
-				y: top,
-				w: Math.max(width, header ? HEADER_MIN_WIDTH : 0),
-				h: bottom - top,
-				header
-			});
-			y = bottom + SECTION_GAP;
-		}
-	}
-	let minX = 0;
-	let minY = 0;
-	let maxX = 0;
-	let maxY = 0;
-	const all = [...items, ...sections];
-	if (all.length) {
-		minX = Math.min(...all.map((r) => r.x));
-		minY = Math.min(...all.map((r) => r.y));
-		maxX = Math.max(...all.map((r) => r.x + r.w));
-		maxY = Math.max(...all.map((r) => r.y + r.h));
-	}
-	return {
-		items,
-		sections,
-		bounds: {
-			x: minX,
-			y: minY,
-			w: maxX - minX,
-			h: maxY - minY
-		}
-	};
-}
-/** Frames in reading order, for arrow-key stepping and play mode. */
-function frameOrder(layout) {
-	return layout.items.filter((placed) => isFrame(placed.item));
-}
-//#endregion
-//#region viewer/src/pages/canvas/view-state.ts
-function createViewState() {
-	return new Store({
-		selected: null,
-		active: null,
-		hovered: null,
-		sizes: {},
-		frames: {},
-		live: [],
-		panning: false,
-		zoomTiny: false,
-		frameEls: {},
-		inspecting: false
-	});
-}
-function setSize(store, key, size) {
-	store.set((state) => {
-		const prev = state.sizes[key];
-		if (prev && Math.abs(prev.h - size.h) < 1 && prev.w === size.w) return state;
-		return {
-			...state,
-			sizes: {
-				...state.sizes,
-				[key]: size
-			}
-		};
-	});
-}
-function setFrame(store, id, patch) {
-	store.set((state) => {
-		const prev = state.frames[id] ?? {
-			ready: false,
-			errors: []
-		};
-		return {
-			...state,
-			frames: {
-				...state.frames,
-				[id]: {
-					...prev,
-					...patch
-				}
-			}
-		};
-	});
-}
-function setFrameEl(store, id, el) {
-	store.set((state) => state.frameEls[id] === el ? state : {
-		...state,
-		frameEls: {
-			...state.frameEls,
-			[id]: el
-		}
-	});
-}
-//#endregion
-//#region ../../node_modules/.pnpm/marked@18.0.14/node_modules/marked/lib/marked.esm.js
-/**
-* marked v18.0.14 - a markdown parser
-* Copyright (c) 2018-2026, MarkedJS. (MIT License)
-* Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
-* https://github.com/markedjs/marked
-*/
-/**
-* DO NOT EDIT THIS FILE
-* The code in this file is generated from files in ./src/
-*/
-function I() {
-	return {
-		async: !1,
-		breaks: !1,
-		extensions: null,
-		gfm: !0,
-		hooks: null,
-		pedantic: !1,
-		renderer: null,
-		silent: !1,
-		tokenizer: null,
-		walkTokens: null
-	};
-}
-var y = I();
-function W(l) {
-	y = l;
-}
-var A = { exec: () => null };
-function C(l) {
-	let e = [];
-	return (t) => {
-		let n = Math.max(0, Math.min(3, t - 1)), s = e[n];
-		return s || (s = l(n), e[n] = s), s;
-	};
-}
-function h(l, e = "") {
-	let t = typeof l == "string" ? l : l.source, n = {
-		replace: (s, r) => {
-			let o = typeof r == "string" ? r : r.source;
-			return o = o.replace(x.caret, "$1"), t = t.replace(s, o), n;
-		},
-		getRegex: () => new RegExp(t, e)
-	};
-	return n;
+	return n;
 }
 var _e = ((l = "") => {
 	try {
@@ -11076,333 +9224,2209 @@ var T = class l {
 					continue;
 				}
 			}
-			let o = r;
-			switch (o.type) {
-				case "escape":
-					n += t.text(o);
-					break;
-				case "html":
-					n += t.html(o);
-					break;
-				case "link":
-					n += t.link(o);
-					break;
-				case "image":
-					n += t.image(o);
-					break;
-				case "checkbox":
-					n += t.checkbox(o);
-					break;
-				case "strong":
-					n += t.strong(o);
-					break;
-				case "em":
-					n += t.em(o);
-					break;
-				case "codespan":
-					n += t.codespan(o);
-					break;
-				case "br":
-					n += t.br(o);
-					break;
-				case "del":
-					n += t.del(o);
-					break;
-				case "text":
-					n += t.text(o);
-					break;
-				default: {
-					let i = "Token with \"" + o.type + "\" type was not found.";
-					if (this.options.silent) return console.error(i), "";
-					throw new Error(i);
+			let o = r;
+			switch (o.type) {
+				case "escape":
+					n += t.text(o);
+					break;
+				case "html":
+					n += t.html(o);
+					break;
+				case "link":
+					n += t.link(o);
+					break;
+				case "image":
+					n += t.image(o);
+					break;
+				case "checkbox":
+					n += t.checkbox(o);
+					break;
+				case "strong":
+					n += t.strong(o);
+					break;
+				case "em":
+					n += t.em(o);
+					break;
+				case "codespan":
+					n += t.codespan(o);
+					break;
+				case "br":
+					n += t.br(o);
+					break;
+				case "del":
+					n += t.del(o);
+					break;
+				case "text":
+					n += t.text(o);
+					break;
+				default: {
+					let i = "Token with \"" + o.type + "\" type was not found.";
+					if (this.options.silent) return console.error(i), "";
+					throw new Error(i);
+				}
+			}
+		}
+		return n;
+	}
+};
+var _ = class {
+	options;
+	block;
+	constructor(e) {
+		this.options = e || y;
+	}
+	static passThroughHooks = /* @__PURE__ */ new Set([
+		"preprocess",
+		"postprocess",
+		"processAllTokens",
+		"emStrongMask"
+	]);
+	static passThroughHooksRespectAsync = /* @__PURE__ */ new Set([
+		"preprocess",
+		"postprocess",
+		"processAllTokens"
+	]);
+	preprocess(e) {
+		return e;
+	}
+	postprocess(e) {
+		return e;
+	}
+	processAllTokens(e) {
+		return e;
+	}
+	emStrongMask(e) {
+		return e;
+	}
+	provideLexer(e = this.block) {
+		return e ? R.lex : R.lexInline;
+	}
+	provideParser(e = this.block) {
+		return e ? T.parse : T.parseInline;
+	}
+};
+var F = class {
+	defaults = I();
+	options = this.setOptions;
+	parse = this.parseMarkdown(!0);
+	parseInline = this.parseMarkdown(!1);
+	Parser = T;
+	Renderer = S;
+	TextRenderer = z;
+	Lexer = R;
+	Tokenizer = P;
+	Hooks = _;
+	constructor(...e) {
+		this.use(...e);
+	}
+	walkTokens(e, t) {
+		let n = [];
+		for (let s of e) switch (n = n.concat(t.call(this, s)), s.type) {
+			case "table": {
+				let r = s;
+				for (let o of r.header) n = n.concat(this.walkTokens(o.tokens, t));
+				for (let o of r.rows) for (let i of o) n = n.concat(this.walkTokens(i.tokens, t));
+				break;
+			}
+			case "list": {
+				let r = s;
+				n = n.concat(this.walkTokens(r.items, t));
+				break;
+			}
+			default: {
+				let r = s;
+				this.defaults.extensions?.childTokens?.[r.type] ? this.defaults.extensions.childTokens[r.type].forEach((o) => {
+					let i = r[o].flat(1 / 0);
+					n = n.concat(this.walkTokens(i, t));
+				}) : r.tokens && (n = n.concat(this.walkTokens(r.tokens, t)));
+			}
+		}
+		return n;
+	}
+	use(...e) {
+		let t = this.defaults.extensions || {
+			renderers: {},
+			childTokens: {}
+		};
+		return e.forEach((n) => {
+			let s = { ...n };
+			if (s.async = this.defaults.async || s.async || !1, n.extensions && (n.extensions.forEach((r) => {
+				if (!r.name) throw new Error("extension name required");
+				if ("renderer" in r) {
+					let o = t.renderers[r.name];
+					o ? t.renderers[r.name] = function(...i) {
+						let u = r.renderer.apply(this, i);
+						return u === !1 && (u = o.apply(this, i)), u;
+					} : t.renderers[r.name] = r.renderer;
+				}
+				if ("tokenizer" in r) {
+					if (!r.level || r.level !== "block" && r.level !== "inline") throw new Error("extension level must be 'block' or 'inline'");
+					let o = t[r.level];
+					o ? o.unshift(r.tokenizer) : t[r.level] = [r.tokenizer], r.start && (r.level === "block" ? t.startBlock ? t.startBlock.push(r.start) : t.startBlock = [r.start] : r.level === "inline" && (t.startInline ? t.startInline.push(r.start) : t.startInline = [r.start]));
+				}
+				"childTokens" in r && r.childTokens && (t.childTokens[r.name] = r.childTokens);
+			}), s.extensions = t), n.renderer) {
+				let r = this.defaults.renderer || new S(this.defaults);
+				for (let o in n.renderer) {
+					if (!(o in r)) throw new Error(`renderer '${o}' does not exist`);
+					if (["options", "parser"].includes(o)) continue;
+					let i = o, u = n.renderer[i], a = r[i];
+					r[i] = (...p) => {
+						let c = u.apply(r, p);
+						return c === !1 && (c = a.apply(r, p)), c || "";
+					};
+				}
+				s.renderer = r;
+			}
+			if (n.tokenizer) {
+				let r = this.defaults.tokenizer || new P(this.defaults);
+				for (let o in n.tokenizer) {
+					if (!(o in r)) throw new Error(`tokenizer '${o}' does not exist`);
+					if ([
+						"options",
+						"rules",
+						"lexer"
+					].includes(o)) continue;
+					let i = o, u = n.tokenizer[i], a = r[i];
+					r[i] = (...p) => {
+						let c = u.apply(r, p);
+						return c === !1 && (c = a.apply(r, p)), c;
+					};
+				}
+				s.tokenizer = r;
+			}
+			if (n.hooks) {
+				let r = this.defaults.hooks || new _();
+				for (let o in n.hooks) {
+					if (!(o in r)) throw new Error(`hook '${o}' does not exist`);
+					if (["options", "block"].includes(o)) continue;
+					let i = o, u = n.hooks[i], a = r[i];
+					_.passThroughHooks.has(o) ? r[i] = (p) => {
+						if (this.defaults.async && _.passThroughHooksRespectAsync.has(o)) return (async () => {
+							let d = await u.call(r, p);
+							return a.call(r, d);
+						})();
+						let c = u.call(r, p);
+						return a.call(r, c);
+					} : r[i] = (...p) => {
+						if (this.defaults.async) return (async () => {
+							let d = await u.apply(r, p);
+							return d === !1 && (d = await a.apply(r, p)), d;
+						})();
+						let c = u.apply(r, p);
+						return c === !1 && (c = a.apply(r, p)), c;
+					};
 				}
+				s.hooks = r;
 			}
-		}
-		return n;
+			if (n.walkTokens) {
+				let r = this.defaults.walkTokens, o = n.walkTokens;
+				s.walkTokens = function(i) {
+					let u = [];
+					return u.push(o.call(this, i)), r && (u = u.concat(r.call(this, i))), u;
+				};
+			}
+			this.defaults = {
+				...this.defaults,
+				...s
+			};
+		}), this;
 	}
-};
-var _ = class {
-	options;
-	block;
-	constructor(e) {
-		this.options = e || y;
+	setOptions(e) {
+		return this.defaults = {
+			...this.defaults,
+			...e
+		}, this;
 	}
-	static passThroughHooks = /* @__PURE__ */ new Set([
-		"preprocess",
-		"postprocess",
-		"processAllTokens",
-		"emStrongMask"
-	]);
-	static passThroughHooksRespectAsync = /* @__PURE__ */ new Set([
-		"preprocess",
-		"postprocess",
-		"processAllTokens"
-	]);
-	preprocess(e) {
-		return e;
+	lexer(e, t) {
+		return R.lex(e, t ?? this.defaults);
 	}
-	postprocess(e) {
-		return e;
+	parser(e, t) {
+		return T.parse(e, t ?? this.defaults);
 	}
-	processAllTokens(e) {
-		return e;
+	parseMarkdown(e) {
+		return (n, s) => {
+			let r = { ...s }, o = {
+				...this.defaults,
+				...r
+			}, i = this.onError(!!o.silent, !!o.async);
+			if (this.defaults.async === !0 && r.async === !1) return i(/* @__PURE__ */ new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));
+			if (typeof n > "u" || n === null) return i(/* @__PURE__ */ new Error("marked(): input parameter is undefined or null"));
+			if (typeof n != "string") return i(/* @__PURE__ */ new Error("marked(): input parameter is of type " + Object.prototype.toString.call(n) + ", string expected"));
+			if (o.hooks && (o.hooks.options = o, o.hooks.block = e), o.async) return (async () => {
+				let u = o.hooks ? await o.hooks.preprocess(n) : n, p = await (o.hooks ? await o.hooks.provideLexer(e) : e ? R.lex : R.lexInline)(u, o), c = o.hooks ? await o.hooks.processAllTokens(p) : p;
+				o.walkTokens && await Promise.all(this.walkTokens(c, o.walkTokens));
+				let m = await (o.hooks ? await o.hooks.provideParser(e) : e ? T.parse : T.parseInline)(c, o);
+				return o.hooks ? await o.hooks.postprocess(m) : m;
+			})().catch(i);
+			try {
+				o.hooks && (n = o.hooks.preprocess(n));
+				let a = (o.hooks ? o.hooks.provideLexer(e) : e ? R.lex : R.lexInline)(n, o);
+				o.hooks && (a = o.hooks.processAllTokens(a)), o.walkTokens && this.walkTokens(a, o.walkTokens);
+				let c = (o.hooks ? o.hooks.provideParser(e) : e ? T.parse : T.parseInline)(a, o);
+				return o.hooks && (c = o.hooks.postprocess(c)), c;
+			} catch (u) {
+				return i(u);
+			}
+		};
+	}
+	onError(e, t) {
+		return (n) => {
+			if (n.message += `
+Please report this to https://github.com/markedjs/marked.`, e) {
+				let s = "<p>An error occurred:</p><pre>" + O(n.message + "", !0) + "</pre>";
+				return t ? Promise.resolve(s) : s;
+			}
+			if (t) return Promise.reject(n);
+			throw n;
+		};
+	}
+};
+var E = new F();
+function k(l, e) {
+	return E.parse(l, e);
+}
+k.options = k.setOptions = function(l) {
+	return E.setOptions(l), k.defaults = E.defaults, W(k.defaults), k;
+};
+k.getDefaults = I;
+k.defaults = y;
+function Pt(...l) {
+	return E.use(...l), k.defaults = E.defaults, W(k.defaults), k;
+}
+k.use = Pt;
+k.walkTokens = function(l, e) {
+	return E.walkTokens(l, e);
+};
+k.parseInline = E.parseInline;
+k.Parser = T;
+k.parser = T.parse;
+k.Renderer = S;
+k.TextRenderer = z;
+k.Lexer = R;
+k.lexer = R.lex;
+k.Tokenizer = P;
+k.Hooks = _;
+k.parse = k;
+k.options;
+k.setOptions;
+k.walkTokens;
+k.parseInline;
+T.parse;
+R.lex;
+//#endregion
+//#region viewer/src/components/markdown.tsx
+var SAFE_SCHEMES = /* @__PURE__ */ new Set([
+	"http:",
+	"https:",
+	"mailto:"
+]);
+/** http, https, mailto or relative. Browsers drop whitespace and control characters inside a scheme, so do we. */
+function isSafeHref(href) {
+	const bare = href.replace(/[\u0000- \u007f]/g, "");
+	const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(bare)?.[1];
+	return !scheme || SAFE_SCHEMES.has(`${scheme.toLowerCase()}:`);
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var markdown = new F({
+	gfm: true,
+	breaks: false
+}, { renderer: {
+	html: ({ text }) => escapeHtml(text),
+	link(token) {
+		return isSafeHref(token.href) ? false : this.parser.parseInline(token.tokens);
+	},
+	image(token) {
+		return isSafeHref(token.href) ? false : escapeHtml(token.text);
+	}
+} });
+function renderMarkdown(text) {
+	return markdown.parse(text, { async: false }).replace(/<a href=/g, "<a target=\"_blank\" rel=\"noreferrer\" href=");
+}
+/** Markdown from the project's own files (guidelines, notes, descriptions). */
+function Markdown({ text, className }) {
+	const html = useMemo(() => renderMarkdown(text), [text]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("prose", className),
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+//#endregion
+//#region viewer/src/lib/frames.ts
+/** Routes runtime messages to whoever listens to the frame that sent them. */
+var handlers = /* @__PURE__ */ new Map();
+window.addEventListener("message", (event) => {
+	const data = event.data;
+	if (data?.source !== "design-runtime" || !event.source) return;
+	for (const handler of handlers.get(event.source) ?? []) handler(data);
+});
+function listenToFrame(frame, handler) {
+	let win = null;
+	const detach = () => {
+		if (!win) return;
+		const set = handlers.get(win);
+		set?.delete(handler);
+		if (!set?.size) handlers.delete(win);
+		win = null;
+	};
+	const attach = () => {
+		detach();
+		win = frame.contentWindow;
+		if (!win) return;
+		const set = handlers.get(win) ?? /* @__PURE__ */ new Set();
+		set.add(handler);
+		handlers.set(win, set);
+	};
+	attach();
+	frame.addEventListener("load", attach);
+	return () => {
+		frame.removeEventListener("load", attach);
+		detach();
+	};
+}
+function sendToFrame(frame, message) {
+	frame?.contentWindow?.postMessage({
+		source: "design-viewer",
+		...message
+	}, "*");
+}
+/** Tell a frame it sits on the canvas, so it hands the wheel to the viewer. */
+function claimWheel(frame) {
+	sendToFrame(frame, { type: "canvas" });
+}
+/**
+* A wheel the frame had no use for (it reached its edge, or holds nothing that scrolls): scroll
+* whatever scrolls around the frame, as the browser would if the frame's edges passed it on.
+*/
+function scrollAround(frame, delta) {
+	for (let node = frame.parentElement; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		const scrolls = (overflow) => /(auto|scroll|overlay)/.test(overflow);
+		const y = scrolls(style.overflowY) && node.scrollHeight > node.clientHeight;
+		const x = scrolls(style.overflowX) && node.scrollWidth > node.clientWidth;
+		if (y || x) {
+			node.scrollBy({
+				left: x ? delta.deltaX : 0,
+				top: y ? delta.deltaY : 0,
+				behavior: "instant"
+			});
+			return;
+		}
 	}
-	emStrongMask(e) {
-		return e;
+	window.scrollBy({
+		left: delta.deltaX,
+		top: delta.deltaY,
+		behavior: "instant"
+	});
+}
+function sendTheme(frame, theme) {
+	sendToFrame(frame, {
+		type: "theme",
+		theme
+	});
+}
+/** Load the frame again; works whatever origin it is on. */
+function reloadFrame(frame) {
+	if (!frame) return;
+	frame.src = frame.src;
+}
+/**
+* Where the dev server's frames load from. Browsers give each site its own
+* process, so frames served from the viewer's twin host (localhost ↔ 127.0.0.1,
+* both reach the same server) run their scripts and animations off the viewer's
+* thread: a canvas full of live screens still pans smoothly. Any other host,
+* and static builds, keep frames on the viewer's origin.
+*/
+var FRAME_ORIGIN = (() => {
+	if (STATIC_SITE) return "";
+	const { protocol, hostname, port } = window.location;
+	const twin = hostname === "localhost" ? "127.0.0.1" : hostname === "127.0.0.1" ? "localhost" : null;
+	return twin ? `${protocol}//${twin}${port ? `:${port}` : ""}` : "";
+})();
+/** A frame URL with the theme it should open in. */
+function frameSrc(url, theme, extra) {
+	const [path = "", query = ""] = url.split("?");
+	const params = new URLSearchParams(query);
+	params.set("theme", theme);
+	for (const [key, value] of Object.entries(extra ?? {})) params.set(key, value);
+	return `${path.startsWith("/") ? FRAME_ORIGIN : ""}${path}?${params.toString()}`;
+}
+/** Absolute URL for opening a frame in a new tab. */
+function absoluteUrl(url) {
+	return new URL(url, document.baseURI).toString();
+}
+/**
+* A link, form or history push the runtime kept from leaving its frame. The path goes to the
+* screen whose `route` matches it best (a relative `href` resolves against the route of the
+* screen it is in); without routes, a path whose last part names a screen still opens it. A
+* link to another site opens in a new tab. A push nobody's route matches belongs to the
+* screen's own router; a link or form that leads nowhere stays put with a note.
+*/
+function followLink(message, canvas, go, from) {
+	if (message.form) {
+		toast("Forms are not sent from a screen", void 0, "info");
+		return;
 	}
-	provideLexer(e = this.block) {
-		return e ? R.lex : R.lexInline;
+	if (message.path === null) {
+		if (!isSafeHref(message.href) || !/^(https?|mailto):/i.test(message.href.trim())) {
+			toast("Link not opened", message.href.slice(0, 200), "info");
+			return;
+		}
+		if (!window.open(message.href, "_blank", "noopener,noreferrer")) toast("Link to another site", message.href, "info");
+		return;
 	}
-	provideParser(e = this.block) {
-		return e ? T.parse : T.parseInline;
+	const frames = canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url")));
+	const here = frames.find((item) => item.id === from);
+	const path = message.raw === void 0 ? message.path : linkPath(message.raw, here?.routes?.[0]);
+	if (path === null) return;
+	const routed = matchRoute(frames.map((item) => ({
+		routes: (item.routes ?? []).map(compileRoute),
+		value: item.id
+	})), path);
+	if (routed) {
+		if (routed !== from) go(routed);
+		return;
 	}
+	const bare = path.split(/[?#]/)[0].replace(/\/+$/, "");
+	let name = bare.slice(bare.lastIndexOf("/") + 1).replace(/\.html?$/, "");
+	try {
+		name = decodeURIComponent(name);
+	} catch {}
+	if (name && name !== from && frames.some((item) => item.id === name)) go(name);
+	else if (!message.pushed) toast("No screen for this link", path, "info");
+}
+//#endregion
+//#region viewer/src/components/inspector.tsx
+/**
+* Inspect frames: while `enabled`, every frame in `frames` highlights on hover
+* and picks on click. The inspecting runs inside each frame (see the runtime's
+* inspect.ts); this side only switches it and shows what the frames report.
+* The pick outlives `enabled` (so a quick ⌘-hold leaves the panel open) until
+* it is cleared.
+*/
+function useInspection(frames, enabled, options) {
+	const project = useProject().data;
+	const tokens = useSystem(!!project?.system).data?.tokens;
+	const [selected, setSelected] = useState(null);
+	const state = useRef({
+		enabled,
+		tokens
+	});
+	state.current = {
+		enabled,
+		tokens
+	};
+	const onEscape = useRef(options.onEscape);
+	onEscape.current = options.onEscape;
+	const framesRef = useRef(frames);
+	framesRef.current = frames;
+	const told = useRef(/* @__PURE__ */ new Map());
+	const tell = (frame, force = false) => {
+		const { enabled: on, tokens: list } = state.current;
+		const last = told.current.get(frame);
+		if (!force && last?.on === on && last.tokens === list) return;
+		told.current.set(frame, {
+			on,
+			tokens: list
+		});
+		sendToFrame(frame, {
+			type: "inspect",
+			on,
+			tokens: on ? list ?? [] : void 0
+		});
+	};
+	useEffect(() => {
+		for (const frame of frames) tell(frame);
+		for (const frame of told.current.keys()) if (!frames.includes(frame)) told.current.delete(frame);
+	}, [
+		frames,
+		enabled,
+		tokens
+	]);
+	useEffect(() => {
+		const offs = frames.map((frame) => listenToFrame(frame, (message) => {
+			if (message.type === "ready") {
+				if (state.current.enabled) tell(frame, true);
+				else told.current.set(frame, { on: false });
+			} else if (message.type === "inspect") {
+				if (message.info) {
+					for (const other of framesRef.current) if (other !== frame) sendToFrame(other, {
+						type: "inspect-select",
+						ref: null
+					});
+					setSelected({
+						info: message.info,
+						frame
+					});
+				} else setSelected((current) => current?.frame === frame ? null : current);
+			} else if (message.type === "inspect-escape") onEscape.current();
+		}));
+		return () => {
+			for (const off of offs) off();
+		};
+	}, [frames]);
+	const frame = selected && frames.includes(selected.frame) ? selected.frame : null;
+	return {
+		info: frame ? selected.info : null,
+		frame,
+		/** Pick another element in the same frame by its ref, or clear the pick. */
+		select(ref) {
+			if (ref === null) {
+				for (const each of framesRef.current) sendToFrame(each, {
+					type: "inspect-select",
+					ref: null
+				});
+				setSelected(null);
+			} else if (selected) sendToFrame(selected.frame, {
+				type: "inspect-select",
+				ref
+			});
+		}
+	};
+}
+/**
+* True while ⌘ or Ctrl is held on its own, in the viewer or inside any of
+* `frames`. A modifier used for a shortcut (⌘K, ⌘C) does not count.
+*/
+function useModifierHold(frames) {
+	const [held, setHeld] = useState(false);
+	useEffect(() => {
+		const isModifier = (key) => key === "Meta" || key === "Control";
+		let down = false;
+		let combo = false;
+		let timer;
+		const release = () => {
+			down = false;
+			clearTimeout(timer);
+			setHeld(false);
+		};
+		const press = (key) => {
+			if (isModifier(key)) {
+				if (down) return;
+				down = true;
+				combo = false;
+				timer = setTimeout(() => {
+					if (down && !combo) setHeld(true);
+				}, 150);
+			} else if (down) {
+				combo = true;
+				clearTimeout(timer);
+				setHeld(false);
+			}
+		};
+		const onDown = (event) => press(event.key);
+		const onUp = (event) => {
+			if (isModifier(event.key)) release();
+		};
+		window.addEventListener("keydown", onDown, true);
+		window.addEventListener("keyup", onUp, true);
+		window.addEventListener("blur", release);
+		const offs = frames.map((frame) => listenToFrame(frame, (message) => {
+			if (message.type === "key") {
+				if (message.down) press(message.name);
+				else if (isModifier(message.name)) release();
+			} else if (message.type === "blur") release();
+		}));
+		return () => {
+			window.removeEventListener("keydown", onDown, true);
+			window.removeEventListener("keyup", onUp, true);
+			window.removeEventListener("blur", release);
+			for (const off of offs) off();
+			clearTimeout(timer);
+		};
+	}, [frames]);
+	return held;
+}
+function Section({ title, children, right }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "border-t border-rule pb-2 first:border-t-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-9 items-center justify-between px-4 text-[12px] font-medium text-muted",
+			children: [title, right]
+		}), children]
+	});
+}
+function Line({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid min-h-7 grid-cols-[92px_minmax(0,1fr)] items-center gap-x-3 px-4 py-0.5 text-[12.5px]",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center gap-1.5 text-ink",
+			children
+		})]
+	});
+}
+function TokenChip({ name }) {
+	if (!name) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: () => void copyText(`var(${name})`, "Token copied"),
+		title: "Copy var()",
+		className: "shrink-0 cursor-pointer truncate rounded-[4px] border-0 bg-action-soft px-1.5 py-px font-mono text-[11px] text-action",
+		children: name
+	});
+}
+function Value$1({ children, title }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate font-mono text-[12px]",
+		title,
+		children
+	});
+}
+function ColorLine({ label, color }) {
+	return /* @__PURE__ */ jsxs(Line, {
+		label,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "size-3.5 shrink-0 rounded-[3px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+				style: { background: color.css }
+			}),
+			/* @__PURE__ */ jsx(Value$1, {
+				title: color.css,
+				children: color.value
+			}),
+			/* @__PURE__ */ jsx(TokenChip, { name: color.token })
+		]
+	});
+}
+var dash = (value) => value ? String(value) : "–";
+function Layer({ label, values, className, children }) {
+	const [top, right, bottom, left] = values;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative grid grid-cols-[28px_minmax(0,1fr)_28px] grid-rows-[20px_auto_20px] rounded-[4px]", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "absolute top-1 left-1.5 text-[9.5px] tracking-wide text-muted uppercase",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "col-start-2 self-center text-center",
+				children: dash(top)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "row-start-2 self-center text-center",
+				children: dash(left)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "row-start-2 col-start-2",
+				children
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "row-start-2 col-start-3 self-center text-center",
+				children: dash(right)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "row-start-3 col-start-2 self-center text-center",
+				children: dash(bottom)
+			})
+		]
+	});
+}
+function BoxModel({ info }) {
+	const content = {
+		w: Math.max(0, info.rect.w - info.border[1] - info.border[3] - info.padding[1] - info.padding[3]),
+		h: Math.max(0, info.rect.h - info.border[0] - info.border[2] - info.padding[0] - info.padding[2])
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-4 pt-1 pb-2 font-mono text-[11px] text-ink2",
+		children: /* @__PURE__ */ jsx(Layer, {
+			label: "margin",
+			values: info.margin,
+			className: "border border-dashed border-rule-strong bg-[#f6b26b]/15",
+			children: /* @__PURE__ */ jsx(Layer, {
+				label: "border",
+				values: info.border,
+				className: "border border-rule-strong bg-[#f9e27d]/15",
+				children: /* @__PURE__ */ jsx(Layer, {
+					label: "padding",
+					values: info.padding,
+					className: "border border-rule-strong bg-[#93c47d]/20",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex h-8 items-center justify-center rounded-[3px] border border-rule-strong bg-[#6fa8dc]/25 text-ink",
+						children: [
+							Math.round(content.w * 100) / 100,
+							" × ",
+							Math.round(content.h * 100) / 100
+						]
+					})
+				})
+			})
+		})
+	});
+}
+function Crumbs({ info, onSelect }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-1 px-4 pb-2",
+		children: [info.path.slice(-4).map((crumb, index) => /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => onSelect(crumb.ref),
+				className: "cursor-pointer rounded-[4px] border-0 bg-soft2 px-1.5 py-0.5 font-mono text-[11px] text-ink2 hover:text-ink",
+				children: crumb.label
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "chevron-right",
+				size: 11,
+				className: "text-muted"
+			})]
+		}, index)), /* @__PURE__ */ jsx("span", {
+			className: "rounded-[4px] bg-action-soft px-1.5 py-0.5 font-mono text-[11px] text-action",
+			children: info.label
+		})]
+	});
+}
+/** The right sidebar: what the selected element is and how it is styled. */
+function InspectorPanel({ info, onSelect, onClose, active }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		"data-ui": true,
+		className: "flex w-[320px] shrink-0 flex-col overflow-hidden border-l border-rule bg-surface",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-[46px] shrink-0 items-center justify-between border-b border-rule pr-2 pl-4",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2 text-[14px] font-semibold",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "pointer",
+						size: 15,
+						className: "text-action"
+					}), " Inspect"]
+				}), /* @__PURE__ */ jsx(IconButton, {
+					icon: "x",
+					label: "Close inspector (I)",
+					onClick: onClose
+				})]
+			}),
+			!info ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-2 px-6 py-10 text-center",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "pointer",
+						size: 22,
+						className: "text-muted"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[13.5px] text-ink2",
+						children: active ? "Click an element in any screen." : `Hold ${MOD_KEY} to highlight, click to inspect.`
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[12.5px] leading-[1.5] text-muted",
+						children: "Hover shows margin, padding and content. Clicks go to the inspector, not the screen."
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "mt-2 flex items-center gap-1.5 text-[12px] text-muted",
+						children: [
+							/* @__PURE__ */ jsx(Kbd, { children: "I" }),
+							" toggle · hold ",
+							/* @__PURE__ */ jsx(Kbd, { children: MOD_KEY }),
+							" · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "esc" }),
+							" clear"
+						]
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 grow overflow-y-auto",
+				children: [
+					/* @__PURE__ */ jsxs(Section, {
+						title: "Element",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1 px-4 pb-2",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "flex min-w-0 items-baseline gap-1.5",
+									children: info.component?.owners[0] ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+										className: "truncate font-mono text-[14px] font-medium text-ink",
+										children: [
+											"<",
+											info.component.owners[0],
+											">"
+										]
+									}), /* @__PURE__ */ jsx("span", {
+										className: "truncate font-mono text-[12px] text-muted",
+										children: info.tag
+									})] }) : /* @__PURE__ */ jsx("span", {
+										className: "truncate font-mono text-[14px] font-medium text-ink",
+										children: info.label
+									})
+								}),
+								info.component && info.component.owners.length > 1 ? /* @__PURE__ */ jsxs("span", {
+									className: "truncate text-[12px] text-muted",
+									children: ["in ", info.component.owners.slice(1).join(" ← ")]
+								}) : null,
+								info.component?.file ? /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => void copyText(info.component.file, "Path copied"),
+									className: "w-fit max-w-full cursor-pointer truncate border-0 bg-transparent p-0 text-left font-mono text-[11.5px] text-muted hover:text-ink2",
+									title: "Copy path",
+									children: info.component.file
+								}) : null,
+								info.text ? /* @__PURE__ */ jsxs("span", {
+									className: "line-clamp-2 text-[12.5px] text-ink2",
+									children: [
+										"“",
+										info.text,
+										"”"
+									]
+								}) : null
+							]
+						}), /* @__PURE__ */ jsx(Crumbs, {
+							info,
+							onSelect
+						})]
+					}),
+					/* @__PURE__ */ jsxs(Section, {
+						title: "Box",
+						children: [
+							/* @__PURE__ */ jsx(BoxModel, { info }),
+							/* @__PURE__ */ jsx(Line, {
+								label: "Size",
+								children: /* @__PURE__ */ jsxs(Value$1, { children: [
+									info.rect.w,
+									" × ",
+									info.rect.h
+								] })
+							}),
+							/* @__PURE__ */ jsx(Line, {
+								label: "Position",
+								children: /* @__PURE__ */ jsxs(Value$1, { children: [
+									"x ",
+									info.rect.x,
+									" · y ",
+									info.rect.y
+								] })
+							})
+						]
+					}),
+					info.layout.length ? /* @__PURE__ */ jsx(Section, {
+						title: "Layout",
+						children: info.layout.map(([label, value]) => /* @__PURE__ */ jsx(Line, {
+							label,
+							children: /* @__PURE__ */ jsx(Value$1, {
+								title: value,
+								children: value
+							})
+						}, label))
+					}) : null,
+					info.typography ? /* @__PURE__ */ jsxs(Section, {
+						title: "Typography",
+						children: [
+							/* @__PURE__ */ jsxs(Line, {
+								label: "Font",
+								children: [/* @__PURE__ */ jsx(Value$1, {
+									title: info.typography.family,
+									children: info.typography.family.split(",")[0]?.replace(/["']/g, "")
+								}), /* @__PURE__ */ jsx(TokenChip, { name: info.typography.familyToken })]
+							}),
+							/* @__PURE__ */ jsxs(Line, {
+								label: "Size",
+								children: [/* @__PURE__ */ jsxs(Value$1, { children: [
+									info.typography.size,
+									" / ",
+									info.typography.lineHeight
+								] }), /* @__PURE__ */ jsx(TokenChip, { name: info.typography.sizeToken })]
+							}),
+							/* @__PURE__ */ jsx(Line, {
+								label: "Weight",
+								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.weight })
+							}),
+							info.typography.letterSpacing !== "normal" ? /* @__PURE__ */ jsx(Line, {
+								label: "Tracking",
+								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.letterSpacing })
+							}) : null,
+							/* @__PURE__ */ jsx(ColorLine, {
+								label: "Color",
+								color: info.typography.color
+							}),
+							info.typography.align !== "start" ? /* @__PURE__ */ jsx(Line, {
+								label: "Align",
+								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.align })
+							}) : null,
+							info.typography.transform ? /* @__PURE__ */ jsx(Line, {
+								label: "Transform",
+								children: /* @__PURE__ */ jsx(Value$1, { children: info.typography.transform })
+							}) : null
+						]
+					}) : null,
+					Object.values(info.appearance).some(Boolean) ? /* @__PURE__ */ jsxs(Section, {
+						title: "Appearance",
+						children: [
+							info.appearance.background ? /* @__PURE__ */ jsx(ColorLine, {
+								label: "Background",
+								color: info.appearance.background
+							}) : null,
+							info.appearance.backgroundImage ? /* @__PURE__ */ jsx(Line, {
+								label: "Image",
+								children: /* @__PURE__ */ jsx(Value$1, {
+									title: info.appearance.backgroundImage,
+									children: info.appearance.backgroundImage
+								})
+							}) : null,
+							info.appearance.border ? /* @__PURE__ */ jsxs(Line, {
+								label: "Border",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "size-3.5 shrink-0 rounded-[3px] shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+										style: { background: info.appearance.border.color.css }
+									}),
+									/* @__PURE__ */ jsxs(Value$1, { children: [
+										info.appearance.border.width,
+										" ",
+										info.appearance.border.style,
+										" ",
+										info.appearance.border.color.value
+									] }),
+									/* @__PURE__ */ jsx(TokenChip, { name: info.appearance.border.color.token })
+								]
+							}) : null,
+							info.appearance.radius ? /* @__PURE__ */ jsxs(Line, {
+								label: "Radius",
+								children: [/* @__PURE__ */ jsx(Value$1, { children: info.appearance.radius.value }), /* @__PURE__ */ jsx(TokenChip, { name: info.appearance.radius.token })]
+							}) : null,
+							info.appearance.shadow ? /* @__PURE__ */ jsxs(Line, {
+								label: "Shadow",
+								children: [/* @__PURE__ */ jsx(Value$1, {
+									title: info.appearance.shadow.value,
+									children: info.appearance.shadow.value
+								}), /* @__PURE__ */ jsx(TokenChip, { name: info.appearance.shadow.token })]
+							}) : null,
+							info.appearance.opacity ? /* @__PURE__ */ jsx(Line, {
+								label: "Opacity",
+								children: /* @__PURE__ */ jsx(Value$1, { children: info.appearance.opacity })
+							}) : null
+						]
+					}) : null,
+					info.classes.length ? /* @__PURE__ */ jsx(Section, {
+						title: "Classes",
+						right: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => void copyText(info.classes.join(" "), "Classes copied"),
+							className: "cursor-pointer border-0 bg-transparent text-[12px] text-muted hover:text-ink2",
+							children: "Copy"
+						}),
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-wrap gap-1 px-4 pb-1",
+							children: info.classes.map((name) => /* @__PURE__ */ jsx("span", {
+								className: "rounded-[4px] bg-soft2 px-1.5 py-0.5 font-mono text-[11px] text-ink2",
+								children: name
+							}, name))
+						})
+					}) : null,
+					info.attributes.length ? /* @__PURE__ */ jsx(Section, {
+						title: "Attributes",
+						children: info.attributes.map(([name, value]) => /* @__PURE__ */ jsx(Line, {
+							label: name,
+							children: /* @__PURE__ */ jsx(Value$1, {
+								title: value,
+								children: value
+							})
+						}, name))
+					}) : null,
+					info.children.length ? /* @__PURE__ */ jsx(Section, {
+						title: `Children · ${info.children.length}`,
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col px-2 pb-1",
+							children: info.children.map((child, index) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => onSelect(child.ref),
+								className: "flex h-7 cursor-pointer items-center gap-2 rounded-[6px] border-0 bg-transparent px-2 text-left font-mono text-[12px] text-ink2 hover:bg-soft2",
+								children: [/* @__PURE__ */ jsx(Icon, {
+									name: "chevron-right",
+									size: 12,
+									className: "text-muted"
+								}), /* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: child.label
+								})]
+							}, index))
+						})
+					}) : null
+				]
+			}),
+			info ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2 border-t border-rule bg-soft px-4 py-2.5",
+				children: /* @__PURE__ */ jsx(Button, {
+					icon: "copy",
+					onClick: () => void copyText(info.css, "CSS copied"),
+					className: "grow",
+					children: "Copy CSS"
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+//#region viewer/src/ui/badge.tsx
+var BADGE = {
+	neutral: "bg-soft2 text-ink2",
+	action: "bg-action-soft text-action",
+	ok: "bg-ok-soft text-ok-text",
+	danger: "bg-danger-soft text-danger-text"
 };
-var F = class {
-	defaults = I();
-	options = this.setOptions;
-	parse = this.parseMarkdown(!0);
-	parseInline = this.parseMarkdown(!1);
-	Parser = T;
-	Renderer = S;
-	TextRenderer = z;
-	Lexer = R;
-	Tokenizer = P;
-	Hooks = _;
-	constructor(...e) {
-		this.use(...e);
-	}
-	walkTokens(e, t) {
-		let n = [];
-		for (let s of e) switch (n = n.concat(t.call(this, s)), s.type) {
-			case "table": {
-				let r = s;
-				for (let o of r.header) n = n.concat(this.walkTokens(o.tokens, t));
-				for (let o of r.rows) for (let i of o) n = n.concat(this.walkTokens(i.tokens, t));
-				break;
-			}
-			case "list": {
-				let r = s;
-				n = n.concat(this.walkTokens(r.items, t));
-				break;
-			}
-			default: {
-				let r = s;
-				this.defaults.extensions?.childTokens?.[r.type] ? this.defaults.extensions.childTokens[r.type].forEach((o) => {
-					let i = r[o].flat(1 / 0);
-					n = n.concat(this.walkTokens(i, t));
-				}) : r.tokens && (n = n.concat(this.walkTokens(r.tokens, t)));
-			}
-		}
-		return n;
+function Badge({ tone = "neutral", children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex h-[22px] shrink-0 items-center gap-1 whitespace-nowrap rounded-[6px] px-2 text-[12px] font-medium", BADGE[tone], className),
+		children
+	});
+}
+function Count({ value, tone = "neutral" }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[4px] px-[5px] text-[11.5px] font-semibold tabular", tone === "action" ? "bg-action-soft text-action" : tone === "danger" ? "bg-danger-soft text-danger-text" : "bg-soft2 text-ink2"),
+		children: value
+	});
+}
+//#endregion
+//#region viewer/src/ui/panel.tsx
+function Panel({ children, className, style }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cn("min-w-0 shrink-0 overflow-hidden rounded-[10px] border border-rule bg-surface", className),
+		style,
+		children
+	});
+}
+function PanelHead({ title, count, sub, right, as: Heading = "h2" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-[46px] items-center justify-between gap-3 px-4",
+		children: [/* @__PURE__ */ jsxs(Heading, {
+			className: "m-0 flex min-w-0 items-center gap-2 whitespace-nowrap text-[14px] font-semibold",
+			children: [
+				title,
+				count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: count }) : null,
+				sub ? /* @__PURE__ */ jsx("span", {
+					className: "truncate text-[12.5px] font-normal text-muted",
+					children: sub
+				}) : null
+			]
+		}), right ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: right
+		}) : null]
+	});
+}
+function PanelTabs({ items, value, onChange, right }) {
+	const indicator = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-[46px] items-center justify-between gap-3 px-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			className: "flex gap-5",
+			children: items.map((item) => {
+				const on = item.value === value;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": on,
+					onClick: () => onChange(item.value),
+					className: cn("relative flex h-[46px] cursor-pointer items-center gap-1.5 border-0 bg-transparent px-0.5 text-[14px] transition-colors", on ? "font-semibold text-ink" : "font-medium text-ink2 hover:text-ink"),
+					children: [
+						item.label,
+						item.count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null,
+						on ? /* @__PURE__ */ jsx(motion.span, {
+							layoutId: indicator,
+							className: "absolute inset-x-0 bottom-0 h-[2px] bg-ink",
+							transition: {
+								type: "spring",
+								stiffness: 520,
+								damping: 42
+							}
+						}) : null
+					]
+				}, item.value);
+			})
+		}), right ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: right
+		}) : null]
+	});
+}
+function Cell({ align, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 items-center gap-2", align === "r" && "justify-end text-right", align === "c" && "justify-center"),
+		children
+	});
+}
+function cells(children, align) {
+	return Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx(Cell, {
+		align: align?.[index] ?? "l",
+		children: child
+	}, index));
+}
+function THead({ cols, align, labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid h-8 items-center gap-x-4 border-t border-rule bg-soft px-4 text-[12.5px] text-muted",
+		style: { gridTemplateColumns: cols },
+		children: labels.map((label, index) => /* @__PURE__ */ jsx(Cell, {
+			align: align?.[index] ?? "l",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap",
+				children: label
+			})
+		}, index))
+	});
+}
+var rowClass = (first, interactive, className) => cn("grid items-center gap-x-4 border-rule", !first && "border-t", interactive && "cursor-pointer transition-colors hover:bg-soft", className);
+function Row({ cols, align, minH = 44, pad = "10px 16px", children, first, className, onClick, title }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: rowClass(first, !!onClick, className),
+		style: {
+			gridTemplateColumns: cols,
+			minHeight: minH,
+			padding: pad
+		},
+		onClick,
+		title,
+		children: cells(children, align)
+	});
+}
+/** A table row that navigates somewhere in the app. */
+function RowLink({ to, cols, align, minH = 44, pad = "10px 16px", first, className, children }) {
+	return /* @__PURE__ */ jsx(Link, {
+		href: to,
+		className: cn(rowClass(first, true, className), "text-inherit no-underline"),
+		style: {
+			gridTemplateColumns: cols,
+			minHeight: minH,
+			padding: pad
+		},
+		children: cells(children, align)
+	});
+}
+function KV({ label, children, labelWidth = 180, minH = 40, end = false }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid content-center items-baseline gap-x-4 border-t border-rule px-4 py-2",
+		style: {
+			gridTemplateColumns: `min(${labelWidth}px, 42%) minmax(0, 1fr)`,
+			minHeight: minH
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[13px] text-muted",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("flex min-w-0 flex-wrap items-center gap-2", end && "justify-end"),
+			children
+		})]
+	});
+}
+function PanelBody({ children, pad = "16px", gap = 16, top = true, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col", top && "border-t border-rule", className),
+		style: {
+			padding: pad,
+			gap
+		},
+		children
+	});
+}
+function PanelFoot({ left, right }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-3 border-t border-rule bg-soft px-4 py-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center gap-2 text-[12.5px] text-muted",
+			children: left
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2",
+			children: right
+		})]
+	});
+}
+/** Bottom summary strip. */
+function Strip({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-[38px] shrink-0 items-center gap-2 border-t border-rule bg-soft px-4 py-2 text-[12.5px] text-muted", className),
+		children
+	});
+}
+/** Group header row inside tables. */
+function GroupRow({ children, sub }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-9 items-center gap-2.5 border-t border-rule bg-soft px-4 text-[13px] font-medium",
+		children: [children, sub ? /* @__PURE__ */ jsx("span", {
+			className: "text-[12.5px] font-normal text-muted",
+			children: sub
+		}) : null]
+	});
+}
+//#endregion
+//#region viewer/src/components/issues.tsx
+function IssueList({ issues, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col", className),
+		children: issues.map((issue, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2.5 border-t border-rule px-4 py-2.5 text-[13px] first:border-t-0",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: issue.severity === "error" ? "alert" : "info",
+				size: 15,
+				className: cn("mt-0.5", issue.severity === "error" ? "text-danger-text" : "text-action")
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-ink",
+					children: issue.message
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-mono text-[12px] break-all text-muted",
+					children: [issue.file, issue.at ? ` · ${issue.at}` : ""]
+				})]
+			})]
+		}, index))
+	});
+}
+/** Problems found in the project's files, as a panel. */
+function IssuesPanel({ issues, title = "Problems" }) {
+	if (!issues.length) return null;
+	const errors = issues.filter((issue) => issue.severity === "error").length;
+	return /* @__PURE__ */ jsxs(Panel, {
+		className: errors ? "border-danger/40" : void 0,
+		children: [/* @__PURE__ */ jsx(PanelHead, {
+			title,
+			count: issues.length,
+			sub: errors ? `${errors} blocking` : "warnings"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "border-t border-rule",
+			children: /* @__PURE__ */ jsx(IssueList, { issues })
+		})]
+	});
+}
+//#endregion
+//#region viewer/src/components/slide-panel.tsx
+var EASE = [
+	.2,
+	.7,
+	.2,
+	1
+];
+/**
+* A side panel that slides open and shut. The wrapper animates its width while
+* the content keeps its own, so nothing inside reflows mid-animation.
+*/
+function SlidePanel({ open, side, width, children }) {
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: open ? /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				width: 0,
+				opacity: .6
+			},
+			animate: {
+				width,
+				opacity: 1
+			},
+			exit: {
+				width: 0,
+				opacity: .6
+			},
+			transition: {
+				duration: .22,
+				ease: EASE
+			},
+			className: cn("flex min-h-0 shrink-0 overflow-hidden", side === "right" ? "justify-start" : "justify-end"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 shrink-0",
+				style: { width },
+				children
+			})
+		}, "panel") : null
+	});
+}
+//#endregion
+//#region viewer/src/ui/page.tsx
+/** Page body under the top bar. */
+function Content({ children, className, gap = 20, wide = false }) {
+	return /* @__PURE__ */ jsx("main", {
+		className: cn("mx-auto flex w-full min-h-0 grow flex-col px-8 pt-6 pb-7 animate-[q-fade-in_160ms_ease-out] max-md:px-4 max-md:pt-4", wide ? "max-w-[1440px]" : "max-w-[1200px]", className),
+		style: { gap },
+		children
+	});
+}
+function PageHead({ title, sub, right, badge, crumbs }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-end justify-between gap-6 max-md:flex-col max-md:items-stretch max-md:gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1",
+			children: [
+				crumbs ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5 text-[13px] text-muted",
+					children: crumbs
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "m-0 text-[22px] font-semibold tracking-[-0.01em]",
+						children: title
+					}), badge]
+				}),
+				sub ? /* @__PURE__ */ jsx("div", {
+					className: "text-[13px] [overflow-wrap:anywhere] text-muted",
+					children: sub
+				}) : null
+			]
+		}), right ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: right
+		}) : null]
+	});
+}
+function SubNav({ items, label }) {
+	const [location] = useLocation();
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": label,
+		className: "flex flex-col gap-0.5",
+		children: items.map((item) => {
+			const active = location === item.to;
+			return /* @__PURE__ */ jsxs(Link, {
+				href: item.to,
+				"aria-current": active ? "page" : void 0,
+				className: cn("relative flex h-8 items-center gap-2 whitespace-nowrap rounded-[6px] px-3 text-[13.5px] no-underline transition-colors focus-visible:outline-offset-[-2px]", active ? "font-medium text-ink" : "text-ink2 hover:bg-soft2"),
+				children: [
+					active ? /* @__PURE__ */ jsx(motion.span, {
+						layoutId: "sub-nav-active",
+						"aria-hidden": true,
+						className: "absolute inset-0 z-0 rounded-[6px] bg-soft2",
+						transition: {
+							type: "spring",
+							stiffness: 520,
+							damping: 42
+						}
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						className: "relative z-[1] min-w-0 truncate",
+						children: item.label
+					}),
+					item.hint ? /* @__PURE__ */ jsx("span", {
+						className: "relative z-[1] ml-auto text-[12px] font-normal text-muted",
+						children: item.hint
+					}) : null
+				]
+			}, item.to);
+		})
+	});
+}
+function NavLabel({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-3 pt-4 pb-1 text-[12px] text-muted",
+		children
+	});
+}
+/** Standalone message card: not found, empty, failed to load. */
+function NoticeCard({ title, text, action }) {
+	return /* @__PURE__ */ jsxs(Panel, {
+		className: "flex w-[480px] max-w-full flex-col items-center gap-2 px-6 py-8 text-center",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "m-0 text-[16px] font-semibold",
+				children: title
+			}),
+			text ? /* @__PURE__ */ jsx("div", {
+				className: "m-0 max-w-[400px] text-[14px] text-ink2",
+				children: text
+			}) : null,
+			action ? /* @__PURE__ */ jsx("div", {
+				className: "mt-3 flex flex-wrap justify-center gap-2",
+				children: action
+			}) : null
+		]
+	});
+}
+/** NoticeCard centred in the free space. */
+function Notice(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-[50vh] grow items-center justify-center p-6 max-md:px-4",
+		children: /* @__PURE__ */ jsx(NoticeCard, { ...props })
+	});
+}
+//#endregion
+//#region viewer/src/pages/not-found.tsx
+function NotFound({ title = "Nothing here", text }) {
+	const scoped = !!useViewer().scope;
+	return /* @__PURE__ */ jsx(Notice, {
+		title,
+		text: text ?? "This address does not match a canvas or a page of the design system.",
+		action: scoped ? void 0 : /* @__PURE__ */ jsx(ButtonLink, {
+			to: "/",
+			children: "All canvases"
+		})
+	});
+}
+//#endregion
+//#region viewer/src/pages/canvas/camera.ts
+/** The farthest out the camera goes; past it a page is specks, and every one of them still costs. */
+var MIN_ZOOM = .1;
+var clampZoom = (z, min = MIN_ZOOM) => Math.min(8, Math.max(min, z));
+/** The canvas camera. Lives outside React so panning never re-renders the tree. */
+var CameraStore = class {
+	camera = {
+		x: 0,
+		y: 0,
+		z: 1
+	};
+	/** How far out the camera may go; the viewport sets it from the size of the page. */
+	minZoom = MIN_ZOOM;
+	listeners = /* @__PURE__ */ new Set();
+	animation = 0;
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
 	}
-	use(...e) {
-		let t = this.defaults.extensions || {
-			renderers: {},
-			childTokens: {}
+	set(next) {
+		this.camera = {
+			x: next.x,
+			y: next.y,
+			z: clampZoom(next.z, this.minZoom)
 		};
-		return e.forEach((n) => {
-			let s = { ...n };
-			if (s.async = this.defaults.async || s.async || !1, n.extensions && (n.extensions.forEach((r) => {
-				if (!r.name) throw new Error("extension name required");
-				if ("renderer" in r) {
-					let o = t.renderers[r.name];
-					o ? t.renderers[r.name] = function(...i) {
-						let u = r.renderer.apply(this, i);
-						return u === !1 && (u = o.apply(this, i)), u;
-					} : t.renderers[r.name] = r.renderer;
-				}
-				if ("tokenizer" in r) {
-					if (!r.level || r.level !== "block" && r.level !== "inline") throw new Error("extension level must be 'block' or 'inline'");
-					let o = t[r.level];
-					o ? o.unshift(r.tokenizer) : t[r.level] = [r.tokenizer], r.start && (r.level === "block" ? t.startBlock ? t.startBlock.push(r.start) : t.startBlock = [r.start] : r.level === "inline" && (t.startInline ? t.startInline.push(r.start) : t.startInline = [r.start]));
-				}
-				"childTokens" in r && r.childTokens && (t.childTokens[r.name] = r.childTokens);
-			}), s.extensions = t), n.renderer) {
-				let r = this.defaults.renderer || new S(this.defaults);
-				for (let o in n.renderer) {
-					if (!(o in r)) throw new Error(`renderer '${o}' does not exist`);
-					if (["options", "parser"].includes(o)) continue;
-					let i = o, u = n.renderer[i], a = r[i];
-					r[i] = (...p) => {
-						let c = u.apply(r, p);
-						return c === !1 && (c = a.apply(r, p)), c || "";
-					};
-				}
-				s.renderer = r;
-			}
-			if (n.tokenizer) {
-				let r = this.defaults.tokenizer || new P(this.defaults);
-				for (let o in n.tokenizer) {
-					if (!(o in r)) throw new Error(`tokenizer '${o}' does not exist`);
-					if ([
-						"options",
-						"rules",
-						"lexer"
-					].includes(o)) continue;
-					let i = o, u = n.tokenizer[i], a = r[i];
-					r[i] = (...p) => {
-						let c = u.apply(r, p);
-						return c === !1 && (c = a.apply(r, p)), c;
-					};
-				}
-				s.tokenizer = r;
-			}
-			if (n.hooks) {
-				let r = this.defaults.hooks || new _();
-				for (let o in n.hooks) {
-					if (!(o in r)) throw new Error(`hook '${o}' does not exist`);
-					if (["options", "block"].includes(o)) continue;
-					let i = o, u = n.hooks[i], a = r[i];
-					_.passThroughHooks.has(o) ? r[i] = (p) => {
-						if (this.defaults.async && _.passThroughHooksRespectAsync.has(o)) return (async () => {
-							let d = await u.call(r, p);
-							return a.call(r, d);
-						})();
-						let c = u.call(r, p);
-						return a.call(r, c);
-					} : r[i] = (...p) => {
-						if (this.defaults.async) return (async () => {
-							let d = await u.apply(r, p);
-							return d === !1 && (d = await a.apply(r, p)), d;
-						})();
-						let c = u.apply(r, p);
-						return c === !1 && (c = a.apply(r, p)), c;
-					};
-				}
-				s.hooks = r;
-			}
-			if (n.walkTokens) {
-				let r = this.defaults.walkTokens, o = n.walkTokens;
-				s.walkTokens = function(i) {
-					let u = [];
-					return u.push(o.call(this, i)), r && (u = u.concat(r.call(this, i))), u;
-				};
-			}
-			this.defaults = {
-				...this.defaults,
-				...s
-			};
-		}), this;
+		for (const listener of this.listeners) listener(this.camera);
 	}
-	setOptions(e) {
-		return this.defaults = {
-			...this.defaults,
-			...e
-		}, this;
+	/** Stop any animation: the user took over. */
+	interrupt() {
+		cancelAnimationFrame(this.animation);
+		this.animation = 0;
 	}
-	lexer(e, t) {
-		return R.lex(e, t ?? this.defaults);
+	panBy(dx, dy) {
+		this.interrupt();
+		const { x, y, z } = this.camera;
+		this.set({
+			x: x + dx,
+			y: y + dy,
+			z
+		});
 	}
-	parser(e, t) {
-		return T.parse(e, t ?? this.defaults);
+	/** Zoom by `factor` keeping the screen point (sx, sy) in place. */
+	zoomAt(sx, sy, factor) {
+		this.interrupt();
+		const { x, y, z } = this.camera;
+		const next = clampZoom(z * factor, this.minZoom);
+		const wx = (sx - x) / z;
+		const wy = (sy - y) / z;
+		this.set({
+			x: sx - wx * next,
+			y: sy - wy * next,
+			z: next
+		});
 	}
-	parseMarkdown(e) {
-		return (n, s) => {
-			let r = { ...s }, o = {
-				...this.defaults,
-				...r
-			}, i = this.onError(!!o.silent, !!o.async);
-			if (this.defaults.async === !0 && r.async === !1) return i(/* @__PURE__ */ new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));
-			if (typeof n > "u" || n === null) return i(/* @__PURE__ */ new Error("marked(): input parameter is undefined or null"));
-			if (typeof n != "string") return i(/* @__PURE__ */ new Error("marked(): input parameter is of type " + Object.prototype.toString.call(n) + ", string expected"));
-			if (o.hooks && (o.hooks.options = o, o.hooks.block = e), o.async) return (async () => {
-				let u = o.hooks ? await o.hooks.preprocess(n) : n, p = await (o.hooks ? await o.hooks.provideLexer(e) : e ? R.lex : R.lexInline)(u, o), c = o.hooks ? await o.hooks.processAllTokens(p) : p;
-				o.walkTokens && await Promise.all(this.walkTokens(c, o.walkTokens));
-				let m = await (o.hooks ? await o.hooks.provideParser(e) : e ? T.parse : T.parseInline)(c, o);
-				return o.hooks ? await o.hooks.postprocess(m) : m;
-			})().catch(i);
-			try {
-				o.hooks && (n = o.hooks.preprocess(n));
-				let a = (o.hooks ? o.hooks.provideLexer(e) : e ? R.lex : R.lexInline)(n, o);
-				o.hooks && (a = o.hooks.processAllTokens(a)), o.walkTokens && this.walkTokens(a, o.walkTokens);
-				let c = (o.hooks ? o.hooks.provideParser(e) : e ? T.parse : T.parseInline)(a, o);
-				return o.hooks && (c = o.hooks.postprocess(c)), c;
-			} catch (u) {
-				return i(u);
-			}
+	animateTo(target, duration = 320) {
+		this.interrupt();
+		const from = { ...this.camera };
+		const to = {
+			...target,
+			z: clampZoom(target.z, this.minZoom)
+		};
+		if (duration <= 0 || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			this.set(to);
+			return;
+		}
+		const start = performance.now();
+		const step = (now) => {
+			const t = Math.min(1, (now - start) / duration);
+			const e = 1 - (1 - t) ** 3;
+			const z = from.z * (to.z / from.z) ** e;
+			const k = from.z === to.z ? e : (z - from.z) / (to.z - from.z);
+			this.set({
+				x: from.x + (to.x - from.x) * k,
+				y: from.y + (to.y - from.y) * k,
+				z
+			});
+			if (t < 1) this.animation = requestAnimationFrame(step);
+			else this.animation = 0;
+		};
+		this.animation = requestAnimationFrame(step);
+	}
+	toWorld(sx, sy) {
+		const { x, y, z } = this.camera;
+		return {
+			x: (sx - x) / z,
+			y: (sy - y) / z
+		};
+	}
+};
+/**
+* The camera that shows `rect` inside a viewport of `w`×`h` with `pad` screen pixels around it.
+* When `rect` does not fit even at `minZoom`, it lines up with the top (and the left, if it is too wide).
+*/
+function fitRect(rect, w, h, pad = 72, maxZoom = 1, minZoom = MIN_ZOOM) {
+	const z = clampZoom(Math.min((w - pad * 2) / Math.max(rect.w, 1), (h - pad * 2) / Math.max(rect.h, 1), maxZoom), minZoom);
+	const place = (start, size, room) => size * z <= room - pad * 2 ? room / 2 - (start + size / 2) * z : pad - start * z;
+	return {
+		z,
+		x: place(rect.x, rect.w, w),
+		y: place(rect.y, rect.h, h)
+	};
+}
+function intersects(a, b) {
+	return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+//#endregion
+//#region viewer/src/ui/choice.tsx
+function Switch({ checked, onChange, label, disabled }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"aria-label": label,
+		disabled,
+		onClick: () => onChange?.(!checked),
+		className: cn("relative h-[18px] w-[32px] shrink-0 cursor-pointer rounded-[9px] border-0 p-0 transition-colors duration-200 disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-ink" : "bg-rule-strong"),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "absolute top-[2px] left-[2px] size-[14px] rounded-full bg-surface shadow-[0_1px_2px_rgba(0,0,0,0.25)] transition-transform duration-200 ease-[cubic-bezier(0.2,0.7,0.2,1)]",
+			style: { transform: checked ? "translateX(14px)" : "none" }
+		})
+	});
+}
+function Segmented({ items, value, onChange, label, stretch, size = "ctrl" }) {
+	const indicator = useId();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: cn("shrink-0 items-center gap-0.5 rounded-[6px] bg-track p-[3px]", size === "ctrl" ? "h-ctrl" : "h-7", stretch ? "flex" : "inline-flex"),
+		children: items.map((item) => {
+			const on = item.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-pressed": on,
+				title: item.title,
+				onClick: () => onChange(item.value),
+				className: cn("relative flex h-full cursor-pointer items-center justify-center whitespace-nowrap rounded-[4px] border-0 bg-transparent font-medium transition-colors", size === "ctrl" ? "px-2.5 text-ctrl" : "px-2 text-[12.5px]", stretch && "flex-1", on ? "text-ink" : "text-muted hover:text-ink2"),
+				children: [on ? /* @__PURE__ */ jsx(motion.span, {
+					layoutId: indicator,
+					className: "absolute inset-0 z-0 rounded-[4px] bg-surface shadow-[0_1px_2px_rgba(0,0,0,0.10)]",
+					transition: {
+						type: "spring",
+						stiffness: 520,
+						damping: 42
+					}
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "relative z-[1] flex items-center gap-1.5",
+					children: item.label
+				})]
+			}, item.value);
+		})
+	});
+}
+//#endregion
+//#region viewer/src/pages/canvas/full-page.tsx
+/** The full-window page of one screen, relative to the viewer's base. */
+var fullHref = (canvas, item, theme) => `/c/${encodeURIComponent(canvas)}/full/${encodeURIComponent(item)}?theme=${theme}`;
+/**
+* "Open in a new tab" for a screen. A sandboxed viewer serves screens to its frames only, so the
+* tab gets the full-window page of the viewer; otherwise the screen's own URL.
+*/
+function useOpenUrl(canvasId, item, theme) {
+	const { frameSandbox } = useViewer();
+	const { base } = useRouter();
+	if (!item) return null;
+	if (item.kind === "url") return item.url;
+	if (!frameSandbox) return absoluteUrl(frameSrc(item.url, item.theme ?? theme));
+	return absoluteUrl(`${base}${fullHref(canvasId, item.id, item.theme ?? theme)}`);
+}
+/** `/c/:canvas/full/:item`: one screen filling the window, a way out on hover and Esc. */
+function FullPage({ canvasId, itemId }) {
+	const { data: canvas, error, isLoading } = useCanvas(canvasId);
+	const [, navigate] = useLocation();
+	const { frameSandbox } = useViewer();
+	const appTheme = useTheme();
+	const frame = useRef(null);
+	const param = new URLSearchParams(window.location.search).get("theme");
+	const items = canvas ? canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url"))) : [];
+	const item = items.find((entry) => entry.id === itemId);
+	const theme = (item?.kind === "screen" ? item.theme : void 0) ?? (param === "light" || param === "dark" ? param : canvas?.theme ?? appTheme);
+	const url = item ? item.kind === "screen" ? frameSrc(item.url, theme) : item.url : "";
+	const back = `/c/${encodeURIComponent(canvasId)}`;
+	useEffect(() => {
+		if (item) document.title = `${item.title} · ${canvas?.title ?? ""}`;
+	}, [item, canvas?.title]);
+	useEffect(() => {
+		const onKey = (event) => {
+			if (event.key === "Escape") navigate(back);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [navigate, back]);
+	useEffect(() => {
+		const el = frame.current;
+		if (!el || item?.kind !== "screen") return;
+		return listenToFrame(el, (message) => {
+			if (message.type === "keydown" && message.code === "Escape") navigate(back);
+			else if (message.type === "go") {
+				const id = message.target.includes("/") ? message.target.split("/")[1] : message.target;
+				if (items.some((entry) => entry.id === id)) navigate(fullHref(canvasId, id, theme), { replace: true });
+			} else if (message.type === "link" && canvas) followLink(message, canvas, (id) => navigate(fullHref(canvasId, id, theme), { replace: true }), itemId);
+		});
+	}, [url, item?.kind]);
+	if (error) return /* @__PURE__ */ jsx(NotFound, {
+		title: "Canvas not found",
+		text: error.message
+	});
+	if (isLoading || !canvas) return /* @__PURE__ */ jsx("div", { className: "h-dvh bg-surface" });
+	if (!item) return /* @__PURE__ */ jsx(NotFound, {
+		title: "Screen not found",
+		text: `No screen "${itemId}" on this canvas.`
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group fixed inset-0 bg-surface",
+		children: [/* @__PURE__ */ jsx("iframe", {
+			ref: frame,
+			src: url,
+			title: item.title,
+			allow: "clipboard-read; clipboard-write; fullscreen",
+			sandbox: frameSandbox,
+			className: "block h-full w-full border-0",
+			style: { colorScheme: theme },
+			onLoad: () => item.kind === "screen" && sendTheme(frame.current, theme)
+		}, `${item.id}:${item.kind === "screen" ? item.rev : item.url}`), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-x-0 top-0 flex justify-end p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
+			children: /* @__PURE__ */ jsxs(Link, {
+				href: back,
+				className: "pointer-events-auto flex h-8 items-center gap-2 rounded-[8px] border border-rule bg-surface px-3 text-[12.5px] text-ink2 no-underline shadow-pop hover:text-ink",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 14
+					}),
+					"Back to ",
+					canvas.title,
+					/* @__PURE__ */ jsx(Kbd, { children: "esc" })
+				]
+			})
+		})]
+	});
+}
+//#endregion
+//#region viewer/src/pages/canvas/sidebar.tsx
+function itemIcon(item) {
+	if (item.kind === "note") return "note";
+	if (item.kind === "image") return "image";
+	if (item.kind === "url") return "globe";
+	return item.frame.width < 600 ? "smartphone" : item.frame.width < 1100 ? "tablet" : "monitor";
+}
+function pageHref(canvas, page) {
+	return `/c/${encodeURIComponent(canvas.id)}/p/${encodeURIComponent(page.id)}`;
+}
+/** Pages of the canvas and the items on the current one. */
+function Sidebar({ canvas, page, store, onPick }) {
+	const selected = useStore(store, (state) => state.selected);
+	const errors = useStore(store, (state) => state.frames);
+	return /* @__PURE__ */ jsxs("aside", {
+		"data-ui": true,
+		className: "flex w-[264px] shrink-0 flex-col overflow-hidden border-r border-rule bg-surface",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1 border-b border-rule px-4 py-3.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "truncate text-[14px] font-semibold",
+				children: canvas.title
+			}), canvas.description ? /* @__PURE__ */ jsx("div", {
+				className: "line-clamp-3 text-[12.5px] leading-[1.45] text-muted",
+				children: canvas.description
+			}) : null]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-h-0 grow overflow-y-auto pb-4",
+			children: [
+				canvas.pages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: "px-4 pt-3 pb-1 text-[12px] text-muted",
+					children: "Pages"
+				}), /* @__PURE__ */ jsx("nav", {
+					className: "flex flex-col gap-0.5 px-2",
+					children: canvas.pages.map((p) => {
+						const count = p.sections.reduce((sum, s) => sum + s.items.filter((i) => i.kind === "screen" || i.kind === "url").length, 0);
+						return /* @__PURE__ */ jsxs(Link, {
+							href: pageHref(canvas, p),
+							className: cn("flex h-8 items-center gap-2 rounded-[6px] px-2.5 text-[13.5px] no-underline transition-colors focus-visible:outline-offset-[-2px]", p.id === page.id ? "bg-soft2 font-medium text-ink" : "text-ink2 hover:bg-soft2"),
+							children: [
+								/* @__PURE__ */ jsx(Icon, {
+									name: "file",
+									size: 15,
+									className: "text-muted"
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 grow truncate",
+									children: p.title
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-[12px] text-muted tabular",
+									children: count
+								})
+							]
+						}, p.id);
+					})
+				})] }) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "px-4 pt-3 pb-1 text-[12px] text-muted",
+					children: canvas.pages.length > 1 ? page.title : "Layers"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-col px-2",
+					children: page.sections.map((section) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [section.title ? /* @__PURE__ */ jsxs("div", {
+							className: "flex h-7 items-center gap-2 px-2.5 pt-1 text-[12px] font-medium text-ink2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: section.title
+							}), /* @__PURE__ */ jsx(Count, { value: section.items.length })]
+						}) : null, section.items.map((item) => {
+							const hasErrors = (errors[item.id]?.errors.length ?? 0) > 0 || item.kind === "screen" && item.missing;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								onClick: () => onPick(item.id),
+								className: cn("flex h-8 w-full cursor-pointer items-center gap-2 rounded-[6px] border-0 px-2.5 text-left text-[13px] transition-colors focus-visible:outline-offset-[-2px]", section.title && "pl-4", selected === item.id ? "bg-action-soft text-ink" : "bg-transparent text-ink2 hover:bg-soft2"),
+								children: [
+									/* @__PURE__ */ jsx(Icon, {
+										name: itemIcon(item),
+										size: 15,
+										className: "text-muted"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 grow truncate",
+										children: item.title || (item.kind === "note" ? "Note" : item.id)
+									}),
+									hasErrors ? /* @__PURE__ */ jsx("span", { className: "size-[7px] shrink-0 rounded-full bg-danger" }) : null
+								]
+							}, item.id);
+						})]
+					}, section.id))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region viewer/src/pages/canvas/canvas-bar.tsx
+/** The canvas page's top bar: the canvas and its pages, screen theme, inspect and play. */
+function CanvasBar({ canvas, page, theme, onTheme, sidebar, onSidebar, onPlay, canPlay, inspect, onInspect }) {
+	const [, navigate] = useLocation();
+	const { slots, scope } = useViewer();
+	const titleRef = useRef(null);
+	const endRef = useRef(null);
+	const compact = useFitBar(titleRef, endRef, [
+		canvas.title,
+		page?.title,
+		canvas.pages.length
+	]);
+	return /* @__PURE__ */ jsxs(BarCompactProvider, {
+		value: compact,
+		children: [/* @__PURE__ */ jsxs(Bar, { children: [
+			slots.barStart,
+			slots.brand ? slots.brand : scope ? /* @__PURE__ */ jsx(Mark, {}) : /* @__PURE__ */ jsx(Tooltip, {
+				content: "All canvases",
+				children: /* @__PURE__ */ jsx(Link, {
+					href: "/",
+					className: "flex items-center",
+					"aria-label": "All canvases",
+					children: /* @__PURE__ */ jsx(Mark, {})
+				})
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				icon: "panel-left",
+				label: sidebar ? "Hide sidebar (⌘\\)" : "Show sidebar (⌘\\)",
+				onClick: () => onSidebar(!sidebar)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: titleRef,
+				className: "flex min-w-0 items-center gap-1.5 text-[14px]",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-fit": true,
+					className: "truncate font-semibold",
+					children: canvas.title
+				}), page && canvas.pages.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+					name: "chevron-right",
+					size: 14,
+					className: "shrink-0 text-muted"
+				}), /* @__PURE__ */ jsxs(Menu, {
+					width: 240,
+					trigger: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "flex h-ctrl cursor-pointer items-center gap-1 rounded-[6px] border-0 bg-transparent px-2 text-[14px] text-ink2 hover:bg-soft2",
+						children: [/* @__PURE__ */ jsx("span", {
+							"data-fit": true,
+							className: "truncate",
+							children: page.title
+						}), /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-down",
+							size: 14,
+							className: "text-muted"
+						})]
+					}),
+					children: [/* @__PURE__ */ jsx(MenuLabel, { children: "Pages" }), canvas.pages.map((p) => /* @__PURE__ */ jsxs(MenuItem, {
+						active: p.id === page.id,
+						onSelect: () => navigate(pageHref(canvas, p)),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "file",
+							size: 15,
+							className: "text-muted"
+						}), p.title]
+					}, p.id))]
+				})] }) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: endRef,
+				className: "ml-auto flex shrink-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Segmented, {
+						label: "Screen theme",
+						value: theme,
+						onChange: onTheme,
+						items: [{
+							value: "light",
+							label: /* @__PURE__ */ jsx(Icon, {
+								name: "sun",
+								size: 15
+							}),
+							title: "Light screens"
+						}, {
+							value: "dark",
+							label: /* @__PURE__ */ jsx(Icon, {
+								name: "moon",
+								size: 15
+							}),
+							title: "Dark screens"
+						}]
+					}),
+					/* @__PURE__ */ jsx(InspectToggle, {
+						on: inspect,
+						onChange: onInspect,
+						compact
+					}),
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: ["Play ", /* @__PURE__ */ jsx(Kbd, { children: "P" })]
+						}),
+						children: /* @__PURE__ */ jsx(Button, {
+							kind: "secondary",
+							icon: "play",
+							onClick: onPlay,
+							disabled: !canPlay,
+							"aria-label": "Play",
+							className: compact ? "w-ctrl px-0" : void 0,
+							children: compact ? null : "Play"
+						})
+					}),
+					/* @__PURE__ */ jsx(SearchButton, {
+						width: 180,
+						label: "Search",
+						compact
+					}),
+					/* @__PURE__ */ jsx(ThemeMenu, {}),
+					slots.barEnd
+				]
+			})
+		] }), slots.belowBar ? /* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: slots.belowBar
+		}) : null]
+	});
+}
+/** The selected item's name and actions, floating over the bottom of the canvas. */
+function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
+	const selected = useStore(store, (state) => state.selected);
+	const active = useStore(store, (state) => state.active);
+	const status = useStore(store, (state) => selected ? state.frames[selected] : void 0);
+	const item = layoutItems.find((i) => i.id === selected);
+	const openUrl = useOpenUrl(canvas.id, item?.kind === "screen" || item?.kind === "url" ? item : void 0, theme);
+	if (!item) return null;
+	const frame = item.kind === "screen" || item.kind === "url";
+	const reload = () => reloadFrame(document.querySelector(`[data-item="${CSS.escape(item.id)}"] iframe`));
+	const errors = status?.errors ?? [];
+	return /* @__PURE__ */ jsx("div", {
+		"data-ui": true,
+		className: "pointer-events-none absolute inset-x-0 bottom-5 z-20 flex justify-center px-4",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-auto flex max-w-full flex-col overflow-hidden rounded-[10px] border border-rule bg-surface shadow-pop animate-[q-pop_120ms_ease-out]",
+			children: [errors.length ? /* @__PURE__ */ jsxs("div", {
+				className: "flex max-h-40 items-start gap-2 overflow-y-auto border-b border-rule bg-danger-soft px-3.5 py-2 font-mono text-[12px] whitespace-pre-wrap text-danger-text",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "alert",
+					size: 14,
+					className: "mt-px"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0",
+					children: errors.join("\n")
+				})]
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "flex h-[44px] items-center gap-1 pr-1.5 pl-3.5",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 items-center gap-2 pr-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-[13.5px] font-medium",
+							children: item.title || item.id
+						}), frame && active === item.id ? /* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 items-center gap-1.5 text-[12px] text-muted",
+							children: [
+								/* @__PURE__ */ jsx(Icon, {
+									name: "pointer",
+									size: 13
+								}),
+								" ",
+								inspect ? "Inspecting" : "Interacting",
+								" ",
+								/* @__PURE__ */ jsx(Kbd, { children: "esc" })
+							]
+						}) : frame ? /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-[12px] text-muted",
+							children: inspect ? "Click an element to inspect it" : "Click the screen to interact"
+						}) : null]
+					}),
+					frame ? /* @__PURE__ */ jsx(Tooltip, {
+						content: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: ["Play ", /* @__PURE__ */ jsx(Kbd, { children: "↵" })]
+						}),
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: "play",
+							label: "Play",
+							onClick: () => onPlay(item.id)
+						})
+					}) : null,
+					openUrl ? /* @__PURE__ */ jsx(Tooltip, {
+						content: "Open in a new tab",
+						children: /* @__PURE__ */ jsx("a", {
+							href: openUrl,
+							target: "_blank",
+							rel: "noreferrer",
+							"aria-label": "Open in a new tab",
+							className: "inline-flex h-ctrl w-ctrl items-center justify-center rounded-[6px] text-muted hover:bg-soft2 hover:text-ink2",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "external",
+								size: 16
+							})
+						})
+					}) : null,
+					frame ? /* @__PURE__ */ jsx(Tooltip, {
+						content: "Reload",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: "refresh",
+							label: "Reload",
+							onClick: reload
+						})
+					}) : null,
+					item.kind === "screen" ? /* @__PURE__ */ jsx(Tooltip, {
+						content: "Copy source path",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: "copy",
+							label: "Copy source path",
+							onClick: () => void copyText(item.file, "Path copied")
+						})
+					}) : null,
+					/* @__PURE__ */ jsx(Tooltip, {
+						content: /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: ["Zoom to ", /* @__PURE__ */ jsx(Kbd, { children: "⇧2" })]
+						}),
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: "fit",
+							label: "Zoom to",
+							onClick: () => window.dispatchEvent(new CustomEvent("design:focus", { detail: {
+								canvas: canvas.id,
+								item: item.id
+							} }))
+						})
+					})
+				]
+			})]
+		})
+	});
+}
+/** The inspect mode switch: a button that stays pressed while on. */
+function InspectToggle({ on, onChange, compact = false }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1.5",
+			children: ["Inspect elements ", /* @__PURE__ */ jsx(Kbd, { children: "I" })]
+		}),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-pressed": on,
+			"aria-label": "Inspect elements",
+			onClick: () => onChange(!on),
+			className: cn("inline-flex h-ctrl shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-[6px] border text-ctrl font-medium", compact ? "w-ctrl px-0" : "px-ctrl", on ? "border-action-line bg-action-soft text-action" : "border-rule-strong bg-surface text-ink hover:bg-soft"),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "pointer",
+				size: 15
+			}), compact ? null : "Inspect"]
+		})
+	});
+}
+//#endregion
+//#region viewer/src/pages/canvas/layout.ts
+var SECTION_GAP = 280;
+var ITEM_GAP = 96;
+var ROW_GAP = 150;
+var HEADER_GAP = 110;
+var HEADER_MIN_WIDTH = 720;
+var isFrame = (item) => item.kind === "screen" || item.kind === "url";
+function itemSize(item, sizes) {
+	const measured = sizes[item.id];
+	if (item.kind === "screen" || item.kind === "url") {
+		const w = item.frame.width;
+		if (item.frame.height !== "auto") return {
+			w,
+			h: item.frame.height
+		};
+		const fallback = item.kind === "screen" ? item.measuredHeight : void 0;
+		return {
+			w,
+			h: measured?.h ?? fallback ?? 900
 		};
 	}
-	onError(e, t) {
-		return (n) => {
-			if (n.message += `
-Please report this to https://github.com/markedjs/marked.`, e) {
-				let s = "<p>An error occurred:</p><pre>" + O(n.message + "", !0) + "</pre>";
-				return t ? Promise.resolve(s) : s;
+	if (item.kind === "note") return {
+		w: item.width,
+		h: measured?.h ?? Math.max(80, Math.ceil(item.text.length / 38) * 26 + 40)
+	};
+	const w = item.width ?? measured?.w ?? 480;
+	return {
+		w,
+		h: measured?.w ? measured.h / measured.w * w : measured?.h ?? w * .62
+	};
+}
+function sectionHeaderHeight(section, sizes) {
+	if (!section.title && !section.description) return 0;
+	return sizes[`section:${section.id}`]?.h ?? (section.title ? 56 : 0) + (section.description ? 60 : 0);
+}
+/** Sections stack top to bottom; items run left to right, wrapping after `columns`. */
+function layoutPage(page, sizes) {
+	const items = [];
+	const sections = [];
+	if (page.layout === "free") {
+		let cursor = 0;
+		for (const section of page.sections) for (const item of section.items) {
+			const { w, h } = itemSize(item, sizes);
+			const x = item.x ?? cursor;
+			const y = item.y ?? 0;
+			cursor = Math.max(cursor, x + w + ITEM_GAP);
+			items.push({
+				item,
+				section,
+				x,
+				y,
+				w,
+				h
+			});
+		}
+	} else {
+		let y = 0;
+		for (const section of page.sections) {
+			const header = sectionHeaderHeight(section, sizes);
+			const top = y;
+			let rowY = y + (header ? header + HEADER_GAP : 0);
+			let x = 0;
+			let rowHeight = 0;
+			let width = 0;
+			let column = 0;
+			for (const item of section.items) {
+				if (section.columns && column === section.columns) {
+					rowY += rowHeight + ROW_GAP;
+					x = 0;
+					rowHeight = 0;
+					column = 0;
+				}
+				const { w, h } = itemSize(item, sizes);
+				items.push({
+					item,
+					section,
+					x,
+					y: rowY,
+					w,
+					h
+				});
+				x += w + ITEM_GAP;
+				width = Math.max(width, x - ITEM_GAP);
+				rowHeight = Math.max(rowHeight, h);
+				column++;
 			}
-			if (t) return Promise.reject(n);
-			throw n;
-		};
+			const bottom = rowY + rowHeight;
+			sections.push({
+				section,
+				x: 0,
+				y: top,
+				w: Math.max(width, header ? HEADER_MIN_WIDTH : 0),
+				h: bottom - top,
+				header
+			});
+			y = bottom + SECTION_GAP;
+		}
 	}
-};
-var E = new F();
-function k(l, e) {
-	return E.parse(l, e);
+	let minX = 0;
+	let minY = 0;
+	let maxX = 0;
+	let maxY = 0;
+	const all = [...items, ...sections];
+	if (all.length) {
+		minX = Math.min(...all.map((r) => r.x));
+		minY = Math.min(...all.map((r) => r.y));
+		maxX = Math.max(...all.map((r) => r.x + r.w));
+		maxY = Math.max(...all.map((r) => r.y + r.h));
+	}
+	return {
+		items,
+		sections,
+		bounds: {
+			x: minX,
+			y: minY,
+			w: maxX - minX,
+			h: maxY - minY
+		}
+	};
 }
-k.options = k.setOptions = function(l) {
-	return E.setOptions(l), k.defaults = E.defaults, W(k.defaults), k;
-};
-k.getDefaults = I;
-k.defaults = y;
-function Pt(...l) {
-	return E.use(...l), k.defaults = E.defaults, W(k.defaults), k;
+/** Frames in reading order, for arrow-key stepping and play mode. */
+function frameOrder(layout) {
+	return layout.items.filter((placed) => isFrame(placed.item));
 }
-k.use = Pt;
-k.walkTokens = function(l, e) {
-	return E.walkTokens(l, e);
-};
-k.parseInline = E.parseInline;
-k.Parser = T;
-k.parser = T.parse;
-k.Renderer = S;
-k.TextRenderer = z;
-k.Lexer = R;
-k.lexer = R.lex;
-k.Tokenizer = P;
-k.Hooks = _;
-k.parse = k;
-k.options;
-k.setOptions;
-k.walkTokens;
-k.parseInline;
-T.parse;
-R.lex;
 //#endregion
-//#region viewer/src/components/markdown.tsx
-var SAFE_SCHEMES = /* @__PURE__ */ new Set([
-	"http:",
-	"https:",
-	"mailto:"
-]);
-/** http, https, mailto or relative. Browsers drop whitespace and control characters inside a scheme, so do we. */
-function isSafeHref(href) {
-	const bare = href.replace(/[\u0000- \u007f]/g, "");
-	const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(bare)?.[1];
-	return !scheme || SAFE_SCHEMES.has(`${scheme.toLowerCase()}:`);
+//#region viewer/src/pages/canvas/view-state.ts
+function createViewState() {
+	return new Store({
+		selected: null,
+		active: null,
+		hovered: null,
+		sizes: {},
+		frames: {},
+		live: [],
+		panning: false,
+		zoomTiny: false,
+		frameEls: {},
+		inspecting: false
+	});
 }
-function escapeHtml(text) {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+function setSize(store, key, size) {
+	store.set((state) => {
+		const prev = state.sizes[key];
+		if (prev && Math.abs(prev.h - size.h) < 1 && prev.w === size.w) return state;
+		return {
+			...state,
+			sizes: {
+				...state.sizes,
+				[key]: size
+			}
+		};
+	});
 }
-var markdown = new F({
-	gfm: true,
-	breaks: false
-}, { renderer: {
-	html: ({ text }) => escapeHtml(text),
-	link(token) {
-		return isSafeHref(token.href) ? false : this.parser.parseInline(token.tokens);
-	},
-	image(token) {
-		return isSafeHref(token.href) ? false : escapeHtml(token.text);
-	}
-} });
-function renderMarkdown(text) {
-	return markdown.parse(text, { async: false }).replace(/<a href=/g, "<a target=\"_blank\" rel=\"noreferrer\" href=");
+function setFrame(store, id, patch) {
+	store.set((state) => {
+		const prev = state.frames[id] ?? {
+			ready: false,
+			errors: []
+		};
+		return {
+			...state,
+			frames: {
+				...state.frames,
+				[id]: {
+					...prev,
+					...patch
+				}
+			}
+		};
+	});
 }
-/** Markdown from the project's own files (guidelines, notes, descriptions). */
-function Markdown({ text, className }) {
-	const html = useMemo(() => renderMarkdown(text), [text]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("prose", className),
-		dangerouslySetInnerHTML: { __html: html }
+function setFrameEl(store, id, el) {
+	store.set((state) => state.frameEls[id] === el ? state : {
+		...state,
+		frameEls: {
+			...state.frameEls,
+			[id]: el
+		}
 	});
 }
 //#endregion
@@ -11444,7 +11468,7 @@ var FrameItem = memo(function FrameItem({ placed, mode, thumb, theme, store, eve
 	const src = item.kind === "screen" ? frameSrc(item.url, openTheme, capture ? { capture: "1" } : void 0) : item.url;
 	const ready = !!status?.ready;
 	const off = mode === "off";
-	const mounted = !off && !(item.kind === "screen" && item.missing);
+	const mounted = !off && !(item.kind === "screen" && item.missing) && !!item.url;
 	useEffect(() => {
 		if (off) setFrame(store, item.id, { ready: false });
 	}, [