@micha.bigler/ui-core-micha 2.40.0 → 2.41.1

package/tests/ScatterChart.test.jsx

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import React from 'react';
+import i18next from 'i18next';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from '@mui/material/styles';
+
+const scatterSpy = vi.hoisted(() => vi.fn(({ children }) => <div data-testid="mui-scatter">{children}</div>));
+vi.mock('@mui/x-charts/ScatterChart', () => ({ ScatterChart: scatterSpy }));
+vi.mock('@mui/x-charts/hooks', () => ({
+  useXScale: () => (v) => v * 10,
+  useYScale: () => (v) => 100 - v * 10,
+}));
+
+import {
+  ScatterChart,
+  ScatterReferenceCurve,
+  ScatterReferenceLine,
+  scaleBubbleRadius,
+} from '../src/components/charts/ScatterChart';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
+const i18n = i18next.createInstance();
+i18n.init({ lng: 'en', resources: { en: { translation: {} } }, interpolation: { escapeValue: false } });
+
+function withProviders(children) {
+  return React.createElement(
+    ThemeProvider,
+    { theme },
+    React.createElement(I18nextProvider, { i18n }, children),
+  );
+}
+
+function renderScatter(props = {}) {
+  return render(withProviders(
+    React.createElement(ScatterChart, {
+      series: [{ id: 's', data: [{ x: 1, y: 1 }] }],
+      ...props,
+    }),
+  ));
+}
+
+// THEME-10 -- the formula the access-gap panel already hand-rolls
+// (`max(3, 10*sqrt(pop/maxPop))`), pinned as a pure function.
+describe('scaleBubbleRadius', () => {
+  it('matches the access-panel formula across the domain', () => {
+    expect(scaleBubbleRadius(0, 100)).toBe(3);
+    expect(scaleBubbleRadius(100, 100)).toBe(10);
+    expect(scaleBubbleRadius(25, 100)).toBeCloseTo(5, 5);
+  });
+
+  it('floors at the minimum radius for a degenerate or non-finite input', () => {
+    expect(scaleBubbleRadius(5, 0)).toBe(3);
+    expect(scaleBubbleRadius(NaN, 100)).toBe(3);
+    expect(scaleBubbleRadius(5, NaN)).toBe(3);
+  });
+});
+
+describe('ScatterChart mark count and colour default (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  // The failure mode nobody sees: a scatter that silently drops points.
+  it('renders every supplied point, none dropped', () => {
+    renderScatter({ series: [{ id: 's', data: [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }] }] });
+    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toHaveLength(3);
+  });
+
+  it('defaults a single undifferentiated series to the neutral role colour, not a series hue', () => {
+    renderScatter();
+    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual([theme.palette.text.secondary]);
+  });
+
+  it('uses the categorical palette, not the neutral tone, once a caller supplies multiple series', () => {
+    renderScatter({
+      series: [
+        { id: 'a', data: [{ x: 1, y: 1 }] },
+        { id: 'b', data: [{ x: 2, y: 2 }] },
+      ],
+    });
+    const { colors } = scatterSpy.mock.calls.at(-1)[0];
+    expect(colors).not.toEqual([theme.palette.text.secondary]);
+    expect(colors.length).toBeGreaterThan(1);
+  });
+
+  it('lets a caller override the palette explicitly (e.g. a family/role register)', () => {
+    renderScatter({ palette: ['#ABCDEF'] });
+    expect(scatterSpy.mock.calls.at(-1)[0].colors).toEqual(['#ABCDEF']);
+  });
+
+  // reviewer/ui_reviewer U3: a single series that sets its OWN colour is not "undifferentiated"
+  // -- the neutral default only applies when nothing else specifies a colour. This pins that
+  // ScatterChart itself never strips or overrides a series' own `.color` (MUI's own resolution
+  // of series.color vs. the colors fallback array is MUI's own contract, out of scope here --
+  // same boundary BarChart.test.jsx already draws for the identical `colors={palette ||
+  // neutralPalette.categorical}` pattern).
+  it('leaves a single series\' own explicit colour untouched and does not treat it as neutral', () => {
+    renderScatter({ series: [{ id: 's', color: '#123456', data: [{ x: 1, y: 1 }] }] });
+    const props = scatterSpy.mock.calls.at(-1)[0];
+    expect(props.series[0].color).toBe('#123456');
+    expect(props.colors).not.toEqual([theme.palette.text.secondary]);
+  });
+});
+
+describe('ScatterChart bubble z-order (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('sorts each series largest-first when sizeAccessor is set, so a small bubble is never hidden under a large one', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 10 }, { x: 2, y: 2, pop: 500 }, { x: 3, y: 3, pop: 100 }] }],
+    });
+    const data = scatterSpy.mock.calls.at(-1)[0].series[0].data;
+    expect(data.map((p) => p.pop)).toEqual([500, 100, 10]);
+  });
+
+  it('leaves point order untouched outside bubble mode', () => {
+    const original = [{ x: 1, y: 1 }, { x: 2, y: 2 }];
+    renderScatter({ series: [{ id: 's', data: original }] });
+    expect(scatterSpy.mock.calls.at(-1)[0].series[0].data).toEqual(original);
+  });
+});
+
+describe('ScatterChart per-point marker style (THEME-10)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('renders a hollow marker (fill: none) only for the point getPointStyle marks hollow', () => {
+    renderScatter({
+      getPointStyle: (p) => (p.isStatusQuo ? { hollow: true } : {}),
+      series: [{ id: 's', data: [{ x: 1, y: 1, isStatusQuo: true }, { x: 2, y: 2, isStatusQuo: false }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    const hollow = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const filled = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(hollow.container.querySelector('circle').getAttribute('fill')).toBe('none');
+    expect(filled.container.querySelector('circle').getAttribute('fill')).toBe('#111');
+  });
+
+  it('sizes a bubble marker from sizeAccessor via scaleBubbleRadius, resolved against the POST-sort index', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [{ id: 's', data: [{ x: 1, y: 1, pop: 0 }, { x: 2, y: 2, pop: 100 }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    // Data was re-sorted largest-first: index 0 is now pop:100, index 1 is pop:0.
+    const big = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const small = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(Number(big.container.querySelector('circle').getAttribute('r'))).toBeCloseTo(10, 5);
+    expect(Number(small.container.querySelector('circle').getAttribute('r'))).toBe(3);
+  });
+
+  // Live-render caught regression: bubble sizing must share ONE max across every series (a
+  // single comparable scale, matching the access-gap panel's own
+  // `maxPop = Math.max(1, ...points.map(p => p.population))` over ALL points regardless of
+  // division/settlement) -- a per-series max would let each series' own largest point always
+  // render at full radius, making cross-series bubble size meaningless.
+  it('sizes bubbles against ONE chart-wide max across all series, not a max per series', () => {
+    renderScatter({
+      sizeAccessor: (p) => p.pop,
+      series: [
+        { id: 'small-series', data: [{ x: 1, y: 1, pop: 100 }] },
+        { id: 'big-series', data: [{ x: 2, y: 2, pop: 1000 }] },
+      ],
+    });
+    const props = scatterSpy.mock.calls.at(-1)[0];
+    const Marker = props.slots.marker;
+    const markerProps = { color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    // If sized per-series, "small-series"'s own only point (pop:100) would be its own series
+    // max and render at full radius (10) -- wrongly implying it's as large as big-series's point.
+    const smallSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'small-series', dataIndex: 0 }));
+    const bigSeriesPoint = render(React.createElement(Marker, { ...markerProps, seriesId: 'big-series', dataIndex: 0 }));
+
+    const smallR = Number(smallSeriesPoint.container.querySelector('circle').getAttribute('r'));
+    const bigR = Number(bigSeriesPoint.container.querySelector('circle').getAttribute('r'));
+    expect(bigR).toBeCloseTo(10, 5);
+    expect(smallR).toBeCloseTo(10 * Math.sqrt(100 / 1000), 5);
+    expect(smallR).toBeLessThan(bigR);
+  });
+
+  it('renders a square/diamond shape when getPointStyle requests one', () => {
+    renderScatter({
+      getPointStyle: (p) => ({ shape: p.shape }),
+      series: [{ id: 's', data: [{ x: 1, y: 1, shape: 'square' }, { x: 2, y: 2, shape: 'diamond' }] }],
+    });
+    const Marker = scatterSpy.mock.calls.at(-1)[0].slots.marker;
+    const markerProps = { seriesId: 's', color: '#111', x: 0, y: 0, isHighlighted: false, isFaded: false, size: 5 };
+
+    const square = render(React.createElement(Marker, { ...markerProps, dataIndex: 0 }));
+    const diamond = render(React.createElement(Marker, { ...markerProps, dataIndex: 1 }));
+
+    expect(square.container.querySelector('rect')).not.toBeNull();
+    expect(diamond.container.querySelector('polygon')).not.toBeNull();
+  });
+});
+
+describe('ScatterReferenceCurve / ScatterReferenceLine (THEME-10)', () => {
+  it('draws a path through the curve points using the chart\'s own live scale', () => {
+    const { container } = render(React.createElement(ScatterReferenceCurve, {
+      points: [{ x: 0, y: 0 }, { x: 1, y: 1 }],
+      color: '#222',
+    }));
+    expect(container.querySelector('path').getAttribute('d')).toBe('M0,100 L10,90');
+  });
+
+  it('draws a labelled reference line at the given label position', () => {
+    const { container } = render(React.createElement(ScatterReferenceLine, {
+      from: { x: 0, y: 0 },
+      to: { x: 1, y: 1 },
+      label: 'No gap',
+      labelAt: { x: 0.9, y: 0.9 },
+      color: '#222',
+    }));
+    expect(container.querySelector('line')).not.toBeNull();
+    expect(container.textContent).toBe('No gap');
+  });
+
+  it('draws an unlabelled reference line when no label is given', () => {
+    const { container } = render(React.createElement(ScatterReferenceLine, {
+      from: { x: 0, y: 0 },
+      to: { x: 1, y: 1 },
+      color: '#222',
+    }));
+    expect(container.querySelector('line')).not.toBeNull();
+    expect(container.querySelector('text')).toBeNull();
+  });
+});

package/tests/apiClientPublicPaths.test.js

@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+// AUTH-5: addPublicPath/matchesPublicPath/removePublicPath must accept a RegExp alongside a
+// string, evaluated exclusively against pathname. Driven through the real response interceptor
+// (not a reimplementation of matchesPublicPath) so these tests fail if the wiring, not just the
+// matcher, breaks.
+//
+// The module keeps a `redirectingToLogin` latch that only resets on a real navigation, which
+// never happens in jsdom — so each test re-imports a fresh module instance via
+// vi.resetModules()/dynamic import, rather than sharing one import across the file.
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+function notAuthenticatedError(status = 401) {
+  return {
+    response: {
+      status,
+      data: { code: 'not_authenticated' },
+    },
+    config: {},
+  };
+}
+
+async function rejectThroughInterceptor(client, error) {
+  const handler = client.interceptors.response.handlers.find(Boolean);
+  try {
+    await handler.rejected(error);
+  } catch {
+    // The interceptor always re-rejects after handling — expected, not the assertion.
+  }
+}
+
+// jsdom's real `window.location` ties `pathname` to `history.pushState` through internal
+// wiring that a deleted/replaced `location` object doesn't preserve, and `assign` is
+// non-configurable so `vi.spyOn` can't touch it directly either. Sidestep both by installing a
+// fully synthetic `location` this file controls end to end — the interceptor only ever reads
+// `.pathname` and calls `.assign()`, so nothing else needs to be real.
+function installLocationMock(initialPathname = '/') {
+  const assign = vi.fn();
+  delete window.location;
+  window.location = { pathname: initialPathname, search: '', hash: '', assign };
+  return assign;
+}
+
+function setPathname(pathname) {
+  window.location.pathname = pathname;
+}
+
+describe('apiClient public-path registry (AUTH-5)', () => {
+  let assignSpy;
+  let apiClient;
+  let addPublicPath;
+  let removePublicPath;
+
+  beforeEach(async () => {
+    vi.resetModules();
+    ({ default: apiClient, addPublicPath, removePublicPath } = await import('../src/auth/apiClient'));
+    assignSpy = installLocationMock();
+  });
+
+  it('string registration still matches by prefix (regression)', async () => {
+    setPathname('/custom-public');
+    addPublicPath('/custom-public');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('a bare "/" registration does not match a deeper path via startsWith (regression)', async () => {
+    addPublicPath('/');
+    setPathname('/somewhere-else');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).toHaveBeenCalledWith('/login');
+  });
+
+  it('a registered RegExp matches the intended dynamic path', async () => {
+    addPublicPath(/^\/[^/]+\/team$/);
+    setPathname('/jg-bern/team');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('a non-matching path still redirects even with an unrelated RegExp registered', async () => {
+    addPublicPath(/^\/[^/]+\/team$/);
+    setPathname('/account');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).toHaveBeenCalledWith('/login');
+  });
+
+  it('the RegExp is tested against pathname, not the query string', async () => {
+    // A pattern that would only match if the query string leaked into the tested value.
+    setPathname('/blocked-page');
+    window.location.search = '?next=/public';
+    addPublicPath(/public/);
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).toHaveBeenCalledWith('/login');
+  });
+
+  it('the RegExp is tested against pathname, not the fragment', async () => {
+    setPathname('/blocked-page');
+    window.location.hash = '#panel';
+    addPublicPath(/panel/);
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).toHaveBeenCalledWith('/login');
+  });
+
+  it('a pathname-anchored RegExp still matches when the URL also carries a query string', async () => {
+    setPathname('/public');
+    window.location.search = '?next=/admin';
+    addPublicPath(/^\/public$/);
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('removePublicPath removes a RegExp entry by identity', async () => {
+    const pattern = /^\/temp$/;
+    addPublicPath(pattern);
+    removePublicPath(pattern);
+    setPathname('/temp');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).toHaveBeenCalledWith('/login');
+  });
+
+  it('removePublicPath does not remove a RegExp entry given only an equal-looking literal', async () => {
+    addPublicPath(/^\/temp$/);
+    removePublicPath(/^\/temp$/); // a different object, same source — must NOT remove the original
+    setPathname('/temp');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('removePublicPath cannot remove a builtin path', async () => {
+    removePublicPath('/login');
+    setPathname('/login');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('a stateful (global-flag) RegExp matches consistently across repeated calls', async () => {
+    // Without resetting lastIndex, a `g`-flagged RegExp would alternate
+    // matched/unmatched across calls since it is reused from the module-level Set.
+    addPublicPath(/^\/public$/g);
+    setPathname('/public');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+    expect(assignSpy).not.toHaveBeenCalled();
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+
+  it('a RegExp entry in the registry does not break evaluation of string entries', async () => {
+    addPublicPath(/^\/gallery\/\d+$/);
+    addPublicPath('/custom-string');
+    setPathname('/custom-string');
+
+    await rejectThroughInterceptor(apiClient, notAuthenticatedError());
+
+    expect(assignSpy).not.toHaveBeenCalled();
+  });
+});

package/tests/chartDefaults.test.js

@@ -16,8 +16,10 @@ import { LineChart } from '../src/components/charts/LineChart';
 import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
 import {
   defaultNumericTickFormatter,
+  PACKAGE_DEFAULT_MARGIN,
   sizeYAxisForContent,
   withAxisDefaults,
+  withMarginDefaults,
 } from '../src/components/charts/chartDefaults';
 import { createAppTheme } from '../src/theme/createAppTheme';
 
@@ -158,15 +160,64 @@ describe('chart chrome defaults', () => {
     expect(barSpy.mock.calls.at(-1)[0].xAxis[0].scaleType).toBe('band');
   });
 
-  it('adds a font-and-angle-derived bottom margin only for rotated tick labels', () => {
+  it('adds a font-and-angle-derived EXTRA bottom margin, on top of the package default, only for rotated tick labels', () => {
     renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: -45 } }] });
     const rotatedProps = barSpy.mock.calls.at(-1)[0];
-    expect(rotatedProps.margin.bottom).toBeGreaterThan(20);
+    expect(rotatedProps.margin.bottom).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom);
     expect(rotatedProps.xAxis[0].height).toBeGreaterThan(45);
 
     cleanup();
     renderBar({ xAxis: [{ data: ['Jan', 'Feb'], tickLabelStyle: { angle: 0 } }] });
-    expect(barSpy.mock.calls.at(-1)[0].margin).toBeUndefined();
+    expect(barSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+  });
+
+  // THEME-11 -- the package now forms an opinion on chart margins (was: MUI's own flat 20px on
+  // every side, unconditionally, because this package never set one).
+  describe('withMarginDefaults / package margin default (THEME-11)', () => {
+    it('applies the package default on every side when the caller sets no margin', () => {
+      renderBar();
+      expect(barSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+    });
+
+    // Trap 1 named in the WO: a package-level default injected BEFORE spaceForRotatedTicks'
+    // own `margin?.bottom != null` check would make every rotated-tick chart think the caller
+    // set bottom, and lose its extra rotation space entirely.
+    it('still gives a rotated-tick chart its enlarged bottom margin, not the flat package default', () => {
+      renderBar({ xAxis: [{ data: ['January', 'February'], tickLabelStyle: { angle: -90 } }] });
+      const props = barSpy.mock.calls.at(-1)[0];
+      expect(props.margin.bottom).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom + 10);
+    });
+
+    // Scope 1's merge semantics: a caller-supplied PARTIAL margin keeps its own value on the
+    // side it set and gets the package default on the others -- never MUI's wider 20px, and
+    // never silently reset to the package default on the side the caller DID set.
+    it('merges a caller-supplied partial margin per side, not wholesale', () => {
+      renderBar({ margin: { left: 60 } });
+      const { margin } = barSpy.mock.calls.at(-1)[0];
+      expect(margin.left).toBe(60);
+      expect(margin.top).toBe(PACKAGE_DEFAULT_MARGIN.top);
+      expect(margin.bottom).toBe(PACKAGE_DEFAULT_MARGIN.bottom);
+      expect(margin.right).toBe(PACKAGE_DEFAULT_MARGIN.right);
+    });
+
+    it('keeps every side a caller sets when they supply a full margin object', () => {
+      renderBar({ margin: { top: 1, bottom: 2, left: 3, right: 4 } });
+      expect(barSpy.mock.calls.at(-1)[0].margin).toEqual({ top: 1, bottom: 2, left: 3, right: 4 });
+    });
+
+    // A LINEAR x-axis's last tick label sits AT the plot edge (unlike a band axis's centred
+    // ticks) and overhangs by about half its width -- the reason `right` is trimmed less than
+    // `left`/`bottom`. Pinned here as a value; the actual no-clip claim is verified by the
+    // rendered check (WO Part C), not derivable from a mocked MUI component.
+    it('keeps a wider default right margin than left/bottom, for a linear x-axis\'s edge-sitting last tick', () => {
+      expect(PACKAGE_DEFAULT_MARGIN.right).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.left);
+      expect(PACKAGE_DEFAULT_MARGIN.right).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.bottom);
+    });
+
+    it('applies the SAME package default to LineChart as BarChart', () => {
+      renderLine();
+      expect(lineSpy.mock.calls.at(-1)[0].margin).toEqual(PACKAGE_DEFAULT_MARGIN);
+    });
   });
 
   it('uses the series colour as the fill when a caller opts line markers back in', () => {
@@ -361,3 +412,24 @@ describe('sizeYAxisForContent (THEME-9)', () => {
     expect(secondary.width).toBeGreaterThan(primary.width);
   });
 });
+
+// THEME-11 -- pure-function contract of the merge helper itself, independent of any chart
+// component wiring (that's covered above, in 'chart chrome defaults').
+describe('withMarginDefaults (THEME-11)', () => {
+  it('returns the package default untouched when the caller sets no margin', () => {
+    expect(withMarginDefaults(undefined)).toEqual(PACKAGE_DEFAULT_MARGIN);
+  });
+
+  it('merges a partial object per side', () => {
+    expect(withMarginDefaults({ top: 40 })).toEqual({ ...PACKAGE_DEFAULT_MARGIN, top: 40 });
+  });
+
+  it('expands a numeric shorthand margin to all four sides before merging', () => {
+    expect(withMarginDefaults(5)).toEqual({ top: 5, bottom: 5, left: 5, right: 5 });
+  });
+
+  it('leaves a fully-specified caller margin untouched', () => {
+    const full = { top: 1, bottom: 2, left: 3, right: 4 };
+    expect(withMarginDefaults(full)).toEqual(full);
+  });
+});

package/tests/chartsPalette.test.js

@@ -37,6 +37,26 @@ describe('chart palette and formatters', () => {
     expect(createChartFormatters('fr-FR').ratio(1.5)).toContain('1');
   });
 
+  // THEME-10: an undifferentiated scatter cloud (no colour dimension encoded) needs a single
+  // neutral tone, distinct from the categorical/sequential arrays above.
+  it('resolves a single neutral tone from theme.palette.text.secondary', () => {
+    const theme = {
+      palette: {
+        mode: 'light',
+        primary: { main: 'primary-main' },
+        secondary: { main: 'secondary-main' },
+        info: { main: 'info-main' },
+        success: { main: 'success-main' },
+        warning: { main: 'warning-main' },
+        action: { disabled: 'action-disabled' },
+        text: { secondary: 'text-secondary' },
+        divider: 'divider',
+      },
+    };
+
+    expect(getNeutralChartPalette(theme).neutral).toBe('text-secondary');
+  });
+
   it('uses the theme categorical ramp when one is present', () => {
     const ramp = ['series-1', 'series-2', 'series-3'];
     const theme = {