snice 4.8.0 → 4.9.0

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

@@ -0,0 +1,788 @@
+/*!
+ * snice v4.8.0
+ * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
+ * (c) 2024
+ * Released under the MIT License.
+ */
+if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.min.js must be loaded before snice-network-graph.min.js");}
+var SniceNetworkGraph = (function (exports, snice) {
+  'use strict';
+
+  /******************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+  function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+  }
+  function __runInitializers(thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+  }
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
+
+  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 = [snice.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 = [snice.property({ type: Object, attribute: false })];
+              _layout_decorators = [snice.property({ attribute: 'layout' })];
+              _chargeStrength_decorators = [snice.property({ type: Number, attribute: 'charge-strength' })];
+              _linkDistance_decorators = [snice.property({ type: Number, attribute: 'link-distance' })];
+              _zoomEnabled_decorators = [snice.property({ type: Boolean, attribute: 'zoom-enabled' })];
+              _dragEnabled_decorators = [snice.property({ type: Boolean, attribute: 'drag-enabled' })];
+              _showLabels_decorators = [snice.property({ type: Boolean, attribute: 'show-labels' })];
+              _animation_decorators = [snice.property({ type: Boolean })];
+              _svgElement_decorators = [snice.query('.network-graph__svg')];
+              _tooltipEl_decorators = [snice.query('.network-graph__tooltip')];
+              _emitNodeClick_decorators = [snice.dispatch('node-click', { bubbles: true, composed: true })];
+              _emitEdgeClick_decorators = [snice.dispatch('edge-click', { bubbles: true, composed: true })];
+              _emitNodeDrag_decorators = [snice.dispatch('node-drag', { bubbles: true, composed: true })];
+              _emitGraphZoom_decorators = [snice.dispatch('graph-zoom', { bubbles: true, composed: true })];
+              _init_decorators = [snice.ready()];
+              _onDataChange_decorators = [snice.watch('data')];
+              _onLayoutChange_decorators = [snice.watch('layout')];
+              _onDisplayChange_decorators = [snice.watch('showLabels')];
+              _cleanup_decorators = [snice.dispose()];
+              _renderContent_decorators = [snice.render({ once: true })];
+              _componentStyles_decorators = [snice.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 snice.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 snice.css /*css*/ `${cssContent}`;
+          }
+      });
+      return _classThis;
+  })();
+
+  exports.SniceNetworkGraph = SniceNetworkGraph;
+
+  return exports;
+
+})({}, Snice);
+//# sourceMappingURL=snice-network-graph.js.map