@opendata-ai/openchart-engine 6.11.0 → 6.13.0

package/dist/index.js

@@ -11,8 +11,10 @@ import {
   resolveTheme as resolveTheme3
 } from "@opendata-ai/openchart-core";
 
-// src/annotations/compute.ts
-import { detectCollision, estimateTextWidth } from "@opendata-ai/openchart-core";
+// src/annotations/collisions.ts
+import { detectCollision } from "@opendata-ai/openchart-core";
+
+// src/annotations/constants.ts
 var DEFAULT_ANNOTATION_FONT_SIZE = 12;
 var DEFAULT_ANNOTATION_FONT_WEIGHT = 400;
 var DEFAULT_LINE_HEIGHT = 1.3;
@@ -24,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",
@@ -979,7 +980,7 @@ var SUFFIX_MULTIPLIERS = {
   T: 1e12
 };
 function parseDisplayNumber(raw) {
-  const trimmed = raw.trim();
+  const trimmed = raw.trim().replace(/\u2212/g, "-");
   if (!trimmed) return NaN;
   const last = trimmed[trimmed.length - 1].toUpperCase();
   const multiplier = SUFFIX_MULTIPLIERS[last];
@@ -988,6 +989,9 @@ function parseDisplayNumber(raw) {
     const n = Number(numPart);
     return Number.isNaN(n) ? NaN : n * multiplier;
   }
+  if (last === "%") {
+    return Number(trimmed.slice(0, -1).replace(/,/g, ""));
+  }
   return Number(trimmed.replace(/,/g, ""));
 }
 var LABEL_FONT_SIZE = 11;
@@ -1149,6 +1153,7 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
           scales
         );
       }
+      const stackMode = yChannel.stack === "normalize" ? "normalize" : yChannel.stack === "center" ? "center" : "zero";
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -1158,7 +1163,8 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
         yScale,
         bandwidth,
         baseline,
-        scales
+        scales,
+        stackMode
       );
     }
     return computeColoredColumns(
@@ -1236,13 +1242,13 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
     if (!Number.isFinite(value2)) continue;
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    const groupKey = String(row[colorField] ?? "");
-    const color2 = getColor(scales, groupKey);
+    const groupKey2 = String(row[colorField] ?? "");
+    const color2 = getColor(scales, groupKey2);
     const yPos = yScale(value2);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value2 >= 0 ? yPos : baseline;
     const aria = {
-      label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+      label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
     };
     marks.push({
       type: "rect",
@@ -1280,17 +1286,17 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
     const bandX = xScale(category);
     if (bandX === void 0) continue;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
+      const groupKey2 = String(row[colorField] ?? "");
       const value2 = Number(row[valueField] ?? 0);
       if (!Number.isFinite(value2)) continue;
-      const groupIndex = groupIndexMap.get(groupKey) ?? 0;
-      const color2 = getColor(scales, groupKey);
+      const groupIndex = groupIndexMap.get(groupKey2) ?? 0;
+      const color2 = getColor(scales, groupKey2);
       const yPos = yScale(value2);
       const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
       const y2 = value2 >= 0 ? yPos : baseline;
       const subX = bandX + groupIndex * (subBandWidth + gap);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatColumnValue(value2)}`
       };
       marks.push({
         type: "rect",
@@ -1308,28 +1314,34 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
   }
   return marks;
 }
-function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
+function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales, stackMode = "zero") {
   const marks = [];
   const categoryGroups = groupByField(data, categoryField);
   for (const [category, rows] of categoryGroups) {
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    let cumulativeValue = 0;
+    let categoryTotal = 0;
     for (const row of rows) {
-      const groupKey = String(row[colorField] ?? "");
-      const value2 = Number(row[valueField] ?? 0);
-      if (!Number.isFinite(value2) || value2 <= 0) continue;
-      const color2 = getColor(scales, groupKey);
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+    let cumulativeValue = stackMode === "center" ? -categoryTotal / 2 : 0;
+    for (const row of rows) {
+      const groupKey2 = String(row[colorField] ?? "");
+      const rawValue = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+      const value2 = stackMode === "normalize" && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
+      const color2 = getColor(scales, groupKey2);
       const yTop = yScale(cumulativeValue + value2);
       const yBottom = yScale(cumulativeValue);
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
       const aria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value2)}`
+        label: `${category}, ${groupKey2}: ${formatColumnValue(rawValue)}`
       };
       marks.push({
         type: "rect",
         x: bandX,
-        y: yTop,
+        y: Math.min(yTop, yBottom),
         width: bandwidth,
         height: columnHeight,
         fill: color2,
@@ -2521,6 +2533,26 @@ function stack_default() {
   return stack;
 }
 
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/offset/expand.js
+function expand_default(series, order) {
+  if (!((n = series.length) > 0)) return;
+  for (var i, n, j = 0, m = series[0].length, y2; j < m; ++j) {
+    for (y2 = i = 0; i < n; ++i) y2 += series[i][j][1] || 0;
+    if (y2) for (i = 0; i < n; ++i) series[i][j][1] /= y2;
+  }
+  none_default(series, order);
+}
+
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/offset/silhouette.js
+function silhouette_default(series, order) {
+  if (!((n = series.length) > 0)) return;
+  for (var j = 0, s0 = series[order[0]], n, m = s0.length; j < m; ++j) {
+    for (var i = 0, y2 = 0; i < n; ++i) y2 += series[i][j][1] || 0;
+    s0[j][1] += s0[j][0] = -y2 / 2;
+  }
+  none_default(series, order);
+}
+
 // src/charts/line/curves.ts
 var CURVE_MAP = {
   linear: linear_default,
@@ -2648,7 +2680,9 @@ function computeStackedArea(spec, scales, chartArea) {
     }
     return pivot;
   });
-  const stackGenerator = stack_default().keys(keys).order(none_default2).offset(none_default);
+  const stackProp = yChannel.stack;
+  const offsetFn = stackProp === "normalize" ? expand_default : stackProp === "center" ? silhouette_default : none_default;
+  const stackGenerator = stack_default().keys(keys).order(none_default2).offset(offsetFn);
   const stackedData = stackGenerator(pivotData);
   const yScale = scales.y.scale;
   const marks = [];
@@ -3102,53 +3136,185 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
         dominantBaseline: "central"
       }
     });
-    targetMarkIndices.push(mi);
-  }
-  if (candidates.length === 0) return [];
-  let resolved;
-  if (density === "all") {
-    resolved = candidates.map((c) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: true
-    }));
-  } else {
-    resolved = resolveCollisions5(candidates);
+    targetMarkIndices.push(mi);
+  }
+  if (candidates.length === 0) return [];
+  let resolved;
+  if (density === "all") {
+    resolved = candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  } else {
+    resolved = resolveCollisions5(candidates);
+  }
+  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
+    const label = resolved[i];
+    const mark = targetMarks[i];
+    if (label.visible) {
+      label.connector = {
+        from: { x: label.x, y: label.y },
+        to: { x: mark.centroid.x, y: mark.centroid.y },
+        stroke: _textFill,
+        style: "straight"
+      };
+    }
+  }
+  return resolved;
+}
+
+// src/charts/pie/index.ts
+var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, false);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, true);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+
+// src/charts/post-process.ts
+function computeMarkObstacles(marks, scales) {
+  if (scales.y?.type === "band") {
+    return computeBandRowObstacles(marks, scales);
+  }
+  const obstacles = [];
+  for (const mark of marks) {
+    if (mark.type === "rect") {
+      const rm = mark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === "point") {
+      const pm = mark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2
+      });
+    }
+  }
+  return obstacles;
+}
+function computeBandRowObstacles(marks, scales) {
+  const rows = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    let cy;
+    let left2;
+    let right2;
+    if (mark.type === "point") {
+      const pm = mark;
+      cy = pm.cy;
+      left2 = pm.cx - pm.r;
+      right2 = pm.cx + pm.r;
+    } else if (mark.type === "rect") {
+      const rm = mark;
+      cy = rm.y + rm.height / 2;
+      left2 = rm.x;
+      right2 = rm.x + rm.width;
+    } else {
+      continue;
+    }
+    const key = Math.round(cy);
+    const existing = rows.get(key);
+    if (existing) {
+      existing.minX = Math.min(existing.minX, left2);
+      existing.maxX = Math.max(existing.maxX, right2);
+    } else {
+      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
+    }
+  }
+  const bandScale = scales.y.scale;
+  const bandwidth = bandScale.bandwidth?.() ?? 0;
+  if (bandwidth === 0) return [];
+  const obstacles = [];
+  for (const { minX, maxX, bandY } of rows.values()) {
+    obstacles.push({
+      x: minX,
+      y: bandY - bandwidth / 2,
+      width: maxX - minX,
+      height: bandwidth
+    });
   }
-  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
-    const label = resolved[i];
-    const mark = targetMarks[i];
-    if (label.visible) {
-      label.connector = {
-        from: { x: label.x, y: label.y },
-        to: { x: mark.centroid.x, y: mark.centroid.y },
-        stroke: _textFill,
-        style: "straight"
-      };
+  return obstacles;
+}
+function resolveRendererKey(markType, encoding, markDef) {
+  if (markType === "bar") {
+    const xType = encoding.x?.type;
+    const yType = encoding.y?.type;
+    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
+    if (isVertical) {
+      return "bar:vertical";
+    }
+  } else if (markType === "arc") {
+    const innerRadius = markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      return "arc:donut";
     }
   }
-  return resolved;
+  return markType;
 }
-
-// src/charts/pie/index.ts
-var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computePieMarks(spec, scales, chartArea, strategy, false);
-  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+function getMarkPrimaryValue(mark) {
+  switch (mark.type) {
+    case "rect":
+      return mark.height;
+    // bar height is the primary value encoding
+    case "point":
+      return mark.cy;
+    // y position for scatter
+    case "arc":
+      return mark.endAngle - mark.startAngle;
+    // arc angle extent
+    case "line":
+    case "area":
+      return 0;
+    // series marks don't have individual values
+    default:
+      return 0;
   }
-  return marks;
-};
-var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computePieMarks(spec, scales, chartArea, strategy, true);
-  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
-  for (let i = 0; i < marks.length && i < labels.length; i++) {
-    marks[i].label = labels[i];
+}
+function assignAnimationIndices(marks, animation) {
+  if (!animation?.enabled) return;
+  if (animation.staggerOrder === "value") {
+    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
+    indexed.sort((a, b) => {
+      const av = getMarkPrimaryValue(a.mark);
+      const bv = getMarkPrimaryValue(b.mark);
+      return av - bv;
+    });
+    for (let i = 0; i < indexed.length; i++) {
+      const m = indexed[i].mark;
+      if (m.type === "rect" && m.stackGroup) continue;
+      m.animationIndex = i;
+    }
   }
-  return marks;
-};
+  const groupIndexMap = /* @__PURE__ */ new Map();
+  const groupStackPos = /* @__PURE__ */ new Map();
+  let nextGroupIndex = 0;
+  for (const mark of marks) {
+    if (mark.type === "rect" && mark.stackGroup) {
+      const rect = mark;
+      const group = rect.stackGroup;
+      if (!groupIndexMap.has(group)) {
+        groupIndexMap.set(group, nextGroupIndex++);
+      }
+      rect.animationIndex = groupIndexMap.get(group);
+      const pos = groupStackPos.get(group) ?? 0;
+      rect.stackPos = pos;
+      groupStackPos.set(group, pos + 1);
+    }
+  }
+}
 
 // src/charts/registry.ts
 var renderers = /* @__PURE__ */ new Map();
@@ -6135,7 +6301,7 @@ function normalizeChrome(chrome) {
   };
 }
 function inferFieldType(data, field) {
-  const sampleSize = Math.min(10, data.length);
+  const sampleSize = Math.min(50, data.length);
   let numericCount = 0;
   let dateCount = 0;
   let totalNonNull = 0;
@@ -6244,7 +6410,8 @@ function normalizeChartSpec(spec, warnings) {
     theme: spec.theme ?? {},
     darkMode: spec.darkMode ?? "off",
     hiddenSeries: spec.hiddenSeries ?? [],
-    seriesStyles: spec.seriesStyles ?? {}
+    seriesStyles: spec.seriesStyles ?? {},
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeTableSpec(spec, _warnings) {
@@ -6261,7 +6428,8 @@ function normalizeTableSpec(spec, _warnings) {
     stickyFirstColumn: spec.stickyFirstColumn ?? false,
     compact: spec.compact ?? false,
     responsive: spec.responsive ?? true,
-    animation: spec.animation
+    animation: spec.animation,
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeSankeySpec(spec, _warnings) {
@@ -6281,7 +6449,8 @@ function normalizeSankeySpec(spec, _warnings) {
     darkMode: spec.darkMode ?? "off",
     animation: spec.animation,
     valueFormat: spec.valueFormat,
-    linkOpacity: spec.linkOpacity
+    linkOpacity: spec.linkOpacity,
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeGraphSpec(spec, _warnings) {
@@ -6304,7 +6473,8 @@ function normalizeGraphSpec(spec, _warnings) {
     chrome: normalizeChrome(spec.chrome),
     annotations: normalizeAnnotations(spec.annotations),
     theme: spec.theme ?? {},
-    darkMode: spec.darkMode ?? "off"
+    darkMode: spec.darkMode ?? "off",
+    watermark: spec.watermark ?? true
   };
 }
 function normalizeSpec(spec, warnings = []) {
@@ -6331,14 +6501,23 @@ function normalizeSpec(spec, warnings = []) {
     `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', or type: 'sankey'.`
   );
 }
-function flattenLayers(spec, parentData, parentEncoding, parentTransforms) {
+function flattenLayers(spec, parentData, parentEncoding, parentTransforms, parentWatermark) {
   const resolvedData = spec.data ?? parentData;
   const resolvedEncoding = parentEncoding && spec.encoding ? { ...parentEncoding, ...spec.encoding } : spec.encoding ?? parentEncoding;
   const resolvedTransforms = [...parentTransforms ?? [], ...spec.transform ?? []];
+  const resolvedWatermark = spec.watermark ?? parentWatermark;
   const leaves = [];
   for (const child of spec.layer) {
     if (isLayerSpec(child)) {
-      leaves.push(...flattenLayers(child, resolvedData, resolvedEncoding, resolvedTransforms));
+      leaves.push(
+        ...flattenLayers(
+          child,
+          resolvedData,
+          resolvedEncoding,
+          resolvedTransforms,
+          resolvedWatermark
+        )
+      );
     } else {
       const mergedData = child.data ?? resolvedData ?? [];
       const mergedEncoding = resolvedEncoding ? { ...resolvedEncoding, ...child.encoding } : child.encoding;
@@ -6347,7 +6526,9 @@ function flattenLayers(spec, parentData, parentEncoding, parentTransforms) {
         ...child,
         data: mergedData,
         encoding: mergedEncoding,
-        transform: mergedTransforms.length > 0 ? mergedTransforms : void 0
+        transform: mergedTransforms.length > 0 ? mergedTransforms : void 0,
+        // Inherit parent watermark if child doesn't explicitly set one
+        ...child.watermark === void 0 && resolvedWatermark !== void 0 ? { watermark: resolvedWatermark } : {}
       });
     }
   }
@@ -7406,6 +7587,8 @@ function compileGraph(spec, options) {
     );
   }
   const graphSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
   let theme = resolveTheme(mergedThemeConfig);
   if (options.darkMode) {
@@ -7473,7 +7656,10 @@ function compileGraph(spec, options) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   return {
     nodes: compiledNodes,
@@ -7487,7 +7673,8 @@ function compileGraph(spec, options) {
       width: options.width,
       height: options.height
     },
-    simulationConfig
+    simulationConfig,
+    watermark
   };
 }
 var DEFAULT_COLLISION_PADDING = 5;
@@ -7693,7 +7880,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     }));
     const shouldThin = scales.x.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
-    let tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
+    let tickAngle = axisConfig?.labelAngle;
     if (tickAngle === void 0 && scales.x.type === "band" && ticks2.length > 1) {
       const bandwidth = scales.x.scale.bandwidth();
       let maxLabelWidth = 0;
@@ -7705,7 +7892,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
         tickAngle = -45;
       }
     }
-    const axisTitle = axisConfig?.title ?? axisConfig?.label;
+    const axisTitle = axisConfig?.title;
     result.x = {
       ticks: ticks2,
       gridlines: axisConfig?.grid ? gridlines : [],
@@ -7735,14 +7922,14 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
     } else {
       allTicks = continuousTicks(scales.y, yDensity);
     }
-    const gridlines = allTicks.map((t) => ({
+    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
+    const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
+    const gridlines = ticks2.map((t) => ({
       position: t.position,
       major: true
     }));
-    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
-    const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
-    const axisTitle = axisConfig?.title ?? axisConfig?.label;
-    const tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
+    const axisTitle = axisConfig?.title;
+    const tickAngle = axisConfig?.labelAngle;
     result.y = {
       ticks: ticks2,
       // Y-axis gridlines are shown by default (standard editorial practice)
@@ -7786,7 +7973,7 @@ function scalePadding(basePadding, width, height) {
 }
 var MIN_CHART_WIDTH = 60;
 var MIN_CHART_HEIGHT = 40;
-function computeDimensions(spec, options, legendLayout, theme, strategy) {
+function computeDimensions(spec, options, legendLayout, theme, strategy, watermark = true) {
   const { width, height } = options;
   const padding = scalePadding(theme.spacing.padding, width, height);
   const axisMargin = theme.spacing.axisMargin;
@@ -7797,14 +7984,15 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
     width,
     options.measureText,
     chromeMode,
-    padding
+    padding,
+    watermark
   );
   const total = { x: 0, y: 0, width, height };
   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;
@@ -7955,7 +8143,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
       width,
       options.measureText,
       fallbackMode,
-      padding
+      padding,
+      watermark
     );
     const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin;
     const newTop = padding + fallbackChrome.topHeight + fallbackTopAxisGap;
@@ -8028,6 +8217,12 @@ function uniqueStrings(values) {
   }
   return result;
 }
+function applyCategoricalSort(values, sort) {
+  if (sort === null) return values;
+  const sorted = [...values].sort((a, b) => a.localeCompare(b, void 0, { numeric: true }));
+  if (sort === "descending") sorted.reverse();
+  return sorted;
+}
 function applyContinuousConfig(scale, channel) {
   if (channel.scale?.clamp) {
     scale.clamp(true);
@@ -8189,7 +8384,7 @@ function evenRange(start, end, count) {
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
 function buildBandScale(channel, data, rangeStart, rangeEnd) {
-  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const padding = channel.scale?.padding ?? 0.35;
   const scale = band().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.paddingInner !== void 0) {
@@ -8205,7 +8400,7 @@ function buildBandScale(channel, data, rangeStart, rangeEnd) {
   return { scale, type: "band", channel };
 }
 function buildPointScale(channel, data, rangeStart, rangeEnd) {
-  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const padding = channel.scale?.padding ?? 0.5;
   const scale = point4().domain(values).range([rangeStart, rangeEnd]).padding(padding);
   if (channel.scale?.reverse) {
@@ -8215,7 +8410,8 @@ function buildPointScale(channel, data, rangeStart, rangeEnd) {
   return { scale, type: "point", channel };
 }
 function buildOrdinalColorScale(channel, data, palette) {
-  const values = uniqueStrings(fieldValues(data, channel.field));
+  const explicitDomain = channel.scale?.domain;
+  const values = explicitDomain ? explicitDomain.map(String) : applyCategoricalSort(uniqueStrings(fieldValues(data, channel.field)), channel.sort);
   const scale = ordinal().domain(values).range(palette);
   return { scale, type: "ordinal", channel };
 }
@@ -8293,25 +8489,49 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.x) {
     let xData = data;
+    let xChannel = encoding.x;
     const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
     if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative" && !xStackDisabled) {
-      const yField = encoding.y?.field;
-      const xField = encoding.x.field;
-      if (yField) {
-        const sums = /* @__PURE__ */ new Map();
-        for (const row of data) {
-          const cat = String(row[yField] ?? "");
-          const val = Number(row[xField] ?? 0);
-          if (Number.isFinite(val) && val > 0) {
-            sums.set(cat, (sums.get(cat) ?? 0) + val);
+      if (encoding.x.stack === "normalize") {
+        xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
+      } else if (encoding.x.stack === "center") {
+        const yField = encoding.y?.field;
+        const xField = encoding.x.field;
+        if (yField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[yField] ?? "");
+            const val = Number(row[xField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
+          }
+          const maxSum = Math.max(...sums.values(), 0);
+          const half = maxSum / 2;
+          xChannel = {
+            ...encoding.x,
+            scale: { ...encoding.x.scale, domain: [-half, half], zero: true }
+          };
+        }
+      } else {
+        const yField = encoding.y?.field;
+        const xField = encoding.x.field;
+        if (yField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[yField] ?? "");
+            const val = Number(row[xField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
           }
+          const maxSum = Math.max(...sums.values(), 0);
+          xData = [...data, { [xField]: maxSum }];
         }
-        const maxSum = Math.max(...sums.values(), 0);
-        xData = [...data, { [xField]: maxSum }];
       }
     }
     result.x = buildPositionalScale(
-      encoding.x,
+      xChannel,
       xData,
       chartArea.x,
       chartArea.x + chartArea.width,
@@ -8321,26 +8541,50 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.y) {
     let yData = data;
+    let yChannel = encoding.y;
     const isVerticalBar = spec.markType === "bar" && (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") && encoding.y.type === "quantitative";
     const yStackDisabled = encoding.y.stack === null || encoding.y.stack === false;
     if ((isVerticalBar || spec.markType === "area") && encoding.color && encoding.y.type === "quantitative" && !yStackDisabled) {
-      const xField = encoding.x?.field;
-      const yField = encoding.y.field;
-      if (xField) {
-        const sums = /* @__PURE__ */ new Map();
-        for (const row of data) {
-          const cat = String(row[xField] ?? "");
-          const val = Number(row[yField] ?? 0);
-          if (Number.isFinite(val) && val > 0) {
-            sums.set(cat, (sums.get(cat) ?? 0) + val);
+      if (encoding.y.stack === "normalize") {
+        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+      } else if (encoding.y.stack === "center") {
+        const xField = encoding.x?.field;
+        const yField = encoding.y.field;
+        if (xField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[xField] ?? "");
+            const val = Number(row[yField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
+          }
+          const maxSum = Math.max(...sums.values(), 0);
+          const half = maxSum / 2;
+          yChannel = {
+            ...encoding.y,
+            scale: { ...encoding.y.scale, domain: [-half, half], zero: true }
+          };
+        }
+      } else {
+        const xField = encoding.x?.field;
+        const yField = encoding.y.field;
+        if (xField) {
+          const sums = /* @__PURE__ */ new Map();
+          for (const row of data) {
+            const cat = String(row[xField] ?? "");
+            const val = Number(row[yField] ?? 0);
+            if (Number.isFinite(val) && val > 0) {
+              sums.set(cat, (sums.get(cat) ?? 0) + val);
+            }
           }
+          const maxSum = Math.max(...sums.values(), 0);
+          yData = [...data, { [yField]: maxSum }];
         }
-        const maxSum = Math.max(...sums.values(), 0);
-        yData = [...data, { [yField]: maxSum }];
       }
     }
     result.y = buildPositionalScale(
-      encoding.y,
+      yChannel,
       yData,
       chartArea.y + chartArea.height,
       chartArea.y,
@@ -8441,7 +8685,7 @@ function truncateEntries(entries, maxCount) {
   });
   return truncated;
 }
-function computeLegend(spec, strategy, theme, chartArea) {
+function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   if (spec.legend?.show === false || strategy.legendMaxHeight === 0) {
     return {
       position: "top",
@@ -8518,7 +8762,7 @@ function computeLegend(spec, strategy, theme, chartArea) {
       entryGap: 4
     };
   }
-  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - BRAND_RESERVE_WIDTH;
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - (watermark ? BRAND_RESERVE_WIDTH : 0);
   if (spec.legend?.symbolLimit != null) {
     const limit = Math.max(1, spec.legend.symbolLimit);
     if (limit < entries.length) {
@@ -9137,6 +9381,8 @@ function compileSankey(spec, options) {
     );
   }
   const sankeySpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? sankeySpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...sankeySpec.theme, ...options.theme } : sankeySpec.theme;
   const lightTheme = resolveTheme2(mergedThemeConfig);
   let theme = lightTheme;
@@ -9157,7 +9403,10 @@ function compileSankey(spec, options) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   const padding = theme.spacing.padding;
   const fullArea = {
@@ -9167,7 +9416,7 @@ function compileSankey(spec, options) {
     height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout(fullArea, chrome, theme, options);
+    return emptyLayout(fullArea, chrome, theme, options, watermark);
   }
   const sourceField = sankeySpec.encoding.source.field;
   const targetField = sankeySpec.encoding.target.field;
@@ -9203,7 +9452,7 @@ function compileSankey(spec, options) {
     height: fullArea.height - legend.bounds.height - legendGap
   };
   if (area.height <= 0) {
-    return emptyLayout(area, chrome, theme, options);
+    return emptyLayout(area, chrome, theme, options, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
   const labelFontWeight = theme.fonts.weights.normal;
@@ -9347,7 +9596,8 @@ function compileSankey(spec, options) {
       width: options.width,
       height: options.height
     },
-    animation: resolvedAnimation
+    animation: resolvedAnimation,
+    watermark
   };
 }
 function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetField, theme, area) {
@@ -9454,7 +9704,7 @@ function buildTooltipDescriptors(nodes, links, valueFormat) {
   }
   return descriptors;
 }
-function emptyLayout(area, chrome, theme, options) {
+function emptyLayout(area, chrome, theme, options, watermark) {
   return {
     area,
     chrome,
@@ -9486,7 +9736,8 @@ function emptyLayout(area, chrome, theme, options) {
     dimensions: {
       width: options.width,
       height: options.height
-    }
+    },
+    watermark
   };
 }
 
@@ -10086,6 +10337,7 @@ function compileTableLayout(spec, options, theme) {
     });
     return { id: rowId, cells, data: row };
   });
+  const watermark = spec.watermark;
   const chrome = computeChrome4(
     {
       title: spec.chrome.title,
@@ -10096,7 +10348,10 @@ function compileTableLayout(spec, options, theme) {
     },
     theme,
     options.width,
-    options.measureText
+    options.measureText,
+    "full",
+    void 0,
+    watermark
   );
   const titleText = spec.chrome.title?.text ?? "";
   const caption = titleText ? `Table: ${titleText}` : `Data table with ${data.length} rows`;
@@ -10118,7 +10373,8 @@ function compileTableLayout(spec, options, theme) {
       summary: `${resolvedColumns.length} columns, ${totalFiltered} rows`
     },
     theme,
-    animation: resolveAnimation(spec.animation)
+    animation: resolveAnimation(spec.animation),
+    watermark
   };
 }
 
@@ -10148,10 +10404,16 @@ function formatValue(value2, fieldType, format2) {
   }
   return String(value2);
 }
+function resolveLabel(ch) {
+  return ch.title ?? ch.axis?.title ?? ch.field;
+}
+function resolveFormat(ch) {
+  return ch.format ?? ch.axis?.format;
+}
 function buildExplicitTooltipFields(row, channels) {
   return channels.map((ch) => ({
-    label: ch.axis?.label ?? ch.field,
-    value: formatValue(row[ch.field], ch.type, ch.axis?.format)
+    label: resolveLabel(ch),
+    value: formatValue(row[ch.field], ch.type, resolveFormat(ch))
   }));
 }
 function buildFields(row, encoding, color2) {
@@ -10162,21 +10424,25 @@ function buildFields(row, encoding, color2) {
   const fields = [];
   if (encoding.y) {
     fields.push({
-      label: encoding.y.axis?.label ?? encoding.y.field,
-      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
       color: color2
     });
   }
   if (encoding.x) {
     fields.push({
-      label: encoding.x.axis?.label ?? encoding.x.field,
-      value: formatValue(row[encoding.x.field], encoding.x.type, encoding.x.axis?.format)
+      label: resolveLabel(encoding.x),
+      value: formatValue(row[encoding.x.field], encoding.x.type, resolveFormat(encoding.x))
     });
   }
   if (encoding.size && "field" in encoding.size) {
     fields.push({
-      label: encoding.size.axis?.label ?? encoding.size.field,
-      value: formatValue(row[encoding.size.field], encoding.size.type, encoding.size.axis?.format)
+      label: resolveLabel(encoding.size),
+      value: formatValue(
+        row[encoding.size.field],
+        encoding.size.type,
+        resolveFormat(encoding.size)
+      )
     });
   }
   return fields;
@@ -10229,14 +10495,14 @@ function tooltipsForArc(mark, encoding, markIndex) {
     if (encoding.y) {
       fields.push({
         label: categoryName,
-        value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+        value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
         color: getRepresentativeColor9(mark.fill)
       });
     }
   } else if (encoding.y) {
     fields.push({
-      label: encoding.y.field,
-      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      label: resolveLabel(encoding.y),
+      value: formatValue(row[encoding.y.field], encoding.y.type, resolveFormat(encoding.y)),
       color: getRepresentativeColor9(mark.fill)
     });
   }
@@ -10284,6 +10550,93 @@ function computeTooltipDescriptors(spec, marks) {
   return descriptors;
 }
 
+// src/transforms/aggregate.ts
+function computeAggregate(op, values) {
+  if (values.length === 0) return 0;
+  switch (op) {
+    case "count":
+      return values.length;
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "mean": {
+      const sum2 = values.reduce((a, b) => a + b, 0);
+      return sum2 / values.length;
+    }
+    case "median": {
+      const sorted = [...values].sort((a, b) => a - b);
+      const mid = Math.floor(sorted.length / 2);
+      return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+    }
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+    case "variance": {
+      if (values.length < 2) return 0;
+      const mean = values.reduce((a, b) => a + b, 0) / values.length;
+      return values.reduce((a, v) => a + (v - mean) ** 2, 0) / values.length;
+    }
+    case "stdev": {
+      if (values.length < 2) return 0;
+      const m = values.reduce((a, b) => a + b, 0) / values.length;
+      return Math.sqrt(values.reduce((a, v) => a + (v - m) ** 2, 0) / values.length);
+    }
+    case "q1": {
+      const s = [...values].sort((a, b) => a - b);
+      const i = (s.length - 1) * 0.25;
+      const lo = Math.floor(i);
+      const frac = i - lo;
+      return s[lo] + frac * ((s[lo + 1] ?? s[lo]) - s[lo]);
+    }
+    case "q3": {
+      const s = [...values].sort((a, b) => a - b);
+      const i = (s.length - 1) * 0.75;
+      const lo = Math.floor(i);
+      const frac = i - lo;
+      return s[lo] + frac * ((s[lo + 1] ?? s[lo]) - s[lo]);
+    }
+    default:
+      return 0;
+  }
+}
+function groupKey(row, groupby) {
+  return groupby.map((f) => String(row[f] ?? "")).join("\0");
+}
+function runAggregate(data, transform) {
+  const { aggregate, groupby } = transform;
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const key = groupKey(row, groupby);
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(row);
+    } else {
+      groups.set(key, [row]);
+    }
+  }
+  const result = [];
+  for (const rows of groups.values()) {
+    const outRow = {};
+    for (const field of groupby) {
+      outRow[field] = rows[0][field];
+    }
+    for (const agg of aggregate) {
+      if (agg.op === "distinct") {
+        outRow[agg.as] = new Set(rows.map((r) => r[agg.field])).size;
+        continue;
+      }
+      const values = rows.map((r) => {
+        if (agg.op === "count") return 1;
+        const v = Number(r[agg.field]);
+        return Number.isFinite(v) ? v : NaN;
+      }).filter((v) => !Number.isNaN(v));
+      outRow[agg.as] = computeAggregate(agg.op, values);
+    }
+    result.push(outRow);
+  }
+  return result;
+}
+
 // src/transforms/bin.ts
 function computeStep(extent2, maxbins, nice2) {
   const span = extent2[1] - extent2[0];
@@ -10380,6 +10733,30 @@ function runFilter(data, predicate) {
   return data.filter((datum) => evaluatePredicate(datum, predicate));
 }
 
+// src/transforms/fold.ts
+function runFold(data, transform) {
+  const { fold } = transform;
+  const [keyAs, valueAs] = transform.as ?? ["key", "value"];
+  const foldSet = new Set(fold);
+  const result = [];
+  for (const row of data) {
+    const base = {};
+    for (const [k, v] of Object.entries(row)) {
+      if (!foldSet.has(k)) {
+        base[k] = v;
+      }
+    }
+    for (const field of fold) {
+      result.push({
+        ...base,
+        [keyAs]: field,
+        [valueAs]: row[field]
+      });
+    }
+  }
+  return result;
+}
+
 // src/transforms/timeunit.ts
 function extractTimeUnit(date2, unit2) {
   switch (unit2) {
@@ -10457,6 +10834,10 @@ function runTransforms(data, transforms) {
       result = runCalculate(result, transform);
     } else if ("timeUnit" in transform) {
       result = runTimeUnit(result, transform);
+    } else if ("aggregate" in transform) {
+      result = runAggregate(result, transform);
+    } else if ("fold" in transform) {
+      result = runFold(result, transform);
     }
   }
   return result;
@@ -10489,71 +10870,55 @@ var builtinRenderers = {
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
 }
-function computeMarkObstacles(marks, scales) {
-  if (scales.y?.type === "band") {
-    return computeBandRowObstacles(marks, scales);
-  }
-  const obstacles = [];
-  for (const mark of marks) {
-    if (mark.type === "rect") {
-      const rm = mark;
-      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
-    } else if (mark.type === "point") {
-      const pm = mark;
-      obstacles.push({
-        x: pm.cx - pm.r,
-        y: pm.cy - pm.r,
-        width: pm.r * 2,
-        height: pm.r * 2
-      });
-    }
-  }
-  return obstacles;
-}
-function computeBandRowObstacles(marks, scales) {
-  const rows = /* @__PURE__ */ new Map();
-  for (const mark of marks) {
-    let cy;
-    let left2;
-    let right2;
-    if (mark.type === "point") {
-      const pm = mark;
-      cy = pm.cy;
-      left2 = pm.cx - pm.r;
-      right2 = pm.cx + pm.r;
-    } else if (mark.type === "rect") {
-      const rm = mark;
-      cy = rm.y + rm.height / 2;
-      left2 = rm.x;
-      right2 = rm.x + rm.width;
-    } else {
-      continue;
-    }
-    const key = Math.round(cy);
-    const existing = rows.get(key);
-    if (existing) {
-      existing.minX = Math.min(existing.minX, left2);
-      existing.maxX = Math.max(existing.maxX, right2);
-    } else {
-      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
+function expandEncodingSugar(spec) {
+  const encoding = spec.encoding;
+  if (!encoding) return spec;
+  const generatedTransforms = [];
+  const updatedEncoding = { ...encoding };
+  let changed = false;
+  for (const channel of Object.keys(encoding)) {
+    const ch = encoding[channel];
+    if (!ch || !ch.field) continue;
+    if (ch.bin != null && ch.bin !== false) {
+      const field = ch.field;
+      const outputField = `bin_${field}`;
+      const binTransform = {
+        bin: ch.bin === true ? true : ch.bin,
+        field,
+        as: outputField
+      };
+      generatedTransforms.push(binTransform);
+      const { bin: _bin, ...rest } = ch;
+      updatedEncoding[channel] = { ...rest, field: outputField };
+      changed = true;
+    }
+    const current = updatedEncoding[channel] ?? ch;
+    if (current.timeUnit) {
+      const field = current.field;
+      const unit2 = current.timeUnit;
+      const outputField = `${unit2}_${field}`;
+      const timeUnitTransform = {
+        timeUnit: unit2,
+        field,
+        as: outputField
+      };
+      generatedTransforms.push(timeUnitTransform);
+      const { timeUnit: _tu, ...rest } = current;
+      updatedEncoding[channel] = { ...rest, field: outputField };
+      changed = true;
     }
   }
-  const bandScale = scales.y.scale;
-  const bandwidth = bandScale.bandwidth?.() ?? 0;
-  if (bandwidth === 0) return [];
-  const obstacles = [];
-  for (const { minX, maxX, bandY } of rows.values()) {
-    obstacles.push({
-      x: minX,
-      y: bandY - bandwidth / 2,
-      width: maxX - minX,
-      height: bandwidth
-    });
-  }
-  return obstacles;
+  if (!changed) return spec;
+  const existingTransforms = spec.transform ?? [];
+  return {
+    ...spec,
+    encoding: updatedEncoding,
+    transform: [...generatedTransforms, ...existingTransforms]
+  };
 }
 function compileChart(spec, options) {
-  const { spec: normalized } = compile(spec);
+  const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandEncodingSugar(spec) : spec;
+  const { spec: normalized } = compile(expandedSpec);
   if ("type" in normalized && normalized.type === "table") {
     throw new Error("compileChart received a table spec. Use compileTable instead.");
   }
@@ -10564,14 +10929,16 @@ function compileChart(spec, options) {
     throw new Error("compileChart received a sankey spec. Use compileSankey instead.");
   }
   let chartSpec = normalized;
-  const rawTransforms = spec.transform;
+  const rawWatermark = expandedSpec.watermark;
+  const watermark = rawWatermark !== void 0 ? chartSpec.watermark : options.watermark ?? true;
+  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];
@@ -10622,8 +10989,8 @@ function compileChart(spec, options) {
     width: options.width,
     height: options.height
   };
-  const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea);
-  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy);
+  const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea, watermark);
+  const dims = computeDimensions(chartSpec, options, legendLayout, theme, strategy, watermark);
   const chartArea = dims.chartArea;
   const legendArea = { ...chartArea };
   if (legendLayout.entries.length > 0) {
@@ -10641,7 +11008,7 @@ function compileChart(spec, options) {
         break;
     }
   }
-  const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea);
+  const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea, watermark);
   let renderData = chartSpec.data;
   if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color && "field" in chartSpec.encoding.color) {
     const colorField = chartSpec.encoding.color.field;
@@ -10682,20 +11049,11 @@ function compileChart(spec, options) {
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
-  let rendererKey = renderSpec.markType;
-  if (rendererKey === "bar") {
-    const xType = renderSpec.encoding.x?.type;
-    const yType = renderSpec.encoding.y?.type;
-    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
-    if (isVertical) {
-      rendererKey = "bar:vertical";
-    }
-  } else if (rendererKey === "arc") {
-    const innerRadius = renderSpec.markDef.innerRadius;
-    if (innerRadius && innerRadius > 0) {
-      rendererKey = "arc:donut";
-    }
-  }
+  const rendererKey = resolveRendererKey(
+    renderSpec.markType,
+    renderSpec.encoding,
+    renderSpec.markDef
+  );
   const renderer = getChartRenderer(rendererKey);
   const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
   const obstacles = [];
@@ -10708,12 +11066,14 @@ function compileChart(spec, options) {
       obstacles.push(computeLabelBounds(mark.label));
     }
   }
-  const brandPadding = theme.spacing.padding;
-  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
-  const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
-  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
-  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
-  obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
+  if (watermark) {
+    const brandPadding = theme.spacing.padding;
+    const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
+    const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
+    const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+    const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+    obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: 30 });
+  }
   const annotations = computeAnnotations(
     chartSpec,
     scales,
@@ -10741,37 +11101,7 @@ function compileChart(spec, options) {
     },
     chartSpec.data
   );
-  if (resolvedAnimation?.enabled && resolvedAnimation.staggerOrder === "value") {
-    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
-    indexed.sort((a, b) => {
-      const av = getMarkPrimaryValue(a.mark);
-      const bv = getMarkPrimaryValue(b.mark);
-      return av - bv;
-    });
-    for (let i = 0; i < indexed.length; i++) {
-      const m = indexed[i].mark;
-      if (m.type === "rect" && m.stackGroup) continue;
-      m.animationIndex = i;
-    }
-  }
-  if (resolvedAnimation?.enabled) {
-    const groupIndexMap = /* @__PURE__ */ new Map();
-    const groupStackPos = /* @__PURE__ */ new Map();
-    let nextGroupIndex = 0;
-    for (const mark of marks) {
-      if (mark.type === "rect" && mark.stackGroup) {
-        const rect = mark;
-        const group = rect.stackGroup;
-        if (!groupIndexMap.has(group)) {
-          groupIndexMap.set(group, nextGroupIndex++);
-        }
-        rect.animationIndex = groupIndexMap.get(group);
-        const pos = groupStackPos.get(group) ?? 0;
-        rect.stackPos = pos;
-        groupStackPos.set(group, pos + 1);
-      }
-    }
-  }
+  assignAnimationIndices(marks, resolvedAnimation);
   return {
     area: chartArea,
     chrome: dims.chrome,
@@ -10794,28 +11124,10 @@ function compileChart(spec, options) {
       width: options.width,
       height: options.height
     },
-    animation: resolvedAnimation
+    animation: resolvedAnimation,
+    watermark
   };
 }
-function getMarkPrimaryValue(mark) {
-  switch (mark.type) {
-    case "rect":
-      return mark.height;
-    // bar height is the primary value encoding
-    case "point":
-      return mark.cy;
-    // y position for scatter
-    case "arc":
-      return mark.endAngle - mark.startAngle;
-    // arc angle extent
-    case "line":
-    case "area":
-      return 0;
-    // series marks don't have individual values
-    default:
-      return 0;
-  }
-}
 function compileLayer(spec, options) {
   const leaves = flattenLayers(spec);
   if (leaves.length === 0) {
@@ -10864,6 +11176,7 @@ function buildPrimarySpec(leaves, layerSpec) {
     responsive: layerSpec.responsive ?? leaves[0].responsive,
     theme: layerSpec.theme ?? leaves[0].theme,
     darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
+    watermark: layerSpec.watermark ?? leaves[0].watermark,
     hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries
   };
   return primary;
@@ -10880,7 +11193,9 @@ function compileTable(spec, options) {
   if (options.darkMode) {
     theme = adaptTheme3(theme);
   }
-  return compileTableLayout(tableSpec, options, theme);
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? tableSpec.watermark : options.watermark ?? true;
+  return compileTableLayout({ ...tableSpec, watermark }, options, theme);
 }
 function compileGraph2(spec, options) {
   return compileGraph(spec, options);