@simplex-viz/svg 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { rectToConvexPolygon, computeConvexHull, regularPolygon, starConvexHull, getHullBoundingRadius, SimplexGraphEngine } from '@simplex-viz/core';
-export { computeConvexHull, rectToConvexPolygon, regularPolygon, solveSimplexSnapshot, starConvexHull } from '@simplex-viz/core';
+export { computeConvexHull, createAdaptiveHexMeshStrategy, createFixedLatticeMeshStrategy, createIncrementalAnchorClusteringStrategy, createJaccardAnnealingClusteringStrategy, createLocalAdaptiveLayoutStrategy, createOklabContrastColorStrategy, createPaletteColorStrategy, createPbdUniformLayoutStrategy, createThemeAdaptiveOklabColorStrategy, createWarmStartPbdLayoutStrategy, rectToConvexPolygon, regularPolygon, solveSimplexSnapshot, starConvexHull } from '@simplex-viz/core';
 
 // src/hullMeasure.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
@@ -98,6 +98,11 @@ var BadgeClusterSvgView = class {
     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));
@@ -109,11 +114,11 @@ var BadgeClusterSvgView = class {
     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("fill", cardFill);
+    bg.setAttribute("fill-opacity", isLight ? "0.97" : "0.94");
     bg.setAttribute(
       "stroke",
-      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered || state.interaction.isHighlighted ? "#e2e8f0" : visual.colorHex
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered || state.interaction.isHighlighted ? hoverStroke : visual.colorHex
     );
     bg.setAttribute(
       "stroke-width",
@@ -129,7 +134,7 @@ var BadgeClusterSvgView = class {
     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("fill", isLight ? "#0f172a" : visual.colorHex);
     codeText.setAttribute("font-size", "10");
     codeText.setAttribute("font-weight", "600");
     codeText.setAttribute("font-family", "IBM Plex Mono, monospace");
@@ -138,7 +143,7 @@ var BadgeClusterSvgView = class {
     const titleText = doc.createElementNS(SVG_NS, "text");
     titleText.setAttribute("x", String(-halfW + 44));
     titleText.setAttribute("y", String(-3));
-    titleText.setAttribute("fill", "#f1f5f9");
+    titleText.setAttribute("fill", titleFill);
     titleText.setAttribute("font-size", "11");
     titleText.setAttribute("font-weight", "600");
     titleText.setAttribute("font-family", "Plus Jakarta Sans, sans-serif");
@@ -148,7 +153,7 @@ var BadgeClusterSvgView = class {
     subText.setAttribute("x", "0");
     subText.setAttribute("y", "13");
     subText.setAttribute("text-anchor", "middle");
-    subText.setAttribute("fill", "#94a3b8");
+    subText.setAttribute("fill", metaFill);
     subText.setAttribute("font-size", "9.5");
     subText.setAttribute("font-family", "IBM Plex Mono, monospace");
     subText.textContent = visual.metaLine;
@@ -166,16 +171,20 @@ var ClusterAnchorSvgView = class {
     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", "#07090E");
-    outer.setAttribute("fill-opacity", "0.88");
+    outer.setAttribute("fill", outerFill);
+    outer.setAttribute("fill-opacity", isLight ? "0.96" : "0.88");
     outer.setAttribute(
       "stroke",
-      state.interaction.isHovered || state.interaction.isHighlighted ? "#f8fafc" : visual.colorHex
+      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");
@@ -185,7 +194,7 @@ var ClusterAnchorSvgView = class {
     inner.setAttribute("cy", "0");
     inner.setAttribute("r", String(r - 2));
     inner.setAttribute("fill", visual.colorHex);
-    inner.setAttribute("fill-opacity", "0.18");
+    inner.setAttribute("fill-opacity", isLight ? "0.14" : "0.18");
     inner.setAttribute("stroke", visual.colorHex);
     inner.setAttribute("stroke-width", "1.4");
     groupEl.appendChild(inner);
@@ -193,7 +202,7 @@ var ClusterAnchorSvgView = class {
     codeEl.setAttribute("x", "0");
     codeEl.setAttribute("y", "-2");
     codeEl.setAttribute("text-anchor", "middle");
-    codeEl.setAttribute("fill", "#f8fafc");
+    codeEl.setAttribute("fill", codeFill);
     codeEl.setAttribute("font-size", "11");
     codeEl.setAttribute("font-weight", "600");
     codeEl.setAttribute("font-family", "IBM Plex Mono, monospace");
@@ -203,8 +212,9 @@ var ClusterAnchorSvgView = class {
     countEl.setAttribute("x", "0");
     countEl.setAttribute("y", "11");
     countEl.setAttribute("text-anchor", "middle");
-    countEl.setAttribute("fill", visual.colorHex);
+    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);
@@ -342,11 +352,15 @@ var GeometricShapeSvgView = class {
     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 ? "#f8fafc" : visual.strokeHex ?? "rgba(15, 23, 42, 0.8)"
+      state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? hoverStroke : visual.strokeHex ?? defaultStroke
     );
     pathEl.setAttribute(
       "stroke-width",
@@ -355,7 +369,7 @@ var GeometricShapeSvgView = class {
     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", state.interaction.isPinned ? "#f59e0b" : accentRing);
       ringEl.setAttribute("stroke-width", "1.4");
       ringEl.setAttribute("stroke-opacity", "0.9");
     } else {
@@ -375,11 +389,12 @@ var GeometricShapeSvgView = class {
         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 ? "#f8fafc" : to.strokeHex ?? "rgba(15, 23, 42, 0.8)"
+      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", "");
@@ -427,6 +442,10 @@ var MultiSectorGlyphSvgView = class {
     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) {
@@ -439,7 +458,7 @@ var MultiSectorGlyphSvgView = class {
         describeDonutSectorPath(visual.innerRadius, visual.outerRadius, angle, nextAngle)
       );
       path.setAttribute("fill", sec.colorHex);
-      path.setAttribute("stroke", "#07090E");
+      path.setAttribute("stroke", dividerStroke);
       path.setAttribute("stroke-width", visual.sectors.length > 1 ? "1.1" : "0.8");
       groupEl.appendChild(path);
       angle = nextAngle;
@@ -458,7 +477,7 @@ var MultiSectorGlyphSvgView = class {
       ring.setAttribute("fill", "none");
       ring.setAttribute(
         "stroke",
-        state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? "#f8fafc" : visual.accentRingHex ?? "#22d3ee"
+        state.interaction.isPinned ? "#f59e0b" : state.interaction.isHovered ? hoverStroke : visual.accentRingHex ?? defaultAccent
       );
       ring.setAttribute("stroke-width", state.interaction.isHovered ? "2" : "1.2");
       groupEl.appendChild(ring);
@@ -493,7 +512,7 @@ function createPresetViews(preset) {
   const clusterView = preset === "badges" ? new BadgeClusterSvgView() : new ClusterAnchorSvgView();
   return { contentView, clusterView };
 }
-function createPresetVisualResolver(preset, getLabel) {
+function createPresetVisualResolver(preset, getLabel, theme = "dark") {
   return {
     resolveContentVisual: (item, ctx) => {
       if (preset === "glyphs") {
@@ -504,7 +523,8 @@ function createPresetVisualResolver(preset, getLabel) {
             colorHex: uc.cluster.colorHex,
             weight: uc.weight
           })),
-          centerColorHex: ctx.mixedColorHex
+          centerColorHex: ctx.mixedColorHex,
+          theme
         };
       }
       const rank = ctx.unitClusters.length;
@@ -512,9 +532,10 @@ function createPresetVisualResolver(preset, getLabel) {
         shape: rank >= 3 ? "star" : rank === 2 ? "diamond" : "circle",
         radius: 9.5,
         fillHex: ctx.mixedColorHex,
-        strokeHex: "#07090E",
+        strokeHex: theme === "light" ? "#ffffff" : "#07090E",
         strokeWidth: 1.4,
-        label: extractDefaultItemLabel(item, ctx.id, getLabel)
+        label: extractDefaultItemLabel(item, ctx.id, getLabel),
+        theme
       };
     },
     resolveClusterVisual: (cluster) => {
@@ -524,7 +545,8 @@ function createPresetVisualResolver(preset, getLabel) {
           code: cluster.code,
           title: cluster.defaultLabel,
           metaLine: `${count} ${count === 1 ? "item" : "items"}`,
-          colorHex: cluster.colorHex
+          colorHex: cluster.colorHex,
+          theme
         };
       }
       return {
@@ -532,21 +554,23 @@ function createPresetVisualResolver(preset, getLabel) {
         label: cluster.defaultLabel,
         memberCount: cluster.members.length,
         colorHex: cluster.colorHex,
-        radius: 22
+        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:${visual.outerRadius}:${visual.centerColorHex}:${secKey}`;
+        return `glyph:${t}:${visual.outerRadius}:${visual.centerColorHex}:${secKey}`;
       }
       if ("shape" in visual) {
-        return `geom:${visual.shape}:${visual.radius}:${visual.fillHex}`;
+        return `geom:${t}:${visual.shape}:${visual.radius}:${visual.fillHex}`;
       }
       if ("metaLine" in visual) {
-        return `badge:${visual.code}:${visual.title}:${visual.metaLine}:${visual.colorHex}`;
+        return `badge:${t}:${visual.code}:${visual.title}:${visual.metaLine}:${visual.colorHex}`;
       }
-      return `anchor:${visual.code}:${visual.memberCount}:${visual.colorHex}`;
+      return `anchor:${t}:${visual.code}:${visual.memberCount}:${visual.colorHex}`;
     }
   };
 }
@@ -672,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);
@@ -935,16 +959,23 @@ var SimplexSvgController = class _SimplexSvgController {
   tooltipOption;
   tooltipEl = null;
   focusedClusterUidState = null;
+  currentPreset;
+  currentTheme;
+  usesCustomVisualResolver;
+  cameraProxy;
   rafId = null;
   lastFrameTs = 0;
   fpsSamples = 0;
   fpsAccumMs = 0;
   destroyed = false;
-  // Centralized drag-to-pan state on root <svg>
+  // Centralized drag-to-pan and multi-touch pinch-zoom state on root <svg>
   isDraggingPan = false;
   dragStartX = 0;
   dragStartY = 0;
   dragMoved = false;
+  activePointers = /* @__PURE__ */ new Map();
+  lastPinchDist = null;
+  lastPinchMid = null;
   constructor(containerEl, options) {
     this.containerEl = resolveContainerElement(containerEl);
     this.onFpsUpdate = options.onFpsUpdate;
@@ -952,13 +983,16 @@ var SimplexSvgController = class _SimplexSvgController {
     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);
+    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(
-      activePreset,
-      this.getLabelExtractor
+      this.currentPreset,
+      this.getLabelExtractor,
+      this.currentTheme
     );
     const doc = this.containerEl.ownerDocument;
     this.svgEl = doc.createElementNS(SVG_NS, "svg");
@@ -988,11 +1022,42 @@ var SimplexSvgController = class _SimplexSvgController {
       resolveTagMeta: options.resolveTagMeta,
       meshOptions: options.meshOptions,
       layoutOptions: options.layoutOptions,
+      meshStrategy: options.meshStrategy,
+      clusteringStrategy: options.clusteringStrategy,
+      colorStrategy: options.colorStrategy,
+      layoutStrategy: options.layoutStrategy,
+      theme: this.currentTheme,
       showHulls: options.showHulls,
       interactions: this.wrapInteractions(options.interactions),
       onMetricsChange: options.onMetricsChange,
       onClustersChange: options.onClustersChange
     });
+    const baseCamera = this.engine.camera;
+    const syncCameraRender = () => {
+      if (this.destroyed) return;
+      this.engine.renderNow();
+    };
+    this.cameraProxy = {
+      getState: () => baseCamera.getState(),
+      setState: (next) => {
+        baseCamera.setState(next);
+        syncCameraRender();
+      },
+      zoomToCursor: (screenX, screenY, zoomFactor) => {
+        baseCamera.zoomToCursor(screenX, screenY, zoomFactor);
+        syncCameraRender();
+      },
+      panBy: (dx, dy) => {
+        baseCamera.panBy(dx, dy);
+        syncCameraRender();
+      },
+      reset: () => {
+        baseCamera.reset();
+        syncCameraRender();
+      },
+      screenToWorld: (screenX, screenY) => baseCamera.screenToWorld(screenX, screenY),
+      worldToScreen: (worldX, worldY) => baseCamera.worldToScreen(worldX, worldY)
+    };
     this.attachSvgListeners();
     if (typeof ResizeObserver !== "undefined") {
       this.resizeObserver = new ResizeObserver((entries) => {
@@ -1076,6 +1141,13 @@ ${tagList}` : label;
     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;
@@ -1093,14 +1165,11 @@ ${count} ${count === 1 ? "item" : "items"}`;
     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.applyTooltipThemeStyles(el);
     this.containerEl.appendChild(el);
     this.tooltipEl = el;
     return el;
@@ -1121,7 +1190,7 @@ ${count} ${count === 1 ? "item" : "items"}`;
     }
   }
   get camera() {
-    return this.engine.camera;
+    return this.cameraProxy;
   }
   getSvgElement() {
     return this.svgEl;
@@ -1152,13 +1221,15 @@ ${count} ${count === 1 ? "item" : "items"}`;
    * 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.getLabelExtractor,
+      this.currentTheme
     );
     this.adapter.setViews({
       contentView: views.contentView,
@@ -1169,6 +1240,64 @@ ${count} ${count === 1 ? "item" : "items"}`;
     );
     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);
+    }
+    this.engine.setTheme(theme);
+    if (!this.usesCustomVisualResolver) {
+      const resolver = createPresetVisualResolver(
+        this.currentPreset,
+        this.getLabelExtractor,
+        theme
+      );
+      this.engine.setVisualResolver(
+        resolver
+      );
+    }
+    this.ensureLoopRunning();
+  }
+  setMeshStrategy(strategy) {
+    this.engine.setMeshStrategy(strategy);
+    this.ensureLoopRunning();
+  }
+  setClusteringStrategy(strategy) {
+    this.engine.setClusteringStrategy(strategy);
+    this.ensureLoopRunning();
+  }
+  setColorStrategy(strategy) {
+    this.engine.setColorStrategy(strategy);
+    this.ensureLoopRunning();
+  }
+  setLayoutStrategy(strategy) {
+    this.engine.setLayoutStrategy(strategy);
+    this.ensureLoopRunning();
+  }
+  getMeshStrategy() {
+    return this.engine.getMeshStrategy();
+  }
+  getClusteringStrategy() {
+    return this.engine.getClusteringStrategy();
+  }
+  getColorStrategy() {
+    return this.engine.getColorStrategy();
+  }
+  getLayoutStrategy() {
+    return this.engine.getLayoutStrategy();
+  }
+  setMeshOptions(options) {
+    this.engine.setMeshOptions(options);
+    this.ensureLoopRunning();
+  }
+  setLayoutOptions(options) {
+    this.engine.setLayoutOptions(options);
+    this.ensureLoopRunning();
+  }
   setTooltip(tooltip) {
     this.tooltipOption = tooltip;
     if (!tooltip) {
@@ -1217,9 +1346,25 @@ ${count} ${count === 1 ? "item" : "items"}`;
       y: clientY - rect.top
     };
   }
+  resetTouchPinchState() {
+    this.lastPinchDist = null;
+    this.lastPinchMid = null;
+  }
   onPointerDown = (e) => {
-    if (e.button !== 0) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
     const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    this.activePointers.set(e.pointerId, { x, y });
+    if (this.activePointers.size >= 2) {
+      this.isDraggingPan = false;
+      this.dragMoved = true;
+      const pts = [...this.activePointers.values()];
+      const p0 = pts[0];
+      const p1 = pts[1];
+      this.lastPinchDist = Math.hypot(p1.x - p0.x, p1.y - p0.y);
+      this.lastPinchMid = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 };
+      this.hideTooltip();
+      return;
+    }
     const hit = this.engine.hitTest(x, y);
     if (hit.kind === "background") {
       this.isDraggingPan = true;
@@ -1234,10 +1379,34 @@ ${count} ${count === 1 ? "item" : "items"}`;
   };
   onPointerMove = (e) => {
     const { x, y } = this.toLocalCoords(e.clientX, e.clientY);
+    if (this.activePointers.has(e.pointerId)) {
+      this.activePointers.set(e.pointerId, { x, y });
+    }
+    if (this.activePointers.size >= 2) {
+      const pts = [...this.activePointers.values()];
+      const p0 = pts[0];
+      const p1 = pts[1];
+      const dist = Math.hypot(p1.x - p0.x, p1.y - p0.y);
+      const mid = { x: (p0.x + p1.x) * 0.5, y: (p0.y + p1.y) * 0.5 };
+      if (this.lastPinchDist !== null && this.lastPinchMid !== null && this.lastPinchDist > 8 && dist > 8) {
+        const dx = mid.x - this.lastPinchMid.x;
+        const dy = mid.y - this.lastPinchMid.y;
+        const zoomFactor = dist / this.lastPinchDist;
+        this.engine.camera.panBy(dx, dy);
+        this.engine.camera.zoomToCursor(mid.x, mid.y, zoomFactor);
+        this.dragMoved = true;
+        this.hideTooltip();
+        this.engine.renderNow();
+      }
+      this.lastPinchDist = dist;
+      this.lastPinchMid = mid;
+      return;
+    }
     if (this.isDraggingPan) {
       const dx = e.clientX - this.dragStartX;
       const dy = e.clientY - this.dragStartY;
-      if (Math.hypot(dx, dy) > 3) {
+      const dragThreshold = e.pointerType === "touch" ? 6 : 3;
+      if (Math.hypot(dx, dy) > dragThreshold) {
         this.dragMoved = true;
       }
       if (this.dragMoved) {
@@ -1245,23 +1414,47 @@ ${count} ${count === 1 ? "item" : "items"}`;
         this.dragStartY = e.clientY;
         this.engine.camera.panBy(dx, dy);
         this.hideTooltip();
-        this.ensureLoopRunning();
+        this.engine.renderNow();
       }
       return;
     }
+    if (e.pointerType === "touch") {
+      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) {
+  onPointerUp = (e) => {
+    this.activePointers.delete(e.pointerId);
+    if (this.activePointers.size < 2) {
+      this.resetTouchPinchState();
+    }
+    if (this.activePointers.size === 0 && this.isDraggingPan) {
       this.isDraggingPan = false;
       this.svgEl.style.cursor = "grab";
     }
   };
-  onPointerLeave = () => {
-    this.isDraggingPan = false;
+  onPointerCancel = (e) => {
+    this.activePointers.delete(e.pointerId);
+    if (this.activePointers.size < 2) {
+      this.resetTouchPinchState();
+    }
+    if (this.activePointers.size === 0) {
+      this.isDraggingPan = false;
+      this.dragMoved = false;
+      this.svgEl.style.cursor = "grab";
+    }
+  };
+  onPointerLeave = (e) => {
+    this.activePointers.delete(e.pointerId);
+    if (this.activePointers.size < 2) {
+      this.resetTouchPinchState();
+    }
+    if (this.activePointers.size === 0) {
+      this.isDraggingPan = false;
+    }
     this.hideTooltip();
     this.engine.handlePointerLeave();
     this.ensureLoopRunning();
@@ -1318,6 +1511,7 @@ ${count} ${count === 1 ? "item" : "items"}`;
     this.svgEl.addEventListener("pointerdown", this.onPointerDown);
     this.svgEl.addEventListener("pointermove", this.onPointerMove);
     this.svgEl.addEventListener("pointerup", this.onPointerUp);
+    this.svgEl.addEventListener("pointercancel", this.onPointerCancel);
     this.svgEl.addEventListener("pointerleave", this.onPointerLeave);
     this.svgEl.addEventListener("click", this.onClick);
     this.svgEl.addEventListener("contextmenu", this.onContextMenu);
@@ -1327,6 +1521,7 @@ ${count} ${count === 1 ? "item" : "items"}`;
     this.svgEl.removeEventListener("pointerdown", this.onPointerDown);
     this.svgEl.removeEventListener("pointermove", this.onPointerMove);
     this.svgEl.removeEventListener("pointerup", this.onPointerUp);
+    this.svgEl.removeEventListener("pointercancel", this.onPointerCancel);
     this.svgEl.removeEventListener("pointerleave", this.onPointerLeave);
     this.svgEl.removeEventListener("click", this.onClick);
     this.svgEl.removeEventListener("contextmenu", this.onContextMenu);