@visulima/vis 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/packem_chunks/handler38.js

@@ -0,0 +1,989 @@
+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);
+};
+
+const {
+  writeFileSync
+} = __cjs_getBuiltinModule("node:fs");
+import { bold, cyan, dim } from '@visulima/colorize';
+import { projectGraphToDot } from '@visulima/task-runner';
+import { Box, Text, ScrollView, ScrollBar, useApp, useWindowSize, useInput, Dialog, render } from '@visulima/tui';
+import { _ as QuitDialog, d as discoverWorkspace, b as buildProjectGraph, i as isInCi } from './bin.js';
+import React, { useSyncExternalStore, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const buildNodes = (projectGraph) => {
+  const reverseDeps = /* @__PURE__ */ new Map();
+  for (const [source, deps] of Object.entries(projectGraph.dependencies)) {
+    for (const dep of deps) {
+      const existing = reverseDeps.get(dep.target) ?? [];
+      existing.push(source);
+      reverseDeps.set(dep.target, existing);
+    }
+  }
+  return Object.values(projectGraph.nodes).map((node) => {
+    return {
+      deps: projectGraph.dependencies[node.name] ?? [],
+      name: node.name,
+      reverseDeps: reverseDeps.get(node.name) ?? [],
+      type: node.type
+    };
+  }).sort((a, b) => {
+    if (a.type !== b.type) {
+      return a.type === "application" ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+};
+const filterNodes = (allNodes, filterType, filterText) => {
+  let filtered = allNodes;
+  if (filterType === "app") {
+    filtered = filtered.filter((n) => n.type === "application");
+  } else if (filterType === "lib") {
+    filtered = filtered.filter((n) => n.type !== "application");
+  }
+  if (filterText) {
+    const lower = filterText.toLowerCase();
+    filtered = filtered.filter((n) => n.name.toLowerCase().includes(lower));
+  }
+  return filtered;
+};
+class GraphStore {
+  #state;
+  #listeners = /* @__PURE__ */ new Set();
+  #projectGraph;
+  constructor(projectGraph) {
+    this.#projectGraph = projectGraph;
+    const allNodes = buildNodes(projectGraph);
+    this.#state = {
+      allNodes,
+      filterActive: false,
+      filterText: "",
+      filterType: "all",
+      focusedPanel: "list",
+      selectedIndex: 0
+    };
+  }
+  // ── React integration ───────────────────────────────────────────
+  getSnapshot = () => this.#state;
+  subscribe = (listener) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+  // ── Derived data ────────────────────────────────────────────────
+  getFilteredNodes() {
+    return filterNodes(this.#state.allNodes, this.#state.filterType, this.#state.filterText);
+  }
+  getStats() {
+    const apps = this.#state.allNodes.filter((n) => n.type === "application").length;
+    const total = this.#state.allNodes.length;
+    const deps = Object.values(this.#projectGraph.dependencies).reduce((s, d) => s + d.length, 0);
+    return { apps, deps, libs: total - apps, total };
+  }
+  // ── Navigation ──────────────────────────────────────────────────
+  setSelectedIndex(index) {
+    const filtered = this.getFilteredNodes();
+    const clamped = filtered.length === 0 ? -1 : Math.max(0, Math.min(index, filtered.length - 1));
+    if (clamped !== this.#state.selectedIndex) {
+      this.#emit({ ...this.#state, selectedIndex: clamped });
+    }
+  }
+  setFocusedPanel(panel) {
+    if (panel !== this.#state.focusedPanel) {
+      this.#emit({ ...this.#state, focusedPanel: panel });
+    }
+  }
+  // ── Filtering ───────────────────────────────────────────────────
+  setFilterType(type) {
+    if (type !== this.#state.filterType) {
+      this.#emit({
+        ...this.#state,
+        filterType: type,
+        selectedIndex: 0
+      });
+    }
+  }
+  setFilter(text) {
+    this.#emit({
+      ...this.#state,
+      filterText: text,
+      selectedIndex: 0
+    });
+  }
+  setFilterActive(active) {
+    if (active !== this.#state.filterActive) {
+      this.#emit({
+        ...this.#state,
+        filterActive: active,
+        filterText: active ? this.#state.filterText : "",
+        selectedIndex: active ? this.#state.selectedIndex : 0
+      });
+    }
+  }
+  // ── Internal ────────────────────────────────────────────────────
+  #emit(newState) {
+    this.#state = newState;
+    for (const listener of this.#listeners) {
+      try {
+        listener();
+      } catch {
+      }
+    }
+  }
+}
+
+const ProjectDetailPanel = ({ focused, node, scrollRef }) => {
+  const borderColor = focused ? "white" : "gray";
+  if (!node) {
+    return jsx(Box, { alignItems: "center", borderColor: "gray", borderStyle: "single", flexDirection: "column", flexGrow: 1, justifyContent: "center", children: jsx(Text, { dimColor: true, children: "No project selected" }) });
+  }
+  const isApp = node.type === "application";
+  const typeColor = isApp ? "yellow" : "cyan";
+  const typeLabel = isApp ? "Application" : "Library";
+  return jsx(
+    Box,
+    {
+      borderColor,
+      borderStyle: "single",
+      borderTopRightTitle: ` ${typeLabel} `,
+      borderTopTitle: ` ${node.name} `,
+      flexDirection: "column",
+      flexGrow: 1,
+      children: jsxs(ScrollView, { flexGrow: 1, flexShrink: 1, paddingX: 2, ref: scrollRef, scrollbar: true, scrollbarColor: "gray", children: [
+        jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "DEPENDS ON" }),
+            jsxs(Text, { dimColor: true, children: [
+              " (",
+              node.deps.length,
+              ")"
+            ] })
+          ] }),
+          node.deps.length === 0 ? jsx(Box, { marginTop: 1, paddingLeft: 2, children: jsx(Text, { dimColor: true, children: "No dependencies" }) }) : jsx(Box, { flexDirection: "column", marginTop: 1, children: node.deps.map((dep) => jsxs(Box, { gap: 1, paddingLeft: 2, children: [
+            jsx(Text, { color: "cyan", children: "→" }),
+            jsx(Text, { children: dep.target }),
+            dep.type !== "static" && jsxs(Text, { dimColor: true, children: [
+              "(",
+              dep.type,
+              ")"
+            ] })
+          ] }, dep.target)) })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "REQUIRED BY" }),
+            jsxs(Text, { dimColor: true, children: [
+              " (",
+              node.reverseDeps.length,
+              ")"
+            ] })
+          ] }),
+          node.reverseDeps.length === 0 ? jsx(Box, { marginTop: 1, paddingLeft: 2, children: jsx(Text, { dimColor: true, children: "No reverse dependencies" }) }) : jsx(Box, { flexDirection: "column", marginTop: 1, children: node.reverseDeps.map((rdep) => jsxs(Box, { gap: 1, paddingLeft: 2, children: [
+            jsx(Text, { color: "magenta", children: "←" }),
+            jsx(Text, { children: rdep })
+          ] }, rdep)) })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginTop: 1, children: [
+          jsxs(Box, { children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "INFO" })
+          ] }),
+          jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [
+            jsxs(Box, { children: [
+              jsx(Box, { width: 16, children: jsx(Text, { dimColor: true, children: "Type:" }) }),
+              jsx(Text, { color: typeColor, children: typeLabel })
+            ] }),
+            jsxs(Box, { children: [
+              jsx(Box, { width: 16, children: jsx(Text, { dimColor: true, children: "Dependencies:" }) }),
+              jsx(Text, { children: String(node.deps.length) })
+            ] }),
+            jsxs(Box, { children: [
+              jsx(Box, { width: 16, children: jsx(Text, { dimColor: true, children: "Required by:" }) }),
+              jsx(Text, { children: String(node.reverseDeps.length) })
+            ] }),
+            jsxs(Box, { children: [
+              jsx(Box, { width: 16, children: jsx(Text, { dimColor: true, children: "Connectivity:" }) }),
+              jsx(Text, { children: String(node.deps.length + node.reverseDeps.length) })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+
+const FILTER_LABELS = [
+  { key: "all", label: "All", shortcut: "1" },
+  { key: "app", label: "Apps", shortcut: "2" },
+  { key: "lib", label: "Libs", shortcut: "3" }
+];
+const ProjectRow = ({ isSelected, node }) => {
+  const isApp = node.type === "application";
+  const typeColor = isApp ? "yellow" : "cyan";
+  const typeLabel = isApp ? "app" : "lib";
+  return jsxs(Box, { flexShrink: 0, height: 1, children: [
+    jsxs(Text, { children: [
+      isSelected ? "▶" : " ",
+      " "
+    ] }),
+    jsx(Box, { flexGrow: 1, children: jsx(Text, { bold: isSelected, inverse: isSelected, wrap: "truncate", children: node.name }) }),
+    jsxs(Text, { color: typeColor, children: [
+      " ",
+      typeLabel
+    ] }),
+    jsxs(Text, { dimColor: true, children: [
+      " ",
+      "→",
+      node.deps.length,
+      " ",
+      "←",
+      node.reverseDeps.length
+    ] })
+  ] });
+};
+const TypeHeader = ({ count, label }) => jsxs(Box, { flexShrink: 0, height: 1, marginTop: 1, children: [
+  jsxs(Text, { dimColor: true, children: [
+    "▼",
+    " "
+  ] }),
+  jsx(Text, { bold: true, color: "white", children: label.toUpperCase() }),
+  jsxs(Text, { dimColor: true, children: [
+    " (",
+    count,
+    ")"
+  ] })
+] });
+const ProjectListPanel = ({
+  filterActive,
+  filterText,
+  filterType,
+  focused,
+  nodes,
+  scrollOffset,
+  selectedIndex,
+  stats,
+  viewportHeight
+}) => {
+  const borderColor = focused ? "white" : "gray";
+  const apps = nodes.filter((n) => n.type === "application");
+  const libs = nodes.filter((n) => n.type !== "application");
+  const rows = [];
+  let flatIndex = 0;
+  if (apps.length > 0) {
+    rows.push(jsx(TypeHeader, { count: apps.length, label: "Applications" }, "hdr-apps"));
+    for (const node of apps) {
+      const currentIndex = flatIndex;
+      rows.push(jsx(ProjectRow, { isSelected: currentIndex === selectedIndex, node }, node.name));
+      flatIndex++;
+    }
+  }
+  if (libs.length > 0) {
+    rows.push(jsx(TypeHeader, { count: libs.length, label: "Libraries" }, "hdr-libs"));
+    for (const node of libs) {
+      const currentIndex = flatIndex;
+      rows.push(jsx(ProjectRow, { isSelected: currentIndex === selectedIndex, node }, node.name));
+      flatIndex++;
+    }
+  }
+  let contentHeight = 0;
+  if (apps.length > 0) {
+    contentHeight += 2 + apps.length;
+  }
+  if (libs.length > 0) {
+    contentHeight += 2 + libs.length;
+  }
+  const showScrollbar = contentHeight > viewportHeight && viewportHeight > 0;
+  return jsxs(Box, { borderColor, borderStyle: "single", flexDirection: "column", flexGrow: 1, children: [
+    jsxs(Box, { flexShrink: 0, gap: 1, paddingX: 1, children: [
+      jsx(Text, { bold: true, inverse: true, children: " VIS " }),
+      jsxs(Text, { wrap: "truncate", children: [
+        stats.total,
+        " packages"
+      ] }),
+      jsxs(Text, { dimColor: true, children: [
+        "(",
+        stats.apps,
+        " apps, ",
+        stats.libs,
+        " libs, ",
+        stats.deps,
+        " deps)"
+      ] })
+    ] }),
+    jsx(Box, { flexShrink: 0, gap: 1, paddingX: 1, paddingY: 1, children: FILTER_LABELS.map((f) => {
+      const isActive = filterType === f.key;
+      return jsxs(Box, { children: [
+        jsx(Text, { dimColor: !isActive, children: "[" }),
+        jsx(Text, { bold: isActive, color: isActive ? "cyan" : "gray", children: f.shortcut }),
+        jsx(Text, { dimColor: !isActive, children: "]" }),
+        jsxs(Text, { color: isActive ? "white" : "gray", children: [
+          " ",
+          f.label
+        ] })
+      ] }, f.key);
+    }) }),
+    filterActive && jsxs(Box, { flexShrink: 0, paddingX: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "/ " }),
+      jsx(Text, { children: filterText }),
+      jsx(Text, { inverse: true, children: " " })
+    ] }),
+    jsxs(Box, { flexDirection: "row", flexGrow: 1, overflow: "hidden", children: [
+      jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingLeft: 1, children: jsx(Box, { flexDirection: "column", marginTop: -scrollOffset, children: rows }) }),
+      showScrollbar && jsx(Box, { flexShrink: 0, marginLeft: 1, marginRight: 1, children: jsx(ScrollBar, { contentHeight, placement: "inset", scrollOffset, style: "block", viewportHeight }) })
+    ] })
+  ] });
+};
+
+const MIN_HORIZONTAL_WIDTH = 100;
+const MIN_VIEWPORT_WIDTH = 40;
+const MIN_VIEWPORT_HEIGHT = 10;
+const FILTER_KEYS = {
+  1: "all",
+  2: "app",
+  3: "lib"
+};
+const VisGraphApp = ({ autoExitSeconds = 0, store }) => {
+  const { exit } = useApp();
+  const { columns, rows } = useWindowSize();
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
+  const [helpVisible, setHelpVisible] = useState(false);
+  const helpScrollRef = useRef(null);
+  const detailScrollRef = useRef(null);
+  const [listScrollOffset, setListScrollOffset] = useState(0);
+  const [quitDialogVisible, setQuitDialogVisible] = useState(false);
+  const filteredNodes = useMemo(() => store.getFilteredNodes(), [state.allNodes, state.filterType, state.filterText]);
+  const stats = useMemo(() => store.getStats(), [state.allNodes]);
+  const selectedNode = filteredNodes[state.selectedIndex] ?? null;
+  const getRowForIndex = useCallback(
+    (index) => {
+      const apps = filteredNodes.filter((n) => n.type === "application");
+      const libs = filteredNodes.filter((n) => n.type !== "application");
+      let row = 0;
+      let count = 0;
+      if (apps.length > 0) {
+        row += 2;
+        for (let i = 0; i < apps.length; i++) {
+          if (count === index) {
+            return row;
+          }
+          row += 1;
+          count++;
+        }
+      }
+      if (libs.length > 0) {
+        row += 2;
+        for (let i = 0; i < libs.length; i++) {
+          if (count === index) {
+            return row;
+          }
+          row += 1;
+          count++;
+        }
+      }
+      return row;
+    },
+    [filteredNodes]
+  );
+  const listViewportHeight = Math.max(1, rows - 8 - (state.filterActive ? 1 : 0));
+  const scrollToIndex = useCallback(
+    (index) => {
+      const targetRow = getRowForIndex(index);
+      setListScrollOffset((current) => {
+        if (targetRow > current + listViewportHeight - 2) {
+          return Math.max(0, targetRow - listViewportHeight + 2);
+        }
+        if (targetRow < current + 1) {
+          return Math.max(0, targetRow - 1);
+        }
+        return current;
+      });
+    },
+    [getRowForIndex, listViewportHeight]
+  );
+  useEffect(() => {
+    detailScrollRef.current?.scrollToTop();
+  }, [selectedNode?.name]);
+  useInput(
+    (input, key) => {
+      if (input === "c" && key.ctrl) {
+        exit();
+        return;
+      }
+      if (quitDialogVisible) {
+        return;
+      }
+      if (helpVisible) {
+        if (key.escape || input === "?") {
+          setHelpVisible(false);
+        } else if (input === "q") {
+          setHelpVisible(false);
+          setQuitDialogVisible(true);
+        } else if (key.downArrow || input === "j") {
+          helpScrollRef.current?.scrollBy(1);
+        } else if (key.upArrow || input === "k") {
+          helpScrollRef.current?.scrollBy(-1);
+        }
+        return;
+      }
+      if (input === "?") {
+        setHelpVisible(true);
+        return;
+      }
+      if (input === "q") {
+        setQuitDialogVisible(true);
+        return;
+      }
+      if (key.tab) {
+        store.setFocusedPanel(state.focusedPanel === "list" ? "detail" : "list");
+        return;
+      }
+      if (FILTER_KEYS[input]) {
+        store.setFilterType(FILTER_KEYS[input]);
+        return;
+      }
+      if (state.filterActive) {
+        if (key.escape) {
+          store.setFilterActive(false);
+          return;
+        }
+        if (key.return) {
+          store.setFilterActive(false);
+          return;
+        }
+        if (key.backspace) {
+          store.setFilter(state.filterText.slice(0, -1));
+          return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+          store.setFilter(state.filterText + input);
+          return;
+        }
+        return;
+      }
+      if (state.focusedPanel === "list") {
+        if (filteredNodes.length === 0) {
+          if (input === "/") {
+            store.setFilterActive(true);
+          }
+          return;
+        }
+        if (key.downArrow || input === "j") {
+          const next = Math.min(state.selectedIndex + 1, filteredNodes.length - 1);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.upArrow || input === "k") {
+          const next = Math.max(state.selectedIndex - 1, 0);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.pageDown) {
+          const next = Math.min(state.selectedIndex + 10, filteredNodes.length - 1);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.pageUp) {
+          const next = Math.max(state.selectedIndex - 10, 0);
+          store.setSelectedIndex(next);
+          scrollToIndex(next);
+          return;
+        }
+        if (key.home) {
+          store.setSelectedIndex(0);
+          setListScrollOffset(0);
+          return;
+        }
+        if (key.end) {
+          const last = filteredNodes.length - 1;
+          store.setSelectedIndex(last);
+          scrollToIndex(last);
+          return;
+        }
+        if (input === "/") {
+          store.setFilterActive(true);
+          return;
+        }
+        if (key.rightArrow) {
+          store.setFocusedPanel("detail");
+          return;
+        }
+        return;
+      }
+      if (state.focusedPanel === "detail") {
+        if (key.escape || key.leftArrow) {
+          store.setFocusedPanel("list");
+          return;
+        }
+        if (key.downArrow || input === "j") {
+          detailScrollRef.current?.scrollBy(1);
+          return;
+        }
+        if (key.upArrow || input === "k") {
+          detailScrollRef.current?.scrollBy(-1);
+          return;
+        }
+        if (key.pageDown) {
+          detailScrollRef.current?.scrollBy(10);
+          return;
+        }
+        if (key.pageUp) {
+          detailScrollRef.current?.scrollBy(-10);
+          return;
+        }
+        if (key.home) {
+          detailScrollRef.current?.scrollToTop();
+          return;
+        }
+        if (key.end) {
+          detailScrollRef.current?.scrollToBottom();
+        }
+      }
+    },
+    { isActive: true }
+  );
+  if (columns < MIN_VIEWPORT_WIDTH || rows < MIN_VIEWPORT_HEIGHT) {
+    return jsx(Box, { alignItems: "center", height: rows, justifyContent: "center", width: columns, children: jsxs(Text, { color: "yellow", children: [
+      "Terminal too small (",
+      columns,
+      "x",
+      rows,
+      ")"
+    ] }) });
+  }
+  const isHorizontal = columns >= MIN_HORIZONTAL_WIDTH;
+  const footer = jsx(Box, { borderBottom: false, borderColor: "gray", borderLeft: false, borderRight: false, borderStyle: "single", flexShrink: 0, children: jsxs(Box, { flexWrap: "wrap", gap: 2, paddingX: 1, children: [
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "q" }),
+      jsx(Text, { dimColor: true, children: "QUIT" })
+    ] }, "q"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "?" }),
+      jsx(Text, { dimColor: true, children: "HELP" })
+    ] }, "?"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+      jsx(Text, { dimColor: true, children: "NAV" })
+    ] }, "nav"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "1-3 /" }),
+      jsx(Text, { dimColor: true, children: "FILTER" })
+    ] }, "f"),
+    jsxs(Box, { gap: 1, children: [
+      jsx(Text, { bold: true, color: "white", children: "Tab" }),
+      jsx(Text, { dimColor: true, children: "PANEL" })
+    ] }, "t")
+  ] }) });
+  const helpPopup = jsxs(
+    Dialog,
+    {
+      footer: jsxs(Text, { dimColor: true, children: [
+        jsx(Text, { bold: true, color: "white", children: "↑↓" }),
+        " ",
+        "scroll",
+        " ",
+        jsx(Text, { bold: true, color: "white", children: "?" }),
+        "/",
+        jsx(Text, { bold: true, color: "white", children: "Esc" }),
+        " ",
+        "close"
+      ] }),
+      scrollRef: helpScrollRef,
+      title: "KEYBOARD SHORTCUTS",
+      visible: helpVisible,
+      width: 52,
+      children: [
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "NAVIGATION" })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Box, { width: 24, children: jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "↑",
+                "/k"
+              ] }),
+              jsx(Text, { dimColor: true, children: " Move up" })
+            ] }) }),
+            jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "↓",
+                "/j"
+              ] }),
+              jsx(Text, { dimColor: true, children: " Move down" })
+            ] })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "Tab"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Switch panel" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "→",
+              "/",
+              "←"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Focus detail/list" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "PgUp/PgDn"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Jump 10 items" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "Home/End"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Jump to start/end" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "FILTERS" })
+          ] }),
+          jsxs(Box, { children: [
+            jsx(Box, { width: 24, children: jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "1"
+              ] }),
+              jsx(Text, { dimColor: true, children: " All" })
+            ] }) }),
+            jsxs(Text, { children: [
+              jsxs(Text, { bold: true, color: "white", children: [
+                " ",
+                "2"
+              ] }),
+              jsx(Text, { dimColor: true, children: " Apps only" })
+            ] })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "3"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Libraries only" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "/"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Text filter" })
+          ] })
+        ] }),
+        jsxs(Box, { flexDirection: "column", children: [
+          jsxs(Box, { marginBottom: 1, children: [
+            jsx(Text, { dimColor: true, children: "── " }),
+            jsx(Text, { bold: true, color: "white", children: "ACTIONS" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "q"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Quit" })
+          ] }),
+          jsxs(Text, { children: [
+            jsxs(Text, { bold: true, color: "white", children: [
+              " ",
+              "?"
+            ] }),
+            jsx(Text, { dimColor: true, children: " Toggle help" })
+          ] })
+        ] })
+      ]
+    }
+  );
+  const listPanel = jsx(
+    ProjectListPanel,
+    {
+      filterActive: state.filterActive,
+      filterText: state.filterText,
+      filterType: state.filterType,
+      focused: state.focusedPanel === "list",
+      nodes: filteredNodes,
+      scrollOffset: listScrollOffset,
+      selectedIndex: state.selectedIndex,
+      stats,
+      viewportHeight: listViewportHeight
+    }
+  );
+  const detailPanel = jsx(ProjectDetailPanel, { focused: state.focusedPanel === "detail", node: selectedNode, scrollRef: detailScrollRef });
+  if (isHorizontal) {
+    const detailWidth = Math.floor(columns * 0.35);
+    return jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [
+      jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [
+        jsx(Box, { flexGrow: 1, children: listPanel }),
+        jsx(Box, { width: detailWidth, children: detailPanel })
+      ] }),
+      footer,
+      jsx(
+        QuitDialog,
+        {
+          autoExitSeconds: autoExitSeconds ?? 3,
+          onCancel: () => {
+            setQuitDialogVisible(false);
+          },
+          visible: quitDialogVisible
+        }
+      ),
+      helpPopup
+    ] });
+  }
+  const listHeight = Math.floor(rows * 0.55);
+  return jsxs(Box, { flexDirection: "column", height: rows, width: columns, children: [
+    jsx(Box, { height: listHeight, children: listPanel }),
+    jsx(Box, { flexGrow: 1, children: detailPanel }),
+    footer,
+    jsx(
+      QuitDialog,
+      {
+        autoExitSeconds: autoExitSeconds ?? 3,
+        onCancel: () => {
+          setQuitDialogVisible(false);
+        },
+        visible: quitDialogVisible
+      }
+    ),
+    helpPopup
+  ] });
+};
+
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+const printDepsTree = (name, prefix, isLast, nodes, printed, lines, maxDepth, currentDepth) => {
+  const connector = isLast ? dim("└── ") : dim("├── ");
+  const isDuplicate = printed.has(name);
+  const suffix = isDuplicate ? dim(" (*)") : "";
+  const node = nodes.get(name);
+  const isApp = node?.type === "application";
+  const displayName = isApp ? bold(name) : name;
+  lines.push(`${prefix}${connector}${displayName}${suffix}`);
+  if (isDuplicate) {
+    return;
+  }
+  printed.add(name);
+  const deps = node?.deps ?? [];
+  const childPrefix = isLast ? `${prefix}    ` : `${prefix}${dim("│")}   `;
+  if (currentDepth >= maxDepth && deps.length > 0) {
+    lines.push(`${childPrefix}${dim(`... ${deps.length} more`)}`);
+    return;
+  }
+  for (let i = 0; i < deps.length; i++) {
+    const dep = deps[i];
+    if (dep) {
+      printDepsTree(dep.target, childPrefix, i === deps.length - 1, nodes, printed, lines, maxDepth, currentDepth + 1);
+    }
+  }
+};
+const printRootProject = (name, nodes, printed, lines, maxDepth, indent) => {
+  const node = nodes.get(name);
+  const isApp = node?.type === "application";
+  const displayName = isApp ? bold(name) : name;
+  lines.push(`${indent}${displayName}`);
+  printed.add(name);
+  const deps = node?.deps ?? [];
+  if (deps.length === 0) {
+    lines.push(`${indent}  ${dim("(no dependencies)")}`);
+    return;
+  }
+  if (maxDepth <= 0) {
+    lines.push(`${indent}  ${dim(`... ${deps.length} dependencies`)}`);
+    return;
+  }
+  for (let i = 0; i < deps.length; i++) {
+    const dep = deps[i];
+    if (dep) {
+      printDepsTree(dep.target, indent, i === deps.length - 1, nodes, printed, lines, maxDepth, 1);
+    }
+  }
+};
+const projectGraphToAscii = (projectGraph, maxDepth) => {
+  const nodes = /* @__PURE__ */ new Map();
+  for (const [name, node] of Object.entries(projectGraph.nodes)) {
+    nodes.set(name, {
+      deps: (projectGraph.dependencies[name] ?? []).map((d) => {
+        return { target: d.target, type: d.type };
+      }),
+      name,
+      type: node.type
+    });
+  }
+  const apps = [];
+  const libs = [];
+  for (const [name, node] of nodes) {
+    if (node.type === "application") {
+      apps.push(name);
+    } else {
+      libs.push(name);
+    }
+  }
+  apps.sort();
+  libs.sort();
+  const totalPackages = apps.length + libs.length;
+  const totalDeps = Object.values(projectGraph.dependencies).reduce((sum, deps) => sum + deps.length, 0);
+  const lines = [];
+  lines.push(bold("Project Dependency Graph"), "");
+  if (apps.length > 0) {
+    lines.push(` ${bold(cyan(`Applications (${apps.length})`))}`, "");
+    for (const name of apps) {
+      const printed = /* @__PURE__ */ new Set();
+      printRootProject(name, nodes, printed, lines, maxDepth, "  ");
+      lines.push("");
+    }
+  }
+  if (libs.length > 0) {
+    lines.push(` ${bold(cyan(`Libraries (${libs.length})`))}`, "");
+    for (const name of libs) {
+      const printed = /* @__PURE__ */ new Set();
+      printRootProject(name, nodes, printed, lines, maxDepth, "  ");
+      lines.push("");
+    }
+  }
+  const width = process.stdout.columns || 80;
+  lines.push(dim("─".repeat(Math.min(width, 60))));
+  lines.push(
+    `${bold(String(totalPackages))} packages ${dim("·")} ${bold(String(totalDeps))} dependencies ${dim("·")} ${bold(String(apps.length))} apps${dim(",")} ${bold(String(libs.length))} libraries`
+  );
+  const allPrinted = /* @__PURE__ */ new Set();
+  let hasDuplicates = false;
+  for (const name of [...apps, ...libs]) {
+    const deps = nodes.get(name)?.deps ?? [];
+    for (const dep of deps) {
+      if (allPrinted.has(dep.target)) {
+        hasDuplicates = true;
+      }
+      allPrinted.add(dep.target);
+    }
+    allPrinted.add(name);
+  }
+  if (hasDuplicates) {
+    lines.push(dim("(*) = already shown above"));
+  }
+  return lines.join("\n");
+};
+const projectGraphToJson = (projectGraph) => {
+  const nodes = Object.values(projectGraph.nodes).map((node) => {
+    return {
+      name: node.name,
+      type: node.type
+    };
+  });
+  const edges = Object.values(projectGraph.dependencies).flat();
+  return { edges, nodes };
+};
+var _a;
+const projectGraphToHtml = (projectGraph) => {
+  const nodes = Object.values(projectGraph.nodes).map((node) => {
+    return {
+      name: node.name,
+      type: node.type
+    };
+  });
+  const edges = [];
+  for (const deps of Object.values(projectGraph.dependencies)) {
+    for (const dep of deps) {
+      edges.push({ source: dep.source, target: dep.target, type: dep.type });
+    }
+  }
+  const apps = nodes.filter((n) => n.type === "application");
+  const libs = nodes.filter((n) => n.type !== "application");
+  const graphData = { apps: apps.length, edges, libs: libs.length, nodes };
+  return String.raw(_a || (_a = __template(['<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<title>Project Dependency Graph</title>\n<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; overflow: hidden; }\n  svg { width: 100vw; height: 100vh; }\n  .edge { fill: none; marker-end: url(#arrow); }\n  .node rect { rx: 8; ry: 8; cursor: pointer; transition: stroke-width 0.15s; }\n  .node text { font-size: 12px; font-weight: 600; pointer-events: none; }\n  .node:hover rect { stroke-width: 2.5; stroke: #fff; }\n  #info { position: fixed; top: 16px; right: 16px; background: #1e293b; padding: 14px 20px; border-radius: 10px; font-size: 13px; border: 1px solid #334155; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }\n  #info b { font-variant-numeric: tabular-nums; }\n  .app-count { color: #fbbf24; }\n  .lib-count { color: #38bdf8; }\n  .dep-count { color: #a78bfa; }\n  #legend { position: fixed; bottom: 16px; left: 16px; background: #1e293b; padding: 12px 16px; border-radius: 10px; font-size: 12px; border: 1px solid #334155; display: flex; gap: 16px; align-items: center; }\n  .legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; }\n  #tooltip { position: fixed; display: none; background: #1e293b; border: 1px solid #475569; border-radius: 8px; padding: 12px 16px; font-size: 12px; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10; pointer-events: none; }\n  #tooltip h3 { font-size: 14px; margin-bottom: 6px; }\n  #tooltip .type-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 8px; }\n  #tooltip .dep-section { margin-top: 8px; color: #94a3b8; }\n  #tooltip ul { list-style: none; padding-left: 0; margin-top: 4px; }\n  #tooltip li { padding: 1px 0; color: #cbd5e1; }\n  #tooltip li::before { content: "92 "; color: #64748b; }\n</style>\n</head>\n<body>\n<div id="info">\n  <b class="app-count">', '</b> apps &middot;\n  <b class="lib-count">', '</b> libraries &middot;\n  <b class="dep-count">', '</b> dependencies\n</div>\n<div id="legend">\n  <span><span class="legend-dot" style="background:#fbbf24"></span>Application</span>\n  <span><span class="legend-dot" style="background:#38bdf8"></span>Library</span>\n  <span style="color:#64748b">&mdash; solid = static &nbsp; - - - = implicit</span>\n</div>\n<div id="tooltip"></div>\n<svg id="graph">\n  <defs>\n    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">\n      <path d="M 0 0 L 10 5 L 0 10 z" fill="#64748b"/>\n    </marker>\n  </defs>\n</svg>\n<script>\nconst data = ', ";\nconst svg = document.getElementById('graph');\nconst tooltip = document.getElementById('tooltip');\nconst W = window.innerWidth, H = window.innerHeight;\n\n// Build adjacency\nconst depMap = {}, rdepMap = {};\ndata.nodes.forEach(n => { depMap[n.name] = []; rdepMap[n.name] = []; });\ndata.edges.forEach(e => { depMap[e.source]?.push(e.target); rdepMap[e.target]?.push(e.source); });\n\n// Escape text for safe DOM insertion\nfunction esc(s) { const d = document.createElement('div'); d.textContent = s; return d.textContent; }\n\n// Force-directed layout\nconst repulsion = 5000 + data.nodes.length * 150;\nconst nodes = data.nodes.map(n => ({\n  ...n, x: W/2 + (Math.random()-0.5)*Math.min(W*0.6, 600),\n  y: H/2 + (Math.random()-0.5)*Math.min(H*0.6, 400), vx: 0, vy: 0\n}));\nconst nodeMap = new Map(nodes.map(n => [n.name, n]));\nconst edges = data.edges.map(e => ({\n  source: nodeMap.get(e.source), target: nodeMap.get(e.target), type: e.type\n}));\n\nfor (let iter = 0; iter < 400; iter++) {\n  for (let i = 0; i < nodes.length; i++) {\n    for (let j = i+1; j < nodes.length; j++) {\n      let dx = nodes[j].x - nodes[i].x, dy = nodes[j].y - nodes[i].y;\n      let d = Math.sqrt(dx*dx + dy*dy) || 1;\n      let f = repulsion / (d * d);\n      nodes[i].vx -= dx/d * f; nodes[i].vy -= dy/d * f;\n      nodes[j].vx += dx/d * f; nodes[j].vy += dy/d * f;\n    }\n  }\n  edges.forEach(e => {\n    if (!e.source || !e.target) {\n        return;\n    }\n    let dx = e.target.x - e.source.x, dy = e.target.y - e.source.y;\n    let d = Math.sqrt(dx*dx + dy*dy) || 1;\n    let f = (d - 180) * 0.008;\n    e.source.vx += dx/d * f; e.source.vy += dy/d * f;\n    e.target.vx -= dx/d * f; e.target.vy -= dy/d * f;\n  });\n  nodes.forEach(n => {\n    n.vx += (W/2 - n.x) * 0.001; n.vy += (H/2 - n.y) * 0.001;\n    n.x += n.vx * 0.3; n.y += n.vy * 0.3;\n    n.vx *= 0.75; n.vy *= 0.75;\n    n.x = Math.max(80, Math.min(W-80, n.x));\n    n.y = Math.max(40, Math.min(H-40, n.y));\n  });\n}\n\n// Measure text widths\nconst measure = document.createElementNS('http://www.w3.org/2000/svg','text');\nmeasure.setAttribute('font-size','12'); measure.setAttribute('font-weight','600');\nmeasure.setAttribute('font-family','system-ui');\nsvg.appendChild(measure);\nconst widths = {};\nnodes.forEach(n => { measure.textContent = n.name; widths[n.name] = measure.getComputedTextLength(); });\nsvg.removeChild(measure);\n\n// Render edges\nedges.forEach(e => {\n  if (!e.source || !e.target) {\n      return;\n  }\n  const sw = (widths[e.source.name]||80)/2 + 12;\n  const tw = (widths[e.target.name]||80)/2 + 12;\n  const dx = e.target.x - e.source.x, dy = e.target.y - e.source.y;\n  const d = Math.sqrt(dx*dx+dy*dy)||1;\n  const x1 = e.source.x + dx/d*sw, y1 = e.source.y + dy/d*14;\n  const x2 = e.target.x - dx/d*tw, y2 = e.target.y - dy/d*14;\n  const line = document.createElementNS('http://www.w3.org/2000/svg','line');\n  line.setAttribute('x1',x1); line.setAttribute('y1',y1);\n  line.setAttribute('x2',x2); line.setAttribute('y2',y2);\n  line.setAttribute('class','edge');\n  const edgeColors = { implicit: '#475569', devDependency: '#888888', peerDependency: '#CC8800' };\n  line.setAttribute('stroke', edgeColors[e.type] || '#64748b');\n  line.setAttribute('stroke-width', '1.5');\n  if (e.type === 'implicit' || e.type === 'peerDependency') {\n      line.setAttribute('stroke-dasharray', '6,4');\n  }\n  if (e.type === 'devDependency') {\n      line.setAttribute('stroke-dasharray', '3,3');\n  }\n  svg.appendChild(line);\n});\n\n// Render nodes\nnodes.forEach(n => {\n  const w = (widths[n.name]||80) + 24;\n  const h = 32;\n  const isApp = n.type === 'application';\n  const fill = isApp ? '#fbbf24' : '#38bdf8';\n  const textFill = '#0f172a';\n  const stroke = isApp ? '#f59e0b' : '#0284c7';\n\n  const g = document.createElementNS('http://www.w3.org/2000/svg','g');\n  g.setAttribute('class','node');\n  g.setAttribute('transform','translate('+(n.x - w/2)+','+(n.y - h/2)+')');\n  const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');\n  rect.setAttribute('width', w); rect.setAttribute('height', h);\n  rect.setAttribute('fill', fill); rect.setAttribute('stroke', stroke); rect.setAttribute('stroke-width','1.5');\n  g.appendChild(rect);\n  const text = document.createElementNS('http://www.w3.org/2000/svg','text');\n  text.setAttribute('x', w/2); text.setAttribute('y', h/2 + 4.5);\n  text.setAttribute('text-anchor','middle'); text.setAttribute('fill', textFill);\n  text.textContent = n.name;\n  g.appendChild(text);\n\n  g.addEventListener('mouseenter', (ev) => {\n    const deps = depMap[n.name] || [];\n    const rdeps = rdepMap[n.name] || [];\n\n    // Build tooltip using safe DOM methods\n    tooltip.textContent = '';\n\n    const heading = document.createElement('h3');\n    heading.textContent = n.name;\n    const badge = document.createElement('span');\n    badge.className = 'type-badge';\n    badge.style.background = fill;\n    badge.style.color = '#0f172a';\n    badge.textContent = n.type;\n    heading.appendChild(badge);\n    tooltip.appendChild(heading);\n\n    if (deps.length) {\n      const label = document.createElement('div');\n      label.className = 'dep-section';\n      label.textContent = 'Depends on:';\n      tooltip.appendChild(label);\n      const ul = document.createElement('ul');\n      deps.forEach(d => { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); });\n      tooltip.appendChild(ul);\n    }\n    if (rdeps.length) {\n      const label = document.createElement('div');\n      label.className = 'dep-section';\n      label.textContent = 'Required by:';\n      tooltip.appendChild(label);\n      const ul = document.createElement('ul');\n      rdeps.forEach(d => { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); });\n      tooltip.appendChild(ul);\n    }\n    if (!deps.length && !rdeps.length) {\n      const empty = document.createElement('div');\n      empty.style.marginTop = '6px';\n      empty.style.color = '#64748b';\n      empty.textContent = 'No dependencies';\n      tooltip.appendChild(empty);\n    }\n\n    tooltip.style.display = 'block';\n    const rect = tooltip.getBoundingClientRect();\n    tooltip.style.left = Math.min(ev.clientX + 12, W - rect.width - 12) + 'px';\n    tooltip.style.top = Math.min(ev.clientY + 12, H - rect.height - 12) + 'px';\n  });\n  g.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });\n  svg.appendChild(g);\n});\n<\/script>\n</body>\n</html>"], ['<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<title>Project Dependency Graph</title>\n<style>\n  * { margin: 0; padding: 0; box-sizing: border-box; }\n  body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; overflow: hidden; }\n  svg { width: 100vw; height: 100vh; }\n  .edge { fill: none; marker-end: url(#arrow); }\n  .node rect { rx: 8; ry: 8; cursor: pointer; transition: stroke-width 0.15s; }\n  .node text { font-size: 12px; font-weight: 600; pointer-events: none; }\n  .node:hover rect { stroke-width: 2.5; stroke: #fff; }\n  #info { position: fixed; top: 16px; right: 16px; background: #1e293b; padding: 14px 20px; border-radius: 10px; font-size: 13px; border: 1px solid #334155; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }\n  #info b { font-variant-numeric: tabular-nums; }\n  .app-count { color: #fbbf24; }\n  .lib-count { color: #38bdf8; }\n  .dep-count { color: #a78bfa; }\n  #legend { position: fixed; bottom: 16px; left: 16px; background: #1e293b; padding: 12px 16px; border-radius: 10px; font-size: 12px; border: 1px solid #334155; display: flex; gap: 16px; align-items: center; }\n  .legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; }\n  #tooltip { position: fixed; display: none; background: #1e293b; border: 1px solid #475569; border-radius: 8px; padding: 12px 16px; font-size: 12px; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10; pointer-events: none; }\n  #tooltip h3 { font-size: 14px; margin-bottom: 6px; }\n  #tooltip .type-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 8px; }\n  #tooltip .dep-section { margin-top: 8px; color: #94a3b8; }\n  #tooltip ul { list-style: none; padding-left: 0; margin-top: 4px; }\n  #tooltip li { padding: 1px 0; color: #cbd5e1; }\n  #tooltip li::before { content: "\\2192 "; color: #64748b; }\n</style>\n</head>\n<body>\n<div id="info">\n  <b class="app-count">', '</b> apps &middot;\n  <b class="lib-count">', '</b> libraries &middot;\n  <b class="dep-count">', '</b> dependencies\n</div>\n<div id="legend">\n  <span><span class="legend-dot" style="background:#fbbf24"></span>Application</span>\n  <span><span class="legend-dot" style="background:#38bdf8"></span>Library</span>\n  <span style="color:#64748b">&mdash; solid = static &nbsp; - - - = implicit</span>\n</div>\n<div id="tooltip"></div>\n<svg id="graph">\n  <defs>\n    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">\n      <path d="M 0 0 L 10 5 L 0 10 z" fill="#64748b"/>\n    </marker>\n  </defs>\n</svg>\n<script>\nconst data = ', ";\nconst svg = document.getElementById('graph');\nconst tooltip = document.getElementById('tooltip');\nconst W = window.innerWidth, H = window.innerHeight;\n\n// Build adjacency\nconst depMap = {}, rdepMap = {};\ndata.nodes.forEach(n => { depMap[n.name] = []; rdepMap[n.name] = []; });\ndata.edges.forEach(e => { depMap[e.source]?.push(e.target); rdepMap[e.target]?.push(e.source); });\n\n// Escape text for safe DOM insertion\nfunction esc(s) { const d = document.createElement('div'); d.textContent = s; return d.textContent; }\n\n// Force-directed layout\nconst repulsion = 5000 + data.nodes.length * 150;\nconst nodes = data.nodes.map(n => ({\n  ...n, x: W/2 + (Math.random()-0.5)*Math.min(W*0.6, 600),\n  y: H/2 + (Math.random()-0.5)*Math.min(H*0.6, 400), vx: 0, vy: 0\n}));\nconst nodeMap = new Map(nodes.map(n => [n.name, n]));\nconst edges = data.edges.map(e => ({\n  source: nodeMap.get(e.source), target: nodeMap.get(e.target), type: e.type\n}));\n\nfor (let iter = 0; iter < 400; iter++) {\n  for (let i = 0; i < nodes.length; i++) {\n    for (let j = i+1; j < nodes.length; j++) {\n      let dx = nodes[j].x - nodes[i].x, dy = nodes[j].y - nodes[i].y;\n      let d = Math.sqrt(dx*dx + dy*dy) || 1;\n      let f = repulsion / (d * d);\n      nodes[i].vx -= dx/d * f; nodes[i].vy -= dy/d * f;\n      nodes[j].vx += dx/d * f; nodes[j].vy += dy/d * f;\n    }\n  }\n  edges.forEach(e => {\n    if (!e.source || !e.target) {\n        return;\n    }\n    let dx = e.target.x - e.source.x, dy = e.target.y - e.source.y;\n    let d = Math.sqrt(dx*dx + dy*dy) || 1;\n    let f = (d - 180) * 0.008;\n    e.source.vx += dx/d * f; e.source.vy += dy/d * f;\n    e.target.vx -= dx/d * f; e.target.vy -= dy/d * f;\n  });\n  nodes.forEach(n => {\n    n.vx += (W/2 - n.x) * 0.001; n.vy += (H/2 - n.y) * 0.001;\n    n.x += n.vx * 0.3; n.y += n.vy * 0.3;\n    n.vx *= 0.75; n.vy *= 0.75;\n    n.x = Math.max(80, Math.min(W-80, n.x));\n    n.y = Math.max(40, Math.min(H-40, n.y));\n  });\n}\n\n// Measure text widths\nconst measure = document.createElementNS('http://www.w3.org/2000/svg','text');\nmeasure.setAttribute('font-size','12'); measure.setAttribute('font-weight','600');\nmeasure.setAttribute('font-family','system-ui');\nsvg.appendChild(measure);\nconst widths = {};\nnodes.forEach(n => { measure.textContent = n.name; widths[n.name] = measure.getComputedTextLength(); });\nsvg.removeChild(measure);\n\n// Render edges\nedges.forEach(e => {\n  if (!e.source || !e.target) {\n      return;\n  }\n  const sw = (widths[e.source.name]||80)/2 + 12;\n  const tw = (widths[e.target.name]||80)/2 + 12;\n  const dx = e.target.x - e.source.x, dy = e.target.y - e.source.y;\n  const d = Math.sqrt(dx*dx+dy*dy)||1;\n  const x1 = e.source.x + dx/d*sw, y1 = e.source.y + dy/d*14;\n  const x2 = e.target.x - dx/d*tw, y2 = e.target.y - dy/d*14;\n  const line = document.createElementNS('http://www.w3.org/2000/svg','line');\n  line.setAttribute('x1',x1); line.setAttribute('y1',y1);\n  line.setAttribute('x2',x2); line.setAttribute('y2',y2);\n  line.setAttribute('class','edge');\n  const edgeColors = { implicit: '#475569', devDependency: '#888888', peerDependency: '#CC8800' };\n  line.setAttribute('stroke', edgeColors[e.type] || '#64748b');\n  line.setAttribute('stroke-width', '1.5');\n  if (e.type === 'implicit' || e.type === 'peerDependency') {\n      line.setAttribute('stroke-dasharray', '6,4');\n  }\n  if (e.type === 'devDependency') {\n      line.setAttribute('stroke-dasharray', '3,3');\n  }\n  svg.appendChild(line);\n});\n\n// Render nodes\nnodes.forEach(n => {\n  const w = (widths[n.name]||80) + 24;\n  const h = 32;\n  const isApp = n.type === 'application';\n  const fill = isApp ? '#fbbf24' : '#38bdf8';\n  const textFill = '#0f172a';\n  const stroke = isApp ? '#f59e0b' : '#0284c7';\n\n  const g = document.createElementNS('http://www.w3.org/2000/svg','g');\n  g.setAttribute('class','node');\n  g.setAttribute('transform','translate('+(n.x - w/2)+','+(n.y - h/2)+')');\n  const rect = document.createElementNS('http://www.w3.org/2000/svg','rect');\n  rect.setAttribute('width', w); rect.setAttribute('height', h);\n  rect.setAttribute('fill', fill); rect.setAttribute('stroke', stroke); rect.setAttribute('stroke-width','1.5');\n  g.appendChild(rect);\n  const text = document.createElementNS('http://www.w3.org/2000/svg','text');\n  text.setAttribute('x', w/2); text.setAttribute('y', h/2 + 4.5);\n  text.setAttribute('text-anchor','middle'); text.setAttribute('fill', textFill);\n  text.textContent = n.name;\n  g.appendChild(text);\n\n  g.addEventListener('mouseenter', (ev) => {\n    const deps = depMap[n.name] || [];\n    const rdeps = rdepMap[n.name] || [];\n\n    // Build tooltip using safe DOM methods\n    tooltip.textContent = '';\n\n    const heading = document.createElement('h3');\n    heading.textContent = n.name;\n    const badge = document.createElement('span');\n    badge.className = 'type-badge';\n    badge.style.background = fill;\n    badge.style.color = '#0f172a';\n    badge.textContent = n.type;\n    heading.appendChild(badge);\n    tooltip.appendChild(heading);\n\n    if (deps.length) {\n      const label = document.createElement('div');\n      label.className = 'dep-section';\n      label.textContent = 'Depends on:';\n      tooltip.appendChild(label);\n      const ul = document.createElement('ul');\n      deps.forEach(d => { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); });\n      tooltip.appendChild(ul);\n    }\n    if (rdeps.length) {\n      const label = document.createElement('div');\n      label.className = 'dep-section';\n      label.textContent = 'Required by:';\n      tooltip.appendChild(label);\n      const ul = document.createElement('ul');\n      rdeps.forEach(d => { const li = document.createElement('li'); li.textContent = d; ul.appendChild(li); });\n      tooltip.appendChild(ul);\n    }\n    if (!deps.length && !rdeps.length) {\n      const empty = document.createElement('div');\n      empty.style.marginTop = '6px';\n      empty.style.color = '#64748b';\n      empty.textContent = 'No dependencies';\n      tooltip.appendChild(empty);\n    }\n\n    tooltip.style.display = 'block';\n    const rect = tooltip.getBoundingClientRect();\n    tooltip.style.left = Math.min(ev.clientX + 12, W - rect.width - 12) + 'px';\n    tooltip.style.top = Math.min(ev.clientY + 12, H - rect.height - 12) + 'px';\n  });\n  g.addEventListener('mouseleave', () => { tooltip.style.display = 'none'; });\n  svg.appendChild(g);\n});\n<\/script>\n</body>\n</html>"])), graphData.apps, graphData.libs, graphData.edges.length, JSON.stringify(graphData).replaceAll("</", String.raw`<\/`));
+};
+const execute = async ({ logger, options, visConfig, workspaceRoot: wsRoot }) => {
+  if (!wsRoot) {
+    throw new Error("Could not determine workspace root. Run this command inside a monorepo.");
+  }
+  const workspaceRoot = wsRoot;
+  const { packageJsons, workspace } = discoverWorkspace(workspaceRoot, visConfig);
+  const projectGraph = buildProjectGraph(workspaceRoot, workspace, packageJsons);
+  const isTTY = Boolean(process.stdout.isTTY) && !isInCi;
+  const format = options.format ?? (isTTY ? "tui" : "ascii");
+  const outputFile = options.output;
+  const maxDepth = options.depth ?? Infinity;
+  let output;
+  switch (format) {
+    case "dot": {
+      output = projectGraphToDot(projectGraph);
+      break;
+    }
+    case "html": {
+      output = projectGraphToHtml(projectGraph);
+      break;
+    }
+    case "json": {
+      output = JSON.stringify(projectGraphToJson(projectGraph), void 0, 2);
+      break;
+    }
+    case "tui": {
+      if (!isTTY) {
+        output = projectGraphToAscii(projectGraph, maxDepth);
+        break;
+      }
+      const autoExitSeconds = visConfig?.tui?.autoExit === true ? 3 : typeof visConfig?.tui?.autoExit === "number" ? visConfig.tui.autoExit : 0;
+      if (process.stdin.isTTY && typeof process.stdin.setRawMode === "function") {
+        process.stdin.setRawMode(true);
+        process.stdin.ref();
+        process.stdin.resume();
+      }
+      const keepAlive = setInterval(() => {
+      }, 1e3);
+      const store = new GraphStore(projectGraph);
+      const instance = render(React.createElement(VisGraphApp, { autoExitSeconds, store }), {
+        alternateScreen: true,
+        exitOnCtrlC: false,
+        interactive: true,
+        patchConsole: true
+      });
+      await instance.waitUntilExit();
+      clearInterval(keepAlive);
+      return;
+    }
+    default: {
+      output = projectGraphToAscii(projectGraph, maxDepth);
+    }
+  }
+  if (outputFile) {
+    writeFileSync(outputFile, output, "utf8");
+    logger.info(`Graph written to ${outputFile}`);
+  } else {
+    logger.info(output);
+  }
+};
+
+export { execute as default };