@micha.bigler/ui-core-micha 3.0.0 → 3.1.0

package/src/components/charts/ChartFrame.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, { useId, useRef, useState } from 'react';
 import {
   Alert,
   Box,
@@ -11,38 +11,27 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
 import { exportChartPng, exportChartSvg } from './exportChart';
+import { assertRemovedChartProp } from './chartDefaults';
 
 export const CHART_FRAME_ROOT_SX = { p: 2 };
 export const CHART_FRAME_ALERT_SX = { mt: 2 };
 
-/**
- * UCM-CHART-12: `warnOnHeightMismatch` (the shared helper this note used to call into
- * `chartDefaults`) was deleted along with `resolveChartHeight` -- both belonged to the
- * `{minHeight, height, aspect}` trio the four chart presets used to accept, which that WO
- * replaced with `resolveChartLayout`'s `size`/`height` model. `ChartFrame` keeps its OWN
- * `minHeight`/`height`/`aspect` props unchanged (CHART-9: it is a card floor, not a chart size),
- * so it keeps this note too -- same text, same condition, just no longer routed through the
- * now-deleted shared function.
- */
-function warnOnChartFrameHeightMismatch(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] <ChartFrame> received both minHeight={${minHeight}} and height={${height}}; `
-    + 'they disagree; height is ignored here and minHeight keeps sizing the wrapper as a floor. '
-    + 'Pass only minHeight, or drop height if it was meant to size the whole card.',
-  );
-}
-
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
  *
  * `minHeight` (CHART-9): always just a floor on the content box, which holds a whole card --
- * title, toolbar, chart, legend, footnotes, export links -- not a single chart. `height` is never
- * applied to the box (unlike the four chart presets, whose box holds exactly one chart and use
- * `resolveChartLayout`'s `size`/`height` resolution); it is only compared against `minHeight` for
- * this component's own dev-mode mismatch note.
+ * title, toolbar, chart, legend, footnotes, export links -- not a single chart.
+ *
+ * UCM-CHART-13: `height` and `aspect` are GONE. `height` was destructured and only ever fed a
+ * dev-mode mismatch warning, never applied to the box -- genuinely dead. `aspect` is a DIFFERENT
+ * case (codex review finding, corrected from this WO's own Envelope, which claimed it too was
+ * applied nowhere): it WAS wired to `aspectRatio` on the box at 3.0.1, and worked. It is removed
+ * anyway, because no consumer across the five apps passes it (measured against 3.0.1) and
+ * `ChartFrame` accepting a sizing prop it is the only one of the four+frame components to apply is
+ * exactly the kind of inconsistency this WO exists to close -- a working-but-unused prop is still
+ * unused surface, just not dead code the way `height` was. Passing either now throws in dev via the
+ * same `assertRemovedChartProp` the four chart presets use (`UCM-CHART-12`), naming `minHeight` (a
+ * card floor) or the chart's own `size` prop as the replacement.
  */
 export function ChartFrame({
   title,
@@ -54,8 +43,6 @@ export function ChartFrame({
   isEmpty = false,
   emptyMessage,
   minHeight,
-  height,
-  aspect,
   exportOptions = false,
   onExportSvg,
   onExportPng,
@@ -65,6 +52,10 @@ export function ChartFrame({
   variant = 'outlined',
   titleVariant = 'h6',
   sx,
+  // UCM-CHART-13: `height`/`aspect` are gone from the signature itself (DoD) -- captured via rest,
+  // not named parameters, so they read as "detected leftovers", not "accepted props" a reader might
+  // assume are still wired to something.
+  ...legacyProps
 }) {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -78,9 +69,15 @@ export function ChartFrame({
   const chartLabel = ariaLabel || title;
   const callerSx = Array.isArray(sx) ? sx : [sx];
 
-  useEffect(
-    () => warnOnChartFrameHeightMismatch(minHeight, height),
-    [minHeight, height],
+  assertRemovedChartProp(
+    'ChartFrame', 'height', legacyProps.height,
+    'Use minHeight for the card floor, or size on the chart inside the frame if you meant the chart\'s own height.',
+    'UCM-CHART-13, v3.1.0',
+  );
+  assertRemovedChartProp(
+    'ChartFrame', 'aspect', legacyProps.aspect,
+    'Removed -- it was never applied to the frame. Use size on the chart inside the frame if you meant the chart\'s own aspect.',
+    'UCM-CHART-13, v3.1.0',
   );
 
   const runExport = async (type) => {
@@ -136,7 +133,6 @@ export function ChartFrame({
         sx={{
           width: '100%',
           minHeight,
-          aspectRatio: aspect,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',

package/src/components/charts/LineChart.jsx

@@ -99,6 +99,7 @@ export function LineChart({
     xLabels,
     hideLegend,
     legendPosition,
+    slotProps,
     tickFontSize: theme.typography.caption.fontSize,
     spacing: theme.spacing,
     defaultLineHeight: theme.typography.caption.lineHeight,

package/src/components/charts/ScatterChart.jsx

@@ -230,6 +230,7 @@ export function ScatterChart({
     xLabels,
     hideLegend,
     legendPosition,
+    slotProps,
     tickFontSize: theme.typography.caption.fontSize,
     spacing: theme.spacing,
     defaultLineHeight: theme.typography.caption.lineHeight,

package/src/components/charts/chartDefaults.js

@@ -247,7 +247,15 @@ export function sizeYAxisForContent(yAxis, series, tickFontSize) {
     if (candidates.length === 0) return axis;
 
     const longestTick = longestFormattedTick(candidates, axis.valueFormatter);
-    const tickTextWidth = Math.max(
+    // UCM-CHART-12 Rule 2 (codex second-pass review finding): candidates existed, but a caller
+    // `valueFormatter` reduced every one of them to a blank string -- this is the y-axis analogue
+    // of `xAxisHasVisibleTicks`'s Access-scatter case, and must collapse the same way. Distinct
+    // from `candidates.length === 0` above (nothing to measure at all, MUI's own default applies,
+    // untouched): here there WAS content, it just renders as nothing. With no axis title either,
+    // the axis has genuinely nothing to show, so the whole band collapses to 0 -- not merely the
+    // text-width term floored, matching the x-axis band's own all-or-nothing zero.
+    if (longestTick.length === 0 && !axis.label) return { ...axis, width: 0 };
+    const tickTextWidth = longestTick.length === 0 ? 0 : Math.max(
       tickFontSizePx,
       longestTick.length * tickFontSizePx * AVERAGE_GLYPH_WIDTH_EM,
     );
@@ -316,11 +324,16 @@ const LEGEND_BAND_PX = 32;
 // UCM-CHART-12 `xLabels: "auto"`: with no real container-width measurement available before
 // render (the presets stay responsive -- MUI measures actual width via ResizeObserver, which this
 // pure function cannot see), "auto" is a documented HEURISTIC, not a true fit computation: rotate
-// once there are enough categories AND the longest one is long enough that a horizontal row would
-// plausibly collide. The mandatory browser-level check (WO Part C) is what actually verifies fit
-// against real rendered geometry; this only picks a reasonable default ahead of that.
+// once there are enough categories AND the longest one, MEASURED (same mechanism as the rotated
+// projection below -- real DOM measurement when available, the per-glyph estimate otherwise), is
+// wide enough that a horizontal row would plausibly collide. Codex second-pass review finding:
+// the first cut of this heuristic used a raw character-count threshold instead of the measured
+// width this function already has available -- replaced, since "decide from the measured labels"
+// (Rule 3) is achievable even without a real container width to compare against. The count
+// threshold stays as the OTHER half of the heuristic: a handful of wide labels can still fit
+// spread across a wide chart, so width alone should not trigger rotation either.
 const AUTO_ROTATE_TICK_COUNT = 6;
-const AUTO_ROTATE_LABEL_CHARS = 4;
+const AUTO_ROTATE_LABEL_WIDTH_PX = 50;
 
 function xAxisTickContentText(axis) {
   const data = axis?.data;
@@ -351,12 +364,23 @@ function resolveXAxisGeometry(axis, xLabelsMode, defaultLineHeight, measureTextW
   const fontSize = cssLengthToPixels(axis?.tickLabelStyle?.fontSize) || cssLengthToPixels(fallbackTickFontSize);
   const longestLabel = xAxisTickContentText(axis) || '';
   const dataCount = Array.isArray(axis?.data) ? axis.data.length : 0;
+  const measure = measureTextWidth || measureTickTextWidthPx;
+
+  // Measured once, up front -- both "auto"'s rotation DECISION and the rotated-band PROJECTION
+  // below need the label's real width, and must agree on what "real" means (same measurement,
+  // same estimate fallback) or the two could disagree about the same label.
+  const labelWidthPx = fontSize > 0
+    ? Math.max(fontSize, (() => {
+      const measured = measure(longestLabel, fontSize);
+      return Number.isFinite(measured) && measured > 0 ? measured : estimateTextWidthPx(longestLabel, fontSize);
+    })())
+    : 0;
 
   let angle = 0;
   if (xLabelsMode === 'angled') {
     angle = Number(axis?.tickLabelStyle?.angle) || -45;
   } else if (xLabelsMode === 'auto') {
-    const needsRotation = dataCount > AUTO_ROTATE_TICK_COUNT && longestLabel.length > AUTO_ROTATE_LABEL_CHARS;
+    const needsRotation = dataCount > AUTO_ROTATE_TICK_COUNT && labelWidthPx > AUTO_ROTATE_LABEL_WIDTH_PX;
     angle = needsRotation ? -45 : 0;
   } // "horizontal" always stays at angle 0
 
@@ -367,14 +391,7 @@ function resolveXAxisGeometry(axis, xLabelsMode, defaultLineHeight, measureTextW
   if (fontSize === 0) return { tickBand: TICK_BAND_BASE_PX, angle };
 
   const lineHeight = Number(axis?.tickLabelStyle?.lineHeight) || defaultLineHeight;
-  const measure = measureTextWidth || measureTickTextWidthPx;
-  const measuredWidth = measure(longestLabel, fontSize);
-  const textWidth = Math.max(
-    fontSize,
-    Number.isFinite(measuredWidth) && measuredWidth > 0
-      ? measuredWidth
-      : estimateTextWidthPx(longestLabel, fontSize),
-  );
+  const textWidth = labelWidthPx;
   const radians = (angle * Math.PI) / 180;
   const projectedHeight = Math.abs(Math.cos(radians)) * fontSize * lineHeight
     + Math.abs(Math.sin(radians)) * textWidth;
@@ -434,6 +451,7 @@ export function resolveChartLayout({
   xLabels = 'auto',
   hideLegend = false,
   legendPosition = DEFAULT_LEGEND_POSITION,
+  slotProps,
   tickFontSize,
   spacing,
   defaultLineHeight = 1,
@@ -449,33 +467,50 @@ export function resolveChartLayout({
   );
   const xTitleBand = primaryXAxis?.label ? AXIS_TITLE_BAND_PX : 0;
 
+  // Codex second-pass review finding: a caller-set `slotProps.legend.position` overrides
+  // `legendPosition` at RENDER time (`withChartSlotDefaults`) but was invisible here, so the
+  // margin/height this function reserved could disagree with where the legend actually rendered.
+  // `resolveLegendPosition` is the one merge both call sites now share.
+  const effectiveLegendPosition = resolveLegendPosition(legendPosition, slotProps);
+
   // A `vertical: 'middle'` legend renders on the SIDE (consuming width, not height) -- reviewer
   // finding: only branching on 'top' vs. not-'top' always reserved the legend band vertically,
   // over-reserving height and under-reserving width for a side-placed legend. This WO's width
   // invariant does not itemize a legend-width band, so a side legend simply gets none of the
   // height reservation here rather than a wrong one -- consistent with the WO's own text ("0 when
   // legend is off or horizontal").
-  const legendVertical = legendPosition?.vertical ?? DEFAULT_LEGEND_POSITION.vertical;
+  const legendVertical = effectiveLegendPosition.vertical;
   const legendIsSidePlaced = legendVertical === 'middle';
   const legendHeightBand = hideLegend || legendIsSidePlaced ? 0 : LEGEND_BAND_PX;
   const legendOnTop = legendHeightBand > 0 && legendVertical === 'top';
 
   const sizedYAxis = sizeYAxisForContent(yAxis?.length ? yAxis : [{}], series, tickFontSize);
-  const yAxisBand = sizedYAxis[0]?.width ?? 0;
+  // Codex second-pass review finding: a dual-axis chart (TimeSeriesChart's `axis: 'secondary'`
+  // feature, CHART-5) has a SECOND y-axis on the right, consuming its own width -- the resolver
+  // only ever accounted for `sizedYAxis[0]`. `position` defaults to `'left'` for an unmarked axis
+  // (matching MUI's own default-assignment rule, same as `sizeYAxisForContent`'s own series-match
+  // logic above), so only an explicit `'right'` counts as the secondary axis.
+  const primaryYAxis = sizedYAxis.find((axisEntry) => axisEntry.position !== 'right') ?? sizedYAxis[0];
+  const secondaryYAxisEntry = sizedYAxis.find((axisEntry) => axisEntry.position === 'right');
+  const yAxisBand = primaryYAxis?.width ?? 0;
+  const secondaryYAxisBand = secondaryYAxisEntry?.width ?? 0;
   const rightPad = PACKAGE_DEFAULT_MARGIN.right;
 
   const resolvedXAxis = xAxisList.map((axisEntry, index) => {
-    if (index !== 0 || axisEntry.height != null) return axisEntry;
+    if (index !== 0) return axisEntry;
     // `xLabels` is the SOLE source of truth for rotation (Rule 3) -- `angle` is always written
-    // explicitly here, even when 0, rather than only overriding a truthy value. Leaving a stale
-    // caller-supplied `tickLabelStyle.angle` in place when `xLabels` resolved to no rotation would
-    // let MUI still render a rotated label whose band this resolver reserved as if it were flat --
-    // exactly the space/render mismatch this WO exists to close, just inverted (under-reservation
-    // instead of CHART-10's over-reservation).
+    // explicitly here, even when 0, rather than only overriding a truthy value, and regardless of
+    // whether the caller also set an explicit `height` (own `height` bypasses the model's SIZE,
+    // never its ROTATION -- codex second-pass review finding: the two were previously coupled,
+    // so a caller-set `height` could silently keep a stale rotated `tickLabelStyle.angle` even
+    // under `xLabels="horizontal"`). Leaving a stale caller-supplied angle in place when `xLabels`
+    // resolved to no rotation would let MUI still render a rotated label whose band this resolver
+    // reserved as if it were flat -- exactly the space/render mismatch this WO exists to close,
+    // just inverted (under-reservation instead of CHART-10's over-reservation).
     const { angle: _callerAngle, ...restTickLabelStyle } = axisEntry.tickLabelStyle || {};
     return {
       ...axisEntry,
-      height: xAxisBand + xTitleBand,
+      height: axisEntry.height ?? (xAxisBand + xTitleBand),
       tickLabelStyle: { ...restTickLabelStyle, angle },
     };
   });
@@ -484,14 +519,16 @@ export function resolveChartLayout({
     top: PACKAGE_DEFAULT_MARGIN.top + (legendOnTop ? legendHeightBand : 0),
     bottom: PACKAGE_DEFAULT_MARGIN.bottom + (legendOnTop ? 0 : legendHeightBand),
     left: PACKAGE_DEFAULT_MARGIN.left,
-    right: rightPad,
+    right: rightPad + secondaryYAxisBand,
   };
 
   // `plotHeight`/`plotWidth`: the residual of `chartHeight`/`containerWidth` minus the three named
   // furniture bands (see this function's own docblock for why this alone does not prove the
   // absence of a double-counted term, and what does).
   const plotHeight = chartHeight - xAxisBand - xTitleBand - legendHeightBand;
-  const plotWidth = containerWidth != null ? containerWidth - yAxisBand - rightPad : undefined;
+  const plotWidth = containerWidth != null
+    ? containerWidth - yAxisBand - secondaryYAxisBand - rightPad
+    : undefined;
 
   return {
     chartHeight,
@@ -502,6 +539,7 @@ export function resolveChartLayout({
     bands: {
       plotHeight,
       xAxisBand,
+      secondaryYAxisBand,
       xTitleBand,
       legendBand: legendHeightBand,
       yAxisBand,
@@ -518,21 +556,41 @@ export function resolveChartLayout({
  * migration path instead of a layout that quietly stops matching what the prop says) -- gated on
  * `NODE_ENV !== 'production'` like the deleted `warnOnHeightMismatch` was, so a shared package
  * cannot crash a consumer's production page over a layout prop; loud in dev, inert in prod.
+ *
+ * `removedIn` (codex review finding, UCM-CHART-13): a shared helper hardcoding ONE WO/version
+ * string would misattribute the removal for every OTHER call site that reuses it -- `ChartFrame`
+ * (UCM-CHART-13, v3.1.0) removes `height`/`aspect` for a different reason, in a different WO, than
+ * the four presets' own `minHeight`/`aspect`/`margin` (UCM-CHART-12, v3.0.0). The default keeps
+ * every existing call site's message byte-identical; only a NEW call site needs to override it.
  */
-export function assertRemovedChartProp(componentName, propName, value, replacement) {
+export function assertRemovedChartProp(componentName, propName, value, replacement, removedIn = 'UCM-CHART-12, v3.0.0') {
   if (value === undefined || process.env.NODE_ENV === 'production') return;
   throw new Error(
-    `[ui-core-micha] <${componentName}> no longer accepts "${propName}" (removed in UCM-CHART-12, `
-    + `v3.0.0 -- see docs/CHART-LAYOUT.md). ${replacement}`,
+    `[ui-core-micha] <${componentName}> no longer accepts "${propName}" (removed in ${removedIn} `
+    + `-- see docs/CHART-LAYOUT.md). ${replacement}`,
   );
 }
 
-export function withChartSlotDefaults(slotProps, legendPosition) {
-  const position = {
+/**
+ * UCM-CHART-12 (codex second-pass review finding): the single source of truth for where the
+ * legend actually renders -- `legendPosition` merged with a `slotProps.legend.position` override,
+ * same precedence `withChartSlotDefaults` already applied. Before this fix, `resolveChartLayout`
+ * only ever looked at `legendPosition` when deciding how much space to reserve and on which side,
+ * while `withChartSlotDefaults` (below) separately let `slotProps.legend.position` win at RENDER
+ * time -- a caller passing both could get a legend rendered top/side while the resolver had
+ * reserved space for bottom (or none), the exact reserved-vs-rendered mismatch this WO exists to
+ * close. Both call sites now merge through this one function.
+ */
+export function resolveLegendPosition(legendPosition, slotProps) {
+  return {
     ...DEFAULT_LEGEND_POSITION,
     ...legendPosition,
     ...slotProps?.legend?.position,
   };
+}
+
+export function withChartSlotDefaults(slotProps, legendPosition) {
+  const position = resolveLegendPosition(legendPosition, slotProps);
   return {
     ...slotProps,
     tooltip: {

package/tests/ChartFrame.test.jsx

@@ -213,10 +213,8 @@ describe('ChartFrame', () => {
   });
 
   // CHART-9: ChartFrame's content box is a whole CARD (title, toolbar, chart, legend, footnotes,
-  // export links), not a single chart -- unlike the four chart presets, which do apply
-  // resolveChartHeight's height/aspect resolution to their own box. ChartFrame's box must never
-  // take a fixed `height`; `minHeight` is always just a floor content can exceed.
-  describe('minHeight/height resolution (CHART-9)', () => {
+  // export links), not a single chart. `minHeight` is always just a floor content can exceed.
+  describe('minHeight resolution (CHART-9)', () => {
     function contentBoxStyle() {
       return window.getComputedStyle(screen.getByTestId('chart-body').parentElement);
     }
@@ -245,37 +243,56 @@ describe('ChartFrame', () => {
       expect(style.height).toBe('auto');
     });
 
-    it('leaves minHeight as a floor and gives no fixed height when aspect is set (no height)', () => {
-      renderFrame({ minHeight: 320, aspect: 1.8 });
+    it('leaves minHeight unset (auto) when the caller passes none', () => {
+      renderFrame();
       const style = contentBoxStyle();
-      expect(style.minHeight).toBe('320px');
+      expect(style.minHeight).toBe('auto');
       expect(style.height).toBe('auto');
-      expect(style.aspectRatio).toBe('1.8 / 1');
     });
+  });
 
-    it('does not apply height as a fixed box height even when passed explicitly, and does not throw', () => {
-      expect(() => renderFrame({ minHeight: 420, height: 380 })).not.toThrow();
-      const style = contentBoxStyle();
-      expect(style.minHeight).toBe('420px');
-      expect(style.height).toBe('auto');
+  // UCM-CHART-13: `height`/`aspect` were destructured but never applied to the box -- measured
+  // against 3.0.1, no consumer passed either. Both are now gone; passing one throws in dev, naming
+  // the replacement, the same as the four chart presets' removed props (`UCM-CHART-12`).
+  describe('removed height/aspect props throw in dev, naming their replacement (UCM-CHART-13)', () => {
+    it('throws when a caller still passes height, naming minHeight AND size as the replacement', () => {
+      expect(() => renderFrame({ height: 380 })).toThrow(/ChartFrame.*height.*minHeight.*size/s);
     });
 
-    it('ignores height when passed alone, with no minHeight floor either', () => {
-      renderFrame({ height: 280 });
-      const style = contentBoxStyle();
-      expect(style.minHeight).toBe('auto');
-      expect(style.height).toBe('auto');
+    it('throws when a caller still passes aspect, naming size as the replacement', () => {
+      expect(() => renderFrame({ aspect: 1.8 })).toThrow(/ChartFrame.*aspect.*size/s);
+    });
+
+    it('attributes the removal to UCM-CHART-13/v3.1.0, not the presets\' own UCM-CHART-12 message', () => {
+      expect(() => renderFrame({ height: 380 })).toThrow(/UCM-CHART-13.*v3\.1\.0/);
+    });
+
+    it('does not throw when only minHeight is passed', () => {
+      expect(() => renderFrame({ minHeight: 320 })).not.toThrow();
+    });
+
+    it('stays inert in production even when height/aspect are passed', () => {
+      const original = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+      try {
+        expect(() => renderFrame({ height: 380, aspect: 1.8 })).not.toThrow();
+      } finally {
+        process.env.NODE_ENV = original;
+      }
     });
 
-    it('warns with wording accurate to its own behaviour -- minHeight wins, not height', () => {
-      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-      renderFrame({ minHeight: 420, height: 380 });
-      expect(warnSpy).toHaveBeenCalledOnce();
-      const message = warnSpy.mock.calls[0][0];
-      expect(message).toContain('ChartFrame');
-      expect(message).toContain('height is ignored');
-      expect(message).not.toContain('height wins');
-      warnSpy.mockRestore();
+    it('applies nothing to the box for a still-passed height/aspect (dev-mode error aside) -- confirmed via the production path', () => {
+      const original = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+      try {
+        renderFrame({ minHeight: 320, height: 380, aspect: 1.8 });
+        const style = window.getComputedStyle(screen.getByTestId('chart-body').parentElement);
+        expect(style.minHeight).toBe('320px');
+        expect(style.height).toBe('auto');
+        expect(style.aspectRatio).toBe('auto');
+      } finally {
+        process.env.NODE_ENV = original;
+      }
     });
   });
 });

package/tests/chartDefaults.test.js

@@ -20,8 +20,10 @@ import {
   assertRemovedChartProp,
   defaultNumericTickFormatter,
   resolveChartLayout,
+  resolveLegendPosition,
   sizeYAxisForContent,
   withAxisDefaults,
+  withChartSlotDefaults,
 } from '../src/components/charts/chartDefaults';
 import { createAppTheme } from '../src/theme/createAppTheme';
 
@@ -290,6 +292,15 @@ describe('removed chart props throw in dev, naming their replacement (UCM-CHART-
       .toThrow(/BarChart.*minHeight.*Use size instead\./s);
   });
 
+  // UCM-CHART-13 (codex review finding): a shared helper hardcoding one WO/version string would
+  // misattribute the removal for a different call site's own, different removal.
+  it('defaults removedIn to UCM-CHART-12/v3.0.0 (the four presets\' own call sites), but a caller can override it', () => {
+    expect(() => assertRemovedChartProp('BarChart', 'minHeight', 320, 'Use size instead.'))
+      .toThrow(/UCM-CHART-12, v3\.0\.0/);
+    expect(() => assertRemovedChartProp('ChartFrame', 'aspect', 1.8, 'Use size instead.', 'UCM-CHART-13, v3.1.0'))
+      .toThrow(/UCM-CHART-13, v3\.1\.0/);
+  });
+
   it('assertRemovedChartProp stays inert in production', () => {
     const original = process.env.NODE_ENV;
     process.env.NODE_ENV = 'production';
@@ -442,6 +453,102 @@ describe('resolveChartLayout composition invariant (UCM-CHART-12)', () => {
     expect(bands.yAxisBand + bands.plotWidth + bands.rightPad).toBe(600);
     expect(bands.yAxisBand).toBeGreaterThan(0);
   });
+
+  // Codex second-pass review finding: a dual-axis chart (TimeSeriesChart's axis: 'secondary'
+  // feature) has a SECOND y-axis on the right, which the resolver previously ignored entirely --
+  // `sizedYAxis[0]` was the only width ever accounted for. The width invariant must include it.
+  it('accounts for a secondary (right-positioned) y-axis in both margin.right and the width invariant', () => {
+    const single = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan', 'Feb'] }],
+      yAxis: [{ scaleType: 'linear', id: 'primary', min: 0, max: 100 }],
+      tickFontSize: 12,
+      spacing: theme.spacing,
+      containerWidth: 600,
+    });
+    const dual = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan', 'Feb'] }],
+      yAxis: [
+        { scaleType: 'linear', id: 'primary', position: 'left', min: 0, max: 100 },
+        { scaleType: 'linear', id: 'secondary', position: 'right', min: 0, max: 500000 },
+      ],
+      tickFontSize: 12,
+      spacing: theme.spacing,
+      containerWidth: 600,
+    });
+
+    expect(dual.bands.secondaryYAxisBand).toBeGreaterThan(0);
+    // The wider secondary axis (500000 vs 100) must reserve MORE than the primary alone.
+    expect(dual.margin.right).toBeGreaterThan(single.margin.right);
+    expect(dual.margin.right).toBe(PACKAGE_DEFAULT_MARGIN.right + dual.bands.secondaryYAxisBand);
+    // Width invariant, now with the secondary band as a fourth term.
+    expect(dual.bands.yAxisBand + dual.bands.plotWidth + dual.bands.secondaryYAxisBand + dual.bands.rightPad)
+      .toBe(600);
+  });
+
+  it('an unmarked (no explicit position) second y-axis defaults to the LEFT, matching MUI, and reserves no secondary band', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan'] }],
+      yAxis: [
+        { scaleType: 'linear', id: 'a', min: 0, max: 1 },
+        { scaleType: 'linear', id: 'b', min: 0, max: 1 },
+      ],
+      tickFontSize: 12,
+      spacing: theme.spacing,
+    });
+    expect(layout.bands.secondaryYAxisBand).toBe(0);
+  });
+
+  // Codex second-pass review finding: a caller-supplied `valueFormatter` that blanks every tick
+  // must collapse the y-axis band to zero too (Rule 2's general principle), not just the x-axis
+  // case the WO's Definition of Done names explicitly.
+  it('collapses the y-axis band to zero when every tick formats to a blank string', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan'] }],
+      yAxis: [{ scaleType: 'linear', min: 0, max: 1, valueFormatter: () => '' }],
+      tickFontSize: 12,
+      spacing: theme.spacing,
+    });
+    expect(layout.bands.yAxisBand).toBe(0);
+    expect(layout.yAxis[0].width).toBe(0);
+  });
+
+  // Codex second-pass review finding: `slotProps.legend.position` can override `legendPosition` at
+  // render time (`withChartSlotDefaults`) -- the resolver must reserve space for wherever the
+  // legend ACTUALLY renders, not just what `legendPosition` alone says.
+  it('reserves space for the slotProps.legend.position override, not just legendPosition', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan'] }],
+      yAxis: [{ scaleType: 'linear' }],
+      legendPosition: { vertical: 'bottom' },
+      slotProps: { legend: { position: { vertical: 'top' } } },
+      spacing: theme.spacing,
+    });
+    expect(layout.margin.top).toBeGreaterThan(PACKAGE_DEFAULT_MARGIN.top);
+    expect(layout.margin.bottom).toBe(PACKAGE_DEFAULT_MARGIN.bottom);
+  });
+
+  it('resolveLegendPosition matches withChartSlotDefaults\' own merge precedence exactly', () => {
+    const legendPosition = { vertical: 'bottom', horizontal: 'start' };
+    const slotProps = { legend: { position: { horizontal: 'end' } } };
+    const resolved = resolveLegendPosition(legendPosition, slotProps);
+    const fromSlotDefaults = withChartSlotDefaults(slotProps, legendPosition).legend.position;
+    expect(resolved).toEqual(fromSlotDefaults);
+    expect(resolved).toEqual({ vertical: 'bottom', horizontal: 'end' });
+  });
+
+  // Codex second-pass review finding: a caller-set `xAxis[0].height` bypasses the model's SIZE,
+  // but rotation must still be governed entirely by `xLabels` -- a stale caller-set angle must not
+  // survive under a mode that says "no rotation".
+  it('still governs rotation via xLabels even when the caller sets an explicit axis height', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['Jan'], height: 60, tickLabelStyle: { angle: -60 } }],
+      yAxis: [{ scaleType: 'linear' }],
+      xLabels: 'horizontal',
+      spacing: theme.spacing,
+    });
+    expect(layout.xAxis[0].height).toBe(60); // the caller's own height escape still wins
+    expect(layout.xAxis[0].tickLabelStyle.angle).toBeFalsy(); // but the stale rotation does not survive
+  });
 });
 
 describe('resolveChartLayout size tokens and height escape (UCM-CHART-12)', () => {
@@ -491,12 +598,17 @@ describe('resolveChartLayout xLabels rotation (UCM-CHART-12)', () => {
     expect(layout.xAxis[0].tickLabelStyle.angle).toBe(-45);
   });
 
-  it('"auto" stays horizontal for a few short labels, rotates for many long ones', () => {
+  it('"auto" stays horizontal for a few short labels, rotates for many long ones (measured width, not char count)', () => {
+    // codex second-pass review finding: "auto" must decide from the label's MEASURED width, not a
+    // raw character count -- these inject a deterministic measurer instead of relying on the
+    // per-glyph estimate, and a `tickFontSize` fallback so the resolver can actually measure.
     const few = resolveChartLayout({
       xAxis: [{ scaleType: 'band', data: ['Jan', 'Feb', 'Mar'] }],
       yAxis: [{ scaleType: 'linear' }],
       xLabels: 'auto',
+      tickFontSize: 12,
       spacing: theme.spacing,
+      measureTextWidth: () => 20, // narrow -- well under the rotation threshold
     });
     expect(few.xAxis[0].tickLabelStyle?.angle).toBeFalsy();
 
@@ -504,11 +616,37 @@ describe('resolveChartLayout xLabels rotation (UCM-CHART-12)', () => {
       xAxis: [{ scaleType: 'band', data: Array.from({ length: 12 }, (_, i) => `Ward name ${i}`) }],
       yAxis: [{ scaleType: 'linear' }],
       xLabels: 'auto',
+      tickFontSize: 12,
       spacing: theme.spacing,
+      measureTextWidth: () => 90, // wide -- over the rotation threshold
     });
     expect(many.xAxis[0].tickLabelStyle.angle).toBe(-45);
   });
 
+  it('"auto" does not rotate a few WIDE labels -- tick count and measured width must both cross the threshold', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: ['A very wide single label'] }],
+      yAxis: [{ scaleType: 'linear' }],
+      xLabels: 'auto',
+      tickFontSize: 12,
+      spacing: theme.spacing,
+      measureTextWidth: () => 200, // wide, but only one category
+    });
+    expect(layout.xAxis[0].tickLabelStyle?.angle).toBeFalsy();
+  });
+
+  it('"auto" does not rotate many labels that are individually narrow', () => {
+    const layout = resolveChartLayout({
+      xAxis: [{ scaleType: 'band', data: Array.from({ length: 12 }, (_, i) => `${i}`) }],
+      yAxis: [{ scaleType: 'linear' }],
+      xLabels: 'auto',
+      tickFontSize: 12,
+      spacing: theme.spacing,
+      measureTextWidth: () => 8, // many categories, but each label is tiny
+    });
+    expect(layout.xAxis[0].tickLabelStyle?.angle).toBeFalsy();
+  });
+
   it('drives the rotated tick band from a measured width, not a flat constant', () => {
     const short = resolveChartLayout({
       xAxis: [{ scaleType: 'band', data: ['A'], tickLabelStyle: { fontSize: 12 } }],
@@ -655,6 +793,24 @@ describe('sizeYAxisForContent (THEME-9)', () => {
     expect(axis.width).toBe(42);
   });
 
+  // UCM-CHART-12 Rule 2 (codex second-pass review finding): candidates existed (min/max set), but
+  // a caller `valueFormatter` reduced every tick to a blank string -- distinct from "nothing to
+  // measure at all" (the untouched/undefined case below), this must collapse to a real 0, not the
+  // font-size floor a blank string previously still received.
+  it('collapses to width 0 when every formatted tick is blank and there is no axis title', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, valueFormatter: () => '' }], [], '12px',
+    );
+    expect(axis.width).toBe(0);
+  });
+
+  it('still reserves width for the axis TITLE when ticks are blank but a label is set', () => {
+    const [axis] = sizeYAxisForContent(
+      [{ scaleType: 'linear', min: 0, max: 1, valueFormatter: () => '', label: 'Coverage' }], [], '12px',
+    );
+    expect(axis.width).toBeGreaterThan(0);
+  });
+
   it('leaves a categorical (band/point) axis alone -- its ticks are names, not numbers', () => {
     const [axis] = sizeYAxisForContent(
       [{ scaleType: 'band', data: ['a', 'b'] }], [], '12px',