@opendata-ai/openchart-vanilla 8.3.0 → 8.4.0

package/dist/index.js

@@ -3,10 +3,10 @@ import {
   paletteFromCanvas,
   readCanvasSRGB,
   resolveRepeat
-} from "./chunk-DCODCLWI.js";
+} from "./chunk-FETYAVTZ.js";
 import {
   renderTileMapSVG
-} from "./chunk-737VNBU6.js";
+} from "./chunk-LNPRDSK3.js";
 import {
   AnimationScheduler,
   CANVAS_DEFAULT_UPDATE_MAX_MARKS,
@@ -28,10 +28,11 @@ import {
   resolveDarkMode,
   resolveEase,
   resolveFontFamily,
+  resolvedSurface,
   scheduleFontReload,
   setupAnimationCleanup,
   setupTableAnimationCleanup
-} from "./chunk-PEIX32S3.js";
+} from "./chunk-45XZOWYC.js";
 import {
   embedFonts,
   ensureSVGDimensions,
@@ -43,16 +44,16 @@ import {
   getSVGBackgroundColor,
   getSVGDimensions,
   rasterizeSVGToCanvas
-} from "./chunk-T32UHMZA.js";
+} from "./chunk-UOB422LY.js";
 import {
   rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
   stampAnimationVars
-} from "./chunk-P32LUJFK.js";
+} from "./chunk-YGYMB7KB.js";
 import {
   injectThemeStyleBlock
-} from "./chunk-RM5XS6NR.js";
+} from "./chunk-HGRNXLDF.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
@@ -714,8 +715,8 @@ var ZoomTransform = class _ZoomTransform {
 // src/graph/camera.ts
 var K_MIN = 0.05;
 var K_MAX = 15;
-var AUTO_MIN_MS = 300;
-var AUTO_MAX_MS = 1200;
+var AUTO_MIN_MS = 400;
+var AUTO_MAX_MS = 600;
 var AUTO_SCALE = 0.6;
 function transformToView(t, viewport) {
   const cx = (viewport.width / 2 - t.x) / t.k;
@@ -884,12 +885,16 @@ function driftFactor(t) {
 }
 
 // src/graph/canvas-renderer.ts
-var LABEL_FONT_MIN = 8;
+var LABEL_FONT_MIN = 9;
 var LABEL_FONT_MAX = 12;
-var EDGE_ALPHA_DEFAULT = 0.35;
+var EDGE_ALPHA_DEFAULT_LIGHT = 0.3;
+var EDGE_ALPHA_DEFAULT_DARK = 0.25;
 var EDGE_ALPHA_CONNECTED = 1;
-var SEARCH_NON_MATCH_ALPHA = 0.15;
-var DEFAULT_DIM_OPACITY = 0.15;
+var SEARCH_NON_MATCH_ALPHA = 0.25;
+var DEFAULT_DIM_OPACITY = 0.3;
+var LABEL_BUDGET_MIN = 12;
+var LABEL_BUDGET_MAX = 80;
+var LABEL_BUDGET_PER_ZOOM = 30;
 var CROSSFADE_MAX_EDGES = 2e4;
 function edgeTier(edge, focus) {
   if (!focus.hasActive) return "default";
@@ -900,14 +905,14 @@ function nodeTier(node, focus, exemptIds) {
   if (exemptIds?.has(node.id)) return "connected";
   return focus.connected.has(node.id) ? "connected" : "dimmed";
 }
-function edgeTierAlpha(tier, dimOpacity) {
+function edgeTierAlpha(tier, dimOpacity, defaultAlpha) {
   switch (tier) {
     case "connected":
       return EDGE_ALPHA_CONNECTED;
     case "dimmed":
       return dimOpacity / 3;
     default:
-      return EDGE_ALPHA_DEFAULT;
+      return defaultAlpha;
   }
 }
 function nodeTierAlpha(tier, dimOpacity) {
@@ -960,13 +965,16 @@ function deriveFocus(hoveredNodeId, selectedNodeIds, adjacencyMap) {
 }
 var GLOW_NODE_THRESHOLD = 2e3;
 var GLOW_RADIUS_MULTIPLIER = 1.3;
-var GLOW_ALPHA = 0.15;
+var GLOW_ALPHA = 0.1;
 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 labelBudget(zoom) {
+  const raw = Math.round(zoom * LABEL_BUDGET_PER_ZOOM);
+  return Math.max(LABEL_BUDGET_MIN, Math.min(LABEL_BUDGET_MAX, raw));
+}
+function boxesOverlap(a, b) {
+  return a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
 }
 function visibleRect(canvasWidth, canvasHeight, transform, margin = CULL_MARGIN) {
   const { x, y, k } = transform;
@@ -1034,8 +1042,8 @@ var GraphCanvasRenderer = class {
     const visibleNodes = nodes.filter((n) => nodeInView(n, rect));
     const visibleEdges = edges.filter((e) => edgeInView(e, rect));
     const isDark = theme.isDark;
+    const edgeAlphaDefault = isDark ? EDGE_ALPHA_DEFAULT_DARK : EDGE_ALPHA_DEFAULT_LIGHT;
     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);
@@ -1047,7 +1055,7 @@ var GraphCanvasRenderer = class {
     ctx.translate(transform.x, transform.y);
     ctx.scale(transform.k, transform.k);
     if (state.exiting && state.exiting.alpha > 0) {
-      this.drawGhosts(ctx, state.exiting, rect);
+      this.drawGhosts(ctx, state.exiting, rect, edgeAlphaDefault);
     }
     if (crossfade && visibleEdges.length <= CROSSFADE_MAX_EDGES) {
       this.drawEdgesCrossfade(
@@ -1057,6 +1065,7 @@ var GraphCanvasRenderer = class {
         crossfade.next,
         crossfade.t,
         dimOpacity,
+        edgeAlphaDefault,
         isGesturing ? null : searchMatches,
         hoveredEdgeId,
         entrance,
@@ -1068,6 +1077,7 @@ var GraphCanvasRenderer = class {
         visibleEdges,
         nextFocus,
         dimOpacity,
+        edgeAlphaDefault,
         isGesturing ? null : searchMatches,
         hoveredEdgeId,
         entrance,
@@ -1095,7 +1105,6 @@ var GraphCanvasRenderer = class {
       this.drawLabels(
         ctx,
         visibleNodes,
-        threshold,
         hoveredNodeId,
         selectedNodeIds,
         searchMatches,
@@ -1132,7 +1141,7 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Batched edge drawing
   // -------------------------------------------------------------------------
-  drawEdgesBatched(ctx, edges, focus, dimOpacity, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
+  drawEdgesBatched(ctx, edges, focus, dimOpacity, edgeAlphaDefault, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
     const buckets = {
       dimmed: [],
       default: [],
@@ -1151,14 +1160,14 @@ var GraphCanvasRenderer = class {
     this.drawEdgeGroupBatched(
       ctx,
       buckets.dimmed,
-      edgeTierAlpha("dimmed", dimOpacity) * ea,
+      edgeTierAlpha("dimmed", dimOpacity, edgeAlphaDefault) * ea,
       searchMatches,
       enterAlphaFor
     );
     this.drawEdgeGroupBatched(
       ctx,
       buckets.default,
-      EDGE_ALPHA_DEFAULT * ea,
+      edgeAlphaDefault * ea,
       searchMatches,
       enterAlphaFor
     );
@@ -1177,7 +1186,7 @@ var GraphCanvasRenderer = class {
    * batched at `lerp(edgeTierAlpha[prev], edgeTierAlpha[next], t)`. Preserves the
    * per-group style batching within each bucket.
    */
-  drawEdgesCrossfade(ctx, edges, prev, next, t, dimOpacity, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
+  drawEdgesCrossfade(ctx, edges, prev, next, t, dimOpacity, edgeAlphaDefault, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
     const ea = entrance ? entrance.edgeAlpha : 1;
     const buckets = /* @__PURE__ */ new Map();
     let hoveredEdge = null;
@@ -1197,7 +1206,11 @@ var GraphCanvasRenderer = class {
     }
     const ordered = [...buckets.entries()].map(([key, bucket]) => {
       const [prevTier, nextTier] = key.split("|");
-      const alpha = lerp(edgeTierAlpha(prevTier, dimOpacity), edgeTierAlpha(nextTier, dimOpacity), t) * ea;
+      const alpha = lerp(
+        edgeTierAlpha(prevTier, dimOpacity, edgeAlphaDefault),
+        edgeTierAlpha(nextTier, dimOpacity, edgeAlphaDefault),
+        t
+      ) * ea;
       return { alpha, bucket };
     }).sort((a, b) => a.alpha - b.alpha);
     for (const { alpha, bucket } of ordered) {
@@ -1431,34 +1444,71 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Labels (drawn individually, skipped during gestures)
   // -------------------------------------------------------------------------
-  drawLabels(ctx, nodes, threshold, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme, entrance, enterAlphaFor) {
+  drawLabels(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme, entrance, enterAlphaFor) {
     const la = entrance ? entrance.labelAlpha : 1;
     const rawSize = 10 / 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";
+    const haloColor = theme.colors.background !== "transparent" ? theme.colors.background : theme.isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.85)";
+    const forced = [];
+    const rest = [];
     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 isForced = node.id === hoveredNodeId || selectedNodeIds.has(node.id) || node.labelPriority === Infinity || (searchMatches?.has(node.id) ?? false);
+      if (isForced) forced.push(node);
+      else rest.push(node);
+    }
+    rest.sort((a, b) => b.labelPriority - a.labelPriority);
+    const budget = labelBudget(zoom);
+    const candidates = rest.slice(0, budget * 4);
+    const placed = [];
+    const pad = fontSize * 0.15;
+    const lineHeight = fontSize * 1.2;
+    const textWidth = (text) => ctx.measureText?.(text)?.width ?? text.length * fontSize * 0.55;
+    const boxFor = (node) => {
+      const w = textWidth(node.label);
+      const y0 = node.y + node.radius + 3;
+      return {
+        x0: node.x - w / 2 - pad,
+        x1: node.x + w / 2 + pad,
+        y0: y0 - pad,
+        y1: y0 + lineHeight + pad
+      };
+    };
+    const drawOne = (node, isForced) => {
       const dimmed = searchMatches !== null && !searchMatches.has(node.id);
-      if (!forced && node.labelPriority < threshold) continue;
       ctx.globalAlpha = (dimmed ? SEARCH_NON_MATCH_ALPHA : 1) * la * enterAlphaFor(node.id);
       const labelY = node.y + node.radius + 3;
-      if (theme.colors.background !== "transparent") {
-        ctx.strokeStyle = theme.colors.background;
-      } else {
-        ctx.strokeStyle = theme.isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.85)";
+      if (isForced) {
+        ctx.strokeStyle = haloColor;
+        ctx.lineWidth = 3;
+        ctx.lineJoin = "round";
+        ctx.miterLimit = 2;
+        ctx.strokeText(node.label, node.x, labelY);
       }
-      ctx.lineWidth = 3;
-      ctx.lineJoin = "round";
-      ctx.miterLimit = 2;
-      ctx.strokeText(node.label, node.x, labelY);
-      ctx.fillStyle = theme.colors.text;
+      ctx.fillStyle = isForced ? theme.colors.text : theme.colors.axis;
       ctx.fillText(node.label, node.x, labelY);
+    };
+    for (const node of forced) placed.push(boxFor(node));
+    let drawn = 0;
+    for (const node of candidates) {
+      if (drawn >= budget) break;
+      const box = boxFor(node);
+      let collides = false;
+      for (const other of placed) {
+        if (boxesOverlap(box, other)) {
+          collides = true;
+          break;
+        }
+      }
+      if (collides) continue;
+      placed.push(box);
+      drawOne(node, false);
+      drawn++;
     }
+    for (const node of forced) drawOne(node, true);
     ctx.globalAlpha = 1;
   }
   // -------------------------------------------------------------------------
@@ -1470,7 +1520,7 @@ var GraphCanvasRenderer = class {
    * they're on their way out. Batched by (stroke/style) for edges and (fill) for
    * nodes, culled to the visible rect.
    */
-  drawGhosts(ctx, exiting, rect) {
+  drawGhosts(ctx, exiting, rect, edgeAlphaDefault) {
     const alpha = exiting.alpha;
     const edgeGroups = /* @__PURE__ */ new Map();
     for (const edge of exiting.edges) {
@@ -1486,7 +1536,7 @@ var GraphCanvasRenderer = class {
       ctx.setLineDash(dash);
       ctx.strokeStyle = sample.stroke;
       ctx.lineWidth = sample.strokeWidth;
-      ctx.globalAlpha = EDGE_ALPHA_DEFAULT * alpha;
+      ctx.globalAlpha = edgeAlphaDefault * alpha;
       ctx.beginPath();
       for (const edge of group) {
         ctx.moveTo(edge.sourceX, edge.sourceY);
@@ -2929,9 +2979,11 @@ function createGraph(container, spec, options) {
     const resolvedTheme = compilation.theme;
     if (resolvedTheme) {
       const s = wrapper.style;
-      s.setProperty("--oc-bg", resolvedTheme.colors.background);
+      s.setProperty("--oc-bg", resolvedSurface(resolvedTheme));
       s.setProperty("--oc-text", resolvedTheme.colors.text);
-      s.setProperty("--oc-text-secondary", resolvedTheme.colors.axis ?? resolvedTheme.colors.text);
+      s.setProperty("--oc-text-secondary", resolvedTheme.colors.neutral.secondary);
+      s.setProperty("--oc-text-muted", resolvedTheme.colors.axis);
+      s.setProperty("--oc-border", resolvedTheme.colors.neutral.border);
       s.setProperty("--oc-font-family", resolvedTheme.fonts.family);
       s.fontFamily = resolvedTheme.fonts.family;
     }
@@ -4113,8 +4165,18 @@ function renderHeatmapCell(cell) {
 function renderCategoryCell(cell) {
   const td = document.createElement("td");
   td.className = "oc-table-category";
-  td.textContent = cell.formattedValue;
-  applyCellStyle(td, cell);
+  const chip = document.createElement("span");
+  chip.className = "oc-table-chip";
+  if (cell.style.backgroundColor) chip.style.background = cell.style.backgroundColor;
+  if (cell.style.color) chip.style.color = cell.style.color;
+  if (cell.style.accent) {
+    const dot = document.createElement("span");
+    dot.className = "oc-table-chip-dot";
+    dot.style.background = cell.style.accent;
+    chip.appendChild(dot);
+  }
+  chip.appendChild(document.createTextNode(cell.formattedValue));
+  td.appendChild(chip);
   return td;
 }
 function renderBarCell(cell) {
@@ -4178,7 +4240,7 @@ function renderSparklineCell(cell) {
     polyline.setAttribute("points", scaledPointsStr);
     polyline.setAttribute("fill", "none");
     polyline.setAttribute("stroke", sparklineData.color);
-    polyline.setAttribute("stroke-width", "1.5");
+    polyline.setAttribute("stroke-width", "1.25");
     polyline.setAttribute("stroke-linejoin", "round");
     polyline.setAttribute("vector-effect", "non-scaling-stroke");
     svg.appendChild(polyline);
@@ -4272,6 +4334,27 @@ function renderSparklineCell(cell) {
   td.appendChild(wrapper);
   return td;
 }
+var DELTA_GLYPH = {
+  up: "\u25B2",
+  down: "\u25BC",
+  flat: "\u2013"
+};
+function renderDeltaCell(cell) {
+  const td = document.createElement("td");
+  applyCellStyle(td, cell);
+  const chip = document.createElement("span");
+  chip.className = `oc-table-delta oc-table-delta--${cell.tone}`;
+  const arrow = document.createElement("span");
+  arrow.className = "oc-table-delta-arrow";
+  arrow.setAttribute("aria-hidden", "true");
+  arrow.textContent = DELTA_GLYPH[cell.direction];
+  chip.appendChild(arrow);
+  const value = document.createElement("span");
+  value.textContent = cell.formattedValue;
+  chip.appendChild(value);
+  td.appendChild(chip);
+  return td;
+}
 function renderImageCell(cell) {
   const td = document.createElement("td");
   applyCellStyle(td, cell);
@@ -4316,6 +4399,8 @@ function renderCell(cell) {
       return renderBarCell(cell);
     case "sparkline":
       return renderSparklineCell(cell);
+    case "delta":
+      return renderDeltaCell(cell);
     case "image":
       return renderImageCell(cell);
     case "flag":
@@ -4662,26 +4747,41 @@ function renderLabels(parent, nodes, measureText) {
     const text = createSVGElement2("text");
     setAttrs2(text, { x: label.x, y: label.y });
     applyTextStyle(text, label.style);
+    text.setAttribute("class", "oc-sankey-label");
+    text.setAttribute("data-node-id", node.nodeId);
+    const fontSize = label.style.fontSize ?? 12;
+    const fontWeight = label.style.fontWeight ?? 400;
+    let lines = [label.text];
     if (label.maxWidth !== void 0 && label.maxWidth > 0) {
-      const fontSize = label.style.fontSize ?? 12;
-      const fontWeight = label.style.fontWeight ?? 400;
-      const lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth, measureText);
-      if (lines.length > 1) {
-        const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
-        const totalHeight = (lines.length - 1) * lineHeight;
-        const startY = label.y - totalHeight / 2;
-        for (let i = 0; i < lines.length; i++) {
-          const tspan = createSVGElement2("tspan");
-          tspan.setAttribute("x", String(label.x));
-          tspan.setAttribute("y", String(startY + i * lineHeight));
-          tspan.textContent = lines[i];
-          text.appendChild(tspan);
-        }
-      } else {
-        text.textContent = label.text;
+      lines = wrapText(label.text, fontSize, fontWeight, label.maxWidth, measureText);
+    }
+    if (lines.length > 1) {
+      const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
+      const totalHeight = (lines.length - 1) * lineHeight;
+      const startY = label.y - totalHeight / 2;
+      for (let i = 0; i < lines.length; i++) {
+        const tspan = createSVGElement2("tspan");
+        tspan.setAttribute("x", String(label.x));
+        tspan.setAttribute("y", String(startY + i * lineHeight));
+        tspan.textContent = lines[i];
+        text.appendChild(tspan);
       }
     } else {
-      text.textContent = label.text;
+      text.textContent = lines[0];
+    }
+    if (node.valueLabel) {
+      if (text.childNodes.length === 0) {
+        const nameSpan = createSVGElement2("tspan");
+        nameSpan.textContent = text.textContent;
+        text.textContent = "";
+        text.appendChild(nameSpan);
+      }
+      const valueSpan = createSVGElement2("tspan");
+      valueSpan.setAttribute("class", "oc-sankey-label-value");
+      valueSpan.setAttribute("dx", "5");
+      applyTextStyle(valueSpan, node.valueLabel.style);
+      valueSpan.textContent = node.valueLabel.text;
+      text.appendChild(valueSpan);
     }
     g.appendChild(text);
   }
@@ -4739,8 +4839,8 @@ function renderSankeySVG(layout, animation) {
 
 // src/sankey-mount.ts
 var HIGHLIGHT_OPACITY = 0.7;
-var DIM_OPACITY = 0.15;
-var NODE_DIM_OPACITY = 0.2;
+var DIM_OPACITY = 0.12;
+var NODE_DIM_OPACITY = 0.3;
 function createSankey(container, spec, options) {
   let currentSpec = spec;
   let currentLayout;
@@ -4802,7 +4902,7 @@ function createSankey(container, spec, options) {
           tooltipManager.show(content, x, y);
         }
         options?.onNodeHover?.(nodeData);
-        if (nodeId) highlightConnectedLinks(svg, nodeId, layout);
+        if (nodeId) highlightPath(svg, { up: [nodeId], down: [nodeId] }, layout);
       };
       const handleMouseMove = (e) => {
         if (content && tooltipManager) {
@@ -4849,6 +4949,13 @@ function createSankey(container, spec, options) {
           tooltipManager.show(content, x, y);
         }
         options?.onLinkHover?.(linkData);
+        if (sourceId && targetId) {
+          highlightPath(
+            svg,
+            { up: [sourceId], down: [targetId], links: [`${sourceId}->${targetId}`] },
+            layout
+          );
+        }
       };
       const handleMouseMove = (e) => {
         if (content && tooltipManager) {
@@ -4862,6 +4969,7 @@ function createSankey(container, spec, options) {
       const handleMouseLeave = () => {
         tooltipManager?.hide();
         options?.onLinkHover?.(null);
+        resetLinkOpacity(svg, layout);
       };
       const handleClick = () => {
         options?.onLinkClick?.(linkData);
@@ -4888,27 +4996,53 @@ function createSankey(container, spec, options) {
     const link = layout.links.find((l) => l.sourceId === sourceId && l.targetId === targetId);
     return link?.data ?? {};
   }
-  function highlightConnectedLinks(svg, nodeId, _layout) {
-    const connectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
-    const linkElements = svg.querySelectorAll(".oc-sankey-link");
-    for (const el of linkElements) {
-      const source = el.getAttribute("data-source");
-      const target = el.getAttribute("data-target");
+  function tracePath(layout, seeds) {
+    const out = /* @__PURE__ */ new Map();
+    const inn = /* @__PURE__ */ new Map();
+    for (const link of layout.links) {
+      const o = out.get(link.sourceId);
+      if (o) o.push(link);
+      else out.set(link.sourceId, [link]);
+      const i = inn.get(link.targetId);
+      if (i) i.push(link);
+      else inn.set(link.targetId, [link]);
+    }
+    const nodes = /* @__PURE__ */ new Set([...seeds.up, ...seeds.down]);
+    const links = new Set(seeds.links ?? []);
+    const walk = (adjacency, seedIds, nextId) => {
+      const queue = [...seedIds];
+      const seen = new Set(seedIds);
+      while (queue.length > 0) {
+        const id = queue.shift();
+        for (const link of adjacency.get(id) ?? []) {
+          links.add(`${link.sourceId}->${link.targetId}`);
+          const next = nextId(link);
+          nodes.add(next);
+          if (!seen.has(next)) {
+            seen.add(next);
+            queue.push(next);
+          }
+        }
+      }
+    };
+    walk(out, seeds.down, (l) => l.targetId);
+    walk(inn, seeds.up, (l) => l.sourceId);
+    return { nodes, links };
+  }
+  function highlightPath(svg, seeds, layout) {
+    const { nodes: onNodes, links: onLinks } = tracePath(layout, seeds);
+    for (const el of svg.querySelectorAll(".oc-sankey-link")) {
       const path = el.querySelector("path");
       if (!path) continue;
-      const isConnected = source === nodeId || target === nodeId;
-      path.setAttribute("fill-opacity", String(isConnected ? HIGHLIGHT_OPACITY : DIM_OPACITY));
-      if (isConnected) {
-        if (source) connectedNodeIds.add(source);
-        if (target) connectedNodeIds.add(target);
-      }
+      const source = el.getAttribute("data-source");
+      const target = el.getAttribute("data-target");
+      const onPath = onLinks.has(`${source}->${target}`);
+      path.setAttribute("fill-opacity", String(onPath ? HIGHLIGHT_OPACITY : DIM_OPACITY));
     }
-    const nodeElements = svg.querySelectorAll(".oc-sankey-node");
-    for (const el of nodeElements) {
+    for (const el of svg.querySelectorAll(".oc-sankey-node, .oc-sankey-label")) {
       const nid = el.getAttribute("data-node-id");
       if (!nid) continue;
-      const isConnected = connectedNodeIds.has(nid);
-      el.style.opacity = isConnected ? "1" : String(NODE_DIM_OPACITY);
+      el.style.opacity = onNodes.has(nid) ? "1" : String(NODE_DIM_OPACITY);
     }
   }
   function resetLinkOpacity(svg, layout) {
@@ -4921,8 +5055,7 @@ function createSankey(container, spec, options) {
       const link = layout.links.find((l) => l.sourceId === source && l.targetId === target);
       path.setAttribute("fill-opacity", String(link?.fillOpacity ?? 0.5));
     }
-    const nodeElements = svg.querySelectorAll(".oc-sankey-node");
-    for (const el of nodeElements) {
+    for (const el of svg.querySelectorAll(".oc-sankey-node, .oc-sankey-label")) {
       el.style.opacity = "1";
     }
   }
@@ -5287,11 +5420,11 @@ function attachKeyboardNav(options) {
 }
 
 // src/table-mount.ts
-import { getBreakpoint } from "@opendata-ai/openchart-core";
+import { BREAKPOINT_COMPACT_MAX } from "@opendata-ai/openchart-core";
 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 { BRAND_FONT_SIZE as BRAND_FONT_SIZE3, cssTokenDefault } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
 var BRAND_URL3 = "https://tryopendata.ai";
 function renderChromeBlock(layout, position) {
@@ -5333,6 +5466,7 @@ function renderChromeBlock(layout, position) {
 }
 function renderThead(columns, sort) {
   const thead = document.createElement("thead");
+  thead.setAttribute("role", "rowgroup");
   const tr = document.createElement("tr");
   tr.setAttribute("role", "row");
   for (const col of columns) {
@@ -5364,6 +5498,7 @@ function renderThead(columns, sort) {
 }
 function renderTbody(rows, columns) {
   const tbody = document.createElement("tbody");
+  tbody.setAttribute("role", "rowgroup");
   for (let r = 0; r < rows.length; r++) {
     const row = rows[r];
     const tr = document.createElement("tr");
@@ -5376,12 +5511,35 @@ function renderTbody(rows, columns) {
       const td = renderCell(cell);
       td.setAttribute("role", "gridcell");
       td.style.textAlign = columns[c].align;
+      td.setAttribute("data-label", columns[c].label);
+      td.setAttribute("data-priority", String(columns[c].priority));
       tr.appendChild(td);
     }
     tbody.appendChild(tr);
   }
   return tbody;
 }
+function renderTfoot(totalRow, columns) {
+  const tfoot = document.createElement("tfoot");
+  tfoot.className = "oc-table-total";
+  tfoot.setAttribute("role", "rowgroup");
+  const tr = document.createElement("tr");
+  tr.setAttribute("role", "row");
+  for (let c = 0; c < columns.length; c++) {
+    const cell = totalRow.cells[c];
+    const td = cell ? renderCell(cell) : document.createElement("td");
+    td.setAttribute("role", "gridcell");
+    td.style.textAlign = columns[c].align;
+    td.setAttribute("data-label", columns[c].label);
+    td.setAttribute("data-priority", String(columns[c].priority));
+    if (c === 0 && !td.textContent) {
+      td.textContent = totalRow.label;
+    }
+    tr.appendChild(td);
+  }
+  tfoot.appendChild(tr);
+  return tfoot;
+}
 function renderSearchBar(layout) {
   if (!layout.search.enabled) return null;
   const div = document.createElement("div");
@@ -5439,12 +5597,23 @@ function renderTable(layout, container, opts) {
   const { theme, chrome } = layout;
   if (theme) {
     const s = wrapper.style;
-    s.setProperty("--oc-bg", theme.colors.background);
+    const n = theme.colors.neutral;
+    s.setProperty("--oc-bg", resolvedSurface(theme));
     s.setProperty("--oc-text", theme.colors.text);
-    s.setProperty("--oc-text-secondary", theme.colors.axis ?? theme.colors.text);
-    s.setProperty("--oc-text-muted", theme.colors.axis ?? theme.colors.text);
+    s.setProperty("--oc-text-secondary", n.secondary);
+    s.setProperty("--oc-text-muted", n[600]);
+    s.setProperty("--oc-text-faint", n.faint);
+    s.setProperty("--oc-gray-100", n[100]);
+    s.setProperty("--oc-gray-200", n[200]);
+    s.setProperty("--oc-gray-300", n[300]);
+    s.setProperty("--oc-gray-400", n[400]);
     s.setProperty("--oc-gridline", theme.colors.gridline);
-    s.setProperty("--oc-border", theme.colors.gridline);
+    const stripWs = (c) => c.replace(/\s+/g, "");
+    const defaultGridline = cssTokenDefault("--oc-gridline", theme.isDark ? "dark" : "light");
+    const gridlineOverridden = stripWs(theme.colors.gridline) !== stripWs(defaultGridline);
+    s.setProperty("--oc-border", gridlineOverridden ? theme.colors.gridline : n.border);
+    s.setProperty("--oc-positive", theme.colors.positive);
+    s.setProperty("--oc-negative", theme.colors.negative);
     s.setProperty("--oc-font-family", theme.fonts.family);
     s.fontFamily = theme.fonts.family;
   }
@@ -5469,9 +5638,13 @@ function renderTable(layout, container, opts) {
       s.setProperty("--oc-footer-computed-color", chrome.footer.style.fill);
     }
   }
-  if (layout.compact) {
+  wrapper.classList.add(`oc-table--${layout.density}`);
+  if (layout.density === "condensed") {
     wrapper.classList.add("oc-table--compact");
   }
+  if (layout.striped) {
+    wrapper.classList.add("oc-table--striped");
+  }
   const headerChrome = renderChromeBlock(layout, "header");
   if (headerChrome) {
     wrapper.appendChild(headerChrome);
@@ -5499,6 +5672,9 @@ function renderTable(layout, container, opts) {
     table.appendChild(caption);
     table.appendChild(renderThead(layout.columns, layout.sort));
     table.appendChild(renderTbody(layout.rows, layout.columns));
+    if (layout.totalRow) {
+      table.appendChild(renderTfoot(layout.totalRow, layout.columns));
+    }
     scroll.appendChild(table);
     wrapper.appendChild(scroll);
   }
@@ -5551,6 +5727,8 @@ function renderTable(layout, container, opts) {
 }
 
 // src/table-mount.ts
+var MIN_READABLE_COLUMN_WIDTH = 96;
+var AUTO_CONDENSE_MAX_WIDTH = 560;
 function csvEscape(value) {
   if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
     return `"${value.replace(/"/g, '""')}"`;
@@ -5575,6 +5753,7 @@ function createTable(container, spec, options) {
   let cleanupAnimations = null;
   let isFirstRender = true;
   let destroyed = false;
+  let sortTouched = false;
   const internalState = {
     sort: null,
     search: "",
@@ -5601,9 +5780,13 @@ function createTable(container, spec, options) {
         search: partial.search !== void 0 ? partial.search : current.search,
         page: partial.page !== void 0 ? partial.page : current.page
       };
+      if (partial.sort !== void 0) sortTouched = true;
       options?.onStateChange?.(next);
     } else {
-      if (partial.sort !== void 0) internalState.sort = partial.sort;
+      if (partial.sort !== void 0) {
+        internalState.sort = partial.sort;
+        sortTouched = true;
+      }
       if (partial.search !== void 0) internalState.search = partial.search;
       if (partial.page !== void 0) internalState.page = partial.page;
       options?.onStateChange?.({ ...internalState });
@@ -5619,12 +5802,23 @@ function createTable(container, spec, options) {
       theme: options?.theme,
       darkMode,
       watermark: options?.watermark,
-      sort: state.sort ?? void 0,
+      // undefined = "no opinion, apply the spec default"; null = the user
+      // cycled sorting off and expects the original row order back. A
+      // controlled caller's natural initial `sort: null` means "no opinion"
+      // until the user has actually touched sorting.
+      sort: resolveEffectiveSort(state),
       search: state.search || void 0,
       page: state.page
     };
     return compileTable(currentSpec, compileOpts);
   }
+  function sameSort(a, b) {
+    if (a === null || b === null) return a === b;
+    return a.column === b.column && a.direction === b.direction;
+  }
+  function resolveEffectiveSort(state) {
+    return sortTouched ? state.sort : state.sort ?? void 0;
+  }
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -5642,12 +5836,13 @@ function createTable(container, spec, options) {
   function applyBreakpointClass() {
     if (!wrapperElement) return;
     const { width } = getContainerDimensions();
-    const bp = getBreakpoint(width);
-    if (bp === "compact" || bp === "medium") {
-      wrapperElement.classList.add("oc-table--compact");
-    } else if (!currentLayout?.compact) {
-      wrapperElement.classList.remove("oc-table--compact");
-    }
+    wrapperElement.classList.toggle("oc-table--cards", width < BREAKPOINT_COMPACT_MAX);
+    if (currentSpec.density !== void 0 || currentSpec.compact === true) return;
+    const columns = currentLayout?.columns.length ?? 0;
+    const condensed = columns * MIN_READABLE_COLUMN_WIDTH > width || width < AUTO_CONDENSE_MAX_WIDTH;
+    wrapperElement.classList.toggle("oc-table--condensed", condensed);
+    wrapperElement.classList.toggle("oc-table--compact", condensed);
+    wrapperElement.classList.toggle("oc-table--regular", !condensed);
   }
   function render() {
     if (destroyed) return;
@@ -5835,7 +6030,7 @@ function createTable(container, spec, options) {
       height: 600,
       theme: options?.theme,
       darkMode,
-      sort: state.sort ?? void 0,
+      sort: resolveEffectiveSort(state),
       search: state.search || void 0
       // No page/pageSize: get all rows
     });
@@ -5849,6 +6044,9 @@ function createTable(container, spec, options) {
   }
   function setState(partial) {
     if (destroyed) return;
+    if (partial.sort !== void 0 && !sameSort(partial.sort, getState().sort)) {
+      sortTouched = true;
+    }
     if (isControlled && options?.externalState) {
       if (partial.sort !== void 0) options.externalState.sort = partial.sort;
       if (partial.search !== void 0) options.externalState.search = partial.search;
@@ -5913,13 +6111,13 @@ function createTable(container, spec, options) {
 }
 
 // src/tilemap-mount.ts
-import { BREAKPOINT_COMPACT_MAX, BREAKPOINT_MEDIUM_MAX } from "@opendata-ai/openchart-core";
+import { BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2, BREAKPOINT_MEDIUM_MAX } from "@opendata-ai/openchart-core";
 import { compileTileMap } from "@opendata-ai/openchart-engine";
 var TILEMAP_GRID_ROWS = 8;
 var TILEMAP_TILE_GAP = 5;
 var TILEMAP_CHROME_RESERVE = 180;
 function pickTargetTileSize(width) {
-  if (width < BREAKPOINT_COMPACT_MAX) return 34;
+  if (width < BREAKPOINT_COMPACT_MAX2) return 34;
   return 40;
 }
 function createTileMap(container, spec, options) {
@@ -5976,6 +6174,7 @@ function createTileMap(container, spec, options) {
     for (const t of layout.tiles) {
       if (!tilesByStateCode.has(t.stateCode)) tilesByStateCode.set(t.stateCode, t);
     }
+    const tilesGroup = svg.querySelector(".oc-tilemap-tiles");
     const tileElements = svg.querySelectorAll(".oc-tilemap-tile");
     for (const el of tileElements) {
       const stateCode = el.getAttribute("data-state");
@@ -5984,6 +6183,8 @@ function createTileMap(container, spec, options) {
       const tile = tilesByStateCode.get(stateCode);
       const handleMouseEnter = (e) => {
         const mouseEvent = e;
+        tilesGroup?.classList.add("oc-hover-active");
+        el.classList.add("oc-tilemap-tile--hover");
         if (content && tooltipManager && options?.tooltip !== false) {
           const svgRect = svg.getBoundingClientRect();
           const x = mouseEvent.clientX - svgRect.left;
@@ -6009,6 +6210,8 @@ function createTileMap(container, spec, options) {
         }
       };
       const handleMouseLeave = () => {
+        tilesGroup?.classList.remove("oc-hover-active");
+        el.classList.remove("oc-tilemap-tile--hover");
         tooltipManager?.hide();
         options?.onTileHover?.(null);
       };