@sigrun/tui 0.0.0-stage → 0.1.1

package/dist/blocks/collection/move.js

@@ -0,0 +1,96 @@
+/**
+ * Keyboard moves (UI-blocks U2 Task 4, spec §12.4): the shared
+ * placement machinery the lanes and calendar displays drive. `m` picks
+ * the item under the cursor up, arrows move the placement (left/right
+ * across groups, up/down within), Enter drops — dispatching
+ * `{itemId, from: {group, index}, to: {group, index}}`, the EXACT
+ * payload U1's pointer drop builds — and Esc cancels.
+ *
+ * The held item counts as PRESENT in the lane sizing (its removal
+ * happens on drop, not on pickup) — the same rule as U1's lanes. A
+ * dropped placement equal to the item's current one dispatches nothing.
+ *
+ * Review Focus 1: a resize while picked up is handled by the DISPLAYS,
+ * which recompute placements from the live block data on every key; the
+ * held state survives because it lives in the component, not the
+ * rendered lines.
+ */
+import { collectionItems, groupItems, isQuiet, sortItems, } from "./shared.js";
+/** The visible items of a group (sorted, loud items — quiet items are
+ *  folded behind the fold row and not placement targets). */
+export function visibleLaneItems(block, ctx, group) {
+    const sorted = sortItems(group.items, block.sort);
+    return sorted.filter((row) => !isQuiet(block, ctx, row.item));
+}
+/** Every group with its visible items, in group order. */
+export function lanes(block, ctx) {
+    const groups = groupItems(block, sortItems(collectionItems(block, ctx), block.sort), ctx);
+    const visible = new Map();
+    for (const group of groups) {
+        visible.set(group.id, visibleLaneItems(block, ctx, group));
+    }
+    return { groups, visible };
+}
+/** An item's current placement across every group. */
+export function placementOf(groups, visible, itemId) {
+    for (const group of groups) {
+        const items = visible.get(group.id) ?? [];
+        const index = items.findIndex((row) => row.id === itemId);
+        if (index >= 0)
+            return { group: group.id, index };
+    }
+    return undefined;
+}
+/** The move payload (spec §6.3 step 2; U1's pointer-drop shape exactly). */
+export function movePayload(move) {
+    return {
+        itemId: move.itemId,
+        from: { group: move.from.group, index: move.from.index },
+        to: { group: move.to.group, index: move.to.index },
+    };
+}
+/** Move the placement left/right across groups (the index clamps to
+ *  the target lane's size; out-of-range directions are inert). */
+export function shiftAcross(move, groups, visible, delta) {
+    const order = groups.map((group) => group.id);
+    const laneIndex = order.indexOf(move.at.group);
+    const target = order[laneIndex + delta];
+    if (target === undefined)
+        return move;
+    const size = (visible.get(target) ?? []).length;
+    return {
+        ...move,
+        at: { group: target, index: Math.min(move.at.index, size) },
+    };
+}
+/** Move the placement up/down within its group (clamped). */
+export function shiftWithin(move, visible, delta) {
+    const size = (visible.get(move.at.group) ?? []).length;
+    const index = delta === 1 ? Math.min(move.at.index + 1, size) : Math.max(move.at.index - 1, 0);
+    return { ...move, at: { group: move.at.group, index } };
+}
+/**
+ * Dispatch the drop: nothing when the placement equals the current
+ * position; otherwise the `move` action with the U1 payload. The
+ * optimistic flip lives in SurfaceState's overlay — the component
+ * itself keeps no per-item move override.
+ */
+export function dispatchMove(block, ctx, move) {
+    if (block.onMove === undefined)
+        return;
+    if (move.from.group === move.at.group && move.from.index === move.at.index)
+        return;
+    ctx.dispatch({ type: "move", name: block.onMove }, movePayload({ itemId: move.itemId, from: move.from, to: move.at }));
+}
+/** The per-display move session state (held in the component). */
+export class MoveSession {
+    held;
+    /** Pick up the item (undefined placement = no pickup). */
+    pickUp(itemId, from) {
+        this.held = { itemId, from, at: from };
+    }
+    /** Cancel (Esc): drop the session without dispatching. */
+    cancel() {
+        this.held = undefined;
+    }
+}

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

@@ -0,0 +1,87 @@
+/**
+ * Shared collection machinery (UI-blocks spec §5.5): item resolution,
+ * grouping, sorting and the view-only interaction state (selection,
+ * folds, menu) the list/table/grid displays drive.
+ *
+ * Every interactive display owns a {@link CollectionState} — its shape
+ * mirrors the `/view/<blockId>/` branch Task 4's surface state will own
+ * (sort, page, selection, expanded, quietShown). View-only state never
+ * dispatches (§6.2): only `onCheck` (`edit`), `onActivate`, and bulk
+ * `submit` actions reach `ctx.dispatch`.
+ */
+import type { CollectionBlock, JsonObject, JsonValue, Tree } from "@sigrun/shared/blocks";
+import { type BlockCtx } from "../context.js";
+/** A resolved collection row: the item and its stable id. */
+export interface CollectionItem {
+    id: string;
+    item: JsonObject;
+}
+/** A resolved group: heading text and its items, in `groups` order. */
+export interface ItemGroup {
+    id: string;
+    title: string;
+    collapsed: boolean;
+    items: CollectionItem[];
+}
+/** Resolve `items` to rows, dropping malformed entries. */
+export declare function collectionItems(block: CollectionBlock, ctx: BlockCtx): CollectionItem[];
+/** Nested child rows of an item (the `children` field's records). */
+export declare function childItems(block: CollectionBlock, item: JsonObject): CollectionItem[];
+/** Compare two items on `field`, ascending. */
+export declare function compareItems(a: JsonObject, b: JsonObject, field: string): number;
+/** Order items by a `{field, dir}` sort (stable; view state wins over the block's). */
+export declare function sortItems(items: readonly CollectionItem[], sort: {
+    field: string;
+    dir: "asc" | "desc";
+} | undefined): CollectionItem[];
+/**
+ * Group items by `groupBy`: declared `groups` in declared order, then
+ * unseen values in first-appearance item order. With no `groupBy`,
+ * one anonymous group holds everything.
+ */
+export declare function groupItems(block: CollectionBlock, items: readonly CollectionItem[], ctx: BlockCtx): ItemGroup[];
+/** Is an item quiet (folded behind "N more")? */
+export declare function isQuiet(block: CollectionBlock, ctx: BlockCtx, item: JsonValue): boolean;
+/**
+ * The view-only interaction state of one collection component. The
+ * checkable toggle's optimistic flip is part of it: the data update
+ * that follows a successful `onCheck` replaces the optimistic value
+ * (§6.3's convention, without moves).
+ */
+export declare class CollectionState {
+    cursor: number;
+    readonly selected: Set<string>;
+    readonly checkedOverrides: Map<string, boolean>;
+    readonly expanded: Set<string>;
+    readonly unfoldedGroups: Set<string>;
+    /** The groups whose quiet fold is open (per-group; Task 3's global
+     *  toggle became per-group with the lanes' per-lane folds). */
+    readonly quietOpen: Set<string>;
+    /** Is the quiet fold of `groupId` open? */
+    quietShownFor(groupId: string): boolean;
+    /** Toggle the quiet fold of `groupId`. */
+    toggleQuiet(groupId: string): void;
+    /** The open overlay: the sort choice, the bulk menu, the seam form,
+     *  or the compact lanes' "Move to…" target list (Task 4). */
+    menu: {
+        kind: "sort";
+    } | {
+        kind: "bulk";
+    } | {
+        kind: "form";
+        form: Tree;
+        onSubmit: string;
+    } | {
+        kind: "moveTo";
+    } | null;
+    menuCursor: number;
+    formBuffer: string;
+    /** The effective checked value of an item (data plus the optimistic flip). */
+    checkedValue(block: CollectionBlock, row: CollectionItem): boolean;
+}
+/** Dispatch the `onCheck` edit for an item (spec §5.5: `{itemId, value}`). */
+export declare function dispatchCheck(block: CollectionBlock, ctx: BlockCtx, state: CollectionState, row: CollectionItem): void;
+/** Dispatch `onActivate` for an item, payload `{itemId}`. */
+export declare function dispatchActivate(block: CollectionBlock, ctx: BlockCtx, row: CollectionItem): void;
+/** Dispatch a bulk action's submit for the current selection. */
+export declare function dispatchBulk(ctx: BlockCtx, state: CollectionState, onSubmit: string, values?: JsonObject): void;

package/dist/blocks/collection/shared.js

@@ -0,0 +1,177 @@
+/**
+ * Shared collection machinery (UI-blocks spec §5.5): item resolution,
+ * grouping, sorting and the view-only interaction state (selection,
+ * folds, menu) the list/table/grid displays drive.
+ *
+ * Every interactive display owns a {@link CollectionState} — its shape
+ * mirrors the `/view/<blockId>/` branch Task 4's surface state will own
+ * (sort, page, selection, expanded, quietShown). View-only state never
+ * dispatches (§6.2): only `onCheck` (`edit`), `onActivate`, and bulk
+ * `submit` actions reach `ctx.dispatch`.
+ */
+import { bindRaw, bindText } from "../context.js";
+/** Resolve `items` to rows, dropping malformed entries. */
+export function collectionItems(block, ctx) {
+    const raw = bindRaw(block.items, ctx);
+    if (!Array.isArray(raw))
+        return [];
+    const out = [];
+    for (const entry of raw) {
+        if (entry === null || typeof entry !== "object" || Array.isArray(entry))
+            continue;
+        const record = entry;
+        const id = typeof record.id === "string" ? record.id : String(record.id ?? "");
+        if (id === "")
+            continue;
+        out.push({ id, item: record });
+    }
+    return out;
+}
+/** Nested child rows of an item (the `children` field's records). */
+export function childItems(block, item) {
+    const field = block.children;
+    if (field === undefined || field === "")
+        return [];
+    const raw = item[field];
+    if (!Array.isArray(raw))
+        return [];
+    const out = [];
+    for (const entry of raw) {
+        if (entry === null || typeof entry !== "object" || Array.isArray(entry))
+            continue;
+        const record = entry;
+        const id = typeof record.id === "string" ? record.id : String(record.id ?? "");
+        if (id === "")
+            continue;
+        out.push({ id, item: record });
+    }
+    return out;
+}
+/** The sort key of an item for a field (numbers sort numerically). */
+function sortValue(item, field) {
+    return item[field] ?? null;
+}
+/** Compare two items on `field`, ascending. */
+export function compareItems(a, b, field) {
+    const left = sortValue(a, field);
+    const right = sortValue(b, field);
+    if (typeof left === "number" && typeof right === "number") {
+        return left === right ? 0 : left < right ? -1 : 1;
+    }
+    const leftKey = left === null ? "" : String(left);
+    const rightKey = right === null ? "" : String(right);
+    if (leftKey === rightKey)
+        return 0;
+    return leftKey < rightKey ? -1 : 1;
+}
+/** Order items by a `{field, dir}` sort (stable; view state wins over the block's). */
+export function sortItems(items, sort) {
+    if (sort === undefined)
+        return [...items];
+    const sign = sort.dir === "desc" ? -1 : 1;
+    return [...items].sort((a, b) => compareItems(a.item, b.item, sort.field) * sign);
+}
+/**
+ * Group items by `groupBy`: declared `groups` in declared order, then
+ * unseen values in first-appearance item order. With no `groupBy`,
+ * one anonymous group holds everything.
+ */
+export function groupItems(block, items, ctx) {
+    const by = block.groupBy;
+    if (by === undefined || by === "") {
+        return [{ id: "", title: "", collapsed: false, items: [...items] }];
+    }
+    const groups = [];
+    const indexById = new Map();
+    for (const declared of block.groups ?? []) {
+        indexById.set(declared.id, groups.length);
+        groups.push({
+            id: declared.id,
+            title: bindText(declared.title, ctx),
+            collapsed: declared.collapsed === true,
+            items: [],
+        });
+    }
+    for (const row of items) {
+        const value = row.item[by];
+        const id = value === undefined || value === null ? "" : String(value);
+        const index = indexById.get(id);
+        if (index !== undefined) {
+            groups[index]?.items.push(row);
+            continue;
+        }
+        indexById.set(id, groups.length);
+        groups.push({ id, title: id, collapsed: false, items: [row] });
+    }
+    return groups;
+}
+/** Is an item quiet (folded behind "N more")? */
+export function isQuiet(block, ctx, item) {
+    if (block.item.quiet === undefined)
+        return false;
+    return bindRaw(block.item.quiet, { ...ctx, item }) === true;
+}
+/**
+ * The view-only interaction state of one collection component. The
+ * checkable toggle's optimistic flip is part of it: the data update
+ * that follows a successful `onCheck` replaces the optimistic value
+ * (§6.3's convention, without moves).
+ */
+export class CollectionState {
+    cursor = 0;
+    selected = new Set();
+    checkedOverrides = new Map();
+    expanded = new Set();
+    unfoldedGroups = new Set();
+    /** The groups whose quiet fold is open (per-group; Task 3's global
+     *  toggle became per-group with the lanes' per-lane folds). */
+    quietOpen = new Set();
+    /** Is the quiet fold of `groupId` open? */
+    quietShownFor(groupId) {
+        return this.quietOpen.has(groupId);
+    }
+    /** Toggle the quiet fold of `groupId`. */
+    toggleQuiet(groupId) {
+        if (this.quietOpen.has(groupId))
+            this.quietOpen.delete(groupId);
+        else
+            this.quietOpen.add(groupId);
+    }
+    /** The open overlay: the sort choice, the bulk menu, the seam form,
+     *  or the compact lanes' "Move to…" target list (Task 4). */
+    menu = null;
+    menuCursor = 0;
+    formBuffer = "";
+    /** The effective checked value of an item (data plus the optimistic flip). */
+    checkedValue(block, row) {
+        const override = this.checkedOverrides.get(row.id);
+        if (override !== undefined)
+            return override;
+        if (block.checkable === undefined)
+            return false;
+        return row.item[block.checkable] === true;
+    }
+}
+/** Dispatch the `onCheck` edit for an item (spec §5.5: `{itemId, value}`). */
+export function dispatchCheck(block, ctx, state, row) {
+    if (block.onCheck === undefined || block.checkable === undefined)
+        return;
+    const value = !state.checkedValue(block, row);
+    state.checkedOverrides.set(row.id, value);
+    ctx.dispatch({ type: "edit", name: block.onCheck }, { itemId: row.id, value });
+}
+/** Dispatch `onActivate` for an item, payload `{itemId}`. */
+export function dispatchActivate(block, ctx, row) {
+    if (block.onActivate === undefined)
+        return;
+    ctx.dispatch(block.onActivate, { itemId: row.id });
+}
+/** Dispatch a bulk action's submit for the current selection. */
+export function dispatchBulk(ctx, state, onSubmit, values) {
+    const ids = [...state.selected];
+    const payload = values === undefined ? { ids } : { ids, values };
+    const action = { type: "submit", name: onSubmit };
+    ctx.dispatch(action, payload);
+    state.selected.clear();
+    state.menu = null;
+}

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

@@ -0,0 +1,26 @@
+/**
+ * The `table` display (UI-blocks spec §5.5 + §12.3): display-width
+ * aligned columns (CJK-safe via pi-tui's `visibleWidth`), `s` picks a
+ * sortable column and cycles asc → desc, 50 rows per page with
+ * PgUp/PgDn, and the compact fallback — rows as cards with
+ * `priority: "low"` columns behind Enter-expand.
+ *
+ * Sort and page are view-only (§6.2): they never dispatch. The footer
+ * carries the page range ("1–50 of 120"); the sort menu lists the
+ * sortable columns only.
+ */
+import type { Component } from "@earendil-works/pi-tui";
+import type { CollectionBlock } from "@sigrun/shared/blocks";
+import { type BlockCtx } from "../context.js";
+import { compareItems } from "./shared.js";
+/** The page size (spec §5.5: paged at 50 rows). */
+export declare const TABLE_PAGE_SIZE = 50;
+/** `table`: aligned, sortable, paged columns; cards at compact width. */
+export declare class TableComponent implements Component {
+    #private;
+    constructor(block: CollectionBlock, ctx: BlockCtx);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}
+export { compareItems };

package/dist/blocks/collection/table.js

@@ -0,0 +1,221 @@
+/**
+ * The `table` display (UI-blocks spec §5.5 + §12.3): display-width
+ * aligned columns (CJK-safe via pi-tui's `visibleWidth`), `s` picks a
+ * sortable column and cycles asc → desc, 50 rows per page with
+ * PgUp/PgDn, and the compact fallback — rows as cards with
+ * `priority: "low"` columns behind Enter-expand.
+ *
+ * Sort and page are view-only (§6.2): they never dispatch. The footer
+ * carries the page range ("1–50 of 120"); the sort menu lists the
+ * sortable columns only.
+ */
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { formatValue } from "@sigrun/shared/blocks";
+import { bindText } from "../context.js";
+import { truncate, widthClassOf } from "../width.js";
+import { meterBar } from "../meter.js";
+import { cardLines } from "./card.js";
+import { CollectionState, collectionItems, compareItems, sortItems, } from "./shared.js";
+/** The page size (spec §5.5: paged at 50 rows). */
+export const TABLE_PAGE_SIZE = 50;
+/** The sort menu entries: the sortable columns' labels. */
+function sortableColumns(block) {
+    return (block.columns ?? []).filter((column) => column.sortable === true);
+}
+/** One cell's display text. */
+function cellText(column, row, ctx, width) {
+    const value = row.item[column.field];
+    if (column.cell === "meter") {
+        const level = typeof value === "number" ? value : 0;
+        return meterBar(level, Math.max(4, Math.min(10, Math.floor(width / 4))), !ctx.unicode);
+    }
+    if (value === undefined || value === null)
+        return "";
+    return formatValue(value, column.format, ctx.locale, ctx.timeZone);
+}
+/** `table`: aligned, sortable, paged columns; cards at compact width. */
+export class TableComponent {
+    #block;
+    #ctx;
+    #state = new CollectionState();
+    #sort;
+    #page = 0;
+    #tick = 0;
+    constructor(block, ctx) {
+        this.#block = block;
+        this.#ctx = ctx;
+        this.#sort = block.sort;
+    }
+    #rows() {
+        return sortItems(collectionItems(this.#block, this.#ctx), this.#sort);
+    }
+    render(width) {
+        this.#tick += 1;
+        if (widthClassOf(width) === "compact")
+            return this.#renderCompact(width);
+        return this.#renderFull(width);
+    }
+    // ─── the full table ──────────────────────────────────────────────
+    #renderFull(width) {
+        const columns = this.#block.columns ?? [];
+        const rows = this.#rows();
+        const pages = Math.max(1, Math.ceil(rows.length / TABLE_PAGE_SIZE));
+        if (this.#page >= pages)
+            this.#page = pages - 1;
+        const pageRows = rows.slice(this.#page * TABLE_PAGE_SIZE, (this.#page + 1) * TABLE_PAGE_SIZE);
+        if (this.#state.menu?.kind === "sort") {
+            const lines = [truncate("Sort by", width)];
+            sortableColumns(this.#block).forEach((column, index) => {
+                const cursor = index === this.#state.menuCursor ? "> " : "  ";
+                const arrow = this.#sort?.field === column.field ? (this.#sort.dir === "asc" ? " ▲" : " ▼") : "";
+                lines.push(truncate(`${cursor}${bindText(column.label, this.#ctx)}${arrow}`, width));
+            });
+            return lines;
+        }
+        // Column widths: the widest display width of header or cells,
+        // clamped so the table fits the pane.
+        const labels = columns.map((column) => bindText(column.label, this.#ctx));
+        const widths = columns.map((column, index) => {
+            let widest = visibleWidth(labels[index] ?? "");
+            for (const row of pageRows) {
+                widest = Math.max(widest, visibleWidth(cellText(column, row, this.#ctx, width)));
+            }
+            return widest;
+        });
+        const gaps = Math.max(0, columns.length - 1) * 2;
+        let budget = width - 2 - gaps; // the cursor column + separators
+        for (let i = columns.length - 1; i >= 0 && widths.reduce((a, b) => a + b, 0) > budget; i--) {
+            widths[i] = Math.max(4, (widths[i] ?? 4) - (widths.reduce((a, b) => a + b, 0) - budget));
+            budget = width - 2 - gaps;
+        }
+        const join = (cells, cursor) => truncate(cursor +
+            cells
+                .map((cell, index) => {
+                const column = columns[index];
+                const cellWidth = widths[index] ?? 4;
+                const fits = visibleWidth(cell) <= cellWidth;
+                const text = fits ? cell : truncate(cell, cellWidth);
+                const rest = cellWidth - visibleWidth(text);
+                const padStr = rest > 0 ? " ".repeat(rest) : "";
+                // numeric formats right-align; text left-aligns.
+                return column?.format === "number" && text !== ""
+                    ? padStr + text
+                    : text + padStr;
+            })
+                .join("  "), width);
+        const lines = [join(labels, "  ")];
+        for (const row of pageRows) {
+            lines.push(join(columns.map((column) => cellText(column, row, this.#ctx, width)), "  "));
+        }
+        const from = this.#page * TABLE_PAGE_SIZE + 1;
+        const to = Math.min(rows.length, (this.#page + 1) * TABLE_PAGE_SIZE);
+        const range = rows.length === 0 ? "0 of 0" : `${from}–${to} of ${rows.length}`;
+        lines.push(truncate(this.#ctx.theme.dim(range), width));
+        return lines;
+    }
+    // ─── the compact fallback (rows as cards, §12.3) ────────────────
+    #renderCompact(width) {
+        const rows = this.#rows();
+        const lines = [];
+        const cursorRow = Math.min(this.#state.cursor, rows.length - 1);
+        rows.forEach((row, index) => {
+            const cursor = index === cursorRow ? "> " : "  ";
+            const inner = width - 2;
+            const card = cardLines(this.#block.item, row.item, this.#ctx, inner, 0, this.#tick);
+            lines.push(truncate(cursor + (card[0] ?? ""), width));
+            for (const line of card.slice(1))
+                lines.push(truncate(cursor + line, width));
+            // High-priority columns ride the card as "label: value" lines.
+            for (const column of this.#block.columns ?? []) {
+                if (column.priority === "low")
+                    continue;
+                if (column.cell === "meter")
+                    continue;
+                const value = cellText(column, row, this.#ctx, width);
+                if (value === "")
+                    continue;
+                lines.push(truncate(`${cursor}${bindText(column.label, this.#ctx)}: ${value}`, width));
+            }
+            // Low-priority columns sit behind Enter-expand (§12.3).
+            if (this.#state.expanded.has(row.id)) {
+                for (const column of this.#block.columns ?? []) {
+                    if (column.priority !== "low")
+                        continue;
+                    const value = cellText(column, row, this.#ctx, width);
+                    if (value === "")
+                        continue;
+                    lines.push(truncate(`${cursor}${bindText(column.label, this.#ctx)}: ${value}`, width));
+                }
+            }
+        });
+        return lines;
+    }
+    handleInput(data) {
+        if (this.#state.menu?.kind === "sort") {
+            const columns = sortableColumns(this.#block);
+            if (data === "\x1b") {
+                this.#state.menu = null;
+                return;
+            }
+            if (data === "\x1b[B") {
+                this.#state.menuCursor = Math.min(columns.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") {
+                const column = columns[this.#state.menuCursor];
+                if (column !== undefined) {
+                    // Sorting the same column again flips the direction.
+                    this.#sort =
+                        this.#sort?.field === column.field && this.#sort.dir === "asc"
+                            ? { field: column.field, dir: "desc" }
+                            : { field: column.field, dir: "asc" };
+                    this.#page = 0;
+                }
+                this.#state.menu = null;
+            }
+            return;
+        }
+        if (data === "s" && sortableColumns(this.#block).length > 0) {
+            this.#state.menu = { kind: "sort" };
+            this.#state.menuCursor = 0;
+            return;
+        }
+        if (data === "\x1b[6~") {
+            const pages = Math.ceil(this.#rows().length / TABLE_PAGE_SIZE);
+            this.#page = Math.min(Math.max(0, pages - 1), this.#page + 1);
+            return;
+        }
+        if (data === "\x1b[5~") {
+            this.#page = Math.max(0, this.#page - 1);
+            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;
+        }
+        if (data === "\r") {
+            const row = rows[this.#state.cursor];
+            if (row === undefined)
+                return;
+            // Compact: Enter toggles the low-priority expand; full table:
+            // Enter activates (onActivate rides the card template's click).
+            if (this.#state.expanded.has(row.id))
+                this.#state.expanded.delete(row.id);
+            else
+                this.#state.expanded.add(row.id);
+        }
+    }
+    invalidate() {
+        // View state survives re-renders.
+    }
+}
+export { compareItems };

package/dist/blocks/content.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The simple content blocks (UI-blocks spec §5.3): `markdown`,
+ * `fields`, `stat`, `callout`, `diff`, `details`.
+ *
+ * - `markdown` rides pi-tui's `Markdown` (the same renderer as chat)
+ *   with the TuiTheme-mapped markdown theme.
+ * - `fields` aligns labels by display width.
+ * - `stat` is `label: value unit` plus an optional caption line (its
+ *   `sparkline` becomes a real drawing in Task 2).
+ * - `callout` leads with the tone marker (colour + the NO_COLOR
+ *   fallback), its body renders as markdown, and its actions render as
+ *   `[1] label` buttons with the confirm flow and the OSC 52 copy.
+ * - `diff` reuses the interaction diff renderer (blocks/diff.ts).
+ * - `details` is one collapsed JSON line (the TUI's existing details
+ *   primitive; a later task may add an expandable pretty view).
+ */
+import type { Component } from "@earendil-works/pi-tui";
+import type { ActionButton, Block, CalloutBlock, DetailsBlock, DiffBlock, FieldsBlock, MarkdownBlock, StatBlock } from "@sigrun/shared/blocks";
+import { type BlockCtx } from "./context.js";
+/** `markdown`: the same renderer as chat. */
+export declare function renderMarkdown(block: MarkdownBlock, ctx: BlockCtx): Component;
+/** `fields`: `label: value` rows, labels aligned by display width. */
+export declare function renderFields(block: FieldsBlock, ctx: BlockCtx): Component;
+/** `stat`: `label: value unit` plus an optional caption line. */
+export declare function renderStat(block: StatBlock, ctx: BlockCtx): Component;
+/** `details`: one collapsed JSON line. */
+export declare function renderDetails(block: DetailsBlock): Component;
+/** `diff`: the interaction diff renderer (blocks/diff.ts). */
+export declare function renderDiff(block: DiffBlock): Component;
+/** The actions a block offers: read access keeps the view-only kinds
+ * (§6.5 — copy/open/navigate never edit or answer; twin of the webui's
+ * `isViewOnly`). */
+export declare function visibleActions(actions: readonly ActionButton[] | undefined, ctx: BlockCtx): ActionButton[];
+/**
+ * `callout`: tone-marked title, wrapped markdown body, action buttons.
+ * `handleInput` picks a button by digit; a `confirm` action gates its
+ * dispatch behind a `y/N` prompt (anything but `y`/`Y` cancels and
+ * dispatches nothing).
+ */
+export declare class CalloutComponent implements Component {
+    #private;
+    constructor(block: CalloutBlock, ctx: BlockCtx);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}
+/** Render a Task-1 content block by type; the caller routes unknowns. */
+export declare function renderContent(block: Block, ctx: BlockCtx): Component | undefined;