From 9a08fe9027e05cd1c90226e6b2f47ccaff3be383 Mon Sep 17 00:00:00 2001 From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com> Date: Fri, 23 Oct 2026 12:00:31 +0200 Subject: [PATCH 1/3] deps(js): bump MUI X Charts to 9.16 with React 19 and Material 9.5 The JS render harness pins @mui/x-charts 9.16.0, @mui/material 9.5.0 and react / react-dom 19.3.1 (from 7.29.1, 5.18.0 and 18.3.1), the React and Material versions the frontend already runs. Installed with npm; emotion stays on 11.14.x, which satisfies the new peer ranges. prompts/library/muix.md moves its API level to MUI X Charts 9, the major the lock now pins (tests/unit/core/test_version_sources.py), and gains a "MUI X v9 API" section covering what breaks or silently restyles generated code (ChartsContainer, hideLegend and the legend position values, the HTML legend's extra height, position "none" for axes, per-chart CSS classes and [data-series], line-mark defaults). The Sizing section adds the explicit axis height/width rule, because v9 truncates tick labels that overflow the axis band, and both code examples subtract the legend band. The displayed version now comes from the lock, so core/constants.py is unchanged. render.mjs and the setup-node guard component need no change: the guard renders 3200x1800 under the new stack. Existing MUI X implementations were written for v7. Under v9, 164 of 323 no longer bundle (mostly the removed @mui/x-charts/ChartContainer path), and 157 of the 159 that render change. The owner decided on 2026-10-23 to merge and regenerate all MUI X implementations. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_0175hA62juZoajMcqKxWFGza --- changelog.d/muix-9.md | 17 ++ package-lock.json | 601 +++++++++++++++------------------------- package.json | 8 +- prompts/library/muix.md | 67 ++++- 4 files changed, 300 insertions(+), 393 deletions(-) create mode 100644 changelog.d/muix-9.md diff --git a/changelog.d/muix-9.md b/changelog.d/muix-9.md new file mode 100644 index 00000000000..fb8cafb3a2a --- /dev/null +++ b/changelog.d/muix-9.md @@ -0,0 +1,17 @@ +### Changed + +- **MUI X implementations are generated against @mui/x-charts 9.16, React 19 + and @mui/material 9.5.** The pinned render stack in the root `package.json` + moves up from @mui/x-charts 7.29.1, React 18.3.1 and @mui/material 5.18.0, + matching the React and Material versions the frontend already runs. + `prompts/library/muix.md` gains a "MUI X v9 API" section on the changes that + break or silently restyle generated code: `ChartsContainer` instead of + `ChartContainer`, `hideLegend` and the new legend position values, the HTML + legend's extra height, `position: "none"` instead of `leftAxis={null}`, the + per-chart CSS classes and `[data-series]`, and the line-mark defaults. The + Sizing section adds that each axis needs an explicit `height` or `width` once + its fonts grow, because v9 truncates tick labels that don't fit its band. + The render harness itself needed no change. Existing MUI X implementations + were written for v7: 164 of 323 no longer bundle under v9, and most of the + rest render differently, so they need regeneration before they can be + re-rendered. diff --git a/package-lock.json b/package-lock.json index ae09298e0a5..cd77b5323c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,14 +11,14 @@ "dependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", - "@mui/material": "5.18.0", - "@mui/x-charts": "7.29.1", + "@mui/material": "9.5.0", + "@mui/x-charts": "9.16.0", "chart.js": "4.4.7", "d3": "7.9.0", "echarts": "6.1.0", "highcharts": "13.1.1", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.3.1", + "react-dom": "19.3.1" }, "devDependencies": { "esbuild": "0.28.1", @@ -167,6 +167,28 @@ "node": ">=6.9.0" } }, + "node_modules/@base-ui/utils": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.5.0.tgz", + "integrity": "sha512-dYGGcEttjkYiMoa5nHm8vLaJ2UcuTWxo3BFAwOYXeRg/q7UVVvA6cacEIXEs3FgBfK1CGtW1ptElqs7wsx+t9A==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.29.7 || ^8.0.0", + "@floating-ui/utils": "^0.2.12", + "reselect": "^5.3.0", + "use-sync-external-store": "^1.7.0" + }, + "peerDependencies": { + "@types/react": "^17 || ^18 || ^19", + "react": "^17 || ^18 || ^19", + "react-dom": "^17 || ^18 || ^19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.13.5", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz", @@ -755,6 +777,12 @@ "node": ">=18" } }, + "node_modules/@floating-ui/utils": { + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz", + "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==", + "license": "MIT" + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -797,9 +825,9 @@ "license": "MIT" }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.18.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.18.0.tgz", - "integrity": "sha512-jbhwoQ1AY200PSSOrNXmrFCaSDSJWP7qk6urkTmIirvRXDROkqe+QwcLlUiw/PrREwsIF/vm3/dAXvjlMHF0RA==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-9.5.0.tgz", + "integrity": "sha512-PErEpl3Lp+1ZqWYKI7GQU8XSiciAFmLbUAZ7IoaUL598HLy1UAFuEUMEJu8yAS1v8vkXYzWprMVZzky4UwXoOA==", "license": "MIT", "funding": { "type": "opencollective", @@ -807,26 +835,26 @@ } }, "node_modules/@mui/material": { - "version": "5.18.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.18.0.tgz", - "integrity": "sha512-bbH/HaJZpFtXGvWg3TsBWG4eyt3gah3E7nCNU8GLyRjVoWcA91Vm/T+sjHfUcwgJSw9iLtucfHBoq+qW/T30aA==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.5.0.tgz", + "integrity": "sha512-QgqvdVjZoKxP8E8SBxYY6LrdV+kw00moXweZQWBbMMdifPKZAGfUaaXhGKIca6fjKnCL6HJIe/AWWCpqNvyHVw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.18.0", - "@mui/system": "^5.18.0", - "@mui/types": "~7.2.15", - "@mui/utils": "^5.17.1", + "@babel/runtime": "^7.29.7 || ^8.0.5", + "@mui/core-downloads-tracker": "^9.5.0", + "@mui/system": "^9.5.0", + "@mui/types": "^9.5.0", + "@mui/utils": "^9.5.0", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "@types/react-transition-group": "^4.4.12", + "clsx": "^2.1.1", + "csstype": "^3.2.3", "prop-types": "^15.8.1", - "react-is": "^19.0.0", + "react-is": "^19.3.0", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -835,6 +863,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", + "@mui/material-pigment-css": "^9.5.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -846,104 +875,7 @@ "@emotion/styled": { "optional": true }, - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/private-theming": { - "version": "5.17.1", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.17.1.tgz", - "integrity": "sha512-XMxU0NTYcKqdsG8LRmSoxERPXwMbp16sIXPcLVgLGII/bVNagX0xaheWAwFv8+zDK7tI3ajllkuD3GZZE++ICQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.17.1", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/styled-engine": { - "version": "5.18.0", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.18.0.tgz", - "integrity": "sha512-BN/vKV/O6uaQh2z5rXV+MBlVrEkwoS/TK75rFQ2mjxA7+NBo8qtTAOA4UaM0XeJfn7kh2wZ+xQw2HAx0u+TiBg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.13.5", - "@emotion/serialize": "^1.3.3", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.4.1", - "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/system": { - "version": "5.18.0", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.18.0.tgz", - "integrity": "sha512-ojZGVcRWqWhu557cdO3pWHloIGJdzVtxs3rk0F9L+x55LsUjcMUVkEhiF7E4TMxZoF9MmIHGGs0ZX3FDLAf0Xw==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.17.1", - "@mui/styled-engine": "^5.18.0", - "@mui/types": "~7.2.15", - "@mui/utils": "^5.17.1", - "clsx": "^2.1.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.5.0", - "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { + "@mui/material-pigment-css": { "optional": true }, "@types/react": { @@ -952,14 +884,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "7.3.11", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.11.tgz", - "integrity": "sha512-9B+YKms0fRHbNrqp9tOT/DNbNnU5gyvJ1o3qAGXfq8GmZcbJnE3At9x07Zr/o0pkhzg4aDdwXVqe4+AcgtOCPA==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-9.5.0.tgz", + "integrity": "sha512-UHZKySlr4ZJeA5HEhe/Tq1fhsR5573ViKYn7JV80dCVJtgqRQIplRSer1DHPg2Yi22llX7QRhgM0Vtrx4kZHSA==", "license": "MIT", - "peer": true, "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/utils": "^7.3.11", + "@babel/runtime": "^7.29.7 || ^8.0.5", + "@mui/utils": "^9.5.0", "prop-types": "^15.8.1" }, "engines": { @@ -979,63 +910,13 @@ } } }, - "node_modules/@mui/private-theming/node_modules/@mui/types": { - "version": "7.4.12", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz", - "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/runtime": "^7.28.6" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/private-theming/node_modules/@mui/utils": { - "version": "7.3.11", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz", - "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/types": "^7.4.12", - "@types/prop-types": "^15.7.15", - "clsx": "^2.1.1", - "prop-types": "^15.8.1", - "react-is": "^19.2.3" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/styled-engine": { - "version": "7.3.10", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.10.tgz", - "integrity": "sha512-WxE9SiF8xskAQqGjsp0poXCkCqsoXFEsSr0HBXfApmGHR+DBnXRp+z46Vsltg4gpPM4Z96DeAQRpeAOnhNg7Ng==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-9.5.0.tgz", + "integrity": "sha512-IX1ceHnZ0bJgzJRWO/Ayl4ME1rNmpWVYwV28yb089UAMR17rJkV1qfr7ApsWQXXPi1oi+2JapJrWQAiAnTlJHQ==", "license": "MIT", - "peer": true, "dependencies": { - "@babel/runtime": "^7.28.6", + "@babel/runtime": "^7.29.7 || ^8.0.5", "@emotion/cache": "^11.14.0", "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", @@ -1064,17 +945,16 @@ } }, "node_modules/@mui/system": { - "version": "7.3.11", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.11.tgz", - "integrity": "sha512-7izwGWdNawAKpBKcRlx7f2gFnAAjmASBWvMcyX4YYEeLOFsbfGRbUYGInvnAcUeql3rPxI7F9Ft4oY2OLRz44g==", + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-9.5.0.tgz", + "integrity": "sha512-OZuAwvoiaaHpvn0a540VH1DUwwmojJubGfNmO2g+nb2ybNDP4/gF7t7aA6AMduELSuJ5yxwlzyFvUO3CfLv1Yg==", "license": "MIT", - "peer": true, "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/private-theming": "^7.3.11", - "@mui/styled-engine": "^7.3.10", - "@mui/types": "^7.4.12", - "@mui/utils": "^7.3.11", + "@babel/runtime": "^7.29.7 || ^8.0.5", + "@mui/private-theming": "^9.5.0", + "@mui/styled-engine": "^9.5.0", + "@mui/types": "^9.5.0", + "@mui/utils": "^9.5.0", "clsx": "^2.1.1", "csstype": "^3.2.3", "prop-types": "^15.8.1" @@ -1104,14 +984,13 @@ } } }, - "node_modules/@mui/system/node_modules/@mui/types": { - "version": "7.4.12", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.12.tgz", - "integrity": "sha512-iKNAF2u9PzSIj40CjvKJWxFXJo122jXVdrmdh0hMYd+FR+NuJMkr/L88XwWLCRiJ5P1j+uyac25+Kp6YC4hu6w==", + "node_modules/@mui/types": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-9.5.0.tgz", + "integrity": "sha512-O0S6xS80qEQqW2CYNrd4GlBEQ1xpMOHZ5b4zO/DaLu6NZmtthM6smEg0Gz/u9gX5vL+8NB3EiBIxmxSCcG590Q==", "license": "MIT", - "peer": true, "dependencies": { - "@babel/runtime": "^7.28.6" + "@babel/runtime": "^7.29.7 || ^8.0.5" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1122,19 +1001,18 @@ } } }, - "node_modules/@mui/system/node_modules/@mui/utils": { - "version": "7.3.11", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.11.tgz", - "integrity": "sha512-XTjGnifwteg71/ij+0e7Y7d+hwyntMYP5wPoA/g2drdGH+Flkvjwy0OfrVpKBbaOvofq4zU/LIyUZyKgmWu18g==", + "node_modules/@mui/utils": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-9.5.0.tgz", + "integrity": "sha512-8m0LfSgE2pj58znY3kZ+anwRKbnBkcu/7AJPA8L/77wEjN0QnpX4/zRAccyplp1VEUnMsUBADeTRin5Mkf7epA==", "license": "MIT", - "peer": true, "dependencies": { - "@babel/runtime": "^7.28.6", - "@mui/types": "^7.4.12", + "@babel/runtime": "^7.29.7 || ^8.0.5", + "@mui/types": "^9.5.0", "@types/prop-types": "^15.7.15", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^19.2.3" + "react-is": "^19.3.0" }, "engines": { "node": ">=14.0.0" @@ -1153,73 +1031,29 @@ } } }, - "node_modules/@mui/types": { - "version": "7.2.24", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz", - "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==", - "license": "MIT", - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/utils": { - "version": "5.17.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.17.1.tgz", - "integrity": "sha512-jEZ8FTqInt2WzxDV8bhImWBqeQRD99c/id/fq83H0ER9tFl+sfZlaAoCdznGvbSQQ9ividMxqSV2c7cC1vBcQg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/types": "~7.2.15", - "@types/prop-types": "^15.7.12", - "clsx": "^2.1.1", - "prop-types": "^15.8.1", - "react-is": "^19.0.0" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/x-charts": { - "version": "7.29.1", - "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.29.1.tgz", - "integrity": "sha512-5s9PX51HWhpMa+DCDa4RgjtODSaMe+PlTZUqoGIil2vaW/+4ouDLREXvyuVvIF93KfZwrPKAL2SJKSQS4YYB2w==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0", - "@mui/x-charts-vendor": "7.20.0", - "@mui/x-internals": "7.29.0", - "@react-spring/rafz": "^9.7.5", - "@react-spring/web": "^9.7.5", + "version": "9.16.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-9.16.0.tgz", + "integrity": "sha512-X0ivReaBWmHRNVK6EYVzaTL3MECt+NsNiTKyanMBKe1Y36ldV91JWI/Z1NrYPP2wk2So295k0UxGKB8wa6ABWA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.29.7 || ^8.0.0", + "@base-ui/utils": "^0.5.0", + "@mui/utils": "^9.5.0", + "@mui/x-charts-vendor": "9.15.0", + "@mui/x-internal-gestures": "9.16.0", + "@mui/x-internals": "9.16.0", + "bezier-easing": "^3.2.0", "clsx": "^2.1.1", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=14.0.0" + "prop-types": "^15.8.1", + "reselect": "^5.3.0", + "use-sync-external-store": "^1.7.0" }, "peerDependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", - "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0", - "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0", + "@mui/material": "^7.3.0 || ^9.0.0", + "@mui/system": "^7.3.0 || ^9.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -1233,46 +1067,70 @@ } }, "node_modules/@mui/x-charts-vendor": { - "version": "7.20.0", - "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-7.20.0.tgz", - "integrity": "sha512-pzlh7z/7KKs5o0Kk0oPcB+sY0+Dg7Q7RzqQowDQjpy5Slz6qqGsgOB5YUzn0L+2yRmvASc4Pe0914Ao3tMBogg==", + "version": "9.15.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-9.15.0.tgz", + "integrity": "sha512-w4XsAK12UsYmF6YyorVJK3auwfvfF/biCpsF441opR/J0FPIBVymUF2eOElYST6PBwA7HLY04sv1hnem2UoqMw==", "license": "MIT AND ISC", "dependencies": { - "@babel/runtime": "^7.25.7", + "@babel/runtime": "^7.29.7 || ^8.0.0", + "@types/d3-array": "^3.2.2", "@types/d3-color": "^3.1.3", - "@types/d3-delaunay": "^6.0.4", + "@types/d3-format": "^3.0.4", + "@types/d3-geo": "^3.1.1", "@types/d3-interpolate": "^3.0.4", - "@types/d3-scale": "^4.0.8", - "@types/d3-shape": "^3.1.6", - "@types/d3-time": "^3.0.3", + "@types/d3-path": "^3.1.1", + "@types/d3-scale": "^4.0.9", + "@types/d3-shape": "^3.2.0", + "@types/d3-time": "^3.0.4", + "@types/d3-time-format": "^4.0.3", + "@types/d3-timer": "^3.0.2", + "d3-array": "^3.2.4", "d3-color": "^3.1.0", - "d3-delaunay": "^6.0.4", + "d3-format": "^3.1.2", + "d3-geo": "^3.1.1", "d3-interpolate": "^3.0.1", + "d3-path": "^3.1.0", "d3-scale": "^4.0.2", "d3-shape": "^3.2.0", "d3-time": "^3.1.0", - "delaunator": "^5.0.1", - "robust-predicates": "^3.0.2" + "d3-time-format": "^4.1.0", + "d3-timer": "^3.0.1", + "flatqueue": "^3.1.0", + "internmap": "^2.0.3" } }, - "node_modules/@mui/x-internals": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.29.0.tgz", - "integrity": "sha512-+Gk6VTZIFD70XreWvdXBwKd8GZ2FlSCuecQFzm6znwqXg1ZsndavrhG9tkxpxo2fM1Zf7Tk8+HcOO0hCbhTQFA==", + "node_modules/@mui/x-internal-gestures": { + "version": "9.16.0", + "resolved": "https://registry.npmjs.org/@mui/x-internal-gestures/-/x-internal-gestures-9.16.0.tgz", + "integrity": "sha512-4WVMUp500qBdkwtOPTG1qDo/frOC31MihX8skbY189b8LAsNn9rOozkys4aUcs4SzfyMkhIbQd3HgnvB+RQMgQ==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0" + "@babel/runtime": "^7.29.7 || ^8.0.0", + "@base-ui/utils": "^0.5.0" }, - "engines": { - "node": ">=14.0.0" + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@mui/x-internals": { + "version": "9.16.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-9.16.0.tgz", + "integrity": "sha512-ImvD4yi8J/Tip60OnPntw55xG1JlsqxABVlO1XEe1lypg4rUUyR9o7S29FHzOshBPeMVigd9izBtNIdioh1Djw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.29.7 || ^8.0.0", + "@base-ui/utils": "^0.5.0", + "@mui/utils": "^9.5.0", + "reselect": "^5.3.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@popperjs/core": { @@ -1285,90 +1143,33 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@react-spring/animated": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz", - "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==", - "license": "MIT", - "dependencies": { - "@react-spring/shared": "~9.7.5", - "@react-spring/types": "~9.7.5" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/core": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz", - "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==", - "license": "MIT", - "dependencies": { - "@react-spring/animated": "~9.7.5", - "@react-spring/shared": "~9.7.5", - "@react-spring/types": "~9.7.5" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-spring/donate" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/rafz": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz", - "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==", + "node_modules/@types/d3-array": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz", + "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==", "license": "MIT" }, - "node_modules/@react-spring/shared": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz", - "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==", - "license": "MIT", - "dependencies": { - "@react-spring/rafz": "~9.7.5", - "@react-spring/types": "~9.7.5" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/types": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz", - "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==", - "license": "MIT" - }, - "node_modules/@react-spring/web": { - "version": "9.7.5", - "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz", - "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==", - "license": "MIT", - "dependencies": { - "@react-spring/animated": "~9.7.5", - "@react-spring/core": "~9.7.5", - "@react-spring/shared": "~9.7.5", - "@react-spring/types": "~9.7.5" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@types/d3-color": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==", "license": "MIT" }, - "node_modules/@types/d3-delaunay": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz", - "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==", + "node_modules/@types/d3-format": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz", + "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==", "license": "MIT" }, + "node_modules/@types/d3-geo": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.1.tgz", + "integrity": "sha512-65Emv9fQiQQqphLlRkuQ5ypPsOmWPhtBGCMv61JDPEPMvsx+gzhGf74yw1a78xFKPj6zw4AgQICJoQv0vK9M2w==", + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/d3-interpolate": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", @@ -1394,9 +1195,9 @@ } }, "node_modules/@types/d3-shape": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz", - "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz", + "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==", "license": "MIT", "dependencies": { "@types/d3-path": "*" @@ -1408,6 +1209,24 @@ "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==", "license": "MIT" }, + "node_modules/@types/d3-time-format": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz", + "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==", + "license": "MIT" + }, + "node_modules/@types/d3-timer": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", + "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==", + "license": "MIT" + }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "license": "MIT" + }, "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", @@ -1454,6 +1273,12 @@ "npm": ">=6" } }, + "node_modules/bezier-easing": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-3.2.0.tgz", + "integrity": "sha512-QOKIYCgHd06gsQg0G9k1/JnzzZ+PT99qqUmgRHQ+r5PI/gsjCn0l7LXW6gtXoPhVJviIjP01xg9E7eNime9fVw==", + "license": "MIT" + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2046,6 +1871,12 @@ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", "license": "MIT" }, + "node_modules/flatqueue": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/flatqueue/-/flatqueue-3.1.0.tgz", + "integrity": "sha512-Ia4qIYrrsEqIRx3c3XhkT+QDLQuUV5ovsr6ah1rIgKT5wclhoGK3lAMS1bWRAWxlx7wtlTBpV7QXB5d9fOSRxA==", + "license": "ISC" + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -2331,34 +2162,30 @@ "license": "MIT" }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "19.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.1.tgz", + "integrity": "sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==", "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "19.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.1.tgz", + "integrity": "sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==", "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "scheduler": "^0.28.0" }, "peerDependencies": { - "react": "^18.3.1" + "react": "^19.3.1" } }, "node_modules/react-is": { - "version": "19.2.7", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.7.tgz", - "integrity": "sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==", + "version": "19.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.3.1.tgz", + "integrity": "sha512-RRieF6IyxQBkcK6pP8xOHprLTPW6QjRkbGdImtqNme+/hYVwCZkLQLdlZGOhUqXwkS9IEynaGvPJtv6XB/cz0Q==", "license": "MIT" }, "node_modules/react-transition-group": { @@ -2377,6 +2204,12 @@ "react-dom": ">=16.6.0" } }, + "node_modules/reselect": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.3.0.tgz", + "integrity": "sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.12", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", @@ -2426,13 +2259,10 @@ "license": "MIT" }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz", + "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", + "license": "MIT" }, "node_modules/source-map": { "version": "0.5.7", @@ -2467,6 +2297,15 @@ "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", "license": "0BSD" }, + "node_modules/use-sync-external-store": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz", + "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/yaml": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", diff --git a/package.json b/package.json index cf94bddce99..c000d9a6285 100644 --- a/package.json +++ b/package.json @@ -14,14 +14,14 @@ "dependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", - "@mui/material": "5.18.0", - "@mui/x-charts": "7.29.1", + "@mui/material": "9.5.0", + "@mui/x-charts": "9.16.0", "chart.js": "4.4.7", "d3": "7.9.0", "echarts": "6.1.0", "highcharts": "13.1.1", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.3.1", + "react-dom": "19.3.1" }, "devDependencies": { "esbuild": "0.28.1", diff --git a/prompts/library/muix.md b/prompts/library/muix.md index 0f3ca53062f..6e056a83346 100644 --- a/prompts/library/muix.md +++ b/prompts/library/muix.md @@ -8,7 +8,7 @@ entry: the file extension is **`.tsx`**, `language_id` is **`javascript`** **browser render harness** (`node automation/js-render/render.mjs`) via that harness's **React (esbuild) branch** — *not* Python, Rscript, or julia. -**API level:** MUI X Charts 7. The root `package-lock.json` pins this major of +**API level:** MUI X Charts 9. The root `package-lock.json` pins this major of `@mui/x-charts`; write against its API. > ## 🚫 Community surface ONLY — no MUI X Pro / Premium (hard rule) @@ -63,7 +63,7 @@ export default function Chart() { return ( ` inside `ChartsDataProvider` (wrapped in `ChartsWrapper`) + and outside ``. +- **Legend:** hide it with the chart's `hideLegend` prop (not + `slotProps.legend.hidden`). `slotProps.legend.direction` is `"horizontal"` or + `"vertical"`; `position` is `{ vertical: "top" | "middle" | "bottom", + horizontal: "start" | "center" | "end" }`. Style it with + `slotProps.legend.sx` (e.g. `{ fontSize: 16 }`); `labelStyle`, + `itemMarkWidth`, `markGap`, `itemGap` and `padding` are gone. The legend adds + its own height on top of the chart's `height`, so a visible top or bottom + legend needs `height={window.ANYPLOT_SIZE.height - 40}` (or more), or the + bottom of the chart is cropped from the PNG. +- **Axes:** hide an axis with `position: "none"` in its config (the + `topAxis` / `leftAxis` / `bottomAxis` / `rightAxis` props are gone); a second + y axis takes `position: "right"`. Fonts go through `labelStyle` / + `tickLabelStyle` (`labelFontSize` / `tickFontSize` are gone), and the axis + band needs `height` / `width` as described under Sizing. +- **Line charts:** `showMark` defaults to `false`, and marks cycle through + shapes per series, so set `shape: "circle"` for uniform dots. The x domain is + strict; set `domainLimit: "nice"` on the x axis to pad it to round ticks. +- **CSS classes are per chart:** `.MuiLineChart-line`, `.MuiLineChart-area`, + `.MuiLineChart-mark`, `.MuiBarChart-element`, `.MuiBarChart-label`, + `.MuiPieChart-arc`, `.MuiPieChart-arcLabel`, `.MuiScatterChart-marker`. A + series is selected by `[data-series=""]`: on the path itself for lines + and areas (`'& .MuiLineChart-area[data-series="band"]': { fillOpacity: 0.18 }`), + on the series group for bars (`'& [data-series="sales"] .MuiBarChart-element'`). + The v7 names (`.MuiAreaElement-root`, `.MuiLineElement-series-`, + `.MuiBarElement-root`, `lineElementClasses`, …) match nothing, so that styling + silently disappears. +- **Series:** `id` is a string, unique across all series of the chart. + `RadarChart` is stable (no `Unstable_` prefix). `SparkLineChart` takes one + `color`, not `colors`. + ## MUI X-Specific Gotchas - **`export default` is mandatory** — the harness imports the component as the @@ -247,5 +298,5 @@ densities or fits are fine. - Tooltip / hover highlighting is interactive-only and won't appear in the static PNG — that's expected; don't force it open for the screenshot. - MUI X measures real SVG text (getBBox) for axis/legend layout, which is exactly - why the browser harness is used — verify labels aren't clipped at the final - resolution and add axis `margin` / `slotProps.legend` spacing if they are. + why the browser harness is used — verify labels aren't clipped or truncated at + the final resolution and give the axis a larger `height` / `width` if they are. From 255bc570e4cddd5b1c58b8a57dac25d350d98baf Mon Sep 17 00:00:00 2001 From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com> Date: Fri, 23 Oct 2026 01:38:59 +0200 Subject: [PATCH 2/3] docs(changelog): add the PR reference to the MUI X 9 fragment Co-Authored-By: Claude Opus 5.5 --- changelog.d/muix-9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.d/muix-9.md b/changelog.d/muix-9.md index fb8cafb3a2a..aadc2798242 100644 --- a/changelog.d/muix-9.md +++ b/changelog.d/muix-9.md @@ -14,4 +14,4 @@ The render harness itself needed no change. Existing MUI X implementations were written for v7: 164 of 323 no longer bundle under v9, and most of the rest render differently, so they need regeneration before they can be - re-rendered. + re-rendered. (#12243) From 7a371ef9dd60475108238fe9d8cac6fab14e9173 Mon Sep 17 00:00:00 2001 From: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com> Date: Fri, 23 Oct 2026 01:44:29 +0200 Subject: [PATCH 3/3] docs(prompts): name showMark and DefaultChartsLegend in the MUI X v9 notes Gemini 3.8 Flash first review on #12243: a circle shape alone draws nothing while showMark defaults to false, and DefaultChartsLegend is one of the removed v7 imports (pie-basic). Also rewraps one long line. Co-Authored-By: Claude Opus 5.5 --- prompts/library/muix.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/prompts/library/muix.md b/prompts/library/muix.md index 6e056a83346..819aededa0e 100644 --- a/prompts/library/muix.md +++ b/prompts/library/muix.md @@ -102,8 +102,9 @@ gate rejects anything off by more than 16 px and re-triggers repair): Exact pixels come from Playwright `deviceScaleFactor: 2` over the pre-sized mount (1600×900 / 1200×1200 CSS). **Size the chart to `window.ANYPLOT_SIZE`** (`width={window.ANYPLOT_SIZE.width} height={window.ANYPLOT_SIZE.height}`, minus -the legend band when a legend shows) — never hard-code other dimensions. For a square spec (pie / radial / heatmap-style), -put this on its own line at the very top of the file: +the legend band when a legend shows) — never hard-code other dimensions. For a +square spec (pie / radial / heatmap-style), put this on its own line at the very +top of the file: ```tsx //# anyplot-orientation: square @@ -251,11 +252,11 @@ React 19**. Code written for v7 either fails to bundle or silently loses its styling, so write against v9: - **Composition:** `ChartsContainer` from `@mui/x-charts/ChartsContainer`. The - v7 `ChartContainer` / `ResponsiveChartContainer` and the - `@mui/x-charts/ChartContainer` path no longer exist, and the bundle fails. A - legend is HTML, never part of the SVG: in a composed chart render - `` inside `ChartsDataProvider` (wrapped in `ChartsWrapper`) - and outside ``. + v7 `ChartContainer` / `ResponsiveChartContainer`, the + `@mui/x-charts/ChartContainer` path and `DefaultChartsLegend` no longer + exist, and the bundle fails. A legend is HTML, never part of the SVG: in a + composed chart render `` inside `ChartsDataProvider` (wrapped + in `ChartsWrapper`) and outside ``. - **Legend:** hide it with the chart's `hideLegend` prop (not `slotProps.legend.hidden`). `slotProps.legend.direction` is `"horizontal"` or `"vertical"`; `position` is `{ vertical: "top" | "middle" | "bottom", @@ -270,8 +271,9 @@ styling, so write against v9: y axis takes `position: "right"`. Fonts go through `labelStyle` / `tickLabelStyle` (`labelFontSize` / `tickFontSize` are gone), and the axis band needs `height` / `width` as described under Sizing. -- **Line charts:** `showMark` defaults to `false`, and marks cycle through - shapes per series, so set `shape: "circle"` for uniform dots. The x domain is +- **Line charts:** `showMark` defaults to `false`, so set `showMark: true` on a + series to draw its dots. Marks cycle through shapes per series; add + `shape: "circle"` for uniform dots. The x domain is strict; set `domainLimit: "nice"` on the x axis to pad it to round ticks. - **CSS classes are per chart:** `.MuiLineChart-line`, `.MuiLineChart-area`, `.MuiLineChart-mark`, `.MuiBarChart-element`, `.MuiBarChart-label`,