@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.1

package/src/__tests__/axes.test.ts

@@ -1,5 +1,5 @@
 import type { AxisTick, Encoding, LayoutStrategy } from '@opendata-ai/openchart-core';
-import { resolveTheme } from '@opendata-ai/openchart-core';
+import { maxRotatedLabelWidth, resolveTheme } from '@opendata-ai/openchart-core';
 import { scaleLinear, scaleLog } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../compiler/types';
@@ -600,11 +600,58 @@ describe('text-aware tick density', () => {
     const axes = computeAxes(scales, narrowArea, fullStrategy, theme, measure);
     expect(axes.x!.tickAngle).toBe(-45);
 
-    // Every category keeps its label — the diagonals never touch.
-    const kept = axes.x!.ticks.map((t) => t.label);
+    // Every category keeps a tick — the diagonals never touch, so no label is
+    // DROPPED. (The long one is ellipsized to fit the capped rotated-label
+    // band, which is a separate concern from decimation; its full text is
+    // preserved on `fullLabel`.)
+    expect(axes.x!.ticks).toHaveLength(categories.length);
+    const kept = axes.x!.ticks.map((t) => t.fullLabel ?? t.label);
     expect(kept).toEqual(categories);
   });
 
+  it('truncates rotated labels that would overflow the capped reservation', () => {
+    // Regression: the layout clamps the reserved rotated-label band to
+    // X_AXIS_ROTATED_EXTENT_CAP (120px) but nothing shortened the drawn string,
+    // so a long label rendered straight past the axis and through the source
+    // line. Long labels must now be ellipsized to fit that band, with the full
+    // text retained on `fullLabel` for tooltips and the a11y table.
+    const categories = ['Short', 'An Extremely Long Category Label That Cannot Possibly Fit'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+    const measure = (text: string) => ({ width: text.length * 8, height: 12 });
+    const area = { x: 50, y: 50, width: 260, height: 300 };
+    const scales = computeScales(barSpec, area, barSpec.data);
+    const axes = computeAxes(scales, area, fullStrategy, theme, measure);
+
+    const ticks = axes.x!.ticks;
+    const angle = axes.x!.tickAngle!;
+    expect(Math.abs(angle)).toBeGreaterThan(10);
+
+    // The short label is untouched and carries no fullLabel.
+    const short = ticks.find((t) => t.value === 'Short')!;
+    expect(short.label).toBe('Short');
+    expect(short.fullLabel).toBeUndefined();
+
+    // The long one is ellipsized, but its full text survives on fullLabel.
+    const long = ticks.find((t) => t.value === categories[1])!;
+    expect(long.label).not.toBe(categories[1]);
+    expect(long.label.endsWith('…')).toBe(true);
+    expect(long.fullLabel).toBe(categories[1]);
+
+    // And the drawn label now fits the budget the reservation is computed from,
+    // so it cannot overflow the band.
+    const budget = maxRotatedLabelWidth(angle, theme.fonts.sizes.axisTick);
+    expect(measure(long.label).width).toBeLessThanOrEqual(budget);
+  });
+
   it('measures collision at the drawn tick spacing when an explicit tickCount thins upstream', () => {
     // 40 categories with tickCount: 8 — categoricalTicks retains every 5th
     // category, so the drawn ticks sit 5 band steps apart. The angle and

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

@@ -272,6 +272,36 @@ describe('compileChart', () => {
     expect(layout.a11y.dataTableFallback.length).toBeGreaterThan(0);
     // With marks present, keyboard navigation should be enabled
     expect(layout.a11y.keyboardNavigable).toBe(true);
+    // No author opt-out by default
+    expect(layout.a11y.hidden).toBeUndefined();
+  });
+
+  it('a11y.description replaces the auto-generated alt text', () => {
+    const spec = { ...lineSpec, a11y: { description: 'GDP growth for US and UK, 2020 to 2021.' } };
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.a11y.altText).toBe('GDP growth for US and UK, 2020 to 2021.');
+  });
+
+  it('top-level description (VL alias) replaces the auto-generated alt text', () => {
+    const spec = { ...lineSpec, description: 'Two-country GDP comparison.' };
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.a11y.altText).toBe('Two-country GDP comparison.');
+  });
+
+  it('a11y.description wins over the top-level description', () => {
+    const spec = {
+      ...lineSpec,
+      description: 'Alias text',
+      a11y: { description: 'Canonical text' },
+    };
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.a11y.altText).toBe('Canonical text');
+  });
+
+  it('a11y.hidden flows into the layout metadata', () => {
+    const spec = { ...lineSpec, a11y: { hidden: true } };
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(layout.a11y.hidden).toBe(true);
   });
 
   it('produces different strategies at different widths', () => {

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

@@ -0,0 +1,277 @@
+/**
+ * Auto-thinning footnote reserve.
+ *
+ * The footnote list renders below the plot, but thinning only discovers how many
+ * lines there are after the layout has already been computed against a plot that
+ * reserved no room for them. compileChart resolves that circularity by recompiling
+ * with the band reserved. These tests pin the two things that used to break:
+ * the list overrunning the footer row, and the reserve failing to converge.
+ */
+
+import type { ChartSpec } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
+
+/**
+ * Six callouts in a narrow plot. At this width the labels are far wider than the
+ * plot, so most of them must demote — but they sit at different y positions and
+ * never pairwise-collide, which is precisely the case collision-only thinning
+ * missed.
+ */
+const crowdedSpec: ChartSpec = {
+  mark: 'line',
+  data: [
+    { date: '2019-01-01', value: 10 },
+    { date: '2019-06-01', value: 18 },
+    { date: '2020-01-01', value: 15 },
+    { date: '2020-06-01', value: 8 },
+    { date: '2021-01-01', value: 22 },
+    { date: '2021-06-01', value: 28 },
+    { date: '2022-01-01', value: 35 },
+    { date: '2023-01-01', value: 42 },
+  ],
+  encoding: {
+    x: { field: 'date', type: 'temporal' },
+    y: { field: 'value', type: 'quantitative' },
+  },
+  annotations: [
+    { type: 'text', x: '2021-01-01', y: 22, text: 'Recovery begins' },
+    { type: 'text', x: '2019-06-01', y: 18, text: 'Early peak' },
+    { type: 'text', x: '2021-06-01', y: 28, text: 'Strong rebound' },
+    { type: 'text', x: '2022-01-01', y: 35, text: 'New high' },
+    { type: 'text', x: '2023-01-01', y: 42, text: 'Record territory' },
+  ],
+  chrome: { title: 'Crowded', source: 'Illustrative' },
+};
+
+describe('auto-thinning footnote reserve', () => {
+  it('demotes labels that overflow a narrow plot, even though none collide', () => {
+    const layout = compileChart(crowdedSpec, { width: 200, height: 340 });
+
+    // Collision-only thinning left these inline, overflowing the plot. They
+    // should now be footnotes instead.
+    expect(layout.chrome.footnotes?.length ?? 0).toBeGreaterThan(0);
+  });
+
+  it('reserves bottom space so the footnote list clears the footer row', () => {
+    const withFootnotes = compileChart(crowdedSpec, { width: 200, height: 340 });
+    const footnotes = withFootnotes.chrome.footnotes ?? [];
+    expect(footnotes.length).toBeGreaterThan(0);
+
+    // Same chart, same box, no annotations to demote — so no band to reserve.
+    // Comparing against it isolates the reserve from the bottom chrome margin
+    // that both layouts already pay for. Asserting only "there is space below
+    // the plot" would pass with the reserve ripped out; this does not.
+    const { annotations: _dropped, ...noAnnotations } = crowdedSpec;
+    const baseline = compileChart(noAnnotations, { width: 200, height: 340 });
+
+    const plotBottom = (l: typeof withFootnotes) => l.area.y + l.area.height;
+    const pulledUpBy = plotBottom(baseline) - plotBottom(withFootnotes);
+
+    // The band the renderer will draw, measured the way core measures it.
+    const band = footnotes.length * withFootnotes.theme.fonts.sizes.small * 1.3 + 4;
+
+    // Epsilon, not a loosened bound: the engine and this line reach the same
+    // band through different float op orders, so an exact >= trips on ~1e-14 of
+    // accumulated error. A reserve that actually went missing would be short by
+    // a whole line (~14px), which this still catches.
+    expect(pulledUpBy).toBeGreaterThanOrEqual(band - 1e-9);
+  });
+
+  it('leaves the plot alone when nothing demotes', () => {
+    const roomy = compileChart(crowdedSpec, { width: 900, height: 500 });
+    // Wide enough that the labels fit; no footnotes, so no reserve.
+    expect(roomy.chrome.footnotes).toBeUndefined();
+  });
+
+  it('converges instead of recursing forever', () => {
+    // Reserving space shrinks the plot, which can demote one more label and grow
+    // the band again. This must settle, not spin.
+    const layout = compileChart(crowdedSpec, { width: 160, height: 260 });
+    expect(layout.chrome.footnotes?.length ?? 0).toBeLessThanOrEqual(
+      crowdedSpec.annotations?.length ?? 0,
+    );
+    expect(layout.area.height).toBeGreaterThan(0);
+  });
+});
+
+/**
+ * Faceted charts take a separate compile path that used to skip thinning
+ * entirely: every panel kept every label inline, and labels routinely sprawled
+ * out of their panel and across the neighbouring one. A panel is its own little
+ * chart, so it thins against its own rect, not the figure's.
+ */
+describe('auto-thinning in faceted charts', () => {
+  // Deliberately long labels: at 640px each panel is only ~280px wide, so a label
+  // wider than that cannot fit inline no matter where it's placed. Short labels
+  // would leave the containment assertion below vacuous.
+  const facetedSpec: ChartSpec = {
+    ...crowdedSpec,
+    data: ['North', 'South'].flatMap((region) =>
+      (crowdedSpec.data as Array<Record<string, unknown>>).map((row) => ({ ...row, region })),
+    ),
+    encoding: {
+      ...crowdedSpec.encoding,
+      facet: { field: 'region', type: 'nominal', columns: 2 },
+    },
+    annotations: [
+      { type: 'text', x: '2021-01-01', y: 22, text: 'Recovery begins in earnest here' },
+      { type: 'text', x: '2019-06-01', y: 18, text: 'An unusually early peak arrives' },
+      { type: 'text', x: '2021-06-01', y: 28, text: 'A strong rebound takes hold' },
+      { type: 'text', x: '2022-01-01', y: 35, text: 'The series posts a new high' },
+      { type: 'text', x: '2023-01-01', y: 42, text: 'Firmly in record territory now' },
+    ],
+  } as ChartSpec;
+
+  it('demotes labels that escape their panel', () => {
+    const layout = compileChart(facetedSpec, { width: 640, height: 400 });
+    expect(layout.facet).toBeDefined();
+    expect(layout.chrome.footnotes?.length ?? 0).toBeGreaterThan(0);
+
+    const demoted = layout.facet!.panels.flatMap((p) =>
+      p.annotations.filter((a) => a.footnoteIndex != null),
+    );
+    expect(demoted.length).toBeGreaterThan(0);
+  });
+
+  it('keeps every inline label inside its own panel', () => {
+    const layout = compileChart(facetedSpec, { width: 640, height: 400 });
+
+    for (const panel of layout.facet!.panels) {
+      for (const a of panel.annotations) {
+        if (a.footnoteIndex != null || !a.bounds) continue;
+        expect(a.bounds.x).toBeGreaterThanOrEqual(panel.area.x);
+        expect(a.bounds.x + a.bounds.width).toBeLessThanOrEqual(
+          panel.area.x + panel.area.width + 1e-9,
+        );
+      }
+    }
+  });
+
+  it('numbers a demoted annotation once, not once per panel', () => {
+    const layout = compileChart(facetedSpec, { width: 640, height: 400 });
+    const footnotes = layout.chrome.footnotes ?? [];
+
+    // The spec's annotations resolve into every panel, so a naive per-panel pool
+    // would repeat each footnote once per panel.
+    const texts = footnotes.map((f) => f.text);
+    expect(new Set(texts).size).toBe(texts.length);
+    expect(footnotes.length).toBeLessThanOrEqual(facetedSpec.annotations?.length ?? 0);
+
+    // The same spec annotation gets the same number in every panel it demoted in.
+    //
+    // Pair on `specIndex`, not on array position. A panel's annotation list is a
+    // FILTERED, zIndex-SORTED view of the spec's, so `first.annotations[i]` and
+    // `second.annotations[i]` are only the same authored annotation by luck --
+    // and the moment one panel drops one, this silently starts comparing two
+    // different callouts and asserting nothing.
+    const [first, second] = layout.facet!.panels;
+    const numbering = new Map<number, number>();
+    let pairsChecked = 0;
+
+    for (const panel of [first, second]) {
+      for (const a of panel.annotations) {
+        if (a.footnoteIndex == null || a.specIndex == null) continue;
+        const seen = numbering.get(a.specIndex);
+        if (seen === undefined) {
+          numbering.set(a.specIndex, a.footnoteIndex);
+        } else {
+          expect(a.footnoteIndex).toBe(seen);
+          pairsChecked++;
+        }
+      }
+    }
+
+    // Guard the guard: if nothing demoted in both panels there is no pairing to
+    // check, and every assertion above is vacuous.
+    expect(pairsChecked).toBeGreaterThan(0);
+  });
+
+  it('reserves a band for the footnote list below the grid', () => {
+    const withFootnotes = compileChart(facetedSpec, { width: 640, height: 400 });
+    const footnotes = withFootnotes.chrome.footnotes ?? [];
+    expect(footnotes.length).toBeGreaterThan(0);
+
+    const { annotations: _dropped, ...noAnnotations } = facetedSpec;
+    const baseline = compileChart(noAnnotations as ChartSpec, { width: 640, height: 400 });
+
+    const plotBottom = (l: typeof withFootnotes) => l.area.y + l.area.height;
+    const pulledUpBy = plotBottom(baseline) - plotBottom(withFootnotes);
+    const band = footnotes.length * withFootnotes.theme.fonts.sizes.small * 1.3 + 4;
+
+    expect(pulledUpBy).toBeGreaterThanOrEqual(band - 1e-9);
+  });
+
+  // Regression: footnote numbers were keyed on the annotation's position in the
+  // *resolved* array. With `resolve.scale.x: 'independent'` each panel derives its
+  // own domain, so an annotation on a category that only exists in one panel
+  // resolves there and is dropped from the other. Position i then means a
+  // different spec annotation in each panel, and the markers pointed at other
+  // panels' text: South's callout carried marker 1, and footnote 1 read "AAA…".
+  // Keying on the stamped `specIndex` is what fixes it.
+  const long = (s: string) => s.repeat(12);
+
+  // Each panel gets its own x domain, so the North categories don't exist in South
+  // and vice versa: every annotation resolves in exactly ONE panel and is dropped
+  // from the other. That's what makes resolved-array position stop meaning spec
+  // position, which is the whole point of these two tests.
+  const independentDomainSpec: ChartSpec = {
+    mark: 'bar',
+    autoThin: true,
+    resolve: { scale: { x: 'independent' } },
+    data: [
+      { region: 'North', cat: 'A', v: 10 },
+      { region: 'North', cat: 'B', v: 20 },
+      { region: 'North', cat: 'C', v: 15 },
+      { region: 'South', cat: 'X', v: 12 },
+      { region: 'South', cat: 'Y', v: 22 },
+      { region: 'South', cat: 'Z', v: 17 },
+    ],
+    encoding: {
+      x: { field: 'cat', type: 'nominal' },
+      y: { field: 'v', type: 'quantitative' },
+      facet: { field: 'region', type: 'nominal', columns: 2 },
+    },
+    // Interleaved on purpose: North, South, North, South. If numbering keys on
+    // resolved position, South's first annotation takes North's first number.
+    annotations: [
+      { type: 'text', x: 'A', y: 10, text: long('AAA ') },
+      { type: 'text', x: 'X', y: 12, text: long('XXX ') },
+      { type: 'text', x: 'B', y: 20, text: long('BBB ') },
+      { type: 'text', x: 'Y', y: 22, text: long('YYY ') },
+    ],
+  } as ChartSpec;
+
+  it('points every marker at its own text when panels resolve different annotations', () => {
+    const layout = compileChart(independentDomainSpec, { width: 420, height: 300 });
+
+    const footnotes = layout.chrome.footnotes ?? [];
+    expect(footnotes.length).toBeGreaterThan(0);
+    const textByNumber = new Map(footnotes.map((f) => [f.index, f.text]));
+
+    let checked = 0;
+    for (const panel of layout.facet!.panels) {
+      for (const a of panel.annotations) {
+        if (a.footnoteIndex == null) continue;
+        // The whole contract: follow the marker, land on your own words.
+        expect(textByNumber.get(a.footnoteIndex)).toBe(a.label?.text);
+        checked++;
+      }
+    }
+    expect(checked).toBeGreaterThan(0);
+  });
+
+  it('lists every demoted annotation exactly once, in every panel', () => {
+    const layout = compileChart(independentDomainSpec, { width: 420, height: 300 });
+
+    const texts = (layout.chrome.footnotes ?? []).map((f) => f.text);
+    expect(texts.length).toBeGreaterThan(0);
+    // No duplicates: a panel that demotes the same spec annotation reuses its
+    // number rather than appending a second copy of the text.
+    expect(new Set(texts).size).toBe(texts.length);
+    // And both panels' annotations are represented -- the pre-fix bug listed only
+    // the first panel's, and pointed the second panel's markers at them.
+    expect(texts.some((t) => t.startsWith('AAA'))).toBe(true);
+    expect(texts.some((t) => t.startsWith('XXX'))).toBe(true);
+  });
+});

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

@@ -1,6 +1,6 @@
 import type { ChartSpec, LayerSpec } from '@opendata-ai/openchart-core';
 import { describe, expect, it } from 'vitest';
-import { compileLayer } from '../compile';
+import { compileChart, compileLayer } from '../compile';
 import { flattenLayers } from '../compiler/normalize';
 
 // ---------------------------------------------------------------------------
@@ -322,6 +322,79 @@ describe('compileLayer', () => {
     expect(layout.area.width).toBeGreaterThan(0);
   });
 
+  it('unions the y domain even when x is nominal', () => {
+    // The channel loop used to `return` on the first channel that couldn't take
+    // part. x is visited first, so a nominal x abandoned y as well: each leaf
+    // then re-fit y to its own rows and every bar rendered full-height,
+    // regardless of value. Bars-plus-labels is the most common layered shape
+    // there is, so the function missed its own headline case.
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [{ n: 'A', v: 50 }],
+          encoding: {
+            x: { field: 'n', type: 'nominal' as const },
+            y: { field: 'v', type: 'quantitative' as const },
+          },
+        },
+        {
+          mark: 'bar' as const,
+          data: [{ n: 'B', v: 100 }],
+          encoding: {
+            x: { field: 'n', type: 'nominal' as const },
+            y: { field: 'v', type: 'quantitative' as const },
+          },
+        },
+      ],
+    };
+
+    const rects = compileLayer(spec, compileOpts).marks.filter((m) => m.type === 'rect');
+    expect(rects).toHaveLength(2);
+
+    // Sharing a zero-based domain, the 50-bar is exactly half the 100-bar.
+    const [half, full] = rects.map((r) => (r as { height: number }).height);
+    expect(half).toBeCloseTo(full / 2, 1);
+  });
+
+  it('gives layered bars the same geometry as the equivalent single chart', () => {
+    // The shared domain is pinned onto each leaf as `scale.domain`, and an
+    // explicit domain skips the `zero !== false` baselining a normal scale
+    // applies. Without folding zero back in, the union lands as a literal
+    // [50, 100] and the 50-bar collapses to a 1px sliver against its baseline.
+    const encoding = {
+      x: { field: 'n', type: 'nominal' as const },
+      y: { field: 'v', type: 'quantitative' as const },
+    };
+    const heights = (layout: { marks: Array<{ type: string }> }) =>
+      layout.marks
+        .filter((m) => m.type === 'rect')
+        .map((r) => Number((r as unknown as { height: number }).height.toFixed(1)));
+
+    const single = compileChart(
+      {
+        mark: 'bar',
+        data: [
+          { n: 'A', v: 50 },
+          { n: 'B', v: 100 },
+        ],
+        encoding,
+      },
+      compileOpts,
+    );
+    const layered = compileLayer(
+      {
+        layer: [
+          { mark: 'bar' as const, data: [{ n: 'A', v: 50 }], encoding },
+          { mark: 'bar' as const, data: [{ n: 'B', v: 100 }], encoding },
+        ],
+      },
+      compileOpts,
+    );
+
+    expect(heights(layered)).toEqual(heights(single));
+  });
+
   it('compiles a single-layer LayerSpec identically to a ChartSpec', () => {
     const chartData = [
       { name: 'A', value: 10 },
@@ -654,6 +727,52 @@ describe('compileLayer', () => {
     expect(uniqueLabels.has('Y')).toBe(true);
   });
 
+  /**
+   * `legends` is the slot the renderer iterates; `legend` is the back-compat
+   * alias. The merge used to rebuild only `legend`, leaving `legends[0]` as the
+   * primary leaf's *pre-merge* legend -- so the second layer's series silently
+   * vanished from the drawn key while `layout.legend` still listed it.
+   *
+   * The leaves must color on DIFFERENT fields to exercise this: sharing one field
+   * makes the primary spec's concatenated data yield both entries on its own, and
+   * the merge becomes a no-op that proves nothing.
+   */
+  it('merges layer legend entries into `legends`, not just `legend`', () => {
+    const spec: LayerSpec = {
+      layer: [
+        {
+          mark: 'bar' as const,
+          data: [{ name: 'A', value: 10, cat: 'Bars' }],
+          encoding: {
+            x: { field: 'name', type: 'ordinal' as const },
+            y: { field: 'value', type: 'quantitative' as const },
+            color: { field: 'cat', type: 'nominal' as const },
+          },
+        },
+        {
+          mark: 'line' as const,
+          data: [{ name: 'A', value: 8, series: 'Trend' }],
+          encoding: {
+            x: { field: 'name', type: 'ordinal' as const },
+            y: { field: 'value', type: 'quantitative' as const },
+            color: { field: 'series', type: 'nominal' as const },
+          },
+        },
+      ],
+    };
+
+    const layout = compileLayer(spec, compileOpts);
+    const rendered = layout.legends[0];
+    expect('entries' in rendered).toBe(true);
+    if (!('entries' in rendered)) return;
+
+    const labels = rendered.entries.map((e) => e.label);
+    expect(labels).toContain('Bars');
+    expect(labels).toContain('Trend');
+    // What renders is what `legend` advertises.
+    expect(labels).toEqual(layout.legend.entries.map((e) => e.label));
+  });
+
   it('remaps x-coordinates when area is layer 0 and bars are layer 1', () => {
     // Inverse ordering: area/line on left axis, bars on right. The x-remapping
     // logic must detect that layer 1 has bars and remap layer 0's area mark instead.

package/src/__tests__/helpers/invariants.ts

@@ -28,6 +28,16 @@ function isCategoricalLegend(legend: LegendLayout): legend is CategoricalLegendL
   return 'entries' in legend && (!legend.type || legend.type === 'categorical');
 }
 
+/**
+ * Every legend on the layout. Falls back to the singular `legend` slot so this
+ * still works against layouts built by older code paths (and by tests that
+ * hand-assemble a ChartLayout).
+ */
+function allLegends(layout: ChartLayout): LegendLayout[] {
+  if (layout.legends?.length) return layout.legends;
+  return layout.legend ? [layout.legend] : [];
+}
+
 // ---------------------------------------------------------------------------
 // Box extraction
 // ---------------------------------------------------------------------------
@@ -51,21 +61,27 @@ export function extractBoxes(layout: ChartLayout): NamedRect[] {
   // Chart area
   boxes.push({ ...layout.area, name: 'chartArea' });
 
-  // Legend bounds
-  boxes.push({ ...layout.legend.bounds, name: 'legend' });
-
-  // Legend entry positions (categorical only)
-  if (isCategoricalLegend(layout.legend) && layout.legend.entryPositions) {
-    const rowHeight = layout.legend.rowHeight ?? 16;
-    for (let i = 0; i < layout.legend.entryPositions.length; i++) {
-      const pos = layout.legend.entryPositions[i];
-      boxes.push({
-        x: pos.x,
-        y: pos.y,
-        width: pos.width,
-        height: rowHeight,
-        name: `legend-entry-${i}`,
-      });
+  // Legend bounds -- EVERY legend, not just the primary. A chart can carry both
+  // a color legend and a size legend; registering only `layout.legend` would
+  // leave the overlap invariants blind to exactly the element most likely to be
+  // mis-reserved, and they would pass a chart whose size legend sits on the plot.
+  for (const legend of allLegends(layout)) {
+    const suffix = legend.channel && legend.channel !== 'color' ? `-${legend.channel}` : '';
+    boxes.push({ ...legend.bounds, name: `legend${suffix}` });
+
+    // Legend entry positions (categorical only)
+    if (isCategoricalLegend(legend) && legend.entryPositions) {
+      const rowHeight = legend.rowHeight ?? 16;
+      for (let i = 0; i < legend.entryPositions.length; i++) {
+        const pos = legend.entryPositions[i];
+        boxes.push({
+          x: pos.x,
+          y: pos.y,
+          width: pos.width,
+          height: rowHeight,
+          name: `legend${suffix}-entry-${i}`,
+        });
+      }
     }
   }
 
@@ -179,14 +195,32 @@ export function checkLayoutInvariants(
 ): string[] {
   const violations: string[] = [];
 
-  // 1. Legend doesn't intrude into chartArea (top/bottom only; right/bottom-right
+  // 1. No legend intrudes into chartArea (top/bottom only; right/bottom-right
   //    use area.width reduction, so overlap is a horizontal concern checked by rule 4)
-  if (isCategoricalLegend(layout.legend)) {
-    const pos = layout.legend.position;
+  //
+  //    Checked for EVERY legend and every legend type. A size legend is not
+  //    categorical, and it is the one whose space is most likely to be
+  //    under-reserved -- gating this on `isCategoricalLegend` would skip it.
+  for (const legend of allLegends(layout)) {
+    if (legend.bounds.width <= 0 || legend.bounds.height <= 0) continue;
+    const pos = legend.position;
     if (pos === 'top' || pos === 'bottom') {
-      if (rectsOverlap(layout.legend.bounds, layout.area, 0.5)) {
+      if (rectsOverlap(legend.bounds, layout.area, 0.5)) {
+        const name = legend.channel ?? 'color';
+        violations.push(
+          `${name} legend intrudes into chartArea: legend=${formatRect(legend.bounds)} chartArea=${formatRect(layout.area)}`,
+        );
+      }
+    }
+  }
+
+  // 1b. Legends don't overlap each other.
+  const legends = allLegends(layout).filter((l) => l.bounds.width > 0 && l.bounds.height > 0);
+  for (let i = 0; i < legends.length; i++) {
+    for (let j = i + 1; j < legends.length; j++) {
+      if (rectsOverlap(legends[i].bounds, legends[j].bounds, 0.5)) {
         violations.push(
-          `legend intrudes into chartArea: legend=${formatRect(layout.legend.bounds)} chartArea=${formatRect(layout.area)}`,
+          `legends overlap: ${legends[i].channel ?? 'color'}=${formatRect(legends[i].bounds)} ${legends[j].channel ?? 'color'}=${formatRect(legends[j].bounds)}`,
         );
       }
     }