@termuijs/ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -11,7 +11,7 @@ import {
   LogView,
   ProgressBar,
   Spinner,
-  Widget as Widget12
+  Widget as Widget17
 } from "@termuijs/widgets";
 
 // src/Divider.ts
@@ -58,7 +58,7 @@ var Spacer = class extends Widget2 {
 
 // src/Tabs.ts
 import { Widget as Widget3 } from "@termuijs/widgets";
-import { mergeStyles as mergeStyles3, defaultStyle as defaultStyle3, styleToCellAttrs as styleToCellAttrs2 } from "@termuijs/core";
+import { mergeStyles as mergeStyles3, defaultStyle as defaultStyle3, styleToCellAttrs as styleToCellAttrs2, caps } from "@termuijs/core";
 var Tabs = class extends Widget3 {
   _tabs = [];
   _activeIndex = 0;
@@ -99,7 +99,7 @@ var Tabs = class extends Widget3 {
     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} `;
+      const label = isActive ? ` ${caps.unicode ? "\u25CF" : "*"} ${tab.label} ` : `   ${tab.label} `;
       screen.writeString(col, y, label, {
         ...attrs,
         fg: isActive ? this._activeColor : this._inactiveColor,
@@ -108,7 +108,7 @@ var Tabs = class extends Widget3 {
       });
       col += label.length;
       if (i < this._tabs.length - 1) {
-        screen.writeString(col, y, "\u2502", { ...attrs, dim: true });
+        screen.writeString(col, y, caps.unicode ? "\u2502" : "|", { ...attrs, dim: true });
         col++;
       }
     }
@@ -118,7 +118,7 @@ var Tabs = class extends Widget3 {
 
 // src/Modal.ts
 import { Widget as Widget4 } from "@termuijs/widgets";
-import { mergeStyles as mergeStyles4, defaultStyle as defaultStyle4, styleToCellAttrs as styleToCellAttrs3, getBorderChars } from "@termuijs/core";
+import { mergeStyles as mergeStyles4, defaultStyle as defaultStyle4, styleToCellAttrs as styleToCellAttrs3, getBorderChars, caps as caps2 } from "@termuijs/core";
 var Modal = class extends Widget4 {
   _title;
   _modalWidth;
@@ -133,7 +133,7 @@ var Modal = class extends Widget4 {
     this._modalWidth = options.width ?? 50;
     this._modalHeight = options.height ?? 15;
     this._borderColor = options.borderColor ?? { type: "named", name: "cyan" };
-    this._backdropChar = options.backdropChar ?? "\u2591";
+    this._backdropChar = options.backdropChar ?? (caps2.unicode ? "\u2591" : " ");
   }
   get visible() {
     return this._visible;
@@ -190,7 +190,7 @@ var Modal = class extends Widget4 {
 
 // src/Select.ts
 import { Widget as Widget5 } from "@termuijs/widgets";
-import { mergeStyles as mergeStyles5, defaultStyle as defaultStyle5, styleToCellAttrs as styleToCellAttrs4 } from "@termuijs/core";
+import { mergeStyles as mergeStyles5, defaultStyle as defaultStyle5, styleToCellAttrs as styleToCellAttrs4, caps as caps3 } from "@termuijs/core";
 var Select = class extends Widget5 {
   _options;
   _selectedIndex = 0;
@@ -257,13 +257,13 @@ var Select = class extends Widget5 {
     const attrs = styleToCellAttrs4(this.style);
     const sel = this._options[this._selectedIndex];
     const label = sel ? sel.label : this._placeholder;
-    const prefix = this._isOpen ? "\u25BC " : "\u25B6 ";
+    const prefix = this._isOpen ? caps3.unicode ? "\u25BC " : "v " : caps3.unicode ? "\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 " : "  ";
+        const m = isSel ? caps3.unicode ? "\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,
@@ -277,7 +277,7 @@ var Select = class extends Widget5 {
 
 // src/MultiSelect.ts
 import { Widget as Widget6 } from "@termuijs/widgets";
-import { mergeStyles as mergeStyles6, defaultStyle as defaultStyle6, styleToCellAttrs as styleToCellAttrs5 } from "@termuijs/core";
+import { mergeStyles as mergeStyles6, defaultStyle as defaultStyle6, styleToCellAttrs as styleToCellAttrs5, caps as caps4 } from "@termuijs/core";
 var MultiSelect = class extends Widget6 {
   _options;
   _cursorIndex = 0;
@@ -291,8 +291,8 @@ var MultiSelect = class extends Widget6 {
     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._checkChar = config.checkChar ?? (caps4.unicode ? "\u25FC" : "[x]");
+    this._uncheckChar = config.uncheckChar ?? (caps4.unicode ? "\u25FB" : "[ ]");
     this._onSubmit = config.onSubmit;
   }
   get selectedOptions() {
@@ -332,7 +332,7 @@ var MultiSelect = class extends Widget6 {
       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}`;
+      const label = `${active ? caps4.unicode ? "\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,
@@ -345,7 +345,7 @@ var MultiSelect = class extends Widget6 {
 
 // src/Tree.ts
 import { Widget as Widget7 } from "@termuijs/widgets";
-import { mergeStyles as mergeStyles7, defaultStyle as defaultStyle7, styleToCellAttrs as styleToCellAttrs6 } from "@termuijs/core";
+import { mergeStyles as mergeStyles7, defaultStyle as defaultStyle7, styleToCellAttrs as styleToCellAttrs6, caps as caps5 } from "@termuijs/core";
 var Tree = class extends Widget7 {
   _roots;
   _cursorIndex = 0;
@@ -360,12 +360,12 @@ var Tree = class extends Widget7 {
   }
   _flatten() {
     const result = [];
-    const walk = (nodes, depth, path) => {
+    const walk = (nodes, depth, path2) => {
       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]);
+        result.push({ node, depth, path: [...path2, i], hasChildren });
+        if (hasChildren && node.expanded) walk(node.children, depth + 1, [...path2, i]);
       }
     };
     walk(this._roots, 0, []);
@@ -408,7 +408,7 @@ var Tree = class extends Widget7 {
       const it = flat[i];
       const active = i === this._cursorIndex;
       const indent = "  ".repeat(it.depth);
-      const icon = it.hasChildren ? it.node.expanded ? "\u25BC " : "\u25B6 " : "  ";
+      const icon = it.hasChildren ? it.node.expanded ? caps5.unicode ? "\u25BC " : "v " : caps5.unicode ? "\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 });
@@ -418,8 +418,9 @@ var Tree = class extends Widget7 {
 
 // 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" };
+import { mergeStyles as mergeStyles8, defaultStyle as defaultStyle8, styleToCellAttrs as styleToCellAttrs7, caps as caps6 } from "@termuijs/core";
+var ICONS_UNICODE = { info: "\u2139", success: "\u2713", warning: "\u26A0", error: "\u2717" };
+var ICONS_ASCII = { info: "i", success: "+", warning: "!", error: "x" };
 var COLORS = { info: "cyan", success: "green", warning: "yellow", error: "red" };
 var Toast = class extends Widget8 {
   _messages = [];
@@ -459,10 +460,11 @@ var Toast = class extends Widget8 {
     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 icons = caps6.unicode ? ICONS_UNICODE : ICONS_ASCII;
     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);
+      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 });
     }
   }
@@ -653,7 +655,7 @@ var Form = class extends Widget10 {
 
 // 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";
+import { mergeStyles as mergeStyles11, defaultStyle as defaultStyle11, styleToCellAttrs as styleToCellAttrs10, getBorderChars as getBorderChars3, caps as caps7 } from "@termuijs/core";
 var CommandPalette = class extends Widget11 {
   _commands;
   _filtered = [];
@@ -746,7 +748,8 @@ var CommandPalette = class extends Widget11 {
     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 backdropCh = caps7.unicode ? "\u2591" : " ";
+    for (let r = 0; r < height; r++) screen.writeString(x, y + r, backdropCh.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);
@@ -758,13 +761,13 @@ var CommandPalette = class extends Widget11 {
     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 + 1, by + 1, (` ${caps7.unicode ? "\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 label = (active ? caps7.unicode ? "\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 });
@@ -775,6 +778,919 @@ var CommandPalette = class extends Widget11 {
     screen.writeString(bx, last, border.bottomLeft + border.bottom.repeat(bw - 2) + border.bottomRight, ba);
   }
 };
+
+// src/prompts.ts
+import * as readline from "readline";
+var NonInteractiveError = class extends Error {
+  constructor() {
+    super("Prompts require an interactive TTY. stdin is not a TTY.");
+    this.name = "NonInteractiveError";
+  }
+};
+async function promptText(options) {
+  if (!process.stdin.isTTY) throw new NonInteractiveError();
+  const defaultHint = options.default ? ` (${options.default})` : "";
+  const placeholder = options.placeholder ? ` [${options.placeholder}]` : "";
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    const ask = () => {
+      rl.question(`${options.message}${defaultHint}${placeholder}: `, (answer) => {
+        const value = answer.trim() || options.default || "";
+        if (options.validate) {
+          const error = options.validate(value);
+          if (error) {
+            process.stdout.write(`  ${error}
+`);
+            ask();
+            return;
+          }
+        }
+        rl.close();
+        resolve(value);
+      });
+    };
+    ask();
+  });
+}
+async function promptConfirm(options) {
+  if (!process.stdin.isTTY) throw new NonInteractiveError();
+  const hint = options.default === true ? "Y/n" : options.default === false ? "y/N" : "y/n";
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    rl.question(`${options.message} [${hint}]: `, (answer) => {
+      rl.close();
+      const a = answer.trim().toLowerCase();
+      if (a === "y" || a === "yes") {
+        resolve(true);
+        return;
+      }
+      if (a === "n" || a === "no") {
+        resolve(false);
+        return;
+      }
+      if (a === "" && options.default !== void 0) {
+        resolve(options.default);
+        return;
+      }
+      resolve(false);
+    });
+  });
+}
+async function promptSelect(options) {
+  if (!process.stdin.isTTY) throw new NonInteractiveError();
+  const { options: choices, default: defaultValue } = options;
+  process.stdout.write(`${options.message}
+`);
+  choices.forEach((opt, i) => {
+    const isDefault = opt.value === defaultValue;
+    process.stdout.write(`  ${i + 1}. ${opt.label}${isDefault ? " (default)" : ""}
+`);
+  });
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    const ask = () => {
+      rl.question(`Enter number (1-${choices.length}): `, (answer) => {
+        const trimmed = answer.trim();
+        if (trimmed === "" && defaultValue !== void 0) {
+          rl.close();
+          resolve(defaultValue);
+          return;
+        }
+        const n = parseInt(trimmed, 10);
+        if (!isNaN(n) && n >= 1 && n <= choices.length) {
+          rl.close();
+          resolve(choices[n - 1].value);
+          return;
+        }
+        process.stdout.write(`  Invalid choice. Enter a number 1-${choices.length}.
+`);
+        ask();
+      });
+    };
+    ask();
+  });
+}
+var prompt = {
+  text: promptText,
+  confirm: promptConfirm,
+  select: promptSelect
+};
+
+// src/NotificationCenter.ts
+import { Widget as Widget12 } from "@termuijs/widgets";
+import { useState, useEffect } from "@termuijs/jsx";
+import { caps as caps8 } from "@termuijs/core";
+var NotificationStore = class _NotificationStore {
+  static _instance;
+  _notifications = [];
+  _subs = /* @__PURE__ */ new Set();
+  static getInstance() {
+    if (!_NotificationStore._instance) {
+      _NotificationStore._instance = new _NotificationStore();
+    }
+    return _NotificationStore._instance;
+  }
+  push(message, type = "info", durationMs) {
+    const id = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    const notification = { id, message, type, durationMs, createdAt: Date.now() };
+    this._notifications = [...this._notifications, notification];
+    this._emit();
+    if (durationMs && durationMs > 0) {
+      setTimeout(() => this.dismiss(id), durationMs);
+    }
+    return id;
+  }
+  dismiss(id) {
+    const prev = this._notifications;
+    this._notifications = this._notifications.filter((n) => n.id !== id);
+    if (this._notifications.length !== prev.length) {
+      this._emit();
+    }
+  }
+  dismissAll() {
+    if (this._notifications.length > 0) {
+      this._notifications = [];
+      this._emit();
+    }
+  }
+  subscribe(fn) {
+    this._subs.add(fn);
+    return () => this._subs.delete(fn);
+  }
+  get notifications() {
+    return this._notifications;
+  }
+  _emit() {
+    for (const fn of this._subs) fn(this._notifications);
+  }
+};
+var notifications = NotificationStore.getInstance();
+function useNotifications() {
+  const store = NotificationStore.getInstance();
+  const [current, setCurrent] = useState(store.notifications);
+  useEffect(() => {
+    const unsub = store.subscribe((ns) => setCurrent([...ns]));
+    return unsub;
+  }, []);
+  return {
+    notifications: current,
+    push: (msg, type, dur) => store.push(msg, type, dur),
+    dismiss: (id) => store.dismiss(id),
+    dismissAll: () => store.dismissAll()
+  };
+}
+var TYPE_ICONS = {
+  info: { unicode: "\u2139", ascii: "i" },
+  success: { unicode: "\u2713", ascii: "+" },
+  warning: { unicode: "\u26A0", ascii: "!" },
+  error: { unicode: "\u2717", ascii: "x" }
+};
+var TYPE_COLORS = {
+  info: { type: "named", name: "cyan" },
+  success: { type: "named", name: "green" },
+  warning: { type: "named", name: "yellow" },
+  error: { type: "named", name: "red" }
+};
+var NotificationCenter = class extends Widget12 {
+  _position;
+  _maxVisible;
+  _notifWidth;
+  _unsub;
+  _current = [];
+  constructor(options = {}) {
+    super();
+    this._position = options.position ?? "top-right";
+    this._maxVisible = options.maxVisible ?? 5;
+    this._notifWidth = options.width ?? 40;
+    const store = NotificationStore.getInstance();
+    this._current = store.notifications;
+    this._unsub = store.subscribe((ns) => {
+      this._current = ns;
+      this.markDirty();
+    });
+  }
+  unmount() {
+    this._unsub?.();
+    this._unsub = void 0;
+    super.unmount();
+  }
+  _renderSelf(screen) {
+    const visible = this._current.slice(-this._maxVisible);
+    if (visible.length === 0) return;
+    const { x, y, width, height } = this._rect;
+    const tw = Math.min(this._notifWidth, width - 2);
+    if (tw <= 0) return;
+    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;
+    for (let i = 0; i < visible.length; i++) {
+      const notif = visible[i];
+      const icon = caps8.unicode ? TYPE_ICONS[notif.type].unicode : TYPE_ICONS[notif.type].ascii;
+      const raw = `${icon} ${notif.message}`;
+      const label = ` ${raw} `.slice(0, tw).padEnd(tw);
+      screen.writeString(sx, sy + i, label, {
+        fg: TYPE_COLORS[notif.type],
+        bold: true
+      });
+    }
+  }
+};
+
+// src/PasswordInput.ts
+import { Widget as Widget13 } from "@termuijs/widgets";
+import { styleToCellAttrs as styleToCellAttrs11, truncate, caps as caps9 } from "@termuijs/core";
+var PasswordInput = class extends Widget13 {
+  _value = "";
+  _cursorPos = 0;
+  _placeholder;
+  _maxLength;
+  _showText = false;
+  _onChange;
+  _onSubmit;
+  focusable = true;
+  // '●' in unicode terminals, '*' in ASCII fallback
+  get _maskChar() {
+    return caps9.unicode ? "\u25CF" : "*";
+  }
+  constructor(style = {}, options = {}) {
+    super({ border: "single", height: 3, ...style });
+    this._placeholder = options.placeholder ?? "";
+    this._maxLength = options.maxLength ?? Infinity;
+    this._onChange = options.onChange;
+    this._onSubmit = options.onSubmit;
+  }
+  /** The actual (unmasked) value. */
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    this._value = v.slice(0, this._maxLength);
+    this._cursorPos = Math.min(this._cursorPos, this._value.length);
+  }
+  /** Whether the text is currently visible (unmaksed). */
+  get showText() {
+    return this._showText;
+  }
+  /** Toggle visibility of the actual text (Alt+V). */
+  toggleVisibility() {
+    this._showText = !this._showText;
+    this.markDirty();
+  }
+  insertChar(char) {
+    if (this._value.length >= this._maxLength) return;
+    this._value = this._value.slice(0, this._cursorPos) + char + this._value.slice(this._cursorPos);
+    this._cursorPos++;
+    this._onChange?.(this._value);
+    this.markDirty();
+  }
+  deleteBack() {
+    if (this._cursorPos > 0) {
+      this._value = this._value.slice(0, this._cursorPos - 1) + this._value.slice(this._cursorPos);
+      this._cursorPos--;
+      this._onChange?.(this._value);
+      this.markDirty();
+    }
+  }
+  deleteForward() {
+    if (this._cursorPos < this._value.length) {
+      this._value = this._value.slice(0, this._cursorPos) + this._value.slice(this._cursorPos + 1);
+      this._onChange?.(this._value);
+      this.markDirty();
+    }
+  }
+  moveCursorLeft() {
+    this._cursorPos = Math.max(0, this._cursorPos - 1);
+    this.markDirty();
+  }
+  moveCursorRight() {
+    this._cursorPos = Math.min(this._value.length, this._cursorPos + 1);
+    this.markDirty();
+  }
+  moveCursorHome() {
+    this._cursorPos = 0;
+    this.markDirty();
+  }
+  moveCursorEnd() {
+    this._cursorPos = this._value.length;
+    this.markDirty();
+  }
+  submit() {
+    this._onSubmit?.(this._value);
+  }
+  clear() {
+    this._value = "";
+    this._cursorPos = 0;
+    this._onChange?.("");
+    this.markDirty();
+  }
+  /**
+   * Handle key events. Call this from your input loop.
+   *  Alt+V  — toggle visibility
+   *  Other  — standard text editing
+   */
+  handleKey(event) {
+    if (event.alt && event.key === "v") {
+      this.toggleVisibility();
+      return;
+    }
+    switch (event.key) {
+      case "backspace":
+        this.deleteBack();
+        break;
+      case "delete":
+        this.deleteForward();
+        break;
+      case "left":
+        this.moveCursorLeft();
+        break;
+      case "right":
+        this.moveCursorRight();
+        break;
+      case "home":
+        this.moveCursorHome();
+        break;
+      case "end":
+        this.moveCursorEnd();
+        break;
+      case "return":
+      case "enter":
+        this.submit();
+        break;
+      default:
+        if (event.key && event.key.length === 1 && !event.ctrl && !event.alt) {
+          this.insertChar(event.key);
+        }
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs11(this._style);
+    if (this._value.length === 0 && !this.isFocused) {
+      screen.writeString(x, y, truncate(this._placeholder, width), { ...attrs, dim: true });
+      return;
+    }
+    const displayValue = this._showText ? this._value : this._maskChar.repeat(this._value.length);
+    const visibleWidth = width - 1;
+    let scrollX = 0;
+    if (this._cursorPos > visibleWidth) {
+      scrollX = this._cursorPos - visibleWidth;
+    }
+    const visibleText = displayValue.slice(scrollX, scrollX + visibleWidth);
+    screen.writeString(x, y, visibleText, attrs);
+    if (this.isFocused) {
+      const cursorScreenPos = x + this._cursorPos - scrollX;
+      if (cursorScreenPos >= x && cursorScreenPos < x + width) {
+        const cursorChar = this._cursorPos < displayValue.length ? displayValue[this._cursorPos] : " ";
+        screen.setCell(cursorScreenPos, y, {
+          char: cursorChar,
+          ...attrs,
+          inverse: true
+        });
+      }
+    }
+    if (this._showText && width > 4) {
+      const indicator = caps9.unicode ? " \u{1F441}" : "[v]";
+      screen.writeString(x + width - indicator.length, y, indicator, { ...attrs, dim: true });
+    }
+  }
+};
+
+// src/NumberInput.ts
+import { Widget as Widget14 } from "@termuijs/widgets";
+import { styleToCellAttrs as styleToCellAttrs12, truncate as truncate2 } from "@termuijs/core";
+var NumberInput = class extends Widget14 {
+  _raw = "";
+  // raw string the user typed
+  _cursorPos = 0;
+  _placeholder;
+  _step;
+  _min;
+  _max;
+  _allowDecimal;
+  _onChange;
+  _onSubmit;
+  focusable = true;
+  constructor(style = {}, options = {}) {
+    super({ border: "single", height: 3, ...style });
+    this._placeholder = options.placeholder ?? "";
+    this._step = options.step ?? 1;
+    this._min = options.min ?? -Infinity;
+    this._max = options.max ?? Infinity;
+    this._allowDecimal = options.allowDecimal ?? true;
+    this._onChange = options.onChange;
+    this._onSubmit = options.onSubmit;
+  }
+  /** The numeric value, or null if the field is empty / invalid. */
+  get numericValue() {
+    if (this._raw === "" || this._raw === "-") return null;
+    const n = parseFloat(this._raw);
+    return isNaN(n) ? null : n;
+  }
+  /** Raw text string (what the user typed). */
+  get rawValue() {
+    return this._raw;
+  }
+  set rawValue(v) {
+    this._raw = v;
+    this._cursorPos = Math.min(this._cursorPos, this._raw.length);
+  }
+  _clamp(n) {
+    return Math.min(this._max, Math.max(this._min, n));
+  }
+  _notify() {
+    this._onChange?.(this.numericValue);
+    this.markDirty();
+  }
+  /** Accept only digits, '-' at position 0 (if min < 0), and (optionally) one '.'. */
+  _isAllowed(char) {
+    if (char === "-" && this._cursorPos === 0 && !this._raw.includes("-")) {
+      return this._min < 0;
+    }
+    if (char === "." && this._allowDecimal && !this._raw.includes(".")) return true;
+    return /^\d$/.test(char);
+  }
+  insertChar(char) {
+    if (!this._isAllowed(char)) return;
+    this._raw = this._raw.slice(0, this._cursorPos) + char + this._raw.slice(this._cursorPos);
+    this._cursorPos++;
+    this._notify();
+  }
+  deleteBack() {
+    if (this._cursorPos > 0) {
+      this._raw = this._raw.slice(0, this._cursorPos - 1) + this._raw.slice(this._cursorPos);
+      this._cursorPos--;
+      this._notify();
+    }
+  }
+  deleteForward() {
+    if (this._cursorPos < this._raw.length) {
+      this._raw = this._raw.slice(0, this._cursorPos) + this._raw.slice(this._cursorPos + 1);
+      this._notify();
+    }
+  }
+  moveCursorLeft() {
+    this._cursorPos = Math.max(0, this._cursorPos - 1);
+    this.markDirty();
+  }
+  moveCursorRight() {
+    this._cursorPos = Math.min(this._raw.length, this._cursorPos + 1);
+    this.markDirty();
+  }
+  moveCursorHome() {
+    this._cursorPos = 0;
+    this.markDirty();
+  }
+  moveCursorEnd() {
+    this._cursorPos = this._raw.length;
+    this.markDirty();
+  }
+  /** Increment value by step (↑ arrow). */
+  increment() {
+    const current = this.numericValue ?? 0;
+    const next = this._clamp(current + this._step);
+    this._raw = String(next);
+    this._cursorPos = this._raw.length;
+    this._notify();
+  }
+  /** Decrement value by step (↓ arrow). */
+  decrement() {
+    const current = this.numericValue ?? 0;
+    const next = this._clamp(current - this._step);
+    this._raw = String(next);
+    this._cursorPos = this._raw.length;
+    this._notify();
+  }
+  submit() {
+    this._onSubmit?.(this.numericValue);
+  }
+  clear() {
+    this._raw = "";
+    this._cursorPos = 0;
+    this._notify();
+  }
+  /**
+   * Handle key events. Call this from your input loop.
+   */
+  handleKey(event) {
+    switch (event.key) {
+      case "up":
+        this.increment();
+        break;
+      case "down":
+        this.decrement();
+        break;
+      case "backspace":
+        this.deleteBack();
+        break;
+      case "delete":
+        this.deleteForward();
+        break;
+      case "left":
+        this.moveCursorLeft();
+        break;
+      case "right":
+        this.moveCursorRight();
+        break;
+      case "home":
+        this.moveCursorHome();
+        break;
+      case "end":
+        this.moveCursorEnd();
+        break;
+      case "return":
+      case "enter":
+        this.submit();
+        break;
+      default:
+        if (event.key && event.key.length === 1 && !event.ctrl && !event.alt) {
+          this.insertChar(event.key);
+        }
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs12(this._style);
+    if (this._raw.length === 0 && !this.isFocused) {
+      screen.writeString(x, y, truncate2(this._placeholder, width), { ...attrs, dim: true });
+      return;
+    }
+    const display = this._raw;
+    const visibleWidth = width - 1;
+    let scrollX = 0;
+    if (this._cursorPos > visibleWidth) {
+      scrollX = this._cursorPos - visibleWidth;
+    }
+    const visibleText = display.slice(scrollX, scrollX + visibleWidth);
+    screen.writeString(x, y, visibleText, attrs);
+    if (this.isFocused) {
+      const cursorScreenPos = x + this._cursorPos - scrollX;
+      if (cursorScreenPos >= x && cursorScreenPos < x + width) {
+        const cursorChar = this._cursorPos < display.length ? display[this._cursorPos] : " ";
+        screen.setCell(cursorScreenPos, y, {
+          char: cursorChar,
+          ...attrs,
+          inverse: true
+        });
+      }
+    }
+    if (this.isFocused && width > 8) {
+      const hint = `\xB1${this._step}`;
+      screen.writeString(x + width - hint.length, y, hint, { ...attrs, dim: true });
+    }
+  }
+};
+
+// src/PathInput.ts
+import * as fs from "fs";
+import * as path from "path";
+import { Widget as Widget15 } from "@termuijs/widgets";
+import { styleToCellAttrs as styleToCellAttrs13, truncate as truncate3, caps as caps10 } from "@termuijs/core";
+var PathInput = class extends Widget15 {
+  _value = "";
+  _cursorPos = 0;
+  _placeholder;
+  _maxLength;
+  _cwd;
+  _maxCompletions;
+  _completions = [];
+  _completionIndex = -1;
+  // -1 = original value, 0..n = cycling
+  _preCompletionValue = "";
+  // value before Tab was pressed
+  _showCompletions = false;
+  _onChange;
+  _onSubmit;
+  focusable = true;
+  constructor(style = {}, options = {}) {
+    super({ border: "single", height: 3, ...style });
+    this._placeholder = options.placeholder ?? "";
+    this._maxLength = options.maxLength ?? 4096;
+    this._cwd = options.cwd ?? process.cwd();
+    this._maxCompletions = options.maxCompletions ?? 5;
+    this._onChange = options.onChange;
+    this._onSubmit = options.onSubmit;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    this._value = v.slice(0, this._maxLength);
+    this._cursorPos = Math.min(this._cursorPos, this._value.length);
+    this._dismissCompletions();
+  }
+  get completions() {
+    return this._completions;
+  }
+  get isShowingCompletions() {
+    return this._showCompletions && this._completions.length > 0;
+  }
+  _dismissCompletions() {
+    this._completions = [];
+    this._completionIndex = -1;
+    this._showCompletions = false;
+  }
+  /** Compute completions for the current value. Does NOT throw. */
+  _computeCompletions() {
+    try {
+      const raw = this._value;
+      const isAbs = path.isAbsolute(raw);
+      const base = isAbs ? raw : path.join(this._cwd, raw);
+      let dir;
+      let prefix;
+      if (raw === "" || raw.endsWith("/") || raw.endsWith(path.sep)) {
+        dir = isAbs ? raw || "/" : path.join(this._cwd, raw || ".");
+        prefix = "";
+      } else {
+        dir = path.dirname(base);
+        prefix = path.basename(base).toLowerCase();
+      }
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      const matches = entries.filter((e) => e.name.toLowerCase().startsWith(prefix)).slice(0, this._maxCompletions).map((e) => {
+        const full = path.join(dir, e.name);
+        const candidate = isAbs ? full + (e.isDirectory() ? path.sep : "") : path.relative(this._cwd, full) + (e.isDirectory() ? path.sep : "");
+        return candidate;
+      });
+      return matches;
+    } catch {
+      return [];
+    }
+  }
+  /** Trigger tab-completion. */
+  triggerCompletion() {
+    if (!this._showCompletions || this._completions.length === 0) {
+      this._preCompletionValue = this._value;
+      this._completions = this._computeCompletions();
+      if (this._completions.length === 0) {
+        this._showCompletions = false;
+        return;
+      }
+      this._showCompletions = true;
+      this._completionIndex = 0;
+    } else {
+      this._completionIndex = (this._completionIndex + 1) % this._completions.length;
+    }
+    this._value = this._completions[this._completionIndex];
+    this._cursorPos = this._value.length;
+    this._onChange?.(this._value);
+    this.markDirty();
+  }
+  insertChar(char) {
+    if (this._value.length >= this._maxLength) return;
+    this._value = this._value.slice(0, this._cursorPos) + char + this._value.slice(this._cursorPos);
+    this._cursorPos++;
+    this._dismissCompletions();
+    this._onChange?.(this._value);
+    this.markDirty();
+  }
+  deleteBack() {
+    if (this._cursorPos > 0) {
+      this._value = this._value.slice(0, this._cursorPos - 1) + this._value.slice(this._cursorPos);
+      this._cursorPos--;
+      this._dismissCompletions();
+      this._onChange?.(this._value);
+      this.markDirty();
+    }
+  }
+  deleteForward() {
+    if (this._cursorPos < this._value.length) {
+      this._value = this._value.slice(0, this._cursorPos) + this._value.slice(this._cursorPos + 1);
+      this._dismissCompletions();
+      this._onChange?.(this._value);
+      this.markDirty();
+    }
+  }
+  moveCursorLeft() {
+    this._cursorPos = Math.max(0, this._cursorPos - 1);
+    this.markDirty();
+  }
+  moveCursorRight() {
+    this._cursorPos = Math.min(this._value.length, this._cursorPos + 1);
+    this.markDirty();
+  }
+  moveCursorHome() {
+    this._cursorPos = 0;
+    this.markDirty();
+  }
+  moveCursorEnd() {
+    this._cursorPos = this._value.length;
+    this.markDirty();
+  }
+  submit() {
+    this._dismissCompletions();
+    this._onSubmit?.(this._value);
+  }
+  clear() {
+    this._value = "";
+    this._cursorPos = 0;
+    this._dismissCompletions();
+    this._onChange?.("");
+    this.markDirty();
+  }
+  /**
+   * Handle key events. Call this from your input loop.
+   *  Tab   — trigger/cycle completions
+   *  Esc   — dismiss completions
+   *  Enter — submit current value
+   */
+  handleKey(event) {
+    switch (event.key) {
+      case "tab":
+        this.triggerCompletion();
+        break;
+      case "escape":
+        this._dismissCompletions();
+        this.markDirty();
+        break;
+      case "backspace":
+        this.deleteBack();
+        break;
+      case "delete":
+        this.deleteForward();
+        break;
+      case "left":
+        this.moveCursorLeft();
+        break;
+      case "right":
+        this.moveCursorRight();
+        break;
+      case "home":
+        this.moveCursorHome();
+        break;
+      case "end":
+        this.moveCursorEnd();
+        break;
+      case "return":
+      case "enter":
+        this.submit();
+        break;
+      default:
+        if (event.key && event.key.length === 1 && !event.ctrl && !event.alt) {
+          this.insertChar(event.key);
+        }
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs13(this._style);
+    if (height <= 1 && this._showCompletions) {
+      this._showCompletions = false;
+    }
+    if (this._value.length === 0 && !this.isFocused) {
+      screen.writeString(x, y, truncate3(this._placeholder, width), { ...attrs, dim: true });
+    } else {
+      const visibleWidth = width - 1;
+      let scrollX = 0;
+      if (this._cursorPos > visibleWidth) {
+        scrollX = this._cursorPos - visibleWidth;
+      }
+      const visibleText = this._value.slice(scrollX, scrollX + visibleWidth);
+      screen.writeString(x, y, visibleText, attrs);
+      if (this.isFocused) {
+        const cursorScreenPos = x + this._cursorPos - scrollX;
+        if (cursorScreenPos >= x && cursorScreenPos < x + width) {
+          const cursorChar = this._cursorPos < this._value.length ? this._value[this._cursorPos] : " ";
+          screen.setCell(cursorScreenPos, y, {
+            char: cursorChar,
+            ...attrs,
+            inverse: true
+          });
+        }
+      }
+    }
+    if (this._showCompletions && this._completions.length > 0 && height > 1) {
+      const maxRows = Math.min(this._completions.length, height - 1);
+      for (let i = 0; i < maxRows; i++) {
+        const row = y + 1 + i;
+        const isSelected = i === this._completionIndex;
+        const prefix = isSelected ? caps10.unicode ? "\u25B6 " : "> " : "  ";
+        const entry = this._completions[i];
+        screen.writeString(x, row, truncate3(prefix + entry, width), {
+          ...attrs,
+          bold: isSelected,
+          inverse: isSelected
+        });
+      }
+    }
+  }
+};
+
+// src/KeyboardShortcuts.ts
+import { Widget as Widget16 } from "@termuijs/widgets";
+import { styleToCellAttrs as styleToCellAttrs14, caps as caps11 } from "@termuijs/core";
+var KeyboardShortcuts = class extends Widget16 {
+  _bindings;
+  _keyColor;
+  _categoryColor;
+  _columns;
+  _showCategories;
+  constructor(bindings, options = {}) {
+    super({});
+    this._bindings = bindings;
+    this._keyColor = options.keyColor ?? { type: "named", name: "cyan" };
+    this._categoryColor = options.categoryColor ?? { type: "named", name: "yellow" };
+    this._columns = Math.max(1, options.columns ?? 2);
+    this._showCategories = options.showCategories ?? true;
+  }
+  /** Replace all bindings and trigger a re-render. */
+  setBindings(bindings) {
+    this._bindings = bindings;
+    this.markDirty();
+  }
+  /** Group bindings by category, preserving insertion order. */
+  _groupBindings() {
+    const groups = [];
+    const indexMap = /* @__PURE__ */ new Map();
+    for (const b of this._bindings) {
+      const cat = b.category ?? "";
+      const key = cat;
+      if (!indexMap.has(key)) {
+        indexMap.set(key, groups.length);
+        groups.push({ category: b.category, bindings: [] });
+      }
+      groups[indexMap.get(key)].bindings.push(b);
+    }
+    return groups;
+  }
+  /**
+   * Render a key label in a bordered box style:
+   *   ┌─────┐
+   *   │ key │
+   *   └─────┘
+   *
+   * We fit it on one line: [ key ] — box drawing characters or ASCII fallback.
+   */
+  _renderKeyLabel(screen, kx, ky, key, attrs) {
+    if (caps11.unicode) {
+      const label = `[${key}]`;
+      screen.writeString(kx, ky, label, { ...attrs, fg: this._keyColor, bold: true });
+      return label.length;
+    } else {
+      const label = `[${key}]`;
+      screen.writeString(kx, ky, label, { ...attrs, fg: this._keyColor, bold: true });
+      return label.length;
+    }
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs14(this._style);
+    const groups = this._groupBindings();
+    let row = y;
+    const colWidth = Math.floor(width / this._columns);
+    for (const group of groups) {
+      if (row >= y + height) break;
+      if (this._showCategories && group.category) {
+        const heading = group.category.toUpperCase();
+        const divider = caps11.unicode ? "\u2500" : "-";
+        const line = heading + " " + divider.repeat(Math.max(0, width - heading.length - 1));
+        screen.writeString(x, row, line.slice(0, width), {
+          ...attrs,
+          fg: this._categoryColor,
+          bold: true
+        });
+        row++;
+        if (row >= y + height) break;
+      }
+      for (let i = 0; i < group.bindings.length; i += this._columns) {
+        if (row >= y + height) break;
+        for (let col = 0; col < this._columns; col++) {
+          const binding = group.bindings[i + col];
+          if (!binding) continue;
+          const cx = x + col * colWidth;
+          const availWidth = colWidth - 1;
+          if (availWidth <= 0) continue;
+          const labelLen = this._renderKeyLabel(screen, cx, row, binding.key, attrs);
+          const descX = cx + labelLen + 1;
+          const descWidth = availWidth - labelLen - 1;
+          if (descWidth > 0) {
+            const desc = binding.description.slice(0, descWidth);
+            screen.writeString(descX, row, desc, attrs);
+          }
+        }
+        row++;
+      }
+      if (this._showCategories && group.category) {
+        row++;
+      }
+    }
+  }
+};
 export {
   Box,
   CommandPalette,
@@ -782,10 +1698,17 @@ export {
   Divider,
   Form,
   Gauge,
+  KeyboardShortcuts,
   List,
   LogView,
   Modal,
   MultiSelect,
+  NonInteractiveError,
+  NotificationCenter,
+  NotificationStore,
+  NumberInput,
+  PasswordInput,
+  PathInput,
   ProgressBar,
   Select,
   Spacer,
@@ -798,6 +1721,9 @@ export {
   TextInput,
   Toast,
   Tree,
-  Widget12 as Widget
+  Widget17 as Widget,
+  notifications,
+  prompt,
+  useNotifications
 };
 //# sourceMappingURL=index.js.map