@psnext/lscg 0.1.1 → 0.1.2

package/dist/src/view/templates/interactive.css

@@ -0,0 +1,269 @@
+
+:root {
+  color-scheme: dark;
+  --bg: #020617;
+  --panel: rgba(15, 23, 42, 0.88);
+  --panel-border: rgba(148, 163, 184, 0.2);
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+}
+html, body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+#app {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+}
+.graph-panel {
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
+}
+.hud {
+  width: 320px;
+  flex: 0 0 320px;
+  box-sizing: border-box;
+  margin: 16px 16px 16px 0;
+  display: grid;
+  align-content: start;
+  gap: 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--panel-border);
+  border-radius: 16px;
+  background: var(--panel);
+  backdrop-filter: blur(16px);
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
+  overflow: auto;
+}
+.section {
+  display: grid;
+  gap: 8px;
+}
+.section-title {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.info-grid {
+  display: grid;
+  gap: 8px;
+  font-size: 13px;
+}
+.info-row {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 10px;
+}
+.info-label {
+  color: var(--muted);
+}
+.info-value {
+  overflow-wrap: anywhere;
+}
+.info-empty {
+  color: var(--muted);
+  font-size: 13px;
+}
+.zoom-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.zoom-action {
+  border: 1px solid var(--panel-border);
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.6);
+  color: var(--text);
+  padding: 8px 10px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.zoom-action:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.zoom-action.is-active {
+  border-color: rgba(148, 163, 184, 0.55);
+  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.12);
+}
+.hud h1 {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+}
+.hud p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+.hud input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--panel-border);
+  background: rgba(15, 23, 42, 0.6);
+  color: var(--text);
+  font: inherit;
+}
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.legend-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.legend-toggle.is-hidden {
+  opacity: 0.45;
+}
+.legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+.legend-icon {
+  width: 14px;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+.legend-icon svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.graph-panel svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.links {
+  z-index: 1;
+}
+.nodes {
+  z-index: 2;
+}
+.edge {
+  stroke: #64748b;
+  stroke-opacity: 0.5;
+  stroke-width: 1.3;
+}
+.edge--imports { stroke: #f59e0b; }
+.edge--exports { stroke: #a855f7; }
+.edge--calls { stroke: #fb7185; }
+.edge--defines { stroke: #22c55e; }
+.edge--contains { stroke: #38bdf8; }
+.node { cursor: grab; }
+.node:active { cursor: grabbing; }
+.node-shape {
+  stroke: rgba(226, 232, 240, 0.18);
+  stroke-width: 1.5;
+  shape-rendering: geometricPrecision;
+}
+.node-label {
+  fill: var(--text);
+  font-size: 11px;
+  font-weight: 600;
+  paint-order: stroke;
+  stroke: #020617;
+  stroke-width: 3px;
+  stroke-linejoin: round;
+  user-select: none;
+  pointer-events: none;
+}
+.node.is-highlighted .node-shape,
+.node.is-selected .node-shape {
+  stroke: white;
+  stroke-width: 2.5;
+}
+.node.is-hidden,
+.edge.is-hidden {
+  display: none;
+}
+.node.is-dimmed {
+  opacity: 0.18;
+}
+.edge.is-dimmed {
+  opacity: 0.12;
+}
+.edge.is-highlighted {
+  stroke-opacity: 0.25;
+  stroke-width: 2.1;
+}
+.status {
+  color: var(--muted);
+  font-size: 12px;
+}
+.tooltip {
+  position: fixed;
+  pointer-events: none;
+  z-index: 3;
+  display: none;
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--panel-border);
+  background: rgba(15, 23, 42, 0.96);
+  color: var(--text);
+  font-size: 12px;
+  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.4);
+}
+#app.sidebar-collapsed .hud {
+  width: 48px;
+  flex-basis: 48px;
+  padding: 12px 8px;
+}
+#app.sidebar-collapsed .hud > :not(.section--toggle) {
+  display: none;
+}
+#app.sidebar-collapsed .sidebar-toggle {
+  justify-content: center;
+  width: 100%;
+}
+.sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid var(--panel-border);
+  border-radius: 10px;
+  background: rgba(15, 23, 42, 0.6);
+  color: var(--text);
+  padding: 10px 12px;
+  font: inherit;
+  cursor: pointer;
+}
+.sidebar-toggle span {
+  color: var(--muted);
+  font-size: 12px;
+}
+.sidebar-toggle .icon {
+  font-size: 14px;
+  line-height: 1;
+}
+    

package/dist/src/view/templates/interactive.html

@@ -0,0 +1,572 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{GRAPH_TITLE}}</title>
+    <style>{{CSS}}</style>
+  </head>
+  <body>
+    <div id="app">
+      <div class="graph-panel">
+        <svg id="graph" aria-label="{{GRAPH_TITLE}}"></svg>
+      </div>
+      <aside class="hud" aria-label="Graph controls">
+        <div class="section section--toggle">
+          <button id="sidebar-toggle" class="sidebar-toggle" type="button" aria-expanded="true" aria-controls="sidebar-content">
+            <span>Controls</span>
+            <span class="icon" aria-hidden="true">⟨</span>
+          </button>
+        </div>
+        <div id="sidebar-content" class="section">
+          <h1>{{GRAPH_TITLE}}</h1>
+          <p id="subtitle">{{SUBTITLE}}</p>
+        </div>
+        <div class="section">
+          <label>
+            <span class="status">Filter nodes</span>
+            <input id="search" type="search" placeholder="Type to filter by label" autocomplete="off" value="{{SEARCH_TERM}}" />
+          </label>
+        </div>
+        <div class="section">
+          <label>
+            <span class="status">View box zoom</span>
+            <input id="zoom" type="range" min="0.25" max="2.5" step="0.05" value="1" />
+          </label>
+          <div id="zoom-value" class="info-empty">1×</div>
+          <div class="zoom-actions">
+            <button id="zoom-all" class="zoom-action" type="button">Zoom all</button>
+            <button id="zoom-selected" class="zoom-action" type="button">Zoom selected</button>
+            <button id="focus-toggle" class="zoom-action" type="button" aria-pressed="false">Focus</button>
+          </div>
+        </div>
+        <div class="section">
+          <h2 class="section-title">Selected node</h2>
+          <div id="node-info" class="info-grid">
+            <div class="info-empty">Click a node to inspect it.</div>
+          </div>
+        </div>
+        <div class="section">
+          <h2 class="section-title">Legend</h2>
+          <div id="legend" class="legend">{{LEGEND_ITEMS}}</div>
+        </div>
+      </aside>
+      <div id="tooltip" class="tooltip"></div>
+    </div>
+    <script type="module">
+      import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@7/+esm';
+
+      const data = {{DATA}};
+      const app = document.getElementById('app');
+      const svg = d3.select('#graph');
+      const graphPanel = document.querySelector('.graph-panel');
+      const tooltip = document.getElementById('tooltip');
+      const searchInput = document.getElementById('search');
+      const zoomInput = document.getElementById('zoom');
+      const zoomValue = document.getElementById('zoom-value');
+      const zoomAllButton = document.getElementById('zoom-all');
+      const zoomSelectedButton = document.getElementById('zoom-selected');
+      const focusButton = document.getElementById('focus-toggle');
+      const subtitle = document.getElementById('subtitle');
+      const nodeInfo = document.getElementById('node-info');
+      const sidebarToggle = document.getElementById('sidebar-toggle');
+      const legend = document.getElementById('legend');
+      const fitPadding = 72;
+      const focusScale = 1.2;
+      let zoomFactor = Number(zoomInput instanceof HTMLInputElement ? zoomInput.value : 1) || 1;
+      function canvasSize() {
+        return {
+          width: graphPanel?.clientWidth ?? window.innerWidth,
+          height: graphPanel?.clientHeight ?? window.innerHeight
+        };
+      }
+      const { width, height } = canvasSize();
+      const nodesData = data.nodes.map((node) => ({ ...node }));
+      const linksData = data.edges.map((edge) => ({ ...edge }));
+      const nodeById = new Map(nodesData.map((node) => [node.id, node]));
+      const allNodeIds = new Set(nodesData.map((node) => node.id));
+      const hiddenKinds = new Set();
+      let anchorId = data.anchorNodeId ?? null;
+      let filterText = data.search ?? '';
+      let sidebarCollapsed = false;
+      let focusMode = anchorId ? 'selected' : 'all';
+      let focusVisibleOnly = false;
+
+      svg.attr('viewBox', [0, 0, width, height]).attr('preserveAspectRatio', 'xMidYMid meet');
+
+      const defs = svg.append('defs');
+      defs.append('marker')
+        .attr('id', 'arrow')
+        .attr('viewBox', '0 0 10 10')
+        .attr('refX', 7.5)
+        .attr('refY', 5)
+        .attr('markerWidth', 6)
+        .attr('markerHeight', 6)
+        .attr('orient', 'auto-start-reverse')
+        .append('path')
+        .attr('d', 'M 0 0 L 10 5 L 0 10 z')
+        .attr('fill', '#94a3b8');
+
+      const root = svg.append('g');
+      const zoomLayer = root.append('g');
+      const linkLayer = zoomLayer.append('g').attr('class', 'links');
+      const nodeLayer = zoomLayer.append('g').attr('class', 'nodes');
+
+      function appendNodeShape(group, node) {
+        const fill = node.color ?? '#94a3b8';
+        switch (node.shape) {
+          case 'rounded-rect':
+            group.append('rect')
+              .attr('class', 'node-shape node-shape--rounded-rect')
+              .attr('x', -node.width / 2)
+              .attr('y', -node.height / 2)
+              .attr('width', node.width)
+              .attr('height', node.height)
+              .attr('rx', 10)
+              .attr('ry', 10)
+              .attr('fill', fill);
+            break;
+          case 'box':
+            group.append('rect')
+              .attr('class', 'node-shape node-shape--box')
+              .attr('x', -node.width / 2)
+              .attr('y', -node.height / 2)
+              .attr('width', node.width)
+              .attr('height', node.height)
+              .attr('rx', 4)
+              .attr('ry', 4)
+              .attr('fill', fill);
+            break;
+          case 'ellipse':
+            group.append('ellipse')
+              .attr('class', 'node-shape node-shape--ellipse')
+              .attr('cx', 0)
+              .attr('cy', 0)
+              .attr('rx', node.width / 2)
+              .attr('ry', node.height / 2)
+              .attr('fill', fill);
+            break;
+          case 'diamond':
+          case 'hexagon':
+            group.append('polygon')
+              .attr('class', 'node-shape node-shape--' + node.shape)
+              .attr('points', node.shape === 'diamond'
+                ? '0,' + (-node.height / 2) + ' ' + (node.width / 2) + ',0 ' + '0,' + (node.height / 2) + ' ' + (-node.width / 2) + ',0'
+                : (-node.width / 2 + node.height / 4) + ',' + (-node.height / 2) + ' ' + (node.width / 2 - node.height / 4) + ',' + (-node.height / 2) + ' ' + (node.width / 2) + ',0 ' + (node.width / 2 - node.height / 4) + ',' + (node.height / 2) + ' ' + (-node.width / 2 + node.height / 4) + ',' + (node.height / 2) + ' ' + (-node.width / 2) + ',0')
+              .attr('fill', fill);
+            break;
+          case 'user':
+            const userIcon = group.append('svg')
+              .attr('class', 'node-shape node-shape--user')
+              .attr('x', -12)
+              .attr('y', -12)
+              .attr('width', 24)
+              .attr('height', 24)
+              .attr('viewBox', '0 0 24 24')
+              .attr('fill', 'none')
+              .attr('stroke', fill)
+              .attr('stroke-width', 1.5)
+              .attr('stroke-linecap', 'round')
+              .attr('stroke-linejoin', 'round');
+            userIcon.append('circle').attr('cx', 12).attr('cy', 9).attr('r', 3);
+            userIcon.append('circle').attr('cx', 12).attr('cy', 12).attr('r', 10);
+            userIcon.append('path').attr('d', 'M17.9691 20C17.81 17.1085 16.9247 15 11.9999 15C7.07521 15 6.18991 17.1085 6.03076 20');
+            break;
+          default:
+            group.append('rect')
+              .attr('class', 'node-shape')
+              .attr('x', -node.width / 2)
+              .attr('y', -node.height / 2)
+              .attr('width', node.width)
+              .attr('height', node.height)
+              .attr('rx', 6)
+              .attr('ry', 6)
+              .attr('fill', fill);
+        }
+      }
+
+      const simulation = d3.forceSimulation(nodesData)
+        .force('link', d3.forceLink(linksData).id((d) => d.id).distance((edge) => edge.kind === 'contains' ? 42 : 120).strength((edge) => edge.kind === 'contains' ? 0.6 : 0.18))
+        .force('charge', d3.forceManyBody().strength((node) => node.kind === 'file' ? -420 : -220))
+        .force('center', d3.forceCenter(width / 2, height / 2))
+        .force('collide', d3.forceCollide().radius((node) => (node.presentationRadius ?? 24)))
+        .force('x', d3.forceX(width / 2).strength(0.05))
+        .force('y', d3.forceY(height / 2).strength(0.05));
+
+      const links = linkLayer.selectAll('line')
+        .data(linksData)
+        .join('line')
+        .attr('class', (d) => 'edge edge--' + d.kind)
+        .attr('marker-end', 'url(#arrow)');
+
+      const nodes = nodeLayer.selectAll('g')
+        .data(nodesData)
+        .join('g')
+        .attr('class', (d) => 'node node--' + d.kind)
+        .call(drag(simulation));
+
+      nodeLayer.raise();
+
+      nodes.each(function(d) {
+        const group = d3.select(this);
+        appendNodeShape(group, d);
+        group.append('text')
+          .attr('class', 'node-label')
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', d.kind === 'file' ? 'middle' : 'hanging')
+          .attr('y', d.kind === 'file' ? 0 : (d.height / 2) + 14)
+          .text(d.label);
+        group.append('title').text(d.label);
+      });
+
+      const zoom = d3.zoom().scaleExtent([0.2, 4]).on('zoom', (event) => {
+        zoomLayer.attr('transform', event.transform);
+      });
+
+      svg.call(zoom);
+
+      function toggleKind(kind) {
+        if (hiddenKinds.has(kind)) {
+          hiddenKinds.delete(kind);
+        } else {
+          hiddenKinds.add(kind);
+        }
+        applyState();
+      }
+
+      function updateZoomState() {
+        if (zoomValue) {
+          zoomValue.textContent = formatZoom(zoomFactor) + '×';
+        }
+        if (zoomAllButton instanceof HTMLButtonElement) {
+          zoomAllButton.classList.toggle('is-active', focusMode === 'all');
+        }
+        if (zoomSelectedButton instanceof HTMLButtonElement) {
+          zoomSelectedButton.classList.toggle('is-active', focusMode === 'selected');
+          zoomSelectedButton.disabled = !anchorId;
+        }
+        if (focusButton instanceof HTMLButtonElement) {
+          focusButton.classList.toggle('is-active', focusVisibleOnly && Boolean(anchorId));
+          focusButton.setAttribute('aria-pressed', String(focusVisibleOnly && Boolean(anchorId)));
+          focusButton.disabled = !anchorId;
+        }
+      }
+
+      function updateLegendState() {
+        if (!legend) return;
+        for (const button of legend.querySelectorAll('[data-kind-toggle]')) {
+          const kind = button.getAttribute('data-kind-toggle');
+          const hidden = kind ? hiddenKinds.has(kind) : false;
+          button.classList.toggle('is-hidden', hidden);
+          button.setAttribute('aria-pressed', String(!hidden));
+        }
+      }
+
+      function formatZoom(value) {
+        return Number(value.toFixed(2)).toString().replace(/\.00$/, '');
+      }
+
+      function getVisibleSets() {
+        const query = filterText.trim().toLowerCase();
+        const matchingNodeIds = new Set(
+          nodesData
+            .filter((node) => !query || node.label.toLowerCase().includes(query))
+            .filter((node) => !hiddenKinds.has(node.kind))
+            .map((node) => node.id)
+        );
+
+        if (focusVisibleOnly && anchorId) {
+          const neighborhood = data.fullNeighborhoods && data.fullNeighborhoods[anchorId] ? data.fullNeighborhoods[anchorId] : { nodeIds: [anchorId], edgeIds: [] };
+          const visibleNodeIds = new Set(neighborhood.nodeIds.filter((nodeId) => matchingNodeIds.has(nodeId)));
+          const visibleEdgeIds = new Set(
+            linksData
+              .filter((edge) => visibleNodeIds.has(edgeEndpointId(edge.source)) && visibleNodeIds.has(edgeEndpointId(edge.target)))
+              .map((edge) => edge.id)
+          );
+          return { visibleNodeIds, visibleEdgeIds };
+        }
+
+        const visibleNodeIds = new Set([...allNodeIds].filter((nodeId) => matchingNodeIds.has(nodeId)));
+        const visibleEdgeIds = new Set(
+          linksData
+            .filter((edge) => visibleNodeIds.has(edgeEndpointId(edge.source)) && visibleNodeIds.has(edgeEndpointId(edge.target)))
+            .map((edge) => edge.id)
+        );
+        return { visibleNodeIds, visibleEdgeIds };
+      }
+
+      function edgeEndpointId(endpoint) {
+        return typeof endpoint === 'string' ? endpoint : endpoint?.id;
+      }
+
+      function updateStatus() {
+        if (anchorId && focusVisibleOnly) {
+          subtitle.textContent = 'Focus on ' + (nodeById.get(anchorId)?.label ?? anchorId);
+          return;
+        }
+
+        subtitle.textContent = anchorId
+          ? 'Selected ' + (nodeById.get(anchorId)?.label ?? anchorId)
+          : 'Showing entire graph';
+      }
+
+      function updateInfo() {
+        if (!nodeInfo) return;
+        const node = anchorId ? nodeById.get(anchorId) ?? null : null;
+        nodeInfo.replaceChildren();
+
+        if (!node) {
+          const empty = document.createElement('div');
+          empty.className = 'info-empty';
+          empty.textContent = 'Click a node to inspect it.';
+          nodeInfo.append(empty);
+          return;
+        }
+
+        const rows = [
+          ['Label', node.label],
+          ['Kind', node.kind],
+          ['Type', node.type],
+          ['Degree', String(node.degree)],
+          ['ID', node.id]
+        ];
+
+        for (const [label, value] of rows) {
+          const row = document.createElement('div');
+          row.className = 'info-row';
+
+          const key = document.createElement('div');
+          key.className = 'info-label';
+          key.textContent = label;
+
+          const val = document.createElement('div');
+          val.className = 'info-value';
+          val.textContent = value;
+
+          row.append(key, val);
+          nodeInfo.append(row);
+        }
+      }
+
+      function applyState() {
+        const visibleSets = getVisibleSets();
+        const visibleNodeIds = visibleSets.visibleNodeIds;
+        const visibleEdgeIds = visibleSets.visibleEdgeIds;
+        const activeAnchorVisible = Boolean(anchorId && visibleNodeIds.has(anchorId));
+
+        nodes
+          .classed('is-hidden', (node) => !visibleNodeIds.has(node.id))
+          .classed('is-dimmed', (node) => !focusVisibleOnly && anchorId ? !visibleNodeIds.has(node.id) : false)
+          .classed('is-selected', (node) => anchorId === node.id)
+          .classed('is-highlighted', (node) => activeAnchorVisible && visibleNodeIds.has(node.id));
+
+        links
+          .classed('is-hidden', (edge) => !visibleEdgeIds.has(edge.id))
+          .classed('is-dimmed', (edge) => !focusVisibleOnly && anchorId ? !visibleEdgeIds.has(edge.id) : false)
+          .classed('is-highlighted', (edge) => visibleEdgeIds.has(edge.id));
+
+        updateStatus();
+        updateInfo();
+        updateZoomState();
+        updateLegendState();
+        reframe();
+      }
+
+      function setAnchor(nodeId) {
+        anchorId = anchorId === nodeId ? null : nodeId;
+        if (!anchorId) {
+          focusVisibleOnly = false;
+        }
+        focusMode = anchorId ? 'selected' : 'all';
+        applyState();
+      }
+
+      function setSidebarCollapsed(nextCollapsed) {
+        sidebarCollapsed = nextCollapsed;
+        app.classList.toggle('sidebar-collapsed', sidebarCollapsed);
+        if (sidebarToggle) {
+          sidebarToggle.setAttribute('aria-expanded', String(!sidebarCollapsed));
+          const icon = sidebarToggle.querySelector('.icon');
+          if (icon) icon.textContent = sidebarCollapsed ? '⟩' : '⟨';
+          sidebarToggle.title = sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar';
+        }
+        const nextSize = canvasSize();
+        svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
+        reframe();
+      }
+
+      function zoomAll() {
+        focusMode = 'all';
+        applyState();
+      }
+
+      function zoomSelected() {
+        if (!anchorId) return;
+        focusMode = 'selected';
+        applyState();
+      }
+
+      function toggleFocus() {
+        if (!anchorId) return;
+        focusVisibleOnly = !focusVisibleOnly;
+        applyState();
+      }
+
+      function reframe() {
+        const selectedNode = anchorId ? nodesData.find((candidate) => candidate.id === anchorId) ?? null : null;
+        const { width: canvasWidth, height: canvasHeight } = canvasSize();
+
+        if (focusMode === 'selected' && selectedNode) {
+          const transform = d3.zoomIdentity
+            .translate(canvasWidth / 2, canvasHeight / 2)
+            .scale(focusScale / zoomFactor)
+            .translate(-selectedNode.x, -selectedNode.y);
+          svg.call(zoom.transform, transform);
+          return;
+        }
+
+        if (nodesData.length === 0) {
+          svg.call(zoom.transform, d3.zoomIdentity);
+          return;
+        }
+
+        const bounds = nodesData.reduce((acc, current) => ({
+          minX: Math.min(acc.minX, current.x),
+          maxX: Math.max(acc.maxX, current.x),
+          minY: Math.min(acc.minY, current.y),
+          maxY: Math.max(acc.maxY, current.y)
+        }), { minX: Number.POSITIVE_INFINITY, maxX: Number.NEGATIVE_INFINITY, minY: Number.POSITIVE_INFINITY, maxY: Number.NEGATIVE_INFINITY });
+
+        const boundedWidth = Math.max(bounds.maxX - bounds.minX, 1);
+        const boundedHeight = Math.max(bounds.maxY - bounds.minY, 1);
+        const baseScale = Math.min(
+          4,
+          Math.max(
+            0.2,
+            Math.min((canvasWidth - fitPadding * 2) / boundedWidth, (canvasHeight - fitPadding * 2) / boundedHeight)
+          )
+        );
+        const scale = baseScale / zoomFactor;
+        const centerX = (bounds.minX + bounds.maxX) / 2;
+        const centerY = (bounds.minY + bounds.maxY) / 2;
+        const transform = d3.zoomIdentity
+          .translate(canvasWidth / 2, canvasHeight / 2)
+          .scale(scale)
+          .translate(-centerX, -centerY);
+
+        svg.call(zoom.transform, transform);
+      }
+
+      function drag(sim) {
+        function dragstarted(event) {
+          if (!event.active) sim.alphaTarget(0.3).restart();
+          event.subject.fx = event.subject.x;
+          event.subject.fy = event.subject.y;
+        }
+
+        function dragged(event) {
+          event.subject.fx = event.x;
+          event.subject.fy = event.y;
+        }
+
+        function dragended(event) {
+          if (!event.active) sim.alphaTarget(0);
+          event.subject.fx = null;
+          event.subject.fy = null;
+        }
+
+        return d3.drag()
+          .on('start', dragstarted)
+          .on('drag', dragged)
+          .on('end', dragended);
+      }
+
+      function ticked() {
+        links
+          .attr('x1', (d) => d.source.x)
+          .attr('y1', (d) => d.source.y)
+          .attr('x2', (d) => d.target.x)
+          .attr('y2', (d) => d.target.y);
+
+        nodes.attr('transform', (d) => 'translate(' + d.x + ',' + d.y + ')');
+      }
+
+      nodes
+        .on('click', (event, node) => {
+          event.stopPropagation();
+          setAnchor(node.id);
+        })
+        .on('mouseenter', function(event, node) {
+          if (!tooltip) return;
+          tooltip.style.display = 'block';
+          tooltip.textContent = node.label + ' · ' + node.kind;
+        })
+        .on('mousemove', function(event) {
+          if (!tooltip) return;
+          tooltip.style.left = event.clientX + 14 + 'px';
+          tooltip.style.top = event.clientY + 14 + 'px';
+        })
+        .on('mouseleave', function() {
+          if (!tooltip) return;
+          tooltip.style.display = 'none';
+        });
+
+      svg.on('click', (event) => {
+        if (event.target === svg.node()) {
+          anchorId = null;
+          focusMode = 'all';
+          applyState();
+        }
+      });
+
+      searchInput.value = filterText;
+      searchInput.addEventListener('input', (event) => {
+        filterText = event.target.value;
+        applyState();
+      });
+
+      zoomInput?.addEventListener('input', (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) return;
+        zoomFactor = Number(target.value) || 1;
+        applyState();
+      });
+
+      zoomAllButton?.addEventListener('click', () => {
+        zoomAll();
+      });
+
+      zoomSelectedButton?.addEventListener('click', () => {
+        zoomSelected();
+      });
+
+      focusButton?.addEventListener('click', () => {
+        toggleFocus();
+      });
+
+      legend?.addEventListener('click', (event) => {
+        const target = event.target instanceof Element ? event.target.closest('[data-kind-toggle]') : null;
+        if (!target) return;
+        const kind = target.getAttribute('data-kind-toggle');
+        if (!kind) return;
+        toggleKind(kind);
+      });
+
+      sidebarToggle?.addEventListener('click', () => {
+        setSidebarCollapsed(!sidebarCollapsed);
+      });
+
+      window.addEventListener('resize', () => {
+        if (!graphPanel) return;
+        const nextSize = canvasSize();
+        svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
+        reframe();
+      });
+
+      simulation.on('tick', ticked);
+      setSidebarCollapsed(false);
+      applyState();
+      simulation.alpha(1).restart();
+    </script>
+  </body>
+</html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/lscg",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Local source context graphs for repositories, exposed as a CLI and MCP server.",
   "type": "module",
   "bin": {
@@ -17,6 +17,7 @@
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "postbuild": "mkdir -p ./dist/src/view/templates && cp -r ./src/view/templates/* ./dist/src/view/templates",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "prepare": "npm run build",
     "prestart": "npm run build",