@micha.bigler/ui-core-micha 3.0.1 → 3.1.1

package/scripts/chart-api-census.mjs

@@ -0,0 +1,407 @@
+#!/usr/bin/env node
+// UCM-CHART-14: a parser, not a grep. This is the whole point of this file -- five wrong consumer
+// counts in this series (see work-orders/UCM-CHART-14.md) all came from a grep pattern that could
+// not see JSX structure: a prop several lines below the component name, an arrow function's `=>`
+// inside a prop value, an apostrophe inside a comment, a `>` inside a nested `{}` expression. A
+// regex line-match cannot tell any of those apart from the thing it's looking for. This script
+// tracks string/template/comment/regex-literal state and brace depth in ONE continuous pass over
+// each file, so its answer is reproducible output, not a claim someone has to trust.
+//
+// Second review round (both `reviewer` and `ui_reviewer`, independently) found the first version's
+// three-pass design (a raw `RegExp.exec` tag-open search, oblivious to string/comment context, then
+// a per-tag bounds scan, then a per-tag attribute scan) could itself produce a WRONG, non-UNPARSED
+// answer -- worse than an honest UNPARSED, because nothing flags it: JSX-looking text inside a
+// string or comment counted as a real element, and a regex literal's `}`/`>` characters (e.g.
+// `data={/[}>]/}`) corrupted brace-depth tracking and closed a tag early. Both are fixed here by
+// giving every stage the SAME shared state, tracked once, forward, per file.
+//
+// Dev script only -- never imported by the published package (kept out of package.json's `files`/
+// `exports`), never writes anything, and degrades to "not present" for a missing/frontend-less
+// sibling repo rather than throwing.
+
+import { readFileSync, readdirSync, statSync, existsSync } from 'node:fs';
+import { join, relative, dirname } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+// The five props this WO's series has spent five work orders removing/relocating -- what a census
+// exists to count is exactly "who still passes one of these".
+export const TARGET_PROPS = ['aspect', 'height', 'minHeight', 'margin', 'xAxisAngle'];
+export const TARGET_COMPONENTS = ['BarChart', 'LineChart', 'ScatterChart', 'TimeSeriesChart', 'ChartFrame'];
+const SOURCE_EXTENSIONS = new Set(['.js', '.jsx', '.ts', '.tsx']);
+const SKIP_DIR_NAMES = new Set(['node_modules', 'dist', 'build', '.git']);
+const PACKAGE_SPECIFIER = '@micha.bigler/ui-core-micha';
+
+/**
+ * Finds every `import { ... } from '@micha.bigler/ui-core-micha'` in `source` and returns a map
+ * of LOCAL name -> CANONICAL export name, restricted to `TARGET_COMPONENTS`. Import declarations
+ * are a much simpler grammar than JSX (no nested arbitrary expressions in the specifier list), so
+ * a regex is appropriate here -- unlike the JSX scan below, which is not.
+ */
+function findImportedLocalNames(source) {
+  const localToCanonical = new Map();
+  const importRe = /import\s*\{([^}]*)\}\s*from\s*['"]@micha\.bigler\/ui-core-micha['"]/g;
+  let match;
+  while ((match = importRe.exec(source)) !== null) {
+    const specifiers = match[1].split(',').map((s) => s.trim()).filter(Boolean);
+    for (const spec of specifiers) {
+      const asMatch = spec.match(/^(\w+)\s+as\s+(\w+)$/);
+      const canonical = asMatch ? asMatch[1] : spec;
+      const local = asMatch ? asMatch[2] : spec;
+      if (TARGET_COMPONENTS.includes(canonical)) localToCanonical.set(local, canonical);
+    }
+  }
+  return localToCanonical;
+}
+
+function lineNumberAt(source, index) {
+  let line = 1;
+  for (let i = 0; i < index; i += 1) if (source[i] === '\n') line += 1;
+  return line;
+}
+
+const IDENT_START = /[A-Za-z_$]/;
+const IDENT_CHAR = /[A-Za-z0-9_$]/;
+// Regex-literal-start heuristic: a `/` is treated as opening a regex literal (not division) only
+// when the last significant character before it is one of these -- the common "a regex can only
+// start where a VALUE is expected, not follow one" rule real JS tokenizers use. Not a full parser;
+// documented, and sufficient for `data={/[}>]/}`-shaped prop values, the concrete case found in
+// review. A `/` following an identifier/number/`)`/`]` is treated as division and left alone.
+//
+// Regression found DURING this same fix's own verification run (before it ever reached review):
+// `<` and `>` were originally in this set on the theory that `/` can start a regex right after a
+// comparison operator -- but `<`/`>` are also exactly what precede the `/` in EVERY JSX closing
+// tag (`</Something>`) and self-closing tag (`Something />`). With them included, `</ChartFrame>`
+// itself was misread as a regex-literal start, consuming everything up to the next stray `/` in
+// the file and corrupting brace depth for the rest of the scan -- turning every multi-line
+// ChartFrame usage in the estate into a false UNPARSED. A `/` genuinely starting a regex right
+// after `<`/`>` (e.g. `a < /regex/.test(b)`) does not occur in practice in this codebase; dropped.
+const REGEX_PRECEDING_CHARS = new Set(['(', '{', '[', ',', ';', ':', '=', '&', '|', '!', '?', '+', '-', '*', '%', '^', '~']);
+
+/**
+ * Extracts top-level (tag-depth-0, RELATIVE TO `tagSource`) attribute names from `tagSource` (a
+ * full, already-correctly-bounded `<Name ...>` span). Shares the same string/template/comment/
+ * regex tracking as the outer scanner, so a prop value containing a regex literal, a nested
+ * object, or a comment can never be mistaken for a top-level attribute name -- `sx={{ aspect: 1
+ * }}` never reports a false `aspect` (an object key inside an expression, not a JSX attribute),
+ * and `data={/[}>]/}` never corrupts this function's own depth count either.
+ */
+function extractTopLevelAttributeNames(tagSource) {
+  const found = new Set();
+  let depth = 0;
+  let inString = null;
+  let inLineComment = false;
+  let inBlockComment = false;
+  let inRegex = false;
+  let inRegexClass = false;
+  let lastSignificant = null;
+
+  for (let i = 0; i < tagSource.length; i += 1) {
+    const c = tagSource[i];
+    const next = tagSource[i + 1];
+
+    if (inLineComment) { if (c === '\n') inLineComment = false; continue; }
+    if (inBlockComment) { if (c === '*' && next === '/') { inBlockComment = false; i += 1; } continue; }
+    if (inRegex) {
+      if (c === '\\') { i += 1; continue; }
+      if (c === '[') { inRegexClass = true; continue; }
+      if (c === ']') { inRegexClass = false; continue; }
+      if (c === '/' && !inRegexClass) {
+        inRegex = false;
+        let j = i + 1;
+        while (j < tagSource.length && /[a-z]/i.test(tagSource[j])) j += 1;
+        i = j - 1;
+      }
+      continue;
+    }
+    if (inString) {
+      if (c === '\\') { i += 1; continue; }
+      if (c === inString) inString = null;
+      continue;
+    }
+    if (c === '/' && next === '/') { inLineComment = true; i += 1; continue; }
+    if (c === '/' && next === '*') { inBlockComment = true; i += 1; continue; }
+    if (c === '/' && (lastSignificant === null || REGEX_PRECEDING_CHARS.has(lastSignificant))) {
+      inRegex = true; inRegexClass = false; lastSignificant = '/'; continue;
+    }
+    if (c === '"' || c === "'" || c === '`') { inString = c; lastSignificant = c; continue; }
+    if (c === '{') { depth += 1; lastSignificant = c; continue; }
+    if (c === '}') { depth = Math.max(0, depth - 1); lastSignificant = c; continue; }
+
+    if (depth === 0 && IDENT_START.test(c) && (i === 0 || !IDENT_CHAR.test(tagSource[i - 1]))) {
+      let j = i + 1;
+      while (j < tagSource.length && IDENT_CHAR.test(tagSource[j])) j += 1;
+      found.add(tagSource.slice(i, j));
+      lastSignificant = tagSource[j - 1];
+      i = j - 1;
+      continue;
+    }
+    if (!/\s/.test(c)) lastSignificant = c;
+  }
+  return found;
+}
+
+/**
+ * The single-pass scanner. Walks `source` exactly ONCE, maintaining ONE shared state for strings,
+ * template literals (+ `${}` expression nesting), line/block comments, regex literals, and brace
+ * depth -- so tag-open detection and tag-close detection agree on where the real code is, instead
+ * of a separate context-blind pass for each. A `<Name` is only recognised as a real JSX tag open
+ * when the scanner is not currently inside a string/comment/regex, which is what stops `// <BarChart
+ * aspect />` or `"<BarChart aspect />"` from being counted. Multiple target tags can be pending at
+ * once (a component nested inside another's own prop expression, e.g. `<ChartFrame content={<>
+ * <BarChart aspect /></>} />`) -- each is closed independently, at the exact brace depth it opened
+ * at, so a nested tag closing does not consume or corrupt the outer tag's own remaining scan.
+ *
+ * A tag still open when the file ends is reported UNPARSED, never dropped (Definition of Done).
+ */
+function scanForComponents(source, localToCanonical) {
+  const results = [];
+  const openTags = []; // { canonical, tagStart, closeAtDepth, line }
+  const localNames = [...localToCanonical.keys()];
+
+  let inString = null;
+  let inLineComment = false;
+  let inBlockComment = false;
+  let inRegex = false;
+  let inRegexClass = false;
+  let depth = 0;
+  const templateDepthStack = [];
+  let lastSignificant = null;
+
+  const closePendingAtCurrentDepth = (closeIndex) => {
+    for (let k = openTags.length - 1; k >= 0; k -= 1) {
+      if (openTags[k].closeAtDepth === depth) {
+        const tag = openTags.splice(k, 1)[0];
+        const tagSource = source.slice(tag.tagStart, closeIndex + 1);
+        const attrNames = extractTopLevelAttributeNames(tagSource);
+        const props = {};
+        for (const prop of TARGET_PROPS) props[prop] = attrNames.has(prop);
+        results.push({ component: tag.canonical, line: tag.line, unparsed: false, props });
+      }
+    }
+  };
+
+  for (let i = 0; i < source.length; i += 1) {
+    const c = source[i];
+    const next = source[i + 1];
+
+    if (inLineComment) { if (c === '\n') inLineComment = false; continue; }
+    if (inBlockComment) { if (c === '*' && next === '/') { inBlockComment = false; i += 1; } continue; }
+    if (inRegex) {
+      if (c === '\\') { i += 1; continue; }
+      if (c === '[') { inRegexClass = true; continue; }
+      if (c === ']') { inRegexClass = false; continue; }
+      if (c === '/' && !inRegexClass) {
+        inRegex = false;
+        let j = i + 1;
+        while (j < source.length && /[a-z]/i.test(source[j])) j += 1;
+        i = j - 1;
+      }
+      continue;
+    }
+    if (inString) {
+      if (c === '\\') { i += 1; continue; }
+      if (inString === '`' && c === '$' && next === '{') {
+        templateDepthStack.push(depth);
+        depth += 1;
+        i += 1;
+        inString = null;
+        lastSignificant = '{';
+        continue;
+      }
+      if (c === inString) inString = null;
+      continue;
+    }
+
+    if (c === '/' && next === '/') { inLineComment = true; i += 1; continue; }
+    if (c === '/' && next === '*') { inBlockComment = true; i += 1; continue; }
+    if (c === '/' && (lastSignificant === null || REGEX_PRECEDING_CHARS.has(lastSignificant))) {
+      inRegex = true; inRegexClass = false; lastSignificant = '/'; continue;
+    }
+    if (c === '"' || c === "'" || c === '`') { inString = c; lastSignificant = c; continue; }
+
+    if (c === '{') { depth += 1; lastSignificant = c; continue; }
+    if (c === '}') {
+      if (templateDepthStack.length && depth - 1 === templateDepthStack[templateDepthStack.length - 1]) {
+        templateDepthStack.pop();
+        depth -= 1;
+        inString = '`';
+        lastSignificant = '}';
+        continue;
+      }
+      depth = Math.max(0, depth - 1);
+      lastSignificant = c;
+      continue;
+    }
+
+    if (c === '<') {
+      let matchedName = null;
+      for (const name of localNames) {
+        if (source.startsWith(name, i + 1)) {
+          const after = source[i + 1 + name.length];
+          if (after === undefined || /[\s/>]/.test(after)) { matchedName = name; break; }
+        }
+      }
+      if (matchedName) {
+        openTags.push({
+          canonical: localToCanonical.get(matchedName),
+          tagStart: i,
+          closeAtDepth: depth,
+          line: lineNumberAt(source, i),
+        });
+        i += matchedName.length;
+        lastSignificant = matchedName[matchedName.length - 1];
+        continue;
+      }
+      lastSignificant = c;
+      continue;
+    }
+
+    if (c === '>') {
+      closePendingAtCurrentDepth(i);
+      lastSignificant = c;
+      continue;
+    }
+
+    if (!/\s/.test(c)) lastSignificant = c;
+  }
+
+  for (const tag of openTags) {
+    results.push({ component: tag.canonical, line: tag.line, unparsed: true, props: {} });
+  }
+  return results;
+}
+
+/**
+ * The pure analysis function -- no filesystem access, so this is what the fixture tests below
+ * exercise directly. Returns one entry per JSX element found whose tag name resolves (via the
+ * file's own imports) to one of `TARGET_COMPONENTS`.
+ *
+ * Documented, accepted heuristic limitation (unchanged from the first version, not solved by the
+ * single-pass rewrite): `<` is only ever treated as a JSX tag open, never as a less-than
+ * comparison against an uppercase-starting identifier (`foo < BarChart`). Real component
+ * references are never used in a numeric/relational comparison in practice, so this is judged a
+ * theoretical gap, not a practical one -- unlike the string/comment/regex-literal blindness fixed
+ * above, which were concrete, plausible false positives.
+ */
+export function findChartApiUsage(source) {
+  const localToCanonical = findImportedLocalNames(source);
+  if (localToCanonical.size === 0) return [];
+  return scanForComponents(source, localToCanonical);
+}
+
+function walkSourceFiles(rootDir) {
+  const files = [];
+  function walk(dir) {
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      if (entry.name.startsWith('.')) continue;
+      if (SKIP_DIR_NAMES.has(entry.name)) continue;
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(full);
+      } else if (entry.isFile()) {
+        const dot = entry.name.lastIndexOf('.');
+        if (dot === -1) continue;
+        if (SOURCE_EXTENSIONS.has(entry.name.slice(dot))) files.push(full);
+      }
+    }
+  }
+  walk(rootDir);
+  return files;
+}
+
+/**
+ * Locates an app's frontend source root: `frontend/src` first (this estate's usual layout), then
+ * a bare `src/` fallback. Returns `null` (never throws) if neither exists -- a repo with no
+ * frontend, or absent entirely, is reported as "not present", not an error.
+ */
+function findAppSourceRoot(appDir) {
+  const candidates = [join(appDir, 'frontend', 'src'), join(appDir, 'src')];
+  for (const candidate of candidates) {
+    if (existsSync(candidate) && statSync(candidate).isDirectory()) return candidate;
+  }
+  return null;
+}
+
+export function runCensus(workspaceRoot, { excludeDirs = ['ui-core-micha'] } = {}) {
+  let appNames;
+  try {
+    appNames = readdirSync(workspaceRoot, { withFileTypes: true })
+      .filter((e) => e.isDirectory() && !e.name.startsWith('.') && !excludeDirs.includes(e.name))
+      .map((e) => e.name);
+  } catch (err) {
+    return { workspaceRoot, apps: [], error: `workspace root unreadable: ${err.message}` };
+  }
+
+  const apps = appNames.map((appName) => {
+    const appDir = join(workspaceRoot, appName);
+    const sourceRoot = findAppSourceRoot(appDir);
+    if (!sourceRoot) return { app: appName, present: false, entries: [] };
+
+    const entries = [];
+    for (const file of walkSourceFiles(sourceRoot)) {
+      let source;
+      try {
+        source = readFileSync(file, 'utf8');
+      } catch {
+        continue; // unreadable file (permissions, symlink race) -- not a parse failure, skip quietly
+      }
+      if (!source.includes(PACKAGE_SPECIFIER)) continue; // fast path: no ucm import at all
+      const usages = findChartApiUsage(source);
+      for (const usage of usages) {
+        entries.push({ ...usage, file: relative(workspaceRoot, file).replace(/\\/g, '/') });
+      }
+    }
+    return { app: appName, present: true, entries };
+  });
+
+  return { workspaceRoot, apps };
+}
+
+/**
+ * Reports EVERY element found (Definition of Done: "every `<ChartFrame>` and every ucm chart
+ * preset element"), not just the ones carrying a target prop -- a clean element is printed as
+ * `(clean)`, not omitted, so "this app has zero matching elements at all" and "this app has
+ * elements, all clean" stay visibly distinct instead of looking identical.
+ */
+function formatReport(result) {
+  const lines = [];
+  let totalUnparsed = 0;
+  for (const { app, present, entries } of result.apps) {
+    if (!present) { lines.push(`${app}: not present (no frontend/src or src)`); continue; }
+    if (entries.length === 0) continue;
+    lines.push(`${app}:`);
+    for (const entry of entries) {
+      if (entry.unparsed) {
+        totalUnparsed += 1;
+        lines.push(`  UNPARSED  ${entry.file}:${entry.line}  <${entry.component}>  -- could not close this tag, not counted as clean`);
+        continue;
+      }
+      const activeProps = TARGET_PROPS.filter((p) => entry.props[p]);
+      const propsText = activeProps.length > 0 ? activeProps.join(' ') : '(clean)';
+      lines.push(`  ${entry.file}:${entry.line}  <${entry.component} ${propsText}>`);
+    }
+  }
+  if (totalUnparsed > 0) {
+    lines.push('');
+    lines.push(`${totalUnparsed} tag(s) could not be parsed -- see UNPARSED lines above. Not counted as clean.`);
+  }
+  return lines.join('\n');
+}
+
+// `pathToFileURL` (not manual string-building) is what makes this comparison correct on Windows,
+// where a bare `file://${path}` is missing the extra slash before the drive letter that
+// `import.meta.url` actually has (`file:///C:/...`) -- a naive comparison silently never matches,
+// so `node scripts/chart-api-census.mjs` would run to completion with zero output and no error.
+const isMain = process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href;
+if (isMain) {
+  const workspaceRoot = process.argv[2] || join(dirname(fileURLToPath(import.meta.url)), '..', '..');
+  const result = runCensus(workspaceRoot);
+  // eslint-disable-next-line no-console
+  console.log(formatReport(result));
+}

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,33 @@ 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: it WAS wired to `aspectRatio` on the box at 3.0.1, and worked.
+ *
+ * UCM-CHART-14 CORRECTION -- left legible on purpose, not deleted: `UCM-CHART-13` shipped claiming
+ * "no consumer across the five apps passes [aspect] (measured against 3.0.1)". **That measurement
+ * was false.** A parser-based census (`scripts/chart-api-census.mjs`, ground truth over grep) found
+ * FOUR live call sites in fitness-monitor (`BodyHistoryPage.jsx:295,444`, `EnvironmentPage.jsx:245,279`)
+ * that a `head`-truncated grep had silently missed -- the sixth wrong consumer count in this series
+ * (see `UCM-CHART-14`'s own WO for the other five). The REMOVAL itself still stands (`aspect` stays
+ * gone, the operator confirmed this is not being reopened) -- only the record of who it affected was
+ * wrong, and is corrected here rather than quietly rewritten. Those four sites are `FM-CHART-1`'s
+ * scope, not this file's. Passing either prop 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 -- `aspect`'s own message states plainly that it WAS applied and
+ * this is a real behaviour change (`UCM-CHART-14`, F2: the message previously said the opposite).
  */
 export function ChartFrame({
   title,
@@ -54,8 +49,6 @@ export function ChartFrame({
   isEmpty = false,
   emptyMessage,
   minHeight,
-  height,
-  aspect,
   exportOptions = false,
   onExportSvg,
   onExportPng,
@@ -65,6 +58,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 +75,18 @@ 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,
+    'It WAS applied here (aspectRatio on the card box, through 3.0.1) -- this is a real behaviour '
+    + 'change, not a no-op removal. The card\'s height now follows its content, with minHeight as '
+    + 'the floor. If you wanted the chart itself taller or shorter, set size on the chart inside '
+    + 'the frame.',
+    'UCM-CHART-14, v3.1.1',
   );
 
   const runExport = async (type) => {
@@ -136,7 +142,6 @@ export function ChartFrame({
         sx={{
           width: '100%',
           minHeight,
-          aspectRatio: aspect,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',

package/src/components/charts/chartDefaults.js

@@ -556,12 +556,18 @@ 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}`,
   );
 }
 

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,79 @@ 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` was destructured but never applied to the box -- genuinely dead, no
+  // consumer lost anything when it went. `aspect` is DIFFERENT: it WAS applied (`aspectRatio` on
+  // the box, through 3.0.1). UCM-CHART-13 shipped claiming no consumer passed it either -- that was
+  // false (a head-truncated grep missed four live call sites in fitness-monitor); UCM-CHART-14
+  // corrects the record and rewrites `aspect`'s own error message, which previously said "never
+  // applied" -- the opposite of what happened, and actively misleading for the four callers who
+  // will actually see it. Both props are gone; passing either throws in dev, naming the real
+  // replacement, the same mechanism the four chart presets use (`UCM-CHART-12`).
+  describe('removed height/aspect props throw in dev, naming their replacement (UCM-CHART-13/14)', () => {
+    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 -- WITHOUT claiming it was never applied', () => {
+      const message = (() => {
+        try { renderFrame({ aspect: 1.8 }); } catch (err) { return err.message; }
+        throw new Error('expected renderFrame to throw');
+      })();
+      expect(message).toMatch(/ChartFrame.*aspect.*size/s);
+      // ui_reviewer finding: the prior version of this test only checked /size/, which a message
+      // naming JUST size (and dropping minHeight) would still pass -- the card's own floor is
+      // still minHeight, so the message must say so too, not only point at the chart's `size`.
+      expect(message).toMatch(/minHeight/);
+      // UCM-CHART-14 F2: the message must not repeat the false "never applied" claim that shipped
+      // in UCM-CHART-13 -- aspect DID apply aspectRatio to the box, and removing it is a real,
+      // visible change for the four callers who will hit this. A test only matching /size/ would
+      // pass on either wording, which is exactly how the false message shipped unnoticed.
+      expect(message).not.toMatch(/never applied/i);
+      expect(message).toMatch(/was applied/i);
+    });
+
+    it('attributes the height removal to UCM-CHART-13/v3.1.0 (unchanged -- height\'s message was already true)', () => {
+      expect(() => renderFrame({ height: 380 })).toThrow(/UCM-CHART-13.*v3\.1\.0/);
+    });
+
+    it('attributes the aspect removal to UCM-CHART-14/v3.1.1 (the corrected message, not the original false one)', () => {
+      expect(() => renderFrame({ aspect: 1.8 })).toThrow(/UCM-CHART-14.*v3\.1\.1/);
+    });
+
+    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;
+      }
     });
   });
 });