@opendata-ai/openchart-engine 7.9.0 → 7.9.2

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   computeLabelBounds,
   generateAltText,
   generateDataTable,
-  getBreakpoint,
+  getBreakpoint as getBreakpoint2,
   getHeightClass,
   getLayoutStrategy,
   resolveTheme as resolveTheme6
@@ -6324,19 +6324,19 @@ function copy(source, target) {
   return target.domain(source.domain()).range(source.range()).interpolate(source.interpolate()).clamp(source.clamp()).unknown(source.unknown());
 }
 function transformer() {
-  var domain = unit, range2 = unit, interpolate = value_default, transform, untransform, unknown, clamp = identity, piecewise, output, input;
+  var domain = unit, range2 = unit, interpolate = value_default, transform, untransform, unknown, clamp2 = identity, piecewise, output, input;
   function rescale() {
     var n = Math.min(domain.length, range2.length);
-    if (clamp !== identity) clamp = clamper(domain[0], domain[n - 1]);
+    if (clamp2 !== identity) clamp2 = clamper(domain[0], domain[n - 1]);
     piecewise = n > 2 ? polymap : bimap;
     output = input = null;
     return scale;
   }
   function scale(x2) {
-    return x2 == null || isNaN(x2 = +x2) ? unknown : (output || (output = piecewise(domain.map(transform), range2, interpolate)))(transform(clamp(x2)));
+    return x2 == null || isNaN(x2 = +x2) ? unknown : (output || (output = piecewise(domain.map(transform), range2, interpolate)))(transform(clamp2(x2)));
   }
   scale.invert = function(y2) {
-    return clamp(untransform((input || (input = piecewise(range2, domain.map(transform), number_default)))(y2)));
+    return clamp2(untransform((input || (input = piecewise(range2, domain.map(transform), number_default)))(y2)));
   };
   scale.domain = function(_) {
     return arguments.length ? (domain = Array.from(_, number2), rescale()) : domain.slice();
@@ -6348,7 +6348,7 @@ function transformer() {
     return range2 = Array.from(_), interpolate = round_default, rescale();
   };
   scale.clamp = function(_) {
-    return arguments.length ? (clamp = _ ? true : identity, rescale()) : clamp !== identity;
+    return arguments.length ? (clamp2 = _ ? true : identity, rescale()) : clamp2 !== identity;
   };
   scale.interpolate = function(_) {
     return arguments.length ? (interpolate = _, rescale()) : interpolate;
@@ -7680,15 +7680,15 @@ function utcTime() {
 
 // ../../node_modules/.bun/d3-scale@4.0.2/node_modules/d3-scale/src/sequential.js
 function transformer2() {
-  var x0 = 0, x1 = 1, t02, t12, k10, transform, interpolator = identity, clamp = false, unknown;
+  var x0 = 0, x1 = 1, t02, t12, k10, transform, interpolator = identity, clamp2 = false, unknown;
   function scale(x2) {
-    return x2 == null || isNaN(x2 = +x2) ? unknown : interpolator(k10 === 0 ? 0.5 : (x2 = (transform(x2) - t02) * k10, clamp ? Math.max(0, Math.min(1, x2)) : x2));
+    return x2 == null || isNaN(x2 = +x2) ? unknown : interpolator(k10 === 0 ? 0.5 : (x2 = (transform(x2) - t02) * k10, clamp2 ? Math.max(0, Math.min(1, x2)) : x2));
   }
   scale.domain = function(_) {
     return arguments.length ? ([x0, x1] = _, t02 = transform(x0 = +x0), t12 = transform(x1 = +x1), k10 = t02 === t12 ? 0 : 1 / (t12 - t02), scale) : [x0, x1];
   };
   scale.clamp = function(_) {
-    return arguments.length ? (clamp = !!_, scale) : clamp;
+    return arguments.length ? (clamp2 = !!_, scale) : clamp2;
   };
   scale.interpolator = function(_) {
     return arguments.length ? (interpolator = _, scale) : interpolator;
@@ -10059,9 +10059,9 @@ import {
   AXIS_TITLE_TRAILING_PAD as AXIS_TITLE_TRAILING_PAD2,
   abbreviateNumber as abbreviateNumber4,
   BREAKPOINT_COMPACT_MAX as BREAKPOINT_COMPACT_MAX2,
-  estimateTextWidth as estimateTextWidth13,
+  estimateTextWidth as estimateTextWidth15,
   formatNumber as formatNumber5,
-  getAxisTitleOffset,
+  getAxisTitleOffset as getAxisTitleOffset2,
   resolveTheme as resolveTheme2,
   TICK_LABEL_OFFSET
 } from "@opendata-ai/openchart-core";
@@ -10070,11 +10070,11 @@ import {
 import {
   AXIS_TITLE_TRAILING_PAD,
   abbreviateNumber as abbreviateNumber3,
-  axisTitleOffset,
+  axisTitleOffset as axisTitleOffset2,
   BREAKPOINT_COMPACT_MAX,
   computeChrome as computeChrome2,
-  computeXAxisExtentFromLabels,
-  estimateTextWidth as estimateTextWidth12,
+  computeXAxisExtentFromLabels as computeXAxisExtentFromLabels2,
+  estimateTextWidth as estimateTextWidth14,
   formatNumber as formatNumber4,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
@@ -10496,6 +10496,15 @@ function placeLegend(content, chartArea, containerWidth, _theme, xAxisHeight) {
   };
 }
 
+// src/layout/axes.ts
+import {
+  axisTitleOffset,
+  computeXAxisExtentFromLabels,
+  estimateTextWidth as estimateTextWidth13,
+  getAxisTitleOffset,
+  X_AXIS_TITLE_BAND_ROTATED
+} from "@opendata-ai/openchart-core";
+
 // src/layout/axes/rotation.ts
 var BAND_FIT_FRACTION = 0.85;
 var AUTO_ROTATE_ANGLE = -45;
@@ -10505,6 +10514,50 @@ function resolveBandTickAngle(explicitAngle, maxLabelWidth, bandwidth, labelCoun
   return maxLabelWidth > bandwidth * BAND_FIT_FRACTION ? AUTO_ROTATE_ANGLE : void 0;
 }
 
+// src/layout/axes/thinning.ts
+import { estimateTextWidth as estimateTextWidth12 } from "@opendata-ai/openchart-core";
+var MIN_TICK_GAP_FACTOR = 0.5;
+var MIN_TICK_COUNT = 2;
+function measureLabel(text, fontSize, fontWeight, measureText) {
+  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth12(text, fontSize, fontWeight);
+}
+function ticksOverlap(ticks2, fontSize, fontWeight, measureText, orientation = "horizontal") {
+  if (ticks2.length < 2) return false;
+  const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+  if (orientation === "vertical") {
+    const sorted = [...ticks2].sort((a, b) => a.position - b.position);
+    const labelHeight = fontSize * 1.2;
+    for (let i = 0; i < sorted.length - 1; i++) {
+      const aBottom = sorted[i].position + labelHeight / 2;
+      const bTop = sorted[i + 1].position - labelHeight / 2;
+      if (aBottom + minGap > bTop) return true;
+    }
+    return false;
+  }
+  for (let i = 0; i < ticks2.length - 1; i++) {
+    const aWidth = measureLabel(ticks2[i].label, fontSize, fontWeight, measureText);
+    const bWidth = measureLabel(ticks2[i + 1].label, fontSize, fontWeight, measureText);
+    const aRight = ticks2[i].position + aWidth / 2;
+    const bLeft = ticks2[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText, orientation = "horizontal") {
+  if (!ticksOverlap(ticks2, fontSize, fontWeight, measureText, orientation)) return ticks2;
+  let current = ticks2;
+  while (current.length > MIN_TICK_COUNT) {
+    const thinned = [current[0]];
+    for (let i = 2; i < current.length - 1; i += 2) {
+      thinned.push(current[i]);
+    }
+    if (current.length > 1) thinned.push(current[current.length - 1]);
+    current = thinned;
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText, orientation)) break;
+  }
+  return current;
+}
+
 // src/layout/axes/ticks.ts
 import {
   abbreviateNumber as abbreviateNumber2,
@@ -10694,198 +10747,543 @@ function resolveExplicitTicks(values, resolvedScale) {
   });
 }
 
-// src/layout/scales.ts
-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 applyCategoricalSort(values, sort) {
-  if (!sort) return values;
-  const sorted = [...values].sort((a, b) => a.localeCompare(b, void 0, { numeric: true }));
-  if (sort === "descending") sorted.reverse();
-  return sorted;
-}
-function applyContinuousConfig(scale, channel) {
-  if (channel.scale?.clamp) {
-    scale.clamp(true);
-  }
-  if (channel.scale?.reverse) {
-    const [r0, r1] = scale.range();
-    scale.range([r1, r0]);
-  }
+// src/layout/axes.ts
+var CATEGORICAL_SCALE_TYPES = /* @__PURE__ */ new Set(["band", "point", "ordinal"]);
+function yTickPositionIsInline(yChannel, markType, resolvedContinuous) {
+  if (!yChannel) return false;
+  const axisCfg = yChannel.axis ?? void 0;
+  const explicit = axisCfg?.tickPosition;
+  if (explicit) return explicit === "inline";
+  const isLineOrArea2 = markType === "line" || markType === "area";
+  if (!isLineOrArea2) return false;
+  if (axisCfg?.orient === "right") return false;
+  if (resolvedContinuous !== void 0) return resolvedContinuous;
+  const explicitScaleType = yChannel.scale?.type;
+  return explicitScaleType ? !CATEGORICAL_SCALE_TYPES.has(explicitScaleType) : yChannel.type === "quantitative" || yChannel.type === "temporal";
 }
-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 = time().domain(domain).range([rangeStart, rangeEnd]);
-  if (!channel.scale?.domain && channel.scale?.nice === true) {
-    scale.nice();
+var HEIGHT_MINIMAL_THRESHOLD = 80;
+var HEIGHT_REDUCED_THRESHOLD = 100;
+var WIDTH_MINIMAL_THRESHOLD = 150;
+var WIDTH_REDUCED_THRESHOLD = 300;
+var DENSITY_ORDER = ["full", "reduced", "minimal"];
+var GROUNDED_MARKS = /* @__PURE__ */ new Set(["bar", "tick", "lollipop"]);
+function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
+  let density = baseDensity;
+  if (axisLength < minimalThreshold) {
+    density = "minimal";
+  } else if (axisLength < reducedThreshold) {
+    const baseIdx = DENSITY_ORDER.indexOf(baseDensity);
+    const reducedIdx = DENSITY_ORDER.indexOf("reduced");
+    density = DENSITY_ORDER[Math.max(baseIdx, reducedIdx)];
   }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "time", channel };
+  return density;
 }
-function buildUtcScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseDates(fieldValues(data, channel.field));
-  const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
-  const scale = utcTime().domain(domain).range([rangeStart, rangeEnd]);
-  if (!channel.scale?.domain && channel.scale?.nice === true) {
-    scale.nice();
+var CONTINUOUS_TICK_FLOOR = 4;
+var OVERSHOOT_TOLERANCE = 1.5;
+var MIN_QUANTITATIVE_TICKS = 2;
+function ensureMinContinuousTicks(scale, ticks2, requestedCount) {
+  if (ticks2.length >= MIN_QUANTITATIVE_TICKS) return ticks2;
+  if (!scale || !scaleSupportsTickCount(scale)) return ticks2;
+  let best = ticks2;
+  for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
+    const candidate = buildContinuousTicks(scale, n);
+    if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
+    if (candidate.length > best.length) best = candidate;
   }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "utc", channel };
+  return best;
 }
-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 = min2(values) ?? 0;
-    domainMax = max2(values) ?? 1;
-    if (channel.scale?.zero !== false) {
-      domainMin = Math.min(0, domainMin);
-      domainMax = Math.max(0, domainMax);
-    }
-  }
-  const scale = linear2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (!channel.scale?.domain && channel.scale?.nice !== false) {
-    scale.nice();
-    if (channel.scale?.zero === false) {
-      const [nicedMin, nicedMax] = scale.domain();
-      if (nicedMin < domainMin || nicedMax > domainMax) {
-        scale.domain([domainMin, domainMax]);
-        scale.nice(20);
-      }
+function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWeight, axisLength, orientation, measureText) {
+  if (!scale || !scaleSupportsTickCount(scale)) return initialTicks;
+  const flooredTicks = ensureMinContinuousTicks(scale, initialTicks, initialCount);
+  const tolerance = initialCount * OVERSHOOT_TOLERANCE;
+  const overshoots = flooredTicks.length > tolerance;
+  const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
+  if (!overshoots && !overlaps) return flooredTicks;
+  const minThreshold = orientation === "vertical" ? HEIGHT_MINIMAL_THRESHOLD : WIDTH_MINIMAL_THRESHOLD;
+  const floor = axisLength >= minThreshold ? CONTINUOUS_TICK_FLOOR : 2;
+  let bestWithinFloor;
+  for (let n = initialCount - 1; n >= 2; n--) {
+    const candidate = buildContinuousTicks(scale, n);
+    const candidateOvershoots = candidate.length > tolerance;
+    const candidateOverlaps = ticksOverlap(
+      candidate,
+      fontSize,
+      fontWeight,
+      measureText,
+      orientation
+    );
+    if (!candidateOvershoots && !candidateOverlaps) {
+      return candidate;
     }
+    if (candidate.length >= floor) bestWithinFloor = candidate;
   }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "linear", channel };
-}
-function buildLogScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field)).filter((v) => v > 0);
-  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 1;
-  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 10;
-  const scale = log().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (channel.scale?.base !== void 0) {
-    scale.base(channel.scale.base);
-  }
-  if (!channel.scale?.domain && channel.scale?.nice !== false) {
-    scale.nice();
-  }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "log", channel };
+  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
+  return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
-function buildPowScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field));
-  let domainMin;
-  let domainMax;
-  if (channel.scale?.domain) {
-    [domainMin, domainMax] = channel.scale.domain;
-  } else {
-    domainMin = min2(values) ?? 0;
-    domainMax = max2(values) ?? 1;
-    if (channel.scale?.zero !== false) {
-      domainMin = Math.min(0, domainMin);
-      domainMax = Math.max(0, domainMax);
-    }
-  }
-  const scale = pow().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (channel.scale?.exponent !== void 0) {
-    scale.exponent(channel.scale.exponent);
+function labelSpanAtAngle(tick, angleDeg, fontSize, fontWeight, measureText) {
+  const angleRad = Math.abs(angleDeg) * Math.PI / 180;
+  const cosA = angleRad > 0 ? Math.abs(Math.cos(angleRad)) : 1;
+  const projected = measureLabel(tick.label, fontSize, fontWeight, measureText) * cosA;
+  if (angleDeg === 0) {
+    return { left: tick.position - projected / 2, right: tick.position + projected / 2 };
   }
-  if (!channel.scale?.domain && channel.scale?.nice !== false) {
-    scale.nice();
+  if (angleDeg < 0) {
+    return { left: tick.position - projected, right: tick.position };
   }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "pow", channel };
+  return { left: tick.position, right: tick.position + projected };
 }
-function buildSqrtScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field));
-  let domainMin;
-  let domainMax;
-  if (channel.scale?.domain) {
-    [domainMin, domainMax] = channel.scale.domain;
-  } else {
-    domainMin = min2(values) ?? 0;
-    domainMax = max2(values) ?? 1;
-    if (channel.scale?.zero !== false) {
-      domainMin = Math.min(0, domainMin);
-      domainMax = Math.max(0, domainMax);
+function thinBandTicksIfNeeded(ticks2, angleDeg, fontSize, fontWeight, measureText) {
+  if (ticks2.length < 3) return ticks2;
+  const minGap = fontSize * 0.5;
+  const spans = ticks2.map((t) => labelSpanAtAngle(t, angleDeg, fontSize, fontWeight, measureText));
+  const keep = new Array(ticks2.length).fill(false);
+  keep[0] = true;
+  let lastRight = spans[0].right;
+  for (let i = 1; i < ticks2.length; i++) {
+    if (spans[i].left >= lastRight + minGap) {
+      keep[i] = true;
+      lastRight = spans[i].right;
+    }
+  }
+  const lastIdx = ticks2.length - 1;
+  if (!keep[lastIdx]) {
+    keep[lastIdx] = true;
+    for (let i = lastIdx - 1; i > 0; i--) {
+      if (!keep[i]) continue;
+      if (spans[i].right > spans[lastIdx].left) {
+        keep[i] = false;
+        continue;
+      }
+      break;
     }
   }
-  const scale = sqrt2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (!channel.scale?.domain && channel.scale?.nice !== false) {
-    scale.nice();
-  }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "sqrt", channel };
+  return ticks2.filter((_, i) => keep[i]);
 }
-function buildSymlogScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field));
-  let domainMin;
-  let domainMax;
-  if (channel.scale?.domain) {
-    [domainMin, domainMax] = channel.scale.domain;
-  } else {
-    domainMin = min2(values) ?? 0;
-    domainMax = max2(values) ?? 1;
-    if (channel.scale?.zero !== false) {
-      domainMin = Math.min(0, domainMin);
-      domainMax = Math.max(0, domainMax);
+function computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
+  const result = {};
+  const baseDensity = strategy.axisLabelDensity;
+  const yDensity = effectiveDensity(
+    baseDensity,
+    chartArea.height,
+    HEIGHT_MINIMAL_THRESHOLD,
+    HEIGHT_REDUCED_THRESHOLD
+  );
+  const xDensity = effectiveDensity(
+    baseDensity,
+    chartArea.width,
+    WIDTH_MINIMAL_THRESHOLD,
+    WIDTH_REDUCED_THRESHOLD
+  );
+  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
+  };
+  const { fontSize } = tickLabelStyle;
+  const { fontWeight } = tickLabelStyle;
+  if (scales.x && !dataContext?.skipX && scales.x.channel.axis !== false) {
+    const axisConfig = scales.x.channel.axis;
+    const isContinuousX = scales.x.type !== "band" && scales.x.type !== "point" && scales.x.type !== "ordinal";
+    const xTargetCount = isContinuousX ? targetTickCount(chartArea.width, xDensity, "x") : void 0;
+    let allTicks;
+    if (axisConfig?.values) {
+      allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
+    } else if (!isContinuousX) {
+      allTicks = categoricalTicks(scales.x, xDensity, "horizontal");
+    } else {
+      allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
+    }
+    const gridlines = allTicks.map((t) => ({
+      position: t.position,
+      major: true
+    }));
+    let tickAngle = axisConfig?.labelAngle;
+    if (tickAngle === void 0 && scales.x.type === "band" && allTicks.length > 1) {
+      const bandwidth = scales.x.scale.bandwidth();
+      let maxLabelWidth = 0;
+      for (const t of allTicks) {
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      tickAngle = resolveBandTickAngle(void 0, maxLabelWidth, bandwidth, allTicks.length);
+    }
+    const hasExplicitValues = !!axisConfig?.values;
+    let ticks2;
+    if (hasExplicitValues) {
+      ticks2 = allTicks;
+    } else if (scales.x.type === "band") {
+      const effectiveAngle = tickAngle ?? 0;
+      ticks2 = thinBandTicksIfNeeded(allTicks, effectiveAngle, fontSize, fontWeight, measureText);
+    } else if (isContinuousX) {
+      ticks2 = fitContinuousTicks(
+        scales.x,
+        allTicks,
+        xTargetCount ?? allTicks.length,
+        fontSize,
+        fontWeight,
+        chartArea.width,
+        "horizontal",
+        measureText
+      );
+    } else {
+      ticks2 = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText);
     }
+    const axisTitle = axisConfig?.title;
+    const xLabelColor = axisConfig?.labelColor;
+    const xTickPosition = axisConfig?.tickPosition ?? "gutter";
+    const xDomainLine = axisConfig?.domain ?? (GROUNDED_MARKS.has(dataContext?.markType ?? "") ? void 0 : false);
+    result.x = {
+      ticks: ticks2,
+      gridlines: axisConfig?.grid ?? dataContext?.markType === "point" ? gridlines : [],
+      label: axisTitle,
+      labelStyle: xLabelColor ? { ...axisLabelStyle, fill: xLabelColor } : axisLabelStyle,
+      tickLabelStyle: xLabelColor ? { ...tickLabelStyle, fill: xLabelColor } : tickLabelStyle,
+      tickAngle,
+      start: { x: chartArea.x, y: chartArea.y + chartArea.height },
+      end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height },
+      orient: axisConfig?.orient,
+      domainLine: xDomainLine,
+      tickMarks: axisConfig?.ticks,
+      offset: axisConfig?.offset,
+      titlePadding: axisConfig?.titlePadding,
+      labelPadding: axisConfig?.labelPadding,
+      labelOverlap: axisConfig?.labelOverlap,
+      labelFlush: axisConfig?.labelFlush,
+      tickPosition: xTickPosition
+    };
   }
-  const scale = symlog().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
-  if (channel.scale?.constant !== void 0) {
-    scale.constant(channel.scale.constant);
+  if (scales.y && !dataContext?.skipY && scales.y.channel.axis !== false) {
+    const axisConfig = scales.y.channel.axis;
+    const isContinuousY = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
+    const yTargetCount = isContinuousY ? targetTickCount(chartArea.height, yDensity, "y") : void 0;
+    let allTicks;
+    if (axisConfig?.values) {
+      allTicks = resolveExplicitTicks(axisConfig.values, scales.y);
+    } else if (dataContext?.precomputedYTicks && dataContext.precomputedYTicks.length > 0 && isContinuousY) {
+      allTicks = resolveExplicitTicks(dataContext.precomputedYTicks, scales.y);
+    } else if (!isContinuousY) {
+      const yFieldName = dataContext?.encoding.y?.field;
+      const yLabelField = axisConfig?.labelField;
+      allTicks = categoricalTicks(
+        scales.y,
+        yDensity,
+        "vertical",
+        yFieldName && yLabelField && dataContext ? { data: dataContext.data, fieldName: yFieldName, labelField: yLabelField } : void 0
+      );
+    } else {
+      allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
+    }
+    const shouldThinY = scales.y.type !== "band" && !axisConfig?.values && !dataContext?.precomputedYTicks?.length;
+    let ticks2;
+    if (!shouldThinY) {
+      ticks2 = allTicks;
+    } else if (isContinuousY) {
+      ticks2 = fitContinuousTicks(
+        scales.y,
+        allTicks,
+        yTargetCount ?? allTicks.length,
+        fontSize,
+        fontWeight,
+        chartArea.height,
+        "vertical",
+        measureText
+      );
+    } else {
+      ticks2 = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText, "vertical");
+    }
+    const gridlines = ticks2.map((t) => ({
+      position: t.position,
+      major: true
+    }));
+    const axisTitle = axisConfig?.title;
+    const tickAngle = axisConfig?.labelAngle;
+    const yLabelColor = axisConfig?.labelColor;
+    const isContinuousYAxis = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
+    const yTickPosition = yTickPositionIsInline(
+      dataContext?.encoding.y,
+      dataContext?.markType ?? "",
+      isContinuousYAxis
+    ) ? "inline" : "gutter";
+    const yDomainLine = axisConfig?.domain ?? (yTickPosition === "inline" ? false : void 0);
+    const yTickMarks = axisConfig?.ticks ?? (yTickPosition === "inline" ? false : void 0);
+    result.y = {
+      ticks: ticks2,
+      // Y-axis gridlines are shown by default (standard editorial practice)
+      gridlines,
+      label: axisTitle,
+      labelStyle: yLabelColor ? { ...axisLabelStyle, fill: yLabelColor } : axisLabelStyle,
+      tickLabelStyle: yLabelColor ? { ...tickLabelStyle, fill: yLabelColor } : tickLabelStyle,
+      tickAngle,
+      start: { x: chartArea.x, y: chartArea.y },
+      end: { x: chartArea.x, y: chartArea.y + chartArea.height },
+      orient: axisConfig?.orient,
+      domainLine: yDomainLine,
+      tickMarks: yTickMarks,
+      offset: axisConfig?.offset,
+      titlePadding: axisConfig?.titlePadding,
+      labelPadding: axisConfig?.labelPadding,
+      labelOverlap: axisConfig?.labelOverlap,
+      labelFlush: axisConfig?.labelFlush,
+      tickPosition: yTickPosition
+    };
   }
-  if (!channel.scale?.domain && channel.scale?.nice !== false) {
-    scale.nice();
+  const totalWidth = dataContext?.totalWidth ?? chartArea.x + chartArea.width;
+  if (result.x) {
+    const isRotated = !!result.x.tickAngle && Math.abs(result.x.tickAngle) > 10;
+    result.x.extent = computeXAxisExtentFromLabels({
+      labels: result.x.ticks.map((t) => t.label),
+      tickAngle: result.x.tickAngle,
+      hasTitle: !!result.x.label,
+      tickFontSize: result.x.tickLabelStyle.fontSize,
+      tickFontWeight: result.x.tickLabelStyle.fontWeight,
+      xAxisHeight: theme.spacing.xAxisHeight,
+      measure: (t, fs, fw) => measureLabel(t, fs, fw, measureText)
+    });
+    if (result.x.label) {
+      const rotatedBand = isRotated ? result.x.extent - X_AXIS_TITLE_BAND_ROTATED + 14 : 35;
+      result.x.titlePosition = {
+        x: chartArea.x + chartArea.width / 2,
+        y: chartArea.y + chartArea.height + rotatedBand
+      };
+    }
   }
-  applyContinuousConfig(scale, channel);
-  return { scale, type: "symlog", channel };
+  if (result.y?.label && result.y.labelStyle) {
+    const isRight = result.y.orient === "right";
+    if (isRight) {
+      const titleOff = getAxisTitleOffset(totalWidth);
+      result.y.titlePosition = {
+        x: chartArea.x + chartArea.width + titleOff,
+        y: chartArea.y + chartArea.height / 2,
+        angle: 90
+      };
+    } else {
+      const maxTickLabelWidth = result.y.ticks.reduce((max4, t) => {
+        const w = estimateTextWidth13(
+          t.label,
+          result.y.tickLabelStyle.fontSize,
+          result.y.tickLabelStyle.fontWeight ?? 400
+        );
+        return Math.max(max4, w);
+      }, 0);
+      const titleOff = axisTitleOffset(
+        maxTickLabelWidth,
+        result.y.labelStyle.fontSize,
+        totalWidth,
+        result.y.tickPosition === "inline"
+      );
+      result.y.titlePosition = {
+        x: chartArea.x - titleOff,
+        y: chartArea.y + chartArea.height / 2,
+        angle: -90
+      };
+    }
+  }
+  return result;
 }
-function buildQuantileScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field));
-  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
-  const scale = quantile2().domain(values).range(range2);
-  return { scale, type: "quantile", channel };
+
+// src/layout/scales.ts
+function fieldValues(data, field) {
+  return data.map((d) => d[field]).filter((v) => v != null);
 }
-function buildQuantizeScale(channel, data, rangeStart, rangeEnd) {
-  const values = parseNumbers(fieldValues(data, channel.field));
-  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 0;
-  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 1;
-  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
-  const scale = quantize().domain([domainMin, domainMax]).range(range2);
-  return { scale, type: "quantize", channel };
+function parseDates(values) {
+  return values.map((v) => v instanceof Date ? v : new Date(String(v))).filter((d) => !Number.isNaN(d.getTime()));
 }
-function buildThresholdScale(channel, _data, rangeStart, rangeEnd) {
-  const domainBreaks = channel.scale?.domain ? channel.scale.domain : [0.5];
-  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, domainBreaks.length + 1);
-  const scale = threshold().domain(domainBreaks).range(range2);
-  return { scale, type: "threshold", channel };
+function parseNumbers(values) {
+  return values.map((v) => typeof v === "number" ? v : Number(v)).filter((n) => Number.isFinite(n));
 }
-function evenRange(start, end, count) {
-  if (count <= 1) return [start];
+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 applyCategoricalSort(values, sort) {
+  if (!sort) return values;
+  const sorted = [...values].sort((a, b) => a.localeCompare(b, void 0, { numeric: true }));
+  if (sort === "descending") sorted.reverse();
+  return sorted;
+}
+function applyContinuousConfig(scale, channel) {
+  if (channel.scale?.clamp) {
+    scale.clamp(true);
+  }
+  if (channel.scale?.reverse) {
+    const [r0, r1] = scale.range();
+    scale.range([r1, r0]);
+  }
+}
+function buildTimeScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseDates(fieldValues(data, channel.field));
+  const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
+  const scale = time().domain(domain).range([rangeStart, rangeEnd]);
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "time", channel };
+}
+function buildUtcScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseDates(fieldValues(data, channel.field));
+  const domain = channel.scale?.domain ? [new Date(channel.scale.domain[0]), new Date(channel.scale.domain[1])] : extent(values);
+  const scale = utcTime().domain(domain).range([rangeStart, rangeEnd]);
+  if (!channel.scale?.domain && channel.scale?.nice === true) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "utc", channel };
+}
+function buildLinearScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    const [d0, d1] = channel.scale.domain;
+    domainMin = d0;
+    domainMax = d1;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = linear2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
+    scale.nice();
+    if (channel.scale?.zero === false) {
+      const [nicedMin, nicedMax] = scale.domain();
+      if (nicedMin < domainMin || nicedMax > domainMax) {
+        scale.domain([domainMin, domainMax]);
+        scale.nice(20);
+      }
+    }
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "linear", channel };
+}
+function buildLogScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field)).filter((v) => v > 0);
+  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 1;
+  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 10;
+  const scale = log().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.base !== void 0) {
+    scale.base(channel.scale.base);
+  }
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "log", channel };
+}
+function buildPowScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = pow().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.exponent !== void 0) {
+    scale.exponent(channel.scale.exponent);
+  }
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "pow", channel };
+}
+function buildSqrtScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = sqrt2().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "sqrt", channel };
+}
+function buildSymlogScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  let domainMin;
+  let domainMax;
+  if (channel.scale?.domain) {
+    [domainMin, domainMax] = channel.scale.domain;
+  } else {
+    domainMin = min2(values) ?? 0;
+    domainMax = max2(values) ?? 1;
+    if (channel.scale?.zero !== false) {
+      domainMin = Math.min(0, domainMin);
+      domainMax = Math.max(0, domainMax);
+    }
+  }
+  const scale = symlog().domain([domainMin, domainMax]).range([rangeStart, rangeEnd]);
+  if (channel.scale?.constant !== void 0) {
+    scale.constant(channel.scale.constant);
+  }
+  if (!channel.scale?.domain && channel.scale?.nice !== false) {
+    scale.nice();
+  }
+  applyContinuousConfig(scale, channel);
+  return { scale, type: "symlog", channel };
+}
+function buildQuantileScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
+  const scale = quantile2().domain(values).range(range2);
+  return { scale, type: "quantile", channel };
+}
+function buildQuantizeScale(channel, data, rangeStart, rangeEnd) {
+  const values = parseNumbers(fieldValues(data, channel.field));
+  const domainMin = channel.scale?.domain ? channel.scale.domain[0] : min2(values) ?? 0;
+  const domainMax = channel.scale?.domain ? channel.scale.domain[1] : max2(values) ?? 1;
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, 4);
+  const scale = quantize().domain([domainMin, domainMax]).range(range2);
+  return { scale, type: "quantize", channel };
+}
+function buildThresholdScale(channel, _data, rangeStart, rangeEnd) {
+  const domainBreaks = channel.scale?.domain ? channel.scale.domain : [0.5];
+  const range2 = channel.scale?.range ? channel.scale.range : evenRange(rangeStart, rangeEnd, domainBreaks.length + 1);
+  const scale = threshold().domain(domainBreaks).range(range2);
+  return { scale, type: "threshold", channel };
+}
+function evenRange(start, end, count) {
+  if (count <= 1) return [start];
   const step = (end - start) / (count - 1);
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
@@ -11191,7 +11589,7 @@ function createMeasureFn(measureText) {
   if (measureText) {
     return (text, fontSize, fontWeight) => measureText(text, fontSize, fontWeight).width;
   }
-  return estimateTextWidth12;
+  return estimateTextWidth14;
 }
 function sampleLabelFromMagnitude(maxAbsVal) {
   return maxAbsVal >= 1e3 ? abbreviateNumber3(maxAbsVal) : formatNumber4(maxAbsVal);
@@ -11240,11 +11638,8 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
     };
   }
   const yAxisCfg = encoding.y?.axis ?? void 0;
-  const yTickPositionExplicit = yAxisCfg?.tickPosition;
   const yIsContinuous = encoding.y?.type === "quantitative" || encoding.y?.type === "temporal";
-  const yIsLineOrArea = renderSpec.markType === "line" || renderSpec.markType === "area";
-  const yAxisOrient = yAxisCfg?.orient;
-  const yIsInline = yTickPositionExplicit === "inline" || yTickPositionExplicit === void 0 && yIsLineOrArea && yIsContinuous && yAxisOrient !== "right";
+  const yIsInline = yTickPositionIsInline(encoding.y, renderSpec.markType);
   const yAxisSuppressed = encoding.y?.axis === false;
   let leftGutter = hPad + axisMargin;
   if (encoding.y && !isRadial && !yAxisSuppressed && !yIsInline) {
@@ -11371,7 +11766,7 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
         xLabels.length
       );
     }
-    const xAxisExtent = isRadial || xAxisSuppressed ? 0 : computeXAxisExtentFromLabels({
+    const xAxisExtent = isRadial || xAxisSuppressed ? 0 : computeXAxisExtentFromLabels2({
       labels: xLabels,
       tickAngle: effectiveXTickAngle,
       hasTitle: hasXAxisTitle,
@@ -11495,1270 +11890,904 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
       const yAxisDef = encoding.y?.axis;
       if (yAxisDef && (yAxisDef.title || yAxisDef.label) && !isRadial) {
         let estTickLabelWidth = 0;
-        if (encoding.y?.field && yIsContinuous) {
+        if (encoding.y?.field && yIsContinuous && !yIsInline) {
           if (yTickValues.length > 0) {
             const titleProvArea = {
               x: finalGutter,
               y: topMargin,
               width: Math.max(0, width - finalGutter - hPad),
               height: chartHeight
-            };
-            const scales = computeScales(renderSpec, titleProvArea, renderSpec.data);
-            if (scales.y && scaleSupportsTickCount(scales.y)) {
-              const ticks2 = buildContinuousTicks(scales.y, yTickCount || 5);
-              for (const t of ticks2) {
-                const w = measure(t.label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
-                if (w > estTickLabelWidth) estTickLabelWidth = w;
-              }
-            }
-          }
-        }
-        const titleFontSize = theme.fonts.sizes.body;
-        const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
-        const halfGlyph = Math.ceil(titleFontSize / 2);
-        const rotatedLabelMargin = offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
-        gutterWithTitle = Math.max(finalGutter, hPad + rotatedLabelMargin);
-      }
-      finalPlan = {
-        leftGutter: gutterWithTitle,
-        xAxisExtent,
-        legendContent,
-        chrome,
-        yTickValues,
-        yTickCount,
-        converged: prev === null || converged,
-        inlineYLabelInset,
-        endpointLabelsDemoted
-      };
-      break;
-    }
-    prev = { gutter: newGutter, rowCount: legendContent.rowCount, xAxisExtent };
-    leftGutter = newGutter;
-  }
-  if (!finalPlan) throw new Error("resolveLayoutPlan: loop exited without producing a plan");
-  return finalPlan;
-}
-
-// src/compile/layer.ts
-function compileLayer(spec, options, compileChart2) {
-  const leaves = flattenLayers(spec);
-  if (leaves.length === 0) {
-    throw new Error("LayerSpec has no leaf chart specs after flattening");
-  }
-  if (leaves.length === 1) {
-    const singleSpec = buildPrimarySpec(leaves, spec);
-    return compileChart2(singleSpec, options);
-  }
-  if (spec.resolve?.scale?.y === "independent") {
-    return compileLayerIndependent(leaves, spec, options, compileChart2);
-  }
-  const primarySpec = buildPrimarySpec(leaves, spec);
-  const primaryLayout = compileChart2(primarySpec, options);
-  const allMarks = [];
-  const seenLabels = /* @__PURE__ */ new Set();
-  const pLegend = primaryLayout.legend;
-  const mergedLegendEntries = "entries" in pLegend ? [...pLegend.entries] : [];
-  for (const entry of mergedLegendEntries) {
-    seenLabels.add(entry.label);
-  }
-  const indexedLeaves = leaves.map((leaf, i) => ({
-    leaf,
-    zIndex: leaf.zIndex ?? i
-  }));
-  indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
-  const leafOptions = { ...options, frozenChartArea: primaryLayout.area };
-  for (const { leaf } of indexedLeaves) {
-    const themedLeaf = {
-      ...leaf,
-      theme: leaf.theme ?? spec.theme,
-      darkMode: leaf.darkMode ?? spec.darkMode
-    };
-    const leafLayout = compileChart2(themedLeaf, leafOptions);
-    allMarks.push(...leafLayout.marks);
-    const leafLeg = leafLayout.legend;
-    if ("entries" in leafLeg) {
-      for (const entry of leafLeg.entries) {
-        if (!seenLabels.has(entry.label)) {
-          seenLabels.add(entry.label);
-          mergedLegendEntries.push(entry);
-        }
-      }
-    }
-  }
-  return {
-    ...primaryLayout,
-    marks: allMarks,
-    legend: {
-      ...primaryLayout.legend,
-      ..."entries" in pLegend ? { entries: mergedLegendEntries } : {}
-    }
-  };
-}
-function estimateYAxisLabelWidth(data, encoding, baseFontSize, measure) {
-  if (!encoding?.y) return 40;
-  const yEnc = encoding.y;
-  const yField = yEnc.field;
-  if (!yField) return 40;
-  const m = measure ?? estimateTextWidth13;
-  const yType = yEnc.type;
-  if (yType === "nominal" || yType === "ordinal") {
-    let maxWidth = 0;
-    for (const row of data) {
-      const label = String(row[yField] ?? "");
-      const w = m(label, baseFontSize, 400);
-      if (w > maxWidth) maxWidth = w;
-    }
-    return maxWidth > 0 ? maxWidth + 10 : 40;
-  }
-  const yAxisFormat = encoding.y.axis?.format;
-  let maxAbsVal = 0;
-  for (const row of data) {
-    const v = Number(row[yField]);
-    if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
-  }
-  let sampleLabel;
-  if (yAxisFormat) {
-    try {
-      const fmt = format(yAxisFormat);
-      sampleLabel = fmt(maxAbsVal);
-    } catch {
-      sampleLabel = String(maxAbsVal);
-    }
-  } else {
-    sampleLabel = Math.abs(maxAbsVal) >= 1e3 ? abbreviateNumber4(maxAbsVal) : formatNumber5(maxAbsVal);
-  }
-  const hasNeg = data.some((r) => Number(r[yField]) < 0);
-  const labelEst = (hasNeg ? "-" : "") + sampleLabel;
-  return m(labelEst, baseFontSize, 400) + 10;
-}
-function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
-  if (leaves.length > 2) {
-    throw new Error(
-      `Independent y-scales support at most 2 layers (left and right y-axis). Got ${leaves.length} layers.`
-    );
-  }
-  const leaf0 = leaves[0];
-  const leaf1 = leaves[1];
-  const xType0 = leaf0.encoding?.x?.type;
-  const xType1 = leaf1.encoding?.x?.type;
-  if (xType0 && xType1 && xType0 !== xType1) {
-    throw new Error(
-      `Dual-axis charts require matching x-field types across layers. Layer 0 has '${xType0}', layer 1 has '${xType1}'.`
-    );
-  }
-  const theme = resolveTheme2(layerSpec.theme ?? leaf1.theme);
-  const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
-  const measureFn = createMeasureFn(options.measureText);
-  const rightAxisWidth = estimateYAxisLabelWidth(
-    leaf1.data,
-    leaf1.encoding,
-    axisFontSize,
-    measureFn
-  );
-  const yAxisConfig = leaf1.encoding?.y?.axis || void 0;
-  const hasRightAxisTitle = !!yAxisConfig?.title;
-  const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
-  const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
-  const axisTitleOffset4 = getAxisTitleOffset(options.width);
-  const halfGlyph = Math.ceil(bodyFontSize / 2);
-  const titleExtent = hasRightAxisTitle ? axisTitleOffset4 + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2) : 0;
-  const rightReserve = Math.max(tickExtent, titleExtent);
-  const optionsWithReserve = {
-    ...options,
-    rightAxisReserve: rightReserve
-  };
-  const xField0 = leaf0.encoding?.x?.field;
-  const xField1 = leaf1.encoding?.x?.field;
-  const unionXValues = /* @__PURE__ */ new Set();
-  if (xField0) for (const row of leaf0.data) unionXValues.add(row[xField0]);
-  if (xField1) for (const row of leaf1.data) unionXValues.add(row[xField1]);
-  let leaf0WithUnionX = ensureXDomainCoverage(leaf0, xField0, unionXValues);
-  let leaf1WithUnionX = ensureXDomainCoverage(leaf1, xField1, unionXValues);
-  const aligned = alignYDomains(leaf0WithUnionX, leaf1WithUnionX);
-  if (aligned) {
-    leaf0WithUnionX = withYDomain(leaf0WithUnionX, aligned.domain0);
-    leaf1WithUnionX = withYDomain(leaf1WithUnionX, aligned.domain1);
-  }
-  const primary0 = buildPrimarySpec([leaf0WithUnionX], layerSpec);
-  const layout0 = compileChart2(primary0, optionsWithReserve);
-  const primary1 = buildPrimarySpec([leaf1WithUnionX], layerSpec);
-  primary1.annotations = [];
-  const layout1 = compileChart2(primary1, optionsWithReserve);
-  const y2Axis = layout1.axes.y ? {
-    ...layout1.axes.y,
-    orient: "right",
-    gridlines: [],
-    start: {
-      x: layout0.area.x + layout0.area.width,
-      y: layout0.area.y
-    },
-    end: {
-      x: layout0.area.x + layout0.area.width,
-      y: layout0.area.y + layout0.area.height
-    },
-    ...layout1.axes.y.label ? {
-      titlePosition: {
-        x: layout0.area.x + layout0.area.width + getAxisTitleOffset(layout0.dimensions.width),
-        y: layout0.area.y + layout0.area.height / 2,
-        angle: 90
-      }
-    } : {}
-  } : void 0;
-  const layer0HasBars = layout0.marks.some((m) => m.type === "rect");
-  const layer1HasBars = layout1.marks.some((m) => m.type === "rect");
-  const bandCenterByCategory = /* @__PURE__ */ new Map();
-  if (layer0HasBars && layout0.axes.x?.ticks) {
-    for (const tick of layout0.axes.x.ticks) {
-      bandCenterByCategory.set(String(tick.label), tick.position);
-    }
-  } else if (layer1HasBars && layout1.axes.x?.ticks) {
-    for (const tick of layout1.axes.x.ticks) {
-      bandCenterByCategory.set(String(tick.label), tick.position);
-    }
-  }
-  const remapMarkX = (xField, mark) => {
-    if (!xField || bandCenterByCategory.size === 0) return mark;
-    if (mark.type === "line") {
-      const newPoints = mark.points.map((p, i) => {
-        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
-        return bx !== void 0 ? { ...p, x: bx } : p;
-      });
-      const newDataPoints = mark.dataPoints?.map((dp, i) => {
-        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
-        return bx !== void 0 ? { ...dp, x: bx } : dp;
-      });
-      const newPath = line_default().x((p) => p.x).y((p) => p.y).curve(monotoneX)(newPoints) ?? void 0;
-      return { ...mark, points: newPoints, dataPoints: newDataPoints, path: newPath };
-    }
-    if (mark.type === "area") {
-      const newTopPoints = mark.topPoints.map((p, i) => {
-        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
-        return bx !== void 0 ? { ...p, x: bx } : p;
-      });
-      const newBottomPoints = mark.bottomPoints.map((p, i) => {
-        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
-        return bx !== void 0 ? { ...p, x: bx } : p;
-      });
-      const newDataPoints = mark.dataPoints?.map((dp, i) => {
-        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
-        return bx !== void 0 ? { ...dp, x: bx } : dp;
-      });
-      const areaGen = area_default().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(monotoneX);
-      const topLineGen = line_default().x((p) => p.x).y((p) => p.yTop).curve(monotoneX);
-      const combined = newTopPoints.map((tp, i) => ({
-        x: tp.x,
-        yTop: tp.y,
-        yBottom: newBottomPoints[i]?.y ?? tp.y
-      }));
-      const newPath = areaGen(combined) ?? "";
-      const newTopPath = topLineGen(combined) ?? "";
-      return {
-        ...mark,
-        topPoints: newTopPoints,
-        bottomPoints: newBottomPoints,
-        dataPoints: newDataPoints,
-        path: newPath,
-        topPath: newTopPath
-      };
-    }
-    if (mark.type === "point") {
-      const bx = bandCenterByCategory.get(String(mark.data[xField] ?? ""));
-      return bx !== void 0 ? { ...mark, cx: bx } : mark;
-    }
-    return mark;
-  };
-  const adjustedMarks0 = bandCenterByCategory.size > 0 && !layer0HasBars ? layout0.marks.map((m) => remapMarkX(xField0, m)) : layout0.marks;
-  const taggedMarks1 = layout1.marks.map((mark) => {
-    const tagged = { ...mark, yScale: "y2" };
-    if (bandCenterByCategory.size > 0 && !layer1HasBars) {
-      return remapMarkX(xField1, tagged);
-    }
-    return tagged;
-  });
-  const seenLabels = /* @__PURE__ */ new Set();
-  const l0Legend = layout0.legend;
-  const l1Legend = layout1.legend;
-  const mergedLegendEntries = "entries" in l0Legend ? [...l0Legend.entries] : [];
-  for (const entry of mergedLegendEntries) seenLabels.add(entry.label);
-  const l1Entries = "entries" in l1Legend ? l1Legend.entries : [];
-  for (const entry of l1Entries) {
-    if (!seenLabels.has(entry.label)) {
-      seenLabels.add(entry.label);
-      mergedLegendEntries.push(entry);
-    }
-  }
-  const l0Count = layout0.marks.length;
-  const mergedTooltips = new Map(layout0.tooltipDescriptors);
-  for (const [key, value2] of layout1.tooltipDescriptors) {
-    const match = /^(rect|point|arc)-(\d+)$/.exec(key);
-    if (match) {
-      const offsetKey = `${match[1]}-${Number(match[2]) + l0Count}`;
-      mergedTooltips.set(offsetKey, value2);
-    } else {
-      mergedTooltips.set(key, value2);
-    }
-  }
-  const z0 = leaf0.zIndex ?? 0;
-  const z1 = leaf1.zIndex ?? 1;
-  const marks = z0 <= z1 ? [...adjustedMarks0, ...taggedMarks1] : [...taggedMarks1, ...adjustedMarks0];
-  return {
-    ...layout0,
-    axes: {
-      x: layout0.axes.x,
-      y: layout0.axes.y,
-      y2: y2Axis
-    },
-    marks,
-    legend: {
-      ...layout0.legend,
-      ..."entries" in l0Legend ? { entries: mergedLegendEntries } : {}
-    },
-    tooltipDescriptors: mergedTooltips
-  };
-}
-function ensureXDomainCoverage(leaf, xField, allXValues) {
-  if (!xField || allXValues.size === 0) return leaf;
-  const existingXValues = /* @__PURE__ */ new Set();
-  for (const row of leaf.data) existingXValues.add(row[xField]);
-  const missingRows = [];
-  for (const xVal of allXValues) {
-    if (!existingXValues.has(xVal)) {
-      missingRows.push({ [xField]: xVal });
-    }
-  }
-  if (missingRows.length === 0) return leaf;
-  return {
-    ...leaf,
-    data: [...leaf.data, ...missingRows]
-  };
-}
-function alignYDomains(leaf0, leaf1) {
-  const yEnc0 = leaf0.encoding?.y;
-  const yEnc1 = leaf1.encoding?.y;
-  if (!yEnc0 || !yEnc1) return void 0;
-  if (yEnc0.type !== "quantitative" || yEnc1.type !== "quantitative") return void 0;
-  if (yEnc0.scale?.domain || yEnc1.scale?.domain) return void 0;
-  const includeZero0 = yEnc0.scale?.zero !== false;
-  const includeZero1 = yEnc1.scale?.zero !== false;
-  const vals0 = leaf0.data.map((r) => Number(r[yEnc0.field])).filter(Number.isFinite);
-  const vals1 = leaf1.data.map((r) => Number(r[yEnc1.field])).filter(Number.isFinite);
-  if (vals0.length === 0 || vals1.length === 0) return void 0;
-  const niced = (vals, includeZero) => {
-    let lo = Math.min(...vals);
-    let hi = Math.max(...vals);
-    if (includeZero) {
-      lo = Math.min(0, lo);
-      hi = Math.max(0, hi);
-    }
-    const s = linear2().domain([lo, hi]);
-    s.nice();
-    const [dLo, dHi] = s.domain();
-    return [dLo, dHi];
-  };
-  const [min0, max0] = niced(vals0, includeZero0);
-  const [min1, max1] = niced(vals1, includeZero1);
-  const span0 = max0 - min0;
-  const span1 = max1 - min1;
-  if (span0 === 0 || span1 === 0) return void 0;
-  const zf0 = (0 - min0) / span0;
-  const zf1 = (0 - min1) / span1;
-  const zeroInDomain0 = zf0 >= -1e-3 && zf0 <= 1.001;
-  const zeroInDomain1 = zf1 >= -1e-3 && zf1 <= 1.001;
-  if (!zeroInDomain0 || !zeroInDomain1) return void 0;
-  if (Math.abs(zf0 - zf1) < 1e-3) {
-    return { domain0: [min0, max0], domain1: [min1, max1] };
-  }
-  const targetZf = Math.max(zf0, zf1);
-  const align = (dMin, dMax, currentZf) => {
-    if (Math.abs(currentZf - targetZf) < 1e-3) return [dMin, dMax];
-    if (targetZf > currentZf) {
-      const newMin = -(targetZf / (1 - targetZf)) * dMax;
-      return [newMin, dMax];
-    }
-    const newMax = -dMin * (1 - targetZf) / targetZf;
-    return [dMin, newMax];
-  };
-  const domain0 = align(min0, max0, zf0);
-  const domain1 = align(min1, max1, zf1);
-  return { domain0, domain1 };
-}
-function withYDomain(leaf, domain) {
-  if (!leaf.encoding?.y) return leaf;
-  return {
-    ...leaf,
-    encoding: {
-      ...leaf.encoding,
-      y: {
-        ...leaf.encoding.y,
-        scale: {
-          ...leaf.encoding.y.scale,
-          domain
-        }
-      }
-    }
-  };
-}
-function buildPrimarySpec(leaves, layerSpec) {
-  const allData = leaves.flatMap((leaf) => leaf.data);
-  const primary = {
-    ...leaves[0],
-    data: allData,
-    chrome: layerSpec.chrome ?? leaves[0].chrome,
-    annotations: layerSpec.annotations ?? leaves[0].annotations,
-    labels: layerSpec.labels ?? leaves[0].labels,
-    legend: layerSpec.legend ?? leaves[0].legend,
-    responsive: layerSpec.responsive ?? leaves[0].responsive,
-    theme: layerSpec.theme ?? leaves[0].theme,
-    darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
-    watermark: layerSpec.watermark ?? leaves[0].watermark,
-    hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries,
-    endpointLabels: layerSpec.endpointLabels ?? leaves[0].endpointLabels
-  };
-  return primary;
-}
-
-// src/compile/watermark-obstacle.ts
-import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2 } from "@opendata-ai/openchart-core";
-var WATERMARK_HEIGHT = 30;
-var X_AXIS_EXTENT_WITH_LABEL = 48;
-var X_AXIS_EXTENT_TICKS_ONLY = 26;
-function computeWatermarkObstacle(dims, watermark, axes, theme) {
-  if (!watermark) return null;
-  const chartArea = dims.chartArea;
-  const brandPadding = theme.spacing.padding;
-  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
-  const xAxisExtent = axes.x?.label ? X_AXIS_EXTENT_WITH_LABEL : axes.x ? X_AXIS_EXTENT_TICKS_ONLY : 0;
-  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
-  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
-  return { x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: WATERMARK_HEIGHT };
-}
-
-// src/compiler/sparkline-defaults.ts
-var TREND_DEADBAND = 5e-4;
-function computeTrend(values) {
-  const finite = [];
-  for (const v of values) {
-    if (Number.isFinite(v)) finite.push(v);
-  }
-  if (finite.length < 2) return "neutral";
-  const n = finite.length;
-  let sumX = 0;
-  let sumY = 0;
-  for (let i = 0; i < n; i++) {
-    sumX += i;
-    sumY += finite[i];
-  }
-  const meanX = sumX / n;
-  const meanY = sumY / n;
-  let num = 0;
-  let den = 0;
-  for (let i = 0; i < n; i++) {
-    const dx = i - meanX;
-    num += dx * (finite[i] - meanY);
-    den += dx * dx;
-  }
-  if (den === 0) return "neutral";
-  const slope = num / den;
-  const scale = Math.abs(meanY) || 1;
-  const relSlope = slope / scale;
-  if (Math.abs(relSlope) < TREND_DEADBAND) return "neutral";
-  return relSlope > 0 ? "up" : "down";
-}
-function trendColor(trend, theme) {
-  if (trend === "up") return theme.colors.positive;
-  if (trend === "down") return theme.colors.negative;
-  return theme.colors.categorical[0];
-}
-function computeTrendFromData(data, yField) {
-  if (!yField) return "neutral";
-  const values = [];
-  for (const row of data) {
-    const v = Number(row[yField]);
-    if (Number.isFinite(v)) values.push(v);
+            };
+            const scales = computeScales(renderSpec, titleProvArea, renderSpec.data);
+            if (scales.y && scaleSupportsTickCount(scales.y)) {
+              const ticks2 = buildContinuousTicks(scales.y, yTickCount || 5);
+              for (const t of ticks2) {
+                const w = measure(t.label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+                if (w > estTickLabelWidth) estTickLabelWidth = w;
+              }
+            }
+          }
+        }
+        const titleFontSize = theme.fonts.sizes.body;
+        const offset = axisTitleOffset2(estTickLabelWidth, titleFontSize, width, yIsInline);
+        const halfGlyph = Math.ceil(titleFontSize / 2);
+        const rotatedLabelMargin = offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
+        gutterWithTitle = Math.max(finalGutter, hPad + rotatedLabelMargin);
+      }
+      finalPlan = {
+        leftGutter: gutterWithTitle,
+        xAxisExtent,
+        legendContent,
+        chrome,
+        yTickValues,
+        yTickCount,
+        converged: prev === null || converged,
+        inlineYLabelInset,
+        endpointLabelsDemoted
+      };
+      break;
+    }
+    prev = { gutter: newGutter, rowCount: legendContent.rowCount, xAxisExtent };
+    leftGutter = newGutter;
   }
-  return computeTrend(values);
-}
-function hasExplicitColor(markDef, encodingHasColor) {
-  if (encodingHasColor) return { fill: true, stroke: true };
-  return {
-    fill: markDef?.fill !== void 0,
-    stroke: markDef?.stroke !== void 0
-  };
-}
-function buildSparklineAreaGradient(baseColor) {
-  return {
-    gradient: "linear",
-    x1: 0,
-    y1: 0,
-    x2: 0,
-    y2: 1,
-    stops: [
-      { offset: 0, color: baseColor, opacity: 0.35 },
-      { offset: 1, color: baseColor, opacity: 0 }
-    ]
-  };
+  if (!finalPlan) throw new Error("resolveLayoutPlan: loop exited without producing a plan");
+  return finalPlan;
 }
 
-// src/graphs/compile-graph.ts
-import { adaptTheme as adaptTheme2, computeChrome as computeChrome3, resolveTheme as resolveTheme3 } from "@opendata-ai/openchart-core";
-
-// src/graphs/encoding.ts
-var DEFAULT_NODE_RADIUS = 5;
-var MIN_NODE_RADIUS = 3;
-var MAX_NODE_RADIUS = 12;
-var DEFAULT_EDGE_WIDTH = 1;
-var MIN_EDGE_WIDTH = 0.5;
-var MAX_EDGE_WIDTH = 4;
-var DEFAULT_STROKE_WIDTH2 = 1;
-function darkenColor(hex2, amount = 0.2) {
-  const clean = hex2.replace(/^#/, "");
-  if (clean.length !== 6 && clean.length !== 3) return hex2;
-  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(hex2, opacity) {
-  const clean = hex2.replace(/^#/, "");
-  if (clean.length !== 6 && clean.length !== 3) {
-    return hex2;
-  }
-  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);
+// src/compile/layer.ts
+function compileLayer(spec, options, compileChart2) {
+  const leaves = flattenLayers(spec);
+  if (leaves.length === 0) {
+    throw new Error("LayerSpec has no leaf chart specs after flattening");
   }
-  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);
+  if (leaves.length === 1) {
+    const singleSpec = buildPrimarySpec(leaves, spec);
+    return compileChart2(singleSpec, options);
   }
-  return degrees;
-}
-function resolveNodeVisuals(nodes, encoding, edges, theme, nodeOverrides) {
-  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 = sqrt2().domain([sizeMin, sizeMax]).range([MIN_NODE_RADIUS, MAX_NODE_RADIUS]);
+  if (spec.resolve?.scale?.y === "independent") {
+    return compileLayerIndependent(leaves, spec, options, compileChart2);
   }
-  let colorFn;
-  if (encoding.nodeColor?.field) {
-    const field = encoding.nodeColor.field;
-    const fieldType = encoding.nodeColor.type ?? "nominal";
-    const scaleConfig = encoding.nodeColor.scale;
-    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 domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
-      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
-      const colorScale = linear2().domain(domain).range(range2);
-      colorFn = (node) => {
-        const val = Number(node[field]);
-        return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
-      };
-    } else {
-      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(nodes.map((n) => String(n[field] ?? "")))];
-      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
-      const ordinalScale = ordinal().domain(domain).range(range2);
-      colorFn = (node) => ordinalScale(String(node[field] ?? ""));
-    }
+  const primarySpec = buildPrimarySpec(leaves, spec);
+  const primaryLayout = compileChart2(primarySpec, options);
+  const allMarks = [];
+  const seenLabels = /* @__PURE__ */ new Set();
+  const pLegend = primaryLayout.legend;
+  const mergedLegendEntries = "entries" in pLegend ? [...pLegend.entries] : [];
+  for (const entry of mergedLegendEntries) {
+    seenLabels.add(entry.label);
   }
-  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 };
-    const override = nodeOverrides?.[node.id];
-    const finalFill = override?.fill ?? fill;
-    const finalRadius = override?.radius ?? radius;
-    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH2;
-    const finalStroke = override?.stroke ?? stroke;
-    const finalLabelPriority = override?.alwaysShowLabel ? Infinity : labelPriority;
-    return {
-      id: node.id,
-      radius: finalRadius,
-      fill: finalFill,
-      stroke: finalStroke,
-      strokeWidth: finalStrokeWidth,
-      label,
-      labelPriority: finalLabelPriority,
-      community: void 0,
-      data
+  const indexedLeaves = leaves.map((leaf, i) => ({
+    leaf,
+    zIndex: leaf.zIndex ?? i
+  }));
+  indexedLeaves.sort((a, b) => a.zIndex - b.zIndex);
+  const leafOptions = { ...options, frozenChartArea: primaryLayout.area };
+  for (const { leaf } of indexedLeaves) {
+    const themedLeaf = {
+      ...leaf,
+      theme: leaf.theme ?? spec.theme,
+      darkMode: leaf.darkMode ?? spec.darkMode
     };
-  });
-}
-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 = linear2().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";
-    const scaleConfig = encoding.edgeColor.scale;
-    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 domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
-      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
-      const colorScale = linear2().domain(domain).range(range2);
-      edgeColorFn = (edge) => {
-        const val = Number(edge[field]);
-        return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
-      };
-    } else {
-      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(edges.map((e) => String(e[field] ?? "")))];
-      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
-      const ordinalScale = ordinal().domain(domain).range(range2);
-      edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
-    }
-  }
-  const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
-  const EDGE_STYLES = ["solid", "dashed", "dotted"];
-  let styleFn;
-  if (encoding.edgeStyle?.field) {
-    const field = encoding.edgeStyle.field;
-    const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
-    const styleMap = /* @__PURE__ */ new Map();
-    for (let i = 0; i < uniqueValues.length; i++) {
-      styleMap.set(uniqueValues[i], EDGE_STYLES[i % EDGE_STYLES.length]);
-    }
-    styleFn = (edge) => styleMap.get(String(edge[field] ?? "")) ?? "solid";
-  }
-  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 leafLayout = compileChart2(themedLeaf, leafOptions);
+    allMarks.push(...leafLayout.marks);
+    const leafLeg = leafLayout.legend;
+    if ("entries" in leafLeg) {
+      for (const entry of leafLeg.entries) {
+        if (!seenLabels.has(entry.label)) {
+          seenLabels.add(entry.label);
+          mergedLegendEntries.push(entry);
+        }
       }
     }
-    const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColor;
-    const style = styleFn ? styleFn(edge) : "solid";
-    return {
-      source,
-      target,
-      stroke,
-      strokeWidth,
-      style,
-      data: { source, target, ...rest }
-    };
-  });
-}
-
-// src/graphs/community.ts
-function assignCommunities(nodes, clusteringField) {
-  if (!clusteringField) return;
-  for (const node of nodes) {
-    const value2 = node.data[clusteringField];
-    node.community = value2 != null ? String(value2) : void 0;
   }
+  return {
+    ...primaryLayout,
+    marks: allMarks,
+    legend: {
+      ...primaryLayout.legend,
+      ..."entries" in pLegend ? { entries: mergedLegendEntries } : {}
+    }
+  };
 }
-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++;
+function estimateYAxisLabelWidth(data, encoding, baseFontSize, measure) {
+  if (!encoding?.y) return 40;
+  const yEnc = encoding.y;
+  const yField = yEnc.field;
+  if (!yField) return 40;
+  const m = measure ?? estimateTextWidth15;
+  const yType = yEnc.type;
+  if (yType === "nominal" || yType === "ordinal") {
+    let maxWidth = 0;
+    for (const row of data) {
+      const label = String(row[yField] ?? "");
+      const w = m(label, baseFontSize, 400);
+      if (w > maxWidth) maxWidth = w;
     }
+    return maxWidth > 0 ? maxWidth + 10 : 40;
   }
-  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);
-      }
+  const yAxisFormat = encoding.y.axis?.format;
+  let maxAbsVal = 0;
+  for (const row of data) {
+    const v = Number(row[yField]);
+    if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
+  }
+  let sampleLabel;
+  if (yAxisFormat) {
+    try {
+      const fmt = format(yAxisFormat);
+      sampleLabel = fmt(maxAbsVal);
+    } catch {
+      sampleLabel = String(maxAbsVal);
     }
+  } else {
+    sampleLabel = Math.abs(maxAbsVal) >= 1e3 ? abbreviateNumber4(maxAbsVal) : formatNumber5(maxAbsVal);
   }
+  const hasNeg = data.some((r) => Number(r[yField]) < 0);
+  const labelEst = (hasNeg ? "-" : "") + sampleLabel;
+  return m(labelEst, baseFontSize, 400) + 10;
 }
-
-// src/graphs/compile-graph.ts
-var SWATCH_SIZE2 = 12;
-var SWATCH_GAP2 = 6;
-var ENTRY_GAP2 = 16;
-function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeColorField) {
-  const labelStyle = {
-    fontFamily: theme.fonts.family,
-    fontSize: theme.fonts.sizes.small,
-    fontWeight: theme.fonts.weights.normal,
-    fill: theme.colors.text,
-    lineHeight: 1.3
+function compileLayerIndependent(leaves, layerSpec, options, compileChart2) {
+  if (leaves.length > 2) {
+    throw new Error(
+      `Independent y-scales support at most 2 layers (left and right y-axis). Got ${leaves.length} layers.`
+    );
+  }
+  const leaf0 = leaves[0];
+  const leaf1 = leaves[1];
+  const xType0 = leaf0.encoding?.x?.type;
+  const xType1 = leaf1.encoding?.x?.type;
+  if (xType0 && xType1 && xType0 !== xType1) {
+    throw new Error(
+      `Dual-axis charts require matching x-field types across layers. Layer 0 has '${xType0}', layer 1 has '${xType1}'.`
+    );
+  }
+  const theme = resolveTheme2(layerSpec.theme ?? leaf1.theme);
+  const axisFontSize = theme.fonts?.sizes?.axisTick ?? 11;
+  const measureFn = createMeasureFn(options.measureText);
+  const rightAxisWidth = estimateYAxisLabelWidth(
+    leaf1.data,
+    leaf1.encoding,
+    axisFontSize,
+    measureFn
+  );
+  const yAxisConfig = leaf1.encoding?.y?.axis || void 0;
+  const hasRightAxisTitle = !!yAxisConfig?.title;
+  const tickExtent = TICK_LABEL_OFFSET + rightAxisWidth;
+  const bodyFontSize = theme.fonts?.sizes?.body ?? 13;
+  const axisTitleOffset4 = getAxisTitleOffset2(options.width);
+  const halfGlyph = Math.ceil(bodyFontSize / 2);
+  const titleExtent = hasRightAxisTitle ? axisTitleOffset4 + halfGlyph + (options.width < BREAKPOINT_COMPACT_MAX2 ? 0 : AXIS_TITLE_TRAILING_PAD2) : 0;
+  const rightReserve = Math.max(tickExtent, titleExtent);
+  const optionsWithReserve = {
+    ...options,
+    rightAxisReserve: rightReserve
   };
-  let entries;
-  if (hasCommunities && communityColorMap.size > 0) {
-    entries = [...communityColorMap.entries()].map(([label, color2]) => ({
-      label,
-      color: color2,
-      shape: "circle",
-      active: true
-    }));
-  } else {
-    const categoryColors = /* @__PURE__ */ new Map();
-    for (const node of nodes) {
-      const category = nodeColorField ? String(node.data[nodeColorField] ?? node.label ?? node.id) : node.label ?? node.id;
-      if (!categoryColors.has(category)) {
-        categoryColors.set(category, node.fill);
+  const xField0 = leaf0.encoding?.x?.field;
+  const xField1 = leaf1.encoding?.x?.field;
+  const unionXValues = /* @__PURE__ */ new Set();
+  if (xField0) for (const row of leaf0.data) unionXValues.add(row[xField0]);
+  if (xField1) for (const row of leaf1.data) unionXValues.add(row[xField1]);
+  let leaf0WithUnionX = ensureXDomainCoverage(leaf0, xField0, unionXValues);
+  let leaf1WithUnionX = ensureXDomainCoverage(leaf1, xField1, unionXValues);
+  const aligned = alignYDomains(leaf0WithUnionX, leaf1WithUnionX);
+  if (aligned) {
+    leaf0WithUnionX = withYDomain(leaf0WithUnionX, aligned.domain0);
+    leaf1WithUnionX = withYDomain(leaf1WithUnionX, aligned.domain1);
+  }
+  const primary0 = buildPrimarySpec([leaf0WithUnionX], layerSpec);
+  const layout0 = compileChart2(primary0, optionsWithReserve);
+  const primary1 = buildPrimarySpec([leaf1WithUnionX], layerSpec);
+  primary1.annotations = [];
+  const layout1 = compileChart2(primary1, optionsWithReserve);
+  const y2Axis = layout1.axes.y ? {
+    ...layout1.axes.y,
+    orient: "right",
+    gridlines: [],
+    start: {
+      x: layout0.area.x + layout0.area.width,
+      y: layout0.area.y
+    },
+    end: {
+      x: layout0.area.x + layout0.area.width,
+      y: layout0.area.y + layout0.area.height
+    },
+    ...layout1.axes.y.label ? {
+      titlePosition: {
+        x: layout0.area.x + layout0.area.width + getAxisTitleOffset2(layout0.dimensions.width),
+        y: layout0.area.y + layout0.area.height / 2,
+        angle: 90
       }
+    } : {}
+  } : void 0;
+  const layer0HasBars = layout0.marks.some((m) => m.type === "rect");
+  const layer1HasBars = layout1.marks.some((m) => m.type === "rect");
+  const bandCenterByCategory = /* @__PURE__ */ new Map();
+  if (layer0HasBars && layout0.axes.x?.ticks) {
+    for (const tick of layout0.axes.x.ticks) {
+      bandCenterByCategory.set(String(tick.label), tick.position);
     }
-    if (categoryColors.size <= 1) {
-      entries = [];
+  } else if (layer1HasBars && layout1.axes.x?.ticks) {
+    for (const tick of layout1.axes.x.ticks) {
+      bandCenterByCategory.set(String(tick.label), tick.position);
+    }
+  }
+  const remapMarkX = (xField, mark) => {
+    if (!xField || bandCenterByCategory.size === 0) return mark;
+    if (mark.type === "line") {
+      const newPoints = mark.points.map((p, i) => {
+        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
+        return bx !== void 0 ? { ...p, x: bx } : p;
+      });
+      const newDataPoints = mark.dataPoints?.map((dp, i) => {
+        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
+        return bx !== void 0 ? { ...dp, x: bx } : dp;
+      });
+      const newPath = line_default().x((p) => p.x).y((p) => p.y).curve(monotoneX)(newPoints) ?? void 0;
+      return { ...mark, points: newPoints, dataPoints: newDataPoints, path: newPath };
+    }
+    if (mark.type === "area") {
+      const newTopPoints = mark.topPoints.map((p, i) => {
+        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
+        return bx !== void 0 ? { ...p, x: bx } : p;
+      });
+      const newBottomPoints = mark.bottomPoints.map((p, i) => {
+        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
+        return bx !== void 0 ? { ...p, x: bx } : p;
+      });
+      const newDataPoints = mark.dataPoints?.map((dp, i) => {
+        const bx = bandCenterByCategory.get(String(mark.data[i]?.[xField] ?? ""));
+        return bx !== void 0 ? { ...dp, x: bx } : dp;
+      });
+      const areaGen = area_default().x((p) => p.x).y0((p) => p.yBottom).y1((p) => p.yTop).curve(monotoneX);
+      const topLineGen = line_default().x((p) => p.x).y((p) => p.yTop).curve(monotoneX);
+      const combined = newTopPoints.map((tp, i) => ({
+        x: tp.x,
+        yTop: tp.y,
+        yBottom: newBottomPoints[i]?.y ?? tp.y
+      }));
+      const newPath = areaGen(combined) ?? "";
+      const newTopPath = topLineGen(combined) ?? "";
+      return {
+        ...mark,
+        topPoints: newTopPoints,
+        bottomPoints: newBottomPoints,
+        dataPoints: newDataPoints,
+        path: newPath,
+        topPath: newTopPath
+      };
+    }
+    if (mark.type === "point") {
+      const bx = bandCenterByCategory.get(String(mark.data[xField] ?? ""));
+      return bx !== void 0 ? { ...mark, cx: bx } : mark;
+    }
+    return mark;
+  };
+  const adjustedMarks0 = bandCenterByCategory.size > 0 && !layer0HasBars ? layout0.marks.map((m) => remapMarkX(xField0, m)) : layout0.marks;
+  const taggedMarks1 = layout1.marks.map((mark) => {
+    const tagged = { ...mark, yScale: "y2" };
+    if (bandCenterByCategory.size > 0 && !layer1HasBars) {
+      return remapMarkX(xField1, tagged);
+    }
+    return tagged;
+  });
+  const seenLabels = /* @__PURE__ */ new Set();
+  const l0Legend = layout0.legend;
+  const l1Legend = layout1.legend;
+  const mergedLegendEntries = "entries" in l0Legend ? [...l0Legend.entries] : [];
+  for (const entry of mergedLegendEntries) seenLabels.add(entry.label);
+  const l1Entries = "entries" in l1Legend ? l1Legend.entries : [];
+  for (const entry of l1Entries) {
+    if (!seenLabels.has(entry.label)) {
+      seenLabels.add(entry.label);
+      mergedLegendEntries.push(entry);
+    }
+  }
+  const l0Count = layout0.marks.length;
+  const mergedTooltips = new Map(layout0.tooltipDescriptors);
+  for (const [key, value2] of layout1.tooltipDescriptors) {
+    const match = /^(rect|point|arc)-(\d+)$/.exec(key);
+    if (match) {
+      const offsetKey = `${match[1]}-${Number(match[2]) + l0Count}`;
+      mergedTooltips.set(offsetKey, value2);
     } else {
-      entries = [...categoryColors.entries()].map(([label, color2]) => ({
-        label,
-        color: color2,
-        shape: "circle",
-        active: true
-      }));
+      mergedTooltips.set(key, value2);
     }
   }
+  const z0 = leaf0.zIndex ?? 0;
+  const z1 = leaf1.zIndex ?? 1;
+  const marks = z0 <= z1 ? [...adjustedMarks0, ...taggedMarks1] : [...taggedMarks1, ...adjustedMarks0];
   return {
-    position: "top",
-    entries,
-    bounds: { x: 0, y: 0, width: 0, height: 0 },
-    labelStyle,
-    swatchSize: SWATCH_SIZE2,
-    swatchGap: SWATCH_GAP2,
-    entryGap: ENTRY_GAP2,
-    swatchChipFill: theme.colors.annotationFill
+    ...layout0,
+    axes: {
+      x: layout0.axes.x,
+      y: layout0.axes.y,
+      y2: y2Axis
+    },
+    marks,
+    legend: {
+      ...layout0.legend,
+      ..."entries" in l0Legend ? { entries: mergedLegendEntries } : {}
+    },
+    tooltipDescriptors: mergedTooltips
   };
 }
-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, value2] of Object.entries(node.data)) {
-      if (key === "id") continue;
-      if (value2 == null) continue;
-      fields.push({
-        label: key,
-        value: typeof value2 === "number" ? value2.toLocaleString() : String(value2)
-      });
+function ensureXDomainCoverage(leaf, xField, allXValues) {
+  if (!xField || allXValues.size === 0) return leaf;
+  const existingXValues = /* @__PURE__ */ new Set();
+  for (const row of leaf.data) existingXValues.add(row[xField]);
+  const missingRows = [];
+  for (const xVal of allXValues) {
+    if (!existingXValues.has(xVal)) {
+      missingRows.push({ [xField]: xVal });
     }
-    descriptors.set(node.id, {
-      title: node.label ?? node.id,
-      fields
-    });
   }
-  return descriptors;
+  if (missingRows.length === 0) return leaf;
+  return {
+    ...leaf,
+    data: [...leaf.data, ...missingRows]
+  };
 }
-function compileGraph(spec, options) {
-  const { spec: normalized } = compile(spec);
-  if (!("type" in normalized) || normalized.type !== "graph") {
-    throw new Error(
-      "compileGraph received a non-graph spec. Use compileChart or compileTable instead."
-    );
-  }
-  const graphSpec = normalized;
-  const rawWatermark = spec.watermark;
-  const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
-  const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
-  let theme = resolveTheme3(mergedThemeConfig);
-  if (options.darkMode) {
-    theme = adaptTheme2(theme);
-  }
-  const compiledNodes = resolveNodeVisuals(
-    graphSpec.nodes,
-    graphSpec.encoding,
-    graphSpec.edges,
-    theme,
-    graphSpec.nodeOverrides
-  );
-  const clusteringField = graphSpec.layout.clustering?.field;
-  const hasCommunities = !!clusteringField;
-  assignCommunities(compiledNodes, clusteringField);
-  const hasNodeColorEncoding = !!graphSpec.encoding.nodeColor?.field;
-  let communityColorMap = /* @__PURE__ */ new Map();
-  if (hasCommunities && !hasNodeColorEncoding) {
-    communityColorMap = buildCommunityColorMap(compiledNodes, theme);
-    applyCommunityColors(compiledNodes, communityColorMap);
-  }
-  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
-  const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
-  const legend = buildGraphLegend(
-    compiledNodes,
-    communityColorMap,
-    useCommunitiesForLegend,
-    theme,
-    graphSpec.encoding.nodeColor?.field
-  );
-  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
+function alignYDomains(leaf0, leaf1) {
+  const yEnc0 = leaf0.encoding?.y;
+  const yEnc1 = leaf1.encoding?.y;
+  if (!yEnc0 || !yEnc1) return void 0;
+  if (yEnc0.type !== "quantitative" || yEnc1.type !== "quantitative") return void 0;
+  if (yEnc0.scale?.domain || yEnc1.scale?.domain) return void 0;
+  const includeZero0 = yEnc0.scale?.zero !== false;
+  const includeZero1 = yEnc1.scale?.zero !== false;
+  const vals0 = leaf0.data.map((r) => Number(r[yEnc0.field])).filter(Number.isFinite);
+  const vals1 = leaf1.data.map((r) => Number(r[yEnc1.field])).filter(Number.isFinite);
+  if (vals0.length === 0 || vals1.length === 0) return void 0;
+  const niced = (vals, includeZero) => {
+    let lo = Math.min(...vals);
+    let hi = Math.max(...vals);
+    if (includeZero) {
+      lo = Math.min(0, lo);
+      hi = Math.max(0, hi);
+    }
+    const s = linear2().domain([lo, hi]);
+    s.nice();
+    const [dLo, dHi] = s.domain();
+    return [dLo, dHi];
   };
-  const collisionPadding = graphSpec.layout.collisionPadding ?? 2;
-  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 + collisionPadding,
-    collisionPadding,
-    linkStrength: graphSpec.layout.linkStrength,
-    centerForce: graphSpec.layout.centerForce
+  const [min0, max0] = niced(vals0, includeZero0);
+  const [min1, max1] = niced(vals1, includeZero1);
+  const span0 = max0 - min0;
+  const span1 = max1 - min1;
+  if (span0 === 0 || span1 === 0) return void 0;
+  const zf0 = (0 - min0) / span0;
+  const zf1 = (0 - min1) / span1;
+  const zeroInDomain0 = zf0 >= -1e-3 && zf0 <= 1.001;
+  const zeroInDomain1 = zf1 >= -1e-3 && zf1 <= 1.001;
+  if (!zeroInDomain0 || !zeroInDomain1) return void 0;
+  if (Math.abs(zf0 - zf1) < 1e-3) {
+    return { domain0: [min0, max0], domain1: [min1, max1] };
+  }
+  const targetZf = Math.max(zf0, zf1);
+  const align = (dMin, dMax, currentZf) => {
+    if (Math.abs(currentZf - targetZf) < 1e-3) return [dMin, dMax];
+    if (targetZf > currentZf) {
+      const newMin = -(targetZf / (1 - targetZf)) * dMax;
+      return [newMin, dMax];
+    }
+    const newMax = -dMin * (1 - targetZf) / targetZf;
+    return [dMin, newMax];
   };
-  const chrome = computeChrome3(
-    {
-      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,
-    "full",
-    void 0,
-    watermark
-  );
+  const domain0 = align(min0, max0, zf0);
+  const domain1 = align(min1, max1, zf1);
+  return { domain0, domain1 };
+}
+function withYDomain(leaf, domain) {
+  if (!leaf.encoding?.y) return leaf;
   return {
-    nodes: compiledNodes,
-    edges: compiledEdges,
-    legend,
-    chrome,
-    tooltipDescriptors,
-    a11y,
-    theme,
-    dimensions: {
-      width: options.width,
-      height: options.height
-    },
-    simulationConfig,
-    watermark
+    ...leaf,
+    encoding: {
+      ...leaf.encoding,
+      y: {
+        ...leaf.encoding.y,
+        scale: {
+          ...leaf.encoding.y.scale,
+          domain
+        }
+      }
+    }
   };
 }
-var DEFAULT_COLLISION_PADDING = 5;
-
-// src/layout/axes.ts
-import {
-  axisTitleOffset as axisTitleOffset2,
-  computeXAxisExtentFromLabels as computeXAxisExtentFromLabels2,
-  estimateTextWidth as estimateTextWidth15,
-  getAxisTitleOffset as getAxisTitleOffset2,
-  X_AXIS_TITLE_BAND_ROTATED
-} from "@opendata-ai/openchart-core";
+function buildPrimarySpec(leaves, layerSpec) {
+  const allData = leaves.flatMap((leaf) => leaf.data);
+  const primary = {
+    ...leaves[0],
+    data: allData,
+    chrome: layerSpec.chrome ?? leaves[0].chrome,
+    annotations: layerSpec.annotations ?? leaves[0].annotations,
+    labels: layerSpec.labels ?? leaves[0].labels,
+    legend: layerSpec.legend ?? leaves[0].legend,
+    responsive: layerSpec.responsive ?? leaves[0].responsive,
+    theme: layerSpec.theme ?? leaves[0].theme,
+    darkMode: layerSpec.darkMode ?? leaves[0].darkMode,
+    watermark: layerSpec.watermark ?? leaves[0].watermark,
+    hiddenSeries: layerSpec.hiddenSeries ?? leaves[0].hiddenSeries,
+    endpointLabels: layerSpec.endpointLabels ?? leaves[0].endpointLabels
+  };
+  return primary;
+}
 
-// src/layout/axes/thinning.ts
-import { estimateTextWidth as estimateTextWidth14 } from "@opendata-ai/openchart-core";
-var MIN_TICK_GAP_FACTOR = 0.5;
-var MIN_TICK_COUNT = 2;
-function measureLabel(text, fontSize, fontWeight, measureText) {
-  return measureText ? measureText(text, fontSize, fontWeight).width : estimateTextWidth14(text, fontSize, fontWeight);
+// src/compile/watermark-obstacle.ts
+import { BRAND_RESERVE_WIDTH as BRAND_RESERVE_WIDTH2 } from "@opendata-ai/openchart-core";
+var WATERMARK_HEIGHT = 30;
+var X_AXIS_EXTENT_WITH_LABEL = 48;
+var X_AXIS_EXTENT_TICKS_ONLY = 26;
+function computeWatermarkObstacle(dims, watermark, axes, theme) {
+  if (!watermark) return null;
+  const chartArea = dims.chartArea;
+  const brandPadding = theme.spacing.padding;
+  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH2;
+  const xAxisExtent = axes.x?.label ? X_AXIS_EXTENT_WITH_LABEL : axes.x ? X_AXIS_EXTENT_TICKS_ONLY : 0;
+  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+  const brandY = firstBottomChrome ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+  return { x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH2, height: WATERMARK_HEIGHT };
 }
-function ticksOverlap(ticks2, fontSize, fontWeight, measureText, orientation = "horizontal") {
-  if (ticks2.length < 2) return false;
-  const minGap = fontSize * MIN_TICK_GAP_FACTOR;
-  if (orientation === "vertical") {
-    const sorted = [...ticks2].sort((a, b) => a.position - b.position);
-    const labelHeight = fontSize * 1.2;
-    for (let i = 0; i < sorted.length - 1; i++) {
-      const aBottom = sorted[i].position + labelHeight / 2;
-      const bTop = sorted[i + 1].position - labelHeight / 2;
-      if (aBottom + minGap > bTop) return true;
-    }
-    return false;
+
+// src/compiler/sparkline-defaults.ts
+var TREND_DEADBAND = 5e-4;
+function computeTrend(values) {
+  const finite = [];
+  for (const v of values) {
+    if (Number.isFinite(v)) finite.push(v);
   }
-  for (let i = 0; i < ticks2.length - 1; i++) {
-    const aWidth = measureLabel(ticks2[i].label, fontSize, fontWeight, measureText);
-    const bWidth = measureLabel(ticks2[i + 1].label, fontSize, fontWeight, measureText);
-    const aRight = ticks2[i].position + aWidth / 2;
-    const bLeft = ticks2[i + 1].position - bWidth / 2;
-    if (aRight + minGap > bLeft) return true;
+  if (finite.length < 2) return "neutral";
+  const n = finite.length;
+  let sumX = 0;
+  let sumY = 0;
+  for (let i = 0; i < n; i++) {
+    sumX += i;
+    sumY += finite[i];
   }
-  return false;
-}
-function thinTicksUntilFit(ticks2, fontSize, fontWeight, measureText, orientation = "horizontal") {
-  if (!ticksOverlap(ticks2, fontSize, fontWeight, measureText, orientation)) return ticks2;
-  let current = ticks2;
-  while (current.length > MIN_TICK_COUNT) {
-    const thinned = [current[0]];
-    for (let i = 2; i < current.length - 1; i += 2) {
-      thinned.push(current[i]);
-    }
-    if (current.length > 1) thinned.push(current[current.length - 1]);
-    current = thinned;
-    if (!ticksOverlap(current, fontSize, fontWeight, measureText, orientation)) break;
+  const meanX = sumX / n;
+  const meanY = sumY / n;
+  let num = 0;
+  let den = 0;
+  for (let i = 0; i < n; i++) {
+    const dx = i - meanX;
+    num += dx * (finite[i] - meanY);
+    den += dx * dx;
   }
-  return current;
+  if (den === 0) return "neutral";
+  const slope = num / den;
+  const scale = Math.abs(meanY) || 1;
+  const relSlope = slope / scale;
+  if (Math.abs(relSlope) < TREND_DEADBAND) return "neutral";
+  return relSlope > 0 ? "up" : "down";
 }
-
-// src/layout/axes.ts
-var HEIGHT_MINIMAL_THRESHOLD = 80;
-var HEIGHT_REDUCED_THRESHOLD = 100;
-var WIDTH_MINIMAL_THRESHOLD = 150;
-var WIDTH_REDUCED_THRESHOLD = 300;
-var DENSITY_ORDER = ["full", "reduced", "minimal"];
-var GROUNDED_MARKS = /* @__PURE__ */ new Set(["bar", "tick", "lollipop"]);
-function effectiveDensity(baseDensity, axisLength, minimalThreshold, reducedThreshold) {
-  let density = baseDensity;
-  if (axisLength < minimalThreshold) {
-    density = "minimal";
-  } else if (axisLength < reducedThreshold) {
-    const baseIdx = DENSITY_ORDER.indexOf(baseDensity);
-    const reducedIdx = DENSITY_ORDER.indexOf("reduced");
-    density = DENSITY_ORDER[Math.max(baseIdx, reducedIdx)];
-  }
-  return density;
+function trendColor(trend, theme) {
+  if (trend === "up") return theme.colors.positive;
+  if (trend === "down") return theme.colors.negative;
+  return theme.colors.categorical[0];
 }
-var CONTINUOUS_TICK_FLOOR = 4;
-var OVERSHOOT_TOLERANCE = 1.5;
-var MIN_QUANTITATIVE_TICKS = 2;
-function ensureMinContinuousTicks(scale, ticks2, requestedCount) {
-  if (ticks2.length >= MIN_QUANTITATIVE_TICKS) return ticks2;
-  if (!scale || !scaleSupportsTickCount(scale)) return ticks2;
-  let best = ticks2;
-  for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
-    const candidate = buildContinuousTicks(scale, n);
-    if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
-    if (candidate.length > best.length) best = candidate;
+function computeTrendFromData(data, yField) {
+  if (!yField) return "neutral";
+  const values = [];
+  for (const row of data) {
+    const v = Number(row[yField]);
+    if (Number.isFinite(v)) values.push(v);
   }
-  return best;
+  return computeTrend(values);
 }
-function fitContinuousTicks(scale, initialTicks, initialCount, fontSize, fontWeight, axisLength, orientation, measureText) {
-  if (!scale || !scaleSupportsTickCount(scale)) return initialTicks;
-  const flooredTicks = ensureMinContinuousTicks(scale, initialTicks, initialCount);
-  const tolerance = initialCount * OVERSHOOT_TOLERANCE;
-  const overshoots = flooredTicks.length > tolerance;
-  const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
-  if (!overshoots && !overlaps) return flooredTicks;
-  const minThreshold = orientation === "vertical" ? HEIGHT_MINIMAL_THRESHOLD : WIDTH_MINIMAL_THRESHOLD;
-  const floor = axisLength >= minThreshold ? CONTINUOUS_TICK_FLOOR : 2;
-  let bestWithinFloor;
-  for (let n = initialCount - 1; n >= 2; n--) {
-    const candidate = buildContinuousTicks(scale, n);
-    const candidateOvershoots = candidate.length > tolerance;
-    const candidateOverlaps = ticksOverlap(
-      candidate,
-      fontSize,
-      fontWeight,
-      measureText,
-      orientation
-    );
-    if (!candidateOvershoots && !candidateOverlaps) {
-      return candidate;
-    }
-    if (candidate.length >= floor) bestWithinFloor = candidate;
-  }
-  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
-  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
-  return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
+function hasExplicitColor(markDef, encodingHasColor) {
+  if (encodingHasColor) return { fill: true, stroke: true };
+  return {
+    fill: markDef?.fill !== void 0,
+    stroke: markDef?.stroke !== void 0
+  };
 }
-function bandTicksOverlapAtAngle(ticks2, angleDeg, fontSize, fontWeight, measureText) {
-  if (ticks2.length < 2) return false;
-  const angleRad = Math.abs(angleDeg) * Math.PI / 180;
-  const cosA = angleRad > 0 ? Math.abs(Math.cos(angleRad)) : 1;
-  const minGap = fontSize * 0.5;
-  for (let i = 0; i < ticks2.length - 1; i++) {
-    const aWidth = measureLabel(ticks2[i].label, fontSize, fontWeight, measureText) * cosA;
-    const bWidth = measureLabel(ticks2[i + 1].label, fontSize, fontWeight, measureText) * cosA;
-    const aRight = ticks2[i].position + aWidth / 2;
-    const bLeft = ticks2[i + 1].position - bWidth / 2;
-    if (aRight + minGap > bLeft) return true;
-  }
-  return false;
+function buildSparklineAreaGradient(baseColor) {
+  return {
+    gradient: "linear",
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 1,
+    stops: [
+      { offset: 0, color: baseColor, opacity: 0.35 },
+      { offset: 1, color: baseColor, opacity: 0 }
+    ]
+  };
 }
-function thinBandTicksIfNeeded(ticks2, angleDeg, fontSize, fontWeight, measureText) {
-  if (!bandTicksOverlapAtAngle(ticks2, angleDeg, fontSize, fontWeight, measureText)) return ticks2;
-  let current = ticks2;
-  while (current.length > 2) {
-    const thinned = [current[0]];
-    for (let i = 2; i < current.length - 1; i += 2) {
-      thinned.push(current[i]);
-    }
-    if (current.length > 1) thinned.push(current[current.length - 1]);
-    current = thinned;
-    if (!bandTicksOverlapAtAngle(current, angleDeg, fontSize, fontWeight, measureText)) break;
+
+// src/graphs/compile-graph.ts
+import { adaptTheme as adaptTheme2, computeChrome as computeChrome3, resolveTheme as resolveTheme3 } from "@opendata-ai/openchart-core";
+
+// src/graphs/encoding.ts
+var DEFAULT_NODE_RADIUS = 5;
+var MIN_NODE_RADIUS = 3;
+var MAX_NODE_RADIUS = 12;
+var DEFAULT_EDGE_WIDTH = 1;
+var MIN_EDGE_WIDTH = 0.5;
+var MAX_EDGE_WIDTH = 4;
+var DEFAULT_STROKE_WIDTH2 = 1;
+function darkenColor(hex2, amount = 0.2) {
+  const clean = hex2.replace(/^#/, "");
+  if (clean.length !== 6 && clean.length !== 3) return hex2;
+  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(hex2, opacity) {
+  const clean = hex2.replace(/^#/, "");
+  if (clean.length !== 6 && clean.length !== 3) {
+    return hex2;
   }
-  return current;
+  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 computeAxes(scales, chartArea, strategy, theme, measureText, dataContext) {
-  const result = {};
-  const baseDensity = strategy.axisLabelDensity;
-  const yDensity = effectiveDensity(
-    baseDensity,
-    chartArea.height,
-    HEIGHT_MINIMAL_THRESHOLD,
-    HEIGHT_REDUCED_THRESHOLD
-  );
-  const xDensity = effectiveDensity(
-    baseDensity,
-    chartArea.width,
-    WIDTH_MINIMAL_THRESHOLD,
-    WIDTH_REDUCED_THRESHOLD
-  );
-  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
-  };
-  const { fontSize } = tickLabelStyle;
-  const { fontWeight } = tickLabelStyle;
-  if (scales.x && !dataContext?.skipX && scales.x.channel.axis !== false) {
-    const axisConfig = scales.x.channel.axis;
-    const isContinuousX = scales.x.type !== "band" && scales.x.type !== "point" && scales.x.type !== "ordinal";
-    const xTargetCount = isContinuousX ? targetTickCount(chartArea.width, xDensity, "x") : void 0;
-    let allTicks;
-    if (axisConfig?.values) {
-      allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
-    } else if (!isContinuousX) {
-      allTicks = categoricalTicks(scales.x, xDensity, "horizontal");
+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, nodeOverrides) {
+  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 = sqrt2().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";
+    const scaleConfig = encoding.nodeColor.scale;
+    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 domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
+      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
+      const colorScale = linear2().domain(domain).range(range2);
+      colorFn = (node) => {
+        const val = Number(node[field]);
+        return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
+      };
     } else {
-      allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
+      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(nodes.map((n) => String(n[field] ?? "")))];
+      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
+      const ordinalScale = ordinal().domain(domain).range(range2);
+      colorFn = (node) => ordinalScale(String(node[field] ?? ""));
     }
-    const gridlines = allTicks.map((t) => ({
-      position: t.position,
-      major: true
-    }));
-    let tickAngle = axisConfig?.labelAngle;
-    if (tickAngle === void 0 && scales.x.type === "band" && allTicks.length > 1) {
-      const bandwidth = scales.x.scale.bandwidth();
-      let maxLabelWidth = 0;
-      for (const t of allTicks) {
-        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
-        if (w > maxLabelWidth) maxLabelWidth = w;
+  }
+  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);
       }
-      tickAngle = resolveBandTickAngle(void 0, maxLabelWidth, bandwidth, allTicks.length);
     }
-    const hasExplicitValues = !!axisConfig?.values;
-    let ticks2;
-    if (hasExplicitValues) {
-      ticks2 = allTicks;
-    } else if (scales.x.type === "band") {
-      const effectiveAngle = tickAngle ?? 0;
-      ticks2 = thinBandTicksIfNeeded(allTicks, effectiveAngle, fontSize, fontWeight, measureText);
-    } else if (isContinuousX) {
-      ticks2 = fitContinuousTicks(
-        scales.x,
-        allTicks,
-        xTargetCount ?? allTicks.length,
-        fontSize,
-        fontWeight,
-        chartArea.width,
-        "horizontal",
-        measureText
-      );
+    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 {
-      ticks2 = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText);
+      label = node.id;
     }
-    const axisTitle = axisConfig?.title;
-    const xLabelColor = axisConfig?.labelColor;
-    const xTickPosition = axisConfig?.tickPosition ?? "gutter";
-    const xDomainLine = axisConfig?.domain ?? (GROUNDED_MARKS.has(dataContext?.markType ?? "") ? void 0 : false);
-    result.x = {
-      ticks: ticks2,
-      gridlines: axisConfig?.grid ?? dataContext?.markType === "point" ? gridlines : [],
-      label: axisTitle,
-      labelStyle: xLabelColor ? { ...axisLabelStyle, fill: xLabelColor } : axisLabelStyle,
-      tickLabelStyle: xLabelColor ? { ...tickLabelStyle, fill: xLabelColor } : tickLabelStyle,
-      tickAngle,
-      start: { x: chartArea.x, y: chartArea.y + chartArea.height },
-      end: { x: chartArea.x + chartArea.width, y: chartArea.y + chartArea.height },
-      orient: axisConfig?.orient,
-      domainLine: xDomainLine,
-      tickMarks: axisConfig?.ticks,
-      offset: axisConfig?.offset,
-      titlePadding: axisConfig?.titlePadding,
-      labelPadding: axisConfig?.labelPadding,
-      labelOverlap: axisConfig?.labelOverlap,
-      labelFlush: axisConfig?.labelFlush,
-      tickPosition: xTickPosition
+    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 };
+    const override = nodeOverrides?.[node.id];
+    const finalFill = override?.fill ?? fill;
+    const finalRadius = override?.radius ?? radius;
+    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH2;
+    const finalStroke = override?.stroke ?? stroke;
+    const finalLabelPriority = override?.alwaysShowLabel ? Infinity : labelPriority;
+    return {
+      id: node.id,
+      radius: finalRadius,
+      fill: finalFill,
+      stroke: finalStroke,
+      strokeWidth: finalStrokeWidth,
+      label,
+      labelPriority: finalLabelPriority,
+      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 = linear2().domain([widthMin, widthMax]).range([MIN_EDGE_WIDTH, MAX_EDGE_WIDTH]);
   }
-  if (scales.y && !dataContext?.skipY && scales.y.channel.axis !== false) {
-    const axisConfig = scales.y.channel.axis;
-    const isContinuousY = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
-    const yTargetCount = isContinuousY ? targetTickCount(chartArea.height, yDensity, "y") : void 0;
-    let allTicks;
-    if (axisConfig?.values) {
-      allTicks = resolveExplicitTicks(axisConfig.values, scales.y);
-    } else if (dataContext?.precomputedYTicks && dataContext.precomputedYTicks.length > 0 && isContinuousY) {
-      allTicks = resolveExplicitTicks(dataContext.precomputedYTicks, scales.y);
-    } else if (!isContinuousY) {
-      const yFieldName = dataContext?.encoding.y?.field;
-      const yLabelField = axisConfig?.labelField;
-      allTicks = categoricalTicks(
-        scales.y,
-        yDensity,
-        "vertical",
-        yFieldName && yLabelField && dataContext ? { data: dataContext.data, fieldName: yFieldName, labelField: yLabelField } : void 0
-      );
+  let edgeColorFn;
+  if (encoding.edgeColor?.field) {
+    const field = encoding.edgeColor.field;
+    const fieldType = encoding.edgeColor.type ?? "nominal";
+    const scaleConfig = encoding.edgeColor.scale;
+    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 domain = scaleConfig?.domain && scaleConfig.domain.length === 2 ? scaleConfig.domain : [colorMin, colorMax];
+      const range2 = scaleConfig?.range && scaleConfig.range.length >= 2 ? scaleConfig.range : [palette[0], palette[palette.length - 1]];
+      const colorScale = linear2().domain(domain).range(range2);
+      edgeColorFn = (edge) => {
+        const val = Number(edge[field]);
+        return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
+      };
     } else {
-      allTicks = continuousTicks(scales.y, yDensity, yTargetCount);
+      const domain = scaleConfig?.domain && Array.isArray(scaleConfig.domain) ? scaleConfig.domain : [...new Set(edges.map((e) => String(e[field] ?? "")))];
+      const range2 = scaleConfig?.range && scaleConfig.range.length > 0 ? scaleConfig.range : theme.colors.categorical;
+      const ordinalScale = ordinal().domain(domain).range(range2);
+      edgeColorFn = (edge) => ordinalScale(String(edge[field] ?? ""));
     }
-    const shouldThinY = scales.y.type !== "band" && !axisConfig?.values && !dataContext?.precomputedYTicks?.length;
-    let ticks2;
-    if (!shouldThinY) {
-      ticks2 = allTicks;
-    } else if (isContinuousY) {
-      ticks2 = fitContinuousTicks(
-        scales.y,
-        allTicks,
-        yTargetCount ?? allTicks.length,
-        fontSize,
-        fontWeight,
-        chartArea.height,
-        "vertical",
-        measureText
-      );
-    } else {
-      ticks2 = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText, "vertical");
+  }
+  const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+  const EDGE_STYLES = ["solid", "dashed", "dotted"];
+  let styleFn;
+  if (encoding.edgeStyle?.field) {
+    const field = encoding.edgeStyle.field;
+    const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? "")))];
+    const styleMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < uniqueValues.length; i++) {
+      styleMap.set(uniqueValues[i], EDGE_STYLES[i % EDGE_STYLES.length]);
     }
-    const gridlines = ticks2.map((t) => ({
-      position: t.position,
-      major: true
-    }));
-    const axisTitle = axisConfig?.title;
-    const tickAngle = axisConfig?.labelAngle;
-    const yLabelColor = axisConfig?.labelColor;
-    const isContinuousYAxis = scales.y.type !== "band" && scales.y.type !== "point" && scales.y.type !== "ordinal";
-    const isLineOrArea2 = dataContext?.markType === "line" || dataContext?.markType === "area";
-    const yTickPosition = axisConfig?.tickPosition ?? (isLineOrArea2 && isContinuousYAxis && axisConfig?.orient !== "right" ? "inline" : "gutter");
-    const yDomainLine = axisConfig?.domain ?? (yTickPosition === "inline" ? false : void 0);
-    const yTickMarks = axisConfig?.ticks ?? (yTickPosition === "inline" ? false : void 0);
-    result.y = {
-      ticks: ticks2,
-      // Y-axis gridlines are shown by default (standard editorial practice)
-      gridlines,
-      label: axisTitle,
-      labelStyle: yLabelColor ? { ...axisLabelStyle, fill: yLabelColor } : axisLabelStyle,
-      tickLabelStyle: yLabelColor ? { ...tickLabelStyle, fill: yLabelColor } : tickLabelStyle,
-      tickAngle,
-      start: { x: chartArea.x, y: chartArea.y },
-      end: { x: chartArea.x, y: chartArea.y + chartArea.height },
-      orient: axisConfig?.orient,
-      domainLine: yDomainLine,
-      tickMarks: yTickMarks,
-      offset: axisConfig?.offset,
-      titlePadding: axisConfig?.titlePadding,
-      labelPadding: axisConfig?.labelPadding,
-      labelOverlap: axisConfig?.labelOverlap,
-      labelFlush: axisConfig?.labelFlush,
-      tickPosition: yTickPosition
+    styleFn = (edge) => styleMap.get(String(edge[field] ?? "")) ?? "solid";
+  }
+  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;
+    const style = styleFn ? styleFn(edge) : "solid";
+    return {
+      source,
+      target,
+      stroke,
+      strokeWidth,
+      style,
+      data: { source, target, ...rest }
     };
+  });
+}
+
+// src/graphs/community.ts
+function assignCommunities(nodes, clusteringField) {
+  if (!clusteringField) return;
+  for (const node of nodes) {
+    const value2 = node.data[clusteringField];
+    node.community = value2 != null ? String(value2) : void 0;
   }
-  const totalWidth = dataContext?.totalWidth ?? chartArea.x + chartArea.width;
-  if (result.x) {
-    const isRotated = !!result.x.tickAngle && Math.abs(result.x.tickAngle) > 10;
-    result.x.extent = computeXAxisExtentFromLabels2({
-      labels: result.x.ticks.map((t) => t.label),
-      tickAngle: result.x.tickAngle,
-      hasTitle: !!result.x.label,
-      tickFontSize: result.x.tickLabelStyle.fontSize,
-      tickFontWeight: result.x.tickLabelStyle.fontWeight,
-      xAxisHeight: theme.spacing.xAxisHeight,
-      measure: (t, fs, fw) => measureLabel(t, fs, fw, measureText)
-    });
-    if (result.x.label) {
-      const rotatedBand = isRotated ? result.x.extent - X_AXIS_TITLE_BAND_ROTATED + 14 : 35;
-      result.x.titlePosition = {
-        x: chartArea.x + chartArea.width / 2,
-        y: chartArea.y + chartArea.height + rotatedBand
-      };
+}
+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++;
     }
   }
-  if (result.y?.label && result.y.labelStyle) {
-    const isRight = result.y.orient === "right";
-    if (isRight) {
-      const titleOff = getAxisTitleOffset2(totalWidth);
-      result.y.titlePosition = {
-        x: chartArea.x + chartArea.width + titleOff,
-        y: chartArea.y + chartArea.height / 2,
-        angle: 90
-      };
+  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_SIZE2 = 12;
+var SWATCH_GAP2 = 6;
+var ENTRY_GAP2 = 16;
+function buildGraphLegend(nodes, communityColorMap, hasCommunities, theme, nodeColorField) {
+  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, color2]) => ({
+      label,
+      color: color2,
+      shape: "circle",
+      active: true
+    }));
+  } else {
+    const categoryColors = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      const category = nodeColorField ? String(node.data[nodeColorField] ?? node.label ?? node.id) : node.label ?? node.id;
+      if (!categoryColors.has(category)) {
+        categoryColors.set(category, node.fill);
+      }
+    }
+    if (categoryColors.size <= 1) {
+      entries = [];
     } else {
-      const maxTickLabelWidth = result.y.ticks.reduce((max4, t) => {
-        const w = estimateTextWidth15(
-          t.label,
-          result.y.tickLabelStyle.fontSize,
-          result.y.tickLabelStyle.fontWeight ?? 400
-        );
-        return Math.max(max4, w);
-      }, 0);
-      const titleOff = axisTitleOffset2(maxTickLabelWidth, result.y.labelStyle.fontSize, totalWidth);
-      result.y.titlePosition = {
-        x: chartArea.x - titleOff,
-        y: chartArea.y + chartArea.height / 2,
-        angle: -90
-      };
+      entries = [...categoryColors.entries()].map(([label, color2]) => ({
+        label,
+        color: color2,
+        shape: "circle",
+        active: true
+      }));
     }
   }
-  return result;
+  return {
+    position: "top",
+    entries,
+    bounds: { x: 0, y: 0, width: 0, height: 0 },
+    labelStyle,
+    swatchSize: SWATCH_SIZE2,
+    swatchGap: SWATCH_GAP2,
+    entryGap: ENTRY_GAP2,
+    swatchChipFill: theme.colors.annotationFill
+  };
+}
+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, value2] of Object.entries(node.data)) {
+      if (key === "id") continue;
+      if (value2 == null) continue;
+      fields.push({
+        label: key,
+        value: typeof value2 === "number" ? value2.toLocaleString() : String(value2)
+      });
+    }
+    descriptors.set(node.id, {
+      title: node.label ?? node.id,
+      fields
+    });
+  }
+  return descriptors;
+}
+function compileGraph(spec, options) {
+  const { spec: normalized } = compile(spec);
+  if (!("type" in normalized) || normalized.type !== "graph") {
+    throw new Error(
+      "compileGraph received a non-graph spec. Use compileChart or compileTable instead."
+    );
+  }
+  const graphSpec = normalized;
+  const rawWatermark = spec.watermark;
+  const watermark = rawWatermark !== void 0 ? graphSpec.watermark : options.watermark ?? true;
+  const mergedThemeConfig = options.theme ? { ...graphSpec.theme, ...options.theme } : graphSpec.theme;
+  let theme = resolveTheme3(mergedThemeConfig);
+  if (options.darkMode) {
+    theme = adaptTheme2(theme);
+  }
+  const compiledNodes = resolveNodeVisuals(
+    graphSpec.nodes,
+    graphSpec.encoding,
+    graphSpec.edges,
+    theme,
+    graphSpec.nodeOverrides
+  );
+  const clusteringField = graphSpec.layout.clustering?.field;
+  const hasCommunities = !!clusteringField;
+  assignCommunities(compiledNodes, clusteringField);
+  const hasNodeColorEncoding = !!graphSpec.encoding.nodeColor?.field;
+  let communityColorMap = /* @__PURE__ */ new Map();
+  if (hasCommunities && !hasNodeColorEncoding) {
+    communityColorMap = buildCommunityColorMap(compiledNodes, theme);
+    applyCommunityColors(compiledNodes, communityColorMap);
+  }
+  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
+  const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
+  const legend = buildGraphLegend(
+    compiledNodes,
+    communityColorMap,
+    useCommunitiesForLegend,
+    theme,
+    graphSpec.encoding.nodeColor?.field
+  );
+  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 collisionPadding = graphSpec.layout.collisionPadding ?? 2;
+  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 + collisionPadding,
+    collisionPadding,
+    linkStrength: graphSpec.layout.linkStrength,
+    centerForce: graphSpec.layout.centerForce
+  };
+  const chrome = computeChrome3(
+    {
+      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,
+    "full",
+    void 0,
+    watermark
+  );
+  return {
+    nodes: compiledNodes,
+    edges: compiledEdges,
+    legend,
+    chrome,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    dimensions: {
+      width: options.width,
+      height: options.height
+    },
+    simulationConfig,
+    watermark
+  };
 }
+var DEFAULT_COLLISION_PADDING = 5;
 
 // src/layout/dimensions.ts
 import {
@@ -12939,12 +12968,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const base = theme.spacing.xAxisHeight;
     xAxisHeight = hasXAxisLabel ? base + 22 : base;
   }
-  const yAxisCfgPre = encoding.y?.axis ?? void 0;
-  const yTickPositionExplicitPre = yAxisCfgPre?.tickPosition;
-  const yIsContinuousPre = encoding.y?.type === "quantitative" || encoding.y?.type === "temporal";
-  const yIsLineOrAreaPre = spec.markType === "line" || spec.markType === "area";
-  const yAxisOrientPre = yAxisCfgPre?.orient;
-  const yIsInlinePre = (yTickPositionExplicitPre ?? (yIsLineOrAreaPre && yIsContinuousPre && yAxisOrientPre !== "right" ? "inline" : "gutter")) === "inline";
+  const yIsInlinePre = yTickPositionIsInline(encoding.y, spec.markType);
   const inlineTickOverhang = yIsInlinePre ? theme.fonts.sizes.axisTick + INLINE_TICK_OVERHANG_PAD : 0;
   const topAxisGap = isRadial && chrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
   const topPad = width < NARROW_VIEWPORT_MAX3 ? padding + TOP_PAD_EXTRA_NARROW2 : padding;
@@ -13097,7 +13121,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     const yFieldForTitle = encoding.y?.field;
     const yAxisFormatForTitle = yAxis?.format;
     let estTickLabelWidth = 0;
-    if (yFieldForTitle && (encoding.y?.type === "quantitative" || encoding.y?.type === "temporal")) {
+    if (yFieldForTitle && !yIsInlinePre && (encoding.y?.type === "quantitative" || encoding.y?.type === "temporal")) {
       let maxAbsValForTitle = 0;
       for (const row of spec.data) {
         const v = Number(row[yFieldForTitle]);
@@ -13127,7 +13151,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       );
     }
     const titleFontSize = theme.fonts.sizes.body;
-    const offset = axisTitleOffset3(estTickLabelWidth, titleFontSize, width);
+    const offset = axisTitleOffset3(estTickLabelWidth, titleFontSize, width, yIsInlinePre);
     const halfGlyph = Math.ceil(titleFontSize / 2);
     const rotatedLabelMargin = offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX3 ? 0 : AXIS_TITLE_TRAILING_PAD3);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
@@ -14941,6 +14965,9 @@ import {
   computeChrome as computeChrome7,
   estimateTextWidth as estimateTextWidth20,
   formatNumber as formatNumber8,
+  getBreakpoint,
+  HPAD_COMPACT_FRACTION as HPAD_COMPACT_FRACTION3,
+  HPAD_COMPACT_MIN as HPAD_COMPACT_MIN3,
   pickLabelColor as pickLabelColor2,
   resolveTheme as resolveTheme5,
   SEQUENTIAL_PALETTES
@@ -14950,6 +14977,9 @@ var TILE_STROKE_WIDTH = 1;
 var LEGEND_SWATCH_SIZE = 10;
 var LEGEND_SWATCH_GAP = 6;
 var LEGEND_ENTRY_GAP = 16;
+function clamp(value2, min4, max4) {
+  return Math.min(max4, Math.max(min4, value2));
+}
 function compileTileMap(spec, options) {
   const { spec: normalized } = compile(spec);
   if (!("type" in normalized) || normalized.type !== "tilemap") {
@@ -14982,7 +15012,7 @@ function compileTileMap(spec, options) {
     void 0,
     watermark
   );
-  const padding = theme.spacing.padding;
+  const padding = getBreakpoint(options.width) === "compact" ? Math.max(HPAD_COMPACT_MIN3, Math.round(theme.spacing.padding * HPAD_COMPACT_FRACTION3)) : theme.spacing.padding;
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
@@ -15095,7 +15125,7 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
     keyboardNavigable: tiles.length > 0
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
-  const padding = theme.spacing.padding;
+  const padding = fullArea.x;
   const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
   return {
     area: fullArea,
@@ -15150,16 +15180,20 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
     }
   }
   const showLegend = tilemapSpec.legend?.show !== false;
+  const legendLabelFontSize = 11;
   const legendRowHeight = LEGEND_SWATCH_SIZE + 6;
-  const legendTotalHeight = showLegend ? legendRowHeight : 0;
+  const legendLabels = categories.map(formatCategoryLabel);
   const legendGap2 = showLegend ? 8 : 0;
-  const tileAreaHeight = fullArea.height - legendTotalHeight - legendGap2;
+  const estimatedRows = showLegend ? countLegendRows(legendLabels, fullArea.width, legendLabelFontSize) : 0;
+  const tileAreaHeight = fullArea.height - legendRowHeight * estimatedRows - legendGap2;
   const tilePositions = computeTilePositions(fullArea.width, tileAreaHeight, 5);
   const tileGridOffsetX = fullArea.x + (fullArea.width - tilePositions.gridWidth) / 2;
   const tileGridOffsetY = fullArea.y;
   const legendX = tileGridOffsetX;
   const legendY = tileGridOffsetY + tilePositions.gridHeight + legendGap2;
   const legendWidth = tilePositions.gridWidth;
+  const legendRows = showLegend ? countLegendRows(legendLabels, legendWidth, legendLabelFontSize) : 0;
+  const legendTotalHeight = showLegend ? legendRowHeight * legendRows : 0;
   const neutralFill = isDarkMode ? "#1e2a30" : "#e0e0e0";
   const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "#d0d0d0";
   const tiles = [];
@@ -15195,7 +15229,7 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
   if (showLegend) {
     const labelStyle = {
       fontFamily: theme.fonts.family,
-      fontSize: 11,
+      fontSize: legendLabelFontSize,
       fontWeight: 400,
       fill: theme.colors.text,
       lineHeight: 1.2
@@ -15208,7 +15242,7 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
     categoricalLegend = {
       type: "categorical",
       position: "bottom",
-      bounds: { x: legendX, y: legendY, width: legendWidth, height: legendRowHeight },
+      bounds: { x: legendX, y: legendY, width: legendWidth, height: legendTotalHeight },
       labelStyle,
       entries,
       swatchSize: LEGEND_SWATCH_SIZE,
@@ -15226,7 +15260,7 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
     keyboardNavigable: tiles.length > 0
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
-  const padding = theme.spacing.padding;
+  const padding = fullArea.x;
   const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
   return {
     area: fullArea,
@@ -15265,27 +15299,32 @@ function buildTileMark(opts) {
   const tileTopY = gridOffsetY + pos.y;
   const textColor = hasData ? pickLabelColor2(fill, isDarkMode) : "#ffffff";
   const isLightText = textColor === "#ffffff";
+  const showValue = tileSize >= 24;
+  const codeFontSize = clamp(Math.round(tileSize * 0.5 * 10) / 10, 6.5, 11);
+  const valueFontSize = clamp(Math.round(tileSize * 0.42 * 10) / 10, 6.5, 10);
   const labelStyle = {
     fontFamily: theme.fonts.family,
-    fontSize: tileSize > 24 ? 10 : 7,
+    fontSize: codeFontSize,
     fontWeight: 700,
     fill: textColor,
     lineHeight: 1.2
   };
   const valueLabelStyle = {
     fontFamily: theme.fonts.family,
-    fontSize: tileSize > 24 ? 10 : 7,
+    fontSize: valueFontSize,
     fontWeight: 300,
     fill: isLightText ? "rgba(255,255,255,0.6)" : "rgba(0,0,0,0.45)",
     lineHeight: 1.2
   };
-  const valueLabel = tileSize < 24 ? { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false } : {
+  const codeCenterY = showValue ? tileTopY + tileSize * 0.28 : tileTopY + tileSize * 0.5;
+  const valueLabel = showValue ? {
     text: formattedValue,
     x: tileCenterX,
     y: tileTopY + tileSize * 0.78,
     style: valueLabelStyle,
     visible: true
-  };
+  } : { text: "", x: 0, y: 0, style: valueLabelStyle, visible: false };
+  const cornerRadius = Math.min(TILE_CORNER_RADIUS, Math.round(tileSize * 0.22));
   const data = {
     state: stateCode,
     value: value2,
@@ -15304,14 +15343,14 @@ function buildTileMark(opts) {
     fillOpacity,
     stroke,
     strokeWidth: TILE_STROKE_WIDTH,
-    cornerRadius: TILE_CORNER_RADIUS,
+    cornerRadius,
     value: value2,
     formattedValue,
     hasData,
     label: {
       text: stateCode,
       x: tileCenterX,
-      y: tileTopY + tileSize * 0.28,
+      y: codeCenterY,
       style: labelStyle,
       visible: true
     },
@@ -15350,6 +15389,22 @@ function buildTooltips(tiles, fieldLabel = "Value") {
 function formatCategoryLabel(category) {
   return category.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
+function countLegendRows(labels, availableWidth, fontSize) {
+  if (labels.length === 0) return 0;
+  let rows = 1;
+  let offsetX = 0;
+  for (let i = 0; i < labels.length; i++) {
+    const labelWidth = estimateTextWidth20(labels[i], fontSize);
+    const entryWidth = LEGEND_SWATCH_SIZE + LEGEND_SWATCH_GAP + labelWidth + LEGEND_ENTRY_GAP;
+    if (i > 0 && offsetX + entryWidth > availableWidth) {
+      rows++;
+      offsetX = entryWidth;
+    } else {
+      offsetX += entryWidth;
+    }
+  }
+  return rows;
+}
 function emptyLayout4(chrome, theme, options, watermark) {
   return {
     area: { x: 0, y: 0, width: 0, height: 0 },
@@ -16165,7 +16220,7 @@ function compileChart(spec, options) {
   if (rawTransforms && rawTransforms.length > 0) {
     chartSpec = { ...chartSpec, data: runTransforms(chartSpec.data, rawTransforms) };
   }
-  const breakpoint = getBreakpoint(options.width);
+  const breakpoint = getBreakpoint2(options.width);
   const heightClass = getHeightClass(options.height);
   let strategy = getLayoutStrategy(breakpoint, heightClass);
   const rawSpec = expandedSpec;