Migrate 20 MUI X implementations to MUI X 9 and the adaptable-code convention #12267

Goal

Migrate 20 MUI X implementations of the catalogue from the MUI X 7 API to MUI X 9.16 (React 19, Material 9.5) and restructure each to the adaptable-code convention, on a gemini/* branch. The pipeline then takes every file through its own render, review and merge (impl-generate's adopt mode, in progress), so this batch measures whether a Gemini migration plus an Opus review is cheaper than a full Opus regeneration for the remaining 300 files. Nothing from this branch is merged directly.

Context

• The render stack moved to MUI X 9.16 in deps(js): bump MUI X Charts to 9.16 with React 19 and Material 9.5 #12243. Of 323 muix.tsx files, 164 no longer bundle (the @mui/x-charts/ChartContainer path is gone), 157 render differently (legend hidden prop, v7 legend position and styling, v7 axis and font-size props, removed CSS classes; 67 with a blank axis), 2 render unchanged.
• The current rules for MUI X code are prompts/library/muix.md; its section "MUI X v9 API — the pinned version" lists every API change that matters, and "The harness contract" says how a .tsx file connects to the render harness. The adaptable-code convention is prompts/adaptable-code.md (the JavaScript form: one record array as the data block, role constants, plot code that reads only the constants); the "Data block" section of prompts/library/muix.md has the MUI X example. The general rules of prompts/plot-generator.md and prompts/default-style-guide.md apply (canvas, palette, imprint, sizing in CSS px, animation off).
• Each spec lives in plots/<spec>/specification.md; its current implementation is plots/<spec>/implementations/javascript/muix.tsx. The per-spec measurement of the 20 files is in the table below (which v7 feature each file uses; blank_axis: yes means the file renders on 9 with an empty axis today).
• The harness renders a file locally without credentials: ANYPLOT_THEME=light node automation/js-render/render.mjs plots/<spec>/implementations/javascript/muix.tsx and the same with ANYPLOT_THEME=dark, run from the repository root; it writes plot-light.png / plot-dark.png (3200×1800) next to the file. Node 24 and the root package.json dependencies are needed; install them the way .github/actions/setup-node does: npm ci at the repository root (the root uses package-lock.json, not yarn; app/ is the yarn project) and npx playwright install chromium.
• The pipeline's render check: PYTHON_DOTENV_DISABLED=1 uv run python -c "from core.canvas import check_png; print(check_png('plots/<spec>/implementations/javascript/plot-light.png', 'muix'))" must report ok for both themes.

Steps

• Set up the harness once and render one of the two unchanged files (for example gauge-basic) in both themes to confirm the local setup works.
• For each of the 20 specs, in the table's order, one commit per spec (feat(muix): migrate <spec> to MUI X 9): read the specification and the current file, port the API to MUI X 9 as prompts/library/muix.md describes, restructure the file to the convention (# Data block as one record array, role constants, no hard-coded categories, counts or palette slices in the plot code; the header comment and the imprint stay), keep the existing data scenario and visual design unless the spec or the convention forces a change, render both themes, run the canvas check, and look at both PNGs: axes, ticks, legend, labels and the imprint must be visible and inside the canvas, with no blank axis and no cropped bottom.
• Open the draft PR with a table: spec, what changed (API, convention, data), render result, anything you could not solve.

Constraints

• Change only the 20 files plots/<spec>/implementations/javascript/muix.tsx named in the table. No metadata files, no PNGs or HTML committed (delete the render outputs before committing; git status must show only the 20 .tsx files), no other plots, no prompts, no workflows, no changelog fragment (catalogue-only changes are exempt).
• Keep the header comment's Quality: and Updated: lines as they are; the pipeline rewrites them.
• Keep each file self-contained the way the harness contract requires: a default-exported React component, no manual mount, no network, no animation, sizes from window.ANYPLOT_SIZE, colours from window.ANYPLOT_TOKENS.
• The scenario and the visual variant of the old file stay (same chart type, same story, same data unless it violates the convention or the spec). This is a migration, not a redesign. Where MUI X 9 cannot express something the old file did (read "When MUI X can't express the spec" in the library prompt), choose the documented fallback and say so in the PR table.
• Branch gemini/<issue number>-muix-9-batch1 from origin/main; a draft PR only. The draft is reviewed by Claude and then fed to the pipeline file by file; it is closed afterwards without a merge, so do not expect CI on it to be the acceptance.

Acceptance

For every one of the 20 files, from the repository root:

ANYPLOT_THEME=light node automation/js-render/render.mjs plots/<spec>/implementations/javascript/muix.tsx
ANYPLOT_THEME=dark  node automation/js-render/render.mjs plots/<spec>/implementations/javascript/muix.tsx
PYTHON_DOTENV_DISABLED=1 uv run python -c "from core.canvas import check_png; print(check_png('plots/<spec>/implementations/javascript/plot-light.png', 'muix'), check_png('plots/<spec>/implementations/javascript/plot-dark.png', 'muix'))"

Both renders exit 0 and both canvas checks are ok; the PNGs show every axis, tick label, legend and the imprint; none of the v7 names from prompts/library/muix.md (ChartContainer, ResponsiveChartContainer, DefaultChartsLegend, slotProps.legend.hidden, labelFontSize, tickFontSize, topAxis/leftAxis/bottomAxis/rightAxis, .MuiAreaElement-root, .MuiLineElement-series-*, .MuiBarElement-root, lineElementClasses, itemMarkWidth, markGap, itemGap) remains in the file (grep -nE over the 20 files finds nothing). The existing rules still win where they conflict with a mechanical port: the eight-hue palette order and "never recycle colours", the 3200×1800 canvas with sizes in CSS px, the imprint text, a legend outside the SVG that reserves its own height.

Decide yourself / report back

Decide yourself: how to express a v7 construct in v9 when the library prompt gives the mapping; small data edits the convention needs (for example moving inline arrays into the record array); whether a hidden legend becomes hideLegend or an explicit in-chart legend when the spec asks for one. Report back in the PR table instead of guessing: a spec whose chart type MUI X 9 cannot render at all, a file where keeping the old scenario would violate the spec, a render that passes the canvas check but still looks wrong to you, and any harness or dependency problem on your machine.