@opendata-ai/openchart-engine 8.3.1 → 8.4.0

package/dist/index.js

@@ -10,11 +10,12 @@ import {
   getLayoutStrategy,
   isAxislessMark as isAxislessMark3,
   MAX_SR_TABLE_ROWS,
+  resolveChromeEconomy,
   resolveTheme as resolveTheme7
 } from "@opendata-ai/openchart-core";
 
 // src/annotations/collisions.ts
-import { detectCollision } from "@opendata-ai/openchart-core";
+import { detectCollision, overlapArea as overlapArea2 } from "@opendata-ai/openchart-core";
 
 // src/annotations/constants.ts
 var DEFAULT_ANNOTATION_FONT_SIZE = 13;
@@ -1157,6 +1158,12 @@ function resolveAnnotationCollisions(annotations, originalSpecs, scales, chartAr
   };
   const isText = (a) => a.type === "text" && !!a.label;
   const placedBounds = [];
+  for (const annotation of annotations) {
+    if (isText(annotation) || !annotation.bounds) continue;
+    if (annotation.bounds.width > 0 && annotation.bounds.height > 0) {
+      placedBounds.push(annotation.bounds);
+    }
+  }
   for (let i = 0; i < annotations.length; i++) {
     const annotation = annotations[i];
     if (!isText(annotation) || !isPinned(annotation, i)) continue;
@@ -1223,6 +1230,100 @@ function clampAnnotationsToBounds(annotations, svgWidth, svgHeight, measure = he
     moveAnnotationBy(annotation, label, dx, dy, measure);
   }
 }
+var REFLINE_OBSTACLE_KINDS = /* @__PURE__ */ new Set([
+  "mark",
+  "data-label",
+  "annotation",
+  "endpoint-label"
+]);
+var MAX_REFLINE_SLIDE_CANDIDATES = 48;
+function hasExplicitLabelOffset(spec) {
+  return (spec.labelOffset?.dx ?? 0) !== 0 || (spec.labelOffset?.dy ?? 0) !== 0;
+}
+function nudgeRefLineLabel(annotation, spec, obstacles, chartArea, measure = heuristicMeasure) {
+  if (annotation.type !== "refline" || !annotation.label || !annotation.line) return false;
+  if (hasExplicitLabelOffset(spec)) return false;
+  const label = annotation.label;
+  const bounds = annotation.bounds ?? annotationBlockBounds(annotation, label, measure);
+  const relevant = obstacles.filter(
+    (obs) => obs.width > 0 && obs.height > 0 && REFLINE_OBSTACLE_KINDS.has(obs.kind)
+  );
+  if (!relevant.some((obs) => detectCollision(bounds, obs))) return false;
+  const { start, end } = annotation.line;
+  const isHorizontal = Math.abs(end.y - start.y) <= Math.abs(end.x - start.x);
+  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const anchor = label.style.textAnchor;
+  const flipped = anchor === "start" ? "end" : anchor === "end" ? "start" : void 0;
+  const mirror = (value, from, to) => to - (value - from);
+  const candidates = [];
+  if (isHorizontal) {
+    const atEnd = Math.abs(label.x - end.x) <= Math.abs(label.x - start.x);
+    const swapDx = mirror(label.x, atEnd ? end.x : start.x, atEnd ? start.x : end.x) - label.x;
+    const flipDy = (label.y <= start.y ? 1 : -1) * (fontSize + NUDGE_PADDING);
+    candidates.push({ dx: swapDx, dy: 0, textAnchor: flipped });
+    candidates.push({ dx: 0, dy: flipDy });
+    candidates.push({ dx: swapDx, dy: flipDy, textAnchor: flipped });
+  } else {
+    const atEnd = Math.abs(label.y - end.y) <= Math.abs(label.y - start.y);
+    const swapDy = mirror(label.y, atEnd ? end.y : start.y, atEnd ? start.y : end.y) - label.y;
+    const flipDx = -2 * (label.x - start.x);
+    candidates.push({ dx: 0, dy: swapDy });
+    candidates.push({ dx: flipDx, dy: 0, textAnchor: flipped });
+    candidates.push({ dx: flipDx, dy: swapDy, textAnchor: flipped });
+  }
+  const slides = generateNudgeCandidates(bounds, relevant, NUDGE_PADDING).filter((c) => isHorizontal ? c.dy === 0 : c.dx === 0).slice(0, MAX_REFLINE_SLIDE_CANDIDATES);
+  for (const slide of slides) {
+    candidates.push({ dx: slide.dx, dy: slide.dy });
+  }
+  for (const { dx, dy, textAnchor } of candidates) {
+    if (dx === 0 && dy === 0 && !textAnchor) continue;
+    const trial = {
+      ...label,
+      x: label.x + dx,
+      y: label.y + dy,
+      ...textAnchor ? { style: { ...label.style, textAnchor } } : {}
+    };
+    const trialBounds = annotationBlockBounds(annotation, trial, measure);
+    if (relevant.some((obs) => detectCollision(trialBounds, obs))) continue;
+    const centerX = trialBounds.x + trialBounds.width / 2;
+    const centerY = trialBounds.y + trialBounds.height / 2;
+    const inBounds = centerX >= chartArea.x && centerX <= chartArea.x + chartArea.width && centerY >= chartArea.y - fontSize && centerY <= chartArea.y + chartArea.height + fontSize;
+    if (!inBounds) continue;
+    moveAnnotationBy(annotation, label, dx, dy, measure, textAnchor);
+    return true;
+  }
+  return false;
+}
+var PINNED_OVERLAP_RATIO = 0.25;
+function collectPinnedOverlapWarnings(annotations, specs, obstacles, measure = heuristicMeasure) {
+  const marks = obstacles.filter((obs) => obs.kind === "mark" && obs.width > 0 && obs.height > 0);
+  if (marks.length === 0) return [];
+  const warnings = [];
+  for (const [i, annotation] of annotations.entries()) {
+    if (!annotation.label) continue;
+    const spec = specs[annotation.specIndex ?? i];
+    if (!spec) continue;
+    const pinned = spec.type === "text" && hasExplicitOffset(spec) || spec.type === "refline" && hasExplicitLabelOffset(spec);
+    if (!pinned) continue;
+    const bounds = annotation.bounds ?? annotationBlockBounds(annotation, annotation.label, measure);
+    const area3 = bounds.width * bounds.height;
+    if (area3 <= 0) continue;
+    let covered = 0;
+    let hits = 0;
+    for (const mark of marks) {
+      const overlap = overlapArea2(bounds, mark);
+      if (overlap <= 0) continue;
+      covered += overlap;
+      hits++;
+    }
+    if (hits > 0 && covered / area3 > PINNED_OVERLAP_RATIO) {
+      warnings.push(
+        `[openchart] annotation "${annotation.label.text}" overlaps ${hits} mark${hits === 1 ? "" : "s"}; it is pinned by an explicit offset. Remove the offset to let auto-placement find a clear spot.`
+      );
+    }
+  }
+  return warnings;
+}
 
 // src/annotations/resolve-range.ts
 function resolveRangeAnnotation(annotation, scales, chartArea, isDark, fontFamily) {
@@ -1289,7 +1390,7 @@ function resolveRangeAnnotation(annotation, scales, chartArea, isDark, fontFamil
 }
 
 // src/annotations/resolve-refline.ts
-function resolveRefLineAnnotation(annotation, scales, chartArea, isDark, fontFamily) {
+function resolveRefLineAnnotation(annotation, scales, chartArea, isDark, measure = heuristicMeasure, fontFamily) {
   let start;
   let end;
   if (annotation.y !== void 0) {
@@ -1382,7 +1483,7 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark, fontFam
     };
   }
   const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-  return {
+  const resolved = {
     type: "refline",
     id: annotation.id,
     line: { start, end },
@@ -1392,6 +1493,10 @@ function resolveRefLineAnnotation(annotation, scales, chartArea, isDark, fontFam
     strokeWidth: annotation.strokeWidth ?? 1,
     zIndex: annotation.zIndex
   };
+  if (label) {
+    resolved.bounds = annotationBlockBounds(resolved, label, measure);
+  }
+  return resolved;
 }
 
 // src/annotations/compute.ts
@@ -1461,6 +1566,7 @@ function computeAnnotations(spec, scalesOrCtx, chartArea, strategy, isDark, obst
           ctx.scales,
           ctx.chartArea,
           ctx.isDark,
+          ctx.measure,
           ctx.fontFamily
         );
         break;
@@ -1476,6 +1582,9 @@ function computeAnnotations(spec, scalesOrCtx, chartArea, strategy, isDark, obst
           ctx.measure
         );
       }
+      if (annotation.type === "refline" && ctx.obstacles.length > 0) {
+        nudgeRefLineLabel(resolved, annotation, ctx.obstacles, ctx.chartArea, ctx.measure);
+      }
       resolved.specIndex = specIndex;
       annotations.push(resolved);
     }
@@ -2274,7 +2383,40 @@ function formatLabelValue(value, ctx) {
 }
 
 // src/charts/utils.ts
-var DEFAULT_COLOR = "#1b7fa3";
+import {
+  adaptForLightLineStroke,
+  CATEGORICAL_PALETTE,
+  getRepresentativeColor
+} from "@opendata-ai/openchart-core";
+var DEFAULT_COLOR = CATEGORICAL_PALETTE[0];
+var BAR_CORNER_RADIUS = 2;
+function valueEndCorners(orient, negative) {
+  if (orient === "horizontal") {
+    return negative ? { tl: true, tr: false, br: false, bl: true } : { tl: false, tr: true, br: true, bl: false };
+  }
+  return negative ? { tl: false, tr: false, br: true, bl: true } : { tl: true, tr: true, br: false, bl: false };
+}
+function stackSeamStroke(theme) {
+  return resolveKnockoutColor(theme);
+}
+function resolveKnockoutColor(theme) {
+  return theme?.colors?.neutral?.surface ?? "#ffffff";
+}
+function isStrokeSeriesMark(markType) {
+  return markType === "line" || markType === "area";
+}
+function adaptSeriesStroke(color, theme) {
+  const str = getRepresentativeColor(color);
+  return theme && !theme.isDark ? adaptForLightLineStroke(str) : str;
+}
+function hasExplicitColorRange(spec) {
+  const colorEnc = spec.encoding?.color;
+  if (!colorEnc || !("field" in colorEnc)) return false;
+  return Array.isArray(colorEnc.scale?.range);
+}
+function resolveSeriesStroke(spec, color, theme) {
+  return hasExplicitColorRange(spec) ? getRepresentativeColor(color) : adaptSeriesStroke(color, theme);
+}
 function scaleValue(scale, scaleType, value) {
   if (value == null) return null;
   if (scaleType === "time" || scaleType === "utc") {
@@ -2348,6 +2490,14 @@ function getSequentialColor(scales, value, fallback = DEFAULT_COLOR) {
 }
 
 // src/charts/bar/compute.ts
+function applyStackSeams(marks, theme) {
+  const seam = stackSeamStroke(theme);
+  for (const mark of marks) {
+    if (mark.stackGroup === void 0) continue;
+    mark.stroke = seam;
+    mark.strokeWidth = 1;
+  }
+}
 function orientGradientForHorizontalBar(grad) {
   if (grad.gradient !== "linear") return grad;
   const lg = grad;
@@ -2357,7 +2507,7 @@ function orientGradientForHorizontalBar(grad) {
 }
 var MIN_BAR_WIDTH = 1;
 var MIN_GROUPED_BAR_THICKNESS = 8;
-function computeBarMarks(spec, scales, _chartArea, _strategy, containerWidth) {
+function computeBarMarks(spec, scales, _chartArea, _strategy, containerWidth, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -2440,6 +2590,7 @@ function computeBarMarks(spec, scales, _chartArea, _strategy, containerWidth) {
   }
   const categoryField = yChannel.field;
   stampBarKeys(marks, categoryField, colorField);
+  applyStackSeams(marks, theme);
   return applyMarkDefOverrides(marks, spec, bandwidth);
 }
 function stampBarKeys(marks, categoryField, colorField) {
@@ -2485,6 +2636,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
         height: bandwidth,
         fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
         cornerRadius: 0,
+        seriesKey: groupKey3,
         data: row,
         aria,
         orient: "horizontal",
@@ -2541,7 +2693,9 @@ function computeGroupedBars(data, valueField, categoryField, colorField, xScale,
         width: barWidth,
         height: subBandHeight,
         fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
-        cornerRadius: 2,
+        cornerRadius: BAR_CORNER_RADIUS,
+        cornerRadiusSides: valueEndCorners("horizontal", value < 0),
+        seriesKey: groupKey3,
         data: row,
         aria,
         orient: "horizontal"
@@ -2572,7 +2726,9 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
       width: barWidth,
       height: bandwidth,
       fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
-      cornerRadius: 2,
+      cornerRadius: BAR_CORNER_RADIUS,
+      cornerRadiusSides: valueEndCorners("horizontal", value < 0),
+      seriesKey: groupKey3,
       data: row,
       aria,
       orient: "horizontal"
@@ -2607,6 +2763,7 @@ function applyMarkDefOverrides(marks, spec, bandwidth) {
     if (isStacked2 && !isStackRight) continue;
     if (crSpec === "pill") {
       mark.cornerRadius = effectiveHeight / 2;
+      mark.cornerRadiusSides = void 0;
     } else if (typeof crSpec === "number") {
       mark.cornerRadius = crSpec;
     } else {
@@ -2651,7 +2808,8 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
       width: barWidth,
       height: bandwidth,
       fill: isGradientDef(color) ? orientGradientForHorizontalBar(color) : color,
-      cornerRadius: 2,
+      cornerRadius: BAR_CORNER_RADIUS,
+      cornerRadiusSides: valueEndCorners("horizontal", value < 0),
       data: row,
       aria,
       orient: "horizontal"
@@ -2663,7 +2821,7 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
 // src/charts/bar/labels.ts
 import {
   estimateTextWidth as estimateTextWidth3,
-  getRepresentativeColor,
+  getRepresentativeColor as getRepresentativeColor2,
   pickLabelColor,
   resolveCollisions
 } from "@opendata-ai/openchart-core";
@@ -2703,7 +2861,7 @@ 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", labelFormatter, labelPrefix, valueField, labelColor, darkMode = false, fontSize, labelSuffix) {
+function computeBarLabels(marks, chartArea, density = "auto", labelFormatter, labelPrefix, valueField, labelColor, darkMode = false, fontSize, labelSuffix) {
   const FONT_SIZE = fontSize ?? LABEL_FONT_SIZE;
   const targetMarks = filterByDensity(marks, density);
   const candidates = [];
@@ -2737,7 +2895,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormatter, l
     const isStacked2 = mark.stackGroup !== void 0;
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
     const isNegative = Number.isFinite(rawNum) ? rawNum < 0 : false;
-    const bgColor = getRepresentativeColor(mark.fill);
+    const bgColor = getRepresentativeColor2(mark.fill);
     let anchorX;
     let fill;
     let textAnchor;
@@ -2757,12 +2915,12 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormatter, l
       }
     } else {
       if (isNegative) {
-        anchorX = mark.x - LABEL_PADDING;
-        fill = labelColor ?? getRepresentativeColor(mark.fill);
+        anchorX = Math.min(mark.x - LABEL_PADDING, chartArea.x + chartArea.width - LABEL_PADDING);
+        fill = labelColor ?? getRepresentativeColor2(mark.fill);
         textAnchor = "end";
       } else {
-        anchorX = mark.x + mark.width + LABEL_PADDING;
-        fill = labelColor ?? getRepresentativeColor(mark.fill);
+        anchorX = Math.max(mark.x + mark.width + LABEL_PADDING, chartArea.x + LABEL_PADDING);
+        fill = labelColor ?? getRepresentativeColor2(mark.fill);
         textAnchor = "start";
       }
     }
@@ -2846,7 +3004,7 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormatter, l
 
 // src/charts/bar/index.ts
 var barRenderer = (spec, scales, chartArea, strategy, theme, containerWidth) => {
-  const marks = computeBarMarks(spec, scales, chartArea, strategy, containerWidth);
+  const marks = computeBarMarks(spec, scales, chartArea, strategy, containerWidth, theme);
   const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labelFormatter = resolveFieldFormatter({
     surfaceFormat: spec.labels.format,
@@ -2981,7 +3139,7 @@ function minimalFreeOffset(intervals) {
 
 // src/charts/beeswarm/compute.ts
 var DEFAULT_DOT_RADIUS2 = 4;
-function computeBeeswarmMarks(spec, scales, chartArea, _strategy) {
+function computeBeeswarmMarks(spec, scales, chartArea, _strategy, theme) {
   const encoding = spec.encoding;
   const isHorizontal = encoding.x?.type === "quantitative";
   const valueChannel = isHorizontal ? encoding.x : encoding.y;
@@ -3062,7 +3220,7 @@ function computeBeeswarmMarks(spec, scales, chartArea, _strategy) {
       cy: isHorizontal ? cross : dot.position,
       r: dot.radius,
       fill: color,
-      stroke: "#ffffff",
+      stroke: resolveKnockoutColor(theme),
       strokeWidth: 1,
       data: dot.row,
       aria
@@ -3081,8 +3239,8 @@ function computeBeeswarmMarks(spec, scales, chartArea, _strategy) {
 }
 
 // src/charts/beeswarm/index.ts
-var beeswarmRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  return computeBeeswarmMarks(spec, scales, chartArea, strategy);
+var beeswarmRenderer = (spec, scales, chartArea, strategy, theme) => {
+  return computeBeeswarmMarks(spec, scales, chartArea, strategy, theme);
 };
 
 // src/charts/calendar/compute.ts
@@ -3090,10 +3248,11 @@ import { defaultNumberFormatter as defaultNumberFormatter4, formatDate } from "@
 import { utcDay, utcMonday, utcSunday } from "d3-time";
 var MIN_CELL_SIZE = 7;
 var MAX_STEP = 20;
-var MIN_STEP = MIN_CELL_SIZE + 1;
+var MIN_CELL_GAP = 2;
+var MIN_STEP = MIN_CELL_SIZE + MIN_CELL_GAP;
 var BAND_GAP = 18;
 var WEEKDAY_LABEL_GAP = 6;
-var DEFAULT_CELL_RADIUS = 1;
+var DEFAULT_CELL_RADIUS = 2;
 var WEEKDAY_LABELS = [
   { dow: 1, label: "Mon" },
   { dow: 3, label: "Wed" },
@@ -3168,7 +3327,7 @@ function computeCalendarMarks(spec, scales, chartArea, theme) {
     MAX_STEP,
     Math.max(MIN_STEP, Math.floor(Math.min(stepFromWidth, stepFromHeight)))
   );
-  const cellGap = step >= 14 ? 3 : step >= 10 ? 2 : 1;
+  const cellGap = step >= 14 ? 3 : MIN_CELL_GAP;
   const cell = step - cellGap;
   const gridWidth = maxColumns * step - cellGap;
   const bandHeight = monthRow + 7 * step - cellGap;
@@ -3251,6 +3410,7 @@ function computeCalendarMarks(spec, scales, chartArea, theme) {
           height: cell,
           fill: getSequentialColor(scales, datum.value),
           cornerRadius: cellRadius,
+          shapeRendering: "crispEdges",
           data: datum.row,
           aria: {
             label: `${dateLabel}, ${colorEnc.field}: ${calendarFmt(datum.value)}`
@@ -3266,6 +3426,7 @@ function computeCalendarMarks(spec, scales, chartArea, theme) {
           height: cell,
           fill: theme.colors.annotationFill,
           cornerRadius: cellRadius,
+          shapeRendering: "crispEdges",
           data: {},
           aria: { decorative: true }
         });
@@ -3282,8 +3443,16 @@ var calendarRenderer = (spec, scales, chartArea, _strategy, theme) => {
 
 // src/charts/column/compute.ts
 import { isGradientDef as isGradientDef2 } from "@opendata-ai/openchart-core";
+function applyStackSeams2(marks, theme) {
+  const seam = stackSeamStroke(theme);
+  for (const mark of marks) {
+    if (mark.stackGroup === void 0) continue;
+    mark.stroke = seam;
+    mark.strokeWidth = 1;
+  }
+}
 var MIN_COLUMN_HEIGHT = 1;
-function computeColumnMarks(spec, scales, _chartArea, _strategy) {
+function computeColumnMarks(spec, scales, _chartArea, _strategy, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -3365,6 +3534,7 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
   }
   const categoryField = xChannel.field;
   stampColumnKeys(marks, categoryField, colorField);
+  applyStackSeams2(marks, theme);
   return applyMarkDefOverrides2(marks, spec, bandwidth);
 }
 function stampColumnKeys(marks, categoryField, colorField) {
@@ -3412,7 +3582,8 @@ function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, b
       width: bandwidth,
       height: columnHeight,
       fill: color,
-      cornerRadius: 2,
+      cornerRadius: BAR_CORNER_RADIUS,
+      cornerRadiusSides: valueEndCorners("vertical", value < 0),
       data: row,
       aria,
       orient: "vertical"
@@ -3443,7 +3614,9 @@ function computeColoredColumns(data, categoryField, valueField, colorField, xSca
       width: bandwidth,
       height: columnHeight,
       fill: color,
-      cornerRadius: 2,
+      cornerRadius: BAR_CORNER_RADIUS,
+      cornerRadiusSides: valueEndCorners("vertical", value < 0),
+      seriesKey: groupKey3,
       data: row,
       aria,
       orient: "vertical"
@@ -3491,7 +3664,9 @@ function computeGroupedColumns(data, categoryField, valueField, colorField, xSca
         width: subBandWidth,
         height: columnHeight,
         fill: color,
-        cornerRadius: 2,
+        cornerRadius: BAR_CORNER_RADIUS,
+        cornerRadiusSides: valueEndCorners("vertical", value < 0),
+        seriesKey: groupKey3,
         data: row,
         aria,
         orient: "vertical"
@@ -3532,6 +3707,7 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
         height: columnHeight,
         fill: color,
         cornerRadius: 0,
+        seriesKey: groupKey3,
         data: row,
         aria,
         orient: "vertical",
@@ -3568,6 +3744,7 @@ function applyMarkDefOverrides2(marks, spec, bandwidth) {
     if (isStacked2 && !isStackTop) continue;
     if (crSpec === "pill") {
       mark.cornerRadius = effectiveWidth / 2;
+      mark.cornerRadiusSides = void 0;
     } else if (typeof crSpec === "number") {
       mark.cornerRadius = crSpec;
     } else {
@@ -3583,7 +3760,7 @@ function applyMarkDefOverrides2(marks, spec, bandwidth) {
 // src/charts/column/labels.ts
 import {
   estimateTextWidth as estimateTextWidth4,
-  getRepresentativeColor as getRepresentativeColor2,
+  getRepresentativeColor as getRepresentativeColor3,
   pickLabelColor as pickLabelColor2,
   resolveCollisions as resolveCollisions2,
   textAscent
@@ -3630,10 +3807,10 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormatter
     let fill;
     if (isStacked2) {
       anchorY = mark.y + mark.height / 2 - textHeight / 2;
-      fill = labelColor ?? pickLabelColor2(getRepresentativeColor2(mark.fill), darkMode);
+      fill = labelColor ?? pickLabelColor2(getRepresentativeColor3(mark.fill), darkMode);
     } else {
       anchorY = isNegative ? mark.y + mark.height + LABEL_OFFSET_Y : mark.y - LABEL_OFFSET_Y - textHeight;
-      fill = labelColor ?? getRepresentativeColor2(mark.fill);
+      fill = labelColor ?? getRepresentativeColor3(mark.fill);
     }
     fitsInSegment.push(!(isStacked2 && textHeight > mark.height - 2 * LABEL_PADDING_Y));
     candidates.push({
@@ -3700,7 +3877,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormatter
 
 // src/charts/column/index.ts
 var columnRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computeColumnMarks(spec, scales, chartArea, strategy);
+  const marks = computeColumnMarks(spec, scales, chartArea, strategy, theme);
   const valueField = spec.encoding?.y && "field" in spec.encoding.y ? spec.encoding.y.field : void 0;
   const labelFormatter = resolveFieldFormatter({
     surfaceFormat: spec.labels.format,
@@ -3729,7 +3906,7 @@ var columnRenderer = (spec, scales, chartArea, strategy, theme) => {
 var DOT_RADIUS = 6;
 var STEM_WIDTH = 2;
 var STEM_COLOR = "#cccccc";
-function computeDotMarks(spec, scales, _chartArea, _strategy) {
+function computeDotMarks(spec, scales, _chartArea, _strategy, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -3759,7 +3936,8 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
       xScale,
       yScale,
       bandwidth,
-      scales
+      scales,
+      resolveKnockoutColor(theme)
     );
   } else {
     marks = computeLollipopMarks(
@@ -3771,7 +3949,8 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
       bandwidth,
       baseline,
       scales,
-      isSequentialColor
+      isSequentialColor,
+      resolveKnockoutColor(theme)
     );
   }
   const pointMarks = marks.filter((m) => m.type === "point");
@@ -3786,7 +3965,7 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
   }
   return marks;
 }
-function computeDumbbellMarks(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, scales) {
+function computeDumbbellMarks(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, scales, dotKnockout) {
   const marks = [];
   const categoryGroups = groupByField([...data], categoryField);
   for (const [category, rows] of categoryGroups) {
@@ -3834,7 +4013,7 @@ function computeDumbbellMarks(data, valueField, categoryField, colorField, xScal
         cy,
         r: DOT_RADIUS,
         fill: color,
-        stroke: "#ffffff",
+        stroke: dotKnockout,
         strokeWidth: 2,
         data: row,
         aria: dotAria
@@ -3843,7 +4022,7 @@ function computeDumbbellMarks(data, valueField, categoryField, colorField, xScal
   }
   return marks;
 }
-function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, isSequentialColor = false) {
+function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, isSequentialColor = false, dotKnockout = "#ffffff") {
   const marks = [];
   for (const row of data) {
     const category = String(row[categoryField] ?? "");
@@ -3880,7 +4059,7 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
       cy,
       r: DOT_RADIUS,
       fill: color,
-      stroke: "#ffffff",
+      stroke: dotKnockout,
       strokeWidth: 2,
       data: row,
       aria: dotAria
@@ -3892,7 +4071,7 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
 // src/charts/dot/labels.ts
 import {
   estimateTextWidth as estimateTextWidth5,
-  getRepresentativeColor as getRepresentativeColor3,
+  getRepresentativeColor as getRepresentativeColor4,
   resolveCollisions as resolveCollisions3
 } from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE3 = 11;
@@ -3934,7 +4113,7 @@ function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix, labe
         fontFamily: "system-ui, -apple-system, sans-serif",
         fontSize: LABEL_FONT_SIZE3,
         fontWeight: LABEL_FONT_WEIGHT3,
-        fill: getRepresentativeColor3(mark.fill),
+        fill: getRepresentativeColor4(mark.fill),
         lineHeight: 1.2,
         textAnchor: "start",
         dominantBaseline: "central",
@@ -3956,8 +4135,8 @@ function computeDotLabels(marks, _chartArea, density = "auto", labelPrefix, labe
 }
 
 // src/charts/dot/index.ts
-var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const marks = computeDotMarks(spec, scales, chartArea, strategy);
+var dotRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computeDotMarks(spec, scales, chartArea, strategy, theme);
   const pointMarks = marks.filter((m) => m.type === "point");
   const valueField = spec.encoding?.x && "field" in spec.encoding.x ? spec.encoding.x.field : void 0;
   const labelFormatter = resolveFieldFormatter({
@@ -3984,13 +4163,13 @@ var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
 };
 
 // src/charts/line/index.ts
-import { getRepresentativeColor as getRepresentativeColor6 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor7 } from "@opendata-ai/openchart-core";
 
 // src/charts/line/area.ts
-import { getRepresentativeColor as getRepresentativeColor4, isGradientDef as isGradientDef3 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor6, isGradientDef as isGradientDef3 } from "@opendata-ai/openchart-core";
 import {
   area as area2,
-  line as line2,
+  line as line3,
   stack,
   stackOffsetExpand,
   stackOffsetNone,
@@ -3998,6 +4177,10 @@ import {
   stackOrderNone
 } from "d3-shape";
 
+// src/charts/line/compute.ts
+import { getRepresentativeColor as getRepresentativeColor5 } from "@opendata-ai/openchart-core";
+import { line as line2 } from "d3-shape";
+
 // src/charts/line/curves.ts
 import {
   area,
@@ -4043,29 +4226,218 @@ function buildAreaPath(topPoints, bottomPoints, interpolate) {
   return generator(paired) ?? "";
 }
 
+// src/charts/line/compute.ts
+var LINE_STROKE_WIDTH = 2;
+var DEFAULT_POINT_RADIUS = 3;
+var ENDPOINT_DOT_RADIUS = 4;
+var STROKE_DASH_PATTERNS = ["", "6 4", "2 3", "8 4 2 4", "4 4", "1 3"];
+function computeLineMarks(spec, scales, _chartArea, _strategy, theme) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const isSequentialColor = colorEnc?.type === "quantitative";
+  const colorField = isSequentialColor ? void 0 : colorEnc?.field;
+  const sequentialColorField = isSequentialColor ? colorEnc.field : void 0;
+  const dashEnc = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
+  const dashField = dashEnc?.field;
+  const dashIndexByValue = /* @__PURE__ */ new Map();
+  if (dashField) {
+    for (const row of spec.data) {
+      const value = row[dashField];
+      if (value == null) continue;
+      const key = String(value);
+      if (!dashIndexByValue.has(key)) dashIndexByValue.set(key, dashIndexByValue.size);
+    }
+  }
+  const groups = groupByField(spec.data, colorField ?? dashField);
+  const pointSeparator = resolveKnockoutColor(theme);
+  const mutedMarks = [];
+  const highlightedMarks = [];
+  const highlight = spec.highlight ?? [];
+  const highlightActive = highlight.length > 0;
+  for (const [seriesKey, rows] of groups) {
+    const color = isSequentialColor ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField)) : getColor(scales, seriesKey);
+    const strokeColor = spec.markDef.stroke ?? resolveSeriesStroke(spec, color, theme);
+    const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
+    const pointsWithData = [];
+    const segments = [];
+    let currentSegment = [];
+    for (const row of sortedRows) {
+      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) {
+        if (currentSegment.length > 0) {
+          segments.push(currentSegment);
+          currentSegment = [];
+        }
+        continue;
+      }
+      const point = { x: xVal, y: yVal };
+      currentSegment.push(point);
+      pointsWithData.push({ ...point, row });
+    }
+    if (currentSegment.length > 0) {
+      segments.push(currentSegment);
+    }
+    const curve = resolveCurve(spec.markDef.interpolate);
+    const lineGenerator = line2().x((d) => d.x).y((d) => d.y).curve(curve);
+    const allPoints = [];
+    const pathParts = [];
+    for (const segment of segments) {
+      if (segment.length === 0) continue;
+      const pathStr = lineGenerator(segment);
+      if (pathStr) {
+        pathParts.push(pathStr);
+      }
+      allPoints.push(...segment);
+    }
+    if (allPoints.length === 0) continue;
+    const ariaLabel = seriesKey === "__default__" ? `Line with ${allPoints.length} data points` : `${seriesKey}: line with ${allPoints.length} data points`;
+    const aria = {
+      label: ariaLabel
+    };
+    const combinedPath = pathParts.join(" ");
+    const seriesStyleKey = seriesKey === "__default__" ? void 0 : seriesKey;
+    const styleOverride = seriesStyleKey ? spec.seriesStyles?.[seriesStyleKey] : void 0;
+    const isMuted = highlightActive && !highlight.includes(seriesKey);
+    let resolvedStrokeWidth = styleOverride?.strokeWidth ?? spec.markDef.strokeWidth ?? LINE_STROKE_WIDTH;
+    if (isMuted) {
+      resolvedStrokeWidth = Math.max(1, resolvedStrokeWidth * 0.75);
+    }
+    let strokeDasharray;
+    if (styleOverride?.lineStyle === "dashed") strokeDasharray = "6 4";
+    else if (styleOverride?.lineStyle === "dotted") strokeDasharray = "2 3";
+    else if (dashField) {
+      const dashValue = rows[0]?.[dashField];
+      if (dashValue != null) {
+        const idx = dashIndexByValue.get(String(dashValue)) ?? 0;
+        const pattern = STROKE_DASH_PATTERNS[idx % STROKE_DASH_PATTERNS.length];
+        if (pattern) strokeDasharray = pattern;
+      }
+    }
+    const keyField = encoding.key && "field" in encoding.key ? encoding.key.field : void 0;
+    const rawPointKeys = pointsWithData.map(
+      (p) => keyField ? serializeKeyValue(p.row[keyField]) : serializeKeyValue(p.row[xChannel.field])
+    );
+    const lineMark = {
+      type: "line",
+      key: seriesStyleKey ?? "series",
+      pointKeys: dedupeKeys(rawPointKeys),
+      interpolate: spec.markDef.interpolate ?? "monotone",
+      points: allPoints,
+      path: combinedPath,
+      stroke: strokeColor,
+      strokeWidth: resolvedStrokeWidth,
+      strokeDasharray,
+      opacity: styleOverride?.opacity,
+      seriesKey: seriesStyleKey,
+      data: pointsWithData.map((p) => p.row),
+      dataPoints: pointsWithData.map((p) => ({ x: p.x, y: p.y, datum: p.row })),
+      aria
+    };
+    const bucket = isMuted ? mutedMarks : highlightedMarks;
+    bucket.push(lineMark);
+    const markPoint = spec.markDef.point;
+    const isSingleEndpoint = markPoint === "last" || markPoint === "first";
+    const showPoints = markPoint === true || markPoint === "transparent" || markPoint === "endpoints" || isSingleEndpoint || isSequentialColor;
+    if (showPoints) {
+      const isTransparent = markPoint === "transparent";
+      const isEndpoints = markPoint === "endpoints";
+      const seriesShowPoints = styleOverride?.showPoints !== false;
+      const lastIdx = pointsWithData.length - 1;
+      for (let i = 0; i < pointsWithData.length; i++) {
+        const p = pointsWithData[i];
+        const isEndpoint = i === 0 || i === lastIdx;
+        const isLast = i === lastIdx;
+        const isFirst = i === 0;
+        if (isSingleEndpoint) {
+          if (markPoint === "last" && !isLast) continue;
+          if (markPoint === "first" && !isFirst) continue;
+        }
+        const visible = seriesShowPoints && !isTransparent && (!isEndpoints || isEndpoint);
+        let pointColor = color;
+        if (isSequentialColor) {
+          const val = Number(p.row[sequentialColorField]);
+          pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color;
+        }
+        const hollow = isEndpoints && visible;
+        const pointColorStr = getRepresentativeColor5(pointColor);
+        const pointKey = keyField ? serializeKeyValue(p.row[keyField]) : seriesStyleKey ? `${seriesStyleKey}|${serializeKeyValue(p.row[xChannel.field])}` : serializeKeyValue(p.row[xChannel.field]);
+        if (isSingleEndpoint) {
+          bucket.push({
+            type: "point",
+            key: pointKey,
+            cx: p.x,
+            cy: p.y,
+            r: ENDPOINT_DOT_RADIUS,
+            fill: strokeColor,
+            stroke: "transparent",
+            strokeWidth: 0,
+            fillOpacity: 1,
+            data: p.row,
+            aria: { decorative: true }
+          });
+          continue;
+        }
+        const pointMark = {
+          type: "point",
+          key: pointKey,
+          cx: p.x,
+          cy: p.y,
+          r: visible ? DEFAULT_POINT_RADIUS : 0,
+          fill: hollow ? "transparent" : pointColorStr,
+          stroke: hollow ? pointColorStr : visible ? pointSeparator : "transparent",
+          strokeWidth: visible ? 1.5 : 0,
+          fillOpacity: isTransparent ? 0 : 1,
+          data: p.row,
+          aria: {
+            label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`
+          }
+        };
+        bucket.push(pointMark);
+      }
+    }
+  }
+  const allMarks = [...mutedMarks, ...highlightedMarks];
+  const lineMarks = allMarks.filter((m) => m.type === "line");
+  const lineKeys = dedupeKeys(lineMarks.map((m) => m.key));
+  lineMarks.forEach((m, i) => {
+    m.key = lineKeys[i];
+  });
+  const pointMarks = allMarks.filter((m) => m.type === "point");
+  if (pointMarks.length > 0) {
+    const pointKeys = dedupeKeys(pointMarks.map((m) => m.key ?? ""));
+    pointMarks.forEach((m, i) => {
+      m.key = pointKeys[i];
+    });
+  }
+  return allMarks;
+}
+function _getMidValue(rows, field) {
+  const values = rows.map((r) => Number(r[field])).filter(Number.isFinite);
+  if (values.length === 0) return 0;
+  const sorted = values.sort((a, b) => a - b);
+  return sorted[Math.floor(sorted.length / 2)];
+}
+
 // src/charts/line/area.ts
 var DEFAULT_FILL_OPACITY = 0.15;
 function isStacked(stackProp) {
   return stackProp !== null && stackProp !== false;
 }
 var SOLO_GRADIENT_STOPS = [
-  { offset: 0, opacity: 0.42 },
-  { offset: 0.6, opacity: 0.1 },
+  { offset: 0, opacity: 0.2 },
   { offset: 1, opacity: 0 }
 ];
 var OVERLAP_GRADIENT_STOPS = [
-  { offset: 0, opacity: 0.22 },
-  { offset: 0.7, opacity: 0.04 },
-  { offset: 1, opacity: 0 }
-];
-var STACKED_GRADIENT_STOPS = [
-  { offset: 0, opacity: 0.65 },
-  { offset: 1, opacity: 0.35 }
-];
-var STACKED_GRADIENT_STOPS_LIGHT = [
-  { offset: 0, opacity: 0.65 },
+  { offset: 0, opacity: 0.14 },
   { offset: 1, opacity: 0 }
 ];
+var STACKED_FILL_OPACITY = 0.92;
 function buildGradientFill(colorStr, stops) {
   return {
     gradient: "linear",
@@ -4076,7 +4448,7 @@ function buildGradientFill(colorStr, stops) {
     stops: stops.map((s) => ({ offset: s.offset, color: colorStr, opacity: s.opacity }))
   };
 }
-function computeSingleArea(spec, scales, _chartArea) {
+function computeSingleArea(spec, scales, _chartArea, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
@@ -4123,7 +4495,7 @@ function computeSingleArea(spec, scales, _chartArea) {
     const curve = resolveCurve(spec.markDef.interpolate);
     const areaGenerator = area2().x((d) => d.x).y0((d) => d.yBottom).y1((d) => d.yTop).curve(curve);
     const pathStr = areaGenerator(validPoints) ?? "";
-    const topLineGenerator = line2().x((d) => d.x).y((d) => d.yTop).curve(curve);
+    const topLineGenerator = line3().x((d) => d.x).y((d) => d.yTop).curve(curve);
     const topPathStr = topLineGenerator(validPoints) ?? "";
     const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
     const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
@@ -4136,7 +4508,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       fillValue = markFill;
       fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? (y2Channel ? 0.25 : DEFAULT_FILL_OPACITY);
     } else {
-      const colorStr = getRepresentativeColor4(color);
+      const colorStr = getRepresentativeColor6(color);
       fillValue = buildGradientFill(colorStr, defaultGradientStops);
       fillOpacity = 1;
     }
@@ -4155,8 +4527,12 @@ function computeSingleArea(spec, scales, _chartArea) {
       topPath: topPathStr,
       fill: fillValue,
       fillOpacity,
-      stroke: spec.markDef.stroke ?? getRepresentativeColor4(isGradientDef3(fillValue) ? color : fillValue),
-      strokeWidth: spec.markDef.strokeWidth ?? 1.5,
+      // The top edge is a foreground stroke, so it goes through the same
+      // light-canvas adaptation as a line mark's stroke. Otherwise the area's
+      // own top path and the LineMark the renderer draws over it (both from
+      // this series color) come out as two different colors.
+      stroke: spec.markDef.stroke ?? resolveSeriesStroke(spec, isGradientDef3(fillValue) ? color : fillValue, theme),
+      strokeWidth: spec.markDef.strokeWidth ?? LINE_STROKE_WIDTH,
       seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
       data: validPoints.map((p) => p.row),
       dataPoints: validPoints.map((p) => ({ x: p.x, y: p.yTop, datum: p.row })),
@@ -4165,13 +4541,13 @@ function computeSingleArea(spec, scales, _chartArea) {
   }
   return marks;
 }
-function computeStackedArea(spec, scales, chartArea, darkMode) {
+function computeStackedArea(spec, scales, chartArea, theme) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
   const colorField = encoding.color && "field" in encoding.color ? encoding.color.field : void 0;
   if (!xChannel || !yChannel || !scales.x || !scales.y || !colorField) {
-    return computeSingleArea(spec, scales, chartArea);
+    return computeSingleArea(spec, scales, chartArea, theme);
   }
   const sortedData = xChannel.type === "nominal" || xChannel.type === "ordinal" ? spec.data : sortByField(spec.data, xChannel.field);
   const seriesKeys = /* @__PURE__ */ new Set();
@@ -4228,7 +4604,7 @@ function computeStackedArea(spec, scales, chartArea, darkMode) {
     const stackCurve = resolveCurve(spec.markDef.interpolate);
     const areaGenerator = area2().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(stackCurve);
     const pathStr = areaGenerator(validPoints) ?? "";
-    const topLineGenerator = line2().x((p) => p.x).y((p) => p.yTop).curve(stackCurve);
+    const topLineGenerator = line3().x((p) => p.x).y((p) => p.yTop).curve(stackCurve);
     const topPathStr = topLineGenerator(validPoints) ?? "";
     const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
     const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
@@ -4239,265 +4615,67 @@ function computeStackedArea(spec, scales, chartArea, darkMode) {
     let fillValue;
     let fillOpacity;
     if (markFill != null) {
-      fillValue = markFill;
-      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? 0.7;
-    } else {
-      const colorStr = getRepresentativeColor4(color);
-      const stackedStops = darkMode ? STACKED_GRADIENT_STOPS : STACKED_GRADIENT_STOPS_LIGHT;
-      fillValue = buildGradientFill(colorStr, stackedStops);
-      fillOpacity = 1;
-    }
-    const rawPointKeys = validPoints.map((_p, idx) => serializeKeyValue(layer[idx]?.data.__x__));
-    marks.push({
-      type: "area",
-      key: seriesKey,
-      pointKeys: dedupeKeys(rawPointKeys),
-      interpolate: spec.markDef.interpolate ?? "monotone",
-      topPoints,
-      bottomPoints,
-      path: pathStr,
-      topPath: topPathStr,
-      fill: fillValue,
-      fillOpacity,
-      stroke: getRepresentativeColor4(color),
-      strokeWidth: 1,
-      seriesKey,
-      data: layer.map((d) => {
-        const xStr = String(d.data.__x__);
-        return rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? d.data;
-      }),
-      dataPoints: validPoints.map((p, idx) => {
-        const xStr = String(layer[idx]?.data.__x__);
-        const datum = rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? layer[idx]?.data ?? {};
-        return { x: p.x, y: p.yTop, datum };
-      }),
-      aria
-    });
-  }
-  return marks;
-}
-function computeAreaMarks(spec, scales, chartArea, darkMode) {
-  const encoding = spec.encoding;
-  const yChannel = encoding.y;
-  let marks;
-  if (yChannel && isStacked(yChannel.stack)) {
-    marks = computeStackedArea(spec, scales, chartArea, darkMode);
-  } else {
-    marks = computeSingleArea(spec, scales, chartArea);
-  }
-  const areaKeys = dedupeKeys(marks.map((m) => m.key));
-  marks.forEach((m, i) => {
-    m.key = areaKeys[i];
-  });
-  const highlight = spec.highlight ?? [];
-  if (highlight.length > 0) {
-    const highlightSet = new Set(highlight);
-    marks.sort((a, b) => {
-      const aMuted = a.seriesKey != null && !highlightSet.has(a.seriesKey);
-      const bMuted = b.seriesKey != null && !highlightSet.has(b.seriesKey);
-      if (aMuted === bMuted) return 0;
-      return aMuted ? -1 : 1;
-    });
-  }
-  return marks;
-}
-
-// src/charts/line/compute.ts
-import { getRepresentativeColor as getRepresentativeColor5 } from "@opendata-ai/openchart-core";
-import { line as line3 } from "d3-shape";
-var DEFAULT_STROKE_WIDTH = 1.5;
-var DEFAULT_POINT_RADIUS = 3;
-var STROKE_DASH_PATTERNS = ["", "6 4", "2 3", "8 4 2 4", "4 4", "1 3"];
-function computeLineMarks(spec, scales, _chartArea, _strategy) {
-  const encoding = spec.encoding;
-  const xChannel = encoding.x;
-  const yChannel = encoding.y;
-  if (!xChannel || !yChannel || !scales.x || !scales.y) {
-    return [];
-  }
-  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
-  const isSequentialColor = colorEnc?.type === "quantitative";
-  const colorField = isSequentialColor ? void 0 : colorEnc?.field;
-  const sequentialColorField = isSequentialColor ? colorEnc.field : void 0;
-  const dashEnc = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
-  const dashField = dashEnc?.field;
-  const dashIndexByValue = /* @__PURE__ */ new Map();
-  if (dashField) {
-    for (const row of spec.data) {
-      const value = row[dashField];
-      if (value == null) continue;
-      const key = String(value);
-      if (!dashIndexByValue.has(key)) dashIndexByValue.set(key, dashIndexByValue.size);
-    }
-  }
-  const groups = groupByField(spec.data, colorField ?? dashField);
-  const mutedMarks = [];
-  const highlightedMarks = [];
-  const highlight = spec.highlight ?? [];
-  const highlightActive = highlight.length > 0;
-  for (const [seriesKey, rows] of groups) {
-    const color = isSequentialColor ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField)) : getColor(scales, seriesKey);
-    const strokeColor = spec.markDef.stroke ?? getRepresentativeColor5(color);
-    const sortedRows = xChannel.type === "nominal" || xChannel.type === "ordinal" ? rows : sortByField(rows, xChannel.field);
-    const pointsWithData = [];
-    const segments = [];
-    let currentSegment = [];
-    for (const row of sortedRows) {
-      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) {
-        if (currentSegment.length > 0) {
-          segments.push(currentSegment);
-          currentSegment = [];
-        }
-        continue;
-      }
-      const point = { x: xVal, y: yVal };
-      currentSegment.push(point);
-      pointsWithData.push({ ...point, row });
-    }
-    if (currentSegment.length > 0) {
-      segments.push(currentSegment);
-    }
-    const curve = resolveCurve(spec.markDef.interpolate);
-    const lineGenerator = line3().x((d) => d.x).y((d) => d.y).curve(curve);
-    const allPoints = [];
-    const pathParts = [];
-    for (const segment of segments) {
-      if (segment.length === 0) continue;
-      const pathStr = lineGenerator(segment);
-      if (pathStr) {
-        pathParts.push(pathStr);
-      }
-      allPoints.push(...segment);
-    }
-    if (allPoints.length === 0) continue;
-    const ariaLabel = seriesKey === "__default__" ? `Line with ${allPoints.length} data points` : `${seriesKey}: line with ${allPoints.length} data points`;
-    const aria = {
-      label: ariaLabel
-    };
-    const combinedPath = pathParts.join(" ");
-    const seriesStyleKey = seriesKey === "__default__" ? void 0 : seriesKey;
-    const styleOverride = seriesStyleKey ? spec.seriesStyles?.[seriesStyleKey] : void 0;
-    const isMuted = highlightActive && !highlight.includes(seriesKey);
-    let resolvedStrokeWidth = styleOverride?.strokeWidth ?? spec.markDef.strokeWidth ?? DEFAULT_STROKE_WIDTH;
-    if (isMuted) {
-      resolvedStrokeWidth = Math.max(1, resolvedStrokeWidth * 0.75);
-    }
-    let strokeDasharray;
-    if (styleOverride?.lineStyle === "dashed") strokeDasharray = "6 4";
-    else if (styleOverride?.lineStyle === "dotted") strokeDasharray = "2 3";
-    else if (dashField) {
-      const dashValue = rows[0]?.[dashField];
-      if (dashValue != null) {
-        const idx = dashIndexByValue.get(String(dashValue)) ?? 0;
-        const pattern = STROKE_DASH_PATTERNS[idx % STROKE_DASH_PATTERNS.length];
-        if (pattern) strokeDasharray = pattern;
-      }
-    }
-    const keyField = encoding.key && "field" in encoding.key ? encoding.key.field : void 0;
-    const rawPointKeys = pointsWithData.map(
-      (p) => keyField ? serializeKeyValue(p.row[keyField]) : serializeKeyValue(p.row[xChannel.field])
-    );
-    const lineMark = {
-      type: "line",
-      key: seriesStyleKey ?? "series",
+      fillValue = markFill;
+      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? 0.7;
+    } else {
+      fillValue = getRepresentativeColor6(color);
+      fillOpacity = STACKED_FILL_OPACITY;
+    }
+    const rawPointKeys = validPoints.map((_p, idx) => serializeKeyValue(layer[idx]?.data.__x__));
+    marks.push({
+      type: "area",
+      key: seriesKey,
       pointKeys: dedupeKeys(rawPointKeys),
       interpolate: spec.markDef.interpolate ?? "monotone",
-      points: allPoints,
-      path: combinedPath,
-      stroke: strokeColor,
-      strokeWidth: resolvedStrokeWidth,
-      strokeDasharray,
-      opacity: styleOverride?.opacity,
-      seriesKey: seriesStyleKey,
-      data: pointsWithData.map((p) => p.row),
-      dataPoints: pointsWithData.map((p) => ({ x: p.x, y: p.y, datum: p.row })),
+      topPoints,
+      bottomPoints,
+      path: pathStr,
+      topPath: topPathStr,
+      fill: fillValue,
+      fillOpacity,
+      stroke: resolveSeriesStroke(spec, color, theme),
+      strokeWidth: 1,
+      seriesKey,
+      stacked: true,
+      stackNormalized: stackProp === "normalize",
+      data: layer.map((d) => {
+        const xStr = String(d.data.__x__);
+        return rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? d.data;
+      }),
+      dataPoints: validPoints.map((p, idx) => {
+        const xStr = String(layer[idx]?.data.__x__);
+        const datum = rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? layer[idx]?.data ?? {};
+        return { x: p.x, y: p.yTop, datum };
+      }),
       aria
-    };
-    const bucket = isMuted ? mutedMarks : highlightedMarks;
-    bucket.push(lineMark);
-    const markPoint = spec.markDef.point;
-    const isSingleEndpoint = markPoint === "last" || markPoint === "first";
-    const showPoints = markPoint === true || markPoint === "transparent" || markPoint === "endpoints" || isSingleEndpoint || isSequentialColor;
-    if (showPoints) {
-      const isTransparent = markPoint === "transparent";
-      const isEndpoints = markPoint === "endpoints";
-      const seriesShowPoints = styleOverride?.showPoints !== false;
-      const lastIdx = pointsWithData.length - 1;
-      for (let i = 0; i < pointsWithData.length; i++) {
-        const p = pointsWithData[i];
-        const isEndpoint = i === 0 || i === lastIdx;
-        const isLast = i === lastIdx;
-        const isFirst = i === 0;
-        if (isSingleEndpoint) {
-          if (markPoint === "last" && !isLast) continue;
-          if (markPoint === "first" && !isFirst) continue;
-        }
-        const visible = seriesShowPoints && !isTransparent && (!isEndpoints || isEndpoint);
-        let pointColor = color;
-        if (isSequentialColor) {
-          const val = Number(p.row[sequentialColorField]);
-          pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color;
-        }
-        const hollow = isEndpoints && visible;
-        const pointColorStr = getRepresentativeColor5(pointColor);
-        const pointKey = keyField ? serializeKeyValue(p.row[keyField]) : seriesStyleKey ? `${seriesStyleKey}|${serializeKeyValue(p.row[xChannel.field])}` : serializeKeyValue(p.row[xChannel.field]);
-        if (isSingleEndpoint) {
-          bucket.push({
-            type: "point",
-            key: pointKey,
-            cx: p.x,
-            cy: p.y,
-            r: 3.5,
-            fill: strokeColor,
-            stroke: "transparent",
-            strokeWidth: 0,
-            fillOpacity: 1,
-            data: p.row,
-            aria: { decorative: true }
-          });
-          continue;
-        }
-        const pointMark = {
-          type: "point",
-          key: pointKey,
-          cx: p.x,
-          cy: p.y,
-          r: visible ? DEFAULT_POINT_RADIUS : 0,
-          fill: hollow ? "transparent" : pointColorStr,
-          stroke: hollow ? pointColorStr : visible ? "#ffffff" : "transparent",
-          strokeWidth: visible ? 1.5 : 0,
-          fillOpacity: isTransparent ? 0 : 1,
-          data: p.row,
-          aria: {
-            label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`
-          }
-        };
-        bucket.push(pointMark);
-      }
-    }
+    });
   }
-  const allMarks = [...mutedMarks, ...highlightedMarks];
-  const lineMarks = allMarks.filter((m) => m.type === "line");
-  const lineKeys = dedupeKeys(lineMarks.map((m) => m.key));
-  lineMarks.forEach((m, i) => {
-    m.key = lineKeys[i];
+  return marks;
+}
+function computeAreaMarks(spec, scales, chartArea, theme) {
+  const encoding = spec.encoding;
+  const yChannel = encoding.y;
+  let marks;
+  if (yChannel && isStacked(yChannel.stack)) {
+    marks = computeStackedArea(spec, scales, chartArea, theme);
+  } else {
+    marks = computeSingleArea(spec, scales, chartArea, theme);
+  }
+  const areaKeys = dedupeKeys(marks.map((m) => m.key));
+  marks.forEach((m, i) => {
+    m.key = areaKeys[i];
   });
-  const pointMarks = allMarks.filter((m) => m.type === "point");
-  if (pointMarks.length > 0) {
-    const pointKeys = dedupeKeys(pointMarks.map((m) => m.key ?? ""));
-    pointMarks.forEach((m, i) => {
-      m.key = pointKeys[i];
+  const highlight = spec.highlight ?? [];
+  if (highlight.length > 0) {
+    const highlightSet = new Set(highlight);
+    marks.sort((a, b) => {
+      const aMuted = a.seriesKey != null && !highlightSet.has(a.seriesKey);
+      const bMuted = b.seriesKey != null && !highlightSet.has(b.seriesKey);
+      if (aMuted === bMuted) return 0;
+      return aMuted ? -1 : 1;
     });
   }
-  return allMarks;
-}
-function _getMidValue(rows, field) {
-  const values = rows.map((r) => Number(r[field])).filter(Number.isFinite);
-  if (values.length === 0) return 0;
-  const sorted = values.sort((a, b) => a - b);
-  return sorted[Math.floor(sorted.length / 2)];
+  return marks;
 }
 
 // src/charts/line/labels.ts
@@ -4586,8 +4764,8 @@ function computeLineLabels(marks, strategy, density = "auto", labelOffsets, spec
 
 // src/charts/line/index.ts
 var AREA_POINT_RADIUS = 3;
-var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const marks = computeLineMarks(spec, scales, chartArea, strategy);
+var lineRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computeLineMarks(spec, scales, chartArea, strategy, theme);
   const lineMarks = marks.filter((m) => m.type === "line");
   const labelMap = computeLineLabels(
     lineMarks,
@@ -4607,11 +4785,11 @@ var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
   return marks;
 };
 var areaRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const areas = computeAreaMarks(spec, scales, chartArea, theme.isDark);
+  const areas = computeAreaMarks(spec, scales, chartArea, theme);
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && "field" in encoding.color);
-  const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy);
-  const points = hasColor && spec.markDef.point ? pointsFromAreas(areas, spec.markDef.point) : [];
+  const lines = hasColor ? linesFromAreas(areas) : computeLineMarks(spec, scales, chartArea, strategy, theme);
+  const points = hasColor && spec.markDef.point ? pointsFromAreas(areas, spec.markDef.point, resolveKnockoutColor(theme)) : [];
   return [...areas, ...lines, ...points];
 };
 function linesFromAreas(areas) {
@@ -4619,7 +4797,10 @@ function linesFromAreas(areas) {
     type: "line",
     points: a.topPoints,
     path: a.topPath,
-    stroke: getRepresentativeColor6(a.fill),
+    // The area already resolved its top-edge stroke (palette color, adapted
+    // for a light canvas, or the author's markDef.stroke). Re-deriving it from
+    // the fill here would paint an unadapted line over the adapted top path.
+    stroke: a.stroke ?? getRepresentativeColor7(a.fill),
     strokeWidth: a.strokeWidth ?? 1,
     seriesKey: a.seriesKey,
     data: a.data,
@@ -4627,12 +4808,12 @@ function linesFromAreas(areas) {
     aria: { label: `${a.seriesKey ?? "Series"}: line with ${a.topPoints.length} data points` }
   }));
 }
-function pointsFromAreas(areas, pointMode) {
+function pointsFromAreas(areas, pointMode, separator) {
   const isTransparent = pointMode === "transparent";
   const isEndpoints = pointMode === "endpoints";
   const points = [];
   for (const a of areas) {
-    const stroke = getRepresentativeColor6(a.fill);
+    const stroke = a.stroke ?? getRepresentativeColor7(a.fill);
     const lastIdx = a.topPoints.length - 1;
     for (let i = 0; i < a.topPoints.length; i++) {
       const pt = a.topPoints[i];
@@ -4645,7 +4826,7 @@ function pointsFromAreas(areas, pointMode) {
         cy: pt.y,
         r: visible ? AREA_POINT_RADIUS : 0,
         fill: hollow ? "transparent" : stroke,
-        stroke: hollow ? stroke : visible ? "#ffffff" : "transparent",
+        stroke: hollow ? stroke : visible ? separator : "transparent",
         strokeWidth: visible ? 1.5 : 0,
         fillOpacity: isTransparent ? 0 : 1,
         data: a.data[i] ?? {},
@@ -4695,6 +4876,7 @@ function packSeats(seats, rows) {
   slots.sort((a, b) => b.angle - a.angle || b.radius - a.radius);
   return slots;
 }
+var SEAT_STROKE_WIDTH = 0.75;
 function resolveMajority(totalSeats, majorityLine) {
   if (majorityLine === false) return null;
   const defaultSeats = Math.floor(totalSeats / 2) + 1;
@@ -4737,6 +4919,7 @@ function computeParliamentMarks(spec, scales, chartArea, _strategy, theme) {
   const seatRadius = typeof seatRadiusOpt === "number" && seatRadiusOpt > 0 ? seatRadiusOpt : Math.max(1.5, autoSeatRadius);
   const centerX = chartArea.x + chartArea.width / 2;
   const centerY = chartArea.y + chartArea.height - seatRadius;
+  const knockout = stackSeamStroke(theme);
   const marks = [];
   let slotIndex = 0;
   let animationIndex = 0;
@@ -4760,8 +4943,10 @@ function computeParliamentMarks(spec, scales, chartArea, _strategy, theme) {
         cy,
         r: seatRadius,
         fill,
-        stroke: "none",
-        strokeWidth: 0,
+        // Knockout ring: seats are packed tight enough that same-party
+        // neighbours merge into a blob without a hairline of canvas between.
+        stroke: knockout,
+        strokeWidth: SEAT_STROKE_WIDTH,
         data: row,
         aria,
         animationIndex
@@ -4793,7 +4978,7 @@ function computeParliamentMarks(spec, scales, chartArea, _strategy, theme) {
       x: centerX,
       y: Math.max(chartArea.y + theme.fonts.sizes.small, lineTop - 6),
       text: majority.label,
-      fill: theme.colors.text,
+      fill: theme.colors.axis,
       fontSize: theme.fonts.sizes.small,
       fontWeight: theme.fonts.weights.semibold,
       textAnchor: "middle",
@@ -4811,9 +4996,15 @@ var parliamentRenderer = (spec, scales, chartArea, strategy, theme) => {
 };
 
 // src/charts/pie/compute.ts
-import { formatPercent as formatPercent2, isConditionalDef, isGradientDef as isGradientDef4 } from "@opendata-ai/openchart-core";
+import {
+  CATEGORICAL_FILL_PALETTE,
+  formatPercent as formatPercent2,
+  isConditionalDef,
+  isGradientDef as isGradientDef4
+} from "@opendata-ai/openchart-core";
 import { arc as d3Arc, pie as d3Pie } from "d3-shape";
 var SMALL_SLICE_THRESHOLD = 0.03;
+var SLICE_STROKE_WIDTH = 1.5;
 var PIE_PAD_ANGLE = 0.01;
 function buildArcPath(geom) {
   return d3Arc()({
@@ -4824,18 +5015,7 @@ function buildArcPath(geom) {
     padAngle: PIE_PAD_ANGLE
   }) ?? "";
 }
-var DEFAULT_PALETTE = [
-  "#1b7fa3",
-  "#c44e52",
-  "#6a9f58",
-  "#d47215",
-  "#507e79",
-  "#9a6a8d",
-  "#c4636b",
-  "#9c755f",
-  "#a88f22",
-  "#858078"
-];
+var DEFAULT_PALETTE = CATEGORICAL_FILL_PALETTE;
 function groupSmallSlices(slices, threshold) {
   const total = slices.reduce((sum, s) => sum + s.value, 0);
   if (total === 0) return slices;
@@ -4879,7 +5059,9 @@ function computeSweepBounds(startAngle, endAngle) {
     maxY: Math.max(...ys)
   };
 }
-function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
+function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false, theme) {
+  const palette = theme?.colors.categoricalFill ?? DEFAULT_PALETTE;
+  const sliceStroke = resolveKnockoutColor(theme);
   const encoding = spec.encoding;
   const startAngle = spec.markDef.startAngle ?? 0;
   const endAngle = spec.markDef.endAngle ?? Math.PI * 2;
@@ -4950,13 +5132,13 @@ function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
         const colorScale = scales.color.scale;
         color = colorScale(slice.label);
       } else {
-        color = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+        color = palette[i % palette.length];
       }
     } else if (scales.color && categoryField) {
       const colorScale = scales.color.scale;
       color = colorScale(slice.label);
     } else {
-      color = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+      color = palette[i % palette.length];
     }
     const path = arcGenerator(arcDatum) ?? "";
     const centroidResult = arcGenerator.centroid(arcDatum);
@@ -4977,8 +5159,9 @@ function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
       startAngle: arcDatum.startAngle,
       endAngle: arcDatum.endAngle,
       fill: color,
-      stroke: "#ffffff",
-      strokeWidth: 2,
+      stroke: sliceStroke,
+      strokeWidth: SLICE_STROKE_WIDTH,
+      seriesKey: slice.label,
       data: slice.originalRow,
       aria
     });
@@ -4996,10 +5179,12 @@ function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
 
 // src/charts/pie/labels.ts
 import { estimateTextWidth as estimateTextWidth7, resolveCollisions as resolveCollisions5 } from "@opendata-ai/openchart-core";
-var LABEL_FONT_SIZE5 = 10;
+var LABEL_FONT_SIZE5 = 11;
 var LABEL_FONT_WEIGHT5 = 500;
 var LEADER_LINE_OFFSET = 12;
-function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333333") {
+function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333333", options = {}) {
+  const fontFamily = options.fontFamily ?? "system-ui, -apple-system, sans-serif";
+  const formatValue3 = options.formatValue;
   if (marks.length === 0) return [];
   const centerX = marks[0].center.x;
   const centerY = marks[0].center.y;
@@ -5012,8 +5197,15 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
     const ariaLabel = mark.aria.label;
     if (!ariaLabel) continue;
     const firstColon = ariaLabel.indexOf(":");
-    const labelText = firstColon >= 0 ? ariaLabel.slice(0, firstColon).trim() : "";
-    if (!labelText) continue;
+    const sliceName = firstColon >= 0 ? ariaLabel.slice(0, firstColon).trim() : "";
+    if (!sliceName) continue;
+    const openParen = ariaLabel.lastIndexOf("(");
+    const closeParen = ariaLabel.lastIndexOf(")");
+    const percentText = openParen > firstColon && closeParen > openParen ? ariaLabel.slice(openParen + 1, closeParen).trim() : "";
+    const rawValueText = openParen > firstColon ? ariaLabel.slice(firstColon + 1, openParen).trim() : "";
+    const rawValue = Number(rawValueText);
+    const valueText = formatValue3 && Number.isFinite(rawValue) ? formatValue3(rawValue) : percentText;
+    const labelText = valueText ? `${sliceName} ${valueText}` : sliceName;
     const textWidth = estimateTextWidth7(labelText, LABEL_FONT_SIZE5, LABEL_FONT_WEIGHT5);
     const textHeight = LABEL_FONT_SIZE5 * 1.2;
     const midAngle = (mark.startAngle + mark.endAngle) / 2;
@@ -5034,7 +5226,7 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
       // instead of zipping positionally.
       index: marks.indexOf(mark),
       style: {
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontFamily,
         fontSize: LABEL_FONT_SIZE5,
         fontWeight: LABEL_FONT_WEIGHT5,
         fill: _textFill,
@@ -5078,28 +5270,96 @@ function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333
 }
 
 // src/charts/pie/index.ts
+function pieLabelOptions(spec, theme) {
+  const valueChannel = spec.encoding.y ?? spec.encoding.x;
+  const valueField = valueChannel && "field" in valueChannel ? valueChannel.field : void 0;
+  if (!spec.labels.format) return { fontFamily: theme.fonts.family };
+  const formatter = resolveFieldFormatter({
+    surfaceFormat: spec.labels.format,
+    values: valueField ? spec.data.map((r) => r[valueField]) : []
+  });
+  return { fontFamily: theme.fonts.family, formatValue: formatter };
+}
+function centerLabelMarks(spec, marks, theme) {
+  const config = spec.markDef.centerLabel;
+  if (!config || marks.length === 0) return [];
+  const text = typeof config === "string" ? config : config.text;
+  if (!text) return [];
+  const subtitle = typeof config === "string" ? void 0 : config.subtitle;
+  const { center } = marks[0];
+  const valueSize = theme.fonts.sizes.metricValue;
+  const captionSize = theme.fonts.sizes.small;
+  const valueY = subtitle ? center.y - captionSize * 0.6 : center.y;
+  const out = [
+    {
+      type: "textMark",
+      key: "oc-center-value",
+      x: center.x,
+      y: valueY,
+      text,
+      fill: theme.colors.text,
+      fontSize: valueSize,
+      fontWeight: theme.fonts.weights.semibold,
+      fontFamily: theme.fonts.family,
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      data: {},
+      aria: { decorative: true }
+    }
+  ];
+  if (subtitle) {
+    out.push({
+      type: "textMark",
+      key: "oc-center-subtitle",
+      x: center.x,
+      y: valueY + valueSize * 0.75 + captionSize * 0.4,
+      text: subtitle,
+      fill: theme.colors.axis,
+      fontSize: captionSize,
+      fontWeight: theme.fonts.weights.normal,
+      fontFamily: theme.fonts.family,
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      data: {},
+      aria: { decorative: true }
+    });
+  }
+  return out;
+}
 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);
+  const marks = computePieMarks(spec, scales, chartArea, strategy, false, theme);
+  const labels = computePieLabels(
+    marks,
+    chartArea,
+    spec.labels.density,
+    theme.colors.text,
+    pieLabelOptions(spec, theme)
+  );
   for (const label of labels) {
     if (label.index !== void 0 && marks[label.index]) marks[label.index].label = label;
   }
   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);
+  const marks = computePieMarks(spec, scales, chartArea, strategy, true, theme);
+  const labels = computePieLabels(
+    marks,
+    chartArea,
+    spec.labels.density,
+    theme.colors.text,
+    pieLabelOptions(spec, theme)
+  );
   for (const label of labels) {
     if (label.index !== void 0 && marks[label.index]) marks[label.index].label = label;
   }
-  return marks;
+  return [...marks, ...centerLabelMarks(spec, marks, theme)];
 };
 
 // src/charts/range/compute.ts
-import { getRepresentativeColor as getRepresentativeColor7 } from "@opendata-ai/openchart-core";
-var DOT_RADIUS2 = 6;
+import { getRepresentativeColor as getRepresentativeColor8 } from "@opendata-ai/openchart-core";
+var DOT_RADIUS2 = 5.5;
 var CONNECTOR_WIDTH = 2;
-var CONNECTOR_COLOR = "#cccccc";
+var CONNECTOR_OPACITY = 0.6;
 var ARROW_STROKE_WIDTH = 2;
 var ARROWHEAD_LENGTH2 = 8;
 var ARROWHEAD_HALF_WIDTH2 = 4;
@@ -5124,6 +5384,7 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
   const bandScale = horizontal ? scales.y.scale : scales.x.scale;
   const valueScale = horizontal ? scales.x.scale : scales.y.scale;
   const bandwidth = bandScale.bandwidth();
+  const knockout = stackSeamStroke(theme);
   const style = spec.markDef.style ?? "dumbbell";
   const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
   const colorByDirection = spec.markDef.colorByDirection === true && !colorEnc;
@@ -5146,7 +5407,7 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
     const delta = endVal - startVal;
     const catKey = catKeys[i];
     const accent = colorEnc ? getColor(scales, String(row[colorEnc.field] ?? "")) : colorByDirection ? delta > 0 ? theme.colors.positive : delta < 0 ? theme.colors.negative : theme.colors.axis : getColor(scales, "__default__");
-    const accentStroke = getRepresentativeColor7(accent);
+    const accentStroke = getRepresentativeColor8(accent);
     const spanAria = {
       label: `${category}: ${startVal} to ${endVal}`
     };
@@ -5223,15 +5484,16 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
       continue;
     }
     if (spanLength > 0) {
-      const connectorColor = colorEnc || colorByDirection ? accentStroke : CONNECTOR_COLOR;
+      const colored = !!colorEnc || colorByDirection;
       marks.push({
         type: "rule",
         x1,
         y1,
         x2,
         y2,
-        stroke: connectorColor,
+        stroke: colored ? accentStroke : theme.colors.neutral[400],
         strokeWidth: CONNECTOR_WIDTH,
+        ...colored ? {} : { strokeOpacity: CONNECTOR_OPACITY },
         data: row,
         aria: spanAria,
         key: `${catKey}|range`
@@ -5243,8 +5505,8 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
         cx: x1,
         cy: y1,
         r: DOT_RADIUS2,
-        fill: theme.colors.axis,
-        stroke: "#ffffff",
+        fill: theme.colors.neutral[400],
+        stroke: knockout,
         strokeWidth: 2,
         data: row,
         aria: { label: `${category}, start: ${startVal}` },
@@ -5256,7 +5518,7 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
         cy: y2,
         r: DOT_RADIUS2,
         fill: accent,
-        stroke: "#ffffff",
+        stroke: knockout,
         strokeWidth: 2,
         data: row,
         aria: { label: `${category}, end: ${endVal}` },
@@ -5270,7 +5532,7 @@ function computeRangeMarks(spec, scales, _chartArea, _strategy, theme) {
 // src/charts/range/labels.ts
 import {
   estimateTextWidth as estimateTextWidth8,
-  getRepresentativeColor as getRepresentativeColor8,
+  getRepresentativeColor as getRepresentativeColor9,
   resolveCollisions as resolveCollisions6
 } from "@opendata-ai/openchart-core";
 var LABEL_FONT_SIZE6 = 11;
@@ -5306,7 +5568,7 @@ function buildCandidate(mark, text, horizontal, outerSide, index) {
       fontFamily: "system-ui, -apple-system, sans-serif",
       fontSize: LABEL_FONT_SIZE6,
       fontWeight: LABEL_FONT_WEIGHT6,
-      fill: getRepresentativeColor8(mark.fill),
+      fill: getRepresentativeColor9(mark.fill),
       lineHeight: 1.2,
       textAnchor: "start",
       dominantBaseline: "central",
@@ -5460,7 +5722,7 @@ function clearRenderers() {
 }
 
 // src/charts/rule/index.ts
-import { getRepresentativeColor as getRepresentativeColor9 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor10 } from "@opendata-ai/openchart-core";
 function computeRuleMarks(spec, scales, chartArea) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
@@ -5503,7 +5765,7 @@ function computeRuleMarks(spec, scales, chartArea) {
       const y2Val = scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]);
       if (y2Val != null) y2 = y2Val;
     }
-    const color = getRepresentativeColor9(
+    const color = getRepresentativeColor10(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const strokeDashEncoding = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
@@ -5538,8 +5800,9 @@ var ruleRenderer = (spec, scales, chartArea, _strategy, _theme) => {
 };
 
 // src/charts/scatter/compute.ts
-import { isOpaqueColor } from "@opendata-ai/openchart-core";
 var DEFAULT_POINT_RADIUS2 = 5;
+var POINT_STROKE_WIDTH = 1.5;
+var DENSE_LAYER_POINTS = 200;
 function resolvePosition2(value, channelType, scale) {
   switch (channelType) {
     case "nominal":
@@ -5584,8 +5847,8 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy, theme) {
   const sizeScale = resolvedSize?.scale;
   const constFill = spec.markDef.fill;
   const constSize = spec.markDef.size;
-  const bg = theme?.colors?.background;
-  const defaultStroke = bg && isOpaqueColor(bg) ? bg : "#ffffff";
+  const defaultStroke = resolveKnockoutColor(theme);
+  const defaultFillOpacity = spec.data.length < DENSE_LAYER_POINTS ? 0.85 : 0.6;
   const keyEnc = encoding.key && "field" in encoding.key ? encoding.key : void 0;
   const keyField = keyEnc?.field;
   const marks = [];
@@ -5627,8 +5890,9 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy, theme) {
       r: radius,
       fill: color,
       stroke: spec.markDef.stroke ?? defaultStroke,
-      strokeWidth: spec.markDef.strokeWidth ?? 1,
-      fillOpacity: spec.markDef.opacity ?? 0.7,
+      strokeWidth: spec.markDef.strokeWidth ?? POINT_STROKE_WIDTH,
+      fillOpacity: spec.markDef.opacity ?? defaultFillOpacity,
+      ...category ? { seriesKey: category } : {},
       data: row,
       aria
     });
@@ -5649,7 +5913,7 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy, theme) {
 // src/charts/scatter/trendline.ts
 var TRENDLINE_COLOR = "#666666";
 var TRENDLINE_STROKE_WIDTH = 1.5;
-var TRENDLINE_DASH = "6 4";
+var TRENDLINE_DASH = "4 4";
 function linearRegression(points) {
   const n = points.length;
   if (n < 2) return null;
@@ -5707,7 +5971,7 @@ var scatterRenderer = (spec, scales, chartArea, strategy, theme) => {
   const trendline = spec.markDef?.trendline;
   if (trendline !== false) {
     const config = typeof trendline === "object" ? trendline : void 0;
-    const stroke = config?.stroke ?? theme?.colors?.text;
+    const stroke = config?.stroke ?? theme?.colors?.axis;
     const trendLine = computeTrendLine(pointMarks, stroke, config?.strokeWidth);
     if (trendLine) {
       if (config?.layer === "above") {
@@ -5721,7 +5985,7 @@ var scatterRenderer = (spec, scales, chartArea, strategy, theme) => {
 };
 
 // src/charts/text/index.ts
-import { getRepresentativeColor as getRepresentativeColor10 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor11 } from "@opendata-ai/openchart-core";
 var DEFAULT_FONT_SIZE = 12;
 var ALIGN_TO_ANCHOR = {
   left: "start",
@@ -5765,7 +6029,7 @@ function computeTextMarks(spec, scales) {
     }
     const text = String(row[textChannel.field] ?? "");
     if (!text) continue;
-    const color = getRepresentativeColor10(
+    const color = getRepresentativeColor11(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const fallbackFontSize = markDef.fontSize ?? DEFAULT_FONT_SIZE;
@@ -5802,7 +6066,7 @@ var textRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
 };
 
 // src/charts/tick/index.ts
-import { getRepresentativeColor as getRepresentativeColor11 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor12 } from "@opendata-ai/openchart-core";
 var DEFAULT_TICK_LENGTH = 18;
 function computeTickMarks(spec, scales, _chartArea) {
   const encoding = spec.encoding;
@@ -5818,7 +6082,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 color = getRepresentativeColor11(
+    const color = getRepresentativeColor12(
       colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__")
     );
     const aria = {
@@ -5853,7 +6117,7 @@ var tickRenderer = (spec, scales, chartArea, _strategy, _theme) => {
 import { formatPercent as formatPercent3 } from "@opendata-ai/openchart-core";
 var DEFAULT_UNITS = 100;
 var DEFAULT_COLUMNS = 10;
-var DEFAULT_CORNER_RADIUS = 1;
+var DEFAULT_CORNER_RADIUS = 2;
 var GAP_FRACTION = 1 / 6;
 function largestRemainderCells(values, units) {
   const clean = values.map((v) => Number.isFinite(v) && v > 0 ? v : 0);
@@ -5933,6 +6197,7 @@ function computeWaffleMarks(spec, scales, chartArea, _strategy) {
         height: cell,
         fill,
         cornerRadius,
+        shapeRendering: "crispEdges",
         data: row,
         aria: k === 0 ? aria : { ...aria, decorative: true }
       });
@@ -6558,25 +6823,25 @@ function emitSpecWarnings(warnings, sink = defaultWarnSink) {
 
 // src/compiler/animation.ts
 var ENTER_DEFAULTS = {
-  duration: 500,
+  duration: 450,
   ease: "smooth",
-  staggerDelay: 80,
+  staggerDelay: 30,
   staggerOrder: "index"
 };
 var UPDATE_DEFAULTS = {
-  duration: 500,
+  duration: 450,
   ease: "smooth",
   staggerDelay: 0,
   staggerOrder: "index"
 };
 var EXIT_DEFAULTS = {
-  duration: 300,
+  duration: 250,
   ease: "smooth",
   staggerDelay: 0,
   staggerOrder: "index"
 };
-var DEFAULT_ANNOTATION_DELAY = 200;
-var MAX_TOTAL_STAGGER_MS = 2e3;
+var DEFAULT_ANNOTATION_DELAY = 150;
+var MAX_TOTAL_STAGGER_MS = 300;
 function resolveAnimation(spec) {
   if (spec === void 0 || spec === false) return void 0;
   if (spec === true) {
@@ -6966,10 +7231,62 @@ function warnParliamentMajorityRange(markDef, encoding, data, warnings) {
     );
   }
 }
+function withCalendarColorScale(encoding) {
+  const color = encoding.color;
+  if (!color || !("field" in color) || color.type !== "quantitative") return encoding;
+  if (color.scale?.type) return encoding;
+  return {
+    ...encoding,
+    color: { ...color, scale: { ...color.scale, type: "quantize" } }
+  };
+}
+function resolveOtherOption(other) {
+  if (other == null) return null;
+  const threshold = typeof other === "number" ? other : other.threshold;
+  if (!Number.isFinite(threshold) || threshold <= 0) return null;
+  return { threshold, label: typeof other === "object" && other.label || "Other" };
+}
+function applyWaffleOther(spec, encoding, markDef, warnings) {
+  const option = resolveOtherOption(markDef.other);
+  const colorField = encoding.color && "field" in encoding.color ? encoding.color.field : void 0;
+  const valueField = (encoding.y ?? encoding.x)?.field;
+  if (!option || !colorField || !valueField) return spec.data;
+  const totals = /* @__PURE__ */ new Map();
+  for (const row of spec.data) {
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value) || value < 0) continue;
+    const cat = String(row[colorField] ?? "");
+    totals.set(cat, (totals.get(cat) ?? 0) + value);
+  }
+  let grandTotal = 0;
+  for (const value of totals.values()) grandTotal += value;
+  if (grandTotal <= 0) return spec.data;
+  const merged = /* @__PURE__ */ new Set();
+  for (const [cat, value] of totals) {
+    if (value / grandTotal < option.threshold) merged.add(cat);
+  }
+  if (merged.size < 2) return spec.data;
+  const kept = [];
+  const bucketed = [];
+  for (const row of spec.data) {
+    const cat = String(row[colorField] ?? "");
+    if (merged.has(cat)) {
+      bucketed.push({ ...row, [colorField]: option.label });
+    } else {
+      kept.push(row);
+    }
+  }
+  warnings.push(
+    `[openchart] WAFFLE_OTHER_BUCKET: merged ${merged.size} categories under ${option.threshold * 100}% of the total into "${option.label}" (${[...merged].join(", ")})`
+  );
+  return [...kept, ...bucketed];
+}
 function normalizeChartSpec(spec, warnings) {
-  const encoding = inferEncodingTypes(spec.encoding, spec.data, warnings);
+  const inferred = inferEncodingTypes(spec.encoding, spec.data, warnings);
   const markType = resolveMarkType(spec.mark);
   const markDef = resolveMarkDef(spec.mark);
+  const encoding = markType === "calendar" ? withCalendarColorScale(inferred) : inferred;
+  const data = markType === "waffle" ? applyWaffleOther(spec, encoding, markDef, warnings) : spec.data;
   const display = spec.display ?? "full";
   if (display === "sparkline" && markType !== "line" && markType !== "area" && markType !== "bar" && markType !== "point") {
     warnings.push(
@@ -6987,7 +7304,7 @@ function normalizeChartSpec(spec, warnings) {
   return {
     markType,
     markDef,
-    data: spec.data,
+    data,
     encoding,
     chrome: normalizeChrome(spec.chrome),
     chromeLayout: spec.chromeLayout,
@@ -7024,7 +7341,17 @@ function normalizeChartSpec(spec, warnings) {
     }
   };
 }
-function normalizeTableSpec(spec, _warnings) {
+function normalizeTableDensity(spec, warnings) {
+  if (spec.density) return spec.density;
+  if (spec.compact) {
+    warnings.push('[openchart] table "compact" is deprecated; use density: "condensed" instead.');
+    return "condensed";
+  }
+  return "regular";
+}
+function normalizeTableSpec(spec, warnings) {
+  const density = normalizeTableDensity(spec, warnings);
+  const totalRow = spec.totalRow === true ? { label: "Total" } : spec.totalRow && typeof spec.totalRow === "object" ? { label: spec.totalRow.label ?? "Total" } : void 0;
   return {
     type: "table",
     data: spec.data,
@@ -7036,7 +7363,11 @@ function normalizeTableSpec(spec, _warnings) {
     search: spec.search ?? false,
     pagination: spec.pagination ?? false,
     stickyFirstColumn: spec.stickyFirstColumn ?? false,
-    compact: spec.compact ?? false,
+    density,
+    striped: spec.striped ?? false,
+    sort: spec.sort,
+    totalRow,
+    compact: density === "condensed",
     responsive: spec.responsive ?? true,
     animation: spec.animation,
     watermark: spec.watermark ?? true
@@ -7061,6 +7392,7 @@ function normalizeSankeySpec(spec, _warnings) {
     animation: spec.animation,
     valueFormat: spec.valueFormat,
     linkOpacity: spec.linkOpacity,
+    other: spec.other,
     watermark: spec.watermark ?? true
   };
 }
@@ -7151,7 +7483,10 @@ function normalizeGeoMapSpec(spec, _warnings) {
     geo: {
       features: spec.geo.features,
       idField: spec.geo.idField ?? "id",
-      projection: spec.geo.projection ?? "albersUsa",
+      // Left undefined on purpose: compileGeoMap infers the projection from the
+      // topology (resolveDefaultProjection) so a pre-projected atlas doesn't get
+      // silently re-projected by an albersUsa default.
+      projection: spec.geo.projection,
       focus: spec.geo.focus ?? null
     },
     data: spec.data,
@@ -7444,6 +7779,40 @@ function validateRangeSpec(spec, errors) {
     }
   }
 }
+function validateCenterLabel(spec, markType, errors) {
+  if (!spec.mark || typeof spec.mark !== "object" || Array.isArray(spec.mark)) return;
+  const centerLabel = spec.mark.centerLabel;
+  if (centerLabel === void 0) return;
+  if (markType !== "arc") {
+    errors.push({
+      message: `Spec error: mark.centerLabel is only supported on arc (pie/donut) marks, not "${String(markType)}"`,
+      path: "mark.centerLabel",
+      code: "INVALID_VALUE",
+      suggestion: 'Remove mark.centerLabel, or use mark: { type: "arc", innerRadius: 0.6, centerLabel: "..." } for a donut center stat.'
+    });
+    return;
+  }
+  const isString = typeof centerLabel === "string";
+  const obj = !isString && centerLabel !== null && typeof centerLabel === "object" ? centerLabel : void 0;
+  const validObject = obj !== void 0 && typeof obj.text === "string" && obj.text.length > 0;
+  const validString = isString && centerLabel.length > 0;
+  if (!validString && !validObject) {
+    errors.push({
+      message: `Spec error: mark.centerLabel must be a non-empty string or { text, subtitle? }, got ${JSON.stringify(centerLabel)}`,
+      path: "mark.centerLabel",
+      code: "INVALID_VALUE",
+      suggestion: 'Use centerLabel: "$4.2M" or centerLabel: { text: "$4.2M", subtitle: "Total revenue" }.'
+    });
+  }
+  if (validObject && obj.subtitle !== void 0 && typeof obj.subtitle !== "string") {
+    errors.push({
+      message: `Spec error: mark.centerLabel.subtitle must be a string, got ${JSON.stringify(obj.subtitle)}`,
+      path: "mark.centerLabel.subtitle",
+      code: "INVALID_VALUE",
+      suggestion: 'Use centerLabel: { text: "$4.2M", subtitle: "Total revenue" }.'
+    });
+  }
+}
 var VALID_WEEK_STARTS = /* @__PURE__ */ new Set(["monday", "sunday"]);
 function validateCalendarSpec(spec, errors) {
   const encoding = spec.encoding;
@@ -7655,6 +8024,7 @@ function validateChartSpec(spec, errors) {
       });
     }
   }
+  validateCenterLabel(spec, markType, errors);
   if (markType === "range") {
     validateRangeSpec(spec, errors);
   }
@@ -9445,7 +9815,10 @@ function assignAnimationIndices(marks, animation) {
 }
 
 // src/compile/color-scale-range.ts
-import { ACHROMATIC_RAMP } from "@opendata-ai/openchart-core";
+import {
+  ACHROMATIC_RAMP,
+  CATEGORICAL_EXTENDED_PALETTE
+} from "@opendata-ai/openchart-core";
 
 // src/legend/continuous.ts
 import {
@@ -9453,6 +9826,7 @@ import {
   defaultNumberFormatter as defaultNumberFormatter5,
   resolveNumberFormatter as resolveNumberFormatter2
 } from "@opendata-ai/openchart-core";
+import { tickStep } from "d3-array";
 import { scaleQuantile } from "d3-scale";
 function extent(values) {
   let min4 = Number.POSITIVE_INFINITY;
@@ -9464,11 +9838,18 @@ function extent(values) {
   return [min4, max4];
 }
 var CONTINUOUS_BAR_HEIGHT = 10;
+var CONTINUOUS_BINNED_BAR_HEIGHT = 12;
 var CONTINUOUS_LABEL_GAP = 4;
 var BAR_WIDTH_MIN = 160;
 var BAR_WIDTH_MAX = 220;
 var DEFAULT_BIN_COUNT = 5;
+var COMPACT_SWATCH_SIZE = 11;
+var COMPACT_SWATCH_GAP = 2;
+var COMPACT_LABEL_GAP = 6;
+var COMPACT_LESS_LABEL = "Less";
+var COMPACT_MORE_LABEL = "More";
 var BINNED_SCALE_TYPES = /* @__PURE__ */ new Set(["quantile", "quantize", "threshold"]);
+var MAX_BINS = 12;
 function sampleRampColors(colors, k) {
   if (k <= 0 || colors.length === 0) return [];
   if (colors.length === k) return [...colors];
@@ -9517,7 +9898,47 @@ function resolveBarWidth(availableWidth) {
   );
   return Math.max(0, Math.min(preferred, Math.floor(availableWidth)));
 }
-function resolveBinBreaks(channel, values, binCount) {
+function tidyBreak(value) {
+  return Number(value.toPrecision(12));
+}
+function niceQuantizeBreaks(domainMin, domainMax, binCount, diverging) {
+  if (!(domainMax > domainMin)) return [];
+  if (diverging && domainMin < 0 && domainMax > 0) {
+    const classes = binCount % 2 === 0 ? binCount + 1 : binCount;
+    const perSide = (classes - 1) / 2;
+    const magnitude = Math.max(Math.abs(domainMin), Math.abs(domainMax));
+    const step2 = tickStep(0, magnitude, perSide + 0.5) || magnitude / (perSide + 0.5);
+    if (!Number.isFinite(step2) || step2 <= 0) return [];
+    const breaks2 = [];
+    for (let i = 0; i < perSide * 2; i++) {
+      breaks2.push(tidyBreak((i - perSide + 0.5) * step2));
+    }
+    return breaks2;
+  }
+  let step = tickStep(domainMin, domainMax, binCount);
+  if (!Number.isFinite(step) || step <= 0) return [];
+  let breaks = quantizeBreaksForStep(domainMin, domainMax, step);
+  for (let guard = 0; guard < 10 && breaks.length + 1 > binCount; guard++) {
+    step = coarserNiceStep(step);
+    breaks = quantizeBreaksForStep(domainMin, domainMax, step);
+  }
+  return breaks;
+}
+function quantizeBreaksForStep(domainMin, domainMax, step) {
+  const epsilon = step * 1e-9;
+  const breaks = [];
+  for (let b = Math.ceil(domainMin / step) * step; b < domainMax - epsilon && breaks.length < MAX_BINS; b += step) {
+    if (b > domainMin + epsilon) breaks.push(tidyBreak(b));
+  }
+  return breaks;
+}
+function coarserNiceStep(step) {
+  const power = Math.floor(Math.log10(step));
+  const mantissa = step / 10 ** power;
+  const next = mantissa < 1.5 ? 2 : mantissa < 3.5 ? 5 : 10;
+  return tidyBreak(next * 10 ** power);
+}
+function resolveBinBreaks(channel, values, binCount, diverging) {
   const scaleType = channel.scale?.type;
   if (scaleType === "threshold") {
     return channel.scale?.domain ?? [0.5];
@@ -9530,18 +9951,43 @@ function resolveBinBreaks(channel, values, binCount) {
   const [valuesMin, valuesMax] = extent(values);
   const domainMin = explicitDomain?.[0] ?? valuesMin;
   const domainMax = explicitDomain?.[1] ?? valuesMax;
-  const breaks = [];
-  for (let i = 1; i < binCount; i++) {
-    breaks.push(domainMin + (domainMax - domainMin) * i / binCount);
+  return niceQuantizeBreaks(domainMin, domainMax, binCount, diverging);
+}
+function resolveBinCount(channel) {
+  if (channel.scale?.type === "threshold") {
+    return (channel.scale?.domain ?? [0.5]).length + 1;
   }
-  return breaks;
+  const explicitRange = channel.scale?.range;
+  return explicitRange?.length ?? DEFAULT_BIN_COUNT;
+}
+function buildClassScale(values, channel, colors, binCount = DEFAULT_BIN_COUNT, options) {
+  const breaks = resolveBinBreaks(channel, values, binCount, options?.diverging ?? false);
+  const classColors = sampleRampColors(colors, breaks.length + 1);
+  const binIndex = (value) => {
+    if (!Number.isFinite(value)) return -1;
+    let i = 0;
+    while (i < breaks.length && value >= breaks[i]) i++;
+    return i;
+  };
+  return {
+    breaks,
+    colors: classColors,
+    binIndex,
+    color: (value) => classColors[Math.max(0, binIndex(value))] ?? classColors[0]
+  };
+}
+function classScaleForChannel(values, channel, theme) {
+  const colors = resolveRampColors(channel, theme);
+  return buildClassScale(values, channel, colors, resolveBinCount(channel), {
+    diverging: isDivergingRamp(colors, theme)
+  });
 }
 function hasContinuousColorScale(spec) {
   const colorEnc = spec.encoding.color;
   if (!colorEnc || "condition" in colorEnc || !("field" in colorEnc)) return false;
   return colorEnc.type === "quantitative";
 }
-function computeContinuousLegendContentForChannel(values, channel, theme, availableWidth) {
+function computeContinuousLegendContentForChannel(values, channel, theme, availableWidth, classScale) {
   if (values.length === 0) return null;
   const barWidth = resolveBarWidth(availableWidth);
   if (barWidth <= 0) return null;
@@ -9550,17 +9996,15 @@ function computeContinuousLegendContentForChannel(values, channel, theme, availa
   const formatStr = channel.format;
   const ctx = computeFieldFormatContext2(values);
   if (scaleType && BINNED_SCALE_TYPES.has(scaleType)) {
-    const explicitRange2 = channel.scale?.range;
-    const binCount = scaleType === "threshold" ? (channel.scale?.domain ?? [0.5]).length + 1 : explicitRange2?.length ?? DEFAULT_BIN_COUNT;
-    const breaks = resolveBinBreaks(channel, values, binCount);
-    const colors = sampleRampColors(rampColors, binCount);
-    const binWidth = barWidth / binCount;
+    const scale = classScale ?? classScaleForChannel(values, channel, theme);
+    const colors = scale.colors;
+    const binWidth = barWidth / colors.length;
     const bins = colors.map((color, i) => ({
       x: i * binWidth,
       width: binWidth,
       color
     }));
-    const ticks2 = breaks.map((value, i) => ({
+    const ticks2 = scale.breaks.map((value, i) => ({
       value,
       label: formatLegendValue(value, formatStr, ctx),
       x: (i + 1) * binWidth,
@@ -9569,10 +10013,11 @@ function computeContinuousLegendContentForChannel(values, channel, theme, availa
     return {
       mode: "binned",
       barWidth,
-      barHeight: CONTINUOUS_BAR_HEIGHT,
+      barHeight: CONTINUOUS_BINNED_BAR_HEIGHT,
       colorStops: [],
       bins,
-      ticks: ticks2
+      ticks: ticks2,
+      classScale: scale
     };
   }
   const [domainMin, domainMax] = extent(values);
@@ -9616,6 +10061,52 @@ function computeContinuousLegendContentForChannel(values, channel, theme, availa
     ticks
   };
 }
+function computeCompactClassLegendContent(values, channel, theme, measure) {
+  if (values.length === 0) return null;
+  if (isDivergingRamp(resolveRampColors(channel, theme), theme)) return null;
+  const scale = classScaleForChannel(values, channel, theme);
+  const colors = scale.colors;
+  if (colors.length === 0) return null;
+  const bins = colors.map((color, i) => ({
+    x: i * (COMPACT_SWATCH_SIZE + COMPACT_SWATCH_GAP),
+    width: COMPACT_SWATCH_SIZE,
+    color
+  }));
+  const barWidth = colors.length * COMPACT_SWATCH_SIZE + (colors.length - 1) * COMPACT_SWATCH_GAP;
+  const fontSize = theme.fonts.sizes.small;
+  const fontWeight = theme.fonts.weights.normal;
+  const lessWidth = measure(COMPACT_LESS_LABEL, fontSize, fontWeight);
+  const moreWidth = measure(COMPACT_MORE_LABEL, fontSize, fontWeight);
+  const [domainMin, domainMax] = extent(values);
+  const ticks = [
+    {
+      value: domainMin,
+      label: COMPACT_LESS_LABEL,
+      x: -COMPACT_LABEL_GAP,
+      anchor: "end"
+    },
+    {
+      value: domainMax,
+      label: COMPACT_MORE_LABEL,
+      x: barWidth + COMPACT_LABEL_GAP,
+      anchor: "start"
+    }
+  ];
+  return {
+    mode: "binned",
+    barWidth,
+    barHeight: COMPACT_SWATCH_SIZE,
+    colorStops: [],
+    bins,
+    ticks,
+    classScale: scale,
+    barOffsetX: lessWidth + COMPACT_LABEL_GAP,
+    // Optical centre of the cap height against the swatch row.
+    labelBaselineOffset: COMPACT_SWATCH_SIZE / 2 + fontSize * 0.35,
+    align: "right",
+    blockWidth: lessWidth + COMPACT_LABEL_GAP + barWidth + COMPACT_LABEL_GAP + moreWidth
+  };
+}
 function computeContinuousLegendContent(spec, theme, availableWidth) {
   if (!hasContinuousColorScale(spec)) return null;
   const colorEnc = spec.encoding.color;
@@ -9624,12 +10115,44 @@ function computeContinuousLegendContent(spec, theme, availableWidth) {
 }
 
 // src/compile/color-scale-range.ts
-var MUTED_COLOR = "#bfc3c8";
-function categoricalColorsForDomain(domain, theme, highlight) {
-  const palette = theme.colors.categorical;
+var FILL_MARKS = /* @__PURE__ */ new Set([
+  "bar",
+  "area",
+  "arc",
+  "waffle",
+  "calendar",
+  "rect"
+]);
+function mutedSeriesColor(theme) {
+  return theme.isDark ? ACHROMATIC_RAMP.fgFaint : "#d4d4d8";
+}
+function paletteFor(theme, markType) {
+  return markType && FILL_MARKS.has(markType) ? theme.colors.categoricalFill : theme.colors.categorical;
+}
+function extendPalette(palette, needed) {
+  if (needed <= palette.length) return palette;
+  const out = [...palette];
+  for (let i = 0; out.length < needed; i++) {
+    out.push(CATEGORICAL_EXTENDED_PALETTE[i % CATEGORICAL_EXTENDED_PALETTE.length]);
+  }
+  return out;
+}
+function defaultSeriesColor(theme, markType) {
+  return paletteFor(theme, markType)[0];
+}
+function paletteOverflowWarnings(domainLength, theme, markType) {
+  const palette = paletteFor(theme, markType);
+  if (domainLength <= palette.length) return [];
+  return [
+    `[openchart] color encoding has ${domainLength} categories but the palette carries ${palette.length}; slots ${palette.length + 1}+ come from the extended ramp and are harder to tell apart. Bucket the tail, facet, or direct-label instead.`
+  ];
+}
+function categoricalColorsForDomain(domain, theme, highlight, markType) {
+  const palette = extendPalette(paletteFor(theme, markType), domain.length);
   if (highlight && highlight.length > 0) {
     const highlightSet = new Set(highlight);
-    return domain.map((v, i) => highlightSet.has(v) ? palette[i % palette.length] : MUTED_COLOR);
+    const muted = mutedSeriesColor(theme);
+    return domain.map((v, i) => highlightSet.has(v) ? palette[i % palette.length] : muted);
   }
   const strategy = theme.seriesStrategy ?? "palette";
   if (strategy !== "accent-neutral") return palette;
@@ -9639,10 +10162,10 @@ function categoricalColorsForDomain(domain, theme, highlight) {
   const neutrals = theme.isDark ? [ACHROMATIC_RAMP.fgMuted, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgFaint] : [ACHROMATIC_RAMP.fgFaint, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgMuted];
   return domain.map((_, i) => i === 0 ? palette[0] : neutrals[(i - 1) % neutrals.length]);
 }
-function applyColorScaleRange(scales, encoding, theme, highlight) {
-  if (!scales.color) return;
+function applyColorScaleRange(scales, encoding, theme, highlight, markType) {
+  if (!scales.color) return [];
   const hasExplicitRange = !!(encoding.color && "field" in encoding.color && encoding.color.scale?.range?.length);
-  if (hasExplicitRange) return;
+  if (hasExplicitRange) return [];
   if (scales.color.type === "sequential") {
     const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
     scales.color.scale.range([
@@ -9655,8 +10178,11 @@ function applyColorScaleRange(scales, encoding, theme, highlight) {
     scale.range(sampleRampColors(seqStops, scale.range().length));
   } else {
     const ordinalScale = scales.color.scale;
-    ordinalScale.range(categoricalColorsForDomain(ordinalScale.domain(), theme, highlight));
+    const domain = ordinalScale.domain();
+    ordinalScale.range(categoricalColorsForDomain(domain, theme, highlight, markType));
+    return paletteOverflowWarnings(domain.length, theme, markType);
   }
+  return [];
 }
 
 // src/compile/data-clip.ts
@@ -9683,14 +10209,14 @@ function filterClippedDomains(data, encoding) {
 }
 
 // src/compile/fill-patterns.ts
-import { getRepresentativeColor as getRepresentativeColor12, pickLabelColor as pickLabelColor3 } from "@opendata-ai/openchart-core";
+import { getRepresentativeColor as getRepresentativeColor13, pickLabelColor as pickLabelColor3 } from "@opendata-ai/openchart-core";
 var PATTERN_SEQUENCE = ["diagonal", "dot", "crosshatch", "vertical"];
 var MIN_PATTERN_EXTENT = 12;
 function applyFillPatterns(marks, markDef, theme) {
   if (markDef.fillPattern !== "auto") return;
   const assignment = /* @__PURE__ */ new Map();
   const resolve = (fill) => {
-    const base = getRepresentativeColor12(fill);
+    const base = getRepresentativeColor13(fill);
     let resolved = assignment.get(base);
     if (!resolved) {
       const type = PATTERN_SEQUENCE[assignment.size % PATTERN_SEQUENCE.length];
@@ -10055,7 +10581,7 @@ function evenRange(start, end, count) {
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
 function resolveBandPadding(scaleConfig) {
-  const padding = scaleConfig?.padding ?? 0.35;
+  const padding = scaleConfig?.padding ?? DEFAULT_BAND_PADDING;
   return {
     paddingInner: scaleConfig?.paddingInner ?? padding,
     paddingOuter: scaleConfig?.paddingOuter ?? padding
@@ -10072,7 +10598,7 @@ function estimateBandStep(scaleConfig, plotWidth, n) {
   if (denom <= 0) return 0;
   return plotWidth / denom;
 }
-var DEFAULT_BAND_PADDING = 0.35;
+var DEFAULT_BAND_PADDING = 0.25;
 var HEATMAP_BAND_PADDING = 0.04;
 function buildBandScale(channel, data, rangeStart, rangeEnd, defaultPadding = DEFAULT_BAND_PADDING) {
   const values = channel.scale?.domain ? channel.scale.domain : applyCategoricalSort(uniqueFieldStrings2(data, channel.field), channel.sort);
@@ -10450,6 +10976,16 @@ var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
 var TOP_LEGEND_MAX_ROWS = 2;
 var ARC_LABEL_CROWDING_LIMIT = 21;
+function compactClassLegend(spec, theme, measureWidth) {
+  const colorEnc = spec.encoding.color;
+  if (!colorEnc || !("field" in colorEnc)) return null;
+  const values = [];
+  for (const row of spec.data) {
+    const value = Number(row[colorEnc.field]);
+    if (Number.isFinite(value)) values.push(value);
+  }
+  return computeCompactClassLegendContent(values, colorEnc, theme, measureWidth);
+}
 function hasLegendContent(content) {
   return content.entries.length > 0 || content.continuous != null;
 }
@@ -10501,7 +11037,8 @@ function extractColorEntries(spec, theme) {
   const explicitRange = colorEnc.scale?.range;
   const shape = swatchShapeForType(spec.markType);
   const scaleDomain = explicitDomain ? explicitDomain.map(String) : applyCategoricalSort(dataValues, colorEnc.sort);
-  const domainColors = explicitRange ?? categoricalColorsForDomain(scaleDomain, theme, spec.highlight);
+  const rawDomainColors = explicitRange ?? categoricalColorsForDomain(scaleDomain, theme, spec.highlight, spec.markType);
+  const domainColors = isStrokeSeriesMark(spec.markType) ? rawDomainColors.map((c) => resolveSeriesStroke(spec, c, theme)) : rawDomainColors;
   const uniqueValues = explicitDomain ? [
     ...explicitDomain.filter((v) => dataValues.includes(v)),
     ...dataValues.filter((v) => !explicitDomain.includes(v))
@@ -10557,8 +11094,9 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
     return emptyContent("top", theme);
   }
   if (hasContinuousColorScale(spec)) {
-    const continuous = computeContinuousLegendContent(spec, theme, availableWidth);
-    const continuousPosition = spec.legend?.position === "bottom" ? "bottom" : "top";
+    const compact = spec.markType === "calendar" && !spec.legend?.position ? compactClassLegend(spec, theme, measureWidth) : null;
+    const continuous = compact ?? computeContinuousLegendContent(spec, theme, availableWidth);
+    const continuousPosition = compact ? "bottom" : spec.legend?.position === "bottom" ? "bottom" : "top";
     if (!continuous) {
       return emptyContent(continuousPosition, theme);
     }
@@ -10571,15 +11109,16 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
       fontVariant: "tabular-nums"
     };
     const labelRowHeight = Math.ceil(labelStyle2.fontSize * labelStyle2.lineHeight);
-    const height = continuous.barHeight + CONTINUOUS_LABEL_GAP + labelRowHeight;
+    const height = compact ? Math.max(continuous.barHeight, labelRowHeight) : continuous.barHeight + CONTINUOUS_LABEL_GAP + labelRowHeight;
+    const blockWidth = continuous.blockWidth ?? continuous.barWidth;
     return {
       entries: [],
       position: continuousPosition,
       labelStyle: labelStyle2,
       rowCount: 1,
-      totalWidth: continuous.barWidth,
+      totalWidth: blockWidth,
       height,
-      legendWidth: continuous.barWidth,
+      legendWidth: blockWidth,
       offset: spec.legend?.offset,
       ...categoricalDefaults(theme),
       continuous
@@ -10618,7 +11157,10 @@ function computeLegendContent(spec, strategy, theme, availableWidth, availableHe
     fontSize: theme.fonts.sizes.small,
     fontWeight: theme.fonts.weights.normal,
     fill: theme.colors.text,
-    lineHeight: 1.3
+    lineHeight: 1.3,
+    // Legend labels are often values or years; lining figures keep the column
+    // of entries from shimmying.
+    fontVariant: "tabular-nums"
   };
   const specPosition = spec.legend?.position === "top-left" ? "top" : spec.legend?.position;
   const resolvedPosition = specPosition ?? (strategy.legendPosition === "right" ? "right" : "top");
@@ -10753,10 +11295,15 @@ function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight, ax
     const cDx = offset?.dx ?? 0;
     const cDy = offset?.dy ?? 0;
     const cGap = legendGap(containerWidth);
-    const boundsX2 = chartArea.x + cDx;
+    const boundsX2 = c.align === "right" ? chartArea.x + chartArea.width - legendWidth + cDx : chartArea.x + cDx;
     const boundsY2 = position === "bottom" ? chartArea.y + chartArea.height + xAxisHeight + cGap + cDy : chartArea.y - axisGapBelowLegend - cGap - height + cDy;
     const bounds2 = { x: boundsX2, y: boundsY2, width: legendWidth, height };
-    const bar = { x: bounds2.x, y: bounds2.y, width: c.barWidth, height: c.barHeight };
+    const bar = {
+      x: bounds2.x + (c.barOffsetX ?? 0),
+      y: bounds2.y,
+      width: c.barWidth,
+      height: c.barHeight
+    };
     return {
       type: "continuous",
       mode: c.mode,
@@ -10767,7 +11314,7 @@ function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight, ax
       colorStops: c.colorStops,
       bins: c.bins.map((b) => ({ ...b, x: b.x + bar.x })),
       ticks: c.ticks.map((t) => ({ ...t, x: t.x + bar.x })),
-      labelY: bar.y + bar.height + CONTINUOUS_LABEL_GAP + labelStyle.fontSize
+      labelY: bar.y + (c.labelBaselineOffset ?? bar.height + CONTINUOUS_LABEL_GAP + labelStyle.fontSize)
     };
   }
   if (entries.length === 0) {
@@ -10825,6 +11372,7 @@ import {
 import { scaleLinear as scaleLinear3, scaleSqrt as scaleSqrt3 } from "d3-scale";
 var LABEL_GAP = 6;
 var BASELINE_PAD = 2;
+var TITLE_GAP = 6;
 var CIRCLE_COUNT = 3;
 var MIN_LEGIBLE_RANGE = [4, 18];
 var SIZE_LEGEND_GAP = 12;
@@ -10882,6 +11430,15 @@ function toPrecision(value, digits) {
   const magnitude = 10 ** (Math.floor(Math.log10(Math.abs(value))) - digits + 1);
   return Math.round(value / magnitude) * magnitude;
 }
+function sizeLegendTitleStyle(theme) {
+  return {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.medium,
+    fill: theme.colors.neutral.secondary,
+    lineHeight: 1.3
+  };
+}
 function hasSizeChannel(encoding) {
   const size = encoding?.size;
   return !!size && "field" in size && !!size.field && size.type === "quantitative";
@@ -10904,7 +11461,9 @@ function computeSizeLegendContent(sizeEncoding, data, theme, options) {
   const maxRadius = drawScale(resolved.domain[1]);
   if (!Number.isFinite(maxRadius) || maxRadius <= 0) return null;
   const fontSize = theme.fonts.sizes.small;
-  const baseline = maxRadius * 2;
+  const title = (sizeEncoding?.title ?? sizeEncoding?.field) || void 0;
+  const titleRowHeight = title ? Math.ceil(fontSize * 1.3) + TITLE_GAP : 0;
+  const baseline = titleRowHeight + maxRadius * 2;
   const cx = maxRadius;
   const lineHeight = fontSize * 1.25;
   let prevLabelY = Number.NEGATIVE_INFINITY;
@@ -10926,10 +11485,14 @@ function computeSizeLegendContent(sizeEncoding, data, theme, options) {
     ...circles.map((c) => estimateTextWidth13(c.label, fontSize, theme.fonts.weights.normal))
   );
   const lastLabelBottom = (circles[circles.length - 1]?.labelY ?? 0) + fontSize * 0.5;
+  const circleBlockWidth = maxRadius * 2 + LABEL_GAP + widestLabel;
+  const titleWidth = title ? estimateTextWidth13(title, fontSize, theme.fonts.weights.medium) : 0;
   return {
     circles,
-    width: maxRadius * 2 + LABEL_GAP + widestLabel,
-    height: Math.max(baseline, lastLabelBottom) + BASELINE_PAD
+    width: Math.max(circleBlockWidth, titleWidth),
+    height: Math.max(baseline, lastLabelBottom) + BASELINE_PAD,
+    title,
+    titleY: title ? fontSize : void 0
   };
 }
 function placeSizeLegend(content, chartArea, theme, colorLegend) {
@@ -10956,7 +11519,10 @@ function placeSizeLegend(content, chartArea, theme, colorLegend) {
       fill: theme.colors.text,
       lineHeight: 1.3,
       fontVariant: "tabular-nums"
-    }
+    },
+    title: content.title,
+    titleStyle: content.title ? sizeLegendTitleStyle(theme) : void 0,
+    titleY: content.titleY
   };
 }
 
@@ -10965,7 +11531,6 @@ import {
   axisTitleOffset,
   computeXAxisExtentFromLabels,
   estimateTextWidth as estimateTextWidth15,
-  getAxisTitleOffset,
   truncateRotatedLabel,
   X_AXIS_TITLE_BAND,
   X_AXIS_TITLE_BAND_ROTATED
@@ -11384,6 +11949,16 @@ function clampXTickLabels(ticks, totalWidth, tickAngle, fontSize, fontWeight, me
     return x === tick.position ? tick : { ...tick, labelPosition: x };
   });
 }
+function capTickCount(ticks, max4) {
+  if (max4 <= 0 || ticks.length <= max4) return ticks;
+  if (max4 === 1) return [ticks[0]];
+  const last = ticks.length - 1;
+  const kept = [];
+  for (let i = 0; i < max4; i++) {
+    kept.push(ticks[Math.round(i * last / (max4 - 1))]);
+  }
+  return kept;
+}
 function computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
@@ -11478,6 +12053,9 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
     } else {
       ticks = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText);
     }
+    if (isContinuousX && !hasExplicitValues && dataContext?.maxXTicks != null) {
+      ticks = capTickCount(ticks, dataContext.maxXTicks);
+    }
     if (tickAngle && Math.abs(tickAngle) > 10) {
       const measureWidth = (text, size, weight) => measureLabel(text, size, weight ?? fontWeight, measureText);
       ticks = ticks.map((t) => {
@@ -11497,7 +12075,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
     const xDomainLine = axisConfig?.domain ?? (GROUNDED_MARKS.has(dataContext?.markType ?? "") ? void 0 : false);
     result.x = {
       ticks,
-      gridlines: axisConfig?.grid ?? dataContext?.markType === "point" ? gridlines : [],
+      gridlines: axisConfig?.grid ?? (!dataContext?.suppressGrid && dataContext?.markType === "point") ? gridlines : [],
       label: axisTitle,
       labelStyle: xLabelColor ? { ...axisLabelStyle, fill: xLabelColor } : axisLabelStyle,
       tickLabelStyle: xLabelColor ? { ...tickLabelStyle, fill: xLabelColor } : tickLabelStyle,
@@ -11575,7 +12153,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
       // Not for heatmaps: the cells tile the plot, so a gridline can only draw
       // *through* them. The cell grid already is the grid. Explicit `grid: true`
       // still wins.
-      gridlines: axisConfig?.grid ?? dataContext?.markType !== "rect" ? gridlines : [],
+      gridlines: axisConfig?.grid ?? (!dataContext?.suppressGrid && dataContext?.markType !== "rect") ? gridlines : [],
       label: axisTitle,
       labelStyle: yLabelColor ? { ...axisLabelStyle, fill: yLabelColor } : axisLabelStyle,
       tickLabelStyle: yLabelColor ? { ...tickLabelStyle, fill: yLabelColor } : tickLabelStyle,
@@ -11626,7 +12204,15 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   if (result.y?.label && result.y.labelStyle) {
     const isRight = result.y.orient === "right";
     if (isRight) {
-      const titleOff = getAxisTitleOffset(totalWidth);
+      const maxTickLabelWidth = result.y.ticks.reduce((max4, t) => {
+        const w = estimateTextWidth15(
+          t.label,
+          result.y.tickLabelStyle.fontSize,
+          result.y.tickLabelStyle.fontWeight ?? 400
+        );
+        return Math.max(max4, w);
+      }, 0);
+      const titleOff = axisTitleOffset(maxTickLabelWidth, result.y.labelStyle.fontSize, totalWidth);
       result.y.titlePosition = {
         x: chartArea.x + chartArea.width + titleOff,
         y: chartArea.y + chartArea.height / 2,
@@ -12107,6 +12693,10 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize, measure) {
     const v = Number(row[yField]);
     if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
   }
+  if (maxAbsVal > 0) {
+    const mag = 10 ** (Math.floor(Math.log10(maxAbsVal)) - 1);
+    maxAbsVal = Math.ceil(maxAbsVal / mag) * mag;
+  }
   const ctx = computeFieldFormatContext5(data.map((r) => r[yField]));
   let sampleLabel;
   if (yAxisFormat) {
@@ -12150,7 +12740,8 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
   const halfGlyph = Math.ceil(bodyFontSize / 2);
-  const titleCenterOffset = axisTitleOffset3(rightAxisWidth, bodyFontSize, options.width);
+  const rawTickWidth = Math.max(0, rightAxisWidth - 10);
+  const titleCenterOffset = axisTitleOffset3(rawTickWidth, bodyFontSize, options.width);
   const titleExtent = hasRightAxisTitle ? titleCenterOffset + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2) : 0;
   const rightReserve = Math.max(tickExtent, titleExtent);
   const optionsWithReserve = {
@@ -12186,7 +12777,7 @@ function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
     },
     ...layout1.axes.y.label ? {
       titlePosition: {
-        x: layout0.area.x + layout0.area.width + axisTitleOffset3(rightAxisWidth, bodyFontSize, layout0.dimensions.width),
+        x: layout0.area.x + layout0.area.width + axisTitleOffset3(rawTickWidth, bodyFontSize, layout0.dimensions.width),
         y: layout0.area.y + layout0.area.height / 2,
         angle: 90
       }
@@ -12599,7 +13190,7 @@ function resolveYouDrawIt(config, marks, scales, chartArea, xField) {
 }
 
 // src/compiler/a11y-warnings.ts
-import { contrastRatio, findAccessibleColor, isOpaqueColor as isOpaqueColor2 } from "@opendata-ai/openchart-core";
+import { contrastRatio, findAccessibleColor, isOpaqueColor } from "@opendata-ai/openchart-core";
 var GRAPHIC_MIN = 3;
 var TEXT_MIN = 4.5;
 var ADJACENT_FILL_MARKS = /* @__PURE__ */ new Set(["bar", "area", "arc", "waffle"]);
@@ -12607,7 +13198,7 @@ var fmt = (ratio) => `${ratio.toFixed(2)}:1`;
 function collectContrastWarnings(scales, markType, theme) {
   const warnings = [];
   const bg = theme.colors.background;
-  const bgIsCheckable = isOpaqueColor2(bg);
+  const bgIsCheckable = isOpaqueColor(bg);
   const series = [];
   if (scales.color && scales.color.type !== "sequential") {
     const ordinal = scales.color.scale;
@@ -12746,7 +13337,7 @@ function buildSparklineAreaGradient(baseColor) {
     x2: 0,
     y2: 1,
     stops: [
-      { offset: 0, color: baseColor, opacity: 0.35 },
+      { offset: 0, color: baseColor, opacity: 0.2 },
       { offset: 1, color: baseColor, opacity: 0 }
     ]
   };
@@ -12756,7 +13347,7 @@ function buildSparklineAreaGradient(baseColor) {
 import {
   adaptTheme as adaptTheme2,
   buildD3Formatter as buildD3Formatter2,
-  CATEGORICAL_PALETTE,
+  CATEGORICAL_PALETTE as CATEGORICAL_PALETTE2,
   computeChrome as computeChrome3,
   estimateTextWidth as estimateTextWidth18,
   formatNumber as formatNumber3,
@@ -12900,9 +13491,75 @@ function excludePolarFeatures(geojson) {
   if (filtered.length === 0) return geojson;
   return { type: "FeatureCollection", features: filtered };
 }
+function resolveDefaultProjection(topology) {
+  const bbox = topologyBBox(topology);
+  if (!bbox) return "albersUsa";
+  const [minX, minY, maxX, maxY] = bbox;
+  const preProjected = minX < -180.5 || maxX > 180.5 || minY < -90.5 || maxY > 90.5;
+  if (preProjected) return "identity";
+  if (maxX - minX > 200) return "equalEarth";
+  return "albersUsa";
+}
+function topologyBBox(topology) {
+  if (!topology || typeof topology !== "object") return null;
+  const topo = topology;
+  if (Array.isArray(topo.bbox) && topo.bbox.length >= 4) {
+    const box = topo.bbox.slice(0, 4);
+    if (box.every((n) => Number.isFinite(n))) {
+      return [box[0], box[1], box[2], box[3]];
+    }
+  }
+  if (!Array.isArray(topo.arcs) || topo.arcs.length === 0) return null;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  const quantized = !!topo.transform;
+  for (const arc of topo.arcs) {
+    let x = 0;
+    let y = 0;
+    for (const point of arc) {
+      if (!Array.isArray(point) || point.length < 2) continue;
+      if (quantized) {
+        x += point[0];
+        y += point[1];
+      } else {
+        x = point[0];
+        y = point[1];
+      }
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    }
+  }
+  if (!Number.isFinite(minX) || !Number.isFinite(minY)) return null;
+  if (topo.transform) {
+    const { scale, translate } = topo.transform;
+    return [
+      minX * scale[0] + translate[0],
+      minY * scale[1] + translate[1],
+      maxX * scale[0] + translate[0],
+      maxY * scale[1] + translate[1]
+    ];
+  }
+  return [minX, minY, maxX, maxY];
+}
 
 // src/geo/compile-geo-map.ts
 var OVERLAY_LEGEND_INSET = 18;
+var NO_DATA_SWATCH_GAP = 12;
+var NO_DATA_LABEL_GAP = 5;
+function legendTitleFor(colorEncoding) {
+  const base = colorEncoding.title ?? colorEncoding.field;
+  if (!base) return void 0;
+  const format = colorEncoding.format;
+  if (typeof format === "string") {
+    if (format.includes("%")) return `${base} (%)`;
+    if (format.includes("$")) return `${base} ($)`;
+  }
+  return base;
+}
 function validateGeoFeatures(geo) {
   if (!geo.features) {
     throw new Error(
@@ -12984,8 +13641,10 @@ function compileGeoMap(spec, options) {
   const legendPosition = mapSpec.legend?.position === "bottom" ? "bottom" : "top";
   const pointLegendOverlay = mapSpec.legend?.position === "top-left";
   let legendBlockHeight = 0;
+  let legendTitle;
   let continuousContent = null;
-  if (showChoroplethLegend && colorEncoding && isQuantitative) {
+  let classScale = null;
+  if (colorEncoding && isQuantitative) {
     const colorValues = [];
     for (const row of mapSpec.data) {
       const v = row[colorEncoding.field];
@@ -12996,19 +13655,28 @@ function compileGeoMap(spec, options) {
     }
     const legendChannel = {
       ...colorEncoding,
-      scale: { ...colorEncoding.scale, type: "quantile" }
+      scale: { ...colorEncoding.scale, type: colorEncoding.scale?.type ?? "quantize" }
     };
-    continuousContent = computeContinuousLegendContentForChannel(
-      colorValues,
-      legendChannel,
-      theme,
-      fullArea.width
-    );
+    if (colorValues.length > 0) {
+      classScale = classScaleForChannel(colorValues, legendChannel, theme);
+    }
+    if (showChoroplethLegend) {
+      continuousContent = computeContinuousLegendContentForChannel(
+        colorValues,
+        legendChannel,
+        theme,
+        fullArea.width,
+        classScale ?? void 0
+      );
+    }
     if (continuousContent) {
+      legendTitle = legendTitleFor(colorEncoding);
       const labelRowHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
-      legendBlockHeight = continuousContent.barHeight + CONTINUOUS_LABEL_GAP + labelRowHeight;
+      const titleRowHeight = legendTitle ? labelRowHeight : 0;
+      legendBlockHeight = titleRowHeight + continuousContent.barHeight + CONTINUOUS_LABEL_GAP + labelRowHeight;
     }
-  } else if (showChoroplethLegend && colorEncoding) {
+  }
+  if (legendBlockHeight === 0 && showChoroplethLegend && colorEncoding && !isQuantitative) {
     const labelHeight = Math.ceil(theme.fonts.sizes.small * 1.3);
     legendBlockHeight = Math.max(10, labelHeight) + 6;
   }
@@ -13026,7 +13694,14 @@ function compileGeoMap(spec, options) {
   if (mapAreaHeight <= 0) {
     return emptyLayout3(chrome, theme, options, watermark);
   }
-  const projectionType = mapSpec.geo.projection;
+  const projectionType = mapSpec.geo.projection ?? resolveDefaultProjection(topology);
+  if (options.dev && !mapSpec.geo.projection && projectionType === "identity") {
+    compileWarnings.push({
+      code: "PROJECTION_INFERRED",
+      message: 'No geo.projection was given and the topology looks pre-projected (its bounding box is outside longitude/latitude range), so projection: "identity" was inferred. Set geo.projection explicitly to silence this.',
+      context: { projection: projectionType }
+    });
+  }
   let pointInset = 0;
   if (mapSpec.points) {
     const sizeRange = mapSpec.points.size?.scale?.range;
@@ -13071,8 +13746,7 @@ function compileGeoMap(spec, options) {
   }
   const droppedFeatures = [];
   const formatter = buildD3Formatter2(mapSpec.encoding?.color?.format ?? mapSpec.valueFormat) ?? formatNumber3;
-  const neutralFill = isDarkMode ? "#2a2a2a" : "#e8e8e8";
-  const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
+  const neutralFill = isDarkMode ? theme.colors.neutral[800] : theme.colors.neutral[100];
   let featureMarks;
   let continuousLegend = null;
   let categoricalLegend = null;
@@ -13081,7 +13755,6 @@ function compileGeoMap(spec, options) {
       geoFeatures,
       pathGen,
       neutralFill,
-      neutralStroke,
       droppedFeatures
     });
   } else if (isQuantitative) {
@@ -13090,10 +13763,8 @@ function compileGeoMap(spec, options) {
       pathGen,
       joined,
       colorField: colorEncoding.field,
-      palette: colorEncoding.scale?.scheme ?? "blue",
-      isDarkMode: !!isDarkMode,
+      classScale,
       neutralFill,
-      neutralStroke,
       formatter,
       droppedFeatures
     });
@@ -13109,6 +13780,12 @@ function compileGeoMap(spec, options) {
       };
       const legendX = fullArea.x;
       const legendY = legendPosition === "bottom" ? fullArea.y + mapAreaHeight + legendReserveGap : fullArea.y + legendReserveGap;
+      const titleStyle = legendTitle ? {
+        ...labelStyle,
+        fontWeight: theme.fonts.weights.medium,
+        fill: theme.colors.neutral.secondary
+      } : void 0;
+      const titleRowHeight = legendTitle ? Math.ceil(theme.fonts.sizes.small * 1.3) : 0;
       const bounds = {
         x: legendX,
         y: legendY,
@@ -13117,10 +13794,25 @@ function compileGeoMap(spec, options) {
       };
       const bar = {
         x: bounds.x,
-        y: bounds.y,
+        y: bounds.y + titleRowHeight,
         width: continuousContent.barWidth,
         height: continuousContent.barHeight
       };
+      const labelY = bar.y + bar.height + CONTINUOUS_LABEL_GAP + labelStyle.fontSize;
+      const hasUnmatched = featureMarks.some((m) => {
+        const raw = m.data?.[colorEncoding.field];
+        return raw == null || Number.isNaN(Number(raw));
+      });
+      const noDataX = bar.x + bar.width + NO_DATA_SWATCH_GAP;
+      const noData = hasUnmatched && noDataX + bar.height + NO_DATA_LABEL_GAP < fullArea.x + fullArea.width ? {
+        x: noDataX,
+        y: bar.y,
+        size: bar.height,
+        fill: neutralFill,
+        label: "No data",
+        labelX: noDataX + bar.height + NO_DATA_LABEL_GAP,
+        labelY: bar.y + bar.height
+      } : void 0;
       continuousLegend = {
         type: "continuous",
         mode: continuousContent.mode,
@@ -13131,7 +13823,11 @@ function compileGeoMap(spec, options) {
         colorStops: continuousContent.colorStops,
         bins: continuousContent.bins.map((b) => ({ ...b, x: b.x + bar.x })),
         ticks: continuousContent.ticks.map((t) => ({ ...t, x: t.x + bar.x })),
-        labelY: bar.y + bar.height + CONTINUOUS_LABEL_GAP + labelStyle.fontSize
+        labelY,
+        title: legendTitle,
+        titleStyle,
+        titleY: legendTitle ? bounds.y + labelStyle.fontSize : void 0,
+        noData
       };
     }
   } else {
@@ -13143,7 +13839,6 @@ function compileGeoMap(spec, options) {
       colorScale: colorEncoding.scale,
       isDarkMode: !!isDarkMode,
       neutralFill,
-      neutralStroke,
       theme,
       fullArea,
       mapAreaHeight,
@@ -13174,12 +13869,20 @@ function compileGeoMap(spec, options) {
   );
   const interiorPath = pathGen(interiorMesh) ?? "";
   const outlinePath = pathGen(outlineMesh) ?? "";
-  const interiorStroke = isDarkMode ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.15)";
-  const outlineStroke = isDarkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.3)";
-  const borders = { interiorPath, outlinePath, interiorStroke, outlineStroke };
+  const interiorStroke = isDarkMode ? "rgba(255,255,255,0.22)" : "rgba(0,0,0,0.25)";
+  const outlineStroke = isDarkMode ? "rgba(255,255,255,0.45)" : "rgba(0,0,0,0.55)";
+  const borders = {
+    interiorPath,
+    outlinePath,
+    interiorStroke,
+    outlineStroke,
+    interiorWidth: 0.6,
+    outlineWidth: 1.1
+  };
   const pointMarks = [];
   let pointCategoricalLegend = null;
   let pointContinuousLegend = null;
+  let pointSizeLegend = null;
   if (mapSpec.points) {
     const pts = mapSpec.points;
     const lonField = pts.longitude.field;
@@ -13205,7 +13908,7 @@ function compileGeoMap(spec, options) {
           const qScale = scaleQuantile3().domain(colorValues).range(paletteStops);
           pointColorScale = (val) => {
             const v = Number(val);
-            return Number.isFinite(v) ? qScale(v) : CATEGORICAL_PALETTE[0];
+            return Number.isFinite(v) ? qScale(v) : CATEGORICAL_PALETTE2[0];
           };
         }
       } else {
@@ -13227,7 +13930,7 @@ function compileGeoMap(spec, options) {
             }
           }
         }
-        const colorSource = explicitRange && Array.isArray(explicitRange) ? explicitRange : CATEGORICAL_PALETTE;
+        const colorSource = explicitRange && Array.isArray(explicitRange) ? explicitRange : CATEGORICAL_PALETTE2;
         for (let i = 0; i < pointCategories.length; i++) {
           pointCategoryColors.set(pointCategories[i], colorSource[i % colorSource.length]);
         }
@@ -13237,9 +13940,8 @@ function compileGeoMap(spec, options) {
         };
       }
     }
-    const defaultFill = CATEGORICAL_PALETTE[0];
-    const pointOpacity = pts.opacity ?? 0.65;
-    let animIndex = 0;
+    const defaultFill = CATEGORICAL_PALETTE2[0];
+    const pointOpacity = pts.opacity ?? 0.85;
     const droppedPoints = [];
     for (let i = 0; i < pts.data.length; i++) {
       const row = pts.data[i];
@@ -13254,7 +13956,7 @@ function compileGeoMap(spec, options) {
       const r = sizeScale ? sizeScale.scale(Number(row[sizeScale.field])) : 5;
       const fill = pointColorScale && pts.color ? pointColorScale(row[pts.color.field]) : defaultFill;
       const key = keyChannel ? String(row[keyChannel.field] ?? i) : String(i);
-      const stroke = isDarkMode ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.8)";
+      const stroke = resolveKnockoutColor(theme);
       pointMarks.push({
         type: "map-point",
         cx: projected[0],
@@ -13267,9 +13969,13 @@ function compileGeoMap(spec, options) {
         key,
         data: row,
         aria: { role: "img", label: key },
-        animationIndex: animIndex++
+        animationIndex: 0
       });
     }
+    pointMarks.sort((a, b) => b.r - a.r);
+    for (let i = 0; i < pointMarks.length; i++) {
+      pointMarks[i].animationIndex = i;
+    }
     if (droppedPoints.length > 0) {
       const sample = droppedPoints.slice(0, 3).map(([lo, la]) => `[${lo}, ${la}]`).join(", ");
       compileWarnings.push({
@@ -13371,6 +14077,42 @@ function compileGeoMap(spec, options) {
         };
       }
     }
+    if (pts.size && showLegend) {
+      const sizeRange = pts.size.scale?.range ?? [
+        ...SIZE_SCALE_DEFAULTS.mapPoint.range
+      ];
+      const content = computeSizeLegendContent(pts.size, pts.data, theme, {
+        curve: SIZE_SCALE_DEFAULTS.mapPoint.curve,
+        range: sizeRange
+      });
+      if (content) {
+        const mapTop = legendPosition === "top" && legendBlockHeight > 0 ? fullArea.y + legendBlockHeight + legendReserveGap : fullArea.y;
+        pointSizeLegend = {
+          type: "size",
+          channel: "size",
+          position: "bottom-right",
+          bounds: {
+            x: fullArea.x + fullArea.width - content.width - OVERLAY_LEGEND_INSET,
+            y: mapTop + mapAreaHeight - content.height - OVERLAY_LEGEND_INSET,
+            width: content.width,
+            height: content.height
+          },
+          circles: content.circles,
+          stroke: theme.colors.neutral[400],
+          labelStyle: {
+            fontFamily: theme.fonts.family,
+            fontSize: theme.fonts.sizes.small,
+            fontWeight: theme.fonts.weights.normal,
+            fill: theme.colors.neutral.secondary,
+            lineHeight: 1.2,
+            fontVariant: "tabular-nums"
+          },
+          title: content.title,
+          titleStyle: content.title ? sizeLegendTitleStyle(theme) : void 0,
+          titleY: content.titleY
+        };
+      }
+    }
   }
   const tooltipChannels = mapSpec.encoding.tooltip ? Array.isArray(mapSpec.encoding.tooltip) ? mapSpec.encoding.tooltip : [mapSpec.encoding.tooltip] : null;
   const tooltipDescriptors = /* @__PURE__ */ new Map();
@@ -13484,6 +14226,7 @@ function compileGeoMap(spec, options) {
     pointMarks,
     pointCategoricalLegend,
     pointContinuousLegend,
+    pointSizeLegend,
     tooltipDescriptors,
     a11y,
     theme,
@@ -13498,7 +14241,7 @@ function compileGeoMap(spec, options) {
   };
 }
 function buildBasemapMarks(opts) {
-  const { geoFeatures, pathGen, neutralFill, neutralStroke, droppedFeatures } = opts;
+  const { geoFeatures, pathGen, neutralFill, droppedFeatures } = opts;
   const marks = [];
   let animIndex = 0;
   for (const feat of geoFeatures) {
@@ -13524,8 +14267,10 @@ function buildBasemapMarks(opts) {
       type: "map-feature",
       path: pathD,
       fill: neutralFill,
-      stroke: neutralStroke,
-      strokeWidth: 0.5,
+      // The border meshes draw every line on this map. A per-feature stroke on
+      // top of them double-draws each shared edge into a visible wash.
+      stroke: "none",
+      strokeWidth: 0,
       id: featureId,
       name,
       data: null,
@@ -13543,23 +14288,11 @@ function buildQuantitativeMarks(opts) {
     pathGen,
     joined,
     colorField,
-    palette,
-    isDarkMode,
+    classScale,
     neutralFill,
-    neutralStroke,
     formatter,
     droppedFeatures
   } = opts;
-  const values = [];
-  for (const row of joined.values()) {
-    const raw = row[colorField];
-    if (raw != null) {
-      const v = Number(raw);
-      if (!Number.isNaN(v)) values.push(v);
-    }
-  }
-  const paletteStops = [...SEQUENTIAL_PALETTES2[palette] ?? SEQUENTIAL_PALETTES2.blue];
-  const colorScale = scaleQuantile3().domain(values).range(paletteStops);
   const marks = [];
   let animIndex = 0;
   for (const feat of geoFeatures) {
@@ -13573,16 +14306,16 @@ function buildQuantitativeMarks(opts) {
     const dataRow = joined.get(featureId) ?? null;
     const hasData = dataRow !== null;
     let fill = neutralFill;
-    let stroke = neutralStroke;
-    if (hasData) {
+    let binIndex;
+    if (hasData && classScale) {
       const raw = dataRow[colorField];
       if (raw != null) {
         const v = Number(raw);
         if (!Number.isNaN(v)) {
-          fill = colorScale(v);
+          fill = classScale.color(v);
+          binIndex = classScale.binIndex(v);
         }
       }
-      stroke = isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
     }
     const props = feat.properties;
     const name = props?.name ?? props?.NAME;
@@ -13599,8 +14332,8 @@ function buildQuantitativeMarks(opts) {
       type: "map-feature",
       path: pathD,
       fill,
-      stroke,
-      strokeWidth: 0.5,
+      stroke: "none",
+      strokeWidth: 0,
       id: featureId,
       name,
       data: dataRow,
@@ -13610,7 +14343,8 @@ function buildQuantitativeMarks(opts) {
       },
       animationIndex: animIndex++,
       bounds,
-      centroid: [cx, cy]
+      centroid: [cx, cy],
+      binIndex
     });
   }
   return { marks };
@@ -13624,7 +14358,6 @@ function buildCategoricalMarks(opts) {
     colorScale: scaleConfig,
     isDarkMode,
     neutralFill,
-    neutralStroke,
     theme,
     fullArea,
     mapAreaHeight,
@@ -13652,7 +14385,7 @@ function buildCategoricalMarks(opts) {
     }
   }
   const explicitRange = scaleConfig?.range;
-  const colorSource = explicitRange && Array.isArray(explicitRange) ? explicitRange : CATEGORICAL_PALETTE;
+  const colorSource = explicitRange && Array.isArray(explicitRange) ? explicitRange : CATEGORICAL_PALETTE2;
   const categoryColors = /* @__PURE__ */ new Map();
   for (let i = 0; i < categories.length; i++) {
     categoryColors.set(categories[i], colorSource[i % colorSource.length]);
@@ -13670,14 +14403,12 @@ function buildCategoricalMarks(opts) {
     const dataRow = joined.get(featureId) ?? null;
     const hasData = dataRow !== null;
     let fill = neutralFill;
-    let stroke = neutralStroke;
     if (hasData) {
       const raw = dataRow[colorField];
       if (raw != null) {
         const cat = String(raw);
         fill = categoryColors.get(cat) ?? neutralFill;
       }
-      stroke = isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
     }
     const props = feat.properties;
     const name = props?.name ?? props?.NAME;
@@ -13694,8 +14425,8 @@ function buildCategoricalMarks(opts) {
       type: "map-feature",
       path: pathD,
       fill,
-      stroke,
-      strokeWidth: 0.5,
+      stroke: "none",
+      strokeWidth: 0,
       id: featureId,
       name,
       data: dataRow,
@@ -13830,14 +14561,17 @@ function emptyLayout3(chrome, theme, options, watermark) {
     borders: {
       interiorPath: "",
       outlinePath: "",
-      interiorStroke: "rgba(0,0,0,0.15)",
-      outlineStroke: "rgba(0,0,0,0.3)"
+      interiorStroke: "rgba(0,0,0,0.25)",
+      outlineStroke: "rgba(0,0,0,0.55)",
+      interiorWidth: 0.6,
+      outlineWidth: 1.1
     },
     continuousLegend: null,
     categoricalLegend: null,
     pointMarks: [],
     pointCategoricalLegend: null,
     pointContinuousLegend: null,
+    pointSizeLegend: null,
     tooltipDescriptors: /* @__PURE__ */ new Map(),
     a11y: {
       altText: "Empty map",
@@ -13926,6 +14660,7 @@ function resolveCamera(phase) {
 
 // src/graphs/encoding.ts
 import { max as max3, min as min3 } from "d3-array";
+import { interpolateRgb } from "d3-interpolate";
 import { scaleLinear as scaleLinear5, scaleOrdinal as scaleOrdinal2, scaleSqrt as scaleSqrt4 } from "d3-scale";
 var DEFAULT_NODE_RADIUS = 5;
 var MIN_NODE_RADIUS = 3;
@@ -13933,7 +14668,7 @@ var MAX_NODE_RADIUS = 12;
 var DEFAULT_EDGE_WIDTH = 1;
 var MIN_EDGE_WIDTH = 0.5;
 var MAX_EDGE_WIDTH = 4;
-var DEFAULT_STROKE_WIDTH2 = 1;
+var DEFAULT_STROKE_WIDTH = 1.5;
 function darkenColor(hex, amount = 0.2) {
   const clean = hex.replace(/^#/, "");
   if (clean.length !== 6 && clean.length !== 3) return hex;
@@ -13987,6 +14722,9 @@ function resolveCategoricalDomain(values, sort, scaleDomain) {
   const sorted = [...seen].sort((a, b) => a.localeCompare(b));
   return sort === "descending" ? sorted.reverse() : sorted;
 }
+function resolveGraphSurface(theme) {
+  return theme.colors.neutral.surface;
+}
 function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
   const degrees = computeDegrees(nodes, edges);
   const maxDegree = Math.max(1, ...degrees.values());
@@ -14032,6 +14770,7 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
     }
   }
   const defaultColor = theme.colors.categorical[0];
+  const surface = resolveGraphSurface(theme);
   let opacityScale;
   if (encoding.nodeOpacity?.field) {
     const field = encoding.nodeOpacity.field;
@@ -14070,7 +14809,7 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
       }
     }
     const fill = colorFn ? colorFn(node) : defaultColor;
-    const stroke = darkenColor(fill);
+    const stroke = surface;
     let label;
     if (encoding.nodeLabel?.field) {
       const labelVal = node[encoding.nodeLabel.field];
@@ -14091,7 +14830,7 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
     const override = nodeOverrides?.[node.id];
     const finalFill = override?.fill ?? fill;
     const finalRadius = override?.radius ?? radius;
-    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH2;
+    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH;
     const finalStroke = override?.stroke ?? stroke;
     const finalLabelPriority = override?.alwaysShowLabel ? Infinity : labelPriority;
     return {
@@ -14108,7 +14847,7 @@ function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
     };
   });
 }
-function resolveEdgeVisuals(edges, encoding, theme) {
+function resolveEdgeVisuals(edges, encoding, theme, nodeFills) {
   let widthScale;
   if (encoding.edgeWidth?.field) {
     const field = encoding.edgeWidth.field;
@@ -14146,7 +14885,19 @@ function resolveEdgeVisuals(edges, encoding, theme) {
       edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
     }
   }
-  const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+  const fallbackEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+  const defaultEdgeColorFor = (source, target) => {
+    if (!nodeFills) return fallbackEdgeColor;
+    const a = nodeFills.get(source);
+    const b = nodeFills.get(target);
+    if (!a || !b) return fallbackEdgeColor;
+    if (a === b) return a;
+    try {
+      return interpolateRgb(a, b)(0.5);
+    } catch {
+      return fallbackEdgeColor;
+    }
+  };
   const EDGE_STYLES = ["solid", "dashed", "dotted"];
   let styleFn;
   if (encoding.edgeStyle?.field) {
@@ -14171,7 +14922,7 @@ function resolveEdgeVisuals(edges, encoding, theme) {
         strokeWidth = widthScale(val);
       }
     }
-    const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColor;
+    const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColorFor(String(source), String(target));
     const style = styleFn ? styleFn(edge) : "solid";
     return {
       source,
@@ -14217,7 +14968,7 @@ function applyCommunityColors(nodes, colorMap) {
 }
 
 // src/graphs/interaction.ts
-var DEFAULT_DIM_OPACITY = 0.15;
+var DEFAULT_DIM_OPACITY = 0.3;
 var DEFAULT_CURSOR_RADIUS = 80;
 var DEFAULT_CURSOR_STRENGTH = 30;
 function resolveGraphInteraction(cfg) {
@@ -14440,7 +15191,8 @@ function compileGraph(spec, options) {
     communityColorMap = buildCommunityColorMap(compiledNodes, theme);
     applyCommunityColors(compiledNodes, communityColorMap);
   }
-  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
+  const nodeFills = new Map(compiledNodes.map((n) => [n.id, n.fill]));
+  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme, nodeFills);
   const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
   const nodeColorField = graphSpec.encoding.nodeColor?.field;
   const legendOrder = nodeColorField ? resolveCategoricalDomain(
@@ -15154,6 +15906,7 @@ function computeGridlines(axes, chartArea, showVertical = false) {
 // src/sankey/compile-sankey.ts
 import {
   adaptTheme as adaptTheme4,
+  buildD3Formatter as buildD3Formatter3,
   computeChrome as computeChrome6,
   defaultNumberFormatter as defaultNumberFormatter10,
   estimateTextWidth as estimateTextWidth21,
@@ -15231,8 +15984,11 @@ function generateLinkPath(link) {
 // src/sankey/compile-sankey.ts
 var LABEL_GAP3 = 6;
 var LINK_OPACITY_LIGHT = 0.5;
-var LINK_OPACITY_DARK = 0.75;
+var LINK_OPACITY_DARK = 0.6;
 var NODE_CORNER_RADIUS = 2;
+var VALUE_GAP = 5;
+var MAX_LABEL_GUTTER = 0.35;
+var OTHER_ID_PREFIX = "__oc_other_";
 function pickColor(palette, index) {
   return palette[index % palette.length];
 }
@@ -15275,20 +16031,66 @@ function getLinkColors(linkStyle, sourceColor, targetColor, neutralColor) {
       return { sourceColor, targetColor };
   }
 }
+function resolveOtherConfig(other) {
+  if (other == null) return null;
+  const threshold = typeof other === "number" ? other : other.threshold;
+  if (!Number.isFinite(threshold) || threshold <= 0) return null;
+  const label = (typeof other === "object" ? other.label : void 0) ?? "Other";
+  return { threshold, label };
+}
+function bucketSmallNodes(nodes, cfg) {
+  const byDepth = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const depth = node.depth ?? 0;
+    const group = byDepth.get(depth);
+    if (group) group.push(node);
+    else byDepth.set(depth, [node]);
+  }
+  const merged = /* @__PURE__ */ new Map();
+  for (const [depth, group] of byDepth) {
+    const total = group.reduce((sum, n) => sum + (n.value ?? 0), 0);
+    if (total <= 0) continue;
+    const small = group.filter((n) => (n.value ?? 0) / total < cfg.threshold);
+    if (small.length < 2) continue;
+    for (const node of small) merged.set(node.id, `${OTHER_ID_PREFIX}${depth}`);
+  }
+  return merged;
+}
+function rewriteRowsForOther(data, sourceField, targetField, valueField, merged) {
+  const out = [];
+  const index = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const src = String(row[sourceField]);
+    const tgt = String(row[targetField]);
+    const newSrc = merged.get(src) ?? src;
+    const newTgt = merged.get(tgt) ?? tgt;
+    if (newSrc === newTgt) continue;
+    const key = `${newSrc}\0${newTgt}`;
+    const value = Number(row[valueField]) || 0;
+    const existing = index.get(key);
+    if (existing) {
+      existing[valueField] = (Number(existing[valueField]) || 0) + value;
+      continue;
+    }
+    const next = { ...row, [sourceField]: newSrc, [targetField]: newTgt, [valueField]: value };
+    index.set(key, next);
+    out.push(next);
+  }
+  return out;
+}
+function labelsLeftForDepth(depth, maxDepth, nodeLabelAlign) {
+  if (nodeLabelAlign === "left") return true;
+  if (nodeLabelAlign === "right") return false;
+  if (depth === 0 && maxDepth > 0) return true;
+  return false;
+}
 function computeNodeLabel(node, maxDepth, theme, nodeWidth, nodeLabelAlign = "auto", containerWidth, padding) {
   const depth = node.depth ?? 0;
-  let placeLeft;
-  if (nodeLabelAlign === "left") {
-    placeLeft = true;
-  } else if (nodeLabelAlign === "right") {
-    placeLeft = false;
-  } else {
-    placeLeft = depth === maxDepth;
-  }
+  const placeLeft = labelsLeftForDepth(depth, maxDepth, nodeLabelAlign);
   const style = {
     fontFamily: theme.fonts.family,
     fontSize: theme.fonts.sizes.small,
-    fontWeight: theme.fonts.weights.normal,
+    fontWeight: theme.fonts.weights.medium,
     fill: theme.colors.text,
     lineHeight: 1.3
   };
@@ -15421,68 +16223,134 @@ function compileSankey(spec, options) {
     return emptyLayout4(area3, chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
-  const labelFontWeight = theme.fonts.weights.normal;
-  const nodeWidth = sankeySpec.nodeWidth ?? 12;
-  let layoutArea = { ...area3 };
-  let { nodes, links } = computeSankeyLayout(
-    sankeySpec.data,
+  const labelFontWeight = theme.fonts.weights.medium;
+  const valueFontWeight = theme.fonts.weights.normal;
+  const nodeLabelAlign = sankeySpec.nodeLabelAlign ?? "auto";
+  let workingData = sankeySpec.data;
+  const runLayout = (rect) => computeSankeyLayout(
+    workingData,
     sourceField,
     targetField,
     valueField,
-    layoutArea,
+    rect,
     sankeySpec.nodeWidth,
     sankeySpec.nodePadding,
     sankeySpec.nodeAlign,
     sankeySpec.iterations,
     sankeySpec.nodeSort
   );
-  const nodeLabelAlign = sankeySpec.nodeLabelAlign ?? "auto";
-  const maxDepthFirst = nodes.reduce((max4, n) => Math.max(max4, n.depth ?? 0), 0);
-  const rightEdge = area3.x + area3.width;
-  let maxOverflow = 0;
-  for (const node of nodes) {
-    const depth = node.depth ?? 0;
-    const labelsLeft = nodeLabelAlign === "left" || nodeLabelAlign === "auto" && depth === maxDepthFirst;
-    if (labelsLeft) continue;
-    const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP3;
-    const labelText = node.label ?? node.id;
-    const labelWidth = estimateTextWidth21(labelText, labelFontSize, labelFontWeight);
-    const overflow = labelX + labelWidth - rightEdge;
-    if (overflow > maxOverflow) maxOverflow = overflow;
-  }
-  if (maxOverflow > 0) {
-    const margin = Math.ceil(maxOverflow) + 4;
+  let layoutArea = { ...area3 };
+  let { nodes, links } = runLayout(layoutArea);
+  const otherConfig = resolveOtherConfig(sankeySpec.other);
+  const otherLabels = /* @__PURE__ */ new Map();
+  const otherMembers = /* @__PURE__ */ new Map();
+  if (otherConfig) {
+    const merged = bucketSmallNodes(nodes, otherConfig);
+    if (merged.size > 0) {
+      for (const [nodeId, otherId] of merged) {
+        otherLabels.set(otherId, otherConfig.label);
+        const members = otherMembers.get(otherId);
+        if (members) members.push(nodeId);
+        else otherMembers.set(otherId, [nodeId]);
+      }
+      workingData = rewriteRowsForOther(workingData, sourceField, targetField, valueField, merged);
+      ({ nodes, links } = runLayout(layoutArea));
+    }
+  }
+  const applyOtherLabels = (list) => {
+    if (otherLabels.size === 0) return;
+    for (const node of list) {
+      const label = otherLabels.get(node.id);
+      if (label) node.label = label;
+    }
+  };
+  applyOtherLabels(nodes);
+  const nodeFmt = resolveNodeValueFormatter(nodes, resolvedValueFormat, flowFmt);
+  const labelBlockWidth = (node) => {
+    const name = node.label ?? node.id;
+    const nameWidth = estimateTextWidth21(name, labelFontSize, labelFontWeight);
+    const valueWidth = estimateTextWidth21(
+      formatFlowValue(node.value ?? 0, nodeFmt),
+      labelFontSize,
+      valueFontWeight
+    );
+    return nameWidth + VALUE_GAP + valueWidth;
+  };
+  const measureGutters = (list) => {
+    const maxDepth2 = list.reduce((max4, n) => Math.max(max4, n.depth ?? 0), 0);
+    const cap = area3.width * MAX_LABEL_GUTTER;
+    let left = 0;
+    let right = 0;
+    for (const node of list) {
+      const depth = node.depth ?? 0;
+      const width = labelBlockWidth(node) + LABEL_GAP3;
+      if (labelsLeftForDepth(depth, maxDepth2, nodeLabelAlign)) {
+        const need = width - ((node.x0 ?? 0) - area3.x);
+        if (need > left) left = need;
+      } else {
+        const need = width - (area3.x + area3.width - (node.x1 ?? 0));
+        if (need > right) right = need;
+      }
+    }
+    return {
+      left: Math.min(Math.max(left, 0), cap),
+      right: Math.min(Math.max(right, 0), cap)
+    };
+  };
+  const gutters = measureGutters(nodes);
+  if (gutters.left > 0 || gutters.right > 0) {
+    const left = Math.ceil(gutters.left);
+    const right = Math.ceil(gutters.right);
     layoutArea = {
-      x: area3.x,
+      x: area3.x + left,
       y: area3.y,
-      width: Math.max(area3.width - margin, 40),
+      width: Math.max(area3.width - left - right, 40),
       height: area3.height
     };
-    ({ nodes, links } = computeSankeyLayout(
-      sankeySpec.data,
-      sourceField,
-      targetField,
-      valueField,
-      layoutArea,
-      sankeySpec.nodeWidth,
-      sankeySpec.nodePadding,
-      sankeySpec.nodeAlign,
-      sankeySpec.iterations,
-      sankeySpec.nodeSort
-    ));
+    ({ nodes, links } = runLayout(layoutArea));
+    applyOtherLabels(nodes);
   }
   const nodeColorMap = buildNodeColorMap(
     nodes,
     theme.colors.categorical,
     colorField,
-    sankeySpec.data,
+    workingData,
     sourceField,
     targetField
   );
+  for (const otherId of otherMembers.keys()) {
+    nodeColorMap.set(otherId, theme.colors.neutral[300]);
+  }
   const maxDepth = nodes.reduce((max4, n) => Math.max(max4, n.depth ?? 0), 0);
+  const valueStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.axis,
+    fontVariant: "tabular-nums",
+    lineHeight: 1.3
+  };
+  const columnX0 = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const d = node.depth ?? 0;
+    const x0 = node.x0 ?? 0;
+    const current = columnX0.get(d);
+    if (current === void 0 || x0 < current) columnX0.set(d, x0);
+  }
+  const valueLabelFor = (node, depth, text) => {
+    const placedLeft = labelsLeftForDepth(depth, maxDepth, nodeLabelAlign);
+    if (placedLeft || depth === maxDepth) return { text, style: valueStyle };
+    const nextColumn = columnX0.get(depth + 1);
+    if (nextColumn === void 0) return { text, style: valueStyle };
+    const available = nextColumn - LABEL_GAP3 - ((node.x1 ?? 0) + LABEL_GAP3);
+    const needed = estimateTextWidth21(node.label ?? node.id, labelFontSize, labelFontWeight) + VALUE_GAP + estimateTextWidth21(text, labelFontSize, valueFontWeight);
+    return needed <= available ? { text, style: valueStyle } : void 0;
+  };
   const nodeMarks = nodes.map((node) => {
     const fill = nodeColorMap.get(node.id) ?? theme.colors.categorical[0];
     const depth = node.depth ?? 0;
+    const merged = otherMembers.get(node.id);
+    const valueText = formatFlowValue(node.value ?? 0, nodeFmt);
     return {
       type: "sankeyNode",
       x: node.x0 ?? 0,
@@ -15490,6 +16358,9 @@ function compileSankey(spec, options) {
       width: (node.x1 ?? 0) - (node.x0 ?? 0),
       height: (node.y1 ?? 0) - (node.y0 ?? 0),
       fill,
+      // Explicit: a node is a solid block of flow, not an outlined box. Without
+      // this the renderer inherits whatever stroke the SVG context carries.
+      stroke: "none",
       cornerRadius: NODE_CORNER_RADIUS,
       label: computeNodeLabel(
         node,
@@ -15500,13 +16371,14 @@ function compileSankey(spec, options) {
         options.width,
         padding
       ),
+      valueLabel: valueLabelFor(node, depth, valueText),
       nodeId: node.id,
       value: node.value ?? 0,
       depth,
-      data: { id: node.id, label: node.label },
+      data: merged ? { id: node.id, label: node.label, merged } : { id: node.id, label: node.label },
       aria: {
         role: "img",
-        label: `${node.label}: ${formatFlowValue(node.value ?? 0, flowFmt)}`
+        label: `${node.label}: ${valueText}`
       },
       animationIndex: 0
       // Reassigned below after sorting by depth
@@ -15545,13 +16417,13 @@ function compileSankey(spec, options) {
   const finalLegend = buildSankeyLegend(
     nodeColorMap,
     colorField,
-    sankeySpec.data,
+    workingData,
     sourceField,
     targetField,
     theme,
     fullArea
   );
-  const tooltipDescriptors = buildTooltipDescriptors(nodeMarks, linkMarks, flowFmt);
+  const tooltipDescriptors = buildTooltipDescriptors(nodeMarks, linkMarks, flowFmt, nodeFmt);
   const a11y = {
     altText: `Sankey diagram with ${nodeMarks.length} nodes and ${linkMarks.length} links`,
     dataTableFallback: linkMarks.map((l) => [l.sourceId, l.targetId, String(l.value)]),
@@ -15635,18 +16507,39 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
     swatchChipFill: theme.colors.annotationFill
   };
 }
+var MAX_UNIFORM_DECIMALS = 2;
+function decimalPlaces(value) {
+  const rounded = Number(value.toFixed(MAX_UNIFORM_DECIMALS));
+  if (Number.isInteger(rounded)) return 0;
+  const text = String(rounded);
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+}
+function resolveNodeValueFormatter(nodes, explicitFormat, fallback) {
+  if (explicitFormat) return fallback;
+  const values = nodes.map((n) => n.value ?? 0).filter((v) => Number.isFinite(v));
+  if (values.length === 0) return fallback;
+  if (values.some((v) => Math.abs(v) >= 1e3)) return fallback;
+  if (values.some((v) => v !== 0 && Math.abs(v) < 5e-3)) return fallback;
+  let decimals = 0;
+  for (const v of values) {
+    decimals = Math.max(decimals, decimalPlaces(v));
+    if (decimals >= MAX_UNIFORM_DECIMALS) break;
+  }
+  return buildD3Formatter3(`,.${decimals}f`) ?? fallback;
+}
 var defaultFmt3 = defaultNumberFormatter10();
 function formatFlowValue(value, formatter) {
   if (formatter) return formatter(value);
   return defaultFmt3(value);
 }
-function buildTooltipDescriptors(nodes, links, formatter) {
+function buildTooltipDescriptors(nodes, links, formatter, nodeFormatter) {
   const descriptors = /* @__PURE__ */ new Map();
   for (const node of nodes) {
     const fields = [
       {
         label: "Total flow",
-        value: formatFlowValue(node.value, formatter)
+        value: formatFlowValue(node.value, nodeFormatter ?? formatter)
       }
     ];
     descriptors.set(`node-${node.nodeId}`, {
@@ -15767,19 +16660,22 @@ function computeColumnMin(data, key) {
 }
 
 // src/tables/category-colors.ts
-import { adaptColorForDarkMode } from "@opendata-ai/openchart-core";
+import { adaptColorForDarkMode, findAccessibleColor as findAccessibleColor2 } from "@opendata-ai/openchart-core";
+import { interpolateRgb as interpolateRgb2 } from "d3-interpolate";
 
 // src/tables/utils.ts
-import { contrastRatio as contrastRatio2 } from "@opendata-ai/openchart-core";
-function accessibleTextColor(bg) {
-  const white = "#ffffff";
-  const black = "#000000";
-  const whiteRatio = contrastRatio2(white, bg);
-  const blackRatio = contrastRatio2(black, bg);
-  return whiteRatio >= blackRatio ? white : black;
+import { contrastRatio as contrastRatio2, cssTokenDefault } from "@opendata-ai/openchart-core";
+function resolveTableSurface(theme) {
+  return theme.colors.neutral.surface;
+}
+function accessibleTextColor(bg, theme) {
+  const own = theme.colors.text;
+  const inverse = cssTokenDefault("--oc-text", theme.isDark ? "light" : "dark");
+  return contrastRatio2(inverse, bg) > contrastRatio2(own, bg) ? inverse : own;
 }
 
 // src/tables/category-colors.ts
+var CHIP_TINT = 0.14;
 function computeCategoryColors(data, column, theme, darkMode) {
   const result = /* @__PURE__ */ new Map();
   const explicitMap = column.categoryColors;
@@ -15789,6 +16685,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
   const autoAssigned = /* @__PURE__ */ new Map();
   const lightBg = "#ffffff";
   const darkBg = theme.colors.background;
+  const surface = resolveTableSurface(theme);
   for (let i = 0; i < data.length; i++) {
     const raw = data[i][column.key];
     if (raw == null) continue;
@@ -15815,10 +16712,11 @@ function computeCategoryColors(data, column, theme, darkMode) {
     if (darkMode && !isExplicit) {
       bg = adaptColorForDarkMode(bg, lightBg, darkBg);
     }
-    const textColor = accessibleTextColor(bg);
+    const tint = interpolateRgb2(surface, bg)(CHIP_TINT);
     result.set(i, {
-      backgroundColor: bg,
-      color: textColor
+      accent: bg,
+      backgroundColor: tint,
+      color: findAccessibleColor2(bg, tint, 4.5)
     });
   }
   return result;
@@ -15826,7 +16724,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 
 // src/tables/format-cells.ts
 import {
-  buildD3Formatter as buildD3Formatter3,
+  buildD3Formatter as buildD3Formatter4,
   defaultNumberFormatter as defaultNumberFormatter11,
   formatDate as formatDate3,
   resolveNumberFormatter as resolveNumberFormatter7
@@ -15849,7 +16747,7 @@ function formatCell(value, column) {
     };
   }
   if (column.format && isNumericValue(value)) {
-    const formatter = resolveNumberFormatter7(column.format, { surface: "table" }) ?? buildD3Formatter3(column.format);
+    const formatter = resolveNumberFormatter7(column.format, { surface: "table" }) ?? buildD3Formatter4(column.format);
     if (formatter) {
       return {
         value,
@@ -15881,7 +16779,7 @@ function formatCell(value, column) {
 function formatValueForSearch(value, column) {
   if (value == null) return "";
   if (column.format && isNumericValue(value)) {
-    const formatter = resolveNumberFormatter7(column.format, { surface: "table" }) ?? buildD3Formatter3(column.format);
+    const formatter = resolveNumberFormatter7(column.format, { surface: "table" }) ?? buildD3Formatter4(column.format);
     if (formatter) {
       return formatter(value);
     }
@@ -15894,7 +16792,7 @@ function formatValueForSearch(value, column) {
 
 // src/tables/heatmap.ts
 import { adaptColorForDarkMode as adaptColorForDarkMode2, contrastRatio as contrastRatio3 } from "@opendata-ai/openchart-core";
-import { interpolateRgb } from "d3-interpolate";
+import { interpolateRgb as interpolateRgb3 } from "d3-interpolate";
 import { scaleSequential } from "d3-scale";
 function interpolatorFromStops(stops) {
   if (stops.length === 0) return () => "#ffffff";
@@ -15905,7 +16803,7 @@ function interpolatorFromStops(stops) {
     const lo = Math.floor(segment);
     const hi = Math.min(lo + 1, stops.length - 1);
     const frac = segment - lo;
-    return interpolateRgb(stops[lo], stops[hi])(frac);
+    return interpolateRgb3(stops[lo], stops[hi])(frac);
   };
 }
 function resolvePalette(palette, theme) {
@@ -15947,8 +16845,7 @@ function computeHeatmapColors(data, column, theme, darkMode) {
   let stops = resolvePalette(config.palette, theme);
   if (darkMode) {
     const lightBg = "#ffffff";
-    const themeBg = theme.colors.background;
-    const darkBg = themeBg === "transparent" ? "#09090b" : themeBg;
+    const darkBg = resolveTableSurface(theme);
     if (Array.isArray(config.palette)) {
       stops = stops.map((c) => {
         const ratio = contrastRatio3(c, lightBg);
@@ -15961,10 +16858,12 @@ function computeHeatmapColors(data, column, theme, darkMode) {
   }
   const interpolator = interpolatorFromStops(stops);
   const scale = scaleSequential(interpolator).domain(domain).clamp(true);
+  const surface = resolveTableSurface(theme);
+  const soften = (c) => interpolateRgb3(c, surface)(0.2);
   for (const { index, value } of numericValues) {
     if (value <= domain[0]) continue;
-    const bg = scale(value);
-    const textColor = accessibleTextColor(bg);
+    const bg = soften(scale(value));
+    const textColor = accessibleTextColor(bg, theme);
     result.set(index, {
       backgroundColor: bg,
       color: textColor
@@ -16058,24 +16957,44 @@ function sortData(data, sort) {
 }
 
 // src/tables/sparkline.ts
-function extractValues(row, columnKey, config) {
+function extractSparklineValues(row, columnKey, config) {
   const field = config.valuesField ?? columnKey;
   const raw = row[field];
   if (!Array.isArray(raw)) return [];
   return raw.map((v) => typeof v === "number" && Number.isFinite(v) ? v : null).filter((v) => v !== null);
 }
-function computeSparkline(values, config, theme, _darkMode) {
+function computeSparklineDomain(data, columnKey, config) {
+  const domain = config.domain ?? "shared";
+  if (Array.isArray(domain)) return domain;
+  if (domain === "row") return null;
+  let min4 = Infinity;
+  let max4 = -Infinity;
+  for (const row of data) {
+    for (const v of extractSparklineValues(row, columnKey, config)) {
+      if (v < min4) min4 = v;
+      if (v > max4) max4 = v;
+    }
+  }
+  return Number.isFinite(min4) && Number.isFinite(max4) ? [min4, max4] : null;
+}
+function computeSparkline(values, config, theme, _darkMode, domain) {
   if (values.length === 0) return null;
   const type = config.type ?? "line";
   const color = config.color ?? theme.colors.categorical[0];
-  let min4 = Infinity;
-  let max4 = -Infinity;
-  for (const v of values) {
-    if (v < min4) min4 = v;
-    if (v > max4) max4 = v;
+  let min4;
+  let max4;
+  if (domain) {
+    [min4, max4] = domain;
+  } else {
+    min4 = Infinity;
+    max4 = -Infinity;
+    for (const v of values) {
+      if (v < min4) min4 = v;
+      if (v > max4) max4 = v;
+    }
   }
   const range = max4 - min4;
-  const normalize = (v) => range === 0 ? 0.5 : (v - min4) / range;
+  const normalize = (v) => range === 0 ? 0.5 : Math.max(0, Math.min(1, (v - min4) / range));
   const startValue = values[0];
   const endValue = values[values.length - 1];
   if (type === "line") {
@@ -16108,30 +17027,41 @@ function computeSparkline(values, config, theme, _darkMode) {
     endValue
   };
 }
-function computeSparklineForRow(row, columnKey, config, theme, darkMode) {
-  const values = extractValues(row, columnKey, config);
-  return computeSparkline(values, config, theme, darkMode);
+function computeSparklineForRow(row, columnKey, config, theme, darkMode, domain) {
+  const values = extractSparklineValues(row, columnKey, config);
+  return computeSparkline(values, config, theme, darkMode, domain);
 }
 
 // src/tables/compile-table.ts
 function determineCellType(col) {
   if (col.sparkline) return "sparkline";
   if (col.bar) return "bar";
+  if (col.delta) return "delta";
   if (col.heatmap) return "heatmap";
   if (col.image) return "image";
   if (col.flag) return "flag";
   if (col.categoryColors) return "category";
   return "text";
 }
-function inferAlignment(col, data) {
-  if (col.align) return col.align;
+var NON_QUANTITATIVE_KEY = /(^|_)(id|zip|postal|code|year|fips)$/i;
+function snakeCaseKey(key) {
+  return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2");
+}
+function inferColumnType(col, data) {
+  if (col.type) return col.type;
+  if (NON_QUANTITATIVE_KEY.test(snakeCaseKey(col.key))) return "nominal";
   for (const row of data) {
     const val = row[col.key];
-    if (val != null) {
-      return typeof val === "number" ? "right" : "left";
-    }
+    if (val == null) continue;
+    if (typeof val === "number") return "quantitative";
+    if (val instanceof Date) return "temporal";
+    return "nominal";
   }
-  return "left";
+  return "nominal";
+}
+function inferAlignment(col, type) {
+  if (col.align) return col.align;
+  return type === "quantitative" ? "right" : "left";
 }
 function estimateColumnWidth(col, data, fontSize) {
   const MIN_WIDTH = 60;
@@ -16170,14 +17100,28 @@ function resolveColumns(columns, data, totalWidth, theme) {
   const flexTotal = naturalWidths.reduce((sum, w, i) => sum + (isFixed[i] ? 0 : w), 0);
   const remainingWidth = totalWidth - fixedTotal;
   const flexScale = flexTotal > 0 && remainingWidth > 0 ? remainingWidth / flexTotal : 1;
-  return columns.map((col, i) => ({
-    key: col.key,
-    label: col.label ?? col.key,
-    width: Math.max(60, isFixed[i] ? naturalWidths[i] : Math.round(naturalWidths[i] * flexScale)),
-    sortable: col.sortable ?? true,
-    align: inferAlignment(col, data),
-    cellType: determineCellType(col)
-  }));
+  return columns.map((col, i) => {
+    const type = inferColumnType(col, data);
+    return {
+      key: col.key,
+      label: col.label ?? col.key,
+      width: Math.max(60, isFixed[i] ? naturalWidths[i] : Math.round(naturalWidths[i] * flexScale)),
+      sortable: col.sortable ?? true,
+      align: inferAlignment(col, type),
+      type,
+      // The first column leads the mobile card unless the author says otherwise.
+      priority: col.priority ?? (i === 0 ? 1 : 2),
+      cellType: determineCellType(col)
+    };
+  });
+}
+var DIRECTION_WORD = {
+  up: "up",
+  down: "down",
+  flat: "unchanged"
+};
+function stripSign(formatted) {
+  return formatted.replace(/^[+\u2212-]/, "");
 }
 function buildCell(value, column, resolvedColumn, heatmapStyle, categoryStyle, barData, sparklineData) {
   const base = formatCell(value, column);
@@ -16219,6 +17163,27 @@ function buildCell(value, column, resolvedColumn, heatmapStyle, categoryStyle, b
         sparklineData
       };
     }
+    case "delta": {
+      if (typeof value !== "number" || !Number.isFinite(value)) {
+        return { ...base, cellType: "text" };
+      }
+      const delta = value;
+      const invert = typeof column.delta === "object" ? column.delta.invert ?? false : false;
+      const direction = delta > 0 ? "up" : delta < 0 ? "down" : "flat";
+      const favorable = invert ? delta < 0 : delta > 0;
+      const unfavorable = invert ? delta > 0 : delta < 0;
+      return {
+        ...base,
+        // The arrow carries the direction, so a sign in the formatted value
+        // would say it twice (and contradict it under `invert`).
+        formattedValue: stripSign(base.formattedValue),
+        cellType: "delta",
+        delta,
+        direction,
+        tone: favorable ? "positive" : unfavorable ? "negative" : "neutral",
+        aria: base.aria ?? `${DIRECTION_WORD[direction]} ${stripSign(base.formattedValue)}`
+      };
+    }
     case "image": {
       const src = typeof value === "string" ? value : "";
       const imgConfig = column.image ?? {};
@@ -16247,15 +17212,52 @@ function buildCell(value, column, resolvedColumn, heatmapStyle, categoryStyle, b
     }
   }
 }
+function resolveSort(spec, columns, optionsSort) {
+  if (optionsSort) return optionsSort;
+  if (optionsSort === null) return void 0;
+  if (spec.sort) return spec.sort;
+  const barColumn = columns.find((c) => c.cellType === "bar" && c.sortable);
+  return barColumn ? { column: barColumn.key, direction: "desc" } : void 0;
+}
+function buildTotalRow(label, columns, resolvedColumns, rows) {
+  const SUMMABLE = /* @__PURE__ */ new Set(["text", "bar", "heatmap"]);
+  const cells = resolvedColumns.map((resolved, i) => {
+    const blank = {
+      value: null,
+      formattedValue: "",
+      style: {},
+      cellType: "text"
+    };
+    if (resolved.type !== "quantitative" || !SUMMABLE.has(resolved.cellType)) return blank;
+    let sum = 0;
+    let seen = false;
+    for (const row of rows) {
+      const v = row[resolved.key];
+      if (typeof v === "number" && Number.isFinite(v)) {
+        sum += v;
+        seen = true;
+      }
+    }
+    if (!seen) return blank;
+    const base = formatCell(sum, columns[i]);
+    return {
+      ...base,
+      style: { ...base.style, fontVariant: "tabular-nums" },
+      cellType: "text"
+    };
+  });
+  return { label, cells };
+}
 function compileTableLayout(spec, options, theme) {
   const data = spec.data;
   const darkMode = theme.isDark;
   const resolvedColumns = resolveColumns(spec.columns, data, options.width, theme);
+  const sort = resolveSort(spec, resolvedColumns, options.sort);
   const searchIndex = spec.search ? buildSearchIndex(data, spec.columns) : /* @__PURE__ */ new Map();
   let currentData = data;
   let originalIndices = data.map((_, i) => i);
-  if (options.sort) {
-    const sorted = sortData(currentData, options.sort);
+  if (sort) {
+    const sorted = sortData(currentData, sort);
     originalIndices = sorted.originalIndices.map((i) => originalIndices[i]);
     currentData = sorted.data;
   }
@@ -16265,6 +17267,7 @@ function compileTableLayout(spec, options, theme) {
     originalIndices = filtered.indices;
   }
   const totalFiltered = currentData.length;
+  const filteredData = currentData;
   let pageSize = 0;
   let currentPage = 0;
   let paginationState;
@@ -16288,6 +17291,7 @@ function compileTableLayout(spec, options, theme) {
   const categoryMaps = /* @__PURE__ */ new Map();
   const barMaxes = /* @__PURE__ */ new Map();
   const barMins = /* @__PURE__ */ new Map();
+  const sparklineDomains = /* @__PURE__ */ new Map();
   for (let c = 0; c < spec.columns.length; c++) {
     const col = spec.columns[c];
     const resolved = resolvedColumns[c];
@@ -16301,6 +17305,9 @@ function compileTableLayout(spec, options, theme) {
       barMaxes.set(col.key, computeColumnMax(data, col.key));
       barMins.set(col.key, computeColumnMin(data, col.key));
     }
+    if (resolved.cellType === "sparkline" && col.sparkline) {
+      sparklineDomains.set(col.key, computeSparklineDomain(data, col.key, col.sparkline));
+    }
   }
   const rows = currentData.map((row, i) => {
     const origIdx = originalIndices[i];
@@ -16323,7 +17330,14 @@ function compileTableLayout(spec, options, theme) {
       }
       let sparklineData = null;
       if (resolved.cellType === "sparkline" && col.sparkline) {
-        sparklineData = computeSparklineForRow(row, col.key, col.sparkline, theme, darkMode);
+        sparklineData = computeSparklineForRow(
+          row,
+          col.key,
+          col.sparkline,
+          theme,
+          darkMode,
+          sparklineDomains.get(col.key)
+        );
       }
       return buildCell(value, col, resolved, heatmapStyle, categoryStyle, barData, sparklineData);
     });
@@ -16351,7 +17365,7 @@ function compileTableLayout(spec, options, theme) {
     chrome,
     columns: resolvedColumns,
     rows,
-    sort: options.sort,
+    sort,
     pagination: paginationState,
     search: {
       enabled: spec.search,
@@ -16359,6 +17373,9 @@ function compileTableLayout(spec, options, theme) {
       query: options.search ?? ""
     },
     stickyFirstColumn: spec.stickyFirstColumn,
+    density: spec.density,
+    striped: spec.striped,
+    totalRow: spec.totalRow ? buildTotalRow(spec.totalRow.label, spec.columns, resolvedColumns, filteredData) : void 0,
     compact: spec.compact,
     a11y: {
       caption,
@@ -16373,7 +17390,7 @@ function compileTableLayout(spec, options, theme) {
 // src/tilemap/compile-tilemap.ts
 import {
   adaptTheme as adaptTheme5,
-  CATEGORICAL_PALETTE as CATEGORICAL_PALETTE2,
+  CATEGORICAL_PALETTE as CATEGORICAL_PALETTE3,
   computeChrome as computeChrome8,
   estimateTextWidth as estimateTextWidth23,
   getBreakpoint as getBreakpoint2,
@@ -16383,15 +17400,28 @@ import {
   resolveTheme as resolveTheme6,
   SEQUENTIAL_PALETTES as SEQUENTIAL_PALETTES3
 } from "@opendata-ai/openchart-core";
+import { interpolateRgb as interpolateRgb4 } from "d3-interpolate";
 import { scaleLinear as scaleLinear6 } from "d3-scale";
-var TILE_CORNER_RADIUS = 6;
-var TILE_STROKE_WIDTH = 1;
+var TILE_CORNER_RADIUS = 2;
+var TILE_STROKE_WIDTH = 0;
+var NO_DATA_STROKE_WIDTH = 1;
+var NO_DATA_BAR_GAP = 12;
+var NO_DATA_LABEL_GAP2 = 5;
 var LEGEND_SWATCH_SIZE = 10;
 var LEGEND_SWATCH_GAP = 6;
 var LEGEND_ENTRY_GAP = 16;
 function clamp(value, min4, max4) {
   return Math.min(max4, Math.max(min4, value));
 }
+function blendOnSurface(fill, fillOpacity, theme) {
+  const surface = theme.colors.neutral.surface;
+  if (fillOpacity >= 1) return fill;
+  try {
+    return interpolateRgb4(surface, fill)(fillOpacity);
+  } catch {
+    return fill;
+  }
+}
 function growContentHeight(contentHeight, chromeLayout, budgetHeight, chrome) {
   if (chromeLayout !== "grow") return contentHeight;
   return Math.max(contentHeight, budgetHeight + chrome.topHeight + chrome.bottomHeight);
@@ -16488,10 +17518,10 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
   const max4 = values.length > 0 ? Math.max(...values) : 100;
   const paletteStops = [...SEQUENTIAL_PALETTES3[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES3.blue];
   const baseColor = isDarkMode ? paletteStops[0] : paletteStops[paletteStops.length - 1];
-  const opacityRange = isDarkMode ? [0.15, 1] : [0.2, 1];
+  const opacityRange = isDarkMode ? [0.3, 1] : [0.25, 1];
   const opacityScale = scaleLinear6().domain([min4, max4]).range(opacityRange).clamp(true);
   const showLegend = tilemapSpec.legend?.show !== false;
-  const legendBarHeight = 6;
+  const legendBarHeight = 10;
   const legendLabelGap = 6;
   const legendTotalHeight = showLegend ? legendBarHeight + legendLabelGap + 14 : 0;
   const legendGap2 = showLegend ? 8 : 0;
@@ -16506,8 +17536,8 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
     surfaceFormat: tilemapSpec.encoding.value.format ?? tilemapSpec.valueFormat,
     values: Array.from(stateValueMap.values())
   });
-  const neutralFill = isDarkMode ? "#1e2a30" : "#e0e0e0";
-  const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "#d0d0d0";
+  const neutralFill = isDarkMode ? theme.colors.neutral[800] : theme.colors.neutral[100];
+  const neutralStroke = isDarkMode ? theme.colors.neutral[600] : theme.colors.neutral[300];
   const tiles = [];
   for (const { state: stateCode } of US_STATE_TILES) {
     const pos = tilePositions.positions.get(stateCode);
@@ -16516,7 +17546,7 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
     const value = hasData ? stateValueMap.get(stateCode) : null;
     const opacity = hasData ? opacityScale(value) : 0;
     const fill = hasData ? baseColor : neutralFill;
-    const stroke = hasData ? isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)" : neutralStroke;
+    const stroke = hasData ? "none" : neutralStroke;
     const formattedValue = hasData ? formatter(value) : "\u2013";
     tiles.push(
       buildTileMark({
@@ -16545,10 +17575,16 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
       const o = opacityRange[0] + t * (opacityRange[1] - opacityRange[0]);
       return { offset: t, color: baseColor, opacity: o };
     });
+    const hasEmptyTiles = tiles.some((t) => !t.hasData);
+    const noDataLabel = "No data";
+    const noDataLabelWidth = estimateTextWidth23(noDataLabel, 11);
+    const noDataBlockWidth = hasEmptyTiles ? NO_DATA_BAR_GAP + legendBarHeight + NO_DATA_LABEL_GAP2 + noDataLabelWidth : 0;
+    const barWidth = Math.max(0, legendWidth - noDataBlockWidth);
+    const noDataX = legendX + barWidth + NO_DATA_BAR_GAP;
     gradientLegend = {
       type: "gradient",
       position: "bottom",
-      bounds: { x: legendX, y: legendY, width: legendWidth, height: legendBarHeight },
+      bounds: { x: legendX, y: legendY, width: barWidth, height: legendBarHeight },
       labelStyle: {
         fontFamily: theme.fonts.family,
         fontSize: 11,
@@ -16558,7 +17594,16 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
       },
       colorStops: gradientColorStops,
       minLabel: formatter(min4),
-      maxLabel: formatter(max4)
+      maxLabel: formatter(max4),
+      noData: hasEmptyTiles && barWidth > 0 ? {
+        x: noDataX,
+        y: legendY,
+        size: legendBarHeight,
+        fill: neutralFill,
+        label: noDataLabel,
+        labelX: noDataX + legendBarHeight + NO_DATA_LABEL_GAP2,
+        labelY: legendY + legendBarHeight
+      } : void 0
     };
   }
   const tooltipDescriptors = buildTooltips(tiles);
@@ -16620,12 +17665,12 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
     for (const cat of categories) {
       categoryColors.set(
         cat,
-        tilemapSpec.colors[cat] ?? CATEGORICAL_PALETTE2[categoryColors.size % CATEGORICAL_PALETTE2.length]
+        tilemapSpec.colors[cat] ?? CATEGORICAL_PALETTE3[categoryColors.size % CATEGORICAL_PALETTE3.length]
       );
     }
   } else {
     for (let i = 0; i < categories.length; i++) {
-      categoryColors.set(categories[i], CATEGORICAL_PALETTE2[i % CATEGORICAL_PALETTE2.length]);
+      categoryColors.set(categories[i], CATEGORICAL_PALETTE3[i % CATEGORICAL_PALETTE3.length]);
     }
   }
   const showLegend = tilemapSpec.legend?.show !== false;
@@ -16643,8 +17688,8 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
   const legendWidth = tilePositions.gridWidth;
   const legendRows = showLegend ? countLegendRows(legendLabels, legendWidth, legendLabelFontSize) : 0;
   const legendTotalHeight = showLegend ? legendRowHeight * legendRows : 0;
-  const neutralFill = isDarkMode ? "#1e2a30" : "#e0e0e0";
-  const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "#d0d0d0";
+  const neutralFill = isDarkMode ? theme.colors.neutral[800] : theme.colors.neutral[100];
+  const neutralStroke = isDarkMode ? theme.colors.neutral[600] : theme.colors.neutral[300];
   const tiles = [];
   for (const { state: stateCode } of US_STATE_TILES) {
     const pos = tilePositions.positions.get(stateCode);
@@ -16652,7 +17697,7 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
     const hasData = stateCategoryMap.has(stateCode);
     const category = hasData ? stateCategoryMap.get(stateCode) : null;
     const fill = hasData ? categoryColors.get(category) ?? neutralFill : neutralFill;
-    const stroke = hasData ? isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)" : neutralStroke;
+    const stroke = hasData ? "none" : neutralStroke;
     const formattedValue = category ? formatCategoryLabel(category) : "\u2013";
     tiles.push(
       buildTileMark({
@@ -16753,24 +17798,30 @@ function buildTileMark(opts) {
   } = opts;
   const tileCenterX = gridOffsetX + pos.x + tileSize / 2;
   const tileTopY = gridOffsetY + pos.y;
-  const textColor = hasData ? pickLabelColor4(fill, isDarkMode) : "#ffffff";
+  const effectiveColor = hasData ? blendOnSurface(fill, fillOpacity, theme) : fill;
+  const textColor = hasData ? pickLabelColor4(effectiveColor, isDarkMode) : theme.colors.axis;
   const isLightText = textColor === "#ffffff";
   const showValue = showValueLabels && tileSize >= 24;
-  const codeFontSize = clamp(Math.round(tileSize * 0.5 * 10) / 10, 6.5, 11);
+  const codeFontSize = clamp(Math.round(tileSize * 0.5 * 10) / 10, 7, 12);
   const valueFontSize = clamp(Math.round(tileSize * 0.42 * 10) / 10, 6.5, 10);
   const labelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: codeFontSize,
-    fontWeight: 700,
+    // 600, not 700: at 8-12px a bold two-letter code on a colored tile turns
+    // into a blob. The tracking in the renderer does the separating instead.
+    fontWeight: theme.fonts.weights.semibold,
     fill: textColor,
     lineHeight: 1.2
   };
   const valueLabelStyle = {
     fontFamily: theme.fonts.family,
     fontSize: valueFontSize,
-    fontWeight: 300,
-    fill: isLightText ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.45)",
-    lineHeight: 1.2
+    // 300 is a hinting-dependent weight that renders as 400 on most stacks and
+    // as a ghost on the ones that have it. 450 is the honest secondary weight.
+    fontWeight: 450,
+    fill: isLightText ? "rgba(255,255,255,0.75)" : "rgba(0,0,0,0.55)",
+    lineHeight: 1.2,
+    fontVariant: "tabular-nums"
   };
   const codeCenterY = showValue ? tileTopY + tileSize * 0.28 : tileTopY + tileSize * 0.5;
   const valueLabel = showValue ? {
@@ -16780,7 +17831,7 @@ function buildTileMark(opts) {
     style: valueLabelStyle,
     visible: true
   } : { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false };
-  const cornerRadius = Math.min(TILE_CORNER_RADIUS, Math.round(tileSize * 0.22));
+  const cornerRadius = Math.min(TILE_CORNER_RADIUS, Math.round(tileSize * 0.1));
   const data = {
     state: stateCode,
     value,
@@ -16798,7 +17849,7 @@ function buildTileMark(opts) {
     fill,
     fillOpacity,
     stroke,
-    strokeWidth: TILE_STROKE_WIDTH,
+    strokeWidth: hasData ? TILE_STROKE_WIDTH : NO_DATA_STROKE_WIDTH,
     cornerRadius,
     value,
     formattedValue,
@@ -16904,7 +17955,7 @@ import {
   defaultNumberFormatter as defaultNumberFormatter12,
   formatDate as formatDate4,
   formatPercent as formatPercent4,
-  getRepresentativeColor as getRepresentativeColor13
+  getRepresentativeColor as getRepresentativeColor14
 } from "@opendata-ai/openchart-core";
 function formatValue2(value, fieldType, formatter) {
   if (value == null) return "";
@@ -16963,14 +18014,15 @@ function buildExplicitTooltipFields(row, channels, formatters) {
     value: formatValue2(row[ch.field], ch.type, getFormatter(formatters, ch))
   }));
 }
-function buildFields(row, encoding, formatters, color) {
+function buildFields(row, encoding, formatters, color, titleChannel) {
   if (encoding.tooltip) {
     const channels = Array.isArray(encoding.tooltip) ? encoding.tooltip : [encoding.tooltip];
     return buildExplicitTooltipFields(row, channels, formatters);
   }
   const fields = [];
+  const skipped = [];
   if (encoding.color && "field" in encoding.color) {
-    fields.push({
+    (titleChannel === "color" ? skipped : fields).push({
       label: resolveLabel(encoding.color),
       value: formatValue2(
         row[encoding.color.field],
@@ -16981,7 +18033,7 @@ function buildFields(row, encoding, formatters, color) {
     });
   }
   if (encoding.y) {
-    fields.push({
+    (titleChannel === "y" ? skipped : fields).push({
       label: resolveLabel(encoding.y),
       value: formatValue2(
         row[encoding.y.field],
@@ -16992,7 +18044,7 @@ function buildFields(row, encoding, formatters, color) {
     });
   }
   if (encoding.x) {
-    fields.push({
+    (titleChannel === "x" ? skipped : fields).push({
       label: resolveLabel(encoding.x),
       value: formatValue2(
         row[encoding.x.field],
@@ -17011,7 +18063,7 @@ function buildFields(row, encoding, formatters, color) {
       )
     });
   }
-  return fields;
+  return fields.length > 0 ? fields : skipped;
 }
 function computeEncodedFieldsSet(encoding) {
   if (!(encoding.x?.type === "quantitative" && encoding.y?.type === "quantitative")) {
@@ -17025,50 +18077,67 @@ function computeEncodedFieldsSet(encoding) {
 }
 function getTooltipTitle(row, encoding, encodedFields) {
   if (encoding.detail) {
-    return String(row[encoding.detail.field] ?? "");
+    return { title: String(row[encoding.detail.field] ?? "") };
   }
   if (encoding.x?.type === "temporal") {
-    return formatValue2(row[encoding.x.field], "temporal");
+    return { title: formatValue2(row[encoding.x.field], "temporal"), channel: "x" };
   }
   if (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") {
-    return String(row[encoding.x.field] ?? "");
+    return { title: String(row[encoding.x.field] ?? ""), channel: "x" };
   }
   if (encoding.y?.type === "nominal" || encoding.y?.type === "ordinal") {
-    return String(row[encoding.y.field] ?? "");
+    return { title: String(row[encoding.y.field] ?? ""), channel: "y" };
   }
   if (encoding.x?.type === "quantitative" && encoding.y?.type === "quantitative") {
     const fields = encodedFields ?? computeEncodedFieldsSet(encoding);
     for (const key of Object.keys(row)) {
       const value = row[key];
       if (!fields.has(key) && typeof value === "string") {
-        return value;
+        return { title: value };
       }
     }
   }
   if (encoding.color && "field" in encoding.color) {
-    return String(row[encoding.color.field] ?? "");
+    return { title: String(row[encoding.color.field] ?? ""), channel: "color" };
   }
-  return void 0;
+  return {};
 }
-function tooltipsForLine(mark, encoding, formatters, _markIndex, encodedFields) {
+function tooltipsForLine(mark, encoding, formatters, _markIndex, encodedFields, stackTotals) {
   if (mark.dataPoints) {
     for (const dp of mark.dataPoints) {
-      dp.tooltip = {
-        title: getTooltipTitle(dp.datum, encoding, encodedFields),
-        fields: buildFields(dp.datum, encoding, formatters, mark.stroke)
-      };
+      const { title, channel } = getTooltipTitle(dp.datum, encoding, encodedFields);
+      const fields = buildFields(dp.datum, encoding, formatters, mark.stroke, channel);
+      if (stackTotals && encoding.x) {
+        const total = stackTotals.get(stackKeyOf(dp.datum[encoding.x.field]));
+        if (total) fields.push(total);
+      }
+      dp.tooltip = { title, fields };
     }
   }
   return [];
 }
 function tooltipsForPoint(mark, encoding, formatters, markIndex, encodedFields) {
-  const title = getTooltipTitle(mark.data, encoding, encodedFields);
-  const fields = buildFields(mark.data, encoding, formatters, getRepresentativeColor13(mark.fill));
+  const { title, channel } = getTooltipTitle(mark.data, encoding, encodedFields);
+  const fields = buildFields(
+    mark.data,
+    encoding,
+    formatters,
+    getRepresentativeColor14(mark.fill),
+    channel
+  );
   return [[`point-${markIndex}`, { title, fields }]];
 }
-function tooltipsForRect(mark, encoding, formatters, markIndex, encodedFields) {
-  const title = getTooltipTitle(mark.data, encoding, encodedFields);
-  const fields = buildFields(mark.data, encoding, formatters, getRepresentativeColor13(mark.fill));
+function tooltipsForRect(mark, encoding, formatters, markIndex, encodedFields, stackTotals) {
+  const { title, channel } = getTooltipTitle(mark.data, encoding, encodedFields);
+  const fields = buildFields(
+    mark.data,
+    encoding,
+    formatters,
+    getRepresentativeColor14(mark.fill),
+    channel
+  );
+  const total = mark.stackGroup !== void 0 ? stackTotals?.get(mark.stackGroup) : void 0;
+  if (total) fields.push(total);
   return [[`rect-${markIndex}`, { title, fields }]];
 }
 function tooltipsForArc(mark, encoding, formatters, markIndex) {
@@ -17085,7 +18154,7 @@ function tooltipsForArc(mark, encoding, formatters, markIndex) {
           encoding.y.type,
           getFormatter(formatters, encoding.y)
         ),
-        color: getRepresentativeColor13(mark.fill)
+        color: getRepresentativeColor14(mark.fill)
       });
     }
   } else if (encoding.y) {
@@ -17096,23 +18165,98 @@ function tooltipsForArc(mark, encoding, formatters, markIndex) {
         encoding.y.type,
         getFormatter(formatters, encoding.y)
       ),
-      color: getRepresentativeColor13(mark.fill)
+      color: getRepresentativeColor14(mark.fill)
     });
   }
   const title = colorEnc ? String(row[colorEnc.field] ?? "") : void 0;
   return [[`arc-${markIndex}`, { title, fields }]];
 }
-function tooltipsForArea(mark, encoding, formatters, _markIndex, encodedFields) {
+function tooltipsForArea(mark, encoding, formatters, _markIndex, encodedFields, stackTotals) {
   if (mark.dataPoints) {
+    const wantsTotal = mark.stacked === true && mark.stackNormalized !== true;
     for (const dp of mark.dataPoints) {
-      dp.tooltip = {
-        title: getTooltipTitle(dp.datum, encoding, encodedFields),
-        fields: buildFields(dp.datum, encoding, formatters, getRepresentativeColor13(mark.fill))
-      };
+      const { title, channel } = getTooltipTitle(dp.datum, encoding, encodedFields);
+      const fields = buildFields(
+        dp.datum,
+        encoding,
+        formatters,
+        getRepresentativeColor14(mark.fill),
+        channel
+      );
+      if (wantsTotal && encoding.x) {
+        const total = stackTotals?.get(stackKeyOf(dp.datum[encoding.x.field]));
+        if (total) fields.push(total);
+      }
+      dp.tooltip = { title, fields };
     }
   }
   return [];
 }
+var TOTAL_LABEL = "Total";
+function stackKeyOf(value) {
+  return value instanceof Date ? String(value.getTime()) : String(value);
+}
+function stackValueChannel(encoding) {
+  if (encoding.y?.type === "quantitative") return encoding.y;
+  if (encoding.x?.type === "quantitative") return encoding.x;
+  return void 0;
+}
+function isNormalizedStack(encoding) {
+  return encoding.y?.stack === "normalize" || encoding.x?.stack === "normalize";
+}
+function computeRectStackTotals(marks, encoding, formatters) {
+  if (isNormalizedStack(encoding)) return void 0;
+  const valueCh = stackValueChannel(encoding);
+  if (!valueCh) return void 0;
+  const sums = /* @__PURE__ */ new Map();
+  const counts = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    if (mark.type !== "rect" || mark.stackGroup === void 0) continue;
+    const value = Number(mark.data[valueCh.field]);
+    if (!Number.isFinite(value)) continue;
+    sums.set(mark.stackGroup, (sums.get(mark.stackGroup) ?? 0) + value);
+    counts.set(mark.stackGroup, (counts.get(mark.stackGroup) ?? 0) + 1);
+  }
+  if (sums.size === 0) return void 0;
+  const formatter = getFormatter(formatters, valueCh);
+  const totals = /* @__PURE__ */ new Map();
+  for (const [group, sum] of sums) {
+    if ((counts.get(group) ?? 0) < 2) continue;
+    totals.set(group, {
+      label: TOTAL_LABEL,
+      value: formatValue2(sum, valueCh.type, formatter),
+      role: "total"
+    });
+  }
+  return totals.size > 0 ? totals : void 0;
+}
+function computeAreaStackTotals(marks, encoding, formatters) {
+  const xCh = encoding.x;
+  const yCh = encoding.y;
+  if (!xCh || !yCh) return void 0;
+  const sums = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    if (mark.type !== "area") continue;
+    if (mark.stacked !== true || mark.stackNormalized === true) continue;
+    for (const dp of mark.dataPoints ?? []) {
+      const value = Number(dp.datum[yCh.field]);
+      if (!Number.isFinite(value)) continue;
+      const key = stackKeyOf(dp.datum[xCh.field]);
+      sums.set(key, (sums.get(key) ?? 0) + value);
+    }
+  }
+  if (sums.size === 0) return void 0;
+  const formatter = getFormatter(formatters, yCh);
+  const totals = /* @__PURE__ */ new Map();
+  for (const [key, sum] of sums) {
+    totals.set(key, {
+      label: TOTAL_LABEL,
+      value: formatValue2(sum, yCh.type, formatter),
+      role: "total"
+    });
+  }
+  return totals;
+}
 function computeRangeTooltips(spec, marks) {
   const encoding = spec.encoding;
   const descriptors = /* @__PURE__ */ new Map();
@@ -17125,7 +18269,7 @@ function computeRangeTooltips(spec, marks) {
   const startFmt = getFormatter(fmtCache, startCh);
   const encodedFields = computeEncodedFieldsSet(encoding);
   const contentFor = (row) => {
-    const title = getTooltipTitle(row, encoding, encodedFields);
+    const { title } = getTooltipTitle(row, encoding, encodedFields);
     if (encoding.tooltip) {
       const channels = Array.isArray(encoding.tooltip) ? encoding.tooltip : [encoding.tooltip];
       return { title, fields: buildExplicitTooltipFields(row, channels, fmtCache) };
@@ -17187,7 +18331,7 @@ function computeCalendarTooltips(spec, marks) {
         {
           label: resolveLabel(colorEnc),
           value: formatValue2(row[colorEnc.field], colorEnc.type, getFormatter(fmtCache, colorEnc)),
-          color: getRepresentativeColor13(mark.fill)
+          color: getRepresentativeColor14(mark.fill)
         }
       ]
     });
@@ -17231,7 +18375,7 @@ function computeWaffleTooltips(spec, marks) {
             {
               label: resolveLabel(valueCh),
               value: formatValue2(row[valueCh.field], valueCh.type, getFormatter(fmtCache, valueCh)),
-              color: getRepresentativeColor13(mark.fill)
+              color: getRepresentativeColor14(mark.fill)
             },
             { label: "Share", value: `${cellCounts.get(category) ?? 0} of ${units} units` }
           ]
@@ -17282,7 +18426,7 @@ function computeParliamentTooltips(spec, marks) {
             {
               label: resolveLabel(valueCh),
               value: formatValue2(row[valueCh.field], valueCh.type, getFormatter(fmtCache, valueCh)),
-              color: getRepresentativeColor13(mark.fill)
+              color: getRepresentativeColor14(mark.fill)
             },
             { label: "Share", value: share }
           ]
@@ -17318,21 +18462,23 @@ function computeTooltipDescriptors(spec, marks) {
   ].filter((ch) => !!ch && "field" in ch);
   const formatters = buildFormatterCache(spec.data, allChannels);
   const encodedFields = computeEncodedFieldsSet(encoding);
+  const rectStackTotals = computeRectStackTotals(marks, encoding, formatters);
+  const areaStackTotals = computeAreaStackTotals(marks, encoding, formatters);
   for (let i = 0; i < marks.length; i++) {
     const mark = marks[i];
     let entries = [];
     switch (mark.type) {
       case "line":
-        entries = tooltipsForLine(mark, encoding, formatters, i, encodedFields);
+        entries = tooltipsForLine(mark, encoding, formatters, i, encodedFields, areaStackTotals);
         break;
       case "area":
-        entries = tooltipsForArea(mark, encoding, formatters, i, encodedFields);
+        entries = tooltipsForArea(mark, encoding, formatters, i, encodedFields, areaStackTotals);
         break;
       case "point":
         entries = tooltipsForPoint(mark, encoding, formatters, i, encodedFields);
         break;
       case "rect":
-        entries = tooltipsForRect(mark, encoding, formatters, i, encodedFields);
+        entries = tooltipsForRect(mark, encoding, formatters, i, encodedFields, rectStackTotals);
         break;
       case "arc":
         entries = tooltipsForArc(mark, encoding, formatters, i);
@@ -17847,6 +18993,7 @@ function compileChart(spec, optionsInput) {
   const breakpoint = getBreakpoint3(options.width);
   const heightClass = getHeightClass(options.height);
   let strategy = getLayoutStrategy(breakpoint, heightClass);
+  const economy = resolveChromeEconomy(options.width, options.height);
   const rawSpec = expandedSpec;
   const overrides = rawSpec.overrides;
   const rawEncoding = rawSpec.encoding;
@@ -18103,19 +19250,31 @@ function compileChart(spec, optionsInput) {
     };
   }
   const scales = computeScales(renderSpec, scaleArea, renderSpec.data);
-  applyColorScaleRange(scales, renderSpec.encoding, theme, renderSpec.highlight);
-  scales.defaultColor = chartSpec.markDef.fill ?? chartSpec.markDef.stroke ?? theme.colors.categorical[0];
+  emitSpecWarnings(
+    applyColorScaleRange(
+      scales,
+      renderSpec.encoding,
+      theme,
+      renderSpec.highlight,
+      chartSpec.markType
+    ),
+    options.onWarn
+  );
+  scales.defaultColor = chartSpec.markDef.fill ?? chartSpec.markDef.stroke ?? defaultSeriesColor(theme, chartSpec.markType);
   if (options.dev) {
     emitSpecWarnings(collectContrastWarnings(scales, chartSpec.markType, theme), options.onWarn);
   }
   const isRadial = isAxislessMark3(chartSpec.markType);
-  const skipX = chartSpec.display === "sparkline" && !chartSpec.userExplicit.xAxis;
-  const skipY = chartSpec.display === "sparkline" && !chartSpec.userExplicit.yAxis;
+  const axisless = chartSpec.display === "sparkline" || !economy.axes;
+  const skipX = axisless && !chartSpec.userExplicit.xAxis;
+  const skipY = axisless && !chartSpec.userExplicit.yAxis;
   const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText, {
     data: renderSpec.data,
     encoding: renderSpec.encoding,
     skipX,
     skipY,
+    suppressGrid: !economy.gridlines,
+    maxXTicks: economy.maxXTicks,
     markType: chartSpec.markType,
     totalWidth: options.width,
     // If the guardrail stripped chrome, the plan's y-ticks were sized
@@ -18186,6 +19345,17 @@ function compileChart(spec, optionsInput) {
     fontFamily: theme.fonts.family,
     autoThin: chartSpec.autoThin
   });
+  if (options.dev) {
+    emitSpecWarnings(
+      collectPinnedOverlapWarnings(
+        annotations,
+        chartSpec.annotations,
+        obstacles,
+        annotationMeasure
+      ),
+      options.onWarn
+    );
+  }
   let footnotes;
   if (chartSpec.autoThin && annotations.length > 1) {
     const result = thinAnnotations(
@@ -18378,8 +19548,14 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, facetDirection, opt
       encoding: panelEnc
     };
     const panelScales = computeScales(panelSpecWithDomains, gridPanel.area, panelData);
-    applyColorScaleRange(panelScales, panelSpecWithDomains.encoding, theme, renderSpec.highlight);
-    panelScales.defaultColor = chartSpec.markDef.fill ?? chartSpec.markDef.stroke ?? theme.colors.categorical[0];
+    applyColorScaleRange(
+      panelScales,
+      panelSpecWithDomains.encoding,
+      theme,
+      renderSpec.highlight,
+      chartSpec.markType
+    );
+    panelScales.defaultColor = chartSpec.markDef.fill ?? chartSpec.markDef.stroke ?? defaultSeriesColor(theme, chartSpec.markType);
     if (options.dev && panelLayouts.length === 0) {
       emitSpecWarnings(
         collectContrastWarnings(panelScales, chartSpec.markType, theme),
@@ -18570,7 +19746,8 @@ function compileLayer2(spec, options) {
   return compileLayer(expanded, resolvedOptions, compileChart);
 }
 function compileTable(spec, options) {
-  const { spec: normalized } = compile(spec);
+  const { spec: normalized, warnings: normalizeWarnings } = compile(spec);
+  emitSpecWarnings(normalizeWarnings, options.onWarn);
   const normType = "type" in normalized ? normalized.type : void 0;
   if (normType !== "table") {
     throw new Error(`compileTable received a non-table spec. Use compileChart instead.`);