@sigrun/tui 0.4.1 → 0.5.0

package/dist/blocks/collection/lanes.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The `lanes` display (UI-blocks U2 Task 4, spec §5.5 + §12.3 + §12.4):
+ * one lane per group, side by side in regular/wide; compact shows ONE
+ * lane with a Tab/Shift+Tab switcher and a per-item "Move to…" menu
+ * (the `.` action-menu) for cross-lane moves.
+ *
+ * Keyboard moves (§12.4): `m` picks the item under the cursor up,
+ * arrows place it (left/right across lanes, up/down within), Enter
+ * drops with the U1 pointer-drop payload `{itemId, from: {group,
+ * index}, to: {group, index}}`, Esc cancels. Review Focus 1: the
+ * pick-up survives a resize — the placement is recomputed from the
+ * live block data on every key, never cached from the rendered lines.
+ *
+ * `x` checks, `Space` selects, Enter on an item with no pick-up in
+ * flight activates it. Quiet items fold behind a per-lane "N more"
+ * row. The cursor is (lane, row); at regular/wide lanes render side by
+ * side and the cursor lane is the compact-selected one.
+ */
+import type { Component } from "@earendil-works/pi-tui";
+import type { CollectionBlock } from "@sigrun/shared/blocks";
+import type { BlockCtx } from "../context.js";
+import { isQuiet } from "./shared.js";
+/** The lanes display. */
+export declare class LanesComponent implements Component {
+    #private;
+    constructor(block: CollectionBlock, ctx: BlockCtx);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}
+/** Re-exported so tests can assert the compact switcher boundary. */
+export { isQuiet };

package/dist/blocks/collection/lanes.js

@@ -0,0 +1,320 @@
+/**
+ * The `lanes` display (UI-blocks U2 Task 4, spec §5.5 + §12.3 + §12.4):
+ * one lane per group, side by side in regular/wide; compact shows ONE
+ * lane with a Tab/Shift+Tab switcher and a per-item "Move to…" menu
+ * (the `.` action-menu) for cross-lane moves.
+ *
+ * Keyboard moves (§12.4): `m` picks the item under the cursor up,
+ * arrows place it (left/right across lanes, up/down within), Enter
+ * drops with the U1 pointer-drop payload `{itemId, from: {group,
+ * index}, to: {group, index}}`, Esc cancels. Review Focus 1: the
+ * pick-up survives a resize — the placement is recomputed from the
+ * live block data on every key, never cached from the rendered lines.
+ *
+ * `x` checks, `Space` selects, Enter on an item with no pick-up in
+ * flight activates it. Quiet items fold behind a per-lane "N more"
+ * row. The cursor is (lane, row); at regular/wide lanes render side by
+ * side and the cursor lane is the compact-selected one.
+ */
+import { truncate, widthClassOf } from "../width.js";
+import { cardLines } from "./card.js";
+import { MoveSession, dispatchMove, lanes, movePayload, placementOf, shiftAcross, shiftWithin, } from "./move.js";
+import { CollectionState, dispatchActivate, dispatchCheck, isQuiet, } from "./shared.js";
+/** The lanes display. */
+export class LanesComponent {
+    #block;
+    #ctx;
+    #state = new CollectionState();
+    #moves = new MoveSession();
+    #tick = 0;
+    /** The compact lane selection (survives width-class changes — the
+     *  same rule as U1's Review Focus 3). */
+    #lane = 0;
+    /** The cursor: a lane id plus a row within it. */
+    #cursor = { group: "", row: 0 };
+    /** The item the "Move to…" menu was opened for. */
+    #menuItem;
+    constructor(block, ctx) {
+        this.#block = block;
+        this.#ctx = ctx;
+    }
+    #lanes() {
+        return lanes(this.#block, this.#ctx);
+    }
+    /** The cursor lane (defaulting to the first group / compact lane). */
+    #cursorLane(groups) {
+        if (this.#cursor.group === "") {
+            const first = groups[Math.min(this.#lane, groups.length - 1)];
+            if (first !== undefined)
+                this.#cursor = { group: first.id, row: 0 };
+        }
+        return (groups.find((group) => group.id === this.#cursor.group) ?? groups[0]);
+    }
+    /** The addressable rows of a lane: visible items, then quiet items
+     *  (folded behind "N more" while the lane's fold is closed). */
+    #laneRows(group, items) {
+        const rows = [];
+        const visibleIds = new Set(items.map((row) => row.id));
+        const quiet = group.items.filter((row) => !visibleIds.has(row.id));
+        if (this.#state.quietShownFor(group.id)) {
+            for (const item of [...items, ...quiet]) {
+                rows.push({ kind: "item", group: group.id, itemId: item.id });
+            }
+            if (quiet.length > 0) {
+                rows.push({ kind: "quiet", group: group.id, quietCount: 0 });
+            }
+            return rows;
+        }
+        for (const item of items)
+            rows.push({ kind: "item", group: group.id, itemId: item.id });
+        if (quiet.length > 0) {
+            rows.push({ kind: "quiet", group: group.id, quietCount: quiet.length });
+        }
+        return rows;
+    }
+    render(width) {
+        this.#tick += 1;
+        const { groups, visible } = this.#lanes();
+        const compact = widthClassOf(width) === "compact";
+        if (this.#lane >= groups.length)
+            this.#lane = 0;
+        const shownGroups = compact
+            ? groups.filter((group) => group.id === (groups[this.#lane]?.id ?? ""))
+            : groups;
+        if (this.#state.menu?.kind === "moveTo") {
+            const lines = [truncate("Move to…", width)];
+            this.#moveTargets().forEach((group, index) => {
+                const cursor = index === this.#state.menuCursor ? "> " : "  ";
+                lines.push(truncate(cursor + (group.title || group.id), width));
+            });
+            return lines;
+        }
+        const lines = [];
+        if (compact && groups.length > 1) {
+            const names = groups
+                .map((group, index) => {
+                const label = group.title || group.id;
+                return index === this.#lane ? this.#ctx.theme.bold(label) : label;
+            })
+                .join("  ");
+            lines.push(truncate(names, width));
+        }
+        const gutter = 2;
+        const laneWidth = shownGroups.length === 0
+            ? width
+            : Math.max(8, Math.floor((width - gutter * (shownGroups.length - 1)) / shownGroups.length));
+        const perLane = shownGroups.map((group) => this.#laneLines(group, visible.get(group.id) ?? [], laneWidth));
+        const height = Math.max(0, ...perLane.map((column) => column.length));
+        for (let row = 0; row < height; row++) {
+            const parts = perLane.map((column) => (column[row] ?? "").padEnd(laneWidth));
+            lines.push(truncate(parts.join(" ".repeat(gutter)), width));
+        }
+        return lines;
+    }
+    /** One lane's lines: heading, item cards (with a cursor column and
+     *  the pick-up marker), the quiet fold, and the drop marker. */
+    #laneLines(group, items, width) {
+        const lines = [];
+        lines.push(this.#ctx.theme.bold(truncate(`## ${group.title || group.id}`, width)));
+        const rows = this.#laneRows(group, items);
+        rows.forEach((row, rowIndex) => {
+            const atCursor = this.#cursor.group === group.id && this.#cursor.row === rowIndex;
+            const cursor = atCursor ? "> " : "  ";
+            if (row.kind === "quiet") {
+                const label = row.quietCount === 0 ? "Show less" : `${row.quietCount ?? 0} more`;
+                lines.push(truncate(cursor + this.#ctx.theme.dim(label), width));
+                return;
+            }
+            const item = items.find((candidate) => candidate.id === row.itemId) ??
+                group.items.find((candidate) => candidate.id === row.itemId);
+            if (item === undefined)
+                return;
+            const held = this.#moves.held?.itemId === item.id;
+            let prefix = "";
+            if (this.#block.checkable !== undefined) {
+                prefix += this.#state.checkedValue(this.#block, item) ? "[x] " : "[ ] ";
+            }
+            if (this.#block.select !== undefined) {
+                prefix += this.#state.selected.has(item.id)
+                    ? this.#ctx.unicode
+                        ? "(•) "
+                        : "(*) "
+                    : "( ) ";
+            }
+            if (held)
+                prefix += this.#ctx.unicode ? "✋ " : "* ";
+            const card = cardLines(this.#block.item, item.item, this.#ctx, width - cursor.length - prefix.length, 0, this.#tick);
+            const [first, ...rest] = card;
+            lines.push(truncate(`${cursor}${prefix}${first ?? ""}`, width));
+            for (const line of rest) {
+                lines.push(truncate(`${cursor}${" ".repeat(prefix.length)}${line}`, width));
+            }
+        });
+        const held = this.#moves.held;
+        if (held !== undefined && held.at.group === group.id) {
+            const marker = this.#ctx.unicode ? "⌄ drop here" : "v drop here";
+            lines.push(this.#ctx.theme.dim(truncate(`  ${marker} (${held.at.index})`, width)));
+        }
+        return lines;
+    }
+    /** The other groups (the compact "Move to…" menu entries). */
+    #moveTargets() {
+        const { groups } = this.#lanes();
+        return groups.filter((group) => group.id !== this.#cursor.group);
+    }
+    #item(id) {
+        if (id === undefined)
+            return undefined;
+        const { groups } = this.#lanes();
+        for (const group of groups) {
+            const found = group.items.find((row) => row.id === id);
+            if (found !== undefined)
+                return found;
+        }
+        return undefined;
+    }
+    handleInput(data) {
+        const { groups, visible } = this.#lanes();
+        const lane = this.#cursorLane(groups);
+        // The "Move to…" menu owns the keys while open.
+        if (this.#state.menu?.kind === "moveTo") {
+            const targets = this.#moveTargets();
+            if (data === "\x1b") {
+                this.#state.menu = null;
+                this.#menuItem = undefined;
+                return;
+            }
+            if (data === "\x1b[B") {
+                this.#state.menuCursor = Math.min(targets.length - 1, this.#state.menuCursor + 1);
+                return;
+            }
+            if (data === "\x1b[A") {
+                this.#state.menuCursor = Math.max(0, this.#state.menuCursor - 1);
+                return;
+            }
+            if (data !== "\r")
+                return;
+            const target = targets[this.#state.menuCursor];
+            const itemId = this.#menuItem;
+            this.#state.menu = null;
+            this.#menuItem = undefined;
+            if (target === undefined || itemId === undefined)
+                return;
+            const from = placementOf(groups, visible, itemId);
+            if (from === undefined || this.#block.onMove === undefined)
+                return;
+            // The compact move target is the END of the chosen lane (U1's
+            // MoveToMenu rule, spec §12.3).
+            const to = { group: target.id, index: (visible.get(target.id) ?? []).length };
+            this.#ctx.dispatch({ type: "move", name: this.#block.onMove }, movePayload({ itemId, from, to }));
+            return;
+        }
+        // A pick-up in flight owns the arrows (spec §12.4).
+        const held = this.#moves.held;
+        if (held !== undefined) {
+            if (data === "\x1b") {
+                this.#moves.cancel();
+                return;
+            }
+            if (data === "\x1b[D") {
+                this.#moves.held = shiftAcross(held, groups, visible, -1);
+                return;
+            }
+            if (data === "\x1b[C") {
+                this.#moves.held = shiftAcross(held, groups, visible, 1);
+                return;
+            }
+            if (data === "\x1b[A") {
+                this.#moves.held = shiftWithin(held, visible, -1);
+                return;
+            }
+            if (data === "\x1b[B") {
+                this.#moves.held = shiftWithin(held, visible, 1);
+                return;
+            }
+            if (data === "\r") {
+                this.#moves.held = undefined;
+                dispatchMove(this.#block, this.#ctx, held);
+            }
+            return;
+        }
+        // Compact lane switcher: Tab / Shift+Tab cycle lanes.
+        if (data === "\t") {
+            if (groups.length > 1) {
+                this.#lane = (this.#lane + 1) % groups.length;
+                this.#cursor = { group: groups[this.#lane]?.id ?? "", row: 0 };
+            }
+            return;
+        }
+        if (data === "\x1b[Z") {
+            if (groups.length > 1) {
+                this.#lane = this.#lane - 1 < 0 ? groups.length - 1 : this.#lane - 1;
+                this.#cursor = { group: groups[this.#lane]?.id ?? "", row: 0 };
+            }
+            return;
+        }
+        if (lane === undefined)
+            return;
+        const rows = this.#laneRows(lane, visible.get(lane.id) ?? []);
+        if (this.#cursor.row >= rows.length)
+            this.#cursor.row = Math.max(0, rows.length - 1);
+        const current = rows[this.#cursor.row];
+        if (data === "m" && current?.kind === "item" && current.itemId !== undefined) {
+            if (this.#block.onMove === undefined)
+                return;
+            const from = placementOf(groups, visible, current.itemId);
+            if (from === undefined)
+                return;
+            this.#moves.pickUp(current.itemId, from);
+            return;
+        }
+        if (data === ".") {
+            if (current?.kind === "item" &&
+                this.#block.onMove !== undefined &&
+                this.#moveTargets().length > 0) {
+                this.#state.menu = { kind: "moveTo" };
+                this.#state.menuCursor = 0;
+                this.#menuItem = current.itemId;
+            }
+            return;
+        }
+        if (data === "\x1b[B") {
+            this.#cursor = { group: lane.id, row: Math.min(rows.length - 1, this.#cursor.row + 1) };
+            return;
+        }
+        if (data === "\x1b[A") {
+            this.#cursor = { group: lane.id, row: Math.max(0, this.#cursor.row - 1) };
+            return;
+        }
+        if (data === "x" && current?.kind === "item") {
+            const item = this.#item(current.itemId);
+            if (item !== undefined)
+                dispatchCheck(this.#block, this.#ctx, this.#state, item);
+            return;
+        }
+        if (data === " " && this.#block.select !== undefined && current?.kind === "item") {
+            const id = current.itemId ?? "";
+            if (this.#state.selected.has(id))
+                this.#state.selected.delete(id);
+            else
+                this.#state.selected.add(id);
+            return;
+        }
+        if (data !== "\r")
+            return;
+        if (current?.kind === "quiet") {
+            this.#state.toggleQuiet(current.group);
+            return;
+        }
+        if (current?.kind === "item") {
+            const item = this.#item(current.itemId);
+            if (item !== undefined)
+                dispatchActivate(this.#block, this.#ctx, item);
+        }
+    }
+    invalidate() {
+        // State (cursor, selection, folds, the pick-up) survives re-renders.
+    }
+}
+/** Re-exported so tests can assert the compact switcher boundary. */
+export { isQuiet };

package/dist/blocks/collection/list.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The `list` display (UI-blocks spec §5.5): rows with group headings in
+ * `groups` order, 2-cell-per-level nesting on `children`, `numbered`,
+ * checkboxes, quiet items folded behind "N more", and the multi-select
+ * bulk action menu (`.`).
+ *
+ * Keys (spec §12.4): Up/Down move the cursor; `x` toggles the checkable
+ * field and dispatches `onCheck` (`edit`, `{itemId, value}`); `Space`
+ * selects; `.` opens the bulk menu; Enter activates a row (`onActivate`
+ * with `{itemId}`), unfolds the "N more" fold, or picks a menu entry.
+ * Selection, folds and menus are view-only — they never dispatch.
+ *
+ * The bulk menu is the seam Task 5's form renderer plugs into: an
+ * action with a `form` opens a minimal seam form here (labeled line
+ * per top-level field name, values keyed by name) and its submit rides
+ * the bulk payload as `{ids, values}` — mirroring U1 Task 3's note.
+ */
+import type { Component } from "@earendil-works/pi-tui";
+import type { CollectionBlock } from "@sigrun/shared/blocks";
+import { type BlockCtx } from "../context.js";
+import { widthClassOf } from "../width.js";
+/** `list`: groups, nesting, numbering, checkboxes, quiet fold, bulk menu. */
+export declare class ListComponent implements Component {
+    #private;
+    constructor(block: CollectionBlock, ctx: BlockCtx);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}
+export { widthClassOf };

package/dist/blocks/collection/list.js

@@ -0,0 +1,273 @@
+/**
+ * The `list` display (UI-blocks spec §5.5): rows with group headings in
+ * `groups` order, 2-cell-per-level nesting on `children`, `numbered`,
+ * checkboxes, quiet items folded behind "N more", and the multi-select
+ * bulk action menu (`.`).
+ *
+ * Keys (spec §12.4): Up/Down move the cursor; `x` toggles the checkable
+ * field and dispatches `onCheck` (`edit`, `{itemId, value}`); `Space`
+ * selects; `.` opens the bulk menu; Enter activates a row (`onActivate`
+ * with `{itemId}`), unfolds the "N more" fold, or picks a menu entry.
+ * Selection, folds and menus are view-only — they never dispatch.
+ *
+ * The bulk menu is the seam Task 5's form renderer plugs into: an
+ * action with a `form` opens a minimal seam form here (labeled line
+ * per top-level field name, values keyed by name) and its submit rides
+ * the bulk payload as `{ids, values}` — mirroring U1 Task 3's note.
+ */
+import { bindText } from "../context.js";
+import { truncate, widthClassOf } from "../width.js";
+import { cardLines } from "./card.js";
+import { CollectionState, childItems, collectionItems, dispatchActivate, dispatchBulk, dispatchCheck, groupItems, isQuiet, sortItems, } from "./shared.js";
+/** Top-level `form` block fields of a bulk action's form tree. */
+function seamFields(form, ctx) {
+    const root = form.root;
+    if (root.type !== "form")
+        return [];
+    const fields = [];
+    for (const child of root.children) {
+        if (child.type === "section")
+            continue;
+        fields.push({ name: child.name, label: bindText(child.label, ctx) || child.name });
+    }
+    return fields;
+}
+/** `list`: groups, nesting, numbering, checkboxes, quiet fold, bulk menu. */
+export class ListComponent {
+    #block;
+    #ctx;
+    #state = new CollectionState();
+    #tick = 0;
+    constructor(block, ctx) {
+        this.#block = block;
+        this.#ctx = ctx;
+    }
+    /** The items in render order (block's initial `sort`). */
+    #items() {
+        return sortItems(collectionItems(this.#block, this.#ctx), this.#block.sort);
+    }
+    /** Flatten the render into addressable rows. */
+    #rows() {
+        const rows = [];
+        const push = (row, depth) => {
+            rows.push({ kind: "item", row, depth });
+            for (const child of childItems(this.#block, row.item))
+                push(child, depth + 1);
+        };
+        for (const group of this.#groups()) {
+            if (group.id !== "" && group.title !== "") {
+                rows.push({ kind: "group", groupId: group.id });
+            }
+            if (group.collapsed && !this.#state.unfoldedGroups.has(group.id))
+                continue;
+            const quiet = group.items.filter((row) => isQuiet(this.#block, this.#ctx, row.item));
+            const loud = group.items.filter((row) => !isQuiet(this.#block, this.#ctx, row.item));
+            for (const row of loud)
+                push(row, 0);
+            if (quiet.length > 0) {
+                if (this.#state.quietShownFor(group.id)) {
+                    for (const row of quiet)
+                        push(row, 0);
+                    rows.push({ kind: "quiet", groupId: group.id, quietRows: [] }); // the "Show less" row
+                }
+                else {
+                    rows.push({ kind: "quiet", groupId: group.id, quietRows: quiet });
+                }
+            }
+        }
+        return rows;
+    }
+    #groups() {
+        return groupItems(this.#block, this.#items(), this.#ctx);
+    }
+    render(width) {
+        this.#tick += 1;
+        const rows = this.#rows();
+        if (this.#state.cursor >= rows.length)
+            this.#state.cursor = Math.max(0, rows.length - 1);
+        const lines = [];
+        const unicode = this.#ctx.unicode;
+        if (this.#state.menu?.kind === "bulk") {
+            lines.push(truncate(`Bulk actions (${this.#state.selected.size} selected)`, width));
+            const actions = this.#block.bulkActions ?? [];
+            actions.forEach((action, index) => {
+                const cursor = index === this.#state.menuCursor ? "> " : "  ";
+                lines.push(truncate(`${cursor}${bindText(action.label, this.#ctx) || action.id}`, width));
+            });
+            return lines;
+        }
+        if (this.#state.menu?.kind === "form") {
+            const menu = this.#state.menu;
+            const value = this.#state.formBuffer === "" ? "…" : this.#state.formBuffer;
+            for (const field of seamFields(menu.form, this.#ctx)) {
+                lines.push(truncate(`${field.label}: ${value}`, width));
+            }
+            lines.push(truncate("Enter to submit · Esc to cancel", width));
+            return lines;
+        }
+        rows.forEach((row, index) => {
+            const cursor = index === this.#state.cursor ? "> " : "  ";
+            if (row.kind === "group") {
+                lines.push(truncate(cursor + this.#ctx.theme.bold(`## ${this.#groupTitle(row.groupId ?? "")}`), width));
+                return;
+            }
+            if (row.kind === "quiet") {
+                const count = row.quietRows?.length ?? 0;
+                const label = this.#state.quietShownFor(row.groupId ?? "") ? "Show less" : `${count} more`;
+                lines.push(truncate(cursor + this.#ctx.theme.dim(label), width));
+                return;
+            }
+            const item = row.row;
+            if (item === undefined)
+                return;
+            let prefix = "";
+            const indentStr = "  ".repeat(row.depth ?? 0);
+            if (this.#block.numbered === true && (row.depth ?? 0) === 0) {
+                prefix += `${this.#numberOf(rows, index)}. `;
+            }
+            if (this.#block.checkable !== undefined) {
+                prefix += this.#state.checkedValue(this.#block, item) ? "[x] " : "[ ] ";
+            }
+            if (this.#block.select !== undefined) {
+                const box = this.#state.selected.has(item.id)
+                    ? unicode
+                        ? "(•) "
+                        : "(*) "
+                    : "( ) ";
+                prefix += box;
+            }
+            const card = cardLines(this.#block.item, item.item, this.#ctx, width - cursor.length - indentStr.length - prefix.length, 0, this.#tick);
+            // The first card line carries the prefixes (title line by slot
+            // order — an eyebrow hoists the prefixes onto the eyebrow line,
+            // keeping one fixed line layout).
+            const [first, ...rest] = card;
+            lines.push(truncate(`${cursor}${indentStr}${prefix}${first ?? ""}`, width));
+            for (const line of rest) {
+                lines.push(truncate(`${cursor}${indentStr}${" ".repeat(prefix.length)}${line}`, width));
+            }
+        });
+        return lines;
+    }
+    #groupTitle(id) {
+        return this.#groups().find((group) => group.id === id)?.title ?? id;
+    }
+    /** The running number of a depth-0 item row (numbered lists). */
+    #numberOf(rows, at) {
+        let number = 0;
+        for (let i = 0; i <= at; i++) {
+            const row = rows[i];
+            if (row?.kind === "item" && row.depth === 0)
+                number += 1;
+        }
+        return number;
+    }
+    handleInput(data) {
+        if (this.#state.menu !== null) {
+            this.#menuInput(data);
+            return;
+        }
+        const rows = this.#rows();
+        if (data === "\x1b[B") {
+            this.#state.cursor = Math.min(rows.length - 1, this.#state.cursor + 1);
+            return;
+        }
+        if (data === "\x1b[A") {
+            this.#state.cursor = Math.max(0, this.#state.cursor - 1);
+            return;
+        }
+        const row = rows[this.#state.cursor];
+        if (row === undefined)
+            return;
+        if (data === "x" && row.kind === "item" && row.row !== undefined) {
+            dispatchCheck(this.#block, this.#ctx, this.#state, row.row);
+            return;
+        }
+        if (data === " " && this.#block.select !== undefined && row.kind === "item" && row.row !== undefined) {
+            const id = row.row.id;
+            if (this.#state.selected.has(id))
+                this.#state.selected.delete(id);
+            else
+                this.#state.selected.add(id);
+            return;
+        }
+        if (data === "." && this.#block.select === "multi" && this.#state.selected.size > 0) {
+            if ((this.#block.bulkActions ?? []).length > 0) {
+                this.#state.menu = { kind: "bulk" };
+                this.#state.menuCursor = 0;
+            }
+            return;
+        }
+        if (data !== "\r")
+            return;
+        if (row.kind === "quiet") {
+            this.#state.toggleQuiet(row.groupId ?? "");
+            return;
+        }
+        if (row.kind === "group" && row.groupId !== undefined) {
+            if (this.#state.unfoldedGroups.has(row.groupId)) {
+                this.#state.unfoldedGroups.delete(row.groupId);
+            }
+            else {
+                this.#state.unfoldedGroups.add(row.groupId);
+            }
+            return;
+        }
+        if (row.row !== undefined)
+            dispatchActivate(this.#block, this.#ctx, row.row);
+    }
+    #menuInput(data) {
+        const menu = this.#state.menu;
+        if (menu === null)
+            return;
+        if (data === "\x1b") {
+            this.#state.menu = null;
+            return;
+        }
+        if (menu.kind === "form") {
+            if (data === "\r") {
+                const values = {};
+                for (const field of seamFields(menu.form, this.#ctx)) {
+                    values[field.name] = this.#state.formBuffer;
+                }
+                this.#state.formBuffer = "";
+                dispatchBulk(this.#ctx, this.#state, menu.onSubmit, values);
+                return;
+            }
+            if (data === "\x7f") {
+                this.#state.formBuffer = this.#state.formBuffer.slice(0, -1);
+                return;
+            }
+            if (!data.startsWith("\x1b") && data.length >= 1) {
+                this.#state.formBuffer += data;
+            }
+            return;
+        }
+        const actions = this.#block.bulkActions ?? [];
+        if (data === "\x1b[B") {
+            this.#state.menuCursor = Math.min(actions.length - 1, this.#state.menuCursor + 1);
+            return;
+        }
+        if (data === "\x1b[A") {
+            this.#state.menuCursor = Math.max(0, this.#state.menuCursor - 1);
+            return;
+        }
+        if (data !== "\r")
+            return;
+        const action = actions[this.#state.menuCursor];
+        if (action === undefined)
+            return;
+        if (action.form !== undefined) {
+            // The Task-5 seam: the form's full rendering lands with the
+            // form block; this menu opens the seam form and its values
+            // ride the payload (mirroring U1 Task 3's note in rows.tsx).
+            this.#state.menu = { kind: "form", form: action.form, onSubmit: action.onSubmit };
+            this.#state.formBuffer = "";
+            return;
+        }
+        dispatchBulk(this.#ctx, this.#state, action.onSubmit);
+    }
+    invalidate() {
+        // State survives re-renders (view-only by design).
+    }
+}
+export { widthClassOf };