@mdxui/terminal 2.0.0

package/dist/chunk-LHYQVN3H.js

@@ -0,0 +1,1038 @@
+// src/renderers/interactive-string.ts
+function renderInteractive(node, _context) {
+  return renderInteractiveToString(node, 0);
+}
+function renderInteractiveToString(node, depth) {
+  const props = node.props || {};
+  switch (node.type) {
+    case "text":
+      return props.content || "";
+    case "list":
+      return renderInteractiveList(node);
+    case "table":
+      return renderInteractiveTable(node);
+    case "card":
+      return renderInteractiveCard(node);
+    case "metrics":
+      return renderInteractiveMetrics(node);
+    case "metric":
+      return renderInteractiveSingleMetric(node);
+    default:
+      if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+        return node.children.map((child) => renderInteractiveToString(child, depth + 1)).join("\n");
+      }
+      return "";
+  }
+}
+function renderInteractiveList(node) {
+  const props = node.props || {};
+  const items = props.items;
+  const numbered = props.numbered ?? false;
+  const taskList = props.taskList ?? false;
+  const style = props.style || "unordered";
+  const rawChildren = node.children;
+  const children = Array.isArray(rawChildren) ? rawChildren : [];
+  const lines = [];
+  if (items && items.length > 0) {
+    items.forEach((item, index) => {
+      let text;
+      let marker;
+      if (typeof item === "string") {
+        text = item;
+        marker = numbered || style === "ordered" ? `${index + 1}. ` : "- ";
+      } else {
+        text = item.text ?? "";
+        if (taskList && "checked" in item) {
+          marker = item.checked ? "[x] " : "[ ] ";
+        } else {
+          marker = numbered || style === "ordered" ? `${index + 1}. ` : "- ";
+        }
+      }
+      lines.push(marker + text);
+    });
+  }
+  children.forEach((child, index) => {
+    if (child.type === "list-item") {
+      const content = child.props?.content || "";
+      let marker;
+      if (numbered || style === "ordered") {
+        marker = `${index + 1}. `;
+      } else if (taskList || style === "checklist") {
+        const checked = child.props?.checked;
+        marker = checked ? "[x] " : "[ ] ";
+      } else {
+        marker = "- ";
+      }
+      lines.push(marker + content);
+      const childChildren = child.children;
+      if (childChildren && Array.isArray(childChildren) && childChildren.length > 0) {
+        for (const nestedChild of childChildren) {
+          if (nestedChild.type === "list") {
+            const nestedLines = renderNestedInteractiveList(nestedChild, 1);
+            lines.push(...nestedLines);
+          }
+        }
+      }
+    }
+  });
+  return lines.join("\n");
+}
+function renderNestedInteractiveList(node, depth) {
+  const props = node.props || {};
+  const style = props.style || "unordered";
+  const numbered = props.numbered ?? false;
+  const rawChildren = node.children;
+  const children = Array.isArray(rawChildren) ? rawChildren : [];
+  const lines = [];
+  const indent = "  ".repeat(depth);
+  children.forEach((child, index) => {
+    if (child.type === "list-item") {
+      const content = child.props?.content || "";
+      let marker;
+      if (numbered || style === "ordered") {
+        marker = `${index + 1}. `;
+      } else {
+        marker = "- ";
+      }
+      lines.push(indent + marker + content);
+      const childChildren = child.children;
+      if (childChildren && Array.isArray(childChildren) && childChildren.length > 0) {
+        for (const nestedChild of childChildren) {
+          if (nestedChild.type === "list") {
+            const nestedLines = renderNestedInteractiveList(nestedChild, depth + 1);
+            lines.push(...nestedLines);
+          }
+        }
+      }
+    }
+  });
+  return lines;
+}
+function renderInteractiveTable(node) {
+  const props = node.props || {};
+  const columns = props.columns || [];
+  const nodeData = node.data;
+  const propsData = props.data;
+  const data = nodeData ?? propsData ?? [];
+  if (columns.length === 0) return "";
+  const lines = [];
+  const headers = columns.map((c) => c.header).join("	");
+  lines.push(headers);
+  for (const row of data) {
+    const cells = columns.map((c) => {
+      const val = row[c.key];
+      return val != null ? String(val) : "";
+    });
+    lines.push(cells.join("	"));
+  }
+  return lines.join("\n");
+}
+function renderInteractiveCard(node) {
+  const props = node.props || {};
+  const title = props.title;
+  const subtitle = props.subtitle;
+  const badge = props.badge;
+  const titleAction = props.titleAction;
+  const pairs = props.pairs;
+  const actions = props.actions;
+  const contentLines = [];
+  if (title) {
+    let titleLine = title;
+    if (badge) {
+      titleLine += ` [${badge.content}]`;
+    }
+    if (titleAction) {
+      titleLine += ` | ${titleAction.label}`;
+    }
+    contentLines.push(titleLine);
+  }
+  if (subtitle) {
+    contentLines.push(subtitle);
+  }
+  if (pairs && pairs.length > 0) {
+    for (const pair of pairs) {
+      const val = pair.value != null ? String(pair.value) : "";
+      contentLines.push(`${pair.key}: ${val}`);
+    }
+  }
+  const rawChildren = node.children;
+  const children = Array.isArray(rawChildren) ? rawChildren : [];
+  if (children.length > 0) {
+    const childContent = children.map((child) => renderInteractiveToString(child, 0)).filter((s) => s).join("\n");
+    if (childContent) {
+      contentLines.push(childContent);
+    }
+  }
+  if (actions && actions.length > 0) {
+    const actionLabels = actions.map((a) => `[ ${a.label} ]`).join(" ");
+    contentLines.push(actionLabels);
+  }
+  return contentLines.join("\n");
+}
+function renderInteractiveMetrics(node) {
+  const props = node.props || {};
+  const metrics = props.metrics;
+  if (!metrics || metrics.length === 0) return "";
+  const lines = [];
+  for (const m of metrics) {
+    const val = m.value != null ? String(m.value) : "";
+    let formatted = val;
+    if (m.format === "percentage" && !val.includes("%")) {
+      formatted = `${val}%`;
+    }
+    if (m.unit) {
+      formatted = `${formatted} ${m.unit}`;
+    }
+    lines.push(`${m.label}: ${formatted}`);
+  }
+  return lines.join("\n");
+}
+function renderInteractiveSingleMetric(node) {
+  const props = node.props || {};
+  const label = props.label;
+  const value = props.value;
+  const format = props.format;
+  const unit = props.unit;
+  if (!label) return "";
+  const val = value != null ? String(value) : "";
+  let formatted = val;
+  if (format === "percentage" && !val.includes("%")) {
+    formatted = `${val}%`;
+  }
+  if (unit) {
+    formatted = `${formatted} ${unit}`;
+  }
+  return `${label}: ${formatted}`;
+}
+
+// src/renderers/interactive.ts
+async function createInteractiveRenderer(config) {
+  const { createCliRenderer } = await import("@opentui/core");
+  const cliRenderer = await createCliRenderer();
+  let destroyed = false;
+  const focusables = /* @__PURE__ */ new Map();
+  let focusedId = null;
+  let activeGroup = null;
+  const focusTrapStack = [];
+  let registrationCounter = 0;
+  const wrapFocus = config?.wrapFocus ?? true;
+  const vimBindings = config?.vimBindings ?? false;
+  const sequenceTimeout = config?.sequenceTimeout ?? 500;
+  const targetFps = config?.targetFps ?? 60;
+  const keyHandlers = /* @__PURE__ */ new Map();
+  const sequenceHandlers = /* @__PURE__ */ new Map();
+  let pendingSequence = "";
+  let sequenceTimer = null;
+  let mode = "normal";
+  let searchModeHandler = null;
+  let cancelHandler = null;
+  const clickables = /* @__PURE__ */ new Map();
+  const clickHandlers = [];
+  let scrollHandler = null;
+  let cursorPosition = { x: 0, y: 0 };
+  let cursorVisible = true;
+  let cursorStyle = "block";
+  let cursorBlinking = false;
+  const state = /* @__PURE__ */ new Map();
+  const stateSubscribers = /* @__PURE__ */ new Map();
+  let renderHandler = null;
+  const inputs = /* @__PURE__ */ new Map();
+  const components = /* @__PURE__ */ new Map();
+  const getSortedFocusableIds = () => {
+    if (destroyed) return [];
+    const entries = Array.from(focusables.values()).filter((e) => {
+      if (e.options.tabIndex < 0) return false;
+      if (e.options.disabled) return false;
+      if (activeGroup !== null && e.options.group !== activeGroup) return false;
+      if (focusTrapStack.length > 0) {
+        const currentTrap = focusTrapStack[focusTrapStack.length - 1];
+        if (e.options.group !== currentTrap.group) return false;
+      }
+      return true;
+    }).sort((a, b) => {
+      if (a.options.tabIndex !== b.options.tabIndex) {
+        return a.options.tabIndex - b.options.tabIndex;
+      }
+      return a.registrationOrder - b.registrationOrder;
+    });
+    return entries.map((e) => e.id);
+  };
+  const focusByIndex = (index) => {
+    const ids = getSortedFocusableIds();
+    if (ids.length === 0 || index < 0 || index >= ids.length) return;
+    renderer.focusById(ids[index]);
+  };
+  const getCurrentFocusIndex = () => {
+    if (focusedId === null) return -1;
+    const ids = getSortedFocusableIds();
+    return ids.indexOf(focusedId);
+  };
+  const handleComponentKey = (key) => {
+    if (!focusedId) return false;
+    const input = inputs.get(focusedId);
+    if (input) {
+      return handleInputKey(focusedId, input, key);
+    }
+    const component = components.get(focusedId);
+    if (component) {
+      return handleComponentKeyInternal(focusedId, component, key);
+    }
+    const focusable = focusables.get(focusedId);
+    if (focusable) {
+      if (key === "enter" && focusable.options.onActivate) {
+        focusable.options.onActivate({ id: focusedId });
+        return true;
+      }
+      if (key === "space" && focusable.options.onToggle) {
+        focusable.options.onToggle({ id: focusedId });
+        return true;
+      }
+    }
+    return false;
+  };
+  const handleInputKey = (id, input, key) => {
+    const { currentValue, currentCursorIndex, onChange, onSubmit, maxLength, validate, mask, multiline } = input;
+    if (key === "backspace") {
+      if (currentCursorIndex > 0) {
+        const newValue = currentValue.slice(0, currentCursorIndex - 1) + currentValue.slice(currentCursorIndex);
+        input.currentValue = newValue;
+        input.currentCursorIndex = currentCursorIndex - 1;
+        onChange?.(newValue);
+      }
+      return true;
+    }
+    if (key === "delete") {
+      if (currentCursorIndex < currentValue.length) {
+        const newValue = currentValue.slice(0, currentCursorIndex) + currentValue.slice(currentCursorIndex + 1);
+        input.currentValue = newValue;
+        onChange?.(newValue);
+      }
+      return true;
+    }
+    if (key === "left") {
+      if (currentCursorIndex > 0) {
+        input.currentCursorIndex = currentCursorIndex - 1;
+      }
+      return true;
+    }
+    if (key === "right") {
+      if (currentCursorIndex < currentValue.length) {
+        input.currentCursorIndex = currentCursorIndex + 1;
+      }
+      return true;
+    }
+    if (key === "home") {
+      input.currentCursorIndex = 0;
+      return true;
+    }
+    if (key === "end") {
+      input.currentCursorIndex = currentValue.length;
+      return true;
+    }
+    if (key === "enter") {
+      if (multiline) {
+        const newValue = currentValue + "\n";
+        input.currentValue = newValue;
+        input.currentCursorIndex = newValue.length;
+        onChange?.(newValue);
+      } else {
+        onSubmit?.(currentValue);
+      }
+      return true;
+    }
+    if (key === "ctrl+enter") {
+      onSubmit?.(currentValue);
+      return true;
+    }
+    if (key.length === 1) {
+      if (maxLength !== void 0 && currentValue.length >= maxLength) {
+        return true;
+      }
+      let newValue = currentValue + key;
+      if (mask) {
+        const maskChar = mask[newValue.length - 1];
+        if (maskChar && maskChar !== "#") {
+          newValue = currentValue + maskChar + key;
+        }
+      }
+      if (validate && !validate(newValue)) {
+        return true;
+      }
+      input.currentValue = newValue;
+      input.currentCursorIndex = newValue.length;
+      onChange?.(newValue);
+      return true;
+    }
+    return false;
+  };
+  const handleComponentKeyInternal = (id, component, key) => {
+    const { type, onChange, onSelect, onToggle, options, selectedIndex, checked, value, min, max, step, searchable, onScroll, nodes, selectedId } = component;
+    if (type === "select") {
+      const opts = options;
+      const idx = selectedIndex;
+      if (key === "down" || key === "j") {
+        const newIdx = Math.min(idx + 1, opts.length - 1);
+        component.selectedIndex = newIdx;
+        onChange?.(newIdx, opts[newIdx]);
+        return true;
+      }
+      if (key === "up" || key === "k") {
+        const newIdx = Math.max(idx - 1, 0);
+        component.selectedIndex = newIdx;
+        onChange?.(newIdx, opts[newIdx]);
+        return true;
+      }
+      if (key === "enter") {
+        if (onSelect) {
+          onSelect(idx, opts[idx]);
+        }
+        component.isOpen = !component.isOpen;
+        return true;
+      }
+      if (searchable && key.length === 1) {
+        const matchIdx = opts.findIndex((o) => o.toLowerCase().startsWith(key.toLowerCase()));
+        if (matchIdx !== -1) {
+          component.selectedIndex = matchIdx;
+          onChange?.(matchIdx, opts[matchIdx]);
+        }
+        return true;
+      }
+      return false;
+    }
+    if (type === "checkbox") {
+      if (key === "space" || key === "enter") {
+        const newChecked = !checked;
+        component.checked = newChecked;
+        component.onChange?.(newChecked);
+        return true;
+      }
+      return false;
+    }
+    if (type === "radiogroup") {
+      const opts = options;
+      const idx = selectedIndex;
+      if (key === "down" || key === "up") {
+        const newIdx = key === "down" ? Math.min(idx + 1, opts.length - 1) : Math.max(idx - 1, 0);
+        component.selectedIndex = newIdx;
+        component.onChange?.(newIdx);
+        return true;
+      }
+      if (key === "space") {
+        onSelect?.(idx, opts[idx]);
+        return true;
+      }
+      return false;
+    }
+    if (type === "slider") {
+      const v = value;
+      const minV = min;
+      const maxV = max;
+      const stepV = step ?? 1;
+      if (key === "right" || key === "up") {
+        const newV = Math.min(v + stepV, maxV);
+        component.value = newV;
+        component.onChange?.(newV);
+        return true;
+      }
+      if (key === "left" || key === "down") {
+        const newV = Math.max(v - stepV, minV);
+        component.value = newV;
+        component.onChange?.(newV);
+        return true;
+      }
+      if (key === "home") {
+        component.value = minV;
+        component.onChange?.(minV);
+        return true;
+      }
+      if (key === "end") {
+        component.value = maxV;
+        component.onChange?.(maxV);
+        return true;
+      }
+      return false;
+    }
+    if (type === "tree") {
+      const nodeList = nodes;
+      const currentId = selectedId;
+      const currentNode = nodeList.find((n) => n.id === currentId);
+      if (key === "enter" && currentNode?.children) {
+        const newExpanded = !currentNode.expanded;
+        currentNode.expanded = newExpanded;
+        onToggle?.(currentId, newExpanded);
+        return true;
+      }
+      if (key === "down") {
+        const visibleNodes = getVisibleTreeNodes(nodeList);
+        const currentIndex = visibleNodes.findIndex((n) => n.id === currentId);
+        if (currentIndex < visibleNodes.length - 1) {
+          const nextNode = visibleNodes[currentIndex + 1];
+          component.selectedId = nextNode.id;
+          component.onSelect?.(nextNode.id);
+        }
+        return true;
+      }
+      return false;
+    }
+    if (type === "scrollview") {
+      const currentScrollY = component.scrollY ?? 0;
+      const viewportHeight = component.viewportHeight ?? 20;
+      if (key === "down") {
+        const newScrollY = currentScrollY + 1;
+        component.scrollY = newScrollY;
+        onScroll?.({ scrollY: newScrollY });
+        return true;
+      }
+      if (key === "up") {
+        const newScrollY = Math.max(0, currentScrollY - 1);
+        component.scrollY = newScrollY;
+        onScroll?.({ scrollY: newScrollY });
+        return true;
+      }
+      if (key === "pagedown") {
+        const newScrollY = currentScrollY + viewportHeight;
+        component.scrollY = newScrollY;
+        onScroll?.({ scrollY: newScrollY });
+        return true;
+      }
+      if (key === "pageup") {
+        const newScrollY = Math.max(0, currentScrollY - viewportHeight);
+        component.scrollY = newScrollY;
+        onScroll?.({ scrollY: newScrollY });
+        return true;
+      }
+      return false;
+    }
+    return false;
+  };
+  const getVisibleTreeNodes = (nodes) => {
+    const result = [];
+    const rootNodes = nodes.filter((n) => !n.parent);
+    const addNode = (node) => {
+      result.push(node);
+      if (node.expanded && node.children) {
+        for (const childId of node.children) {
+          const child = nodes.find((n) => n.id === childId);
+          if (child) addNode(child);
+        }
+      }
+    };
+    for (const root of rootNodes) {
+      addNode(root);
+    }
+    return result;
+  };
+  const setupBuiltInKeyHandlers = () => {
+    keyHandlers.set("tab", [{ handler: () => {
+      renderer.focusNext();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("shift+tab", [{ handler: () => {
+      renderer.focusPrev();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("down", [{ handler: () => {
+      if (handleComponentKey("down")) return true;
+      renderer.focusNext();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("up", [{ handler: () => {
+      if (handleComponentKey("up")) return true;
+      renderer.focusPrev();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("left", [{ handler: () => {
+      if (handleComponentKey("left")) return true;
+      renderer.focusPrev();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("right", [{ handler: () => {
+      if (handleComponentKey("right")) return true;
+      renderer.focusNext();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("enter", [{ handler: () => handleComponentKey("enter"), priority: -100 }]);
+    keyHandlers.set("space", [{ handler: () => handleComponentKey("space"), priority: -100 }]);
+    keyHandlers.set("escape", [{ handler: () => {
+      pendingSequence = "";
+      if (sequenceTimer) {
+        clearTimeout(sequenceTimer);
+        sequenceTimer = null;
+      }
+      if (mode === "search") {
+        mode = "normal";
+        return true;
+      }
+      cancelHandler?.();
+      return true;
+    }, priority: -100 }]);
+    keyHandlers.set("backspace", [{ handler: () => handleComponentKey("backspace"), priority: -100 }]);
+    keyHandlers.set("delete", [{ handler: () => handleComponentKey("delete"), priority: -100 }]);
+    keyHandlers.set("home", [{ handler: () => handleComponentKey("home"), priority: -100 }]);
+    keyHandlers.set("end", [{ handler: () => handleComponentKey("end"), priority: -100 }]);
+    keyHandlers.set("pagedown", [{ handler: () => handleComponentKey("pagedown"), priority: -100 }]);
+    keyHandlers.set("pageup", [{ handler: () => handleComponentKey("pageup"), priority: -100 }]);
+    keyHandlers.set("ctrl+enter", [{ handler: () => handleComponentKey("ctrl+enter"), priority: -100 }]);
+    if (vimBindings) {
+      keyHandlers.set("j", [{ handler: () => {
+        if (handleComponentKey("j")) return true;
+        renderer.focusNext();
+        return true;
+      }, priority: -100 }]);
+      keyHandlers.set("k", [{ handler: () => {
+        if (handleComponentKey("k")) return true;
+        renderer.focusPrev();
+        return true;
+      }, priority: -100 }]);
+      keyHandlers.set("h", [{ handler: () => {
+        const ids = getSortedFocusableIds();
+        const currentIdx = getCurrentFocusIndex();
+        if (currentIdx <= 0) return true;
+        const currentFocusable = focusables.get(focusedId);
+        const currentColumn = currentFocusable?.options.column ?? 0;
+        for (let i = currentIdx - 1; i >= 0; i--) {
+          const f = focusables.get(ids[i]);
+          if (f && (f.options.column ?? 0) < currentColumn) {
+            renderer.focusById(ids[i]);
+            return true;
+          }
+        }
+        renderer.focusPrev();
+        return true;
+      }, priority: -100 }]);
+      keyHandlers.set("l", [{ handler: () => {
+        const ids = getSortedFocusableIds();
+        const currentIdx = getCurrentFocusIndex();
+        if (currentIdx < 0 || currentIdx >= ids.length - 1) return true;
+        const currentFocusable = focusables.get(focusedId);
+        const currentColumn = currentFocusable?.options.column ?? 0;
+        for (let i = currentIdx + 1; i < ids.length; i++) {
+          const f = focusables.get(ids[i]);
+          if (f && (f.options.column ?? 0) > currentColumn) {
+            renderer.focusById(ids[i]);
+            return true;
+          }
+        }
+        renderer.focusNext();
+        return true;
+      }, priority: -100 }]);
+      keyHandlers.set("g", [{ handler: () => {
+        return false;
+      }, priority: -100 }]);
+      keyHandlers.set("G", [{ handler: () => {
+        const ids = getSortedFocusableIds();
+        if (ids.length > 0) {
+          renderer.focusById(ids[ids.length - 1]);
+        }
+        return true;
+      }, priority: -100 }]);
+      keyHandlers.set("/", [{ handler: () => {
+        mode = "search";
+        searchModeHandler?.();
+        return true;
+      }, priority: -100 }]);
+      sequenceHandlers.set("gg", () => {
+        const ids = getSortedFocusableIds();
+        if (ids.length > 0) {
+          renderer.focusById(ids[0]);
+        }
+      });
+    }
+  };
+  const renderer = {
+    width: cliRenderer.width,
+    height: cliRenderer.height,
+    // Lifecycle
+    start() {
+      if (destroyed) return;
+      cliRenderer.start();
+    },
+    stop() {
+      if (destroyed) return;
+      cliRenderer.stop();
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      cliRenderer.destroy();
+      focusables.clear();
+      clickables.clear();
+      keyHandlers.clear();
+      sequenceHandlers.clear();
+      inputs.clear();
+      components.clear();
+      state.clear();
+      stateSubscribers.clear();
+      clickHandlers.length = 0;
+      focusedId = null;
+      if (sequenceTimer) {
+        clearTimeout(sequenceTimer);
+        sequenceTimer = null;
+      }
+    },
+    requestRender() {
+      if (destroyed) return;
+      cliRenderer.requestRender();
+    },
+    // Focus management
+    focusNext() {
+      if (destroyed) return;
+      const ids = getSortedFocusableIds();
+      if (ids.length === 0) return;
+      const currentIdx = getCurrentFocusIndex();
+      if (currentIdx === -1) {
+        this.focusById(ids[0]);
+      } else if (currentIdx < ids.length - 1) {
+        this.focusById(ids[currentIdx + 1]);
+      } else if (wrapFocus) {
+        this.focusById(ids[0]);
+      }
+    },
+    focusPrev() {
+      if (destroyed) return;
+      const ids = getSortedFocusableIds();
+      if (ids.length === 0) return;
+      const currentIdx = getCurrentFocusIndex();
+      if (currentIdx === -1) {
+        this.focusById(ids[ids.length - 1]);
+      } else if (currentIdx > 0) {
+        this.focusById(ids[currentIdx - 1]);
+      } else if (wrapFocus) {
+        this.focusById(ids[ids.length - 1]);
+      }
+    },
+    focusById(id) {
+      if (destroyed) return;
+      const entry = focusables.get(id);
+      if (!entry) return;
+      if (focusedId === id) return;
+      if (focusedId) {
+        const prevEntry = focusables.get(focusedId);
+        if (prevEntry?.options.onBlur) {
+          prevEntry.options.onBlur({ id: focusedId });
+        }
+      }
+      focusedId = id;
+      if (entry.options.onFocus) {
+        entry.options.onFocus({ id });
+      }
+      if (entry.options.cursorPosition) {
+        cursorPosition = { ...entry.options.cursorPosition };
+      }
+      if (entry.options.showCursor !== void 0) {
+        cursorVisible = entry.options.showCursor;
+      }
+    },
+    getFocusedId() {
+      if (destroyed) return null;
+      return focusedId;
+    },
+    getFocusableIds() {
+      return getSortedFocusableIds();
+    },
+    registerFocusable(id, options) {
+      if (destroyed) return;
+      focusables.delete(id);
+      focusables.set(id, { id, options, registrationOrder: registrationCounter++ });
+    },
+    unregisterFocusable(id) {
+      if (destroyed) return;
+      focusables.delete(id);
+      if (focusedId === id) {
+        focusedId = null;
+      }
+    },
+    setActiveGroup(group) {
+      if (destroyed) return;
+      activeGroup = group;
+    },
+    pushFocusTrap(group) {
+      if (destroyed) return;
+      focusTrapStack.push({ group, previousFocusId: focusedId });
+      activeGroup = group;
+    },
+    popFocusTrap() {
+      if (destroyed) return;
+      const trap = focusTrapStack.pop();
+      if (trap) {
+        if (trap.previousFocusId) {
+          this.focusById(trap.previousFocusId);
+        }
+        if (focusTrapStack.length > 0) {
+          activeGroup = focusTrapStack[focusTrapStack.length - 1].group;
+        } else {
+          activeGroup = null;
+        }
+      }
+    },
+    // Keyboard management
+    onKeyPress(key, handler, options) {
+      if (destroyed) return;
+      const handlers = keyHandlers.get(key) || [];
+      if (handlers.some((h) => h.handler === handler)) return;
+      handlers.push({ handler, priority: options?.priority ?? 0 });
+      handlers.sort((a, b) => b.priority - a.priority);
+      keyHandlers.set(key, handlers);
+    },
+    offKeyPress(key, handler) {
+      if (destroyed) return;
+      const handlers = keyHandlers.get(key);
+      if (handlers) {
+        const idx = handlers.findIndex((h) => h.handler === handler);
+        if (idx !== -1) {
+          handlers.splice(idx, 1);
+        }
+      }
+    },
+    emitKey(key) {
+      if (destroyed) return;
+      if (sequenceHandlers.size > 0) {
+        const newSequence = pendingSequence + key;
+        const sequenceHandler = sequenceHandlers.get(newSequence);
+        if (sequenceHandler) {
+          pendingSequence = "";
+          if (sequenceTimer) {
+            clearTimeout(sequenceTimer);
+            sequenceTimer = null;
+          }
+          sequenceHandler();
+          return;
+        }
+        const couldBeSequence = Array.from(sequenceHandlers.keys()).some((s) => s.startsWith(newSequence));
+        if (couldBeSequence) {
+          pendingSequence = newSequence;
+          if (sequenceTimer) {
+            clearTimeout(sequenceTimer);
+          }
+          sequenceTimer = setTimeout(() => {
+            pendingSequence = "";
+            sequenceTimer = null;
+          }, sequenceTimeout);
+          return;
+        }
+        pendingSequence = "";
+        if (sequenceTimer) {
+          clearTimeout(sequenceTimer);
+          sequenceTimer = null;
+        }
+      }
+      const handlers = keyHandlers.get(key);
+      if (handlers) {
+        for (const { handler } of handlers) {
+          const result = handler();
+          if (result === true) {
+            return;
+          }
+        }
+      }
+      if (key.length === 1 && focusedId) {
+        handleComponentKey(key);
+      }
+    },
+    onKeySequence(sequence, handler) {
+      if (destroyed) return;
+      sequenceHandlers.set(sequence, handler);
+    },
+    getPendingSequence() {
+      if (destroyed) return "";
+      return pendingSequence;
+    },
+    onSearchMode(handler) {
+      if (destroyed) return;
+      searchModeHandler = handler;
+    },
+    onCancel(handler) {
+      if (destroyed) return;
+      cancelHandler = handler;
+    },
+    getMode() {
+      if (destroyed) return "normal";
+      return mode;
+    },
+    // Mouse management
+    onClick(handler) {
+      if (destroyed) return;
+      clickHandlers.push(handler);
+    },
+    offClick(handler) {
+      if (destroyed) return;
+      const idx = clickHandlers.indexOf(handler);
+      if (idx !== -1) {
+        clickHandlers.splice(idx, 1);
+      }
+    },
+    emitClick(x, y, options) {
+      if (destroyed) return;
+      const clickableEntries = Array.from(clickables.entries()).filter(([, c]) => {
+        return x >= c.x && x < c.x + c.width && y >= c.y && y < c.y + c.height;
+      }).sort((a, b) => (b[1].zIndex ?? 0) - (a[1].zIndex ?? 0));
+      if (clickableEntries.length > 0) {
+        const [id, clickable] = clickableEntries[0];
+        if (clickable.focusable !== false && focusables.has(id)) {
+          this.focusById(id);
+        }
+        if (options?.button === "right" && clickable.onRightClick) {
+          clickable.onRightClick();
+        } else if (options?.clickCount === 2 && clickable.onDoubleClick) {
+          clickable.onDoubleClick();
+        } else if (clickable.onClick) {
+          clickable.onClick({ x, y, id });
+        }
+      }
+      for (const handler of clickHandlers) {
+        handler({ x, y });
+      }
+    },
+    registerClickable(id, options) {
+      if (destroyed) return;
+      clickables.set(id, options);
+    },
+    unregisterClickable(id) {
+      if (destroyed) return;
+      clickables.delete(id);
+    },
+    getClickableAreas() {
+      if (destroyed) return [];
+      return Array.from(clickables.entries()).map(([id, options]) => ({ id, ...options }));
+    },
+    onScroll(handler) {
+      if (destroyed) return;
+      scrollHandler = handler;
+    },
+    emitScroll(_x, _y, options) {
+      if (destroyed) return;
+      scrollHandler?.(options);
+    },
+    // Cursor management
+    setCursorPosition(x, y) {
+      if (destroyed) return;
+      cursorPosition = { x, y };
+    },
+    getCursorPosition() {
+      if (destroyed) return { x: 0, y: 0 };
+      return { ...cursorPosition };
+    },
+    showCursor() {
+      if (destroyed) return;
+      cursorVisible = true;
+    },
+    hideCursor() {
+      if (destroyed) return;
+      cursorVisible = false;
+    },
+    isCursorVisible() {
+      if (destroyed) return false;
+      return cursorVisible;
+    },
+    setCursorStyle(style) {
+      if (destroyed) return;
+      cursorStyle = style;
+    },
+    getCursorStyle() {
+      if (destroyed) return "block";
+      return cursorStyle;
+    },
+    setCursorBlink(blink) {
+      if (destroyed) return;
+      cursorBlinking = blink;
+    },
+    isCursorBlinking() {
+      if (destroyed) return false;
+      return cursorBlinking;
+    },
+    updateCursorPosition(id, position) {
+      if (destroyed) return;
+      const entry = focusables.get(id);
+      if (entry) {
+        entry.options.cursorPosition = position;
+      }
+      if (focusedId === id) {
+        cursorPosition = { ...position };
+      }
+    },
+    // State management
+    setState(key, value) {
+      if (destroyed) return;
+      const oldValue = state.get(key);
+      state.set(key, value);
+      const subscribers = stateSubscribers.get(key);
+      if (subscribers) {
+        for (const subscriber of subscribers) {
+          subscriber(value, oldValue);
+        }
+      }
+      renderHandler?.();
+    },
+    getState(key) {
+      if (destroyed) return void 0;
+      return state.get(key);
+    },
+    subscribe(key, subscriber) {
+      if (destroyed) return () => {
+      };
+      if (!stateSubscribers.has(key)) {
+        stateSubscribers.set(key, /* @__PURE__ */ new Set());
+      }
+      stateSubscribers.get(key).add(subscriber);
+      return () => {
+        const subscribers = stateSubscribers.get(key);
+        if (subscribers) {
+          subscribers.delete(subscriber);
+        }
+      };
+    },
+    onRender(handler) {
+      if (destroyed) return;
+      renderHandler = handler;
+    },
+    getTargetFps() {
+      return targetFps;
+    },
+    // Input management
+    registerInput(id, options) {
+      if (destroyed) return;
+      inputs.set(id, {
+        ...options,
+        currentValue: options.value,
+        currentCursorIndex: options.cursorIndex ?? options.value.length
+      });
+      this.registerFocusable(id, { tabIndex: 0 });
+    },
+    getInputCursorIndex(id) {
+      if (destroyed) return 0;
+      const input = inputs.get(id);
+      return input?.currentCursorIndex ?? 0;
+    },
+    // Component management
+    registerComponent(id, options) {
+      if (destroyed) return;
+      components.set(id, { ...options });
+      if (["select", "checkbox", "radiogroup", "slider", "tree", "scrollview"].includes(options.type)) {
+        this.registerFocusable(id, { tabIndex: 0 });
+      }
+    },
+    unregisterComponent(id) {
+      if (destroyed) return;
+      components.delete(id);
+      this.unregisterFocusable(id);
+    },
+    getComponent(id) {
+      if (destroyed) return void 0;
+      return components.get(id);
+    },
+    updateComponent(id, updates) {
+      if (destroyed) return;
+      const existing = components.get(id);
+      if (existing) {
+        Object.assign(existing, updates);
+      }
+    }
+  };
+  setupBuiltInKeyHandlers();
+  return renderer;
+}
+
+export {
+  renderInteractive,
+  createInteractiveRenderer
+};