babavoss 0.12.6 → 0.13.1

package/src/desktop/view.tsx

@@ -4,9 +4,9 @@ import { useColumn, useHand, useResource } from "../web/hooks.ts";
 import { useScope } from "../web/core.tsx";
 import { useBaba } from "../web/state.tsx";
 import type { Hand } from "../web/app.tsx";
-import { Bob } from "./bob.ts";
 import type { IconShape } from "./icons.ts";
 import { canonicalPath, matchRoute } from "./routes.ts";
+import { commandOf, formatBinding, keymapOf, type Keymap, type KeyOverrides } from "./keys.ts";
 import { searchApps, type DesktopSystem, type DesktopApp, type DesktopWindow, type Theme, type Session } from "./index.ts";
 
 /** What an app receives from the shell: where it is, what its window remembers, and the shell's verbs, so it never names an action. */
@@ -46,7 +46,9 @@ export interface DesktopProps {
   address?: boolean;
   /** Where the address begins: the baba's own, `/NAME`, unless given. */
   base?: string;
-  /** Where this baba was opened from, voss's picker: a link before the title on the bar, and the launcher's last row, Leave. A page inside a baba goes nowhere else. */
+  /** The person's own settings, voss's, the same on every baba: the theme over the baba's, and the keys remapped. */
+  settings?: { theme?: Theme; keys?: KeyOverrides } | null;
+  /** Where this baba was opened from, voss's picker: the launcher's last row, Leave. A page inside a baba goes nowhere else. */
   root?: Root;
 }
 /** The way out of a baba: the picker's name and address. */
@@ -54,8 +56,10 @@ export interface Root { label: string; href: string }
 type Row<T> = T & { entity: Entity };
 /** The plus of a new session in the launcher. */
 const plusIcon: readonly IconShape[] = [{ tag: "path", attrs: { d: "M5 12h14" } }, { tag: "path", attrs: { d: "M12 5v14" } }];
-/** The way out, in the launcher: an arrow leaving a box. */
-const leaveIcon: readonly IconShape[] = [{ tag: "path", attrs: { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" } }, { tag: "polyline", attrs: { points: "16 17 21 12 16 7" } }, { tag: "line", attrs: { x1: "21", x2: "9", y1: "12", y2: "12" } }];
+/** The way out, on the mark and in the launcher: an arrow leaving a box to the left, toward the bar's edge, where voss is; Lucide's log-out, mirrored. */
+const leaveIcon: readonly IconShape[] = [{ tag: "path", attrs: { d: "M15 21h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4" } }, { tag: "polyline", attrs: { points: "8 17 3 12 8 7" } }, { tag: "line", attrs: { x1: "3", x2: "15", y1: "12", y2: "12" } }];
+/** The search's icon in the launcher: a magnifier. */
+const searchIcon: readonly IconShape[] = [{ tag: "circle", attrs: { cx: "11", cy: "11", r: "8" } }, { tag: "path", attrs: { d: "m21 21-4.3-4.3" } }];
 /** A session's icon in the launcher: a window with its bar. */
 const sessionIcon: readonly IconShape[] = [{ tag: "rect", attrs: { x: "3", y: "5", width: "18", height: "14", rx: "2" } }, { tag: "path", attrs: { d: "M3 9.5h18" } }];
 /** In an old hash, the tab's own session rather than a named one. */
@@ -76,8 +80,13 @@ export interface Picture {
   sessions?: SessionRow[];
   /** The baba's theme; the session's old field when a picture has none. */
   theme?: Theme;
+  /** The keys the person remapped, voss's settings'; every other command has its default. */
+  keys?: KeyOverrides;
 }
 
+/** How the launcher shows: as the mark's tab, a place with its own address, or quick, over the app in front, which Escape goes back to. */
+export type LauncherMode = "tab" | "quick";
+
 /** The address of a window: the baba's base, the app, its path, which is left off at the app's home; the base alone is the launcher. */
 export function desktopAddress(base: string, app?: string, path = "/") {
   return app ? `${base}/${encodeURIComponent(app)}${path === "/" ? "" : path}` : `${base}/`;
@@ -116,7 +125,7 @@ function addressedSession(): string | undefined {
 }
 
 /** Only the desktop columns are subscribed here; a busy pond does not redraw the bar. */
-export function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", address = true, base: givenBase, root }: DesktopProps) {
+export function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", address = true, base: givenBase, root, settings: person }: DesktopProps) {
   const renderers = apps ?? surfaces ?? {};
   const scope = useScope();
   const base = givenBase ?? `/${encodeURIComponent(scope)}`;
@@ -125,7 +134,11 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
   const iconRows = useColumn(selectors.icons, system.desktopIcon);
   const sessions = useColumn(selectors.sessions, system.desktopSession);
   const windows = useColumn(selectors.windows, system.desktopWindow);
-  const theme = useResource(system.desktopSettings)?.theme ?? "system";   // undefined before the first frame
+  // The person's settings: voss's pages look and key alike on every baba. Until they arrive, the theme the page's head put on the root element
+  // from this browser's memory of them, else the system's; only a desktop inside another page wears the baba's own.
+  const babaTheme = useResource(system.desktopSettings)?.theme;
+  const remembered = address ? document.documentElement.dataset.theme as Theme | undefined : undefined;
+  const theme: Theme = person?.theme ?? (address ? remembered ?? "system" : babaTheme ?? "system");
   const { fire, ready, connected } = useBaba<DesktopSystem>();
   const [error, setError] = useState<string | null>(null);
   // The tab's session: the one fixed by the page, else the address's, else the one this tab had, else none yet, and the tab enters a new one.
@@ -151,6 +164,7 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
       return { entity, key: value.key, touched: value.touched ?? 0, windows: wins.length, front: front ? front.title || (front.path === "/" ? s?.title ?? null : front.path) : null };
     }).sort((a, b) => b.touched - a.touched || b.entity - a.entity),
     theme,
+    ...(person?.keys ? { keys: person.keys } : {}),
   } : null;
   const hand: Hand = { fire: (name, args) => {
     setError(null);
@@ -185,7 +199,12 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
   const pending = useRef<string | null>(null);
   const initialized = useRef(false);
   // Asked by the address for the launcher, or for an app, which closes it: counts, so every arrival asks again.
-  const [launch, setLaunch] = useState(0);
+  // What the address names is known before the first frame: the launcher shows at once for the base alone, and holds back for an app on its way, so neither flashes the other.
+  const first = useMemo(() => address ? parseDesktopAddress(base, location.pathname) : null, []);
+  const [launch, setLaunch] = useState(first && !first.app ? 1 : 0);
+  // An app the address asked for, on its way: until it is in front the launcher holds back, so opening an app's address never flashes it.
+  const [arriving, setArriving] = useState(!!first?.app);
+  useEffect(() => { if (!arriving) return; const t = setTimeout(() => setArriving(false), 2000); return () => clearTimeout(t); }, [arriving]);
   const [dismiss, setDismiss] = useState(0);
   /** Goes to a session: another one, or a new one. The address is written first, to what is in front there, so the adapter agrees with the key rather than pulling the tab back; it replaces the entry, since the address names no session and Back could not return to this one. */
   const go = (next: string | null) => {
@@ -213,9 +232,11 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
       const expected = desktopAddress(base, route.app, path);
       if (expected === current.current) { if (location.pathname !== expected) history.replaceState(null, "", expected); return; }
       pending.current = expected;
+      setArriving(true);
       void fire("desktop-open", { session: key, app: route.app, path }).catch((e) => {
         if (!live) return;
         pending.current = null;
+        setArriving(false);
         setError(String(e));
         if (current.current) history.replaceState(null, "", current.current);
       });
@@ -228,9 +249,12 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
   }, [address, ready, key, !!picture, base, fire]);
   useEffect(() => {
     if (!address || !initialized.current || !here) return;
+    // Nothing in front yet while the address's app is on its way: the ask is not over, and the address stays as it is.
+    if (pending.current && here === desktopAddress(base)) return;
     // What the address asked for has come, or something else came first: either way the ask is over. Arriving where the address asked rewrites its spelling, no new entry.
     const asked = pending.current === here;
     pending.current = null;
+    setArriving(false);
     if (here === agreed.current) return;
     agreed.current = here;
     if (location.pathname !== here) {
@@ -238,25 +262,41 @@ export function Desktop({ system, apps, surfaces, session: fixed, title = "Deskt
       else history.pushState(null, "", here);
     }
   }, [address, here, base]);
-  /** The launcher closed with nothing new chosen: the address says again what is in front. A choice is left to the writer above, which pushes it, so Back returns to the launcher. */
-  const launcherShown = (open: boolean) => {
-    if (open || !address || !current.current || current.current !== agreed.current) return;
-    if (location.pathname === `${base}/` && current.current !== `${base}/`) history.replaceState(null, "", current.current);
+  /**
+   * The launcher's tab is a place: chosen on the page, its address is pushed, with the address it was chosen over, so Back returns there.
+   * Left with nothing new chosen, the address goes back to what is in front: by Back when this page pushed the entry over that very address,
+   * else in place, since the entry before it may be another app's (Back from a later one came here). A choice is left to the writer above, which pushes it.
+   * The quick launcher, ⌘P's, is not a place: the address never hears of it.
+   */
+  const launcherShown = (mode: LauncherMode | null) => {
+    if (!address || !current.current) return;
+    const at = location.pathname === `${base}/`;
+    if (mode === "tab") { if (!at) history.pushState({ launcher: true, over: current.current }, "", `${base}/`); return; }
+    if (current.current !== agreed.current || !at || current.current === `${base}/`) return;
+    const entry = history.state as { launcher?: boolean; over?: string } | null;
+    if (entry?.launcher && entry.over === current.current) history.back(); else history.replaceState(null, "", current.current);
   };
 
   return <>
     {error && <div className="desktop-error" role="alert">{error}<button onClick={() => setError(null)}>Dismiss</button></div>}
     {!connected && ready && <p className="desktop-error" role="status">Reconnecting to the desktop…</p>}
-    {picture ? <DesktopFrame picture={picture} title={title} hand={hand} root={root} go={fixed ? undefined : go} launch={launch} dismiss={dismiss} onLauncher={launcherShown} render={(app, props) => {
+    {picture ? <DesktopFrame picture={picture} title={title} hand={hand} root={root} documentTitle={address} launcherHref={address ? `${base}/` : undefined} go={fixed ? undefined : go} launch={launch} dismiss={dismiss} arriving={arriving} onLauncher={launcherShown} render={(app, props) => {
       const View = renderers[app.key];
       return View ? <View {...props} /> : <p className="desktop-empty">No component is composed for the app {app.title}.</p>;
-    }} /> : <p className="desktop-empty" role="status">Opening desktop…</p>}
+    }} /> : <DesktopSkeleton title={title} />}
   </>;
 }
 
-/** The two eyes, the mark of Baba Voss, drawn in the current color. Without `large`, the larger eye is away, it is the launcher's dot then, and the smaller one moves to the middle. */
-export function Eyes({ size = 16, large = true, settle = false }: { size?: number; large?: boolean; settle?: boolean }) {
-  return <svg className={`desktop-eyes${large ? "" : " is-alone"}${settle ? " is-settling" : ""}`} viewBox="0 0 100 100" width={size} height={size} aria-hidden="true" fill="currentColor"><circle className="desktop-eye-large" cx="33.772" cy="50" r="18" /><circle className="desktop-eye-small" cx="71.5" cy="50" r="12.728" /></svg>;
+/** The desktop before its state arrives: the bar and the mark on the desk, as the desktop will draw them, so the page never flashes another look while it loads. */
+export function DesktopSkeleton({ title }: { title?: string }) {
+  return <div className="desktop" aria-busy="true" aria-label="Opening the desktop">
+    <header className="desktop-bar"><span className="desktop-pill desktop-pill-mark"><span className="desktop-pill-label"><span className="desktop-pill-icon"><Eyes size={18} /></span>{title && <PillText text={title} />}</span></span></header>
+  </div>;
+}
+
+/** The two eyes, the mark of Baba Voss, drawn in the current color. Without `large`, the larger eye is away and the smaller one moves to the middle. */
+export function Eyes({ size = 16, large = true }: { size?: number; large?: boolean }) {
+  return <svg className={`desktop-eyes${large ? "" : " is-alone"}`} viewBox="0 0 100 100" width={size} height={size} aria-hidden="true" fill="currentColor"><circle className="desktop-eye-large" cx="33.772" cy="50" r="18" /><circle className="desktop-eye-small" cx="71.5" cy="50" r="12.728" /></svg>;
 }
 
 /**
@@ -291,7 +331,7 @@ const middleCloses = (close: (() => void) | undefined) => close ? {
   onAuxClick: (e: { button: number; preventDefault(): void }) => { if (e.button === 1) { e.preventDefault(); close(); } },
 } : {};
 
-function WindowPill({ label, active, hand, icon, shortcut, enter, onSelect, onClose }: { label: string; active: boolean; hand?: Hand; icon: ReactNode; shortcut?: boolean; enter?: boolean; onSelect(): void; onClose(): void }) {
+function WindowPill({ label, active, hand, icon, shortcut, enter, onSelect, onClose }: { label: string; active: boolean; hand?: Hand; icon: ReactNode; shortcut?: string; enter?: boolean; onSelect(): void; onClose(): void }) {
   const pill = useRef<HTMLSpanElement>(null);
   // Arriving, a pill drops into its place from above the strip, which clips it, and lands with a small bounce; it takes its place at once, so no other pill moves.
   useLayoutEffect(() => {
@@ -303,23 +343,32 @@ function WindowPill({ label, active, hand, icon, shortcut, enter, onSelect, onCl
   }, []);
   return <span ref={pill} className={`desktop-pill${active ? " is-active" : ""}`} role="tab" aria-selected={active} title={label} {...middleCloses(hand && onClose)}>
     <button type="button" className="desktop-pill-label" disabled={!hand} onClick={onSelect}><span className="desktop-pill-icon">{icon}</span><PillText text={label} /></button>
-    {hand && <button type="button" className="desktop-pill-close" aria-label={`Close ${label}`} title={`Close ${label}${shortcut ? " (⌘/Ctrl W)" : ""}`} onClick={onClose}><Cross /></button>}
+    {hand && <button type="button" className="desktop-pill-close" aria-label={`Close ${label}`} title={`Close ${label}${shortcut ? ` (${shortcut})` : ""}`} onClick={onClose}><Cross /></button>}
   </span>;
 }
 
-/** The strip of pills: it scrolls sideways, and fades into whatever is behind it at an edge with more beyond it. */
-function Pills({ children, label }: { children: ReactNode; label: string }) {
-  const ref = useRef<HTMLDivElement>(null);
+/** The classes that fade a scrolling box into whatever is behind it at each edge with more beyond it: sideways, `is-faded-left` and `is-faded-right`; down, `is-faded-top` and `is-faded-bottom`. */
+function useScrollFade<T extends HTMLElement>(axis: "x" | "y") {
+  const ref = useRef<T>(null);
   const [fade, setFade] = useState("");
   useEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
-    const measure = () => setFade(`${el.scrollLeft > 1 ? " is-faded-left" : ""}${el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? " is-faded-right" : ""}`);
+    const measure = () => {
+      const [at, size, whole, start, end] = axis === "x" ? [el.scrollLeft, el.clientWidth, el.scrollWidth, "left", "right"] : [el.scrollTop, el.clientHeight, el.scrollHeight, "top", "bottom"];
+      setFade(`${at > 1 ? ` is-faded-${start}` : ""}${at + size < whole - 1 ? ` is-faded-${end}` : ""}`);
+    };
     measure();
     const ro = new ResizeObserver(measure); ro.observe(el); for (const child of el.children) ro.observe(child);
     el.addEventListener("scroll", measure, { passive: true });
     return () => { ro.disconnect(); el.removeEventListener("scroll", measure); };
   });
+  return { ref, fade };
+}
+
+/** The strip of pills: it scrolls sideways, and fades into whatever is behind it at an edge with more beyond it. */
+function Pills({ children, label }: { children: ReactNode; label: string }) {
+  const { ref, fade } = useScrollFade<HTMLDivElement>("x");
   return <div ref={ref} className={`desktop-pills${fade}`} role="tablist" aria-label={label} onWheel={(e) => { const el = ref.current; if (el && !e.deltaX && e.deltaY && el.scrollWidth > el.clientWidth) { el.scrollLeft += e.deltaY; } }}>{children}</div>;
 }
 
@@ -350,46 +399,72 @@ function rank(texts: string[], words: string[]): number | null {
 }
 
 /** The same drawing is used live and for scenario frames. It never fetches state. */
-export function DesktopFrame({ picture, title, hand, render, root, go, launch, dismiss, onLauncher }: {
+export function DesktopFrame({ picture, title, hand, render, root, documentTitle = false, launcherHref, go, launch, dismiss, arriving = false, onLauncher }: {
   picture: Picture; title: string; hand?: Hand; render(app: Row<DesktopApp>, props: AppProps): ReactNode;
-  /** The picker this baba was opened from: a link on the bar, and Leave, the launcher's last row. */
+  /** The picker this baba was opened from: Leave, the launcher's last row. */
   root?: Root;
+  /** Names the page after the tab in front, the window's title then the desktop's, or the desktop alone on the launcher's; for a frame that is the whole page. */
+  documentTitle?: boolean;
+  /** The launcher's own address, which a ⌘/Ctrl or middle click on the mark opens in a new browser tab. */
+  launcherHref?: string;
   /** Takes the tab to another session by key, or to a new one with null; without it the launcher lists no sessions. */
   go?: (key: string | null) => void;
   /** Opens the launcher each time it changes: the page's address asked for it. */
   launch?: number;
+  /** An app is on its way to the front: with nothing in front meanwhile, the page shows an empty sheet, not the launcher. */
+  arriving?: boolean;
   /** Closes the launcher each time it changes: the page's address named an app. */
   dismiss?: number;
-  /** Told whether the launcher shows, each time that changes after the first drawing. */
-  onLauncher?: (open: boolean) => void;
+  /** Told how the launcher shows, or that it does not, each time that changes after the first drawing. */
+  onLauncher?: (mode: LauncherMode | null) => void;
 }) {
   const { session: w, apps, windows } = picture;
+  const keymap: Keymap = keymapOf(picture.keys);
+  const keyOf = (c: keyof Keymap) => { const b = keymap[c]; return b === null ? undefined : formatBinding(b); };
   const sessions = go ? picture.sessions ?? [] : [];
   const frame = useRef<HTMLDivElement>(null), input = useRef<HTMLInputElement>(null);
   const resultsId = useId();
   const fire = (name: string, args: Record<string, unknown>) => hand?.fire(name, { ...args, session: w.key });
   const open = (app: string, path?: string) => fire("desktop-open", { app, ...(path === undefined ? {} : { path }) });
-  // The launcher is the page's: it shows while its search has focus, or while nothing is in front. The mark and ⌘K give the search focus; Escape and a click elsewhere take it.
-  const [focused, setFocused] = useState(false);
+  // The launcher shows two ways. The mark chooses its tab, a place: it takes the app's place, the mark filled, its address the page's. ⌘P opens it quick, over
+  // the app in front, which stays its tab and shows dimmed behind; Escape goes back to it as it was. While nothing is in front the tab is all there is.
+  const [mode, setMode] = useState<LauncherMode | null>(() => launch ? "tab" : null);
   // A choice holds the launcher over the page until the state shows what was chosen, so the app behind never flashes between; a moment at most.
-  const [awaiting, setAwaiting] = useState<{ from: Entity | null } | null>(null);
+  const [awaiting, setAwaiting] = useState<{ from: Entity | null; mode: LauncherMode } | null>(null);
   useEffect(() => { if (awaiting && w.selected !== awaiting.from) setAwaiting(null); }, [w.selected, awaiting]);
   useEffect(() => { if (!awaiting) return; const t = setTimeout(() => setAwaiting(null), 800); return () => clearTimeout(t); }, [awaiting]);
-  const launcher = focused || w.selected === null || awaiting !== null;
-  useEffect(() => { if (launch) setFocused(true); }, [launch]);
-  useEffect(() => { if (dismiss) { setFocused(false); input.current?.blur(); } }, [dismiss]);
+  const shownMode: LauncherMode | null = w.selected === null ? (arriving && mode === null ? null : "tab") : mode ?? awaiting?.mode ?? null;
+  const launcher = shownMode !== null, quick = shownMode === "quick";
+  /** Where focus was when the quick launcher opened, so leaving it gives focus back. */
+  const before = useRef<HTMLElement | null>(null);
+  const openQuick = () => { before.current = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null; setMode("quick"); };
+  /** Leaves the launcher, whichever way it shows; leaving the quick one gives focus back to where it was. */
+  const leave = () => {
+    const back = quick ? before.current : null;
+    setMode(null); input.current?.blur(); before.current = null;
+    if (back?.isConnected) back.focus({ preventScroll: true });
+  };
+  useEffect(() => { if (launch) setMode("tab"); }, [launch]);
+  useEffect(() => { if (dismiss) { setMode(null); input.current?.blur(); } }, [dismiss]);
+  // The quick launcher is over the app in front: with that gone it has nothing to go back to, and ends, so a window arriving later is not covered.
+  useEffect(() => { if (w.selected === null) setMode((m) => (m === "quick" ? null : m)); }, [w.selected]);
   // Told only when it changes: as the frame first draws, the address has not been read yet.
   const told = useRef(onLauncher); told.current = onLauncher;
-  const shown = useRef(launcher);
-  useEffect(() => { if (shown.current !== launcher) { shown.current = launcher; told.current?.(launcher); } }, [launcher]);
-  // Each time the launcher closes the mark's eyes settle back into place, so the mark is keyed by how many times it has closed.
-  const [settles, setSettles] = useState(0);
-  const [was, setWas] = useState(launcher);
-  if (was !== launcher) { setWas(launcher); if (!launcher) setSettles(settles + 1); }
+  const shown = useRef(shownMode);
+  useEffect(() => { if (shown.current !== shownMode) { shown.current = shownMode; told.current?.(shownMode); } }, [shownMode]);
   // Pills that arrive after the first drawing grow into the strip; those already open when the page opens are simply there.
   const firstDrawn = useRef(false);
   useEffect(() => { firstDrawn.current = true; }, []);
-  const toggle = () => { if (focused) { setFocused(false); input.current?.blur(); } else setFocused(true); };
+  /** The mark is a tab that is never closed: choosing it shows the launcher's tab, and choosing it again only gives the search focus. With ⌘/Ctrl, or the middle button, it opens the launcher in a new browser tab. */
+  const chooseMark = (e: { metaKey: boolean; ctrlKey: boolean; button: number }) => {
+    if (launcherHref && (e.metaKey || e.ctrlKey || e.button === 1)) { window.open(launcherHref, "_blank"); return; }
+    setMode("tab"); input.current?.focus();
+  };
+  /** A pill chosen while the launcher shows leaves it for that window. */
+  const selectWindow = (o: Entity) => {
+    if (o !== w.selected) { fire("desktop-select", { window: o }); if (launcher) setAwaiting({ from: w.selected, mode: shownMode! }); }
+    leave();
+  };
   const selectedWindow = windows.find((o) => o.entity === w.selected);
   const selectedApp = apps.find((s) => s.entity === selectedWindow?.app);
   // What is typed is the page's: it clears when the launcher closes, and never waits on the state.
@@ -398,78 +473,55 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
   const search = (next: string, cursor = 0) => { setText(next); setAt(cursor); };
   useEffect(() => { if (!launcher) search(""); }, [launcher]);
   const label = (o: Row<DesktopWindow>, s: Row<DesktopApp>) => o.title || (o.path === "/" ? s.title : o.path);
-  // The palette: what is open first, then what can be opened; both answer the words typed, best first, and the keyboard runs down the whole list.
+  const tabTitle = (launcher && !quick) || !selectedWindow || !selectedApp ? null : label(selectedWindow, selectedApp);
+  useEffect(() => { if (documentTitle) document.title = tabTitle ? `${tabTitle} · ${title}` : title; }, [documentTitle, tabTitle, title]);
+  // The palette: what can be opened, answering the words typed, best first, and the keyboard runs down the whole list. What is open is on the bar, and ⌘J and ⌘K walk it.
   const words = text.toLowerCase().trim().split(/\s+/).filter(Boolean);
   const ranked = <T,>(items: T[], texts: (item: T) => string[]) => items.map((item, order) => ({ item, order, rank: rank(texts(item), words) })).filter((r): r is { item: T; order: number; rank: number } => r.rank !== null).sort((a, b) => a.rank - b.rank || a.order - b.order).map((r) => r.item);
-  const openRows = ranked(windows.flatMap((o) => { const s = apps.find((s) => s.entity === o.app); return s ? [{ o, s }] : []; }), ({ o, s }) => [label(o, s), s.title, s.group]);
   const found = ranked(apps, (s) => [s.title, s.key, s.group]);
-  // What is open first, then what can be opened; the other sessions after, and a new one; last, the way out of the baba.
+  // The apps first; the other sessions after, and a new one; last, the way out of the baba.
   const sessionRows = ranked(sessions, (x) => [x.key, x.front ?? ""]);
   const newSession = go && rank(["new session"], words) !== null;
   const leaving = root && rank([`leave ${title}`, root.label], words) !== null;
-  const S0 = openRows.length + found.length;
+  const S0 = found.length;
   const L = S0 + sessionRows.length + (newSession ? 1 : 0);
   const count = L + (leaving ? 1 : 0);
   const cursor = Math.min(at, Math.max(0, count - 1));
   const choose = (i: number) => {
     if (i >= L) { location.assign(root!.href); return; }
-    if (i >= S0) { const x = sessionRows[i - S0]; go?.(x ? x.key : null); setFocused(false); input.current?.blur(); return; }
-    const row = openRows[i], s = row ? undefined : found[i - openRows.length];
-    // What will be in front: the window chosen, or the app's own one where it allows only one; a fresh window is not known until it is made.
-    const target = row ? row.o.entity : s && !s.many ? windows.filter((o) => o.app === s.entity).at(-1)?.entity : undefined;
-    if (row) fire("desktop-select", { window: row.o.entity }); else if (s) fire("desktop-open", { app: s.key, fresh: true });
-    if ((row || s) && target !== w.selected) setAwaiting({ from: w.selected });
-    setFocused(false); input.current?.blur();
+    if (i >= S0) { const x = sessionRows[i - S0]; go?.(x ? x.key : null); setMode(null); input.current?.blur(); return; }
+    const s = found[i];
+    // What will be in front: the app's own window where it allows only one; a fresh window is not known until it is made.
+    const target = s && !s.many ? windows.filter((o) => o.app === s.entity).at(-1)?.entity : undefined;
+    if (s) fire("desktop-open", { app: s.key, fresh: true });
+    if (s && target !== w.selected) setAwaiting({ from: w.selected, mode: shownMode ?? "tab" });
+    setMode(null); input.current?.blur();
   };
-  useEffect(() => { if (focused && hand) input.current?.focus(); }, [focused, !!hand]);
+  useEffect(() => { if (mode && hand) input.current?.focus(); }, [mode, !!hand]);
   useEffect(() => { frame.current?.querySelector(`[data-result="${cursor}"]`)?.scrollIntoView({ block: "nearest" }); }, [cursor]);
-  // One dot says which row is chosen: the mark's larger eye, which drops out of the mark on a string when the launcher opens and is pulled from row to row. The bob moves it; this only says where.
-  const dot = useRef<HTMLSpanElement>(null), string = useRef<HTMLSpanElement>(null), overlay = useRef<HTMLDivElement>(null);
-  /** Where the string is tied, the middle of the mark's lower edge, and the dot's radius, measured when the launcher opens. */
-  const tie = useRef({ x: 0, y: 0, r: 0 });
-  const bob = useRef<Bob | null>(null);
-  bob.current ??= new Bob((at) => {
-    const el = dot.current, line = string.current, t = tie.current;
-    if (!el || !line) return;
-    el.style.transform = `translate(${at.x}px, ${at.y}px)`;
-    // The string runs from the tie to the dot's edge, at whatever angle the dot hangs.
-    const dx = at.x - t.x, dy = at.y - t.y, reach = Math.hypot(dx, dy), length = Math.max(0, reach - t.r);
-    line.style.opacity = length > 1 ? "1" : "0";
-    line.style.transform = `translate(${t.x}px, ${t.y}px) rotate(${reach ? -Math.asin(dx / reach) : 0}rad) scaleY(${length})`;
-  }, () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches);
-  useEffect(() => () => bob.current?.stop(), []);
-  /** Aims the dot at the chosen row's middle, on the mark's vertical; a scroll moves it with the list at once. */
-  const place = (now = false) => {
-    const o = overlay.current, el = dot.current;
-    const row = o?.querySelector<HTMLElement>(`[data-result="${cursor}"]`)?.closest<HTMLElement>(".desktop-row");
-    if (!el) return;
-    el.style.opacity = row ? "1" : "0";
-    if (!row) { if (string.current) string.current.style.opacity = "0"; return; }
-    // Layout offsets, not rects: a row still arriving is transformed, and the dot aims at where it will rest.
-    const body = row.closest<HTMLElement>(".desktop-launcher-body");
-    bob.current!.to({ x: tie.current.x, y: row.offsetTop - (body?.scrollTop ?? 0) + row.offsetHeight / 2 }, now);
-  };
-  useLayoutEffect(() => {
-    if (!launcher) { bob.current!.stop(); return; }
-    const o = overlay.current, mark = o?.querySelector<HTMLElement>(".desktop-logo"), eye = o?.querySelector<SVGCircleElement>(".desktop-eye-large"), el = dot.current;
-    if (!o || !mark || !eye || !el) return;
-    const O = o.getBoundingClientRect(), M = mark.getBoundingClientRect(), E = eye.getBoundingClientRect();
-    tie.current = { x: M.left + M.width / 2 - O.left, y: M.bottom - O.top, r: E.width / 2 };
-    // Born where the larger eye is, at the eye's own size, which it keeps; then it falls.
-    el.style.width = el.style.height = `${E.width}px`; el.style.margin = `${-E.width / 2}px 0 0 ${-E.width / 2}px`;
-    bob.current!.drop({ x: E.left + E.width / 2 - O.left, y: E.top + E.height / 2 - O.top });
-  }, [launcher]);
-  useEffect(() => { if (launcher) place(); });
+  // The rows fade into the palette's background at an edge with more beyond it, as the bar's pills do sideways.
+  const { ref: body, fade: bodyFade } = useScrollFade<HTMLDivElement>("y");
   useEffect(() => {
     if (!hand) return;
     const key = (e: KeyboardEvent) => {
       // An embedded picture only handles keys while it contains focus.
       if (document.activeElement !== document.body && !frame.current?.contains(document.activeElement)) return;
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && !e.altKey) { e.preventDefault(); if (!focused) setFocused(true); else if (w.selected !== null) toggle(); }
-      else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "w" && !e.altKey && !launcher && w.selected !== null) { e.preventDefault(); fire("desktop-close", {}); }
+      // The commands the person's keymap runs; a press something else already took is left to it.
+      const command = e.defaultPrevented ? null : commandOf(keymap, e);
+      // The quick launcher opens, and closes again; over the launcher's tab it only gives the search focus.
+      if (command === "launcher") { e.preventDefault(); if (!launcher) openQuick(); else if (quick) leave(); else input.current?.focus(); }
+      // The tabs on the bar, walked as they sit, the mark's tab among them, round at the ends.
+      else if ((command === "previousTab" || command === "nextTab") && windows.length) {
+        e.preventDefault();
+        const tabs: (Entity | null)[] = [null, ...windows.map((o) => o.entity)];
+        const here = launcher && !quick ? 0 : tabs.indexOf(w.selected);
+        const next = tabs[(here + (command === "nextTab" ? 1 : -1) + tabs.length) % tabs.length]!;
+        if (next === null) { setMode("tab"); input.current?.focus(); } else selectWindow(next);
+      }
+      else if (command === "closeTab" && !launcher && w.selected !== null) { e.preventDefault(); fire("desktop-close", {}); }
       else if (launcher && e.key === "Escape") {
         e.preventDefault();
-        if (text) search(""); else if (w.selected !== null) toggle();
+        if (text) search(""); else if (w.selected !== null) leave();
       }
     };
     addEventListener("keydown", key); return () => removeEventListener("keydown", key);
@@ -480,15 +532,20 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
   const pills = windows.map((o) => {
     const s = apps.find((s) => s.entity === o.app);
     if (!s) return null;
-    const active = w.selected === o.entity;
-    return <WindowPill key={o.entity} label={label(o, s)} active={active} hand={hand} shortcut={active} icon={<AppIcon drawing={s.drawing} />} enter={firstDrawn.current} onSelect={() => fire("desktop-select", { window: o.entity })} onClose={() => fire("desktop-close", { window: o.entity })} />;
+    const active = (!launcher || quick) && w.selected === o.entity;
+    return <WindowPill key={o.entity} label={label(o, s)} active={active} hand={hand} shortcut={active ? keyOf("closeTab") : undefined} icon={<AppIcon drawing={s.drawing} />} enter={firstDrawn.current} onSelect={() => selectWindow(o.entity)} onClose={() => fire("desktop-close", { window: o.entity })} />;
   });
-  // The bar: the mark, which is the launcher and so the way to another app; a pill per open window, the one in front filled.
-  // The launcher covers the page: the bar's row becomes the search, the pills sit on the row below exactly as they are, and the apps, as pills under their groups, fill the rest.
+  // The bar holds tabs only: the mark, the launcher's tab, which is never closed; a pill per open window; the tab in front filled.
+  // The launcher's tab takes the content's place under the bar, a palette in its middle: the search, then what is open and what can be. The quick one is the same palette over the app.
   return <div ref={frame} className="desktop" data-theme={picture.theme ?? w.theme}>
     <header className="desktop-bar" aria-label="Bar">
-      <button type="button" className="desktop-logo" title={`${title}: launcher (⌘/Ctrl K)`} aria-label="Open launcher" aria-expanded={launcher} disabled={!hand} onClick={toggle}><Eyes key={settles} size={18} settle={settles > 0} /></button>
-      {windows.length === 0 && <span className="desktop-bar-title">{root && <><a className="desktop-bar-root" href={root.href} title={`Leave ${title}: back to ${root.label}`}>{root.label}</a><span className="desktop-muted"> / </span></>}{title}{go || w.key !== "main" ? <span className="desktop-muted"> · {w.key}</span> : ""}</span>}
+      {/* The mark is the launcher's tab, named after the baba, a pill as every tab is; pointing at it turns its eyes into the way out, which leaves the baba for voss's picker, the session kept to come back to. */}
+      <span className={`desktop-pill desktop-pill-mark${launcher && !quick ? " is-active" : ""}`}>
+        <button type="button" className="desktop-pill-label" title={`${title}: launcher`} aria-label="Launcher" aria-pressed={launcher && !quick} disabled={!hand} onClick={chooseMark} onMouseDown={(e) => { if (e.button === 1) e.preventDefault(); }} onAuxClick={(e) => { if (e.button === 1) chooseMark(e); }}>
+          <span className="desktop-pill-icon"><Eyes size={18} /></span><PillText text={title} />
+        </button>
+        {hand && root && <button type="button" className="desktop-pill-close" aria-label={`Leave ${title}`} title={`Leave ${title}: back to ${root.label}`} onClick={() => location.assign(root.href)}><AppIcon drawing={leaveIcon} /></button>}
+      </span>
       <Pills label="Open apps">{pills}</Pills>
     </header>
     <main className="desktop-content">
@@ -496,7 +553,7 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
         const s = apps.find((s) => s.entity === o.app);
         if (!s) return null;
         const active = w.selected === o.entity;
-        return <section key={o.entity} className="desktop-app" hidden={!active} aria-label={label(o, s)}>
+        return <section key={o.entity} className={`desktop-app${active && launcher && !quick ? " is-behind" : ""}`} hidden={!active} aria-label={label(o, s)}>
           <AppBoundary><>{render(s, {
             session: w.key, window: o.entity, path: o.path, ...routeOf(s.routes, o.path), active, memory: (o.memory ?? {}) as Record<string, unknown>,
             navigate: (path) => fire("desktop-open", { app: s.key, path }),
@@ -507,40 +564,26 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
         </section>;
       })}
     </main>
-    {launcher && <div ref={overlay} className="desktop-launcher" aria-label="Launcher" onPointerDown={(e) => {
-      // Pressing anywhere in the launcher keeps the search's focus, empty space included; choosing a row, the mark, Escape or ⌘K are what close it.
+    {launcher && <div className={`desktop-launcher${quick ? " is-quick" : ""}`} aria-label="Launcher" onPointerDown={(e) => {
+      // Pressing anywhere in the launcher keeps the search's focus, empty space included; choosing a row, a pill, Escape or ⌘P are what leave it. Around the quick one's palette, a press goes back.
       if (!(e.target as HTMLElement).closest("input")) e.preventDefault();
+      if (quick && !(e.target as HTMLElement).closest(".desktop-palette")) leave();
     }}>
-      <div className="desktop-bar desktop-launcher-search">
-        <button type="button" className="desktop-logo is-selected" title="Close launcher (Esc)" aria-label="Close launcher" aria-expanded="true" disabled={!hand} onClick={toggle}><Eyes size={18} large={false} /></button>
-        <input ref={input} className="desktop-search" autoFocus={focused} aria-label="Search" placeholder="Type an app" value={text} disabled={!hand} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} onChange={(e) => search(e.target.value)} role="combobox" aria-expanded="true" aria-controls={resultsId} aria-activedescendant={count ? `${resultsId}-${cursor}` : undefined} onKeyDown={(e) => {
+      <div className="desktop-palette">
+      <div className="desktop-launcher-search">
+        <span className="desktop-pill-icon"><AppIcon drawing={searchIcon} /></span>
+        <input ref={input} className="desktop-search" autoFocus={mode !== null} aria-label="Search" placeholder="Type an app" value={text} disabled={!hand} onChange={(e) => search(e.target.value)} role="combobox" aria-expanded="true" aria-controls={resultsId} aria-activedescendant={count ? `${resultsId}-${cursor}` : undefined} onKeyDown={(e) => {
           if (["ArrowDown", "ArrowUp"].includes(e.key) && count) { e.preventDefault(); setAt((cursor + (e.key === "ArrowDown" ? 1 : -1) + count) % count); }
           else if (e.key === "Enter" && count) { e.preventDefault(); choose(cursor); }
         }} />
       </div>
-      <span ref={string} className="desktop-string" aria-hidden="true" />
-      <span ref={dot} className="desktop-dot" aria-hidden="true" />
-      <div id={resultsId} className="desktop-launcher-body" role="listbox" aria-label="Open windows and apps" onScroll={() => place(true)}>
-        {openRows.length > 0 && <div className="desktop-group">
-          <h2 className="desktop-group-title" style={{ "--i": 0 } as CSSProperties}>Open</h2>
-          {openRows.map(({ o, s }, k) => {
-            const i = k, front = w.selected === o.entity;
-            return <span key={o.entity} className={`desktop-row desktop-row-window${cursor === i ? " is-cursor" : ""}${front ? " is-active" : ""}`} style={{ "--i": i + 1 } as CSSProperties} {...middleCloses(hand && (() => fire("desktop-close", { window: o.entity })))}>
-              <button type="button" id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className="desktop-row-main" disabled={!hand} title={label(o, s)} onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
-                <span className="desktop-pill-icon"><AppIcon drawing={s.drawing} /></span>
-                <span className="desktop-row-label">{label(o, s)}</span>
-                {label(o, s) !== s.title && <span className="desktop-row-note">{s.title}</span>}
-              </button>
-              {hand && <button type="button" className="desktop-pill-close" aria-label={`Close ${label(o, s)}`} title={`Close ${label(o, s)}`} onClick={() => fire("desktop-close", { window: o.entity })}><Cross /></button>}
-            </span>;
-          })}
-        </div>}
+      <div ref={body} id={resultsId} className={`desktop-launcher-body${bodyFade}`} role="listbox" aria-label="Apps">
         {groups.map((group) => <div key={group} className="desktop-group">
-          {group && <h2 className="desktop-group-title" style={{ "--i": openRows.length + found.indexOf(appsOf(group)[0]!) + (openRows.length ? 1 : 0) } as CSSProperties}>{group}</h2>}
+          {group && <h2 className="desktop-group-title">{group}</h2>}
           {appsOf(group).map((s) => {
-            const i = openRows.length + found.indexOf(s);
+            const i = found.indexOf(s);
             const open = windows.filter((o) => o.app === s.entity).length;
-            return <button type="button" key={s.key} id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className={`desktop-row desktop-row-app${cursor === i ? " is-cursor" : ""}`} style={{ "--i": i + (openRows.length ? 2 : 1) } as CSSProperties} disabled={!hand} title={s.many ? `Open another ${s.title}` : open ? `Bring ${s.title} to the front` : `Open ${s.title}`} onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
+            return <button type="button" key={s.key} id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className={`desktop-row desktop-row-app${cursor === i ? " is-cursor" : ""}`} disabled={!hand} title={s.many ? `Open another ${s.title}` : open ? `Bring ${s.title} to the front` : `Open ${s.title}`} onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
               <span className="desktop-pill-icon"><AppIcon drawing={s.drawing} /></span>
               <span className="desktop-row-label">{s.title}</span>
               <span className="desktop-row-note">{words.length && s.group ? s.group : ""}{open > 1 ? `${words.length && s.group ? " · " : ""}${open} open` : ""}</span>
@@ -548,10 +591,10 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
           })}
         </div>)}
         {(sessionRows.length > 0 || newSession) && <div className="desktop-group desktop-sessions">
-          <h2 className="desktop-group-title" style={{ "--i": S0 + (openRows.length ? 1 : 0) + (found.length ? 1 : 0) } as CSSProperties}>Sessions</h2>
+          <h2 className="desktop-group-title">Sessions</h2>
           {sessionRows.map((x, k) => {
             const i = S0 + k, note = `${x.windows ? `${x.windows} open` : "empty"}${x.front ? ` · ${x.front}` : ""}`;
-            return <span key={x.entity} className={`desktop-row desktop-row-window desktop-row-session${cursor === i ? " is-cursor" : ""}`} style={{ "--i": i + 1 + (openRows.length ? 1 : 0) + (found.length ? 1 : 0) } as CSSProperties} {...middleCloses(hand && (() => hand.fire("desktop-leave", { session: x.key })))}>
+            return <span key={x.entity} className={`desktop-row desktop-row-window desktop-row-session${cursor === i ? " is-cursor" : ""}`} {...middleCloses(hand && (() => hand.fire("desktop-leave", { session: x.key })))}>
               <button type="button" id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className="desktop-row-main" disabled={!hand} title={`Go to the session ${x.key}`} onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
                 <span className="desktop-pill-icon"><AppIcon drawing={sessionIcon} /></span>
                 <span className="desktop-row-label">{x.key}</span>
@@ -560,14 +603,14 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
               {hand && <button type="button" className="desktop-pill-close" aria-label={`End the session ${x.key}`} title={`End the session ${x.key}`} onClick={() => hand.fire("desktop-leave", { session: x.key })}><Cross /></button>}
             </span>;
           })}
-          {newSession && (() => { const i = S0 + sessionRows.length; return <button type="button" id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className={`desktop-row desktop-row-app${cursor === i ? " is-cursor" : ""}`} style={{ "--i": i + 1 + (openRows.length ? 1 : 0) + (found.length ? 1 : 0) } as CSSProperties} disabled={!hand} title="Open a new session in this tab" onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
+          {newSession && (() => { const i = S0 + sessionRows.length; return <button type="button" id={`${resultsId}-${i}`} data-result={i} role="option" aria-selected={cursor === i} className={`desktop-row desktop-row-app${cursor === i ? " is-cursor" : ""}`} disabled={!hand} title="Open a new session in this tab" onMouseEnter={() => setAt(i)} onClick={() => choose(i)}>
             <span className="desktop-pill-icon"><AppIcon drawing={plusIcon} /></span>
             <span className="desktop-row-label">New session</span>
             <span className="desktop-row-note">this tab is on {w.key}</span>
           </button>; })()}
         </div>}
         {leaving && <div className="desktop-group desktop-leave">
-          <button type="button" id={`${resultsId}-${L}`} data-result={L} role="option" aria-selected={cursor === L} className={`desktop-row desktop-row-app${cursor === L ? " is-cursor" : ""}`} style={{ "--i": L + 2 + (openRows.length ? 1 : 0) + (found.length ? 1 : 0) } as CSSProperties} title={`Leave ${title}: back to ${root!.label}`} onMouseEnter={() => setAt(L)} onClick={() => choose(L)}>
+          <button type="button" id={`${resultsId}-${L}`} data-result={L} role="option" aria-selected={cursor === L} className={`desktop-row desktop-row-app${cursor === L ? " is-cursor" : ""}`} title={`Leave ${title}: back to ${root!.label}`} onMouseEnter={() => setAt(L)} onClick={() => choose(L)}>
             <span className="desktop-pill-icon"><AppIcon drawing={leaveIcon} /></span>
             <span className="desktop-row-label">Leave {title}</span>
             <span className="desktop-row-note">{root!.label}</span>
@@ -578,10 +621,11 @@ export function DesktopFrame({ picture, title, hand, render, root, go, launch, d
       <footer className="desktop-launcher-legend" aria-label="Shortcuts">
         <span><kbd>↑</kbd><kbd>↓</kbd> move</span>
         <span><kbd>↵</kbd> open</span>
-        <span><kbd>esc</kbd> {text ? "clear" : "close"}</span>
-        <span><kbd>⌘K</kbd> launcher</span>
-        <span><kbd>⌘W</kbd> close window</span>
+        {(text || w.selected !== null) && <span><kbd>esc</kbd> {text ? "clear" : "back"}</span>}
+        {quick && keyOf("launcher") && <span><kbd>{keyOf("launcher")}</kbd> close</span>}
+        {windows.length > 0 && keyOf("previousTab") && keyOf("nextTab") && <span><kbd>{keyOf("previousTab")}</kbd><kbd>{keyOf("nextTab")}</kbd> tabs</span>}
       </footer>
+      </div>
     </div>}
   </div>;
 }

package/src/door/core.ts

@@ -73,7 +73,7 @@ export interface Index {
   error?: string;
   systems: { name: string }[];
   /** What the baba tells agents: whether it has a context, and its skills by name. */
-  promptware: { context: boolean; skills: string[] };
+  instructions: { context: boolean; skills: string[] };
   calls: IndexCall[];
   components: Record<string, { system: string; key?: string; accept?: true }>;
   resources: string[];
@@ -115,7 +115,7 @@ export function index(m: Manifest, extra: IndexExtra = {}): Index {
     ...(extra.gen !== undefined ? { gen: extra.gen } : {}),
     ...(extra.error ? { error: extra.error } : {}),
     systems: m.systems.map((c) => ({ name: c.name })),
-    promptware: { context: !!m.promptware.context, skills: Object.keys(m.promptware.skills) },
+    instructions: { context: !!m.instructions.context, skills: Object.keys(m.instructions.skills) },
     calls: entries(m).map(({ name, kind, c }) => ({ name, kind, system: c.owner, summary: c.summary, example: exampleCall(name, c, extra.prog) })),
     components: Object.fromEntries(Object.entries(m.components).map(([n, c]) => {
       const key = keyField(c.schema);