@opendata-ai/openchart-vanilla 6.5.1 → 6.6.0

package/dist/index.js

@@ -2788,7 +2788,7 @@ function createGraph(container, spec, options) {
     }
     chromeEl = document.createElement("div");
     chromeEl.className = "oc-graph-chrome";
-    renderChrome2();
+    renderChrome3();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
     canvas.className = "oc-graph-canvas";
@@ -2800,7 +2800,7 @@ function createGraph(container, spec, options) {
     if (options?.legend !== false) {
       legendEl = document.createElement("div");
       legendEl.className = "oc-graph-legend";
-      renderLegend2();
+      renderLegend3();
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
@@ -2809,7 +2809,7 @@ function createGraph(container, spec, options) {
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
-  function renderChrome2() {
+  function renderChrome3() {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
@@ -2825,7 +2825,7 @@ function createGraph(container, spec, options) {
       chromeEl.style.display = "";
     }
   }
-  function renderLegend2() {
+  function renderLegend3() {
     if (!legendEl) return;
     const entries = compilation.legend.entries;
     if (entries.length === 0) {
@@ -3123,8 +3123,8 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome2();
-    renderLegend2();
+    renderChrome3();
+    renderLegend3();
     initSimulation();
     initInteraction();
     hoveredNodeId = null;
@@ -3158,8 +3158,8 @@ function createGraph(container, spec, options) {
       };
     });
     spatialIndex.rebuild(positionedNodes);
-    renderChrome2();
-    renderLegend2();
+    renderChrome3();
+    renderLegend3();
     needsRender = true;
     scheduleRender();
   }
@@ -3264,7 +3264,7 @@ function cancelAnimations(svg) {
     svg.classList.remove("oc-animate");
   }
 }
-function setupAnimationCleanup(svg) {
+function setupAnimationCleanup(svg, onComplete) {
   const style = svg.style;
   const duration = parseFloat(style.getPropertyValue("--oc-animation-duration")) || 600;
   const stagger = parseFloat(style.getPropertyValue("--oc-animation-stagger")) || 0;
@@ -3274,6 +3274,7 @@ function setupAnimationCleanup(svg) {
   const totalTime = totalStagger + duration + annotationDelay + 500;
   const timer2 = setTimeout(() => {
     svg.classList.remove("oc-animate");
+    onComplete?.();
   }, totalTime);
   return () => {
     clearTimeout(timer2);
@@ -3955,32 +3956,7 @@ function renderAnnotation(parent, annotation, index2) {
   if (annotation.label?.visible) {
     if (annotation.label.connector) {
       const c2 = annotation.label.connector;
-      if (c2.style === "caret") {
-        const pointsDown = c2.to.y > c2.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 + c2.to.y) / 2;
-        const tipX = c2.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", "oc-annotation-connector");
-        setAttrs(path, {
-          d: `M${tipX - caretSize},${baseY} L${tipX},${tipY} L${tipX + caretSize},${baseY}`,
-          fill: "none",
-          stroke: c2.stroke,
-          "stroke-width": 1.5,
-          "stroke-opacity": 0.4,
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        });
-        g.appendChild(path);
-      } else if (c2.style === "curve") {
+      if (c2.style === "curve") {
         renderCurvedArrow(g, c2.from, c2.to, c2.stroke);
       } else {
         const connector = createSVGElement("line");
@@ -4910,7 +4886,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS2 = "http://www.w3.org/2000/svg";
+  const SVG_NS3 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4949,7 +4925,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     const createdHandles = [];
     for (const ep of endpoints) {
       if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
-      const handleEl = document.createElementNS(SVG_NS2, "circle");
+      const handleEl = document.createElementNS(SVG_NS3, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -5561,6 +5537,7 @@ function createChart(container, spec, options) {
   let resizeTimer = null;
   let isFirstRender = true;
   let cleanupAnimations = null;
+  let pendingResize = false;
   let selectedElement = options?.selectedElement ?? null;
   let overlayElement = null;
   let isTextEditingActive = false;
@@ -5927,7 +5904,13 @@ function createChart(container, spec, options) {
       container.classList.remove("oc-dark");
     }
     if (shouldAnimate && svgElement) {
-      cleanupAnimations = setupAnimationCleanup(svgElement);
+      cleanupAnimations = setupAnimationCleanup(svgElement, () => {
+        cleanupAnimations = null;
+        if (pendingResize) {
+          pendingResize = false;
+          resize();
+        }
+      });
     }
     if (isFirstRender) {
       isFirstRender = false;
@@ -5943,7 +5926,10 @@ function createChart(container, spec, options) {
   }
   function resize() {
     if (destroyed) return;
-    if (cleanupAnimations) return;
+    if (cleanupAnimations) {
+      pendingResize = true;
+      return;
+    }
     render();
   }
   function doExport(format, exportOptions) {
@@ -5973,6 +5959,7 @@ function createChart(container, spec, options) {
     if (cleanupAnimations) {
       cleanupAnimations();
       cleanupAnimations = null;
+      pendingResize = false;
     }
     cancelAnimations(svgElement);
     if (resizeTimer !== null) {
@@ -6396,6 +6383,728 @@ function renderCell(cell) {
   }
 }
 
+// src/sankey-mount.ts
+import { compileSankey } from "@opendata-ai/openchart-engine";
+
+// src/sankey-renderer.ts
+import { BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3, estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
+import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+var XLINK_NS2 = "http://www.w3.org/1999/xlink";
+var BRAND_URL2 = "https://opendata.ai";
+var EASE_VAR_MAP2 = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
+function createSVGElement2(tag) {
+  return document.createElementNS(SVG_NS2, tag);
+}
+function setAttrs2(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+function applyTextStyle2(el, style) {
+  setAttrs2(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 stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
+  if (!animation?.enabled) return;
+  const idx = mark.animationIndex ?? fallbackIndex;
+  el.setAttribute("data-animation-index", String(idx));
+  el.style.setProperty("--oc-mark-index", String(idx));
+}
+function wrapText2(text, fontSize, fontWeight, maxWidth) {
+  if (maxWidth <= 0) return [text];
+  const AVG_CHAR_WIDTH = 0.55;
+  const WEIGHT_FACTORS = {
+    100: 0.9,
+    200: 0.92,
+    300: 0.95,
+    400: 1,
+    500: 1.02,
+    600: 1.05,
+    700: 1.08,
+    800: 1.1,
+    900: 1.12
+  };
+  const weightFactor = WEIGHT_FACTORS[fontWeight] ?? 1;
+  const charWidth = fontSize * AVG_CHAR_WIDTH * weightFactor;
+  const maxChars = Math.floor(maxWidth / charWidth);
+  if (text.length <= maxChars) return [text];
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length > maxChars && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = candidate;
+    }
+  }
+  if (current) lines.push(current);
+  return lines;
+}
+function renderChromeElement2(parent, element, className, chromeKey) {
+  const text = createSVGElement2("text");
+  setAttrs2(text, { x: element.x, y: element.y });
+  applyTextStyle2(text, element.style);
+  text.setAttribute("class", className);
+  text.setAttribute("data-chrome-key", chromeKey);
+  const lines = wrapText2(
+    element.text,
+    element.style.fontSize,
+    element.style.fontWeight,
+    element.maxWidth
+  );
+  if (lines.length === 1) {
+    text.textContent = element.text;
+  } else {
+    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
+    for (let i = 0; i < lines.length; i++) {
+      const tspan = createSVGElement2("tspan");
+      setAttrs2(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
+      tspan.textContent = lines[i];
+      text.appendChild(tspan);
+    }
+  }
+  parent.appendChild(text);
+}
+function renderChrome2(parent, layout) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-chrome");
+  const { chrome } = layout;
+  if (chrome.title) {
+    renderChromeElement2(g, chrome.title, "oc-title", "title");
+  }
+  if (chrome.subtitle) {
+    renderChromeElement2(g, chrome.subtitle, "oc-subtitle", "subtitle");
+  }
+  const bottomOffset = layout.area.y + layout.area.height;
+  if (chrome.source) {
+    renderChromeElement2(
+      g,
+      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      "oc-source",
+      "source"
+    );
+  }
+  if (chrome.byline) {
+    renderChromeElement2(
+      g,
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      "oc-byline",
+      "byline"
+    );
+  }
+  if (chrome.footer) {
+    renderChromeElement2(
+      g,
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      "oc-footer",
+      "footer"
+    );
+  }
+  parent.appendChild(g);
+}
+function renderBrand2(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH3) return;
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
+  const bottomOffset = layout.area.y + layout.area.height;
+  const { chrome } = layout;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
+  const a2 = createSVGElement2("a");
+  a2.setAttribute("href", BRAND_URL2);
+  a2.setAttributeNS(XLINK_NS2, "xlink:href", BRAND_URL2);
+  a2.setAttribute("target", "_blank");
+  a2.setAttribute("rel", "noopener");
+  a2.setAttribute("class", "oc-chrome-ref");
+  const text = createSVGElement2("text");
+  setAttrs2(text, {
+    x: rightEdge,
+    y: chromeY,
+    "dominant-baseline": "hanging",
+    "text-anchor": "end",
+    "font-family": layout.theme.fonts.family,
+    "font-size": 20,
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  const openSpan = createSVGElement2("tspan");
+  setAttrs2(openSpan, { "font-weight": 500 });
+  openSpan.textContent = "Open";
+  const dataSpan = createSVGElement2("tspan");
+  setAttrs2(dataSpan, { "font-weight": 600 });
+  dataSpan.textContent = "Data";
+  text.appendChild(openSpan);
+  text.appendChild(dataSpan);
+  a2.appendChild(text);
+  parent.appendChild(a2);
+}
+function renderLegend2(parent, legend) {
+  if (legend.entries.length === 0) return;
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-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];
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth2(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
+    const entryG = createSVGElement2("g");
+    entryG.setAttribute("class", "oc-legend-entry");
+    entryG.setAttribute("role", "listitem");
+    entryG.setAttribute("data-legend-index", String(i));
+    entryG.setAttribute("data-legend-label", entry.label);
+    if (entry.overflow) {
+      entryG.setAttribute("data-legend-overflow", "true");
+      entryG.setAttribute("aria-label", entry.label);
+      entryG.setAttribute("opacity", "0.5");
+    } else {
+      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");
+      }
+    }
+    const rect = createSVGElement2("rect");
+    setAttrs2(rect, {
+      x: offsetX,
+      y: offsetY,
+      width: legend.swatchSize,
+      height: legend.swatchSize,
+      fill: entry.color,
+      rx: 2
+    });
+    entryG.appendChild(rect);
+    const label = createSVGElement2("text");
+    setAttrs2(label, {
+      x: offsetX + legend.swatchSize + legend.swatchGap,
+      y: offsetY + legend.swatchSize / 2,
+      "dominant-baseline": "central"
+    });
+    applyTextStyle2(label, legend.labelStyle);
+    label.textContent = entry.label;
+    entryG.appendChild(label);
+    g.appendChild(entryG);
+    if (isHorizontal) {
+      const labelWidth = estimateTextWidth2(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      offsetX += entryWidth;
+    } else {
+      offsetY += legend.swatchSize + legend.entryGap;
+    }
+  }
+  parent.appendChild(g);
+}
+function buildNodePositionMap(nodes) {
+  const map = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    map.set(node.nodeId, { x: node.x, width: node.width });
+  }
+  return map;
+}
+function renderGradientDefs(defs, links, nodePositions) {
+  for (let i = 0; i < links.length; i++) {
+    const link = links[i];
+    if (link.sourceColor === link.targetColor) continue;
+    const gradId = `oc-sg-${link.sourceId}-${link.targetId}-${i}`;
+    const gradient = createSVGElement2("linearGradient");
+    gradient.setAttribute("id", gradId);
+    gradient.setAttribute("gradientUnits", "userSpaceOnUse");
+    const sourcePos = nodePositions.get(link.sourceId);
+    const targetPos = nodePositions.get(link.targetId);
+    const x1 = sourcePos ? sourcePos.x + sourcePos.width : 0;
+    const x22 = targetPos ? targetPos.x : 0;
+    gradient.setAttribute("x1", String(x1));
+    gradient.setAttribute("x2", String(x22));
+    const stop0 = createSVGElement2("stop");
+    setAttrs2(stop0, { offset: "0%", "stop-color": link.sourceColor });
+    gradient.appendChild(stop0);
+    const stop1 = createSVGElement2("stop");
+    setAttrs2(stop1, { offset: "100%", "stop-color": link.targetColor });
+    gradient.appendChild(stop1);
+    defs.appendChild(gradient);
+  }
+}
+function renderLinks(parent, links, _nodePositions, animation) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-sankey-links");
+  for (let i = 0; i < links.length; i++) {
+    const link = links[i];
+    const linkG = createSVGElement2("g");
+    linkG.setAttribute("class", "oc-sankey-link");
+    linkG.setAttribute("data-mark-id", `link-${link.sourceId}-${link.targetId}`);
+    linkG.setAttribute("data-source", link.sourceId);
+    linkG.setAttribute("data-target", link.targetId);
+    if (link.aria?.label) {
+      linkG.setAttribute("aria-label", link.aria.label);
+    }
+    stampAnimationAttrs2(linkG, link, i, animation);
+    const path = createSVGElement2("path");
+    path.setAttribute("d", link.path);
+    path.setAttribute("stroke", "none");
+    path.setAttribute("fill-opacity", String(link.fillOpacity));
+    if (link.sourceColor !== link.targetColor) {
+      const gradId = `oc-sg-${link.sourceId}-${link.targetId}-${i}`;
+      path.setAttribute("fill", `url(#${gradId})`);
+    } else {
+      path.setAttribute("fill", link.sourceColor);
+    }
+    linkG.appendChild(path);
+    g.appendChild(linkG);
+  }
+  parent.appendChild(g);
+}
+function renderNodes(parent, nodes, animation) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-sankey-nodes");
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const nodeG = createSVGElement2("g");
+    nodeG.setAttribute("class", "oc-sankey-node");
+    nodeG.setAttribute("data-mark-id", `node-${node.nodeId}`);
+    nodeG.setAttribute("data-node-id", node.nodeId);
+    if (node.aria?.label) {
+      nodeG.setAttribute("aria-label", node.aria.label);
+    }
+    stampAnimationAttrs2(nodeG, node, i, animation);
+    const rect = createSVGElement2("rect");
+    setAttrs2(rect, {
+      x: node.x,
+      y: node.y,
+      width: node.width,
+      height: Math.max(node.height, 1),
+      // Ensure at least 1px visibility
+      fill: node.fill,
+      rx: node.cornerRadius
+    });
+    if (node.stroke) {
+      rect.setAttribute("stroke", node.stroke);
+    }
+    if (node.strokeWidth) {
+      rect.setAttribute("stroke-width", String(node.strokeWidth));
+    }
+    nodeG.appendChild(rect);
+    g.appendChild(nodeG);
+  }
+  parent.appendChild(g);
+}
+function renderLabels(parent, nodes) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-sankey-labels");
+  for (const node of nodes) {
+    const { label } = node;
+    if (!label.visible) continue;
+    const text = createSVGElement2("text");
+    setAttrs2(text, { x: label.x, y: label.y });
+    applyTextStyle2(text, label.style);
+    text.textContent = label.text;
+    g.appendChild(text);
+  }
+  parent.appendChild(g);
+}
+function renderSankeySVG(layout, animation) {
+  const { width, height } = layout.dimensions;
+  const svg = createSVGElement2("svg");
+  setAttrs2(svg, {
+    viewBox: `0 0 ${width} ${height}`,
+    xmlns: SVG_NS2,
+    overflow: "visible"
+  });
+  svg.style.height = `${height}px`;
+  svg.setAttribute("role", layout.a11y.role);
+  svg.setAttribute("aria-label", layout.a11y.altText);
+  const animate = animation?.enabled;
+  const classes = animate ? "oc-chart oc-sankey oc-animate" : "oc-chart oc-sankey";
+  svg.setAttribute("class", classes);
+  if (animation?.enabled) {
+    const totalMarks = layout.nodes.length + layout.links.length;
+    const stagger = clampStaggerDelay2(animation.staggerDelay, totalMarks);
+    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
+    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
+    const easeVar = EASE_VAR_MAP2[animation.ease] || EASE_VAR_MAP2.smooth;
+    svg.style.setProperty("--oc-animation-ease", easeVar);
+  }
+  const bg = createSVGElement2("rect");
+  bg.setAttribute("class", "oc-background");
+  setAttrs2(bg, {
+    x: 0,
+    y: 0,
+    width,
+    height,
+    fill: layout.theme.colors.background
+  });
+  svg.appendChild(bg);
+  const nodePositions = buildNodePositionMap(layout.nodes);
+  const defs = createSVGElement2("defs");
+  renderGradientDefs(defs, layout.links, nodePositions);
+  svg.appendChild(defs);
+  renderLinks(svg, layout.links, nodePositions, animation);
+  renderNodes(svg, layout.nodes, animation);
+  renderLabels(svg, layout.nodes);
+  renderLegend2(svg, layout.legend);
+  renderChrome2(svg, layout);
+  renderBrand2(svg, layout);
+  return svg;
+}
+
+// src/sankey-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;
+}
+var HIGHLIGHT_OPACITY = 0.7;
+var DIM_OPACITY = 0.15;
+function createSankey(container, spec, options) {
+  let currentSpec = spec;
+  let currentLayout;
+  let destroyed = false;
+  let svgElement = null;
+  let tooltipManager = null;
+  let cleanupTooltipEvents = null;
+  let disconnectResize = null;
+  let isFirstRender = true;
+  let animationCleanup = null;
+  let pendingResize = false;
+  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 = resolveDarkMode3(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode
+    };
+    return compileSankey(currentSpec, compileOpts);
+  }
+  function wireTooltipAndInteraction(svg, layout) {
+    const cleanups = [];
+    const nodeElements = svg.querySelectorAll(".oc-sankey-node");
+    for (const el of nodeElements) {
+      const markId = el.getAttribute("data-mark-id");
+      if (!markId) continue;
+      const content = layout.tooltipDescriptors.get(markId);
+      const nodeId = el.getAttribute("data-node-id");
+      const nodeData = nodeId ? layout.nodes.find((n) => n.nodeId === nodeId)?.data ?? {} : {};
+      const handleMouseEnter = (e) => {
+        const mouseEvent = e;
+        if (content && tooltipManager) {
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+        options?.onNodeHover?.(nodeData);
+        if (nodeId) highlightConnectedLinks(svg, nodeId, layout);
+      };
+      const handleMouseMove = (e) => {
+        if (content && tooltipManager) {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+      };
+      const handleMouseLeave = () => {
+        tooltipManager?.hide();
+        options?.onNodeHover?.(null);
+        resetLinkOpacity(svg, layout);
+      };
+      const handleClick = () => {
+        options?.onNodeClick?.(nodeData);
+      };
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mousemove", handleMouseMove);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      el.addEventListener("click", handleClick);
+      cleanups.push(() => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mousemove", handleMouseMove);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+        el.removeEventListener("click", handleClick);
+      });
+    }
+    const linkElements = svg.querySelectorAll(".oc-sankey-link");
+    for (const el of linkElements) {
+      const markId = el.getAttribute("data-mark-id");
+      if (!markId) continue;
+      const content = layout.tooltipDescriptors.get(markId);
+      const sourceId = el.getAttribute("data-source");
+      const targetId = el.getAttribute("data-target");
+      const linkData = findLinkData(layout, sourceId, targetId);
+      const handleMouseEnter = (e) => {
+        const mouseEvent = e;
+        if (content && tooltipManager) {
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+        options?.onLinkHover?.(linkData);
+      };
+      const handleMouseMove = (e) => {
+        if (content && tooltipManager) {
+          const mouseEvent = e;
+          const svgRect = svg.getBoundingClientRect();
+          const x3 = mouseEvent.clientX - svgRect.left;
+          const y3 = mouseEvent.clientY - svgRect.top;
+          tooltipManager.show(content, x3, y3);
+        }
+      };
+      const handleMouseLeave = () => {
+        tooltipManager?.hide();
+        options?.onLinkHover?.(null);
+      };
+      const handleClick = () => {
+        options?.onLinkClick?.(linkData);
+      };
+      el.addEventListener("mouseenter", handleMouseEnter);
+      el.addEventListener("mousemove", handleMouseMove);
+      el.addEventListener("mouseleave", handleMouseLeave);
+      el.addEventListener("click", handleClick);
+      cleanups.push(() => {
+        el.removeEventListener("mouseenter", handleMouseEnter);
+        el.removeEventListener("mousemove", handleMouseMove);
+        el.removeEventListener("mouseleave", handleMouseLeave);
+        el.removeEventListener("click", handleClick);
+      });
+    }
+    return () => {
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
+    };
+  }
+  function findLinkData(layout, sourceId, targetId) {
+    if (!sourceId || !targetId) return {};
+    const link = layout.links.find((l) => l.sourceId === sourceId && l.targetId === targetId);
+    return link?.data ?? {};
+  }
+  function highlightConnectedLinks(svg, nodeId, _layout) {
+    const linkElements = svg.querySelectorAll(".oc-sankey-link");
+    for (const el of linkElements) {
+      const source = el.getAttribute("data-source");
+      const target = el.getAttribute("data-target");
+      const path = el.querySelector("path");
+      if (!path) continue;
+      const isConnected = source === nodeId || target === nodeId;
+      path.setAttribute("fill-opacity", String(isConnected ? HIGHLIGHT_OPACITY : DIM_OPACITY));
+    }
+  }
+  function resetLinkOpacity(svg, layout) {
+    const linkElements = svg.querySelectorAll(".oc-sankey-link");
+    for (const el of linkElements) {
+      const path = el.querySelector("path");
+      if (!path) continue;
+      const source = el.getAttribute("data-source");
+      const target = el.getAttribute("data-target");
+      const link = layout.links.find((l) => l.sourceId === source && l.targetId === target);
+      path.setAttribute("fill-opacity", String(link?.fillOpacity ?? 0.35));
+    }
+  }
+  function render() {
+    if (destroyed) return;
+    if (animationCleanup) {
+      animationCleanup();
+      animationCleanup = null;
+    }
+    if (svgElement) {
+      cancelAnimations(svgElement);
+    }
+    if (cleanupTooltipEvents) {
+      cleanupTooltipEvents();
+      cleanupTooltipEvents = null;
+    }
+    if (svgElement?.parentNode) {
+      svgElement.parentNode.removeChild(svgElement);
+    }
+    currentLayout = compile();
+    const shouldAnimate = isFirstRender && currentLayout.animation?.enabled;
+    isFirstRender = false;
+    const animation = shouldAnimate ? currentLayout.animation : void 0;
+    svgElement = renderSankeySVG(currentLayout, animation);
+    container.appendChild(svgElement);
+    const isDark = resolveDarkMode3(options?.darkMode);
+    if (isDark) {
+      container.classList.add("oc-dark");
+    } else {
+      container.classList.remove("oc-dark");
+    }
+    if (options?.tooltip !== false && svgElement) {
+      if (!tooltipManager) {
+        tooltipManager = createTooltipManager(container);
+      }
+      cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
+    }
+    if (shouldAnimate && svgElement) {
+      animationCleanup = setupAnimationCleanup(svgElement, () => {
+        animationCleanup = null;
+        if (pendingResize) {
+          pendingResize = false;
+          resize();
+        }
+      });
+    }
+  }
+  function update(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    isFirstRender = true;
+    render();
+  }
+  function resize() {
+    if (destroyed) return;
+    if (animationCleanup) {
+      pendingResize = true;
+      return;
+    }
+    render();
+  }
+  function doExport(format, exportOptions) {
+    if (!svgElement) {
+      throw new Error("Sankey is not rendered yet");
+    }
+    switch (format) {
+      case "svg":
+        return exportSVG(svgElement);
+      case "svg-with-fonts":
+        return exportSVGWithFonts(svgElement, exportOptions);
+      case "png":
+        return exportPNG(svgElement, exportOptions);
+      case "jpg":
+        return exportJPG(svgElement, exportOptions);
+      default:
+        throw new Error(`Unsupported export format: ${format}`);
+    }
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (animationCleanup) {
+      animationCleanup();
+      animationCleanup = null;
+      pendingResize = false;
+    }
+    if (svgElement) {
+      cancelAnimations(svgElement);
+    }
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    if (cleanupTooltipEvents) {
+      cleanupTooltipEvents();
+      cleanupTooltipEvents = null;
+    }
+    if (tooltipManager) {
+      tooltipManager.destroy();
+      tooltipManager = null;
+    }
+    if (svgElement?.parentNode) {
+      svgElement.parentNode.removeChild(svgElement);
+    }
+    svgElement = null;
+    container.classList.remove("oc-dark");
+  }
+  try {
+    currentLayout = compile();
+    const shouldAnimate = currentLayout.animation?.enabled;
+    isFirstRender = false;
+    const animation = shouldAnimate ? currentLayout.animation : void 0;
+    svgElement = renderSankeySVG(currentLayout, animation);
+    container.appendChild(svgElement);
+    const isDark = resolveDarkMode3(options?.darkMode);
+    if (isDark) {
+      container.classList.add("oc-dark");
+    } else {
+      container.classList.remove("oc-dark");
+    }
+    if (options?.tooltip !== false && svgElement) {
+      tooltipManager = createTooltipManager(container);
+      cleanupTooltipEvents = wireTooltipAndInteraction(svgElement, currentLayout);
+    }
+    if (shouldAnimate && svgElement) {
+      animationCleanup = setupAnimationCleanup(svgElement, () => {
+        animationCleanup = null;
+        if (pendingResize) {
+          pendingResize = false;
+          resize();
+        }
+      });
+    }
+  } catch (err) {
+    console.error("[viz] Sankey mount failed:", err);
+    throw err;
+  }
+  if (options?.responsive !== false) {
+    disconnectResize = observeResize(container, () => {
+      resize();
+    });
+  }
+  return {
+    update,
+    resize,
+    export: doExport,
+    destroy,
+    get layout() {
+      return currentLayout;
+    }
+  };
+}
+
 // src/table-keyboard.ts
 function attachKeyboardNav(options) {
   const { wrapper, onSort, onClearSearch, onAnnounce } = options;
@@ -6589,12 +7298,12 @@ import { compileTable } from "@opendata-ai/openchart-engine";
 
 // src/table-renderer.ts
 import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3 } from "@opendata-ai/openchart-core";
-import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
-var EASE_VAR_MAP2 = {
+import { clampStaggerDelay as clampStaggerDelay3 } from "@opendata-ai/openchart-engine";
+var EASE_VAR_MAP3 = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
 };
-var BRAND_URL2 = "https://tryopendata.ai";
+var BRAND_URL3 = "https://tryopendata.ai";
 function renderChromeBlock(layout, position) {
   const chrome = layout.chrome;
   if (position === "header") {
@@ -6839,7 +7548,7 @@ function renderTable(layout, container, opts) {
   brand.className = "oc-table-ref";
   brand.style.cssText = "text-align: right; padding: 4px 8px;";
   const brandLink = document.createElement("a");
-  brandLink.href = BRAND_URL2;
+  brandLink.href = BRAND_URL3;
   brandLink.target = "_blank";
   brandLink.rel = "noopener";
   brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE3}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
@@ -6849,11 +7558,11 @@ function renderTable(layout, container, opts) {
   if (opts?.animate && layout.animation?.enabled) {
     const anim = layout.animation;
     const rowCount = layout.rows.length;
-    const stagger = clampStaggerDelay2(anim.staggerDelay, rowCount);
+    const stagger = clampStaggerDelay3(anim.staggerDelay, rowCount);
     const s = wrapper.style;
     s.setProperty("--oc-animation-duration", `${anim.duration}ms`);
     s.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    s.setProperty("--oc-animation-ease", EASE_VAR_MAP2[anim.ease] || EASE_VAR_MAP2.smooth);
+    s.setProperty("--oc-animation-ease", EASE_VAR_MAP3[anim.ease] || EASE_VAR_MAP3.smooth);
     wrapper.classList.add("oc-animate");
   }
   container.appendChild(wrapper);
@@ -6861,7 +7570,7 @@ function renderTable(layout, container, opts) {
 }
 
 // src/table-mount.ts
-function resolveDarkMode3(mode) {
+function resolveDarkMode4(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
   if (typeof window !== "undefined" && window.matchMedia) {
@@ -6929,7 +7638,7 @@ function createTable(container, spec, options) {
   }
   function compile() {
     const state = getState();
-    const darkMode = resolveDarkMode3(options?.darkMode);
+    const darkMode = resolveDarkMode4(options?.darkMode);
     const { width } = getContainerDimensions();
     const compileOpts = {
       width,
@@ -6990,7 +7699,7 @@ function createTable(container, spec, options) {
       if (isFirstRender) {
         isFirstRender = false;
       }
-      const isDark = resolveDarkMode3(options?.darkMode);
+      const isDark = resolveDarkMode4(options?.darkMode);
       if (isDark) {
         container.classList.add("oc-dark");
       } else {
@@ -7145,7 +7854,7 @@ function createTable(container, spec, options) {
       throw new Error(`Unsupported export format: ${format}`);
     }
     const state = getState();
-    const darkMode = resolveDarkMode3(options?.darkMode);
+    const darkMode = resolveDarkMode4(options?.darkMode);
     const { width } = getContainerDimensions();
     const fullLayout = compileTable(currentSpec, {
       width,
@@ -7226,6 +7935,7 @@ export {
   attachKeyboardNav,
   createChart,
   createGraph,
+  createSankey,
   createSimulationWorker,
   createTable,
   createTextEditOverlay,