@textui/core 0.1.0 → 0.2.0

package/dist/types/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/types/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/types/theme.ts"],"names":[],"mappings":"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"}

package/dist/util/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/util/markdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAsC5F;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAiBtD;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,EAAE,CA2C5E;AAwBD,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EACzB,OAAO,EAAE,qBAAqB,GAC7B,WAAW,EAAE,CAsEf;AAED,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAEtD;AAED,yEAAyE;AACzE,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAI5D"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../src/util/markdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACK,qBAAqB,EAAE,WAAW,EAAE,WAAW,EAC/D,MAAM,sBAAsB,CAAC;AAuC9B;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAiBtD;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,EAAE,CA2C5E;AAwBD,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,EACzB,OAAO,EAAE,qBAAqB,GAC7B,WAAW,EAAE,CA4Ff;AAgLD,qFAAqF;AACrF,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAEtD;AAED,yEAAyE;AACzE,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAI5D"}

package/dist/util/markdown.js

@@ -136,13 +136,17 @@ function withPrefix(runs, width, prefix, options = {}) {
     }));
 }
 export function layoutMarkdown(source, options) {
-    const { width, bullet = '-', quoteBar = '|', ruled = true } = options;
+    const { width, bullet = '-', quoteBar = '|', ruled = true, tableRules = 'header' } = options;
     const lines = Array.isArray(source) ? source : source.replace(/\r\n/g, '\n').split('\n');
     const rows = [];
     let fence = 0;
     let inFence = false;
     let language = '';
-    for (const line of lines) {
+    let table = 0;
+    // By index rather than by value: a table is only a table because of the line
+    // *after* its header, so this loop has to be able to look at it.
+    for (let at = 0; at < lines.length; at++) {
+        const line = lines[at];
         const marker = /^\s*```(\S*)\s*$/.exec(line);
         if (marker) {
             // An open fence is laid out as a fence from the moment it opens. A turn
@@ -162,6 +166,24 @@ export function layoutMarkdown(source, options) {
             rows.push({ kind: 'fence', fence, part: 'code', text: line, ...(language ? { language } : {}) });
             continue;
         }
+        // Before headings and lists, because a cell may contain either and the
+        // pipes are what decide. After fences, because inside one nothing is.
+        if (line.includes('|') && DIVIDER.test(lines[at + 1] ?? '')) {
+            const align = cellsOf(lines[at + 1]).map(alignOf);
+            const body = [];
+            let end = at + 2;
+            while (end < lines.length) {
+                const next = lines[end];
+                if (!next.includes('|') || next.trim() === '')
+                    break;
+                body.push(cellsOf(next));
+                end++;
+            }
+            rows.push(...tableRows(cellsOf(line), body, align, width, table, tableRules));
+            table++;
+            at = end - 1;
+            continue;
+        }
         const heading = /^(#{1,6})\s+(.*)$/.exec(line);
         if (heading) {
             const level = heading[1].length;
@@ -207,6 +229,154 @@ export function layoutMarkdown(source, options) {
         rows.push({ kind: 'fence', fence, part: 'close' });
     return rows;
 }
+/**
+ * The `|---|:--:|---:|` line, which is what makes the line above it a header.
+ *
+ * A row of pipes on its own is a row of pipes - `a | b` is arithmetic or a
+ * shell pipeline far more often than it is a one-column table, and treating
+ * every line with a bar in it as a table is how prose ends up in a grid.
+ */
+const DIVIDER = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+/**
+ * One line into its cells.
+ *
+ * The outer pipes are optional in every dialect anybody writes, so they are
+ * stripped rather than required. `\|` is an escaped bar inside a cell and not
+ * a boundary - which is the only way to put a bar in a table at all.
+ */
+function cellsOf(line) {
+    const trimmed = line.trim().replace(/^\|/, '').replace(/\|$/, '');
+    return trimmed
+        .split(/(?<!\\)\|/)
+        .map((cell) => cell.replace(/\\\|/g, '|').trim());
+}
+function alignOf(spec) {
+    const left = spec.startsWith(':');
+    const right = spec.endsWith(':');
+    if (left && right)
+        return 'center';
+    return right ? 'right' : 'left';
+}
+/**
+ * Cut and pad one cell to exactly `width`, keeping the styles.
+ *
+ * Cut, never wrapped: a table row has to stay one row tall or the document's
+ * length stops being a count of rows, and every viewer that windows this
+ * scrolls to the wrong place.
+ */
+function fitRuns(runs, width, align) {
+    const out = [];
+    let used = 0;
+    for (const run of runs) {
+        if (used >= width)
+            break;
+        const room = width - used;
+        if (stringWidth(run.text) <= room) {
+            out.push(run);
+            used += stringWidth(run.text);
+            continue;
+        }
+        // The ellipsis costs a cell, so it is only worth it when there is a cell
+        // to spend: at a width of one, a bare glyph says less than the letter.
+        const keep = room > 1 ? room - 1 : room;
+        const cut = [];
+        let taken = 0;
+        for (const g of graphemes(run.text)) {
+            const w = stringWidth(g);
+            if (taken + w > keep)
+                break;
+            cut.push(g);
+            taken += w;
+        }
+        out.push({ ...run, text: room > 1 ? `${cut.join('')}\u2026` : cut.join('') });
+        used = width;
+        break;
+    }
+    const slack = Math.max(0, width - used);
+    if (slack === 0)
+        return out;
+    const before = align === 'right' ? slack : align === 'center' ? Math.floor(slack / 2) : 0;
+    const after = slack - before;
+    return [
+        ...(before ? [{ text: ' '.repeat(before) }] : []),
+        ...out,
+        ...(after ? [{ text: ' '.repeat(after) }] : []),
+    ];
+}
+/**
+ * A whole table, measured once.
+ *
+ * The columns are as wide as their widest cell wants, and when that is more
+ * than the space there is they give it back in proportion - the widest loses
+ * the most, because it is the one with the most to lose. Three cells is the
+ * floor: below that a column is an ellipsis and a space, which is narrower
+ * than saying nothing.
+ */
+function tableRows(head, body, align, width, table, rules) {
+    const columns = Math.max(head.length, align.length, ...body.map((r) => r.length));
+    const at = (row, i) => row[i] ?? '';
+    const runsFor = (text, bold) => inlineRuns(text).map((run) => (bold ? { ...run, bold: true } : run));
+    const natural = Array.from({ length: columns }, (_, i) => Math.max(stringWidth(at(head, i)), ...body.map((row) => stringWidth(at(row, i))), 1));
+    // A rule between every pair of columns, and a box around the lot. The box
+    // is what makes it read as a table rather than as text that happens to line
+    // up - which matters most on a theme that draws no borders anywhere else,
+    // because there a table with only its columns ruled has nothing to say it
+    // ended.
+    const gaps = (columns - 1) * SEPARATOR + OUTER;
+    const room = width > 0 ? Math.max(columns * MIN_COLUMN, width - gaps) : Infinity;
+    const wanted = natural.reduce((sum, n) => sum + n, 0);
+    const widths = wanted <= room
+        ? natural
+        : share(natural, room);
+    const line = (cells, part) => ({
+        kind: 'table',
+        table,
+        part,
+        widths,
+        align,
+        cells: widths.map((w, i) => fitRuns(runsFor(at(cells, i), part === 'head'), w, align[i] ?? 'left')),
+    });
+    const edge = (part) => ({ kind: 'table', table, part, cells: [], widths, align });
+    return [
+        edge('top'),
+        line(head, 'head'),
+        edge('rule'),
+        // A rule between every pair, when the theme asked for them. Between, not
+        // after: a rule under the last row and then the box's own bottom edge is
+        // two lines saying the same thing.
+        ...body.flatMap((row, i) => (rules === 'all' && i > 0
+            ? [edge('rule'), line(row, 'body')]
+            : [line(row, 'body')])),
+        edge('bottom'),
+    ];
+}
+/** Cells between two columns: a space, a rule, a space. */
+const SEPARATOR = 3;
+/** The box: a rule and a space at each end. */
+const OUTER = 4;
+const MIN_COLUMN = 3;
+/**
+ * Shrink columns into `room`, proportionally, without losing a cell to
+ * rounding.
+ *
+ * The remainder goes to the widest columns one at a time rather than to the
+ * first: handing every leftover cell to column one is what turns a five-column
+ * table into one wide column and four ellipses.
+ */
+function share(natural, room) {
+    const total = natural.reduce((sum, n) => sum + n, 0);
+    const scaled = natural.map((n) => Math.max(MIN_COLUMN, Math.floor((n / total) * room)));
+    let spare = room - scaled.reduce((sum, n) => sum + n, 0);
+    const order = natural
+        .map((n, i) => [n, i])
+        .sort((a, b) => b[0] - a[0])
+        .map(([, i]) => i);
+    for (let i = 0; spare > 0; i = (i + 1) % order.length) {
+        scaled[order[i]] = scaled[order[i]] + 1;
+        spare--;
+    }
+    return scaled;
+}
 /** Every run's text, for a measurement or a test that does not care how it looks. */
 export function runsToText(runs) {
     return runs.map((run) => run.text).join('');

package/dist/util/paths.d.ts

@@ -24,7 +24,7 @@ export declare function segments(path: string): string[];
  * Canonical map key for a path: segments joined, no sigil.
  *
  * The segments are re-escaped on the way out. Everything downstream - the
- * store's own walk, `ancestorKeys`, `matchKey` - splits a key on `/`, so a
+ * store's own walk, `keysTouch`, `matchKey` - splits a key on `/`, so a
  * segment that legitimately contains one (a URI used as a key, a filename with
  * a slash) has to stay escaped or it silently becomes several segments and the
  * value lands somewhere nobody looks.
@@ -38,9 +38,15 @@ export declare function joinPath(...parts: (string | number)[]): BindingPath;
 export declare function resolvePath(path: string, dataContext?: string): BindingPath;
 export declare function scopeOf(path: string): string;
 export declare function parentKey(key: string): string | null;
-/** Every ancestor key of `key`, closest first, including `''` for the root. */
-export declare function ancestorKeys(key: string): string[];
 export declare function isDescendantKey(key: string, ancestor: string): boolean;
+/**
+ * Whether two concrete keys can affect the same subscribed value.
+ *
+ * A write to a descendant changes the ancestor object a subscriber reads, and a
+ * write to an ancestor may replace the whole subtree below it. This relation is
+ * symmetric and avoids building ancestor lists in hot subscription checks.
+ */
+export declare function keysTouch(a: string, b: string): boolean;
 export declare function hasWildcard(path: string): boolean;
 /** Match a concrete key against a pattern key that may contain `*`. */
 export declare function matchKey(key: string, pattern: string, subtree?: boolean): boolean;

package/dist/util/paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/util/paths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;GAWG;AAEH,qBAAa,SAAU,SAAQ,KAAK;IACL,QAAQ,CAAC,IAAI,EAAE,MAAM;gBAAtC,OAAO,EAAE,MAAM,EAAW,IAAI,EAAE,MAAM;CAInD;AAMD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,KAAK,MAAM,EAAE,CAE9D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAQ/C;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,wBAAgB,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,WAAW,CASnE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,WAAW,CAW3E;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG5C;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGpD;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAWlD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,UAAQ,GAAG,OAAO,CAa/E"}
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../../src/util/paths.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD;;;;;;;;;;;GAWG;AAEH,qBAAa,SAAU,SAAQ,KAAK;IACL,QAAQ,CAAC,IAAI,EAAE,MAAM;gBAAtC,OAAO,EAAE,MAAM,EAAW,IAAI,EAAE,MAAM;CAInD;AAMD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEjD;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,IAAI,KAAK,MAAM,EAAE,CAE9D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEhD;AAED,2EAA2E;AAC3E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAQ/C;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,wBAAgB,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,WAAW,CASnE;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,WAAW,CAW3E;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG5C;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAGpD;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAEvD;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEjD;AAED,uEAAuE;AACvE,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,UAAQ,GAAG,OAAO,CAa/E"}

package/dist/util/paths.js

@@ -46,7 +46,7 @@ export function segments(path) {
  * Canonical map key for a path: segments joined, no sigil.
  *
  * The segments are re-escaped on the way out. Everything downstream - the
- * store's own walk, `ancestorKeys`, `matchKey` - splits a key on `/`, so a
+ * store's own walk, `keysTouch`, `matchKey` - splits a key on `/`, so a
  * segment that legitimately contains one (a URI used as a key, a filename with
  * a slash) has to stay escaped or it silently becomes several segments and the
  * value lands somewhere nobody looks.
@@ -90,26 +90,21 @@ export function parentKey(key) {
     const i = key.lastIndexOf('/');
     return i === -1 ? (key === '' ? null : '') : key.slice(0, i);
 }
-/** Every ancestor key of `key`, closest first, including `''` for the root. */
-export function ancestorKeys(key) {
-    const out = [];
-    let cur = key;
-    for (;;) {
-        const p = parentKey(cur);
-        if (p === null)
-            break;
-        out.push(p);
-        cur = p;
-        if (p === '')
-            break;
-    }
-    return out;
-}
 export function isDescendantKey(key, ancestor) {
     if (ancestor === '')
         return key !== '';
     return key.startsWith(ancestor + '/');
 }
+/**
+ * Whether two concrete keys can affect the same subscribed value.
+ *
+ * A write to a descendant changes the ancestor object a subscriber reads, and a
+ * write to an ancestor may replace the whole subtree below it. This relation is
+ * symmetric and avoids building ancestor lists in hot subscription checks.
+ */
+export function keysTouch(a, b) {
+    return a === b || isDescendantKey(a, b) || isDescendantKey(b, a);
+}
 export function hasWildcard(path) {
     return path.includes('*');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Graph-mounted terminal UI runtime - store, registries, renderer, host primitives",
   "keywords": [
     "terminal",
@@ -58,13 +58,13 @@
       "import": "./dist/themes/index.js"
     }
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit && tsc -p tsconfig.test.json",
     "test": "vitest run",
     "test:watch": "vitest"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}

package/src/app/app.ts

@@ -99,6 +99,27 @@ export class App implements TextUIApp {
   private resolvedTheme: ResolvedTheme;
   private bag = createBag();
   private hovered: string | null = null;
+  /**
+   * Whoever took the last button down, until it comes back up.
+   *
+   * Mouse dispatch is a hit test, so without this a drag stops the moment the
+   * pointer leaves the box it started in - which is precisely when a drag
+   * becomes interesting. A selection dragged off the bottom of a field, a
+   * slider dragged past its own track and a splitter dragged across the pane
+   * it is resizing are all the pointer being somewhere the handler is not.
+   */
+  private captured: Instance | null = null;
+  /**
+   * Everything under the pointer, innermost outwards.
+   *
+   * A chain rather than one node, because hover is inherited the way it is in
+   * a browser: a row lights up when the pointer is over the label inside it,
+   * and the label is what the hit test finds. Hover used to be a focus id
+   * compared against `props.id`, which meant only a focusable node could ever
+   * be hovered - so a tool call row, a list row and every other box that is
+   * clicked rather than focused had a `hover` style nothing could trigger.
+   */
+  private hoveredChain = new Set<Instance>();
   /** Focus registrations created from `focusable` props, by focus id. */
   private declaredFocus = new Map<string, { instanceId: string; dispose(): void }>();
   private lastFrame: Frame | null = null;
@@ -258,11 +279,23 @@ export class App implements TextUIApp {
     }
     this.themeId = id;
     this.resolvedTheme = this.themes.resolve(id, this.terminal.capabilities());
+    this.applyCursorShape();
     this.store.set('$/modus/theme', id);
     this.buffer_.invalidate();
     this.requestRender(true);
   }
 
+  /**
+   * Ask the terminal for the theme's caret, when the theme states one.
+   *
+   * A theme that says nothing leaves the terminal's own setting alone, which
+   * is why this is not called with a default.
+   */
+  private applyCursorShape(): void {
+    const shape = this.resolvedTheme.cursor;
+    if (shape) this.terminal.setCursorShape?.(shape);
+  }
+
   setShell(id: string): void {
     if (!this.shells.get(id)) {
       throw new Error(`[textui] no shell registered as "${id}"`);
@@ -282,6 +315,7 @@ export class App implements TextUIApp {
   setCapabilityOverrides(overrides: CapabilityOverrides): void {
     this.terminal.setCapabilityOverrides(overrides);
     this.resolvedTheme = this.themes.resolve(this.themeId, this.terminal.capabilities());
+    this.applyCursorShape();
     this.publishEnvironment();
     this.buffer_.invalidate();
     this.requestRender(true);
@@ -325,6 +359,10 @@ export class App implements TextUIApp {
       ...this.options.session,
     });
 
+    // After `acquire`, never before: with no session there is nothing to put
+    // the shape back, so an early call is dropped rather than leaked.
+    this.applyCursorShape();
+
     this.bag.add(this.terminal.onInput((event) => this.handleInput(event)));
     this.bag.add(this.terminal.onResize((size) => this.handleResize(size)));
 
@@ -625,7 +663,7 @@ export class App implements TextUIApp {
     const focusedId = this.focus.focused();
     return {
       focused: focusedId === id || focusedId === `${instance.id}:focus`,
-      hovered: this.hovered === id,
+      hovered: this.hovered === id || this.hoveredChain.has(instance),
       active: false,
       selected: instance.props.selected === true,
       disabled: instance.props.disabled === true,
@@ -907,6 +945,28 @@ export class App implements TextUIApp {
       return;
     }
 
+    /*
+     * A modal takes escape before any keybinding does.
+     *
+     * `dismissOnEscape` was unreachable in any application with a global
+     * escape binding, which most have: the binding matched first, the layer
+     * stayed open, and the key went to whatever "go back" means behind it.
+     * What that looks like is a confirm dialog you cannot leave, over a screen
+     * that has navigated somewhere else while you were reading it.
+     *
+     * The test is `trapFocus`, not `dismissOnEscape` alone. A layer that traps
+     * focus has claimed the keyboard, so nothing behind it should be acting on
+     * keys; a toast or a tooltip has not, and those keep the old order so that
+     * escape still reaches the application while one happens to be up.
+     */
+    if (event.name === 'escape') {
+      const top = this.layers.topmostDismissible();
+      if (top && top.trapFocus) {
+        this.layers.close(top.id, 'escape');
+        return;
+      }
+    }
+
     if (this.keybindings.handle(event) !== 'unhandled') {
       this.requestRender();
       return;
@@ -930,16 +990,44 @@ export class App implements TextUIApp {
   }
 
   private handleMouse(event: MouseEvent): void {
+    // The rest of the gesture belongs to whoever took the button down,
+    // wherever the pointer has got to since - and it is delivered whether or
+    // not the handler claims it, because during a drag there is nothing else
+    // it could be for.
+    if (this.captured && (event.action === 'drag' || event.action === 'up')) {
+      const target = this.captured;
+      if (event.action === 'up') this.captured = null;
+      if (target.mounted) {
+        const onMouse = target.props.onMouse;
+        if (typeof onMouse === 'function') {
+          (onMouse as (e: MouseEvent) => boolean | void)(event);
+          this.requestRender();
+          return;
+        }
+      }
+      // Unmounted mid-drag, or it stopped taking the pointer: the gesture has
+      // nowhere to go, so let the hit test have it back.
+      this.captured = null;
+    }
+
     const hit = this.focus.at(event.x, event.y);
 
     if (event.action === 'move') {
+      const moved = this.updateHover(event);
       if (hit !== this.hovered) {
         this.hovered = hit;
         this.requestRender();
+      } else if (moved) {
+        this.requestRender();
       }
       return;
     }
 
+    // A new press ends the last one, claimed or not: an `up` that never
+    // arrived - a terminal that lost focus mid-drag - must not leave a capture
+    // that eats the next gesture.
+    if (event.action === 'down') this.captured = null;
+
     if (event.action === 'down' && hit) this.focus.focus(hit);
 
     if (this.root) {
@@ -948,6 +1036,41 @@ export class App implements TextUIApp {
     this.requestRender();
   }
 
+  /**
+   * Who the pointer is over now, and who it has just left.
+   *
+   * `onHover` is called on the way in and the way out, once each - a handler
+   * that fires on every pixel of movement is a handler nobody can use for
+   * anything but a repaint.
+   */
+  private updateHover(event: MouseEvent): boolean {
+    const next = new Set<Instance>();
+    if (this.root) collectHover(this.root, event.x, event.y, next);
+
+    let changed = next.size !== this.hoveredChain.size;
+    if (!changed) {
+      for (const instance of next) {
+        if (!this.hoveredChain.has(instance)) { changed = true; break; }
+      }
+    }
+    if (!changed) return false;
+
+    const previous = this.hoveredChain;
+    this.hoveredChain = next;
+
+    for (const instance of previous) {
+      if (next.has(instance) || !instance.mounted) continue;
+      const onHover = instance.props.onHover;
+      if (typeof onHover === 'function') (onHover as (over: boolean) => void)(false);
+    }
+    for (const instance of next) {
+      if (previous.has(instance)) continue;
+      const onHover = instance.props.onHover;
+      if (typeof onHover === 'function') (onHover as (over: boolean) => void)(true);
+    }
+    return true;
+  }
+
   /** Innermost box under the pointer first, then outward. */
   private dispatchMouse(instance: Instance, event: MouseEvent): boolean {
     for (let i = instance.children.length - 1; i >= 0; i--) {
@@ -962,6 +1085,8 @@ export class App implements TextUIApp {
 
     const onMouse = instance.props.onMouse;
     if (typeof onMouse === 'function' && (onMouse as (e: MouseEvent) => boolean | void)(event) === true) {
+      // Taking the button down is what claims the drag that follows it.
+      if (event.action === 'down') this.captured = instance;
       return true;
     }
 
@@ -1094,3 +1219,21 @@ export const WRITER_KEY = serviceKey<FrameWriter>('textui.writer');
 export function createApp(options: CreateAppOptions = {}): App {
   return new App(options);
 }
+
+/**
+ * Every box containing the point, from the root down.
+ *
+ * The whole chain rather than the innermost one: a row is hovered when the
+ * pointer is over the text inside it, and the text is what a hit test finds.
+ * Only boxes with a laid-out rect count - a component that produced no box
+ * occupies no space, so there is nothing to be over.
+ */
+function collectHover(instance: Instance, x: number, y: number, into: Set<Instance>): void {
+  const box = instance.box;
+  if (box) {
+    const { x: bx, y: by, width, height } = box.rect;
+    if (x < bx || x >= bx + width || y < by || y >= by + height) return;
+    into.add(instance);
+  }
+  for (const child of instance.children) collectHover(child, x, y, into);
+}

package/src/core/focus.ts

@@ -129,7 +129,18 @@ export class Focus implements FocusManager {
     // the screen this is for - pushed over whatever had focus, which the push
     // unmounted, leaving none - and a dialog, which opens while its opener
     // still holds focus and whose own controls say which of them wants it.
-    if (!existing && options.disabled !== true && this.current === null) {
+    //
+    // And only onto something a person could have tabbed to. A `global`
+    // handler registers as a focusable - that is how a layer reads escape
+    // without holding focus - and it is `skipTab`, so it is not a place focus
+    // can land. Handed it anyway, focus sat on a node that consumes nothing:
+    // the keys fell through to whatever was behind, and every real control's
+    // own `autoFocus` stood down, because it claims focus only when the scope
+    // does not already hold it. A question with a text field in it was
+    // therefore unanswerable - the field was drawn, `required` beside it, and
+    // what was typed at it went into the composer underneath.
+    const focusable = options.disabled !== true && options.skipTab !== true && options.global !== true;
+    if (!existing && focusable && this.current === null) {
       const scopeId = options.scopeId ?? GLOBAL_SCOPE;
       if (this.scopes.get(scopeId)?.autoFocus === true && this.stack.includes(scopeId)) {
         this.focus(options.id);

package/src/core/store.ts

@@ -6,7 +6,7 @@ import type { BindingPath } from '../types/graph.js';
 import type { Disposable } from '../types/disposable.js';
 import { toDisposable } from '../util/disposable.js';
 import {
-  ancestorKeys, hasWildcard, isDescendantKey, matchKey, pathKey, PathError,
+  hasWildcard, isDescendantKey, keysTouch, matchKey, pathKey, PathError,
 } from '../util/paths.js';
 
 interface Subscription {
@@ -222,12 +222,7 @@ export class Store implements ReactiveStore {
 
   private subMatches(sub: Subscription, changedKey: string): boolean {
     if (sub.wildcard) return matchKey(changedKey, sub.key, sub.subtree);
-    if (sub.key === changedKey) return true;
-    // A write below an exact subscription still changes that object's contents.
-    if (isDescendantKey(changedKey, sub.key)) return true;
-    // A write above it may have replaced the subtree the subscriber reads.
-    if (isDescendantKey(sub.key, changedKey)) return true;
-    return sub.subtree && ancestorKeys(changedKey).includes(sub.key);
+    return keysTouch(changedKey, sub.key);
   }
 
   // ---------------------------------------------------------- subscriptions

package/src/jsx/intrinsics.ts

@@ -42,8 +42,26 @@ export interface BaseProps extends Style {
   onKey?(event: KeyEvent): boolean | void;
   onFocus?(): void;
   onBlur?(): void;
+  /**
+   * Every mouse action on this node, innermost first.
+   *
+   * Returning `true` stops it going any further - and on a `down`, **claims
+   * the rest of the gesture**: the `drag`s and the `up` that follow come here
+   * whatever they are over, until the button comes back up. Dispatch is
+   * otherwise a hit test, so without that a drag would stop at the edge of the
+   * node it started in, which is where a drag starts being worth having.
+   */
   onMouse?(event: MouseEvent): boolean | void;
+  /** The left button going down - a third of a gesture. `onMouse` for the rest. */
   onClick?: Action | ((event: MouseEvent) => void);
+  /**
+   * The pointer entered or left this node. Called once each way, not per cell.
+   *
+   * Hover is inherited the way it is in a browser: a row is hovered while the
+   * pointer is over the label inside it, because the label is what a hit test
+   * finds. A `style` with a `hover` overlay needs nothing else - this is for
+   * the cases where something other than a colour has to happen.
+   */
   onHover?(hovering: boolean): void;
 
   /** OSC 8 link target, where the terminal supports hyperlinks. */

package/src/render/layout.ts

@@ -465,8 +465,13 @@ function layoutBox(box: LayoutBox, rect: Rect): void {
     return;
   }
 
-  const flow = box.children.filter((c) => !isAbsolute(c) && !isHidden(c));
-  const absolute = box.children.filter((c) => isAbsolute(c) && !isHidden(c));
+  const flow: LayoutBox[] = [];
+  const absolute: LayoutBox[] = [];
+  for (const child of box.children) {
+    if (isHidden(child)) continue;
+    if (isAbsolute(child)) absolute.push(child);
+    else flow.push(child);
+  }
 
   if (flow.length > 0) layoutFlow(box, flow);
   for (const child of absolute) layoutAbsolute(box, child);