@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/LayoutNode-Cjnsodiy.js

@@ -0,0 +1,131 @@
+import Yoga from 'yoga-layout';
+import { m as measureTextBlock } from './text-width-DhuarWcB.js';
+
+const yogaOwner = /* @__PURE__ */ new Map();
+class LayoutNode {
+  yogaNode;
+  children = [];
+  parent = null;
+  _destroyed = false;
+  _hidden = false;
+  // set by Suspense hideInstance/unhideInstance
+  transform;
+  // set by <Transform>
+  // Custom terminal props
+  _text;
+  fg = 255;
+  bg = 255;
+  styles = 0;
+  _style;
+  set text(value) {
+    this._text = value;
+    if (value === void 0) {
+      this.yogaNode.unsetMeasureFunc();
+    } else {
+      this.yogaNode.setMeasureFunc((width, widthMode, height, heightMode) => {
+        if (value.length === 0)
+          return { height: 0, width: 0 };
+        const unconstrained = measureTextBlock(value, Number.MAX_SAFE_INTEGER);
+        let targetWidth = unconstrained.maxLineWidth;
+        if (widthMode === Yoga.MEASURE_MODE_EXACTLY) {
+          targetWidth = Math.max(0, Math.floor(width));
+        } else if (widthMode === Yoga.MEASURE_MODE_AT_MOST) {
+          targetWidth = Math.min(unconstrained.maxLineWidth, Math.max(0, Math.floor(width)));
+        }
+        let targetHeight = unconstrained.wrappedRows;
+        if (targetWidth > 0) {
+          targetHeight = measureTextBlock(value, targetWidth).wrappedRows;
+        }
+        if (heightMode === Yoga.MEASURE_MODE_EXACTLY) {
+          targetHeight = Math.max(0, Math.floor(height));
+        } else if (heightMode === Yoga.MEASURE_MODE_AT_MOST) {
+          targetHeight = Math.min(targetHeight, Math.max(0, Math.floor(height)));
+        }
+        return { height: targetHeight, width: targetWidth };
+      });
+    }
+  }
+  get text() {
+    return this._text;
+  }
+  constructor() {
+    this.yogaNode = Yoga.Node.create();
+    this.yogaNode.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
+  }
+  insertChild(child, index) {
+    const currentOwner = yogaOwner.get(child.yogaNode);
+    if (currentOwner) {
+      currentOwner.removeChild(child);
+    }
+    const staleParent = child.yogaNode.getParent();
+    if (staleParent) {
+      staleParent.removeChild(child.yogaNode);
+    }
+    const yogaCount = this.yogaNode.getChildCount();
+    const safeIndex = Math.min(index, yogaCount);
+    try {
+      this.yogaNode.insertChild(child.yogaNode, safeIndex);
+    } catch {
+      return;
+    }
+    child.parent = this;
+    this.children.splice(safeIndex, 0, child);
+    yogaOwner.set(child.yogaNode, this);
+  }
+  remove() {
+    if (this.parent) {
+      this.parent.removeChild(this);
+    }
+  }
+  removeChild(child) {
+    const i = this.children.indexOf(child);
+    if (i !== -1) {
+      this.children.splice(i, 1);
+      child.parent = null;
+      yogaOwner.delete(child.yogaNode);
+      const yogaParent = child.yogaNode.getParent();
+      if (yogaParent) {
+        yogaParent.removeChild(child.yogaNode);
+      }
+    }
+  }
+  /**
+   * Free this node's Yoga allocation. Called via detachDeletedInstance
+   * in the reconciler after React has permanently removed this node.
+   *
+   * Does NOT recurse — React calls detachDeletedInstance on every node
+   * in a deleted subtree individually, so each node frees only itself.
+   * The _destroyed guard prevents double-free if free() is also called.
+   */
+  destroy() {
+    if (this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+    for (const child of this.children) {
+      if (child.parent === this)
+        child.parent = null;
+    }
+    this.children = [];
+    yogaOwner.delete(this.yogaNode);
+    const staleParent = this.yogaNode.getParent();
+    if (staleParent) {
+      staleParent.removeChild(this.yogaNode);
+    }
+    this.yogaNode.free();
+  }
+  calculateLayout(width, height) {
+    this.yogaNode.setWidth(width);
+    this.yogaNode.setHeight(height);
+    this.yogaNode.calculateLayout(width, height, Yoga.DIRECTION_LTR);
+  }
+  getLayout() {
+    return this.yogaNode.getComputedLayout();
+  }
+  /** @deprecated use destroy() */
+  free() {
+    this.destroy();
+  }
+}
+
+export { LayoutNode };

package/dist/packem_shared/Link-COcKYfGT.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { hyperlink } from '@visulima/ansi';
+import { useCallback } from 'react';
+import Text from './Text-DvAUdZcK.js';
+import Transform from './Transform-BHxY_dAM.js';
+
+let cachedSupportsHyperlinks;
+const detectHyperlinkSupport = () => {
+  if (!process.stdout.isTTY) {
+    return false;
+  }
+  const term = process.env["TERM_PROGRAM"] ?? "";
+  const termVersion = process.env["TERM_PROGRAM_VERSION"] ?? "";
+  if (term === "iTerm.app") {
+    const major = Number.parseInt(termVersion.split(".")[0] ?? "0", 10);
+    return major >= 3;
+  }
+  if (term === "WezTerm" || term === "ghostty") {
+    return true;
+  }
+  if (term === "vscode") {
+    const parts = termVersion.split(".");
+    const major = Number.parseInt(parts[0] ?? "0", 10);
+    const minor = Number.parseInt(parts[1] ?? "0", 10);
+    return major > 1 || major === 1 && minor >= 72;
+  }
+  if (process.env["WT_SESSION"]) {
+    return true;
+  }
+  const vteVersion = process.env["VTE_VERSION"];
+  if (vteVersion) {
+    const v = Number.parseInt(vteVersion, 10);
+    return v >= 5e3 && v !== 5e3;
+  }
+  return false;
+};
+const supportsHyperlinks = () => {
+  if (process.env["FORCE_HYPERLINK"]) {
+    return process.env["FORCE_HYPERLINK"] !== "0";
+  }
+  if (cachedSupportsHyperlinks !== void 0) {
+    return cachedSupportsHyperlinks;
+  }
+  cachedSupportsHyperlinks = detectHyperlinkSupport();
+  return cachedSupportsHyperlinks;
+};
+function Link({ children, fallback = true, url }) {
+  const transform = useCallback(
+    (text) => {
+      if (supportsHyperlinks()) {
+        return hyperlink(text, url);
+      }
+      if (fallback === false) {
+        return text;
+      }
+      if (typeof fallback === "function") {
+        return fallback(text, url);
+      }
+      return `${text} ${url}`;
+    },
+    [fallback, url]
+  );
+  return jsx(Transform, { transform, children: jsx(Text, { children }) });
+}
+
+export { Link as default };

package/dist/packem_shared/Markdown-y1ISztof.js

@@ -0,0 +1,212 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Lexer } from 'marked';
+import React, { useMemo } from 'react';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Code from './Code-DjQvPBD9.js';
+import Link from './Link-COcKYfGT.js';
+import Newline from './Newline-DBtYEg8x.js';
+import OrderedList from './OrderedList-Cp7pXr6m.js';
+import TableComponent from './Table-D-rSVlzb.js';
+import Text from './Text-DvAUdZcK.js';
+import UnorderedList from './UnorderedList-DhnadWjX.js';
+
+const HEADING_COLORS = {
+  1: "cyan",
+  2: "green",
+  3: "yellow",
+  4: "blue",
+  5: "magenta",
+  6: "gray"
+};
+function renderInlineTokens(tokens) {
+  if (!tokens || tokens.length === 0) {
+    return null;
+  }
+  return tokens.map((token, index) => {
+    switch (token.type) {
+      case "br": {
+        return jsx(Newline, {}, index);
+      }
+      case "codespan": {
+        return jsxs(Text, { inverse: true, children: [
+          " ",
+          token.text,
+          " "
+        ] }, index);
+      }
+      case "del": {
+        return jsx(Text, { strikethrough: true, children: renderInlineTokens(token.tokens) }, index);
+      }
+      case "em": {
+        return jsx(Text, { italic: true, children: renderInlineTokens(token.tokens) }, index);
+      }
+      case "escape": {
+        return jsx(React.Fragment, { children: token.text }, index);
+      }
+      case "image": {
+        const img = token;
+        return jsxs(Text, { dimColor: true, children: [
+          "[image:",
+          " ",
+          img.text || img.href,
+          "]"
+        ] }, index);
+      }
+      case "link": {
+        const link = token;
+        return jsx(Link, { url: link.href, children: renderInlineTokens(link.tokens) ?? link.text }, index);
+      }
+      case "strong": {
+        return jsx(Text, { bold: true, children: renderInlineTokens(token.tokens) }, index);
+      }
+      case "text": {
+        return jsx(React.Fragment, { children: token.text }, index);
+      }
+      default: {
+        const rawText = "raw" in token ? token.raw : "";
+        return jsx(React.Fragment, { children: rawText }, index);
+      }
+    }
+  });
+}
+function mapListItems(items) {
+  return items.map((item) => {
+    const listItem = item;
+    const listItemTokens = listItem.tokens ?? [];
+    const textToken = listItemTokens.find((t) => t.type === "text");
+    const label = renderInlineTokens(textToken?.tokens ?? listItemTokens);
+    const nestedList = listItemTokens.find((t) => t.type === "list");
+    const children = nestedList ? mapListItems(nestedList.items) : void 0;
+    return { children, label };
+  });
+}
+function renderBlockTokens(tokens, codeTheme, maxWidth) {
+  const elements = [];
+  for (const [index, token_] of tokens.entries()) {
+    const token = token_;
+    const marginTop = index > 0 ? 1 : 0;
+    switch (token.type) {
+      case "blockquote": {
+        const bq = token;
+        elements.push(
+          jsx(Box, { borderLeft: true, borderLeftColor: "gray", marginTop, paddingLeft: 1, children: jsx(Box, { flexDirection: "column", children: renderBlockTokens(bq.tokens, codeTheme, maxWidth - 3) }) }, index)
+        );
+        break;
+      }
+      case "code": {
+        const code = token;
+        elements.push(
+          jsx(Box, { marginTop, children: jsx(Code, { code: code.text, language: code.lang, theme: codeTheme }) }, index)
+        );
+        break;
+      }
+      case "heading": {
+        const heading = token;
+        const color = HEADING_COLORS[heading.depth] ?? "white";
+        const prefix = `${"#".repeat(heading.depth)} `;
+        elements.push(
+          jsx(Box, { marginTop, children: jsxs(Text, { bold: true, color, children: [
+            prefix,
+            renderInlineTokens(heading.tokens)
+          ] }) }, index)
+        );
+        break;
+      }
+      case "hr": {
+        elements.push(
+          jsx(Box, { marginTop, children: jsx(Text, { dimColor: true, children: "─".repeat(Math.min(maxWidth, 40)) }) }, index)
+        );
+        break;
+      }
+      case "html": {
+        const html = token;
+        const stripped = html.text.replaceAll(/<[^>]*>/g, "");
+        if (stripped.trim()) {
+          elements.push(
+            jsx(Box, { marginTop, children: jsx(Text, { dimColor: true, children: stripped }) }, index)
+          );
+        }
+        break;
+      }
+      case "list": {
+        const list = token;
+        const items = mapListItems(list.items);
+        if (list.ordered) {
+          elements.push(
+            jsx(Box, { marginTop, children: jsx(OrderedList, { items }) }, index)
+          );
+        } else {
+          elements.push(
+            jsx(Box, { marginTop, children: jsx(UnorderedList, { items }) }, index)
+          );
+        }
+        break;
+      }
+      case "paragraph": {
+        const para = token;
+        elements.push(
+          jsx(Box, { marginTop, children: jsx(Text, { wrap: "wrap", children: renderInlineTokens(para.tokens) }) }, index)
+        );
+        break;
+      }
+      case "space": {
+        elements.push(jsx(Newline, {}, index));
+        break;
+      }
+      case "table": {
+        const table = token;
+        const headers = (table.header ?? []).map((cell) => cell.text);
+        const rows = (table.rows ?? []).map((row) => row.map((cell) => cell.text));
+        const data = rows.map((row) => {
+          const record = {};
+          headers.forEach((header, colIndex) => {
+            record[header] = row[colIndex] ?? "";
+          });
+          return record;
+        });
+        elements.push(
+          jsx(Box, { marginTop, children: jsx(TableComponent, { data }) }, index)
+        );
+        break;
+      }
+      default: {
+        const raw = "raw" in token ? token.raw : "";
+        const text = "text" in token ? token.text : raw;
+        if (text) {
+          elements.push(
+            jsx(Box, { marginTop, children: jsx(Text, { children: text }) }, index)
+          );
+        }
+        break;
+      }
+    }
+  }
+  return elements;
+}
+function lexWithStreamingFallback(source, streaming) {
+  const tokens = Lexer.lex(source);
+  if (!streaming || source.length === 0) {
+    return tokens;
+  }
+  let consumedLength = 0;
+  for (const token of tokens) {
+    consumedLength += token.raw?.length ?? 0;
+  }
+  if (consumedLength < source.length) {
+    const trailing = source.slice(consumedLength);
+    if (trailing.trim().length > 0) {
+      tokens.push({ raw: trailing, text: trailing, tokens: [{ raw: trailing, text: trailing, type: "text" }], type: "paragraph" });
+    }
+  }
+  return tokens;
+}
+function Markdown({ children, codeTheme = "github-dark-default", maxWidth: maxWidthProp, streaming = false }) {
+  const { columns } = useWindowSize();
+  const maxWidth = maxWidthProp ?? columns ?? 80;
+  const tokens = useMemo(() => lexWithStreamingFallback(children, streaming), [children, streaming]);
+  const elements = useMemo(() => renderBlockTokens(tokens, codeTheme, maxWidth), [tokens, codeTheme, maxWidth]);
+  return jsx(Box, { flexDirection: "column", children: elements });
+}
+
+export { Markdown as default };

package/dist/packem_shared/MouseProvider-Y9TSSEGl.js

@@ -0,0 +1,136 @@
+import { createRequire as __cjs_createRequire } from "node:module";
+
+const __cjs_require = __cjs_createRequire(import.meta.url);
+
+const __cjs_getProcess = typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" ? globalThis.process : process;
+
+const __cjs_getBuiltinModule = (module) => {
+    // Check if we're in Node.js and version supports getBuiltinModule
+    if (typeof __cjs_getProcess !== "undefined" && __cjs_getProcess.versions && __cjs_getProcess.versions.node) {
+        const [major, minor] = __cjs_getProcess.versions.node.split(".").map(Number);
+        // Node.js 20.16.0+ and 22.3.0+
+        if (major > 22 || (major === 22 && minor >= 3) || (major === 20 && minor >= 16)) {
+            return __cjs_getProcess.getBuiltinModule(module);
+        }
+    }
+    // Fallback to createRequire
+    return __cjs_require(module);
+};
+
+import { jsx } from 'react/jsx-runtime';
+const {
+  EventEmitter
+} = __cjs_getBuiltinModule("node:events");
+const process = __cjs_getProcess;
+import { useRef, useReducer, useEffect, useMemo } from 'react';
+import { useStdinContext } from './useStdin-X-O0kd-n.js';
+import useStdout from './useStdout-DyF6DSH0.js';
+import { A as ANSI_CODES, p as parseSgrMouse } from './ansi-parser-0BdVTKho.js';
+import { M as MouseContext } from './mouse-context-BUHWKEIe.js';
+
+const initialMouseState = {
+  button: null,
+  click: null,
+  drag: null,
+  position: { x: 0, y: 0 },
+  scroll: null
+};
+const mouseReducer = (state, action) => {
+  switch (action.type) {
+    case "click": {
+      return { ...state, button: action.button, click: action.click, position: action.position };
+    }
+    case "click-reset": {
+      return { ...state, button: null, click: null };
+    }
+    case "drag": {
+      return { ...state, button: action.button, drag: action.drag, position: action.position };
+    }
+    case "move": {
+      return { ...state, position: action.position };
+    }
+    case "scroll": {
+      return { ...state, position: action.position, scroll: action.scroll };
+    }
+    case "scroll-reset": {
+      return { ...state, scroll: null };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+const MouseProvider = ({ children }) => {
+  const { internal_eventEmitter: internalEventEmitter } = useStdinContext();
+  const { stdout } = useStdout();
+  const events = useRef(new EventEmitter());
+  const [state, dispatch] = useReducer(mouseReducer, initialMouseState);
+  const clickTimeoutRef = useRef(void 0);
+  const scrollTimeoutRef = useRef(void 0);
+  useEffect(() => {
+    const out = stdout.isTTY ? stdout : process.stdout;
+    out.write(ANSI_CODES.mouseButton.on + ANSI_CODES.mouseMotion.on + ANSI_CODES.mouseMotionOthers.on + ANSI_CODES.mouseSGR.on);
+    return () => {
+      out.write(ANSI_CODES.mouseSGR.off + ANSI_CODES.mouseMotionOthers.off + ANSI_CODES.mouseMotion.off + ANSI_CODES.mouseButton.off);
+    };
+  }, [stdout]);
+  useEffect(() => {
+    const handleInput = (input) => {
+      const event = parseSgrMouse(input);
+      if (!event) {
+        return;
+      }
+      const pos = { x: event.x, y: event.y };
+      events.current.emit("position", pos);
+      switch (event.type) {
+        case "click": {
+          dispatch({ button: event.button, click: event.action, position: pos, type: "click" });
+          events.current.emit("click", pos, event.action, event.button);
+          clearTimeout(clickTimeoutRef.current);
+          clickTimeoutRef.current = setTimeout(() => {
+            dispatch({ type: "click-reset" });
+          }, 100);
+          break;
+        }
+        case "drag": {
+          const dragAction = event.action === "press" ? "dragging" : null;
+          dispatch({ button: event.button, drag: dragAction, position: pos, type: "drag" });
+          events.current.emit("drag", pos, dragAction, event.button);
+          break;
+        }
+        case "move": {
+          dispatch({ position: pos, type: "move" });
+          break;
+        }
+        case "scroll": {
+          dispatch({ position: pos, scroll: event.direction, type: "scroll" });
+          events.current.emit("scroll", pos, event.direction);
+          clearTimeout(scrollTimeoutRef.current);
+          scrollTimeoutRef.current = setTimeout(() => {
+            dispatch({ type: "scroll-reset" });
+          }, 100);
+          break;
+        }
+      }
+    };
+    internalEventEmitter.on("input", handleInput);
+    return () => {
+      internalEventEmitter.off("input", handleInput);
+      clearTimeout(clickTimeoutRef.current);
+      clearTimeout(scrollTimeoutRef.current);
+    };
+  }, [internalEventEmitter]);
+  const value = useMemo(() => {
+    return {
+      button: state.button,
+      click: state.click,
+      drag: state.drag,
+      events: events.current,
+      position: state.position,
+      scroll: state.scroll
+    };
+  }, [state]);
+  return jsx(MouseContext, { value, children });
+};
+
+export { MouseProvider as default };

package/dist/packem_shared/MultiSelect-ChoLUcDI.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useReducer, useState, useRef, useMemo, useCallback } from 'react';
+import useInput from './useInput-Cfp5zB2s.js';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const EMPTY_DEFAULT = [];
+const multiSelectReducer = (state, action) => {
+  switch (action.type) {
+    case "focus": {
+      return { ...state, focusedIndex: action.index };
+    }
+    case "focus-next": {
+      const nextIndex = state.focusedIndex + 1;
+      const needsScroll = nextIndex >= state.visibleFrom + action.limit;
+      return {
+        ...state,
+        focusedIndex: nextIndex,
+        visibleFrom: needsScroll ? state.visibleFrom + 1 : state.visibleFrom
+      };
+    }
+    case "focus-prev": {
+      const previousIndex = state.focusedIndex - 1;
+      const needsScroll = previousIndex < state.visibleFrom;
+      return {
+        ...state,
+        focusedIndex: previousIndex,
+        visibleFrom: needsScroll ? state.visibleFrom - 1 : state.visibleFrom
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+function MultiSelect({
+  accentColor = "blue",
+  defaultColor,
+  defaultValue = EMPTY_DEFAULT,
+  isDisabled = false,
+  isFocused = true,
+  limit: customLimit,
+  onChange,
+  onSubmit,
+  options
+}) {
+  const { rows: terminalRows } = useWindowSize();
+  const effectiveLimit = typeof customLimit === "number" ? customLimit : terminalRows;
+  const limit = Math.min(effectiveLimit, options.length);
+  const [state, dispatch] = useReducer(multiSelectReducer, {
+    focusedIndex: 0,
+    visibleFrom: 0
+  });
+  const [selectedValues, setSelectedValues] = useState(defaultValue);
+  const selectedValuesRef = useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const visibleOptions = useMemo(() => options.slice(state.visibleFrom, state.visibleFrom + limit), [options, state.visibleFrom, limit]);
+  const handleToggle = useCallback(() => {
+    const focusedValue = options[stateRef.current.focusedIndex]?.value;
+    if (!focusedValue) {
+      return;
+    }
+    setSelectedValues((previous) => {
+      const next = previous.includes(focusedValue) ? previous.filter((v) => v !== focusedValue) : [...previous, focusedValue];
+      onChangeRef.current?.(next);
+      return next;
+    });
+  }, [options]);
+  const handleToggleAll = useCallback(() => {
+    setSelectedValues((previous) => {
+      const next = previous.length === options.length ? [] : options.map((o) => o.value);
+      onChangeRef.current?.(next);
+      return next;
+    });
+  }, [options]);
+  useInput(
+    useCallback(
+      (input, key) => {
+        const { focusedIndex } = stateRef.current;
+        if ((key.downArrow || input === "j") && focusedIndex < options.length - 1) {
+          dispatch({ limit, type: "focus-next" });
+        }
+        if ((key.upArrow || input === "k") && focusedIndex > 0) {
+          dispatch({ limit, type: "focus-prev" });
+        }
+        if (input === " ") {
+          handleToggle();
+        }
+        if (input === "a") {
+          handleToggleAll();
+        }
+        if (key.return) {
+          onSubmitRef.current?.(selectedValuesRef.current);
+        }
+      },
+      [options.length, limit, handleToggle, handleToggleAll]
+    ),
+    { isActive: !isDisabled && isFocused }
+  );
+  return jsx(Box, { flexDirection: "column", children: visibleOptions.map((option, visibleIndex) => {
+    const absoluteIndex = state.visibleFrom + visibleIndex;
+    const isFocusedOption = absoluteIndex === state.focusedIndex;
+    const isSelected = selectedValues.includes(option.value);
+    let labelColor = defaultColor;
+    if (isSelected) {
+      labelColor = "green";
+    } else if (isFocusedOption) {
+      labelColor = accentColor;
+    }
+    return jsxs(Box, { gap: 1, children: [
+      isFocusedOption ? jsx(Text, { color: accentColor, dimColor: !isFocused, children: "▸" }) : jsx(Text, { children: " " }),
+      jsxs(Text, { color: labelColor, dimColor: isDisabled, children: [
+        isSelected ? "◼" : "◻",
+        " ",
+        option.label
+      ] }),
+      isSelected ? jsx(Text, { color: "green", dimColor: !isFocused, children: "✓" }) : void 0
+    ] }, option.key ?? option.value);
+  }) });
+}
+
+export { MultiSelect as default };