@opendata-ai/openchart-engine 6.0.0 → 6.1.0

package/dist/index.js

@@ -503,11 +503,79 @@ function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, o
 // src/charts/bar/compute.ts
 import { abbreviateNumber, formatNumber } from "@opendata-ai/openchart-core";
 
+// src/transforms/predicates.ts
+function isFieldPredicate(pred) {
+  return "field" in pred;
+}
+function evaluateFieldPredicate(datum, pred) {
+  const value = datum[pred.field];
+  if (pred.valid !== void 0) {
+    const isValid = value !== null && value !== void 0 && !Number.isNaN(value);
+    return pred.valid ? isValid : !isValid;
+  }
+  if (pred.equal !== void 0) {
+    return value === pred.equal;
+  }
+  const numValue = Number(value);
+  if (pred.lt !== void 0) {
+    return numValue < pred.lt;
+  }
+  if (pred.lte !== void 0) {
+    return numValue <= pred.lte;
+  }
+  if (pred.gt !== void 0) {
+    return numValue > pred.gt;
+  }
+  if (pred.gte !== void 0) {
+    return numValue >= pred.gte;
+  }
+  if (pred.range !== void 0) {
+    const [min3, max3] = pred.range;
+    return numValue >= min3 && numValue <= max3;
+  }
+  if (pred.oneOf !== void 0) {
+    return pred.oneOf.includes(value);
+  }
+  return true;
+}
+function evaluatePredicate(datum, predicate) {
+  if (isFieldPredicate(predicate)) {
+    return evaluateFieldPredicate(datum, predicate);
+  }
+  if ("and" in predicate) {
+    return predicate.and.every((p) => evaluatePredicate(datum, p));
+  }
+  if ("or" in predicate) {
+    return predicate.or.some((p) => evaluatePredicate(datum, p));
+  }
+  if ("not" in predicate) {
+    return !evaluatePredicate(datum, predicate.not);
+  }
+  return true;
+}
+
+// src/transforms/conditional.ts
+function resolveConditionalValue(datum, channelDef) {
+  const conditions = Array.isArray(channelDef.condition) ? channelDef.condition : [channelDef.condition];
+  for (const cond of conditions) {
+    if (evaluatePredicate(datum, cond.test)) {
+      if (cond.field !== void 0) {
+        return datum[cond.field];
+      }
+      return cond.value;
+    }
+  }
+  return channelDef.value;
+}
+function isConditionalValueDef(def) {
+  return def !== null && typeof def === "object" && "condition" in def;
+}
+
 // src/charts/utils.ts
 var DEFAULT_COLOR = "#1b7fa3";
 function scaleValue(scale, scaleType, value) {
   if (value == null) return null;
-  if (scaleType === "time") {
+  if (scaleType === "time" || scaleType === "utc") {
     const date2 = value instanceof Date ? value : new Date(String(value));
     if (Number.isNaN(date2.getTime())) return null;
     return scale(date2);
@@ -596,8 +664,10 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
   }
   const bandwidth = yScale.bandwidth();
   const baseline = xScale(0);
-  const colorField = encoding.color?.field;
-  const isSequentialColor = encoding.color?.type === "quantitative";
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const conditionalColor = encoding.color && isConditionalValueDef(encoding.color) ? encoding.color : void 0;
+  const colorField = colorEnc?.field;
+  const isSequentialColor = colorEnc?.type === "quantitative";
   if (!colorField || isSequentialColor) {
     return computeSimpleBars(
       spec.data,
@@ -608,7 +678,8 @@ function computeBarMarks(spec, scales, _chartArea, _strategy) {
       bandwidth,
       baseline,
       scales,
-      isSequentialColor
+      isSequentialColor,
+      conditionalColor
     );
   }
   return computeStackedBars(
@@ -657,7 +728,7 @@ function computeStackedBars(data, valueField, categoryField, colorField, xScale,
   }
   return marks;
 }
-function computeSimpleBars(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false) {
+function computeSimpleBars(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false, conditionalColor) {
   const marks = [];
   for (const row of data) {
     const category = String(row[categoryField] ?? "");
@@ -665,7 +736,16 @@ function computeSimpleBars(data, valueField, categoryField, xScale, yScale, band
     if (!Number.isFinite(value)) continue;
     const bandY = yScale(category);
     if (bandY === void 0) continue;
-    const color2 = sequentialColor ? getSequentialColor(scales, value) : getColor(scales, "__default__");
+    let color2;
+    if (conditionalColor) {
+      color2 = String(
+        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, "__default__")
+      );
+    } else if (sequentialColor) {
+      color2 = getSequentialColor(scales, value);
+    } else {
+      color2 = getColor(scales, "__default__");
+    }
     const xPos = value >= 0 ? baseline : xScale(value);
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
     const aria = {
@@ -794,8 +874,10 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
   }
   const bandwidth = xScale.bandwidth();
   const baseline = yScale(0);
-  const colorField = encoding.color?.field;
-  const isSequentialColor = encoding.color?.type === "quantitative";
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const conditionalColor = encoding.color && isConditionalValueDef(encoding.color) ? encoding.color : void 0;
+  const colorField = colorEnc?.field;
+  const isSequentialColor = colorEnc?.type === "quantitative";
   if (colorField && !isSequentialColor) {
     const categoryGroups = groupByField(spec.data, xChannel.field);
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
@@ -833,10 +915,11 @@ function computeColumnMarks(spec, scales, _chartArea, _strategy) {
     bandwidth,
     baseline,
     scales,
-    isSequentialColor
+    isSequentialColor,
+    conditionalColor
   );
 }
-function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false) {
+function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false, conditionalColor) {
   const marks = [];
   for (const row of data) {
     const category = String(row[categoryField] ?? "");
@@ -844,7 +927,16 @@ function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, b
     if (!Number.isFinite(value)) continue;
     const bandX = xScale(category);
     if (bandX === void 0) continue;
-    const color2 = sequentialColor ? getSequentialColor(scales, value) : getColor(scales, "__default__");
+    let color2;
+    if (conditionalColor) {
+      color2 = String(
+        resolveConditionalValue(row, conditionalColor) ?? getColor(scales, "__default__")
+      );
+    } else if (sequentialColor) {
+      color2 = getSequentialColor(scales, value);
+    } else {
+      color2 = getColor(scales, "__default__");
+    }
     const yPos = yScale(value);
     const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
     const y2 = value >= 0 ? yPos : baseline;
@@ -1019,7 +1111,9 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
   }
   const bandwidth = yScale.bandwidth();
   const baseline = xScale(0);
-  const colorField = encoding.color?.field;
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const isSequentialColor = colorEnc?.type === "quantitative";
+  const colorField = isSequentialColor ? void 0 : colorEnc?.field;
   if (colorField) {
     return computeDumbbellMarks(
       spec.data,
@@ -1040,7 +1134,8 @@ function computeDotMarks(spec, scales, _chartArea, _strategy) {
     yScale,
     bandwidth,
     baseline,
-    scales
+    scales,
+    isSequentialColor
   );
 }
 function computeDumbbellMarks(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, scales) {
@@ -1100,7 +1195,7 @@ function computeDumbbellMarks(data, valueField, categoryField, colorField, xScal
   }
   return marks;
 }
-function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales) {
+function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, isSequentialColor = false) {
   const marks = [];
   for (const row of data) {
     const category = String(row[categoryField] ?? "");
@@ -1110,7 +1205,7 @@ function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, b
     if (bandY === void 0) continue;
     const cx = xScale(value);
     const cy = bandY + bandwidth / 2;
-    const color2 = getColor(scales, "__default__");
+    const color2 = isSequentialColor ? getSequentialColor(scales, value) : getColor(scales, "__default__");
     const stemX = Math.min(baseline, cx);
     const stemWidth = Math.abs(cx - baseline);
     if (stemWidth > 0) {
@@ -1694,6 +1789,139 @@ function pie_default() {
   return pie;
 }
 
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/curve/basis.js
+function point(that, x2, y2) {
+  that._context.bezierCurveTo(
+    (2 * that._x0 + that._x1) / 3,
+    (2 * that._y0 + that._y1) / 3,
+    (that._x0 + 2 * that._x1) / 3,
+    (that._y0 + 2 * that._y1) / 3,
+    (that._x0 + 4 * that._x1 + x2) / 6,
+    (that._y0 + 4 * that._y1 + y2) / 6
+  );
+}
+function Basis(context) {
+  this._context = context;
+}
+Basis.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._y0 = this._y1 = NaN;
+    this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 3:
+        point(this, this._x1, this._y1);
+      // falls through
+      case 2:
+        this._context.lineTo(this._x1, this._y1);
+        break;
+    }
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3;
+        this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6);
+      // falls through
+      default:
+        point(this, x2, y2);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = x2;
+    this._y0 = this._y1, this._y1 = y2;
+  }
+};
+function basis_default(context) {
+  return new Basis(context);
+}
+
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/curve/cardinal.js
+function point2(that, x2, y2) {
+  that._context.bezierCurveTo(
+    that._x1 + that._k * (that._x2 - that._x0),
+    that._y1 + that._k * (that._y2 - that._y0),
+    that._x2 + that._k * (that._x1 - x2),
+    that._y2 + that._k * (that._y1 - y2),
+    that._x2,
+    that._y2
+  );
+}
+function Cardinal(context, tension) {
+  this._context = context;
+  this._k = (1 - tension) / 6;
+}
+Cardinal.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x0 = this._x1 = this._x2 = this._y0 = this._y1 = this._y2 = NaN;
+    this._point = 0;
+  },
+  lineEnd: function() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x2, this._y2);
+        break;
+      case 3:
+        point2(this, this._x1, this._y1);
+        break;
+    }
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+        this._x1 = x2, this._y1 = y2;
+        break;
+      case 2:
+        this._point = 3;
+      // falls through
+      default:
+        point2(this, x2, y2);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = this._x2, this._x2 = x2;
+    this._y0 = this._y1, this._y1 = this._y2, this._y2 = y2;
+  }
+};
+var cardinal_default = (function custom(tension) {
+  function cardinal(context) {
+    return new Cardinal(context, tension);
+  }
+  cardinal.tension = function(tension2) {
+    return custom(+tension2);
+  };
+  return cardinal;
+})(0);
+
 // ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/curve/monotone.js
 function sign(x2) {
   return x2 < 0 ? -1 : 1;
@@ -1706,7 +1934,7 @@ function slope2(that, t) {
   var h = that._x1 - that._x0;
   return h ? (3 * (that._y1 - that._y0) / h - t) / 2 : t;
 }
-function point(that, t02, t12) {
+function point3(that, t02, t12) {
   var x0 = that._x0, y0 = that._y0, x1 = that._x1, y1 = that._y1, dx = (x1 - x0) / 3;
   that._context.bezierCurveTo(x0 + dx, y0 + dx * t02, x1 - dx, y1 - dx * t12, x1, y1);
 }
@@ -1730,7 +1958,7 @@ MonotoneX.prototype = {
         this._context.lineTo(this._x1, this._y1);
         break;
       case 3:
-        point(this, this._t0, slope2(this, this._t0));
+        point3(this, this._t0, slope2(this, this._t0));
         break;
     }
     if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
@@ -1750,10 +1978,10 @@ MonotoneX.prototype = {
         break;
       case 2:
         this._point = 3;
-        point(this, slope2(this, t12 = slope3(this, x2, y2)), t12);
+        point3(this, slope2(this, t12 = slope3(this, x2, y2)), t12);
         break;
       default:
-        point(this, this._t0, t12 = slope3(this, x2, y2));
+        point3(this, this._t0, t12 = slope3(this, x2, y2));
         break;
     }
     this._x0 = this._x1, this._x1 = x2;
@@ -1788,6 +2016,115 @@ function monotoneX(context) {
   return new MonotoneX(context);
 }
 
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/curve/natural.js
+function Natural(context) {
+  this._context = context;
+}
+Natural.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x = [];
+    this._y = [];
+  },
+  lineEnd: function() {
+    var x2 = this._x, y2 = this._y, n = x2.length;
+    if (n) {
+      this._line ? this._context.lineTo(x2[0], y2[0]) : this._context.moveTo(x2[0], y2[0]);
+      if (n === 2) {
+        this._context.lineTo(x2[1], y2[1]);
+      } else {
+        var px = controlPoints(x2), py = controlPoints(y2);
+        for (var i0 = 0, i1 = 1; i1 < n; ++i0, ++i1) {
+          this._context.bezierCurveTo(px[0][i0], py[0][i0], px[1][i0], py[1][i0], x2[i1], y2[i1]);
+        }
+      }
+    }
+    if (this._line || this._line !== 0 && n === 1) this._context.closePath();
+    this._line = 1 - this._line;
+    this._x = this._y = null;
+  },
+  point: function(x2, y2) {
+    this._x.push(+x2);
+    this._y.push(+y2);
+  }
+};
+function controlPoints(x2) {
+  var i, n = x2.length - 1, m, a = new Array(n), b = new Array(n), r = new Array(n);
+  a[0] = 0, b[0] = 2, r[0] = x2[0] + 2 * x2[1];
+  for (i = 1; i < n - 1; ++i) a[i] = 1, b[i] = 4, r[i] = 4 * x2[i] + 2 * x2[i + 1];
+  a[n - 1] = 2, b[n - 1] = 7, r[n - 1] = 8 * x2[n - 1] + x2[n];
+  for (i = 1; i < n; ++i) m = a[i] / b[i - 1], b[i] -= m, r[i] -= m * r[i - 1];
+  a[n - 1] = r[n - 1] / b[n - 1];
+  for (i = n - 2; i >= 0; --i) a[i] = (r[i] - a[i + 1]) / b[i];
+  b[n - 1] = (x2[n] + a[n - 1]) / 2;
+  for (i = 0; i < n - 1; ++i) b[i] = 2 * x2[i + 1] - a[i + 1];
+  return [a, b];
+}
+function natural_default(context) {
+  return new Natural(context);
+}
+
+// ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/curve/step.js
+function Step(context, t) {
+  this._context = context;
+  this._t = t;
+}
+Step.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._x = this._y = NaN;
+    this._point = 0;
+  },
+  lineEnd: function() {
+    if (0 < this._t && this._t < 1 && this._point === 2) this._context.lineTo(this._x, this._y);
+    if (this._line || this._line !== 0 && this._point === 1) this._context.closePath();
+    if (this._line >= 0) this._t = 1 - this._t, this._line = 1 - this._line;
+  },
+  point: function(x2, y2) {
+    x2 = +x2, y2 = +y2;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x2, y2) : this._context.moveTo(x2, y2);
+        break;
+      case 1:
+        this._point = 2;
+      // falls through
+      default: {
+        if (this._t <= 0) {
+          this._context.lineTo(this._x, y2);
+          this._context.lineTo(x2, y2);
+        } else {
+          var x1 = this._x * (1 - this._t) + x2 * this._t;
+          this._context.lineTo(x1, this._y);
+          this._context.lineTo(x1, y2);
+        }
+        break;
+      }
+    }
+    this._x = x2, this._y = y2;
+  }
+};
+function step_default(context) {
+  return new Step(context, 0.5);
+}
+function stepBefore(context) {
+  return new Step(context, 0);
+}
+function stepAfter(context) {
+  return new Step(context, 1);
+}
+
 // ../../node_modules/.bun/d3-shape@3.2.0/node_modules/d3-shape/src/offset/none.js
 function none_default(series, order) {
   if (!((n = series.length) > 1)) return;
@@ -1845,6 +2182,22 @@ function stack_default() {
   return stack;
 }
 
+// src/charts/line/curves.ts
+var CURVE_MAP = {
+  linear: linear_default,
+  monotone: monotoneX,
+  step: step_default,
+  "step-before": stepBefore,
+  "step-after": stepAfter,
+  basis: basis_default,
+  cardinal: cardinal_default,
+  natural: natural_default
+};
+function resolveCurve(interpolate) {
+  if (!interpolate) return monotoneX;
+  return CURVE_MAP[interpolate] ?? monotoneX;
+}
+
 // src/charts/line/area.ts
 var DEFAULT_FILL_OPACITY = 0.15;
 function computeSingleArea(spec, scales, _chartArea) {
@@ -1855,7 +2208,7 @@ function computeSingleArea(spec, scales, _chartArea) {
   const yScale = scales.y.scale;
   const domain = yScale.domain();
   const baselineY = yScale(Math.min(domain[0], domain[1]));
-  const colorField = encoding.color?.field;
+  const colorField = encoding.color && "field" in encoding.color ? encoding.color.field : void 0;
   const groups = /* @__PURE__ */ new Map();
   if (!colorField) {
     groups.set("__default__", spec.data);
@@ -1887,9 +2240,10 @@ function computeSingleArea(spec, scales, _chartArea) {
       });
     }
     if (validPoints.length === 0) continue;
-    const areaGenerator = area_default().x((d) => d.x).y0((d) => d.yBottom).y1((d) => d.yTop).curve(monotoneX);
+    const curve = resolveCurve(spec.markDef.interpolate);
+    const areaGenerator = area_default().x((d) => d.x).y0((d) => d.yBottom).y1((d) => d.yTop).curve(curve);
     const pathStr = areaGenerator(validPoints) ?? "";
-    const topLineGenerator = line_default().x((d) => d.x).y((d) => d.yTop).curve(monotoneX);
+    const topLineGenerator = line_default().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 }));
@@ -1907,6 +2261,7 @@ function computeSingleArea(spec, scales, _chartArea) {
       strokeWidth: 2,
       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 })),
       aria
     });
   }
@@ -1916,7 +2271,7 @@ function computeStackedArea(spec, scales, chartArea) {
   const encoding = spec.encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
-  const colorField = encoding.color?.field;
+  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);
   }
@@ -1970,9 +2325,10 @@ function computeStackedArea(spec, scales, chartArea) {
       validPoints.push({ x: xVal, yTop, yBottom });
     }
     if (validPoints.length === 0) continue;
-    const areaGenerator = area_default().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(monotoneX);
+    const stackCurve = resolveCurve(spec.markDef.interpolate);
+    const areaGenerator = area_default().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(stackCurve);
     const pathStr = areaGenerator(validPoints) ?? "";
-    const topLineGenerator = line_default().x((p) => p.x).y((p) => p.yTop).curve(monotoneX);
+    const topLineGenerator = line_default().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 }));
@@ -1995,6 +2351,11 @@ function computeStackedArea(spec, scales, chartArea) {
         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
     });
   }
@@ -2019,11 +2380,14 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
   if (!xChannel || !yChannel || !scales.x || !scales.y) {
     return [];
   }
-  const colorField = encoding.color?.field;
+  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 groups = groupByField(spec.data, colorField);
   const marks = [];
   for (const [seriesKey, rows] of groups) {
-    const color2 = getColor(scales, seriesKey);
+    const color2 = isSequentialColor ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField)) : getColor(scales, seriesKey);
     const sortedRows = sortByField(rows, xChannel.field);
     const pointsWithData = [];
     const segments = [];
@@ -2038,14 +2402,15 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
         }
         continue;
       }
-      const point3 = { x: xVal, y: yVal };
-      currentSegment.push(point3);
-      pointsWithData.push({ ...point3, row });
+      const point5 = { x: xVal, y: yVal };
+      currentSegment.push(point5);
+      pointsWithData.push({ ...point5, row });
     }
     if (currentSegment.length > 0) {
       segments.push(currentSegment);
     }
-    const lineGenerator = line_default().x((d) => d.x).y((d) => d.y).curve(monotoneX);
+    const curve = resolveCurve(spec.markDef.interpolate);
+    const lineGenerator = line_default().x((d) => d.x).y((d) => d.y).curve(curve);
     const allPoints = [];
     const pathParts = [];
     for (const segment of segments) {
@@ -2077,31 +2442,49 @@ function computeLineMarks(spec, scales, _chartArea, _strategy) {
       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
     };
     marks.push(lineMark);
-    const showPoints = styleOverride?.showPoints !== false;
-    for (let i = 0; i < pointsWithData.length; i++) {
-      const p = pointsWithData[i];
-      const pointMark = {
-        type: "point",
-        cx: p.x,
-        cy: p.y,
-        r: showPoints ? DEFAULT_POINT_RADIUS : 0,
-        fill: color2,
-        stroke: showPoints ? "#ffffff" : "transparent",
-        strokeWidth: showPoints ? 1.5 : 0,
-        fillOpacity: 0,
-        data: p.row,
-        aria: {
-          label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`
+    const markPoint = spec.markDef.point;
+    const showPoints = markPoint === true || markPoint === "transparent" || isSequentialColor;
+    if (showPoints) {
+      const isTransparent = markPoint === "transparent";
+      const seriesShowPoints = styleOverride?.showPoints !== false;
+      for (let i = 0; i < pointsWithData.length; i++) {
+        const p = pointsWithData[i];
+        const visible = seriesShowPoints && !isTransparent;
+        let pointColor = color2;
+        if (isSequentialColor) {
+          const val = Number(p.row[sequentialColorField]);
+          pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color2;
         }
-      };
-      marks.push(pointMark);
+        const pointMark = {
+          type: "point",
+          cx: p.x,
+          cy: p.y,
+          r: visible ? DEFAULT_POINT_RADIUS : 0,
+          fill: pointColor,
+          stroke: 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])}`
+          }
+        };
+        marks.push(pointMark);
+      }
     }
   }
   return marks;
 }
+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/labels.ts
 import { estimateTextWidth as estimateTextWidth5, resolveCollisions as resolveCollisions4 } from "@opendata-ai/openchart-core";
@@ -2207,13 +2590,13 @@ var DEFAULT_PALETTE = [
   "#a88f22",
   "#858078"
 ];
-function groupSmallSlices(slices, threshold) {
+function groupSmallSlices(slices, threshold2) {
   const total = slices.reduce((sum, s) => sum + s.value, 0);
   if (total === 0) return slices;
   const big = [];
   let otherValue = 0;
   for (const slice2 of slices) {
-    if (slice2.value / total < threshold) {
+    if (slice2.value / total < threshold2) {
       otherValue += slice2.value;
     } else {
       big.push(slice2);
@@ -2231,7 +2614,7 @@ function groupSmallSlices(slices, threshold) {
 function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
   const encoding = spec.encoding;
   const valueChannel = encoding.y ?? encoding.x;
-  const categoryField = encoding.color?.field;
+  const categoryField = encoding.color && "field" in encoding.color ? encoding.color.field : void 0;
   if (!valueChannel) return [];
   let slices = [];
   if (categoryField) {
@@ -2419,6 +2802,75 @@ function clearRenderers() {
   renderers.clear();
 }
 
+// src/charts/rule/index.ts
+function computeRuleMarks(spec, scales, chartArea) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  const x2Channel = encoding.x2;
+  const y2Channel = encoding.y2;
+  const colorEncoding = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const colorField = colorEncoding?.field;
+  const marks = [];
+  for (const row of spec.data) {
+    let x1 = chartArea.x;
+    let y1 = chartArea.y;
+    let x2 = chartArea.x + chartArea.width;
+    let y2 = chartArea.y + chartArea.height;
+    if (xChannel && scales.x) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      if (xVal == null) continue;
+      x1 = xVal;
+      x2 = xVal;
+    }
+    if (yChannel && scales.y) {
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (yVal == null) continue;
+      y1 = yVal;
+      y2 = yVal;
+    }
+    if (xChannel && !yChannel) {
+      y1 = chartArea.y;
+      y2 = chartArea.y + chartArea.height;
+    }
+    if (yChannel && !xChannel) {
+      x1 = chartArea.x;
+      x2 = chartArea.x + chartArea.width;
+    }
+    if (x2Channel && scales.x) {
+      const x2Val = scaleValue(scales.x.scale, scales.x.type, row[x2Channel.field]);
+      if (x2Val != null) x2 = x2Val;
+    }
+    if (y2Channel && scales.y) {
+      const y2Val = scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]);
+      if (y2Val != null) y2 = y2Val;
+    }
+    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const strokeDashEncoding = encoding.strokeDash && "field" in encoding.strokeDash ? encoding.strokeDash : void 0;
+    const strokeDasharray = strokeDashEncoding ? String(row[strokeDashEncoding.field] ?? "") : void 0;
+    const aria = {
+      label: `Rule from (${Math.round(x1)}, ${Math.round(y1)}) to (${Math.round(x2)}, ${Math.round(y2)})`
+    };
+    marks.push({
+      type: "rule",
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color2,
+      strokeWidth: 1,
+      strokeDasharray: strokeDasharray || void 0,
+      opacity: encoding.opacity && "field" in encoding.opacity ? Math.max(0, Math.min(1, Number(row[encoding.opacity.field]) || 1)) : void 0,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+var ruleRenderer = (spec, scales, chartArea, _strategy, _theme) => {
+  return computeRuleMarks(spec, scales, chartArea);
+};
+
 // ../../node_modules/.bun/d3-array@3.2.4/node_modules/d3-array/src/ascending.js
 function ascending(a, b) {
   return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -2648,6 +3100,15 @@ function min2(values, valueof) {
   return min3;
 }
 
+// ../../node_modules/.bun/d3-array@3.2.4/node_modules/d3-array/src/quantile.js
+function quantileSorted(values, p, valueof = number) {
+  if (!(n = values.length) || isNaN(p = +p)) return;
+  if (p <= 0 || n < 2) return +valueof(values[0], 0, values);
+  if (p >= 1) return +valueof(values[n - 1], n - 1, values);
+  var n, i = (n - 1) * p, i0 = Math.floor(i), value0 = +valueof(values[i0], i0, values), value1 = +valueof(values[i0 + 1], i0 + 1, values);
+  return value0 + (value1 - value0) * (i - i0);
+}
+
 // ../../node_modules/.bun/d3-array@3.2.4/node_modules/d3-array/src/range.js
 function range(start, stop, step) {
   start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
@@ -2786,7 +3247,7 @@ function pointish(scale) {
   };
   return scale;
 }
-function point2() {
+function point4() {
   return pointish(band.apply(null, arguments).paddingInner(1));
 }
 
@@ -3143,7 +3604,7 @@ function basis(t12, v0, v1, v2, v3) {
   var t2 = t12 * t12, t3 = t2 * t12;
   return ((1 - 3 * t12 + 3 * t2 - t3) * v0 + (4 - 6 * t2 + 3 * t3) * v1 + (1 + 3 * t12 + 3 * t2 - 3 * t3) * v2 + t3 * v3) / 6;
 }
-function basis_default(values) {
+function basis_default2(values) {
   var n = values.length - 1;
   return function(t) {
     var i = t <= 0 ? t = 0 : t >= 1 ? (t = 1, n - 1) : Math.floor(t * n), v1 = values[i], v2 = values[i + 1], v0 = i > 0 ? values[i - 1] : 2 * v1 - v2, v3 = i < n - 1 ? values[i + 2] : 2 * v2 - v1;
@@ -3221,7 +3682,7 @@ function rgbSpline(spline) {
     };
   };
 }
-var rgbBasis = rgbSpline(basis_default);
+var rgbBasis = rgbSpline(basis_default2);
 var rgbBasisClosed = rgbSpline(basisClosed_default);
 
 // ../../node_modules/.bun/d3-interpolate@3.0.1/node_modules/d3-interpolate/src/numberArray.js
@@ -3882,6 +4343,32 @@ function log() {
   return scale;
 }
 
+// ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/symlog.js
+function transformSymlog(c) {
+  return function(x2) {
+    return Math.sign(x2) * Math.log1p(Math.abs(x2 / c));
+  };
+}
+function transformSymexp(c) {
+  return function(x2) {
+    return Math.sign(x2) * Math.expm1(Math.abs(x2)) * c;
+  };
+}
+function symlogish(transform) {
+  var c = 1, scale = transform(transformSymlog(c), transformSymexp(c));
+  scale.constant = function(_) {
+    return arguments.length ? transform(transformSymlog(c = +_), transformSymexp(c)) : c;
+  };
+  return linearish(scale);
+}
+function symlog() {
+  var scale = symlogish(transformer());
+  scale.copy = function() {
+    return copy(scale, symlog()).constant(scale.constant());
+  };
+  return initRange.apply(scale, arguments);
+}
+
 // ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/pow.js
 function transformPow(exponent) {
   return function(x2) {
@@ -3902,18 +4389,118 @@ function powish(transform) {
   scale.exponent = function(_) {
     return arguments.length ? (exponent = +_, rescale()) : exponent;
   };
-  return linearish(scale);
-}
-function pow() {
-  var scale = powish(transformer());
+  return linearish(scale);
+}
+function pow() {
+  var scale = powish(transformer());
+  scale.copy = function() {
+    return copy(scale, pow()).exponent(scale.exponent());
+  };
+  initRange.apply(scale, arguments);
+  return scale;
+}
+function sqrt2() {
+  return pow.apply(null, arguments).exponent(0.5);
+}
+
+// ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/quantile.js
+function quantile2() {
+  var domain = [], range2 = [], thresholds = [], unknown;
+  function rescale() {
+    var i = 0, n = Math.max(1, range2.length);
+    thresholds = new Array(n - 1);
+    while (++i < n) thresholds[i - 1] = quantileSorted(domain, i / n);
+    return scale;
+  }
+  function scale(x2) {
+    return x2 == null || isNaN(x2 = +x2) ? unknown : range2[bisect_default(thresholds, x2)];
+  }
+  scale.invertExtent = function(y2) {
+    var i = range2.indexOf(y2);
+    return i < 0 ? [NaN, NaN] : [
+      i > 0 ? thresholds[i - 1] : domain[0],
+      i < thresholds.length ? thresholds[i] : domain[domain.length - 1]
+    ];
+  };
+  scale.domain = function(_) {
+    if (!arguments.length) return domain.slice();
+    domain = [];
+    for (let d of _) if (d != null && !isNaN(d = +d)) domain.push(d);
+    domain.sort(ascending);
+    return rescale();
+  };
+  scale.range = function(_) {
+    return arguments.length ? (range2 = Array.from(_), rescale()) : range2.slice();
+  };
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
+  };
+  scale.quantiles = function() {
+    return thresholds.slice();
+  };
+  scale.copy = function() {
+    return quantile2().domain(domain).range(range2).unknown(unknown);
+  };
+  return initRange.apply(scale, arguments);
+}
+
+// ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/quantize.js
+function quantize() {
+  var x0 = 0, x1 = 1, n = 1, domain = [0.5], range2 = [0, 1], unknown;
+  function scale(x2) {
+    return x2 != null && x2 <= x2 ? range2[bisect_default(domain, x2, 0, n)] : unknown;
+  }
+  function rescale() {
+    var i = -1;
+    domain = new Array(n);
+    while (++i < n) domain[i] = ((i + 1) * x1 - (i - n) * x0) / (n + 1);
+    return scale;
+  }
+  scale.domain = function(_) {
+    return arguments.length ? ([x0, x1] = _, x0 = +x0, x1 = +x1, rescale()) : [x0, x1];
+  };
+  scale.range = function(_) {
+    return arguments.length ? (n = (range2 = Array.from(_)).length - 1, rescale()) : range2.slice();
+  };
+  scale.invertExtent = function(y2) {
+    var i = range2.indexOf(y2);
+    return i < 0 ? [NaN, NaN] : i < 1 ? [x0, domain[0]] : i >= n ? [domain[n - 1], x1] : [domain[i - 1], domain[i]];
+  };
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : scale;
+  };
+  scale.thresholds = function() {
+    return domain.slice();
+  };
+  scale.copy = function() {
+    return quantize().domain([x0, x1]).range(range2).unknown(unknown);
+  };
+  return initRange.apply(linearish(scale), arguments);
+}
+
+// ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/threshold.js
+function threshold() {
+  var domain = [0.5], range2 = [0, 1], unknown, n = 1;
+  function scale(x2) {
+    return x2 != null && x2 <= x2 ? range2[bisect_default(domain, x2, 0, n)] : unknown;
+  }
+  scale.domain = function(_) {
+    return arguments.length ? (domain = Array.from(_), n = Math.min(domain.length, range2.length - 1), scale) : domain.slice();
+  };
+  scale.range = function(_) {
+    return arguments.length ? (range2 = Array.from(_), n = Math.min(domain.length, range2.length - 1), scale) : range2.slice();
+  };
+  scale.invertExtent = function(y2) {
+    var i = range2.indexOf(y2);
+    return [domain[i - 1], domain[i]];
+  };
+  scale.unknown = function(_) {
+    return arguments.length ? (unknown = _, scale) : unknown;
+  };
   scale.copy = function() {
-    return copy(scale, pow()).exponent(scale.exponent());
+    return threshold().domain(domain).range(range2).unknown(unknown);
   };
-  initRange.apply(scale, arguments);
-  return scale;
-}
-function sqrt2() {
-  return pow.apply(null, arguments).exponent(0.5);
+  return initRange.apply(scale, arguments);
 }
 
 // ../../node_modules/.bun/d3-time@3.1.0/node_modules/d3-time/src/interval.js
@@ -4856,6 +5443,11 @@ function time() {
   return initRange.apply(calendar(timeTicks, timeTickInterval, timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute, second, timeFormat).domain([new Date(2e3, 0, 1), new Date(2e3, 0, 2)]), arguments);
 }
 
+// ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/utcTime.js
+function utcTime() {
+  return initRange.apply(calendar(utcTicks, utcTickInterval, utcYear, utcMonth, utcSunday, utcDay, utcHour, utcMinute, second, utcFormat).domain([Date.UTC(2e3, 0, 1), Date.UTC(2e3, 0, 2)]), arguments);
+}
+
 // ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/sequential.js
 function transformer2() {
   var x0 = 0, x1 = 1, t02, t12, k10, transform, interpolator = identity, clamp = false, unknown;
@@ -4911,8 +5503,10 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy) {
   }
   const xScale = scales.x.scale;
   const yScale = scales.y.scale;
-  const colorField = encoding.color?.field;
-  const sizeField = encoding.size?.field;
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const isSequentialColor = colorEnc?.type === "quantitative";
+  const colorField = colorEnc?.field;
+  const sizeField = encoding.size && "field" in encoding.size ? encoding.size.field : void 0;
   let sizeScale;
   if (sizeField) {
     const sizeValues = spec.data.map((d) => Number(d[sizeField])).filter((v) => Number.isFinite(v));
@@ -4927,8 +5521,14 @@ function computeScatterMarks(spec, scales, _chartArea, _strategy) {
     if (!Number.isFinite(xVal) || !Number.isFinite(yVal)) continue;
     const cx = xScale(xVal);
     const cy = yScale(yVal);
-    const category = colorField ? String(row[colorField] ?? "") : void 0;
-    const color2 = getColor(scales, category ?? "__default__");
+    const category = colorField && !isSequentialColor ? String(row[colorField] ?? "") : void 0;
+    let color2;
+    if (isSequentialColor && colorField) {
+      const val = Number(row[colorField]);
+      color2 = Number.isFinite(val) ? getSequentialColor(scales, val) : getColor(scales, "__default__");
+    } else {
+      color2 = getColor(scales, category ?? "__default__");
+    }
     let radius = DEFAULT_POINT_RADIUS2;
     if (sizeScale && sizeField) {
       const sizeVal = Number(row[sizeField]);
@@ -5025,8 +5625,104 @@ var scatterRenderer = (spec, scales, chartArea, strategy, _theme) => {
   return marks;
 };
 
+// src/charts/text/index.ts
+function computeTextMarks(spec, scales) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  const textChannel = encoding.text;
+  if (!textChannel || !("field" in textChannel)) return [];
+  const marks = [];
+  const colorEncoding = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const colorField = colorEncoding?.field;
+  const sizeEncoding = encoding.size && "field" in encoding.size ? encoding.size : void 0;
+  for (const row of spec.data) {
+    let x2 = 0;
+    if (xChannel && scales.x) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      if (xVal == null) continue;
+      x2 = xVal;
+    }
+    let y2 = 0;
+    if (yChannel && scales.y) {
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (yVal == null) continue;
+      y2 = yVal;
+    }
+    const text = String(row[textChannel.field] ?? "");
+    if (!text) continue;
+    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const fontSize = sizeEncoding ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12)) : 12;
+    const aria = {
+      label: text
+    };
+    marks.push({
+      type: "textMark",
+      x: x2,
+      y: y2,
+      text,
+      fill: color2,
+      fontSize,
+      textAnchor: "middle",
+      angle: encoding.angle && "field" in encoding.angle ? Number(row[encoding.angle.field]) || 0 : void 0,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+var textRenderer = (spec, scales, _chartArea, _strategy, _theme) => {
+  return computeTextMarks(spec, scales);
+};
+
+// src/charts/tick/index.ts
+var DEFAULT_TICK_LENGTH = 18;
+function computeTickMarks(spec, scales, _chartArea) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) return [];
+  const colorEncoding = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  const colorField = colorEncoding?.field;
+  const marks = [];
+  const isHorizontal = xChannel.type === "quantitative" && yChannel.type !== "quantitative";
+  const orient = isHorizontal ? "horizontal" : "vertical";
+  for (const row of spec.data) {
+    const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+    const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+    if (xVal == null || yVal == null) continue;
+    const color2 = colorField ? getColor(scales, String(row[colorField] ?? "__default__")) : getColor(scales, "__default__");
+    const aria = {
+      label: `${row[xChannel.field]}, ${row[yChannel.field]}`
+    };
+    marks.push({
+      type: "tick",
+      x: xVal,
+      y: yVal,
+      length: DEFAULT_TICK_LENGTH,
+      orient,
+      stroke: color2,
+      strokeWidth: 1,
+      opacity: encoding.opacity && "field" in encoding.opacity ? Math.max(0, Math.min(1, Number(row[encoding.opacity.field]) || 1)) : void 0,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+var tickRenderer = (spec, scales, chartArea, _strategy, _theme) => {
+  return computeTickMarks(spec, scales, chartArea);
+};
+
 // src/compiler/normalize.ts
-import { isChartSpec, isGraphSpec, isTableSpec } from "@opendata-ai/openchart-core";
+import {
+  isChartSpec,
+  isGraphSpec,
+  isLayerSpec,
+  isTableSpec,
+  resolveMarkDef,
+  resolveMarkType
+} from "@opendata-ai/openchart-core";
 function normalizeChromeField(value) {
   if (value === void 0) return void 0;
   if (typeof value === "string") return { text: value };
@@ -5081,6 +5777,7 @@ function inferEncodingTypes(encoding, data, warnings) {
   for (const channel of ["x", "y", "color", "size", "detail"]) {
     const spec = result[channel];
     if (!spec) continue;
+    if ("condition" in spec) continue;
     if (!spec.type) {
       const inferred = inferFieldType(data, spec.field);
       result[channel] = { ...spec, type: inferred };
@@ -5131,8 +5828,11 @@ function normalizeAnnotations(annotations) {
 }
 function normalizeChartSpec(spec, warnings) {
   const encoding = inferEncodingTypes(spec.encoding, spec.data, warnings);
+  const markType = resolveMarkType(spec.mark);
+  const markDef = resolveMarkDef(spec.mark);
   return {
-    type: spec.type,
+    markType,
+    markDef,
     data: spec.data,
     encoding,
     chrome: normalizeChrome(spec.chrome),
@@ -5190,6 +5890,13 @@ function normalizeGraphSpec(spec, _warnings) {
   };
 }
 function normalizeSpec(spec, warnings = []) {
+  if (isLayerSpec(spec)) {
+    const leaves = flattenLayers(spec);
+    if (leaves.length === 0) {
+      throw new Error("LayerSpec has no leaf chart specs after flattening");
+    }
+    return normalizeChartSpec(leaves[0], warnings);
+  }
   if (isChartSpec(spec)) {
     return normalizeChartSpec(spec, warnings);
   }
@@ -5199,13 +5906,37 @@ function normalizeSpec(spec, warnings = []) {
   if (isGraphSpec(spec)) {
     return normalizeGraphSpec(spec, warnings);
   }
-  throw new Error(`Unknown spec type: ${spec.type}`);
+  throw new Error(
+    `Unknown spec shape. Expected mark (chart), layer, type: 'table', or type: 'graph'.`
+  );
+}
+function flattenLayers(spec, parentData, parentEncoding, parentTransforms) {
+  const resolvedData = spec.data ?? parentData;
+  const resolvedEncoding = parentEncoding && spec.encoding ? { ...parentEncoding, ...spec.encoding } : spec.encoding ?? parentEncoding;
+  const resolvedTransforms = [...parentTransforms ?? [], ...spec.transform ?? []];
+  const leaves = [];
+  for (const child of spec.layer) {
+    if (isLayerSpec(child)) {
+      leaves.push(...flattenLayers(child, resolvedData, resolvedEncoding, resolvedTransforms));
+    } else {
+      const mergedData = child.data ?? resolvedData ?? [];
+      const mergedEncoding = resolvedEncoding ? { ...resolvedEncoding, ...child.encoding } : child.encoding;
+      const mergedTransforms = [...resolvedTransforms, ...child.transform ?? []];
+      leaves.push({
+        ...child,
+        data: mergedData,
+        encoding: mergedEncoding,
+        transform: mergedTransforms.length > 0 ? mergedTransforms : void 0
+      });
+    }
+  }
+  return leaves;
 }
 
 // src/compiler/validate.ts
 import {
-  CHART_ENCODING_RULES,
-  CHART_TYPES
+  MARK_ENCODING_RULES,
+  MARK_TYPES
 } from "@opendata-ai/openchart-core";
 var VALID_FIELD_TYPES = /* @__PURE__ */ new Set(["quantitative", "temporal", "nominal", "ordinal"]);
 var VALID_DARK_MODES = /* @__PURE__ */ new Set(["auto", "force", "off"]);
@@ -5227,7 +5958,7 @@ function isNumeric(value) {
   return false;
 }
 function validateChartSpec(spec, errors) {
-  const chartType = spec.type;
+  const markType = typeof spec.mark === "string" ? spec.mark : spec.mark?.type;
   if (!Array.isArray(spec.data)) {
     errors.push({
       message: 'Spec error: "data" must be an array',
@@ -5257,17 +5988,17 @@ function validateChartSpec(spec, errors) {
     return;
   }
   if (!spec.encoding || typeof spec.encoding !== "object") {
-    const rules2 = CHART_ENCODING_RULES[chartType];
+    const rules2 = MARK_ENCODING_RULES[markType];
     const requiredChannels = Object.entries(rules2).filter(([, rule]) => rule.required).map(([ch]) => ch);
     errors.push({
-      message: `Spec error: ${chartType} chart requires an "encoding" object`,
+      message: `Spec error: ${markType} chart requires an "encoding" object`,
       path: "encoding",
       code: "MISSING_FIELD",
       suggestion: `Add an encoding object with required channels: ${requiredChannels.join(", ")}. Example: encoding: { ${requiredChannels.map((ch) => `${ch}: { field: "...", type: "..." }`).join(", ")} }`
     });
     return;
   }
-  const rules = CHART_ENCODING_RULES[chartType];
+  const rules = MARK_ENCODING_RULES[markType];
   const encoding = spec.encoding;
   const dataColumns = new Set(Object.keys(firstRow));
   const availableColumns = [...dataColumns].join(", ");
@@ -5275,17 +6006,29 @@ function validateChartSpec(spec, errors) {
     if (rule.required && !encoding[channel]) {
       const allowedTypes = rule.allowedTypes.join(" or ");
       errors.push({
-        message: `Spec error: ${chartType} chart requires encoding.${channel} but none was provided`,
+        message: `Spec error: ${markType} chart requires encoding.${channel} but none was provided`,
         path: `encoding.${channel}`,
         code: "MISSING_FIELD",
         suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}) and type (${allowedTypes}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${rule.allowedTypes[0]}" }`
       });
     }
   }
+  const transformFields = /* @__PURE__ */ new Set();
+  if (Array.isArray(spec.transform)) {
+    for (const t of spec.transform) {
+      if (typeof t.as === "string") transformFields.add(t.as);
+      if (Array.isArray(t.as)) {
+        for (const f of t.as) {
+          if (typeof f === "string") transformFields.add(f);
+        }
+      }
+    }
+  }
   for (const [channel, channelSpec] of Object.entries(encoding)) {
     if (!channelSpec || typeof channelSpec !== "object") continue;
     const channelObj = channelSpec;
     const channelRule = rules[channel];
+    if ("condition" in channelObj) continue;
     if (!channelObj.field || typeof channelObj.field !== "string") {
       errors.push({
         message: `Spec error: encoding.${channel} must have a "field" string`,
@@ -5295,7 +6038,7 @@ function validateChartSpec(spec, errors) {
       });
       continue;
     }
-    if (!dataColumns.has(channelObj.field)) {
+    if (!dataColumns.has(channelObj.field) && !transformFields.has(channelObj.field)) {
       errors.push({
         message: `Spec error: encoding.${channel}.field "${channelObj.field}" does not exist in data. Available columns: ${availableColumns}`,
         path: `encoding.${channel}.field`,
@@ -5314,7 +6057,7 @@ function validateChartSpec(spec, errors) {
     if (channelRule && channelObj.type && channelRule.allowedTypes.length > 0) {
       if (!channelRule.allowedTypes.includes(channelObj.type)) {
         errors.push({
-          message: `Spec error: encoding.${channel} for ${chartType} chart does not accept type "${channelObj.type}". Allowed types: ${channelRule.allowedTypes.join(", ")}`,
+          message: `Spec error: encoding.${channel} for ${markType} chart does not accept type "${channelObj.type}". Allowed types: ${channelRule.allowedTypes.join(", ")}`,
           path: `encoding.${channel}.type`,
           code: "ENCODING_MISMATCH",
           suggestion: `Change encoding.${channel}.type to one of: ${channelRule.allowedTypes.join(", ")}`
@@ -5592,6 +6335,79 @@ function validateGraphSpec(spec, errors) {
     }
   }
 }
+function validateLayerSpec(spec, errors) {
+  const layer = spec.layer;
+  if (layer.length === 0) {
+    errors.push({
+      message: 'Spec error: "layer" must be a non-empty array',
+      path: "layer",
+      code: "EMPTY_DATA",
+      suggestion: "Add at least one layer with a mark and encoding"
+    });
+    return;
+  }
+  for (let i = 0; i < layer.length; i++) {
+    const child = layer[i];
+    if (!child || typeof child !== "object" || Array.isArray(child)) {
+      errors.push({
+        message: `Spec error: layer[${i}] must be an object`,
+        path: `layer[${i}]`,
+        code: "INVALID_TYPE",
+        suggestion: "Each layer must be a chart spec (with mark) or a nested layer spec (with layer)"
+      });
+      continue;
+    }
+    const childObj = child;
+    const isNestedLayer = "layer" in childObj && Array.isArray(childObj.layer);
+    const isChildChart = "mark" in childObj;
+    if (!isNestedLayer && !isChildChart) {
+      errors.push({
+        message: `Spec error: layer[${i}] must have a "mark" field or a "layer" array`,
+        path: `layer[${i}]`,
+        code: "MISSING_FIELD",
+        suggestion: "Each layer must be a chart spec (with mark + encoding) or a nested layer spec (with layer array)"
+      });
+      continue;
+    }
+    if (isNestedLayer) {
+      validateLayerSpec(childObj, errors);
+    } else if (isChildChart) {
+      const mark = childObj.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)) {
+        errors.push({
+          message: `Spec error: layer[${i}].mark "${markValue ?? String(mark)}" is not a valid mark type`,
+          path: `layer[${i}].mark`,
+          code: "INVALID_VALUE",
+          suggestion: `Change mark to one of: ${[...MARK_TYPES].join(", ")}`
+        });
+        continue;
+      }
+      const hasOwnData = Array.isArray(childObj.data) && childObj.data.length > 0;
+      const parentHasData = Array.isArray(spec.data) && spec.data.length > 0;
+      if (hasOwnData || parentHasData) {
+        const mergedForValidation = { ...childObj };
+        if (!hasOwnData && parentHasData) {
+          mergedForValidation.data = spec.data;
+        }
+        if (spec.encoding && typeof spec.encoding === "object") {
+          mergedForValidation.encoding = {
+            ...spec.encoding,
+            ...childObj.encoding ?? {}
+          };
+        }
+        if (mergedForValidation.data && mergedForValidation.encoding) {
+          validateChartSpec(mergedForValidation, errors);
+        }
+      }
+    }
+  }
+}
 function validateSpec(spec) {
   const errors = [];
   if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
@@ -5601,45 +6417,58 @@ function validateSpec(spec) {
         {
           message: "Spec error: spec must be a non-null object",
           code: "INVALID_TYPE",
-          suggestion: 'Pass a spec object with at least a "type" field, e.g. { type: "line", data: [...], encoding: {...} }'
+          suggestion: 'Pass a spec object with at least a "mark" field for charts, e.g. { mark: "line", data: [...], encoding: {...} }'
         }
       ],
       normalized: null
     };
   }
   const obj = spec;
-  if (!obj.type || typeof obj.type !== "string") {
-    return {
-      valid: false,
-      errors: [
-        {
-          message: 'Spec error: spec must have a "type" field',
-          path: "type",
-          code: "MISSING_FIELD",
-          suggestion: `Add a type field. Valid types: ${[...CHART_TYPES].join(", ")}, table, graph`
-        }
-      ],
-      normalized: null
-    };
-  }
-  const isChart = CHART_TYPES.has(obj.type);
+  const hasLayer = "layer" in obj && Array.isArray(obj.layer);
+  const hasMark = "mark" in obj;
   const isTable = obj.type === "table";
   const isGraph = obj.type === "graph";
-  if (!isChart && !isTable && !isGraph) {
+  const isLayer = hasLayer && !isTable && !isGraph;
+  const isChart = hasMark && !hasLayer && !isTable && !isGraph;
+  if (!isChart && !isTable && !isGraph && !isLayer) {
     return {
       valid: false,
       errors: [
         {
-          message: `Spec error: "${obj.type}" is not a valid type. Valid types: ${[...CHART_TYPES].join(", ")}, table, graph`,
-          path: "type",
-          code: "INVALID_VALUE",
-          suggestion: `Change type to one of: ${[...CHART_TYPES].join(", ")}, table, graph`
+          message: 'Spec error: spec must have a "mark" field for charts, a "layer" array for layered charts, or a "type" field for tables/graphs',
+          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 (type: "table" or type: "graph"). 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);
@@ -5956,9 +6785,9 @@ function buildGraphTooltips(nodes) {
 }
 function compileGraph(spec, options) {
   const { spec: normalized } = compile(spec);
-  if (normalized.type !== "graph") {
+  if (!("type" in normalized) || normalized.type !== "graph") {
     throw new Error(
-      `compileGraph received a ${normalized.type} spec. Use compileChart or compileTable instead.`
+      "compileGraph received a non-graph spec. Use compileChart or compileTable instead."
     );
   }
   const graphSpec = normalized;
@@ -6102,6 +6931,14 @@ function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText) {
 }
 function continuousTicks(resolvedScale, density) {
   const scale = resolvedScale.scale;
+  if (!("ticks" in scale) || typeof scale.ticks !== "function") {
+    const domain = scale.domain();
+    return domain.map((value) => ({
+      value,
+      position: scale(value),
+      label: formatTickLabel(value, resolvedScale)
+    }));
+  }
   const explicitCount = resolvedScale.channel.axis?.tickCount;
   const count = explicitCount ?? TICK_COUNTS[density];
   const rawTicks = scale.ticks(count);
@@ -6133,13 +6970,24 @@ function categoricalTicks(resolvedScale, density) {
   });
   return ticks2;
 }
+var NUMERIC_SCALE_TYPES = /* @__PURE__ */ new Set([
+  "linear",
+  "log",
+  "pow",
+  "sqrt",
+  "symlog",
+  "quantile",
+  "quantize",
+  "threshold"
+]);
+var TEMPORAL_SCALE_TYPES = /* @__PURE__ */ new Set(["time", "utc"]);
 function formatTickLabel(value, resolvedScale) {
   const formatStr = resolvedScale.channel.axis?.format;
-  if (resolvedScale.type === "time") {
+  if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
     if (formatStr) return String(value);
     return formatDate(value);
   }
-  if (resolvedScale.type === "linear" || resolvedScale.type === "log") {
+  if (NUMERIC_SCALE_TYPES.has(resolvedScale.type)) {
     const num = value;
     if (formatStr) {
       const fmt = buildD3Formatter3(formatStr);
@@ -6150,6 +6998,27 @@ function formatTickLabel(value, resolvedScale) {
   }
   return String(value);
 }
+function resolveExplicitTicks(values, resolvedScale) {
+  const scale = resolvedScale.scale;
+  return values.map((value) => {
+    let position;
+    if (TEMPORAL_SCALE_TYPES.has(resolvedScale.type)) {
+      const d = value instanceof Date ? value : new Date(String(value));
+      position = scale(d);
+    } else if (resolvedScale.type === "band" || resolvedScale.type === "point" || resolvedScale.type === "ordinal") {
+      const s = String(value);
+      const bandScale = resolvedScale.type === "band" ? scale : null;
+      position = bandScale ? (bandScale(s) ?? 0) + bandScale.bandwidth() / 2 : scale(s) ?? 0;
+    } else {
+      position = scale(value);
+    }
+    return {
+      value,
+      position,
+      label: formatTickLabel(value, resolvedScale)
+    };
+  });
+}
 function computeAxes(scales, chartArea, strategy, theme, measureText) {
   const result = {};
   const baseDensity = strategy.axisLabelDensity;
@@ -6183,14 +7052,22 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
   const { fontSize } = tickLabelStyle;
   const { fontWeight } = tickLabelStyle;
   if (scales.x) {
-    const allTicks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, xDensity) : continuousTicks(scales.x, xDensity);
+    const axisConfig = scales.x.channel.axis;
+    let allTicks;
+    if (axisConfig?.values) {
+      allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
+    } else if (scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal") {
+      allTicks = categoricalTicks(scales.x, xDensity);
+    } else {
+      allTicks = continuousTicks(scales.x, xDensity);
+    }
     const gridlines = allTicks.map((t) => ({
       position: t.position,
       major: true
     }));
-    const shouldThin = scales.x.type !== "band" && !scales.x.channel.axis?.tickCount;
+    const shouldThin = scales.x.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
-    let tickAngle = scales.x.channel.axis?.tickAngle;
+    let tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
     if (tickAngle === void 0 && scales.x.type === "band" && ticks2.length > 1) {
       const bandwidth = scales.x.scale.bandwidth();
       let maxLabelWidth = 0;
@@ -6202,35 +7079,62 @@ function computeAxes(scales, chartArea, strategy, theme, measureText) {
         tickAngle = -45;
       }
     }
+    const axisTitle = axisConfig?.title ?? axisConfig?.label;
     result.x = {
       ticks: ticks2,
-      gridlines: scales.x.channel.axis?.grid ? gridlines : [],
-      label: scales.x.channel.axis?.label,
+      gridlines: axisConfig?.grid ? gridlines : [],
+      label: axisTitle,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
       tickAngle,
       start: { x: chartArea.x, y: chartArea.y + chartArea.height },
-      end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
+      end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height },
+      orient: axisConfig?.orient,
+      domainLine: axisConfig?.domain,
+      tickMarks: axisConfig?.ticks,
+      offset: axisConfig?.offset,
+      titlePadding: axisConfig?.titlePadding,
+      labelPadding: axisConfig?.labelPadding,
+      labelOverlap: axisConfig?.labelOverlap,
+      labelFlush: axisConfig?.labelFlush
     };
   }
   if (scales.y) {
-    const allTicks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, yDensity) : continuousTicks(scales.y, yDensity);
+    const axisConfig = scales.y.channel.axis;
+    let allTicks;
+    if (axisConfig?.values) {
+      allTicks = resolveExplicitTicks(axisConfig.values, scales.y);
+    } else if (scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal") {
+      allTicks = categoricalTicks(scales.y, yDensity);
+    } else {
+      allTicks = continuousTicks(scales.y, yDensity);
+    }
     const gridlines = allTicks.map((t) => ({
       position: t.position,
       major: true
     }));
-    const shouldThin = scales.y.type !== "band" && !scales.y.channel.axis?.tickCount;
+    const shouldThin = scales.y.type !== "band" && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks2 = shouldThin ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText) : allTicks;
+    const axisTitle = axisConfig?.title ?? axisConfig?.label;
+    const tickAngle = axisConfig?.labelAngle ?? axisConfig?.tickAngle;
     result.y = {
       ticks: ticks2,
       // Y-axis gridlines are shown by default (standard editorial practice)
       gridlines,
-      label: scales.y.channel.axis?.label,
+      label: axisTitle,
       labelStyle: axisLabelStyle,
       tickLabelStyle,
-      tickAngle: scales.y.channel.axis?.tickAngle,
+      tickAngle,
       start: { x: chartArea.x, y: chartArea.y },
-      end: { x: chartArea.x, y: chartArea.y + chartArea.height }
+      end: { x: chartArea.x, y: chartArea.y + chartArea.height },
+      orient: axisConfig?.orient,
+      domainLine: axisConfig?.domain,
+      tickMarks: axisConfig?.ticks,
+      offset: axisConfig?.offset,
+      titlePadding: axisConfig?.titlePadding,
+      labelPadding: axisConfig?.labelPadding,
+      labelOverlap: axisConfig?.labelOverlap,
+      labelFlush: axisConfig?.labelFlush
     };
   }
   return result;
@@ -6270,7 +7174,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
     padding
   );
   const total = { x: 0, y: 0, width, height };
-  const isRadial = spec.type === "pie" || spec.type === "donut";
+  const isRadial = spec.markType === "arc";
   const encoding = spec.encoding;
   const xAxis = encoding.x?.axis;
   const hasXAxisLabel = !!xAxis?.label;
@@ -6295,15 +7199,17 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
   } else {
     xAxisHeight = hasXAxisLabel ? 48 : 26;
   }
+  const topAxisGap = isRadial && chrome.topHeight === 0 ? 0 : axisMargin;
   const margins = {
-    top: padding + chrome.topHeight + axisMargin,
+    top: padding + chrome.topHeight + topAxisGap,
     right: padding + (isRadial ? padding : axisMargin),
     bottom: padding + chrome.bottomHeight + xAxisHeight,
     left: padding + (isRadial ? padding : axisMargin)
   };
   const labelDensity = spec.labels.density;
-  if ((spec.type === "line" || spec.type === "area") && labelDensity !== "none") {
-    const colorField = encoding.color?.field;
+  if ((spec.markType === "line" || spec.markType === "area") && labelDensity !== "none") {
+    const colorEnc = encoding.color;
+    const colorField = colorEnc && "field" in colorEnc ? colorEnc.field : void 0;
     if (colorField) {
       let maxLabelWidth = 0;
       const seen = /* @__PURE__ */ new Set();
@@ -6321,7 +7227,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
     }
   }
   if (encoding.y && !isRadial) {
-    if (spec.type === "bar" || spec.type === "dot" || encoding.y.type === "nominal" || encoding.y.type === "ordinal") {
+    if (spec.markType === "bar" || spec.markType === "circle" || encoding.y.type === "nominal" || encoding.y.type === "ordinal") {
       const yField = encoding.y.field;
       let maxLabelWidth = 0;
       for (const row of spec.data) {
@@ -6385,7 +7291,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy) {
       fallbackMode,
       padding
     );
-    const newTop = padding + fallbackChrome.topHeight + axisMargin;
+    const fallbackTopAxisGap = isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin;
+    const newTop = padding + fallbackChrome.topHeight + fallbackTopAxisGap;
     const topDelta = margins.top - newTop;
     const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
     const bottomDelta = margins.bottom - newBottom;
@@ -6455,6 +7362,15 @@ function uniqueStrings(values) {
   }
   return result;
 }
+function applyContinuousConfig(scale, channel) {
+  if (channel.scale?.clamp) {
+    scale.clamp(true);
+  }
+  if (channel.scale?.reverse) {
+    const [r0, r1] = scale.range();
+    scale.range([r1, r0]);
+  }
+}
 function buildTimeScale(channel, data, rangeStart, rangeEnd) {
   const values = parseDates(fieldValues(data, channel.field));
   const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
@@ -6462,8 +7378,19 @@ function buildTimeScale(channel, data, rangeStart, rangeEnd) {
   if (channel.scale?.nice !== false) {
     scale.nice();
   }
+  applyContinuousConfig(scale, channel);
   return { scale, type: "time", channel };
 }
+function buildUtcScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseDates(fieldValues(data, channel.field));
+  const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
+  const scale = utcTime().domain(domain).range([rangeStart, rangeEnd]);
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "utc", channel };
+}
 function buildLinearScale(channel, data, rangeStart, rangeEnd) {
   const values = parseNumbers(fieldValues(data, channel.field));
   let domainMin;
@@ -6484,23 +7411,141 @@ function buildLinearScale(channel, data, rangeStart, rangeEnd) {
   if (channel.scale?.nice !== false) {
     scale.nice();
   }
+  applyContinuousConfig(scale, channel);
   return { scale, type: "linear", channel };
 }
 function buildLogScale(channel, data, rangeStart, rangeEnd) {
   const values = parseNumbers(fieldValues(data, channel.field)).filter((v) => v > 0);
-  const domainMin = min2(values) ?? 1;
-  const domainMax = max2(values) ?? 10;
-  const scale = log().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]).nice();
+  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 1;
+  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 10;
+  const scale = log().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.base !== void 0) {
+    scale.base(channel.scale.base);
+  }
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
   return { scale, type: "log", channel };
 }
+function buildPowScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = pow().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.exponent !== void 0) {
+    scale.exponent(channel.scale.exponent);
+  }
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "pow", channel };
+}
+function buildSqrtScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = sqrt2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "sqrt", channel };
+}
+function buildSymlogScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = symlog().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.constant !== void 0) {
+    scale.constant(channel.scale.constant);
+  }
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "symlog", channel };
+}
+function buildQuantileScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
+  const scale = quantile2().domain(values).range(range2);
+  return { scale, type: "quantile", channel };
+}
+function buildQuantizeScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 0;
+  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 1;
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
+  const scale = quantize().domain([domainMin, domainMax]).range(range2);
+  return { scale, type: "quantize", channel };
+}
+function buildThresholdScale(channel, _data, rangeStart, rangeEnd) {
+  const domainBreaks = channel.scale?.domain ? channel.scale.domain : [0.5];
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, domainBreaks.length + 1);
+  const scale = threshold().domain(domainBreaks).range(range2);
+  return { scale, type: "threshold", channel };
+}
+function evenRange(start, end, count) {
+  if (count <= 1) return [start];
+  const step = (end - start) / (count - 1);
+  return Array.from({ length: count }, (_, i) => start + step * i);
+}
 function buildBandScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
-  const scale = band().domain(values).range([rangeStart, rangeEnd]).padding(0.35);
+  const padding = channel.scale?.padding ?? 0.35;
+  const scale = band().domain(values).range([rangeStart, rangeEnd]).padding(padding);
+  if (channel.scale?.paddingInner !== void 0) {
+    scale.paddingInner(channel.scale.paddingInner);
+  }
+  if (channel.scale?.paddingOuter !== void 0) {
+    scale.paddingOuter(channel.scale.paddingOuter);
+  }
+  if (channel.scale?.reverse) {
+    const [r0, r1] = scale.range();
+    scale.range([r1, r0]);
+  }
   return { scale, type: "band", channel };
 }
 function buildPointScale(channel, data, rangeStart, rangeEnd) {
   const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
-  const scale = point2().domain(values).range([rangeStart, rangeEnd]).padding(0.5);
+  const padding = channel.scale?.padding ?? 0.5;
+  const scale = point4().domain(values).range([rangeStart, rangeEnd]).padding(padding);
+  if (channel.scale?.reverse) {
+    const [r0, r1] = scale.range();
+    scale.range([r1, r0]);
+  }
   return { scale, type: "point", channel };
 }
 function buildOrdinalColorScale(channel, data, palette) {
@@ -6520,10 +7565,24 @@ function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, ax
     switch (channel.scale.type) {
       case "time":
         return buildTimeScale(channel, data, rangeStart, rangeEnd);
+      case "utc":
+        return buildUtcScale(channel, data, rangeStart, rangeEnd);
       case "linear":
         return buildLinearScale(channel, data, rangeStart, rangeEnd);
       case "log":
         return buildLogScale(channel, data, rangeStart, rangeEnd);
+      case "pow":
+        return buildPowScale(channel, data, rangeStart, rangeEnd);
+      case "sqrt":
+        return buildSqrtScale(channel, data, rangeStart, rangeEnd);
+      case "symlog":
+        return buildSymlogScale(channel, data, rangeStart, rangeEnd);
+      case "quantile":
+        return buildQuantileScale(channel, data, rangeStart, rangeEnd);
+      case "quantize":
+        return buildQuantizeScale(channel, data, rangeStart, rangeEnd);
+      case "threshold":
+        return buildThresholdScale(channel, data, rangeStart, rangeEnd);
       case "band":
         return buildBandScale(channel, data, rangeStart, rangeEnd);
       case "point":
@@ -6539,7 +7598,7 @@ function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, ax
       return buildLinearScale(channel, data, rangeStart, rangeEnd);
     case "nominal":
     case "ordinal":
-      if (chartType === "bar" && axis === "y" || chartType === "column" && axis === "x" || chartType === "dot" && axis === "y") {
+      if (chartType === "bar" || chartType === "circle" && axis === "y") {
         return buildBandScale(channel, data, rangeStart, rangeEnd);
       }
       return buildPointScale(channel, data, rangeStart, rangeEnd);
@@ -6550,7 +7609,7 @@ function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, ax
 function computeScales(spec, chartArea, data) {
   const result = {};
   const encoding = spec.encoding;
-  if (spec.type === "scatter") {
+  if (spec.markType === "point") {
     if (encoding.x?.type === "quantitative" && encoding.x.scale?.zero === void 0) {
       if (!encoding.x.scale) {
         encoding.x.scale = { zero: false };
@@ -6568,7 +7627,7 @@ function computeScales(spec, chartArea, data) {
   }
   if (encoding.x) {
     let xData = data;
-    if (spec.type === "bar" && encoding.color && encoding.x.type === "quantitative") {
+    if (spec.markType === "bar" && encoding.color && encoding.x.type === "quantitative") {
       const yField = encoding.y?.field;
       const xField = encoding.x.field;
       if (yField) {
@@ -6589,13 +7648,14 @@ function computeScales(spec, chartArea, data) {
       xData,
       chartArea.x,
       chartArea.x + chartArea.width,
-      spec.type,
+      spec.markType,
       "x"
     );
   }
   if (encoding.y) {
     let yData = data;
-    if ((spec.type === "column" || spec.type === "area") && encoding.color && encoding.y.type === "quantitative") {
+    const isVerticalBar = spec.markType === "bar" && (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") && encoding.y.type === "quantitative";
+    if ((isVerticalBar || spec.markType === "area") && encoding.color && encoding.y.type === "quantitative") {
       const xField = encoding.x?.field;
       const yField = encoding.y.field;
       if (xField) {
@@ -6616,7 +7676,7 @@ function computeScales(spec, chartArea, data) {
       yData,
       chartArea.y + chartArea.height,
       chartArea.y,
-      spec.type,
+      spec.markType,
       "y"
     );
   }
@@ -6633,10 +7693,12 @@ function computeScales(spec, chartArea, data) {
       "#a88f22",
       "#858078"
     ];
-    if (encoding.color.type === "quantitative") {
-      result.color = buildSequentialColorScale(encoding.color, data, defaultPalette);
-    } else {
-      result.color = buildOrdinalColorScale(encoding.color, data, defaultPalette);
+    if ("field" in encoding.color) {
+      if (encoding.color.type === "quantitative") {
+        result.color = buildSequentialColorScale(encoding.color, data, defaultPalette);
+      } else {
+        result.color = buildOrdinalColorScale(encoding.color, data, defaultPalette);
+      }
     }
   }
   return result;
@@ -6651,12 +7713,12 @@ var LEGEND_PADDING = 8;
 var LEGEND_RIGHT_WIDTH = 120;
 var RIGHT_LEGEND_MAX_HEIGHT_RATIO = 0.4;
 var TOP_LEGEND_MAX_ROWS = 2;
-function swatchShapeForType(chartType) {
-  switch (chartType) {
+function swatchShapeForType(markType) {
+  switch (markType) {
     case "line":
       return "line";
-    case "scatter":
-    case "dot":
+    case "point":
+    case "circle":
       return "circle";
     default:
       return "square";
@@ -6665,10 +7727,11 @@ function swatchShapeForType(chartType) {
 function extractColorEntries(spec, theme) {
   const colorEnc = spec.encoding.color;
   if (!colorEnc) return [];
+  if ("condition" in colorEnc) return [];
   if (colorEnc.type === "quantitative") return [];
   const uniqueValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
   const palette = theme.colors.categorical;
-  const shape = swatchShapeForType(spec.type);
+  const shape = swatchShapeForType(spec.markType);
   return uniqueValues.map((value, i) => ({
     label: value,
     color: palette[i % palette.length],
@@ -7492,7 +8555,7 @@ function buildFields(row, encoding, color2) {
       value: formatValue(row[encoding.x.field], encoding.x.type, encoding.x.axis?.format)
     });
   }
-  if (encoding.size) {
+  if (encoding.size && "field" in encoding.size) {
     fields.push({
       label: encoding.size.axis?.label ?? encoding.size.field,
       value: formatValue(row[encoding.size.field], encoding.size.type, encoding.size.axis?.format)
@@ -7513,12 +8576,20 @@ function getTooltipTitle(row, encoding) {
   if (encoding.y?.type === "nominal" || encoding.y?.type === "ordinal") {
     return String(row[encoding.y.field] ?? "");
   }
-  if (encoding.color) {
+  if (encoding.color && "field" in encoding.color) {
     return String(row[encoding.color.field] ?? "");
   }
   return void 0;
 }
-function tooltipsForLine(_mark, _encoding, _markIndex) {
+function tooltipsForLine(mark, encoding, _markIndex) {
+  if (mark.dataPoints) {
+    for (const dp of mark.dataPoints) {
+      dp.tooltip = {
+        title: getTooltipTitle(dp.datum, encoding),
+        fields: buildFields(dp.datum, encoding, mark.stroke)
+      };
+    }
+  }
   return [];
 }
 function tooltipsForPoint(mark, encoding, markIndex) {
@@ -7534,8 +8605,9 @@ function tooltipsForRect(mark, encoding, markIndex) {
 function tooltipsForArc(mark, encoding, markIndex) {
   const row = mark.data;
   const fields = [];
-  if (encoding.color) {
-    const categoryName = String(row[encoding.color.field] ?? "");
+  const colorEnc = encoding.color && "field" in encoding.color ? encoding.color : void 0;
+  if (colorEnc) {
+    const categoryName = String(row[colorEnc.field] ?? "");
     if (encoding.y) {
       fields.push({
         label: categoryName,
@@ -7550,10 +8622,18 @@ function tooltipsForArc(mark, encoding, markIndex) {
       color: mark.fill
     });
   }
-  const title = encoding.color ? String(row[encoding.color.field] ?? "") : void 0;
+  const title = colorEnc ? String(row[colorEnc.field] ?? "") : void 0;
   return [[`arc-${markIndex}`, { title, fields }]];
 }
-function tooltipsForArea(_mark, _encoding, _markIndex) {
+function tooltipsForArea(mark, encoding, _markIndex) {
+  if (mark.dataPoints) {
+    for (const dp of mark.dataPoints) {
+      dp.tooltip = {
+        title: getTooltipTitle(dp.datum, encoding),
+        fields: buildFields(dp.datum, encoding, mark.fill)
+      };
+    }
+  }
   return [];
 }
 function computeTooltipDescriptors(spec, marks) {
@@ -7586,16 +8666,205 @@ function computeTooltipDescriptors(spec, marks) {
   return descriptors;
 }
 
+// src/transforms/bin.ts
+function computeStep(extent2, maxbins, nice2) {
+  const span = extent2[1] - extent2[0];
+  if (span === 0) return 1;
+  let step = span / maxbins;
+  if (nice2) {
+    const magnitude = 10 ** Math.floor(Math.log10(step));
+    const residual = step / magnitude;
+    if (residual <= 1.5) {
+      step = magnitude;
+    } else if (residual <= 3.5) {
+      step = 2 * magnitude;
+    } else if (residual <= 7.5) {
+      step = 5 * magnitude;
+    } else {
+      step = 10 * magnitude;
+    }
+  }
+  return step;
+}
+function runBin(data, transform) {
+  const params = transform.bin === true ? {} : transform.bin;
+  const maxbins = params.maxbins ?? 10;
+  const nice2 = params.nice ?? true;
+  const field = transform.field;
+  let extent2 = params.extent;
+  if (!extent2) {
+    let min3 = Infinity;
+    let max3 = -Infinity;
+    for (const row of data) {
+      const v = Number(row[field]);
+      if (Number.isFinite(v)) {
+        if (v < min3) min3 = v;
+        if (v > max3) max3 = v;
+      }
+    }
+    extent2 = [min3 === Infinity ? 0 : min3, max3 === -Infinity ? 0 : max3];
+  }
+  const step = params.step ?? computeStep(extent2, maxbins, nice2);
+  const [startAs, endAs] = Array.isArray(transform.as) ? transform.as : [transform.as, void 0];
+  return data.map((row) => {
+    const v = Number(row[field]);
+    const newRow = { ...row };
+    if (!Number.isFinite(v)) {
+      newRow[startAs] = null;
+      if (endAs) newRow[endAs] = null;
+    } else {
+      const binStart = Math.floor((v - extent2[0]) / step) * step + extent2[0];
+      newRow[startAs] = binStart;
+      if (endAs) newRow[endAs] = binStart + step;
+    }
+    return newRow;
+  });
+}
+
+// src/transforms/calculate.ts
+function evaluateExpression(datum, expr) {
+  const fieldValue = Number(datum[expr.field]);
+  switch (expr.op) {
+    case "abs":
+      return Math.abs(fieldValue);
+    case "round":
+      return Math.round(fieldValue);
+    case "floor":
+      return Math.floor(fieldValue);
+    case "ceil":
+      return Math.ceil(fieldValue);
+    case "log":
+      return Math.log(fieldValue);
+    case "sqrt":
+      return Math.sqrt(fieldValue);
+  }
+  const operand = expr.field2 !== void 0 ? Number(datum[expr.field2]) : expr.value ?? 0;
+  switch (expr.op) {
+    case "+":
+      return fieldValue + operand;
+    case "-":
+      return fieldValue - operand;
+    case "*":
+      return fieldValue * operand;
+    case "/":
+      return operand === 0 ? NaN : fieldValue / operand;
+  }
+}
+function runCalculate(data, transform) {
+  return data.map((row) => ({
+    ...row,
+    [transform.as]: evaluateExpression(row, transform.calculate)
+  }));
+}
+
+// src/transforms/filter.ts
+function runFilter(data, predicate) {
+  return data.filter((datum) => evaluatePredicate(datum, predicate));
+}
+
+// src/transforms/timeunit.ts
+function extractTimeUnit(date2, unit2) {
+  switch (unit2) {
+    case "year":
+      return date2.getFullYear();
+    case "quarter":
+      return Math.floor(date2.getMonth() / 3) + 1;
+    case "month":
+      return date2.getMonth();
+    // 0-indexed like JS Date
+    case "week": {
+      const d = new Date(date2.getTime());
+      d.setHours(0, 0, 0, 0);
+      d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
+      const yearStart = new Date(d.getFullYear(), 0, 1);
+      return Math.ceil(((d.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+    }
+    case "day":
+      return date2.getDay();
+    // 0 = Sunday
+    case "dayofyear": {
+      const start = new Date(date2.getFullYear(), 0, 0);
+      const diff = date2.getTime() - start.getTime();
+      return Math.floor(diff / 864e5);
+    }
+    case "date":
+      return date2.getDate();
+    // 1-31
+    case "hours":
+      return date2.getHours();
+    case "minutes":
+      return date2.getMinutes();
+    case "seconds":
+      return date2.getSeconds();
+    case "milliseconds":
+      return date2.getMilliseconds();
+    // Compound units
+    case "yearmonth":
+      return `${date2.getFullYear()}-${String(date2.getMonth() + 1).padStart(2, "0")}`;
+    case "yearmonthdate":
+      return `${date2.getFullYear()}-${String(date2.getMonth() + 1).padStart(2, "0")}-${String(date2.getDate()).padStart(2, "0")}`;
+    case "monthdate":
+      return `${String(date2.getMonth() + 1).padStart(2, "0")}-${String(date2.getDate()).padStart(2, "0")}`;
+    case "hoursminutes":
+      return `${String(date2.getHours()).padStart(2, "0")}:${String(date2.getMinutes()).padStart(2, "0")}`;
+  }
+}
+function toDate(value) {
+  if (value instanceof Date) return value;
+  if (typeof value === "string" || typeof value === "number") {
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  return null;
+}
+function runTimeUnit(data, transform) {
+  return data.map((row) => {
+    const date2 = toDate(row[transform.field]);
+    return {
+      ...row,
+      [transform.as]: date2 ? extractTimeUnit(date2, transform.timeUnit) : null
+    };
+  });
+}
+
+// src/transforms/index.ts
+function runTransforms(data, transforms) {
+  let result = data;
+  for (const transform of transforms) {
+    if ("filter" in transform) {
+      result = runFilter(result, transform.filter);
+    } else if ("bin" in transform) {
+      result = runBin(result, transform);
+    } else if ("calculate" in transform) {
+      result = runCalculate(result, transform);
+    } else if ("timeUnit" in transform) {
+      result = runTimeUnit(result, transform);
+    }
+  }
+  return result;
+}
+
 // src/compile.ts
 var builtinRenderers = {
   line: lineRenderer,
   area: areaRenderer,
   bar: barRenderer,
-  column: columnRenderer,
-  scatter: scatterRenderer,
-  pie: pieRenderer,
-  donut: donutRenderer,
-  dot: dotRenderer
+  // horizontal bars
+  "bar:vertical": columnRenderer,
+  // vertical bars (old 'column')
+  point: scatterRenderer,
+  // old 'scatter'
+  arc: pieRenderer,
+  // old 'pie' (donut handled via innerRadius)
+  "arc:donut": donutRenderer,
+  // old 'donut'
+  circle: dotRenderer,
+  // old 'dot'
+  text: textRenderer,
+  rule: ruleRenderer,
+  tick: tickRenderer,
+  rect: columnRenderer
+  // rect uses column renderer (RectMark output) as baseline for heatmaps
 };
 for (const [type, renderer] of Object.entries(builtinRenderers)) {
   registerChartRenderer(type, renderer);
@@ -7665,13 +8934,17 @@ function computeBandRowObstacles(marks, scales) {
 }
 function compileChart(spec, options) {
   const { spec: normalized } = compile(spec);
-  if (normalized.type === "table") {
+  if ("type" in normalized && normalized.type === "table") {
     throw new Error("compileChart received a table spec. Use compileTable instead.");
   }
-  if (normalized.type === "graph") {
+  if ("type" in normalized && normalized.type === "graph") {
     throw new Error("compileChart received a graph spec. Use compileGraph instead.");
   }
   let chartSpec = normalized;
+  const rawTransforms = spec.transform;
+  if (rawTransforms && rawTransforms.length > 0) {
+    chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
+  }
   const breakpoint = getBreakpoint(options.width);
   const heightClass = getHeightClass(options.height);
   const strategy = getLayoutStrategy(breakpoint, heightClass);
@@ -7745,7 +9018,7 @@ function compileChart(spec, options) {
   }
   const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea);
   let renderData = chartSpec.data;
-  if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color) {
+  if (chartSpec.hiddenSeries.length > 0 && chartSpec.encoding.color && "field" in chartSpec.encoding.color) {
     const colorField = chartSpec.encoding.color.field;
     const hiddenSet = new Set(chartSpec.hiddenSeries);
     renderData = renderData.filter((row) => !hiddenSet.has(String(row[colorField])));
@@ -7779,12 +9052,26 @@ function compileChart(spec, options) {
     }
   }
   scales.defaultColor = theme.colors.categorical[0];
-  const isRadial = chartSpec.type === "pie" || chartSpec.type === "donut";
+  const isRadial = chartSpec.markType === "arc";
   const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme, options.measureText);
   if (!isRadial) {
     computeGridlines(axes, chartArea);
   }
-  const renderer = getChartRenderer(renderSpec.type);
+  let rendererKey = renderSpec.markType;
+  if (rendererKey === "bar") {
+    const xType = renderSpec.encoding.x?.type;
+    const yType = renderSpec.encoding.y?.type;
+    const isVertical = (xType === "nominal" || xType === "ordinal" || xType === "temporal") && yType === "quantitative";
+    if (isVertical) {
+      rendererKey = "bar:vertical";
+    }
+  } else if (rendererKey === "arc") {
+    const innerRadius = renderSpec.markDef.innerRadius;
+    if (innerRadius && innerRadius > 0) {
+      rendererKey = "arc:donut";
+    }
+  }
+  const renderer = getChartRenderer(rendererKey);
   const marks = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
   const obstacles = [];
   if (finalLegend.bounds.width > 0) {
@@ -7792,7 +9079,7 @@ function compileChart(spec, options) {
   }
   obstacles.push(...computeMarkObstacles(marks, scales));
   for (const mark of marks) {
-    if (mark.type !== "area" && mark.label?.visible) {
+    if ("label" in mark && mark.label?.visible) {
       obstacles.push(computeLabelBounds(mark.label));
     }
   }
@@ -7813,7 +9100,7 @@ function compileChart(spec, options) {
   const tooltipDescriptors = computeTooltipDescriptors(chartSpec, marks);
   const altText = generateAltText(
     {
-      type: chartSpec.type,
+      mark: chartSpec.markType,
       data: chartSpec.data,
       encoding: chartSpec.encoding,
       chrome: chartSpec.chrome
@@ -7822,7 +9109,7 @@ function compileChart(spec, options) {
   );
   const dataTableFallback = generateDataTable(
     {
-      type: chartSpec.type,
+      mark: chartSpec.markType,
       data: chartSpec.data,
       encoding: chartSpec.encoding
     },
@@ -7852,10 +9139,63 @@ function compileChart(spec, options) {
     }
   };
 }
+function compileLayer(spec, options) {
+  const leaves = flattenLayers(spec);
+  if (leaves.length === 0) {
+    throw new Error("LayerSpec has no leaf chart specs after flattening");
+  }
+  if (leaves.length === 1) {
+    const singleSpec = buildPrimarySpec(leaves, spec);
+    return compileChart(singleSpec, options);
+  }
+  const primarySpec = buildPrimarySpec(leaves, spec);
+  const primaryLayout = compileChart(primarySpec, options);
+  const allMarks = [];
+  const seenLabels = /* @__PURE__ */ new Set();
+  const mergedLegendEntries = [...primaryLayout.legend.entries];
+  for (const entry of mergedLegendEntries) {
+    seenLabels.add(entry.label);
+  }
+  for (const leaf of leaves) {
+    const leafLayout = compileChart(leaf, options);
+    allMarks.push(...leafLayout.marks);
+    for (const entry of leafLayout.legend.entries) {
+      if (!seenLabels.has(entry.label)) {
+        seenLabels.add(entry.label);
+        mergedLegendEntries.push(entry);
+      }
+    }
+  }
+  return {
+    ...primaryLayout,
+    marks: allMarks,
+    legend: {
+      ...primaryLayout.legend,
+      entries: mergedLegendEntries
+    }
+  };
+}
+function buildPrimarySpec(leaves, layerSpec) {
+  const allData = leaves.flatMap((leaf) => leaf.data);
+  const primary = {
+    ...leaves[0],
+    data: allData,
+    // Layer-level chrome overrides leaf chrome
+    chrome: layerSpec.chrome ?? leaves[0].chrome,
+    labels: layerSpec.labels ?? leaves[0].labels,
+    legend: layerSpec.legend ?? leaves[0].legend,
+    responsive: layerSpec.responsive ?? leaves[0].responsive,
+    theme: layerSpec.theme ?? leaves[0].theme,
+    darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
+    hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries
+  };
+  return primary;
+}
 function compileTable(spec, options) {
   const { spec: normalized } = compile(spec);
-  if (normalized.type !== "table") {
-    throw new Error(`compileTable received a ${normalized.type} spec. Use compileChart instead.`);
+  const normType = "type" in normalized ? normalized.type : void 0;
+  if (normType !== "table") {
+    throw new Error(`compileTable received a non-table spec. Use compileChart instead.`);
   }
   const tableSpec = normalized;
   const mergedThemeConfig = options.theme ? { ...tableSpec.theme, ...options.theme } : tableSpec.theme;
@@ -7873,10 +9213,19 @@ export {
   compile,
   compileChart,
   compileGraph2 as compileGraph,
+  compileLayer,
   compileTable,
+  evaluatePredicate,
   getChartRenderer,
+  isConditionalValueDef,
   normalizeSpec,
   registerChartRenderer,
+  resolveConditionalValue,
+  runBin,
+  runCalculate,
+  runFilter,
+  runTimeUnit,
+  runTransforms,
   validateSpec
 };
 //# sourceMappingURL=index.js.map