@micha.bigler/ui-core-micha 2.37.1 → 2.39.0

package/src/components/StatTile.jsx

@@ -0,0 +1,39 @@
+import { Box, Typography } from '@mui/material';
+
+/**
+ * A small bordered KPI tile: muted label, one bold tabular value, optional caption.
+ * Promoted from two independent builds (hram's `ResearchComponents/StatTile.jsx`, the inline
+ * version in fitness-monitor's `BodyHistoryPage.jsx`) -- `flex: 1` with a `minWidth` floor covers
+ * both builds' row behaviours with one rule, and `tabular-nums` is unconditional so a row of
+ * tiles reads as a row.
+ */
+export default function StatTile({ label, value, caption, accent = false, children, minWidth = 120 }) {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        minWidth,
+        border: '1px solid',
+        borderColor: accent ? 'primary.main' : 'divider',
+        borderWidth: accent ? 2 : 1,
+        borderRadius: 1,
+        p: { xs: 1, sm: 1.5 },
+      }}
+    >
+      <Typography variant="caption" color="text.secondary" display="block">
+        {label}
+      </Typography>
+      {value !== undefined && (
+        <Typography variant="h5" component="div" sx={{ fontVariantNumeric: 'tabular-nums' }}>
+          {value}
+        </Typography>
+      )}
+      {caption && (
+        <Typography variant="caption" color="text.secondary" display="block">
+          {caption}
+        </Typography>
+      )}
+      {children}
+    </Box>
+  );
+}

package/src/index.js

@@ -17,6 +17,7 @@ export {
   KIT_COMPONENT_SX_REGISTRY,
   reportOffPaletteColours,
   reportKitSxBypasses,
+  reportRedundantThemeValues,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
 } from './theme';
@@ -62,6 +63,8 @@ export { AuthFactorRequirementCard } from './components/AuthFactorRequirementCar
 export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggle';
 export { QrSignupManager } from './components/QrSignupManager';
 export { MobileBottomNav } from './components/MobileBottomNav';
+export { default as StatTile } from './components/StatTile';
+export { default as SoftChip } from './components/SoftChip';
 
 // --- 6. Charts ---
 export { ChartFrame } from './components/charts/ChartFrame';

package/src/theme/index.js

@@ -5,6 +5,7 @@ export {
   calculateContrastRatio,
   reportOffPaletteColours,
   reportKitSxBypasses,
+  reportRedundantThemeValues,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,
 } from './themeCompleteness';

package/src/theme/kitSxRegistry.js

@@ -41,6 +41,11 @@ import {
   REGISTRATION_METHODS_INFO_SX,
 } from '../components/RegistrationMethodsManager';
 import { SECURITY_ALERT_SX, SECURITY_DIVIDER_SX } from '../components/SecurityComponent';
+import {
+  SOFT_CHIP_CAVEAT_SX,
+  SOFT_CHIP_ROOT_SX,
+  SOFT_CHIP_STATUS_SX,
+} from '../components/SoftChip';
 import {
   SUPPORT_RECOVERY_AGENT_BUTTON_SX,
   SUPPORT_RECOVERY_AGENT_PAPER_SX,
@@ -148,6 +153,9 @@ const SX_EXPORTS = {
   SECURITY_DIVIDER_SX,
   SECTION_NAV_DRAWER_PAPER_SX,
   SECTION_NAV_GROUP_PAPER_SX,
+  SOFT_CHIP_CAVEAT_SX,
+  SOFT_CHIP_ROOT_SX,
+  SOFT_CHIP_STATUS_SX,
   SIGNUP_CONFIRM_PAGE_ALERT_SX,
   SIGN_UP_PAGE_ALERT_SX,
   SUPPORT_RECOVERY_AGENT_BUTTON_SX,
@@ -213,6 +221,9 @@ export const KIT_COMPONENT_SX_REGISTRY = [
   entry('RegistrationMethodsManager.info', 'MuiAlert', REGISTRATION_METHODS_INFO_SX),
   entry('SecurityComponent.alert', 'MuiAlert', SECURITY_ALERT_SX),
   entry('SecurityComponent.divider', 'MuiDivider', SECURITY_DIVIDER_SX),
+  entry('SoftChip.root', 'MuiChip', SOFT_CHIP_ROOT_SX),
+  entry('SoftChip.caveat', 'MuiChip', SOFT_CHIP_CAVEAT_SX),
+  entry('SoftChip.status', 'MuiChip', SOFT_CHIP_STATUS_SX),
   entry('SupportRecoveryRequestsTab.agentPaper', 'MuiPaper', SUPPORT_RECOVERY_AGENT_PAPER_SX),
   entry('SupportRecoveryRequestsTab.alert', 'MuiAlert', SUPPORT_RECOVERY_ALERT_SX),
   entry('SupportRecoveryRequestsTab.agentAction', 'MuiButton', SUPPORT_RECOVERY_AGENT_BUTTON_SX),

package/src/theme/themeCompleteness.js

@@ -816,6 +816,207 @@ export function reportOffPaletteColours(
   return { findings };
 }
 
+function balancedBraceRegion(text, start) {
+  let depth = 0;
+  let quote = null;
+  for (let index = start; index < text.length; index += 1) {
+    const character = text[index];
+    if (quote) {
+      if (character === quote && text[index - 1] !== '\\') quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'" || character === '`') {
+      quote = character;
+      continue;
+    }
+    if (character === '{') depth += 1;
+    else if (character === '}') {
+      depth -= 1;
+      if (depth === 0) return text.slice(start, index + 1);
+    }
+  }
+  return text.slice(start);
+}
+
+function topLevelObjectEntries(objectText) {
+  const inner = objectText.slice(1, -1);
+  const entries = [];
+  let depth = 0;
+  let quote = null;
+  let entryStart = 0;
+  const push = (raw) => {
+    const trimmed = raw.trim();
+    if (trimmed) entries.push(trimmed);
+  };
+  for (let index = 0; index < inner.length; index += 1) {
+    const character = inner[index];
+    if (quote) {
+      if (character === quote && inner[index - 1] !== '\\') quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'" || character === '`') {
+      quote = character;
+      continue;
+    }
+    if (character === '{' || character === '[' || character === '(') depth += 1;
+    else if (character === '}' || character === ']' || character === ')') depth -= 1;
+    else if (character === ',' && depth === 0) {
+      push(inner.slice(entryStart, index));
+      entryStart = index + 1;
+    }
+  }
+  push(inner.slice(entryStart));
+  return entries;
+}
+
+function splitSxEntry(entry) {
+  let depth = 0;
+  let quote = null;
+  for (let index = 0; index < entry.length; index += 1) {
+    const character = entry[index];
+    if (quote) {
+      if (character === quote && entry[index - 1] !== '\\') quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'" || character === '`') {
+      quote = character;
+      continue;
+    }
+    if (character === '{' || character === '[' || character === '(') depth += 1;
+    else if (character === '}' || character === ']' || character === ')') depth -= 1;
+    else if (character === ':' && depth === 0) {
+      return { rawKey: entry.slice(0, index).trim(), rawValue: entry.slice(index + 1).trim() };
+    }
+  }
+  return null;
+}
+
+const SIMPLE_IDENTIFIER_PATTERN = /^[A-Za-z_$][\w$]*$/;
+const QUOTED_STRING_PATTERN = /^(['"])((?:\\.|(?!\1)[\s\S])*)\1$/;
+const NUMERIC_LITERAL_PATTERN = /^-?\d+(?:\.\d+)?$/;
+
+/**
+ * Reads a top-level `sx={{ ... }}` object literal on a baseline-styled tag
+ * and returns its simple `{ property, value }` entries: identifier keys only
+ * (a quoted key is a nested selector like `'&:hover'` and is skipped, not a
+ * property), values that are a plain quoted string or bare number only. A
+ * template literal, identifier reference, spread, or function call is out of
+ * scope by design -- this is a lower bound, not a JS evaluator.
+ */
+function literalSxEntries(sxValueText) {
+  if (!/^\{\s*\{/.test(sxValueText)) return [];
+  const objectText = balancedBraceRegion(sxValueText, sxValueText.indexOf('{', 1));
+  const entries = [];
+  for (const rawEntry of topLevelObjectEntries(objectText)) {
+    const split = splitSxEntry(rawEntry);
+    if (!split) continue;
+    const { rawKey, rawValue } = split;
+    if (!SIMPLE_IDENTIFIER_PATTERN.test(rawKey)) continue;
+
+    const quoted = rawValue.match(QUOTED_STRING_PATTERN);
+    if (quoted) {
+      entries.push({ property: rawKey, value: quoted[2] });
+      continue;
+    }
+    if (NUMERIC_LITERAL_PATTERN.test(rawValue)) {
+      entries.push({ property: rawKey, value: Number(rawValue) });
+    }
+  }
+  return entries;
+}
+
+// MUI's sx system multiplies a bare NUMBER by a theme scale factor for these
+// properties (`theme.shape.borderRadius` for borderRadius, `theme.spacing()`
+// for every spacing alias) before it ever reaches the DOM -- a raw
+// `styleOverrides.root` value is already-resolved CSS, unscaled. Comparing
+// the two numbers directly would be a false positive (e.g. `borderRadius: 8`
+// in sx renders as `theme.shape.borderRadius * 8`, not `8`), and false
+// positives are the failure mode this whole check exists to avoid. Numeric
+// literals on these properties are therefore skipped, not compared -- a
+// false negative (this check's accepted lower bound) is the safe direction
+// to err in, a false positive is not.
+const MUI_NUMERIC_SCALE_PROPERTIES = new Set([
+  'borderRadius',
+  ...Object.keys(SPACING_SHORTHAND_LONGHANDS).filter((key) => key !== 'bgcolor' && key !== 'typography'),
+]);
+
+/**
+ * Resolves what an sx value would actually render as, for comparison against
+ * a theme styleOverride value already resolved to a real CSS value. A string
+ * sx value is tried as a `theme.palette.<value>` token path first (MUI's own
+ * resolution for palette-aware sx properties, e.g. `borderColor: 'divider'`
+ * -> `theme.palette.divider`); if that path is undefined, the raw string is
+ * used as-is (a plain CSS keyword like `'none'` is not a token path).
+ */
+function resolveSxValue(theme, value) {
+  if (typeof value !== 'string') return value;
+  const paletteValue = getPath(theme, `palette.${value}`);
+  return paletteValue !== undefined ? paletteValue : value;
+}
+
+/**
+ * Reports an app's own `sx` value that already equals what its theme
+ * resolves for that MUI component and property -- not "you overrode the
+ * baseline" (in an app, that is the intended mechanism), but "you re-stated
+ * a value you already had", which silently diverges the next time the token
+ * changes. Attribution is by JSX tag name against the same
+ * `BASELINE_STYLED_MUI_COMPONENTS` list `reportKitSxBypasses` uses, checked
+ * against `theme.components.Mui<Tag>.styleOverrides.root.<property>` only
+ * (no other slot). Report-only; there is no exemption arm yet -- each
+ * adopting app makes this a hard assertion in its own follow-up WO once it
+ * has acted on the findings.
+ *
+ * This is a lower bound, and the bound is open, not enumerated: a `styled()`
+ * component, a component rendered through `component={...}` (so its JSX tag
+ * name is not the MUI component it becomes), an aliased import
+ * (`import { Paper as Surface }`), array/callback/conditional `sx`, and a
+ * template-literal or identifier-reference value are all unattributed or
+ * unresolved by this method. A numeric `sx` value on a property MUI scales
+ * by a theme factor (`borderRadius`, every spacing alias) is deliberately
+ * SKIPPED rather than compared -- see `MUI_NUMERIC_SCALE_PROPERTIES` -- since
+ * comparing the raw numbers would be a false positive, not a missed finding.
+ * A clean result means "nothing found by this method", not "no redundant
+ * value exists".
+ */
+export function reportRedundantThemeValues(sources = [], { theme } = {}) {
+  const findings = [];
+  if (!theme) return { findings };
+  const componentPattern = BASELINE_STYLED_MUI_COMPONENTS.join('|');
+  const tagPattern = new RegExp(`<(${componentPattern})\\b`, 'g');
+
+  for (const { path, source } of normalizedSources(sources)) {
+    const scanSource = maskComments(maskQrPrintDocument(source, path.replaceAll('\\', '/')));
+
+    for (const match of scanSource.matchAll(tagPattern)) {
+      const tagName = match[1];
+      const tag = jsxOpeningTag(scanSource, match.index);
+      const sxValueText = topLevelSxValue(tag);
+      const line = source.slice(0, match.index).split(/\r?\n/).length;
+
+      for (const { property, value } of literalSxEntries(sxValueText)) {
+        if (typeof value === 'number' && MUI_NUMERIC_SCALE_PROPERTIES.has(property)) continue;
+        const [canonicalProperty] = expandShorthandProperty(property);
+        const lookupProperty = expandShorthandProperty(property).length === 1
+          ? canonicalProperty
+          : property;
+        const themeValue = getPath(
+          theme,
+          `components.Mui${tagName}.styleOverrides.root.${lookupProperty}`,
+        );
+        if (themeValue === undefined) continue;
+        if (sameValue(resolveSxValue(theme, value), themeValue)) {
+          findings.push({
+            surface: `${path}:${line}.Mui${tagName}.${property}`,
+            reason: `Mui${tagName}'s sx sets "${property}" to a value the theme already resolves to the same thing.`,
+          });
+        }
+      }
+    }
+  }
+
+  return { findings };
+}
+
 /** Reports adoption signals as numbers; it never changes completeness. */
 export function reportThemeAdoption(sources = []) {
   const normalized = sources.map((entry, index) =>

package/tests/SoftChip.test.jsx

@@ -0,0 +1,105 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ThemeProvider, alpha, darken } from '@mui/material/styles';
+
+import { createAppTheme } from '../src/theme';
+import SoftChip from '../src/components/SoftChip';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+const TONES = ['success', 'warning', 'error', 'info'];
+
+function renderChip(props) {
+  return render(<ThemeProvider theme={theme}><SoftChip {...props} /></ThemeProvider>);
+}
+
+function rgb(color) {
+  const probe = document.createElement('div');
+  probe.style.color = color;
+  document.body.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}
+
+afterEach(() => cleanup());
+
+describe('SoftChip', () => {
+  it.each(TONES)('derives fill/border/text for tone "%s" from the theme, not a literal', (tone) => {
+    renderChip({ label: 'Provisional ranges', tone });
+
+    const chip = screen.getByText('Provisional ranges').closest('.MuiChip-root');
+    const style = window.getComputedStyle(chip);
+    const palette = theme.palette[tone];
+
+    expect(style.backgroundColor).toBe(rgb(alpha(palette.main, 0.12)));
+    expect(style.borderColor).toBe(rgb(alpha(palette.main, 0.3)));
+    expect(style.color).toBe(rgb(darken(palette.main, 0.3)));
+  });
+
+  it('differs between status and caveat in radius and typography', () => {
+    renderChip({ label: 'passed', tone: 'success', variant: 'status' });
+    const statusChip = screen.getByText('passed').closest('.MuiChip-root');
+    const statusLabel = window.getComputedStyle(screen.getByText('passed'));
+    expect(window.getComputedStyle(statusChip).borderRadius).toBe('999px');
+    // status uses the baseline's `overline` variant verbatim -- 11/600, uppercase, .4px tracking
+    expect(statusLabel.textTransform).toBe('uppercase');
+    expect(statusLabel.fontSize).toBe(theme.typography.overline.fontSize);
+    expect(statusLabel.fontWeight).toBe(String(theme.typography.overline.fontWeight));
+    expect(statusLabel.letterSpacing).toBe(theme.typography.overline.letterSpacing);
+
+    cleanup();
+
+    renderChip({ label: 'Provisional ranges', tone: 'warning', variant: 'caveat' });
+    const caveatChip = screen.getByText('Provisional ranges').closest('.MuiChip-root');
+    const caveatLabel = window.getComputedStyle(screen.getByText('Provisional ranges'));
+    expect(window.getComputedStyle(caveatChip).borderRadius).not.toBe('999px');
+    // caveat keeps its raw 12/500 -- the PRIM-1 token delta, deliberately not on a theme variant
+    expect(caveatLabel.fontSize).toBe('12px');
+    expect(caveatLabel.fontWeight).toBe('500');
+  });
+
+  it('defaults the leading element to a dot and swaps it for a passed icon', () => {
+    const { container: withDot } = renderChip({ label: 'passed', tone: 'success', variant: 'status' });
+    expect(withDot.querySelector('.MuiChip-icon')).toBeTruthy();
+
+    cleanup();
+
+    const { container: withIcon } = renderChip({
+      label: 'recurring',
+      tone: 'info',
+      variant: 'status',
+      icon: <span data-testid="custom-icon" />,
+    });
+    expect(withIcon.querySelector('[data-testid="custom-icon"]')).toBeTruthy();
+  });
+
+  it('toggles the border', () => {
+    renderChip({ label: 'failed', tone: 'error', variant: 'status', border: false });
+
+    const chip = screen.getByText('failed').closest('.MuiChip-root');
+    expect(window.getComputedStyle(chip).borderColor).toBe(rgb('transparent'));
+  });
+
+  it('renders title as a tooltip, reachable on a touch pointer with no delay', async () => {
+    renderChip({ label: 'queued', tone: 'info', variant: 'status', title: 'Waiting on the sandbox' });
+
+    expect(screen.queryByText('Waiting on the sandbox')).toBeNull();
+
+    const chip = screen.getByText('queued').closest('.MuiChip-root');
+    fireEvent.touchStart(chip);
+
+    // `enterTouchDelay={0}` is the fix for the AUTH-4 failure mode -- a tooltip a touch pointer
+    // can never trigger. waitFor's default timeout (1000ms) is generous headroom around "no
+    // delay"; a regression to the ~700ms default would still likely pass, so this is a floor, not
+    // a precise timing assertion -- the source is the actual guarantee, this proves it's wired.
+    await waitFor(() => expect(screen.getByText('Waiting on the sandbox')).toBeTruthy());
+  });
+
+  it('omits the tooltip wrapper entirely when there is no title', () => {
+    renderChip({ label: 'queued', tone: 'info', variant: 'status' });
+
+    const chip = screen.getByText('queued').closest('.MuiChip-root');
+    expect(chip.getAttribute('aria-label')).toBeNull();
+  });
+});

package/tests/StatTile.test.jsx

@@ -0,0 +1,57 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@mui/material/styles';
+
+import { createAppTheme } from '../src/theme';
+import StatTile from '../src/components/StatTile';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+function renderTile(props) {
+  return render(<ThemeProvider theme={theme}><StatTile {...props} /></ThemeProvider>);
+}
+
+afterEach(() => cleanup());
+
+describe('StatTile', () => {
+  it('renders label, value and caption', () => {
+    renderTile({ label: 'Coverage at budget', value: '71.4 %', caption: 'of maximum realizable' });
+
+    expect(screen.getByText('Coverage at budget')).toBeTruthy();
+    expect(screen.getByText('71.4 %')).toBeTruthy();
+    expect(screen.getByText('of maximum realizable')).toBeTruthy();
+  });
+
+  it('omits the value row when value is undefined', () => {
+    renderTile({ label: 'Recovered' });
+
+    expect(screen.getByText('Recovered')).toBeTruthy();
+    expect(screen.queryByText('undefined')).toBeNull();
+  });
+
+  it('renders children', () => {
+    renderTile({ label: 'Deaths averted', value: '63.8 %', children: <span>children slot</span> });
+
+    expect(screen.getByText('children slot')).toBeTruthy();
+  });
+
+  it('applies the accent border only when accent is set', () => {
+    const { container: plain } = renderTile({ label: 'Body fat', value: '18.4 %' });
+    const plainStyle = window.getComputedStyle(plain.firstChild);
+    expect(plainStyle.borderWidth).toBe('1px');
+
+    cleanup();
+
+    const { container: accented } = renderTile({ label: 'Lean mass', value: '62.1 kg', accent: true });
+    const accentedStyle = window.getComputedStyle(accented.firstChild);
+    expect(accentedStyle.borderWidth).toBe('2px');
+  });
+
+  it('renders the value with tabular-nums', () => {
+    renderTile({ label: 'theta*', value: '0.8421' });
+
+    const value = screen.getByText('0.8421');
+    expect(window.getComputedStyle(value).fontVariantNumeric).toBe('tabular-nums');
+  });
+});

package/tests/themeCompleteness.test.js

@@ -12,6 +12,7 @@ import {
   KIT_COMPONENT_SX_REGISTRY,
   reportOffPaletteColours,
   reportKitSxBypasses,
+  reportRedundantThemeValues,
   THEME_COMPLETENESS_SURFACES,
 } from '../src/theme';
 import { BASELINE_PALETTE } from '../src/theme/tokens';
@@ -244,6 +245,22 @@ describe('kit sx disjointness', () => {
           surface: 'UserListComponent.emptyCell.MuiTableCell.py',
           reason: 'The empty-state message intentionally uses more vertical breathing room than the baseline TableCell default.',
         },
+        {
+          surface: 'SoftChip.root.MuiChip.height',
+          reason: 'SoftChip is a small annotation chip, deliberately auto-height rather than the baseline interactive Chip\'s fixed 32px.',
+        },
+        {
+          surface: 'SoftChip.caveat.MuiChip.borderRadius',
+          reason: 'The caveat variant uses the shared square-ish radius token (shape.borderRadius), not the baseline Chip\'s pill radius.',
+        },
+        {
+          surface: 'SoftChip.caveat.MuiChip.fontSize',
+          reason: 'PRIM-1 token delta: caveat text is 12/500, one weight step above the nearest baseline variant (caption, 12/400). Adding a variant for this is an app-level baseline decision out of scope for this promotion; deliberately left unresolved.',
+        },
+        {
+          surface: 'SoftChip.status.MuiChip.borderRadius',
+          reason: 'The status variant is a pill, matching cockpit\'s existing lane-status pill shape, not the baseline Chip\'s default radius.',
+        },
       ],
     }).findings).toEqual([]);
   });
@@ -505,3 +522,90 @@ describe('off-palette colour reporting', () => {
     expect(result.findings.some(({ reason }) => reason.includes('grey.50'))).toBe(true);
   });
 });
+
+describe('redundant app-side theme values', () => {
+  const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+  it('flags an sx value that already equals the theme, naming the file, line, component and property', () => {
+    const result = reportRedundantThemeValues(
+      [{
+        path: 'src/components/Example.jsx',
+        source: "export function Example() {\n  return <Paper sx={{ borderColor: 'divider' }} />;\n}",
+      }],
+      { theme },
+    );
+
+    expect(result.findings).toEqual([{
+      surface: 'src/components/Example.jsx:2.MuiPaper.borderColor',
+      reason: expect.stringMatching(/MuiPaper.*borderColor.*theme already resolves/),
+    }]);
+  });
+
+  it('does not flag a genuinely different value', () => {
+    const result = reportRedundantThemeValues(
+      [{
+        path: 'src/components/Example.jsx',
+        source: "<Paper sx={{ borderColor: 'error.main' }} />",
+      }],
+      { theme },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
+  it('does not flag a component tag outside the attribution list at all', () => {
+    const result = reportRedundantThemeValues(
+      [{
+        path: 'src/components/Example.jsx',
+        source: "<Box sx={{ borderColor: 'divider' }} />",
+      }],
+      { theme },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
+  it('does not flag a property the theme does not style on an attributable component', () => {
+    // MuiTextField's baseline styleOverrides.root has no borderColor, so this
+    // must fall through the themeValue === undefined branch, not match.
+    const result = reportRedundantThemeValues(
+      [{
+        path: 'src/components/Example.jsx',
+        source: "<TextField sx={{ borderColor: 'divider' }} />",
+      }],
+      { theme },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
+  it('skips a numeric borderRadius rather than false-positive on MUI\'s theme-scale multiplier', () => {
+    // sx={{ borderRadius: 8 }} on a Card actually renders as
+    // theme.shape.borderRadius * 8, not the raw baseline styleOverride value
+    // -- comparing the two numbers directly would be a false positive.
+    const result = reportRedundantThemeValues(
+      [{
+        path: 'src/components/Example.jsx',
+        source: `<Card sx={{ borderRadius: ${theme.components.MuiCard.styleOverrides.root.borderRadius} }} />`,
+      }],
+      { theme },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
+  it('matches the finding shape of its sibling checks', () => {
+    const result = reportRedundantThemeValues(
+      [{ path: 'a.jsx', source: "<Paper sx={{ borderColor: 'divider' }} />" }],
+      { theme },
+    );
+
+    expect(result).toEqual({ findings: expect.any(Array) });
+    expect(result.findings[0]).toEqual({ surface: expect.any(String), reason: expect.any(String) });
+  });
+
+  it('returns no findings and requires a theme', () => {
+    expect(reportRedundantThemeValues([{ path: 'a.jsx', source: "<Paper sx={{ borderColor: 'divider' }} />" }]))
+      .toEqual({ findings: [] });
+  });
+});