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

package/DESIGN.md

@@ -22,6 +22,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.
+8b. **Scatter: neutral by default; colour only when it encodes a real dimension.** An undifferentiated point cloud is one neutral mass (the role register's neutral, not a series/KPI-identity hue) — colour is earned by a genuine data dimension (a category, a continuous measure), never applied just to look intentional. `ScatterChart` (THEME-10, drawn from three real consumers — hram's allocation-performance, access-gap, and optimization-results panels) supports three modes: neutral (default, single series, no colour set), categorical (multiple series, one colour per series, discrete legend — draw the colours from the app's own family/role register, not a hand-indexed array), and continuous (the caller resolves a per-point colour from its own scale and applies it via `getPointStyle`; this package does not ship a colour-scale/legend component). Bubble sizing (`sizeAccessor`) always draws largest-first — an unordered bubble chart with no defined draw order is silently wrong, not a stylistic choice. Individually marked points (a hollow status-quo point against filled candidates) go through the same `getPointStyle` hook. Reference geometry (a computed curve, a labelled reference line) is composed as `children`, reading the chart's own live scale (`ScatterReferenceCurve`/`ScatterReferenceLine`) rather than a second, hand-rolled pixel mapping. **Not this preset:** row-based dot plots (a forest plot, a tornado) — categorical y-axis, 150–220px of row labels, row-density as the layout problem — are a different chart family with their own preset, not a scatter with a tall left margin.
 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

@@ -83,3 +83,5 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 | 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). |
+| THEME-10 | Ein Scatter-Preset, entworfen an drei realen Konsumenten | hram zeichnet **drei** Scatter vollständig von Hand — eigene Achsenlinien, Gitter, Ticks, Tick-Beschriftungen und gedrehte Achsentitel auf fest verdrahteten Leinwänden; aus diesem Paket kommt nur `ChartFrame`. `AllocationPerformancePanel` (720×420, Wolke + Hüllkurve + drei markierte Punkte, kontinuierliche Färbung), `AccessGapScatterPanel` (Bubble-Wolke mit datengetriebenem Radius + beschriftete y=x-Diagonale, **kategoriale** Färbung mit diskreter Legende, beide Achsen fix 0–1) und `OptimizationResultsPanel` (Wolke + gestrichelte Referenzlinie, Status quo als hohler Marker). Das ist keine Nachlässigkeit — **es gibt hier kein Scatter-Preset**, also gab es nichts zu greifen; jede Verbesserung dieses Kits (Achsengrössen, Tick-Formatierung, Label-Platzierung, Rollenpalette) geht an allen dreien vorbei. Der Operator hat diesen Weg bewusst gewählt, statt die Apps MUI X direkt nutzen zu lassen (hram `FIX-15`, Gabelung b). Voller Auftrag [`work-orders/THEME-10.md`](work-orders/THEME-10.md) | 2026-08-14 | done (npm publish 2.41.0, gebündelt mit THEME-11; Konsumenten-Pin-Bumps offen) | ff67fc7 | Tier 3 (Shared-Core, neue öffentliche API). Codex bereits `unavailable` für heute — direkt in Claude implementiert, Autorenschaft geflippt, `reviewer` + `ui_reviewer` liefen parallel (ohnehin Pflicht bei Tier 3). **`reviewer` R1 (P1, behoben):** `sizeYAxisForContent` erwartet rohe Zahlen in `series[].data`, Scatter liefert `{x,y,z,id}`-Objekte — der Fallback fand still NULL Kandidaten, solange kein `yAxis.min/max` gesetzt war (stiller Rückfall auf MUIs Flat-Default). Behoben per Adapter am Call-Site (`yValueSeries`), NICHT am geteilten Helper — BarChart/LineChart bleiben unangetastet. **R2 (P2, behoben):** `dataIndex`-Semantik im Bubble-Modus (post-Sort-Index, nicht Original-Array) war nicht dokumentiert — jetzt im Docstring. **`ui_reviewer` U1 (P2, aufgeklärt statt Code geändert):** `shape:'square'` schien nicht auf die drei Panels rückführbar — tatsächlich rückführbar auf Allocation-Panels `isTargeted`-Punkte (`ShapeGlyph`), im WO nur nicht explizit zitiert; WO-Text nachgezogen. **U2 (P2, behoben):** Optimization-Form war live nicht eigens gerendert — dritte Dev-Harness-Fixture ergänzt und live verifiziert (genau diese Kombination — kein `yAxis.min/max`, keine explizite Palette — deckte R1 auf, die beiden anderen Fixtures umgingen den Fehler zufällig). **U3 (P3, behoben):** Test ergänzt, dass eine Einzelserie mit eigener `.color` nicht als neutral behandelt wird. **U5 (P3, dokumentiert):** WO-Text stellte klar, dass Allocations eigener Status-quo-Punkt ebenfalls hohl ist, nicht nur Optimizations. **U4 (P3, akzeptierter Rest):** fehlende Nicht-visuelle Kennzeichnung von hohl/Form — vorbestehende Lücke im ganzen Chart-Kit, nicht neu eingeführt, nicht in dieser WO behoben. Alle drei benannten Konsumenten-Formen live im eigenen Dev-Harness gerendert und DOM-vermessen (Mark-Counts 6/6, 7/7, 4/4 — keine stillen Drops); ein zweiter echter Bug (Bubble-Radius pro Serie statt Chart-weit) beim Live-Rendern gefunden und vor Commit behoben, Regressionstest ergänzt. Affected-Set grün (78 Tests). **Version noch nicht gebumpt, Publish zurückgehalten** — Operator kündigte THEME-11 an, Version-Bump + Publish sollen gebündelt werden. **Das ursprünglich benannte Einzelkonsumenten-Risiko ist weitgehend erledigt.** Der erste Entwurf (2026-08-14) warnte, eine Abstraktion aus einem einzigen Beispiel friere die falsche Form ein; danach nannte der Operator das Access-Panel, und eine Suche fand ein drittes. Drei unabhängige Konsumenten unterscheiden eine echte Variationsachse von einer Vermutung — und **zwei der Achsen wurden gefunden, nicht entworfen**: kategoriale Färbung mit diskreter Legende und datengetriebener Bubble-Radius mit Z-Order kommen im Allocation-Panel überhaupt nicht vor. Aus einem Panel gebaut hätte das Preset beide verfehlt. Ersetzt wird das Risiko durch die engere Disziplin: **jede Option muss auf eines der drei Panels zurückführbar sein**, sonst kommt sie nicht rein; wächst die API während der Umsetzung, stop and report. **Neue Hauptgefahr ist die Übergeneralisierung:** dieselbe Suche fand zwei weitere handgemalte Panels, die ebenfalls Kreise zeichnen, aber **ein anderes Diagramm sind** — `CalibrationPanel` (Forest-Plot, `MARGIN.left=150`, Punktschätzer + Intervall je Zeile) und `SensitivityAnalysisPanel` (Tornado, `MARGIN.left=220`, `<rect>`-Balken), dazu die Divergenz-Ansicht in `OptimizationResultsPanel`. Kategoriale y-Achse, 150–220 px Zeilenlabels, Zeilendichte als Layoutproblem — **ausdrücklich ausgeschlossen**, eigenes Preset, eigener WO. **Wichtigster Default bleibt:** die undifferenzierte Wolke ist neutral (Rollenregister), NICHT eine KPI-Identitätsfarbe — genau das macht das Allocation-Panel falsch. Das Access-Panel färbt dagegen **zu Recht** kategorial (Division/Settlement sind echte Datendimensionen und kommen bereits aus dem eingefrorenen Familienregister); neutral ist der Default für „keine Dimension kodiert“, kein Farbverbot. Muss THEME-9s Helfer wiederverwenden (`sizeYAxisForContent`, `defaultNumericTickFormatter`, `withAxisDefaults`, `spaceForRotatedTicks`); ein Preset mit eigener Achsenlogik würde genau das wieder aufreissen, was THEME-9 geschlossen hat. Konkrete Regression, die es stoppt: das Access-Panel verdrahtet sechs Grautöne fest (`#F0F0F0`, `#D0D0D0`, `#999`, `#666`, `#555`, `#B0B0B0`), die keine Theme-Änderung erreicht. Nicht am Publish abschliessen: hram `FIX-15` ist der erste Konsument und blockiert darauf; Access und Optimization sind bekannte Konsumenten **ohne eigenen WO** — separat zu planen, nicht hier einzufalten. Pin-Bump zusammen mit den bereits wartenden THEME-8 und THEME-9 fahren. |
+| THEME-11 | Das Kit hat keine Meinung zu Chart-Rändern, also erbt jedes Diagramm im Estate die von MUI | hrams vier KPI-Karten wurden pixelweise zerlegt: Chart 270 px hoch, davon **202 px Plotfläche** — die restlichen 167 px sind Beiwerk, und die Bilanz geht auf die beobachteten ~370 px Kartenhöhe exakt auf. Der Grund für 20 px auf allen vier Seiten: **dieses Paket bildet nie eine Meinung**. `spaceForRotatedTicks` gibt `margin` unverändert zurück, solange die x-Ticks nicht rotiert sind — reicht der Aufrufer nichts, geht `margin: undefined` an `MuiBarChart` und `DEFAULT_MARGINS = {20,20,20,20}` greift. THEME-9 hat dem Kit Achsen*grössen* gegeben; Ränder waren nie in seinem Scope. Neu: `top: 10`, `bottom: 8`, `left: 8`, `right: 16`, plus `ChartFrame`s Titel-`mb: 2` → `mb: 1`. Voller Auftrag [`work-orders/THEME-11.md`](work-orders/THEME-11.md) | 2026-08-14 | done (npm publish 2.41.0, gebündelt mit THEME-10; Konsumenten-Pin-Bumps offen) | bb7794d | Tier 3 (Shared-Core). Codex bereits `unavailable` — direkt in Claude implementiert, Autorenschaft geflippt, `reviewer` + `ui_reviewer` liefen parallel (ohnehin Pflicht bei Tier 3). **Beide Fallen sauber vermieden** (`reviewer`, an beiden Dateien einzeln verifiziert, keine Befunde): `spaceForRotatedTicks` läuft weiterhin auf dem unveränderten Aufrufer-`margin`, `withMarginDefaults` erst danach gemerged — der rotierte Pfad verliert seinen Zusatzplatz nicht. `MUI_CHART_MARGIN_BOTTOM` (20→8) mitgezogen. **`ui_reviewer` U1-U4 (alle P2/P3, dokumentiert statt Code geändert):** die live gemessene Fast-Kollision (gruppierte Zahl "1,000" bei nur ~1px Abstand vom neuen `right:16`) stammt aus MUIs eigener Standard-Tick-Formatierung, nicht aus THEME-9s Formatter (Fehlzuschreibung korrigiert); **`reviewer` verifizierte zusätzlich**, dass KEIN aktueller hram-Konsument diesen Pfad überhaupt trifft (alle nutzen `scaleType:'band'`; `AllocationPerformancePanel` — der ursprünglich befürchtete Fall — importiert nur `ChartFrame`, zeichnet eigenes SVG, geht gar nicht über `BarChart`/`LineChart`) — "kein Konsument hat das" trifft also exakt zu, nicht nur plausibel. Restrisiko dokumentiert für den ersten künftigen linearen Konsumenten. `ChartFrame`s `mb`-Trim bewusst unbedingt (nicht an Chart-Preset gekoppelt) — Titelzeile und Plot-Rand sind unabhängiges Möbel. **Scope-Lücke benannt, nicht eingefaltet:** `ScatterChart` (THEME-10) bekommt noch keinen `withMarginDefaults` — Folge-WO. Affected-Set grün (91 Tests). Gerendert live verifiziert: rotierter Tick-Chart ohne Overlap (15px Abstand zum Achsentitel), linearer x-Achsen-Chart ohne echtes Clipping (schmal: 5px Abstand; breit: MUIs eigene Kürzung greift bei ~1px, nie Overflow). **Warum die Werte pro Seite verschieden sind — das ist der Kern, kein Feinschliff:** `margin.left` liegt **ausserhalb** der y-Achsenbreite (`drawingArea.left = margin.left + axisSizeLeft`, Kommentar des Pakets selbst), ist also reines Polster; `margin.bottom` liegt **unter** dem x-Achsenblock, dessen `DEFAULT_AXIS_SIZE_HEIGHT` das Tick-Label bereits enthält; `margin.top` trägt dagegen echten Inhalt — das oberste y-Tick-Label ist auf seiner Gitterlinie zentriert und ragt eine halbe Caption-Zeilenhöhe (~9 px) über die Plotfläche, **deshalb 10 und nicht 8**. `right` wird bewusst **weniger** getrimmt (16): bei einer Bandachse sitzen die Ticks mittig, bei einer **linearen** x-Achse sitzt das letzte Label auf der Kante und ragt eine halbe Labelbreite (~13 px) hinaus. Nicht vom Skalentyp abhängig machen — das wäre abgeleitetes Verhalten ohne benannten Konsumenten. **Zwei benannte Fallen.** (1) `spaceForRotatedTicks` erkennt „Aufrufer hat gesetzt“ an `margin?.bottom != null`; wird ein Paket-Default **vor** dieser Prüfung injiziert, sehen rotierte Charts ihn als aufrufergesetzt und verlieren ihren Extraplatz — hrams `RatioMetricsPanel` fährt Labels bei −45° und −90° und würde sie beschneiden. (2) `MUI_CHART_MARGIN_BOTTOM = 20` in `chartDefaults.js` ist eine hartkodierte Kopie des MUI-Defaults und Basis für den rotierten Pfad — muss mitwandern. **Per-Seite mergen, nicht das ganze Objekt ersetzen:** Panels, die schon von Hand tunen (`{left:60, right:8, top:20, …}`), müssen auf ihren gesetzten Seiten unberührt bleiben. `CHART_FRAME_ROOT_SX = { p: 2 }` bleibt bewusst stehen — `ChartFrame` umschliesst auch Nicht-Chart-Inhalte, das ist ein eigener Vorschlag mit anderer Streuweite, kein Anhängsel. **Streuweite:** trifft jedes Diagramm in jeder konsumierenden App, und zwar beim Pin-Bump, nicht beim Publish — ein falscher Seitenwert ist damit eine estate-weite Regression. Der gerenderte Check muss deshalb **einen rotierten** und **einen linearen** x-Achsen-Chart enthalten, nicht nur die KPI-Karten. Pin-Bump zusammen mit THEME-8/9/10 fahren. |

package/dev/entries.jsx

@@ -40,6 +40,11 @@ import { BarChart } from '../src/components/charts/BarChart';
 import { ChartFrame } from '../src/components/charts/ChartFrame';
 import { LineChart } from '../src/components/charts/LineChart';
 import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
+import {
+  ScatterChart,
+  ScatterReferenceCurve,
+  ScatterReferenceLine,
+} from '../src/components/charts/ScatterChart';
 import { NotificationBell } from '../src/notifications/NotificationBell';
 import { NotificationsProvider } from '../src/notifications/NotificationsProvider';
 import { useRealtime } from '../src/notifications/realtime';
@@ -201,6 +206,155 @@ function BarChartEntry() {
   );
 }
 
+// THEME-11 rendered-verification fixture -- a genuinely LINEAR (not band/point) x-axis, whose
+// last tick label sits AT the plot edge rather than centred like a band axis. Right margin is
+// the one side deliberately trimmed less (16 vs 8) for exactly this case.
+function LinearXAxisLineChartEntry() {
+  return (
+    <ChartFrame title="Linear x-axis (shape check)" subtitle="THEME-11: last tick label must not clip against the trimmed right margin" minHeight={360}>
+      <LineChart
+        xAxis={[{ scaleType: 'linear', data: [0, 250, 500, 750, 1000] }]}
+        series={[{ label: 'Value', data: [4, 9, 6, 14, 11] }]}
+        xAxisLabel="Budget"
+        yAxisLabel="Outcome"
+        height={320}
+      />
+    </ChartFrame>
+  );
+}
+
+// THEME-10 rendered-verification fixture -- shape 1: allocation-performance's cloud + computed
+// envelope curve + individually marked points, including a hollow status-quo marker and a
+// continuous per-point colour the caller resolves itself (`getPointStyle`).
+const ALLOCATION_POINTS = [
+  { id: 'sq', x: 0, y: 0, equity: 0.5, isStatusQuo: true },
+  { id: 'p1', x: 100000, y: 400, equity: 0.2 },
+  { id: 'p2', x: 250000, y: 900, equity: 0.35 },
+  { id: 'p3', x: 400000, y: 1500, equity: 0.55 },
+  { id: 'p4', x: 550000, y: 1900, equity: 0.72 },
+  { id: 'p5', x: 700000, y: 2100, equity: 0.9, isSelected: true },
+];
+const ALLOCATION_ENVELOPE = [
+  { x: 0, y: 0 }, { x: 250000, y: 900 }, { x: 550000, y: 1900 }, { x: 700000, y: 2100 },
+];
+
+function equityColor(value) {
+  // Stand-in continuous scale: the app owns this in reality (getColorScale); the preset only
+  // needs to APPLY a resolved colour per point via getPointStyle.
+  const hue = 220 - value * 160;
+  return `hsl(${hue}, 55%, 45%)`;
+}
+
+function AllocationShapeScatterEntry() {
+  return (
+    <ChartFrame title="Allocation performance (shape check)" subtitle="Cloud + envelope + hollow status-quo + selected diamond" minHeight={420}>
+      <ScatterChart
+        series={[{ id: 'candidates', data: ALLOCATION_POINTS }]}
+        xAxisLabel="Cost"
+        yAxisLabel="DALYs averted"
+        getPointStyle={(point) => ({
+          hollow: point.isStatusQuo,
+          shape: point.isSelected ? 'diamond' : 'circle',
+          color: point.isStatusQuo ? undefined : equityColor(point.equity),
+          radius: point.isStatusQuo || point.isSelected ? 7 : 6,
+        })}
+        height={360}
+      >
+        <ScatterReferenceCurve points={ALLOCATION_ENVELOPE} color="#2E7D32" dashed={false} />
+      </ScatterChart>
+    </ChartFrame>
+  );
+}
+
+// THEME-10 rendered-verification fixture -- shape 2: access-gap's bubble cloud (data-driven
+// radius, explicit z-order) + labelled y=x reference diagonal + categorical colouring with a
+// discrete legend + both axes pinned 0-1 with a fixed tick set.
+const ACCESS_DIVISION_COLORS = { north: '#0F62FE', south: '#24A148', east: '#FF832B' };
+const ACCESS_POINTS = {
+  north: [
+    { id: 'n1', x: 0.62, y: 0.7, pop: 12000 },
+    { id: 'n2', x: 0.4, y: 0.5, pop: 3000 },
+    { id: 'n3', x: 0.8, y: 0.75, pop: 18000 },
+  ],
+  south: [
+    { id: 's1', x: 0.3, y: 0.35, pop: 5000 },
+    { id: 's2', x: 0.55, y: 0.5, pop: 9000 },
+  ],
+  east: [
+    { id: 'e1', x: 0.7, y: 0.6, pop: 2000 },
+    { id: 'e2', x: 0.45, y: 0.4, pop: 30000 },
+  ],
+};
+const ACCESS_TICKS = [0, 0.25, 0.5, 0.75, 1];
+const pctFormatter = (value, context) => (context?.location === 'tick'
+  ? `${Math.round(value * 100)}%`
+  : `${(value * 100).toFixed(1)}%`);
+
+function AccessShapeScatterEntry() {
+  return (
+    <ChartFrame title="Access gap (shape check)" subtitle="Bubble cloud + labelled y=x diagonal + categorical legend, fixed 0-1 axes" minHeight={420}>
+      <ScatterChart
+        series={Object.entries(ACCESS_POINTS).map(([division, data]) => ({
+          id: division,
+          label: division,
+          data,
+          color: ACCESS_DIVISION_COLORS[division],
+        }))}
+        xAxisLabel="Coverage"
+        yAxisLabel="Care-seeking rate"
+        xAxis={[{ min: 0, max: 1, tickInterval: ACCESS_TICKS, valueFormatter: pctFormatter }]}
+        yAxis={[{ min: 0, max: 1, tickInterval: ACCESS_TICKS, valueFormatter: pctFormatter }]}
+        sizeAccessor={(point) => point.pop}
+        height={360}
+      >
+        <ScatterReferenceLine
+          from={{ x: 0, y: 0 }}
+          to={{ x: 1, y: 1 }}
+          color="#B0B0B0"
+          dashed
+          label="No gap"
+          labelAt={{ x: 0.88, y: 0.93 }}
+          labelAngle={-45}
+        />
+      </ScatterChart>
+    </ChartFrame>
+  );
+}
+
+// THEME-10 rendered-verification fixture -- shape 3: optimization-results' cloud (no bubble
+// sizing, no categorical colour -- the plainest of the three shapes) + a dashed reference
+// threshold line + a hollow status-quo marker, added per ui_reviewer finding U2: the other two
+// fixtures don't exercise "no yAxis min/max set, no explicit palette" together, which is exactly
+// the combination reviewer finding R1 (sizeYAxisForContent's number-vs-point-object mismatch)
+// slipped through on.
+const OPTIMIZATION_POINTS = [
+  { id: 'sq', x: 0, y: 0.42, isStatusQuo: true },
+  { id: 'c1', x: 120000, y: 0.55 },
+  { id: 'c2', x: 260000, y: 0.68 },
+  { id: 'c3', x: 400000, y: 0.79 },
+];
+
+function OptimizationShapeScatterEntry() {
+  return (
+    <ChartFrame title="Optimization results (shape check)" subtitle="Cloud + dashed threshold + hollow status-quo, no bubble/no categorical colour" minHeight={420}>
+      <ScatterChart
+        series={[{ id: 'candidates', data: OPTIMIZATION_POINTS }]}
+        xAxisLabel="Cost"
+        yAxisLabel="Coverage"
+        getPointStyle={(point) => (point.isStatusQuo ? { hollow: true } : {})}
+        height={360}
+      >
+        <ScatterReferenceLine
+          from={{ x: 0, y: 0.6 }}
+          to={{ x: 400000, y: 0.6 }}
+          color="#0F62FE"
+          dashed
+        />
+      </ScatterChart>
+    </ChartFrame>
+  );
+}
+
 function StatusChip({ label, tone }) {
   return (
     <Chip
@@ -540,6 +694,10 @@ export const entries = [
   { id: 'section-nav', label: 'Navigation / Section nav', Component: SectionNavEntry },
   { id: 'notification-bell', label: 'Notifications / Bell', Component: NotificationBellEntry },
   { id: 'bar-chart', label: 'Charts / BarChart', Component: BarChartEntry },
+  { id: 'linear-x-line-chart', label: 'Charts / LineChart (linear x-axis)', Component: LinearXAxisLineChartEntry },
+  { id: 'scatter-chart-allocation-shape', label: 'Charts / ScatterChart (allocation shape)', Component: AllocationShapeScatterEntry },
+  { id: 'scatter-chart-access-shape', label: 'Charts / ScatterChart (access shape)', Component: AccessShapeScatterEntry },
+  { id: 'scatter-chart-optimization-shape', label: 'Charts / ScatterChart (optimization shape)', Component: OptimizationShapeScatterEntry },
   { id: 'time-series-chart', label: 'Charts / TimeSeriesChart', Component: TimeSeriesChartEntry },
   { id: 'realtime-adapter', label: 'Transport / Realtime adapter', Component: RealtimeAdapterEntry },
   { id: 'messaging-provider', label: 'Messaging / Provider state', Component: MessagingProviderEntry },

package/dist/components/charts/BarChart.js

@@ -16,7 +16,7 @@ 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, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, withMarginDefaults, } from './chartDefaults';
 /**
  * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
  * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
@@ -36,5 +36,5 @@ export function BarChart(_a) {
     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: sizedYAxis, 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: withMarginDefaults(rotatedTickSpace.margin), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/ChartFrame.js

@@ -45,7 +45,7 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
     else if (isEmpty) {
         content = _jsx(Alert, { severity: "info", children: emptyMessage || t('ChartFrame.EMPTY_DEFAULT') });
     }
-    return (_jsxs(Paper, { variant: variant, sx: [CHART_FRAME_ROOT_SX, ...callerSx], children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: titleVariant, children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
+    return (_jsxs(Paper, { variant: variant, sx: [CHART_FRAME_ROOT_SX, ...callerSx], children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 1 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: titleVariant, children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
                     width: '100%',
                     minHeight,
                     aspectRatio: aspect,

package/dist/components/charts/LineChart.js

@@ -16,7 +16,7 @@ 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, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, withMarginDefaults, } 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
@@ -51,5 +51,5 @@ export function LineChart(_a) {
     const defaultedSeries = series.map((item) => (Object.assign({ showMark: false, labelMarkType: 'square' }, item)));
     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) })) }));
+    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: withMarginDefaults(rotatedTickSpace.margin), slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/ScatterChart.js

@@ -0,0 +1,178 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { ScatterChart as MuiScatterChart } from '@mui/x-charts/ScatterChart';
+import { useXScale, useYScale } from '@mui/x-charts/hooks';
+import { useNeutralChartPalette } from './palette';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForContent, withAxisDefaults, withChartSlotDefaults, withGridDefaults, } from './chartDefaults';
+// Small enough that hram's largest cloud (~300 points, the tested magnitude -- state it, don't
+// imply it scales past that) doesn't fuse into a solid mass at the default (non-bubble) size.
+const DEFAULT_MARKER_RADIUS = 5;
+const BUBBLE_MIN_RADIUS = 3;
+const BUBBLE_RADIUS_SCALE = 10;
+/**
+ * value -> radius, `max(3, 10 * sqrt(value / maxValue))` -- the formula the access-gap panel
+ * already hand-rolls (THEME-10 scope 5). Exported so a consumer can size a legend swatch or a
+ * standalone marker the same way the chart does.
+ */
+export function scaleBubbleRadius(value, maxValue, { minRadius = BUBBLE_MIN_RADIUS, scale = BUBBLE_RADIUS_SCALE } = {}) {
+    if (!Number.isFinite(value) || !Number.isFinite(maxValue) || maxValue <= 0)
+        return minRadius;
+    return Math.max(minRadius, scale * Math.sqrt(Math.max(0, value) / maxValue));
+}
+// A custom MUI marker slot -- the only way to vary radius/colour/shape PER POINT: MUI's own
+// Scatter passes a single `markerSize` per whole series (confirmed against
+// @mui/x-charts/ScatterChart/Scatter.js -- `size: series.markerSize`, never derived from a
+// point's own `z`), so bubble sizing and per-point overrides (a hollow status-quo marker, a
+// continuous-scale colour) can only be expressed by replacing the marker itself.
+function makeMarkerSlot(seriesById, { sizeAccessor, chartMax, getPointStyle }) {
+    return function PresetScatterMarker(_a) {
+        var _b, _c, _d, _e, _f, _g;
+        var { seriesId, dataIndex, color, x, y, isHighlighted, isFaded, size, onClick } = _a, rest = __rest(_a, ["seriesId", "dataIndex", "color", "x", "y", "isHighlighted", "isFaded", "size", "onClick"]);
+        const point = (_c = (_b = seriesById[seriesId]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[dataIndex];
+        const style = point && getPointStyle ? (getPointStyle(point, { seriesId, dataIndex }) || {}) : {};
+        const radius = (_d = style.radius) !== null && _d !== void 0 ? _d : (sizeAccessor && point ? scaleBubbleRadius(sizeAccessor(point), chartMax) : size);
+        const r = (isHighlighted ? 1.15 : 1) * radius;
+        const fill = style.hollow ? 'none' : ((_e = style.color) !== null && _e !== void 0 ? _e : color);
+        const stroke = (_f = style.color) !== null && _f !== void 0 ? _f : color;
+        const shared = Object.assign({ onClick, opacity: isFaded ? 0.3 : 1, stroke, strokeWidth: style.hollow ? 2 : ((_g = style.strokeWidth) !== null && _g !== void 0 ? _g : 1), style: { cursor: onClick ? 'pointer' : 'unset' } }, rest);
+        if (style.shape === 'square') {
+            return _jsx("rect", Object.assign({ x: x - r, y: y - r, width: r * 2, height: r * 2, fill: fill }, shared));
+        }
+        if (style.shape === 'diamond') {
+            return _jsx("polygon", Object.assign({ points: `${x},${y - r} ${x + r},${y} ${x},${y + r} ${x - r},${y}`, fill: fill }, shared));
+        }
+        return _jsx("circle", Object.assign({ cx: x, cy: y, r: r, fill: fill }, shared));
+    };
+}
+/**
+ * A computed curve (allocation's Pareto envelope) drawn inside the chart's own live coordinate
+ * space. Render as a `ScatterChart` child -- `useXScale`/`useYScale` only resolve inside the
+ * chart's own context, so this can never drift into a second, hand-rolled pixel mapping the way
+ * the hand-drawn panels this preset replaces each built their own.
+ */
+export function ScatterReferenceCurve({ points, color, dashed, strokeWidth = 2 }) {
+    const xScale = useXScale();
+    const yScale = useYScale();
+    if (!points || points.length < 2)
+        return null;
+    const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${xScale(p.x)},${yScale(p.y)}`).join(' ');
+    return _jsx("path", { d: d, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeDasharray: dashed ? '6 3' : undefined });
+}
+/**
+ * A straight reference line with an optional inline label -- the access panel's labelled y=x
+ * "no gap" diagonal, or optimization's dashed threshold line. Same live-scale rule as
+ * `ScatterReferenceCurve`.
+ */
+export function ScatterReferenceLine({ from, to, color, dashed, strokeWidth = 1.5, label, labelAt, labelAngle = 0, }) {
+    const xScale = useXScale();
+    const yScale = useYScale();
+    const labelX = labelAt ? xScale(labelAt.x) : null;
+    const labelY = labelAt ? yScale(labelAt.y) : null;
+    return (_jsxs("g", { children: [_jsx("line", { x1: xScale(from.x), y1: yScale(from.y), x2: xScale(to.x), y2: yScale(to.y), stroke: color, strokeWidth: strokeWidth, strokeDasharray: dashed ? '5 3' : undefined }), label && labelAt && (_jsx("text", { x: labelX, y: labelY, fontSize: 10, fill: color, textAnchor: "start", transform: labelAngle ? `rotate(${labelAngle}, ${labelX}, ${labelY})` : undefined, children: label }))] }));
+}
+/**
+ * Responsive MUI X-Charts scatter preset, drawn from three real consumers (THEME-10): a
+ * continuously-coloured cost/outcome cloud with an envelope curve and marked points
+ * (allocation performance), a bubble cloud with a labelled y=x reference diagonal and
+ * categorical per-point colouring (access gap), and a cloud with a dashed reference line and a
+ * hollow status-quo marker (optimization results). Reuses BarChart/LineChart's own axis
+ * machinery (THEME-9) rather than sizing its own -- a scatter axis is a numeric axis like any
+ * other, and a preset that re-derives axis sizing would re-open exactly what THEME-9 closed.
+ *
+ * `series` follows MUI's own scatter shape (`{id, label, data: [{x,y,z?,id?}], color?}`).
+ * Multiple series render as a categorical cloud with a discrete legend, one colour per series
+ * -- draw those colours from the app's own family/role register via `palette`; this package
+ * does not invent one. A single series with no explicit `color` renders as one neutral mass:
+ * undifferentiated data encodes no dimension, so it gets the role register's neutral tone
+ * (`palette.js`'s `neutral`), never a series/KPI identity hue.
+ *
+ * `sizeAccessor(point) => number` turns on bubble mode: marker radius follows
+ * `scaleBubbleRadius`, and every series' points are drawn largest-first so a small bubble is
+ * never hidden under a large one -- the z-order is the whole correctness of a bubble chart, not
+ * a decoration.
+ *
+ * `getPointStyle(point, {seriesId, dataIndex}) => {hollow?, color?, shape?, radius?,
+ * strokeWidth?}` marks individual points -- a status-quo point drawn hollow against filled
+ * candidates (allocation, optimization), a `'square'` shape for a source category the data
+ * itself marks (allocation's "targeted" points), or a per-point colour from a continuous scale
+ * the caller computed (this package does not ship a continuous colour-scale/legend component;
+ * the caller already owns that logic and only needs a way to apply the resolved colour per
+ * point, which this is it). Read the `point` object itself, not `dataIndex`, to correlate a
+ * style back to your own data -- in bubble mode (`sizeAccessor` set) `dataIndex` indexes the
+ * chart's internal z-ordered copy of your series, not your original array's order.
+ *
+ * Reference geometry (a computed curve, a straight line, either with an optional label) is
+ * composed as `children` using `ScatterReferenceCurve`/`ScatterReferenceLine` above.
+ *
+ * Tested magnitude: a few hundred marks (hram's largest cloud is ~300 points). Not verified,
+ * and not implied to hold, at thousands+.
+ *
+ * THEME-10 was commissioned before its requirement set closed -- a forthcoming "paired point"
+ * shape (optimization's MILP-vs-simulated pair, two marks joined by a connector) is named but
+ * explicitly NOT built here. Nothing below assumes a datum produces exactly one mark: a point
+ * object may carry arbitrary extra fields beyond `{x,y,z,id}` (as `getPointStyle`'s own status-
+ * quo/bubble-radius usage already does), `getPointStyle`/`sizeAccessor` key off that datum, not
+ * off a fixed mark count, and reference geometry is composed via `children`, not baked into the
+ * per-point contract. A pair variant can therefore layer on later -- extra series entries plus a
+ * connector drawn through `children` -- without reshaping `series` or either callback's contract.
+ */
+export function ScatterChart(_a) {
+    var _b;
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, sizeAccessor, getPointStyle, markerSize = DEFAULT_MARKER_RADIUS, slotProps, children } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "sizeAccessor", "getPointStyle", "markerSize", "slotProps", "children"]);
+    const theme = useTheme();
+    const { i18n } = useTranslation();
+    const neutralPalette = useNeutralChartPalette();
+    const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) }, theme.typography.caption.fontSize);
+    // Only the Y axis is width-sized (sizeYAxisForContent reserves horizontal space for a
+    // vertical axis's ticks+label) -- a scatter's numeric X axis needs no analogous treatment
+    // beyond what MUI already sizes for a horizontal tick row.
+    //
+    // sizeYAxisForContent's series-data fallback (used when the caller sets no axis min/max)
+    // expects `series[i].data` to be a plain array of numbers -- true for BarChart/LineChart, but
+    // a scatter's data is `{x,y,z,id}` points, so `typeof value === 'number'` never matched and
+    // the fallback silently found zero candidates (reviewer finding, live-caught: it "looked fine"
+    // only because the untested case happened to fall back to MUI's flat default at a magnitude
+    // that didn't visibly overlap). Adapt AT THIS CALL SITE, not inside the shared helper --
+    // BarChart/LineChart's own contract must not change for this.
+    const yValueSeries = useMemo(() => series.map((item) => (Object.assign(Object.assign({}, item), { data: (item.data || []).map((point) => point === null || point === void 0 ? void 0 : point.y) }))), [series]);
+    const sizedYAxis = sizeYAxisForContent(labelledYAxis, yValueSeries, theme.typography.caption.fontSize);
+    const isNeutral = series.length <= 1 && !((_b = series[0]) === null || _b === void 0 ? void 0 : _b.color);
+    const resolvedPalette = palette || (isNeutral ? [neutralPalette.neutral] : neutralPalette.categorical);
+    // A single chart-wide max, NOT one per series: population (or whatever sizeAccessor reads) is
+    // one comparable scale across the whole cloud (matches the access-gap panel's own
+    // `maxPop = Math.max(1, ...points.map(p => p.population))`, computed over every point
+    // regardless of division/settlement) -- a per-series max would let each series' own largest
+    // point always render at full radius, making cross-series bubble size meaningless.
+    const chartMax = useMemo(() => {
+        if (!sizeAccessor)
+            return 1;
+        return Math.max(1, ...series.flatMap((item) => (item.data || []).map((point) => sizeAccessor(point))).filter(Number.isFinite));
+    }, [series, sizeAccessor]);
+    // THEME-10 scope 5: explicit z-order -- largest bubbles drawn first so smaller ones are never
+    // hidden underneath (SVG paints later elements on top). A no-op outside bubble mode.
+    const orderedSeries = useMemo(() => (sizeAccessor
+        ? series.map((item) => (Object.assign(Object.assign({}, item), { data: [...(item.data || [])].sort((a, b) => sizeAccessor(b) - sizeAccessor(a)) })))
+        : series), [series, sizeAccessor]);
+    // The marker's `dataIndex` refers to a position in whatever was actually handed to MUI --
+    // `orderedSeries` (post z-order sort), not the caller's original `series` -- so the lookup
+    // table the marker closes over must be built from that SAME array, or a sorted bubble series
+    // would resolve every point's style/radius against the wrong (pre-sort) index.
+    const orderedSeriesById = useMemo(() => Object.fromEntries(orderedSeries.map((item) => [item.id, item])), [orderedSeries]);
+    const markerSlot = useMemo(() => makeMarkerSlot(orderedSeriesById, { sizeAccessor, chartMax, getPointStyle }), [orderedSeriesById, sizeAccessor, chartMax, getPointStyle]);
+    return (_jsx(Box, { "data-testid": "scatter-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiScatterChart, Object.assign({}, chartProps, { series: orderedSeries.map((item) => (Object.assign({ markerSize }, item))), xAxis: labelledXAxis, yAxis: sizedYAxis, colors: resolvedPalette, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: margin, slots: { marker: markerSlot }, slotProps: withChartSlotDefaults(slotProps, legendPosition), children: children })) }));
+}

package/dist/components/charts/chartDefaults.js

@@ -33,8 +33,37 @@ function cssLengthToPixels(value) {
     return parsed;
 }
 const MUI_LABELLED_X_AXIS_HEIGHT = 45;
-const MUI_CHART_MARGIN_BOTTOM = 20;
+// THEME-11: this used to mirror MUI's own DEFAULT_MARGINS.bottom (20) -- the "resting" bottom
+// margin the rotated-tick path adds its extra height on top of. Now that PACKAGE_DEFAULT_MARGIN
+// below sets the package's own non-rotated bottom to 8, this constant must track THAT value, not
+// MUI's, or a rotated chart would add its extra height to the wrong (too generous) base while
+// every non-rotated chart got trimmed -- an inconsistent baseline between the two paths.
+const MUI_CHART_MARGIN_BOTTOM = 8;
 const AVERAGE_GLYPH_WIDTH_EM = 0.6;
+// THEME-11: this package never formed an opinion on chart margins, so every chart fell back to
+// MUI's own DEFAULT_MARGINS (20px on all four sides) -- measured live (hram's KPI cards) as 167
+// of a 270px-tall chart being furniture. Per-side, not a uniform trim, because each side is for
+// something different: `left`/`bottom` are pure padding (the tick labels already live inside
+// axisSizeLeft / DEFAULT_AXIS_SIZE_HEIGHT), `top` keeps room for the topmost y-tick label's own
+// ~9px overhang past the plot (it is centred on its gridline, not below it), and `right` stays
+// less trimmed than `left` because a LINEAR x-axis's last tick label sits AT the edge and
+// overhangs by about half its width (~13px at caption size) -- a band axis wouldn't need it, but
+// making this conditional on scale type would be inferred behaviour with no named consumer.
+export const PACKAGE_DEFAULT_MARGIN = {
+    top: 10, bottom: 8, left: 8, right: 16,
+};
+/**
+ * Applies the package's own margin default, per side -- a caller's own value on any side (or
+ * the rotated-tick path's own computed `bottom`) always wins on that side; only an UNSET side
+ * gets the package default. A caller passing `{ left: 60 }` therefore keeps that 60 on the
+ * left and gets the package defaults on the other three sides, never MUI's wider ones.
+ */
+export function withMarginDefaults(margin) {
+    const explicit = typeof margin === 'number'
+        ? { top: margin, bottom: margin, left: margin, right: margin }
+        : margin;
+    return Object.assign(Object.assign({}, PACKAGE_DEFAULT_MARGIN), explicit);
+}
 function formattedTickText(axis, value) {
     if (!axis.valueFormatter)
         return String(value);

package/dist/components/charts/palette.js

@@ -17,6 +17,12 @@ export function getNeutralChartPalette(theme) {
         sequential: isDark
             ? [palette.action.disabled, palette.text.secondary, palette.primary.light, palette.primary.main, palette.primary.dark]
             : [palette.action.disabled, palette.divider, palette.text.secondary, palette.primary.light, palette.primary.main],
+        // THEME-10: an undifferentiated mass (e.g. a scatter cloud with no colour
+        // dimension encoded) is ink-neutral, not a series hue -- a KPI identity
+        // colour there implies a meaning the cloud does not carry. `text.secondary`
+        // reads as neutral ink in both palette modes without competing with an
+        // actual categorical/sequential encoding drawn on top of it.
+        neutral: palette.text.secondary,
     };
 }
 /** Resolves the kit's neutral palette from the nearest MUI ThemeProvider. */

package/dist/index.js

@@ -46,6 +46,7 @@ export { ChartFrame } from './components/charts/ChartFrame';
 export { BarChart } from './components/charts/BarChart';
 export { LineChart } from './components/charts/LineChart';
 export { TimeSeriesChart } from './components/charts/TimeSeriesChart';
+export { ScatterChart, ScatterReferenceCurve, ScatterReferenceLine, scaleBubbleRadius, } from './components/charts/ScatterChart';
 export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
 export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from './components/charts/chartLabels';
 export { yearTickInterval } from './components/charts/yearTickInterval';

package/package.json

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

package/src/components/charts/BarChart.jsx

@@ -12,6 +12,7 @@ import {
   withAxisDefaults,
   withChartSlotDefaults,
   withGridDefaults,
+  withMarginDefaults,
 } from './chartDefaults';
 
 /**
@@ -77,7 +78,7 @@ export function BarChart({
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}
-        margin={rotatedTickSpace.margin}
+        margin={withMarginDefaults(rotatedTickSpace.margin)}
         slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>

package/src/components/charts/ChartFrame.jsx

@@ -80,7 +80,9 @@ export function ChartFrame({
 
   return (
     <Paper variant={variant} sx={[CHART_FRAME_ROOT_SX, ...callerSx]}>
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }}>
+      {/* THEME-11: mb: 2 -> mb: 1 (16 -> 8px) -- one line item in the estate-wide chart-furniture
+          trim; the controls row below keeps its own mb: 2, not named in that WO's scope. */}
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 1 }}>
         <Box>
           <Typography id={titleId} variant={titleVariant}>{title}</Typography>
           {subtitle && <Typography variant="body2" color="text.secondary">{subtitle}</Typography>}

package/src/components/charts/LineChart.jsx

@@ -15,6 +15,7 @@ import {
   withAxisDefaults,
   withChartSlotDefaults,
   withGridDefaults,
+  withMarginDefaults,
 } from './chartDefaults';
 
 // Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
@@ -100,7 +101,7 @@ export function LineChart({
         colors={palette || neutralPalette.categorical}
         grid={withGridDefaults(grid)}
         hideLegend={hideLegend}
-        margin={rotatedTickSpace.margin}
+        margin={withMarginDefaults(rotatedTickSpace.margin)}
         slots={{ mark: FilledMarkElement, ...slots }}
         slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />