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

package/DESIGN.md

@@ -21,6 +21,7 @@ These principles are the spec a **prototype** encodes and the implementation mat
 
 8. **Every chart earns:** axis labels (with units), a legend only when >1 series, a tooltip, theme-token colours, container-responsive sizing, and empty/loading states. **Single-hue for magnitude; diverging (blue/red around zero) ONLY for signed data.** The concrete data palette is a separate layer with a shared `ui-core-micha` default that apps override when their domain calls for it.
    **Dual-axis is a default-off exception, opt-in only** (CHART-5, operator decision): the shared `TimeSeriesChart` preset supports a second y-axis via a per-series `axis: 'secondary'` field specifically for two series sharing one axis at very different scales/units (e.g. a user count vs. hours) where series-toggles alone leave one series unreadable. Reach for it only under that same condition, not as a general layout choice — a single shared axis (or toggles) stays the default everywhere else.
+8a. **Axis titles: categorical axis gets none by default; numeric axis carries the quantity and unit, once.** A categorical axis' ticks are names (`"Session 1"`, ward names) — a title only restates their type; add one only when the ticks are codes or abbreviations whose kind is not self-evident. A numeric axis is meaningless without a title naming the quantity and its unit — unless the ticks already show the unit (`%`, a currency symbol) and the panel heading already names the quantity, in which case a title repeats both. **The unit belongs in the title once, never in every tick** (`"Accessibility (minutes) (min)"` over ticks `"0.0 min"` was measured live — the unit three times on one axis). This is a decision the caller makes per axis, not something the chart preset silently applies or suppresses (THEME-9) — a label the caller deliberately set is never auto-dropped.
 9. **Ground it in the real subject matter.** Faithful structures from the real panels (hram: Morris-tornado, Pareto/knee, CI-strip, allocation-scatter with shape-encoded sources) — no lorem, no generic charts. Hence: **scout the real subject before building.**
 
 ## Craft

package/WORK_ORDERS.md

@@ -82,3 +82,4 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 | THEME-6 | An app-side check for `sx` values the theme already gives | `THEME-4` made shadowing mechanical for the kit's own components; apps have no equivalent — cockpit alone carries **464 `sx` props across 37 files** (measured 2026-08-11). Adds an exported, source-level, **report-only** check an app calls from its own suite, plus the cockpit count. Full spec: [work-orders/THEME-6.md](work-orders/THEME-6.md). | 2026-08-11 | done | 637d262 | DS-18's app-side half. **Codex → Claude fallback**: Codex ran out of workspace credits mid-task (first-hand failure this session, stamped today) — the Orchestrator implemented directly. Author-flip rule applied: independent `reviewer` (Sonnet, mandatory regardless of tier) ran against the Orchestrator's own diff; `ui_reviewer` correctly not spawned, per the WO's own text, since nothing renders. New export `reportRedundantThemeValues(sources, { theme })` in `src/theme/themeCompleteness.js`, reusing existing primitives (`getPath`, `sameValue`, `jsxOpeningTag`, `topLevelSxValue`, `BASELINE_STYLED_MUI_COMPONENTS`, `expandShorthandProperty`) rather than rebuilding them. Attribution by JSX tag name only (root-slot styleOverrides only), literal string/number sx values only — no template literals, identifiers, spreads, or `component={...}` resolution, the bound written open per the WO's instruction. **A real, verified discrepancy in the Envelope's own grounding, corrected here rather than silently chased:** the cited cockpit examples (`borderColor: 'divider'` ×2, `bgcolor: 'background.paper'` ×3, `borderRadius: 1` ×3) all live on `<Box component="button">` in `cockpit/frontend/src/cockpit/ChatView.jsx:75,82,95` — confirmed by direct inspection — which the check's own stated tag-name attribution method cannot catch (`Box` isn't a themed tag, and `component={...}` resolution is explicitly out of scope). The check was NOT widened to chase these numbers. **Run against cockpit's real source** (`cockpit/frontend/src`, 50 `.jsx` files, `theme.js` excluded from the sources passed per the WO's app-side-exclusion instruction — `reportOffPaletteColours`'s own skip pattern left untouched): **27 findings, all `MuiButton.textTransform`, across 4 files** (`BoardView.jsx`, `KnowledgeView.jsx`, `SettingsView.jsx`, one more) — cockpit's buttons redundantly set `sx={{ textTransform: 'none' }}`, matching the baseline's own `MuiButton.styleOverrides.root.textTransform`. This is the honest, real result, reported as a correction to the Envelope's stale grounding, not a match to it. Independent `reviewer` found one real **P2, fixed**: numeric sx values for `borderRadius` and spacing-shorthand aliases were compared raw against the theme's already-resolved CSS value, but MUI actually multiplies a bare number by `theme.shape.borderRadius`/`theme.spacing()` before rendering (e.g. `borderRadius: 8` in sx renders as `8 × shape.borderRadius`, not `8`) — comparing the two raw numbers could produce a **false positive**, exactly the failure mode the WO's own Risks section names as the one to avoid. Fixed by skipping numeric-value comparison entirely for `borderRadius` and every spacing alias (`MUI_NUMERIC_SCALE_PROPERTIES`), erring toward a false negative (the accepted lower bound) rather than a false positive; two regression tests added (the specific false-positive case, plus a corrected version of the "component the theme doesn't style" test, which had used an off-list tag rather than exercising the intended undefined-styleOverride branch — also a reviewer note, fixed). Re-verified: cockpit's 27/27 findings unchanged by the fix (all string-valued `textTransform`, not numeric). Scoped tests 37/37 green, `tsc` clean. Version `2.37.1` → `2.38.0` (minor, new exported API). No rendered gate — static/logic change, no fix shipped anywhere (report-only, per the WO's explicit non-goal). |
 | THEME-7 | Guidance: a series slot that collides with an app's own accent | The baseline ships six `dataSeries.categorical` colours and no guidance for the case where a slot sits too close to something the consuming app owns. Measured case, not hypothesis (hram `IMARA-2`, frozen 2026-08-13, Lab ΔE calibrated against that operator's own rejected pair at ΔE 16.6): series 1 `#3D5A99` vs hram's primary `#2F4F96` = **ΔE 7.2**, and series 3 `#2E8F8A` vs hram's DALYs identity `#1F7A72` = **ΔE 8.3** (same hue, one lightness step). hram resolved both app-side by dropping slot 1 and replacing slot 3 with a navy. This WO adds the missing guidance to `DESIGN.md` and the token docs — how to check an accent against the palette, and why a colliding slot should be DROPPED rather than nudged — plus an explicit decide-and-record on whether to ship anything beyond guidance (ΔE helper / documented extension sequence / nothing). **Explicitly not a defect report: the six shipped values stay unchanged**, since they are correct for any app without a muted-indigo accent or a teal domain identity. Full order [`work-orders/THEME-7.md`](work-orders/THEME-7.md) | 2026-08-13 | planned |  | Tier 3 (shared-core surface) though documentation-led; independent `reviewer` mandatory. Raised by the hram/Imara design-language work at the operator's explicit instruction to take the finding upstream rather than keep it app-local. Stated limitation to keep in the text: the guidance derives from ONE app's experience and its threshold is calibrated on one operator's judgement — a starting point, not a standard. |
 | THEME-8 | Touch-Ziel des Selects sitzt am falschen Element und drückt den Text aus der Mitte | `src/theme/tokens.js` setzt die Touch-Mindesthöhe (40, im `@media (any-pointer: coarse)`-Zweig 44) auf `MuiSelect.styleOverrides.**select**` — also auf das INNERE Element, das MUIs variantenabhängiges Padding trägt. Beim `standard`-Select ist dieses Padding oben-verankert (`1px 24px 5px 0`), der Zusatzraum landet komplett unten, der Text reitet oben. **Von den sechs Komponenten mit Touch-Ziel (`MuiButton`, `MuiIconButton`, `MuiSelect`, `MuiCheckbox`, `MuiFormControlLabel`, `MuiTextField`) ist `MuiSelect` die EINZIGE, die einen Nicht-Root-Slot adressiert** — eine Inkonsistenz in der Baseline selbst, keine Designentscheidung. **Live gemessen** (hram, Administration → Users, Select in einer Tabellenzelle): heute 0 px über / 0 px unter dem Text (Inneres auf 44 px gestreckt); nach Verschieben der Regel auf die Wurzel **9 px / 9 px** — exakt zentriert, weil `MuiInputBase-root` bereits `display:flex; align-items:center` ist. Voller Auftrag [`work-orders/THEME-8.md`](work-orders/THEME-8.md) | 2026-08-14 | done (npm publish; consumer pin bumps still open) | ae0745d | Tier 3 (Shared-Core). Codex out of credits (2026-08-14, `.claude/codex-status.md`), Orchestrator implemented directly — authorship flip made `reviewer` + `ui_reviewer` mandatory (already required at Tier 3): both ran, no blocking findings. `reviewer`: config-level test doesn't render/measure the DOM (P3, accepted — Envelope's own proof is the live measurement, already done), no version bump at review time (P2, resolved by 2.39.0→2.39.1 in the same commit). `ui_reviewer`: MuiSelect's coarse branch still hand-writes `{minHeight:44}` instead of the shared `coarseHitArea` helper (P3, pre-existing, not introduced here). Both independently traced MUI source (`Select.js`/`InputBase.js`) and confirmed the root-slot fix reaches the right DOM node and centres via the inherited flex layout. No live browser re-render done (Claude-Code preview-scoping override: small/medium frontend change, code reasoning + tests suffice). **Wert bleibt 40/44 — nur der Anker ist falsch.** Verstärkt auf Touch-Geräten: der `coarse`-Zweig greift auch auf Laptops mit Touchscreen (Operator-Rechner meldet `any-pointer: coarse`), dort 44 statt 40 px — gleicher Fehler, 4 px grösser. **Estate-weite Sichtveränderung**: alle konsumierenden Apps bekommen re-zentrierte Selects; in den Release Notes nennen. **Nicht am npm-Publish abschliessen** — die Pin-Bumps der Konsumenten (zuerst hram, wo es gefunden wurde) gehören dazu. Gefunden beim Messen einer vermeintlichen hram-Regression; die App-seitige Schwester ist hram FIX-11 (anderer Fehler, gleiche Felder). |
+| THEME-9 | Diagramme geben mehr Platz an Achsen-Mobiliar als an Daten | **In einer konsumierenden App (hram) gemessen, nicht geschätzt.** Eine KPI-Karte „Coverage“: Karte 470 × 372 → Chart-Box 436 × **300** (`minHeight:300`, das SVG darin ist 270 hoch → **30 px tot**) → SVG 436 × 270 → **Zeichenfläche 301 × 175**. Die Zeichenfläche ist damit **45 % des SVG und 30 % der Karte**; innerhalb des SVG gehen 135 px Breite und 95 px Höhe verloren. Vom Kartenrand bis zur ersten Tick-Zahl sind es 104 px, davon **60 px blanker Raum zwischen SVG-Rand und Achsentitel**; unter dem Achsentitel liegen 30 px leer im SVG plus 32 px bis zur Karte. **Drei weitere gemessene Befunde:** (1) `withAxisDefaults` endet mit `label: axis.label || label` und setzt damit EIN `yAxisLabel` auf JEDE Achse — in hrams Doppelachsen-Chart tragen beide Y-Achsen dieselbe 43-Zeichen-Zeile, je 65 px eines 206-px-Charts. (2) Der Achsentitel wird IN das Tick-Band gesetzt: auf der Accessibility-Ansicht überlappen **4 von 4** Y-Ticks den Titel, dasselbe passiert mit um 45° gedrehten Ortsnamen über dem Titel „Ward“. (3) Ticks tragen Einheit und Zier-Nachkommastellen (`0.0 min`, `50.0 min`) — dieselbe Einheit steht nochmals doppelt im Titel (`Accessibility (minutes) (min)`); anderswo kürzt MUI die Ticks zu `0.0…`. `BarChart` setzt gar keinen Standard-Formatter, `TimeSeriesChart` schon — also löst es jede App neu. Voller Auftrag [`work-orders/THEME-9.md`](work-orders/THEME-9.md) | 2026-08-14 | done (npm publish; consumer pin bumps still open) | 3fd6097 | Tier 3 (Shared-Core). Codex bereits als `unavailable` für heute vermerkt (`.claude/codex-status.md`, THEME-8) — direkt in Claude implementiert, Autorenschaft geflippt, `reviewer` + `ui_reviewer` liefen parallel (ohnehin Pflicht bei Tier 3). **`reviewer` R1 (P1, behoben):** die Serie-zu-Achse-Zuordnung in `sizeYAxisForContent` traf `undefined===undefined` statt MUI's echter Default-Regel (unmarkierte Serie → erste Achse im Array) — machte den Sizer zum stillen No-op genau auf der Primärachse des Doppelachsen-Falls, der diesen WO motiviert hat; Regressionstest ergänzt. **`ui_reviewer` U1 (P1, behoben):** `DESIGN.md` #8a versprach "keine Titel-Pflicht bei kategorialer Achse", aber `BarChart`/`LineChart` erzwangen beide Labels per `throw` — Labels jetzt optional, sonst wäre die Regel für FIX-13 unbrauchbar gewesen. **U3 (P2, behoben):** Sizer nutzte den Theme-Default-Font statt der per Achse gesetzten `tickLabelStyle.fontSize`. **U5 (P3, behoben):** Label-Dicke war an `theme.typography.body1` gekoppelt, obwohl MUI intern hart 14px setzt — jetzt eigene benannte Konstante. **U2 (P2, akzeptierter Rest):** Schätzung kennt MUI's "nice-tick"-Rundung nicht exakt; bestehender 1.1×-Sicherheitsfaktor federt kleine Abweichungen ab, der gerenderte Check ist der eigentliche Beweis. **U4:** Behauptung, `TimeSeriesChart` umgehe `withAxisDefaults`/`sizeYAxisForContent`, am Quellcode widerlegt (rendert über die eigene `<BarChart>`-Komponente). Affected-Set grün (60 Tests). **Live-Nachmessung in hram nicht möglich** — Browser-Pane liefert nur für den vom Operator angezeigten Tab reale Viewport-Masse (neue Tabs 0×0, negative-Width-SVG-Fehler als direkte Folge, kein Codefehler); die "vorher"-Zahlen der Coverage-Karte wurden LIVE aus dem korrekt angezeigten hram-Tab gemessen (siehe WO) und bestätigten exakt die im Envelope genannten 60px/104px — zurückgeführt auf hrams eigenes `margin.left=60`, das sich ADDITIV mit MUIs Achsenbreiten-Reservierung addiert (kein ucm-Fehler). Die "nachher"-Messung folgt mit FIX-13 nach dem Pin-Bump (ohnehin dort vorgesehen). Fünf Posten: Ränder/Achsenreservierung verkleinern · Achsentitel nicht mehr broadcasten (mit Test, genau der Defekt der ausgeliefert wurde) · Titel aus dem Tick-Band halten · Standard-Tick-Formatter · Entscheidungsregel in `DESIGN.md`. **Gemessene Warnung gegen naives `Intl`-Compact:** Deutsch kürzt Tausender GAR NICHT (`12'500` bleibt), Swahili stellt ein Wort voran (`elfu 12.5`, breiter als die Rohzahl) — kompakte Notation allein löst das Breitenproblem also nicht und verschlimmert es in einer Sprache; ein handgeschriebenes `B` wäre auf Deutsch zudem FALSCH (Billion = 10¹², `Intl` sagt korrekt `Mrd.`). **Regel:** kategoriale Achse → kein Titel (Ticks sind Namen); numerische Achse → Titel trägt Grösse und Einheit, ausser die Ticks zeigen die Einheit schon (`%`); Einheit einmal im Titel, nie in jedem Tick. **Ränder kürzen und Überlappung beheben ziehen gegeneinander** — zusammen machen und messen, sonst erzeugt das eine das andere neu. Nicht am Publish abschliessen: App-Pins nachziehen, hram zuerst (dortiger Nachzug = FIX-13). |

package/dist/components/charts/BarChart.js

@@ -13,22 +13,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
-import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
 /**
- * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis (BarChart's default x-axis
+ * shape) needs no title by default -- its ticks are names -- and a numeric
+ * axis needs one only unless its unit is already visible in the ticks and
+ * the panel heading already names the quantity. Omitting one never suppresses
+ * a label the caller DID set (`withAxisDefaults` only ever falls back onto
+ * an axis without its own `label`).
  */
 export function BarChart(_a) {
     var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slotProps"]);
     const theme = useTheme();
+    const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
-    if (!xAxisLabel || !yAxisLabel) {
-        throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
-    }
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'band', data: [] }, theme.typography.caption.fontSize);
-    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
+    const sizedYAxis = sizeYAxisForContent(labelledYAxis, series, theme.typography.caption.fontSize);
     const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
-    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: rotatedTickSpace.xAxis, yAxis: sizedYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/LineChart.js

@@ -13,9 +13,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { LineChart as MuiLineChart, MarkElement as MuiMarkElement, } from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
-import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
 // Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
 // `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
 // override in src/theme/tokens.js as the preferred mechanism, with a
@@ -31,19 +32,24 @@ function FilledMarkElement(_a) {
     return _jsx(MuiMarkElement, Object.assign({}, props, { color: color, style: Object.assign({ fill: color }, style) }));
 }
 /**
- * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts line preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis needs no title by default
+ * -- its ticks are names -- and a numeric axis needs one only unless its
+ * unit is already visible in the ticks and the panel heading already names
+ * the quantity. Omitting one never suppresses a label the caller DID set
+ * (`withAxisDefaults` only ever falls back onto an axis without its own
+ * `label`).
  */
 export function LineChart(_a) {
     var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slots, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slots", "slotProps"]);
     const theme = useTheme();
+    const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
-    if (!xAxisLabel || !yAxisLabel) {
-        throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
-    }
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'point', data: [] }, theme.typography.caption.fontSize);
-    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
-    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
     const defaultedSeries = series.map((item) => (Object.assign({ showMark: false, labelMarkType: 'square' }, item)));
-    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: defaultedSeries, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    const sizedYAxis = sizeYAxisForContent(labelledYAxis, defaultedSeries, theme.typography.caption.fontSize);
+    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: defaultedSeries, xAxis: rotatedTickSpace.xAxis, yAxis: sizedYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: rotatedTickSpace.margin, slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/chartDefaults.js

@@ -7,7 +7,18 @@ export function withGridDefaults(grid) {
 }
 export function withAxisDefaults(axes, label, defaults, tickFontSize) {
     const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
-    return values.map((axis) => (Object.assign(Object.assign(Object.assign({}, defaults), axis), { tickLabelStyle: Object.assign({ fontSize: tickFontSize }, axis.tickLabelStyle), label: axis.label || label })));
+    return values.map((axis, index) => (Object.assign(Object.assign(Object.assign({}, defaults), axis), { tickLabelStyle: Object.assign({ fontSize: tickFontSize }, axis.tickLabelStyle), 
+        // THEME-9: the single `label` argument is the caller's ONE string for
+        // this whole axis family (xAxisLabel/yAxisLabel) -- it may only ever
+        // fall back onto ONE axis. Applying it via .map() to every entry
+        // broadcast the identical label onto every axis in a multi-axis array
+        // (measured live: hram's dual-axis chart carried the same 43-character
+        // label on both y-axes). Only the first entry -- the common single-axis
+        // case is index 0 -- gets the fallback; a caller building a genuine
+        // multi-axis array must label each entry itself (as TimeSeriesChart's
+        // own secondary-axis support already does), exactly like MUI's own
+        // default `position: 'left'` (only the first entry, MUI docs).
+        label: axis.label || (index === 0 ? label : undefined) })));
 }
 function cssLengthToPixels(value) {
     if (typeof value === 'number')
@@ -78,6 +89,133 @@ export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
         ? Object.assign(Object.assign({}, margin), { bottom: MUI_CHART_MARGIN_BOTTOM + largestExtraHeight }) : margin;
     return { xAxis: spacedXAxis, margin: spacedMargin };
 }
+// THEME-9: MUI X-Charts' own default y-axis width is a flat 45px (ticks) +
+// 20px (label, if present) = 65px regardless of what the ticks actually say
+// -- confirmed against @mui/x-charts' own DEFAULT_AXIS_SIZE_WIDTH /
+// AXIS_LABEL_DEFAULT_HEIGHT constants and its `useChartDimensions` selector
+// (drawingArea.left = margin.left + axisSizeLeft, i.e. margin and axis size
+// are ADDITIVE, not one containing the other). That flat default is both too
+// generous for short ticks ("0%"/"50%"/"100%") and too stingy for wide ones
+// ("50.0 min"), which is exactly the measured overlap on the Accessibility
+// y-axis. Mirrors spaceForRotatedTicks' existing text-width heuristic below.
+const Y_AXIS_TICK_SIZE = 6;
+const Y_AXIS_TICK_LABEL_GAP = 2;
+const Y_AXIS_LABEL_TICK_GAP = 2;
+// A rotated (90deg) axis-label's line-box "thickness" -- what it costs in
+// WIDTH once rotated -- runs a bit past its raw font size once ascender/
+// descender room is included; matches the ~18px measured live for a 14px
+// label (14 * 1.3 ~= 18).
+const Y_AXIS_LABEL_THICKNESS_FACTOR = 1.3;
+// A small safety margin on the estimate: `spaceForRotatedTicks`'s own risk
+// note applies here too -- a too-tight cut recreates the overlap it was
+// meant to fix, and glyph-width heuristics are approximate by nature.
+const Y_AXIS_WIDTH_SAFETY_FACTOR = 1.1;
+// MUI X-Charts' ChartsYAxisImpl hardcodes the axis-label font at 14px
+// (`additionalProps.style: {...theme.typography.body1, fontSize: 14, ...}`
+// -- fontSize:14 is set AFTER the theme.typography.body1 spread, so it wins
+// regardless of what body1 actually resolves to). Matching that literal
+// constant here -- rather than reading it off `theme.typography.body1` --
+// keeps this sizing correct even if this package's body1 size ever changes;
+// coupling it to body1 was only ever coincidentally right because body1
+// happens to be 14px today.
+const MUI_AXIS_LABEL_FONT_SIZE_PX = 14;
+function longestFormattedTick(values, valueFormatter) {
+    return values.reduce((longest, value) => {
+        let text;
+        try {
+            text = valueFormatter ? String(valueFormatter(value, { location: 'tick' })) : String(value);
+        }
+        catch (_a) {
+            // Some formatters require MUI's complete scale context; falling back
+            // to the raw value is conservative -- it reserves at least as much
+            // space as the unformatted number would need.
+            text = String(value);
+        }
+        return text.length > longest.length ? text : longest;
+    }, '');
+}
+/**
+ * Sizes a linear y-axis to its actual tick content instead of MUI's flat
+ * default. Only touches axes the caller left unsized (`axis.width == null`)
+ * and only linear/numeric ones -- a categorical axis's ticks are names, not
+ * numbers, and sizing those is not this function's job. Candidate values come
+ * from the axis' own `min`/`max` when the caller set them (as every current
+ * consumer does), falling back to the series actually plotted against this
+ * axis; if neither yields a candidate, the axis is left untouched rather than
+ * guessed at.
+ *
+ * `tickFontSize` is only the FALLBACK -- an axis' own `tickLabelStyle.fontSize`
+ * (set by `withAxisDefaults`, itself overridable per-axis by the caller) is
+ * read first, so a caller-tuned tick font is sized correctly rather than
+ * against the package-wide default. The axis LABEL's font is not a caller
+ * knob at all (`MUI_AXIS_LABEL_FONT_SIZE_PX` -- MUI hardcodes it).
+ *
+ * The series-to-axis match for the fallback deliberately mirrors MUI's own
+ * default-assignment rule, not a naive `undefined === undefined`: a series
+ * with no explicit `yAxisId` is assigned to the FIRST axis in the array
+ * (`yAxisIds[0]` in MUI's own selector), never to "no id". Matching only
+ * `undefined === undefined` left the primary axis of a real dual-axis chart
+ * (id `'primary'`, its series never set `yAxisId`) with zero matched series
+ * and therefore MUI's untouched flat default -- a silent no-op on exactly
+ * the dual-axis case this WO was measured against.
+ */
+export function sizeYAxisForContent(yAxis, series, tickFontSize) {
+    var _a;
+    const fallbackTickFontSizePx = cssLengthToPixels(tickFontSize);
+    const defaultAxisId = (_a = yAxis[0]) === null || _a === void 0 ? void 0 : _a.id;
+    return yAxis.map((axis) => {
+        var _a;
+        if (axis.width != null)
+            return axis;
+        if (axis.scaleType && axis.scaleType !== 'linear')
+            return axis;
+        const tickFontSizePx = cssLengthToPixels((_a = axis.tickLabelStyle) === null || _a === void 0 ? void 0 : _a.fontSize) || fallbackTickFontSizePx;
+        if (tickFontSizePx === 0)
+            return axis;
+        const candidates = [];
+        if (typeof axis.min === 'number')
+            candidates.push(axis.min);
+        if (typeof axis.max === 'number')
+            candidates.push(axis.max);
+        if (candidates.length === 0) {
+            (series || [])
+                .filter((item) => { var _a; return ((_a = item.yAxisId) !== null && _a !== void 0 ? _a : defaultAxisId) === axis.id; })
+                .forEach((item) => (item.data || []).forEach((value) => {
+                if (typeof value === 'number')
+                    candidates.push(value);
+            }));
+        }
+        if (candidates.length === 0)
+            return axis;
+        const longestTick = longestFormattedTick(candidates, axis.valueFormatter);
+        const tickTextWidth = Math.max(tickFontSizePx, longestTick.length * tickFontSizePx * AVERAGE_GLYPH_WIDTH_EM);
+        const labelThickness = axis.label
+            ? Math.ceil(MUI_AXIS_LABEL_FONT_SIZE_PX * Y_AXIS_LABEL_THICKNESS_FACTOR) + Y_AXIS_LABEL_TICK_GAP
+            : 0;
+        const width = Math.ceil((tickTextWidth + Y_AXIS_TICK_SIZE + Y_AXIS_TICK_LABEL_GAP + labelThickness)
+            * Y_AXIS_WIDTH_SAFETY_FACTOR);
+        return Object.assign(Object.assign({}, axis), { width });
+    });
+}
+/**
+ * Locale-correct, unit-free tick numbers as the default -- BarChart set none
+ * at all (raw numbers straight from the domain), and a hand-rolled `Intl`
+ * compact-notation default was measured to be actively wrong: German does
+ * not compact thousands at all (`12'500` stays `12'500`) and Swahili prepends
+ * a word that is WIDER than the raw number (`elfu 12.5`) -- compact notation
+ * does not solve the width problem and worsens it in one locale. Plain
+ * grouped formatting (no `notation: 'compact'`) is safe across all four
+ * locales this package's consumers use. Ticks get a short, rounded form;
+ * tooltip/legend keep full precision -- teaching screens must not round away
+ * a meaningful difference. A caller's own `valueFormatter` always wins (this
+ * is only ever used as a default, per `withAxisDefaults`' `{...defaults,
+ * ...axis}` merge).
+ */
+export function defaultNumericTickFormatter(locale) {
+    return (value, context) => ((context === null || context === void 0 ? void 0 : context.location) === 'tick'
+        ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)
+        : new Intl.NumberFormat(locale).format(value));
+}
 export function withChartSlotDefaults(slotProps, legendPosition) {
     var _a;
     const position = Object.assign(Object.assign(Object.assign({}, DEFAULT_LEGEND_POSITION), legendPosition), (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.legend) === null || _a === void 0 ? void 0 : _a.position);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.39.1",
+  "version": "2.40.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/charts/BarChart.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
+  defaultNumericTickFormatter,
+  sizeYAxisForContent,
   spaceForRotatedTicks,
   withAxisDefaults,
   withChartSlotDefaults,
@@ -12,8 +15,14 @@ import {
 } from './chartDefaults';
 
 /**
- * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis (BarChart's default x-axis
+ * shape) needs no title by default -- its ticks are names -- and a numeric
+ * axis needs one only unless its unit is already visible in the ticks and
+ * the panel heading already names the quantity. Omitting one never suppresses
+ * a label the caller DID set (`withAxisDefaults` only ever falls back onto
+ * an axis without its own `label`).
  */
 export function BarChart({
   series = [],
@@ -32,10 +41,8 @@ export function BarChart({
   ...chartProps
 }) {
   const theme = useTheme();
+  const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
-  if (!xAxisLabel || !yAxisLabel) {
-    throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
-  }
 
   const labelledXAxis = withAxisDefaults(
     xAxis,
@@ -46,7 +53,12 @@ export function BarChart({
   const labelledYAxis = withAxisDefaults(
     yAxis,
     yAxisLabel,
-    { scaleType: 'linear' },
+    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
+    theme.typography.caption.fontSize,
+  );
+  const sizedYAxis = sizeYAxisForContent(
+    labelledYAxis,
+    series,
     theme.typography.caption.fontSize,
   );
   const rotatedTickSpace = spaceForRotatedTicks(
@@ -61,7 +73,7 @@ export function BarChart({
         {...chartProps}
         series={series}
         xAxis={rotatedTickSpace.xAxis}
-        yAxis={labelledYAxis}
+        yAxis={sizedYAxis}
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}

package/src/components/charts/LineChart.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 import {
   LineChart as MuiLineChart,
   MarkElement as MuiMarkElement,
@@ -8,6 +9,8 @@ import {
 import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
+  defaultNumericTickFormatter,
+  sizeYAxisForContent,
   spaceForRotatedTicks,
   withAxisDefaults,
   withChartSlotDefaults,
@@ -29,8 +32,14 @@ function FilledMarkElement({ color, style, ...props }) {
 }
 
 /**
- * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
- * It supplies labelled axes, tooltips, and an automatic multi-series legend.
+ * Responsive MUI X-Charts line preset. It supplies labelled axes, tooltips,
+ * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
+ * optional, per DESIGN.md #8a: a categorical axis needs no title by default
+ * -- its ticks are names -- and a numeric axis needs one only unless its
+ * unit is already visible in the ticks and the panel heading already names
+ * the quantity. Omitting one never suppresses a label the caller DID set
+ * (`withAxisDefaults` only ever falls back onto an axis without its own
+ * `label`).
  */
 export function LineChart({
   series = [],
@@ -50,10 +59,8 @@ export function LineChart({
   ...chartProps
 }) {
   const theme = useTheme();
+  const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
-  if (!xAxisLabel || !yAxisLabel) {
-    throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
-  }
 
   const labelledXAxis = withAxisDefaults(
     xAxis,
@@ -64,19 +71,24 @@ export function LineChart({
   const labelledYAxis = withAxisDefaults(
     yAxis,
     yAxisLabel,
-    { scaleType: 'linear' },
+    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
     theme.typography.caption.fontSize,
   );
-  const rotatedTickSpace = spaceForRotatedTicks(
-    labelledXAxis,
-    margin,
-    theme.typography.caption.lineHeight,
-  );
   const defaultedSeries = series.map((item) => ({
     showMark: false,
     labelMarkType: 'square',
     ...item,
   }));
+  const sizedYAxis = sizeYAxisForContent(
+    labelledYAxis,
+    defaultedSeries,
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
 
   return (
     <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
@@ -84,7 +96,7 @@ export function LineChart({
         {...chartProps}
         series={defaultedSeries}
         xAxis={rotatedTickSpace.xAxis}
-        yAxis={labelledYAxis}
+        yAxis={sizedYAxis}
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}

package/src/components/charts/chartDefaults.js

@@ -9,7 +9,7 @@ export function withGridDefaults(grid) {
 
 export function withAxisDefaults(axes, label, defaults, tickFontSize) {
   const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({
+  return values.map((axis, index) => ({
     // `defaults.scaleType` (and any other scale-defining default) must
     // survive even when the caller passes their OWN xAxis/yAxis array --
     // confirmed live in the dev harness: a caller-supplied axis with `data`
@@ -25,7 +25,17 @@ export function withAxisDefaults(axes, label, defaults, tickFontSize) {
       fontSize: tickFontSize,
       ...axis.tickLabelStyle,
     },
-    label: axis.label || label,
+    // THEME-9: the single `label` argument is the caller's ONE string for
+    // this whole axis family (xAxisLabel/yAxisLabel) -- it may only ever
+    // fall back onto ONE axis. Applying it via .map() to every entry
+    // broadcast the identical label onto every axis in a multi-axis array
+    // (measured live: hram's dual-axis chart carried the same 43-character
+    // label on both y-axes). Only the first entry -- the common single-axis
+    // case is index 0 -- gets the fallback; a caller building a genuine
+    // multi-axis array must label each entry itself (as TimeSeriesChart's
+    // own secondary-axis support already does), exactly like MUI's own
+    // default `position: 'left'` (only the first entry, MUI docs).
+    label: axis.label || (index === 0 ? label : undefined),
   }));
 }
 
@@ -100,6 +110,136 @@ export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
   return { xAxis: spacedXAxis, margin: spacedMargin };
 }
 
+// THEME-9: MUI X-Charts' own default y-axis width is a flat 45px (ticks) +
+// 20px (label, if present) = 65px regardless of what the ticks actually say
+// -- confirmed against @mui/x-charts' own DEFAULT_AXIS_SIZE_WIDTH /
+// AXIS_LABEL_DEFAULT_HEIGHT constants and its `useChartDimensions` selector
+// (drawingArea.left = margin.left + axisSizeLeft, i.e. margin and axis size
+// are ADDITIVE, not one containing the other). That flat default is both too
+// generous for short ticks ("0%"/"50%"/"100%") and too stingy for wide ones
+// ("50.0 min"), which is exactly the measured overlap on the Accessibility
+// y-axis. Mirrors spaceForRotatedTicks' existing text-width heuristic below.
+const Y_AXIS_TICK_SIZE = 6;
+const Y_AXIS_TICK_LABEL_GAP = 2;
+const Y_AXIS_LABEL_TICK_GAP = 2;
+// A rotated (90deg) axis-label's line-box "thickness" -- what it costs in
+// WIDTH once rotated -- runs a bit past its raw font size once ascender/
+// descender room is included; matches the ~18px measured live for a 14px
+// label (14 * 1.3 ~= 18).
+const Y_AXIS_LABEL_THICKNESS_FACTOR = 1.3;
+// A small safety margin on the estimate: `spaceForRotatedTicks`'s own risk
+// note applies here too -- a too-tight cut recreates the overlap it was
+// meant to fix, and glyph-width heuristics are approximate by nature.
+const Y_AXIS_WIDTH_SAFETY_FACTOR = 1.1;
+// MUI X-Charts' ChartsYAxisImpl hardcodes the axis-label font at 14px
+// (`additionalProps.style: {...theme.typography.body1, fontSize: 14, ...}`
+// -- fontSize:14 is set AFTER the theme.typography.body1 spread, so it wins
+// regardless of what body1 actually resolves to). Matching that literal
+// constant here -- rather than reading it off `theme.typography.body1` --
+// keeps this sizing correct even if this package's body1 size ever changes;
+// coupling it to body1 was only ever coincidentally right because body1
+// happens to be 14px today.
+const MUI_AXIS_LABEL_FONT_SIZE_PX = 14;
+
+function longestFormattedTick(values, valueFormatter) {
+  return values.reduce((longest, value) => {
+    let text;
+    try {
+      text = valueFormatter ? String(valueFormatter(value, { location: 'tick' })) : String(value);
+    } catch {
+      // Some formatters require MUI's complete scale context; falling back
+      // to the raw value is conservative -- it reserves at least as much
+      // space as the unformatted number would need.
+      text = String(value);
+    }
+    return text.length > longest.length ? text : longest;
+  }, '');
+}
+
+/**
+ * Sizes a linear y-axis to its actual tick content instead of MUI's flat
+ * default. Only touches axes the caller left unsized (`axis.width == null`)
+ * and only linear/numeric ones -- a categorical axis's ticks are names, not
+ * numbers, and sizing those is not this function's job. Candidate values come
+ * from the axis' own `min`/`max` when the caller set them (as every current
+ * consumer does), falling back to the series actually plotted against this
+ * axis; if neither yields a candidate, the axis is left untouched rather than
+ * guessed at.
+ *
+ * `tickFontSize` is only the FALLBACK -- an axis' own `tickLabelStyle.fontSize`
+ * (set by `withAxisDefaults`, itself overridable per-axis by the caller) is
+ * read first, so a caller-tuned tick font is sized correctly rather than
+ * against the package-wide default. The axis LABEL's font is not a caller
+ * knob at all (`MUI_AXIS_LABEL_FONT_SIZE_PX` -- MUI hardcodes it).
+ *
+ * The series-to-axis match for the fallback deliberately mirrors MUI's own
+ * default-assignment rule, not a naive `undefined === undefined`: a series
+ * with no explicit `yAxisId` is assigned to the FIRST axis in the array
+ * (`yAxisIds[0]` in MUI's own selector), never to "no id". Matching only
+ * `undefined === undefined` left the primary axis of a real dual-axis chart
+ * (id `'primary'`, its series never set `yAxisId`) with zero matched series
+ * and therefore MUI's untouched flat default -- a silent no-op on exactly
+ * the dual-axis case this WO was measured against.
+ */
+export function sizeYAxisForContent(yAxis, series, tickFontSize) {
+  const fallbackTickFontSizePx = cssLengthToPixels(tickFontSize);
+  const defaultAxisId = yAxis[0]?.id;
+  return yAxis.map((axis) => {
+    if (axis.width != null) return axis;
+    if (axis.scaleType && axis.scaleType !== 'linear') return axis;
+
+    const tickFontSizePx = cssLengthToPixels(axis.tickLabelStyle?.fontSize) || fallbackTickFontSizePx;
+    if (tickFontSizePx === 0) return axis;
+
+    const candidates = [];
+    if (typeof axis.min === 'number') candidates.push(axis.min);
+    if (typeof axis.max === 'number') candidates.push(axis.max);
+    if (candidates.length === 0) {
+      (series || [])
+        .filter((item) => (item.yAxisId ?? defaultAxisId) === axis.id)
+        .forEach((item) => (item.data || []).forEach((value) => {
+          if (typeof value === 'number') candidates.push(value);
+        }));
+    }
+    if (candidates.length === 0) return axis;
+
+    const longestTick = longestFormattedTick(candidates, axis.valueFormatter);
+    const tickTextWidth = Math.max(
+      tickFontSizePx,
+      longestTick.length * tickFontSizePx * AVERAGE_GLYPH_WIDTH_EM,
+    );
+    const labelThickness = axis.label
+      ? Math.ceil(MUI_AXIS_LABEL_FONT_SIZE_PX * Y_AXIS_LABEL_THICKNESS_FACTOR) + Y_AXIS_LABEL_TICK_GAP
+      : 0;
+    const width = Math.ceil(
+      (tickTextWidth + Y_AXIS_TICK_SIZE + Y_AXIS_TICK_LABEL_GAP + labelThickness)
+      * Y_AXIS_WIDTH_SAFETY_FACTOR,
+    );
+
+    return { ...axis, width };
+  });
+}
+
+/**
+ * Locale-correct, unit-free tick numbers as the default -- BarChart set none
+ * at all (raw numbers straight from the domain), and a hand-rolled `Intl`
+ * compact-notation default was measured to be actively wrong: German does
+ * not compact thousands at all (`12'500` stays `12'500`) and Swahili prepends
+ * a word that is WIDER than the raw number (`elfu 12.5`) -- compact notation
+ * does not solve the width problem and worsens it in one locale. Plain
+ * grouped formatting (no `notation: 'compact'`) is safe across all four
+ * locales this package's consumers use. Ticks get a short, rounded form;
+ * tooltip/legend keep full precision -- teaching screens must not round away
+ * a meaningful difference. A caller's own `valueFormatter` always wins (this
+ * is only ever used as a default, per `withAxisDefaults`' `{...defaults,
+ * ...axis}` merge).
+ */
+export function defaultNumericTickFormatter(locale) {
+  return (value, context) => (context?.location === 'tick'
+    ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)
+    : new Intl.NumberFormat(locale).format(value));
+}
+
 export function withChartSlotDefaults(slotProps, legendPosition) {
   const position = {
     ...DEFAULT_LEGEND_POSITION,

package/tests/BarChart.test.jsx

@@ -50,9 +50,25 @@ describe('BarChart preset', () => {
     expect(chartSpy.mock.calls.at(-1)[0].colors).toEqual(['var(--application-chart-colour)']);
   });
 
-  it('requires labels for both axes', () => {
-    expect(() => render(
-      <ThemeProvider theme={createTheme()}><BarChart series={[]} xAxisLabel="Year" /></ThemeProvider>,
-    )).toThrow('BarChart requires xAxisLabel and yAxisLabel.');
+  // THEME-9: DESIGN.md #8a makes an axis title the caller's per-axis
+  // decision (categorical axes default to none) -- a hard "both required"
+  // throw made that default unachievable through this preset. Omitting a
+  // label now renders no title for that axis rather than crashing.
+  it('renders without a title on an axis whose label was omitted', () => {
+    render(
+      <ThemeProvider theme={createTheme()}><BarChart series={[{ data: [1] }]} xAxisLabel="Year" /></ThemeProvider>,
+    );
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.xAxis[0].label).toBe('Year');
+    expect(props.yAxis[0].label).toBeUndefined();
+  });
+
+  it('renders with no title on either axis when both labels are omitted', () => {
+    render(
+      <ThemeProvider theme={createTheme()}><BarChart series={[{ data: [1] }]} /></ThemeProvider>,
+    );
+    const props = chartSpy.mock.calls.at(-1)[0];
+    expect(props.xAxis[0].label).toBeUndefined();
+    expect(props.yAxis[0].label).toBeUndefined();
   });
 });

package/tests/TimeSeriesChart.test.jsx

@@ -216,12 +216,17 @@ describe('TimeSeriesChart', () => {
     ],
   };
 
-  it('CHART-5: no custom yAxis when the shared single axis is not all-integer (today\'s real case)', () => {
+  it('CHART-5: no custom (integer-blanking) yAxis formatter when the shared single axis is not all-integer (today\'s real case)', () => {
     renderChart({ data: MIXED_DATA });
 
     const props = chartSpy.mock.calls.at(-1)[0];
     expect(props.yAxis).toHaveLength(1);
-    expect(props.yAxis[0].valueFormatter).toBeUndefined();
+    // THEME-9: BarChart now always supplies a default (locale-grouped, non-
+    // blanking) tick formatter, so this is no longer undefined -- but it
+    // must still be BarChart's generic default, not CHART-5's own
+    // integer-blanking one (which would wrongly blank the 4.5/5.2/6.1 ticks).
+    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+    expect(props.yAxis[0].valueFormatter(4.5, { location: 'tick' })).not.toBe('');
     expect(props.yAxis[0].label).toBe('Count');
   });
 
@@ -293,8 +298,13 @@ describe('TimeSeriesChart', () => {
     const props = chartSpy.mock.calls.at(-1)[0];
     const primaryAxis = props.yAxis.find((axis) => axis.id === 'primary');
     const secondaryAxis = props.yAxis.find((axis) => axis.id === 'secondary');
-    expect(typeof primaryAxis.valueFormatter).toBe('function');
-    expect(secondaryAxis.valueFormatter).toBeUndefined();
+    expect(primaryAxis.valueFormatter(2, { location: 'tick' })).toBe('2');
+    expect(primaryAxis.valueFormatter(2.5, { location: 'tick' })).toBe('');
+    // THEME-9: BarChart's own default formatter now covers the secondary
+    // axis too (a function, not undefined) -- distinguished from the
+    // integer-blanking one above by NOT blanking a non-integer tick.
+    expect(typeof secondaryAxis.valueFormatter).toBe('function');
+    expect(secondaryAxis.valueFormatter(4.5, { location: 'tick' })).not.toBe('');
   });
 
   it('CHART-5: throws when a series declares axis "secondary" without secondaryYAxisLabel', () => {
@@ -318,12 +328,15 @@ describe('TimeSeriesChart', () => {
 
   it('CHART-5: toggling the non-integer series off switches the shared axis to integer-formatted', () => {
     renderChart({ data: MIXED_DATA });
-    expect(chartSpy.mock.calls.at(-1)[0].yAxis[0].valueFormatter).toBeUndefined();
+    // THEME-9: BarChart's default formatter is present from the start now,
+    // so the CHART-5-specific signal is that a non-integer tick is NOT
+    // blanked yet -- the integer-blanking formatter isn't active.
+    expect(chartSpy.mock.calls.at(-1)[0].yAxis[0].valueFormatter(4.5, { location: 'tick' })).not.toBe('');
 
     fireEvent.click(screen.getByRole('checkbox', { name: 'Presence hours' }));
 
     const props = chartSpy.mock.calls.at(-1)[0];
-    expect(typeof props.yAxis[0].valueFormatter).toBe('function');
+    expect(props.yAxis[0].valueFormatter(4.5, { location: 'tick' })).toBe('');
   });
 
   it('CHART-5: x-axis tickLabelInterval guarantees some labels always show, evenly spread', () => {

package/tests/chartDefaults.test.js

@@ -14,6 +14,11 @@ vi.mock('@mui/x-charts/LineChart', () => ({ LineChart: lineSpy, MarkElement: 'pa
 import { BarChart } from '../src/components/charts/BarChart';
 import { LineChart } from '../src/components/charts/LineChart';
 import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+import {
+  defaultNumericTickFormatter,
+  sizeYAxisForContent,
+  withAxisDefaults,
+} from '../src/components/charts/chartDefaults';
 import { createAppTheme } from '../src/theme/createAppTheme';
 
 const theme = createAppTheme({ palette: { primary: { main: '#3D5A99' } } });
@@ -206,3 +211,153 @@ describe('chart chrome defaults', () => {
     });
   });
 });
+
+// THEME-9 #2 -- `withAxisDefaults` broadcast the caller's single xAxisLabel/
+// yAxisLabel string onto EVERY entry of a multi-axis array via `.map()`.
+// Measured live: hram's dual-axis chart carried the identical 43-character
+// label on both y-axes. This is the defect that actually shipped, pinned
+// directly against the exported function rather than only through a
+// rendered BarChart (which never happens to build a multi-axis array).
+describe('withAxisDefaults label broadcast (THEME-9)', () => {
+  it('applies the single label argument only to the first axis of a multi-entry array', () => {
+    const result = withAxisDefaults(
+      [{ id: 'primary' }, { id: 'secondary' }],
+      'Shared label',
+      { scaleType: 'linear' },
+      '12px',
+    );
+    expect(result[0].label).toBe('Shared label');
+    expect(result[1].label).toBeUndefined();
+    // The exact defect: never let one string land on two axes.
+    expect(result.filter((axis) => axis.label === 'Shared label')).toHaveLength(1);
+  });
+
+  it('leaves axes that set their own label untouched, whatever position they are in', () => {
+    const result = withAxisDefaults(
+      [{ label: 'Primary' }, { label: 'Secondary' }],
+      'Fallback',
+      { scaleType: 'linear' },
+      '12px',
+    );
+    expect(result[0].label).toBe('Primary');
+    expect(result[1].label).toBe('Secondary');
+  });
+
+  it('still labels the common single-axis case unchanged', () => {
+    const result = withAxisDefaults([{ id: 'only' }], 'Cases', { scaleType: 'linear' }, '12px');
+    expect(result[0].label).toBe('Cases');
+
+    const synthesized = withAxisDefaults(undefined, 'Cases', { scaleType: 'linear' }, '12px');
+    expect(synthesized[0].label).toBe('Cases');
+  });
+});
+
+// THEME-9 #4 -- BarChart set no default tick formatter at all (raw domain
+// numbers); a hand-rolled `Intl` compact-notation default was measured to be
+// actively wrong in two of the four locales this package's consumers use:
+// German does not compact thousands at all, and Swahili prepends a word
+// ("elfu") that is WIDER than the raw number. Plain grouped formatting (no
+// `notation: 'compact'`) is pinned here against a live `Intl.NumberFormat`
+// computation rather than hardcoded locale punctuation, so the assertion
+// survives ICU data updates.
+describe('defaultNumericTickFormatter (THEME-9)', () => {
+  it.each(['de-CH', 'en', 'fr', 'sw'])('formats %s ticks the same way Intl grouping would, with no compact notation', (locale) => {
+    const formatter = defaultNumericTickFormatter(locale);
+    for (const value of [12500, 998000, 1000000000]) {
+      const expected = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+      expect(formatter(value, { location: 'tick' })).toBe(expected);
+      // The exact failure mode measured live: compact notation prepending a
+      // wider word in Swahili, or a 'K'/'M'/'B' suffix elsewhere.
+      expect(formatter(value, { location: 'tick' })).not.toMatch(/[KMB]|elfu/i);
+    }
+  });
+
+  it('keeps full precision outside the tick context (tooltip/legend) rather than rounding away a meaningful difference', () => {
+    const formatter = defaultNumericTickFormatter('en');
+    expect(formatter(12500.456, { location: 'tooltip' })).toBe('12,500.456');
+    expect(formatter(12500.456, { location: 'tick' })).toBe('12,500.5');
+  });
+});
+
+// THEME-9 #1/#3 -- MUI's own y-axis width default is a flat 45px (ticks) +
+// 20px (label) regardless of what the ticks actually say (confirmed against
+// @mui/x-charts' own DEFAULT_AXIS_SIZE_WIDTH/AXIS_LABEL_DEFAULT_HEIGHT and
+// its useChartDimensions selector, where margin and axis size are additive).
+// That is both too generous for short ticks and too stingy for wide
+// unit-suffixed ones -- the measured Accessibility-panel overlap. Margins
+// and the exact rendered overlap are verified live, not by unit test (per
+// the WO); this pins the sizing FUNCTION's own contract.
+describe('sizeYAxisForContent (THEME-9)', () => {
+  it('sizes a linear axis from its own caller-supplied min/max', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, label: 'Coverage (%)' }],
+      [],
+      '12px',
+    );
+    expect(axis.width).toBeGreaterThan(0);
+  });
+
+  it('reserves more width for a longer formatted tick, all else equal', () => {
+    const [shortTick] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1 }], [], '12px',
+    );
+    const [wideTick] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, valueFormatter: (v) => `${v} minutes` }],
+      [], '12px',
+    );
+    expect(wideTick.width).toBeGreaterThan(shortTick.width);
+  });
+
+  it('falls back to the plotted series when the caller sets neither min nor max', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear' }],
+      [{ data: [1, 250000] }],
+      '12px',
+    );
+    expect(axis.width).toBeGreaterThan(0);
+  });
+
+  it('leaves the axis untouched when there is nothing to measure against', () => {
+    const [axis] = sizeYAxisForContent([{ scaleType: 'linear' }], [], '12px');
+    expect(axis.width).toBeUndefined();
+  });
+
+  it('never overrides a caller-supplied width', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, width: 42 }], [], '12px',
+    );
+    expect(axis.width).toBe(42);
+  });
+
+  it('leaves a categorical (band/point) axis alone -- its ticks are names, not numbers', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'band', data: ['a', 'b'] }], [], '12px',
+    );
+    expect(axis.width).toBeUndefined();
+  });
+
+  // Reviewer-caught regression (THEME-9): a series with no explicit
+  // `yAxisId` is NOT "assigned to no axis" -- MUI defaults it to the FIRST
+  // axis in the array (`yAxisIds[0]`), whatever that axis' id is. Matching
+  // only `undefined === undefined` left the primary axis of a genuine
+  // dual-axis chart (id set, series unmarked) with zero matched series and
+  // therefore MUI's untouched flat default -- a silent no-op on exactly the
+  // dual-axis case this WO was measured against (TimeSeriesChart's own
+  // secondary-axis feature, CHART-5).
+  it('assigns an unmarked series to the FIRST axis in a dual-axis array, matching MUI\'s own default', () => {
+    const dualAxis = [{ scaleType: 'linear', id: 'primary' }, { scaleType: 'linear', id: 'secondary' }];
+    const series = [
+      { data: [1, 2, 3] }, // no yAxisId -- MUI assigns this to 'primary'
+      { data: [400000, 500000], yAxisId: 'secondary' },
+    ];
+
+    const [primary, secondary] = sizeYAxisForContent(dualAxis, series, '12px');
+    expect(primary.width).toBeGreaterThan(0);
+    expect(secondary.width).toBeGreaterThan(0);
+    // The secondary axis' series format much wider numbers -- it must
+    // reserve more width than the primary axis, not the same (which is what
+    // "both axes silently untouched" or "both matched the same series" would
+    // produce).
+    expect(secondary.width).toBeGreaterThan(primary.width);
+  });
+});

package/work-orders/THEME-9.md

@@ -0,0 +1,194 @@
+# THEME-9 — Charts spend more space on furniture than on data
+
+## Part A — Envelope
+
+**Goal.** Give the chart presets back the space their axis furniture currently reserves and
+does not use, stop broadcasting one axis label onto every axis, keep the axis label out of
+the tick band, and make short, locale-correct tick numbers the default.
+
+**Why — measured in a consuming app (hram), not estimated.** One KPI card, "Coverage":
+
+| layer | size | owner |
+|---|---|---|
+| card (`Paper`, 16 px padding) | 470 × 372 | app |
+| chart wrapper `Box` | 436 × **300** (`minHeight: 300`) | **this package** — the SVG inside is 270 tall, so **30 px are dead** |
+| SVG | 436 × 270 | this package |
+| **plot area** | **301 × 175** | — |
+
+**The plot is 45 % of the SVG and 30 % of the card.** 135 px of width and 95 px of height are
+consumed inside the SVG. Walking the left edge outward: 17 px card padding, then **60 px of
+blank between the SVG edge and the axis label**, then 9 px, then the first tick — 104 px before
+a number appears. Below the chart: 30 px of blank inside the SVG under the axis label, then
+another 32 px to the card edge.
+
+Three further findings from the same app, all measured:
+
+1. **One label is applied to every axis.** `withAxisDefaults` ends with
+   `label: axis.label || label`, so a single `yAxisLabel` lands on *all* axes in the array. In
+   hram's dual-axis chart both y-axes therefore carry the identical 43-character string
+   `"Treated / Untreated / Saved / Avoid. Deaths"`, each reserving 65 px of a 206 px-wide chart.
+2. **The axis label is drawn inside the tick band.** On hram's Accessibility chart **4 of 4**
+   y-tick labels overlap the axis label — the rotated title runs straight through
+   `"0.0 min"`, `"50.0 min"`, … The same happens on an x-axis whose tick labels are rotated
+   (30+ ward names over the label `"Ward"`). The space reserved for rotated ticks does not
+   actually keep the label clear of them.
+3. **Ticks carry units and needless decimals.** `"0.0 min"`, `"50.0 min"` — the unit appears in
+   every tick *and* twice in the label (`"Accessibility (minutes) (min)"`). Elsewhere MUI
+   truncates ticks it cannot fit, rendering `"0.0…"`, `"50.0…"`. `BarChart` sets no default tick
+   formatter at all, while `TimeSeriesChart` already applies one conditionally — so every app
+   re-solves this, and where nobody remembered, the numbers are wide and truncated.
+
+**Scope.**
+
+1. **Shrink the default margins and the axis-size reservation.** MUI X sizes axes itself; the
+   generous fixed values here predate that. Target the measured waste: ~60 px of blank left of
+   the label and ~30 px below it. Re-measure in a consuming app afterwards — the number to beat
+   is "plot area = 45 % of the SVG".
+2. **Stop broadcasting the label.** An axis label is set on the axis that needs it, not on every
+   axis in the array. Add a test that pins this: one label must never land on two axes. That is
+   the exact defect measured above, and nothing currently prevents it.
+3. **Keep the label out of the tick band.** Whatever space rotated or long tick labels occupy
+   must be excluded from where the axis label is placed. Verify with the real case — rotated
+   45° ward names, and a y-axis whose ticks are wide.
+4. **A default tick formatter for `BarChart`** (and any preset lacking one): short numbers, no
+   decorative decimals, no unit in the tick. **Do not simply switch on `Intl` compact
+   notation** — measured across the four locales this package's consumers use:
+
+   | value | de-CH | en | fr | sw |
+   |---|---|---|---|---|
+   | 12 500 | **`12'500`** | `12.5K` | `12,5 k` | **`elfu 12.5`** |
+   | 998 000 | **`998'000`** | `998K` | `998 k` | **`elfu 998`** |
+   | 1 000 000 000 | `1 Mrd.` | `1B` | `1 Md` | `1B` |
+
+   German does not compact thousands **at all** — exactly the range these charts live in — and
+   Swahili puts a word in front of the number, which is wider than the raw value. So compact
+   notation alone does not solve the width problem and in one locale makes it worse. A
+   per-axis unit chosen once (with the unit named in the axis label) does. Also note: a
+   hand-rolled `"B"` suffix would be **wrong in German**, where *Billion* is 10¹² — `Intl` gets
+   this right (`Mrd.`), hand-rolled suffixes do not.
+5. **Document the decision rule in `DESIGN.md`**, where a developer will find it at the call
+   site:
+   - **Categorical axis → no title by default.** The tick values are names; a title only
+     restates their type. Exception: ticks that are codes or abbreviations whose kind is not
+     self-evident.
+   - **Numeric axis → title carries the quantity and the unit.** A bare number is meaningless
+     without one. Exception: the ticks already show the unit (`%`, a currency symbol).
+   - **The unit belongs in the title once — never in every tick.**
+
+**Non-goals / do-not-touch.** No new chart types, no colour or typography changes, no change to
+what any chart plots. **Do not auto-suppress axis labels** — make them opt-in, but leave the
+decision with the caller; silently dropping a label someone deliberately set is a worse failure
+than the redundancy we are removing. Do not fix any of this per-app with `sx` overrides.
+
+**Tier 3** — shared-core surface. `reviewer` mandatory, `ui_reviewer` too: the visible result is
+a layout change in every consuming app.
+
+**Tests to write.** The one-label-per-axis assertion (scope 2) — it is cheap and it is the
+defect that actually shipped. A formatter test with the four locales above as fixtures, so the
+German and Swahili behaviour is pinned rather than rediscovered. Margins and overlap are carried
+by the rendered check, not by unit tests.
+
+**Risks.**
+- **Estate-wide visual change**, in apps nobody is currently working on. Name it in the release
+  notes; do not let it arrive as a surprise.
+- **Tighter margins can clip** where they previously over-reserved. The overlap fix (scope 3)
+  and the margin cut (scope 1) pull in opposite directions — do them together and measure, or
+  the second will re-create the first.
+- The tick formatter changes numbers on screens used for teaching. Rounding that hides a
+  meaningful difference is worse than a wide label: keep full precision in tooltips and tables,
+  compact only where space is scarce.
+
+**Delivery is not done at publish.** Consuming apps need their pin bumped and their charts
+looked at — hram first, where all of this was measured, and where the app-side follow-up is
+tracked as `FIX-13`.
+
+## Part B — Implementation map — ADDRESSED TO THE IMPLEMENTER
+
+Codex was not dispatched: `.claude/codex-status.md` already carried a same-day (2026-08-14)
+`unavailable` line (recorded earlier during `THEME-8`), so per the known-unavailable shortcut
+the Orchestrator implemented directly, which flips authorship — `reviewer` + `ui_reviewer`
+became mandatory (already required at Tier 3).
+
+### What landed, and why (measured, not guessed)
+
+- **`withAxisDefaults` label broadcast (scope 2).** Fixed: the single `label` argument now falls
+  back only onto `index === 0` of a multi-entry axis array — mirrors MUI's own
+  `position: 'left'`-only-on-first-entry default. Test: `chartDefaults.test.js`.
+- **`sizeYAxisForContent`, new (scope 1/3).** MUI's own y-axis width default is a flat 45px+20px
+  regardless of tick content (verified against `@mui/x-charts`' `DEFAULT_AXIS_SIZE_WIDTH` /
+  `AXIS_LABEL_DEFAULT_HEIGHT` and its `useChartDimensions` selector: margin and axis-size are
+  ADDITIVE, not nested — confirmed pixel-for-pixel against a live hram render, see below). This
+  sizes a linear y-axis from its own `min`/`max` or the plotted series, mirroring
+  `spaceForRotatedTicks`'s existing glyph-width heuristic.
+- **`defaultNumericTickFormatter`, new (scope 4).** Locale-grouped, non-compact by default —
+  verified live against `Intl.NumberFormat` output for all four locales (de-CH does not compact
+  thousands at all; sw's compact form is WIDER than the raw number).
+- **DESIGN.md #8a, new (scope 5).** The categorical/numeric axis-title rule.
+- **Not originally scoped, added because scope 5 required it:** `BarChart`/`LineChart` used to
+  hard-`throw` unless BOTH `xAxisLabel` and `yAxisLabel` were supplied — this made #8a's stated
+  "categorical axis gets no title by default" unachievable through either preset (`ui_reviewer`
+  finding U1). Both labels are now optional; omitting one renders no title for that axis. This is
+  the change FIX-13 needs to actually remove a title.
+
+### The Coverage-KPI-card measurement itself was NOT a package-level bug
+
+Live DOM measurement in the running hram app (`localhost:8000`, Basic Results → Coverage card)
+traced the Envelope's own "60px blank / 30px dead" numbers to their exact source:
+`drawingArea.left = margin.left + axisSizeLeft` (MUI's own `useChartDimensions` selector) — the
+60px is hram's OWN `margin={{left: 60, ...}}` prop on `TotalMetricsPanel.jsx`, stacking
+ADDITIVELY with MUI's separate ~65px axis-width reservation, not one containing the other. That
+duplication is `FIX-13`'s item 6 to fix (trim the app's own margin now that this package sizes
+the axis itself), not something `THEME-9` could fix by itself — packages can right-size their own
+axis reservation, not an app's separately-chosen margin.
+
+### Review findings, fixed before commit
+
+- **`reviewer` R1 (P1):** `sizeYAxisForContent`'s series-to-axis matching used
+  `(item.yAxisId ?? undefined) === (axis.id ?? undefined)`, which only matches when BOTH sides are
+  literally `undefined` — but MUI assigns an unmarked series to the FIRST axis in the array
+  (`yAxisIds[0]`), not to "no axis". This made the sizer a silent no-op for the PRIMARY axis of
+  exactly the dual-axis case (`TimeSeriesChart`'s `CHART-5` feature) that motivated this WO. Fixed:
+  match against `yAxis[0]?.id` as the default, not `undefined`. Regression test added.
+- **`ui_reviewer` U1 (P1):** see "not originally scoped" above — labels made optional.
+- **`ui_reviewer` U3 (P2):** the sizer used the theme-wide tick font size even when a caller
+  overrode `tickLabelStyle.fontSize` per-axis. Fixed: reads the axis' own (already-merged)
+  `tickLabelStyle.fontSize` first, falling back to the theme default only if absent.
+- **`ui_reviewer` U5 (P3):** the label-thickness term was derived from `theme.typography.body1`,
+  which only coincidentally matches MUI's own HARDCODED 14px axis-label font
+  (`ChartsYAxisImpl.js` sets `fontSize: 14` after spreading `body1`, so it always wins regardless
+  of theme). Fixed: a named `MUI_AXIS_LABEL_FONT_SIZE_PX = 14` constant, decoupled from theme.
+- **`ui_reviewer` U2 (P2, accepted as a documented limitation, not fixed):** the width estimate is
+  driven by the axis' own `min`/`max`/series values, not MUI's actual "nice-tick" rounding, which
+  can occasionally round a domain's extremes outward to a longer string. The existing 1.1x safety
+  factor absorbs small overshoots; a tighter fix would require duplicating MUI's own tick
+  algorithm, out of proportion for this WO. The rendered check below is the actual proof either way.
+- **`ui_reviewer` U4:** claimed `TimeSeriesChart.jsx` bypasses `withAxisDefaults`/
+  `sizeYAxisForContent` entirely. Verified against source: `TimeSeriesChart` renders through this
+  package's own `<BarChart>` (not `MuiLineChart` directly), so its `yAxis` array — including the
+  dual-axis case — DOES flow through both functions. Not acted on; recorded here so the claim
+  isn't silently dropped.
+
+### Target repo
+
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`
+
+## Part C — Orchestrator only — NOT ADDRESSED TO THE IMPLEMENTER
+
+> **If you are the implementer reading this work order as your own specification: STOP at this
+> line.**
+
+- **Execution.** Codex known-unavailable today (see Part B) — implemented directly in Claude.
+- **Review routing.** `reviewer` + `ui_reviewer`, concurrent, one background batch — both ran,
+  findings above, all in-scope findings fixed before commit.
+- **Verification.** The package's own affected-set suite (`BarChart.test.jsx`, `LineChart.test.jsx`,
+  `TimeSeriesChart.test.jsx`, `timeSeriesLegend.test.js`, `chartDefaults.test.js` — 60 tests,
+  green). **The rendered check in hram could NOT be completed live in this session** — the Browser
+  pane only carries real viewport dimensions for the tab the operator has actually displayed;
+  freshly-opened tabs (both a new hram tab and ui-core-micha's own dev harness) measured 0×0 and
+  produced negative-width SVG rect errors as a direct consequence, not a code defect. The BEFORE
+  numbers (Coverage KPI card) WERE captured live from the properly-displayed hram tab and are
+  quoted above; the AFTER re-measurement is deferred to `FIX-13`, which needs it anyway once
+  hram's pin is bumped (its own WO already orders re-measurement after the pin bump, so this
+  doesn't lose anything — it was always going to happen there).
+- **Register & commit.** Advance the THEME-9 row with the reviewer verdicts. Track the consumer
+  pin bumps (hram = `FIX-13`) — this WO is not done at publish.