graphein 0.5.0 → 0.7.0

package/dist/index.js

@@ -456,6 +456,10 @@ function logScale(opts) {
     map(value) {
       const [d0, d1] = transformedDomain;
       const [r0, r1] = range;
+      if (!Number.isFinite(value) || value * sign2 <= 0) return NaN;
+      if (d0 === d1) {
+        return clamp11 ? clampValue2(r0, Math.min(r0, r1), Math.max(r0, r1)) : r0;
+      }
       const transformed = transform(value, sign2, base);
       const mapped = r0 + (transformed - d0) / (d1 - d0) * (r1 - r0);
       return clamp11 ? clampValue2(mapped, Math.min(r0, r1), Math.max(r0, r1)) : mapped;
@@ -463,6 +467,7 @@ function logScale(opts) {
     invert(pixel) {
       const [d0, d1] = transformedDomain;
       const [r0, r1] = range;
+      if (d0 === d1) return domain[0];
       const input = clamp11 ? clampValue2(pixel, Math.min(r0, r1), Math.max(r0, r1)) : pixel;
       return untransform(d0 + (input - r0) / (r1 - r0) * (d1 - d0), sign2, base);
     },
@@ -1938,6 +1943,10 @@ var SI_SYMBOLS = [
 function groupThousands(intDigits) {
   return intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+function clampDigits(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.trunc(value)));
+}
 function applyGroup(numStr, group) {
   if (!group) return numStr;
   const neg = numStr.startsWith("-");
@@ -1957,11 +1966,11 @@ function formatSI(value, precision) {
     if (abs >= factor) {
       const scaled = value / factor;
       const digits2 = precision ?? (Math.abs(scaled) >= 100 ? 0 : Math.abs(scaled) >= 10 ? 1 : 2);
-      return trimZeros(scaled.toFixed(digits2)) + symbol;
+      return trimZeros(scaled.toFixed(clampDigits(digits2, 0, 100))) + symbol;
     }
   }
   const digits = precision ?? (abs >= 100 || abs === 0 ? 0 : abs >= 1 ? 1 : 2);
-  return trimZeros(value.toFixed(digits));
+  return trimZeros(value.toFixed(clampDigits(digits, 0, 100)));
 }
 function formatNumber2(value, spec) {
   if (value == null || Number.isNaN(value)) return "";
@@ -1971,10 +1980,10 @@ function formatNumber2(value, spec) {
   let body;
   switch (type) {
     case "f":
-      body = applyGroup(value.toFixed(precision ?? 2), group);
+      body = applyGroup(value.toFixed(clampDigits(precision ?? 2, 0, 100)), group);
       break;
     case "%":
-      body = applyGroup((value * 100).toFixed(precision ?? 0), group) + "%";
+      body = applyGroup((value * 100).toFixed(clampDigits(precision ?? 0, 0, 100)), group) + "%";
       break;
     case "s":
       body = formatSI(value, precision);
@@ -1983,17 +1992,17 @@ function formatNumber2(value, spec) {
       body = applyGroup(Math.round(value).toString(), group);
       break;
     case "e":
-      body = value.toExponential(precision ?? 2);
+      body = value.toExponential(clampDigits(precision ?? 2, 0, 100));
       break;
     case "g":
-      body = trimZeros(Number(value.toPrecision(precision ?? 6)).toString());
+      body = trimZeros(Number(value.toPrecision(clampDigits(precision ?? 6, 1, 100))).toString());
       body = applyGroup(body, group);
       break;
     default: {
       if (Number.isInteger(value)) {
         body = applyGroup(value.toString(), group);
       } else {
-        const digits = precision ?? 6;
+        const digits = clampDigits(precision ?? 6, 0, 100);
         body = applyGroup(trimZeros(value.toFixed(digits)), group);
       }
     }
@@ -2122,7 +2131,13 @@ function toNumber(value) {
   }
   return NaN;
 }
+var ISO_YEAR_RE = /^(\d{4})$/;
 var ISO_DATE_RE = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/;
+var ISO_DATETIME_RE = /^(\d{4})-(\d{2})-(\d{2})[T ]\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?(?:Z|[+-]\d{2}:?\d{2})?$/;
+function isLocalCalendarDate(year, month, day) {
+  const d = new Date(year, month - 1, day);
+  return d.getFullYear() === year && d.getMonth() === month - 1 && d.getDate() === day;
+}
 function toDate(value) {
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
   if (typeof value === "number") {
@@ -2130,8 +2145,20 @@ function toDate(value) {
     return Number.isNaN(d.getTime()) ? null : d;
   }
   if (typeof value === "string") {
+    const y = ISO_YEAR_RE.exec(value);
+    if (y) {
+      const d = new Date(Date.parse(value));
+      return d.getUTCFullYear() === +y[1] && d.getUTCMonth() === 0 && d.getUTCDate() === 1 ? d : null;
+    }
     const m = ISO_DATE_RE.exec(value);
-    if (m) return new Date(+m[1], +m[2] - 1, m[3] ? +m[3] : 1);
+    if (m) {
+      const year = +m[1];
+      const month = +m[2];
+      const day = m[3] ? +m[3] : 1;
+      return isLocalCalendarDate(year, month, day) ? new Date(year, month - 1, day) : null;
+    }
+    const dt = ISO_DATETIME_RE.exec(value);
+    if (dt && !isLocalCalendarDate(+dt[1], +dt[2], +dt[3])) return null;
     const ms = Date.parse(value);
     return Number.isNaN(ms) ? null : new Date(ms);
   }
@@ -2527,7 +2554,7 @@ function coerceFinite(value) {
   if (value === null || value === void 0) {
     return null;
   }
-  const numberValue = Number(value);
+  const numberValue = toNumber(value);
   return Number.isFinite(numberValue) ? numberValue : null;
 }
 function makePathKey(path) {
@@ -3561,7 +3588,7 @@ function computeBins(values, opts = {}) {
     [min, max] = opts.extent;
   } else {
     for (const v of values) {
-      if (Number.isNaN(v)) continue;
+      if (!Number.isFinite(v)) continue;
       if (v < min) min = v;
       if (v > max) max = v;
     }
@@ -3585,7 +3612,7 @@ function applyBin(transform2, data) {
   const finite4 = [];
   for (const row of data) {
     const n = toNumber(read(row));
-    if (!Number.isNaN(n)) finite4.push(n);
+    if (Number.isFinite(n)) finite4.push(n);
   }
   const layout2 = computeBins(finite4, {
     maxbins: transform2.maxbins,
@@ -3599,7 +3626,7 @@ function applyBin(transform2, data) {
     const out = { ...row };
     const v = toNumber(read(row));
     const outside = transform2.extent != null && (v < transform2.extent[0] || v > transform2.extent[1]);
-    if (layout2 == null || Number.isNaN(v) || outside) {
+    if (layout2 == null || !Number.isFinite(v) || outside) {
       out[startField] = null;
       if (endField) out[endField] = null;
       return out;
@@ -4646,6 +4673,26 @@ function validateSpec(spec) {
       }
     }
   }
+  if (isObject3(spec.encoding)) {
+    for (const ch of ["x", "y"]) {
+      const channel = spec.encoding[ch];
+      if (!isObject3(channel) || !isObject3(channel.scale)) continue;
+      const scale = channel.scale;
+      if (scale.type !== "log") continue;
+      const domain = scale.domain;
+      if (Array.isArray(domain) && domain.some((v) => typeof v === "number" && v <= 0)) {
+        warn(
+          `encoding.${ch}.scale.domain`,
+          'A "log" scale needs a strictly positive domain; values <= 0 have no logarithm. The domain will be clamped to the positive data range.',
+          {
+            rule: "log-scale-nonpositive-domain",
+            severity: "warning",
+            fix: [{ op: "remove", path: toPointer(`encoding.${ch}.scale.domain`) }]
+          }
+        );
+      }
+    }
+  }
   if (type === "kpi") {
     const value = spec.value;
     if (value === void 0) {
@@ -6277,6 +6324,21 @@ function stackedYExtent(rows, xField, yField) {
   for (const v of neg.values()) if (v < min) min = v;
   return [min, max];
 }
+function positiveLogDomain(requested, data, field, base) {
+  let lo = requested[0];
+  let hi = requested[1];
+  if (!(lo > 0) || !(hi > 0)) {
+    const read = accessor(field);
+    const positives = data.map((d) => toNumber(read(d))).filter((v) => Number.isFinite(v) && v > 0);
+    const pmin = positives.length ? Math.min(...positives) : 1;
+    const pmax = positives.length ? Math.max(...positives) : base;
+    if (!(lo > 0)) lo = pmin;
+    if (!(hi > 0)) hi = pmax;
+  }
+  if (hi < lo) [lo, hi] = [hi, lo];
+  if (lo === hi) hi = lo * base;
+  return [lo, hi];
+}
 function resolveSeriesField(spec) {
   const enc = spec.encoding;
   if (enc.series?.field) return enc.series.field;
@@ -6338,7 +6400,8 @@ function buildCartesianModel(spec, tokens, opts) {
   let categories;
   let xDomainNum = null;
   if (xKind === "band" || xKind === "point") {
-    categories = opts.shared?.categories ?? uniqueStrings(data, xField);
+    const cfgDomain = enc.x.scale?.domain;
+    categories = opts.shared?.categories ?? (Array.isArray(cfgDomain) && typeof cfgDomain[0] === "string" ? cfgDomain : uniqueStrings(data, xField));
   } else if (xKind === "time") {
     if (opts.shared?.xDomain) {
       xDomainNum = opts.shared.xDomain;
@@ -6351,12 +6414,23 @@ function buildCartesianModel(spec, tokens, opts) {
   } else {
     xDomainNum = extent(data, xField) ?? [0, 1];
     const xScaleCfg = enc.x.scale;
-    if (xScaleCfg?.domain && typeof xScaleCfg.domain[0] === "number") {
+    if (xScaleCfg?.type === "log") {
+      xDomainNum = positiveLogDomain(
+        xScaleCfg.domain && typeof xScaleCfg.domain[0] === "number" ? [xScaleCfg.domain[0], xScaleCfg.domain[1]] : xDomainNum,
+        data,
+        xField,
+        xScaleCfg.base ?? 10
+      );
+    } else if (xScaleCfg?.domain && typeof xScaleCfg.domain[0] === "number") {
       xDomainNum = [xScaleCfg.domain[0], xScaleCfg.domain[1]];
     } else if (xScaleCfg?.nice !== false) {
       xDomainNum = niceDomain(xDomainNum[0], xDomainNum[1], 10);
     }
   }
+  const yScaleCfg = enc.y.scale;
+  const yIsLog = yScaleCfg?.type === "log";
+  const yBase = yScaleCfg?.base ?? 10;
+  const yClamp = yScaleCfg?.clamp === true;
   const sharedY = opts.shared?.yDomain;
   let yDomain;
   if (sharedY) {
@@ -6367,24 +6441,39 @@ function buildCartesianModel(spec, tokens, opts) {
     const ext = extent(data, yField) ?? [0, 1];
     yDomain = [ext[0], ext[1]];
   }
-  if (wantsZeroBaseline(spec) && !sharedY) {
+  const forceZero = yIsLog ? false : yScaleCfg?.zero ?? wantsZeroBaseline(spec);
+  if (forceZero && !sharedY) {
     yDomain = [Math.min(0, yDomain[0]), Math.max(0, yDomain[1])];
   }
-  const yScaleCfg = enc.y.scale;
   const xAxisCfg = axisCfg(spec, "x");
   const yAxisCfg = axisCfg(spec, "y");
   const yTickCount = yAxisCfg.ticks ?? 6;
+  const yExplicitTicks = yAxisCfg.tickValues && yAxisCfg.tickValues.length ? yAxisCfg.tickValues.slice() : null;
   const yExplicit = yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number" || !!sharedY;
   let yTickValues;
-  if (yExplicit) {
+  if (yIsLog) {
+    if (yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number") {
+      yDomain = positiveLogDomain([yScaleCfg.domain[0], yScaleCfg.domain[1]], data, yField, yBase);
+    } else if (!sharedY) {
+      yDomain = positiveLogDomain(yDomain, data, yField, yBase);
+    }
+    const lo = Math.min(yDomain[0], yDomain[1]);
+    const hi = Math.max(yDomain[0], yDomain[1]);
+    yTickValues = (yExplicitTicks ?? logScale({ domain: yDomain, range: [0, 1], base: yBase }).ticks()).filter(
+      (v) => v > 0 && v >= lo - 1e-9 && v <= hi + 1e-9
+    );
+  } else if (yExplicit) {
     if (yScaleCfg?.domain && typeof yScaleCfg.domain[0] === "number") {
       yDomain = [yScaleCfg.domain[0], yScaleCfg.domain[1]];
     }
     const lo = Math.min(yDomain[0], yDomain[1]);
     const hi = Math.max(yDomain[0], yDomain[1]);
-    yTickValues = numericTickValues(yDomain[0], yDomain[1], yTickCount).filter(
+    yTickValues = (yExplicitTicks ?? numericTickValues(yDomain[0], yDomain[1], yTickCount)).filter(
       (v) => v >= lo - 1e-9 && v <= hi + 1e-9
     );
+  } else if (yExplicitTicks) {
+    yTickValues = yExplicitTicks;
+    yDomain = [Math.min(yDomain[0], ...yExplicitTicks), Math.max(yDomain[1], ...yExplicitTicks)];
   } else if (yScaleCfg?.nice !== false) {
     yTickValues = numericTickValues(yDomain[0], yDomain[1], yTickCount);
     if (yTickValues.length >= 2) {
@@ -6412,7 +6501,19 @@ function buildCartesianModel(spec, tokens, opts) {
     xStepMs = xt.length > 1 ? xt[1] - xt[0] : 0;
     xLabels = xt.map((v) => enc.x.format ? formatValue(v, enc.x.format) : smartDate(v, xStepMs));
   } else {
-    const xt = numericTickValues(xDomainNum[0], xDomainNum[1], xAxisCfg.ticks ?? 8);
+    const xLo = Math.min(xDomainNum[0], xDomainNum[1]);
+    const xHi = Math.max(xDomainNum[0], xDomainNum[1]);
+    const xExplicitTicks = xAxisCfg.tickValues && xAxisCfg.tickValues.length ? xAxisCfg.tickValues.slice() : null;
+    let xt;
+    if (xExplicitTicks) {
+      xt = xExplicitTicks.filter((v) => v >= xLo - 1e-9 && v <= xHi + 1e-9);
+    } else if (enc.x.scale?.type === "log") {
+      xt = logScale({ domain: xDomainNum, range: [0, 1], base: enc.x.scale.base ?? 10 }).ticks().filter((v) => v > 0 && v >= xLo - 1e-9 && v <= xHi + 1e-9);
+    } else {
+      xt = numericTickValues(xDomainNum[0], xDomainNum[1], xAxisCfg.ticks ?? 8).filter(
+        (v) => v >= xLo - 1e-9 && v <= xHi + 1e-9
+      );
+    }
     xTickValues = xt;
     xLabels = xt.map((v) => formatNumericTick(v, enc.x.format ?? xAxisCfg.format));
   }
@@ -6439,9 +6540,10 @@ function buildCartesianModel(spec, tokens, opts) {
     yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
   });
   const plot = frame.plot;
-  const yScale = linearScale({ domain: yDomain, range: [plot.y + plot.height, plot.y] });
+  const yRange = [plot.y + plot.height, plot.y];
+  const yScale = yIsLog ? logScale({ domain: yDomain, range: yRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: yRange, clamp: yClamp });
   const yPixel = (value) => yScale.map(toNumber(value));
-  const baseline = clampPx(yScale.map(0), plot.y, plot.y + plot.height);
+  const baseline = yIsLog ? plot.y + plot.height : clampPx(yScale.map(0), plot.y, plot.y + plot.height);
   const xModel = buildXModel(xKind, {
     field: xField,
     type: xType,
@@ -6517,7 +6619,8 @@ function buildXModel(kind, args) {
     };
   }
   const domain = args.domainNum ?? [0, 1];
-  const continuous = kind === "time" ? timeScale({ domain, range: args.range }) : linearScale({ domain, range: args.range });
+  const clamp11 = args.scaleCfg?.clamp === true;
+  const continuous = kind === "time" ? timeScale({ domain, range: args.range }) : args.scaleCfg?.type === "log" ? logScale({ domain, range: args.range, base: args.scaleCfg.base ?? 10, clamp: clamp11 }) : linearScale({ domain, range: args.range, clamp: clamp11 });
   return {
     kind,
     field: args.field,
@@ -7231,6 +7334,12 @@ function boxProbe(model, geom) {
   if (model.seriesField) probe[model.seriesField] = geom.seriesValue;
   return probe;
 }
+function hitsBoxGeom(model, geom, showOutliers, px, py) {
+  const inWhiskerExtent = px >= geom.left - 4 && px <= geom.right + 4 && py >= geom.top - 6 && py <= geom.bottom + 6;
+  if (inWhiskerExtent) return true;
+  if (!showOutliers || geom.stats.outliers.length === 0) return false;
+  return geom.stats.outliers.some((o) => Math.abs(px - geom.cx) <= 6 && Math.abs(py - model.y.pixel(o)) <= 6);
+}
 function drawBox(surface, model) {
   const layout2 = computeBoxes(model);
   if (!layout2) return;
@@ -7262,9 +7371,7 @@ function buildBoxInteraction(model) {
   return {
     region: model.plot,
     hitTest: (px, py) => {
-      const hit = geoms.find(
-        (g) => px >= g.left - 4 && px <= g.right + 4 && py >= g.top - 6 && py <= g.bottom + 6
-      );
+      const hit = geoms.find((g) => hitsBoxGeom(model, g, showOutliers, px, py));
       if (!hit) return null;
       const s = hit.stats;
       const rows = [
@@ -7297,10 +7404,15 @@ function buildBoxInteraction(model) {
       };
     },
     pick: (px, py) => {
-      const hit = geoms.find(
-        (g) => px >= g.left - 4 && px <= g.right + 4 && py >= g.top - 6 && py <= g.bottom + 6
-      );
+      const hit = geoms.find((g) => hitsBoxGeom(model, g, showOutliers, px, py));
       if (!hit) return null;
+      if (model.series.length > 1 && model.seriesField && hit.seriesValue !== void 0) {
+        return {
+          kind: "point",
+          fields: [model.x.field, model.seriesField],
+          tuples: [[hit.xValue, hit.seriesValue]]
+        };
+      }
       return { kind: "point", fields: [model.x.field], tuples: [[hit.xValue]] };
     }
   };
@@ -7557,6 +7669,18 @@ function measureMax(labels, font) {
   for (const label of labels) max = Math.max(max, measureText(label, font).width);
   return max;
 }
+function heatmapColorDomain(rows, field) {
+  const read = accessor(field);
+  let min = Infinity;
+  let max = -Infinity;
+  for (const row of rows) {
+    const value = toNumber(read(row));
+    if (!finite3(value)) continue;
+    min = Math.min(min, value);
+    max = Math.max(max, value);
+  }
+  return min === Infinity ? null : [min, max];
+}
 function drawRoundedCell(ctx, x, y, width, height, radius) {
   if (!finite3(x) || !finite3(y) || !finite3(width) || !finite3(height) || width <= 0 || height <= 0) return;
   ctx.beginPath();
@@ -7605,7 +7729,7 @@ function drawHeatmap(surface, spec, tokens, size, context) {
   const { x, y, color } = heatmap.encoding;
   const xCats = uniqueStrings(rows, x.field);
   const yCats = uniqueStrings(rows, y.field);
-  const colorDomain = extent(rows, color.field);
+  const colorDomain = heatmapColorDomain(rows, color.field);
   if (xCats.length === 0 || yCats.length === 0 || !colorDomain || content.width <= 0 || content.height <= 0) return;
   const labelSize = tokens.font.size.small;
   const labelFont = fontString(labelSize, tokens.font.family, tokens.font.weight.normal);
@@ -7772,16 +7896,33 @@ function clamp3(value, min, max) {
 function direction(angle) {
   return { x: Math.sin(angle), y: -Math.cos(angle) };
 }
-function formatPercent(share) {
-  const pct = share * 100;
-  const text = pct < 10 ? pct.toFixed(1) : pct.toFixed(0);
-  return `${text.replace(/\.0$/, "")}%`;
+function reconcilePercents(values) {
+  const cleaned = values.map((value) => Number.isFinite(value) && value > 0 ? value : 0);
+  const total = cleaned.reduce((sum, value) => sum + value, 0);
+  if (total <= 0) return cleaned.map(() => 0);
+  const exact = cleaned.map((value, index) => {
+    const pct = value / total * 100;
+    const floor = Math.floor(pct);
+    return { index, floor, remainder: pct - floor };
+  });
+  let remaining = 100 - exact.reduce((sum, item) => sum + item.floor, 0);
+  const out = exact.map((item) => item.floor);
+  for (const item of [...exact].sort((a, b) => b.remainder - a.remainder || a.index - b.index)) {
+    if (remaining <= 0) break;
+    out[item.index]++;
+    remaining--;
+  }
+  return out;
+}
+function formatPercent(percent) {
+  return `${percent}%`;
 }
-function labelText(slice, placement, options) {
+function labelText(slice, placement, options, percents) {
   const content = options.content ?? (placement === "inside" ? "percent" : "category-percent");
+  const percentText = formatPercent(percents.get(slice.index) ?? 0);
   switch (content) {
     case "percent":
-      return formatPercent(slice.share);
+      return percentText;
     case "value":
       return options.formatValue(slice.value);
     case "category":
@@ -7790,7 +7931,7 @@ function labelText(slice, placement, options) {
       return `${slice.label} \xB7 ${options.formatValue(slice.value)}`;
     case "category-percent":
     default:
-      return `${slice.label} \xB7 ${formatPercent(slice.share)}`;
+      return `${slice.label} \xB7 ${percentText}`;
   }
 }
 function relaxColumn(idealYs, lineHeight2, top, bottom) {
@@ -7820,6 +7961,10 @@ function planPieLabels(options) {
   const origInnerR = options.innerR;
   const insideSlices = [];
   const outsideSlices = [];
+  const percents = /* @__PURE__ */ new Map();
+  reconcilePercents(slices.map((slice) => slice.value)).forEach((percent, i) => {
+    percents.set(slices[i].index, percent);
+  });
   const insideLabelR = origInnerR > 0 ? (origInnerR + origOuterR) / 2 : origOuterR * 0.62;
   const radialBand = origInnerR > 0 ? origOuterR - origInnerR : origOuterR;
   for (const slice of slices) {
@@ -7829,20 +7974,20 @@ function planPieLabels(options) {
     if (placement === "inside") goesInside = true;
     else if (placement === "outside") goesInside = false;
     else {
-      const insideText = labelText(slice, "inside", options);
+      const insideText = labelText(slice, "inside", options, percents);
       const tangential = (slice.endAngle - slice.startAngle) * insideLabelR;
       const fitsTangential = measure(insideText) + INSIDE_PAD <= tangential;
       const fitsRadial = lineHeight2 * 0.8 <= radialBand;
       goesInside = fitsTangential && fitsRadial;
     }
     if (goesInside) {
-      insideSlices.push({ slice, mid, text: labelText(slice, "inside", options) });
+      insideSlices.push({ slice, mid, text: labelText(slice, "inside", options, percents) });
     } else {
       const dir = direction(mid);
       outsideSlices.push({
         slice,
         mid,
-        text: labelText(slice, "outside", options),
+        text: labelText(slice, "outside", options, percents),
         side: dir.x >= 0 ? "right" : "left"
       });
     }
@@ -8229,17 +8374,29 @@ function buildStages(spec, palette) {
       order.push(key);
     }
   }
-  return order.map((key) => {
+  const stages = [];
+  for (const key of order) {
     const { category, value } = totals.get(key);
+    if (value <= 0) continue;
     const rgba2 = colorScale.map(key);
-    return {
+    stages.push({
       key,
       label: key === "" ? "(blank)" : key,
       value,
       category,
       color: rgbaToCss(rgba2),
       rgba: rgba2
-    };
+    });
+  }
+  return stages;
+}
+function safeRatio(numerator, denominator) {
+  return Number.isFinite(numerator) && Number.isFinite(denominator) && denominator !== 0 ? numerator / denominator : 0;
+}
+function funnelPercents(stages, mode = "first") {
+  return stages.map((stage, i) => {
+    if (mode === "previous") return i === 0 ? 1 : safeRatio(stage.value, stages[i - 1].value);
+    return safeRatio(stage.value, stages[0]?.value ?? 0);
   });
 }
 function drawFunnel(surface, spec, tokens, size, context) {
@@ -8277,12 +8434,10 @@ function drawFunnel(surface, spec, tokens, size, context) {
   const n = stages.length;
   const gap = Math.min(6, Math.max(2, content.height / n / 12));
   const bandH = content.height / n;
-  const widthOf = (v) => v / maxValue * funnelW;
+  const widthOf = (v) => Math.max(0, v) / maxValue * funnelW;
   const alphaOf = (s) => emphasis ? emphasis.match({ [stageField]: s.category }) ? 1 : emphasis.dim : 1;
-  const pctOf = (i) => {
-    if (mode === "previous") return i === 0 ? 1 : stages[i].value / stages[i - 1].value;
-    return stages[i].value / stages[0].value;
-  };
+  const percents = funnelPercents(stages, mode);
+  const pctOf = (i) => percents[i] ?? 0;
   const sketch = resolveSketch(spec);
   const pen = sketch ? new RoughPen(ctx, sketch) : null;
   const bands = [];
@@ -8426,8 +8581,8 @@ function valueField(ref) {
 function formatDelta(delta, specFormat) {
   const sign2 = delta >= 0 ? "+" : "-";
   const abs = Math.abs(delta);
-  if (abs <= 1) return sign2 + formatNumber2(abs, ".1%");
   if (specFormat) return sign2 + formatValue(abs, specFormat);
+  if (abs <= 1) return sign2 + formatNumber2(abs, ".1%");
   return sign2 + formatNumber2(abs, ",.0f");
 }
 function cardRectFor(surface, tokens, size, spec) {
@@ -8584,6 +8739,10 @@ function buildSparklineCanvas(tokens, width, height, values, sketch) {
 }
 function drawKpi(surface, spec, tokens, size, context) {
   const kpi = spec;
+  if (surface.headless) {
+    drawKpiCanvas(surface, kpi, tokens, size, context);
+    return;
+  }
   const data = kpi.data ?? [];
   const value = resolveValue(kpi.value, data);
   const delta = resolveValue(kpi.delta, data);
@@ -8652,6 +8811,116 @@ function drawKpi(surface, spec, tokens, size, context) {
     }
   }
 }
+function drawKpiCanvas(surface, kpi, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const data = kpi.data ?? [];
+  const value = resolveValue(kpi.value, data);
+  const delta = resolveValue(kpi.delta, data);
+  const sparkField = sparklineField(kpi);
+  const sparkValues = sparkField ? sparklineValues(data, sparkField) : [];
+  const hasSparkline = sparkValues.length > 0;
+  const framed = context?.framed === true;
+  const rect = cardRectFor(surface, tokens, size, kpi);
+  const pad3 = tokens.spacing.lg;
+  const sparkReserve = hasSparkline ? Math.min(44, Math.max(28, rect.height * 0.18)) + tokens.spacing.sm : 0;
+  if (!framed) {
+    ctx.save();
+    ctx.beginPath();
+    roundedRect(ctx, rect.x, rect.y, rect.width, rect.height, tokens.radius.lg);
+    ctx.fillStyle = tokens.color.surface;
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = tokens.color.border;
+    ctx.stroke();
+    ctx.restore();
+  }
+  const left = rect.x + (framed ? 0 : pad3);
+  const contentWidth = Math.max(1, rect.width - (framed ? 0 : pad3 * 2));
+  const valueText = value == null ? "\u2014" : formatValue(value, kpi.format);
+  const sizeByCard = Math.min(rect.width, rect.height) * 0.22;
+  const sizeByText = contentWidth / Math.max(1, valueText.length * 0.58);
+  const valueSize = clamp5(Math.min(sizeByCard, sizeByText), 28, 64);
+  const labelH = kpi.label ? tokens.font.size.base * 1.25 : 0;
+  const deltaH = delta != null ? tokens.font.size.large : 0;
+  const stackH = labelH + valueSize + deltaH + tokens.spacing.sm * 2;
+  const avail = rect.height - sparkReserve;
+  let y = rect.y + Math.max(framed ? 0 : pad3, (avail - stackH) / 2);
+  if (kpi.label) {
+    paintCanvasText(ctx, {
+      x: left,
+      y,
+      text: kpi.label.toUpperCase(),
+      font: fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.medium),
+      color: tokens.color.textMuted,
+      size: tokens.font.size.base,
+      baseline: "top"
+    });
+    y += labelH + tokens.spacing.sm;
+  }
+  paintCanvasText(ctx, {
+    x: left,
+    y,
+    text: valueText,
+    font: fontString(valueSize, tokens.font.family, tokens.font.weight.bold),
+    color: tokens.color.text,
+    size: valueSize,
+    baseline: "top"
+  });
+  y += valueSize + tokens.spacing.sm;
+  if (delta != null) {
+    const positive = delta >= 0;
+    paintCanvasText(ctx, {
+      x: left,
+      y,
+      text: `${positive ? "\u25B2" : "\u25BC"} ${formatDelta(delta, kpi.format)}`,
+      font: fontString(tokens.font.size.large, tokens.font.family, tokens.font.weight.medium),
+      color: positive ? tokens.color.positive : tokens.color.negative,
+      size: tokens.font.size.large,
+      baseline: "top"
+    });
+  }
+  if (hasSparkline) {
+    const sparkH = clamp5(rect.height * 0.18, 24, 40);
+    const inset = framed ? 0 : pad3;
+    const sparkW = Math.max(0, rect.width - inset * 2);
+    const x0 = rect.x + inset;
+    const y1 = rect.y + rect.height - inset;
+    paintSparklineCanvas(ctx, tokens, x0, y1 - sparkH, sparkW, sparkH, sparkValues);
+  }
+}
+function paintSparklineCanvas(ctx, tokens, x0, y0, width, height, values) {
+  if (values.length === 0 || width <= 0 || height <= 0) return;
+  const stroke = 1.75;
+  const pad3 = stroke;
+  const innerH = Math.max(1, height - pad3 * 2);
+  const n = values.length;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min;
+  const xAt = (i) => x0 + (n === 1 ? width / 2 : i / (n - 1) * width);
+  const yAt = (v) => y0 + pad3 + (1 - (span === 0 ? 0.5 : (v - min) / span)) * innerH;
+  ctx.save();
+  if (n === 1) {
+    ctx.beginPath();
+    ctx.arc(xAt(0), yAt(values[0]), 2.25, 0, Math.PI * 2);
+    ctx.fillStyle = tokens.color.accent;
+    ctx.fill();
+  } else {
+    ctx.beginPath();
+    for (let i = 0; i < n; i++) {
+      const px = xAt(i);
+      const py = yAt(values[i]);
+      if (i === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.strokeStyle = tokens.color.accent;
+    ctx.lineWidth = stroke;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    ctx.stroke();
+  }
+  ctx.restore();
+}
 
 // src/charts/sankey.ts
 var center = (n) => (n.y0 + n.y1) / 2;
@@ -8698,11 +8967,13 @@ function buildGraph(spec, palette) {
     target.targetLinks.push(link);
     links.push(link);
   }
-  for (const n of order) {
-    const out = n.sourceLinks.reduce((s, l) => s + l.value, 0);
-    const inc = n.targetLinks.reduce((s, l) => s + l.value, 0);
-    n.value = Math.max(out, inc);
+  const feedback = removeFeedbackLinks(order);
+  if (feedback.size > 0) {
+    for (let i = links.length - 1; i >= 0; i -= 1) {
+      if (feedback.has(links[i])) links.splice(i, 1);
+    }
   }
+  computeNodeValues(order);
   assignLayers(order);
   const maxLayer = order.reduce((m, n) => Math.max(m, n.layer), 0);
   const columns = Array.from({ length: maxLayer + 1 }, () => []);
@@ -8710,6 +8981,7 @@ function buildGraph(spec, palette) {
   return { nodes: order, links, columns, maxLayer };
 }
 function assignLayers(nodes) {
+  for (const n of nodes) n.layer = 0;
   const indeg = /* @__PURE__ */ new Map();
   for (const n of nodes) indeg.set(n, n.targetLinks.length);
   const queue = nodes.filter((n) => (indeg.get(n) ?? 0) === 0);
@@ -8725,14 +8997,58 @@ function assignLayers(nodes) {
       if (d === 0) queue.push(t);
     }
   }
+  for (const n of nodes) {
+    if (!seen.has(n)) {
+      seen.add(n);
+      const incoming = n.targetLinks.reduce((m, l) => Math.max(m, l.source.layer + 1), 0);
+      n.layer = Math.max(n.layer, incoming);
+    }
+  }
   const maxLayer = nodes.reduce((m, n) => Math.max(m, n.layer), 0);
   for (const n of nodes) {
     if (n.sourceLinks.length === 0 && n.targetLinks.length > 0) n.layer = maxLayer;
   }
 }
+function removeFeedbackLinks(nodes) {
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const feedback = /* @__PURE__ */ new Set();
+  const visit = (n) => {
+    visiting.add(n);
+    for (const link of n.sourceLinks) {
+      const target = link.target;
+      if (visiting.has(target)) {
+        feedback.add(link);
+        continue;
+      }
+      if (!visited.has(target)) visit(target);
+    }
+    visiting.delete(n);
+    visited.add(n);
+  };
+  for (const n of nodes) {
+    if (!visited.has(n)) visit(n);
+  }
+  if (feedback.size === 0) return feedback;
+  for (const n of nodes) {
+    n.sourceLinks = n.sourceLinks.filter((l) => !feedback.has(l));
+    n.targetLinks = n.targetLinks.filter((l) => !feedback.has(l));
+  }
+  return feedback;
+}
+function computeNodeValues(nodes) {
+  for (const n of nodes) {
+    const out = n.sourceLinks.reduce((s, l) => s + l.value, 0);
+    const inc = n.targetLinks.reduce((s, l) => s + l.value, 0);
+    n.value = Math.max(out, inc);
+  }
+}
 function layout(graph, area2, nodeWidth, pad3) {
   const { columns, links, maxLayer } = graph;
   const kx = maxLayer > 0 ? (area2.width - nodeWidth) / maxLayer : 0;
+  const maxColumnSize = columns.reduce((m, col) => Math.max(m, col.length), 0);
+  const desiredPad = Math.max(0, pad3);
+  const effectivePad = maxColumnSize > 1 && desiredPad * (maxColumnSize - 1) >= area2.height && area2.height > 0 ? area2.height * 0.25 / (maxColumnSize - 1) : desiredPad;
   for (const col of columns) {
     for (const n of col) {
       n.x0 = area2.x + n.layer * kx;
@@ -8743,26 +9059,26 @@ function layout(graph, area2, nodeWidth, pad3) {
   for (const col of columns) {
     if (col.length === 0) continue;
     const sum = col.reduce((s, n) => s + n.value, 0);
-    const avail = area2.height - (col.length - 1) * pad3;
-    if (sum > 0 && avail > 0) ky = Math.min(ky, avail / sum);
+    const avail = Math.max(0, area2.height - (col.length - 1) * effectivePad);
+    if (sum > 0) ky = Math.min(ky, avail / sum);
   }
-  if (!Number.isFinite(ky) || ky <= 0) ky = 1;
+  if (!Number.isFinite(ky) || ky < 0) ky = 0;
   for (const col of columns) {
     let y = area2.y;
     for (const n of col) {
       n.y0 = y;
-      n.y1 = y + Math.max(1, n.value * ky);
-      y = n.y1 + pad3;
+      n.y1 = y + Math.max(0, n.value * ky);
+      y = n.y1 + effectivePad;
     }
     centerColumn(col, area2);
   }
-  for (const l of links) l.width = Math.max(1, l.value * ky);
+  for (const l of links) l.width = Math.max(0, l.value * ky);
   for (let i = 0; i < 6; i += 1) {
     const alpha = Math.pow(0.97, i);
     relax(columns, true, alpha);
-    resolveAll(columns, area2, pad3);
+    resolveAll(columns, area2, effectivePad);
     relax(columns, false, alpha);
-    resolveAll(columns, area2, pad3);
+    resolveAll(columns, area2, effectivePad);
   }
   computeLinkBreadths(graph);
 }
@@ -9004,6 +9320,7 @@ function featureKey(feature, featureId) {
     if (featureId === "id" && feature.id != null) return toKey(feature.id);
     const v = feature.properties?.[featureId];
     if (v != null) return toKey(v);
+    return "";
   }
   if (feature.id != null) return toKey(feature.id);
   const props = feature.properties ?? {};
@@ -9419,6 +9736,43 @@ function buildTable(opts) {
   if (footer) table.appendChild(footer);
   container.appendChild(table);
 }
+function paintTableCanvas(opts) {
+  const { ctx, rect, tokens } = opts;
+  const metrics = densityMetrics(opts.density);
+  const available = Math.max(0, rect.width - 2);
+  const widths = computeFittedWidths(opts.columns, available);
+  opts.widths = widths;
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, rect.x, rect.y, Math.max(0, rect.width), Math.max(0, rect.height), tokens.radius.sm);
+  ctx.fillStyle = tokens.color.background;
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = tokens.color.border;
+  ctx.stroke();
+  ctx.clip();
+  const headerRows = normalizedHeaderRows(opts);
+  const headerHeight = headerRows.length * metrics.headerHeight;
+  const footerHeight = opts.footerRow ? metrics.rowHeight : 0;
+  const bodyTop = rect.y + headerHeight;
+  const bodyBottom = rect.y + rect.height - footerHeight;
+  const bodyHeight = Math.max(0, bodyBottom - bodyTop);
+  const visibleRows = Math.max(0, Math.min(opts.rowCount, Math.floor(bodyHeight / metrics.rowHeight)));
+  const clipped = visibleRows < opts.rowCount;
+  const cueReserve = clipped && opts.clippedCue !== false && visibleRows > 0 ? metrics.rowHeight : 0;
+  const rowsToDraw = Math.max(0, visibleRows - (cueReserve > 0 ? 1 : 0));
+  paintHeaderCanvas(opts, widths, headerRows, metrics);
+  for (let rowIndex = 0; rowIndex < rowsToDraw; rowIndex += 1) {
+    paintBodyRowCanvas(opts, widths, rowIndex, bodyTop + rowIndex * metrics.rowHeight, metrics);
+  }
+  if (cueReserve > 0) {
+    paintClippedCueCanvas(opts, bodyTop + rowsToDraw * metrics.rowHeight, metrics, opts.rowCount - rowsToDraw);
+  }
+  if (opts.footerRow) {
+    paintFooterCanvas(opts, widths, rect.y + rect.height - metrics.rowHeight, metrics);
+  }
+  ctx.restore();
+}
 var FILL_EPS = 0.5;
 var cachedScrollbarWidth = null;
 function scrollbarWidth() {
@@ -9766,6 +10120,263 @@ function densityMetrics(density) {
   if (density === "compact") return { rowHeight: 24, headerHeight: 28, padding: "3px 8px", paddingX: 8 };
   return { rowHeight: DEFAULT_BODY_ROW_HEIGHT, headerHeight: HEADER_ROW_HEIGHT, padding: "6px 10px", paddingX: 10 };
 }
+function normalizedHeaderRows(opts) {
+  if (opts.headerRows) return opts.headerRows;
+  return [
+    opts.columns.map((column, colIndex) => ({
+      title: column.title,
+      align: column.align,
+      colIndex
+    }))
+  ];
+}
+function paintHeaderCanvas(opts, widths, rows, metrics) {
+  rows.forEach((row, rowIndex) => {
+    let cursor = 0;
+    for (const cell of row) {
+      const start = cell.colIndex ?? cursor;
+      const colSpan = Math.max(1, cell.colSpan ?? 1);
+      const rowSpan = Math.max(1, cell.rowSpan ?? 1);
+      const x = opts.rect.x + sumWidths(widths.slice(0, start));
+      const y = opts.rect.y + rowIndex * metrics.headerHeight;
+      const w = sumWidths(widths.slice(start, start + colSpan));
+      const h = metrics.headerHeight * rowSpan;
+      paintCellBox(opts.ctx, x, y, w, h, opts.tokens.color.surface, opts.tokens.color.border);
+      paintCellText(opts, {
+        x,
+        y,
+        width: w,
+        height: h,
+        text: cell.title,
+        align: cell.align ?? "left",
+        color: opts.tokens.color.text,
+        weight: opts.tokens.font.weight.bold,
+        paddingX: metrics.paddingX
+      });
+      cursor = start + colSpan;
+    }
+  });
+}
+function paintBodyRowCanvas(opts, widths, rowIndex, y, metrics) {
+  const cls = opts.rowClass?.(rowIndex) ?? "normal";
+  let x = opts.rect.x;
+  for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
+    const column = opts.columns[colIndex];
+    const width = widths[colIndex] ?? 0;
+    const cell = opts.getCell(rowIndex, colIndex);
+    const baseBg = canvasRowBackground(opts, rowIndex, cls);
+    const conditional = resolveCanvasConditional(opts, column, colIndex, cell, baseBg);
+    const bg = conditional.background ?? baseBg;
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, bg, opts.tokens.color.border);
+    if (conditional.bar) paintDataBar(opts, x, y, width, metrics.rowHeight, conditional.bar);
+    const indent = opts.cellIndent?.(rowIndex, colIndex) ?? 0;
+    const text = conditional.showValue === false ? "" : formatDisplayValue(cell.value, column);
+    const color = negativeTextColor(cell.value, column, conditional.color ?? opts.tokens.color.text);
+    const weight = conditional.weight ?? (cls === "normal" ? opts.tokens.font.weight.normal : opts.tokens.font.weight.bold);
+    paintCellValueWithIcon(opts, {
+      x,
+      y,
+      width,
+      height: metrics.rowHeight,
+      text,
+      align: column.align,
+      color,
+      weight,
+      paddingX: metrics.paddingX + indent,
+      icon: conditional.icon,
+      iconColor: conditional.iconColor,
+      iconPosition: conditional.iconPosition
+    });
+    x += width;
+  }
+}
+function paintFooterCanvas(opts, widths, y, metrics) {
+  let x = opts.rect.x;
+  for (let colIndex = 0; colIndex < opts.columns.length; colIndex += 1) {
+    const column = opts.columns[colIndex];
+    const width = widths[colIndex] ?? 0;
+    const cell = opts.footerRow?.cells[colIndex] ?? { value: null};
+    paintCellBox(opts.ctx, x, y, width, metrics.rowHeight, opts.tokens.color.surface, opts.tokens.color.border, true);
+    paintCellText(opts, {
+      x,
+      y,
+      width,
+      height: metrics.rowHeight,
+      text: cell.label ? String(cell.value ?? "") : formatDisplayValue(cell.value, column),
+      align: column.align,
+      color: negativeTextColor(cell.value, column, opts.tokens.color.text),
+      weight: opts.tokens.font.weight.bold,
+      paddingX: metrics.paddingX
+    });
+    x += width;
+  }
+}
+function paintClippedCueCanvas(opts, y, metrics, remaining) {
+  paintCellBox(opts.ctx, opts.rect.x, y, opts.rect.width, metrics.rowHeight, opts.tokens.color.background, opts.tokens.color.border);
+  paintCellText(opts, {
+    x: opts.rect.x,
+    y,
+    width: opts.rect.width,
+    height: metrics.rowHeight,
+    text: `\u2026${remaining} more`,
+    align: "center",
+    color: opts.tokens.color.textMuted,
+    weight: opts.tokens.font.weight.medium,
+    paddingX: metrics.paddingX
+  });
+}
+function paintCellBox(ctx, x, y, width, height, background, border, topBorder = false) {
+  ctx.save();
+  ctx.fillStyle = background;
+  ctx.fillRect(x, y, width, height);
+  ctx.strokeStyle = border;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(x + width, y);
+  ctx.lineTo(x + width, y + height);
+  ctx.moveTo(x, y + height);
+  ctx.lineTo(x + width, y + height);
+  if (topBorder) {
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + width, y);
+  }
+  ctx.stroke();
+  ctx.restore();
+}
+function paintCellValueWithIcon(opts, input) {
+  const font = fontString(opts.tokens.font.size.small, opts.tokens.font.family, input.weight);
+  const gap = input.icon ? 6 : 0;
+  const iconFont = fontString(opts.tokens.font.size.small, opts.tokens.font.family, opts.tokens.font.weight.bold);
+  const iconW = input.icon ? measureText(input.icon, iconFont).width : 0;
+  const textMax = Math.max(0, input.width - input.paddingX * 2 - iconW - gap);
+  const text = ellipsize(input.text, textMax, font);
+  const textW = measureText(text, font).width;
+  const groupW = textW + iconW + gap;
+  let start = input.x + input.paddingX;
+  if (input.align === "right") start = input.x + input.width - input.paddingX - groupW;
+  else if (input.align === "center") start = input.x + (input.width - groupW) / 2;
+  const midY = input.y + input.height / 2;
+  const iconFirst = input.icon && input.iconPosition !== "right";
+  const iconX = iconFirst ? start : start + textW + gap;
+  const textX = iconFirst ? start + iconW + gap : start;
+  if (input.icon) {
+    paintCanvasText(opts.ctx, {
+      x: iconX,
+      y: midY,
+      text: input.icon,
+      font: iconFont,
+      color: input.iconColor ?? input.color,
+      size: opts.tokens.font.size.small,
+      baseline: "middle"
+    });
+  }
+  paintRawCellText(opts, textX, midY, text, font, input.color, opts.tokens.font.size.small);
+}
+function paintCellText(opts, input) {
+  const font = fontString(opts.tokens.font.size.small, opts.tokens.font.family, input.weight);
+  const maxWidth = Math.max(0, input.width - input.paddingX * 2);
+  const text = ellipsize(input.text, maxWidth, font);
+  const x = input.align === "right" ? input.x + input.width - input.paddingX : input.align === "center" ? input.x + input.width / 2 : input.x + input.paddingX;
+  paintRawCellText(opts, x, input.y + input.height / 2, text, font, input.color, opts.tokens.font.size.small, input.align);
+}
+function paintRawCellText(opts, x, y, text, font, color, size, align = "left") {
+  if (!text) return;
+  paintCanvasText(opts.ctx, {
+    x,
+    y,
+    text,
+    font,
+    color,
+    size,
+    align,
+    baseline: "middle"
+  });
+}
+function ellipsize(text, maxWidth, font) {
+  if (maxWidth <= 0 || text.length === 0) return "";
+  if (measureText(text, font).width <= maxWidth) return text;
+  const ellipsis = "\u2026";
+  const ellipsisW = measureText(ellipsis, font).width;
+  if (ellipsisW > maxWidth) return "";
+  let lo = 0;
+  let hi = text.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    if (measureText(text.slice(0, mid) + ellipsis, font).width <= maxWidth) lo = mid;
+    else hi = mid - 1;
+  }
+  return text.slice(0, lo) + ellipsis;
+}
+function resolveCanvasConditional(opts, column, colIndex, cell, rowBg) {
+  const cf = column.conditionalFormat;
+  const raw = cell.raw;
+  const domain = opts.conditionalDomains?.[colIndex] ?? null;
+  if (!cf) return {};
+  if ((cf.type === "colorScale" || cf.type === "bar" || cf.type === "icon") && (raw == null || !Number.isFinite(raw))) {
+    return {};
+  }
+  const numeric = raw;
+  if (cf.type === "colorScale") {
+    if (!domain) return {};
+    const midpoint = cf.midpoint ?? (domain[0] + domain[1]) / 2;
+    const scale = cf.diverging === true || cf.midpoint !== void 0 ? divergingColorScale({ domain: [domain[0], midpoint, domain[1]], interpolator: diverging(cf.scheme ?? "redblue") }) : sequentialColorScale({ domain, interpolator: sequential(cf.scheme ?? "blues") });
+    const color2 = scale.map(numeric);
+    if (cf.target === "text") return { color: rgbaToCss(color2) };
+    return { background: rgbaToCss(color2), color: rgbaToCss(readableTextColor(color2)) };
+  }
+  if (cf.type === "rules") {
+    const style = evalRules(raw, cf.rules);
+    return {
+      background: style.background,
+      color: style.color,
+      weight: style.weight === "bold" ? opts.tokens.font.weight.bold : style.weight === "normal" ? opts.tokens.font.weight.normal : void 0,
+      icon: style.icon,
+      iconColor: style.color,
+      iconPosition: "left"
+    };
+  }
+  if (cf.type === "icon") {
+    const semantic = iconForValue(cf.set, numeric, domain, cf.rules);
+    if (!semantic) return {};
+    return {
+      icon: semantic.icon,
+      iconColor: toneColor(semantic.tone, { up: opts.tokens.color.positive, mid: "#d97706", down: opts.tokens.color.negative }),
+      iconPosition: cf.position ?? "left"
+    };
+  }
+  if (!domain) return {};
+  const diverging2 = cf.negativeColor !== void 0 || cf.baseline === "zero";
+  const baseline = diverging2 ? normalized(0, domain) : 0;
+  const value = normalized(numeric, domain);
+  const leftRatio = diverging2 ? Math.min(baseline, value) : 0;
+  const widthRatio = diverging2 ? Math.abs(value - baseline) : value;
+  const positive = numeric >= 0;
+  const color = alphaColor(positive ? cf.color ?? opts.tokens.color.accent : cf.negativeColor ?? opts.tokens.color.negative, 0.85);
+  return { background: rowBg, showValue: cf.showValue !== false, bar: { leftRatio, widthRatio, color } };
+}
+function paintDataBar(opts, x, y, width, height, bar) {
+  const left = x + 4 + bar.leftRatio * Math.max(0, width - 8);
+  const barW = bar.widthRatio * Math.max(0, width - 8);
+  opts.ctx.save();
+  opts.ctx.globalAlpha *= 0.9;
+  opts.ctx.beginPath();
+  roundedRect(opts.ctx, left, y + 5, barW, Math.max(0, height - 10), Math.max(2, opts.tokens.radius.sm - 1));
+  opts.ctx.fillStyle = bar.color;
+  opts.ctx.fill();
+  opts.ctx.restore();
+}
+function canvasRowBackground(opts, rowIndex, cls) {
+  if (cls !== "normal") return opts.tokens.color.surface;
+  if (opts.striped === true && rowIndex % 2 === 1) return subtleStripe(opts.tokens);
+  return opts.tokens.color.background;
+}
+function negativeTextColor(value, column, fallback) {
+  const raw = typeof value === "number" ? value : Number(value);
+  if (Number.isFinite(raw) && raw < 0 && (column.negativeStyle === "red" || column.negativeStyle === "parens-red")) {
+    return "#dc2626";
+  }
+  return fallback;
+}
 function applyStickyColumn(cell, opts, colIndex, isHeader) {
   if (colIndex == null || colIndex >= (opts.rowHeaderSpan ?? 0)) return;
   cell.style.position = "sticky";
@@ -9822,36 +10433,71 @@ var ROW_HEIGHT = 30;
 var BUFFER_ROWS = 8;
 function drawTable(surface, spec, tokens, size) {
   if (spec.type !== "table") return;
+  if (surface.headless) {
+    drawTableCanvas(surface, spec, tokens, size);
+    return;
+  }
   renderTable(surface, spec, tokens, size);
 }
-function renderTable(surface, spec, tokens, size) {
+function drawTableCanvas(surface, spec, tokens, size) {
   const rect = drawTitleBlock(surface, tokens, size, spec.title);
   const data = spec.data ?? [];
   const columns = resolveColumns(data, spec);
   const read = columns.map((column) => accessor(column.key));
-  const sketch = resolveSketch(spec) != null;
-  let sortState = initialSortState(spec, columns);
-  let sortedRows = sortRows(data, columns, read, sortState);
+  const sortState = initialSortState(spec, columns);
+  const sortedRows = sortRows(data, columns, read, sortState);
   const domains = columns.map(
     (column, colIndex) => resolveConditionalDomain(
       column.conditionalFormat,
       data.map((row) => numericRaw(read[colIndex](row)))
     )
   );
-  const host = document.createElement("div");
-  surface.overlay.appendChild(host);
-  let frame = 0;
-  const renderWindow = () => {
-    const scrollTop = host.scrollTop || 0;
-    const rowHeight = densityRowHeight(spec.density);
-    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - BUFFER_ROWS);
-    const visible = Math.ceil(Math.max(rect.height, host.clientHeight || rect.height) / rowHeight) + BUFFER_ROWS * 2;
-    const end = Math.min(sortedRows.length, start + visible);
-    buildTable({
-      container: host,
-      tokens,
-      rect,
-      columns,
+  paintTableCanvas({
+    ctx: surface.marks.ctx,
+    tokens,
+    rect,
+    columns,
+    rowCount: sortedRows.length,
+    getCell(rowIndex, colIndex) {
+      const value = read[colIndex](sortedRows[rowIndex]);
+      return { value, raw: numericRaw(value) };
+    },
+    striped: spec.striped === true,
+    conditionalDomains: domains,
+    headerRows: buildTableHeaderRows(columns),
+    footerRow: buildTotalsRow(sortedRows, columns, read, spec),
+    density: spec.density,
+    sketch: resolveSketch(spec) != null
+  });
+}
+function renderTable(surface, spec, tokens, size) {
+  const rect = drawTitleBlock(surface, tokens, size, spec.title);
+  const data = spec.data ?? [];
+  const columns = resolveColumns(data, spec);
+  const read = columns.map((column) => accessor(column.key));
+  const sketch = resolveSketch(spec) != null;
+  let sortState = initialSortState(spec, columns);
+  let sortedRows = sortRows(data, columns, read, sortState);
+  const domains = columns.map(
+    (column, colIndex) => resolveConditionalDomain(
+      column.conditionalFormat,
+      data.map((row) => numericRaw(read[colIndex](row)))
+    )
+  );
+  const host = document.createElement("div");
+  surface.overlay.appendChild(host);
+  let frame = 0;
+  const renderWindow = () => {
+    const scrollTop = host.scrollTop || 0;
+    const rowHeight = densityRowHeight(spec.density);
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - BUFFER_ROWS);
+    const visible = Math.ceil(Math.max(rect.height, host.clientHeight || rect.height) / rowHeight) + BUFFER_ROWS * 2;
+    const end = Math.min(sortedRows.length, start + visible);
+    buildTable({
+      container: host,
+      tokens,
+      rect,
+      columns,
       rowCount: sortedRows.length,
       getCell(rowIndex, colIndex) {
         const value = read[colIndex](sortedRows[rowIndex]);
@@ -9994,10 +10640,80 @@ function requestFrame(callback) {
 var PATH_SEPARATOR2 = "\0";
 function drawMatrix(surface, spec, tokens, size) {
   if (spec.type !== "matrix") return;
+  if (surface.headless) {
+    drawMatrixCanvas(surface, spec, tokens, size);
+    return;
+  }
   renderMatrix(surface, spec, tokens, size);
 }
+function drawMatrixCanvas(surface, spec, tokens, size) {
+  const rect = drawTitleBlock(surface, tokens, size, spec.title);
+  const prepared = prepareMatrix(spec);
+  paintTableCanvas({
+    ctx: surface.marks.ctx,
+    tokens,
+    rect,
+    columns: prepared.columns,
+    rowCount: prepared.rows.length,
+    getCell(rowIndex, colIndex) {
+      const row = prepared.rows[rowIndex];
+      if (colIndex === 0) return { value: rowLabel(row), raw: null };
+      const { leaf, valueIndex } = prepared.leafValueColumns[colIndex - 1];
+      const value = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR2))?.values[valueIndex] ?? null;
+      const display = displayMatrixValue(value, rowIndex, colIndex - 1, prepared.denominators, spec);
+      return { value: display, raw: display };
+    },
+    rowClass(rowIndex) {
+      const row = prepared.rows[rowIndex];
+      return row.isGrandTotal === true ? "grandtotal" : row.isSubtotal === true ? "subtotal" : "normal";
+    },
+    cellIndent(rowIndex, colIndex) {
+      return colIndex === 0 ? prepared.rows[rowIndex].depth * 16 : 0;
+    },
+    rowHeaderSpan: 1,
+    striped: false,
+    conditionalDomains: prepared.bodyDomains,
+    headerRows: prepared.headerRows,
+    density: spec.density,
+    sketch: resolveSketch(spec) != null
+  });
+}
 function renderMatrix(surface, spec, tokens, size) {
   const rect = drawTitleBlock(surface, tokens, size, spec.title);
+  const prepared = prepareMatrix(spec);
+  const host = document.createElement("div");
+  surface.overlay.appendChild(host);
+  buildTable({
+    container: host,
+    tokens,
+    rect,
+    columns: prepared.columns,
+    rowCount: prepared.rows.length,
+    getCell(rowIndex, colIndex) {
+      const row = prepared.rows[rowIndex];
+      if (colIndex === 0) return { value: rowLabel(row), raw: null };
+      const { leaf, valueIndex } = prepared.leafValueColumns[colIndex - 1];
+      const value = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR2))?.values[valueIndex] ?? null;
+      const display = displayMatrixValue(value, rowIndex, colIndex - 1, prepared.denominators, spec);
+      return { value: display, raw: display };
+    },
+    rowClass(rowIndex) {
+      const row = prepared.rows[rowIndex];
+      return row.isGrandTotal === true ? "grandtotal" : row.isSubtotal === true ? "subtotal" : "normal";
+    },
+    cellIndent(rowIndex, colIndex) {
+      return colIndex === 0 ? prepared.rows[rowIndex].depth * 16 : 0;
+    },
+    rowHeaderSpan: 1,
+    stickyHeader: true,
+    striped: false,
+    conditionalDomains: prepared.bodyDomains,
+    headerRows: prepared.headerRows,
+    density: spec.density,
+    sketch: resolveSketch(spec) != null
+  });
+}
+function prepareMatrix(spec) {
   const data = spec.data ?? [];
   const result = pivot(data, {
     rows: spec.rows,
@@ -10048,37 +10764,14 @@ function renderMatrix(surface, spec, tokens, size) {
       )
     );
   });
-  const host = document.createElement("div");
-  surface.overlay.appendChild(host);
-  buildTable({
-    container: host,
-    tokens,
-    rect,
+  return {
+    rows: result.rows,
     columns,
-    rowCount: result.rows.length,
-    getCell(rowIndex, colIndex) {
-      const row = result.rows[rowIndex];
-      if (colIndex === 0) return { value: rowLabel(row), raw: null };
-      const { leaf, valueIndex } = leafValueColumns[colIndex - 1];
-      const value = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR2))?.values[valueIndex] ?? null;
-      const display = displayMatrixValue(value, rowIndex, colIndex - 1, denominators, spec);
-      return { value: display, raw: display };
-    },
-    rowClass(rowIndex) {
-      const row = result.rows[rowIndex];
-      return row.isGrandTotal === true ? "grandtotal" : row.isSubtotal === true ? "subtotal" : "normal";
-    },
-    cellIndent(rowIndex, colIndex) {
-      return colIndex === 0 ? result.rows[rowIndex].depth * 16 : 0;
-    },
-    rowHeaderSpan: 1,
-    stickyHeader: true,
-    striped: false,
-    conditionalDomains: bodyDomains,
-    headerRows: buildMatrixHeaderRows(result.columnTree, sortedLeaves, spec, sortedLeaves !== result.columnLeaves),
-    density: spec.density,
-    sketch: resolveSketch(spec) != null
-  });
+    leafValueColumns,
+    denominators,
+    bodyDomains,
+    headerRows: buildMatrixHeaderRows(result.columnTree, sortedLeaves, spec, sortedLeaves !== result.columnLeaves)
+  };
 }
 function rowLabel(row) {
   if (row.isGrandTotal === true) return row.label;
@@ -10659,6 +11352,10 @@ function emptyNotice(host, message, color) {
 // src/charts/slicers/dropdown.ts
 function drawDropdown(surface, spec, tokens, size, context) {
   const s = spec;
+  if (surface.headless) {
+    drawDropdownCanvas(surface, s, tokens, size, context);
+    return;
+  }
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -10739,10 +11436,61 @@ function drawDropdown(surface, spec, tokens, size, context) {
   trigger.addEventListener("click", openMenu);
   refreshChrome();
 }
+function drawDropdownCanvas(surface, s, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const rect = drawTitleBlock(surface, tokens, size, s.title ?? slicerLabel(s));
+  const options = slicerOptions(s, context);
+  const display = (v) => formatValue(v, void 0) || "\u2014";
+  const placeholder = s.placeholder ?? (s.multiple ? "Any" : "All");
+  const current = currentValue(s, context);
+  const selected = new Set((current?.kind === "set" ? current.values : []).map((v) => toKey(v)));
+  const picks = options.filter((o) => selected.has(toKey(o)));
+  const label = selected.size === 0 ? placeholder : picks.length === 1 ? display(picks[0]) : s.multiple ? `${picks.length} selected` : display(picks[0]);
+  const h = Math.min(42, Math.max(32, rect.height));
+  const y = rect.y + Math.max(0, (rect.height - h) * 0.12);
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, rect.x, y, rect.width, h, tokens.radius.md);
+  ctx.fillStyle = tokens.color.surface;
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = selected.size ? tokens.color.accent : tokens.color.border;
+  ctx.stroke();
+  ctx.restore();
+  const font = fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.normal);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(rect.x + tokens.spacing.sm, y, Math.max(0, rect.width - tokens.spacing.sm * 4 - 14), h);
+  ctx.clip();
+  paintCanvasText(ctx, {
+    x: rect.x + tokens.spacing.sm,
+    y: y + h / 2,
+    text: label,
+    font,
+    color: selected.size ? tokens.color.text : tokens.color.textMuted,
+    size: tokens.font.size.base,
+    baseline: "middle"
+  });
+  ctx.restore();
+  paintCanvasText(ctx, {
+    x: rect.x + rect.width - tokens.spacing.sm,
+    y: y + h / 2,
+    text: "\u25BE",
+    font,
+    color: tokens.color.textMuted,
+    size: tokens.font.size.base,
+    align: "right",
+    baseline: "middle"
+  });
+}
 
 // src/charts/slicers/search.ts
 function drawSearch(surface, spec, tokens, size, context) {
   const s = spec;
+  if (surface.headless) {
+    drawSearchCanvas(surface, s, tokens, size, context);
+    return;
+  }
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -10782,10 +11530,47 @@ function drawSearch(surface, spec, tokens, size, context) {
   });
   shell.setClear(initial ? clear : null);
 }
+function drawSearchCanvas(surface, s, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const rect = drawTitleBlock(surface, tokens, size, s.title ?? slicerLabel(s));
+  const current = currentValue(s, context);
+  const value = current?.kind === "text" ? current.query : "";
+  const text = value || (s.placeholder ?? `Search ${s.field}\u2026`);
+  const h = Math.min(42, Math.max(32, rect.height));
+  const y = rect.y + Math.max(0, (rect.height - h) * 0.12);
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, rect.x, y, rect.width, h, tokens.radius.md);
+  ctx.fillStyle = tokens.color.surface;
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = value ? tokens.color.accent : tokens.color.border;
+  ctx.stroke();
+  ctx.restore();
+  const font = fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.normal);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(rect.x + tokens.spacing.sm, y, Math.max(0, rect.width - tokens.spacing.sm * 2), h);
+  ctx.clip();
+  paintCanvasText(ctx, {
+    x: rect.x + tokens.spacing.sm,
+    y: y + h / 2,
+    text,
+    font,
+    color: value ? tokens.color.text : tokens.color.textMuted,
+    size: tokens.font.size.base,
+    baseline: "middle"
+  });
+  ctx.restore();
+}
 
 // src/charts/slicers/list.ts
 function drawList(surface, spec, tokens, size, context) {
   const s = spec;
+  if (surface.headless) {
+    drawListCanvas(surface, s, tokens, size, context);
+    return;
+  }
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -10909,10 +11694,95 @@ function drawList(surface, spec, tokens, size, context) {
   rebuild();
   shell.setClear(selected.size ? clearAll : null);
 }
+function drawListCanvas(surface, s, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const rect = drawTitleBlock(surface, tokens, size, s.title ?? slicerLabel(s));
+  const options = slicerOptions(s, context);
+  const display = (v) => formatValue(v, void 0) || "\u2014";
+  const current = currentValue(s, context);
+  const selected = new Set((current?.kind === "set" ? current.values : []).map((v) => toKey(v)));
+  const rowH = Math.max(24, tokens.font.size.base + tokens.spacing.sm + 2);
+  const pad3 = tokens.spacing.xs;
+  const visibleRows = Math.max(1, Math.floor((rect.height - pad3 * 2) / rowH));
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, rect.x, rect.y, rect.width, rect.height, tokens.radius.md);
+  ctx.fillStyle = tokens.color.surface;
+  ctx.fill();
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = tokens.color.border;
+  ctx.stroke();
+  ctx.clip();
+  const font = fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.normal);
+  const checkSize = 12;
+  options.slice(0, visibleRows).forEach((opt, i) => {
+    const y = rect.y + pad3 + i * rowH;
+    const key = toKey(opt);
+    const active = selected.has(key);
+    if (active) {
+      ctx.beginPath();
+      roundedRect(ctx, rect.x + pad3, y + 1, rect.width - pad3 * 2, rowH - 2, tokens.radius.sm);
+      ctx.fillStyle = tokens.color.background;
+      ctx.fill();
+    }
+    const bx = rect.x + tokens.spacing.sm;
+    const by = y + rowH / 2 - checkSize / 2;
+    ctx.beginPath();
+    roundedRect(ctx, bx, by, checkSize, checkSize, 3);
+    ctx.fillStyle = active ? tokens.color.accent : tokens.color.background;
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = active ? tokens.color.accent : tokens.color.border;
+    ctx.stroke();
+    if (active) {
+      paintCanvasText(ctx, {
+        x: bx + checkSize / 2,
+        y: y + rowH / 2,
+        text: "\u2713",
+        font: fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.bold),
+        color: tokens.color.surface,
+        size: tokens.font.size.small,
+        align: "center",
+        baseline: "middle"
+      });
+    }
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(bx + checkSize + tokens.spacing.sm, y, Math.max(0, rect.width - checkSize - tokens.spacing.sm * 4), rowH);
+    ctx.clip();
+    paintCanvasText(ctx, {
+      x: bx + checkSize + tokens.spacing.sm,
+      y: y + rowH / 2,
+      text: display(opt),
+      font,
+      color: tokens.color.text,
+      size: tokens.font.size.base,
+      baseline: "middle"
+    });
+    ctx.restore();
+  });
+  if (options.length > visibleRows) {
+    paintCanvasText(ctx, {
+      x: rect.x + rect.width - tokens.spacing.sm,
+      y: rect.y + rect.height - tokens.spacing.xs,
+      text: `+${options.length - visibleRows} more`,
+      font: fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.medium),
+      color: tokens.color.textMuted,
+      size: tokens.font.size.small,
+      align: "right",
+      baseline: "alphabetic"
+    });
+  }
+  ctx.restore();
+}
 
 // src/charts/slicers/range.ts
 function drawRange(surface, spec, tokens, size, context) {
   const s = spec;
+  if (surface.headless) {
+    drawRangeCanvas(surface, s, tokens, size, context);
+    return;
+  }
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -10954,6 +11824,80 @@ function drawRange(surface, spec, tokens, size, context) {
   const active = current?.kind === "range" && (low > min || high < max);
   shell.setClear(active ? clear : null);
 }
+function drawRangeCanvas(surface, s, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const rect = drawTitleBlock(surface, tokens, size, s.title ?? slicerLabel(s));
+  const dataExtent = extent(slicerSource(s, context), s.field);
+  const min = s.min ?? dataExtent?.[0] ?? 0;
+  const max = s.max ?? dataExtent?.[1] ?? 1;
+  const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.medium);
+  if (!(max > min)) {
+    paintCanvasText(ctx, {
+      x: rect.x,
+      y: rect.y,
+      text: `No numeric range for "${s.field}".`,
+      font,
+      color: tokens.color.textMuted,
+      size: tokens.font.size.small,
+      baseline: "top"
+    });
+    return;
+  }
+  const current = currentValue(s, context);
+  const rawLow = current?.kind === "range" && current.min != null ? toNumber(current.min) : min;
+  const rawHigh = current?.kind === "range" && current.max != null ? toNumber(current.max) : max;
+  const low = Number.isNaN(rawLow) ? min : Math.max(min, Math.min(max, rawLow));
+  const high = Number.isNaN(rawHigh) ? max : Math.max(low, Math.min(max, rawHigh));
+  const fmt = (v) => formatValue(v, s.format);
+  paintSliderSnapshot(ctx, tokens, rect, min, max, low, high, fmt);
+}
+function paintSliderSnapshot(ctx, tokens, rect, min, max, low, high, format) {
+  const span = Math.max(1e-9, max - min);
+  const trackX = rect.x + 8;
+  const trackW = Math.max(0, rect.width - 16);
+  const midY = rect.y + Math.min(Math.max(rect.height * 0.58, 34), Math.max(34, rect.height - 14));
+  const lowX = trackX + (low - min) / span * trackW;
+  const highX = trackX + (high - min) / span * trackW;
+  const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.medium);
+  paintCanvasText(ctx, {
+    x: rect.x,
+    y: rect.y,
+    text: format(low),
+    font,
+    color: tokens.color.textMuted,
+    size: tokens.font.size.small,
+    baseline: "top"
+  });
+  paintCanvasText(ctx, {
+    x: rect.x + rect.width,
+    y: rect.y,
+    text: format(high),
+    font,
+    color: tokens.color.textMuted,
+    size: tokens.font.size.small,
+    align: "right",
+    baseline: "top"
+  });
+  ctx.save();
+  ctx.beginPath();
+  roundedRect(ctx, trackX, midY - 2, trackW, 4, 2);
+  ctx.fillStyle = tokens.color.border;
+  ctx.fill();
+  ctx.beginPath();
+  roundedRect(ctx, lowX, midY - 2, Math.max(0, highX - lowX), 4, 2);
+  ctx.fillStyle = tokens.color.accent;
+  ctx.fill();
+  for (const x of [lowX, highX]) {
+    ctx.beginPath();
+    ctx.arc(x, midY, 8, 0, Math.PI * 2);
+    ctx.fillStyle = tokens.color.surface;
+    ctx.fill();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = tokens.color.accent;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
 
 // src/charts/slicers/dateRange.ts
 var DAY_MS = 864e5;
@@ -10978,6 +11922,10 @@ function toISODate(ms) {
 }
 function drawDateRange(surface, spec, tokens, size, context) {
   const s = spec;
+  if (surface.headless) {
+    drawDateRangeCanvas(surface, s, tokens, size, context);
+    return;
+  }
   const shell = mountSlicerShell(surface, tokens, size, {
     title: s.title,
     label: slicerLabel(s)
@@ -11050,6 +11998,89 @@ function drawDateRange(surface, spec, tokens, size, context) {
   const active = current?.kind === "range" && (low > min || high < max);
   shell.setClear(active ? clear : null);
 }
+function drawDateRangeCanvas(surface, s, tokens, size, context) {
+  const ctx = surface.marks.ctx;
+  const rect = drawTitleBlock(surface, tokens, size, s.title ?? slicerLabel(s));
+  const ext = dateExtent(slicerSource(s, context), s.field);
+  const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.medium);
+  if (!ext || !(ext[1] > ext[0])) {
+    paintCanvasText(ctx, {
+      x: rect.x,
+      y: rect.y,
+      text: `No date range for "${s.field}".`,
+      font,
+      color: tokens.color.textMuted,
+      size: tokens.font.size.small,
+      baseline: "top"
+    });
+    return;
+  }
+  const [min, max] = ext;
+  const current = currentValue(s, context);
+  const toMs = (v, fallback) => {
+    if (v == null) return fallback;
+    const d = toDate(v);
+    return d ? d.getTime() : fallback;
+  };
+  const low = current?.kind === "range" ? toMs(current.min, min) : min;
+  const high = current?.kind === "range" ? toMs(current.max, max) : max;
+  paintDateFields(ctx, tokens, rect, toISODate(low), toISODate(high));
+}
+function paintDateFields(ctx, tokens, rect, low, high) {
+  const labelFont = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.medium);
+  const valueFont = fontString(tokens.font.size.base, tokens.font.family, tokens.font.weight.normal);
+  const gap = tokens.spacing.sm;
+  const fieldH = 36;
+  const labelH = tokens.font.size.small + 4;
+  const y = rect.y + Math.max(0, (rect.height - (labelH + fieldH)) * 0.12);
+  const arrowW = 18;
+  const fieldW = Math.max(44, (rect.width - gap * 2 - arrowW) / 2);
+  const paintField = (x, label, value) => {
+    paintCanvasText(ctx, {
+      x,
+      y,
+      text: label,
+      font: labelFont,
+      color: tokens.color.textMuted,
+      size: tokens.font.size.small,
+      baseline: "top"
+    });
+    const fy = y + labelH;
+    ctx.save();
+    ctx.beginPath();
+    roundedRect(ctx, x, fy, fieldW, fieldH, tokens.radius.md);
+    ctx.fillStyle = tokens.color.surface;
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = tokens.color.border;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.rect(x + tokens.spacing.sm, fy, Math.max(0, fieldW - tokens.spacing.sm * 2), fieldH);
+    ctx.clip();
+    paintCanvasText(ctx, {
+      x: x + tokens.spacing.sm,
+      y: fy + fieldH / 2,
+      text: value,
+      font: valueFont,
+      color: tokens.color.text,
+      size: tokens.font.size.base,
+      baseline: "middle"
+    });
+    ctx.restore();
+  };
+  paintField(rect.x, "From", low);
+  paintCanvasText(ctx, {
+    x: rect.x + fieldW + gap + arrowW / 2,
+    y: y + labelH + fieldH / 2,
+    text: "\u2192",
+    font: valueFont,
+    color: tokens.color.accent,
+    size: tokens.font.size.base,
+    align: "center",
+    baseline: "middle"
+  });
+  paintField(rect.x + fieldW + gap * 2 + arrowW, "To", high);
+}
 
 // src/interaction/cartesian.ts
 var HIT_RADIUS = 26;
@@ -12015,6 +13046,12 @@ function buildGroups(leaves) {
   }
   return order.map((key) => groups.get(key));
 }
+function tileProbe(treemap, tile) {
+  const probe = { [treemap.encoding.category.field]: tile.category };
+  const groupField = treemap.encoding.group?.field;
+  if (groupField) probe[groupField] = tile.group;
+  return probe;
+}
 function drawRect2(ctx, pen, rect, fill, stroke) {
   if (rect.width <= 0 || rect.height <= 0) return;
   if (pen) {
@@ -12059,6 +13096,7 @@ function addTileLabels(surface, tokens, tile, valueFormat) {
 function drawTreemap(surface, spec, tokens, size, context) {
   const treemap = spec;
   const ctx = surface.marks.ctx;
+  const emphasis = context?.emphasis ?? null;
   const content = drawTitleBlock(surface, tokens, size, treemap.title);
   const leaves = buildLeaves(treemap);
   colorLeaves(leaves, treemap, tokens);
@@ -12080,6 +13118,12 @@ function drawTreemap(surface, spec, tokens, size, context) {
   const tiles = [];
   const stroke = tokens.color.background;
   const groupRects = [];
+  const drawTile = (tile) => {
+    const alpha = emphasis ? emphasis.match(tileProbe(treemap, tile)) ? 1 : emphasis.dim : 1;
+    if (alpha !== 1) ctx.globalAlpha = alpha;
+    drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+    if (alpha !== 1) ctx.globalAlpha = 1;
+  };
   ctx.save();
   if (treemap.encoding.group) {
     const groups = buildGroups(leaves);
@@ -12094,14 +13138,14 @@ function drawTreemap(surface, spec, tokens, size, context) {
       for (const leafNode of layoutTreemap(groupNode.item.leaves, inner)) {
         const tile = { ...leafNode.item, rect: leafNode.rect };
         tiles.push(tile);
-        drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+        drawTile(tile);
       }
     }
   } else {
     for (const leafNode of layoutTreemap(leaves, content)) {
       const tile = { ...leafNode.item, rect: leafNode.rect };
       tiles.push(tile);
-      drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+      drawTile(tile);
     }
   }
   ctx.restore();
@@ -14863,88 +15907,6 @@ function facetReport(spec, layout2, tokens, size) {
   };
 }
 
-// src/runtime/headless.ts
-var DOM_ONLY_TYPES = /* @__PURE__ */ new Set([
-  "kpi",
-  "table",
-  "matrix",
-  "dropdown",
-  "list",
-  "search",
-  "range",
-  "dateRange",
-  "dashboard"
-]);
-function headlessTokens(spec) {
-  const tokens = resolveTheme(spec.theme);
-  const sketch = resolveSketch(spec);
-  return sketch?.font ? withSketchFont(tokens) : tokens;
-}
-function renderToContext(target, spec) {
-  const type = spec.type;
-  if (DOM_ONLY_TYPES.has(type)) {
-    throw new Error(
-      `Graphein: "${type}" is a DOM-only visual and cannot be rendered to a canvas headlessly. Headless rendering supports the canvas charts (line, area, bar, scatter, box, pie, heatmap, sankey, choropleth, combo, histogram, funnel).`
-    );
-  }
-  const ctx = target.marks;
-  const size = { width: target.width, height: target.height };
-  const tokens = headlessTokens(spec);
-  const surface = {
-    headless: true,
-    width: size.width,
-    height: size.height,
-    dpr: 1,
-    marks: { ctx },
-    interaction: { ctx: target.interaction ?? ctx }
-  };
-  const bg = spec.background ?? tokens.color.background;
-  ctx.save();
-  ctx.fillStyle = bg;
-  ctx.fillRect(0, 0, size.width, size.height);
-  ctx.restore();
-  const src = spec.data ?? [];
-  const data = spec.transform?.length ? applyTransforms(spec.transform, src) : src;
-  const effectiveSpec = data === src ? spec : { ...spec, data };
-  if (isFaceted(effectiveSpec)) {
-    const layout2 = buildFacetModels(effectiveSpec, tokens, size);
-    if (layout2) {
-      drawFacet(surface, effectiveSpec, layout2, tokens);
-      return facetReport(effectiveSpec, layout2, tokens, size);
-    }
-  }
-  let reportModel;
-  if (CARTESIAN_TYPES.has(type)) {
-    const renderer = cartesianRenderers[type];
-    const model = buildCartesianModel(effectiveSpec, tokens, size);
-    reportModel = model;
-    drawAxesUnderlay(surface, model);
-    if (renderer) renderer(surface, model);
-    drawTrendlines(surface, model);
-    drawAnnotations(surface, model);
-    drawOverlay(surface, model);
-    drawAnnotationLabels(surface, model);
-    drawTrendlineLabels(surface, model);
-  } else {
-    const renderer = customRenderers[type];
-    if (!renderer) {
-      throw new Error(`Graphein: no renderer registered for chart type "${type}".`);
-    }
-    const rctx = {
-      emphasis: null,
-      store: createSelectionStore(),
-      param: void 0,
-      def: void 0,
-      sourceData: src,
-      framed: false,
-      requestRedraw: () => {
-      }
-    };
-    renderer(surface, effectiveSpec, tokens, size, rctx);
-  }
-  return buildRenderReport({ type, spec, data, tokens, size, model: reportModel });
-}
-
 // src/render/fonts.ts
 function fontFaceSet() {
   try {
@@ -16055,9 +17017,180 @@ function renderDashboard(target, spec, options) {
   };
 }
 
+// src/runtime/dashboardHeadless.ts
+var HEADER_H = 44;
+var SECTION_TITLE_H = 26;
+function renderDashboardToContext(target, spec) {
+  const ctx = target.marks;
+  const tokens = resolveTheme(spec.theme);
+  const layout2 = resolveDashboardLayout(spec.layout);
+  const gap = layout2.gap;
+  const pad3 = layout2.padding ?? Math.round(gap * 1.4);
+  ctx.save();
+  ctx.fillStyle = spec.background ?? tokens.color.background;
+  ctx.fillRect(0, 0, target.width, target.height);
+  ctx.restore();
+  const titleText3 = typeof spec.title === "string" ? spec.title : spec.title?.text;
+  let cursorY = pad3;
+  if (titleText3 || spec.subtitle) {
+    ctx.save();
+    ctx.fillStyle = tokens.color.accent;
+    ctx.fillRect(pad3, cursorY + 2, 5, 30);
+    ctx.fillStyle = tokens.color.text;
+    ctx.textBaseline = "top";
+    ctx.font = `${tokens.font.weight.bold} ${tokens.font.size.title}px ${tokens.font.family}`;
+    if (titleText3) ctx.fillText(titleText3, pad3 + 14, cursorY + 2);
+    if (spec.subtitle) {
+      ctx.fillStyle = tokens.color.textMuted;
+      ctx.font = `${tokens.font.weight.normal} ${tokens.font.size.small}px ${tokens.font.family}`;
+      ctx.fillText(spec.subtitle, pad3 + 14, cursorY + 24);
+    }
+    ctx.restore();
+    cursorY += HEADER_H;
+  }
+  const wired = wireViews(spec.views, spec.interactions ?? "auto");
+  const sections = resolveDashboardSections(wired, layout2);
+  let markCount = 0;
+  let allOk = true;
+  let views = 0;
+  for (const section of sections) {
+    if (section.collapsed) continue;
+    if (section.section?.title) {
+      ctx.save();
+      ctx.fillStyle = tokens.color.text;
+      ctx.textBaseline = "top";
+      ctx.font = `${tokens.font.weight.bold} ${tokens.font.size.base}px ${tokens.font.family}`;
+      ctx.fillText(section.section.title, pad3, cursorY);
+      ctx.restore();
+      cursorY += SECTION_TITLE_H;
+    }
+    const cols = Math.max(1, section.cols);
+    const innerW = target.width - pad3 * 2;
+    const colW = (innerW - gap * (cols - 1)) / cols;
+    const cells = placeViews(section.views, cols, layout2.preset);
+    const flow = { x: 1, y: 1, rowH: 0 };
+    let maxBottom = cursorY;
+    for (const cell of cells) {
+      let gx = cell.x;
+      let gy = cell.y;
+      if (gx == null || gy == null) {
+        if (flow.x + cell.w - 1 > cols) {
+          flow.x = 1;
+          flow.y += Math.max(1, flow.rowH);
+          flow.rowH = 0;
+        }
+        gx = flow.x;
+        gy = flow.y;
+        flow.x += cell.w;
+        flow.rowH = Math.max(flow.rowH, cell.h);
+      }
+      const cx = pad3 + (gx - 1) * (colW + gap);
+      const cy = cursorY + (gy - 1) * (section.rowHeight + gap);
+      const cw = cell.w * colW + (cell.w - 1) * gap;
+      const ch = cell.h * section.rowHeight + (cell.h - 1) * gap;
+      const viewSpec = inheritInto(cell.view.spec, spec, tokens);
+      ctx.save();
+      ctx.translate(cx, cy);
+      ctx.beginPath();
+      ctx.rect(0, 0, cw, ch);
+      ctx.clip();
+      try {
+        const r = renderToContext({ marks: ctx, interaction: target.interaction, width: cw, height: ch }, viewSpec);
+        markCount += r.markCount;
+        if (!r.ok) allOk = false;
+        views++;
+      } catch {
+        allOk = false;
+      }
+      ctx.restore();
+      maxBottom = Math.max(maxBottom, cy + ch);
+    }
+    cursorY = maxBottom + gap;
+  }
+  return {
+    type: "dashboard",
+    size: { width: target.width, height: target.height },
+    markCount,
+    seriesCount: views,
+    colorCount: 1,
+    ok: allOk,
+    diagnostics: [],
+    summary: `Dashboard of ${views} view${views === 1 ? "" : "s"}.`
+  };
+}
+
+// src/runtime/headless.ts
+function headlessTokens(spec) {
+  const tokens = resolveTheme(spec.theme);
+  const sketch = resolveSketch(spec);
+  return sketch?.font ? withSketchFont(tokens) : tokens;
+}
+function renderToContext(target, spec) {
+  const type = spec.type;
+  if (type === "dashboard") {
+    return renderDashboardToContext(target, spec);
+  }
+  const ctx = target.marks;
+  const size = { width: target.width, height: target.height };
+  const tokens = headlessTokens(spec);
+  const surface = {
+    headless: true,
+    width: size.width,
+    height: size.height,
+    dpr: 1,
+    marks: { ctx },
+    interaction: { ctx: target.interaction ?? ctx }
+  };
+  const bg = spec.background ?? tokens.color.background;
+  ctx.save();
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, size.width, size.height);
+  ctx.restore();
+  const src = spec.data ?? [];
+  const data = spec.transform?.length ? applyTransforms(spec.transform, src) : src;
+  const effectiveSpec = data === src ? spec : { ...spec, data };
+  if (isFaceted(effectiveSpec)) {
+    const layout2 = buildFacetModels(effectiveSpec, tokens, size);
+    if (layout2) {
+      drawFacet(surface, effectiveSpec, layout2, tokens);
+      return facetReport(effectiveSpec, layout2, tokens, size);
+    }
+  }
+  let reportModel;
+  if (CARTESIAN_TYPES.has(type)) {
+    const renderer = cartesianRenderers[type];
+    const model = buildCartesianModel(effectiveSpec, tokens, size);
+    reportModel = model;
+    drawAxesUnderlay(surface, model);
+    if (renderer) renderer(surface, model);
+    drawTrendlines(surface, model);
+    drawAnnotations(surface, model);
+    drawOverlay(surface, model);
+    drawAnnotationLabels(surface, model);
+    drawTrendlineLabels(surface, model);
+  } else {
+    const renderer = customRenderers[type];
+    if (!renderer) {
+      throw new Error(`Graphein: no renderer registered for chart type "${type}".`);
+    }
+    const rctx = {
+      emphasis: null,
+      store: createSelectionStore(),
+      param: void 0,
+      def: void 0,
+      sourceData: src,
+      framed: false,
+      requestRedraw: () => {
+      }
+    };
+    renderer(surface, effectiveSpec, tokens, size, rctx);
+  }
+  return buildRenderReport({ type, spec, data, tokens, size, model: reportModel });
+}
+
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, relativeLuminance, render, renderDashboard, renderToContext, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
+export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, relativeLuminance, render, renderDashboard, renderToContext, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map