@amplitude/wizard 1.0.0-beta.0

package/dist/src/ui/tui/primitives/DissolveTransition.js

@@ -0,0 +1,143 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DissolveTransition — Column-sweep inspired by TTE's Sweep effect.
+ *
+ * Uses a SequenceEaser (in_out_circ) to activate columns with eased pacing.
+ * Each activated column cycles through shade characters (░▒▓█) independently.
+ *
+ * Out phase: columns sweep, building up shade chars until solid █ (covers old content).
+ * In phase: columns sweep in reverse, dissolving █ back through shades to empty (reveals new content).
+ */
+import { Box, Text } from 'ink';
+import { useState, useEffect, useRef } from 'react';
+/** Shade characters in build-up order (light → solid). */
+const SHADES = ['░', '▒', '▓', '█'];
+/** How many ticks each shade character displays before advancing. */
+const TICKS_PER_SHADE = 2;
+/** Total ticks a column needs to complete its shade cycle. */
+const SHADE_CYCLE_TICKS = SHADES.length * TICKS_PER_SHADE;
+function easeInOutCirc(t) {
+    if (t < 0.5) {
+        return (1 - Math.sqrt(1 - 4 * t * t)) / 2;
+    }
+    return (Math.sqrt(1 - (2 * t - 2) ** 2) + 1) / 2;
+}
+var TransitionPhase;
+(function (TransitionPhase) {
+    TransitionPhase["Idle"] = "idle";
+    TransitionPhase["Out"] = "out";
+    TransitionPhase["In"] = "in";
+})(TransitionPhase || (TransitionPhase = {}));
+export const DissolveTransition = ({ transitionKey, width, height, children, direction = 'left', duration = 2, }) => {
+    const [phase, setPhase] = useState(TransitionPhase.Idle);
+    const [tick, setTick] = useState(0);
+    const [activeDir, setActiveDir] = useState(direction);
+    const prevKey = useRef(transitionKey);
+    const pendingChildren = useRef(children);
+    const [displayChildren, setDisplayChildren] = useState(children);
+    // Track when each column was activated (tick number), -1 means not yet.
+    const columnActivationTick = useRef([]);
+    useEffect(() => {
+        if (transitionKey !== prevKey.current) {
+            prevKey.current = transitionKey;
+            pendingChildren.current = children;
+            setActiveDir(direction);
+            setPhase(TransitionPhase.Out);
+            setTick(0);
+            columnActivationTick.current = new Array(width).fill(-1);
+        }
+        else if (phase === TransitionPhase.Idle) {
+            setDisplayChildren(children);
+        }
+    }, [transitionKey, children, width, height, phase, direction]);
+    useEffect(() => {
+        if (phase === TransitionPhase.Idle)
+            return;
+        const timer = setInterval(() => {
+            setTick((prev) => prev + 1);
+        }, duration);
+        return () => clearInterval(timer);
+    }, [phase, duration]);
+    // Easer steps = width: roughly one column activates per tick.
+    // This keeps the sweep front tight (only a few columns in-flight at once).
+    const easerSteps = width;
+    // A phase ends when the easer has completed AND all columns have finished their shade cycle.
+    const maxTicks = easerSteps + SHADE_CYCLE_TICKS;
+    useEffect(() => {
+        if (phase === TransitionPhase.Idle)
+            return;
+        if (tick >= maxTicks) {
+            if (phase === TransitionPhase.Out) {
+                setDisplayChildren(pendingChildren.current);
+                setPhase(TransitionPhase.In);
+                setTick(0);
+                columnActivationTick.current = new Array(width).fill(-1);
+            }
+            else {
+                setPhase(TransitionPhase.Idle);
+            }
+        }
+    }, [tick, phase, maxTicks, width]);
+    if (phase === TransitionPhase.Idle) {
+        return _jsx(_Fragment, { children: displayChildren });
+    }
+    // --- SequenceEaser logic ---
+    // Map current tick to easer progress (0..1), apply easing,
+    // then determine how many columns should be activated.
+    const easerProgress = Math.min(tick / easerSteps, 1);
+    const easedValue = easeInOutCirc(easerProgress);
+    const activatedCount = Math.floor(easedValue * width);
+    // Build column order based on direction.
+    // "left" means sweep moves left-to-right; "right" means right-to-left.
+    // TTE's COLUMN_RIGHT_TO_LEFT activates rightmost first.
+    const columnOrder = [];
+    if (activeDir === 'left') {
+        for (let c = width - 1; c >= 0; c--)
+            columnOrder.push(c);
+    }
+    else {
+        for (let c = 0; c < width; c++)
+            columnOrder.push(c);
+    }
+    // Activate columns that should be active but aren't yet.
+    for (let i = 0; i < activatedCount && i < columnOrder.length; i++) {
+        const col = columnOrder[i];
+        if (columnActivationTick.current[col] === -1) {
+            columnActivationTick.current[col] = tick;
+        }
+    }
+    // --- Render frame ---
+    const rows = [];
+    for (let r = 0; r < height; r++) {
+        let row = '';
+        for (let c = 0; c < width; c++) {
+            const activatedAt = columnActivationTick.current[c];
+            let char;
+            if (activatedAt === -1) {
+                // Not yet activated
+                char = phase === TransitionPhase.Out ? ' ' : '█';
+            }
+            else {
+                // Column is activated — determine shade based on ticks since activation
+                const age = tick - activatedAt;
+                const shadeIndex = Math.min(Math.floor(age / TICKS_PER_SHADE), SHADES.length - 1);
+                if (phase === TransitionPhase.Out) {
+                    // Building up: ░ → ▒ → ▓ → █
+                    char = SHADES[shadeIndex];
+                }
+                else {
+                    // Dissolving: █ → ▓ → ▒ → ░ → space
+                    if (shadeIndex >= SHADES.length - 1 && age >= SHADE_CYCLE_TICKS) {
+                        char = ' ';
+                    }
+                    else {
+                        char = SHADES[SHADES.length - 1 - shadeIndex];
+                    }
+                }
+            }
+            row += char;
+        }
+        rows.push(row);
+    }
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: rows.map((row, i) => (_jsx(Text, { dimColor: true, children: row }, i))) }));
+};

package/dist/src/ui/tui/primitives/EventPlanViewer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * EventPlanViewer — Renders a table of planned analytics events.
+ */
+import type { PlannedEvent } from '../store.js';
+interface EventPlanViewerProps {
+    events: PlannedEvent[];
+}
+export declare const EventPlanViewer: ({ events }: EventPlanViewerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/EventPlanViewer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EventPlanViewer — Renders a table of planned analytics events.
+ */
+import { Box, Text } from 'ink';
+import { Colors } from '../styles.js';
+export const EventPlanViewer = ({ events }) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Event plan" }), _jsx(Box, { height: 1 }), events.map((event) => (_jsxs(Box, { children: [_jsx(Text, { bold: true, children: event.name }), _jsxs(Text, { color: Colors.muted, children: [" ", event.description] })] }, event.name)))] }));
+};

package/dist/src/ui/tui/primitives/KagiSmallWebViewer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * KagiSmallWebViewer — Recent posts from the Kagi Small Web feed.
+ *
+ * Fetches from the Kagi Atom feed on mount.
+ * Each post has a [1]–[0] numeral; typing it opens the post in the browser.
+ */
+export declare const KagiSmallWebViewer: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/tui/primitives/KagiSmallWebViewer.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * KagiSmallWebViewer — Recent posts from the Kagi Small Web feed.
+ *
+ * Fetches from the Kagi Atom feed on mount.
+ * Each post has a [1]–[0] numeral; typing it opens the post in the browser.
+ */
+import { Box, Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { xml2js } from 'xml-js';
+import { useScreenInput } from '../hooks/useScreenInput.js';
+import { Colors } from '../styles.js';
+const FEED_URL = 'https://kagi.com/api/v1/smallweb/feed/?limit=100';
+function parseAtom(xml) {
+    const root = xml2js(xml, { compact: true });
+    const feed = root['feed'];
+    if (!feed)
+        return [];
+    const rawEntries = feed['entry'];
+    const entries = Array.isArray(rawEntries)
+        ? rawEntries
+        : rawEntries
+            ? [rawEntries]
+            : [];
+    return entries.map((e) => {
+        const text = (node) => {
+            if (!node)
+                return '';
+            const n = node;
+            return n['_text'] ?? '';
+        };
+        const attr = (node, key) => {
+            if (!node)
+                return '';
+            const n = node;
+            const attrs = n['_attributes'];
+            return attrs?.[key] ?? '';
+        };
+        return {
+            title: text(e['title']),
+            url: attr(e['link'], 'href'),
+            author: text(e['author']?.['name']),
+            published: text(e['published']),
+            summary: text(e['summary']),
+        };
+    });
+}
+export const KagiSmallWebViewer = () => {
+    const [entries, setEntries] = useState([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        void (async () => {
+            try {
+                const res = await fetch(FEED_URL);
+                const xml = await res.text();
+                const all = parseAtom(xml);
+                const shuffled = all.sort(() => Math.random() - 0.5).slice(0, 10);
+                setEntries(shuffled);
+            }
+            catch {
+                // Silently fail — tab stays empty
+            }
+            setLoading(false);
+        })();
+    }, []);
+    useScreenInput((input) => {
+        const num = parseInt(input, 10);
+        if (isNaN(num))
+            return;
+        const index = num === 0 ? 9 : num - 1;
+        const entry = entries[index];
+        if (!entry)
+            return;
+        void import('child_process').then(({ exec }) => {
+            exec(`open "${entry.url}" 2>/dev/null || xdg-open "${entry.url}" 2>/dev/null`);
+        });
+    });
+    if (loading) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: Colors.muted, children: "Loading Kagi Small Web..." }) }));
+    }
+    if (entries.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: Colors.muted, children: "Could not load Kagi Small Web." }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(Text, { bold: true, color: Colors.accent, children: "Kagi Small Web" }), _jsx(Box, { height: 1 }), entries.map((entry, i) => {
+                const key = i === 9 ? '0' : String(i + 1);
+                const date = new Date(entry.published);
+                const dateStr = date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                });
+                const host = (() => {
+                    try {
+                        return new URL(entry.url).hostname;
+                    }
+                    catch {
+                        return '';
+                    }
+                })();
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: Colors.accent, bold: true, children: ["[", key, "]"] }), _jsxs(Text, { bold: true, children: [" ", entry.title] })] }), _jsx(Box, { marginLeft: 4, children: _jsxs(Text, { color: Colors.muted, children: [entry.author || host, dateStr ? `, ${dateStr}` : ''] }) })] }, entry.url));
+            })] }));
+};

package/dist/src/ui/tui/primitives/LoadingBox.d.ts

@@ -0,0 +1,8 @@
+/**
+ * LoadingBox — Spinner with message.
+ */
+interface LoadingBoxProps {
+    message: string;
+}
+export declare const LoadingBox: ({ message }: LoadingBoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/LoadingBox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LoadingBox — Spinner with message.
+ */
+import { Box, Text } from 'ink';
+import { Spinner } from '@inkjs/ui';
+export const LoadingBox = ({ message }) => {
+    return (_jsxs(Box, { gap: 1, children: [_jsx(Spinner, {}), _jsx(Text, { children: message })] }));
+};

package/dist/src/ui/tui/primitives/LogViewer.d.ts

@@ -0,0 +1,11 @@
+/**
+ * LogViewer — Real-time log tail, pinned to available terminal height.
+ * Only renders the last N lines that fit on screen.
+ */
+interface LogViewerProps {
+    filePath: string;
+    /** Fixed visible height. Defaults to terminal rows minus chrome. */
+    height?: number;
+}
+export declare const LogViewer: ({ filePath, height }: LogViewerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/LogViewer.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LogViewer — Real-time log tail, pinned to available terminal height.
+ * Only renders the last N lines that fit on screen.
+ */
+import { Box, Text } from 'ink';
+import { Colors } from '../styles.js';
+import { useState, useEffect } from 'react';
+import * as fs from 'fs';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
+/** Rows consumed by ConsoleView border + TitleBar + spacer + separator + input + tab bar chrome */
+const CHROME_ROWS = 8;
+export const LogViewer = ({ filePath, height }) => {
+    const [, rows] = useStdoutDimensions();
+    const visibleLines = height ?? Math.max(5, rows - CHROME_ROWS);
+    const [lines, setLines] = useState([]);
+    useEffect(() => {
+        const readTail = () => {
+            try {
+                const content = fs.readFileSync(filePath, 'utf-8');
+                const allLines = content.split('\n');
+                setLines(allLines.slice(-visibleLines));
+            }
+            catch {
+                setLines(['(No log file found)']);
+            }
+        };
+        readTail();
+        let watcher;
+        try {
+            watcher = fs.watch(filePath, () => {
+                readTail();
+            });
+        }
+        catch {
+            // File might not exist yet — retry when it appears
+            const interval = setInterval(() => {
+                try {
+                    fs.accessSync(filePath);
+                    readTail();
+                    clearInterval(interval);
+                    watcher = fs.watch(filePath, () => readTail());
+                }
+                catch {
+                    // Still waiting
+                }
+            }, 1000);
+            return () => clearInterval(interval);
+        }
+        return () => {
+            watcher?.close();
+        };
+    }, [filePath, visibleLines]);
+    return (_jsx(Box, { flexDirection: "column", height: visibleLines, children: lines.map((line, i) => (_jsx(Text, { color: Colors.muted, wrap: "truncate", children: line }, i))) }));
+};

package/dist/src/ui/tui/primitives/PickerMenu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * PickerMenu — Single and multi select.
+ * Single mode: custom renderer with small triangle indicator.
+ * Multi mode: checkbox glyphs with space to toggle.
+ */
+interface PickerOption<T> {
+    label: string;
+    value: T;
+    hint?: string;
+}
+interface PickerMenuProps<T> {
+    message?: string;
+    options: PickerOption<T>[];
+    mode?: 'single' | 'multi';
+    centered?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    onSelect: (value: T | T[]) => void;
+}
+export declare const PickerMenu: <T>({ message, options, mode, centered, columns, onSelect, }: PickerMenuProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/PickerMenu.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PickerMenu — Single and multi select.
+ * Single mode: custom renderer with small triangle indicator.
+ * Multi mode: checkbox glyphs with space to toggle.
+ */
+import { Box, Text } from 'ink';
+import { useState, useRef } from 'react';
+import { Icons, Colors } from '../styles.js';
+import { PromptLabel } from './PromptLabel.js';
+import { useScreenInput } from '../hooks/useScreenInput.js';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
+const PICKER_CHROME_ROWS = 16;
+export const PickerMenu = ({ message, options, mode = 'single', centered = false, columns = 1, onSelect, }) => {
+    if (mode === 'multi') {
+        return (_jsx(MultiPickerMenu, { message: message, options: options, centered: centered, columns: columns, onSelect: onSelect }));
+    }
+    return (_jsx(SinglePickerMenu, { message: message, options: options, centered: centered, columns: columns, onSelect: onSelect }));
+};
+/** Returns the number key label for an option index (1-based, 0 = tenth). */
+function numKey(index) {
+    if (index === 9)
+        return '0';
+    if (index < 9)
+        return String(index + 1);
+    return null;
+}
+/** Render a single picker item row. */
+const PickerItem = ({ opt, isFocused, index, }) => {
+    const label = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+    const key = numKey(index);
+    return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isFocused ? Colors.accent : Colors.muted, children: isFocused ? Icons.triangleSmallRight : ' ' }), key !== null && (_jsxs(Text, { color: isFocused ? Colors.accent : Colors.muted, children: ["[", key, "]"] })), _jsx(Text, { color: isFocused ? Colors.accent : Colors.muted, bold: isFocused, children: label })] }));
+};
+/** Custom single-select with triangle indicator and accent highlight.
+ *  Single-column lists that exceed the terminal height scroll automatically. */
+const SinglePickerMenu = ({ message, options, centered = false, columns = 1, onSelect, }) => {
+    const [focused, setFocused] = useState(0);
+    const [, termRows] = useStdoutDimensions();
+    const scrollRef = useRef(0);
+    const rowsPerCol = Math.ceil(options.length / columns);
+    const maxVisible = columns === 1
+        ? Math.min(rowsPerCol, Math.max(5, termRows - PICKER_CHROME_ROWS))
+        : rowsPerCol;
+    const needsScroll = rowsPerCol > maxVisible;
+    if (needsScroll) {
+        if (focused < scrollRef.current) {
+            scrollRef.current = focused;
+        }
+        else if (focused >= scrollRef.current + maxVisible) {
+            scrollRef.current = focused - maxVisible + 1;
+        }
+    }
+    else {
+        scrollRef.current = 0;
+    }
+    const scrollOffset = scrollRef.current;
+    useScreenInput((input, key) => {
+        const col = Math.floor(focused / rowsPerCol);
+        const row = focused % rowsPerCol;
+        // Number keys 1–9 select options 0–8; 0 selects option 9
+        const digit = parseInt(input, 10);
+        if (!isNaN(digit) && !key.ctrl && !key.meta) {
+            const idx = digit === 0 ? 9 : digit - 1;
+            const opt = options[idx];
+            if (opt) {
+                onSelect(opt.value);
+                return;
+            }
+        }
+        if (key.upArrow) {
+            if (row > 0) {
+                setFocused(col * rowsPerCol + row - 1);
+            }
+            else {
+                setFocused(Math.min(col * rowsPerCol + rowsPerCol - 1, options.length - 1));
+            }
+        }
+        if (key.downArrow) {
+            const next = col * rowsPerCol + row + 1;
+            if (next < options.length && row + 1 < rowsPerCol) {
+                setFocused(next);
+            }
+            else {
+                setFocused(col * rowsPerCol);
+            }
+        }
+        if (key.leftArrow && columns > 1) {
+            const prevCol = col > 0 ? col - 1 : columns - 1;
+            setFocused(Math.min(prevCol * rowsPerCol + row, options.length - 1));
+        }
+        if (key.rightArrow && columns > 1) {
+            const nextCol = col < columns - 1 ? col + 1 : 0;
+            setFocused(Math.min(nextCol * rowsPerCol + row, options.length - 1));
+        }
+        if (key.return) {
+            const selected = options[focused];
+            if (selected) {
+                onSelect(selected.value);
+            }
+        }
+    });
+    const align = centered ? 'center' : undefined;
+    if (needsScroll) {
+        const hasAbove = scrollOffset > 0;
+        const hasBelow = scrollOffset + maxVisible < options.length;
+        const visible = options.slice(scrollOffset, scrollOffset + maxVisible);
+        return (_jsxs(Box, { flexDirection: "column", alignItems: align, children: [_jsx(PromptLabel, { message: message }), hasAbove && (_jsxs(Text, { color: Colors.muted, children: ['  \u2191 ', scrollOffset, " more"] })), visible.map((opt, i) => (_jsx(PickerItem, { opt: opt, index: scrollOffset + i, isFocused: scrollOffset + i === focused }, scrollOffset + i))), hasBelow && (_jsxs(Text, { color: Colors.muted, children: ['  \u2193 ', options.length - scrollOffset - maxVisible, " more"] }))] }));
+    }
+    // Multi-column / short-list: render all items in column-first grid
+    const columnArrays = [];
+    for (let c = 0; c < columns; c++) {
+        columnArrays.push(options.slice(c * rowsPerCol, c * rowsPerCol + rowsPerCol));
+    }
+    return (_jsxs(Box, { flexDirection: "column", alignItems: align, children: [_jsx(PromptLabel, { message: message }), _jsx(Box, { flexDirection: "row", gap: 4, children: columnArrays.map((colOpts, colIdx) => (_jsx(Box, { flexDirection: "column", children: colOpts.map((opt, rowIdx) => (_jsx(PickerItem, { opt: opt, index: colIdx * rowsPerCol + rowIdx, isFocused: colIdx * rowsPerCol + rowIdx === focused }, colIdx * rowsPerCol + rowIdx))) }, colIdx))) })] }));
+};
+/** Custom multi-select with checkbox glyphs and accent highlight. */
+const MultiPickerMenu = ({ message, options, centered = false, columns = 1, onSelect, }) => {
+    const [focused, setFocused] = useState(0);
+    const [selected, setSelected] = useState(new Set());
+    const rows = Math.ceil(options.length / columns);
+    useScreenInput((input, key) => {
+        const col = Math.floor(focused / rows);
+        const row = focused % rows;
+        // Number keys 1–9 toggle options 0–8; 0 toggles option 9
+        const digit = parseInt(input, 10);
+        if (!isNaN(digit) && !key.ctrl && !key.meta) {
+            const idx = digit === 0 ? 9 : digit - 1;
+            if (idx < options.length) {
+                setFocused(idx);
+                setSelected((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(idx)) {
+                        next.delete(idx);
+                    }
+                    else {
+                        next.add(idx);
+                    }
+                    return next;
+                });
+            }
+            return;
+        }
+        if (key.upArrow) {
+            if (row > 0) {
+                setFocused(col * rows + row - 1);
+            }
+            else {
+                setFocused(Math.min(col * rows + rows - 1, options.length - 1));
+            }
+        }
+        if (key.downArrow) {
+            const next = col * rows + row + 1;
+            if (next < options.length && row + 1 < rows) {
+                setFocused(next);
+            }
+            else {
+                setFocused(col * rows);
+            }
+        }
+        if (key.leftArrow && columns > 1) {
+            const prevCol = col > 0 ? col - 1 : columns - 1;
+            setFocused(Math.min(prevCol * rows + row, options.length - 1));
+        }
+        if (key.rightArrow && columns > 1) {
+            const nextCol = col < columns - 1 ? col + 1 : 0;
+            setFocused(Math.min(nextCol * rows + row, options.length - 1));
+        }
+        if (input === ' ') {
+            setSelected((prev) => {
+                const next = new Set(prev);
+                if (next.has(focused)) {
+                    next.delete(focused);
+                }
+                else {
+                    next.add(focused);
+                }
+                return next;
+            });
+        }
+        if (key.return) {
+            const values = [...selected].sort().map((i) => options[i].value);
+            if (values.length === 0) {
+                // Nothing toggled — fall back to the focused item so Enter always submits
+                const focusedOpt = options[focused];
+                if (focusedOpt)
+                    onSelect([focusedOpt.value]);
+            }
+            else {
+                onSelect(values);
+            }
+        }
+    });
+    const columnArrays = [];
+    for (let c = 0; c < columns; c++) {
+        columnArrays.push(options.slice(c * rows, c * rows + rows));
+    }
+    return (_jsxs(Box, { flexDirection: "column", alignItems: centered ? 'center' : undefined, children: [_jsx(PromptLabel, { message: message }), _jsx(Text, { color: Colors.muted, children: " (space to toggle, enter to submit)" }), _jsx(Box, { flexDirection: "row", gap: 4, marginLeft: centered ? 0 : 2, marginTop: 1, children: columnArrays.map((colOpts, colIdx) => (_jsx(Box, { flexDirection: "column", children: colOpts.map((opt, rowIdx) => {
+                        const flatIdx = colIdx * rows + rowIdx;
+                        const isFocused = flatIdx === focused;
+                        const isSelected = selected.has(flatIdx);
+                        const label = opt.hint ? `${opt.label} (${opt.hint})` : opt.label;
+                        const checkbox = isSelected
+                            ? Icons.squareFilled
+                            : Icons.squareOpen;
+                        const key = numKey(flatIdx);
+                        return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isFocused
+                                        ? Colors.accent
+                                        : isSelected
+                                            ? 'white'
+                                            : Colors.muted, children: checkbox }), key !== null && (_jsxs(Text, { color: isFocused ? Colors.accent : Colors.muted, children: ["[", key, "]"] })), _jsx(Text, { color: isFocused ? Colors.accent : Colors.muted, bold: isFocused, children: label })] }, flatIdx));
+                    }) }, colIdx))) })] }));
+};

package/dist/src/ui/tui/primitives/ProgressList.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ProgressList — Reusable task checklist with status icons.
+ * Extracted from StatusTab logic.
+ */
+export interface ProgressItem {
+    label: string;
+    activeForm?: string;
+    status: 'pending' | 'in_progress' | 'completed';
+}
+interface ProgressListProps {
+    items: ProgressItem[];
+    title?: string;
+}
+export declare const ProgressList: ({ items, title }: ProgressListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/ProgressList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProgressList — Reusable task checklist with status icons.
+ * Extracted from StatusTab logic.
+ */
+import { Box, Text } from 'ink';
+import { Spinner } from '@inkjs/ui';
+import { Colors, Icons } from '../styles.js';
+import { LoadingBox } from './LoadingBox.js';
+export const ProgressList = ({ items, title }) => {
+    const completed = items.filter((t) => t.status === 'completed').length;
+    const total = items.length;
+    return (_jsxs(Box, { flexDirection: "column", children: [title && (_jsxs(_Fragment, { children: [_jsx(Text, { bold: true, children: title }), _jsx(Text, { children: " " })] })), items.length === 0 && _jsx(LoadingBox, { message: "Analyzing project..." }), items.map((item, i) => {
+                const icon = item.status === 'completed'
+                    ? Icons.squareFilled
+                    : item.status === 'in_progress'
+                        ? Icons.triangleRight
+                        : Icons.squareOpen;
+                const color = item.status === 'completed'
+                    ? Colors.success
+                    : item.status === 'in_progress'
+                        ? Colors.primary
+                        : Colors.muted;
+                const label = item.status === 'in_progress' && item.activeForm
+                    ? item.activeForm
+                    : item.label;
+                return (_jsxs(Text, { children: [_jsx(Text, { color: color, children: icon }), _jsxs(Text, { color: item.status === 'pending' ? Colors.muted : undefined, children: [' ', label] })] }, i));
+            }), total > 0 && (_jsxs(Box, { marginTop: 1, gap: 1, children: [completed < total && _jsx(Spinner, {}), _jsxs(Text, { color: Colors.muted, children: ["Progress: ", completed, "/", total, " completed"] })] }))] }));
+};

package/dist/src/ui/tui/primitives/PromptLabel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * PromptLabel — Compact inline label for input prompts.
+ *
+ * Renders: [!] message
+ * where [!] is black text on accent background.
+ */
+interface PromptLabelProps {
+    message?: string;
+}
+export declare const PromptLabel: ({ message }: PromptLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/tui/primitives/PromptLabel.js

@@ -0,0 +1,12 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * PromptLabel — Compact inline label for input prompts.
+ *
+ * Renders: [!] message
+ * where [!] is black text on accent background.
+ */
+import { Box, Text } from 'ink';
+import { Colors } from '../styles.js';
+export const PromptLabel = ({ message }) => {
+    return (_jsx(Box, { children: _jsxs(Text, { bold: true, color: Colors.accent, children: [' ', message] }) }));
+};