foss-design 0.9.10 → 0.9.11

package/dist/viewer-lib/index.js

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AnimatePresence, MotionConfig, motion, useDragControls } from "motion/react";
 import * as React from "react";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Children, Component, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Link, Redirect, Route, Router, Switch as Switch$1, useLocation, useRouter } from "wouter";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
@@ -2444,6 +2444,8 @@ function viewerKeys(id) {
 		]
 	};
 }
+/** What frames of the local viewer may use: the clipboard, both ways, and fullscreen. */
+var DEFAULT_FRAME_ALLOW = "clipboard-read; clipboard-write; fullscreen";
 var ids = /* @__PURE__ */ new WeakMap();
 var lastId = 0;
 /** A stable id per source object. */
@@ -3114,6 +3116,414 @@ function CommandPalette() {
 		}) : null })
 	});
 }
+//#endregion
+//#region viewer/src/ui/button.tsx
+var KIND = {
+	primary: "border border-primary bg-primary text-primary-ink hover:opacity-90",
+	secondary: "border border-rule-strong bg-surface text-ink hover:bg-soft",
+	ghost: "border border-transparent bg-transparent text-ink2 hover:bg-soft2",
+	dashed: "border border-dashed border-rule-strong bg-transparent text-ink2 hover:bg-soft",
+	danger: "border border-danger bg-danger text-on-danger hover:opacity-90"
+};
+var buttonClass = (kind = "secondary", extra) => cn("inline-flex h-ctrl shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-[6px] px-ctrl text-ctrl font-medium leading-none no-underline transition-[background-color,opacity,scale] duration-100 active:not-disabled:scale-[0.97]", "disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45", KIND[kind], extra);
+var Button = forwardRef(function Button({ kind = "secondary", icon, loading, disabled, className, children, type = "button", ...rest }, ref) {
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type,
+		disabled: disabled || loading,
+		"aria-busy": loading || void 0,
+		className: buttonClass(kind, className),
+		...rest,
+		children: [loading ? /* @__PURE__ */ jsx(Icon, {
+			name: "loader",
+			size: 15,
+			className: "animate-spin"
+		}) : icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: 15
+		}) : null, children]
+	});
+});
+var ICON_KIND = {
+	ghost: "border border-transparent bg-transparent text-muted hover:bg-soft2 hover:text-ink2",
+	secondary: "border border-rule-strong bg-surface text-ink2 hover:bg-soft"
+};
+var iconButtonClass = (kind = "ghost", extra) => cn("inline-flex h-ctrl w-ctrl shrink-0 cursor-pointer items-center justify-center rounded-[6px] p-0 transition-[color,background-color,scale] duration-100 active:not-disabled:scale-[0.94] disabled:cursor-not-allowed disabled:opacity-45", ICON_KIND[kind], extra);
+var IconButton = forwardRef(function IconButton({ icon, label, kind = "ghost", size = 16, className, type = "button", ...rest }, ref) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type,
+		"aria-label": label,
+		title: label,
+		className: iconButtonClass(kind, className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size
+		})
+	});
+});
+/** An in-app link styled as a button. */
+function ButtonLink({ to, kind = "secondary", icon, className, children }) {
+	return /* @__PURE__ */ jsxs(Link, {
+		href: to,
+		className: buttonClass(kind, className),
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: 15
+		}) : null, children]
+	});
+}
+/** A link out of the app (a frame in a new tab), styled as a button. */
+function ButtonAnchor({ kind = "secondary", icon, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs("a", {
+		className: buttonClass(kind, className),
+		...rest,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: 15
+		}) : null, children]
+	});
+}
+//#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/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/components/error-boundary.tsx
+function Failed({ error }) {
+	const scoped = !!useViewer().scope;
+	return /* @__PURE__ */ jsx(Notice, {
+		title: "This page failed to show",
+		text: /* @__PURE__ */ jsx("span", {
+			className: "font-mono text-[12.5px] break-words",
+			children: error.message.slice(0, 500)
+		}),
+		action: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: () => window.location.reload(),
+			children: "Reload"
+		}), scoped ? null : /* @__PURE__ */ jsx(ButtonLink, {
+			to: "/",
+			children: "All canvases"
+		})] })
+	});
+}
+var Boundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error: error instanceof Error ? error : new Error(String(error)) };
+	}
+	componentDidCatch(error, info) {
+		console.error("[design] a page failed to render", error, info.componentStack);
+	}
+	componentDidUpdate(previous) {
+		if (this.state.error && previous.at !== this.props.at) this.setState({ error: null });
+	}
+	render() {
+		return this.state.error ? /* @__PURE__ */ jsx(Failed, { error: this.state.error }) : this.props.children;
+	}
+};
+/** One page that throws shows what went wrong in its place, instead of blanking the whole viewer. */
+function PageBoundary({ children }) {
+	const [location] = useLocation();
+	return /* @__PURE__ */ jsx(Boundary, {
+		at: location,
+		children
+	});
+}
 /** The shortcut modifier as the user's keyboard labels it. */
 var MOD_KEY = /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
 //#endregion
@@ -3142,7 +3552,7 @@ var oppositeSideMap = {
 	bottom: "top",
 	top: "bottom"
 };
-function clamp(start, value, end) {
+function clamp$1(start, value, end) {
 	return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -3442,7 +3852,7 @@ var arrow$3 = (options) => ({
 		const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
 		const max = clientSize - arrowDimensions[length] - maxPadding;
 		const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-		const offset = clamp(minPadding, center, max);
+		const offset = clamp$1(minPadding, center, max);
 		const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < minPadding ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
 		const alignmentOffset = shouldAddOffset ? center < minPadding ? center - minPadding : center - max : 0;
 		return {
@@ -3661,7 +4071,7 @@ var shift$2 = function(options) {
 			const mainAxis = getOppositeAxis(crossAxis);
 			let mainAxisCoord = coords[mainAxis];
 			let crossAxisCoord = coords[crossAxis];
-			const clampCoord = (axis, coord) => clamp(coord + overflow[axis === "y" ? "top" : "left"], coord, coord - overflow[axis === "y" ? "bottom" : "right"]);
+			const clampCoord = (axis, coord) => clamp$1(coord + overflow[axis === "y" ? "top" : "left"], coord, coord - overflow[axis === "y" ? "bottom" : "right"]);
 			if (checkMainAxis) mainAxisCoord = clampCoord(mainAxis, mainAxisCoord);
 			if (checkCrossAxis) crossAxisCoord = clampCoord(crossAxis, crossAxisCoord);
 			const limitedCoords = limiter.fn({
@@ -5607,75 +6017,6 @@ function SearchButton({ width = 240, label = "Search and jump", compact }) {
 	});
 }
 //#endregion
-//#region viewer/src/ui/button.tsx
-var KIND = {
-	primary: "border border-primary bg-primary text-primary-ink hover:opacity-90",
-	secondary: "border border-rule-strong bg-surface text-ink hover:bg-soft",
-	ghost: "border border-transparent bg-transparent text-ink2 hover:bg-soft2",
-	dashed: "border border-dashed border-rule-strong bg-transparent text-ink2 hover:bg-soft",
-	danger: "border border-danger bg-danger text-on-danger hover:opacity-90"
-};
-var buttonClass = (kind = "secondary", extra) => cn("inline-flex h-ctrl shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-[6px] px-ctrl text-ctrl font-medium leading-none no-underline transition-[background-color,opacity] duration-100", "disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45", KIND[kind], extra);
-var Button = forwardRef(function Button({ kind = "secondary", icon, loading, disabled, className, children, type = "button", ...rest }, ref) {
-	return /* @__PURE__ */ jsxs("button", {
-		ref,
-		type,
-		disabled: disabled || loading,
-		"aria-busy": loading || void 0,
-		className: buttonClass(kind, className),
-		...rest,
-		children: [loading ? /* @__PURE__ */ jsx(Icon, {
-			name: "loader",
-			size: 15,
-			className: "animate-spin"
-		}) : icon ? /* @__PURE__ */ jsx(Icon, {
-			name: icon,
-			size: 15
-		}) : null, children]
-	});
-});
-var ICON_KIND = {
-	ghost: "border border-transparent bg-transparent text-muted hover:bg-soft2 hover:text-ink2",
-	secondary: "border border-rule-strong bg-surface text-ink2 hover:bg-soft"
-};
-var iconButtonClass = (kind = "ghost", extra) => cn("inline-flex h-ctrl w-ctrl shrink-0 cursor-pointer items-center justify-center rounded-[6px] p-0 transition-colors duration-100 disabled:cursor-not-allowed disabled:opacity-45", ICON_KIND[kind], extra);
-var IconButton = forwardRef(function IconButton({ icon, label, kind = "ghost", size = 16, className, type = "button", ...rest }, ref) {
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type,
-		"aria-label": label,
-		title: label,
-		className: iconButtonClass(kind, className),
-		...rest,
-		children: /* @__PURE__ */ jsx(Icon, {
-			name: icon,
-			size
-		})
-	});
-});
-/** An in-app link styled as a button. */
-function ButtonLink({ to, kind = "secondary", icon, className, children }) {
-	return /* @__PURE__ */ jsxs(Link, {
-		href: to,
-		className: buttonClass(kind, className),
-		children: [icon ? /* @__PURE__ */ jsx(Icon, {
-			name: icon,
-			size: 15
-		}) : null, children]
-	});
-}
-/** A link out of the app (a frame in a new tab), styled as a button. */
-function ButtonAnchor({ kind = "secondary", icon, className, children, ...rest }) {
-	return /* @__PURE__ */ jsxs("a", {
-		className: buttonClass(kind, className),
-		...rest,
-		children: [icon ? /* @__PURE__ */ jsx(Icon, {
-			name: icon,
-			size: 15
-		}) : null, children]
-	});
-}
-//#endregion
 //#region ../../node_modules/.pnpm/@radix-ui+react-collection@1.1.15_@types+react-dom@19.3.0_@types+react@19.3.0__@types+r_ed97e98f526881a1c9b799d335ea2adc/node_modules/@radix-ui/react-collection/dist/index.mjs
 var __defProp$6 = Object.defineProperty;
 var __name$6 = (target, value) => __defProp$6(target, "name", {
@@ -9521,14 +9862,44 @@ var SAFE_SCHEMES = /* @__PURE__ */ new Set([
 	"https:",
 	"mailto:"
 ]);
-/** http, https, mailto or relative. Browsers drop whitespace and control characters inside a scheme, so do we. */
+/**
+* http, https, mailto or relative, read as the browser reads a URL (it drops whitespace and
+* control characters inside a scheme, and so does URL parsing).
+*/
 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()}:`);
+	try {
+		return SAFE_SCHEMES.has(new URL(href, "http://relative.invalid/").protocol);
+	} catch {
+		return false;
+	}
 }
 function escapeHtml(text) {
-	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var NAMED = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	colon: ":",
+	sol: "/",
+	period: ".",
+	num: "#",
+	quest: "?",
+	equals: "=",
+	percnt: "%",
+	tab: "	",
+	newline: "\n",
+	nbsp: "\xA0"
+};
+/** Character references in a link or image destination, which Markdown reads as the characters they name. */
+function decodeEntities(text) {
+	return text.replace(/&(?:#(\d{1,7})|#x([0-9a-f]{1,6})|([a-z]{2,8}));/gi, (whole, dec, hex, name) => {
+		if (name) return NAMED[name.toLowerCase()] ?? whole;
+		const code = dec ? Number(dec) : Number.parseInt(hex, 16);
+		return code > 0 && code <= 1114111 && (code < 55296 || code > 57343) ? String.fromCodePoint(code) : "�";
+	});
 }
 var markdown = new F({
 	gfm: true,
@@ -9536,14 +9907,22 @@ var markdown = new F({
 }, { renderer: {
 	html: ({ text }) => escapeHtml(text),
 	link(token) {
-		return isSafeHref(token.href) ? false : this.parser.parseInline(token.tokens);
+		const text = this.parser.parseInline(token.tokens);
+		const href = decodeEntities(token.href);
+		if (!isSafeHref(href)) return text;
+		const title = token.title ? ` title="${escapeHtml(decodeEntities(token.title))}"` : "";
+		return `<a target="_blank" rel="noreferrer" href="${escapeHtml(href)}"${title}>${text}</a>`;
 	},
 	image(token) {
-		return isSafeHref(token.href) ? false : escapeHtml(token.text);
+		const alt = escapeHtml(decodeEntities(token.text));
+		const src = decodeEntities(token.href);
+		if (!isSafeHref(src)) return alt;
+		const title = token.title ? ` title="${escapeHtml(decodeEntities(token.title))}"` : "";
+		return `<img src="${escapeHtml(src)}" alt="${alt}"${title}>`;
 	}
 } });
 function renderMarkdown(text) {
-	return markdown.parse(text, { async: false }).replace(/<a href=/g, "<a target=\"_blank\" rel=\"noreferrer\" href=");
+	return markdown.parse(text, { async: false });
 }
 /** Markdown from the project's own files (guidelines, notes, descriptions). */
 function Markdown({ text, className }) {
@@ -9554,13 +9933,155 @@ function Markdown({ text, className }) {
 	});
 }
 //#endregion
+//#region viewer/src/lib/messages.ts
+/**
+* Frames run code anyone who can push wrote, and any of them may post the viewer anything: a
+* message only reaches the viewer's handlers with the fields its type has, of their types.
+* Strings are cut and sizes kept within reason, so a frame cannot swell the viewer's state.
+*/
+var MAX_FRAME_SIZE = 1e5;
+var MAX_TEXT = 2e3;
+var isObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isString = (value) => typeof value === "string";
+var isNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var isBoolean = (value) => typeof value === "boolean";
+var optional = (check) => (value) => value === void 0 || check(value);
+var listOf = (check) => (value) => Array.isArray(value) && value.every(check);
+var shape = (fields) => (value) => isObject(value) && Object.entries(fields).every(([key, check]) => check(value[key]));
+var isPair = (value) => Array.isArray(value) && value.length === 2 && isString(value[0]) && isString(value[1]);
+var isBox = (value) => Array.isArray(value) && value.length === 4 && value.every(isNumber);
+var isCrumb = shape({
+	ref: isNumber,
+	label: isString
+});
+var isColor = shape({
+	value: isString,
+	css: isString,
+	token: optional(isString)
+});
+var isTokenValue = shape({
+	value: isString,
+	token: optional(isString)
+});
+var isElementInfo = shape({
+	ref: isNumber,
+	tag: isString,
+	label: isString,
+	text: optional(isString),
+	classes: listOf(isString),
+	attributes: listOf(isPair),
+	component: optional(shape({
+		owners: listOf(isString),
+		file: optional(isString)
+	})),
+	rect: shape({
+		x: isNumber,
+		y: isNumber,
+		w: isNumber,
+		h: isNumber
+	}),
+	margin: isBox,
+	border: isBox,
+	padding: isBox,
+	layout: listOf(isPair),
+	typography: optional(shape({
+		family: isString,
+		familyToken: optional(isString),
+		size: isString,
+		sizeToken: optional(isString),
+		weight: isString,
+		lineHeight: isString,
+		letterSpacing: isString,
+		color: isColor,
+		align: isString,
+		transform: optional(isString)
+	})),
+	appearance: shape({
+		background: optional(isColor),
+		backgroundImage: optional(isString),
+		border: optional(shape({
+			width: isString,
+			style: isString,
+			color: isColor
+		})),
+		radius: optional(isTokenValue),
+		shadow: optional(isTokenValue),
+		opacity: optional(isString)
+	}),
+	path: listOf(isCrumb),
+	children: listOf(isCrumb),
+	css: isString
+});
+/** What each message type carries besides `source`, `key` and `type`. */
+var FIELDS = {
+	ready: {},
+	blur: {},
+	updated: {},
+	"inspect-escape": {},
+	size: {
+		width: isNumber,
+		height: isNumber
+	},
+	error: { message: isString },
+	go: { target: isString },
+	link: {
+		href: isString,
+		path: (value) => value === null || isString(value),
+		form: isBoolean,
+		raw: optional(isString),
+		pushed: optional(isBoolean)
+	},
+	wheel: {
+		deltaX: isNumber,
+		deltaY: isNumber,
+		x: isNumber,
+		y: isNumber,
+		zoom: isBoolean
+	},
+	keydown: { code: isString },
+	pointer: {
+		x: isNumber,
+		y: isNumber,
+		down: isBoolean
+	},
+	key: {
+		name: isString,
+		down: isBoolean
+	},
+	inspect: { info: (value) => value === null || isElementInfo(value) }
+};
+var clamp = (value) => Math.min(MAX_FRAME_SIZE, Math.max(0, value));
+/** `data` as a runtime message, with its sizes and texts bounded; null when it is none. */
+function readRuntimeMessage(data) {
+	if (!isObject(data) || data.source !== "design-runtime" || !isString(data.key) || !isString(data.type)) return null;
+	const fields = Object.hasOwn(FIELDS, data.type) ? FIELDS[data.type] : null;
+	if (!fields || !shape(fields)(data)) return null;
+	const message = data;
+	if (message.type === "size") return {
+		...message,
+		width: clamp(message.width),
+		height: clamp(message.height)
+	};
+	if (message.type === "error") return {
+		...message,
+		message: message.message.slice(0, MAX_TEXT)
+	};
+	return message;
+}
+/** A frame's error list with `message` added: once, and no more than `MAX_FRAME_ERRORS` of them. */
+function withError(list, message) {
+	return list.includes(message) || list.length >= 20 ? list : [...list, message];
+}
+//#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);
+	const listeners = event.source ? handlers.get(event.source) : void 0;
+	if (!listeners) return;
+	const message = readRuntimeMessage(event.data);
+	if (!message) return;
+	for (const handler of listeners) handler(message);
 });
 function listenToFrame(frame, handler) {
 	let win = null;
@@ -9637,7 +10158,8 @@ function reloadFrame(frame) {
 * 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.
+* and static builds, keep frames on the viewer's origin. The dev server keeps
+* its viewer on localhost and gives 127.0.0.1 to frames (server/hosts.ts).
 */
 var FRAME_ORIGIN = (() => {
 	if (STATIC_SITE) return "";
@@ -9664,7 +10186,7 @@ function absoluteUrl(url) {
 * 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) {
+function followLink(message, canvas, go, from, missing) {
 	if (message.form) {
 		toast("Forms are not sent from a screen", void 0, "info");
 		return;
@@ -9677,7 +10199,7 @@ function followLink(message, canvas, go, from) {
 		if (!window.open(message.href, "_blank", "noopener,noreferrer")) 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 frames = Array.isArray(canvas) ? canvas : 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;
@@ -9695,7 +10217,9 @@ function followLink(message, canvas, go, from) {
 		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");
+	else if (message.pushed) return;
+	else if (missing) missing(path);
+	else toast("No screen for this link", path, "info");
 }
 //#endregion
 //#region viewer/src/components/inspector.tsx
@@ -9712,11 +10236,13 @@ function useInspection(frames, enabled, options) {
 	const [selected, setSelected] = useState(null);
 	const state = useRef({
 		enabled,
-		tokens
+		tokens,
+		picked: null
 	});
 	state.current = {
 		enabled,
-		tokens
+		tokens,
+		picked: selected?.frame ?? null
 	};
 	const onEscape = useRef(options.onEscape);
 	onEscape.current = options.onEscape;
@@ -9751,7 +10277,7 @@ function useInspection(frames, enabled, options) {
 				if (state.current.enabled) tell(frame, true);
 				else told.current.set(frame, { on: false });
 			} else if (message.type === "inspect") {
-				if (message.info) {
+				if (message.info && (state.current.enabled || state.current.picked === frame)) {
 					for (const other of framesRef.current) if (other !== frame) sendToFrame(other, {
 						type: "inspect-select",
 						ref: null
@@ -10220,233 +10746,42 @@ function InspectorPanel({ info, onSelect, onClose, active }) {
 						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]
+								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
@@ -10531,112 +10866,6 @@ function SlidePanel({ open, side, width, children }) {
 	});
 }
 //#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;
@@ -10805,6 +11034,174 @@ function Segmented({ items, value, onChange, label, stretch, size = "ctrl" }) {
 	});
 }
 //#endregion
+//#region viewer/src/components/corner-plate.tsx
+/** How long the plate stays after the screen loads, or after a tap shows it. */
+var LINGER_MS = 5500;
+/** A pointer that left the corner hides the plate after this, so passing by does not flicker it. */
+var LEAVE_MS = 350;
+/** The top-right quarter of the window, where the plate lives. */
+var inCorner = (x, y) => x >= window.innerWidth / 2 && y <= window.innerHeight / 2;
+/**
+* A plate in the top-right corner over a full-window frame. It shows while the screen loads and for a
+* few seconds after, then fades out; a pointer in the window's top-right quarter brings it back and
+* keeps it while it stays there, a tap there shows it for a while, and so does focus inside it.
+*
+* The page does not see the pointer over the frame, so the frame's runtime reports it (0.9.11+).
+* Until a frame does (an older runtime, a URL item), the plate shows whenever the pointer is over the
+* page, as before.
+*/
+function CornerPlate({ frame, note, badge, children }) {
+	const [lingering, setLingering] = useState(true);
+	const [inside, setInside] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [reported, setReported] = useState(false);
+	const [overPage, setOverPage] = useState(false);
+	const [loads, setLoads] = useState(0);
+	const linger = useRef(void 0);
+	const leave = useRef(void 0);
+	const showFor = (ms) => {
+		setLingering(true);
+		clearTimeout(linger.current);
+		linger.current = setTimeout(() => setLingering(false), ms);
+	};
+	const at = (x, y) => {
+		const corner = x >= 0 && inCorner(x, y);
+		clearTimeout(leave.current);
+		if (corner) setInside(true);
+		else leave.current = setTimeout(() => setInside(false), LEAVE_MS);
+	};
+	useEffect(() => {
+		if (!frame) return;
+		const ask = () => {
+			sendToFrame(frame, { type: "pointer" });
+			showFor(LINGER_MS);
+			setLoads((n) => n + 1);
+		};
+		frame.addEventListener("load", ask);
+		const stop = listenToFrame(frame, (message) => {
+			if (message.type !== "pointer") return;
+			setReported(true);
+			if (message.x < 0) return at(-1, -1);
+			const rect = frame.getBoundingClientRect();
+			const x = rect.left + message.x;
+			const y = rect.top + message.y;
+			if (message.down && inCorner(x, y)) showFor(LINGER_MS);
+			else at(x, y);
+		});
+		return () => {
+			frame.removeEventListener("load", ask);
+			stop();
+		};
+	}, [frame]);
+	useEffect(() => {
+		const move = (event) => at(event.clientX, event.clientY);
+		const out = (event) => {
+			if (!event.relatedTarget) at(-1, -1);
+		};
+		window.addEventListener("pointermove", move, { passive: true });
+		document.addEventListener("pointerout", out);
+		return () => {
+			window.removeEventListener("pointermove", move);
+			document.removeEventListener("pointerout", out);
+			clearTimeout(linger.current);
+			clearTimeout(leave.current);
+		};
+	}, []);
+	useEffect(() => {
+		if (reported) return;
+		const root = document.documentElement;
+		const enter = () => setOverPage(true);
+		const exit = () => setOverPage(false);
+		root.addEventListener("pointerenter", enter);
+		root.addEventListener("pointerleave", exit);
+		return () => {
+			root.removeEventListener("pointerenter", enter);
+			root.removeEventListener("pointerleave", exit);
+		};
+	}, [reported]);
+	const shown = lingering || inside || focused || !reported && overPage;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [badge ? /* @__PURE__ */ jsx(motion.button, {
+		type: "button",
+		"aria-label": "Show the page's notice",
+		initial: false,
+		animate: shown ? {
+			opacity: 0,
+			scale: .8
+		} : {
+			opacity: 1,
+			scale: 1
+		},
+		transition: {
+			duration: .2,
+			delay: shown ? 0 : .25
+		},
+		onClick: () => showFor(LINGER_MS),
+		tabIndex: shown ? -1 : 0,
+		className: cn("absolute top-3 right-3 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-rule bg-surface/90 px-2.5 text-[11.5px] text-muted shadow-[0_1px_3px_rgb(0_0_0/0.08)] backdrop-blur-sm hover:text-ink2", shown && "pointer-events-none"),
+		children: badge
+	}) : null, /* @__PURE__ */ jsx(motion.div, {
+		initial: {
+			opacity: 0,
+			scale: .94,
+			y: -4
+		},
+		animate: shown ? {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		} : {
+			opacity: 0,
+			scale: .97,
+			y: -2
+		},
+		transition: shown ? {
+			type: "spring",
+			stiffness: 420,
+			damping: 30
+		} : {
+			duration: .45,
+			ease: "easeOut"
+		},
+		style: { transformOrigin: "top right" },
+		className: cn("absolute top-3 right-3 flex max-w-[calc(100%-24px)] flex-col items-end", !shown && "pointer-events-none"),
+		"aria-hidden": !shown || void 0,
+		onFocus: () => setFocused(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex max-w-full flex-col gap-1 rounded-[8px] border border-rule bg-surface p-1 shadow-pop",
+			children: [
+				loads > 0 ? /* @__PURE__ */ jsx(motion.span, {
+					"aria-hidden": true,
+					initial: {
+						opacity: .55,
+						scale: 1
+					},
+					animate: {
+						opacity: 0,
+						scale: 1.18
+					},
+					transition: {
+						duration: 1.1,
+						ease: "easeOut",
+						delay: .15
+					},
+					className: "pointer-events-none absolute -inset-px rounded-[8px] border-2 border-action"
+				}, loads) : null,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1",
+					children
+				}) : null,
+				note ? /* @__PURE__ */ jsx("div", {
+					className: "px-2 pb-1 text-[11.5px] leading-snug text-muted",
+					children: note
+				}) : null
+			]
+		})
+	})] });
+}
+//#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}`;
@@ -10820,13 +11217,18 @@ function useOpenUrl(canvasId, item, theme) {
 	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. */
+/** `/c/:canvas/full/:item`: one screen filling the window, a way out in the top-right corner and on Esc. */
 function FullPage({ canvasId, itemId }) {
 	const { data: canvas, error, isLoading } = useCanvas(canvasId);
 	const [, navigate] = useLocation();
-	const { frameSandbox } = useViewer();
+	const { frameSandbox, frameAllow, slots } = useViewer();
 	const appTheme = useTheme();
 	const frame = useRef(null);
+	const [frameEl, setFrameEl] = useState(null);
+	const setFrame = useCallback((el) => {
+		frame.current = el;
+		setFrameEl(el);
+	}, []);
 	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);
@@ -10864,31 +11266,35 @@ function FullPage({ canvasId, itemId }) {
 		text: `No screen "${itemId}" on this canvas.`
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group fixed inset-0 bg-surface",
+		className: "fixed inset-0 bg-surface",
 		children: [/* @__PURE__ */ jsx("iframe", {
-			ref: frame,
+			ref: setFrame,
 			src: url,
 			title: item.title,
-			allow: "clipboard-read; clipboard-write; fullscreen",
+			allow: frameAllow,
 			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, {
+		}, `${item.id}:${item.kind === "screen" ? item.rev : item.url}`), /* @__PURE__ */ jsxs(CornerPlate, {
+			frame: frameEl,
+			note: slots.fullPlate?.note,
+			badge: slots.fullPlate?.badge,
+			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",
+				className: "flex h-8 min-w-0 items-center gap-2 rounded-[6px] px-2 text-[12.5px] text-ink2 no-underline hover:bg-soft2 hover:text-ink",
 				children: [
 					/* @__PURE__ */ jsx(Icon, {
 						name: "x",
 						size: 14
 					}),
-					"Back to ",
-					canvas.title,
+					/* @__PURE__ */ jsxs("span", {
+						className: "truncate",
+						children: ["Back to ", canvas.title]
+					}),
 					/* @__PURE__ */ jsx(Kbd, { children: "esc" })
 				]
-			})
+			}), slots.fullPlate?.actions]
 		})]
 	});
 }
@@ -11453,7 +11859,7 @@ function deviceIcon(width) {
 var FrameItem = memo(function FrameItem({ placed, mode, thumb, theme, store, events, capture }) {
 	const { item, x, y, w, h } = placed;
 	const ref = useRef(null);
-	const { frameSandbox } = useViewer();
+	const { frameSandbox, frameAllow } = useViewer();
 	const setRef = useCallback((el) => {
 		ref.current = el;
 		setFrameEl(store, item.id, el);
@@ -11490,7 +11896,8 @@ var FrameItem = memo(function FrameItem({ placed, mode, thumb, theme, store, eve
 					break;
 				case "error": {
 					const current = store.get().frames[item.id]?.errors ?? [];
-					if (!current.includes(message.message)) setFrame(store, item.id, { errors: [...current, message.message] });
+					const errors = withError(current, message.message);
+					if (errors !== current) setFrame(store, item.id, { errors });
 					break;
 				}
 				case "updated":
@@ -11556,7 +11963,7 @@ var FrameItem = memo(function FrameItem({ placed, mode, thumb, theme, store, eve
 					ref: setRef,
 					src,
 					title: item.title,
-					allow: "clipboard-read; clipboard-write; fullscreen",
+					allow: frameAllow,
 					sandbox: frameSandbox,
 					className: cn("absolute top-0 left-0 block border-0 transition-opacity duration-200", ready ? "opacity-100" : "opacity-0"),
 					style: {
@@ -12894,7 +13301,7 @@ function PlayPage({ canvasId, itemId }) {
 }
 function Player({ canvas, itemId }) {
 	const [, navigate] = useLocation();
-	const { frameSandbox, slots } = useViewer();
+	const { frameSandbox, frameAllow, slots } = useViewer();
 	const pageParam = new URLSearchParams(window.location.search).get("page") ?? (window.location.hash.split("?")[1] ? new URLSearchParams(window.location.hash.split("?")[1]).get("page") : null);
 	const all = useMemo(() => framesOf(canvas, null), [canvas]);
 	const current = all.find((entry) => entry.item.id === itemId);
@@ -12970,7 +13377,7 @@ function Player({ canvas, itemId }) {
 		if (!el || item?.kind !== "screen") return;
 		setErrors([]);
 		return listenToFrame(el, (message) => {
-			if (message.type === "error") setErrors((list) => list.includes(message.message) ? list : [...list, message.message]);
+			if (message.type === "error") setErrors((list) => withError(list, message.message));
 			else if (message.type === "updated") setErrors([]);
 			else if (message.type === "keydown" && message.code === "Escape") navigate(back);
 			else if (message.type === "go") {
@@ -13146,7 +13553,7 @@ function Player({ canvas, itemId }) {
 								ref: setFrame,
 								src,
 								title: item.title,
-								allow: "clipboard-read; clipboard-write; fullscreen",
+								allow: frameAllow,
 								sandbox: frameSandbox,
 								className: "block border-0",
 								style: {
@@ -13202,7 +13609,7 @@ function PhoneCanvas({ canvasId, pageId, itemId }) {
 }
 function PhoneViewer({ canvas, pageId, itemId }) {
 	const [, navigate] = useLocation();
-	const { frameSandbox, slots, scope } = useViewer();
+	const { frameSandbox, frameAllow, slots, scope } = useViewer();
 	const appTheme = useTheme();
 	const all = useMemo(() => framesOf(canvas, null), [canvas]);
 	const index = Math.max(0, itemId ? all.findIndex((entry) => entry.item.id === itemId) : pageId ? all.findIndex((entry) => entry.pageId === pageId) : 0);
@@ -13254,7 +13661,7 @@ function PhoneViewer({ canvas, pageId, itemId }) {
 		if (!el || item?.kind !== "screen") return;
 		return listenToFrame(el, (message) => {
 			if (message.type === "size") setAutoHeight(message.height);
-			else if (message.type === "error") setErrors((list) => list.includes(message.message) ? list : [...list, message.message]);
+			else if (message.type === "error") setErrors((list) => withError(list, message.message));
 			else if (message.type === "updated") setErrors([]);
 			else if (message.type === "go") goTo(message.target.includes("/") ? message.target.split("/")[1] : message.target);
 			else if (message.type === "link") followLink(message, canvas, goTo, item.id);
@@ -13427,7 +13834,7 @@ function PhoneViewer({ canvas, pageId, itemId }) {
 								ref: setFrame,
 								src,
 								title: item.title,
-								allow: "clipboard-read; clipboard-write; fullscreen",
+								allow: frameAllow,
 								sandbox: frameSandbox,
 								className: "block border-0",
 								style: {
@@ -14320,7 +14727,7 @@ function ColorsPage({ system }) {
 */
 function AutoFrame({ src, theme, title, minHeight = 120, width, className }) {
 	const ref = useRef(null);
-	const { frameSandbox } = useViewer();
+	const { frameSandbox, frameAllow } = useViewer();
 	const [initial] = useState(() => ({
 		src,
 		theme
@@ -14337,7 +14744,7 @@ function AutoFrame({ src, theme, title, minHeight = 120, width, className }) {
 		return listenToFrame(frame, (message) => {
 			if (message.type === "size") setHeight(Math.max(minHeight, message.height));
 			else if (message.type === "ready") setReady(true);
-			else if (message.type === "error") setErrors((list) => list.includes(message.message) ? list : [...list, message.message]);
+			else if (message.type === "error") setErrors((list) => withError(list, message.message));
 			else if (message.type === "updated") setErrors([]);
 			else if (message.type === "wheel" && !message.zoom) scrollAround(frame, message);
 		});
@@ -14364,6 +14771,7 @@ function AutoFrame({ src, theme, title, minHeight = 120, width, className }) {
 				ref,
 				src: url,
 				title,
+				allow: frameAllow,
 				sandbox: frameSandbox,
 				className: cn("block w-full border-0 transition-opacity duration-150", ready ? "opacity-100" : "opacity-0"),
 				style: {
@@ -18597,7 +19005,7 @@ function ScopedRoutes({ canvas }) {
 	] });
 }
 /** The whole viewer: home, canvases, screens and the design system of one project. */
-function DesignViewer({ source, base = "", frameSandbox, slots, scope, queryClient }) {
+function DesignViewer({ source, base = "", frameSandbox, frameAllow = DEFAULT_FRAME_ALLOW, slots, scope, queryClient }) {
 	const [ownClient] = useState(() => queryClient ?? createQueryClient(source.live));
 	const client = queryClient ?? ownClient;
 	const keys = useMemo(() => viewerKeys(sourceId(source)), [source]);
@@ -18606,12 +19014,14 @@ function DesignViewer({ source, base = "", frameSandbox, slots, scope, queryClie
 		source,
 		keys,
 		frameSandbox,
+		frameAllow,
 		slots: slots ?? {},
 		scope: scopeCanvas === void 0 ? null : { canvas: scopeCanvas }
 	}), [
 		source,
 		keys,
 		frameSandbox,
+		frameAllow,
 		slots,
 		scopeCanvas
 	]);
@@ -18630,7 +19040,7 @@ function DesignViewer({ source, base = "", frameSandbox, slots, scope, queryClie
 					/* @__PURE__ */ jsx(Title, {}),
 					/* @__PURE__ */ jsxs(Router, {
 						base,
-						children: [viewer.scope ? /* @__PURE__ */ jsx(ScopedRoutes, { canvas: viewer.scope.canvas }) : /* @__PURE__ */ jsx(Routes, {}), /* @__PURE__ */ jsx(CommandPalette, {})]
+						children: [/* @__PURE__ */ jsx(PageBoundary, { children: viewer.scope ? /* @__PURE__ */ jsx(ScopedRoutes, { canvas: viewer.scope.canvas }) : /* @__PURE__ */ jsx(Routes, {}) }), /* @__PURE__ */ jsx(CommandPalette, {})]
 					}),
 					/* @__PURE__ */ jsx(Toaster, {})
 				] })
@@ -18684,13 +19094,65 @@ function Avatar({ src, name, size = 28, shape = "circle", className }) {
 	});
 }
 //#endregion
+//#region viewer/src/ui/copy-button.tsx
+/** A ghost "Copy" button that turns into "Copied" with a check for a moment after it copies. */
+function CopyButton({ text, label = "Copy", done = "Copied", className }) {
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch {
+			toast("Could not copy", "The browser blocked clipboard access", "error");
+			return;
+		}
+		setCopied(true);
+		clearTimeout(timer.current);
+		timer.current = setTimeout(() => setCopied(false), 1600);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => void copy(),
+		className: cn(buttonClass("ghost", "h-7 px-2"), copied && "!text-ok-text", className),
+		children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: /* @__PURE__ */ jsxs(motion.span, {
+				initial: {
+					opacity: 0,
+					scale: .6
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .6
+				},
+				transition: { duration: .14 },
+				className: "inline-flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: copied ? "check" : "copy",
+					size: 15
+				}), copied ? done : label]
+			}, copied ? "done" : "copy")
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "sr-only",
+			children: copied ? done : ""
+		})]
+	});
+}
+//#endregion
 //#region viewer/src/ui/dialog.tsx
 /**
 * A modal over a dimmed page: focus stays inside until it closes, Escape and a
 * click outside close it. Head and foot are a panel's; `actions` go to the foot.
 * On a phone it is a sheet from the bottom edge with a handle: swiping it down closes it too.
 */
-function Dialog({ open, onOpenChange, title, description, children, actions, footNote, below, width = 440 }) {
+function Dialog({ open, onOpenChange, title, description, children, actions, footNote, below, width = 440, step }) {
 	const phone = useIsPhone();
 	const drag = useDragControls();
 	const autoFocus = (event) => {
@@ -18778,24 +19240,24 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 					},
 					tabIndex: -1,
 					className: "fixed inset-x-0 bottom-0 z-50 flex max-h-[90dvh] flex-col rounded-t-[14px] border-t border-rule bg-surface pb-[env(safe-area-inset-bottom)] shadow-pop outline-none",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "shrink-0 touch-none",
-							onPointerDown: (event) => drag.start(event),
-							children: [/* @__PURE__ */ jsx("div", {
-								className: "flex justify-center pt-2",
-								children: /* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									className: "h-1 w-9 rounded-full bg-rule-strong"
-								})
-							}), head]
-						}),
-						/* @__PURE__ */ jsxs("div", {
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "shrink-0 touch-none",
+						onPointerDown: (event) => drag.start(event),
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex justify-center pt-2",
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "h-1 w-9 rounded-full bg-rule-strong"
+							})
+						}), head]
+					}), /* @__PURE__ */ jsxs(Step, {
+						step,
+						className: "flex min-h-0 flex-col",
+						children: [/* @__PURE__ */ jsxs("div", {
 							className: "min-h-0 overflow-y-auto overscroll-contain",
 							children: [body, list]
-						}),
-						foot
-					]
+						}), foot]
+					})]
 				})
 			})]
 		}) : open ? /* @__PURE__ */ jsx(DialogPortal, {
@@ -18814,7 +19276,7 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 						forceMount: true,
 						onOpenAutoFocus: autoFocus,
 						...described,
-						children: /* @__PURE__ */ jsxs(motion.div, {
+						children: /* @__PURE__ */ jsx(motion.div, {
 							initial: {
 								opacity: 0,
 								scale: .98,
@@ -18838,12 +19300,15 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 							tabIndex: -1,
 							className: cn(floatingSurface, "my-auto flex max-w-full flex-col outline-none"),
 							style: { width },
-							children: [
-								head,
-								body,
-								list,
-								foot
-							]
+							children: /* @__PURE__ */ jsx(Resizing, { children: /* @__PURE__ */ jsxs(Step, {
+								step,
+								children: [
+									head,
+									body,
+									list,
+									foot
+								]
+							}) })
 						})
 					})
 				})
@@ -18851,6 +19316,53 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 		}) : null })
 	});
 }
+/** Eases its height to its content's, so a panel whose content changes grows and shrinks smoothly. */
+function Resizing({ children }) {
+	const inner = useRef(null);
+	const [height, setHeight] = useState("auto");
+	useLayoutEffect(() => {
+		const el = inner.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => setHeight(el.offsetHeight));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: false,
+		animate: { height },
+		transition: {
+			type: "spring",
+			stiffness: 520,
+			damping: 44
+		},
+		className: "overflow-hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: inner,
+			className: "flex flex-col",
+			children
+		})
+	});
+}
+/** Fades the content in again when the dialog's step changes. */
+function Step({ step, className, children }) {
+	const first = useRef(step);
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: step === first.current ? false : {
+			opacity: 0,
+			y: 4
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		transition: {
+			duration: .18,
+			ease: "easeOut"
+		},
+		className: className ?? "flex flex-col",
+		children
+	}, step ?? "");
+}
 //#endregion
 //#region viewer/src/ui/meter.tsx
 /**
@@ -18967,4 +19479,4 @@ function TextArea({ label, hint, error, className, id, disabled, rows = 4, ...re
 	});
 }
 //#endregion
-export { ApiError, Avatar, Badge, Bar, Button, ButtonAnchor, ButtonLink, Content, Count, DesignViewer, Dialog, GroupRow, Icon, IconButton, KV, Kbd, Mark, Menu, MenuItem, MenuLabel, MenuSeparator, Meter, Mono, Muted, NavLabel, Notice, NoticeCard, PageHead, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, Segmented, Sheet, Skeleton, SkeletonRows, SlidePanel, Strip, SubNav, Switch, THead, TextArea, TextField, ThemeMenu, Toaster, Tooltip, TooltipProvider, Two, Wordmark, buttonClass, cn, copyText, floatingSurface, iconButtonClass, initials, localSource, menuItemClass, menuSurface, resolveUrl, setThemePref, staticSource, toast, useBarCompact, useIsPhone, useTheme, useThemePref };
+export { ApiError, Avatar, Badge, Bar, Button, ButtonAnchor, ButtonLink, Content, CopyButton, CornerPlate, Count, DesignViewer, Dialog, GroupRow, Icon, IconButton, KV, Kbd, Mark, Menu, MenuItem, MenuLabel, MenuSeparator, Meter, Mono, Muted, NavLabel, Notice, NoticeCard, PageHead, Panel, PanelBody, PanelFoot, PanelHead, PanelTabs, Row, RowLink, Segmented, Sheet, Skeleton, SkeletonRows, SlidePanel, Strip, SubNav, Switch, THead, TextArea, TextField, ThemeMenu, Toaster, Tooltip, TooltipProvider, Two, Wordmark, buttonClass, cn, copyText, floatingSurface, followLink, frameSrc, iconButtonClass, initials, listenToFrame, localSource, menuItemClass, menuSurface, resolveUrl, sendTheme, setThemePref, staticSource, toast, useBarCompact, useIsPhone, useTheme, useThemePref };