[docs-infra] Migrate to @mui/internal-docs-infra Demos

[dav-is]

This helps with #41117

Improvements:

• roughly 200ms -> 150ms (-25%) hydration time (react-button page)
• roughly 325ms -> 155ms (-52%) navigation time (react-button page to react-autocomplete page)
• roughly 605ms -> 305ms (-52%) largest contentful paint after navgiation (react-button page to react-autocomplete page)
• roughly 53ms -> 19ms (-64%) live editing keyboard input delay (react-autocomplete playground)
• lazy loads entire demo component except DemoContainer
• 70% decrease in demo source code line count (~65,000 lines to ~20,000 lines), will help keep diffs smaller
• Adds collpase / expand animation
• Maintains code state when expanding and collapsing
• Code reset button can be undone with Ctrl+Z
• Multi-file demos have their "Open in Github" link go to the selected file instead of the first file
• holding backspace doesn't waste CPU re-rendering the demo
• browser-native cursor changes color since we use content-editable instead of <textarea> overlay
• using inspect element on highlighted code works instead of selecting the <textarea> overlay
• TS/JS button won't appear if the .ts file has no inline types (the file is exactly the same)
• fix keyboard navigation on code toolbar
• fix bug highlighting type X =
• support for // @highlight
• fix padding between Edit in Chat and TS/JS switcher
• removed continous animation on Edit in Chat button, animates on hover
• pause demo animations while off screen
• should improve SEO by including each demo's root file in the HTML (in plaintext)
• allows Ctrl+Click on demo links to open demo (using file:// URLs)

Preview: https://deploy-preview-47821--material-ui.netlify.app/material-ui/react-button/#basic-button

Migrates to @mui/internal-docs-infra:

• CodeHighlighter
• useDemo() - client hook
• abstractCreateDemo({ DemoContent }) - factory function helper
• loadPrecomputedCodeHighlighter - webpack loader

Screenshots

Screencast.From.2026-06-05.01-06-43.webm

Screencast.From.2026-06-05.01-27-09.webm

Screencast.From.2026-05-26.23-11-09.webm

TODO in this PR:

• Fix theme reset for demos
• Fix "Edit in Chat"
• Tweak expand/collapse animation
• Add links to dropdown to open in github, copy link, etc
• Fix fully-hidden code style of demo
• js to ts link handling
• fix button animation
• fix github links when deployed from a fork (is this even possible for Netlify?)

Upstream TODO List (all completed)

[mui-bot]

Netlify deploy preview

• docs/data/material/components/buttons/buttons.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against b2866a2

[brijeshb42]

Removed the syntax error cursor position altogether from the tooltip since its misleading, in both collapsed and expanded states since the error points to the transpiled code.
Can be revisited as a separate fix.

[Janpot]

Some unexpected animation when selecting all preview content and typing a new word. Also, all indentation is lost.

Screen.Recording.2026-07-14.at.09.31.39.mov

Entering a new block doesn't add indentation

Screen.Recording.2026-07-14.at.09.34.19.mov

But that doesn't seem a new thing

[brijeshb42]

1. In prod, expanding code always resets the edited preview code, regardless if it was empty or edited. Current behaviour is better compared to that since it retains the edited preview code.
2. As for indentation, I can check if it can be fixed for first case, but as you already checked, the code editor doesn't indent on prod as well. We can revisit this separately. I suppose this will be in the direction of integrating a full blown editor :)