foss-design 0.3.1 → 0.3.3

package/dist/viewer-lib/index.js

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-quer
 import { AnimatePresence, MotionConfig, motion } 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 { Link, Redirect, Route, Router, Switch as Switch$1, useLocation } from "wouter";
+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";
 //#region \0rolldown/runtime.js
@@ -6507,11 +6507,11 @@ function Menu({ trigger, children, width = 220, align = "start", side = "bottom"
 	});
 }
 var menuItemClass = (danger, active) => cn("flex min-h-9 w-full cursor-pointer items-center gap-2.5 border-0 px-3 py-1.5 text-left text-[13.5px] outline-none select-none", "data-[highlighted]:bg-soft data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", active ? "bg-soft" : "bg-transparent", danger ? "text-danger-text" : "text-ink");
-function MenuItem({ children, onSelect, danger, active, disabled, hint }) {
+function MenuItem({ children, onSelect, danger, active, disabled, hint, className }) {
 	return /* @__PURE__ */ jsxs(Item2, {
 		disabled,
 		onSelect,
-		className: menuItemClass(danger, active),
+		className: cn(menuItemClass(danger, active), className),
 		children: [children, hint ? /* @__PURE__ */ jsx("span", {
 			className: "ml-auto pl-3 text-[12px] text-muted",
 			children: hint
@@ -6969,48 +6969,52 @@ function Toaster() {
 	if (!shown) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "pointer-events-none fixed bottom-5 left-1/2 z-[60] flex -translate-x-1/2 flex-col items-center gap-2",
-		children: /* @__PURE__ */ jsx(AnimatePresence, { children: list.map((item) => /* @__PURE__ */ jsxs(motion.div, {
-			initial: {
-				opacity: 0,
-				y: 8,
-				scale: .98
-			},
-			animate: {
-				opacity: 1,
-				y: 0,
-				scale: 1
-			},
-			exit: {
-				opacity: 0,
-				y: 4,
-				transition: { duration: .12 }
-			},
-			transition: {
-				type: "spring",
-				stiffness: 520,
-				damping: 40
-			},
-			className: "flex max-w-[420px] items-center gap-2.5 rounded-[8px] border border-rule bg-surface px-3 py-2 text-[13px] text-ink shadow-pop",
-			children: [
-				item.tone === "error" ? /* @__PURE__ */ jsx(Icon, {
-					name: "alert",
-					size: 15,
-					className: "text-danger-text"
-				}) : /* @__PURE__ */ jsx(Icon, {
-					name: "check",
-					size: 15,
-					className: "text-ok-text"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "font-medium",
-					children: item.title
-				}),
-				item.text ? /* @__PURE__ */ jsx("span", {
-					className: "truncate font-mono text-[12px] text-muted",
-					children: item.text
-				}) : null
-			]
-		}, item.id)) })
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "popLayout",
+			children: list.map((item) => /* @__PURE__ */ jsxs(motion.div, {
+				layout: true,
+				initial: {
+					opacity: 0,
+					y: 8,
+					scale: .98
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					y: 4,
+					transition: { duration: .12 }
+				},
+				transition: {
+					type: "spring",
+					stiffness: 520,
+					damping: 40
+				},
+				className: "flex max-w-[min(420px,calc(100vw-32px))] min-w-0 items-center gap-2.5 rounded-[8px] border border-rule bg-surface px-3 py-2 text-[13px] text-ink shadow-pop",
+				children: [
+					item.tone === "error" ? /* @__PURE__ */ jsx(Icon, {
+						name: "alert",
+						size: 15,
+						className: "text-danger-text"
+					}) : /* @__PURE__ */ jsx(Icon, {
+						name: "check",
+						size: 15,
+						className: "text-ok-text"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-medium whitespace-nowrap",
+						children: item.title
+					}),
+					item.text ? /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-mono text-[12px] text-muted",
+						children: item.text
+					}) : null
+				]
+			}, item.id))
+		})
 	});
 }
 //#endregion
@@ -7673,7 +7677,7 @@ var BADGE = {
 };
 function Badge({ tone = "neutral", children, className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline-flex h-[22px] shrink-0 items-center whitespace-nowrap rounded-[6px] px-2 text-[12px] font-medium", BADGE[tone], className),
+		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
 	});
 }
@@ -8729,6 +8733,94 @@ function Tooltip({ content, children, side = "top", align = "center", className
 	}) })] });
 }
 //#endregion
+//#region viewer/src/pages/canvas/full-page.tsx
+/** The full-window page of one screen, relative to the viewer's base. */
+var fullHref = (canvas, item, theme) => `/c/${encodeURIComponent(canvas)}/full/${encodeURIComponent(item)}?theme=${theme}`;
+/**
+* "Open in a new tab" for a screen. A sandboxed viewer serves screens to its frames only, so the
+* tab gets the full-window page of the viewer; otherwise the screen's own URL.
+*/
+function useOpenUrl(canvasId, item, theme) {
+	const { frameSandbox } = useViewer();
+	const { base } = useRouter();
+	if (!item) return null;
+	if (item.kind === "url") return item.url;
+	if (!frameSandbox) return absoluteUrl(frameSrc(item.url, item.theme ?? theme));
+	return absoluteUrl(`${base}${fullHref(canvasId, item.id, item.theme ?? theme)}`);
+}
+/** `/c/:canvas/full/:item`: one screen filling the window, a way out on hover and Esc. */
+function FullPage({ canvasId, itemId }) {
+	const { data: canvas, error, isLoading } = useCanvas(canvasId);
+	const [, navigate] = useLocation();
+	const { frameSandbox } = useViewer();
+	const appTheme = useTheme();
+	const frame = useRef(null);
+	const param = new URLSearchParams(window.location.search).get("theme");
+	const items = canvas ? canvas.pages.flatMap((page) => page.sections.flatMap((section) => section.items.filter((item) => item.kind === "screen" || item.kind === "url"))) : [];
+	const item = items.find((entry) => entry.id === itemId);
+	const theme = (item?.kind === "screen" ? item.theme : void 0) ?? (param === "light" || param === "dark" ? param : canvas?.theme ?? appTheme);
+	const url = item ? item.kind === "screen" ? frameSrc(item.url, theme) : item.url : "";
+	const back = `/c/${encodeURIComponent(canvasId)}`;
+	useEffect(() => {
+		if (item) document.title = `${item.title} · ${canvas?.title ?? ""}`;
+	}, [item, canvas?.title]);
+	useEffect(() => {
+		const onKey = (event) => {
+			if (event.key === "Escape") navigate(back);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [navigate, back]);
+	useEffect(() => {
+		const el = frame.current;
+		if (!el || item?.kind !== "screen") return;
+		return listenToFrame(el, (message) => {
+			if (message.type === "keydown" && message.code === "Escape") navigate(back);
+			else if (message.type === "go") {
+				const id = message.target.includes("/") ? message.target.split("/")[1] : message.target;
+				if (items.some((entry) => entry.id === id)) navigate(fullHref(canvasId, id, theme), { replace: true });
+			}
+		});
+	}, [url, item?.kind]);
+	if (error) return /* @__PURE__ */ jsx(NotFound, {
+		title: "Canvas not found",
+		text: error.message
+	});
+	if (isLoading || !canvas) return /* @__PURE__ */ jsx("div", { className: "h-dvh bg-surface" });
+	if (!item) return /* @__PURE__ */ jsx(NotFound, {
+		title: "Screen not found",
+		text: `No screen "${itemId}" on this canvas.`
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group fixed inset-0 bg-surface",
+		children: [/* @__PURE__ */ jsx("iframe", {
+			ref: frame,
+			src: url,
+			title: item.title,
+			allow: "clipboard-read; clipboard-write; fullscreen",
+			sandbox: frameSandbox,
+			className: "block h-full w-full border-0",
+			style: { colorScheme: theme },
+			onLoad: () => item.kind === "screen" && sendTheme(frame.current, theme)
+		}, `${item.id}:${item.kind === "screen" ? item.rev : item.url}`), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-x-0 top-0 flex justify-end p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100 focus-within:opacity-100",
+			children: /* @__PURE__ */ jsxs(Link, {
+				href: back,
+				className: "pointer-events-auto flex h-8 items-center gap-2 rounded-[8px] border border-rule bg-surface px-3 text-[12.5px] text-ink2 no-underline shadow-pop hover:text-ink",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 14
+					}),
+					"Back to ",
+					canvas.title,
+					/* @__PURE__ */ jsx(Kbd, { children: "esc" })
+				]
+			})
+		})]
+	});
+}
+//#endregion
 //#region viewer/src/pages/canvas/sidebar.tsx
 function itemIcon(item) {
 	if (item.kind === "note") return "note";
@@ -8931,11 +9023,10 @@ function SelectionBar({ canvas, store, layoutItems, theme, onPlay, inspect }) {
 	const selected = useStore(store, (state) => state.selected);
 	const active = useStore(store, (state) => state.active);
 	const status = useStore(store, (state) => selected ? state.frames[selected] : void 0);
-	const { frameSandbox } = useViewer();
 	const item = layoutItems.find((i) => i.id === selected);
+	const openUrl = useOpenUrl(canvas.id, item?.kind === "screen" || item?.kind === "url" ? item : void 0, theme);
 	if (!item) return null;
 	const frame = item.kind === "screen" || item.kind === "url";
-	const openUrl = item.kind === "screen" && !frameSandbox ? absoluteUrl(frameSrc(item.url, item.theme ?? theme)) : item.kind === "url" ? item.url : null;
 	const reload = () => reloadFrame(document.querySelector(`[data-item="${CSS.escape(item.id)}"] iframe`));
 	const errors = status?.errors ?? [];
 	return /* @__PURE__ */ jsx("div", {
@@ -12396,6 +12487,7 @@ function Player({ canvas, itemId }) {
 	const entry = list[index];
 	const item = entry?.item;
 	const frameTheme = item?.kind === "screen" ? item.theme ?? theme : theme;
+	const openUrl = useOpenUrl(canvas.id, item, frameTheme);
 	const [openTheme] = useState(frameTheme);
 	const src = item ? item.kind === "screen" ? frameSrc(item.url, openTheme) : item.url : "";
 	const frames = useMemo(() => frameEl && item?.kind === "screen" ? [frameEl] : [], [frameEl, item?.kind]);
@@ -12438,7 +12530,6 @@ function Player({ canvas, itemId }) {
 	const height = item.frame.height === "auto" ? Math.max(area.h - 48, 400) : item.frame.height;
 	const scale = fit === "fit" ? Math.min(1, (area.w - 48) / width, (area.h - 48) / height) : 1;
 	const fits = width <= area.w - 48 && height <= area.h - 48;
-	const openUrl = item.kind === "url" ? item.url : frameSandbox ? null : absoluteUrl(frameSrc(item.url, frameTheme));
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-dvh flex-col",
 		children: [
@@ -12639,6 +12730,44 @@ function plural(count, one, many = `${one}s`) {
 	return `${count} ${count === 1 ? one : many}`;
 }
 //#endregion
+//#region viewer/src/ui/skeleton.tsx
+/** A placeholder block that pulses while its content loads. */
+function Skeleton({ className, style }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("block animate-pulse rounded-[6px] bg-soft2", className),
+		style
+	});
+}
+/**
+* Rows of a loading panel: a leading block, two lines of text and a trailing block, with the
+* panel's row borders, so the real rows replace them without a jump.
+*/
+function SkeletonRows({ rows = 3, lead = 28, minH = 56 }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-label": "Loading",
+		children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 border-t border-rule px-4",
+			style: {
+				minHeight: minH,
+				opacity: 1 - index * .18
+			},
+			children: [
+				lead ? /* @__PURE__ */ jsx(Skeleton, { style: {
+					width: lead,
+					height: Math.min(lead, minH - 20)
+				} }) : null,
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 grow flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-[38%]" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-[62%]" })]
+				}),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" })
+			]
+		}, index))
+	});
+}
+//#endregion
 //#region viewer/src/pages/home.tsx
 function Cover({ canvas }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -12666,68 +12795,84 @@ function WithActions({ actions, children }) {
 		})]
 	});
 }
+/** The embedding app's strip under the canvas list. */
+function Foot({ children }) {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-2.5 border-t border-rule bg-soft px-4 py-3 text-[12.5px] text-muted",
+		children
+	});
+}
 function CanvasList({ project }) {
-	const rowActions = useViewer().slots.canvasRowActions;
-	if (!project.canvases.length) return /* @__PURE__ */ jsxs(Panel, { children: [/* @__PURE__ */ jsx(PanelHead, {
-		title: "Canvases",
-		count: 0
-	}), /* @__PURE__ */ jsx(PanelBody, { children: /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-2 py-6 text-center",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-[14px] text-ink2",
-			children: "No canvases yet."
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "text-[13px] text-muted",
-			children: [
-				"Ask your agent to design something, or run ",
-				/* @__PURE__ */ jsx(Mono, { children: "design new <name>" }),
-				" in the project."
-			]
-		})]
-	}) })] });
-	return /* @__PURE__ */ jsxs(Panel, { children: [/* @__PURE__ */ jsx(PanelHead, {
-		title: "Canvases",
-		count: project.canvases.length
-	}), project.canvases.map((canvas) => {
-		const actions = rowActions?.(canvas.id);
-		return /* @__PURE__ */ jsx(WithActions, {
-			actions,
-			children: /* @__PURE__ */ jsxs(RowLink, {
-				to: `/c/${encodeURIComponent(canvas.id)}`,
-				cols: "86px minmax(0,1fr) auto auto",
-				align: "llrr",
-				pad: "10px 16px",
-				minH: 74,
-				first: !!actions,
+	const { canvasRowActions: rowActions, canvasesFoot } = useViewer().slots;
+	if (!project.canvases.length) return /* @__PURE__ */ jsxs(Panel, { children: [
+		/* @__PURE__ */ jsx(PanelHead, {
+			title: "Canvases",
+			count: 0
+		}),
+		/* @__PURE__ */ jsx(PanelBody, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2 py-6 text-center",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-[14px] text-ink2",
+				children: "No canvases yet."
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "text-[13px] text-muted",
 				children: [
-					/* @__PURE__ */ jsx(Cover, { canvas }),
-					/* @__PURE__ */ jsx(Two, {
-						top: canvas.title,
-						bottom: /* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: canvas.description ?? canvas.id
-						})
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-2 text-[12.5px] whitespace-nowrap text-muted",
-						children: [
-							canvas.issues ? /* @__PURE__ */ jsx(Badge, {
-								tone: "danger",
-								children: plural(canvas.issues, "problem")
-							}) : null,
-							plural(canvas.screens, "screen"),
-							" · ",
-							plural(canvas.pages, "page")
-						]
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "w-[92px] text-[12.5px] whitespace-nowrap text-muted",
-						children: relativeTime(canvas.updatedAt)
-					})
+					"Ask your agent to design something, or run ",
+					/* @__PURE__ */ jsx(Mono, { children: "design new <name>" }),
+					" in the project."
 				]
-			})
-		}, canvas.id);
-	})] });
+			})]
+		}) }),
+		/* @__PURE__ */ jsx(Foot, { children: canvasesFoot })
+	] });
+	return /* @__PURE__ */ jsxs(Panel, { children: [
+		/* @__PURE__ */ jsx(PanelHead, {
+			title: "Canvases",
+			count: project.canvases.length
+		}),
+		project.canvases.map((canvas) => {
+			const actions = rowActions?.(canvas.id);
+			return /* @__PURE__ */ jsx(WithActions, {
+				actions,
+				children: /* @__PURE__ */ jsxs(RowLink, {
+					to: `/c/${encodeURIComponent(canvas.id)}`,
+					cols: "86px minmax(0,1fr) auto auto",
+					align: "llrr",
+					pad: "10px 16px",
+					minH: 74,
+					first: !!actions,
+					children: [
+						/* @__PURE__ */ jsx(Cover, { canvas }),
+						/* @__PURE__ */ jsx(Two, {
+							top: canvas.title,
+							bottom: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: canvas.description ?? canvas.id
+							})
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-2 text-[12.5px] whitespace-nowrap text-muted",
+							children: [
+								canvas.issues ? /* @__PURE__ */ jsx(Badge, {
+									tone: "danger",
+									children: plural(canvas.issues, "problem")
+								}) : null,
+								plural(canvas.screens, "screen"),
+								" · ",
+								plural(canvas.pages, "page")
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "w-[92px] text-[12.5px] whitespace-nowrap text-muted",
+							children: relativeTime(canvas.updatedAt)
+						})
+					]
+				})
+			}, canvas.id);
+		}),
+		/* @__PURE__ */ jsx(Foot, { children: canvasesFoot })
+	] });
 }
 function SystemCard({ project }) {
 	const system = project.system;
@@ -12760,21 +12905,25 @@ function SystemCard({ project }) {
 		/* @__PURE__ */ jsx(KV, {
 			label: "Tokens",
 			labelWidth: 120,
+			end: true,
 			children: /* @__PURE__ */ jsx(Count, { value: system.tokens })
 		}),
 		/* @__PURE__ */ jsx(KV, {
 			label: "Components",
 			labelWidth: 120,
+			end: true,
 			children: /* @__PURE__ */ jsx(Count, { value: system.components })
 		}),
 		/* @__PURE__ */ jsx(KV, {
 			label: "Guidelines",
 			labelWidth: 120,
+			end: true,
 			children: /* @__PURE__ */ jsx(Count, { value: system.guidelines })
 		}),
 		system.issues ? /* @__PURE__ */ jsx(KV, {
 			label: "Problems",
 			labelWidth: 120,
+			end: true,
 			children: /* @__PURE__ */ jsx(Badge, {
 				tone: "danger",
 				children: system.issues
@@ -12782,6 +12931,25 @@ function SystemCard({ project }) {
 		}) : null
 	] });
 }
+/** The home page's shape while the project loads, so it fills in instead of popping in. */
+function HomeSkeleton() {
+	return /* @__PURE__ */ jsxs(Content, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2.5 pt-1 pb-1",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-[220px]" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-[300px]" })]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "grid items-start gap-5 max-lg:grid-cols-1!",
+		style: { gridTemplateColumns: "minmax(0,1fr) 340px" },
+		children: [/* @__PURE__ */ jsxs(Panel, { children: [/* @__PURE__ */ jsx(PanelHead, { title: "Canvases" }), /* @__PURE__ */ jsx(SkeletonRows, {
+			rows: 3,
+			lead: 86,
+			minH: 74
+		})] }), /* @__PURE__ */ jsxs(Panel, { children: [/* @__PURE__ */ jsx(PanelHead, { title: "Design system" }), /* @__PURE__ */ jsx(SkeletonRows, {
+			rows: 3,
+			lead: 0,
+			minH: 40
+		})] })]
+	})] });
+}
 function HomePage() {
 	const { data: project, error, isLoading } = useProject();
 	const { slots } = useViewer();
@@ -12789,12 +12957,12 @@ function HomePage() {
 		title: "Could not load the project",
 		text: error.message
 	});
-	if (isLoading || !project) return null;
+	if (isLoading || !project) return /* @__PURE__ */ jsx(HomeSkeleton, {});
 	return /* @__PURE__ */ jsxs(Content, { children: [
 		/* @__PURE__ */ jsx(PageHead, {
 			title: project.name,
 			right: slots.homeActions,
-			sub: project.static ? `Snapshot built with foss-design ${project.version}` : /* @__PURE__ */ jsxs(Fragment, { children: [
+			sub: slots.homeSub ? slots.homeSub : project.static ? `Snapshot built with foss-design ${project.version}` : /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsxs(Mono, {
 					size: 12.5,
 					children: [project.root, "/.design"]
@@ -17233,6 +17401,13 @@ function Title() {
 }
 function Routes() {
 	return /* @__PURE__ */ jsxs(Switch$1, { children: [
+		/* @__PURE__ */ jsx(Route, {
+			path: "/c/:canvas/full/:item",
+			children: (params) => /* @__PURE__ */ jsx(FullPage, {
+				canvasId: params.canvas,
+				itemId: params.item
+			})
+		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/play/:item",
 			children: (params) => /* @__PURE__ */ jsx(PlayPage, {
@@ -17270,6 +17445,13 @@ function ScopedRoutes({ canvas }) {
 		replace: true
 	});
 	return /* @__PURE__ */ jsxs(Switch$1, { children: [
+		/* @__PURE__ */ jsx(Route, {
+			path: "/c/:canvas/full/:item",
+			children: (params) => guard(params.canvas, /* @__PURE__ */ jsx(FullPage, {
+				canvasId: canvas,
+				itemId: params.item
+			}))
+		}),
 		/* @__PURE__ */ jsx(Route, {
 			path: "/c/:canvas/play/:item",
 			children: (params) => guard(params.canvas, /* @__PURE__ */ jsx(PlayPage, {
@@ -17387,7 +17569,7 @@ function Avatar({ src, name, size = 28, shape = "circle", className }) {
 * 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.
 */
-function Dialog({ open, onOpenChange, title, description, children, actions, footNote, width = 440 }) {
+function Dialog({ open, onOpenChange, title, description, children, actions, footNote, below, width = 440 }) {
 	return /* @__PURE__ */ jsx(Dialog$1, {
 		open,
 		onOpenChange,
@@ -17405,6 +17587,11 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 					children: /* @__PURE__ */ jsx(DialogContent, {
 						asChild: true,
 						forceMount: true,
+						onOpenAutoFocus: (event) => {
+							event.preventDefault();
+							const content = event.currentTarget;
+							(content.querySelector("input:not([type=\"hidden\"]), textarea, [data-autofocus]") ?? content).focus({ preventScroll: true });
+						},
 						...description ? {} : { "aria-describedby": void 0 },
 						children: /* @__PURE__ */ jsxs(motion.div, {
 							initial: {
@@ -17427,7 +17614,8 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 								stiffness: 560,
 								damping: 40
 							},
-							className: cn(floatingSurface, "flex max-w-full flex-col"),
+							tabIndex: -1,
+							className: cn(floatingSurface, "flex max-w-full flex-col outline-none"),
 							style: { width },
 							children: [
 								/* @__PURE__ */ jsx(PanelHead, {
@@ -17450,6 +17638,10 @@ function Dialog({ open, onOpenChange, title, description, children, actions, foo
 									className: "m-0 text-[13.5px] text-ink2",
 									children: description
 								}) : null, children] }) : null,
+								below ? /* @__PURE__ */ jsx("div", {
+									className: "max-h-[min(56vh,520px)] min-h-0 overflow-y-auto border-t border-rule",
+									children: below
+								}) : null,
 								actions || footNote ? /* @__PURE__ */ jsx(PanelFoot, {
 									left: footNote,
 									right: actions
@@ -17578,4 +17770,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, 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, 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 };