@opendata-ai/openchart-engine 6.12.0 → 6.13.0

package/dist/index.js

@@ -11,8 +11,10 @@ import {
   resolveTheme as resolveTheme3
 } from "@opendata-ai/openchart-core";
 
-// src/annotations/compute.ts
-import { detectCollision, estimateTextWidth } from "@opendata-ai/openchart-core";
+// src/annotations/collisions.ts
+import { detectCollision } from "@opendata-ai/openchart-core";
+
+// src/annotations/constants.ts
 var DEFAULT_ANNOTATION_FONT_SIZE = 12;
 var DEFAULT_ANNOTATION_FONT_WEIGHT = 400;
 var DEFAULT_LINE_HEIGHT = 1.3;
@@ -24,6 +26,91 @@ var DARK_TEXT_FILL = "#d1d5db";
 var LIGHT_REFLINE_STROKE = "#888888";
 var DARK_REFLINE_STROKE = "#9ca3af";
 var ANCHOR_OFFSET = 8;
+var NUDGE_PADDING = 6;
+var CLAMP_MARGIN = 4;
+
+// src/annotations/geometry.ts
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
+function computeTextBounds(labelX, labelY, text, fontSize, fontWeight) {
+  const lines = text.split("\n");
+  const isMultiLine = lines.length > 1;
+  const maxWidth = Math.max(...lines.map((line) => estimateTextWidth(line, fontSize, fontWeight)));
+  const totalHeight = lines.length * fontSize * DEFAULT_LINE_HEIGHT;
+  const x2 = isMultiLine ? labelX - maxWidth / 2 : labelX;
+  return {
+    x: x2,
+    y: labelY - fontSize,
+    width: maxWidth,
+    height: totalHeight
+  };
+}
+function computeAnchorOffset(anchor, _px, py, chartArea) {
+  if (!anchor || anchor === "auto") {
+    const isUpperHalf = py < chartArea.y + chartArea.height / 2;
+    return isUpperHalf ? { dx: ANCHOR_OFFSET, dy: ANCHOR_OFFSET } : { dx: ANCHOR_OFFSET, dy: -ANCHOR_OFFSET };
+  }
+  switch (anchor) {
+    case "top":
+      return { dx: 0, dy: -ANCHOR_OFFSET };
+    case "bottom":
+      return { dx: 0, dy: ANCHOR_OFFSET };
+    case "left":
+      return { dx: -ANCHOR_OFFSET, dy: 0 };
+    case "right":
+      return { dx: ANCHOR_OFFSET, dy: 0 };
+  }
+}
+function applyOffset(base, offset) {
+  if (!offset) return base;
+  return {
+    dx: base.dx + (offset.dx ?? 0),
+    dy: base.dy + (offset.dy ?? 0)
+  };
+}
+function computeConnectorOrigin(labelX, labelY, text, fontSize, fontWeight, targetX, targetY, connectorStyle) {
+  const box = computeTextBounds(labelX, labelY, text, fontSize, fontWeight);
+  const boxCenterX = box.x + box.width / 2;
+  const boxCenterY = box.y + box.height / 2;
+  if (connectorStyle === "curve") {
+    return {
+      x: box.x + box.width,
+      y: boxCenterY
+    };
+  }
+  const halfW = box.width / 2 || 1;
+  const halfH = box.height / 2 || 1;
+  const ndx = (targetX - boxCenterX) / halfW;
+  const ndy = (targetY - boxCenterY) / halfH;
+  if (Math.abs(ndy) >= Math.abs(ndx)) {
+    return ndy < 0 ? { x: boxCenterX, y: box.y } : { x: boxCenterX, y: box.y + box.height };
+  }
+  return ndx < 0 ? { x: box.x, y: boxCenterY } : { x: box.x + box.width, y: boxCenterY };
+}
+function estimateLabelBounds(label) {
+  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+  return computeTextBounds(label.x, label.y, label.text, fontSize, fontWeight);
+}
+function recomputeConnector(label, targetX, targetY) {
+  const connector = label.connector;
+  if (!connector) return connector;
+  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+  const connStyle = connector.style === "curve" ? "curve" : "straight";
+  const newFrom = computeConnectorOrigin(
+    label.x,
+    label.y,
+    label.text,
+    fontSize,
+    fontWeight,
+    targetX,
+    targetY,
+    connStyle
+  );
+  return { ...connector, from: newFrom };
+}
+
+// src/annotations/position.ts
 function interpolateInDomain(numValue, domain, positionOf) {
   if (domain.length < 2) return null;
   const nums = domain.map(Number);
@@ -83,6 +170,150 @@ function resolvePosition(value2, scale) {
   }
   return null;
 }
+
+// src/annotations/collisions.ts
+function generateNudgeCandidates(selfBounds, obstacles, padding) {
+  const candidates = [];
+  for (const obs of obstacles) {
+    const belowDy = obs.y + obs.height + padding - selfBounds.y;
+    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
+    const aboveDy = obs.y - padding - (selfBounds.y + selfBounds.height);
+    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
+    const leftDx = obs.x - padding - (selfBounds.x + selfBounds.width);
+    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
+    const rightDx = obs.x + obs.width + padding - selfBounds.x;
+    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
+  }
+  candidates.sort((a, b) => a.distance - b.distance);
+  return candidates;
+}
+function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, chartArea, obstacles) {
+  if (annotation.type !== "text" || !annotation.label) return false;
+  const labelBounds = estimateLabelBounds(annotation.label);
+  const collidingObs = obstacles.filter(
+    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs)
+  );
+  if (collidingObs.length === 0) return false;
+  const px = resolvePosition(originalAnnotation.x, scales.x);
+  const py = resolvePosition(originalAnnotation.y, scales.y);
+  if (px === null || py === null) return false;
+  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
+  const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split("\n").length);
+  for (const { dx, dy } of candidates) {
+    const newLabelX = annotation.label.x + dx;
+    const newLabelY = annotation.label.y + dy;
+    const candidateLabel = {
+      ...annotation.label,
+      x: newLabelX,
+      y: newLabelY,
+      connector: recomputeConnector({ ...annotation.label, x: newLabelX, y: newLabelY }, px, py)
+    };
+    const candidateBounds = estimateLabelBounds(candidateLabel);
+    const stillCollides = obstacles.some(
+      (obs) => obs.width > 0 && obs.height > 0 && detectCollision(candidateBounds, obs)
+    );
+    if (stillCollides) continue;
+    const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+    const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 10 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
+    if (inBounds) {
+      annotation.label = candidateLabel;
+      return true;
+    }
+  }
+  return false;
+}
+function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartArea) {
+  const placedBounds = [];
+  for (let i = 0; i < annotations.length; i++) {
+    const annotation = annotations[i];
+    if (annotation.type !== "text" || !annotation.label) {
+      continue;
+    }
+    const bounds = estimateLabelBounds(annotation.label);
+    const collidingBounds = placedBounds.filter(
+      (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb)
+    );
+    if (collidingBounds.length > 0) {
+      const originalSpec = originalSpecs[i];
+      if (originalSpec?.type === "text") {
+        const px = resolvePosition(originalSpec.x, scales.x);
+        const py = resolvePosition(originalSpec.y, scales.y);
+        if (px !== null && py !== null) {
+          const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
+          const fontSize = bounds.height / Math.max(1, annotation.label.text.split("\n").length);
+          for (const { dx, dy } of candidates) {
+            const newLabelX = annotation.label.x + dx;
+            const newLabelY = annotation.label.y + dy;
+            const candidateLabel = {
+              ...annotation.label,
+              x: newLabelX,
+              y: newLabelY
+            };
+            const candidateBounds = estimateLabelBounds(candidateLabel);
+            const stillCollides = placedBounds.some(
+              (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb)
+            );
+            if (stillCollides) continue;
+            const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+            const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+            const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 10 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+            if (inBounds) {
+              annotation.label = {
+                ...annotation.label,
+                x: newLabelX,
+                y: newLabelY,
+                connector: recomputeConnector(
+                  { ...annotation.label, x: newLabelX, y: newLabelY },
+                  px,
+                  py
+                )
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+    placedBounds.push(estimateLabelBounds(annotation.label));
+  }
+}
+function clampAnnotationsToBounds(annotations, svgWidth, svgHeight) {
+  for (const annotation of annotations) {
+    if (annotation.type !== "text" || !annotation.label) continue;
+    const bounds = estimateLabelBounds(annotation.label);
+    let dx = 0;
+    let dy = 0;
+    if (bounds.x + bounds.width > svgWidth - CLAMP_MARGIN) {
+      dx = svgWidth - CLAMP_MARGIN - (bounds.x + bounds.width);
+    }
+    if (bounds.x + dx < CLAMP_MARGIN) {
+      dx = CLAMP_MARGIN - bounds.x;
+    }
+    if (bounds.y < CLAMP_MARGIN) {
+      dy = CLAMP_MARGIN - bounds.y;
+    }
+    if (bounds.y + bounds.height + dy > svgHeight - CLAMP_MARGIN) {
+      dy = svgHeight - CLAMP_MARGIN - (bounds.y + bounds.height);
+    }
+    if (dx === 0 && dy === 0) continue;
+    const newX = annotation.label.x + dx;
+    const newY = annotation.label.y + dy;
+    const connector = annotation.label.connector;
+    annotation.label = {
+      ...annotation.label,
+      x: newX,
+      y: newY,
+      connector: connector ? recomputeConnector(
+        { ...annotation.label, x: newX, y: newY },
+        connector.to.x,
+        connector.to.y
+      ) : void 0
+    };
+  }
+}
+
+// src/annotations/resolve-text.ts
 function makeAnnotationLabelStyle(fontSize, fontWeight, fill, isDark) {
   const defaultFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
   return {
@@ -94,61 +325,6 @@ function makeAnnotationLabelStyle(fontSize, fontWeight, fill, isDark) {
     textAnchor: "start"
   };
 }
-function computeTextBounds(labelX, labelY, text, fontSize, fontWeight) {
-  const lines = text.split("\n");
-  const isMultiLine = lines.length > 1;
-  const maxWidth = Math.max(...lines.map((line) => estimateTextWidth(line, fontSize, fontWeight)));
-  const totalHeight = lines.length * fontSize * DEFAULT_LINE_HEIGHT;
-  const x2 = isMultiLine ? labelX - maxWidth / 2 : labelX;
-  return {
-    x: x2,
-    y: labelY - fontSize,
-    width: maxWidth,
-    height: totalHeight
-  };
-}
-function computeAnchorOffset(anchor, _px, py, chartArea) {
-  if (!anchor || anchor === "auto") {
-    const isUpperHalf = py < chartArea.y + chartArea.height / 2;
-    return isUpperHalf ? { dx: ANCHOR_OFFSET, dy: ANCHOR_OFFSET } : { dx: ANCHOR_OFFSET, dy: -ANCHOR_OFFSET };
-  }
-  switch (anchor) {
-    case "top":
-      return { dx: 0, dy: -ANCHOR_OFFSET };
-    case "bottom":
-      return { dx: 0, dy: ANCHOR_OFFSET };
-    case "left":
-      return { dx: -ANCHOR_OFFSET, dy: 0 };
-    case "right":
-      return { dx: ANCHOR_OFFSET, dy: 0 };
-  }
-}
-function applyOffset(base, offset) {
-  if (!offset) return base;
-  return {
-    dx: base.dx + (offset.dx ?? 0),
-    dy: base.dy + (offset.dy ?? 0)
-  };
-}
-function computeConnectorOrigin(labelX, labelY, text, fontSize, fontWeight, targetX, targetY, connectorStyle) {
-  const box = computeTextBounds(labelX, labelY, text, fontSize, fontWeight);
-  const boxCenterX = box.x + box.width / 2;
-  const boxCenterY = box.y + box.height / 2;
-  if (connectorStyle === "curve") {
-    return {
-      x: box.x + box.width,
-      y: boxCenterY
-    };
-  }
-  const halfW = box.width / 2 || 1;
-  const halfH = box.height / 2 || 1;
-  const ndx = (targetX - boxCenterX) / halfW;
-  const ndy = (targetY - boxCenterY) / halfH;
-  if (Math.abs(ndy) >= Math.abs(ndx)) {
-    return ndy < 0 ? { x: boxCenterX, y: box.y } : { x: boxCenterX, y: box.y + box.height };
-  }
-  return ndx < 0 ? { x: box.x, y: boxCenterY } : { x: box.x + box.width, y: boxCenterY };
-}
 function resolveTextAnnotation(annotation, scales, chartArea, isDark) {
   const px = resolvePosition(annotation.x, scales.x);
   const py = resolvePosition(annotation.y, scales.y);
@@ -217,6 +393,8 @@ function resolveTextAnnotation(annotation, scales, chartArea, isDark) {
     zIndex: annotation.zIndex
   };
 }
+
+// src/annotations/resolve-range.ts
 function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
   let x2 = chartArea.x;
   let y2 = chartArea.y;
@@ -252,310 +430,125 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
     }
     const baseX = centered ? x2 + width / 2 : anchor === "right" ? x2 + width : x2;
     label = {
-      text: annotation.label,
-      x: baseX + labelDelta.dx,
-      y: y2 + labelDelta.dy,
-      style,
-      visible: true
-    };
-  }
-  const defaultOpacity = isDark ? 0.2 : DEFAULT_RANGE_OPACITY;
-  return {
-    type: "range",
-    id: annotation.id,
-    rect,
-    label,
-    fill: annotation.fill ?? DEFAULT_RANGE_FILL,
-    opacity: annotation.opacity ?? defaultOpacity,
-    stroke: annotation.stroke,
-    zIndex: annotation.zIndex
-  };
-}
-function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
-  let start;
-  let end;
-  if (annotation.y !== void 0) {
-    const yPx = resolvePosition(annotation.y, scales.y);
-    if (yPx === null) return null;
-    start = { x: chartArea.x, y: yPx };
-    end = { x: chartArea.x + chartArea.width, y: yPx };
-  } else if (annotation.x !== void 0) {
-    const xPx = resolvePosition(annotation.x, scales.x);
-    if (xPx === null) return null;
-    start = { x: xPx, y: chartArea.y };
-    end = { x: xPx, y: chartArea.y + chartArea.height };
-  } else {
-    return null;
-  }
-  let strokeDasharray;
-  if (annotation.style === "dashed" || annotation.style === void 0) {
-    strokeDasharray = DEFAULT_REFLINE_DASH;
-  } else if (annotation.style === "dotted") {
-    strokeDasharray = "2 2";
-  }
-  let label;
-  if (annotation.label) {
-    const isHorizontal = annotation.y !== void 0;
-    const anchor = annotation.labelAnchor ?? (isHorizontal ? "top" : "left");
-    let baseDx;
-    let baseDy;
-    let labelX;
-    let labelY;
-    let textAnchor;
-    if (isHorizontal) {
-      if (anchor === "left") {
-        baseDx = 4;
-        baseDy = -4;
-        labelX = start.x;
-        labelY = start.y;
-        textAnchor = "start";
-      } else if (anchor === "bottom") {
-        baseDx = -4;
-        baseDy = 14;
-        labelX = end.x;
-        labelY = end.y;
-        textAnchor = "end";
-      } else {
-        baseDx = -4;
-        baseDy = -4;
-        labelX = end.x;
-        labelY = end.y;
-        textAnchor = "end";
-      }
-    } else {
-      if (anchor === "right") {
-        baseDx = -4;
-        baseDy = 14;
-        labelX = start.x;
-        labelY = start.y;
-        textAnchor = "end";
-      } else if (anchor === "bottom") {
-        baseDx = 4;
-        baseDy = -4;
-        labelX = start.x;
-        labelY = end.y;
-        textAnchor = "start";
-      } else {
-        baseDx = 4;
-        baseDy = 14;
-        labelX = start.x;
-        labelY = start.y;
-        textAnchor = "start";
-      }
-    }
-    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
-    const defaultStroke2 = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke2, isDark);
-    style.textAnchor = textAnchor;
-    label = {
-      text: annotation.label,
-      x: labelX + labelDelta.dx,
-      y: labelY + labelDelta.dy,
-      style,
-      visible: true
-    };
-  }
-  const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-  return {
-    type: "refline",
-    id: annotation.id,
-    line: { start, end },
-    label,
-    stroke: annotation.stroke ?? defaultStroke,
-    strokeDasharray,
-    strokeWidth: annotation.strokeWidth ?? 1,
-    zIndex: annotation.zIndex
-  };
-}
-function estimateLabelBounds(label) {
-  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-  const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-  return computeTextBounds(label.x, label.y, label.text, fontSize, fontWeight);
-}
-var NUDGE_PADDING = 6;
-function generateNudgeCandidates(selfBounds, obstacles, padding) {
-  const candidates = [];
-  for (const obs of obstacles) {
-    const belowDy = obs.y + obs.height + padding - selfBounds.y;
-    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
-    const aboveDy = obs.y - padding - (selfBounds.y + selfBounds.height);
-    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
-    const leftDx = obs.x - padding - (selfBounds.x + selfBounds.width);
-    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
-    const rightDx = obs.x + obs.width + padding - selfBounds.x;
-    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
-  }
-  candidates.sort((a, b) => a.distance - b.distance);
-  return candidates;
-}
-function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, chartArea, obstacles) {
-  if (annotation.type !== "text" || !annotation.label) return false;
-  const labelBounds = estimateLabelBounds(annotation.label);
-  const collidingObs = obstacles.filter(
-    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs)
-  );
-  if (collidingObs.length === 0) return false;
-  const px = resolvePosition(originalAnnotation.x, scales.x);
-  const py = resolvePosition(originalAnnotation.y, scales.y);
-  if (px === null || py === null) return false;
-  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
-  const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split("\n").length);
-  for (const { dx, dy } of candidates) {
-    const newLabelX = annotation.label.x + dx;
-    const newLabelY = annotation.label.y + dy;
-    let newConnector = annotation.label.connector;
-    if (newConnector) {
-      const annFontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-      const annFontWeight = annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-      const connStyle = newConnector.style === "curve" ? "curve" : "straight";
-      const newFrom = computeConnectorOrigin(
-        newLabelX,
-        newLabelY,
-        annotation.label.text,
-        annFontSize,
-        annFontWeight,
-        px,
-        py,
-        connStyle
-      );
-      newConnector = { ...newConnector, from: newFrom };
-    }
-    const candidateLabel = {
-      ...annotation.label,
-      x: newLabelX,
-      y: newLabelY,
-      connector: newConnector
-    };
-    const candidateBounds = estimateLabelBounds(candidateLabel);
-    const stillCollides = obstacles.some(
-      (obs) => obs.width > 0 && obs.height > 0 && detectCollision(candidateBounds, obs)
-    );
-    if (stillCollides) continue;
-    const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
-    const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
-    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 10 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
-    if (inBounds) {
-      annotation.label = candidateLabel;
-      return true;
-    }
-  }
-  return false;
-}
-function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartArea) {
-  const placedBounds = [];
-  for (let i = 0; i < annotations.length; i++) {
-    const annotation = annotations[i];
-    if (annotation.type !== "text" || !annotation.label) {
-      continue;
-    }
-    const bounds = estimateLabelBounds(annotation.label);
-    const collidingBounds = placedBounds.filter(
-      (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb)
-    );
-    if (collidingBounds.length > 0) {
-      const originalSpec = originalSpecs[i];
-      if (originalSpec?.type === "text") {
-        const px = resolvePosition(originalSpec.x, scales.x);
-        const py = resolvePosition(originalSpec.y, scales.y);
-        if (px !== null && py !== null) {
-          const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
-          const fontSize = bounds.height / Math.max(1, annotation.label.text.split("\n").length);
-          for (const { dx, dy } of candidates) {
-            const newLabelX = annotation.label.x + dx;
-            const newLabelY = annotation.label.y + dy;
-            const candidateLabel = {
-              ...annotation.label,
-              x: newLabelX,
-              y: newLabelY
-            };
-            const candidateBounds = estimateLabelBounds(candidateLabel);
-            const stillCollides = placedBounds.some(
-              (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb)
-            );
-            if (stillCollides) continue;
-            const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
-            const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
-            const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 10 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
-            if (inBounds) {
-              let newConnector = annotation.label.connector;
-              if (newConnector) {
-                const annFontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-                const annFontWeight = annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-                const connStyle = newConnector.style === "curve" ? "curve" : "straight";
-                const newFrom = computeConnectorOrigin(
-                  newLabelX,
-                  newLabelY,
-                  annotation.label.text,
-                  annFontSize,
-                  annFontWeight,
-                  px,
-                  py,
-                  connStyle
-                );
-                newConnector = { ...newConnector, from: newFrom };
-              }
-              annotation.label = {
-                ...annotation.label,
-                x: newLabelX,
-                y: newLabelY,
-                connector: newConnector
-              };
-              break;
-            }
-          }
-        }
-      }
-    }
-    placedBounds.push(estimateLabelBounds(annotation.label));
+      text: annotation.label,
+      x: baseX + labelDelta.dx,
+      y: y2 + labelDelta.dy,
+      style,
+      visible: true
+    };
   }
+  const defaultOpacity = isDark ? 0.2 : DEFAULT_RANGE_OPACITY;
+  return {
+    type: "range",
+    id: annotation.id,
+    rect,
+    label,
+    fill: annotation.fill ?? DEFAULT_RANGE_FILL,
+    opacity: annotation.opacity ?? defaultOpacity,
+    stroke: annotation.stroke,
+    zIndex: annotation.zIndex
+  };
 }
-var CLAMP_MARGIN = 4;
-function clampAnnotationsToBounds(annotations, svgWidth, svgHeight) {
-  for (const annotation of annotations) {
-    if (annotation.type !== "text" || !annotation.label) continue;
-    const bounds = estimateLabelBounds(annotation.label);
-    let dx = 0;
-    let dy = 0;
-    if (bounds.x + bounds.width > svgWidth - CLAMP_MARGIN) {
-      dx = svgWidth - CLAMP_MARGIN - (bounds.x + bounds.width);
-    }
-    if (bounds.x + dx < CLAMP_MARGIN) {
-      dx = CLAMP_MARGIN - bounds.x;
-    }
-    if (bounds.y < CLAMP_MARGIN) {
-      dy = CLAMP_MARGIN - bounds.y;
-    }
-    if (bounds.y + bounds.height + dy > svgHeight - CLAMP_MARGIN) {
-      dy = svgHeight - CLAMP_MARGIN - (bounds.y + bounds.height);
-    }
-    if (dx === 0 && dy === 0) continue;
-    const newX = annotation.label.x + dx;
-    const newY = annotation.label.y + dy;
-    let newConnector = annotation.label.connector;
-    if (newConnector) {
-      const fontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-      const fontWeight = annotation.label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-      const connStyle = newConnector.style === "curve" ? "curve" : "straight";
-      const newFrom = computeConnectorOrigin(
-        newX,
-        newY,
-        annotation.label.text,
-        fontSize,
-        fontWeight,
-        newConnector.to.x,
-        newConnector.to.y,
-        connStyle
-      );
-      newConnector = { ...newConnector, from: newFrom };
+
+// src/annotations/resolve-refline.ts
+function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
+  let start;
+  let end;
+  if (annotation.y !== void 0) {
+    const yPx = resolvePosition(annotation.y, scales.y);
+    if (yPx === null) return null;
+    start = { x: chartArea.x, y: yPx };
+    end = { x: chartArea.x + chartArea.width, y: yPx };
+  } else if (annotation.x !== void 0) {
+    const xPx = resolvePosition(annotation.x, scales.x);
+    if (xPx === null) return null;
+    start = { x: xPx, y: chartArea.y };
+    end = { x: xPx, y: chartArea.y + chartArea.height };
+  } else {
+    return null;
+  }
+  let strokeDasharray;
+  if (annotation.style === "dashed" || annotation.style === void 0) {
+    strokeDasharray = DEFAULT_REFLINE_DASH;
+  } else if (annotation.style === "dotted") {
+    strokeDasharray = "2 2";
+  }
+  let label;
+  if (annotation.label) {
+    const isHorizontal = annotation.y !== void 0;
+    const anchor = annotation.labelAnchor ?? (isHorizontal ? "top" : "left");
+    let baseDx;
+    let baseDy;
+    let labelX;
+    let labelY;
+    let textAnchor;
+    if (isHorizontal) {
+      if (anchor === "left") {
+        baseDx = 4;
+        baseDy = -4;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "start";
+      } else if (anchor === "bottom") {
+        baseDx = -4;
+        baseDy = 14;
+        labelX = end.x;
+        labelY = end.y;
+        textAnchor = "end";
+      } else {
+        baseDx = -4;
+        baseDy = -4;
+        labelX = end.x;
+        labelY = end.y;
+        textAnchor = "end";
+      }
+    } else {
+      if (anchor === "right") {
+        baseDx = -4;
+        baseDy = 14;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "end";
+      } else if (anchor === "bottom") {
+        baseDx = 4;
+        baseDy = -4;
+        labelX = start.x;
+        labelY = end.y;
+        textAnchor = "start";
+      } else {
+        baseDx = 4;
+        baseDy = 14;
+        labelX = start.x;
+        labelY = start.y;
+        textAnchor = "start";
+      }
     }
-    annotation.label = {
-      ...annotation.label,
-      x: newX,
-      y: newY,
-      connector: newConnector
+    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
+    const defaultStroke2 = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
+    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke2, isDark);
+    style.textAnchor = textAnchor;
+    label = {
+      text: annotation.label,
+      x: labelX + labelDelta.dx,
+      y: labelY + labelDelta.dy,
+      style,
+      visible: true
     };
   }
+  const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
+  return {
+    type: "refline",
+    id: annotation.id,
+    line: { start, end },
+    label,
+    stroke: annotation.stroke ?? defaultStroke,
+    strokeDasharray,
+    strokeWidth: annotation.strokeWidth ?? 1,
+    zIndex: annotation.zIndex
+  };
 }
+
+// src/annotations/compute.ts
 function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = [], svgDimensions) {
   if (strategy.annotationPosition === "tooltip-only") {
     return [];
@@ -788,6 +781,7 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
         scales
       );
     }
+    const stackMode = xChannel.stack === "normalize" ? "normalize" : xChannel.stack === "center" ? "center" : "zero";
     return computeStackedBars(
       spec.data,
       xChannel.field,
@@ -797,7 +791,8 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
       yScale,
       bandwidth,
       baseline,
-      scales
+      scales,
+      stackMode
     );
   }
   return computeColoredBars(
@@ -812,27 +807,33 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
     scales
   );
 }
-function computeStackedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
+function computeStackedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, _baseline, scales, stackMode = "zero") {
   const marks = [];
   const categoryGroups = groupByField(data, categoryField);
   for (const [category, rows] of categoryGroups) {
     const bandY = yScale(category);
     if (bandY === void 0) continue;
-    let cumulativeValue = 0;
+    let categoryTotal = 0;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
-      const value2 = Number(row[valueField] ?? 0);
-      if (!Number.isFinite(value2) || value2 <= 0) continue;
-      const color2 = getColor(scales, groupKey);
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+    let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
+    for (const row of rows) {
+      const groupKey2 = String(row[colorField] ?? "");
+      const rawValue = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+      const value2 = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
+      const color2 = getColor(scales, groupKey2);
       const xLeft = xScale(cumulativeValue);
       const xRight = xScale(cumulativeValue + value2);
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatBarValue(rawValue)}`
       };
       marks.push({
         type: "rect",
-        x: xLeft,
+        x: Math.min(xLeft, xRight),
         y: bandY,
         width: barWidth,
         height: bandwidth,
@@ -866,16 +867,16 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
     const bandY = yScale(category);
     if (bandY === void 0) continue;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
+      const groupKey2 = String(row[colorField] ?? "");
       const value2 = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value2)) continue;
-      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
-      const color2 = getColor(scales, groupKey);
+      const groupIndex = groupIndexMap.get(groupKey2) ?? 0;
+      const color2 = getColor(scales, groupKey2);
       const xPos = value2 >= 0 ? baseline : xScale(value2);
       const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
       const subY = bandY + groupIndex * (subBandHeight + gap);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatBarValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -901,12 +902,12 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
     if (!Number.isFinite(value2)) continue;
     const bandY = yScale(category);
     if (bandY === void 0) continue;
-    const groupKey = String(row[colorField] ?? "");
-    const color2 = getColor(scales, groupKey);
+    const groupKey2 = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey2);
     const xPos = value2 >= 0 ? baseline : xScale(value2);
     const barWidth = Math.max(Math.abs(xScale(value2) - baseline), MIN_BAR_WIDTH);
     const aria = {
-      label: `${category}, ${groupKey}: ${formatBarValue(value2)}`
+      label: `${category}, ${groupKey2}: ${formatBarValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -979,7 +980,7 @@ var SUFFIX_MULTIPLIERS = {
   T: 1e12
 };
 function parseDisplayNumber(raw) {
-  const trimmed = raw.trim();
+  const trimmed = raw.trim().replace(/\u2212/g, "-");
   if (!trimmed) return NaN;
   const last = trimmed[trimmed.length - 1].toUpperCase();
   const multiplier = SUFFIX_MULTIPLIERS[last];
@@ -988,6 +989,9 @@ function parseDisplayNumber(raw) {
     const n = Number(numPart);
     return Number.isNaN(n) ? NaN : n * multiplier;
   }
+  if (last === "%") {
+    return Number(trimmed.slice(0, -1).replace(/,/g, ""));
+  }
   return Number(trimmed.replace(/,/g, ""));
 }
 var LABEL_FONT_SIZE = 11;
@@ -1149,6 +1153,7 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
           scales
         );
       }
+      const stackMode = yChannel.stack === "normalize" ? "normalize" : yChannel.stack === "center" ? "center" : "zero";
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -1158,7 +1163,8 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
         yScale,
         bandwidth,
         baseline,
-        scales
+        scales,
+        stackMode
       );
     }
     return computeColoredColumns(
@@ -1236,13 +1242,13 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
     if (!Number.isFinite(value2)) continue;
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    const groupKey = String(row[colorField] ?? "");
-    const color2 = getColor(scales, groupKey);
+    const groupKey2 = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey2);
     const yPos = yScale(value2);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value2 >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+      label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -1280,17 +1286,17 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
     const bandX = xScale(category);
     if (bandX === void 0) continue;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
+      const groupKey2 = String(row[colorField] ?? "");
       const value2 = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value2)) continue;
-      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
-      const color2 = getColor(scales, groupKey);
+      const groupIndex = groupIndexMap.get(groupKey2) ?? 0;
+      const color2 = getColor(scales, groupKey2);
       const yPos = yScale(value2);
       const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
       const y2 = value2 >= 0 ? yPos : baseline;
       const subX = bandX + groupIndex * (subBandWidth + gap);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -1308,28 +1314,34 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
   }
   return marks;
 }
-function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
+function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales, stackMode = "zero") {
   const marks = [];
   const categoryGroups = groupByField(data, categoryField);
   for (const [category, rows] of categoryGroups) {
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    let cumulativeValue = 0;
+    let categoryTotal = 0;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
-      const value2 = Number(row[valueField] ?? 0);
-      if (!Number.isFinite(value2) || value2 <= 0) continue;
-      const color2 = getColor(scales, groupKey);
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+    let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
+    for (const row of rows) {
+      const groupKey2 = String(row[colorField] ?? "");
+      const rawValue = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+      const value2 = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
+      const color2 = getColor(scales, groupKey2);
       const yTop = yScale(cumulativeValue + value2);
       const yBottom = yScale(cumulativeValue);
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatColumnValue(rawValue)}`
       };
       marks.push({
         type: "rect",
         x: bandX,
-        y: yTop,
+        y: Math.min(yTop, yBottom),
         width: bandwidth,
         height: columnHeight,
         fill: color2,
@@ -2521,6 +2533,26 @@ function stack_default() {
   return stack;
 }
 
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/offset/expand.js
+function expand_default(series, order) {
+  if (!((n = series.length) > 0)) return;
+  for (var i, n, j = 0, m = series[0].length, y2; j < m; ++j) {
+    for (y2 = i = 0; i < n; ++i) y2 += series[i][j][1] || 0;
+    if (y2) for (i = 0; i < n; ++i) series[i][j][1] /= y2;
+  }
+  none_default(series, order);
+}
+
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/offset/silhouette.js
+function silhouette_default(series, order) {
+  if (!((n = series.length) > 0)) return;
+  for (var j = 0, s0 = series[order[0]], n, m = s0.length; j < m; ++j) {
+    for (var i = 0, y2 = 0; i < n; ++i) y2 += series[i][j][1] || 0;
+    s0[j][1] += s0[j][0] = -y2 / 2;
+  }
+  none_default(series, order);
+}
+
 // src/charts/line/curves.ts
 var CURVE_MAP = {
   linear: linear_default,
@@ -2648,7 +2680,9 @@ function computeStackedArea(spec, scales, chartArea) {
     }
     return pivot;
   });
-  const stackGenerator = stack_default().keys(keys).order(none_default2).offset(none_default);
+  const stackProp = yChannel.stack;
+  const offsetFn = stackProp === "normalize" ? expand_default : stackProp === "center" ? silhouette_default : none_default;
+  const stackGenerator = stack_default().keys(keys).order(none_default2).offset(offsetFn);
   const stackedData = stackGenerator(pivotData);
   const yScale = scales.y.scale;
   const marks = [];
@@ -3102,53 +3136,185 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
         dominantBaseline: "central"
       }
     });
-    targetMarkIndices.push(mi);
-  }
-  if (candidates.length === 0) return [];
-  let resolved;
-  if (density === "all") {
-    resolved = candidates.map((c) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: true
-    }));
-  } else {
-    resolved = resolveCollisions5(candidates);
+    targetMarkIndices.push(mi);
+  }
+  if (candidates.length === 0) return [];
+  let resolved;
+  if (density === "all") {
+    resolved = candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  } else {
+    resolved = resolveCollisions5(candidates);
+  }
+  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
+    const label = resolved[i];
+    const mark = targetMarks[i];
+    if (label.visible) {
+      label.connector = {
+        from: { x: label.x, y: label.y },
+        to: { x: mark.centroid.x, y: mark.centroid.y },
+        stroke: _textFill,
+        style: "straight"
+      };
+    }
+  }
+  return resolved;
+}
+
+// src/charts/pie/index.ts
+var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, false);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, true);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+
+// src/charts/post-process.ts
+function computeMarkObstacles(marks, scales) {
+  if (scales.y?.type === "band") {
+    return computeBandRowObstacles(marks, scales);
+  }
+  const obstacles = [];
+  for (const mark of marks) {
+    if (mark.type === "rect") {
+      const rm = mark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === "point") {
+      const pm = mark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2
+      });
+    }
+  }
+  return obstacles;
+}
+function computeBandRowObstacles(marks, scales) {
+  const rows = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    let cy;
+    let left2;
+    let right2;
+    if (mark.type === "point") {
+      const pm = mark;
+      cy = pm.cy;
+      left2 = pm.cx - pm.r;
+      right2 = pm.cx + pm.r;
+    } else if (mark.type === "rect") {
+      const rm = mark;
+      cy = rm.y + rm.height / 2;
+      left2 = rm.x;
+      right2 = rm.x + rm.width;
+    } else {
+      continue;
+    }
+    const key = Math.round(cy);
+    const existing = rows.get(key);
+    if (existing) {
+      existing.minX = Math.min(existing.minX, left2);
+      existing.maxX = Math.max(existing.maxX, right2);
+    } else {
+      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
+    }
+  }
+  const bandScale = scales.y.scale;
+  const bandwidth = bandScale.bandwidth?.() ?? 0;
+  if (bandwidth === 0) return [];
+  const obstacles = [];
+  for (const { minX, maxX, bandY } of rows.values()) {
+    obstacles.push({
+      x: minX,
+      y: bandY - bandwidth / 2,
+      width: maxX - minX,
+      height: bandwidth
+    });
   }
-  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
-    const label = resolved[i];
-    const mark = targetMarks[i];
-    if (label.visible) {
-      label.connector = {
-        from: { x: label.x, y: label.y },
-        to: { x: mark.centroid.x, y: mark.centroid.y },
-        stroke: _textFill,
-        style: "straight"
-      };
+  return obstacles;
+}
+function resolveRendererKey(markType, encoding, markDef) {
+  if (markType === "bar") {
+    const xType = encoding.x?.type;
+    const yType = encoding.y?.type;
+    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
+    if (isVertical) {
+      return "bar:vertical";
+    }
+  } else if (markType === "arc") {
+    const innerRadius = markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      return "arc:donut";
     }
   }
-  return resolved;
+  return markType;
 }
-
-// src/charts/pie/index.ts
-var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computePieMarks(spec, scales, chartArea, strategy, false);
-  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+function getMarkPrimaryValue(mark) {
+  switch (mark.type) {
+    case "rect":
+      return mark.height;
+    // bar height is the primary value encoding
+    case "point":
+      return mark.cy;
+    // y position for scatter
+    case "arc":
+      return mark.endAngle - mark.startAngle;
+    // arc angle extent
+    case "line":
+    case "area":
+      return 0;
+    // series marks don't have individual values
+    default:
+      return 0;
   }
-  return marks;
-};
-var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computePieMarks(spec, scales, chartArea, strategy, true);
-  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+}
+function assignAnimationIndices(marks, animation) {
+  if (!animation?.enabled) return;
+  if (animation.staggerOrder === "value") {
+    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
+    indexed.sort((a, b) => {
+      const av = getMarkPrimaryValue(a.mark);
+      const bv = getMarkPrimaryValue(b.mark);
+      return av - bv;
+    });
+    for (let i = 0; i < indexed.length; i++) {
+      const m = indexed[i].mark;
+      if (m.type === "rect" && m.stackGroup) continue;
+      m.animationIndex = i;
+    }
   }
-  return marks;
-};
+  const groupIndexMap = /* @__PURE__ */ new Map();
+  const groupStackPos = /* @__PURE__ */ new Map();
+  let nextGroupIndex = 0;
+  for (const mark of marks) {
+    if (mark.type === "rect" && mark.stackGroup) {
+      const rect = mark;
+      const group = rect.stackGroup;
+      if (!groupIndexMap.has(group)) {
+        groupIndexMap.set(group, nextGroupIndex++);
+      }
+      rect.animationIndex = groupIndexMap.get(group);
+      const pos = groupStackPos.get(group) ?? 0;
+      rect.stackPos = pos;
+      groupStackPos.set(group, pos + 1);
+    }
+  }
+}
 
 // src/charts/registry.ts
 var renderers = /* @__PURE__ */ new Map();
@@ -6135,7 +6301,7 @@ function normalizeChrome(chrome) {
   };
 }
 function inferFieldType(data, field) {
-  const sampleSize = Math.min(10, data.length);
+  const sampleSize = Math.min(50, data.length);
   let numericCount = 0;
   let dateCount = 0;
   let totalNonNull = 0;
@@ -7714,7 +7880,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     }));
     const shouldThin = scales.x.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
-    let tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
+    let tickAngle = axisConfig?.labelAngle;
     if (tickAngle === void 0 && scales.x.type === "band" && ticks2.length > 1) {
       const bandwidth = scales.x.scale.bandwidth();
       let maxLabelWidth = 0;
@@ -7726,7 +7892,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
         tickAngle = -45;
       }
     }
-    const axisTitle = axisConfig?.title ?? axisConfig?.label;
+    const axisTitle = axisConfig?.title;
     result.x = {
       ticks: ticks2,
       gridlines: axisConfig?.grid ? gridlines : [],
@@ -7756,14 +7922,14 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     } else {
       allTicks = continuousTicks(scales.y, yDensity);
     }
-    const gridlines = allTicks.map((t) => ({
+    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
+    const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
+    const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
     }));
-    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
-    const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
-    const axisTitle = axisConfig?.title ?? axisConfig?.label;
-    const tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
+    const axisTitle = axisConfig?.title;
+    const tickAngle = axisConfig?.labelAngle;
     result.y = {
       ticks: ticks2,
       // Y-axis gridlines are shown by default (standard editorial practice)
@@ -7825,8 +7991,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const isRadial = spec.markType === "arc";
   const encoding = spec.encoding;
   const xAxis = encoding.x?.axis;
-  const hasXAxisLabel = !!xAxis?.label;
-  const xTickAngle = xAxis?.tickAngle;
+  const hasXAxisLabel = !!xAxis?.title;
+  const xTickAngle = xAxis?.labelAngle;
   let xAxisHeight;
   if (isRadial) {
     xAxisHeight = 0;
@@ -8051,6 +8217,12 @@ function uniqueStrings(values) {
   }
   return result;
 }
+function applyCategoricalSort(values, sort) {
+  if (sort === null) return values;
+  const sorted = [...values].sort((a, b) => a.localeCompare(b, void 0, { numeric: true }));
+  if (sort === "descending") sorted.reverse();
+  return sorted;
+}
 function applyContinuousConfig(scale, channel) {
   if (channel.scale?.clamp) {
     scale.clamp(true);
@@ -8212,7 +8384,7 @@ function evenRange(start, end, count) {
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
 function buildBandScale(channel, data, rangeStart, rangeEnd) {
-  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const padding = channel.scale?.padding ?? 0.35;
   const scale = band().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.paddingInner !== void 0) {
@@ -8228,7 +8400,7 @@ function buildBandScale(channel, data, rangeStart, rangeEnd) {
   return { scale, type: "band", channel };
 }
 function buildPointScale(channel, data, rangeStart, rangeEnd) {
-  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const padding = channel.scale?.padding ?? 0.5;
   const scale = point4().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.reverse) {
@@ -8238,7 +8410,8 @@ function buildPointScale(channel, data, rangeStart, rangeEnd) {
   return { scale, type: "point", channel };
 }
 function buildOrdinalColorScale(channel, data, palette) {
-  const values = uniqueStrings(fieldValues(data, channel.field));
+  const explicitDomain = channel.scale?.domain;
+  const values = explicitDomain ? explicitDomain.map(String) : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const scale = ordinal().domain(values).range(palette);
   return { scale, type: "ordinal", channel };
 }
@@ -8316,25 +8489,49 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.x) {
     let xData = data;
+    let xChannel = encoding.x;
     const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
     if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && !xStackDisabled) {
-      const yField = encoding.y?.field;
-      const xField = encoding.x.field;
-      if (yField) {
-        const sums = /* @__PURE__ */ new Map();
-        for (const row of data) {
-          const cat = String(row[yField] ?? "");
-          const val = Number(row[xField] ?? 0);
-          if (Number.isFinite(val) && val > 0) {
-            sums.set(cat, (sums.get(cat) ?? 0) + val);
+      if (encoding.x.stack === "normalize") {
+        xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
+      } else if (encoding.x.stack === "center") {
+        const yField = encoding.y?.field;
+        const xField = encoding.x.field;
+        if (yField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[yField] ?? "");
+            const val = Number(row[xField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
+          }
+          const maxSum = Math.max(...sums.values(), 0);
+          const half = maxSum / 2;
+          xChannel = {
+            ...encoding.x,
+            scale: { ...encoding.x.scale, domain: [-half, half], zero: true }
+          };
+        }
+      } else {
+        const yField = encoding.y?.field;
+        const xField = encoding.x.field;
+        if (yField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[yField] ?? "");
+            const val = Number(row[xField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
           }
+          const maxSum = Math.max(...sums.values(), 0);
+          xData = [...data, { [xField]: maxSum }];
         }
-        const maxSum = Math.max(...sums.values(), 0);
-        xData = [...data, { [xField]: maxSum }];
       }
     }
     result.x = buildPositionalScale(
-      encoding.x,
+      xChannel,
       xData,
       chartArea.x,
       chartArea.x + chartArea.width,
@@ -8344,26 +8541,50 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.y) {
     let yData = data;
+    let yChannel = encoding.y;
     const isVerticalBar = spec.markType === "bar" && (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") && encoding.y.type === "quantitative";
     const yStackDisabled = encoding.y.stack === null || encoding.y.stack === false;
     if ((isVerticalBar || spec.markType === "area") && encoding.color && encoding.y.type === "quantitative" && !yStackDisabled) {
-      const xField = encoding.x?.field;
-      const yField = encoding.y.field;
-      if (xField) {
-        const sums = /* @__PURE__ */ new Map();
-        for (const row of data) {
-          const cat = String(row[xField] ?? "");
-          const val = Number(row[yField] ?? 0);
-          if (Number.isFinite(val) && val > 0) {
-            sums.set(cat, (sums.get(cat) ?? 0) + val);
+      if (encoding.y.stack === "normalize") {
+        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+      } else if (encoding.y.stack === "center") {
+        const xField = encoding.x?.field;
+        const yField = encoding.y.field;
+        if (xField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[xField] ?? "");
+            const val = Number(row[yField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
           }
+          const maxSum = Math.max(...sums.values(), 0);
+          const half = maxSum / 2;
+          yChannel = {
+            ...encoding.y,
+            scale: { ...encoding.y.scale, domain: [-half, half], zero: true }
+          };
+        }
+      } else {
+        const xField = encoding.x?.field;
+        const yField = encoding.y.field;
+        if (xField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[xField] ?? "");
+            const val = Number(row[yField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
+          }
+          const maxSum = Math.max(...sums.values(), 0);
+          yData = [...data, { [yField]: maxSum }];
         }
-        const maxSum = Math.max(...sums.values(), 0);
-        yData = [...data, { [yField]: maxSum }];
       }
     }
     result.y = buildPositionalScale(
-      encoding.y,
+      yChannel,
       yData,
       chartArea.y + chartArea.height,
       chartArea.y,
@@ -10183,10 +10404,16 @@ function formatValue(value2, fieldType, format2) {
   }
   return String(value2);
 }
+function resolveLabel(ch) {
+  return ch.title ?? ch.axis?.title ?? ch.field;
+}
+function resolveFormat(ch) {
+  return ch.format ?? ch.axis?.format;
+}
 function buildExplicitTooltipFields(row, channels) {
   return channels.map((ch) => ({
-    label: ch.axis?.label ?? ch.field,
-    value: formatValue(row[ch.field], ch.type, ch.axis?.format)
+    label: resolveLabel(ch),
+    value: formatValue(row[ch.field], ch.type, resolveFormat(ch))
   }));
 }
 function buildFields(row, encoding, color2) {
@@ -10197,21 +10424,25 @@ function buildFields(row, encoding, color2) {
   const fields = [];
   if (encoding.y) {
     fields.push({
-      label: encoding.y.axis?.label ?? encoding.y.field,
-      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
       color: color2
     });
   }
   if (encoding.x) {
     fields.push({
-      label: encoding.x.axis?.label ?? encoding.x.field,
-      value: formatValue(row[encoding.x.field], encoding.x.type, encoding.x.axis?.format)
+      label: resolveLabel(encoding.x),
+      value: formatValue(row[encoding.x.field], encoding.x.type, resolveFormat(encoding.x))
     });
   }
   if (encoding.size && "field" in encoding.size) {
     fields.push({
-      label: encoding.size.axis?.label ?? encoding.size.field,
-      value: formatValue(row[encoding.size.field], encoding.size.type, encoding.size.axis?.format)
+      label: resolveLabel(encoding.size),
+      value: formatValue(
+        row[encoding.size.field],
+        encoding.size.type,
+        resolveFormat(encoding.size)
+      )
     });
   }
   return fields;
@@ -10264,14 +10495,14 @@ function tooltipsForArc(mark, encoding, markIndex) {
     if (encoding.y) {
       fields.push({
         label: categoryName,
-        value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+        value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
         color: getRepresentativeColor9(mark.fill)
       });
     }
   } else if (encoding.y) {
     fields.push({
-      label: encoding.y.field,
-      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
       color: getRepresentativeColor9(mark.fill)
     });
   }
@@ -10319,6 +10550,93 @@ function computeTooltipDescriptors(spec, marks) {
   return descriptors;
 }
 
+// src/transforms/aggregate.ts
+function computeAggregate(op, values) {
+  if (values.length === 0) return 0;
+  switch (op) {
+    case "count":
+      return values.length;
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "mean": {
+      const sum2 = values.reduce((a, b) => a + b, 0);
+      return sum2 / values.length;
+    }
+    case "median": {
+      const sorted = [...values].sort((a, b) => a - b);
+      const mid = Math.floor(sorted.length / 2);
+      return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+    }
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+    case "variance": {
+      if (values.length < 2) return 0;
+      const mean = values.reduce((a, b) => a + b, 0) / values.length;
+      return values.reduce((a, v) => a + (v - mean) ** 2, 0) / values.length;
+    }
+    case "stdev": {
+      if (values.length < 2) return 0;
+      const m = values.reduce((a, b) => a + b, 0) / values.length;
+      return Math.sqrt(values.reduce((a, v) => a + (v - m) ** 2, 0) / values.length);
+    }
+    case "q1": {
+      const s = [...values].sort((a, b) => a - b);
+      const i = (s.length - 1) * 0.25;
+      const lo = Math.floor(i);
+      const frac = i - lo;
+      return s[lo] + frac * ((s[lo + 1] ?? s[lo]) - s[lo]);
+    }
+    case "q3": {
+      const s = [...values].sort((a, b) => a - b);
+      const i = (s.length - 1) * 0.75;
+      const lo = Math.floor(i);
+      const frac = i - lo;
+      return s[lo] + frac * ((s[lo + 1] ?? s[lo]) - s[lo]);
+    }
+    default:
+      return 0;
+  }
+}
+function groupKey(row, groupby) {
+  return groupby.map((f) => String(row[f] ?? "")).join("\0");
+}
+function runAggregate(data, transform) {
+  const { aggregate, groupby } = transform;
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = groupKey(row, groupby);
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(row);
+    } else {
+      groups.set(key, [row]);
+    }
+  }
+  const result = [];
+  for (const rows of groups.values()) {
+    const outRow = {};
+    for (const field of groupby) {
+      outRow[field] = rows[0][field];
+    }
+    for (const agg of aggregate) {
+      if (agg.op === "distinct") {
+        outRow[agg.as] = new Set(rows.map((r) => r[agg.field])).size;
+        continue;
+      }
+      const values = rows.map((r) => {
+        if (agg.op === "count") return 1;
+        const v = Number(r[agg.field]);
+        return Number.isFinite(v) ? v : NaN;
+      }).filter((v) => !Number.isNaN(v));
+      outRow[agg.as] = computeAggregate(agg.op, values);
+    }
+    result.push(outRow);
+  }
+  return result;
+}
+
 // src/transforms/bin.ts
 function computeStep(extent2, maxbins, nice2) {
   const span = extent2[1] - extent2[0];
@@ -10415,6 +10733,30 @@ function runFilter(data, predicate) {
   return data.filter((datum) => evaluatePredicate(datum, predicate));
 }
 
+// src/transforms/fold.ts
+function runFold(data, transform) {
+  const { fold } = transform;
+  const [keyAs, valueAs] = transform.as ?? ["key", "value"];
+  const foldSet = new Set(fold);
+  const result = [];
+  for (const row of data) {
+    const base = {};
+    for (const [k, v] of Object.entries(row)) {
+      if (!foldSet.has(k)) {
+        base[k] = v;
+      }
+    }
+    for (const field of fold) {
+      result.push({
+        ...base,
+        [keyAs]: field,
+        [valueAs]: row[field]
+      });
+    }
+  }
+  return result;
+}
+
 // src/transforms/timeunit.ts
 function extractTimeUnit(date2, unit2) {
   switch (unit2) {
@@ -10492,6 +10834,10 @@ function runTransforms(data, transforms) {
       result = runCalculate(result, transform);
     } else if ("timeUnit" in transform) {
       result = runTimeUnit(result, transform);
+    } else if ("aggregate" in transform) {
+      result = runAggregate(result, transform);
+    } else if ("fold" in transform) {
+      result = runFold(result, transform);
     }
   }
   return result;
@@ -10524,71 +10870,55 @@ var builtinRenderers = {
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
 }
-function computeMarkObstacles(marks, scales) {
-  if (scales.y?.type === "band") {
-    return computeBandRowObstacles(marks, scales);
-  }
-  const obstacles = [];
-  for (const mark of marks) {
-    if (mark.type === "rect") {
-      const rm = mark;
-      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
-    } else if (mark.type === "point") {
-      const pm = mark;
-      obstacles.push({
-        x: pm.cx - pm.r,
-        y: pm.cy - pm.r,
-        width: pm.r * 2,
-        height: pm.r * 2
-      });
-    }
-  }
-  return obstacles;
-}
-function computeBandRowObstacles(marks, scales) {
-  const rows = /* @__PURE__ */ new Map();
-  for (const mark of marks) {
-    let cy;
-    let left2;
-    let right2;
-    if (mark.type === "point") {
-      const pm = mark;
-      cy = pm.cy;
-      left2 = pm.cx - pm.r;
-      right2 = pm.cx + pm.r;
-    } else if (mark.type === "rect") {
-      const rm = mark;
-      cy = rm.y + rm.height / 2;
-      left2 = rm.x;
-      right2 = rm.x + rm.width;
-    } else {
-      continue;
-    }
-    const key = Math.round(cy);
-    const existing = rows.get(key);
-    if (existing) {
-      existing.minX = Math.min(existing.minX, left2);
-      existing.maxX = Math.max(existing.maxX, right2);
-    } else {
-      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
+function expandEncodingSugar(spec) {
+  const encoding = spec.encoding;
+  if (!encoding) return spec;
+  const generatedTransforms = [];
+  const updatedEncoding = { ...encoding };
+  let changed = false;
+  for (const channel of Object.keys(encoding)) {
+    const ch = encoding[channel];
+    if (!ch || !ch.field) continue;
+    if (ch.bin != null && ch.bin !== false) {
+      const field = ch.field;
+      const outputField = `bin_${field}`;
+      const binTransform = {
+        bin: ch.bin === true ? true : ch.bin,
+        field,
+        as: outputField
+      };
+      generatedTransforms.push(binTransform);
+      const { bin: _bin, ...rest } = ch;
+      updatedEncoding[channel] = { ...rest, field: outputField };
+      changed = true;
+    }
+    const current = updatedEncoding[channel] ?? ch;
+    if (current.timeUnit) {
+      const field = current.field;
+      const unit2 = current.timeUnit;
+      const outputField = `${unit2}_${field}`;
+      const timeUnitTransform = {
+        timeUnit: unit2,
+        field,
+        as: outputField
+      };
+      generatedTransforms.push(timeUnitTransform);
+      const { timeUnit: _tu, ...rest } = current;
+      updatedEncoding[channel] = { ...rest, field: outputField };
+      changed = true;
     }
   }
-  const bandScale = scales.y.scale;
-  const bandwidth = bandScale.bandwidth?.() ?? 0;
-  if (bandwidth === 0) return [];
-  const obstacles = [];
-  for (const { minX, maxX, bandY } of rows.values()) {
-    obstacles.push({
-      x: minX,
-      y: bandY - bandwidth / 2,
-      width: maxX - minX,
-      height: bandwidth
-    });
-  }
-  return obstacles;
+  if (!changed) return spec;
+  const existingTransforms = spec.transform ?? [];
+  return {
+    ...spec,
+    encoding: updatedEncoding,
+    transform: [...generatedTransforms, ...existingTransforms]
+  };
 }
 function compileChart(spec, options) {
-  const { spec: normalized } = compile(spec);
+  const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandEncodingSugar(spec) : spec;
+  const { spec: normalized } = compile(expandedSpec);
   if ("type" in normalized && normalized.type === "table") {
     throw new Error("compileChart received a table spec. Use compileTable instead.");
   }
@@ -10599,16 +10929,16 @@ function compileChart(spec, options) {
     throw new Error("compileChart received a sankey spec. Use compileSankey instead.");
   }
   let chartSpec = normalized;
-  const rawWatermark = spec.watermark;
+  const rawWatermark = expandedSpec.watermark;
   const watermark = rawWatermark !== void 0 ? chartSpec.watermark : options.watermark ?? true;
-  const rawTransforms = spec.transform;
+  const rawTransforms = expandedSpec.transform;
   if (rawTransforms && rawTransforms.length > 0) {
     chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
   }
   const breakpoint = getBreakpoint(options.width);
   const heightClass = getHeightClass(options.height);
   const strategy = getLayoutStrategy(breakpoint, heightClass);
-  const rawSpec = spec;
+  const rawSpec = expandedSpec;
   const overrides = rawSpec.overrides;
   if (overrides?.[breakpoint]) {
     const bp = overrides[breakpoint];
@@ -10719,20 +11049,11 @@ function compileChart(spec, options) {
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
-  let rendererKey = renderSpec.markType;
-  if (rendererKey === "bar") {
-    const xType = renderSpec.encoding.x?.type;
-    const yType = renderSpec.encoding.y?.type;
-    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
-    if (isVertical) {
-      rendererKey = "bar:vertical";
-    }
-  } else if (rendererKey === "arc") {
-    const innerRadius = renderSpec.markDef.innerRadius;
-    if (innerRadius && innerRadius > 0) {
-      rendererKey = "arc:donut";
-    }
-  }
+  const rendererKey = resolveRendererKey(
+    renderSpec.markType,
+    renderSpec.encoding,
+    renderSpec.markDef
+  );
   const renderer = getChartRenderer(rendererKey);
   const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
   const obstacles = [];
@@ -10780,37 +11101,7 @@ function compileChart(spec, options) {
     },
     chartSpec.data
   );
-  if (resolvedAnimation?.enabled && resolvedAnimation.staggerOrder === "value") {
-    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
-    indexed.sort((a, b) => {
-      const av = getMarkPrimaryValue(a.mark);
-      const bv = getMarkPrimaryValue(b.mark);
-      return av - bv;
-    });
-    for (let i = 0; i < indexed.length; i++) {
-      const m = indexed[i].mark;
-      if (m.type === "rect" && m.stackGroup) continue;
-      m.animationIndex = i;
-    }
-  }
-  if (resolvedAnimation?.enabled) {
-    const groupIndexMap = /* @__PURE__ */ new Map();
-    const groupStackPos = /* @__PURE__ */ new Map();
-    let nextGroupIndex = 0;
-    for (const mark of marks) {
-      if (mark.type === "rect" && mark.stackGroup) {
-        const rect = mark;
-        const group = rect.stackGroup;
-        if (!groupIndexMap.has(group)) {
-          groupIndexMap.set(group, nextGroupIndex++);
-        }
-        rect.animationIndex = groupIndexMap.get(group);
-        const pos = groupStackPos.get(group) ?? 0;
-        rect.stackPos = pos;
-        groupStackPos.set(group, pos + 1);
-      }
-    }
-  }
+  assignAnimationIndices(marks, resolvedAnimation);
   return {
     area: chartArea,
     chrome: dims.chrome,
@@ -10837,25 +11128,6 @@ function compileChart(spec, options) {
     watermark
   };
 }
-function getMarkPrimaryValue(mark) {
-  switch (mark.type) {
-    case "rect":
-      return mark.height;
-    // bar height is the primary value encoding
-    case "point":
-      return mark.cy;
-    // y position for scatter
-    case "arc":
-      return mark.endAngle - mark.startAngle;
-    // arc angle extent
-    case "line":
-    case "area":
-      return 0;
-    // series marks don't have individual values
-    default:
-      return 0;
-  }
-}
 function compileLayer(spec, options) {
   const leaves = flattenLayers(spec);
   if (leaves.length === 0) {