graphein 0.13.0 → 0.14.0

package/dist/index.js

@@ -6073,6 +6073,7 @@ function resolveSketch(spec) {
 
 // src/layout/frame.ts
 var TICK_SIZE = 6;
+var NO_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
 var AXIS_LABEL_GAP = 6;
 var AXIS_TITLE_GAP = 4;
 var LEGEND_SWATCH = 11;
@@ -6691,6 +6692,155 @@ function drawLegend(surface, items, model) {
   }
 }
 
+// src/charts/emphasis.ts
+function rowAlpha(emphasis, row) {
+  if (!emphasis) return 1;
+  return emphasis.match(row) ? 1 : emphasis.dim;
+}
+function seriesEmphasisMode(emphasis, series) {
+  if (!emphasis) return "all";
+  let matched = 0;
+  for (const row of series.rows) if (emphasis.match(row)) matched++;
+  if (matched === 0) return "none";
+  if (matched === series.rows.length) return "all";
+  return "partial";
+}
+
+// src/charts/scatter.ts
+var QUANTIZE_MIN_POINTS = 4e3;
+var QUANTIZE_AREA_DIVISOR = 4;
+var FIXED_RADIUS = 3.75;
+var MIN_SIZED_RADIUS = 3;
+function maxSizedRadius(plotSize) {
+  return clamp(plotSize * 0.05, 10, 26);
+}
+function maxScatterRadius(spec, plotW, plotH) {
+  return spec.encoding.size?.field ? maxSizedRadius(Math.min(plotW, plotH)) : FIXED_RADIUS;
+}
+function isMissing(value) {
+  return value == null || value === "";
+}
+function isInvalidPositionValue(value) {
+  return isMissing(value) || typeof value === "number" && Number.isNaN(value) || value instanceof Date && Number.isNaN(value.getTime());
+}
+function fixedRadius() {
+  return FIXED_RADIUS;
+}
+function shouldQuantize(count, plot, hasSize) {
+  return !hasSize && count > QUANTIZE_MIN_POINTS && count > plot.width * plot.height / QUANTIZE_AREA_DIVISOR;
+}
+function quantizePoints(points) {
+  if (points.length === 0) return [];
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.y > maxY) maxY = p.y;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const keep = [];
+  for (const p of points) {
+    const extentPoint = p.x === minX || p.x === maxX || p.y === minY || p.y === maxY;
+    const ix = Math.round(p.x);
+    const iy = Math.round(p.y);
+    const key = `${p.seriesKey}|${ix}|${iy}`;
+    if (extentPoint || !seen.has(key)) {
+      keep.push(p);
+      seen.add(key);
+    }
+  }
+  return keep;
+}
+function radiusScale(rows, field, plotSize) {
+  const rMin = MIN_SIZED_RADIUS;
+  const rMax = maxSizedRadius(plotSize);
+  const mid = (rMin + rMax) / 2;
+  const domain = extent(rows, field);
+  if (!domain) return () => mid;
+  const [min, max] = domain;
+  if (min === max) return () => mid;
+  return (value) => {
+    const n = toNumber(value);
+    if (Number.isNaN(n)) return rMin;
+    const norm = clamp((n - min) / (max - min), 0, 1);
+    return rMin + (rMax - rMin) * Math.sqrt(norm);
+  };
+}
+function drawScatter(surface, model) {
+  const ctx = surface.marks.ctx;
+  const spec = model.spec;
+  const { plot, tokens } = model;
+  const readX = accessor(model.x.field);
+  const readY = accessor(model.y.field ?? "");
+  const sizeField = spec.encoding.size?.field;
+  const allRows = model.series.flatMap((series) => series.rows);
+  const readSize = sizeField ? accessor(sizeField) : null;
+  const radius = sizeField ? radiusScale(allRows, sizeField, Math.min(plot.width, plot.height)) : fixedRadius;
+  const points = [];
+  for (const series of model.series) {
+    for (const row of series.rows) {
+      const xValue = readX(row);
+      const yValue = readY(row);
+      const yNumber = toNumber(yValue);
+      const px = model.x.pixel(xValue);
+      if (px == null || isInvalidPositionValue(xValue) || isMissing(yValue) || Number.isNaN(yNumber)) {
+        continue;
+      }
+      const py = model.y.pixel(yValue);
+      if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
+      points.push({
+        x: px,
+        y: py,
+        r: readSize ? radius(readSize(row)) : radius(),
+        color: series.color,
+        alpha: rowAlpha(model.emphasis, row),
+        seriesKey: series.key
+      });
+    }
+  }
+  const originalCount = points.length;
+  const drawPoints = shouldQuantize(originalCount, plot, !!sizeField) ? quantizePoints(points) : points;
+  model.markStats = { drawn: drawPoints.length, original: originalCount };
+  if (sizeField) drawPoints.sort((a, b) => b.r - a.r);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(plot.x, plot.y, plot.width, plot.height);
+  ctx.clip();
+  if (model.sketch) {
+    const pen = new RoughPen(ctx, model.sketch);
+    for (const point of drawPoints) {
+      const prev = ctx.globalAlpha;
+      if (point.alpha !== 1) ctx.globalAlpha = point.alpha;
+      pen.circle(point.x, point.y, point.r, {
+        fill: point.color,
+        fillAlpha: 0.7,
+        stroke: tokens.color.background,
+        strokeWidth: 1
+      });
+      if (point.alpha !== 1) ctx.globalAlpha = prev;
+    }
+    ctx.restore();
+    return;
+  }
+  ctx.lineWidth = 1;
+  ctx.strokeStyle = tokens.color.background;
+  for (const point of drawPoints) {
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
+    ctx.fillStyle = point.color;
+    ctx.globalAlpha = 0.7 * point.alpha;
+    ctx.fill();
+    ctx.globalAlpha = point.alpha;
+    ctx.stroke();
+  }
+  ctx.globalAlpha = 1;
+  ctx.restore();
+}
+
 // src/runtime/cartesian.ts
 var CURVES = {
   linear: curveLinear,
@@ -6781,8 +6931,43 @@ function formatNumericTick(value, userFormat) {
   if (userFormat) return formatValue(value, userFormat);
   return formatNumber2(value, ",");
 }
-var DEFAULT_PADDING = { top: 12, right: 16, bottom: 12, left: 12 };
 var LEGEND_SWATCH2 = 11;
+var SCATTER_EDGE_MARGIN = 2;
+var ZERO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+function annotationEdgeInsets(spec, yDomain, fontFamily, fontSize, fontWeight) {
+  const explicit = spec.annotations;
+  const points = Array.isArray(explicit) ? explicit.filter((a) => a.type === "point") : [];
+  for (const a of autoInsightAnnotations(spec)) points.push(a);
+  if (points.length === 0) return ZERO_INSETS;
+  const span = yDomain[1] - yDomain[0] || 1;
+  const font = fontString(fontSize, fontFamily, fontWeight);
+  let maxR = 0;
+  let maxLabelHalf = 0;
+  let anyLabel = false;
+  let maxFy = -Infinity;
+  let minFy = Infinity;
+  for (const ann of points) {
+    const r = ann.markerRadius ?? 3.5;
+    if (r > maxR) maxR = r;
+    if (ann.label) {
+      anyLabel = true;
+      const half = (measureText(ann.label, font).width + 6) / 2;
+      if (half > maxLabelHalf) maxLabelHalf = half;
+    }
+    const yv = toNumber(ann.y);
+    if (!Number.isNaN(yv)) {
+      const fy = (yv - yDomain[0]) / span;
+      if (fy > maxFy) maxFy = fy;
+      if (fy < minFy) minFy = fy;
+    }
+  }
+  const halo = maxR + 1.6;
+  const gap = maxR + 4;
+  const hReserve = Math.ceil(Math.max(maxLabelHalf, halo)) + 2;
+  const top = maxFy >= 0.5 ? Math.ceil(anyLabel ? gap + fontSize : halo) + 2 : 0;
+  const bottom = minFy <= 0.5 ? Math.ceil(halo) + 2 : 0;
+  return { top, right: hReserve, bottom, left: hReserve };
+}
 function legendInteractive(spec) {
   return typeof spec.legend === "object" && spec.legend.interactive === true;
 }
@@ -6947,7 +7132,7 @@ function buildCartesianModel(spec, tokens, opts) {
     color: s.color,
     symbol: spec.type === "scatter" ? "circle" : spec.type === "line" ? "line" : "square"
   }));
-  const padding = { ...DEFAULT_PADDING, ...spec.padding };
+  const padding = { ...NO_PADDING, ...spec.padding };
   const titleInput4 = resolveTitle(spec);
   const categoryAxisInput = {
     show: xShow,
@@ -6990,7 +7175,18 @@ function buildCartesianModel(spec, tokens, opts) {
     };
   }) : void 0;
   const plot = frame.plot;
-  const valueRange = horizontal ? [plot.x, plot.x + plot.width] : [plot.y + plot.height, plot.y];
+  const scatterInset = spec.type === "scatter" ? Math.min(
+    maxScatterRadius(spec, plot.width, plot.height) + SCATTER_EDGE_MARGIN,
+    Math.min(plot.width, plot.height) * 0.4
+  ) : 0;
+  const annIns = horizontal ? ZERO_INSETS : annotationEdgeInsets(spec, yDomain, tokens.font.family, tokens.font.size.small, tokens.font.weight.medium);
+  const capV = plot.height * 0.4;
+  const capH = plot.width * 0.4;
+  const insTop = Math.min(Math.max(scatterInset, annIns.top), capV);
+  const insBottom = Math.min(Math.max(scatterInset, annIns.bottom), capV);
+  const insLeft = Math.min(Math.max(scatterInset, annIns.left), capH);
+  const insRight = Math.min(Math.max(scatterInset, annIns.right), capH);
+  const valueRange = horizontal ? [plot.x + insLeft, plot.x + plot.width - insRight] : [plot.y + plot.height - insBottom, plot.y + insTop];
   const yScale = yIsLog ? logScale({ domain: yDomain, range: valueRange, base: yBase, clamp: yClamp }) : linearScale({ domain: yDomain, range: valueRange, clamp: yClamp });
   const yPixel = (value) => yScale.map(toNumber(value));
   const valueMin = horizontal ? plot.x : plot.y;
@@ -7001,7 +7197,7 @@ function buildCartesianModel(spec, tokens, opts) {
     type: xType,
     categories,
     domainNum: xDomainNum,
-    range: horizontal ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width],
+    range: horizontal ? [plot.y + insTop, plot.y + plot.height - insBottom] : [plot.x + insLeft, plot.x + plot.width - insRight],
     paddingInner: spec.type === "bar" ? 0.2 : spec.type === "box" ? 0.32 : 0.5,
     scaleCfg: enc.x.scale
   });
@@ -7128,21 +7324,32 @@ function maxFinite(values, fallback) {
   return max === -Infinity ? fallback : max;
 }
 
-// src/charts/emphasis.ts
-function rowAlpha(emphasis, row) {
-  if (!emphasis) return 1;
-  return emphasis.match(row) ? 1 : emphasis.dim;
+// src/render/metrics.ts
+function diagonal(plot) {
+  return Math.hypot(plot.width, plot.height);
 }
-function seriesEmphasisMode(emphasis, series) {
-  if (!emphasis) return "all";
-  let matched = 0;
-  for (const row of series.rows) if (emphasis.match(row)) matched++;
-  if (matched === 0) return "none";
-  if (matched === series.rows.length) return "all";
-  return "partial";
+function lineStrokeWidth(plot, base = 2) {
+  return clamp(diagonal(plot) / 260, base, 4.5);
+}
+function markerRadius(plot, count, base = 3) {
+  const bySize = diagonal(plot) / 150;
+  const spacing = plot.width / Math.max(2, count);
+  const bySpace = spacing * 0.34;
+  return clamp(Math.min(bySize, bySpace), Math.min(base, 2.5), 8);
+}
+function markerStroke(radius) {
+  return clamp(radius * 0.32, 1, 2.5);
 }
 
 // src/charts/line.ts
+function maxSeriesLength(allSeries) {
+  let n = 0;
+  for (const s of allSeries) {
+    const finite4 = s.points.filter((p) => !Number.isNaN(p.x) && !Number.isNaN(p.y)).length;
+    if (finite4 > n) n = finite4;
+  }
+  return n;
+}
 function buildSeriesPoints(model, s) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
@@ -7199,7 +7406,7 @@ function finiteRuns(points) {
   if (run.length) runs.push(run);
   return runs;
 }
-function drawLineSketch(ctx, model, allSeries, pen, filled, showPoints) {
+function drawLineSketch(ctx, model, allSeries, pen, filled, showPoints, strokeWidth, markerR, markerSW) {
   if (filled) {
     for (const { series, points, alpha } of allSeries) {
       const prev = ctx.globalAlpha;
@@ -7218,7 +7425,7 @@ function drawLineSketch(ctx, model, allSeries, pen, filled, showPoints) {
   for (const { series, points, alpha } of allSeries) {
     const prev = ctx.globalAlpha;
     if (alpha !== 1) ctx.globalAlpha = alpha;
-    pen.trendStroke(points, { stroke: series.color });
+    pen.trendStroke(points, { stroke: series.color, strokeWidth });
     if (alpha !== 1) ctx.globalAlpha = prev;
   }
   if (showPoints) {
@@ -7227,10 +7434,10 @@ function drawLineSketch(ctx, model, allSeries, pen, filled, showPoints) {
       if (alpha !== 1) ctx.globalAlpha = alpha;
       for (const p of points) {
         if (Number.isNaN(p.x) || Number.isNaN(p.y)) continue;
-        pen.circle(p.x, p.y, 3.4, {
+        pen.circle(p.x, p.y, markerR, {
           fill: series.color,
           stroke: model.tokens.color.background,
-          strokeWidth: 1.5
+          strokeWidth: markerSW
         });
       }
       if (alpha !== 1) ctx.globalAlpha = prev;
@@ -7240,10 +7447,10 @@ function drawLineSketch(ctx, model, allSeries, pen, filled, showPoints) {
     if (mode !== "partial") continue;
     ctx.globalAlpha = 1;
     for (const p of matchPoints) {
-      pen.circle(p.x, p.y, 3.4, {
+      pen.circle(p.x, p.y, markerR, {
         fill: series.color,
         stroke: model.tokens.color.background,
-        strokeWidth: 1.5
+        strokeWidth: markerSW
       });
     }
   }
@@ -7267,12 +7474,15 @@ function drawLine(surface, model) {
     };
   });
   const showPoints = spec.points || allSeries.some((s) => s.points.filter((p) => !Number.isNaN(p.x)).length === 1);
+  const strokeWidth = lineStrokeWidth(plot, Math.max(1.75, tokens.stroke.thick));
+  const markerR = markerRadius(plot, maxSeriesLength(allSeries));
+  const markerSW = markerStroke(markerR);
   ctx.save();
   ctx.beginPath();
   ctx.rect(plot.x, plot.y, plot.width, plot.height);
   ctx.clip();
   if (model.sketch) {
-    drawLineSketch(ctx, model, allSeries, new RoughPen(ctx, model.sketch), Boolean(areaGen), showPoints);
+    drawLineSketch(ctx, model, allSeries, new RoughPen(ctx, model.sketch), Boolean(areaGen), showPoints, strokeWidth, markerR, markerSW);
     ctx.restore();
     return;
   }
@@ -7295,7 +7505,7 @@ function drawLine(surface, model) {
   }
   ctx.lineJoin = "round";
   ctx.lineCap = "round";
-  ctx.lineWidth = Math.max(1.75, tokens.stroke.thick);
+  ctx.lineWidth = strokeWidth;
   for (const { series, points, alpha } of allSeries) {
     ctx.beginPath();
     lineGen(points, ctx);
@@ -7308,12 +7518,12 @@ function drawLine(surface, model) {
     for (const { series, points, alpha } of allSeries) {
       ctx.fillStyle = series.color;
       ctx.strokeStyle = tokens.color.background;
-      ctx.lineWidth = 1.5;
+      ctx.lineWidth = markerSW;
       ctx.globalAlpha = alpha;
       for (const p of points) {
         if (Number.isNaN(p.x) || Number.isNaN(p.y)) continue;
         ctx.beginPath();
-        ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
+        ctx.arc(p.x, p.y, markerR, 0, Math.PI * 2);
         ctx.fill();
         ctx.stroke();
       }
@@ -7324,11 +7534,11 @@ function drawLine(surface, model) {
     if (mode !== "partial") continue;
     ctx.fillStyle = series.color;
     ctx.strokeStyle = tokens.color.background;
-    ctx.lineWidth = 1.5;
+    ctx.lineWidth = markerSW;
     ctx.globalAlpha = 1;
     for (const p of matchPoints) {
       ctx.beginPath();
-      ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
+      ctx.arc(p.x, p.y, markerR, 0, Math.PI * 2);
       ctx.fill();
       ctx.stroke();
     }
@@ -7338,6 +7548,14 @@ function drawLine(surface, model) {
 }
 
 // src/charts/area.ts
+function maxBandLength(bands) {
+  let n = 0;
+  for (const b of bands) {
+    const finite4 = b.points.filter((p) => !Number.isNaN(p.x) && !Number.isNaN(p.y1)).length;
+    if (finite4 > n) n = finite4;
+  }
+  return n;
+}
 function buildBands(model, stacked) {
   const readX = accessor(model.x.field);
   const readY = accessor(model.y.field ?? "");
@@ -7387,7 +7605,7 @@ function buildBands(model, stacked) {
     return { series, points: reduced, alpha: mode === "all" ? 1 : model.emphasis?.dim ?? 1, mode, matchPoints };
   });
 }
-function drawAreaSketch(ctx, model, bands, pen, stacked) {
+function drawAreaSketch(ctx, model, bands, pen, stacked, strokeWidth, markerR, markerSW) {
   for (const { series, points, alpha } of bands) {
     const prev = ctx.globalAlpha;
     if (alpha !== 1) ctx.globalAlpha = alpha;
@@ -7415,7 +7633,7 @@ function drawAreaSketch(ctx, model, bands, pen, stacked) {
     if (alpha !== 1) ctx.globalAlpha = alpha;
     pen.trendStroke(
       points.map((p) => ({ x: p.x, y: p.y1 })),
-      { stroke: series.color }
+      { stroke: series.color, strokeWidth }
     );
     if (alpha !== 1) ctx.globalAlpha = prev;
   }
@@ -7423,10 +7641,10 @@ function drawAreaSketch(ctx, model, bands, pen, stacked) {
     if (mode !== "partial") continue;
     ctx.globalAlpha = 1;
     for (const p of matchPoints) {
-      pen.circle(p.x, p.y, 3.4, {
+      pen.circle(p.x, p.y, markerR, {
         fill: series.color,
         stroke: model.tokens.color.background,
-        strokeWidth: 1.5
+        strokeWidth: markerSW
       });
     }
   }
@@ -7441,12 +7659,15 @@ function drawArea(surface, model) {
   const lineGen = line({ curve });
   const stacked = model.stacked;
   const bands = buildBands(model, stacked);
+  const strokeWidth = lineStrokeWidth(plot, Math.max(1.5, tokens.stroke.base));
+  const markerR = markerRadius(plot, maxBandLength(bands));
+  const markerSW = markerStroke(markerR);
   ctx.save();
   ctx.beginPath();
   ctx.rect(plot.x, plot.y, plot.width, plot.height);
   ctx.clip();
   if (model.sketch) {
-    drawAreaSketch(ctx, model, bands, new RoughPen(ctx, model.sketch), stacked);
+    drawAreaSketch(ctx, model, bands, new RoughPen(ctx, model.sketch), stacked, strokeWidth, markerR, markerSW);
     ctx.restore();
     return;
   }
@@ -7468,7 +7689,7 @@ function drawArea(surface, model) {
   }
   ctx.lineJoin = "round";
   ctx.lineCap = "round";
-  ctx.lineWidth = Math.max(1.5, tokens.stroke.base);
+  ctx.lineWidth = strokeWidth;
   for (const { series, points, alpha } of bands) {
     ctx.beginPath();
     lineGen(
@@ -7484,11 +7705,11 @@ function drawArea(surface, model) {
     if (mode !== "partial") continue;
     ctx.fillStyle = series.color;
     ctx.strokeStyle = tokens.color.background;
-    ctx.lineWidth = 1.5;
+    ctx.lineWidth = markerSW;
     ctx.globalAlpha = 1;
     for (const p of matchPoints) {
       ctx.beginPath();
-      ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
+      ctx.arc(p.x, p.y, markerR, 0, Math.PI * 2);
       ctx.fill();
       ctx.stroke();
     }
@@ -7632,133 +7853,6 @@ function drawBar(surface, model) {
   ctx.restore();
 }
 
-// src/charts/scatter.ts
-var QUANTIZE_MIN_POINTS = 4e3;
-var QUANTIZE_AREA_DIVISOR = 4;
-function isMissing(value) {
-  return value == null || value === "";
-}
-function isInvalidPositionValue(value) {
-  return isMissing(value) || typeof value === "number" && Number.isNaN(value) || value instanceof Date && Number.isNaN(value.getTime());
-}
-function fixedRadius() {
-  return 3.75;
-}
-function shouldQuantize(count, plot, hasSize) {
-  return !hasSize && count > QUANTIZE_MIN_POINTS && count > plot.width * plot.height / QUANTIZE_AREA_DIVISOR;
-}
-function quantizePoints(points) {
-  if (points.length === 0) return [];
-  let minX = Infinity;
-  let maxX = -Infinity;
-  let minY = Infinity;
-  let maxY = -Infinity;
-  for (const p of points) {
-    if (p.x < minX) minX = p.x;
-    if (p.x > maxX) maxX = p.x;
-    if (p.y < minY) minY = p.y;
-    if (p.y > maxY) maxY = p.y;
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const keep = [];
-  for (const p of points) {
-    const extentPoint = p.x === minX || p.x === maxX || p.y === minY || p.y === maxY;
-    const ix = Math.round(p.x);
-    const iy = Math.round(p.y);
-    const key = `${p.seriesKey}|${ix}|${iy}`;
-    if (extentPoint || !seen.has(key)) {
-      keep.push(p);
-      seen.add(key);
-    }
-  }
-  return keep;
-}
-function radiusScale(rows, field, plotSize) {
-  const rMin = 3;
-  const rMax = clamp(plotSize * 0.05, 10, 26);
-  const mid = (rMin + rMax) / 2;
-  const domain = extent(rows, field);
-  if (!domain) return () => mid;
-  const [min, max] = domain;
-  if (min === max) return () => mid;
-  return (value) => {
-    const n = toNumber(value);
-    if (Number.isNaN(n)) return rMin;
-    const norm = clamp((n - min) / (max - min), 0, 1);
-    return rMin + (rMax - rMin) * Math.sqrt(norm);
-  };
-}
-function drawScatter(surface, model) {
-  const ctx = surface.marks.ctx;
-  const spec = model.spec;
-  const { plot, tokens } = model;
-  const readX = accessor(model.x.field);
-  const readY = accessor(model.y.field ?? "");
-  const sizeField = spec.encoding.size?.field;
-  const allRows = model.series.flatMap((series) => series.rows);
-  const readSize = sizeField ? accessor(sizeField) : null;
-  const radius = sizeField ? radiusScale(allRows, sizeField, Math.min(plot.width, plot.height)) : fixedRadius;
-  const points = [];
-  for (const series of model.series) {
-    for (const row of series.rows) {
-      const xValue = readX(row);
-      const yValue = readY(row);
-      const yNumber = toNumber(yValue);
-      const px = model.x.pixel(xValue);
-      if (px == null || isInvalidPositionValue(xValue) || isMissing(yValue) || Number.isNaN(yNumber)) {
-        continue;
-      }
-      const py = model.y.pixel(yValue);
-      if (!Number.isFinite(px) || !Number.isFinite(py)) continue;
-      points.push({
-        x: px,
-        y: py,
-        r: readSize ? radius(readSize(row)) : radius(),
-        color: series.color,
-        alpha: rowAlpha(model.emphasis, row),
-        seriesKey: series.key
-      });
-    }
-  }
-  const originalCount = points.length;
-  const drawPoints = shouldQuantize(originalCount, plot, !!sizeField) ? quantizePoints(points) : points;
-  model.markStats = { drawn: drawPoints.length, original: originalCount };
-  if (sizeField) drawPoints.sort((a, b) => b.r - a.r);
-  ctx.save();
-  ctx.beginPath();
-  ctx.rect(plot.x, plot.y, plot.width, plot.height);
-  ctx.clip();
-  if (model.sketch) {
-    const pen = new RoughPen(ctx, model.sketch);
-    for (const point of drawPoints) {
-      const prev = ctx.globalAlpha;
-      if (point.alpha !== 1) ctx.globalAlpha = point.alpha;
-      pen.circle(point.x, point.y, point.r, {
-        fill: point.color,
-        fillAlpha: 0.7,
-        stroke: tokens.color.background,
-        strokeWidth: 1
-      });
-      if (point.alpha !== 1) ctx.globalAlpha = prev;
-    }
-    ctx.restore();
-    return;
-  }
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = tokens.color.background;
-  for (const point of drawPoints) {
-    ctx.beginPath();
-    ctx.arc(point.x, point.y, point.r, 0, Math.PI * 2);
-    ctx.fillStyle = point.color;
-    ctx.globalAlpha = 0.7 * point.alpha;
-    ctx.fill();
-    ctx.globalAlpha = point.alpha;
-    ctx.stroke();
-  }
-  ctx.globalAlpha = 1;
-  ctx.restore();
-}
-
 // src/charts/box.ts
 function quantileSorted(sorted, p) {
   const n = sorted.length;
@@ -8003,7 +8097,7 @@ function buildBoxInteraction(model) {
 }
 
 // src/charts/chrome.ts
-var CHROME_PAD = { top: 14, right: 16, bottom: 14, left: 16 };
+var CHROME_PAD = { top: 0, right: 0, bottom: 0, left: 0 };
 function resolveTitle2(title2) {
   if (typeof title2 === "string") return { text: title2, align: "left" };
   if (title2 && typeof title2 === "object") {
@@ -9905,7 +9999,7 @@ function layout(graph, area2, nodeWidth, pad3) {
   const kx = maxLayer > 0 ? (area2.width - nodeWidth) / maxLayer : 0;
   const maxColumnSize = columns.reduce((m, col) => Math.max(m, col.length), 0);
   const desiredPad = Math.max(0, pad3);
-  const effectivePad = maxColumnSize > 1 && desiredPad * (maxColumnSize - 1) >= area2.height && area2.height > 0 ? area2.height * 0.25 / (maxColumnSize - 1) : desiredPad;
+  const effectivePad = maxColumnSize > 1 ? Math.min(desiredPad, area2.height * 0.35 / (maxColumnSize - 1)) : desiredPad;
   for (const col of columns) {
     for (const n of col) {
       n.x0 = area2.x + n.layer * kx;
@@ -10027,15 +10121,24 @@ function drawSankey(surface, spec, tokens, size) {
   const graph = buildGraph(sankey, tokens.color.palette);
   if (graph.nodes.length === 0 || content.width <= 0 || content.height <= 0) return;
   const labelFont = fontString(f.size.small, f.family, f.weight.medium);
-  let maxLabel = 0;
-  for (const n of graph.nodes) maxLabel = Math.max(maxLabel, measureText(n.name, labelFont).width);
-  const gutter = Math.min(maxLabel + 12, content.width * 0.24);
+  const valueFont = fontString(f.size.tiny, f.family, f.weight.normal);
+  const showValues = sankey.nodeValues !== false;
+  const labelExtent = (n) => {
+    const nameW = measureText(n.name, labelFont).width;
+    const valW = showValues ? measureText(formatValue(n.value, sankey.encoding.value.format), valueFont).width : 0;
+    return Math.max(nameW, valW);
+  };
+  const colExtent = (col) => col.reduce((m, n) => Math.max(m, labelExtent(n)), 0);
+  const LABEL_GAP = 6;
+  const capGutter = content.width * 0.3;
+  const leftGutter = Math.min(colExtent(graph.columns[0] ?? []) + LABEL_GAP + 4, capGutter);
+  const rightGutter = graph.maxLayer > 0 ? Math.min(colExtent(graph.columns[graph.maxLayer] ?? []) + LABEL_GAP + 4, capGutter) : 0;
   const nodeWidth = sankey.nodeWidth ?? 16;
   const pad3 = sankey.nodePadding ?? 14;
   const area2 = {
-    x: content.x + gutter,
+    x: content.x + leftGutter,
     y: content.y + 4,
-    width: Math.max(10, content.width - gutter * 2),
+    width: Math.max(10, content.width - leftGutter - rightGutter),
     height: Math.max(10, content.height - 8)
   };
   layout(graph, area2, nodeWidth, pad3);
@@ -10059,12 +10162,13 @@ function drawSankey(surface, spec, tokens, size) {
     }
   }
   ctx.restore();
-  const showValues = sankey.nodeValues !== false;
   const mid = area2.x + area2.width / 2;
   for (const n of graph.nodes) {
-    const labelRight = n.x0 < mid;
+    const outerLeft = n.layer === 0;
+    const outerRight = n.layer === graph.maxLayer && graph.maxLayer > 0;
+    const labelRight = outerRight ? true : outerLeft ? false : n.x0 < mid;
     const cy = center(n);
-    const left = labelRight ? n.x1 + 6 : n.x0 - 6;
+    const left = labelRight ? n.x1 + LABEL_GAP : n.x0 - LABEL_GAP;
     const transform2 = labelRight ? "translateY(-50%)" : "translate(-100%,-50%)";
     addOverlayText(surface, tokens, {
       left,
@@ -13422,7 +13526,6 @@ function scatterInteraction(model) {
 }
 
 // src/runtime/combo.ts
-var DEFAULT_PADDING2 = { top: 12, right: 16, bottom: 12, left: 12 };
 function fmtTick(v, f) {
   return f ? formatValue(v, f) : formatNumber2(v, ",");
 }
@@ -13608,7 +13711,7 @@ function buildComboModel(spec, tokens, opts) {
   const legendPosition = typeof spec.legend === "object" && spec.legend.position || (legendItems.length > 8 ? "right" : "top");
   const xShow = xAxisCfg.show !== false;
   const yShow = spec.axes?.y?.show !== false;
-  const padding = { ...DEFAULT_PADDING2, ...spec.padding };
+  const padding = { ...NO_PADDING, ...spec.padding };
   const titleInput4 = typeof spec.title === "string" ? { text: spec.title } : spec.title ? { text: spec.title.text, subtitle: spec.title.subtitle } : void 0;
   const frame = computeFrame({
     width: opts.width,
@@ -13830,7 +13933,6 @@ function renderLayer(surface, lm) {
 }
 
 // src/runtime/histogram.ts
-var DEFAULT_PADDING3 = { top: 12, right: 16, bottom: 12, left: 12 };
 function firstPaletteColor(tokens) {
   return rgbaToCss(ordinalColorScale({ domain: ["0"], palette: tokens.color.palette }).map("0"));
 }
@@ -13882,7 +13984,7 @@ function buildHistogramModel(spec, tokens, opts) {
   const xLabels = xTickValues.map((v) => xFmt ? formatValue(v, xFmt) : formatNumber2(v, ","));
   const yFmt = spec.axes?.y?.format ?? (spec.density ? ".3~f" : void 0);
   const yLabels = yTickValues.map((v) => yFmt ? formatValue(v, yFmt) : formatNumber2(v, ","));
-  const padding = { ...DEFAULT_PADDING3, ...spec.padding };
+  const padding = { ...NO_PADDING, ...spec.padding };
   const titleInput4 = typeof spec.title === "string" ? { text: spec.title } : spec.title ? { text: spec.title.text, subtitle: spec.title.subtitle } : void 0;
   const xShow = spec.axes?.x?.show !== false;
   const yShow = spec.axes?.y?.show !== false;
@@ -14088,6 +14190,12 @@ function labelFor(value) {
   const key = toKey(value);
   return key === "" ? "(blank)" : key;
 }
+function textureShade(fill) {
+  const lum = (0.299 * fill.r + 0.587 * fill.g + 0.114 * fill.b) / 255;
+  const k = lum > 0.5 ? 0.68 : 1.4;
+  const c = (n) => Math.max(0, Math.min(255, Math.round(n * k)));
+  return rgbaToCss({ r: c(fill.r), g: c(fill.g), b: c(fill.b), a: 1 });
+}
 function buildLeaves(treemap) {
   const readCategory = accessor(treemap.encoding.category.field);
   const readValue = accessor(treemap.encoding.value.field);
@@ -14171,13 +14279,20 @@ function tileProbe(treemap, tile) {
   if (groupField) probe[groupField] = tile.group;
   return probe;
 }
-function drawRect2(ctx, pen, rect, fill, stroke) {
+function drawRect2(ctx, pen, rect, fill, fillCss, stroke) {
   if (rect.width <= 0 || rect.height <= 0) return;
   if (pen) {
-    pen.rect(rect.x, rect.y, rect.width, rect.height, { fill, stroke, fillStyle: "solid" });
+    pen.rect(rect.x, rect.y, rect.width, rect.height, { fill: fillCss, fillStyle: "solid" });
+    pen.rect(rect.x, rect.y, rect.width, rect.height, {
+      fill: textureShade(fill),
+      fillStyle: "hachure",
+      fillAlpha: 0.4,
+      hachureGap: 7,
+      stroke
+    });
     return;
   }
-  ctx.fillStyle = fill;
+  ctx.fillStyle = fillCss;
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
   ctx.strokeStyle = stroke;
   ctx.lineWidth = 1;
@@ -14247,7 +14362,7 @@ function drawTreemap(surface, spec, tokens, size, context) {
   const drawTile = (tile) => {
     const alpha = emphasis ? emphasis.match(tileProbe(treemap, tile)) ? 1 : emphasis.dim : 1;
     if (alpha !== 1) ctx.globalAlpha = alpha;
-    drawRect2(ctx, pen, tile.rect, tile.fillCss, stroke);
+    drawRect2(ctx, pen, tile.rect, tile.fill, tile.fillCss, stroke);
     if (alpha !== 1) ctx.globalAlpha = 1;
   };
   ctx.save();
@@ -14284,11 +14399,13 @@ function drawTreemap(surface, spec, tokens, size, context) {
         ctx.strokeRect(rect.x + 0.5, rect.y + 0.5, Math.max(0, rect.width - 1), Math.max(0, rect.height - 1));
       }
       if (headerH > 0) {
+        const headerFont = fontString(tokens.font.size.tiny, tokens.font.family, tokens.font.weight.bold);
+        const headerW = Math.max(0, rect.width - 10);
         addOverlayText(surface, tokens, {
           left: rect.x + 5,
           top: rect.y + 4,
-          width: Math.max(0, rect.width - 10),
-          text: group.label,
+          width: headerW,
+          text: ellipsize(group.label, headerW, headerFont),
           color: tokens.color.text,
           size: tokens.font.size.tiny,
           weight: tokens.font.weight.bold,
@@ -14497,12 +14614,11 @@ function drawGauge(surface, spec, tokens, size, context) {
   const legendFont = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const legendW = legendEntries.length ? measureLegendWidth(legendEntries, legendFont) + 12 : 0;
   const dialW = Math.max(40, content.width - legendW);
-  const radius = clamp8(
-    Math.min((dialW - 16) / 2, content.height - captionReserve - 16),
-    18,
-    Math.min(dialW, content.height * 2)
-  );
-  const trackWidth = clamp8(radius * 0.17, 14, 54);
+  const availH = Math.max(0, content.height - captionReserve);
+  const provR = Math.max(18, Math.min(dialW / 2, availH));
+  const trackWidth = clamp8(provR * 0.17, 14, 54);
+  const edgeGuard = trackWidth / 2 + clamp8(trackWidth * 0.3, 4, 10) + 1;
+  const radius = Math.max(18, Math.min(provR, dialW / 2 - edgeGuard, availH - edgeGuard));
   const cx = content.x + dialW / 2;
   const blockH = radius + trackWidth / 2 + captionReserve;
   const topMargin = Math.max(0, (content.height - blockH) / 2);
@@ -14645,10 +14761,7 @@ function drawBullet(surface, spec, tokens, size, context) {
   }
   const labelFont = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.bold);
   const valueFont = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
-  const labelW = Math.min(
-    Math.max(72, content.width * 0.18, measureText(caption, labelFont).width + 18),
-    Math.max(72, content.width * 0.38)
-  );
+  const labelW = clamp9(measureText(caption, labelFont).width + 14, 44, Math.max(72, content.width * 0.4));
   const axisReserve = Math.max(24, tokens.font.size.tiny * 2);
   const availableTrackW = Math.max(0, content.width - labelW);
   const trackW = Math.max(0, availableTrackW - 4);
@@ -14766,7 +14879,6 @@ function drawBullet(surface, spec, tokens, size, context) {
 // src/charts/calendarHeatmap.ts
 var DAY_MS2 = 864e5;
 var GAP2 = 2;
-var MAX_CELL = 16;
 var WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 function pad22(n) {
@@ -14789,9 +14901,9 @@ function addDays(date, days) {
   d.setDate(d.getDate() + days);
   return d;
 }
-function drawRoundedCell2(ctx, x, y, size, radius) {
+function drawRoundedCell2(ctx, x, y, w, h, radius) {
   ctx.beginPath();
-  roundedRect(ctx, x, y, size, size, radius);
+  roundedRect(ctx, x, y, w, h, radius);
   ctx.fill();
 }
 function noData(surface, tokens, content) {
@@ -14902,16 +15014,26 @@ function drawCalendarHeatmap(surface, spec, tokens, size, context) {
   const labelHeight = Math.ceil(labelSize * 1.7) + 2;
   const availableW = Math.max(0, content.width - leftGutter);
   const availableH = Math.max(0, content.height - labelHeight);
-  const cell = Math.floor(Math.min(MAX_CELL, (availableW - GAP2 * Math.max(0, grid.weeks - 1)) / grid.weeks, (availableH - GAP2 * 6) / 7));
-  if (!Number.isFinite(cell) || cell <= 0) {
+  const MAX_ASPECT = 1.75;
+  const rawW = (availableW - GAP2 * Math.max(0, grid.weeks - 1)) / grid.weeks;
+  const rawH = (availableH - GAP2 * 6) / 7;
+  const cellW = Math.floor(Math.max(1, Math.min(rawW, rawH * MAX_ASPECT)));
+  const cellH = Math.floor(Math.max(1, Math.min(rawH, rawW * MAX_ASPECT)));
+  if (!Number.isFinite(cellW) || !Number.isFinite(cellH) || cellW <= 0 || cellH <= 0) {
     noData(surface, tokens, content);
     return;
   }
+  const stepX = cellW + GAP2;
+  const stepY = cellH + GAP2;
+  const gridW = grid.weeks * cellW + Math.max(0, grid.weeks - 1) * GAP2;
+  const gridH = 7 * cellH + 6 * GAP2;
+  const vpad = Math.max(0, (availableH - gridH) / 2);
+  const hpad = Math.max(0, (availableW - gridW) / 2);
   const gridRect = {
-    x: content.x + leftGutter,
-    y: content.y + labelHeight,
-    width: grid.weeks * cell + Math.max(0, grid.weeks - 1) * GAP2,
-    height: 7 * cell + 6 * GAP2
+    x: content.x + leftGutter + hpad,
+    y: content.y + labelHeight + vpad,
+    width: gridW,
+    height: gridH
   };
   const values = days.map((d) => d.value);
   const min = Math.min(...values);
@@ -14920,35 +15042,35 @@ function drawCalendarHeatmap(surface, spec, tokens, size, context) {
   const cscale = sequentialColorScale({ domain: [min, max], interpolator: interp });
   const sketch = resolveSketch(spec);
   const pen = sketch ? new RoughPen(ctx, sketch) : null;
-  const radius = Math.min(3, tokens.radius.sm, cell / 3);
+  const radius = Math.min(3, tokens.radius.sm, Math.min(cellW, cellH) / 3);
   const laidOut = /* @__PURE__ */ new Map();
   ctx.save();
   for (const c of grid.cells) {
-    const x = gridRect.x + c.week * (cell + GAP2);
-    const y = gridRect.y + c.weekday * (cell + GAP2);
+    const x = gridRect.x + c.week * stepX;
+    const y = gridRect.y + c.weekday * stepY;
     const fill = c.present && c.value !== void 0 ? rgbaToCss(cscale.map(c.value)) : tokens.color.surface;
-    laidOut.set(c.isoDate, { ...c, x, y, size: cell, fill });
+    laidOut.set(c.isoDate, { ...c, x, y, w: cellW, h: cellH, fill });
     ctx.globalAlpha = c.present ? rowAlpha(emphasis, c.row ?? { [dateField]: c.isoDate }) : 1;
     if (pen) {
-      pen.rect(x, y, cell, cell, {
+      pen.rect(x, y, cellW, cellH, {
         fill,
         fillStyle: "solid",
         stroke: c.present ? fill : tokens.color.border
       });
     } else {
       ctx.fillStyle = fill;
-      drawRoundedCell2(ctx, x, y, cell, radius);
+      drawRoundedCell2(ctx, x, y, cellW, cellH, radius);
       ctx.strokeStyle = tokens.color.border;
       ctx.lineWidth = 1;
-      ctx.strokeRect(x + 0.5, y + 0.5, Math.max(0, cell - 1), Math.max(0, cell - 1));
+      ctx.strokeRect(x + 0.5, y + 0.5, Math.max(0, cellW - 1), Math.max(0, cellH - 1));
     }
     ctx.globalAlpha = 1;
   }
   ctx.restore();
   for (const m of monthAnchors(grid)) {
     addOverlayText(surface, tokens, {
-      left: gridRect.x + m.week * (cell + GAP2),
-      top: content.y,
+      left: gridRect.x + m.week * stepX,
+      top: gridRect.y - labelHeight,
       text: m.label,
       color: tokens.color.textMuted,
       size: labelSize
@@ -14957,7 +15079,7 @@ function drawCalendarHeatmap(surface, spec, tokens, size, context) {
   for (const weekday of [1, 3, 5]) {
     addOverlayText(surface, tokens, {
       left: content.x,
-      top: gridRect.y + weekday * (cell + GAP2) + cell / 2,
+      top: gridRect.y + weekday * stepY + cellH / 2,
       width: Math.max(0, leftGutter - tokens.spacing.xs),
       text: WEEKDAY_LABELS[weekday],
       color: tokens.color.textMuted,
@@ -14969,11 +15091,11 @@ function drawCalendarHeatmap(surface, spec, tokens, size, context) {
   const colorLabel = cal.encoding.color.title ?? cal.encoding.color.field;
   const hitCell = (px, py) => {
     if (px < gridRect.x || py < gridRect.y || px > gridRect.x + gridRect.width || py > gridRect.y + gridRect.height) return null;
-    const week = Math.floor((px - gridRect.x) / (cell + GAP2));
-    const weekday = Math.floor((py - gridRect.y) / (cell + GAP2));
-    const x = gridRect.x + week * (cell + GAP2);
-    const y = gridRect.y + weekday * (cell + GAP2);
-    if (week < 0 || week >= grid.weeks || weekday < 0 || weekday > 6 || px > x + cell || py > y + cell) return null;
+    const week = Math.floor((px - gridRect.x) / stepX);
+    const weekday = Math.floor((py - gridRect.y) / stepY);
+    const x = gridRect.x + week * stepX;
+    const y = gridRect.y + weekday * stepY;
+    if (week < 0 || week >= grid.weeks || weekday < 0 || weekday > 6 || px > x + cellW || py > y + cellH) return null;
     const match = grid.cells.find((c) => c.week === week && c.weekday === weekday);
     if (!match || !match.present) return null;
     return laidOut.get(match.isoDate) ?? null;
@@ -15002,7 +15124,6 @@ function drawCalendarHeatmap(surface, spec, tokens, size, context) {
 }
 
 // src/runtime/waterfall.ts
-var DEFAULT_PADDING4 = { top: 12, right: 16, bottom: 12, left: 12 };
 function labelFor2(value) {
   if (value == null) return "";
   if (value instanceof Date) return value.toISOString().slice(0, 10);
@@ -15110,7 +15231,7 @@ function buildWaterfallModel(spec, tokens, opts) {
   const fmt = spec.encoding.value.format ?? spec.axes?.y?.format;
   const yLabels = yTickValues.map((v) => fmt ? formatValue(v, fmt) : formatNumber2(v, ","));
   const categories = bars.map((b) => b.label);
-  const padding = { ...DEFAULT_PADDING4, ...spec.padding };
+  const padding = { ...NO_PADDING, ...spec.padding };
   const xShow = spec.axes?.x?.show !== false;
   const yShow = spec.axes?.y?.show !== false;
   const xTitle = spec.axes?.x?.title ?? spec.encoding.stage.title;
@@ -15351,7 +15472,6 @@ function drawWaterfall(surface, spec, tokens, size, context) {
 }
 
 // src/runtime/slope.ts
-var DEFAULT_PADDING5 = { top: 16, right: 76, bottom: 26, left: 76 };
 function labelFor3(value) {
   if (value == null) return "";
   if (value instanceof Date) return value.toISOString().slice(0, 10);
@@ -15387,7 +15507,44 @@ function buildSlopeModel(spec, tokens, opts) {
   ];
   const fmt = spec.format ?? spec.encoding.y.format ?? spec.axes?.y?.format;
   const yLabels = yTickValues.map((v) => fmtTick2(v, fmt));
-  const padding = { ...DEFAULT_PADDING5, ...spec.padding };
+  const grouped = /* @__PURE__ */ new Map();
+  for (const row of data) {
+    const rawSeries = readSeries(row);
+    const key = toKey(rawSeries);
+    let group = grouped.get(key);
+    if (!group) {
+      group = { key, label: labelFor3(rawSeries), value: rawSeries, values: /* @__PURE__ */ new Map() };
+      grouped.set(key, group);
+    }
+    const rawX = readX(row);
+    const catKey = labelFor3(rawX);
+    const value = toNumber(readY(row));
+    if (!Number.isNaN(value) && !group.values.has(catKey)) group.values.set(catKey, value);
+  }
+  const showLabels = spec.labels !== false;
+  let leftLabelW = 0;
+  let rightLabelW = 0;
+  if (showLabels) {
+    const boldTiny = fontString(tokens.font.size.tiny, tokens.font.family, tokens.font.weight.bold);
+    const normTiny = fontString(tokens.font.size.tiny, tokens.font.family, tokens.font.weight.normal);
+    for (const group of grouped.values()) {
+      const present = categories.filter((c) => group.values.has(c));
+      if (present.length === 0) continue;
+      const firstV = group.values.get(present[0]);
+      const lastV = group.values.get(present[present.length - 1]);
+      leftLabelW = Math.max(
+        leftLabelW,
+        measureText(group.label, boldTiny).width,
+        measureText(fmtTick2(firstV, fmt), normTiny).width
+      );
+      rightLabelW = Math.max(rightLabelW, measureText(fmtTick2(lastV, fmt), normTiny).width);
+    }
+    leftLabelW = Math.ceil(leftLabelW);
+    rightLabelW = Math.ceil(rightLabelW);
+  }
+  const labelBand = tokens.font.size.tiny + 4;
+  const basePadding = showLabels ? { top: labelBand, right: rightLabelW + 8, bottom: labelBand, left: leftLabelW + 8 } : { top: 0, right: 0, bottom: 0, left: 0 };
+  const padding = { ...basePadding, ...spec.padding };
   const xShow = spec.axes?.x?.show !== false;
   const yShow = spec.axes?.y?.show === true;
   const xTitle = spec.axes?.x?.title ?? spec.encoding.x.title;
@@ -15404,20 +15561,6 @@ function buildSlopeModel(spec, tokens, opts) {
   const plot = frame.plot;
   const point = pointScale({ domain: categories, range: [plot.x, plot.x + plot.width], padding: 0.5 });
   const yScale = linearScale({ domain: yDomain, range: [plot.y + plot.height, plot.y] });
-  const grouped = /* @__PURE__ */ new Map();
-  for (const row of data) {
-    const rawSeries = readSeries(row);
-    const key = toKey(rawSeries);
-    let group = grouped.get(key);
-    if (!group) {
-      group = { key, label: labelFor3(rawSeries), value: rawSeries, values: /* @__PURE__ */ new Map() };
-      grouped.set(key, group);
-    }
-    const rawX = readX(row);
-    const catKey = labelFor3(rawX);
-    const value = toNumber(readY(row));
-    if (!Number.isNaN(value) && !group.values.has(catKey)) group.values.set(catKey, value);
-  }
   const palette = ordinalColorScale({ domain: [...grouped.keys()], palette: tokens.color.palette });
   const series = [...grouped.values()].map((group) => {
     const points = categories.map((catKey) => {
@@ -15486,7 +15629,9 @@ function buildSlopeModel(spec, tokens, opts) {
     series,
     categories,
     format: fmt,
-    showLabels: spec.labels !== false,
+    showLabels,
+    leftLabelW,
+    rightLabelW,
     base,
     sketch
   };
@@ -15494,13 +15639,15 @@ function buildSlopeModel(spec, tokens, opts) {
 
 // src/charts/slope.ts
 var HIT_RADIUS2 = 8;
-var LABEL_WIDTH = 68;
 function fmtValue(v, format) {
   return format ? formatValue(v, format) : formatNumber2(v, ",");
 }
 function drawLines(surface, model, alphaOf) {
   const ctx = surface.marks.ctx;
   const pen = model.sketch ? new RoughPen(ctx, model.sketch) : null;
+  const strokeW = lineStrokeWidth(model.plot);
+  const dotR = Math.min(6, markerRadius(model.plot, 2));
+  const dotSW = markerStroke(dotR);
   ctx.save();
   ctx.beginPath();
   ctx.rect(model.plot.x, model.plot.y, model.plot.width, model.plot.height);
@@ -15510,11 +15657,11 @@ function drawLines(surface, model, alphaOf) {
     if (points.length === 0) continue;
     ctx.globalAlpha = alphaOf(series);
     if (pen && points.length >= 2) {
-      pen.polyline(points, { stroke: series.color });
+      pen.polyline(points, { stroke: series.color, strokeWidth: strokeW });
     } else if (points.length >= 2) {
       ctx.beginPath();
       ctx.strokeStyle = series.color;
-      ctx.lineWidth = 2;
+      ctx.lineWidth = strokeW;
       ctx.lineJoin = "round";
       ctx.lineCap = "round";
       ctx.moveTo(points[0].x, points[0].y);
@@ -15523,13 +15670,13 @@ function drawLines(surface, model, alphaOf) {
     }
     for (const p of points) {
       if (pen) {
-        pen.circle(p.x, p.y, 3.5, { fill: series.color, stroke: series.color });
+        pen.circle(p.x, p.y, dotR, { fill: series.color, stroke: series.color });
       } else {
         ctx.beginPath();
         ctx.fillStyle = series.color;
         ctx.strokeStyle = model.tokens.color.background;
-        ctx.lineWidth = 1.5;
-        ctx.arc(p.x, p.y, 3.5, 0, Math.PI * 2);
+        ctx.lineWidth = dotSW;
+        ctx.arc(p.x, p.y, dotR, 0, Math.PI * 2);
         ctx.fill();
         ctx.stroke();
       }
@@ -15543,15 +15690,17 @@ function drawEndLabels(surface, model, alphaOf) {
   const { tokens } = model;
   const labelSize = tokens.font.size.tiny;
   const valueSize = tokens.font.size.tiny;
+  const leftW = model.leftLabelW;
+  const rightW = model.rightLabelW;
   for (const series of model.series) {
     if (series.points.length === 0) continue;
     const opacity = alphaOf(series) === 1 ? 1 : 0.5;
     const first = series.points[0];
     const last = series.points[series.points.length - 1];
     addOverlayText(surface, tokens, {
-      left: first.x - 8 - LABEL_WIDTH,
+      left: first.x - 8 - leftW,
       top: first.y - labelSize - 2,
-      width: LABEL_WIDTH,
+      width: leftW,
       text: series.label,
       color: series.color,
       size: labelSize,
@@ -15560,9 +15709,9 @@ function drawEndLabels(surface, model, alphaOf) {
       opacity
     });
     addOverlayText(surface, tokens, {
-      left: first.x - 8 - LABEL_WIDTH,
+      left: first.x - 8 - leftW,
       top: first.y + 1,
-      width: LABEL_WIDTH,
+      width: leftW,
       text: fmtValue(first.value, model.format),
       color: tokens.color.textMuted,
       size: valueSize,
@@ -15573,7 +15722,7 @@ function drawEndLabels(surface, model, alphaOf) {
       addOverlayText(surface, tokens, {
         left: last.x + 8,
         top: last.y - valueSize / 2,
-        width: LABEL_WIDTH,
+        width: rightW,
         text: fmtValue(last.value, model.format),
         color: series.color,
         size: valueSize,
@@ -15747,7 +15896,7 @@ function measureMax2(labels, font) {
 function valueLabel(value, format) {
   return format ? formatValue(value, format) : formatNumber2(value, ",");
 }
-function drawConnector(ctx, pen, x1, x2, y, tokens) {
+function drawConnector(ctx, pen, x1, x2, y, width, tokens) {
   if (pen) {
     pen.polyline(
       [
@@ -15763,13 +15912,12 @@ function drawConnector(ctx, pen, x1, x2, y, tokens) {
   ctx.moveTo(x1, y);
   ctx.lineTo(x2, y);
   ctx.strokeStyle = tokens.color.axis;
-  ctx.lineWidth = 3;
+  ctx.lineWidth = width;
   ctx.lineCap = "round";
   ctx.stroke();
   ctx.restore();
 }
-function drawDot(ctx, pen, x, y, color, tokens) {
-  const r = 5;
+function drawDot(ctx, pen, x, y, r, color, tokens) {
   if (pen) {
     pen.circle(x, y, r + 1.5, { fill: tokens.color.background, stroke: tokens.color.background });
     pen.circle(x, y, r, { fill: color, stroke: tokens.color.background });
@@ -15780,16 +15928,16 @@ function drawDot(ctx, pen, x, y, color, tokens) {
   ctx.arc(x, y, r, 0, Math.PI * 2);
   ctx.fillStyle = color;
   ctx.fill();
-  ctx.lineWidth = 1.5;
+  ctx.lineWidth = Math.max(1.5, r * 0.3);
   ctx.strokeStyle = tokens.color.background;
   ctx.stroke();
   ctx.restore();
 }
-function layoutPlot(content, labelWidth, tokens) {
+function layoutPlot(content, labelWidth, rightReserve, tokens) {
   const leftGutter = Math.ceil(Math.min(content.width * 0.3, Math.max(42, labelWidth + tokens.spacing.sm)));
   const axisHeight = 28;
   const topPad = Math.min(6, CHROME_PAD.top / 2);
-  const rightPad = 8;
+  const rightPad = Math.max(8, Math.ceil(rightReserve));
   return {
     leftGutter,
     axisHeight,
@@ -15824,7 +15972,16 @@ function drawDumbbell(surface, spec, tokens, size, context) {
   }
   const labelFont = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const widestCategory = measureMax2(model.rows.map((row) => row.catLabel), labelFont);
-  const { plot, leftGutter } = layoutPlot(content, widestCategory, tokens);
+  let valueReserve = 0;
+  if (dumbbell.labels) {
+    const valueFont = fontString(tokens.font.size.tiny, tokens.font.family, tokens.font.weight.normal);
+    const widestValue = measureMax2(
+      model.rows.flatMap((row) => row.dots.map((dot) => formatDumbbellValue(dot.value, model.format))),
+      valueFont
+    );
+    valueReserve = Math.min(content.width * 0.2, widestValue + 9);
+  }
+  const { plot, leftGutter } = layoutPlot(content, widestCategory, valueReserve, tokens);
   if (plot.width <= 8 || plot.height <= 8) return;
   const xScale = linearScale({ domain: model.valueDomain, range: [plot.x, plot.x + plot.width] });
   const yBand = bandScale({ domain: model.categories, range: [plot.y, plot.y + plot.height], paddingInner: 0.45, paddingOuter: 0.25 });
@@ -15851,6 +16008,9 @@ function drawDumbbell(surface, spec, tokens, size, context) {
   }
   ctx.restore();
   const pixelRows = [];
+  const dotR = Math.max(4, Math.min(13, yBand.bandwidth * 0.16));
+  const connectorW = Math.max(3, Math.min(9, dotR * 0.7));
+  const labelGap = Math.round(dotR + 4);
   for (const row of model.rows) {
     const bandTop = yBand.map(row.catKey);
     if (bandTop === void 0) continue;
@@ -15868,8 +16028,8 @@ function drawDumbbell(surface, spec, tokens, size, context) {
     if (pixelDots.length === 0) continue;
     pixelRows.push({ ...row, y: cy, pixelDots });
     ctx.globalAlpha = rowAlpha(emphasis, { [categoryField]: row.catRawValue });
-    drawConnector(ctx, pen, pixelDots[0].x, pixelDots[pixelDots.length - 1].x, cy, tokens);
-    for (const dot of pixelDots) drawDot(ctx, pen, dot.x, cy, dot.color, tokens);
+    drawConnector(ctx, pen, pixelDots[0].x, pixelDots[pixelDots.length - 1].x, cy, connectorW, tokens);
+    for (const dot of pixelDots) drawDot(ctx, pen, dot.x, cy, dotR, dot.color, tokens);
     ctx.globalAlpha = 1;
     addOverlayText(surface, tokens, {
       left: content.x,
@@ -15886,7 +16046,7 @@ function drawDumbbell(surface, spec, tokens, size, context) {
         const dot = pixelDots[i];
         const atLeft = i === 0 && pixelDots.length > 1;
         addOverlayText(surface, tokens, {
-          left: atLeft ? dot.x - 7 : dot.x + 7,
+          left: atLeft ? dot.x - labelGap : dot.x + labelGap,
           top: cy,
           width: 54,
           text: formatDumbbellValue(dot.value, model.format),
@@ -16074,10 +16234,13 @@ function labelBox(model, horizontalRule, pos, p) {
   const inset = 6;
   if (horizontalRule) {
     const top = p - 3;
-    const transform3 = "translateY(-100%)";
-    if (pos === "start") return { left: plot.x + inset, top, width: plot.width - inset, align: "left", transform: transform3 };
-    if (pos === "middle") return { left: plot.x, top, width: plot.width, align: "center", transform: transform3 };
-    return { left: plot.x, top, width: plot.width - inset, align: "right", transform: transform3 };
+    if (pos === "start") {
+      return { left: plot.x + inset, top, align: "left", transform: "translateY(-100%)" };
+    }
+    if (pos === "middle") {
+      return { left: plot.x + plot.width / 2, top, align: "center", transform: "translateX(-50%) translateY(-100%)" };
+    }
+    return { left: plot.x + plot.width - inset, top, align: "right", transform: "translateX(-100%) translateY(-100%)" };
   }
   const left = p;
   const transform2 = "translateX(-50%)";
@@ -16252,7 +16415,8 @@ function drawTrendlineLabels(surface, model) {
     const y1 = model.y.pixel(g.fit.predict(g.xMax));
     if (x1 == null || !Number.isFinite(x1) || !Number.isFinite(y1)) continue;
     const text = `R\xB2=${g.fit.r2.toFixed(2)}`;
-    const nearRight = x1 > plot.x + plot.width - 44;
+    const labelW = measureText(text, font).width;
+    const nearRight = x1 + 6 + labelW > plot.x + plot.width;
     const left = nearRight ? x1 - 6 : x1 + 6;
     const align = nearRight ? "right" : "left";
     const transform2 = nearRight ? "translateX(-100%) translateY(-50%)" : "translateY(-50%)";
@@ -16767,6 +16931,7 @@ function dependentParams(highlight, filter, ownParams = []) {
 var MARK_CONTRAST_MIN = 1.5;
 var TEXT_CONTRAST_MIN = 4.5;
 var MAX_DISTINGUISHABLE_SERIES = 8;
+var DEFAULT_POINT_MARKER_RADIUS = 3.5;
 var SEVERITY_RANK = { error: 0, warning: 1, info: 2 };
 var VALUE_CHART_TYPES = /* @__PURE__ */ new Set(["kpi", "gauge", "bullet"]);
 var CONTINUOUS_COLOR_TYPES = /* @__PURE__ */ new Set([
@@ -16824,6 +16989,7 @@ function buildRenderReport(input) {
   if (model) {
     checkDegenerateAxis(model, add);
     checkClippedMarks(model, spec, add);
+    checkAnnotationOverflow(model, spec, tokens, add);
     checkAxisLabelOverlap(model, spec, tokens, add);
     checkLegendOverflow(model, spec, add);
   }
@@ -16943,6 +17109,69 @@ function checkClippedMarks(model, spec, add) {
     });
   }
 }
+function checkAnnotationOverflow(model, spec, tokens, add) {
+  if (model.orientation === "horizontal") return;
+  const explicit = spec.annotations;
+  const points = Array.isArray(explicit) ? explicit.filter((a) => a.type === "point") : [];
+  for (const a of autoInsightAnnotations(spec)) points.push(a);
+  if (points.length === 0) return;
+  const { plot } = model;
+  const fontSize = tokens.font.size.small;
+  const font = fontString(fontSize, tokens.font.family, tokens.font.weight.medium);
+  const EPS = 0.75;
+  const sides = /* @__PURE__ */ new Set();
+  const artifacts = /* @__PURE__ */ new Set();
+  let clippedAnnotations = 0;
+  let clippedArtifacts = 0;
+  for (const ann of points) {
+    const cat = model.x.pixel(ann.x);
+    const val = model.y.pixel(ann.y);
+    if (cat == null || val == null || !Number.isFinite(cat) || !Number.isFinite(val)) continue;
+    const { x: px, y: py } = model.project(cat, val);
+    const r = ann.markerRadius ?? DEFAULT_POINT_MARKER_RADIUS;
+    const halo = r + 1.6;
+    const markerSides = overflowSides(px - halo, py - halo, px + halo, py + halo, plot, EPS);
+    let annClipped = false;
+    if (markerSides.length) {
+      clippedArtifacts++;
+      annClipped = true;
+      artifacts.add("marker");
+      markerSides.forEach((s) => sides.add(s));
+    }
+    if (!ann.label) continue;
+    const gap = r + 4;
+    const width = measureText(ann.label, font).width + 6;
+    const aboveTop = py - gap - fontSize;
+    const top = aboveTop < plot.y ? py + gap : aboveTop;
+    const labelSides = overflowSides(px - width / 2, top, px + width / 2, top + fontSize, plot, EPS);
+    if (labelSides.length) {
+      clippedArtifacts++;
+      annClipped = true;
+      artifacts.add("label");
+      labelSides.forEach((s) => sides.add(s));
+    }
+    if (annClipped) clippedAnnotations++;
+  }
+  if (clippedAnnotations > 0) {
+    const artifactList = [...artifacts].join(" and ");
+    const sideList = [...sides].join(", ");
+    add({
+      code: "annotation-clipped",
+      severity: "warning",
+      message: `${clippedAnnotations} point annotation ${artifactList} overflow${clippedAnnotations === 1 ? "s" : ""} the plot (${sideList}); the chart is too small to fit its annotation labels.`,
+      details: { clipped: clippedAnnotations, clippedArtifacts, artifacts: [...artifacts], sides: [...sides] },
+      hint: "Enlarge the chart, shorten annotation labels, or remove labels/insights that cannot fit."
+    });
+  }
+}
+function overflowSides(left, top, right, bottom, plot, eps) {
+  const sides = [];
+  if (left < plot.x - eps) sides.push("left");
+  if (right > plot.x + plot.width + eps) sides.push("right");
+  if (top < plot.y - eps) sides.push("top");
+  if (bottom > plot.y + plot.height + eps) sides.push("bottom");
+  return sides;
+}
 function checkAxisLabelOverlap(model, spec, tokens, add) {
   const ticks2 = model.xTicks;
   if (ticks2.length < 2) return;
@@ -17030,7 +17259,7 @@ function manualYDomainFix(spec) {
 // src/runtime/facet.ts
 var FACETABLE_TYPES2 = /* @__PURE__ */ new Set(["line", "area", "bar", "scatter"]);
 var FACET_GAP = 16;
-var FACET_PADDING = { top: 12, right: 16, bottom: 12, left: 12 };
+var FACET_PADDING = { top: 0, right: 0, bottom: 0, left: 0 };
 var SEVERITY_RANK2 = { error: 0, warning: 1, info: 2 };
 function isFaceted(spec) {
   const facet = spec.facet;
@@ -18719,6 +18948,6 @@ function renderToContext(target, spec) {
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
+export { CARTESIAN_TYPES, CHART_TYPES, CanvasLayer, DEFAULT_ENTRANCE_DURATION, DEFAULT_ROUGH_STYLE, DEFAULT_UPDATE_DURATION, DIM_ALPHA, ExpressionError, FACETABLE_TYPES2 as FACETABLE_TYPES, FUNCTION_NAMES, InteractionController, NO_PADDING, RoughPen, SKETCH_FONT_FAMILY, SKETCH_FONT_NAME, SLICER_TYPES, SR_ONLY_STYLE, Surface, TICK_SIZE, TIME_UNITS, TRANSFORM_KINDS, Tooltip, VERSION, aggregateValues, analyzeChart, animate, applyA11y, applyAggregate, applyBin, applyCalculate, applyFilter, applyFold, applyPatch, applyPick, applyTimeUnit, applyTransform, applyTransforms, arc, area, assertValidSpec, autoInsightAnnotations, backOut, bandScale, bounceOut, buildCartesianInteraction, buildCartesianModel, buildComboModel, buildDataTableFallback, buildFacetModels, buildHistogramModel, buildRenderReport, cartesianInteractionBuilders, cartesianRenderers, categorical, categoricalSchemes, chartTitleText, chartTypeLabel, checkExpression, clamp012 as clamp01, clamp255, compileExpression, compilePredicate, computeBackingSize, computeBins, computeFrame, computeSeriesInsights, contrastRatio, createDiv, createRoughPen, createSelectionStore, cubicIn, cubicInOut, cubicOut, curveCatmullRom, curveLinear, curveMonotoneX, curveStep, curveStepAfter, curveStepBefore, customRenderers, darkTheme, decimate, defaultSpan, dependentParams, diverging, divergingColorScale, divergingSchemes, drawAnnotationLabels, drawAnnotations, drawAxesUnderlay, drawFacet, drawLegend, drawOverlay, drawTitle, drawTrendlineLabels, drawTrendlines, easings, elasticOut, ellipsize, ensureSketchFont, expoInOut, expoOut, facetReport, fillParentStyle, filterRows, fontString, formatDate, formatNumber2 as formatNumber, formatValue, getDevicePixelRatio, groupBy, hashString, inferFieldType, inferFieldTypes, inferValueType, inheritInto, interpolateArray, interpolateNumber, interpolateNumberArray, interpolateObject, interpolateOklab, interpolateRgb, isBrowser, isEmptyValue, isFaceted, isParamClause, isSlicerType, keyFields, legendSwatchWidth, lightTheme, line, linear, linearRegression, linearScale, linearToSrgb, lintSpec, literalToValue, logScale, lttbRun, makeMatcher, matchesValue, measureText, monotoneXTangents, mulberry32, niceDomain, oklabToOklch, oklabToRgb, oklchToOklab, ordinalColorScale, overlayTextToCanvasCmd, paintCanvasText, paintLegendSwatch, parseColor, parseNumberFormat, pivot, placeViews, pointScale, polygonHachureLines, prefersReducedMotion, prettyDate, profileColumns, quadIn, quadInOut, quadOut, rampFromStops, readableTextColor, recommendChart, relativeLuminance, render, renderDashboard, renderToContext, repairReport, repairSpec, resolveCurve, resolveDashboardLayout, resolveDashboardSections, resolveEmphasis, resolveEntrance, resolveFilterValues, resolveInsightOptions, resolveSketch, resolveTheme, resolveUpdate, resolveValueRef, rgbToOklab, rgbaToCss, rotatePoint, roundedRect, sampleArc, sequential, sequentialColorScale, sequentialSchemes, setMeasureContext, setStyle, sinInOut, slicerParamName, smartDate, specFields, srgbToLinear, summarize, summarizeChart, themes, tickIncrement, tickStep, ticks, timeScale, timeTickFormat, timeTicks, toHex, toPointer, tooltipEnabled, truncateTo, validateDashboard, validateSpec, wireViews, withAlpha, withSketchFont };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map