babavoss 0.0.1 → 0.12.0

package/src/desktop/view.tsx

@@ -0,0 +1,673 @@
+import { Component, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties, type ReactNode } from "react";
+import { select, type Entity } from "../ecs/state.ts";
+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 { 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. */
+export interface AppProps {
+  session: string;
+  /** The window this instance draws in. */
+  window: Entity;
+  path: string;
+  /** The route that took `path`, as the app declares it (`/pr/:n`); null for an app that declares no routes. */
+  route: string | null;
+  /** The route's parameters, decoded: `{ n: "86" }`; the rest of a `*` route under `*`. */
+  params: Record<string, string>;
+  active: boolean;
+  /** What this window remembers for its app, by key; see `remember`. */
+  memory: Record<string, unknown>;
+  /** Moves this window to a path of its own app. */
+  navigate(path: string): void;
+  /** Opens any app at a path through the desktop's one rule. */
+  open(app: string, path?: string): void;
+  /** Names this window after what it shows. */
+  setTitle(title: string): void;
+  /** Keeps a value on this window, in the state: a filter, a selection, a fold; `null` forgets it. */
+  remember(key: string, value: unknown): void;
+}
+/** The old name. */
+export type SurfaceProps = AppProps;
+export interface DesktopProps {
+  system: DesktopSystem;
+  /** The apps by key, as components. */
+  apps?: Record<string, ComponentType<AppProps>>;
+  /** The old name of `apps`. */
+  surfaces?: Record<string, ComponentType<AppProps>>;
+  /** A fixed session, for a desktop embedded in another page. Without one the tab owns a session: the address's `?session=`, else the one the tab had, else a new one. */
+  session?: string;
+  title?: string;
+  /** The page's address is an adapter to the state: `BASE/APP/PATH` is the window in front, `BASE/` the launcher. Disable for embedded desktops. */
+  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. */
+  root?: Root;
+}
+/** The way out of a baba: the picker's name and address. */
+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" } }];
+/** 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. */
+const OWN = "~";
+/** The tab's bookmark into its session: the browser's own per-tab storage, which a reload keeps, a closed tab drops and a duplicated tab copies. One per baba, since a tab moves between them. */
+const sessionKey = (scope: string) => `voss.session.${scope}`;
+const rememberedSession = (scope: string): string | null => { try { return sessionStorage.getItem(sessionKey(scope)); } catch { return null; } };
+const rememberSession = (scope: string, key: string) => { try { sessionStorage.setItem(sessionKey(scope), key); } catch { /* the hash still says */ } };
+/** An app as the frame draws it: with its icon's shapes once the system has read them, null until then. */
+export type AppRow = Row<DesktopApp> & { drawing: readonly IconShape[] | null };
+/** Another session, as the launcher lists it: what is in front there, how much is open, when it was last touched. */
+export interface SessionRow { entity: Entity; key: string; touched: number; windows: number; front: string | null }
+export interface Picture {
+  session: Row<Session>;
+  apps: AppRow[];
+  windows: Row<DesktopWindow>[];
+  /** The other sessions of this baba, last touched first; none for a picture that has no sessions, a state of one session. */
+  sessions?: SessionRow[];
+  /** The baba's theme; the session's old field when a picture has none. */
+  theme?: Theme;
+}
+
+/** 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}/`;
+}
+/** What an address names: an app at a path, or the launcher, with no app; null when it is not under the base. */
+export function parseDesktopAddress(base: string, pathname: string): { app?: string; path: string } | null {
+  if (pathname !== base && !pathname.startsWith(`${base}/`)) return null;
+  const rest = pathname.slice(base.length);
+  if (rest === "" || rest === "/") return { path: "/" };
+  const m = /^\/([^/]+)(\/.*)?$/.exec(rest);
+  if (!m) return null;
+  try { return { app: decodeURIComponent(m[1]!), path: m[2] ?? "/" }; } catch { return null; }
+}
+/** The route a path takes among an app's routes, and its parameters; no route for an app that declares none, or a path none takes. */
+export function routeOf(routes: readonly string[] | undefined, path: string): { route: string | null; params: Record<string, string> } {
+  const m = routes?.length ? matchRoute(routes, path) : null;
+  return m ?? { route: null, params: {} };
+}
+/** An address before the path was: `#desktop/SESSION/APP/PATH`, read once so an old link or bookmark still opens. */
+export function parseDesktopHash(hash: string): { session: string; app?: string; path?: string } | null {
+  const match = /^#desktop\/([^/]+)\/([^/]+)(\/.*)?$/.exec(hash);
+  if (!match) return null;
+  try {
+    const session = decodeURIComponent(match[1]!);
+    if (!session.trim()) return null;
+    return match[2] === "~" ? { session } : { session, app: decodeURIComponent(match[2]!), path: match[3] ?? "/" };
+  } catch { return null; }
+}
+
+/** The session an address asks the tab to join: `?session=KEY`, else an old hash's; none for the tab's own. */
+function addressedSession(): string | undefined {
+  const q = new URLSearchParams(location.search).get("session")?.trim();
+  if (q) return q;
+  const old = parseDesktopHash(location.hash)?.session;
+  return old === OWN ? undefined : old;
+}
+
+/** 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) {
+  const renderers = apps ?? surfaces ?? {};
+  const scope = useScope();
+  const base = givenBase ?? `/${encodeURIComponent(scope)}`;
+  const selectors = useMemo(() => ({ apps: select(system.desktopApp), icons: select(system.desktopIcon), sessions: select(system.desktopSession), windows: select(system.desktopWindow) }), [system]);
+  const appRows = useColumn(selectors.apps, system.desktopApp);
+  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
+  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.
+  const [key, setKey] = useState<string | null>(() => fixed ?? (address ? addressedSession() : undefined) ?? rememberedSession(scope));
+  useEffect(() => { if (key !== null && !fixed) rememberSession(scope, key); }, [key, fixed, scope]);
+  // The session asked for is the tab's now, kept in its storage: the address drops `?session=`, and an old hash becomes the path it named.
+  useEffect(() => {
+    if (!address) return;
+    const url = new URL(location.href), old = parseDesktopHash(url.hash);
+    url.searchParams.delete("session");
+    if (old) { url.pathname = desktopAddress(base, old.app, old.path); url.hash = ""; }
+    if (url.href !== location.href) history.replaceState(history.state, "", url);
+  }, [address, base]);
+  const session = key === null ? undefined : [...sessions].find(([, v]) => v.key === key);
+  const picture: Picture | null = session ? {
+    session: { entity: session[0], ...session[1] },
+    apps: [...appRows].map(([entity, value]) => ({ entity, ...value, drawing: drawn(value, iconRows.get(entity)) })).sort((a, b) => a.order - b.order),
+    windows: [...windows].filter(([, value]) => value.session === session[0]).map(([entity, value]) => ({ entity, ...value })),
+    sessions: [...sessions].filter(([entity]) => entity !== session[0]).map(([entity, value]) => {
+      const wins = [...windows].filter(([, o]) => o.session === entity);
+      const front = wins.find(([e]) => e === value.selected)?.[1];
+      const s = front && appRows.get(front.app);
+      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,
+  } : null;
+  const hand: Hand = { fire: (name, args) => {
+    setError(null);
+    void (fire as (n: string, a: unknown) => Promise<unknown>)(name, args).catch((e) => setError(String(e)));
+  } };
+  // Entering is explicit, idempotent navigation: a named session is made if missing; without one the tab asks for a new session and takes the name the state gives it. One ask at a time, so two renders do not make two.
+  const entering = useRef(false);
+  const [entered, setEntered] = useState<Entity | null>(null);
+  useEffect(() => {
+    if (!ready || session || entering.current || entered !== null) return;
+    entering.current = true;
+    void fire("desktop-enter", key === null ? {} : { session: key }).then((e) => { if (key === null) setEntered(e); })
+      .catch((e) => setError(String(e))).finally(() => { entering.current = false; });
+  }, [ready, !!session, key, entered, fire]);
+  // The session entered without a name: once the state shows it, whether its frame lands before or after the answer, the tab takes its name.
+  const enteredKey = entered === null ? undefined : sessions.get(entered)?.key;
+  useEffect(() => { if (key === null && enteredKey) { setEntered(null); setKey(enteredKey); } }, [key, enteredKey]);
+  // A tab that comes to the front touches its session, so a call that names none reaches the tab last used.
+  useEffect(() => {
+    if (!ready || !session || fixed) return;
+    const touch = () => { if (document.visibilityState === "visible") void fire("desktop-enter", { session: session[1].key }).catch(() => {}); };
+    addEventListener("focus", touch); document.addEventListener("visibilitychange", touch);
+    return () => { removeEventListener("focus", touch); document.removeEventListener("visibilitychange", touch); };
+  }, [ready, session?.[1].key, fixed, fire]);
+
+  const selectedWindow = picture?.windows.find((o) => o.entity === picture.session.selected);
+  const selected = picture?.apps.find((s) => s.entity === selectedWindow?.app);
+  const here = picture ? desktopAddress(base, selected?.key, selectedWindow?.path ?? "/") : null;
+  const current = useRef(here); current.current = here;
+  /** The address the page last agreed with the state on: written only when what is in front changes, so the launcher's address stays while it is open. */
+  const agreed = useRef<string | null>(null);
+  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);
+  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) => {
+    setError(null);
+    if (address) {
+      const row = next === null ? undefined : [...sessions].find(([, v]) => v.key === next);
+      const front = row && [...windows].find(([e]) => e === row[1].selected)?.[1];
+      const to = desktopAddress(base, front && appRows.get(front.app)?.key, front?.path);
+      agreed.current = to;
+      history.replaceState(null, "", to);
+    }
+    setEntered(null); setKey(next);
+  };
+  useEffect(() => {
+    if (!address || !ready || key === null || !picture) return;
+    let live = true;
+    const readAddress = () => {
+      const route = parseDesktopAddress(base, location.pathname);
+      if (!route) return;
+      // The base alone is the launcher: it opens over whatever is in front, and the address stays until something is chosen.
+      if (!route.app) { agreed.current = current.current; setLaunch((n) => n + 1); return; }
+      setDismiss((n) => n + 1);
+      let path: string;
+      try { path = canonicalPath(route.path); } catch (e) { setError(String(e)); if (current.current) history.replaceState(null, "", current.current); return; }
+      const expected = desktopAddress(base, route.app, path);
+      if (expected === current.current) { if (location.pathname !== expected) history.replaceState(null, "", expected); return; }
+      pending.current = expected;
+      void fire("desktop-open", { session: key, app: route.app, path }).catch((e) => {
+        if (!live) return;
+        pending.current = null;
+        setError(String(e));
+        if (current.current) history.replaceState(null, "", current.current);
+      });
+    };
+    initialized.current = false;
+    readAddress();
+    initialized.current = true;
+    addEventListener("popstate", readAddress);
+    return () => { live = false; initialized.current = false; pending.current = null; removeEventListener("popstate", readAddress); };
+  }, [address, ready, key, !!picture, base, fire]);
+  useEffect(() => {
+    if (!address || !initialized.current || !here) 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;
+    if (here === agreed.current) return;
+    agreed.current = here;
+    if (location.pathname !== here) {
+      if (asked || !parseDesktopAddress(base, location.pathname)) history.replaceState(null, "", here);
+      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);
+  };
+
+  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) => {
+      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>}
+  </>;
+}
+
+/** 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>;
+}
+
+/**
+ * A pill's text: clipped to the pill, faded at its end; when it does not fit, pointing at the pill scrolls it in a loop after a moment.
+ * The loop is linear so it is seamless; the track it rides on eases a little to the right as the loop begins, so the text starts from rest.
+ */
+function PillText({ text }: { text: string }) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [shift, setShift] = useState(0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => { const first = el.firstElementChild?.firstElementChild as HTMLElement | null; const over = first ? first.offsetWidth - el.clientWidth : 0; setShift(over > 0 ? first!.offsetWidth + 24 : 0); };
+    measure();
+    const ro = new ResizeObserver(measure); ro.observe(el);
+    return () => ro.disconnect();
+  }, [text]);
+  // The start eases over .6s on a curve whose initial slope is 2, so an ease of v * .6 / 2 cancels the loop's speed v at the first instant.
+  const seconds = Math.max(2, shift / 40), ease = (shift / seconds) * 0.3;
+  return <span ref={ref} className={`desktop-pill-text${shift ? " is-overflowing" : ""}`} style={shift ? { "--shift": `-${shift}px`, "--scroll": `${seconds}s`, "--ease": `${ease.toFixed(1)}px` } as CSSProperties : undefined}>
+    <span className="desktop-pill-track"><span>{text}</span>{shift > 0 && <span aria-hidden="true">{text}</span>}</span>
+  </span>;
+}
+
+/** One open window as a pill, on the bar and in the launcher alike: its icon at the left, which pointing at the pill turns into its ×; its label scrolls when long. */
+/** The × that takes an icon's place: drawn in a 16px square centred in the icon's box, so its centre is the box's centre. */
+const Cross = () => <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>;
+
+/** A middle click closes a window, as it closes a tab; its press is held back so the browser does not start scrolling. */
+const middleCloses = (close: (() => void) | undefined) => close ? {
+  onMouseDown: (e: { button: number; preventDefault(): void }) => { if (e.button === 1) e.preventDefault(); },
+  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 }) {
+  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(() => {
+    const el = pill.current;
+    if (!enter || !el) return;
+    el.scrollIntoView?.({ inline: "nearest", block: "nearest" });
+    if (typeof el.animate !== "function" || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    el.animate([{ transform: "translateY(-100%)" }, { transform: "translateY(0)" }], { duration: 160, easing: "cubic-bezier(.3, 1.5, .4, 1)" });
+  }, []);
+  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>}
+  </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);
+  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" : ""}`);
+    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 <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>;
+}
+
+/** The drawing of an app's icon, when the system has read the one it names now. */
+const drawn = (app: DesktopApp, icon: { name: string; shapes: readonly IconShape[] } | undefined) => icon && icon.name === app.icon ? icon.shapes : null;
+
+/** An app's icon: its Lucide shapes, stroked as Lucide strokes them, in a 24-unit square drawn at `size`; an app without one, or not read yet, shows a small dot. */
+export function AppIcon({ drawing, size = 14 }: { drawing: readonly IconShape[] | null; size?: number }) {
+  return <svg className="desktop-icon" viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+    {drawing?.length ? drawing.map(({ tag: Tag, attrs }, i) => <Tag key={i} {...attrs} />) : <circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" opacity={.5} />}
+  </svg>;
+}
+
+/** How well texts answer the words typed: 0 for a word at the start of a text, 1 at the start of a word inside it, 2 anywhere, none when a word is missing. Lower comes first. */
+function rank(texts: string[], words: string[]): number | null {
+  let total = 0;
+  for (const word of words) {
+    let best = Infinity;
+    for (const t of texts.map((x) => x.toLowerCase())) {
+      const at = t.indexOf(word);
+      if (at < 0) continue;
+      best = Math.min(best, at === 0 ? 0 : /\s|[-_/]/.test(t[at - 1]!) ? 1 : 2);
+    }
+    if (best === Infinity) return null;
+    total += best;
+  }
+  return total;
+}
+
+/** 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 }: {
+  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. */
+  root?: Root;
+  /** 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;
+  /** 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;
+}) {
+  const { session: w, apps, windows } = picture;
+  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);
+  // 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);
+  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]);
+  // 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); }
+  // 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); };
+  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.
+  const [text, setText] = useState("");
+  const [at, setAt] = useState(0);
+  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 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.
+  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 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();
+  };
+  useEffect(() => { if (focused && hand) input.current?.focus(); }, [focused, !!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(); });
+  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", {}); }
+      else if (launcher && e.key === "Escape") {
+        e.preventDefault();
+        if (text) search(""); else if (w.selected !== null) toggle();
+      }
+    };
+    addEventListener("keydown", key); return () => removeEventListener("keydown", key);
+  });
+  // Without words the apps keep their groups; with words they are one list, best first.
+  const groups = words.length ? [""] : [...new Set(found.map((s) => s.group))];
+  const appsOf = (group: string) => words.length ? found : found.filter((s) => s.group === group);
+  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 })} />;
+  });
+  // 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.
+  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>}
+      <Pills label="Open apps">{pills}</Pills>
+    </header>
+    <main className="desktop-content">
+      {windows.map((o) => {
+        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)}>
+          <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 }),
+            open,
+            setTitle: (title) => { if (title !== o.title) fire("desktop-title", { window: o.entity, title }); },
+            remember: (key, value) => { if (JSON.stringify((o.memory as Record<string, unknown>)?.[key]) !== JSON.stringify(value)) fire("desktop-remember", { window: o.entity, key, value }); },
+          })}</></AppBoundary>
+        </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.
+      if (!(e.target as HTMLElement).closest("input")) e.preventDefault();
+    }}>
+      <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) => {
+          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>}
+        {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>}
+          {appsOf(group).map((s) => {
+            const i = openRows.length + 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)}>
+              <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>
+            </button>;
+          })}
+        </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>
+          {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 })))}>
+              <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>
+                <span className="desktop-row-note">{note}</span>
+              </button>
+              {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)}>
+            <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)}>
+            <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>
+          </button>
+        </div>}
+        {!count && <p className="desktop-muted">{text ? "Nothing matches." : "Nothing here yet."}</p>}
+      </div>
+      <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>
+      </footer>
+    </div>}
+  </div>;
+}
+
+class AppBoundary extends Component<{ children: ReactNode }, { error: string | null }> {
+  override state = { error: null as string | null };
+  static getDerivedStateFromError(error: unknown) { return { error: String(error) }; }
+  override render() { return this.state.error ? <div className="desktop-empty" role="alert"><p>{this.state.error}</p><button onClick={() => this.setState({ error: null })}>Try again</button></div> : this.props.children; }
+}
+
+/** What a window shows when no component fits its app here. */
+const bareWindow = (title: string) => <div className="desktop-empty"><h2>{title}</h2><p className="desktop-muted">This window is open.</p></div>;
+
+/**
+ * The desktop of a state that holds the desktop system, read through the hooks: the session last touched, as a tab on that
+ * state would show it, its windows and the app in front, each drawn by its component in `apps`. It acts with useHand's
+ * hand, into whatever state it is shown over; a frame given no hand only shows.
+ */
+export function SpecDesktop({ system, apps = {}, title = "Desktop" }: { system: DesktopSystem; apps?: Record<string, ComponentType<AppProps>>; title?: string }) {
+  const selectors = useMemo(() => ({ apps: select(system.desktopApp), icons: select(system.desktopIcon), sessions: select(system.desktopSession), windows: select(system.desktopWindow) }), [system]);
+  const appRows = useColumn(selectors.apps, system.desktopApp);
+  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;
+  const hand = useHand();
+  const session = [...sessions].sort(([a, x], [b, y]) => (y.touched ?? 0) - (x.touched ?? 0) || b - a)[0];
+  if (!session) return <p className="desktop-empty">The desktop opens on its first round.</p>;
+  const picture: Picture = {
+    session: { entity: session[0], ...session[1] },
+    apps: [...appRows].map(([entity, value]) => ({ entity, ...value, drawing: drawn(value, iconRows.get(entity)) })).sort((a, b) => a.order - b.order),
+    windows: [...windows].filter(([, value]) => value.session === session[0]).map(([entity, value]) => ({ entity, ...value })),
+    ...(theme ? { theme } : {}),
+  };
+  return <DesktopFrame picture={picture} title={title} hand={hand} render={(s, props) => { const View = apps[s.key]; return View ? <View {...props} /> : bareWindow(s.title); }} />;
+}
+
+/** An app a LocalDesktop offers: as the baba declares it. */
+export interface LocalApp { key: string; title: string; group?: string; icon?: string; many?: boolean; routes?: readonly string[] }
+interface LocalWindow { entity: Entity; app: Entity; path: string; title: string; memory: Record<string, unknown> }
+
+/**
+ * The desktop's chrome over a state without the desktop system: its windows are this component's own, not the state's, so
+ * opening, closing and navigating move nothing in the state drawn. The apps draw inside it with the hooks reading the state
+ * it is shown over and their own hands acting on it. The Maker shows the whole baba this way; `open` names the app in front at first.
+ */
+export function LocalDesktop({ apps, components, title = "Desktop", open: first }: { apps: readonly LocalApp[]; components: Record<string, ComponentType<AppProps>>; title?: string; open?: string }) {
+  const rows = useMemo<AppRow[]>(() => apps.map((sc, order) => ({ entity: order + 1, key: sc.key, title: sc.title, group: sc.group ?? "", icon: sc.icon ?? "", many: sc.many ?? false, order, routes: [...(sc.routes ?? [])], drawing: null })), [apps]);
+  const next = useRef(1000);
+  const [state, setState] = useState<{ windows: LocalWindow[]; selected: Entity | null }>(() => {
+    const at = rows.find((r) => r.key === first);
+    if (!at) return { windows: [], selected: null };
+    const e = next.current++;
+    return { windows: [{ entity: e, app: at.entity, path: "/", title: "", memory: {} }], selected: e };
+  });
+  const hand: Hand = { fire: (name, args) => {
+    const a = (args ?? {}) as { app?: string; path?: string; fresh?: boolean; window?: Entity; title?: string; key?: string; value?: unknown };
+    setState((st) => {
+      const target = a.window ?? st.selected;
+      switch (name) {
+        case "desktop-open": {
+          const sc = rows.find((r) => r.key === a.app);
+          if (!sc || (a.path !== undefined && sc.routes?.length && !matchRoute(sc.routes, a.path))) return st;
+          const have = st.windows.filter((o) => o.app === sc.entity).at(-1);
+          if (have && !(a.fresh && sc.many)) return { windows: st.windows.map((o) => (o === have && a.path !== undefined ? { ...o, path: a.path } : o)), selected: have.entity };
+          const made: LocalWindow = { entity: next.current++, app: sc.entity, path: a.path ?? "/", title: "", memory: {} };
+          return { windows: [...st.windows, made], selected: made.entity };
+        }
+        case "desktop-select": return st.windows.some((o) => o.entity === a.window) ? { ...st, selected: a.window! } : st;
+        case "desktop-close": {
+          const i = st.windows.findIndex((o) => o.entity === target);
+          if (i < 0) return st;
+          const windows = st.windows.filter((_, k) => k !== i);
+          return { windows, selected: st.selected !== target ? st.selected : (windows[i] ?? windows[i - 1])?.entity ?? null };
+        }
+        case "desktop-title": return { ...st, windows: st.windows.map((o) => (o.entity === target ? { ...o, title: a.title ?? "" } : o)) };
+        case "desktop-remember": return { ...st, windows: st.windows.map((o) => (o.entity === target && a.key !== undefined ? { ...o, memory: a.value === null ? Object.fromEntries(Object.entries(o.memory).filter(([k]) => k !== a.key)) : { ...o.memory, [a.key]: a.value } } : o)) };
+        default: return st;
+      }
+    });
+  } };
+  const picture: Picture = {
+    session: { entity: 0, key: "local", selected: state.selected, theme: "system" },
+    apps: rows,
+    windows: state.windows.map((o) => ({ ...o, session: 0 })),
+  };
+  return <DesktopFrame picture={picture} title={title} hand={hand} render={(s, props) => { const View = components[s.key]; return View ? <View {...props} /> : bareWindow(s.title); }} />;
+}
+