@opendata-ai/openchart-engine 1.2.0

package/dist/index.js

@@ -0,0 +1,4227 @@
+// src/compile.ts
+import {
+  adaptTheme as adaptTheme2,
+  generateAltText,
+  generateDataTable,
+  getBreakpoint,
+  getLayoutStrategy,
+  resolveTheme as resolveTheme2
+} from "@opendata-ai/openchart-core";
+
+// src/annotations/compute.ts
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
+var DEFAULT_ANNOTATION_FONT_SIZE = 12;
+var DEFAULT_ANNOTATION_FONT_WEIGHT = 400;
+var DEFAULT_RANGE_FILL = "#f0c040";
+var DEFAULT_RANGE_OPACITY = 0.15;
+var DEFAULT_REFLINE_DASH = "4 3";
+var LIGHT_TEXT_FILL = "#333333";
+var DARK_TEXT_FILL = "#d1d5db";
+var LIGHT_REFLINE_STROKE = "#888888";
+var DARK_REFLINE_STROKE = "#9ca3af";
+var ANCHOR_OFFSET = 8;
+function resolvePosition(value, scale) {
+  if (!scale) return null;
+  const s = scale.scale;
+  const type = scale.type;
+  if (type === "time") {
+    const date = new Date(String(value));
+    if (Number.isNaN(date.getTime())) return null;
+    return s(date);
+  }
+  if (type === "linear" || type === "log") {
+    const num = typeof value === "number" ? value : Number(value);
+    if (!Number.isFinite(num)) return null;
+    return s(num);
+  }
+  if (type === "band") {
+    const bandScale = s;
+    const pos = bandScale(String(value));
+    if (pos === void 0) return null;
+    return pos + (bandScale.bandwidth?.() ?? 0) / 2;
+  }
+  try {
+    return s(String(value));
+  } catch {
+    return null;
+  }
+}
+function makeAnnotationLabelStyle(fontSize, fontWeight, fill, isDark) {
+  const defaultFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
+  return {
+    fontFamily: "Inter, system-ui, sans-serif",
+    fontSize: fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE,
+    fontWeight: fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT,
+    fill: fill ?? defaultFill,
+    lineHeight: 1.3,
+    textAnchor: "start"
+  };
+}
+function computeAnchorOffset(anchor, _px, py, chartArea) {
+  if (!anchor || anchor === "auto") {
+    const isUpperHalf = py < chartArea.y + chartArea.height / 2;
+    return isUpperHalf ? { dx: ANCHOR_OFFSET, dy: ANCHOR_OFFSET } : { dx: ANCHOR_OFFSET, dy: -ANCHOR_OFFSET };
+  }
+  switch (anchor) {
+    case "top":
+      return { dx: 0, dy: -ANCHOR_OFFSET };
+    case "bottom":
+      return { dx: 0, dy: ANCHOR_OFFSET };
+    case "left":
+      return { dx: -ANCHOR_OFFSET, dy: 0 };
+    case "right":
+      return { dx: ANCHOR_OFFSET, dy: 0 };
+  }
+}
+function applyOffset(base, offset) {
+  if (!offset) return base;
+  return {
+    dx: base.dx + (offset.dx ?? 0),
+    dy: base.dy + (offset.dy ?? 0)
+  };
+}
+function resolveTextAnnotation(annotation, scales, chartArea, isDark) {
+  const px = resolvePosition(annotation.x, scales.x);
+  const py = resolvePosition(annotation.y, scales.y);
+  if (px === null || py === null) return null;
+  const defaultTextFill = isDark ? DARK_TEXT_FILL : LIGHT_TEXT_FILL;
+  const labelStyle = makeAnnotationLabelStyle(
+    annotation.fontSize,
+    annotation.fontWeight,
+    annotation.fill ?? defaultTextFill,
+    isDark
+  );
+  const anchorDelta = computeAnchorOffset(annotation.anchor, px, py, chartArea);
+  const finalDelta = applyOffset(anchorDelta, annotation.offset);
+  const labelX = px + finalDelta.dx;
+  const labelY = py + finalDelta.dy;
+  const showConnector = annotation.connector !== false;
+  const connectorStyle = annotation.connector === "curve" ? "curve" : "straight";
+  const fontSize = annotation.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const fontWeight = annotation.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+  const lines = annotation.text.split("\n");
+  const lineHeight = 1.3;
+  let connectorFromX;
+  if (connectorStyle === "curve") {
+    connectorFromX = labelX + estimateTextWidth(annotation.text, fontSize, fontWeight);
+  } else if (lines.length > 1) {
+    connectorFromX = labelX;
+  } else {
+    connectorFromX = labelX + estimateTextWidth(annotation.text, fontSize, fontWeight) / 2;
+  }
+  const connectorFromY = labelY + (lines.length - 1) * fontSize * lineHeight + fontSize * 0.3;
+  const baseFrom = { x: connectorFromX, y: connectorFromY };
+  const baseTo = { x: px, y: py };
+  const adjustedFrom = {
+    x: baseFrom.x + (annotation.connectorOffset?.from?.dx ?? 0),
+    y: baseFrom.y + (annotation.connectorOffset?.from?.dy ?? 0)
+  };
+  const adjustedToRaw = {
+    x: baseTo.x + (annotation.connectorOffset?.to?.dx ?? 0),
+    y: baseTo.y + (annotation.connectorOffset?.to?.dy ?? 0)
+  };
+  const GAP = 4;
+  const cdx = adjustedToRaw.x - adjustedFrom.x;
+  const cdy = adjustedToRaw.y - adjustedFrom.y;
+  const dist = Math.sqrt(cdx * cdx + cdy * cdy);
+  const adjustedTo = dist > GAP * 2 ? { x: adjustedToRaw.x - cdx / dist * GAP, y: adjustedToRaw.y - cdy / dist * GAP } : adjustedToRaw;
+  const label = {
+    text: annotation.text,
+    x: labelX,
+    y: labelY,
+    style: labelStyle,
+    visible: true,
+    connector: showConnector ? {
+      from: adjustedFrom,
+      to: adjustedTo,
+      stroke: annotation.stroke ?? "#999999",
+      style: connectorStyle
+    } : void 0,
+    background: annotation.background
+  };
+  return {
+    type: "text",
+    label,
+    stroke: annotation.stroke,
+    fill: annotation.fill,
+    opacity: annotation.opacity,
+    zIndex: annotation.zIndex
+  };
+}
+function resolveRangeAnnotation(annotation, scales, chartArea, isDark) {
+  let x = chartArea.x;
+  let y = chartArea.y;
+  let width = chartArea.width;
+  let height = chartArea.height;
+  if (annotation.x1 !== void 0 && annotation.x2 !== void 0) {
+    const x1px = resolvePosition(annotation.x1, scales.x);
+    const x2px = resolvePosition(annotation.x2, scales.x);
+    if (x1px === null || x2px === null) return null;
+    x = Math.min(x1px, x2px);
+    width = Math.abs(x2px - x1px);
+  }
+  if (annotation.y1 !== void 0 && annotation.y2 !== void 0) {
+    const y1px = resolvePosition(annotation.y1, scales.y);
+    const y2px = resolvePosition(annotation.y2, scales.y);
+    if (y1px === null || y2px === null) return null;
+    y = Math.min(y1px, y2px);
+    height = Math.abs(y2px - y1px);
+  }
+  const rect = { x, y, width, height };
+  let label;
+  if (annotation.label) {
+    const baseDx = 4;
+    const baseDy = 14;
+    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
+    label = {
+      text: annotation.label,
+      x: x + labelDelta.dx,
+      y: y + labelDelta.dy,
+      style: makeAnnotationLabelStyle(11, 500, void 0, isDark),
+      visible: true
+    };
+  }
+  const defaultOpacity = isDark ? 0.2 : DEFAULT_RANGE_OPACITY;
+  return {
+    type: "range",
+    rect,
+    label,
+    fill: annotation.fill ?? DEFAULT_RANGE_FILL,
+    opacity: annotation.opacity ?? defaultOpacity,
+    stroke: annotation.stroke,
+    zIndex: annotation.zIndex
+  };
+}
+function resolveRefLineAnnotation(annotation, scales, chartArea, isDark) {
+  let start;
+  let end;
+  if (annotation.y !== void 0) {
+    const yPx = resolvePosition(annotation.y, scales.y);
+    if (yPx === null) return null;
+    start = { x: chartArea.x, y: yPx };
+    end = { x: chartArea.x + chartArea.width, y: yPx };
+  } else if (annotation.x !== void 0) {
+    const xPx = resolvePosition(annotation.x, scales.x);
+    if (xPx === null) return null;
+    start = { x: xPx, y: chartArea.y };
+    end = { x: xPx, y: chartArea.y + chartArea.height };
+  } else {
+    return null;
+  }
+  let strokeDasharray;
+  if (annotation.style === "dashed" || annotation.style === void 0) {
+    strokeDasharray = DEFAULT_REFLINE_DASH;
+  } else if (annotation.style === "dotted") {
+    strokeDasharray = "2 2";
+  }
+  let label;
+  if (annotation.label) {
+    const isHorizontal = annotation.y !== void 0;
+    const baseDx = isHorizontal ? -4 : 4;
+    const baseDy = -4;
+    const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
+    const defaultStroke2 = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
+    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke2, isDark);
+    if (isHorizontal) {
+      style.textAnchor = "end";
+    }
+    label = {
+      text: annotation.label,
+      x: (isHorizontal ? end.x : start.x) + labelDelta.dx,
+      y: (isHorizontal ? end.y : start.y) + labelDelta.dy,
+      style,
+      visible: true
+    };
+  }
+  const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
+  return {
+    type: "refline",
+    line: { start, end },
+    label,
+    stroke: annotation.stroke ?? defaultStroke,
+    strokeDasharray,
+    strokeWidth: annotation.strokeWidth ?? 1,
+    zIndex: annotation.zIndex
+  };
+}
+function estimateLabelBounds(label) {
+  const lines = label.text.split("\n");
+  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+  const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
+  const lineHeight = label.style.lineHeight ?? 1.3;
+  const maxWidth = Math.max(...lines.map((line3) => estimateTextWidth(line3, fontSize, fontWeight)));
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const isMultiLine = lines.length > 1;
+  const anchorX = isMultiLine ? label.x - maxWidth / 2 : label.x;
+  return {
+    x: anchorX,
+    y: label.y - fontSize,
+    width: maxWidth,
+    height: totalHeight
+  };
+}
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+}
+var NUDGE_PADDING = 6;
+function nudgeAnnotationFromObstacles(annotation, originalAnnotation, scales, chartArea, obstacles) {
+  if (annotation.type !== "text" || !annotation.label) return false;
+  const labelBounds = estimateLabelBounds(annotation.label);
+  const collidingObs = obstacles.filter(
+    (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(labelBounds, obs)
+  );
+  if (collidingObs.length === 0) return false;
+  const px = resolvePosition(originalAnnotation.x, scales.x);
+  const py = resolvePosition(originalAnnotation.y, scales.y);
+  if (px === null || py === null) return false;
+  const candidates = [];
+  const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split("\n").length);
+  for (const obs of collidingObs) {
+    const currentLabelTop = labelBounds.y;
+    const targetLabelTop = obs.y + obs.height + NUDGE_PADDING;
+    const belowDy = targetLabelTop - currentLabelTop;
+    candidates.push({ dx: 0, dy: belowDy, distance: Math.abs(belowDy) });
+    const currentLabelBottom = labelBounds.y + labelBounds.height;
+    const targetLabelBottom = obs.y - NUDGE_PADDING;
+    const aboveDy = targetLabelBottom - currentLabelBottom;
+    candidates.push({ dx: 0, dy: aboveDy, distance: Math.abs(aboveDy) });
+    const currentLabelRight = labelBounds.x + labelBounds.width;
+    const targetLabelRight = obs.x - NUDGE_PADDING;
+    const leftDx = targetLabelRight - currentLabelRight;
+    candidates.push({ dx: leftDx, dy: 0, distance: Math.abs(leftDx) });
+    const currentLabelLeft = labelBounds.x;
+    const targetLabelLeft = obs.x + obs.width + NUDGE_PADDING;
+    const rightDx = targetLabelLeft - currentLabelLeft;
+    candidates.push({ dx: rightDx, dy: 0, distance: Math.abs(rightDx) });
+  }
+  candidates.sort((a, b) => a.distance - b.distance);
+  for (const { dx, dy } of candidates) {
+    const candidateLabel = {
+      ...annotation.label,
+      x: annotation.label.x + dx,
+      y: annotation.label.y + dy,
+      connector: annotation.label.connector ? {
+        ...annotation.label.connector,
+        from: {
+          x: annotation.label.connector.from.x + dx,
+          y: annotation.label.connector.from.y + dy
+        }
+      } : void 0
+    };
+    const candidateBounds = estimateLabelBounds(candidateLabel);
+    const stillCollides = obstacles.some(
+      (obs) => obs.width > 0 && obs.height > 0 && rectsOverlap(candidateBounds, obs)
+    );
+    if (stillCollides) continue;
+    const labelCenterX = candidateBounds.x + candidateBounds.width / 2;
+    const labelCenterY = candidateBounds.y + candidateBounds.height / 2;
+    const inBounds = labelCenterX >= chartArea.x && labelCenterX <= chartArea.x + chartArea.width + 100 && labelCenterY >= chartArea.y - fontSize && labelCenterY <= chartArea.y + chartArea.height + fontSize;
+    if (inBounds) {
+      if (candidateLabel.connector && dx === 0 && dy !== 0) {
+        candidateLabel.connector = {
+          ...candidateLabel.connector,
+          style: "caret"
+        };
+      }
+      annotation.label = candidateLabel;
+      return true;
+    }
+  }
+  return false;
+}
+function computeAnnotations(spec, scales, chartArea, strategy, isDark = false, obstacles = []) {
+  if (strategy.annotationPosition === "tooltip-only") {
+    return [];
+  }
+  const annotations = [];
+  for (const annotation of spec.annotations) {
+    let resolved = null;
+    switch (annotation.type) {
+      case "text":
+        resolved = resolveTextAnnotation(annotation, scales, chartArea, isDark);
+        break;
+      case "range":
+        resolved = resolveRangeAnnotation(annotation, scales, chartArea, isDark);
+        break;
+      case "refline":
+        resolved = resolveRefLineAnnotation(annotation, scales, chartArea, isDark);
+        break;
+    }
+    if (resolved) {
+      if (annotation.type === "text" && obstacles.length > 0) {
+        nudgeAnnotationFromObstacles(resolved, annotation, scales, chartArea, obstacles);
+      }
+      annotations.push(resolved);
+    }
+  }
+  annotations.sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+  return annotations;
+}
+
+// src/charts/bar/compute.ts
+import { abbreviateNumber, formatNumber } from "@opendata-ai/openchart-core";
+
+// src/charts/utils.ts
+var DEFAULT_COLOR = "#1b7fa3";
+function scaleValue(scale, scaleType, value) {
+  if (value == null) return null;
+  if (scaleType === "time") {
+    const date = value instanceof Date ? value : new Date(String(value));
+    if (Number.isNaN(date.getTime())) return null;
+    return scale(date);
+  }
+  if (scaleType === "point" || scaleType === "band" || scaleType === "ordinal") {
+    const result = scale(String(value));
+    return result ?? null;
+  }
+  const num = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(num)) return null;
+  return scale(num);
+}
+function groupByField(data, field) {
+  const groups = /* @__PURE__ */ new Map();
+  if (!field) {
+    groups.set("__default__", data);
+    return groups;
+  }
+  for (const row of data) {
+    const key = String(row[field] ?? "__default__");
+    const existing = groups.get(key);
+    if (existing) {
+      existing.push(row);
+    } else {
+      groups.set(key, [row]);
+    }
+  }
+  return groups;
+}
+function getColor(scales, key, _index, fallback = DEFAULT_COLOR) {
+  if (scales.color && key !== "__default__") {
+    const colorScale = scales.color.scale;
+    return colorScale(key);
+  }
+  return scales.defaultColor ?? fallback;
+}
+function getSequentialColor(scales, value, fallback = DEFAULT_COLOR) {
+  if (scales.color?.type === "sequential") {
+    const colorScale = scales.color.scale;
+    return colorScale(value);
+  }
+  return scales.defaultColor ?? fallback;
+}
+
+// src/charts/bar/compute.ts
+var MIN_BAR_WIDTH = 1;
+function formatBarValue(value) {
+  if (Math.abs(value) >= 1e3) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+function computeBarMarks(spec, scales, _chartArea, _strategy) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const yScale = scales.y.scale;
+  const xScale = scales.x.scale;
+  if (typeof yScale.bandwidth !== "function") {
+    return [];
+  }
+  const bandwidth = yScale.bandwidth();
+  const baseline = xScale(0);
+  const colorField = encoding.color?.field;
+  const isSequentialColor = encoding.color?.type === "quantitative";
+  if (!colorField || isSequentialColor) {
+    return computeSimpleBars(
+      spec.data,
+      xChannel.field,
+      yChannel.field,
+      xScale,
+      yScale,
+      bandwidth,
+      baseline,
+      scales,
+      isSequentialColor
+    );
+  }
+  return computeStackedBars(
+    spec.data,
+    xChannel.field,
+    yChannel.field,
+    colorField,
+    xScale,
+    yScale,
+    bandwidth,
+    baseline,
+    scales
+  );
+}
+function computeStackedBars(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
+  const marks = [];
+  const categoryGroups = groupByField(data, categoryField);
+  for (const [category, rows] of categoryGroups) {
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    let cumulativeValue = 0;
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? "");
+      const value = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value) || value <= 0) continue;
+      const color = getColor(scales, groupKey);
+      const xLeft = xScale(cumulativeValue);
+      const xRight = xScale(cumulativeValue + value);
+      const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
+      const aria = {
+        label: `${category}, ${groupKey}: ${formatBarValue(value)}`
+      };
+      marks.push({
+        type: "rect",
+        x: xLeft,
+        y: bandY,
+        width: barWidth,
+        height: bandwidth,
+        fill: color,
+        cornerRadius: 0,
+        data: row,
+        aria
+      });
+      cumulativeValue += value;
+    }
+  }
+  return marks;
+}
+function computeSimpleBars(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false) {
+  const marks = [];
+  for (const row of data) {
+    const category = String(row[categoryField] ?? "");
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value)) continue;
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    const color = sequentialColor ? getSequentialColor(scales, value) : getColor(scales, "__default__");
+    const xPos = value >= 0 ? baseline : xScale(value);
+    const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
+    const aria = {
+      label: `${category}: ${formatBarValue(value)}`
+    };
+    marks.push({
+      type: "rect",
+      x: xPos,
+      y: bandY,
+      width: barWidth,
+      height: bandwidth,
+      fill: color,
+      cornerRadius: 2,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+
+// src/charts/bar/labels.ts
+import { estimateTextWidth as estimateTextWidth2, resolveCollisions } from "@opendata-ai/openchart-core";
+var LABEL_FONT_SIZE = 11;
+var LABEL_FONT_WEIGHT = 600;
+var LABEL_PADDING = 6;
+var MIN_WIDTH_FOR_INSIDE_LABEL = 40;
+function computeBarLabels(marks, _chartArea, density = "auto") {
+  if (density === "none") return [];
+  const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const candidates = [];
+  for (const mark of targetMarks) {
+    const ariaLabel = mark.aria.label;
+    const lastColon = ariaLabel.lastIndexOf(":");
+    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!valuePart) continue;
+    const textWidth = estimateTextWidth2(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
+    const textHeight = LABEL_FONT_SIZE * 1.2;
+    const isStacked = mark.cornerRadius === 0;
+    const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
+    let anchorX;
+    let fill;
+    let textAnchor;
+    if (isStacked && isInside) {
+      anchorX = mark.x + mark.width / 2;
+      fill = "#ffffff";
+      textAnchor = "middle";
+    } else if (isInside) {
+      anchorX = mark.x + mark.width - LABEL_PADDING;
+      fill = "#ffffff";
+      textAnchor = "end";
+    } else {
+      anchorX = mark.x + mark.width + LABEL_PADDING;
+      fill = mark.fill;
+      textAnchor = "start";
+    }
+    const anchorY = mark.y + mark.height / 2;
+    candidates.push({
+      text: valuePart,
+      anchorX,
+      anchorY,
+      width: textWidth,
+      height: textHeight,
+      priority: "data",
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: LABEL_FONT_SIZE,
+        fontWeight: LABEL_FONT_WEIGHT,
+        fill,
+        lineHeight: 1.2,
+        textAnchor,
+        dominantBaseline: "central"
+      }
+    });
+  }
+  if (candidates.length === 0) return [];
+  if (density === "all") {
+    return candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  }
+  return resolveCollisions(candidates);
+}
+
+// src/charts/bar/index.ts
+var barRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const marks = computeBarMarks(spec, scales, chartArea, strategy);
+  const labels = computeBarLabels(marks, chartArea, spec.labels.density);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+
+// src/charts/column/compute.ts
+import { abbreviateNumber as abbreviateNumber2, formatNumber as formatNumber2 } from "@opendata-ai/openchart-core";
+var MIN_COLUMN_HEIGHT = 1;
+function formatColumnValue(value) {
+  if (Math.abs(value) >= 1e3) return abbreviateNumber2(value);
+  return formatNumber2(value);
+}
+function computeColumnMarks(spec, scales, _chartArea, _strategy) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const xScale = scales.x.scale;
+  const yScale = scales.y.scale;
+  if (typeof xScale.bandwidth !== "function") {
+    return [];
+  }
+  const bandwidth = xScale.bandwidth();
+  const baseline = yScale(0);
+  const colorField = encoding.color?.field;
+  const isSequentialColor = encoding.color?.type === "quantitative";
+  if (colorField && !isSequentialColor) {
+    const categoryGroups = groupByField(spec.data, xChannel.field);
+    const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
+    if (needsStacking) {
+      return computeStackedColumns(
+        spec.data,
+        xChannel.field,
+        yChannel.field,
+        colorField,
+        xScale,
+        yScale,
+        bandwidth,
+        baseline,
+        scales
+      );
+    }
+    return computeColoredColumns(
+      spec.data,
+      xChannel.field,
+      yChannel.field,
+      colorField,
+      xScale,
+      yScale,
+      bandwidth,
+      baseline,
+      scales
+    );
+  }
+  return computeSimpleColumns(
+    spec.data,
+    xChannel.field,
+    yChannel.field,
+    xScale,
+    yScale,
+    bandwidth,
+    baseline,
+    scales,
+    isSequentialColor
+  );
+}
+function computeSimpleColumns(data, categoryField, valueField, xScale, yScale, bandwidth, baseline, scales, sequentialColor = false) {
+  const marks = [];
+  for (const row of data) {
+    const category = String(row[categoryField] ?? "");
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value)) continue;
+    const bandX = xScale(category);
+    if (bandX === void 0) continue;
+    const color = sequentialColor ? getSequentialColor(scales, value) : getColor(scales, "__default__");
+    const yPos = yScale(value);
+    const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
+    const y = value >= 0 ? yPos : baseline;
+    const aria = {
+      label: `${category}: ${formatColumnValue(value)}`
+    };
+    marks.push({
+      type: "rect",
+      x: bandX,
+      y,
+      width: bandwidth,
+      height: columnHeight,
+      fill: color,
+      cornerRadius: 2,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+function computeColoredColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, baseline, scales) {
+  const marks = [];
+  for (const row of data) {
+    const category = String(row[categoryField] ?? "");
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value)) continue;
+    const bandX = xScale(category);
+    if (bandX === void 0) continue;
+    const groupKey = String(row[colorField] ?? "");
+    const color = getColor(scales, groupKey);
+    const yPos = yScale(value);
+    const columnHeight = Math.max(Math.abs(baseline - yPos), MIN_COLUMN_HEIGHT);
+    const y = value >= 0 ? yPos : baseline;
+    const aria = {
+      label: `${category}, ${groupKey}: ${formatColumnValue(value)}`
+    };
+    marks.push({
+      type: "rect",
+      x: bandX,
+      y,
+      width: bandwidth,
+      height: columnHeight,
+      fill: color,
+      cornerRadius: 2,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+function computeStackedColumns(data, categoryField, valueField, colorField, xScale, yScale, bandwidth, _baseline, scales) {
+  const marks = [];
+  const categoryGroups = groupByField(data, categoryField);
+  for (const [category, rows] of categoryGroups) {
+    const bandX = xScale(category);
+    if (bandX === void 0) continue;
+    let cumulativeValue = 0;
+    for (const row of rows) {
+      const groupKey = String(row[colorField] ?? "");
+      const value = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value) || value <= 0) continue;
+      const color = getColor(scales, groupKey);
+      const yTop = yScale(cumulativeValue + value);
+      const yBottom = yScale(cumulativeValue);
+      const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
+      const aria = {
+        label: `${category}, ${groupKey}: ${formatColumnValue(value)}`
+      };
+      marks.push({
+        type: "rect",
+        x: bandX,
+        y: yTop,
+        width: bandwidth,
+        height: columnHeight,
+        fill: color,
+        cornerRadius: 0,
+        data: row,
+        aria
+      });
+      cumulativeValue += value;
+    }
+  }
+  return marks;
+}
+
+// src/charts/column/labels.ts
+import { estimateTextWidth as estimateTextWidth3, resolveCollisions as resolveCollisions2 } from "@opendata-ai/openchart-core";
+var LABEL_FONT_SIZE2 = 10;
+var LABEL_FONT_WEIGHT2 = 600;
+var LABEL_OFFSET_Y = 6;
+function computeColumnLabels(marks, _chartArea, density = "auto") {
+  if (density === "none") return [];
+  const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const candidates = [];
+  for (const mark of targetMarks) {
+    const ariaLabel = mark.aria.label;
+    const lastColon = ariaLabel.lastIndexOf(":");
+    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!valuePart) continue;
+    const numericValue = parseFloat(valuePart);
+    const isNegative = Number.isFinite(numericValue) && numericValue < 0;
+    const textWidth = estimateTextWidth3(valuePart, LABEL_FONT_SIZE2, LABEL_FONT_WEIGHT2);
+    const textHeight = LABEL_FONT_SIZE2 * 1.2;
+    const anchorX = mark.x + mark.width / 2 - textWidth / 2;
+    const anchorY = isNegative ? mark.y + mark.height + LABEL_OFFSET_Y : mark.y - LABEL_OFFSET_Y - textHeight;
+    candidates.push({
+      text: valuePart,
+      anchorX,
+      anchorY,
+      width: textWidth,
+      height: textHeight,
+      priority: "data",
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: LABEL_FONT_SIZE2,
+        fontWeight: LABEL_FONT_WEIGHT2,
+        fill: mark.fill,
+        lineHeight: 1.2,
+        textAnchor: "middle",
+        dominantBaseline: isNegative ? "hanging" : "auto"
+      }
+    });
+  }
+  if (candidates.length === 0) return [];
+  if (density === "all") {
+    return candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  }
+  return resolveCollisions2(candidates);
+}
+
+// src/charts/column/index.ts
+var columnRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const marks = computeColumnMarks(spec, scales, chartArea, strategy);
+  const labels = computeColumnLabels(marks, chartArea, spec.labels.density);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+
+// src/charts/dot/compute.ts
+var DOT_RADIUS = 6;
+var STEM_WIDTH = 2;
+var STEM_COLOR = "#cccccc";
+function computeDotMarks(spec, scales, _chartArea, _strategy) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const xScale = scales.x.scale;
+  const yScale = scales.y.scale;
+  if (typeof yScale.bandwidth !== "function") {
+    return [];
+  }
+  const bandwidth = yScale.bandwidth();
+  const baseline = xScale(0);
+  const colorField = encoding.color?.field;
+  if (colorField) {
+    return computeDumbbellMarks(
+      spec.data,
+      xChannel.field,
+      yChannel.field,
+      colorField,
+      xScale,
+      yScale,
+      bandwidth,
+      scales
+    );
+  }
+  return computeLollipopMarks(
+    spec.data,
+    xChannel.field,
+    yChannel.field,
+    xScale,
+    yScale,
+    bandwidth,
+    baseline,
+    scales
+  );
+}
+function computeDumbbellMarks(data, valueField, categoryField, colorField, xScale, yScale, bandwidth, scales) {
+  const marks = [];
+  const categoryGroups = groupByField([...data], categoryField);
+  for (const [category, rows] of categoryGroups) {
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    const cy = bandY + bandwidth / 2;
+    const xValues = [];
+    for (const row of rows) {
+      const value = Number(row[valueField] ?? 0);
+      if (Number.isFinite(value)) xValues.push(value);
+    }
+    if (xValues.length === 0) continue;
+    const minVal = Math.min(...xValues);
+    const maxVal = Math.max(...xValues);
+    const xLeft = xScale(minVal);
+    const xRight = xScale(maxVal);
+    const barWidth = Math.abs(xRight - xLeft);
+    if (barWidth > 0) {
+      const stemAria = {
+        label: `Range for ${category}: ${minVal} to ${maxVal}`
+      };
+      marks.push({
+        type: "rect",
+        x: Math.min(xLeft, xRight),
+        y: cy - STEM_WIDTH / 2,
+        width: barWidth,
+        height: STEM_WIDTH,
+        fill: STEM_COLOR,
+        data: rows[0],
+        aria: stemAria
+      });
+    }
+    for (const row of rows) {
+      const value = Number(row[valueField] ?? 0);
+      if (!Number.isFinite(value)) continue;
+      const cx = xScale(value);
+      const colorCategory = String(row[colorField] ?? "");
+      const color = getColor(scales, colorCategory);
+      const dotAria = {
+        label: `${category}, ${colorCategory}: ${value}`
+      };
+      marks.push({
+        type: "point",
+        cx,
+        cy,
+        r: DOT_RADIUS,
+        fill: color,
+        stroke: "#ffffff",
+        strokeWidth: 2,
+        data: row,
+        aria: dotAria
+      });
+    }
+  }
+  return marks;
+}
+function computeLollipopMarks(data, valueField, categoryField, xScale, yScale, bandwidth, baseline, scales) {
+  const marks = [];
+  for (const row of data) {
+    const category = String(row[categoryField] ?? "");
+    const value = Number(row[valueField] ?? 0);
+    if (!Number.isFinite(value)) continue;
+    const bandY = yScale(category);
+    if (bandY === void 0) continue;
+    const cx = xScale(value);
+    const cy = bandY + bandwidth / 2;
+    const color = getColor(scales, "__default__");
+    const stemX = Math.min(baseline, cx);
+    const stemWidth = Math.abs(cx - baseline);
+    if (stemWidth > 0) {
+      const stemAria = {
+        label: `Stem for ${category}`
+      };
+      marks.push({
+        type: "rect",
+        x: stemX,
+        y: cy - STEM_WIDTH / 2,
+        width: stemWidth,
+        height: STEM_WIDTH,
+        fill: STEM_COLOR,
+        data: row,
+        aria: stemAria
+      });
+    }
+    const dotAria = {
+      label: `${category}: ${value}`
+    };
+    marks.push({
+      type: "point",
+      cx,
+      cy,
+      r: DOT_RADIUS,
+      fill: color,
+      stroke: "#ffffff",
+      strokeWidth: 2,
+      data: row,
+      aria: dotAria
+    });
+  }
+  return marks;
+}
+
+// src/charts/dot/labels.ts
+import { estimateTextWidth as estimateTextWidth4, resolveCollisions as resolveCollisions3 } from "@opendata-ai/openchart-core";
+var LABEL_FONT_SIZE3 = 11;
+var LABEL_FONT_WEIGHT3 = 600;
+var LABEL_OFFSET_X = 10;
+function computeDotLabels(marks, _chartArea, density = "auto") {
+  if (density === "none") return [];
+  const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const candidates = [];
+  for (const mark of targetMarks) {
+    const ariaLabel = mark.aria.label;
+    const lastColon = ariaLabel.lastIndexOf(":");
+    const valuePart = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : "";
+    if (!valuePart) continue;
+    const textWidth = estimateTextWidth4(valuePart, LABEL_FONT_SIZE3, LABEL_FONT_WEIGHT3);
+    const textHeight = LABEL_FONT_SIZE3 * 1.2;
+    candidates.push({
+      text: valuePart,
+      anchorX: mark.cx + mark.r + LABEL_OFFSET_X,
+      anchorY: mark.cy - textHeight / 2,
+      width: textWidth,
+      height: textHeight,
+      priority: "data",
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: LABEL_FONT_SIZE3,
+        fontWeight: LABEL_FONT_WEIGHT3,
+        fill: mark.fill,
+        lineHeight: 1.2,
+        textAnchor: "start",
+        dominantBaseline: "central"
+      }
+    });
+  }
+  if (candidates.length === 0) return [];
+  if (density === "all") {
+    return candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  }
+  return resolveCollisions3(candidates);
+}
+
+// src/charts/dot/index.ts
+var dotRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const marks = computeDotMarks(spec, scales, chartArea, strategy);
+  const pointMarks = marks.filter((m) => m.type === "point");
+  const labels = computeDotLabels(pointMarks, chartArea, spec.labels.density);
+  let labelIdx = 0;
+  for (const mark of marks) {
+    if (mark.type === "point" && labelIdx < labels.length) {
+      mark.label = labels[labelIdx];
+      labelIdx++;
+    }
+  }
+  return marks;
+};
+
+// src/charts/line/area.ts
+import { area, curveMonotoneX, line, stack, stackOffsetNone, stackOrderNone } from "d3-shape";
+var DEFAULT_FILL_OPACITY = 0.15;
+function computeSingleArea(spec, scales, _chartArea) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) return [];
+  const yScale = scales.y.scale;
+  const domain = yScale.domain();
+  const baselineY = yScale(Math.min(domain[0], domain[1]));
+  const colorField = encoding.color?.field;
+  const groups = /* @__PURE__ */ new Map();
+  if (!colorField) {
+    groups.set("__default__", spec.data);
+  } else {
+    for (const row of spec.data) {
+      const key = String(row[colorField] ?? "__default__");
+      const existing = groups.get(key);
+      if (existing) {
+        existing.push(row);
+      } else {
+        groups.set(key, [row]);
+      }
+    }
+  }
+  const marks = [];
+  for (const [seriesKey, rows] of groups) {
+    const color = getColor(scales, seriesKey);
+    const validPoints = [];
+    for (const row of rows) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (xVal === null || yVal === null) continue;
+      validPoints.push({
+        x: xVal,
+        yTop: yVal,
+        yBottom: baselineY,
+        row
+      });
+    }
+    if (validPoints.length === 0) continue;
+    const areaGenerator = area().x((d) => d.x).y0((d) => d.yBottom).y1((d) => d.yTop).curve(curveMonotoneX);
+    const pathStr = areaGenerator(validPoints) ?? "";
+    const topLineGenerator = line().x((d) => d.x).y((d) => d.yTop).curve(curveMonotoneX);
+    const topPathStr = topLineGenerator(validPoints) ?? "";
+    const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
+    const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
+    const ariaLabel = seriesKey === "__default__" ? `Area with ${validPoints.length} data points` : `${seriesKey}: area with ${validPoints.length} data points`;
+    const aria = { label: ariaLabel };
+    marks.push({
+      type: "area",
+      topPoints,
+      bottomPoints,
+      path: pathStr,
+      topPath: topPathStr,
+      fill: color,
+      fillOpacity: DEFAULT_FILL_OPACITY,
+      stroke: color,
+      strokeWidth: 2,
+      seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
+      data: validPoints.map((p) => p.row),
+      aria
+    });
+  }
+  return marks;
+}
+function computeStackedArea(spec, scales, chartArea) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  const colorField = encoding.color?.field;
+  if (!xChannel || !yChannel || !scales.x || !scales.y || !colorField) {
+    return computeSingleArea(spec, scales, chartArea);
+  }
+  const seriesKeys = /* @__PURE__ */ new Set();
+  const xValueSet = /* @__PURE__ */ new Set();
+  const rowsByXSeries = /* @__PURE__ */ new Map();
+  const rowsByX = /* @__PURE__ */ new Map();
+  for (const row of spec.data) {
+    const xStr = String(row[xChannel.field]);
+    const series = String(row[colorField]);
+    seriesKeys.add(series);
+    xValueSet.add(xStr);
+    rowsByXSeries.set(`${xStr}::${series}`, row);
+    const existing = rowsByX.get(xStr);
+    if (existing) {
+      existing.push(row);
+    } else {
+      rowsByX.set(xStr, [row]);
+    }
+  }
+  const keys = Array.from(seriesKeys);
+  const xValues = Array.from(xValueSet);
+  const pivotData = xValues.map((xVal) => {
+    const pivot = { __x__: xVal };
+    for (const key of keys) {
+      pivot[key] = 0;
+    }
+    const xRows = rowsByX.get(xVal);
+    if (xRows) {
+      for (const row of xRows) {
+        const series = String(row[colorField]);
+        pivot[series] = row[yChannel.field] ?? 0;
+      }
+    }
+    return pivot;
+  });
+  const stackGenerator = stack().keys(keys).order(stackOrderNone).offset(stackOffsetNone);
+  const stackedData = stackGenerator(pivotData);
+  const yScale = scales.y.scale;
+  const marks = [];
+  for (const layer of stackedData) {
+    const seriesKey = layer.key;
+    const color = getColor(scales, seriesKey);
+    const validPoints = [];
+    for (const d of layer) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, d.data.__x__);
+      if (xVal === null) continue;
+      const yTop = yScale(d[1]);
+      const yBottom = yScale(d[0]);
+      validPoints.push({ x: xVal, yTop, yBottom });
+    }
+    if (validPoints.length === 0) continue;
+    const areaGenerator = area().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(curveMonotoneX);
+    const pathStr = areaGenerator(validPoints) ?? "";
+    const topLineGenerator = line().x((p) => p.x).y((p) => p.yTop).curve(curveMonotoneX);
+    const topPathStr = topLineGenerator(validPoints) ?? "";
+    const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
+    const bottomPoints = validPoints.map((p) => ({ x: p.x, y: p.yBottom }));
+    const aria = {
+      label: `${seriesKey}: stacked area with ${validPoints.length} data points`
+    };
+    marks.push({
+      type: "area",
+      topPoints,
+      bottomPoints,
+      path: pathStr,
+      topPath: topPathStr,
+      fill: color,
+      fillOpacity: 0.7,
+      // Higher opacity for stacked so layers are visible
+      stroke: color,
+      strokeWidth: 1,
+      seriesKey,
+      data: layer.map((d) => {
+        const xStr = String(d.data.__x__);
+        return rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? d.data;
+      }),
+      aria
+    });
+  }
+  return marks;
+}
+function computeAreaMarks(spec, scales, chartArea) {
+  const encoding = spec.encoding;
+  const hasColor = !!encoding.color;
+  if (hasColor) {
+    return computeStackedArea(spec, scales, chartArea);
+  }
+  return computeSingleArea(spec, scales, chartArea);
+}
+
+// src/charts/line/compute.ts
+import { curveMonotoneX as curveMonotoneX2, line as line2 } from "d3-shape";
+var DEFAULT_STROKE_WIDTH = 2.5;
+var DEFAULT_POINT_RADIUS = 3;
+function computeLineMarks(spec, scales, _chartArea, _strategy) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const colorField = encoding.color?.field;
+  const groups = groupByField(spec.data, colorField);
+  const marks = [];
+  for (const [seriesKey, rows] of groups) {
+    const color = getColor(scales, seriesKey);
+    const pointsWithData = [];
+    const segments = [];
+    let currentSegment = [];
+    for (const row of rows) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (xVal === null || yVal === null) {
+        if (currentSegment.length > 0) {
+          segments.push(currentSegment);
+          currentSegment = [];
+        }
+        continue;
+      }
+      const point = { x: xVal, y: yVal };
+      currentSegment.push(point);
+      pointsWithData.push({ ...point, row });
+    }
+    if (currentSegment.length > 0) {
+      segments.push(currentSegment);
+    }
+    const lineGenerator = line2().x((d) => d.x).y((d) => d.y).curve(curveMonotoneX2);
+    const allPoints = [];
+    const pathParts = [];
+    for (const segment of segments) {
+      if (segment.length === 0) continue;
+      const pathStr = lineGenerator(segment);
+      if (pathStr) {
+        pathParts.push(pathStr);
+      }
+      allPoints.push(...segment);
+    }
+    if (allPoints.length === 0) continue;
+    const ariaLabel = seriesKey === "__default__" ? `Line with ${allPoints.length} data points` : `${seriesKey}: line with ${allPoints.length} data points`;
+    const aria = {
+      label: ariaLabel
+    };
+    const combinedPath = pathParts.join(" ");
+    const lineMark = {
+      type: "line",
+      points: allPoints,
+      path: combinedPath,
+      stroke: color,
+      strokeWidth: DEFAULT_STROKE_WIDTH,
+      seriesKey: seriesKey === "__default__" ? void 0 : seriesKey,
+      data: pointsWithData.map((p) => p.row),
+      aria
+    };
+    marks.push(lineMark);
+    for (let i = 0; i < pointsWithData.length; i++) {
+      const p = pointsWithData[i];
+      const pointMark = {
+        type: "point",
+        cx: p.x,
+        cy: p.y,
+        r: DEFAULT_POINT_RADIUS,
+        fill: color,
+        stroke: "#ffffff",
+        strokeWidth: 1.5,
+        fillOpacity: 0,
+        data: p.row,
+        aria: {
+          label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`
+        }
+      };
+      marks.push(pointMark);
+    }
+  }
+  return marks;
+}
+
+// src/charts/line/labels.ts
+import { estimateTextWidth as estimateTextWidth5, resolveCollisions as resolveCollisions4 } from "@opendata-ai/openchart-core";
+var LABEL_FONT_SIZE4 = 11;
+var LABEL_FONT_WEIGHT4 = 600;
+var LABEL_OFFSET_X2 = 6;
+function computeLineLabels(marks, strategy, density = "auto", labelOffsets) {
+  const result = /* @__PURE__ */ new Map();
+  if (density === "none") return result;
+  if (strategy.labelMode === "none") {
+    return result;
+  }
+  const candidates = [];
+  const seriesOrder = [];
+  for (const mark of marks) {
+    if (mark.points.length === 0) continue;
+    const labelText = mark.seriesKey ?? "";
+    if (!labelText) continue;
+    const lastPoint = mark.points[mark.points.length - 1];
+    const textWidth = estimateTextWidth5(labelText, LABEL_FONT_SIZE4, LABEL_FONT_WEIGHT4);
+    const textHeight = LABEL_FONT_SIZE4 * 1.2;
+    candidates.push({
+      text: labelText,
+      anchorX: lastPoint.x + LABEL_OFFSET_X2,
+      anchorY: lastPoint.y - textHeight / 2,
+      width: textWidth,
+      height: textHeight,
+      priority: "data",
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: LABEL_FONT_SIZE4,
+        fontWeight: LABEL_FONT_WEIGHT4,
+        fill: mark.stroke,
+        lineHeight: 1.2,
+        textAnchor: "start",
+        dominantBaseline: "central"
+      }
+    });
+    seriesOrder.push(labelText);
+  }
+  if (candidates.length === 0) return result;
+  if (density === "all") {
+    for (let i = 0; i < candidates.length; i++) {
+      const c = candidates[i];
+      const seriesKey = seriesOrder[i];
+      const userOffset = labelOffsets?.[seriesKey];
+      result.set(seriesKey, {
+        text: c.text,
+        x: c.anchorX + (userOffset?.dx ?? 0),
+        y: c.anchorY + (userOffset?.dy ?? 0),
+        style: c.style,
+        visible: true
+      });
+    }
+    return result;
+  }
+  const resolved = resolveCollisions4(candidates);
+  for (let i = 0; i < resolved.length; i++) {
+    const seriesKey = seriesOrder[i];
+    const label = resolved[i];
+    const userOffset = labelOffsets?.[seriesKey];
+    if (userOffset) {
+      label.x += userOffset.dx ?? 0;
+      label.y += userOffset.dy ?? 0;
+    }
+    result.set(seriesKey, label);
+  }
+  return result;
+}
+
+// src/charts/line/index.ts
+var lineRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const marks = computeLineMarks(spec, scales, chartArea, strategy);
+  const lineMarks = marks.filter((m) => m.type === "line");
+  const labelMap = computeLineLabels(lineMarks, strategy, spec.labels.density, spec.labels.offsets);
+  for (const mark of marks) {
+    if (mark.type === "line" && mark.seriesKey) {
+      const label = labelMap.get(mark.seriesKey);
+      if (label) {
+        mark.label = label;
+      }
+    }
+  }
+  return marks;
+};
+var areaRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const areas = computeAreaMarks(spec, scales, chartArea);
+  const lines = computeLineMarks(spec, scales, chartArea, strategy);
+  return [...areas, ...lines];
+};
+
+// src/charts/pie/compute.ts
+import { arc as d3Arc, pie as d3Pie } from "d3-shape";
+var SMALL_SLICE_THRESHOLD = 0.03;
+var DEFAULT_PALETTE = [
+  "#1b7fa3",
+  "#c44e52",
+  "#6a9f58",
+  "#d47215",
+  "#507e79",
+  "#9a6a8d",
+  "#c4636b",
+  "#9c755f",
+  "#a88f22",
+  "#858078"
+];
+function groupSmallSlices(slices, threshold) {
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  if (total === 0) return slices;
+  const big = [];
+  let otherValue = 0;
+  for (const slice of slices) {
+    if (slice.value / total < threshold) {
+      otherValue += slice.value;
+    } else {
+      big.push(slice);
+    }
+  }
+  if (otherValue > 0) {
+    big.push({
+      label: "Other",
+      value: otherValue,
+      originalRow: { label: "Other", value: otherValue }
+    });
+  }
+  return big;
+}
+function computePieMarks(spec, scales, chartArea, _strategy, isDonut = false) {
+  const encoding = spec.encoding;
+  const valueChannel = encoding.y ?? encoding.x;
+  const categoryField = encoding.color?.field;
+  if (!valueChannel) return [];
+  let slices = [];
+  if (categoryField) {
+    const categoryTotals = /* @__PURE__ */ new Map();
+    const categoryRows = /* @__PURE__ */ new Map();
+    for (const row of spec.data) {
+      const cat = String(row[categoryField] ?? "");
+      const val = Number(row[valueChannel.field] ?? 0);
+      if (!Number.isFinite(val) || val < 0) continue;
+      categoryTotals.set(cat, (categoryTotals.get(cat) ?? 0) + val);
+      if (!categoryRows.has(cat)) {
+        categoryRows.set(cat, row);
+      }
+    }
+    for (const [label, value] of categoryTotals) {
+      slices.push({
+        label,
+        value,
+        originalRow: categoryRows.get(label) ?? {
+          [categoryField]: label,
+          [valueChannel.field]: value
+        }
+      });
+    }
+  } else {
+    for (let i = 0; i < spec.data.length; i++) {
+      const row = spec.data[i];
+      const val = Number(row[valueChannel.field] ?? 0);
+      if (!Number.isFinite(val) || val < 0) continue;
+      const label = String(row.label ?? row.name ?? row.category ?? `Slice ${i + 1}`);
+      slices.push({ label, value: val, originalRow: row });
+    }
+  }
+  if (slices.length === 0) return [];
+  slices.sort((a, b) => b.value - a.value);
+  slices = groupSmallSlices(slices, SMALL_SLICE_THRESHOLD);
+  const pieGenerator = d3Pie().value((d) => d.value).sort(null).padAngle(0.01);
+  const arcs = pieGenerator(slices);
+  const centerX = chartArea.x + chartArea.width / 2;
+  const centerY = chartArea.y + chartArea.height / 2;
+  const outerRadius = Math.min(chartArea.width, chartArea.height) / 2 * 0.85;
+  const innerRadius = isDonut ? outerRadius * 0.6 : 0;
+  const arcGenerator = d3Arc().innerRadius(innerRadius).outerRadius(outerRadius);
+  const marks = [];
+  const center = { x: centerX, y: centerY };
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  for (let i = 0; i < arcs.length; i++) {
+    const arcDatum = arcs[i];
+    const slice = arcDatum.data;
+    let color;
+    if (scales.color && categoryField) {
+      const colorScale = scales.color.scale;
+      color = colorScale(slice.label);
+    } else {
+      color = DEFAULT_PALETTE[i % DEFAULT_PALETTE.length];
+    }
+    const path = arcGenerator(arcDatum) ?? "";
+    const centroidResult = arcGenerator.centroid(arcDatum);
+    const percentage = total > 0 ? (slice.value / total * 100).toFixed(1) : "0";
+    const aria = {
+      label: `${slice.label}: ${slice.value} (${percentage}%)`
+    };
+    marks.push({
+      type: "arc",
+      path,
+      centroid: {
+        x: centroidResult[0] + centerX,
+        y: centroidResult[1] + centerY
+      },
+      center,
+      innerRadius,
+      outerRadius,
+      startAngle: arcDatum.startAngle,
+      endAngle: arcDatum.endAngle,
+      fill: color,
+      stroke: "#ffffff",
+      strokeWidth: 2,
+      data: slice.originalRow,
+      aria
+    });
+  }
+  return marks;
+}
+
+// src/charts/pie/labels.ts
+import { estimateTextWidth as estimateTextWidth6, resolveCollisions as resolveCollisions5 } from "@opendata-ai/openchart-core";
+var LABEL_FONT_SIZE5 = 10;
+var LABEL_FONT_WEIGHT5 = 500;
+var LEADER_LINE_OFFSET = 12;
+function computePieLabels(marks, _chartArea, density = "auto", _textFill = "#333333") {
+  if (marks.length === 0) return [];
+  if (density === "none") return [];
+  const centerX = marks[0].center.x;
+  const centerY = marks[0].center.y;
+  const targetMarks = density === "endpoints" && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const candidates = [];
+  const targetMarkIndices = [];
+  for (let mi = 0; mi < targetMarks.length; mi++) {
+    const mark = targetMarks[mi];
+    const ariaLabel = mark.aria.label;
+    const firstColon = ariaLabel.indexOf(":");
+    const labelText = firstColon >= 0 ? ariaLabel.slice(0, firstColon).trim() : "";
+    if (!labelText) continue;
+    const textWidth = estimateTextWidth6(labelText, LABEL_FONT_SIZE5, LABEL_FONT_WEIGHT5);
+    const textHeight = LABEL_FONT_SIZE5 * 1.2;
+    const midAngle = (mark.startAngle + mark.endAngle) / 2;
+    const labelRadius = mark.outerRadius + LEADER_LINE_OFFSET;
+    const labelX = centerX + Math.sin(midAngle) * labelRadius;
+    const labelY = centerY - Math.cos(midAngle) * labelRadius;
+    const isRight = Math.sin(midAngle) > 0;
+    candidates.push({
+      text: labelText,
+      anchorX: isRight ? labelX : labelX - textWidth,
+      anchorY: labelY - textHeight / 2,
+      width: textWidth,
+      height: textHeight,
+      priority: "data",
+      style: {
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontSize: LABEL_FONT_SIZE5,
+        fontWeight: LABEL_FONT_WEIGHT5,
+        fill: _textFill,
+        lineHeight: 1.2,
+        textAnchor: isRight ? "start" : "end",
+        dominantBaseline: "central"
+      }
+    });
+    targetMarkIndices.push(mi);
+  }
+  if (candidates.length === 0) return [];
+  let resolved;
+  if (density === "all") {
+    resolved = candidates.map((c) => ({
+      text: c.text,
+      x: c.anchorX,
+      y: c.anchorY,
+      style: c.style,
+      visible: true
+    }));
+  } else {
+    resolved = resolveCollisions5(candidates);
+  }
+  for (let i = 0; i < resolved.length && i < targetMarks.length; i++) {
+    const label = resolved[i];
+    const mark = targetMarks[i];
+    if (label.visible) {
+      label.connector = {
+        from: { x: label.x, y: label.y },
+        to: { x: mark.centroid.x, y: mark.centroid.y },
+        stroke: _textFill,
+        style: "straight"
+      };
+    }
+  }
+  return resolved;
+}
+
+// src/charts/pie/index.ts
+var pieRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, false);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+var donutRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const marks = computePieMarks(spec, scales, chartArea, strategy, true);
+  const labels = computePieLabels(marks, chartArea, spec.labels.density, theme.colors.text);
+  for (let i = 0; i < marks.length && i < labels.length; i++) {
+    marks[i].label = labels[i];
+  }
+  return marks;
+};
+
+// src/charts/registry.ts
+var renderers = /* @__PURE__ */ new Map();
+function registerChartRenderer(type, renderer) {
+  renderers.set(type, renderer);
+}
+function getChartRenderer(type) {
+  return renderers.get(type);
+}
+function clearRenderers() {
+  renderers.clear();
+}
+
+// src/charts/scatter/compute.ts
+import { max, min } from "d3-array";
+import { scaleSqrt } from "d3-scale";
+var DEFAULT_POINT_RADIUS2 = 5;
+var MIN_BUBBLE_RADIUS = 3;
+var MAX_BUBBLE_RADIUS = 30;
+function computeScatterMarks(spec, scales, _chartArea, _strategy) {
+  const encoding = spec.encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  if (!xChannel || !yChannel || !scales.x || !scales.y) {
+    return [];
+  }
+  const xScale = scales.x.scale;
+  const yScale = scales.y.scale;
+  const colorField = encoding.color?.field;
+  const sizeField = encoding.size?.field;
+  let sizeScale;
+  if (sizeField) {
+    const sizeValues = spec.data.map((d) => Number(d[sizeField])).filter((v) => Number.isFinite(v));
+    const sizeMin = min(sizeValues) ?? 0;
+    const sizeMax = max(sizeValues) ?? 1;
+    sizeScale = scaleSqrt().domain([sizeMin, sizeMax]).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS]);
+  }
+  const marks = [];
+  for (const row of spec.data) {
+    const xVal = Number(row[xChannel.field]);
+    const yVal = Number(row[yChannel.field]);
+    if (!Number.isFinite(xVal) || !Number.isFinite(yVal)) continue;
+    const cx = xScale(xVal);
+    const cy = yScale(yVal);
+    const category = colorField ? String(row[colorField] ?? "") : void 0;
+    const color = getColor(scales, category ?? "__default__");
+    let radius = DEFAULT_POINT_RADIUS2;
+    if (sizeScale && sizeField) {
+      const sizeVal = Number(row[sizeField]);
+      if (Number.isFinite(sizeVal)) {
+        radius = sizeScale(sizeVal);
+      }
+    }
+    const labelParts = [`${xChannel.field}=${xVal}`, `${yChannel.field}=${yVal}`];
+    if (category) labelParts.push(`${colorField}=${category}`);
+    if (sizeField && row[sizeField] != null) {
+      labelParts.push(`${sizeField}=${row[sizeField]}`);
+    }
+    const aria = {
+      label: `Data point: ${labelParts.join(", ")}`
+    };
+    marks.push({
+      type: "point",
+      cx,
+      cy,
+      r: radius,
+      fill: color,
+      stroke: "#ffffff",
+      strokeWidth: 1,
+      fillOpacity: 0.7,
+      data: row,
+      aria
+    });
+  }
+  return marks;
+}
+
+// src/charts/scatter/trendline.ts
+var TRENDLINE_COLOR = "#666666";
+var TRENDLINE_STROKE_WIDTH = 1.5;
+var TRENDLINE_DASH = "6 4";
+function linearRegression(points) {
+  const n = points.length;
+  if (n < 2) return null;
+  let sumX = 0;
+  let sumY = 0;
+  let sumXY = 0;
+  let sumXX = 0;
+  for (const p of points) {
+    sumX += p.x;
+    sumY += p.y;
+    sumXY += p.x * p.y;
+    sumXX += p.x * p.x;
+  }
+  const denominator = n * sumXX - sumX * sumX;
+  if (denominator === 0) return null;
+  const slope = (n * sumXY - sumX * sumY) / denominator;
+  const intercept = (sumY - slope * sumX) / n;
+  return { slope, intercept };
+}
+function computeTrendLine(marks) {
+  if (marks.length < 2) return null;
+  const points = marks.map((m) => ({ x: m.cx, y: m.cy }));
+  const result = linearRegression(points);
+  if (!result) return null;
+  const { slope, intercept } = result;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  for (const m of marks) {
+    if (m.cx < minX) minX = m.cx;
+    if (m.cx > maxX) maxX = m.cx;
+  }
+  const y1 = slope * minX + intercept;
+  const y2 = slope * maxX + intercept;
+  const aria = {
+    label: `Trend line: linear regression`
+  };
+  return {
+    type: "line",
+    points: [
+      { x: minX, y: y1 },
+      { x: maxX, y: y2 }
+    ],
+    stroke: TRENDLINE_COLOR,
+    strokeWidth: TRENDLINE_STROKE_WIDTH,
+    strokeDasharray: TRENDLINE_DASH,
+    data: [],
+    aria
+  };
+}
+
+// src/charts/scatter/index.ts
+var scatterRenderer = (spec, scales, chartArea, strategy, _theme) => {
+  const pointMarks = computeScatterMarks(spec, scales, chartArea, strategy);
+  const marks = [...pointMarks];
+  const trendLine = computeTrendLine(pointMarks);
+  if (trendLine) {
+    marks.unshift(trendLine);
+  }
+  return marks;
+};
+
+// src/compiler/normalize.ts
+import { isChartSpec, isGraphSpec, isTableSpec } from "@opendata-ai/openchart-core";
+function normalizeChromeField(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "string") return { text: value };
+  return value;
+}
+function normalizeChrome(chrome) {
+  if (!chrome) return {};
+  return {
+    title: normalizeChromeField(chrome.title),
+    subtitle: normalizeChromeField(chrome.subtitle),
+    source: normalizeChromeField(chrome.source),
+    byline: normalizeChromeField(chrome.byline),
+    footer: normalizeChromeField(chrome.footer)
+  };
+}
+function inferFieldType(data, field) {
+  const sampleSize = Math.min(10, data.length);
+  let numericCount = 0;
+  let dateCount = 0;
+  let totalNonNull = 0;
+  for (let i = 0; i < sampleSize; i++) {
+    const value = data[i][field];
+    if (value == null) continue;
+    totalNonNull++;
+    if (typeof value === "number" && Number.isFinite(value)) {
+      numericCount++;
+      continue;
+    }
+    if (typeof value === "string") {
+      const num = Number(value);
+      if (!Number.isNaN(num) && Number.isFinite(num) && value.trim() !== "") {
+        numericCount++;
+        continue;
+      }
+      const date = new Date(value);
+      if (!Number.isNaN(date.getTime())) {
+        dateCount++;
+        continue;
+      }
+    }
+    if (value instanceof Date && !Number.isNaN(value.getTime())) {
+      dateCount++;
+    }
+  }
+  if (totalNonNull === 0) return "nominal";
+  if (dateCount / totalNonNull > 0.8) return "temporal";
+  if (numericCount / totalNonNull > 0.8) return "quantitative";
+  return "nominal";
+}
+function inferEncodingTypes(encoding, data, warnings) {
+  const result = { ...encoding };
+  for (const channel of ["x", "y", "color", "size", "detail"]) {
+    const spec = result[channel];
+    if (!spec) continue;
+    if (!spec.type) {
+      const inferred = inferFieldType(data, spec.field);
+      result[channel] = { ...spec, type: inferred };
+      warnings.push(
+        `Inferred encoding.${channel}.type as "${inferred}" from data values for field "${spec.field}"`
+      );
+    } else {
+      const actualType = inferFieldType(data, spec.field);
+      if (spec.type === "nominal" && actualType === "temporal") {
+        warnings.push(`Field "${spec.field}" looks temporal but was declared as nominal`);
+      }
+      if (spec.type === "nominal" && actualType === "quantitative") {
+        warnings.push(`Field "${spec.field}" looks quantitative but was declared as nominal`);
+      }
+    }
+  }
+  return result;
+}
+function normalizeAnnotations(annotations) {
+  if (!annotations || annotations.length === 0) return [];
+  return annotations.map((ann) => {
+    switch (ann.type) {
+      case "text":
+        return {
+          ...ann,
+          fontSize: ann.fontSize ?? 12,
+          fontWeight: ann.fontWeight ?? 400,
+          opacity: ann.opacity ?? 1
+        };
+      case "range":
+        return {
+          ...ann,
+          opacity: ann.opacity ?? 0.1,
+          fill: ann.fill ?? "#000000"
+        };
+      case "refline":
+        return {
+          ...ann,
+          style: ann.style ?? "dashed",
+          strokeWidth: ann.strokeWidth ?? 1,
+          stroke: ann.stroke ?? "#666666",
+          opacity: ann.opacity ?? 0.8
+        };
+      default:
+        return ann;
+    }
+  });
+}
+function normalizeChartSpec(spec, warnings) {
+  const encoding = inferEncodingTypes(spec.encoding, spec.data, warnings);
+  return {
+    type: spec.type,
+    data: spec.data,
+    encoding,
+    chrome: normalizeChrome(spec.chrome),
+    annotations: normalizeAnnotations(spec.annotations),
+    labels: {
+      density: spec.labels?.density ?? "auto",
+      format: spec.labels?.format ?? "",
+      offsets: spec.labels?.offsets
+    },
+    legend: spec.legend,
+    responsive: spec.responsive ?? true,
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? "off"
+  };
+}
+function normalizeTableSpec(spec, _warnings) {
+  return {
+    type: "table",
+    data: spec.data,
+    columns: spec.columns,
+    rowKey: spec.rowKey,
+    chrome: normalizeChrome(spec.chrome),
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? "off",
+    search: spec.search ?? false,
+    pagination: spec.pagination ?? false,
+    stickyFirstColumn: spec.stickyFirstColumn ?? false,
+    compact: spec.compact ?? false,
+    responsive: spec.responsive ?? true
+  };
+}
+function normalizeGraphSpec(spec, _warnings) {
+  const defaultLayout = {
+    type: "force",
+    chargeStrength: -300,
+    linkDistance: 30
+  };
+  const layout = spec.layout ? {
+    ...defaultLayout,
+    ...spec.layout
+  } : defaultLayout;
+  return {
+    type: "graph",
+    nodes: spec.nodes,
+    edges: spec.edges,
+    encoding: spec.encoding ?? {},
+    layout,
+    chrome: normalizeChrome(spec.chrome),
+    annotations: normalizeAnnotations(spec.annotations),
+    theme: spec.theme ?? {},
+    darkMode: spec.darkMode ?? "off"
+  };
+}
+function normalizeSpec(spec, warnings = []) {
+  if (isChartSpec(spec)) {
+    return normalizeChartSpec(spec, warnings);
+  }
+  if (isTableSpec(spec)) {
+    return normalizeTableSpec(spec, warnings);
+  }
+  if (isGraphSpec(spec)) {
+    return normalizeGraphSpec(spec, warnings);
+  }
+  throw new Error(`Unknown spec type: ${spec.type}`);
+}
+
+// src/compiler/validate.ts
+import {
+  CHART_ENCODING_RULES,
+  CHART_TYPES
+} from "@opendata-ai/openchart-core";
+var VALID_FIELD_TYPES = /* @__PURE__ */ new Set(["quantitative", "temporal", "nominal", "ordinal"]);
+var VALID_DARK_MODES = /* @__PURE__ */ new Set(["auto", "force", "off"]);
+function isParseableDate(value) {
+  if (value instanceof Date) return !Number.isNaN(value.getTime());
+  if (typeof value === "string") {
+    const d = new Date(value);
+    return !Number.isNaN(d.getTime());
+  }
+  if (typeof value === "number") return true;
+  return false;
+}
+function isNumeric(value) {
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value === "string") {
+    const n = Number(value);
+    return !Number.isNaN(n) && Number.isFinite(n);
+  }
+  return false;
+}
+function validateChartSpec(spec, errors) {
+  const chartType = spec.type;
+  if (!Array.isArray(spec.data)) {
+    errors.push({
+      message: 'Spec error: "data" must be an array',
+      path: "data",
+      code: "INVALID_TYPE",
+      suggestion: "Provide data as an array of objects, e.g. data: [{ x: 1, y: 2 }]"
+    });
+    return;
+  }
+  if (spec.data.length === 0) {
+    errors.push({
+      message: 'Spec error: "data" must be a non-empty array',
+      path: "data",
+      code: "EMPTY_DATA",
+      suggestion: "Add at least one data row, e.g. data: [{ x: 1, y: 2 }]"
+    });
+    return;
+  }
+  const firstRow = spec.data[0];
+  if (typeof firstRow !== "object" || firstRow === null || Array.isArray(firstRow)) {
+    errors.push({
+      message: 'Spec error: each item in "data" must be a plain object',
+      path: "data[0]",
+      code: "INVALID_TYPE",
+      suggestion: 'Each data item should be an object with key-value pairs, e.g. { name: "Alice", value: 10 }'
+    });
+    return;
+  }
+  if (!spec.encoding || typeof spec.encoding !== "object") {
+    const rules2 = CHART_ENCODING_RULES[chartType];
+    const requiredChannels = Object.entries(rules2).filter(([, rule]) => rule.required).map(([ch]) => ch);
+    errors.push({
+      message: `Spec error: ${chartType} chart requires an "encoding" object`,
+      path: "encoding",
+      code: "MISSING_FIELD",
+      suggestion: `Add an encoding object with required channels: ${requiredChannels.join(", ")}. Example: encoding: { ${requiredChannels.map((ch) => `${ch}: { field: "...", type: "..." }`).join(", ")} }`
+    });
+    return;
+  }
+  const rules = CHART_ENCODING_RULES[chartType];
+  const encoding = spec.encoding;
+  const dataColumns = new Set(Object.keys(firstRow));
+  const availableColumns = [...dataColumns].join(", ");
+  for (const [channel, rule] of Object.entries(rules)) {
+    if (rule.required && !encoding[channel]) {
+      const allowedTypes = rule.allowedTypes.join(" or ");
+      errors.push({
+        message: `Spec error: ${chartType} chart requires encoding.${channel} but none was provided`,
+        path: `encoding.${channel}`,
+        code: "MISSING_FIELD",
+        suggestion: `Add encoding.${channel} with a field from your data (${availableColumns}) and type (${allowedTypes}). Example: ${channel}: { field: "${[...dataColumns][0] ?? "myField"}", type: "${rule.allowedTypes[0]}" }`
+      });
+    }
+  }
+  for (const [channel, channelSpec] of Object.entries(encoding)) {
+    if (!channelSpec || typeof channelSpec !== "object") continue;
+    const channelObj = channelSpec;
+    const channelRule = rules[channel];
+    if (!channelObj.field || typeof channelObj.field !== "string") {
+      errors.push({
+        message: `Spec error: encoding.${channel} must have a "field" string`,
+        path: `encoding.${channel}.field`,
+        code: "MISSING_FIELD",
+        suggestion: `Add a field name from your data columns: ${availableColumns}`
+      });
+      continue;
+    }
+    if (!dataColumns.has(channelObj.field)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.field "${channelObj.field}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `encoding.${channel}.field`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the available data columns: ${availableColumns}`
+      });
+    }
+    if (channelObj.type && !VALID_FIELD_TYPES.has(channelObj.type)) {
+      errors.push({
+        message: `Spec error: encoding.${channel}.type "${channelObj.type}" is not valid. Must be one of: ${[...VALID_FIELD_TYPES].join(", ")}`,
+        path: `encoding.${channel}.type`,
+        code: "INVALID_VALUE",
+        suggestion: `Use one of: ${[...VALID_FIELD_TYPES].join(", ")}`
+      });
+    }
+    if (channelRule && channelObj.type && channelRule.allowedTypes.length > 0) {
+      if (!channelRule.allowedTypes.includes(channelObj.type)) {
+        errors.push({
+          message: `Spec error: encoding.${channel} for ${chartType} chart does not accept type "${channelObj.type}". Allowed types: ${channelRule.allowedTypes.join(", ")}`,
+          path: `encoding.${channel}.type`,
+          code: "ENCODING_MISMATCH",
+          suggestion: `Change encoding.${channel}.type to one of: ${channelRule.allowedTypes.join(", ")}`
+        });
+      }
+    }
+    if (channelObj.type && channelObj.field && dataColumns.has(channelObj.field)) {
+      const data = spec.data;
+      const fieldName = channelObj.field;
+      const fieldType = channelObj.type;
+      const sampleSize = Math.min(5, data.length);
+      if (fieldType === "temporal") {
+        let nonDateCount = 0;
+        for (let i = 0; i < sampleSize; i++) {
+          const val = data[i][fieldName];
+          if (val != null && !isParseableDate(val)) {
+            nonDateCount++;
+          }
+        }
+        if (nonDateCount > 0) {
+          errors.push({
+            message: `Spec error: encoding.${channel}.field "${fieldName}" is declared as temporal but contains non-date values`,
+            path: `encoding.${channel}`,
+            code: "ENCODING_MISMATCH",
+            suggestion: `Either change the type to "nominal" or ensure "${fieldName}" values are parseable dates (ISO 8601 strings like "2024-01-15" or Date objects)`
+          });
+        }
+      }
+      if (fieldType === "quantitative") {
+        let nonNumericCount = 0;
+        for (let i = 0; i < sampleSize; i++) {
+          const val = data[i][fieldName];
+          if (val != null && !isNumeric(val)) {
+            nonNumericCount++;
+          }
+        }
+        if (nonNumericCount > 0) {
+          errors.push({
+            message: `Spec error: encoding.${channel}.field "${fieldName}" is declared as quantitative but contains non-numeric values`,
+            path: `encoding.${channel}`,
+            code: "ENCODING_MISMATCH",
+            suggestion: `Either change the type to "nominal" or ensure "${fieldName}" values are numbers`
+          });
+        }
+      }
+    }
+  }
+  if (spec.darkMode !== void 0 && !VALID_DARK_MODES.has(spec.darkMode)) {
+    errors.push({
+      message: `Spec error: darkMode must be "auto", "force", or "off"`,
+      path: "darkMode",
+      code: "INVALID_VALUE",
+      suggestion: 'Use one of: "auto" (system preference), "force" (always dark), or "off" (always light)'
+    });
+  }
+}
+function validateTableSpec(spec, errors) {
+  if (!Array.isArray(spec.data)) {
+    errors.push({
+      message: 'Spec error: "data" must be an array',
+      path: "data",
+      code: "INVALID_TYPE",
+      suggestion: 'Provide data as an array of objects, e.g. data: [{ name: "Alice", age: 30 }]'
+    });
+    return;
+  }
+  if (spec.data.length === 0) {
+    errors.push({
+      message: 'Spec error: "data" must be a non-empty array',
+      path: "data",
+      code: "EMPTY_DATA",
+      suggestion: "Add at least one data row to the data array"
+    });
+    return;
+  }
+  if (!Array.isArray(spec.columns)) {
+    errors.push({
+      message: 'Spec error: table spec requires a "columns" array',
+      path: "columns",
+      code: "MISSING_FIELD",
+      suggestion: 'Add a columns array defining which data fields to display, e.g. columns: [{ key: "name" }, { key: "age" }]'
+    });
+    return;
+  }
+  const data = spec.data;
+  const firstRow = data[0];
+  if (typeof firstRow !== "object" || firstRow === null || Array.isArray(firstRow)) {
+    errors.push({
+      message: 'Spec error: each item in "data" must be a plain object',
+      path: "data[0]",
+      code: "INVALID_TYPE",
+      suggestion: 'Each data item should be an object with key-value pairs, e.g. { name: "Alice", age: 30 }'
+    });
+    return;
+  }
+  const dataColumns = new Set(Object.keys(firstRow));
+  const availableColumns = [...dataColumns].join(", ");
+  const columns = spec.columns;
+  for (let i = 0; i < columns.length; i++) {
+    const col = columns[i];
+    if (!col || typeof col !== "object") {
+      errors.push({
+        message: `Spec error: columns[${i}] must be an object`,
+        path: `columns[${i}]`,
+        code: "INVALID_TYPE",
+        suggestion: 'Each column entry should be an object, e.g. { key: "fieldName" }'
+      });
+      continue;
+    }
+    if (!col.key || typeof col.key !== "string") {
+      errors.push({
+        message: `Spec error: columns[${i}] must have a "key" string`,
+        path: `columns[${i}].key`,
+        code: "MISSING_FIELD",
+        suggestion: `Add a key referencing a data field. Available columns: ${availableColumns}`
+      });
+      continue;
+    }
+    if (!dataColumns.has(col.key)) {
+      errors.push({
+        message: `Spec error: columns[${i}].key "${col.key}" does not exist in data. Available columns: ${availableColumns}`,
+        path: `columns[${i}].key`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the available data columns: ${availableColumns}`
+      });
+    }
+    const visuals = ["heatmap", "bar", "sparkline", "image", "flag", "categoryColors"].filter(
+      (v) => col[v] != null && col[v] !== false
+    );
+    if (visuals.length > 1) {
+      errors.push({
+        message: `Spec error: columns[${i}] has multiple visual features (${visuals.join(", ")}). Only one is allowed per column.`,
+        path: `columns[${i}]`,
+        code: "INVALID_VALUE",
+        suggestion: `Keep only one visual feature per column. Remove all but one of: ${visuals.join(", ")}`
+      });
+    }
+  }
+}
+function validateGraphSpec(spec, errors) {
+  if (!Array.isArray(spec.nodes)) {
+    errors.push({
+      message: 'Spec error: graph spec requires a "nodes" array',
+      path: "nodes",
+      code: "MISSING_FIELD",
+      suggestion: 'Add a nodes array with objects that have an "id" field, e.g. nodes: [{ id: "a" }, { id: "b" }]'
+    });
+    return;
+  }
+  if (spec.nodes.length === 0) {
+    errors.push({
+      message: 'Spec error: "nodes" must be a non-empty array',
+      path: "nodes",
+      code: "EMPTY_DATA",
+      suggestion: 'Add at least one node, e.g. nodes: [{ id: "a" }]'
+    });
+    return;
+  }
+  const nodeIds = /* @__PURE__ */ new Set();
+  const nodes = spec.nodes;
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (!node || typeof node !== "object") {
+      errors.push({
+        message: `Spec error: nodes[${i}] must be an object`,
+        path: `nodes[${i}]`,
+        code: "INVALID_TYPE",
+        suggestion: 'Each node must be an object with at least an "id" field, e.g. { id: "a" }'
+      });
+      continue;
+    }
+    if (typeof node.id !== "string" || node.id === "") {
+      errors.push({
+        message: `Spec error: nodes[${i}] must have a non-empty string "id" field`,
+        path: `nodes[${i}].id`,
+        code: "MISSING_FIELD",
+        suggestion: 'Add a string id to the node, e.g. { id: "node1" }'
+      });
+    } else {
+      nodeIds.add(node.id);
+    }
+  }
+  if (!Array.isArray(spec.edges)) {
+    errors.push({
+      message: 'Spec error: graph spec requires an "edges" array',
+      path: "edges",
+      code: "MISSING_FIELD",
+      suggestion: 'Add an edges array (can be empty), e.g. edges: [{ source: "a", target: "b" }]'
+    });
+    return;
+  }
+  const edges = spec.edges;
+  for (let i = 0; i < edges.length; i++) {
+    const edge = edges[i];
+    if (!edge || typeof edge !== "object") {
+      errors.push({
+        message: `Spec error: edges[${i}] must be an object`,
+        path: `edges[${i}]`,
+        code: "INVALID_TYPE",
+        suggestion: 'Each edge must be an object with "source" and "target" fields, e.g. { source: "a", target: "b" }'
+      });
+      continue;
+    }
+    if (typeof edge.source !== "string" || edge.source === "") {
+      errors.push({
+        message: `Spec error: edges[${i}] must have a non-empty string "source" field`,
+        path: `edges[${i}].source`,
+        code: "MISSING_FIELD",
+        suggestion: 'Add a source node id, e.g. { source: "a", target: "b" }'
+      });
+    } else if (nodeIds.size > 0 && !nodeIds.has(edge.source)) {
+      errors.push({
+        message: `Spec error: edges[${i}].source "${edge.source}" does not reference an existing node id`,
+        path: `edges[${i}].source`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}`
+      });
+    }
+    if (typeof edge.target !== "string" || edge.target === "") {
+      errors.push({
+        message: `Spec error: edges[${i}] must have a non-empty string "target" field`,
+        path: `edges[${i}].target`,
+        code: "MISSING_FIELD",
+        suggestion: 'Add a target node id, e.g. { source: "a", target: "b" }'
+      });
+    } else if (nodeIds.size > 0 && !nodeIds.has(edge.target)) {
+      errors.push({
+        message: `Spec error: edges[${i}].target "${edge.target}" does not reference an existing node id`,
+        path: `edges[${i}].target`,
+        code: "DATA_FIELD_MISSING",
+        suggestion: `Use one of the existing node ids: ${[...nodeIds].slice(0, 5).join(", ")}${nodeIds.size > 5 ? "..." : ""}`
+      });
+    }
+  }
+  if (spec.encoding && typeof spec.encoding === "object") {
+    const encoding = spec.encoding;
+    const firstNode = nodes[0];
+    const firstEdge = edges.length > 0 ? edges[0] : null;
+    const nodeFields = firstNode ? new Set(Object.keys(firstNode)) : /* @__PURE__ */ new Set();
+    const edgeFields = firstEdge ? new Set(Object.keys(firstEdge)) : /* @__PURE__ */ new Set();
+    const nodeChannels = ["nodeColor", "nodeSize", "nodeLabel"];
+    for (const channel of nodeChannels) {
+      const ch = encoding[channel];
+      if (ch?.field && typeof ch.field === "string" && !nodeFields.has(ch.field)) {
+        errors.push({
+          message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on nodes. Available fields: ${[...nodeFields].join(", ")}`,
+          path: `encoding.${channel}.field`,
+          code: "DATA_FIELD_MISSING",
+          suggestion: `Use one of the node fields: ${[...nodeFields].join(", ")}`
+        });
+      }
+    }
+    const edgeChannels = ["edgeColor", "edgeWidth"];
+    for (const channel of edgeChannels) {
+      const ch = encoding[channel];
+      if (ch?.field && typeof ch.field === "string" && firstEdge && !edgeFields.has(ch.field)) {
+        errors.push({
+          message: `Spec error: encoding.${channel}.field "${ch.field}" does not exist on edges. Available fields: ${[...edgeFields].join(", ")}`,
+          path: `encoding.${channel}.field`,
+          code: "DATA_FIELD_MISSING",
+          suggestion: `Use one of the edge fields: ${[...edgeFields].join(", ")}`
+        });
+      }
+    }
+  }
+  if (spec.layout && typeof spec.layout === "object") {
+    const layout = spec.layout;
+    if (layout.type && layout.type !== "force") {
+      errors.push({
+        message: `Spec error: layout.type "${layout.type}" is not supported. Only "force" is currently supported`,
+        path: "layout.type",
+        code: "INVALID_VALUE",
+        suggestion: 'Use layout.type: "force" or omit the layout field to use the default force layout'
+      });
+    }
+  }
+}
+function validateSpec(spec) {
+  const errors = [];
+  if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
+    return {
+      valid: false,
+      errors: [
+        {
+          message: "Spec error: spec must be a non-null object",
+          code: "INVALID_TYPE",
+          suggestion: 'Pass a spec object with at least a "type" field, e.g. { type: "line", data: [...], encoding: {...} }'
+        }
+      ],
+      normalized: null
+    };
+  }
+  const obj = spec;
+  if (!obj.type || typeof obj.type !== "string") {
+    return {
+      valid: false,
+      errors: [
+        {
+          message: 'Spec error: spec must have a "type" field',
+          path: "type",
+          code: "MISSING_FIELD",
+          suggestion: `Add a type field. Valid types: ${[...CHART_TYPES].join(", ")}, table, graph`
+        }
+      ],
+      normalized: null
+    };
+  }
+  const isChart = CHART_TYPES.has(obj.type);
+  const isTable = obj.type === "table";
+  const isGraph = obj.type === "graph";
+  if (!isChart && !isTable && !isGraph) {
+    return {
+      valid: false,
+      errors: [
+        {
+          message: `Spec error: "${obj.type}" is not a valid type. Valid types: ${[...CHART_TYPES].join(", ")}, table, graph`,
+          path: "type",
+          code: "INVALID_VALUE",
+          suggestion: `Change type to one of: ${[...CHART_TYPES].join(", ")}, table, graph`
+        }
+      ],
+      normalized: null
+    };
+  }
+  if (isChart) {
+    validateChartSpec(obj, errors);
+  } else if (isTable) {
+    validateTableSpec(obj, errors);
+  } else if (isGraph) {
+    validateGraphSpec(obj, errors);
+  }
+  if (errors.length > 0) {
+    return { valid: false, errors, normalized: null };
+  }
+  return {
+    valid: true,
+    errors: [],
+    normalized: spec
+  };
+}
+
+// src/compiler/index.ts
+function compile(spec) {
+  const validation = validateSpec(spec);
+  if (!validation.valid || !validation.normalized) {
+    const errorMessages = validation.errors.map((e) => e.message).join("\n");
+    throw new Error(`Invalid spec:
+${errorMessages}`);
+  }
+  const warnings = [];
+  const normalized = normalizeSpec(validation.normalized, warnings);
+  return { spec: normalized, warnings };
+}
+
+// src/graphs/compile-graph.ts
+import { adaptTheme, computeChrome, resolveTheme } from "@opendata-ai/openchart-core";
+
+// src/graphs/encoding.ts
+import { max as max2, min as min2 } from "d3-array";
+import { scaleLinear, scaleOrdinal, scaleSqrt as scaleSqrt2 } from "d3-scale";
+var DEFAULT_NODE_RADIUS = 5;
+var MIN_NODE_RADIUS = 3;
+var MAX_NODE_RADIUS = 20;
+var DEFAULT_EDGE_WIDTH = 1;
+var MIN_EDGE_WIDTH = 0.5;
+var MAX_EDGE_WIDTH = 4;
+var DEFAULT_STROKE_WIDTH2 = 1;
+function darkenColor(hex, amount = 0.2) {
+  const clean = hex.replace(/^#/, "");
+  if (clean.length !== 6 && clean.length !== 3) return hex;
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const r = Math.max(0, Math.round(parseInt(full.substring(0, 2), 16) * (1 - amount)));
+  const g = Math.max(0, Math.round(parseInt(full.substring(2, 4), 16) * (1 - amount)));
+  const b = Math.max(0, Math.round(parseInt(full.substring(4, 6), 16) * (1 - amount)));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function hexWithOpacity(hex, opacity) {
+  const clean = hex.replace(/^#/, "");
+  if (clean.length !== 6 && clean.length !== 3) {
+    return hex;
+  }
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  const r = parseInt(full.substring(0, 2), 16);
+  const g = parseInt(full.substring(2, 4), 16);
+  const b = parseInt(full.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function computeDegrees(nodes, edges) {
+  const degrees = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    degrees.set(node.id, 0);
+  }
+  for (const edge of edges) {
+    degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + 1);
+    degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + 1);
+  }
+  return degrees;
+}
+function resolveNodeVisuals(nodes, encoding, edges, theme) {
+  const degrees = computeDegrees(nodes, edges);
+  const maxDegree = Math.max(1, ...degrees.values());
+  let sizeScale;
+  if (encoding.nodeSize?.field) {
+    const field = encoding.nodeSize.field;
+    const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+    const sizeMin = min2(values) ?? 0;
+    const sizeMax = max2(values) ?? 1;
+    sizeScale = scaleSqrt2().domain([sizeMin, sizeMax]).range([MIN_NODE_RADIUS, MAX_NODE_RADIUS]);
+  }
+  let colorFn;
+  if (encoding.nodeColor?.field) {
+    const field = encoding.nodeColor.field;
+    const fieldType = encoding.nodeColor.type ?? "nominal";
+    if (fieldType === "quantitative") {
+      const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+      const colorMin = min2(values) ?? 0;
+      const colorMax = max2(values) ?? 1;
+      const seqPalettes = Object.values(theme.colors.sequential);
+      const palette = seqPalettes.length > 0 ? seqPalettes[0] : ["#ccc", "#333"];
+      const colorScale = scaleLinear().domain([colorMin, colorMax]).range([palette[0], palette[palette.length - 1]]);
+      colorFn = (node) => {
+        const val = Number(node[field]);
+        return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
+      };
+    } else {
+      const uniqueValues = [...new Set(nodes.map((n) => String(n[field] ?? "")))];
+      const ordinalScale = scaleOrdinal().domain(uniqueValues).range(theme.colors.categorical);
+      colorFn = (node) => ordinalScale(String(node[field] ?? ""));
+    }
+  }
+  const defaultColor = theme.colors.categorical[0];
+  return nodes.map((node) => {
+    let radius = DEFAULT_NODE_RADIUS;
+    if (sizeScale && encoding.nodeSize?.field) {
+      const val = Number(node[encoding.nodeSize.field]);
+      if (Number.isFinite(val)) {
+        radius = sizeScale(val);
+      }
+    }
+    const fill = colorFn ? colorFn(node) : defaultColor;
+    const stroke = darkenColor(fill);
+    let label;
+    if (encoding.nodeLabel?.field) {
+      const labelVal = node[encoding.nodeLabel.field];
+      label = labelVal != null ? String(labelVal) : void 0;
+    } else {
+      label = node.id;
+    }
+    const degree = degrees.get(node.id) ?? 0;
+    const labelPriority = maxDegree > 0 ? degree / maxDegree : 0;
+    const { id: _id, ...rest } = node;
+    const data = { id: node.id, ...rest };
+    return {
+      id: node.id,
+      radius,
+      fill,
+      stroke,
+      strokeWidth: DEFAULT_STROKE_WIDTH2,
+      label,
+      labelPriority,
+      community: void 0,
+      data
+    };
+  });
+}
+function resolveEdgeVisuals(edges, encoding, theme) {
+  let widthScale;
+  if (encoding.edgeWidth?.field) {
+    const field = encoding.edgeWidth.field;
+    const values = edges.map((e) => Number(e[field])).filter((v) => Number.isFinite(v));
+    const widthMin = min2(values) ?? 0;
+    const widthMax = max2(values) ?? 1;
+    widthScale = scaleLinear().domain([widthMin, widthMax]).range([MIN_EDGE_WIDTH, MAX_EDGE_WIDTH]);
+  }
+  let edgeColorFn;
+  if (encoding.edgeColor?.field) {
+    const field = encoding.edgeColor.field;
+    const fieldType = encoding.edgeColor.type ?? "nominal";
+    if (fieldType === "quantitative") {
+      const values = edges.map((e) => Number(e[field])).filter((v) => Number.isFinite(v));
+      const colorMin = min2(values) ?? 0;
+      const colorMax = max2(values) ?? 1;
+      const seqPalettes = Object.values(theme.colors.sequential);
+      const palette = seqPalettes.length > 0 ? seqPalettes[0] : ["#ccc", "#333"];
+      const colorScale = scaleLinear().domain([colorMin, colorMax]).range([palette[0], palette[palette.length - 1]]);
+      edgeColorFn = (edge) => {
+        const val = Number(edge[field]);
+        return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
+      };
+    } else {
+      const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
+      const ordinalScale = scaleOrdinal().domain(uniqueValues).range(theme.colors.categorical);
+      edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
+    }
+  }
+  const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+  return edges.map((edge) => {
+    const { source, target, ...rest } = edge;
+    let strokeWidth = DEFAULT_EDGE_WIDTH;
+    if (widthScale && encoding.edgeWidth?.field) {
+      const val = Number(edge[encoding.edgeWidth.field]);
+      if (Number.isFinite(val)) {
+        strokeWidth = widthScale(val);
+      }
+    }
+    const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColor;
+    return {
+      source,
+      target,
+      stroke,
+      strokeWidth,
+      style: "solid",
+      data: { source, target, ...rest }
+    };
+  });
+}
+
+// src/graphs/community.ts
+function assignCommunities(nodes, clusteringField) {
+  if (!clusteringField) return;
+  for (const node of nodes) {
+    const value = node.data[clusteringField];
+    node.community = value != null ? String(value) : void 0;
+  }
+}
+function buildCommunityColorMap(nodes, theme) {
+  const colorMap = /* @__PURE__ */ new Map();
+  const palette = theme.colors.categorical;
+  let colorIndex = 0;
+  for (const node of nodes) {
+    if (node.community != null && !colorMap.has(node.community)) {
+      colorMap.set(node.community, palette[colorIndex % palette.length]);
+      colorIndex++;
+    }
+  }
+  return colorMap;
+}
+function applyCommunityColors(nodes, colorMap) {
+  for (const node of nodes) {
+    if (node.community != null) {
+      const communityColor = colorMap.get(node.community);
+      if (communityColor) {
+        node.fill = communityColor;
+        node.stroke = darkenColor(communityColor);
+      }
+    }
+  }
+}
+
+// src/graphs/compile-graph.ts
+var SWATCH_SIZE = 12;
+var SWATCH_GAP = 6;
+var ENTRY_GAP = 16;
+function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme) {
+  const labelStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.text,
+    lineHeight: 1.3
+  };
+  let entries;
+  if (hasCommunities && communityColorMap.size > 0) {
+    entries = [...communityColorMap.entries()].map(([label, color]) => ({
+      label,
+      color,
+      shape: "circle",
+      active: true
+    }));
+  } else {
+    const colorLabels = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (!colorLabels.has(node.fill)) {
+        colorLabels.set(node.fill, node.label ?? node.id);
+      }
+    }
+    if (colorLabels.size <= 1) {
+      entries = [];
+    } else {
+      entries = [...colorLabels.entries()].map(([color, label]) => ({
+        label,
+        color,
+        shape: "circle",
+        active: true
+      }));
+    }
+  }
+  return {
+    position: "top",
+    entries,
+    bounds: { x: 0, y: 0, width: 0, height: 0 },
+    labelStyle,
+    swatchSize: SWATCH_SIZE,
+    swatchGap: SWATCH_GAP,
+    entryGap: ENTRY_GAP
+  };
+}
+function buildGraphTooltips(nodes) {
+  const descriptors = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const fields = [];
+    if (node.community != null) {
+      fields.push({
+        label: "Community",
+        value: node.community,
+        color: node.fill
+      });
+    }
+    for (const [key, value] of Object.entries(node.data)) {
+      if (key === "id") continue;
+      if (value == null) continue;
+      fields.push({
+        label: key,
+        value: typeof value === "number" ? value.toLocaleString() : String(value)
+      });
+    }
+    descriptors.set(node.id, {
+      title: node.label ?? node.id,
+      fields
+    });
+  }
+  return descriptors;
+}
+function compileGraph(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (normalized.type !== "graph") {
+    throw new Error(
+      `compileGraph received a ${normalized.type} spec. Use compileChart or compileTable instead.`
+    );
+  }
+  const graphSpec = normalized;
+  const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
+  let theme = resolveTheme(mergedThemeConfig);
+  if (options.darkMode) {
+    theme = adaptTheme(theme);
+  }
+  const compiledNodes = resolveNodeVisuals(
+    graphSpec.nodes,
+    graphSpec.encoding,
+    graphSpec.edges,
+    theme
+  );
+  const clusteringField = graphSpec.layout.clustering?.field;
+  const hasCommunities = !!clusteringField;
+  assignCommunities(compiledNodes, clusteringField);
+  let communityColorMap = /* @__PURE__ */ new Map();
+  if (hasCommunities) {
+    communityColorMap = buildCommunityColorMap(compiledNodes, theme);
+    applyCommunityColors(compiledNodes, communityColorMap);
+  }
+  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
+  const legend = buildGraphLegend(compiledNodes, communityColorMap, hasCommunities, theme);
+  const tooltipDescriptors = buildGraphTooltips(compiledNodes);
+  const communityCount = communityColorMap.size;
+  const altParts = [
+    `Network graph with ${compiledNodes.length} nodes and ${compiledEdges.length} edges`
+  ];
+  if (communityCount > 0) {
+    altParts.push(`organized into ${communityCount} communities`);
+  }
+  const a11y = {
+    altText: altParts.join(", "),
+    dataTableFallback: compiledNodes.map((n) => [n.id, n.community ?? "", n.label ?? ""]),
+    role: "img",
+    keyboardNavigable: compiledNodes.length > 0
+  };
+  const maxRadius = compiledNodes.length > 0 ? Math.max(...compiledNodes.map((n) => n.radius)) : DEFAULT_COLLISION_PADDING;
+  const simulationConfig = {
+    chargeStrength: graphSpec.layout.chargeStrength ?? -300,
+    linkDistance: graphSpec.layout.linkDistance ?? 30,
+    clustering: clusteringField ? { field: clusteringField, strength: 0.5 } : null,
+    alphaDecay: 0.0228,
+    velocityDecay: 0.4,
+    collisionRadius: maxRadius + 2
+  };
+  const chrome = computeChrome(
+    {
+      title: graphSpec.chrome.title,
+      subtitle: graphSpec.chrome.subtitle,
+      source: graphSpec.chrome.source,
+      byline: graphSpec.chrome.byline,
+      footer: graphSpec.chrome.footer
+    },
+    theme,
+    options.width,
+    options.measureText
+  );
+  return {
+    nodes: compiledNodes,
+    edges: compiledEdges,
+    legend,
+    chrome,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    dimensions: {
+      width: options.width,
+      height: options.height
+    },
+    simulationConfig
+  };
+}
+var DEFAULT_COLLISION_PADDING = 5;
+
+// src/layout/axes.ts
+import { abbreviateNumber as abbreviateNumber3, formatDate, formatNumber as formatNumber3 } from "@opendata-ai/openchart-core";
+var TICK_COUNTS = {
+  full: 8,
+  reduced: 5,
+  minimal: 3
+};
+function continuousTicks(resolvedScale, density) {
+  const scale = resolvedScale.scale;
+  const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
+  const ticks = scale.ticks(count);
+  return ticks.map((value) => ({
+    value,
+    position: scale(value),
+    label: formatTickLabel(value, resolvedScale)
+  }));
+}
+function categoricalTicks(resolvedScale, density) {
+  const scale = resolvedScale.scale;
+  const domain = scale.domain();
+  const maxTicks = TICK_COUNTS[density];
+  let selectedValues = domain;
+  if (resolvedScale.type !== "band" && domain.length > maxTicks) {
+    const step = Math.ceil(domain.length / maxTicks);
+    selectedValues = domain.filter((_, i) => i % step === 0);
+  }
+  return selectedValues.map((value) => {
+    const bandScale = resolvedScale.type === "band" ? scale : null;
+    const pos = bandScale ? (bandScale(value) ?? 0) + bandScale.bandwidth() / 2 : scale(value) ?? 0;
+    return {
+      value,
+      position: pos,
+      label: value
+    };
+  });
+}
+function formatTickLabel(value, resolvedScale) {
+  const formatStr = resolvedScale.channel.axis?.format;
+  if (resolvedScale.type === "time") {
+    if (formatStr) return String(value);
+    return formatDate(value);
+  }
+  if (resolvedScale.type === "linear" || resolvedScale.type === "log") {
+    const num = value;
+    if (formatStr) return formatNumber3(num);
+    if (Math.abs(num) >= 1e3) return abbreviateNumber3(num);
+    return formatNumber3(num);
+  }
+  return String(value);
+}
+function computeAxes(scales, chartArea, strategy, theme) {
+  const result = {};
+  const density = strategy.axisLabelDensity;
+  const tickLabelStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.axisTick,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.axis,
+    lineHeight: 1.2,
+    fontVariant: "tabular-nums"
+  };
+  const axisLabelStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.body,
+    fontWeight: theme.fonts.weights.medium,
+    fill: theme.colors.text,
+    lineHeight: 1.3
+  };
+  if (scales.x) {
+    const ticks = scales.x.type === "band" || scales.x.type === "point" || scales.x.type === "ordinal" ? categoricalTicks(scales.x, density) : continuousTicks(scales.x, density);
+    const gridlines = ticks.map((t) => ({
+      position: t.position,
+      major: true
+    }));
+    result.x = {
+      ticks,
+      gridlines: scales.x.channel.axis?.grid ? gridlines : [],
+      label: scales.x.channel.axis?.label,
+      labelStyle: axisLabelStyle,
+      tickLabelStyle,
+      start: { x: chartArea.x, y: chartArea.y + chartArea.height },
+      end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height }
+    };
+  }
+  if (scales.y) {
+    const ticks = scales.y.type === "band" || scales.y.type === "point" || scales.y.type === "ordinal" ? categoricalTicks(scales.y, density) : continuousTicks(scales.y, density);
+    const gridlines = ticks.map((t) => ({
+      position: t.position,
+      major: true
+    }));
+    result.y = {
+      ticks,
+      // Y-axis gridlines are shown by default (standard editorial practice)
+      gridlines,
+      label: scales.y.channel.axis?.label,
+      labelStyle: axisLabelStyle,
+      tickLabelStyle,
+      start: { x: chartArea.x, y: chartArea.y },
+      end: { x: chartArea.x, y: chartArea.y + chartArea.height }
+    };
+  }
+  return result;
+}
+
+// src/layout/dimensions.ts
+import { computeChrome as computeChrome2, estimateTextWidth as estimateTextWidth7 } from "@opendata-ai/openchart-core";
+function chromeToInput(chrome) {
+  return {
+    title: chrome.title,
+    subtitle: chrome.subtitle,
+    source: chrome.source,
+    byline: chrome.byline,
+    footer: chrome.footer
+  };
+}
+function computeDimensions(spec, options, legendLayout, theme) {
+  const { width, height } = options;
+  const padding = theme.spacing.padding;
+  const axisMargin = theme.spacing.axisMargin;
+  const chrome = computeChrome2(chromeToInput(spec.chrome), theme, width, options.measureText);
+  const total = { x: 0, y: 0, width, height };
+  const isRadial = spec.type === "pie" || spec.type === "donut";
+  const encoding = spec.encoding;
+  const hasXAxisLabel = !!encoding.x?.axis?.label;
+  const xAxisHeight = isRadial ? 0 : hasXAxisLabel ? 48 : 26;
+  const margins = {
+    top: padding + chrome.topHeight + axisMargin,
+    right: padding + (isRadial ? padding : axisMargin),
+    bottom: padding + chrome.bottomHeight + xAxisHeight,
+    left: padding + (isRadial ? padding : axisMargin)
+  };
+  if (spec.type === "line" || spec.type === "area") {
+    const colorField = encoding.color?.field;
+    if (colorField) {
+      let maxLabelWidth = 0;
+      const seen = /* @__PURE__ */ new Set();
+      for (const row of spec.data) {
+        const label = String(row[colorField] ?? "");
+        if (!seen.has(label)) {
+          seen.add(label);
+          const w = estimateTextWidth7(label, 11, 600);
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+      }
+      if (maxLabelWidth > 0) {
+        margins.right = Math.max(margins.right, padding + maxLabelWidth + 16);
+      }
+    }
+  }
+  if (encoding.y && !isRadial) {
+    if (spec.type === "bar" || spec.type === "dot" || encoding.y.type === "nominal" || encoding.y.type === "ordinal") {
+      const yField = encoding.y.field;
+      let maxLabelWidth = 0;
+      for (const row of spec.data) {
+        const label = String(row[yField] ?? "");
+        const w = estimateTextWidth7(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      if (maxLabelWidth > 0) {
+        margins.left = Math.max(margins.left, padding + maxLabelWidth + 12);
+      }
+    } else if (encoding.y.type === "quantitative" || encoding.y.type === "temporal") {
+      const yField = encoding.y.field;
+      let maxAbsVal = 0;
+      for (const row of spec.data) {
+        const v = Number(row[yField]);
+        if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
+      }
+      let sampleLabel;
+      if (maxAbsVal >= 1e9) sampleLabel = "1.5B";
+      else if (maxAbsVal >= 1e6) sampleLabel = "1.5M";
+      else if (maxAbsVal >= 1e3) sampleLabel = "1.5K";
+      else if (maxAbsVal >= 100) sampleLabel = "100";
+      else if (maxAbsVal >= 10) sampleLabel = "10";
+      else sampleLabel = "0.0";
+      const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? "-" : "";
+      const labelEst = negPrefix + sampleLabel;
+      const labelWidth = estimateTextWidth7(
+        labelEst,
+        theme.fonts.sizes.axisTick,
+        theme.fonts.weights.normal
+      );
+      margins.left = Math.max(margins.left, padding + labelWidth + 10);
+    }
+  }
+  if (encoding.y?.axis && encoding.y.axis.label && !isRadial) {
+    const rotatedLabelMargin = 45 + Math.ceil(theme.fonts.sizes.body / 2) + 4;
+    margins.left = Math.max(margins.left, padding + rotatedLabelMargin);
+  }
+  if (legendLayout.entries.length > 0) {
+    if (legendLayout.position === "right" || legendLayout.position === "bottom-right") {
+      margins.right += legendLayout.bounds.width + 8;
+    } else if (legendLayout.position === "top") {
+      margins.top += legendLayout.bounds.height + 4;
+    } else if (legendLayout.position === "bottom") {
+      margins.bottom += legendLayout.bounds.height + 4;
+    }
+  }
+  const chartArea = {
+    x: margins.left,
+    y: margins.top,
+    width: Math.max(0, width - margins.left - margins.right),
+    height: Math.max(0, height - margins.top - margins.bottom)
+  };
+  return { total, chrome, chartArea, margins, theme };
+}
+
+// src/layout/gridlines.ts
+function computeGridlines(axes, chartArea, showVertical = false) {
+  const horizontal = [];
+  const vertical = [];
+  if (axes.y) {
+    for (const gridline of axes.y.gridlines) {
+      horizontal.push({
+        x1: chartArea.x,
+        y1: gridline.position,
+        x2: chartArea.x + chartArea.width,
+        y2: gridline.position,
+        major: gridline.major
+      });
+    }
+  }
+  if (showVertical && axes.x) {
+    for (const gridline of axes.x.gridlines) {
+      vertical.push({
+        x1: gridline.position,
+        y1: chartArea.y,
+        x2: gridline.position,
+        y2: chartArea.y + chartArea.height,
+        major: gridline.major
+      });
+    }
+  }
+  return { horizontal, vertical };
+}
+
+// src/layout/scales.ts
+import { extent, max as max3, min as min3 } from "d3-array";
+import { scaleBand, scaleLinear as scaleLinear2, scaleLog, scaleOrdinal as scaleOrdinal2, scalePoint, scaleTime } from "d3-scale";
+function fieldValues(data, field) {
+  return data.map((d) => d[field]).filter((v) => v != null);
+}
+function parseDates(values) {
+  return values.map((v) => v instanceof Date ? v : new Date(String(v))).filter((d) => !Number.isNaN(d.getTime()));
+}
+function parseNumbers(values) {
+  return values.map((v) => typeof v === "number" ? v : Number(v)).filter((n) => Number.isFinite(n));
+}
+function uniqueStrings(values) {
+  const seen = /* @__PURE__ */ new Set();
+  const result = [];
+  for (const v of values) {
+    const s = String(v);
+    if (!seen.has(s)) {
+      seen.add(s);
+      result.push(s);
+    }
+  }
+  return result;
+}
+function buildTimeScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseDates(fieldValues(data, channel.field));
+  const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
+  const scale = scaleTime().domain(domain).range([rangeStart, rangeEnd]);
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  return { scale, type: "time", channel };
+}
+function buildLinearScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    const [d0, d1] = channel.scale.domain;
+    domainMin = d0;
+    domainMax = d1;
+  } else {
+    domainMin = min3(values) ?? 0;
+    domainMax = max3(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = scaleLinear2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  return { scale, type: "linear", channel };
+}
+function buildLogScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field)).filter((v) => v > 0);
+  const domainMin = min3(values) ?? 1;
+  const domainMax = max3(values) ?? 10;
+  const scale = scaleLog().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]).nice();
+  return { scale, type: "log", channel };
+}
+function buildBandScale(channel, data, rangeStart, rangeEnd) {
+  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const scale = scaleBand().domain(values).range([rangeStart, rangeEnd]).padding(0.35);
+  return { scale, type: "band", channel };
+}
+function buildPointScale(channel, data, rangeStart, rangeEnd) {
+  const values = channel.scale?.domain ? channel.scale.domain : uniqueStrings(fieldValues(data, channel.field));
+  const scale = scalePoint().domain(values).range([rangeStart, rangeEnd]).padding(0.5);
+  return { scale, type: "point", channel };
+}
+function buildOrdinalColorScale(channel, data, palette) {
+  const values = uniqueStrings(fieldValues(data, channel.field));
+  const scale = scaleOrdinal2().domain(values).range(palette);
+  return { scale, type: "ordinal", channel };
+}
+function buildSequentialColorScale(channel, data, palette) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  const domainMin = min3(values) ?? 0;
+  const domainMax = max3(values) ?? 1;
+  const scale = scaleLinear2().domain([domainMin, domainMax]).range([palette[0], palette[palette.length - 1]]).clamp(true);
+  return { scale, type: "sequential", channel };
+}
+function buildPositionalScale(channel, data, rangeStart, rangeEnd, chartType, axis) {
+  if (channel.scale?.type) {
+    switch (channel.scale.type) {
+      case "time":
+        return buildTimeScale(channel, data, rangeStart, rangeEnd);
+      case "linear":
+        return buildLinearScale(channel, data, rangeStart, rangeEnd);
+      case "log":
+        return buildLogScale(channel, data, rangeStart, rangeEnd);
+      case "band":
+        return buildBandScale(channel, data, rangeStart, rangeEnd);
+      case "point":
+        return buildPointScale(channel, data, rangeStart, rangeEnd);
+      case "ordinal":
+        return buildBandScale(channel, data, rangeStart, rangeEnd);
+    }
+  }
+  switch (channel.type) {
+    case "temporal":
+      return buildTimeScale(channel, data, rangeStart, rangeEnd);
+    case "quantitative":
+      return buildLinearScale(channel, data, rangeStart, rangeEnd);
+    case "nominal":
+    case "ordinal":
+      if (chartType === "bar" && axis === "y" || chartType === "column" && axis === "x" || chartType === "dot" && axis === "y") {
+        return buildBandScale(channel, data, rangeStart, rangeEnd);
+      }
+      return buildPointScale(channel, data, rangeStart, rangeEnd);
+    default:
+      return buildLinearScale(channel, data, rangeStart, rangeEnd);
+  }
+}
+function computeScales(spec, chartArea, data) {
+  const result = {};
+  const encoding = spec.encoding;
+  if (spec.type === "scatter") {
+    if (encoding.x?.type === "quantitative" && encoding.x.scale?.zero === void 0) {
+      if (!encoding.x.scale) {
+        encoding.x.scale = { zero: false };
+      } else {
+        encoding.x.scale.zero = false;
+      }
+    }
+    if (encoding.y?.type === "quantitative" && encoding.y.scale?.zero === void 0) {
+      if (!encoding.y.scale) {
+        encoding.y.scale = { zero: false };
+      } else {
+        encoding.y.scale.zero = false;
+      }
+    }
+  }
+  if (encoding.x) {
+    let xData = data;
+    if (spec.type === "bar" && encoding.color && encoding.x.type === "quantitative") {
+      const yField = encoding.y?.field;
+      const xField = encoding.x.field;
+      if (yField) {
+        const sums = /* @__PURE__ */ new Map();
+        for (const row of data) {
+          const cat = String(row[yField] ?? "");
+          const val = Number(row[xField] ?? 0);
+          if (Number.isFinite(val) && val > 0) {
+            sums.set(cat, (sums.get(cat) ?? 0) + val);
+          }
+        }
+        const maxSum = Math.max(...sums.values(), 0);
+        xData = [...data, { [xField]: maxSum }];
+      }
+    }
+    result.x = buildPositionalScale(
+      encoding.x,
+      xData,
+      chartArea.x,
+      chartArea.x + chartArea.width,
+      spec.type,
+      "x"
+    );
+  }
+  if (encoding.y) {
+    let yData = data;
+    if (spec.type === "column" && encoding.color && encoding.y.type === "quantitative") {
+      const xField = encoding.x?.field;
+      const yField = encoding.y.field;
+      if (xField) {
+        const sums = /* @__PURE__ */ new Map();
+        for (const row of data) {
+          const cat = String(row[xField] ?? "");
+          const val = Number(row[yField] ?? 0);
+          if (Number.isFinite(val) && val > 0) {
+            sums.set(cat, (sums.get(cat) ?? 0) + val);
+          }
+        }
+        const maxSum = Math.max(...sums.values(), 0);
+        yData = [...data, { [yField]: maxSum }];
+      }
+    }
+    result.y = buildPositionalScale(
+      encoding.y,
+      yData,
+      chartArea.y + chartArea.height,
+      chartArea.y,
+      spec.type,
+      "y"
+    );
+  }
+  if (encoding.color) {
+    const defaultPalette = [
+      "#1b7fa3",
+      "#c44e52",
+      "#6a9f58",
+      "#d47215",
+      "#507e79",
+      "#9a6a8d",
+      "#c4636b",
+      "#9c755f",
+      "#a88f22",
+      "#858078"
+    ];
+    if (encoding.color.type === "quantitative") {
+      result.color = buildSequentialColorScale(encoding.color, data, defaultPalette);
+    } else {
+      result.color = buildOrdinalColorScale(encoding.color, data, defaultPalette);
+    }
+  }
+  return result;
+}
+
+// src/legend/compute.ts
+import { estimateTextWidth as estimateTextWidth8 } from "@opendata-ai/openchart-core";
+var SWATCH_SIZE2 = 12;
+var SWATCH_GAP2 = 6;
+var ENTRY_GAP2 = 16;
+var LEGEND_PADDING = 8;
+var LEGEND_RIGHT_WIDTH = 120;
+function swatchShapeForType(chartType) {
+  switch (chartType) {
+    case "line":
+      return "line";
+    case "scatter":
+    case "dot":
+      return "circle";
+    default:
+      return "square";
+  }
+}
+function extractColorEntries(spec, theme) {
+  const colorEnc = spec.encoding.color;
+  if (!colorEnc) return [];
+  if (colorEnc.type === "quantitative") return [];
+  const uniqueValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
+  const palette = theme.colors.categorical;
+  const shape = swatchShapeForType(spec.type);
+  return uniqueValues.map((value, i) => ({
+    label: value,
+    color: palette[i % palette.length],
+    shape,
+    active: true
+  }));
+}
+function computeLegend(spec, strategy, theme, chartArea) {
+  const entries = extractColorEntries(spec, theme);
+  const labelStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.text,
+    lineHeight: 1.3
+  };
+  const resolvedPosition = spec.legend?.position ?? (strategy.legendPosition === "right" ? "right" : "top");
+  if (entries.length === 0) {
+    return {
+      position: resolvedPosition,
+      entries: [],
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      labelStyle,
+      swatchSize: SWATCH_SIZE2,
+      swatchGap: SWATCH_GAP2,
+      entryGap: ENTRY_GAP2
+    };
+  }
+  if (resolvedPosition === "right" || resolvedPosition === "bottom-right") {
+    const maxLabelWidth = Math.max(
+      ...entries.map((e) => estimateTextWidth8(e.label, labelStyle.fontSize, labelStyle.fontWeight))
+    );
+    const legendWidth = Math.min(
+      LEGEND_RIGHT_WIDTH,
+      SWATCH_SIZE2 + SWATCH_GAP2 + maxLabelWidth + LEGEND_PADDING * 2
+    );
+    const entryHeight = Math.max(SWATCH_SIZE2, labelStyle.fontSize * labelStyle.lineHeight);
+    const legendHeight2 = entries.length * entryHeight + (entries.length - 1) * 4 + LEGEND_PADDING * 2;
+    const clampedHeight = Math.min(legendHeight2, chartArea.height);
+    const legendY = resolvedPosition === "bottom-right" ? chartArea.y + chartArea.height - clampedHeight : chartArea.y;
+    const offsetDx2 = spec.legend?.offset?.dx ?? 0;
+    const offsetDy2 = spec.legend?.offset?.dy ?? 0;
+    return {
+      position: resolvedPosition,
+      entries,
+      bounds: {
+        x: chartArea.x + chartArea.width - legendWidth + offsetDx2,
+        y: legendY + offsetDy2,
+        width: legendWidth,
+        height: clampedHeight
+      },
+      labelStyle,
+      swatchSize: SWATCH_SIZE2,
+      swatchGap: SWATCH_GAP2,
+      entryGap: 4
+    };
+  }
+  const totalWidth = entries.reduce((sum, entry) => {
+    const labelWidth = estimateTextWidth8(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    return sum + SWATCH_SIZE2 + SWATCH_GAP2 + labelWidth + ENTRY_GAP2;
+  }, 0);
+  const legendHeight = SWATCH_SIZE2 + LEGEND_PADDING * 2;
+  const offsetDx = spec.legend?.offset?.dx ?? 0;
+  const offsetDy = spec.legend?.offset?.dy ?? 0;
+  return {
+    position: resolvedPosition,
+    entries,
+    bounds: {
+      x: chartArea.x + offsetDx,
+      y: (resolvedPosition === "bottom" ? chartArea.y + chartArea.height - legendHeight : chartArea.y) + offsetDy,
+      width: Math.min(totalWidth, chartArea.width),
+      height: legendHeight
+    },
+    labelStyle,
+    swatchSize: SWATCH_SIZE2,
+    swatchGap: SWATCH_GAP2,
+    entryGap: ENTRY_GAP2
+  };
+}
+
+// src/tables/compile-table.ts
+import { computeChrome as computeChrome3, estimateTextWidth as estimateTextWidth9 } from "@opendata-ai/openchart-core";
+
+// src/tables/bar-column.ts
+var NEGATIVE_BAR_COLOR = "#c44e52";
+function computeBarCell(value, config, columnMax, columnMin, theme, _darkMode) {
+  const barColor = config.color ?? theme.colors.categorical[0];
+  const hasNegatives = columnMin < 0;
+  if (!Number.isFinite(value)) {
+    return { barPercent: 0, barOffset: 0, barColor, isNegative: false };
+  }
+  if (!hasNegatives) {
+    const maxValue = config.maxValue ?? columnMax;
+    if (maxValue <= 0) {
+      return { barPercent: 0, barOffset: 0, barColor, isNegative: false };
+    }
+    const barPercent2 = Math.max(0, Math.min(1, value / maxValue));
+    return { barPercent: barPercent2, barOffset: 0, barColor, isNegative: false };
+  }
+  const maxPos = config.maxValue ?? columnMax;
+  const absMin = Math.abs(columnMin);
+  const totalRange = maxPos + absMin;
+  if (totalRange === 0) {
+    return { barPercent: 0, barOffset: 0, barColor, isNegative: false };
+  }
+  const zeroPos = absMin / totalRange;
+  if (value >= 0) {
+    const barPercent2 = value / totalRange;
+    return { barPercent: barPercent2, barOffset: zeroPos, barColor, isNegative: false };
+  }
+  const barPercent = Math.abs(value) / totalRange;
+  return {
+    barPercent,
+    barOffset: zeroPos - barPercent,
+    barColor: config.color ?? NEGATIVE_BAR_COLOR,
+    isNegative: true
+  };
+}
+function computeColumnMax(data, key) {
+  let max4 = 0;
+  for (const row of data) {
+    const val = row[key];
+    if (typeof val === "number" && Number.isFinite(val) && val > max4) {
+      max4 = val;
+    }
+  }
+  return max4;
+}
+function computeColumnMin(data, key) {
+  let min4 = 0;
+  for (const row of data) {
+    const val = row[key];
+    if (typeof val === "number" && Number.isFinite(val) && val < min4) {
+      min4 = val;
+    }
+  }
+  return min4;
+}
+
+// src/tables/category-colors.ts
+import { adaptColorForDarkMode } from "@opendata-ai/openchart-core";
+
+// src/tables/utils.ts
+import { contrastRatio } from "@opendata-ai/openchart-core";
+function accessibleTextColor(bg) {
+  const white = "#ffffff";
+  const black = "#000000";
+  const whiteRatio = contrastRatio(white, bg);
+  const blackRatio = contrastRatio(black, bg);
+  return whiteRatio >= blackRatio ? white : black;
+}
+
+// src/tables/category-colors.ts
+function computeCategoryColors(data, column, theme, darkMode) {
+  const result = /* @__PURE__ */ new Map();
+  const explicitMap = column.categoryColors;
+  if (!explicitMap) return result;
+  const categoricalPalette = theme.colors.categorical;
+  let nextPaletteIndex = 0;
+  const autoAssigned = /* @__PURE__ */ new Map();
+  const lightBg = "#ffffff";
+  const darkBg = theme.colors.background;
+  for (let i = 0; i < data.length; i++) {
+    const raw = data[i][column.key];
+    if (raw == null) continue;
+    const key = String(raw);
+    let bg;
+    if (explicitMap[key]) {
+      bg = explicitMap[key];
+    } else if (autoAssigned.has(key)) {
+      bg = autoAssigned.get(key);
+    } else {
+      bg = categoricalPalette[nextPaletteIndex % categoricalPalette.length];
+      nextPaletteIndex++;
+      autoAssigned.set(key, bg);
+    }
+    if (darkMode) {
+      bg = adaptColorForDarkMode(bg, lightBg, darkBg);
+    }
+    const textColor = accessibleTextColor(bg);
+    result.set(i, {
+      backgroundColor: bg,
+      color: textColor
+    });
+  }
+  return result;
+}
+
+// src/tables/format-cells.ts
+import { formatDate as formatDate2, formatNumber as formatNumber4 } from "@opendata-ai/openchart-core";
+import { format as d3Format } from "d3-format";
+function isNumericValue(value) {
+  if (typeof value === "number") return Number.isFinite(value);
+  return false;
+}
+function isDateValue(value) {
+  if (value instanceof Date) return !Number.isNaN(value.getTime());
+  return false;
+}
+function formatCell(value, column) {
+  const style = {};
+  if (value == null) {
+    return {
+      value,
+      formattedValue: "",
+      style
+    };
+  }
+  if (column.format && isNumericValue(value)) {
+    try {
+      const formatter = d3Format(column.format);
+      return {
+        value,
+        formattedValue: formatter(value),
+        style
+      };
+    } catch {
+    }
+  }
+  if (isNumericValue(value)) {
+    return {
+      value,
+      formattedValue: formatNumber4(value),
+      style
+    };
+  }
+  if (isDateValue(value)) {
+    return {
+      value,
+      formattedValue: formatDate2(value),
+      style
+    };
+  }
+  return {
+    value,
+    formattedValue: String(value),
+    style
+  };
+}
+function formatValueForSearch(value, column) {
+  if (value == null) return "";
+  if (column.format && isNumericValue(value)) {
+    try {
+      return d3Format(column.format)(value);
+    } catch {
+    }
+  }
+  if (isNumericValue(value)) {
+    return formatNumber4(value);
+  }
+  return String(value);
+}
+
+// src/tables/heatmap.ts
+import { adaptColorForDarkMode as adaptColorForDarkMode2 } from "@opendata-ai/openchart-core";
+import { interpolateRgb } from "d3-interpolate";
+import { scaleSequential } from "d3-scale";
+function interpolatorFromStops(stops) {
+  if (stops.length === 0) return () => "#ffffff";
+  if (stops.length === 1) return () => stops[0];
+  return (t) => {
+    const clamped = Math.max(0, Math.min(1, t));
+    const segment = clamped * (stops.length - 1);
+    const lo = Math.floor(segment);
+    const hi = Math.min(lo + 1, stops.length - 1);
+    const frac = segment - lo;
+    return interpolateRgb(stops[lo], stops[hi])(frac);
+  };
+}
+function resolvePalette(palette, theme) {
+  if (Array.isArray(palette)) return palette;
+  const seqPalettes = theme.colors.sequential;
+  const divPalettes = theme.colors.diverging;
+  if (typeof palette === "string") {
+    if (seqPalettes[palette]) return seqPalettes[palette];
+    if (divPalettes[palette]) return divPalettes[palette];
+  }
+  const firstSeqKey = Object.keys(seqPalettes)[0];
+  return firstSeqKey ? seqPalettes[firstSeqKey] : ["#deebf7", "#08519c"];
+}
+function computeHeatmapColors(data, column, theme, darkMode) {
+  const result = /* @__PURE__ */ new Map();
+  const config = column.heatmap;
+  if (!config) return result;
+  const colorField = config.colorByField ?? column.key;
+  const numericValues = [];
+  for (let i = 0; i < data.length; i++) {
+    const raw = data[i][colorField];
+    if (typeof raw === "number" && Number.isFinite(raw)) {
+      numericValues.push({ index: i, value: raw });
+    }
+  }
+  if (numericValues.length === 0) return result;
+  let domain;
+  if (config.domain) {
+    domain = config.domain;
+  } else {
+    let min4 = Infinity;
+    let max4 = -Infinity;
+    for (const { value } of numericValues) {
+      if (value < min4) min4 = value;
+      if (value > max4) max4 = value;
+    }
+    domain = [min4, max4];
+  }
+  let stops = resolvePalette(config.palette, theme);
+  if (darkMode) {
+    const lightBg = "#ffffff";
+    const darkBg = theme.colors.background;
+    stops = stops.map((c) => adaptColorForDarkMode2(c, lightBg, darkBg));
+  }
+  const interpolator = interpolatorFromStops(stops);
+  const scale = scaleSequential(interpolator).domain(domain).clamp(true);
+  for (const { index, value } of numericValues) {
+    const bg = scale(value);
+    const textColor = accessibleTextColor(bg);
+    result.set(index, {
+      backgroundColor: bg,
+      color: textColor
+    });
+  }
+  return result;
+}
+
+// src/tables/pagination.ts
+function paginateData(data, page, pageSize) {
+  const totalRows = data.length;
+  if (pageSize <= 0) {
+    return {
+      rows: data,
+      totalRows,
+      totalPages: 1,
+      page: 0
+    };
+  }
+  const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
+  const clampedPage = Math.max(0, Math.min(page, totalPages - 1));
+  const start = clampedPage * pageSize;
+  const end = Math.min(start + pageSize, totalRows);
+  return {
+    rows: data.slice(start, end),
+    totalRows,
+    totalPages,
+    page: clampedPage
+  };
+}
+
+// src/tables/search.ts
+function buildSearchIndex(data, columns) {
+  const index = /* @__PURE__ */ new Map();
+  for (let i = 0; i < data.length; i++) {
+    const row = data[i];
+    const parts = [];
+    for (const col of columns) {
+      parts.push(formatValueForSearch(row[col.key], col));
+    }
+    index.set(i, parts.join(" ").toLowerCase());
+  }
+  return index;
+}
+function filterBySearch(data, query, searchIndex, originalIndices) {
+  if (!query || query.trim() === "") {
+    return { data, indices: originalIndices };
+  }
+  const lowerQuery = query.toLowerCase();
+  const filteredData = [];
+  const filteredIndices = [];
+  for (let i = 0; i < data.length; i++) {
+    const originalIdx = originalIndices[i];
+    const searchText = searchIndex.get(originalIdx);
+    if (searchText?.includes(lowerQuery)) {
+      filteredData.push(data[i]);
+      filteredIndices.push(originalIdx);
+    }
+  }
+  return { data: filteredData, indices: filteredIndices };
+}
+
+// src/tables/sort.ts
+function sortData(data, sort) {
+  const { column, direction } = sort;
+  const multiplier = direction === "asc" ? 1 : -1;
+  const indexed = data.map((row, i) => ({ row, index: i }));
+  indexed.sort((a, b) => {
+    const aVal = a.row[column];
+    const bVal = b.row[column];
+    const aNull = aVal == null;
+    const bNull = bVal == null;
+    if (aNull && bNull) return a.index - b.index;
+    if (aNull) return 1;
+    if (bNull) return -1;
+    let cmp = 0;
+    if (typeof aVal === "number" && typeof bVal === "number") {
+      cmp = aVal - bVal;
+    } else if (aVal instanceof Date && bVal instanceof Date) {
+      cmp = aVal.getTime() - bVal.getTime();
+    } else {
+      cmp = String(aVal).localeCompare(String(bVal));
+    }
+    if (cmp === 0) return a.index - b.index;
+    return cmp * multiplier;
+  });
+  return {
+    data: indexed.map((item) => item.row),
+    originalIndices: indexed.map((item) => item.index)
+  };
+}
+
+// src/tables/sparkline.ts
+function extractValues(row, columnKey, config) {
+  const field = config.valuesField ?? columnKey;
+  const raw = row[field];
+  if (!Array.isArray(raw)) return [];
+  return raw.map((v) => typeof v === "number" && Number.isFinite(v) ? v : null).filter((v) => v !== null);
+}
+function computeSparkline(values, config, theme, _darkMode) {
+  if (values.length === 0) return null;
+  const type = config.type ?? "line";
+  const color = config.color ?? theme.colors.categorical[0];
+  let min4 = Infinity;
+  let max4 = -Infinity;
+  for (const v of values) {
+    if (v < min4) min4 = v;
+    if (v > max4) max4 = v;
+  }
+  const range = max4 - min4;
+  const normalize = (v) => range === 0 ? 0.5 : (v - min4) / range;
+  const startValue = values[0];
+  const endValue = values[values.length - 1];
+  if (type === "line") {
+    const points2 = values.map((v, i) => ({
+      x: values.length === 1 ? 0.5 : i / (values.length - 1),
+      y: normalize(v)
+    }));
+    return {
+      type,
+      points: points2,
+      bars: [],
+      color,
+      count: values.length,
+      startValue,
+      endValue
+    };
+  }
+  const bars = values.map(normalize);
+  const points = values.map((v, i) => ({
+    x: values.length === 1 ? 0.5 : i / (values.length - 1),
+    y: normalize(v)
+  }));
+  return {
+    type,
+    points,
+    bars,
+    color,
+    count: values.length,
+    startValue,
+    endValue
+  };
+}
+function computeSparklineForRow(row, columnKey, config, theme, darkMode) {
+  const values = extractValues(row, columnKey, config);
+  return computeSparkline(values, config, theme, darkMode);
+}
+
+// src/tables/compile-table.ts
+function determineCellType(col) {
+  if (col.sparkline) return "sparkline";
+  if (col.bar) return "bar";
+  if (col.heatmap) return "heatmap";
+  if (col.image) return "image";
+  if (col.flag) return "flag";
+  if (col.categoryColors) return "category";
+  return "text";
+}
+function inferAlignment(col, data) {
+  if (col.align) return col.align;
+  for (const row of data) {
+    const val = row[col.key];
+    if (val != null) {
+      return typeof val === "number" ? "right" : "left";
+    }
+  }
+  return "left";
+}
+function estimateColumnWidth(col, data, fontSize) {
+  const MIN_WIDTH = 60;
+  const PADDING = 24;
+  if (col.sparkline) return 140;
+  if (col.image) return (col.image.width ?? 24) + PADDING;
+  if (col.flag) return 60;
+  const label = col.label ?? col.key;
+  const headerWidth = estimateTextWidth9(label, fontSize, 600) + PADDING;
+  const sampleSize = Math.min(100, data.length);
+  let maxDataWidth = 0;
+  for (let i = 0; i < sampleSize; i++) {
+    const val = data[i][col.key];
+    const text = val == null ? "" : String(val);
+    const width = estimateTextWidth9(text, fontSize, 400) + PADDING;
+    if (width > maxDataWidth) maxDataWidth = width;
+  }
+  return Math.max(MIN_WIDTH, headerWidth, maxDataWidth);
+}
+function resolveColumns(columns, data, totalWidth, theme) {
+  const fontSize = theme.fonts.sizes.body;
+  const isFixed = columns.map((col) => !!(col.sparkline || col.image || col.flag));
+  const naturalWidths = columns.map((col) => {
+    if (col.width) {
+      if (col.width.endsWith("px")) {
+        return parseInt(col.width, 10) || 100;
+      }
+      if (col.width.endsWith("%")) {
+        return parseFloat(col.width) / 100 * totalWidth || 100;
+      }
+      return parseInt(col.width, 10) || 100;
+    }
+    return estimateColumnWidth(col, data, fontSize);
+  });
+  const fixedTotal = naturalWidths.reduce((sum, w, i) => sum + (isFixed[i] ? w : 0), 0);
+  const flexTotal = naturalWidths.reduce((sum, w, i) => sum + (isFixed[i] ? 0 : w), 0);
+  const remainingWidth = totalWidth - fixedTotal;
+  const flexScale = flexTotal > 0 && remainingWidth > 0 ? remainingWidth / flexTotal : 1;
+  return columns.map((col, i) => ({
+    key: col.key,
+    label: col.label ?? col.key,
+    width: Math.max(60, isFixed[i] ? naturalWidths[i] : Math.round(naturalWidths[i] * flexScale)),
+    sortable: col.sortable ?? true,
+    align: inferAlignment(col, data),
+    cellType: determineCellType(col)
+  }));
+}
+function buildCell(value, column, resolvedColumn, heatmapStyle, categoryStyle, barData, sparklineData) {
+  const base = formatCell(value, column);
+  if (typeof value === "number") {
+    base.style = { ...base.style, fontVariant: "tabular-nums" };
+  }
+  const cellType = resolvedColumn.cellType;
+  switch (cellType) {
+    case "heatmap": {
+      const merged = heatmapStyle ? { ...base.style, ...heatmapStyle } : base.style;
+      return {
+        ...base,
+        cellType: "heatmap",
+        style: merged
+      };
+    }
+    case "category": {
+      const merged = categoryStyle ? { ...base.style, ...categoryStyle } : base.style;
+      return {
+        ...base,
+        cellType: "category",
+        style: merged
+      };
+    }
+    case "bar": {
+      return {
+        ...base,
+        cellType: "bar",
+        barWidth: barData?.barPercent ?? 0,
+        barOffset: barData?.barOffset ?? 0,
+        barColor: barData?.barColor ?? "#ccc",
+        isNegative: barData?.isNegative ?? false
+      };
+    }
+    case "sparkline": {
+      return {
+        ...base,
+        cellType: "sparkline",
+        sparklineData
+      };
+    }
+    case "image": {
+      const src = typeof value === "string" ? value : "";
+      const imgConfig = column.image ?? {};
+      return {
+        ...base,
+        cellType: "image",
+        src,
+        imageWidth: imgConfig.width ?? 24,
+        imageHeight: imgConfig.height ?? 24,
+        rounded: imgConfig.rounded ?? false
+      };
+    }
+    case "flag": {
+      const code = typeof value === "string" ? value : "";
+      return {
+        ...base,
+        cellType: "flag",
+        countryCode: code
+      };
+    }
+    default: {
+      return {
+        ...base,
+        cellType: "text"
+      };
+    }
+  }
+}
+function compileTableLayout(spec, options, theme) {
+  const data = spec.data;
+  const darkMode = theme.isDark;
+  const resolvedColumns = resolveColumns(spec.columns, data, options.width, theme);
+  const searchIndex = spec.search ? buildSearchIndex(data, spec.columns) : /* @__PURE__ */ new Map();
+  let currentData = data;
+  let originalIndices = data.map((_, i) => i);
+  if (options.sort) {
+    const sorted = sortData(currentData, options.sort);
+    originalIndices = sorted.originalIndices.map((i) => originalIndices[i]);
+    currentData = sorted.data;
+  }
+  if (spec.search && options.search) {
+    const filtered = filterBySearch(currentData, options.search, searchIndex, originalIndices);
+    currentData = filtered.data;
+    originalIndices = filtered.indices;
+  }
+  const totalFiltered = currentData.length;
+  let pageSize = 0;
+  let currentPage = 0;
+  let paginationState;
+  if (spec.pagination) {
+    pageSize = options.pageSize ?? (typeof spec.pagination === "object" ? spec.pagination.pageSize : 25);
+    currentPage = options.page ?? 0;
+    const paginated = paginateData(currentData, currentPage, pageSize);
+    const start = paginated.page * pageSize;
+    const end = start + paginated.rows.length;
+    const pageIndices = originalIndices.slice(start, end);
+    currentData = paginated.rows;
+    originalIndices = pageIndices;
+    paginationState = {
+      page: paginated.page,
+      pageSize,
+      totalRows: paginated.totalRows,
+      totalPages: paginated.totalPages
+    };
+  }
+  const heatmapMaps = /* @__PURE__ */ new Map();
+  const categoryMaps = /* @__PURE__ */ new Map();
+  const barMaxes = /* @__PURE__ */ new Map();
+  const barMins = /* @__PURE__ */ new Map();
+  for (let c = 0; c < spec.columns.length; c++) {
+    const col = spec.columns[c];
+    const resolved = resolvedColumns[c];
+    if (resolved.cellType === "heatmap" && col.heatmap) {
+      heatmapMaps.set(col.key, computeHeatmapColors(data, col, theme, darkMode));
+    }
+    if (resolved.cellType === "category" && col.categoryColors) {
+      categoryMaps.set(col.key, computeCategoryColors(data, col, theme, darkMode));
+    }
+    if (resolved.cellType === "bar" && col.bar) {
+      barMaxes.set(col.key, computeColumnMax(data, col.key));
+      barMins.set(col.key, computeColumnMin(data, col.key));
+    }
+  }
+  const rows = currentData.map((row, i) => {
+    const origIdx = originalIndices[i];
+    const rowId = spec.rowKey ? String(row[spec.rowKey] ?? origIdx) : String(origIdx);
+    const cells = spec.columns.map((col, c) => {
+      const resolved = resolvedColumns[c];
+      const value = row[col.key];
+      const heatmapStyle = heatmapMaps.get(col.key)?.get(origIdx);
+      const categoryStyle = categoryMaps.get(col.key)?.get(origIdx);
+      let barData;
+      if (resolved.cellType === "bar" && col.bar && typeof value === "number") {
+        barData = computeBarCell(
+          value,
+          col.bar,
+          barMaxes.get(col.key) ?? 0,
+          barMins.get(col.key) ?? 0,
+          theme,
+          darkMode
+        );
+      }
+      let sparklineData = null;
+      if (resolved.cellType === "sparkline" && col.sparkline) {
+        sparklineData = computeSparklineForRow(row, col.key, col.sparkline, theme, darkMode);
+      }
+      return buildCell(value, col, resolved, heatmapStyle, categoryStyle, barData, sparklineData);
+    });
+    return { id: rowId, cells, data: row };
+  });
+  const chrome = computeChrome3(
+    {
+      title: spec.chrome.title,
+      subtitle: spec.chrome.subtitle,
+      source: spec.chrome.source,
+      byline: spec.chrome.byline,
+      footer: spec.chrome.footer
+    },
+    theme,
+    options.width,
+    options.measureText
+  );
+  const titleText = spec.chrome.title?.text ?? "";
+  const caption = titleText ? `Table: ${titleText}` : `Data table with ${data.length} rows`;
+  return {
+    chrome,
+    columns: resolvedColumns,
+    rows,
+    sort: options.sort,
+    pagination: paginationState,
+    search: {
+      enabled: spec.search,
+      placeholder: "Search...",
+      query: options.search ?? ""
+    },
+    stickyFirstColumn: spec.stickyFirstColumn,
+    compact: spec.compact,
+    a11y: {
+      caption,
+      summary: `${resolvedColumns.length} columns, ${totalFiltered} rows`
+    },
+    theme
+  };
+}
+
+// src/tooltips/compute.ts
+import { formatDate as formatDate3, formatNumber as formatNumber5 } from "@opendata-ai/openchart-core";
+import { format as d3Format2 } from "d3-format";
+function formatValue(value, fieldType, format) {
+  if (value == null) return "";
+  if (fieldType === "temporal" || value instanceof Date) {
+    return formatDate3(value);
+  }
+  if (typeof value === "number") {
+    if (format) {
+      try {
+        return d3Format2(format)(value);
+      } catch {
+        return formatNumber5(value);
+      }
+    }
+    return formatNumber5(value);
+  }
+  return String(value);
+}
+function buildFields(row, encoding, color) {
+  const fields = [];
+  if (encoding.y) {
+    fields.push({
+      label: encoding.y.axis?.label ?? encoding.y.field,
+      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      color
+    });
+  }
+  if (encoding.x) {
+    fields.push({
+      label: encoding.x.axis?.label ?? encoding.x.field,
+      value: formatValue(row[encoding.x.field], encoding.x.type, encoding.x.axis?.format)
+    });
+  }
+  if (encoding.size) {
+    fields.push({
+      label: encoding.size.axis?.label ?? encoding.size.field,
+      value: formatValue(row[encoding.size.field], encoding.size.type, encoding.size.axis?.format)
+    });
+  }
+  return fields;
+}
+function getTooltipTitle(row, encoding) {
+  if (encoding.x?.type === "temporal") {
+    return formatValue(row[encoding.x.field], "temporal");
+  }
+  if (encoding.x?.type === "nominal" || encoding.x?.type === "ordinal") {
+    return String(row[encoding.x.field] ?? "");
+  }
+  if (encoding.y?.type === "nominal" || encoding.y?.type === "ordinal") {
+    return String(row[encoding.y.field] ?? "");
+  }
+  if (encoding.color) {
+    return String(row[encoding.color.field] ?? "");
+  }
+  return void 0;
+}
+function tooltipsForLine(_mark, _encoding, _markIndex) {
+  return [];
+}
+function tooltipsForPoint(mark, encoding, markIndex) {
+  const title = getTooltipTitle(mark.data, encoding);
+  const fields = buildFields(mark.data, encoding, mark.fill);
+  return [[`point-${markIndex}`, { title, fields }]];
+}
+function tooltipsForRect(mark, encoding, markIndex) {
+  const title = getTooltipTitle(mark.data, encoding);
+  const fields = buildFields(mark.data, encoding, mark.fill);
+  return [[`rect-${markIndex}`, { title, fields }]];
+}
+function tooltipsForArc(mark, encoding, markIndex) {
+  const row = mark.data;
+  const fields = [];
+  if (encoding.color) {
+    const categoryName = String(row[encoding.color.field] ?? "");
+    if (encoding.y) {
+      fields.push({
+        label: categoryName,
+        value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+        color: mark.fill
+      });
+    }
+  } else if (encoding.y) {
+    fields.push({
+      label: encoding.y.field,
+      value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
+      color: mark.fill
+    });
+  }
+  const title = encoding.color ? String(row[encoding.color.field] ?? "") : void 0;
+  return [[`arc-${markIndex}`, { title, fields }]];
+}
+function tooltipsForArea(_mark, _encoding, _markIndex) {
+  return [];
+}
+function computeTooltipDescriptors(spec, marks) {
+  const encoding = spec.encoding;
+  const descriptors = /* @__PURE__ */ new Map();
+  for (let i = 0; i < marks.length; i++) {
+    const mark = marks[i];
+    let entries = [];
+    switch (mark.type) {
+      case "line":
+        entries = tooltipsForLine(mark, encoding, i);
+        break;
+      case "area":
+        entries = tooltipsForArea(mark, encoding, i);
+        break;
+      case "point":
+        entries = tooltipsForPoint(mark, encoding, i);
+        break;
+      case "rect":
+        entries = tooltipsForRect(mark, encoding, i);
+        break;
+      case "arc":
+        entries = tooltipsForArc(mark, encoding, i);
+        break;
+    }
+    for (const [key, content] of entries) {
+      descriptors.set(key, content);
+    }
+  }
+  return descriptors;
+}
+
+// src/compile.ts
+var builtinRenderers = {
+  line: lineRenderer,
+  area: areaRenderer,
+  bar: barRenderer,
+  column: columnRenderer,
+  scatter: scatterRenderer,
+  pie: pieRenderer,
+  donut: donutRenderer,
+  dot: dotRenderer
+};
+for (const [type, renderer] of Object.entries(builtinRenderers)) {
+  registerChartRenderer(type, renderer);
+}
+function computeRowObstacles(marks, scales) {
+  if (!scales.y || scales.y.type !== "band") return [];
+  const rows = /* @__PURE__ */ new Map();
+  for (const mark of marks) {
+    let cy;
+    let left;
+    let right;
+    if (mark.type === "point") {
+      const pm = mark;
+      cy = pm.cy;
+      left = pm.cx - pm.r;
+      right = pm.cx + pm.r;
+    } else if (mark.type === "rect") {
+      const rm = mark;
+      cy = rm.y + rm.height / 2;
+      left = rm.x;
+      right = rm.x + rm.width;
+    } else {
+      continue;
+    }
+    const key = Math.round(cy);
+    const existing = rows.get(key);
+    if (existing) {
+      existing.minX = Math.min(existing.minX, left);
+      existing.maxX = Math.max(existing.maxX, right);
+    } else {
+      rows.set(key, { minX: left, maxX: right, bandY: cy });
+    }
+  }
+  const bandScale = scales.y.scale;
+  const bandwidth = bandScale.bandwidth?.() ?? 0;
+  if (bandwidth === 0) return [];
+  const obstacles = [];
+  for (const { minX, maxX, bandY } of rows.values()) {
+    obstacles.push({
+      x: minX,
+      y: bandY - bandwidth / 2,
+      width: maxX - minX,
+      height: bandwidth
+    });
+  }
+  return obstacles;
+}
+function compileChart(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (normalized.type === "table") {
+    throw new Error("compileChart received a table spec. Use compileTable instead.");
+  }
+  if (normalized.type === "graph") {
+    throw new Error("compileChart received a graph spec. Use compileGraph instead.");
+  }
+  const chartSpec = normalized;
+  const mergedThemeConfig = options.theme ? { ...chartSpec.theme, ...options.theme } : chartSpec.theme;
+  let theme = resolveTheme2(mergedThemeConfig);
+  if (options.darkMode) {
+    theme = adaptTheme2(theme);
+  }
+  const breakpoint = getBreakpoint(options.width);
+  const strategy = getLayoutStrategy(breakpoint);
+  const preliminaryArea = {
+    x: 0,
+    y: 0,
+    width: options.width,
+    height: options.height
+  };
+  const legendLayout = computeLegend(chartSpec, strategy, theme, preliminaryArea);
+  const dims = computeDimensions(chartSpec, options, legendLayout, theme);
+  const chartArea = dims.chartArea;
+  const legendArea = { ...chartArea };
+  if (legendLayout.entries.length > 0) {
+    switch (legendLayout.position) {
+      case "top":
+        legendArea.y -= legendLayout.bounds.height + 4;
+        legendArea.height += legendLayout.bounds.height + 4;
+        break;
+      case "bottom":
+        legendArea.height += legendLayout.bounds.height + 4;
+        break;
+      case "right":
+      case "bottom-right":
+        legendArea.width += legendLayout.bounds.width + 8;
+        break;
+    }
+  }
+  const finalLegend = computeLegend(chartSpec, strategy, theme, legendArea);
+  const scales = computeScales(chartSpec, chartArea, chartSpec.data);
+  if (scales.color) {
+    if (scales.color.type === "sequential") {
+      const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
+      scales.color.scale.range([
+        seqStops[0],
+        seqStops[seqStops.length - 1]
+      ]);
+    } else {
+      scales.color.scale.range(
+        theme.colors.categorical
+      );
+    }
+  }
+  scales.defaultColor = theme.colors.categorical[0];
+  const isRadial = chartSpec.type === "pie" || chartSpec.type === "donut";
+  const axes = isRadial ? { x: void 0, y: void 0 } : computeAxes(scales, chartArea, strategy, theme);
+  if (!isRadial) {
+    computeGridlines(axes, chartArea);
+  }
+  const renderer = getChartRenderer(chartSpec.type);
+  const marks = renderer ? renderer(chartSpec, scales, chartArea, strategy, theme) : [];
+  const obstacles = [];
+  if (finalLegend.bounds.width > 0) {
+    obstacles.push(finalLegend.bounds);
+  }
+  obstacles.push(...computeRowObstacles(marks, scales));
+  const annotations = computeAnnotations(
+    chartSpec,
+    scales,
+    chartArea,
+    strategy,
+    theme.isDark,
+    obstacles
+  );
+  const tooltipDescriptors = computeTooltipDescriptors(chartSpec, marks);
+  const altText = generateAltText(
+    {
+      type: chartSpec.type,
+      data: chartSpec.data,
+      encoding: chartSpec.encoding,
+      chrome: chartSpec.chrome
+    },
+    chartSpec.data
+  );
+  const dataTableFallback = generateDataTable(
+    {
+      type: chartSpec.type,
+      data: chartSpec.data,
+      encoding: chartSpec.encoding
+    },
+    chartSpec.data
+  );
+  return {
+    area: chartArea,
+    chrome: dims.chrome,
+    axes: {
+      x: axes.x,
+      y: axes.y
+    },
+    marks,
+    annotations,
+    legend: finalLegend,
+    tooltipDescriptors,
+    a11y: {
+      altText,
+      dataTableFallback,
+      role: "img",
+      keyboardNavigable: marks.length > 0
+    },
+    theme,
+    dimensions: {
+      width: options.width,
+      height: options.height
+    }
+  };
+}
+function compileTable(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (normalized.type !== "table") {
+    throw new Error(`compileTable received a ${normalized.type} spec. Use compileChart instead.`);
+  }
+  const tableSpec = normalized;
+  const mergedThemeConfig = options.theme ? { ...tableSpec.theme, ...options.theme } : tableSpec.theme;
+  let theme = resolveTheme2(mergedThemeConfig);
+  if (options.darkMode) {
+    theme = adaptTheme2(theme);
+  }
+  return compileTableLayout(tableSpec, options, theme);
+}
+function compileGraph2(spec, options) {
+  return compileGraph(spec, options);
+}
+export {
+  clearRenderers,
+  compile,
+  compileChart,
+  compileGraph2 as compileGraph,
+  compileTable,
+  getChartRenderer,
+  normalizeSpec,
+  registerChartRenderer,
+  validateSpec
+};
+//# sourceMappingURL=index.js.map