@simplex-viz/svg 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,1121 @@
+import { rectToConvexPolygon, getHullBoundingRadius, SimplexGraphEngine, computeConvexHull, regularPolygon, starConvexHull } from '@simplex-viz/core';
+
+// src/hullMeasure.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function estimateSvgFallbackBBox(group) {
+  let maxHalfW = 0;
+  let maxHalfH = 0;
+  const children = group.querySelectorAll("rect, circle, ellipse, text");
+  children.forEach((el) => {
+    const tag = el.tagName.toLowerCase();
+    if (tag === "rect") {
+      const w = parseFloat(el.getAttribute("width") ?? "0");
+      const h = parseFloat(el.getAttribute("height") ?? "0");
+      const x = parseFloat(el.getAttribute("x") ?? String(-w / 2));
+      const y = parseFloat(el.getAttribute("y") ?? String(-h / 2));
+      maxHalfW = Math.max(maxHalfW, Math.abs(x), Math.abs(x + w), w / 2);
+      maxHalfH = Math.max(maxHalfH, Math.abs(y), Math.abs(y + h), h / 2);
+    } else if (tag === "circle") {
+      const r = parseFloat(el.getAttribute("r") ?? "0");
+      const cx = parseFloat(el.getAttribute("cx") ?? "0");
+      const cy = parseFloat(el.getAttribute("cy") ?? "0");
+      maxHalfW = Math.max(maxHalfW, Math.abs(cx) + r);
+      maxHalfH = Math.max(maxHalfH, Math.abs(cy) + r);
+    } else if (tag === "text") {
+      const len = (el.textContent ?? "").length;
+      const fs = parseFloat(el.getAttribute("font-size") ?? "11");
+      const estW = Math.max(16, len * fs * 0.58);
+      const estH = fs * 1.4;
+      maxHalfW = Math.max(maxHalfW, estW / 2);
+      maxHalfH = Math.max(maxHalfH, estH / 2);
+    }
+  });
+  return {
+    width: Math.max(20, maxHalfW * 2),
+    height: Math.max(20, maxHalfH * 2)
+  };
+}
+function measureVisualWithSvgView(view, visual, cacheKey, rootSvg, measureBin, cache) {
+  const cached = cache.get(cacheKey);
+  if (cached) return cached;
+  let hull;
+  if (view.measureConvexHull) {
+    hull = view.measureConvexHull(visual, rootSvg);
+  } else {
+    while (measureBin.firstChild) {
+      measureBin.removeChild(measureBin.firstChild);
+    }
+    const probeGroup = rootSvg.ownerDocument.createElementNS(SVG_NS, "g");
+    measureBin.appendChild(probeGroup);
+    const dummyHull = { kind: "circle", radius: 16 };
+    const dummyState = {
+      id: "__measure__",
+      x: 0,
+      y: 0,
+      scale: 1,
+      opacity: 1,
+      visual,
+      hull: dummyHull,
+      cacheKey,
+      interaction: {
+        isHovered: false,
+        isPinned: false,
+        isDimmed: false,
+        isHighlighted: false
+      },
+      transition: null
+    };
+    view.mountOrUpdate(probeGroup, visual, dummyState);
+    let width = 0;
+    let height = 0;
+    try {
+      if (typeof probeGroup.getBBox === "function") {
+        const bbox = probeGroup.getBBox();
+        width = bbox.width;
+        height = bbox.height;
+      }
+    } catch {
+    }
+    if (width <= 1 || height <= 1) {
+      const fallback = estimateSvgFallbackBBox(probeGroup);
+      width = Math.max(width, fallback.width);
+      height = Math.max(height, fallback.height);
+    }
+    hull = rectToConvexPolygon(width + 2, height + 2, 6);
+    while (measureBin.firstChild) {
+      measureBin.removeChild(measureBin.firstChild);
+    }
+  }
+  cache.set(cacheKey, hull);
+  return hull;
+}
+function interactionSignature(state) {
+  const { isHovered, isPinned, isDimmed, isHighlighted } = state.interaction;
+  return `${isHovered ? 1 : 0}${isPinned ? 1 : 0}${isDimmed ? 1 : 0}${isHighlighted ? 1 : 0}`;
+}
+var SvgRendererAdapter = class {
+  svgEl;
+  doc;
+  worldGroup;
+  trianglesGroup;
+  edgesGroup;
+  clustersGroup;
+  itemsGroup;
+  hullsGroup;
+  measureBin;
+  contentView;
+  clusterView;
+  contentHullCache = /* @__PURE__ */ new Map();
+  clusterHullCache = /* @__PURE__ */ new Map();
+  contentViewByKey = /* @__PURE__ */ new Map();
+  clusterViewByKey = /* @__PURE__ */ new Map();
+  clusterDomMap = /* @__PURE__ */ new Map();
+  itemDomMap = /* @__PURE__ */ new Map();
+  trianglePolygons = [];
+  edgeLines = [];
+  constructor(svgEl, options) {
+    this.svgEl = svgEl;
+    this.doc = svgEl.ownerDocument;
+    this.contentView = options.contentView;
+    this.clusterView = options.clusterView;
+    while (this.svgEl.firstChild) {
+      this.svgEl.removeChild(this.svgEl.firstChild);
+    }
+    this.worldGroup = this.createGroup("sv-world");
+    this.trianglesGroup = this.createGroup("sv-mesh-triangles");
+    this.edgesGroup = this.createGroup("sv-mesh-edges");
+    this.clustersGroup = this.createGroup("sv-clusters");
+    this.itemsGroup = this.createGroup("sv-items");
+    this.hullsGroup = this.createGroup("sv-hull-overlay");
+    this.hullsGroup.setAttribute("pointer-events", "none");
+    this.worldGroup.appendChild(this.trianglesGroup);
+    this.worldGroup.appendChild(this.edgesGroup);
+    this.worldGroup.appendChild(this.clustersGroup);
+    this.worldGroup.appendChild(this.itemsGroup);
+    this.worldGroup.appendChild(this.hullsGroup);
+    this.measureBin = this.createGroup("sv-measure-bin");
+    this.measureBin.setAttribute("visibility", "hidden");
+    this.measureBin.setAttribute("pointer-events", "none");
+    this.measureBin.setAttribute("transform", "translate(-99999, -99999)");
+    this.svgEl.appendChild(this.worldGroup);
+    this.svgEl.appendChild(this.measureBin);
+  }
+  createGroup(className) {
+    const g = this.doc.createElementNS(SVG_NS, "g");
+    g.setAttribute("class", className);
+    return g;
+  }
+  /**
+   * Swaps active content and/or cluster `SvgNodeView` plugins at runtime and invalidates
+   * hull caches so the engine re-measures and smoothly crossfades into the new views.
+   */
+  setViews(views) {
+    if (views.contentView && views.contentView !== this.contentView) {
+      this.contentView = views.contentView;
+      this.contentHullCache.clear();
+    }
+    if (views.clusterView && views.clusterView !== this.clusterView) {
+      this.clusterView = views.clusterView;
+      this.clusterHullCache.clear();
+    }
+  }
+  measureContentHull(visual, cacheKey) {
+    this.contentViewByKey.set(cacheKey, this.contentView);
+    return measureVisualWithSvgView(
+      this.contentView,
+      visual,
+      cacheKey,
+      this.svgEl,
+      this.measureBin,
+      this.contentHullCache
+    );
+  }
+  measureClusterHull(visual, cacheKey) {
+    this.clusterViewByKey.set(cacheKey, this.clusterView);
+    return measureVisualWithSvgView(
+      this.clusterView,
+      visual,
+      cacheKey,
+      this.svgEl,
+      this.measureBin,
+      this.clusterHullCache
+    );
+  }
+  renderFrame(snapshot) {
+    this.svgEl.setAttribute(
+      "viewBox",
+      `0 0 ${snapshot.viewportWidth} ${snapshot.viewportHeight}`
+    );
+    this.worldGroup.setAttribute(
+      "transform",
+      `translate(${snapshot.camera.panX.toFixed(2)}, ${snapshot.camera.panY.toFixed(2)}) scale(${snapshot.camera.zoom.toFixed(4)})`
+    );
+    while (this.trianglePolygons.length < snapshot.triangles.length) {
+      const poly = this.doc.createElementNS(SVG_NS, "polygon");
+      this.trianglesGroup.appendChild(poly);
+      this.trianglePolygons.push(poly);
+    }
+    while (this.trianglePolygons.length > snapshot.triangles.length) {
+      const poly = this.trianglePolygons.pop();
+      poly?.remove();
+    }
+    for (let i = 0; i < snapshot.triangles.length; i++) {
+      const tr = snapshot.triangles[i];
+      const poly = this.trianglePolygons[i];
+      poly.setAttribute(
+        "points",
+        tr.points.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ")
+      );
+      poly.setAttribute("fill", tr.fillHex);
+      poly.setAttribute("fill-opacity", String(tr.fillOpacity));
+    }
+    while (this.edgeLines.length < snapshot.edges.length) {
+      const line = this.doc.createElementNS(SVG_NS, "line");
+      line.setAttribute("stroke", "rgba(148, 163, 184, 0.16)");
+      line.setAttribute("stroke-width", "1");
+      line.setAttribute("stroke-dasharray", "3 4");
+      this.edgesGroup.appendChild(line);
+      this.edgeLines.push(line);
+    }
+    while (this.edgeLines.length > snapshot.edges.length) {
+      const line = this.edgeLines.pop();
+      line?.remove();
+    }
+    for (let i = 0; i < snapshot.edges.length; i++) {
+      const edge = snapshot.edges[i];
+      const line = this.edgeLines[i];
+      line.setAttribute("x1", edge.a.x.toFixed(1));
+      line.setAttribute("y1", edge.a.y.toFixed(1));
+      line.setAttribute("x2", edge.b.x.toFixed(1));
+      line.setAttribute("y2", edge.b.y.toFixed(1));
+    }
+    this.reconcileNodes(
+      snapshot.clusters,
+      this.clustersGroup,
+      this.clusterDomMap,
+      this.clusterView,
+      this.clusterViewByKey,
+      "cluster"
+    );
+    this.reconcileNodes(
+      snapshot.items,
+      this.itemsGroup,
+      this.itemDomMap,
+      this.contentView,
+      this.contentViewByKey,
+      "item"
+    );
+    this.renderHullOverlay(snapshot);
+  }
+  reconcileNodes(nodes, parentGroup, domMap, activeView, viewByKey, kind) {
+    const aliveIds = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      aliveIds.add(node.id);
+      let tracked = domMap.get(node.id);
+      if (!tracked) {
+        const rootGroup = this.doc.createElementNS(SVG_NS, "g");
+        rootGroup.setAttribute("class", `sv-node sv-node-${kind}`);
+        rootGroup.setAttribute("data-node-id", node.id);
+        parentGroup.appendChild(rootGroup);
+        tracked = {
+          rootGroup,
+          mainLayer: null,
+          fromLayer: null,
+          toLayer: null,
+          lastMainKey: null,
+          lastFromKey: null,
+          lastToKey: null,
+          lastInteractionSig: null,
+          lastMorphUsed: false
+        };
+        domMap.set(node.id, tracked);
+      }
+      const effectiveOpacity = node.interaction.isDimmed ? node.opacity * 0.24 : node.opacity;
+      tracked.rootGroup.setAttribute(
+        "transform",
+        `translate(${node.x.toFixed(2)}, ${node.y.toFixed(2)}) scale(${node.scale.toFixed(4)})`
+      );
+      tracked.rootGroup.setAttribute("opacity", effectiveOpacity.toFixed(3));
+      const interSig = interactionSignature(node);
+      const interactionChanged = tracked.lastInteractionSig !== interSig;
+      if (node.transition) {
+        const tr = node.transition;
+        const fromView = viewByKey.get(tr.fromCacheKey) ?? tracked.lastView ?? activeView;
+        const toView = viewByKey.get(tr.toCacheKey) ?? activeView;
+        if (fromView === toView && toView.morph) {
+          if (!tracked.mainLayer) {
+            tracked.mainLayer = this.createGroup("sv-layer-main");
+            tracked.rootGroup.appendChild(tracked.mainLayer);
+          }
+          if (tracked.fromLayer) {
+            tracked.fromLayer.remove();
+            tracked.fromLayer = null;
+          }
+          if (tracked.toLayer) {
+            tracked.toLayer.remove();
+            tracked.toLayer = null;
+          }
+          const handled = toView.morph(
+            tracked.mainLayer,
+            tr.from,
+            tr.to,
+            tr.progress,
+            node
+          );
+          if (handled) {
+            tracked.lastMorphUsed = true;
+            tracked.lastMainKey = null;
+            tracked.lastInteractionSig = interSig;
+            tracked.lastView = toView;
+            continue;
+          }
+        }
+        tracked.lastMorphUsed = false;
+        if (tracked.mainLayer) {
+          tracked.mainLayer.remove();
+          tracked.mainLayer = null;
+          tracked.lastMainKey = null;
+        }
+        if (!tracked.fromLayer) {
+          tracked.fromLayer = this.createGroup("sv-layer-from");
+          tracked.rootGroup.appendChild(tracked.fromLayer);
+        }
+        if (!tracked.toLayer) {
+          tracked.toLayer = this.createGroup("sv-layer-to");
+          tracked.rootGroup.appendChild(tracked.toLayer);
+        }
+        if (tracked.lastFromKey !== tr.fromCacheKey || interactionChanged) {
+          fromView.mountOrUpdate(tracked.fromLayer, tr.from, {
+            ...node,
+            visual: tr.from,
+            hull: tr.fromHull,
+            cacheKey: tr.fromCacheKey
+          });
+          tracked.lastFromKey = tr.fromCacheKey;
+        }
+        if (tracked.lastToKey !== tr.toCacheKey || interactionChanged) {
+          toView.mountOrUpdate(tracked.toLayer, tr.to, {
+            ...node,
+            visual: tr.to,
+            hull: tr.toHull,
+            cacheKey: tr.toCacheKey
+          });
+          tracked.lastToKey = tr.toCacheKey;
+        }
+        const rFrom = Math.max(1, getHullBoundingRadius(tr.fromHull));
+        const rTo = Math.max(1, getHullBoundingRadius(tr.toHull));
+        const currentR = rFrom + (rTo - rFrom) * tr.progress;
+        const fromSubScale = Math.max(0.4, Math.min(1.6, currentR / rFrom));
+        const toSubScale = Math.max(0.4, Math.min(1.6, currentR / rTo));
+        tracked.fromLayer.setAttribute("opacity", (1 - tr.progress).toFixed(3));
+        tracked.fromLayer.setAttribute("transform", `scale(${fromSubScale.toFixed(4)})`);
+        tracked.toLayer.setAttribute("opacity", tr.progress.toFixed(3));
+        tracked.toLayer.setAttribute("transform", `scale(${toSubScale.toFixed(4)})`);
+        tracked.lastInteractionSig = interSig;
+        tracked.lastView = toView;
+      } else {
+        if (tracked.fromLayer) {
+          tracked.fromLayer.remove();
+          tracked.fromLayer = null;
+          tracked.lastFromKey = null;
+        }
+        if (tracked.toLayer) {
+          if (tracked.mainLayer) tracked.mainLayer.remove();
+          tracked.mainLayer = tracked.toLayer;
+          tracked.mainLayer.setAttribute("class", "sv-layer-main");
+          tracked.mainLayer.removeAttribute("opacity");
+          tracked.mainLayer.removeAttribute("transform");
+          tracked.toLayer = null;
+          tracked.lastMainKey = tracked.lastToKey;
+          tracked.lastToKey = null;
+        }
+        if (!tracked.mainLayer) {
+          tracked.mainLayer = this.createGroup("sv-layer-main");
+          tracked.rootGroup.appendChild(tracked.mainLayer);
+        }
+        const viewToUse = viewByKey.get(node.cacheKey) ?? activeView;
+        if (tracked.lastMainKey !== node.cacheKey || interactionChanged || tracked.lastMorphUsed || tracked.lastView !== viewToUse) {
+          viewToUse.mountOrUpdate(tracked.mainLayer, node.visual, node);
+          tracked.lastMainKey = node.cacheKey;
+          tracked.lastInteractionSig = interSig;
+          tracked.lastMorphUsed = false;
+          tracked.lastView = viewToUse;
+        }
+      }
+    }
+    for (const [id, tracked] of domMap) {
+      if (!aliveIds.has(id)) {
+        tracked.rootGroup.remove();
+        domMap.delete(id);
+      }
+    }
+  }
+  renderHullOverlay(snapshot) {
+    while (this.hullsGroup.firstChild) {
+      this.hullsGroup.removeChild(this.hullsGroup.firstChild);
+    }
+    if (!snapshot.showHulls) return;
+    const drawHull = (node, strokeColor) => {
+      if (node.opacity < 0.05) return;
+      const hull = node.hull;
+      if (hull.kind === "circle") {
+        const circle = this.doc.createElementNS(SVG_NS, "circle");
+        circle.setAttribute("cx", node.x.toFixed(2));
+        circle.setAttribute("cy", node.y.toFixed(2));
+        circle.setAttribute("r", (hull.radius * node.scale).toFixed(2));
+        circle.setAttribute("fill", strokeColor);
+        circle.setAttribute("fill-opacity", "0.07");
+        circle.setAttribute("stroke", strokeColor);
+        circle.setAttribute("stroke-width", "1");
+        circle.setAttribute("stroke-dasharray", "3 2");
+        this.hullsGroup.appendChild(circle);
+      } else if (hull.vertices.length >= 3) {
+        const poly = this.doc.createElementNS(SVG_NS, "polygon");
+        poly.setAttribute(
+          "points",
+          hull.vertices.map(
+            (v) => `${(node.x + v.x * node.scale).toFixed(2)},${(node.y + v.y * node.scale).toFixed(2)}`
+          ).join(" ")
+        );
+        poly.setAttribute("fill", strokeColor);
+        poly.setAttribute("fill-opacity", "0.07");
+        poly.setAttribute("stroke", strokeColor);
+        poly.setAttribute("stroke-width", "1");
+        poly.setAttribute("stroke-dasharray", "3 2");
+        this.hullsGroup.appendChild(poly);
+      }
+    };
+    for (const c of snapshot.clusters) {
+      drawHull(c, "#f59e0b");
+    }
+    for (const it of snapshot.items) {
+      drawHull(it, "#22d3ee");
+    }
+  }
+  destroy() {
+    this.clusterDomMap.clear();
+    this.itemDomMap.clear();
+    this.contentHullCache.clear();
+    this.clusterHullCache.clear();
+    this.contentViewByKey.clear();
+    this.clusterViewByKey.clear();
+    while (this.svgEl.firstChild) {
+      this.svgEl.removeChild(this.svgEl.firstChild);
+    }
+  }
+};
+var SimplexSvgController = class _SimplexSvgController {
+  containerEl;
+  svgEl;
+  adapter;
+  engine;
+  resizeObserver = null;
+  onFpsUpdate;
+  rafId = null;
+  lastFrameTs = 0;
+  fpsSamples = 0;
+  fpsAccumMs = 0;
+  destroyed = false;
+  // Centralized drag-to-pan state on root <svg>
+  isDraggingPan = false;
+  dragStartX = 0;
+  dragStartY = 0;
+  dragMoved = false;
+  constructor(containerEl, options) {
+    this.containerEl = containerEl;
+    this.onFpsUpdate = options.onFpsUpdate;
+    const doc = containerEl.ownerDocument;
+    this.svgEl = doc.createElementNS(SVG_NS, "svg");
+    this.svgEl.setAttribute("width", "100%");
+    this.svgEl.setAttribute("height", "100%");
+    this.svgEl.style.display = "block";
+    this.svgEl.style.touchAction = "none";
+    this.svgEl.style.userSelect = "none";
+    containerEl.appendChild(this.svgEl);
+    const rect = containerEl.getBoundingClientRect();
+    const initialW = rect.width > 40 ? rect.width : 960;
+    const initialH = rect.height > 40 ? rect.height : 620;
+    this.adapter = new SvgRendererAdapter(this.svgEl, {
+      contentView: options.contentView,
+      clusterView: options.clusterView
+    });
+    this.engine = SimplexGraphEngine.createFromResolved({
+      items: options.items,
+      getId: options.getId,
+      getTags: options.getTags,
+      deriveClusterMeta: options.deriveClusterMeta,
+      visualResolver: options.visualResolver,
+      renderer: this.adapter,
+      viewportWidth: initialW,
+      viewportHeight: initialH,
+      normalizeTag: options.normalizeTag,
+      resolveTagMeta: options.resolveTagMeta,
+      meshOptions: options.meshOptions,
+      layoutOptions: options.layoutOptions,
+      showHulls: options.showHulls,
+      interactions: options.interactions,
+      onMetricsChange: options.onMetricsChange,
+      onClustersChange: options.onClustersChange
+    });
+    this.attachSvgListeners();
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        if (this.destroyed) return;
+        for (const entry of entries) {
+          const { width, height } = entry.contentRect;
+          if (width > 60 && height > 60) {
+            this.engine.setViewport(width, height);
+            this.ensureLoopRunning();
+          }
+        }
+      });
+      this.resizeObserver.observe(containerEl);
+    }
+    this.ensureLoopRunning();
+  }
+  static createFromResolved(containerEl, options) {
+    return new _SimplexSvgController(containerEl, options);
+  }
+  get camera() {
+    return this.engine.camera;
+  }
+  getSvgElement() {
+    return this.svgEl;
+  }
+  getMetrics() {
+    return this.engine.getMetrics();
+  }
+  getClusters() {
+    return this.engine.getClusters();
+  }
+  getItems() {
+    return this.engine.getItems();
+  }
+  addItems(items) {
+    this.engine.addItems(items);
+    this.ensureLoopRunning();
+  }
+  removeItems(ids) {
+    this.engine.removeItems(ids);
+    this.ensureLoopRunning();
+  }
+  setItems(items) {
+    this.engine.setItems(items);
+    this.ensureLoopRunning();
+  }
+  setVisualResolver(resolver) {
+    this.engine.setVisualResolver(resolver);
+    this.ensureLoopRunning();
+  }
+  setViews(views) {
+    this.adapter.setViews(views);
+  }
+  setSizeMultiplier(multiplier) {
+    this.engine.setSizeMultiplier(multiplier);
+    this.ensureLoopRunning();
+  }
+  setShowHulls(show) {
+    this.engine.setShowHulls(show);
+    this.ensureLoopRunning();
+  }
+  setInteractions(interactions) {
+    this.engine.setInteractions(interactions);
+  }
+  setPinnedIds(ids) {
+    this.engine.setPinnedIds(ids);
+    this.ensureLoopRunning();
+  }
+  setHighlightedIds(ids) {
+    this.engine.setHighlightedIds(ids);
+    this.ensureLoopRunning();
+  }
+  setFocusedClusterUid(clusterUid) {
+    this.engine.setFocusedClusterUid(clusterUid);
+    this.ensureLoopRunning();
+  }
+  /** Deterministically advances simulation time in tests without waiting for rAF. */
+  stepForTest(dtMs) {
+    return this.engine.step(dtMs);
+  }
+  toLocalCoords(clientX, clientY) {
+    const rect = this.svgEl.getBoundingClientRect();
+    return {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    };
+  }
+  onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    const hit = this.engine.hitTest(x, y);
+    if (hit.kind === "background") {
+      this.isDraggingPan = true;
+      this.dragStartX = e.clientX;
+      this.dragStartY = e.clientY;
+      this.dragMoved = false;
+      this.svgEl.style.cursor = "grabbing";
+    } else {
+      this.isDraggingPan = false;
+      this.dragMoved = false;
+    }
+  };
+  onPointerMove = (e) => {
+    const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    if (this.isDraggingPan) {
+      const dx = e.clientX - this.dragStartX;
+      const dy = e.clientY - this.dragStartY;
+      if (Math.hypot(dx, dy) > 3) {
+        this.dragMoved = true;
+      }
+      if (this.dragMoved) {
+        this.dragStartX = e.clientX;
+        this.dragStartY = e.clientY;
+        this.engine.camera.panBy(dx, dy);
+        this.ensureLoopRunning();
+      }
+      return;
+    }
+    this.engine.handlePointerMove(x, y);
+    const hit = this.engine.hitTest(x, y);
+    this.svgEl.style.cursor = hit.kind === "background" ? "grab" : "pointer";
+    this.ensureLoopRunning();
+  };
+  onPointerUp = () => {
+    if (this.isDraggingPan) {
+      this.isDraggingPan = false;
+      this.svgEl.style.cursor = "grab";
+    }
+  };
+  onPointerLeave = () => {
+    this.isDraggingPan = false;
+    this.engine.handlePointerLeave();
+    this.ensureLoopRunning();
+  };
+  onClick = (e) => {
+    if (this.dragMoved) {
+      this.dragMoved = false;
+      return;
+    }
+    const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    this.engine.handleLeftClick({
+      screenX: x,
+      screenY: y,
+      button: e.button,
+      shiftKey: e.shiftKey,
+      ctrlKey: e.ctrlKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey
+    });
+    this.ensureLoopRunning();
+  };
+  onContextMenu = (e) => {
+    const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    const suppress = this.engine.handleRightClick({
+      screenX: x,
+      screenY: y,
+      button: e.button,
+      shiftKey: e.shiftKey,
+      ctrlKey: e.ctrlKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey
+    });
+    if (suppress) {
+      e.preventDefault();
+    }
+    this.ensureLoopRunning();
+  };
+  onWheel = (e) => {
+    const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    const handled = this.engine.handleWheel({
+      screenX: x,
+      screenY: y,
+      deltaX: e.deltaX,
+      deltaY: e.deltaY,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey
+    });
+    if (handled) {
+      e.preventDefault();
+      this.ensureLoopRunning();
+    }
+  };
+  attachSvgListeners() {
+    this.svgEl.addEventListener("pointerdown", this.onPointerDown);
+    this.svgEl.addEventListener("pointermove", this.onPointerMove);
+    this.svgEl.addEventListener("pointerup", this.onPointerUp);
+    this.svgEl.addEventListener("pointerleave", this.onPointerLeave);
+    this.svgEl.addEventListener("click", this.onClick);
+    this.svgEl.addEventListener("contextmenu", this.onContextMenu);
+    this.svgEl.addEventListener("wheel", this.onWheel, { passive: false });
+  }
+  detachSvgListeners() {
+    this.svgEl.removeEventListener("pointerdown", this.onPointerDown);
+    this.svgEl.removeEventListener("pointermove", this.onPointerMove);
+    this.svgEl.removeEventListener("pointerup", this.onPointerUp);
+    this.svgEl.removeEventListener("pointerleave", this.onPointerLeave);
+    this.svgEl.removeEventListener("click", this.onClick);
+    this.svgEl.removeEventListener("contextmenu", this.onContextMenu);
+    this.svgEl.removeEventListener("wheel", this.onWheel);
+  }
+  ensureLoopRunning() {
+    if (this.destroyed || this.rafId !== null) return;
+    if (typeof requestAnimationFrame === "undefined") {
+      this.engine.renderNow();
+      return;
+    }
+    this.lastFrameTs = performance.now();
+    const tick = (now) => {
+      if (this.destroyed) return;
+      const dtMs = Math.max(1, Math.min(50, now - this.lastFrameTs));
+      this.lastFrameTs = now;
+      this.fpsSamples += 1;
+      this.fpsAccumMs += dtMs;
+      if (this.fpsAccumMs >= 320) {
+        const fps = Math.round(this.fpsSamples * 1e3 / this.fpsAccumMs);
+        this.onFpsUpdate?.(fps);
+        this.fpsSamples = 0;
+        this.fpsAccumMs = 0;
+      }
+      const settled = this.engine.step(dtMs);
+      if (!settled) {
+        this.rafId = requestAnimationFrame(tick);
+      } else {
+        this.rafId = null;
+      }
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    if (this.rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.resizeObserver?.disconnect();
+    this.detachSvgListeners();
+    this.engine.destroy();
+    if (this.svgEl.parentElement === this.containerEl) {
+      this.containerEl.removeChild(this.svgEl);
+    }
+  }
+};
+var MORPH_SAMPLES = 64;
+function sampleShapePerimeter(shape, radius) {
+  const r = Math.max(3, radius);
+  const pts = [];
+  if (shape === "circle") {
+    for (let i = 0; i < MORPH_SAMPLES; i++) {
+      const a = i / MORPH_SAMPLES * Math.PI * 2 - Math.PI / 2;
+      pts.push({ x: Math.cos(a) * r, y: Math.sin(a) * r });
+    }
+    return pts;
+  }
+  const polyVerts = [];
+  if (shape === "diamond") {
+    const d = r * 1.12;
+    polyVerts.push(
+      { x: 0, y: -d },
+      { x: d * 0.88, y: 0 },
+      { x: 0, y: d },
+      { x: -d * 0.88, y: 0 }
+    );
+  } else if (shape === "hexagon") {
+    for (let i = 0; i < 6; i++) {
+      const a = -Math.PI / 2 + i * Math.PI * 2 / 6;
+      polyVerts.push({ x: Math.cos(a) * r * 1.05, y: Math.sin(a) * r * 1.05 });
+    }
+  } else {
+    const outer = r * 1.24;
+    const inner = r * 0.56;
+    for (let i = 0; i < 10; i++) {
+      const a = -Math.PI / 2 + i * Math.PI / 5;
+      const rad = i % 2 === 0 ? outer : inner;
+      polyVerts.push({ x: Math.cos(a) * rad, y: Math.sin(a) * rad });
+    }
+  }
+  const edgeLens = [];
+  let totalLen = 0;
+  for (let i = 0; i < polyVerts.length; i++) {
+    const a = polyVerts[i];
+    const b = polyVerts[(i + 1) % polyVerts.length];
+    const len = Math.hypot(b.x - a.x, b.y - a.y);
+    edgeLens.push(len);
+    totalLen += len;
+  }
+  for (let s = 0; s < MORPH_SAMPLES; s++) {
+    const targetDist = s / MORPH_SAMPLES * totalLen;
+    let accum = 0;
+    for (let i = 0; i < polyVerts.length; i++) {
+      const len = edgeLens[i];
+      if (accum + len >= targetDist || i === polyVerts.length - 1) {
+        const localT = len > 1e-6 ? (targetDist - accum) / len : 0;
+        const a = polyVerts[i];
+        const b = polyVerts[(i + 1) % polyVerts.length];
+        pts.push({
+          x: a.x + (b.x - a.x) * localT,
+          y: a.y + (b.y - a.y) * localT
+        });
+        break;
+      }
+      accum += len;
+    }
+  }
+  return pts;
+}
+function pointsToSvgPath(pts) {
+  if (pts.length === 0) return "";
+  let d = `M ${pts[0].x.toFixed(2)} ${pts[0].y.toFixed(2)}`;
+  for (let i = 1; i < pts.length; i++) {
+    const p = pts[i];
+    d += ` L ${p.x.toFixed(2)} ${p.y.toFixed(2)}`;
+  }
+  return `${d} Z`;
+}
+function parseHexRgb(hex) {
+  const clean = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (clean.length < 6) return [148, 163, 184];
+  return [
+    parseInt(clean.slice(0, 2), 16) || 0,
+    parseInt(clean.slice(2, 4), 16) || 0,
+    parseInt(clean.slice(4, 6), 16) || 0
+  ];
+}
+function lerpHex(fromHex, toHex, t) {
+  const a = parseHexRgb(fromHex);
+  const b = parseHexRgb(toHex);
+  const r = Math.round(a[0] + (b[0] - a[0]) * t);
+  const g = Math.round(a[1] + (b[1] - a[1]) * t);
+  const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+  return `rgb(${r}, ${g}, ${bl})`;
+}
+var GeometricShapeSvgView = class {
+  measureConvexHull(visual) {
+    const r = visual.radius + (visual.strokeWidth ?? 1.5);
+    if (visual.shape === "circle") {
+      return { kind: "circle", radius: r };
+    }
+    if (visual.shape === "diamond") {
+      const d = r * 1.12;
+      return {
+        kind: "polygon",
+        vertices: computeConvexHull([
+          { x: 0, y: -d },
+          { x: d * 0.88, y: 0 },
+          { x: 0, y: d },
+          { x: -d * 0.88, y: 0 }
+        ])
+      };
+    }
+    if (visual.shape === "hexagon") {
+      return regularPolygon(6, r * 1.05);
+    }
+    return starConvexHull(5, r * 1.24);
+  }
+  ensureElements(groupEl) {
+    let pathEl = groupEl.querySelector("path.sv-geom-shape");
+    let ringEl = groupEl.querySelector("path.sv-geom-ring");
+    if (!pathEl || !ringEl) {
+      while (groupEl.firstChild) groupEl.removeChild(groupEl.firstChild);
+      const doc = groupEl.ownerDocument;
+      ringEl = doc.createElementNS(SVG_NS, "path");
+      ringEl.setAttribute("class", "sv-geom-ring");
+      ringEl.setAttribute("fill", "none");
+      pathEl = doc.createElementNS(SVG_NS, "path");
+      pathEl.setAttribute("class", "sv-geom-shape");
+      groupEl.appendChild(ringEl);
+      groupEl.appendChild(pathEl);
+    }
+    return { pathEl, ringEl };
+  }
+  mountOrUpdate(groupEl, visual, state) {
+    const { pathEl, ringEl } = this.ensureElements(groupEl);
+    const pts = sampleShapePerimeter(visual.shape, visual.radius);
+    const d = pointsToSvgPath(pts);
+    pathEl.setAttribute("d", d);
+    pathEl.setAttribute("fill", visual.fillHex);
+    pathEl.setAttribute(
+      "stroke",
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? "#f8fafc" : visual.strokeHex ?? "rgba(15, 23, 42, 0.8)"
+    );
+    pathEl.setAttribute(
+      "stroke-width",
+      String(state.interaction.isHovered || state.interaction.isPinned ? 2.2 : visual.strokeWidth ?? 1.4)
+    );
+    if (state.interaction.isHovered || state.interaction.isPinned || state.interaction.isHighlighted) {
+      const outerPts = sampleShapePerimeter(visual.shape, visual.radius + 4.5);
+      ringEl.setAttribute("d", pointsToSvgPath(outerPts));
+      ringEl.setAttribute("stroke", state.interaction.isPinned ? "#f59e0b" : "#22d3ee");
+      ringEl.setAttribute("stroke-width", "1.4");
+      ringEl.setAttribute("stroke-opacity", "0.9");
+    } else {
+      ringEl.setAttribute("d", "");
+    }
+  }
+  morph(groupEl, from, to, progress, state) {
+    const { pathEl, ringEl } = this.ensureElements(groupEl);
+    const ptsA = sampleShapePerimeter(from.shape, from.radius);
+    const ptsB = sampleShapePerimeter(to.shape, to.radius);
+    const morphed = [];
+    for (let i = 0; i < MORPH_SAMPLES; i++) {
+      const a = ptsA[i];
+      const b = ptsB[i];
+      morphed.push({
+        x: a.x + (b.x - a.x) * progress,
+        y: a.y + (b.y - a.y) * progress
+      });
+    }
+    pathEl.setAttribute("d", pointsToSvgPath(morphed));
+    pathEl.setAttribute("fill", lerpHex(from.fillHex, to.fillHex, progress));
+    pathEl.setAttribute(
+      "stroke",
+      state.interaction.isHovered ? "#f8fafc" : to.strokeHex ?? "rgba(15, 23, 42, 0.8)"
+    );
+    pathEl.setAttribute("stroke-width", String(to.strokeWidth ?? 1.4));
+    ringEl.setAttribute("d", "");
+    return true;
+  }
+};
+
+// src/views/MultiSectorGlyphSvgView.ts
+function describeDonutSectorPath(innerR, outerR, startAngle, endAngle) {
+  const sweep = endAngle - startAngle;
+  if (sweep >= Math.PI * 2 - 1e-4) {
+    return [
+      `M ${outerR} 0`,
+      `A ${outerR} ${outerR} 0 1 0 ${-outerR} 0`,
+      `A ${outerR} ${outerR} 0 1 0 ${outerR} 0`,
+      `M ${innerR} 0`,
+      `A ${innerR} ${innerR} 0 1 1 ${-innerR} 0`,
+      `A ${innerR} ${innerR} 0 1 1 ${innerR} 0`,
+      "Z"
+    ].join(" ");
+  }
+  const largeArc = sweep > Math.PI ? 1 : 0;
+  const x1o = Math.cos(startAngle) * outerR;
+  const y1o = Math.sin(startAngle) * outerR;
+  const x2o = Math.cos(endAngle) * outerR;
+  const y2o = Math.sin(endAngle) * outerR;
+  const x1i = Math.cos(endAngle) * innerR;
+  const y1i = Math.sin(endAngle) * innerR;
+  const x2i = Math.cos(startAngle) * innerR;
+  const y2i = Math.sin(startAngle) * innerR;
+  return [
+    `M ${x1o.toFixed(2)} ${y1o.toFixed(2)}`,
+    `A ${outerR.toFixed(2)} ${outerR.toFixed(2)} 0 ${largeArc} 1 ${x2o.toFixed(2)} ${y2o.toFixed(2)}`,
+    `L ${x1i.toFixed(2)} ${y1i.toFixed(2)}`,
+    `A ${innerR.toFixed(2)} ${innerR.toFixed(2)} 0 ${largeArc} 0 ${x2i.toFixed(2)} ${y2i.toFixed(2)}`,
+    "Z"
+  ].join(" ");
+}
+var MultiSectorGlyphSvgView = class {
+  measureConvexHull(visual) {
+    return { kind: "circle", radius: visual.outerRadius + 2 };
+  }
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.firstChild);
+    }
+    const totalWeight = visual.sectors.reduce((s, sec) => s + Math.max(0, sec.weight), 0) || 1;
+    let angle = -Math.PI / 2;
+    for (const sec of visual.sectors) {
+      const frac = Math.max(0, sec.weight) / totalWeight;
+      if (frac <= 5e-3) continue;
+      const nextAngle = angle + frac * Math.PI * 2;
+      const path = doc.createElementNS(SVG_NS, "path");
+      path.setAttribute(
+        "d",
+        describeDonutSectorPath(visual.innerRadius, visual.outerRadius, angle, nextAngle)
+      );
+      path.setAttribute("fill", sec.colorHex);
+      path.setAttribute("stroke", "#07090E");
+      path.setAttribute("stroke-width", visual.sectors.length > 1 ? "1.1" : "0.8");
+      groupEl.appendChild(path);
+      angle = nextAngle;
+    }
+    const core = doc.createElementNS(SVG_NS, "circle");
+    core.setAttribute("cx", "0");
+    core.setAttribute("cy", "0");
+    core.setAttribute("r", String(Math.max(2, visual.innerRadius - 1)));
+    core.setAttribute("fill", visual.centerColorHex);
+    groupEl.appendChild(core);
+    if (visual.accentRingHex || state.interaction.isHovered || state.interaction.isPinned || state.interaction.isHighlighted) {
+      const ring = doc.createElementNS(SVG_NS, "circle");
+      ring.setAttribute("cx", "0");
+      ring.setAttribute("cy", "0");
+      ring.setAttribute("r", String(visual.outerRadius + 3));
+      ring.setAttribute("fill", "none");
+      ring.setAttribute(
+        "stroke",
+        state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? "#f8fafc" : visual.accentRingHex ?? "#22d3ee"
+      );
+      ring.setAttribute("stroke-width", state.interaction.isHovered ? "2" : "1.2");
+      groupEl.appendChild(ring);
+    }
+  }
+};
+
+// src/views/BadgeClusterSvgView.ts
+var BadgeClusterSvgView = class {
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.firstChild);
+    }
+    const titleLen = visual.title.length;
+    const metaLen = visual.metaLine.length;
+    const estWidth = Math.max(122, Math.max(titleLen * 6.8 + 44, metaLen * 5.9 + 24));
+    const height = 42;
+    const halfW = estWidth / 2;
+    const bg = doc.createElementNS(SVG_NS, "rect");
+    bg.setAttribute("x", String(-halfW));
+    bg.setAttribute("y", String(-21));
+    bg.setAttribute("width", String(estWidth));
+    bg.setAttribute("height", String(height));
+    bg.setAttribute("rx", "8");
+    bg.setAttribute("fill", "#0d1320");
+    bg.setAttribute("fill-opacity", "0.94");
+    bg.setAttribute(
+      "stroke",
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered || state.interaction.isHighlighted ? "#e2e8f0" : visual.colorHex
+    );
+    bg.setAttribute(
+      "stroke-width",
+      state.interaction.isHovered || state.interaction.isHighlighted ? "2.2" : "1.4"
+    );
+    groupEl.appendChild(bg);
+    const swatch = doc.createElementNS(SVG_NS, "circle");
+    swatch.setAttribute("cx", String(-halfW + 13));
+    swatch.setAttribute("cy", String(-7));
+    swatch.setAttribute("r", "4");
+    swatch.setAttribute("fill", visual.colorHex);
+    groupEl.appendChild(swatch);
+    const codeText = doc.createElementNS(SVG_NS, "text");
+    codeText.setAttribute("x", String(-halfW + 22));
+    codeText.setAttribute("y", String(-3));
+    codeText.setAttribute("fill", visual.colorHex);
+    codeText.setAttribute("font-size", "10");
+    codeText.setAttribute("font-weight", "600");
+    codeText.setAttribute("font-family", "IBM Plex Mono, monospace");
+    codeText.textContent = visual.code;
+    groupEl.appendChild(codeText);
+    const titleText = doc.createElementNS(SVG_NS, "text");
+    titleText.setAttribute("x", String(-halfW + 44));
+    titleText.setAttribute("y", String(-3));
+    titleText.setAttribute("fill", "#f1f5f9");
+    titleText.setAttribute("font-size", "11");
+    titleText.setAttribute("font-weight", "600");
+    titleText.setAttribute("font-family", "Plus Jakarta Sans, sans-serif");
+    titleText.textContent = visual.title;
+    groupEl.appendChild(titleText);
+    const subText = doc.createElementNS(SVG_NS, "text");
+    subText.setAttribute("x", "0");
+    subText.setAttribute("y", "13");
+    subText.setAttribute("text-anchor", "middle");
+    subText.setAttribute("fill", "#94a3b8");
+    subText.setAttribute("font-size", "9.5");
+    subText.setAttribute("font-family", "IBM Plex Mono, monospace");
+    subText.textContent = visual.metaLine;
+    groupEl.appendChild(subText);
+  }
+};
+
+// src/views/ClusterAnchorSvgView.ts
+var ClusterAnchorSvgView = class {
+  measureConvexHull(visual) {
+    return { kind: "circle", radius: visual.radius + 5 };
+  }
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.firstChild);
+    }
+    const r = visual.radius;
+    const outer = doc.createElementNS(SVG_NS, "circle");
+    outer.setAttribute("cx", "0");
+    outer.setAttribute("cy", "0");
+    outer.setAttribute("r", String(r + 3));
+    outer.setAttribute("fill", "#07090E");
+    outer.setAttribute("fill-opacity", "0.88");
+    outer.setAttribute(
+      "stroke",
+      state.interaction.isHovered || state.interaction.isHighlighted ? "#f8fafc" : visual.colorHex
+    );
+    outer.setAttribute("stroke-width", state.interaction.isHovered ? "2.4" : "1.6");
+    outer.setAttribute("stroke-dasharray", "4 2.5");
+    groupEl.appendChild(outer);
+    const inner = doc.createElementNS(SVG_NS, "circle");
+    inner.setAttribute("cx", "0");
+    inner.setAttribute("cy", "0");
+    inner.setAttribute("r", String(r - 2));
+    inner.setAttribute("fill", visual.colorHex);
+    inner.setAttribute("fill-opacity", "0.18");
+    inner.setAttribute("stroke", visual.colorHex);
+    inner.setAttribute("stroke-width", "1.4");
+    groupEl.appendChild(inner);
+    const codeEl = doc.createElementNS(SVG_NS, "text");
+    codeEl.setAttribute("x", "0");
+    codeEl.setAttribute("y", "-2");
+    codeEl.setAttribute("text-anchor", "middle");
+    codeEl.setAttribute("fill", "#f8fafc");
+    codeEl.setAttribute("font-size", "11");
+    codeEl.setAttribute("font-weight", "600");
+    codeEl.setAttribute("font-family", "IBM Plex Mono, monospace");
+    codeEl.textContent = visual.code;
+    groupEl.appendChild(codeEl);
+    const countEl = doc.createElementNS(SVG_NS, "text");
+    countEl.setAttribute("x", "0");
+    countEl.setAttribute("y", "11");
+    countEl.setAttribute("text-anchor", "middle");
+    countEl.setAttribute("fill", visual.colorHex);
+    countEl.setAttribute("font-size", "9");
+    countEl.setAttribute("font-family", "IBM Plex Mono, monospace");
+    countEl.textContent = `${visual.memberCount}n`;
+    groupEl.appendChild(countEl);
+  }
+};
+
+export { BadgeClusterSvgView, ClusterAnchorSvgView, GeometricShapeSvgView, MultiSectorGlyphSvgView, SVG_NS, SimplexSvgController, SvgRendererAdapter, measureVisualWithSvgView };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map