tri-cli 0.0.2

package/dist/Treemap.js

@@ -0,0 +1,393 @@
+import React from 'react';
+import { Text, Box } from 'ink';
+import { hierarchy, treemap, treemapBinary } from 'd3-hierarchy';
+
+// One Hunter color scheme
+const oneHunter = {
+  bg: '#282c34',
+  bgAlt: '#21252b',
+  text: '#abb2bf',
+  textAlt: '#5c6370',
+  red: '#e06c75',
+  orange: '#d19a66',
+  yellow: '#e5c07b',
+  green: '#98c379',
+  cyan: '#56b6c2',
+  blue: '#61afef',
+  purple: '#c678dd',
+  magenta: '#c678dd'
+};
+
+// Expanded color palette for directories
+const dirColors = [oneHunter.blue, oneHunter.cyan, oneHunter.green, oneHunter.yellow, oneHunter.orange, oneHunter.red, oneHunter.purple, oneHunter.magenta, '#4a9eff', '#7ec699', '#e8b339', '#ff7eb6'];
+
+// Function to format bytes to human readable
+const formatBytes = bytes => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// Get color based on file extension
+const getFileColor = filename => {
+  const ext = filename.match(/\.[^.]+$/)?.[0]?.toLowerCase();
+  const colorMap = {
+    '.js': oneHunter.yellow,
+    '.jsx': oneHunter.yellow,
+    '.ts': oneHunter.blue,
+    '.tsx': oneHunter.blue,
+    '.py': oneHunter.green,
+    '.rb': oneHunter.red,
+    '.json': oneHunter.purple,
+    '.html': oneHunter.cyan,
+    '.css': oneHunter.cyan,
+    '.md': oneHunter.text,
+    '.txt': oneHunter.textAlt,
+    '.sh': oneHunter.green,
+    '.yml': oneHunter.purple,
+    '.yaml': oneHunter.purple,
+    '.xml': oneHunter.orange,
+    '.svg': oneHunter.cyan,
+    '.png': oneHunter.blue,
+    '.jpg': oneHunter.blue,
+    '.gif': oneHunter.blue,
+    '.pdf': oneHunter.red
+  };
+  return colorMap[ext] || oneHunter.text;
+};
+
+// Simple hash function for consistent color assignment
+const hashString = str => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+};
+
+// Assign colors to directory groups
+const assignGroupColors = root => {
+  const colorMap = new Map();
+  if (root.children) {
+    root.children.forEach(child => {
+      if (!child.data.isFile) {
+        const colorIndex = hashString(child.data.name) % dirColors.length;
+        colorMap.set(child.data.name, dirColors[colorIndex]);
+      }
+    });
+  }
+  root.descendants().forEach(node => {
+    if (!node.data.isFile && node !== root) {
+      let topAncestor = node;
+      while (topAncestor.parent && topAncestor.parent !== root) {
+        topAncestor = topAncestor.parent;
+      }
+      if (colorMap.has(topAncestor.data.name)) {
+        node.groupColor = colorMap.get(topAncestor.data.name);
+      } else {
+        const colorIndex = hashString(node.data.name) % dirColors.length;
+        node.groupColor = dirColors[colorIndex];
+      }
+    }
+  });
+  return colorMap;
+};
+export const TreeMapView = ({
+  selectedNode,
+  stdout
+}) => {
+  if (!selectedNode || !selectedNode.data) {
+    return /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "column"
+    }, /*#__PURE__*/React.createElement(Text, {
+      bold: true,
+      color: oneHunter.red
+    }, "Error: Invalid node selected"), /*#__PURE__*/React.createElement(Text, {
+      dimColor: true,
+      color: oneHunter.textAlt
+    }, "Press 't' to go back to tree view"));
+  }
+  const width = Math.min(stdout?.columns || 80, 120) - 4;
+  const height = Math.min(stdout?.rows || 24, 40) - 8;
+
+  // If it's a file, show just that file as a big rectangle
+  if (selectedNode.data.isFile) {
+    const color = getFileColor(selectedNode.data.name);
+    const name = selectedNode.data.name;
+    const sizeStr = selectedNode.data.size ? formatBytes(selectedNode.data.size) : '';
+    const grid = Array(height).fill(null).map(() => Array(width).fill(null).map(() => ({
+      char: ' ',
+      color
+    })));
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const isTop = y === 0;
+        const isBottom = y === height - 1;
+        const isLeft = x === 0;
+        const isRight = x === width - 1;
+        let char = ' ';
+        if (isTop && isLeft) char = '┌';else if (isTop && isRight) char = '┐';else if (isBottom && isLeft) char = '└';else if (isBottom && isRight) char = '┘';else if (isTop || isBottom) char = '─';else if (isLeft || isRight) char = '│';else char = ' ';
+        grid[y][x] = {
+          char,
+          color
+        };
+      }
+    }
+    const midY = Math.floor(height / 2);
+    const nameX = Math.floor((width - name.length) / 2);
+    if (midY >= 2 && midY < height - 2) {
+      for (let i = 0; i < name.length && nameX + i < width - 2; i++) {
+        if (nameX + i > 0) {
+          grid[midY][nameX + i] = {
+            char: name[i],
+            color
+          };
+        }
+      }
+      if (sizeStr && midY + 2 < height - 2) {
+        const sizeX = Math.floor((width - sizeStr.length) / 2);
+        for (let i = 0; i < sizeStr.length && sizeX + i < width - 2; i++) {
+          if (sizeX + i > 0) {
+            grid[midY + 2][sizeX + i] = {
+              char: sizeStr[i],
+              color
+            };
+          }
+        }
+      }
+    }
+    const lines = grid.map((row, y) => {
+      const segments = [];
+      let currentColor = null;
+      let currentText = '';
+      row.forEach(cell => {
+        if (cell.color === currentColor) {
+          currentText += cell.char;
+        } else {
+          if (currentText) {
+            segments.push(/*#__PURE__*/React.createElement(Text, {
+              key: segments.length,
+              color: currentColor
+            }, currentText));
+          }
+          currentColor = cell.color;
+          currentText = cell.char;
+        }
+      });
+      if (currentText) {
+        segments.push(/*#__PURE__*/React.createElement(Text, {
+          key: segments.length,
+          color: currentColor
+        }, currentText));
+      }
+      return /*#__PURE__*/React.createElement(Box, {
+        key: y
+      }, segments);
+    });
+    return /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "column"
+    }, /*#__PURE__*/React.createElement(Text, {
+      bold: true,
+      color: oneHunter.cyan
+    }, "TreeMap View: ", name, " (File)"), /*#__PURE__*/React.createElement(Text, {
+      dimColor: true,
+      color: oneHunter.textAlt
+    }, "Press 't' to toggle back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+      borderStyle: "single",
+      borderColor: oneHunter.textAlt,
+      flexDirection: "column",
+      marginTop: 1
+    }, lines), /*#__PURE__*/React.createElement(Text, {
+      dimColor: true,
+      color: oneHunter.textAlt,
+      marginTop: 1
+    }, "File: ", name, " | Size: ", sizeStr || 'Unknown'));
+  }
+
+  // It's a directory - show treemap of its children
+  if (!selectedNode.children || selectedNode.children.length === 0) {
+    return /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "column"
+    }, /*#__PURE__*/React.createElement(Text, {
+      bold: true,
+      color: oneHunter.cyan
+    }, "TreeMap View: ", selectedNode.data.name, " (Empty Directory)"), /*#__PURE__*/React.createElement(Text, {
+      dimColor: true,
+      color: oneHunter.textAlt
+    }, "Press 't' to toggle back to tree view | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+      borderStyle: "single",
+      borderColor: oneHunter.textAlt,
+      marginTop: 1,
+      padding: 1
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: oneHunter.textAlt
+    }, "This directory is empty or collapsed.")));
+  }
+  const root = hierarchy(selectedNode.data).sum(d => d.value || 0).sort((a, b) => (b.value || 0) - (a.value || 0));
+  assignGroupColors(root);
+
+  // Apply treemap layout
+  treemap().tile(treemapBinary).size([width, height]).paddingOuter(0.5).paddingTop(0.5).paddingInner(0.5).round(true)(root);
+
+  // Only show direct children (first level)
+  const firstLevelNodes = root.children || [];
+  const grid = Array(height).fill(null).map(() => Array(width).fill(null).map(() => ({
+    char: ' ',
+    color: oneHunter.textAlt
+  })));
+
+  // Draw each first-level child
+  firstLevelNodes.forEach(node => {
+    const x0 = Math.floor(node.x0);
+    const y0 = Math.floor(node.y0);
+    const x1 = Math.ceil(node.x1);
+    const y1 = Math.ceil(node.y1);
+    const isFile = node.data.isFile;
+    const boxWidth = x1 - x0;
+    const boxHeight = y1 - y0;
+    if (boxWidth < 1 || boxHeight < 1) return;
+
+    // Color based on type
+    const color = isFile ? getFileColor(node.data.name) : node.groupColor || oneHunter.blue;
+
+    // Draw border
+    for (let y = y0; y < y1 && y < height; y++) {
+      for (let x = x0; x < x1 && x < width; x++) {
+        const isTop = y === y0;
+        const isBottom = y === y1 - 1;
+        const isLeft = x === x0;
+        const isRight = x === x1 - 1;
+
+        // Only draw borders
+        if (isTop || isBottom || isLeft || isRight) {
+          let char = ' ';
+          if (isTop && isLeft) char = '┌';else if (isTop && isRight) char = '┐';else if (isBottom && isLeft) char = '└';else if (isBottom && isRight) char = '┘';else if (isTop || isBottom) char = '─';else if (isLeft || isRight) char = '│';
+          grid[y][x] = {
+            char,
+            color
+          };
+        }
+      }
+    }
+
+    // Draw label if there's room
+    const name = node.data.name;
+    const sizeStr = node.value ? ` ${formatBytes(node.value)}` : '';
+    if (boxWidth >= 8 && boxHeight >= 2) {
+      const labelY = y0 + 1;
+      const labelX = x0 + 1;
+      const maxLength = boxWidth - 2;
+
+      // Combine name and size
+      let label = name + sizeStr;
+      if (label.length > maxLength) {
+        // Try just name
+        if (name.length <= maxLength) {
+          label = name;
+        } else {
+          label = name.slice(0, maxLength - 1) + '…';
+        }
+      }
+      if (labelY >= 0 && labelY < height && labelY < y1) {
+        for (let i = 0; i < label.length && labelX + i < x1 - 1 && labelX + i < width; i++) {
+          grid[labelY][labelX + i] = {
+            char: label[i],
+            color
+          };
+        }
+      }
+    } else if (boxWidth >= 4 && boxHeight >= 2) {
+      // Show abbreviated label
+      const labelY = y0 + 1;
+      const labelX = x0 + 1;
+      const maxLength = boxWidth - 2;
+      let label;
+      if (isFile) {
+        // Show extension for files
+        const ext = name.match(/\.([^.]{1,3})$/)?.[1];
+        label = ext || name.slice(0, maxLength);
+      } else {
+        // Show first few chars for directories
+        label = name.slice(0, maxLength);
+      }
+      if (labelY >= 0 && labelY < height && label) {
+        for (let i = 0; i < label.length && labelX + i < x1 - 1 && labelX + i < width; i++) {
+          grid[labelY][labelX + i] = {
+            char: label[i],
+            color
+          };
+        }
+      }
+    } else if (boxWidth >= 2 && boxHeight >= 2) {
+      // Just first character
+      const centerY = Math.floor((y0 + y1) / 2);
+      const centerX = Math.floor((x0 + x1) / 2);
+      if (centerY >= 0 && centerY < height && centerX >= 0 && centerX < width) {
+        grid[centerY][centerX] = {
+          char: name[0] || '•',
+          color
+        };
+      }
+    } else if (boxWidth === 1 && boxHeight === 1) {
+      // Tiny dot
+      if (y0 >= 0 && y0 < height && x0 >= 0 && x0 < width) {
+        grid[y0][x0] = {
+          char: '·',
+          color
+        };
+      }
+    }
+  });
+
+  // Convert grid to Ink components
+  const lines = grid.map((row, y) => {
+    const segments = [];
+    let currentColor = null;
+    let currentText = '';
+    row.forEach(cell => {
+      if (cell.color === currentColor) {
+        currentText += cell.char;
+      } else {
+        if (currentText) {
+          segments.push(/*#__PURE__*/React.createElement(Text, {
+            key: segments.length,
+            color: currentColor
+          }, currentText));
+        }
+        currentColor = cell.color;
+        currentText = cell.char;
+      }
+    });
+    if (currentText) {
+      segments.push(/*#__PURE__*/React.createElement(Text, {
+        key: segments.length,
+        color: currentColor
+      }, currentText));
+    }
+    return /*#__PURE__*/React.createElement(Box, {
+      key: y
+    }, segments);
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "column"
+  }, /*#__PURE__*/React.createElement(Text, {
+    bold: true,
+    color: oneHunter.cyan
+  }, "TreeMap View: ", selectedNode.data.name), /*#__PURE__*/React.createElement(Text, {
+    dimColor: true,
+    color: oneHunter.textAlt
+  }, "Press 't' to toggle back to tree view | \u2191/\u2193: Navigate in tree | Ctrl+C: Exit"), /*#__PURE__*/React.createElement(Box, {
+    borderStyle: "single",
+    borderColor: oneHunter.textAlt,
+    flexDirection: "column",
+    marginTop: 1
+  }, lines), /*#__PURE__*/React.createElement(Text, {
+    dimColor: true,
+    color: oneHunter.textAlt,
+    marginTop: 1
+  }, "Showing ", firstLevelNodes.length, " items | Total: ", formatBytes(root.value || 0)));
+};

package/dist/app.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from 'ink';
+export default function App({
+  name = 'Stranger'
+}) {
+  return /*#__PURE__*/React.createElement(Text, null, "Hello, ", /*#__PURE__*/React.createElement(Text, {
+    color: "green"
+  }, name));
+}

package/dist/cli.js

@@ -0,0 +1,380 @@
+#!/usr/bin/env node
+import React, { useState, useEffect, useMemo } from 'react';
+import { render, Text, Box, useInput, useStdout } from 'ink';
+import { hierarchy } from 'd3-hierarchy';
+import fs from 'fs';
+import path from 'path';
+import { TreeMapView } from './Treemap.js';
+const oneHunter = {
+  bg: '#282c34',
+  bgAlt: '#21252b',
+  text: '#abb2bf',
+  textAlt: 'white',
+  red: '#e06c75',
+  orange: 'rgb(218, 112, 44)',
+  yellow: '#e5c07b',
+  green: '#98c379',
+  cyan: 'rgb(58, 169, 159)',
+  blue: 'rgb(67, 133, 190)',
+  purple: 'rgb(139, 126, 200)',
+  magenta: 'rgb(206, 93, 151)'
+};
+
+// Function to format bytes to human readable
+const formatBytes = bytes => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// Function to get directory size recursively
+const getDirSize = dirPath => {
+  let size = 0;
+  try {
+    const items = fs.readdirSync(dirPath);
+    for (const item of items) {
+      const itemPath = path.join(dirPath, item);
+      try {
+        const stats = fs.statSync(itemPath);
+        if (stats.isFile()) {
+          size += stats.size;
+        } else if (stats.isDirectory()) {
+          size += getDirSize(itemPath);
+        }
+      } catch {}
+    }
+  } catch {}
+  return size;
+};
+
+// Function to read directory structure (unbounded depth)
+const readDirTree = dirPath => {
+  try {
+    const stats = fs.statSync(dirPath);
+    const name = path.basename(dirPath) || dirPath;
+    if (!stats.isDirectory()) {
+      const size = stats.size;
+      return {
+        name,
+        path: dirPath,
+        isFile: true,
+        size,
+        value: size > 0 ? size : 100
+      };
+    }
+    const children = fs.readdirSync(dirPath).filter(file => !file.startsWith('.')).map(file => readDirTree(path.join(dirPath, file))).filter(Boolean);
+    return {
+      name,
+      path: dirPath,
+      isFile: false,
+      size: getDirSize(dirPath),
+      children: children.length > 0 ? children : undefined
+    };
+  } catch {
+    return null;
+  }
+};
+
+// Get color based on file extension
+const getFileColor = filename => {
+  const ext = path.extname(filename).toLowerCase();
+  const colorMap = {
+    '.js': oneHunter.yellow,
+    '.jsx': oneHunter.yellow,
+    '.ts': oneHunter.blue,
+    '.tsx': oneHunter.blue,
+    '.py': oneHunter.green,
+    '.rb': oneHunter.red,
+    '.json': oneHunter.purple,
+    '.html': oneHunter.cyan,
+    '.css': oneHunter.cyan,
+    '.md': oneHunter.text,
+    '.txt': oneHunter.textAlt,
+    '.sh': oneHunter.green,
+    '.yml': oneHunter.purple,
+    '.yaml': oneHunter.purple,
+    '.xml': oneHunter.orange,
+    '.svg': oneHunter.cyan,
+    '.png': oneHunter.blue,
+    '.jpg': oneHunter.blue,
+    '.gif': oneHunter.blue,
+    '.pdf': oneHunter.red
+  };
+  return colorMap[ext] || oneHunter.text;
+};
+
+// Generate shortcut label
+const generateShortcut = (index, isFile, parentShortcut = '') => {
+  const letters = 'abcdefghijklmnoprsuvwxyz'; // omitting q, t
+  const base = letters.length;
+  if (isFile) return `${parentShortcut}${index + 1}`;
+  let label = '';
+  let num = index;
+  while (num >= 0) {
+    label = letters[num % base] + label;
+    num = Math.floor(num / base) - 1;
+  }
+  return parentShortcut + label;
+};
+
+// TreeRow
+const TreeRow = /*#__PURE__*/React.memo(({
+  node,
+  isSelected,
+  collapsed,
+  shortcutInput
+}) => {
+  const isCollapsed = collapsed.has(node.data.path);
+  const hasChildren = node.children && node.children.length > 0;
+  let prefix = '';
+  let current = node;
+  const segments = [];
+  while (current.parent) {
+    const parent = current.parent;
+    const siblings = parent.children || [];
+    const isLastChild = siblings[siblings.length - 1] === current;
+    segments.unshift(isLastChild ? '  ' : '│ ');
+    current = parent;
+  }
+  if (node.parent) {
+    const siblings = node.parent.children || [];
+    const isLastChild = siblings[siblings.length - 1] === node;
+    prefix = segments.join('').slice(0, -2) + (isLastChild ? '└─' : '├─');
+  }
+  let icon = hasChildren ? isCollapsed ? '▶ ' : '▼ ' : '  ';
+  const fileColor = node.data.isFile ? getFileColor(node.data.name) : oneHunter.magenta;
+  const renderShortcut = () => {
+    if (!shortcutInput) return /*#__PURE__*/React.createElement(Text, {
+      color: oneHunter.textAlt,
+      dimColor: true
+    }, ' ', "[", node.shortcut, "]");
+    if (node.shortcut.startsWith(shortcutInput)) {
+      const matched = node.shortcut.slice(0, shortcutInput.length);
+      const rest = node.shortcut.slice(shortcutInput.length);
+      return /*#__PURE__*/React.createElement(Text, {
+        color: oneHunter.textAlt
+      }, ' [', /*#__PURE__*/React.createElement(Text, {
+        underline: true,
+        color: oneHunter.yellow
+      }, matched), rest, ']');
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      color: oneHunter.textAlt,
+      dimColor: true
+    }, ' ', "[", node.shortcut, "]");
+  };
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt
+  }, prefix), /*#__PURE__*/React.createElement(Text, {
+    color: hasChildren ? oneHunter.cyan : oneHunter.textAlt
+  }, icon), /*#__PURE__*/React.createElement(Text, {
+    bold: isSelected,
+    color: isSelected ? oneHunter.bg : fileColor,
+    backgroundColor: isSelected ? oneHunter.green : undefined
+  }, node.data.name), hasChildren && !isCollapsed && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt
+  }, " (", node.children.length, ")"), node.data.size > 0 && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.green
+  }, " ", formatBytes(node.data.size)), renderShortcut()));
+}, (p, n) => p.isSelected === n.isSelected && p.collapsed === n.collapsed && p.shortcutInput === n.shortcutInput);
+const TreeVisualization = ({
+  dirPath = '.',
+  maxLevel = 1
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [collapsed, setCollapsed] = useState(new Set());
+  const [shortcutInput, setShortcutInput] = useState('');
+  const [showTreeMap, setShowTreeMap] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+  const {
+    stdout
+  } = useStdout();
+  const terminalHeight = stdout?.rows || 24;
+  const viewportHeight = Math.max(5, terminalHeight - 7);
+  const treeData = useMemo(() => readDirTree(dirPath), [dirPath]);
+  if (!treeData) return /*#__PURE__*/React.createElement(Text, {
+    color: "red"
+  }, "Error: Could not read directory");
+  const root = useMemo(() => hierarchy(treeData), [treeData]);
+
+  // --- Initial collapse based on -L ---
+  useEffect(() => {
+    const newCollapsed = new Set();
+    const applyLevel = (node, level = 0) => {
+      if (node.children) {
+        if (level >= maxLevel) newCollapsed.add(node.data.path);
+        node.children.forEach(child => applyLevel(child, level + 1));
+      }
+    };
+    applyLevel(root);
+    setCollapsed(newCollapsed);
+    setInitialized(true);
+  }, [maxLevel, root]);
+
+  // Assign shortcuts
+  const rootWithShortcuts = useMemo(() => {
+    const assignShortcuts = (node, parentShortcut = '', siblingIndex = 0) => {
+      const isFile = node.data.isFile;
+      node.shortcut = generateShortcut(siblingIndex, isFile, parentShortcut);
+      if (node.children) {
+        node.children.forEach((child, i) => assignShortcuts(child, node.shortcut, i));
+      }
+    };
+    const cloned = root.copy();
+    assignShortcuts(cloned);
+    return cloned;
+  }, [root]);
+
+  // Flatten visible nodes
+  const visibleNodes = useMemo(() => {
+    const nodes = [];
+    const traverse = node => {
+      nodes.push(node);
+      if (node.children && !collapsed.has(node.data.path)) {
+        node.children.forEach(traverse);
+      }
+    };
+    traverse(rootWithShortcuts);
+    return nodes;
+  }, [rootWithShortcuts, collapsed]);
+  const shortcutMap = useMemo(() => {
+    const map = new Map();
+    visibleNodes.forEach((node, index) => map.set(node.shortcut, index));
+    return map;
+  }, [visibleNodes]);
+  useInput((input, key) => {
+    if (input === 'q') process.exit(0);
+    if (input === 't') {
+      setShowTreeMap(p => !p);
+      return;
+    }
+    if (showTreeMap) return;
+    if (key.upArrow) {
+      setSelectedIndex(p => Math.max(0, p - 1));
+      setShortcutInput('');
+      return;
+    } else if (key.downArrow) {
+      setSelectedIndex(p => Math.min(visibleNodes.length - 1, p + 1));
+      setShortcutInput('');
+      return;
+    }
+
+    // ✅ ENTER behavior
+    if (key.return) {
+      if (shortcutInput && shortcutMap.has(shortcutInput)) {
+        const shortcutIndex = shortcutMap.get(shortcutInput);
+        const shortcutNode = visibleNodes[shortcutIndex];
+
+        // Jump and toggle collapse (in one go)
+        setSelectedIndex(shortcutIndex);
+        if (shortcutNode.children) {
+          setCollapsed(prev => {
+            const next = new Set(prev);
+            if (next.has(shortcutNode.data.path)) next.delete(shortcutNode.data.path);else next.add(shortcutNode.data.path);
+            return next;
+          });
+        }
+        setShortcutInput('');
+        return;
+      }
+
+      // Otherwise toggle current node
+      const node = visibleNodes[selectedIndex];
+      if (node.children) {
+        setCollapsed(prev => {
+          const next = new Set(prev);
+          if (next.has(node.data.path)) next.delete(node.data.path);else next.add(node.data.path);
+          return next;
+        });
+      }
+      setShortcutInput('');
+      return;
+    }
+    if (key.escape) {
+      setShortcutInput('');
+      return;
+    }
+
+    // Typing a shortcut
+    if (input && /^[a-z0-9]$/.test(input)) {
+      const newInput = shortcutInput + input;
+      setShortcutInput(newInput);
+
+      // Move highlight immediately
+      if (shortcutMap.has(newInput)) {
+        setSelectedIndex(shortcutMap.get(newInput));
+      }
+    }
+  });
+  if (showTreeMap) {
+    const node = visibleNodes[selectedIndex];
+    if (!node) return /*#__PURE__*/React.createElement(Text, {
+      color: oneHunter.red
+    }, "Error: No node selected");
+    return /*#__PURE__*/React.createElement(TreeMapView, {
+      selectedNode: node,
+      stdout: stdout
+    });
+  }
+
+  // --- Viewport logic ---
+  const getViewportWindow = () => {
+    let start = Math.max(0, selectedIndex - Math.floor(viewportHeight / 2));
+    let end = start + viewportHeight;
+    if (end > visibleNodes.length) {
+      end = visibleNodes.length;
+      start = Math.max(0, end - viewportHeight);
+    }
+    return {
+      start,
+      end
+    };
+  };
+  const {
+    start,
+    end
+  } = getViewportWindow();
+  const viewportNodes = visibleNodes.slice(start, end);
+  if (!initialized) return null;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: "column"
+  }, /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.textAlt,
+    dimColor: true
+  }, "\u2191/\u2193: Navigate | Enter: Toggle | t: TreeMap | Esc: Clear | q: Quit"), start > 0 && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, "\u22EE (", start, " more above)"), viewportNodes.map((node, i) => /*#__PURE__*/React.createElement(TreeRow, {
+    key: start + i,
+    node: node,
+    isSelected: start + i === selectedIndex,
+    collapsed: collapsed,
+    shortcutInput: shortcutInput
+  })), end < visibleNodes.length && /*#__PURE__*/React.createElement(Text, {
+    color: oneHunter.yellow
+  }, "\u22EE (", visibleNodes.length - end, " more below)"));
+};
+
+// --- CLI args ---
+const args = process.argv.slice(2);
+
+// Dir flag
+const dirIndex = args.indexOf('--dir');
+let dirPath;
+const firstNonFlagArg = args.find(arg => !arg.startsWith('-'));
+if (dirIndex !== -1 && args[dirIndex + 1]) {
+  dirPath = args[dirIndex + 1];
+} else if (firstNonFlagArg) {
+  dirPath = firstNonFlagArg;
+} else {
+  dirPath = '.';
+}
+
+// Handle -L flag
+const levelIndex = args.indexOf('-L');
+const maxLevel = levelIndex !== -1 && args[levelIndex + 1] ? parseInt(args[levelIndex + 1], 10) : 1;
+render(/*#__PURE__*/React.createElement(TreeVisualization, {
+  dirPath: dirPath,
+  maxLevel: maxLevel
+}));

package/package.json

@@ -0,0 +1,77 @@
+{
+	"name": "tri-cli",
+	"version": "0.0.2",
+	"description": "Interactive CLI directory tree visualizer with treemap view",
+	"author": "Jared Wilber",
+	"license": "MIT",
+	"keywords": [
+		"cli",
+		"tree",
+		"directory",
+		"treemap",
+		"visualization",
+		"interactive"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/jwilber/tri-cli.git"
+	},
+	"bin": {
+		"tri": "dist/cli.js"
+	},
+	"type": "module",
+	"engines": {
+		"node": ">=16"
+	},
+	"scripts": {
+		"build": "babel --out-dir=dist source",
+		"postbuild": "chmod +x dist/cli.js",
+		"dev": "babel --out-dir=dist --watch source",
+		"test": "prettier --check . && xo && ava",
+		"test:local": "npm run build && tri --dir . -L 2"
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"d3-hierarchy": "^3.1.2",
+		"ink": "^4.1.0",
+		"meow": "^11.0.0",
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.21.0",
+		"@babel/preset-react": "^7.28.5",
+		"@vdemedes/prettier-config": "^2.0.1",
+		"ava": "^5.2.0",
+		"chalk": "^5.2.0",
+		"eslint-config-xo-react": "^0.27.0",
+		"eslint-plugin-react": "^7.32.2",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"import-jsx": "^5.0.0",
+		"ink-testing-library": "^3.0.0",
+		"prettier": "^2.8.7",
+		"xo": "^0.53.1"
+	},
+	"ava": {
+		"environmentVariables": {
+			"NODE_NO_WARNINGS": "1"
+		},
+		"nodeArguments": [
+			"--loader=import-jsx"
+		]
+	},
+	"xo": {
+		"extends": "xo-react",
+		"prettier": true,
+		"rules": {
+			"react/prop-types": "off"
+		}
+	},
+	"prettier": "@vdemedes/prettier-config",
+	"babel": {
+		"presets": [
+			"@babel/preset-react"
+		]
+	}
+}

package/readme.md

@@ -0,0 +1,25 @@
+# tri
+
+> This readme is automatically generated by [create-ink-app](https://github.com/vadimdemedes/create-ink-app)
+
+## Install
+
+```bash
+$ npm install --global tri
+```
+
+## CLI
+
+```
+$ tri --help
+
+  Usage
+    $ tri
+
+  Options
+    --name  Your name
+
+  Examples
+    $ tri --name=Jane
+    Hello, Jane
+```