npm - @psnext/lscg - Versions diffs - 0.1.1 → 0.1.3 - Mend

@psnext/lscg 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/README.md +69 -3
package/dist/src/cli.js +68 -13
package/dist/src/graph/repository.d.ts +4 -1
package/dist/src/graph/repository.js +106 -6
package/dist/src/index.d.ts +3 -0
package/dist/src/index.js +2 -0
package/dist/src/mcp/server.js +2 -2
package/dist/src/scanner/discover.js +0 -2
package/dist/src/scanner/packagePlugin.d.ts +3 -0
package/dist/src/scanner/packagePlugin.js +125 -0
package/dist/src/scanner/plugins.d.ts +86 -0
package/dist/src/scanner/plugins.js +503 -0
package/dist/src/storage/connection.d.ts +6 -0
package/dist/src/storage/connection.js +133 -0
package/dist/src/storage/context-queries.d.ts +20 -0
package/dist/src/storage/context-queries.js +137 -0
package/dist/src/storage/database.d.ts +12 -71
package/dist/src/storage/database.js +12 -562
package/dist/src/storage/graph-writes.d.ts +17 -0
package/dist/src/storage/graph-writes.js +126 -0
package/dist/src/storage/plugin-contributions.d.ts +15 -0
package/dist/src/storage/plugin-contributions.js +28 -0
package/dist/src/storage/plugin-graph.d.ts +6 -0
package/dist/src/storage/plugin-graph.js +81 -0
package/dist/src/storage/queries.d.ts +25 -0
package/dist/src/storage/queries.js +129 -0
package/dist/src/storage/row-decoders.d.ts +8 -0
package/dist/src/storage/row-decoders.js +37 -0
package/dist/src/storage/schema.d.ts +2 -2
package/dist/src/storage/schema.js +13 -2
package/dist/src/storage/traversal-queries.d.ts +15 -0
package/dist/src/storage/traversal-queries.js +87 -0
package/dist/src/types.d.ts +10 -4
package/dist/src/view/index.d.ts +1 -1
package/dist/src/view/index.js +2 -2
package/dist/src/view/model.d.ts +2 -0
package/dist/src/view/render.d.ts +5 -2
package/dist/src/view/render.js +81 -13
package/dist/src/view/templates/icons/call.svg +11 -0
package/dist/src/view/templates/icons/export.svg +1 -0
package/dist/src/view/templates/icons/file.svg +9 -0
package/dist/src/view/templates/icons/import.svg +1 -0
package/dist/src/view/templates/icons/package.svg +1 -0
package/dist/src/view/templates/icons/symbol.svg +7 -0
package/dist/src/view/templates/icons/user.svg +15 -0
package/dist/src/view/templates/interactive.css +272 -0
package/dist/src/view/templates/interactive.html +642 -0
package/package.json +2 -1

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

@@ -0,0 +1,642 @@
+<!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">Node display</span>
+            <select id="display-select">
+              <option value="simple">Simple</option>
+              <option value="shape">Shape</option>
+              <option value="icon">Icon</option>
+            </select>
+          </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}};
+      let display = data.display ?? 'shape';
+      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 displaySelect = document.getElementById('display-select');
+      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';
+        if (display === 'simple') {
+          group.append('circle')
+            .attr('class', 'node-shape node-shape--simple')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', Math.min(node.width, node.height) / 2)
+            .attr('fill', fill);
+          return;
+        }
+        if (display === 'icon') {
+          const icon = data.icons?.[node.kind];
+          if (!icon) throw new Error('Missing icon asset for ' + node.kind);
+          group.append('svg')
+            .attr('class', 'node-shape node-shape--icon')
+            .attr('x', -node.width / 2)
+            .attr('y', -node.height / 2)
+            .attr('width', node.width)
+            .attr('height', node.height)
+            .attr('viewBox', icon.viewBox)
+            .attr('color', fill)
+            .attr('aria-hidden', 'true')
+            .html(icon.markup);
+          return;
+        }
+        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 'package':
+            group.append('svg')
+              .attr('class', 'node-shape node-shape--package')
+              .attr('x', -node.width / 2)
+              .attr('y', -node.height / 2)
+              .attr('width', node.width)
+              .attr('height', node.height)
+              .attr('viewBox', '0 0 512 512')
+              .attr('aria-hidden', 'true')
+              .html('<polygon fill="#7E4F1F" points="511.516,107.105 511.788,107.036 264.065,31.004 0.479,106.898 0,106.759 0,411.849 238.676,480.721 238.676,480.159 238.888,480.996 512,412.125 512,107.036"/><polygon fill="#EDA637" points="264.065,31.004 0,107.036 238.676,175.907 511.788,107.036"/><polygon fill="#C27526" points="238.888,480.996 512,412.125 512,107.036 238.888,175.907"/><path fill="#FFEC99" d="M193.016 51.462 78.638 84.393l230.233 73.866v50.416c0 3.323 1.541 6.458 4.172 8.487 2.631 2.029 6.053 2.725 9.268 1.881l99.058-25.986c4.713-1.237 7.999-5.495 7.999-10.369v-54.816L193.016 51.462Z"/><path fill="#FFDC35" d="M486.158 374.572c0 6.29-4.278 11.775-10.378 13.307l-52.647 13.55c-2.779.698-5.736.663-8.41-.367-5.363-2.066-8.677-7.119-8.677-12.576V332.26c0-6.29 4.278-11.775 10.378-13.307l52.647-13.55c2.779-.698 5.736-.663 8.41.367 5.363 2.066 8.677 7.119 8.677 12.576v56.226Z"/><path fill="#FFDC35" d="M429.367 182.689c0 4.872-3.287 9.132-7.999 10.368l-99.058 25.986c-3.214.843-6.637.148-9.268-1.881-2.631-2.029-4.172-5.164-4.172-8.487v-50.416l120.497-30.386v54.816Z"/><path fill="#DF7400" d="m186.692 292.407-40.804-11.978c-5.273-1.548-8.895-6.385-8.895-11.881v-39.76c0-8.263 7.941-14.208 15.87-11.881l40.804 11.978c5.273 1.548 8.895 6.385 8.895 11.881v39.76c0 8.263-7.941 14.208-15.87 11.881Z"/>');
+            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', display === 'shape' && d.kind === 'file' ? 'middle' : 'hanging')
+          .attr('y', display === 'shape' && d.kind === 'file' ? 0 : (d.height / 2) + 14)
+          .text(d.label);
+        group.append('title').text(d.label);
+      });
+      function updateDisplay() {
+        nodes.each(function(d) {
+          const group = d3.select(this);
+          group.selectAll('.node-shape').remove();
+          appendNodeShape(group, d);
+          group.select('.node-label')
+            .attr('dominant-baseline', display === 'shape' && d.kind === 'file' ? 'middle' : 'hanging')
+            .attr('y', display === 'shape' && d.kind === 'file' ? 0 : (d.height / 2) + 14);
+        });
+      }
+      if (displaySelect instanceof HTMLSelectElement) {
+        displaySelect.value = display;
+      }
+      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(visibleNodeIds);
+      }
+      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(getVisibleSets().visibleNodeIds);
+      }
+      function zoomAll() {
+        focusMode = 'all';
+        applyState();
+      }
+      function zoomSelected() {
+        if (!anchorId) return;
+        focusMode = 'selected';
+        applyState();
+      }
+      function toggleFocus() {
+        if (!anchorId) return;
+        focusVisibleOnly = !focusVisibleOnly;
+        applyState();
+      }
+      function reframe(visibleNodeIds = allNodeIds) {
+        const selectedNode = anchorId ? nodesData.find((candidate) => candidate.id === anchorId) ?? null : null;
+        const { width: canvasWidth, height: canvasHeight } = canvasSize();
+        if (!focusVisibleOnly && 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;
+        }
+        const visibleNodes = nodesData.filter((node) => visibleNodeIds.has(node.id));
+        if (visibleNodes.length === 0) {
+          svg.call(zoom.transform, d3.zoomIdentity);
+          return;
+        }
+        const bounds = visibleNodes.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();
+        }
+      });
+      displaySelect?.addEventListener('change', (event) => {
+        const value = event.target instanceof HTMLSelectElement ? event.target.value : 'shape';
+        if (value !== 'simple' && value !== 'shape' && value !== 'icon') return;
+        display = value;
+        updateDisplay();
+      });
+      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(getVisibleSets().visibleNodeIds);
+      });
+      simulation.on('tick', ticked);
+      setSidebarCollapsed(false);
+      applyState();
+      simulation.alpha(1).restart();
+    </script>
+  </body>
+</html>`;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/lscg",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",