@simplex-viz/svg 0.1.3 → 0.2.1

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,6 +90,490 @@ function measureVisualWithSvgView(view, visual, cacheKey, rootSvg, measureBin, c
   cache.set(cacheKey, hull);
   return hull;
 }
+
+// src/views/BadgeClusterSvgView.ts
+var BadgeClusterSvgView = class {
+  mountOrUpdate(groupEl, visual, state) {
+    const doc = groupEl.ownerDocument;
+    while (groupEl.firstChild) {
+      groupEl.removeChild(groupEl.firstChild);
+    }
+    const isLight = visual.theme === "light";
+    const cardFill = isLight ? "#ffffff" : "#0d1320";
+    const hoverStroke = isLight ? "#0f172a" : "#e2e8f0";
+    const titleFill = isLight ? "#0f172a" : "#f1f5f9";
+    const metaFill = isLight ? "#475569" : "#94a3b8";
+    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", cardFill);
+    bg.setAttribute("fill-opacity", isLight ? "0.97" : "0.94");
+    bg.setAttribute(
+      "stroke",
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered || state.interaction.isHighlighted ? hoverStroke : 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", isLight ? "#0f172a" : 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", titleFill);
+    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", metaFill);
+    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 isLight = visual.theme === "light";
+    const outerFill = isLight ? "#ffffff" : "#07090E";
+    const hoverStroke = isLight ? "#0f172a" : "#f8fafc";
+    const codeFill = isLight ? "#0f172a" : "#f8fafc";
+    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", outerFill);
+    outer.setAttribute("fill-opacity", isLight ? "0.96" : "0.88");
+    outer.setAttribute(
+      "stroke",
+      state.interaction.isHovered || state.interaction.isHighlighted ? hoverStroke : 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", isLight ? "0.14" : "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", codeFill);
+    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", isLight ? "#334155" : visual.colorHex);
+    countEl.setAttribute("font-size", "9");
+    countEl.setAttribute("font-weight", isLight ? "600" : "400");
+    countEl.setAttribute("font-family", "IBM Plex Mono, monospace");
+    countEl.textContent = `${visual.memberCount}n`;
+    groupEl.appendChild(countEl);
+  }
+};
+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);
+    const isLight = visual.theme === "light";
+    const defaultStroke = isLight ? "rgba(15, 23, 42, 0.25)" : "rgba(15, 23, 42, 0.8)";
+    const hoverStroke = isLight ? "#0f172a" : "#f8fafc";
+    const accentRing = isLight ? "#0891b2" : "#22d3ee";
+    pathEl.setAttribute("d", d);
+    pathEl.setAttribute("fill", visual.fillHex);
+    pathEl.setAttribute(
+      "stroke",
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? hoverStroke : visual.strokeHex ?? defaultStroke
+    );
+    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" : accentRing);
+      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
+      });
+    }
+    const isLight = to.theme === "light";
+    pathEl.setAttribute("d", pointsToSvgPath(morphed));
+    pathEl.setAttribute("fill", lerpHex(from.fillHex, to.fillHex, progress));
+    pathEl.setAttribute(
+      "stroke",
+      state.interaction.isHovered ? isLight ? "#0f172a" : "#f8fafc" : to.strokeHex ?? (isLight ? "rgba(15, 23, 42, 0.25)" : "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 isLight = visual.theme === "light";
+    const dividerStroke = isLight ? "#ffffff" : "#07090E";
+    const hoverStroke = isLight ? "#0f172a" : "#f8fafc";
+    const defaultAccent = isLight ? "#0891b2" : "#22d3ee";
+    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", dividerStroke);
+      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 ? hoverStroke : visual.accentRingHex ?? defaultAccent
+      );
+      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, theme = "dark") {
+  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,
+          theme
+        };
+      }
+      const rank = ctx.unitClusters.length;
+      return {
+        shape: rank >= 3 ? "star" : rank === 2 ? "diamond" : "circle",
+        radius: 9.5,
+        fillHex: ctx.mixedColorHex,
+        strokeHex: theme === "light" ? "#ffffff" : "#07090E",
+        strokeWidth: 1.4,
+        label: extractDefaultItemLabel(item, ctx.id, getLabel),
+        theme
+      };
+    },
+    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,
+          theme
+        };
+      }
+      return {
+        code: cluster.code,
+        label: cluster.defaultLabel,
+        memberCount: cluster.members.length,
+        colorHex: cluster.colorHex,
+        radius: 22,
+        theme
+      };
+    },
+    getVisualCacheKey: (visual) => {
+      const t = visual.theme ?? "dark";
+      if ("sectors" in visual) {
+        const secKey = visual.sectors.map((s) => `${s.colorHex}:${s.weight.toFixed(2)}`).join("|");
+        return `glyph:${t}:${visual.outerRadius}:${visual.centerColorHex}:${secKey}`;
+      }
+      if ("shape" in visual) {
+        return `geom:${t}:${visual.shape}:${visual.radius}:${visual.fillHex}`;
+      }
+      if ("metaLine" in visual) {
+        return `badge:${t}:${visual.code}:${visual.title}:${visual.metaLine}:${visual.colorHex}`;
+      }
+      return `anchor:${t}:${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}`;
@@ -211,7 +696,7 @@ var SvgRendererAdapter = class {
     }
     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", "rgba(100, 116, 139, 0.26)");
       line.setAttribute("stroke-width", "1");
       line.setAttribute("stroke-dasharray", "3 4");
       this.edgesGroup.appendChild(line);
@@ -443,7 +928,24 @@ var SvgRendererAdapter = class {
       this.svgEl.removeChild(this.svgEl.firstChild);
     }
   }
-};
+};
+function resolveContainerElement(target) {
+  if (typeof target !== "string") {
+    return target;
+  }
+  if (typeof document === "undefined") {
+    throw new Error(
+      `SimplexSvgController: cannot resolve selector "${target}" outside a DOM environment.`
+    );
+  }
+  const el = document.querySelector(target);
+  if (!el) {
+    throw new Error(
+      `SimplexSvgController: no element matched container selector "${target}".`
+    );
+  }
+  return el;
+}
 var SimplexSvgController = class _SimplexSvgController {
   containerEl;
   svgEl;
@@ -451,6 +953,15 @@ var SimplexSvgController = class _SimplexSvgController {
   engine;
   resizeObserver = null;
   onFpsUpdate;
+  focusOnClusterClick;
+  getIdExtractor;
+  getLabelExtractor;
+  tooltipOption;
+  tooltipEl = null;
+  focusedClusterUidState = null;
+  currentPreset;
+  currentTheme;
+  usesCustomVisualResolver;
   rafId = null;
   lastFrameTs = 0;
   fpsSamples = 0;
@@ -462,29 +973,44 @@ var SimplexSvgController = class _SimplexSvgController {
   dragStartY = 0;
   dragMoved = false;
   constructor(containerEl, options) {
-    this.containerEl = containerEl;
+    this.containerEl = resolveContainerElement(containerEl);
     this.onFpsUpdate = options.onFpsUpdate;
-    const doc = containerEl.ownerDocument;
+    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) : "");
+    this.currentPreset = options.preset ?? "geometric";
+    this.currentTheme = options.theme ?? "dark";
+    this.usesCustomVisualResolver = options.visualResolver !== void 0;
+    const presetViews = createPresetViews(this.currentPreset);
+    const contentView = options.contentView ?? presetViews.contentView;
+    const clusterView = options.clusterView ?? presetViews.clusterView;
+    const visualResolver = options.visualResolver ?? createPresetVisualResolver(
+      this.currentPreset,
+      this.getLabelExtractor,
+      this.currentTheme
+    );
+    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";
-    containerEl.appendChild(this.svgEl);
-    const rect = containerEl.getBoundingClientRect();
+    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: options.contentView,
-      clusterView: options.clusterView
+      contentView,
+      clusterView
     });
     this.engine = SimplexGraphEngine.createFromResolved({
       items: options.items,
       getId: options.getId,
       getTags: options.getTags,
       deriveClusterMeta: options.deriveClusterMeta,
-      visualResolver: options.visualResolver,
+      visualResolver,
       renderer: this.adapter,
       viewportWidth: initialW,
       viewportHeight: initialH,
@@ -493,7 +1019,7 @@ var SimplexSvgController = class _SimplexSvgController {
       meshOptions: options.meshOptions,
       layoutOptions: options.layoutOptions,
       showHulls: options.showHulls,
-      interactions: options.interactions,
+      interactions: this.wrapInteractions(options.interactions),
       onMetricsChange: options.onMetricsChange,
       onClustersChange: options.onClustersChange
     });
@@ -509,13 +1035,125 @@ var SimplexSvgController = class _SimplexSvgController {
           }
         }
       });
-      this.resizeObserver.observe(containerEl);
+      this.resizeObserver.observe(this.containerEl);
     }
     this.ensureLoopRunning();
   }
   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"
+    };
+  }
+  formatContentTooltip(ev) {
+    if (typeof this.tooltipOption === "function") {
+      return this.tooltipOption({ kind: "content", ...ev });
+    }
+    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 });
+    }
+    const count = ev.cluster.members.length;
+    return `${ev.cluster.code} \xB7 ${ev.cluster.defaultLabel}
+${count} ${count === 1 ? "item" : "items"}`;
+  }
+  applyTooltipThemeStyles(el) {
+    const isLight = this.currentTheme === "light";
+    el.style.background = isLight ? "rgba(255, 255, 255, 0.96)" : "rgba(9, 13, 22, 0.94)";
+    el.style.border = isLight ? "1px solid rgba(203, 213, 225, 0.95)" : "1px solid rgba(51, 65, 85, 0.85)";
+    el.style.color = isLight ? "#0f172a" : "#f1f5f9";
+    el.style.boxShadow = isLight ? "0 10px 24px rgba(15, 23, 42, 0.12)" : "0 10px 24px rgba(0, 0, 0, 0.45)";
+  }
+  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";
+    }
+    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.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";
+    this.applyTooltipThemeStyles(el);
+    this.containerEl.appendChild(el);
+    this.tooltipEl = el;
+    return el;
+  }
+  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";
+    }
+  }
   get camera() {
     return this.engine.camera;
   }
@@ -543,6 +1181,57 @@ var SimplexSvgController = class _SimplexSvgController {
     this.engine.setItems(items);
     this.ensureLoopRunning();
   }
+  /**
+   * Switches between built-in presets (`'geometric'`, `'glyphs'`, `'badges'`) with smooth
+   * morph/crossfade transitions.
+   */
+  setPreset(preset, getLabel) {
+    this.currentPreset = preset;
+    if (getLabel !== void 0) {
+      this.getLabelExtractor = getLabel;
+    }
+    const views = createPresetViews(preset);
+    const resolver = createPresetVisualResolver(
+      preset,
+      this.getLabelExtractor,
+      this.currentTheme
+    );
+    this.adapter.setViews({
+      contentView: views.contentView,
+      clusterView: views.clusterView
+    });
+    this.engine.setVisualResolver(
+      resolver
+    );
+    this.ensureLoopRunning();
+  }
+  /**
+   * Switches built-in preset & tooltip theme between `'dark'` and `'light'`.
+   */
+  setTheme(theme) {
+    if (this.currentTheme === theme) return;
+    this.currentTheme = theme;
+    if (this.tooltipEl) {
+      this.applyTooltipThemeStyles(this.tooltipEl);
+    }
+    if (!this.usesCustomVisualResolver) {
+      const resolver = createPresetVisualResolver(
+        this.currentPreset,
+        this.getLabelExtractor,
+        theme
+      );
+      this.engine.setVisualResolver(
+        resolver
+      );
+      this.ensureLoopRunning();
+    }
+  }
+  setTooltip(tooltip) {
+    this.tooltipOption = tooltip;
+    if (!tooltip) {
+      this.hideTooltip();
+    }
+  }
   setVisualResolver(resolver) {
     this.engine.setVisualResolver(resolver);
     this.ensureLoopRunning();
@@ -559,7 +1248,7 @@ var SimplexSvgController = class _SimplexSvgController {
     this.ensureLoopRunning();
   }
   setInteractions(interactions) {
-    this.engine.setInteractions(interactions);
+    this.engine.setInteractions(this.wrapInteractions(interactions));
   }
   setPinnedIds(ids) {
     this.engine.setPinnedIds(ids);
@@ -570,6 +1259,7 @@ var SimplexSvgController = class _SimplexSvgController {
     this.ensureLoopRunning();
   }
   setFocusedClusterUid(clusterUid) {
+    this.focusedClusterUidState = clusterUid;
     this.engine.setFocusedClusterUid(clusterUid);
     this.ensureLoopRunning();
   }
@@ -611,6 +1301,7 @@ var SimplexSvgController = class _SimplexSvgController {
         this.dragStartX = e.clientX;
         this.dragStartY = e.clientY;
         this.engine.camera.panBy(dx, dy);
+        this.hideTooltip();
         this.ensureLoopRunning();
       }
       return;
@@ -628,6 +1319,7 @@ var SimplexSvgController = class _SimplexSvgController {
   };
   onPointerLeave = () => {
     this.isDraggingPan = false;
+    this.hideTooltip();
     this.engine.handlePointerLeave();
     this.ensureLoopRunning();
   };
@@ -678,444 +1370,89 @@ var SimplexSvgController = class _SimplexSvgController {
       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", "");
-    }
+  };
+  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 });
   }
-  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;
+  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);
   }
-};
-
-// 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(" ");
+  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);
   }
-  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 };
+  /** 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);
-    }
-    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;
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    if (this.rafId !== null && typeof cancelAnimationFrame !== "undefined") {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
     }
-    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.resizeObserver?.disconnect();
+    this.detachSvgListeners();
+    this.engine.destroy();
+    if (this.tooltipEl && this.tooltipEl.parentElement === this.containerEl) {
+      this.containerEl.removeChild(this.tooltipEl);
+      this.tooltipEl = null;
     }
-  }
-};
-
-// src/views/BadgeClusterSvgView.ts
-var BadgeClusterSvgView = class {
-  mountOrUpdate(groupEl, visual, state) {
-    const doc = groupEl.ownerDocument;
-    while (groupEl.firstChild) {
-      groupEl.removeChild(groupEl.firstChild);
+    if (this.svgEl.parentElement === this.containerEl) {
+      this.containerEl.removeChild(this.svgEl);
     }
-    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);
+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