graphein 0.6.0 → 0.7.1

package/dist/index.js

@@ -8739,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);
@@ -8807,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;
@@ -9622,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() {
@@ -9969,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";
@@ -10025,8 +10433,43 @@ 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 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 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)))
+    )
+  );
+  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 ?? [];
@@ -10197,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,
@@ -10251,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;
@@ -10862,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)
@@ -10942,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)
@@ -10985,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)
@@ -11106,16 +11688,101 @@ function drawList(surface, spec, tokens, size, context) {
           }
         }
       });
-      listEl.appendChild(row);
+      listEl.appendChild(row);
+    }
+  };
+  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"
+      });
     }
-  };
-  rebuild();
-  shell.setClear(selected.size ? clearAll : null);
+    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)
@@ -11157,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;
@@ -11181,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)
@@ -11253,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;
@@ -15079,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 {
@@ -15194,6 +15940,7 @@ var CANVAS_MARK_TYPES = /* @__PURE__ */ new Set([
   "sankey",
   "choropleth"
 ]);
+var EMPTY_DATA = [];
 function resolveContainer(target) {
   if (typeof target === "string") {
     const el = document.querySelector(target);
@@ -15245,7 +15992,7 @@ function render(target, spec, options) {
   let txDef;
   let txOut = [];
   const effectiveData2 = () => {
-    const src = currentSpec.data ?? [];
+    const src = currentSpec.data ?? EMPTY_DATA;
     const tx = currentSpec.transform;
     if (!tx || tx.length === 0) return src;
     if (txSrc === src && txDef === tx) return txOut;
@@ -15283,7 +16030,7 @@ function render(target, spec, options) {
     const filterValues = resolveFilterValues(currentSpec.filter, store);
     const baseData = effectiveData2();
     const filtered = filterValues.length ? filterRows(baseData, filterValues) : baseData;
-    const effectiveSpec = filtered === baseData ? currentSpec : { ...currentSpec, data: filtered };
+    const effectiveSpec = filtered === (currentSpec.data ?? EMPTY_DATA) ? currentSpec : { ...currentSpec, data: filtered };
     const emphasis = resolveEmphasis(currentSpec.highlight, store, DIM_ALPHA);
     const ownParam = currentSpec.params?.[0];
     let interactionModel = null;
@@ -16271,9 +17018,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