@deepseek-harness-tui/dsh-tui 0.5.0

package/lib/types/components/activityFrames.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Working-activity indicator presets, ported from the pi
+ * working-activity extension (`FRAME_PRESETS`). The TUI renders the current
+ * frame next to the live working line, tinted by the activity phase.
+ * `\uFE0E` forces text rendering so Windows never paints the glyphs as
+ * color emoji (the green-block problem).
+ */
+/** One working-activity preset: the frame sequence and the per-frame interval. */
+export interface FramePreset {
+    readonly frames: readonly string[];
+    readonly intervalMs: number;
+}
+/** Named working-activity frame presets, keyed by preset name (`claude`, `moon`, `sand`, ...). */
+export declare const FRAME_PRESETS: Record<string, FramePreset>;
+/** The pi extension's default preset. */
+export declare const DEFAULT_PRESET = "moon";
+/** Every selectable preset name, `random` first (the pi selector order). */
+export declare const PRESET_NAMES: readonly string[];
+/**
+ * Whether `name` selects a known preset or `random`.
+ * @param name - Candidate preset name.
+ * @returns True when the name resolves to a preset.
+ */
+export declare function isPresetName(name: string): boolean;
+/**
+ * Resolve a preset name (`random` picks one per process).
+ * @param name - Preset name, or undefined for the default.
+ * @returns The matching preset; unknown or absent names fall back to the default.
+ */
+export declare function resolvePreset(name: string | undefined): FramePreset;
+//# sourceMappingURL=activityFrames.d.ts.map

package/lib/types/components/activityFrames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activityFrames.d.ts","sourceRoot":"","sources":["../../../src/components/activityFrames.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,kFAAkF;AAClF,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAC5B;AAED,kGAAkG;AAClG,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CA6CrD,CAAA;AAED,yCAAyC;AACzC,eAAO,MAAM,cAAc,SAAS,CAAA;AAEpC,4EAA4E;AAC5E,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAA8C,CAAA;AAExF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CASnE"}

package/lib/types/components/activityFrames.js

@@ -0,0 +1,83 @@
+/**
+ * Working-activity indicator presets, ported from the pi
+ * working-activity extension (`FRAME_PRESETS`). The TUI renders the current
+ * frame next to the live working line, tinted by the activity phase.
+ * `\uFE0E` forces text rendering so Windows never paints the glyphs as
+ * color emoji (the green-block problem).
+ */
+/** Text-variant selector: keep symbols monochrome on Windows. */
+const TE = '\uFE0E';
+/** Named working-activity frame presets, keyed by preset name (`claude`, `moon`, `sand`, ...). */
+export const FRAME_PRESETS = {
+    // Claude Code's real sequence: · ✢ * ✶ ✻ ✽ forward + backward.
+    claude: {
+        frames: ['·', `✢${TE}`, '*', `✶${TE}`, `✻${TE}`, `✽${TE}`, `✻${TE}`, `✶${TE}`, '*', `✢${TE}`],
+        intervalMs: 150,
+    },
+    star2: { frames: [`✶${TE}`, `✸${TE}`, `✹${TE}`, `✺${TE}`, `✹${TE}`, `✷${TE}`], intervalMs: 140 },
+    sand: {
+        frames: ['⠁', '⠂', '⠄', '⡀', '⡈', '⡐', '⡠', '⣀', '⣁', '⣂', '⣄', '⣌', '⣔', '⣤', '⣥', '⣦', '⣮', '⣶', '⣷', '⣿', '⡿', '⠿', '⢟', '⠟', '⡛', '⠛', '⠫', '⢋', '⠋', '⠍', '⡉', '⠉', '⠑', '⠡', '⢁'],
+        intervalMs: 120,
+    },
+    triangle: { frames: ['◢', '◣', '◤', '◥'], intervalMs: 180 },
+    box: { frames: ['▖', '▘', '▝', '▗'], intervalMs: 180 },
+    box2: { frames: ['▌', '▀', '▐', '▄'], intervalMs: 180 },
+    corners: { frames: ['◰', '◳', '◲', '◱'], intervalMs: 190 },
+    point: { frames: ['∙∙∙', '●∙∙', '∙●∙', '∙∙●', '∙∙∙'], intervalMs: 190 },
+    layer: { frames: ['-', '=', '≡'], intervalMs: 220 },
+    flip: { frames: ['_', '_', '_', '-', '`', '`', "'", '´', '-', '_', '_', '_'], intervalMs: 140 },
+    aesthetic: {
+        frames: ['▰▱▱▱▱▱▱', '▰▰▱▱▱▱▱', '▰▰▰▱▱▱▱', '▰▰▰▰▱▱▱', '▰▰▰▰▰▱▱', '▰▰▰▰▰▰▱', '▰▰▰▰▰▰▰', '▰▱▱▱▱▱▱'],
+        intervalMs: 140,
+    },
+    hamburger: { frames: ['☱', '☲', '☴'], intervalMs: 220 },
+    moon: { frames: ['◐', '◓', '◑', '◒'], intervalMs: 240 },
+    comet: {
+        frames: ['●    ', ' ●   ', '  ●  ', '   ● ', '    ●', '   ● ', '  ●  ', ' ●   '],
+        intervalMs: 160,
+    },
+    breathe: { frames: ['▁', '▃', '▅', '▇', '▅', '▃'], intervalMs: 210 },
+    dots: { frames: ['⣾', '⣷', '⣯', '⣟', '⡿', '⢿', '⣻', '⣽'], intervalMs: 140 },
+    arrow: { frames: ['←', '↖', '↑', '↗', '→', '↘', '↓', '↙'], intervalMs: 160 },
+    spark: { frames: ['·', '∘', '°', '✧', '°', '∘'], intervalMs: 240 },
+    bar: { frames: ['▏', '▎', '▍', '▌', '▋', '▊', '▉', '█', '▉', '▊', '▋', '▌', '▍', '▎'], intervalMs: 120 },
+    braille: { frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'], intervalMs: 120 },
+    arc: { frames: ['◜', '◠', '◝', '◞', '◡', '◟'], intervalMs: 160 },
+    circle: { frames: ['◴', '◷', '◶', '◵'], intervalMs: 190 },
+    grow: { frames: ['.', 'o', 'O', '0', 'O', 'o'], intervalMs: 210 },
+    noise: { frames: ['▓', '▒', '░', '▒'], intervalMs: 160 },
+    bounce: { frames: ['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'], intervalMs: 140 },
+    rainbow: {
+        frames: ['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█', '▇', '▆', '▅', '▄', '▃', '▂'],
+        intervalMs: 120,
+    },
+    dqpb: { frames: ['d', 'q', 'p', 'b'], intervalMs: 210 },
+    toggle: { frames: ['⊶', '⊷'], intervalMs: 300 },
+};
+/** The pi extension's default preset. */
+export const DEFAULT_PRESET = 'moon';
+/** Every selectable preset name, `random` first (the pi selector order). */
+export const PRESET_NAMES = ['random', ...Object.keys(FRAME_PRESETS)];
+/**
+ * Whether `name` selects a known preset or `random`.
+ * @param name - Candidate preset name.
+ * @returns True when the name resolves to a preset.
+ */
+export function isPresetName(name) {
+    return name === 'random' || Object.hasOwn(FRAME_PRESETS, name);
+}
+/**
+ * Resolve a preset name (`random` picks one per process).
+ * @param name - Preset name, or undefined for the default.
+ * @returns The matching preset; unknown or absent names fall back to the default.
+ */
+export function resolvePreset(name) {
+    if (name === 'random') {
+        const names = Object.keys(FRAME_PRESETS);
+        // FRAME_PRESETS is non-empty by construction, so any random index is in
+        // range and the lookup always lands on a preset.
+        const pick = names[Math.floor(Math.random() * names.length)];
+        return FRAME_PRESETS[pick];
+    }
+    return FRAME_PRESETS[name ?? ''] ?? FRAME_PRESETS[DEFAULT_PRESET];
+}

package/lib/types/components/bigfont.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A 5-row block font for the header tagline, painted with a horizontal
+ * color gradient plus a moving highlight window (the same sweep cadence as
+ * the wordmark shimmer — see the `stepMs` parameter). Glyphs are 5 columns wide so curves
+ * and diagonals stay legible; only the letters the tagline needs are
+ * defined, and unknown characters fall back to a hollow box so a typo
+ * fails visibly instead of crashing the splash.
+ */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/**
+ * Render `text` in the 5-row block font. The gradient runs `from` → `to`
+ * across the full line width; a SWEEP_WINDOW-wide highlight mixed toward
+ * `flash` travels left to right (one column per `stepMs`, matching the
+ * wordmark shimmer's cadence). Returns 5 ANSI rows.
+ * @param text - Text to render; only D, E, P, S, K, H, A, R, N have glyphs, unknown letters fall back to a hollow box.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param from - Gradient start color at the left edge.
+ * @param to - Gradient end color at the right edge.
+ * @param flash - Highlight color mixed into the moving sweep window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns Five ANSI rows, one per block-font line.
+ */
+export declare function renderBigText(text: string, time: number, from: Rgb, to: Rgb, flash: Rgb, stepMs?: number): string[];
+//# sourceMappingURL=bigfont.d.ts.map

package/lib/types/components/bigfont.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bigfont.d.ts","sourceRoot":"","sources":["../../../src/components/bigfont.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAiCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,GAAG,EACT,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,GAAG,EACV,MAAM,SAAK,GACV,MAAM,EAAE,CA+CV"}

package/lib/types/components/bigfont.js

@@ -0,0 +1,91 @@
+import { interpolateColor } from './Spinner/spinnerUtils.js';
+/** Glyph rows are 5 columns wide; `·` is a transparent cell. */
+const GLYPHS = {
+    D: ['█▀▀▀▄', '█···█', '█···█', '█···█', '█▄▄▄▀'],
+    E: ['█▀▀▀▀', '█····', '█▀▀▀·', '█····', '█▄▄▄▄'],
+    P: ['█▀▀▀▄', '█···█', '█▄▄▄▀', '█····', '█····'],
+    S: ['█▀▀▀▀', '█····', '·▀▀▀▄', '····█', '█▄▄▄▀'],
+    K: ['█···█', '█·█··', '██···', '█·█··', '█···█'],
+    H: ['█···█', '█···█', '█▀▀▀█', '█···█', '█···█'],
+    A: ['·▄▀▄·', '█···█', '█▀▀▀█', '█···█', '█···█'],
+    R: ['█▀▀▀▄', '█···█', '█▄▄▄▀', '█·█··', '█···█'],
+    N: ['█···█', '██··█', '█·█·█', '█··██', '█···█'],
+};
+const FALLBACK = [
+    '▄▄▄▄▄',
+    '█···█',
+    '█···█',
+    '█···█',
+    '▀▀▀▀▀',
+];
+/** Per-glyph advance (5 glyph columns + 1 kerning column). */
+const ADVANCE = 6;
+/** Space between words. */
+const WORD_GAP = 2;
+/** Sweep highlight window width, in terminal columns. */
+const SWEEP_WINDOW = 8;
+const esc = (rgb) => `\x1b[38;2;${rgb.r};${rgb.g};${rgb.b}m`;
+const RESET = '\x1b[39m';
+/**
+ * Render `text` in the 5-row block font. The gradient runs `from` → `to`
+ * across the full line width; a SWEEP_WINDOW-wide highlight mixed toward
+ * `flash` travels left to right (one column per `stepMs`, matching the
+ * wordmark shimmer's cadence). Returns 5 ANSI rows.
+ * @param text - Text to render; only D, E, P, S, K, H, A, R, N have glyphs, unknown letters fall back to a hollow box.
+ * @param time - Elapsed time in milliseconds; drives the sweep position and the brightness pulse.
+ * @param from - Gradient start color at the left edge.
+ * @param to - Gradient end color at the right edge.
+ * @param flash - Highlight color mixed into the moving sweep window.
+ * @param stepMs - Milliseconds per column of sweep advance (default 60).
+ * @returns Five ANSI rows, one per block-font line.
+ */
+export function renderBigText(text, time, from, to, flash, stepMs = 60) {
+    const width = text.length * ADVANCE + (text.includes(' ') ? WORD_GAP - 1 : 0);
+    const cycle = width + SWEEP_WINDOW * 2;
+    const sweepStart = (Math.floor(time / stepMs) % cycle) - SWEEP_WINDOW;
+    const pulse = (Math.sin(time / (stepMs * 2)) + 1) / 2;
+    const rows = [];
+    for (let row = 0; row < 5; row++) {
+        let out = '';
+        let current = '';
+        let x = 0;
+        const emit = (ch) => {
+            if (ch === ' ' || ch === '·') {
+                if (current !== '') {
+                    out += RESET;
+                    current = '';
+                }
+                out += ' ';
+                x += 1;
+                return;
+            }
+            const t = width <= 1 ? 0 : x / (width - 1);
+            let color = interpolateColor(from, to, t);
+            if (x >= sweepStart && x < sweepStart + SWEEP_WINDOW) {
+                color = interpolateColor(color, flash, pulse);
+            }
+            const seq = esc(color);
+            if (seq !== current) {
+                out += seq;
+                current = seq;
+            }
+            out += ch;
+            x += 1;
+        };
+        for (const ch of text) {
+            if (ch === ' ') {
+                for (let i = 0; i < WORD_GAP; i++)
+                    emit(' ');
+                continue;
+            }
+            const glyph = GLYPHS[ch] ?? FALLBACK;
+            for (const cell of glyph[row])
+                emit(cell);
+            emit(' ');
+        }
+        if (current !== '')
+            out += RESET;
+        rows.push(out);
+    }
+    return rows;
+}

package/lib/types/components/design-system/Byline.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    /** The items to join with a middot separator */
+    children: React.ReactNode;
+};
+/**
+ * Joins children with a middot separator (" · ") for inline metadata display
+ * (ported from the leak's design-system). Automatically filters out
+ * null/undefined/false children and only renders separators between valid
+ * elements.
+ */
+export declare function Byline({ children }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=Byline.d.ts.map

package/lib/types/components/design-system/Byline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Byline.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Byline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAA;AAGvD,KAAK,KAAK,GAAG;IACX,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAoB3D"}

package/lib/types/components/design-system/Byline.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { Children, isValidElement } from 'react';
+import Text from '../../ink/components/Text.js';
+/**
+ * Joins children with a middot separator (" · ") for inline metadata display
+ * (ported from the leak's design-system). Automatically filters out
+ * null/undefined/false children and only renders separators between valid
+ * elements.
+ */
+export function Byline({ children }) {
+    // Children.toArray already filters out null, undefined, and booleans
+    const validChildren = Children.toArray(children);
+    if (validChildren.length === 0) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: validChildren.map((child, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { dimColor: true, children: " \u00B7 " }), child] }, isValidElement(child) ? (child.key ?? index) : index))) }));
+}

package/lib/types/components/design-system/Divider.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Theme } from '../../theme.js';
+type DividerProps = {
+    /**
+     * Width of the divider in characters.
+     * Defaults to terminal width.
+     */
+    width?: number;
+    /**
+     * Theme color for the divider.
+     * If not provided, dimColor is used.
+     */
+    color?: keyof Theme;
+    /**
+     * Character to use for the divider line.
+     * @default '─'
+     */
+    char?: string;
+    /**
+     * Padding to subtract from the width (e.g., for indentation).
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * Title shown in the middle of the divider.
+     * May contain ANSI codes (e.g., chalk-styled text).
+     */
+    title?: string;
+};
+/**
+ * A horizontal divider line, optionally with a title in the middle
+ * (ported from the leak's design-system).
+ *
+ * @example
+ * // ─────────── Title ───────────
+ * <Divider title="Title" />
+ */
+export declare function Divider({ width, color, char, padding, title, }: DividerProps): React.ReactNode;
+export {};
+//# sourceMappingURL=Divider.d.ts.map

package/lib/types/components/design-system/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,KAAK,YAAY,GAAG;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,IAAU,EACV,OAAW,EACX,KAAK,GACN,EAAE,YAAY,GAAG,KAAK,CAAC,SAAS,CAwBhC"}

package/lib/types/components/design-system/Divider.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import Text from '../../ink/components/Text.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { useTerminalSize } from '../../ink/hooks/use-terminal-size.js';
+/**
+ * A horizontal divider line, optionally with a title in the middle
+ * (ported from the leak's design-system).
+ *
+ * @example
+ * // ─────────── Title ───────────
+ * <Divider title="Title" />
+ */
+export function Divider({ width, color, char = '─', padding = 0, title, }) {
+    const { columns } = useTerminalSize();
+    const lineWidth = Math.max(0, (width ?? columns) - padding);
+    const titleWidth = title ? stringWidth(title) : 0;
+    if (title && titleWidth < lineWidth) {
+        const lineLength = lineWidth - titleWidth;
+        const leftLength = Math.floor(lineLength / 2);
+        const rightLength = Math.ceil(lineLength / 2);
+        return (_jsxs(Text, { dimColor: !color, color: color, children: [char.repeat(leftLength), title, char.repeat(rightLength)] }));
+    }
+    return (_jsx(Text, { dimColor: !color, color: color, children: char.repeat(lineWidth) }));
+}

package/lib/types/components/design-system/KeyboardShortcutHint.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type Props = {
+    /** The key or chord to display (e.g., "ctrl+o", "Enter", "↑/↓") */
+    shortcut: string;
+    /** The action the key performs (e.g., "expand", "select", "navigate") */
+    action: string;
+    /** Whether to wrap the hint in parentheses. Default: false */
+    parens?: boolean;
+    /** Whether to render the shortcut in bold. Default: false */
+    bold?: boolean;
+};
+/**
+ * Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
+ * (ported from the leak's design-system). Wrap in `<Text dimColor>` for the
+ * common dim styling.
+ */
+export declare function KeyboardShortcutHint({ shortcut, action, parens, bold, }: Props): React.ReactNode;
+export {};
+//# sourceMappingURL=KeyboardShortcutHint.d.ts.map

package/lib/types/components/design-system/KeyboardShortcutHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcutHint.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/KeyboardShortcutHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,KAAK,GAAG;IACX,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAA;IAChB,yEAAyE;IACzE,MAAM,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,MAAc,EACd,IAAY,GACb,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAezB"}

package/lib/types/components/design-system/KeyboardShortcutHint.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from '../../ink/components/Text.js';
+/**
+ * Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
+ * (ported from the leak's design-system). Wrap in `<Text dimColor>` for the
+ * common dim styling.
+ */
+export function KeyboardShortcutHint({ shortcut, action, parens = false, bold = false, }) {
+    const shortcutText = bold ? _jsx(Text, { bold: true, children: shortcut }) : shortcut;
+    if (parens) {
+        return (_jsxs(Text, { children: ["(", shortcutText, " to ", action, ")"] }));
+    }
+    return (_jsxs(Text, { children: [shortcutText, " to ", action] }));
+}

package/lib/types/components/design-system/ListItem.d.ts

@@ -0,0 +1,36 @@
+import React, { type ReactNode } from 'react';
+export type ListItemProps = {
+    /** Whether this item is currently focused (keyboard selection).
+     *  Shows the pointer indicator (❯) when true. */
+    isFocused: boolean;
+    /** Whether this item is selected (chosen/checked).
+     *  Shows the checkmark indicator (✓) when true. */
+    isSelected?: boolean;
+    /** The content to display for this item. */
+    children: ReactNode;
+    /** Optional description text displayed below the main content. */
+    description?: string;
+    /** Show a down arrow indicator instead of pointer (scroll hints). */
+    showScrollDown?: boolean;
+    /** Show an up arrow indicator instead of pointer (scroll hints). */
+    showScrollUp?: boolean;
+    /** Whether to apply automatic styling based on focus/selection state. */
+    styled?: boolean;
+    /** Disabled items show dimmed text and no indicators. */
+    disabled?: boolean;
+    /**
+     * Whether this ListItem should declare the terminal cursor position.
+     * Set false when a child (e.g. BaseTextInput) declares its own cursor.
+     * @default true
+     */
+    declareCursor?: boolean;
+};
+/**
+ * A list item for selection UIs (ported from the leak's
+ * design-system/ListItem.tsx): `❯` pointer for the focused row, `✓`
+ * checkmark for the selected row, description on an indented second line,
+ * and CC's color states (focused = suggestion blue, selected = success
+ * green).
+ */
+export declare function ListItem({ isFocused, isSelected, children, description, showScrollDown, showScrollUp, styled, disabled, declareCursor, }: ListItemProps): React.ReactNode;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/types/components/design-system/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK7C,MAAM,MAAM,aAAa,GAAG;IAC1B;qDACiD;IACjD,SAAS,EAAE,OAAO,CAAA;IAClB;uDACmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,UAAkB,EAClB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,MAAa,EACb,QAAgB,EAChB,aAAa,GACd,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAsDjC"}

package/lib/types/components/design-system/ListItem.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../../ui.js';
+import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js';
+import { POINTER, DOWN_ARROW, UP_ARROW, TICK } from '../../cc/figures.js';
+/**
+ * A list item for selection UIs (ported from the leak's
+ * design-system/ListItem.tsx): `❯` pointer for the focused row, `✓`
+ * checkmark for the selected row, description on an indented second line,
+ * and CC's color states (focused = suggestion blue, selected = success
+ * green).
+ */
+export function ListItem({ isFocused, isSelected = false, children, description, showScrollDown, showScrollUp, styled = true, disabled = false, declareCursor, }) {
+    // Park the native terminal cursor on the pointer indicator so screen
+    // readers / magnifiers track the focused item (CC behavior). (0,0) is the
+    // top-left of this Box, where the pointer renders.
+    const cursorRef = useDeclaredCursor({
+        line: 0,
+        column: 0,
+        active: isFocused && !disabled && declareCursor !== false,
+    });
+    function renderIndicator() {
+        if (disabled) {
+            return _jsx(Text, { children: " " });
+        }
+        if (isFocused) {
+            return _jsx(Text, { color: "suggestion", children: POINTER });
+        }
+        if (showScrollDown) {
+            return _jsx(Text, { dimColor: true, children: DOWN_ARROW });
+        }
+        if (showScrollUp) {
+            return _jsx(Text, { dimColor: true, children: UP_ARROW });
+        }
+        return _jsx(Text, { children: " " });
+    }
+    function getTextColor() {
+        if (disabled)
+            return 'inactive';
+        if (!styled)
+            return undefined;
+        if (isSelected)
+            return 'success';
+        if (isFocused)
+            return 'suggestion';
+        return undefined;
+    }
+    return (_jsxs(Box, { ref: cursorRef, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [renderIndicator(), styled ? (_jsx(Text, { color: getTextColor(), dimColor: disabled, children: children })) : (children), isSelected && !disabled && _jsx(Text, { color: "success", children: TICK })] }), description && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "inactive", children: description }) }))] }));
+}

package/lib/types/components/design-system/LoadingState.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+/**
+ * A spinner with a loading message for async operations, ported from the
+ * leak's design-system/LoadingState.tsx (using the small animated glyph).
+ *
+ * @example
+ * <LoadingState message="Loading models" bold subtitle="Querying the provider…" />
+ */
+export declare function LoadingState({ message, bold, dimColor, subtitle, }: {
+    /** The loading message to display next to the spinner. */
+    message: string;
+    /** Display the message in bold. @default false */
+    bold?: boolean;
+    /** Display the message in dimmed color. @default false */
+    dimColor?: boolean;
+    /** Optional subtitle displayed below the main message. */
+    subtitle?: string;
+}): React.ReactNode;
+//# sourceMappingURL=LoadingState.d.ts.map

package/lib/types/components/design-system/LoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingState.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/LoadingState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,IAAY,EACZ,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAA;IACf,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,GAAG,KAAK,CAAC,SAAS,CAelB"}

package/lib/types/components/design-system/LoadingState.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '../../ink/components/Box.js';
+import Text from '../../ink/components/Text.js';
+import { useAnimationFrame } from '../../ink/hooks/use-animation-frame.js';
+import { SpinnerGlyph } from '../Spinner/SpinnerGlyph.js';
+import { getDefaultCharacters } from '../Spinner/spinnerUtils.js';
+const SPINNER_FRAMES = [
+    ...getDefaultCharacters(),
+    ...[...getDefaultCharacters()].reverse(),
+];
+/**
+ * A spinner with a loading message for async operations, ported from the
+ * leak's design-system/LoadingState.tsx (using the small animated glyph).
+ *
+ * @example
+ * <LoadingState message="Loading models" bold subtitle="Querying the provider…" />
+ */
+export function LoadingState({ message, bold = false, dimColor = false, subtitle, }) {
+    const [ref, time] = useAnimationFrame(80);
+    const frame = Math.floor(time / 80) % SPINNER_FRAMES.length;
+    return (_jsxs(Box, { ref: ref, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(SpinnerGlyph, { frame: frame, messageColor: "text", time: time }), _jsxs(Text, { bold: bold, dimColor: dimColor, children: [' ', message] })] }), subtitle && _jsx(Text, { dimColor: true, children: subtitle })] }));
+}

package/lib/types/components/design-system/Pane.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Theme } from '../../theme.js';
+/**
+ * A pane — a region below the prompt bounded by a colored top line with a
+ * one-row gap above and horizontal padding (ported from the leak's
+ * design-system/Pane.tsx). Used by the slash-command dialogs (/thinking,
+ * /model, /resume).
+ *
+ * @example
+ * <Pane color="permission">...</Pane>
+ */
+export declare function Pane({ children, color, }: {
+    children: React.ReactNode;
+    /** Theme color for the top border line. */
+    color?: keyof Theme;
+}): React.ReactNode;
+//# sourceMappingURL=Pane.d.ts.map

package/lib/types/components/design-system/Pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/Pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,KAAK,CAAA;CACpB,GAAG,KAAK,CAAC,SAAS,CASlB"}

package/lib/types/components/design-system/Pane.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '../../ink/components/Box.js';
+import { Divider } from './Divider.js';
+/**
+ * A pane — a region below the prompt bounded by a colored top line with a
+ * one-row gap above and horizontal padding (ported from the leak's
+ * design-system/Pane.tsx). Used by the slash-command dialogs (/thinking,
+ * /model, /resume).
+ *
+ * @example
+ * <Pane color="permission">...</Pane>
+ */
+export function Pane({ children, color, }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, children: [_jsx(Divider, { color: color }), _jsx(Box, { flexDirection: "column", paddingX: 2, children: children })] }));
+}

package/lib/types/components/design-system/ProgressBar.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { Theme } from '../../theme.js';
+/**
+ * A proportional progress bar drawn with block glyphs, ported from the
+ * leak's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
+ * cell uses the `▏▎▍▌▋▊▉` ladder for sub-cell precision, and the empty
+ * remainder is spaces with the empty color as background.
+ *
+ * @example
+ * <ProgressBar ratio={0.42} width={20} fillColor="claude" emptyColor="inactive" />
+ */
+export declare function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor, }: {
+    /** How much progress to display, between 0 and 1 inclusive. */
+    ratio: number;
+    /** How many characters wide to draw the progress bar. */
+    width: number;
+    /** Optional color for the filled portion of the bar. */
+    fillColor?: keyof Theme;
+    /** Optional color for the empty portion of the bar. */
+    emptyColor?: keyof Theme;
+}): React.ReactNode;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/lib/types/components/design-system/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/design-system/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,UAAU,EACjB,KAAK,EACL,SAAS,EACT,UAAU,GACX,EAAE;IACD,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,KAAK,CAAA;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,KAAK,CAAA;CACzB,GAAG,KAAK,CAAC,SAAS,CAkBlB"}

package/lib/types/components/design-system/ProgressBar.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Text from '../../ink/components/Text.js';
+/**
+ * A proportional progress bar drawn with block glyphs, ported from the
+ * leak's design-system/ProgressBar.tsx: `█` fills whole cells, the partial
+ * cell uses the `▏▎▍▌▋▊▉` ladder for sub-cell precision, and the empty
+ * remainder is spaces with the empty color as background.
+ *
+ * @example
+ * <ProgressBar ratio={0.42} width={20} fillColor="claude" emptyColor="inactive" />
+ */
+export function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor, }) {
+    const ratio = Math.min(1, Math.max(0, inputRatio));
+    const whole = Math.floor(ratio * width);
+    const segments = [BLOCKS[BLOCKS.length - 1].repeat(whole)];
+    if (whole < width) {
+        const remainder = ratio * width - whole;
+        const middle = Math.floor(remainder * BLOCKS.length);
+        segments.push(BLOCKS[middle]);
+        const empty = width - whole - 1;
+        if (empty > 0) {
+            segments.push(BLOCKS[0].repeat(empty));
+        }
+    }
+    return (_jsx(Text, { color: fillColor, backgroundColor: emptyColor, children: segments.join('') }));
+}
+const BLOCKS = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];