backpack-viewer 0.2.11 → 0.2.14

package/dist/canvas.js

@@ -16,6 +16,9 @@ export function initCanvas(container, onNodeClick) {
     let animFrame = 0;
     let selectedNodeIds = new Set();
     let filteredNodeIds = null; // null = no filter (show all)
+    let showEdgeLabels = true;
+    let showTypeHulls = true;
+    let showMinimap = true;
     // Pan animation state
     let panTarget = null;
     let panStart = null;
@@ -79,6 +82,51 @@ export function initCanvas(container, onNodeClick) {
         ctx.save();
         ctx.translate(-camera.x * camera.scale, -camera.y * camera.scale);
         ctx.scale(camera.scale, camera.scale);
+        // Draw type hulls (shaded regions behind same-type nodes)
+        if (showTypeHulls) {
+            const typeGroups = new Map();
+            for (const node of state.nodes) {
+                if (filteredNodeIds !== null && !filteredNodeIds.has(node.id))
+                    continue;
+                const group = typeGroups.get(node.type) ?? [];
+                group.push(node);
+                typeGroups.set(node.type, group);
+            }
+            for (const [type, nodes] of typeGroups) {
+                if (nodes.length < 2)
+                    continue;
+                const color = getColor(type);
+                const padding = NODE_RADIUS * 2.5;
+                // Compute bounding box
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                ctx.beginPath();
+                const rx = (maxX - minX) / 2 + padding;
+                const ry = (maxY - minY) / 2 + padding;
+                const cx = (minX + maxX) / 2;
+                const cy = (minY + maxY) / 2;
+                ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.globalAlpha = 0.05;
+                ctx.fill();
+                ctx.strokeStyle = color;
+                ctx.globalAlpha = 0.12;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([4, 4]);
+                ctx.stroke();
+                ctx.setLineDash([]);
+                ctx.globalAlpha = 1;
+            }
+        }
         // Draw edges
         for (const edge of state.edges) {
             const source = state.nodeMap.get(edge.sourceId);
@@ -114,17 +162,19 @@ export function initCanvas(container, onNodeClick) {
             // Arrowhead
             drawArrowhead(source.x, source.y, target.x, target.y, highlighted, arrowColor, arrowHighlight);
             // Edge label at midpoint
-            const mx = (source.x + target.x) / 2;
-            const my = (source.y + target.y) / 2;
-            ctx.fillStyle = highlighted
-                ? edgeLabelHighlight
-                : edgeDimmed
-                    ? edgeLabelDim
-                    : edgeLabel;
-            ctx.font = "9px system-ui, sans-serif";
-            ctx.textAlign = "center";
-            ctx.textBaseline = "bottom";
-            ctx.fillText(edge.type, mx, my - 4);
+            if (showEdgeLabels) {
+                const mx = (source.x + target.x) / 2;
+                const my = (source.y + target.y) / 2;
+                ctx.fillStyle = highlighted
+                    ? edgeLabelHighlight
+                    : edgeDimmed
+                        ? edgeLabelDim
+                        : edgeLabel;
+                ctx.font = "9px system-ui, sans-serif";
+                ctx.textAlign = "center";
+                ctx.textBaseline = "bottom";
+                ctx.fillText(edge.type, mx, my - 4);
+            }
         }
         // Draw nodes
         for (const node of state.nodes) {
@@ -173,6 +223,87 @@ export function initCanvas(container, onNodeClick) {
         }
         ctx.restore();
         ctx.restore();
+        // Minimap
+        if (showMinimap && state.nodes.length > 1) {
+            drawMinimap();
+        }
+    }
+    function drawMinimap() {
+        if (!state)
+            return;
+        const mapW = 140;
+        const mapH = 100;
+        const mapPad = 8;
+        const mapX = canvas.clientWidth - mapW - 16;
+        const mapY = canvas.clientHeight - mapH - 16;
+        // Compute graph bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of state.nodes) {
+            if (n.x < minX)
+                minX = n.x;
+            if (n.y < minY)
+                minY = n.y;
+            if (n.x > maxX)
+                maxX = n.x;
+            if (n.y > maxY)
+                maxY = n.y;
+        }
+        const gw = maxX - minX || 1;
+        const gh = maxY - minY || 1;
+        const scale = Math.min((mapW - mapPad * 2) / gw, (mapH - mapPad * 2) / gh);
+        const offsetX = mapX + mapPad + ((mapW - mapPad * 2) - gw * scale) / 2;
+        const offsetY = mapY + mapPad + ((mapH - mapPad * 2) - gh * scale) / 2;
+        ctx.save();
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        // Background
+        ctx.fillStyle = cssVar("--bg-surface") || "#1a1a1a";
+        ctx.globalAlpha = 0.85;
+        ctx.beginPath();
+        ctx.roundRect(mapX, mapY, mapW, mapH, 8);
+        ctx.fill();
+        ctx.strokeStyle = cssVar("--border") || "#2a2a2a";
+        ctx.globalAlpha = 1;
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        // Edges
+        ctx.globalAlpha = 0.15;
+        ctx.strokeStyle = cssVar("--canvas-edge") || "#555";
+        ctx.lineWidth = 0.5;
+        for (const edge of state.edges) {
+            const src = state.nodeMap.get(edge.sourceId);
+            const tgt = state.nodeMap.get(edge.targetId);
+            if (!src || !tgt || edge.sourceId === edge.targetId)
+                continue;
+            ctx.beginPath();
+            ctx.moveTo(offsetX + (src.x - minX) * scale, offsetY + (src.y - minY) * scale);
+            ctx.lineTo(offsetX + (tgt.x - minX) * scale, offsetY + (tgt.y - minY) * scale);
+            ctx.stroke();
+        }
+        // Nodes
+        ctx.globalAlpha = 0.8;
+        for (const node of state.nodes) {
+            const nx = offsetX + (node.x - minX) * scale;
+            const ny = offsetY + (node.y - minY) * scale;
+            ctx.beginPath();
+            ctx.arc(nx, ny, 2, 0, Math.PI * 2);
+            ctx.fillStyle = getColor(node.type);
+            ctx.fill();
+        }
+        // Viewport rectangle
+        const vx1 = camera.x;
+        const vy1 = camera.y;
+        const vx2 = camera.x + canvas.clientWidth / camera.scale;
+        const vy2 = camera.y + canvas.clientHeight / camera.scale;
+        const rx = offsetX + (vx1 - minX) * scale;
+        const ry = offsetY + (vy1 - minY) * scale;
+        const rw = (vx2 - vx1) * scale;
+        const rh = (vy2 - vy1) * scale;
+        ctx.globalAlpha = 0.3;
+        ctx.strokeStyle = cssVar("--accent") || "#d4a27f";
+        ctx.lineWidth = 1.5;
+        ctx.strokeRect(Math.max(mapX, Math.min(rx, mapX + mapW)), Math.max(mapY, Math.min(ry, mapY + mapH)), Math.min(rw, mapW), Math.min(rh, mapH));
+        ctx.globalAlpha = 1;
+        ctx.restore();
     }
     function drawArrowhead(sx, sy, tx, ty, highlighted, arrowColor, arrowHighlight) {
         const angle = Math.atan2(ty - sy, tx - sx);
@@ -195,10 +326,12 @@ export function initCanvas(container, onNodeClick) {
         ctx.strokeStyle = highlighted ? edgeHighlight : edgeColor;
         ctx.lineWidth = highlighted ? 2.5 : 1.5;
         ctx.stroke();
-        ctx.fillStyle = highlighted ? labelHighlight : labelColor;
-        ctx.font = "9px system-ui, sans-serif";
-        ctx.textAlign = "center";
-        ctx.fillText(type, cx, cy - 18);
+        if (showEdgeLabels) {
+            ctx.fillStyle = highlighted ? labelHighlight : labelColor;
+            ctx.font = "9px system-ui, sans-serif";
+            ctx.textAlign = "center";
+            ctx.fillText(type, cx, cy - 18);
+        }
     }
     // --- Simulation loop ---
     function animatePan() {
@@ -313,6 +446,9 @@ export function initCanvas(container, onNodeClick) {
     let touches = [];
     let initialPinchDist = 0;
     let initialPinchScale = 1;
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchDidMove = false;
     canvas.addEventListener("touchstart", (e) => {
         e.preventDefault();
         touches = Array.from(e.touches);
@@ -323,6 +459,9 @@ export function initCanvas(container, onNodeClick) {
         else if (touches.length === 1) {
             lastX = touches[0].clientX;
             lastY = touches[0].clientY;
+            touchStartX = touches[0].clientX;
+            touchStartY = touches[0].clientY;
+            touchDidMove = false;
         }
     }, { passive: false });
     canvas.addEventListener("touchmove", (e) => {
@@ -337,6 +476,10 @@ export function initCanvas(container, onNodeClick) {
         else if (current.length === 1) {
             const dx = current[0].clientX - lastX;
             const dy = current[0].clientY - lastY;
+            if (Math.abs(current[0].clientX - touchStartX) > 10 ||
+                Math.abs(current[0].clientY - touchStartY) > 10) {
+                touchDidMove = true;
+            }
             camera.x -= dx / camera.scale;
             camera.y -= dy / camera.scale;
             lastX = current[0].clientX;
@@ -345,6 +488,35 @@ export function initCanvas(container, onNodeClick) {
         }
         touches = current;
     }, { passive: false });
+    canvas.addEventListener("touchend", (e) => {
+        e.preventDefault();
+        if (touchDidMove || e.changedTouches.length !== 1)
+            return;
+        const t = e.changedTouches[0];
+        const rect = canvas.getBoundingClientRect();
+        const mx = t.clientX - rect.left;
+        const my = t.clientY - rect.top;
+        const hit = nodeAtScreen(mx, my);
+        if (hit) {
+            if (selectedNodeIds.size === 1 && selectedNodeIds.has(hit.id)) {
+                selectedNodeIds.clear();
+            }
+            else {
+                selectedNodeIds.clear();
+                selectedNodeIds.add(hit.id);
+            }
+            const ids = [...selectedNodeIds];
+            onNodeClick?.(ids.length > 0 ? ids : null);
+        }
+        else {
+            selectedNodeIds.clear();
+            onNodeClick?.(null);
+        }
+        render();
+    }, { passive: false });
+    // Prevent Safari page-level pinch zoom on the canvas
+    canvas.addEventListener("gesturestart", (e) => e.preventDefault());
+    canvas.addEventListener("gesturechange", (e) => e.preventDefault());
     function touchDistance(a, b) {
         const dx = a.clientX - b.clientX;
         const dy = a.clientY - b.clientY;
@@ -446,25 +618,112 @@ export function initCanvas(container, onNodeClick) {
             render();
         },
         panToNode(nodeId) {
-            if (!state)
+            this.panToNodes([nodeId]);
+        },
+        panToNodes(nodeIds) {
+            if (!state || nodeIds.length === 0)
                 return;
-            const node = state.nodeMap.get(nodeId);
-            if (!node)
+            const nodes = nodeIds.map((id) => state.nodeMap.get(id)).filter(Boolean);
+            if (nodes.length === 0)
                 return;
-            selectedNodeIds = new Set([nodeId]);
-            onNodeClick?.([nodeId]);
+            selectedNodeIds = new Set(nodeIds);
+            onNodeClick?.(nodeIds);
             const w = canvas.clientWidth;
             const h = canvas.clientHeight;
-            panStart = { x: camera.x, y: camera.y, time: performance.now() };
-            panTarget = {
-                x: node.x - w / (2 * camera.scale),
-                y: node.y - h / (2 * camera.scale),
-            };
+            if (nodes.length === 1) {
+                panStart = { x: camera.x, y: camera.y, time: performance.now() };
+                panTarget = {
+                    x: nodes[0].x - w / (2 * camera.scale),
+                    y: nodes[0].y - h / (2 * camera.scale),
+                };
+            }
+            else {
+                // Fit all nodes in view with padding
+                let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+                for (const n of nodes) {
+                    if (n.x < minX)
+                        minX = n.x;
+                    if (n.y < minY)
+                        minY = n.y;
+                    if (n.x > maxX)
+                        maxX = n.x;
+                    if (n.y > maxY)
+                        maxY = n.y;
+                }
+                const pad = NODE_RADIUS * 4;
+                const bw = maxX - minX + pad * 2;
+                const bh = maxY - minY + pad * 2;
+                const fitScale = Math.min(w / bw, h / bh, camera.scale);
+                camera.scale = fitScale;
+                const cx = (minX + maxX) / 2;
+                const cy = (minY + maxY) / 2;
+                panStart = { x: camera.x, y: camera.y, time: performance.now() };
+                panTarget = {
+                    x: cx - w / (2 * camera.scale),
+                    y: cy - h / (2 * camera.scale),
+                };
+            }
             animatePan();
         },
+        setEdgeLabels(visible) {
+            showEdgeLabels = visible;
+            render();
+        },
+        setTypeHulls(visible) {
+            showTypeHulls = visible;
+            render();
+        },
+        setMinimap(visible) {
+            showMinimap = visible;
+            render();
+        },
+        reheat() {
+            alpha = 0.5;
+            cancelAnimationFrame(animFrame);
+            simulate();
+        },
+        exportImage(format) {
+            if (!state)
+                return "";
+            // Use the actual canvas pixel dimensions (already scaled by dpr)
+            const pw = canvas.width;
+            const ph = canvas.height;
+            if (format === "png") {
+                const exportCanvas = document.createElement("canvas");
+                exportCanvas.width = pw;
+                exportCanvas.height = ph;
+                const ectx = exportCanvas.getContext("2d");
+                // Draw background
+                ectx.fillStyle = cssVar("--bg") || "#141414";
+                ectx.fillRect(0, 0, pw, ph);
+                // Copy current canvas pixels 1:1
+                ectx.drawImage(canvas, 0, 0);
+                // Watermark (scale font to match pixel density)
+                drawWatermark(ectx, pw, ph);
+                return exportCanvas.toDataURL("image/png");
+            }
+            // SVG: embed the canvas as a PNG image with text overlay
+            const dataUrl = canvas.toDataURL("image/png");
+            const fontSize = Math.max(16, Math.round(pw / 80));
+            const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${pw}" height="${ph}">
+  <image href="${dataUrl}" width="${pw}" height="${ph}"/>
+  <text x="${pw - 20}" y="${ph - 16}" text-anchor="end" font-family="system-ui, sans-serif" font-size="${fontSize}" fill="#ffffff" opacity="0.4">backpackontology.com</text>
+</svg>`;
+            return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+        },
         destroy() {
             cancelAnimationFrame(animFrame);
             observer.disconnect();
         },
     };
+    function drawWatermark(ectx, w, h) {
+        const fontSize = Math.max(16, Math.round(w / 80));
+        ectx.save();
+        ectx.font = `${fontSize}px system-ui, sans-serif`;
+        ectx.fillStyle = "rgba(255, 255, 255, 0.4)";
+        ectx.textAlign = "right";
+        ectx.textBaseline = "bottom";
+        ectx.fillText("backpackontology.com", w - 20, h - 16);
+        ectx.restore();
+    }
 }

package/dist/empty-state.d.ts

@@ -0,0 +1,4 @@
+export declare function initEmptyState(container: HTMLElement): {
+    show(): void;
+    hide(): void;
+};

package/dist/empty-state.js

@@ -0,0 +1,27 @@
+export function initEmptyState(container) {
+    const el = document.createElement("div");
+    el.className = "empty-state";
+    el.innerHTML = `
+    <div class="empty-state-content">
+      <div class="empty-state-icon">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0022 16z"/>
+          <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
+          <line x1="12" y1="22.08" x2="12" y2="12"/>
+        </svg>
+      </div>
+      <h2 class="empty-state-title">No learning graphs yet</h2>
+      <p class="empty-state-desc">Connect Backpack to Claude, then start a conversation. Claude will build your first learning graph automatically.</p>
+      <div class="empty-state-setup">
+        <div class="empty-state-label">Add Backpack to Claude Code:</div>
+        <code class="empty-state-code">claude mcp add backpack-local -s user -- npx backpack-ontology@latest</code>
+      </div>
+      <p class="empty-state-hint">Press <kbd>?</kbd> for keyboard shortcuts</p>
+    </div>
+  `;
+    container.appendChild(el);
+    return {
+        show() { el.classList.remove("hidden"); },
+        hide() { el.classList.add("hidden"); },
+    };
+}

package/dist/history.d.ts

@@ -0,0 +1,10 @@
+import type { LearningGraphData } from "backpack-ontology";
+export declare function createHistory(): {
+    /** Call before mutating the data to snapshot the current state. */
+    push(data: LearningGraphData): void;
+    undo(currentData: LearningGraphData): LearningGraphData | null;
+    redo(currentData: LearningGraphData): LearningGraphData | null;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): void;
+};

package/dist/history.js

@@ -0,0 +1,36 @@
+const MAX_HISTORY = 30;
+export function createHistory() {
+    let undoStack = [];
+    let redoStack = [];
+    return {
+        /** Call before mutating the data to snapshot the current state. */
+        push(data) {
+            undoStack.push(JSON.stringify(data));
+            if (undoStack.length > MAX_HISTORY)
+                undoStack.shift();
+            redoStack = [];
+        },
+        undo(currentData) {
+            if (undoStack.length === 0)
+                return null;
+            redoStack.push(JSON.stringify(currentData));
+            return JSON.parse(undoStack.pop());
+        },
+        redo(currentData) {
+            if (redoStack.length === 0)
+                return null;
+            undoStack.push(JSON.stringify(currentData));
+            return JSON.parse(redoStack.pop());
+        },
+        canUndo() {
+            return undoStack.length > 0;
+        },
+        canRedo() {
+            return redoStack.length > 0;
+        },
+        clear() {
+            undoStack = [];
+            redoStack = [];
+        },
+    };
+}

package/dist/info-panel.d.ts

@@ -1,4 +1,4 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export interface EditCallbacks {
     onUpdateNode(nodeId: string, properties: Record<string, unknown>): void;
     onChangeNodeType(nodeId: string, newType: string): void;
@@ -7,7 +7,7 @@ export interface EditCallbacks {
     onAddProperty(nodeId: string, key: string, value: string): void;
 }
 export declare function initInfoPanel(container: HTMLElement, callbacks?: EditCallbacks, onNavigateToNode?: (nodeId: string) => void): {
-    show(nodeIds: string[], data: OntologyData): void;
+    show(nodeIds: string[], data: LearningGraphData): void;
     hide: () => void;
     readonly visible: boolean;
 };

package/dist/layout.d.ts

@@ -1,4 +1,4 @@
-import type { OntologyData } from "backpack-ontology";
+import type { LearningGraphData } from "backpack-ontology";
 export interface LayoutNode {
     id: string;
     x: number;
@@ -18,7 +18,14 @@ export interface LayoutState {
     edges: LayoutEdge[];
     nodeMap: Map<string, LayoutNode>;
 }
-/** Create a layout state from ontology data. Nodes start in a circle. */
-export declare function createLayout(data: OntologyData): LayoutState;
+export interface LayoutParams {
+    clusterStrength: number;
+    spacing: number;
+}
+export declare const DEFAULT_LAYOUT_PARAMS: LayoutParams;
+export declare function setLayoutParams(p: Partial<LayoutParams>): void;
+export declare function getLayoutParams(): LayoutParams;
+/** Create a layout state from ontology data. Nodes start grouped by type. */
+export declare function createLayout(data: LearningGraphData): LayoutState;
 /** Run one tick of the force simulation. Returns new alpha. */
 export declare function tick(state: LayoutState, alpha: number): number;

package/dist/layout.js

@@ -1,10 +1,27 @@
+export const DEFAULT_LAYOUT_PARAMS = {
+    clusterStrength: 0.05,
+    spacing: 1,
+};
 const REPULSION = 5000;
+const CROSS_TYPE_REPULSION_BASE = 8000;
 const ATTRACTION = 0.005;
-const REST_LENGTH = 150;
+const REST_LENGTH_SAME_BASE = 100;
+const REST_LENGTH_CROSS_BASE = 250;
 const DAMPING = 0.9;
 const CENTER_GRAVITY = 0.01;
 const MIN_DISTANCE = 30;
 const MAX_VELOCITY = 50;
+// Active params — mutated by setLayoutParams()
+let params = { ...DEFAULT_LAYOUT_PARAMS };
+export function setLayoutParams(p) {
+    if (p.clusterStrength !== undefined)
+        params.clusterStrength = p.clusterStrength;
+    if (p.spacing !== undefined)
+        params.spacing = p.spacing;
+}
+export function getLayoutParams() {
+    return { ...params };
+}
 /** Extract a display label from a node — first string property value, fallback to id. */
 function nodeLabel(properties, id) {
     for (const value of Object.values(properties)) {
@@ -13,16 +30,31 @@ function nodeLabel(properties, id) {
     }
     return id;
 }
-/** Create a layout state from ontology data. Nodes start in a circle. */
+/** Create a layout state from ontology data. Nodes start grouped by type. */
 export function createLayout(data) {
-    const radius = Math.sqrt(data.nodes.length) * REST_LENGTH * 0.5;
     const nodeMap = new Map();
-    const nodes = data.nodes.map((n, i) => {
-        const angle = (2 * Math.PI * i) / data.nodes.length;
+    // Group nodes by type for initial placement
+    const types = [...new Set(data.nodes.map((n) => n.type))];
+    const typeRadius = Math.sqrt(types.length) * REST_LENGTH_CROSS_BASE * 0.6;
+    const typeCounters = new Map();
+    const typeSizes = new Map();
+    for (const n of data.nodes) {
+        typeSizes.set(n.type, (typeSizes.get(n.type) ?? 0) + 1);
+    }
+    const nodes = data.nodes.map((n) => {
+        const ti = types.indexOf(n.type);
+        const typeAngle = (2 * Math.PI * ti) / Math.max(types.length, 1);
+        const cx = Math.cos(typeAngle) * typeRadius;
+        const cy = Math.sin(typeAngle) * typeRadius;
+        const ni = typeCounters.get(n.type) ?? 0;
+        typeCounters.set(n.type, ni + 1);
+        const groupSize = typeSizes.get(n.type) ?? 1;
+        const nodeAngle = (2 * Math.PI * ni) / groupSize;
+        const nodeRadius = REST_LENGTH_SAME_BASE * 0.6;
         const node = {
             id: n.id,
-            x: Math.cos(angle) * radius,
-            y: Math.sin(angle) * radius,
+            x: cx + Math.cos(nodeAngle) * nodeRadius,
+            y: cy + Math.sin(nodeAngle) * nodeRadius,
             vx: 0,
             vy: 0,
             label: nodeLabel(n.properties, n.id),
@@ -41,7 +73,7 @@ export function createLayout(data) {
 /** Run one tick of the force simulation. Returns new alpha. */
 export function tick(state, alpha) {
     const { nodes, edges, nodeMap } = state;
-    // Repulsion — all pairs
+    // Repulsion — all pairs (stronger between different types)
     for (let i = 0; i < nodes.length; i++) {
         for (let j = i + 1; j < nodes.length; j++) {
             const a = nodes[i];
@@ -51,7 +83,8 @@ export function tick(state, alpha) {
             let dist = Math.sqrt(dx * dx + dy * dy);
             if (dist < MIN_DISTANCE)
                 dist = MIN_DISTANCE;
-            const force = (REPULSION * alpha) / (dist * dist);
+            const rep = a.type === b.type ? REPULSION : CROSS_TYPE_REPULSION_BASE * params.spacing;
+            const force = (rep * alpha) / (dist * dist);
             const fx = (dx / dist) * force;
             const fy = (dy / dist) * force;
             a.vx -= fx;
@@ -60,7 +93,7 @@ export function tick(state, alpha) {
             b.vy += fy;
         }
     }
-    // Attraction — along edges
+    // Attraction — along edges (shorter rest length within same type)
     for (const edge of edges) {
         const source = nodeMap.get(edge.sourceId);
         const target = nodeMap.get(edge.targetId);
@@ -71,7 +104,10 @@ export function tick(state, alpha) {
         const dist = Math.sqrt(dx * dx + dy * dy);
         if (dist === 0)
             continue;
-        const force = ATTRACTION * (dist - REST_LENGTH) * alpha;
+        const restLen = source.type === target.type
+            ? REST_LENGTH_SAME_BASE * params.spacing
+            : REST_LENGTH_CROSS_BASE * params.spacing;
+        const force = ATTRACTION * (dist - restLen) * alpha;
         const fx = (dx / dist) * force;
         const fy = (dy / dist) * force;
         source.vx += fx;
@@ -84,6 +120,24 @@ export function tick(state, alpha) {
         node.vx -= node.x * CENTER_GRAVITY * alpha;
         node.vy -= node.y * CENTER_GRAVITY * alpha;
     }
+    // Cluster force — pull nodes toward their type centroid
+    const centroids = new Map();
+    for (const node of nodes) {
+        const c = centroids.get(node.type) ?? { x: 0, y: 0, count: 0 };
+        c.x += node.x;
+        c.y += node.y;
+        c.count++;
+        centroids.set(node.type, c);
+    }
+    for (const c of centroids.values()) {
+        c.x /= c.count;
+        c.y /= c.count;
+    }
+    for (const node of nodes) {
+        const c = centroids.get(node.type);
+        node.vx += (c.x - node.x) * params.clusterStrength * alpha;
+        node.vy += (c.y - node.y) * params.clusterStrength * alpha;
+    }
     // Integrate — update positions, apply damping, clamp velocity
     for (const node of nodes) {
         node.vx *= DAMPING;