@micha.bigler/ui-core-micha 3.2.1 → 3.3.1

package/src/components/charts/exportChart.js

@@ -1,12 +1,133 @@
-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.
+// UCM-CHART-18: `transform`/`transform-origin` added -- a rotated element (e.g. a legend swatch
+// rotated into a diamond) previously exported unrotated, since nothing wrote the resolved CSS
+// transform onto the clone. `getComputedStyle` returns the FINAL, resolved matrix -- already
+// incorporating an SVG element's own `transform` PRESENTATION ATTRIBUTE, which `cloneNode` also
+// keeps -- and an inline `style` declaration always wins over a presentation attribute (SVG2:
+// presentation attributes carry the lowest possible specificity), so writing the computed value
+// inline overrides rather than composes with it. Verified live against a rotated legend swatch and
+// against `xLabels="angled"` tick labels: neither double-rotates or double-displaces.
+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',
+  'transform', 'transform-origin',
+];
+
+// 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');
+// UCM-CHART-18: an exported image shows what the chart COMMUNICATES, not what can be clicked --
+// a panel's own controls (an info `IconButton`, a drill-down `Button`, ...) live in `children`
+// alongside the chart (`ChartFrame`'s `chartRef` wraps `children` only, not `toolbar`/`controls`/
+// `meta`), so the whole-container PNG picked them up once it started rasterising `chartRef` in
+// full (`UCM-CHART-17`). `[role="button"]` catches MUI's own non-native button-like elements (e.g.
+// an `IconButton` can render as a `<span>`/`<div>` with that role) that a tag-name selector alone
+// would miss; `a[href]`/`[role="link"]` (reviewer finding) cover a drill-down built as a link
+// rather than a `<button>`.
+const INTERACTIVE_CONTROL_SELECTOR = 'button, input, select, textarea, [role="button"], a[href], [role="link"]';
+
+// ui_reviewer + reviewer finding, independently: MUI's OWN chart legend can be interactive
+// (`onItemClick`/`toggleVisibilityOnClick`) and, when it is, X-Charts renders each legend item as
+// `<button role="button" class="...MuiChartsLegend-series...">`, WRAPPING the series swatch and
+// label -- that markup IS the legend's explanatory content, not chrome, and the WO's own risk
+// section says exactly this: "if it vanishes, that is a finding that changes the approach, not a
+// detail to paper over." A blanket `.remove()` would delete the swatch+label along with the click
+// handler. Unwrapped instead: replace the interactive element with a plain, non-interactive one
+// carrying the SAME class/style/children, so the legend keeps every pixel of content while losing
+// only its clickability (irrelevant anyway -- a rasterised PNG has no click handlers regardless).
+const MUI_INTERACTIVE_LEGEND_ITEM_SELECTOR = '.MuiChartsLegend-series';
+
+function stripInteractiveControls(clone) {
+  clone.querySelectorAll(INTERACTIVE_CONTROL_SELECTOR).forEach((node) => {
+    if (node.matches(MUI_INTERACTIVE_LEGEND_ITEM_SELECTOR)) {
+      const unwrapped = document.createElement('span');
+      unwrapped.className = node.className;
+      const style = node.getAttribute('style');
+      if (style) unwrapped.setAttribute('style', style);
+      while (node.firstChild) unwrapped.appendChild(node.firstChild);
+      node.replaceWith(unwrapped);
+      return;
+    }
+    node.remove();
+  });
+}
+
+// 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 +142,78 @@ 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]);
+  // UCM-CHART-18 scope item 2, deliberately AFTER inlineComputedStyles, never before:
+  // inlineComputedStyles walks `chartContainer` and `clone` IN LOCKSTEP BY INDEX
+  // (`sourceNodes[i]` <-> `cloneNodes[i]`, both from `querySelectorAll('*')`). Removing nodes from
+  // the clone first would shift every subsequent index out of alignment with the still-intact
+  // source tree, so elements downstream of the first removal would silently receive a DIFFERENT
+  // element's computed style -- wrong, but not obviously wrong, since the result still looks like a
+  // styled export.
+  stripInteractiveControls(clone);
+  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 +222,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/exportChart.test.js

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