@opendata-ai/openchart-engine 6.27.2 → 6.28.4

package/dist/index.js

@@ -1,17 +1,17 @@
 // src/compile.ts
 import {
   AXIS_TITLE_TRAILING_PAD as AXIS_TITLE_TRAILING_PAD2,
-  adaptTheme as adaptTheme4,
+  adaptTheme as adaptTheme5,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
   computeLabelBounds,
-  estimateTextWidth as estimateTextWidth15,
+  estimateTextWidth as estimateTextWidth16,
   generateAltText,
   generateDataTable,
   getAxisTitleOffset as getAxisTitleOffset2,
   getBreakpoint,
   getHeightClass,
   getLayoutStrategy,
-  resolveTheme as resolveTheme4,
+  resolveTheme as resolveTheme5,
   TICK_LABEL_OFFSET
 } from "@opendata-ai/openchart-core";
 
@@ -4312,8 +4312,9 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
   const conditionalColor = encoding.color && isConditionalValueDef(encoding.color) ? encoding.color : void 0;
   const colorField = colorEnc?.field;
   const isSequentialColor = colorEnc?.type === "quantitative";
+  let marks;
   if (!colorField || isSequentialColor) {
-    return computeSimpleBars(
+    marks = computeSimpleBars(
       spec.data,
       xChannel.field,
       yChannel.field,
@@ -4325,13 +4326,40 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
       isSequentialColor,
       conditionalColor
     );
-  }
-  const categoryGroups = groupByField(spec.data, yChannel.field);
-  const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
-  if (needsStacking) {
-    const stackDisabled = xChannel.stack === null || xChannel.stack === false;
-    if (stackDisabled) {
-      return computeGroupedBars(
+  } else {
+    const categoryGroups = groupByField(spec.data, yChannel.field);
+    const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
+    if (needsStacking) {
+      const stackDisabled = xChannel.stack === null || xChannel.stack === false;
+      if (stackDisabled) {
+        marks = computeGroupedBars(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales
+        );
+      } else {
+        const stackMode = xChannel.stack === "normalize" ? "normalize" : xChannel.stack === "center" ? "center" : "zero";
+        marks = computeStackedBars(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+          stackMode
+        );
+      }
+    } else {
+      marks = computeColoredBars(
         spec.data,
         xChannel.field,
         yChannel.field,
@@ -4343,31 +4371,8 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
         scales
       );
     }
-    const stackMode = xChannel.stack === "normalize" ? "normalize" : xChannel.stack === "center" ? "center" : "zero";
-    return computeStackedBars(
-      spec.data,
-      xChannel.field,
-      yChannel.field,
-      colorField,
-      xScale,
-      yScale,
-      bandwidth,
-      baseline,
-      scales,
-      stackMode
-    );
   }
-  return computeColoredBars(
-    spec.data,
-    xChannel.field,
-    yChannel.field,
-    colorField,
-    xScale,
-    yScale,
-    bandwidth,
-    baseline,
-    scales
-  );
+  return applyMarkDefOverrides(marks, spec, bandwidth);
 }
 function computeStackedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, _baseline, scales, stackMode = "zero") {
   const marks = [];
@@ -4486,6 +4491,27 @@ function computeColoredBars(data, valueField, categoryField, colorField, xScale,
   }
   return marks;
 }
+function applyMarkDefOverrides(marks, spec, bandwidth) {
+  const { markDef } = spec;
+  const fixedSize = markDef.size;
+  const crSpec = markDef.cornerRadius;
+  if (fixedSize == null && crSpec == null) return marks;
+  for (const mark of marks) {
+    if (fixedSize != null && mark.stackGroup === void 0) {
+      const barHeight = Math.min(fixedSize, bandwidth);
+      const offset = (bandwidth - barHeight) / 2;
+      mark.y = mark.y + offset;
+      mark.height = barHeight;
+    }
+    const effectiveHeight = mark.height;
+    if (crSpec === "pill") {
+      mark.cornerRadius = effectiveHeight / 2;
+    } else if (typeof crSpec === "number") {
+      mark.cornerRadius = crSpec;
+    }
+  }
+  return marks;
+}
 function computeSimpleBars(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false, conditionalColor) {
   const marks = [];
   for (const row of data) {
@@ -4572,7 +4598,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", labelFormat, labelPrefix, valueField) {
+function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor) {
   const targetMarks = filterByDensity(marks, density);
   const candidates = [];
   const fitsInSegment = [];
@@ -4623,11 +4649,11 @@ function computeBarLabels(marks, _chartArea, density = "auto", labelFormat, labe
     } else {
       if (isNegative) {
         anchorX = mark.x - LABEL_PADDING;
-        fill = getRepresentativeColor(mark.fill);
+        fill = labelColor ?? getRepresentativeColor(mark.fill);
         textAnchor = "end";
       } else {
         anchorX = mark.x + mark.width + LABEL_PADDING;
-        fill = getRepresentativeColor(mark.fill);
+        fill = labelColor ?? getRepresentativeColor(mark.fill);
         textAnchor = "start";
       }
     }
@@ -4700,7 +4726,8 @@ var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
-    valueField
+    valueField,
+    spec.labels.color
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -4729,13 +4756,14 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
   const conditionalColor = encoding.color && isConditionalValueDef(encoding.color) ? encoding.color : void 0;
   const colorField = colorEnc?.field;
   const isSequentialColor = colorEnc?.type === "quantitative";
+  let marks;
   if (colorField && !isSequentialColor) {
     const categoryGroups = groupByField(spec.data, xChannel.field);
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
     if (needsStacking) {
       const stackDisabled = yChannel.stack === null || yChannel.stack === false;
       if (stackDisabled) {
-        return computeGroupedColumns(
+        marks = computeGroupedColumns(
           spec.data,
           xChannel.field,
           yChannel.field,
@@ -4746,9 +4774,23 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
           baseline,
           scales
         );
+      } else {
+        const stackMode = yChannel.stack === "normalize" ? "normalize" : yChannel.stack === "center" ? "center" : "zero";
+        marks = computeStackedColumns(
+          spec.data,
+          xChannel.field,
+          yChannel.field,
+          colorField,
+          xScale,
+          yScale,
+          bandwidth,
+          baseline,
+          scales,
+          stackMode
+        );
       }
-      const stackMode = yChannel.stack === "normalize" ? "normalize" : yChannel.stack === "center" ? "center" : "zero";
-      return computeStackedColumns(
+    } else {
+      marks = computeColoredColumns(
         spec.data,
         xChannel.field,
         yChannel.field,
@@ -4757,34 +4799,24 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
         yScale,
         bandwidth,
         baseline,
-        scales,
-        stackMode
+        scales
       );
     }
-    return computeColoredColumns(
+  } else {
+    marks = computeSimpleColumns(
       spec.data,
       xChannel.field,
       yChannel.field,
-      colorField,
       xScale,
       yScale,
       bandwidth,
       baseline,
-      scales
+      scales,
+      isSequentialColor,
+      conditionalColor
     );
   }
-  return computeSimpleColumns(
-    spec.data,
-    xChannel.field,
-    yChannel.field,
-    xScale,
-    yScale,
-    bandwidth,
-    baseline,
-    scales,
-    isSequentialColor,
-    conditionalColor
-  );
+  return applyMarkDefOverrides2(marks, spec, bandwidth);
 }
 function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false, conditionalColor) {
   const marks = [];
@@ -4950,6 +4982,27 @@ function computeStackedColumns(data, categoryField, valueField, colorField, xSca
   }
   return marks;
 }
+function applyMarkDefOverrides2(marks, spec, bandwidth) {
+  const { markDef } = spec;
+  const fixedSize = markDef.size;
+  const crSpec = markDef.cornerRadius;
+  if (fixedSize == null && crSpec == null) return marks;
+  for (const mark of marks) {
+    if (fixedSize != null && mark.stackGroup === void 0) {
+      const barWidth = Math.min(fixedSize, bandwidth);
+      const offset = (bandwidth - barWidth) / 2;
+      mark.x = mark.x + offset;
+      mark.width = barWidth;
+    }
+    const effectiveWidth = mark.width;
+    if (crSpec === "pill") {
+      mark.cornerRadius = effectiveWidth / 2;
+    } else if (typeof crSpec === "number") {
+      mark.cornerRadius = crSpec;
+    }
+  }
+  return marks;
+}
 
 // src/charts/column/labels.ts
 import {
@@ -4961,7 +5014,7 @@ import {
 var LABEL_FONT_SIZE2 = 10;
 var LABEL_FONT_WEIGHT2 = 600;
 var LABEL_OFFSET_Y = 6;
-function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField) {
+function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, labelPrefix, valueField, labelColor) {
   const targetMarks = filterByDensity(marks, density);
   const formatter = buildD3Formatter2(labelFormat);
   const candidates = [];
@@ -5002,7 +5055,7 @@ function computeColumnLabels(marks, _chartArea, density = "auto", labelFormat, l
         fontFamily: "system-ui, -apple-system, sans-serif",
         fontSize: LABEL_FONT_SIZE2,
         fontWeight: LABEL_FONT_WEIGHT2,
-        fill: getRepresentativeColor2(mark.fill),
+        fill: labelColor ?? getRepresentativeColor2(mark.fill),
         lineHeight: 1.2,
         textAnchor: "middle",
         dominantBaseline: isNegative ? "hanging" : "auto"
@@ -5032,7 +5085,8 @@ var columnRenderer = (spec, scales, chartArea, strategy, _theme) => {
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
-    valueField
+    valueField,
+    spec.labels.color
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];
@@ -5355,9 +5409,26 @@ function computeSingleArea(spec, scales, _chartArea) {
     const ariaLabel = seriesKey === "__default__" ? `Area with ${validPoints.length} data points` : `${seriesKey}: area with ${validPoints.length} data points`;
     const aria = { label: ariaLabel };
     const markFill = spec.markDef.fill;
-    const fillValue = markFill != null ? markFill : color2;
-    const defaultFillOpacity = y2Channel ? 0.25 : DEFAULT_FILL_OPACITY;
-    const fillOpacity = isGradientDef3(fillValue) ? 1 : spec.markDef.opacity ?? defaultFillOpacity;
+    let fillValue;
+    let fillOpacity;
+    if (markFill != null) {
+      fillValue = markFill;
+      fillOpacity = isGradientDef3(markFill) ? 1 : spec.markDef.opacity ?? (y2Channel ? 0.25 : DEFAULT_FILL_OPACITY);
+    } else {
+      const colorStr = getRepresentativeColor4(color2);
+      fillValue = {
+        gradient: "linear",
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 1,
+        stops: [
+          { offset: 0, color: colorStr, opacity: 0.12 },
+          { offset: 1, color: colorStr, opacity: 0 }
+        ]
+      };
+      fillOpacity = 1;
+    }
     marks.push({
       type: "area",
       topPoints,
@@ -5367,7 +5438,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       fill: fillValue,
       fillOpacity,
       stroke: getRepresentativeColor4(isGradientDef3(fillValue) ? color2 : fillValue),
-      strokeWidth: spec.display === "sparkline" ? 1.25 : 2,
+      strokeWidth: spec.markDef.strokeWidth ?? (spec.display === "sparkline" ? 1.25 : 1.5),
       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 })),
@@ -5483,7 +5554,7 @@ function computeAreaMarks(spec, scales, chartArea) {
 
 // src/charts/line/compute.ts
 import { getRepresentativeColor as getRepresentativeColor5 } from "@opendata-ai/openchart-core";
-var DEFAULT_STROKE_WIDTH = 2.5;
+var DEFAULT_STROKE_WIDTH = 1.5;
 var SPARKLINE_STROKE_WIDTH = 1.25;
 var DEFAULT_POINT_RADIUS = 3;
 function computeLineMarks(spec, scales, _chartArea, _strategy) {
@@ -5551,7 +5622,7 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
       points: allPoints,
       path: combinedPath,
       stroke: strokeColor,
-      strokeWidth: styleOverride?.strokeWidth ?? (spec.display === "sparkline" ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
+      strokeWidth: styleOverride?.strokeWidth ?? spec.markDef.strokeWidth ?? (spec.display === "sparkline" ? SPARKLINE_STROKE_WIDTH : DEFAULT_STROKE_WIDTH),
       strokeDasharray,
       opacity: styleOverride?.opacity,
       seriesKey: seriesStyleKey,
@@ -5561,25 +5632,30 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
     };
     marks.push(lineMark);
     const markPoint = spec.markDef.point;
-    const showPoints = markPoint === true || markPoint === "transparent" || isSequentialColor;
+    const showPoints = markPoint === true || markPoint === "transparent" || markPoint === "endpoints" || 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 visible = seriesShowPoints && !isTransparent;
+        const isEndpoint = i === 0 || i === lastIdx;
+        const visible = seriesShowPoints && !isTransparent && (!isEndpoints || isEndpoint);
         let pointColor = color2;
         if (isSequentialColor) {
           const val = Number(p.row[sequentialColorField]);
           pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color2;
         }
+        const hollow = isEndpoints && visible;
+        const pointColorStr = getRepresentativeColor5(pointColor);
         const pointMark = {
           type: "point",
           cx: p.x,
           cy: p.y,
           r: visible ? DEFAULT_POINT_RADIUS : 0,
-          fill: pointColor,
-          stroke: visible ? "#ffffff" : "transparent",
+          fill: hollow ? "transparent" : pointColorStr,
+          stroke: hollow ? pointColorStr : visible ? "#ffffff" : "transparent",
           strokeWidth: visible ? 1.5 : 0,
           fillOpacity: isTransparent ? 0 : 1,
           data: p.row,
@@ -6309,262 +6385,90 @@ function registerBuiltinRenderers() {
 }
 registerBuiltinRenderers();
 
-// src/charts/post-process.ts
-function computeMarkObstacles(marks, scales) {
-  if (scales.y?.type === "band") {
-    return computeBandRowObstacles(marks, scales);
+// src/barlist/compile-barlist.ts
+import {
+  adaptTheme,
+  buildD3Formatter as buildD3Formatter4,
+  computeChrome,
+  estimateTextWidth as estimateTextWidth7,
+  formatNumber as formatNumber2,
+  resolveTheme
+} from "@opendata-ai/openchart-core";
+
+// src/compiler/animation.ts
+var ENTER_DEFAULTS = {
+  duration: 500,
+  ease: "smooth",
+  staggerDelay: 80,
+  staggerOrder: "index",
+  annotationDelay: 200
+};
+var MAX_TOTAL_STAGGER_MS = 2e3;
+function resolveAnimation(spec) {
+  if (spec === void 0 || spec === false) return void 0;
+  if (spec === true) {
+    return {
+      enabled: true,
+      duration: ENTER_DEFAULTS.duration,
+      ease: ENTER_DEFAULTS.ease,
+      staggerDelay: ENTER_DEFAULTS.staggerDelay,
+      staggerOrder: ENTER_DEFAULTS.staggerOrder,
+      annotationDelay: ENTER_DEFAULTS.annotationDelay
+    };
   }
-  const obstacles = [];
-  for (const mark of marks) {
-    if (mark.type === "rect") {
-      const rm = mark;
-      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
-    } else if (mark.type === "point") {
-      const pm = mark;
-      obstacles.push({
-        x: pm.cx - pm.r,
-        y: pm.cy - pm.r,
-        width: pm.r * 2,
-        height: pm.r * 2
-      });
-    }
+  const config = spec;
+  if (config.enter === false || config.enter === void 0 && !hasAnyPhase(config)) {
+    return void 0;
   }
-  return obstacles;
+  const enterConfig = resolvePhaseConfig(config.enter);
+  return {
+    enabled: true,
+    duration: enterConfig.duration,
+    ease: enterConfig.ease,
+    staggerDelay: enterConfig.staggerDelay,
+    staggerOrder: enterConfig.staggerOrder,
+    annotationDelay: config.annotationDelay ?? ENTER_DEFAULTS.annotationDelay
+  };
 }
-function computeBandRowObstacles(marks, scales) {
-  const rows = /* @__PURE__ */ new Map();
-  for (const mark of marks) {
-    let cy;
-    let left2;
-    let right2;
-    if (mark.type === "point") {
-      const pm = mark;
-      cy = pm.cy;
-      left2 = pm.cx - pm.r;
-      right2 = pm.cx + pm.r;
-    } else if (mark.type === "rect") {
-      const rm = mark;
-      cy = rm.y + rm.height / 2;
-      left2 = rm.x;
-      right2 = rm.x + rm.width;
-    } else {
-      continue;
-    }
-    const key = Math.round(cy);
-    const existing = rows.get(key);
-    if (existing) {
-      existing.minX = Math.min(existing.minX, left2);
-      existing.maxX = Math.max(existing.maxX, right2);
-    } else {
-      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
-    }
-  }
-  const bandScale = scales.y.scale;
-  const bandwidth = bandScale.bandwidth?.() ?? 0;
-  if (bandwidth === 0) return [];
-  const obstacles = [];
-  for (const { minX, maxX, bandY } of rows.values()) {
-    obstacles.push({
-      x: minX,
-      y: bandY - bandwidth / 2,
-      width: maxX - minX,
-      height: bandwidth
-    });
-  }
-  return obstacles;
+function clampStaggerDelay(delay, elementCount) {
+  if (elementCount <= 1) return 0;
+  return Math.min(delay, MAX_TOTAL_STAGGER_MS / elementCount);
 }
-function resolveRendererKey(markType, encoding, markDef) {
-  if (markType === "bar") {
-    const xType = encoding.x?.type;
-    const yType = encoding.y?.type;
-    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
-    if (isVertical) {
-      return "bar:vertical";
-    }
-  } else if (markType === "arc") {
-    const innerRadius = markDef.innerRadius;
-    if (innerRadius && innerRadius > 0) {
-      return "arc:donut";
-    }
+function hasAnyPhase(config) {
+  return config.enter !== void 0 || config.update !== void 0 || config.exit !== void 0;
+}
+function resolvePhaseConfig(phase) {
+  if (phase === void 0 || phase === true) {
+    return {
+      duration: ENTER_DEFAULTS.duration,
+      ease: ENTER_DEFAULTS.ease,
+      staggerDelay: ENTER_DEFAULTS.staggerDelay,
+      staggerOrder: ENTER_DEFAULTS.staggerOrder
+    };
   }
-  return markType;
+  const cfg = phase;
+  const stagger = resolveStagger(cfg.stagger);
+  return {
+    duration: cfg.duration ?? ENTER_DEFAULTS.duration,
+    ease: cfg.ease ?? ENTER_DEFAULTS.ease,
+    staggerDelay: stagger.delay,
+    staggerOrder: stagger.order
+  };
 }
-function getMarkPrimaryValue(mark) {
-  switch (mark.type) {
-    case "rect":
-      return mark.height;
-    // bar height is the primary value encoding
-    case "point":
-      return mark.cy;
-    // y position for scatter
-    case "arc":
-      return mark.endAngle - mark.startAngle;
-    // arc angle extent
-    case "line":
-    case "area":
-      return 0;
-    // series marks don't have individual values
-    default:
-      return 0;
-  }
-}
-function assignAnimationIndices(marks, animation) {
-  if (!animation?.enabled) return;
-  if (animation.staggerOrder === "value") {
-    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
-    indexed.sort((a, b) => {
-      const av = getMarkPrimaryValue(a.mark);
-      const bv = getMarkPrimaryValue(b.mark);
-      return av - bv;
-    });
-    for (let i = 0; i < indexed.length; i++) {
-      const m = indexed[i].mark;
-      if (m.type === "rect" && m.stackGroup) continue;
-      m.animationIndex = i;
-    }
-  }
-  const groupIndexMap = /* @__PURE__ */ new Map();
-  const groupStackPos = /* @__PURE__ */ new Map();
-  let nextGroupIndex = 0;
-  for (const mark of marks) {
-    if (mark.type === "rect" && mark.stackGroup) {
-      const rect = mark;
-      const group = rect.stackGroup;
-      if (!groupIndexMap.has(group)) {
-        groupIndexMap.set(group, nextGroupIndex++);
-      }
-      rect.animationIndex = groupIndexMap.get(group);
-      const pos = groupStackPos.get(group) ?? 0;
-      rect.stackPos = pos;
-      groupStackPos.set(group, pos + 1);
-    }
+function resolveStagger(stagger) {
+  if (stagger === false) return { delay: 0, order: "index" };
+  if (stagger === void 0 || stagger === true) {
+    return { delay: ENTER_DEFAULTS.staggerDelay, order: ENTER_DEFAULTS.staggerOrder };
   }
-}
-
-// src/compile/color-scale-range.ts
-function applyColorScaleRange(scales, encoding, theme) {
-  if (!scales.color) return;
-  const hasExplicitRange = !!(encoding.color && "field" in encoding.color && encoding.color.scale?.range?.length);
-  if (hasExplicitRange) return;
-  if (scales.color.type === "sequential") {
-    const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
-    scales.color.scale.range([
-      seqStops[0],
-      seqStops[seqStops.length - 1]
-    ]);
-  } else {
-    scales.color.scale.range(theme.colors.categorical);
-  }
-}
-
-// src/compile/data-clip.ts
-function filterClippedDomains(data, encoding) {
-  let result = data;
-  for (const channel of ["x", "y"]) {
-    const enc = encoding[channel];
-    if (!enc?.scale?.clip || !enc.scale.domain) continue;
-    const domain = enc.scale.domain;
-    const field = enc.field;
-    if (Array.isArray(domain) && domain.length === 2 && typeof domain[0] === "number") {
-      const [lo, hi] = domain;
-      result = result.filter((row) => {
-        const v = Number(row[field]);
-        return Number.isFinite(v) && v >= lo && v <= hi;
-      });
-    }
-  }
-  return result;
-}
-
-// src/compile/watermark-obstacle.ts
-import { BRAND_RESERVE_WIDTH } from "@opendata-ai/openchart-core";
-var WATERMARK_HEIGHT = 30;
-var X_AXIS_EXTENT_WITH_LABEL = 48;
-var X_AXIS_EXTENT_TICKS_ONLY = 26;
-function computeWatermarkObstacle(dims, watermark, axes, theme) {
-  if (!watermark) return null;
-  const chartArea = dims.chartArea;
-  const brandPadding = theme.spacing.padding;
-  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH;
-  const xAxisExtent = axes.x?.label ? X_AXIS_EXTENT_WITH_LABEL : axes.x ? X_AXIS_EXTENT_TICKS_ONLY : 0;
-  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
-  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
-  return { x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH, height: WATERMARK_HEIGHT };
-}
-
-// src/compiler/animation.ts
-var ENTER_DEFAULTS = {
-  duration: 500,
-  ease: "smooth",
-  staggerDelay: 80,
-  staggerOrder: "index",
-  annotationDelay: 200
-};
-var MAX_TOTAL_STAGGER_MS = 2e3;
-function resolveAnimation(spec) {
-  if (spec === void 0 || spec === false) return void 0;
-  if (spec === true) {
-    return {
-      enabled: true,
-      duration: ENTER_DEFAULTS.duration,
-      ease: ENTER_DEFAULTS.ease,
-      staggerDelay: ENTER_DEFAULTS.staggerDelay,
-      staggerOrder: ENTER_DEFAULTS.staggerOrder,
-      annotationDelay: ENTER_DEFAULTS.annotationDelay
-    };
-  }
-  const config = spec;
-  if (config.enter === false || config.enter === void 0 && !hasAnyPhase(config)) {
-    return void 0;
-  }
-  const enterConfig = resolvePhaseConfig(config.enter);
-  return {
-    enabled: true,
-    duration: enterConfig.duration,
-    ease: enterConfig.ease,
-    staggerDelay: enterConfig.staggerDelay,
-    staggerOrder: enterConfig.staggerOrder,
-    annotationDelay: config.annotationDelay ?? ENTER_DEFAULTS.annotationDelay
-  };
-}
-function clampStaggerDelay(delay, elementCount) {
-  if (elementCount <= 1) return 0;
-  return Math.min(delay, MAX_TOTAL_STAGGER_MS / elementCount);
-}
-function hasAnyPhase(config) {
-  return config.enter !== void 0 || config.update !== void 0 || config.exit !== void 0;
-}
-function resolvePhaseConfig(phase) {
-  if (phase === void 0 || phase === true) {
-    return {
-      duration: ENTER_DEFAULTS.duration,
-      ease: ENTER_DEFAULTS.ease,
-      staggerDelay: ENTER_DEFAULTS.staggerDelay,
-      staggerOrder: ENTER_DEFAULTS.staggerOrder
-    };
-  }
-  const cfg = phase;
-  const stagger = resolveStagger(cfg.stagger);
-  return {
-    duration: cfg.duration ?? ENTER_DEFAULTS.duration,
-    ease: cfg.ease ?? ENTER_DEFAULTS.ease,
-    staggerDelay: stagger.delay,
-    staggerOrder: stagger.order
-  };
-}
-function resolveStagger(stagger) {
-  if (stagger === false) return { delay: 0, order: "index" };
-  if (stagger === void 0 || stagger === true) {
-    return { delay: ENTER_DEFAULTS.staggerDelay, order: ENTER_DEFAULTS.staggerOrder };
-  }
-  return {
-    delay: stagger.delay ?? ENTER_DEFAULTS.staggerDelay,
-    order: stagger.order ?? ENTER_DEFAULTS.staggerOrder
-  };
+  return {
+    delay: stagger.delay ?? ENTER_DEFAULTS.staggerDelay,
+    order: stagger.order ?? ENTER_DEFAULTS.staggerOrder
+  };
 }
 
 // src/compiler/normalize.ts
 import {
+  isBarListSpec,
   isChartSpec,
   isGraphSpec,
   isLayerSpec,
@@ -6822,7 +6726,8 @@ function normalizeLabels(labels) {
     density: labels.density ?? "auto",
     format: labels.format ?? "",
     prefix: labels.prefix ?? "",
-    offsets: labels.offsets
+    offsets: labels.offsets,
+    color: labels.color
   };
 }
 function normalizeChartSpec(spec, warnings) {
@@ -6968,6 +6873,22 @@ function normalizeTileMapSpec(spec, warnings) {
     valueFormat: spec.valueFormat
   };
 }
+function normalizeBarListSpec(spec, _warnings) {
+  return {
+    type: "barlist",
+    data: spec.data,
+    encoding: spec.encoding,
+    barHeight: spec.barHeight ?? 6,
+    cornerRadius: spec.cornerRadius ?? "pill",
+    maxItems: spec.maxItems ?? 20,
+    chrome: normalizeChrome(spec.chrome),
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? "off",
+    watermark: spec.watermark ?? true,
+    animation: spec.animation ?? true,
+    valueFormat: spec.valueFormat
+  };
+}
 function normalizeSpec(spec, warnings = []) {
   if (isLayerSpec(spec)) {
     const leaves = flattenLayers(spec);
@@ -6991,8 +6912,11 @@ function normalizeSpec(spec, warnings = []) {
   if (isTileMapSpec(spec)) {
     return normalizeTileMapSpec(spec, warnings);
   }
+  if (isBarListSpec(spec)) {
+    return normalizeBarListSpec(spec, warnings);
+  }
   throw new Error(
-    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', type: 'sankey', or type: 'tilemap'.`
+    `Unknown spec shape. Expected mark (chart), layer, type: 'table', type: 'graph', type: 'sankey', type: 'tilemap', or type: 'barlist'.`
   );
 }
 function flattenLayers(spec, parentData, parentEncoding, parentTransforms, parentWatermark) {
@@ -7632,6 +7556,98 @@ function validateTileMapSpec(spec, errors) {
     });
   }
 }
+function validateBarListSpec(spec, errors) {
+  if (!Array.isArray(spec.data)) {
+    errors.push({
+      message: 'Spec error: barlist spec requires a "data" array',
+      path: "data",
+      code: "INVALID_TYPE",
+      suggestion: 'Provide data as an array of objects, e.g. data: [{ label: "Category A", value: 42 }]'
+    });
+    return;
+  }
+  if (spec.data.length === 0) {
+    errors.push({
+      message: 'Spec error: "data" array must be non-empty',
+      path: "data",
+      code: "EMPTY_DATA",
+      suggestion: "Add at least one data row"
+    });
+    return;
+  }
+  const firstRow = spec.data[0];
+  if (typeof firstRow !== "object" || firstRow === null || Array.isArray(firstRow)) {
+    errors.push({
+      message: 'Spec error: each item in "data" must be a plain object',
+      path: "data[0]",
+      code: "INVALID_TYPE",
+      suggestion: 'Each data item should be an object, e.g. { label: "Category A", value: 42 }'
+    });
+    return;
+  }
+  if (!spec.encoding || typeof spec.encoding !== "object") {
+    errors.push({
+      message: 'Spec error: barlist spec requires an "encoding" object with label and value channels',
+      path: "encoding",
+      code: "MISSING_FIELD",
+      suggestion: 'Add an encoding object, e.g. encoding: { label: { field: "name", type: "nominal" }, value: { field: "count", type: "quantitative" } }'
+    });
+    return;
+  }
+  const encoding = spec.encoding;
+  const dataColumns = new Set(Object.keys(firstRow));
+  const availableColumns = [...dataColumns].join(", ");
+  for (const channel of ["label", "value"]) {
+    const ch = encoding[channel];
+    if (!ch || typeof ch !== "object") {
+      errors.push({
+        message: `Spec error: barlist encoding requires "${channel}" channel`,
+        path: `encoding.${channel}`,
+        code: "MISSING_FIELD",
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${channel === "value" ? "quantitative" : "nominal"}" }`
+      });
+      continue;
+    }
+    if (!ch.field || typeof ch.field !== "string") {
+      errors.push({
+        message: `Spec error: encoding.${channel} must have a "field" string`,
+        path: `encoding.${channel}.field`,
+        code: "MISSING_FIELD",
+        suggestion: `Add a field name from your data columns: ${availableColumns}`
+      });
+      continue;
+    }
+    if (!dataColumns.has(ch.field)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `encoding.${channel}.field`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the available data columns: ${availableColumns}`
+      });
+    }
+  }
+  for (const channel of ["subtitle", "color", "tooltip"]) {
+    const ch = encoding[channel];
+    if (!ch) continue;
+    const field = ch.field;
+    if (field && typeof field === "string" && !dataColumns.has(field)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.field "${field}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `encoding.${channel}.field`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the available data columns: ${availableColumns}`
+      });
+    }
+  }
+  if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
+    errors.push({
+      message: 'Spec error: darkMode must be "auto", "force", or "off"',
+      path: "darkMode",
+      code: "INVALID_VALUE",
+      suggestion: 'Use one of: "auto" (system preference), "force" (always dark), or "off" (always light)'
+    });
+  }
+}
 function validateLayerSpec(spec, errors) {
   const layer = spec.layer;
   if (layer.length === 0) {
@@ -7704,105 +7720,550 @@ function validateLayerSpec(spec, errors) {
       }
     }
   }
-}
-function validateSpec(spec) {
-  const errors = [];
-  if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
-    return {
-      valid: false,
-      errors: [
-        {
-          message: "Spec error: spec must be a non-null object",
-          code: "INVALID_TYPE",
-          suggestion: 'Pass a spec object with at least a "mark" field for charts, e.g. { mark: "line", data: [...], encoding: {...} }'
-        }
-      ],
-      normalized: null
-    };
+}
+function validateSpec(spec) {
+  const errors = [];
+  if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
+    return {
+      valid: false,
+      errors: [
+        {
+          message: "Spec error: spec must be a non-null object",
+          code: "INVALID_TYPE",
+          suggestion: 'Pass a spec object with at least a "mark" field for charts, e.g. { mark: "line", data: [...], encoding: {...} }'
+        }
+      ],
+      normalized: null
+    };
+  }
+  const obj = spec;
+  const hasLayer = "layer" in obj && Array.isArray(obj.layer);
+  const hasMark = "mark" in obj;
+  const isTable = obj.type === "table";
+  const isGraph = obj.type === "graph";
+  const isSankey = obj.type === "sankey";
+  const isTileMap = obj.type === "tilemap";
+  const isBarList = obj.type === "barlist";
+  const isLayer = hasLayer && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList;
+  const isChart = hasMark && !hasLayer && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList;
+  if (!isChart && !isTable && !isGraph && !isSankey && !isTileMap && !isBarList && !isLayer) {
+    return {
+      valid: false,
+      errors: [
+        {
+          message: 'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap/barlist',
+          path: "mark",
+          code: "MISSING_FIELD",
+          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field (type: "table", type: "graph", type: "sankey", type: "tilemap", or type: "barlist"). Valid mark types: ${[...MARK_TYPES].join(", ")}`
+        }
+      ],
+      normalized: null
+    };
+  }
+  if (isLayer) {
+    validateLayerSpec(obj, errors);
+  }
+  if (isChart) {
+    const mark = obj.mark;
+    let markValue;
+    if (typeof mark === "string") {
+      markValue = mark;
+    } else if (mark && typeof mark === "object" && !Array.isArray(mark)) {
+      markValue = mark.type;
+    }
+    if (!markValue || !MARK_TYPES.has(markValue)) {
+      return {
+        valid: false,
+        errors: [
+          {
+            message: `Spec error: "${markValue ?? String(mark)}" is not a valid mark type. Valid mark types: ${[...MARK_TYPES].join(", ")}`,
+            path: "mark",
+            code: "INVALID_VALUE",
+            suggestion: `Change mark to one of: ${[...MARK_TYPES].join(", ")}`
+          }
+        ],
+        normalized: null
+      };
+    }
+    validateChartSpec(obj, errors);
+  } else if (isTable) {
+    validateTableSpec(obj, errors);
+  } else if (isGraph) {
+    validateGraphSpec(obj, errors);
+  } else if (isSankey) {
+    validateSankeySpec(obj, errors);
+  } else if (isTileMap) {
+    validateTileMapSpec(obj, errors);
+  } else if (isBarList) {
+    validateBarListSpec(obj, errors);
+  }
+  if (errors.length > 0) {
+    return { valid: false, errors, normalized: null };
+  }
+  return {
+    valid: true,
+    errors: [],
+    normalized: spec
+  };
+}
+
+// src/compiler/index.ts
+function compile(spec) {
+  const validation = validateSpec(spec);
+  if (!validation.valid || !validation.normalized) {
+    const errorMessages = validation.errors.map((e) => e.message).join("\n");
+    throw new Error(`Invalid spec:
+${errorMessages}`);
+  }
+  const warnings = [];
+  const normalized = normalizeSpec(validation.normalized, warnings);
+  return { spec: normalized, warnings };
+}
+
+// src/barlist/compile-barlist.ts
+var DEFAULT_ROW_GAP = 8;
+var LABEL_BAR_GAP = 12;
+var BAR_VALUE_GAP = 12;
+var VALUE_WIDTH = 56;
+var LABEL_FONT_SIZE6 = 13;
+var LABEL_FONT_WEIGHT6 = 500;
+var SUBTITLE_FONT_SIZE = 12;
+var SUBTITLE_FONT_WEIGHT = 400;
+var VALUE_FONT_SIZE = 12;
+var VALUE_FONT_WEIGHT = 400;
+var BARLIST_COLORS = ["#06b6d4", "#34d399", "#fbbf24", "#f472b6", "#a78bfa"];
+function compileBarList(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (!("type" in normalized) || normalized.type !== "barlist") {
+    throw new Error(
+      "compileBarList received a non-barlist spec. Use compileChart, compileTable, compileGraph, compileSankey, or compileTileMap instead."
+    );
+  }
+  const barlistSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? barlistSpec.watermark : options.watermark ?? true;
+  const mergedThemeConfig = options.theme ? { ...barlistSpec.theme, ...options.theme } : barlistSpec.theme;
+  const lightTheme = resolveTheme(mergedThemeConfig);
+  let theme = lightTheme;
+  if (options.darkMode) {
+    theme = adaptTheme(theme);
+  }
+  const chrome = computeChrome(
+    {
+      title: barlistSpec.chrome.title,
+      subtitle: barlistSpec.chrome.subtitle,
+      source: barlistSpec.chrome.source,
+      byline: barlistSpec.chrome.byline,
+      footer: barlistSpec.chrome.footer
+    },
+    theme,
+    options.width,
+    options.measureText,
+    "full",
+    void 0,
+    watermark
+  );
+  const padding = theme.spacing.padding;
+  const fullArea = {
+    x: padding,
+    y: padding + chrome.topHeight,
+    width: options.width - padding * 2,
+    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+  };
+  if (fullArea.width <= 0 || fullArea.height <= 0) {
+    return emptyLayout(chrome, theme, options, watermark);
+  }
+  const labelField = barlistSpec.encoding.label.field;
+  const valueField = barlistSpec.encoding.value.field;
+  const subtitleField = barlistSpec.encoding.subtitle?.field;
+  const colorField = barlistSpec.encoding.color?.field;
+  const barHeight = barlistSpec.barHeight;
+  const cornerRadius = barlistSpec.cornerRadius === "pill" ? barHeight / 2 : barlistSpec.cornerRadius;
+  const rowContentHeight = Math.max(barHeight, LABEL_FONT_SIZE6 * 1.4);
+  const rowHeight = rowContentHeight + DEFAULT_ROW_GAP;
+  const maxFittingRows = Math.max(1, Math.floor(fullArea.height / rowHeight));
+  const validRows = barlistSpec.data.filter((row) => {
+    const val = row[valueField];
+    return val !== null && val !== void 0 && !Number.isNaN(Number(val));
+  }).sort((a, b) => Number(b[valueField]) - Number(a[valueField])).slice(0, Math.min(barlistSpec.maxItems, maxFittingRows));
+  if (validRows.length === 0) {
+    return emptyLayout(chrome, theme, options, watermark);
+  }
+  const maxValue = Math.max(...validRows.map((r) => Math.abs(Number(r[valueField]))));
+  const colorMap = /* @__PURE__ */ new Map();
+  let colorIndex = 0;
+  const palette = BARLIST_COLORS;
+  function getColor2(row, idx) {
+    if (colorField) {
+      const key = String(row[colorField] ?? "");
+      if (!colorMap.has(key)) {
+        colorMap.set(key, palette[colorIndex % palette.length]);
+        colorIndex++;
+      }
+      return colorMap.get(key);
+    }
+    return palette[idx % palette.length];
+  }
+  const formatter = buildD3Formatter4(barlistSpec.valueFormat) ?? formatNumber2;
+  const measureText = options.measureText ?? ((text, fontSize) => ({
+    width: estimateTextWidth7(text, fontSize),
+    height: fontSize
+  }));
+  const perRowLabelWidths = /* @__PURE__ */ new Map();
+  let maxCombinedWidth = 0;
+  for (let i = 0; i < validRows.length; i++) {
+    const row = validRows[i];
+    const label = String(row[labelField] ?? "");
+    const labelW = measureText(label, LABEL_FONT_SIZE6, LABEL_FONT_WEIGHT6).width;
+    perRowLabelWidths.set(i, labelW);
+    let combined = labelW + 4;
+    if (subtitleField && row[subtitleField] != null) {
+      const subtitle = String(row[subtitleField]);
+      combined = labelW + 6 + measureText(subtitle, SUBTITLE_FONT_SIZE, SUBTITLE_FONT_WEIGHT).width + 4;
+    }
+    maxCombinedWidth = Math.max(maxCombinedWidth, combined);
+  }
+  const isNarrow = fullArea.width < 400;
+  const labelBarGap = isNarrow ? 8 : LABEL_BAR_GAP;
+  const barValueGap = isNarrow ? 6 : BAR_VALUE_GAP;
+  const valueWidth = isNarrow ? 44 : VALUE_WIDTH;
+  const maxLabelPct = isNarrow ? 0.35 : 0.4;
+  const labelWidth = Math.max(50, Math.min(maxCombinedWidth, fullArea.width * maxLabelPct));
+  const barAreaWidth = fullArea.width - labelWidth - labelBarGap - barValueGap - valueWidth;
+  const labelColor = theme.colors.text;
+  const subtitleColor = options.darkMode ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.45)";
+  const valueColor = options.darkMode ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.55)";
+  const rows = [];
+  for (let i = 0; i < validRows.length; i++) {
+    const row = validRows[i];
+    const value2 = Number(row[valueField]);
+    const labelText = String(row[labelField] ?? "");
+    const formattedValue = formatter(value2);
+    const barColor = getColor2(row, i);
+    const pct = maxValue > 0 ? Math.abs(value2) / maxValue : 0;
+    const rowY = fullArea.y + i * rowHeight;
+    const centerY = rowY + rowContentHeight / 2;
+    const labelX = fullArea.x;
+    const labelStyle = {
+      fontFamily: theme.fonts.family,
+      fontSize: LABEL_FONT_SIZE6,
+      fontWeight: LABEL_FONT_WEIGHT6,
+      fill: labelColor,
+      lineHeight: 1.4
+    };
+    let subtitle;
+    if (subtitleField && row[subtitleField] != null) {
+      const subtitleText = String(row[subtitleField]);
+      const subtitleX = labelX + (perRowLabelWidths.get(i) ?? 0) + 6;
+      subtitle = {
+        text: subtitleText,
+        x: subtitleX,
+        y: centerY,
+        style: {
+          fontFamily: theme.fonts.family,
+          fontSize: SUBTITLE_FONT_SIZE,
+          fontWeight: SUBTITLE_FONT_WEIGHT,
+          fill: subtitleColor,
+          lineHeight: 1.4
+        },
+        visible: true
+      };
+    }
+    const trackX = fullArea.x + labelWidth + labelBarGap;
+    const trackY = centerY - barHeight / 2;
+    const trackWidth = Math.max(barAreaWidth, 0);
+    const barWidth = Math.max(pct * trackWidth, 0);
+    const valueLabelX = trackX + trackWidth + barValueGap + valueWidth;
+    const valueLabelStyle = {
+      fontFamily: `${theme.fonts.family}, ui-monospace, monospace`,
+      fontSize: VALUE_FONT_SIZE,
+      fontWeight: VALUE_FONT_WEIGHT,
+      fill: valueColor,
+      lineHeight: 1.4
+    };
+    const rowMark = {
+      type: "barlist-row",
+      index: i,
+      y: rowY,
+      height: rowHeight,
+      label: {
+        text: labelText,
+        x: labelX,
+        y: centerY,
+        style: labelStyle,
+        visible: true
+      },
+      subtitle,
+      track: {
+        x: trackX,
+        y: trackY,
+        width: trackWidth,
+        height: barHeight,
+        cornerRadius
+      },
+      bar: {
+        x: trackX,
+        y: trackY,
+        width: barWidth,
+        height: barHeight,
+        cornerRadius,
+        fill: barColor
+      },
+      valueLabel: {
+        text: formattedValue,
+        x: valueLabelX,
+        y: centerY,
+        style: valueLabelStyle,
+        visible: true
+      },
+      value: value2,
+      formattedValue,
+      aria: {
+        role: "listitem",
+        label: `${labelText}: ${formattedValue}`
+      },
+      animationIndex: i,
+      data: row
+    };
+    rows.push(rowMark);
+  }
+  const tooltipDescriptors = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const fields = [
+      { label: barlistSpec.encoding.value.title ?? valueField, value: row.formattedValue }
+    ];
+    tooltipDescriptors.set(String(row.index), {
+      title: row.label.text,
+      fields
+    });
+  }
+  const a11y = {
+    altText: `Bar list showing ${rows.length} items ranked by ${valueField}`,
+    dataTableFallback: rows.map((r) => [r.label.text, r.formattedValue]),
+    role: "list",
+    keyboardNavigable: rows.length > 0
+  };
+  const resolvedAnimation = resolveAnimation(barlistSpec.animation);
+  return {
+    area: fullArea,
+    chrome,
+    rows,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    width: options.width,
+    height: options.height,
+    animation: resolvedAnimation,
+    watermark,
+    measureText
+  };
+}
+function emptyLayout(chrome, theme, options, watermark) {
+  return {
+    area: { x: 0, y: 0, width: 0, height: 0 },
+    chrome,
+    rows: [],
+    tooltipDescriptors: /* @__PURE__ */ new Map(),
+    a11y: {
+      altText: "Empty bar list",
+      dataTableFallback: [],
+      role: "list",
+      keyboardNavigable: false
+    },
+    theme,
+    width: options.width,
+    height: options.height,
+    watermark,
+    animation: void 0,
+    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth7(text, fontSize), height: fontSize }))
+  };
+}
+
+// src/charts/post-process.ts
+function computeMarkObstacles(marks, scales) {
+  if (scales.y?.type === "band") {
+    return computeBandRowObstacles(marks, scales);
+  }
+  const obstacles = [];
+  for (const mark of marks) {
+    if (mark.type === "rect") {
+      const rm = mark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === "point") {
+      const pm = mark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2
+      });
+    }
+  }
+  return obstacles;
+}
+function computeBandRowObstacles(marks, scales) {
+  const rows = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    let cy;
+    let left2;
+    let right2;
+    if (mark.type === "point") {
+      const pm = mark;
+      cy = pm.cy;
+      left2 = pm.cx - pm.r;
+      right2 = pm.cx + pm.r;
+    } else if (mark.type === "rect") {
+      const rm = mark;
+      cy = rm.y + rm.height / 2;
+      left2 = rm.x;
+      right2 = rm.x + rm.width;
+    } else {
+      continue;
+    }
+    const key = Math.round(cy);
+    const existing = rows.get(key);
+    if (existing) {
+      existing.minX = Math.min(existing.minX, left2);
+      existing.maxX = Math.max(existing.maxX, right2);
+    } else {
+      rows.set(key, { minX: left2, maxX: right2, bandY: cy });
+    }
+  }
+  const bandScale = scales.y.scale;
+  const bandwidth = bandScale.bandwidth?.() ?? 0;
+  if (bandwidth === 0) return [];
+  const obstacles = [];
+  for (const { minX, maxX, bandY } of rows.values()) {
+    obstacles.push({
+      x: minX,
+      y: bandY - bandwidth / 2,
+      width: maxX - minX,
+      height: bandwidth
+    });
   }
-  const obj = spec;
-  const hasLayer = "layer" in obj && Array.isArray(obj.layer);
-  const hasMark = "mark" in obj;
-  const isTable = obj.type === "table";
-  const isGraph = obj.type === "graph";
-  const isSankey = obj.type === "sankey";
-  const isTileMap = obj.type === "tilemap";
-  const isLayer = hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
-  const isChart = hasMark && !hasLayer && !isTable && !isGraph && !isSankey && !isTileMap;
-  if (!isChart && !isTable && !isGraph && !isSankey && !isTileMap && !isLayer) {
-    return {
-      valid: false,
-      errors: [
-        {
-          message: 'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap',
-          path: "mark",
-          code: "MISSING_FIELD",
-          suggestion: `Add a "mark" field for charts (e.g. mark: "bar"), a "layer" array for layered charts, or a "type" field for tables/graphs/sankey/tilemap (type: "table", type: "graph", type: "sankey", or type: "tilemap"). Valid mark types: ${[...MARK_TYPES].join(", ")}`
-        }
-      ],
-      normalized: null
-    };
+  return obstacles;
+}
+function resolveRendererKey(markType, encoding, markDef) {
+  if (markType === "bar") {
+    const xType = encoding.x?.type;
+    const yType = encoding.y?.type;
+    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
+    if (isVertical) {
+      return "bar:vertical";
+    }
+  } else if (markType === "arc") {
+    const innerRadius = markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      return "arc:donut";
+    }
   }
-  if (isLayer) {
-    validateLayerSpec(obj, errors);
+  return markType;
+}
+function getMarkPrimaryValue(mark) {
+  switch (mark.type) {
+    case "rect":
+      return mark.height;
+    // bar height is the primary value encoding
+    case "point":
+      return mark.cy;
+    // y position for scatter
+    case "arc":
+      return mark.endAngle - mark.startAngle;
+    // arc angle extent
+    case "line":
+    case "area":
+      return 0;
+    // series marks don't have individual values
+    default:
+      return 0;
   }
-  if (isChart) {
-    const mark = obj.mark;
-    let markValue;
-    if (typeof mark === "string") {
-      markValue = mark;
-    } else if (mark && typeof mark === "object" && !Array.isArray(mark)) {
-      markValue = mark.type;
+}
+function assignAnimationIndices(marks, animation) {
+  if (!animation?.enabled) return;
+  if (animation.staggerOrder === "value") {
+    const indexed = marks.map((m, i) => ({ mark: m, idx: i }));
+    indexed.sort((a, b) => {
+      const av = getMarkPrimaryValue(a.mark);
+      const bv = getMarkPrimaryValue(b.mark);
+      return av - bv;
+    });
+    for (let i = 0; i < indexed.length; i++) {
+      const m = indexed[i].mark;
+      if (m.type === "rect" && m.stackGroup) continue;
+      m.animationIndex = i;
     }
-    if (!markValue || !MARK_TYPES.has(markValue)) {
-      return {
-        valid: false,
-        errors: [
-          {
-            message: `Spec error: "${markValue ?? String(mark)}" is not a valid mark type. Valid mark types: ${[...MARK_TYPES].join(", ")}`,
-            path: "mark",
-            code: "INVALID_VALUE",
-            suggestion: `Change mark to one of: ${[...MARK_TYPES].join(", ")}`
-          }
-        ],
-        normalized: null
-      };
+  }
+  const groupIndexMap = /* @__PURE__ */ new Map();
+  const groupStackPos = /* @__PURE__ */ new Map();
+  let nextGroupIndex = 0;
+  for (const mark of marks) {
+    if (mark.type === "rect" && mark.stackGroup) {
+      const rect = mark;
+      const group = rect.stackGroup;
+      if (!groupIndexMap.has(group)) {
+        groupIndexMap.set(group, nextGroupIndex++);
+      }
+      rect.animationIndex = groupIndexMap.get(group);
+      const pos = groupStackPos.get(group) ?? 0;
+      rect.stackPos = pos;
+      groupStackPos.set(group, pos + 1);
     }
-    validateChartSpec(obj, errors);
-  } else if (isTable) {
-    validateTableSpec(obj, errors);
-  } else if (isGraph) {
-    validateGraphSpec(obj, errors);
-  } else if (isSankey) {
-    validateSankeySpec(obj, errors);
-  } else if (isTileMap) {
-    validateTileMapSpec(obj, errors);
   }
-  if (errors.length > 0) {
-    return { valid: false, errors, normalized: null };
+}
+
+// src/compile/color-scale-range.ts
+function applyColorScaleRange(scales, encoding, theme) {
+  if (!scales.color) return;
+  const hasExplicitRange = !!(encoding.color && "field" in encoding.color && encoding.color.scale?.range?.length);
+  if (hasExplicitRange) return;
+  if (scales.color.type === "sequential") {
+    const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
+    scales.color.scale.range([
+      seqStops[0],
+      seqStops[seqStops.length - 1]
+    ]);
+  } else {
+    scales.color.scale.range(theme.colors.categorical);
   }
-  return {
-    valid: true,
-    errors: [],
-    normalized: spec
-  };
 }
 
-// src/compiler/index.ts
-function compile(spec) {
-  const validation = validateSpec(spec);
-  if (!validation.valid || !validation.normalized) {
-    const errorMessages = validation.errors.map((e) => e.message).join("\n");
-    throw new Error(`Invalid spec:
-${errorMessages}`);
+// src/compile/data-clip.ts
+function filterClippedDomains(data, encoding) {
+  let result = data;
+  for (const channel of ["x", "y"]) {
+    const enc = encoding[channel];
+    if (!enc?.scale?.clip || !enc.scale.domain) continue;
+    const domain = enc.scale.domain;
+    const field = enc.field;
+    if (Array.isArray(domain) && domain.length === 2 && typeof domain[0] === "number") {
+      const [lo, hi] = domain;
+      result = result.filter((row) => {
+        const v = Number(row[field]);
+        return Number.isFinite(v) && v >= lo && v <= hi;
+      });
+    }
   }
-  const warnings = [];
-  const normalized = normalizeSpec(validation.normalized, warnings);
-  return { spec: normalized, warnings };
+  return result;
+}
+
+// src/compile/watermark-obstacle.ts
+import { BRAND_RESERVE_WIDTH } from "@opendata-ai/openchart-core";
+var WATERMARK_HEIGHT = 30;
+var X_AXIS_EXTENT_WITH_LABEL = 48;
+var X_AXIS_EXTENT_TICKS_ONLY = 26;
+function computeWatermarkObstacle(dims, watermark, axes, theme) {
+  if (!watermark) return null;
+  const chartArea = dims.chartArea;
+  const brandPadding = theme.spacing.padding;
+  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH;
+  const xAxisExtent = axes.x?.label ? X_AXIS_EXTENT_WITH_LABEL : axes.x ? X_AXIS_EXTENT_TICKS_ONLY : 0;
+  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+  return { x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH, height: WATERMARK_HEIGHT };
 }
 
 // src/graphs/compile-graph.ts
-import { adaptTheme, computeChrome, resolveTheme } from "@opendata-ai/openchart-core";
+import { adaptTheme as adaptTheme2, computeChrome as computeChrome2, resolveTheme as resolveTheme2 } from "@opendata-ai/openchart-core";
 
 // src/graphs/encoding.ts
 var DEFAULT_NODE_RADIUS = 5;
@@ -8106,9 +8567,9 @@ function compileGraph(spec, options) {
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
-  let theme = resolveTheme(mergedThemeConfig);
+  let theme = resolveTheme2(mergedThemeConfig);
   if (options.darkMode) {
-    theme = adaptTheme(theme);
+    theme = adaptTheme2(theme);
   }
   const compiledNodes = resolveNodeVisuals(
     graphSpec.nodes,
@@ -8162,7 +8623,7 @@ function compileGraph(spec, options) {
     linkStrength: graphSpec.layout.linkStrength,
     centerForce: graphSpec.layout.centerForce
   };
-  const chrome = computeChrome(
+  const chrome = computeChrome2(
     {
       title: graphSpec.chrome.title,
       subtitle: graphSpec.chrome.subtitle,
@@ -8196,11 +8657,11 @@ function compileGraph(spec, options) {
 var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/axes/thinning.ts
-import { estimateTextWidth as estimateTextWidth7 } from "@opendata-ai/openchart-core";
+import { estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
 var MIN_TICK_GAP_FACTOR = 1;
 var MIN_TICK_COUNT = 2;
 function measureLabel(text, fontSize, fontWeight, measureText) {
-  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth7(text, fontSize, fontWeight);
+  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth8(text, fontSize, fontWeight);
 }
 function ticksOverlap(ticks2, fontSize, fontWeight, measureText, orientation = "horizontal") {
   if (ticks2.length < 2) return false;
@@ -8242,11 +8703,11 @@ function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText, orientatio
 // src/layout/axes/ticks.ts
 import {
   abbreviateNumber as abbreviateNumber2,
-  buildD3Formatter as buildD3Formatter4,
+  buildD3Formatter as buildD3Formatter5,
   buildTemporalFormatter,
-  estimateTextWidth as estimateTextWidth8,
+  estimateTextWidth as estimateTextWidth9,
   formatDate,
-  formatNumber as formatNumber2
+  formatNumber as formatNumber3
 } from "@opendata-ai/openchart-core";
 var Y_PX_PER_TICK = {
   full: 40,
@@ -8291,7 +8752,8 @@ var NUMERIC_SCALE_TYPES = /* @__PURE__ */ new Set([
 ]);
 var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
 function formatTickLabel(value2, resolvedScale) {
-  const formatStr = resolvedScale.channel.axis?.format;
+  const axisConfig = resolvedScale.channel.axis || void 0;
+  const formatStr = axisConfig?.format;
   if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     const temporalFmt = buildTemporalFormatter(formatStr);
     if (temporalFmt) return temporalFmt(value2);
@@ -8301,11 +8763,11 @@ function formatTickLabel(value2, resolvedScale) {
   if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value2;
     if (formatStr) {
-      const fmt = buildD3Formatter4(formatStr);
+      const fmt = buildD3Formatter5(formatStr);
       if (fmt) return fmt(num);
     }
     if (Math.abs(num) >= 1e3) return abbreviateNumber2(num);
-    return formatNumber2(num);
+    return formatNumber3(num);
   }
   return String(value2);
 }
@@ -8319,8 +8781,8 @@ function continuousTicks(resolvedScale, density, targetCount) {
       label: formatTickLabel(value2, resolvedScale)
     }));
   }
-  const explicitCount = resolvedScale.channel.axis?.tickCount;
-  const count = explicitCount ?? targetCount ?? TICK_COUNTS[density];
+  const axCfg = resolvedScale.channel.axis || void 0;
+  const count = axCfg?.tickCount ?? targetCount ?? TICK_COUNTS[density];
   return buildContinuousTicks(resolvedScale, count);
 }
 function buildContinuousTicks(resolvedScale, count) {
@@ -8356,12 +8818,13 @@ function scaleSupportsTickCount(resolvedScale) {
 function categoricalTicks(resolvedScale, density, orientation = "horizontal", bandwidth, labelAngle, fontSize, fontWeight, measureText, subtitleContext) {
   const scale = resolvedScale.scale;
   const domain = scale.domain();
-  const explicitTickCount = resolvedScale.channel.axis?.tickCount;
+  const catAxisCfg = resolvedScale.channel.axis || void 0;
+  const explicitTickCount = catAxisCfg?.tickCount;
   let selectedValues = domain;
   if (resolvedScale.type === "band" && orientation === "horizontal") {
     if (bandwidth !== void 0 && bandwidth > 0 && fontSize !== void 0) {
       const maxLabelWidth = domain.reduce((max4, v) => {
-        const w = measureText ? measureText(v, fontSize, fontWeight ?? 400).width : estimateTextWidth8(v, fontSize, fontWeight ?? 400);
+        const w = measureText ? measureText(v, fontSize, fontWeight ?? 400).width : estimateTextWidth9(v, fontSize, fontWeight ?? 400);
         return Math.max(max4, w);
       }, 0);
       const angleRad = labelAngle !== void 0 ? Math.abs(labelAngle) * Math.PI / 180 : 0;
@@ -8523,7 +8986,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   };
   const { fontSize } = tickLabelStyle;
   const { fontWeight } = tickLabelStyle;
-  if (scales.x && !dataContext?.skipX) {
+  if (scales.x && !dataContext?.skipX && scales.x.channel.axis !== false) {
     const axisConfig = scales.x.channel.axis;
     const isContinuousX = scales.x.type !== "band" && scales.x.type !== "point" && scales.x.type !== "ordinal";
     const xTargetCount = isContinuousX ? targetTickCount(chartArea.width, xDensity, "x") : void 0;
@@ -8601,7 +9064,7 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
       labelFlush: axisConfig?.labelFlush
     };
   }
-  if (scales.y && !dataContext?.skipY) {
+  if (scales.y && !dataContext?.skipY && scales.y.channel.axis !== false) {
     const axisConfig = scales.y.channel.axis;
     const isContinuousY = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
     const yTargetCount = isContinuousY ? targetTickCount(chartArea.height, yDensity, "y") : void 0;
@@ -8677,8 +9140,8 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
 import {
   AXIS_TITLE_TRAILING_PAD,
   BREAKPOINT_COMPACT_MAX,
-  computeChrome as computeChrome2,
-  estimateTextWidth as estimateTextWidth10,
+  computeChrome as computeChrome3,
+  estimateTextWidth as estimateTextWidth11,
   getAxisTitleOffset,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
@@ -8693,12 +9156,12 @@ import {
 } from "@opendata-ai/openchart-core";
 
 // src/legend/wrap.ts
-import { COMPACT_WIDTH, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+import { COMPACT_WIDTH, estimateTextWidth as estimateTextWidth10 } from "@opendata-ai/openchart-core";
 var SWATCH_SIZE2 = 12;
 var SWATCH_GAP2 = 6;
 var ENTRY_GAP2 = 16;
 var ENTRY_GAP_COMPACT = 10;
-var LEGEND_GAP = 4;
+var LEGEND_GAP = 8;
 function legendGap(width) {
   return width < COMPACT_WIDTH ? 0 : LEGEND_GAP;
 }
@@ -8712,7 +9175,7 @@ function measureLegendWrap(entries, maxWidth, labelStyle, maxRows, entryGap = EN
   let fittingCount = entries.length;
   let fittingCountLocked = false;
   for (let i = 0; i < entries.length; i++) {
-    const labelWidth = estimateTextWidth9(
+    const labelWidth = estimateTextWidth10(
       entries[i].label,
       labelStyle.fontSize,
       labelStyle.fontWeight
@@ -8758,7 +9221,9 @@ function getMinChartDims(display) {
 }
 function getSparklinePad(spec) {
   const strokeWidth = spec.markDef.strokeWidth ?? 2;
-  return Math.max(strokeWidth / 2 + 1, 2);
+  const hasPoints = !!spec.markDef.point;
+  const pointRadius = hasPoints ? 3 : 0;
+  return Math.max(strokeWidth / 2 + 1, pointRadius + 1, 2);
 }
 function computeDimensions(spec, options, legendLayout, theme, strategy, watermark = true) {
   const { width, height } = options;
@@ -8771,7 +9236,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   if (isSparkline && !userExplicit.chrome) {
     chromeMode = "hidden";
   }
-  const chrome = computeChrome2(
+  const chrome = computeChrome3(
     chromeToInput(spec.chrome),
     theme,
     width,
@@ -8812,11 +9277,12 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const total = { x: 0, y: 0, width, height };
   const isRadial = spec.markType === "arc";
   const encoding = spec.encoding;
-  const xAxis = encoding.x?.axis;
+  const xAxisSuppressed = encoding.x?.axis === false;
+  const xAxis = !xAxisSuppressed && encoding.x?.axis;
   const hasXAxisLabel = !!xAxis?.title;
   const xTickAngle = xAxis?.labelAngle;
   let xAxisHeight;
-  if (isRadial) {
+  if (isRadial || xAxisSuppressed) {
     xAxisHeight = 0;
   } else if (xTickAngle && Math.abs(xTickAngle) > 10) {
     const angleRad = Math.abs(xTickAngle) * (Math.PI / 180);
@@ -8825,7 +9291,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     if (xField) {
       for (const row of spec.data) {
         const label = String(row[xField] ?? "");
-        const w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        const w = estimateTextWidth11(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
     }
@@ -8855,7 +9321,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         const label = String(row[colorField] ?? "");
         if (!seen.has(label)) {
           seen.add(label);
-          const w = estimateTextWidth10(label, 11, 600);
+          const w = estimateTextWidth11(label, 11, 600);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
       }
@@ -8875,7 +9341,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       const maxXStr = String(maxX);
       for (const ann of spec.annotations) {
         if (ann.type === "text" && String(ann.x) === maxXStr) {
-          const textWidth = estimateTextWidth10(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
+          const textWidth = estimateTextWidth11(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
           const dx = ann.offset?.dx ?? 0;
           const anchor = ann.anchor ?? "auto";
           const baseRightExtent = anchor === "left" ? textWidth : (
@@ -8893,19 +9359,20 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       }
     }
   }
-  if (encoding.y && !isRadial) {
+  const yAxisSuppressed = encoding.y?.axis === false;
+  if (encoding.y && !isRadial && !yAxisSuppressed) {
     if (spec.markType === "bar" || spec.markType === "circle" || spec.markType === "lollipop" || encoding.y.type === "nominal" || encoding.y.type === "ordinal") {
       const yField = encoding.y.field;
       const yLabelField = encoding.y.axis?.labelField;
       let maxLabelWidth = 0;
       for (const row of spec.data) {
         const label = String(row[yField] ?? "");
-        let w = estimateTextWidth10(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        let w = estimateTextWidth11(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
         if (yLabelField) {
           const subtitle = String(row[yLabelField] ?? "");
           if (subtitle) {
             const gap = theme.fonts.sizes.axisTick * 0.6;
-            const subtitleWidth = estimateTextWidth10(
+            const subtitleWidth = estimateTextWidth11(
               subtitle,
               theme.fonts.sizes.axisTick,
               theme.fonts.weights.normal
@@ -8948,7 +9415,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       }
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
       const labelEst = negPrefix + sampleLabel;
-      const labelWidth = estimateTextWidth10(
+      const labelWidth = estimateTextWidth11(
         labelEst,
         theme.fonts.sizes.axisTick,
         theme.fonts.weights.normal
@@ -8985,7 +9452,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
   const minDims = getMinChartDims(spec.display);
   if ((chartArea.width < minDims.width || chartArea.height < minDims.height) && chromeMode !== "hidden") {
     const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
-    const fallbackChrome = computeChrome2(
+    const fallbackChrome = computeChrome3(
       chromeToInput(spec.chrome),
       theme,
       width,
@@ -9120,6 +9587,13 @@ function buildLinearScale(channel, data, rangeStart, rangeEnd) {
   const scale = linear2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
   if (!channel.scale?.domain && channel.scale?.nice !== false) {
     scale.nice();
+    if (channel.scale?.zero === false) {
+      const [nicedMin, nicedMax] = scale.domain();
+      if (nicedMin < domainMin || nicedMax > domainMax) {
+        scale.domain([domainMin, domainMax]);
+        scale.nice(20);
+      }
+    }
   }
   applyContinuousConfig(scale, channel);
   return { scale, type: "linear", channel };
@@ -9470,7 +9944,7 @@ function computeScales(spec, chartArea, data) {
 }
 
 // src/legend/compute.ts
-import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, COMPACT_WIDTH as COMPACT_WIDTH2, estimateTextWidth as estimateTextWidth11 } from "@opendata-ai/openchart-core";
+import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2, COMPACT_WIDTH as COMPACT_WIDTH2, estimateTextWidth as estimateTextWidth12 } from "@opendata-ai/openchart-core";
 var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
@@ -9587,7 +10061,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
   }
   if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
     const maxLabelWidth = Math.max(
-      ...entries.map((e) => estimateTextWidth11(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+      ...entries.map((e) => estimateTextWidth12(e.label, labelStyle.fontSize, labelStyle.fontWeight))
     );
     const legendWidth = Math.min(
       LEGEND_RIGHT_WIDTH,
@@ -9647,7 +10121,7 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
     entries = truncateEntries(entries, fittingCount);
   }
   const totalWidth = entries.reduce((sum2, entry) => {
-    const labelWidth = estimateTextWidth11(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    const labelWidth = estimateTextWidth12(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
     return sum2 + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + effectiveEntryGap;
   }, 0);
   const { rowCount } = measureLegendWrap(
@@ -9679,12 +10153,12 @@ function computeLegend(spec, strategy, theme, chartArea, watermark = true) {
 
 // src/sankey/compile-sankey.ts
 import {
-  adaptTheme as adaptTheme2,
-  buildD3Formatter as buildD3Formatter5,
-  computeChrome as computeChrome3,
-  estimateTextWidth as estimateTextWidth12,
-  formatNumber as formatNumber3,
-  resolveTheme as resolveTheme2
+  adaptTheme as adaptTheme3,
+  buildD3Formatter as buildD3Formatter6,
+  computeChrome as computeChrome4,
+  estimateTextWidth as estimateTextWidth13,
+  formatNumber as formatNumber4,
+  resolveTheme as resolveTheme3
 } from "@opendata-ai/openchart-core";
 
 // ../../node_modules/.bun/d3-array@2.12.1/node_modules/d3-array/src/max.js
@@ -10267,16 +10741,16 @@ function compileSankey(spec, options) {
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? sankeySpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...sankeySpec.theme, ...options.theme } : sankeySpec.theme;
-  const lightTheme = resolveTheme2(mergedThemeConfig);
+  const lightTheme = resolveTheme3(mergedThemeConfig);
   let theme = lightTheme;
   if (options.darkMode) {
-    theme = adaptTheme2(theme);
+    theme = adaptTheme3(theme);
     theme = {
       ...theme,
       colors: { ...theme.colors, categorical: lightTheme.colors.categorical }
     };
   }
-  const chrome = computeChrome3(
+  const chrome = computeChrome4(
     {
       title: sankeySpec.chrome.title,
       subtitle: sankeySpec.chrome.subtitle,
@@ -10299,7 +10773,7 @@ function compileSankey(spec, options) {
     height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout(fullArea, chrome, theme, options, watermark);
+    return emptyLayout2(fullArea, chrome, theme, options, watermark);
   }
   const sourceField = sankeySpec.encoding.source.field;
   const targetField = sankeySpec.encoding.target.field;
@@ -10335,7 +10809,7 @@ function compileSankey(spec, options) {
     height: fullArea.height - legend.bounds.height - legendGap2
   };
   if (area.height <= 0) {
-    return emptyLayout(area, chrome, theme, options, watermark);
+    return emptyLayout2(area, chrome, theme, options, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
   const labelFontWeight = theme.fonts.weights.normal;
@@ -10363,7 +10837,7 @@ function compileSankey(spec, options) {
     if (labelsLeft) continue;
     const labelX = (node.x1 ?? nodeWidth) + LABEL_GAP;
     const labelText = node.label ?? node.id;
-    const labelWidth = estimateTextWidth12(labelText, labelFontSize, labelFontWeight);
+    const labelWidth = estimateTextWidth13(labelText, labelFontSize, labelFontWeight);
     const overflow = labelX + labelWidth - rightEdge;
     if (overflow > maxOverflow) maxOverflow = overflow;
   }
@@ -10553,10 +11027,10 @@ function buildSankeyLegend(nodeColorMap, colorField, data, sourceField, targetFi
 }
 function formatFlowValue(value2, valueFormat) {
   if (valueFormat) {
-    const fmt = buildD3Formatter5(valueFormat);
+    const fmt = buildD3Formatter6(valueFormat);
     if (fmt) return fmt(value2);
   }
-  return formatNumber3(value2);
+  return formatNumber4(value2);
 }
 function buildTooltipDescriptors(nodes, links, valueFormat) {
   const descriptors = /* @__PURE__ */ new Map();
@@ -10587,7 +11061,7 @@ function buildTooltipDescriptors(nodes, links, valueFormat) {
   }
   return descriptors;
 }
-function emptyLayout(area, chrome, theme, options, watermark) {
+function emptyLayout2(area, chrome, theme, options, watermark) {
   return {
     area,
     chrome,
@@ -10625,7 +11099,7 @@ function emptyLayout(area, chrome, theme, options, watermark) {
 }
 
 // src/tables/compile-table.ts
-import { computeChrome as computeChrome4, estimateTextWidth as estimateTextWidth13 } from "@opendata-ai/openchart-core";
+import { computeChrome as computeChrome5, estimateTextWidth as estimateTextWidth14 } from "@opendata-ai/openchart-core";
 
 // src/tables/bar-column.ts
 var NEGATIVE_BAR_COLOR = "#c44e52";
@@ -10742,7 +11216,7 @@ function computeCategoryColors(data, column, theme, darkMode) {
 }
 
 // src/tables/format-cells.ts
-import { buildD3Formatter as buildD3Formatter6, formatDate as formatDate2, formatNumber as formatNumber4 } from "@opendata-ai/openchart-core";
+import { buildD3Formatter as buildD3Formatter7, formatDate as formatDate2, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
 function isNumericValue(value2) {
   if (typeof value2 === "number") return Number.isFinite(value2);
   return false;
@@ -10761,7 +11235,7 @@ function formatCell(value2, column) {
     };
   }
   if (column.format && isNumericValue(value2)) {
-    const formatter = buildD3Formatter6(column.format);
+    const formatter = buildD3Formatter7(column.format);
     if (formatter) {
       return {
         value: value2,
@@ -10773,7 +11247,7 @@ function formatCell(value2, column) {
   if (isNumericValue(value2)) {
     return {
       value: value2,
-      formattedValue: formatNumber4(value2),
+      formattedValue: formatNumber5(value2),
       style
     };
   }
@@ -10793,19 +11267,28 @@ function formatCell(value2, column) {
 function formatValueForSearch(value2, column) {
   if (value2 == null) return "";
   if (column.format && isNumericValue(value2)) {
-    const formatter = buildD3Formatter6(column.format);
+    const formatter = buildD3Formatter7(column.format);
     if (formatter) {
       return formatter(value2);
     }
   }
   if (isNumericValue(value2)) {
-    return formatNumber4(value2);
+    return formatNumber5(value2);
   }
   return String(value2);
 }
 
 // src/tables/heatmap.ts
 import { adaptColorForDarkMode as adaptColorForDarkMode2 } from "@opendata-ai/openchart-core";
+function relativeLuminance(hex2) {
+  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex2);
+  if (!m) return 0;
+  const [r, g, b] = [m[1], m[2], m[3]].map((c) => {
+    const v = Number.parseInt(c, 16) / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
 function interpolatorFromStops(stops) {
   if (stops.length === 0) return () => "#ffffff";
   if (stops.length === 1) return () => stops[0];
@@ -10858,7 +11341,19 @@ function computeHeatmapColors(data, column, theme, darkMode) {
   if (darkMode) {
     const lightBg = "#ffffff";
     const darkBg = theme.colors.background;
+    const originalStops = stops;
     stops = stops.map((c) => adaptColorForDarkMode2(c, lightBg, darkBg));
+    if (originalStops.length >= 2) {
+      const origDirection = Math.sign(
+        relativeLuminance(originalStops[originalStops.length - 1]) - relativeLuminance(originalStops[0])
+      );
+      const adaptedDirection = Math.sign(
+        relativeLuminance(stops[stops.length - 1]) - relativeLuminance(stops[0])
+      );
+      if (origDirection !== 0 && adaptedDirection !== 0 && origDirection !== adaptedDirection) {
+        stops = stops.slice().reverse();
+      }
+    }
   }
   const interpolator = interpolatorFromStops(stops);
   const scale = sequential(interpolator).domain(domain).clamp(true);
@@ -11040,13 +11535,13 @@ function estimateColumnWidth(col, data, fontSize) {
   if (col.image) return (col.image.width ?? 24) + PADDING;
   if (col.flag) return 60;
   const label = col.label ?? col.key;
-  const headerWidth = estimateTextWidth13(label, fontSize, 600) + PADDING;
+  const headerWidth = estimateTextWidth14(label, fontSize, 600) + PADDING;
   const sampleSize = Math.min(100, data.length);
   let maxDataWidth = 0;
   for (let i = 0; i < sampleSize; i++) {
     const val = data[i][col.key];
     const text = val == null ? "" : String(val);
-    const width = estimateTextWidth13(text, fontSize, 400) + PADDING;
+    const width = estimateTextWidth14(text, fontSize, 400) + PADDING;
     if (width > maxDataWidth) maxDataWidth = width;
   }
   return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
@@ -11230,7 +11725,7 @@ function compileTableLayout(spec, options, theme) {
     return { id: rowId, cells, data: row };
   });
   const watermark = spec.watermark;
-  const chrome = computeChrome4(
+  const chrome = computeChrome5(
     {
       title: spec.chrome.title,
       subtitle: spec.chrome.subtitle,
@@ -11272,16 +11767,16 @@ function compileTableLayout(spec, options, theme) {
 
 // src/tilemap/compile-tilemap.ts
 import {
-  adaptTheme as adaptTheme3,
-  buildD3Formatter as buildD3Formatter7,
-  computeChrome as computeChrome5,
-  estimateTextWidth as estimateTextWidth14,
-  formatNumber as formatNumber5,
-  resolveTheme as resolveTheme3,
+  adaptTheme as adaptTheme4,
+  buildD3Formatter as buildD3Formatter8,
+  computeChrome as computeChrome6,
+  estimateTextWidth as estimateTextWidth15,
+  formatNumber as formatNumber6,
+  resolveTheme as resolveTheme4,
   SEQUENTIAL_PALETTES
 } from "@opendata-ai/openchart-core";
-var TILE_CORNER_RADIUS = 2;
-var TILE_STROKE_WIDTH = 0;
+var TILE_CORNER_RADIUS = 6;
+var TILE_STROKE_WIDTH = 1;
 function compileTileMap(spec, options) {
   const { spec: normalized } = compile(spec);
   if (!("type" in normalized) || normalized.type !== "tilemap") {
@@ -11293,13 +11788,13 @@ function compileTileMap(spec, options) {
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? tilemapSpec.watermark : options.watermark ?? true;
   const mergedThemeConfig = options.theme ? { ...tilemapSpec.theme, ...options.theme } : tilemapSpec.theme;
-  const lightTheme = resolveTheme3(mergedThemeConfig);
+  const lightTheme = resolveTheme4(mergedThemeConfig);
   let theme = lightTheme;
   if (options.darkMode) {
-    theme = adaptTheme3(theme);
+    theme = adaptTheme4(theme);
   }
   const isDarkMode = options.darkMode;
-  const chrome = computeChrome5(
+  const chrome = computeChrome6(
     {
       title: tilemapSpec.chrome.title,
       subtitle: tilemapSpec.chrome.subtitle,
@@ -11322,7 +11817,7 @@ function compileTileMap(spec, options) {
     height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout2(chrome, theme, options, watermark);
+    return emptyLayout3(chrome, theme, options, watermark);
   }
   const stateField = tilemapSpec.encoding.state.field;
   const valueField = tilemapSpec.encoding.value.field;
@@ -11341,26 +11836,26 @@ function compileTileMap(spec, options) {
   const min4 = values.length > 0 ? Math.min(...values) : 0;
   const max4 = values.length > 0 ? Math.max(...values) : 100;
   const paletteStops = [...SEQUENTIAL_PALETTES[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES.blue];
-  if (isDarkMode) paletteStops.reverse();
-  const domain = paletteStops.map((_, i) => min4 + i / (paletteStops.length - 1) * (max4 - min4));
-  const colorScale = linear2().domain(domain).range(paletteStops).clamp(true);
+  const baseColor = isDarkMode ? paletteStops[0] : paletteStops[paletteStops.length - 1];
+  const opacityRange = isDarkMode ? [0.15, 1] : [0.2, 1];
+  const opacityScale = linear2().domain([min4, max4]).range(opacityRange).clamp(true);
   const showLegend = tilemapSpec.legend?.show !== false;
-  const legendBarHeight = 12;
-  const legendLabelGap = 4;
+  const legendBarHeight = 6;
+  const legendLabelGap = 6;
   const legendTotalHeight = showLegend ? legendBarHeight + legendLabelGap + 14 : 0;
   const legendGap2 = showLegend ? 8 : 0;
   const tileAreaHeight = fullArea.height - legendTotalHeight - legendGap2;
-  const tilePositions = computeTilePositions(fullArea.width, tileAreaHeight, 4);
+  const tilePositions = computeTilePositions(fullArea.width, tileAreaHeight, 5);
   const tileGridOffsetX = fullArea.x + (fullArea.width - tilePositions.gridWidth) / 2;
   const tileGridOffsetY = fullArea.y;
   const legendX = tileGridOffsetX;
   const legendY = tileGridOffsetY + tilePositions.gridHeight + legendGap2;
   const legendWidth = tilePositions.gridWidth;
-  const formatter = buildD3Formatter7(tilemapSpec.valueFormat) ?? formatNumber5;
+  const formatter = buildD3Formatter8(tilemapSpec.valueFormat) ?? formatNumber6;
   const neutralFillLight = "#e0e0e0";
-  const neutralFillDark = "#2a2a3e";
+  const neutralFillDark = "#1e2a30";
   const neutralStrokeLight = "#d0d0d0";
-  const neutralStrokeDark = "#3a3a50";
+  const neutralStrokeDark = "rgba(255,255,255,0.08)";
   const neutralFill = isDarkMode ? neutralFillDark : neutralFillLight;
   const neutralStroke = isDarkMode ? neutralStrokeDark : neutralStrokeLight;
   const tiles = [];
@@ -11369,26 +11864,31 @@ function compileTileMap(spec, options) {
     if (!pos) continue;
     const hasData = stateValueMap.has(stateCode);
     const value2 = hasData ? stateValueMap.get(stateCode) : null;
-    const fill = hasData ? colorScale(value2) : neutralFill;
+    const opacity = hasData ? opacityScale(value2) : 0;
+    const fill = hasData ? baseColor : neutralFill;
+    const stroke = hasData ? isDarkMode ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)" : neutralStroke;
     const formattedValue = hasData ? formatter(value2) : "\u2013";
     const labelStyle = {
       fontFamily: theme.fonts.family,
-      fontSize: tilePositions.tileSize > 24 ? 14 : 11,
+      fontSize: tilePositions.tileSize > 24 ? 10 : 7,
       fontWeight: 700,
       fill: "#ffffff",
       lineHeight: 1.2
     };
     const valueLabelStyle = {
       fontFamily: theme.fonts.family,
-      fontSize: tilePositions.tileSize > 24 ? 12 : 10,
-      fontWeight: 400,
-      fill: "#ffffff",
+      fontSize: tilePositions.tileSize > 24 ? 10 : 7,
+      fontWeight: 300,
+      fill: "rgba(255,255,255,0.6)",
       lineHeight: 1.2
     };
-    const valueLabel = tilePositions.tileSize < 24 ? { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false } : {
+    const tileCenterX = tileGridOffsetX + pos.x + tilePositions.tileSize / 2;
+    const tileTopY = tileGridOffsetY + pos.y;
+    const sz = tilePositions.tileSize;
+    const valueLabel = sz < 24 ? { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false } : {
       text: formattedValue,
-      x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
-      y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 + 8,
+      x: tileCenterX,
+      y: tileTopY + sz * 0.78,
       style: valueLabelStyle,
       visible: true
     };
@@ -11396,10 +11896,11 @@ function compileTileMap(spec, options) {
       type: "tile",
       stateCode,
       x: tileGridOffsetX + pos.x,
-      y: tileGridOffsetY + pos.y,
-      size: tilePositions.tileSize,
+      y: tileTopY,
+      size: sz,
       fill,
-      stroke: neutralStroke,
+      fillOpacity: hasData ? opacity : 1,
+      stroke,
       strokeWidth: TILE_STROKE_WIDTH,
       cornerRadius: TILE_CORNER_RADIUS,
       value: value2 ?? null,
@@ -11407,8 +11908,8 @@ function compileTileMap(spec, options) {
       hasData,
       label: {
         text: stateCode,
-        x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
-        y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 - 4,
+        x: tileCenterX,
+        y: tileTopY + sz * 0.28,
         style: labelStyle,
         visible: true
       },
@@ -11434,10 +11935,12 @@ function compileTileMap(spec, options) {
   }
   let gradientLegend = null;
   if (showLegend) {
-    const gradientColorStops = paletteStops.map((color2, i) => ({
-      offset: i / (paletteStops.length - 1),
-      color: color2
-    }));
+    const numStops = 5;
+    const gradientColorStops = Array.from({ length: numStops }, (_, i) => {
+      const t = i / (numStops - 1);
+      const o = opacityRange[0] + t * (opacityRange[1] - opacityRange[0]);
+      return { offset: t, color: baseColor, opacity: o };
+    });
     gradientLegend = {
       type: "gradient",
       position: "bottom",
@@ -11474,6 +11977,7 @@ function compileTileMap(spec, options) {
     keyboardNavigable: tiles.length > 0
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
+  const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
   return {
     area: fullArea,
     chrome,
@@ -11483,13 +11987,13 @@ function compileTileMap(spec, options) {
     a11y,
     theme,
     width: options.width,
-    height: options.height,
+    height: contentHeight,
     animation: resolvedAnimation,
     watermark,
-    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth14(text, fontSize), height: fontSize }))
+    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth15(text, fontSize), height: fontSize }))
   };
 }
-function emptyLayout2(chrome, theme, options, watermark) {
+function emptyLayout3(chrome, theme, options, watermark) {
   return {
     area: { x: 0, y: 0, width: 0, height: 0 },
     chrome,
@@ -11521,7 +12025,7 @@ function emptyLayout2(chrome, theme, options, watermark) {
     height: options.height,
     watermark,
     animation: void 0,
-    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth14(text, fontSize), height: fontSize }))
+    measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth15(text, fontSize), height: fontSize }))
   };
 }
 
@@ -11529,7 +12033,7 @@ function emptyLayout2(chrome, theme, options, watermark) {
 import {
   buildTemporalFormatter as buildTemporalFormatter2,
   formatDate as formatDate3,
-  formatNumber as formatNumber6,
+  formatNumber as formatNumber7,
   getRepresentativeColor as getRepresentativeColor10
 } from "@opendata-ai/openchart-core";
 function formatValue(value2, fieldType, format2) {
@@ -11544,18 +12048,20 @@ function formatValue(value2, fieldType, format2) {
       try {
         return format(format2)(value2);
       } catch {
-        return formatNumber6(value2);
+        return formatNumber7(value2);
       }
     }
-    return formatNumber6(value2);
+    return formatNumber7(value2);
   }
   return String(value2);
 }
 function resolveLabel(ch) {
-  return ch.title ?? ch.axis?.title ?? ch.field;
+  const ax = ch.axis || void 0;
+  return ch.title ?? ax?.title ?? ch.field;
 }
 function resolveFormat(ch) {
-  return ch.format ?? ch.axis?.format;
+  const ax = ch.axis || void 0;
+  return ch.format ?? ax?.format;
 }
 function buildExplicitTooltipFields(row, channels) {
   return channels.map((ch) => ({
@@ -12412,9 +12918,9 @@ function compileChart(spec, options) {
     chartSpec = { ...chartSpec, watermark: false };
   }
   const mergedThemeConfig = options.theme ? { ...chartSpec.theme, ...options.theme } : chartSpec.theme;
-  let theme = resolveTheme4(mergedThemeConfig);
+  let theme = resolveTheme5(mergedThemeConfig);
   if (options.darkMode) {
-    theme = adaptTheme4(theme);
+    theme = adaptTheme5(theme);
   }
   const preliminaryArea = {
     x: 0,
@@ -12600,7 +13106,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
     let maxWidth = 0;
     for (const row of data) {
       const label = String(row[yField] ?? "");
-      const w = estimateTextWidth15(label, baseFontSize, 400);
+      const w = estimateTextWidth16(label, baseFontSize, 400);
       if (w > maxWidth) maxWidth = w;
     }
     return maxWidth > 0 ? maxWidth + 10 : 40;
@@ -12629,7 +13135,7 @@ function estimateYAxisLabelWidth(data, encoding, baseFontSize) {
   }
   const hasNeg = data.some((r) => Number(r[yField]) < 0);
   const labelEst = (hasNeg ? "-" : "") + sampleLabel;
-  return estimateTextWidth15(labelEst, baseFontSize, 400) + 10;
+  return estimateTextWidth16(labelEst, baseFontSize, 400) + 10;
 }
 function compileLayerIndependent(leaves, layerSpec, options) {
   if (leaves.length > 2) {
@@ -12646,10 +13152,11 @@ function compileLayerIndependent(leaves, layerSpec, options) {
       `Dual-axis charts require matching x-field types across layers. Layer 0 has '${xType0}', layer 1 has '${xType1}'.`
     );
   }
-  const theme = resolveTheme4(layerSpec.theme ?? leaf1.theme);
+  const theme = resolveTheme5(layerSpec.theme ?? leaf1.theme);
   const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
   const rightAxisWidth = estimateYAxisLabelWidth(leaf1.data, leaf1.encoding, axisFontSize);
-  const hasRightAxisTitle = !!leaf1.encoding?.y?.axis?.title;
+  const yAxisConfig = leaf1.encoding?.y?.axis || void 0;
+  const hasRightAxisTitle = !!yAxisConfig?.title;
   const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
   const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
   const axisTitleOffset = getAxisTitleOffset2(options.width);
@@ -12911,9 +13418,9 @@ function compileTable(spec, options) {
   }
   const tableSpec = normalized;
   const mergedThemeConfig = options.theme ? { ...tableSpec.theme, ...options.theme } : tableSpec.theme;
-  let theme = resolveTheme4(mergedThemeConfig);
+  let theme = resolveTheme5(mergedThemeConfig);
   if (options.darkMode) {
-    theme = adaptTheme4(theme);
+    theme = adaptTheme5(theme);
   }
   const rawWatermark = spec.watermark;
   const watermark = rawWatermark !== void 0 ? tableSpec.watermark : options.watermark ?? true;
@@ -12928,10 +13435,14 @@ function compileSankey2(spec, options) {
 function compileTileMap2(spec, options) {
   return compileTileMap(spec, options);
 }
+function compileBarList2(spec, options) {
+  return compileBarList(spec, options);
+}
 export {
   clampStaggerDelay,
   clearRenderers,
   compile,
+  compileBarList2 as compileBarList,
   compileChart,
   compileGraph2 as compileGraph,
   compileLayer,