@visulima/tui 0.0.1 → 1.0.0-alpha.2

package/dist/packem_shared/Textarea-Dj06R6Zd.js

@@ -0,0 +1,272 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import useClipboard from './useClipboard-B_9-adw1.js';
+import useInput from './useInput-Cfp5zB2s.js';
+import usePaste from './usePaste-Ct8J4AGR.js';
+import useTextBuffer from './useTextBuffer-C8fEe9Ly.js';
+import { i as isInsertableInput } from './input-utils-ViAEXa0Z.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const getOrderedSelection = (cursor, anchor) => {
+  if (anchor.line < cursor.line || anchor.line === cursor.line && anchor.col < cursor.col) {
+    return { endCol: cursor.col, endLine: cursor.line, startCol: anchor.col, startLine: anchor.line };
+  }
+  return { endCol: anchor.col, endLine: anchor.line, startCol: cursor.col, startLine: cursor.line };
+};
+function Textarea({
+  defaultValue = "",
+  isDisabled = false,
+  isFocused = true,
+  maxRows,
+  onChange,
+  onSubmit,
+  placeholder,
+  rows = 5,
+  showLineNumbers = false,
+  tabSize = 2
+}) {
+  const buffer = useTextBuffer(defaultValue);
+  const bufferRef = useRef(buffer);
+  bufferRef.current = buffer;
+  const { copy } = useClipboard();
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const previousValueRef = useRef(defaultValue);
+  useEffect(() => {
+    if (buffer.value !== previousValueRef.current) {
+      previousValueRef.current = buffer.value;
+      onChangeRef.current?.(buffer.value);
+    }
+  }, [buffer.value]);
+  const visibleRows = useMemo(() => {
+    if (maxRows) {
+      return Math.min(Math.max(rows, buffer.lines.length), maxRows);
+    }
+    return rows;
+  }, [rows, maxRows, buffer.lines.length]);
+  useEffect(() => {
+    setScrollOffset((offset) => {
+      if (buffer.cursor.line < offset) {
+        return buffer.cursor.line;
+      }
+      if (buffer.cursor.line >= offset + visibleRows) {
+        return buffer.cursor.line - visibleRows + 1;
+      }
+      return offset;
+    });
+  }, [buffer.cursor.line, visibleRows]);
+  const inputHandler = useCallback(
+    (input, key) => {
+      const b = bufferRef.current;
+      if (key.return && (key.meta || key.ctrl)) {
+        onSubmitRef.current?.(b.value);
+        return;
+      }
+      if (key.return) {
+        b.newline();
+        return;
+      }
+      if (key.escape) {
+        b.clearSelection();
+        return;
+      }
+      if (key.tab) {
+        b.insert(" ".repeat(tabSize));
+        return;
+      }
+      if (key.ctrl && input === "z") {
+        b.undo();
+        return;
+      }
+      if (key.ctrl && (input === "y" || key.shift && input === "Z")) {
+        b.redo();
+        return;
+      }
+      if (key.ctrl && input === "c" && b.hasSelection()) {
+        copy(b.getSelectedText());
+        return;
+      }
+      if (key.ctrl && (input === "A" || input === "a" && key.shift)) {
+        b.selectAll();
+        return;
+      }
+      if (key.upArrow) {
+        b.moveCursor("up", key.shift);
+        return;
+      }
+      if (key.downArrow) {
+        b.moveCursor("down", key.shift);
+        return;
+      }
+      if (key.leftArrow) {
+        b.moveCursor("left", key.shift);
+        return;
+      }
+      if (key.rightArrow) {
+        b.moveCursor("right", key.shift);
+        return;
+      }
+      if (key.home) {
+        if (key.ctrl) {
+          b.moveToStart(key.shift);
+        } else {
+          b.moveToLineStart(key.shift);
+        }
+        return;
+      }
+      if (key.end) {
+        if (key.ctrl) {
+          b.moveToEnd(key.shift);
+        } else {
+          b.moveToLineEnd(key.shift);
+        }
+        return;
+      }
+      if (key.ctrl && input === "a") {
+        b.moveToLineStart(key.shift);
+        return;
+      }
+      if (key.ctrl && input === "e") {
+        b.moveToLineEnd(key.shift);
+        return;
+      }
+      if (key.backspace) {
+        b.deleteBack();
+        return;
+      }
+      if (key.delete) {
+        b.deleteForward();
+        return;
+      }
+      if (key.ctrl && input === "u") {
+        b.deleteToLineStart();
+        return;
+      }
+      if (key.ctrl && input === "k") {
+        b.deleteToLineEnd();
+        return;
+      }
+      if (key.ctrl && input === "w") {
+        b.deleteWord();
+        return;
+      }
+      if (isInsertableInput(input, key)) {
+        if (b.hasSelection()) {
+          b.replaceSelection(input);
+        } else {
+          b.insert(input);
+        }
+      }
+    },
+    [copy, tabSize]
+  );
+  useInput(inputHandler, { isActive: isFocused && !isDisabled });
+  const pasteHandler = useCallback((text) => {
+    const b = bufferRef.current;
+    if (b.hasSelection()) {
+      b.replaceSelection(text);
+    } else {
+      b.insert(text);
+    }
+  }, []);
+  usePaste(pasteHandler, { isActive: isFocused && !isDisabled });
+  const visibleLines = buffer.lines.slice(scrollOffset, scrollOffset + visibleRows);
+  const lineNumberWidth = showLineNumbers ? String(buffer.lines.length).length + 1 : 0;
+  const sel = buffer.anchor ? getOrderedSelection(buffer.cursor, buffer.anchor) : null;
+  if (isDisabled) {
+    return jsx(Box, { flexDirection: "column", children: visibleLines.map((line, index) => {
+      const lineNumber = scrollOffset + index;
+      return jsxs(Box, { children: [
+        showLineNumbers ? jsxs(Text, { dimColor: true, children: [
+          String(lineNumber + 1).padStart(lineNumberWidth),
+          " "
+        ] }) : void 0,
+        jsx(Text, { dimColor: true, children: line || (lineNumber === 0 && placeholder ? placeholder : "") })
+      ] }, lineNumber);
+    }) });
+  }
+  if (buffer.value.length === 0 && placeholder) {
+    const placeholderLines = placeholder.split("\n").slice(0, visibleRows);
+    return jsx(Box, { flexDirection: "column", children: placeholderLines.map((pLine, index) => jsxs(Box, { children: [
+      showLineNumbers ? jsxs(Text, { dimColor: true, children: [
+        String(index + 1).padStart(lineNumberWidth),
+        " "
+      ] }) : void 0,
+      index === 0 ? jsxs(Text, { children: [
+        jsx(Text, { dimColor: true, inverse: true, children: pLine[0] ?? " " }),
+        jsx(Text, { dimColor: true, children: pLine.slice(1) })
+      ] }) : jsx(Text, { dimColor: true, children: pLine })
+    ] }, index)) });
+  }
+  return jsx(Box, { flexDirection: "column", children: visibleLines.map((line, index) => {
+    const lineNumber = scrollOffset + index;
+    const isCursorLine = lineNumber === buffer.cursor.line;
+    return jsxs(Box, { children: [
+      showLineNumbers ? jsxs(Text, { dimColor: !isCursorLine, children: [
+        String(lineNumber + 1).padStart(lineNumberWidth),
+        " "
+      ] }) : void 0,
+      jsx(Text, { children: renderLine(line, lineNumber, buffer.cursor, sel) })
+    ] }, lineNumber);
+  }) });
+}
+function renderLine(line, lineNumber, cursor, sel) {
+  const isCursorLine = lineNumber === cursor.line;
+  const cursorCol = isCursorLine ? cursor.col : -1;
+  const lineSelected = sel && lineNumber >= sel.startLine && lineNumber <= sel.endLine;
+  if (!lineSelected && !isCursorLine) {
+    return jsx(Fragment, { children: line });
+  }
+  if (!lineSelected) {
+    const before = line.slice(0, cursorCol);
+    const at = line[cursorCol];
+    const after = line.slice(cursorCol + 1);
+    return jsxs(Fragment, { children: [
+      before,
+      jsx(Text, { inverse: true, children: at ?? " " }),
+      after
+    ] });
+  }
+  const selStart = lineNumber === sel.startLine ? sel.startCol : 0;
+  const selEnd = lineNumber === sel.endLine ? sel.endCol : line.length;
+  const beforeSel = line.slice(0, selStart);
+  const selected = line.slice(selStart, selEnd);
+  const afterSel = line.slice(selEnd);
+  if (isCursorLine && (cursorCol < selStart || cursorCol >= selEnd)) {
+    const parts = [];
+    let key = 0;
+    if (cursorCol < selStart) {
+      parts.push(jsx(Text, { children: line.slice(0, cursorCol) }, key++));
+      parts.push(
+        jsx(Text, { inverse: true, children: line[cursorCol] ?? " " }, key++)
+      );
+      parts.push(jsx(Text, { children: line.slice(cursorCol + 1, selStart) }, key++));
+      parts.push(
+        jsx(Text, { inverse: true, children: selected }, key++)
+      );
+      parts.push(jsx(Text, { children: afterSel }, key++));
+    } else {
+      parts.push(jsx(Text, { children: beforeSel }, key++));
+      parts.push(
+        jsx(Text, { inverse: true, children: selected }, key++)
+      );
+      parts.push(jsx(Text, { children: line.slice(selEnd, cursorCol) }, key++));
+      parts.push(
+        jsx(Text, { inverse: true, children: line[cursorCol] ?? " " }, key++)
+      );
+      parts.push(jsx(Text, { children: line.slice(cursorCol + 1) }, key++));
+    }
+    return jsx(Fragment, { children: parts });
+  }
+  return jsxs(Fragment, { children: [
+    beforeSel,
+    jsx(Text, { inverse: true, children: selected }),
+    afterSel
+  ] });
+}
+
+export { Textarea as default };

package/dist/packem_shared/Timer-wi9zuh4n.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useImperativeHandle } from 'react';
+import useTimer from './useTimer-CPQ7j827.js';
+import { f as formatDuration } from './format-time-BGmnDukX.js';
+import Text from './Text-DvAUdZcK.js';
+
+const Timer = forwardRef(function Timer2({ autoStart, bold, color, duration, format = formatDuration, interval, onTimeout }, ref) {
+  const timer = useTimer({ autoStart, duration, interval, onTimeout });
+  useImperativeHandle(
+    ref,
+    () => ({
+      reset: timer.reset,
+      start: timer.start,
+      stop: timer.stop,
+      toggle: timer.toggle
+    }),
+    [timer.reset, timer.start, timer.stop, timer.toggle]
+  );
+  return jsx(Text, { bold, color, children: format(timer.remaining) });
+});
+
+export { Timer as default };

package/dist/packem_shared/Transform-BHxY_dAM.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { a as accessibilityContext } from './AccessibilityContext-BLelHhNU.js';
+
+const TRANSFORM_STYLE = { flexDirection: "row", flexGrow: 0, flexShrink: 1 };
+function Transform({ accessibilityLabel, children, transform }) {
+  const { isScreenReaderEnabled } = useContext(accessibilityContext);
+  if (children === void 0 || children === null) {
+    return null;
+  }
+  return jsx("ink-text", { internal_transform: transform, style: TRANSFORM_STYLE, children: isScreenReaderEnabled && accessibilityLabel ? accessibilityLabel : children });
+}
+
+export { Transform as default };

package/dist/packem_shared/TreeNodeMap-CtJUvBnd.js

@@ -0,0 +1,155 @@
+class TreeNodeMap {
+  /** All node IDs in DFS order. */
+  orderedIds;
+  /** Root-level node IDs. */
+  rootIds;
+  /** Map from node ID to FlatNode. */
+  map;
+  constructor(data) {
+    this.map = /* @__PURE__ */ new Map();
+    this.orderedIds = [];
+    this.rootIds = [];
+    this.buildFromData(data);
+  }
+  /**
+   * Iterate over all entries.
+   */
+  entries() {
+    return this.map.entries();
+  }
+  /**
+   * Get a flat node by ID.
+   */
+  get(id) {
+    return this.map.get(id);
+  }
+  /**
+   * Total number of nodes in the tree.
+   */
+  get size() {
+    return this.map.size;
+  }
+  /**
+   * Given a set of expanded node IDs, return the ordered list of
+   * VISIBLE node IDs (i.e., a node is visible if all its ancestors
+   * are expanded).
+   *
+   * Uses iterative DFS, skipping collapsed subtrees.
+   */
+  getVisibleIds(expandedIds) {
+    const result = [];
+    const stack = [];
+    for (let index = this.rootIds.length - 1; index >= 0; index--) {
+      stack.push(this.rootIds[index]);
+    }
+    while (stack.length > 0) {
+      const id = stack.pop();
+      result.push(id);
+      const flatNode = this.map.get(id);
+      if (flatNode && expandedIds.has(id) && flatNode.childrenIds.length > 0) {
+        for (let index = flatNode.childrenIds.length - 1; index >= 0; index--) {
+          stack.push(flatNode.childrenIds[index]);
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   * Check if a node is a descendant of another node.
+   */
+  isDescendantOf(nodeId, ancestorId) {
+    let currentId = nodeId;
+    while (currentId !== void 0) {
+      const flat = this.map.get(currentId);
+      if (!flat) {
+        return false;
+      }
+      if (flat.parentId === ancestorId) {
+        return true;
+      }
+      currentId = flat.parentId;
+    }
+    return false;
+  }
+  /**
+   * Insert dynamically-loaded children under a parent node.
+   * Returns a new TreeNodeMap (immutable operation).
+   *
+   * Rebuilds the full tree from the current map state (not the original
+   * input data), so successive calls for different parents are safe.
+   */
+  withChildren(parentId, children) {
+    const parentFlat = this.map.get(parentId);
+    if (!parentFlat) {
+      return this;
+    }
+    const rebuildFromMap = (id) => {
+      const flat = this.map.get(id);
+      if (id === parentId) {
+        return { ...flat.node, children };
+      }
+      if (flat.childrenIds.length > 0) {
+        return { ...flat.node, children: flat.childrenIds.map((childId) => rebuildFromMap(childId)) };
+      }
+      return flat.node;
+    };
+    const rootData = this.rootIds.map((nodeId) => rebuildFromMap(nodeId));
+    return new TreeNodeMap(rootData);
+  }
+  buildFromData(data) {
+    const stack = [];
+    for (let index = data.length - 1; index >= 0; index--) {
+      stack.push({
+        depth: 0,
+        node: data[index],
+        parentId: void 0,
+        siblingIndex: index,
+        siblings: data
+      });
+    }
+    for (const node of data) {
+      this.rootIds.push(node.id);
+    }
+    let flatIndex = 0;
+    while (stack.length > 0) {
+      const entry = stack.pop();
+      const { depth, node, parentId, siblingIndex, siblings } = entry;
+      if (this.map.has(node.id)) {
+        throw new Error(`TreeView: Duplicate node id '${node.id}' found. All node ids must be unique.`);
+      }
+      const children = node.children ?? [];
+      const hasChildren = children.length > 0 || node.isParent === true;
+      const childrenIds = children.map((c) => c.id);
+      const previousSiblingId = siblingIndex > 0 ? siblings[siblingIndex - 1].id : void 0;
+      const nextSiblingId = siblingIndex < siblings.length - 1 ? siblings[siblingIndex + 1].id : void 0;
+      const flatNode = {
+        childrenIds,
+        depth,
+        flatIndex,
+        hasChildren,
+        nextSiblingId,
+        node,
+        parentId,
+        previousSiblingId,
+        siblingCount: siblings.length,
+        siblingIndex
+      };
+      this.map.set(node.id, flatNode);
+      this.orderedIds.push(node.id);
+      flatIndex++;
+      if (hasChildren) {
+        for (let index = children.length - 1; index >= 0; index--) {
+          stack.push({
+            depth: depth + 1,
+            node: children[index],
+            parentId: node.id,
+            siblingIndex: index,
+            siblings: children
+          });
+        }
+      }
+    }
+  }
+}
+
+export { TreeNodeMap };

package/dist/packem_shared/TreeView-C2062dtj.js

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import useIsScreenReaderEnabled from './useIsScreenReaderEnabled-CnGKCe0f.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+import { theme } from './treeViewTheme-BpSw9TMf.js';
+import { useTreeView } from './useTreeView-BT57P3Kx.js';
+import { useTreeViewState } from './useTreeViewState-BpS_KZ-K.js';
+
+const POINTER = "❯";
+const TRIANGLE_DOWN = "▾";
+const TRIANGLE_RIGHT = "▸";
+const CHECKBOX_ON = "☒";
+const CHECKBOX_OFF = "☐";
+const TICK = "✔";
+const LOADING = "⟳";
+function buildNodeAriaLabel(label, nodeState, siblingPosition, siblingCount) {
+  const { depth, hasChildren, isExpanded, isLoading, isSelected } = nodeState;
+  const parts = [label, `item ${siblingPosition} of ${siblingCount}`];
+  if (depth > 0) {
+    parts.push(`depth ${depth}`);
+  }
+  if (hasChildren) {
+    parts.push(isExpanded ? "expanded" : "collapsed");
+  }
+  if (isLoading) {
+    parts.push("loading");
+  }
+  if (isSelected) {
+    parts.push("selected");
+  }
+  return parts.join(", ");
+}
+function buildNodeAriaState(nodeState, selectionMode) {
+  const state = {};
+  if (nodeState.hasChildren) {
+    state.expanded = nodeState.isExpanded;
+  }
+  if (selectionMode !== "none") {
+    state.selected = nodeState.isSelected;
+  }
+  return Object.keys(state).length > 0 ? state : void 0;
+}
+function TreeViewNode({ isScreenReaderEnabled, node, nodeState, selectionMode, siblingCount, siblingPosition, styles }) {
+  const { depth, hasChildren, isExpanded, isFocused, isLoading, isSelected } = nodeState;
+  let expandChar = " ";
+  if (isLoading) {
+    expandChar = LOADING;
+  } else if (hasChildren) {
+    expandChar = isExpanded ? TRIANGLE_DOWN : TRIANGLE_RIGHT;
+  }
+  const ariaLabel = isScreenReaderEnabled ? buildNodeAriaLabel(node.label, nodeState, siblingPosition, siblingCount) : void 0;
+  return jsxs(Box, { ...styles.node({ isFocused }), "aria-role": "listitem", "aria-state": buildNodeAriaState(nodeState, selectionMode), children: [
+    ariaLabel && jsx(Text, { "aria-label": ariaLabel }),
+    isFocused && jsx(Text, { ...styles.focusIndicator(), "aria-hidden": true, children: POINTER }),
+    depth > 0 && jsx(Box, { ...styles.indent({ depth }), "aria-hidden": true }),
+    selectionMode === "multiple" && jsx(Text, { ...styles.selectedIndicator(), "aria-hidden": true, children: isSelected ? CHECKBOX_ON : CHECKBOX_OFF }),
+    jsx(Text, { ...isLoading ? styles.loadingIndicator() : styles.expandIndicator({ isExpanded }), "aria-hidden": true, children: expandChar }),
+    jsx(Text, { ...styles.label({ isFocused, isSelected }), children: node.label }),
+    selectionMode === "single" && isSelected && jsxs(Text, { ...styles.selectedIndicator(), "aria-hidden": true, children: [
+      " ",
+      TICK
+    ] })
+  ] });
+}
+
+function TreeView({
+  ariaLabel = "Tree view",
+  data,
+  defaultExpanded,
+  defaultSelected,
+  isDisabled = false,
+  loadChildren,
+  onExpandChange,
+  onFocusChange,
+  onLoadError,
+  onSelectChange,
+  renderNode,
+  selectionMode = "none",
+  visibleNodeCount
+}) {
+  const state = useTreeViewState({
+    data,
+    defaultExpanded,
+    defaultSelected,
+    onExpandChange,
+    onFocusChange,
+    onSelectChange,
+    selectionMode,
+    visibleNodeCount
+  });
+  useTreeView({
+    isDisabled,
+    loadChildren,
+    onLoadError,
+    selectionMode,
+    state
+  });
+  const { styles } = theme;
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  return (
+    // Ink's aria-role enum does not include "tree"/"treeitem"/"group",
+    // so we use "list"/"listitem" as the closest available semantic match.
+    jsxs(Box, { ...styles.container(), "aria-role": "list", children: [
+      isScreenReaderEnabled && jsx(Text, { "aria-label": ariaLabel }),
+      state.hasScrollUp && jsxs(Text, { "aria-label": `${state.viewportFromIndex} more items above`, dimColor: true, children: [
+        "  ",
+        "↑",
+        state.viewportFromIndex,
+        " ",
+        "more above"
+      ] }),
+      state.viewportNodes.map(({ node, state: nodeState }) => {
+        const flatNode = state.nodeMap.get(node.id);
+        const siblingPosition = flatNode ? flatNode.siblingIndex + 1 : 1;
+        const siblingCount = flatNode ? flatNode.siblingCount : 1;
+        if (renderNode) {
+          const nodeAriaLabel = isScreenReaderEnabled ? buildNodeAriaLabel(node.label, nodeState, siblingPosition, siblingCount) : void 0;
+          return jsxs(Box, { "aria-role": "listitem", "aria-state": buildNodeAriaState(nodeState, selectionMode), children: [
+            nodeAriaLabel && jsx(Text, { "aria-label": nodeAriaLabel }),
+            renderNode({ node, state: nodeState })
+          ] }, node.id);
+        }
+        return jsx(
+          TreeViewNode,
+          {
+            isScreenReaderEnabled,
+            node,
+            nodeState,
+            selectionMode,
+            siblingCount,
+            siblingPosition,
+            styles
+          },
+          node.id
+        );
+      }),
+      state.hasScrollDown && jsxs(Text, { "aria-label": `${state.visibleCount - state.viewportToIndex} more items below`, dimColor: true, children: [
+        "  ",
+        "↓",
+        state.visibleCount - state.viewportToIndex,
+        " ",
+        "more below"
+      ] })
+    ] })
+  );
+}
+
+export { TreeView };