@ice1/glyphx 0.1.0

package/build/index.js

@@ -0,0 +1,1292 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerGroup = exports.Container = exports.Textarea = exports.Button = exports.DangerButtonRenderer = exports.PrimaryButtonRenderer = exports.DefaultButtonRenderer = exports.CheckBox = exports.Radio = exports.Select = exports.Input = exports.Command = exports.Label = exports.Widget = exports.ScrollState = exports.FocusManager = exports.Event = exports.Cursor = exports.Screen = exports.TerminalWriter = void 0;
+const readline = __importStar(require("readline"));
+const chalk_1 = __importDefault(require("chalk"));
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 2. INFRASTRUCTURE  (concrete I/O implementations)
+// ══════════════════════════════════════════════════════════════════════════════
+/** Default ITerminalWriter backed by process.stdout + ANSI escape codes. */
+class TerminalWriter {
+    moveTo(row, col) {
+        process.stdout.write(`\x1b[${row};${col}H`);
+    }
+    write(text) {
+        process.stdout.write(text);
+    }
+}
+exports.TerminalWriter = TerminalWriter;
+/** Module-level singleton; injected into every widget by default. */
+const defaultWriter = new TerminalWriter();
+// ── Screen ───────────────────────────────────────────────────────────────────
+class Screen {
+    active = false;
+    enter() {
+        if (this.active)
+            return;
+        this.active = true;
+        process.stdout.write("\x1b[?1049h\x1b[2J\x1b[H");
+    }
+    exit() {
+        if (!this.active)
+            return;
+        this.active = false;
+        process.stdout.write("\x1b[?1049l");
+    }
+}
+exports.Screen = Screen;
+// ── Legacy static Cursor (kept for external callers) ─────────────────────────
+class Cursor {
+    static moveTo(row, col) {
+        defaultWriter.moveTo(row, col);
+    }
+    static hide() {
+        process.stdout.write("\x1b[?25l");
+    }
+    static show() {
+        process.stdout.write("\x1b[?25h");
+    }
+}
+exports.Cursor = Cursor;
+class Event {
+    proc;
+    screen;
+    subEvents = [];
+    constructor(proc, screen) {
+        this.proc = proc;
+        this.screen = screen;
+        readline.emitKeypressEvents(proc.stdin);
+        proc.stdin.resume();
+    }
+    setup() {
+        this.proc.stdin.on("keypress", (_str, key) => {
+            if (key?.ctrl && key.name === "c") {
+                this.screen.exit();
+                this.proc.exit(0);
+            }
+            [...this.subEvents].forEach((e) => e.next(key));
+        });
+        ["SIGINT", "SIGTERM"].forEach((sig) => {
+            this.proc.on(sig, () => {
+                this.screen.exit();
+                this.proc.exit(0);
+            });
+        });
+    }
+    add(sub) {
+        if (!this.subEvents.find((e) => e.name === sub.name))
+            this.subEvents.push(sub);
+    }
+    remove(name) {
+        this.subEvents = this.subEvents.filter((e) => e.name !== name);
+    }
+}
+exports.Event = Event;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 3. STATE HELPERS  (SRP: each class owns exactly one concern)
+// ══════════════════════════════════════════════════════════════════════════════
+// ── FocusManager  (SRP: focus-index bookkeeping extracted from Container) ────
+class FocusManager {
+    _focusables;
+    _idx = -1;
+    constructor(_focusables) {
+        this._focusables = _focusables;
+    }
+    get index() {
+        return this._idx;
+    }
+    get current() {
+        return this._focusables[this._idx];
+    }
+    get hasFocus() {
+        return this._idx >= 0;
+    }
+    focusAt(i) {
+        this._blurActive();
+        this._idx = Math.max(0, Math.min(i, this._focusables.length - 1));
+        this.current?.focus();
+    }
+    cycle(direction) {
+        const len = this._focusables.length;
+        if (len === 0)
+            return;
+        this._blurActive();
+        this._idx = (this._idx + direction + len) % len;
+        this.current?.focus();
+    }
+    clear() {
+        this._blurActive();
+        this._idx = -1;
+    }
+    initFirst() {
+        if (this._focusables.length > 0 && this._idx < 0)
+            this.focusAt(0);
+    }
+    _blurActive() {
+        this.current?.blur();
+    }
+}
+exports.FocusManager = FocusManager;
+// ── ScrollState  (SRP: 2-D scroll math extracted from Container & Textarea) ──
+class ScrollState {
+    _x = 0;
+    _y = 0;
+    get x() {
+        return this._x;
+    }
+    get y() {
+        return this._y;
+    }
+    setX(value, max) {
+        this._x = Math.max(0, Math.min(value, max));
+    }
+    setY(value, max) {
+        this._y = Math.max(0, Math.min(value, max));
+    }
+    /** Ensure a cursor column stays within a viewport of `viewportWidth`. */
+    clampHorizontal(cursor, viewportWidth) {
+        if (cursor < this._x)
+            this._x = cursor;
+        if (cursor >= this._x + viewportWidth)
+            this._x = cursor - viewportWidth + 1;
+        this._x = Math.max(0, this._x);
+    }
+    /** Ensure a cursor row stays within a viewport of `viewportHeight`. */
+    clampVertical(cursor, viewportHeight, maxScroll) {
+        if (cursor < this._y)
+            this._y = cursor;
+        if (cursor >= this._y + viewportHeight)
+            this._y = cursor - viewportHeight + 1;
+        this._y = Math.max(0, Math.min(this._y, maxScroll));
+    }
+}
+exports.ScrollState = ScrollState;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 4. WIDGET BASE  (LSP: all concrete widgets honour the contract)
+// ══════════════════════════════════════════════════════════════════════════════
+/**
+ * Abstract base satisfying IDimensional + IRenderable.
+ * Concrete subclasses must implement lineCount() and renderLine().
+ * naturalWidth() defaults to 0 (override when meaningful).
+ *
+ * Every widget receives an ITerminalWriter at construction time (DIP).
+ */
+class Widget {
+    writer;
+    constructor(writer = defaultWriter) {
+        this.writer = writer;
+    }
+    naturalWidth() {
+        return 0;
+    }
+}
+exports.Widget = Widget;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 5. SIMPLE DISPLAY WIDGETS
+// ══════════════════════════════════════════════════════════════════════════════
+// ── Label ────────────────────────────────────────────────────────────────────
+class Label extends Widget {
+    text;
+    color;
+    constructor(text, color = "white", writer) {
+        super(writer);
+        this.text = text;
+        this.color = color;
+    }
+    lineCount() {
+        return 1;
+    }
+    naturalWidth() {
+        return this.text.length;
+    }
+    renderLine(_li, row, col, maxWidth, scrollX = 0) {
+        this.writer.moveTo(row, col);
+        if (!this.text.length)
+            return;
+        const slice = this.text.slice(scrollX);
+        if (slice.length > maxWidth) {
+            this.writer.write((0, chalk_1.default) `{${this.color} ${slice.slice(0, maxWidth - 2)}}` +
+                (0, chalk_1.default) `{gray ..}`);
+        }
+        else {
+            this.writer.write((0, chalk_1.default) `{${this.color} ${slice}}`);
+        }
+    }
+}
+exports.Label = Label;
+// ── Command ──────────────────────────────────────────────────────────────────
+const KEY_SYMBOLS = {
+    backspace: "⌫",
+    ctrl: "⌃",
+    shift: "⇧",
+    alt: "⌥",
+    enter: "↵",
+    escape: "⎋",
+    tab: "⇥",
+    space: "␣",
+    up: "↑",
+    down: "↓",
+    left: "←",
+    right: "→",
+};
+class Command extends Widget {
+    label;
+    shortcut;
+    constructor(label, shortcut, writer) {
+        super(writer);
+        this.label = label;
+        this.shortcut = shortcut;
+    }
+    lineCount() {
+        return 1;
+    }
+    _segs() {
+        const out = [];
+        for (let i = 0; i < this.shortcut.length; i++) {
+            const lo = (this.shortcut[i] ?? "").toLowerCase();
+            const sym = KEY_SYMBOLS[lo] ?? this.shortcut[i] ?? "";
+            out.push({
+                plain: sym,
+                colour: lo in KEY_SYMBOLS ? "cyan" : "gray",
+            });
+            if (i < this.shortcut.length - 1)
+                out.push({ plain: " ", colour: "gray" });
+        }
+        out.push({ plain: " " + this.label, colour: "white" });
+        return out;
+    }
+    naturalWidth() {
+        return this._segs().reduce((s, seg) => s + seg.plain.length, 0);
+    }
+    renderLine(_li, row, col, maxWidth, scrollX = 0) {
+        let skip = scrollX;
+        let used = 0;
+        let out = "";
+        for (const seg of this._segs()) {
+            if (skip >= seg.plain.length) {
+                skip -= seg.plain.length;
+                continue;
+            }
+            const visible = seg.plain.slice(skip);
+            skip = 0;
+            const fits = maxWidth - used;
+            if (visible.length > fits) {
+                const cut = visible.slice(0, Math.max(0, fits - 2));
+                if (cut)
+                    out += (0, chalk_1.default) `{${seg.colour} ${cut}}`;
+                out += (0, chalk_1.default) `{gray ..}`;
+                // eslint-disable-next-line no-useless-assignment
+                used = maxWidth;
+                break;
+            }
+            out += (0, chalk_1.default) `{${seg.colour} ${visible}}`;
+            used += visible.length;
+            if (used >= maxWidth)
+                break;
+        }
+        if (!out)
+            return;
+        this.writer.moveTo(row, col);
+        this.writer.write(out);
+    }
+}
+exports.Command = Command;
+class Input extends Widget {
+    width;
+    placeholder;
+    type;
+    onChange;
+    _value = "";
+    _cursor = 0;
+    _scroll;
+    _focused = false;
+    constructor(width, placeholder = "", type = "text", onChange, writer) {
+        super(writer);
+        this.width = width;
+        this.placeholder = placeholder;
+        this.type = type;
+        this.onChange = onChange;
+        this._scroll = new ScrollState();
+    }
+    lineCount() {
+        return 1;
+    }
+    naturalWidth() {
+        return this.width;
+    }
+    getValue() {
+        return this._value;
+    }
+    setValue(v) {
+        this._value = v;
+        this._cursor = v.length;
+        this._clampScroll();
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+    }
+    handleKey(key) {
+        const n = key.name;
+        if (n === "left") {
+            this._cursor = Math.max(0, this._cursor - 1);
+        }
+        else if (n === "right") {
+            this._cursor = Math.min(this._value.length, this._cursor + 1);
+        }
+        else if (n === "home") {
+            this._cursor = 0;
+        }
+        else if (n === "end") {
+            this._cursor = this._value.length;
+        }
+        else if (n === "backspace") {
+            if (this._cursor > 0) {
+                this._value =
+                    this._value.slice(0, this._cursor - 1) +
+                        this._value.slice(this._cursor);
+                this._cursor--;
+                this.onChange?.(this._value);
+            }
+            this._clampScroll();
+            return true;
+        }
+        else if (n === "delete") {
+            if (this._cursor < this._value.length) {
+                this._value =
+                    this._value.slice(0, this._cursor) +
+                        this._value.slice(this._cursor + 1);
+                this.onChange?.(this._value);
+            }
+        }
+        else if (n !== "return" &&
+            n !== "escape" &&
+            n !== "tab" &&
+            key.sequence &&
+            !key.ctrl &&
+            !key.meta &&
+            key.sequence.length === 1) {
+            this._value =
+                this._value.slice(0, this._cursor) +
+                    key.sequence +
+                    this._value.slice(this._cursor);
+            this._cursor++;
+            this.onChange?.(this._value);
+        }
+        else {
+            return false;
+        }
+        this._clampScroll();
+        return true;
+    }
+    _clampScroll() {
+        this._scroll.clampHorizontal(this._cursor, this.width - 2);
+    }
+    _display() {
+        return this.type === "password"
+            ? "*".repeat(this._value.length)
+            : this._value;
+    }
+    renderLine(_li, row, col, maxWidth) {
+        const w = Math.min(this.width, maxWidth);
+        const inner = w - 2;
+        const bc = this._focused ? "white" : "gray";
+        const display = this._display();
+        const visible = display.slice(this._scroll.x, this._scroll.x + inner);
+        const relCursor = this._cursor - this._scroll.x;
+        let content;
+        if (!this._value.length && !this._focused) {
+            content = chalk_1.default.gray(this.placeholder.slice(0, inner).padEnd(inner));
+        }
+        else {
+            const padded = visible.padEnd(inner);
+            if (this._focused) {
+                const before = padded.slice(0, relCursor);
+                const cur = padded[relCursor] ?? " ";
+                const after = padded.slice(relCursor + 1);
+                content =
+                    chalk_1.default.white(before) +
+                        chalk_1.default.bgWhite.black(cur) +
+                        chalk_1.default.white(after);
+            }
+            else {
+                content = chalk_1.default.white(padded);
+            }
+        }
+        this.writer.moveTo(row, col);
+        this.writer.write(chalk_1.default.keyword(bc)("[") + content + chalk_1.default.keyword(bc)("]"));
+    }
+}
+exports.Input = Input;
+// ── Select ───────────────────────────────────────────────────────────────────
+class Select extends Widget {
+    width;
+    options;
+    onChange;
+    _open = false;
+    _focused = false;
+    _hovered;
+    _selected;
+    constructor(width, options, initialIndex = 0, onChange, writer) {
+        super(writer);
+        this.width = width;
+        this.options = options;
+        this.onChange = onChange;
+        this._selected = Math.max(0, Math.min(initialIndex, options.length - 1));
+        this._hovered = this._selected;
+    }
+    lineCount() {
+        return this._open ? 1 + this.options.length : 1;
+    }
+    naturalWidth() {
+        return this.width;
+    }
+    getIndex() {
+        return this._selected;
+    }
+    getValue() {
+        return this.options[this._selected] ?? "";
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+        this._open = false;
+    }
+    handleKey(key) {
+        const n = key.name;
+        if (!this._open) {
+            if (n === "return" || n === "space") {
+                this._open = true;
+                this._hovered = this._selected;
+                return true;
+            }
+            return false;
+        }
+        if (n === "up") {
+            this._hovered = Math.max(0, this._hovered - 1);
+            return true;
+        }
+        else if (n === "down") {
+            this._hovered = Math.min(this.options.length - 1, this._hovered + 1);
+            return true;
+        }
+        else if (n === "return") {
+            this._selected = this._hovered;
+            this._open = false;
+            this.onChange?.(this._selected, this.options[this._selected] ?? "");
+            return true;
+        }
+        else if (n === "escape") {
+            this._open = false;
+            return true;
+        }
+        return false;
+    }
+    activeLineHint() {
+        return this._open ? 1 + this._hovered : 0;
+    }
+    renderLine(li, row, col, maxWidth) {
+        const w = Math.min(this.width, maxWidth);
+        if (li === 0) {
+            const inner = w - 4;
+            const label = (this.options[this._selected] ?? "(none)")
+                .slice(0, inner)
+                .padEnd(inner);
+            const arrow = this._open ? "▴" : "▾";
+            const bc = this._focused
+                ? this._open
+                    ? "white"
+                    : "yellow"
+                : "gray";
+            this.writer.moveTo(row, col);
+            this.writer.write(chalk_1.default.keyword(bc)("[") +
+                chalk_1.default.white(" " + label) +
+                chalk_1.default.keyword(bc)(arrow + "]"));
+        }
+        else {
+            const optIdx = li - 1;
+            const opt = this.options[optIdx] ?? "";
+            const isHovered = optIdx === this._hovered;
+            const isSelected = optIdx === this._selected;
+            const inner = w - 3;
+            const label = opt.slice(0, inner).padEnd(inner);
+            const dot = isSelected ? "●" : "○";
+            this.writer.moveTo(row, col);
+            if (isHovered) {
+                this.writer.write(chalk_1.default.bgYellow.black(` ${dot} ${label.slice(0, w - 3)}`));
+            }
+            else {
+                this.writer.write(chalk_1.default.gray(` ${dot} `) + chalk_1.default.white(label.slice(0, w - 3)));
+            }
+        }
+    }
+}
+exports.Select = Select;
+// ── Radio ────────────────────────────────────────────────────────────────────
+class Radio extends Widget {
+    options;
+    onChange;
+    _focused = false;
+    _hovered;
+    _selected;
+    constructor(options, initialIndex = 0, onChange, writer) {
+        super(writer);
+        this.options = options;
+        this.onChange = onChange;
+        this._selected = Math.max(0, Math.min(initialIndex, options.length - 1));
+        this._hovered = this._selected;
+    }
+    lineCount() {
+        return this.options.length;
+    }
+    naturalWidth() {
+        return 3 + this.options.reduce((m, o) => Math.max(m, o.length), 0);
+    }
+    getIndex() {
+        return this._selected;
+    }
+    getValue() {
+        return this.options[this._selected] ?? "";
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+    }
+    handleKey(key) {
+        const n = key.name;
+        if (n === "up") {
+            this._hovered = Math.max(0, this._hovered - 1);
+            return true;
+        }
+        else if (n === "down") {
+            this._hovered = Math.min(this.options.length - 1, this._hovered + 1);
+            return true;
+        }
+        else if (n === "return" || n === "space") {
+            this._selected = this._hovered;
+            this.onChange?.(this._selected, this.options[this._selected] ?? "");
+            return true;
+        }
+        return false;
+    }
+    activeLineHint() {
+        return this._hovered;
+    }
+    renderLine(li, row, col, maxWidth) {
+        const opt = this.options[li] ?? "";
+        const isSelected = li === this._selected;
+        const isHovered = this._focused && li === this._hovered;
+        const dot = isSelected ? "◉" : "○";
+        const label = opt.slice(0, maxWidth - 3);
+        this.writer.moveTo(row, col);
+        if (isHovered && isSelected) {
+            this.writer.write(chalk_1.default.yellow(`${dot} `) + chalk_1.default.bgYellow.black(label));
+        }
+        else if (isHovered) {
+            this.writer.write(chalk_1.default.yellow(`${dot} `) + chalk_1.default.yellow(label));
+        }
+        else if (isSelected) {
+            this.writer.write(chalk_1.default.cyan(`${dot} `) + chalk_1.default.white(label));
+        }
+        else {
+            this.writer.write(chalk_1.default.gray(`${dot} `) + chalk_1.default.gray(label));
+        }
+    }
+}
+exports.Radio = Radio;
+// ── CheckBox ─────────────────────────────────────────────────────────────────
+class CheckBox extends Widget {
+    label;
+    onChange;
+    _focused = false;
+    _checked;
+    constructor(label, initialChecked = false, onChange, writer) {
+        super(writer);
+        this.label = label;
+        this.onChange = onChange;
+        this._checked = initialChecked;
+    }
+    lineCount() {
+        return 1;
+    }
+    naturalWidth() {
+        return 4 + this.label.length;
+    }
+    isChecked() {
+        return this._checked;
+    }
+    setChecked(v) {
+        this._checked = v;
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+    }
+    handleKey(key) {
+        if (key.name === "return" || key.name === "space") {
+            this._checked = !this._checked;
+            this.onChange?.(this._checked);
+            return true;
+        }
+        return false;
+    }
+    renderLine(_li, row, col, maxWidth) {
+        const bc = this._focused ? "yellow" : "gray";
+        const mark = this._checked ? chalk_1.default.green("✓") : " ";
+        const label = this.label.slice(0, maxWidth - 4);
+        const labelColor = this._focused ? "white" : "gray";
+        this.writer.moveTo(row, col);
+        this.writer.write(chalk_1.default.keyword(bc)("[") +
+            mark +
+            chalk_1.default.keyword(bc)("]") +
+            " " +
+            chalk_1.default.keyword(labelColor)(label));
+    }
+}
+exports.CheckBox = CheckBox;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 7. BUTTON  —  OCP via IButtonRenderer strategy
+// ══════════════════════════════════════════════════════════════════════════════
+// ── Built-in variant renderers ────────────────────────────────────────────────
+/** Default bordered button:  [ Label ] */
+class DefaultButtonRenderer {
+    render(writer, row, col, w, label, focused, pressed) {
+        const bc = pressed ? "green" : focused ? "white" : "gray";
+        const inner = w - 2;
+        const prefix = pressed ? chalk_1.default.green("▶") : " ";
+        const maxLabel = inner - 2;
+        const labelText = label.slice(0, maxLabel).padEnd(maxLabel);
+        const labelColour = focused || pressed ? "white" : "gray";
+        writer.moveTo(row, col);
+        writer.write(chalk_1.default.keyword(bc)("[") +
+            prefix +
+            chalk_1.default.keyword(labelColour)(labelText) +
+            chalk_1.default.keyword(bc)("]"));
+    }
+}
+exports.DefaultButtonRenderer = DefaultButtonRenderer;
+/** Filled primary button:  ▐ Label ▌ */
+class PrimaryButtonRenderer {
+    render(writer, row, col, w, label, _focused, pressed) {
+        const inner = w - 4;
+        const labelText = label.slice(0, inner).padEnd(inner);
+        writer.moveTo(row, col);
+        writer.write(pressed
+            ? chalk_1.default.bgGreen.black(`▐ ${labelText} ▌`)
+            : chalk_1.default.bgWhite.black(`▐ ${labelText} ▌`));
+    }
+}
+exports.PrimaryButtonRenderer = PrimaryButtonRenderer;
+/** Danger button:  [ Label ] in red */
+class DangerButtonRenderer {
+    render(writer, row, col, w, label, focused, pressed) {
+        const bc = pressed ? "white" : focused ? "red" : "gray";
+        const inner = w - 2;
+        const prefix = pressed ? chalk_1.default.white("!") : " ";
+        const maxLabel = inner - 2;
+        const labelText = label.slice(0, maxLabel).padEnd(maxLabel);
+        const labelColour = focused ? (pressed ? "white" : "red") : "gray";
+        writer.moveTo(row, col);
+        writer.write(chalk_1.default.keyword(bc)("[") +
+            prefix +
+            chalk_1.default.keyword(labelColour)(labelText) +
+            chalk_1.default.keyword(bc)("]"));
+    }
+}
+exports.DangerButtonRenderer = DangerButtonRenderer;
+const BUTTON_RENDERERS = {
+    default: new DefaultButtonRenderer(),
+    primary: new PrimaryButtonRenderer(),
+    danger: new DangerButtonRenderer(),
+};
+// ── Button widget ─────────────────────────────────────────────────────────────
+class Button extends Widget {
+    width;
+    label;
+    onClick;
+    onRender;
+    _focused = false;
+    _pressed = false;
+    _variantRenderer;
+    constructor(width, label, variantOrRenderer = "default", onClick, onRender, writer) {
+        super(writer);
+        this.width = width;
+        this.label = label;
+        this.onClick = onClick;
+        this.onRender = onRender;
+        this._variantRenderer =
+            typeof variantOrRenderer === "string"
+                ? BUTTON_RENDERERS[variantOrRenderer]
+                : variantOrRenderer;
+    }
+    lineCount() {
+        return 1;
+    }
+    naturalWidth() {
+        return this.width;
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+        this._pressed = false;
+    }
+    handleKey(key) {
+        if (key.name === "return" || key.name === "space") {
+            this._pressed = true;
+            this.onClick?.();
+            setTimeout(() => {
+                this._pressed = false;
+                this.onRender?.();
+            }, 120);
+            return true;
+        }
+        return false;
+    }
+    renderLine(_li, row, col, maxWidth) {
+        this._variantRenderer.render(this.writer, row, col, Math.min(this.width, maxWidth), this.label, this._focused, this._pressed);
+    }
+}
+exports.Button = Button;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 8. TEXTAREA
+// ══════════════════════════════════════════════════════════════════════════════
+class Textarea extends Widget {
+    width;
+    height;
+    placeholder;
+    onChange;
+    _lines;
+    _cursorRow = 0;
+    _cursorCol = 0;
+    _scroll;
+    _focused = false;
+    constructor(width, height, initialValue = "", placeholder = "", onChange, writer) {
+        super(writer);
+        this.width = width;
+        this.height = height;
+        this.placeholder = placeholder;
+        this.onChange = onChange;
+        this._lines = initialValue.length > 0 ? initialValue.split("\n") : [""];
+        this._scroll = new ScrollState();
+    }
+    iw() {
+        return this.width - 2;
+    }
+    ih() {
+        return this.height - 2;
+    }
+    lineCount() {
+        return this.height;
+    }
+    naturalWidth() {
+        return this.width;
+    }
+    getValue() {
+        return this._lines.join("\n");
+    }
+    setValue(v) {
+        this._lines = v.length > 0 ? v.split("\n") : [""];
+        this._cursorRow = 0;
+        this._cursorCol = 0;
+        this._scroll = new ScrollState();
+    }
+    isFocused() {
+        return this._focused;
+    }
+    focus() {
+        this._focused = true;
+    }
+    blur() {
+        this._focused = false;
+    }
+    activeLineHint() {
+        return 1 + (this._cursorRow - this._scroll.y);
+    }
+    handleKey(key) {
+        const n = key.name;
+        if (n === "tab" || n === "escape")
+            return false;
+        if (n === "left")
+            this._moveCursorLeft();
+        else if (n === "right")
+            this._moveCursorRight();
+        else if (n === "up")
+            this._moveCursorUp();
+        else if (n === "down")
+            this._moveCursorDown();
+        else if (n === "home") {
+            this._cursorCol = key.ctrl ? (this._cursorRow = 0) : 0;
+        }
+        else if (n === "end") {
+            if (key.ctrl) {
+                this._cursorRow = this._lines.length - 1;
+            }
+            this._cursorCol = this._currentLine().length;
+        }
+        else if (n === "backspace") {
+            this._deleteBackward();
+            this.onChange?.(this.getValue());
+        }
+        else if (n === "delete") {
+            this._deleteForward();
+            this.onChange?.(this.getValue());
+        }
+        else if (n === "return") {
+            this._insertNewline();
+            this.onChange?.(this.getValue());
+        }
+        else if (key.sequence &&
+            !key.ctrl &&
+            !key.meta &&
+            key.sequence.length === 1) {
+            this._insertChar(key.sequence);
+            this.onChange?.(this.getValue());
+        }
+        else {
+            return false;
+        }
+        this._clampScroll();
+        return true;
+    }
+    // ── Cursor helpers ────────────────────────────────────────────────────────
+    _currentLine() {
+        return this._lines[this._cursorRow] ?? "";
+    }
+    _moveCursorLeft() {
+        if (this._cursorCol > 0) {
+            this._cursorCol--;
+        }
+        else if (this._cursorRow > 0) {
+            this._cursorRow--;
+            this._cursorCol = this._currentLine().length;
+        }
+    }
+    _moveCursorRight() {
+        const line = this._currentLine();
+        if (this._cursorCol < line.length) {
+            this._cursorCol++;
+        }
+        else if (this._cursorRow < this._lines.length - 1) {
+            this._cursorRow++;
+            this._cursorCol = 0;
+        }
+    }
+    _moveCursorUp() {
+        if (this._cursorRow > 0) {
+            this._cursorRow--;
+            this._cursorCol = Math.min(this._cursorCol, this._currentLine().length);
+        }
+    }
+    _moveCursorDown() {
+        if (this._cursorRow < this._lines.length - 1) {
+            this._cursorRow++;
+            this._cursorCol = Math.min(this._cursorCol, this._currentLine().length);
+        }
+    }
+    // ── Edit helpers ──────────────────────────────────────────────────────────
+    _insertChar(ch) {
+        const line = this._currentLine();
+        this._lines[this._cursorRow] =
+            line.slice(0, this._cursorCol) + ch + line.slice(this._cursorCol);
+        this._cursorCol++;
+    }
+    _insertNewline() {
+        const line = this._currentLine();
+        this._lines[this._cursorRow] = line.slice(0, this._cursorCol);
+        this._lines.splice(this._cursorRow + 1, 0, line.slice(this._cursorCol));
+        this._cursorRow++;
+        this._cursorCol = 0;
+    }
+    _deleteBackward() {
+        if (this._cursorCol > 0) {
+            const line = this._currentLine();
+            this._lines[this._cursorRow] =
+                line.slice(0, this._cursorCol - 1) +
+                    line.slice(this._cursorCol);
+            this._cursorCol--;
+        }
+        else if (this._cursorRow > 0) {
+            const prevLine = this._lines[this._cursorRow - 1] ?? "";
+            this._cursorCol = prevLine.length;
+            this._lines[this._cursorRow - 1] = prevLine + this._currentLine();
+            this._lines.splice(this._cursorRow, 1);
+            this._cursorRow--;
+        }
+    }
+    _deleteForward() {
+        const line = this._currentLine();
+        if (this._cursorCol < line.length) {
+            this._lines[this._cursorRow] =
+                line.slice(0, this._cursorCol) +
+                    line.slice(this._cursorCol + 1);
+        }
+        else if (this._cursorRow < this._lines.length - 1) {
+            this._lines[this._cursorRow] =
+                line + (this._lines[this._cursorRow + 1] ?? "");
+            this._lines.splice(this._cursorRow + 1, 1);
+        }
+    }
+    _clampScroll() {
+        const maxScrollY = Math.max(0, this._lines.length - this.ih());
+        this._scroll.clampVertical(this._cursorRow, this.ih(), maxScrollY);
+        this._scroll.clampHorizontal(this._cursorCol, this.iw());
+    }
+    // ── Rendering ─────────────────────────────────────────────────────────────
+    renderLine(li, row, col, maxWidth) {
+        const w = Math.min(this.width, maxWidth);
+        const iw = w - 2;
+        const bc = this._focused ? "white" : "gray";
+        const b = (s) => chalk_1.default.keyword(bc)(s);
+        const isEmpty = this._lines.length === 1 && this._lines[0] === "";
+        if (li === 0) {
+            this.writer.moveTo(row, col);
+            this.writer.write(b("┌" + "─".repeat(iw) + "┐"));
+            return;
+        }
+        if (li === this.height - 1) {
+            this.writer.moveTo(row, col);
+            this.writer.write(b("└" + "─".repeat(iw) + "┘"));
+            return;
+        }
+        const visRow = li - 1;
+        const absRow = this._scroll.y + visRow;
+        const lineText = this._lines[absRow];
+        this.writer.moveTo(row, col);
+        if (lineText === undefined) {
+            this.writer.write(b("│") + " ".repeat(iw) + b("│"));
+            return;
+        }
+        if (isEmpty && !this._focused && visRow === 0) {
+            this.writer.write(b("│") +
+                chalk_1.default.gray(this.placeholder.slice(0, iw).padEnd(iw)) +
+                b("│"));
+            return;
+        }
+        const padded = lineText
+            .slice(this._scroll.x, this._scroll.x + iw)
+            .padEnd(iw);
+        if (this._focused && absRow === this._cursorRow) {
+            const relCol = this._cursorCol - this._scroll.x;
+            this.writer.write(b("│") +
+                chalk_1.default.white(padded.slice(0, relCol)) +
+                chalk_1.default.bgWhite.black(padded[relCol] ?? " ") +
+                chalk_1.default.white(padded.slice(relCol + 1)) +
+                b("│"));
+        }
+        else {
+            this.writer.write(b("│") + chalk_1.default.white(padded) + b("│"));
+        }
+    }
+}
+exports.Textarea = Textarea;
+class Container extends Widget {
+    style;
+    children;
+    state = "default";
+    _scroll;
+    _focus;
+    constructor(style, children, writer) {
+        super(writer);
+        this.style = style;
+        this.children = children;
+        this._scroll = new ScrollState();
+        const focusables = children.flatMap((c) => "isFocused" in c ? [c] : []);
+        this._focus = new FocusManager(focusables);
+    }
+    // ── Viewport helpers ──────────────────────────────────────────────────────
+    iw() {
+        return this.style.width - 4;
+    }
+    ih() {
+        return this.style.height - 3;
+    }
+    contentWidth() {
+        return this.iw() - 2;
+    }
+    _totalLines() {
+        return this.children.reduce((s, c) => s + c.lineCount(), 0);
+    }
+    _maxLineWidth() {
+        return this.children.reduce((m, c) => Math.max(m, c.naturalWidth()), 0);
+    }
+    _maxScrollY() {
+        return Math.max(0, this._totalLines() - this.ih());
+    }
+    _maxScrollX() {
+        return Math.max(0, this._maxLineWidth() - this.contentWidth());
+    }
+    // ── Public API ────────────────────────────────────────────────────────────
+    lineCount() {
+        return this.style.height;
+    }
+    getState() {
+        return this.state;
+    }
+    setState(s) {
+        this.state = s;
+    }
+    // ── Key handling ──────────────────────────────────────────────────────────
+    handleKey(key) {
+        if (this.state === "focus") {
+            this._handleFocusMode(key);
+        }
+        else if (this.state === "select" && key.name === "return") {
+            this.state = "focus";
+            this._focus.initFirst();
+            this._scrollToFocused();
+        }
+    }
+    _handleFocusMode(key) {
+        const n = key.name;
+        const active = this._focus.current;
+        // Delegate to focused child first
+        if (active) {
+            const consumed = active.handleKey(key);
+            if (consumed) {
+                this._scrollToFocused();
+                return;
+            }
+        }
+        // Tab / Shift+Tab: cycle focus
+        if (n === "tab") {
+            this._focus.cycle(key.shift ? -1 : 1);
+            this._scrollToFocused();
+            return;
+        }
+        // Escape: blur child → or exit focus mode
+        if (n === "escape") {
+            if (this._focus.hasFocus) {
+                this._focus.clear();
+            }
+            else {
+                this.state = "select";
+            }
+            return;
+        }
+        // No child focused: scroll container
+        if (!this._focus.hasFocus) {
+            if (n === "up")
+                this._scroll.setY(this._scroll.y - 1, this._maxScrollY());
+            if (n === "down")
+                this._scroll.setY(this._scroll.y + 1, this._maxScrollY());
+            if (n === "left")
+                this._scroll.setX(this._scroll.x - 1, this._maxScrollX());
+            if (n === "right")
+                this._scroll.setX(this._scroll.x + 1, this._maxScrollX());
+        }
+    }
+    /**
+     * SRP: scroll logic now lives here, using ScrollState's helpers.
+     * The FocusManager provides the target widget; we compute its line offset
+     * within the children list and delegate clamping to ScrollState.
+     */
+    _scrollToFocused() {
+        const target = this._focus.current;
+        if (!target)
+            return;
+        let lineOffset = 0;
+        for (const child of this.children) {
+            if (child === target) {
+                const hint = target.activeLineHint?.() ?? 0;
+                const targetLine = lineOffset + hint;
+                const topAnchor = lineOffset;
+                const ih = this.ih();
+                if (targetLine < this._scroll.y) {
+                    this._scroll.setY(Math.min(targetLine, topAnchor), this._maxScrollY());
+                }
+                else if (targetLine >= this._scroll.y + ih) {
+                    const desired = targetLine - ih + 1;
+                    this._scroll.setY(Math.min(desired, topAnchor), this._maxScrollY());
+                }
+                return;
+            }
+            lineOffset += child.lineCount();
+        }
+    }
+    // ── Rendering ─────────────────────────────────────────────────────────────
+    renderLine(_li, row, col) {
+        this._renderAt(row, col);
+    }
+    /** Convenience entry point when you know the absolute terminal position. */
+    renderAt(row, col) {
+        this._renderAt(row, col);
+    }
+    _renderAt(row, col) {
+        const w = this.style.width;
+        const ih = this.ih();
+        const iw = this.iw();
+        const tl = this._totalLines();
+        const cw = this.contentWidth();
+        const msY = this._maxScrollY();
+        const msX = this._maxScrollX();
+        const mlw = this._maxLineWidth();
+        const bc = this.state === "focus"
+            ? "white"
+            : this.state === "select"
+                ? "yellow"
+                : "gray";
+        const b = (s) => chalk_1.default.keyword(bc)(s);
+        // ── Top border ────────────────────────────────────────────────────────
+        const [tagChalk, tagLen] = this.state === "focus"
+            ? [chalk_1.default.red("⎋") + chalk_1.default.white("quit"), 5]
+            : [chalk_1.default.green("↵") + chalk_1.default.white("enter"), 6];
+        this.writer.moveTo(row, col);
+        this.writer.write(b("┌──┐") +
+            tagChalk +
+            b("┌" + "─".repeat(w - 4 - tagLen - 2) + "┐"));
+        // ── Content rows + vertical scrollbar ────────────────────────────────
+        const vThumbH = Math.max(1, Math.round((ih / Math.max(tl, 1)) * ih));
+        const vThumbTop = msY > 0 ? Math.round((this._scroll.y / msY) * (ih - vThumbH)) : 0;
+        for (let i = 0; i < ih; i++) {
+            const isThumb = i >= vThumbTop && i < vThumbTop + vThumbH;
+            const sbChar = isThumb ? chalk_1.default.white("┃") : chalk_1.default.gray("║");
+            this.writer.moveTo(row + 1 + i, col);
+            this.writer.write(b("│") + " ".repeat(iw) + sbChar + " " + b("│"));
+        }
+        const contentCol = col + 3;
+        let absLine = 0;
+        for (const child of this.children) {
+            for (let li = 0; li < child.lineCount(); li++) {
+                const vis = absLine - this._scroll.y;
+                if (vis >= 0 && vis < ih) {
+                    child.renderLine(li, row + 1 + vis, contentCol, cw, this._scroll.x);
+                }
+                absLine++;
+            }
+        }
+        // ── Horizontal scrollbar ──────────────────────────────────────────────
+        const hTrackLen = iw - 1;
+        const hThumbLen = mlw > 0
+            ? Math.max(1, Math.round((cw / mlw) * hTrackLen))
+            : hTrackLen;
+        const hThumbPos = msX > 0
+            ? Math.round((this._scroll.x / msX) * (hTrackLen - hThumbLen))
+            : 0;
+        let bar = "";
+        for (let i = 0; i < hTrackLen; i++) {
+            bar +=
+                i >= hThumbPos && i < hThumbPos + hThumbLen
+                    ? chalk_1.default.white("━")
+                    : chalk_1.default.gray("═");
+        }
+        bar += chalk_1.default.gray("╝");
+        this.writer.moveTo(row + 1 + ih, col);
+        this.writer.write(b("│") + " " + bar + " " + b("│"));
+        // ── Bottom border ─────────────────────────────────────────────────────
+        this.writer.moveTo(row + 2 + ih, col);
+        this.writer.write(b("└" + "─".repeat(w - 2) + "┘"));
+    }
+}
+exports.Container = Container;
+// ══════════════════════════════════════════════════════════════════════════════
+//  § 10. CONTAINER GROUP
+// ══════════════════════════════════════════════════════════════════════════════
+class ContainerGroup {
+    containers;
+    _sel = -1;
+    constructor(containers) {
+        this.containers = containers;
+    }
+    handleKey(key) {
+        // If any container is in focus mode, delegate to it exclusively
+        const focusedIdx = this.containers.findIndex((c) => c.getState() === "focus");
+        if (focusedIdx !== -1) {
+            this.containers[focusedIdx].handleKey(key);
+            return;
+        }
+        if (this._sel === -1) {
+            if (key.name === "right" || key.name === "tab") {
+                this._moveSel(key.shift ? this.containers.length - 1 : 0);
+            }
+            return;
+        }
+        const n = key.name;
+        if (n === "return") {
+            this.containers[this._sel].handleKey(key);
+        }
+        else if (n === "right" || (n === "tab" && !key.shift)) {
+            this._moveSel((this._sel + 1) % this.containers.length);
+        }
+        else if (n === "left" || (n === "tab" && key.shift)) {
+            this._moveSel((this._sel - 1 + this.containers.length) %
+                this.containers.length);
+        }
+        else if (n === "escape") {
+            this._clearSel();
+        }
+    }
+    _moveSel(i) {
+        if (this._sel >= 0)
+            this.containers[this._sel].setState("default");
+        this._sel = i;
+        this.containers[i].setState("select");
+    }
+    _clearSel() {
+        if (this._sel >= 0)
+            this.containers[this._sel].setState("default");
+        this._sel = -1;
+    }
+}
+exports.ContainerGroup = ContainerGroup;
+//# sourceMappingURL=index.js.map