@chengchenccc/tui 0.1.1-rc.1

package/dist/components/markdown.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=markdown.test.d.ts.map

package/dist/components/markdown.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.test.d.ts","sourceRoot":"","sources":["../../src/components/markdown.test.ts"],"names":[],"mappings":""}

package/dist/components/markdown.test.js

@@ -0,0 +1,81 @@
+import { describe, expect, test } from "bun:test";
+import { resolveMermaidAscii } from "../mermaid.js";
+import { visibleWidth } from "../utils.js";
+import { Markdown } from "./markdown.js";
+const theme = {
+    heading: (s) => s,
+    link: (s) => s,
+    linkUrl: (s) => s,
+    code: (s) => s,
+    codeBlock: (s) => s,
+    codeBlockBorder: (s) => s,
+    quote: (s) => s,
+    quoteBorder: (s) => s,
+    hr: (s) => s,
+    listBullet: (s) => s,
+    bold: (s) => s,
+    italic: (s) => s,
+    strikethrough: (s) => s,
+    underline: (s) => s,
+};
+const wideDiagram = `graph LR
+  Start[Start Request] --> Auth{Auth Valid?}
+  Auth --No--> Deny[401 Unauthorized]
+  Auth --Yes--> Query[Query Service] --> DB[(Database)]
+  Query --> Build[Build Response] --> OK[200 OK]`;
+describe("markdown mermaid", () => {
+    test("clips wide mermaid ASCII rows instead of wrapping them", () => {
+        const md = new Markdown(`\`\`\`mermaid\n${wideDiagram}\n\`\`\``, 0, 0, theme);
+        const resolved = resolveMermaidAscii(wideDiagram, { maxWidth: 40 });
+        expect(resolved).not.toBeNull();
+        const resolvedLines = resolved.split("\n");
+        // Re-fit can pick a taller TD layout when the base LR graph overflows.
+        const rendered = md.render(40);
+        // Every preformatted row stays exactly one row; the wrap pass must not
+        // fragment the box-drawing canvas.
+        expect(rendered.length).toBe(resolvedLines.length);
+        for (const line of rendered) {
+            expect(visibleWidth(line)).toBeLessThanOrEqual(40);
+        }
+        for (const line of rendered) {
+            expect(visibleWidth(line)).toBeLessThanOrEqual(40);
+        }
+    });
+    test("open mermaid fence stays a code fence until the closing fence arrives", () => {
+        const md = new Markdown(`\`\`\`mermaid\n${wideDiagram}`, 0, 0, theme);
+        const rendered = md.render(80).join("\n");
+        // No ASCII diagram while the fence is still streaming (would re-layout every
+        // chunk and stall the TUI); render the raw fence instead.
+        expect(rendered).toContain("```mermaid");
+        expect(rendered).not.toContain("┌");
+    });
+});
+describe("markdown streaming lex cache", () => {
+    test("append across blank-line boundaries matches one-shot render", () => {
+        const full = "# Title\n\nThis is a paragraph.\n\n- item one\n- item two";
+        const expected = new Markdown(full, 0, 0, theme).render(80);
+        const stream = new Markdown("", 0, 0, theme);
+        let acc = "";
+        for (const chunk of ["# Title", "\n\nThis is a paragraph.", "\n\n- item one\n- item two"]) {
+            acc += chunk;
+            stream.setText(acc);
+            const rendered = stream.render(80);
+            // Every intermediate render must already match the one-shot tail prefix.
+            if (acc === full) {
+                expect(rendered).toEqual(expected);
+            }
+        }
+        expect(stream.render(80)).toEqual(expected);
+    });
+    test("single long paragraph without a blank line falls back safely", () => {
+        const long = "This is a long sentence. ".repeat(60).trim();
+        const expected = new Markdown(long, 0, 0, theme).render(80);
+        const stream = new Markdown("", 0, 0, theme);
+        let acc = "";
+        for (let i = 0; i < long.length; i += 47) {
+            acc += long.slice(i, i + 47);
+            stream.setText(acc);
+        }
+        expect(stream.render(80)).toEqual(expected);
+    });
+});

package/dist/components/output-block.d.ts

@@ -0,0 +1,44 @@
+export type OutputBlockState = "pending" | "running" | "success" | "error" | "warning";
+export interface OutputBlockSection {
+    /** Rendered as a label bar: ├── label ─────┤ */
+    label?: string;
+    /** Draw a plain divider bar instead of (or in addition to) the label. */
+    separator?: boolean;
+    /** Body lines; each may contain ANSI codes. */
+    lines: readonly string[];
+}
+export interface OutputBlockOptions {
+    /** Title-bar text (usually from renderToolHeader). */
+    header?: string;
+    /** Trailing meta appended to the header bar. */
+    headerMeta?: string;
+    state: OutputBlockState;
+    sections: readonly OutputBlockSection[];
+    width: number;
+    /** Override the state-derived border color (raw ANSI SGR). */
+    borderColor?: string;
+    /** Whole-block background tint. */
+    bg?: (line: string) => string;
+    applyBg?: boolean;
+    contentPaddingLeft?: number;
+    contentPaddingRight?: number;
+}
+/** Inner content width for a given outer width and symmetric padding. */
+export declare function outputBlockContentWidth(width: number, contentPaddingLeft?: number, contentPaddingRight?: number): number;
+export declare function renderOutputBlock(options: OutputBlockOptions): string[];
+/**
+ * Cached wrapper around renderOutputBlock.
+ *
+ * Tool blocks are re-rendered every frame while the transcript is live. The
+ * key hashes every field that materially changes the produced lines, so a
+ * stable block avoids re-running visibleWidth / wrapTextWithAnsi on every
+ * keystroke.
+ */
+export declare class CachedOutputBlock {
+    private cachedKey;
+    private cachedLines;
+    render(options: OutputBlockOptions): readonly string[];
+    invalidate(): void;
+    private buildKey;
+}
+//# sourceMappingURL=output-block.d.ts.map

package/dist/components/output-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"output-block.d.ts","sourceRoot":"","sources":["../../src/components/output-block.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAeD,yEAAyE;AACzE,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,MAAM,EACb,kBAAkB,CAAC,EAAE,MAAM,EAC3B,mBAAmB,CAAC,EAAE,MAAM,GAC3B,MAAM,CAIR;AAwCD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,MAAM,EAAE,CA+CvE;AAED;;;;;;;GAOG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,WAAW,CAAgC;IAEnD,MAAM,CAAC,OAAO,EAAE,kBAAkB,GAAG,SAAS,MAAM,EAAE;IAStD,UAAU,IAAI,IAAI;IAKlB,OAAO,CAAC,QAAQ;CAmBjB"}

package/dist/components/output-block.js

@@ -0,0 +1,131 @@
+/**
+ * Bordered output container with optional header and labelled sections.
+ *
+ * This is the unified framed-box primitive for tool cards and any future
+ * rich result blocks. It replaces the ad-hoc Card + Text children hacks that
+ * made each tool renderer re-implement its own border/background rules.
+ */
+import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+/** Default border colors, keyed by state (omp-ish semantics). */
+const STATE_BORDER = {
+    pending: "\x1b[38;5;33m",
+    running: "\x1b[38;5;33m",
+    success: "\x1b[38;5;8m",
+    error: "\x1b[38;5;31m",
+    warning: "\x1b[38;5;11m",
+};
+function normalizePadding(value) {
+    return value === undefined ? 1 : Math.max(0, Math.trunc(value));
+}
+/** Inner content width for a given outer width and symmetric padding. */
+export function outputBlockContentWidth(width, contentPaddingLeft, contentPaddingRight) {
+    const left = normalizePadding(contentPaddingLeft);
+    const right = normalizePadding(contentPaddingRight ?? left);
+    return Math.max(1, width - 2 - left - right);
+}
+/** Build a titled header bar:  ┌─ title ─────────┐ */
+function renderHeaderBar(leftChar, rightChar, label, meta, width, border) {
+    const left = leftChar + "─".repeat(3);
+    const right = rightChar;
+    const labelText = label === undefined ? "" : ` ${label}${meta ? ` · ${meta}` : ""} `;
+    const labelWidth = visibleWidth(labelText);
+    const fill = Math.max(0, width - visibleWidth(left) - labelWidth - visibleWidth(right));
+    return `${border(left)}${labelText}${border("─".repeat(fill))}${border(right)}`;
+}
+/** Build a plain divider/bar:  ├─────────────────┤ */
+function renderBar(leftChar, rightChar, width, border) {
+    const fill = Math.max(0, width - 2);
+    return `${border(leftChar)}${border("─".repeat(fill))}${border(rightChar)}`;
+}
+/** Build the bottom bar:  └─────────────────┘ */
+function renderBottomBar(leftChar, rightChar, width, border) {
+    return renderBar(leftChar, rightChar, width, border);
+}
+export function renderOutputBlock(options) {
+    const { header, headerMeta, state, sections, width } = options;
+    const borderColor = options.borderColor ?? STATE_BORDER[state];
+    const border = (s) => `${borderColor}${s}\x1b[0m`;
+    const bgFn = options.bg;
+    const applyBg = options.applyBg !== false && bgFn !== undefined;
+    const stabilize = (line) => {
+        if (!applyBg || bgFn === undefined)
+            return line;
+        return applyBackgroundToLine(line, width, bgFn);
+    };
+    const contentLeft = normalizePadding(options.contentPaddingLeft);
+    const contentRight = normalizePadding(options.contentPaddingRight ?? contentLeft);
+    const contentWidth = outputBlockContentWidth(width, contentLeft, contentRight);
+    const lines = [];
+    const pushBar = (left, right, label, meta) => {
+        lines.push(stabilize(renderHeaderBar(left, right, label, meta, width, border)));
+    };
+    pushBar("┌", "┐", header, headerMeta);
+    const normalizedSections = sections.length > 0 ? sections : [{ lines: [] }];
+    for (let i = 0; i < normalizedSections.length; i++) {
+        const section = normalizedSections[i];
+        if (section.label !== undefined) {
+            pushBar("├", "┤", section.label);
+        }
+        else if (section.separator && i > 0) {
+            lines.push(stabilize(renderBar("├", "┤", width, border)));
+        }
+        for (const rawLine of section.lines) {
+            for (const line of rawLine.split("\n")) {
+                const trimmed = line.trimEnd();
+                const wrapped = wrapTextWithAnsi(trimmed, contentWidth);
+                for (const w of wrapped) {
+                    const pad = " ".repeat(Math.max(0, contentWidth - visibleWidth(w)));
+                    const inner = `${" ".repeat(contentLeft)}${w}${" ".repeat(contentRight)}${pad}`;
+                    const row = `${border("│")}${inner}${border("│")}`;
+                    lines.push(stabilize(row));
+                }
+            }
+        }
+    }
+    lines.push(stabilize(renderBottomBar("└", "┘", width, border)));
+    return lines;
+}
+/**
+ * Cached wrapper around renderOutputBlock.
+ *
+ * Tool blocks are re-rendered every frame while the transcript is live. The
+ * key hashes every field that materially changes the produced lines, so a
+ * stable block avoids re-running visibleWidth / wrapTextWithAnsi on every
+ * keystroke.
+ */
+export class CachedOutputBlock {
+    cachedKey;
+    cachedLines;
+    render(options) {
+        const key = this.buildKey(options);
+        if (this.cachedKey === key)
+            return this.cachedLines ?? [];
+        const lines = renderOutputBlock(options);
+        this.cachedKey = key;
+        this.cachedLines = lines;
+        return lines;
+    }
+    invalidate() {
+        this.cachedKey = undefined;
+        this.cachedLines = undefined;
+    }
+    buildKey(options) {
+        const parts = [
+            options.width,
+            options.state,
+            options.borderColor,
+            options.header,
+            options.headerMeta,
+            options.contentPaddingLeft,
+            options.contentPaddingRight,
+            options.applyBg,
+            // bg is a function reference; invalidate() forces rebuild on change.
+            options.bg === undefined ? "no-bg" : "bg",
+        ];
+        for (const section of options.sections) {
+            parts.push(section.label, section.separator === true ? 1 : 0);
+            parts.push(...section.lines);
+        }
+        return JSON.stringify(parts);
+    }
+}

package/dist/components/select-list.d.ts

@@ -0,0 +1,50 @@
+import type { Component } from "../tui.ts";
+export interface SelectItem {
+    value: string;
+    label: string;
+    description?: string;
+}
+export interface SelectListTheme {
+    selectedPrefix: (text: string) => string;
+    selectedText: (text: string) => string;
+    description: (text: string) => string;
+    scrollInfo: (text: string) => string;
+    noMatch: (text: string) => string;
+}
+export interface SelectListTruncatePrimaryContext {
+    text: string;
+    maxWidth: number;
+    columnWidth: number;
+    item: SelectItem;
+    isSelected: boolean;
+}
+export interface SelectListLayoutOptions {
+    minPrimaryColumnWidth?: number;
+    maxPrimaryColumnWidth?: number;
+    truncatePrimary?: (context: SelectListTruncatePrimaryContext) => string;
+}
+export declare class SelectList implements Component {
+    private items;
+    private filteredItems;
+    private selectedIndex;
+    private maxVisible;
+    private theme;
+    private layout;
+    onSelect?: (item: SelectItem) => void;
+    onCancel?: () => void;
+    onSelectionChange?: (item: SelectItem) => void;
+    constructor(items: SelectItem[], maxVisible: number, theme: SelectListTheme, layout?: SelectListLayoutOptions);
+    setFilter(filter: string): void;
+    setSelectedIndex(index: number): void;
+    invalidate(): void;
+    render(width: number): string[];
+    handleInput(keyData: string): void;
+    private renderItem;
+    private getPrimaryColumnWidth;
+    private getPrimaryColumnBounds;
+    private truncatePrimary;
+    private getDisplayValue;
+    private notifySelectionChange;
+    getSelectedItem(): SelectItem | null;
+}
+//# sourceMappingURL=select-list.d.ts.map

package/dist/components/select-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.d.ts","sourceRoot":"","sources":["../../src/components/select-list.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAW3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACnC;AAED,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,uBAAuB;IACtC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,gCAAgC,KAAK,MAAM,CAAC;CACzE;AAED,qBAAa,UAAW,YAAW,SAAS;IAC1C,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,MAAM,CAA0B;IAEjC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;gBAGpD,KAAK,EAAE,UAAU,EAAE,EACnB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,EACtB,MAAM,GAAE,uBAA4B;IAStC,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAQ/B,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrC,UAAU,IAAI,IAAI;IAIlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IA6C/B,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IA6BlC,OAAO,CAAC,UAAU;IA+ClB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,qBAAqB;IAO7B,eAAe,IAAI,UAAU,GAAG,IAAI;CAIrC"}

package/dist/components/select-list.js

@@ -0,0 +1,166 @@
+import { getKeybindings } from "../keybindings.js";
+import { truncateToWidth, visibleWidth } from "../utils.js";
+const DEFAULT_PRIMARY_COLUMN_WIDTH = 32;
+const PRIMARY_COLUMN_GAP = 2;
+const MIN_DESCRIPTION_WIDTH = 10;
+const normalizeToSingleLine = (text) => text.replace(/[\r\n]+/g, " ").trim();
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+export class SelectList {
+    items = [];
+    filteredItems = [];
+    selectedIndex = 0;
+    maxVisible = 5;
+    theme;
+    layout;
+    onSelect;
+    onCancel;
+    onSelectionChange;
+    constructor(items, maxVisible, theme, layout = {}) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+        this.layout = layout;
+    }
+    setFilter(filter) {
+        this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
+        // Reset selection when filter changes
+        this.selectedIndex = 0;
+    }
+    setSelectedIndex(index) {
+        this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        const lines = [];
+        // If no items match filter, show message
+        if (this.filteredItems.length === 0) {
+            lines.push(this.theme.noMatch("  No matching commands"));
+            return lines;
+        }
+        const primaryColumnWidth = this.getPrimaryColumnWidth();
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length);
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const descriptionSingleLine = item.description
+                ? normalizeToSingleLine(item.description)
+                : undefined;
+            lines.push(this.renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth));
+        }
+        // Add scroll indicators if needed
+        if (startIndex > 0 || endIndex < this.filteredItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
+            // Truncate if too long for terminal
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
+        }
+        return lines;
+    }
+    handleInput(keyData) {
+        const kb = getKeybindings();
+        // Up arrow - wrap to bottom when at top
+        if (kb.matches(keyData, "tui.select.up")) {
+            this.selectedIndex =
+                this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (kb.matches(keyData, "tui.select.down")) {
+            this.selectedIndex =
+                this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Enter
+        else if (kb.matches(keyData, "tui.select.confirm")) {
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem && this.onSelect) {
+                this.onSelect(selectedItem);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "tui.select.cancel")) {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+    renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth) {
+        const prefix = isSelected ? "→ " : "  ";
+        const prefixWidth = visibleWidth(prefix);
+        if (descriptionSingleLine && width > 40) {
+            const effectivePrimaryColumnWidth = Math.max(1, Math.min(primaryColumnWidth, width - prefixWidth - 4));
+            const maxPrimaryWidth = Math.max(1, effectivePrimaryColumnWidth - PRIMARY_COLUMN_GAP);
+            const truncatedValue = this.truncatePrimary(item, isSelected, maxPrimaryWidth, effectivePrimaryColumnWidth);
+            const truncatedValueWidth = visibleWidth(truncatedValue);
+            const spacing = " ".repeat(Math.max(1, effectivePrimaryColumnWidth - truncatedValueWidth));
+            const descriptionStart = prefixWidth + truncatedValueWidth + spacing.length;
+            const remainingWidth = width - descriptionStart - 2; // -2 for safety
+            if (remainingWidth > MIN_DESCRIPTION_WIDTH) {
+                const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                if (isSelected) {
+                    return this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);
+                }
+                const descText = this.theme.description(spacing + truncatedDesc);
+                return prefix + truncatedValue + descText;
+            }
+        }
+        const maxWidth = width - prefixWidth - 2;
+        const truncatedValue = this.truncatePrimary(item, isSelected, maxWidth, maxWidth);
+        if (isSelected) {
+            return this.theme.selectedText(`${prefix}${truncatedValue}`);
+        }
+        return prefix + truncatedValue;
+    }
+    getPrimaryColumnWidth() {
+        const { min, max } = this.getPrimaryColumnBounds();
+        const widestPrimary = this.filteredItems.reduce((widest, item) => {
+            return Math.max(widest, visibleWidth(this.getDisplayValue(item)) + PRIMARY_COLUMN_GAP);
+        }, 0);
+        return clamp(widestPrimary, min, max);
+    }
+    getPrimaryColumnBounds() {
+        const rawMin = this.layout.minPrimaryColumnWidth ??
+            this.layout.maxPrimaryColumnWidth ??
+            DEFAULT_PRIMARY_COLUMN_WIDTH;
+        const rawMax = this.layout.maxPrimaryColumnWidth ??
+            this.layout.minPrimaryColumnWidth ??
+            DEFAULT_PRIMARY_COLUMN_WIDTH;
+        return {
+            min: Math.max(1, Math.min(rawMin, rawMax)),
+            max: Math.max(1, Math.max(rawMin, rawMax)),
+        };
+    }
+    truncatePrimary(item, isSelected, maxWidth, columnWidth) {
+        const displayValue = this.getDisplayValue(item);
+        const truncatedValue = this.layout.truncatePrimary
+            ? this.layout.truncatePrimary({
+                text: displayValue,
+                maxWidth,
+                columnWidth,
+                item,
+                isSelected,
+            })
+            : truncateToWidth(displayValue, maxWidth, "");
+        return truncateToWidth(truncatedValue, maxWidth, "");
+    }
+    getDisplayValue(item) {
+        return item.label || item.value;
+    }
+    notifySelectionChange() {
+        const selectedItem = this.filteredItems[this.selectedIndex];
+        if (selectedItem && this.onSelectionChange) {
+            this.onSelectionChange(selectedItem);
+        }
+    }
+    getSelectedItem() {
+        const item = this.filteredItems[this.selectedIndex];
+        return item || null;
+    }
+}

package/dist/components/spacer.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from "../tui.ts";
+/**
+ * Spacer component that renders empty lines
+ */
+export declare class Spacer implements Component {
+    private lines;
+    constructor(lines?: number);
+    setLines(lines: number): void;
+    invalidate(): void;
+    render(_width: number): string[];
+}
+//# sourceMappingURL=spacer.d.ts.map

package/dist/components/spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../src/components/spacer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,MAAO,YAAW,SAAS;IACtC,OAAO,CAAC,KAAK,CAAS;gBAEV,KAAK,GAAE,MAAU;IAI7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,UAAU,IAAI,IAAI;IAIlB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;CAOjC"}

package/dist/components/spacer.js

@@ -0,0 +1,22 @@
+/**
+ * Spacer component that renders empty lines
+ */
+export class Spacer {
+    lines;
+    constructor(lines = 1) {
+        this.lines = lines;
+    }
+    setLines(lines) {
+        this.lines = lines;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(_width) {
+        const result = [];
+        for (let i = 0; i < this.lines; i++) {
+            result.push("");
+        }
+        return result;
+    }
+}

package/dist/components/statusline.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Minimal omp-style status bar renderer (powerline chip + semantic colors).
+ * Pure ANSI functions, no component state. Keeping this in packages/tui lets
+ * both the bottom status line and (optionally) the header reuse it.
+ */
+export interface StatusSegment {
+    text: string;
+    /** Render as a filled powerline chip (bg + ◀ ▶) instead of plain text. */
+    chip?: boolean;
+    /** Foreground ANSI for plain segments (default reset). */
+    fg?: string;
+    /** Background ANSI for chip segments (e.g. `\x1b[48;5;25m`). */
+    bg?: string;
+}
+/** One powerline chip: ◀bg label bg▶ using the same color for arrows/fill,
+ *  but white bold text inside so the label is readable on the tint. */
+export declare function chip(text: string, bgAnsi: string): string;
+/** Join a segment array with the thin smoke separator; chips get their own fill. */
+export declare function renderStatusBar(segs: readonly StatusSegment[]): string;
+/** Compact tool-card header:  icon title · description · meta  */
+export declare function renderToolHeader(opts: {
+    icon?: string;
+    title: string;
+    description?: string;
+    meta?: string[];
+    spinnerFrame?: number;
+    titleColor?: string;
+    dimColor?: string;
+}): string;
+//# sourceMappingURL=statusline.d.ts.map

package/dist/components/statusline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusline.d.ts","sourceRoot":"","sources":["../../src/components/statusline.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0DAA0D;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;uEACuE;AACvE,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAGzD;AAED,oFAAoF;AACpF,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,aAAa,EAAE,GAAG,MAAM,CAatE;AAED,kEAAkE;AAClE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAaT"}

package/dist/components/statusline.js

@@ -0,0 +1,46 @@
+/**
+ * Minimal omp-style status bar renderer (powerline chip + semantic colors).
+ * Pure ANSI functions, no component state. Keeping this in packages/tui lets
+ * both the bottom status line and (optionally) the header reuse it.
+ */
+/** One powerline chip: ◀bg label bg▶ using the same color for arrows/fill,
+ *  but white bold text inside so the label is readable on the tint. */
+export function chip(text, bgAnsi) {
+    const fg = bgAnsi.replace("\x1b[48;", "\x1b[38;");
+    return `${fg}◀${bgAnsi}\x1b[1m \x1b[37m${text} \x1b[22m\x1b[0m${fg}▶`;
+}
+/** Join a segment array with the thin smoke separator; chips get their own fill. */
+export function renderStatusBar(segs) {
+    const out = [];
+    for (let i = 0; i < segs.length; i++) {
+        const s = segs[i];
+        if (!s.text)
+            continue;
+        if (i > 0)
+            out.push(`\x1b[38;5;8m ┆ \x1b[0m`);
+        if (s.chip && s.bg) {
+            out.push(chip(s.text, s.bg));
+        }
+        else {
+            out.push(`${s.fg ?? "\x1b[0m"}${s.text}\x1b[0m`);
+        }
+    }
+    return out.join("");
+}
+/** Compact tool-card header:  icon title · description · meta  */
+export function renderToolHeader(opts) {
+    const icon = opts.icon ? `${opts.icon} ` : "";
+    const titleColor = opts.titleColor ?? "\u001b[1m";
+    const title = `${titleColor}${icon}${opts.title}\u001b[22m`;
+    const meta = opts.meta?.filter(Boolean) ?? [];
+    const parts = [];
+    if (opts.description)
+        parts.push(opts.description);
+    if (meta.length > 0)
+        parts.push(meta.join(" · "));
+    if (parts.length > 0) {
+        const dim = opts.dimColor ?? "\u001b[2m";
+        return `${title} ${dim}${parts.join(" · ")}\u001b[0m`;
+    }
+    return title;
+}

package/dist/components/text.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from "../tui.ts";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export declare class Text implements Component {
+    private text;
+    private paddingX;
+    private paddingY;
+    private customBgFn?;
+    private cachedText?;
+    private cachedWidth?;
+    private cachedLines?;
+    constructor(text?: string, paddingX?: number, paddingY?: number, customBgFn?: (text: string) => string);
+    setText(text: string): void;
+    setCustomBgFn(customBgFn?: (text: string) => string): void;
+    invalidate(): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=text.d.ts.map

package/dist/components/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,IAAK,YAAW,SAAS;IACpC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAA2B;IAG9C,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAG7B,IAAI,GAAE,MAAW,EACjB,QAAQ,GAAE,MAAU,EACpB,QAAQ,GAAE,MAAU,EACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM;IAQvC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAO3B,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAO1D,UAAU,IAAI,IAAI;IAMlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA+DhC"}