@psnext/lscg 0.1.2 → 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

@@ -38,6 +38,7 @@ html, body {
   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;
@@ -107,7 +108,8 @@ html, body {
   color: var(--muted);
   font-size: 13px;
 }
-.hud input {
+.hud input,
+.hud select {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 12px;
@@ -187,12 +189,13 @@ html, body {
 }
 .node-label {
   fill: var(--text);
-  font-size: 11px;
-  font-weight: 600;
+  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;
 }

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

@@ -28,6 +28,16 @@
             <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>
@@ -57,11 +67,13 @@
       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');
@@ -114,6 +126,30 @@
 
       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')
@@ -155,6 +191,17 @@
                 : (-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')
@@ -213,12 +260,27 @@
         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)
+          .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);
       });
@@ -369,7 +431,7 @@
         updateInfo();
         updateZoomState();
         updateLegendState();
-        reframe();
+        reframe(visibleNodeIds);
       }
 
       function setAnchor(nodeId) {
@@ -392,7 +454,7 @@
         }
         const nextSize = canvasSize();
         svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
-        reframe();
+        reframe(getVisibleSets().visibleNodeIds);
       }
 
       function zoomAll() {
@@ -412,11 +474,11 @@
         applyState();
       }
 
-      function reframe() {
+      function reframe(visibleNodeIds = allNodeIds) {
         const selectedNode = anchorId ? nodesData.find((candidate) => candidate.id === anchorId) ?? null : null;
         const { width: canvasWidth, height: canvasHeight } = canvasSize();
 
-        if (focusMode === 'selected' && selectedNode) {
+        if (!focusVisibleOnly && focusMode === 'selected' && selectedNode) {
           const transform = d3.zoomIdentity
             .translate(canvasWidth / 2, canvasHeight / 2)
             .scale(focusScale / zoomFactor)
@@ -425,12 +487,13 @@
           return;
         }
 
-        if (nodesData.length === 0) {
+        const visibleNodes = nodesData.filter((node) => visibleNodeIds.has(node.id));
+        if (visibleNodes.length === 0) {
           svg.call(zoom.transform, d3.zoomIdentity);
           return;
         }
 
-        const bounds = nodesData.reduce((acc, current) => ({
+        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),
@@ -519,6 +582,13 @@
         }
       });
 
+      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;
@@ -560,7 +630,7 @@
         if (!graphPanel) return;
         const nextSize = canvasSize();
         svg.attr('viewBox', [0, 0, nextSize.width, nextSize.height]);
-        reframe();
+        reframe(getVisibleSets().visibleNodeIds);
       });
 
       simulation.on('tick', ticked);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/lscg",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Local source context graphs for repositories, exposed as a CLI and MCP server.",
   "type": "module",
   "bin": {