babavoss 0.0.1 → 0.12.0

package/src/build/views.ts

@@ -0,0 +1,146 @@
+// Views for the browser: the names the page shares with every view, the
+// bundler for one view, and the resolver that binds the framework's own
+// names to its source, so nothing here needs a node_modules to find them.
+import { join } from "node:path";
+import { existsSync, realpathSync, statSync } from "node:fs";
+import { guardImports } from "./guard.ts";
+import { specsModule } from "../test/specs.ts";
+import { buildFailure, ViewFailed, within } from "./failure.ts";
+import type { BuildOutput, ViewSpec } from "./builder.ts";
+import { framework } from "../kernel/where.ts";
+
+/** The names a view leaves external; the page's import map resolves them to the modules built with the GUI. */
+export const shared: Record<string, string> = {
+  "react": "react.js",
+  "react-dom": "react-dom.js",
+  "react-dom/client": "react-dom-client.js",
+  "react/jsx-runtime": "react-jsx-runtime.js",
+  "react/compiler-runtime": "react-compiler-runtime.js",
+  "babavoss/web": "babavoss-web.js",
+};
+
+/** The framework's names, to its source: the running voss is the framework. */
+export const names: Record<string, string> = {
+  "babavoss": join(framework, "index.ts"),
+  "babavoss/desktop": join(framework, "src/desktop/index.ts"),
+  "babavoss/kit": join(framework, "src/kit/index.ts"),
+  "babavoss/web": join(framework, "src/web/index.tsx"),
+  "babavoss/test": join(framework, "src/test/index.ts"),
+  "babavoss/bench": join(framework, "src/bench/index.ts"),
+  "babavoss/prompt": join(framework, "src/prompt/index.ts"),
+  "babavoss/prompt/jsx-runtime": join(framework, "src/prompt/jsx-runtime.ts"),
+  "babavoss/prompt/jsx-dev-runtime": join(framework, "src/prompt/jsx-dev-runtime.ts"),
+};
+
+/**
+ * \`@/\` is the baba's own \`.baba\` directory, whatever its tsconfig says: how an app reaches the kit, \`@/ui/button\`.
+ * Bun's bundler would follow tsconfig paths, but the name is bound here so every baba spells it the same. A scoped package, \`@scope/name\`, never starts with \`@/\`.
+ */
+export function aliasOf(baba: string): import("bun").BunPlugin {
+  const tries = ["", ".tsx", ".ts", ".jsx", ".js", ".css", "/index.tsx", "/index.ts", "/index.jsx", "/index.js"];
+  return {
+    name: "babavoss-alias",
+    setup(b) {
+      b.onResolve({ filter: /^@\// }, (a) => {
+        const base = join(baba, a.path.slice(2));
+        for (const t of tries) { const p = base + t; try { if (existsSync(p) && statSync(p).isFile()) return { path: p }; } catch { /* next */ } }
+        return undefined;
+      });
+    },
+  };
+}
+
+/** "babavoss:specs": every spec of the baba at `baba`, its .baba directory, found where it lives, for the Maker's page. */
+export function specsOf(baba: string): import("bun").BunPlugin {
+  return {
+    name: "babavoss-specs",
+    setup(b) {
+      b.onResolve({ filter: /^babavoss:specs$/ }, () => ({ path: "specs", namespace: "babavoss-specs" }));
+      b.onLoad({ filter: /.*/, namespace: "babavoss-specs" }, () => ({ contents: specsModule(baba), loader: "ts", resolveDir: baba }));
+    },
+  };
+}
+
+export const resolver: import("bun").BunPlugin = {
+  name: "babavoss",
+  setup(b) {
+    b.onResolve({ filter: /^babavoss(\/.*)?$/ }, (a) => (names[a.path] ? { path: names[a.path]! } : undefined));
+  },
+};
+
+/**
+ * Bundles one view: the project's own dependencies inside, the shared names
+ * external, the React Compiler on. Every output comes back, the entry
+ * first; URLs the bundle emits for its chunks and assets start with
+ * `publicPath`. Fails with a ViewFailed whose paths are relative to
+ * `root`, the project's `.baba`.
+ */
+export async function bundleView(spec: ViewSpec): Promise<BuildOutput[]> {
+  const { root, publicPath } = spec;
+  // The bundler reports real paths; so is the entry given to it, and so is the root a failure is relative to.
+  let entry = spec.entry;
+  try { entry = realpathSync(entry); } catch {}
+  const extra = await loadBuildPlugins(spec.plugins, spec.dir, root);
+  const r = await Bun.build({
+    throw: false,
+    publicPath,
+    naming: { entry: "[name].[ext]", chunk: "[name]-[hash].[ext]", asset: "[name]-[hash].[ext]" },
+    // Packages that offer only development or production builds, with no default.
+    conditions: ["production"],
+    splitting: true,
+    entrypoints: [entry], target: "browser", format: "esm",
+    external: Object.keys(shared),
+    jsx: { runtime: "automatic", importSource: "react", development: false },
+    reactCompiler: true,
+    plugins: [guardImports, aliasOf(spec.dir), specsOf(spec.dir), ...extra],
+    define: { "process.env.NODE_ENV": '"production"' },
+  });
+  if (!r.success) {
+    // The bundler reports real paths; the root may be reached through a link.
+    let real = root;
+    try { real = realpathSync(root); } catch {}
+    throw new ViewFailed(buildFailure(r.logs, real));
+  }
+  const outputs: BuildOutput[] = [];
+  for (const o of r.outputs) outputs.push({ path: o.path.replace(/^\.\//, ""), kind: o.kind, type: o.type, bytes: new Uint8Array(await o.arrayBuffer()) });
+  outputs.sort((a, b) => (a.kind === "entry-point" ? -1 : 0) - (b.kind === "entry-point" ? -1 : 0));
+  for (const a of spec.assets) outputs.push(...await assetOutputs(a, spec.dir, root));
+  return outputs;
+}
+
+/**
+ * The bundler plugins a package declared, loaded from its own node_modules.
+ * This runs the package's code: it happens in the builder, behind the wall.
+ */
+export async function loadBuildPlugins(names: string[], dir: string, root: string): Promise<import("bun").BunPlugin[]> {
+  const out: import("bun").BunPlugin[] = [];
+  for (const name of names) {
+    let plugin: unknown;
+    try {
+      const mod = await import(Bun.resolveSync(name, dir)) as { default?: unknown };
+      plugin = mod.default ?? mod;
+    } catch (err) {
+      throw new ViewFailed({ stage: "build", message: `the build plugin ${name} could not be loaded from ${within(root, dir)}: ${err instanceof Error ? err.message : String(err)}` });
+    }
+    if (!plugin || typeof plugin !== "object" || typeof (plugin as { setup?: unknown }).setup !== "function") {
+      throw new ViewFailed({ stage: "build", message: `the build plugin ${name} is not a bundler plugin: its default export has no setup()` });
+    }
+    out.push(plugin as import("bun").BunPlugin);
+  }
+  return out;
+}
+
+/** A directory a package declared: every file under it, served as `assets/<path>` beside the view. */
+async function assetOutputs(rel: string, dir: string, root: string): Promise<BuildOutput[]> {
+  const base = join(dir, rel);
+  let real: string;
+  try { real = realpathSync(base); } catch { throw new ViewFailed({ stage: "build", message: `the asset directory ${rel} is not under ${within(root, dir)}` }); }
+  const home = realpathSync(dir);
+  if (real !== home && !real.startsWith(home + "/")) throw new ViewFailed({ stage: "build", message: `the asset directory ${rel} leaves ${within(root, dir)}` });
+  const out: BuildOutput[] = [];
+  for (const p of [...new Bun.Glob("**/*").scanSync({ cwd: real, onlyFiles: true, dot: false })].sort()) {
+    const f = Bun.file(join(real, p));
+    out.push({ path: `assets/${p}`, kind: "asset", type: f.type, bytes: new Uint8Array(await f.arrayBuffer()) });
+  }
+  return out;
+}

package/src/builder/main.ts

@@ -0,0 +1,29 @@
+// The builder role: one process per project, walled with its project
+// readable, speaking IPC to the kernel. It bundles what it is asked to,
+// backend or view, and answers with every output as bytes, or a failure.
+// The project's code runs here at build time, macros and bundler plugins
+// alike, and nowhere else.
+import { ParentTransport } from "../transport/transport.ts";
+import { PROTOCOL, type ToBuilder, type FromBuilder } from "../transport/messages.ts";
+import { bundleProject } from "../build/project.ts";
+import { bundleView } from "../build/views.ts";
+import { ViewFailed, type ViewFailure } from "../build/failure.ts";
+
+const kernel = new ParentTransport<FromBuilder, ToBuilder>();
+
+const failureOf = (err: unknown): ViewFailure => err instanceof ViewFailed ? err.failure : { stage: "build", message: err instanceof Error ? err.message : String(err) };
+
+kernel.onMessage(async (m) => {
+  if (m.type === "hello") return;
+  try {
+    if (m.type === "build-project") {
+      const code = await bundleProject(m.project);
+      kernel.send({ type: "built", id: m.id, ok: true, outputs: [{ path: "index.js", kind: "entry-point", type: "text/javascript", bytes: new TextEncoder().encode(code) }] });
+    } else if (m.type === "build-view") {
+      kernel.send({ type: "built", id: m.id, ok: true, outputs: await bundleView(m.spec) });
+    }
+  } catch (err) {
+    kernel.send({ type: "built", id: m.id, ok: false, failure: failureOf(err) });
+  }
+});
+kernel.send({ type: "hello", protocol: PROTOCOL, role: "builder" });

package/src/desktop/bob.ts

@@ -0,0 +1,76 @@
+// The launcher's dot as a body on a string: a point with a velocity, moved by
+// a small simulation rather than by CSS transitions, so a fall can gather
+// speed, the string can catch it, and a new aim mid-flight keeps the momentum.
+// The page says where the dot should be (`aim`); the bob decides how it gets
+// there and draws itself and its string on every frame until it rests.
+
+export interface Point { x: number; y: number }
+/** A spring toward the aim: stiffness pulls, damping calms. Below critical damping (2√stiffness) it overshoots. */
+export interface Spring { stiffness: number; damping: number }
+/** Falling: gravity until the string is taut. Caught: the string springs it to rest. Gliding: a spring between rows. */
+export type Phase = "falling" | "caught" | "gliding";
+export interface BobState { at: Point; v: Point; phase: Phase }
+
+/** Pixels per second squared: a fall of a few rows lasts about a tenth of a second. */
+export const gravity = 9000;
+/** The string catching the fall: stiff and loose, so it bounces. */
+export const catchSpring: Spring = { stiffness: 1400, damping: 28 };
+/** Moving between rows: quick, with a small overshoot. */
+export const glideSpring: Spring = { stiffness: 1100, damping: 40 };
+/** Sideways onto the string's vertical, while falling. */
+export const swingSpring: Spring = { stiffness: 1600, damping: 56 };
+
+const axis = (at: number, v: number, to: number, s: Spring, dt: number) => {
+  const a = s.stiffness * (to - at) - s.damping * v;
+  const nv = v + a * dt;
+  return [at + nv * dt, nv] as const;
+};
+
+/** One step of the simulation. A falling bob is pulled down by gravity until it reaches the aim, where the string goes taut and catches it. */
+export function step(s: BobState, aim: Point, dt: number): BobState {
+  const [x, vx] = axis(s.at.x, s.v.x, aim.x, s.phase === "gliding" ? glideSpring : swingSpring, dt);
+  if (s.phase === "falling") {
+    const vy = s.v.y + gravity * dt, y = s.at.y + vy * dt;
+    return y < aim.y ? { at: { x, y }, v: { x: vx, y: vy }, phase: "falling" } : { at: { x, y: aim.y }, v: { x: vx, y: vy }, phase: "caught" };
+  }
+  const [y, vy] = axis(s.at.y, s.v.y, aim.y, s.phase === "caught" ? catchSpring : glideSpring, dt);
+  return { at: { x, y }, v: { x: vx, y: vy }, phase: s.phase };
+}
+
+/** Whether a bob has come to rest at its aim. */
+export const resting = (s: BobState, aim: Point) => s.phase !== "falling" && Math.abs(s.at.x - aim.x) < .05 && Math.abs(s.at.y - aim.y) < .05 && Math.hypot(s.v.x, s.v.y) < 2;
+
+/** Runs a bob on animation frames and draws it with `draw`; it sleeps while at rest. */
+export class Bob {
+  private state: BobState | null = null;
+  private aim: Point = { x: 0, y: 0 };
+  private frame = 0;
+  private last = 0;
+  constructor(private draw: (at: Point) => void, private still = () => false) {}
+  /** Starts a fall from a point, from rest. */
+  drop(from: Point) { this.state = { at: { ...from }, v: { x: 0, y: 0 }, phase: "falling" }; this.draw(from); this.wake(); }
+  /** Where the dot should be. With `now`, it is there at once (a scroll moves it with the list). */
+  to(aim: Point, now = false) {
+    const moved = Math.abs(aim.y - this.aim.y) > .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; }
+    // A new aim after the catch is a move between rows; a fall keeps falling toward it.
+    if (this.state.phase === "caught" && moved) this.state = { ...this.state, phase: "gliding" };
+    this.wake();
+  }
+  stop() { cancelAnimationFrame(this.frame); this.frame = 0; this.state = null; }
+  private wake() {
+    if (this.frame) return;
+    this.last = performance.now();
+    const tick = (now: number) => {
+      // Fixed small steps keep a stiff spring stable on a slow frame.
+      let left = Math.min(.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);
+  }
+}

package/src/desktop/desktop.css

@@ -0,0 +1,111 @@
+/* Layer order first, since this file is inlined first: the theme's layer sits above Tailwind's preflight, below its utilities. */
+@layer theme, base, voss, components, utilities;
+@layer voss {
+/* A bar on top, one app or the launcher below it, using the shared theme. */
+.desktop { position: relative; display: flex; flex-direction: column; height: 100dvh; min-height: 320px; overflow: hidden; color: var(--foreground); background: var(--desk); font: 13px/20px var(--font-sans, system-ui);
+  /* Everything that sits on the desk is ink over it, translucent, never a surface of its own. */
+  --desktop-ink: color-mix(in oklch, var(--foreground) 6%, transparent); --desktop-ink-strong: color-mix(in oklch, var(--foreground) 11%, transparent); --desktop-ink-top: color-mix(in oklch, var(--foreground) 20%, transparent); }
+.desktop button, .desktop input, .desktop select { font: inherit; color: inherit; }
+.desktop button { cursor: pointer; }
+.desktop button:disabled { cursor: default; }
+.desktop button:focus-visible, .desktop select:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
+
+/* The bar sits on the desk itself: the mark at the far left, always; then a pill per open window, or the desktop's name while nothing is open. */
+.desktop-bar { position: relative; z-index: 3; flex-shrink: 0; display: flex; align-items: stretch; height: 40px; padding: 6px 8px; gap: 4px; user-select: none; }
+.desktop-logo { display: grid; place-items: center; width: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); }
+.desktop-logo:hover { background: var(--desktop-ink); }
+.desktop-logo.is-selected { background: var(--desktop-ink-top); }
+.desktop-logo.is-selected { color: var(--primary); }
+.desktop-eyes { display: block; }
+/* With the larger eye away, the smaller one moves to the middle; in user units, 50 - 71.5. */
+.desktop-eye-large { transition: opacity .12s; }
+.desktop-eye-small { transition: transform .22s cubic-bezier(.3, 1.2, .3, 1); }
+.desktop-eyes.is-alone .desktop-eye-large { opacity: 0; }
+.desktop-eyes.is-alone .desktop-eye-small { transform: translateX(-21.5px); }
+/* When the launcher closes the eyes settle back, with a small overshoot: the smaller one from the middle to its place, the larger one back from where it left as the dot. */
+.desktop-eyes circle { transform-box: fill-box; transform-origin: center; }
+.desktop-eyes.is-settling .desktop-eye-small { animation: desktop-eye-home .34s cubic-bezier(.3, 1.6, .4, 1); }
+.desktop-eyes.is-settling .desktop-eye-large { animation: desktop-eye-back .34s cubic-bezier(.3, 1.6, .4, 1); }
+@keyframes desktop-eye-home { from { transform: translateX(-21.5px); } }
+@keyframes desktop-eye-back { from { transform: scale(0); } }
+@media (prefers-reduced-motion: reduce) { .desktop-eyes.is-settling circle { animation: none; } }
+.desktop-bar-title { display: flex; align-items: center; padding: 0 8px; color: var(--muted-foreground); white-space: pre; }
+.desktop-bar-root { color: var(--muted-foreground); text-decoration: none; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
+.desktop-bar-root:hover, .desktop-bar-root:focus-visible { color: var(--foreground); background: var(--muted); outline: none; }
+.desktop-bar-gap { flex: 1; }
+/* One pill per open window, the one in front filled; pointing at a pill shows its × over its right end. */
+.desktop-pills { display: flex; align-items: stretch; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
+.desktop-pills::-webkit-scrollbar { display: none; }
+/* Where the strip has more beyond an edge, it fades into whatever is behind it there. */
+.desktop-pills.is-faded-left { mask-image: linear-gradient(to right, transparent, #000 32px); }
+.desktop-pills.is-faded-right { mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
+.desktop-pills.is-faded-left.is-faded-right { mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
+.desktop-pill { position: relative; display: flex; align-items: center; flex-shrink: 0; max-width: 180px; border-radius: 999px; color: var(--muted-foreground); }
+.desktop-pill:hover, .desktop-pill.is-cursor { background: var(--desktop-ink); color: var(--foreground); }
+.desktop-pill.is-active { background: var(--desktop-ink-strong); color: var(--foreground); }
+/* Every pill is 28px tall, the bar's inner height between its paddings; its icon sits centred in a 22px box, 3px from the top, the bottom and the left, 3px before the text; the × takes the very same box, its circle the box, drawn as lines so it centres exactly. The launcher's rows use the same measures. */
+.desktop-pill-label { display: flex; align-items: center; gap: 3px; min-width: 0; padding: 0 10px 0 3px; border: 0; border-radius: 999px; background: transparent; white-space: nowrap; height: 100%; }
+.desktop-pill-icon { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
+/* The icon and its × trade places with a small bounce: the one arriving grows from half its size past its own and settles, the one leaving shrinks away. */
+.desktop-pill-icon, .desktop-pill-close { transition: transform .26s cubic-bezier(.3, 1.6, .4, 1), opacity .08s; }
+.desktop-pill:hover .desktop-pill-label > .desktop-pill-icon, .desktop-pill:has(:focus-visible) .desktop-pill-label > .desktop-pill-icon { opacity: 0; transform: scale(.5); }
+.desktop-pill-close { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--foreground); opacity: 0; transform: scale(.5); pointer-events: none; }
+.desktop-pill-close svg { display: block; }
+.desktop-pill:hover .desktop-pill-close, .desktop-pill:has(:focus-visible) .desktop-pill-close { opacity: 1; transform: none; pointer-events: auto; }
+.desktop-pill-close:hover { background: var(--desktop-ink-strong); }
+/* Text that does not fit fades at the pill's end and, while pointed at, scrolls past in a loop, both copies moving by one text and one gap. */
+.desktop-pill-text { display: block; overflow: hidden; }
+.desktop-pill-track { display: flex; gap: 24px; }
+.desktop-pill-track > span { flex-shrink: 0; }
+/* The left fade is a registered length so it can ease in: it arrives with the scroll, after the same delay, over a moment, not on the pointer's arrival. */
+@property --desktop-fade-left { syntax: "<length>"; inherits: false; initial-value: 0px; }
+.desktop-pill-text.is-overflowing { mask-image: linear-gradient(to right, transparent, #000 var(--desktop-fade-left), #000 calc(100% - 20px), transparent); }
+.desktop-pill:hover .desktop-pill-text.is-overflowing { animation: desktop-marquee-fade .5s ease-out 1s forwards; }
+.desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track { animation: desktop-marquee-start .6s cubic-bezier(.33, .66, .66, 1) 1s forwards; }
+.desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track > span { animation: desktop-marquee var(--scroll) linear 1s infinite; }
+@keyframes desktop-marquee { to { transform: translateX(var(--shift)); } }
+@keyframes desktop-marquee-start { to { transform: translateX(var(--ease)); } }
+@keyframes desktop-marquee-fade { to { --desktop-fade-left: 12px; } }
+@media (prefers-reduced-motion: reduce) { .desktop-pill:hover .desktop-pill-text.is-overflowing, .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track, .desktop-pill:hover .desktop-pill-text.is-overflowing .desktop-pill-track > span { animation: none; } }
+.desktop-content { flex: 1; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
+/* An app's window is a sheet under the bar, a line along its top; it scrolls, and the app brings its own gutters. */
+.desktop-app { flex: 1; min-height: 0; overflow: auto; background: var(--background); border-top: 1px solid var(--border); }
+.desktop-app[hidden] { display: none; }
+
+/* The launcher covers the page: the bar's row is the search, the pills sit on the next row as they are, and the apps fill the rest as pills under their groups. */
+.desktop-launcher { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: var(--desk); }
+.desktop-search { flex: 1; min-width: 0; height: 100%; padding: 0 10px 0 6px; background: transparent; border: 0; font-size: 13px; }
+.desktop-search::placeholder { color: var(--muted-foreground); }
+/* Where this level is, at the search row's end, quiet. */
+.desktop .desktop-search:focus { outline: none; }
+/* The palette under the search: one column of rows, and one dot. The dot, under the mark, says which row is chosen, by the keys or the pointer, and glides between rows; the chosen row's content draws toward it. */
+.desktop-launcher-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 24px calc(8px + 28px + 4px); }
+/* The larger eye, out of the mark, at its own size: its centre is where the transform puts it, so it can be born where the eye was. It hangs from the mark by a string, a hairline straight down from the mark's lower edge, on the eye's own vertical, to the dot's upper edge. */
+.desktop-dot { position: absolute; top: 0; left: 0; width: 6.5px; height: 6.5px; margin: -3.25px 0 0 -3.25px; border-radius: 50%; background: var(--primary); opacity: 0; pointer-events: none; transition: opacity .12s; will-change: transform; z-index: 1; }
+.desktop-string { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin-left: -0.5px; transform-origin: 0 0; background: color-mix(in oklch, var(--foreground) 35%, transparent); opacity: 0; pointer-events: none; transition: opacity .12s; will-change: transform; }
+/* A row is a pill laid out like the bar's, stacked: the same 3px inset, 22px icon box, 3px gap and 10px end, its × in the icon's place. Rows begin where the bar's pills begin, after the mark's column, so icons, group titles and the search's text share one left edge. */
+.desktop-group { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
+.desktop-group-title { margin: 10px 0 2px 6px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
+.desktop-row { position: relative; display: flex; align-items: center; width: 100%; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); text-align: left; transition: translate .18s cubic-bezier(.3, 1.2, .3, 1); }
+.desktop-row-app, .desktop-row-main { display: flex; align-items: center; gap: 3px; min-width: 0; padding: 0 10px 0 3px; border: 0; border-radius: 999px; background: transparent; color: inherit; text-align: left; }
+/* One state only, chosen: the text brightens and the row eases toward the dot, its × with it. */
+.desktop-row-main { flex: 1; align-self: stretch; }
+.desktop-row.is-cursor { color: var(--foreground); translate: -6px 0; }
+.desktop-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.desktop-row-note { padding-left: 8px; font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
+.desktop-row-window:hover .desktop-pill-icon, .desktop-row-window:has(:focus-visible) .desktop-pill-icon { opacity: 0; transform: scale(.5); }
+.desktop-row-window:hover .desktop-pill-close, .desktop-row-window:has(:focus-visible) .desktop-pill-close { opacity: 1; transform: none; pointer-events: auto; }
+/* Rows and titles drop into place from above, one after another, quickly. */
+.desktop-row, .desktop-group-title { animation: desktop-arrive .16s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 14ms); }
+@keyframes desktop-arrive { from { opacity: 0; transform: translateY(-6px); } }
+@media (prefers-reduced-motion: reduce) { .desktop-row, .desktop-group-title { animation: none; } .desktop-eye-small, .desktop-row, .desktop-pill-icon, .desktop-pill-close { transition: none; } }
+.desktop-icon { display: block; flex-shrink: 0; }
+.desktop-muted { color: var(--muted-foreground); font-size: 11px; margin: 8px 0 8px 6px; }
+/* The legend at the foot: the keys, as small pills, and what they do. */
+.desktop-launcher-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; flex-shrink: 0; padding: 10px 16px 12px; font-size: 11px; color: var(--muted-foreground); }
+.desktop-launcher-legend span { display: inline-flex; align-items: center; gap: 4px; }
+.desktop-launcher-legend kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--desktop-ink); color: var(--foreground); font: inherit; font-size: 10px; }
+.desktop-empty { padding: 24px; }
+.desktop-error { padding: 8px 12px; background: var(--muted); color: var(--destructive); }
+.desktop-error button { margin-left: 12px; }
+}

package/src/desktop/icons.ts

@@ -0,0 +1,50 @@
+// App icons are Lucide's, by name. The framework imports nothing from
+// Lucide: the desktop system reads the icon from the Lucide package the baba
+// installed, through the kernel's files, once, and keeps its drawing in the
+// state as shapes. Only the shapes Lucide draws with are kept, with their
+// geometry and nothing else, so a drawing is data and never markup.
+import type { Fs } from "../kernel/context.ts";
+
+export const iconTags = ["path", "circle", "ellipse", "line", "polyline", "polygon", "rect"] as const;
+export type IconTag = typeof iconTags[number];
+/** One shape of a 24×24 Lucide drawing, stroked in the current colour. */
+export interface IconShape { tag: IconTag; attrs: Record<string, string> }
+
+const geometry = new Set(["d", "cx", "cy", "r", "rx", "ry", "x", "y", "x1", "y1", "x2", "y2", "width", "height", "points"]);
+const keep = (pairs: Iterable<RegExpMatchArray>) => Object.fromEntries([...pairs].filter((m) => geometry.has(m[1]!)).map((m) => [m[1]!, m[2]!]));
+const isTag = (t: string): t is IconTag => (iconTags as readonly string[]).includes(t);
+
+/** A Lucide icon's name: lowercase words joined by dashes, as lucide.dev writes it. */
+export const iconName = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+
+/** The shapes of an SVG file, as `lucide-static` ships them. */
+export function shapesOfSvg(text: string): IconShape[] {
+  const out: IconShape[] = [];
+  for (const m of text.matchAll(/<([a-z]+)\b([^>]*?)\/?>/g)) if (isTag(m[1]!)) out.push({ tag: m[1]!, attrs: keep(m[2]!.matchAll(/([a-z0-9-]+)="([^"]*)"/g)) });
+  return out;
+}
+
+/** The shapes of a `lucide-react` icon module, from its `["circle", { cx: "6", … }]` data. */
+export function shapesOfModule(text: string): IconShape[] {
+  const out: IconShape[] = [];
+  for (const m of text.matchAll(/\[\s*"([a-z]+)"\s*,\s*\{([^}]*)\}\s*\]/g)) if (isTag(m[1]!)) out.push({ tag: m[1]!, attrs: keep(m[2]!.matchAll(/([a-z0-9]+)\s*:\s*"([^"]*)"/g)) });
+  return out;
+}
+
+/** Where a baba's Lucide icon lives: `lucide-static`'s SVG first, the published format, then `lucide-react`'s module, which every baba the kit made has. */
+export const iconSources = (name: string) => [
+  { path: `.baba/node_modules/lucide-static/icons/${name}.svg`, parse: shapesOfSvg },
+  { path: `.baba/node_modules/lucide-react/dist/esm/icons/${name}.mjs`, parse: shapesOfModule },
+];
+
+/** Reads one icon's shapes; none when no source has it. */
+export async function readIcon(name: string, fs: Pick<Fs, "read">): Promise<IconShape[]> {
+  if (!iconName.test(name)) return [];
+  for (const source of iconSources(name)) {
+    let text: string;
+    try { text = await fs.read(source.path); } catch { continue; }
+    const shapes = source.parse(text);
+    if (shapes.length) return shapes;
+  }
+  return [];
+}