@unbrained/pm-web 1.0.0

package/public/src/views/graph-canvas.js

@@ -0,0 +1,1986 @@
+// ═══════════════════════════════════════════════════════════════
+// GRAPH CANVAS — Obsidian-quality force-directed knowledge graph
+// Canvas 2D + physics simulation, no external dependencies
+// Features: minimap, animated edge particles, dot grid, tooltip,
+//           keyboard nav, fly-to, gradient nodes, zoom HUD,
+//           spatial partitioning, edge bundling, hierarchical layout
+// ═══════════════════════════════════════════════════════════════
+// ── Palette ───────────────────────────────────────────────────
+const STATUS_COLORS = {
+    open: '#2dd4bf',
+    'in-progress': '#fb923c',
+    in_progress: '#fb923c',
+    closed: '#64748b',
+    blocked: '#f87171',
+    draft: '#94a3b8',
+};
+const TYPE_COLORS = {
+    task: '#2dd4bf',
+    feature: '#60a5fa',
+    epic: '#a78bfa',
+    bug: '#f87171',
+    milestone: '#fbbf24',
+    story: '#34d399',
+    chore: '#94a3b8',
+    release: '#38bdf8',
+};
+const TYPE_COLOR_DEFAULT = '#64748b';
+const TAG_PALETTE = ['#2dd4bf', '#60a5fa', '#a78bfa', '#f87171', '#fbbf24', '#34d399', '#fb923c', '#e879f9'];
+const TYPE_ABBR = {
+    task: 'T',
+    feature: 'F',
+    epic: 'E',
+    bug: 'B',
+    milestone: 'M',
+    story: 'S',
+    chore: 'C',
+    release: 'R',
+};
+const LANE_COLOR = {
+    item: '#2dd4bf',
+    facet: '#60a5fa',
+    external: '#f87171',
+};
+const EDGE_COLOR = {
+    PARENT_OF: '#60a5fa',
+    CHILD_OF: '#60a5fa',
+    DEPENDS_ON: '#fb923c',
+    BLOCKED_BY: '#f87171',
+    HAS_TAG: '#8b5cf6',
+    HAS_ASSIGNEE: '#34d399',
+    IN_SPRINT: '#38bdf8',
+    IN_RELEASE: '#a78bfa',
+};
+const EDGE_DEFAULT = 'rgba(148,163,184,0.3)';
+// ── Helpers ───────────────────────────────────────────────────
+function nodeRadius(degree) {
+    return Math.max(8, Math.min(28, 8 + Math.sqrt(Math.max(0, degree)) * 4.2));
+}
+function statusColor(node) {
+    if (node.lane === 'facet')
+        return LANE_COLOR.facet;
+    if (node.lane === 'external')
+        return LANE_COLOR.external;
+    return STATUS_COLORS[node.status] ?? LANE_COLOR.item;
+}
+function getEdgeColor(type) {
+    return EDGE_COLOR[type] ?? EDGE_DEFAULT;
+}
+function truncate(text, maxLen) {
+    return text.length > maxLen ? text.slice(0, maxLen - 1) + '…' : text;
+}
+function hexToRgb(hex) {
+    const m = /^#([0-9a-f]{6})$/i.exec(hex);
+    if (!m)
+        return null;
+    const n = parseInt(m[1], 16);
+    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+function hexAlpha(hex, a) {
+    const c = hexToRgb(hex);
+    if (!c)
+        return hex;
+    return `rgba(${c.r},${c.g},${c.b},${a})`;
+}
+function initialPositions(nodes) {
+    const golden = 2.399963;
+    return nodes.map((_, i) => {
+        const radius = 70 + Math.sqrt(i) * 60;
+        const angle = i * golden;
+        return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius };
+    });
+}
+function lerp(a, b, t) {
+    return a + (b - a) * t;
+}
+function easeOutQuart(t) {
+    return 1 - Math.pow(1 - t, 4);
+}
+/** Graham scan convex hull — returns hull in counter-clockwise order */
+function convexHull(pts) {
+    if (pts.length < 3)
+        return pts.slice();
+    let bot = pts[0];
+    for (const p of pts)
+        if (p.y < bot.y || (p.y === bot.y && p.x < bot.x))
+            bot = p;
+    const rest = pts.filter((p) => p !== bot);
+    rest.sort((a, b) => {
+        const ax = a.x - bot.x, ay = a.y - bot.y;
+        const bx = b.x - bot.x, by = b.y - bot.y;
+        const cross = ax * by - ay * bx;
+        if (Math.abs(cross) < 1e-9)
+            return (ax * ax + ay * ay) - (bx * bx + by * by);
+        return -cross;
+    });
+    const hull = [bot];
+    for (const p of rest) {
+        while (hull.length >= 2) {
+            const a = hull[hull.length - 2], b = hull[hull.length - 1];
+            if ((b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x) >= 0)
+                hull.pop();
+            else
+                break;
+        }
+        hull.push(p);
+    }
+    return hull;
+}
+// escHtml is imported from utils.ts in graph.ts — canvas uses its own for DOM tooltip only
+function escHtml(s) {
+    return s
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+// ═══════════════════════════════════════════════════════════════
+// GraphCanvas class
+// ═══════════════════════════════════════════════════════════════
+export class GraphCanvas {
+    canvas;
+    ctx;
+    dpr;
+    w = 0;
+    h = 0;
+    // Simulation
+    nodes = [];
+    edges = [];
+    nodeMap = new Map();
+    alpha = 1;
+    paused = false;
+    // Physics constants (mutable for live slider control)
+    ALPHA_DECAY = 0.020;
+    ALPHA_MIN = 0.001;
+    VEL_DECAY = 0.56;
+    REPULSE = 2000;
+    SPRING = 0.065;
+    REST_LEN = 140;
+    CENTER = 0.010;
+    LINK_DIST_FAC = 80;
+    // Camera
+    tx = 0;
+    ty = 0;
+    scale = 1;
+    // Camera fly-to
+    flyTarget = null;
+    // Interaction
+    isDraggingNode = false;
+    isDraggingCanvas = false;
+    dragNode = null;
+    lastX = 0;
+    lastY = 0;
+    downX = 0;
+    downY = 0;
+    hasMoved = false;
+    hoveredId = null;
+    hoveredEdge = null;
+    // Touch
+    touchDist = 0;
+    touchMidX = 0;
+    touchMidY = 0;
+    // Particles
+    particles = [];
+    lastParticleSpawn = 0;
+    // Pulse animation (selected node)
+    pulseT = 0;
+    // Animated dash offset for cluster borders
+    dashOffset = 0;
+    // Keyboard nav: ordered list of visible node ids
+    navOrder = [];
+    // Filter
+    filter = {
+        visibleNodeIds: null,
+        selectedId: null,
+        query: '',
+        highlightRelTypes: new Set(),
+        colorMode: 'status',
+        colorTag: '',
+        criticalPathIds: new Set(),
+    };
+    // RAF + cleanup
+    rafId = null;
+    destroyed = false;
+    abortCtrl = new AbortController();
+    ro;
+    // Bidirectional edge pairs (precomputed in setData)
+    biDirPairs = new Set();
+    // Tag→color map for tag colorMode (recomputed in recolorNodes)
+    tagColorMap = new Map();
+    // Layout mode
+    layout = 'force';
+    // Edge bundling
+    edgeBundling = false;
+    // Spatial grid for culling
+    gridCells = new Map();
+    gridCellSize = 200;
+    gridOriginX = 0;
+    gridOriginY = 0;
+    // Initial load zoom-to-fit
+    initialFitDone = false;
+    initialFitTimer = null;
+    // Callbacks
+    onSelectNode;
+    onOpenNode;
+    onContextMenu;
+    onContextMenuEdge;
+    onExportPng;
+    constructor(container, options) {
+        this.onSelectNode = options.onSelectNode;
+        this.onOpenNode = options.onOpenNode;
+        this.onContextMenu = options.onContextMenu;
+        this.onContextMenuEdge = options.onContextMenuEdge;
+        this.onExportPng = options.onExportPng;
+        this.layout = options.layout ?? 'force';
+        this.edgeBundling = options.edgeBundling ?? false;
+        this.canvas = document.createElement('canvas');
+        this.canvas.style.cssText =
+            'width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none;';
+        this.canvas.tabIndex = 0;
+        container.appendChild(this.canvas);
+        const ctx = this.canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Canvas 2D not available');
+        this.ctx = ctx;
+        this.dpr = Math.min(window.devicePixelRatio || 1, 2);
+        this.ro = new ResizeObserver(() => this.onResize());
+        this.ro.observe(container);
+        this.onResize();
+        this.bindEvents();
+        this.startLoop();
+    }
+    // ── Public API ─────────────────────────────────────────────
+    setData(nodes, edges) {
+        const prevPos = new Map(this.nodes.map((n) => [n.id, { x: n.x, y: n.y }]));
+        const initPos = initialPositions(nodes);
+        this.nodes = nodes.map((node, i) => {
+            const prev = prevPos.get(node.id);
+            return {
+                ...node,
+                x: prev?.x ?? initPos[i].x,
+                y: prev?.y ?? initPos[i].y,
+                vx: 0,
+                vy: 0,
+                fx: null,
+                fy: null,
+                r: nodeRadius(node.degree),
+                color: statusColor(node),
+            };
+        });
+        this.nodeMap = new Map(this.nodes.map((n) => [n.id, n]));
+        this.edges = edges.flatMap((e) => {
+            const source = this.nodeMap.get(e.from);
+            const target = this.nodeMap.get(e.to);
+            return source && target ? [{ ...e, source, target }] : [];
+        });
+        this.alpha = 1;
+        this.particles = [];
+        this.navOrder = nodes.map((n) => n.id);
+        // Precompute bidirectional edge pairs
+        const edgeKeySet = new Set(this.edges.map((e) => `${e.source.id}→${e.target.id}`));
+        this.biDirPairs = new Set();
+        for (const e of this.edges) {
+            if (edgeKeySet.has(`${e.target.id}→${e.source.id}`)) {
+                this.biDirPairs.add([e.source.id, e.target.id].sort().join('|'));
+            }
+        }
+        this.recolorNodes();
+        // Initial zoom-to-fit animation
+        this.initialFitDone = false;
+        if (this.initialFitTimer)
+            clearTimeout(this.initialFitTimer);
+        this.initialFitTimer = setTimeout(() => {
+            this.fitView();
+            this.initialFitDone = true;
+        }, 1400);
+        // Apply hierarchical layout if selected
+        if (this.layout === 'hierarchical') {
+            this.applyHierarchicalLayout();
+        }
+        this.hoveredId = null;
+        this.hoveredEdge = null;
+        this.hideTooltip();
+    }
+    setFilter(filter) {
+        const prevMode = this.filter.colorMode;
+        const prevTag = this.filter.colorTag;
+        this.filter = { ...this.filter, ...filter };
+        this.navOrder = this.nodes
+            .filter((n) => !this.filter.visibleNodeIds || this.filter.visibleNodeIds.has(n.id))
+            .map((n) => n.id);
+        if ('selectedId' in filter) {
+            this.particles = [];
+            this.lastParticleSpawn = 0;
+        }
+        if (filter.colorMode !== undefined && filter.colorMode !== prevMode)
+            this.recolorNodes();
+        else if (filter.colorTag !== undefined && filter.colorTag !== prevTag)
+            this.recolorNodes();
+    }
+    getTagColorMap() { return this.tagColorMap; }
+    // Live physics control — used by the physics sliders panel
+    setPhysicsParams(params) {
+        if (params.repulsion !== undefined)
+            this.REPULSE = params.repulsion;
+        if (params.linkDistance !== undefined) {
+            this.REST_LEN = params.linkDistance;
+            this.LINK_DIST_FAC = params.linkDistance * 0.57;
+        }
+        if (params.centerForce !== undefined)
+            this.CENTER = params.centerForce;
+        if (params.linkStrength !== undefined)
+            this.SPRING = params.linkStrength;
+        this.reheat();
+    }
+    getPhysicsParams() {
+        return { repulsion: this.REPULSE, linkDistance: this.REST_LEN, centerForce: this.CENTER, linkStrength: this.SPRING };
+    }
+    setSelected(id) {
+        this.filter = { ...this.filter, selectedId: id };
+        this.particles = [];
+        this.lastParticleSpawn = 0;
+        if (id) {
+            const node = this.nodeMap.get(id);
+            if (node)
+                this.flyTo(node);
+        }
+    }
+    jumpToNode(id) {
+        const node = this.nodeMap.get(id);
+        if (node)
+            this.flyTo(node);
+    }
+    fitView() {
+        if (!this.nodes.length)
+            return;
+        const vis = this.filter.visibleNodeIds;
+        const ns = vis ? this.nodes.filter((n) => vis.has(n.id)) : this.nodes;
+        if (!ns.length)
+            return;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of ns) {
+            minX = Math.min(minX, n.x - n.r);
+            minY = Math.min(minY, n.y - n.r);
+            maxX = Math.max(maxX, n.x + n.r);
+            maxY = Math.max(maxY, n.y + n.r);
+        }
+        const pad = 72;
+        const gw = maxX - minX + pad * 2;
+        const gh = maxY - minY + pad * 2;
+        const s = Math.min(this.w / gw, this.h / gh, 2.5);
+        this.flyTarget = {
+            tx: this.w / 2 - ((minX + maxX) / 2) * s,
+            ty: this.h / 2 - ((minY + maxY) / 2) * s,
+            scale: s,
+        };
+    }
+    togglePhysics() {
+        this.paused = !this.paused;
+        if (!this.paused)
+            this.alpha = Math.max(this.alpha, 0.05);
+        return this.paused;
+    }
+    reheat() {
+        this.alpha = 0.3;
+        this.paused = false;
+    }
+    setLayout(layout) {
+        if (this.layout === layout)
+            return;
+        this.layout = layout;
+        if (layout === 'hierarchical') {
+            this.applyHierarchicalLayout();
+        }
+        else {
+            // Scatter nodes slightly and reheat force simulation
+            for (const n of this.nodes) {
+                n.x += (Math.random() - 0.5) * 40;
+                n.y += (Math.random() - 0.5) * 40;
+            }
+            this.reheat();
+        }
+    }
+    setEdgeBundling(enabled) {
+        this.edgeBundling = enabled;
+    }
+    exportPng() {
+        if (this.onExportPng) {
+            this.onExportPng(this.canvas);
+            return;
+        }
+        // Default: trigger download
+        try {
+            const link = document.createElement('a');
+            link.download = 'graph-export.png';
+            link.href = this.canvas.toDataURL('image/png');
+            link.click();
+        }
+        catch { /* Canvas tainted — cannot export */ }
+    }
+    applyHierarchicalLayout() {
+        // Topological-sort-based hierarchical layout
+        // Build adjacency for layering
+        const inDeg = new Map();
+        const adjOut = new Map();
+        for (const n of this.nodes) {
+            inDeg.set(n.id, 0);
+            adjOut.set(n.id, []);
+        }
+        for (const e of this.edges) {
+            inDeg.set(e.target.id, (inDeg.get(e.target.id) ?? 0) + 1);
+            adjOut.get(e.source.id)?.push(e.target.id);
+        }
+        // BFS layering from roots (nodes with in-degree 0)
+        const layers = [];
+        const assigned = new Set();
+        let frontier = [...inDeg.entries()].filter(([, d]) => d === 0).map(([id]) => id);
+        if (!frontier.length && this.nodes.length > 0) {
+            frontier = [this.nodes[0].id];
+        }
+        while (frontier.length) {
+            layers.push(frontier);
+            for (const id of frontier)
+                assigned.add(id);
+            const next = new Set();
+            for (const id of frontier) {
+                for (const child of adjOut.get(id) ?? []) {
+                    if (!assigned.has(child)) {
+                        next.add(child);
+                    }
+                }
+            }
+            frontier = [...next];
+        }
+        // Assign unassigned nodes to last layer
+        for (const n of this.nodes) {
+            if (!assigned.has(n.id)) {
+                layers[layers.length - 1]?.push(n.id) ?? layers.push([n.id]);
+            }
+        }
+        // Position nodes in layers
+        const layerSpacing = 180;
+        const nodeSpacing = 100;
+        const startY = -((layers.length - 1) * layerSpacing) / 2;
+        for (let li = 0; li < layers.length; li++) {
+            const layer = layers[li];
+            const startX = -((layer.length - 1) * nodeSpacing) / 2;
+            for (let ni = 0; ni < layer.length; ni++) {
+                const node = this.nodeMap.get(layer[ni]);
+                if (node) {
+                    node.x = startX + ni * nodeSpacing;
+                    node.y = startY + li * layerSpacing;
+                    node.vx = 0;
+                    node.vy = 0;
+                }
+            }
+        }
+        // Freeze positions for hierarchical mode
+        this.alpha = 0.005;
+    }
+    /** Rebuild the spatial grid for culling */
+    rebuildGrid() {
+        this.gridCells.clear();
+        if (!this.nodes.length)
+            return;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of this.nodes) {
+            minX = Math.min(minX, n.x);
+            minY = Math.min(minY, n.y);
+            maxX = Math.max(maxX, n.x);
+            maxY = Math.max(maxY, n.y);
+        }
+        this.gridOriginX = minX - this.gridCellSize;
+        this.gridOriginY = minY - this.gridCellSize;
+        const cs = this.gridCellSize;
+        for (const n of this.nodes) {
+            const cx = Math.floor((n.x - this.gridOriginX) / cs);
+            const cy = Math.floor((n.y - this.gridOriginY) / cs);
+            const key = cx * 10000 + cy;
+            let cell = this.gridCells.get(key);
+            if (!cell) {
+                cell = [];
+                this.gridCells.set(key, cell);
+            }
+            cell.push(n);
+        }
+    }
+    /** Get all nodes within a world-space rectangle */
+    getNodesInRect(wx1, wy1, wx2, wy2) {
+        const cs = this.gridCellSize;
+        const cx1 = Math.floor((wx1 - this.gridOriginX) / cs);
+        const cy1 = Math.floor((wy1 - this.gridOriginY) / cs);
+        const cx2 = Math.floor((wx2 - this.gridOriginX) / cs);
+        const cy2 = Math.floor((wy2 - this.gridOriginY) / cs);
+        const result = [];
+        for (let cx = cx1; cx <= cx2; cx++) {
+            for (let cy = cy1; cy <= cy2; cy++) {
+                const cell = this.gridCells.get(cx * 10000 + cy);
+                if (cell) {
+                    for (const n of cell) {
+                        if (n.x >= wx1 && n.x <= wx2 && n.y >= wy1 && n.y <= wy2) {
+                            result.push(n);
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    isSameEdge(a, b) {
+        if (!b)
+            return false;
+        return a.source.id === b.source.id && a.target.id === b.target.id && a.type === b.type;
+    }
+    buildEdgeGeometry(edge) {
+        const { source: s, target: t } = edge;
+        const dx = t.x - s.x || 0.01;
+        const dy = t.y - s.y || 0.01;
+        const len = Math.max(Math.sqrt(dx * dx + dy * dy), 1);
+        const nx = dx / len;
+        const ny = dy / len;
+        const px = -dy / len;
+        const py = dx / len;
+        const key = [s.id, t.id].sort().join('|');
+        const isBiDir = this.biDirPairs.has(key);
+        const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+        const cpOffset = isBiDir ? len * 0.22 * curveDir : 0;
+        const cpX = (s.x + t.x) / 2 + px * cpOffset;
+        const cpY = (s.y + t.y) / 2 + py * cpOffset;
+        const x1 = s.x + nx * s.r;
+        const y1 = s.y + ny * s.r;
+        const x2 = t.x - nx * (t.r + 7);
+        const y2 = t.y - ny * (t.r + 7);
+        const qX = (u) => (1 - u) * (1 - u) * x1 + 2 * (1 - u) * u * cpX + u * u * x2;
+        const qY = (u) => (1 - u) * (1 - u) * y1 + 2 * (1 - u) * u * cpY + u * u * y2;
+        const midU = 0.5;
+        const labelX = isBiDir ? qX(midU) : (x1 + x2) / 2;
+        const labelY = isBiDir ? qY(midU) : (y1 + y2) / 2;
+        return {
+            source: s,
+            target: t,
+            isBiDir,
+            key,
+            cpX,
+            cpY,
+            len,
+            x1,
+            y1,
+            x2,
+            y2,
+            labelX,
+            labelY,
+            hitDistBase: 0.8 + (9 / Math.max(this.scale, 0.1)),
+            midpointX: (x1 + x2) / 2,
+            midpointY: (y1 + y2) / 2,
+        };
+    }
+    distancePointToSegmentSq(px, py, x1, y1, x2, y2) {
+        const vx = x2 - x1;
+        const vy = y2 - y1;
+        const wx = px - x1;
+        const wy = py - y1;
+        const lenSq = vx * vx + vy * vy;
+        if (lenSq < 1e-9) {
+            return wx * wx + wy * wy;
+        }
+        let t = (wx * vx + wy * vy) / lenSq;
+        t = Math.max(0, Math.min(1, t));
+        const cx = x1 + vx * t;
+        const cy = y1 + vy * t;
+        const dx = px - cx;
+        const dy = py - cy;
+        return dx * dx + dy * dy;
+    }
+    distancePointToQuadraticSq(px, py, x1, y1, x2, y2, cpx, cpy) {
+        let best = Infinity;
+        const steps = 24;
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            const omt = 1 - t;
+            const x = omt * omt * x1 + 2 * omt * t * cpx + t * t * x2;
+            const y = omt * omt * y1 + 2 * omt * t * cpy + t * t * y2;
+            const dx = px - x;
+            const dy = py - y;
+            const d2 = dx * dx + dy * dy;
+            if (d2 < best)
+                best = d2;
+        }
+        return best;
+    }
+    hitTestEdge(wx, wy) {
+        const vis = this.filter.visibleNodeIds;
+        let best = null;
+        let bestDist = Infinity;
+        for (const edge of this.edges) {
+            if (vis && !vis.has(edge.source.id) && !vis.has(edge.target.id))
+                continue;
+            const g = this.buildEdgeGeometry(edge);
+            const d2 = g.isBiDir
+                ? this.distancePointToQuadraticSq(wx, wy, g.x1, g.y1, g.x2, g.y2, g.cpX, g.cpY)
+                : this.distancePointToSegmentSq(wx, wy, g.x1, g.y1, g.x2, g.y2);
+            if (d2 <= g.hitDistBase * g.hitDistBase && d2 < bestDist) {
+                best = edge;
+                bestDist = d2;
+            }
+        }
+        return best;
+    }
+    destroy() {
+        this.destroyed = true;
+        if (this.rafId !== null)
+            cancelAnimationFrame(this.rafId);
+        if (this.initialFitTimer)
+            clearTimeout(this.initialFitTimer);
+        this.abortCtrl.abort();
+        this.ro.disconnect();
+        this.canvas.remove();
+        const tt = document.getElementById('gc-tooltip');
+        if (tt)
+            tt.remove();
+    }
+    // ── Color computation ──────────────────────────────────────
+    computeNodeColor(node) {
+        if (node.lane === 'facet')
+            return LANE_COLOR.facet;
+        if (node.lane === 'external')
+            return LANE_COLOR.external;
+        const mode = this.filter.colorMode;
+        if (mode === 'type') {
+            return TYPE_COLORS[node.type.toLowerCase()] ?? TYPE_COLOR_DEFAULT;
+        }
+        if (mode === 'tag') {
+            for (const t of node.tags ?? []) {
+                const c = this.tagColorMap.get(t);
+                if (c)
+                    return c;
+            }
+            return 'rgba(100,116,139,0.45)';
+        }
+        return STATUS_COLORS[node.status] ?? LANE_COLOR.item;
+    }
+    recolorNodes() {
+        if (this.filter.colorMode === 'tag') {
+            const freq = new Map();
+            for (const n of this.nodes) {
+                for (const t of n.tags ?? [])
+                    freq.set(t, (freq.get(t) ?? 0) + 1);
+            }
+            const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE.length).map(([t]) => t);
+            this.tagColorMap = new Map(top.map((t, i) => [t, TAG_PALETTE[i]]));
+        }
+        else {
+            this.tagColorMap = new Map();
+        }
+        for (const node of this.nodes)
+            node.color = this.computeNodeColor(node);
+    }
+    // ── Fly-to ─────────────────────────────────────────────────
+    flyTo(node) {
+        const targetScale = Math.min(Math.max(this.scale, 1.2), 2.2);
+        this.flyTarget = {
+            tx: this.w / 2 - node.x * targetScale,
+            ty: this.h / 2 - node.y * targetScale,
+            scale: targetScale,
+        };
+    }
+    advanceFly() {
+        if (!this.flyTarget)
+            return;
+        const speed = 0.08;
+        this.tx = lerp(this.tx, this.flyTarget.tx, speed);
+        this.ty = lerp(this.ty, this.flyTarget.ty, speed);
+        this.scale = lerp(this.scale, this.flyTarget.scale, speed);
+        const distTx = Math.abs(this.tx - this.flyTarget.tx);
+        const distTy = Math.abs(this.ty - this.flyTarget.ty);
+        const distScale = Math.abs(this.scale - this.flyTarget.scale);
+        if (distTx < 0.5 && distTy < 0.5 && distScale < 0.002) {
+            this.tx = this.flyTarget.tx;
+            this.ty = this.flyTarget.ty;
+            this.scale = this.flyTarget.scale;
+            this.flyTarget = null;
+        }
+    }
+    // ── Keyboard navigation ────────────────────────────────────
+    navigateToNeighbor(direction) {
+        const sel = this.filter.selectedId;
+        if (direction === 'first-neighbor' && sel) {
+            const outEdge = this.edges.find((e) => e.source.id === sel || e.target.id === sel);
+            if (!outEdge)
+                return;
+            const neighbor = outEdge.source.id === sel ? outEdge.target : outEdge.source;
+            this.filter = { ...this.filter, selectedId: neighbor.id };
+            this.particles = [];
+            this.onSelectNode(neighbor.id);
+            this.flyTo(neighbor);
+            return;
+        }
+        const order = this.navOrder;
+        if (!order.length)
+            return;
+        const idx = sel ? order.indexOf(sel) : -1;
+        let nextIdx;
+        if (direction === 'prev') {
+            nextIdx = idx <= 0 ? order.length - 1 : idx - 1;
+        }
+        else {
+            nextIdx = idx >= order.length - 1 ? 0 : idx + 1;
+        }
+        const nextId = order[nextIdx];
+        this.filter = { ...this.filter, selectedId: nextId };
+        this.particles = [];
+        this.onSelectNode(nextId);
+        const node = this.nodeMap.get(nextId);
+        if (node)
+            this.flyTo(node);
+    }
+    // ── Physics simulation ─────────────────────────────────────
+    tick(dt) {
+        if (this.paused || this.alpha < this.ALPHA_MIN)
+            return;
+        const nodes = this.nodes;
+        const edges = this.edges;
+        const n = nodes.length;
+        const a = this.alpha;
+        const dtS = Math.min(dt / 1000, 0.05);
+        // Repulsion O(n²) — fine for ≤400 nodes
+        for (let i = 0; i < n; i++) {
+            for (let j = i + 1; j < n; j++) {
+                const A = nodes[i], B = nodes[j];
+                const dx = B.x - A.x || 0.01;
+                const dy = B.y - A.y || 0.01;
+                const d2 = dx * dx + dy * dy;
+                if (d2 < 0.01)
+                    continue;
+                const d = Math.sqrt(d2);
+                const f = (this.REPULSE / d2) * a;
+                const fx = (dx / d) * f;
+                const fy = (dy / d) * f;
+                A.vx -= fx;
+                A.vy -= fy;
+                B.vx += fx;
+                B.vy += fy;
+            }
+        }
+        // Spring forces
+        for (const e of edges) {
+            const { source: s, target: t } = e;
+            const dx = t.x - s.x || 0.01;
+            const dy = t.y - s.y || 0.01;
+            const d = Math.sqrt(dx * dx + dy * dy);
+            const restLen = (s.lane === 'facet' || t.lane === 'facet')
+                ? this.LINK_DIST_FAC
+                : this.REST_LEN;
+            const f = (d - restLen) * this.SPRING * a;
+            const nx = dx / d;
+            const ny = dy / d;
+            s.vx += nx * f;
+            s.vy += ny * f;
+            t.vx -= nx * f;
+            t.vy -= ny * f;
+        }
+        // Center gravity
+        for (const nd of nodes) {
+            nd.vx -= nd.x * this.CENTER * a;
+            nd.vy -= nd.y * this.CENTER * a;
+        }
+        // Tag centroid grouping — nodes sharing a tag gently attract each other
+        if (this.filter.colorMode === 'tag' && this.tagColorMap.size > 0) {
+            const tagCent = new Map();
+            for (const nd of nodes) {
+                for (const t of nd.tags ?? []) {
+                    if (!this.tagColorMap.has(t))
+                        continue;
+                    let c = tagCent.get(t);
+                    if (!c) {
+                        c = { x: 0, y: 0, count: 0 };
+                        tagCent.set(t, c);
+                    }
+                    c.x += nd.x;
+                    c.y += nd.y;
+                    c.count++;
+                    break;
+                }
+            }
+            const cs = 0.004 * a;
+            for (const nd of nodes) {
+                for (const t of nd.tags ?? []) {
+                    if (!this.tagColorMap.has(t))
+                        continue;
+                    const c = tagCent.get(t);
+                    if (c && c.count >= 2) {
+                        nd.vx += (c.x / c.count - nd.x) * cs;
+                        nd.vy += (c.y / c.count - nd.y) * cs;
+                    }
+                    break;
+                }
+            }
+        }
+        // Integrate
+        for (const nd of nodes) {
+            nd.vx *= this.VEL_DECAY;
+            nd.vy *= this.VEL_DECAY;
+            if (nd.fx !== null) {
+                nd.x = nd.fx;
+                nd.vx = 0;
+            }
+            else
+                nd.x += nd.vx;
+            if (nd.fy !== null) {
+                nd.y = nd.fy;
+                nd.vy = 0;
+            }
+            else
+                nd.y += nd.vy;
+        }
+        this.alpha *= (1 - this.ALPHA_DECAY);
+        // Advance particles
+        for (const p of this.particles) {
+            p.t += p.speed * dtS;
+        }
+        this.particles = this.particles.filter((p) => p.t < 1);
+        // Spawn particles on selected-node edges
+        const sel = this.filter.selectedId;
+        if (sel && Date.now() - this.lastParticleSpawn > 90) {
+            const selEdges = this.edges.filter((e) => e.source.id === sel || e.target.id === sel);
+            for (const e of selEdges.slice(0, 10)) {
+                this.particles.push({ edge: e, t: Math.random() * 0.15, speed: 0.25 + Math.random() * 0.25 });
+            }
+            this.lastParticleSpawn = Date.now();
+        }
+        // Pulse timer
+        this.pulseT = (this.pulseT + dtS * 2.5) % (Math.PI * 2);
+        // Cluster border animation
+        this.dashOffset = (this.dashOffset - dtS * 8) % 18;
+    }
+    // ── Draw ───────────────────────────────────────────────────
+    draw() {
+        const { ctx, w, h } = this;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, w * this.dpr, h * this.dpr);
+        // Background
+        ctx.fillStyle = '#080d1a';
+        ctx.fillRect(0, 0, w * this.dpr, h * this.dpr);
+        // Dot grid (screen-space)
+        this.drawGrid();
+        // World-space transforms
+        ctx.save();
+        ctx.scale(this.dpr, this.dpr);
+        ctx.translate(this.tx, this.ty);
+        ctx.scale(this.scale, this.scale);
+        const sel = this.filter.selectedId;
+        const vis = this.filter.visibleNodeIds;
+        const hrel = this.filter.highlightRelTypes;
+        const hov = this.hoveredId;
+        const isHighlightedEdge = (e) => {
+            if (sel && (e.source.id === sel || e.target.id === sel))
+                return true;
+            if (hov && (e.source.id === hov || e.target.id === hov))
+                return true;
+            if (hrel.size > 0 && hrel.has(e.type))
+                return true;
+            return false;
+        };
+        // Precompute hovered-node neighbors for dimming
+        const hovNeighbors = hov ? new Set(this.edges
+            .filter((e) => e.source.id === hov || e.target.id === hov)
+            .flatMap((e) => [e.source.id, e.target.id])) : null;
+        const nodeOpacity = (nd) => {
+            if (vis && !vis.has(nd.id))
+                return 0.07;
+            // Selected node dims unrelated nodes
+            if (sel) {
+                if (nd.id === sel)
+                    return 1;
+                const connectedToSel = this.edges.some((e) => (e.source.id === sel && e.target.id === nd.id) ||
+                    (e.target.id === sel && e.source.id === nd.id));
+                return connectedToSel ? 0.85 : 0.15;
+            }
+            // Hovered node softly highlights neighbors
+            if (hov && hovNeighbors && !sel) {
+                if (nd.id === hov)
+                    return 1;
+                return hovNeighbors.has(nd.id) ? 0.85 : 0.45;
+            }
+            return 1;
+        };
+        // Rebuild spatial grid for culling
+        this.rebuildGrid();
+        // Compute viewport in world-space for culling
+        const vpLeft = -this.tx / this.scale;
+        const vpTop = -this.ty / this.scale;
+        const vpRight = vpLeft + this.w / this.scale;
+        const vpBottom = vpTop + this.h / this.scale;
+        const cullPad = 100;
+        const visibleNodesSet = new Set();
+        const vpNodes = this.getNodesInRect(vpLeft - cullPad, vpTop - cullPad, vpRight + cullPad, vpBottom + cullPad);
+        for (const n of vpNodes)
+            visibleNodesSet.add(n.id);
+        // Tag cluster blobs (behind everything)
+        this.drawTagClusters(visibleNodesSet);
+        // Edges (back) — cull edges whose endpoints are both off-screen
+        if (this.edgeBundling && !sel) {
+            this.drawBundledEdges(nodeOpacity, isHighlightedEdge, visibleNodesSet);
+        }
+        else {
+            for (const e of this.edges) {
+                if (!visibleNodesSet.has(e.source.id) && !visibleNodesSet.has(e.target.id))
+                    continue;
+                const op = Math.min(nodeOpacity(e.source), nodeOpacity(e.target));
+                this.drawEdge(e, op, isHighlightedEdge(e));
+            }
+        }
+        // Particles
+        this.drawParticles();
+        // Nodes — only draw those in viewport
+        for (const nd of vpNodes) {
+            this.drawNode(nd, nodeOpacity(nd), nd.id === sel, nd.id === this.hoveredId);
+        }
+        ctx.restore();
+        // Screen-space HUD + minimap
+        ctx.save();
+        ctx.scale(this.dpr, this.dpr);
+        this.drawHud();
+        this.drawMinimap();
+        ctx.restore();
+        // DOM tooltip
+        this.renderTooltip();
+    }
+    // ── Tag cluster blobs ─────────────────────────────────────
+    drawTagClusters(visibleNodesSet) {
+        if (this.filter.colorMode !== 'tag' || this.tagColorMap.size === 0)
+            return;
+        const vis = this.filter.visibleNodeIds;
+        const { ctx } = this;
+        // Group visible, on-screen nodes by their primary tag
+        const tagGroups = new Map();
+        for (const nd of this.nodes) {
+            if (!visibleNodesSet.has(nd.id))
+                continue;
+            if (vis && !vis.has(nd.id))
+                continue;
+            for (const t of nd.tags ?? []) {
+                if (this.tagColorMap.has(t)) {
+                    if (!tagGroups.has(t))
+                        tagGroups.set(t, []);
+                    tagGroups.get(t).push(nd);
+                    break;
+                }
+            }
+        }
+        for (const [tag, nodes] of tagGroups) {
+            if (nodes.length < 1)
+                continue;
+            const color = this.tagColorMap.get(tag);
+            const rgb = hexToRgb(color);
+            if (!rgb)
+                continue;
+            ctx.save();
+            ctx.globalAlpha = 1;
+            const PAD = 30;
+            if (nodes.length === 1) {
+                // Single node: radial halo
+                const nd = nodes[0];
+                const haloR = nd.r + PAD * 1.2;
+                const grad = ctx.createRadialGradient(nd.x, nd.y, nd.r, nd.x, nd.y, haloR);
+                grad.addColorStop(0, `rgba(${rgb.r},${rgb.g},${rgb.b},0.10)`);
+                grad.addColorStop(1, `rgba(${rgb.r},${rgb.g},${rgb.b},0)`);
+                ctx.beginPath();
+                ctx.arc(nd.x, nd.y, haloR, 0, Math.PI * 2);
+                ctx.fillStyle = grad;
+                ctx.fill();
+            }
+            else {
+                // Multiple nodes: smooth convex hull blob
+                const hull = convexHull(nodes.map((nd) => ({ x: nd.x, y: nd.y })));
+                if (hull.length < 2) {
+                    ctx.restore();
+                    continue;
+                }
+                // Expand hull points outward from centroid
+                const centX = hull.reduce((s, p) => s + p.x, 0) / hull.length;
+                const centY = hull.reduce((s, p) => s + p.y, 0) / hull.length;
+                const expanded = hull.map((p) => {
+                    const dx = p.x - centX;
+                    const dy = p.y - centY;
+                    const d = Math.sqrt(dx * dx + dy * dy) || 1;
+                    return { x: p.x + (dx / d) * PAD, y: p.y + (dy / d) * PAD };
+                });
+                const hn = expanded.length;
+                // Draw blob using catmull-rom spline through expanded hull
+                ctx.beginPath();
+                for (let i = 0; i < hn; i++) {
+                    const p0 = expanded[(i - 1 + hn) % hn];
+                    const p1 = expanded[i];
+                    const p2 = expanded[(i + 1) % hn];
+                    const p3 = expanded[(i + 2) % hn];
+                    if (i === 0) {
+                        ctx.moveTo((p0.x + p1.x) / 2, (p0.y + p1.y) / 2);
+                    }
+                    const cp1x = p1.x + (p2.x - p0.x) / 6;
+                    const cp1y = p1.y + (p2.y - p0.y) / 6;
+                    const cp2x = p2.x - (p3.x - p1.x) / 6;
+                    const cp2y = p2.y - (p3.y - p1.y) / 6;
+                    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, (p1.x + p2.x) / 2, (p1.y + p2.y) / 2);
+                }
+                ctx.closePath();
+                // Translucent fill
+                ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.055)`;
+                ctx.fill();
+                // Animated glowing border (marching ants)
+                ctx.shadowColor = color;
+                ctx.shadowBlur = 12;
+                ctx.strokeStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},0.28)`;
+                ctx.lineWidth = 1.5;
+                ctx.setLineDash([5, 4]);
+                ctx.lineDashOffset = this.dashOffset;
+                ctx.stroke();
+                ctx.setLineDash([]);
+                ctx.lineDashOffset = 0;
+                ctx.shadowBlur = 0;
+                // Tag label near centroid top edge
+                if (this.scale > 0.18) {
+                    const topY = Math.min(...expanded.map((p) => p.y)) - 6;
+                    ctx.font = `600 10px Inter, sans-serif`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'bottom';
+                    ctx.globalAlpha = 0.55;
+                    ctx.fillStyle = color;
+                    ctx.shadowColor = color;
+                    ctx.shadowBlur = 4;
+                    ctx.fillText(`#${tag}`, centX, topY);
+                    ctx.shadowBlur = 0;
+                    ctx.globalAlpha = 1;
+                }
+            }
+            ctx.restore();
+        }
+    }
+    // ── Dot grid ───────────────────────────────────────────────
+    drawGrid() {
+        const { ctx, dpr } = this;
+        const W = this.w * dpr;
+        const H = this.h * dpr;
+        const spacing = 28 * this.scale * dpr;
+        if (spacing < 8)
+            return;
+        const ox = ((this.tx * dpr % spacing) + spacing) % spacing;
+        const oy = ((this.ty * dpr % spacing) + spacing) % spacing;
+        ctx.save();
+        ctx.fillStyle = 'rgba(148,163,184,0.06)';
+        const r = 1.2 * dpr;
+        for (let x = ox; x < W; x += spacing) {
+            for (let y = oy; y < H; y += spacing) {
+                ctx.beginPath();
+                ctx.arc(x, y, r, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        ctx.restore();
+    }
+    // ── Minimap ────────────────────────────────────────────────
+    drawMinimap() {
+        if (this.nodes.length < 3)
+            return;
+        const { ctx, w, h } = this;
+        const mmW = 148, mmH = 108;
+        const mmX = w - mmW - 14;
+        const mmY = h - mmH - 14;
+        const pad = 12;
+        // Graph bounds
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const nd of this.nodes) {
+            minX = Math.min(minX, nd.x);
+            minY = Math.min(minY, nd.y);
+            maxX = Math.max(maxX, nd.x);
+            maxY = Math.max(maxY, nd.y);
+        }
+        const gw = (maxX - minX) || 1;
+        const gh = (maxY - minY) || 1;
+        const s = Math.min((mmW - pad * 2) / gw, (mmH - pad * 2) / gh);
+        const toMm = (x, y) => ({
+            x: mmX + pad + (x - minX) * s,
+            y: mmY + pad + (y - minY) * s,
+        });
+        ctx.save();
+        // Panel background
+        ctx.fillStyle = 'rgba(8,13,26,0.90)';
+        ctx.strokeStyle = 'rgba(148,163,184,0.15)';
+        ctx.lineWidth = 1;
+        if (ctx.roundRect) {
+            ctx.beginPath();
+            ctx.roundRect(mmX, mmY, mmW, mmH, 8);
+            ctx.fill();
+            ctx.stroke();
+        }
+        else {
+            ctx.fillRect(mmX, mmY, mmW, mmH);
+            ctx.strokeRect(mmX, mmY, mmW, mmH);
+        }
+        // Clip to minimap area
+        ctx.beginPath();
+        ctx.rect(mmX + 1, mmY + 1, mmW - 2, mmH - 2);
+        ctx.clip();
+        // Edges
+        ctx.strokeStyle = 'rgba(148,163,184,0.12)';
+        ctx.lineWidth = 0.7;
+        for (const e of this.edges) {
+            const a = toMm(e.source.x, e.source.y);
+            const b = toMm(e.target.x, e.target.y);
+            ctx.beginPath();
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(b.x, b.y);
+            ctx.stroke();
+        }
+        // Nodes
+        const sel = this.filter.selectedId;
+        const vis = this.filter.visibleNodeIds;
+        for (const nd of this.nodes) {
+            const { x, y } = toMm(nd.x, nd.y);
+            const r = nd.id === sel ? 4 : 2;
+            const dim = !!(vis && !vis.has(nd.id));
+            ctx.globalAlpha = dim ? 0.18 : nd.id === sel ? 1 : 0.65;
+            if (nd.id === sel) {
+                ctx.shadowColor = nd.color;
+                ctx.shadowBlur = 6;
+            }
+            ctx.fillStyle = nd.color;
+            ctx.beginPath();
+            ctx.arc(x, y, r, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+        }
+        ctx.globalAlpha = 1;
+        // Viewport box
+        const vpX1 = (-this.tx) / this.scale;
+        const vpY1 = (-this.ty) / this.scale;
+        const vpX2 = vpX1 + this.w / this.scale;
+        const vpY2 = vpY1 + this.h / this.scale;
+        const va = toMm(vpX1, vpY1);
+        const vb = toMm(vpX2, vpY2);
+        ctx.strokeStyle = 'rgba(45,212,191,0.6)';
+        ctx.lineWidth = 1.2;
+        ctx.strokeRect(Math.min(va.x, vb.x), Math.min(va.y, vb.y), Math.abs(vb.x - va.x), Math.abs(vb.y - va.y));
+        ctx.restore();
+    }
+    // ── Particles ──────────────────────────────────────────────
+    drawParticles() {
+        const { ctx } = this;
+        for (const p of this.particles) {
+            const e = p.edge;
+            const s = e.source;
+            const t = e.target;
+            const x = lerp(s.x, t.x, p.t);
+            const y = lerp(s.y, t.y, p.t);
+            const color = getEdgeColor(e.type);
+            const fade = p.t < 0.12 ? p.t / 0.12 : p.t > 0.88 ? (1 - p.t) / 0.12 : 1;
+            ctx.save();
+            ctx.globalAlpha = 0.88 * fade;
+            ctx.fillStyle = color;
+            ctx.shadowColor = color;
+            ctx.shadowBlur = 8;
+            ctx.beginPath();
+            ctx.arc(x, y, 2.8, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+    // ── Bundled edges ────────────────────────────────────────
+    drawBundledEdges(nodeOpacity, isHighlightedEdge, visibleNodesSet) {
+        const { ctx } = this;
+        // Group edges by type and draw as bundled curves through centroid
+        const byType = new Map();
+        for (const e of this.edges) {
+            if (!visibleNodesSet.has(e.source.id) && !visibleNodesSet.has(e.target.id))
+                continue;
+            let arr = byType.get(e.type);
+            if (!arr) {
+                arr = [];
+                byType.set(e.type, arr);
+            }
+            arr.push(e);
+        }
+        for (const [type, edges] of byType) {
+            if (edges.length < 4) {
+                // Too few edges to bundle — draw normally
+                for (const e of edges) {
+                    const op = Math.min(nodeOpacity(e.source), nodeOpacity(e.target));
+                    this.drawEdge(e, op, isHighlightedEdge(e));
+                }
+                continue;
+            }
+            const color = getEdgeColor(type);
+            ctx.save();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 0.5;
+            ctx.globalAlpha = 0.25;
+            // Compute centroid of all edge endpoints
+            let cx = 0, cy = 0, count = 0;
+            for (const e of edges) {
+                cx += e.source.x + e.target.x;
+                cy += e.source.y + e.target.y;
+                count += 2;
+            }
+            cx /= count;
+            cy /= count;
+            for (const e of edges) {
+                const op = Math.min(nodeOpacity(e.source), nodeOpacity(e.target));
+                if (op < 0.1)
+                    continue;
+                ctx.globalAlpha = op * 0.3;
+                ctx.beginPath();
+                ctx.moveTo(e.source.x, e.source.y);
+                // Bezier through a point biased toward centroid
+                const mx = (e.source.x + e.target.x) / 2;
+                const my = (e.source.y + e.target.y) / 2;
+                const bpx = mx + (cx - mx) * 0.3;
+                const bpy = my + (cy - my) * 0.3;
+                ctx.quadraticCurveTo(bpx, bpy, e.target.x, e.target.y);
+                ctx.stroke();
+            }
+            ctx.restore();
+        }
+    }
+    // ── Edge ───────────────────────────────────────────────────
+    drawEdge(edge, opacity, highlighted) {
+        const { ctx } = this;
+        const { source: s, target: t } = edge;
+        const onCritPath = this.filter.criticalPathIds.has(s.id) && this.filter.criticalPathIds.has(t.id);
+        const dx = t.x - s.x;
+        const dy = t.y - s.y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        if (len < 1)
+            return;
+        // Perpendicular unit vector
+        const px = -dy / len;
+        const py = dx / len;
+        // Determine curvature direction for bidirectional edges
+        const key = [s.id, t.id].sort().join('|');
+        const isBiDir = this.biDirPairs.has(key);
+        const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+        const curvature = isBiDir ? 0.22 : 0.0;
+        const cpFactor = len * curvature * curveDir;
+        // Control point (on the perpendicular bisector)
+        const cpX = (s.x + t.x) / 2 + px * cpFactor;
+        const cpY = (s.y + t.y) / 2 + py * cpFactor;
+        // Start/end points offset from node radii
+        const nx = dx / len;
+        const ny = dy / len;
+        const x1 = s.x + nx * s.r;
+        const y1 = s.y + ny * s.r;
+        const x2 = t.x - nx * (t.r + 7);
+        const y2 = t.y - ny * (t.r + 7);
+        const color = onCritPath ? '#fbbf24' : getEdgeColor(edge.type);
+        const isActive = highlighted || onCritPath;
+        ctx.save();
+        ctx.globalAlpha = opacity * (isActive ? 0.95 : 0.42);
+        ctx.lineWidth = isActive ? (onCritPath && !highlighted ? 2.0 : 1.8) : 1.1;
+        if (isActive) {
+            // Gradient stroke from source to target node color for highlighted edges
+            if (!onCritPath && s.color !== t.color) {
+                const grad = ctx.createLinearGradient(x1, y1, x2, y2);
+                const sRgb = hexToRgb(s.color);
+                const tRgb = hexToRgb(t.color);
+                if (sRgb && tRgb) {
+                    grad.addColorStop(0, `rgba(${sRgb.r},${sRgb.g},${sRgb.b},0.9)`);
+                    grad.addColorStop(1, `rgba(${tRgb.r},${tRgb.g},${tRgb.b},0.9)`);
+                    ctx.strokeStyle = grad;
+                }
+                else {
+                    ctx.strokeStyle = color;
+                }
+            }
+            else {
+                ctx.strokeStyle = color;
+            }
+            ctx.shadowColor = color;
+            ctx.shadowBlur = onCritPath ? 8 : 5;
+        }
+        else {
+            ctx.strokeStyle = EDGE_DEFAULT;
+        }
+        // Draw straight line or quadratic bezier
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        if (isBiDir) {
+            ctx.quadraticCurveTo(cpX, cpY, x2, y2);
+        }
+        else {
+            ctx.lineTo(x2, y2);
+        }
+        ctx.stroke();
+        // Arrowhead: tangent direction at the endpoint
+        if (len > 28) {
+            let angle;
+            if (isBiDir) {
+                // Tangent at end of quadratic bezier: direction from CP to endpoint
+                angle = Math.atan2(y2 - cpY, x2 - cpX);
+            }
+            else {
+                angle = Math.atan2(dy, dx);
+            }
+            const aw = isBiDir ? 8 : 7;
+            const aa = isBiDir ? 0.38 : 0.42;
+            // Position arrowhead at the actual edge endpoint (where bezier meets target offset)
+            const ax = x2;
+            const ay = y2;
+            ctx.fillStyle = isActive ? color : 'rgba(148,163,184,0.4)';
+            ctx.globalAlpha = opacity * (isActive ? 0.92 : 0.42);
+            ctx.shadowBlur = 0;
+            ctx.beginPath();
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax - aw * Math.cos(angle - aa), ay - aw * Math.sin(angle - aa));
+            // Small notch for better definition on curved edges
+            const notchLen = aw * 0.35;
+            ctx.lineTo(ax - notchLen * Math.cos(angle), ay - notchLen * Math.sin(angle));
+            ctx.lineTo(ax - aw * Math.cos(angle + aa), ay - aw * Math.sin(angle + aa));
+            ctx.closePath();
+            ctx.fill();
+        }
+        // Edge label — midpoint of the bezier curve
+        if (isActive && this.scale > 0.55) {
+            const mx = isBiDir ? (x1 + 2 * cpX + x2) / 4 : (x1 + x2) / 2;
+            const my = isBiDir ? (y1 + 2 * cpY + y2) / 4 : (y1 + y2) / 2;
+            ctx.globalAlpha = opacity * 0.82;
+            ctx.shadowBlur = 0;
+            ctx.font = '9px JetBrains Mono, monospace';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            const tw = ctx.measureText(edge.type).width + 8;
+            ctx.fillStyle = 'rgba(8,13,26,0.78)';
+            ctx.fillRect(mx - tw / 2, my - 7, tw, 14);
+            ctx.fillStyle = hexAlpha(color, 0.9);
+            ctx.fillText(edge.type, mx, my);
+        }
+        ctx.restore();
+    }
+    // ── Node ───────────────────────────────────────────────────
+    drawNode(node, opacity, selected, hovered) {
+        const { ctx } = this;
+        const { x, y, r, color } = node;
+        const prominent = selected || hovered;
+        const pulse = selected ? (Math.sin(this.pulseT) * 0.5 + 0.5) : 0;
+        const onCritPath = this.filter.criticalPathIds.has(node.id);
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        // Critical path outer ring (gold/amber)
+        if (onCritPath && !selected) {
+            const cp = Math.sin(this.pulseT * 0.7) * 0.5 + 0.5;
+            ctx.strokeStyle = hexAlpha('#fbbf24', 0.55 + cp * 0.30);
+            ctx.lineWidth = 2.2;
+            ctx.shadowColor = '#fbbf24';
+            ctx.shadowBlur = 10 + cp * 8;
+            ctx.beginPath();
+            ctx.arc(x, y, r + 5, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.shadowBlur = 0;
+        }
+        // Outer pulse ring (selected)
+        if (selected) {
+            ctx.strokeStyle = hexAlpha(color, 0.28 + pulse * 0.38);
+            ctx.lineWidth = 2;
+            ctx.shadowColor = color;
+            ctx.shadowBlur = 14 + pulse * 18;
+            ctx.beginPath();
+            ctx.arc(x, y, r + 6 + pulse * 5, 0, Math.PI * 2);
+            ctx.stroke();
+            ctx.shadowBlur = 0;
+        }
+        // Ambient glow on all nodes (subtle for non-selected, stronger for selected/hovered)
+        ctx.shadowColor = color;
+        ctx.shadowBlur = selected ? (18 + pulse * 10) : hovered ? 10 : (r > 10 ? 5 : 3);
+        // Radial gradient fill — more vibrant on non-selected nodes than before
+        const grad = ctx.createRadialGradient(x - r * 0.32, y - r * 0.32, r * 0.08, x, y, r);
+        if (selected) {
+            grad.addColorStop(0, hexAlpha(color, 1.0));
+            grad.addColorStop(1, hexAlpha(color, 0.65));
+        }
+        else if (hovered) {
+            grad.addColorStop(0, hexAlpha(color, 0.72));
+            grad.addColorStop(1, hexAlpha(color, 0.28));
+        }
+        else {
+            grad.addColorStop(0, hexAlpha(color, 0.55));
+            grad.addColorStop(1, hexAlpha(color, 0.15));
+        }
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.fillStyle = grad;
+        ctx.fill();
+        // Stroke — more vivid for all nodes
+        ctx.shadowBlur = 0;
+        ctx.strokeStyle = hexAlpha(color, selected ? 1 : hovered ? 0.92 : 0.72);
+        ctx.lineWidth = selected ? 2.2 : hovered ? 1.8 : 1.2;
+        ctx.stroke();
+        // Type icon or inner dot
+        const abbr = node.lane === 'item' ? (TYPE_ABBR[node.type.toLowerCase()] ?? '') : '';
+        const showIcon = this.scale > 0.20 || prominent;
+        if (r >= 9 && showIcon && abbr) {
+            const iSize = Math.max(7, Math.min(12, r * 0.62));
+            ctx.font = `700 ${iSize}px 'JetBrains Mono', monospace`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.shadowBlur = 0;
+            ctx.fillStyle = selected
+                ? 'rgba(255,255,255,0.92)'
+                : hovered
+                    ? 'rgba(226,232,240,0.88)'
+                    : hexAlpha(color, 0.78);
+            ctx.fillText(abbr, x, y);
+        }
+        else if (r >= 11 && node.lane === 'item') {
+            // Fallback dot when no abbr or low zoom
+            ctx.beginPath();
+            ctx.arc(x, y, r * 0.25, 0, Math.PI * 2);
+            ctx.fillStyle = selected ? 'rgba(255,255,255,0.75)' : hexAlpha(color, 0.55);
+            ctx.fill();
+        }
+        // Label — always show at scale > 0.14 (was 0.32), with background pill for readability
+        const showLabel = this.scale > 0.14 || prominent;
+        if (showLabel) {
+            const maxLen = this.scale > 0.72 ? 28 : this.scale > 0.45 ? 20 : this.scale > 0.25 ? 15 : 10;
+            const label = truncate(node.label || node.id, maxLen);
+            const fSize = prominent ? Math.max(10, Math.min(13, r * 0.95)) : Math.max(9, Math.min(12, r * 0.85));
+            const labelAlpha = selected ? 1.0 : hovered ? 0.96 : this.scale > 0.45 ? 0.82 : 0.62;
+            ctx.font = `${selected ? 600 : 400} ${fSize}px Inter, sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'top';
+            const labelY = y + r + 5;
+            const textW = ctx.measureText(label).width;
+            const pillW = textW + 8;
+            const pillH = fSize + 5;
+            // Background pill for readability (skip when very faint)
+            if (labelAlpha > 0.35) {
+                ctx.globalAlpha = opacity * labelAlpha * 0.72;
+                ctx.fillStyle = 'rgba(8,13,26,0.75)';
+                ctx.shadowBlur = 0;
+                if (ctx.roundRect) {
+                    ctx.beginPath();
+                    ctx.roundRect(x - pillW / 2, labelY - 2, pillW, pillH, 3);
+                    ctx.fill();
+                }
+                else {
+                    ctx.fillRect(x - pillW / 2, labelY - 2, pillW, pillH);
+                }
+            }
+            ctx.globalAlpha = opacity * labelAlpha;
+            ctx.shadowBlur = prominent ? 6 : 0;
+            ctx.shadowColor = '#000';
+            ctx.fillStyle = selected
+                ? '#ffffff'
+                : hovered
+                    ? 'rgba(226,232,240,0.98)'
+                    : 'rgba(203,213,225,0.88)';
+            ctx.fillText(label, x, labelY);
+            ctx.shadowBlur = 0;
+            ctx.globalAlpha = opacity;
+        }
+        ctx.restore();
+    }
+    // ── HUD (screen-space) ─────────────────────────────────────
+    drawHud() {
+        const { ctx, w, h } = this;
+        const simActive = !this.paused && this.alpha > this.ALPHA_MIN;
+        ctx.save();
+        // Keyboard hint (top bar, very subtle)
+        if (this.nodes.length > 0) {
+            ctx.globalAlpha = 0.28;
+            ctx.font = '10px Inter, sans-serif';
+            ctx.fillStyle = '#94a3b8';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'top';
+            ctx.fillText('Tab: next  Shift+Tab: prev  ↑↓ or →: neighbor  Enter: open  F: fit  Esc: deselect', 12, 10);
+            ctx.globalAlpha = 1;
+        }
+        // Sim activity dot (top-right)
+        if (simActive) {
+            ctx.globalAlpha = 0.7;
+            ctx.fillStyle = '#2dd4bf';
+            ctx.shadowColor = '#2dd4bf';
+            ctx.shadowBlur = 8;
+            ctx.beginPath();
+            ctx.arc(w - 18, 18, 5, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.shadowBlur = 0;
+            ctx.globalAlpha = 1;
+        }
+        // Node + edge count (bottom-left)
+        const nodeCount = this.filter.visibleNodeIds
+            ? `${this.filter.visibleNodeIds.size}/${this.nodes.length} nodes`
+            : `${this.nodes.length} nodes · ${this.edges.length} edges`;
+        ctx.globalAlpha = 0.45;
+        ctx.font = '10px Inter, sans-serif';
+        ctx.fillStyle = '#94a3b8';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'bottom';
+        ctx.fillText(nodeCount, 14, h - 36);
+        ctx.globalAlpha = 1;
+        // Zoom badge (bottom-left)
+        const zoomTxt = `${Math.round(this.scale * 100)}%`;
+        ctx.font = '11px JetBrains Mono, monospace';
+        const tw = ctx.measureText(zoomTxt).width + 18;
+        ctx.fillStyle = 'rgba(8,13,26,0.75)';
+        ctx.globalAlpha = 0.9;
+        if (ctx.roundRect) {
+            ctx.beginPath();
+            ctx.roundRect(12, h - 30, tw, 20, 4);
+            ctx.fill();
+        }
+        else {
+            ctx.fillRect(12, h - 30, tw, 20);
+        }
+        ctx.fillStyle = '#94a3b8';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(zoomTxt, 21, h - 20);
+        ctx.globalAlpha = 1;
+        ctx.restore();
+    }
+    // ── Tooltip (DOM) ──────────────────────────────────────────
+    renderTooltip() {
+        const edge = this.hoveredEdge;
+        const node = this.hoveredId ? this.nodeMap.get(this.hoveredId) : null;
+        if ((!edge && (!node || node.id === this.filter.selectedId))) {
+            this.hideTooltip();
+            return;
+        }
+        let tt = document.getElementById('gc-tooltip');
+        if (!tt) {
+            tt = document.createElement('div');
+            tt.id = 'gc-tooltip';
+            tt.style.cssText = [
+                'position:fixed',
+                'z-index:9999',
+                'pointer-events:none',
+                'background:rgba(10,15,30,0.96)',
+                'border:1px solid rgba(148,163,184,0.18)',
+                'border-radius:10px',
+                'padding:10px 14px',
+                'font-family:Inter,sans-serif',
+                'font-size:12px',
+                'color:#e2e8f0',
+                'max-width:240px',
+                'backdrop-filter:blur(12px)',
+                'box-shadow:0 8px 32px rgba(0,0,0,0.6)',
+                'transition:opacity 0.1s ease',
+                'line-height:1.5',
+            ].join(';');
+            document.body.appendChild(tt);
+        }
+        const tooltipData = edge ? {
+            kind: 'edge',
+            edge,
+            fromNode: this.nodeMap.get(edge.source.id),
+            toNode: this.nodeMap.get(edge.target.id),
+        } : {
+            kind: 'node',
+            node,
+        };
+        if (tooltipData.kind === 'edge') {
+            const fromName = tooltipData.fromNode?.label || tooltipData.fromNode?.id || tooltipData.edge.source.id;
+            const toName = tooltipData.toNode?.label || tooltipData.toNode?.id || tooltipData.edge.target.id;
+            const directionText = `${escHtml(fromName)} → ${escHtml(toName)}`;
+            tt.innerHTML = `
+        <div style="font-weight:600;font-size:13px;margin-bottom:6px;color:#f1f5f9;word-break:break-all;display:flex;align-items:center;gap:7px;">
+          <span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:${getEdgeColor(tooltipData.edge.type)};flex-shrink:0;box-shadow:0 0 6px ${getEdgeColor(tooltipData.edge.type)}"></span>
+          Relationship
+        </div>
+        <div style="color:#94a3b8;font-size:10px;letter-spacing:0.02em;font-family:'JetBrains Mono',monospace;margin-bottom:6px;">${tooltipData.edge.type}</div>
+        <div style="font-size:11px;line-height:1.4;color:#e2e8f0;"><strong style="color:#64748b">From:</strong> ${directionText}</div>
+        <div style="margin-top:4px;padding-top:7px;border-top:1px solid rgba(148,163,184,0.1);color:#475569;font-size:10px;">
+          Right-click for actions
+        </div>
+      `;
+        }
+        else {
+            const n = tooltipData.node;
+            if (!n) {
+                return;
+            }
+            const degText = `${n.degree} link${n.degree !== 1 ? 's' : ''}`;
+            const laneLabel = n.lane === 'facet' ? 'Metadata' : n.lane === 'external' ? 'External' : 'Item';
+            const tags = n.tags ?? [];
+            const tagHtml = tags.length > 0
+                ? `<div style="margin-top:7px;display:flex;flex-wrap:wrap;gap:3px;">${tags.slice(0, 6).map((t) => {
+                    const tc = this.tagColorMap.get(t) ?? '#64748b';
+                    return `<span style="font-size:9px;padding:1px 5px;border-radius:8px;background:${hexAlpha(tc, 0.18)};color:${tc};border:1px solid ${hexAlpha(tc, 0.35)}">#${escHtml(t)}</span>`;
+                }).join('')}</div>` : '';
+            tt.innerHTML = `
+        <div style="font-weight:600;font-size:13px;margin-bottom:5px;color:#f1f5f9;word-break:break-all;display:flex;align-items:center;gap:7px;">
+          <span style="display:inline-block;width:9px;height:9px;border-radius:50%;background:${n.color};flex-shrink:0;box-shadow:0 0 6px ${n.color}"></span>
+          ${escHtml(n.label || n.id)}
+        </div>
+        <div style="color:#475569;font-size:10px;font-family:'JetBrains Mono',monospace;margin-bottom:8px;word-break:break-all;">${escHtml(n.id)}</div>
+        <div style="display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:11px;">
+          <span style="color:#64748b;">Type</span><span>${escHtml(n.type)}</span>
+          <span style="color:#64748b;">Status</span><span style="color:${n.color};">${escHtml(n.status)}</span>
+          ${n.priority !== undefined && n.priority !== null ? `<span style="color:#64748b;">Priority</span><span>${escHtml(String(n.priority))}</span>` : ''}
+          ${n.assignee ? `<span style="color:#64748b;">Assignee</span><span>${escHtml(n.assignee)}</span>` : ''}
+          <span style="color:#64748b;">Lane</span><span>${escHtml(laneLabel)}</span>
+          <span style="color:#64748b;">Links</span><span>${escHtml(degText)}</span>
+        </div>
+        ${tagHtml}
+        <div style="margin-top:8px;padding-top:7px;border-top:1px solid rgba(148,163,184,0.1);color:#475569;font-size:10px;">
+          Click to select · Double-click to open
+        </div>
+      `;
+        }
+        tt.style.display = 'block';
+        tt.style.opacity = '1';
+        // Position near cursor / node
+        const rect = this.canvas.getBoundingClientRect();
+        let rawX, rawY;
+        if (tooltipData.kind === 'node' && tooltipData.node) {
+            rawX = tooltipData.node.x;
+            rawY = tooltipData.node.y;
+        }
+        else if (tooltipData.kind === 'edge' && tooltipData.fromNode && tooltipData.toNode) {
+            rawX = (tooltipData.fromNode.x + tooltipData.toNode.x) / 2;
+            rawY = (tooltipData.fromNode.y + tooltipData.toNode.y) / 2;
+        }
+        else {
+            rawX = 0;
+            rawY = 0;
+        }
+        const sx = rawX * this.scale + this.tx + rect.left;
+        const sy = rawY * this.scale + this.ty + rect.top;
+        const ttW = 250;
+        const left = Math.min(sx + 18, window.innerWidth - ttW - 10);
+        const top = Math.max(sy - 70, 8);
+        tt.style.left = `${left}px`;
+        tt.style.top = `${top}px`;
+    }
+    hideTooltip() {
+        const tt = document.getElementById('gc-tooltip');
+        if (tt)
+            tt.style.opacity = '0';
+    }
+    // ── Camera ─────────────────────────────────────────────────
+    zoom(delta, px, py) {
+        const factor = delta > 0 ? 1.11 : 1 / 1.11;
+        const newScale = Math.max(0.04, Math.min(6, this.scale * factor));
+        this.tx = px - (px - this.tx) * (newScale / this.scale);
+        this.ty = py - (py - this.ty) * (newScale / this.scale);
+        this.scale = newScale;
+        this.flyTarget = null;
+    }
+    toWorld(px, py) {
+        return [(px - this.tx) / this.scale, (py - this.ty) / this.scale];
+    }
+    hitTest(wx, wy) {
+        const vis = this.filter.visibleNodeIds;
+        // Use spatial grid for O(1) cell lookup
+        const cs = this.gridCellSize;
+        const cx = Math.floor((wx - this.gridOriginX) / cs);
+        const cy = Math.floor((wy - this.gridOriginY) / cs);
+        // Check this cell and immediate neighbors
+        let best = null;
+        let bestDist = Infinity;
+        for (let dx = -1; dx <= 1; dx++) {
+            for (let dy = -1; dy <= 1; dy++) {
+                const cell = this.gridCells.get((cx + dx) * 10000 + (cy + dy));
+                if (!cell)
+                    continue;
+                for (const nd of cell) {
+                    if (vis && !vis.has(nd.id))
+                        continue;
+                    const ddx = wx - nd.x;
+                    const ddy = wy - nd.y;
+                    const hitR = (nd.r + 6);
+                    const d2 = ddx * ddx + ddy * ddy;
+                    if (d2 <= hitR * hitR && d2 < bestDist) {
+                        best = nd;
+                        bestDist = d2;
+                    }
+                }
+            }
+        }
+        return best;
+    }
+    // ── Events ─────────────────────────────────────────────────
+    getPos(e) {
+        const r = this.canvas.getBoundingClientRect();
+        return { x: e.clientX - r.left, y: e.clientY - r.top };
+    }
+    bindEvents() {
+        const sig = { signal: this.abortCtrl.signal };
+        this.canvas.addEventListener('mousedown', (e) => this.onMouseDown(e), sig);
+        window.addEventListener('mousemove', (e) => this.onMouseMove(e), sig);
+        window.addEventListener('mouseup', (e) => this.onMouseUp(e), sig);
+        this.canvas.addEventListener('wheel', (e) => this.onWheel(e), { ...sig, passive: false });
+        this.canvas.addEventListener('dblclick', (e) => this.onDblClick(e), sig);
+        this.canvas.addEventListener('keydown', (e) => this.onKeyDown(e), sig);
+        this.canvas.addEventListener('mouseleave', () => { this.hideTooltip(); this.hoveredId = null; }, sig);
+        this.canvas.addEventListener('contextmenu', (e) => this.onCtxMenu(e), sig);
+        this.canvas.addEventListener('touchstart', (e) => this.onTouchStart(e), { ...sig, passive: false });
+        this.canvas.addEventListener('touchmove', (e) => this.onTouchMove(e), { ...sig, passive: false });
+        this.canvas.addEventListener('touchend', (e) => this.onTouchEnd(e), { ...sig, passive: false });
+    }
+    onCtxMenu(e) {
+        e.preventDefault();
+        const { x, y } = this.getPos(e);
+        const [wx, wy] = this.toWorld(x, y);
+        const hit = this.hitTest(wx, wy);
+        if (!hit)
+            return;
+        this.canvas.focus();
+        this.onContextMenu(hit.id, e.clientX, e.clientY);
+    }
+    onKeyDown(e) {
+        switch (e.key) {
+            case 'Tab':
+                e.preventDefault();
+                this.navigateToNeighbor(e.shiftKey ? 'prev' : 'next');
+                break;
+            case 'ArrowRight':
+            case 'ArrowDown':
+                e.preventDefault();
+                this.navigateToNeighbor('first-neighbor');
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                e.preventDefault();
+                this.navigateToNeighbor('prev');
+                break;
+            case 'Escape':
+                if (this.filter.selectedId) {
+                    this.filter = { ...this.filter, selectedId: null };
+                    this.particles = [];
+                    this.onSelectNode(null);
+                }
+                break;
+            case 'Enter':
+                if (this.filter.selectedId) {
+                    this.onOpenNode(this.filter.selectedId);
+                }
+                break;
+            case 'f':
+            case 'F':
+                this.fitView();
+                break;
+        }
+    }
+    onMouseDown(e) {
+        if (e.button !== 0)
+            return;
+        this.canvas.focus();
+        const { x, y } = this.getPos(e);
+        this.lastX = x;
+        this.lastY = y;
+        this.downX = x;
+        this.downY = y;
+        this.hasMoved = false;
+        const [wx, wy] = this.toWorld(x, y);
+        const hit = this.hitTest(wx, wy);
+        if (hit) {
+            this.isDraggingNode = true;
+            this.dragNode = hit;
+            hit.fx = hit.x;
+            hit.fy = hit.y;
+            this.alpha = Math.max(this.alpha, 0.25);
+            this.canvas.style.cursor = 'grabbing';
+        }
+        else {
+            this.isDraggingCanvas = true;
+            this.canvas.style.cursor = 'grabbing';
+        }
+    }
+    onMouseMove(e) {
+        const r = this.canvas.getBoundingClientRect();
+        const x = e.clientX - r.left;
+        const y = e.clientY - r.top;
+        const dx = x - this.lastX;
+        const dy = y - this.lastY;
+        if (Math.abs(x - this.downX) > 3 || Math.abs(y - this.downY) > 3)
+            this.hasMoved = true;
+        if (this.isDraggingNode && this.dragNode) {
+            const [wx, wy] = this.toWorld(x, y);
+            this.dragNode.fx = wx;
+            this.dragNode.fy = wy;
+            this.flyTarget = null;
+        }
+        else if (this.isDraggingCanvas) {
+            this.tx += dx;
+            this.ty += dy;
+            this.flyTarget = null;
+        }
+        else {
+            const [wx, wy] = this.toWorld(x, y);
+            const hit = this.hitTest(wx, wy);
+            const newHov = hit?.id ?? null;
+            if (newHov !== this.hoveredId) {
+                this.hoveredId = newHov;
+                this.canvas.style.cursor = newHov ? 'pointer' : 'grab';
+                if (!newHov)
+                    this.hideTooltip();
+            }
+        }
+        this.lastX = x;
+        this.lastY = y;
+    }
+    onMouseUp(e) {
+        if (e.button !== 0)
+            return;
+        if (this.isDraggingNode && this.dragNode) {
+            if (!this.hasMoved) {
+                const id = this.dragNode.id;
+                const newSel = this.filter.selectedId === id ? null : id;
+                this.filter = { ...this.filter, selectedId: newSel };
+                this.particles = [];
+                this.lastParticleSpawn = 0;
+                this.onSelectNode(newSel);
+                if (newSel)
+                    this.flyTo(this.dragNode);
+            }
+            this.dragNode.fx = null;
+            this.dragNode.fy = null;
+            this.dragNode = null;
+            this.isDraggingNode = false;
+        }
+        else if (this.isDraggingCanvas) {
+            this.isDraggingCanvas = false;
+            if (!this.hasMoved && this.filter.selectedId) {
+                this.filter = { ...this.filter, selectedId: null };
+                this.particles = [];
+                this.onSelectNode(null);
+            }
+        }
+        this.canvas.style.cursor = this.hoveredId ? 'pointer' : 'grab';
+    }
+    onWheel(e) {
+        e.preventDefault();
+        const { x, y } = this.getPos(e);
+        const delta = e.deltaMode === 1 ? -e.deltaY * 20 : -e.deltaY;
+        this.zoom(delta, x, y);
+    }
+    onDblClick(e) {
+        const { x, y } = this.getPos(e);
+        const [wx, wy] = this.toWorld(x, y);
+        const hit = this.hitTest(wx, wy);
+        if (hit)
+            this.onOpenNode(hit.id);
+    }
+    onTouchStart(e) {
+        e.preventDefault();
+        const rect = this.canvas.getBoundingClientRect();
+        if (e.touches.length === 1) {
+            const x = e.touches[0].clientX - rect.left;
+            const y = e.touches[0].clientY - rect.top;
+            this.lastX = x;
+            this.lastY = y;
+            this.downX = x;
+            this.downY = y;
+            this.hasMoved = false;
+            const [wx, wy] = this.toWorld(x, y);
+            const hit = this.hitTest(wx, wy);
+            if (hit) {
+                this.isDraggingNode = true;
+                this.dragNode = hit;
+                hit.fx = hit.x;
+                hit.fy = hit.y;
+                this.alpha = Math.max(this.alpha, 0.25);
+            }
+            else {
+                this.isDraggingCanvas = true;
+            }
+        }
+        else if (e.touches.length === 2) {
+            this.isDraggingNode = false;
+            this.isDraggingCanvas = false;
+            if (this.dragNode) {
+                this.dragNode.fx = null;
+                this.dragNode.fy = null;
+                this.dragNode = null;
+            }
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            this.touchDist = Math.sqrt(dx * dx + dy * dy);
+            this.touchMidX = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+            this.touchMidY = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+        }
+    }
+    onTouchMove(e) {
+        e.preventDefault();
+        const rect = this.canvas.getBoundingClientRect();
+        if (e.touches.length === 1) {
+            const x = e.touches[0].clientX - rect.left;
+            const y = e.touches[0].clientY - rect.top;
+            const dx = x - this.lastX;
+            const dy = y - this.lastY;
+            if (Math.abs(x - this.downX) > 5 || Math.abs(y - this.downY) > 5)
+                this.hasMoved = true;
+            if (this.isDraggingNode && this.dragNode) {
+                const [wx, wy] = this.toWorld(x, y);
+                this.dragNode.fx = wx;
+                this.dragNode.fy = wy;
+            }
+            else if (this.isDraggingCanvas) {
+                this.tx += dx;
+                this.ty += dy;
+                this.flyTarget = null;
+            }
+            this.lastX = x;
+            this.lastY = y;
+        }
+        else if (e.touches.length === 2) {
+            const dx = e.touches[0].clientX - e.touches[1].clientX;
+            const dy = e.touches[0].clientY - e.touches[1].clientY;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+            const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2 - rect.top;
+            this.zoom((dist - this.touchDist) * 0.6, midX, midY);
+            this.tx += midX - this.touchMidX;
+            this.ty += midY - this.touchMidY;
+            this.touchDist = dist;
+            this.touchMidX = midX;
+            this.touchMidY = midY;
+            this.flyTarget = null;
+        }
+    }
+    onTouchEnd(e) {
+        e.preventDefault();
+        if (e.touches.length === 0) {
+            if (this.isDraggingNode && this.dragNode) {
+                if (!this.hasMoved) {
+                    const id = this.dragNode.id;
+                    const newSel = this.filter.selectedId === id ? null : id;
+                    this.filter = { ...this.filter, selectedId: newSel };
+                    this.particles = [];
+                    this.lastParticleSpawn = 0;
+                    this.onSelectNode(newSel);
+                    if (newSel)
+                        this.flyTo(this.dragNode);
+                }
+                this.dragNode.fx = null;
+                this.dragNode.fy = null;
+                this.dragNode = null;
+            }
+            this.isDraggingNode = false;
+            this.isDraggingCanvas = false;
+        }
+    }
+    // ── Resize ─────────────────────────────────────────────────
+    onResize() {
+        const rect = this.canvas.getBoundingClientRect();
+        this.w = rect.width;
+        this.h = rect.height;
+        this.canvas.width = rect.width * this.dpr;
+        this.canvas.height = rect.height * this.dpr;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    }
+    // ── RAF loop ───────────────────────────────────────────────
+    startLoop() {
+        let last = performance.now();
+        const loop = (now) => {
+            if (this.destroyed)
+                return;
+            const dt = Math.min(now - last, 80);
+            last = now;
+            this.tick(dt);
+            this.advanceFly();
+            this.draw();
+            this.rafId = requestAnimationFrame(loop);
+        };
+        this.rafId = requestAnimationFrame(loop);
+    }
+}
+//# sourceMappingURL=graph-canvas.js.map