@opendata-ai/openchart-engine 6.28.5 → 7.0.0

package/src/__tests__/axes.test.ts

@@ -982,3 +982,78 @@ describe('buildContinuousTicks — log scale power filtering', () => {
     expect(nonPowerOf10.length).toBeGreaterThan(0);
   });
 });
+
+describe('axis tickPosition', () => {
+  it('defaults y-axis to inline for line charts', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, undefined, {
+      data: lineSpec.data,
+      encoding: lineSpec.encoding,
+      markType: 'line',
+    });
+
+    expect(axes.y!.tickPosition).toBe('inline');
+    expect(axes.y!.domainLine).toBe(false);
+    expect(axes.y!.tickMarks).toBe(false);
+    expect(axes.x!.tickPosition).toBe('gutter');
+  });
+
+  it('defaults y-axis to inline for area charts', () => {
+    const areaSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'area',
+      markDef: { type: 'area' },
+    };
+    const scales = computeScales(areaSpec, chartArea, areaSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, undefined, {
+      data: areaSpec.data,
+      encoding: areaSpec.encoding,
+      markType: 'area',
+    });
+
+    expect(axes.y!.tickPosition).toBe('inline');
+  });
+
+  it('defaults y-axis to gutter when markType is unknown', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.y!.tickPosition).toBe('gutter');
+  });
+
+  it('respects explicit user override on y-axis', () => {
+    const overrideSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        y: { ...lineSpec.encoding.y!, axis: { tickPosition: 'gutter' } },
+      },
+    };
+    const scales = computeScales(overrideSpec, chartArea, overrideSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, undefined, {
+      data: overrideSpec.data,
+      encoding: overrideSpec.encoding,
+      markType: 'line',
+    });
+
+    expect(axes.y!.tickPosition).toBe('gutter');
+  });
+
+  it('right-side y-axis stays gutter even on line charts', () => {
+    const dualSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        y: { ...lineSpec.encoding.y!, axis: { orient: 'right' } },
+      },
+    };
+    const scales = computeScales(dualSpec, chartArea, dualSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, undefined, {
+      data: dualSpec.data,
+      encoding: dualSpec.encoding,
+      markType: 'line',
+    });
+
+    expect(axes.y!.tickPosition).toBe('gutter');
+  });
+});

package/src/__tests__/compile-chart.test.ts

@@ -321,6 +321,75 @@ describe('compileChart', () => {
     expect(layout.marks.length).toBeGreaterThan(0);
   });
 
+  it('hiddenSeries keeps remaining series on their original palette colors', () => {
+    // Regression: filtering renderData by hiddenSeries used to shrink the
+    // ordinal color scale's domain, which shifted every visible series down
+    // one palette index.
+    type LineLike = { type: string; seriesKey?: string; stroke?: string };
+    const findStroke = (marks: { type: string }[], series: string) =>
+      (marks.find((m) => m.type === 'line' && (m as LineLike).seriesKey === series) as LineLike)
+        ?.stroke;
+
+    const baseline = compileChart({ ...lineSpec, hiddenSeries: [] }, { width: 600, height: 400 });
+    const baselineUS = findStroke(baseline.marks, 'US');
+    const baselineUK = findStroke(baseline.marks, 'UK');
+    expect(baselineUS).toBeTruthy();
+    expect(baselineUK).toBeTruthy();
+
+    // Hide UK → US should keep its color.
+    const ukHidden = compileChart(
+      { ...lineSpec, hiddenSeries: ['UK'] },
+      { width: 600, height: 400 },
+    );
+    expect(findStroke(ukHidden.marks, 'US')).toBe(baselineUS);
+
+    // Hide US → UK should keep its color (reverse direction).
+    const usHidden = compileChart(
+      { ...lineSpec, hiddenSeries: ['US'] },
+      { width: 600, height: 400 },
+    );
+    expect(findStroke(usHidden.marks, 'UK')).toBe(baselineUK);
+  });
+
+  it('hiddenSeries keeps middle-of-N series colors stable in 3-series charts', () => {
+    // Pre-fix bug shifted EVERY series after the hidden one — a 2-series
+    // case only proves shift-by-one. A 3-series case where the middle is
+    // hidden proves the late series doesn't drift either.
+    type LineLike = { type: string; seriesKey?: string; stroke?: string };
+    const findStroke = (marks: { type: string }[], series: string) =>
+      (marks.find((m) => m.type === 'line' && (m as LineLike).seriesKey === series) as LineLike)
+        ?.stroke;
+
+    const threeSeriesSpec = {
+      mark: 'line' as const,
+      data: [
+        { date: '2020-01-01', value: 10, country: 'US' },
+        { date: '2021-01-01', value: 40, country: 'US' },
+        { date: '2020-01-01', value: 15, country: 'UK' },
+        { date: '2021-01-01', value: 35, country: 'UK' },
+        { date: '2020-01-01', value: 12, country: 'JP' },
+        { date: '2021-01-01', value: 38, country: 'JP' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'country', type: 'nominal' as const },
+      },
+    };
+
+    const baseline = compileChart(threeSeriesSpec, { width: 600, height: 400 });
+    const baselineUS = findStroke(baseline.marks, 'US');
+    const baselineJP = findStroke(baseline.marks, 'JP');
+
+    // Hide the middle series.
+    const ukHidden = compileChart(
+      { ...threeSeriesSpec, hiddenSeries: ['UK'] },
+      { width: 600, height: 400 },
+    );
+    expect(findStroke(ukHidden.marks, 'US')).toBe(baselineUS); // first stays
+    expect(findStroke(ukHidden.marks, 'JP')).toBe(baselineJP); // last doesn't shift up
+  });
+
   // ---------------------------------------------------------------------------
   // scale.clip
   // ---------------------------------------------------------------------------
@@ -463,6 +532,16 @@ describe('compileChart', () => {
     expect(layout.crosshair).toBe(true);
   });
 
+  it('crosshair defaults on for line marks in full mode', () => {
+    const layout = compileChart(lineSpec, { width: 400, height: 300 });
+    expect(layout.crosshair).toBe(true);
+  });
+
+  it('crosshair respects explicit crosshair: false on a line chart', () => {
+    const layout = compileChart({ ...lineSpec, crosshair: false }, { width: 400, height: 300 });
+    expect(layout.crosshair).toBe(false);
+  });
+
   // ---------------------------------------------------------------------------
   // Sparkline layout profile (dimensions, axes, legend)
   // ---------------------------------------------------------------------------
@@ -565,6 +644,231 @@ describe('compileChart', () => {
     expect(layout.chrome.topHeight).toBe(0);
   });
 
+  // -------------------------------------------------------------------------
+  // Sparkline visual defaults (trend color, endpoint dot, gradient, bar pill)
+  // -------------------------------------------------------------------------
+
+  const upTrendData = [
+    { date: '2026-01-01', value: 10 },
+    { date: '2026-01-02', value: 12 },
+    { date: '2026-01-03', value: 14 },
+    { date: '2026-01-04', value: 18 },
+    { date: '2026-01-05', value: 22 },
+  ];
+
+  const downTrendData = [
+    { date: '2026-01-01', value: 22 },
+    { date: '2026-01-02', value: 18 },
+    { date: '2026-01-03', value: 14 },
+    { date: '2026-01-04', value: 12 },
+    { date: '2026-01-05', value: 10 },
+  ];
+
+  const sparkLineSpec = {
+    mark: 'line' as const,
+    data: upTrendData,
+    encoding: {
+      x: { field: 'date', type: 'temporal' as const },
+      y: { field: 'value', type: 'quantitative' as const },
+    },
+    display: 'sparkline' as const,
+  };
+
+  it('sparkline line emits a single decorative endpoint dot at the last point', () => {
+    const layout = compileChart(sparkLineSpec, { width: 200, height: 40 });
+    const points = layout.marks.filter((m) => m.type === 'point');
+    expect(points.length).toBe(1);
+    expect(points[0].aria?.decorative).toBe(true);
+  });
+
+  it('sparkline line uses the positive theme token for an up-trending series', () => {
+    const layout = compileChart(sparkLineSpec, { width: 200, height: 40 });
+    const lineMark = layout.marks.find((m) => m.type === 'line');
+    expect(lineMark?.stroke).toBe('#16a34a');
+  });
+
+  it('sparkline line uses the negative theme token for a down-trending series', () => {
+    const layout = compileChart(
+      { ...sparkLineSpec, data: downTrendData },
+      { width: 200, height: 40 },
+    );
+    const lineMark = layout.marks.find((m) => m.type === 'line');
+    expect(lineMark?.stroke).toBe('#dc2626');
+  });
+
+  it('explicit markDef.stroke wins over the trend default in sparkline mode', () => {
+    const layout = compileChart(
+      { ...sparkLineSpec, mark: { type: 'line' as const, stroke: '#ff00ff' } },
+      { width: 200, height: 40 },
+    );
+    const lineMark = layout.marks.find((m) => m.type === 'line');
+    expect(lineMark?.stroke).toBe('#ff00ff');
+  });
+
+  it('explicit markDef.point: false suppresses the auto-injected endpoint dot', () => {
+    const layout = compileChart(
+      { ...sparkLineSpec, mark: { type: 'line' as const, point: false } },
+      { width: 200, height: 40 },
+    );
+    const points = layout.marks.filter((m) => m.type === 'point');
+    expect(points.length).toBe(0);
+  });
+
+  it('sparkline area injects a trend-colored gradient fill by default', () => {
+    const layout = compileChart(
+      { ...sparkLineSpec, mark: 'area' as const },
+      { width: 200, height: 40 },
+    );
+    const areaMark = layout.marks.find((m) => m.type === 'area');
+    // fill should be a gradient object (not a flat string)
+    expect(typeof areaMark?.fill).toBe('object');
+    expect((areaMark?.fill as { gradient?: string }).gradient).toBe('linear');
+  });
+
+  it('sparkline single-series vertical bars use a [min, max] domain', () => {
+    // With values 100, 105, 110, 120 and zero: false, the y-domain should
+    // start near 100 — not 0 — so the shortest bar is still visible.
+    const layout = compileChart(
+      {
+        mark: 'bar' as const,
+        data: [
+          { cat: 'a', value: 100 },
+          { cat: 'b', value: 105 },
+          { cat: 'c', value: 110 },
+          { cat: 'd', value: 120 },
+        ],
+        encoding: {
+          x: { field: 'cat', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const },
+        },
+        display: 'sparkline' as const,
+      },
+      { width: 200, height: 40 },
+    );
+    // The shortest bar (value 100) should NOT have a height that fills the
+    // chart down from y=0; with zero:false it sits near the bottom.
+    const rects = layout.marks.filter((m) => m.type === 'rect');
+    expect(rects.length).toBe(4);
+    // Heights should differ meaningfully across the four bars.
+    const heights = rects.map((r) => (r as { height: number }).height);
+    const maxH = Math.max(...heights);
+    const minH = Math.min(...heights);
+    expect(maxH - minH).toBeGreaterThan(maxH * 0.5);
+  });
+
+  it('sparkline stacked vertical bars retain the [0, max] baseline', () => {
+    // Stacked bars MUST baseline at zero — non-zero baselines break stack
+    // arithmetic. The total bar should equal the category sum.
+    const layout = compileChart(
+      {
+        mark: 'bar' as const,
+        data: [
+          { cat: 'a', series: 's1', value: 50 },
+          { cat: 'a', series: 's2', value: 50 },
+          { cat: 'b', series: 's1', value: 30 },
+          { cat: 'b', series: 's2', value: 70 },
+        ],
+        encoding: {
+          x: { field: 'cat', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const, stack: 'zero' as const },
+          color: { field: 'series', type: 'nominal' as const },
+        },
+        display: 'sparkline' as const,
+      },
+      { width: 200, height: 80 },
+    );
+    const rects = layout.marks.filter((m) => m.type === 'rect');
+    expect(rects.length).toBe(4);
+    // For stacked bars, both categories sum to the same total (100), so the
+    // tallest stacked column should fill close to the full chart area height.
+    // Verify by checking that at least one bar starts at the chart-area top
+    // (its y matches chartArea.y within a rounding tolerance).
+    const minY = Math.min(...rects.map((r) => (r as { y: number }).y));
+    expect(minY).toBeCloseTo(layout.area.y, -1);
+  });
+
+  it('sparkline bar gets pill cornerRadius by default', () => {
+    const layout = compileChart(
+      {
+        mark: 'bar' as const,
+        data: [
+          { cat: 'a', value: 5 },
+          { cat: 'b', value: 8 },
+          { cat: 'c', value: 6 },
+        ],
+        encoding: {
+          x: { field: 'cat', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const },
+        },
+        display: 'sparkline' as const,
+      },
+      { width: 200, height: 40 },
+    );
+    const rects = layout.marks.filter((m) => m.type === 'rect');
+    expect(rects.length).toBeGreaterThan(0);
+    // 'pill' translates to rx = barWidth / 2 in column compute. Each rect's
+    // cornerRadius should equal half the bar's width (or thickness).
+    const r = rects[0] as { width: number; cornerRadius: number };
+    expect(r.cornerRadius).toBeCloseTo(r.width / 2, 1);
+  });
+
+  it('sparkline stacked bars: only top segment per stack gets pill rounding (top corners)', () => {
+    // Stacked segments below the top stay square so the seams between
+    // segments are flush. Each topmost segment receives the pill radius
+    // with `cornerRadiusSides` constrained to the top corners — the
+    // renderer emits a path with rounded top + square bottom.
+    const layout = compileChart(
+      {
+        mark: 'bar' as const,
+        data: [
+          { cat: 'a', series: 's1', value: 50 },
+          { cat: 'a', series: 's2', value: 50 },
+          { cat: 'b', series: 's1', value: 30 },
+          { cat: 'b', series: 's2', value: 70 },
+        ],
+        encoding: {
+          x: { field: 'cat', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const, stack: 'zero' as const },
+          color: { field: 'series', type: 'nominal' as const },
+        },
+        display: 'sparkline' as const,
+      },
+      { width: 200, height: 80 },
+    );
+    type Rect = {
+      type: 'rect';
+      cornerRadius?: number;
+      cornerRadiusSides?: { tl?: boolean; tr?: boolean; br?: boolean; bl?: boolean };
+      stackGroup?: string;
+      y: number;
+    };
+    const rects = layout.marks.filter((m): m is Rect => m.type === 'rect') as Rect[];
+
+    // Group by stackGroup, find topmost (smallest y) per group.
+    const tops = new Map<string, Rect>();
+    for (const r of rects) {
+      if (!r.stackGroup) continue;
+      const cur = tops.get(r.stackGroup);
+      if (!cur || r.y < cur.y) tops.set(r.stackGroup, r);
+    }
+    expect(tops.size).toBe(2);
+
+    for (const r of rects) {
+      const isTop = tops.get(r.stackGroup ?? '') === r;
+      if (isTop) {
+        expect(r.cornerRadius).toBeGreaterThan(0);
+        expect(r.cornerRadiusSides).toEqual({
+          tl: true,
+          tr: true,
+          br: false,
+          bl: false,
+        });
+      } else {
+        expect(r.cornerRadius ?? 0).toBe(0);
+      }
+    }
+  });
+
   // ---------------------------------------------------------------------------
   // Explicit-at-any-level wins (precedence matrix)
   // ---------------------------------------------------------------------------

package/src/__tests__/dimensions.test.ts

@@ -1,8 +1,10 @@
 import type { LayoutStrategy, LegendLayout } from '@opendata-ai/openchart-core';
 import { adaptTheme, resolveTheme } from '@opendata-ai/openchart-core';
 import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeDimensions } from '../layout/dimensions';
+import { legendGap } from '../legend/wrap';
 
 const baseSpec: NormalizedChartSpec = {
   markType: 'line',
@@ -296,6 +298,85 @@ describe('computeDimensions', () => {
     expect(narrowDims.chartArea.width).toBeGreaterThanOrEqual(350 * 0.4);
   });
 
+  describe('metrics bar', () => {
+    const fourMetrics = [
+      { label: 'CLOSE', value: '$186.10', delta: '+1.4%', deltaTone: 'up' as const },
+      { label: 'ALL-TIME HIGH', value: '$202.00' },
+      { label: '3-YR RETURN', value: '+1228%', secondary: '10.3x' },
+      { label: 'AVG MONTHLY', value: '$104.95' },
+    ];
+
+    it('reserves space and emits cells when metrics fit', () => {
+      const spec: NormalizedChartSpec = { ...baseSpec, metrics: fourMetrics };
+      const dims = computeDimensions(spec, { width: 800, height: 500 }, emptyLegend, lightTheme);
+
+      expect(dims.metrics).toBeDefined();
+      expect(dims.metrics?.cells).toHaveLength(4);
+      // First cell sits at the container left padding (aligned with title /
+      // eyebrow), not indented to the chart area's left gutter.
+      expect(dims.metrics?.cells[0].x).toBeLessThanOrEqual(dims.chartArea.x);
+      expect(dims.metrics?.cells[0].x).toBeGreaterThan(0);
+      // Cells span the metrics area evenly
+      const totalSpan =
+        (dims.metrics?.cells[3].x ?? 0) +
+        (dims.metrics?.cells[3].cellWidth ?? 0) -
+        (dims.metrics?.cells[0].x ?? 0);
+      const cellWidth = totalSpan / 4;
+      expect(dims.metrics?.cells[1].x).toBeCloseTo((dims.metrics?.cells[0].x ?? 0) + cellWidth, 1);
+    });
+
+    it('shrinks chart-area top to accommodate metric bar', () => {
+      const noMetrics = computeDimensions(
+        baseSpec,
+        { width: 800, height: 500 },
+        emptyLegend,
+        lightTheme,
+      );
+      const withMetrics = computeDimensions(
+        { ...baseSpec, metrics: fourMetrics },
+        { width: 800, height: 500 },
+        emptyLegend,
+        lightTheme,
+      );
+
+      expect(withMetrics.chartArea.height).toBeLessThan(noMetrics.chartArea.height);
+      expect(withMetrics.margins.top).toBeGreaterThan(noMetrics.margins.top);
+    });
+
+    it('strips metric bar on narrow widths', () => {
+      const spec: NormalizedChartSpec = { ...baseSpec, metrics: fourMetrics };
+      const dims = computeDimensions(spec, { width: 400, height: 400 }, emptyLegend, lightTheme);
+      expect(dims.metrics).toBeUndefined();
+
+      // Top margin should match the no-metrics case (no leftover reservation)
+      const noMetrics = computeDimensions(
+        baseSpec,
+        { width: 400, height: 400 },
+        emptyLegend,
+        lightTheme,
+      );
+      expect(dims.margins.top).toBe(noMetrics.margins.top);
+    });
+
+    it('strips metric bar when value text would overflow', () => {
+      const oversizeMetrics = [
+        { label: 'A', value: 'this is an extraordinarily long monetary value that cannot fit' },
+        { label: 'B', value: 'another impossibly long string to force overflow detection' },
+        { label: 'C', value: 'still more text that pushes well past the cell width' },
+        { label: 'D', value: 'and one more lengthy figure for good measure here too' },
+      ];
+      const spec: NormalizedChartSpec = { ...baseSpec, metrics: oversizeMetrics };
+      const dims = computeDimensions(spec, { width: 600, height: 400 }, emptyLegend, lightTheme);
+      expect(dims.metrics).toBeUndefined();
+    });
+
+    it('returns undefined when metrics array is empty', () => {
+      const spec: NormalizedChartSpec = { ...baseSpec, metrics: [] };
+      const dims = computeDimensions(spec, { width: 800, height: 500 }, emptyLegend, lightTheme);
+      expect(dims.metrics).toBeUndefined();
+    });
+  });
+
   it('tightens legend gap on narrow viewports', () => {
     const wideDims = computeDimensions(
       baseSpec,
@@ -313,4 +394,147 @@ describe('computeDimensions', () => {
     // Narrow viewport should have more chart height available (smaller legend gap)
     expect(narrowDims.chartArea.height).toBeGreaterThanOrEqual(wideDims.chartArea.height - 10);
   });
+
+  it('exposes xAxisHeight on the layout dimensions', () => {
+    const dims = computeDimensions(baseSpec, { width: 600, height: 400 }, emptyLegend, lightTheme);
+    // Default x-axis (no rotation, no title): 26px reservation.
+    expect(dims.xAxisHeight).toBeGreaterThan(0);
+  });
+
+  it('reserves extra bottom space for a bottom legend so it sits below the x-axis', () => {
+    // Defect-3 regression: bottom-positioned legends used to render in the
+    // same band as the x-axis tick row. The reservation now flows through
+    // chrome.bottomHeight (via bottomLegendReservation) so chrome stacks
+    // below the legend band rather than colliding with it. The base bottom
+    // margin already includes xAxisHeight, so the additional reservation
+    // collapses to legendHeight + gap.
+    const bottomLegend: LegendLayout = {
+      ...emptyLegend,
+      position: 'bottom',
+      entries: [{ label: 'US', color: '#1b7fa3', shape: 'line' }],
+      bounds: { x: 0, y: 0, width: 400, height: 28 },
+    };
+
+    const dimsNoLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsBottom = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      bottomLegend,
+      lightTheme,
+    );
+
+    // Reservation is legendHeight + gap, threaded through chrome.bottomHeight.
+    const gap = legendGap(600);
+    const expectedExtra = bottomLegend.bounds.height + gap;
+    expect(dimsBottom.margins.bottom - dimsNoLegend.margins.bottom).toBeCloseTo(expectedExtra, 5);
+    // The reservation lives on chrome.bottomHeight, not as a separate margin
+    // delta, so renderers reading chrome.source.y get the legend offset baked
+    // in for free.
+    expect(dimsBottom.chrome.bottomHeight - dimsNoLegend.chrome.bottomHeight).toBeCloseTo(
+      expectedExtra,
+      5,
+    );
+  });
+});
+
+describe('bottom legend placement (defect-3 regression)', () => {
+  it('places the bottom legend below the x-axis tick row, not over it', () => {
+    // Multi-series area with explicit bottom legend should render the legend
+    // beneath the x-axis ticks. Asserts:
+    //   legend.bounds.y >= chartArea.y + chartArea.height + xAxisHeight + gap
+    const spec = {
+      mark: 'area' as const,
+      data: [
+        { year: '2020', value: 10, series: 'A' },
+        { year: '2021', value: 20, series: 'A' },
+        { year: '2022', value: 15, series: 'A' },
+        { year: '2020', value: 8, series: 'B' },
+        { year: '2021', value: 18, series: 'B' },
+        { year: '2022', value: 12, series: 'B' },
+        { year: '2020', value: 5, series: 'C' },
+        { year: '2021', value: 12, series: 'C' },
+        { year: '2022', value: 9, series: 'C' },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'series', type: 'nominal' as const },
+      },
+      legend: { position: 'bottom' as const, show: true },
+    };
+
+    const layout = compileChart(spec, { width: 800, height: 500 });
+
+    expect(layout.legend.entries.length).toBeGreaterThan(0);
+    expect(layout.legend.position).toBe('bottom');
+
+    // Recompute the gap the engine uses internally to make a tight assertion.
+    const gap = legendGap(800);
+
+    // Use the same axis-height fallback dimensions.ts uses for an unrotated
+    // x-axis without an axis title (26px). Asserting `>=` means the legend
+    // top is at or below the bottom of the x-axis tick row.
+    const xAxisHeight = 26;
+    const chartBottom = layout.area.y + layout.area.height;
+    const minLegendY = chartBottom + xAxisHeight + gap;
+
+    expect(layout.legend.bounds.y).toBeGreaterThanOrEqual(minLegendY - 0.5);
+  });
+
+  it('positions bottom chrome (source) below the bottom legend band', () => {
+    // Follow-up regression: a bottom legend reserved space below the x-axis
+    // tick row, but source/byline/footer chrome was still positioned via
+    // chartBottom + xAxisExtent + chartToFooter, landing in the same band as
+    // the legend swatches. Threading bottomLegendReservation into computeChrome
+    // now shifts chrome.source.y so it stacks below the legend.
+    const spec = {
+      mark: 'area' as const,
+      data: [
+        { year: '2020', value: 10, series: 'A' },
+        { year: '2021', value: 20, series: 'A' },
+        { year: '2022', value: 15, series: 'A' },
+        { year: '2020', value: 8, series: 'B' },
+        { year: '2021', value: 18, series: 'B' },
+        { year: '2022', value: 12, series: 'B' },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'series', type: 'nominal' as const },
+      },
+      legend: { position: 'bottom' as const, show: true },
+      chrome: {
+        source: 'World Bank, 2024',
+        byline: 'OpenChart Newsroom',
+      },
+    };
+
+    const layout = compileChart(spec, { width: 800, height: 500 });
+
+    // Sanity: legend and chrome both rendered.
+    expect(layout.legend.position).toBe('bottom');
+    expect(layout.legend.entries.length).toBeGreaterThan(0);
+    expect(layout.chrome.source).toBeDefined();
+    expect(layout.chrome.byline).toBeDefined();
+
+    // Compute chrome's absolute y the same way the renderer does:
+    // bottomOffset = chartBottom + xAxisExtent (= 26 for default unrotated x-axis).
+    const xAxisExtent = 26;
+    const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+    const sourceAbsoluteY = bottomOffset + layout.chrome.source!.y;
+    const bylineAbsoluteY = bottomOffset + layout.chrome.byline!.y;
+
+    // Legend's bottom edge.
+    const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
+
+    // Source must land below the legend band, with at least a small gap
+    // (chartToFooter ≈ 12px) for breathing room.
+    expect(sourceAbsoluteY).toBeGreaterThan(legendBottom);
+    expect(bylineAbsoluteY).toBeGreaterThan(sourceAbsoluteY);
+  });
 });