@micha.bigler/ui-core-micha 3.2.0 → 3.3.0

package/src/components/charts/exportChart.js

@@ -1,12 +1,88 @@
-function findSvg(chartContainer) {
-  const svg = chartContainer?.querySelector('svg');
+// UCM-CHART-17: the two exports promise two different things and now keep them.
+//
+// SVG stays a true, portable vector: only the chart's own MUI x-charts surface, but with the
+// computed styles that render it correctly (font, colour, stroke) written inline, since nothing
+// downstream of a cloned+serialised node carries the page's emotion CSS classes. PNG rasterises
+// the whole container -- chart, hand-built legend, size key, footnotes -- because that is what
+// the screen actually shows (`AccessGapScatterPanel` and its siblings render the legend/size key
+// as HTML/SVG siblings of the chart since `HRAM-RES-39`/`HRAM-VIS-2`, outside the chart's own SVG).
+//
+// Both paths route DOM through an SVG (`<foreignObject>` for the PNG's arbitrary HTML+SVG mix,
+// direct serialisation for the chart-only SVG) into an `Image`, then a `<canvas>` -- the platform's
+// own APIs, no rasteriser dependency added (this package's only runtime dependency stays
+// `@fontsource/dm-sans`). A library was seriously considered, not just skipped: the naive version
+// of this technique (an `Image` loaded from a `blob:` URL) taints the canvas on `toBlob` in Chrome
+// the moment the SVG contains a `<foreignObject>`, unconditionally -- see `rasterize`'s own comment
+// for how that was confirmed live and worked around with a `data:` URI instead, which is what
+// makes the platform-only approach actually viable rather than merely attempted.
+//
+// Font embedding: NOT done. Inlined `font-family` records the real value (e.g. `"DM Sans", ...`
+// with its documented fallback stack) instead of nothing at all, which is already a correctness
+// improvement over the pre-fix export (unstyled, arbitrary browser default). A machine without DM
+// Sans installed falls back through that stack -- an honest, visible degradation, not a silent one,
+// and embedding the font file was judged not worth the added complexity/weight for this WO.
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+
+// Typography and SVG paint -- what actually makes a chart LOOK like the theme instead of bare SVG
+// defaults (tick fonts and sizes, axis/grid colours, text fill). Deliberately curated, not a full
+// `getComputedStyle` dump: every extra property is bytes in a file a human may open in Illustrator
+// or Inkscape.
+const CHART_STYLE_PROPERTIES = [
+  'font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing',
+  'fill', 'stroke', 'stroke-width', 'stroke-dasharray', 'stroke-linecap', 'stroke-linejoin',
+  'opacity', 'fill-opacity', 'stroke-opacity', 'text-anchor', 'dominant-baseline', 'color',
+];
+
+// Box layout/appearance for the HTML legend and size key a panel renders beside the chart --
+// only needed for the PNG's whole-container rasterisation, where a hand-built legend is plain
+// HTML with no chart-specific paint properties of its own. `overflow` and the grid properties
+// (reviewer finding) cover MUI's own composed layouts too, not only a hand-built flex legend --
+// `ChartsSurface` itself sits in a `grid-area`, so a container that lets MUI position multiple
+// parts via CSS Grid needs those to reposition correctly once cloned out of the page.
+const CONTAINER_LAYOUT_STYLE_PROPERTIES = [
+  'background-color', 'border-color', 'border-width', 'border-style', 'border-radius',
+  'display', 'flex-direction', 'flex-wrap', 'flex', 'align-items', 'justify-content',
+  'justify-items', 'align-content', 'gap', 'overflow',
+  'grid-template-columns', 'grid-template-rows', 'grid-template-areas', 'grid-area',
+  'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+  'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+  'width', 'height', 'box-sizing', 'text-align', 'white-space',
+];
+
+// Deliberate, not positional (UCM-CHART-17 scope item 3): MUI x-charts' own root `<svg>` always
+// carries `MuiChartsSurface-root` (`@mui/x-charts/ChartsSurface`) -- a stable selector, unlike "the
+// first svg in the container", which silently exported a size-key SVG once one existed ahead of
+// the chart. Falls back to the first SVG for a bespoke (non-MUI) SVG child, which `ChartFrame`'s
+// own docblock explicitly allows.
+function findChartSvg(chartContainer) {
+  const svg = chartContainer?.querySelector('svg.MuiChartsSurface-root') || chartContainer?.querySelector('svg');
   if (!svg) throw new Error('Chart container does not contain an SVG element.');
   return svg;
 }
 
-function svgBlob(chartContainer) {
-  const svg = findSvg(chartContainer).cloneNode(true);
-  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+// Walks `sourceRoot` and `cloneRoot` in lockstep (both traversed in the same, deterministic
+// document order, since `cloneRoot` is a structural copy of `sourceRoot`) and writes each node's
+// RESOLVED style for `properties` onto the clone as an inline `style` attribute. This is what
+// carries the page's emotion CSS classes (which the clone keeps by name but not by rule) into a
+// standalone file that has no access to that stylesheet.
+function inlineComputedStyles(sourceRoot, cloneRoot, properties) {
+  const sourceNodes = [sourceRoot, ...sourceRoot.querySelectorAll('*')];
+  const cloneNodes = [cloneRoot, ...cloneRoot.querySelectorAll('*')];
+  sourceNodes.forEach((sourceNode, index) => {
+    const cloneNode = cloneNodes[index];
+    if (!cloneNode || cloneNode.nodeType !== Node.ELEMENT_NODE) return;
+    const computed = window.getComputedStyle(sourceNode);
+    const declarations = properties
+      .map((property) => `${property}: ${computed.getPropertyValue(property)}`)
+      .join('; ');
+    const existing = cloneNode.getAttribute('style');
+    cloneNode.setAttribute('style', existing ? `${existing}; ${declarations}` : declarations);
+  });
+}
+
+function svgToBlob(svg) {
   return new Blob([new XMLSerializer().serializeToString(svg)], { type: 'image/svg+xml;charset=utf-8' });
 }
 
@@ -21,26 +97,70 @@ function download(blob, filename) {
   URL.revokeObjectURL(url);
 }
 
-/** Serializes the first SVG rendered inside a chart container and downloads it. */
-export function exportChartSvg(chartContainer, filename = 'chart.svg') {
-  const blob = svgBlob(chartContainer);
-  download(blob, filename);
-  return blob;
+// The chart's own surface, faithfully styled -- true vector, chart only. Does not gain the
+// legend/size key rendered beside it; that is correct for what this format is for (Part A).
+function chartSvgBlob(chartContainer) {
+  const svg = findChartSvg(chartContainer);
+  const clone = svg.cloneNode(true);
+  inlineComputedStyles(svg, clone, CHART_STYLE_PROPERTIES);
+  // reviewer finding: MUI's ChartsSurface only ever gives the root <svg> a `viewBox` -- its actual
+  // pixel size comes from CSS (`width: 100%; height: 100%` against the page's own layout), which
+  // has nothing to resolve against once cloned out to a standalone file. Without an explicit
+  // width/height a standalone viewer falls back to the SVG UA default (typically 300x150).
+  const rect = svg.getBoundingClientRect();
+  clone.setAttribute('width', Math.ceil(rect.width) || svg.clientWidth || 1);
+  clone.setAttribute('height', Math.ceil(rect.height) || svg.clientHeight || 1);
+  clone.setAttribute('xmlns', SVG_NS);
+  return svgToBlob(clone);
 }
 
-/** Rasterizes the first SVG rendered inside a chart container at two-times scale and downloads it. */
-export function exportChartPng(chartContainer, filename = 'chart.png', backgroundColour) {
-  const source = svgBlob(chartContainer);
+// The whole container, as seen -- chart plus everything the panel renders beside it, via an SVG
+// `<foreignObject>` wrapping a styled clone of the container's actual DOM. Standard platform
+// technique for DOM rasterisation without a library: the intermediate SVG is never downloaded, only
+// decoded into an `Image` and drawn onto a `<canvas>`.
+function containerSvgBlob(chartContainer) {
+  const rect = chartContainer.getBoundingClientRect();
+  const width = Math.ceil(rect.width) || chartContainer.scrollWidth || 1;
+  const height = Math.ceil(rect.height) || chartContainer.scrollHeight || 1;
 
+  const clone = chartContainer.cloneNode(true);
+  inlineComputedStyles(chartContainer, clone, [...CHART_STYLE_PROPERTIES, ...CONTAINER_LAYOUT_STYLE_PROPERTIES]);
+  clone.setAttribute('xmlns', XHTML_NS);
+
+  const svg = document.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('xmlns', SVG_NS);
+  svg.setAttribute('width', width);
+  svg.setAttribute('height', height);
+  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+  const foreignObject = document.createElementNS(SVG_NS, 'foreignObject');
+  foreignObject.setAttribute('width', '100%');
+  foreignObject.setAttribute('height', '100%');
+  foreignObject.appendChild(clone);
+  svg.appendChild(foreignObject);
+
+  return { svg, width, height };
+}
+
+// UCM-CHART-17 risk section, confirmed live (not assumed): an SVG containing a `<foreignObject>`
+// taints the canvas on `toBlob` in Chrome -- unconditionally, even with zero external references
+// (verified: a foreignObject holding nothing but plain styled text already triggers
+// `SecurityError: Tainted canvases may not be exported`) -- but ONLY when the image is loaded via
+// a `blob:` object URL. The identical SVG loaded via a `data:` URI does not taint the canvas at
+// all. This is why the SVG-only export (`chartSvgBlob`, no foreignObject) can keep using
+// `URL.createObjectURL` for its own download, while the PNG path's `Image` source specifically
+// must be a `data:` URI. No rasteriser dependency needed once this is accounted for.
+async function svgToDataUri(svg) {
+  const svgString = await svgToBlob(svg).text();
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+}
+
+async function rasterize(svg, width, height, backgroundColour) {
+  const dataUri = await svgToDataUri(svg);
   return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(source);
     const image = new Image();
 
     image.onload = () => {
       try {
-        const svg = findSvg(chartContainer);
-        const width = Number(svg.getAttribute('width')) || svg.clientWidth || 1;
-        const height = Number(svg.getAttribute('height')) || svg.clientHeight || 1;
         const canvas = document.createElement('canvas');
         canvas.width = width * 2;
         canvas.height = height * 2;
@@ -49,23 +169,37 @@ export function exportChartPng(chartContainer, filename = 'chart.png', backgroun
         context.fillRect(0, 0, canvas.width, canvas.height);
         context.drawImage(image, 0, 0, canvas.width, canvas.height);
         canvas.toBlob((blob) => {
-          URL.revokeObjectURL(url);
           if (!blob) {
             reject(new Error('Unable to create PNG export.'));
             return;
           }
-          download(blob, filename);
           resolve(blob);
         }, 'image/png');
       } catch (error) {
-        URL.revokeObjectURL(url);
         reject(error);
       }
     };
     image.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error('Unable to load chart SVG for PNG export.'));
+      reject(new Error('Unable to rasterize chart container for PNG export.'));
     };
-    image.src = url;
+    image.src = dataUri;
   });
 }
+
+/** Serializes the chart's own SVG surface, styles inlined, and downloads it. */
+export function exportChartSvg(chartContainer, filename = 'chart.svg') {
+  const blob = chartSvgBlob(chartContainer);
+  download(blob, filename);
+  return blob;
+}
+
+/**
+ * Rasterizes the whole chart container -- chart, legend, size key, footnotes, everything the panel
+ * renders beside the chart -- at two-times scale and downloads it.
+ */
+export async function exportChartPng(chartContainer, filename = 'chart.png', backgroundColour) {
+  const { svg, width, height } = containerSvgBlob(chartContainer);
+  const blob = await rasterize(svg, width, height, backgroundColour);
+  download(blob, filename);
+  return blob;
+}

package/src/i18n/chartsTranslations.ts

@@ -23,12 +23,29 @@ export const chartsTranslations = {
     en: 'Export SVG',
     sw: 'Hamisha SVG',
   },
+  // UCM-CHART-17: the two formats now genuinely differ (SVG = chart only, vector; PNG = the whole
+  // panel as shown, legend included) -- the label alone no longer says so, the tooltip does.
+  'ChartFrame.EXPORT_SVG_TOOLTIP': {
+    de: 'Skalierbare Vektorgrafik des Diagramms allein, ohne Legende.',
+    fr: 'Image vectorielle du graphique seul, sans la légende.',
+    en: 'Scalable vector image of the chart alone, without the legend.',
+    sw: 'Picha ya vekta inayoweza kubadilishwa ukubwa ya chati pekee, bila maelezo.',
+  },
   'ChartFrame.EXPORT_PNG_LABEL': {
     de: 'PNG exportieren',
     fr: 'Exporter en PNG',
     en: 'Export PNG',
     sw: 'Hamisha PNG',
   },
+  // ui_reviewer finding: the original wording named the legend but not the size key/footnotes
+  // the PNG also carries -- named explicitly now, matching the Envelope's own Goal wording
+  // ("legend, size key and footnotes").
+  'ChartFrame.EXPORT_PNG_TOOLTIP': {
+    de: 'Bild des ganzen Kartenbereichs, wie angezeigt, inklusive Legende, Grössenschlüssel und Fussnoten.',
+    fr: 'Image de toute la zone de la carte, telle qu’affichée, légende, clé de taille et notes de bas de page comprises.',
+    en: 'Image of the whole card area as shown, including the legend, size key, and footnotes.',
+    sw: 'Picha ya eneo lote la kadi kama linavyoonyeshwa, ikijumuisha maelezo, kifunguo cha ukubwa, na maelezo ya chini.',
+  },
   'ChartFrame.EXPORT_ERROR': {
     de: 'Das Diagramm konnte nicht exportiert werden.',
     fr: 'Impossible d’exporter le graphique.',

package/tests/ChartFrame.test.jsx

@@ -22,7 +22,9 @@ const resources = {
       'ChartFrame.EMPTY_DEFAULT': 'No data available.',
       'ChartFrame.ERROR_DEFAULT': 'The chart could not be loaded.',
       'ChartFrame.EXPORT_SVG_LABEL': 'Export SVG',
+      'ChartFrame.EXPORT_SVG_TOOLTIP': 'Scalable vector image of the chart alone, without the legend.',
       'ChartFrame.EXPORT_PNG_LABEL': 'Export PNG',
+      'ChartFrame.EXPORT_PNG_TOOLTIP': 'Image of the whole card area as shown, including the legend, size key, and footnotes.',
       'ChartFrame.EXPORT_ERROR': 'The chart could not be exported.',
     },
   },
@@ -32,7 +34,9 @@ const resources = {
       'ChartFrame.EMPTY_DEFAULT': 'Aucune donnée disponible.',
       'ChartFrame.ERROR_DEFAULT': 'Impossible de charger le graphique.',
       'ChartFrame.EXPORT_SVG_LABEL': 'Exporter en SVG',
+      'ChartFrame.EXPORT_SVG_TOOLTIP': 'Image vectorielle du graphique seul, sans la légende.',
       'ChartFrame.EXPORT_PNG_LABEL': 'Exporter en PNG',
+      'ChartFrame.EXPORT_PNG_TOOLTIP': 'Image de toute la zone de la carte, telle qu’affichée, légende, clé de taille et notes de bas de page comprises.',
       'ChartFrame.EXPORT_ERROR': 'Impossible d’exporter le graphique.',
     },
   },
@@ -162,6 +166,17 @@ describe('ChartFrame', () => {
     await vi.waitFor(() => expect(onExportPng).toHaveBeenCalledOnce());
   });
 
+  // UCM-CHART-17: the two formats now genuinely differ (chart-only vector vs. the whole card as
+  // shown) -- each button must say so, without silently renaming itself in the process (MUI
+  // Tooltip's default `aria-label` behaviour would do exactly that; `describeChild` avoids it).
+  it('describes what each export format contains without replacing the button\'s own accessible name', () => {
+    renderFrame({ exportOptions: true });
+    const svgButton = screen.getByRole('button', { name: 'Export SVG' });
+    const pngButton = screen.getByRole('button', { name: 'Export PNG' });
+    expect(svgButton.getAttribute('title')).toBe('Scalable vector image of the chart alone, without the legend.');
+    expect(pngButton.getAttribute('title')).toBe('Image of the whole card area as shown, including the legend, size key, and footnotes.');
+  });
+
   it('keeps the controls row rendered in the loading, error and empty states', () => {
     const controls = <button type="button">View selector</button>;
 

package/tests/chartAxisTickBand.test.jsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import React from 'react';
+import {
+  afterAll, afterEach, beforeAll, describe, expect, it,
+} from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { BarChart } from '../src/components/charts/BarChart';
+
+// UCM-CHART-16: MUI's own tick-label fit check (`shortenLabels`, weighed against
+// `tickLabelsMaxHeight`) depends on a REAL SVG text measurement (`getBBox`), which jsdom does not
+// implement -- `SVGElement.prototype.getBBox` is not a function here, so MUI's own
+// `getStringSize` falls back to `getBoundingClientRect`, which jsdom always reports as 0x0. Every
+// measured height therefore comes back 0, MUI's fit check trivially "fits" any text, and the real
+// defect (every tick label blanked) can never be observed by rendering the unmocked chart as-is --
+// a test that skips this setup would pass whether or not the resolver's band is correct, i.e. be
+// exactly the "mocked prop-assertion" trap this package's own tests warn against elsewhere.
+//
+// This installs a deterministic `getBBox` instead, so the SAME code MUI itself runs is actually
+// exercised: height scaled off the measurement span's own `fontSize`, at a ratio (1.28) chosen to
+// sit inside the real near-miss window this WO's own work order measured against a real browser
+// (`resolveXAxisGeometry`'s `TICK_TEXT_HEIGHT_FACTOR` comment) -- large enough that the pre-fix
+// unconditional floor already fails a titled axis at the theme's own default tick font, small
+// enough that the untitled default (never broken) still passes. Width is deliberately near-zero so
+// only the HEIGHT dimension of MUI's fit check is exercised; each chart also sets an explicit
+// `width` so MUI's real responsive sizing (ResizeObserver, unavailable in jsdom) never enters into
+// it.
+function installHeightOnlyTextMeasurement() {
+  const original = SVGElement.prototype.getBBox;
+  // eslint-disable-next-line func-names
+  SVGElement.prototype.getBBox = function getBBox() {
+    const fontSize = Number.parseFloat(this.style.fontSize) || 12;
+    return { x: 0, y: 0, width: 1, height: fontSize * 1.28 };
+  };
+  return () => {
+    SVGElement.prototype.getBBox = original;
+  };
+}
+
+describe('x-axis tick band leaves MUI room for one real line of tick text (UCM-CHART-16)', () => {
+  let restoreGetBBox;
+
+  beforeAll(() => {
+    restoreGetBBox = installHeightOnlyTextMeasurement();
+  });
+
+  afterAll(() => {
+    restoreGetBBox();
+  });
+
+  afterEach(cleanup);
+
+  // WO scope item 1's own signature: an axis title AND horizontal tick labels sharing the same
+  // band, at the theme's own default tick font -- no explicit `height`/`tickLabelStyle` overrides
+  // anywhere, so this exercises the resolver's own default reservation end to end, the exact path
+  // two hram consumers had to work around by hand.
+  it('renders non-empty tick labels when the axis has both a title and horizontal ticks', () => {
+    const { container } = render(
+      <ThemeProvider theme={createTheme()}>
+        <BarChart
+          series={[{ data: [24, 36, 28], label: 'Opened' }]}
+          xAxis={[{ data: ['A', 'B', 'C'] }]}
+          xAxisLabel="Category"
+          width={600}
+        />
+      </ThemeProvider>,
+    );
+    const tickTexts = Array.from(container.querySelectorAll('.MuiChartsAxis-bottom .MuiChartsAxis-tickLabel'))
+      .map((node) => node.textContent);
+    expect(tickTexts).toHaveLength(3);
+    expect(tickTexts.every((text) => text.length > 0)).toBe(true);
+  });
+
+  // Non-goal guardrail: the rotated path projects its own band from real measured/estimated text
+  // width and must stay exactly as before -- this WO only touches the flat (angle 0) case.
+  it('leaves the rotated tick path unaffected', () => {
+    const { container } = render(
+      <ThemeProvider theme={createTheme()}>
+        <BarChart
+          series={[{ data: [24, 36, 28, 12, 9, 7, 15] }]}
+          xAxis={[{
+            data: Array.from({ length: 7 }, (_, i) => `A rather long category label ${i}`),
+          }]}
+          xLabels="angled"
+          width={600}
+        />
+      </ThemeProvider>,
+    );
+    const tickTexts = Array.from(container.querySelectorAll('.MuiChartsAxis-bottom .MuiChartsAxis-tickLabel'))
+      .map((node) => node.textContent);
+    expect(tickTexts).toHaveLength(7);
+    expect(tickTexts.every((text) => text.length > 0)).toBe(true);
+  });
+});

package/tests/chartDefaults.test.js

@@ -594,6 +594,46 @@ describe('resolveChartLayout size tokens and height escape (UCM-CHART-12, UCM-CH
   });
 });
 
+describe('resolveChartLayout flat x-axis tick band leaves MUI room to render (UCM-CHART-16)', () => {
+  // Third occurrence (WO Part A): no title, just a tick font 1px above the untitled default --
+  // already enough to blank every label under the pre-fix, unconditional TICK_BAND_BASE_PX=25.
+  // 26 is not invented: binary-searched against the real, unmocked `BarChart` rendered in this
+  // repo's own dev harness (Chrome, this package's own DM Sans default) -- 25 still blanked every
+  // tick, 26 was the smallest axis height that didn't. A test computing its own expectation from
+  // `CHART_TICK_TEXT_HEIGHT_FACTOR`-style constants would pass whatever those constants say,
+  // proving nothing; this number came from outside the code under test.
+  it('reserves enough room for a tick font one pixel above the untitled default (measured threshold: 26px)', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{
+        scaleType: 'band',
+        data: ['Urban', 'Peri-urban', 'Rural', 'Access', 'Village'],
+        tickLabelStyle: { fontSize: 13 },
+      }],
+      yAxis: [{ scaleType: 'linear' }],
+      xLabels: 'horizontal',
+      spacing: theme.spacing,
+    });
+    expect(layout.xAxis[0].height).toBeGreaterThanOrEqual(26);
+  });
+
+  // Rule 2 (WO non-goal guardrail): an axis without a title still reserves only the tick band --
+  // this WO's extra title-driven margin must not leak in when there is no title to share it with.
+  // Reviewer finding: asserting `xTitleBand === 0` alone passes whether or not the +2px title
+  // margin leaked into `xAxisBand` instead -- the band/height values themselves have to be
+  // checked against the same tick font's no-title formula (`ceil(fontSize * 1.3) + 9`).
+  it('does not add the title margin when the axis has no label', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['A', 'B'], tickLabelStyle: { fontSize: 13 } }],
+      yAxis: [{ scaleType: 'linear' }],
+      xLabels: 'horizontal',
+      spacing: theme.spacing,
+    });
+    expect(layout.bands.xTitleBand).toBe(0);
+    expect(layout.bands.xAxisBand).toBe(26);
+    expect(layout.xAxis[0].height).toBe(26);
+  });
+});
+
 describe('resolveChartLayout xLabels rotation (UCM-CHART-12)', () => {
   it('"horizontal" never rotates, regardless of tick count or label length', () => {
     const layout = resolveChartLayout({

package/tests/exportChart.test.js

@@ -0,0 +1,184 @@
+// @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');
+  });
+
+  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;
+  });
+
+  // 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/);
+  });
+
+  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/);
+  });
+});