snice 4.8.0 → 4.9.0

package/dist/components/network-graph/snice-network-graph.js

@@ -0,0 +1,721 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, dispatch, ready, watch, dispose, render, styles, html, css } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;width:100%}.network-graph{position:relative;width:100%;height:100%;min-height:18.75rem;overflow:hidden;background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--snice-color-border,rgb(226 226 226));border-radius:4px}.network-graph__svg{display:block;width:100%;height:100%;cursor:grab}.network-graph__svg:active{cursor:grabbing}.network-graph__edge{stroke:var(--snice-color-border,rgb(226 226 226));stroke-width:1px;fill:none;transition:stroke var(--snice-transition-fast, 150ms) ease,stroke-opacity var(--snice-transition-fast, 150ms) ease}.network-graph__edge--highlighted{stroke-width:2px}.network-graph__edge--dimmed{stroke-opacity:0.15}.network-graph__edge-label{font-size:.625rem;fill:var(--snice-color-text-tertiary,rgb(115 115 115));text-anchor:middle;pointer-events:none;dominant-baseline:central}.network-graph__edge-label--dimmed{opacity:.15}.network-graph__node{cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms) ease}.network-graph__node--dimmed{opacity:.15}.network-graph__node--dragging{cursor:grabbing}.network-graph__node-circle{stroke:var(--snice-color-background,rgb(255 255 255));stroke-width:2px;transition:r var(--snice-transition-fast, 150ms) ease}.network-graph__node-label{font-size:.6875rem;fill:var(--snice-color-text,rgb(23 23 23));text-anchor:middle;pointer-events:none;dominant-baseline:central;font-weight:var(--snice-font-weight-medium,500)}.network-graph__node-label--dimmed{opacity:.15}.network-graph__tooltip{position:absolute;padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-text,rgb(23 23 23));color:var(--snice-color-text-inverse,rgb(250 250 250));font-size:.75rem;border-radius:4px;pointer-events:none;white-space:nowrap;z-index:10;box-shadow:var(--snice-shadow-md,0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1));transform:translate(-50%,-100%);margin-top:-.5rem;opacity:0;transition:opacity var(--snice-transition-fast, 150ms) ease}.network-graph__tooltip--visible{opacity:1}";
+
+const DEFAULT_COLORS = [
+    'rgb(37 99 235)', // blue
+    'rgb(22 163 74)', // green
+    'rgb(234 88 12)', // orange
+    'rgb(220 38 38)', // red
+    'rgb(147 51 234)', // purple
+    'rgb(6 182 212)', // cyan
+    'rgb(236 72 153)', // pink
+    'rgb(245 158 11)', // amber
+    'rgb(20 184 166)', // teal
+    'rgb(99 102 241)', // indigo
+];
+let SniceNetworkGraph = (() => {
+    let _classDecorators = [element('snice-network-graph')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _layout_decorators;
+    let _layout_initializers = [];
+    let _layout_extraInitializers = [];
+    let _chargeStrength_decorators;
+    let _chargeStrength_initializers = [];
+    let _chargeStrength_extraInitializers = [];
+    let _linkDistance_decorators;
+    let _linkDistance_initializers = [];
+    let _linkDistance_extraInitializers = [];
+    let _zoomEnabled_decorators;
+    let _zoomEnabled_initializers = [];
+    let _zoomEnabled_extraInitializers = [];
+    let _dragEnabled_decorators;
+    let _dragEnabled_initializers = [];
+    let _dragEnabled_extraInitializers = [];
+    let _showLabels_decorators;
+    let _showLabels_initializers = [];
+    let _showLabels_extraInitializers = [];
+    let _animation_decorators;
+    let _animation_initializers = [];
+    let _animation_extraInitializers = [];
+    let _svgElement_decorators;
+    let _svgElement_initializers = [];
+    let _svgElement_extraInitializers = [];
+    let _tooltipEl_decorators;
+    let _tooltipEl_initializers = [];
+    let _tooltipEl_extraInitializers = [];
+    let _emitNodeClick_decorators;
+    let _emitEdgeClick_decorators;
+    let _emitNodeDrag_decorators;
+    let _emitGraphZoom_decorators;
+    let _init_decorators;
+    let _onDataChange_decorators;
+    let _onLayoutChange_decorators;
+    let _onDisplayChange_decorators;
+    let _cleanup_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.data = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _data_initializers, { nodes: [], edges: [] }));
+            this.layout = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _layout_initializers, 'force'));
+            this.chargeStrength = (__runInitializers(this, _layout_extraInitializers), __runInitializers(this, _chargeStrength_initializers, -300));
+            this.linkDistance = (__runInitializers(this, _chargeStrength_extraInitializers), __runInitializers(this, _linkDistance_initializers, 80));
+            this.zoomEnabled = (__runInitializers(this, _linkDistance_extraInitializers), __runInitializers(this, _zoomEnabled_initializers, true));
+            this.dragEnabled = (__runInitializers(this, _zoomEnabled_extraInitializers), __runInitializers(this, _dragEnabled_initializers, true));
+            this.showLabels = (__runInitializers(this, _dragEnabled_extraInitializers), __runInitializers(this, _showLabels_initializers, true));
+            this.animation = (__runInitializers(this, _showLabels_extraInitializers), __runInitializers(this, _animation_initializers, true));
+            this.svgElement = (__runInitializers(this, _animation_extraInitializers), __runInitializers(this, _svgElement_initializers, void 0));
+            this.tooltipEl = (__runInitializers(this, _svgElement_extraInitializers), __runInitializers(this, _tooltipEl_initializers, void 0));
+            // Manually created SVG-namespace groups (template engine can't create nested SVG children)
+            this.transformGroupEl = __runInitializers(this, _tooltipEl_extraInitializers);
+            this.simNodes = [];
+            this.simEdges = [];
+            this.animFrameId = 0;
+            this.simAlpha = 1;
+            this.simRunning = false;
+            this.simInitialized = false;
+            // Zoom/pan state
+            this.zoomScale = 1;
+            this.panX = 0;
+            this.panY = 0;
+            // Drag state
+            this.dragNode = null;
+            this.dragStartX = 0;
+            this.dragStartY = 0;
+            // Pan state
+            this.isPanning = false;
+            this.panStartX = 0;
+            this.panStartY = 0;
+            this.panStartPanX = 0;
+            this.panStartPanY = 0;
+            // Hover state
+            this.hoveredNodeId = '';
+            // Bound handlers for cleanup
+            this.boundMouseMove = this.handleMouseMove.bind(this);
+            this.boundMouseUp = this.handleMouseUp.bind(this);
+            // ResizeObserver
+            this.resizeObserver = null;
+            this.containerWidth = 600;
+            this.containerHeight = 400;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: Object, attribute: false })];
+            _layout_decorators = [property({ attribute: 'layout' })];
+            _chargeStrength_decorators = [property({ type: Number, attribute: 'charge-strength' })];
+            _linkDistance_decorators = [property({ type: Number, attribute: 'link-distance' })];
+            _zoomEnabled_decorators = [property({ type: Boolean, attribute: 'zoom-enabled' })];
+            _dragEnabled_decorators = [property({ type: Boolean, attribute: 'drag-enabled' })];
+            _showLabels_decorators = [property({ type: Boolean, attribute: 'show-labels' })];
+            _animation_decorators = [property({ type: Boolean })];
+            _svgElement_decorators = [query('.network-graph__svg')];
+            _tooltipEl_decorators = [query('.network-graph__tooltip')];
+            _emitNodeClick_decorators = [dispatch('node-click', { bubbles: true, composed: true })];
+            _emitEdgeClick_decorators = [dispatch('edge-click', { bubbles: true, composed: true })];
+            _emitNodeDrag_decorators = [dispatch('node-drag', { bubbles: true, composed: true })];
+            _emitGraphZoom_decorators = [dispatch('graph-zoom', { bubbles: true, composed: true })];
+            _init_decorators = [ready()];
+            _onDataChange_decorators = [watch('data')];
+            _onLayoutChange_decorators = [watch('layout')];
+            _onDisplayChange_decorators = [watch('showLabels')];
+            _cleanup_decorators = [dispose()];
+            _renderContent_decorators = [render({ once: true })];
+            _componentStyles_decorators = [styles()];
+            __esDecorate(this, null, _emitNodeClick_decorators, { kind: "method", name: "emitNodeClick", static: false, private: false, access: { has: obj => "emitNodeClick" in obj, get: obj => obj.emitNodeClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitEdgeClick_decorators, { kind: "method", name: "emitEdgeClick", static: false, private: false, access: { has: obj => "emitEdgeClick" in obj, get: obj => obj.emitEdgeClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitNodeDrag_decorators, { kind: "method", name: "emitNodeDrag", static: false, private: false, access: { has: obj => "emitNodeDrag" in obj, get: obj => obj.emitNodeDrag }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitGraphZoom_decorators, { kind: "method", name: "emitGraphZoom", static: false, private: false, access: { has: obj => "emitGraphZoom" in obj, get: obj => obj.emitGraphZoom }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDataChange_decorators, { kind: "method", name: "onDataChange", static: false, private: false, access: { has: obj => "onDataChange" in obj, get: obj => obj.onDataChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onLayoutChange_decorators, { kind: "method", name: "onLayoutChange", static: false, private: false, access: { has: obj => "onLayoutChange" in obj, get: obj => obj.onLayoutChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onDisplayChange_decorators, { kind: "method", name: "onDisplayChange", static: false, private: false, access: { has: obj => "onDisplayChange" in obj, get: obj => obj.onDisplayChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(null, null, _layout_decorators, { kind: "field", name: "layout", static: false, private: false, access: { has: obj => "layout" in obj, get: obj => obj.layout, set: (obj, value) => { obj.layout = value; } }, metadata: _metadata }, _layout_initializers, _layout_extraInitializers);
+            __esDecorate(null, null, _chargeStrength_decorators, { kind: "field", name: "chargeStrength", static: false, private: false, access: { has: obj => "chargeStrength" in obj, get: obj => obj.chargeStrength, set: (obj, value) => { obj.chargeStrength = value; } }, metadata: _metadata }, _chargeStrength_initializers, _chargeStrength_extraInitializers);
+            __esDecorate(null, null, _linkDistance_decorators, { kind: "field", name: "linkDistance", static: false, private: false, access: { has: obj => "linkDistance" in obj, get: obj => obj.linkDistance, set: (obj, value) => { obj.linkDistance = value; } }, metadata: _metadata }, _linkDistance_initializers, _linkDistance_extraInitializers);
+            __esDecorate(null, null, _zoomEnabled_decorators, { kind: "field", name: "zoomEnabled", static: false, private: false, access: { has: obj => "zoomEnabled" in obj, get: obj => obj.zoomEnabled, set: (obj, value) => { obj.zoomEnabled = value; } }, metadata: _metadata }, _zoomEnabled_initializers, _zoomEnabled_extraInitializers);
+            __esDecorate(null, null, _dragEnabled_decorators, { kind: "field", name: "dragEnabled", static: false, private: false, access: { has: obj => "dragEnabled" in obj, get: obj => obj.dragEnabled, set: (obj, value) => { obj.dragEnabled = value; } }, metadata: _metadata }, _dragEnabled_initializers, _dragEnabled_extraInitializers);
+            __esDecorate(null, null, _showLabels_decorators, { kind: "field", name: "showLabels", static: false, private: false, access: { has: obj => "showLabels" in obj, get: obj => obj.showLabels, set: (obj, value) => { obj.showLabels = value; } }, metadata: _metadata }, _showLabels_initializers, _showLabels_extraInitializers);
+            __esDecorate(null, null, _animation_decorators, { kind: "field", name: "animation", static: false, private: false, access: { has: obj => "animation" in obj, get: obj => obj.animation, set: (obj, value) => { obj.animation = value; } }, metadata: _metadata }, _animation_initializers, _animation_extraInitializers);
+            __esDecorate(null, null, _svgElement_decorators, { kind: "field", name: "svgElement", static: false, private: false, access: { has: obj => "svgElement" in obj, get: obj => obj.svgElement, set: (obj, value) => { obj.svgElement = value; } }, metadata: _metadata }, _svgElement_initializers, _svgElement_extraInitializers);
+            __esDecorate(null, null, _tooltipEl_decorators, { kind: "field", name: "tooltipEl", static: false, private: false, access: { has: obj => "tooltipEl" in obj, get: obj => obj.tooltipEl, set: (obj, value) => { obj.tooltipEl = value; } }, metadata: _metadata }, _tooltipEl_initializers, _tooltipEl_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        emitNodeClick(node) {
+            return { node };
+        }
+        emitEdgeClick(edge) {
+            return { edge };
+        }
+        emitNodeDrag(node, x, y) {
+            return { node, x, y };
+        }
+        emitGraphZoom(scale, x, y) {
+            return { scale, x, y };
+        }
+        init() {
+            this.resizeObserver = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.containerWidth = entry.contentRect.width || 600;
+                    this.containerHeight = entry.contentRect.height || 400;
+                    this.updateViewBox();
+                }
+            });
+            this.resizeObserver.observe(this);
+            // Attach SVG event listeners
+            this.attachSvgListeners();
+            // Build simulation if data was set before ready
+            if (this.data.nodes.length > 0 && !this.simInitialized) {
+                this.buildSimulation();
+            }
+        }
+        onDataChange() {
+            this.buildSimulation();
+        }
+        onLayoutChange() {
+            this.buildSimulation();
+        }
+        onDisplayChange() {
+            this.rebuildGraph();
+        }
+        cleanup() {
+            this.stopSimulation();
+            document.removeEventListener('mousemove', this.boundMouseMove);
+            document.removeEventListener('mouseup', this.boundMouseUp);
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+                this.resizeObserver = null;
+            }
+        }
+        attachSvgListeners() {
+            const svg = this.svgElement;
+            if (!svg)
+                return;
+            svg.addEventListener('mousedown', (e) => this.handleSvgMouseDown(e));
+            svg.addEventListener('wheel', (e) => this.handleWheel(e), { passive: false });
+            // Event delegation for nodes and edges
+            svg.addEventListener('mouseenter', (e) => {
+                const nodeGroup = e.target.closest('.network-graph__node');
+                if (nodeGroup) {
+                    const nodeId = nodeGroup.getAttribute('data-node-id');
+                    if (nodeId)
+                        this.handleNodeEnter(nodeId, e);
+                }
+            }, true);
+            svg.addEventListener('mouseleave', (e) => {
+                const nodeGroup = e.target.closest('.network-graph__node');
+                if (nodeGroup)
+                    this.handleNodeLeave();
+            }, true);
+            svg.addEventListener('dblclick', (e) => {
+                const nodeGroup = e.target.closest('.network-graph__node');
+                if (nodeGroup) {
+                    const nodeId = nodeGroup.getAttribute('data-node-id');
+                    if (nodeId)
+                        this.handleNodeDblClick(e, nodeId);
+                }
+            });
+            svg.addEventListener('click', (e) => {
+                const edgePath = e.target.closest('.network-graph__edge');
+                if (edgePath) {
+                    const edgeIdx = edgePath.getAttribute('data-edge-idx');
+                    if (edgeIdx !== null) {
+                        const idx = parseInt(edgeIdx);
+                        if (this.simEdges[idx]) {
+                            e.stopPropagation();
+                            this.emitEdgeClick(this.simEdges[idx].edge);
+                        }
+                    }
+                }
+            });
+        }
+        getGroupColor(group) {
+            if (!group)
+                return DEFAULT_COLORS[0];
+            const groups = [...new Set(this.data.nodes.map(n => n.group).filter(Boolean))];
+            const idx = groups.indexOf(group);
+            return DEFAULT_COLORS[idx % DEFAULT_COLORS.length];
+        }
+        getNodeRadius(node) {
+            if (node.size)
+                return node.size;
+            return Math.max(6, Math.min(20, 4 + node.degree * 2));
+        }
+        buildSimulation() {
+            this.simInitialized = true;
+            this.stopSimulation();
+            const nodeMap = new Map();
+            const degreeMap = new Map();
+            // Count degrees
+            for (const edge of this.data.edges) {
+                degreeMap.set(edge.source, (degreeMap.get(edge.source) || 0) + 1);
+                degreeMap.set(edge.target, (degreeMap.get(edge.target) || 0) + 1);
+            }
+            const w = this.containerWidth || 600;
+            const h = this.containerHeight || 400;
+            // Create sim nodes
+            this.data.nodes.forEach((node, i) => {
+                const simNode = {
+                    ...node,
+                    x: node.x ?? 0,
+                    y: node.y ?? 0,
+                    vx: 0,
+                    vy: 0,
+                    fx: (node.x !== undefined) ? node.x : null,
+                    fy: (node.y !== undefined) ? node.y : null,
+                    degree: degreeMap.get(node.id) || 0,
+                };
+                // Place initial positions based on layout
+                if (node.x === undefined || node.y === undefined) {
+                    if (this.layout === 'circular') {
+                        const angle = (2 * Math.PI * i) / this.data.nodes.length;
+                        const radius = Math.min(w, h) * 0.35;
+                        simNode.x = w / 2 + radius * Math.cos(angle);
+                        simNode.y = h / 2 + radius * Math.sin(angle);
+                        simNode.fx = simNode.x;
+                        simNode.fy = simNode.y;
+                    }
+                    else if (this.layout === 'grid') {
+                        const cols = Math.ceil(Math.sqrt(this.data.nodes.length));
+                        const cellW = w / (cols + 1);
+                        const cellH = h / (Math.ceil(this.data.nodes.length / cols) + 1);
+                        simNode.x = (i % cols + 1) * cellW;
+                        simNode.y = (Math.floor(i / cols) + 1) * cellH;
+                        simNode.fx = simNode.x;
+                        simNode.fy = simNode.y;
+                    }
+                    else {
+                        // Force layout: random initial positions centered
+                        simNode.x = w / 2 + (Math.random() - 0.5) * w * 0.5;
+                        simNode.y = h / 2 + (Math.random() - 0.5) * h * 0.5;
+                        simNode.fx = null;
+                        simNode.fy = null;
+                    }
+                }
+                nodeMap.set(node.id, simNode);
+            });
+            this.simNodes = [...nodeMap.values()];
+            // Create sim edges
+            this.simEdges = [];
+            for (const edge of this.data.edges) {
+                const s = nodeMap.get(edge.source);
+                const t = nodeMap.get(edge.target);
+                if (s && t) {
+                    this.simEdges.push({ source: s, target: t, edge });
+                }
+            }
+            // Reset zoom/pan
+            this.zoomScale = 1;
+            this.panX = 0;
+            this.panY = 0;
+            if (this.layout === 'force' && this.animation) {
+                this.simAlpha = 1;
+                this.simRunning = true;
+                this.tickSimulation();
+            }
+            else {
+                // Static layouts: just render once
+                this.rebuildGraph();
+            }
+        }
+        tickSimulation() {
+            if (!this.simRunning)
+                return;
+            const alpha = this.simAlpha;
+            if (alpha < 0.001) {
+                this.simRunning = false;
+                return;
+            }
+            const w = this.containerWidth || 600;
+            const h = this.containerHeight || 400;
+            const cx = w / 2;
+            const cy = h / 2;
+            // Apply forces
+            for (const node of this.simNodes) {
+                if (node.fx !== null)
+                    continue;
+                // Repulsion between all nodes
+                for (const other of this.simNodes) {
+                    if (node === other)
+                        continue;
+                    const dx = node.x - other.x;
+                    const dy = node.y - other.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const force = (this.chargeStrength * alpha) / (dist * dist);
+                    node.vx -= (dx / dist) * force;
+                    node.vy -= (dy / dist) * force;
+                }
+                // Centering force
+                node.vx += (cx - node.x) * 0.01 * alpha;
+                node.vy += (cy - node.y) * 0.01 * alpha;
+            }
+            // Spring forces along edges
+            for (const se of this.simEdges) {
+                const dx = se.target.x - se.source.x;
+                const dy = se.target.y - se.source.y;
+                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                const force = (dist - this.linkDistance) * 0.05 * alpha;
+                const fx = (dx / dist) * force;
+                const fy = (dy / dist) * force;
+                if (se.source.fx === null) {
+                    se.source.vx += fx;
+                    se.source.vy += fy;
+                }
+                if (se.target.fx === null) {
+                    se.target.vx -= fx;
+                    se.target.vy -= fy;
+                }
+            }
+            // Update positions with velocity damping
+            for (const node of this.simNodes) {
+                if (node.fx !== null) {
+                    node.x = node.fx;
+                    node.y = node.fy;
+                    node.vx = 0;
+                    node.vy = 0;
+                    continue;
+                }
+                node.vx *= 0.6;
+                node.vy *= 0.6;
+                node.x += node.vx;
+                node.y += node.vy;
+            }
+            this.simAlpha *= 0.99;
+            // Rebuild via innerHTML instead of reactive render
+            this.rebuildGraph();
+            this.animFrameId = requestAnimationFrame(() => this.tickSimulation());
+        }
+        stopSimulation() {
+            this.simRunning = false;
+            if (this.animFrameId) {
+                cancelAnimationFrame(this.animFrameId);
+                this.animFrameId = 0;
+            }
+        }
+        updateViewBox() {
+            const svg = this.svgElement;
+            if (!svg)
+                return;
+            const w = this.containerWidth || 600;
+            const h = this.containerHeight || 400;
+            svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+        }
+        ensureSvgGroups() {
+            if (this.edgesGroupEl && this.nodesGroupEl)
+                return true;
+            const svg = this.svgElement;
+            if (!svg)
+                return false;
+            const ns = 'http://www.w3.org/2000/svg';
+            this.transformGroupEl = document.createElementNS(ns, 'g');
+            this.transformGroupEl.setAttribute('transform', 'translate(0, 0) scale(1)');
+            this.edgesGroupEl = document.createElementNS(ns, 'g');
+            this.nodesGroupEl = document.createElementNS(ns, 'g');
+            this.transformGroupEl.appendChild(this.edgesGroupEl);
+            this.transformGroupEl.appendChild(this.nodesGroupEl);
+            svg.appendChild(this.transformGroupEl);
+            return true;
+        }
+        rebuildGraph() {
+            if (!this.ensureSvgGroups()) {
+                requestAnimationFrame(() => this.rebuildGraph());
+                return;
+            }
+            // Update transform
+            if (this.transformGroupEl) {
+                this.transformGroupEl.setAttribute('transform', `translate(${this.panX}, ${this.panY}) scale(${this.zoomScale})`);
+            }
+            // Update viewBox
+            this.updateViewBox();
+            // Build edges
+            this.edgesGroupEl.innerHTML = this.buildEdges();
+            // Build nodes
+            this.nodesGroupEl.innerHTML = this.buildNodes();
+        }
+        buildEdges() {
+            const hasHover = this.hoveredNodeId !== '';
+            let parts = '';
+            this.simEdges.forEach((se, idx) => {
+                const connected = this.isEdgeConnected(se);
+                const edgeColor = se.edge.color || '';
+                const weight = se.edge.weight || 1;
+                const path = this.renderEdgePath(se);
+                const strokeAttr = edgeColor ? ` stroke="${edgeColor}"` : '';
+                const cls = ['network-graph__edge'];
+                if (hasHover && connected)
+                    cls.push('network-graph__edge--highlighted');
+                if (hasHover && !connected)
+                    cls.push('network-graph__edge--dimmed');
+                parts += `<path class="${cls.join(' ')}" d="${path}"${strokeAttr} stroke-width="${Math.max(1, weight)}" data-edge-idx="${idx}" />`;
+                if (this.showLabels && se.edge.label) {
+                    const labelCls = hasHover && !connected ? 'network-graph__edge-label network-graph__edge-label--dimmed' : 'network-graph__edge-label';
+                    const mx = (se.source.x + se.target.x) / 2;
+                    const my = (se.source.y + se.target.y) / 2;
+                    parts += `<text class="${labelCls}" x="${mx}" y="${my}">${se.edge.label}</text>`;
+                }
+            });
+            return parts;
+        }
+        buildNodes() {
+            this.hoveredNodeId !== '';
+            let parts = '';
+            this.simNodes.forEach(node => {
+                const connected = this.isNodeConnected(node.id);
+                const r = this.getNodeRadius(node);
+                const fill = node.color || this.getGroupColor(node.group);
+                const isDragging = this.dragNode === node;
+                const cls = ['network-graph__node'];
+                if (!connected)
+                    cls.push('network-graph__node--dimmed');
+                if (isDragging)
+                    cls.push('network-graph__node--dragging');
+                parts += `<g class="${cls.join(' ')}" data-node-id="${node.id}">`;
+                parts += `<circle class="network-graph__node-circle" cx="${node.x}" cy="${node.y}" r="${r}" fill="${fill}" />`;
+                if (this.showLabels && (node.label || node.id)) {
+                    const labelCls = !connected ? 'network-graph__node-label network-graph__node-label--dimmed' : 'network-graph__node-label';
+                    parts += `<text class="${labelCls}" x="${node.x}" y="${node.y + r + 14}">${node.label || node.id}</text>`;
+                }
+                parts += `</g>`;
+            });
+            return parts;
+        }
+        screenToGraph(screenX, screenY) {
+            const svg = this.svgElement;
+            if (!svg)
+                return { x: screenX, y: screenY };
+            const rect = svg.getBoundingClientRect();
+            return {
+                x: (screenX - rect.left - this.panX) / this.zoomScale,
+                y: (screenY - rect.top - this.panY) / this.zoomScale,
+            };
+        }
+        findNodeById(id) {
+            return this.simNodes.find(n => n.id === id);
+        }
+        handleSvgMouseDown(e) {
+            // Check if clicking on a node
+            const nodeGroup = e.target.closest('.network-graph__node');
+            if (nodeGroup && this.dragEnabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                const nodeId = nodeGroup.getAttribute('data-node-id');
+                if (nodeId) {
+                    const node = this.findNodeById(nodeId);
+                    if (node) {
+                        this.dragNode = node;
+                        this.dragStartX = e.clientX;
+                        this.dragStartY = e.clientY;
+                        document.addEventListener('mousemove', this.boundMouseMove);
+                        document.addEventListener('mouseup', this.boundMouseUp);
+                        return;
+                    }
+                }
+            }
+            // Background pan
+            if (!this.zoomEnabled)
+                return;
+            e.preventDefault();
+            this.isPanning = true;
+            this.panStartX = e.clientX;
+            this.panStartY = e.clientY;
+            this.panStartPanX = this.panX;
+            this.panStartPanY = this.panY;
+            document.addEventListener('mousemove', this.boundMouseMove);
+            document.addEventListener('mouseup', this.boundMouseUp);
+        }
+        handleMouseMove(e) {
+            if (this.dragNode) {
+                const pos = this.screenToGraph(e.clientX, e.clientY);
+                this.dragNode.x = pos.x;
+                this.dragNode.y = pos.y;
+                this.dragNode.fx = pos.x;
+                this.dragNode.fy = pos.y;
+                // Reheat simulation
+                if (this.layout === 'force' && this.animation) {
+                    this.simAlpha = Math.max(this.simAlpha, 0.3);
+                    if (!this.simRunning) {
+                        this.simRunning = true;
+                        this.tickSimulation();
+                    }
+                }
+                else {
+                    this.rebuildGraph();
+                }
+                this.emitNodeDrag(this.dragNode, pos.x, pos.y);
+            }
+            else if (this.isPanning) {
+                const dx = e.clientX - this.panStartX;
+                const dy = e.clientY - this.panStartY;
+                this.panX = this.panStartPanX + dx;
+                this.panY = this.panStartPanY + dy;
+                this.rebuildGraph();
+            }
+        }
+        handleMouseUp(e) {
+            if (this.dragNode) {
+                const dx = Math.abs(e.clientX - this.dragStartX);
+                const dy = Math.abs(e.clientY - this.dragStartY);
+                if (dx < 3 && dy < 3) {
+                    this.emitNodeClick(this.dragNode);
+                }
+                this.dragNode = null;
+            }
+            this.isPanning = false;
+            document.removeEventListener('mousemove', this.boundMouseMove);
+            document.removeEventListener('mouseup', this.boundMouseUp);
+        }
+        handleWheel(e) {
+            if (!this.zoomEnabled)
+                return;
+            e.preventDefault();
+            const svg = this.svgElement;
+            if (!svg)
+                return;
+            const rect = svg.getBoundingClientRect();
+            const mouseX = e.clientX - rect.left;
+            const mouseY = e.clientY - rect.top;
+            const delta = e.deltaY > 0 ? 0.9 : 1.1;
+            const newScale = Math.max(0.1, Math.min(5, this.zoomScale * delta));
+            // Zoom around mouse position
+            this.panX = mouseX - (mouseX - this.panX) * (newScale / this.zoomScale);
+            this.panY = mouseY - (mouseY - this.panY) * (newScale / this.zoomScale);
+            this.zoomScale = newScale;
+            this.rebuildGraph();
+            this.emitGraphZoom(this.zoomScale, this.panX, this.panY);
+        }
+        handleNodeDblClick(e, nodeId) {
+            e.preventDefault();
+            e.stopPropagation();
+            const node = this.findNodeById(nodeId);
+            if (!node)
+                return;
+            // Unpin node
+            node.fx = null;
+            node.fy = null;
+            if (this.layout === 'force' && this.animation) {
+                this.simAlpha = Math.max(this.simAlpha, 0.3);
+                if (!this.simRunning) {
+                    this.simRunning = true;
+                    this.tickSimulation();
+                }
+            }
+        }
+        handleNodeEnter(nodeId, e) {
+            this.hoveredNodeId = nodeId;
+            const node = this.findNodeById(nodeId);
+            if (!node)
+                return;
+            const label = node.label || node.id;
+            const degree = node.degree;
+            // Update tooltip
+            const tooltip = this.tooltipEl;
+            if (tooltip) {
+                tooltip.textContent = `${label} (${degree} connection${degree !== 1 ? 's' : ''})`;
+                const svg = this.svgElement;
+                if (svg) {
+                    const rect = svg.getBoundingClientRect();
+                    tooltip.style.left = `${e.clientX - rect.left}px`;
+                    tooltip.style.top = `${e.clientY - rect.top}px`;
+                }
+                tooltip.classList.add('network-graph__tooltip--visible');
+            }
+            // Rebuild to apply dimming
+            this.rebuildGraph();
+        }
+        handleNodeLeave() {
+            this.hoveredNodeId = '';
+            const tooltip = this.tooltipEl;
+            if (tooltip) {
+                tooltip.classList.remove('network-graph__tooltip--visible');
+            }
+            this.rebuildGraph();
+        }
+        isNodeConnected(nodeId) {
+            if (!this.hoveredNodeId)
+                return true;
+            if (nodeId === this.hoveredNodeId)
+                return true;
+            return this.simEdges.some(se => (se.source.id === this.hoveredNodeId && se.target.id === nodeId) ||
+                (se.target.id === this.hoveredNodeId && se.source.id === nodeId));
+        }
+        isEdgeConnected(se) {
+            if (!this.hoveredNodeId)
+                return true;
+            return se.source.id === this.hoveredNodeId || se.target.id === this.hoveredNodeId;
+        }
+        hasMultiEdge(source, target) {
+            let count = 0;
+            for (const se of this.simEdges) {
+                if ((se.source.id === source && se.target.id === target) ||
+                    (se.source.id === target && se.target.id === source)) {
+                    count++;
+                    if (count > 1)
+                        return true;
+                }
+            }
+            return false;
+        }
+        getEdgeCurveIndex(source, target, edge) {
+            let idx = 0;
+            for (const se of this.simEdges) {
+                if ((se.source.id === source && se.target.id === target) ||
+                    (se.source.id === target && se.target.id === source)) {
+                    if (se.edge === edge)
+                        return idx;
+                    idx++;
+                }
+            }
+            return 0;
+        }
+        renderEdgePath(se) {
+            const isMulti = this.hasMultiEdge(se.source.id, se.target.id);
+            if (!isMulti) {
+                return `M ${se.source.x} ${se.source.y} L ${se.target.x} ${se.target.y}`;
+            }
+            const idx = this.getEdgeCurveIndex(se.source.id, se.target.id, se.edge);
+            const dx = se.target.x - se.source.x;
+            const dy = se.target.y - se.source.y;
+            const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+            const nx = -dy / dist;
+            const ny = dx / dist;
+            const offset = (idx - 0.5) * 30;
+            const mx = (se.source.x + se.target.x) / 2 + nx * offset;
+            const my = (se.source.y + se.target.y) / 2 + ny * offset;
+            return `M ${se.source.x} ${se.source.y} Q ${mx} ${my} ${se.target.x} ${se.target.y}`;
+        }
+        renderContent() {
+            const w = this.containerWidth || 600;
+            const h = this.containerHeight || 400;
+            return html /*html*/ `
+      <div class="network-graph" role="img" aria-label="Network graph visualization">
+        <svg class="network-graph__svg" viewBox="0 0 ${w} ${h}"></svg>
+        <div class="network-graph__tooltip"></div>
+      </div>
+    `;
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceNetworkGraph };
+//# sourceMappingURL=snice-network-graph.js.map