@termuijs/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,746 @@
+// src/index.ts
+import {
+  Box,
+  Text,
+  Table,
+  List,
+  TextInput,
+  Gauge,
+  Sparkline,
+  StatusIndicator,
+  LogView,
+  ProgressBar,
+  Spinner,
+  Widget as Widget12
+} from "@termuijs/widgets";
+
+// src/Divider.ts
+import { Widget } from "@termuijs/widgets";
+import { mergeStyles, defaultStyle, styleToCellAttrs } from "@termuijs/core";
+var Divider = class extends Widget {
+  _char;
+  _color;
+  _title;
+  constructor(options = {}) {
+    super(mergeStyles(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 = 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
+import { Widget as Widget2 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles2, defaultStyle as defaultStyle2 } from "@termuijs/core";
+var Spacer = class extends Widget2 {
+  constructor(grow = 1) {
+    super(mergeStyles2(defaultStyle2(), { flexGrow: grow }));
+  }
+  _renderSelf(_screen) {
+  }
+};
+
+// src/Tabs.ts
+import { Widget as Widget3 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles3, defaultStyle as defaultStyle3, styleToCellAttrs as styleToCellAttrs2 } from "@termuijs/core";
+var Tabs = class extends Widget3 {
+  _tabs = [];
+  _activeIndex = 0;
+  _activeColor;
+  _inactiveColor;
+  focusable = true;
+  constructor(tabs, options = {}) {
+    super(mergeStyles3(defaultStyle3(), { 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 = styleToCellAttrs2(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
+import { Widget as Widget4 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles4, defaultStyle as defaultStyle4, styleToCellAttrs as styleToCellAttrs3, getBorderChars } from "@termuijs/core";
+var Modal = class extends Widget4 {
+  _title;
+  _modalWidth;
+  _modalHeight;
+  _borderColor;
+  _backdropChar;
+  _visible = false;
+  _content = null;
+  constructor(options = {}) {
+    super(mergeStyles4(defaultStyle4(), {}));
+    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 = styleToCellAttrs3(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 = 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 = styleToCellAttrs3(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
+import { Widget as Widget5 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles5, defaultStyle as defaultStyle5, styleToCellAttrs as styleToCellAttrs4 } from "@termuijs/core";
+var Select = class extends Widget5 {
+  _options;
+  _selectedIndex = 0;
+  _isOpen = false;
+  _placeholder;
+  _activeColor;
+  _onSelect;
+  focusable = true;
+  constructor(options, config = {}) {
+    super(mergeStyles5(defaultStyle5(), { 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 = styleToCellAttrs4(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
+import { Widget as Widget6 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles6, defaultStyle as defaultStyle6, styleToCellAttrs as styleToCellAttrs5 } from "@termuijs/core";
+var MultiSelect = class extends Widget6 {
+  _options;
+  _cursorIndex = 0;
+  _checked = /* @__PURE__ */ new Set();
+  _activeColor;
+  _checkChar;
+  _uncheckChar;
+  _onSubmit;
+  focusable = true;
+  constructor(options, config = {}) {
+    super(mergeStyles6(defaultStyle6(), { 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 = styleToCellAttrs5(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
+import { Widget as Widget7 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles7, defaultStyle as defaultStyle7, styleToCellAttrs as styleToCellAttrs6 } from "@termuijs/core";
+var Tree = class extends Widget7 {
+  _roots;
+  _cursorIndex = 0;
+  _activeColor;
+  _onSelect;
+  focusable = true;
+  constructor(roots, options = {}) {
+    super(mergeStyles7(defaultStyle7(), { 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 = styleToCellAttrs6(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
+import { Widget as Widget8 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles8, defaultStyle as defaultStyle8, styleToCellAttrs as styleToCellAttrs7 } from "@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 Widget8 {
+  _messages = [];
+  _position;
+  _durationMs;
+  _maxVisible;
+  constructor(options = {}) {
+    super(mergeStyles8(defaultStyle8(), {}));
+    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 = styleToCellAttrs7(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
+import { Widget as Widget9 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles9, defaultStyle as defaultStyle9, styleToCellAttrs as styleToCellAttrs8, getBorderChars as getBorderChars2 } from "@termuijs/core";
+var ConfirmDialog = class extends Widget9 {
+  _message;
+  _confirmLabel;
+  _cancelLabel;
+  _borderColor;
+  _selected = "confirm";
+  _visible = false;
+  _onConfirm;
+  _onCancel;
+  focusable = true;
+  constructor(options) {
+    super(mergeStyles9(defaultStyle9(), {}));
+    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 = styleToCellAttrs8(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 = getBorderChars2("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
+import { Widget as Widget10 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles10, defaultStyle as defaultStyle10, styleToCellAttrs as styleToCellAttrs9 } from "@termuijs/core";
+var Form = class extends Widget10 {
+  _fields;
+  _values = /* @__PURE__ */ new Map();
+  _errors = /* @__PURE__ */ new Map();
+  _activeField = 0;
+  _cursorPos = 0;
+  _labelColor;
+  _errorColor;
+  _activeColor;
+  _onSubmit;
+  focusable = true;
+  constructor(fields, options = {}) {
+    super(mergeStyles10(defaultStyle10(), { 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 = styleToCellAttrs9(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
+import { Widget as Widget11 } from "@termuijs/widgets";
+import { mergeStyles as mergeStyles11, defaultStyle as defaultStyle11, styleToCellAttrs as styleToCellAttrs10, getBorderChars as getBorderChars3 } from "@termuijs/core";
+var CommandPalette = class extends Widget11 {
+  _commands;
+  _filtered = [];
+  _query = "";
+  _cursorPos = 0;
+  _selectedIndex = 0;
+  _visible = false;
+  _placeholder;
+  _borderColor;
+  _activeColor;
+  _maxVisible;
+  focusable = true;
+  constructor(commands, options = {}) {
+    super(mergeStyles11(defaultStyle11(), {}));
+    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 = styleToCellAttrs10(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 = getBorderChars3("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);
+  }
+};
+export {
+  Box,
+  CommandPalette,
+  ConfirmDialog,
+  Divider,
+  Form,
+  Gauge,
+  List,
+  LogView,
+  Modal,
+  MultiSelect,
+  ProgressBar,
+  Select,
+  Spacer,
+  Sparkline,
+  Spinner,
+  StatusIndicator,
+  Table,
+  Tabs,
+  Text,
+  TextInput,
+  Toast,
+  Tree,
+  Widget12 as Widget
+};
+//# sourceMappingURL=index.js.map