@opendata-ai/openchart-engine 6.12.0 → 6.15.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,76 +26,11 @@ var DARK_TEXT_FILL = "#d1d5db";
 var LIGHT_REFLINE_STROKE = "#888888";
 var DARK_REFLINE_STROKE = "#9ca3af";
 var ANCHOR_OFFSET = 8;
-function interpolateInDomain(numValue, domain, positionOf) {
-  if (domain.length < 2) return null;
-  const nums = domain.map(Number);
-  if (!nums.every(Number.isFinite)) return null;
-  const sorted = nums.map((n, i) => ({ n, i })).sort((a, b) => a.n - b.n);
-  let lower = 0;
-  let upper = sorted.length - 1;
-  for (let i = 0; i < sorted.length; i++) {
-    if (sorted[i].n <= numValue) lower = i;
-    if (sorted[i].n >= numValue) {
-      upper = i;
-      break;
-    }
-  }
-  const lowerPos = positionOf(domain[sorted[lower].i]);
-  const upperPos = positionOf(domain[sorted[upper].i]);
-  if (lower === upper) return lowerPos;
-  const t = (numValue - sorted[lower].n) / (sorted[upper].n - sorted[lower].n);
-  return lowerPos + t * (upperPos - lowerPos);
-}
-function resolvePosition(value2, scale) {
-  if (!scale) return null;
-  const s = scale.scale;
-  const type = scale.type;
-  if (type === "time") {
-    const date2 = new Date(String(value2));
-    if (Number.isNaN(date2.getTime())) return null;
-    return s(date2);
-  }
-  if (type === "linear" || type === "log") {
-    const num = typeof value2 === "number" ? value2 : Number(value2);
-    if (!Number.isFinite(num)) return null;
-    return s(num);
-  }
-  if (type === "band") {
-    const bandScale = s;
-    const strValue2 = String(value2);
-    const pos = bandScale(strValue2);
-    if (pos !== void 0) return pos + (bandScale.bandwidth?.() ?? 0) / 2;
-    const bw = bandScale.bandwidth?.() ?? 0;
-    return interpolateInDomain(
-      Number(strValue2),
-      bandScale.domain(),
-      (entry) => (bandScale(entry) ?? 0) + bw / 2
-    );
-  }
-  const strValue = String(value2);
-  const directResult = s(strValue);
-  if (directResult !== void 0) return directResult;
-  if (type === "point" || type === "ordinal") {
-    const domain = s.domain();
-    return interpolateInDomain(
-      Number(strValue),
-      domain,
-      (entry) => s(entry) ?? 0
-    );
-  }
-  return null;
-}
-function makeAnnotationLabelStyle(fontSize, fontWeight, fill, isDark) {
-  const defaultFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
-  return {
-    fontFamily: "Inter, system-ui, sans-serif",
-    fontSize: fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE,
-    fontWeight: fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT,
-    fill: fill ?? defaultFill,
-    lineHeight: DEFAULT_LINE_HEIGHT,
-    textAnchor: "start"
-  };
-}
+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;
@@ -149,230 +86,92 @@ function computeConnectorOrigin(labelX, labelY, text, fontSize, fontWeight, targ
   }
   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);
-  if (px === null || py === null) return null;
-  const defaultTextFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
-  const labelStyle = makeAnnotationLabelStyle(
-    annotation.fontSize,
-    annotation.fontWeight,
-    annotation.fill ?? defaultTextFill,
-    isDark
-  );
-  const anchorDelta = computeAnchorOffset(annotation.anchor, px, py, chartArea);
-  const finalDelta = applyOffset(anchorDelta, annotation.offset);
-  const labelX = px + finalDelta.dx;
-  const labelY = py + finalDelta.dy;
-  const showConnector = annotation.connector !== false;
-  const connectorStyle = annotation.connector === "curve" ? "curve" : "straight";
-  const fontSize = annotation.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-  const fontWeight = annotation.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-  const { x: connectorFromX, y: connectorFromY } = computeConnectorOrigin(
-    labelX,
-    labelY,
-    annotation.text,
+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,
-    px,
-    py,
-    connectorStyle
+    targetX,
+    targetY,
+    connStyle
   );
-  const baseFrom = { x: connectorFromX, y: connectorFromY };
-  const baseTo = { x: px, y: py };
-  const adjustedFrom = {
-    x: baseFrom.x + (annotation.connectorOffset?.from?.dx ?? 0),
-    y: baseFrom.y + (annotation.connectorOffset?.from?.dy ?? 0)
-  };
-  const adjustedToRaw = {
-    x: baseTo.x + (annotation.connectorOffset?.to?.dx ?? 0),
-    y: baseTo.y + (annotation.connectorOffset?.to?.dy ?? 0)
-  };
-  const GAP = 4;
-  const cdx = adjustedToRaw.x - adjustedFrom.x;
-  const cdy = adjustedToRaw.y - adjustedFrom.y;
-  const dist = Math.sqrt(cdx * cdx + cdy * cdy);
-  const adjustedTo = dist > GAP * 2 ? { x: adjustedToRaw.x - cdx / dist * GAP, y: adjustedToRaw.y - cdy / dist * GAP } : adjustedToRaw;
-  const label = {
-    text: annotation.text,
-    x: labelX,
-    y: labelY,
-    style: labelStyle,
-    visible: true,
-    connector: showConnector ? {
-      from: adjustedFrom,
-      to: adjustedTo,
-      stroke: annotation.stroke ?? "#999999",
-      style: connectorStyle
-    } : void 0,
-    background: annotation.background
-  };
-  return {
-    type: "text",
-    id: annotation.id,
-    label,
-    stroke: annotation.stroke,
-    fill: annotation.fill,
-    opacity: annotation.opacity,
-    zIndex: annotation.zIndex
-  };
+  return { ...connector, from: newFrom };
 }
-function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
-  let x2 = chartArea.x;
-  let y2 = chartArea.y;
-  let width = chartArea.width;
-  let height = chartArea.height;
-  if (annotation.x1 !== void 0 && annotation.x2 !== void 0) {
-    const x1px = resolvePosition(annotation.x1, scales.x);
-    const x2px = resolvePosition(annotation.x2, scales.x);
-    if (x1px === null || x2px === null) return null;
-    x2 = Math.min(x1px, x2px);
-    width = Math.abs(x2px - x1px);
-  }
-  if (annotation.y1 !== void 0 && annotation.y2 !== void 0) {
-    const y1px = resolvePosition(annotation.y1, scales.y);
-    const y2px = resolvePosition(annotation.y2, scales.y);
-    if (y1px === null || y2px === null) return null;
-    y2 = Math.min(y1px, y2px);
-    height = Math.abs(y2px - y1px);
-  }
-  const rect = { x: x2, y: y2, width, height };
-  let label;
-  if (annotation.label) {
-    const anchor = annotation.labelAnchor ?? "top";
-    const centered = anchor === "top" || anchor === "bottom" || anchor === "auto";
-    const baseDx = centered ? 0 : anchor === "right" ? -4 : 4;
-    const baseDy = 14;
-    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
-    const style = makeAnnotationLabelStyle(11, 500, void 0, isDark);
-    if (centered) {
-      style.textAnchor = "middle";
-    } else if (anchor === "right") {
-      style.textAnchor = "end";
+
+// src/annotations/position.ts
+function interpolateInDomain(numValue, domain, positionOf) {
+  if (domain.length < 2) return null;
+  const nums = domain.map(Number);
+  if (!nums.every(Number.isFinite)) return null;
+  const sorted = nums.map((n, i) => ({ n, i })).sort((a, b) => a.n - b.n);
+  let lower = 0;
+  let upper = sorted.length - 1;
+  for (let i = 0; i < sorted.length; i++) {
+    if (sorted[i].n <= numValue) lower = i;
+    if (sorted[i].n >= numValue) {
+      upper = i;
+      break;
     }
-    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
-  };
+  const lowerPos = positionOf(domain[sorted[lower].i]);
+  const upperPos = positionOf(domain[sorted[upper].i]);
+  if (lower === upper) return lowerPos;
+  const t = (numValue - sorted[lower].n) / (sorted[upper].n - sorted[lower].n);
+  return lowerPos + t * (upperPos - lowerPos);
 }
-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;
+function resolvePosition(value2, scale) {
+  if (!scale) return null;
+  const s = scale.scale;
+  const type = scale.type;
+  if (type === "time") {
+    const date2 = new Date(String(value2));
+    if (Number.isNaN(date2.getTime())) return null;
+    return s(date2);
   }
-  let strokeDasharray;
-  if (annotation.style === "dashed" || annotation.style === void 0) {
-    strokeDasharray = DEFAULT_REFLINE_DASH;
-  } else if (annotation.style === "dotted") {
-    strokeDasharray = "2 2";
+  if (type === "linear" || type === "log") {
+    const num = typeof value2 === "number" ? value2 : Number(value2);
+    if (!Number.isFinite(num)) return null;
+    return s(num);
   }
-  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
-    };
+  if (type === "band") {
+    const bandScale = s;
+    const strValue2 = String(value2);
+    const pos = bandScale(strValue2);
+    if (pos !== void 0) return pos + (bandScale.bandwidth?.() ?? 0) / 2;
+    const bw = bandScale.bandwidth?.() ?? 0;
+    return interpolateInDomain(
+      Number(strValue2),
+      bandScale.domain(),
+      (entry) => (bandScale(entry) ?? 0) + bw / 2
+    );
   }
-  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);
+  const strValue = String(value2);
+  const directResult = s(strValue);
+  if (directResult !== void 0) return directResult;
+  if (type === "point" || type === "ordinal") {
+    const domain = s.domain();
+    return interpolateInDomain(
+      Number(strValue),
+      domain,
+      (entry) => s(entry) ?? 0
+    );
+  }
+  return null;
 }
-var NUDGE_PADDING = 6;
+
+// src/annotations/collisions.ts
 function generateNudgeCandidates(selfBounds, obstacles, padding) {
   const candidates = [];
   for (const obs of obstacles) {
@@ -403,28 +202,11 @@ function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, ch
   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
+      connector: recomputeConnector({ ...annotation.label, x: newLabelX, y: newLabelY }, px, py)
     };
     const candidateBounds = estimateLabelBounds(candidateLabel);
     const stillCollides = obstacles.some(
@@ -477,28 +259,15 @@ function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartAr
             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
+                connector: recomputeConnector(
+                  { ...annotation.label, x: newLabelX, y: newLabelY },
+                  px,
+                  py
+                )
               };
               break;
             }
@@ -509,7 +278,6 @@ function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartAr
     placedBounds.push(estimateLabelBounds(annotation.label));
   }
 }
-var CLAMP_MARGIN = 4;
 function clampAnnotationsToBounds(annotations, svgWidth, svgHeight) {
   for (const annotation of annotations) {
     if (annotation.type !== "text" || !annotation.label) continue;
@@ -528,34 +296,259 @@ function clampAnnotationsToBounds(annotations, svgWidth, svgHeight) {
     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 };
+    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 {
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSize: fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE,
+    fontWeight: fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT,
+    fill: fill ?? defaultFill,
+    lineHeight: DEFAULT_LINE_HEIGHT,
+    textAnchor: "start"
+  };
+}
+function resolveTextAnnotation(annotation, scales, chartArea, isDark) {
+  const px = resolvePosition(annotation.x, scales.x);
+  const py = resolvePosition(annotation.y, scales.y);
+  if (px === null || py === null) return null;
+  const defaultTextFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
+  const labelStyle = makeAnnotationLabelStyle(
+    annotation.fontSize,
+    annotation.fontWeight,
+    annotation.fill ?? defaultTextFill,
+    isDark
+  );
+  const anchorDelta = computeAnchorOffset(annotation.anchor, px, py, chartArea);
+  const finalDelta = applyOffset(anchorDelta, annotation.offset);
+  const labelX = px + finalDelta.dx;
+  const labelY = py + finalDelta.dy;
+  const showConnector = annotation.connector !== false;
+  const connectorStyle = annotation.connector === "curve" ? "curve" : "straight";
+  const fontSize = annotation.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const fontWeight = annotation.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+  const { x: connectorFromX, y: connectorFromY } = computeConnectorOrigin(
+    labelX,
+    labelY,
+    annotation.text,
+    fontSize,
+    fontWeight,
+    px,
+    py,
+    connectorStyle
+  );
+  const baseFrom = { x: connectorFromX, y: connectorFromY };
+  const baseTo = { x: px, y: py };
+  const adjustedFrom = {
+    x: baseFrom.x + (annotation.connectorOffset?.from?.dx ?? 0),
+    y: baseFrom.y + (annotation.connectorOffset?.from?.dy ?? 0)
+  };
+  const adjustedToRaw = {
+    x: baseTo.x + (annotation.connectorOffset?.to?.dx ?? 0),
+    y: baseTo.y + (annotation.connectorOffset?.to?.dy ?? 0)
+  };
+  const GAP = 4;
+  const cdx = adjustedToRaw.x - adjustedFrom.x;
+  const cdy = adjustedToRaw.y - adjustedFrom.y;
+  const dist = Math.sqrt(cdx * cdx + cdy * cdy);
+  const adjustedTo = dist > GAP * 2 ? { x: adjustedToRaw.x - cdx / dist * GAP, y: adjustedToRaw.y - cdy / dist * GAP } : adjustedToRaw;
+  const label = {
+    text: annotation.text,
+    x: labelX,
+    y: labelY,
+    style: labelStyle,
+    visible: true,
+    connector: showConnector ? {
+      from: adjustedFrom,
+      to: adjustedTo,
+      stroke: annotation.stroke ?? "#999999",
+      style: connectorStyle
+    } : void 0,
+    background: annotation.background
+  };
+  return {
+    type: "text",
+    id: annotation.id,
+    label,
+    stroke: annotation.stroke,
+    fill: annotation.fill,
+    opacity: annotation.opacity,
+    zIndex: annotation.zIndex
+  };
+}
+
+// src/annotations/resolve-range.ts
+function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
+  let x2 = chartArea.x;
+  let y2 = chartArea.y;
+  let width = chartArea.width;
+  let height = chartArea.height;
+  if (annotation.x1 !== void 0 && annotation.x2 !== void 0) {
+    const x1px = resolvePosition(annotation.x1, scales.x);
+    const x2px = resolvePosition(annotation.x2, scales.x);
+    if (x1px === null || x2px === null) return null;
+    x2 = Math.min(x1px, x2px);
+    width = Math.abs(x2px - x1px);
+  }
+  if (annotation.y1 !== void 0 && annotation.y2 !== void 0) {
+    const y1px = resolvePosition(annotation.y1, scales.y);
+    const y2px = resolvePosition(annotation.y2, scales.y);
+    if (y1px === null || y2px === null) return null;
+    y2 = Math.min(y1px, y2px);
+    height = Math.abs(y2px - y1px);
+  }
+  const rect = { x: x2, y: y2, width, height };
+  let label;
+  if (annotation.label) {
+    const anchor = annotation.labelAnchor ?? "top";
+    const centered = anchor === "top" || anchor === "bottom" || anchor === "auto";
+    const baseDx = centered ? 0 : anchor === "right" ? -4 : 4;
+    const baseDy = 14;
+    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
+    const style = makeAnnotationLabelStyle(11, 500, void 0, isDark);
+    if (centered) {
+      style.textAnchor = "middle";
+    } else if (anchor === "right") {
+      style.textAnchor = "end";
+    }
+    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
+  };
+}
+
+// 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",
@@ -967,11 +968,17 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 
 // src/charts/bar/labels.ts
 import {
+  abbreviateNumber as abbreviateNumber2,
   buildD3Formatter,
   estimateTextWidth as estimateTextWidth2,
+  formatNumber as formatNumber2,
   getRepresentativeColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
+function formatBarValue2(value2) {
+  if (Math.abs(value2) >= 1e3) return abbreviateNumber2(value2);
+  return formatNumber2(value2);
+}
 var SUFFIX_MULTIPLIERS = {
   K: 1e3,
   M: 1e6,
@@ -979,7 +986,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,27 +995,39 @@ 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;
 var LABEL_FONT_WEIGHT = 600;
 var LABEL_PADDING = 6;
 var MIN_WIDTH_FOR_INSIDE_LABEL = 40;
-function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix) {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
   const candidates = [];
   const fitsInSegment = [];
   const formatter = buildD3Formatter(labelFormat);
   for (const mark of targetMarks) {
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(":");
-    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!rawValue) continue;
-    let valuePart = rawValue;
-    if (formatter) {
-      const num = parseDisplayNumber(rawValue);
-      if (!Number.isNaN(num)) valuePart = formatter(num);
+    let valuePart;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatBarValue2(rawNum);
+    } else {
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(":");
+      const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+      if (!rawValue) continue;
+      if (formatter) {
+        const num = parseDisplayNumber(rawValue);
+        valuePart = !Number.isNaN(num) ? formatter(num) : rawValue;
+      } else {
+        valuePart = rawValue;
+      }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
     const textWidth = estimateTextWidth2(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
@@ -1093,12 +1112,14 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
 // src/charts/bar/index.ts
 var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
+  const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labels = computeBarLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
-    spec.labels.prefix
+    spec.labels.prefix,
+    valueField
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -1107,11 +1128,11 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/column/compute.ts
-import { abbreviateNumber as abbreviateNumber2, formatNumber as formatNumber2, isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
+import { abbreviateNumber as abbreviateNumber3, formatNumber as formatNumber3, isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
 var MIN_COLUMN_HEIGHT = 1;
 function formatColumnValue(value2) {
-  if (Math.abs(value2) >= 1e3) return abbreviateNumber2(value2);
-  return formatNumber2(value2);
+  if (Math.abs(value2) >= 1e3) return abbreviateNumber3(value2);
+  return formatNumber3(value2);
 }
 function computeColumnMarks(spec, scales, _chartArea, _strategy) {
   const encoding = spec.encoding;
@@ -1149,6 +1170,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 +1180,8 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
         yScale,
         bandwidth,
         baseline,
-        scales
+        scales,
+        stackMode
       );
     }
     return computeColoredColumns(
@@ -1236,13 +1259,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 +1303,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 +1331,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,
@@ -1347,28 +1376,43 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
 
 // src/charts/column/labels.ts
 import {
+  abbreviateNumber as abbreviateNumber4,
   buildD3Formatter as buildD3Formatter2,
   estimateTextWidth as estimateTextWidth3,
+  formatNumber as formatNumber4,
   getRepresentativeColor as getRepresentativeColor2,
   resolveCollisions as resolveCollisions2
 } from "@opendata-ai/openchart-core";
+function formatColumnValue2(value2) {
+  if (Math.abs(value2) >= 1e3) return abbreviateNumber4(value2);
+  return formatNumber4(value2);
+}
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
 var LABEL_OFFSET_Y = 6;
-function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix) {
+function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
   const formatter = buildD3Formatter2(labelFormat);
   const candidates = [];
   for (const mark of targetMarks) {
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(":");
-    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!rawValue) continue;
-    let valuePart = rawValue;
-    if (formatter) {
-      const num = Number(rawValue.replace(/[^0-9.-]/g, ""));
-      if (!Number.isNaN(num)) valuePart = formatter(num);
+    let valuePart;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatColumnValue2(rawNum);
+    } else {
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(":");
+      const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+      if (!rawValue) continue;
+      if (formatter) {
+        const num = Number(rawValue.replace(/[^0-9.-]/g, ""));
+        valuePart = !Number.isNaN(num) ? formatter(num) : rawValue;
+      } else {
+        valuePart = rawValue;
+      }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
     const numericValue = parseFloat(valuePart);
@@ -1411,12 +1455,14 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
 // src/charts/column/index.ts
 var columnRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeColumnMarks(spec, scales, chartArea, strategy);
+  const valueField = spec.encoding?.y && "field" in spec.encoding.y ? spec.encoding.y.field : void 0;
   const labels = computeColumnLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
-    spec.labels.prefix
+    spec.labels.prefix,
+    valueField
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -1574,22 +1620,42 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
 
 // src/charts/dot/labels.ts
 import {
+  abbreviateNumber as abbreviateNumber5,
+  buildD3Formatter as buildD3Formatter3,
   estimateTextWidth as estimateTextWidth4,
+  formatNumber as formatNumber5,
   getRepresentativeColor as getRepresentativeColor3,
   resolveCollisions as resolveCollisions3
 } from "@opendata-ai/openchart-core";
+function formatDotValue(value2) {
+  if (Math.abs(value2) >= 1e3) return abbreviateNumber5(value2);
+  return formatNumber5(value2);
+}
 var LABEL_FONT_SIZE3 = 11;
 var LABEL_FONT_WEIGHT3 = 600;
 var LABEL_OFFSET_X = 10;
-function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix) {
+function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix, labelFormat, valueField) {
   if (density === "none") return [];
   const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const formatter = buildD3Formatter3(labelFormat);
   const candidates = [];
   for (const mark of targetMarks) {
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(":");
-    let valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
-    if (!valuePart) continue;
+    let valuePart;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatDotValue(rawNum);
+    } else {
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(":");
+      valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+      if (!valuePart) continue;
+      if (formatter) {
+        const num = Number(valuePart.replace(/[^0-9.-]/g, ""));
+        if (!Number.isNaN(num)) valuePart = formatter(num);
+      }
+    }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
     const textWidth = estimateTextWidth4(valuePart, LABEL_FONT_SIZE3, LABEL_FONT_WEIGHT3);
     const textHeight = LABEL_FONT_SIZE3 * 1.2;
@@ -1628,7 +1694,15 @@ function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix) {
 var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const marks = computeDotMarks(spec, scales, chartArea, strategy);
   const pointMarks = marks.filter((m) => m.type === "point");
-  const labels = computeDotLabels(pointMarks, chartArea, spec.labels.density, spec.labels.prefix);
+  const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
+  const labels = computeDotLabels(
+    pointMarks,
+    chartArea,
+    spec.labels.density,
+    spec.labels.prefix,
+    spec.labels.format,
+    valueField
+  );
   let labelIdx = 0;
   for (const mark of marks) {
     if (mark.type === "point" && labelIdx < labels.length) {
@@ -1639,6 +1713,9 @@ var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
   return marks;
 };
 
+// src/charts/line/index.ts
+import { getRepresentativeColor as getRepresentativeColor6 } from "@opendata-ai/openchart-core";
+
 // src/charts/line/area.ts
 import { getRepresentativeColor as getRepresentativeColor4 } from "@opendata-ai/openchart-core";
 
@@ -2521,6 +2598,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,
@@ -2565,7 +2662,7 @@ function computeSingleArea(spec, scales, _chartArea) {
   const marks = [];
   for (const [seriesKey, rows] of groups) {
     const color2 = getColor(scales, seriesKey);
-    const sortedRows = sortByField(rows, xChannel.field);
+    const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
     const validPoints = [];
     for (const row of sortedRows) {
       const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
@@ -2614,7 +2711,7 @@ function computeStackedArea(spec, scales, chartArea) {
   if (!xChannel || !yChannel || !scales.x || !scales.y || !colorField) {
     return computeSingleArea(spec, scales, chartArea);
   }
-  const sortedData = sortByField(spec.data, xChannel.field);
+  const sortedData = xChannel.type === "nominal" || xChannel.type === "ordinal" ? spec.data : sortByField(spec.data, xChannel.field);
   const seriesKeys = /* @__PURE__ */ new Set();
   const xValueSet = /* @__PURE__ */ new Set();
   const rowsByXSeries = /* @__PURE__ */ new Map();
@@ -2648,7 +2745,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 = [];
@@ -2729,7 +2828,7 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
   for (const [seriesKey, rows] of groups) {
     const color2 = isSequentialColor ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField)) : getColor(scales, seriesKey);
     const strokeColor = getRepresentativeColor5(color2);
-    const sortedRows = sortByField(rows, xChannel.field);
+    const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
     const pointsWithData = [];
     const segments = [];
     let currentSegment = [];
@@ -2917,9 +3016,24 @@ var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 var areaRenderer = (spec, scales, chartArea, strategy, _theme) => {
   const areas = computeAreaMarks(spec, scales, chartArea);
-  const lines = computeLineMarks(spec, scales, chartArea, strategy);
+  const encoding = spec.encoding;
+  const hasColor = !!(encoding.color && "field" in encoding.color);
+  const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy);
   return [...areas, ...lines];
 };
+function linesFromAreas(areas) {
+  return areas.map((a) => ({
+    type: "line",
+    points: a.topPoints,
+    path: a.topPath,
+    stroke: getRepresentativeColor6(a.fill),
+    strokeWidth: a.strokeWidth ?? 1,
+    seriesKey: a.seriesKey,
+    data: a.data,
+    dataPoints: a.dataPoints,
+    aria: { label: `${a.seriesKey ?? "Series"}: line with ${a.topPoints.length} data points` }
+  }));
+}
 
 // src/charts/pie/compute.ts
 import { isConditionalDef, isGradientDef as isGradientDef3 } from "@opendata-ai/openchart-core";
@@ -3129,26 +3243,158 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
       };
     }
   }
-  return resolved;
+  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
+    });
+  }
+  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 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();
@@ -3163,7 +3409,7 @@ function clearRenderers() {
 }
 
 // src/charts/rule/index.ts
-import { getRepresentativeColor as getRepresentativeColor6 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor7 } from "@opendata-ai/openchart-core";
 function computeRuleMarks(spec, scales, chartArea) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -3206,7 +3452,7 @@ function computeRuleMarks(spec, scales, chartArea) {
       const y2Val = scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]);
       if (y2Val != null) y2 = y2Val;
     }
-    const color2 = getRepresentativeColor6(
+    const color2 = getRepresentativeColor7(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const strokeDashEncoding = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
@@ -6015,7 +6261,7 @@ var scatterRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/text/index.ts
-import { getRepresentativeColor as getRepresentativeColor7 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor8 } from "@opendata-ai/openchart-core";
 function computeTextMarks(spec, scales) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -6041,7 +6287,7 @@ function computeTextMarks(spec, scales) {
     }
     const text = String(row[textChannel.field] ?? "");
     if (!text) continue;
-    const color2 = getRepresentativeColor7(
+    const color2 = getRepresentativeColor8(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const fontSize = sizeEncoding ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12)) : 12;
@@ -6068,7 +6314,7 @@ var textRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
 };
 
 // src/charts/tick/index.ts
-import { getRepresentativeColor as getRepresentativeColor8 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor9 } from "@opendata-ai/openchart-core";
 var DEFAULT_TICK_LENGTH = 18;
 function computeTickMarks(spec, scales, _chartArea) {
   const encoding = spec.encoding;
@@ -6084,7 +6330,7 @@ function computeTickMarks(spec, scales, _chartArea) {
     const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
     const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
     if (xVal == null || yVal == null) continue;
-    const color2 = getRepresentativeColor8(
+    const color2 = getRepresentativeColor9(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const aria = {
@@ -6135,7 +6381,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;
@@ -7515,16 +7761,16 @@ var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes.ts
 import {
-  abbreviateNumber as abbreviateNumber3,
-  buildD3Formatter as buildD3Formatter3,
+  abbreviateNumber as abbreviateNumber6,
+  buildD3Formatter as buildD3Formatter4,
   buildTemporalFormatter,
   estimateTextWidth as estimateTextWidth7,
   formatDate,
-  formatNumber as formatNumber3
+  formatNumber as formatNumber6
 } from "@opendata-ai/openchart-core";
 var TICK_COUNTS = {
-  full: 8,
-  reduced: 5,
+  full: 10,
+  reduced: 7,
   minimal: 3
 };
 var HEIGHT_MINIMAL_THRESHOLD = 120;
@@ -7637,11 +7883,11 @@ function formatTickLabel(value2, resolvedScale) {
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value2;
     if (formatStr) {
-      const fmt = buildD3Formatter3(formatStr);
+      const fmt = buildD3Formatter4(formatStr);
       if (fmt) return fmt(num);
     }
-    if (Math.abs(num) >= 1e3) return abbreviateNumber3(num);
-    return formatNumber3(num);
+    if (Math.abs(num) >= 1e3) return abbreviateNumber6(num);
+    return formatNumber6(num);
   }
   return String(value2);
 }
@@ -7714,7 +7960,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 +7972,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 +8002,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 +8071,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 +8297,12 @@ function uniqueStrings(values) {
   }
   return result;
 }
+function applyCategoricalSort(values, sort) {
+  if (!sort) 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);
@@ -8064,7 +8316,7 @@ function buildTimeScale(channel, data, rangeStart, rangeEnd) {
   const values = parseDates(fieldValues(data, channel.field));
   const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
   const scale = time().domain(domain).range([rangeStart, rangeEnd]);
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8074,7 +8326,7 @@ function buildUtcScale(channel, data, rangeStart, rangeEnd) {
   const values = parseDates(fieldValues(data, channel.field));
   const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
   const scale = utcTime().domain(domain).range([rangeStart, rangeEnd]);
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8097,7 +8349,7 @@ function buildLinearScale(channel, data, rangeStart, rangeEnd) {
     }
   }
   const scale = linear2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8111,7 +8363,7 @@ function buildLogScale(channel, data, rangeStart, rangeEnd) {
   if (channel.scale?.base !== void 0) {
     scale.base(channel.scale.base);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8135,7 +8387,7 @@ function buildPowScale(channel, data, rangeStart, rangeEnd) {
   if (channel.scale?.exponent !== void 0) {
     scale.exponent(channel.scale.exponent);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8156,7 +8408,7 @@ function buildSqrtScale(channel, data, rangeStart, rangeEnd) {
     }
   }
   const scale = sqrt2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8180,7 +8432,7 @@ function buildSymlogScale(channel, data, rangeStart, rangeEnd) {
   if (channel.scale?.constant !== void 0) {
     scale.constant(channel.scale.constant);
   }
-  if (channel.scale?.nice !== false) {
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
   }
   applyContinuousConfig(scale, channel);
@@ -8212,7 +8464,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 +8480,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 +8490,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 +8569,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 +8621,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,
@@ -8517,7 +8818,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
       1,
       Math.floor((maxLegendHeight - LEGEND_PADDING * 2) / (entryHeight + 4))
     );
-    const maxEntries = spec.legend?.symbolLimit != null ? Math.min(Math.max(1, spec.legend.symbolLimit), maxFromSpace) : maxFromSpace;
+    const maxEntries = spec.legend?.symbolLimit != null ? Math.max(1, spec.legend.symbolLimit) : maxFromSpace;
     if (entries.length > maxEntries) {
       entries = truncateEntries(entries, maxEntries);
     }
@@ -8592,10 +8893,10 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
 // src/sankey/compile-sankey.ts
 import {
   adaptTheme as adaptTheme2,
-  buildD3Formatter as buildD3Formatter4,
+  buildD3Formatter as buildD3Formatter5,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth10,
-  formatNumber as formatNumber4,
+  formatNumber as formatNumber7,
   resolveTheme as resolveTheme2
 } from "@opendata-ai/openchart-core";
 
@@ -9449,10 +9750,10 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
 }
 function formatFlowValue(value2, valueFormat) {
   if (valueFormat) {
-    const fmt = buildD3Formatter4(valueFormat);
+    const fmt = buildD3Formatter5(valueFormat);
     if (fmt) return fmt(value2);
   }
-  return formatNumber4(value2);
+  return formatNumber7(value2);
 }
 function buildTooltipDescriptors(nodes, links, valueFormat) {
   const descriptors = /* @__PURE__ */ new Map();
@@ -9629,7 +9930,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 }
 
 // src/tables/format-cells.ts
-import { buildD3Formatter as buildD3Formatter5, formatDate as formatDate2, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
+import { buildD3Formatter as buildD3Formatter6, formatDate as formatDate2, formatNumber as formatNumber8 } from "@opendata-ai/openchart-core";
 function isNumericValue(value2) {
   if (typeof value2 === "number") return Number.isFinite(value2);
   return false;
@@ -9648,7 +9949,7 @@ function formatCell(value2, column) {
     };
   }
   if (column.format && isNumericValue(value2)) {
-    const formatter = buildD3Formatter5(column.format);
+    const formatter = buildD3Formatter6(column.format);
     if (formatter) {
       return {
         value: value2,
@@ -9660,7 +9961,7 @@ function formatCell(value2, column) {
   if (isNumericValue(value2)) {
     return {
       value: value2,
-      formattedValue: formatNumber5(value2),
+      formattedValue: formatNumber8(value2),
       style
     };
   }
@@ -9680,13 +9981,13 @@ function formatCell(value2, column) {
 function formatValueForSearch(value2, column) {
   if (value2 == null) return "";
   if (column.format && isNumericValue(value2)) {
-    const formatter = buildD3Formatter5(column.format);
+    const formatter = buildD3Formatter6(column.format);
     if (formatter) {
       return formatter(value2);
     }
   }
   if (isNumericValue(value2)) {
-    return formatNumber5(value2);
+    return formatNumber8(value2);
   }
   return String(value2);
 }
@@ -10161,8 +10462,8 @@ function compileTableLayout(spec, options, theme) {
 import {
   buildTemporalFormatter as buildTemporalFormatter2,
   formatDate as formatDate3,
-  formatNumber as formatNumber6,
-  getRepresentativeColor as getRepresentativeColor9
+  formatNumber as formatNumber9,
+  getRepresentativeColor as getRepresentativeColor10
 } from "@opendata-ai/openchart-core";
 function formatValue(value2, fieldType, format2) {
   if (value2 == null) return "";
@@ -10176,17 +10477,23 @@ function formatValue(value2, fieldType, format2) {
       try {
         return format(format2)(value2);
       } catch {
-        return formatNumber6(value2);
+        return formatNumber9(value2);
       }
     }
-    return formatNumber6(value2);
+    return formatNumber9(value2);
   }
   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) {
@@ -10195,23 +10502,38 @@ function buildFields(row, encoding, color2) {
     return buildExplicitTooltipFields(row, channels);
   }
   const fields = [];
-  if (encoding.y) {
+  if (encoding.color && "field" in encoding.color) {
     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.color),
+      value: formatValue(
+        row[encoding.color.field],
+        encoding.color.type,
+        resolveFormat(encoding.color)
+      ),
       color: color2
     });
   }
+  if (encoding.y) {
+    fields.push({
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
+      color: encoding.color ? void 0 : 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;
@@ -10229,6 +10551,16 @@ function getTooltipTitle(row, encoding) {
   if (encoding.y?.type === "nominal" || encoding.y?.type === "ordinal") {
     return String(row[encoding.y.field] ?? "");
   }
+  if (encoding.x?.type === "quantitative" && encoding.y?.type === "quantitative") {
+    const encodedFields = new Set(
+      [encoding.x, encoding.y, encoding.color, encoding.size, encoding.detail].filter((ch) => !!ch && "field" in ch).map((ch) => ch.field)
+    );
+    for (const [key, value2] of Object.entries(row)) {
+      if (!encodedFields.has(key) && typeof value2 === "string") {
+        return value2;
+      }
+    }
+  }
   if (encoding.color && "field" in encoding.color) {
     return String(row[encoding.color.field] ?? "");
   }
@@ -10247,12 +10579,12 @@ function tooltipsForLine(mark, encoding, _markIndex) {
 }
 function tooltipsForPoint(mark, encoding, markIndex) {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, getRepresentativeColor9(mark.fill));
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor10(mark.fill));
   return [[`point-${markIndex}`, { title, fields }]];
 }
 function tooltipsForRect(mark, encoding, markIndex) {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, getRepresentativeColor9(mark.fill));
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor10(mark.fill));
   return [[`rect-${markIndex}`, { title, fields }]];
 }
 function tooltipsForArc(mark, encoding, markIndex) {
@@ -10264,15 +10596,15 @@ 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),
-        color: getRepresentativeColor9(mark.fill)
+        value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
+        color: getRepresentativeColor10(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),
-      color: getRepresentativeColor9(mark.fill)
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
+      color: getRepresentativeColor10(mark.fill)
     });
   }
   const title = colorEnc ? String(row[colorEnc.field] ?? "") : void 0;
@@ -10283,7 +10615,7 @@ function tooltipsForArea(mark, encoding, _markIndex) {
     for (const dp of mark.dataPoints) {
       dp.tooltip = {
         title: getTooltipTitle(dp.datum, encoding),
-        fields: buildFields(dp.datum, encoding, getRepresentativeColor9(mark.fill))
+        fields: buildFields(dp.datum, encoding, getRepresentativeColor10(mark.fill))
       };
     }
   }
@@ -10319,6 +10651,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 +10834,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 +10935,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 +10971,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 +11030,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 +11150,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 +11202,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,
@@ -10834,28 +11226,10 @@ function compileChart(spec, options) {
       height: options.height
     },
     animation: resolvedAnimation,
-    watermark
+    watermark,
+    measureText: options.measureText
   };
 }
-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) {