@stigg/terminal 0.0.1-alpha

package/dist/ui/tui/hooks/useKeyBindings.d.ts

@@ -0,0 +1,14 @@
+import { type KeyBinding } from './keyboard-hints-utils.js';
+interface UseKeyBindingsOptions {
+    isActive?: boolean;
+}
+/**
+ * Declarative key bindings + automatic hint registration.
+ *
+ * Each binding declares `{match, label, action, handler}`. We wire `useInput`
+ * to dispatch the matching binding's handler, AND register `{label, action,
+ * priority}` with the KeyboardHintsProvider so the bottom hints bar updates
+ * automatically when this component mounts/unmounts.
+ */
+export declare function useKeyBindings(id: string, bindings: KeyBinding[], opts?: UseKeyBindingsOptions): void;
+export {};

package/dist/ui/tui/hooks/useKeyBindings.js

@@ -0,0 +1,44 @@
+import { useInput } from 'ink';
+import { useEffect, useMemo } from 'react';
+import { defaultPriorityFor, matchesKey, } from './keyboard-hints-utils.js';
+import { useKeyboardHintsContext } from './useKeyboardHints.js';
+/**
+ * Declarative key bindings + automatic hint registration.
+ *
+ * Each binding declares `{match, label, action, handler}`. We wire `useInput`
+ * to dispatch the matching binding's handler, AND register `{label, action,
+ * priority}` with the KeyboardHintsProvider so the bottom hints bar updates
+ * automatically when this component mounts/unmounts.
+ */
+export function useKeyBindings(id, bindings, opts = {}) {
+    const { register, unregister } = useKeyboardHintsContext();
+    const isActive = opts.isActive ?? true;
+    const hintsKey = JSON.stringify(bindings.map((b) => [b.label, b.action, b.priority]));
+    const hints = useMemo(() => bindings.map((b) => {
+        const firstMatch = Array.isArray(b.match) ? b.match[0] : b.match;
+        const priority = b.priority ?? (firstMatch !== undefined ? defaultPriorityFor(firstMatch) : undefined);
+        return { label: b.label, action: b.action, priority };
+    }), 
+    // hintsKey captures the relevant shape of bindings — stable across renders
+    // when callers pass equivalent arrays.
+    [hintsKey]);
+    useEffect(() => {
+        if (!isActive) {
+            unregister(id);
+            return undefined;
+        }
+        register(id, hints);
+        return () => {
+            unregister(id);
+        };
+    }, [id, hints, isActive, register, unregister]);
+    useInput((input, key) => {
+        for (const b of bindings) {
+            const matches = Array.isArray(b.match) ? b.match : [b.match];
+            if (matches.some((m) => matchesKey(m, input, key))) {
+                b.handler(input, key);
+                return;
+            }
+        }
+    }, { isActive });
+}

package/dist/ui/tui/hooks/useKeyboardHints.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type KeyHint } from './keyboard-hints-utils.js';
+interface KeyboardHintsContextValue {
+    register: (id: string, hints: KeyHint[]) => void;
+    unregister: (id: string) => void;
+    hints: KeyHint[];
+}
+interface ProviderProps {
+    children: React.ReactNode;
+}
+export declare function KeyboardHintsProvider({ children }: ProviderProps): React.ReactElement;
+export declare function useKeyboardHintsContext(): KeyboardHintsContextValue;
+export {};

package/dist/ui/tui/hooks/useKeyboardHints.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { dedupeAndSortHints } from './keyboard-hints-utils.js';
+const Ctx = createContext(null);
+export function KeyboardHintsProvider({ children }) {
+    const [bag, setBag] = useState(() => new Map());
+    const register = useCallback((id, hints) => {
+        setBag((prev) => {
+            const next = new Map(prev);
+            next.set(id, hints);
+            return next;
+        });
+    }, []);
+    const unregister = useCallback((id) => {
+        setBag((prev) => {
+            if (!prev.has(id))
+                return prev;
+            const next = new Map(prev);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const hints = useMemo(() => dedupeAndSortHints(bag), [bag]);
+    const value = useMemo(() => ({ register, unregister, hints }), [register, unregister, hints]);
+    return _jsx(Ctx.Provider, { value: value, children: children });
+}
+export function useKeyboardHintsContext() {
+    const ctx = useContext(Ctx);
+    if (!ctx) {
+        // Allow use outside provider for testing / non-TUI rendering.
+        return {
+            register: () => { },
+            unregister: () => { },
+            hints: [],
+        };
+    }
+    return ctx;
+}

package/dist/ui/tui/hooks/useStdoutDimensions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the terminal's [columns, rows] and re-renders on resize.
+ *
+ * Ink's built-in `useStdout` doesn't trigger re-renders on resize — this hook
+ * subscribes to the `resize` event on the underlying stream and forces a state
+ * update so the entire layout reflows.
+ */
+export declare function useStdoutDimensions(): readonly [number, number];

package/dist/ui/tui/hooks/useStdoutDimensions.js

@@ -0,0 +1,28 @@
+import { useStdout } from 'ink';
+import { useEffect, useState } from 'react';
+/**
+ * Returns the terminal's [columns, rows] and re-renders on resize.
+ *
+ * Ink's built-in `useStdout` doesn't trigger re-renders on resize — this hook
+ * subscribes to the `resize` event on the underlying stream and forces a state
+ * update so the entire layout reflows.
+ */
+export function useStdoutDimensions() {
+    const { stdout } = useStdout();
+    const [size, setSize] = useState(() => [
+        stdout?.columns ?? 80,
+        stdout?.rows ?? 24,
+    ]);
+    useEffect(() => {
+        if (!stdout)
+            return undefined;
+        const onResize = () => {
+            setSize([stdout.columns ?? 80, stdout.rows ?? 24]);
+        };
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [stdout]);
+    return size;
+}

package/dist/ui/tui/primitives/BlinkingLabel.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface BlinkingLabelProps {
+    text: string;
+    intervalMs?: number;
+    color?: string;
+    dimColor?: boolean;
+    bold?: boolean;
+    /** Visual cell width to reserve. Lets callers pad past JS string length when
+     *  the label contains emoji that render as 2 cells. */
+    padWidth?: number;
+}
+/**
+ * Hard blink — text alternates between fully visible and fully hidden.
+ * Width is preserved during the off-frame via space padding so neighbours
+ * don't reflow. Stays steady (no interval) when animations are disabled
+ * (CI / NO_COLOR / dumb terminal / non-TTY).
+ */
+export declare function BlinkingLabel({ text, intervalMs, color, dimColor, bold, padWidth, }: BlinkingLabelProps): React.ReactElement;
+export {};

package/dist/ui/tui/primitives/BlinkingLabel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect, useState } from 'react';
+import { Colors, shouldRenderAnimation } from '../../theme.js';
+/**
+ * Hard blink — text alternates between fully visible and fully hidden.
+ * Width is preserved during the off-frame via space padding so neighbours
+ * don't reflow. Stays steady (no interval) when animations are disabled
+ * (CI / NO_COLOR / dumb terminal / non-TTY).
+ */
+export function BlinkingLabel({ text, intervalMs = 600, color = Colors.accent, dimColor, bold, padWidth, }) {
+    const [visible, setVisible] = useState(true);
+    const animate = shouldRenderAnimation();
+    useEffect(() => {
+        if (!animate)
+            return undefined;
+        const id = setInterval(() => {
+            setVisible((v) => !v);
+        }, intervalMs);
+        return () => clearInterval(id);
+    }, [animate, intervalMs]);
+    const blankWidth = padWidth ?? text.length;
+    const display = visible ? text : ' '.repeat(blankWidth);
+    return (_jsx(Text, { color: color, dimColor: dimColor, bold: bold, children: display }));
+}

package/dist/ui/tui/primitives/ConfirmPrompt.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface ConfirmPromptProps {
+    id: string;
+    message?: string;
+    defaultAnswer?: 'yes' | 'no';
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/**
+ * y/n prompt. Enter triggers the default answer (yes by default). Esc is
+ * intentionally not bound here — it bubbles up to the wizard host so the
+ * standard "esc → back" navigation works on confirm-style steps too.
+ * Registers hints: `y yes`, `n no`, `enter <default>`.
+ */
+export declare function ConfirmPrompt({ id, message, defaultAnswer, onConfirm, onCancel, }: ConfirmPromptProps): React.ReactElement;
+export {};

package/dist/ui/tui/primitives/ConfirmPrompt.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Colors } from '../../theme.js';
+import { KeyMatch } from '../hooks/keyboard-hints-utils.js';
+import { useKeyBindings } from '../hooks/useKeyBindings.js';
+import { PromptLabel } from './PromptLabel.js';
+/**
+ * y/n prompt. Enter triggers the default answer (yes by default). Esc is
+ * intentionally not bound here — it bubbles up to the wizard host so the
+ * standard "esc → back" navigation works on confirm-style steps too.
+ * Registers hints: `y yes`, `n no`, `enter <default>`.
+ */
+export function ConfirmPrompt({ id, message, defaultAnswer = 'yes', onConfirm, onCancel, }) {
+    const bindings = [
+        {
+            match: 'y',
+            label: 'y',
+            action: 'yes',
+            handler: onConfirm,
+        },
+        {
+            match: 'n',
+            label: 'n',
+            action: 'no',
+            handler: onCancel,
+        },
+        {
+            match: KeyMatch.Return,
+            label: 'enter',
+            action: defaultAnswer,
+            handler: defaultAnswer === 'yes' ? onConfirm : onCancel,
+        },
+    ];
+    useKeyBindings(`confirm:${id}`, bindings);
+    return (_jsxs(Box, { flexDirection: "column", children: [message && _jsx(PromptLabel, { children: message }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: Colors.muted, children: `[${defaultAnswer === 'yes' ? 'Y/n' : 'y/N'}]` }), _jsx(Text, { dimColor: true, children: " \u2014 press y/n or enter" })] }) })] }));
+}

package/dist/ui/tui/primitives/KeyboardHintsBar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function KeyboardHintsBar(): React.ReactElement;

package/dist/ui/tui/primitives/KeyboardHintsBar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { Colors } from '../../theme.js';
+import { useKeyboardHintsContext } from '../hooks/useKeyboardHints.js';
+export function KeyboardHintsBar() {
+    const { hints } = useKeyboardHintsContext();
+    return (_jsx(Box, { height: 1, paddingX: 1, children: hints.map((hint, i) => (_jsxs(Box, { marginRight: i < hints.length - 1 ? 2 : 0, children: [_jsx(Text, { bold: true, color: Colors.muted, children: hint.label }), _jsxs(Text, { dimColor: true, children: [" ", hint.action] })] }, `${hint.label}-${hint.action}-${i}`))) }));
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+export interface PickerOption<T> {
+    label: string;
+    value: T;
+    /** Short inline trailing text (rendered same-line, dimmed). */
+    hint?: string;
+    /** Dimmed secondary line rendered under the label (e.g. a long path). */
+    description?: string;
+    disabled?: boolean;
+}
+interface BasePickerMenuProps<T> {
+    id: string;
+    message?: string;
+    options: PickerOption<T>[];
+    centered?: boolean;
+    optionMarginBottom?: number;
+    /** When set, render at most this many options at a time and scroll the
+     *  viewport as focus moves out of view. */
+    visibleCount?: number;
+}
+interface SinglePickerMenuProps<T> extends BasePickerMenuProps<T> {
+    mode?: 'single';
+    defaultValue?: T;
+    /** When true, prefix each label with `[N] ` and bind number keys 1..9 to
+     *  jump-select the matching option. */
+    numbered?: boolean;
+    onSelect: (value: T) => void;
+    onChange?: (value: T) => void;
+}
+interface MultiPickerMenuProps<T> extends BasePickerMenuProps<T> {
+    mode: 'multi';
+    defaultValue?: T[];
+    onSelect: (values: T[]) => void;
+    onChange?: (values: T[]) => void;
+}
+export type PickerMenuProps<T> = SinglePickerMenuProps<T> | MultiPickerMenuProps<T>;
+export declare function PickerMenu<T>(props: PickerMenuProps<T>): React.ReactElement;
+export {};

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

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useEffect, useState } from 'react';
+import { Colors, Icons } from '../../theme.js';
+import { KeyMatch } from '../hooks/keyboard-hints-utils.js';
+import { useKeyBindings } from '../hooks/useKeyBindings.js';
+import { PromptLabel } from './PromptLabel.js';
+function findInitialIndex(options, defaultValue) {
+    if (defaultValue === undefined)
+        return 0;
+    const i = options.findIndex((o) => o.value === defaultValue);
+    return i >= 0 ? i : 0;
+}
+export function PickerMenu(props) {
+    const { id, message, options, centered, optionMarginBottom = 0, visibleCount } = props;
+    const mode = props.mode ?? 'single';
+    const [focused, setFocused] = useState(() => mode === 'single'
+        ? findInitialIndex(options, props.defaultValue)
+        : 0);
+    const windowSize = visibleCount && visibleCount > 0 ? Math.min(visibleCount, options.length) : options.length;
+    const [windowStart, setWindowStart] = useState(() => clampWindowStart(focused, windowSize, options.length));
+    useEffect(() => {
+        setWindowStart((start) => {
+            if (focused < start)
+                return focused;
+            if (focused >= start + windowSize)
+                return focused - windowSize + 1;
+            return clampWindowStart(start, windowSize, options.length);
+        });
+    }, [focused, windowSize, options.length]);
+    const [selected, setSelected] = useState(() => {
+        if (mode === 'multi') {
+            const dv = props.defaultValue;
+            return new Set(Array.isArray(dv) ? dv : []);
+        }
+        return new Set();
+    });
+    const move = (delta) => {
+        if (options.length === 0)
+            return;
+        setFocused((f) => {
+            let next = f;
+            for (let i = 0; i < options.length; i++) {
+                next = (next + delta + options.length) % options.length;
+                if (!options[next].disabled)
+                    break;
+            }
+            const focusedOpt = options[next];
+            if (focusedOpt && mode === 'single') {
+                props.onChange?.(focusedOpt.value);
+            }
+            return next;
+        });
+    };
+    const toggleCurrent = () => {
+        const opt = options[focused];
+        if (!opt || opt.disabled)
+            return;
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (next.has(opt.value)) {
+                next.delete(opt.value);
+            }
+            else {
+                next.add(opt.value);
+            }
+            props.onChange?.(Array.from(next));
+            return next;
+        });
+    };
+    const submit = () => {
+        const opt = options[focused];
+        if (!opt || opt.disabled)
+            return;
+        if (mode === 'multi') {
+            props.onSelect(Array.from(selected));
+        }
+        else {
+            props.onSelect(opt.value);
+        }
+    };
+    const bindings = [
+        {
+            match: [KeyMatch.UpArrow, KeyMatch.DownArrow],
+            label: '↑↓',
+            action: 'navigate',
+            handler: (_input, key) => {
+                if (key.upArrow)
+                    move(-1);
+                else if (key.downArrow)
+                    move(1);
+            },
+        },
+    ];
+    if (mode === 'multi') {
+        bindings.push({
+            match: KeyMatch.Space,
+            label: 'space',
+            action: 'toggle',
+            handler: toggleCurrent,
+        });
+        bindings.push({
+            match: KeyMatch.Return,
+            label: 'enter',
+            action: 'confirm',
+            handler: submit,
+        });
+    }
+    else {
+        bindings.push({
+            match: KeyMatch.Return,
+            label: 'enter',
+            action: 'select',
+            handler: submit,
+        });
+    }
+    const numbered = mode === 'single' && props.numbered === true;
+    if (numbered && options.length > 0) {
+        const max = Math.min(options.length, 9);
+        const keys = Array.from({ length: max }, (_, i) => String(i + 1));
+        bindings.push({
+            match: keys,
+            label: max === 1 ? '1' : `1-${max}`,
+            action: 'select',
+            priority: 40,
+            handler: (input) => {
+                const idx = parseInt(input, 10) - 1;
+                const opt = options[idx];
+                if (!opt || opt.disabled)
+                    return;
+                setFocused(idx);
+                props.onSelect(opt.value);
+            },
+        });
+    }
+    useKeyBindings(`picker:${id}`, bindings);
+    const windowEnd = Math.min(options.length, windowStart + windowSize);
+    const hiddenAbove = windowStart;
+    const hiddenBelow = options.length - windowEnd;
+    return (_jsxs(Box, { flexDirection: "column", alignItems: centered ? 'center' : undefined, children: [message && _jsx(PromptLabel, { children: message }), _jsxs(Box, { flexDirection: "column", marginTop: message ? 1 : 0, children: [hiddenAbove > 0 && (_jsx(Text, { dimColor: true, children: `    ▲ ${hiddenAbove} more above` })), options.slice(windowStart, windowEnd).map((opt, j) => {
+                        const i = windowStart + j;
+                        const isFocused = i === focused;
+                        const isChecked = mode === 'multi' && selected.has(opt.value);
+                        const indicatorGlyph = mode === 'multi'
+                            ? isChecked
+                                ? Icons.squareFilled
+                                : Icons.squareOpen
+                            : isFocused
+                                ? Icons.triangleSmallRight
+                                : ' ';
+                        const isDisabled = opt.disabled === true;
+                        const numberTag = numbered && i < 9 ? `[${i + 1}] ` : '';
+                        const fullLabel = `${numberTag}${opt.label}`;
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: optionMarginBottom, children: [_jsxs(Box, { children: [_jsx(Text, { color: isFocused && !isDisabled ? Colors.accent : undefined, dimColor: !isFocused || isDisabled, children: indicatorGlyph }), _jsx(Text, { children: " " }), _jsx(Text, { color: isFocused && !isDisabled ? Colors.accent : undefined, bold: isFocused && !isDisabled, dimColor: !isFocused || isDisabled, children: fullLabel }), opt.hint && _jsx(Text, { dimColor: true, children: `  ${opt.hint}` })] }), opt.description && (_jsx(Box, { paddingLeft: 4, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: opt.description }) }))] }, `${id}-opt-${i}`));
+                    }), hiddenBelow > 0 && (_jsx(Text, { dimColor: true, children: `    ▼ ${hiddenBelow} more below` }))] })] }));
+}
+function clampWindowStart(start, size, total) {
+    if (total === 0 || size === 0)
+        return 0;
+    const max = Math.max(0, total - size);
+    return Math.min(Math.max(0, start), max);
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface PromptLabelProps {
+    children: React.ReactNode;
+}
+export declare function PromptLabel({ children }: PromptLabelProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { Colors } from '../../theme.js';
+export function PromptLabel({ children }) {
+    return (_jsx(Text, { bold: true, color: Colors.accent, children: children }));
+}

package/dist/ui/tui/primitives/ScreenContainer.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+interface ScreenContainerProps {
+    children: React.ReactNode;
+    /**
+     * Optional full-terminal-width content rendered between the TitleBar and
+     * the centered body. Receives the live terminal column count so chrome
+     * (e.g. the menu's Logo + particle tail) can size to the screen edge.
+     */
+    chrome?: (cols: number) => React.ReactNode;
+}
+/**
+ * Always-on shell that wraps every screen.
+ *
+ *   outer column (full terminal width × full terminal height)
+ *     → KeyboardHintsProvider
+ *       → TitleBar (full terminal width — lime strip bleeds edge to edge)
+ *       → spacer (1 row — keeps the chrome / body off the title bar)
+ *       → chrome?(cols)  (full-width, currently only the menu Logo)
+ *       → body wrapper (column-flex, full width, alignItems="center")
+ *         → inner column (width = clamped 80..120, paddingX=1)
+ *           → children (overflow hidden)
+ *           → spacer (1 row gap between content and the hints bar)
+ *           → KeyboardHintsBar
+ *
+ * Two flex details are load-bearing here:
+ * 1. The outer body wrapper sets `flexDirection="column"` explicitly. Without
+ *    it, Yoga defaults to row, and `alignItems="center"` would center the
+ *    inner column vertically instead of horizontally — pinning the body to
+ *    the left edge and pushing it to the vertical middle of the screen.
+ * 2. Clamping the inner column while leaving the outer wrapper full-width is
+ *    what produces the "body centered in the middle of the terminal" effect
+ *    — empty gutters appear on both sides in wide terminals.
+ *
+ * No `flexGrow` on the body so it stays at its natural height and the
+ * KeyboardHintsBar tucks directly under the content. Leftover vertical space
+ * falls below the hints bar at the bottom of the terminal.
+ */
+export declare function ScreenContainer({ children, chrome }: ScreenContainerProps): React.ReactElement;
+export {};

package/dist/ui/tui/primitives/ScreenContainer.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from 'ink';
+import { MAX_SHELL_WIDTH, MIN_SHELL_WIDTH } from '../../theme.js';
+import { TitleBar } from '../components/TitleBar.js';
+import { useStdoutDimensions } from '../hooks/useStdoutDimensions.js';
+import { KeyboardHintsProvider } from '../hooks/useKeyboardHints.js';
+import { KeyboardHintsBar } from './KeyboardHintsBar.js';
+/**
+ * Always-on shell that wraps every screen.
+ *
+ *   outer column (full terminal width × full terminal height)
+ *     → KeyboardHintsProvider
+ *       → TitleBar (full terminal width — lime strip bleeds edge to edge)
+ *       → spacer (1 row — keeps the chrome / body off the title bar)
+ *       → chrome?(cols)  (full-width, currently only the menu Logo)
+ *       → body wrapper (column-flex, full width, alignItems="center")
+ *         → inner column (width = clamped 80..120, paddingX=1)
+ *           → children (overflow hidden)
+ *           → spacer (1 row gap between content and the hints bar)
+ *           → KeyboardHintsBar
+ *
+ * Two flex details are load-bearing here:
+ * 1. The outer body wrapper sets `flexDirection="column"` explicitly. Without
+ *    it, Yoga defaults to row, and `alignItems="center"` would center the
+ *    inner column vertically instead of horizontally — pinning the body to
+ *    the left edge and pushing it to the vertical middle of the screen.
+ * 2. Clamping the inner column while leaving the outer wrapper full-width is
+ *    what produces the "body centered in the middle of the terminal" effect
+ *    — empty gutters appear on both sides in wide terminals.
+ *
+ * No `flexGrow` on the body so it stays at its natural height and the
+ * KeyboardHintsBar tucks directly under the content. Leftover vertical space
+ * falls below the hints bar at the bottom of the terminal.
+ */
+export function ScreenContainer({ children, chrome }) {
+    const [cols, rows] = useStdoutDimensions();
+    const clampedWidth = Math.min(MAX_SHELL_WIDTH, Math.max(MIN_SHELL_WIDTH, cols));
+    return (_jsx(Box, { flexDirection: "column", height: rows, width: cols, children: _jsxs(KeyboardHintsProvider, { children: [_jsx(TitleBar, { width: cols }), _jsx(Box, { height: 1 }), chrome && (_jsxs(_Fragment, { children: [_jsx(Box, { flexShrink: 0, overflow: "hidden", children: chrome(cols) }), _jsx(Box, { height: 1 })] })), _jsx(Box, { width: cols, flexDirection: "column", alignItems: "center", flexShrink: 1, children: _jsxs(Box, { flexDirection: "column", width: clampedWidth, paddingX: 1, children: [_jsx(Box, { flexDirection: "column", overflow: "hidden", children: children }), _jsx(Box, { height: 2 }), _jsx(KeyboardHintsBar, {})] }) })] }) }));
+}

package/dist/ui/tui/primitives/Spinner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SpinnerProps {
+    label?: string;
+    intervalMs?: number;
+}
+export declare function Spinner({ label, intervalMs }: SpinnerProps): React.ReactElement;
+export {};

package/dist/ui/tui/primitives/Spinner.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect, useState } from 'react';
+import { Colors, shouldRenderAnimation } from '../../theme.js';
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export function Spinner({ label, intervalMs = 80 }) {
+    const [i, setI] = useState(0);
+    const animate = shouldRenderAnimation();
+    useEffect(() => {
+        if (!animate)
+            return undefined;
+        const id = setInterval(() => {
+            setI((n) => (n + 1) % FRAMES.length);
+        }, intervalMs);
+        return () => clearInterval(id);
+    }, [animate, intervalMs]);
+    return (_jsxs(Text, { children: [_jsx(Text, { color: Colors.accent, children: FRAMES[i] }), label ? ` ${label}` : ''] }));
+}

package/dist/ui/tui/screens/DashScreen.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    onDone: () => void;
+}
+export declare function DashScreen({ onDone }: Props): React.ReactElement;
+export {};

package/dist/ui/tui/screens/DashScreen.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import open from 'open';
+import { useEffect, useState } from 'react';
+import { Colors } from '../../theme.js';
+import { KeyMatch } from '../hooks/keyboard-hints-utils.js';
+import { useKeyBindings } from '../hooks/useKeyBindings.js';
+import { PromptLabel } from '../primitives/PromptLabel.js';
+const DASHBOARD_URL = 'https://app.stigg.io';
+export function DashScreen({ onDone }) {
+    const [phase, setPhase] = useState('opening');
+    useEffect(() => {
+        let cancelled = false;
+        open(DASHBOARD_URL)
+            .then(() => {
+            if (!cancelled)
+                setPhase('launched');
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPhase('failed');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const bindings = [
+        {
+            match: [KeyMatch.Return, KeyMatch.Escape],
+            label: 'enter',
+            action: 'menu',
+            handler: onDone,
+        },
+    ];
+    useKeyBindings('dash', bindings);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(PromptLabel, { children: "dash \u00B7 open Stigg dashboard" }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["Opening ", _jsx(Text, { color: Colors.accent, children: DASHBOARD_URL }), " in your browser\u2026"] }) }), _jsxs(Box, { marginTop: 1, children: [phase === 'opening' && _jsx(Text, { dimColor: true, children: "(launching)" }), phase === 'launched' && _jsx(Text, { color: Colors.success, children: "\u2713 Browser launched." }), phase === 'failed' && (_jsx(Text, { color: Colors.error, children: "Couldn't open a browser automatically \u2014 open the URL above manually." }))] })] }));
+}

package/dist/ui/tui/screens/DebugScreen.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    onDone: () => void;
+}
+export declare function DebugScreen({ onDone }: Props): React.ReactElement;
+export {};