@bubblebrain-ai/bubble 0.0.11 → 0.0.13

package/dist/tui-opentui/model-picker.js

@@ -0,0 +1,450 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+import { useState, useEffect, useMemo } from "react";
+import { useKeyboard, usePaste } from "@opentui/react";
+import { useTheme } from "./theme.js";
+import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
+import { listBuiltinModels } from "../model-catalog.js";
+import { padVisual, truncateVisual } from "../text-display.js";
+import { useTerminalSize } from "./use-terminal-size.js";
+export { padVisual, truncateVisual } from "../text-display.js";
+export function resolvePickerKeyAction(input, key) {
+    if (key.escape)
+        return "escape";
+    if (key.return)
+        return "enter";
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    if (key.backspace)
+        return "backspace";
+    if (key.delete)
+        return "delete";
+    const sequence = normalizeEscapeSequence(input);
+    if (/^(?:O|\[[\d;:]*)A$/.test(sequence))
+        return "up";
+    if (/^(?:O|\[[\d;:]*)B$/.test(sequence))
+        return "down";
+    return undefined;
+}
+export function isPrintablePickerInput(input) {
+    if (!input)
+        return false;
+    if (input.startsWith("\x1b"))
+        return false;
+    if (isRawEscapeTail(input))
+        return false;
+    return !/[\x00-\x1f\x7f]/.test(input);
+}
+export function formatSkillPickerRow(skill, options) {
+    const width = Math.max(12, options.width);
+    const marker = options.selected ? "> " : "  ";
+    const nameBudget = Math.max(8, Math.min(28, Math.floor(width * 0.35)));
+    const name = truncateVisual(skill.name, nameBudget);
+    const nameCell = padVisual(name, nameBudget);
+    const description = (skill.description ?? "").replace(/\s+/g, " ").trim();
+    const row = description
+        ? `${marker}${nameCell}  ${description}`
+        : `${marker}${nameCell}`;
+    return padVisual(truncateVisual(row, width), width);
+}
+function normalizeEscapeSequence(input) {
+    return input.startsWith("\x1b") ? input.slice(1) : input;
+}
+function isRawEscapeTail(input) {
+    return /^(?:O[ABCDHF]|\[[\d;:]*[A-Za-z~])$/.test(input);
+}
+/**
+ * Translate an OpenTUI KeyEvent into the (input, keyFlags) shape expected by
+ * `resolvePickerKeyAction`. Keeps the helper API identical to the Ink version
+ * so external tests/imports keep working.
+ */
+function adaptKeyEvent(key) {
+    const flags = {};
+    if (key.name === "up")
+        flags.upArrow = true;
+    if (key.name === "down")
+        flags.downArrow = true;
+    if (key.name === "return")
+        flags.return = true;
+    if (key.name === "escape")
+        flags.escape = true;
+    if (key.name === "backspace")
+        flags.backspace = true;
+    if (key.name === "delete")
+        flags.delete = true;
+    const input = key.name && key.name.length === 1 ? key.name : "";
+    return { input, key: flags };
+}
+export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
+    const theme = useTheme();
+    const { rows: termHeight } = useTerminalSize();
+    const maxVisible = Math.max(5, termHeight - 10);
+    const [rawOptions, setRawOptions] = useState(() => buildLocalModelOptions(registry, current, recent));
+    const [query, setQuery] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(() => preferredModelIndex(buildLocalModelOptions(registry, current, recent), current));
+    useEffect(() => {
+        let cancelled = false;
+        const localOptions = buildLocalModelOptions(registry, current, recent);
+        setRawOptions(localOptions);
+        setSelectedIndex(preferredModelIndex(localOptions, current));
+        async function refreshRemote() {
+            const enabled = registry.getEnabled();
+            const opts = [];
+            const seen = new Set();
+            // Recent first
+            for (const m of recent.slice(0, 5)) {
+                const { providerId } = decodeModel(m);
+                const provider = enabled.find((p) => p.id === providerId);
+                appendModelOption(opts, seen, {
+                    id: m,
+                    label: displayModel(m),
+                    group: "Recent",
+                    providerBadge: provider?.name || providerId || "",
+                });
+            }
+            const visibleProviders = enabled.filter((item) => isUserVisibleProvider(item.id));
+            const discovered = await Promise.all(visibleProviders.map(async (provider) => {
+                try {
+                    return { provider, models: await registry.listModels(provider) };
+                }
+                catch {
+                    return { provider, models: localModelsForProvider(registry, provider) };
+                }
+            }));
+            for (const { provider, models } of discovered) {
+                for (const m of models) {
+                    appendModelOption(opts, seen, {
+                        id: encodeModel(m.providerId, m.id),
+                        label: m.name,
+                        group: provider.name,
+                        providerBadge: provider.name,
+                    });
+                }
+            }
+            if (current && !seen.has(current)) {
+                const { providerId } = decodeModel(current);
+                const provider = enabled.find((p) => p.id === providerId);
+                opts.unshift({ id: current, label: displayModel(current), group: "Current", providerBadge: provider?.name || providerId || "" });
+            }
+            if (!cancelled) {
+                setRawOptions(opts);
+                setSelectedIndex((index) => {
+                    const currentIndex = preferredModelIndex(opts, current);
+                    return index === preferredModelIndex(localOptions, current) ? currentIndex : Math.min(index, Math.max(0, opts.length - 1));
+                });
+            }
+        }
+        void refreshRemote();
+        return () => {
+            cancelled = true;
+        };
+    }, [registry, current, recent]);
+    const options = useMemo(() => {
+        if (!query.trim())
+            return rawOptions;
+        const q = query.toLowerCase();
+        return rawOptions.filter((opt) => opt.label.toLowerCase().includes(q) || opt.providerBadge.toLowerCase().includes(q));
+    }, [rawOptions, query]);
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        const { input, key: keyFlags } = adaptKeyEvent(key);
+        const action = resolvePickerKeyAction(input, keyFlags);
+        if (action === "escape") {
+            onCancel();
+            return;
+        }
+        if (action === "enter") {
+            const opt = options[selectedIndex];
+            if (opt)
+                onSelect(opt.id);
+            return;
+        }
+        if (action === "up") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (action === "down") {
+            setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
+            return;
+        }
+        if (action === "backspace" || action === "delete") {
+            setQuery((q) => {
+                const next = q.slice(0, -1);
+                setSelectedIndex(0);
+                return next;
+            });
+            return;
+        }
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.option) {
+            setQuery((q) => {
+                const next = q + input;
+                setSelectedIndex(0);
+                return next;
+            });
+            return;
+        }
+    });
+    const start = Math.max(0, Math.min(selectedIndex, options.length - maxVisible));
+    const visible = options.slice(start, start + maxVisible);
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            marginTop: 1,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            border: true,
+            borderColor: theme.borderActive,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "Select Model" }), _jsx(SearchField, { query: query, placeholder: "Type to search models..." }), _jsx("text", { fg: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs("box", { style: { flexDirection: "column", marginTop: 1 }, children: [options.length === 0 && (_jsxs("text", { fg: theme.muted, children: ["No models match \"", query, "\""] })), visible.map((opt, i) => {
+                        const actualIndex = start + i;
+                        const isSelected = actualIndex === selectedIndex;
+                        return (_jsxs("box", { style: { flexDirection: "row" }, children: [_jsxs("text", { fg: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", opt.label] }), _jsx("box", { style: { marginLeft: 1 }, children: _jsx("text", { fg: theme.muted, children: opt.providerBadge }) }), opt.id === current && (_jsx("box", { style: { marginLeft: 1 }, children: _jsx("text", { fg: theme.accent, children: "\u25CF" }) }))] }, opt.id));
+                    })] })] }));
+}
+function SearchField({ query, placeholder }) {
+    const theme = useTheme();
+    const [cursorVisible, setCursorVisible] = useState(true);
+    useEffect(() => {
+        const t = setInterval(() => setCursorVisible((v) => !v), 500);
+        return () => clearInterval(t);
+    }, []);
+    return (_jsxs("box", { style: { marginTop: 1, marginBottom: 1, flexDirection: "row" }, children: [_jsx("text", { fg: theme.accent, children: "❯ " }), _jsx("text", { children: query }), _jsx("text", { fg: cursorVisible ? "black" : theme.accent, bg: cursorVisible ? theme.accent : undefined, children: " " }), !query && _jsxs("text", { fg: theme.muted, children: [" ", placeholder] })] }));
+}
+export function buildLocalModelOptions(registry, current, recent) {
+    const enabled = registry.getEnabled();
+    const opts = [];
+    const seen = new Set();
+    for (const model of recent.slice(0, 5)) {
+        const { providerId } = decodeModel(model);
+        const provider = enabled.find((item) => item.id === providerId);
+        appendModelOption(opts, seen, {
+            id: model,
+            label: displayModel(model),
+            group: "Recent",
+            providerBadge: provider?.name || providerId || "",
+        });
+    }
+    for (const provider of enabled.filter((item) => isUserVisibleProvider(item.id))) {
+        for (const model of localModelsForProvider(registry, provider)) {
+            appendModelOption(opts, seen, {
+                id: encodeModel(model.providerId, model.id),
+                label: model.name,
+                group: provider.name,
+                providerBadge: provider.name,
+            });
+        }
+    }
+    if (current && !seen.has(current)) {
+        const { providerId } = decodeModel(current);
+        const provider = enabled.find((item) => item.id === providerId);
+        opts.unshift({
+            id: current,
+            label: displayModel(current),
+            group: "Current",
+            providerBadge: provider?.name || providerId || "",
+        });
+    }
+    return opts;
+}
+function localModelsForProvider(registry, provider) {
+    const customModels = registry.getModelConfig().getCustomModels(provider.id);
+    if (customModels.length > 0)
+        return customModels;
+    const builtinProviderId = provider.id === "openai" && provider.authType === "oauth"
+        ? "openai-codex"
+        : provider.id;
+    return listBuiltinModels(builtinProviderId).map((model) => ({
+        id: model.id,
+        name: model.name,
+        providerId: provider.id,
+    }));
+}
+function appendModelOption(options, seen, option) {
+    if (seen.has(option.id))
+        return;
+    seen.add(option.id);
+    options.push(option);
+}
+function preferredModelIndex(options, current) {
+    const idx = options.findIndex((option) => option.id === current);
+    return idx >= 0 ? idx : 0;
+}
+export function ProviderPicker({ providers, current, onSelect, onCancel, title }) {
+    const theme = useTheme();
+    const { rows: termHeight } = useTerminalSize();
+    const maxVisible = Math.max(5, termHeight - 8);
+    const [selectedIndex, setSelectedIndex] = useState(() => {
+        const idx = providers.findIndex((p) => p.id === current);
+        return idx >= 0 ? idx : 0;
+    });
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        const { input, key: keyFlags } = adaptKeyEvent(key);
+        const action = resolvePickerKeyAction(input, keyFlags);
+        if (action === "escape") {
+            onCancel();
+            return;
+        }
+        if (action === "enter") {
+            const p = providers[selectedIndex];
+            if (p)
+                onSelect(p.id);
+            return;
+        }
+        if (action === "up") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (action === "down") {
+            setSelectedIndex((i) => Math.min(providers.length - 1, i + 1));
+            return;
+        }
+        if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
+            const char = input.toLowerCase();
+            for (let i = selectedIndex + 1; i < providers.length; i++) {
+                if (providers[i].name.toLowerCase().startsWith(char)) {
+                    setSelectedIndex(i);
+                    return;
+                }
+            }
+            for (let i = 0; i <= selectedIndex; i++) {
+                if (providers[i].name.toLowerCase().startsWith(char)) {
+                    setSelectedIndex(i);
+                    return;
+                }
+            }
+        }
+    });
+    const start = Math.max(0, Math.min(selectedIndex, providers.length - maxVisible));
+    const visible = providers.slice(start, start + maxVisible);
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            marginTop: 1,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            border: true,
+            borderColor: theme.borderActive,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: title || "Select Provider" }), _jsx("text", { fg: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 type letter to jump" }), _jsx("box", { style: { flexDirection: "column", marginTop: 1 }, children: visible.map((p, i) => {
+                    const actualIndex = start + i;
+                    const isSelected = actualIndex === selectedIndex;
+                    return (_jsx("box", { children: _jsxs("text", { fg: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", p.name, p.id === current ? " (current)" : "", !p.enabled ? " [disabled]" : ""] }) }, p.id));
+                }) })] }));
+}
+export function KeyPicker({ providerName, onSubmit, onCancel }) {
+    const theme = useTheme();
+    const [value, setValue] = useState("");
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        const { input, key: keyFlags } = adaptKeyEvent(key);
+        const action = resolvePickerKeyAction(input, keyFlags);
+        if (action === "escape") {
+            onCancel();
+            return;
+        }
+        if (action === "enter") {
+            if (value.trim())
+                onSubmit(value.trim());
+            return;
+        }
+        if (action === "backspace" || action === "delete") {
+            setValue((v) => v.slice(0, -1));
+            return;
+        }
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.option) {
+            setValue((v) => v + input);
+        }
+    });
+    // Append pasted clipboard content directly into the key field. Without
+    // this the paste falls through to whichever other hook (InputBox's
+    // usePaste) is active, and the key ends up in the main input area.
+    usePaste((event) => {
+        const pasted = new TextDecoder().decode(event.bytes);
+        const clean = pasted.replace(/[\r\n\t]/g, "").trim();
+        if (clean)
+            setValue((v) => v + clean);
+    });
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            marginTop: 1,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            border: true,
+            borderColor: theme.borderActive,
+        }, children: [_jsxs("text", { fg: theme.accent, attributes: 1, children: ["Enter API Key for ", providerName] }), _jsx("text", { fg: theme.muted, children: "Paste or type the key \u00B7 Enter to submit \u00B7 Esc to cancel" }), _jsx(SearchField, { query: value.replace(/./g, "*"), placeholder: "Paste your key here..." })] }));
+}
+export function SkillPicker({ skills, onSelect, onCancel }) {
+    const theme = useTheme();
+    const { columns: terminalColumns, rows: termHeight } = useTerminalSize();
+    const maxVisible = Math.max(5, termHeight - 8);
+    const rowWidth = Math.max(36, Math.min(96, terminalColumns - 6));
+    const [query, setQuery] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const options = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return skills;
+        return skills.filter((skill) => skill.name.toLowerCase().includes(q) || skill.description.toLowerCase().includes(q));
+    }, [query, skills]);
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        const { input, key: keyFlags } = adaptKeyEvent(key);
+        const action = resolvePickerKeyAction(input, keyFlags);
+        if (action === "escape") {
+            onCancel();
+            return;
+        }
+        if (action === "enter") {
+            const skill = options[selectedIndex];
+            if (skill)
+                onSelect(skill.name);
+            return;
+        }
+        if (action === "up") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (action === "down") {
+            setSelectedIndex((i) => Math.min(Math.max(0, options.length - 1), i + 1));
+            return;
+        }
+        if (action === "backspace" || action === "delete") {
+            setQuery((q) => {
+                const next = q.slice(0, -1);
+                setSelectedIndex(0);
+                return next;
+            });
+            return;
+        }
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.option) {
+            setQuery((q) => {
+                const next = q + input;
+                setSelectedIndex(0);
+                return next;
+            });
+        }
+    });
+    const maxStart = Math.max(0, options.length - maxVisible);
+    const start = Math.max(0, Math.min(maxStart, selectedIndex - Math.floor(maxVisible / 2)));
+    const visible = options.slice(start, start + maxVisible);
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            marginTop: 1,
+            marginBottom: 1,
+            paddingLeft: 1,
+            paddingRight: 1,
+            border: true,
+            borderColor: theme.borderActive,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "Select Skill" }), _jsx(SearchField, { query: query, placeholder: "Type to search skills..." }), _jsx("text", { fg: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter load \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs("box", { style: { flexDirection: "column", marginTop: 1 }, children: [options.length === 0 && (_jsxs("text", { fg: theme.muted, children: ["No skills match \"", query, "\""] })), visible.map((skill, i) => {
+                        const actualIndex = start + i;
+                        const isSelected = actualIndex === selectedIndex;
+                        const row = formatSkillPickerRow(skill, { selected: isSelected, width: rowWidth });
+                        return (_jsx("box", { children: _jsx("text", { fg: isSelected ? "black" : undefined, bg: isSelected ? theme.accent : undefined, attributes: isSelected ? 1 : 0, children: row }) }, skill.name));
+                    })] })] }));
+}

package/dist/tui-opentui/plan-confirm.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+interface PlanConfirmProps {
+    initialPlan: string;
+    onApprove: (plan: string) => void;
+    onReject: (reason?: string) => void;
+}
+export declare function PlanConfirm({ initialPlan, onApprove, onReject }: PlanConfirmProps): React.ReactNode;
+export {};

package/dist/tui-opentui/plan-confirm.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { useTheme } from "./theme.js";
+import { MarkdownContent } from "./markdown.js";
+export function PlanConfirm({ initialPlan, onApprove, onReject }) {
+    const theme = useTheme();
+    const [stage, setStage] = useState("view");
+    const [draft, setDraft] = useState(initialPlan);
+    const [cursor, setCursor] = useState(initialPlan.length);
+    useKeyboard((key) => {
+        if (key.eventType === "release")
+            return;
+        if (stage === "view") {
+            if (key.name === "escape" || key.name === "n" || key.name === "N") {
+                onReject();
+                return;
+            }
+            if (key.name === "y" || key.name === "Y" || key.name === "return") {
+                onApprove(initialPlan);
+                return;
+            }
+            if (key.name === "e" || key.name === "E") {
+                setStage("edit");
+                return;
+            }
+            return;
+        }
+        // edit stage
+        if (key.name === "escape") {
+            setDraft(initialPlan);
+            setCursor(initialPlan.length);
+            setStage("view");
+            return;
+        }
+        if (key.ctrl && (key.name === "s" || key.name === "d")) {
+            const finalText = draft.trim();
+            if (!finalText) {
+                return;
+            }
+            onApprove(finalText);
+            return;
+        }
+        if (key.name === "return") {
+            // Enter inserts a newline (multi-line editor).
+            insertAtCursor("\n");
+            return;
+        }
+        if (key.name === "backspace" || key.name === "delete") {
+            if (cursor > 0) {
+                setDraft((prev) => prev.slice(0, cursor - 1) + prev.slice(cursor));
+                setCursor((c) => Math.max(0, c - 1));
+            }
+            return;
+        }
+        if (key.name === "left") {
+            setCursor((c) => Math.max(0, c - 1));
+            return;
+        }
+        if (key.name === "right") {
+            setCursor((c) => Math.min(draft.length, c + 1));
+            return;
+        }
+        if (key.name === "up" || key.name === "down") {
+            const before = draft.slice(0, cursor);
+            const after = draft.slice(cursor);
+            const beforeLines = before.split("\n");
+            const afterLines = after.split("\n");
+            const currentCol = beforeLines[beforeLines.length - 1].length;
+            if (key.name === "up" && beforeLines.length > 1) {
+                const prevLine = beforeLines[beforeLines.length - 2];
+                const col = Math.min(currentCol, prevLine.length);
+                const newCursor = before.length - beforeLines[beforeLines.length - 1].length - 1 - (prevLine.length - col);
+                setCursor(Math.max(0, newCursor));
+            }
+            else if (key.name === "down" && afterLines.length > 1) {
+                const nextLine = afterLines[1];
+                const col = Math.min(currentCol, nextLine.length);
+                const newCursor = before.length + afterLines[0].length + 1 + col;
+                setCursor(Math.min(draft.length, newCursor));
+            }
+            return;
+        }
+        if (key.name && key.name.length === 1) {
+            insertAtCursor(key.name);
+        }
+    });
+    function insertAtCursor(text) {
+        setDraft((prev) => prev.slice(0, cursor) + text + prev.slice(cursor));
+        setCursor((c) => c + text.length);
+    }
+    if (stage === "view") {
+        return (_jsxs("box", { style: {
+                flexDirection: "column",
+                border: true,
+                borderColor: theme.accent,
+                paddingLeft: 1,
+                paddingRight: 1,
+                marginTop: 1,
+                marginBottom: 1,
+            }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "Proposed plan" }), _jsx("box", { style: { flexDirection: "column", marginTop: 1 }, children: _jsx(MarkdownContent, { content: initialPlan }) }), _jsxs("box", { style: { marginTop: 1, flexDirection: "row" }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "y" }), _jsx("text", { fg: theme.muted, children: " approve   " }), _jsx("text", { fg: theme.accent, attributes: 1, children: "e" }), _jsx("text", { fg: theme.muted, children: " edit   " }), _jsx("text", { fg: theme.accent, attributes: 1, children: "n" }), _jsx("text", { fg: theme.muted, children: "/" }), _jsx("text", { fg: theme.accent, attributes: 1, children: "esc" }), _jsx("text", { fg: theme.muted, children: " reject" })] })] }));
+    }
+    // edit stage
+    const lines = draft.split("\n");
+    const beforeCursor = draft.slice(0, cursor);
+    const cursorLineIndex = beforeCursor.split("\n").length - 1;
+    const cursorCol = beforeCursor.split("\n").pop()?.length || 0;
+    return (_jsxs("box", { style: {
+            flexDirection: "column",
+            border: true,
+            borderColor: theme.accent,
+            paddingLeft: 1,
+            paddingRight: 1,
+            marginTop: 1,
+            marginBottom: 1,
+        }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "Edit plan" }), _jsx("box", { style: { flexDirection: "column", marginTop: 1 }, children: lines.map((line, index) => {
+                    if (index !== cursorLineIndex) {
+                        return (_jsx("text", { children: line || " " }, index));
+                    }
+                    const safe = line || " ";
+                    return (_jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("text", { children: safe.slice(0, cursorCol) }), _jsx("text", { bg: "white", fg: "black", children: safe[cursorCol] || " " }), _jsx("text", { children: safe.slice(cursorCol + 1) })] }, index));
+                }) }), _jsxs("box", { style: { marginTop: 1, flexDirection: "row" }, children: [_jsx("text", { fg: theme.accent, attributes: 1, children: "\u2303S" }), _jsx("text", { fg: theme.muted, children: " save & approve   " }), _jsx("text", { fg: theme.accent, attributes: 1, children: "esc" }), _jsx("text", { fg: theme.muted, children: " cancel edit" })] })] }));
+}

package/dist/tui-opentui/question-dialog.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import type { QuestionAnswer, QuestionRequest } from "../question/index.js";
+interface QuestionDialogProps {
+    request: QuestionRequest;
+    onSubmit: (answers: QuestionAnswer[]) => void;
+    onCancel: () => void;
+}
+export declare function QuestionDialog({ request, onSubmit, onCancel }: QuestionDialogProps): React.ReactNode;
+export {};