@opendata-ai/openchart-core 7.11.0 → 8.0.0-rc.10

package/dist/index.js

@@ -15,8 +15,6 @@ var MARK_ENCODING_RULES = {
     size: optional(),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     detail: optional("nominal")
   },
   line: {
@@ -27,8 +25,6 @@ var MARK_ENCODING_RULES = {
     opacity: optional("quantitative"),
     strokeDash: optional("nominal", "ordinal"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     detail: optional("nominal")
   },
   area: {
@@ -39,8 +35,6 @@ var MARK_ENCODING_RULES = {
     size: optional(),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     detail: optional("nominal")
   },
   point: {
@@ -48,11 +42,8 @@ var MARK_ENCODING_RULES = {
     y: required("quantitative", "temporal", "nominal", "ordinal"),
     color: optional("nominal", "ordinal", "quantitative"),
     size: optional("quantitative"),
-    shape: optional("nominal", "ordinal"),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     detail: optional("nominal")
   },
   circle: {
@@ -62,8 +53,6 @@ var MARK_ENCODING_RULES = {
     size: optional("quantitative"),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     detail: optional("nominal")
   },
   lollipop: {
@@ -73,21 +62,63 @@ var MARK_ENCODING_RULES = {
     size: optional("quantitative"),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
+    detail: optional("nominal")
+  },
+  beeswarm: {
+    x: optional("quantitative", "nominal", "ordinal"),
+    y: optional("quantitative", "nominal", "ordinal"),
+    color: optional("nominal", "ordinal", "quantitative"),
+    size: optional("quantitative"),
+    opacity: optional("quantitative"),
+    tooltip: optional(),
+    detail: optional("nominal")
+  },
+  // Range: x+x2 with nominal y (horizontal) or y+y2 with nominal x (vertical).
+  // The orientation-dependent x2/y2 requirement is enforced by a dedicated
+  // check in the validator; the static table can only mark them optional.
+  range: {
+    x: required("quantitative", "nominal", "ordinal"),
+    y: required("quantitative", "nominal", "ordinal"),
+    x2: optional("quantitative"),
+    y2: optional("quantitative"),
+    color: optional("nominal", "ordinal"),
+    size: optional(),
+    opacity: optional("quantitative"),
+    tooltip: optional(),
     detail: optional("nominal")
   },
   arc: {
+    x: optional(),
+    y: optional("quantitative"),
+    theta: required("quantitative"),
+    color: required("nominal", "ordinal"),
+    size: optional(),
+    opacity: optional("quantitative"),
+    tooltip: optional(),
+    detail: optional("nominal")
+  },
+  waffle: {
+    x: optional(),
+    y: required("quantitative"),
+    color: required("nominal", "ordinal"),
+    size: optional(),
+    opacity: optional("quantitative"),
+    tooltip: optional(),
+    theta: optional("quantitative"),
+    detail: optional("nominal")
+  },
+  // parliament: hemicycle seat chart. Like arc/waffle, no positional axes;
+  // color is the party (required), theta the seat count (aliased to y in the
+  // sugar pass). y is accepted so the theta alias resolves before the rules
+  // check runs.
+  parliament: {
     x: optional(),
     y: required("quantitative"),
     color: required("nominal", "ordinal"),
     size: optional(),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
     theta: optional("quantitative"),
-    radius: optional("quantitative"),
     detail: optional("nominal")
   },
   text: {
@@ -98,7 +129,6 @@ var MARK_ENCODING_RULES = {
     opacity: optional("quantitative"),
     text: required(),
     tooltip: optional(),
-    href: optional(),
     detail: optional("nominal")
   },
   rule: {
@@ -111,7 +141,6 @@ var MARK_ENCODING_RULES = {
     opacity: optional("quantitative"),
     strokeDash: optional("nominal", "ordinal"),
     tooltip: optional(),
-    href: optional(),
     detail: optional("nominal")
   },
   tick: {
@@ -121,7 +150,6 @@ var MARK_ENCODING_RULES = {
     size: optional(),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
     detail: optional("nominal")
   },
   rect: {
@@ -133,12 +161,22 @@ var MARK_ENCODING_RULES = {
     size: optional(),
     opacity: optional("quantitative"),
     tooltip: optional(),
-    href: optional(),
-    order: optional("quantitative", "ordinal"),
+    detail: optional("nominal")
+  },
+  // calendar: x is the daily date (temporal), color the per-day value
+  // (quantitative). No y channel: the calendar computes its own
+  // weeks-x-weekdays geometry, so y is left optional here and the dedicated
+  // validator rejects it with a pointed message.
+  calendar: {
+    x: required("temporal"),
+    y: optional(),
+    color: required("quantitative"),
+    size: optional(),
+    opacity: optional("quantitative"),
+    tooltip: optional(),
     detail: optional("nominal")
   }
 };
-var CHART_ENCODING_RULES = MARK_ENCODING_RULES;
 var GRAPH_ENCODING_RULES = {
   nodeColor: { required: false, allowedTypes: ["nominal", "ordinal"] },
   nodeSize: { required: false, allowedTypes: ["quantitative"] },
@@ -149,14 +187,31 @@ var GRAPH_ENCODING_RULES = {
 
 // src/types/events.ts
 var elementRef = {
-  annotation: (index, id) => ({ type: "annotation", index, id }),
-  chrome: (key) => ({ type: "chrome", key }),
-  seriesLabel: (series) => ({ type: "series-label", series }),
-  legend: () => ({ type: "legend" }),
-  legendEntry: (series, index) => ({
+  annotation: (index, id, path) => ({
+    type: "annotation",
+    index,
+    ...id !== void 0 ? { id } : {},
+    ...path !== void 0 ? { path } : {}
+  }),
+  chrome: (key, path) => ({
+    type: "chrome",
+    key,
+    ...path !== void 0 ? { path } : {}
+  }),
+  seriesLabel: (series, path) => ({
+    type: "series-label",
+    series,
+    ...path !== void 0 ? { path } : {}
+  }),
+  legend: (path) => ({
+    type: "legend",
+    ...path !== void 0 ? { path } : {}
+  }),
+  legendEntry: (series, index, path) => ({
     type: "legend-entry",
     series,
-    index
+    index,
+    ...path !== void 0 ? { path } : {}
   })
 };
 
@@ -177,6 +232,10 @@ function isConditionalDef(def) {
   if (!def) return false;
   return "condition" in def;
 }
+function isValueDef(def) {
+  if (!def) return false;
+  return "value" in def && !("condition" in def) && !("field" in def);
+}
 var MARK_TYPES = /* @__PURE__ */ new Set([
   "bar",
   "line",
@@ -188,9 +247,16 @@ var MARK_TYPES = /* @__PURE__ */ new Set([
   "rule",
   "tick",
   "rect",
-  "lollipop"
+  "lollipop",
+  "beeswarm",
+  "range",
+  "waffle",
+  "calendar",
+  "parliament"
 ]);
-var CHART_TYPES = MARK_TYPES;
+function isAxislessMark(markType) {
+  return markType === "arc" || markType === "waffle" || markType === "calendar" || markType === "parliament";
+}
 function resolveMarkType(mark) {
   return typeof mark === "string" ? mark : mark.type;
 }
@@ -218,6 +284,9 @@ function isTileMapSpec(spec) {
 function isBarListSpec(spec) {
   return "type" in spec && spec.type === "barlist";
 }
+function isMapSpec(spec) {
+  return "type" in spec && spec.type === "map";
+}
 function isTextAnnotation(annotation) {
   return annotation.type === "text";
 }
@@ -225,7 +294,8 @@ function isRangeAnnotation(annotation) {
   return annotation.type === "range";
 }
 function isRefLineAnnotation(annotation) {
-  return annotation.type === "refline" || annotation.type === "rule";
+  const type = annotation.type;
+  return type === "refline" || type === "rule";
 }
 var MARK_DISPLAY_NAMES = {
   bar: "Bar chart",
@@ -239,7 +309,12 @@ var MARK_DISPLAY_NAMES = {
   rule: "Rule chart",
   tick: "Tick plot",
   rect: "Heatmap",
-  lollipop: "Lollipop chart"
+  lollipop: "Lollipop chart",
+  beeswarm: "Beeswarm chart",
+  range: "Range plot",
+  waffle: "Waffle chart",
+  calendar: "Calendar heatmap",
+  parliament: "Parliament chart"
 };
 
 // ../../node_modules/.bun/d3-color@3.1.0/node_modules/d3-color/src/define.js
@@ -606,10 +681,16 @@ var TRITAN_MATRIX = [
   [0, 0.433, 0.567],
   [0, 0.475, 0.525]
 ];
+var ACHROMAT_MATRIX = [
+  [0.2126, 0.7152, 0.0722],
+  [0.2126, 0.7152, 0.0722],
+  [0.2126, 0.7152, 0.0722]
+];
 var MATRICES = {
   protanopia: PROTAN_MATRIX,
   deuteranopia: DEUTAN_MATRIX,
-  tritanopia: TRITAN_MATRIX
+  tritanopia: TRITAN_MATRIX,
+  achromatopsia: ACHROMAT_MATRIX
 };
 function linearize(v) {
   const s = v / 255;
@@ -654,6 +735,10 @@ function relativeLuminance(color2) {
   const linear = srgb.map((v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
   return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
 }
+function isOpaqueColor(color2) {
+  const c = rgb(color2);
+  return c != null && !Number.isNaN(c.r) && c.opacity === 1;
+}
 function contrastRatio(fg, bg) {
   const l1 = relativeLuminance(fg);
   const l2 = relativeLuminance(bg);
@@ -812,6 +897,30 @@ var DIVERGING_PALETTES = {
   redBlue: [...DIVERGING_RED_BLUE.stops],
   brownTeal: [...DIVERGING_BROWN_TEAL.stops]
 };
+var VL_SCHEME_ALIASES = {
+  blues: "blue",
+  greens: "green",
+  oranges: "orange",
+  purples: "purple",
+  teals: "teal",
+  redblue: "redBlue",
+  brownteal: "brownTeal",
+  // ColorBrewer BrBG, which brownTeal mirrors
+  brownbluegreen: "brownTeal",
+  category10: "categorical",
+  tableau10: "categorical"
+};
+function resolveSchemeName(name) {
+  const canonical = SEQUENTIAL_PALETTES[name] || DIVERGING_PALETTES[name] ? name : VL_SCHEME_ALIASES[name.toLowerCase()] ?? name.toLowerCase();
+  if (canonical === "categorical") return [...CATEGORICAL_PALETTE];
+  return SEQUENTIAL_PALETTES[canonical] ?? DIVERGING_PALETTES[canonical];
+}
+var SUPPORTED_SCHEME_NAMES = [
+  ...Object.keys(SEQUENTIAL_PALETTES),
+  ...Object.keys(DIVERGING_PALETTES),
+  "categorical",
+  ...Object.keys(VL_SCHEME_ALIASES)
+];
 
 // src/layout/text-measure.ts
 var CHAR_WIDTHS_400 = {
@@ -1232,6 +1341,7 @@ var X_AXIS_TITLE_BAND = 22;
 var X_AXIS_TITLE_BAND_ROTATED = 20;
 var X_AXIS_ROTATED_EXTENT_CAP = 120;
 var TICK_LINE_HEIGHT_FACTOR = 1.2;
+var AXIS_TO_LABEL_GAP = 3;
 function computeXAxisExtentFromLabels(input) {
   const measure = input.measure ?? estimateTextWidth;
   const baseHeight = input.xAxisHeight ?? X_AXIS_BAND_HEIGHT;
@@ -1243,14 +1353,41 @@ function computeXAxisExtentFromLabels(input) {
       if (w > maxLabelWidth) maxLabelWidth = w;
     }
     const lineHeight = input.tickFontSize * TICK_LINE_HEIGHT_FACTOR;
-    const AXIS_TO_LABEL_GAP = 3;
     const rotatedHeight = Math.min(
       maxLabelWidth * Math.sin(angleRad) + lineHeight * Math.cos(angleRad) + AXIS_TO_LABEL_GAP,
       X_AXIS_ROTATED_EXTENT_CAP
     );
     return input.hasTitle ? rotatedHeight + X_AXIS_TITLE_BAND_ROTATED : rotatedHeight;
   }
-  return input.hasTitle ? baseHeight + X_AXIS_TITLE_BAND : baseHeight;
+  const tickExtent = 4 + input.tickFontSize + Math.max(11, Math.ceil(input.tickFontSize * 0.7));
+  const flatHeight = Math.max(baseHeight, tickExtent);
+  return input.hasTitle ? flatHeight + X_AXIS_TITLE_BAND : flatHeight;
+}
+function maxRotatedLabelWidth(tickAngle, tickFontSize) {
+  const angleRad = Math.abs(tickAngle) * (Math.PI / 180);
+  const sin = Math.sin(angleRad);
+  if (sin <= 1e-3) return Number.POSITIVE_INFINITY;
+  const lineHeight = tickFontSize * TICK_LINE_HEIGHT_FACTOR;
+  const usable = X_AXIS_ROTATED_EXTENT_CAP - lineHeight * Math.cos(angleRad) - AXIS_TO_LABEL_GAP;
+  return Math.max(0, usable / sin);
+}
+function truncateRotatedLabel(label, tickAngle, tickFontSize, tickFontWeight, measure = estimateTextWidth) {
+  const budget = maxRotatedLabelWidth(tickAngle, tickFontSize);
+  if (!Number.isFinite(budget)) return label;
+  if (measure(label, tickFontSize, tickFontWeight) <= budget) return label;
+  const ELLIPSIS = "\u2026";
+  let lo = 0;
+  let hi = label.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    const candidate = label.slice(0, mid) + ELLIPSIS;
+    if (measure(candidate, tickFontSize, tickFontWeight) <= budget) {
+      lo = mid;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return lo > 0 ? label.slice(0, lo).trimEnd() + ELLIPSIS : ELLIPSIS;
 }
 
 // src/theme/defaults.ts
@@ -1790,6 +1927,12 @@ function estimateLineCount(text, style, maxWidth, measureText) {
   }
   return lines;
 }
+var FOOTNOTE_LINE_HEIGHT = 1.3;
+var FOOTNOTE_BAND_GAP = 4;
+function footnoteBandHeight(count, theme) {
+  if (count <= 0) return 0;
+  return count * theme.fonts.sizes.small * FOOTNOTE_LINE_HEIGHT + FOOTNOTE_BAND_GAP;
+}
 function computeChrome(chrome, theme, width, measureText, chromeMode = "full", padding, watermark = true, bottomLegendHeight = 0) {
   if (!chrome || chromeMode === "hidden") {
     return { topHeight: 0, bottomHeight: 0 };
@@ -2118,7 +2261,8 @@ function resolveCollisions(labels, strategies = OFFSET_STRATEGIES) {
           from: { x: bestX, y: bestY },
           to: { x: label.anchorX, y: label.anchorY },
           stroke: label.style.fill,
-          style: "straight"
+          style: "straight",
+          arrow: false
         } : void 0
       });
     } else {
@@ -3145,30 +3289,65 @@ function formatNumber(value, _locale) {
   if (Number.isInteger(value)) {
     return format(",")(value);
   }
+  if (Math.abs(value) < 5e-3) {
+    return format(".2~r")(value);
+  }
   return format(",.2f")(value);
 }
-var ABBREVIATIONS = [
+var UNIT_TABLE = [
   { threshold: 1e12, suffix: "T", divisor: 1e12 },
   { threshold: 1e9, suffix: "B", divisor: 1e9 },
   { threshold: 1e6, suffix: "M", divisor: 1e6 },
-  { threshold: 1e3, suffix: "K", divisor: 1e3 }
+  { threshold: 1e3, suffix: "k", divisor: 1e3 }
 ];
+function unitFor(abs) {
+  for (const entry of UNIT_TABLE) {
+    if (abs >= entry.threshold) return entry;
+  }
+  return { suffix: "", divisor: 1 };
+}
+function fractionDigits(x) {
+  const a = Math.abs(x);
+  for (let p = 0; p <= 3; p++) {
+    const scaled = a * 10 ** p;
+    if (Math.abs(scaled - Math.round(scaled)) < 1e-9) return p;
+  }
+  return 4;
+}
 function abbreviateNumber(value) {
   if (!Number.isFinite(value)) return String(value);
   const absValue = Math.abs(value);
   const sign = value < 0 ? "-" : "";
-  for (const { threshold, suffix, divisor } of ABBREVIATIONS) {
+  for (let i = 0; i < UNIT_TABLE.length; i++) {
+    const { threshold, suffix, divisor } = UNIT_TABLE[i];
     if (absValue >= threshold) {
-      const abbreviated = absValue / divisor;
-      const formatted = abbreviated % 1 === 0 ? String(abbreviated) : format(".1f")(abbreviated);
-      return `${sign}${formatted}${suffix}`;
+      const mantissa = format(".1~f")(absValue / divisor);
+      if (mantissa === "1000" && i > 0) {
+        return `${sign}1${UNIT_TABLE[i - 1].suffix}`;
+      }
+      return `${sign}${mantissa}${suffix}`;
     }
   }
   return formatNumber(value);
 }
+function formatOrdinal(value) {
+  if (!Number.isFinite(value)) return String(value);
+  const n = Math.round(value);
+  const abs = Math.abs(n);
+  const rem100 = abs % 100;
+  const rem10 = abs % 10;
+  let suffix;
+  if (rem100 >= 11 && rem100 <= 13) suffix = "th";
+  else if (rem10 === 1) suffix = "st";
+  else if (rem10 === 2) suffix = "nd";
+  else if (rem10 === 3) suffix = "rd";
+  else suffix = "th";
+  return `${n}${suffix}`;
+}
 var D3_FORMAT_SUFFIX_RE = /^(.*~?[efgsrdxXobcnp%])(.+)$/;
 function buildD3Formatter(formatStr) {
   if (!formatStr) return null;
+  if (formatStr === "ordinal") return formatOrdinal;
   try {
     const fmt = format(formatStr);
     if (formatStr.includes("s")) {
@@ -3188,6 +3367,111 @@ function buildD3Formatter(formatStr) {
   }
   return null;
 }
+function formatPercent(value, options) {
+  const fraction = options?.fraction ?? true;
+  if (fraction) {
+    return format(".1~%")(value);
+  }
+  return `${format(",.1~f")(value)}%`;
+}
+function formatCurrency(value, options) {
+  const compact = options?.compact ?? false;
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (compact) {
+    if (abs >= 1e3) {
+      return `${sign}$${abbreviateNumber(abs)}`;
+    }
+    return `${sign}$${formatNumber(abs)}`;
+  }
+  if (Number.isInteger(value)) {
+    return sign + format("$,")(abs);
+  }
+  return sign + format("$,.2f")(abs);
+}
+function computeFieldFormatContext(values, surface) {
+  let min = Infinity;
+  let max = -Infinity;
+  let allIntegers = true;
+  let hasFinite = false;
+  for (const raw of values) {
+    const v = typeof raw === "number" ? raw : typeof raw === "string" ? Number(raw) : NaN;
+    if (!Number.isFinite(v)) continue;
+    hasFinite = true;
+    if (v < min) min = v;
+    if (v > max) max = v;
+    if (allIntegers && !Number.isInteger(v)) allIntegers = false;
+  }
+  const ctx = {};
+  if (hasFinite) {
+    ctx.extent = [min, max];
+    ctx.allIntegers = allIntegers;
+  }
+  if (surface) ctx.surface = surface;
+  return ctx;
+}
+function isYearContext(ctx) {
+  if (!ctx?.extent || !ctx.allIntegers) return false;
+  const [min, max] = ctx.extent;
+  return min >= 1500 && max <= 2500;
+}
+function resolveNumberFormatter(formatStr, ctx) {
+  if (!formatStr) return null;
+  if (formatStr === "ordinal") return formatOrdinal;
+  if (formatStr === "percent") {
+    const fraction = ctx?.extent ? Math.max(Math.abs(ctx.extent[0]), Math.abs(ctx.extent[1])) <= 1 : true;
+    return (v) => formatPercent(v, { fraction });
+  }
+  if (formatStr === "currency") {
+    const isTable = ctx?.surface === "table";
+    if (!isTable && ctx?.step != null && (ctx.stepReference ?? 0) >= 1e3) {
+      const stepFmt = buildCompactStepFormatter(ctx.step);
+      return (v) => {
+        const sign = v < 0 ? "-" : "";
+        return `${sign}$${stepFmt(Math.abs(v))}`;
+      };
+    }
+    return (v) => formatCurrency(v, { compact: !isTable });
+  }
+  return buildD3Formatter(formatStr);
+}
+function defaultNumberFormatter(ctx) {
+  if (isYearContext(ctx)) {
+    return (v) => String(Math.round(v));
+  }
+  if (ctx?.surface === "table") {
+    return formatNumber;
+  }
+  if (ctx?.step != null && (ctx.stepReference ?? maxAbs(ctx.extent)) >= 1e3) {
+    return buildCompactStepFormatter(ctx.step);
+  }
+  return (v) => {
+    if (!Number.isFinite(v)) return String(v);
+    if (ctx?.extent === void 0 && ctx?.allIntegers === void 0) {
+      if (Number.isInteger(v) && v >= 1500 && v <= 2500) return String(v);
+    }
+    return Math.abs(v) >= 1e3 ? abbreviateNumber(v) : formatNumber(v);
+  };
+}
+function maxAbs(extent) {
+  if (!extent) return 0;
+  return Math.max(Math.abs(extent[0]), Math.abs(extent[1]));
+}
+function buildCompactStepFormatter(step) {
+  return (v) => {
+    if (v === 0) return "0";
+    if (!Number.isFinite(v)) return String(v);
+    const abs = Math.abs(v);
+    if (abs < 1e3) return formatNumber(v);
+    const { suffix, divisor } = unitFor(abs);
+    const p = fractionDigits(step / divisor);
+    if (p > 2) {
+      return Number.isInteger(v) ? format(",")(v) : format(",.2f")(v);
+    }
+    const sign = v < 0 ? "-" : "";
+    return sign + format(`.${p}~f`)(abs / divisor) + suffix;
+  };
+}
 var GRANULARITY_FORMATS = {
   year: "%Y",
   quarter: "",
@@ -3262,7 +3546,34 @@ function generateAltText(spec, data) {
     const titleText = typeof title === "string" ? title : title.text;
     parts.push(`showing ${titleText}`);
   }
-  if (spec.encoding.x && data.length > 0) {
+  if (markType === "waffle") {
+    const units = markDef.units ?? 100;
+    parts.push(`dividing ${units} units`);
+  }
+  if (markType === "parliament") {
+    const valueField = spec.encoding.theta?.field ?? spec.encoding.y?.field;
+    if (valueField) {
+      const totalSeats = data.reduce((sum, d) => {
+        const v = Number(d[valueField]);
+        return sum + (Number.isFinite(v) && v > 0 ? v : 0);
+      }, 0);
+      if (totalSeats > 0) {
+        const majority = Math.floor(totalSeats / 2) + 1;
+        parts.push(`with ${totalSeats} seats, ${majority} needed for a majority`);
+      }
+    }
+  }
+  if (markType === "beeswarm") {
+    const xIsValue = spec.encoding.x?.type === "quantitative";
+    const valueField = xIsValue ? spec.encoding.x?.field : spec.encoding.y?.field;
+    const laneField = xIsValue ? spec.encoding.y?.field : spec.encoding.x?.field;
+    if (valueField) {
+      parts.push(
+        `plotting the distribution of ${valueField}${laneField ? ` by ${laneField}` : ""}`
+      );
+    }
+  }
+  if (spec.encoding.x && markType !== "beeswarm" && data.length > 0) {
     const field = spec.encoding.x.field;
     const values = data.map((d) => d[field]).filter((v) => v != null);
     if (values.length > 0) {
@@ -3347,11 +3658,12 @@ function generateAriaLabels(marks) {
   }
   return labels;
 }
+var ariaNumberFormatter = defaultNumberFormatter();
 function formatValue(value) {
   if (value == null) return "N/A";
   if (value instanceof Date) return value.toISOString().slice(0, 10);
   if (typeof value === "number") {
-    return Number.isInteger(value) ? String(value) : value.toFixed(2);
+    return ariaNumberFormatter(value);
   }
   return String(value);
 }
@@ -3431,7 +3743,7 @@ function pieChart(data, category, value, options) {
   const categoryChannel = resolveField(category, data);
   const valueChannel = resolveField(value, data);
   const encoding = {
-    y: valueChannel,
+    theta: valueChannel,
     color: categoryChannel
   };
   if (options?.size && data) {
@@ -3449,7 +3761,7 @@ function donutChart(data, category, value, options) {
   const categoryChannel = resolveField(category, data);
   const valueChannel = resolveField(value, data);
   const encoding = {
-    y: valueChannel,
+    theta: valueChannel,
     color: categoryChannel
   };
   if (options?.size && data) {
@@ -3514,6 +3826,182 @@ function tileMap(data, options) {
     ...options?.valueFormat && { valueFormat: options.valueFormat }
   };
 }
+
+// src/helpers/deep-merge.ts
+function deepMergeSpec(target, source) {
+  if (source === void 0) return target;
+  if (source === null) return source;
+  if (typeof source !== "object" || Array.isArray(source) || typeof target !== "object" || target === null || Array.isArray(target)) {
+    return source;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    result[key] = deepMergeSpec(target[key], source[key]);
+  }
+  return result;
+}
+
+// src/styles/token-definitions.ts
+var CSS_TOKEN_ROOT_SELECTORS = [
+  ".oc-root",
+  ".oc-chart-root",
+  ".oc-table-wrapper",
+  ".oc-table-root",
+  ".oc-graph-wrapper",
+  ".oc-graph-root",
+  ".oc-sankey-root",
+  ".oc-tilemap-root",
+  ".oc-barlist-root",
+  ".oc-map-root"
+];
+var CSS_TOKENS = [
+  {
+    name: "--oc-font-family",
+    light: '\n      "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  {
+    name: "--oc-font-mono",
+    light: '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace'
+  },
+  {
+    section: "Animation easing presets via CSS linear()",
+    name: "--oc-ease-smooth",
+    light: "linear(\n      0,\n      0.157,\n      0.438,\n      0.64,\n      0.766,\n      0.85,\n      0.906,\n      0.941,\n      0.964,\n      0.978,\n      0.988,\n      0.994,\n      0.998,\n      1\n    )"
+  },
+  {
+    name: "--oc-ease-snappy",
+    light: "linear(\n      0,\n      0.012,\n      0.048,\n      0.108,\n      0.194,\n      0.302,\n      0.426,\n      0.559,\n      0.69,\n      0.808,\n      0.905,\n      0.973,\n      1.013,\n      1.028,\n      1.023,\n      1.006,\n      0.984,\n      0.966,\n      0.957,\n      0.957,\n      0.964,\n      0.975,\n      0.986,\n      0.995,\n      1,\n      1.003,\n      1.002,\n      1,\n      0.998,\n      0.998,\n      0.999,\n      1\n    )",
+    consumers: "EASE_VAR_MAP in vanilla renderers"
+  },
+  { section: "Animation timing defaults", name: "--oc-animation-duration", light: "500ms" },
+  { name: "--oc-animation-stagger", light: "80ms" },
+  { name: "--oc-annotation-delay", light: "200ms" },
+  { section: "Typography scale (editorial design system)", name: "--oc-title-size", light: "26px" },
+  { name: "--oc-title-weight", light: "590" },
+  { name: "--oc-title-tracking", light: "-0.022em" },
+  { name: "--oc-subtitle-size", light: "14px" },
+  { name: "--oc-subtitle-weight", light: "450" },
+  { name: "--oc-source-size", light: "11px" },
+  { name: "--oc-source-weight", light: "450" },
+  { name: "--oc-body-size", light: "13px" },
+  { name: "--oc-eyebrow-size", light: "11px" },
+  { name: "--oc-eyebrow-weight", light: "550" },
+  { name: "--oc-eyebrow-tracking", light: "0.08em" },
+  { section: "Surfaces (light mode defaults)", name: "--oc-bg", light: "#ffffff", dark: "#09090b" },
+  { name: "--oc-card", light: "#ffffff", dark: "#111113" },
+  {
+    name: "--oc-secondary",
+    light: "#f4f4f5",
+    dark: "#27272a",
+    comment: "zinc-100, raised surface"
+  },
+  {
+    section: `Text levels. Names invert across modes: in light mode "muted" sits at
+   * a lighter zinc step than "subtle" because both are picked relative to
+   * the active background, not from a fixed lightness ladder. The intent
+   * is "muted = first step away from primary text"; "subtle = next step
+   * down"; etc.
+   *
+   *   Light mode: text=zinc-950, secondary=zinc-700, muted=zinc-500,
+   *               subtle=zinc-400, faint=zinc-300
+   *   Dark mode (dark.css): inverts the surface tokens but keeps the same
+   *               muted -> subtle -> faint progression away from primary.`,
+    name: "--oc-text",
+    light: "#09090b",
+    dark: "#f7f8f8"
+  },
+  { name: "--oc-text-secondary", light: "#3f3f46", dark: "#d0d6e0" },
+  { name: "--oc-text-muted", light: "#71717a", dark: "#a1a1aa" },
+  { name: "--oc-text-faint", light: "#d4d4d8", dark: "#52525b" },
+  {
+    section: "Lines",
+    name: "--oc-gridline",
+    light: "rgba(0, 0, 0, 0.1)",
+    dark: "rgba(255, 255, 255, 0.05)"
+  },
+  {
+    name: "--oc-axis",
+    light: "rgba(0, 0, 0, 0.1)",
+    dark: "rgba(255, 255, 255, 0.1)"
+  },
+  {
+    name: "--oc-border",
+    light: "rgba(0, 0, 0, 0.08)",
+    dark: "rgba(255, 255, 255, 0.1)"
+  },
+  { name: "--oc-border-radius", light: "2px" },
+  {
+    section: "Brand and semantic",
+    name: "--oc-accent",
+    light: "#06b6d4",
+    dark: "#06b6d4"
+  },
+  {
+    name: "--oc-accent-strong",
+    light: "#0891b2",
+    dark: "#06b6d4",
+    comment: "darker cyan for line strokes on light bg",
+    consumers: "stamped via adaptForLightLineStroke"
+  },
+  { name: "--oc-positive", light: "#10b981", dark: "#34d399" },
+  { name: "--oc-negative", light: "#e11d48", dark: "#fb7185" },
+  { name: "--oc-focus", light: "#3b82f6", dark: "#60a5fa" },
+  {
+    name: "--oc-focus-ring",
+    light: "rgba(59, 130, 246, 0.1)",
+    comment: "static, intentionally NOT derived from --oc-focus and NOT flipped in dark mode"
+  },
+  {
+    name: "--oc-focus-ring-strong",
+    light: "rgba(59, 130, 246, 0.25)"
+  },
+  {
+    name: "--oc-editable-hover",
+    light: "rgba(79, 70, 229, 0.35)",
+    comment: "edit-mode hover outline, indigo one-off"
+  },
+  {
+    section: "Spacing scale (4px base) \u2014 only --oc-space-2/4 are consumed (JS-stamped)",
+    name: "--oc-space-2",
+    light: "8px",
+    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
+  },
+  {
+    name: "--oc-space-4",
+    light: "16px",
+    consumers: "stamped at mount from theme.spacing (theme-tokens.ts); component CSS must NOT consume these"
+  },
+  {
+    section: "Interactive states",
+    name: "--oc-hover-bg",
+    light: "rgba(0, 0, 0, 0.025)",
+    dark: "rgba(255, 255, 255, 0.05)"
+  },
+  {
+    name: "--oc-tooltip-bg",
+    light: "rgba(255, 255, 255, 0.88)",
+    dark: "rgba(17, 17, 19, 0.92)"
+  },
+  {
+    name: "--oc-tooltip-border",
+    light: "rgba(0, 0, 0, 0.08)",
+    dark: "rgba(255, 255, 255, 0.08)"
+  },
+  {
+    name: "--oc-tooltip-shadow",
+    light: "0 2px 8px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.12)",
+    dark: "0 2px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4)"
+  },
+  { name: "--oc-tooltip-text", light: "#09090b", dark: "#f7f8f8" },
+  { name: "--oc-legend-text", light: "#3f3f46", dark: "#d0d6e0" }
+];
+var TOKEN_MAP = new Map(CSS_TOKENS.map((t) => [t.name, t]));
+function cssTokenDefault(name, mode) {
+  const token = TOKEN_MAP.get(name);
+  if (!token) throw new Error(`Unknown CSS token: ${name}`);
+  if (mode === "dark" && token.dark !== void 0) return token.dark;
+  return token.light;
+}
 export {
   ACHROMATIC_RAMP,
   AXIS_TITLE_GAP,
@@ -3526,12 +4014,13 @@ export {
   BREAKPOINT_COMPACT_MAX,
   BREAKPOINT_MEDIUM_MAX,
   CATEGORICAL_PALETTE,
-  CHART_ENCODING_RULES,
-  CHART_TYPES,
   COMPACT_WIDTH,
+  CSS_TOKENS,
+  CSS_TOKEN_ROOT_SELECTORS,
   DEFAULT_THEME,
   DIVERGING_PALETTES,
   EXTENDED_OFFSET_STRATEGIES,
+  FOOTNOTE_LINE_HEIGHT,
   GRAPH_ENCODING_RULES,
   HEIGHT_CRAMPED_MAX,
   HEIGHT_SHORT_MAX,
@@ -3550,6 +4039,7 @@ export {
   NARROW_VIEWPORT_MAX,
   OFFSET_STRATEGIES,
   SEQUENTIAL_PALETTES,
+  SUPPORTED_SCHEME_NAMES,
   TICK_LABEL_OFFSET,
   TICK_LINE_HEIGHT_FACTOR,
   TOP_PAD_EXTRA_NARROW,
@@ -3565,15 +4055,20 @@ export {
   areaChart,
   axisTitleOffset,
   barChart,
+  buildCompactStepFormatter,
   buildD3Formatter,
   buildTemporalFormatter,
   checkPaletteDistinguishability,
   columnChart,
   computeChrome,
+  computeFieldFormatContext,
   computeLabelBounds,
   computeXAxisExtentFromLabels,
   contrastRatio,
+  cssTokenDefault,
   dataTable,
+  deepMergeSpec,
+  defaultNumberFormatter,
   detectCollision,
   donutChart,
   dotChart,
@@ -3582,8 +4077,12 @@ export {
   essay,
   estimateTextWidth,
   findAccessibleColor,
+  footnoteBandHeight,
+  formatCurrency,
   formatDate,
   formatNumber,
+  formatOrdinal,
+  formatPercent,
   generateAltText,
   generateAriaLabels,
   generateDataTable,
@@ -3594,6 +4093,7 @@ export {
   getRepresentativeColor,
   heuristicMeasure,
   inferFieldType,
+  isAxislessMark,
   isBarListSpec,
   isChartSpec,
   isConditionalDef,
@@ -3601,13 +4101,18 @@ export {
   isGradientDef,
   isGraphSpec,
   isLayerSpec,
+  isMapSpec,
+  isOpaqueColor,
   isRangeAnnotation,
   isRefLineAnnotation,
   isSankeySpec,
   isTableSpec,
   isTextAnnotation,
   isTileMapSpec,
+  isValueDef,
+  isYearContext,
   lineChart,
+  maxRotatedLabelWidth,
   meetsAA,
   overlapArea,
   pickLabelColor,
@@ -3616,11 +4121,14 @@ export {
   resolveMarkDef,
   resolveMarkType,
   resolveMeasurer,
+  resolveNumberFormatter,
+  resolveSchemeName,
   resolveTheme,
   scatterChart,
   simulateColorBlindness,
   textAscent,
   tileMap,
+  truncateRotatedLabel,
   wire,
   wrapText
 };