babavoss 0.12.6 → 0.13.1

package/gui/{chunk-9gmmm54v.js → chunk-qgzmajan.js}

@@ -2783,7 +2783,7 @@ function dataOf(v) {
 var nameOf = (v) => dataOf(v).name;
 var NAME2 = /^[a-z][a-zA-Z0-9-]*$/;
 var SYSTEM_NAME = /^[a-z][a-z0-9-]*$/;
-var RESERVED = new Set(["start", "stop", "status", "state", "follow", "run", "raw", "secret", "help", "mcp", "check", "install", "add-system", "serve", "promptware", "init", "babas", "service", "gui"]);
+var RESERVED = new Set(["start", "stop", "status", "state", "follow", "run", "raw", "secret", "help", "mcp", "check", "install", "add-system", "serve", "agents", "init", "babas", "service", "gui"]);
 function declareModel(name, model) {
   if (typeof name !== "string" || !SYSTEM_NAME.test(name))
     throw new Error(`system ${JSON.stringify(name)}: lowercase letters, digits and dashes`);
@@ -2883,6 +2883,8 @@ function closureOf(systems) {
   return out;
 }
 function baba(def) {
+  if ("promptware" in def)
+    throw new Error("baba({ promptware }) is gone: the agentic instructions are the .mdx files under .baba/agents/, which voss reads on its own; see the write-agentic-instructions skill");
   const harness = harnessOf(def.harness);
   if (def.tick !== undefined && !(Number.isInteger(def.tick) && def.tick > 0))
     throw new Error("baba: tick is whole milliseconds, above zero");
@@ -2942,7 +2944,7 @@ function baba(def) {
     if (e)
       throw new Error(`app ${v.key}: ${e}`);
   }
-  return Object.freeze({ kind: "baba", systems: def.systems, apps: apps.map((v) => ({ ...v, ...v.systems ? { systems: [...v.systems] } : {}, ...v.routes ? { routes: [...v.routes] } : {} })), $app: undefined, $routes: undefined, tick: def.tick ?? null, promptware: [...def.promptware ?? []], harness, model, actions, queries });
+  return Object.freeze({ kind: "baba", systems: def.systems, apps: apps.map((v) => ({ ...v, ...v.systems ? { systems: [...v.systems] } : {}, ...v.routes ? { routes: [...v.routes] } : {} })), $app: undefined, $routes: undefined, tick: def.tick ?? null, instructions: [...def.instructions ?? []], harness, model, actions, queries });
 }
 function isSystem(v) {
   return typeof v === "object" && v !== null && SYSTEM in v;
@@ -5028,93 +5030,151 @@ function useBabaState(v) {
 // src/desktop/view.tsx
 var import_react7 = __toESM(require_react(), 1);
 
-// src/desktop/bob.ts
-var gravity = 9000;
-var catchSpring = { stiffness: 1400, damping: 28 };
-var glideSpring = { stiffness: 1100, damping: 40 };
-var swingSpring = { stiffness: 1600, damping: 56 };
-var axis = (at, v, to, s2, dt) => {
-  const a = s2.stiffness * (to - at) - s2.damping * v;
-  const nv = v + a * dt;
-  return [at + nv * dt, nv];
+// src/desktop/keys.ts
+var keyCommands = [
+  { id: "launcher", title: "Quick launcher", summary: "Open the launcher over the app in front, and close it again.", default: "Mod+P" },
+  { id: "previousTab", title: "Previous tab", summary: "Go to the tab on the left; from the first, the launcher's.", default: "Mod+J" },
+  { id: "nextTab", title: "Next tab", summary: "Go to the tab on the right; from the last, the launcher's.", default: "Mod+K" },
+  { id: "closeTab", title: "Close tab", summary: "Close the window in front; its × and a middle click do too.", default: null }
+];
+var modifiers = ["Mod", "Ctrl", "Alt", "Shift", "Meta"];
+var named = {
+  Minus: "-",
+  Equal: "=",
+  BracketLeft: "[",
+  BracketRight: "]",
+  Backslash: "\\",
+  Semicolon: ";",
+  Quote: "'",
+  Backquote: "`",
+  Comma: ",",
+  Period: ".",
+  Slash: "/",
+  ArrowLeft: "Left",
+  ArrowRight: "Right",
+  ArrowUp: "Up",
+  ArrowDown: "Down",
+  Space: "Space",
+  Tab: "Tab",
+  Enter: "Enter",
+  Backspace: "Backspace",
+  Delete: "Delete",
+  Home: "Home",
+  End: "End",
+  PageUp: "PageUp",
+  PageDown: "PageDown"
 };
-function step(s2, aim, dt) {
-  const [x, vx] = axis(s2.at.x, s2.v.x, aim.x, s2.phase === "gliding" ? glideSpring : swingSpring, dt);
-  if (s2.phase === "falling") {
-    const vy2 = s2.v.y + gravity * dt, y2 = s2.at.y + vy2 * dt;
-    return y2 < aim.y ? { at: { x, y: y2 }, v: { x: vx, y: vy2 }, phase: "falling" } : { at: { x, y: aim.y }, v: { x: vx, y: vy2 }, phase: "caught" };
+var keyOfCode = (code) => {
+  const m = /^(?:Key([A-Z])|Digit([0-9])|Numpad([0-9])|(F(?:[1-9]|1[0-2])))$/.exec(code);
+  if (m)
+    return m[1] ?? m[2] ?? m[3] ?? m[4];
+  return named[code] ?? null;
+};
+var keys = new Set([..."ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789", ...Object.values(named), ...Array.from({ length: 12 }, (_, i) => `F${i + 1}`)]);
+function parseBinding(text) {
+  const parts = text.split("+").map((p) => p.trim());
+  if (parts.some((p) => !p))
+    return null;
+  const key = parts.pop();
+  const k = key.length === 1 ? key.toUpperCase() : key;
+  const mods = [];
+  for (const p of parts) {
+    const m = modifiers.find((x) => x.toLowerCase() === p.toLowerCase());
+    if (!m || mods.includes(m))
+      return null;
+    mods.push(m);
   }
-  const [y, vy] = axis(s2.at.y, s2.v.y, aim.y, s2.phase === "caught" ? catchSpring : glideSpring, dt);
-  return { at: { x, y }, v: { x: vx, y: vy }, phase: s2.phase };
+  if (!keys.has(k))
+    return null;
+  if (!mods.some((m) => m !== "Shift") && !/^F\d+$/.test(k))
+    return null;
+  return { mods: modifiers.filter((m) => mods.includes(m)), key: k };
 }
-var resting = (s2, aim) => s2.phase !== "falling" && Math.abs(s2.at.x - aim.x) < 0.05 && Math.abs(s2.at.y - aim.y) < 0.05 && Math.hypot(s2.v.x, s2.v.y) < 2;
-
-class Bob {
-  draw;
-  still;
-  state = null;
-  aim = { x: 0, y: 0 };
-  frame = 0;
-  last = 0;
-  constructor(draw, still = () => false) {
-    this.draw = draw;
-    this.still = still;
-  }
-  drop(from) {
-    this.state = { at: { ...from }, v: { x: 0, y: 0 }, phase: "falling" };
-    this.draw(from);
-    this.wake();
-  }
-  to(aim, now = false) {
-    const moved = Math.abs(aim.y - this.aim.y) > 0.5;
-    this.aim = aim;
-    if (!this.state || now || this.still()) {
-      this.state = { at: { ...aim }, v: { x: 0, y: 0 }, phase: "gliding" };
-      this.draw(aim);
-      return;
-    }
-    if (this.state.phase === "caught" && moved)
-      this.state = { ...this.state, phase: "gliding" };
-    this.wake();
-  }
-  stop() {
-    cancelAnimationFrame(this.frame);
-    this.frame = 0;
-    this.state = null;
-  }
-  wake() {
-    if (this.frame)
-      return;
-    this.last = performance.now();
-    const tick = (now) => {
-      let left = Math.min(0.05, (now - this.last) / 1000);
-      this.last = now;
-      while (left > 0 && this.state) {
-        const dt = Math.min(left, 1 / 240);
-        this.state = step(this.state, this.aim, dt);
-        left -= dt;
-      }
-      if (!this.state) {
-        this.frame = 0;
-        return;
-      }
-      if (resting(this.state, this.aim)) {
-        this.state = { at: { ...this.aim }, v: { x: 0, y: 0 }, phase: "gliding" };
-        this.draw(this.aim);
-        this.frame = 0;
-        return;
-      }
-      this.draw(this.state.at);
-      this.frame = requestAnimationFrame(tick);
-    };
-    this.frame = requestAnimationFrame(tick);
-  }
+function normalBinding(text) {
+  const b = parseBinding(text);
+  return b ? [...b.mods, b.key].join("+") : null;
+}
+var isMac = () => {
+  const nav = globalThis.navigator;
+  return !!nav && /mac|iphone|ipad/i.test(nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent ?? "");
+};
+function bindingOf(e, mac = isMac()) {
+  const key = keyOfCode(e.code);
+  if (!key)
+    return null;
+  const mods = [];
+  if (mac ? e.metaKey : e.ctrlKey)
+    mods.push("Mod");
+  if (mac && e.ctrlKey)
+    mods.push("Ctrl");
+  if (e.altKey)
+    mods.push("Alt");
+  if (e.shiftKey)
+    mods.push("Shift");
+  if (!mac && e.metaKey)
+    mods.push("Meta");
+  return [...mods, key].join("+");
+}
+function keymapOf(overrides) {
+  return Object.fromEntries(keyCommands.map((c) => [c.id, overrides?.[c.id] ?? c.default]));
+}
+function bindingOn(binding, mac = isMac()) {
+  const b = parseBinding(binding);
+  if (!b)
+    return null;
+  const same2 = mac ? "Meta" : "Ctrl";
+  const mods = new Set(b.mods.map((m) => m === same2 ? "Mod" : m));
+  return [...modifiers.filter((m) => mods.has(m)), b.key].join("+");
+}
+function commandOf(keymap, e, mac = isMac()) {
+  const b = bindingOf(e, mac);
+  if (!b)
+    return null;
+  return keyCommands.find((c) => keymap[c.id] !== null && bindingOn(keymap[c.id], mac) === b)?.id ?? null;
+}
+function formatBinding(text, mac = isMac()) {
+  const b = parseBinding(text);
+  if (!b)
+    return text;
+  const arrows = { Left: "←", Right: "→", Up: "↑", Down: "↓" };
+  if (mac) {
+    const sign = { Mod: "⌘", Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Meta: "⌘" };
+    return [...b.mods.map((m) => sign[m]), arrows[b.key] ?? b.key].join("");
+  }
+  const word = { Mod: "Ctrl", Ctrl: "Ctrl", Alt: "Alt", Shift: "Shift", Meta: "Win" };
+  return [...b.mods.map((m) => word[m]), arrows[b.key] ?? b.key].join("+");
+}
+var browserKeys = {
+  "Mod+L": "the browser's address bar",
+  "Mod+T": "a new browser tab",
+  "Mod+N": "a new browser window",
+  "Mod+Shift+N": "a private window",
+  "Mod+Shift+T": "reopening a closed tab",
+  "Mod+Q": "quitting the browser",
+  "Mod+R": "reloading the page",
+  "Mod+F": "finding in the page",
+  "Mod+W": "closing the browser tab, or the app the page runs in",
+  "Mod+Shift+W": "closing the browser window",
+  "Mod+Tab": "switching browser tabs",
+  "Ctrl+Tab": "switching browser tabs",
+  "Mod+C": "copy",
+  "Mod+V": "paste",
+  "Mod+X": "cut",
+  "Mod+Z": "undo",
+  "Mod+A": "select all",
+  ...Object.fromEntries(Array.from({ length: 9 }, (_, i) => [`Mod+${i + 1}`, "switching browser tabs"]))
+};
+function bindingNote(binding) {
+  const n = normalBinding(binding);
+  const why = n && browserKeys[n];
+  return why ? `Also ${why}: the browser may keep it.` : null;
 }
 
 // src/desktop/view.tsx
 var jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
 var plusIcon = [{ tag: "path", attrs: { d: "M5 12h14" } }, { tag: "path", attrs: { d: "M12 5v14" } }];
-var leaveIcon = [{ 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" } }];
+var leaveIcon = [{ 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" } }];
+var searchIcon = [{ tag: "circle", attrs: { cx: "11", cy: "11", r: "8" } }, { tag: "path", attrs: { d: "m21 21-4.3-4.3" } }];
 var sessionIcon = [{ tag: "rect", attrs: { x: "3", y: "5", width: "18", height: "14", rx: "2" } }, { tag: "path", attrs: { d: "M3 9.5h18" } }];
 var OWN = "~";
 var sessionKey = (scope) => `voss.session.${scope}`;
@@ -5172,7 +5232,7 @@ function addressedSession() {
   const old = parseDesktopHash(location.hash)?.session;
   return old === OWN ? undefined : old;
 }
-function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", address = true, base: givenBase, root }) {
+function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", address = true, base: givenBase, root, settings: person }) {
   const renderers = apps ?? surfaces ?? {};
   const scope = useScope();
   const base = givenBase ?? `/${encodeURIComponent(scope)}`;
@@ -5181,7 +5241,9 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
   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";
+  const babaTheme = useResource(system.desktopSettings)?.theme;
+  const remembered = address ? document.documentElement.dataset.theme : undefined;
+  const theme = person?.theme ?? (address ? remembered ?? "system" : babaTheme ?? "system");
   const { fire, ready, connected } = useBaba();
   const [error, setError] = import_react7.useState(null);
   const [key, setKey] = import_react7.useState(() => fixed ?? (address ? addressedSession() : undefined) ?? rememberedSession(scope));
@@ -5212,7 +5274,8 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
       const s2 = front && appRows.get(front.app);
       return { entity, key: value.key, touched: value.touched ?? 0, windows: wins.length, front: front ? front.title || (front.path === "/" ? s2?.title ?? null : front.path) : null };
     }).sort((a, b) => b.touched - a.touched || b.entity - a.entity),
-    theme
+    theme,
+    ...person?.keys ? { keys: person.keys } : {}
   } : null;
   const hand = { fire: (name, args) => {
     setError(null);
@@ -5260,7 +5323,15 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
   const agreed = import_react7.useRef(null);
   const pending = import_react7.useRef(null);
   const initialized = import_react7.useRef(false);
-  const [launch, setLaunch] = import_react7.useState(0);
+  const first = import_react7.useMemo(() => address ? parseDesktopAddress(base, location.pathname) : null, []);
+  const [launch, setLaunch] = import_react7.useState(first && !first.app ? 1 : 0);
+  const [arriving, setArriving] = import_react7.useState(!!first?.app);
+  import_react7.useEffect(() => {
+    if (!arriving)
+      return;
+    const t = setTimeout(() => setArriving(false), 2000);
+    return () => clearTimeout(t);
+  }, [arriving]);
   const [dismiss, setDismiss] = import_react7.useState(0);
   const go = (next) => {
     setError(null);
@@ -5304,10 +5375,12 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
         return;
       }
       pending.current = expected;
+      setArriving(true);
       fire("desktop-open", { session: key, app: route2.app, path }).catch((e) => {
         if (!live)
           return;
         pending.current = null;
+        setArriving(false);
         setError(String(e));
         if (current.current)
           history.replaceState(null, "", current.current);
@@ -5327,8 +5400,11 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
   import_react7.useEffect(() => {
     if (!address || !initialized.current || !here)
       return;
+    if (pending.current && here === desktopAddress(base))
+      return;
     const asked = pending.current === here;
     pending.current = null;
+    setArriving(false);
     if (here === agreed.current)
       return;
     agreed.current = here;
@@ -5339,10 +5415,21 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
         history.pushState(null, "", here);
     }
   }, [address, here, base]);
-  const launcherShown = (open) => {
-    if (open || !address || !current.current || current.current !== agreed.current)
+  const launcherShown = (mode) => {
+    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;
-    if (location.pathname === `${base}/` && current.current !== `${base}/`)
+    const entry = history.state;
+    if (entry?.launcher && entry.over === current.current)
+      history.back();
+    else
       history.replaceState(null, "", current.current);
   };
   return /* @__PURE__ */ jsx_runtime4.jsxs(jsx_runtime4.Fragment, {
@@ -5368,9 +5455,12 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
         title,
         hand,
         root,
+        documentTitle: address,
+        launcherHref: address ? `${base}/` : undefined,
         go: fixed ? undefined : go,
         launch,
         dismiss,
+        arriving,
         onLauncher: launcherShown,
         render: (app, props2) => {
           const View = renderers[app.key];
@@ -5385,17 +5475,42 @@ function Desktop({ system, apps, surfaces, session: fixed, title = "Desktop", ad
             ]
           });
         }
-      }) : /* @__PURE__ */ jsx_runtime4.jsx("p", {
-        className: "desktop-empty",
-        role: "status",
-        children: "Opening desktop…"
+      }) : /* @__PURE__ */ jsx_runtime4.jsx(DesktopSkeleton, {
+        title
       })
     ]
   });
 }
-function Eyes({ size = 16, large = true, settle = false }) {
+function DesktopSkeleton({ title }) {
+  return /* @__PURE__ */ jsx_runtime4.jsx("div", {
+    className: "desktop",
+    "aria-busy": "true",
+    "aria-label": "Opening the desktop",
+    children: /* @__PURE__ */ jsx_runtime4.jsx("header", {
+      className: "desktop-bar",
+      children: /* @__PURE__ */ jsx_runtime4.jsx("span", {
+        className: "desktop-pill desktop-pill-mark",
+        children: /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+          className: "desktop-pill-label",
+          children: [
+            /* @__PURE__ */ jsx_runtime4.jsx("span", {
+              className: "desktop-pill-icon",
+              children: /* @__PURE__ */ jsx_runtime4.jsx(Eyes, {
+                size: 18
+              })
+            }),
+            title && /* @__PURE__ */ jsx_runtime4.jsx(PillText, {
+              text: title
+            })
+          ]
+        })
+      })
+    })
+  });
+}
+function Eyes({ size = 16, large = true }) {
   return /* @__PURE__ */ jsx_runtime4.jsxs("svg", {
-    className: `desktop-eyes${large ? "" : " is-alone"}${settle ? " is-settling" : ""}`,
+    className: `desktop-eyes${large ? "" : " is-alone"}`,
     viewBox: "0 0 100 100",
     width: size,
     height: size,
@@ -5515,21 +5630,24 @@ function WindowPill({ label, active, hand, icon, shortcut, enter, onSelect, onCl
         type: "button",
         className: "desktop-pill-close",
         "aria-label": `Close ${label}`,
-        title: `Close ${label}${shortcut ? " (⌘/Ctrl W)" : ""}`,
+        title: `Close ${label}${shortcut ? ` (${shortcut})` : ""}`,
         onClick: onClose,
         children: /* @__PURE__ */ jsx_runtime4.jsx(Cross, {})
       })
     ]
   });
 }
-function Pills({ children, label }) {
+function useScrollFade(axis) {
   const ref = import_react7.useRef(null);
   const [fade, setFade] = import_react7.useState("");
   import_react7.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);
@@ -5541,6 +5659,10 @@ function Pills({ children, label }) {
       el.removeEventListener("scroll", measure);
     };
   });
+  return { ref, fade };
+}
+function Pills({ children, label }) {
+  const { ref, fade } = useScrollFade("x");
   return /* @__PURE__ */ jsx_runtime4.jsx("div", {
     ref,
     className: `desktop-pills${fade}`,
@@ -5596,14 +5718,19 @@ function rank2(texts, words2) {
   }
   return total;
 }
-function DesktopFrame({ picture, title, hand, render: render2, root, go, launch, dismiss, onLauncher }) {
+function DesktopFrame({ picture, title, hand, render: render2, root, documentTitle = false, launcherHref, go, launch, dismiss, arriving = false, onLauncher }) {
   const { session: w, apps, windows } = picture;
+  const keymap = keymapOf(picture.keys);
+  const keyOf2 = (c) => {
+    const b = keymap[c];
+    return b === null ? undefined : formatBinding(b);
+  };
   const sessions = go ? picture.sessions ?? [] : [];
   const frame = import_react7.useRef(null), input = import_react7.useRef(null);
   const resultsId = import_react7.useId();
   const fire = (name, args) => hand?.fire(name, { ...args, session: w.key });
   const open = (app, path) => fire("desktop-open", { app, ...path === undefined ? {} : { path } });
-  const [focused, setFocused] = import_react7.useState(false);
+  const [mode, setMode] = import_react7.useState(() => launch ? "tab" : null);
   const [awaiting, setAwaiting] = import_react7.useState(null);
   import_react7.useEffect(() => {
     if (awaiting && w.selected !== awaiting.from)
@@ -5615,43 +5742,63 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
     const t = setTimeout(() => setAwaiting(null), 800);
     return () => clearTimeout(t);
   }, [awaiting]);
-  const launcher = focused || w.selected === null || awaiting !== null;
+  const shownMode = w.selected === null ? arriving && mode === null ? null : "tab" : mode ?? awaiting?.mode ?? null;
+  const launcher = shownMode !== null, quick = shownMode === "quick";
+  const before = import_react7.useRef(null);
+  const openQuick = () => {
+    before.current = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+    setMode("quick");
+  };
+  const leave = () => {
+    const back = quick ? before.current : null;
+    setMode(null);
+    input.current?.blur();
+    before.current = null;
+    if (back?.isConnected)
+      back.focus({ preventScroll: true });
+  };
   import_react7.useEffect(() => {
     if (launch)
-      setFocused(true);
+      setMode("tab");
   }, [launch]);
   import_react7.useEffect(() => {
     if (dismiss) {
-      setFocused(false);
+      setMode(null);
       input.current?.blur();
     }
   }, [dismiss]);
+  import_react7.useEffect(() => {
+    if (w.selected === null)
+      setMode((m) => m === "quick" ? null : m);
+  }, [w.selected]);
   const told = import_react7.useRef(onLauncher);
   told.current = onLauncher;
-  const shown = import_react7.useRef(launcher);
+  const shown = import_react7.useRef(shownMode);
   import_react7.useEffect(() => {
-    if (shown.current !== launcher) {
-      shown.current = launcher;
-      told.current?.(launcher);
+    if (shown.current !== shownMode) {
+      shown.current = shownMode;
+      told.current?.(shownMode);
     }
-  }, [launcher]);
-  const [settles, setSettles] = import_react7.useState(0);
-  const [was, setWas] = import_react7.useState(launcher);
-  if (was !== launcher) {
-    setWas(launcher);
-    if (!launcher)
-      setSettles(settles + 1);
-  }
+  }, [shownMode]);
   const firstDrawn = import_react7.useRef(false);
   import_react7.useEffect(() => {
     firstDrawn.current = true;
   }, []);
-  const toggle = () => {
-    if (focused) {
-      setFocused(false);
-      input.current?.blur();
-    } else
-      setFocused(true);
+  const chooseMark = (e) => {
+    if (launcherHref && (e.metaKey || e.ctrlKey || e.button === 1)) {
+      window.open(launcherHref, "_blank");
+      return;
+    }
+    setMode("tab");
+    input.current?.focus();
+  };
+  const selectWindow = (o) => {
+    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((s2) => s2.entity === selectedWindow?.app);
@@ -5666,17 +5813,18 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
       search("");
   }, [launcher]);
   const label = (o, s2) => o.title || (o.path === "/" ? s2.title : o.path);
+  const tabTitle = launcher && !quick || !selectedWindow || !selectedApp ? null : label(selectedWindow, selectedApp);
+  import_react7.useEffect(() => {
+    if (documentTitle)
+      document.title = tabTitle ? `${tabTitle} · ${title}` : title;
+  }, [documentTitle, tabTitle, title]);
   const words2 = text.toLowerCase().trim().split(/\s+/).filter(Boolean);
   const ranked = (items, texts) => items.map((item2, order) => ({ item: item2, order, rank: rank2(texts(item2), words2) })).filter((r) => 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 s2 = apps.find((s3) => s3.entity === o.app);
-    return s2 ? [{ o, s: s2 }] : [];
-  }), ({ o, s: s2 }) => [label(o, s2), s2.title, s2.group]);
   const found = ranked(apps, (s2) => [s2.title, s2.key, s2.group]);
   const sessionRows = ranked(sessions, (x) => [x.key, x.front ?? ""]);
   const newSession = go && rank2(["new session"], words2) !== null;
   const leaving = root && rank2([`leave ${title}`, root.label], words2) !== 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));
@@ -5688,86 +5836,53 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
     if (i >= S0) {
       const x = sessionRows[i - S0];
       go?.(x ? x.key : null);
-      setFocused(false);
+      setMode(null);
       input.current?.blur();
       return;
     }
-    const row = openRows[i], s2 = row ? undefined : found[i - openRows.length];
-    const target = row ? row.o.entity : s2 && !s2.many ? windows.filter((o) => o.app === s2.entity).at(-1)?.entity : undefined;
-    if (row)
-      fire("desktop-select", { window: row.o.entity });
-    else if (s2)
+    const s2 = found[i];
+    const target = s2 && !s2.many ? windows.filter((o) => o.app === s2.entity).at(-1)?.entity : undefined;
+    if (s2)
       fire("desktop-open", { app: s2.key, fresh: true });
-    if ((row || s2) && target !== w.selected)
-      setAwaiting({ from: w.selected });
-    setFocused(false);
+    if (s2 && target !== w.selected)
+      setAwaiting({ from: w.selected, mode: shownMode ?? "tab" });
+    setMode(null);
     input.current?.blur();
   };
   import_react7.useEffect(() => {
-    if (focused && hand)
+    if (mode && hand)
       input.current?.focus();
-  }, [focused, !!hand]);
+  }, [mode, !!hand]);
   import_react7.useEffect(() => {
     frame.current?.querySelector(`[data-result="${cursor}"]`)?.scrollIntoView({ block: "nearest" });
   }, [cursor]);
-  const dot = import_react7.useRef(null), string = import_react7.useRef(null), overlay = import_react7.useRef(null);
-  const tie = import_react7.useRef({ x: 0, y: 0, r: 0 });
-  const bob = import_react7.useRef(null);
-  bob.current ??= new Bob((at2) => {
-    const el = dot.current, line = string.current, t = tie.current;
-    if (!el || !line)
-      return;
-    el.style.transform = `translate(${at2.x}px, ${at2.y}px)`;
-    const dx = at2.x - t.x, dy = at2.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);
-  import_react7.useEffect(() => () => bob.current?.stop(), []);
-  const place = (now = false) => {
-    const o = overlay.current, el = dot.current;
-    const row = o?.querySelector(`[data-result="${cursor}"]`)?.closest(".desktop-row");
-    if (!el)
-      return;
-    el.style.opacity = row ? "1" : "0";
-    if (!row) {
-      if (string.current)
-        string.current.style.opacity = "0";
-      return;
-    }
-    const body = row.closest(".desktop-launcher-body");
-    bob.current.to({ x: tie.current.x, y: row.offsetTop - (body?.scrollTop ?? 0) + row.offsetHeight / 2 }, now);
-  };
-  import_react7.useLayoutEffect(() => {
-    if (!launcher) {
-      bob.current.stop();
-      return;
-    }
-    const o = overlay.current, mark = o?.querySelector(".desktop-logo"), eye = o?.querySelector(".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 };
-    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]);
-  import_react7.useEffect(() => {
-    if (launcher)
-      place();
-  });
+  const { ref: body, fade: bodyFade } = useScrollFade("y");
   import_react7.useEffect(() => {
     if (!hand)
       return;
     const key = (e) => {
       if (document.activeElement !== document.body && !frame.current?.contains(document.activeElement))
         return;
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && !e.altKey) {
+      const command = e.defaultPrevented ? null : commandOf(keymap, e);
+      if (command === "launcher") {
         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) {
+        if (!launcher)
+          openQuick();
+        else if (quick)
+          leave();
+        else
+          input.current?.focus();
+      } else if ((command === "previousTab" || command === "nextTab") && windows.length) {
+        e.preventDefault();
+        const tabs = [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") {
@@ -5775,7 +5890,7 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
         if (text)
           search("");
         else if (w.selected !== null)
-          toggle();
+          leave();
       }
     };
     addEventListener("keydown", key);
@@ -5787,17 +5902,17 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
     const s2 = apps.find((s3) => s3.entity === o.app);
     if (!s2)
       return null;
-    const active = w.selected === o.entity;
+    const active = (!launcher || quick) && w.selected === o.entity;
     return /* @__PURE__ */ jsx_runtime4.jsx(WindowPill, {
       label: label(o, s2),
       active,
       hand,
-      shortcut: active,
+      shortcut: active ? keyOf2("closeTab") : undefined,
       icon: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
         drawing: s2.drawing
       }),
       enter: firstDrawn.current,
-      onSelect: () => fire("desktop-select", { window: o.entity }),
+      onSelect: () => selectWindow(o.entity),
       onClose: () => fire("desktop-close", { window: o.entity })
     }, o.entity);
   });
@@ -5810,44 +5925,47 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
         className: "desktop-bar",
         "aria-label": "Bar",
         children: [
-          /* @__PURE__ */ jsx_runtime4.jsx("button", {
-            type: "button",
-            className: "desktop-logo",
-            title: `${title}: launcher (⌘/Ctrl K)`,
-            "aria-label": "Open launcher",
-            "aria-expanded": launcher,
-            disabled: !hand,
-            onClick: toggle,
-            children: /* @__PURE__ */ jsx_runtime4.jsx(Eyes, {
-              size: 18,
-              settle: settles > 0
-            }, settles)
-          }),
-          windows.length === 0 && /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-            className: "desktop-bar-title",
+          /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+            className: `desktop-pill desktop-pill-mark${launcher && !quick ? " is-active" : ""}`,
             children: [
-              root && /* @__PURE__ */ jsx_runtime4.jsxs(jsx_runtime4.Fragment, {
+              /* @__PURE__ */ jsx_runtime4.jsxs("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);
+                },
                 children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("a", {
-                    className: "desktop-bar-root",
-                    href: root.href,
-                    title: `Leave ${title}: back to ${root.label}`,
-                    children: root.label
-                  }),
                   /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                    className: "desktop-muted",
-                    children: " / "
+                    className: "desktop-pill-icon",
+                    children: /* @__PURE__ */ jsx_runtime4.jsx(Eyes, {
+                      size: 18
+                    })
+                  }),
+                  /* @__PURE__ */ jsx_runtime4.jsx(PillText, {
+                    text: title
                   })
                 ]
               }),
-              title,
-              go || w.key !== "main" ? /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                className: "desktop-muted",
-                children: [
-                  " · ",
-                  w.key
-                ]
-              }) : ""
+              hand && root && /* @__PURE__ */ jsx_runtime4.jsx("button", {
+                type: "button",
+                className: "desktop-pill-close",
+                "aria-label": `Leave ${title}`,
+                title: `Leave ${title}: back to ${root.label}`,
+                onClick: () => location.assign(root.href),
+                children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                  drawing: leaveIcon
+                })
+              })
             ]
           }),
           /* @__PURE__ */ jsx_runtime4.jsx(Pills, {
@@ -5864,7 +5982,7 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
             return null;
           const active = w.selected === o.entity;
           return /* @__PURE__ */ jsx_runtime4.jsx("section", {
-            className: "desktop-app",
+            className: `desktop-app${active && launcher && !quick ? " is-behind" : ""}`,
             hidden: !active,
             "aria-label": label(o, s2),
             children: /* @__PURE__ */ jsx_runtime4.jsx(AppBoundary, {
@@ -5892,359 +6010,285 @@ function DesktopFrame({ picture, title, hand, render: render2, root, go, launch,
           }, o.entity);
         })
       }),
-      launcher && /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-        ref: overlay,
-        className: "desktop-launcher",
+      launcher && /* @__PURE__ */ jsx_runtime4.jsx("div", {
+        className: `desktop-launcher${quick ? " is-quick" : ""}`,
         "aria-label": "Launcher",
         onPointerDown: (e) => {
           if (!e.target.closest("input"))
             e.preventDefault();
+          if (quick && !e.target.closest(".desktop-palette"))
+            leave();
         },
-        children: [
-          /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-            className: "desktop-bar desktop-launcher-search",
-            children: [
-              /* @__PURE__ */ jsx_runtime4.jsx("button", {
-                type: "button",
-                className: "desktop-logo is-selected",
-                title: "Close launcher (Esc)",
-                "aria-label": "Close launcher",
-                "aria-expanded": "true",
-                disabled: !hand,
-                onClick: toggle,
-                children: /* @__PURE__ */ jsx_runtime4.jsx(Eyes, {
-                  size: 18,
-                  large: false
-                })
-              }),
-              /* @__PURE__ */ jsx_runtime4.jsx("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);
+        children: /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+          className: "desktop-palette",
+          children: [
+            /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+              className: "desktop-launcher-search",
+              children: [
+                /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                  className: "desktop-pill-icon",
+                  children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                    drawing: searchIcon
+                  })
+                }),
+                /* @__PURE__ */ jsx_runtime4.jsx("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);
+                    }
                   }
-                }
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx_runtime4.jsx("span", {
-            ref: string,
-            className: "desktop-string",
-            "aria-hidden": "true"
-          }),
-          /* @__PURE__ */ jsx_runtime4.jsx("span", {
-            ref: dot,
-            className: "desktop-dot",
-            "aria-hidden": "true"
-          }),
-          /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-            id: resultsId,
-            className: "desktop-launcher-body",
-            role: "listbox",
-            "aria-label": "Open windows and apps",
-            onScroll: () => place(true),
-            children: [
-              openRows.length > 0 && /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-                className: "desktop-group",
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("h2", {
-                    className: "desktop-group-title",
-                    style: { "--i": 0 },
-                    children: "Open"
-                  }),
-                  openRows.map(({ o, s: s2 }, k) => {
-                    const i = k, front = w.selected === o.entity;
-                    return /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                      className: `desktop-row desktop-row-window${cursor === i ? " is-cursor" : ""}${front ? " is-active" : ""}`,
-                      style: { "--i": i + 1 },
-                      ...middleCloses(hand && (() => fire("desktop-close", { window: o.entity }))),
-                      children: [
-                        /* @__PURE__ */ jsx_runtime4.jsxs("button", {
-                          type: "button",
-                          id: `${resultsId}-${i}`,
-                          "data-result": i,
-                          role: "option",
-                          "aria-selected": cursor === i,
-                          className: "desktop-row-main",
-                          disabled: !hand,
-                          title: label(o, s2),
-                          onMouseEnter: () => setAt(i),
-                          onClick: () => choose(i),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-pill-icon",
-                              children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
-                                drawing: s2.drawing
-                              })
-                            }),
-                            /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-row-label",
-                              children: label(o, s2)
-                            }),
-                            label(o, s2) !== s2.title && /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-row-note",
-                              children: s2.title
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+              ref: body,
+              id: resultsId,
+              className: `desktop-launcher-body${bodyFade}`,
+              role: "listbox",
+              "aria-label": "Apps",
+              children: [
+                groups.map((group) => /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+                  className: "desktop-group",
+                  children: [
+                    group && /* @__PURE__ */ jsx_runtime4.jsx("h2", {
+                      className: "desktop-group-title",
+                      children: group
+                    }),
+                    appsOf(group).map((s2) => {
+                      const i = found.indexOf(s2);
+                      const open2 = windows.filter((o) => o.app === s2.entity).length;
+                      return /* @__PURE__ */ jsx_runtime4.jsxs("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: s2.many ? `Open another ${s2.title}` : open2 ? `Bring ${s2.title} to the front` : `Open ${s2.title}`,
+                        onMouseEnter: () => setAt(i),
+                        onClick: () => choose(i),
+                        children: [
+                          /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                            className: "desktop-pill-icon",
+                            children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                              drawing: s2.drawing
                             })
-                          ]
-                        }),
-                        hand && /* @__PURE__ */ jsx_runtime4.jsx("button", {
-                          type: "button",
-                          className: "desktop-pill-close",
-                          "aria-label": `Close ${label(o, s2)}`,
-                          title: `Close ${label(o, s2)}`,
-                          onClick: () => fire("desktop-close", { window: o.entity }),
-                          children: /* @__PURE__ */ jsx_runtime4.jsx(Cross, {})
-                        })
-                      ]
-                    }, o.entity);
-                  })
-                ]
-              }),
-              groups.map((group) => /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-                className: "desktop-group",
-                children: [
-                  group && /* @__PURE__ */ jsx_runtime4.jsx("h2", {
-                    className: "desktop-group-title",
-                    style: { "--i": openRows.length + found.indexOf(appsOf(group)[0]) + (openRows.length ? 1 : 0) },
-                    children: group
-                  }),
-                  appsOf(group).map((s2) => {
-                    const i = openRows.length + found.indexOf(s2);
-                    const open2 = windows.filter((o) => o.app === s2.entity).length;
-                    return /* @__PURE__ */ jsx_runtime4.jsxs("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 + (openRows.length ? 2 : 1) },
-                      disabled: !hand,
-                      title: s2.many ? `Open another ${s2.title}` : open2 ? `Bring ${s2.title} to the front` : `Open ${s2.title}`,
-                      onMouseEnter: () => setAt(i),
-                      onClick: () => choose(i),
-                      children: [
-                        /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                          className: "desktop-pill-icon",
-                          children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
-                            drawing: s2.drawing
+                          }),
+                          /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                            className: "desktop-row-label",
+                            children: s2.title
+                          }),
+                          /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                            className: "desktop-row-note",
+                            children: [
+                              words2.length && s2.group ? s2.group : "",
+                              open2 > 1 ? `${words2.length && s2.group ? " · " : ""}${open2} open` : ""
+                            ]
                           })
-                        }),
-                        /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                          className: "desktop-row-label",
-                          children: s2.title
-                        }),
-                        /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                          className: "desktop-row-note",
-                          children: [
-                            words2.length && s2.group ? s2.group : "",
-                            open2 > 1 ? `${words2.length && s2.group ? " · " : ""}${open2} open` : ""
-                          ]
-                        })
-                      ]
-                    }, s2.key);
-                  })
-                ]
-              }, group)),
-              (sessionRows.length > 0 || newSession) && /* @__PURE__ */ jsx_runtime4.jsxs("div", {
-                className: "desktop-group desktop-sessions",
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("h2", {
-                    className: "desktop-group-title",
-                    style: { "--i": S0 + (openRows.length ? 1 : 0) + (found.length ? 1 : 0) },
-                    children: "Sessions"
-                  }),
-                  sessionRows.map((x, k) => {
-                    const i = S0 + k, note = `${x.windows ? `${x.windows} open` : "empty"}${x.front ? ` · ${x.front}` : ""}`;
-                    return /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                      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) },
-                      ...middleCloses(hand && (() => hand.fire("desktop-leave", { session: x.key }))),
-                      children: [
-                        /* @__PURE__ */ jsx_runtime4.jsxs("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),
-                          children: [
-                            /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-pill-icon",
-                              children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
-                                drawing: sessionIcon
+                        ]
+                      }, s2.key);
+                    })
+                  ]
+                }, group)),
+                (sessionRows.length > 0 || newSession) && /* @__PURE__ */ jsx_runtime4.jsxs("div", {
+                  className: "desktop-group desktop-sessions",
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("h2", {
+                      className: "desktop-group-title",
+                      children: "Sessions"
+                    }),
+                    sessionRows.map((x, k) => {
+                      const i = S0 + k, note = `${x.windows ? `${x.windows} open` : "empty"}${x.front ? ` · ${x.front}` : ""}`;
+                      return /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                        className: `desktop-row desktop-row-window desktop-row-session${cursor === i ? " is-cursor" : ""}`,
+                        ...middleCloses(hand && (() => hand.fire("desktop-leave", { session: x.key }))),
+                        children: [
+                          /* @__PURE__ */ jsx_runtime4.jsxs("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),
+                            children: [
+                              /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                                className: "desktop-pill-icon",
+                                children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                                  drawing: sessionIcon
+                                })
+                              }),
+                              /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                                className: "desktop-row-label",
+                                children: x.key
+                              }),
+                              /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                                className: "desktop-row-note",
+                                children: note
                               })
-                            }),
-                            /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-row-label",
-                              children: x.key
-                            }),
-                            /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                              className: "desktop-row-note",
-                              children: note
+                            ]
+                          }),
+                          hand && /* @__PURE__ */ jsx_runtime4.jsx("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 }),
+                            children: /* @__PURE__ */ jsx_runtime4.jsx(Cross, {})
+                          })
+                        ]
+                      }, x.entity);
+                    }),
+                    newSession && (() => {
+                      const i = S0 + sessionRows.length;
+                      return /* @__PURE__ */ jsx_runtime4.jsxs("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),
+                        children: [
+                          /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                            className: "desktop-pill-icon",
+                            children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                              drawing: plusIcon
                             })
-                          ]
-                        }),
-                        hand && /* @__PURE__ */ jsx_runtime4.jsx("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 }),
-                          children: /* @__PURE__ */ jsx_runtime4.jsx(Cross, {})
-                        })
-                      ]
-                    }, x.entity);
-                  }),
-                  newSession && (() => {
-                    const i = S0 + sessionRows.length;
-                    return /* @__PURE__ */ jsx_runtime4.jsxs("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) },
-                      disabled: !hand,
-                      title: "Open a new session in this tab",
-                      onMouseEnter: () => setAt(i),
-                      onClick: () => choose(i),
-                      children: [
-                        /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                          className: "desktop-pill-icon",
-                          children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
-                            drawing: plusIcon
+                          }),
+                          /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                            className: "desktop-row-label",
+                            children: "New session"
+                          }),
+                          /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                            className: "desktop-row-note",
+                            children: [
+                              "this tab is on ",
+                              w.key
+                            ]
                           })
-                        }),
-                        /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                          className: "desktop-row-label",
-                          children: "New session"
-                        }),
-                        /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                          className: "desktop-row-note",
-                          children: [
-                            "this tab is on ",
-                            w.key
-                          ]
+                        ]
+                      });
+                    })()
+                  ]
+                }),
+                leaving && /* @__PURE__ */ jsx_runtime4.jsx("div", {
+                  className: "desktop-group desktop-leave",
+                  children: /* @__PURE__ */ jsx_runtime4.jsxs("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),
+                    children: [
+                      /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                        className: "desktop-pill-icon",
+                        children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
+                          drawing: leaveIcon
                         })
-                      ]
-                    });
-                  })()
-                ]
-              }),
-              leaving && /* @__PURE__ */ jsx_runtime4.jsx("div", {
-                className: "desktop-group desktop-leave",
-                children: /* @__PURE__ */ jsx_runtime4.jsxs("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) },
-                  title: `Leave ${title}: back to ${root.label}`,
-                  onMouseEnter: () => setAt(L),
-                  onClick: () => choose(L),
-                  children: [
-                    /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                      className: "desktop-pill-icon",
-                      children: /* @__PURE__ */ jsx_runtime4.jsx(AppIcon, {
-                        drawing: leaveIcon
+                      }),
+                      /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                        className: "desktop-row-label",
+                        children: [
+                          "Leave ",
+                          title
+                        ]
+                      }),
+                      /* @__PURE__ */ jsx_runtime4.jsx("span", {
+                        className: "desktop-row-note",
+                        children: root.label
                       })
+                    ]
+                  })
+                }),
+                !count && /* @__PURE__ */ jsx_runtime4.jsx("p", {
+                  className: "desktop-muted",
+                  children: text ? "Nothing matches." : "Nothing here yet."
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx_runtime4.jsxs("footer", {
+              className: "desktop-launcher-legend",
+              "aria-label": "Shortcuts",
+              children: [
+                /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: "↑"
                     }),
-                    /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                      className: "desktop-row-label",
-                      children: [
-                        "Leave ",
-                        title
-                      ]
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: "↓"
                     }),
-                    /* @__PURE__ */ jsx_runtime4.jsx("span", {
-                      className: "desktop-row-note",
-                      children: root.label
-                    })
+                    " move"
+                  ]
+                }),
+                /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: "↵"
+                    }),
+                    " open"
+                  ]
+                }),
+                (text || w.selected !== null) && /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: "esc"
+                    }),
+                    " ",
+                    text ? "clear" : "back"
+                  ]
+                }),
+                quick && keyOf2("launcher") && /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: keyOf2("launcher")
+                    }),
+                    " close"
+                  ]
+                }),
+                windows.length > 0 && keyOf2("previousTab") && keyOf2("nextTab") && /* @__PURE__ */ jsx_runtime4.jsxs("span", {
+                  children: [
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: keyOf2("previousTab")
+                    }),
+                    /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
+                      children: keyOf2("nextTab")
+                    }),
+                    " tabs"
                   ]
                 })
-              }),
-              !count && /* @__PURE__ */ jsx_runtime4.jsx("p", {
-                className: "desktop-muted",
-                children: text ? "Nothing matches." : "Nothing here yet."
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx_runtime4.jsxs("footer", {
-            className: "desktop-launcher-legend",
-            "aria-label": "Shortcuts",
-            children: [
-              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "↑"
-                  }),
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "↓"
-                  }),
-                  " move"
-                ]
-              }),
-              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "↵"
-                  }),
-                  " open"
-                ]
-              }),
-              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "esc"
-                  }),
-                  " ",
-                  text ? "clear" : "close"
-                ]
-              }),
-              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "⌘K"
-                  }),
-                  " launcher"
-                ]
-              }),
-              /* @__PURE__ */ jsx_runtime4.jsxs("span", {
-                children: [
-                  /* @__PURE__ */ jsx_runtime4.jsx("kbd", {
-                    children: "⌘W"
-                  }),
-                  " close window"
-                ]
-              })
-            ]
-          })
-        ]
+              ]
+            })
+          ]
+        })
       })
     ]
   });
@@ -7912,26 +7956,26 @@ ${hv.failed.join(`
     ]
   });
 }
-function stepWords(step2) {
-  switch (step2.kind) {
+function stepWords(step) {
+  switch (step.kind) {
     case "given":
-      return `given ${step2.label}`;
+      return `given ${step.label}`;
     case "fire":
-      return `${step2.name} ${Object.keys(step2.args ?? {}).length ? JSON.stringify(step2.args) : ""}`.trim();
+      return `${step.name} ${Object.keys(step.args ?? {}).length ? JSON.stringify(step.args) : ""}`.trim();
     case "tick":
-      return step2.at !== undefined ? `time passes to ${(step2.at / 1000).toFixed(1)} s` : `time passes ${step2.after ?? 200} ms`;
+      return step.at !== undefined ? `time passes to ${(step.at / 1000).toFixed(1)} s` : `time passes ${step.after ?? 200} ms`;
     case "ticks":
-      return `time passes ${step2.count} × ${step2.every} ms`;
+      return `time passes ${step.count} × ${step.every} ms`;
     case "done":
-      return `${step2.effect.name} answers ${JSON.stringify(step2.result)}`;
+      return `${step.effect.name} answers ${JSON.stringify(step.result)}`;
     case "failed":
-      return `${step2.effect.name} fails: ${step2.error}`;
+      return `${step.effect.name} fails: ${step.error}`;
     case "list":
-      return `${step2.effect.name} lists ${JSON.stringify(step2.items)}`;
+      return `${step.effect.name} lists ${JSON.stringify(step.items)}`;
     case "watch":
-      return `${step2.effect.name} sends ${JSON.stringify(step2.events)}`;
+      return `${step.effect.name} sends ${JSON.stringify(step.events)}`;
     case "check":
-      return `expect ${step2.label}`;
+      return `expect ${step.label}`;
   }
 }
 function Story({ sim }) {
@@ -7960,7 +8004,7 @@ function Story({ sim }) {
       }),
       /* @__PURE__ */ jsx_runtime5.jsx("ol", {
         className: "bv-lab-story",
-        children: r.steps.map((step2, i) => {
+        children: r.steps.map((step, i) => {
           const done = i < r.at || i === r.at && (r.result !== null || r.waitUntil === null);
           const here = i === r.at && !r.result;
           const check = r.checks.get(i), error = r.errors.get(i), ch = r.changes.get(i);
@@ -7973,7 +8017,7 @@ function Story({ sim }) {
                 children: check ? check.ok ? "✓" : warn ? "!" : "✗" : error ? warn ? "!" : "✗" : done ? "·" : here ? "▸" : " "
               }),
               /* @__PURE__ */ jsx_runtime5.jsx("span", {
-                children: stepWords(step2)
+                children: stepWords(step)
               }),
               check && !check.ok && (check.error ? /* @__PURE__ */ jsx_runtime5.jsxs("span", {
                 className: "bv-film-error",
@@ -8566,6 +8610,7 @@ __export(exports_web, {
   CommandList: () => CommandList,
   Desktop: () => Desktop,
   DesktopFrame: () => DesktopFrame,
+  DesktopSkeleton: () => DesktopSkeleton,
   Dialog: () => Dialog,
   Eyes: () => Eyes,
   FieldError: () => FieldError,
@@ -8634,4 +8679,4 @@ __export(exports_web, {
   view: () => view
 });
 
-export { canonicalPath, matchRoute, route, isApps, compose, view, ScopeProvider, useScope, ApiError, configure, apiHeaders, api, useManifest, filterItems, Button, Input, Textarea, Select, Kbd, Panel, Rows, Row, Table, Dialog, CommandList, FieldError, plan, collect, describeType, tableOf, objectsOf, instancesOf, ridersOf, looseOf, ObjectMap, ObjectCards, ObjectCard, Replica, s, not, added, changed, removed, select, accept, resource, effect, asProgram, system, fixedStore, AppStoreContext, AppState, LiveStoreContext, useHand, useQuery, useColumn, useCount, useComponent, useHas, useAlive, useResource, useSettled, useRound, useProbe, useBaba, useBabaState, desktopAddress, parseDesktopAddress, routeOf, parseDesktopHash, Desktop, Eyes, AppIcon, DesktopFrame, SpecDesktop, LocalDesktop, appsFor, Simulation, Maker, placeOf, formatFailure, exports_web };
+export { canonicalPath, matchRoute, route, isApps, compose, view, ScopeProvider, useScope, ApiError, configure, apiHeaders, api, useManifest, filterItems, Button, Input, Textarea, Select, Kbd, Panel, Rows, Row, Table, Dialog, CommandList, FieldError, plan, collect, describeType, tableOf, objectsOf, instancesOf, ridersOf, looseOf, ObjectMap, ObjectCards, ObjectCard, Replica, s, not, added, changed, removed, select, accept, resource, effect, asProgram, system, fixedStore, AppStoreContext, AppState, LiveStoreContext, useHand, useQuery, useColumn, useCount, useComponent, useHas, useAlive, useResource, useSettled, useRound, useProbe, useBaba, useBabaState, keyCommands, normalBinding, isMac, bindingOf, keymapOf, formatBinding, bindingNote, desktopAddress, parseDesktopAddress, routeOf, parseDesktopHash, Desktop, DesktopSkeleton, Eyes, AppIcon, DesktopFrame, SpecDesktop, LocalDesktop, appsFor, Simulation, Maker, placeOf, formatFailure, exports_web };