@micha.bigler/ui-core-micha 2.31.1 → 2.32.0

package/WORK_ORDERS.md

@@ -24,6 +24,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| CHART-7 | `ChartFrame` gains a `titleVariant` prop | Adds `titleVariant` (default `'h6'`, unchanged from today's hardcoded value) to `ChartFrame`, forwarded to the title `Typography` — lets a dense panel grid (e.g. fitness-monitor's seven body-composition panels beside one hero chart) render smaller titles that recede instead of competing with the one chart that matters. One prop, not a `slotProps.title` system — deliberately minimal per the WO. Precondition of fitness-monitor's `FM-12` (DS-10). `2.32.0` (minor, additive). Full spec: [work-orders/CHART-7.md](work-orders/CHART-7.md). | 2026-08-10 | done | 14020d0 | Envelope authored by Expertenchat, no design question (short-form WO). No preconditions. Orchestrator filled a minimal Implementation map (the whole change is two lines in `ChartFrame.jsx`), ran Codex (stdin invocation). Codex added `titleVariant = 'h6'` to the prop destructure, forwarded it to the title `Typography`, wrote all 3 required tests, and bumped `2.31.1` → `2.32.0` per the WO's own stated version target. **Independent `reviewer` + `ui_reviewer` (both Haiku, proportionate to a small low-risk diff) ran concurrently — both found NO findings**, including explicit confirmation that only the prop-destructure line and the one `Typography` line changed (padding, foot row, subtitle/toolbar/slots byte-for-byte unchanged) and that the default-regression test is non-vacuous. Re-verified: 13/13 scoped vitest tests green, `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)**: no existing harness specimen used `titleVariant`, so the Orchestrator added one (two `ChartFrame`s side by side, default vs. `titleVariant="subtitle2"`) to `dev/entries.jsx` — confirmed live at 375px and 1280px that the override renders visibly smaller/lighter than the unchanged h6 default. |
 | THEME-2 | Two defects from the THEME-1/CHART-6 landings: `warning.main` contrast, `grid` replacing instead of merging | Fixes `palette.warning.main` (`#C08A2C`, 3.038:1 on white — fails AA) to `#976100` (the existing `text` tone, ~5.2:1), `contrastText` to `#FFFFFF`; `warning.fill`/`.text`/`.fillText`/`.bg` unchanged. Adds a completeness-assertion rule checking every status channel's `.main` against `#FFFFFF` and `background.default` at 4.5:1. Fixes `BarChart`/`LineChart`'s `grid` prop silently replacing (not merging) a caller's partial grid object; the required audit of sibling object-valued defaults found a second live instance (`legendPosition`, same bug class) and fixed it too. `2.31.1` (patch). Full spec: [work-orders/THEME-2.md](work-orders/THEME-2.md). | 2026-08-10 | done | 7d5039f | Envelope authored by Expertenchat, both defects fully diagnosed up front (no design question). Preconditions (THEME-1 `2.30.0`, CHART-6 `2.31.0`) verified. Orchestrator filled the Implementation map with the exact current-state code pointers for both defects, then ran Codex (stdin invocation). Codex's own audit (per the WO's "close the mechanism" instruction) found the `legendPosition` partial-override bug beyond the named `grid` fix and fixed it too, exactly as the WO anticipated ("fix that too and say so"). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently — both found NO findings**, including the reviewer's own hand-computed contrast check confirming `#976100` clears 4.5:1 against both `#FFFFFF` (~5.22:1) and `background.default` (~5.00:1). One thing the Orchestrator itself fixed (not a reviewer finding): a pre-existing THEME-1 regression test (`tests/createAppTheme.test.js`) asserted `palette[status].main === palette[status].fill` for all four status channels — THEME-2 deliberately breaks that equality for `warning` only (the whole point of the fix), so the assertion was updated to special-case `warning` against its new intended invariant (`main === text`, `contrastText === '#FFFFFF'`) while `success`/`error`/`info` keep the original assertion. Re-verified after the fix: 58/58 scoped + adjacent vitest tests green (`tests/themeCompleteness.test.js`, `tests/chartDefaults.test.js`, `tests/createAppTheme.test.js`, `tests/chartsPalette.test.js`, `tests/BarChart.test.jsx`, `tests/LineChart.test.jsx`, `tests/TimeSeriesChart.test.jsx`), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry — the WO's own point was that no existing specimen exercised `.main` (the `StatusChip`'s `sx={{bgcolor:'...fill'}}` and the `MuiAlert` `standardWarning` override both bypass it), so a new Button/Chip/`Alert variant="filled"` specimen row was added and confirmed live at 375px and 1280px: the warning tone now renders visibly darker (brown, white text) than the still-unchanged lighter-amber `fill`-based chip beside it. The "Caller overrides" `LineChart` specimen's `grid` prop was also changed from a complete `{horizontal:true,vertical:true}` object (which wouldn't have visually proven the merge) to a genuinely partial `{vertical:true}` one — confirmed live at both widths showing BOTH grid directions post-fix. |
 | CHART-6 | Chart-chrome defaults in the three wrappers, plus two generic fixes hoisted up | Closes the chart-chrome default surface in `BarChart`/`LineChart`/`TimeSeriesChart`: baseline tick font size (from `theme.typography.caption`), a horizontal grid, `showMark:false` with a filled-marker fix when a caller opts markers back in, automatic bottom-margin growth for rotated tick labels, a new `legendPosition` prop (default bottom-start), and `TimeSeriesChart`'s own toolbar becoming the sole legend (MUI's redundant second legend removed). Hoists `chartLabels.js` (short granularity-aware tick-label formatters) and a generalised `yearTickInterval` from fitness-monitor. `2.31.0`. Full spec: [work-orders/CHART-6.md](work-orders/CHART-6.md). | 2026-08-10 | done | 6dedc62 | Envelope authored by Expertenchat (DS-4). Precondition (THEME-1 landed + published `2.30.0`) verified before start. Orchestrator filled the Implementation map with concrete MUI X-Charts source pointers (installed `8.29.2`, not the WO's stated `8.28.2` — flagged and verified against the actual installed source throughout), then ran Codex (stdin invocation, same as THEME-1). Codex implemented `src/components/charts/{chartDefaults,chartLabels,yearTickInterval}.js`, wired all three wrappers, wrote the 10 required tests, and used a wrapper-level `slots.mark` composition for the filled-marker fix (a deliberate, now-documented deviation from the WO's named `MuiMarkElement` theme-token mechanism — the wrapper-level fix applies to all 14 consumers immediately on this version bump, not only to apps that separately adopt `createAppTheme`). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently.** `reviewer` found **R1 (P2)** — the marker-fill deviation from the WO's specified mechanism was undocumented; fixed with an explanatory code comment (functionally correct either way, this was a disclosure gap, not a bug). `ui_reviewer` found **U1 (P3)** — `SeriesToggleDot`'s 12px dot used hardcoded pixels instead of `theme.spacing()`; fixed. Both reviewers otherwise found the six highest-risk invariants (default-vs-caller-override merge order, filled markers, rotated-tick margin math, the double-legend fix, `yearTickInterval`'s generalisation, `skipAnimation` passthrough) correct and non-vacuously tested. **A third, more serious bug was found by the Orchestrator's own DS-1 two-width rendered check (not by either reviewer, since both are static-diff reviews)**: `withAxisDefaults` in `chartDefaults.js` only applied `defaults.scaleType` when the caller passed NO `xAxis`/`yAxis` array at all — a caller-supplied axis with `data` but no explicit `scaleType` (exactly what the new dev-harness "Chart defaults" `LineChart` specimen used) silently lost the wrapper's `'point'`/`'band'` scale default entirely, leaving MUI's scale undefined and every rendered line/point position `NaN` (`<path> attribute d: Expected number, "MNaN,...`, confirmed live via `read_console_messages` and only reproducible through a real MUI scale computation — a mocked prop-assertion test structurally cannot catch it, the same class of bug CHART-1/3/4/5 have each found before in this kit). Fixed by spreading `defaults` before `axis` in the per-axis merge (caller's own explicit `scaleType`, if any, still wins); a new regression test added (`tests/chartDefaults.test.js`, "keeps the default scaleType on a caller-supplied axis that does not set one"), confirmed against both `BarChart`'s `'band'` and `LineChart`'s `'point'` defaults. Re-verified after all three fixes: 44/44 scoped vitest tests green (10 new + 34 existing adjacent chart tests, no regressions), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry (which now also carries the two new `LineChart` chart-chrome specimens per the WO's "at least one chart that set the props and one that did not" requirement) at 375px and 1280px — confirmed live: correct line rendering (post-fix), filled markers on the caller-override chart, horizontal grid, bottom-start vs. caller-chosen legend position, and rotated tick labels with adequate margin at 1280px. |
 | THEME-1 | Shared MUI theme baseline: `createAppTheme` factory + completeness assertion | Ships `createAppTheme(appConfig)` (palette-first merge of a fixed light-mode baseline with the app's own `palette`/`typography`/`components`; throws without `palette.primary`; throws on a function anywhere in `appConfig.components.*.styleOverrides`), an exported `assertThemeComplete` completeness assertion with an exemption arm and contrast checks (status text-on-own-tint, `controlBorder` on white + page background), a non-breaking chart-ramp fallback in `useNeutralChartPalette` (adopters get the theme's `dataSeries` ramp, non-adopters see byte-identical output), a new "Shared theme baseline" dev-harness entry, and `DESIGN.md` principles 1/8 reworded per the accepted policy change (ucm now ships a shared theme; the data-colour layer has a shared default). Full spec: [work-orders/THEME-1.md](work-orders/THEME-1.md). | 2026-08-10 | done | b329b39, 96992cf | Envelope authored by Expertenchat from the accepted reference sheet (`work-orders/assets/THEME-1-baseline-reference-sheet.html`, DS-2 decisions 1–23). Orchestrator filled the Implementation map, then ran Codex (stdin, not positional arg — the WO text exceeded Windows' command-line length limit via the npm shim, "Argument list too long"; `codex exec ... -` reading the WO from stdin is the working invocation for large WOs on this platform). Codex implemented `src/theme/{tokens,createAppTheme,themeCompleteness,index}.js`, wrote all 13 required tests + extended `tests/chartsPalette.test.js`, updated `src/index.js` exports, `DESIGN.md`, `package.json` (2.29.2→2.30.0, new `@fontsource/dm-sans` dependency — WO-scoped, no separate approval needed), and the dev harness. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently. `ui_reviewer`: no findings.** `reviewer` found three, all confirmed real and fixed by the Orchestrator: **R1 (P2)** — MUI's `createTheme(options, ...args)` only runs palette augmentation on the FIRST argument; every later arg (how the baseline was layered in) is deep-merged raw, so `success`/`warning`/`error`/`info` — which had `text`/`fill`/`fillText`/`bg` but no `main`/`contrastText` — silently kept MUI's own stock hues for any standard `color="success"` usage. Verified live via a Node repro (`createTheme({...},{palette:BASELINE_PALETTE},{...})` on the pre-fix baseline produced `success.main:'#2e7d32'`, MUI's stock green, not the canonical `#1B8038`). Fixed: explicit `main`/`light`/`dark`/`contrastText` added to all four status channels (`light`/`dark` computed via MUI's own `lighten`/`darken` at the same 0.2/0.3 tonal offsets `augmentColor` uses), plus a new regression assertion in `tests/createAppTheme.test.js`. **R2 (P3)** — `controlBorder.focus` was derived to clear 3:1 only against `background.paper`, while `assertThemeComplete`'s own contrast check tests it against `#FFFFFF` and `background.default` — an app overriding either background could pass the derivation and still fail the assertion. Fixed: derivation now targets both surfaces. **R3 (P3)** — `MuiOutlinedInput`'s `variants` array was nested inside `styleOverrides.root` instead of as a sibling key; MUI never reads `variants` from inside `styleOverrides` (it's matched by `props` independently), so the entry was inert dead code, and it also meant the function-in-`styleOverrides` guard's own suggested escape hatch ("use MUI variants") was structurally unreachable from inside `styleOverrides`. Fixed: moved to the correct sibling placement; updated the one test and the one completeness-surface path that referenced the old (wrong) location. Re-verified after fixes: 15/15 scoped vitest tests green (`tests/createAppTheme.test.js`, `tests/themeCompleteness.test.js`, `tests/chartsPalette.test.js`), `tsc -p tsconfig.build.json --noEmit` clean. Orchestrator's own security/scope pass: no findings (only the WO-approved `@fontsource/dm-sans` dependency addition, no secrets, no scope creep). **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's new "Theme / Shared baseline" entry at 375px and 1280px — both screenshots confirm radius (3/8), no resting shadow on Paper/Card, correct status fill/text/bg tones, and the six-colour series ramp, consistent with the reference sheet. No app pin bumps in this WO — all 14 consumers pin exact versions and pick this up on their own adoption WO. |

package/dev/entries.jsx

@@ -223,6 +223,19 @@ function ThemeBaselineEntry() {
           />
         </ChartFrame>
       </Stack>
+
+      <Stack
+        direction="column"
+        spacing={2}
+        sx={{ '@container (min-width: 900px)': { flexDirection: 'row' } }}
+      >
+        <ChartFrame title="Default titleVariant" subtitle="h6, unchanged for existing callers" minHeight={160}>
+          <Typography variant="body2" color="text.secondary">Panel body placeholder</Typography>
+        </ChartFrame>
+        <ChartFrame title="Dense panel title" subtitle="titleVariant=&quot;subtitle2&quot;" titleVariant="subtitle2" minHeight={160}>
+          <Typography variant="body2" color="text.secondary">Panel body placeholder</Typography>
+        </ChartFrame>
+      </Stack>
     </Stack>
   );
 }

package/dist/components/charts/ChartFrame.js

@@ -6,7 +6,7 @@ import { exportChartPng, exportChartSvg } from './exportChart';
 /**
  * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
  */
-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', sx, }) {
+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, }) {
     const { t } = useTranslation();
     const titleId = useId();
     const chartRef = useRef(null);
@@ -40,7 +40,7 @@ export function ChartFrame({ title, subtitle, toolbar, controls, loading = false
     else if (isEmpty) {
         content = _jsx(Alert, { severity: "info", children: emptyMessage || t('ChartFrame.EMPTY_DEFAULT') });
     }
-    return (_jsxs(Paper, { variant: variant, sx: Object.assign({ p: 2 }, sx), children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: "h6", children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
+    return (_jsxs(Paper, { variant: variant, sx: Object.assign({ p: 2 }, sx), children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }, children: [_jsxs(Box, { children: [_jsx(Typography, { id: titleId, variant: titleVariant, children: title }), subtitle && _jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })] }), toolbar && _jsx(Box, { children: toolbar })] }), controls && _jsx(Box, { sx: { mb: 2 }, children: controls }), _jsx(Box, { ref: chartRef, role: "img", "aria-label": chartLabel, "aria-labelledby": hasCustomAriaLabel ? undefined : titleId, sx: {
                     width: '100%',
                     minHeight,
                     aspectRatio: aspect,

package/package.json

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

package/src/components/charts/ChartFrame.jsx

@@ -32,6 +32,7 @@ export function ChartFrame({
   ariaLabel,
   children,
   variant = 'outlined',
+  titleVariant = 'h6',
   sx,
 }) {
   const { t } = useTranslation();
@@ -71,7 +72,7 @@ export function ChartFrame({
     <Paper variant={variant} sx={{ p: 2, ...sx }}>
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 2 }}>
         <Box>
-          <Typography id={titleId} variant="h6">{title}</Typography>
+          <Typography id={titleId} variant={titleVariant}>{title}</Typography>
           {subtitle && <Typography variant="body2" color="text.secondary">{subtitle}</Typography>}
         </Box>
         {toolbar && <Box>{toolbar}</Box>}

package/tests/ChartFrame.test.jsx

@@ -55,6 +55,48 @@ function renderFrame(props = {}, language = 'en') {
 describe('ChartFrame', () => {
   afterEach(cleanup);
 
+  it('renders the title as h6 by default', () => {
+    renderFrame();
+
+    const title = screen.getByText('Chart title');
+    expect(title.tagName).toBe('H6');
+    expect(title.classList.contains('MuiTypography-h6')).toBe(true);
+  });
+
+  it('renders the title at an overridden typography variant', () => {
+    renderFrame({ titleVariant: 'subtitle2' });
+
+    const title = screen.getByText('Chart title');
+    expect(title.classList.contains('MuiTypography-subtitle2')).toBe(true);
+    expect(title.classList.contains('MuiTypography-h6')).toBe(false);
+  });
+
+  it('leaves the subtitle, toolbar, and footer unchanged for either title variant', () => {
+    for (const titleVariant of [undefined, 'subtitle2']) {
+      const view = renderFrame({
+        titleVariant,
+        toolbar: <button type="button">Period selector</button>,
+        meta: 'Panel metadata',
+        exportOptions: true,
+      });
+
+      const subtitle = screen.getByText('Chart subtitle');
+      expect(subtitle.tagName).toBe('P');
+      expect(subtitle.classList.contains('MuiTypography-body2')).toBe(true);
+      expect(screen.getByRole('button', { name: 'Period selector' })).toBeTruthy();
+
+      const metaNode = screen.getByText('Panel metadata');
+      expect(metaNode.classList.contains('MuiTypography-caption')).toBe(true);
+      const foot = metaNode.parentElement;
+      expect(foot.contains(screen.getByRole('button', { name: 'Export SVG' }))).toBe(true);
+      expect(foot.contains(screen.getByRole('button', { name: 'Export PNG' }))).toBe(true);
+      expect(window.getComputedStyle(foot).justifyContent).toBe('space-between');
+      expect(window.getComputedStyle(foot).borderTopStyle).toBe('solid');
+
+      view.unmount();
+    }
+  });
+
   it('renders its title, subtitle, toolbar, and accessible chart region', () => {
     renderFrame({ toolbar: <button type="button">Period selector</button> });
 

package/tests/NotificationsProvider.test.jsx

@@ -90,7 +90,11 @@ describe('NotificationsProvider', () => {
       expect.objectContaining({ id: 1, notification_id: 101, seen: false }),
       expect.objectContaining({ id: 2, notification_id: 102, dismissed: false }),
     ]));
-    expect(MockWebSocket.instances).toHaveLength(1);
+    // `seeded` (which gates the socket connect) flips in refresh()'s .finally(),
+    // one tick after unreadCount is set -- so the socket can still be unopened
+    // right when the unread-count waitFor above resolves. Wait for it directly
+    // instead of asserting synchronously.
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
   });
 
   it('prepends a new notification push and increments the unread count', async () => {

package/work-orders/CHART-7.md

@@ -0,0 +1,175 @@
+# CHART-7 — `ChartFrame` gains a `titleVariant` prop
+
+**Target repo:** `ui-core-micha` (branch `main` — this repo has no `develop`)
+**Tier:** 2 (shared core)
+**Review:** independent `reviewer` **and** `ui_reviewer` — spawned concurrently, both mandatory before commit
+**Version target:** `2.32.0` — minor: a new public prop is additive API under semver, consistent with how `SHELL-2` classified `extraTabs` gaining a field
+**Precondition of:** `fitness-monitor`'s `FM-12` (DS-10)
+
+Short-form WO: one prop, one default, no design question.
+
+---
+
+## A. Envelope
+
+### Goal
+
+`ChartFrame` hard-codes its title as `<Typography variant="h6">` (`src/components/charts/ChartFrame.jsx:74`)
+and exposes no way to change it. Add a `titleVariant` prop, defaulting to `'h6'` so nothing changes for
+any existing caller.
+
+### Why this is a kit gap and not one app's problem
+
+A card title and a **panel-grid** title are different typographic jobs. In a dense grid the titles must
+recede so they do not compete with the one chart that matters; at `h6` they do not. Concretely:
+fitness-monitor renders six body-composition panels next to one hero chart, and its accepted prototype
+specifies `13px/600` for those six against `15px/600` for the hero
+(`fitness-monitor/work-orders/assets/FM-8-redesign.html:237` vs `:184`). Today all seven render at the
+same `h6`, and **six oversized titles beside a hero chart was one of the original "reads heavier and
+older" findings** that started this programme.
+
+The app cannot reach it: there is no prop, and `ChartFrame`'s title is not exposed through `slotProps`
+either. Any app with a dense panel grid hits the same wall — hram's results tabs are the obvious next
+one — so this belongs in the kit rather than being worked around per app.
+
+### Scope
+
+- `ChartFrame` accepts `titleVariant`, forwarded to the title `Typography`. **Default `'h6'`.**
+- Keep it minimal: **one prop, not a `slotProps.title` system.** There is one known need; a general slot
+  mechanism for one consumer is the speculative generality this estate's promotion discipline rejects.
+  If a second, different need appears, that is when the shape gets revisited.
+
+### Non-goals / do not touch
+
+- The subtitle, toolbar, controls, loading/error/empty slots and the export footer — untouched.
+- `ChartFrame`'s `p: 2` padding and its foot row: **byte-for-byte unchanged.** 16 panels depend on them.
+- The baseline's `h6` value (16px/600). This WO changes *which* variant a caller may pick, not what the
+  variants are.
+- The chart wrappers. No `LineChart`/`BarChart`/`TimeSeriesChart` change.
+- No behaviour, permission or data-contract change.
+
+### Risks
+
+- **`ChartFrame` is the estate's most-used chart primitive** — five of hram's six hand-drawn panels use
+  it, plus every wrapper chart. The default must remain `'h6'`; a changed default would silently restyle
+  every title in the estate on the next pin bump.
+- **No staging net.** A push to `main` touching `src/**` publishes to npm at once; the independent review
+  is the only gate and is not back-fillable.
+
+### Required tests to WRITE
+
+Extend the existing `ChartFrame` spec rather than adding a file.
+
+1. With no `titleVariant`, the title renders as `h6` — **prove non-vacuity** by changing the default and
+   confirming this fails. This is the regression guard for all 16 existing panels.
+2. `titleVariant="subtitle2"` renders the title at that variant.
+3. The subtitle, toolbar and footer render unchanged in both cases.
+
+Plus `tsc -p tsconfig.build.json --noEmit` clean.
+
+**No full-suite run.** Affected-areas set is the `ChartFrame` spec.
+
+### Verification
+
+The rendered two-width side-by-side per DS-1, showing a `ChartFrame` at the default and one with an
+overridden variant side by side — so the "default unchanged" claim is visible and not only asserted.
+
+### Preconditions
+
+None. `THEME-2` (`2.31.1`) is the current published version.
+
+### Parity guardrail
+
+Purely additive. Every existing caller must render identically — that is what test 1 guards.
+
+---
+
+## B. Implementation map
+
+*Filled by the Orchestrator on `git pull` — see AGENTS.md → "Work Order".*
+
+### Execution directive (read this first)
+
+> **If you are the implementer reading this work order as your own specification: this section is
+> NOT addressed to you.** It tells the Orchestrator how to invoke you. **You ARE that invocation —
+> do NOT shell out to `codex exec`.**
+>
+> Implement through `codex exec` in the background — invoked directly via Bash (never the
+> `debugger`/`*_coder` Agent wrappers) with BOTH flags `--skip-git-repo-check` and
+> `--dangerously-bypass-approvals-and-sandbox`. **Pass the WO via stdin, not as a positional
+> argument** — `cat work-orders/CHART-7.md | codex exec --skip-git-repo-check
+> --dangerously-bypass-approvals-and-sandbox -` (a positional arg hits Windows' command-line length
+> limit — proven repeatedly in this repo). Fallback to direct Claude implementation only on Codex
+> quota/rate-limit/non-zero exit.
+
+### Context package
+
+Verified 2026-08-10, current state: `src/components/charts/ChartFrame.jsx:17-35` (prop destructure)
+and `:74` (the hardcoded title):
+```jsx
+export function ChartFrame({
+  title,
+  subtitle,
+  toolbar,
+  ...
+  variant = 'outlined',
+  sx,
+}) {
+  ...
+  <Typography id={titleId} variant="h6">{title}</Typography>
+```
+
+**Named file to change:** add `titleVariant = 'h6'` to the destructured props (alongside `variant =
+'outlined'`, same style) and change line 74 to `<Typography id={titleId} variant={titleVariant}>
+{title}</Typography>`. That is the entire implementation — no other file needs to change (the WO is
+explicit: no `slotProps` system, no wrapper changes).
+
+**Test file:** `tests/ChartFrame.test.jsx` — extend, don't create a new file. Read the file in full
+first (it already has an i18n/theme harness at the top, shown above) and follow its existing render
+helper/assertion style. Add the 3 required tests: (1) default renders `variant="h6"` on the title
+`Typography` — assert via the rendered DOM (e.g. the title element's tag is `<h6>` or its MUI class
+contains `MuiTypography-h6`), proven non-vacuous by temporarily changing the default to something
+else and confirming the test fails, then restoring it; (2) `titleVariant="subtitle2"` renders the
+title at that variant; (3) subtitle/toolbar/footer render unchanged in both the default and
+overridden case (a plain equality/snapshot-style check between the two renders' non-title markup, or
+explicit assertions that subtitle/toolbar/footer content and structure are present and identical —
+your call on the exact mechanism, the WO doesn't prescribe one).
+
+### Do-not-touch / invariants
+
+- `ChartFrame`'s `p: 2` padding and its foot row — byte-for-byte unchanged.
+- The baseline's `h6` value itself (16px/600, from THEME-1) — untouched; this WO changes which
+  variant a caller may pick, not what the variants are.
+- No `LineChart`/`BarChart`/`TimeSeriesChart` change.
+- Subtitle, toolbar, controls, loading/error/empty slots, export footer — untouched behaviour.
+
+### Target repo working directory (absolute)
+
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`
+
+### Required tests to WRITE (Codex writes them; the Orchestrator runs them)
+
+Exactly the 3 tests above in `tests/ChartFrame.test.jsx`, plus `tsc -p tsconfig.build.json --noEmit`
+clean. No full-suite run — affected-areas set is the `ChartFrame` spec alone.
+
+### Preamble (append verbatim)
+
+> The text above is the COMPLETE spec — the committed WO file's content, not a plan to refine; there
+> is no separate plan file. Read the nearest `AGENTS.md`, the relevant `.codex/skills/<role>/SKILL.md`, and the
+> app `MEMORY.md` ONLY for conventions. Stay in scope; do not touch auth/permissions/deps/schema/CI
+> unless the spec says so; do not update `MEMORY.md`. Do NOT `git add`/`commit`/`push` — leave every
+> change uncommitted in the working tree for the orchestrator's independent review. WRITE the tests
+> the `Required tests` section calls for AND **RUN the tests you just wrote** to confirm they execute
+> and pass — that is the ONLY test run you do (NOT the app's affected/full suite, NOT any review).
+> The orchestrator re-runs the authoritative set + does the independent review after you finish —
+> those are the gate; your own run does not count as the gate.
+>
+> Narrate continuously: a `PLAN: <step1> | <step2> | …` line up front, then a single-line
+> `PROGRESS: [<n>/<total>] <present-tense action>` before every relevant action (and `… done` on
+> completion), spaced so no gap exceeds ~2 min, stdout unbuffered, plus exactly one final
+> `RESULT: DONE|BLOCKED <reason>`.
+
+### Mini-handover
+
+Repo: `ui-core-micha` (`C:\Users\biglmi\Documents\webapps\ui-core-micha`), branch `main`. WO:
+`work-orders/CHART-7.md`. Follow `orchestrate-codex`.