@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/tests/createAppThemeDark.test.js

@@ -1,127 +0,0 @@
-import { darken, lighten } from '@mui/material/styles';
-import { describe, expect, it } from 'vitest';
-
-import {
-  assertThemeComplete,
-  calculateContrastRatio,
-  createAppTheme,
-} from '../src/theme';
-import {
-  BASELINE_PALETTE_DARK,
-  SERIES_COLOURS,
-  DARK_OVERLAY_SHADOW,
-  DARK_OVERLAY_SURFACE,
-  DARK_SCRIM,
-} from '../src/theme/tokens';
-
-const dark = (primary = '#468AB2', extra = {}) => createAppTheme({
-  palette: { mode: 'dark', primary: { main: primary }, ...extra },
-});
-
-describe('createAppTheme dark baseline', () => {
-  it('is complete, including a primary that must be lightened', () => {
-    expect(assertThemeComplete(dark()).findings).toEqual([]);
-    expect(assertThemeComplete(dark('#2F4F96')).findings).toEqual([]);
-  });
-
-  it('derives focus contrast against page and paper in both modes', () => {
-    for (const theme of [
-      createAppTheme({ palette: { primary: { main: '#0F62FE' } } }),
-      dark(),
-    ]) {
-      expect(calculateContrastRatio(theme.palette.controlBorder.focus, theme.palette.background.default)).toBeGreaterThanOrEqual(3);
-      expect(calculateContrastRatio(theme.palette.controlBorder.focus, theme.palette.background.paper)).toBeGreaterThanOrEqual(3);
-    }
-  });
-
-  it('derives dark control borders and focus from the rules', () => {
-    const theme = dark();
-    expect(theme.palette.controlBorder.main).toBe('rgba(230,235,239,0.38)');
-    expect(theme.palette.controlBorder.hover).toBe('rgba(230,235,239,0.53)');
-    expect(theme.palette.controlBorder.error).toBe('#E58B80');
-    expect(theme.palette.controlBorder.focus).toBe('#468AB2');
-    expect(dark('#2F4F96').palette.controlBorder.focus).toBe('#6D84B6');
-    const rgbInk = dark('#468AB2', { ink: { primary: 'rgb(230, 235, 239)' } });
-    expect(rgbInk.palette.controlBorder.main).toBe('rgba(230,235,239,0.38)');
-    const ownFocus = dark('#468AB2', { controlBorder: { focus: '#FFFFFF' } });
-    expect(ownFocus.palette.controlBorder.focus).toBe('#FFFFFF');
-  });
-
-  it('recomputes primary shades for a lightened primary', () => {
-    const theme = dark('#2F4F96');
-    expect(theme.palette.primary.light).toBe(lighten('#6D84B6', 0.2));
-    expect(theme.palette.primary.dark).toBe(darken('#6D84B6', 0.3));
-  });
-
-  it('uses the complete dark status family', () => {
-    for (const status of ['success', 'warning', 'error', 'info']) {
-      expect(dark().palette[status]).toMatchObject(BASELINE_PALETTE_DARK[status]);
-    }
-    expect(dark().palette.stale).toMatchObject(BASELINE_PALETTE_DARK.stale);
-  });
-
-  it.each([
-    ['#468AB2', '#468AB2'],
-    ['#2F4F96', '#6D84B6'],
-    ['#432CA1', '#8576C2'],
-    ['#D49040', '#D49040'],
-  ])('applies the dark primary rule to %s', (input, expected) => {
-    const theme = dark(input);
-    expect(theme.palette.primary.main).toBe(expected);
-    expect(theme.palette.primary.contrastText).toBe('#14181B');
-  });
-
-  it('keeps baseline statuses on webshop-guenter page and protects failing baseline values', () => {
-    const webshop = dark('#D49040', { background: { default: '#0E0B08', paper: '#171209' } });
-    for (const status of ['success', 'warning', 'error', 'info']) {
-      expect(webshop.palette[status].main).toBe(BASELINE_PALETTE_DARK[status].main);
-    }
-    const failing = dark('#468AB2', { background: { default: '#707070', paper: '#787878' } });
-    expect(failing.palette.success.main).not.toBe(BASELINE_PALETTE_DARK.success.main);
-    expect(calculateContrastRatio(failing.palette.success.main, failing.palette.background.default)).toBeGreaterThanOrEqual(4.5);
-    for (const status of ['success', 'warning', 'error', 'info']) {
-      const net = dark('#468AB2', { background: { default: '#707070', paper: '#787878' } }).palette[status];
-      expect(calculateContrastRatio(net.main, '#707070')).toBeGreaterThanOrEqual(4.5);
-      expect(calculateContrastRatio(net.main, net.bg)).toBeGreaterThanOrEqual(4.5);
-    }
-    const supplied = dark('#468AB2', {
-      background: { default: '#707070' },
-      success: { main: '#123456' },
-    });
-    expect(supplied.palette.success.main).toBe('#123456');
-  });
-
-  it('uses the dark overlay surface, shadow, scrim, and shadow token', () => {
-    const theme = dark();
-    for (const component of ['MuiDialog', 'MuiMenu', 'MuiPopover', 'MuiDrawer']) {
-      expect(theme.components[component].styleOverrides.paper).toMatchObject({
-        backgroundColor: DARK_OVERLAY_SURFACE,
-        boxShadow: DARK_OVERLAY_SHADOW,
-      });
-    }
-    expect(theme.components.MuiBackdrop.styleOverrides.root.backgroundColor).toBe(DARK_SCRIM);
-    expect(theme.shadow.overlay).toBe(DARK_OVERLAY_SHADOW);
-  });
-
-  it('lightens baseline series for baseline paper and adapts to app paper', () => {
-    const baseline = dark().palette.dataSeries.categorical;
-    expect(baseline).toEqual(['#506BA3', '#3E80B8', '#2E8F8A', '#7A5FA8', '#A1588C', '#8A7355']);
-    const adapted = dark('#D49040', { background: { paper: '#171209' } }).palette.dataSeries.categorical;
-    expect(adapted).toHaveLength(SERIES_COLOURS.length);
-    adapted.forEach((colour) => {
-      expect(calculateContrastRatio(colour, '#171209')).toBeGreaterThanOrEqual(3);
-    });
-  });
-
-  it('leaves app-supplied series untouched', () => {
-    const series = ['#111111', '#222222', '#333333'];
-    expect(dark('#468AB2', { dataSeries: { categorical: series } }).palette.dataSeries.categorical).toEqual(series);
-  });
-
-  it('resolves dark autofill from paper and primary ink', () => {
-    const input = dark().components.MuiOutlinedInput.styleOverrides.input['&:-webkit-autofill'];
-    expect(input.WebkitBoxShadow).toBe('0 0 0 100px #1B2126 inset');
-    expect(input.WebkitTextFillColor).toBe('#E6EBEF');
-    expect(input.caretColor).toBe('#E6EBEF');
-  });
-});

package/tests/createAppThemeLightGuard.test.js

@@ -1,40 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { describe, expect, it } from 'vitest';
-
-import { createAppTheme } from '../src/theme';
-
-const sortValue = (value) => {
-  if (typeof value === 'function') return String(value);
-  if (Array.isArray(value)) return value.map(sortValue);
-  if (value && typeof value === 'object') {
-    return Object.fromEntries(Object.keys(value).sort().map((key) => [key, sortValue(value[key])]));
-  }
-  return value;
-};
-
-const fixture = JSON.parse(readFileSync(new URL('./fixtures/light-theme-baseline.json', import.meta.url)));
-
-function snapshot(baselinePalette = {}) {
-  return sortValue({
-    baseline: createAppTheme({ palette: { primary: { main: '#0F62FE' }, ...baselinePalette } }),
-    override: createAppTheme({
-      palette: {
-        primary: { main: '#0F62FE' },
-        background: { default: '#F0F2F4' },
-        success: { main: '#126B36' },
-      },
-      typography: { fontFamily: 'Fixture Sans' },
-    }),
-  });
-}
-
-describe('createAppTheme light regression guard', () => {
-  it('matches the pre-change serialized light themes exactly', () => {
-    expect(snapshot()).toEqual(fixture);
-  });
-
-  it('detects a changed light value', () => {
-    // Produced by the real factory: one different light value must differ from the fixture.
-    expect(snapshot({ background: { default: '#FAFBFC' } })).not.toEqual(fixture);
-  });
-});

package/tests/createAppThemePageContrast.test.js

@@ -1,108 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { assertThemeComplete, createAppTheme } from '../src/theme';
-import { BASELINE_PALETTE } from '../src/theme/tokens';
-
-const primary = { main: '#0F62FE' };
-const pageBackgrounds = [
-  '#FAFAFA',
-  '#D8E4E1',
-  '#eceae2',
-  '#E8EAF6',
-  '#E6EAF0',
-  '#E398C7',
-];
-
-function pageContrastFindings(theme) {
-  return assertThemeComplete(theme).findings.filter(({ surface }) => (
-    /^contrast\.(success|warning|error|info)\.main-on-(white|page)$/.test(surface)
-      || surface.startsWith('contrast.controlBorder.')
-  ));
-}
-
-describe('createAppTheme page-sensitive baseline contrast', () => {
-  it.each(pageBackgrounds)('derives baseline colours for page %s', (background) => {
-    const theme = createAppTheme({ palette: { primary, background: { default: background } } });
-
-    expect(pageContrastFindings(theme)).toEqual([]);
-  });
-
-  it('keeps all baseline values byte-identical when they already pass', () => {
-    const theme = createAppTheme({ palette: { primary } });
-
-    for (const status of ['success', 'warning', 'error', 'info']) {
-      expect(theme.palette[status]).toMatchObject({
-        main: BASELINE_PALETTE[status].main,
-        light: BASELINE_PALETTE[status].light,
-        dark: BASELINE_PALETTE[status].dark,
-        contrastText: BASELINE_PALETTE[status].contrastText,
-      });
-    }
-    for (const state of ['main', 'hover', 'error']) {
-      expect(theme.palette.controlBorder[state]).toBe(BASELINE_PALETTE.controlBorder[state]);
-    }
-  });
-
-  it('leaves app-supplied failing status and control-border values untouched', () => {
-    const appConfig = {
-      palette: {
-        primary,
-        background: { default: '#E398C7' },
-        success: { main: '#A5D6A7' },
-        warning: { main: '#FFE082' },
-        controlBorder: { main: '#FFFFFF', hover: '#FAFAFA', error: '#FFCDD2' },
-      },
-    };
-    const theme = createAppTheme(appConfig);
-    const findings = assertThemeComplete(theme).findings.map(({ surface }) => surface);
-
-    expect(theme.palette.success.main).toBe(appConfig.palette.success.main);
-    expect(theme.palette.warning.main).toBe(appConfig.palette.warning.main);
-    expect(theme.palette.controlBorder.main).toBe(appConfig.palette.controlBorder.main);
-    expect(theme.palette.controlBorder.hover).toBe(appConfig.palette.controlBorder.hover);
-    expect(theme.palette.controlBorder.error).toBe(appConfig.palette.controlBorder.error);
-    for (const surface of [
-      'contrast.success.main-on-white',
-      'contrast.success.main-on-page',
-      'contrast.warning.main-on-white',
-      'contrast.warning.main-on-page',
-      'contrast.controlBorder.main-on-white',
-      'contrast.controlBorder.main-on-page',
-      'contrast.controlBorder.hover-on-white',
-      'contrast.controlBorder.hover-on-page',
-      'contrast.controlBorder.error-on-white',
-      'contrast.controlBorder.error-on-page',
-    ]) {
-      expect(findings).toContain(surface);
-    }
-
-    // The two untouched status keys (error/info) -- both fail on ygbs's pink
-    // per the Envelope's measured table -- must still derive normally, proving
-    // rule 3 is checked per status key, not per whole-status-object: this
-    // config only overrides success/warning, so error/info stay baseline-owned
-    // and should move off their baseline hex and stop failing.
-    expect(theme.palette.error.main).not.toBe(BASELINE_PALETTE.error.main);
-    expect(theme.palette.info.main).not.toBe(BASELINE_PALETTE.info.main);
-    expect(findings).not.toContain('contrast.error.main-on-page');
-    expect(findings).not.toContain('contrast.info.main-on-page');
-  });
-
-  it('terminates and leaves findings when the darkening cap cannot pass', () => {
-    const create = () => createAppTheme({
-      palette: { primary, background: { default: '#666666' } },
-    });
-
-    expect(create).not.toThrow();
-    const theme = create();
-    expect(theme.palette.success.main).toBeDefined();
-    expect(theme.palette.warning.main).toBeDefined();
-    expect(theme.palette.error.main).toBeDefined();
-    expect(theme.palette.info.main).toBeDefined();
-    expect(theme.palette.controlBorder.main).toBeDefined();
-    expect(theme.palette.controlBorder.hover).toBeDefined();
-    expect(theme.palette.controlBorder.error).toBeDefined();
-    expect(assertThemeComplete(theme).findings.map(({ surface }) => surface)).toContain(
-      'contrast.success.main-on-page',
-    );
-  });
-});

package/tests/createAppThemeTypography.test.js

@@ -1,53 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { assertThemeComplete, createAppTheme } from '../src/theme';
-import { breakpointDownQuery } from '../src/theme/tokens';
-
-const themes = [
-  ['light', createAppTheme({ palette: { primary: { main: '#0F62FE' } } })],
-  ['dark', createAppTheme({ palette: { mode: 'dark', primary: { main: '#468AB2' } } })],
-];
-
-const decidedSizes = {
-  h1: '36px',
-  h2: '32px',
-  h3: '28px',
-  h4: '24px',
-  h5: '20px',
-  subtitle1: '13px',
-};
-
-describe('createAppTheme frozen typography scale', () => {
-  it.each(themes)('uses the decided type sizes in %s mode', (_mode, theme) => {
-    for (const [variant, fontSize] of Object.entries(decidedSizes)) {
-      expect(theme.typography[variant].fontSize).toBe(fontSize);
-    }
-  });
-
-  it.each(themes)('steps h4 down below the theme sm breakpoint in %s mode', (_mode, theme) => {
-    const query = breakpointDownQuery(theme.breakpoints.values.sm);
-
-    expect(Object.keys(theme.typography.h4)).toContain(query);
-    expect(theme.typography.h4[query]).toEqual({ fontSize: '23px' });
-  });
-
-  it('reports no typography finding for the baseline theme', () => {
-    const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
-
-    expect(Object.keys(theme.typography.h4)).toContain(breakpointDownQuery(theme.breakpoints.values.sm));
-    expect(assertThemeComplete(theme).findings.filter(({ surface }) =>
-      surface.startsWith('typography.'),
-    )).toEqual([]);
-  });
-
-  it('moves the h4 step with an app-overridden sm breakpoint', () => {
-    const theme = createAppTheme({
-      palette: { primary: { main: '#0F62FE' } },
-      breakpoints: { values: { sm: 480 } },
-    });
-    const keys = Object.keys(theme.typography.h4).filter((key) => key.startsWith('@media'));
-
-    expect(keys).toEqual([breakpointDownQuery(480)]);
-    expect(theme.typography.h4[keys[0]]).toEqual({ fontSize: '23px' });
-  });
-});

package/tests/errorCallSiteGuard.test.js

@@ -1,32 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { describe, expect, it } from 'vitest';
-
-const SOURCE_DIRECTORY = path.resolve('src');
-const OLD_DISPLAY_PATTERN = /(setErrorKey|setError|setAgentErrorKey|alert)\(.*\.code|t\(\w+\??\.code/;
-
-function jsxFiles(directory) {
-  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
-    const entryPath = path.join(directory, entry.name);
-    if (entry.isDirectory()) return jsxFiles(entryPath);
-    return entry.isFile() && entry.name.endsWith('.jsx') ? [entryPath] : [];
-  });
-}
-
-describe('auth error display call-site guard', () => {
-  it('has no old raw-code display pattern in JSX source', () => {
-    const matches = [];
-    for (const file of jsxFiles(SOURCE_DIRECTORY)) {
-      const lines = fs.readFileSync(file, 'utf8').split(/\r?\n/);
-      lines.forEach((line, index) => {
-        if (OLD_DISPLAY_PATTERN.test(line)) matches.push(`${file}:${index + 1}: ${line}`);
-      });
-    }
-    expect(matches).toEqual([]);
-  });
-
-  it('would catch a restored old-style call site', () => {
-    expect(OLD_DISPLAY_PATTERN.test("setErrorKey(err.code || 'Auth.X');")).toBe(true);
-    expect(OLD_DISPLAY_PATTERN.test("alert(t(err?.code || 'Auth.X'));" )).toBe(true);
-  });
-});

package/tests/exportChart.test.js

@@ -1,313 +0,0 @@
-// @vitest-environment jsdom
-import {
-  afterEach, beforeEach, describe, expect, it, vi,
-} from 'vitest';
-
-import { exportChartPng, exportChartSvg } from '../src/components/charts/exportChart';
-
-// UCM-CHART-17: a container shaped like `AccessGapScatterPanel` -- the chart's own MUI surface,
-// PLUS a second SVG (the hand-built size key) and an HTML legend beside it, exactly the shape that
-// broke "the first SVG" (scope item 3) and dropped the legend from every export (Part A, defect 2).
-function buildContainer() {
-  const container = document.createElement('div');
-  container.innerHTML = `
-    <div class="legend">Legend HTML</div>
-    <svg class="MuiChartsSurface-root" width="300" height="200">
-      <g><text class="MuiChartsAxis-tickLabel">Alpha</text></g>
-      <line class="MuiChartsAxis-line" x1="0" x2="300" y1="10" y2="10"></line>
-    </svg>
-    <svg class="size-key" width="40" height="40"><circle r="4"></circle></svg>
-  `;
-  document.body.appendChild(container);
-  return container;
-}
-
-describe('exportChartSvg (UCM-CHART-17)', () => {
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('resolves with its existing signature and returns a Blob', () => {
-    const container = buildContainer();
-    const blob = exportChartSvg(container, 'chart.svg');
-    expect(blob).toBeInstanceOf(Blob);
-    expect(blob.type).toBe('image/svg+xml;charset=utf-8');
-  });
-
-  // reviewer finding: MUI's ChartsSurface only ever carries a `viewBox` -- its real pixel size is
-  // CSS (`width: 100%`), which has nothing to resolve against once cloned out of the page. Without
-  // an explicit width/height a standalone viewer falls back to the SVG UA default (300x150), i.e.
-  // the wrong size regardless of how faithfully everything else is styled.
-  it('sets explicit width/height attributes on the exported SVG, not just the source viewBox', async () => {
-    const container = buildContainer();
-    const blob = exportChartSvg(container);
-    const text = await blob.text();
-    expect(text).toMatch(/<svg[^>]*\bwidth="\d+"/);
-    expect(text).toMatch(/<svg[^>]*\bheight="\d+"/);
-  });
-
-  // WO scope item 3: the legend sits BEFORE the chart's own svg in this fixture (as it does in
-  // `AccessGapScatterPanel`), and a second, unrelated SVG (the size key) sits after it -- "the
-  // first SVG" would grab neither of those correctly. `MuiChartsSurface-root` is the deliberate,
-  // non-positional signal.
-  it('takes the chart surface deliberately, not the first (or any other) SVG in the container', async () => {
-    const container = buildContainer();
-    const blob = exportChartSvg(container);
-    const text = await blob.text();
-    expect(text).toContain('MuiChartsSurface-root');
-    expect(text).toContain('Alpha');
-    expect(text).not.toContain('size-key');
-  });
-
-  // WO defect 1 + Unit tests: the clone must carry the RESOLVED style, not just the (rule-less,
-  // once serialised standalone) class name -- this is the whole point of the fix.
-  it('inlines computed styles for tick labels and axis strokes onto the cloned SVG', async () => {
-    const container = buildContainer();
-    const tickLabel = container.querySelector('.MuiChartsAxis-tickLabel');
-    tickLabel.style.fontFamily = 'DM Sans';
-    tickLabel.style.fill = 'rgb(10, 20, 30)';
-    const axisLine = container.querySelector('.MuiChartsAxis-line');
-    axisLine.style.stroke = 'rgb(200, 200, 200)';
-
-    const blob = exportChartSvg(container);
-    const text = await blob.text();
-    expect(text).toContain('font-family: &quot;DM Sans&quot;');
-    expect(text).toContain('fill: rgb(10, 20, 30)');
-    expect(text).toContain('stroke: rgb(200, 200, 200)');
-  });
-
-  it('does not gain the legend or size key -- true vector, chart only', async () => {
-    const container = buildContainer();
-    const blob = exportChartSvg(container);
-    const text = await blob.text();
-    expect(text).not.toContain('Legend HTML');
-  });
-
-  // UCM-CHART-18 scope item 3: a rotated element (e.g. a legend swatch rotated into a diamond)
-  // must export rotated -- `transform` was missing from the inlined properties entirely. Applied
-  // via a STYLESHEET rule, not an inline style directly on the source node -- `cloneNode` copies
-  // an element's own inline `style` ATTRIBUTE verbatim regardless of what `inlineComputedStyles`
-  // does, which would make a test that sets `tickLabel.style.transform` pass whether or not
-  // `transform` is actually in the inlined property list (exactly the "asserts a number, proves
-  // nothing" trap the WO's risk section warns about) -- a class-based rule is only ever picked up
-  // through `getComputedStyle`, so it genuinely exercises `inlineComputedStyles`.
-  it('inlines the resolved transform onto the cloned chart surface', async () => {
-    const container = buildContainer();
-    const style = document.createElement('style');
-    style.textContent = '.rotated-probe { transform: rotate(45deg); transform-origin: 20% 30%; }';
-    document.head.appendChild(style);
-    const tickLabel = container.querySelector('.MuiChartsAxis-tickLabel');
-    tickLabel.classList.add('rotated-probe');
-
-    const blob = exportChartSvg(container);
-    const text = await blob.text();
-    document.head.removeChild(style);
-    expect(text).toMatch(/transform:\s*rotate\(45deg\)/);
-    expect(text).toMatch(/transform-origin:\s*20%\s*30%/);
-  });
-
-  it('throws when the container has no SVG at all', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    expect(() => exportChartSvg(container)).toThrow(/does not contain an SVG/);
-  });
-});
-
-describe('exportChartPng (UCM-CHART-17)', () => {
-  let originalGetContext;
-  let originalToBlob;
-  let originalImage;
-
-  beforeEach(() => {
-    originalGetContext = HTMLCanvasElement.prototype.getContext;
-    originalToBlob = HTMLCanvasElement.prototype.toBlob;
-    // jsdom has no real canvas/image-decoding backend (`getContext('2d')` returns null, `Image`
-    // never fires `onload`) -- this stands in for the platform pipeline `exportChartPng` drives,
-    // to test its OWN plumbing (does it resolve, with the right Blob type, for the documented
-    // input shape), not visual output. Visual correctness is the WO's own explicit non-unit-test
-    // gate: open the exported files.
-    HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
-      fillStyle: '',
-      fillRect: vi.fn(),
-      drawImage: vi.fn(),
-    }));
-    HTMLCanvasElement.prototype.toBlob = function toBlob(callback) {
-      callback(new Blob(['png-bytes'], { type: 'image/png' }));
-    };
-    originalImage = global.Image;
-    global.Image = class MockImage {
-      set src(value) {
-        this._src = value;
-        queueMicrotask(() => this.onload?.());
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      get src() {
-        return this._src;
-      }
-    };
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    HTMLCanvasElement.prototype.getContext = originalGetContext;
-    HTMLCanvasElement.prototype.toBlob = originalToBlob;
-    global.Image = originalImage;
-  });
-
-  // Captures the actual intermediate SVG `exportChartPng` builds (intercepting the `Image` src it
-  // loads, per `rasterize`'s own data:-URI choice -- see the taint-avoidance test above) and
-  // decodes it back to markup, so a test can inspect exactly what got serialised rather than only
-  // whether the call resolved.
-  async function captureExportedMarkup(container, backgroundColour = '#ffffff') {
-    let capturedSrc;
-    global.Image = class CapturingImage {
-      set src(value) {
-        capturedSrc = value;
-        this._src = value;
-        queueMicrotask(() => this.onload?.());
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      get src() {
-        return this._src;
-      }
-    };
-    await exportChartPng(container, 'chart.png', backgroundColour);
-    return decodeURIComponent(capturedSrc.replace(/^data:image\/svg\+xml;charset=utf-8,/, ''));
-  }
-
-  // WO Unit tests: "the PNG path resolves for a container holding more than one SVG" -- the exact
-  // shape (chart surface + size key) that the pre-fix `findSvg`'s "first SVG" logic depended on
-  // being ordered correctly.
-  it('resolves with its existing signature for a container holding more than one SVG', async () => {
-    const container = buildContainer();
-    const blob = await exportChartPng(container, 'chart.png', '#ffffff');
-    expect(blob).toBeInstanceOf(Blob);
-    expect(blob.type).toBe('image/png');
-  });
-
-  // Risk section, confirmed live against a real browser (see `rasterize`'s own comment): a
-  // `blob:` object URL taints the canvas the moment the SVG carries a `<foreignObject>`, in every
-  // case tested, `toBlob` then throws regardless of content. A `data:` URI does not. Locking this
-  // in so a future edit reaching back for `URL.createObjectURL` here regresses to the taint, not
-  // just to a style change.
-  it('loads the container SVG as a data: URI, never a blob: URL, to avoid canvas tainting', async () => {
-    const container = buildContainer();
-    let capturedSrc;
-    global.Image = class CapturingImage {
-      set src(value) {
-        capturedSrc = value;
-        this._src = value;
-        queueMicrotask(() => this.onload?.());
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      get src() {
-        return this._src;
-      }
-    };
-    await exportChartPng(container, 'chart.png', '#ffffff');
-    expect(capturedSrc).toMatch(/^data:image\/svg\+xml/);
-  });
-
-  // UCM-CHART-18 defect 1: `chartRef` wraps `children` only, so a panel's own controls (e.g. an
-  // info `IconButton` in the footer) are inside what gets rasterised. An exported image should
-  // show what the chart communicates, not what can be clicked. The button is placed BEFORE a
-  // later, unrelated sibling (reviewer finding: the original fixture had the button as the LAST
-  // descendant, so a "strip before inline" ordering regression would still have left every
-  // asserted node's index aligned and the test would have passed either way) -- `After the button`
-  // is what actually exercises the lockstep-index trap the WO names as the single most likely way
-  // to get this wrong.
-  it('drops interactive controls from the whole-container PNG, keeping non-interactive siblings both before and after it', async () => {
-    const container = buildContainer();
-    // The distinctive colour on `#after-button`, applied via a stylesheet rule (so it is only
-    // ever picked up through `getComputedStyle`, never copied verbatim by `cloneNode`), is what
-    // actually exercises the lockstep-index trap: content-presence assertions alone pass whether
-    // or not the button is removed before or after inlining (removing a node shifts which style
-    // string lands on which SURVIVING element, but every surviving TEXT NODE is still there
-    // either way) -- only checking that THIS specific element carries THIS specific colour proves
-    // its index wasn't shifted onto a neighbour's style by an out-of-order removal.
-    const style = document.createElement('style');
-    style.textContent = '#after-button { color: rgb(1, 2, 3); }';
-    document.head.appendChild(style);
-    const footer = document.createElement('div');
-    footer.innerHTML = '<span>Caveat note</span><button type="button">More about these caveats</button><span id="after-button">After the button</span>';
-    container.appendChild(footer);
-
-    const svgMarkup = await captureExportedMarkup(container);
-    document.head.removeChild(style);
-    expect(svgMarkup).not.toContain('<button');
-    expect(svgMarkup).not.toContain('More about these caveats');
-    expect(svgMarkup).toContain('Caveat note');
-    const afterButtonMatch = svgMarkup.match(/<span id="after-button"[^>]*style="([^"]*)"/);
-    expect(afterButtonMatch).not.toBeNull();
-    expect(afterButtonMatch[1]).toContain('color: rgb(1, 2, 3)');
-  });
-
-  it('drops an anchor-based drill-down link, keeping its non-interactive siblings', async () => {
-    const container = buildContainer();
-    const footer = document.createElement('div');
-    footer.innerHTML = '<a href="/details">View details</a><span>Static note</span>';
-    container.appendChild(footer);
-
-    const svgMarkup = await captureExportedMarkup(container);
-    expect(svgMarkup).not.toContain('<a ');
-    expect(svgMarkup).not.toContain('View details');
-    expect(svgMarkup).toContain('Static note');
-  });
-
-  // Risk section counter-check: MUI's own chart legend can itself be interactive -- this must
-  // remove OPERATION, not CONTENT. A legend built from non-interactive markup (as every affected
-  // hram panel's hand-built legend is, per the WO) must survive completely intact.
-  it('keeps a non-interactive legend fully intact -- removes operation, not content', async () => {
-    const container = buildContainer();
-    // the fixture's own `.legend` div ("Legend HTML") already carries no button/input/role --
-    // confirm it survives the same export that strips the footer's button above.
-    const svgMarkup = await captureExportedMarkup(container);
-    expect(svgMarkup).toContain('Legend HTML');
-  });
-
-  // reviewer + ui_reviewer finding, independently: MUI's own chart legend, when interactive
-  // (`onItemClick`/`toggleVisibilityOnClick`), renders each item as `<button role="button"
-  // class="...MuiChartsLegend-series...">` wrapping the swatch+label -- that markup IS the
-  // legend's content. A blanket removal would delete it along with the click handler; this is the
-  // WO's own risk section made concrete, and it must be UNWRAPPED (content kept, button-ness
-  // dropped), not removed.
-  it('unwraps an interactive MUI legend item instead of removing it -- keeps the swatch and label', async () => {
-    const container = buildContainer();
-    const legendUl = document.createElement('ul');
-    legendUl.className = 'MuiChartsLegend-root';
-    legendUl.innerHTML = `
-      <li data-series="opened">
-        <button type="button" role="button" class="MuiChartsLegend-series">
-          <span class="MuiChartsLegend-mark" style="background-color: rgb(25, 118, 210);"></span>
-          <span class="MuiChartsLegend-label">Opened</span>
-        </button>
-      </li>
-    `;
-    container.appendChild(legendUl);
-
-    const svgMarkup = await captureExportedMarkup(container);
-    expect(svgMarkup).not.toContain('<button');
-    expect(svgMarkup).toContain('MuiChartsLegend-series');
-    expect(svgMarkup).toContain('MuiChartsLegend-mark');
-    expect(svgMarkup).toContain('Opened');
-  });
-
-  it('rejects when the container fails to rasterize', async () => {
-    global.Image = class FailingImage {
-      set src(value) {
-        this._src = value;
-        queueMicrotask(() => this.onerror?.());
-      }
-
-      // eslint-disable-next-line class-methods-use-this
-      get src() {
-        return this._src;
-      }
-    };
-    const container = buildContainer();
-    await expect(exportChartPng(container)).rejects.toThrow(/rasterize/);
-  });
-});