@micha.bigler/ui-core-micha 2.41.3 → 2.42.0

package/WORK_ORDERS.md

@@ -90,3 +90,4 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 | 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. |
+| UCM-CHART-8 | Make the chart presets stop producing dead space below the chart | `minHeight` and `height` are two different things on these presets and the API lets a caller pass both: `minHeight` lands on the WRAPPER Box (`ScatterChart.jsx:260`, same construction in `BarChart.jsx`), `height` sizes the CHART. When `minHeight > height` the difference is dead space BELOW the chart. Measured in hram 2026-08-20: StructuralReachability 420/380 (40 px), ExpertTimeline 340/280 (60 px), ResultsTimeline 320/280 (40 px), GroupMetrics 300/none (chart unsized). The equal-value majority is WHY it survived -- passing both looks harmless and costs nothing when the numbers match, so it spread by copy-paste. Diagnosed and fixed POINTWISE TWICE in hram (`AllocationPerformancePanel.jsx:462-478`, `OptimizationResultsPanel.jsx:928-940`) with the explanation living as a comment inside those two files, where no new panel reads it. One shared API permitting an incoherent pair, not N panel bugs. | 2026-08-20 | done | 11d362c | Tier 3, shared-core -- every consumer inherits it. Full order: [`work-orders/UCM-CHART-8.md`](work-orders/UCM-CHART-8.md). Deliberately NON-breaking: `minHeight` is deprecated in the docstring and COERCED in code, not removed -- removing it would make every consumer's pin bump a Tier-3 change with unnoticed layout regressions, worse than the defect. `minHeight` alone sizes the chart; `minHeight > height` reserves no wrapper padding; equal values byte-identical; a DEV-ONLY warning names the disagreeing pair (no throw -- a shared package must not break a consumer's page over a layout nit). Before publishing, check the other consumers (dcm-based apps, survey-renderer) for `minHeight` on a chart preset and report what was found -- the one way this could read as a regression is a consumer using the padding as spacing. Publishes from `main` with no staging step, so verify the version is live before any consumer bump. hram's call-site sweep is a separate follow-up GATED on that pin bump. Raised by the operator as "why is there still too much whitespace everywhere" -- the recurrence, not the instances, is the subject.  **Envelope amended 2026-08-21 after review — the original rule would have broken four live call sites.** The resolution is **three-way, not two-way**: `aspect` is a third input and it changes the answer. Four consumers pass `aspect` **with** `minHeight` and **no** `height` — `hram/AccessGapScatterPanel.jsx:182` (`aspect={1.8}`, `minHeight={320}`) and three sites in `fitness-monitor/BodyHistoryPage.jsx` — and there `minHeight` is a legitimate **floor under an aspect-derived height**, not stray padding. "`minHeight` alone sizes the chart" as first written would have turned all four into fixed-height charts. Same prop shape, opposite intent, which is why the rule cannot be stated on `minHeight`/`height` alone. Also corrected: `ChartFrame` takes `minHeight`/`aspect` too and was missing from the file list, and **`BarChart`, `LineChart` and `ChartFrame` never destructure `height`** — for them the pair exists only via the rest spread, so there is no declared prop to look for. The Risks section's hypothetical consumer check is now **done**, with the four sites as its result; `survey-renderer` is named there as a consumer to check but the standalone repo is retired (2026-07-31). Tests gained the `aspect` case explicitly — it is the one that must fail if the resolution is later re-simplified. **Implemented 2026-08-21, Codex known-unavailable that day** (`.claude/codex-status.md` already carried an `unavailable` line for today at task start, from `cockpit/LIVE-4` and `hram/OPT-8`) — Orchestrator implemented directly in Claude, flipping authorship, so the independent reviewer + ui_reviewer (both mandatory at Tier 3 regardless) covered a diff the Orchestrator itself wrote. `resolveChartHeight`/`warnOnHeightMismatch` added to `chartDefaults.js`; wired into ScatterChart/BarChart/LineChart (destructuring `height` out of the rest spread, forwarding it explicitly) and ChartFrame (new optional `height` prop, applied to its own content box since it has no inner MUI chart to forward to). TimeSeriesChart.jsx left unmodified — it never exposes `minHeight`/`height`/`aspect` to its own caller, only forwards a single internal `CHART_HEIGHT` constant identically to ChartFrame's `minHeight` and BarChart's `height`, confirmed unchanged by the full existing `TimeSeriesChart.test.jsx` suite passing untouched. **`reviewer` (Sonnet)**: no bugs; two P3s — the `height`+`aspect` combination on Bar/Line/Scatter is pre-existing, untested, and not fully governed by the three-way contract (wrapper still gets `aspectRatio` unconditionally while the chart gets a hardcoded `height`), and the TimeSeriesChart 320/320 coincidence is two independently-resolved branches landing on the same value, not literally the "equal values" case — both accepted as out of this WO's scope, no live call site hits either. **`ui_reviewer` (Sonnet)**: one P1 noted-not-a-bug (the minHeight-alone branch now gives every such consumer a fixed chart height, which is exactly Part A's Definition of Done, not an undisclosed change — flagged here as a residual cross-app risk since only the 4 aspect+minHeight sites were confirmed, not every minHeight-alone call site) and one real P2, **fixed**: `warnOnHeightMismatch` was called in the render body, so it re-fired the console.warn on every re-render of a mismatched instance; moved into a `useEffect` keyed on `[minHeight, height]` in all four components. Re-verified 128/128 scoped tests green after the fix (BarChart/LineChart/ScatterChart/ChartFrame/chartDefaults/TimeSeriesChart/packageTreeShaking). Version bumped 2.41.3 → 2.42.0 (new optional `ChartFrame.height` prop + new exports, non-breaking). **Not done in this WO**: the app-wide check for other `minHeight`-alone consumers ui_reviewer flagged (U1) — no consumer sweep is in scope per Part A's own "Deliberately NOT done"; flagging for the record, not a blocker. Publish-then-verify-then-bump-consumer-pins sequencing from the Envelope still applies before hram's own call-site cleanup. |

package/dist/components/charts/BarChart.js

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } 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, withGridDefaults, withMarginDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, resolveChartHeight, sizeYAxisForContent, spaceForRotatedTicks, warnOnHeightMismatch, 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
@@ -26,15 +26,22 @@ import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, sizeYAxisForConte
  * 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`).
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
  */
 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"]);
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, height, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "height", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slotProps"]);
     const theme = useTheme();
     const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
+    useEffect(() => warnOnHeightMismatch('BarChart', { minHeight, height }), [minHeight, height]);
+    const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'band', data: [] }, 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: sizedYAxis, colors: palette || neutralPalette.categorical, grid: withGridDefaults(grid), hideLegend: hideLegend, margin: withMarginDefaults(rotatedTickSpace.margin), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { height: chartHeight, 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

@@ -1,15 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId, useRef, useState } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import { Alert, Box, Button, CircularProgress, Paper, Stack, Typography, } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
+import { resolveChartHeight, warnOnHeightMismatch } from './chartDefaults';
 export const CHART_FRAME_ROOT_SX = { p: 2 };
 export const CHART_FRAME_ALERT_SX = { mt: 2 };
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the content box itself.
+ * Once `height` is set, `height` sizes the box and it never reserves more than that, even if
+ * `minHeight` is also passed and larger.
  */
-export function ChartFrame({ title, subtitle, toolbar, controls, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, aspect, exportOptions = false, onExportSvg, onExportPng, meta, ariaLabel, children, variant = 'outlined', titleVariant = 'h6', sx, }) {
+export function ChartFrame({ title, subtitle, toolbar, controls, loading = false, error = false, isEmpty = false, emptyMessage, minHeight, height, aspect, exportOptions = false, onExportSvg, onExportPng, meta, ariaLabel, children, variant = 'outlined', titleVariant = 'h6', sx, }) {
     const { t } = useTranslation();
     const theme = useTheme();
     const titleId = useId();
@@ -21,6 +27,8 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
     const hasCustomAriaLabel = Boolean(ariaLabel);
     const chartLabel = ariaLabel || title;
     const callerSx = Array.isArray(sx) ? sx : [sx];
+    useEffect(() => warnOnHeightMismatch('ChartFrame', { minHeight, height }), [minHeight, height]);
+    const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
     const runExport = async (type) => {
         setExportError(false);
         try {
@@ -47,7 +55,8 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
     }
     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,
+                    minHeight: wrapperMinHeight,
+                    height: chartHeight,
                     aspectRatio: aspect,
                     display: 'flex',
                     alignItems: 'center',

package/dist/components/charts/LineChart.js

@@ -10,13 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } 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, defaultNumericTickFormatter, sizeYAxisForContent, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, withGridDefaults, withMarginDefaults, } from './chartDefaults';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, resolveChartHeight, sizeYAxisForContent, spaceForRotatedTicks, warnOnHeightMismatch, 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
@@ -40,16 +40,23 @@ function FilledMarkElement(_a) {
  * the quantity. Omitting one never suppresses a label the caller DID set
  * (`withAxisDefaults` only ever falls back onto an axis without its own
  * `label`).
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
  */
 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"]);
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, height, aspect, grid, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slots, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "height", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slots", "slotProps"]);
     const theme = useTheme();
     const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
+    useEffect(() => warnOnHeightMismatch('LineChart', { minHeight, height }), [minHeight, height]);
+    const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
     const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'point', data: [] }, theme.typography.caption.fontSize);
     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)));
     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: withMarginDefaults(rotatedTickSpace.margin), slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
+    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { height: chartHeight, 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

@@ -10,14 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useEffect, 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';
+import { DEFAULT_LEGEND_POSITION, defaultNumericTickFormatter, resolveChartHeight, sizeYAxisForContent, warnOnHeightMismatch, 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;
@@ -118,6 +118,11 @@ export function ScatterReferenceLine({ from, to, color, dashed, strokeWidth = 1.
  * Reference geometry (a computed curve, a straight line, either with an optional label) is
  * composed as `children` using `ScatterReferenceCurve`/`ScatterReferenceLine` above.
  *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
+ *
  * Tested magnitude: a few hundred marks (hram's largest cloud is ~300 points). Not verified,
  * and not implied to hold, at thousands+.
  *
@@ -132,10 +137,12 @@ export function ScatterReferenceLine({ from, to, color, dashed, strokeWidth = 1.
  */
 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"]);
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, height, 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", "height", "aspect", "grid", "hideLegend", "legendPosition", "margin", "sizeAccessor", "getPointStyle", "markerSize", "slotProps", "children"]);
     const theme = useTheme();
     const { i18n } = useTranslation();
     const neutralPalette = useNeutralChartPalette();
+    useEffect(() => warnOnHeightMismatch('ScatterChart', { minHeight, height }), [minHeight, height]);
+    const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
     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
@@ -174,5 +181,5 @@ export function ScatterChart(_a) {
     // 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 })) }));
+    return (_jsx(Box, { "data-testid": "scatter-chart-container", sx: { width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }, children: _jsx(MuiScatterChart, Object.assign({}, chartProps, { height: chartHeight, 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

@@ -245,6 +245,47 @@ export function defaultNumericTickFormatter(locale) {
         ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value)
         : new Intl.NumberFormat(locale).format(value));
 }
+/**
+ * CHART-8: resolves the `{minHeight, height, aspect}` trio these presets accept into what the
+ * wrapper reserves and what height (if any) sizes the chart itself. Three-way, not two-way --
+ * `aspect` changes the answer:
+ *  - `height` set -> it sizes the chart; the wrapper never reserves more than that (a caller-set
+ *    `minHeight` larger than `height` is capped here, closing the dead-space gap this WO exists
+ *    to fix -- equal values, or no `minHeight` at all, pass through unchanged).
+ *  - no `height`, `aspect` set -> unchanged from before this WO: the wrapper's own `aspectRatio`
+ *    derives its height from its width, and `minHeight` stays exactly what its name says, a floor
+ *    stopping it collapsing on a narrow viewport. Do not give the chart a fixed height here --
+ *    that would remove the responsive behaviour four live call sites rely on.
+ *  - no `height`, no `aspect` -> `minHeight` sizes the chart itself. There is no other sizing
+ *    information to go on, and a caller in this shape meant the chart to have that height, not
+ *    merely a wrapper floor around an unsized chart.
+ */
+export function resolveChartHeight({ minHeight, height, aspect }) {
+    if (height != null) {
+        const wrapperMinHeight = minHeight != null && minHeight > height ? height : minHeight;
+        return { wrapperMinHeight, chartHeight: height };
+    }
+    if (aspect != null) {
+        return { wrapperMinHeight: minHeight, chartHeight: undefined };
+    }
+    return { wrapperMinHeight: minHeight, chartHeight: minHeight };
+}
+/**
+ * CHART-8: dev-only warning when a caller passes both `minHeight` and `height` and they disagree
+ * -- the incoherent pair this WO closes. Not a throw: a shared package throwing on a prop
+ * combination in production would break a consumer's page over a layout nit. Silent on the
+ * equal-value majority and on the legitimate `minHeight` + `aspect` (no `height`) combination.
+ */
+export function warnOnHeightMismatch(componentName, { minHeight, height }) {
+    if (process.env.NODE_ENV === 'production')
+        return;
+    if (minHeight == null || height == null || minHeight === height)
+        return;
+    // eslint-disable-next-line no-console
+    console.warn(`[ui-core-micha] <${componentName}> received both minHeight={${minHeight}} and height={${height}}; `
+        + 'they disagree, so height wins and the wrapper no longer reserves the extra space below the '
+        + 'chart. Pass only height, or drop minHeight if it should just track height.');
+}
 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.41.3",
+  "version": "2.42.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "sideEffects": [

package/src/components/charts/BarChart.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -7,8 +7,10 @@ import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
   defaultNumericTickFormatter,
+  resolveChartHeight,
   sizeYAxisForContent,
   spaceForRotatedTicks,
+  warnOnHeightMismatch,
   withAxisDefaults,
   withChartSlotDefaults,
   withGridDefaults,
@@ -24,6 +26,11 @@ import {
  * 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`).
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
  */
 export function BarChart({
   series = [],
@@ -33,6 +40,7 @@ export function BarChart({
   yAxis,
   palette,
   minHeight,
+  height,
   aspect,
   grid,
   hideLegend = series.length <= 1,
@@ -45,6 +53,9 @@ export function BarChart({
   const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
 
+  useEffect(() => warnOnHeightMismatch('BarChart', { minHeight, height }), [minHeight, height]);
+  const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
+
   const labelledXAxis = withAxisDefaults(
     xAxis,
     xAxisLabel,
@@ -69,9 +80,10 @@ export function BarChart({
   );
 
   return (
-    <Box data-testid="bar-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
+    <Box data-testid="bar-chart-container" sx={{ width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }}>
       <MuiBarChart
         {...chartProps}
+        height={chartHeight}
         series={series}
         xAxis={rotatedTickSpace.xAxis}
         yAxis={sizedYAxis}

package/src/components/charts/ChartFrame.jsx

@@ -1,4 +1,4 @@
-import React, { useId, useRef, useState } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import {
   Alert,
   Box,
@@ -11,12 +11,18 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
+import { resolveChartHeight, warnOnHeightMismatch } from './chartDefaults';
 
 export const CHART_FRAME_ROOT_SX = { p: 2 };
 export const CHART_FRAME_ALERT_SX = { mt: 2 };
 
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the content box itself.
+ * Once `height` is set, `height` sizes the box and it never reserves more than that, even if
+ * `minHeight` is also passed and larger.
  */
 export function ChartFrame({
   title,
@@ -28,6 +34,7 @@ export function ChartFrame({
   isEmpty = false,
   emptyMessage,
   minHeight,
+  height,
   aspect,
   exportOptions = false,
   onExportSvg,
@@ -51,6 +58,9 @@ export function ChartFrame({
   const chartLabel = ariaLabel || title;
   const callerSx = Array.isArray(sx) ? sx : [sx];
 
+  useEffect(() => warnOnHeightMismatch('ChartFrame', { minHeight, height }), [minHeight, height]);
+  const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
+
   const runExport = async (type) => {
     setExportError(false);
     try {
@@ -103,7 +113,8 @@ export function ChartFrame({
         aria-labelledby={hasCustomAriaLabel ? undefined : titleId}
         sx={{
           width: '100%',
-          minHeight,
+          minHeight: wrapperMinHeight,
+          height: chartHeight,
           aspectRatio: aspect,
           display: 'flex',
           alignItems: 'center',

package/src/components/charts/LineChart.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -10,8 +10,10 @@ import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
   defaultNumericTickFormatter,
+  resolveChartHeight,
   sizeYAxisForContent,
   spaceForRotatedTicks,
+  warnOnHeightMismatch,
   withAxisDefaults,
   withChartSlotDefaults,
   withGridDefaults,
@@ -41,6 +43,11 @@ function FilledMarkElement({ color, style, ...props }) {
  * the quantity. Omitting one never suppresses a label the caller DID set
  * (`withAxisDefaults` only ever falls back onto an axis without its own
  * `label`).
+ *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
  */
 export function LineChart({
   series = [],
@@ -50,6 +57,7 @@ export function LineChart({
   yAxis,
   palette,
   minHeight,
+  height,
   aspect,
   grid,
   hideLegend = series.length <= 1,
@@ -63,6 +71,9 @@ export function LineChart({
   const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
 
+  useEffect(() => warnOnHeightMismatch('LineChart', { minHeight, height }), [minHeight, height]);
+  const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
+
   const labelledXAxis = withAxisDefaults(
     xAxis,
     xAxisLabel,
@@ -92,9 +103,10 @@ export function LineChart({
   );
 
   return (
-    <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
+    <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }}>
       <MuiLineChart
         {...chartProps}
+        height={chartHeight}
         series={defaultedSeries}
         xAxis={rotatedTickSpace.xAxis}
         yAxis={sizedYAxis}

package/src/components/charts/ScatterChart.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,9 @@ import { useNeutralChartPalette } from './palette';
 import {
   DEFAULT_LEGEND_POSITION,
   defaultNumericTickFormatter,
+  resolveChartHeight,
   sizeYAxisForContent,
+  warnOnHeightMismatch,
   withAxisDefaults,
   withChartSlotDefaults,
   withGridDefaults,
@@ -151,6 +153,11 @@ export function ScatterReferenceLine({
  * Reference geometry (a computed curve, a straight line, either with an optional label) is
  * composed as `children` using `ScatterReferenceCurve`/`ScatterReferenceLine` above.
  *
+ * `minHeight` (CHART-8): a floor under an `aspect`-derived responsive height when `aspect` is
+ * set and `height` is not; otherwise (no `height`, no `aspect`) it sizes the chart itself. Once
+ * `height` is set, `height` sizes the chart and the wrapper never reserves more than that, even
+ * if `minHeight` is also passed and larger.
+ *
  * Tested magnitude: a few hundred marks (hram's largest cloud is ~300 points). Not verified,
  * and not implied to hold, at thousands+.
  *
@@ -171,6 +178,7 @@ export function ScatterChart({
   yAxis,
   palette,
   minHeight,
+  height,
   aspect,
   grid,
   hideLegend = series.length <= 1,
@@ -187,6 +195,9 @@ export function ScatterChart({
   const { i18n } = useTranslation();
   const neutralPalette = useNeutralChartPalette();
 
+  useEffect(() => warnOnHeightMismatch('ScatterChart', { minHeight, height }), [minHeight, height]);
+  const { wrapperMinHeight, chartHeight } = resolveChartHeight({ minHeight, height, aspect });
+
   const labelledXAxis = withAxisDefaults(
     xAxis,
     xAxisLabel,
@@ -257,9 +268,10 @@ export function ScatterChart({
   );
 
   return (
-    <Box data-testid="scatter-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
+    <Box data-testid="scatter-chart-container" sx={{ width: '100%', minHeight: wrapperMinHeight, aspectRatio: aspect }}>
       <MuiScatterChart
         {...chartProps}
+        height={chartHeight}
         series={orderedSeries.map((item) => ({ markerSize, ...item }))}
         xAxis={labelledXAxis}
         yAxis={sizedYAxis}

package/src/components/charts/chartDefaults.js

@@ -271,6 +271,49 @@ export function defaultNumericTickFormatter(locale) {
     : new Intl.NumberFormat(locale).format(value));
 }
 
+/**
+ * CHART-8: resolves the `{minHeight, height, aspect}` trio these presets accept into what the
+ * wrapper reserves and what height (if any) sizes the chart itself. Three-way, not two-way --
+ * `aspect` changes the answer:
+ *  - `height` set -> it sizes the chart; the wrapper never reserves more than that (a caller-set
+ *    `minHeight` larger than `height` is capped here, closing the dead-space gap this WO exists
+ *    to fix -- equal values, or no `minHeight` at all, pass through unchanged).
+ *  - no `height`, `aspect` set -> unchanged from before this WO: the wrapper's own `aspectRatio`
+ *    derives its height from its width, and `minHeight` stays exactly what its name says, a floor
+ *    stopping it collapsing on a narrow viewport. Do not give the chart a fixed height here --
+ *    that would remove the responsive behaviour four live call sites rely on.
+ *  - no `height`, no `aspect` -> `minHeight` sizes the chart itself. There is no other sizing
+ *    information to go on, and a caller in this shape meant the chart to have that height, not
+ *    merely a wrapper floor around an unsized chart.
+ */
+export function resolveChartHeight({ minHeight, height, aspect }) {
+  if (height != null) {
+    const wrapperMinHeight = minHeight != null && minHeight > height ? height : minHeight;
+    return { wrapperMinHeight, chartHeight: height };
+  }
+  if (aspect != null) {
+    return { wrapperMinHeight: minHeight, chartHeight: undefined };
+  }
+  return { wrapperMinHeight: minHeight, chartHeight: minHeight };
+}
+
+/**
+ * CHART-8: dev-only warning when a caller passes both `minHeight` and `height` and they disagree
+ * -- the incoherent pair this WO closes. Not a throw: a shared package throwing on a prop
+ * combination in production would break a consumer's page over a layout nit. Silent on the
+ * equal-value majority and on the legitimate `minHeight` + `aspect` (no `height`) combination.
+ */
+export function warnOnHeightMismatch(componentName, { minHeight, height }) {
+  if (process.env.NODE_ENV === 'production') return;
+  if (minHeight == null || height == null || minHeight === height) return;
+  // eslint-disable-next-line no-console
+  console.warn(
+    `[ui-core-micha] <${componentName}> received both minHeight={${minHeight}} and height={${height}}; `
+    + 'they disagree, so height wins and the wrapper no longer reserves the extra space below the '
+    + 'chart. Pass only height, or drop minHeight if it should just track height.',
+  );
+}
+
 export function withChartSlotDefaults(slotProps, legendPosition) {
   const position = {
     ...DEFAULT_LEGEND_POSITION,

package/tests/BarChart.test.jsx

@@ -71,4 +71,52 @@ describe('BarChart preset', () => {
     expect(props.xAxis[0].label).toBeUndefined();
     expect(props.yAxis[0].label).toBeUndefined();
   });
+
+  // CHART-8: minHeight/height/aspect resolution, wired through the actual component.
+  describe('minHeight/height resolution (CHART-8)', () => {
+    it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+      renderChart({ series: [{ data: [1] }], minHeight: 300 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(300);
+      expect(window.getComputedStyle(screen.getByTestId('bar-chart-container')).minHeight).toBe('300px');
+    });
+
+    it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+      renderChart({ series: [{ data: [1] }], minHeight: 320, aspect: 1.8 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBeUndefined();
+      const style = window.getComputedStyle(screen.getByTestId('bar-chart-container'));
+      expect(style.minHeight).toBe('320px');
+      expect(style.aspectRatio).toBe('1.8 / 1');
+    });
+
+    it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+      renderChart({ series: [{ data: [1] }], minHeight: 420, height: 380 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(380);
+      expect(window.getComputedStyle(screen.getByTestId('bar-chart-container')).minHeight).toBe('380px');
+    });
+
+    it('is byte-identical when minHeight equals height', () => {
+      renderChart({ series: [{ data: [1] }], minHeight: 320, height: 320 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(320);
+      expect(window.getComputedStyle(screen.getByTestId('bar-chart-container')).minHeight).toBe('320px');
+    });
+
+    it('is unchanged when height is passed alone', () => {
+      renderChart({ series: [{ data: [1] }], height: 280 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(280);
+      expect(window.getComputedStyle(screen.getByTestId('bar-chart-container')).minHeight).toBe('auto');
+    });
+
+    it('warns only on the disagreeing pair, naming both values, and not on the aspect combination', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      renderChart({ series: [{ data: [1] }], minHeight: 420, height: 380 });
+      expect(warn).toHaveBeenCalledOnce();
+      expect(warn.mock.calls[0][0]).toContain('420');
+      expect(warn.mock.calls[0][0]).toContain('380');
+      warn.mockClear();
+
+      renderChart({ series: [{ data: [1] }], minHeight: 320, aspect: 1.8 });
+      expect(warn).not.toHaveBeenCalled();
+      warn.mockRestore();
+    });
+  });
 });

package/tests/ChartFrame.test.jsx

@@ -211,4 +211,47 @@ describe('ChartFrame', () => {
     renderFrame({ isEmpty: true }, 'fr');
     expect(screen.getByText('Aucune donnée disponible.')).toBeTruthy();
   });
+
+  // CHART-8: minHeight/height/aspect resolution on ChartFrame's own content box.
+  describe('minHeight/height resolution (CHART-8)', () => {
+    function contentBoxStyle() {
+      return window.getComputedStyle(screen.getByTestId('chart-body').parentElement);
+    }
+
+    it('sizes the content box from minHeight alone when neither height nor aspect is set', () => {
+      renderFrame({ minHeight: 300 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('300px');
+      expect(style.height).toBe('300px');
+    });
+
+    it('leaves minHeight as a floor and gives no fixed height when aspect is set (no height)', () => {
+      renderFrame({ minHeight: 320, aspect: 1.8 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('320px');
+      expect(style.height).toBe('auto');
+      expect(style.aspectRatio).toBe('1.8 / 1');
+    });
+
+    it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+      renderFrame({ minHeight: 420, height: 380 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('380px');
+      expect(style.height).toBe('380px');
+    });
+
+    it('is byte-identical when minHeight equals height', () => {
+      renderFrame({ minHeight: 320, height: 320 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('320px');
+      expect(style.height).toBe('320px');
+    });
+
+    it('is unchanged when height is passed alone', () => {
+      renderFrame({ height: 280 });
+      const style = contentBoxStyle();
+      expect(style.minHeight).toBe('auto');
+      expect(style.height).toBe('280px');
+    });
+  });
 });

package/tests/LineChart.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 const chartSpy = vi.hoisted(() => vi.fn(() => <div data-testid="mui-line-chart" />));
@@ -33,4 +33,49 @@ describe('LineChart preset', () => {
       legend: { position: { vertical: 'bottom', horizontal: 'start' } },
     });
   });
+
+  // CHART-8: minHeight/height/aspect resolution, wired through the actual component.
+  describe('minHeight/height resolution (CHART-8)', () => {
+    function renderLine(props) {
+      return render(
+        <ThemeProvider theme={createTheme()}>
+          <LineChart series={[{ data: [1, 2] }]} {...props} />
+        </ThemeProvider>,
+      );
+    }
+
+    afterEach(cleanup);
+
+    it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+      renderLine({ minHeight: 300 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(300);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('300px');
+    });
+
+    it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+      renderLine({ minHeight: 320, aspect: 1.8 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBeUndefined();
+      const style = window.getComputedStyle(screen.getByTestId('line-chart-container'));
+      expect(style.minHeight).toBe('320px');
+      expect(style.aspectRatio).toBe('1.8 / 1');
+    });
+
+    it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+      renderLine({ minHeight: 420, height: 380 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(380);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('380px');
+    });
+
+    it('is byte-identical when minHeight equals height', () => {
+      renderLine({ minHeight: 320, height: 320 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(320);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('320px');
+    });
+
+    it('is unchanged when height is passed alone', () => {
+      renderLine({ height: 280 });
+      expect(chartSpy.mock.calls.at(-1)[0].height).toBe(280);
+      expect(window.getComputedStyle(screen.getByTestId('line-chart-container')).minHeight).toBe('auto');
+    });
+  });
 });

package/tests/ScatterChart.test.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import i18next from 'i18next';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '@mui/material/styles';
 
@@ -232,3 +232,40 @@ describe('ScatterReferenceCurve / ScatterReferenceLine (THEME-10)', () => {
     expect(container.querySelector('text')).toBeNull();
   });
 });
+
+// CHART-8: minHeight/height/aspect resolution, wired through the actual component.
+describe('ScatterChart minHeight/height resolution (CHART-8)', () => {
+  afterEach(() => { cleanup(); vi.clearAllMocks(); });
+
+  it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+    renderScatter({ minHeight: 300 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(300);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('300px');
+  });
+
+  it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+    renderScatter({ minHeight: 320, aspect: 1.8 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBeUndefined();
+    const style = window.getComputedStyle(screen.getByTestId('scatter-chart-container'));
+    expect(style.minHeight).toBe('320px');
+    expect(style.aspectRatio).toBe('1.8 / 1');
+  });
+
+  it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+    renderScatter({ minHeight: 420, height: 380 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(380);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('380px');
+  });
+
+  it('is byte-identical when minHeight equals height', () => {
+    renderScatter({ minHeight: 320, height: 320 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(320);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('320px');
+  });
+
+  it('is unchanged when height is passed alone', () => {
+    renderScatter({ height: 280 });
+    expect(scatterSpy.mock.calls.at(-1)[0].height).toBe(280);
+    expect(window.getComputedStyle(screen.getByTestId('scatter-chart-container')).minHeight).toBe('auto');
+  });
+});

package/tests/chartDefaults.test.js

@@ -17,7 +17,9 @@ import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
 import {
   defaultNumericTickFormatter,
   PACKAGE_DEFAULT_MARGIN,
+  resolveChartHeight,
   sizeYAxisForContent,
+  warnOnHeightMismatch,
   withAxisDefaults,
   withMarginDefaults,
 } from '../src/components/charts/chartDefaults';
@@ -433,3 +435,74 @@ describe('withMarginDefaults (THEME-11)', () => {
     expect(withMarginDefaults(full)).toEqual(full);
   });
 });
+
+// CHART-8 -- pure-function contract of the minHeight/height/aspect resolver, independent of any
+// chart component wiring (component-level wiring is covered per-preset in each own test file).
+describe('resolveChartHeight (CHART-8)', () => {
+  it('sizes the chart from minHeight alone when neither height nor aspect is set', () => {
+    expect(resolveChartHeight({ minHeight: 300 })).toEqual({ wrapperMinHeight: 300, chartHeight: 300 });
+  });
+
+  it('leaves minHeight as a floor and gives the chart no fixed height when aspect is set (no height)', () => {
+    expect(resolveChartHeight({ minHeight: 320, aspect: 1.8 })).toEqual({
+      wrapperMinHeight: 320,
+      chartHeight: undefined,
+    });
+  });
+
+  it('caps the wrapper at height when minHeight is larger, closing the dead-space gap', () => {
+    expect(resolveChartHeight({ minHeight: 420, height: 380 })).toEqual({
+      wrapperMinHeight: 380,
+      chartHeight: 380,
+    });
+  });
+
+  it('is byte-identical (both values unchanged) when minHeight equals height', () => {
+    expect(resolveChartHeight({ minHeight: 320, height: 320 })).toEqual({
+      wrapperMinHeight: 320,
+      chartHeight: 320,
+    });
+  });
+
+  it('leaves the wrapper unset when height is passed alone', () => {
+    expect(resolveChartHeight({ height: 280 })).toEqual({ wrapperMinHeight: undefined, chartHeight: 280 });
+  });
+
+  it('does not cap the wrapper when minHeight is smaller than height', () => {
+    expect(resolveChartHeight({ minHeight: 200, height: 380 })).toEqual({
+      wrapperMinHeight: 200,
+      chartHeight: 380,
+    });
+  });
+});
+
+describe('warnOnHeightMismatch (CHART-8)', () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it('warns, naming the component and both values, when minHeight and height disagree', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 420, height: 380 });
+    expect(warn).toHaveBeenCalledOnce();
+    expect(warn.mock.calls[0][0]).toContain('BarChart');
+    expect(warn.mock.calls[0][0]).toContain('420');
+    expect(warn.mock.calls[0][0]).toContain('380');
+  });
+
+  it('does not warn when minHeight equals height', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 320, height: 320 });
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn on the legitimate minHeight + aspect (no height) combination', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: 320, height: undefined });
+    expect(warn).not.toHaveBeenCalled();
+  });
+
+  it('does not warn when only one of the pair is set', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    warnOnHeightMismatch('BarChart', { minHeight: undefined, height: 280 });
+    expect(warn).not.toHaveBeenCalled();
+  });
+});

package/work-orders/UCM-CHART-8.md

@@ -0,0 +1,147 @@
+# UCM-CHART-8 — Make the chart presets stop producing dead space below the chart
+
+- **Repo:** `ui-core-micha`, branch `main` (shared-core; publishes from `main` without a staging step)
+- **Tier:** 3 — shared-core. Every consuming app inherits the behaviour change.
+- **Status:** planned
+- **Workstream:** `CHART-*` (chart presets)
+- **Files:** `src/components/charts/ScatterChart.jsx`, `BarChart.jsx`, `LineChart.jsx`,
+  `TimeSeriesChart.jsx`, **`ChartFrame.jsx`** — all five destructure `minHeight` **and** `aspect`
+  (verified 2026-08-21) — plus their tests. **Note for the implementer: only `ScatterChart` and
+  `TimeSeriesChart` reference `height` at all.** `BarChart`, `LineChart` and `ChartFrame` never
+  destructure it, so for them the incoherent "pair" exists only via the rest spread into the MUI
+  chart. Do not go looking for a declared `height` prop there.
+
+> **Why.** `minHeight` and `height` are two different things on these presets, and the API lets a
+> caller pass both. `minHeight` lands on the **wrapper `Box`** —
+> `sx={{ width: '100%', minHeight, aspectRatio: aspect }}` (`ScatterChart.jsx:260`, same
+> construction in `BarChart.jsx`) — while `height` sizes the **chart**. When `minHeight > height`,
+> the difference is dead space **below the chart**.
+>
+> Measured in `hram` on 2026-08-20:
+>
+> | panel | `minHeight` | `height` | dead space |
+> |---|---|---|---|
+> | `StructuralReachabilityPanel` | 420 | 380 | 40 px |
+> | `ExpertTimelinePanel` | 340 | 280 (×2) | 60 px |
+> | `ResultsTimelinePanel` | 320 | 280 | 40 px |
+> | `GroupMetricsPanel` | 300 | **none** | the whole chart is unsized |
+> | Cost, Ratio, Accessibility, Referral, Total | equal | equal | 0 |
+>
+> **The equal-value majority is why this survived.** Passing both looks like harmless
+> belt-and-braces and costs nothing when the numbers match, so the pattern spread by copy-paste and
+> nobody noticed the cases where they diverge. It has been diagnosed and fixed **pointwise twice**
+> in hram (`AllocationPerformancePanel.jsx:462-478`, `OptimizationResultsPanel.jsx:928-940`, both to
+> `height={420}`) — with the explanation written as a comment **inside those two files**, where no
+> new panel will ever read it.
+>
+> This is not N panel bugs. It is one shared API that permits an incoherent pair, and it will keep
+> recurring for as long as it does. Fixing it here fixes every consumer at once, including the ones
+> nobody sweeps.
+
+---
+
+## Part A — Envelope (authoritative WHAT/WHY)
+
+### Goal
+
+A caller can no longer produce dead space by passing `minHeight`. The presets resolve the pair
+themselves, and the incoherent combination becomes impossible rather than merely discouraged.
+
+### Definition of Done
+
+- [ ] **The resolution is three-way, not two-way — `aspect` is the third input and it changes the
+      answer.** Amended 2026-08-21; the original two-way rule would have broken four live call sites.
+      - **`height` present** → it sizes the chart, and the wrapper reserves no more than that.
+      - **No `height`, no `aspect`** → **`minHeight` sizes the chart**, not merely the wrapper.
+        This is what a caller in that shape meant (`GroupMetricsPanel`: `minHeight={300}`, no
+        `height`, no `aspect` — chart unsized today).
+      - **No `height`, but `aspect` present** → **today's behaviour is correct and must not change.**
+        The wrapper is `width: 100%` with `aspectRatio`, so its height derives from its width, and
+        `minHeight` is the floor that stops it collapsing on a narrow viewport. Here `minHeight`
+        means exactly what its name says.
+
+      **Same prop shape, opposite intent** — which is why the rule cannot be stated on
+      `minHeight`/`height` alone.
+- [ ] **`minHeight > height` produces no wrapper padding.** The chart is sized by `height` and the
+      wrapper does not reserve more than the chart occupies. The extra space was never intentional.
+- [ ] **Equal values behave exactly as today** — that is the majority of call sites and they must
+      not shift by a pixel.
+- [ ] **A dev-mode warning names the offending call site** when both are passed and they disagree.
+      Not a throw: a shared package that throws on a prop combination in production breaks a
+      consumer's page over a layout nit.
+- [ ] **JSDoc on every preset that takes it** states in one line what `minHeight` now does, so the
+      next caller does not have to infer it from a comment in a consumer app.
+
+### Deliberately NOT done
+
+- **`minHeight` is not removed from the API.** Removing it is a breaking change to a shared package,
+  which would make every consumer's pin bump a Tier-3 change with a real chance of unnoticed layout
+  regressions — a worse outcome than the defect. Deprecate in the docstring, coerce in the code.
+- No change to chart internals, palettes, axis defaults or `aspect`.
+- No consumer-side sweep in this WO. hram's call-site cleanup is its own follow-up, gated on the pin
+  bump — see below.
+
+### Preconditions and ordering
+
+The fix only reaches hram after **(a)** this lands and publishes and **(b)** hram bumps its
+`@micha.bigler/ui-core-micha` pin. Verify the published version is actually live before the consumer
+bump — this package publishes from `main` with no staging step, so a failed publish is silent until
+a consumer installs it.
+
+### Risks
+
+- **The consumer check is done, and it found something — 2026-08-21.** It was written here as a
+  hypothetical ("a consumer may be relying on the padding as spacing"); the real finding is
+  different and larger. **Four live call sites pass `aspect` together with `minHeight` and no
+  `height`:**
+
+  | call site | props |
+  |---|---|
+  | `hram/AccessGapScatterPanel.jsx:182` | `aspect={1.8}` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~328` | `aspect="960 / 380"` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~355` | `aspect="960 / 380"` + `minHeight={320}` |
+  | `fitness-monitor/BodyHistoryPage.jsx:~450` | `aspect="400 / 220"` + `minHeight={220}` |
+
+  These are not relying on padding-as-spacing. They are using `minHeight` **as a floor under an
+  aspect-derived height**, which is legitimate and is what the name promises. The original
+  Definition of Done would have turned all four into fixed-height charts and removed their
+  responsive behaviour. **That is the reason for the three-way rule above**, and it is the case to
+  hold onto when reading the rest of this order.
+
+  Scope note: `survey-renderer` is named above as a consumer to check. **The standalone repo is
+  retired** (2026-07-31); the widget now lives at `survey_app/frontend/packages/survey-renderer`,
+  and neither it nor `cockpit` or `jg-ferien` passes `aspect` to a chart preset. jg's one `aspect=`
+  hit is an `ImageCropDialog`, unrelated.
+- The dev warning must not fire on the equal-value majority, or it becomes noise that trains people
+  to ignore it.
+
+### Tests to WRITE — narrow
+
+- `minHeight` alone, **no `aspect`** → the chart receives that height.
+- **`minHeight` + `aspect`, no `height` → unchanged from today**: the wrapper keeps its
+  `aspectRatio` and `minHeight` stays a floor, and the chart is **not** given a fixed height. This is
+  the four-call-site case in Risks and the one a two-way rule would have broken — **it is the test
+  that has to fail if someone later re-simplifies the resolution.**
+- `minHeight > height` → the chart receives `height` and the wrapper reserves no more than that.
+- `minHeight === height` → byte-identical to the current output.
+- `height` alone → unchanged.
+- The dev warning fires only on the disagreeing pair, and names the values. It must **not** fire on
+  `minHeight` + `aspect` without `height`, which is a legitimate combination.
+
+No full suite.
+
+---
+
+## Part B — Implementation map
+
+> **TO BE FILLED BY THE ORCHESTRATOR** on `git pull`. Must carry the preset files with `path:line`
+> anchors (`ScatterChart.jsx:173-174, :260` and the equivalents), the absolute working directory,
+> the progress contract, and the preamble. **Do not dispatch while this placeholder stands.**
+
+---
+
+## Part C — Orchestrator-only
+
+> **TO BE FILLED BY THE ORCHESTRATOR.** Review routing (`reviewer` + `ui_reviewer`, full context —
+> Tier 3 shared-core), verification, register maintenance, commit, publish check, and the execution
+> directive with its self-address guard.