@psnext/lscg 0.1.1 → 0.1.3

package/dist/src/view/index.d.ts

@@ -21,7 +21,7 @@ export interface ViewRunDependencies {
 }
 export declare function viewGraph(options?: ViewCommandOptions, dependencies?: ViewRunDependencies): Promise<ViewRunResult>;
 export { buildViewModel, loadViewSnapshot } from './model.js';
-export type { ViewSnapshot, ViewNode, ViewEdge, ViewBox, ViewModel } from './model.js';
+export type { DisplayMode, ViewSnapshot, ViewNode, ViewEdge, ViewBox, ViewModel } from './model.js';
 export { renderInteractiveHtml, renderSvgMarkup, writeSvgSnapshot } from './render.js';
 export { openHtmlArtifactInBrowser, openInDefaultBrowser, writeTemporaryHtmlArtifact } from './open.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/view/index.js

@@ -7,7 +7,7 @@ export async function viewGraph(options = {}, dependencies = {}) {
     const snapshot = loadViewSnapshot(options);
     const model = buildViewModel(snapshot, options);
     if (options.output) {
-        const svg = renderSvgMarkup(model, { includeHiddenNodes: false, interactive: false });
+        const svg = renderSvgMarkup(model, { includeHiddenNodes: false, interactive: false, display: options.display });
         mkdirSync(path.dirname(options.output), { recursive: true });
         writeSvgSnapshot(options.output, svg);
         return {
@@ -21,7 +21,7 @@ export async function viewGraph(options = {}, dependencies = {}) {
             edgeCount: model.edges.length
         };
     }
-    const html = renderInteractiveHtml(model);
+    const html = renderInteractiveHtml(model, { display: options.display });
     const opened = openHtmlArtifactInBrowser(html, dependencies.opener);
     return {
         mode: 'interactive',

package/dist/src/view/model.d.ts

@@ -43,11 +43,13 @@ export interface ViewModel extends ViewSnapshot {
     graphBounds: LayoutBounds;
     startWithFullGraph: boolean;
 }
+export type DisplayMode = 'simple' | 'shape' | 'icon';
 export interface ViewModelOptions {
     root?: string | undefined;
     scope?: StorageScope | 'both' | undefined;
     anchor?: string | undefined;
     search?: string | undefined;
+    display?: DisplayMode | undefined;
 }
 export declare function loadViewSnapshot({ root, scope }?: ViewModelOptions): ViewSnapshot;
 export declare function buildViewModel(snapshot: ViewSnapshot, { anchor, search }?: ViewModelOptions): ViewModel;

package/dist/src/view/render.d.ts

@@ -1,9 +1,12 @@
-import type { ViewModel } from './model.js';
+import type { DisplayMode, ViewModel } from './model.js';
 export interface RenderSvgOptions {
     includeHiddenNodes?: boolean | undefined;
     interactive?: boolean | undefined;
+    display?: DisplayMode | undefined;
 }
 export declare function renderSvgMarkup(model: ViewModel, options?: RenderSvgOptions): string;
-export declare function renderInteractiveHtml(model: ViewModel): string;
+export declare function renderInteractiveHtml(model: ViewModel, options?: {
+    display?: DisplayMode | undefined;
+}): string;
 export declare function writeSvgSnapshot(filePath: string, svgMarkup: string): void;
 //# sourceMappingURL=render.d.ts.map

package/dist/src/view/render.js

@@ -15,6 +15,8 @@ export function renderSvgMarkup(model, options = {}) {
     const graphLabel = `${model.repository.name} store graph`;
     const title = options.includeHiddenNodes ? `${graphLabel} · full graph` : graphLabel;
     const mode = options.interactive ? 'interactive' : 'snapshot';
+    const display = options.display ?? 'shape';
+    const icons = display === 'icon' ? loadIconAssets() : null;
     const renderedEdges = edges
         .map((edge) => {
         const source = nodes.find((node) => node.id === edge.sourceId);
@@ -28,10 +30,10 @@ export function renderSvgMarkup(model, options = {}) {
     const renderedNodes = nodes
         .map((node) => {
         const presentation = nodePresentation(node);
-        const labelY = node.kind === 'file' ? 0 : presentation.height / 2 + 14;
+        const labelY = display === 'shape' && node.kind === 'file' ? 0 : presentation.height / 2 + 14;
         return `
       <g class="node node--${escapeHtml(node.kind)}" data-node-id="${escapeHtml(node.id)}" data-node-kind="${escapeHtml(node.kind)}" data-node-shape="${escapeHtml(presentation.shape)}" transform="translate(${formatNumber(node.x)},${formatNumber(node.y)})">
-        ${renderNodeShapeMarkup(node, presentation)}
+        ${renderNodeShapeMarkup(node, presentation, display, icons)}
         <text class="node-label" text-anchor="middle" dominant-baseline="${node.kind === 'file' ? 'middle' : 'hanging'}" y="${formatNumber(labelY)}">${escapeHtml(node.label)}</text>
         <title>${escapeHtml(node.label)} (${escapeHtml(node.id)})</title>
       </g>`;
@@ -70,8 +72,8 @@ export function renderSvgMarkup(model, options = {}) {
 }
 const interactiveHtmlTemplate = loadTemplateAsset('interactive.html');
 const interactiveCss = loadTemplateAsset('interactive.css');
-export function renderInteractiveHtml(model) {
-    const data = serializeInteractiveGraph(model);
+export function renderInteractiveHtml(model, options = {}) {
+    const data = serializeInteractiveGraph(model, options.display ?? 'shape');
     const graphTitle = `${model.repository.name} store graph`;
     const subtitle = model.anchorNodeId
         ? `Anchored on ${model.nodes.find((node) => node.id === model.anchorNodeId)?.label ?? model.anchorNodeId}`
@@ -103,8 +105,19 @@ export function writeSvgSnapshot(filePath, svgMarkup) {
     mkdirSync(path.dirname(filePath), { recursive: true });
     writeFileSync(filePath, svgMarkup, 'utf8');
 }
-function serializeInteractiveGraph(model) {
-    const nodes = model.fullNodes.map((node) => {
+function serializeInteractiveGraph(model, display) {
+    const serializedGraph = model.anchorNodeId
+        ? downstreamGraph(model.fullNodes, model.fullEdges, model.anchorNodeId)
+        : { nodes: model.fullNodes, edges: model.fullEdges };
+    const serializedNodeIds = new Set(serializedGraph.nodes.map((node) => node.id));
+    const serializedEdgeIds = new Set(serializedGraph.edges.map((edge) => edge.id));
+    const neighborhoods = Object.fromEntries(Object.entries(model.fullNeighborhoods)
+        .filter(([nodeId]) => serializedNodeIds.has(nodeId))
+        .map(([nodeId, neighborhood]) => [nodeId, {
+            nodeIds: neighborhood.nodeIds.filter((id) => serializedNodeIds.has(id)),
+            edgeIds: neighborhood.edgeIds.filter((id) => serializedEdgeIds.has(id))
+        }]));
+    const nodes = serializedGraph.nodes.map((node) => {
         const presentation = nodePresentation(node);
         return {
             id: node.id,
@@ -122,7 +135,7 @@ function serializeInteractiveGraph(model) {
             presentationRadius: presentation.presentationRadius
         };
     });
-    const edges = model.fullEdges.map((edge) => ({
+    const edges = serializedGraph.edges.map((edge) => ({
         id: edge.id,
         kind: edge.kind,
         source: edge.sourceId,
@@ -135,12 +148,56 @@ function serializeInteractiveGraph(model) {
         scope: model.scope,
         search: model.search,
         anchorNodeId: model.anchorNodeId,
-        fullNeighborhoods: model.fullNeighborhoods,
+        display,
+        icons: loadIconAssets(),
+        fullNeighborhoods: neighborhoods,
         nodes,
         edges
     }));
 }
-function renderNodeShapeMarkup(node, presentation) {
+function downstreamGraph(nodes, edges, anchorNodeId) {
+    const downstreamByNodeId = new Map();
+    for (const edge of edges) {
+        const downstream = downstreamByNodeId.get(edge.sourceId) ?? [];
+        downstream.push(edge.targetId);
+        downstreamByNodeId.set(edge.sourceId, downstream);
+    }
+    const selectedNodeIds = new Set([anchorNodeId]);
+    const queue = [anchorNodeId];
+    for (let index = 0; index < queue.length; index += 1) {
+        const nodeId = queue[index];
+        for (const downstreamNodeId of downstreamByNodeId.get(nodeId) ?? []) {
+            if (selectedNodeIds.has(downstreamNodeId))
+                continue;
+            selectedNodeIds.add(downstreamNodeId);
+            queue.push(downstreamNodeId);
+        }
+    }
+    return {
+        nodes: nodes.filter((node) => selectedNodeIds.has(node.id)),
+        edges: edges.filter((edge) => selectedNodeIds.has(edge.sourceId) && selectedNodeIds.has(edge.targetId))
+    };
+}
+const iconKinds = ['file', 'symbol', 'import', 'export', 'call', 'user', 'package'];
+function loadIconAssets() {
+    return Object.fromEntries(iconKinds.map((kind) => {
+        const source = loadTemplateAsset(`icons/${kind}.svg`);
+        const match = source.match(/<svg[^>]*viewBox="([^"]+)"[^>]*>([\s\S]*)<\/svg>/);
+        if (!match)
+            throw new Error(`Invalid icon asset for ${kind}`);
+        return [kind, { viewBox: match[1], markup: match[2] }];
+    }));
+}
+function renderNodeShapeMarkup(node, presentation, display, icons) {
+    if (display === 'simple') {
+        return `<circle class="node-shape node-shape--simple" cx="0" cy="0" r="${formatNumber(Math.min(presentation.width, presentation.height) / 2)}" fill="${colorForKind(node.kind)}" />`;
+    }
+    if (display === 'icon') {
+        const icon = icons?.[node.kind];
+        if (!icon)
+            throw new Error(`Missing icon asset for ${node.kind}`);
+        return `<svg class="node-shape node-shape--icon" x="${formatNumber(-presentation.width / 2)}" y="${formatNumber(-presentation.height / 2)}" width="${formatNumber(presentation.width)}" height="${formatNumber(presentation.height)}" viewBox="${escapeHtml(icon.viewBox)}" color="${colorForKind(node.kind)}" aria-hidden="true">${icon.markup}</svg>`;
+    }
     const fill = colorForKind(node.kind);
     switch (presentation.shape) {
         case 'rounded-rect':
@@ -155,6 +212,8 @@ function renderNodeShapeMarkup(node, presentation) {
             return `<polygon class="node-shape node-shape--hexagon" points="${shapePoints(presentation, 'hexagon')}" fill="${fill}" />`;
         case 'user':
             return renderUserNodeShapeMarkup(presentation, fill);
+        case 'package':
+            return renderPackageNodeShapeMarkup(presentation);
         default:
             return `<rect class="node-shape" x="${formatNumber(-presentation.width / 2)}" y="${formatNumber(-presentation.height / 2)}" width="${formatNumber(presentation.width)}" height="${formatNumber(presentation.height)}" rx="6" ry="6" fill="${fill}" />`;
     }
@@ -173,12 +232,12 @@ function nodePresentation(node) {
     const shape = shapeForKind(node.kind);
     const width = node.kind === 'file'
         ? shapeWidthForKind(node.kind, labelLength)
-        : node.kind === 'user'
+        : node.kind === 'user' || node.kind === 'package'
             ? 72
             : 16;
     const height = node.kind === 'file'
         ? shapeHeightForKind(node.kind, labelLength)
-        : node.kind === 'user'
+        : node.kind === 'user' || node.kind === 'package'
             ? 72
             : 16;
     const presentationRadius = Math.max(width, height) / 2 + 10;
@@ -204,6 +263,8 @@ function shapeForKind(kind) {
             return 'hexagon';
         case 'user':
             return 'user';
+        case 'package':
+            return 'hexagon';
         default:
             return 'box';
     }
@@ -226,7 +287,8 @@ function shapeSquareSizeForKind(kind, labelLength) {
         import: { base: 68, perChar: 7, min: 96, max: 220 },
         export: { base: 68, perChar: 7, min: 96, max: 220 },
         call: { base: 68, perChar: 7, min: 96, max: 220 },
-        user: { base: 68, perChar: 7, min: 72, max: 180 }
+        user: { base: 68, perChar: 7, min: 72, max: 180 },
+        package: { base: 72, perChar: 7, min: 96, max: 220 }
     };
     const spec = sizeByKind[kind];
     return Math.max(spec.min, Math.min(spec.max, Math.round(spec.base + labelLength * spec.perChar)));
@@ -239,6 +301,9 @@ function expandViewBox(viewBox, padding) {
         height: viewBox.height + padding * 2
     };
 }
+function renderPackageNodeShapeMarkup(presentation) {
+    return `<svg class="node-shape node-shape--package" x="${formatNumber(-presentation.width / 2)}" y="${formatNumber(-presentation.height / 2)}" width="${formatNumber(presentation.width)}" height="${formatNumber(presentation.height)}" viewBox="0 0 512 512" aria-hidden="true"><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"/></svg>`;
+}
 function renderUserNodeShapeMarkup(presentation, fill) {
     const scale = Math.max(presentation.width, presentation.height) / 24;
     return `<g class="node-shape node-shape--user" transform="scale(${formatNumber(scale)}) translate(-12,-12)" fill="none" stroke="${fill}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
@@ -261,6 +326,8 @@ function colorForKind(kind) {
             return '#fb7185';
         case 'user':
             return '#14b8a6';
+        case 'package':
+            return '#f97316';
         default:
             return '#94a3b8';
     }
@@ -296,7 +363,8 @@ function legendItems() {
         ['import', 'Import'],
         ['export', 'Export'],
         ['call', 'Call'],
-        ['user', 'Contributor']
+        ['user', 'Contributor'],
+        ['package', 'Package']
     ];
     return items
         .map(([kind, label]) => `

package/dist/src/view/templates/icons/call.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="call_icon">
+        <circle cx="24" cy="24" r="21" fill="#ff6d2e" stroke="inherit" stroke-width="4"></circle>
+        <path d="M37 22.0001L34 25.0001L23 14.0001L26 11.0001C27.5 9.50002 33 7.00005 37 11.0001C41 15.0001 38.5 20.5 37 22.0001Z" fill="#b71111" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M42 6L37 11" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M11 25.9999L14 22.9999L25 33.9999L22 36.9999C20.5 38.5 15 41 11 36.9999C7 32.9999 9.5 27.5 11 25.9999Z" fill="#b71111" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M23 32L27 28" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M6 42L11 37" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+        <path d="M16 25L20 21" stroke="#3a1304" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
+    </g>
+</svg>

package/dist/src/view/templates/icons/export.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V8M7 13l5-5 5 5M5 3h14"/></svg>

package/dist/src/view/templates/icons/file.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
+    <g id="file_icon" fill="#9ed2ff" stroke="#1d97e2" stroke-width="1" stroke-linecap="round" stroke-linejoin="miter">
+        <polygon points="14 2 3 2 3 22 21 22 21 9 14 9 14 2" fill="#059cf7" opacity="0.1" stroke-width="0"></polygon>
+        <polygon points="3 2 3 22 21 22 21 9 14 2 3 2"></polygon>
+        <polyline points="20.6 9 14 9 14 2.4" stroke-linecap="round"></polyline>
+        <line x1="16" y1="13" x2="8" y2="13"></line><line x1="10" y1="9" x2="8" y2="9"></line>
+        <line x1="16" y1="17" x2="8" y2="17"></line>
+    </g>
+</svg>

package/dist/src/view/templates/icons/import.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v13M7 11l5 5 5-5M5 21h14"/></svg>

package/dist/src/view/templates/icons/package.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512"><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"/></svg>

package/dist/src/view/templates/icons/symbol.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" preserveAspectRatio="xMidYMid meet">
+    <g id="symbol_icon" fill="none" fill-rule="evenodd">
+        <path fill="#d5c007" d="M17 36a1.99 1.99 0 0 1-1.414-.586l-11-11A2 2 0 0 1 4 23V2A2 2 0 0 1 7.414.586L17 10.171L26.586.586A1.998 1.998 0 0 1 30 2v21a2 2 0 0 1-.586 1.414l-11 11A1.99 1.99 0 0 1 17 36z"></path>
+        <path fill="#47DED4" d="M17 13L28 2v21L17 34z"></path>
+        <path fill="#FFFF87" d="M6 2l11 11v21L6 23z"></path>
+    </g>
+</svg>

package/dist/src/view/templates/icons/user.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
+    <g id="user_icon" fill="#c7e2f9" stroke="#1995d8" 
+    stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"> 
+        <defs> 
+            <style>.cls-1{fill:#c7e2f9;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#4285f4;}</style> 
+        </defs> 
+        <g data-name="Product Icons"> 
+            <g> 
+                <rect fill="#234cbc" x="6" y="4" width="12" height="16" rx="4"></rect>
+                <path class="cls-1" d="M12,2,3.79,5.42v5.63c0,5.06,3.5,9.8,8.21,11,4.71-1.15,8.21-5.89,8.21-10.95V5.42Zm0,3.79a2.63,2.63,0,1,1-1.86.77A2.63,2.63,0,0,1,12,5.79Zm4.11,11.15A8.64,8.64,0,0,1,12,19.87a8.64,8.64,0,0,1-4.11-2.93V14.69c0-1.67,2.74-2.52,4.11-2.52s4.11.85,4.11,2.52v2.25Z"></path> 
+                <path class="cls-2" d="M12,2V5.79a2.63,2.63,0,1,1,0,5.26v1.12c1.37,0,4.11.85,4.11,2.52v2.25A8.64,8.64,0,0,1,12,19.87V22c4.71-1.15,8.21-5.89,8.21-10.95V5.42Z"></path> 
+            </g> 
+        </g> 
+    </g>
+</svg>

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

@@ -0,0 +1,272 @@
+
+: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);
+  -webkit-backdrop-filter: blur(16px);
+  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,
+.hud select {
+  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: 8px;
+  font-weight: 200;
+  paint-order: stroke;
+  stroke: #020617;
+  stroke-width: 3px;
+  stroke-linejoin: round;
+  -webkit-user-select: none;
+  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;
+}
+