@opendata-ai/openchart-vanilla 2.0.0

package/dist/index.js

@@ -0,0 +1,4745 @@
+// src/export.ts
+function exportSVG(svgElement) {
+  const serializer = new XMLSerializer();
+  return serializer.serializeToString(svgElement);
+}
+async function exportPNG(svgElement, options) {
+  const dpi = options?.dpi ?? 2;
+  const svgString = exportSVG(svgElement);
+  const width = parseFloat(svgElement.getAttribute("width") || "600");
+  const height = parseFloat(svgElement.getAttribute("height") || "400");
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpi;
+  canvas.height = height * dpi;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Canvas 2D context not available");
+  }
+  ctx.scale(dpi, dpi);
+  const img = new Image();
+  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      canvas.toBlob((result) => {
+        if (result) {
+          resolve(result);
+        } else {
+          reject(new Error("Canvas toBlob returned null"));
+        }
+      }, "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load SVG as image"));
+    };
+    img.src = url;
+  });
+}
+function exportCSV(data) {
+  if (data.length === 0) return "";
+  const headers = Object.keys(data[0]);
+  const rows = [headers.map(csvEscape).join(",")];
+  for (const row of data) {
+    const values = headers.map((h) => csvEscape(String(row[h] ?? "")));
+    rows.push(values.join(","));
+  }
+  return rows.join("\n");
+}
+function csvEscape(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+
+// src/graph/simulation-worker-url.ts
+var workerUrl = new URL("./simulation-worker.ts", import.meta.url);
+function createSimulationWorker() {
+  return new Worker(workerUrl, { type: "module" });
+}
+
+// src/graph-mount.ts
+import { compileGraph } from "@opendata-ai/openchart-engine";
+
+// src/graph/canvas-renderer.ts
+var LABEL_FONT_MIN = 10;
+var LABEL_FONT_MAX = 14;
+var EDGE_ALPHA_DEFAULT = 0.35;
+var EDGE_ALPHA_CONNECTED = 1;
+var EDGE_ALPHA_DIMMED = 0.05;
+var SEARCH_NON_MATCH_ALPHA = 0.15;
+var GLOW_NODE_THRESHOLD = 2e3;
+var GLOW_RADIUS_MULTIPLIER = 1.5;
+var GLOW_ALPHA = 0.2;
+var CULL_MARGIN = 50;
+var TWO_PI = Math.PI * 2;
+var MIN_SCREEN_RADIUS = 2.5;
+function labelThreshold(zoom) {
+  const t = Math.max(0, Math.min(1, (zoom - 0.2) / 1.8));
+  return 1 - t;
+}
+function visibleRect(canvasWidth, canvasHeight, transform, margin = CULL_MARGIN) {
+  const { x, y, k } = transform;
+  return {
+    minX: (-x - margin) / k,
+    minY: (-y - margin) / k,
+    maxX: (canvasWidth - x + margin) / k,
+    maxY: (canvasHeight - y + margin) / k
+  };
+}
+function nodeInView(node, rect) {
+  return node.x + node.radius >= rect.minX && node.x - node.radius <= rect.maxX && node.y + node.radius >= rect.minY && node.y - node.radius <= rect.maxY;
+}
+function edgeInView(edge, rect) {
+  return edge.sourceX >= rect.minX && edge.sourceX <= rect.maxX && edge.sourceY >= rect.minY && edge.sourceY <= rect.maxY || edge.targetX >= rect.minX && edge.targetX <= rect.maxX && edge.targetY >= rect.minY && edge.targetY <= rect.maxY;
+}
+var DASH_PATTERNS = {
+  solid: [],
+  dashed: [6, 4],
+  dotted: [2, 3]
+};
+var GraphCanvasRenderer = class {
+  canvas;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  ctx;
+  dpr;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  cssWidth = 0;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  cssHeight = 0;
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    this.dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  }
+  /** Update canvas dimensions with DPR scaling. CSS size stays at css values. */
+  resize(width, height) {
+    this.cssWidth = width;
+    this.cssHeight = height;
+    this.canvas.width = width * this.dpr;
+    this.canvas.height = height * this.dpr;
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+  }
+  /** Clear canvas and render the full graph state. */
+  render(state) {
+    const { ctx, dpr, cssWidth, cssHeight } = this;
+    const {
+      nodes,
+      edges,
+      transform,
+      hoveredNodeId,
+      selectedNodeIds,
+      adjacencyMap,
+      theme,
+      searchMatches,
+      isGesturing
+    } = state;
+    const hasActiveNode = hoveredNodeId !== null || selectedNodeIds.size > 0;
+    const activeNodeIds = /* @__PURE__ */ new Set();
+    if (hoveredNodeId) activeNodeIds.add(hoveredNodeId);
+    for (const id of selectedNodeIds) activeNodeIds.add(id);
+    const connectedNodeIds = /* @__PURE__ */ new Set();
+    for (const id of activeNodeIds) {
+      connectedNodeIds.add(id);
+      const neighbors = adjacencyMap.get(id);
+      if (neighbors) {
+        for (const nid of neighbors) connectedNodeIds.add(nid);
+      }
+    }
+    const rect = visibleRect(cssWidth, cssHeight, transform);
+    const visibleNodes = nodes.filter((n) => nodeInView(n, rect));
+    const visibleEdges = edges.filter((e) => edgeInView(e, rect));
+    const isDark = theme.isDark;
+    const showGlow = isDark && !isGesturing && visibleNodes.length < GLOW_NODE_THRESHOLD;
+    const threshold = labelThreshold(transform.k);
+    const minRadius = MIN_SCREEN_RADIUS / transform.k;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssWidth, cssHeight);
+    ctx.fillStyle = theme.colors.background;
+    ctx.fillRect(0, 0, cssWidth, cssHeight);
+    ctx.translate(transform.x, transform.y);
+    ctx.scale(transform.k, transform.k);
+    this.drawEdgesBatched(
+      ctx,
+      visibleEdges,
+      hasActiveNode,
+      connectedNodeIds,
+      isGesturing ? null : searchMatches
+    );
+    this.drawNodesBatched(
+      ctx,
+      visibleNodes,
+      hoveredNodeId,
+      selectedNodeIds,
+      isGesturing ? null : searchMatches,
+      showGlow,
+      theme,
+      minRadius
+    );
+    if (!isGesturing) {
+      this.drawLabels(
+        ctx,
+        visibleNodes,
+        threshold,
+        hoveredNodeId,
+        selectedNodeIds,
+        searchMatches,
+        transform.k,
+        theme
+      );
+    }
+    ctx.restore();
+  }
+  // -------------------------------------------------------------------------
+  // Batched edge drawing
+  // -------------------------------------------------------------------------
+  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches) {
+    const dimmedEdges = [];
+    const defaultEdges = [];
+    const connectedEdges = [];
+    for (const edge of edges) {
+      const isConnected = hasActiveNode && connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target);
+      const isDimmed = hasActiveNode && !isConnected;
+      if (isConnected) {
+        connectedEdges.push(edge);
+      } else if (isDimmed) {
+        dimmedEdges.push(edge);
+      } else {
+        defaultEdges.push(edge);
+      }
+    }
+    this.drawEdgeGroupBatched(ctx, dimmedEdges, EDGE_ALPHA_DIMMED, searchMatches);
+    this.drawEdgeGroupBatched(ctx, defaultEdges, EDGE_ALPHA_DEFAULT, searchMatches);
+    this.drawEdgeGroupBatched(ctx, connectedEdges, EDGE_ALPHA_CONNECTED, searchMatches);
+  }
+  /**
+   * Draw a group of edges at a given alpha, batched by (stroke, strokeWidth, style).
+   * When search is inactive, all edges of the same style are drawn in a single path.
+   * When search is active, edges split by search-match status for alpha dimming.
+   */
+  drawEdgeGroupBatched(ctx, edges, alpha, searchMatches) {
+    if (edges.length === 0) return;
+    const groups = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      const key = `${edge.stroke}|${edge.strokeWidth}|${edge.style}`;
+      let group = groups.get(key);
+      if (!group) {
+        group = [];
+        groups.set(key, group);
+      }
+      group.push(edge);
+    }
+    for (const [, group] of groups) {
+      const sample = group[0];
+      const dash = DASH_PATTERNS[sample.style] ?? DASH_PATTERNS.solid;
+      ctx.setLineDash(dash);
+      ctx.strokeStyle = sample.stroke;
+      ctx.lineWidth = sample.strokeWidth;
+      if (!searchMatches) {
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        for (const edge of group) {
+          ctx.moveTo(edge.sourceX, edge.sourceY);
+          ctx.lineTo(edge.targetX, edge.targetY);
+        }
+        ctx.stroke();
+      } else {
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        let hasMatched = false;
+        const nonMatchPath = [];
+        for (const edge of group) {
+          const srcMatch = searchMatches.has(edge.source);
+          const tgtMatch = searchMatches.has(edge.target);
+          if (srcMatch || tgtMatch) {
+            ctx.moveTo(edge.sourceX, edge.sourceY);
+            ctx.lineTo(edge.targetX, edge.targetY);
+            hasMatched = true;
+          } else {
+            nonMatchPath.push(edge);
+          }
+        }
+        if (hasMatched) ctx.stroke();
+        if (nonMatchPath.length > 0) {
+          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA * alpha;
+          ctx.beginPath();
+          for (const edge of nonMatchPath) {
+            ctx.moveTo(edge.sourceX, edge.sourceY);
+            ctx.lineTo(edge.targetX, edge.targetY);
+          }
+          ctx.stroke();
+        }
+      }
+    }
+    ctx.setLineDash([]);
+    ctx.globalAlpha = 1;
+  }
+  // -------------------------------------------------------------------------
+  // Batched node drawing
+  // -------------------------------------------------------------------------
+  drawNodesBatched(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, showGlow, theme, minRadius) {
+    const bulkNodes = [];
+    const specialNodes = [];
+    for (const node of nodes) {
+      if (node.id === hoveredNodeId || selectedNodeIds.has(node.id)) {
+        specialNodes.push(node);
+      } else {
+        bulkNodes.push(node);
+      }
+    }
+    const r = (node) => Math.max(node.radius, minRadius);
+    if (showGlow) {
+      this.drawGlowBatched(ctx, bulkNodes, searchMatches, minRadius);
+    }
+    const fillGroups = /* @__PURE__ */ new Map();
+    for (const node of bulkNodes) {
+      let group = fillGroups.get(node.fill);
+      if (!group) {
+        group = [];
+        fillGroups.set(node.fill, group);
+      }
+      group.push(node);
+    }
+    if (!searchMatches) {
+      ctx.globalAlpha = 1;
+      for (const [fill, group] of fillGroups) {
+        ctx.fillStyle = fill;
+        ctx.beginPath();
+        for (const node of group) {
+          const nr = r(node);
+          ctx.moveTo(node.x + nr, node.y);
+          ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+        }
+        ctx.fill();
+      }
+    } else {
+      for (const [fill, group] of fillGroups) {
+        ctx.fillStyle = fill;
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        let hasMatched = false;
+        const dimmedNodes = [];
+        for (const node of group) {
+          if (searchMatches.has(node.id)) {
+            const nr = r(node);
+            ctx.moveTo(node.x + nr, node.y);
+            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+            hasMatched = true;
+          } else {
+            dimmedNodes.push(node);
+          }
+        }
+        if (hasMatched) ctx.fill();
+        if (dimmedNodes.length > 0) {
+          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA;
+          ctx.beginPath();
+          for (const node of dimmedNodes) {
+            const nr = r(node);
+            ctx.moveTo(node.x + nr, node.y);
+            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+          }
+          ctx.fill();
+        }
+      }
+    }
+    const strokeGroups = /* @__PURE__ */ new Map();
+    for (const node of bulkNodes) {
+      const key = `${node.stroke}|${node.strokeWidth}`;
+      let group = strokeGroups.get(key);
+      if (!group) {
+        group = [];
+        strokeGroups.set(key, group);
+      }
+      group.push(node);
+    }
+    for (const [key, group] of strokeGroups) {
+      const [stroke, widthStr] = key.split("|");
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = parseFloat(widthStr);
+      if (!searchMatches) {
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        for (const node of group) {
+          const nr = r(node);
+          ctx.moveTo(node.x + nr, node.y);
+          ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+        }
+        ctx.stroke();
+      } else {
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        let hasMatched = false;
+        const dimmedNodes = [];
+        for (const node of group) {
+          if (searchMatches.has(node.id)) {
+            const nr = r(node);
+            ctx.moveTo(node.x + nr, node.y);
+            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+            hasMatched = true;
+          } else {
+            dimmedNodes.push(node);
+          }
+        }
+        if (hasMatched) ctx.stroke();
+        if (dimmedNodes.length > 0) {
+          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA;
+          ctx.beginPath();
+          for (const node of dimmedNodes) {
+            const nr = r(node);
+            ctx.moveTo(node.x + nr, node.y);
+            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
+          }
+          ctx.stroke();
+        }
+      }
+    }
+    for (const node of specialNodes) {
+      const isHovered = node.id === hoveredNodeId;
+      const isSelected = selectedNodeIds.has(node.id);
+      const dimmed = searchMatches !== null && !searchMatches.has(node.id);
+      const baseRadius = Math.max(node.radius, minRadius);
+      const radius = isHovered ? baseRadius * 1.15 : baseRadius;
+      ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      if (showGlow && !dimmed) {
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, radius * GLOW_RADIUS_MULTIPLIER, 0, TWO_PI);
+        ctx.fillStyle = node.fill;
+        ctx.globalAlpha = GLOW_ALPHA;
+        ctx.fill();
+        ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      }
+      ctx.beginPath();
+      ctx.arc(node.x, node.y, radius, 0, TWO_PI);
+      ctx.fillStyle = isHovered ? brighten(node.fill) : node.fill;
+      ctx.fill();
+      ctx.strokeStyle = node.stroke;
+      ctx.lineWidth = node.strokeWidth;
+      ctx.stroke();
+      if (isSelected) {
+        ctx.beginPath();
+        ctx.arc(node.x, node.y, radius + 3, 0, TWO_PI);
+        ctx.strokeStyle = theme.colors.categorical[0] ?? "#3b82f6";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }
+  /** Batch glow circles by fill color. */
+  drawGlowBatched(ctx, nodes, searchMatches, minRadius) {
+    const glowGroups = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (searchMatches && !searchMatches.has(node.id)) continue;
+      let group = glowGroups.get(node.fill);
+      if (!group) {
+        group = [];
+        glowGroups.set(node.fill, group);
+      }
+      group.push(node);
+    }
+    ctx.globalAlpha = GLOW_ALPHA;
+    for (const [fill, group] of glowGroups) {
+      ctx.fillStyle = fill;
+      ctx.beginPath();
+      for (const node of group) {
+        const gr = Math.max(node.radius, minRadius) * GLOW_RADIUS_MULTIPLIER;
+        ctx.moveTo(node.x + gr, node.y);
+        ctx.arc(node.x, node.y, gr, 0, TWO_PI);
+      }
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+  // -------------------------------------------------------------------------
+  // Labels (drawn individually, skipped during gestures)
+  // -------------------------------------------------------------------------
+  drawLabels(ctx, nodes, threshold, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme) {
+    const rawSize = 12 / zoom;
+    const fontSize = Math.max(LABEL_FONT_MIN, Math.min(LABEL_FONT_MAX, rawSize));
+    ctx.font = `${fontSize}px ${theme.fonts.family}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    for (const node of nodes) {
+      if (!node.label) continue;
+      const isHovered = node.id === hoveredNodeId;
+      const isSelected = selectedNodeIds.has(node.id);
+      const forced = isHovered || isSelected;
+      const dimmed = searchMatches !== null && !searchMatches.has(node.id);
+      if (!forced && node.labelPriority < threshold) continue;
+      ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      const labelY = node.y + node.radius + 3;
+      ctx.strokeStyle = theme.colors.background;
+      ctx.lineWidth = 3;
+      ctx.lineJoin = "round";
+      ctx.strokeText(node.label, node.x, labelY);
+      ctx.fillStyle = theme.colors.text;
+      ctx.fillText(node.label, node.x, labelY);
+    }
+    ctx.globalAlpha = 1;
+  }
+};
+function brighten(color) {
+  const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+  if (rgbMatch) {
+    const r = Math.min(255, parseInt(rgbMatch[1], 10) + 40);
+    const g = Math.min(255, parseInt(rgbMatch[2], 10) + 40);
+    const b = Math.min(255, parseInt(rgbMatch[3], 10) + 40);
+    return `rgb(${r},${g},${b})`;
+  }
+  const hex = color.replace("#", "");
+  const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+  if (full.length === 6) {
+    const r = Math.min(255, parseInt(full.slice(0, 2), 16) + 40);
+    const g = Math.min(255, parseInt(full.slice(2, 4), 16) + 40);
+    const b = Math.min(255, parseInt(full.slice(4, 6), 16) + 40);
+    return `rgb(${r},${g},${b})`;
+  }
+  return color;
+}
+
+// src/graph/zoom.ts
+var ZoomTransform = class _ZoomTransform {
+  constructor(x, y, k) {
+    this.x = x;
+    this.y = y;
+    this.k = k;
+  }
+  /** Convert screen coordinates to graph coordinates. */
+  screenToGraph(sx, sy) {
+    return {
+      x: (sx - this.x) / this.k,
+      y: (sy - this.y) / this.k
+    };
+  }
+  /** Convert graph coordinates to screen coordinates. */
+  graphToScreen(gx, gy) {
+    return {
+      x: gx * this.k + this.x,
+      y: gy * this.k + this.y
+    };
+  }
+  /**
+   * Zoom to a target scale, keeping the given screen-space pivot
+   * point fixed (content under the cursor stays under the cursor).
+   */
+  zoomAt(targetK, pivotX, pivotY) {
+    const gx = (pivotX - this.x) / this.k;
+    const gy = (pivotY - this.y) / this.k;
+    return new _ZoomTransform(pivotX - gx * targetK, pivotY - gy * targetK, targetK);
+  }
+  /** Pan by a screen-space delta. */
+  pan(dx, dy) {
+    return new _ZoomTransform(this.x + dx, this.y + dy, this.k);
+  }
+  /**
+   * Compute a transform that fits all nodes within the given canvas
+   * dimensions with the specified padding.
+   */
+  static fitBounds(nodes, canvasW, canvasH, padding = 40) {
+    if (nodes.length === 0) {
+      return _ZoomTransform.identity();
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const n of nodes) {
+      const r = n.radius;
+      if (n.x - r < minX) minX = n.x - r;
+      if (n.y - r < minY) minY = n.y - r;
+      if (n.x + r > maxX) maxX = n.x + r;
+      if (n.y + r > maxY) maxY = n.y + r;
+    }
+    const graphW = maxX - minX;
+    const graphH = maxY - minY;
+    if (graphW === 0 && graphH === 0) {
+      return new _ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1);
+    }
+    const availW = canvasW - padding * 2;
+    const availH = canvasH - padding * 2;
+    const k = Math.min(availW / graphW, availH / graphH);
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const tx = canvasW / 2 - cx * k;
+    const ty = canvasH / 2 - cy * k;
+    return new _ZoomTransform(tx, ty, k);
+  }
+  /** Identity transform (no pan, no zoom). */
+  static identity() {
+    return new _ZoomTransform(0, 0, 1);
+  }
+};
+
+// src/graph/interaction.ts
+var ZOOM_MIN = 0.05;
+var ZOOM_MAX = 15;
+var ZOOM_STEP = -1e-3;
+var HIT_DISTANCE = 5;
+var GraphInteractionManager = class {
+  canvas;
+  spatialIndex;
+  callbacks;
+  transform = ZoomTransform.identity();
+  dragState = null;
+  panState = null;
+  mousedownNodeId = null;
+  selectedIds = /* @__PURE__ */ new Set();
+  // Touch state
+  lastTouchDist = null;
+  lastTouchCenter = null;
+  // Bound handlers for cleanup
+  boundWheel;
+  boundMouseDown;
+  boundMouseMove;
+  boundMouseUp;
+  boundDblClick;
+  boundTouchStart;
+  boundTouchMove;
+  boundTouchEnd;
+  boundMouseLeave;
+  constructor(canvas, spatialIndex, callbacks) {
+    this.canvas = canvas;
+    this.spatialIndex = spatialIndex;
+    this.callbacks = callbacks;
+    this.boundWheel = this.onWheel.bind(this);
+    this.boundMouseDown = this.onMouseDown.bind(this);
+    this.boundMouseMove = this.onMouseMove.bind(this);
+    this.boundMouseUp = this.onMouseUp.bind(this);
+    this.boundMouseLeave = this.onMouseLeave.bind(this);
+    this.boundDblClick = this.onDblClick.bind(this);
+    this.boundTouchStart = this.onTouchStart.bind(this);
+    this.boundTouchMove = this.onTouchMove.bind(this);
+    this.boundTouchEnd = this.onTouchEnd.bind(this);
+    canvas.addEventListener("wheel", this.boundWheel, { passive: false });
+    canvas.addEventListener("mousedown", this.boundMouseDown);
+    canvas.addEventListener("mousemove", this.boundMouseMove);
+    canvas.addEventListener("mouseup", this.boundMouseUp);
+    canvas.addEventListener("mouseleave", this.boundMouseLeave);
+    canvas.addEventListener("dblclick", this.boundDblClick);
+    canvas.addEventListener("touchstart", this.boundTouchStart, {
+      passive: false
+    });
+    canvas.addEventListener("touchmove", this.boundTouchMove, {
+      passive: false
+    });
+    canvas.addEventListener("touchend", this.boundTouchEnd);
+  }
+  setTransform(transform) {
+    this.transform = transform;
+  }
+  getTransform() {
+    return this.transform;
+  }
+  destroy() {
+    this.canvas.removeEventListener("wheel", this.boundWheel);
+    this.canvas.removeEventListener("mousedown", this.boundMouseDown);
+    this.canvas.removeEventListener("mousemove", this.boundMouseMove);
+    this.canvas.removeEventListener("mouseup", this.boundMouseUp);
+    this.canvas.removeEventListener("mouseleave", this.boundMouseLeave);
+    this.canvas.removeEventListener("dblclick", this.boundDblClick);
+    this.canvas.removeEventListener("touchstart", this.boundTouchStart);
+    this.canvas.removeEventListener("touchmove", this.boundTouchMove);
+    this.canvas.removeEventListener("touchend", this.boundTouchEnd);
+  }
+  // -------------------------------------------------------------------------
+  // Mouse handlers
+  // -------------------------------------------------------------------------
+  canvasXY(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+  hitTest(screenX, screenY) {
+    const graph = this.transform.screenToGraph(screenX, screenY);
+    const node = this.spatialIndex.findNearest(graph.x, graph.y, HIT_DISTANCE / this.transform.k);
+    return node?.id ?? null;
+  }
+  onWheel(e) {
+    e.preventDefault();
+    const { x, y } = this.canvasXY(e);
+    const factor = e.deltaY * ZOOM_STEP;
+    const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * (1 + factor)));
+    this.transform = this.transform.zoomAt(newK, x, y);
+    this.callbacks.onTransformChange(this.transform);
+  }
+  onMouseDown(e) {
+    const { x, y } = this.canvasXY(e);
+    const hitId = this.hitTest(x, y);
+    if (hitId) {
+      this.dragState = { nodeId: hitId, started: false };
+      this.mousedownNodeId = hitId;
+    } else {
+      this.panState = { startX: x, startY: y };
+      this.mousedownNodeId = null;
+    }
+  }
+  onMouseMove(e) {
+    const { x, y } = this.canvasXY(e);
+    if (this.dragState) {
+      const graph = this.transform.screenToGraph(x, y);
+      if (!this.dragState.started) {
+        this.dragState.started = true;
+        this.callbacks.onNodeDragStart(this.dragState.nodeId);
+      }
+      this.callbacks.onNodeDrag(this.dragState.nodeId, graph.x, graph.y);
+      return;
+    }
+    if (this.panState) {
+      const dx = x - this.panState.startX;
+      const dy = y - this.panState.startY;
+      this.transform = this.transform.pan(dx, dy);
+      this.panState = { startX: x, startY: y };
+      this.callbacks.onTransformChange(this.transform);
+      return;
+    }
+    const hitId = this.hitTest(x, y);
+    this.callbacks.onHoverChange(hitId);
+    this.canvas.style.cursor = hitId ? "pointer" : "default";
+  }
+  onMouseUp(e) {
+    const { x, y } = this.canvasXY(e);
+    if (this.dragState) {
+      if (this.dragState.started) {
+        this.callbacks.onNodeDragEnd(this.dragState.nodeId);
+      } else {
+        this.handleNodeClick(this.dragState.nodeId, e.shiftKey);
+      }
+      this.dragState = null;
+      return;
+    }
+    if (this.panState) {
+      this.panState = null;
+      if (!this.mousedownNodeId) {
+        const hitId = this.hitTest(x, y);
+        if (!hitId) {
+          this.selectedIds.clear();
+          this.callbacks.onSelectionChange([]);
+        }
+      }
+      return;
+    }
+  }
+  onDblClick(e) {
+    const { x, y } = this.canvasXY(e);
+    const hitId = this.hitTest(x, y);
+    if (hitId) {
+      this.callbacks.onDoubleClick(hitId);
+    }
+  }
+  onMouseLeave(_e) {
+    this.callbacks.onHoverChange(null);
+    this.canvas.style.cursor = "default";
+    if (this.panState) {
+      this.panState = null;
+    }
+  }
+  handleNodeClick(nodeId, shiftKey) {
+    if (shiftKey) {
+      if (this.selectedIds.has(nodeId)) {
+        this.selectedIds.delete(nodeId);
+      } else {
+        this.selectedIds.add(nodeId);
+      }
+    } else {
+      this.selectedIds.clear();
+      this.selectedIds.add(nodeId);
+    }
+    this.callbacks.onSelectionChange([...this.selectedIds]);
+  }
+  // -------------------------------------------------------------------------
+  // Touch handlers
+  // -------------------------------------------------------------------------
+  onTouchStart(e) {
+    e.preventDefault();
+    if (e.touches.length === 2) {
+      const [t0, t1] = [e.touches[0], e.touches[1]];
+      this.lastTouchDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+      this.lastTouchCenter = {
+        x: (t0.clientX + t1.clientX) / 2,
+        y: (t0.clientY + t1.clientY) / 2
+      };
+    } else if (e.touches.length === 1) {
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      const hitId = this.hitTest(x, y);
+      if (hitId) {
+        this.mousedownNodeId = hitId;
+      } else {
+        this.panState = { startX: x, startY: y };
+        this.mousedownNodeId = null;
+      }
+    }
+  }
+  onTouchMove(e) {
+    e.preventDefault();
+    if (e.touches.length === 2 && this.lastTouchDist !== null) {
+      const [t0, t1] = [e.touches[0], e.touches[1]];
+      const newDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+      const rect = this.canvas.getBoundingClientRect();
+      const centerX = (t0.clientX + t1.clientX) / 2 - rect.left;
+      const centerY = (t0.clientY + t1.clientY) / 2 - rect.top;
+      const scale = newDist / this.lastTouchDist;
+      const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * scale));
+      this.transform = this.transform.zoomAt(newK, centerX, centerY);
+      if (this.lastTouchCenter) {
+        const dx = centerX - (this.lastTouchCenter.x - rect.left);
+        const dy = centerY - (this.lastTouchCenter.y - rect.top);
+        this.transform = this.transform.pan(dx, dy);
+      }
+      this.lastTouchDist = newDist;
+      this.lastTouchCenter = {
+        x: (t0.clientX + t1.clientX) / 2,
+        y: (t0.clientY + t1.clientY) / 2
+      };
+      this.callbacks.onTransformChange(this.transform);
+    } else if (e.touches.length === 1 && this.panState) {
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      const dx = x - this.panState.startX;
+      const dy = y - this.panState.startY;
+      this.transform = this.transform.pan(dx, dy);
+      this.panState = { startX: x, startY: y };
+      this.callbacks.onTransformChange(this.transform);
+    }
+  }
+  onTouchEnd(e) {
+    if (e.touches.length === 0) {
+      if (this.mousedownNodeId && !this.panState) {
+        this.handleNodeClick(this.mousedownNodeId, false);
+      } else if (!this.mousedownNodeId && this.panState) {
+        this.selectedIds.clear();
+        this.callbacks.onSelectionChange([]);
+      }
+      this.panState = null;
+      this.mousedownNodeId = null;
+      this.lastTouchDist = null;
+      this.lastTouchCenter = null;
+    }
+  }
+};
+
+// src/graph/keyboard.ts
+function attachGraphKeyboardNav(options) {
+  const {
+    canvas,
+    getNodes,
+    getSelectedIds,
+    getAdjacency,
+    onSelect,
+    onDeselect,
+    onZoom,
+    onFitAll,
+    onFocusSearch
+  } = options;
+  let focusedNodeId = null;
+  if (!canvas.hasAttribute("tabindex")) {
+    canvas.setAttribute("tabindex", "0");
+  }
+  function findNodeById(id) {
+    return getNodes().find((n) => n.id === id);
+  }
+  function pickDirectionalNeighbor(fromNode, neighborIds, direction) {
+    const nodes = getNodes();
+    const candidates = nodes.filter((n) => neighborIds.has(n.id));
+    if (candidates.length === 0) return null;
+    let best = null;
+    let bestScore = -Infinity;
+    for (const c of candidates) {
+      const dx = c.x - fromNode.x;
+      const dy = c.y - fromNode.y;
+      let score;
+      switch (direction) {
+        case "right":
+          score = dx - Math.abs(dy) * 0.5;
+          break;
+        case "left":
+          score = -dx - Math.abs(dy) * 0.5;
+          break;
+        case "down":
+          score = dy - Math.abs(dx) * 0.5;
+          break;
+        case "up":
+          score = -dy - Math.abs(dx) * 0.5;
+          break;
+      }
+      if (score > bestScore) {
+        bestScore = score;
+        best = c;
+      }
+    }
+    return best?.id ?? null;
+  }
+  function onKeyDown(e) {
+    switch (e.key) {
+      case "Tab": {
+        const selected = getSelectedIds();
+        const nodes = getNodes();
+        if (nodes.length === 0) return;
+        if (selected.length > 0) {
+          focusedNodeId = selected[0];
+        } else if (!focusedNodeId || !findNodeById(focusedNodeId)) {
+          focusedNodeId = nodes[0].id;
+        }
+        e.preventDefault();
+        break;
+      }
+      case "ArrowUp":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowRight": {
+        if (!focusedNodeId) return;
+        e.preventDefault();
+        const focusedNode = findNodeById(focusedNodeId);
+        if (!focusedNode) return;
+        const adjacency = getAdjacency();
+        const neighbors = adjacency.get(focusedNodeId);
+        if (!neighbors || neighbors.size === 0) return;
+        const dirMap = {
+          ArrowUp: "up",
+          ArrowDown: "down",
+          ArrowLeft: "left",
+          ArrowRight: "right"
+        };
+        const nextId = pickDirectionalNeighbor(focusedNode, neighbors, dirMap[e.key]);
+        if (nextId) {
+          focusedNodeId = nextId;
+          onSelect(nextId);
+        }
+        break;
+      }
+      case "Enter": {
+        if (focusedNodeId) {
+          e.preventDefault();
+          const selected = getSelectedIds();
+          if (selected.includes(focusedNodeId)) {
+            onDeselect();
+          } else {
+            onSelect(focusedNodeId);
+          }
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        focusedNodeId = null;
+        onDeselect();
+        break;
+      }
+      case "+":
+      case "=": {
+        e.preventDefault();
+        onZoom("in");
+        break;
+      }
+      case "-":
+      case "_": {
+        e.preventDefault();
+        onZoom("out");
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        onFitAll();
+        break;
+      }
+      case "/": {
+        if (onFocusSearch) {
+          e.preventDefault();
+          onFocusSearch();
+        }
+        break;
+      }
+    }
+  }
+  canvas.addEventListener("keydown", onKeyDown);
+  return () => {
+    canvas.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+// src/graph/search.ts
+var GraphSearchManager = class {
+  matchedIds = null;
+  /**
+   * Search for nodes matching the query string.
+   * Returns a Set of matching node ids, or an empty set if nothing matches.
+   */
+  search(query, nodes) {
+    const q = query.toLowerCase().trim();
+    if (q === "") {
+      this.matchedIds = null;
+      return /* @__PURE__ */ new Set();
+    }
+    const matches = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      const label = (node.label ?? "").toLowerCase();
+      const id = node.id.toLowerCase();
+      if (label.includes(q) || id.includes(q)) {
+        matches.add(node.id);
+      }
+    }
+    this.matchedIds = matches;
+    return matches;
+  }
+  /**
+   * Clear the current search.
+   * Returns null to indicate no active search.
+   */
+  clearSearch() {
+    this.matchedIds = null;
+    return null;
+  }
+  /** Get the current set of matched ids, or null if no search is active. */
+  getMatches() {
+    return this.matchedIds;
+  }
+};
+
+// src/graph/simulation.ts
+import {
+  forceCenter,
+  forceCollide,
+  forceLink,
+  forceManyBody,
+  forceSimulation,
+  forceX,
+  forceY
+} from "d3-force";
+var SYNC_THRESHOLD = 200;
+var SYNC_MAX_TICKS = 300;
+function forceCluster(nodes, strength) {
+  return (alpha) => {
+    const cx = /* @__PURE__ */ new Map();
+    const cy = /* @__PURE__ */ new Map();
+    const count = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (!node.community) continue;
+      const c = node.community;
+      cx.set(c, (cx.get(c) ?? 0) + (node.x ?? 0));
+      cy.set(c, (cy.get(c) ?? 0) + (node.y ?? 0));
+      count.set(c, (count.get(c) ?? 0) + 1);
+    }
+    for (const [c, n] of count) {
+      cx.set(c, cx.get(c) / n);
+      cy.set(c, cy.get(c) / n);
+    }
+    const k = strength * alpha;
+    for (const node of nodes) {
+      if (!node.community) continue;
+      const targetX = cx.get(node.community);
+      const targetY = cy.get(node.community);
+      node.vx = (node.vx ?? 0) + (targetX - (node.x ?? 0)) * k;
+      node.vy = (node.vy ?? 0) + (targetY - (node.y ?? 0)) * k;
+    }
+  };
+}
+var SimulationManager = class _SimulationManager {
+  worker = null;
+  syncSim = null;
+  syncNodes = [];
+  syncNodeMap = /* @__PURE__ */ new Map();
+  tickCb = null;
+  settledCb = null;
+  destroyed = false;
+  // Stored for worker->sync fallback
+  initNodes = [];
+  initEdges = [];
+  initConfig = null;
+  constructor() {
+  }
+  /**
+   * Create a SimulationManager. Uses Web Worker for large graphs,
+   * synchronous fallback for small graphs or when Worker unavailable.
+   */
+  static create(nodes, edges, config) {
+    const mgr = new _SimulationManager();
+    const useWorker = typeof Worker !== "undefined" && nodes.length >= SYNC_THRESHOLD;
+    if (useWorker) {
+      mgr.initWorker(nodes, edges, config);
+    } else {
+      mgr.initSync(nodes, edges, config);
+    }
+    return mgr;
+  }
+  /** Register a callback for position updates. */
+  onTick(cb) {
+    this.tickCb = cb;
+  }
+  /** Register a callback for when the simulation has settled. */
+  onSettled(cb) {
+    this.settledCb = cb;
+  }
+  /** Reheat the simulation. */
+  reheat(alpha) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "reheat", alpha });
+    } else if (this.syncSim) {
+      this.syncSim.alpha(alpha ?? 0.3).restart();
+      this.runSyncTicks();
+    }
+  }
+  /** Pin a node to fixed x/y coordinates. */
+  pinNode(id, x, y) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "pin", nodeId: id, x, y });
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = x;
+        node.fy = y;
+      }
+    }
+  }
+  /** Unpin a node (free it from fixed position). */
+  unpinNode(id) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "unpin", nodeId: id });
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = null;
+        node.fy = null;
+      }
+    }
+  }
+  /** Drag a node (pins it and reheats slightly). */
+  dragNode(id, x, y) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "drag", nodeId: id, x, y });
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = x;
+        node.fy = y;
+      }
+      if (this.syncSim && this.syncSim.alpha() < 0.1) {
+        this.syncSim.alpha(0.1).restart();
+        this.runSyncTicks();
+      }
+    }
+  }
+  /** Tear down the simulation and release resources. */
+  destroy() {
+    this.destroyed = true;
+    if (this.worker) {
+      this.worker.postMessage({ type: "stop" });
+      this.worker.terminate();
+      this.worker = null;
+    }
+    if (this.syncSim) {
+      this.syncSim.stop();
+      this.syncSim = null;
+    }
+    this.tickCb = null;
+    this.settledCb = null;
+  }
+  // -------------------------------------------------------------------------
+  // Worker path
+  // -------------------------------------------------------------------------
+  initWorker(nodes, edges, config) {
+    this.initNodes = nodes;
+    this.initEdges = edges;
+    this.initConfig = config;
+    try {
+      const workerUrl2 = new URL("./simulation-worker.ts", import.meta.url);
+      this.worker = new Worker(workerUrl2, { type: "module" });
+    } catch {
+      console.warn("[SimulationManager] Worker creation failed, using sync fallback");
+      this.initSync(nodes, edges, config);
+      return;
+    }
+    this.worker.onmessage = (event) => {
+      if (this.destroyed) return;
+      const msg = event.data;
+      switch (msg.type) {
+        case "positions":
+          this.tickCb?.(msg.nodes, msg.alpha);
+          break;
+        case "settled":
+          this.settledCb?.();
+          break;
+        case "error":
+          console.error("[SimulationManager] Worker error:", msg.message);
+          break;
+      }
+    };
+    this.worker.onerror = () => {
+      if (this.destroyed) return;
+      console.warn("[SimulationManager] Worker failed to load, falling back to sync");
+      this.worker?.terminate();
+      this.worker = null;
+      this.initSync(this.initNodes, this.initEdges, this.initConfig);
+    };
+    this.worker.postMessage({ type: "init", nodes, edges, config });
+  }
+  // -------------------------------------------------------------------------
+  // Synchronous fallback
+  // -------------------------------------------------------------------------
+  initSync(nodes, edges, config) {
+    this.syncNodes = nodes.map((n) => ({
+      id: n.id,
+      x: n.x,
+      y: n.y,
+      radius: n.radius,
+      community: n.community
+    }));
+    this.syncNodeMap = new Map(this.syncNodes.map((n) => [n.id, n]));
+    this.syncSim = forceSimulation(this.syncNodes).force(
+      "link",
+      forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance)
+    ).force("charge", forceManyBody().strength(config.chargeStrength)).force("center", forceCenter(0, 0)).force(
+      "collide",
+      forceCollide().radius((d) => d.radius + 1)
+    ).force("gravityX", forceX(0).strength(0.05)).force("gravityY", forceY(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
+    if (config.clustering) {
+      const clusterFn = forceCluster(this.syncNodes, config.clustering.strength);
+      this.syncSim.force("cluster", clusterFn);
+    }
+    this.runSyncTicks(true);
+  }
+  /**
+   * Run ticks synchronously and fire callbacks.
+   * @param deferred - When true, deliver results via microtask. Used for the
+   *   initial run where callbacks haven't been registered yet. Subsequent
+   *   calls (reheat, drag) fire synchronously since callbacks are already set.
+   */
+  runSyncTicks(deferred = false) {
+    if (!this.syncSim || this.destroyed) return;
+    const sim = this.syncSim;
+    for (let i = 0; i < SYNC_MAX_TICKS; i++) {
+      sim.tick();
+      if (sim.alpha() < 1e-3) break;
+    }
+    const positions = this.syncNodes.map((n) => ({
+      id: n.id,
+      x: n.x ?? 0,
+      y: n.y ?? 0
+    }));
+    const alpha = sim.alpha();
+    const settled = alpha < 1e-3;
+    const deliver = () => {
+      if (this.destroyed) return;
+      this.tickCb?.(positions, alpha);
+      if (settled) {
+        this.settledCb?.();
+      }
+    };
+    if (deferred) {
+      queueMicrotask(deliver);
+    } else {
+      deliver();
+    }
+  }
+};
+
+// src/graph/spatial-index.ts
+import { quadtree } from "d3-quadtree";
+var SpatialIndex = class {
+  tree = null;
+  nodes = [];
+  maxRadius = 0;
+  generation = 0;
+  /** Rebuild the quadtree from the current set of positioned nodes. */
+  rebuild(nodes) {
+    this.nodes = nodes;
+    this.maxRadius = 0;
+    for (const n of nodes) {
+      if (n.radius > this.maxRadius) this.maxRadius = n.radius;
+    }
+    this.tree = quadtree().x((d) => d.x).y((d) => d.y).addAll(nodes);
+    this.generation++;
+  }
+  /** Current generation counter. Increments on each rebuild. */
+  getGeneration() {
+    return this.generation;
+  }
+  /**
+   * Find the nearest node to (x, y) within maxDistance.
+   * Accounts for node radius: a hit occurs if the point is inside
+   * the node circle (distance to center < node.radius), or if the
+   * edge-to-edge distance is within maxDistance.
+   */
+  findNearest(x, y, maxDistance = Infinity) {
+    if (!this.tree || this.nodes.length === 0) return null;
+    const searchRadius = maxDistance + this.maxRadius;
+    let best = null;
+    let bestEffectiveDist = maxDistance + this.maxRadius + 1;
+    this.tree.visit((node, x0, y0, x1, y1) => {
+      const closestX = Math.max(x0, Math.min(x, x1));
+      const closestY = Math.max(y0, Math.min(y, y1));
+      const quadDist = Math.hypot(closestX - x, closestY - y);
+      if (quadDist > searchRadius) return true;
+      if (!node.length) {
+        let current = node;
+        do {
+          const d = current.data;
+          if (d) {
+            const dist = Math.hypot(d.x - x, d.y - y);
+            const effectiveDist = Math.max(0, dist - d.radius);
+            if (effectiveDist <= maxDistance && effectiveDist < bestEffectiveDist) {
+              bestEffectiveDist = effectiveDist;
+              best = d;
+            }
+          }
+        } while (current = current.next);
+      }
+      return false;
+    });
+    return best;
+  }
+  /** Find all nodes whose centers fall within the given rectangle. */
+  findInRect(x1, y1, x2, y2) {
+    if (!this.tree) return [];
+    const minX = Math.min(x1, x2);
+    const minY = Math.min(y1, y2);
+    const maxX = Math.max(x1, x2);
+    const maxY = Math.max(y1, y2);
+    const results = [];
+    this.tree.visit((node, qx0, qy0, qx1, qy1) => {
+      if (qx0 > maxX || qx1 < minX || qy0 > maxY || qy1 < minY) {
+        return true;
+      }
+      if (!node.length) {
+        let current = node;
+        do {
+          const d = current.data;
+          if (d && d.x >= minX && d.x <= maxX && d.y >= minY && d.y <= maxY) {
+            results.push(d);
+          }
+        } while (current = current.next);
+      }
+      return false;
+    });
+    return results;
+  }
+};
+
+// src/resize-observer.ts
+var DEBOUNCE_MS = 16;
+function observeResize(container, callback) {
+  let timeoutId = null;
+  const observer = new ResizeObserver((entries) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        callback(width, height);
+      }
+      timeoutId = null;
+    }, DEBOUNCE_MS);
+  });
+  observer.observe(container);
+  return () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    observer.disconnect();
+  };
+}
+
+// src/tooltip.ts
+var TOOLTIP_OFFSET = 12;
+function createTooltipManager(container) {
+  const tooltip = document.createElement("div");
+  tooltip.className = "viz-tooltip";
+  tooltip.setAttribute("role", "tooltip");
+  container.style.position = container.style.position || "relative";
+  container.appendChild(tooltip);
+  const handleDocumentTouch = (e) => {
+    if (!container.contains(e.target)) {
+      hide();
+    }
+  };
+  document.addEventListener("touchstart", handleDocumentTouch);
+  function show(content, x, y) {
+    let html = "";
+    if (content.title) {
+      const titleColor = content.fields.find((f) => f.color)?.color;
+      html += '<div class="viz-tooltip-header">';
+      if (titleColor) {
+        html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+      }
+      html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+      html += "</div>";
+    }
+    if (content.fields.length > 0) {
+      html += '<div class="viz-tooltip-body">';
+      for (const field of content.fields) {
+        html += '<div class="viz-tooltip-row">';
+        html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
+        html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+        html += "</div>";
+      }
+      html += "</div>";
+    }
+    tooltip.innerHTML = html;
+    tooltip.style.display = "block";
+    const containerRect = container.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    let left = x + TOOLTIP_OFFSET;
+    let top = y + TOOLTIP_OFFSET;
+    if (left + tooltipRect.width > containerRect.width) {
+      left = x - tooltipRect.width - TOOLTIP_OFFSET;
+    }
+    if (top + tooltipRect.height > containerRect.height) {
+      top = y - tooltipRect.height - TOOLTIP_OFFSET;
+    }
+    left = Math.max(0, Math.min(left, containerRect.width - tooltipRect.width));
+    top = Math.max(0, Math.min(top, containerRect.height - tooltipRect.height));
+    tooltip.style.left = `${left}px`;
+    tooltip.style.top = `${top}px`;
+  }
+  function hide() {
+    tooltip.style.display = "none";
+  }
+  function destroy() {
+    document.removeEventListener("touchstart", handleDocumentTouch);
+    if (tooltip.parentNode) {
+      tooltip.parentNode.removeChild(tooltip);
+    }
+  }
+  return { show, hide, destroy };
+}
+function esc(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/graph-mount.ts
+function resolveDarkMode(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+function createGraph(container, spec, options) {
+  let currentSpec = spec;
+  let compilation;
+  let destroyed = false;
+  let wrapper = null;
+  let canvas = null;
+  let chromeEl = null;
+  let legendEl = null;
+  let renderer = null;
+  let simulation = null;
+  const spatialIndex = new SpatialIndex();
+  let interactionManager = null;
+  const searchManager = new GraphSearchManager();
+  let tooltipManager = null;
+  let cleanupKeyboard = null;
+  let disconnectResize = null;
+  let positionedNodes = [];
+  let positionedEdges = [];
+  let adjacencyMap = /* @__PURE__ */ new Map();
+  let hoveredNodeId = null;
+  let selectedNodeIds = /* @__PURE__ */ new Set();
+  let animFrameId = null;
+  let needsRender = false;
+  let isGesturing = false;
+  let gestureTimeout = null;
+  function markGesture() {
+    isGesturing = true;
+    if (gestureTimeout !== null) clearTimeout(gestureTimeout);
+    gestureTimeout = setTimeout(() => {
+      isGesturing = false;
+      gestureTimeout = null;
+      needsRender = true;
+      scheduleRender();
+    }, 150);
+  }
+  function getContainerDimensions() {
+    const rect = container.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function compile() {
+    const { width, height } = getContainerDimensions();
+    const darkMode = resolveDarkMode(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode
+    };
+    return compileGraph(currentSpec, compileOpts);
+  }
+  function buildAdjacencyMap(edges) {
+    const map = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      if (!map.has(edge.source)) map.set(edge.source, /* @__PURE__ */ new Set());
+      if (!map.has(edge.target)) map.set(edge.target, /* @__PURE__ */ new Set());
+      map.get(edge.source).add(edge.target);
+      map.get(edge.target).add(edge.source);
+    }
+    return map;
+  }
+  function toSimNodes(nodes) {
+    return nodes.map((n) => ({
+      id: n.id,
+      radius: n.radius,
+      community: n.community
+    }));
+  }
+  function toSimEdges(edges) {
+    return edges.map((e) => ({
+      source: e.source,
+      target: e.target
+    }));
+  }
+  function nodeDataById(nodeId) {
+    const node = compilation.nodes.find((n) => n.id === nodeId);
+    return node?.data ?? {};
+  }
+  function createDOM() {
+    const { width, height } = getContainerDimensions();
+    const isDark = resolveDarkMode(options?.darkMode);
+    wrapper = document.createElement("div");
+    wrapper.className = "viz-graph-wrapper";
+    if (isDark) {
+      container.classList.add("viz-dark");
+    } else {
+      container.classList.remove("viz-dark");
+    }
+    chromeEl = document.createElement("div");
+    chromeEl.className = "viz-graph-chrome";
+    renderChrome2();
+    wrapper.appendChild(chromeEl);
+    canvas = document.createElement("canvas");
+    canvas.className = "viz-graph-canvas";
+    canvas.setAttribute("role", "img");
+    if (compilation.a11y?.altText) {
+      canvas.setAttribute("aria-label", compilation.a11y.altText);
+    }
+    wrapper.appendChild(canvas);
+    legendEl = document.createElement("div");
+    legendEl.className = "viz-graph-legend";
+    renderLegend2();
+    wrapper.appendChild(legendEl);
+    container.appendChild(wrapper);
+    const chromeHeight = chromeEl.getBoundingClientRect().height || 0;
+    const canvasHeight = Math.max(height - chromeHeight, 200);
+    renderer = new GraphCanvasRenderer(canvas);
+    renderer.resize(width, canvasHeight);
+  }
+  function renderChrome2() {
+    if (!chromeEl) return;
+    let html = "";
+    if (compilation.chrome.title) {
+      html += `<h2 class="viz-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
+    }
+    if (compilation.chrome.subtitle) {
+      html += `<p class="viz-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
+    }
+    chromeEl.innerHTML = html;
+    if (!html) {
+      chromeEl.style.display = "none";
+    } else {
+      chromeEl.style.display = "";
+    }
+  }
+  function renderLegend2() {
+    if (!legendEl) return;
+    const entries = compilation.legend.entries;
+    if (entries.length === 0) {
+      legendEl.style.display = "none";
+      return;
+    }
+    legendEl.style.display = "";
+    let html = "";
+    for (const entry of entries) {
+      html += '<div class="viz-graph-legend-item">';
+      html += `<span class="viz-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
+      html += `<span>${escapeHtml(entry.label)}</span>`;
+      html += "</div>";
+    }
+    legendEl.innerHTML = html;
+  }
+  function initSimulation() {
+    const simNodes = toSimNodes(compilation.nodes);
+    const simEdges = toSimEdges(compilation.edges);
+    const config = compilation.simulationConfig;
+    simulation = SimulationManager.create(simNodes, simEdges, {
+      chargeStrength: config.chargeStrength,
+      linkDistance: config.linkDistance,
+      clustering: config.clustering,
+      alphaDecay: config.alphaDecay,
+      velocityDecay: config.velocityDecay,
+      collisionRadius: config.collisionRadius
+    });
+    simulation.onTick((positions, _alpha) => {
+      if (destroyed) return;
+      const posMap = /* @__PURE__ */ new Map();
+      for (const p of positions) {
+        posMap.set(p.id, { x: p.x, y: p.y });
+      }
+      positionedNodes = compilation.nodes.map((node) => {
+        const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
+        return { ...node, x: pos.x, y: pos.y };
+      });
+      positionedEdges = compilation.edges.map((edge) => {
+        const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
+        const tgt = posMap.get(edge.target) ?? { x: 0, y: 0 };
+        return {
+          ...edge,
+          sourceX: src.x,
+          sourceY: src.y,
+          targetX: tgt.x,
+          targetY: tgt.y
+        };
+      });
+      spatialIndex.rebuild(positionedNodes);
+      needsRender = true;
+      scheduleRender();
+    });
+    simulation.onSettled(() => {
+      if (canvas && positionedNodes.length > 0 && interactionManager) {
+        const { width: cw, height: ch } = getCanvasDimensions();
+        const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+        interactionManager.setTransform(fitTransform);
+        needsRender = true;
+        scheduleRender();
+      }
+    });
+  }
+  function getCanvasDimensions() {
+    if (!canvas) return { width: 600, height: 400 };
+    const rect = canvas.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function scheduleRender() {
+    if (animFrameId !== null || destroyed) return;
+    animFrameId = requestAnimationFrame(renderFrame);
+  }
+  function renderFrame() {
+    animFrameId = null;
+    if (destroyed || !renderer || !interactionManager) return;
+    if (needsRender) {
+      needsRender = false;
+      const transform = interactionManager.getTransform();
+      const state = {
+        nodes: positionedNodes,
+        edges: positionedEdges,
+        transform: { x: transform.x, y: transform.y, k: transform.k },
+        hoveredNodeId,
+        selectedNodeIds,
+        adjacencyMap,
+        theme: compilation.theme,
+        searchMatches: searchManager.getMatches(),
+        isGesturing
+      };
+      renderer.render(state);
+    }
+  }
+  function initInteraction() {
+    if (!canvas) return;
+    tooltipManager = createTooltipManager(wrapper);
+    interactionManager = new GraphInteractionManager(canvas, spatialIndex, {
+      onTransformChange(_transform) {
+        markGesture();
+        needsRender = true;
+        scheduleRender();
+      },
+      onHoverChange(nodeId) {
+        hoveredNodeId = nodeId;
+        needsRender = true;
+        scheduleRender();
+        if (nodeId && tooltipManager) {
+          const content = compilation.tooltipDescriptors.get(nodeId);
+          if (content) {
+            const node = positionedNodes.find((n) => n.id === nodeId);
+            if (node && interactionManager) {
+              const screen = interactionManager.getTransform().graphToScreen(node.x, node.y);
+              tooltipManager.show(content, screen.x, screen.y);
+            }
+          }
+        } else {
+          tooltipManager?.hide();
+        }
+      },
+      onSelectionChange(nodeIds) {
+        selectedNodeIds = new Set(nodeIds);
+        needsRender = true;
+        scheduleRender();
+        options?.onSelectionChange?.(nodeIds);
+        if (nodeIds.length > 0) {
+          const lastId = nodeIds[nodeIds.length - 1];
+          options?.onNodeClick?.(nodeDataById(lastId));
+        }
+      },
+      onNodeDragStart(nodeId) {
+        const node = positionedNodes.find((n) => n.id === nodeId);
+        const x = node?.x ?? 0;
+        const y = node?.y ?? 0;
+        simulation?.pinNode(nodeId, x, y);
+        canvas?.classList.add("viz-graph-canvas--dragging");
+      },
+      onNodeDrag(nodeId, x, y) {
+        simulation?.dragNode(nodeId, x, y);
+      },
+      onNodeDragEnd(nodeId) {
+        simulation?.unpinNode(nodeId);
+        canvas?.classList.remove("viz-graph-canvas--dragging");
+      },
+      onDoubleClick(nodeId) {
+        options?.onNodeDoubleClick?.(nodeDataById(nodeId));
+      }
+    });
+    cleanupKeyboard = attachGraphKeyboardNav({
+      canvas,
+      getNodes: () => positionedNodes,
+      getSelectedIds: () => [...selectedNodeIds],
+      getAdjacency: () => adjacencyMap,
+      onSelect(nodeId) {
+        selectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
+        needsRender = true;
+        scheduleRender();
+        options?.onNodeClick?.(nodeDataById(nodeId));
+        options?.onSelectionChange?.([nodeId]);
+      },
+      onDeselect() {
+        selectedNodeIds.clear();
+        needsRender = true;
+        scheduleRender();
+        options?.onSelectionChange?.([]);
+      },
+      onZoom(direction) {
+        if (!interactionManager || !canvas) return;
+        const t = interactionManager.getTransform();
+        const { width: cw, height: ch } = getCanvasDimensions();
+        const factor = direction === "in" ? 1.2 : 0.8;
+        const newK = t.k * factor;
+        const newTransform = t.zoomAt(newK, cw / 2, ch / 2);
+        interactionManager.setTransform(newTransform);
+        needsRender = true;
+        scheduleRender();
+      },
+      onFitAll() {
+        zoomToFit();
+      }
+    });
+  }
+  function search(query) {
+    if (destroyed) return;
+    searchManager.search(query, positionedNodes);
+    needsRender = true;
+    scheduleRender();
+  }
+  function clearSearch() {
+    if (destroyed) return;
+    searchManager.clearSearch();
+    needsRender = true;
+    scheduleRender();
+  }
+  function zoomToFit() {
+    if (destroyed || !interactionManager || positionedNodes.length === 0) return;
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+    interactionManager.setTransform(fitTransform);
+    needsRender = true;
+    scheduleRender();
+  }
+  function zoomToNode(nodeId) {
+    if (destroyed || !interactionManager || !canvas) return;
+    const node = positionedNodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const k = 2;
+    const tx = cw / 2 - node.x * k;
+    const ty = ch / 2 - node.y * k;
+    const newTransform = new ZoomTransform(tx, ty, k);
+    interactionManager.setTransform(newTransform);
+    needsRender = true;
+    scheduleRender();
+  }
+  function selectNode(nodeId) {
+    if (destroyed) return;
+    selectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
+    needsRender = true;
+    scheduleRender();
+    options?.onSelectionChange?.([nodeId]);
+  }
+  function getSelectedNodes() {
+    return [...selectedNodeIds];
+  }
+  function doResize() {
+    if (destroyed || !canvas || !renderer || !wrapper) return;
+    const { width, height } = getContainerDimensions();
+    const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
+    const canvasHeight = Math.max(height - chromeHeight, 200);
+    renderer.resize(width, canvasHeight);
+    needsRender = true;
+    scheduleRender();
+  }
+  function update(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    teardownSubsystems();
+    compilation = compile();
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    renderChrome2();
+    renderLegend2();
+    initSimulation();
+    initInteraction();
+    hoveredNodeId = null;
+    selectedNodeIds = /* @__PURE__ */ new Set();
+    searchManager.clearSearch();
+  }
+  function teardownSubsystems() {
+    if (animFrameId !== null) {
+      cancelAnimationFrame(animFrameId);
+      animFrameId = null;
+    }
+    if (cleanupKeyboard) {
+      cleanupKeyboard();
+      cleanupKeyboard = null;
+    }
+    interactionManager?.destroy();
+    interactionManager = null;
+    simulation?.destroy();
+    simulation = null;
+    tooltipManager?.destroy();
+    tooltipManager = null;
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (gestureTimeout !== null) {
+      clearTimeout(gestureTimeout);
+      gestureTimeout = null;
+    }
+    teardownSubsystems();
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    if (wrapper?.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+    wrapper = null;
+    canvas = null;
+    chromeEl = null;
+    legendEl = null;
+    renderer = null;
+    container.classList.remove("viz-dark");
+  }
+  try {
+    compilation = compile();
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    createDOM();
+    initSimulation();
+    initInteraction();
+  } catch (err) {
+    console.error("[viz] Graph mount failed:", err);
+    return {
+      update() {
+      },
+      search() {
+      },
+      clearSearch() {
+      },
+      zoomToFit() {
+      },
+      zoomToNode() {
+      },
+      selectNode() {
+      },
+      getSelectedNodes: () => [],
+      resize() {
+      },
+      destroy() {
+      }
+    };
+  }
+  if (options?.responsive !== false) {
+    disconnectResize = observeResize(container, () => {
+      doResize();
+    });
+  }
+  return {
+    update,
+    search,
+    clearSearch,
+    zoomToFit,
+    zoomToNode,
+    selectNode,
+    getSelectedNodes,
+    resize: doResize,
+    destroy
+  };
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/mount.ts
+import { compileChart } from "@opendata-ai/openchart-engine";
+
+// src/svg-renderer.ts
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function createSVGElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+function setAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+function applyTextStyle(el, style) {
+  setAttrs(el, {
+    "font-family": style.fontFamily,
+    "font-size": style.fontSize,
+    "font-weight": style.fontWeight
+  });
+  el.style.setProperty("fill", style.fill);
+  if (style.textAnchor) {
+    el.setAttribute("text-anchor", style.textAnchor);
+  }
+  if (style.dominantBaseline) {
+    el.setAttribute("dominant-baseline", style.dominantBaseline);
+  }
+  if (style.fontVariant) {
+    el.setAttribute("font-variant", style.fontVariant);
+  }
+}
+function renderChromeElement(parent, element, className, chromeKey) {
+  const text = createSVGElement("text");
+  setAttrs(text, { x: element.x, y: element.y });
+  applyTextStyle(text, element.style);
+  text.setAttribute("class", className);
+  text.setAttribute("data-chrome-key", chromeKey);
+  text.textContent = element.text;
+  parent.appendChild(text);
+}
+function renderChrome(parent, layout) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", "viz-chrome");
+  const { chrome } = layout;
+  if (chrome.title) {
+    renderChromeElement(g, chrome.title, "viz-title", "title");
+  }
+  if (chrome.subtitle) {
+    renderChromeElement(g, chrome.subtitle, "viz-subtitle", "subtitle");
+  }
+  const xAxisExtent = layout.axes.x ? layout.axes.x.label ? 48 : 26 : 0;
+  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  if (chrome.source) {
+    renderChromeElement(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      "viz-source",
+      "source"
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      "viz-byline",
+      "byline"
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      "viz-footer",
+      "footer"
+    );
+  }
+  parent.appendChild(g);
+}
+function renderAxis(parent, axis, orientation, layout) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", `viz-axis viz-axis-${orientation}`);
+  const { area } = layout;
+  if (orientation === "x") {
+    const line = createSVGElement("line");
+    line.setAttribute("class", "viz-axis-line");
+    setAttrs(line, {
+      x1: axis.start.x,
+      y1: axis.start.y,
+      x2: axis.end.x,
+      y2: axis.end.y,
+      stroke: layout.theme.colors.axis,
+      "stroke-width": 1
+    });
+    g.appendChild(line);
+  }
+  for (const tick of axis.ticks) {
+    if (orientation === "x") {
+      const label = createSVGElement("text");
+      label.setAttribute("class", "viz-axis-tick");
+      setAttrs(label, {
+        x: tick.position,
+        y: area.y + area.height + 14,
+        "text-anchor": "middle"
+      });
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    } else {
+      const label = createSVGElement("text");
+      label.setAttribute("class", "viz-axis-tick");
+      setAttrs(label, {
+        x: area.x - 6,
+        y: tick.position,
+        "text-anchor": "end",
+        "dominant-baseline": "central"
+      });
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    }
+  }
+  for (const gridline of axis.gridlines) {
+    const gl = createSVGElement("line");
+    gl.setAttribute("class", "viz-gridline");
+    if (orientation === "y") {
+      setAttrs(gl, {
+        x1: area.x,
+        y1: gridline.position,
+        x2: area.x + area.width,
+        y2: gridline.position,
+        stroke: layout.theme.colors.gridline,
+        "stroke-width": 1,
+        "stroke-opacity": 0.35
+      });
+    } else {
+      setAttrs(gl, {
+        x1: gridline.position,
+        y1: area.y,
+        x2: gridline.position,
+        y2: area.y + area.height,
+        stroke: layout.theme.colors.gridline,
+        "stroke-width": 1,
+        "stroke-opacity": 0.35
+      });
+    }
+    g.appendChild(gl);
+  }
+  if (axis.label && axis.labelStyle) {
+    const axisLabel = createSVGElement("text");
+    axisLabel.setAttribute("class", "viz-axis-title");
+    applyTextStyle(axisLabel, axis.labelStyle);
+    axisLabel.textContent = axis.label;
+    if (orientation === "x") {
+      setAttrs(axisLabel, {
+        x: area.x + area.width / 2,
+        y: area.y + area.height + 35,
+        "text-anchor": "middle"
+      });
+    } else {
+      setAttrs(axisLabel, {
+        x: area.x - 45,
+        y: area.y + area.height / 2,
+        "text-anchor": "middle",
+        transform: `rotate(-90, ${area.x - 45}, ${area.y + area.height / 2})`
+      });
+    }
+    g.appendChild(axisLabel);
+  }
+  parent.appendChild(g);
+}
+function renderAxes(parent, layout) {
+  if (layout.axes.x) {
+    renderAxis(parent, layout.axes.x, "x", layout);
+  }
+  if (layout.axes.y) {
+    renderAxis(parent, layout.axes.y, "y", layout);
+  }
+}
+var markRenderers = {};
+function registerMarkRenderer(type, renderer) {
+  markRenderers[type] = renderer;
+}
+function renderLineMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index}`);
+  g.setAttribute("class", "viz-mark viz-mark-line");
+  if (mark.points.length > 1) {
+    const path = createSVGElement("path");
+    const d = mark.path ?? mark.points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+    setAttrs(path, {
+      d,
+      fill: "none",
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+    if (mark.strokeDasharray) {
+      path.setAttribute("stroke-dasharray", mark.strokeDasharray);
+    }
+    g.appendChild(path);
+  }
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "viz-mark-label");
+    if (mark.seriesKey) {
+      label.setAttribute("data-series", mark.seriesKey);
+    }
+    setAttrs(label, { x: mark.label.x, y: mark.label.y });
+    applyTextStyle(label, mark.label.style);
+    label.textContent = mark.label.text;
+    g.appendChild(label);
+    if (mark.label.connector) {
+      const connector = createSVGElement("line");
+      connector.setAttribute("class", "viz-mark-connector");
+      setAttrs(connector, {
+        x1: mark.label.connector.from.x,
+        y1: mark.label.connector.from.y,
+        x2: mark.label.connector.to.x,
+        y2: mark.label.connector.to.y,
+        stroke: mark.label.connector.stroke,
+        "stroke-width": 1,
+        "stroke-opacity": 0.5
+      });
+      g.appendChild(connector);
+    }
+  }
+  return g;
+}
+function renderAreaMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index}`);
+  g.setAttribute("class", "viz-mark viz-mark-area");
+  if (mark.path) {
+    const fill = createSVGElement("path");
+    setAttrs(fill, {
+      d: mark.path,
+      fill: mark.fill,
+      "fill-opacity": mark.fillOpacity,
+      stroke: "none"
+    });
+    g.appendChild(fill);
+    if (mark.stroke && mark.topPath) {
+      const strokePath = createSVGElement("path");
+      setAttrs(strokePath, {
+        d: mark.topPath,
+        fill: "none",
+        stroke: mark.stroke,
+        "stroke-width": mark.strokeWidth ?? 1
+      });
+      g.appendChild(strokePath);
+    }
+  }
+  return g;
+}
+function renderRectMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `rect-${index}`);
+  g.setAttribute("class", "viz-mark viz-mark-rect");
+  const rect = createSVGElement("rect");
+  setAttrs(rect, {
+    x: mark.x,
+    y: mark.y,
+    width: mark.width,
+    height: mark.height,
+    fill: mark.fill
+  });
+  if (mark.stroke) {
+    rect.setAttribute("stroke", mark.stroke);
+  }
+  if (mark.strokeWidth) {
+    rect.setAttribute("stroke-width", String(mark.strokeWidth));
+  }
+  if (mark.cornerRadius) {
+    setAttrs(rect, { rx: mark.cornerRadius, ry: mark.cornerRadius });
+  }
+  g.appendChild(rect);
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "viz-mark-label");
+    setAttrs(label, { x: mark.label.x, y: mark.label.y });
+    applyTextStyle(label, mark.label.style);
+    label.textContent = mark.label.text;
+    g.appendChild(label);
+  }
+  return g;
+}
+function renderArcMark(mark, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("data-mark-id", `arc-${index}`);
+  g.setAttribute("class", "viz-mark viz-mark-arc");
+  g.setAttribute("transform", `translate(${mark.center.x},${mark.center.y})`);
+  const path = createSVGElement("path");
+  setAttrs(path, {
+    d: mark.path,
+    fill: mark.fill,
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  g.appendChild(path);
+  if (mark.label?.visible) {
+    const label = createSVGElement("text");
+    label.setAttribute("class", "viz-mark-label");
+    setAttrs(label, {
+      x: mark.label.x - mark.center.x,
+      y: mark.label.y - mark.center.y
+    });
+    applyTextStyle(label, mark.label.style);
+    label.textContent = mark.label.text;
+    g.appendChild(label);
+  }
+  return g;
+}
+function renderPointMark(mark, index) {
+  const circle = createSVGElement("circle");
+  circle.setAttribute("data-mark-id", `point-${index}`);
+  circle.setAttribute("class", "viz-mark viz-mark-point");
+  setAttrs(circle, {
+    cx: mark.cx,
+    cy: mark.cy,
+    r: mark.r,
+    fill: mark.fill,
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  if (mark.fillOpacity !== void 0) {
+    circle.setAttribute("fill-opacity", String(mark.fillOpacity));
+  }
+  return circle;
+}
+registerMarkRenderer("line", renderLineMark);
+registerMarkRenderer("area", renderAreaMark);
+registerMarkRenderer("rect", renderRectMark);
+registerMarkRenderer("arc", renderArcMark);
+registerMarkRenderer("point", renderPointMark);
+function getMarkSeries(mark) {
+  if (mark.type === "line" || mark.type === "area") {
+    return mark.seriesKey;
+  }
+  if (mark.type === "arc") {
+    return mark.aria.label.split(":")[0]?.trim();
+  }
+  if (mark.aria?.label) {
+    const beforeColon = mark.aria.label.split(":")[0]?.trim();
+    if (beforeColon) return beforeColon;
+  }
+  return void 0;
+}
+function renderMarks(parent, layout) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", "viz-marks");
+  for (let i = 0; i < layout.marks.length; i++) {
+    const mark = layout.marks[i];
+    const renderer = markRenderers[mark.type];
+    if (renderer) {
+      const el = renderer(mark, i);
+      if (mark.aria?.label) {
+        el.setAttribute("aria-label", mark.aria.label);
+      }
+      const series = getMarkSeries(mark);
+      if (series) {
+        el.setAttribute("data-series", series);
+      }
+      g.appendChild(el);
+    }
+  }
+  parent.appendChild(g);
+}
+function renderAnnotations(parent, layout) {
+  if (layout.annotations.length === 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "viz-annotations");
+  for (let i = 0; i < layout.annotations.length; i++) {
+    renderAnnotation(g, layout.annotations[i], i);
+  }
+  parent.appendChild(g);
+}
+function renderCurvedArrow(parent, from, to, stroke) {
+  const pad = 6;
+  const tipY = to.y - pad;
+  const dy = tipY - from.y;
+  const dist = Math.sqrt((to.x - from.x) ** 2 + dy ** 2) || 1;
+  const arrowLen = 8;
+  const arrowWidth = 4;
+  const bulge = Math.max(dist * 0.4, 35);
+  const cp1x = from.x + bulge;
+  const cp1y = from.y + dy * 0.35;
+  const cp2x = to.x;
+  const cp2y = tipY - Math.abs(dy) * 0.25;
+  const tx = to.x - cp2x;
+  const ty = tipY - cp2y;
+  const tLen = Math.sqrt(tx * tx + ty * ty) || 1;
+  const ux = tx / tLen;
+  const uy = ty / tLen;
+  const baseX = to.x - ux * arrowLen;
+  const baseY = tipY - uy * arrowLen;
+  const path = createSVGElement("path");
+  path.setAttribute("class", "viz-annotation-connector");
+  setAttrs(path, {
+    d: `M ${from.x} ${from.y} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${baseX} ${baseY}`,
+    fill: "none",
+    stroke,
+    "stroke-width": 1.5
+  });
+  parent.appendChild(path);
+  const px = -uy;
+  const py = ux;
+  const arrow = createSVGElement("polygon");
+  arrow.setAttribute("class", "viz-annotation-connector");
+  setAttrs(arrow, {
+    points: [
+      `${to.x},${tipY}`,
+      `${baseX + px * arrowWidth},${baseY + py * arrowWidth}`,
+      `${baseX - px * arrowWidth},${baseY - py * arrowWidth}`
+    ].join(" "),
+    fill: stroke
+  });
+  parent.appendChild(arrow);
+}
+function renderAnnotation(parent, annotation, index) {
+  const g = createSVGElement("g");
+  g.setAttribute("class", `viz-annotation viz-annotation-${annotation.type}`);
+  g.setAttribute("data-annotation-index", String(index));
+  if (annotation.rect) {
+    const rect = createSVGElement("rect");
+    rect.setAttribute("class", "viz-annotation-range");
+    setAttrs(rect, {
+      x: annotation.rect.x,
+      y: annotation.rect.y,
+      width: annotation.rect.width,
+      height: annotation.rect.height
+    });
+    if (annotation.fill) rect.setAttribute("fill", annotation.fill);
+    if (annotation.opacity !== void 0) {
+      rect.setAttribute("fill-opacity", String(annotation.opacity));
+    }
+    g.appendChild(rect);
+  }
+  if (annotation.line) {
+    const line = createSVGElement("line");
+    line.setAttribute("class", "viz-annotation-line");
+    setAttrs(line, {
+      x1: annotation.line.start.x,
+      y1: annotation.line.start.y,
+      x2: annotation.line.end.x,
+      y2: annotation.line.end.y,
+      "stroke-width": annotation.strokeWidth ?? 1
+    });
+    if (annotation.stroke) line.setAttribute("stroke", annotation.stroke);
+    if (annotation.strokeDasharray) {
+      line.setAttribute("stroke-dasharray", annotation.strokeDasharray);
+    }
+    g.appendChild(line);
+  }
+  if (annotation.label?.visible) {
+    if (annotation.label.connector) {
+      const c = annotation.label.connector;
+      if (c.style === "caret") {
+        const pointsDown = c.to.y > c.from.y;
+        const caretSize = 4;
+        const labelLines = annotation.label.text.split("\n");
+        const labelFontSize = annotation.label.style.fontSize ?? 12;
+        const labelLineHeight = labelFontSize * (annotation.label.style.lineHeight ?? 1.3);
+        const textBottom = annotation.label.y + (labelLines.length - 1) * labelLineHeight + labelFontSize * 0.25;
+        const textTop = annotation.label.y - labelFontSize;
+        const gapEdge = pointsDown ? textBottom : textTop;
+        const midY = (gapEdge + c.to.y) / 2;
+        const tipX = c.to.x;
+        const tipY = pointsDown ? midY + caretSize / 2 : midY - caretSize / 2;
+        const baseY = pointsDown ? tipY - caretSize : tipY + caretSize;
+        const path = createSVGElement("path");
+        path.setAttribute("class", "viz-annotation-connector");
+        setAttrs(path, {
+          d: `M${tipX - caretSize},${baseY} L${tipX},${tipY} L${tipX + caretSize},${baseY}`,
+          fill: "none",
+          stroke: c.stroke,
+          "stroke-width": 1.5,
+          "stroke-opacity": 0.4,
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        });
+        g.appendChild(path);
+      } else if (c.style === "curve") {
+        renderCurvedArrow(g, c.from, c.to, c.stroke);
+      } else {
+        const connector = createSVGElement("line");
+        connector.setAttribute("class", "viz-annotation-connector");
+        setAttrs(connector, {
+          x1: c.from.x,
+          y1: c.from.y,
+          x2: c.to.x,
+          y2: c.to.y,
+          stroke: c.stroke,
+          "stroke-width": 1,
+          "stroke-opacity": 0.5
+        });
+        g.appendChild(connector);
+      }
+    }
+    const text = createSVGElement("text");
+    text.setAttribute("class", "viz-annotation-label");
+    setAttrs(text, { x: annotation.label.x, y: annotation.label.y });
+    applyTextStyle(text, annotation.label.style);
+    const lines = annotation.label.text.split("\n");
+    const fontSize = annotation.label.style.fontSize ?? 12;
+    const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
+    const isMultiLine = lines.length > 1;
+    if (isMultiLine) {
+      text.setAttribute("text-anchor", "middle");
+      for (let i = 0; i < lines.length; i++) {
+        const tspan = createSVGElement("tspan");
+        setAttrs(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
+        tspan.textContent = lines[i];
+        text.appendChild(tspan);
+      }
+    } else {
+      text.textContent = annotation.label.text;
+    }
+    if (annotation.label.background) {
+      const charWidth = fontSize * 0.55;
+      const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
+      const totalHeight = lines.length * lineHeight;
+      const pad = 3;
+      const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+      const bgRect = createSVGElement("rect");
+      bgRect.setAttribute("class", "viz-annotation-bg");
+      setAttrs(bgRect, {
+        x: bgX,
+        y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
+        width: maxLineWidth + pad * 2,
+        height: totalHeight + pad * 2,
+        fill: annotation.label.background,
+        rx: 2
+      });
+      g.appendChild(bgRect);
+    }
+    g.appendChild(text);
+  }
+  parent.appendChild(g);
+}
+function renderLegend(parent, legend) {
+  if (legend.entries.length === 0) return;
+  const g = createSVGElement("g");
+  g.setAttribute("class", "viz-legend");
+  g.setAttribute("role", "list");
+  g.setAttribute("aria-label", "Chart legend");
+  const isHorizontal = legend.position === "top" || legend.position === "bottom";
+  let offsetX = legend.bounds.x;
+  let offsetY = legend.bounds.y;
+  for (let i = 0; i < legend.entries.length; i++) {
+    const entry = legend.entries[i];
+    const entryG = createSVGElement("g");
+    entryG.setAttribute("class", "viz-legend-entry");
+    entryG.setAttribute("role", "listitem");
+    entryG.setAttribute("data-legend-index", String(i));
+    entryG.setAttribute("data-legend-label", entry.label);
+    entryG.setAttribute(
+      "aria-label",
+      `${entry.label}: ${entry.active !== false ? "visible" : "hidden"}`
+    );
+    entryG.setAttribute("style", "cursor: pointer");
+    if (entry.active === false) {
+      entryG.setAttribute("opacity", "0.3");
+    }
+    if (entry.shape === "circle") {
+      const circle = createSVGElement("circle");
+      setAttrs(circle, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: legend.swatchSize / 2,
+        fill: entry.color
+      });
+      entryG.appendChild(circle);
+    } else if (entry.shape === "line") {
+      const line = createSVGElement("line");
+      setAttrs(line, {
+        x1: offsetX,
+        y1: offsetY + legend.swatchSize / 2,
+        x2: offsetX + legend.swatchSize,
+        y2: offsetY + legend.swatchSize / 2,
+        stroke: entry.color,
+        "stroke-width": 2
+      });
+      entryG.appendChild(line);
+      const dot = createSVGElement("circle");
+      setAttrs(dot, {
+        cx: offsetX + legend.swatchSize / 2,
+        cy: offsetY + legend.swatchSize / 2,
+        r: 2.5,
+        fill: entry.color
+      });
+      entryG.appendChild(dot);
+    } else {
+      const rect = createSVGElement("rect");
+      setAttrs(rect, {
+        x: offsetX,
+        y: offsetY,
+        width: legend.swatchSize,
+        height: legend.swatchSize,
+        fill: entry.color,
+        rx: 2
+      });
+      entryG.appendChild(rect);
+    }
+    const label = createSVGElement("text");
+    setAttrs(label, {
+      x: offsetX + legend.swatchSize + legend.swatchGap,
+      y: offsetY + legend.swatchSize / 2,
+      "dominant-baseline": "central"
+    });
+    applyTextStyle(label, legend.labelStyle);
+    label.textContent = entry.label;
+    entryG.appendChild(label);
+    g.appendChild(entryG);
+    if (isHorizontal) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      offsetX += entryWidth;
+      if (offsetX > legend.bounds.x + legend.bounds.width && i < legend.entries.length - 1) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    } else {
+      offsetY += legend.swatchSize + legend.entryGap;
+    }
+  }
+  parent.appendChild(g);
+}
+function renderChartSVG(layout, container) {
+  const { width, height } = layout.dimensions;
+  const svg = createSVGElement("svg");
+  setAttrs(svg, {
+    viewBox: `0 0 ${width} ${height}`,
+    xmlns: SVG_NS
+  });
+  svg.setAttribute("role", layout.a11y.role);
+  svg.setAttribute("aria-label", layout.a11y.altText);
+  svg.setAttribute("class", "viz-chart");
+  const bg = createSVGElement("rect");
+  setAttrs(bg, {
+    x: 0,
+    y: 0,
+    width,
+    height,
+    fill: layout.theme.colors.background
+  });
+  svg.appendChild(bg);
+  const clipId = `viz-clip-${Math.random().toString(36).slice(2, 8)}`;
+  const defs = createSVGElement("defs");
+  const clipPath = createSVGElement("clipPath");
+  clipPath.setAttribute("id", clipId);
+  const clipRect = createSVGElement("rect");
+  setAttrs(clipRect, {
+    x: 0,
+    y: layout.area.y,
+    width,
+    height: layout.area.height + 2
+  });
+  clipPath.appendChild(clipRect);
+  defs.appendChild(clipPath);
+  svg.appendChild(defs);
+  renderAxes(svg, layout);
+  const clippedGroup = createSVGElement("g");
+  clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
+  renderMarks(clippedGroup, layout);
+  svg.appendChild(clippedGroup);
+  renderAnnotations(svg, layout);
+  renderLegend(svg, layout.legend);
+  renderChrome(svg, layout);
+  container.appendChild(svg);
+  return svg;
+}
+
+// src/mount.ts
+function resolveDarkMode2(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+function createMeasureText() {
+  let canvas = null;
+  let ctx = null;
+  return (text, fontSize, fontWeight) => {
+    if (!canvas) {
+      canvas = document.createElement("canvas");
+      ctx = canvas.getContext("2d");
+    }
+    if (!ctx) {
+      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+    }
+    const weight = fontWeight ?? 400;
+    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    const metrics = ctx.measureText(text);
+    return {
+      width: metrics.width,
+      height: fontSize * 1.2
+    };
+  };
+}
+function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
+  const markElements = svg.querySelectorAll("[data-mark-id]");
+  const cleanups = [];
+  for (const el of markElements) {
+    const markId = el.getAttribute("data-mark-id");
+    if (!markId) continue;
+    const content = tooltipDescriptors.get(markId);
+    if (!content) continue;
+    const handleMouseEnter = (e) => {
+      const mouseEvent = e;
+      const svgRect = svg.getBoundingClientRect();
+      const x = mouseEvent.clientX - svgRect.left;
+      const y = mouseEvent.clientY - svgRect.top;
+      tooltipManager.show(content, x, y);
+    };
+    const handleMouseMove = (e) => {
+      const mouseEvent = e;
+      const svgRect = svg.getBoundingClientRect();
+      const x = mouseEvent.clientX - svgRect.left;
+      const y = mouseEvent.clientY - svgRect.top;
+      tooltipManager.show(content, x, y);
+    };
+    const handleMouseLeave = () => {
+      tooltipManager.hide();
+    };
+    const handleTouchStart = (e) => {
+      const touchEvent = e;
+      if (touchEvent.touches.length > 0) {
+        const touch = touchEvent.touches[0];
+        const svgRect = svg.getBoundingClientRect();
+        const x = touch.clientX - svgRect.left;
+        const y = touch.clientY - svgRect.top;
+        tooltipManager.show(content, x, y);
+      }
+    };
+    el.addEventListener("mouseenter", handleMouseEnter);
+    el.addEventListener("mousemove", handleMouseMove);
+    el.addEventListener("mouseleave", handleMouseLeave);
+    el.addEventListener("touchstart", handleTouchStart);
+    cleanups.push(() => {
+      el.removeEventListener("mouseenter", handleMouseEnter);
+      el.removeEventListener("mousemove", handleMouseMove);
+      el.removeEventListener("mouseleave", handleMouseLeave);
+      el.removeEventListener("touchstart", handleTouchStart);
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function buildMarkDataMap(layout) {
+  const map = /* @__PURE__ */ new Map();
+  for (let i = 0; i < layout.marks.length; i++) {
+    const mark = layout.marks[i];
+    switch (mark.type) {
+      case "line":
+        map.set(`line-${mark.seriesKey ?? i}`, {
+          // For line marks, data is an array. Use the first row as representative.
+          datum: mark.data[0] ?? {},
+          series: mark.seriesKey
+        });
+        break;
+      case "area":
+        map.set(`area-${mark.seriesKey ?? i}`, {
+          datum: mark.data[0] ?? {},
+          series: mark.seriesKey
+        });
+        break;
+      case "rect":
+        map.set(`rect-${i}`, { datum: mark.data });
+        break;
+      case "arc":
+        map.set(`arc-${i}`, { datum: mark.data });
+        break;
+      case "point":
+        map.set(`point-${i}`, { datum: mark.data });
+        break;
+    }
+  }
+  return map;
+}
+function wireChartEvents(svg, layout, specAnnotations, handlers) {
+  const cleanups = [];
+  const markDataMap = buildMarkDataMap(layout);
+  if (handlers.onMarkClick || handlers.onMarkHover || handlers.onMarkLeave) {
+    const markElements = svg.querySelectorAll("[data-mark-id]");
+    for (const el of markElements) {
+      const markId = el.getAttribute("data-mark-id");
+      if (!markId) continue;
+      const markInfo = markDataMap.get(markId);
+      if (!markInfo) continue;
+      const series = markInfo.series ?? el.getAttribute("data-series") ?? void 0;
+      if (handlers.onMarkClick) {
+        const handleClick = (e) => {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          handlers.onMarkClick({
+            datum: markInfo.datum,
+            series,
+            position: {
+              x: mouseEvent.clientX - svgRect.left,
+              y: mouseEvent.clientY - svgRect.top
+            },
+            event: mouseEvent
+          });
+        };
+        el.addEventListener("click", handleClick);
+        cleanups.push(() => el.removeEventListener("click", handleClick));
+      }
+      if (handlers.onMarkHover) {
+        const handleEnter = (e) => {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          handlers.onMarkHover({
+            datum: markInfo.datum,
+            series,
+            position: {
+              x: mouseEvent.clientX - svgRect.left,
+              y: mouseEvent.clientY - svgRect.top
+            },
+            event: mouseEvent
+          });
+        };
+        el.addEventListener("mouseenter", handleEnter);
+        cleanups.push(() => el.removeEventListener("mouseenter", handleEnter));
+      }
+      if (handlers.onMarkLeave) {
+        const handleLeave = () => {
+          handlers.onMarkLeave();
+        };
+        el.addEventListener("mouseleave", handleLeave);
+        cleanups.push(() => el.removeEventListener("mouseleave", handleLeave));
+      }
+    }
+  }
+  if (handlers.onAnnotationClick) {
+    const annotationElements = svg.querySelectorAll(".viz-annotation");
+    for (let i = 0; i < annotationElements.length; i++) {
+      const el = annotationElements[i];
+      const specAnnotation = specAnnotations[i];
+      if (!specAnnotation) continue;
+      const handleClick = (e) => {
+        const mouseEvent = e;
+        handlers.onAnnotationClick(specAnnotation, mouseEvent);
+      };
+      el.addEventListener("click", handleClick);
+      cleanups.push(() => el.removeEventListener("click", handleClick));
+    }
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function createDragHandler(config) {
+  const { element, svg, onMove, onEnd, setDragging, threshold = 3 } = config;
+  const cleanups = [];
+  let activeDocMouseMove = null;
+  let activeDocMouseUp = null;
+  let activeDocTouchMove = null;
+  let activeDocTouchEnd = null;
+  let activeDocTouchCancel = null;
+  function getScale() {
+    const viewBox = svg.viewBox?.baseVal;
+    const svgRect = svg.getBoundingClientRect();
+    return {
+      scaleX: viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1,
+      scaleY: viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1
+    };
+  }
+  function startDrag(startX, startY) {
+    setDragging(true);
+    const { scaleX, scaleY } = getScale();
+    element.style.cursor = "grabbing";
+    svg.style.userSelect = "none";
+    const handleMove = (clientX, clientY) => {
+      const dx = (clientX - startX) * scaleX;
+      const dy = (clientY - startY) * scaleY;
+      onMove(dx, dy);
+    };
+    const cleanupDocListeners = () => {
+      if (activeDocMouseMove) {
+        document.removeEventListener("mousemove", activeDocMouseMove);
+        activeDocMouseMove = null;
+      }
+      if (activeDocMouseUp) {
+        document.removeEventListener("mouseup", activeDocMouseUp);
+        activeDocMouseUp = null;
+      }
+      if (activeDocTouchMove) {
+        document.removeEventListener("touchmove", activeDocTouchMove);
+        activeDocTouchMove = null;
+      }
+      if (activeDocTouchEnd) {
+        document.removeEventListener("touchend", activeDocTouchEnd);
+        activeDocTouchEnd = null;
+      }
+      if (activeDocTouchCancel) {
+        document.removeEventListener("touchcancel", activeDocTouchCancel);
+        activeDocTouchCancel = null;
+      }
+    };
+    const handleEnd = (clientX, clientY) => {
+      const dx = (clientX - startX) * scaleX;
+      const dy = (clientY - startY) * scaleY;
+      const moved = Math.abs(dx) > threshold || Math.abs(dy) > threshold;
+      onEnd(dx, dy, moved);
+      if (moved) {
+        element.addEventListener(
+          "click",
+          (clickE) => {
+            clickE.stopPropagation();
+          },
+          { capture: true, once: true }
+        );
+      }
+      element.style.cursor = "grab";
+      svg.style.userSelect = "";
+      cleanupDocListeners();
+      setDragging(false);
+    };
+    const onMouseMove = (moveEvent) => {
+      handleMove(moveEvent.clientX, moveEvent.clientY);
+    };
+    const onMouseUp = (upEvent) => {
+      handleEnd(upEvent.clientX, upEvent.clientY);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    activeDocMouseMove = onMouseMove;
+    activeDocMouseUp = onMouseUp;
+    const onTouchMove = (moveEvent) => {
+      if (moveEvent.touches.length > 0) {
+        moveEvent.preventDefault();
+        handleMove(moveEvent.touches[0].clientX, moveEvent.touches[0].clientY);
+      }
+    };
+    const onTouchEnd = (endEvent) => {
+      const touch = endEvent.changedTouches[0];
+      if (touch) {
+        handleEnd(touch.clientX, touch.clientY);
+      } else {
+        handleEnd(startX, startY);
+      }
+    };
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+    document.addEventListener("touchcancel", onTouchEnd);
+    activeDocTouchMove = onTouchMove;
+    activeDocTouchEnd = onTouchEnd;
+    activeDocTouchCancel = onTouchEnd;
+  }
+  const handleMouseDown = (e) => {
+    const mouseEvent = e;
+    mouseEvent.preventDefault();
+    startDrag(mouseEvent.clientX, mouseEvent.clientY);
+  };
+  const handleTouchStart = (e) => {
+    const touchEvent = e;
+    if (touchEvent.touches.length === 1) {
+      touchEvent.preventDefault();
+      startDrag(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
+    }
+  };
+  element.addEventListener("mousedown", handleMouseDown);
+  element.addEventListener("touchstart", handleTouchStart, { passive: false });
+  cleanups.push(() => {
+    element.removeEventListener("mousedown", handleMouseDown);
+    element.removeEventListener("touchstart", handleTouchStart);
+  });
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+    if (activeDocMouseMove) {
+      document.removeEventListener("mousemove", activeDocMouseMove);
+      activeDocMouseMove = null;
+    }
+    if (activeDocMouseUp) {
+      document.removeEventListener("mouseup", activeDocMouseUp);
+      activeDocMouseUp = null;
+    }
+    if (activeDocTouchMove) {
+      document.removeEventListener("touchmove", activeDocTouchMove);
+      activeDocTouchMove = null;
+    }
+    if (activeDocTouchEnd) {
+      document.removeEventListener("touchend", activeDocTouchEnd);
+      activeDocTouchEnd = null;
+    }
+    if (activeDocTouchCancel) {
+      document.removeEventListener("touchcancel", activeDocTouchCancel);
+      activeDocTouchCancel = null;
+    }
+    svg.style.userSelect = "";
+  };
+}
+function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setDragging) {
+  const annotationElements = svg.querySelectorAll(".viz-annotation-text");
+  const cleanups = [];
+  for (const el of annotationElements) {
+    const indexStr = el.getAttribute("data-annotation-index");
+    if (indexStr === null) continue;
+    const index = Number(indexStr);
+    const specAnnotation = specAnnotations[index];
+    if (!specAnnotation || specAnnotation.type !== "text") continue;
+    const textAnnotation = specAnnotation;
+    const annotationG = el;
+    annotationG.style.cursor = "grab";
+    const connectorLine = annotationG.querySelector("line.viz-annotation-connector");
+    const origX2 = connectorLine ? Number(connectorLine.getAttribute("x2")) : 0;
+    const origY2 = connectorLine ? Number(connectorLine.getAttribute("y2")) : 0;
+    const curvedPath = annotationG.querySelector("path.viz-annotation-connector");
+    const arrowhead = annotationG.querySelector("polygon.viz-annotation-connector");
+    const hasCurvedConnector = curvedPath !== null;
+    const origDx = textAnnotation.offset?.dx ?? 0;
+    const origDy = textAnnotation.offset?.dy ?? 0;
+    const cleanup = createDragHandler({
+      element: annotationG,
+      svg,
+      onMove: (dx, dy) => {
+        annotationG.setAttribute("transform", `translate(${dx}, ${dy})`);
+        if (connectorLine && !hasCurvedConnector) {
+          connectorLine.setAttribute("x2", String(origX2 - dx));
+          connectorLine.setAttribute("y2", String(origY2 - dy));
+        }
+        if (hasCurvedConnector) {
+          if (curvedPath) curvedPath.setAttribute("display", "none");
+          if (arrowhead) arrowhead.setAttribute("display", "none");
+        }
+      },
+      onEnd: (dx, dy, moved) => {
+        annotationG.removeAttribute("transform");
+        if (connectorLine && !hasCurvedConnector) {
+          connectorLine.setAttribute("x2", String(origX2));
+          connectorLine.setAttribute("y2", String(origY2));
+        }
+        if (hasCurvedConnector) {
+          if (curvedPath) curvedPath.removeAttribute("display");
+          if (arrowhead) arrowhead.removeAttribute("display");
+        }
+        if (moved) {
+          const newOffset = {
+            dx: origDx + dx,
+            dy: origDy + dy
+          };
+          onAnnotationEdit?.(textAnnotation, newOffset);
+          onEdit?.({ type: "annotation", annotation: textAnnotation, offset: newOffset });
+        }
+      },
+      setDragging
+    });
+    cleanups.push(cleanup);
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
+  const SVG_NS2 = "http://www.w3.org/2000/svg";
+  const cleanups = [];
+  const annotationGroups = svg.querySelectorAll(".viz-annotation-text");
+  for (const el of annotationGroups) {
+    const annotationG = el;
+    const indexStr = annotationG.getAttribute("data-annotation-index");
+    if (indexStr === null) continue;
+    const index = Number(indexStr);
+    const specAnnotation = specAnnotations[index];
+    if (!specAnnotation || specAnnotation.type !== "text") continue;
+    const textAnnotation = specAnnotation;
+    const connectorLine = annotationG.querySelector("line.viz-annotation-connector");
+    const curvedPath = annotationG.querySelector("path.viz-annotation-connector");
+    if (!connectorLine && !curvedPath) continue;
+    let fromX, fromY, toX, toY;
+    if (connectorLine) {
+      fromX = Number(connectorLine.getAttribute("x1"));
+      fromY = Number(connectorLine.getAttribute("y1"));
+      toX = Number(connectorLine.getAttribute("x2"));
+      toY = Number(connectorLine.getAttribute("y2"));
+    } else {
+      const pathD = curvedPath.getAttribute("d") ?? "";
+      const mMatch = pathD.match(/M\s*([\d.e+-]+)\s+([\d.e+-]+)/);
+      fromX = mMatch ? Number(mMatch[1]) : 0;
+      fromY = mMatch ? Number(mMatch[2]) : 0;
+      const arrowhead = annotationG.querySelector("polygon.viz-annotation-connector");
+      const points = arrowhead?.getAttribute("points") ?? "";
+      const firstPoint = points.split(" ")[0] ?? "0,0";
+      const [px, py] = firstPoint.split(",");
+      toX = Number(px);
+      toY = Number(py);
+    }
+    const endpoints = [
+      { name: "from", cx: fromX, cy: fromY },
+      { name: "to", cx: toX, cy: toY }
+    ];
+    const createdHandles = [];
+    for (const ep of endpoints) {
+      const handleEl = document.createElementNS(SVG_NS2, "circle");
+      handleEl.setAttribute("class", "viz-connector-handle");
+      handleEl.setAttribute("data-endpoint", ep.name);
+      handleEl.setAttribute("cx", String(ep.cx));
+      handleEl.setAttribute("cy", String(ep.cy));
+      handleEl.setAttribute("r", "4");
+      handleEl.setAttribute("opacity", "0");
+      handleEl.setAttribute("fill", "currentColor");
+      handleEl.setAttribute("stroke", "currentColor");
+      annotationG.appendChild(handleEl);
+      createdHandles.push(handleEl);
+      const origCx = ep.cx;
+      const origCy = ep.cy;
+      const stopProp = (e) => {
+        e.stopPropagation();
+      };
+      handleEl.addEventListener("mousedown", stopProp);
+      handleEl.addEventListener("touchstart", stopProp);
+      cleanups.push(() => {
+        handleEl.removeEventListener("mousedown", stopProp);
+        handleEl.removeEventListener("touchstart", stopProp);
+      });
+      const cleanup = createDragHandler({
+        element: handleEl,
+        svg,
+        onMove: (dx, dy) => {
+          handleEl.setAttribute("cx", String(origCx + dx));
+          handleEl.setAttribute("cy", String(origCy + dy));
+          if (connectorLine) {
+            if (ep.name === "from") {
+              connectorLine.setAttribute("x1", String(origCx + dx));
+              connectorLine.setAttribute("y1", String(origCy + dy));
+            } else {
+              connectorLine.setAttribute("x2", String(origCx + dx));
+              connectorLine.setAttribute("y2", String(origCy + dy));
+            }
+          }
+        },
+        onEnd: (dx, dy, moved) => {
+          handleEl.setAttribute("cx", String(origCx));
+          handleEl.setAttribute("cy", String(origCy));
+          if (connectorLine) {
+            if (ep.name === "from") {
+              connectorLine.setAttribute("x1", String(origCx));
+              connectorLine.setAttribute("y1", String(origCy));
+            } else {
+              connectorLine.setAttribute("x2", String(origCx));
+              connectorLine.setAttribute("y2", String(origCy));
+            }
+          }
+          if (moved) {
+            const existingOffset = textAnnotation.connectorOffset?.[ep.name];
+            const origEndDx = existingOffset?.dx ?? 0;
+            const origEndDy = existingOffset?.dy ?? 0;
+            onEdit({
+              type: "annotation-connector",
+              annotation: textAnnotation,
+              endpoint: ep.name,
+              offset: { dx: origEndDx + dx, dy: origEndDy + dy }
+            });
+          }
+        },
+        setDragging
+      });
+      cleanups.push(cleanup);
+    }
+    const showHandles = () => {
+      for (const h of createdHandles) {
+        h.setAttribute("opacity", "0.6");
+      }
+    };
+    const hideHandles = () => {
+      for (const h of createdHandles) {
+        h.setAttribute("opacity", "0");
+      }
+    };
+    annotationG.addEventListener("mouseenter", showHandles);
+    annotationG.addEventListener("mouseleave", hideHandles);
+    cleanups.push(() => {
+      annotationG.removeEventListener("mouseenter", showHandles);
+      annotationG.removeEventListener("mouseleave", hideHandles);
+      for (const h of createdHandles) {
+        h.remove();
+      }
+    });
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireAnnotationLabelDrag(svg, specAnnotations, onEdit, setDragging) {
+  const cleanups = [];
+  const selectors = [
+    ".viz-annotation-range .viz-annotation-label",
+    ".viz-annotation-refline .viz-annotation-label"
+  ];
+  for (const selector of selectors) {
+    const labels = svg.querySelectorAll(selector);
+    for (const label of labels) {
+      const annotationG = label.closest(".viz-annotation");
+      if (!annotationG) continue;
+      const indexStr = annotationG.getAttribute("data-annotation-index");
+      if (indexStr === null) continue;
+      const index = Number(indexStr);
+      const specAnnotation = specAnnotations[index];
+      if (!specAnnotation) continue;
+      const labelEl = label;
+      labelEl.style.cursor = "grab";
+      const isRange = specAnnotation.type === "range";
+      const existingLabelOffset = isRange ? specAnnotation.labelOffset : specAnnotation.labelOffset;
+      const origLabelDx = existingLabelOffset?.dx ?? 0;
+      const origLabelDy = existingLabelOffset?.dy ?? 0;
+      const cleanup = createDragHandler({
+        element: labelEl,
+        svg,
+        onMove: (dx, dy) => {
+          labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
+        },
+        onEnd: (dx, dy, moved) => {
+          labelEl.style.transform = "";
+          if (moved) {
+            if (isRange) {
+              onEdit({
+                type: "range-label",
+                annotation: specAnnotation,
+                labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
+              });
+            } else {
+              onEdit({
+                type: "refline-label",
+                annotation: specAnnotation,
+                labelOffset: { dx: origLabelDx + dx, dy: origLabelDy + dy }
+              });
+            }
+          }
+        },
+        setDragging
+      });
+      cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireChromeDrag(svg, spec, onEdit, setDragging) {
+  const chromeTexts = svg.querySelectorAll(".viz-chrome text[data-chrome-key]");
+  const cleanups = [];
+  const chromeConfig = "chrome" in spec ? spec.chrome : void 0;
+  for (const el of chromeTexts) {
+    const textEl = el;
+    const key = textEl.getAttribute("data-chrome-key");
+    if (!key) continue;
+    const chromeEntry = chromeConfig?.[key];
+    const existingOffset = typeof chromeEntry === "object" && chromeEntry !== null ? chromeEntry.offset : void 0;
+    const origChromeDx = existingOffset?.dx ?? 0;
+    const origChromeDy = existingOffset?.dy ?? 0;
+    textEl.style.cursor = "grab";
+    const cleanup = createDragHandler({
+      element: textEl,
+      svg,
+      onMove: (dx, dy) => {
+        textEl.style.transform = `translate(${dx}px, ${dy}px)`;
+      },
+      onEnd: (dx, dy, moved) => {
+        textEl.style.transform = "";
+        if (moved) {
+          onEdit({
+            type: "chrome",
+            key,
+            text: textEl.textContent ?? "",
+            offset: { dx: origChromeDx + dx, dy: origChromeDy + dy }
+          });
+        }
+      },
+      setDragging
+    });
+    cleanups.push(cleanup);
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireLegendDrag(svg, spec, onEdit, setDragging) {
+  const legendG = svg.querySelector(".viz-legend");
+  if (!legendG) return () => {
+  };
+  const cleanups = [];
+  const legendConfig = "legend" in spec ? spec.legend : void 0;
+  const origLegendDx = legendConfig?.offset?.dx ?? 0;
+  const origLegendDy = legendConfig?.offset?.dy ?? 0;
+  legendG.style.cursor = "grab";
+  const cleanup = createDragHandler({
+    element: legendG,
+    svg,
+    onMove: (dx, dy) => {
+      legendG.style.transform = `translate(${dx}px, ${dy}px)`;
+    },
+    onEnd: (dx, dy, moved) => {
+      legendG.style.transform = "";
+      if (moved) {
+        onEdit({ type: "legend", offset: { dx: origLegendDx + dx, dy: origLegendDy + dy } });
+      }
+    },
+    setDragging
+  });
+  cleanups.push(cleanup);
+  return () => {
+    for (const cleanup2 of cleanups) {
+      cleanup2();
+    }
+  };
+}
+function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
+  const labels = svg.querySelectorAll(".viz-mark-label");
+  const cleanups = [];
+  const labelsConfig = "labels" in spec ? spec.labels : void 0;
+  for (const label of labels) {
+    const labelEl = label;
+    const series = labelEl.getAttribute("data-series") ?? labelEl.closest("[data-series]")?.getAttribute("data-series");
+    if (!series) continue;
+    const existingSeriesOffset = labelsConfig?.offsets?.[series];
+    const origSeriesDx = existingSeriesOffset?.dx ?? 0;
+    const origSeriesDy = existingSeriesOffset?.dy ?? 0;
+    labelEl.style.cursor = "grab";
+    const cleanup = createDragHandler({
+      element: labelEl,
+      svg,
+      onMove: (dx, dy) => {
+        labelEl.style.transform = `translate(${dx}px, ${dy}px)`;
+      },
+      onEnd: (dx, dy, moved) => {
+        labelEl.style.transform = "";
+        if (moved) {
+          onEdit({
+            type: "series-label",
+            series,
+            offset: { dx: origSeriesDx + dx, dy: origSeriesDy + dy }
+          });
+        }
+      },
+      setDragging
+    });
+    cleanups.push(cleanup);
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireLegendInteraction(svg, _layout, onLegendToggle) {
+  const legendEntries = svg.querySelectorAll("[data-legend-index]");
+  const cleanups = [];
+  const hiddenSeries = /* @__PURE__ */ new Set();
+  for (const entry of legendEntries) {
+    const handleClick = () => {
+      const label = entry.getAttribute("data-legend-label");
+      if (!label) return;
+      if (hiddenSeries.has(label)) {
+        hiddenSeries.delete(label);
+        entry.setAttribute("opacity", "1");
+        entry.setAttribute("aria-label", `${label}: visible`);
+        onLegendToggle?.(label, true);
+      } else {
+        hiddenSeries.add(label);
+        entry.setAttribute("opacity", "0.3");
+        entry.setAttribute("aria-label", `${label}: hidden`);
+        onLegendToggle?.(label, false);
+      }
+      const marks = svg.querySelectorAll(".viz-mark");
+      for (const mark of marks) {
+        const seriesName = mark.getAttribute("data-series");
+        if (!seriesName) continue;
+        if (hiddenSeries.has(seriesName)) {
+          mark.style.display = "none";
+        } else {
+          mark.style.display = "";
+        }
+      }
+    };
+    entry.addEventListener("click", handleClick);
+    cleanups.push(() => entry.removeEventListener("click", handleClick));
+  }
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+function wireKeyboardNav(svg, container, tooltipDescriptors, tooltipManager, layout) {
+  container.setAttribute("tabindex", "0");
+  container.setAttribute("aria-roledescription", "chart");
+  container.setAttribute("aria-label", layout.a11y.altText);
+  const markElements = [];
+  const allMarkEls = svg.querySelectorAll("[data-mark-id]");
+  for (const el of allMarkEls) {
+    const markId = el.getAttribute("data-mark-id");
+    if (markId && tooltipDescriptors.has(markId)) {
+      markElements.push(el);
+    }
+  }
+  let focusIndex = -1;
+  function highlightMark(index) {
+    if (focusIndex >= 0 && focusIndex < markElements.length) {
+      markElements[focusIndex].classList.remove("viz-mark-focused");
+      markElements[focusIndex].removeAttribute("aria-selected");
+    }
+    focusIndex = index;
+    if (focusIndex >= 0 && focusIndex < markElements.length) {
+      const el = markElements[focusIndex];
+      el.classList.add("viz-mark-focused");
+      el.setAttribute("aria-selected", "true");
+    }
+  }
+  function showTooltipForFocused() {
+    if (focusIndex < 0 || focusIndex >= markElements.length) return;
+    const el = markElements[focusIndex];
+    const markId = el.getAttribute("data-mark-id");
+    if (!markId) return;
+    const content = tooltipDescriptors.get(markId);
+    if (!content) return;
+    const bbox = el.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const x = bbox.left + bbox.width / 2 - containerRect.left;
+    const y = bbox.top - containerRect.top;
+    tooltipManager.show(content, x, y);
+  }
+  const handleKeyDown = (e) => {
+    if (markElements.length === 0) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = focusIndex < markElements.length - 1 ? focusIndex + 1 : 0;
+        highlightMark(next);
+        showTooltipForFocused();
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = focusIndex > 0 ? focusIndex - 1 : markElements.length - 1;
+        highlightMark(prev);
+        showTooltipForFocused();
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (focusIndex >= 0) {
+          showTooltipForFocused();
+        } else if (markElements.length > 0) {
+          highlightMark(0);
+          showTooltipForFocused();
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        tooltipManager.hide();
+        highlightMark(-1);
+        break;
+      }
+    }
+  };
+  container.addEventListener("keydown", handleKeyDown);
+  return () => {
+    container.removeEventListener("keydown", handleKeyDown);
+    container.removeAttribute("tabindex");
+    container.removeAttribute("aria-roledescription");
+    container.removeAttribute("aria-label");
+  };
+}
+function createScreenReaderTable(layout, container) {
+  const data = layout.a11y.dataTableFallback;
+  if (!data || data.length === 0) return null;
+  const table = document.createElement("table");
+  table.className = "viz-sr-only";
+  table.setAttribute("role", "table");
+  table.setAttribute("aria-label", `Data table: ${layout.a11y.altText}`);
+  if (data.length > 0) {
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    const headers = data[0];
+    for (const header of headers) {
+      const th = document.createElement("th");
+      th.textContent = String(header ?? "");
+      th.setAttribute("scope", "col");
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+  if (data.length > 1) {
+    const tbody = document.createElement("tbody");
+    for (let i = 1; i < data.length; i++) {
+      const tr = document.createElement("tr");
+      const cells = data[i];
+      for (const cell of cells) {
+        const td = document.createElement("td");
+        td.textContent = String(cell ?? "");
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+  }
+  container.appendChild(table);
+  return table;
+}
+function createChart(container, spec, options) {
+  let currentSpec = spec;
+  let currentLayout;
+  let svgElement = null;
+  let tooltipManager = null;
+  let disconnectResize = null;
+  let cleanupTooltipEvents = null;
+  let cleanupKeyboardNav = null;
+  let cleanupLegend = null;
+  let cleanupChartEvents = null;
+  let cleanupAnnotationDrag = null;
+  let cleanupEditDrags = null;
+  let srTable = null;
+  let destroyed = false;
+  let isDragging = false;
+  let pendingRender = false;
+  const measureText = createMeasureText();
+  function compile() {
+    const { width, height } = getContainerDimensions();
+    const darkMode = resolveDarkMode2(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode,
+      measureText
+    };
+    return compileChart(currentSpec, compileOpts);
+  }
+  function getContainerDimensions() {
+    const rect = container.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function render() {
+    if (isDragging) {
+      pendingRender = true;
+      return;
+    }
+    if (cleanupTooltipEvents) {
+      cleanupTooltipEvents();
+      cleanupTooltipEvents = null;
+    }
+    if (cleanupKeyboardNav) {
+      cleanupKeyboardNav();
+      cleanupKeyboardNav = null;
+    }
+    if (cleanupLegend) {
+      cleanupLegend();
+      cleanupLegend = null;
+    }
+    if (cleanupChartEvents) {
+      cleanupChartEvents();
+      cleanupChartEvents = null;
+    }
+    if (cleanupAnnotationDrag) {
+      cleanupAnnotationDrag();
+      cleanupAnnotationDrag = null;
+    }
+    if (cleanupEditDrags) {
+      cleanupEditDrags();
+      cleanupEditDrags = null;
+    }
+    if (svgElement?.parentNode) {
+      svgElement.parentNode.removeChild(svgElement);
+    }
+    if (tooltipManager) {
+      tooltipManager.destroy();
+    }
+    if (srTable?.parentNode) {
+      srTable.parentNode.removeChild(srTable);
+      srTable = null;
+    }
+    currentLayout = compile();
+    svgElement = renderChartSVG(currentLayout, container);
+    tooltipManager = createTooltipManager(container);
+    cleanupTooltipEvents = wireTooltipEvents(
+      svgElement,
+      currentLayout.tooltipDescriptors,
+      tooltipManager
+    );
+    cleanupKeyboardNav = wireKeyboardNav(
+      svgElement,
+      container,
+      currentLayout.tooltipDescriptors,
+      tooltipManager,
+      currentLayout
+    );
+    cleanupLegend = wireLegendInteraction(svgElement, currentLayout, options?.onLegendToggle);
+    if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
+      const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
+      cleanupChartEvents = wireChartEvents(svgElement, currentLayout, specAnnotations, options);
+    }
+    const setDragging = (dragging) => {
+      isDragging = dragging;
+      if (!dragging && pendingRender) {
+        pendingRender = false;
+        render();
+      }
+    };
+    const dragAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
+    if (options?.onAnnotationEdit || options?.onEdit) {
+      cleanupAnnotationDrag = wireAnnotationDrag(
+        svgElement,
+        dragAnnotations,
+        options?.onAnnotationEdit,
+        options?.onEdit,
+        setDragging
+      );
+    }
+    if (options?.onEdit) {
+      const editCleanups = [];
+      editCleanups.push(
+        wireConnectorEndpointDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
+      );
+      editCleanups.push(
+        wireAnnotationLabelDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
+      );
+      editCleanups.push(wireChromeDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      editCleanups.push(wireLegendDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      editCleanups.push(wireSeriesLabelDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      cleanupEditDrags = () => {
+        for (const cleanup of editCleanups) {
+          cleanup();
+        }
+      };
+    }
+    srTable = createScreenReaderTable(currentLayout, container);
+    container.classList.add("viz-root");
+    const isDark = resolveDarkMode2(options?.darkMode);
+    if (isDark) {
+      container.classList.add("viz-dark");
+    } else {
+      container.classList.remove("viz-dark");
+    }
+  }
+  function update(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    render();
+  }
+  function resize() {
+    if (destroyed) return;
+    render();
+  }
+  function doExport(format, exportOptions) {
+    if (!svgElement) {
+      throw new Error("Chart is not rendered yet");
+    }
+    switch (format) {
+      case "svg":
+        return exportSVG(svgElement);
+      case "png":
+        return exportPNG(svgElement, exportOptions);
+      case "csv":
+        return exportCSV(
+          "data" in currentSpec && Array.isArray(currentSpec.data) ? currentSpec.data : []
+        );
+      default:
+        throw new Error(`Unsupported export format: ${format}`);
+    }
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (cleanupTooltipEvents) {
+      cleanupTooltipEvents();
+      cleanupTooltipEvents = null;
+    }
+    if (cleanupKeyboardNav) {
+      cleanupKeyboardNav();
+      cleanupKeyboardNav = null;
+    }
+    if (cleanupLegend) {
+      cleanupLegend();
+      cleanupLegend = null;
+    }
+    if (cleanupChartEvents) {
+      cleanupChartEvents();
+      cleanupChartEvents = null;
+    }
+    if (cleanupAnnotationDrag) {
+      cleanupAnnotationDrag();
+      cleanupAnnotationDrag = null;
+    }
+    if (cleanupEditDrags) {
+      cleanupEditDrags();
+      cleanupEditDrags = null;
+    }
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    if (tooltipManager) {
+      tooltipManager.destroy();
+      tooltipManager = null;
+    }
+    if (svgElement?.parentNode) {
+      svgElement.parentNode.removeChild(svgElement);
+      svgElement = null;
+    }
+    if (srTable?.parentNode) {
+      srTable.parentNode.removeChild(srTable);
+      srTable = null;
+    }
+    container.classList.remove("viz-dark");
+    container.classList.remove("viz-root");
+  }
+  render();
+  if (options?.responsive !== false) {
+    disconnectResize = observeResize(container, () => {
+      resize();
+    });
+  }
+  return {
+    update,
+    resize,
+    export: doExport,
+    destroy,
+    get layout() {
+      return currentLayout;
+    }
+  };
+}
+
+// src/renderers/table-cells.ts
+function applyCellStyle(td, cell) {
+  if (cell.style.backgroundColor) {
+    td.style.background = cell.style.backgroundColor;
+  }
+  if (cell.style.color) {
+    td.style.color = cell.style.color;
+  }
+  if (cell.style.fontWeight) {
+    td.style.fontWeight = String(cell.style.fontWeight);
+  }
+  if (cell.style.fontVariant) {
+    td.style.fontVariant = cell.style.fontVariant;
+  }
+  if (cell.aria) {
+    td.setAttribute("aria-label", cell.aria);
+  }
+}
+function countryToEmoji(code) {
+  return [...code.toUpperCase()].map((c) => String.fromCodePoint(c.charCodeAt(0) + 127397)).join("");
+}
+var COUNTRY_NAMES = {
+  US: "United States",
+  CN: "China",
+  IN: "India",
+  ID: "Indonesia",
+  BR: "Brazil",
+  PK: "Pakistan",
+  NG: "Nigeria",
+  BD: "Bangladesh",
+  RU: "Russia",
+  MX: "Mexico",
+  JP: "Japan",
+  DE: "Germany",
+  GB: "United Kingdom",
+  FR: "France",
+  IT: "Italy",
+  CA: "Canada",
+  AU: "Australia",
+  KR: "South Korea",
+  ES: "Spain",
+  AR: "Argentina",
+  CO: "Colombia",
+  ZA: "South Africa",
+  TR: "Turkey",
+  SA: "Saudi Arabia",
+  UA: "Ukraine",
+  PL: "Poland",
+  NL: "Netherlands",
+  SE: "Sweden",
+  NO: "Norway",
+  DK: "Denmark",
+  FI: "Finland",
+  CH: "Switzerland",
+  AT: "Austria",
+  BE: "Belgium",
+  PT: "Portugal",
+  IE: "Ireland",
+  NZ: "New Zealand",
+  SG: "Singapore",
+  IL: "Israel",
+  AE: "United Arab Emirates",
+  EG: "Egypt",
+  TH: "Thailand",
+  VN: "Vietnam",
+  PH: "Philippines",
+  MY: "Malaysia",
+  CL: "Chile",
+  PE: "Peru",
+  CZ: "Czech Republic",
+  GR: "Greece",
+  HU: "Hungary",
+  RO: "Romania",
+  ET: "Ethiopia"
+};
+function getCountryName(code) {
+  return COUNTRY_NAMES[code.toUpperCase()] || code.toUpperCase();
+}
+function describeSparklineTrend(data) {
+  if (data.type === "line" && data.points.length >= 2) {
+    const first = data.points[0].y;
+    const last = data.points[data.points.length - 1].y;
+    const count = data.points.length;
+    if (last > first) return `Sparkline with ${count} points, trending upward`;
+    if (last < first) return `Sparkline with ${count} points, trending downward`;
+    return `Sparkline with ${count} points, roughly flat`;
+  }
+  if ((data.type === "bar" || data.type === "column") && data.bars.length > 0) {
+    return `${data.type === "column" ? "Column" : "Bar"} sparkline with ${data.bars.length} values`;
+  }
+  return "Sparkline";
+}
+function renderTextCell(cell) {
+  const td = document.createElement("td");
+  td.textContent = cell.formattedValue;
+  applyCellStyle(td, cell);
+  return td;
+}
+function renderHeatmapCell(cell) {
+  const td = document.createElement("td");
+  td.textContent = cell.formattedValue;
+  applyCellStyle(td, cell);
+  return td;
+}
+function renderCategoryCell(cell) {
+  const td = document.createElement("td");
+  td.textContent = cell.formattedValue;
+  applyCellStyle(td, cell);
+  return td;
+}
+function renderBarCell(cell) {
+  const td = document.createElement("td");
+  td.className = "viz-table-bar";
+  applyCellStyle(td, cell);
+  const fill = document.createElement("div");
+  fill.className = "viz-table-bar-fill";
+  fill.style.width = `${Math.round(cell.barWidth * 100)}%`;
+  fill.style.left = `${Math.round(cell.barOffset * 100)}%`;
+  fill.style.background = cell.barColor;
+  td.appendChild(fill);
+  const valueSpan = document.createElement("span");
+  valueSpan.className = "viz-table-bar-value";
+  valueSpan.textContent = cell.formattedValue;
+  td.appendChild(valueSpan);
+  return td;
+}
+function formatSparklineValue(v) {
+  if (Math.abs(v) >= 1e3) {
+    return v.toLocaleString("en-US", { maximumFractionDigits: 0 });
+  }
+  if (Math.abs(v) >= 100) {
+    return v.toFixed(0);
+  }
+  return v.toFixed(1);
+}
+function renderSparklineCell(cell) {
+  const td = document.createElement("td");
+  applyCellStyle(td, cell);
+  const sparklineData = cell.sparklineData;
+  if (!sparklineData || sparklineData.count === 0) {
+    td.textContent = cell.formattedValue || "";
+    return td;
+  }
+  const trendDescription = describeSparklineTrend(sparklineData);
+  if (!td.getAttribute("aria-label")) {
+    td.setAttribute("aria-label", trendDescription);
+  }
+  const wrapper = document.createElement("span");
+  wrapper.className = "viz-table-sparkline";
+  const svgNS = "http://www.w3.org/2000/svg";
+  if (sparklineData.type === "line") {
+    const svgH = 28;
+    const padY = 4;
+    const lineH = svgH - padY * 2;
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("xmlns", svgNS);
+    svg.style.height = `${svgH}px`;
+    const yPositions = sparklineData.points.map((p) => padY + (1 - p.y) * lineH);
+    const viewW = 1e3;
+    svg.setAttribute("viewBox", `0 0 ${viewW} ${svgH}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    const ptsScaled = sparklineData.points.map((p, i) => ({
+      x: p.x * viewW,
+      y: yPositions[i]
+    }));
+    const scaledPointsStr = ptsScaled.map((p) => `${p.x},${p.y}`).join(" ");
+    const polyline = document.createElementNS(svgNS, "polyline");
+    polyline.setAttribute("points", scaledPointsStr);
+    polyline.setAttribute("fill", "none");
+    polyline.setAttribute("stroke", sparklineData.color);
+    polyline.setAttribute("stroke-width", "1.5");
+    polyline.setAttribute("stroke-linejoin", "round");
+    polyline.setAttribute("vector-effect", "non-scaling-stroke");
+    svg.appendChild(polyline);
+    wrapper.appendChild(svg);
+    const firstY = yPositions[0];
+    const lastY = yPositions[yPositions.length - 1];
+    const dotSize = 5;
+    const startDot = document.createElement("span");
+    startDot.className = "viz-table-sparkline-dot";
+    startDot.style.left = "0";
+    startDot.style.top = `${firstY - dotSize / 2}px`;
+    startDot.style.background = sparklineData.color;
+    wrapper.appendChild(startDot);
+    const endDot = document.createElement("span");
+    endDot.className = "viz-table-sparkline-dot";
+    endDot.style.right = "0";
+    endDot.style.top = `${lastY - dotSize / 2}px`;
+    endDot.style.background = sparklineData.color;
+    wrapper.appendChild(endDot);
+    const labelsRow = document.createElement("span");
+    labelsRow.className = "viz-table-sparkline-labels";
+    labelsRow.style.color = sparklineData.color;
+    const startLabel = document.createElement("span");
+    startLabel.textContent = formatSparklineValue(sparklineData.startValue);
+    labelsRow.appendChild(startLabel);
+    const endLabel = document.createElement("span");
+    endLabel.textContent = formatSparklineValue(sparklineData.endValue);
+    labelsRow.appendChild(endLabel);
+    wrapper.appendChild(labelsRow);
+  } else if (sparklineData.type === "column") {
+    const width = 80;
+    const height = 20;
+    const padding = 2;
+    const innerW = width - padding * 2;
+    const innerH = height - padding * 2;
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", String(width));
+    svg.setAttribute("height", String(height));
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("aria-hidden", "true");
+    const barCount = sparklineData.bars.length;
+    if (barCount > 0) {
+      const gap = 1;
+      const barW = Math.max(1, (innerW - gap * (barCount - 1)) / barCount);
+      for (let i = 0; i < barCount; i++) {
+        const barH = Math.max(1, sparklineData.bars[i] * innerH);
+        const x = padding + i * (barW + gap);
+        const y = padding + innerH - barH;
+        const rect = document.createElementNS(svgNS, "rect");
+        rect.setAttribute("x", String(x));
+        rect.setAttribute("y", String(y));
+        rect.setAttribute("width", String(barW));
+        rect.setAttribute("height", String(barH));
+        rect.setAttribute("rx", "1.5");
+        rect.setAttribute("fill", sparklineData.color);
+        svg.appendChild(rect);
+      }
+    }
+    wrapper.appendChild(svg);
+  } else {
+    const width = 80;
+    const height = 20;
+    const padding = 2;
+    const innerW = width - padding * 2;
+    const innerH = height - padding * 2;
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("width", String(width));
+    svg.setAttribute("height", String(height));
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    svg.setAttribute("aria-hidden", "true");
+    const barCount = sparklineData.bars.length;
+    if (barCount > 0) {
+      const gap = 1;
+      const barH = Math.max(1, (innerH - gap * (barCount - 1)) / barCount);
+      for (let i = 0; i < barCount; i++) {
+        const barW = Math.max(1, sparklineData.bars[i] * innerW);
+        const x = padding;
+        const y = padding + i * (barH + gap);
+        const rect = document.createElementNS(svgNS, "rect");
+        rect.setAttribute("x", String(x));
+        rect.setAttribute("y", String(y));
+        rect.setAttribute("width", String(barW));
+        rect.setAttribute("height", String(barH));
+        rect.setAttribute("rx", "1.5");
+        rect.setAttribute("fill", sparklineData.color);
+        svg.appendChild(rect);
+      }
+    }
+    wrapper.appendChild(svg);
+  }
+  td.appendChild(wrapper);
+  return td;
+}
+function renderImageCell(cell) {
+  const td = document.createElement("td");
+  applyCellStyle(td, cell);
+  const wrapper = document.createElement("span");
+  wrapper.className = `viz-table-image${cell.rounded ? " viz-table-image-rounded" : ""}`;
+  const img = document.createElement("img");
+  img.src = cell.src;
+  img.alt = cell.formattedValue || "";
+  img.width = cell.imageWidth;
+  img.height = cell.imageHeight;
+  img.loading = "lazy";
+  wrapper.appendChild(img);
+  td.appendChild(wrapper);
+  return td;
+}
+function renderFlagCell(cell) {
+  const td = document.createElement("td");
+  applyCellStyle(td, cell);
+  const span = document.createElement("span");
+  span.className = "viz-table-flag";
+  span.setAttribute("role", "img");
+  if (cell.countryCode && cell.countryCode.length === 2) {
+    const countryName = getCountryName(cell.countryCode);
+    span.textContent = countryToEmoji(cell.countryCode);
+    span.setAttribute("aria-label", `Flag: ${countryName}`);
+  } else {
+    span.textContent = cell.formattedValue;
+    span.setAttribute("aria-label", cell.formattedValue);
+  }
+  td.appendChild(span);
+  return td;
+}
+function renderCell(cell) {
+  switch (cell.cellType) {
+    case "text":
+      return renderTextCell(cell);
+    case "heatmap":
+      return renderHeatmapCell(cell);
+    case "category":
+      return renderCategoryCell(cell);
+    case "bar":
+      return renderBarCell(cell);
+    case "sparkline":
+      return renderSparklineCell(cell);
+    case "image":
+      return renderImageCell(cell);
+    case "flag":
+      return renderFlagCell(cell);
+    default:
+      return renderTextCell(cell);
+  }
+}
+
+// src/table-keyboard.ts
+function attachKeyboardNav(options) {
+  const { wrapper, onSort, onClearSearch, onAnnounce } = options;
+  let focusedCell = { row: -1, col: 0 };
+  const table = wrapper.querySelector("table");
+  if (!table) return () => {
+  };
+  const tbody = table.querySelector("tbody");
+  const thead = table.querySelector("thead");
+  if (!tbody || !thead) return () => {
+  };
+  tbody.setAttribute("tabindex", "0");
+  function getRows() {
+    if (!tbody) return [];
+    return Array.from(tbody.querySelectorAll("tr"));
+  }
+  function getHeaderCells() {
+    if (!thead) return [];
+    const headerRow = thead.querySelector("tr");
+    if (!headerRow) return [];
+    return Array.from(headerRow.querySelectorAll("th"));
+  }
+  function getCellsInRow(tr) {
+    return Array.from(tr.querySelectorAll("td"));
+  }
+  function getColCount() {
+    const rows = getRows();
+    if (rows.length === 0) return getHeaderCells().length;
+    return getCellsInRow(rows[0]).length;
+  }
+  function clearFocusHighlight() {
+    const prev = wrapper.querySelector(".viz-table-cell-focus");
+    if (prev) {
+      prev.classList.remove("viz-table-cell-focus");
+      prev.removeAttribute("id");
+    }
+  }
+  function setFocusedCell(row, col) {
+    clearFocusHighlight();
+    const rows = getRows();
+    const colCount = getColCount();
+    if (rows.length === 0) return;
+    row = Math.max(0, Math.min(row, rows.length - 1));
+    col = Math.max(0, Math.min(col, colCount - 1));
+    focusedCell = { row, col };
+    const tr = rows[row];
+    if (!tr) return;
+    const cells = getCellsInRow(tr);
+    const cell = cells[col];
+    if (!cell) return;
+    const cellId = `viz-cell-${row}-${col}`;
+    cell.id = cellId;
+    cell.classList.add("viz-table-cell-focus");
+    cell.setAttribute("data-row", String(row));
+    cell.setAttribute("data-col", String(col));
+    if (tbody) {
+      tbody.setAttribute("aria-activedescendant", cellId);
+    }
+    cell.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+  function handleTbodyFocus() {
+    if (focusedCell.row < 0) {
+      setFocusedCell(0, 0);
+    } else {
+      setFocusedCell(focusedCell.row, focusedCell.col);
+    }
+  }
+  function handleTbodyKeydown(e) {
+    const rows = getRows();
+    if (rows.length === 0) return;
+    const colCount = getColCount();
+    const { row, col } = focusedCell;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (row < rows.length - 1) {
+          setFocusedCell(row + 1, col);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (row > 0) {
+          setFocusedCell(row - 1, col);
+        } else {
+          focusHeaderCell(col);
+        }
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (col < colCount - 1) {
+          setFocusedCell(row, col + 1);
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (col > 0) {
+          setFocusedCell(row, col - 1);
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        setFocusedCell(row, 0);
+        break;
+      case "End":
+        e.preventDefault();
+        setFocusedCell(row, colCount - 1);
+        break;
+    }
+  }
+  function focusHeaderCell(col) {
+    const headers = getHeaderCells();
+    if (col >= 0 && col < headers.length) {
+      clearFocusHighlight();
+      headers[col].focus();
+    }
+  }
+  function handleHeaderKeydown(e) {
+    const th = e.currentTarget;
+    const headers = getHeaderCells();
+    const colIndex = headers.indexOf(th);
+    if (colIndex < 0) return;
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        if (colIndex < headers.length - 1) {
+          headers[colIndex + 1].focus();
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (colIndex > 0) {
+          headers[colIndex - 1].focus();
+        }
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (tbody) {
+          tbody.focus();
+          setFocusedCell(0, colIndex);
+        }
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const sortColumn = th.getAttribute("data-column");
+        const sortBtn = th.querySelector("[data-sort-column]");
+        if (sortColumn && sortBtn) {
+          onSort(sortColumn);
+        }
+        break;
+      }
+    }
+  }
+  const searchInput = wrapper.querySelector(".viz-table-search input");
+  function handleSearchKeydown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClearSearch();
+      if (tbody) {
+        tbody.focus();
+        onAnnounce("Search cleared");
+      }
+    }
+  }
+  tbody.addEventListener("focus", handleTbodyFocus);
+  tbody.addEventListener("keydown", handleTbodyKeydown);
+  const headerCells = getHeaderCells();
+  for (const th of headerCells) {
+    th.setAttribute("tabindex", "0");
+    th.addEventListener("keydown", handleHeaderKeydown);
+  }
+  if (searchInput) {
+    searchInput.addEventListener("keydown", handleSearchKeydown);
+  }
+  return () => {
+    tbody.removeEventListener("focus", handleTbodyFocus);
+    tbody.removeEventListener("keydown", handleTbodyKeydown);
+    for (const th of headerCells) {
+      th.removeEventListener("keydown", handleHeaderKeydown);
+    }
+    if (searchInput) {
+      searchInput.removeEventListener("keydown", handleSearchKeydown);
+    }
+    clearFocusHighlight();
+  };
+}
+
+// src/table-mount.ts
+import { getBreakpoint } from "@opendata-ai/openchart-core";
+import { compileTable } from "@opendata-ai/openchart-engine";
+
+// src/table-renderer.ts
+function renderChromeBlock(layout, position) {
+  const chrome = layout.chrome;
+  if (position === "header") {
+    if (!chrome.title && !chrome.subtitle) return null;
+    const div2 = document.createElement("div");
+    div2.className = "viz-chrome";
+    if (chrome.title) {
+      const h = document.createElement("div");
+      h.className = "viz-table-title";
+      h.textContent = chrome.title.text;
+      div2.appendChild(h);
+    }
+    if (chrome.subtitle) {
+      const sub = document.createElement("div");
+      sub.className = "viz-table-subtitle";
+      sub.textContent = chrome.subtitle.text;
+      div2.appendChild(sub);
+    }
+    return div2;
+  }
+  if (!chrome.source && !chrome.footer) return null;
+  const div = document.createElement("div");
+  div.className = "viz-chrome viz-chrome-footer";
+  if (chrome.source) {
+    const src = document.createElement("div");
+    src.className = "viz-table-source";
+    src.textContent = chrome.source.text;
+    div.appendChild(src);
+  }
+  if (chrome.footer) {
+    const foot = document.createElement("div");
+    foot.className = "viz-table-footer-text";
+    foot.textContent = chrome.footer.text;
+    div.appendChild(foot);
+  }
+  return div;
+}
+function renderThead(columns, sort) {
+  const thead = document.createElement("thead");
+  const tr = document.createElement("tr");
+  tr.setAttribute("role", "row");
+  for (const col of columns) {
+    const th = document.createElement("th");
+    th.setAttribute("scope", "col");
+    th.setAttribute("role", "columnheader");
+    th.style.textAlign = col.align;
+    th.style.width = `${col.width}px`;
+    let ariaSortValue = "none";
+    if (sort && sort.column === col.key) {
+      ariaSortValue = sort.direction === "asc" ? "ascending" : "descending";
+    }
+    th.setAttribute("aria-sort", ariaSortValue);
+    th.setAttribute("data-column", col.key);
+    const labelSpan = document.createTextNode(col.label);
+    th.appendChild(labelSpan);
+    if (col.sortable) {
+      const btn = document.createElement("button");
+      btn.className = "viz-table-sort-btn";
+      btn.setAttribute("aria-label", `Sort by ${col.label}`);
+      btn.setAttribute("data-sort-column", col.key);
+      btn.type = "button";
+      th.appendChild(btn);
+    }
+    tr.appendChild(th);
+  }
+  thead.appendChild(tr);
+  return thead;
+}
+function renderTbody(rows, columns) {
+  const tbody = document.createElement("tbody");
+  for (let r = 0; r < rows.length; r++) {
+    const row = rows[r];
+    const tr = document.createElement("tr");
+    tr.setAttribute("role", "row");
+    tr.setAttribute("data-row-id", row.id);
+    for (let c = 0; c < columns.length; c++) {
+      const cell = row.cells[c];
+      if (!cell) continue;
+      const td = renderCell(cell);
+      td.setAttribute("role", "gridcell");
+      td.style.textAlign = columns[c].align;
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  return tbody;
+}
+function renderSearchBar(layout) {
+  if (!layout.search.enabled) return null;
+  const div = document.createElement("div");
+  div.className = "viz-table-search";
+  const input = document.createElement("input");
+  input.type = "search";
+  input.placeholder = layout.search.placeholder;
+  input.setAttribute("aria-label", "Search table");
+  input.value = layout.search.query;
+  div.appendChild(input);
+  return div;
+}
+function renderPagination(layout) {
+  if (!layout.pagination) return null;
+  const { page, pageSize, totalRows, totalPages } = layout.pagination;
+  const div = document.createElement("div");
+  div.className = "viz-table-pagination";
+  const info = document.createElement("span");
+  info.className = "viz-table-pagination-info";
+  if (totalRows === 0) {
+    info.textContent = "No results";
+  } else {
+    const start = page * pageSize + 1;
+    const end = Math.min((page + 1) * pageSize, totalRows);
+    info.textContent = `Showing ${start}-${end} of ${totalRows}`;
+  }
+  div.appendChild(info);
+  const btnGroup = document.createElement("span");
+  btnGroup.className = "viz-table-pagination-btns";
+  const prevBtn = document.createElement("button");
+  prevBtn.setAttribute("aria-label", "Previous page");
+  prevBtn.setAttribute("data-page-action", "prev");
+  prevBtn.textContent = "Prev";
+  prevBtn.disabled = page <= 0;
+  btnGroup.appendChild(prevBtn);
+  const nextBtn = document.createElement("button");
+  nextBtn.setAttribute("aria-label", "Next page");
+  nextBtn.setAttribute("data-page-action", "next");
+  nextBtn.textContent = "Next";
+  nextBtn.disabled = page >= totalPages - 1;
+  btnGroup.appendChild(nextBtn);
+  div.appendChild(btnGroup);
+  return div;
+}
+function renderEmptyState(message) {
+  const div = document.createElement("div");
+  div.className = "viz-table-empty";
+  div.setAttribute("aria-live", "polite");
+  div.textContent = message;
+  return div;
+}
+function renderTable(layout, container) {
+  const wrapper = document.createElement("div");
+  wrapper.className = "viz-table-wrapper";
+  const { theme, chrome } = layout;
+  if (theme) {
+    const s = wrapper.style;
+    s.setProperty("--viz-bg", theme.colors.background);
+    s.setProperty("--viz-text", theme.colors.text);
+    s.setProperty("--viz-text-secondary", theme.colors.axis ?? theme.colors.text);
+    s.setProperty("--viz-text-muted", theme.colors.axis ?? theme.colors.text);
+    s.setProperty("--viz-gridline", theme.colors.gridline);
+    s.setProperty("--viz-border", theme.colors.gridline);
+    s.setProperty("--viz-font-family", theme.fonts.family);
+    s.fontFamily = theme.fonts.family;
+  }
+  {
+    const s = wrapper.style;
+    if (chrome.title) {
+      s.setProperty("--viz-title-computed-size", `${chrome.title.style.fontSize}px`);
+      s.setProperty("--viz-title-computed-weight", String(chrome.title.style.fontWeight));
+      s.setProperty("--viz-title-computed-color", chrome.title.style.fill);
+    }
+    if (chrome.subtitle) {
+      s.setProperty("--viz-subtitle-computed-size", `${chrome.subtitle.style.fontSize}px`);
+      s.setProperty("--viz-subtitle-computed-weight", String(chrome.subtitle.style.fontWeight));
+      s.setProperty("--viz-subtitle-computed-color", chrome.subtitle.style.fill);
+    }
+    if (chrome.source) {
+      s.setProperty("--viz-source-computed-size", `${chrome.source.style.fontSize}px`);
+      s.setProperty("--viz-source-computed-color", chrome.source.style.fill);
+    }
+    if (chrome.footer) {
+      s.setProperty("--viz-footer-computed-size", `${chrome.footer.style.fontSize}px`);
+      s.setProperty("--viz-footer-computed-color", chrome.footer.style.fill);
+    }
+  }
+  if (layout.compact) {
+    wrapper.classList.add("viz-table--compact");
+  }
+  const headerChrome = renderChromeBlock(layout, "header");
+  if (headerChrome) {
+    wrapper.appendChild(headerChrome);
+  }
+  const searchBar = renderSearchBar(layout);
+  if (searchBar) {
+    wrapper.appendChild(searchBar);
+  }
+  if (layout.rows.length === 0) {
+    const message = layout.search.query ? "No results found" : "No data";
+    wrapper.appendChild(renderEmptyState(message));
+  } else {
+    const scroll = document.createElement("div");
+    scroll.className = "viz-table-scroll";
+    const table = document.createElement("table");
+    table.setAttribute("role", "grid");
+    table.setAttribute("aria-label", layout.a11y.caption);
+    if (layout.stickyFirstColumn) {
+      table.classList.add("viz-table--sticky");
+    }
+    const caption = document.createElement("caption");
+    caption.className = "viz-sr-only";
+    caption.textContent = layout.a11y.summary;
+    table.appendChild(caption);
+    table.appendChild(renderThead(layout.columns, layout.sort));
+    table.appendChild(renderTbody(layout.rows, layout.columns));
+    scroll.appendChild(table);
+    wrapper.appendChild(scroll);
+  }
+  const pagination = renderPagination(layout);
+  if (pagination) {
+    wrapper.appendChild(pagination);
+  }
+  const footerChrome = renderChromeBlock(layout, "footer");
+  if (footerChrome) {
+    wrapper.appendChild(footerChrome);
+  }
+  const liveRegion = document.createElement("div");
+  liveRegion.className = "viz-table-live-region viz-sr-only";
+  liveRegion.setAttribute("aria-live", "polite");
+  liveRegion.setAttribute("aria-atomic", "true");
+  liveRegion.setAttribute("role", "status");
+  wrapper.appendChild(liveRegion);
+  container.appendChild(wrapper);
+  return wrapper;
+}
+
+// src/table-mount.ts
+function resolveDarkMode3(mode) {
+  if (mode === "force") return true;
+  if (mode === "off" || mode === void 0) return false;
+  if (typeof window !== "undefined" && window.matchMedia) {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+  return false;
+}
+function csvEscape2(value) {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function cycleSort(current, column) {
+  if (!current || current.column !== column) {
+    return { column, direction: "asc" };
+  }
+  if (current.direction === "asc") {
+    return { column, direction: "desc" };
+  }
+  return null;
+}
+function createTable(container, spec, options) {
+  let currentSpec = spec;
+  let currentLayout;
+  let wrapperElement = null;
+  let disconnectResize = null;
+  let cleanupKeyboard = null;
+  let destroyed = false;
+  const internalState = {
+    sort: null,
+    search: "",
+    page: 0
+  };
+  let searchDebounceTimer = null;
+  let resizeDebounceTimer = null;
+  const isControlled = options?.externalState !== void 0;
+  function getState() {
+    if (isControlled && options?.externalState) {
+      return {
+        sort: options.externalState.sort ?? null,
+        search: options.externalState.search ?? "",
+        page: options.externalState.page ?? 0
+      };
+    }
+    return { ...internalState };
+  }
+  function updateState(partial) {
+    if (isControlled) {
+      const current = getState();
+      const next = {
+        sort: partial.sort !== void 0 ? partial.sort : current.sort,
+        search: partial.search !== void 0 ? partial.search : current.search,
+        page: partial.page !== void 0 ? partial.page : current.page
+      };
+      options?.onStateChange?.(next);
+    } else {
+      if (partial.sort !== void 0) internalState.sort = partial.sort;
+      if (partial.search !== void 0) internalState.search = partial.search;
+      if (partial.page !== void 0) internalState.page = partial.page;
+      options?.onStateChange?.({ ...internalState });
+    }
+  }
+  function compile() {
+    const state = getState();
+    const darkMode = resolveDarkMode3(options?.darkMode);
+    const { width } = getContainerDimensions();
+    const compileOpts = {
+      width,
+      height: 600,
+      theme: options?.theme,
+      darkMode,
+      sort: state.sort ?? void 0,
+      search: state.search || void 0,
+      page: state.page
+    };
+    return compileTable(currentSpec, compileOpts);
+  }
+  function getContainerDimensions() {
+    const rect = container.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function announce(message) {
+    if (!wrapperElement) return;
+    const liveRegion = wrapperElement.querySelector(".viz-table-live-region");
+    if (liveRegion) {
+      liveRegion.textContent = message;
+    }
+  }
+  function applyBreakpointClass() {
+    if (!wrapperElement) return;
+    const { width } = getContainerDimensions();
+    const bp = getBreakpoint(width);
+    if (bp === "compact" || bp === "medium") {
+      wrapperElement.classList.add("viz-table--compact");
+    } else if (!currentLayout?.compact) {
+      wrapperElement.classList.remove("viz-table--compact");
+    }
+  }
+  function render() {
+    if (destroyed) return;
+    try {
+      if (cleanupKeyboard) {
+        cleanupKeyboard();
+        cleanupKeyboard = null;
+      }
+      if (wrapperElement?.parentNode) {
+        wrapperElement.parentNode.removeChild(wrapperElement);
+        wrapperElement = null;
+      }
+      currentLayout = compile();
+      wrapperElement = renderTable(currentLayout, container);
+      const isDark = resolveDarkMode3(options?.darkMode);
+      if (isDark) {
+        container.classList.add("viz-dark");
+      } else {
+        container.classList.remove("viz-dark");
+      }
+      applyBreakpointClass();
+      if (options?.onRowClick) {
+        wrapperElement.classList.add("viz-table--clickable");
+      }
+      wireEvents();
+      if (wrapperElement) {
+        cleanupKeyboard = attachKeyboardNav({
+          wrapper: wrapperElement,
+          onSort: (columnKey) => {
+            const state = getState();
+            const newSort = cycleSort(state.sort, columnKey);
+            updateState({ sort: newSort, page: 0 });
+            if (newSort) {
+              const dir = newSort.direction === "asc" ? "ascending" : "descending";
+              announce(`Sorted by ${columnKey} ${dir}`);
+            } else {
+              announce("Sort cleared");
+            }
+            if (!isControlled) {
+              rerender();
+            }
+          },
+          onClearSearch: () => {
+            updateState({ search: "", page: 0 });
+            if (!isControlled) {
+              rerender();
+            }
+          },
+          onAnnounce: announce
+        });
+      }
+    } catch (err) {
+      console.error("[viz] Table render failed:", err);
+    }
+  }
+  function wireEvents() {
+    if (!wrapperElement) return;
+    const sortBtns = wrapperElement.querySelectorAll("[data-sort-column]");
+    for (const btn of sortBtns) {
+      btn.addEventListener("click", handleSortClick);
+    }
+    const searchInput = wrapperElement.querySelector(
+      ".viz-table-search input"
+    );
+    if (searchInput) {
+      searchInput.addEventListener("input", handleSearchInput);
+    }
+    const pageButtons = wrapperElement.querySelectorAll("[data-page-action]");
+    for (const btn of pageButtons) {
+      btn.addEventListener("click", handlePageClick);
+    }
+    if (options?.onRowClick) {
+      const rows = wrapperElement.querySelectorAll("tbody tr");
+      for (const row of rows) {
+        row.addEventListener("click", handleRowClick);
+      }
+    }
+  }
+  function handleSortClick(e) {
+    const btn = e.currentTarget;
+    const column = btn.getAttribute("data-sort-column");
+    if (!column) return;
+    const state = getState();
+    const newSort = cycleSort(state.sort, column);
+    updateState({ sort: newSort, page: 0 });
+    if (newSort) {
+      const dir = newSort.direction === "asc" ? "ascending" : "descending";
+      announce(`Sorted by ${column} ${dir}`);
+    } else {
+      announce("Sort cleared");
+    }
+    if (!isControlled) {
+      rerender();
+    }
+  }
+  function handleSearchInput(e) {
+    const input = e.target;
+    const query = input.value;
+    if (searchDebounceTimer !== null) {
+      clearTimeout(searchDebounceTimer);
+    }
+    searchDebounceTimer = setTimeout(() => {
+      searchDebounceTimer = null;
+      updateState({ search: query, page: 0 });
+      if (!isControlled) {
+        rerender();
+        const rowCount = currentLayout?.rows?.length ?? 0;
+        if (query) {
+          announce(`${rowCount} result${rowCount !== 1 ? "s" : ""} found`);
+        }
+      }
+    }, 200);
+  }
+  function handlePageClick(e) {
+    const btn = e.currentTarget;
+    const action = btn.getAttribute("data-page-action");
+    const state = getState();
+    if (action === "prev" && state.page > 0) {
+      updateState({ page: state.page - 1 });
+    } else if (action === "next") {
+      updateState({ page: state.page + 1 });
+    }
+    if (!isControlled) {
+      rerender();
+    }
+  }
+  function handleRowClick(e) {
+    const tr = e.currentTarget;
+    const rowId = tr.getAttribute("data-row-id");
+    if (!rowId || !currentLayout) return;
+    const row = currentLayout.rows.find((r) => r.id === rowId);
+    if (row) {
+      options?.onRowClick?.(row.data);
+    }
+  }
+  function rerender() {
+    if (destroyed) return;
+    const searchInput = wrapperElement?.querySelector(
+      ".viz-table-search input"
+    );
+    const hadFocus = searchInput && document.activeElement === searchInput;
+    const selectionStart = searchInput?.selectionStart ?? 0;
+    const selectionEnd = searchInput?.selectionEnd ?? 0;
+    render();
+    if (hadFocus) {
+      const newInput = wrapperElement?.querySelector(
+        ".viz-table-search input"
+      );
+      if (newInput) {
+        newInput.focus();
+        newInput.setSelectionRange(selectionStart, selectionEnd);
+      }
+    }
+  }
+  function update(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    render();
+  }
+  function resize() {
+    if (destroyed) return;
+    render();
+  }
+  function doExport(format) {
+    if (format !== "csv") {
+      throw new Error(`Unsupported export format: ${format}`);
+    }
+    const state = getState();
+    const darkMode = resolveDarkMode3(options?.darkMode);
+    const { width } = getContainerDimensions();
+    const fullLayout = compileTable(currentSpec, {
+      width,
+      height: 600,
+      theme: options?.theme,
+      darkMode,
+      sort: state.sort ?? void 0,
+      search: state.search || void 0
+      // No page/pageSize: get all rows
+    });
+    const headers = fullLayout.columns.map((c) => c.label);
+    const csvRows = [headers.map(csvEscape2).join(",")];
+    for (const row of fullLayout.rows) {
+      const values = row.cells.map((cell) => csvEscape2(cell.formattedValue));
+      csvRows.push(values.join(","));
+    }
+    return csvRows.join("\n");
+  }
+  function setState(partial) {
+    if (destroyed) return;
+    if (partial.sort !== void 0) internalState.sort = partial.sort;
+    if (partial.search !== void 0) internalState.search = partial.search;
+    if (partial.page !== void 0) internalState.page = partial.page;
+    render();
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (cleanupKeyboard) {
+      cleanupKeyboard();
+      cleanupKeyboard = null;
+    }
+    if (searchDebounceTimer !== null) {
+      clearTimeout(searchDebounceTimer);
+      searchDebounceTimer = null;
+    }
+    if (resizeDebounceTimer !== null) {
+      clearTimeout(resizeDebounceTimer);
+      resizeDebounceTimer = null;
+    }
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    if (wrapperElement?.parentNode) {
+      wrapperElement.parentNode.removeChild(wrapperElement);
+      wrapperElement = null;
+    }
+    container.classList.remove("viz-dark");
+  }
+  render();
+  if (options?.responsive !== false) {
+    disconnectResize = observeResize(container, () => {
+      if (resizeDebounceTimer !== null) {
+        clearTimeout(resizeDebounceTimer);
+      }
+      resizeDebounceTimer = setTimeout(() => {
+        resizeDebounceTimer = null;
+        applyBreakpointClass();
+        resize();
+      }, 100);
+    });
+  }
+  return {
+    update,
+    resize,
+    export: doExport,
+    getState,
+    setState,
+    destroy
+  };
+}
+export {
+  attachKeyboardNav,
+  createChart,
+  createGraph,
+  createSimulationWorker,
+  createTable,
+  createTooltipManager,
+  exportCSV,
+  exportPNG,
+  exportSVG,
+  observeResize,
+  registerMarkRenderer,
+  renderBarCell,
+  renderCategoryCell,
+  renderCell,
+  renderChartSVG,
+  renderFlagCell,
+  renderHeatmapCell,
+  renderImageCell,
+  renderSparklineCell,
+  renderTable,
+  renderTextCell
+};
+//# sourceMappingURL=index.js.map