@simplex-viz/svg 0.1.3 → 0.2.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { rectToConvexPolygon, getHullBoundingRadius, SimplexGraphEngine, computeConvexHull, regularPolygon, starConvexHull } from '@simplex-viz/core';
+import { rectToConvexPolygon, computeConvexHull, regularPolygon, starConvexHull, getHullBoundingRadius, SimplexGraphEngine } from '@simplex-viz/core';
+export { computeConvexHull, rectToConvexPolygon, regularPolygon, solveSimplexSnapshot, starConvexHull } from '@simplex-viz/core';
 
 // src/hullMeasure.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -89,204 +90,664 @@ function measureVisualWithSvgView(view, visual, cacheKey, rootSvg, measureBin, c
   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);
+
+// src/views/BadgeClusterSvgView.ts
+var BadgeClusterSvgView = class {
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.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);
+    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);
   }
-  createGroup(className) {
-    const g = this.doc.createElementNS(SVG_NS, "g");
-    g.setAttribute("class", className);
-    return g;
+};
+
+// src/views/ClusterAnchorSvgView.ts
+var ClusterAnchorSvgView = class {
+  measureConvexHull(visual) {
+    return { kind: "circle", radius: visual.radius + 5 };
   }
-  /**
-   * 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();
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.firstChild);
     }
-  }
-  measureContentHull(visual, cacheKey) {
-    this.contentViewByKey.set(cacheKey, this.contentView);
-    return measureVisualWithSvgView(
-      this.contentView,
-      visual,
-      cacheKey,
-      this.svgEl,
-      this.measureBin,
-      this.contentHullCache
+    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);
   }
-  measureClusterHull(visual, cacheKey) {
-    this.clusterViewByKey.set(cacheKey, this.clusterView);
-    return measureVisualWithSvgView(
-      this.clusterView,
-      visual,
-      cacheKey,
-      this.svgEl,
-      this.measureBin,
-      this.clusterHullCache
-    );
+};
+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;
   }
-  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)})`
+  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 }
     );
-    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();
+  } 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 });
     }
-    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));
+  } 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 });
     }
-    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);
+  }
+  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;
     }
-    while (this.edgeLines.length > snapshot.edges.length) {
-      const line = this.edgeLines.pop();
-      line?.remove();
+  }
+  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 };
     }
-    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));
+    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 }
+        ])
+      };
     }
-    this.reconcileNodes(
-      snapshot.clusters,
-      this.clustersGroup,
-      this.clusterDomMap,
-      this.clusterView,
-      this.clusterViewByKey,
-      "cluster"
+    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)"
     );
-    this.reconcileNodes(
-      snapshot.items,
-      this.itemsGroup,
-      this.itemDomMap,
-      this.contentView,
-      this.contentViewByKey,
-      "item"
+    pathEl.setAttribute(
+      "stroke-width",
+      String(state.interaction.isHovered || state.interaction.isPinned ? 2.2 : visual.strokeWidth ?? 1.4)
     );
-    this.renderHullOverlay(snapshot);
+    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", "");
+    }
   }
-  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)})`
+  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)
       );
-      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);
-          }
+      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/presets.ts
+function extractDefaultItemLabel(item, fallbackId, getLabel) {
+  if (getLabel) {
+    const custom = getLabel(item);
+    if (custom.length > 0) return custom;
+  }
+  if (typeof item === "object" && item !== null) {
+    if ("label" in item && typeof item.label === "string" && item.label.length > 0) {
+      return item.label;
+    }
+    if ("title" in item && typeof item.title === "string" && item.title.length > 0) {
+      return item.title;
+    }
+    if ("headline" in item && typeof item.headline === "string" && item.headline.length > 0) {
+      return item.headline;
+    }
+    if ("name" in item && typeof item.name === "string" && item.name.length > 0) {
+      return item.name;
+    }
+  }
+  return fallbackId;
+}
+function createPresetViews(preset) {
+  const contentView = preset === "glyphs" ? new MultiSectorGlyphSvgView() : new GeometricShapeSvgView();
+  const clusterView = preset === "badges" ? new BadgeClusterSvgView() : new ClusterAnchorSvgView();
+  return { contentView, clusterView };
+}
+function createPresetVisualResolver(preset, getLabel) {
+  return {
+    resolveContentVisual: (item, ctx) => {
+      if (preset === "glyphs") {
+        return {
+          outerRadius: 11.5,
+          innerRadius: 4.5,
+          sectors: ctx.unitClusters.map((uc) => ({
+            colorHex: uc.cluster.colorHex,
+            weight: uc.weight
+          })),
+          centerColorHex: ctx.mixedColorHex
+        };
+      }
+      const rank = ctx.unitClusters.length;
+      return {
+        shape: rank >= 3 ? "star" : rank === 2 ? "diamond" : "circle",
+        radius: 9.5,
+        fillHex: ctx.mixedColorHex,
+        strokeHex: "#07090E",
+        strokeWidth: 1.4,
+        label: extractDefaultItemLabel(item, ctx.id, getLabel)
+      };
+    },
+    resolveClusterVisual: (cluster) => {
+      if (preset === "badges") {
+        const count = cluster.members.length;
+        return {
+          code: cluster.code,
+          title: cluster.defaultLabel,
+          metaLine: `${count} ${count === 1 ? "item" : "items"}`,
+          colorHex: cluster.colorHex
+        };
+      }
+      return {
+        code: cluster.code,
+        label: cluster.defaultLabel,
+        memberCount: cluster.members.length,
+        colorHex: cluster.colorHex,
+        radius: 22
+      };
+    },
+    getVisualCacheKey: (visual) => {
+      if ("sectors" in visual) {
+        const secKey = visual.sectors.map((s) => `${s.colorHex}:${s.weight.toFixed(2)}`).join("|");
+        return `glyph:${visual.outerRadius}:${visual.centerColorHex}:${secKey}`;
+      }
+      if ("shape" in visual) {
+        return `geom:${visual.shape}:${visual.radius}:${visual.fillHex}`;
+      }
+      if ("metaLine" in visual) {
+        return `badge:${visual.code}:${visual.title}:${visual.metaLine}:${visual.colorHex}`;
+      }
+      return `anchor:${visual.code}:${visual.memberCount}:${visual.colorHex}`;
+    }
+  };
+}
+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;
@@ -378,744 +839,563 @@ var SvgRendererAdapter = class {
           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();
+          tracked.lastMorphUsed = false;
+          tracked.lastView = viewToUse;
+        }
+      }
     }
-    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();
+    for (const [id, tracked] of domMap) {
+      if (!aliveIds.has(id)) {
+        tracked.rootGroup.remove();
+        domMap.delete(id);
+      }
     }
-  };
-  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;
+  renderHullOverlay(snapshot) {
+    while (this.hullsGroup.firstChild) {
+      this.hullsGroup.removeChild(this.hullsGroup.firstChild);
     }
-    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;
+    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);
       }
     };
-    this.rafId = requestAnimationFrame(tick);
+    for (const c of snapshot.clusters) {
+      drawHull(c, "#f59e0b");
+    }
+    for (const it of snapshot.items) {
+      drawHull(it, "#22d3ee");
+    }
   }
   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);
+    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 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;
+function resolveContainerElement(target) {
+  if (typeof target !== "string") {
+    return target;
   }
-  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 }
+  if (typeof document === "undefined") {
+    throw new Error(
+      `SimplexSvgController: cannot resolve selector "${target}" outside a DOM environment.`
     );
-  } 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;
+  const el = document.querySelector(target);
+  if (!el) {
+    throw new Error(
+      `SimplexSvgController: no element matched container selector "${target}".`
+    );
   }
-  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 el;
+}
+var SimplexSvgController = class _SimplexSvgController {
+  containerEl;
+  svgEl;
+  adapter;
+  engine;
+  resizeObserver = null;
+  onFpsUpdate;
+  focusOnClusterClick;
+  getIdExtractor;
+  getLabelExtractor;
+  tooltipOption;
+  tooltipEl = null;
+  focusedClusterUidState = null;
+  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 = resolveContainerElement(containerEl);
+    this.onFpsUpdate = options.onFpsUpdate;
+    this.focusOnClusterClick = options.focusOnClusterClick ?? true;
+    this.getLabelExtractor = options.getLabel;
+    this.tooltipOption = options.tooltip ?? false;
+    this.getIdExtractor = options.getId ?? ((item) => typeof item === "object" && item !== null && "id" in item ? String(item.id) : "");
+    const activePreset = options.preset ?? "geometric";
+    const presetViews = createPresetViews(activePreset);
+    const contentView = options.contentView ?? presetViews.contentView;
+    const clusterView = options.clusterView ?? presetViews.clusterView;
+    const visualResolver = options.visualResolver ?? createPresetVisualResolver(
+      activePreset,
+      this.getLabelExtractor
+    );
+    const doc = this.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";
+    this.containerEl.appendChild(this.svgEl);
+    const rect = this.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,
+      clusterView
+    });
+    this.engine = SimplexGraphEngine.createFromResolved({
+      items: options.items,
+      getId: options.getId,
+      getTags: options.getTags,
+      deriveClusterMeta: options.deriveClusterMeta,
+      visualResolver,
+      renderer: this.adapter,
+      viewportWidth: initialW,
+      viewportHeight: initialH,
+      normalizeTag: options.normalizeTag,
+      resolveTagMeta: options.resolveTagMeta,
+      meshOptions: options.meshOptions,
+      layoutOptions: options.layoutOptions,
+      showHulls: options.showHulls,
+      interactions: this.wrapInteractions(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(this.containerEl);
     }
+    this.ensureLoopRunning();
   }
-  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)}`;
+  static createFromResolved(containerEl, options) {
+    return new _SimplexSvgController(containerEl, options);
+  }
+  wrapInteractions(userInteractions) {
+    return {
+      onContentHover: (ev) => {
+        userInteractions?.onContentHover?.(ev);
+        if (ev) {
+          this.showTooltip(
+            ev.screenPosition.x,
+            ev.screenPosition.y,
+            this.formatContentTooltip(ev)
+          );
+        } else {
+          this.hideTooltip();
+        }
+      },
+      onClusterHover: (ev) => {
+        userInteractions?.onClusterHover?.(ev);
+        if (ev) {
+          this.showTooltip(
+            ev.screenPosition.x,
+            ev.screenPosition.y,
+            this.formatClusterTooltip(ev)
+          );
+        } else {
+          this.hideTooltip();
+        }
+      },
+      onLeftClick: (target, rawEvent) => {
+        if (userInteractions?.onLeftClick) {
+          userInteractions.onLeftClick(target, rawEvent);
+          return;
+        }
+        if (!this.focusOnClusterClick) return;
+        if (target.kind === "cluster") {
+          const next = this.focusedClusterUidState === target.cluster.clusterUid ? null : target.cluster.clusterUid;
+          this.setFocusedClusterUid(next);
+        } else if (target.kind === "background" && this.focusedClusterUidState !== null) {
+          this.setFocusedClusterUid(null);
+        }
+      },
+      onRightClick: userInteractions?.onRightClick,
+      onWheel: userInteractions?.onWheel ?? "zoom-to-cursor"
+    };
   }
-  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 };
+  formatContentTooltip(ev) {
+    if (typeof this.tooltipOption === "function") {
+      return this.tooltipOption({ kind: "content", ...ev });
     }
-    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 }
-        ])
-      };
+    const label = extractDefaultItemLabel(
+      ev.item,
+      ev.layoutContext.id,
+      this.getLabelExtractor
+    );
+    const tagList = ev.layoutContext.tags.map((t) => `#${t.tag}`).slice(0, 5).join(" \xB7 ");
+    return tagList ? `${label}
+${tagList}` : label;
+  }
+  formatClusterTooltip(ev) {
+    if (typeof this.tooltipOption === "function") {
+      return this.tooltipOption({ kind: "cluster", ...ev });
     }
-    if (visual.shape === "hexagon") {
-      return regularPolygon(6, r * 1.05);
+    const count = ev.cluster.members.length;
+    return `${ev.cluster.code} \xB7 ${ev.cluster.defaultLabel}
+${count} ${count === 1 ? "item" : "items"}`;
+  }
+  ensureTooltipElement() {
+    if (!this.tooltipOption) return null;
+    if (this.tooltipEl) return this.tooltipEl;
+    const doc = this.containerEl.ownerDocument;
+    const computedPos = typeof getComputedStyle !== "undefined" ? getComputedStyle(this.containerEl).position : this.containerEl.style.position;
+    if (!computedPos || computedPos === "static") {
+      this.containerEl.style.position = "relative";
     }
-    return starConvexHull(5, r * 1.24);
+    const el = doc.createElement("div");
+    el.className = "sv-tooltip";
+    el.style.position = "absolute";
+    el.style.pointerEvents = "none";
+    el.style.zIndex = "20";
+    el.style.display = "none";
+    el.style.maxWidth = "240px";
+    el.style.padding = "7px 10px";
+    el.style.borderRadius = "8px";
+    el.style.background = "rgba(9, 13, 22, 0.94)";
+    el.style.border = "1px solid rgba(51, 65, 85, 0.85)";
+    el.style.color = "#f1f5f9";
+    el.style.fontFamily = "Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif";
+    el.style.fontSize = "12px";
+    el.style.lineHeight = "1.4";
+    el.style.whiteSpace = "pre-line";
+    el.style.boxShadow = "0 10px 24px rgba(0, 0, 0, 0.45)";
+    this.containerEl.appendChild(el);
+    this.tooltipEl = el;
+    return el;
   }
-  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);
+  showTooltip(screenX, screenY, text) {
+    const el = this.ensureTooltipElement();
+    if (!el || !text) return;
+    el.textContent = text;
+    el.style.display = "block";
+    const maxLeft = Math.max(8, (this.containerEl.clientWidth || 960) - 256);
+    const maxTop = Math.max(8, (this.containerEl.clientHeight || 600) - 72);
+    el.style.left = `${Math.min(Math.max(8, Math.round(screenX + 14)), maxLeft)}px`;
+    el.style.top = `${Math.min(Math.max(8, Math.round(screenY + 14)), maxTop)}px`;
+  }
+  hideTooltip() {
+    if (this.tooltipEl) {
+      this.tooltipEl.style.display = "none";
     }
-    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)"
+  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();
+  }
+  /**
+   * Switches between built-in presets (`'geometric'`, `'glyphs'`, `'badges'`) with smooth
+   * morph/crossfade transitions.
+   */
+  setPreset(preset, getLabel) {
+    if (getLabel !== void 0) {
+      this.getLabelExtractor = getLabel;
+    }
+    const views = createPresetViews(preset);
+    const resolver = createPresetVisualResolver(
+      preset,
+      this.getLabelExtractor
     );
-    pathEl.setAttribute(
-      "stroke-width",
-      String(state.interaction.isHovered || state.interaction.isPinned ? 2.2 : visual.strokeWidth ?? 1.4)
+    this.adapter.setViews({
+      contentView: views.contentView,
+      clusterView: views.clusterView
+    });
+    this.engine.setVisualResolver(
+      resolver
     );
-    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", "");
-    }
+    this.ensureLoopRunning();
   }
-  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
-      });
+  setTooltip(tooltip) {
+    this.tooltipOption = tooltip;
+    if (!tooltip) {
+      this.hideTooltip();
     }
-    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(" ");
+  setVisualResolver(resolver) {
+    this.engine.setVisualResolver(resolver);
+    this.ensureLoopRunning();
   }
-  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 };
+  setViews(views) {
+    this.adapter.setViews(views);
   }
-  mountOrUpdate(groupEl, visual, state) {
-    const doc = groupEl.ownerDocument;
-    while (groupEl.firstChild) {
-      groupEl.removeChild(groupEl.firstChild);
+  setSizeMultiplier(multiplier) {
+    this.engine.setSizeMultiplier(multiplier);
+    this.ensureLoopRunning();
+  }
+  setShowHulls(show) {
+    this.engine.setShowHulls(show);
+    this.ensureLoopRunning();
+  }
+  setInteractions(interactions) {
+    this.engine.setInteractions(this.wrapInteractions(interactions));
+  }
+  setPinnedIds(ids) {
+    this.engine.setPinnedIds(ids);
+    this.ensureLoopRunning();
+  }
+  setHighlightedIds(ids) {
+    this.engine.setHighlightedIds(ids);
+    this.ensureLoopRunning();
+  }
+  setFocusedClusterUid(clusterUid) {
+    this.focusedClusterUidState = 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.hideTooltip();
+        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.hideTooltip();
+    this.engine.handlePointerLeave();
+    this.ensureLoopRunning();
+  };
+  onClick = (e) => {
+    if (this.dragMoved) {
+      this.dragMoved = false;
+      return;
     }
-    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 { 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();
     }
-    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);
+    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 });
   }
-};
-
-// src/views/BadgeClusterSvgView.ts
-var BadgeClusterSvgView = class {
-  mountOrUpdate(groupEl, visual, state) {
-    const doc = groupEl.ownerDocument;
-    while (groupEl.firstChild) {
-      groupEl.removeChild(groupEl.firstChild);
+  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;
     }
-    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);
+    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);
   }
-};
-
-// src/views/ClusterAnchorSvgView.ts
-var ClusterAnchorSvgView = class {
-  measureConvexHull(visual) {
-    return { kind: "circle", radius: visual.radius + 5 };
+  /** Helper accessor matching `getId` when external callers inspect items. */
+  getItemId(item) {
+    return this.getIdExtractor(item);
   }
-  mountOrUpdate(groupEl, visual, state) {
-    const doc = groupEl.ownerDocument;
-    while (groupEl.firstChild) {
-      groupEl.removeChild(groupEl.firstChild);
+  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.tooltipEl && this.tooltipEl.parentElement === this.containerEl) {
+      this.containerEl.removeChild(this.tooltipEl);
+      this.tooltipEl = null;
+    }
+    if (this.svgEl.parentElement === this.containerEl) {
+      this.containerEl.removeChild(this.svgEl);
     }
-    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);
   }
 };
+function createSimplexSvg(target, itemsOrOptions) {
+  if (Array.isArray(itemsOrOptions)) {
+    return SimplexSvgController.createFromResolved(target, {
+      items: itemsOrOptions,
+      tooltip: true
+    });
+  }
+  return new SimplexSvgController(
+    target,
+    itemsOrOptions
+  );
+}
 
-export { BadgeClusterSvgView, ClusterAnchorSvgView, GeometricShapeSvgView, MultiSectorGlyphSvgView, SVG_NS, SimplexSvgController, SvgRendererAdapter, measureVisualWithSvgView };
+export { BadgeClusterSvgView, ClusterAnchorSvgView, GeometricShapeSvgView, MultiSectorGlyphSvgView, SVG_NS, SimplexSvgController, SvgRendererAdapter, createPresetViews, createPresetVisualResolver, createSimplexSvg, extractDefaultItemLabel, measureVisualWithSvgView };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map