@valyrianjs/terminal 0.2.0 → 0.2.1

package/docs/api-reference.md

@@ -239,7 +239,7 @@ Props:
 
 Draws a clipped region over the current frame. `margin` sets the distance from the overlay to the frame edges; numbers use cells and percentage strings such as `"10%"` resolve per axis. Use `{ x, y }` when the two axes need different margins. `trapFocus` keeps traversal inside the overlay while it is active.
 
-Overlay calculates its size from the available frame, stays centered by its margins, and keeps app routing and pane movement in your app layer.
+Overlay calculates its size from the available frame, stays centered by its margins, and keeps app routing and pane movement in your app layer. Direct sibling overlays use source order: later overlays paint above earlier overlays, receive pointer hits first, and lead trapped focus traversal. Overlay styles paint the full assigned surface, including empty cells behind child controls.
 
 ### `FocusScope`
 
@@ -336,11 +336,17 @@ Props:
 - `pointerCapture?: boolean`
 - `items?: T[]`
 - `virtualized?: boolean`
+- `height?: number`
 - `itemHeight?: 1`
 - `overscan?: number`
+- `wrap?: boolean`
+- `itemKey?(item, index): string | number`
+- `showActive?: boolean`
 - shared visual props: `style`, `styles`, `state`
-- `renderItem?(item, index): string`
+- `children?(item, ctx): any`
+- `renderItem?(item, index): any`
 - `onchange?(event)`
+- `onviewportchange?(event)`
 - `onpress?(event)`
 - `ondoublepress?(event)`
 - `oncontextpress?(event)`
@@ -352,12 +358,13 @@ Props:
 
 Payloads:
 
-- `TerminalListChangeEventPayload<T>` - `{ type: "change", id, index, value }`
-- `TerminalListPressEventPayload<T>` - `{ type: "press" | "doublepress" | "contextpress", id, index, value }`
-- `TerminalListPointerEventPayload<T>` - `{ type: "hover" | "rowenter" | "rowleave", id, row, index, value, x, y }`
+- `TerminalListChangeEventPayload<T>` - `{ type: "change", id, index, key?, value, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListViewportChangeEventPayload` - `{ type: "viewportchange", id, offset, rows, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListPressEventPayload<T>` - `{ type: "press" | "doublepress" | "contextpress", id, index, key?, value, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListPointerEventPayload<T>` - `{ type: "hover" | "rowenter" | "rowleave", id, row, index, key?, value, x, y }`
 - `TerminalCaptureEventPayload` - `{ type: "capturestart" | "captureend", id, source, row, x, y }`
 
-Supports selection, activation, double press on the same row, context press for the target row, hover payloads, optional virtualization, and pointer capture.
+Supports internal active row movement, internal selection, activation, double press on the same row, context press for the target row, hover payloads, optional wrapping, optional virtualization, viewport scroll, and pointer capture. `Up`/`Down`, `PageUp`, `PageDown`, `Home`, and `End` are built-in list navigation keys; `Left` and `Right` stay available for application bindings. Keyboard navigation moves the active row and emits `change`; `Enter` selects and activates the active row. Pointer click selects and activates the clicked row. A quick second primary click on the same row emits `doublepress` without a second `press`. The default renderer displays the active row as `list.current`; when the selected row differs from the active row, it displays the selected row as `list.selected`. A JSX `children` callback is the recommended item renderer and wins over `renderItem` when both are present. `children` receives `ctx.active` and `ctx.selected` separately. `renderItem` remains as a compatibility alias with the legacy `(item, index)` signature. `wrap` wraps long default-rendered item text to the list width. Virtualized lists receive the full `items` array and calculate the visible viewport internally; use `itemKey` for stable event identity when items can reorder. Observe the resulting active row, selected row, and viewport through the list event payloads. Run [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx) with `bun examples/docs/virtualized-list-workbench.tsx` to inspect those values from events in one bounded split layout.
 
 ### `ScrollView`
 

package/docs/cookbook.md

@@ -84,7 +84,7 @@ console.log(session.output());
 session.destroy();
 ```
 
-For large lists, add `virtualized` and place the list in a bounded region such as a filled pane or split.
+For large lists, add `virtualized` and place the list in a bounded region such as a filled pane or split. The virtualized workbench shows the normal uncontrolled API with `itemKey`, the `children` callback, event observation, and internal active, selected, and viewport state: [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx). Run it with `bun examples/docs/virtualized-list-workbench.tsx`, move active rows with `J/K` or `Up`/`Down`, jump with `PageUp`, `PageDown`, `Home`, or `End`, select with `Enter`, and quit with `Ctrl+C`.
 
 ## Local state to Valyrian state module bridge
 

package/docs/interaction-model.md

@@ -93,15 +93,17 @@ A quick second primary mouse press keeps the normal activation behavior and also
 
 ### `List`
 
-`List` models row selection and activation.
+`List` models active row movement, optional visible selection, viewport scroll, and activation. In virtualized mode the component receives the full `items` array and owns the viewport; wheel input moves the viewport, while keyboard list commands move the active row and emit `change`. A JSX `children` callback receives `(item, ctx)` with `ctx.active`, `ctx.selected`, `ctx.index`, `ctx.key`, and `ctx.viewportIndex`; it takes precedence over `renderItem`. Use `itemKey` when rows have stable identities across reorder or filtering.
 
 Supported behavior includes:
 
-- `UP` and `LEFT` move selection up
-- `DOWN` and `RIGHT` move selection down
-- `ENTER` activates the selected row
+- `UP` and `DOWN` move the active row and emit `onchange`
+- `PageUp`, `PageDown`, `Home`, and `End` jump the active row and keep it visible
+- `LEFT` and `RIGHT` have no default list command, so applications can bind them
+- `ENTER` selects and activates the active row
+- mouse click selects and activates the target row
 - mouse hover reports row details when mouse input is connected
-- quick primary mouse presses on the same row emit `ondoublepress`
+- quick primary mouse clicks on the same row emit `ondoublepress` without a second `onpress`
 - secondary mouse presses emit `oncontextpress` for the target row
 
 Main handlers:

package/docs/primitive-gallery.md

@@ -228,16 +228,20 @@ Use `List` for menus, choosers, command lists, and item browsers.
 
 **What it is:** A focusable collection control with selection and press events.
 **Use it for:** menus, choosers, command lists, and item browsers.
-**Core props:** `id`, `items`, `renderItem`, `virtualized`, `onchange`, `onpress`, `ondoublepress`, `oncontextpress`.
+**Core props:** `id`, `items`, `children` callback, `renderItem`, `itemKey`, `virtualized`, `showActive`, `onchange`, `onviewportchange`, `onpress`, `ondoublepress`, `oncontextpress`. `List` owns its active row, selected row, and viewport state internally; observe those values from event payloads.
 
 **Minimal example:**
 
 ```tsx
-<List id="menu" items={["Inbox", "Done"]} onchange={(event) => { selected = event.value; }} />
+<List id="menu" items={["Inbox", "Done"]} itemKey={(item) => item}>
+  {(item, ctx) => `${ctx.active ? "› " : "  "}${item}`}
+</List>
 ```
 
 **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
 
+**Virtualized demo:** [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx). Run it with `bun examples/docs/virtualized-list-workbench.tsx`, move active rows with `J/K` or `Up`/`Down`, jump with `PageUp`, `PageDown`, `Home`, or `End`, select with `Enter`, and quit with `Ctrl+C`.
+
 ### `Table`
 
 Use `Table` for compact data detail and aligned text pairs.
@@ -332,7 +336,7 @@ Use `Overlay` for command panels, dialogs, palettes, and focused chooser surface
 
 **What it is:** A positioned layer over the current frame.
 **Use it for:** command panels, dialogs, palettes, and focused chooser surfaces.
-**Core props:** `id`, `margin`, `trapFocus`, `style`. `margin` is required and accepts a number, a percentage string, or `{ x, y }` with number or percentage-string values. When `Overlay` is the root passed to `renderTerminal()`, pass exact `{ cols, rows }` as the second argument so margin can resolve against terminal dimensions.
+**Core props:** `id`, `margin`, `trapFocus`, `style`. `margin` is required and accepts a number, a percentage string, or `{ x, y }` with number or percentage-string values. When `Overlay` is the root passed to `renderTerminal()`, pass exact `{ cols, rows }` as the second argument so margin can resolve against terminal dimensions. Later sibling overlays paint and receive pointer/focus routing above earlier overlays. Overlay background styles cover their full assigned surface, not just text cells.
 
 **Minimal example:**
 

package/llms-full.txt

@@ -666,7 +666,7 @@ console.log(session.output());
 session.destroy();
 ```
 
-For large lists, add `virtualized` and place the list in a bounded region such as a filled pane or split.
+For large lists, add `virtualized` and place the list in a bounded region such as a filled pane or split. The virtualized workbench shows the normal uncontrolled API with `itemKey`, the `children` callback, event observation, and internal active, selected, and viewport state: [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx). Run it with `bun examples/docs/virtualized-list-workbench.tsx`, move active rows with `J/K` or `Up`/`Down`, jump with `PageUp`, `PageDown`, `Home`, or `End`, select with `Enter`, and quit with `Ctrl+C`.
 
 ## Local state to Valyrian state module bridge
 
@@ -1196,16 +1196,20 @@ Use `List` for menus, choosers, command lists, and item browsers.
 
 **What it is:** A focusable collection control with selection and press events.
 **Use it for:** menus, choosers, command lists, and item browsers.
-**Core props:** `id`, `items`, `renderItem`, `virtualized`, `onchange`, `onpress`, `ondoublepress`, `oncontextpress`.
+**Core props:** `id`, `items`, `children` callback, `renderItem`, `itemKey`, `virtualized`, `showActive`, `onchange`, `onviewportchange`, `onpress`, `ondoublepress`, `oncontextpress`. `List` owns its active row, selected row, and viewport state internally; observe those values from event payloads.
 
 **Minimal example:**
 
 ```tsx
-<List id="menu" items={["Inbox", "Done"]} onchange={(event) => { selected = event.value; }} />
+<List id="menu" items={["Inbox", "Done"]} itemKey={(item) => item}>
+  {(item, ctx) => `${ctx.active ? "› " : "  "}${item}`}
+</List>
 ```
 
 **Complete demo:** [`examples/docs/primitive-data-explorer.tsx`](../examples/docs/primitive-data-explorer.tsx). Run it with `bun examples/docs/primitive-data-explorer.tsx` and quit with `Ctrl+C`.
 
+**Virtualized demo:** [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx). Run it with `bun examples/docs/virtualized-list-workbench.tsx`, move active rows with `J/K` or `Up`/`Down`, jump with `PageUp`, `PageDown`, `Home`, or `End`, select with `Enter`, and quit with `Ctrl+C`.
+
 ### `Table`
 
 Use `Table` for compact data detail and aligned text pairs.
@@ -1300,7 +1304,7 @@ Use `Overlay` for command panels, dialogs, palettes, and focused chooser surface
 
 **What it is:** A positioned layer over the current frame.
 **Use it for:** command panels, dialogs, palettes, and focused chooser surfaces.
-**Core props:** `id`, `margin`, `trapFocus`, `style`. `margin` is required and accepts a number, a percentage string, or `{ x, y }` with number or percentage-string values. When `Overlay` is the root passed to `renderTerminal()`, pass exact `{ cols, rows }` as the second argument so margin can resolve against terminal dimensions.
+**Core props:** `id`, `margin`, `trapFocus`, `style`. `margin` is required and accepts a number, a percentage string, or `{ x, y }` with number or percentage-string values. When `Overlay` is the root passed to `renderTerminal()`, pass exact `{ cols, rows }` as the second argument so margin can resolve against terminal dimensions. Later sibling overlays paint and receive pointer/focus routing above earlier overlays. Overlay background styles cover their full assigned surface, not just text cells.
 
 **Minimal example:**
 
@@ -1436,15 +1440,17 @@ A quick second primary mouse press keeps the normal activation behavior and also
 
 ### `List`
 
-`List` models row selection and activation.
+`List` models active row movement, optional visible selection, viewport scroll, and activation. In virtualized mode the component receives the full `items` array and owns the viewport; wheel input moves the viewport, while keyboard list commands move the active row and emit `change`. A JSX `children` callback receives `(item, ctx)` with `ctx.active`, `ctx.selected`, `ctx.index`, `ctx.key`, and `ctx.viewportIndex`; it takes precedence over `renderItem`. Use `itemKey` when rows have stable identities across reorder or filtering.
 
 Supported behavior includes:
 
-- `UP` and `LEFT` move selection up
-- `DOWN` and `RIGHT` move selection down
-- `ENTER` activates the selected row
+- `UP` and `DOWN` move the active row and emit `onchange`
+- `PageUp`, `PageDown`, `Home`, and `End` jump the active row and keep it visible
+- `LEFT` and `RIGHT` have no default list command, so applications can bind them
+- `ENTER` selects and activates the active row
+- mouse click selects and activates the target row
 - mouse hover reports row details when mouse input is connected
-- quick primary mouse presses on the same row emit `ondoublepress`
+- quick primary mouse clicks on the same row emit `ondoublepress` without a second `onpress`
 - secondary mouse presses emit `oncontextpress` for the target row
 
 Main handlers:
@@ -5172,7 +5178,7 @@ Props:
 
 Draws a clipped region over the current frame. `margin` sets the distance from the overlay to the frame edges; numbers use cells and percentage strings such as `"10%"` resolve per axis. Use `{ x, y }` when the two axes need different margins. `trapFocus` keeps traversal inside the overlay while it is active.
 
-Overlay calculates its size from the available frame, stays centered by its margins, and keeps app routing and pane movement in your app layer.
+Overlay calculates its size from the available frame, stays centered by its margins, and keeps app routing and pane movement in your app layer. Direct sibling overlays use source order: later overlays paint above earlier overlays, receive pointer hits first, and lead trapped focus traversal. Overlay styles paint the full assigned surface, including empty cells behind child controls.
 
 ### `FocusScope`
 
@@ -5269,11 +5275,17 @@ Props:
 - `pointerCapture?: boolean`
 - `items?: T[]`
 - `virtualized?: boolean`
+- `height?: number`
 - `itemHeight?: 1`
 - `overscan?: number`
+- `wrap?: boolean`
+- `itemKey?(item, index): string | number`
+- `showActive?: boolean`
 - shared visual props: `style`, `styles`, `state`
-- `renderItem?(item, index): string`
+- `children?(item, ctx): any`
+- `renderItem?(item, index): any`
 - `onchange?(event)`
+- `onviewportchange?(event)`
 - `onpress?(event)`
 - `ondoublepress?(event)`
 - `oncontextpress?(event)`
@@ -5285,12 +5297,13 @@ Props:
 
 Payloads:
 
-- `TerminalListChangeEventPayload<T>` - `{ type: "change", id, index, value }`
-- `TerminalListPressEventPayload<T>` - `{ type: "press" | "doublepress" | "contextpress", id, index, value }`
-- `TerminalListPointerEventPayload<T>` - `{ type: "hover" | "rowenter" | "rowleave", id, row, index, value, x, y }`
+- `TerminalListChangeEventPayload<T>` - `{ type: "change", id, index, key?, value, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListViewportChangeEventPayload` - `{ type: "viewportchange", id, offset, rows, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListPressEventPayload<T>` - `{ type: "press" | "doublepress" | "contextpress", id, index, key?, value, activeIndex, selectedIndex, viewportOffset, viewportRows }`
+- `TerminalListPointerEventPayload<T>` - `{ type: "hover" | "rowenter" | "rowleave", id, row, index, key?, value, x, y }`
 - `TerminalCaptureEventPayload` - `{ type: "capturestart" | "captureend", id, source, row, x, y }`
 
-Supports selection, activation, double press on the same row, context press for the target row, hover payloads, optional virtualization, and pointer capture.
+Supports internal active row movement, internal selection, activation, double press on the same row, context press for the target row, hover payloads, optional wrapping, optional virtualization, viewport scroll, and pointer capture. `Up`/`Down`, `PageUp`, `PageDown`, `Home`, and `End` are built-in list navigation keys; `Left` and `Right` stay available for application bindings. Keyboard navigation moves the active row and emits `change`; `Enter` selects and activates the active row. Pointer click selects and activates the clicked row. A quick second primary click on the same row emits `doublepress` without a second `press`. The default renderer displays the active row as `list.current`; when the selected row differs from the active row, it displays the selected row as `list.selected`. A JSX `children` callback is the recommended item renderer and wins over `renderItem` when both are present. `children` receives `ctx.active` and `ctx.selected` separately. `renderItem` remains as a compatibility alias with the legacy `(item, index)` signature. `wrap` wraps long default-rendered item text to the list width. Virtualized lists receive the full `items` array and calculate the visible viewport internally; use `itemKey` for stable event identity when items can reorder. Observe the resulting active row, selected row, and viewport through the list event payloads. Run [`examples/docs/virtualized-list-workbench.tsx`](../examples/docs/virtualized-list-workbench.tsx) with `bun examples/docs/virtualized-list-workbench.tsx` to inspect those values from events in one bounded split layout.
 
 ### `ScrollView`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valyrianjs/terminal",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Terminal adapter for valyrian.js",
   "license": "Apache-2.0",
   "private": false,

package/src/ansi.ts

@@ -5,6 +5,8 @@ export const ANSI_ENTER_ALTERNATE_SCREEN = "\u001b[?1049h";
 export const ANSI_EXIT_ALTERNATE_SCREEN = "\u001b[?1049l";
 export const ANSI_HIDE_CURSOR = "\u001b[?25l";
 export const ANSI_SHOW_CURSOR = "\u001b[?25h";
+export const ANSI_ENABLE_MOUSE_REPORTING = "\u001b[?1000h\u001b[?1002h\u001b[?1006h";
+export const ANSI_DISABLE_MOUSE_REPORTING = "\u001b[?1002l\u001b[?1000l\u001b[?1006l";
 
 type AnsiFrameOptions = {
   showCursor?: boolean;
@@ -112,16 +114,26 @@ function renderAnsiLine(line: string, spans: TerminalStyleSpan[], y: number, the
     output += char;
     visibleColumn += 1;
 
+    let closedSpan = false;
     for (const span of rowSpans) {
       if (span.x2 === visibleColumn) {
         if (span.kind !== "focus") {
           output += spanAnsiClose(span, theme);
+          closedSpan = true;
         }
       }
     }
     for (const span of rowSpans) {
       if (span.x2 === visibleColumn && span.kind === "focus") {
         output += spanAnsiClose(span, theme);
+        closedSpan = true;
+      }
+    }
+    if (closedSpan && visibleColumn <= line.length && line[visibleColumn - 1] === " ") {
+      for (const span of rowSpans) {
+        if (span.x1 < visibleColumn && span.x2 > visibleColumn) {
+          output += spanAnsiOpen(span, theme);
+        }
       }
     }
   }

package/src/events.ts

@@ -151,9 +151,11 @@ export function parseTerminalKey(chunk: string | Uint8Array) {
   if (value === "\u001b[1;3C" || value === "\u001bf") return "ALT_RIGHT";
   if (value === "\u001b[1;3D" || value === "\u001bb") return "ALT_LEFT";
   if (value === "\u001b[3~") return "DELETE";
+  if (value === "\u001b[5~") return "PAGEUP";
+  if (value === "\u001b[6~") return "PAGEDOWN";
   if (value === "\u0008" || value === "\u007f") return "BACKSPACE";
-  if (value === "\u001b[H") return "HOME";
-  if (value === "\u001b[F") return "END";
+  if (value === "\u001b[H" || value === "\u001b[1~") return "HOME";
+  if (value === "\u001b[F" || value === "\u001b[4~") return "END";
   if (value === "\u0001") return "CTRL_A";
   if (value === "\u0003") return "CTRL_C";
   if (value === "\u000b") return "CTRL_K";

package/src/keymap.ts

@@ -32,9 +32,11 @@ export const defaultTerminalKeyBindings: TerminalKeyBinding[] = [
   { key: "ENTER", command: { id: "button.press" }, scope: "button", when: { focusedTag: "terminal-button" } },
   { key: "SPACE", command: { id: "button.press" }, scope: "button", when: { focusedTag: "terminal-button" } },
   { key: "UP", command: { id: "list.prev" }, scope: "list", when: { focusedTag: "terminal-list" } },
-  { key: "LEFT", command: { id: "list.prev" }, scope: "list", when: { focusedTag: "terminal-list" } },
   { key: "DOWN", command: { id: "list.next" }, scope: "list", when: { focusedTag: "terminal-list" } },
-  { key: "RIGHT", command: { id: "list.next" }, scope: "list", when: { focusedTag: "terminal-list" } },
+  { key: "PAGEUP", command: { id: "list.pageUp" }, scope: "list", when: { focusedTag: "terminal-list" } },
+  { key: "PAGEDOWN", command: { id: "list.pageDown" }, scope: "list", when: { focusedTag: "terminal-list" } },
+  { key: "HOME", command: { id: "list.home" }, scope: "list", when: { focusedTag: "terminal-list" } },
+  { key: "END", command: { id: "list.end" }, scope: "list", when: { focusedTag: "terminal-list" } },
   { key: "ENTER", command: { id: "list.press" }, scope: "list", when: { focusedTag: "terminal-list" } },
   { key: "UP", command: { id: "scroll.up" }, scope: "scroll", when: { focusedTag: "terminal-scroll" } },
   { key: "DOWN", command: { id: "scroll.down" }, scope: "scroll", when: { focusedTag: "terminal-scroll" } }

package/src/layout.ts

@@ -25,7 +25,8 @@ export function shiftFrame(frame: TerminalFrame, dx: number, dy: number): Termin
       x2: box.x2 + dx,
       y1: box.y1 + dy,
       y2: box.y2 + dy,
-      textStartX: typeof box.textStartX === "number" ? box.textStartX + dx : undefined
+      textStartX: typeof box.textStartX === "number" ? box.textStartX + dx : undefined,
+      contentY: typeof box.contentY === "number" ? box.contentY + dy : undefined
     })),
     cursor: frame.cursor ? { x: frame.cursor.x + dx, y: frame.cursor.y + dy } : null,
     spans: frame.spans.map((span) => ({ ...span, x1: span.x1 + dx, x2: span.x2 + dx, y: span.y + dy }))

package/src/mouse.ts

@@ -2,7 +2,7 @@ import { parseTerminalKey } from "./events.js";
 
 import type { ParsedTerminalInput, TerminalHitbox } from "./types.js";
 
-const nestedParentTags = new Set(["terminal-box", "terminal-view"]);
+const nestedParentTags = new Set(["terminal-box", "terminal-view", "terminal-list"]);
 
 function containsHitbox(parent: TerminalHitbox, child: TerminalHitbox) {
   return child.x1 >= parent.x1 && child.x2 <= parent.x2 && child.y1 >= parent.y1 && child.y2 <= parent.y2;
@@ -12,24 +12,40 @@ function samePointerLayer(left: TerminalHitbox, right: TerminalHitbox) {
   return (left.pointerLayer ?? 0) === (right.pointerLayer ?? 0);
 }
 
+function parseMouseMatch(match: RegExpExecArray): Extract<ParsedTerminalInput, { type: "mouse" }> {
+  const code = Number(match[1]);
+  let action: "press" | "release" | "drag" | "wheel-up" | "wheel-down" = match[4] === "M" ? "press" : "release";
+  if (code >= 64) {
+    action = code === 64 ? "wheel-up" : "wheel-down";
+  } else if (code >= 32 && match[4] === "M") {
+    action = "drag";
+  }
+  return {
+    type: "mouse",
+    button: code,
+    x: Number(match[2]),
+    y: Number(match[3]),
+    action
+  };
+}
+
+export function parseTerminalMousePrefix(chunk: string | Uint8Array): { input: Extract<ParsedTerminalInput, { type: "mouse" }>; rest: string } | null {
+  const value = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
+  const match = /^\u001b\[<(\d+);(\d+);(\d+)([Mm])/.exec(value);
+  if (!match) {
+    return null;
+  }
+  return {
+    input: parseMouseMatch(match),
+    rest: value.slice(match[0].length)
+  };
+}
+
 export function parseTerminalInput(chunk: string | Uint8Array): ParsedTerminalInput {
   const value = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
   const match = /^\u001b\[<(\d+);(\d+);(\d+)([Mm])$/.exec(value);
   if (match) {
-    const code = Number(match[1]);
-    let action: "press" | "release" | "drag" | "wheel-up" | "wheel-down" = match[4] === "M" ? "press" : "release";
-    if (code >= 64) {
-      action = code === 64 ? "wheel-up" : "wheel-down";
-    } else if (code >= 32 && match[4] === "M") {
-      action = "drag";
-    }
-    return {
-      type: "mouse",
-      button: code,
-      x: Number(match[2]),
-      y: Number(match[3]),
-      action
-    };
+    return parseMouseMatch(match);
   }
   return { type: "key", key: parseTerminalKey(value) };
 }

package/src/primitives.ts

@@ -49,7 +49,14 @@ export const Editor = primitive<TerminalEditorProps>("terminal-editor");
 export const Button = primitive<TerminalButtonProps>("terminal-button");
 export const ScrollView = primitive<TerminalScrollViewProps>("terminal-scroll");
 export const LogView = primitive<TerminalLogViewProps>("terminal-log-view");
-export const List = primitive("terminal-list") as TerminalListComponent;
+export const List = function TerminalList(props: TerminalPrimitiveComponentProps<TerminalListProps<any>> | null | undefined, children: any[]) {
+  const nextProps = { ...(props || {}) } as Record<string, any>;
+  if (children.length === 1 && typeof children[0] === "function") {
+    nextProps.__childrenRenderer = children[0];
+    return v("terminal-list", nextProps);
+  }
+  return v("terminal-list", nextProps, ...children);
+} as TerminalListComponent;
 export const Table = primitive<TerminalTableProps>("terminal-table");
 export const Row = primitive<TerminalRowProps>("terminal-row");
 export const Td = primitive<TerminalTdProps>("terminal-td");