@termuijs/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,780 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Box: () => import_widgets12.Box,
+  CommandPalette: () => CommandPalette,
+  ConfirmDialog: () => ConfirmDialog,
+  Divider: () => Divider,
+  Form: () => Form,
+  Gauge: () => import_widgets12.Gauge,
+  List: () => import_widgets12.List,
+  LogView: () => import_widgets12.LogView,
+  Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
+  ProgressBar: () => import_widgets12.ProgressBar,
+  Select: () => Select,
+  Spacer: () => Spacer,
+  Sparkline: () => import_widgets12.Sparkline,
+  Spinner: () => import_widgets12.Spinner,
+  StatusIndicator: () => import_widgets12.StatusIndicator,
+  Table: () => import_widgets12.Table,
+  Tabs: () => Tabs,
+  Text: () => import_widgets12.Text,
+  TextInput: () => import_widgets12.TextInput,
+  Toast: () => Toast,
+  Tree: () => Tree,
+  Widget: () => import_widgets12.Widget
+});
+module.exports = __toCommonJS(index_exports);
+var import_widgets12 = require("@termuijs/widgets");
+
+// src/Divider.ts
+var import_widgets = require("@termuijs/widgets");
+var import_core = require("@termuijs/core");
+var Divider = class extends import_widgets.Widget {
+  _char;
+  _color;
+  _title;
+  constructor(options = {}) {
+    super((0, import_core.mergeStyles)((0, import_core.defaultStyle)(), { height: 1 }));
+    this._char = options.char ?? "\u2500";
+    this._color = options.color;
+    this._title = options.title ?? "";
+  }
+  _renderSelf(screen) {
+    const { x, y, width } = this._rect;
+    if (width <= 0) return;
+    const attrs = (0, import_core.styleToCellAttrs)(this.style);
+    if (this._color) attrs.fg = this._color;
+    attrs.dim = true;
+    if (this._title) {
+      const titleStr = ` ${this._title} `;
+      const padLeft = Math.max(0, Math.floor((width - titleStr.length) / 2));
+      const padRight = Math.max(0, width - padLeft - titleStr.length);
+      const line = this._char.repeat(padLeft) + titleStr + this._char.repeat(padRight);
+      screen.writeString(x, y, line.slice(0, width), attrs);
+    } else {
+      screen.writeString(x, y, this._char.repeat(width), attrs);
+    }
+  }
+};
+
+// src/Spacer.ts
+var import_widgets2 = require("@termuijs/widgets");
+var import_core2 = require("@termuijs/core");
+var Spacer = class extends import_widgets2.Widget {
+  constructor(grow = 1) {
+    super((0, import_core2.mergeStyles)((0, import_core2.defaultStyle)(), { flexGrow: grow }));
+  }
+  _renderSelf(_screen) {
+  }
+};
+
+// src/Tabs.ts
+var import_widgets3 = require("@termuijs/widgets");
+var import_core3 = require("@termuijs/core");
+var Tabs = class extends import_widgets3.Widget {
+  _tabs = [];
+  _activeIndex = 0;
+  _activeColor;
+  _inactiveColor;
+  focusable = true;
+  constructor(tabs, options = {}) {
+    super((0, import_core3.mergeStyles)((0, import_core3.defaultStyle)(), { flexGrow: 1, border: options.border ?? "single" }));
+    this._tabs = tabs;
+    this._activeColor = options.activeColor ?? { type: "named", name: "cyan" };
+    this._inactiveColor = options.inactiveColor ?? { type: "named", name: "brightBlack" };
+  }
+  get activeIndex() {
+    return this._activeIndex;
+  }
+  selectTab(i) {
+    if (i >= 0 && i < this._tabs.length) this._activeIndex = i;
+  }
+  nextTab() {
+    this._activeIndex = (this._activeIndex + 1) % this._tabs.length;
+  }
+  prevTab() {
+    this._activeIndex = (this._activeIndex - 1 + this._tabs.length) % this._tabs.length;
+  }
+  get activeContent() {
+    return this._tabs[this._activeIndex]?.content;
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = (0, import_core3.styleToCellAttrs)(this.style);
+    let col = x;
+    for (let i = 0; i < this._tabs.length; i++) {
+      const tab = this._tabs[i];
+      const isActive = i === this._activeIndex;
+      const label = isActive ? ` \u25CF ${tab.label} ` : `   ${tab.label} `;
+      screen.writeString(col, y, label, {
+        ...attrs,
+        fg: isActive ? this._activeColor : this._inactiveColor,
+        bold: isActive,
+        dim: !isActive
+      });
+      col += label.length;
+      if (i < this._tabs.length - 1) {
+        screen.writeString(col, y, "\u2502", { ...attrs, dim: true });
+        col++;
+      }
+    }
+    if (height > 1) screen.writeString(x, y + 1, "\u2500".repeat(width), { ...attrs, dim: true });
+  }
+};
+
+// src/Modal.ts
+var import_widgets4 = require("@termuijs/widgets");
+var import_core4 = require("@termuijs/core");
+var Modal = class extends import_widgets4.Widget {
+  _title;
+  _modalWidth;
+  _modalHeight;
+  _borderColor;
+  _backdropChar;
+  _visible = false;
+  _content = null;
+  constructor(options = {}) {
+    super((0, import_core4.mergeStyles)((0, import_core4.defaultStyle)(), {}));
+    this._title = options.title ?? "";
+    this._modalWidth = options.width ?? 50;
+    this._modalHeight = options.height ?? 15;
+    this._borderColor = options.borderColor ?? { type: "named", name: "cyan" };
+    this._backdropChar = options.backdropChar ?? "\u2591";
+  }
+  get visible() {
+    return this._visible;
+  }
+  show() {
+    this._visible = true;
+  }
+  hide() {
+    this._visible = false;
+  }
+  toggle() {
+    this._visible = !this._visible;
+  }
+  setContent(content) {
+    this._content = content;
+  }
+  _renderSelf(screen) {
+    if (!this._visible) return;
+    const { x, y, width, height } = this._rect;
+    const attrs = (0, import_core4.styleToCellAttrs)(this.style);
+    for (let r = 0; r < height; r++) {
+      screen.writeString(x, y + r, this._backdropChar.repeat(width), { ...attrs, dim: true });
+    }
+    const mw = Math.min(this._modalWidth, width - 4);
+    const mh = Math.min(this._modalHeight, height - 2);
+    const mx = x + Math.floor((width - mw) / 2);
+    const my = y + Math.floor((height - mh) / 2);
+    const border = (0, import_core4.getBorderChars)("single");
+    if (!border) return;
+    const bAttrs = { ...attrs, fg: this._borderColor };
+    const titleStr = this._title ? ` ${this._title} ` : "";
+    const topFill = mw - 2 - titleStr.length;
+    const tl = Math.floor(topFill / 2);
+    const tr = topFill - tl;
+    screen.writeString(mx, my, border.topLeft + border.top.repeat(tl) + titleStr + border.top.repeat(Math.max(0, tr)) + border.topRight, bAttrs);
+    const clr = (0, import_core4.styleToCellAttrs)(this.style);
+    for (let r = 1; r < mh - 1; r++) {
+      screen.writeString(mx, my + r, border.left, bAttrs);
+      screen.writeString(mx + 1, my + r, " ".repeat(mw - 2), clr);
+      screen.writeString(mx + mw - 1, my + r, border.right, bAttrs);
+    }
+    screen.writeString(mx, my + mh - 1, border.bottomLeft + border.bottom.repeat(mw - 2) + border.bottomRight, bAttrs);
+    if (this._content) {
+      const cr = { x: mx + 2, y: my + 1, width: mw - 4, height: mh - 2 };
+      this._content._rect = cr;
+      this._content._renderSelf(screen);
+    }
+  }
+};
+
+// src/Select.ts
+var import_widgets5 = require("@termuijs/widgets");
+var import_core5 = require("@termuijs/core");
+var Select = class extends import_widgets5.Widget {
+  _options;
+  _selectedIndex = 0;
+  _isOpen = false;
+  _placeholder;
+  _activeColor;
+  _onSelect;
+  focusable = true;
+  constructor(options, config = {}) {
+    super((0, import_core5.mergeStyles)((0, import_core5.defaultStyle)(), { height: 1 }));
+    this._options = options;
+    this._placeholder = config.placeholder ?? "Select...";
+    this._activeColor = config.activeColor ?? { type: "named", name: "cyan" };
+    this._onSelect = config.onSelect;
+  }
+  get selectedOption() {
+    return this._options[this._selectedIndex];
+  }
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  get isOpen() {
+    return this._isOpen;
+  }
+  open() {
+    this._isOpen = true;
+  }
+  close() {
+    this._isOpen = false;
+  }
+  toggle() {
+    this._isOpen = !this._isOpen;
+  }
+  selectNext() {
+    let n = this._selectedIndex + 1;
+    while (n < this._options.length && this._options[n].disabled) n++;
+    if (n < this._options.length) this._selectedIndex = n;
+  }
+  selectPrev() {
+    let n = this._selectedIndex - 1;
+    while (n >= 0 && this._options[n].disabled) n--;
+    if (n >= 0) this._selectedIndex = n;
+  }
+  confirm() {
+    const opt = this._options[this._selectedIndex];
+    if (opt && !opt.disabled) {
+      this._onSelect?.(opt, this._selectedIndex);
+      this._isOpen = false;
+    }
+  }
+  _renderSelf(screen) {
+    const { x, y, width } = this._rect;
+    if (width <= 0) return;
+    const attrs = (0, import_core5.styleToCellAttrs)(this.style);
+    const sel = this._options[this._selectedIndex];
+    const label = sel ? sel.label : this._placeholder;
+    const prefix = this._isOpen ? "\u25BC " : "\u25B6 ";
+    screen.writeString(x, y, prefix + label.slice(0, width - 2), { ...attrs, fg: this._activeColor });
+    if (this._isOpen) {
+      for (let i = 0; i < this._options.length; i++) {
+        const o = this._options[i];
+        const isSel = i === this._selectedIndex;
+        const m = isSel ? "\u25CF " : "  ";
+        screen.writeString(x, y + 1 + i, m + o.label.slice(0, width - 2), {
+          ...attrs,
+          fg: o.disabled ? { type: "named", name: "brightBlack" } : isSel ? this._activeColor : attrs.fg,
+          bold: isSel,
+          dim: o.disabled
+        });
+      }
+    }
+  }
+};
+
+// src/MultiSelect.ts
+var import_widgets6 = require("@termuijs/widgets");
+var import_core6 = require("@termuijs/core");
+var MultiSelect = class extends import_widgets6.Widget {
+  _options;
+  _cursorIndex = 0;
+  _checked = /* @__PURE__ */ new Set();
+  _activeColor;
+  _checkChar;
+  _uncheckChar;
+  _onSubmit;
+  focusable = true;
+  constructor(options, config = {}) {
+    super((0, import_core6.mergeStyles)((0, import_core6.defaultStyle)(), { height: Math.max(options.length, 1) }));
+    this._options = options;
+    this._activeColor = config.activeColor ?? { type: "named", name: "cyan" };
+    this._checkChar = config.checkChar ?? "\u25FC";
+    this._uncheckChar = config.uncheckChar ?? "\u25FB";
+    this._onSubmit = config.onSubmit;
+  }
+  get selectedOptions() {
+    return [...this._checked].sort().map((i) => this._options[i]);
+  }
+  selectNext() {
+    let n = this._cursorIndex + 1;
+    while (n < this._options.length && this._options[n].disabled) n++;
+    if (n < this._options.length) this._cursorIndex = n;
+  }
+  selectPrev() {
+    let n = this._cursorIndex - 1;
+    while (n >= 0 && this._options[n].disabled) n--;
+    if (n >= 0) this._cursorIndex = n;
+  }
+  toggleCurrent() {
+    const o = this._options[this._cursorIndex];
+    if (o && !o.disabled) {
+      this._checked.has(this._cursorIndex) ? this._checked.delete(this._cursorIndex) : this._checked.add(this._cursorIndex);
+    }
+  }
+  submit() {
+    this._onSubmit?.(this.selectedOptions);
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = (0, import_core6.styleToCellAttrs)(this.style);
+    for (let i = 0; i < this._options.length && i < height; i++) {
+      const o = this._options[i];
+      const active = i === this._cursorIndex;
+      const checked = this._checked.has(i);
+      const label = `${active ? "\u276F " : "  "}${checked ? this._checkChar : this._uncheckChar} ${o.label}`;
+      screen.writeString(x, y + i, label.slice(0, width), {
+        ...attrs,
+        fg: o.disabled ? { type: "named", name: "brightBlack" } : active ? this._activeColor : attrs.fg,
+        bold: active,
+        dim: o.disabled
+      });
+    }
+  }
+};
+
+// src/Tree.ts
+var import_widgets7 = require("@termuijs/widgets");
+var import_core7 = require("@termuijs/core");
+var Tree = class extends import_widgets7.Widget {
+  _roots;
+  _cursorIndex = 0;
+  _activeColor;
+  _onSelect;
+  focusable = true;
+  constructor(roots, options = {}) {
+    super((0, import_core7.mergeStyles)((0, import_core7.defaultStyle)(), { flexGrow: 1 }));
+    this._roots = roots;
+    this._activeColor = options.activeColor ?? { type: "named", name: "cyan" };
+    this._onSelect = options.onSelect;
+  }
+  _flatten() {
+    const result = [];
+    const walk = (nodes, depth, path) => {
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        const hasChildren = (node.children?.length ?? 0) > 0;
+        result.push({ node, depth, path: [...path, i], hasChildren });
+        if (hasChildren && node.expanded) walk(node.children, depth + 1, [...path, i]);
+      }
+    };
+    walk(this._roots, 0, []);
+    return result;
+  }
+  selectNext() {
+    const f = this._flatten();
+    if (this._cursorIndex < f.length - 1) this._cursorIndex++;
+  }
+  selectPrev() {
+    if (this._cursorIndex > 0) this._cursorIndex--;
+  }
+  toggleExpand() {
+    const f = this._flatten();
+    const it = f[this._cursorIndex];
+    if (it?.hasChildren) it.node.expanded = !it.node.expanded;
+  }
+  confirm() {
+    const f = this._flatten();
+    const it = f[this._cursorIndex];
+    if (it) {
+      it.hasChildren ? this.toggleExpand() : this._onSelect?.(it.node, it.path);
+    }
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = (0, import_core7.styleToCellAttrs)(this.style);
+    const flat = this._flatten();
+    for (let i = 0; i < flat.length && i < height; i++) {
+      const it = flat[i];
+      const active = i === this._cursorIndex;
+      const indent = "  ".repeat(it.depth);
+      const icon = it.hasChildren ? it.node.expanded ? "\u25BC " : "\u25B6 " : "  ";
+      const nodeIcon = it.node.icon ? `${it.node.icon} ` : "";
+      const line = `${indent}${icon}${nodeIcon}${it.node.label}`;
+      screen.writeString(x, y + i, line.slice(0, width), { ...attrs, fg: active ? this._activeColor : attrs.fg, bold: active });
+    }
+  }
+};
+
+// src/Toast.ts
+var import_widgets8 = require("@termuijs/widgets");
+var import_core8 = require("@termuijs/core");
+var ICONS = { info: "\u2139", success: "\u2713", warning: "\u26A0", error: "\u2717" };
+var COLORS = { info: "cyan", success: "green", warning: "yellow", error: "red" };
+var Toast = class extends import_widgets8.Widget {
+  _messages = [];
+  _position;
+  _durationMs;
+  _maxVisible;
+  constructor(options = {}) {
+    super((0, import_core8.mergeStyles)((0, import_core8.defaultStyle)(), {}));
+    this._position = options.position ?? "top-right";
+    this._durationMs = options.durationMs ?? 3e3;
+    this._maxVisible = options.maxVisible ?? 5;
+  }
+  push(text, type = "info") {
+    this._messages.push({ text, type, expireAt: Date.now() + this._durationMs });
+  }
+  info(text) {
+    this.push(text, "info");
+  }
+  success(text) {
+    this.push(text, "success");
+  }
+  warning(text) {
+    this.push(text, "warning");
+  }
+  error(text) {
+    this.push(text, "error");
+  }
+  _renderSelf(screen) {
+    const now = Date.now();
+    this._messages = this._messages.filter((m) => m.expireAt > now);
+    if (this._messages.length === 0) return;
+    const { x, y, width, height } = this._rect;
+    const visible = this._messages.slice(-this._maxVisible);
+    const tw = Math.min(40, width - 2);
+    const isRight = this._position.includes("right");
+    const isBottom = this._position.includes("bottom");
+    const sx = isRight ? x + width - tw - 1 : x + 1;
+    const sy = isBottom ? y + height - visible.length - 1 : y + 1;
+    const attrs = (0, import_core8.styleToCellAttrs)(this.style);
+    for (let i = 0; i < visible.length; i++) {
+      const m = visible[i];
+      const label = ` ${ICONS[m.type]} ${m.text} `.slice(0, tw).padEnd(tw);
+      screen.writeString(sx, sy + i, label, { ...attrs, fg: { type: "named", name: COLORS[m.type] }, bold: true });
+    }
+  }
+};
+
+// src/ConfirmDialog.ts
+var import_widgets9 = require("@termuijs/widgets");
+var import_core9 = require("@termuijs/core");
+var ConfirmDialog = class extends import_widgets9.Widget {
+  _message;
+  _confirmLabel;
+  _cancelLabel;
+  _borderColor;
+  _selected = "confirm";
+  _visible = false;
+  _onConfirm;
+  _onCancel;
+  focusable = true;
+  constructor(options) {
+    super((0, import_core9.mergeStyles)((0, import_core9.defaultStyle)(), {}));
+    this._message = options.message;
+    this._confirmLabel = options.confirmLabel ?? "Yes";
+    this._cancelLabel = options.cancelLabel ?? "No";
+    this._borderColor = options.borderColor ?? { type: "named", name: "yellow" };
+    this._onConfirm = options.onConfirm;
+    this._onCancel = options.onCancel;
+  }
+  get visible() {
+    return this._visible;
+  }
+  show() {
+    this._visible = true;
+    this._selected = "confirm";
+  }
+  hide() {
+    this._visible = false;
+  }
+  selectConfirm() {
+    this._selected = "confirm";
+  }
+  selectCancel() {
+    this._selected = "cancel";
+  }
+  toggleSelection() {
+    this._selected = this._selected === "confirm" ? "cancel" : "confirm";
+  }
+  confirm() {
+    (this._selected === "confirm" ? this._onConfirm : this._onCancel)?.();
+    this._visible = false;
+  }
+  _renderSelf(screen) {
+    if (!this._visible) return;
+    const { x, y, width, height } = this._rect;
+    const attrs = (0, import_core9.styleToCellAttrs)(this.style);
+    for (let r = 0; r < height; r++) screen.writeString(x, y + r, "\u2591".repeat(width), { ...attrs, dim: true });
+    const bw = Math.min(40, width - 4);
+    const bh = 5;
+    const bx = x + Math.floor((width - bw) / 2);
+    const by = y + Math.floor((height - bh) / 2);
+    const border = (0, import_core9.getBorderChars)("single");
+    if (!border) return;
+    const ba = { ...attrs, fg: this._borderColor };
+    screen.writeString(bx, by, border.topLeft + border.top.repeat(bw - 2) + border.topRight, ba);
+    for (let r = 1; r < bh - 1; r++) {
+      screen.writeString(bx, by + r, border.left, ba);
+      screen.writeString(bx + 1, by + r, " ".repeat(bw - 2), attrs);
+      screen.writeString(bx + bw - 1, by + r, border.right, ba);
+    }
+    screen.writeString(bx, by + bh - 1, border.bottomLeft + border.bottom.repeat(bw - 2) + border.bottomRight, ba);
+    screen.writeString(bx + 2, by + 1, this._message.slice(0, bw - 4), { ...attrs, bold: true });
+    const yesStr = this._selected === "confirm" ? ` [${this._confirmLabel}] ` : `  ${this._confirmLabel}  `;
+    const noStr = this._selected === "cancel" ? ` [${this._cancelLabel}] ` : `  ${this._cancelLabel}  `;
+    screen.writeString(bx + 2, by + 3, yesStr, { ...attrs, fg: this._selected === "confirm" ? { type: "named", name: "green" } : attrs.fg, bold: this._selected === "confirm" });
+    screen.writeString(bx + 2 + yesStr.length + 2, by + 3, noStr, { ...attrs, fg: this._selected === "cancel" ? { type: "named", name: "red" } : attrs.fg, bold: this._selected === "cancel" });
+  }
+};
+
+// src/Form.ts
+var import_widgets10 = require("@termuijs/widgets");
+var import_core10 = require("@termuijs/core");
+var Form = class extends import_widgets10.Widget {
+  _fields;
+  _values = /* @__PURE__ */ new Map();
+  _errors = /* @__PURE__ */ new Map();
+  _activeField = 0;
+  _cursorPos = 0;
+  _labelColor;
+  _errorColor;
+  _activeColor;
+  _onSubmit;
+  focusable = true;
+  constructor(fields, options = {}) {
+    super((0, import_core10.mergeStyles)((0, import_core10.defaultStyle)(), { height: fields.length * 2 + 1, flexGrow: 1 }));
+    this._fields = fields;
+    this._labelColor = options.labelColor ?? { type: "named", name: "cyan" };
+    this._errorColor = options.errorColor ?? { type: "named", name: "red" };
+    this._activeColor = options.activeColor ?? { type: "named", name: "cyan" };
+    this._onSubmit = options.onSubmit;
+    for (const f of fields) this._values.set(f.name, "");
+  }
+  get values() {
+    const r = {};
+    for (const [k, v] of this._values) r[k] = v;
+    return r;
+  }
+  nextField() {
+    if (this._activeField < this._fields.length) {
+      this._activeField++;
+      this._cursorPos = 0;
+    }
+  }
+  prevField() {
+    if (this._activeField > 0) {
+      this._activeField--;
+      this._cursorPos = (this._values.get(this._fields[this._activeField].name) ?? "").length;
+    }
+  }
+  insertChar(ch) {
+    if (this._activeField >= this._fields.length) return;
+    const f = this._fields[this._activeField];
+    const cur = this._values.get(f.name) ?? "";
+    this._values.set(f.name, cur.slice(0, this._cursorPos) + ch + cur.slice(this._cursorPos));
+    this._cursorPos++;
+    this._errors.delete(f.name);
+  }
+  deleteBack() {
+    if (this._activeField >= this._fields.length) return;
+    const f = this._fields[this._activeField];
+    const cur = this._values.get(f.name) ?? "";
+    if (this._cursorPos > 0) {
+      this._values.set(f.name, cur.slice(0, this._cursorPos - 1) + cur.slice(this._cursorPos));
+      this._cursorPos--;
+    }
+  }
+  submit() {
+    this._errors.clear();
+    let hasErr = false;
+    for (const f of this._fields) {
+      const v = this._values.get(f.name) ?? "";
+      if (f.required && !v.trim()) {
+        this._errors.set(f.name, `${f.label} is required`);
+        hasErr = true;
+      }
+      if (f.validate) {
+        const e = f.validate(v);
+        if (e) {
+          this._errors.set(f.name, e);
+          hasErr = true;
+        }
+      }
+    }
+    if (!hasErr) this._onSubmit?.(this.values);
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = (0, import_core10.styleToCellAttrs)(this.style);
+    let row = 0;
+    for (let i = 0; i < this._fields.length && row < height - 1; i++) {
+      const f = this._fields[i];
+      const active = i === this._activeField;
+      const val = this._values.get(f.name) ?? "";
+      const err = this._errors.get(f.name);
+      screen.writeString(x, y + row, `${f.label}${f.required ? " *" : ""}:`.slice(0, width), { ...attrs, fg: err ? this._errorColor : this._labelColor, bold: active });
+      row++;
+      if (row >= height) break;
+      const display = val || (f.placeholder ?? "");
+      screen.writeString(x, y + row, `${active ? "\u276F " : "  "}${display}`.slice(0, width), { ...attrs, fg: active ? this._activeColor : attrs.fg, dim: !val && !!f.placeholder });
+      row++;
+    }
+    if (row < height) {
+      const isSub = this._activeField >= this._fields.length;
+      screen.writeString(x, y + row, isSub ? "  [ Submit ]" : "    Submit  ", { ...attrs, fg: isSub ? { type: "named", name: "green" } : attrs.fg, bold: isSub });
+    }
+  }
+};
+
+// src/CommandPalette.ts
+var import_widgets11 = require("@termuijs/widgets");
+var import_core11 = require("@termuijs/core");
+var CommandPalette = class extends import_widgets11.Widget {
+  _commands;
+  _filtered = [];
+  _query = "";
+  _cursorPos = 0;
+  _selectedIndex = 0;
+  _visible = false;
+  _placeholder;
+  _borderColor;
+  _activeColor;
+  _maxVisible;
+  focusable = true;
+  constructor(commands, options = {}) {
+    super((0, import_core11.mergeStyles)((0, import_core11.defaultStyle)(), {}));
+    this._commands = commands;
+    this._filtered = [...commands];
+    this._placeholder = options.placeholder ?? "Type a command...";
+    this._borderColor = options.borderColor ?? { type: "named", name: "cyan" };
+    this._activeColor = options.activeColor ?? { type: "named", name: "cyan" };
+    this._maxVisible = options.maxVisible ?? 10;
+  }
+  get visible() {
+    return this._visible;
+  }
+  show() {
+    this._visible = true;
+    this._query = "";
+    this._cursorPos = 0;
+    this._selectedIndex = 0;
+    this._filtered = [...this._commands];
+  }
+  hide() {
+    this._visible = false;
+  }
+  toggle() {
+    this._visible ? this.hide() : this.show();
+  }
+  insertChar(ch) {
+    this._query = this._query.slice(0, this._cursorPos) + ch + this._query.slice(this._cursorPos);
+    this._cursorPos++;
+    this._filter();
+  }
+  deleteBack() {
+    if (this._cursorPos > 0) {
+      this._query = this._query.slice(0, this._cursorPos - 1) + this._query.slice(this._cursorPos);
+      this._cursorPos--;
+      this._filter();
+    }
+  }
+  selectNext() {
+    if (this._selectedIndex < this._filtered.length - 1) this._selectedIndex++;
+  }
+  selectPrev() {
+    if (this._selectedIndex > 0) this._selectedIndex--;
+  }
+  confirm() {
+    const c = this._filtered[this._selectedIndex];
+    if (c) {
+      this.hide();
+      c.action();
+    }
+  }
+  _filter() {
+    const q = this._query.toLowerCase();
+    if (!q) {
+      this._filtered = [...this._commands];
+    } else {
+      this._filtered = this._commands.filter((c) => {
+        const l = c.label.toLowerCase();
+        let qi = 0;
+        for (let i = 0; i < l.length && qi < q.length; i++) {
+          if (l[i] === q[qi]) qi++;
+        }
+        return qi === q.length;
+      });
+    }
+    this._selectedIndex = 0;
+  }
+  _renderSelf(screen) {
+    if (!this._visible) return;
+    const { x, y, width, height } = this._rect;
+    const attrs = (0, import_core11.styleToCellAttrs)(this.style);
+    for (let r = 0; r < height; r++) screen.writeString(x, y + r, "\u2591".repeat(width), { ...attrs, dim: true });
+    const vis = this._filtered.slice(0, this._maxVisible);
+    const bw = Math.min(60, width - 4);
+    const bh = Math.min(vis.length + 3, height - 2);
+    const bx = x + Math.floor((width - bw) / 2);
+    const by = y + 2;
+    const border = (0, import_core11.getBorderChars)("single");
+    if (!border) return;
+    const ba = { ...attrs, fg: this._borderColor };
+    screen.writeString(bx, by, border.topLeft + border.top.repeat(bw - 2) + border.topRight, ba);
+    screen.writeString(bx, by + 1, border.left, ba);
+    const input = this._query || this._placeholder;
+    screen.writeString(bx + 1, by + 1, (" \u{1F50D} " + input).slice(0, bw - 2).padEnd(bw - 2), { ...attrs, dim: !this._query });
+    screen.writeString(bx + bw - 1, by + 1, border.right, ba);
+    screen.writeString(bx, by + 2, border.left + "\u2500".repeat(bw - 2) + border.right, ba);
+    for (let i = 0; i < vis.length && i + 3 < bh - 1; i++) {
+      const c = vis[i];
+      const active = i === this._selectedIndex;
+      const label = (active ? "\u276F " : "  ") + c.label;
+      const sc = c.shortcut ?? "";
+      screen.writeString(bx, by + 3 + i, border.left, ba);
+      screen.writeString(bx + 1, by + 3 + i, (" " + label).slice(0, bw - sc.length - 3).padEnd(bw - sc.length - 3), { ...attrs, fg: active ? this._activeColor : attrs.fg, bold: active });
+      if (sc) screen.writeString(bx + bw - sc.length - 2, by + 3 + i, sc, { ...attrs, dim: true });
+      screen.writeString(bx + bw - 1, by + 3 + i, border.right, ba);
+    }
+    const last = Math.min(by + 3 + vis.length, by + bh - 1);
+    screen.writeString(bx, last, border.bottomLeft + border.bottom.repeat(bw - 2) + border.bottomRight, ba);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  CommandPalette,
+  ConfirmDialog,
+  Divider,
+  Form,
+  Gauge,
+  List,
+  LogView,
+  Modal,
+  MultiSelect,
+  ProgressBar,
+  Select,
+  Spacer,
+  Sparkline,
+  Spinner,
+  StatusIndicator,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+  Toast,
+  Tree,
+  Widget
+});
+//# sourceMappingURL=index.cjs.map