@velum-labs/routekit-cli-ui 0.9.0

package/dist/ink/prompts.js

@@ -0,0 +1,338 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Ink prompt components: select, multi-select, confirm, and free text. Each
+ * renders live while the user decides, then settles into a single answer line
+ * (message + chosen value) that persists after unmount — so a finished wizard
+ * reads as a tidy transcript of the choices made.
+ *
+ * Ctrl+C aborts via `onAbort` (the facade exits 130, matching the CLI's
+ * SIGINT convention).
+ */
+import { Box, Text, useInput } from "ink";
+import { useState, useSyncExternalStore } from "react";
+import { fuzzyFilter } from "../fuzzy.js";
+import { glyph } from "../theme.js";
+import { useSpinnerFrame } from "./components.js";
+function AnswerLine({ message, answer }) {
+    return (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: glyph.tick() }), " ", _jsx(Text, { bold: true, children: message }), " ", _jsxs(Text, { dimColor: true, children: ["\u00B7 ", answer] })] }));
+}
+/** How many options to show around the cursor before scrolling the window. */
+const WINDOW = 10;
+function windowBounds(cursor, total) {
+    if (total <= WINDOW)
+        return { start: 0, end: total };
+    const start = Math.max(0, Math.min(cursor - Math.floor(WINDOW / 2), total - WINDOW));
+    return { start, end: start + WINDOW };
+}
+export function SelectPrompt({ message, options, defaultIndex, onSubmit, onAbort, onBack }) {
+    const [cursor, setCursor] = useState(defaultIndex);
+    const [answer, setAnswer] = useState(undefined);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.escape && onBack !== undefined) {
+            onBack();
+            return;
+        }
+        if (key.upArrow || input === "k") {
+            setCursor((previous) => (previous - 1 + options.length) % options.length);
+        }
+        else if (key.downArrow || input === "j") {
+            setCursor((previous) => (previous + 1) % options.length);
+        }
+        else if (key.return) {
+            const option = options[cursor];
+            if (option !== undefined) {
+                setAnswer(option.label);
+                onSubmit(option.value, option.label);
+            }
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    const { start, end } = windowBounds(cursor, options.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: message }), start > 0 ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", start, " more above"] }) : null, options.slice(start, end).map((option, offset) => {
+                const index = start + offset;
+                const active = index === cursor;
+                return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: active ? glyph.pointer() : " " }), " ", active ? _jsx(Text, { color: "cyan", children: option.label }) : _jsx(Text, { children: option.label }), option.hint !== undefined ? _jsxs(Text, { dimColor: true, children: [" \u2014 ", option.hint] }) : null] }, index));
+            }), end < options.length ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", options.length - end, " more below"] }) : null, _jsx(Text, { dimColor: true, children: "  (arrows to move, enter to select)" })] }));
+}
+export function MultiSelectPrompt({ message, options, defaultSelected, onSubmit, onAbort }) {
+    const [cursor, setCursor] = useState(0);
+    const [selected, setSelected] = useState(new Set(defaultSelected));
+    const [answer, setAnswer] = useState(undefined);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.upArrow || input === "k") {
+            setCursor((previous) => (previous - 1 + options.length) % options.length);
+        }
+        else if (key.downArrow || input === "j") {
+            setCursor((previous) => (previous + 1) % options.length);
+        }
+        else if (input === " ") {
+            setSelected((previous) => {
+                const next = new Set(previous);
+                if (next.has(cursor))
+                    next.delete(cursor);
+                else
+                    next.add(cursor);
+                return next;
+            });
+        }
+        else if (input === "a") {
+            setSelected((previous) => previous.size === options.length ? new Set() : new Set(options.map((_, index) => index)));
+        }
+        else if (key.return) {
+            const indices = [...selected].sort((left, right) => left - right);
+            const chosen = indices
+                .map((index) => options[index])
+                .filter((option) => option !== undefined);
+            const labels = chosen.map((option) => option.label);
+            setAnswer(labels.length > 0 ? labels.join(", ") : "(none)");
+            onSubmit(chosen.map((option) => option.value), labels);
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    const { start, end } = windowBounds(cursor, options.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: message }), start > 0 ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", start, " more above"] }) : null, options.slice(start, end).map((option, offset) => {
+                const index = start + offset;
+                const active = index === cursor;
+                const checked = selected.has(index);
+                return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: active ? glyph.pointer() : " " }), " ", _jsx(Text, { color: checked ? "green" : undefined, children: checked ? glyph.checkboxOn() : glyph.checkboxOff() }), " ", active ? _jsx(Text, { color: "cyan", children: option.label }) : _jsx(Text, { children: option.label }), option.hint !== undefined ? _jsxs(Text, { dimColor: true, children: [" \u2014 ", option.hint] }) : null] }, index));
+            }), end < options.length ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", options.length - end, " more below"] }) : null, _jsx(Text, { dimColor: true, children: "  (space to toggle, a for all, enter to accept)" })] }));
+}
+export function ConfirmPrompt({ message, defaultValue, onSubmit, onAbort, onBack }) {
+    const [choice, setChoice] = useState(defaultValue);
+    const [answer, setAnswer] = useState(undefined);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.escape && onBack !== undefined) {
+            onBack();
+            return;
+        }
+        // Batched input ("n\r") answers directly; a bare newline accepts the choice.
+        const lowered = input.trim().toLowerCase();
+        if (lowered === "y" || lowered.startsWith("y")) {
+            setAnswer("yes");
+            onSubmit(true);
+        }
+        else if (lowered === "n" || lowered.startsWith("n")) {
+            setAnswer("no");
+            onSubmit(false);
+        }
+        else if (key.leftArrow || key.rightArrow || key.tab) {
+            setChoice((previous) => !previous);
+        }
+        else if (key.return || /[\r\n]/.test(input)) {
+            setAnswer(choice ? "yes" : "no");
+            onSubmit(choice);
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    return (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: message }), " ", _jsx(Text, { color: choice ? "cyan" : undefined, bold: choice, children: "yes" }), _jsx(Text, { dimColor: true, children: " / " }), _jsx(Text, { color: choice ? undefined : "cyan", bold: !choice, children: "no" }), _jsx(Text, { dimColor: true, children: "  (y/n, arrows to switch, enter to accept)" })] }));
+}
+/** Strip control characters from typed/pasted input. */
+function printable(input) {
+    let out = "";
+    for (const ch of input) {
+        const code = ch.codePointAt(0) ?? 0;
+        if (code >= 0x20 && code !== 0x7f)
+            out += ch;
+    }
+    return out;
+}
+export function TextPrompt({ message, defaultValue, placeholder, onSubmit, onAbort, onBack }) {
+    const [value, setValue] = useState("");
+    const [answer, setAnswer] = useState(undefined);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.escape && onBack !== undefined) {
+            onBack();
+            return;
+        }
+        // Rapid/pasted input arrives as one chunk, possibly with an embedded
+        // newline: everything before the first newline is typed text, the newline
+        // submits (matching what typing the same keys slowly would do).
+        const newlineIndex = input.search(/[\r\n]/);
+        if (key.return || newlineIndex !== -1) {
+            const prefix = newlineIndex === -1 ? printable(input) : printable(input.slice(0, newlineIndex));
+            const merged = value + prefix;
+            const final = merged.length > 0 ? merged : defaultValue;
+            setAnswer(final.length > 0 ? final : "(empty)");
+            onSubmit(final);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue((previous) => previous.slice(0, -1));
+            return;
+        }
+        // Ignore other control sequences (arrows etc); append printable input.
+        if (input.length > 0 && !key.ctrl && !key.meta && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow && !key.tab) {
+            setValue((previous) => previous + printable(input));
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    const hint = placeholder ?? (defaultValue.length > 0 ? defaultValue : undefined);
+    return (_jsxs(Text, { children: [_jsx(Text, { bold: true, children: message }), " ", value.length > 0 ? _jsx(Text, { children: value }) : hint !== undefined ? _jsx(Text, { dimColor: true, children: hint }) : null, _jsx(Text, { color: "cyan", children: "\u2588" })] }));
+}
+/** Render `label` with the fuzzy-matched positions highlighted. */
+function HighlightedLabel({ label, positions, active }) {
+    if (positions.length === 0) {
+        return active ? _jsx(Text, { color: "cyan", children: label }) : _jsx(Text, { children: label });
+    }
+    const matched = new Set(positions);
+    const parts = [];
+    let run = "";
+    let runMatched = matched.has(0);
+    const flush = (index) => {
+        if (run.length === 0)
+            return;
+        parts.push(runMatched ? (_jsx(Text, { color: "cyan", bold: true, children: run }, index)) : active ? (_jsx(Text, { color: "cyan", children: run }, index)) : (_jsx(Text, { children: run }, index)));
+        run = "";
+    };
+    for (let index = 0; index < label.length; index++) {
+        const isMatch = matched.has(index);
+        if (isMatch !== runMatched) {
+            flush(index);
+            runMatched = isMatch;
+        }
+        run += label[index] ?? "";
+    }
+    flush(label.length);
+    return _jsx(Text, { children: parts });
+}
+export function FuzzySelectPrompt({ message, feed, placeholder, onSubmit, onAbort, onBack }) {
+    const state = useSyncExternalStore(feed.subscribe, feed.get, feed.get);
+    const [query, setQuery] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const [answer, setAnswer] = useState(undefined);
+    const frame = useSpinnerFrame();
+    // Match against the label plus the hint (e.g. the equivalent command), but
+    // only highlight positions that fall inside the label itself.
+    const results = fuzzyFilter(query, state.options, (option) => option.hint !== undefined ? `${option.label} ${option.hint}` : option.label);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.escape) {
+            if (query.length > 0)
+                setQuery("");
+            else if (onBack !== undefined)
+                onBack();
+            return;
+        }
+        if (key.upArrow || (key.ctrl && input === "p")) {
+            setCursor((previous) => (results.length === 0 ? 0 : (previous - 1 + results.length) % results.length));
+            return;
+        }
+        if (key.downArrow || (key.ctrl && input === "n")) {
+            setCursor((previous) => (results.length === 0 ? 0 : (previous + 1) % results.length));
+            return;
+        }
+        if (key.return) {
+            const picked = results[Math.min(cursor, Math.max(0, results.length - 1))];
+            if (picked !== undefined) {
+                setAnswer(picked.item.label);
+                onSubmit(picked.item.value, picked.item.label);
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((previous) => previous.slice(0, -1));
+            setCursor(0);
+            return;
+        }
+        if (input.length > 0 && !key.ctrl && !key.meta && !key.tab) {
+            setQuery((previous) => previous + printable(input));
+            setCursor(0);
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    const boundedCursor = Math.min(cursor, Math.max(0, results.length - 1));
+    const { start, end } = windowBounds(boundedCursor, results.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: message }), " ", query.length > 0 ? (_jsx(Text, { children: query })) : placeholder !== undefined ? (_jsx(Text, { dimColor: true, children: placeholder })) : null, _jsx(Text, { color: "cyan", children: "\u2588" }), state.loading ? (_jsxs(Text, { dimColor: true, children: ["  ", frame, " ", state.note ?? "refreshing…"] })) : null] }), results.length === 0 ? (_jsxs(Text, { dimColor: true, children: ["  no matches", query.length > 0 ? ` for "${query}"` : "", " (esc clears)"] })) : null, start > 0 ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", start, " more above"] }) : null, results.slice(start, end).map((result, offset) => {
+                const index = start + offset;
+                const active = index === boundedCursor;
+                return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: active ? glyph.pointer() : " " }), " ", _jsx(HighlightedLabel, { label: result.item.label, positions: result.match.positions.filter((position) => position < result.item.label.length), active: active }), result.item.hint !== undefined ? _jsxs(Text, { dimColor: true, children: [" \u2014 ", result.item.hint] }) : null] }, `${index}-${result.item.label}`));
+            }), end < results.length ? _jsxs(Text, { dimColor: true, children: ["  \u2026 ", results.length - end, " more below"] }) : null, _jsx(Text, { dimColor: true, children: "  (type to filter, arrows to move, enter to select)" })] }));
+}
+/** The inline (ghost) completion for `value`: the remainder of the best prefix match. */
+export function ghostRemainder(value, suggestions) {
+    if (value.length === 0)
+        return undefined;
+    const lower = value.toLowerCase();
+    for (const suggestion of suggestions) {
+        if (suggestion.toLowerCase().startsWith(lower) && suggestion.length > value.length) {
+            return suggestion.slice(value.length);
+        }
+    }
+    return undefined;
+}
+export function GhostTextPrompt({ message, suggestions, placeholder, defaultValue, onSubmit, onAbort, onBack }) {
+    const [value, setValue] = useState("");
+    const [answer, setAnswer] = useState(undefined);
+    const ghost = ghostRemainder(value, suggestions);
+    useInput((input, key) => {
+        if (answer !== undefined)
+            return;
+        if (key.ctrl && input === "c") {
+            onAbort();
+            return;
+        }
+        if (key.escape && onBack !== undefined) {
+            onBack();
+            return;
+        }
+        if (key.tab || (key.rightArrow && ghost !== undefined)) {
+            if (ghost !== undefined)
+                setValue((previous) => previous + ghost);
+            return;
+        }
+        const newlineIndex = input.search(/[\r\n]/);
+        if (key.return || newlineIndex !== -1) {
+            const prefix = newlineIndex === -1 ? printable(input) : printable(input.slice(0, newlineIndex));
+            const merged = value + prefix;
+            const final = merged.length > 0 ? merged : defaultValue;
+            setAnswer(final.length > 0 ? final : "(empty)");
+            onSubmit(final);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue((previous) => previous.slice(0, -1));
+            return;
+        }
+        if (input.length > 0 && !key.ctrl && !key.meta && !key.upArrow && !key.downArrow && !key.leftArrow && !key.rightArrow) {
+            setValue((previous) => previous + printable(input));
+        }
+    });
+    if (answer !== undefined)
+        return _jsx(AnswerLine, { message: message, answer: answer });
+    const hint = placeholder ?? (defaultValue.length > 0 ? defaultValue : undefined);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: message }), " ", value.length > 0 ? _jsx(Text, { children: value }) : hint !== undefined ? _jsx(Text, { dimColor: true, children: hint }) : null, ghost !== undefined ? _jsx(Text, { dimColor: true, children: ghost }) : null, _jsx(Text, { color: "cyan", children: "\u2588" })] }), ghost !== undefined ? _jsx(Text, { dimColor: true, children: "  (tab completes the suggestion)" }) : null] }));
+}

package/dist/ink/store.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A minimal external store the imperative presenter controllers mutate and Ink
+ * components subscribe to (via `useSyncExternalStore`), bridging the CLI's
+ * imperative call sites with React's declarative rendering.
+ */
+export declare class Store<T> {
+    private state;
+    private readonly listeners;
+    constructor(initial: T);
+    get: () => T;
+    set: (updater: (previous: T) => T) => void;
+    subscribe: (listener: () => void) => (() => void);
+}

package/dist/ink/store.js

@@ -0,0 +1,22 @@
+/**
+ * A minimal external store the imperative presenter controllers mutate and Ink
+ * components subscribe to (via `useSyncExternalStore`), bridging the CLI's
+ * imperative call sites with React's declarative rendering.
+ */
+export class Store {
+    state;
+    listeners = new Set();
+    constructor(initial) {
+        this.state = initial;
+    }
+    get = () => this.state;
+    set = (updater) => {
+        this.state = updater(this.state);
+        for (const listener of this.listeners)
+            listener();
+    };
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    };
+}

package/dist/plain.d.ts

@@ -0,0 +1,36 @@
+import type { ChecklistController, ErrorPanelInput, KeyValueRow, LiveFrameController, Presenter, ProgressController, StatusKind, StepInput, TableOptions, TaskController } from "./presenter.js";
+export declare function renderTableLines(rows: readonly (readonly string[])[], options?: TableOptions): string[];
+/**
+ * Render the failure panel as styled lines: a red-framed box with the message,
+ * dim evidence lines, the hint, and a `try:` next command. Shared by the plain
+ * and Ink presenters (identical settled output) and reused by the top-level
+ * error handler.
+ */
+export declare function renderErrorPanelLines(input: ErrorPanelInput): string[];
+export declare function renderKeyValueLines(rows: readonly KeyValueRow[]): string[];
+export declare class PlainPresenter implements Presenter {
+    readonly interactive: boolean;
+    private readonly stream;
+    constructor(stream?: NodeJS.WriteStream);
+    private writeLine;
+    banner(subtitle?: string): void;
+    header(subtitle?: string): void;
+    heading(text: string): void;
+    line(text: string): void;
+    blank(): void;
+    note(text: string): void;
+    success(text: string): void;
+    warn(text: string): void;
+    error(text: string): void;
+    status(kind: StatusKind, label: string, detail?: string, hint?: string): void;
+    keyValue(rows: readonly KeyValueRow[]): void;
+    table(rows: readonly (readonly string[])[], options?: TableOptions): void;
+    box(title: string, lines: readonly string[]): void;
+    errorPanel(input: ErrorPanelInput): void;
+    checklist(steps: readonly StepInput[], options?: {
+        title?: string;
+    }): ChecklistController;
+    task(text: string): TaskController;
+    progress(label: string): ProgressController;
+    liveFrame(): LiveFrameController;
+}