@nick-skriabin/glyph 0.1.0

package/dist/index.cjs

@@ -0,0 +1,3570 @@
+'use strict';
+
+var React15 = require('react');
+var ReactReconciler = require('react-reconciler');
+var stringWidth = require('string-width');
+var Yoga = require('yoga-layout');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React15__default = /*#__PURE__*/_interopDefault(React15);
+var ReactReconciler__default = /*#__PURE__*/_interopDefault(ReactReconciler);
+var stringWidth__default = /*#__PURE__*/_interopDefault(stringWidth);
+var Yoga__default = /*#__PURE__*/_interopDefault(Yoga);
+
+// src/render.ts
+
+// src/reconciler/nodes.ts
+var nextFocusId = 0;
+function generateFocusId() {
+  return `glyph-focus-${nextFocusId++}`;
+}
+function createGlyphNode(type, props) {
+  const style = props.style ?? {};
+  return {
+    type,
+    props,
+    style,
+    children: [],
+    rawTextChildren: [],
+    parent: null,
+    yogaNode: null,
+    text: null,
+    layout: { x: 0, y: 0, width: 0, height: 0, innerX: 0, innerY: 0, innerWidth: 0, innerHeight: 0 },
+    focusId: type === "input" ? generateFocusId() : props.focusable ? generateFocusId() : null,
+    hidden: false
+  };
+}
+function appendChild(parent, child) {
+  child.parent = parent;
+  parent.children.push(child);
+}
+function removeChild(parent, child) {
+  const idx = parent.children.indexOf(child);
+  if (idx !== -1) {
+    parent.children.splice(idx, 1);
+    child.parent = null;
+  }
+}
+function insertBefore(parent, child, beforeChild) {
+  child.parent = parent;
+  const idx = parent.children.indexOf(beforeChild);
+  if (idx !== -1) {
+    parent.children.splice(idx, 0, child);
+  } else {
+    parent.children.push(child);
+  }
+}
+function getInheritedTextStyle(node) {
+  const result = {};
+  let current = node;
+  while (current) {
+    const s = current.style;
+    if (result.color === void 0 && s.color !== void 0) result.color = s.color;
+    if (result.bg === void 0 && s.bg !== void 0) result.bg = s.bg;
+    if (result.bold === void 0 && s.bold !== void 0) result.bold = s.bold;
+    if (result.dim === void 0 && s.dim !== void 0) result.dim = s.dim;
+    if (result.italic === void 0 && s.italic !== void 0) result.italic = s.italic;
+    if (result.underline === void 0 && s.underline !== void 0) result.underline = s.underline;
+    current = current.parent;
+  }
+  return result;
+}
+function collectTextContent(node) {
+  if (node.text != null) return node.text;
+  let result = "";
+  for (const child of node.children) {
+    result += collectTextContent(child);
+  }
+  return result;
+}
+
+// src/reconciler/hostConfig.ts
+var DefaultEventPriority = 32;
+var hostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: true,
+  // Timeouts
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  supportsMicrotasks: true,
+  scheduleMicrotask: queueMicrotask,
+  // Priority & event methods required by react-reconciler v0.31
+  getCurrentUpdatePriority: () => DefaultEventPriority,
+  setCurrentUpdatePriority: (_priority) => {
+  },
+  resolveUpdatePriority: () => DefaultEventPriority,
+  getCurrentEventPriority: () => DefaultEventPriority,
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  shouldAttemptEagerTransition: () => false,
+  getInstanceFromNode: () => null,
+  beforeActiveInstanceBlur: () => {
+  },
+  afterActiveInstanceBlur: () => {
+  },
+  prepareScopeUpdate: () => {
+  },
+  getInstanceFromScope: () => null,
+  detachDeletedInstance: () => {
+  },
+  requestPostPaintCallback: (_callback) => {
+  },
+  // Commit suspension stubs (required by react-reconciler v0.31)
+  maySuspendCommit: (_type, _props) => false,
+  preloadInstance: (_type, _props) => true,
+  startSuspendingCommit: () => {
+  },
+  suspendInstance: (_type, _props) => {
+  },
+  waitForCommitToBeReady: () => null,
+  // Transition stubs
+  NotPendingTransition: null,
+  HostTransitionContext: { $$typeof: /* @__PURE__ */ Symbol.for("react.context"), _currentValue: null },
+  resetFormInstance: (_instance) => {
+  },
+  // Console binding
+  bindToConsole: (methodName, args, _errorPrefix) => {
+    return Function.prototype.bind.call(
+      console[methodName],
+      console,
+      ...args
+    );
+  },
+  // Resource/singleton stubs
+  supportsResources: false,
+  isHostHoistableType: (_type, _props) => false,
+  supportsSingletons: false,
+  isHostSingletonType: (_type) => false,
+  supportsTestSelectors: false,
+  createInstance(type, props, _rootContainer, _hostContext, _internalHandle) {
+    return createGlyphNode(type, props);
+  },
+  createTextInstance(text, _rootContainer, _hostContext, _internalHandle) {
+    return { type: "raw-text", text, parent: null };
+  },
+  appendInitialChild(parentInstance, child) {
+    if (child.type === "raw-text") {
+      const textChild = child;
+      textChild.parent = parentInstance;
+      parentInstance.rawTextChildren.push(textChild);
+      parentInstance.text = parentInstance.rawTextChildren.map((t) => t.text).join("");
+    } else {
+      appendChild(parentInstance, child);
+    }
+  },
+  finalizeInitialChildren(_instance, _type, _props, _rootContainer, _hostContext) {
+    return false;
+  },
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+  getRootHostContext(_rootContainer) {
+    return {};
+  },
+  getChildHostContext(parentHostContext, _type, _rootContainer) {
+    return parentHostContext;
+  },
+  getPublicInstance(instance) {
+    return instance;
+  },
+  prepareForCommit(_containerInfo) {
+    return null;
+  },
+  resetAfterCommit(containerInfo) {
+    containerInfo.onCommit();
+  },
+  preparePortalMount() {
+  },
+  // Mutation methods
+  appendChild(parentInstance, child) {
+    if (child.type === "raw-text") {
+      const textChild = child;
+      textChild.parent = parentInstance;
+      parentInstance.rawTextChildren.push(textChild);
+      parentInstance.text = parentInstance.rawTextChildren.map((t) => t.text).join("");
+    } else {
+      appendChild(parentInstance, child);
+    }
+  },
+  appendChildToContainer(container, child) {
+    if (child.type === "raw-text") return;
+    const node = child;
+    node.parent = null;
+    container.children.push(node);
+  },
+  insertBefore(parentInstance, child, beforeChild) {
+    if (child.type === "raw-text" || beforeChild.type === "raw-text") return;
+    insertBefore(parentInstance, child, beforeChild);
+  },
+  insertInContainerBefore(container, child, beforeChild) {
+    if (child.type === "raw-text" || beforeChild.type === "raw-text") return;
+    const node = child;
+    const before = beforeChild;
+    const idx = container.children.indexOf(before);
+    if (idx !== -1) {
+      container.children.splice(idx, 0, node);
+    } else {
+      container.children.push(node);
+    }
+  },
+  removeChild(parentInstance, child) {
+    if (child.type === "raw-text") {
+      const textChild = child;
+      textChild.parent = null;
+      const idx = parentInstance.rawTextChildren.indexOf(textChild);
+      if (idx !== -1) parentInstance.rawTextChildren.splice(idx, 1);
+      parentInstance.text = parentInstance.rawTextChildren.map((t) => t.text).join("") || null;
+      return;
+    }
+    removeChild(parentInstance, child);
+  },
+  removeChildFromContainer(container, child) {
+    if (child.type === "raw-text") return;
+    const node = child;
+    const idx = container.children.indexOf(node);
+    if (idx !== -1) {
+      container.children.splice(idx, 1);
+    }
+  },
+  commitTextUpdate(textInstance, _oldText, newText) {
+    textInstance.text = newText;
+    if (textInstance.parent) {
+      textInstance.parent.text = textInstance.parent.rawTextChildren.map((t) => t.text).join("");
+    }
+  },
+  // v0.31 signature: (instance, type, oldProps, newProps, internalHandle)
+  // updatePayload was removed in this version
+  commitUpdate(instance, _type, _oldProps, newProps, _internalHandle) {
+    instance.props = newProps;
+    instance.style = newProps.style ?? {};
+    if (newProps.focusable && !instance.focusId) {
+      instance.focusId = `focus-${Math.random().toString(36).slice(2, 9)}`;
+    }
+  },
+  hideInstance(instance) {
+    instance.hidden = true;
+  },
+  hideTextInstance(textInstance) {
+    textInstance.text = "";
+  },
+  unhideInstance(instance, _props) {
+    instance.hidden = false;
+  },
+  unhideTextInstance(textInstance, text) {
+    textInstance.text = text;
+  },
+  clearContainer(container) {
+    container.children.length = 0;
+  },
+  resetTextContent(instance) {
+    instance.text = null;
+  }
+};
+
+// src/reconciler/reconciler.ts
+var reconciler = ReactReconciler__default.default(hostConfig);
+reconciler.injectIntoDevTools({
+  bundleType: process.env.NODE_ENV === "production" ? 0 : 1,
+  version: "0.1.0",
+  rendererPackageName: "glyph"
+});
+
+// src/runtime/terminal.ts
+var ESC = "\x1B";
+var CSI = `${ESC}[`;
+var Terminal = class {
+  stdout;
+  stdin;
+  wasRaw = false;
+  cleanedUp = false;
+  // Data handler dispatch - single stdin listener, filters OSC, dispatches clean data
+  dataHandlers = /* @__PURE__ */ new Set();
+  stdinAttached = false;
+  // OSC response filtering state
+  oscState = "normal";
+  oscAccum = "";
+  escFlushTimer = null;
+  // Terminal palette (populated by queryPalette)
+  palette = /* @__PURE__ */ new Map();
+  paletteResolve = null;
+  constructor(stdout = process.stdout, stdin = process.stdin) {
+    this.stdout = stdout;
+    this.stdin = stdin;
+  }
+  get columns() {
+    return this.stdout.columns || 80;
+  }
+  get rows() {
+    return this.stdout.rows || 24;
+  }
+  enterRawMode() {
+    if (this.stdin.isTTY) {
+      this.wasRaw = this.stdin.isRaw;
+      this.stdin.setRawMode(true);
+      this.stdin.resume();
+      this.stdin.setEncoding("utf-8");
+    }
+  }
+  exitRawMode() {
+    if (this.stdin.isTTY && !this.wasRaw) {
+      this.stdin.setRawMode(false);
+      this.stdin.pause();
+    }
+  }
+  write(data) {
+    this.stdout.write(data);
+  }
+  hideCursor() {
+    this.write(`${CSI}?25l`);
+  }
+  showCursor() {
+    this.write(`${CSI}?25h`);
+  }
+  enterAltScreen() {
+    this.write(`${CSI}?1049h`);
+  }
+  exitAltScreen() {
+    this.write(`${CSI}?1049l`);
+  }
+  clearScreen() {
+    this.write(`${CSI}2J${CSI}H`);
+  }
+  resetStyles() {
+    this.write(`${CSI}0m`);
+  }
+  setup() {
+    this.enterRawMode();
+    this.enterAltScreen();
+    this.hideCursor();
+    this.clearScreen();
+    this.attachStdinListener();
+    this.installCleanupHandlers();
+  }
+  cleanup() {
+    if (this.cleanedUp) return;
+    this.cleanedUp = true;
+    if (this.escFlushTimer !== null) {
+      clearTimeout(this.escFlushTimer);
+      this.escFlushTimer = null;
+    }
+    this.resetStyles();
+    this.showCursor();
+    this.exitAltScreen();
+    this.exitRawMode();
+  }
+  /** Restore terminal state for background suspension (does NOT mark as cleaned up). */
+  suspend() {
+    if (this.escFlushTimer !== null) {
+      clearTimeout(this.escFlushTimer);
+      this.escFlushTimer = null;
+    }
+    this.oscState = "normal";
+    this.oscAccum = "";
+    this.resetStyles();
+    this.showCursor();
+    this.exitAltScreen();
+    this.exitRawMode();
+  }
+  /** Re-enter raw mode and alt screen after SIGCONT resume. */
+  resume() {
+    this.enterRawMode();
+    this.enterAltScreen();
+    this.hideCursor();
+    this.clearScreen();
+  }
+  // ---- Data handling with OSC filtering ----
+  attachStdinListener() {
+    if (this.stdinAttached) return;
+    this.stdinAttached = true;
+    this.stdin.on("data", (data) => {
+      let str = typeof data === "string" ? data : data.toString("utf-8");
+      this.dispatchFiltered(str);
+    });
+  }
+  onData(handler) {
+    this.dataHandlers.add(handler);
+    return () => {
+      this.dataHandlers.delete(handler);
+    };
+  }
+  // ---- OSC response filtering ----
+  dispatchFiltered(raw) {
+    if (this.escFlushTimer !== null) {
+      clearTimeout(this.escFlushTimer);
+      this.escFlushTimer = null;
+    }
+    const clean = this.filterOsc(raw);
+    if (clean.length > 0) {
+      for (const handler of this.dataHandlers) {
+        handler(clean);
+      }
+    }
+    if (this.oscState === "esc") {
+      this.escFlushTimer = setTimeout(() => {
+        this.escFlushTimer = null;
+        this.oscState = "normal";
+        for (const handler of this.dataHandlers) {
+          handler("\x1B");
+        }
+      }, 50);
+    }
+  }
+  filterOsc(raw) {
+    let clean = "";
+    for (let i = 0; i < raw.length; i++) {
+      const ch = raw[i];
+      const code = raw.charCodeAt(i);
+      switch (this.oscState) {
+        case "normal":
+          if (code === 27) {
+            this.oscState = "esc";
+          } else {
+            clean += ch;
+          }
+          break;
+        case "esc":
+          if (ch === "]") {
+            this.oscState = "osc";
+            this.oscAccum = "";
+          } else {
+            clean += "\x1B" + ch;
+            this.oscState = "normal";
+          }
+          break;
+        case "osc":
+          if (code === 7) {
+            this.handleOscResponse(this.oscAccum);
+            this.oscAccum = "";
+            this.oscState = "normal";
+          } else if (code === 27) {
+            this.oscState = "osc_esc";
+          } else {
+            this.oscAccum += ch;
+          }
+          break;
+        case "osc_esc":
+          if (ch === "\\") {
+            this.handleOscResponse(this.oscAccum);
+            this.oscAccum = "";
+            this.oscState = "normal";
+          } else {
+            this.oscAccum += "\x1B" + ch;
+            this.oscState = "osc";
+          }
+          break;
+      }
+    }
+    return clean;
+  }
+  handleOscResponse(data) {
+    const match = data.match(
+      /^4;(\d+);rgb:([0-9a-fA-F]+)\/([0-9a-fA-F]+)\/([0-9a-fA-F]+)/
+    );
+    if (match) {
+      const index = parseInt(match[1], 10);
+      const r = parseInt(match[2].substring(0, 2), 16);
+      const g = parseInt(match[3].substring(0, 2), 16);
+      const b = parseInt(match[4].substring(0, 2), 16);
+      this.palette.set(index, [r, g, b]);
+      if (this.palette.size >= 16 && this.paletteResolve) {
+        this.paletteResolve();
+        this.paletteResolve = null;
+      }
+    }
+  }
+  // ---- Palette querying ----
+  queryPalette() {
+    return new Promise((resolve) => {
+      const done = () => resolve(this.palette);
+      const timeout = setTimeout(done, 200);
+      this.paletteResolve = () => {
+        clearTimeout(timeout);
+        done();
+      };
+      let query = "";
+      for (let i = 0; i < 16; i++) {
+        query += `\x1B]4;${i};?\x07`;
+      }
+      this.write(query);
+    });
+  }
+  // ---- Event handling ----
+  onResize(handler) {
+    this.stdout.on("resize", handler);
+    return () => {
+      this.stdout.off("resize", handler);
+    };
+  }
+  installCleanupHandlers() {
+    const doCleanup = () => this.cleanup();
+    process.on("exit", doCleanup);
+    const handleSignal = (signal) => {
+      doCleanup();
+      process.kill(process.pid, signal);
+    };
+    process.once("SIGINT", () => handleSignal("SIGINT"));
+    process.once("SIGTERM", () => handleSignal("SIGTERM"));
+    process.on("uncaughtException", (err) => {
+      doCleanup();
+      console.error(err);
+      process.exit(1);
+    });
+    process.on("unhandledRejection", (err) => {
+      doCleanup();
+      console.error(err);
+      process.exit(1);
+    });
+  }
+};
+
+// src/runtime/input.ts
+function parseKeySequence(data) {
+  const keys = [];
+  let i = 0;
+  while (i < data.length) {
+    const ch = data[i];
+    const code = data.charCodeAt(i);
+    if (ch === "\x1B") {
+      if (data[i + 1] === "[") {
+        const seq = parseCsiSequence(data, i);
+        if (seq) {
+          keys.push(seq.key);
+          i = seq.end;
+          continue;
+        }
+      }
+      if (i + 1 < data.length && data.charCodeAt(i + 1) >= 32) {
+        keys.push({
+          name: data[i + 1],
+          sequence: data.substring(i, i + 2),
+          alt: true
+        });
+        i += 2;
+        continue;
+      }
+      keys.push({ name: "escape", sequence: "\x1B" });
+      i++;
+      continue;
+    }
+    if (code >= 1 && code <= 26) {
+      const letter = String.fromCharCode(code + 96);
+      if (code === 13) {
+        keys.push({ name: "return", sequence: "\r" });
+      } else if (code === 9) {
+        keys.push({ name: "tab", sequence: "	" });
+      } else if (code === 8) {
+        keys.push({ name: "backspace", sequence: "\b" });
+      } else {
+        keys.push({ name: letter, sequence: ch, ctrl: true });
+      }
+      i++;
+      continue;
+    }
+    if (code === 127) {
+      keys.push({ name: "backspace", sequence: ch });
+      i++;
+      continue;
+    }
+    keys.push({ name: ch, sequence: ch });
+    i++;
+  }
+  return keys;
+}
+function parseCsiSequence(data, start) {
+  let i = start + 2;
+  let params = "";
+  while (i < data.length) {
+    const code = data.charCodeAt(i);
+    if (code >= 48 && code <= 63) {
+      params += data[i];
+      i++;
+    } else {
+      break;
+    }
+  }
+  if (i >= data.length) return null;
+  const final = data[i];
+  const sequence = data.substring(start, i + 1);
+  i++;
+  let key;
+  switch (final) {
+    case "A":
+      key = { name: "up", sequence };
+      break;
+    case "B":
+      key = { name: "down", sequence };
+      break;
+    case "C":
+      key = { name: "right", sequence };
+      break;
+    case "D":
+      key = { name: "left", sequence };
+      break;
+    case "H":
+      key = { name: "home", sequence };
+      break;
+    case "F":
+      key = { name: "end", sequence };
+      break;
+    case "Z":
+      key = { name: "tab", sequence, shift: true };
+      break;
+    case "~": {
+      switch (params) {
+        case "2":
+          key = { name: "insert", sequence };
+          break;
+        case "3":
+          key = { name: "delete", sequence };
+          break;
+        case "5":
+          key = { name: "pageup", sequence };
+          break;
+        case "6":
+          key = { name: "pagedown", sequence };
+          break;
+        default:
+          key = { name: "unknown", sequence };
+      }
+      break;
+    }
+    default:
+      key = { name: "unknown", sequence };
+  }
+  if (params.includes(";")) {
+    const parts = params.split(";");
+    const mod = parseInt(parts[1] ?? "1", 10) - 1;
+    if (mod & 1) key.shift = true;
+    if (mod & 2) key.alt = true;
+    if (mod & 4) key.ctrl = true;
+  }
+  return { key, end: i };
+}
+
+// src/paint/color.ts
+var NAMED_FG = {
+  black: "\x1B[30m",
+  red: "\x1B[31m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m",
+  white: "\x1B[37m",
+  blackBright: "\x1B[90m",
+  redBright: "\x1B[91m",
+  greenBright: "\x1B[92m",
+  yellowBright: "\x1B[93m",
+  blueBright: "\x1B[94m",
+  magentaBright: "\x1B[95m",
+  cyanBright: "\x1B[96m",
+  whiteBright: "\x1B[97m"
+};
+var NAMED_BG = {
+  black: "\x1B[40m",
+  red: "\x1B[41m",
+  green: "\x1B[42m",
+  yellow: "\x1B[43m",
+  blue: "\x1B[44m",
+  magenta: "\x1B[45m",
+  cyan: "\x1B[46m",
+  white: "\x1B[47m",
+  blackBright: "\x1B[100m",
+  redBright: "\x1B[101m",
+  greenBright: "\x1B[102m",
+  yellowBright: "\x1B[103m",
+  blueBright: "\x1B[104m",
+  magentaBright: "\x1B[105m",
+  cyanBright: "\x1B[106m",
+  whiteBright: "\x1B[107m"
+};
+function parseHex(hex) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return { r, g, b };
+}
+function colorToFg(color) {
+  if (typeof color === "string") {
+    if (color.startsWith("#")) {
+      const { r: r2, g: g2, b: b2 } = parseHex(color);
+      return `\x1B[38;2;${r2};${g2};${b2}m`;
+    }
+    return NAMED_FG[color] ?? "\x1B[39m";
+  }
+  if (typeof color === "number") {
+    return `\x1B[38;5;${color}m`;
+  }
+  const { r, g, b } = color;
+  return `\x1B[38;2;${r};${g};${b}m`;
+}
+function colorToBg(color) {
+  if (typeof color === "string") {
+    if (color.startsWith("#")) {
+      const { r: r2, g: g2, b: b2 } = parseHex(color);
+      return `\x1B[48;2;${r2};${g2};${b2}m`;
+    }
+    return NAMED_BG[color] ?? "\x1B[49m";
+  }
+  if (typeof color === "number") {
+    return `\x1B[48;5;${color}m`;
+  }
+  const { r, g, b } = color;
+  return `\x1B[48;2;${r};${g};${b}m`;
+}
+var NAMED_RGB = {
+  black: [0, 0, 0],
+  red: [170, 0, 0],
+  green: [0, 170, 0],
+  yellow: [170, 170, 0],
+  blue: [0, 0, 170],
+  magenta: [170, 0, 170],
+  cyan: [0, 170, 170],
+  white: [170, 170, 170],
+  blackBright: [85, 85, 85],
+  redBright: [255, 85, 85],
+  greenBright: [85, 255, 85],
+  yellowBright: [255, 255, 85],
+  blueBright: [85, 85, 255],
+  magentaBright: [255, 85, 255],
+  cyanBright: [85, 255, 255],
+  whiteBright: [255, 255, 255]
+};
+var NAMED_INDEX = [
+  "black",
+  "red",
+  "green",
+  "yellow",
+  "blue",
+  "magenta",
+  "cyan",
+  "white",
+  "blackBright",
+  "redBright",
+  "greenBright",
+  "yellowBright",
+  "blueBright",
+  "magentaBright",
+  "cyanBright",
+  "whiteBright"
+];
+var terminalPalette = null;
+function setTerminalPalette(palette) {
+  if (palette.size > 0) {
+    terminalPalette = palette;
+  }
+}
+function resolveNamedRgb(name) {
+  if (terminalPalette) {
+    const idx = NAMED_INDEX.indexOf(name);
+    if (idx !== -1) {
+      const tp = terminalPalette.get(idx);
+      if (tp) return tp;
+    }
+  }
+  return NAMED_RGB[name] ?? null;
+}
+function colorToRgb(color) {
+  if (typeof color === "string") {
+    if (color.startsWith("#")) {
+      const c = parseHex(color);
+      return [c.r, c.g, c.b];
+    }
+    return resolveNamedRgb(color);
+  }
+  if (typeof color === "number") {
+    if (color < 16) {
+      if (terminalPalette) {
+        const tp = terminalPalette.get(color);
+        if (tp) return tp;
+      }
+      return NAMED_RGB[NAMED_INDEX[color]];
+    }
+    if (color >= 232) {
+      const g2 = (color - 232) * 10 + 8;
+      return [g2, g2, g2];
+    }
+    const idx = color - 16;
+    const b = idx % 6 * 51;
+    const g = Math.floor(idx / 6) % 6 * 51;
+    const r = Math.floor(idx / 36) * 51;
+    return [r, g, b];
+  }
+  return [color.r, color.g, color.b];
+}
+function isLightColor(color) {
+  const rgb = colorToRgb(color);
+  if (!rgb) return false;
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return luminance > 0.4;
+}
+function colorsEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return false;
+  if (typeof a === "object" && typeof b === "object") {
+    return a.r === b.r && a.g === b.g && a.b === b.b;
+  }
+  return false;
+}
+
+// src/paint/framebuffer.ts
+var Framebuffer = class _Framebuffer {
+  width;
+  height;
+  cells;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.cells = new Array(width * height);
+    this.clear();
+  }
+  clear() {
+    for (let i = 0; i < this.cells.length; i++) {
+      this.cells[i] = { ch: " " };
+    }
+  }
+  resize(width, height) {
+    this.width = width;
+    this.height = height;
+    this.cells = new Array(width * height);
+    this.clear();
+  }
+  get(x, y) {
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return void 0;
+    return this.cells[y * this.width + x];
+  }
+  set(x, y, cell) {
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
+    this.cells[y * this.width + x] = cell;
+  }
+  setChar(x, y, ch, fg, bg, bold, dim, italic, underline) {
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
+    this.cells[y * this.width + x] = { ch, fg, bg, bold, dim, italic, underline };
+  }
+  fillRect(x, y, w, h, ch, fg, bg) {
+    for (let row = y; row < y + h; row++) {
+      for (let col = x; col < x + w; col++) {
+        this.setChar(col, row, ch, fg, bg);
+      }
+    }
+  }
+  clone() {
+    const fb = new _Framebuffer(this.width, this.height);
+    for (let i = 0; i < this.cells.length; i++) {
+      const c = this.cells[i];
+      fb.cells[i] = { ...c };
+    }
+    return fb;
+  }
+  cellsEqual(a, b) {
+    return a.ch === b.ch && colorsEqual(a.fg, b.fg) && colorsEqual(a.bg, b.bg) && (a.bold ?? false) === (b.bold ?? false) && (a.dim ?? false) === (b.dim ?? false) && (a.italic ?? false) === (b.italic ?? false) && (a.underline ?? false) === (b.underline ?? false);
+  }
+};
+
+// src/paint/borders.ts
+var BORDER_CHARS = {
+  single: {
+    topLeft: "\u250C",
+    topRight: "\u2510",
+    bottomLeft: "\u2514",
+    bottomRight: "\u2518",
+    horizontal: "\u2500",
+    vertical: "\u2502"
+  },
+  double: {
+    topLeft: "\u2554",
+    topRight: "\u2557",
+    bottomLeft: "\u255A",
+    bottomRight: "\u255D",
+    horizontal: "\u2550",
+    vertical: "\u2551"
+  },
+  round: {
+    topLeft: "\u256D",
+    topRight: "\u256E",
+    bottomLeft: "\u2570",
+    bottomRight: "\u256F",
+    horizontal: "\u2500",
+    vertical: "\u2502"
+  },
+  ascii: {
+    topLeft: "+",
+    topRight: "+",
+    bottomLeft: "+",
+    bottomRight: "+",
+    horizontal: "-",
+    vertical: "|"
+  }
+};
+function getBorderChars(style) {
+  if (style === "none") return null;
+  return BORDER_CHARS[style];
+}
+function measureText(text, maxWidth, widthMode, wrapMode) {
+  if (text.length === 0) {
+    return { width: 0, height: 0 };
+  }
+  const lines = text.split("\n");
+  if (widthMode === Yoga.MeasureMode.Undefined || wrapMode === "none") {
+    let maxW2 = 0;
+    for (const line of lines) {
+      const w = stringWidth__default.default(line);
+      if (w > maxW2) maxW2 = w;
+    }
+    return { width: maxW2, height: lines.length };
+  }
+  const availWidth = Math.max(1, Math.floor(maxWidth));
+  const wrappedLines = wrapLines(lines, availWidth, wrapMode);
+  let maxW = 0;
+  for (const line of wrappedLines) {
+    const w = stringWidth__default.default(line);
+    if (w > maxW) maxW = w;
+  }
+  return { width: maxW, height: wrappedLines.length };
+}
+function wrapLines(lines, maxWidth, wrapMode) {
+  const result = [];
+  for (const line of lines) {
+    const lineWidth = stringWidth__default.default(line);
+    if (lineWidth <= maxWidth) {
+      result.push(line);
+      continue;
+    }
+    if (wrapMode === "truncate") {
+      result.push(truncateLine(line, maxWidth));
+      continue;
+    }
+    if (wrapMode === "ellipsis") {
+      result.push(truncateWithEllipsis(line, maxWidth));
+      continue;
+    }
+    const wrapped = wordWrap(line, maxWidth);
+    result.push(...wrapped);
+  }
+  return result;
+}
+function truncateLine(text, maxWidth) {
+  let result = "";
+  let width = 0;
+  for (const char of text) {
+    const charWidth = stringWidth__default.default(char);
+    if (width + charWidth > maxWidth) break;
+    result += char;
+    width += charWidth;
+  }
+  return result;
+}
+function truncateWithEllipsis(text, maxWidth) {
+  if (maxWidth <= 1) {
+    return maxWidth === 1 ? "\u2026" : "";
+  }
+  const truncated = truncateLine(text, maxWidth - 1);
+  if (stringWidth__default.default(truncated) < stringWidth__default.default(text)) {
+    return truncated + "\u2026";
+  }
+  return text;
+}
+function wordWrap(text, maxWidth) {
+  const lines = [];
+  let currentLine = "";
+  let currentWidth = 0;
+  let wordBuffer = "";
+  let wordBufferWidth = 0;
+  for (let i = 0; i <= text.length; i++) {
+    const char = text[i];
+    const isEnd = i === text.length;
+    const isSpace = char === " ";
+    if (isEnd || isSpace) {
+      if (wordBuffer.length > 0) {
+        if (currentWidth + wordBufferWidth <= maxWidth) {
+          currentLine += wordBuffer;
+          currentWidth += wordBufferWidth;
+        } else if (wordBufferWidth <= maxWidth) {
+          if (currentLine.length > 0) {
+            lines.push(currentLine);
+          }
+          currentLine = wordBuffer;
+          currentWidth = wordBufferWidth;
+        } else {
+          for (const c of wordBuffer) {
+            const cw = stringWidth__default.default(c);
+            if (currentWidth + cw > maxWidth && currentLine.length > 0) {
+              lines.push(currentLine);
+              currentLine = "";
+              currentWidth = 0;
+            }
+            currentLine += c;
+            currentWidth += cw;
+          }
+        }
+        wordBuffer = "";
+        wordBufferWidth = 0;
+      }
+      if (isSpace) {
+        if (currentWidth + 1 <= maxWidth) {
+          currentLine += " ";
+          currentWidth += 1;
+        } else {
+          if (currentLine.length > 0) {
+            lines.push(currentLine);
+          }
+          currentLine = " ";
+          currentWidth = 1;
+        }
+      }
+    } else {
+      wordBuffer += char;
+      wordBufferWidth += stringWidth__default.default(char);
+    }
+  }
+  if (currentLine.length > 0) {
+    lines.push(currentLine);
+  }
+  return lines.length > 0 ? lines : [""];
+}
+function paintTree(roots, fb, cursorInfo) {
+  fb.clear();
+  const entries = [];
+  const screenClip = { x: 0, y: 0, width: fb.width, height: fb.height };
+  for (const root of roots) {
+    if (root.hidden) continue;
+    collectPaintEntries(root, screenClip, root.style.zIndex ?? 0, entries);
+  }
+  entries.sort((a, b) => a.zIndex - b.zIndex);
+  for (const entry of entries) {
+    paintNode(entry.node, fb, entry.clip, cursorInfo);
+  }
+}
+function collectPaintEntries(node, parentClip, parentZ, entries) {
+  if (node.hidden) return;
+  const zIndex = node.style.zIndex ?? parentZ;
+  const clip = node.style.clip ? intersectClip(parentClip, {
+    x: node.layout.innerX,
+    y: node.layout.innerY,
+    width: node.layout.innerWidth,
+    height: node.layout.innerHeight
+  }) : parentClip;
+  entries.push({ node, clip: parentClip, zIndex });
+  if (node.type !== "text" && node.type !== "input") {
+    for (const child of node.children) {
+      collectPaintEntries(child, clip, zIndex, entries);
+    }
+  }
+}
+function intersectClip(a, b) {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const right = Math.min(a.x + a.width, b.x + b.width);
+  const bottom = Math.min(a.y + a.height, b.y + b.height);
+  return {
+    x,
+    y,
+    width: Math.max(0, right - x),
+    height: Math.max(0, bottom - y)
+  };
+}
+function isInClip(x, y, clip) {
+  return x >= clip.x && x < clip.x + clip.width && y >= clip.y && y < clip.y + clip.height;
+}
+function paintNode(node, fb, clip, cursorInfo) {
+  const { x, y, width, height, innerX, innerY, innerWidth, innerHeight } = node.layout;
+  const style = node.style;
+  if (width <= 0 || height <= 0) return;
+  const inherited = getInheritedTextStyle(node);
+  const effectiveBg = inherited.bg;
+  if (style.bg) {
+    for (let row = y; row < y + height; row++) {
+      for (let col = x; col < x + width; col++) {
+        if (isInClip(col, row, clip)) {
+          fb.setChar(col, row, " ", void 0, style.bg);
+        }
+      }
+    }
+  }
+  const borderChars = style.border ? getBorderChars(style.border) : null;
+  if (borderChars && width >= 2 && height >= 2) {
+    const bc = style.borderColor;
+    const bg = effectiveBg;
+    setClipped(fb, clip, x, y, borderChars.topLeft, bc, bg);
+    for (let col = x + 1; col < x + width - 1; col++) {
+      setClipped(fb, clip, col, y, borderChars.horizontal, bc, bg);
+    }
+    setClipped(fb, clip, x + width - 1, y, borderChars.topRight, bc, bg);
+    setClipped(fb, clip, x, y + height - 1, borderChars.bottomLeft, bc, bg);
+    for (let col = x + 1; col < x + width - 1; col++) {
+      setClipped(fb, clip, col, y + height - 1, borderChars.horizontal, bc, bg);
+    }
+    setClipped(fb, clip, x + width - 1, y + height - 1, borderChars.bottomRight, bc, bg);
+    for (let row = y + 1; row < y + height - 1; row++) {
+      setClipped(fb, clip, x, row, borderChars.vertical, bc, bg);
+      setClipped(fb, clip, x + width - 1, row, borderChars.vertical, bc, bg);
+    }
+  }
+  if (node.type === "text") {
+    paintText(node, fb, clip);
+  } else if (node.type === "input") {
+    paintInput(node, fb, clip, cursorInfo);
+  }
+}
+function setClipped(fb, clip, x, y, ch, fg, bg, bold, dim, italic, underline) {
+  if (isInClip(x, y, clip)) {
+    fb.setChar(x, y, ch, fg, bg, bold, dim, italic, underline);
+  }
+}
+function autoContrastFg(explicitColor, bg) {
+  if (explicitColor !== void 0) return explicitColor;
+  if (bg === void 0) return void 0;
+  return isLightColor(bg) ? "black" : "white";
+}
+function paintText(node, fb, clip) {
+  const { innerX, innerY, innerWidth, innerHeight } = node.layout;
+  const inherited = getInheritedTextStyle(node);
+  const text = collectTextContent(node);
+  if (!text) return;
+  const fg = autoContrastFg(inherited.color, inherited.bg);
+  const wrapMode = node.style.wrap ?? "wrap";
+  const textAlign = node.style.textAlign ?? "left";
+  const rawLines = text.split("\n");
+  const lines = wrapLines(rawLines, innerWidth, wrapMode);
+  for (let lineIdx = 0; lineIdx < lines.length && lineIdx < innerHeight; lineIdx++) {
+    const line = lines[lineIdx];
+    const lineWidth = stringWidth__default.default(line);
+    let offsetX = 0;
+    if (textAlign === "center") {
+      offsetX = Math.max(0, Math.floor((innerWidth - lineWidth) / 2));
+    } else if (textAlign === "right") {
+      offsetX = Math.max(0, innerWidth - lineWidth);
+    }
+    let col = 0;
+    for (const char of line) {
+      const charWidth = stringWidth__default.default(char);
+      if (charWidth > 0) {
+        setClipped(
+          fb,
+          clip,
+          innerX + offsetX + col,
+          innerY + lineIdx,
+          char,
+          fg,
+          inherited.bg,
+          inherited.bold,
+          inherited.dim,
+          inherited.italic,
+          inherited.underline
+        );
+      }
+      col += charWidth;
+    }
+  }
+}
+function paintInput(node, fb, clip, cursorInfo) {
+  const { innerX, innerY, innerWidth, innerHeight } = node.layout;
+  if (innerWidth <= 0 || innerHeight <= 0) return;
+  const value = node.props.value ?? node.props.defaultValue ?? "";
+  const placeholder = node.props.placeholder ?? "";
+  const displayText = value || placeholder;
+  const isPlaceholder = !value && !!placeholder;
+  const multiline = node.props.multiline ?? false;
+  const inherited = getInheritedTextStyle(node);
+  const autoFg = autoContrastFg(inherited.color, inherited.bg);
+  const placeholderFg = inherited.bg ? isLightColor(inherited.bg) ? "blackBright" : "whiteBright" : "blackBright";
+  const fg = isPlaceholder ? placeholderFg : autoFg ?? inherited.color ?? node.style.color;
+  const textFg = isPlaceholder ? placeholderFg : fg;
+  const textDim = isPlaceholder ? true : inherited.dim;
+  if (multiline && !isPlaceholder) {
+    const wrapMode = node.style.wrap ?? "wrap";
+    const rawLines = displayText.split("\n");
+    const wrappedLines = wrapLines(rawLines, innerWidth, wrapMode);
+    let cursorScreenLine = 0;
+    let cursorScreenCol = 0;
+    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+      const pos = cursorInfo.position;
+      let logicalLine = 0;
+      let offsetInLogicalLine = pos;
+      let runningPos = 0;
+      for (let i = 0; i < rawLines.length; i++) {
+        const lineLen = rawLines[i].length;
+        if (pos <= runningPos + lineLen) {
+          logicalLine = i;
+          offsetInLogicalLine = pos - runningPos;
+          break;
+        }
+        runningPos += lineLen + 1;
+      }
+      let wrappedLinesBefore = 0;
+      for (let i = 0; i < logicalLine; i++) {
+        wrappedLinesBefore += wrapLines([rawLines[i]], innerWidth, wrapMode).length;
+      }
+      const wrappedCurrentLine = wrapLines([rawLines[logicalLine]], innerWidth, wrapMode);
+      let charsProcessed = 0;
+      let subLineIdx = 0;
+      for (let i = 0; i < wrappedCurrentLine.length; i++) {
+        const subLine = wrappedCurrentLine[i];
+        if (offsetInLogicalLine <= charsProcessed + subLine.length) {
+          subLineIdx = i;
+          break;
+        }
+        charsProcessed += subLine.length;
+      }
+      cursorScreenLine = wrappedLinesBefore + subLineIdx;
+      cursorScreenCol = stringWidth__default.default(rawLines[logicalLine].slice(charsProcessed, charsProcessed + (offsetInLogicalLine - charsProcessed)));
+    }
+    const scrollOffset = Math.max(0, cursorScreenLine - innerHeight + 1);
+    for (let rowIdx = 0; rowIdx < innerHeight; rowIdx++) {
+      const lineNum = scrollOffset + rowIdx;
+      if (lineNum >= wrappedLines.length) break;
+      const line = wrappedLines[lineNum];
+      let col = 0;
+      for (const char of line) {
+        if (col >= innerWidth) break;
+        const charWidth = stringWidth__default.default(char);
+        if (charWidth > 0) {
+          setClipped(
+            fb,
+            clip,
+            innerX + col,
+            innerY + rowIdx,
+            char,
+            textFg,
+            inherited.bg,
+            inherited.bold,
+            textDim,
+            inherited.italic,
+            inherited.underline
+          );
+        }
+        col += charWidth;
+      }
+    }
+    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+      const screenRow = cursorScreenLine - scrollOffset;
+      if (screenRow >= 0 && screenRow < innerHeight) {
+        const cCol = Math.min(cursorScreenCol, innerWidth - 1);
+        const cursorX = innerX + cCol;
+        const cursorY = innerY + screenRow;
+        if (isInClip(cursorX, cursorY, clip) && cursorX < innerX + innerWidth) {
+          const existing = fb.get(cursorX, cursorY);
+          const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
+          const cursorFg = inherited.bg ?? "black";
+          const cursorBg = inherited.color ?? "white";
+          fb.setChar(
+            cursorX,
+            cursorY,
+            cursorChar,
+            cursorFg,
+            cursorBg,
+            existing?.bold,
+            existing?.dim,
+            existing?.italic,
+            false
+          );
+        }
+      }
+    }
+  } else {
+    let col = 0;
+    for (const char of displayText) {
+      if (col >= innerWidth) break;
+      const charWidth = stringWidth__default.default(char);
+      if (charWidth > 0) {
+        setClipped(
+          fb,
+          clip,
+          innerX + col,
+          innerY,
+          char,
+          textFg,
+          inherited.bg,
+          inherited.bold,
+          textDim,
+          inherited.italic,
+          inherited.underline
+        );
+      }
+      col += charWidth;
+    }
+    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+      const cursorCol = Math.min(cursorInfo.position, innerWidth - 1);
+      const cursorX = innerX + cursorCol;
+      if (isInClip(cursorX, innerY, clip) && cursorX < innerX + innerWidth) {
+        const existing = fb.get(cursorX, innerY);
+        const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
+        const cursorFg = inherited.bg ?? "black";
+        const cursorBg = inherited.color ?? "white";
+        fb.setChar(
+          cursorX,
+          innerY,
+          cursorChar,
+          cursorFg,
+          cursorBg,
+          existing?.bold,
+          existing?.dim,
+          existing?.italic,
+          false
+        );
+      }
+    }
+  }
+}
+
+// src/paint/diff.ts
+var ESC2 = "\x1B";
+var CSI2 = `${ESC2}[`;
+function moveCursor(x, y) {
+  return `${CSI2}${y + 1};${x + 1}H`;
+}
+function buildSGR(cell) {
+  let seq = `${CSI2}0m`;
+  if (cell.bold) seq += `${CSI2}1m`;
+  if (cell.dim) seq += `${CSI2}2m`;
+  if (cell.italic) seq += `${CSI2}3m`;
+  if (cell.underline) seq += `${CSI2}4m`;
+  if (cell.fg != null) seq += colorToFg(cell.fg);
+  if (cell.bg != null) seq += colorToBg(cell.bg);
+  return seq;
+}
+function diffFramebuffers(prev, next, fullRedraw) {
+  let out = "";
+  let lastX = -1;
+  let lastY = -1;
+  let lastSGR = "";
+  for (let y = 0; y < next.height; y++) {
+    for (let x = 0; x < next.width; x++) {
+      const nc = next.get(x, y);
+      if (!fullRedraw) {
+        const pc = prev.get(x, y);
+        if (pc && next.cellsEqual(nc, pc)) continue;
+      }
+      if (lastY !== y || lastX !== x) {
+        out += moveCursor(x, y);
+      }
+      const sgr = buildSGR(nc);
+      if (sgr !== lastSGR) {
+        out += sgr;
+        lastSGR = sgr;
+      }
+      out += nc.ch;
+      lastX = x + 1;
+      lastY = y;
+    }
+  }
+  if (out.length > 0) {
+    out += `${CSI2}0m`;
+  }
+  return out;
+}
+var FLEX_DIR_MAP = {
+  row: Yoga.FlexDirection.Row,
+  column: Yoga.FlexDirection.Column
+};
+var JUSTIFY_MAP = {
+  "flex-start": Yoga.Justify.FlexStart,
+  center: Yoga.Justify.Center,
+  "flex-end": Yoga.Justify.FlexEnd,
+  "space-between": Yoga.Justify.SpaceBetween,
+  "space-around": Yoga.Justify.SpaceAround
+};
+var ALIGN_MAP = {
+  "flex-start": Yoga.Align.FlexStart,
+  center: Yoga.Align.Center,
+  "flex-end": Yoga.Align.FlexEnd,
+  stretch: Yoga.Align.Stretch
+};
+function setDimension(node, setter, value) {
+  if (value === void 0) return;
+  if (typeof value === "string" && value.endsWith("%")) {
+    setter(value);
+  } else {
+    setter(value);
+  }
+}
+function setPosition(node, edge, value) {
+  if (value === void 0) return;
+  if (typeof value === "string" && value.endsWith("%")) {
+    node.setPositionPercent(edge, parseFloat(value));
+  } else {
+    node.setPosition(edge, value);
+  }
+}
+function applyStyleToYogaNode(yogaNode, style, nodeType) {
+  setDimension(yogaNode, (v) => yogaNode.setWidth(v), style.width);
+  setDimension(yogaNode, (v) => yogaNode.setHeight(v), style.height);
+  if (style.minWidth !== void 0) yogaNode.setMinWidth(style.minWidth);
+  if (style.minHeight !== void 0) yogaNode.setMinHeight(style.minHeight);
+  if (style.maxWidth !== void 0) yogaNode.setMaxWidth(style.maxWidth);
+  if (style.maxHeight !== void 0) yogaNode.setMaxHeight(style.maxHeight);
+  if (style.padding !== void 0) yogaNode.setPadding(Yoga.Edge.All, style.padding);
+  if (style.paddingX !== void 0) yogaNode.setPadding(Yoga.Edge.Horizontal, style.paddingX);
+  if (style.paddingY !== void 0) yogaNode.setPadding(Yoga.Edge.Vertical, style.paddingY);
+  if (style.paddingTop !== void 0) yogaNode.setPadding(Yoga.Edge.Top, style.paddingTop);
+  if (style.paddingRight !== void 0) yogaNode.setPadding(Yoga.Edge.Right, style.paddingRight);
+  if (style.paddingBottom !== void 0) yogaNode.setPadding(Yoga.Edge.Bottom, style.paddingBottom);
+  if (style.paddingLeft !== void 0) yogaNode.setPadding(Yoga.Edge.Left, style.paddingLeft);
+  const hasBorder = style.border != null && style.border !== "none";
+  yogaNode.setBorder(Yoga.Edge.All, hasBorder ? 1 : 0);
+  if (style.flexDirection) {
+    yogaNode.setFlexDirection(FLEX_DIR_MAP[style.flexDirection] ?? Yoga.FlexDirection.Column);
+  }
+  if (style.flexWrap) {
+    yogaNode.setFlexWrap(style.flexWrap === "wrap" ? Yoga.Wrap.Wrap : Yoga.Wrap.NoWrap);
+  }
+  if (style.justifyContent) {
+    yogaNode.setJustifyContent(JUSTIFY_MAP[style.justifyContent] ?? Yoga.Justify.FlexStart);
+  }
+  if (style.alignItems) {
+    yogaNode.setAlignItems(ALIGN_MAP[style.alignItems] ?? Yoga.Align.Stretch);
+  }
+  if (style.flexGrow !== void 0) yogaNode.setFlexGrow(style.flexGrow);
+  if (style.flexShrink !== void 0) yogaNode.setFlexShrink(style.flexShrink);
+  if (style.gap !== void 0) yogaNode.setGap(Yoga.Gutter.All, style.gap);
+  if (style.position === "absolute") {
+    yogaNode.setPositionType(Yoga.PositionType.Absolute);
+  } else {
+    yogaNode.setPositionType(Yoga.PositionType.Relative);
+  }
+  if (style.inset !== void 0) {
+    setPosition(yogaNode, Yoga.Edge.Top, style.inset);
+    setPosition(yogaNode, Yoga.Edge.Right, style.inset);
+    setPosition(yogaNode, Yoga.Edge.Bottom, style.inset);
+    setPosition(yogaNode, Yoga.Edge.Left, style.inset);
+  }
+  setPosition(yogaNode, Yoga.Edge.Top, style.top);
+  setPosition(yogaNode, Yoga.Edge.Right, style.right);
+  setPosition(yogaNode, Yoga.Edge.Bottom, style.bottom);
+  setPosition(yogaNode, Yoga.Edge.Left, style.left);
+  if (style.clip) {
+    yogaNode.setOverflow(Yoga.Overflow.Hidden);
+  }
+}
+function buildYogaTree(node) {
+  const yogaNode = Yoga__default.default.Node.create();
+  node.yogaNode = yogaNode;
+  applyStyleToYogaNode(yogaNode, node.style, node.type);
+  if (node.type === "text" || node.type === "input") {
+    yogaNode.setMeasureFunc((width, widthMode, height, heightMode) => {
+      let text;
+      if (node.type === "input") {
+        text = node.props.value ?? node.props.defaultValue ?? node.props.placeholder ?? "";
+        if (text.length === 0) text = " ";
+      } else {
+        text = collectAllText(node);
+      }
+      return measureText(
+        text,
+        width,
+        widthMode,
+        node.style.wrap ?? "wrap"
+      );
+    });
+  } else {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child.hidden) continue;
+      buildYogaTree(child);
+      yogaNode.insertChild(child.yogaNode, yogaNode.getChildCount());
+    }
+  }
+}
+function collectAllText(node) {
+  if (node.text != null) return node.text;
+  let result = "";
+  for (const child of node.children) {
+    result += collectAllText(child);
+  }
+  if (result === "" && node.props.children != null) {
+    if (typeof node.props.children === "string") return node.props.children;
+    if (typeof node.props.children === "number") return String(node.props.children);
+  }
+  return result;
+}
+function extractLayout(node, parentX, parentY) {
+  const yn = node.yogaNode;
+  const computedLayout = yn.getComputedLayout();
+  const x = parentX + computedLayout.left;
+  const y = parentY + computedLayout.top;
+  const width = computedLayout.width;
+  const height = computedLayout.height;
+  const borderWidth = node.style.border && node.style.border !== "none" ? 1 : 0;
+  const paddingTop = yn.getComputedPadding(Yoga.Edge.Top);
+  const paddingRight = yn.getComputedPadding(Yoga.Edge.Right);
+  const paddingBottom = yn.getComputedPadding(Yoga.Edge.Bottom);
+  const paddingLeft = yn.getComputedPadding(Yoga.Edge.Left);
+  const innerX = x + borderWidth + paddingLeft;
+  const innerY = y + borderWidth + paddingTop;
+  const innerWidth = Math.max(0, width - borderWidth * 2 - paddingLeft - paddingRight);
+  const innerHeight = Math.max(0, height - borderWidth * 2 - paddingTop - paddingBottom);
+  node.layout = { x, y, width, height, innerX, innerY, innerWidth, innerHeight };
+  for (const child of node.children) {
+    if (child.hidden || !child.yogaNode) continue;
+    extractLayout(child, x, y);
+  }
+}
+function computeLayout(roots, screenWidth, screenHeight) {
+  const rootYoga = Yoga__default.default.Node.create();
+  rootYoga.setWidth(screenWidth);
+  rootYoga.setHeight(screenHeight);
+  rootYoga.setFlexDirection(Yoga.FlexDirection.Column);
+  for (const child of roots) {
+    if (child.hidden) continue;
+    buildYogaTree(child);
+    rootYoga.insertChild(child.yogaNode, rootYoga.getChildCount());
+  }
+  rootYoga.calculateLayout(screenWidth, screenHeight, Yoga.Direction.LTR);
+  for (const child of roots) {
+    if (child.hidden || !child.yogaNode) continue;
+    extractLayout(child, 0, 0);
+  }
+  rootYoga.freeRecursive();
+  clearYogaRefs(roots);
+}
+function clearYogaRefs(nodes) {
+  for (const node of nodes) {
+    node.yogaNode = null;
+    clearYogaRefs(node.children);
+  }
+}
+var InputContext = React15.createContext(null);
+var FocusContext = React15.createContext(null);
+var LayoutContext = React15.createContext(null);
+var AppContext = React15.createContext(null);
+
+// src/render.ts
+function render(element, opts = {}) {
+  const stdout = opts.stdout ?? process.stdout;
+  const stdin = opts.stdin ?? process.stdin;
+  const debug = opts.debug ?? false;
+  const terminal = new Terminal(stdout, stdin);
+  terminal.setup();
+  terminal.queryPalette().then((palette) => {
+    setTerminalPalette(palette);
+    fullRedraw = true;
+    scheduleRender();
+  });
+  const prevFb = new Framebuffer(terminal.columns, terminal.rows);
+  const currentFb = new Framebuffer(terminal.columns, terminal.rows);
+  let fullRedraw = true;
+  const inputHandlers = /* @__PURE__ */ new Set();
+  const focusedInputHandlers = /* @__PURE__ */ new Map();
+  const inputContextValue = {
+    subscribe(handler) {
+      inputHandlers.add(handler);
+      return () => inputHandlers.delete(handler);
+    },
+    registerInputHandler(focusId, handler) {
+      focusedInputHandlers.set(focusId, handler);
+      return () => focusedInputHandlers.delete(focusId);
+    }
+  };
+  let focusedId = null;
+  const focusRegistry = /* @__PURE__ */ new Map();
+  const focusOrder = [];
+  let trapStack = [];
+  const focusChangeHandlers = /* @__PURE__ */ new Set();
+  function setFocusedId(id) {
+    if (focusedId !== id) {
+      focusedId = id;
+      scheduleRender();
+      for (const handler of focusChangeHandlers) {
+        handler(focusedId);
+      }
+    }
+  }
+  function getActiveFocusableIds() {
+    if (trapStack.length > 0) {
+      const trap = trapStack[trapStack.length - 1];
+      return focusOrder.filter((id) => trap.has(id));
+    }
+    return focusOrder;
+  }
+  const focusContextValue = {
+    get focusedId() {
+      return focusedId;
+    },
+    register(id, node) {
+      focusRegistry.set(id, node);
+      if (!focusOrder.includes(id)) {
+        focusOrder.push(id);
+      }
+      if (trapStack.length > 0) {
+        trapStack[trapStack.length - 1].add(id);
+      }
+      if (focusedId === null) {
+        setFocusedId(id);
+      }
+      return () => {
+        focusRegistry.delete(id);
+        const idx = focusOrder.indexOf(id);
+        if (idx !== -1) focusOrder.splice(idx, 1);
+        if (focusedId === id) {
+          setFocusedId(focusOrder[0] ?? null);
+        }
+      };
+    },
+    requestFocus(id) {
+      setFocusedId(id);
+    },
+    focusNext() {
+      const ids = getActiveFocusableIds();
+      if (ids.length === 0) return;
+      const currentIdx = focusedId ? ids.indexOf(focusedId) : -1;
+      const nextIdx = (currentIdx + 1) % ids.length;
+      setFocusedId(ids[nextIdx]);
+    },
+    focusPrev() {
+      const ids = getActiveFocusableIds();
+      if (ids.length === 0) return;
+      const currentIdx = focusedId ? ids.indexOf(focusedId) : 0;
+      const prevIdx = (currentIdx - 1 + ids.length) % ids.length;
+      setFocusedId(ids[prevIdx]);
+    },
+    trapIds: null,
+    pushTrap(ids) {
+      trapStack.push(ids);
+      return () => {
+        const idx = trapStack.indexOf(ids);
+        if (idx !== -1) trapStack.splice(idx, 1);
+      };
+    },
+    onFocusChange(handler) {
+      focusChangeHandlers.add(handler);
+      return () => {
+        focusChangeHandlers.delete(handler);
+      };
+    }
+  };
+  const layoutSubscriptions = /* @__PURE__ */ new Map();
+  const layoutContextValue = {
+    getLayout(node) {
+      return node.layout;
+    },
+    subscribe(node, handler) {
+      if (!layoutSubscriptions.has(node)) {
+        layoutSubscriptions.set(node, /* @__PURE__ */ new Set());
+      }
+      layoutSubscriptions.get(node).add(handler);
+      return () => {
+        const subs = layoutSubscriptions.get(node);
+        if (subs) {
+          subs.delete(handler);
+          if (subs.size === 0) layoutSubscriptions.delete(node);
+        }
+      };
+    }
+  };
+  const appContextValue = {
+    registerNode() {
+    },
+    unregisterNode() {
+    },
+    scheduleRender,
+    exit(code) {
+      handle.exit(code);
+    },
+    get columns() {
+      return terminal.columns;
+    },
+    get rows() {
+      return terminal.rows;
+    }
+  };
+  const container = {
+    type: "root",
+    children: [],
+    onCommit() {
+      scheduleRender();
+    }
+  };
+  let renderScheduled = false;
+  function scheduleRender() {
+    if (renderScheduled) return;
+    renderScheduled = true;
+    queueMicrotask(() => {
+      renderScheduled = false;
+      performRender();
+    });
+  }
+  function performRender() {
+    const cols = terminal.columns;
+    const rows = terminal.rows;
+    if (currentFb.width !== cols || currentFb.height !== rows) {
+      currentFb.resize(cols, rows);
+      prevFb.resize(cols, rows);
+      fullRedraw = true;
+    }
+    computeLayout(container.children, cols, rows);
+    notifyLayoutSubscribers(container.children);
+    let cursorInfo;
+    if (focusedId) {
+      const focusedNode = focusRegistry.get(focusedId);
+      if (focusedNode?.type === "input") {
+        cursorInfo = {
+          nodeId: focusedId,
+          position: focusedNode.props.cursorPosition ?? (focusedNode.props.value?.length ?? 0)
+        };
+      }
+    }
+    paintTree(container.children, currentFb, cursorInfo);
+    const output = diffFramebuffers(prevFb, currentFb, fullRedraw);
+    if (output.length > 0) {
+      terminal.write(output);
+    }
+    for (let i = 0; i < currentFb.cells.length; i++) {
+      prevFb.cells[i] = { ...currentFb.cells[i] };
+    }
+    fullRedraw = false;
+  }
+  function notifyLayoutSubscribers(nodes) {
+    for (const node of nodes) {
+      const subs = layoutSubscriptions.get(node);
+      if (subs) {
+        for (const handler of subs) {
+          handler(node.layout);
+        }
+      }
+      notifyLayoutSubscribers(node.children);
+    }
+  }
+  const removeDataListener = terminal.onData((data) => {
+    const keys = parseKeySequence(data);
+    for (const key of keys) {
+      if (key.ctrl && key.name === "c") {
+        handle.exit();
+        return;
+      }
+      if (key.ctrl && key.name === "z") {
+        terminal.suspend();
+        process.kill(0, "SIGSTOP");
+        return;
+      }
+      if (key.name === "tab" && !key.ctrl && !key.alt) {
+        if (key.shift) {
+          focusContextValue.focusPrev();
+        } else {
+          focusContextValue.focusNext();
+        }
+        continue;
+      }
+      let consumed = false;
+      if (focusedId) {
+        const inputHandler = focusedInputHandlers.get(focusedId);
+        if (inputHandler) {
+          consumed = inputHandler(key);
+        }
+      }
+      if (!consumed) {
+        for (const handler of inputHandlers) {
+          handler(key);
+        }
+      }
+    }
+  });
+  const removeResizeListener = terminal.onResize(() => {
+    fullRedraw = true;
+    scheduleRender();
+  });
+  const handleSigcont = () => {
+    terminal.resume();
+    fullRedraw = true;
+    scheduleRender();
+  };
+  process.on("SIGCONT", handleSigcont);
+  const wrappedElement = React15__default.default.createElement(
+    AppContext.Provider,
+    { value: appContextValue },
+    React15__default.default.createElement(
+      InputContext.Provider,
+      { value: inputContextValue },
+      React15__default.default.createElement(
+        FocusContext.Provider,
+        { value: focusContextValue },
+        React15__default.default.createElement(
+          LayoutContext.Provider,
+          { value: layoutContextValue },
+          element
+        )
+      )
+    )
+  );
+  const root = reconciler.createContainer(
+    container,
+    0,
+    // ConcurrentRoot tag = 0 (LegacyRoot)
+    null,
+    false,
+    null,
+    "",
+    (err) => {
+      if (debug) console.error("Recoverable error:", err);
+    },
+    null
+  );
+  reconciler.updateContainer(wrappedElement, root, null, null);
+  const handle = {
+    unmount() {
+      reconciler.updateContainer(null, root, null, null);
+      removeDataListener();
+      removeResizeListener();
+      process.off("SIGCONT", handleSigcont);
+      terminal.cleanup();
+    },
+    exit(code) {
+      handle.unmount();
+      process.exit(code ?? 0);
+    }
+  };
+  return handle;
+}
+function Box({ children, style, focusable }) {
+  return React15__default.default.createElement("box", { style, focusable }, children);
+}
+function Text({ children, style, wrap }) {
+  const mergedStyle = wrap ? { ...style, wrap } : style;
+  return React15__default.default.createElement("text", { style: mergedStyle }, children);
+}
+function cursorToVisualLine(text, pos, width) {
+  if (width <= 0) {
+    return { visualLine: 0, visualCol: pos, totalVisualLines: 1, lineStartOffset: 0, lineLength: text.length };
+  }
+  const logicalLines = text.split("\n");
+  const allVisualLines = [];
+  let logicalOffset = 0;
+  for (const logicalLine of logicalLines) {
+    const wrapped = wrapLines([logicalLine], width, "wrap");
+    let offsetInLogical = 0;
+    for (const wrappedLine of wrapped) {
+      allVisualLines.push({
+        text: wrappedLine,
+        logicalOffset: logicalOffset + offsetInLogical
+      });
+      offsetInLogical += wrappedLine.length;
+    }
+    logicalOffset += logicalLine.length + 1;
+  }
+  let charCount = 0;
+  for (let i = 0; i < allVisualLines.length; i++) {
+    const vl = allVisualLines[i];
+    const lineLen = vl.text.length;
+    const isEndOfLogicalLine = i + 1 < allVisualLines.length && allVisualLines[i + 1].logicalOffset !== vl.logicalOffset + lineLen;
+    const effectiveLen = lineLen + (isEndOfLogicalLine ? 1 : 0);
+    if (pos < charCount + lineLen || i === allVisualLines.length - 1) {
+      return {
+        visualLine: i,
+        visualCol: Math.min(pos - charCount, lineLen),
+        totalVisualLines: allVisualLines.length,
+        lineStartOffset: charCount,
+        lineLength: lineLen
+      };
+    }
+    charCount += effectiveLen;
+  }
+  const lastIdx = allVisualLines.length - 1;
+  return {
+    visualLine: lastIdx,
+    visualCol: allVisualLines[lastIdx].text.length,
+    totalVisualLines: allVisualLines.length,
+    lineStartOffset: charCount - allVisualLines[lastIdx].text.length,
+    lineLength: allVisualLines[lastIdx].text.length
+  };
+}
+function visualLineToCursor(text, visualLine, visualCol, width) {
+  if (width <= 0) {
+    return Math.min(visualCol, text.length);
+  }
+  const logicalLines = text.split("\n");
+  const allVisualLines = [];
+  let offset = 0;
+  for (const logicalLine of logicalLines) {
+    const wrapped = wrapLines([logicalLine], width, "wrap");
+    let offsetInLogical = 0;
+    for (const wrappedLine of wrapped) {
+      allVisualLines.push({
+        text: wrappedLine,
+        startOffset: offset + offsetInLogical
+      });
+      offsetInLogical += wrappedLine.length;
+    }
+    offset += logicalLine.length + 1;
+  }
+  const targetLine = Math.max(0, Math.min(visualLine, allVisualLines.length - 1));
+  const vl = allVisualLines[targetLine];
+  const col = Math.min(visualCol, vl.text.length);
+  return vl.startOffset + col;
+}
+function cursorToLineCol(text, pos) {
+  const lines = text.split("\n");
+  let remaining = pos;
+  for (let i = 0; i < lines.length; i++) {
+    if (remaining <= lines[i].length) {
+      return { line: i, col: remaining, lines };
+    }
+    remaining -= lines[i].length + 1;
+  }
+  const last = lines.length - 1;
+  return { line: last, col: lines[last].length, lines };
+}
+function lineColToCursor(lines, line, col) {
+  let pos = 0;
+  for (let i = 0; i < line && i < lines.length; i++) {
+    pos += lines[i].length + 1;
+  }
+  return pos + Math.min(col, lines[line]?.length ?? 0);
+}
+function Input(props) {
+  const {
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    placeholder,
+    style,
+    focusedStyle,
+    multiline
+  } = props;
+  const [internalValue, setInternalValue] = React15.useState(defaultValue);
+  const [cursorPos, setCursorPos] = React15.useState(defaultValue.length);
+  const [innerWidth, setInnerWidth] = React15.useState(0);
+  const [isFocused, setIsFocused] = React15.useState(false);
+  const inputCtx = React15.useContext(InputContext);
+  const focusCtx = React15.useContext(FocusContext);
+  const layoutCtx = React15.useContext(LayoutContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  React15.useEffect(() => {
+    if (!layoutCtx || !nodeRef.current) return;
+    const layout = layoutCtx.getLayout(nodeRef.current);
+    setInnerWidth(layout.innerWidth);
+    return layoutCtx.subscribe(nodeRef.current, (rect) => {
+      setInnerWidth(rect.innerWidth);
+    });
+  }, [layoutCtx]);
+  const workingValueRef = React15.useRef(value);
+  const workingCursorRef = React15.useRef(cursorPos);
+  React15.useEffect(() => {
+    workingValueRef.current = value;
+  }, [value]);
+  React15.useEffect(() => {
+    workingCursorRef.current = cursorPos;
+  }, [cursorPos]);
+  const stateRef = React15.useRef({
+    isControlled,
+    onChange,
+    multiline: multiline ?? false,
+    innerWidth
+  });
+  stateRef.current = {
+    isControlled,
+    onChange,
+    multiline: multiline ?? false,
+    innerWidth
+  };
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      const {
+        isControlled: ctrl,
+        onChange: cb,
+        multiline: ml
+      } = stateRef.current;
+      const val = workingValueRef.current;
+      const pos = workingCursorRef.current;
+      if (key.name === "escape") return false;
+      const updateValue = (newVal, newCursor) => {
+        workingValueRef.current = newVal;
+        workingCursorRef.current = newCursor;
+        if (!ctrl) setInternalValue(newVal);
+        cb?.(newVal);
+        setCursorPos(newCursor);
+      };
+      const updateCursor = (newCursor) => {
+        workingCursorRef.current = newCursor;
+        setCursorPos(newCursor);
+      };
+      if (key.name === "return") {
+        if (ml) {
+          const newVal = val.slice(0, pos) + "\n" + val.slice(pos);
+          updateValue(newVal, pos + 1);
+          return true;
+        }
+        return false;
+      }
+      if (key.ctrl) {
+        if (key.name === "w") {
+          if (pos > 0) {
+            let i = pos;
+            while (i > 0 && val[i - 1] === " ") i--;
+            while (i > 0 && val[i - 1] !== " " && (!ml || val[i - 1] !== "\n"))
+              i--;
+            const newVal = val.slice(0, i) + val.slice(pos);
+            updateValue(newVal, i);
+          }
+          return true;
+        }
+        if (key.name === "a") {
+          if (ml) {
+            const { line, lines } = cursorToLineCol(val, pos);
+            updateCursor(lineColToCursor(lines, line, 0));
+          } else {
+            updateCursor(0);
+          }
+          return true;
+        }
+        if (key.name === "e") {
+          if (ml) {
+            const { line, lines } = cursorToLineCol(val, pos);
+            updateCursor(lineColToCursor(lines, line, lines[line].length));
+          } else {
+            updateCursor(val.length);
+          }
+          return true;
+        }
+        if (key.name === "u") {
+          if (ml) {
+            const { line, lines } = cursorToLineCol(val, pos);
+            const lineStart = lineColToCursor(lines, line, 0);
+            if (pos > lineStart) {
+              const newVal = val.slice(0, lineStart) + val.slice(pos);
+              updateValue(newVal, lineStart);
+            }
+          } else {
+            if (pos > 0) {
+              const newVal = val.slice(pos);
+              updateValue(newVal, 0);
+            }
+          }
+          return true;
+        }
+        if (key.name === "k") {
+          if (ml) {
+            const { line, lines } = cursorToLineCol(val, pos);
+            const lineEnd = lineColToCursor(lines, line, lines[line].length);
+            if (pos < lineEnd) {
+              const newVal = val.slice(0, pos) + val.slice(lineEnd);
+              updateValue(newVal, pos);
+            }
+          } else {
+            if (pos < val.length) {
+              const newVal = val.slice(0, pos);
+              updateValue(newVal, pos);
+            }
+          }
+          return true;
+        }
+        return false;
+      }
+      if (key.alt) {
+        if (key.name === "left" || key.name === "b") {
+          let i = pos;
+          while (i > 0 && val[i - 1] === " ") i--;
+          while (i > 0 && val[i - 1] !== " " && val[i - 1] !== "\n") i--;
+          updateCursor(i);
+          return true;
+        }
+        if (key.name === "right" || key.name === "f") {
+          let i = pos;
+          while (i < val.length && val[i] !== " " && val[i] !== "\n") i++;
+          while (i < val.length && val[i] === " ") i++;
+          updateCursor(i);
+          return true;
+        }
+        if (key.name === "backspace" || key.name === "d") {
+          if (key.name === "backspace") {
+            if (pos > 0) {
+              let i = pos;
+              while (i > 0 && val[i - 1] === " ") i--;
+              while (i > 0 && val[i - 1] !== " " && val[i - 1] !== "\n") i--;
+              const newVal = val.slice(0, i) + val.slice(pos);
+              updateValue(newVal, i);
+            }
+            return true;
+          } else {
+            if (pos < val.length) {
+              let i = pos;
+              while (i < val.length && val[i] !== " " && val[i] !== "\n") i++;
+              while (i < val.length && val[i] === " ") i++;
+              const newVal = val.slice(0, pos) + val.slice(i);
+              updateValue(newVal, pos);
+            }
+            return true;
+          }
+        }
+        return false;
+      }
+      if (key.name === "left") {
+        updateCursor(Math.max(0, pos - 1));
+        return true;
+      }
+      if (key.name === "right") {
+        updateCursor(Math.min(val.length, pos + 1));
+        return true;
+      }
+      if (key.name === "up") {
+        const { innerWidth: w } = stateRef.current;
+        const info = cursorToVisualLine(val, pos, w);
+        if (info.visualLine > 0) {
+          updateCursor(visualLineToCursor(val, info.visualLine - 1, info.visualCol, w));
+        }
+        return true;
+      }
+      if (key.name === "down") {
+        const { innerWidth: w } = stateRef.current;
+        const info = cursorToVisualLine(val, pos, w);
+        if (info.visualLine < info.totalVisualLines - 1) {
+          updateCursor(visualLineToCursor(val, info.visualLine + 1, info.visualCol, w));
+        }
+        return true;
+      }
+      if (key.name === "home") {
+        if (ml) {
+          const { line, lines } = cursorToLineCol(val, pos);
+          updateCursor(lineColToCursor(lines, line, 0));
+        } else {
+          updateCursor(0);
+        }
+        return true;
+      }
+      if (key.name === "end") {
+        if (ml) {
+          const { line, lines } = cursorToLineCol(val, pos);
+          updateCursor(lineColToCursor(lines, line, lines[line].length));
+        } else {
+          updateCursor(val.length);
+        }
+        return true;
+      }
+      if (key.name === "backspace") {
+        if (pos > 0) {
+          const newVal = val.slice(0, pos - 1) + val.slice(pos);
+          updateValue(newVal, pos - 1);
+        }
+        return true;
+      }
+      if (key.name === "delete") {
+        if (pos < val.length) {
+          const newVal = val.slice(0, pos) + val.slice(pos + 1);
+          updateValue(newVal, pos);
+        }
+        return true;
+      }
+      if (key.name.length > 1) return false;
+      const ch = key.sequence;
+      if (ch.length === 1 && ch.charCodeAt(0) >= 32) {
+        const newVal = val.slice(0, pos) + ch + val.slice(pos);
+        updateValue(newVal, pos + 1);
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx]);
+  const mergedStyle = {
+    ...style,
+    ...isFocused && focusedStyle ? focusedStyle : {}
+  };
+  return React15__default.default.createElement("input", {
+    style: mergedStyle,
+    value,
+    defaultValue,
+    placeholder,
+    onChange,
+    cursorPosition: cursorPos,
+    multiline: multiline ?? false,
+    focused: isFocused,
+    ref: (node) => {
+      if (node) {
+        nodeRef.current = node;
+        focusIdRef.current = node.focusId;
+      }
+    }
+  });
+}
+function FocusScope({ trap = false, children }) {
+  const focusCtx = React15.useContext(FocusContext);
+  const prevFocusRef = React15.useRef(null);
+  const scopeIdsRef = React15.useRef(/* @__PURE__ */ new Set());
+  React15.useLayoutEffect(() => {
+    if (!trap || !focusCtx) return;
+    prevFocusRef.current = focusCtx.focusedId;
+    const cleanup = focusCtx.pushTrap(scopeIdsRef.current);
+    return () => {
+      cleanup();
+      if (prevFocusRef.current) {
+        focusCtx.requestFocus(prevFocusRef.current);
+      }
+    };
+  }, [trap, focusCtx]);
+  React15.useEffect(() => {
+    if (!trap || !focusCtx) return;
+    if (scopeIdsRef.current.size > 0) {
+      const firstId = scopeIdsRef.current.values().next().value;
+      if (firstId) focusCtx.requestFocus(firstId);
+    }
+  }, [trap, focusCtx]);
+  return React15__default.default.createElement(React15__default.default.Fragment, null, children);
+}
+function Spacer({ size }) {
+  return React15__default.default.createElement("box", {
+    style: { flexGrow: size ?? 1 }
+  });
+}
+function parseKeyDescriptor(descriptor) {
+  const parts = descriptor.toLowerCase().split("+");
+  const name = parts[parts.length - 1];
+  return {
+    name,
+    ctrl: parts.includes("ctrl"),
+    alt: parts.includes("alt"),
+    shift: parts.includes("shift")
+  };
+}
+function matchesKey(matcher, key) {
+  if (key.name !== matcher.name) return false;
+  if (matcher.ctrl !== !!key.ctrl) return false;
+  if (matcher.alt !== !!key.alt) return false;
+  if (matcher.shift !== !!key.shift) return false;
+  return true;
+}
+function Keybind({
+  keypress,
+  onPress,
+  whenFocused,
+  disabled
+}) {
+  const inputCtx = React15.useContext(InputContext);
+  const focusCtx = React15.useContext(FocusContext);
+  const onPressRef = React15.useRef(onPress);
+  onPressRef.current = onPress;
+  const matcherRef = React15.useRef(parseKeyDescriptor(keypress));
+  matcherRef.current = parseKeyDescriptor(keypress);
+  React15.useEffect(() => {
+    if (!inputCtx || disabled) return;
+    const handler = (key) => {
+      if (!matchesKey(matcherRef.current, key)) return;
+      if (whenFocused && focusCtx?.focusedId !== whenFocused) return;
+      onPressRef.current();
+    };
+    return inputCtx.subscribe(handler);
+  }, [inputCtx, focusCtx, whenFocused, disabled]);
+  return null;
+}
+function Portal({ children, zIndex = 1e3 }) {
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        zIndex
+      }
+    },
+    children
+  );
+}
+function Button({
+  onPress,
+  style,
+  focusedStyle,
+  children,
+  disabled
+}) {
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const onPressRef = React15.useRef(onPress);
+  onPressRef.current = onPress;
+  const [isFocused, setIsFocused] = React15.useState(false);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx, disabled]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || disabled) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      if (key.name === "return" || key.name === " " || key.sequence === " ") {
+        onPressRef.current?.();
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx, focusCtx, disabled]);
+  const mergedStyle = {
+    ...style,
+    ...isFocused && focusedStyle ? focusedStyle : {}
+  };
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: mergedStyle,
+      focusable: !disabled,
+      ref: (node) => {
+        if (node) {
+          nodeRef.current = node;
+          focusIdRef.current = node.focusId;
+        }
+      }
+    },
+    children
+  );
+}
+var DEFAULT_RECT = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  innerX: 0,
+  innerY: 0,
+  innerWidth: 0,
+  innerHeight: 0
+};
+function useLayout(nodeRef) {
+  const ctx = React15.useContext(LayoutContext);
+  const [layout, setLayout] = React15.useState(DEFAULT_RECT);
+  React15.useEffect(() => {
+    if (!ctx || !nodeRef?.current) return;
+    setLayout(ctx.getLayout(nodeRef.current));
+    return ctx.subscribe(nodeRef.current, setLayout);
+  }, [ctx, nodeRef]);
+  return layout;
+}
+function useInput(handler, deps = []) {
+  const ctx = React15.useContext(InputContext);
+  React15.useEffect(() => {
+    if (!ctx) return;
+    return ctx.subscribe(handler);
+  }, [ctx, ...deps]);
+}
+
+// src/components/ScrollView.tsx
+function ScrollView({
+  children,
+  style,
+  scrollOffset: controlledOffset,
+  onScroll,
+  defaultScrollOffset = 0,
+  scrollStep = 1,
+  disableKeyboard,
+  scrollToFocus = true,
+  showScrollbar = true
+}) {
+  const isControlled = controlledOffset !== void 0;
+  const [internalOffset, setInternalOffset] = React15.useState(defaultScrollOffset);
+  const offset = isControlled ? controlledOffset : internalOffset;
+  const viewportRef = React15.useRef(null);
+  const contentRef = React15.useRef(null);
+  const viewportLayout = useLayout(viewportRef);
+  const contentLayout = useLayout(contentRef);
+  const focusCtx = React15.useContext(FocusContext);
+  const layoutCtx = React15.useContext(LayoutContext);
+  const viewportHeight = viewportLayout.innerHeight;
+  const contentHeight = contentLayout.height;
+  const maxOffset = Math.max(0, contentHeight - viewportHeight);
+  const setOffset = React15.useCallback(
+    (next) => {
+      const clamped = Math.max(0, Math.min(next, maxOffset));
+      if (isControlled) {
+        onScroll?.(clamped);
+      } else {
+        setInternalOffset(clamped);
+      }
+    },
+    [isControlled, onScroll, maxOffset]
+  );
+  React15.useEffect(() => {
+    if (offset > maxOffset && maxOffset >= 0) {
+      setOffset(maxOffset);
+    }
+  }, [offset, maxOffset, setOffset]);
+  React15.useEffect(() => {
+    if (!scrollToFocus || !focusCtx || !layoutCtx || !contentRef.current) return;
+    const unsubscribe = focusCtx.onFocusChange((focusedId) => {
+      if (!focusedId || !contentRef.current) return;
+      const findNode = (node) => {
+        if (node.focusId === focusedId) return node;
+        for (const child of node.children) {
+          const found = findNode(child);
+          if (found) return found;
+        }
+        return null;
+      };
+      const focusedNode = findNode(contentRef.current);
+      if (!focusedNode) return;
+      const focusedLayout = layoutCtx.getLayout(focusedNode);
+      const contentTopY = contentRef.current.layout?.y ?? 0;
+      const elementTop = focusedLayout.y - contentTopY;
+      const elementBottom = elementTop + focusedLayout.height;
+      const visibleTop = offset;
+      const visibleBottom = offset + viewportHeight;
+      if (elementTop < visibleTop) {
+        setOffset(elementTop);
+      } else if (elementBottom > visibleBottom) {
+        setOffset(elementBottom - viewportHeight);
+      }
+    });
+    return unsubscribe;
+  }, [scrollToFocus, focusCtx, layoutCtx, offset, viewportHeight, setOffset]);
+  useInput((key) => {
+    if (disableKeyboard) return;
+    const halfPage = Math.max(1, Math.floor(viewportHeight / 2));
+    const fullPage = Math.max(1, viewportHeight);
+    switch (key.name) {
+      // Page keys - always safe, inputs don't use these
+      case "pageup":
+        setOffset(offset - fullPage);
+        break;
+      case "pagedown":
+        setOffset(offset + fullPage);
+        break;
+      default:
+        if (key.ctrl) {
+          if (key.name === "d") {
+            setOffset(offset + halfPage);
+          } else if (key.name === "u") {
+            if (key.shift) {
+              setOffset(offset - halfPage);
+            }
+          } else if (key.name === "f") {
+            setOffset(offset + fullPage);
+          } else if (key.name === "b") {
+            setOffset(offset - fullPage);
+          }
+        }
+        break;
+    }
+  }, [offset, scrollStep, viewportHeight, maxOffset, disableKeyboard, setOffset]);
+  const {
+    padding: _pad,
+    paddingX: _px,
+    paddingY: _py,
+    paddingTop: _pt,
+    paddingRight: _pr,
+    paddingBottom: _pb,
+    paddingLeft: _pl,
+    ...styleRest
+  } = style ?? {};
+  const outerStyle = {
+    ...styleRest,
+    clip: true
+  };
+  const innerStyle = {
+    position: "absolute",
+    top: -offset,
+    left: 0,
+    right: 0,
+    flexDirection: "column",
+    ..._pad !== void 0 && { padding: _pad },
+    ..._px !== void 0 && { paddingX: _px },
+    ..._py !== void 0 && { paddingY: _py },
+    ..._pt !== void 0 && { paddingTop: _pt },
+    ..._pr !== void 0 && { paddingRight: _pr },
+    ..._pb !== void 0 && { paddingBottom: _pb },
+    ..._pl !== void 0 && { paddingLeft: _pl }
+  };
+  const isScrollable = contentHeight > viewportHeight && viewportHeight > 0;
+  const scrollbarVisible = showScrollbar && isScrollable;
+  const thumbHeight = Math.max(1, Math.floor(viewportHeight / contentHeight * viewportHeight));
+  const scrollableRange = contentHeight - viewportHeight;
+  const thumbPosition = scrollableRange > 0 ? Math.floor(offset / scrollableRange * (viewportHeight - thumbHeight)) : 0;
+  const scrollbarChars = [];
+  if (scrollbarVisible) {
+    for (let i = 0; i < viewportHeight; i++) {
+      if (i >= thumbPosition && i < thumbPosition + thumbHeight) {
+        scrollbarChars.push("\u2588");
+      } else {
+        scrollbarChars.push("\u2591");
+      }
+    }
+  }
+  const scrollbarStyle = {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: 1,
+    height: viewportHeight,
+    flexDirection: "column"
+  };
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: outerStyle,
+      ref: (node) => {
+        viewportRef.current = node ?? null;
+      }
+    },
+    // Content
+    React15__default.default.createElement(
+      "box",
+      {
+        style: {
+          ...innerStyle,
+          // Reserve space for scrollbar when visible
+          paddingRight: scrollbarVisible ? (innerStyle.paddingRight ?? 0) + 1 : innerStyle.paddingRight
+        },
+        ref: (node) => {
+          contentRef.current = node ?? null;
+        }
+      },
+      children
+    ),
+    // Scrollbar
+    scrollbarVisible && React15__default.default.createElement(
+      "box",
+      { style: scrollbarStyle },
+      React15__default.default.createElement(
+        "text",
+        { style: { color: "blackBright" } },
+        scrollbarChars.join("\n")
+      )
+    )
+  );
+}
+function List({
+  count,
+  renderItem,
+  selectedIndex: controlledIndex,
+  onSelectionChange,
+  onSelect,
+  defaultSelectedIndex = 0,
+  disabledIndices,
+  style,
+  focusable = true
+}) {
+  const isControlled = controlledIndex !== void 0;
+  const [internalIndex, setInternalIndex] = React15.useState(defaultSelectedIndex);
+  const selectedIndex = isControlled ? controlledIndex : internalIndex;
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const onSelectRef = React15.useRef(onSelect);
+  onSelectRef.current = onSelect;
+  const [isFocused, setIsFocused] = React15.useState(false);
+  const lastKeyRef = React15.useRef(null);
+  const setIndex = React15.useCallback(
+    (next) => {
+      const clamped = Math.max(0, Math.min(next, count - 1));
+      if (isControlled) {
+        onSelectionChange?.(clamped);
+      } else {
+        setInternalIndex(clamped);
+      }
+    },
+    [isControlled, onSelectionChange, count]
+  );
+  const findNextEnabled = React15.useCallback(
+    (from, direction) => {
+      if (!disabledIndices || disabledIndices.size === 0) {
+        return Math.max(0, Math.min(from + direction, count - 1));
+      }
+      let next = from + direction;
+      while (next >= 0 && next < count && disabledIndices.has(next)) {
+        next += direction;
+      }
+      if (next < 0 || next >= count) return from;
+      return next;
+    },
+    [disabledIndices, count]
+  );
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current || !focusable) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx, focusable]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  const findFirstEnabled = React15.useCallback(
+    (fromEnd) => {
+      const start = fromEnd ? count - 1 : 0;
+      const direction = fromEnd ? -1 : 1;
+      let index = start;
+      while (index >= 0 && index < count && disabledIndices?.has(index)) {
+        index += direction;
+      }
+      return index >= 0 && index < count ? index : fromEnd ? count - 1 : 0;
+    },
+    [disabledIndices, count]
+  );
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || !focusable) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      if (key.name === "g" && !key.ctrl && !key.alt) {
+        if (lastKeyRef.current === "g") {
+          setIndex(findFirstEnabled(false));
+          lastKeyRef.current = null;
+          return true;
+        }
+        lastKeyRef.current = "g";
+        return true;
+      }
+      if (key.name === "G" || key.name === "g" && key.shift) {
+        lastKeyRef.current = null;
+        setIndex(findFirstEnabled(true));
+        return true;
+      }
+      lastKeyRef.current = null;
+      if (key.name === "up" || key.name === "k") {
+        setIndex(findNextEnabled(selectedIndex, -1));
+        return true;
+      }
+      if (key.name === "down" || key.name === "j") {
+        setIndex(findNextEnabled(selectedIndex, 1));
+        return true;
+      }
+      if (key.name === "return") {
+        if (!disabledIndices?.has(selectedIndex)) {
+          onSelectRef.current?.(selectedIndex);
+        }
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx, focusCtx, focusable, selectedIndex, setIndex, findNextEnabled, findFirstEnabled, disabledIndices]);
+  const items = [];
+  for (let i = 0; i < count; i++) {
+    items.push(
+      React15__default.default.createElement(
+        React15__default.default.Fragment,
+        { key: i },
+        renderItem({ index: i, selected: i === selectedIndex, focused: isFocused })
+      )
+    );
+  }
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: { flexDirection: "column", ...style },
+      focusable,
+      ref: (node) => {
+        if (node) {
+          nodeRef.current = node;
+          focusIdRef.current = node.focusId;
+        }
+      }
+    },
+    ...items
+  );
+}
+function Menu({
+  items,
+  selectedIndex,
+  onSelectionChange,
+  onSelect,
+  defaultSelectedIndex = 0,
+  style,
+  highlightColor = "cyan",
+  focusable = true
+}) {
+  const disabledIndices = /* @__PURE__ */ new Set();
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].disabled) disabledIndices.add(i);
+  }
+  const handleSelect = (index) => {
+    const item = items[index];
+    if (item && !item.disabled) {
+      onSelect?.(item.value, index);
+    }
+  };
+  return React15__default.default.createElement(List, {
+    count: items.length,
+    selectedIndex,
+    onSelectionChange,
+    onSelect: handleSelect,
+    defaultSelectedIndex,
+    disabledIndices: disabledIndices.size > 0 ? disabledIndices : void 0,
+    style,
+    focusable,
+    renderItem: ({ index, selected, focused }) => {
+      const item = items[index];
+      const isDisabled = item.disabled;
+      const isHighlighted = selected && focused;
+      const indicator = selected ? ">" : " ";
+      return React15__default.default.createElement(
+        "box",
+        {
+          style: {
+            flexDirection: "row",
+            ...isHighlighted ? { bg: highlightColor } : {}
+          }
+        },
+        React15__default.default.createElement(
+          "text",
+          {
+            style: isHighlighted ? { bold: true, color: "black" } : isDisabled ? { dim: true } : {}
+          },
+          `${indicator} ${item.label}`
+        )
+      );
+    }
+  });
+}
+function Progress({
+  value,
+  indeterminate = false,
+  width = "100%",
+  label,
+  showPercent = false,
+  style,
+  filled = "\u2588",
+  empty = "\u2591"
+}) {
+  const trackRef = React15.useRef(null);
+  const trackLayout = useLayout(trackRef);
+  const trackWidth = trackLayout.innerWidth;
+  const [indeterminatePos, setIndeterminatePos] = React15.useState(0);
+  React15.useEffect(() => {
+    if (!indeterminate) return;
+    const timer = setInterval(() => {
+      setIndeterminatePos((p) => (p + 1) % Math.max(1, trackWidth + 6));
+    }, 100);
+    return () => clearInterval(timer);
+  }, [indeterminate, trackWidth]);
+  const clamped = Math.max(0, Math.min(1, value ?? 0));
+  const pctText = showPercent ? ` ${Math.round(clamped * 100)}%` : "";
+  let barText = "";
+  if (trackWidth > 0) {
+    if (indeterminate && value === void 0) {
+      const chunkSize = Math.max(1, Math.min(3, Math.floor(trackWidth / 4)));
+      const chars = [];
+      for (let i = 0; i < trackWidth; i++) {
+        if (i >= indeterminatePos - chunkSize && i < indeterminatePos) {
+          chars.push(filled);
+        } else {
+          chars.push(empty);
+        }
+      }
+      barText = chars.join("");
+    } else {
+      const filledCount = Math.round(clamped * trackWidth);
+      barText = filled.repeat(filledCount) + empty.repeat(trackWidth - filledCount);
+    }
+  }
+  const children = [];
+  if (label) {
+    children.push(
+      React15__default.default.createElement("text", { key: "label", style: { bold: true } }, label + " ")
+    );
+  }
+  children.push(
+    React15__default.default.createElement(
+      "box",
+      {
+        key: "track",
+        style: { flexGrow: 1, flexShrink: 1 },
+        ref: (node) => {
+          trackRef.current = node ?? null;
+        }
+      },
+      React15__default.default.createElement("text", { key: "bar", style: {} }, barText)
+    )
+  );
+  if (showPercent) {
+    children.push(
+      React15__default.default.createElement("text", { key: "pct", style: { bold: true } }, pctText)
+    );
+  }
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: {
+        flexDirection: "row",
+        width,
+        ...style
+      }
+    },
+    ...children
+  );
+}
+var BRAILLE_FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function Spinner({
+  frames = BRAILLE_FRAMES,
+  intervalMs = 80,
+  label,
+  style
+}) {
+  const [frameIndex, setFrameIndex] = React15.useState(0);
+  React15.useEffect(() => {
+    const timer = setInterval(() => {
+      setFrameIndex((i) => (i + 1) % frames.length);
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [frames.length, intervalMs]);
+  const children = [
+    React15__default.default.createElement("text", { key: "frame", style }, frames[frameIndex])
+  ];
+  if (label) {
+    children.push(
+      React15__default.default.createElement("text", { key: "label", style: {} }, " " + label)
+    );
+  }
+  return React15__default.default.createElement(
+    "box",
+    { style: { flexDirection: "row" } },
+    ...children
+  );
+}
+var ToastContext = React15.createContext(null);
+var nextToastId = 0;
+function useToast() {
+  const ctx = React15.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a <ToastHost>");
+  return ctx.push;
+}
+var VARIANT_COLORS = {
+  info: { bg: "blackBright", title: "cyanBright", text: "white" },
+  success: { bg: "blackBright", title: "greenBright", text: "white" },
+  warning: { bg: "blackBright", title: "yellowBright", text: "white" },
+  error: { bg: "blackBright", title: "redBright", text: "white" }
+};
+function ToastHost({
+  position = "bottom-right",
+  maxVisible = 5,
+  children
+}) {
+  const [toasts, setToasts] = React15.useState([]);
+  const timersRef = React15.useRef(/* @__PURE__ */ new Map());
+  const push = React15.useCallback((toast) => {
+    const id = `toast-${nextToastId++}`;
+    const full = { id, durationMs: 3e3, variant: "info", ...toast };
+    setToasts((prev) => [...prev, full]);
+    if (full.durationMs && full.durationMs > 0) {
+      const timer = setTimeout(() => {
+        timersRef.current.delete(id);
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, full.durationMs);
+      timersRef.current.set(id, timer);
+    }
+  }, []);
+  React15.useEffect(() => {
+    return () => {
+      for (const timer of timersRef.current.values()) {
+        clearTimeout(timer);
+      }
+      timersRef.current.clear();
+    };
+  }, []);
+  const ctxValue = React15.useRef({ push });
+  ctxValue.current.push = push;
+  const isTop = position.startsWith("top");
+  const isRight = position.endsWith("right");
+  const portalStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: 900,
+    flexDirection: "column",
+    justifyContent: isTop ? "flex-start" : "flex-end",
+    alignItems: isRight ? "flex-end" : "flex-start",
+    padding: 1
+  };
+  const visible = toasts.slice(-maxVisible);
+  const toastElements = visible.map((toast) => {
+    const variant = toast.variant ?? "info";
+    const colors = VARIANT_COLORS[variant];
+    const innerChildren = [];
+    if (toast.title) {
+      innerChildren.push(
+        React15__default.default.createElement("text", {
+          key: "title",
+          style: { bold: true, color: colors.title }
+        }, toast.title)
+      );
+    }
+    innerChildren.push(
+      React15__default.default.createElement("text", {
+        key: "msg",
+        style: { color: colors.text }
+      }, toast.message)
+    );
+    return React15__default.default.createElement(
+      "box",
+      {
+        key: toast.id,
+        style: {
+          bg: colors.bg,
+          paddingX: 1,
+          flexDirection: "column",
+          minWidth: 20,
+          maxWidth: 50
+        }
+      },
+      ...innerChildren
+    );
+  });
+  return React15__default.default.createElement(
+    ToastContext.Provider,
+    { value: ctxValue.current },
+    children,
+    toastElements.length > 0 ? React15__default.default.createElement("box", { style: portalStyle }, ...toastElements) : null
+  );
+}
+function Select({
+  items,
+  value,
+  onChange,
+  placeholder = "Select...",
+  style,
+  focusedStyle,
+  dropdownStyle,
+  highlightColor = "cyan",
+  maxVisible = 8,
+  searchable = true,
+  disabled
+}) {
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const appCtx = React15.useContext(AppContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const onChangeRef = React15.useRef(onChange);
+  onChangeRef.current = onChange;
+  const [isFocused, setIsFocused] = React15.useState(false);
+  const [isOpen, setIsOpen] = React15.useState(false);
+  const [highlightIndex, setHighlightIndex] = React15.useState(0);
+  const [searchText, setSearchText] = React15.useState("");
+  const [scrollOffset, setScrollOffset] = React15.useState(0);
+  const triggerLayout = useLayout(nodeRef);
+  const screenRows = appCtx?.rows ?? 24;
+  const selectedItem = items.find((item) => item.value === value);
+  const selectedLabel = selectedItem?.label ?? "";
+  const filteredItems = React15.useMemo(() => {
+    if (!searchText) return items;
+    const lower = searchText.toLowerCase();
+    return items.filter((item) => item.label.toLowerCase().includes(lower));
+  }, [items, searchText]);
+  const visibleCount = Math.min(maxVisible, filteredItems.length);
+  const visibleItems = filteredItems.slice(
+    scrollOffset,
+    scrollOffset + visibleCount
+  );
+  React15.useEffect(() => {
+    setHighlightIndex(0);
+    setScrollOffset(0);
+  }, [searchText]);
+  React15.useEffect(() => {
+    if (!isFocused && isOpen) {
+      setIsOpen(false);
+      setSearchText("");
+    }
+  }, [isFocused, isOpen]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx, disabled]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  const findNextEnabled = React15.useCallback(
+    (from, direction) => {
+      let next = from + direction;
+      while (next >= 0 && next < filteredItems.length) {
+        if (!filteredItems[next].disabled) return next;
+        next += direction;
+      }
+      return from;
+    },
+    [filteredItems]
+  );
+  const ensureVisible = React15.useCallback(
+    (index) => {
+      if (index < scrollOffset) {
+        setScrollOffset(index);
+      } else if (index >= scrollOffset + visibleCount) {
+        setScrollOffset(index - visibleCount + 1);
+      }
+    },
+    [scrollOffset, visibleCount]
+  );
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || disabled) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      if (!isOpen) {
+        if (key.name === "return" || key.name === " " || key.sequence === " " || key.name === "down") {
+          setIsOpen(true);
+          setSearchText("");
+          const idx = filteredItems.findIndex((item) => item.value === value);
+          const start = idx >= 0 ? idx : 0;
+          setHighlightIndex(start);
+          setScrollOffset(
+            Math.max(0, start - Math.floor(maxVisible / 2))
+          );
+          return true;
+        }
+        return false;
+      }
+      if (key.name === "tab") {
+        setIsOpen(false);
+        setSearchText("");
+        return false;
+      }
+      if (key.name === "escape") {
+        setIsOpen(false);
+        setSearchText("");
+        return true;
+      }
+      if (key.name === "return") {
+        const item = filteredItems[highlightIndex];
+        if (item && !item.disabled) {
+          onChangeRef.current?.(item.value);
+          setIsOpen(false);
+          setSearchText("");
+        }
+        return true;
+      }
+      if (key.name === "up") {
+        const next = findNextEnabled(highlightIndex, -1);
+        setHighlightIndex(next);
+        ensureVisible(next);
+        return true;
+      }
+      if (key.name === "down") {
+        const next = findNextEnabled(highlightIndex, 1);
+        setHighlightIndex(next);
+        ensureVisible(next);
+        return true;
+      }
+      if (key.name === "backspace") {
+        if (searchable && searchText.length > 0) {
+          setSearchText((prev) => prev.slice(0, -1));
+        }
+        return true;
+      }
+      if (key.name === "home") {
+        const first = findNextEnabled(-1, 1);
+        setHighlightIndex(first);
+        ensureVisible(first);
+        return true;
+      }
+      if (key.name === "end") {
+        const last = findNextEnabled(filteredItems.length, -1);
+        setHighlightIndex(last);
+        ensureVisible(last);
+        return true;
+      }
+      if (searchable && key.sequence && key.sequence.length === 1 && !key.ctrl && !key.alt) {
+        const ch = key.sequence;
+        if (ch >= " " && ch <= "~") {
+          setSearchText((prev) => prev + ch);
+          return true;
+        }
+      }
+      return true;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [
+    inputCtx,
+    focusCtx,
+    disabled,
+    isOpen,
+    highlightIndex,
+    filteredItems,
+    value,
+    maxVisible,
+    searchable,
+    searchText,
+    findNextEnabled,
+    ensureVisible
+  ]);
+  const useDefaultBorder = !style?.bg && style?.border === void 0;
+  const triggerStyle = {
+    flexDirection: "row",
+    width: "100%",
+    ...useDefaultBorder ? { border: "single" } : {},
+    ...style,
+    ...isFocused && focusedStyle ? focusedStyle : {}
+  };
+  const labelColor = selectedLabel ? style?.color ?? void 0 : "blackBright";
+  const triggerChildren = [
+    React15__default.default.createElement(
+      "text",
+      {
+        key: "label",
+        style: {
+          flexGrow: 1,
+          flexShrink: 1,
+          color: labelColor,
+          wrap: "ellipsis",
+          ...selectedLabel ? {} : { dim: true }
+        }
+      },
+      selectedLabel || placeholder
+    ),
+    React15__default.default.createElement(
+      "text",
+      {
+        key: "arrow",
+        style: { flexShrink: 0, color: isFocused ? highlightColor : "blackBright" }
+      },
+      isOpen ? " \u25B2" : " \u25BC"
+    )
+  ];
+  let dropdownElement = null;
+  if (isOpen) {
+    const dropdownChildren = [];
+    if (searchable && searchText) {
+      dropdownChildren.push(
+        React15__default.default.createElement(
+          "box",
+          { key: "search", style: { paddingX: 1 } },
+          React15__default.default.createElement(
+            "text",
+            { style: { color: "blackBright", dim: true } },
+            `/${searchText}`
+          )
+        )
+      );
+    }
+    if (filteredItems.length === 0) {
+      dropdownChildren.push(
+        React15__default.default.createElement(
+          "box",
+          { key: "empty", style: { paddingX: 1 } },
+          React15__default.default.createElement(
+            "text",
+            { style: { dim: true, color: "blackBright" } },
+            "No matches"
+          )
+        )
+      );
+    }
+    if (scrollOffset > 0) {
+      dropdownChildren.push(
+        React15__default.default.createElement(
+          "box",
+          {
+            key: "scroll-up",
+            style: { justifyContent: "center", alignItems: "center" }
+          },
+          React15__default.default.createElement(
+            "text",
+            { style: { dim: true, color: "blackBright" } },
+            "\u25B2"
+          )
+        )
+      );
+    }
+    visibleItems.forEach((item, vi) => {
+      const actualIndex = scrollOffset + vi;
+      const isHighlighted = actualIndex === highlightIndex;
+      const isDisabled = item.disabled;
+      const itemStyle = {
+        paddingX: 1,
+        ...isHighlighted && !isDisabled ? { bg: highlightColor } : {}
+      };
+      const textStyle = {
+        ...isHighlighted && !isDisabled ? { color: "black", bold: true } : {},
+        ...isDisabled ? { dim: true, color: "blackBright" } : {}
+      };
+      dropdownChildren.push(
+        React15__default.default.createElement(
+          "box",
+          { key: `item-${item.value}`, style: itemStyle },
+          React15__default.default.createElement(
+            "text",
+            { style: textStyle },
+            item.label
+          )
+        )
+      );
+    });
+    if (scrollOffset + visibleCount < filteredItems.length) {
+      dropdownChildren.push(
+        React15__default.default.createElement(
+          "box",
+          {
+            key: "scroll-down",
+            style: { justifyContent: "center", alignItems: "center" }
+          },
+          React15__default.default.createElement(
+            "text",
+            { style: { dim: true, color: "blackBright" } },
+            "\u25BC"
+          )
+        )
+      );
+    }
+    const hasScrollUp = scrollOffset > 0;
+    const hasScrollDown = scrollOffset + visibleCount < filteredItems.length;
+    const hasSearch = searchable && searchText;
+    const hasNoMatches = filteredItems.length === 0;
+    const useDropdownBorder = !dropdownStyle?.bg && dropdownStyle?.border === void 0;
+    const borderSize = useDropdownBorder ? 2 : 0;
+    let dropdownHeight = visibleCount + borderSize;
+    if (hasScrollUp) dropdownHeight += 1;
+    if (hasScrollDown) dropdownHeight += 1;
+    if (hasSearch) dropdownHeight += 1;
+    if (hasNoMatches) dropdownHeight += 1;
+    const triggerBottom = triggerLayout.y + triggerLayout.height;
+    const spaceBelow = screenRows - triggerBottom;
+    const spaceAbove = triggerLayout.y;
+    const openUpward = spaceBelow < dropdownHeight && spaceAbove >= dropdownHeight;
+    const dropdownTop = openUpward ? -dropdownHeight : triggerLayout.height || 1;
+    dropdownElement = React15__default.default.createElement(
+      "box",
+      {
+        style: {
+          position: "absolute",
+          top: dropdownTop,
+          left: 0,
+          right: 0,
+          zIndex: 9999,
+          ...useDropdownBorder ? { border: "single" } : {},
+          bg: "black",
+          flexDirection: "column",
+          ...dropdownStyle
+        }
+      },
+      ...dropdownChildren
+    );
+  }
+  const outerStyle = {
+    flexDirection: "column",
+    width: triggerStyle.width ?? "100%",
+    minWidth: triggerStyle.minWidth,
+    maxWidth: triggerStyle.maxWidth,
+    flexGrow: triggerStyle.flexGrow,
+    flexShrink: triggerStyle.flexShrink ?? 1
+  };
+  return React15__default.default.createElement(
+    "box",
+    { style: outerStyle },
+    // Trigger
+    React15__default.default.createElement(
+      "box",
+      {
+        style: triggerStyle,
+        focusable: !disabled,
+        ref: (node) => {
+          nodeRef.current = node ?? null;
+          if (node) {
+            focusIdRef.current = node.focusId;
+          }
+        }
+      },
+      ...triggerChildren
+    ),
+    // Dropdown overlay
+    dropdownElement
+  );
+}
+function Checkbox({
+  checked,
+  onChange,
+  label,
+  style,
+  focusedStyle,
+  disabled,
+  checkedChar = "\u2713",
+  uncheckedChar = " "
+}) {
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const onChangeRef = React15.useRef(onChange);
+  onChangeRef.current = onChange;
+  const checkedRef = React15.useRef(checked);
+  checkedRef.current = checked;
+  const [isFocused, setIsFocused] = React15.useState(false);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx, disabled]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || disabled) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      if (key.name === "return" || key.name === " " || key.sequence === " ") {
+        onChangeRef.current(!checkedRef.current);
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx, focusCtx, disabled]);
+  const mergedStyle = {
+    flexDirection: "row",
+    gap: 1,
+    ...style,
+    ...isFocused && focusedStyle ? focusedStyle : {}
+  };
+  const boxChar = checked ? checkedChar : uncheckedChar;
+  const boxStyle = {
+    color: disabled ? "blackBright" : isFocused ? "white" : style?.color
+  };
+  const labelStyle = {
+    color: disabled ? "blackBright" : style?.color
+  };
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: mergedStyle,
+      focusable: !disabled,
+      ref: (node) => {
+        if (node) {
+          nodeRef.current = node;
+          focusIdRef.current = node.focusId;
+        }
+      }
+    },
+    React15__default.default.createElement(
+      "text",
+      { key: "box", style: boxStyle },
+      `[${boxChar}]`
+    ),
+    label ? React15__default.default.createElement(
+      "text",
+      { key: "label", style: labelStyle },
+      label
+    ) : null
+  );
+}
+function Radio({
+  items,
+  value,
+  onChange,
+  style,
+  itemStyle,
+  focusedItemStyle,
+  selectedItemStyle,
+  disabled,
+  direction = "column",
+  gap = 0,
+  selectedChar = "\u25CF",
+  unselectedChar = "\u25CB"
+}) {
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const onChangeRef = React15.useRef(onChange);
+  onChangeRef.current = onChange;
+  const [isFocused, setIsFocused] = React15.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React15.useState(() => {
+    const selectedIdx = items.findIndex((item) => item.value === value);
+    if (selectedIdx >= 0) return selectedIdx;
+    return items.findIndex((item) => !item.disabled);
+  });
+  const findNextEnabled = React15.useCallback(
+    (startIndex, direction2) => {
+      let index = startIndex;
+      for (let i = 0; i < items.length; i++) {
+        index = (index + direction2 + items.length) % items.length;
+        if (!items[index]?.disabled) return index;
+      }
+      return startIndex;
+    },
+    [items]
+  );
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current || disabled) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx, disabled]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    setIsFocused(focusCtx.focusedId === fid);
+    return focusCtx.onFocusChange((newId) => {
+      setIsFocused(newId === fid);
+    });
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || disabled) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      if (key.name === "up" || key.name === "left" || key.name === "k" || key.name === "tab" && key.shift) {
+        setHighlightedIndex((idx) => findNextEnabled(idx, -1));
+        return true;
+      }
+      if (key.name === "down" || key.name === "right" || key.name === "j" || key.name === "tab" && !key.shift) {
+        setHighlightedIndex((idx) => findNextEnabled(idx, 1));
+        return true;
+      }
+      if (key.name === "return" || key.name === " " || key.sequence === " ") {
+        const item = items[highlightedIndex];
+        if (item && !item.disabled) {
+          onChangeRef.current(item.value);
+        }
+        return true;
+      }
+      return false;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx, focusCtx, disabled, items, highlightedIndex, findNextEnabled]);
+  React15.useEffect(() => {
+    const selectedIdx = items.findIndex((item) => item.value === value);
+    if (selectedIdx >= 0) {
+      setHighlightedIndex(selectedIdx);
+    }
+  }, [value, items]);
+  const containerStyle = {
+    flexDirection: direction,
+    gap,
+    ...style
+  };
+  const radioItems = items.map((item, index) => {
+    const isSelected = item.value === value;
+    const isHighlighted = index === highlightedIndex;
+    const isItemDisabled = disabled || item.disabled;
+    const radioChar = isSelected ? selectedChar : unselectedChar;
+    let computedStyle = {
+      flexDirection: "row",
+      gap: 1,
+      ...itemStyle
+    };
+    if (isSelected && selectedItemStyle) {
+      computedStyle = { ...computedStyle, ...selectedItemStyle };
+    }
+    if (isFocused && isHighlighted && focusedItemStyle) {
+      computedStyle = { ...computedStyle, ...focusedItemStyle };
+    }
+    const textColor = isItemDisabled ? "blackBright" : isFocused && isHighlighted ? focusedItemStyle?.color ?? "white" : isSelected ? selectedItemStyle?.color ?? itemStyle?.color : itemStyle?.color;
+    return React15__default.default.createElement(
+      "box",
+      { key: index, style: computedStyle },
+      React15__default.default.createElement(
+        "text",
+        { key: "radio", style: { color: textColor } },
+        `(${radioChar})`
+      ),
+      React15__default.default.createElement(
+        "text",
+        { key: "label", style: { color: textColor } },
+        item.label
+      )
+    );
+  });
+  return React15__default.default.createElement(
+    "box",
+    {
+      style: containerStyle,
+      focusable: !disabled,
+      ref: (node) => {
+        if (node) {
+          nodeRef.current = node;
+          focusIdRef.current = node.focusId;
+        }
+      }
+    },
+    ...radioItems
+  );
+}
+function useFocus(nodeRef) {
+  const focusCtx = React15.useContext(FocusContext);
+  const [id] = React15.useState(() => `focus-${Math.random().toString(36).slice(2, 9)}`);
+  const isFocused = focusCtx ? focusCtx.focusedId === id : false;
+  React15.useEffect(() => {
+    if (!focusCtx || !nodeRef?.current) return;
+    nodeRef.current.focusId = id;
+    return focusCtx.register(id, nodeRef.current);
+  }, [focusCtx, id, nodeRef]);
+  const focus = React15.useMemo(() => {
+    return () => {
+      focusCtx?.requestFocus(id);
+    };
+  }, [focusCtx, id]);
+  return { focused: isFocused, focus };
+}
+function useApp() {
+  const ctx = React15.useContext(AppContext);
+  if (!ctx) {
+    throw new Error("useApp must be used within a Glyph render tree");
+  }
+  return {
+    exit: ctx.exit,
+    get columns() {
+      return ctx.columns;
+    },
+    get rows() {
+      return ctx.rows;
+    }
+  };
+}
+
+exports.Box = Box;
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.FocusScope = FocusScope;
+exports.Input = Input;
+exports.Keybind = Keybind;
+exports.List = List;
+exports.Menu = Menu;
+exports.Portal = Portal;
+exports.Progress = Progress;
+exports.Radio = Radio;
+exports.ScrollView = ScrollView;
+exports.Select = Select;
+exports.Spacer = Spacer;
+exports.Spinner = Spinner;
+exports.Text = Text;
+exports.ToastHost = ToastHost;
+exports.render = render;
+exports.useApp = useApp;
+exports.useFocus = useFocus;
+exports.useInput = useInput;
+exports.useLayout = useLayout;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map