foss-design 0.3.6 → 0.4.0

package/dist/viewer-lib/index.js

@@ -2585,14 +2585,14 @@ function readPref() {
 	return "system";
 }
 var pref = new Store(readPref());
-var media = window.matchMedia("(prefers-color-scheme: dark)");
+var media$1 = window.matchMedia("(prefers-color-scheme: dark)");
 function resolve(value) {
-	return value === "system" ? media.matches ? "dark" : "light" : value;
+	return value === "system" ? media$1.matches ? "dark" : "light" : value;
 }
 function apply() {
 	document.documentElement.dataset.theme = resolve(pref.get());
 }
-media.addEventListener("change", apply);
+media$1.addEventListener("change", apply);
 pref.subscribe(apply);
 apply();
 function setThemePref(value) {
@@ -2608,9 +2608,9 @@ function useThemePref() {
 function useTheme() {
 	const value = useStore(pref);
 	const systemDark = useSyncExternalStore((listener) => {
-		media.addEventListener("change", listener);
-		return () => media.removeEventListener("change", listener);
-	}, () => media.matches);
+		media$1.addEventListener("change", listener);
+		return () => media$1.removeEventListener("change", listener);
+	}, () => media$1.matches);
 	return value === "system" ? systemDark ? "dark" : "light" : value;
 }
 //#endregion
@@ -3094,7 +3094,8 @@ function SearchButton({ width = 240, label = "Search and jump" }) {
 		type: "button",
 		onClick: openPalette,
 		style: { width },
-		className: "flex h-ctrl min-w-0 shrink cursor-pointer items-center gap-2 rounded-[6px] border border-rule bg-soft pr-1.5 pl-3 text-ctrl text-muted transition-colors hover:border-rule-strong max-lg:w-auto!",
+		"aria-label": label,
+		className: "flex h-ctrl min-w-0 shrink cursor-pointer items-center gap-2 rounded-[6px] border border-rule bg-soft pr-1.5 pl-3 text-ctrl text-muted transition-colors hover:border-rule-strong max-lg:w-auto! max-md:w-ctrl! max-md:justify-center max-md:border-0 max-md:bg-transparent max-md:p-0",
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
 				name: "search",
@@ -3104,7 +3105,10 @@ function SearchButton({ width = 240, label = "Search and jump" }) {
 				className: "min-w-0 grow truncate text-left max-lg:hidden",
 				children: label
 			}),
-			/* @__PURE__ */ jsx(Kbd, { children: MOD_KEY === "⌘" ? "⌘K" : "Ctrl K" })
+			/* @__PURE__ */ jsx("span", {
+				className: "flex max-md:hidden",
+				children: /* @__PURE__ */ jsx(Kbd, { children: MOD_KEY === "⌘" ? "⌘K" : "Ctrl K" })
+			})
 		]
 	});
 }
@@ -5637,12 +5641,12 @@ function useIsHydrated() {
 }
 __name$6(useIsHydrated, "useIsHydrated");
 var useReactSyncExternalStore = React[" useSyncExternalStore ".trim().toString()];
-function subscribe() {
+function subscribe$1() {
 	return () => {};
 }
-__name$6(subscribe, "subscribe");
+__name$6(subscribe$1, "subscribe");
 function useIsHydratedModern() {
-	return useReactSyncExternalStore(subscribe, () => true, () => false);
+	return useReactSyncExternalStore(subscribe$1, () => true, () => false);
 }
 __name$6(useIsHydratedModern, "useIsHydratedModern");
 var useIsHydrated2 = typeof useReactSyncExternalStore === "function" ? useIsHydratedModern : useIsHydrated;
@@ -6717,24 +6721,57 @@ function AppTopBar() {
 	const project = useProject().data;
 	const { slots } = useViewer();
 	const [location] = useLocation();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Bar, { children: [
-		slots.barStart,
-		/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 items-center gap-6",
-			children: [slots.brand ?? /* @__PURE__ */ jsx(Wordmark, {
-				name: project?.name,
-				version: project?.version
-			}), /* @__PURE__ */ jsx(Tabs, { location })]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "ml-auto flex items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(SearchButton, {}),
-				/* @__PURE__ */ jsx(ThemeMenu, {}),
-				slots.barEnd
-			]
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Bar, { children: [
+			slots.barStart,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-6",
+				children: [slots.brand ?? /* @__PURE__ */ jsx(Wordmark, {
+					name: project?.name,
+					version: project?.version
+				}), /* @__PURE__ */ jsx(Tabs, { location })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(SearchButton, {}),
+					/* @__PURE__ */ jsx(ThemeMenu, {}),
+					slots.barEnd
+				]
+			})
+		] }),
+		/* @__PURE__ */ jsx(PhoneTabs, { location }),
+		slots.belowBar
+	] });
+}
+/** The section tabs on a phone, where the bar has no room for them: a row under it. */
+function PhoneTabs({ location }) {
+	return /* @__PURE__ */ jsx("nav", {
+		className: "sticky top-[52px] z-30 hidden h-10 shrink-0 items-stretch border-b border-rule bg-surface px-2 max-md:flex",
+		children: TABS.map((tab) => {
+			const on = tab.match(location);
+			return /* @__PURE__ */ jsxs(Link, {
+				href: tab.to,
+				"aria-current": on ? "page" : void 0,
+				className: cn("relative flex grow items-center justify-center text-[13.5px] no-underline", on ? "font-medium text-ink" : "text-ink2"),
+				children: [tab.label, on ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "absolute inset-x-6 bottom-0 h-[2px] rounded-full bg-action"
+				}) : null]
+			}, tab.to);
 		})
-	] }), slots.belowBar] });
+	});
+}
+//#endregion
+//#region viewer/src/lib/phone.ts
+/** Phones: under Tailwind's `md`. The canvas gives way to one screen at a time there. */
+var media = window.matchMedia("(max-width: 767px)");
+var subscribe = (onChange) => {
+	media.addEventListener("change", onChange);
+	return () => media.removeEventListener("change", onChange);
+};
+function useIsPhone() {
+	return useSyncExternalStore(subscribe, () => media.matches);
 }
 //#endregion
 //#region ../../node_modules/.pnpm/@radix-ui+react-popover@1.1.23_@types+react-dom@19.3.0_@types+react@19.3.0__@types+reac_bdb8fe50570f35efe0254f5915b263fd/node_modules/@radix-ui/react-popover/dist/index.mjs
@@ -7836,7 +7873,7 @@ 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: `${labelWidth}px minmax(0, 1fr)`,
+			gridTemplateColumns: `min(${labelWidth}px, 42%) minmax(0, 1fr)`,
 			minHeight: minH
 		},
 		children: [/* @__PURE__ */ jsx("span", {
@@ -7996,7 +8033,7 @@ function PageHead({ title, sub, right, badge, crumbs }) {
 					}), badge]
 				}),
 				sub ? /* @__PURE__ */ jsx("div", {
-					className: "text-[13px] text-muted",
+					className: "text-[13px] [overflow-wrap:anywhere] text-muted",
 					children: sub
 				}) : null
 			]
@@ -11949,7 +11986,7 @@ function isTyping(target) {
 //#endregion
 //#region viewer/src/pages/canvas/canvas-page.tsx
 var query = new URLSearchParams(window.location.search);
-var CAPTURE = query.has("capture");
+var CAPTURE$1 = query.has("capture");
 var cameraKey = (canvas, page) => `foss-design.camera.${canvas}.${page}`;
 function loadCamera(key) {
 	try {
@@ -11985,7 +12022,7 @@ function CanvasView({ canvas, page }) {
 	const camera = useMemo(() => new CameraStore(), []);
 	const apiRef = useRef(null);
 	const [theme, setTheme] = useScreenTheme(canvas);
-	const [sidebar, setSidebar] = useState(() => !CAPTURE && window.innerWidth > 900);
+	const [sidebar, setSidebar] = useState(() => !CAPTURE$1 && window.innerWidth > 900);
 	const [inspectOn, setInspect] = useState(false);
 	const sizes = useStore(store, (state) => state.sizes);
 	const layout = useMemo(() => page ? layoutPage(page, sizes) : {
@@ -12029,7 +12066,7 @@ function CanvasView({ canvas, page }) {
 		if (placed.current || !layout.bounds.w) return;
 		placed.current = true;
 		const focus = takeFocus(canvas.id);
-		const saved = CAPTURE ? null : loadCamera(key);
+		const saved = CAPTURE$1 ? null : loadCamera(key);
 		if (focus) {
 			store.set((state) => ({
 				...state,
@@ -12037,7 +12074,7 @@ function CanvasView({ canvas, page }) {
 			}));
 			requestAnimationFrame(() => apiRef.current?.fitItem(focus, false));
 		} else if (saved && saved.z >= camera.minZoom) camera.set(saved);
-		else requestAnimationFrame(() => CAPTURE ? apiRef.current?.fitAll(false) : apiRef.current?.openView());
+		else requestAnimationFrame(() => CAPTURE$1 ? apiRef.current?.fitAll(false) : apiRef.current?.openView());
 	}, [
 		layout,
 		camera,
@@ -12046,7 +12083,7 @@ function CanvasView({ canvas, page }) {
 		store
 	]);
 	useEffect(() => {
-		if (CAPTURE) return;
+		if (CAPTURE$1) return;
 		let timer;
 		const off = camera.subscribe((c) => {
 			clearTimeout(timer);
@@ -12139,7 +12176,7 @@ function CanvasView({ canvas, page }) {
 		navigate
 	]);
 	useEffect(() => {
-		if (!CAPTURE) return;
+		if (!CAPTURE$1) return;
 		const started = Date.now();
 		const timer = setInterval(() => {
 			const frames = store.get().frames;
@@ -12222,7 +12259,7 @@ function CanvasView({ canvas, page }) {
 		inspectOn,
 		inspection
 	]);
-	if (CAPTURE) return /* @__PURE__ */ jsx("div", {
+	if (CAPTURE$1) return /* @__PURE__ */ jsx("div", {
 		className: "flex h-dvh",
 		children: /* @__PURE__ */ jsx(Viewport, {
 			layout,
@@ -12438,6 +12475,79 @@ function useScreenFrames(frameEls, layout) {
 	}, [frameEls, layout]);
 }
 //#endregion
+//#region viewer/src/ui/sheet.tsx
+/**
+* A panel sliding up from the bottom edge, for phones: lists to pick from and actions. Like
+* Dialog, focus stays inside, and Escape, a tap on the dimmed page or the close button close it.
+*/
+function Sheet({ open, onOpenChange, title, children }) {
+	return /* @__PURE__ */ jsx(Dialog$1, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(DialogPortal, {
+			forceMount: true,
+			children: [/* @__PURE__ */ jsx(DialogOverlay, {
+				asChild: true,
+				forceMount: true,
+				children: /* @__PURE__ */ jsx(motion.div, {
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: { opacity: 0 },
+					transition: { duration: .16 },
+					className: "fixed inset-0 z-50 bg-overlay"
+				})
+			}), /* @__PURE__ */ jsx(DialogContent, {
+				asChild: true,
+				forceMount: true,
+				"aria-describedby": void 0,
+				children: /* @__PURE__ */ jsxs(motion.div, {
+					initial: { y: "100%" },
+					animate: { y: 0 },
+					exit: {
+						y: "100%",
+						transition: {
+							duration: .18,
+							ease: "easeIn"
+						}
+					},
+					transition: {
+						type: "spring",
+						stiffness: 420,
+						damping: 40
+					},
+					className: "fixed inset-x-0 bottom-0 z-50 flex max-h-[82dvh] flex-col rounded-t-[14px] border-t border-rule bg-surface pb-[env(safe-area-inset-bottom)] shadow-pop outline-none",
+					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"
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-h-[48px] items-center justify-between gap-3 pr-2 pl-4",
+							children: [/* @__PURE__ */ jsx(DialogTitle, {
+								className: "m-0 truncate text-[15px] font-semibold",
+								children: title
+							}), /* @__PURE__ */ jsx(DialogClose, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(IconButton, {
+									icon: "x",
+									label: "Close"
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "min-h-0 overflow-y-auto overscroll-contain border-t border-rule",
+							children
+						})
+					]
+				})
+			})]
+		}) : null })
+	});
+}
+//#endregion
 //#region viewer/src/pages/canvas/play-page.tsx
 function framesOf(canvas, pageId) {
 	return (pageId ? canvas.pages.filter((p) => p.id === pageId) : canvas.pages).flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url").map((item) => ({
@@ -12743,6 +12853,441 @@ function Player({ canvas, itemId }) {
 	});
 }
 //#endregion
+//#region viewer/src/pages/canvas/phone-view.tsx
+/** Room around the screen on the stage, per side. */
+var GUTTER = 12;
+/**
+* A canvas on a phone: no board to pan, one screen at a time as in play mode. The screen fills
+* the width and scrolls; the bottom bar steps through every screen of the canvas and opens the
+* list of them. Serves `/c/:canvas`, its pages and `/c/:canvas/play/:item` under 768px.
+*/
+function PhoneCanvas({ canvasId, pageId, itemId }) {
+	const { data: canvas, error, isLoading } = useCanvas(canvasId);
+	if (error) return /* @__PURE__ */ jsx(NotFound, {
+		title: "Canvas not found",
+		text: error.message
+	});
+	if (isLoading || !canvas) return /* @__PURE__ */ jsx("div", { className: "canvas-dots h-dvh" });
+	return /* @__PURE__ */ jsx(PhoneViewer, {
+		canvas,
+		pageId,
+		itemId
+	});
+}
+function PhoneViewer({ canvas, pageId, itemId }) {
+	const [, navigate] = useLocation();
+	const { frameSandbox, 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);
+	const entry = all[index];
+	const item = entry?.item;
+	const [theme, setTheme] = useState(canvas.theme ?? appTheme);
+	const [listOpen, setListOpen] = useState(false);
+	const [errors, setErrors] = useState([]);
+	const [stageWidth, setStageWidth] = useState(0);
+	const [autoHeight, setAutoHeight] = useState(null);
+	const [direction, setDirection] = useState(0);
+	const [actual, setActual] = useState(false);
+	const stage = useRef(null);
+	const frame = useRef(null);
+	const [frameEl, setFrameEl] = useState(null);
+	const setFrame = useCallback((el) => {
+		if (!el) return;
+		frame.current = el;
+		setFrameEl(el);
+	}, []);
+	const show = useCallback((target, step = 0) => {
+		setDirection(step);
+		navigate(playHref(canvas.id, target.item.id, target.pageId), { replace: true });
+	}, [canvas.id, navigate]);
+	const move = (step) => {
+		if (all.length < 2) return;
+		show(all[(index + step + all.length) % all.length], step);
+	};
+	const goTo = (id) => {
+		const target = all.find((e) => e.item.id === id);
+		if (target) show(target, all.indexOf(target) > index ? 1 : -1);
+	};
+	useLayoutEffect(() => {
+		const el = stage.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => setStageWidth(el.clientWidth));
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, []);
+	const frameTheme = item?.kind === "screen" ? item.theme ?? theme : theme;
+	const [openTheme] = useState(frameTheme);
+	const src = item ? item.kind === "screen" ? frameSrc(item.url, openTheme) : item.url : "";
+	const openUrl = useOpenUrl(canvas.id, item, frameTheme);
+	useEffect(() => {
+		setErrors([]);
+		setAutoHeight(item?.kind === "screen" ? item.measuredHeight ?? null : null);
+		stage.current?.scrollTo({ top: 0 });
+		const el = frame.current;
+		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 === "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);
+		});
+	}, [frameEl, src]);
+	useEffect(() => {
+		if (item?.kind === "screen") sendTheme(frame.current, frameTheme);
+	}, [frameTheme, item]);
+	useEffect(() => {
+		const onKey = (event) => {
+			if (document.querySelector("[role=\"dialog\"]")) return;
+			if (event.key === "ArrowRight") move(1);
+			else if (event.key === "ArrowLeft") move(-1);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	});
+	const swipe = useRef(null);
+	const onTouchStart = (event) => {
+		const touch = event.touches[0];
+		swipe.current = touch ? {
+			x: touch.clientX,
+			y: touch.clientY
+		} : null;
+	};
+	const onTouchEnd = (event) => {
+		const start = swipe.current;
+		const touch = event.changedTouches[0];
+		swipe.current = null;
+		if (!start || !touch) return;
+		const dx = touch.clientX - start.x;
+		const dy = touch.clientY - start.y;
+		if (Math.abs(dx) > 56 && Math.abs(dx) > Math.abs(dy) * 1.5) move(dx < 0 ? 1 : -1);
+	};
+	if (!item || !entry) return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-dvh flex-col",
+		children: [/* @__PURE__ */ jsx(PhoneBar, {
+			canvas,
+			title: canvas.title,
+			sub: null
+		}), /* @__PURE__ */ jsx(NotFound, {
+			title: "No screens here",
+			text: "This canvas has no screens to show yet."
+		})]
+	});
+	const width = item.frame.width;
+	const fitScale = stageWidth ? Math.min(1, (stageWidth - 24) / width) : 0;
+	const wide = fitScale > 0 && fitScale < .8;
+	const scale = wide && actual ? 1 : fitScale;
+	const height = item.frame.height === "auto" ? Math.max(autoHeight ?? 0, 480) : item.frame.height;
+	const canTheme = item.kind === "screen" && !item.theme;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-dvh flex-col",
+		children: [
+			/* @__PURE__ */ jsx(PhoneBar, {
+				canvas,
+				title: item.title || item.id,
+				sub: [canvas.title, entry.where].filter(Boolean).join(" · "),
+				back: scope ? void 0 : "/",
+				end: /* @__PURE__ */ jsxs(Fragment, { children: [
+					wide ? /* @__PURE__ */ jsx(IconButton, {
+						icon: actual ? "zoom-out" : "zoom-in",
+						label: actual ? "Fit to width" : "Actual size",
+						onClick: () => setActual((value) => !value)
+					}) : null,
+					/* @__PURE__ */ jsxs(Menu, {
+						align: "end",
+						width: 220,
+						trigger: /* @__PURE__ */ jsx(IconButton, {
+							icon: "more",
+							label: "Screen options"
+						}),
+						children: [
+							canTheme ? /* @__PURE__ */ jsxs(Fragment, { children: [
+								/* @__PURE__ */ jsx(MenuLabel, { children: "Screen theme" }),
+								/* @__PURE__ */ jsx(ThemeItem, {
+									value: "light",
+									current: theme,
+									onPick: setTheme
+								}),
+								/* @__PURE__ */ jsx(ThemeItem, {
+									value: "dark",
+									current: theme,
+									onPick: setTheme
+								}),
+								/* @__PURE__ */ jsx(MenuSeparator, {})
+							] }) : null,
+							/* @__PURE__ */ jsxs(MenuItem, {
+								onSelect: () => reloadFrame(frame.current),
+								children: [/* @__PURE__ */ jsx(Icon, {
+									name: "refresh",
+									size: 15,
+									className: "text-ink2"
+								}), "Reload screen"]
+							}),
+							openUrl ? /* @__PURE__ */ jsxs(MenuItem, {
+								onSelect: () => window.open(openUrl, "_blank", "noopener"),
+								children: [/* @__PURE__ */ jsx(Icon, {
+									name: "external",
+									size: 15,
+									className: "text-ink2"
+								}), "Open in a new tab"]
+							}) : null,
+							/* @__PURE__ */ jsxs(MenuItem, {
+								onSelect: () => setThemePref(appTheme === "dark" ? "light" : "dark"),
+								children: [/* @__PURE__ */ jsx(Icon, {
+									name: appTheme === "dark" ? "sun" : "moon",
+									size: 15,
+									className: "text-ink2"
+								}), appTheme === "dark" ? "Light appearance" : "Dark appearance"]
+							})
+						]
+					}),
+					slots.barEnd
+				] })
+			}),
+			slots.belowBar,
+			/* @__PURE__ */ jsxs("div", {
+				ref: stage,
+				onTouchStart,
+				onTouchEnd,
+				className: cn("canvas-dots relative min-h-0 grow overflow-y-auto overscroll-contain", wide && actual ? "overflow-x-auto" : "overflow-x-hidden"),
+				children: [errors.length ? /* @__PURE__ */ jsxs("div", {
+					className: "sticky top-0 z-10 flex items-start gap-2 border-b border-rule bg-danger-soft px-4 py-2 font-mono text-[12px] whitespace-pre-wrap text-danger-text",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "alert",
+						size: 14,
+						className: "mt-px shrink-0"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 break-words",
+						children: errors.join("\n")
+					})]
+				}) : null, /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					mode: "popLayout",
+					custom: direction,
+					children: /* @__PURE__ */ jsx(motion.div, {
+						custom: direction,
+						initial: {
+							opacity: 0,
+							x: direction * 40
+						},
+						animate: {
+							opacity: 1,
+							x: 0
+						},
+						exit: {
+							opacity: 0,
+							x: direction * -40,
+							transition: { duration: .12 }
+						},
+						transition: {
+							type: "spring",
+							stiffness: 420,
+							damping: 38
+						},
+						className: cn("flex", wide && actual ? "w-max" : "justify-center"),
+						style: { padding: GUTTER },
+						children: scale ? /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 overflow-hidden rounded-[6px] bg-surface",
+							style: {
+								width: width * scale,
+								height: height * scale,
+								boxShadow: "var(--shadow-frame), 0 0 0 1px var(--rule)"
+							},
+							children: /* @__PURE__ */ jsx("iframe", {
+								ref: setFrame,
+								src,
+								title: item.title,
+								allow: "clipboard-read; clipboard-write; fullscreen",
+								sandbox: frameSandbox,
+								className: "block border-0",
+								style: {
+									width,
+									height,
+									transform: `scale(${scale})`,
+									transformOrigin: "0 0",
+									colorScheme: frameTheme
+								},
+								onLoad: () => item.kind === "screen" && sendTheme(frame.current, frameTheme)
+							}, `${item.id}:${item.kind === "screen" ? item.rev : item.url}`)
+						}) : null
+					}, item.id)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("nav", {
+				"aria-label": "Screens",
+				className: "flex shrink-0 items-center gap-1 border-t border-rule bg-surface px-2 pt-1.5 pb-[max(6px,env(safe-area-inset-bottom))]",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "chevron-left",
+						label: "Previous screen",
+						onClick: () => move(-1),
+						disabled: all.length < 2
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => setListOpen(true),
+						className: "flex h-10 min-w-0 grow cursor-pointer items-center justify-center gap-2 rounded-[8px] border-0 bg-transparent px-3 text-[13.5px] text-ink active:bg-soft2",
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								name: "list",
+								size: 15,
+								className: "shrink-0 text-muted"
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "tabular shrink-0 text-muted",
+								children: [
+									index + 1,
+									" / ",
+									all.length
+								]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate font-medium",
+								children: item.title || item.id
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "chevron-right",
+						label: "Next screen",
+						onClick: () => move(1),
+						disabled: all.length < 2
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Sheet, {
+				open: listOpen,
+				onOpenChange: setListOpen,
+				title: canvas.title,
+				children: /* @__PURE__ */ jsx(ScreenList, {
+					canvas,
+					current: item.id,
+					onPick: (id) => {
+						setListOpen(false);
+						goTo(id);
+					}
+				})
+			})
+		]
+	});
+}
+function ThemeItem({ value, current, onPick }) {
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		active: current === value,
+		onSelect: () => onPick(value),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: value === "dark" ? "moon" : "sun",
+				size: 15,
+				className: "text-ink2"
+			}),
+			value === "dark" ? "Dark" : "Light",
+			current === value ? /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				size: 15,
+				className: "ml-auto text-ink2"
+			}) : null
+		]
+	});
+}
+/** The phone's top bar: a way back, the screen and where it sits, and the screen's actions. */
+function PhoneBar({ canvas, title, sub, back, end }) {
+	const { slots } = useViewer();
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex h-[52px] shrink-0 items-center gap-2 border-b border-rule bg-surface pr-2 pl-2 pt-[env(safe-area-inset-top)]",
+		children: [
+			slots.barStart,
+			back ? /* @__PURE__ */ jsx(Link, {
+				href: back,
+				"aria-label": `All canvases, leaving ${canvas.title}`,
+				className: "inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-ink2 active:bg-soft2",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "arrow-left",
+					size: 18
+				})
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "flex size-10 shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Mark, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 grow flex-col leading-tight",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate text-[14.5px] font-semibold",
+					children: title
+				}), sub ? /* @__PURE__ */ jsx("span", {
+					className: "truncate text-[12px] text-muted",
+					children: sub
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: end
+			})
+		]
+	});
+}
+var KIND_ICON = (entry) => entry.item.kind === "url" ? "globe" : entry.item.frame.device === "phone" ? "smartphone" : entry.item.frame.device === "tablet" ? "tablet" : "monitor";
+/** Every screen of the canvas by page and section, the current one marked. */
+function ScreenList({ canvas, current, onPick }) {
+	const activeRef = useRef(null);
+	useEffect(() => {
+		activeRef.current?.scrollIntoView({ block: "center" });
+	}, []);
+	const multi = canvas.pages.length > 1;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col pb-2",
+		children: canvas.pages.map((page) => {
+			const entries = framesOf(canvas, page.id);
+			if (!entries.length) return null;
+			return /* @__PURE__ */ jsxs("section", {
+				className: "flex flex-col",
+				children: [multi ? /* @__PURE__ */ jsx("h3", {
+					className: "sticky top-0 z-[1] m-0 border-b border-rule bg-soft px-4 py-2 text-[12px] font-semibold text-ink2",
+					children: page.title
+				}) : null, page.sections.map((section) => {
+					const items = entries.filter((entry) => section.items.includes(entry.item));
+					if (!items.length) return null;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [section.title ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 pt-3 pb-1 text-[12px] text-muted",
+							children: section.title
+						}) : null, items.map((entry) => {
+							const on = entry.item.id === current;
+							return /* @__PURE__ */ jsxs("button", {
+								ref: on ? activeRef : void 0,
+								type: "button",
+								"aria-current": on ? "true" : void 0,
+								onClick: () => onPick(entry.item.id),
+								className: cn("flex min-h-[48px] cursor-pointer items-center gap-3 border-0 bg-transparent px-4 text-left text-[14px] active:bg-soft2", on ? "font-medium text-ink" : "text-ink2"),
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: cn("flex size-8 shrink-0 items-center justify-center rounded-[8px]", on ? "bg-action-soft text-action" : "bg-soft2 text-muted"),
+										children: /* @__PURE__ */ jsx(Icon, {
+											name: KIND_ICON(entry),
+											size: 15
+										})
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "min-w-0 grow truncate",
+										children: entry.item.title || entry.item.id
+									}),
+									on ? /* @__PURE__ */ jsx(Icon, {
+										name: "check",
+										size: 16,
+										className: "shrink-0 text-action"
+									}) : null
+								]
+							}, entry.item.id);
+						})]
+					}, section.id);
+				})]
+			}, page.id);
+		})
+	});
+}
+//#endregion
 //#region viewer/src/lib/format.ts
 var units = [
 	["year", 31536e3],
@@ -12843,6 +13388,7 @@ function Foot({ children }) {
 }
 function CanvasList({ project }) {
 	const { canvasRowActions: rowActions, canvasesFoot } = useViewer().slots;
+	const phone = useIsPhone();
 	if (!project.canvases.length) return /* @__PURE__ */ jsxs(Panel, { children: [
 		/* @__PURE__ */ jsx(PanelHead, {
 			title: "Canvases",
@@ -12873,7 +13419,31 @@ function CanvasList({ project }) {
 			const actions = rowActions?.(canvas.id);
 			return /* @__PURE__ */ jsx(WithActions, {
 				actions,
-				children: /* @__PURE__ */ jsxs(RowLink, {
+				children: phone ? /* @__PURE__ */ jsxs(RowLink, {
+					to: `/c/${encodeURIComponent(canvas.id)}`,
+					cols: "86px minmax(0,1fr)",
+					align: "ll",
+					pad: "10px 16px",
+					minH: 74,
+					first: !!actions,
+					children: [/* @__PURE__ */ jsx(Cover, { canvas }), /* @__PURE__ */ jsx(Two, {
+						top: canvas.title,
+						bottom: /* @__PURE__ */ jsxs("span", {
+							className: "flex min-w-0 items-center gap-2",
+							children: [canvas.issues ? /* @__PURE__ */ jsx(Badge, {
+								tone: "danger",
+								children: plural(canvas.issues, "problem")
+							}) : null, /* @__PURE__ */ jsxs("span", {
+								className: "truncate",
+								children: [
+									plural(canvas.screens, "screen"),
+									" · ",
+									relativeTime(canvas.updatedAt)
+								]
+							})]
+						})
+					})]
+				}) : /* @__PURE__ */ jsxs(RowLink, {
 					to: `/c/${encodeURIComponent(canvas.id)}`,
 					cols: "86px minmax(0,1fr) auto auto",
 					align: "llrr",
@@ -13003,9 +13573,11 @@ function HomePage() {
 			sub: slots.homeSub ? slots.homeSub : project.static ? `Snapshot built with foss-design ${project.version}` : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs(Mono, {
 					size: 12.5,
+					wrap: true,
 					children: [project.root, "/.design"]
 				}),
-				" · foss-design ",
+				" ",
+				"· foss-design ",
 				project.version
 			] })
 		}),
@@ -16666,6 +17238,7 @@ function MotionPage({ system }) {
 //#region viewer/src/pages/system/nav.tsx
 /** Grouped links of the system section; a wrapping row above the content on narrow screens. */
 function SystemNav({ system }) {
+	const phone = useIsPhone();
 	const kinds = new Set(system.tokens.map((token) => token.kind));
 	const foundations = [
 		{
@@ -16707,6 +17280,33 @@ function SystemNav({ system }) {
 		groups.set(component.group, list);
 	}
 	const guidelines = system.guidelines.filter((guide) => guide.slug !== "overview");
+	if (phone) {
+		const sections = [
+			{
+				label: "",
+				items: [{
+					to: "/system",
+					label: "Overview"
+				}]
+			},
+			{
+				label: "Foundations",
+				items: foundations
+			},
+			{
+				label: "Guidelines",
+				items: guidelines.map((guide) => ({
+					to: `/system/guidelines/${encodeURIComponent(guide.slug)}`,
+					label: guide.title
+				}))
+			},
+			...[...groups].map(([label, items]) => ({
+				label,
+				items
+			}))
+		];
+		return /* @__PURE__ */ jsx(PhoneSystemNav, { sections: sections.filter((section) => section.items.length) });
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col max-lg:gap-1 max-lg:[&_nav]:flex-row max-lg:[&_nav]:flex-wrap",
 		children: [
@@ -16742,6 +17342,70 @@ function SystemNav({ system }) {
 function count(system, kind) {
 	return system.tokens.filter((token) => token.kind === kind).length || void 0;
 }
+/** On a phone: the current section on a full-width button that lists them all in a sheet. */
+function PhoneSystemNav({ sections }) {
+	const [location] = useLocation();
+	const [open, setOpen] = useState(false);
+	const current = sections.flatMap((section) => section.items).find((item) => item.to === location);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setOpen(true),
+		className: "flex h-11 w-full cursor-pointer items-center gap-2 rounded-[8px] border border-rule bg-surface px-3.5 text-left text-[14px] text-ink",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[12.5px] text-muted",
+				children: "Section"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 grow truncate font-medium",
+				children: current?.label ?? "Overview"
+			}),
+			/* @__PURE__ */ jsx(Icon, {
+				name: "chevron-down",
+				size: 16,
+				className: "shrink-0 text-muted"
+			})
+		]
+	}), /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange: setOpen,
+		title: "Design system",
+		children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": "Design system",
+			className: "flex flex-col pb-2",
+			children: sections.map((section) => /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [section.label ? /* @__PURE__ */ jsx("div", {
+					className: "px-4 pt-3 pb-1 text-[12px] text-muted",
+					children: section.label
+				}) : null, section.items.map((item) => {
+					const on = item.to === location;
+					return /* @__PURE__ */ jsxs(Link, {
+						href: item.to,
+						onClick: () => setOpen(false),
+						"aria-current": on ? "page" : void 0,
+						className: cn("flex min-h-[46px] items-center gap-2 px-4 text-[14px] no-underline active:bg-soft2", on ? "font-medium text-ink" : "text-ink2"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 grow truncate",
+								children: item.label
+							}),
+							item.hint ? /* @__PURE__ */ jsx("span", {
+								className: "text-[12.5px] text-muted",
+								children: item.hint
+							}) : null,
+							on ? /* @__PURE__ */ jsx(Icon, {
+								name: "check",
+								size: 16,
+								className: "shrink-0 text-action"
+							}) : null
+						]
+					}, item.to);
+				})]
+			}, section.label || "overview"))
+		})
+	})] });
+}
 //#endregion
 //#region viewer/src/pages/system/other-tokens.tsx
 function OtherTokensPage({ system }) {
@@ -17437,7 +18101,30 @@ function Title() {
 	}, [name]);
 	return null;
 }
+/** Screenshots (`?capture`) always get the canvas, whatever the window. */
+var CAPTURE = new URLSearchParams(window.location.search).has("capture");
+/** The canvas routes' pages; on a phone the canvas is one screen at a time. */
+function useCanvasPages() {
+	const phone = useIsPhone() && !CAPTURE;
+	return {
+		play: (canvas, item) => phone ? /* @__PURE__ */ jsx(PhoneCanvas, {
+			canvasId: canvas,
+			itemId: item
+		}) : /* @__PURE__ */ jsx(PlayPage, {
+			canvasId: canvas,
+			itemId: item
+		}),
+		canvas: (canvas, page) => phone ? /* @__PURE__ */ jsx(PhoneCanvas, {
+			canvasId: canvas,
+			pageId: page
+		}) : /* @__PURE__ */ jsx(CanvasPage, {
+			canvasId: canvas,
+			pageId: page
+		})
+	};
+}
 function Routes() {
+	const pages = useCanvasPages();
 	return /* @__PURE__ */ jsxs(Switch$1, { children: [
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/full/:item",
@@ -17448,21 +18135,15 @@ function Routes() {
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/play/:item",
-			children: (params) => /* @__PURE__ */ jsx(PlayPage, {
-				canvasId: params.canvas,
-				itemId: params.item
-			})
+			children: (params) => pages.play(params.canvas, params.item)
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/p/:page",
-			children: (params) => /* @__PURE__ */ jsx(CanvasPage, {
-				canvasId: params.canvas,
-				pageId: params.page
-			})
+			children: (params) => pages.canvas(params.canvas, params.page)
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas",
-			children: (params) => /* @__PURE__ */ jsx(CanvasPage, { canvasId: params.canvas })
+			children: (params) => pages.canvas(params.canvas)
 		}),
 		/* @__PURE__ */ jsxs(Route, {
 			path: "/system/*?",
@@ -17482,6 +18163,7 @@ function ScopedRoutes({ canvas }) {
 		to: home,
 		replace: true
 	});
+	const pages = useCanvasPages();
 	return /* @__PURE__ */ jsxs(Switch$1, { children: [
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/full/:item",
@@ -17492,21 +18174,15 @@ function ScopedRoutes({ canvas }) {
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/play/:item",
-			children: (params) => guard(params.canvas, /* @__PURE__ */ jsx(PlayPage, {
-				canvasId: canvas,
-				itemId: params.item
-			}))
+			children: (params) => guard(params.canvas, pages.play(canvas, params.item))
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/p/:page",
-			children: (params) => guard(params.canvas, /* @__PURE__ */ jsx(CanvasPage, {
-				canvasId: canvas,
-				pageId: params.page
-			}))
+			children: (params) => guard(params.canvas, pages.canvas(canvas, params.page))
 		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas",
-			children: (params) => guard(params.canvas, /* @__PURE__ */ jsx(CanvasPage, { canvasId: canvas }))
+			children: (params) => guard(params.canvas, pages.canvas(canvas))
 		}),
 		/* @__PURE__ */ jsx(Route, { children: /* @__PURE__ */ jsx(Redirect, {
 			to: home,
@@ -17808,4 +18484,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, 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, useTheme, useThemePref };
+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, useIsPhone, useTheme, useThemePref };