@visulima/tui 0.0.1 → 1.0.0-alpha.1

package/dist/packem_shared/DiffView-hqaw-2S6.js

@@ -0,0 +1,329 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPatch, parsePatch, diffWords, diffChars } from 'diff';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import { r as resolveLanguage, i as isLanguageSupported, g as getHighlighter, a as getCachedTokens, b as renderTokenLine } from './token-to-elements-BRFl_rzw.js';
+import useWindowSize from './useWindowSize-ugEmGZJm.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Text from './Text-DvAUdZcK.js';
+
+const renderHighlightedContent = (content, highlightedLines, lineNumber, fallbackColor) => {
+  if (!highlightedLines || lineNumber === void 0 || lineNumber < 1 || lineNumber > highlightedLines.length) {
+    return fallbackColor ? jsx(Text, { color: fallbackColor, children: content }) : jsx(Text, { dimColor: true, children: content });
+  }
+  const tokens = highlightedLines[lineNumber - 1];
+  if (!tokens || tokens.length === 0) {
+    return fallbackColor ? jsx(Text, { color: fallbackColor, children: content }) : jsx(Text, { dimColor: true, children: content });
+  }
+  return renderTokenLine(tokens);
+};
+const useHighlightedLines = (text, language, theme) => {
+  const [tokens, setTokens] = useState(null);
+  const cancelledRef = useRef(false);
+  useEffect(() => {
+    cancelledRef.current = false;
+    if (!language) {
+      setTokens(null);
+      return;
+    }
+    const lang = resolveLanguage(language);
+    if (!isLanguageSupported(lang)) {
+      setTokens(null);
+      return;
+    }
+    void (async () => {
+      try {
+        const highlighter = await getHighlighter([lang], theme);
+        const result = getCachedTokens(highlighter, text, lang, theme);
+        if (!cancelledRef.current) {
+          setTokens(result.tokens);
+        }
+      } catch {
+        if (!cancelledRef.current) {
+          setTokens(null);
+        }
+      }
+    })();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [text, language, theme]);
+  return tokens;
+};
+const parseDiffLines = (diffString, enableInlineDiff, inlineDiffMode = "chars") => {
+  const patches = parsePatch(diffString);
+  const hunks = [];
+  for (const patch of patches) {
+    for (const hunk of patch.hunks) {
+      const header = `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`;
+      const lines = [];
+      let oldLine = hunk.oldStart;
+      let newLine = hunk.newStart;
+      for (const line of hunk.lines) {
+        if (line.startsWith("\\")) {
+          continue;
+        }
+        if (line.startsWith("+")) {
+          lines.push({ content: line.slice(1), newLineNum: newLine++, type: "add" });
+        } else if (line.startsWith("-")) {
+          lines.push({ content: line.slice(1), oldLineNum: oldLine++, type: "del" });
+        } else {
+          lines.push({ content: line.slice(1), newLineNum: newLine++, oldLineNum: oldLine++, type: "context" });
+        }
+      }
+      if (enableInlineDiff) {
+        const pairs = findInlinePairs(lines);
+        for (const [delIndex, addIndex] of pairs) {
+          if (lines[delIndex].type === "del" && lines[addIndex].type === "add") {
+            const computed = computeInlineDiff(lines[delIndex].content, lines[addIndex].content, inlineDiffMode);
+            lines[delIndex].inlineDiff = computed ?? void 0;
+            lines[delIndex].pairedIndex = addIndex;
+            lines[addIndex].inlineDiff = computed ?? void 0;
+            lines[addIndex].pairedIndex = delIndex;
+          }
+        }
+      }
+      hunks.push({ header, lines });
+    }
+  }
+  return hunks;
+};
+const INLINE_DIFF_MAX_LINE_LENGTH = 500;
+const computeInlineDiff = (oldContent, newContent, mode = "chars") => {
+  if (oldContent.length > INLINE_DIFF_MAX_LINE_LENGTH || newContent.length > INLINE_DIFF_MAX_LINE_LENGTH) {
+    return null;
+  }
+  const parts = mode === "words" ? diffWords(oldContent, newContent) : diffChars(oldContent, newContent);
+  const delParts = [];
+  const addParts = [];
+  for (const part of parts) {
+    if (part.removed) {
+      delParts.push({ highlight: true, value: part.value });
+    } else if (part.added) {
+      addParts.push({ highlight: true, value: part.value });
+    } else {
+      delParts.push({ highlight: false, value: part.value });
+      addParts.push({ highlight: false, value: part.value });
+    }
+  }
+  return { addParts, delParts };
+};
+const renderInlineParts = (parts, color, bgColor) => jsx(Fragment, { children: parts.map((part, index) => {
+  if (part.highlight) {
+    return jsx(Text, { backgroundColor: bgColor, color: "white", children: part.value }, index);
+  }
+  return jsx(Text, { color, children: part.value }, index);
+}) });
+const findInlinePairs = (lines) => {
+  const pairs = /* @__PURE__ */ new Map();
+  let index = 0;
+  while (index < lines.length) {
+    const delStart = index;
+    while (index < lines.length && lines[index].type === "del") {
+      index++;
+    }
+    const delEnd = index;
+    const addStart = index;
+    while (index < lines.length && lines[index].type === "add") {
+      index++;
+    }
+    const addEnd = index;
+    const delCount = delEnd - delStart;
+    const addCount = addEnd - addStart;
+    const pairCount = Math.min(delCount, addCount);
+    for (let p = 0; p < pairCount; p++) {
+      pairs.set(delStart + p, addStart + p);
+      pairs.set(addStart + p, delStart + p);
+    }
+    if (index === delStart) {
+      index++;
+    }
+  }
+  return pairs;
+};
+function UnifiedView({
+  hunks,
+  newHighlighted,
+  oldHighlighted,
+  showLineNumbers
+}) {
+  return jsx(Box, { flexDirection: "column", children: hunks.map((hunk, hunkIndex) => jsxs(Box, { flexDirection: "column", children: [
+    hunkIndex > 0 ? jsx(Box, { marginBottom: 0, marginTop: 0, children: jsx(Text, { dimColor: true, children: "···" }) }) : void 0,
+    jsx(Text, { color: "cyan", dimColor: true, children: hunk.header }),
+    hunk.lines.map((line, lineIndex) => {
+      let lineContent;
+      let prefix;
+      let color;
+      switch (line.type) {
+        case "add": {
+          prefix = "+";
+          color = "green";
+          lineContent = line.inlineDiff ? renderInlineParts(line.inlineDiff.addParts, "green", "green") : renderHighlightedContent(line.content, newHighlighted, line.newLineNum, "green");
+          break;
+        }
+        case "del": {
+          prefix = "-";
+          color = "red";
+          lineContent = line.inlineDiff ? renderInlineParts(line.inlineDiff.delParts, "red", "red") : renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, "red");
+          break;
+        }
+        default: {
+          prefix = " ";
+          color = void 0;
+          lineContent = renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum);
+          break;
+        }
+      }
+      return jsxs(Box, { children: [
+        showLineNumbers ? jsxs(Text, { color, dimColor: line.type === "context", children: [
+          String(line.oldLineNum ?? "").padStart(4),
+          " ",
+          String(line.newLineNum ?? "").padStart(4),
+          " "
+        ] }) : void 0,
+        jsx(Text, { color, children: prefix }),
+        lineContent
+      ] }, lineIndex);
+    })
+  ] }, hunkIndex)) });
+}
+function SplitView({
+  hunks,
+  newHighlighted,
+  oldHighlighted,
+  showLineNumbers,
+  width
+}) {
+  const halfWidth = Math.floor(width / 2) - 1;
+  return jsx(Box, { flexDirection: "column", children: hunks.map((hunk, hunkIndex) => {
+    const separator = hunkIndex > 0 ? jsx(Box, { marginBottom: 0, marginTop: 0, children: jsx(Text, { dimColor: true, children: "···" }) }) : void 0;
+    const leftLines = [];
+    const rightLines = [];
+    for (let lineIndex = 0; lineIndex < hunk.lines.length; lineIndex++) {
+      const line = hunk.lines[lineIndex];
+      switch (line.type) {
+        case "add": {
+          if (line.pairedIndex === void 0) {
+            leftLines.push({ content: jsx(Text, { dimColor: true }) });
+            rightLines.push({
+              content: renderHighlightedContent(line.content, newHighlighted, line.newLineNum, "green"),
+              lineNum: line.newLineNum
+            });
+          }
+          break;
+        }
+        case "context": {
+          leftLines.push({ content: renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum), lineNum: line.oldLineNum });
+          rightLines.push({ content: renderHighlightedContent(line.content, newHighlighted, line.newLineNum), lineNum: line.newLineNum });
+          break;
+        }
+        case "del": {
+          if (line.pairedIndex === void 0) {
+            leftLines.push({
+              content: renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, "red"),
+              lineNum: line.oldLineNum
+            });
+            rightLines.push({ content: jsx(Text, { dimColor: true }) });
+          } else {
+            const pairedLine = hunk.lines[line.pairedIndex];
+            leftLines.push({
+              content: line.inlineDiff ? renderInlineParts(line.inlineDiff.delParts, "red", "red") : renderHighlightedContent(line.content, oldHighlighted, line.oldLineNum, "red"),
+              lineNum: line.oldLineNum
+            });
+            rightLines.push({
+              content: pairedLine.inlineDiff ? renderInlineParts(pairedLine.inlineDiff.addParts, "green", "green") : renderHighlightedContent(pairedLine.content, newHighlighted, pairedLine.newLineNum, "green"),
+              lineNum: pairedLine.newLineNum
+            });
+          }
+          break;
+        }
+      }
+    }
+    const rowCount = Math.max(leftLines.length, rightLines.length);
+    return jsxs(Box, { flexDirection: "column", children: [
+      separator,
+      jsx(Text, { color: "cyan", dimColor: true, children: hunk.header }),
+      Array.from({ length: rowCount }, (_, rowIndex) => {
+        const left = leftLines[rowIndex];
+        const right = rightLines[rowIndex];
+        return jsxs(Box, { flexDirection: "row", children: [
+          jsxs(Box, { width: halfWidth, children: [
+            showLineNumbers ? jsxs(Text, { dimColor: true, children: [
+              String(left?.lineNum ?? "").padStart(4),
+              " "
+            ] }) : void 0,
+            left?.content
+          ] }),
+          jsx(Text, { dimColor: true, children: "│" }),
+          jsxs(Box, { width: halfWidth, children: [
+            showLineNumbers ? jsxs(Text, { dimColor: true, children: [
+              String(right?.lineNum ?? "").padStart(4),
+              " "
+            ] }) : void 0,
+            right?.content
+          ] })
+        ] }, rowIndex);
+      })
+    ] }, hunkIndex);
+  }) });
+}
+function DiffView({
+  context = 3,
+  diff: diffProp,
+  inlineDiff = true,
+  inlineDiffMode = "chars",
+  language,
+  mode = "unified",
+  newLabel = "new",
+  newText = "",
+  oldLabel = "old",
+  oldText = "",
+  showLineNumbers = true,
+  theme = "github-dark-default"
+}) {
+  const { columns } = useWindowSize();
+  const oldHighlighted = useHighlightedLines(oldText, language, theme);
+  const newHighlighted = useHighlightedLines(newText, language, theme);
+  const diffString = useMemo(() => {
+    if (diffProp) {
+      return diffProp;
+    }
+    return createPatch("file", oldText, newText, oldLabel, newLabel, { context });
+  }, [diffProp, oldText, newText, oldLabel, newLabel, context]);
+  const hunks = useMemo(() => parseDiffLines(diffString, inlineDiff, inlineDiffMode), [diffString, inlineDiff, inlineDiffMode]);
+  if (hunks.every((h) => h.lines.length === 0)) {
+    return jsx(Box, { children: jsx(Text, { dimColor: true, children: "No differences found." }) });
+  }
+  const labels = jsxs(Box, { flexDirection: "column", children: [
+    jsxs(Text, { color: "red", dimColor: true, children: [
+      "---",
+      " ",
+      oldLabel
+    ] }),
+    jsxs(Text, { color: "green", dimColor: true, children: [
+      "+++",
+      " ",
+      newLabel
+    ] })
+  ] });
+  if (mode === "split") {
+    return jsxs(Box, { flexDirection: "column", children: [
+      labels,
+      jsx(
+        SplitView,
+        {
+          hunks,
+          newHighlighted,
+          oldHighlighted,
+          showLineNumbers,
+          width: columns ?? 80
+        }
+      )
+    ] });
+  }
+  return jsxs(Box, { flexDirection: "column", children: [
+    labels,
+    jsx(UnifiedView, { hunks, newHighlighted, oldHighlighted, showLineNumbers })
+  ] });
+}
+
+export { DiffView as default };

package/dist/packem_shared/FilePicker-DNwFxRhq.js

@@ -0,0 +1,254 @@
+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 { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import useInput from './useInput-Cfp5zB2s.js';
+import Box from './Box-D_pSJ9Jp.js';
+import Spinner from './Spinner-BuI-kN4p.js';
+import Text from './Text-DvAUdZcK.js';
+const {
+  readdir,
+  stat
+} = __cjs_getBuiltinModule("node:fs/promises");
+const {
+  resolve,
+  dirname,
+  join,
+  extname
+} = __cjs_getBuiltinModule("node:path");
+
+function formatPermissions(mode) {
+  const rwx = (m) => {
+    return `${m & 4 ? "r" : "-"}${m & 2 ? "w" : "-"}${m & 1 ? "x" : "-"}`;
+  };
+  return `${rwx(mode >> 6 & 7)}${rwx(mode >> 3 & 7)}${rwx(mode & 7)}`;
+}
+function matchesFilter(entry, filter) {
+  if (!(filter.showHidden ?? false) && entry.isHidden) {
+    return false;
+  }
+  if (!(filter.showDirectories ?? true) && entry.isDirectory) {
+    return false;
+  }
+  if (!(filter.showFiles ?? true) && !entry.isDirectory) {
+    return false;
+  }
+  if (filter.extensions && filter.extensions.length > 0 && !entry.isDirectory) {
+    const ext = extname(entry.name);
+    if (!filter.extensions.includes(ext)) {
+      return false;
+    }
+  }
+  return true;
+}
+function useFileSystem(options) {
+  const { filter, initialPath } = options;
+  const [currentPath, setCurrentPath] = useState(() => resolve(initialPath));
+  const [entries, setEntries] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
+  const [refreshKey, setRefreshKey] = useState(0);
+  const filterRef = useRef(filter);
+  filterRef.current = filter;
+  useEffect(() => {
+    let cancelled = false;
+    const loadDirectory = async () => {
+      setIsLoading(true);
+      setError(void 0);
+      try {
+        const dirEntries = await readdir(currentPath, { withFileTypes: true });
+        const fileEntries = [];
+        for (const entry of dirEntries) {
+          const entryPath = join(currentPath, entry.name);
+          const isDirectory = entry.isDirectory();
+          const isHidden = entry.name.startsWith(".");
+          let size = 0;
+          let permissions = "---------";
+          try {
+            const stats = await stat(entryPath);
+            size = stats.size;
+            permissions = formatPermissions(stats.mode);
+          } catch {
+          }
+          fileEntries.push({
+            isDirectory,
+            isHidden,
+            name: entry.name,
+            path: entryPath,
+            permissions,
+            size
+          });
+        }
+        if (cancelled) {
+          return;
+        }
+        const filtered = fileEntries.filter((e) => matchesFilter(e, filterRef.current));
+        filtered.sort((a, b) => {
+          if (a.isDirectory !== b.isDirectory) {
+            return a.isDirectory ? -1 : 1;
+          }
+          return a.name.localeCompare(b.name, void 0, { sensitivity: "base" });
+        });
+        setEntries(filtered);
+      } catch (error_) {
+        if (!cancelled) {
+          setError(error_ instanceof Error ? error_.message : String(error_));
+          setEntries([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+    void loadDirectory();
+    return () => {
+      cancelled = true;
+    };
+  }, [currentPath, refreshKey]);
+  const navigateTo = useCallback((path) => {
+    setCurrentPath(resolve(path));
+  }, []);
+  const goUp = useCallback(() => {
+    setCurrentPath((previous) => {
+      const parent = dirname(previous);
+      return parent === previous ? previous : parent;
+    });
+  }, []);
+  const refresh = useCallback(() => {
+    setRefreshKey((k) => k + 1);
+  }, []);
+  return { currentPath, entries, error, goUp, isLoading, navigateTo, refresh };
+}
+
+function formatSize(bytes) {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)}K`;
+  }
+  if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+  }
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}G`;
+}
+function FilePicker({
+  accentColor = "cyan",
+  directoryColor = "blue",
+  fileColor = "white",
+  filter = {},
+  initialPath = process.cwd(),
+  isFocused = true,
+  limit = 10,
+  onCancel,
+  onSelect,
+  showPermissions = false,
+  showSize = false
+}) {
+  const fs = useFileSystem({ filter, initialPath });
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const maxIndex = Math.max(0, fs.entries.length - 1);
+  const safeIndex = Math.min(focusedIndex, maxIndex);
+  useInput(
+    useCallback(
+      (_input, key) => {
+        if (key.upArrow) {
+          setFocusedIndex((i) => Math.max(0, i - 1));
+        } else if (key.downArrow) {
+          setFocusedIndex((i) => Math.min(maxIndex, i + 1));
+        } else if (key.return) {
+          const entry = fs.entries[safeIndex];
+          if (entry) {
+            if (entry.isDirectory) {
+              fs.navigateTo(entry.path);
+              setFocusedIndex(0);
+            } else {
+              onSelect?.(entry);
+            }
+          }
+        } else if (key.backspace || key.leftArrow) {
+          fs.goUp();
+          setFocusedIndex(0);
+        } else if (key.escape) {
+          onCancel?.();
+        } else if (_input === ".") {
+          fs.refresh();
+        } else if (key.pageUp) {
+          setFocusedIndex((i) => Math.max(0, i - limit));
+        } else if (key.pageDown) {
+          setFocusedIndex((i) => Math.min(maxIndex, i + limit));
+        } else if (key.home) {
+          setFocusedIndex(0);
+        } else if (key.end) {
+          setFocusedIndex(maxIndex);
+        }
+      },
+      [maxIndex, safeIndex, fs, limit, onSelect, onCancel]
+    ),
+    { isActive: isFocused }
+  );
+  const halfLimit = Math.floor(limit / 2);
+  let windowStart = Math.max(0, safeIndex - halfLimit);
+  const windowEnd = Math.min(fs.entries.length, windowStart + limit);
+  windowStart = Math.max(0, windowEnd - limit);
+  const visibleEntries = fs.entries.slice(windowStart, windowEnd);
+  return jsxs(Box, { flexDirection: "column", children: [
+    jsx(Text, { bold: true, dimColor: true, children: fs.currentPath }),
+    fs.isLoading && jsxs(Box, { children: [
+      jsx(Spinner, {}),
+      jsx(Text, { children: " Loading..." })
+    ] }),
+    fs.error && jsxs(Text, { color: "red", children: [
+      "Error: ",
+      fs.error
+    ] }),
+    !fs.isLoading && !fs.error && fs.entries.length === 0 && jsx(Text, { dimColor: true, children: "(empty directory)" }),
+    visibleEntries.map((entry, viewIndex) => {
+      const absoluteIndex = windowStart + viewIndex;
+      const isFocusedEntry = absoluteIndex === safeIndex;
+      const icon = entry.isDirectory ? "📁 " : "📄 ";
+      const nameColor = entry.isDirectory ? directoryColor : fileColor;
+      return jsxs(Box, { children: [
+        jsx(Text, { color: isFocusedEntry ? accentColor : void 0, children: isFocusedEntry ? "▸ " : "  " }),
+        jsx(Text, { children: icon }),
+        jsxs(Text, { bold: entry.isDirectory, color: isFocusedEntry ? accentColor : nameColor, children: [
+          entry.name,
+          entry.isDirectory ? "/" : ""
+        ] }),
+        showSize && !entry.isDirectory && jsxs(Text, { dimColor: true, children: [
+          "  ",
+          formatSize(entry.size)
+        ] }),
+        showPermissions && jsxs(Text, { dimColor: true, children: [
+          "  ",
+          entry.permissions
+        ] })
+      ] }, entry.name);
+    }),
+    fs.entries.length > limit && jsxs(Text, { dimColor: true, children: [
+      safeIndex + 1,
+      "/",
+      fs.entries.length
+    ] })
+  ] });
+}
+
+export { FilePicker as default };

package/dist/packem_shared/FocusContext-CWkYtgcm.js

@@ -0,0 +1,26 @@
+import { createContext } from 'react';
+
+const FocusContext = createContext({
+  activate() {
+  },
+  activeId: void 0,
+  add() {
+  },
+  deactivate() {
+  },
+  disableFocus() {
+  },
+  enableFocus() {
+  },
+  focus() {
+  },
+  focusNext() {
+  },
+  focusPrevious() {
+  },
+  remove() {
+  }
+});
+FocusContext.displayName = "InternalFocusContext";
+
+export { FocusContext as F };