feat(muix): add MUI X Charts (community, React framework) as a JavaScript entry

[MarkusNeusinger]

Summary

Add MUI X Charts — the community @mui/x-charts package (MIT) — as a React-framework JavaScript entry. This is the Tier 3 / Phase 4 entry from docs/concepts/library-expansion.md §7, pulled forward, and the third of three issues splitting the JavaScript rollout:

• feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241 — JS runtime + Phase 1 (Chart.js, D3, ECharts). Prerequisite for this issue.
• (sibling) — Highcharts Python → JavaScript migration (Phase 2).
• This issue — MUI X Charts (React framework path).

This is a meta / infrastructure issue, not a spec request — do not apply the spec-request label.

MUI X is NOT a separate language. It is JavaScript with framework: "react" (docs/concepts/library-expansion.md §6: "React / Vue / Svelte / Angular are JavaScript with a framework metadata flag, not separate languages"). language_id stays javascript. This issue is split out from #8241 not for a language reason but because the React/TSX bundling path through the render harness is the single riskiest new technical surface — Chart.js/D3/ECharts/Highcharts are framework: none, plain .js, and don't touch it. Isolating it keeps a React-bundling problem from blocking the framework-agnostic libraries.

Depends on #8241. Reuses the javascript language, the Node + Playwright render harness, the framework field, and the per-library extension mechanism stood up there. The harness's framework: react branch (esbuild/TSX bundling) is the main new code here.

---

Why MUI X (community only)

Per docs/concepts/library-expansion.md §3, §7 (Tier 3 #10), §9:

• @mui/x-charts serves the large MUI / Material UI React dashboard audience — a framework-locked niche the framework-agnostic libs don't reach.
• License: MIT — but only the community package. @mui/x-charts-pro / Premium (advanced zoom & pan, etc.) is commercially licensed and OUT OF SCOPE (§9). Snippets must use only the MIT community surface — same FOSS-first reasoning as the Highcharts/amCharts policy in §6.
• Authored as .tsx (§6: libraries realistically only used in a typed/JSX form are authored as TSX; React is the canonical MUI X usage), exercising the per-library extension override from feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241.

---

Scope

1. Registry (core/constants.py)

• SUPPORTED_LIBRARIES: add "muix" (alpha-sorted).
• LIBRARIES_METADATA entry (verify version against feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241's package-lock.json):

  {"id": "muix", "name": "MUI X Charts", "language_id": "javascript", "framework": "react",
   "version": "7.0", "documentation_url": "https://mui.com/x/react-charts/",
   "file_extension": ".tsx",   # per-library override; language default is .js
   "description": "Charting components for the MUI (Material UI) React ecosystem. The community @mui/x-charts package (MIT) covers bar, line, pie, scatter and more. anyplot uses only the MIT community surface; Pro/Premium features are out of scope."},

• INTERACTIVE_LIBRARIES: add "muix" (SVG, interactive in the browser; HTML-based render path, static PNG for the grid — same model as the other JS libs).
• Confirm the per-library file_extension override + framework field land here cleanly (both mechanisms come from feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241; this is the first react + first .tsx consumer, so it's the real end-to-end test of both).

2. Render harness — the new framework: react path

The framework-agnostic libs (#8241) mount plain JS into #container and screenshot. MUI X needs the React branch of the shared harness:

• The snippet is a .tsx file that default-exports a React component (e.g. a <BarChart .../> from @mui/x-charts).
• The harness esbuild-bundles that entry together with react, react-dom/client, @mui/x-charts, @mui/material, @emotion/react, @emotion/styled (all pinned in feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241's package.json), mounts it into #container via createRoot(...).render(...), waits for render-complete, then Playwright-screenshots at the canvas hard-rule size.
• ANYPLOT_THEME light/dark maps onto a MUI ThemeProvider (createTheme({ palette: { mode } })) so chrome/background/text follow the theme — wrap the exported component or inject the theme in the harness scaffold.
• getBBox/layout note: MUI X relies on real SVG text measurement for axis/legend layout — exactly why the browser-based harness (not jsdom SSR) is required (see feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241's render-strategy rationale). Verify text/legends are not clipped or overlapping at 3200×1800 and 2400×2400.

3. Workflows

• Shared case "$LIBRARY" table: add muix) LANGUAGE=javascript; EXT=.tsx ;; (the .tsx override).
• impl-generate.yml / impl-repair.yml: add muix to library choices; the React bundling runs through the harness (no separate setup beyond setup-node).
• impl-review.yml: canvas-gate hint entry for MUI X (how it hits the exact pixels via the harness viewport × deviceScaleFactor); header-rewrite handles //-prefixed TSX comments (mechanism from feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241).
• bulk-generate.yml: add muix to choices + ALL_LIBRARIES.

4. Prompt

• New prompts/library/muix.md (ggplot2/makie shape):
  • File extension .tsx, runtime node (bundled via the harness).
  • Community-only hard rule: import only from @mui/x-charts — never @mui/x-charts-pro / Premium. List the forbidden Pro imports explicitly.
  • The harness contract: default-export a React component; no manual ReactDOM.render, no inline HTML — the harness mounts and screenshots.
  • ANYPLOT_THEME → MUI ThemeProvider mapping.
  • Canvas hard rule (3200×1800 / 2400×2400).
  • NOT_FEASIBLE for specs the community surface can't express.
  • //-comment header (// Library: MUI X Charts <ver> | React | Node 22).
  • Forbidden patterns: no Pro/Premium imports, no CDN scripts, no other charting libs, no network fetches.
• Extend prompts/plot-generator.md Forbidden section with a MUI X / React note (community surface only); extend the (language, ext, runner) tables in impl-generate-claude.md / impl-repair-claude.md with the javascript | .tsx | (bundled via harness) row.

5. Frontend (app/src/)

• constants/index.ts: LIBRARIES add 'muix' (alpha); LIB_ABBREV muix: 'mui'; LIB_TO_LANG muix: 'javascript'; LIB_TO_FRAMEWORK muix: 'react' (map from feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241); the .tsx suffix via the per-library extension override (feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241).
• CodeHighlighter.tsx: muix highlights as tsx (grammar + TS7016 declaration already added in feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241) — verify.
• LibraryCard.tsx: MUI X description + a React framework badge + MIT-license note.
• "React-compatible" filter: surface the framework field as a frontend filter (per §6 — "all JavaScript libs" vs "React-compatible"). MUI X is currently the only react entry, so this is the filter's first real consumer; build it generically off LIB_TO_FRAMEWORK so Recharts/Vue/etc. slot in later with no schema change.
• DebugPage.tsx: muix column (grid auto-grows via LIBRARIES.length).
• PlotOfTheDay.tsx / PlotOfTheDayTerminal.tsx: runner token for the bundled React path (+ .tsx ext).
• Meta-description copy on Libraries/About/Plots pages bumps the library count by one.

6. Backend (api/)

• specs.py: /api/specs/{spec}/muix/code?language=javascript returns the .tsx impl; sync_to_postgres discovers .tsx under implementations/javascript/ (per-library extension discovery from feat(javascript): add JavaScript runtime + render harness + Chart.js, D3.js, ECharts (Phase 1) #8241 — MUI X is the first .tsx, so verify discovery actually picks it up).
• debug.py / libraries.py: muix entry with framework: react surfaced in /api/libraries.
• /stats library count grows by one.

7. Tests

• tests/unit/core/test_constants.py: assert muix present, language_id == "javascript", framework == "react", file_extension == ".tsx"; bump library-count assertion by one.
• Harness test: the framework: react path renders a non-empty PNG at exact canvas size for a minimal @mui/x-charts component.
• Frontend: CodeHighlighter.test.tsx TSX case for muix; useCodeFetch.test.ts muix + ?language=javascript; a "React-compatible" filter test; DebugPage.test.tsx muix column.

8. Docs

• docs/concepts/library-expansion.md: §1 table grows a MUI X row (framework: react); §8 note Phase 4's MUI X pulled forward; §9 record community-only scope + the React-bundling-harness decision.
• agentic/docs/project-guide.md, prompts/README.md, README.md: MUI X entry + counts.

---

Acceptance criteria

• core/constants.py: muix present, language_id == "javascript", framework == "react", file_extension == ".tsx", in INTERACTIVE_LIBRARIES.
• Render harness framework: react branch esbuild-bundles a default-exported @mui/x-charts component and screenshots it at 3200×1800 / 2400×2400, theme-aware.
• prompts/library/muix.md exists, enforces community-only imports (no @mui/x-charts-pro), and documents the default-export harness contract.
• gh workflow run impl-generate.yml -f specification_id=scatter-basic -f library=muix produces a passing .tsx impl (plot-light.png + plot-dark.png + interactive HTML) in GCS, text/legends not clipped.
• /scatter-basic/javascript/muix loads code (TSX highlighting) + preview in light & dark; ?language=javascript 200s; sync_to_postgres discovered the .tsx file.
• /libraries shows MUI X with a React badge + MIT note; the "React-compatible" filter shows MUI X; /stats library count grew by one.
• /debug matrix has a muix column; clicking deep-links to /{spec}/javascript/muix.
• uv run pytest tests/unit tests/integration green; frontend yarn test --run, yarn tsc --noEmit, yarn lint clean — no TS7016 carry-forward for the TSX grammar.
• docs/concepts/library-expansion.md updated; MUI X (Phase 4) noted as pulled forward, community-only.

---

Out of scope

• @mui/x-charts-pro / Premium — commercially licensed; only the MIT community surface (§9).
• Other React libs (Recharts) / Vue / Svelte / Angular — the framework field + filter built here generalize to them, but no other entries are added.
• First batch of MUI X implementations across existing specs — handled by the regular bulk-generate.yml flow once this lands.

---

Part of the JavaScript rollout split: foundation in #8241, Highcharts migration in its sibling issue. Split out from #8241 for the React/TSX harness path (technical risk isolation), not a language distinction — MUI X stays language_id: javascript. Reviewed against docs/concepts/library-expansion.md §§3/6/7/9.