diff --git a/.circleci/config.yml b/.circleci/config.yml
index c3c7099bc..dc2fc1a53 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -56,6 +56,12 @@ jobs:
     steps:
       - checkout
       - install_js
+      - run:
+          name: Docs Infra Build
+          command: pnpm -F './packages/docs-infra' run build
+      - run:
+          name: ESLint
+          command: pnpm eslint:ci
       - run:
           name: ESLint
           command: pnpm eslint:ci
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 0d5d57323..32bd807ad 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -127,7 +127,7 @@ All commands are fast in this repository, but network issues or system load can
 
 ## Docs Infra Conventions
 
-Follow additional instructions when working in the `@mui/internal-docs-infra` (`packages/docs-infra`) package:
+Follow additional instructions when working in the `@mui/internal-docs-infra` (`packages/docs-infra`) package or `docs/app/docs-infra` docs:
 
 ### Development Process
 
@@ -165,6 +165,7 @@ Follow additional instructions when working in the `@mui/internal-docs-infra` (`
 - **4.5** When looking for documentation, start at the `/README.md` and follow links inward.
 - **4.6** Avoid "breaking the 3rd wall" in code comments and documentation by referring to the instructions provided when working in this repository. Instead, focus on clear, concise explanations of the code itself.
 - **4.7** When writing code comments, use JSDoc style comments for all functions, but type definitions should be in TypeScript types. Avoid using JSDoc `@typedef` and `@param` tags for types. Use them only for descriptions.
+- **4.8** Use progressive disclosure in documentation. Start with simple, common use cases and gradually introduce complexity. Structure docs so readers can stop at their desired depth of understanding. Place advanced sections (like architecture details or performance tuning) at the end of the document after practical content. Follow this pattern: basic usage → configuration → common patterns → reference material → advanced features → implementation details.
 
 ### File Organization & Structure
 
@@ -186,7 +187,7 @@ Follow additional instructions when working in the `@mui/internal-docs-infra` (`
 
 ### Code Style & Standards
 
-- **7.1** Write type-safe code. Avoid using `any` or `unknown` unless absolutely necessary. Prefer using `unknown` over `any` and always narrow `unknown` to a specific type as soon as possible. User-facing exports should have as strong of typing as possible.
+- **7.1** Write type-safe code. Avoid using `any` or `unknown` unless absolutely necessary. Prefer using `unknown` over `any` and always narrow `unknown` to a specific type as soon as possible. Avoid using `as` type assertions except when working with well-known browser APIs or when you have verified the type through runtime checks. Prefer type guards, type predicates, and proper type narrowing over assertions. User-facing exports should have as strong of typing as possible.
 - **7.2** Use `async/await` for asynchronous code. Avoid using `.then()` and `.catch()`.
 - **7.3** Use `import { ... } from '...'` syntax for imports. Avoid using `require()`.
 - **7.4** Use ES modules and `import`/`export` syntax.
diff --git a/.lintignore b/.lintignore
index 2e75f5d40..a5e0b5c27 100644
--- a/.lintignore
+++ b/.lintignore
@@ -5,5 +5,7 @@ apps/tools-public/toolpad/**/*.yml
 build
 node_modules
 pnpm-lock.yaml
+.next
+docs/out
 
 __fixtures__
diff --git a/README.md b/README.md
index 2b648b917..e2b98b835 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,10 @@
 Mono-repository for the MUI organization with code that can be public.
 See https://github.com/mui/mui-private for code that needs to be private.
 
+## Documentation
+
+You can [read the Infra documentation here](./docs/README.md).
+
 ## Applications
 
 ### [tools-public.mui.com](https://tools-public.mui.com/)
@@ -27,6 +31,11 @@ Internal public Toolpad apps that run the operations of MUI, built using https:/
 - Folder: `/packages/docs-infra/`
 - [Docs](./packages/docs-infra/README.md)
 
+### [code-infra](./packages/code-infra/)
+
+- Folder: `/packages/code-infra/`
+- [Docs](./packages/code-infra/README.md)
+
 ## Versioning
 
 Steps:
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 000000000..5ef6a5207
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..e099e0dec
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,10 @@
+# MUI Infra Docs
+
+This package contains the documentation for the MUI Infra project, which is responsible for the infrastructure and tooling used in the various MUI documentation sites and libraries.
+
+[Read in Markdown](<./app/(shared)/page.mdx>)
+[Read in Browser](https://infra.mui.com)
+
+For the most immersive experience, we recommend opening this documentation in VSCode, starting with this README and working deeper into the documentation by navigating through the links provided (ctrl + click). You should have [the MDX extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) installed to view the documentation properly.
+
+To see demos live, run `pnpm run dev` and open <http://localhost:3000/>
diff --git a/docs/app/(shared)/layout.tsx b/docs/app/(shared)/layout.tsx
new file mode 100644
index 000000000..6470235bd
--- /dev/null
+++ b/docs/app/(shared)/layout.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import styles from '../layout.module.css';
+
+export const metadata: Metadata = {
+  title: 'MUI Infra Documentation',
+  description: 'How to use the MUI Infra packages',
+};
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className={styles.root}>
+      <div className={styles.container}>{children}</div>
+    </div>
+  );
+}
diff --git a/docs/app/(shared)/page.mdx b/docs/app/(shared)/page.mdx
new file mode 100644
index 000000000..40acd7398
--- /dev/null
+++ b/docs/app/(shared)/page.mdx
@@ -0,0 +1,9 @@
+# MUI Infra
+
+## Docs Infra
+
+Read more about `docs-infra` [here](../docs-infra/page.mdx).
+
+## Code Infra
+
+Read more about `code-infra` [here](../code-infra/page.mdx).
diff --git a/docs/app/code-infra/layout.tsx b/docs/app/code-infra/layout.tsx
new file mode 100644
index 000000000..fe4d94238
--- /dev/null
+++ b/docs/app/code-infra/layout.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import styles from '../layout.module.css';
+
+export const metadata: Metadata = {
+  title: 'MUI Code Infra Documentation',
+  description: 'How to use the MUI Code-Infra package',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <Link href="/code-infra">MUI Code Infra</Link>
+      </div>
+      <div className={styles.container}>{children}</div>
+    </div>
+  );
+}
diff --git a/docs/app/code-infra/page.mdx b/docs/app/code-infra/page.mdx
new file mode 100644
index 000000000..8dc058d18
--- /dev/null
+++ b/docs/app/code-infra/page.mdx
@@ -0,0 +1,21 @@
+# Code Infra
+
+This is the documentation for the MUI Internal Code Infra package.
+
+You can install this package using:
+
+```bash variant=pnpm
+pnpm install @mui/internal-code-infra
+```
+
+```bash variant=yarn
+yarn add @mui/internal-code-infra
+```
+
+```bash variant=npm
+npm install @mui/internal-code-infra
+```
+
+## Usage
+
+TODO
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeController.tsx b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeController.tsx
new file mode 100644
index 000000000..bb2436740
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeController.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext';
+import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter/types';
+
+export function CodeController({ children }: { children: React.ReactNode }) {
+  const [code, setCode] = React.useState<ControlledCode | undefined>(undefined);
+
+  const contextValue = React.useMemo(() => ({ code, setCode }), [code, setCode]);
+
+  return (
+    <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditor.tsx b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditor.tsx
new file mode 100644
index 000000000..d3dbee261
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditor.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { CodeController } from './CodeController';
+import { CodeEditorContent } from './CodeEditorContent';
+
+const initialCode = {
+  Default: {
+    url: 'file://live-example.js',
+    fileName: 'live-example.js',
+    source: `// Welcome to the live code editor!
+function greet(name) {
+  return \`Hello, \${name}!\`;
+}
+`,
+  },
+};
+
+export function CodeEditor() {
+  return (
+    <CodeProvider>
+      <CodeController>
+        <CodeHighlighter
+          url={initialCode.Default.url}
+          Content={CodeEditorContent}
+          code={initialCode}
+          controlled
+          sourceParser={createParseSource()}
+        />
+      </CodeController>
+    </CodeProvider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css
new file mode 100644
index 000000000..26263573a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css
@@ -0,0 +1,37 @@
+.container {
+  border: 1px solid #d0cdd7;
+  border-radius: 8px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 12px;
+  border-bottom: 1px solid #d0cdd7;
+}
+
+.name {
+  color: #65636d;
+  font-size: 13px;
+  font-family: var(--font-geist-mono);
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.switchContainer {
+  display: flex;
+}
+.code {
+  padding: 6px;
+}
+
+.codeBlock {
+  margin: 0;
+  padding: 6px;
+  overflow-x: auto;
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx
new file mode 100644
index 000000000..2f9972650
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import { useEditable } from 'use-editable';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useCode } from '@mui/internal-docs-infra/useCode';
+import { LabeledSwitch } from '@/components/LabeledSwitch';
+import styles from './CodeEditorContent.module.css';
+
+import '@wooorm/starry-night/style/light'; // load the light theme for syntax highlighting
+
+export function CodeEditorContent(props: ContentProps<object>) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+  const code = useCode(props, { preClassName: styles.codeBlock, preRef });
+
+  const hasJsTransform = code.availableTransforms.includes('js');
+  const isJsSelected = code.selectedTransform === 'js';
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      code.selectTransform(checked ? 'js' : null);
+    },
+    [code],
+  );
+
+  const onInput = React.useCallback(
+    (text: string) => {
+      code.setSource?.(text);
+    },
+    [code],
+  );
+
+  useEditable(preRef, onInput, { indentation: 2 });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.name}>{code.selectedFileName}</span>
+        <div className={styles.headerActions}>
+          {hasJsTransform && (
+            <div className={styles.switchContainer}>
+              <LabeledSwitch checked={isJsSelected} onCheckedChange={toggleJs} labels={labels} />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={styles.code}>{code.selectedFile}</div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/code-editor/index.ts b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/index.ts
new file mode 100644
index 000000000..be190b299
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/code-editor/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { CodeEditor } from './CodeEditor';
+
+export const DemoCodeControllerCodeEditor = createDemo(import.meta.url, CodeEditor, {
+  name: 'Live Code Editor',
+  slug: 'live-code-editor',
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoController.tsx b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoController.tsx
new file mode 100644
index 000000000..b42c1ca94
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoController.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from 'react';
+import { useRunner } from 'react-runner';
+import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext';
+import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext';
+
+function Runner({ code }: { code: string }) {
+  const externalsContext = useCodeExternals();
+  const scope = React.useMemo(() => {
+    let externals = externalsContext?.externals;
+    if (!externals) {
+      externals = { imports: { react: React } };
+    }
+
+    return { import: { ...externals } };
+  }, [externalsContext]);
+
+  const { element, error } = useRunner({ code, scope });
+
+  if (error) {
+    return <div>{error}</div>;
+  }
+
+  return element;
+}
+
+export function DemoController({ children }: { children: React.ReactNode }) {
+  const [code, setCode] = React.useState<ControlledCode | undefined>(undefined);
+
+  const components = React.useMemo(
+    () =>
+      code
+        ? Object.keys(code).reduce(
+            (acc, cur) => {
+              const source = code[cur]?.source;
+              if (!source) {
+                return acc;
+              }
+
+              acc[cur] = <Runner code={source} />;
+              return acc;
+            },
+            {} as Record<string, React.ReactNode>,
+          )
+        : undefined,
+    [code],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({ code, setCode, components }),
+    [code, setCode, components],
+  );
+
+  return (
+    <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLive.tsx b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLive.tsx
new file mode 100644
index 000000000..e634b8568
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLive.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { DemoController } from './DemoController';
+import { DemoCheckboxBasic } from './demo-basic';
+
+export function DemoLive() {
+  return (
+    <CodeProvider>
+      <DemoController>
+        <DemoCheckboxBasic />
+      </DemoController>
+    </CodeProvider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css
new file mode 100644
index 000000000..dfc66f576
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css
@@ -0,0 +1,72 @@
+.container {
+  border: 1px solid #d0cdd7;
+  border-radius: 8px;
+}
+
+.demoSection {
+  padding: 24px;
+}
+
+.codeSection {
+  border-top: 1px solid #d0cdd7;
+}
+
+.header {
+  border-bottom: 1px solid #d0cdd7;
+  height: 48px;
+  position: relative;
+}
+
+.headerContainer {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.headerContainer:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  margin: -1px;
+  background-color: #d0cdd7;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 8px;
+  height: 48px;
+}
+
+.tabContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: -1px;
+  padding-bottom: 2px;
+  overflow-x: auto;
+}
+
+.switchContainer {
+  display: flex;
+}
+
+.switchContainerHidden {
+  display: none;
+}
+
+.code {
+  padding: 10px 6px;
+}
+
+.codeBlock {
+  margin: 0;
+  padding: 6px;
+  overflow-x: auto;
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx
new file mode 100644
index 000000000..167c91925
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+import { useEditable } from 'use-editable';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useDemo } from '@mui/internal-docs-infra/useDemo';
+import { LabeledSwitch } from '@/components/LabeledSwitch';
+import { Tabs } from '@/components/Tabs';
+import { Select } from '@/components/Select';
+import styles from './DemoLiveContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+const variantNames: Record<string, string | undefined> = {
+  CssModules: 'CSS Modules',
+};
+
+export function DemoLiveContent(props: ContentProps<object>) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+  const demo = useDemo(props, { preClassName: styles.codeBlock, preRef });
+
+  const hasJsTransform = demo.availableTransforms.includes('js');
+  const isJsSelected = demo.selectedTransform === 'js';
+
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      demo.selectTransform(checked ? 'js' : null);
+    },
+    [demo],
+  );
+
+  const tabs = React.useMemo(
+    () => demo.files.map(({ name }) => ({ id: name, name })),
+    [demo.files],
+  );
+  const variants = React.useMemo(
+    () =>
+      demo.variants.map((variant) => ({ value: variant, label: variantNames[variant] || variant })),
+    [demo.variants],
+  );
+
+  const onChange = React.useCallback(
+    (text: string) => {
+      demo.setSource?.(text);
+    },
+    [demo],
+  );
+  useEditable(preRef, onChange, { indentation: 2, disabled: !demo.setSource });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+      <div className={styles.codeSection}>
+        <div className={styles.header}>
+          <div className={styles.headerContainer}>
+            <div className={styles.tabContainer}>
+              <Tabs
+                tabs={tabs}
+                selectedTabId={demo.selectedFileName}
+                onTabSelect={demo.selectFileName}
+              />
+            </div>
+            <div className={styles.headerActions}>
+              {demo.variants.length > 1 && (
+                <Select
+                  items={variants}
+                  value={demo.selectedVariant}
+                  onValueChange={demo.selectVariant}
+                />
+              )}
+              {hasJsTransform && (
+                <div className={styles.switchContainer}>
+                  <LabeledSwitch
+                    checked={isJsSelected}
+                    onCheckedChange={toggleJs}
+                    labels={labels}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className={styles.code}>{demo.selectedFile}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createDemoClient.ts b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createDemoClient.ts
new file mode 100644
index 000000000..74c12378e
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createDemoClient.ts
@@ -0,0 +1,12 @@
+'use client';
+
+import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient';
+
+/**
+ * Creates a demo client copying dependencies in the client bundle for live editing.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param meta Additional meta and modules for the demo client.
+ */
+export const createDemoClient = createDemoClientFactory({
+  live: true,
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createLiveDemo.ts b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createLiveDemo.ts
new file mode 100644
index 000000000..cef1e1eda
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/createLiveDemo.ts
@@ -0,0 +1,31 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoLiveContent as DemoContent } from './DemoLiveContent';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createLiveDemo = createDemoFactory({
+  DemoContent,
+  controlled: true,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createLiveDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContent,
+  controlled: true,
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx
new file mode 100644
index 000000000..5f008e747
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export default function CheckboxBasic() {
+  return (
+    <div>
+      <Checkbox defaultChecked />
+      <p style={{ color: '#CA244D' }}>Type Whatever You Want Below</p>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/client.ts b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/client.ts
new file mode 100644
index 000000000..baefea2ae
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/client.ts
@@ -0,0 +1,7 @@
+'use client';
+
+import { createDemoClient } from '../createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/index.ts b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/index.ts
new file mode 100644
index 000000000..c3da08b43
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/demo-basic/index.ts
@@ -0,0 +1,9 @@
+import { createLiveDemo } from '../createLiveDemo';
+import ClientProvider from './client';
+import CheckboxBasic from './CheckboxBasic';
+
+export const DemoCheckboxBasic = createLiveDemo(import.meta.url, CheckboxBasic, {
+  name: 'Basic Checkbox',
+  slug: 'basic-checkbox',
+  ClientProvider,
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/demo-live/index.ts b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/index.ts
new file mode 100644
index 000000000..659ffe260
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/demo-live/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { DemoLive } from './DemoLive';
+
+export const DemoCodeControllerDemoLive = createDemo(import.meta.url, DemoLive, {
+  name: 'Live Demo',
+  slug: 'live-demo',
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx
new file mode 100644
index 000000000..a447eebe9
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { useEditable } from 'use-editable';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useCode } from '@mui/internal-docs-infra/useCode';
+import { Tabs } from '@/components/Tabs';
+import styles from '../code-editor/CodeEditorContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+export function MultiFileContent(props: ContentProps<object>) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+  const code = useCode(props, { preClassName: styles.codeBlock, preRef });
+
+  const tabs = React.useMemo(() => {
+    return code.files.map(({ name }) => ({
+      id: name,
+      name,
+    }));
+  }, [code.files]);
+
+  const onInput = React.useCallback(
+    (text: string) => {
+      code.setSource?.(text);
+    },
+    [code],
+  );
+
+  useEditable(preRef, onInput, { indentation: 2 });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+          <Tabs
+            tabs={tabs}
+            selectedTabId={code.selectedFileName || ''}
+            onTabSelect={code.selectFileName}
+          />
+        </div>
+      </div>
+      <div className={styles.code}>{code.selectedFile}</div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileEditor.tsx b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileEditor.tsx
new file mode 100644
index 000000000..5f8396a77
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileEditor.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { CodeController } from '../code-editor/CodeController';
+import { MultiFileContent } from './MultiFileContent';
+
+const initialCode = {
+  Default: {
+    url: 'file:///App.tsx',
+    fileName: 'App.tsx',
+    source: `import React from 'react';
+
+export default function App() {
+  return (
+    <div className="container">
+      <h1>Multi-File Demo</h1>
+      <p>Edit both the component and CSS!</p>
+    </div>
+  );
+}`,
+    extraFiles: {
+      'styles.css': {
+        source: `.container {
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 8px;
+}
+
+h1 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+p {
+  color: #666;
+  font-size: 14px;
+}`,
+      },
+    },
+  },
+};
+
+export function MultiFileEditor() {
+  return (
+    <CodeProvider>
+      <CodeController>
+        <CodeHighlighter
+          url={initialCode.Default.url}
+          Content={MultiFileContent}
+          code={initialCode}
+          controlled
+          sourceParser={createParseSource()}
+        />
+      </CodeController>
+    </CodeProvider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-controller-context/demos/multi-file/index.ts b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/index.ts
new file mode 100644
index 000000000..0762dc583
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/demos/multi-file/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { MultiFileEditor } from './MultiFileEditor';
+
+export const DemoCodeControllerMultiFile = createDemo(import.meta.url, MultiFileEditor, {
+  name: 'Multi-File Editor',
+  slug: 'multi-file-editor',
+});
diff --git a/docs/app/docs-infra/components/code-controller-context/page.mdx b/docs/app/docs-infra/components/code-controller-context/page.mdx
new file mode 100644
index 000000000..366ba4983
--- /dev/null
+++ b/docs/app/docs-infra/components/code-controller-context/page.mdx
@@ -0,0 +1,419 @@
+# Code Controller Context
+
+The `CodeControllerContext` provides a React context for managing controlled code state in interactive code editing and demo scenarios. It enables real-time code editing with syntax highlighting and live component previews.
+
+## Features
+
+- **Interactive code editing** - Edit source code with real-time updates
+- **Live component previews** - See component changes rendered instantly
+- **Context-based state** - Shared state across multiple components
+- **Simple integration** - Works with existing [`CodeHighlighter`](../code-highlighter/page.mdx) and demo components
+
+## Examples
+
+import { DemoCodeControllerCodeEditor } from './demos/code-editor';
+
+<DemoCodeControllerCodeEditor.Title />
+
+<DemoCodeControllerCodeEditor />
+
+[See Demo](./demos/code-editor/)
+
+---
+
+import { DemoCodeControllerDemoLive } from './demos/demo-live';
+
+<DemoCodeControllerDemoLive.Title />
+
+<DemoCodeControllerDemoLive />
+
+[See Demo](./demos/demo-live/)
+
+---
+
+import { DemoCodeControllerMultiFile } from './demos/multi-file';
+
+<DemoCodeControllerMultiFile.Title />
+
+<DemoCodeControllerMultiFile />
+
+[See Demo](./demos/multi-file/)
+
+## Basic Usage
+
+The Code Controller provides a simple React context for managing controlled code state. It works with two main patterns:
+
+### Pattern 1: Code Editor
+
+For interactive code editing with syntax highlighting:
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+// Simple controller implementation
+function CodeController({ children }: { children: React.ReactNode }) {
+  const [code, setCode] = React.useState();
+  const contextValue = React.useMemo(() => ({ code, setCode }), [code, setCode]);
+
+  return (
+    <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
+  );
+}
+
+// Usage
+function CodeEditor() {
+  const initialCode = {
+    Default: {
+      url: 'file://example.js',
+      fileName: 'example.js',
+      source: `function greet(name) {
+  return \`Hello, \${name}!\`;
+}`,
+    },
+  };
+
+  return (
+    <CodeProvider>
+      <CodeController>
+        <CodeHighlighter
+          url={initialCode.Default.url}
+          code={initialCode}
+          controlled
+          Content={YourEditorContent}
+        />
+      </CodeController>
+    </CodeProvider>
+  );
+}
+```
+
+### Pattern 2: Live Demo Controller
+
+For live component previews with editable source code:
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { useRunner } from 'react-runner';
+import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext';
+
+function DemoController({ children }: { children: React.ReactNode }) {
+  const [code, setCode] = React.useState();
+
+  // Create live component instances from code
+  const components = React.useMemo(() => {
+    if (!code) return undefined;
+
+    return Object.keys(code).reduce((acc, variant) => {
+      const source = code[variant]?.source;
+      if (source) {
+        acc[variant] = <Runner code={source} />;
+      }
+      return acc;
+    }, {});
+  }, [code]);
+
+  const contextValue = React.useMemo(
+    () => ({ code, setCode, components }),
+    [code, setCode, components],
+  );
+
+  return (
+    <CodeControllerContext.Provider value={contextValue}>{children}</CodeControllerContext.Provider>
+  );
+}
+```
+
+## Working with useCode Hook
+
+The [`useCode`](../use-code/page.mdx) hook automatically integrates with the CodeController context when the `controlled` prop is true:
+
+```tsx
+'use client';
+
+import { useEditable } from 'use-editable';
+import { useCode } from '@mui/internal-docs-infra/useCode';
+
+function EditorContent(props) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+  const code = useCode(props, { preRef });
+
+  // code.setSource updates the controller automatically
+  const onInput = React.useCallback(
+    (text: string) => {
+      code.setSource?.(text);
+    },
+    [code],
+  );
+
+  useEditable(preRef, onInput, { indentation: 2 });
+
+  return (
+    <div>
+      <h4>{code.selectedFileName}</h4>
+      {code.selectedFile}
+    </div>
+  );
+}
+```
+
+## Working with useDemo Hook
+
+The [`useDemo`](../use-demo/page.mdx) hook provides additional functionality for live component demos:
+
+```tsx
+'use client';
+
+import { useDemo } from '@mui/internal-docs-infra/useDemo';
+
+function DemoContent(props) {
+  const demo = useDemo(props);
+
+  const onInput = React.useCallback(
+    (text: string) => {
+      demo.setSource?.(text);
+    },
+    [demo],
+  );
+
+  return (
+    <div>
+      {/* Live component preview */}
+      <div>{demo.component}</div>
+
+      {/* Editable source code */}
+      <div>
+        <select value={demo.selectedVariant} onChange={(e) => demo.selectVariant(e.target.value)}>
+          {demo.variants.map((variant) => (
+            <option key={variant} value={variant}>
+              {variant}
+            </option>
+          ))}
+        </select>
+
+        <textarea value={demo.selectedFile} onChange={(e) => onInput(e.target.value)} />
+      </div>
+    </div>
+  );
+}
+```
+
+## Data Flow
+
+The CodeController provides a simple state management pattern:
+
+1. **Initial State**: Controller starts with empty state (`code: undefined`)
+2. **Code Loading**: [`CodeHighlighter`](../code-highlighter/page.mdx) loads initial code from file or props
+3. **User Interaction**: When users edit code, `setSource` calls `controlledSetCode`
+4. **State Update**: Controller state updates and all connected components re-render
+5. **Live Preview**: For demo controllers, components are regenerated from updated code
+
+```tsx
+// Flow: User Edit → setSource → controlledSetCode → Context Update → Re-render
+
+function EditorContent(props) {
+  const code = useCode(props); // Connects to controller context
+
+  const onEdit = (newSource) => {
+    code.setSource(newSource); // This updates the controller context
+  };
+
+  // code.selectedFile reflects the current controller state
+  return <textarea value={code.selectedFile} onChange={onEdit} />;
+}
+```
+
+## Integration with createDemo
+
+The [`createDemo`](../create-demo/page.mdx) and [`createLiveDemo`](../create-live-demo/page.mdx) functions automatically handle controller integration:
+
+```tsx
+// demos/my-demo/index.ts
+import { createDemo } from '@mui/internal-docs-infra/functions/createDemo';
+import { MyComponent } from './MyComponent';
+
+export const DemoMyComponent = createDemo(import.meta.url, MyComponent, {
+  name: 'My Component Demo',
+  slug: 'my-component-demo',
+});
+```
+
+When used with a controller, the demo automatically:
+
+- Loads source code from the filesystem
+- Provides editing capabilities through [`useCode`](../use-code/page.mdx) or [`useDemo`](../use-demo/page.mdx)
+- Updates the controller state when code changes
+- Re-renders connected components
+
+## Client Dependencies for Live Demos
+
+For live demos that need to run code dynamically (like the Live Demo example), you must provide a `ClientProvider` to ensure dependencies are properly bundled:
+
+### Using createDemoClient
+
+> [!NOTE]
+> Before you can use `createDemoClient` in your demos, you must first create this file in your repo using the abstract factory.
+> See the [`abstractCreateDemoClient`](../../functions/abstract-create-demo-client/page.mdx#implementation) docs for details.
+
+Once you've created your own `createDemoClient` file, you can use it in your demos as shown below:
+
+```tsx filename=client.ts
+// demos/my-live-demo/client.ts
+'use client';
+
+import { createDemoClient } from '../createDemoClient';
+
+const ClientProvider = createDemoClient(import.meta.url);
+
+export default ClientProvider;
+```
+
+### Creating a Custom createDemoClient
+
+You can also create your own `createDemoClient` using the abstract factory:
+
+```tsx filename=createDemoClient.ts
+'use client';
+
+import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient';
+
+/**
+ * Creates a demo client copying dependencies in the client bundle for live editing.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param meta Additional meta and modules for the demo client.
+ */
+export const createDemoClient = createDemoClientFactory({
+  live: true,
+});
+```
+
+### Integration with createLiveDemo
+
+Then use the `ClientProvider` in your demo configuration:
+
+```tsx filename=index.ts
+// demos/my-live-demo/index.ts
+import { createLiveDemo } from '../createLiveDemo';
+import ClientProvider from './client';
+import MyComponent from './MyComponent';
+
+export const DemoMyLiveComponent = createLiveDemo(import.meta.url, MyComponent, {
+  name: 'My Live Component',
+  slug: 'my-live-component',
+  ClientProvider, // Required for dependency hoisting
+});
+```
+
+The `ClientProvider` ensures that:
+
+- Component dependencies are hoisted into the client bundle
+- External libraries are available for the `useRunner` hook through `CodeExternalsContext`
+- Live code execution has access to all required modules via precomputed externals
+
+This is only needed for demos that render live components from editable code, not for simple code editor scenarios.
+
+## Best Practices
+
+1. **Use with [`CodeProvider`](../code-provider/page.mdx)** - Always wrap CodeController with [`CodeProvider`](../code-provider/page.mdx) for client-side highlighting
+2. **Keep controllers simple** - Controllers should only manage state, not complex logic
+3. **Let hooks handle integration** - Use [`useCode`](../use-code/page.mdx) and [`useDemo`](../use-demo/page.mdx) hooks rather than manual context access
+4. **Start with empty state** - Let the initial code load through the normal [`CodeHighlighter`](../code-highlighter/page.mdx) flow
+5. **Use controlled prop** - Set `controlled={true}` on [`CodeHighlighter`](../code-highlighter/page.mdx) components
+
+## Context API
+
+### CodeControllerContext
+
+The context provides the following interface:
+
+```typescript
+interface CodeControllerContext {
+  // Current controlled code state
+  code?: ControlledCode;
+
+  // Current selection (variant, file, transform)
+  selection?: Selection;
+
+  // Function to update code state
+  setCode?: React.Dispatch<React.SetStateAction<ControlledCode | undefined>>;
+
+  // Function to update selection state
+  setSelection?: React.Dispatch<React.SetStateAction<Selection>>;
+
+  // Override components for live previews
+  components?: Record<string, React.ReactNode>;
+}
+```
+
+### useControlledCode Hook
+
+Access the context values:
+
+```tsx
+import { useControlledCode } from '@mui/internal-docs-infra/CodeControllerContext';
+
+function MyComponent() {
+  const {
+    controlledCode,
+    controlledSelection,
+    controlledSetCode,
+    controlledSetSelection,
+    controlledComponents,
+  } = useControlledCode();
+
+  // Use the values...
+}
+```
+
+### Types
+
+```typescript
+type Selection = {
+  variant: string;
+  fileName?: string;
+  transformKey?: string;
+};
+
+type ControlledCode = {
+  [variantName: string]: ControlledVariantCode | undefined | null;
+};
+
+type ControlledVariantCode = {
+  url: string;
+  fileName: string;
+  source?: string | null;
+  extraFiles?: Record<string, { source: string | null }>;
+  filesOrder?: string[];
+};
+```
+
+## Requirements
+
+- **[`CodeProvider`](../code-provider/page.mdx)**: Required for client-side code highlighting and processing
+- **Client component**: CodeController must be a client component (`'use client'`)
+- **Controlled prop**: [`CodeHighlighter`](../code-highlighter/page.mdx) components must have `controlled={true}`
+- **ClientProvider**: Required for live demos that execute code dynamically (use `createDemoClient` to create one)
+
+## Related Components
+
+- **[CodeHighlighter](../code-highlighter/page.mdx)** - Displays and highlights source code
+- **[CodeProvider](../code-provider/page.mdx)** - Provides client-side code processing functions
+- **[`useCode`](../use-code/page.mdx) Hook** - Integrates [`CodeHighlighter`](../code-highlighter/page.mdx) with controller state
+- **[`useDemo`](../use-demo/page.mdx) Hook** - Extends [`useCode`](../use-code/page.mdx) with live component preview capabilities
+
+## Purpose
+
+The CodeControllerContext is specifically designed for **interactive code editing scenarios** where you need:
+
+- Real-time code editing with syntax highlighting
+- Live component previews that update as code changes
+- Shared state between multiple code-related components
+- TypeScript/JavaScript transformation toggle
+
+Use this component when building interactive documentation, code playgrounds, tutorials, or any scenario where users need to edit and see live updates to source code.
diff --git a/docs/app/docs-infra/components/code-externals-context/page.mdx b/docs/app/docs-infra/components/code-externals-context/page.mdx
new file mode 100644
index 000000000..976fdfa4a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-externals-context/page.mdx
@@ -0,0 +1,291 @@
+# CodeExternalsContext
+
+The `CodeExternalsContext` is a simple React context that provides access to external dependencies (modules and components) for demo components. It's primarily used internally by demo client providers created with [`abstractCreateDemoClient`](../../functions/abstract-create-demo-client/page.mdx) to make precomputed externals available to child components.
+
+## Features
+
+- **Simple External Access**: Provides external modules through React context
+- **Build-time Integration**: Receives precomputed externals from webpack/turbopack loaders
+- **Provider Pattern**: Used by demo client providers to supply externals
+- **Type Safety**: Simple typed interface for external module access
+
+## API
+
+### Context Interface
+
+```typescript
+interface CodeExternalsContext {
+  externals?: Record<string, Module>;
+}
+
+type Module = {}; // Can be any imported module or object
+```
+
+### Hook Interface
+
+```typescript
+function useCodeExternals(): CodeExternalsContext | undefined;
+```
+
+## Usage
+
+### Basic Hook Usage
+
+The primary way to access externals is through the `useCodeExternals` hook:
+
+```tsx
+import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext';
+
+function DemoComponent() {
+  const externalsContext = useCodeExternals();
+  const externals = externalsContext?.externals || {};
+
+  // Access specific externals
+  const React = externals.react;
+  const { Button } = externals['@mui/material'] || {};
+
+  return <Button>Demo Button</Button>;
+}
+```
+
+### Integration with Demo Clients
+
+Demo clients are transformed by the build system to automatically provide this context. Here's what happens:
+
+**Before (source code):**
+
+```tsx
+// demo/client.ts
+'use client';
+import { createDemoClient } from '../createDemoClient';
+
+export const DemoExampleClient = createDemoClient(import.meta.url);
+```
+
+**After (build system transformation):**
+
+```tsx
+// demo/client.ts - Transformed by loader
+'use client';
+import React from 'react';
+import { Button } from '@mui/material';
+import { createDemoClient } from '../createDemoClient';
+
+export const DemoExampleClient = createDemoClient(import.meta.url, {
+  precompute: {
+    externals: {
+      react: React,
+      '@mui/material': { Button },
+    },
+  },
+});
+
+// The client provider will make these externals available via CodeExternalsContext
+```
+
+## Implementation Details
+
+### Context Structure
+
+The context provides a simple interface:
+
+```typescript
+const context = {
+  externals: {
+    react: React, // Default import
+    '@mui/material': { Button }, // Named imports as object
+    '@mui/system': { styled }, // Single named import
+    './local-module': { helper }, // Local modules
+  },
+};
+```
+
+## Common Patterns
+
+### Safe External Access
+
+```tsx
+function SafeExternalDemo() {
+  const externalsContext = useCodeExternals();
+
+  if (!externalsContext?.externals) {
+    return <div>No externals available</div>;
+  }
+
+  const { react: React, '@mui/material': MUI = {} } = externalsContext.externals;
+  const { Button } = MUI;
+
+  if (!Button) {
+    return <div>Button component not available</div>;
+  }
+
+  return <Button>Safe Button</Button>;
+}
+```
+
+### Integration with Live Code Execution
+
+When building live demo components that execute code dynamically, externals provide the scope for code execution. Here's how the provider and consumer work together:
+
+**Provider Setup (Demo Client):**
+
+```tsx
+// demo/client.tsx - The demo client provides externals context
+'use client';
+
+import * as React from 'react';
+import { Button } from '@mui/material';
+import { CodeExternalsContext } from '@mui/internal-docs-infra/CodeExternalsContext';
+
+// This would typically be created by abstractCreateDemoClient
+const externals = {
+  react: React,
+  '@mui/material': { Button },
+  // Other external dependencies...
+};
+
+function DemoProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <CodeExternalsContext.Provider value={{ externals }}>{children}</CodeExternalsContext.Provider>
+  );
+}
+
+export { DemoProvider };
+```
+
+**Consumer (Live Code Runner):**
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { useRunner } from 'react-runner';
+import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext';
+
+function LiveCodeRunner({ code }: { code: string }) {
+  const externalsContext = useCodeExternals();
+
+  const scope = React.useMemo(() => {
+    let externals = externalsContext?.externals;
+    if (!externals) {
+      // Fallback if no externals context available
+      externals = { imports: { react: React } };
+    }
+
+    // Format externals for react-runner
+    return { import: { ...externals } };
+  }, [externalsContext]);
+
+  const { element, error } = useRunner({ code, scope });
+
+  if (error) {
+    return <div style={{ color: 'red' }}>Error: {error}</div>;
+  }
+
+  return element;
+}
+
+// Complete demo with provider
+function CompleteLiveDemo() {
+  const [code, setCode] = React.useState(`
+    import React from 'react';
+    import { Button } from '@mui/material';
+    
+    export default function Example() {
+      return <Button variant="contained">Live Demo!</Button>;
+    }
+  `);
+
+  return (
+    <DemoProvider>
+      <div>
+        <textarea
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          style={{ width: '100%', height: 200 }}
+        />
+        <div>
+          <h4>Live Preview:</h4>
+          <LiveCodeRunner code={code} />
+        </div>
+      </div>
+    </DemoProvider>
+  );
+}
+```
+
+### Conditional Rendering with Externals
+
+```tsx
+function ConditionalDemo() {
+  const externalsContext = useCodeExternals();
+  const externals = externalsContext?.externals || {};
+
+  const hasButton = externals['@mui/material']?.Button;
+  const hasTypography = externals['@mui/material']?.Typography;
+
+  return (
+    <div>
+      {hasButton && <externals['@mui/material'].Button>Button Available</externals['@mui/material'].Button>}
+      {hasTypography && <externals['@mui/material'].Typography>Typography Available</externals['@mui/material'].Typography>}
+      {!hasButton && !hasTypography && <div>No MUI components available</div>}
+    </div>
+  );
+}
+```
+
+### Debug Available Externals
+
+```tsx
+function ExternalDebugger() {
+  const externalsContext = useCodeExternals();
+  const externals = externalsContext?.externals || {};
+
+  return (
+    <details>
+      <summary>Available Externals ({Object.keys(externals).length})</summary>
+      <ul>
+        {Object.entries(externals).map(([key, value]) => (
+          <li key={key}>
+            <strong>{key}:</strong> {typeof value}
+            {value && typeof value === 'object' && !React.isValidElement(value) && (
+              <ul>
+                {Object.keys(value).map((subKey) => (
+                  <li key={subKey}>{subKey}</li>
+                ))}
+              </ul>
+            )}
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}
+```
+
+## When to Use
+
+- **Demo Components**: When building components that need access to externally provided modules
+- **Client-side Components**: In components that are children of demo client providers
+- **Dynamic Module Access**: When you need runtime access to modules provided by the build system
+
+## When Not to Use
+
+- **Regular Components**: Use normal imports for components outside of demo contexts
+- **Server Components**: This context is client-side only
+- **Static Imports**: When you can use regular ES module imports
+
+## Integration with Build System
+
+The context works seamlessly with the docs-infra build system:
+
+1. **Build Time**: Webpack/Turbopack loaders analyze demo code and collect external dependencies
+2. **Code Generation**: Loaders inject import statements and create externals objects
+3. **Runtime**: Demo client providers supply externals through this context
+4. **Component Access**: Child components use `useCodeExternals` to access the externals
+
+## Related
+
+- **[`abstractCreateDemoClient`](../../functions/abstract-create-demo-client/page.mdx)**: Creates providers that supply this context
+- **[`loadPrecomputedCodeHighlighterClient`](../../functions/load-precomputed-code-highlighter-client/page.mdx)**: Loader that injects externals
+- **[`CodeHighlighter`](../code-highlighter/page.mdx)**: Main component for code highlighting and demos
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/Code.tsx b/docs/app/docs-infra/components/code-highlighter/demos/Code.tsx
new file mode 100644
index 000000000..1138c0b0d
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/Code.tsx
@@ -0,0 +1,17 @@
+import 'server-only';
+
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+import { CodeContent } from './CodeContent';
+
+const sourceParser = createParseSource();
+
+export function Code({ children, fileName }: { children: string; fileName?: string }) {
+  return (
+    <CodeHighlighter fileName={fileName} Content={CodeContent} sourceParser={sourceParser}>
+      {children}
+    </CodeHighlighter>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css b/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css
new file mode 100644
index 000000000..a5aeec6d6
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css
@@ -0,0 +1,53 @@
+.container {
+  border: 1px solid #d0cdd7;
+  border-radius: 8px;
+}
+
+.header {
+  border-bottom: 1px solid #d0cdd7;
+  height: 48px;
+  position: relative;
+}
+
+.headerContainer {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 8px;
+  height: 48px;
+}
+
+.tabContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: -1px;
+  padding-bottom: 2px;
+  overflow-x: auto;
+}
+
+.switchContainer {
+  display: flex;
+}
+
+.switchContainerHidden {
+  display: none;
+}
+
+.code {
+  padding: 10px 6px;
+}
+
+.codeBlock {
+  margin: 0;
+  padding: 6px;
+  overflow-x: auto;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx b/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx
new file mode 100644
index 000000000..f9bd0d79c
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useCode } from '@mui/internal-docs-infra/useCode';
+import { LabeledSwitch } from '@/components/LabeledSwitch';
+import { Tabs } from '@/components/Tabs';
+import { CopyButton } from '@/components/CopyButton';
+import { Select } from '@/components/Select';
+import styles from './CodeContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+const variantNames: Record<string, string | undefined> = {
+  CssModules: 'CSS Modules',
+};
+
+export function CodeContent(props: ContentProps<object>) {
+  const code = useCode(props, { preClassName: styles.codeBlock });
+
+  const hasJsTransform = code.availableTransforms.includes('js');
+  const isJsSelected = code.selectedTransform === 'js';
+
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      code.selectTransform(checked ? 'js' : null);
+    },
+    [code],
+  );
+
+  const tabs = React.useMemo(
+    () => code.files.map(({ name }) => ({ id: name, name })),
+    [code.files],
+  );
+  const variants = React.useMemo(
+    () =>
+      code.variants.map((variant) => ({ value: variant, label: variantNames[variant] || variant })),
+    [code.variants],
+  );
+
+  return (
+    <div>
+      {code.allFilesSlugs.map(({ slug }) => (
+        <span key={slug} id={slug} />
+      ))}
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.headerContainer}>
+            <div className={styles.tabContainer}>
+              <Tabs
+                tabs={tabs}
+                selectedTabId={code.selectedFileName}
+                onTabSelect={code.selectFileName}
+              />
+            </div>
+            <div className={styles.headerActions}>
+              <CopyButton copy={code.copy} />
+              {code.variants.length > 1 && (
+                <Select
+                  items={variants}
+                  value={code.selectedVariant}
+                  onValueChange={code.selectVariant}
+                />
+              )}
+              {hasJsTransform && (
+                <div className={styles.switchContainer}>
+                  <LabeledSwitch
+                    checked={isJsSelected}
+                    onCheckedChange={toggleJs}
+                    labels={labels}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className={styles.code}>{code.selectedFile}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.module.css b/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.module.css
new file mode 100644
index 000000000..12df79db7
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.module.css
@@ -0,0 +1,73 @@
+.container {
+  border: 1px solid #d0cdd7;
+  border-radius: 8px;
+}
+
+.demoSection {
+  padding: 24px;
+  border-radius: 7px 7px 0 0;
+}
+
+.codeSection {
+  border-top: 1px solid #d0cdd7;
+}
+
+.header {
+  border-bottom: 1px solid #d0cdd7;
+  height: 48px;
+  position: relative;
+}
+
+.headerContainer {
+  position: absolute;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.headerContainer:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  margin: -1px;
+  background-color: #d0cdd7;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 8px;
+  height: 48px;
+}
+
+.tabContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: -1px;
+  padding-bottom: 2px;
+  overflow-x: auto;
+}
+
+.switchContainer {
+  display: flex;
+}
+
+.switchContainerHidden {
+  display: none;
+}
+
+.code {
+  padding: 10px 6px;
+}
+
+.codeBlock {
+  margin: 0;
+  padding: 6px;
+  overflow-x: auto;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.tsx b/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.tsx
new file mode 100644
index 000000000..294339889
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/DemoContent.tsx
@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { useDemo } from '@mui/internal-docs-infra/useDemo';
+import { LabeledSwitch } from '@/components/LabeledSwitch';
+import { Tabs } from '@/components/Tabs';
+import { CopyButton } from '@/components/CopyButton';
+import { Select } from '@/components/Select';
+import styles from './DemoContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+const variantNames: Record<string, string | undefined> = {
+  CssModules: 'CSS Modules',
+};
+
+export function DemoContent(props: ContentProps<object>) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  const hasJsTransform = demo.availableTransforms.includes('js');
+  const isJsSelected = demo.selectedTransform === 'js';
+
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      demo.selectTransform(checked ? 'js' : null);
+    },
+    [demo],
+  );
+
+  const tabs = React.useMemo(
+    () => demo.files.map(({ name, slug }) => ({ id: name, name, slug })),
+    [demo.files],
+  );
+  const variants = React.useMemo(
+    () =>
+      demo.variants.map((variant) => ({ value: variant, label: variantNames[variant] || variant })),
+    [demo.variants],
+  );
+
+  return (
+    <div>
+      {demo.allFilesSlugs.map(({ slug }) => (
+        <span key={slug} id={slug} className={styles.fileRefs} />
+      ))}
+      <div className={styles.container}>
+        <div className={styles.demoSection}>{demo.component}</div>
+        <div className={styles.codeSection}>
+          <div className={styles.header}>
+            <div className={styles.headerContainer}>
+              <div className={styles.tabContainer}>
+                <Tabs
+                  tabs={tabs}
+                  selectedTabId={demo.selectedFileName}
+                  onTabSelect={demo.selectFileName}
+                />
+              </div>
+              <div className={styles.headerActions}>
+                <CopyButton copy={demo.copy} />
+                {demo.variants.length > 1 && (
+                  <Select
+                    items={variants}
+                    value={demo.selectedVariant}
+                    onValueChange={demo.selectVariant}
+                  />
+                )}
+                {hasJsTransform && (
+                  <div className={styles.switchContainer}>
+                    <LabeledSwitch
+                      checked={isJsSelected}
+                      onCheckedChange={toggleJs}
+                      labels={labels}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className={styles.code}>{demo.selectedFile}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.module.css b/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.module.css
new file mode 100644
index 000000000..3730bdb61
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.module.css
@@ -0,0 +1,7 @@
+.link {
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.tsx b/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.tsx
new file mode 100644
index 000000000..3c6db1e10
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/DemoTitle.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import style from './DemoTitle.module.css';
+
+export function DemoTitle({ slug, children }: { slug?: string; children?: React.ReactNode }) {
+  return slug ? (
+    <h3 id={slug}>
+      <a href={`#${slug}`} className={style.link}>
+        {children}
+      </a>
+    </h3>
+  ) : (
+    <h3>{children}</h3>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/BasicCode.tsx b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/BasicCode.tsx
new file mode 100644
index 000000000..a75d04ead
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/BasicCode.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Code } from './Code';
+
+export function BasicCode() {
+  return <Code fileName="hello.js">{`console.log('Hello, world!');`}</Code>;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/Code.tsx b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/Code.tsx
new file mode 100644
index 000000000..72b75b3ce
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/Code.tsx
@@ -0,0 +1,22 @@
+import 'server-only';
+
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+import { CodeContent } from '../CodeContent';
+
+const sourceParser = createParseSource();
+
+export function Code({ children, fileName }: { children: string; fileName?: string }) {
+  return (
+    <CodeHighlighter
+      fileName={fileName}
+      Content={CodeContent}
+      sourceParser={sourceParser}
+      highlightAfter="idle"
+    >
+      {children}
+    </CodeHighlighter>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/index.ts
new file mode 100644
index 000000000..89ace6b81
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-highlight-idle/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from '@/functions/createDemo';
+import { BasicCode } from './BasicCode';
+
+export const DemoCodeHighlighterCodeHighlightIdle = createDemo(import.meta.url, BasicCode);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/BasicCode.tsx b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/BasicCode.tsx
new file mode 100644
index 000000000..5fc1eefda
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/BasicCode.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Code } from './Code';
+
+export function BasicCode() {
+  return (
+    <Code fileName="example.ts">{`const x: number = 1;\ninterface Props { name: string; }`}</Code>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/Code.tsx b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/Code.tsx
new file mode 100644
index 000000000..da1ff3de1
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/Code.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+import { TypescriptToJavascriptTransformer } from '@mui/internal-docs-infra/pipeline/transformTypescriptToJavascript';
+
+import { CodeContent } from '../CodeContent';
+
+const sourceParser = createParseSource();
+const sourceTransformers = [TypescriptToJavascriptTransformer];
+
+export function Code({ children, fileName }: { children: string; fileName?: string }) {
+  return (
+    <CodeHighlighter
+      fileName={fileName}
+      Content={CodeContent}
+      sourceParser={sourceParser}
+      sourceTransformers={sourceTransformers}
+    >
+      {children}
+    </CodeHighlighter>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/index.ts
new file mode 100644
index 000000000..5f3c1b1d1
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code-transformed/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from '@/functions/createDemo';
+import { BasicCode } from './BasicCode';
+
+export const DemoCodeHighlighterCodeTransformed = createDemo(import.meta.url, BasicCode);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code/BasicCode.tsx b/docs/app/docs-infra/components/code-highlighter/demos/code/BasicCode.tsx
new file mode 100644
index 000000000..5a1714086
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code/BasicCode.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Code } from '../Code';
+
+export function BasicCode() {
+  return <Code fileName="hello.js">{`console.log('Hello, world!');`}</Code>;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/code/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/code/index.ts
new file mode 100644
index 000000000..f96e3f96a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/code/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { BasicCode } from './BasicCode';
+
+export const DemoCodeHighlighterCode = createDemo(import.meta.url, BasicCode, {
+  name: 'Simple Code Block',
+  slug: 'simple-code-block',
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/createDemo.ts b/docs/app/docs-infra/components/code-highlighter/demos/createDemo.ts
new file mode 100644
index 000000000..cad815a52
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/createDemo.ts
@@ -0,0 +1,32 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContent } from './DemoContent';
+import { DemoTitle } from './DemoTitle';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContent,
+  DemoTitle,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContent,
+  DemoTitle,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.module.css
new file mode 100644
index 000000000..477566be0
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.module.css
@@ -0,0 +1,3 @@
+.extraFiles {
+  display: none;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx
new file mode 100644
index 000000000..936980ce8
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { Tabs } from '@/components/Tabs';
+import styles from '../DemoContent.module.css';
+import loadingStyles from './DemoContentLoading.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+export function DemoContentLoading(props: ContentLoadingProps<object>) {
+  const tabs = React.useMemo(
+    () =>
+      props.fileNames?.map((name) => ({
+        id: name || '',
+        name: name || '',
+        slug: name,
+      })),
+    [props.fileNames],
+  );
+
+  const onTabSelect = React.useCallback(() => {
+    // No-op
+  }, []);
+
+  return (
+    <div>
+      {Object.keys(props.extraSource || {}).map((slug) => (
+        <span key={slug} id={slug} className={styles.fileRefs} />
+      ))}
+      <div className={styles.container}>
+        <div className={styles.demoSection}>{props.component}</div>
+        <div className={styles.codeSection}>
+          <div className={styles.header}>
+            <div className={styles.headerContainer}>
+              {tabs && (
+                <div className={styles.tabContainer}>
+                  <Tabs
+                    tabs={tabs}
+                    selectedTabId={props.fileNames?.[0]}
+                    onTabSelect={onTabSelect}
+                    disabled={true}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className={styles.code}>
+            <pre className={styles.codeBlock}>{props.source}</pre>
+          </div>
+          <div className={loadingStyles.extraFiles}>
+            {Object.keys(props.extraSource || {}).map((slug) => (
+              <pre key={slug}>{props.extraSource?.[slug]}</pre>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/createDemo.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/createDemo.ts
new file mode 100644
index 000000000..d80be6d2b
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/createDemo.ts
@@ -0,0 +1,34 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContentLoading } from './DemoContentLoading';
+import { DemoContent } from '../DemoContent';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContentLoading,
+  DemoContent,
+  fallbackUsesExtraFiles: true,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContentLoading,
+  DemoContent,
+  fallbackUsesExtraFiles: true,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.module.css
new file mode 100644
index 000000000..c77ad3f1a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.module.css
@@ -0,0 +1,4 @@
+.root {
+  background-color: #e5484d !important;
+  border-color: #e5484d !important;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.tsx
new file mode 100644
index 000000000..adc5f88e6
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/CheckboxRed.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+import styles from './CheckboxRed.module.css';
+
+export function CheckboxRed() {
+  return <Checkbox className={styles.root} defaultChecked />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/index.ts
new file mode 100644
index 000000000..85681b4a7
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/demo-red/index.ts
@@ -0,0 +1,4 @@
+import { CheckboxRed } from './CheckboxRed';
+import { createDemo } from '../createDemo';
+
+export const DemoCheckboxRed = createDemo(import.meta.url, CheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/index.ts
new file mode 100644
index 000000000..224585dc2
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from '../createDemo';
+import { DemoCheckboxRed } from './demo-red';
+
+export const DemoCodeHighlighterDemoFallbackAllFiles = createDemo(import.meta.url, DemoCheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.module.css
new file mode 100644
index 000000000..2d9d5b03d
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.module.css
@@ -0,0 +1,7 @@
+.extraFiles {
+  display: none;
+}
+
+.extraVariants {
+  display: none;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx
new file mode 100644
index 000000000..069c8d4aa
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx
@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { Tabs } from '@/components/Tabs';
+import { Select } from '@/components/Select';
+import styles from '../DemoContent.module.css';
+import loadingStyles from './DemoContentLoading.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+const variantNames: Record<string, string | undefined> = {
+  CssModules: 'CSS Modules',
+};
+
+export function DemoContentLoading(props: ContentLoadingProps<object>) {
+  const tabs = React.useMemo(
+    () =>
+      props.fileNames?.map((name) => ({
+        id: name || '',
+        name: name || '',
+        slug: name,
+      })),
+    [props.fileNames],
+  );
+  const variants = React.useMemo(
+    () =>
+      Object.keys(props.components || {}).map((variant) => ({
+        value: variant,
+        label: variantNames[variant] || variant,
+      })),
+    [props.components],
+  );
+
+  const onTabSelect = React.useCallback(() => {
+    // Handle tab selection
+  }, []);
+
+  return (
+    <div>
+      {Object.keys(props.extraSource || {}).map((slug) => (
+        <span key={slug} id={slug} className={styles.fileRefs} />
+      ))}
+      <div className={styles.container}>
+        <div className={styles.demoSection}>{props.component}</div>
+        <div className={styles.codeSection}>
+          <div className={styles.header}>
+            <div className={styles.headerContainer}>
+              {tabs && (
+                <div className={styles.tabContainer}>
+                  <Tabs
+                    tabs={tabs}
+                    selectedTabId={props.fileNames?.[0]}
+                    onTabSelect={onTabSelect}
+                    disabled={true}
+                  />
+                </div>
+              )}
+              <div className={styles.headerActions}>
+                {Object.keys(props.extraVariants || {}).length >= 1 && (
+                  <Select items={variants} value={variants[0]?.value} disabled={true} />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className={styles.code}>
+            <pre className={styles.codeBlock}>{props.source}</pre>
+          </div>
+          <div className={loadingStyles.extraFiles}>
+            {Object.keys(props.extraSource || {}).map((slug) => (
+              <pre key={slug}>{props.extraSource?.[slug]}</pre>
+            ))}
+          </div>
+          <div className={loadingStyles.extraVariants}>
+            {Object.keys(props.extraVariants || {}).map((slug) => (
+              <div key={slug} className={loadingStyles.extraVariant}>
+                <span>{slug}</span>
+                <pre>
+                  {Object.keys(props.extraVariants?.[slug].extraSource || {}).map((key) => (
+                    <div key={key}>
+                      <strong>{key}:</strong> {props.extraVariants?.[slug]?.extraSource?.[key]}
+                    </div>
+                  ))}
+                </pre>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/createDemo.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/createDemo.ts
new file mode 100644
index 000000000..c1c5cfda4
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/createDemo.ts
@@ -0,0 +1,34 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContentLoading } from './DemoContentLoading';
+import { DemoContent } from '../DemoContent';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContentLoading,
+  DemoContent,
+  fallbackUsesAllVariants: true,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContentLoading,
+  DemoContent,
+  fallbackUsesAllVariants: true,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.module.css
new file mode 100644
index 000000000..c77ad3f1a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.module.css
@@ -0,0 +1,4 @@
+.root {
+  background-color: #e5484d !important;
+  border-color: #e5484d !important;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.tsx
new file mode 100644
index 000000000..1df8d8c02
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/css-modules/CheckboxRed.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+import styles from './CheckboxRed.module.css';
+
+export function CheckboxRed() {
+  return <Checkbox defaultChecked className={styles.root} />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/index.ts
new file mode 100644
index 000000000..41414b9f2
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/index.ts
@@ -0,0 +1,5 @@
+import { CheckboxRed as CssModules } from './css-modules/CheckboxRed';
+import { CheckboxRed as Tailwind } from './tailwind/CheckboxRed';
+import { createDemoWithVariants } from '../createDemo';
+
+export const DemoCheckboxRed = createDemoWithVariants(import.meta.url, { CssModules, Tailwind });
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/tailwind/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/tailwind/CheckboxRed.tsx
new file mode 100644
index 000000000..6ae30479a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/demo-red/tailwind/CheckboxRed.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export function CheckboxRed() {
+  return <Checkbox defaultChecked className="bg-red-500" />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/index.ts
new file mode 100644
index 000000000..353da190a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from './createDemo';
+import { DemoCheckboxRed } from './demo-red';
+
+export const DemoCodeHighlighterFallbackAllVariants = createDemo(import.meta.url, DemoCheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.module.css
new file mode 100644
index 000000000..2d9d5b03d
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.module.css
@@ -0,0 +1,7 @@
+.extraFiles {
+  display: none;
+}
+
+.extraVariants {
+  display: none;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx
new file mode 100644
index 000000000..c9f806ced
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import * as React from 'react';
+import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { Tabs } from '@/components/Tabs';
+import styles from '../DemoContent.module.css';
+
+import '@wooorm/starry-night/style/light';
+
+export function DemoContentLoading(props: ContentLoadingProps<object>) {
+  const tabs = React.useMemo(
+    () =>
+      props.fileNames?.map((name) => ({
+        id: name || '',
+        name: name || '',
+        slug: name,
+      })),
+    [props.fileNames],
+  );
+
+  const onTabSelect = React.useCallback(() => {
+    // No-op
+  }, []);
+
+  return (
+    <div>
+      {Object.keys(props.extraSource || {}).map((slug) => (
+        <span key={slug} id={slug} className={styles.fileRefs} />
+      ))}
+      <div className={styles.container}>
+        <div className={styles.demoSection}>{props.component}</div>
+        <div className={styles.codeSection}>
+          <div className={styles.header}>
+            <div className={styles.headerContainer}>
+              {tabs && (
+                <div className={styles.tabContainer}>
+                  <Tabs
+                    tabs={tabs}
+                    selectedTabId={props.fileNames?.[0]}
+                    onTabSelect={onTabSelect}
+                    disabled={true}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <div className={styles.code}>
+            <pre className={styles.codeBlock}>{props.source}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/createDemo.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/createDemo.ts
new file mode 100644
index 000000000..63dc52301
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/createDemo.ts
@@ -0,0 +1,32 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContentLoading } from './DemoContentLoading';
+import { DemoContent } from '../DemoContent';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContentLoading,
+  DemoContent,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContentLoading,
+  DemoContent,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.module.css
new file mode 100644
index 000000000..c77ad3f1a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.module.css
@@ -0,0 +1,4 @@
+.root {
+  background-color: #e5484d !important;
+  border-color: #e5484d !important;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.tsx
new file mode 100644
index 000000000..adc5f88e6
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/CheckboxRed.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+import styles from './CheckboxRed.module.css';
+
+export function CheckboxRed() {
+  return <Checkbox className={styles.root} defaultChecked />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/index.ts
new file mode 100644
index 000000000..85681b4a7
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/demo-red/index.ts
@@ -0,0 +1,4 @@
+import { CheckboxRed } from './CheckboxRed';
+import { createDemo } from '../createDemo';
+
+export const DemoCheckboxRed = createDemo(import.meta.url, CheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/index.ts
new file mode 100644
index 000000000..6432bec77
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from '../createDemo';
+import { DemoCheckboxRed } from './demo-red';
+
+export const DemoCodeHighlighterDemoFallback = createDemo(import.meta.url, DemoCheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/createDemo.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/createDemo.ts
new file mode 100644
index 000000000..be69d1691
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/createDemo.ts
@@ -0,0 +1,40 @@
+import 'server-only';
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+import { loadServerCodeMeta } from '@mui/internal-docs-infra/pipeline/loadServerCodeMeta';
+import { loadServerSource } from '@mui/internal-docs-infra/pipeline/loadServerSource';
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+import { DemoContent } from '../DemoContent';
+
+const sourceParser = createParseSource();
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContent,
+  loadCodeMeta: loadServerCodeMeta,
+  loadSource: loadServerSource,
+  sourceParser,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContent,
+  loadCodeMeta: loadServerCodeMeta,
+  loadSource: loadServerSource,
+  sourceParser,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/CheckboxBasic.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/CheckboxBasic.tsx
new file mode 100644
index 000000000..adcf3533a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/CheckboxBasic.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export function CheckboxBasic() {
+  return <Checkbox defaultChecked />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/index.ts
new file mode 100644
index 000000000..1bf75e8fd
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/demo-basic/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '../createDemo';
+import { CheckboxBasic } from './CheckboxBasic';
+
+export const DemoCheckboxBasic = createDemo(import.meta.url, CheckboxBasic, {
+  skipPrecompute: true,
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/index.ts
new file mode 100644
index 000000000..f2baa4d2d
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-server-loaded/index.ts
@@ -0,0 +1,4 @@
+import { createDemo } from '@/functions/createDemo';
+import { DemoCheckboxBasic } from './demo-basic';
+
+export const DemoCodeHighlighterDemoServerLoaded = createDemo(import.meta.url, DemoCheckboxBasic);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.module.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.module.css
new file mode 100644
index 000000000..c77ad3f1a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.module.css
@@ -0,0 +1,4 @@
+.root {
+  background-color: #e5484d !important;
+  border-color: #e5484d !important;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.tsx
new file mode 100644
index 000000000..1df8d8c02
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+import styles from './CheckboxRed.module.css';
+
+export function CheckboxRed() {
+  return <Checkbox defaultChecked className={styles.root} />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/index.ts
new file mode 100644
index 000000000..f929ef432
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/index.ts
@@ -0,0 +1,5 @@
+import { CheckboxRed as CssModules } from './css-modules/CheckboxRed';
+import { CheckboxRed as Tailwind } from './tailwind/CheckboxRed';
+import { createDemoWithVariants } from '../../createDemo';
+
+export const DemoCheckboxRed = createDemoWithVariants(import.meta.url, { CssModules, Tailwind });
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/tailwind/CheckboxRed.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/tailwind/CheckboxRed.tsx
new file mode 100644
index 000000000..f1c788638
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/demo-default/tailwind/CheckboxRed.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export function CheckboxRed() {
+  return <Checkbox defaultChecked className="bg-red-500 border-red-500" />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/index.ts
new file mode 100644
index 000000000..53b54f593
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '@/functions/createDemo';
+import { DemoCheckboxRed } from './demo-default';
+
+import './mock-tailwind.css';
+
+export const DemoCodeHighlighterDemoVariants = createDemo(import.meta.url, DemoCheckboxRed);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/mock-tailwind.css b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/mock-tailwind.css
new file mode 100644
index 000000000..e96e40437
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo-variants/mock-tailwind.css
@@ -0,0 +1,7 @@
+.bg-red-500 {
+  background-color: rgba(239, 68, 68) !important;
+}
+
+.border-red-500 {
+  border-color: rgba(239, 68, 68) !important;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/CheckboxBasic.tsx b/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/CheckboxBasic.tsx
new file mode 100644
index 000000000..adcf3533a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/CheckboxBasic.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export function CheckboxBasic() {
+  return <Checkbox defaultChecked />;
+}
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/index.ts
new file mode 100644
index 000000000..6406561d5
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo/demo-basic/index.ts
@@ -0,0 +1,4 @@
+import { CheckboxBasic } from './CheckboxBasic';
+import { createDemo } from '../../createDemo';
+
+export const DemoCheckboxBasic = createDemo(import.meta.url, CheckboxBasic);
diff --git a/docs/app/docs-infra/components/code-highlighter/demos/demo/index.ts b/docs/app/docs-infra/components/code-highlighter/demos/demo/index.ts
new file mode 100644
index 000000000..3c053b4e5
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/demos/demo/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { DemoCheckboxBasic } from './demo-basic';
+
+export const DemoCodeHighlighterDemo = createDemo(import.meta.url, DemoCheckboxBasic, {
+  name: 'Interactive Demo',
+  slug: 'interactive-demo',
+});
diff --git a/docs/app/docs-infra/components/code-highlighter/page.mdx b/docs/app/docs-infra/components/code-highlighter/page.mdx
new file mode 100644
index 000000000..8dac5e77a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-highlighter/page.mdx
@@ -0,0 +1,674 @@
+# Code Highlighter
+
+The `CodeHighlighter` component provides a powerful and flexible way to display interactive code examples with syntax highlighting, multiple variants, and live previews.
+It supports both static code blocks and interactive demos with component previews.
+
+The component uses the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) to work seamlessly across server and client boundaries, allowing progressive enhancement from static code to interactive demos.
+
+## Features
+
+- **Syntax highlighting** with support for multiple languages using [Starry Night](https://github.com/wooorm/starry-night)
+- **Live component previews** alongside code
+- **Multiple Variant** support for showing different implementation styles
+- **Automatic Transformations** from TypeScript to JavaScript
+- **Lazy loading** with fallback content
+- **Lazy syntax highlighting** for performance optimization
+- **Customizable content renderers**
+- **Hybrid rendering** support for build, server, or client-time loading, parsing, and transforming
+- **Webpack integration** for build-time pre-computation
+
+## Basic Usage
+
+Let's start with the fundamentals. `CodeHighlighter` can display simple code blocks with syntax highlighting, perfect for documentation where you just need to show code examples:
+
+import { DemoCodeHighlighterCode } from './demos/code';
+
+<DemoCodeHighlighterCode.Title />
+
+We can use it to highlight code snippets in various languages, like JavaScript, TypeScript, or even CSS.
+
+<DemoCodeHighlighterCode />
+
+[See Demo](./demos/code/)
+
+But `CodeHighlighter` really shines when you want to combine working React components with their source code. This creates an interactive experience where users can see both the rendered output and the implementation.
+
+import { DemoCodeHighlighterDemo } from './demos/demo';
+
+<DemoCodeHighlighterDemo.Title />
+
+<DemoCodeHighlighterDemo />
+
+[See Demo](./demos/demo/)
+
+## Demo Factory Pattern
+
+> [!TIP]
+> New to the overall approach? See the broader [Built Factories Pattern](../../patterns/built-factories/) for why factories use `import.meta.url`, how variants are derived, and the server vs client split.
+
+> [!NOTE]
+> Before you can use `createDemo()` in your demos, you must first create this factory function in your repo (see the [`abstractCreateDemo`](../../functions/abstract-create-demo/page.mdx#implementation) docs for details).
+
+To unlock `CodeHighlighter`'s full potential—especially build-time optimization—you'll need to use the factory pattern. This isn't just a convention; it's **required** for precomputation to work.
+
+The factory pattern uses `createDemo()` to structure your demos in a way that the webpack loader can process and cache at build time.
+You implement `createDemo` within your app using [`abstractCreateDemo`](../../functions/abstract-create-demo/page.mdx#implementation) to define the structure and behavior of your demos.
+
+### Factory Structure
+
+All demos must use this structure in an `index.ts` file:
+
+```typescript
+// app/components/checkbox/demos/basic/index.ts
+import { createDemo } from '../createDemo';
+import { Checkbox } from './Checkbox';
+
+export const DemoCheckboxBasic = createDemo(import.meta.url, Checkbox);
+```
+
+For multiple variants:
+
+```typescript
+// app/components/checkbox/demos/basic/index.ts
+import { createDemoWithVariants } from '../createDemo';
+import { Checkbox as CssModules } from './css-modules/Checkbox';
+import { Checkbox as Tailwind } from './tailwind/Checkbox';
+
+export const DemoCheckboxBasic = createDemoWithVariants(import.meta.url, { CssModules, Tailwind });
+```
+
+### Demo File Structure
+
+When using the factory pattern with precomputation, organize your demo files like this:
+
+```
+app/components/checkbox/demos/
+  basic/
+    index.ts             # Factory file (processed by webpack loader)
+    Checkbox.tsx         # Component implementation
+    Checkbox.module.css  # Dependencies (auto-loaded)
+```
+
+This follows Next.js' file based routing conventions, similar to how `app/components/checkbox/page.tsx` is built as a "page",
+`app/components/checkbox/demos/basic/index.ts` is built as a "demo".
+
+This also allows demo components to follow internal naming conventions, like `CheckboxBasic.tsx` that has a named export of `CheckboxBasic`, while the demo itself can be loaded by importing `./demos/basic` (without needing to specify the index file).
+
+It allows imports to remain the same when variants are added, e.g. `import { DemoCheckboxBasic } from './demos/basic'` will still work even if the demo is split into multiple variants.
+
+```
+app/components/checkbox/demos/
+  basic/
+    index.ts               # Factory file (processed by webpack loader)
+    tailwind/
+      index.ts             # Simple re-export of the implementation (optional)
+      Checkbox.tsx         # Component implementation
+    css-modules/
+      index.ts             # Simple re-export of the implementation (optional)
+      Checkbox.tsx         # Component implementation
+      Checkbox.module.css  # Dependencies (auto-loaded)
+```
+
+### Webpack Loader Integration
+
+The precomputation is handled by a webpack loader that processes demo files at build time, enabling caching by the contents of the demo index file and all of its dependencies.
+
+> [!NOTE]
+> For detailed information about the webpack loader implementation, configuration, and advanced usage, see the [Precompute Loader Documentation](../../functions/load-precomputed-code-highlighter/page.mdx).
+
+> [!TIP]
+> **Client-Side Implementation**: For client-side loading, highlighting, and transforms, see the [Code Provider Documentation](../code-provider/page.mdx) which provides detailed examples of runtime processing.
+
+**Important**: Precomputation only works:
+
+- [✓] In files matching the webpack loader pattern (default: `./app/**/demos/*/index.ts`)
+- [✓] Using `createDemo()`
+- [✓] In both main demos and nested demo examples
+- [x] Not in direct `CodeHighlighter` usage
+- [x] Not in files outside the configured loader pattern
+
+## Advanced Features
+
+Once you've mastered the basics, `CodeHighlighter` offers several powerful features for more sophisticated use cases.
+
+import { DemoCodeHighlighterDemoVariants } from './demos/demo-variants';
+
+<DemoCodeHighlighterDemoVariants.Title />
+
+Sometimes you want to show different approaches to the same problem: CSS Modules versus Tailwind, Hooks or Blocks pattern, or different implementation strategies.
+`CodeHighlighter` makes this seamless with variant switching.
+Your components can even appear differently, but we recommend keeping them as similar as possible to avoid confusion.
+
+<DemoCodeHighlighterDemoVariants />
+
+[See Demo](./demos/demo-variants/)
+
+---
+
+import { DemoCodeHighlighterCodeTransformed } from './demos/code-transformed';
+
+<DemoCodeHighlighterCodeTransformed.Title />
+
+One of CodeHighlighter's most powerful features is automatic code transformation. Write your examples in TypeScript, and users can instantly see the JavaScript equivalent:
+
+<DemoCodeHighlighterCodeTransformed />
+
+[See Demo](./demos/code-transformed/)
+
+---
+
+import { DemoCodeHighlighterCodeHighlightIdle } from './demos/code-highlight-idle';
+
+<DemoCodeHighlighterCodeHighlightIdle.Title />
+
+For pages with many code examples, you can defer syntax highlighting until the browser is idle, keeping your initial page loads fast:
+
+<DemoCodeHighlighterCodeHighlightIdle />
+
+[See Demo](./demos/code-highlight-idle/)
+
+---
+
+import { DemoCodeHighlighterDemoFallback } from './demos/demo-fallback';
+
+<DemoCodeHighlighterDemoFallback.Title />
+
+Good user experience means showing meaningful feedback during loading.
+The fallback content is also what search engines and AI bots see in the initial HTML, making it crucial for SEO and content discovery.
+`CodeHighlighter` supports custom loading components and skeleton loaders:
+
+<DemoCodeHighlighterDemoFallback />
+
+[See Demo](./demos/demo-fallback/)
+
+---
+
+import { DemoCodeHighlighterDemoFallbackAllFiles } from './demos/demo-fallback-all-files';
+
+<DemoCodeHighlighterDemoFallbackAllFiles.Title />
+
+When `fallbackUsesExtraFiles` is enabled, the fallback content receives all extra files from the selected variant. This means search engines and AI bots will see all the component's related files (CSS, utilities, etc.) in the initial HTML, improving content discoverability. Note that the complete list of filenames is always available for navigation, regardless of this setting:
+
+<DemoCodeHighlighterDemoFallbackAllFiles />
+
+[See Demo](./demos/demo-fallback-all-files/)
+
+---
+
+import { DemoCodeHighlighterFallbackAllVariants } from './demos/demo-fallback-all-variants';
+
+<DemoCodeHighlighterFallbackAllVariants.Title />
+
+When `fallbackUsesAllVariants` is enabled, the fallback content receives data for all available variants. This ensures that search engines and AI bots can see all implementation approaches (CSS Modules, Tailwind, etc.) in the initial HTML, making your documentation more comprehensive for automated indexing. Note that the complete list of filenames is always available for navigation, regardless of this setting:
+
+<DemoCodeHighlighterFallbackAllVariants />
+
+[See Demo](./demos/demo-fallback-all-variants/)
+
+---
+
+import { DemoCodeHighlighterDemoServerLoaded } from './demos/demo-server-loaded';
+
+<DemoCodeHighlighterDemoServerLoaded.Title />
+
+For more dynamic use cases, you can load code content from external sources or APIs at runtime:
+
+> [!NOTE]
+> This example uses React Server Components (RSC) to load and parse files at request time instead of relying on the webpack loader for build-time precomputation. This approach is recommended when rendering based on dynamic routes (like `app/components/[component].tsx`) where the content isn't known at build time. In these scenarios, you'd typically use the `<CodeHighlighter>` component directly rather than the factory pattern with `createDemo()`.
+
+<DemoCodeHighlighterDemoServerLoaded />
+
+[See Demo](./demos/demo-server-loaded/)
+
+### Client-Side Rendering
+
+`CodeHighlighter` can also be used on the client side, allowing you to load and parse code dynamically without server-side rendering. This is useful for applications that fetch code from APIs or databases.
+
+You can do so by using the [`CodeProvider`](../code-provider/page.mdx) component, which provides the necessary context for CodeHighlighter to function correctly on the client.
+
+### Controlled Code Scenarios
+
+`CodeHighlighter` also supports controlled scenarios where you need to manage code state externally. This is useful for interactive demos where code changes affect other parts of your application or when you need to synchronize code across multiple components.
+
+You can use the [`CodeControllerContext`](../code-controller-context/page.mdx) for this purpose, which provides a controlled environment for managing code state in interactive scenarios.
+
+## Authoring Recommendations
+
+### Component Name
+
+Demos are exported as `Demo${componentName}${demoName}` e.g. `DemoCheckboxBasic`
+This makes it easy to import a demo by simply typing `<DemoCheckbox`, and your IDE should display a list of existing demos to auto-import.
+
+### Demo Titles
+
+We recommend exporting a `Title` component attached within your `createDemo()` factory.
+This allows us to use an automatically generated title and slug from the URL of the demo index.
+This ensures that the link for the title is consistent with links to files within the demo itself.
+
+e.g. `./app/components/checkbox/demos/advanced-keyboard/index.ts` would generate a title of `Advanced Keyboard` and a slug of `advanced-keyboard`.
+The URL for this demo would be `/components/checkbox#advanced-keyboard` and a file within it could be `/components/checkbox#advanced-keyboard:file.ts`.
+
+Also, when MDX is rendered in GitHub, `<DemoCheckboxAdvancedKeyboard.Title />` will be visible on the page because it contains the dot.
+The import is also visible, so readers on GitHub will see this in the place of a demo:
+
+```mdx
+import { DemoCheckboxAdvancedKeyboard } from './demos/advanced-keyboard';
+
+<DemoCheckboxAdvancedKeyboard.Title />
+
+Description of the demo.
+```
+
+If this convention isn't followed, URLs might deviate e.g. `/components/checkbox#advanced-keyboard` might not link to the correct demo.
+
+```mdx
+// This is not recommended
+import { DemoCheckboxAdvancedKeyboard } from './demos/advanced-keyboard'
+
+### An Advanced Keyboard Demo
+
+Description of the demo.
+
+<DemoCheckboxAdvancedKeyboard />
+```
+
+This would result in the URL becoming `/components/checkbox#an-advanced-keyboard-demo`, and the file URL being `/components/checkbox#advanced-keyboard:file.ts`, which is not expected.
+
+### Descriptions
+
+The description should be a short, concise explanation of what the demo does or why it shows a useful case.
+It is located directly in the component's docs because it can have rich contents like links, images, or other components.
+Try to avoid referring directly to the demo itself as when viewing the raw markdown, users won't see the code or renderings from the demo.
+Ideally, the reader can picture the demo in their mind without needing to see it.
+
+### Link to Demo
+
+Include a "See Demo" link after each demo component to allow users to navigate directly to the demo's source directory. This is especially useful when viewing the documentation in markdown editors or GitHub, where users can click the link to browse the demo files.
+
+The link should point to the demo's directory using a relative path:
+
+```mdx
+<DemoCheckboxBasic />
+
+[See Demo](./demos/basic/)
+```
+
+This pattern makes it easy for developers to explore the demo's implementation, understand the file structure, and reference the source code when building their own components.
+
+### Separators
+
+Use horizontal rules (`---`) to separate different sections of the demo. This allows the description of the previous demo to be visually distinct from the next demo.
+
+```mdx
+import { DemoCheckboxBasic } from './demos/basic';
+
+<DemoCheckboxBasic.Title />
+
+Description of the basic demo.
+
+<DemoCheckboxBasic />
+
+[See Demo](./demos/basic/)
+
+---
+
+import { DemoCheckboxAdvanced } from './demos/second-demo';
+
+<DemoCheckboxAdvanced.Title />
+
+Description of the second demo.
+
+<DemoCheckboxAdvanced />
+
+[See Demo](./demos/second-demo/)
+```
+
+Within GitHub, it will display like this without rendering the demo and with `See Demo` underlined:
+
+```mdx
+import { DemoCheckboxBasic } from './demos/basic';
+
+<DemoCheckboxBasic.Title />
+
+Description of the basic demo.
+
+See Demo
+
+---
+
+import { DemoCheckboxAdvanced } from './demos/advanced';
+
+<DemoCheckboxAdvanced.Title />
+
+Description of the advanced demo.
+
+See Demo
+```
+
+> [!TIP]
+> **For Documentation Tooling**: If you're building tooling to render these demos in a web interface, you can use a remark plugin to automatically remove the "See Demo" links and horizontal rule separators (`---`) from the rendered output, since the interactive demos provide their own navigation. See the [`transformMarkdownDemoLinks`](../../functions/transform-markdown-demo-links/) plugin documentation for implementation details.
+
+## Build-Time vs Server Rendering vs Client Rendering
+
+> [!NOTE]
+> The [`CodeControllerContext`](../code-controller-context/page.mdx) works with all three rendering methods.
+
+When rendering a code block, the user should consider the following options based on their use case:
+
+### Build-Time (Recommended)
+
+Use the factory pattern optimal performance:
+
+**Advantages:**
+
+- [✓] Faster initial load times
+- [✓] Isomorphic rendering support
+- [✓] Automatic caching based on dependencies for each demo
+
+**Requirements:**
+
+- Must use `createDemo()` in `index.ts` files
+- Must be in a demo directory structure
+
+### Server Rendering
+
+Use direct `CodeHighlighter` for dynamic content:
+
+**Advantages:**
+
+- [✓] Works with dynamic content
+- [✓] Flexible component structure
+- [✓] Can still benefit from the page level cache
+
+**Trade-offs:**
+
+- [x] Slower initial rendering
+- [x] No per-demo build-time cache
+- [x] Can only be used within a Server Component
+
+### Client Rendering
+
+Use `CodeHighlighter` on the client with [`CodeProvider`](../code-provider/page.mdx):
+
+**Advantages:**
+
+- [✓] Works with dynamic content fetched on the client
+- [✓] Doesn't require an API or server-side rendering
+- [✓] Can be used anywhere in the app
+- [✓] Flexible component structure
+
+**Trade-offs:**
+
+- [x] Slower initial rendering
+- [x] Requires loading and highlighting functions to be bundled
+- x No automatic caching
+
+## API Reference
+
+### Props
+
+The `CodeHighlighter` component accepts the following props:
+
+#### Required Props
+
+- `Content` (React.ComponentType): Component to render the code content
+
+#### Core Props
+
+- `name` (string): Display name for the demo
+- `slug` (string): URL-friendly identifier
+- `code` (Code): Precomputed code variants
+- `components` (Components): React components for live preview
+- `variants` (string[]): Available code variant names
+- `variant` (string): Currently selected variant
+- `fileName` (string): Display name for the file
+- `url` (string): Unique identifier for the code source
+- `contentProps` (T): Additional props passed to the Content component
+
+#### Variant Control Props
+
+- `initialVariant` (string): Initial variant to display on first render
+- `defaultVariant` (string): Default variant to fall back to
+- `precompute` (Code): Precomputed code for build-time optimization
+- `controlled` (boolean): Enable controlled mode
+- `children` (string): Direct code content (for CodeHighlighterBaseProps)
+
+#### Rendering Props
+
+- `highlightAfter` ('init' | 'stream' | 'hydration' | 'idle'): When to highlight code
+  - **Default**: 'idle'
+- `enhanceAfter` ('init' | 'stream' | 'hydration' | 'idle'): When to enhance code
+  - **Default**: 'idle'
+- `forceClient` (boolean): Force client-side rendering only
+
+#### Loading Props
+
+- `loadCodeMeta` (LoadCodeMeta): Function to load code metadata
+- `loadVariantMeta` (LoadVariantMeta): Function to load variant metadata
+- `loadSource` (LoadSource): Function to load source code
+- `sourceParser` (Promise of ParseSource): Parser for syntax highlighting
+- `sourceTransformers` (SourceTransformer[]): Code transformers
+
+#### Fallback Props
+
+- `ContentLoading` (React.ComponentType): Loading state component
+- `ErrorHandler` (React.ComponentType): Error display component
+- `fallbackUsesExtraFiles` (boolean): Include extra files content in fallback
+- `fallbackUsesAllVariants` (boolean): Include all variants content in fallback
+
+> **SEO & AI Indexing Note**: The `fallbackUsesExtraFiles` and `fallbackUsesAllVariants` options determine what content is included in the initial HTML that search engines and AI bots see. Enabling these options ensures better content discoverability and more comprehensive automated indexing of your code examples.
+
+> **File Navigation**: Regardless of these settings, the complete list of filenames (`fileNames`) is always provided in the fallback content, ensuring users can see the file structure and navigate between files even during loading states.
+
+### Fallback Content Behavior
+
+The fallback content always receives certain data for navigation and UX consistency, while other content depends on the configuration:
+
+**Always Provided:**
+
+- `fileNames` - Complete list of all available files for navigation
+- `name`, `slug`, `url` - Basic demo metadata
+- `component` - The selected variant's React component
+- `components` - Full components object (only when `fallbackUsesAllVariants: true`)
+
+**Conditionally Provided:**
+
+- `source` - Main file content (always for selected variant)
+- `extraSource` - Extra files content (only when `fallbackUsesExtraFiles: true`)
+- `extraVariants` - All variants data (only when `fallbackUsesAllVariants: true`)
+
+## Best Practices
+
+1. **Use precompute for static content** - Enables a per-demo cache for faster builds
+2. **Implement proper loading states** - Provide `ContentLoading` for quicker hydration
+3. **Handle errors gracefully** - Use `ErrorHandler` to display meaningful error messages
+4. **Optimize highlight timing** - Use `highlightAfter: 'idle'` for non-critical code blocks
+5. **Group related variants** - Keep related code variations together
+
+## Troubleshooting
+
+### Common Issues
+
+**Code not highlighting:**
+
+- Ensure `sourceParser` is provided
+- Check that the code variant exists
+- Verify `highlightAfter` timing is appropriate
+
+**Loading states not showing:**
+
+- Provide `ContentLoading` component
+- Use `highlightAfter: 'stream'` for loading states
+- Check `fallbackUsesExtraFiles` settings
+
+**Performance issues:**
+
+- Use demo factory pattern for build-time optimization
+- Consider `highlightAfter: 'idle'` for non-critical code
+- Implement proper error boundaries
+- Remember: precomputation only works with `createDemo()` in `index.ts` files
+
+**Precomputation not working:**
+
+- Ensure you're using `createDemo()` in an `index.ts` file
+- Verify the file is in the correct path pattern: `./app/**/demos/*/index.ts`
+- Make sure the webpack loader is configured correctly
+
+**Variants not switching:**
+
+- Verify variant names match between `components` and `variants`
+- Check that source transformers are configured correctly
+- Ensure controlled mode is set up properly if needed
+
+## Type Definitions
+
+### Basic Types
+
+```typescript
+// Component mapping for live previews
+type Components = {
+  [key: string]: React.ReactNode;
+};
+
+// Content rendering props (generic)
+type ContentProps<T extends {}> = {
+  name?: string;
+  slug?: string;
+  code?: Code;
+  components?: Components;
+} & T;
+```
+
+### Source Types
+
+```typescript
+// Source can be string, HAST nodes, or serialized HAST
+type VariantSource = string | HastNodes | { hastJson: string };
+
+// Transform definitions with deltas
+type Transforms = Record<
+  string,
+  {
+    delta: Delta;
+    fileName?: string;
+  }
+>;
+```
+
+### File Structure Types
+
+```typescript
+// Extra files for a variant
+type VariantExtraFiles = {
+  [fileName: string]:
+    | string
+    | {
+        source?: VariantSource;
+        transforms?: Transforms;
+        skipTransforms?: boolean;
+      };
+};
+
+// Single variant configuration
+type VariantCode = {
+  fileName?: string;
+  url?: string;
+  source?: VariantSource;
+  extraFiles?: VariantExtraFiles;
+  filesOrder?: string[];
+  transforms?: Transforms;
+  allFilesListed?: boolean;
+  skipTransforms?: boolean;
+};
+
+// Code structure for all variants
+type Code = {
+  [key: string]: undefined | string | VariantCode;
+};
+```
+
+### Controlled Code Types
+
+```typescript
+// Controlled extra files (for editable demos)
+type ControlledVariantExtraFiles = {
+  [fileName: string]: { source: string | null };
+};
+
+// Controlled variant code (for editable demos)
+type ControlledVariantCode = {
+  fileName?: string;
+  url?: string;
+  source?: string | null;
+  extraFiles?: ControlledVariantExtraFiles;
+  filesOrder?: string[];
+};
+
+// Controlled code structure (for editable demos)
+type ControlledCode = {
+  [key: string]: undefined | null | ControlledVariantCode;
+};
+```
+
+### Loading Options
+
+```typescript
+// Options for controlling file loading behavior
+interface LoadFileOptions {
+  /** Disable applying source transformers */
+  disableTransforms?: boolean;
+  /** Disable parsing source strings to AST */
+  disableParsing?: boolean;
+  /** Maximum recursion depth for loading nested extra files */
+  maxDepth?: number;
+  /** Set of already loaded file URLs to prevent circular dependencies */
+  loadedFiles?: Set<string>;
+}
+```
+
+### Processing Functions
+
+```typescript
+// Parse source code to HAST nodes
+type ParseSource = (source: string, fileName: string) => HastNodes;
+
+// Transform source code (e.g., TS to JS)
+type TransformSource = (
+  source: string,
+  fileName: string,
+) => Promise<
+  | Record<
+      string,
+      {
+        source: string;
+        fileName?: string;
+      }
+    >
+  | undefined
+>;
+
+// Source transformer configuration
+type SourceTransformer = {
+  extensions: string[];
+  transformer: TransformSource;
+};
+
+type SourceTransformers = Array<SourceTransformer>;
+```
+
+### Loading Functions
+
+```typescript
+// Load source code and extra files
+type LoadSource = (url: string) => Promise<{
+  source: string;
+  extraFiles?: VariantExtraFiles;
+  extraDependencies?: string[];
+}>;
+
+// Load variant-specific metadata
+type LoadVariantMeta = (variantName: string, url: string) => Promise<VariantCode>;
+
+// Load code metadata from URL
+type LoadCodeMeta = (url: string) => Promise<Code>;
+```
diff --git a/docs/app/docs-infra/components/code-provider/demos/Code.tsx b/docs/app/docs-infra/components/code-provider/demos/Code.tsx
new file mode 100644
index 000000000..ed07a0a6c
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/Code.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+import { CodeContent } from '../../code-highlighter/demos/CodeContent';
+
+export function Code({ children, fileName }: { children: string; fileName?: string }) {
+  return (
+    <CodeHighlighter fileName={fileName} Content={CodeContent}>
+      {children}
+    </CodeHighlighter>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-provider/demos/base/BasicCode.tsx b/docs/app/docs-infra/components/code-provider/demos/base/BasicCode.tsx
new file mode 100644
index 000000000..e2b3800b9
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/base/BasicCode.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { Code } from '../../../code-highlighter/demos/Code';
+
+export function BasicCode() {
+  return (
+    <CodeProvider>
+      <Code fileName="example.js">{`console.log('Hello, world!');`}</Code>
+    </CodeProvider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-provider/demos/base/index.ts b/docs/app/docs-infra/components/code-provider/demos/base/index.ts
new file mode 100644
index 000000000..4c1da64b6
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/base/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { BasicCode } from './BasicCode';
+
+export const DemoCodeProviderBase = createDemo(import.meta.url, BasicCode, {
+  name: 'Base Code Provider',
+  slug: 'base',
+});
diff --git a/docs/app/docs-infra/components/code-provider/demos/createDemo.ts b/docs/app/docs-infra/components/code-provider/demos/createDemo.ts
new file mode 100644
index 000000000..15a542a24
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/createDemo.ts
@@ -0,0 +1,30 @@
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContent } from '../../code-highlighter/demos/DemoContent';
+import { DemoTitle } from '../../code-highlighter/demos/DemoTitle';
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContent,
+  DemoTitle,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContent,
+  DemoTitle,
+});
diff --git a/docs/app/docs-infra/components/code-provider/demos/fetch-demo/CodeProviderGitHub.tsx b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/CodeProviderGitHub.tsx
new file mode 100644
index 000000000..456030894
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/CodeProviderGitHub.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import type {
+  LoadCodeMeta,
+  LoadSource,
+  LoadVariantMeta,
+} from '@mui/internal-docs-infra/CodeHighlighter/types';
+
+const loadCodeMeta: LoadCodeMeta = async (url) => {
+  // Extract the part after 'app/' from the URL
+  const urlParts = url.split('app/');
+  if (urlParts.length < 2) {
+    throw new Error('Invalid URL format: expected path containing "app/"');
+  }
+  const pathAfterApp = urlParts[1];
+
+  const response = await fetch(
+    `https://api.github.com/repos/mui/mui-public/contents/packages/docs-infra/docs/app/${pathAfterApp}`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to load code meta: ${response.statusText}`);
+  }
+  const data = await response.json();
+
+  const code: Record<string, string> = {};
+
+  // Handle both single file and directory responses
+  const files = Array.isArray(data) ? data : [data];
+
+  files.forEach(({ type, name }: { type: string; name: string }) => {
+    if (type === 'dir') {
+      code[name] = name;
+    }
+  });
+
+  return code;
+};
+
+const loadVariantMeta: LoadVariantMeta = async (variantName: string, url: string) => {
+  // Extract the part after 'app/' from the URL
+  const urlParts = url.split('app/');
+  if (urlParts.length < 2) {
+    throw new Error('Invalid URL format: expected path containing "app/"');
+  }
+  const pathAfterApp = urlParts[1];
+
+  const response = await fetch(
+    `https://api.github.com/repos/mui/mui-public/contents/packages/docs-infra/docs/app/${pathAfterApp}/${variantName}`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to load variant meta: ${response.statusText}`);
+  }
+  const data = await response.json();
+
+  const extraFiles: Record<string, string> = {};
+
+  // Handle both single file and directory responses
+  const files = Array.isArray(data) ? data : [data];
+
+  files.forEach(({ type, name }: { type: string; name: string }) => {
+    if (type === 'file') {
+      extraFiles[name] = name;
+    }
+  });
+
+  return {
+    fileName: files.find(({ type }: { type: string }) => type === 'file')?.name || 'index.tsx',
+    extraFiles,
+  };
+};
+
+const loadSource: LoadSource = async (url: string) => {
+  // Extract the part after 'app/' from the URL
+  const urlParts = url.split('app/');
+  if (urlParts.length < 2) {
+    throw new Error('Invalid URL format: expected path containing "app/"');
+  }
+  const pathAfterApp = urlParts[1];
+
+  const response = await fetch(
+    `https://raw.githubusercontent.com/mui/mui-public/master/packages/docs-infra/docs/app/${pathAfterApp}`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to load source code: ${response.statusText}`);
+  }
+  return {
+    source: await response.text(),
+  };
+};
+
+export function CodeProviderGitHub({ children }: { children: React.ReactNode }) {
+  return (
+    <CodeProvider
+      loadCodeMeta={loadCodeMeta}
+      loadVariantMeta={loadVariantMeta}
+      loadSource={loadSource}
+    >
+      {children}
+    </CodeProvider>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-provider/demos/fetch-demo/Docs.tsx b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/Docs.tsx
new file mode 100644
index 000000000..813c0aa53
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/Docs.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CodeProviderGitHub } from './CodeProviderGitHub';
+import { DemoCheckboxBasic } from './demo-basic';
+
+export function Docs() {
+  return (
+    <CodeProviderGitHub>
+      <DemoCheckboxBasic />
+    </CodeProviderGitHub>
+  );
+}
diff --git a/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/CheckboxBasic.tsx b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/CheckboxBasic.tsx
new file mode 100644
index 000000000..adcf3533a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/CheckboxBasic.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox } from '@/components/Checkbox';
+
+export function CheckboxBasic() {
+  return <Checkbox defaultChecked />;
+}
diff --git a/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/index.ts b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/index.ts
new file mode 100644
index 000000000..37bc5ec42
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/demo-basic/index.ts
@@ -0,0 +1,6 @@
+import { createDemo } from '../../createDemo';
+import { CheckboxBasic } from './CheckboxBasic';
+
+export const DemoCheckboxBasic = createDemo(import.meta.url, CheckboxBasic, {
+  skipPrecompute: true,
+});
diff --git a/docs/app/docs-infra/components/code-provider/demos/fetch-demo/index.ts b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/index.ts
new file mode 100644
index 000000000..0b2cec11a
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/demos/fetch-demo/index.ts
@@ -0,0 +1,7 @@
+import { createDemo } from '@/functions/createDemo';
+import { Docs } from './Docs';
+
+export const DemoCodeProviderFetchDemo = createDemo(import.meta.url, Docs, {
+  name: 'Fetch Demo Code Provider',
+  slug: 'fetch',
+});
diff --git a/docs/app/docs-infra/components/code-provider/page.mdx b/docs/app/docs-infra/components/code-provider/page.mdx
new file mode 100644
index 000000000..401ea590d
--- /dev/null
+++ b/docs/app/docs-infra/components/code-provider/page.mdx
@@ -0,0 +1,185 @@
+# Code Provider
+
+The `CodeProvider` component provides client-side functions for fetching source code and highlighting it. It's designed for cases where you need to render code blocks or demos based on client-side state or dynamic content loading. It also provides heavy processing functions that are moved from individual components to the context for better performance and code splitting.
+
+`CodeProvider` implements the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) by providing heavy functions via context that can't be serialized across the server-client boundary.
+
+## Features
+
+- **Client-side syntax highlighting** with support for multiple languages using [Starry Night](https://github.com/wooorm/starry-night)
+- **Dynamic code fetching** from external sources or APIs
+- **Context-based API** for sharing highlighting functions across components
+- **Custom loading functions** for different code sources
+- **Browser-only execution** with SSR safety
+- **Heavy function provision** for code processing (parsing, transforming, loading)
+
+## When to Use CodeProvider
+
+Use `CodeProvider` when you need:
+
+- **Dynamic code loading** from external sources or APIs
+- **Client-side code highlighting** without build-time optimization
+- **Custom code fetching logic** for different data sources
+- **Shared highlighting context** across multiple components
+
+> [!NOTE]
+> If you need interactive code editing with shared state management, use the [`CodeControllerContext`](../code-controller-context/page.mdx) instead.
+
+## Basic Usage
+
+The simplest way to use `CodeProvider` is to wrap components that need client-side highlighting:
+
+import { DemoCodeProviderBase } from './demos/base';
+
+<DemoCodeProviderBase.Title />
+
+<DemoCodeProviderBase />
+
+[See Demo](./demos/base/)
+
+---
+
+## Advanced Features
+
+import { DemoCodeProviderFetchDemo } from './demos/fetch-demo';
+
+<DemoCodeProviderFetchDemo.Title />
+
+For more dynamic use cases, you can provide custom loading functions that fetch code from external sources:
+
+{/* <DemoCodeProviderFetchDemo /> */}
+
+[See Demo](./demos/fetch-demo/)
+
+## Integration with CodeHighlighter
+
+`CodeProvider` works seamlessly with `CodeHighlighter` for dynamic content:
+
+```tsx
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import { CodeContent } from './CodeContent';
+
+function DynamicCodeExample() {
+  return (
+    <CodeProvider>
+      <CodeHighlighter Content={CodeContent}>{`console.log("Dynamic code!");`}</CodeHighlighter>
+    </CodeProvider>
+  );
+}
+```
+
+## Custom Loading Functions
+
+You can provide custom functions for loading code from different sources:
+
+```tsx
+import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider';
+import type { LoadCodeMeta, LoadSource } from '@mui/internal-docs-infra/CodeHighlighter';
+
+const loadCodeFromApi: LoadCodeMeta = async (url: string) => {
+  const response = await fetch(`/api/code/${encodeURIComponent(url)}`);
+  return response.json();
+};
+
+const loadSourceFromGitHub: LoadSource = async (url: string) => {
+  const response = await fetch(url.replace('file://', 'https://raw.githubusercontent.com/'));
+  const source = await response.text();
+  return { source };
+};
+
+function MyApp() {
+  return (
+    <CodeProvider loadCodeMeta={loadCodeFromApi} loadSource={loadSourceFromGitHub}>
+      {/* Your components */}
+    </CodeProvider>
+  );
+}
+```
+
+## API Reference
+
+### Props
+
+The `CodeProvider` component accepts the following props:
+
+#### Required Props
+
+- `children` (React.ReactNode): Child components that will have access to the code handling context
+
+#### Optional Props
+
+- `loadCodeMeta` (LoadCodeMeta): Function to load code metadata from a URL
+- `loadVariantMeta` (LoadVariantMeta): Function to load variant-specific metadata
+- `loadSource` (LoadSource): Function to load source code and extra files
+
+### Context Functions
+
+The provider makes these functions available through context:
+
+```typescript
+interface CodeContext {
+  // Async parser promise (for initial loading)
+  sourceParser?: Promise<ParseSource>;
+
+  // Sync parser (available after initial load)
+  parseSource?: ParseSource;
+
+  // Source transformers for code transformation
+  sourceTransformers?: SourceTransformers;
+
+  // Custom loading functions
+  loadSource?: LoadSource;
+  loadVariantMeta?: LoadVariantMeta;
+  loadCodeMeta?: LoadCodeMeta;
+
+  // Heavy functions for code processing (moved from CodeHighlighterClient)
+  loadFallbackCode?: LoadFallbackCodeFn;
+  loadVariant?: LoadVariantFn;
+  parseCode?: ParseCodeFn;
+  parseControlledCode?: ParseControlledCodeFn;
+  applyTransforms?: ApplyTransformsFn;
+  getAvailableTransforms?: GetAvailableTransformsFn;
+}
+```
+
+## Best Practices
+
+1. **Wrap at the appropriate level** - Place `CodeProvider` high enough to cover all components that need highlighting
+2. **Handle loading states** - Remember that highlighting is async, so provide loading feedback
+3. **Use for dynamic content** - `CodeProvider` is perfect for code that can't be precomputed
+4. **Consider performance** - For static content, [precomputed demos](../code-highlighter/page.mdx#demo-factory-pattern) are faster
+5. **Handle errors gracefully** - Custom loading functions should include proper error handling
+
+## Comparison with Other Components
+
+| Feature                | CodeProvider                        | Code Controller            | CodeHighlighter               |
+| ---------------------- | ----------------------------------- | -------------------------- | ----------------------------- |
+| **Purpose**            | Client-side highlighting & fetching | Interactive code editing   | Displaying code with previews |
+| **State management**   | [x] No shared state                 | [✓] Shared editing state   | [x] Component-level only      |
+| **Dynamic loading**    | [✓] Custom loading functions        | [x] Static content focused | [✓] Various loading options   |
+| **User editing**       | [x] Display only                    | [✓] Real-time editing      | [x] Display only              |
+| **Build optimization** | [x] Client-side only                | [✓] Can use precomputation | [✓] Build-time optimization   |
+| **Use case**           | Dynamic code display                | Code playgrounds           | Documentation sites           |
+
+## Troubleshooting
+
+### Common Issues
+
+**Highlighting not working:**
+
+- Ensure components are wrapped in `CodeProvider`
+- Check browser console for loading errors
+- Verify that code is being processed client-side
+
+**Performance issues:**
+
+- Consider using precomputed demos for static content
+- Implement loading states for better UX
+- Cache loaded code when possible
+
+**SSR errors:**
+
+- `CodeProvider` automatically handles SSR safety
+- Use `forceClient` on `CodeHighlighter` when needed
+- Ensure custom loading functions handle server/client differences
diff --git a/docs/app/docs-infra/components/page.mdx b/docs/app/docs-infra/components/page.mdx
new file mode 100644
index 000000000..9226af2d7
--- /dev/null
+++ b/docs/app/docs-infra/components/page.mdx
@@ -0,0 +1,8 @@
+# Components
+
+## Code Highlighting
+
+- [`CodeHighlighter`](./code-highlighter/page.mdx): A component for displaying code snippets with syntax highlighting.
+- [`CodeControllerContext`](./code-controller-context/page.mdx): A React context for controlling the code displayed in live demos.
+- [`CodeExternalsContext`](./code-externals-context/page.mdx): A React context for managing external dependencies in live code demos.
+- [`CodeProvider`](./code-provider/page.mdx): A component that provides code highlighting capabilities to the client.
diff --git a/docs/app/docs-infra/contributing/page.mdx b/docs/app/docs-infra/contributing/page.mdx
new file mode 100644
index 000000000..4fb990263
--- /dev/null
+++ b/docs/app/docs-infra/contributing/page.mdx
@@ -0,0 +1,14 @@
+# Contributing
+
+(coming soon)
+
+## File Conventions
+
+This has some extensions of the [Next.js Filesystem conventions](https://nextjs.org/docs/app/api-reference/file-conventions).
+These patterns apply over the `app` directory, allowing special behavior on the loading of these files.
+
+import { FileConventions } from '@/components/FileConventions';
+
+<FileConventions />
+
+TODO: The current file conventions can also be checked by running `pnpm run check:conventions` within the docs directory.
diff --git a/docs/app/docs-infra/conventions/fragment-delimeters/page.mdx b/docs/app/docs-infra/conventions/fragment-delimeters/page.mdx
new file mode 100644
index 000000000..6c7c5e870
--- /dev/null
+++ b/docs/app/docs-infra/conventions/fragment-delimeters/page.mdx
@@ -0,0 +1,178 @@
+# Fragment Delimiters
+
+We use `:` to express hierarchy inside URL fragments. Example: `https://example.com/page#section:subsection` uses `:` to separate a primary section (`section`) from a nested part (`subsection`). The full value appears in an element’s `id`, e.g. <span id="section:subsection">`section:subsection`</span>.
+
+## Rationale
+
+We need a delimiter that clearly separates logical segments without clashing with ordinary heading slugs or requiring extra query parameters. `:` fits that role:
+
+- **Readable** - Stands out more than `-` or `_`, which already saturate slugs.
+- **Low collision** - Our slug generation collapses most punctuation to `-`; literal colons almost never appear organically.
+- **Familiar mental model** - Common in namespace-like contexts (design tokens, type references, etc.).
+- **Standards compliant** - RFC 3986 lists `:` in the reserved _gen-delims_ set (Section 2.2). The fragment syntax (Section 3.5) does not define internal structure, and Appendix A (`pchar`) allows `:`. That leaves the colon semantically free for client-side interpretation. If a literal colon must appear within a segment, encode it as `%3A` so parsing treats it as data, not a separator (e.g. `#token:pattern%3Aliteral:details` → `token`, `pattern:literal`, `details`).
+
+## Syntax
+
+Typical patterns (1-3 levels):
+
+```
+#<primary>
+#<primary>:<secondary>
+#<primary>:<secondary>:<tertiary>
+```
+
+Guidelines:
+
+- Segments MUST be non-empty.
+- Avoid more than 3 levels unless the extra depth is justified and documented.
+- Use kebab-case (`lowercase-with-dashes`).
+- Do not ascribe meaning to positions beyond the second segment unless documented.
+- REQUIRED: Any surfaced multi-segment fragment (shown in the UI or copy-link affordance) MUST have a real DOM element whose `id` exactly matches the full fragment.
+
+## Examples
+
+| Use case                              | Fragment                  | Meaning                      |
+| ------------------------------------- | ------------------------- | ---------------------------- |
+| Section + tab                         | `api:props`               | Props tab inside API section |
+| Demo + variant                        | `button-demo:styled`      | Styled variant of a demo     |
+| Composite (section → grouping → item) | `theming:palette:primary` | Primary palette subsection   |
+| Code view mode                        | `code-sample:ts`          | Show TypeScript version      |
+
+## Do / Don't
+
+Do:
+
+- Use `:` only for stable parent→child (or mode) hierarchy.
+- Normalize stray trailing colons (`section:` → `section`).
+- Validate user input before constructing IDs to prevent injected delimiters.
+
+Don't:
+
+- Overload `:` with arbitrary flags that aren't structural.
+- Mix delimiter styles (e.g. `section/sub:part`).
+- Expose transient UI state (scroll position, ephemeral filters, temporary sorts) in the URL.
+
+## Interoperability
+
+- **Headings** - Default MDX headings remain single-segment; multi-segment IDs are required only when the UI exposes structured state (tabs, variants, language switches) via deep links.
+- **Interpretation** - Each full fragment like `api:props` must map to an actual element for consistent scrolling and focus. Secondary (and tertiary) segments then drive local state (which tab / variant) after the primary region is in view.
+- **Backwards compatibility** - Primary-only fragments (`#api`) keep working. Multi-segment forms layer precision without breaking earlier links.
+
+### History Behavior
+
+Goal: The Back button should move between major sections, not every small variant change.
+
+- Primary segment change → new history entry.
+- Only secondary / tertiary change → update current entry instead of adding one.
+- Effect: Back navigation traverses sections; variant toggles are skipped.
+- Rationale: Minimizes noisy history entries that users rarely intend to revisit in order.
+
+If a feature must record variant transitions individually, document the exception and its justification.
+
+### Text Fragment Compatibility
+
+Modern browsers support the [Text Fragment](https://wicg.github.io/scroll-to-text-fragment/) syntax: `#:~:text=...` which allows deep linking to arbitrary text ranges. We MUST avoid colliding with this mechanism.
+
+Rules:
+
+- Treat everything starting at the first occurrence of `:~:text=` as reserved for the browser. Our hierarchical parsing stops before that sequence.
+- Do not generate IDs (or segments) that themselves contain `:~:`.
+- When sharing links, prefer placing our structured fragment _before_ any text fragment directive. Example: `#api:props:~:text=Primary%20Color` — our hierarchy is `api:props`; the remainder is the text fragment directive.
+- If a user arrives with a text fragment appended, we apply normal logic to the portion before `:~:` and let the UA handle highlighting the text range.
+
+Parser note (conceptual): Split off the reserved suffix first, then process hierarchy on the remaining prefix.
+
+## Accessibility
+
+Colon-separated IDs are neutral for assistive tech. Ensure:
+
+- The element for each fragment (especially the full multi-segment form) is focusable or associated with a landmark / heading.
+- Interactive mode switches (tabs, language toggles) reflect active state via appropriate roles and `aria-*` attributes.
+
+## HTML `id` Safety
+
+Standards summary:
+
+- **HTML** - `id` must be unique and free of whitespace; `:` is allowed.
+- **URL + fragment matching** - Browsers compare the fragment string to element IDs verbatim; no special meaning is assigned to `:`.
+- **RFC 3986** - Fragment grammar allows `:`; no internal semantics are imposed.
+
+Practical rules:
+
+- Uniqueness: Every full multi-segment value (e.g. `theming:palette:primary`) must be unique.
+- Stability: Changing a primary segment breaks inbound links; avoid unless necessary.
+- Whitespace: Reject IDs with spaces/newlines before adding hierarchy.
+- CSS: Escape colons in raw CSS selectors:
+
+  ```css
+  /* Incorrect (interpreted as pseudo-class) */
+  /* #api:props { ... } */
+
+  /* Correct */
+  #api\:props {
+  }
+  #theming\:palette\:primary {
+  }
+  ```
+
+  JavaScript helper:
+
+  ```ts
+  function idToCssSelector(id) {
+    return `#${id.replace(/:/g, '\\:')}`;
+  }
+  ```
+
+- Testing: Prefer `data-*` attributes over complex escaped selectors.
+- Slugification: Remove or replace colons from raw heading text before appending structural segments.
+- One-to-one mapping: Each emitted multi-segment fragment corresponds to a concrete element (heading, panel container, etc.).
+
+Edge cases:
+
+- Empty segment (`section::variant`) → invalid; fail fast.
+- Trailing colon (`section:`) → normalize to `section`.
+- Encoded colon (`%3A`) remains data; do not decode before splitting.
+
+Migration strategy (if delimiter ever changes):
+
+1. Attempt exact match.
+2. Optionally translate old delimiter to new and retry.
+3. Fallback to primary segment only.
+
+## Implementation (Conceptual)
+
+1. If the fragment contains `:~:text=`, separate the prefix (hierarchy) from the text fragment suffix; ignore the suffix for hierarchy parsing.
+2. Split the (possibly shortened) fragment into ordered segments.
+3. Locate element matching the full hierarchical fragment (else fall back to primary; treat absence as a defect to fix, not a permanent mode).
+4. Scroll / focus that element.
+5. Apply UI state inferred from remaining segments.
+6. Record history only on primary changes.
+
+## Future Considerations
+
+- Range targeting (e.g. `component:lines-10-20`) would need a clearly documented pattern.
+- Structured JSON-in-fragment rejected (verbosity, readability).
+
+## FAQ
+
+**Why not `-`?** Already pervasive in slugs; parsing hierarchy would be unreliable.
+
+**Why not `/`?** Interferes with routing assumptions and is less copy/paste friendly in some contexts.
+
+**Do we percent-encode `:`?** Not for structural separators. Only encode when a literal colon is part of the content within a single segment.
+
+**Multiple flags like `:dark:compact`?** Combine into a single variant token instead of stacking arbitrary segments.
+
+---
+
+If you add a new semantic layer (new segment meaning), update this document and reference the change (issue / PR).
+
+## References
+
+- [HTML Living Standard - `id` attribute](https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute)
+- [URL Standard - fragment component definition](https://url.spec.whatwg.org/#concept-url-fragment)
+- [RFC 3986 - Section 2.2 Reserved Characters](https://datatracker.ietf.org/doc/html/rfc3986#section-2.2)
+- [RFC 3986 - Section 3.5 Fragment](https://datatracker.ietf.org/doc/html/rfc3986#section-3.5)
+- [RFC 3986 - Appendix A (ABNF / pchar)](https://datatracker.ietf.org/doc/html/rfc3986#appendix-A)
+- [MDN - Fragment identifiers](https://developer.mozilla.org/docs/Web/URI/Fragment)
+- [MDN - CSS identifier escaping](https://developer.mozilla.org/docs/Web/CSS/Identifier#escaping)
diff --git a/docs/app/docs-infra/functions/abstract-create-demo-client/page.mdx b/docs/app/docs-infra/functions/abstract-create-demo-client/page.mdx
new file mode 100644
index 000000000..3c210758b
--- /dev/null
+++ b/docs/app/docs-infra/functions/abstract-create-demo-client/page.mdx
@@ -0,0 +1,182 @@
+# Abstract Create Demo Client
+
+The `abstractCreateDemoClient` function helps you create client-side demo providers that manage external dependencies for live component demos. It creates provider components that supply externals context to child components, enabling dynamic code execution in the browser.
+
+> [!TIP]
+> This builds on the [Built Factories Pattern](../../patterns/built-factories/): the client factory never enumerates variants; it pairs with the server demo file (`index.ts`).
+
+## Overview
+
+Demo clients created with `abstractCreateDemoClient` automatically integrate with:
+
+- **[`CodeExternalsContext`](../../components/code-externals-context/page.mdx)**: For managing external dependencies
+- **[`CodeHighlighter`](../../components/code-highlighter/page.mdx)**: For live component demos
+- **[react-runner](https://github.com/oku-ui/react-runner)**: For executing code with externals
+- **[`loadPrecomputedCodeHighlighterClient`](../load-precomputed-code-highlighter-client/page.mdx)**: For optimized loading with precomputed externals
+
+## When to Use Demo Clients
+
+Demo clients are specifically needed for **live demos** where:
+
+- Code executes dynamically in the browser
+- Components need access to external dependencies (React, Material-UI, etc.)
+- Users can interact with or edit the demo code
+- The demo requires runtime dependency injection
+
+For static code examples without live execution, use [`abstractCreateDemo`](../abstract-create-demo/page.mdx) instead.
+
+## Factory Function Requirements
+
+The `abstractCreateDemoClient` creates provider components that wrap demo content and supply externals:
+
+```ts
+// Client provider factory
+export const createDemoClient = (url: string, meta?: CreateDemoClientMeta) => {
+  return ClientProvider; // React.ComponentType<{ children: React.ReactNode }>
+};
+```
+
+## Implementation
+
+To implement a demo client factory, use the `abstractCreateDemoClient` utilities:
+
+```ts
+import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient';
+
+/**
+ * Creates a demo client provider for live editing with precomputed externals.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param meta Additional meta and configuration for the demo client.
+ */
+export const createDemoClient = createDemoClientFactory({
+  live: true,
+  // Additional client options
+});
+```
+
+## Usage Pattern
+
+Demo clients work in conjunction with demos to provide the complete live demo experience. **You must define your client provider in a separate file with `'use client';` at the top.**
+
+> [!NOTE]
+> `createDemoClient` must be called in a file with `'use client';` because it creates a client component. `createDemo` should **not** be called in a client file, as it may interfere with server-side loading and parsing.
+
+> Keep the server (`createDemo*`) and client (`createDemoClient*`) factories separate—one per file—to avoid accidental boundary crossings.
+
+```ts
+// demos/example/index.ts (server file)
+import { createDemo } from '../createDemo';
+import { Component } from './Component';
+
+export const DemoExample = createDemo(import.meta.url, Component);
+```
+
+```ts
+// demos/example/client.tsx (client file)
+'use client';
+import { createDemoClient } from '../createDemoClient';
+
+export const DemoExampleClient = createDemoClient(import.meta.url, {
+  name: 'Example',
+  skipPrecompute: false,
+});
+```
+
+## Client Provider Features
+
+The generated client provider component:
+
+1. **Externals Management**: Supplies external dependencies via [`CodeExternalsContext`](../../components/code-externals-context/page.mdx)
+2. **Precomputed Integration**: Uses externals from precomputed build data
+3. **Development Support**: Includes displayName and debugging metadata
+4. **Runtime Injection**: Makes dependencies available to child components
+
+## Configuration Options
+
+### AbstractCreateDemoClientOptions
+
+```ts
+type AbstractCreateDemoClientOptions = {
+  live?: boolean; // Enable live demo functionality
+  [key: string]: any; // Additional client configuration
+};
+```
+
+### CreateDemoClientMeta
+
+```ts
+type CreateDemoClientMeta = {
+  name?: string; // Display name for the demo
+  slug?: string; // URL-friendly identifier
+  displayName?: string; // Component display name
+  variantType?: string; // Type of variant implementation
+  skipPrecompute?: boolean; // Skip build-time precomputation
+  precompute?: {
+    // Precomputed data
+    externals?: Externals; // External dependencies
+    [key: string]: any;
+  };
+  [key: string]: any; // Additional metadata
+};
+```
+
+## Externals Context
+
+The client provider supplies externals through [`CodeExternalsContext`](../../components/code-externals-context/page.mdx):
+
+```ts
+// Context value structure
+const context = {
+  externals: {
+    // External dependencies like React, Material-UI components, etc.
+    // These are injected at build time or supplied at runtime
+  },
+};
+```
+
+## Best Practices
+
+1. **Use with Live Demos**: Only create demo clients for interactive demos that execute code
+2. **Leverage Precomputation**: Let the build system inject externals automatically
+3. **Consistent Naming**: Follow the pattern `DemoExampleClient` for client providers
+4. **Provider Wrapping**: Wrap your demo content with the client provider for live functionality
+
+## Example: Complete Live Demo Setup
+
+```ts
+// createDemoClient.ts - Define your client factory
+import { createDemoClientFactory } from '@mui/internal-docs-infra/abstractCreateDemoClient';
+
+export const createDemoClient = createDemoClientFactory({
+  live: true,
+});
+```
+
+```ts
+// demos/button-example/index.ts - Create both demo and client
+import { createDemo } from '../createDemo';
+import { createDemoClient } from '../createDemoClient';
+import { ButtonExample } from './ButtonExample';
+
+export const DemoButtonExample = createDemo(import.meta.url, ButtonExample);
+export const DemoButtonExampleClient = createDemoClient(import.meta.url, {
+  name: 'ButtonExample',
+  displayName: 'Button Example Demo',
+});
+```
+
+```tsx
+// Usage in MDX - Wrap demo with client for live functionality
+import { DemoButtonExample, DemoButtonExampleClient } from './demos/button-example';
+
+<DemoButtonExampleClient>
+  <DemoButtonExample />
+</DemoButtonExampleClient>;
+```
+
+## Related
+
+- **[`abstractCreateDemo`](../abstract-create-demo/page.mdx)**: Factory for static code demos
+- **[`CodeExternalsContext`](../../components/code-externals-context/page.mdx)**: Context for managing externals
+- **[`CodeHighlighter`](../../components/code-highlighter/page.mdx)**: Main component for code highlighting
+- **[`loadPrecomputedCodeHighlighter`](../load-precomputed-code-highlighter/page.mdx)**: Loader for optimized demos
diff --git a/docs/app/docs-infra/functions/abstract-create-demo/page.mdx b/docs/app/docs-infra/functions/abstract-create-demo/page.mdx
new file mode 100644
index 000000000..edc3afcdd
--- /dev/null
+++ b/docs/app/docs-infra/functions/abstract-create-demo/page.mdx
@@ -0,0 +1,149 @@
+# Abstract Create Demo
+
+The `abstractCreateDemo` function helps you create structured demo factories that work seamlessly with the [`CodeHighlighter`](../../components/code-highlighter/page.mdx) component ecosystem. It provides a standardized way to create demos that combine component previews with code display, making it easier to build consistent documentation interfaces.
+
+> [!TIP]
+> For the underlying architectural rationale (URLs as identity, variant enumeration, precompute, server/client split) see the [Built Factories Pattern](../../patterns/built-factories/).
+
+## Overview
+
+Demo factories created with `abstractCreateDemo` automatically integrate with:
+
+- **[`useDemo`](../../hooks/use-demo/page.mdx)**: For component + code demos
+- **[`useCode`](../../hooks/use-code/page.mdx)**: For code-only interfaces
+- **[`loadPrecomputedCodeHighlighter`](../load-precomputed-code-highlighter/page.mdx)**: For optimized loading
+
+## Factory Function Requirements
+
+At the fundamental level, the [`loadPrecomputedCodeHighlighter`](../load-precomputed-code-highlighter/page.mdx) function expects factory functions with these signatures:
+
+```ts
+// Single component demo
+export const createDemo = (url: string, component: React.ComponentType, options?: any) => {
+  return () => <>Demo Content</>;
+}
+
+// Multi-variant demo
+export const createDemoWithVariants = (url: string, variants: Record<string, React.ComponentType>, options?: any) => {
+  return () => <>Demo Content</>;
+}
+```
+
+## Implementation
+
+To quickly implement these factory functions, use the `abstractCreateDemo` utilities:
+
+```ts
+import 'server-only'; // this should be omitted if using the <CodeProvider> or the pages router
+
+import {
+  createDemoFactory,
+  createDemoWithVariantsFactory,
+} from '@mui/internal-docs-infra/abstractCreateDemo';
+
+import { DemoContent } from './DemoContent';
+import { DemoDataTheme } from '../demo-data/theme';
+
+const demoGlobalData = [DemoDataTheme];
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param component The component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemo = createDemoFactory({
+  DemoContent,
+  demoGlobalData,
+});
+
+/**
+ * Creates a demo component for displaying code examples with syntax highlighting.
+ * A variant is a different implementation style of the same component.
+ * @param url Depends on `import.meta.url` to determine the source file location.
+ * @param variants The variants of the component to be rendered in the demo.
+ * @param meta Additional meta for the demo.
+ */
+export const createDemoWithVariants = createDemoWithVariantsFactory({
+  DemoContent,
+  demoGlobalData,
+});
+```
+
+## Global Dependencies
+
+Global dependencies allow you to inject shared code (like providers, themes, or utilities) into all demos. These are passed through the `demoGlobalData` option:
+
+```ts
+// docs/src/demo-data/theme/index.ts
+import { createDemoGlobalWithVariants } from '@mui/internal-docs-infra/createDemoData';
+import type { DemoGlobalData } from '@mui/internal-docs-infra/createDemoData/types';
+import { DemoThemeProvider as CssModules } from './css-modules';
+
+export const DemoDataTheme: DemoGlobalData = createDemoGlobalWithVariants(import.meta.url, {
+  CssModules,
+});
+```
+
+```ts
+// docs/src/demo-data/theme/css-modules/index.ts
+import './theme.css';
+
+export function DemoThemeProvider({ children }: { children: React.ReactNode }) {
+  return children;
+}
+```
+
+```ts
+// docs/src/utils/createDemo.ts
+
+import 'server-only'; // this should be omitted if using the <CodeProvider> or the pages router
+
+import { createDemoFactory } from '@mui/internal-docs-infra/abstractCreateDemo';
+import { Demo as DemoContent } from '../components/Demo/Demo';
+import { DemoDataTheme } from '../demo-data/theme';
+
+const demoGlobalData = [DemoDataTheme];
+
+export const createDemo = createDemoFactory({
+  DemoContent,
+  demoGlobalData, // Available in all demos
+});
+```
+
+The globals are automatically merged with demo code and displayed alongside existing demo files.
+
+### Loader Configuration
+
+To make global demo data work properly, use [`withDocsInfra`](../with-docs-infra/page.mdx) which automatically includes the demo-data patterns:
+
+```js
+// next.config.js
+import { withDocsInfra } from '@mui/internal-docs-infra/withDocsInfra';
+
+export default withDocsInfra({
+  // withDocsInfra automatically includes:
+  // - './app/**/demos/*/index.ts'
+  // - './app/**/demos/*/client.ts'
+  // - './src/demo-data/*/index.ts' (for globals)
+  // - './src/demo-data/*/client.ts' (for client-side globals)
+});
+```
+
+If you need additional patterns, you can add them via `additionalDemoPatterns`:
+
+```js
+export default withDocsInfra({
+  additionalDemoPatterns: {
+    index: ['./src/**/snippets/*/index.ts'],
+    client: ['./src/**/snippets/*/client.ts'],
+  },
+});
+```
+
+## Related
+
+- **[`useDemo`](../../hooks/use-demo/page.mdx)**: Hook for managing component + code demos
+- **[`useCode`](../../hooks/use-code/page.mdx)**: Hook for code-only interfaces
+- **[`CodeHighlighter`](../../components/code-highlighter/page.mdx)**: Main component for code highlighting
+- **[`loadPrecomputedCodeHighlighter`](../load-precomputed-code-highlighter/page.mdx)**: Loader for optimized demos
diff --git a/docs/app/docs-infra/functions/create-demo-data/page.mdx b/docs/app/docs-infra/functions/create-demo-data/page.mdx
new file mode 100644
index 000000000..7cec503f6
--- /dev/null
+++ b/docs/app/docs-infra/functions/create-demo-data/page.mdx
@@ -0,0 +1,91 @@
+# createDemoData
+
+The `createDemoData` utility creates structured demo metadata and component data for use with the [`CodeHighlighter`](../components/code-highlighter/page.mdx) system. It processes demo URLs, components, and metadata to create data objects that can be consumed by demo factories and code highlighting systems.
+
+> [!TIP]
+> See the [Built Factories Pattern](../../patterns/built-factories/) for how factories derive identity from `import.meta.url` and how precomputed data flows into demos.
+
+> [!IMPORTANT]
+> For creating actual demos, use [`abstractCreateDemo`](./abstract-create-demo/page.mdx) instead. The `createDemoData` functions are primarily for creating global demo data and advanced use cases where you need low-level control over demo metadata.
+
+## Features
+
+- Creates demo metadata from file URLs and components
+- Generates names, slugs, and display names for demos
+- Integrates with precomputed code and build systems
+- Supports both single and multi-variant demos
+
+## Usage
+
+```ts
+import {
+  createDemoData,
+  createDemoDataWithVariants,
+  createDemoGlobal,
+  createDemoGlobalWithVariants,
+} from '@mui/internal-docs-infra/createDemoData';
+
+// Single component demo
+const demoData = createDemoData(import.meta.url, MyComponent, {
+  name: 'Custom Demo Name',
+  precompute: precomputedCode,
+});
+
+// Multi-variant demo
+const variantDemoData = createDemoDataWithVariants(
+  import.meta.url,
+  { Basic: BasicComponent, Advanced: AdvancedComponent },
+  { name: 'Component Variants' },
+);
+
+// Global provider demo (real-world example)
+// docs/src/demo-data/theme/index.ts
+import { DemoThemeProvider as CssModules } from './css-modules';
+
+export const DemoDataTheme: DemoGlobalData = createDemoGlobalWithVariants(import.meta.url, {
+  CssModules,
+});
+```
+
+### Global Demo Data Structure
+
+Global demo data typically follows this file structure:
+
+```
+docs/src/demo-data/
+├── theme/
+│   ├── index.ts              # Global demo data export
+│   ├── css-modules/
+│   │   ├── index.ts          # Provider component
+│   │   └── theme.css         # CSS variables/styles
+│   └── client.ts             # Client-side version (if needed)
+```
+
+#### Global Variant Matching
+
+When globals are merged with demo code, the system follows these rules:
+
+- **Exact variant match**: If a global has the same variant name as the demo (e.g., `CssModules`), it's used for that variant
+- **No matching variant**: If a global doesn't have a variant that matches the demo variant, no global is added for that variant
+- **Default fallback**: If a global only has a `Default` variant (or no variants), it's used for all demo variants
+
+```ts
+// This global will only be applied to CssModules variant demos
+export const DemoDataTheme = createDemoGlobalWithVariants(import.meta.url, {
+  CssModules, // Only available for 'CssModules' variant
+});
+
+// This global will be applied to all variants
+export const DemoDataProvider = createDemoGlobal(import.meta.url, GlobalProvider);
+```
+
+## When to Use
+
+- When building demo factories with [`abstractCreateDemo`](./abstract-create-demo/page.mdx)
+- When you need structured demo metadata for the docs-infra system
+- **Note**: For global dependencies in demos, use the `demoGlobalData` option in `abstractCreateDemo` instead
+
+## Related
+
+- [`createDemo`](./abstract-create-demo/page.mdx)
+- [`CodeHighlighter`](../components/code-highlighter/page.mdx)
diff --git a/docs/app/docs-infra/functions/hast-utils/page.mdx b/docs/app/docs-infra/functions/hast-utils/page.mdx
new file mode 100644
index 000000000..b8ef912bd
--- /dev/null
+++ b/docs/app/docs-infra/functions/hast-utils/page.mdx
@@ -0,0 +1,57 @@
+# hastUtils
+
+The `hastUtils` module provides utilities for converting between HAST (Hypertext Abstract Syntax Tree) nodes, strings, and React JSX elements. These utilities are essential for processing syntax-highlighted code and converting markdown/HTML structures to React components.
+
+## Features
+
+- Converts HAST nodes to React JSX elements
+- Extracts plain text from HAST trees
+- Handles serialized HAST JSON format
+- Used in code highlighting and markdown processing pipelines
+
+## Usage
+
+```ts
+import {
+  hastToJsx,
+  hastOrJsonToJsx,
+  stringOrHastToString,
+  stringOrHastToJsx,
+} from '@mui/internal-docs-infra/pipeline/hastUtils';
+
+// Convert HAST to React JSX
+const jsxElement = hastToJsx(hastNode);
+
+// Convert HAST or serialized JSON to JSX
+const jsxFromJson = hastOrJsonToJsx({ hastJson: '{"type":"element",...}' });
+
+// Extract plain text from string or HAST
+const plainText = stringOrHastToString(hastNodeOrString);
+
+// Convert to JSX with optional highlighting
+const jsx = stringOrHastToJsx(hastNodeOrString, true);
+```
+
+## API
+
+### `hastToJsx(hast: HastNodes): React.ReactNode`
+
+Converts a HAST node directly to React JSX using `hast-util-to-jsx-runtime`.
+
+### `hastOrJsonToJsx(hastOrJson: HastNodes | { hastJson: string }): React.ReactNode`
+
+Converts either a HAST node or serialized JSON representation to React JSX.
+
+### `stringOrHastToString(source: string | HastNodes | { hastJson: string }): string`
+
+Extracts plain text from strings, HAST nodes, or serialized HAST JSON using `hast-util-to-text`.
+
+### `stringOrHastToJsx(source: string | HastNodes | { hastJson: string }, highlighted?: boolean): React.ReactNode`
+
+Converts strings or HAST to JSX. If `highlighted` is true and source is HAST, returns JSX; otherwise returns plain text.
+
+## When to Use
+
+- When processing syntax-highlighted code in [`CodeHighlighter`](../../components/code-highlighter/page.mdx)
+- When writing custom remark/rehype plugins that need to convert HAST to React
+- When handling serialized HAST data from build-time processing
diff --git a/docs/app/docs-infra/functions/load-precomputed-code-highlighter-client/page.mdx b/docs/app/docs-infra/functions/load-precomputed-code-highlighter-client/page.mdx
new file mode 100644
index 000000000..c7b7b8b10
--- /dev/null
+++ b/docs/app/docs-infra/functions/load-precomputed-code-highlighter-client/page.mdx
@@ -0,0 +1,382 @@
+# Precompute Client Loader
+
+The precompute client loader is a Webpack/Turbopack loader that enables build-time optimization of client-side demo components by processing demo client files and precomputing external dependencies for live editing environments.
+
+---
+
+## Overview
+
+The loader processes demo client files that use the `createDemoClient` factory pattern, automatically resolving and injecting all external dependencies at build time. This enables efficient live editing by having all required imports available without runtime resolution.
+
+> [!TIP]
+> For the overall factory concept (including server vs client separation) see the [Built Factories Pattern](../../patterns/built-factories/).
+
+> [!NOTE]
+> The loader works with any `create*Client` function, not just `createDemoClient`. You could have custom demo client factories that follow the same pattern.
+
+### Key Features
+
+- **Build-time externals injection**: Automatically imports all required external dependencies
+- **Provider pattern support**: Creates React provider components that supply externals to child components
+- **Live editing optimization**: Pre-resolves dependencies for client-side editing environments
+- **Dependency tracking**: Resolves and tracks all file dependencies for hot reloading
+- **Factory pattern support**: Works with `createDemoClient()` or any `create*Client()` calls in client.ts files
+
+---
+
+## Configuration
+
+### Recommended: withDocsInfra Plugin
+
+The easiest way to configure this loader is with the [`withDocsInfra`](../with-docs-infra/page.mdx) Next.js plugin:
+
+```javascript
+// next.config.js
+import { withDocsInfra } from '@mui/internal-docs-infra/withDocsInfra';
+
+export default withDocsInfra({
+  // Automatically includes:
+  // - './app/**/demos/*/client.ts'
+  // - './src/demo-data/*/client.ts' (for global client demos)
+
+  // Add custom patterns if needed
+  additionalDemoPatterns: {
+    client: ['./app/**/snippets/*/client.ts'],
+  },
+});
+```
+
+### Manual Next.js Setup
+
+If you need manual control, add the loader directly to your `next.config.mjs`:
+
+> [!NOTE]
+> The Turbopack loader requires Next.js version v15.5 or later ([depends on this fix](https://github.com/vercel/next.js/pull/82112))
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  turbopack: {
+    rules: {
+      './app/**/demos/*/client.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient'],
+      },
+      // Add pattern for global demo data client files
+      './src/demo-data/*/client.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient'],
+      },
+    },
+  },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.module.rules.push({
+      test: /\/demos\/[^/]+\/client\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient',
+      ],
+    });
+
+    // Add rule for global demo data client files
+    config.module.rules.push({
+      test: /\/demo-data\/[^/]+\/client\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient',
+      ],
+    });
+
+    return config;
+  },
+};
+```
+
+### File Structure
+
+The loader expects client files with `create*Client` factory functions following this pattern:
+
+> [!IMPORTANT]
+> Client files must include the `'use client';` directive at the top since they are designed for client-side live editing environments.
+
+> [!NOTE]
+> The client loader reads the corresponding `index.ts` file in the same directory to discover variants, demo name, and slug information. The `client.ts` and `index.ts` files work as a pair.
+
+```
+app/
+├── components/
+│   └── my-component/
+│       └── demos/
+│           ├── basic-demo/
+│           │   ├── index.ts      # ← Main demo with createDemo()
+│           │   ├── client.ts     # ← createDemoClient() processed here
+│           │   ├── React.tsx
+│           │   └── Vue.vue
+│           └── advanced-demo/
+│               ├── index.ts      # ← Main demo
+│               ├── client.ts     # ← Client bundle processed here
+│               ├── TypeScript.ts
+│               └── JavaScript.js
+```
+
+---
+
+## Usage
+
+### Basic Demo Client File
+
+Create a `client.ts` file with the factory pattern:
+
+```typescript
+'use client';
+
+import { createDemoClient } from '../createDemoClient';
+
+export const BasicDemoClient = createDemoClient(import.meta.url);
+```
+
+### With Options
+
+You can pass options to the client factory function:
+
+```typescript
+'use client';
+
+import { createDemoClient } from '../createDemoClient';
+
+export const BasicDemoClient = createDemoClient(import.meta.url, {
+  name: 'Basic Demo Client',
+});
+```
+
+### Multiple Variants
+
+The loader handles multiple code variants and collects externals from all variants:
+
+```typescript
+'use client';
+
+import { createDemoClientWithVariants } from '../createDemoClient';
+
+export const MultiVariantDemoClient = createDemoClientWithVariants(import.meta.url, {
+  name: 'Multi-variant Client Example',
+});
+```
+
+### Custom Client Factory Functions
+
+The loader works with any `create*Client` function. You can create custom demo client factories as needed:
+
+```typescript
+'use client';
+
+import { createCustomDemoClient } from '../createCustomDemoClient';
+
+export const CustomDemoClient = createCustomDemoClient(import.meta.url, {
+  theme: 'dark',
+  interactive: true,
+});
+```
+
+---
+
+## Processing Pipeline
+
+The loader follows these steps to precompute externals for your client components:
+
+### 1. Parse Factory Call
+
+Finds your `create*Client` function call and extracts any options.
+
+### 2. Resolve Variant Paths
+
+Discovers related variant files by reading the corresponding main demo file (`index.ts` in the same directory) to extract variant information. The client loader uses the variants defined in the main demo file since client files typically don't define their own variants.
+
+### 3. Collect Externals
+
+- Loads each variant file and its dependencies
+- Extracts all external imports (modules not part of the demo files)
+- Filters out type-only imports that don't exist at runtime
+- Merges externals from all variants
+
+### 4. Inject Externals
+
+Adds all external imports to the top of the client file and passes them as `precompute.externals`.
+
+```typescript
+// Your source before processing
+'use client';
+
+export const DemoClient = createDemoClient(import.meta.url);
+
+// After processing (simplified)
+('use client');
+
+import React from 'react';
+import { Button } from '@mui/material';
+import { styled } from '@mui/system';
+
+export const DemoClient = createDemoClient(import.meta.url, {
+  precompute: {
+    externals: {
+      react: React,
+      '@mui/material': { Button },
+      '@mui/system': { styled },
+    },
+  },
+});
+```
+
+---
+
+## Output Structure
+
+The loader replaces the client factory function call with externals injected as imports and a data structure containing:
+
+```typescript
+// Externals are injected as imports at the top
+'use client';
+
+import React from 'react';
+import { Button, TextField } from '@mui/material';
+import { styled } from '@mui/system';
+
+// Function call gets externals in precompute.externals
+export const DemoClient = createDemoClient(import.meta.url, {
+  precompute: {
+    externals: {
+      react: React,
+      '@mui/material': { Button, TextField },
+      '@mui/system': { styled },
+    },
+  },
+});
+```
+
+### Externals Format
+
+Each external module contains the actual imported values resolved at build time:
+
+```typescript
+interface Externals {
+  [modulePath: string]: any; // The actual imported module or object with named exports
+}
+
+// Examples:
+const externals = {
+  react: React, // Default import
+  '@mui/material': { Button, TextField }, // Named imports as object
+  '@mui/system': { styled }, // Single named import as object
+  lodash: lodash, // Namespace import
+};
+```
+
+The externals are the actual resolved import values, not descriptors. This allows the live editing environment to directly access the imported modules without additional resolution.
+
+```
+
+```
+
+---
+
+## Error Handling
+
+### Single Client Factory Function per File
+
+Only one `create*Client` function call is allowed per file:
+
+```typescript
+// [x] Multiple calls will cause a build error
+'use client';
+
+export const DemoClient1 = createDemoClient(/* ... */);
+export const DemoClient2 = createDemoClient(/* ... */); // Error!
+
+// [✓] Use separate files instead
+// demo-1/client.ts
+('use client');
+
+export const DemoClient1 = createDemoClient(/* ... */);
+
+// demo-2/client.ts
+('use client');
+
+export const DemoClient2 = createDemoClient(/* ... */);
+```
+
+### Missing Variant Files
+
+If variant files cannot be found for collecting externals, the loader will log a warning and continue with an empty externals object.
+
+### Invalid Function Signature
+
+Your `create*Client` function must follow this pattern:
+
+```typescript
+createDemoClient(
+  import.meta.url, // Required: file URL
+  { options }, // Optional: options object
+);
+```
+
+### Skip Precompute
+
+You can skip processing by adding `skipPrecompute: true`:
+
+```typescript
+'use client';
+
+export const DemoClient = createDemoClient(import.meta.url, {
+  skipPrecompute: true, // Will skip loader processing
+});
+```
+
+---
+
+## Benefits
+
+### Build-time Externals Resolution
+
+- All external dependencies collected and injected during build
+- No runtime resolution of external modules for live editing
+- Smaller client bundles with pre-resolved dependencies
+
+### Live Editing Support
+
+- External imports are available immediately in client environments
+- Provider pattern makes externals accessible to child components
+- Optimized for interactive code editors and live preview systems
+
+### Performance
+
+- Pre-computed externals ready for client-side usage
+- Reduced startup time for live editing environments
+- Efficient caching through webpack dependency system
+
+---
+
+## Best Practices
+
+### File Organization
+
+- Keep client files separate from main demo files (`client.ts` vs `index.ts`)
+- Use descriptive client names for better debugging
+- Organize related clients in subdirectories
+
+### Client Factory Design
+
+- Design client factories to return provider components
+- Keep externals minimal and focused on demo requirements
+- Use meaningful options for configuration
+
+### Configuration
+
+- Use specific file patterns in Turbopack rules (`client.ts` not `*.ts`)
+- Test builds with various demo complexity levels
+- Monitor bundle sizes when adding new externals
+
+---
+
+## Related Documentation
+
+- [loadPrecomputedCodeHighlighter](../load-precomputed-code-highlighter/) - Main demo loader for syntax highlighting
+- [abstractCreateDemoClient](../../components/abstract-create-demo-client/) - Client factory implementation
+- [CodeHighlighter](../../components/code-highlighter/) - Code highlighting component system
diff --git a/docs/app/docs-infra/functions/load-precomputed-code-highlighter/page.mdx b/docs/app/docs-infra/functions/load-precomputed-code-highlighter/page.mdx
new file mode 100644
index 000000000..14a60db40
--- /dev/null
+++ b/docs/app/docs-infra/functions/load-precomputed-code-highlighter/page.mdx
@@ -0,0 +1,344 @@
+# Precompute Loader
+
+The precompute loader is a Webpack/Turbopack loader that enables build-time optimization of code examples by processing demo files and precomputing syntax highlighting, TypeScript transformations, and dependency resolution.
+
+---
+
+## Overview
+
+The loader processes demo files that use the `createDemo` factory pattern, automatically resolving and processing all code variants at build time rather than runtime.
+
+> [!TIP]
+> For the high-level rationale behind this pattern see the [Built Factories Pattern](../../patterns/built-factories/).
+
+> [!NOTE]
+> The loader works with any `create*` function, not just `createDemo`. You could have `app/components/my-component/snippets/example/index.ts` with `createSnippet()`, or any other factory function that follows the same pattern.
+
+### Key Features
+
+- **Build-time syntax highlighting**: Uses [Starry Night](https://github.com/wooorm/starry-night) for syntax highlighting during compilation
+- **TypeScript transformation**: Automatically converts TypeScript examples to JavaScript variants
+- **Dependency tracking**: Resolves and tracks all file dependencies for hot reloading
+- **Recursive loading**: Handles complex dependency trees automatically
+- **Factory pattern support**: Works with `createDemo()`, `createSnippet()`, or any `create*()` calls in index.ts files
+
+---
+
+## Configuration
+
+### Recommended: withDocsInfra Plugin
+
+The easiest way to configure this loader is with the [`withDocsInfra`](../with-docs-infra/page.mdx) Next.js plugin:
+
+```javascript
+// next.config.js
+import { withDocsInfra } from '@mui/internal-docs-infra/withDocsInfra';
+
+export default withDocsInfra({
+  // Automatically includes:
+  // - './app/**/demos/*/index.ts'
+  // - './src/demo-data/*/index.ts' (for globals)
+
+  // Add custom patterns if needed
+  additionalDemoPatterns: {
+    index: ['./app/**/snippets/*/index.ts'],
+  },
+});
+```
+
+### Manual Next.js Setup
+
+If you need manual control, add the loader directly to your `next.config.mjs`:
+
+> [!NOTE]
+> The Turbopack loader requires Next.js version v15.5 or later ([depends on this fix](https://github.com/vercel/next.js/pull/82112))
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  turbopack: {
+    rules: {
+      './app/**/demos/*/index.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+      // Add pattern for global demo data
+      './src/demo-data/*/index.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+    },
+  },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.module.rules.push({
+      test: /\/demos\/[^/]+\/index\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+      ],
+    });
+
+    // Add rule for global demo data
+    config.module.rules.push({
+      test: /\/demo-data\/[^/]+\/index\.ts$/,
+      use: [
+        defaultLoaders.babel,
+        '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter',
+      ],
+    });
+
+    return config;
+  },
+};
+```
+
+### File Structure
+
+The loader expects files with `create*` factory functions following this pattern:
+
+```
+app/
+├── components/
+│   └── my-component/
+│       ├── demos/
+│       │   ├── basic-demo/
+│       │   │   ├── index.ts      # ← createDemo() processed here
+│       │   │   ├── React.tsx
+│       │   │   └── Vue.vue
+│       │   └── advanced-demo/
+│       │       ├── index.ts      # ← And here
+│       │       ├── TypeScript.ts
+│       │       └── JavaScript.js
+│       └── snippets/
+│           └── example/
+│               ├── index.ts      # ← createSnippet() processed here
+│               └── Component.tsx
+```
+
+---
+
+## Usage
+
+### Basic Demo File
+
+Create an `index.ts` file with the factory pattern:
+
+```typescript
+import { createDemo } from '../createDemo';
+import Default from './Default';
+
+export const BasicDemo = createDemo(import.meta.url, Default);
+```
+
+### Multiple Variants
+
+The loader handles multiple code variants automatically:
+
+```typescript
+import { createDemoWithVariants } from '../createDemo';
+import CssModules from './Component.tsx';
+import Tailwind from './Component.jsx';
+
+export const MultiVariantDemo = createDemoWithVariants(import.meta.url, { CssModules, Tailwind });
+```
+
+### Options
+
+You can pass options to the factory function, such as a `name` and `slug` override:
+
+```typescript
+import { createDemoWithVariants } from '../createDemo';
+import CssModules from './Component.tsx';
+import Tailwind from './Component.jsx';
+
+export const MultiVariantDemo = createDemoWithVariants(
+  import.meta.url,
+  { CssModules, Tailwind },
+  { name: 'Multi-variant Example', slug: 'multi' },
+);
+```
+
+### Custom Factory Functions
+
+The loader works with any `create*` function. To use custom factory functions like `createSnippet()`, extend your configuration:
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  turbopack: {
+    rules: {
+      './app/**/demos/*/index.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+      // Add pattern for snippets directory
+      './app/**/snippets/*/index.ts': {
+        loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'],
+      },
+    },
+  },
+};
+```
+
+Then create your custom factory file:
+
+```typescript
+import { createSnippet } from '../createSnippet';
+import Example from './Example';
+
+export const ComponentSnippet = createSnippet(import.meta.url, Example);
+```
+
+---
+
+## Processing Pipeline
+
+The loader follows these steps to precompute your code examples:
+
+### 1. Parse Factory Call
+
+Finds your `create*` function call and extracts the variants and options.
+
+### 2. Resolve File Paths
+
+Converts relative imports to absolute file paths for each variant.
+
+### 3. Process Variants
+
+- Loads each variant file and its dependencies
+- Applies syntax highlighting using [Starry Night](https://github.com/wooorm/starry-night)
+- Converts TypeScript to JavaScript when needed
+- Tracks all files for hot reloading
+
+### 4. Inserts Precompute Value
+
+Inserts `precompute` into your source with the processed data.
+
+```typescript
+// Your source before processing
+export const Demo = createDemo(import.meta.url, Component);
+
+// After processing (simplified)
+export const Demo = createDemo(
+  import.meta.url,
+  Component,
+  {
+    precompute: {
+      Default: {
+        fileName: "Component.tsx",
+        source: /* syntax highlighted HAST nodes */,
+        transforms: { /* JavaScript version */ }
+      }
+    }
+  }
+);
+```
+
+---
+
+## Output Structure
+
+The loader replaces the factory function call with a data structure containing:
+
+```typescript
+interface PrecomputedData {
+  [variantName: string]: {
+    fileName: string; // Main file name
+    source: HastNode[]; // Syntax highlighted AST
+    extraFiles: {
+      // Additional dependencies
+      [path: string]: HastNode[];
+    };
+    transforms: {
+      // Language variants
+      [language: string]: HastNode[];
+    };
+  };
+}
+```
+
+---
+
+## Error Handling
+
+### Single Factory Function per File
+
+Only one `create*` function call is allowed per file:
+
+```typescript
+// [x] Multiple calls will cause a build error
+export const Demo1 = createDemo(/* ... */);
+export const Demo2 = createDemo(/* ... */); // Error!
+
+// [✓] Use separate files instead
+// demo-1/index.ts
+export const Demo1 = createDemo(/* ... */);
+
+// demo-2/index.ts
+export const Demo2 = createDemo(/* ... */);
+```
+
+### Missing Files
+
+If a variant file cannot be found, the loader will log a warning and skip that variant, but continue processing other variants.
+
+### Invalid Function Signature
+
+Your `create*` function must follow this pattern:
+
+```typescript
+createDemo(
+  import.meta.url, // Required: file URL
+  component, // Required: component object
+  { options }, // Optional: options object
+);
+```
+
+```typescript
+createDemoWithVariants(
+  import.meta.url, // Required: file URL
+  { variants }, // Required: variant object
+  { options }, // Optional: options object
+);
+```
+
+---
+
+## Benefits
+
+### Build-time Optimization
+
+- Syntax highlighting computed once during build
+- No runtime parsing or processing overhead
+- Smaller client bundles (no syntax highlighting libraries)
+
+### Developer Experience
+
+- Automatic TypeScript to JavaScript conversion
+- Hot reloading tracks all dependencies
+- Clear error messages for configuration issues
+
+### Performance
+
+- Pre-computed HAST nodes ready for rendering
+- Reduced time-to-interactive for code examples
+- Efficient caching through webpack dependency system
+
+---
+
+## Best Practices
+
+### File Organization
+
+- Keep demo files focused and single-purpose
+- Use descriptive variant names (`TypeScript`, `JavaScript`, `CSS`)
+- Organize related demos in subdirectories
+
+### Dependency Management
+
+- Prefer relative imports for demo files
+- Keep dependency trees shallow when possible
+- Use meaningful file names for better debugging
+
+### Configuration
+
+- Set appropriate `maxDepth` limits for recursion
+- Use specific file patterns in Turbopack rules
+- Test builds with various demo complexity levels
diff --git a/docs/app/docs-infra/functions/load-server-code-meta/page.mdx b/docs/app/docs-infra/functions/load-server-code-meta/page.mdx
new file mode 100644
index 000000000..bf64cc282
--- /dev/null
+++ b/docs/app/docs-infra/functions/load-server-code-meta/page.mdx
@@ -0,0 +1,63 @@
+# loadServerCodeMeta
+
+The `loadServerCodeMeta` utility parses demo files to extract variant information and resolves file paths for code metadata. It reads demo index files, finds `createDemo` factory calls, and builds a `Code` object mapping variant names to their file URLs.
+
+## Features
+
+- Parses demo files to find `createDemo` calls with variants
+- Resolves variant file paths using filesystem operations
+- Returns a `Code` object mapping variant names to file URLs
+- Handles named exports from variant files
+- Used by [`CodeHighlighter`](../../components/code-highlighter/page.mdx) for server-side code loading
+
+## Usage
+
+```ts
+import { loadServerCodeMeta } from '@mui/internal-docs-infra/pipeline/loadServerCodeMeta';
+
+// Load metadata from a demo index file
+const code = await loadServerCodeMeta('file:///app/components/button/demos/basic/index.ts');
+
+// Returns a Code object like:
+// {
+//   Default: 'file:///app/components/button/demos/basic/Component.tsx',
+//   TypeScript: {
+//     url: 'file:///app/components/button/demos/basic/TypeScript.tsx',
+//     fileName: 'TypeScript.tsx',
+//     namedExport: 'ButtonExample'
+//   }
+// }
+```
+
+## How It Works
+
+1. **Parse Demo File**: Reads the demo index file and parses it to find `createDemo()` or `createDemoWithVariants()` calls
+2. **Extract Variants**: Extracts the variants object from the factory call
+3. **Resolve Paths**: Uses `resolveVariantPathsWithFs` to resolve relative imports to absolute file URLs
+4. **Build Code Object**: Creates a `Code` object mapping variant names to file URLs or metadata objects
+
+## Custom Implementation
+
+You can create a custom `loadCodeMeta` function using the factory:
+
+```ts
+import { createLoadServerCodeMeta } from '@mui/internal-docs-infra/pipeline/loadServerCodeMeta';
+
+const customLoadCodeMeta = createLoadServerCodeMeta({
+  // Configuration options (currently none available)
+});
+
+const code = await customLoadCodeMeta('file:///path/to/demo/index.ts');
+```
+
+## When to Use
+
+- When implementing server-side code loading for [`CodeHighlighter`](../../components/code-highlighter/page.mdx)
+- When building custom demo processing pipelines
+- When you need to resolve demo variant paths at build time
+
+## Related
+
+- [`loadVariant`](../load-variant/page.mdx) - For loading and processing individual variants
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Uses this for server-side code loading
+- [`resolveVariantPathsWithFs`](../resolve-variant-paths/page.mdx) - Filesystem path resolution
diff --git a/docs/app/docs-infra/functions/load-server-source/page.mdx b/docs/app/docs-infra/functions/load-server-source/page.mdx
new file mode 100644
index 000000000..b527e66f0
--- /dev/null
+++ b/docs/app/docs-infra/functions/load-server-source/page.mdx
@@ -0,0 +1,104 @@
+# loadServerSource
+
+The `loadServerSource` utility reads source files and analyzes their dependencies, extracting imports and resolving relative file paths. It processes JavaScript/TypeScript files to build dependency trees and prepare code for documentation and live demos.
+
+## Features
+
+- Reads source files from the filesystem
+- Parses and resolves relative imports
+- Extracts external dependencies (npm packages)
+- Builds dependency trees for recursive loading
+- Handles both JavaScript/TypeScript modules and static assets
+- Processes import statements and rewrites paths
+
+## Usage
+
+```ts
+import { loadServerSource } from '@mui/internal-docs-infra/pipeline/loadServerSource';
+
+const result = await loadServerSource('file:///app/components/button/Component.tsx');
+
+// Returns:
+// {
+//   source: "import React from 'react';\n...",  // Processed source code
+//   extraFiles: {                               // URLs for recursive loading
+//     './utils.js': 'file:///app/components/button/utils.ts',
+//     './styles.css': 'file:///app/components/button/styles.css'
+//   },
+//   extraDependencies: [                        // File URLs for recursive loading
+//     'file:///app/components/button/utils.ts',
+//     'file:///app/components/button/styles.css'
+//   ],
+//   externals: {                                // External npm dependencies
+//     'react': [{ name: 'default', type: 'ImportDefaultSpecifier', isType: false }],
+//     '@mui/material': [{ name: 'Button', type: 'ImportSpecifier', isType: false }]
+//   }
+// }
+```
+
+## Configuration
+
+Create a custom `loadSource` function with options:
+
+```ts
+import { createLoadServerSource } from '@mui/internal-docs-infra/pipeline/loadServerSource';
+
+const customLoadSource = createLoadServerSource({
+  includeDependencies: true, // Whether to resolve imports (default: true)
+  storeAt: 'flat', // How to store imports: 'canonical' | 'import' | 'flat'
+  maxDepth: 10, // Maximum recursion depth (not implemented yet)
+  maxFiles: 100, // Maximum files to process (not implemented yet)
+});
+```
+
+## Import Storage Modes
+
+The `storeAt` option controls how imports are stored in `extraFiles`:
+
+- **`'canonical'`**: Full resolved path (e.g., `'../Component/index.js'`)
+- **`'import'`**: Import path with file extension (e.g., `'../Component.js'`)
+- **`'flat'`**: Flattened to current directory with rewritten imports (e.g., `'./Component.js'`)
+
+```ts
+// Example with different storeAt modes
+const flatResult = await createLoadServerSource({ storeAt: 'flat' })('file:///demo.tsx');
+// extraFiles: { './Component.js': '...' }
+
+const canonicalResult = await createLoadServerSource({ storeAt: 'canonical' })('file:///demo.tsx');
+// extraFiles: { '../Component/index.js': '...' }
+```
+
+## Return Value
+
+```ts
+interface LoadSourceResult {
+  source: string; // Processed source code
+  extraFiles?: Record<string, string>; // URLs of resolved dependencies
+  extraDependencies?: string[]; // File URLs for recursive loading
+  externals?: Externals; // External npm dependencies
+}
+```
+
+## How It Works
+
+1. **Read File**: Loads the source file from the filesystem
+2. **Check File Type**: Determines if it's a JavaScript/TypeScript module or static asset
+3. **Parse Imports**: Extracts relative and external imports using `parseImports`
+4. **Resolve Paths**: Uses `resolveImportResultWithFs` to resolve relative import paths to absolute URLs
+5. **Process Imports**: Rewrites import statements and builds `extraFiles` with URLs using `processRelativeImports`
+6. **Build Dependencies**: Creates list of file URLs for recursive processing by [`loadVariant`](../load-variant/page.mdx)
+
+> [!IMPORTANT]
+> The `extraFiles` values are absolute URLs (not source code), which allows [`loadVariant`](../load-variant/page.mdx) to recursively load and process dependency files. This creates a chain where each file can discover and load its own dependencies.
+
+## When to Use
+
+- When implementing server-side code loading for [`CodeHighlighter`](../../components/code-highlighter/page.mdx)
+- When building demo processing pipelines that need dependency resolution
+- When you need to analyze import dependencies in source files
+
+## Related
+
+- [`loadServerCodeMeta`](../load-server-code-meta/page.mdx) - For loading demo metadata
+- [`parseImports`](../parse-imports/page.mdx) - For parsing import statements
+- [`processRelativeImports`](../process-relative-imports/page.mdx) - For processing import paths
diff --git a/docs/app/docs-infra/functions/loader-utils/page.mdx b/docs/app/docs-infra/functions/loader-utils/page.mdx
new file mode 100644
index 000000000..254237cfb
--- /dev/null
+++ b/docs/app/docs-infra/functions/loader-utils/page.mdx
@@ -0,0 +1,460 @@
+# Loader Utilities
+
+The loader utilities provide a comprehensive set of functions for resolving, parsing, and processing import statements in JavaScript/TypeScript code. These utilities are essential for building systems that need to analyze and transform code imports, such as code highlighters, bundlers, and documentation generators.
+
+## Overview
+
+The loader utilities consist of several interconnected modules:
+
+- **`parseImports`** - Parses import statements from source code
+- **`resolveModulePath`** - Resolves module paths to actual file paths
+- **`processRelativeImports`** - Transforms and processes resolved imports
+- **`getFileNameFromUrl`** - Extracts file names and extensions from URLs/paths
+- **`rewriteImports`** - Rewrites import statements in source code
+
+## Architecture
+
+```mermaid
+graph TD
+    A[Source Code] --> B[parseImports]
+    B --> C[Import Result]
+    C --> D[resolveModulePath]
+    D --> E[Resolved Paths Map]
+    C --> F[processRelativeImports]
+    E --> F
+    F --> G[Processed Result]
+
+    H[File URLs] --> I[getFileNameFromUrl]
+    I --> J[File Metadata]
+
+    K[Source + Import Map] --> L[rewriteImports]
+    L --> M[Transformed Source]
+```
+
+## Core Functions
+
+### parseImports
+
+Parses import statements from JavaScript/TypeScript source code and extracts import information.
+
+```typescript
+import { parseImports } from '@mui/internal-docs-infra/loaderUtils';
+
+const source = `
+import React from 'react';
+import { Component } from '../components/Component';
+import type { Props } from '../types';
+import '../styles.css';
+`;
+
+const result = await parseImports(source, '/src/current/file.tsx');
+console.log(result);
+// {
+//   '../components/Component': {
+//     path: '/src/components/Component',
+//     names: ['Component']
+//   },
+//   '../types': {
+//     path: '/src/types',
+//     names: ['Props'],
+//     includeTypeDefs: true
+//   },
+//   '../styles.css': {
+//     path: '/src/styles.css',
+//     names: []
+//   }
+// }
+```
+
+**Features:**
+
+- [✓] **Type-aware parsing** - Detects `import type` statements and marks them with `includeTypeDefs: true`
+- [✓] **All import patterns** - Named imports, default imports, namespace imports, side-effect imports
+- [✓] **Relative path resolution** - Converts relative imports to absolute paths
+- [✓] **Mixed import handling** - Handles both type and value imports from the same module
+- [✓] **Non-JS asset support** - Handles CSS, images, and other static assets
+
+### resolveModulePath
+
+Resolves module paths to actual file paths using filesystem directory reading.
+
+```typescript
+import { resolveModulePath } from '@mui/internal-docs-infra/loaderUtils';
+
+// Basic resolution
+const resolved = await resolveModulePath('/src/components/Button', directoryReader);
+console.log(resolved); // '/src/components/Button.jsx'
+
+// Type-aware resolution
+const typeAware = await resolveModulePath(
+  '/src/components/Button',
+  directoryReader,
+  {},
+  true, // includeTypeDefs
+);
+console.log(typeAware);
+// {
+//   import: '/src/components/Button.jsx',
+//   typeImport: '/src/components/Button.d.ts'
+// }
+```
+
+**Features:**
+
+- [✓] **Type-aware resolution** - Different extension priorities for type vs value imports
+- [✓] **Index file support** - Resolves `Button` to `Button/index.tsx`
+- [✓] **Extension priority** - Follows TypeScript resolution rules
+- [✓] **Optimized filesystem access** - Single directory read when possible
+- [✓] **Batch resolution** - Efficient resolution of multiple paths
+
+**Extension Priorities:**
+
+- **Value imports**: `.ts`, `.tsx`, `.js`, `.jsx`, `.d.ts`
+- **Type imports**: `.d.ts`, `.ts`, `.tsx`, `.js`, `.jsx`
+
+### processRelativeImports
+
+Transforms resolved imports based on different storage strategies.
+
+```typescript
+import { processRelativeImports } from '@mui/internal-docs-infra/loaderUtils';
+
+const result = processRelativeImports(
+  source,
+  importResult,
+  resolvedPathsMap,
+  'flat', // or 'canonical' | 'import'
+);
+
+console.log(result);
+// {
+//   processedSource: "import Component from './Component';",
+//   extraFiles: {
+//     './Component.tsx': 'file:///src/components/Component.tsx'
+//   }
+// }
+```
+
+**Storage Strategies:**
+
+1. **`flat`** - Flattens all imports to current directory level
+
+   ```typescript
+   // import Component from '../components/Component';
+   // File stored at: ../components/Component/index.tsx
+   // File Displayed As:  Component.tsx
+   ```
+
+2. **`import`** - Preserves original import path without rewriting
+
+   ```typescript
+   // import Component from '../components/Component';
+   // File Stored at: ../components/Component/index.tsx
+   // File Displayed As:  ../components/Component.tsx
+   ```
+
+3. **`canonical`** - Preserves the original file structure
+   ```typescript
+   // import Component from '../components/Component';
+   // File Stored at: ../components/Component/index.tsx
+   // File Displayed As:  ../components/Component/index.tsx
+   ```
+
+### getFileNameFromUrl
+
+Extracts file names and extensions from URLs and file paths.
+
+```typescript
+import { getFileNameFromUrl } from '@mui/internal-docs-infra/loaderUtils';
+
+const meta = getFileNameFromUrl('file:///src/components/Button.tsx');
+console.log(meta); // { fileName: 'Button.tsx', extension: '.tsx' }
+
+// Handles compound extensions
+const types = getFileNameFromUrl('file:///src/types.d.ts');
+console.log(types); // { fileName: 'types.d.ts', extension: '.ts' }
+
+// Works with URLs
+const url = getFileNameFromUrl('https://example.com/file.js');
+console.log(url); // { fileName: 'file.js', extension: '.js' }
+```
+
+### extractNameAndSlugFromUrl
+
+Extracts and formats human-readable names and URL-friendly slugs from file paths.
+
+```typescript
+import { extractNameAndSlugFromUrl } from '@mui/internal-docs-infra/loaderUtils';
+
+// Handles index files (uses parent directory name)
+const demo = extractNameAndSlugFromUrl('file:///app/components/demos/advanced-keyboard/index.ts');
+console.log(demo); // { name: 'Advanced Keyboard', slug: 'advanced-keyboard' }
+
+// Handles camelCase filenames
+const camel = extractNameAndSlugFromUrl('/src/components/customButton.tsx');
+console.log(camel); // { name: 'Custom Button', slug: 'custom-button' }
+
+// Handles kebab-case filenames
+const kebab = extractNameAndSlugFromUrl('/src/components/button-group.tsx');
+console.log(kebab); // { name: 'Button Group', slug: 'button-group' }
+```
+
+**Features:**
+
+- [✓] **Index file handling** - Uses parent directory name for `index.*` files
+- [✓] **Extension stripping** - Removes all file extensions (`.js`, `.d.ts`, `.module.css`, etc.)
+- [✓] **camelCase conversion** - Converts `customButton` to `Custom Button` / `custom-button`
+- [✓] **kebab-case conversion** - Converts `button-group` to `Button Group` / `button-group`
+- [✓] **URL protocol support** - Handles `file://` URLs and regular paths
+
+### externalsToPackages
+
+Converts an array of external import paths to a packages object for dependency tracking.
+
+```typescript
+import { externalsToPackages } from '@mui/internal-docs-infra/loaderUtils';
+
+const externals = [
+  'react',
+  'react-dom',
+  '@mui/internal-docs-infra/CodeHighlighter',
+  '@mui/internal-docs-infra/parseSource',
+  'lodash/get',
+  'some-package/submodule/deep',
+  '@/components/Button', // path alias - filtered out
+];
+
+const packages = externalsToPackages(externals);
+console.log(packages);
+// {
+//   'react': true,
+//   'react-dom': true,
+//   '@mui/internal-docs-infra': true,
+//   'lodash': true,
+//   'some-package': true
+// }
+```
+
+**Features:**
+
+- [✓] **Scoped package handling** - Extracts `@scope/package` from longer paths
+- [✓] **Submodule extraction** - Converts `lodash/get` to `lodash`
+- [✓] **Path alias filtering** - Ignores imports starting with `@/`
+- [✓] **Deduplication** - Returns unique packages as object keys
+
+### mergeExternals
+
+Merges multiple externals objects, combining imports from the same module and deduplicating.
+
+```typescript
+import { mergeExternals } from '@mui/internal-docs-infra/loaderUtils';
+import type { Externals } from '@mui/internal-docs-infra/CodeHighlighter/types';
+
+const externals1: Externals = {
+  react: [{ name: 'React', type: 'default' }],
+  lodash: [{ name: 'map', type: 'named' }],
+};
+
+const externals2: Externals = {
+  react: [{ name: 'useState', type: 'named' }],
+  lodash: [{ name: 'map', type: 'named' }], // duplicate - will be removed
+};
+
+const merged = mergeExternals([externals1, externals2]);
+console.log(merged);
+// {
+//   'react': [
+//     { name: 'React', type: 'default' },
+//     { name: 'useState', type: 'named' }
+//   ],
+//   'lodash': [{ name: 'map', type: 'named' }]
+// }
+```
+
+**Features:**
+
+- [✓] **Import deduplication** - Removes duplicate imports by name, type, and isType
+- [✓] **Module merging** - Combines imports from the same module across multiple externals
+- [✓] **Type preservation** - Maintains import metadata (default, named, type imports)
+
+### rewriteImports
+
+Rewrites import statements in source code based on a mapping.
+
+```typescript
+import { rewriteImports } from '@mui/internal-docs-infra/loaderUtils';
+
+const source = `
+import Component from '../components/Component';
+import { helper } from '../utils/helper';
+`;
+
+const importMap = new Map([
+  ['../components/Component', './Component'],
+  ['../utils/helper', './helper'],
+]);
+
+const rewritten = rewriteImports(source, importMap);
+console.log(rewritten);
+// import Component from './Component';
+// import { helper } from './helper';
+```
+
+## Filesystem Wrappers
+
+For Node.js environments, filesystem wrapper functions provide convenient access:
+
+```typescript
+import {
+  resolveModulePathWithFs,
+  resolveImportResultWithFs,
+  resolveVariantPathsWithFs,
+} from '@mui/internal-docs-infra/loaderUtils';
+
+// Basic resolution with Node.js filesystem
+const resolved = await resolveModulePathWithFs('/src/components/Button');
+
+// Type-aware resolution
+const typeAware = await resolveModulePathWithFs(
+  '/src/components/Button',
+  {},
+  true, // includeTypeDefs
+);
+
+// Batch import resolution
+const importResult = await parseImports(source, filePath);
+const resolvedPaths = await resolveImportResultWithFs(importResult);
+```
+
+## Complete Pipeline Example
+
+Here's how to use all the utilities together for a complete import processing pipeline:
+
+```typescript
+import {
+  parseImports,
+  resolveImportResultWithFs,
+  processRelativeImports,
+} from '@mui/internal-docs-infra/loaderUtils';
+
+async function processCodeImports(source: string, filePath: string) {
+  // 1. Parse imports from source
+  const importResult = await parseImports(source, filePath);
+
+  // 2. Resolve import paths to actual files
+  const resolvedPathsMap = await resolveImportResultWithFs(importResult);
+
+  // 3. Process and transform the imports
+  const result = processRelativeImports(source, importResult, resolvedPathsMap, 'flat');
+
+  return result;
+}
+
+// Usage
+const source = `
+import React from 'react';
+import { Button } from '../components/Button';
+import type { Props } from '../types';
+import '../styles.css';
+`;
+
+const result = await processCodeImports(source, '/src/demo/example.tsx');
+
+console.log(result.processedSource);
+// import React from 'react';
+// import { Button } from './Button';
+// import type { Props } from './types';
+// import './styles.css';
+
+console.log(result.extraFiles);
+// {
+//   './Button.tsx': 'file:///src/components/Button.tsx',
+//   './types.d.ts': 'file:///src/types.d.ts',
+//   './styles.css': 'file:///src/styles.css'
+// }
+```
+
+## Type Definitions
+
+### Core Types
+
+```typescript
+interface DirectoryEntry {
+  name: string;
+  isFile: boolean;
+  isDirectory: boolean;
+}
+
+type DirectoryReader = (path: string) => Promise<DirectoryEntry[]>;
+
+interface ResolveModulePathOptions {
+  extensions?: string[];
+}
+
+interface TypeAwareResolveResult {
+  import: string;
+  typeImport?: string;
+}
+
+type ImportResult = Record<
+  string,
+  {
+    path: string;
+    names: string[];
+    includeTypeDefs?: true;
+  }
+>;
+
+interface ProcessedImportResult {
+  processedSource: string;
+  extraFiles: Record<string, string>;
+}
+```
+
+### Extension Constants
+
+```typescript
+// Default extensions for JavaScript/TypeScript modules
+const JAVASCRIPT_MODULE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.d.ts'];
+
+// Type import extensions (prioritize .d.ts first)
+const TYPE_IMPORT_EXTENSIONS = ['.d.ts', '.ts', '.tsx', '.js', '.jsx'];
+
+// Value import extensions (standard priority)
+const VALUE_IMPORT_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.d.ts'];
+```
+
+## Performance Optimizations
+
+### Filesystem Access Optimization
+
+The utilities are optimized to minimize filesystem calls:
+
+- **Single directory read** when `includeTypeDefs` is enabled
+- **Batch resolution** for multiple imports in the same directory
+- **Efficient file mapping** using basename lookups
+- **Index file caching** for directory-based imports
+
+## Error Handling
+
+All functions include comprehensive error handling:
+
+```typescript
+try {
+  const result = await resolveModulePath('/nonexistent/path', directoryReader);
+} catch (error) {
+  console.error(`Module resolution failed: ${error.message}`);
+  // Error: Could not resolve module at path "/nonexistent/path".
+  // Tried extensions: .ts, .tsx, .js, .jsx, .d.ts
+}
+```
+
+## Testing
+
+The utilities include comprehensive test coverage:
+
+- **102 total tests** across 7 test files
+- **Integration tests** for full pipeline scenarios
+- **Unit tests** for individual functions
+- **Edge case coverage** for error conditions
+- **Performance benchmarks** for optimization verification
diff --git a/docs/app/docs-infra/functions/page.mdx b/docs/app/docs-infra/functions/page.mdx
new file mode 100644
index 000000000..79880c832
--- /dev/null
+++ b/docs/app/docs-infra/functions/page.mdx
@@ -0,0 +1,43 @@
+# Functions
+
+Developer utilities and build-time tools for the documentation infrastructure.
+
+## Configuration Plugins
+
+- [`withDocsInfra`](./with-docs-infra/page.mdx) - Next.js plugin for configuring webpack loaders, Turbopack rules, and MDX processing for docs sites
+
+## Factories
+
+- [`abstractCreateDemo`](./abstract-create-demo/page.mdx) - Factory utilities for creating structured demos that work with CodeHighlighter
+- [`abstractCreateDemoClient`](./abstract-create-demo-client/page.mdx) - Factory for creating client providers for live demo externals
+- [`createDemoData`](./create-demo-data/page.mdx) - Factory for creating demo metadata and configuration objects
+
+## Source Processing
+
+- [`parseSource`](./parse-source/page.mdx) - Parse source code into syntax-highlighted HAST using Starry Night
+- [`transformTypescriptToJavascript`](./transform-typescript-to-javascript/page.mdx) - Transform TypeScript/TSX to JavaScript/JSX with Babel and Prettier
+
+## Server Utilities
+
+- [`loadServerCodeMeta`](./load-server-code-meta/page.mdx) - Server utility for loading demo metadata and source information
+- [`loadServerSource`](./load-server-source/page.mdx) - Server utility for loading source code with recursive import resolution
+
+## Webpack Loaders
+
+- [`loadPrecomputedCodeHighlighter`](./load-precomputed-code-highlighter/page.mdx) - Webpack loader for build-time demo optimization
+- [`loadPrecomputedCodeHighlighterClient`](./load-precomputed-code-highlighter-client/page.mdx) - Webpack loader for client-side externals bundling in live demos
+
+## Rehype Plugins
+
+- [`transformHtmlCode`](./transform-html-code/page.mdx) - Plugin for transforming HTML code blocks into precomputed data structures
+
+## Remark Plugins
+
+- [`transformMarkdownCode`](./transform-markdown-code/page.mdx) - Remark plugin for transforming markdown code blocks with variants into HTML structures
+- [`transformMarkdownRelativePaths`](./transform-markdown-relative-paths/page.mdx) - Remark plugin for transforming relative markdown links to absolute paths
+- [`transformMarkdownBlockquoteCallouts`](./transform-markdown-blockquote-callouts/page.mdx) - Remark plugin for GitHub-style callout blockquotes (NOTE, TIP, IMPORTANT, WARNING, CAUTION)
+
+## Utilities
+
+- [`hastUtils`](./hast-utils/page.mdx) - Utilities for working with HAST (Hypertext Abstract Syntax Tree) and converting to JSX
+- [`loaderUtils`](./loader-utils/page.mdx) - A collection of utilities for loading and processing code, including parsing imports and resolving module paths
diff --git a/docs/app/docs-infra/functions/parse-source/page.mdx b/docs/app/docs-infra/functions/parse-source/page.mdx
new file mode 100644
index 000000000..9c13f8d05
--- /dev/null
+++ b/docs/app/docs-infra/functions/parse-source/page.mdx
@@ -0,0 +1,107 @@
+# parseSource
+
+The `parseSource` utility parses source code into HAST (Hypertext Abstract Syntax Tree) nodes with syntax highlighting using [Starry Night](https://github.com/wooorm/starry-night). It converts code into highlighted HTML structures for display in documentation and demos.
+
+## Features
+
+- Syntax highlighting using Starry Night with GitHub-style highlighting
+- Supports multiple programming languages via grammar definitions
+- Adds line gutters for code display
+- Graceful fallback for unsupported file types
+- Returns HAST nodes compatible with React rendering
+
+## Usage
+
+```ts
+import { createParseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+// Create an initialized parseSource function
+const parseSource = await createParseSource();
+
+// Parse and highlight code
+const highlighted = parseSource('const x = 42;', 'example.js');
+
+// Returns HAST tree like:
+// {
+//   type: 'root',
+//   children: [
+//     { type: 'element', tagName: 'span', properties: { className: ['pl-k'] }, children: [{ type: 'text', value: 'const' }] },
+//     { type: 'text', value: ' ' },
+//     { type: 'element', tagName: 'span', properties: { className: ['pl-s1'] }, children: [{ type: 'text', value: 'x' }] },
+//     // ... more highlighted nodes
+//   ]
+// }
+```
+
+## Initialization
+
+The function requires initialization before use:
+
+```ts
+import { createParseSource, parseSource } from '@mui/internal-docs-infra/pipeline/parseSource';
+
+// Option 1: Create initialized function
+const myParseSource = await createParseSource();
+const result = myParseSource(source, fileName);
+
+// Option 2: Use global instance (after createParseSource has been called)
+const result = parseSource(source, fileName);
+```
+
+## Supported Languages
+
+The parser supports languages based on file extensions through the grammar definitions:
+
+- **JavaScript**: `.js`, `.mjs`, `.cjs`
+- **TypeScript**: `.ts`, `.tsx`
+- **CSS**: `.css`
+- **HTML**: `.html`, `.htm`
+- **JSON**: `.json`
+- **And many more** via Starry Night grammars
+
+## Fallback Behavior
+
+For unsupported file types, returns a simple HAST structure:
+
+```ts
+const result = parseSource('Some unknown content', 'file.xyz');
+// Returns:
+// {
+//   type: 'root',
+//   children: [
+//     {
+//       type: 'text',
+//       value: 'Some unknown content'
+//     }
+//   ]
+// }
+```
+
+## Error Handling
+
+Throws an error if Starry Night is not initialized:
+
+```ts
+// This will throw an error
+parseSource('code', 'file.js'); // Error: Starry Night not initialized
+
+// Must initialize first
+await createParseSource();
+parseSource('code', 'file.js'); // Now works
+```
+
+## Line Gutters
+
+The parser automatically adds line gutters using `starryNightGutter` for better code display with line numbers.
+
+## When to Use
+
+- When implementing syntax highlighting for code blocks
+- When preparing code for display in [`CodeHighlighter`](../../components/code-highlighter/page.mdx)
+- When building custom code processing pipelines that need highlighted output
+
+## Related
+
+- [Starry Night](https://github.com/wooorm/starry-night) - The underlying syntax highlighter
+- [`hastUtils`](../hast-utils/page.mdx) - For converting HAST to React JSX
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Uses this for syntax highlighting
diff --git a/docs/app/docs-infra/functions/transform-html-code/page.mdx b/docs/app/docs-infra/functions/transform-html-code/page.mdx
new file mode 100644
index 000000000..383da605b
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-html-code/page.mdx
@@ -0,0 +1,181 @@
+# transformHtmlCode
+
+A rehype plugin that transforms `<pre>` elements containing `<code>` blocks into precomputed data for the CodeHighlighter component. This plugin extracts source code from HTML, processes it through syntax highlighting and transformations, then stores the results for efficient client-side rendering.
+
+## Overview
+
+This plugin is typically used in the **second stage** of a markdown-to-HTML processing pipeline, after [`transformMarkdownCodeVariants`](/functions/transformMarkdownCodeVariants) has converted markdown code blocks into HTML structures.
+
+## Key Features
+
+- **Multiple code variants**: Process multiple languages or versions within a single code block
+- **Automatic language detection**: Determines file types from `class="language-*"` attributes
+- **Custom variant names**: Supports `data-variant` attribute for explicit naming
+- **Custom filenames**: Supports `data-filename` attribute for specific file extensions
+- **Opt-in transformations**: Code blocks are only transformed when marked with `data-transform="true"`
+- **Built-in transformations**: Includes TypeScript-to-JavaScript conversion for marked blocks
+- **Syntax highlighting**: Pre-processes code for faster client rendering
+- **Error handling**: Gracefully handles processing errors
+
+## Installation & Usage
+
+```typescript
+import { unified } from 'unified';
+import rehypeParse from 'rehype-parse';
+import { transformHtmlCode } from '@mui/internal-docs-infra/transformHtmlCode';
+
+const processor = unified()
+  .use(rehypeParse)
+  .use(transformHtmlCode) // No configuration needed
+  .use(rehypeStringify);
+```
+
+### With Next.js and MDX
+
+```javascript
+// next.config.js
+const withMDX = require('@next/mdx')({
+  options: {
+    remarkPlugins: [transformMarkdownCodeVariants],
+    rehypePlugins: [transformHtmlCode],
+  },
+});
+
+module.exports = withMDX({
+  // your Next.js config
+});
+```
+
+## Input Examples
+
+### Single Code Block
+
+```html
+<pre><code class="language-typescript">
+const greeting: string = "Hello, world!";
+console.log(greeting);
+</code></pre>
+```
+
+### Multiple Code Variants (Different Languages)
+
+```html
+<pre>
+  <code class="language-js">console.log("Hello, world!");</code>
+  <code class="language-ts">console.log("Hello, world!" as string);</code>
+</pre>
+```
+
+### Custom Variant Names
+
+```html
+<pre>
+  <code class="language-js" data-variant="Client">console.log("Running on client");</code>
+  <code class="language-js" data-variant="Server">console.log("Running on server");</code>
+</pre>
+```
+
+### Custom Filenames
+
+```html
+<pre><code class="language-js" data-filename="app.jsx">
+const App = () => <div>Hello React!</div>;
+export default App;
+</code></pre>
+```
+
+### Code Block Transformations
+
+By default, code blocks are processed for syntax highlighting only. To enable transformations (like TypeScript-to-JavaScript conversion), explicitly mark the code block:
+
+```html
+<pre><code class="language-ts" data-transform="true">
+const greeting: string = "Hello, world!";
+console.log(greeting);
+</code></pre>
+```
+
+This will generate both the original TypeScript and the transformed JavaScript versions.
+
+## Output
+
+After processing, the plugin:
+
+1. **Replaces content** with a placeholder message
+2. **Stores processed data** in `dataPrecompute` attribute as JSON
+3. **Preserves original structure** for the CodeHighlighter component
+
+```html
+<pre data-precompute='{"Default":{"fileName":"index.ts","source":"...","transforms":{...}}}'>
+  Error: expected pre tag to be handled by CodeHighlighter
+</pre>
+```
+
+## Variant Naming
+
+| Scenario              | Variant Names                      |
+| --------------------- | ---------------------------------- |
+| Single code block     | `"Default"`                        |
+| Different languages   | `"Js"`, `"Ts"`, `"Html"`, etc.     |
+| Same language         | `"Variant 1"`, `"Variant 2"`, etc. |
+| Custom `data-variant` | Uses the specified name            |
+
+## Supported Languages
+
+| Class                                | Extension | Notes                                                 |
+| ------------------------------------ | --------- | ----------------------------------------------------- |
+| `language-js`, `language-javascript` | `.js`     |                                                       |
+| `language-ts`, `language-typescript` | `.ts`     | Includes TS→JS transform when `data-transform="true"` |
+| `language-tsx`                       | `.tsx`    | React TypeScript                                      |
+| `language-jsx`                       | `.jsx`    | React JavaScript                                      |
+| `language-json`                      | `.json`   |                                                       |
+| `language-html`                      | `.html`   |                                                       |
+| `language-css`                       | `.css`    |                                                       |
+| `language-bash`, `language-shell`    | `.sh`     |                                                       |
+| `language-yaml`, `language-yml`      | `.yaml`   |                                                       |
+| Others                               | `.txt`    | Fallback                                              |
+
+## Integration with transformMarkdownCodeVariants
+
+These plugins work together in a processing pipeline:
+
+1. **transformMarkdownCodeVariants** (remark): Converts markdown code blocks with variants into HTML
+2. **transformHtmlCode** (rehype): Processes the HTML and precomputes data for rendering
+
+### Complete Example
+
+**Markdown Input:**
+
+````markdown
+npm
+
+```bash variant-group=install
+npm install package
+```
+
+pnpm
+
+```bash variant-group=install
+pnpm install package
+```
+````
+
+**After transformMarkdownCodeVariants:**
+
+```html
+<pre>
+  <code class="language-bash" data-variant="npm">npm install package</code>
+  <code class="language-bash" data-variant="pnpm">pnpm install package</code>
+</pre>
+```
+
+**After transformHtmlCode:**
+
+```html
+<pre data-precompute='{"npm":{"fileName":"index.sh","source":"npm install package"...}}'>
+  Error: expected pre tag to be handled by CodeHighlighter
+</pre>
+```
+
+- Processes code blocks in parallel across the document
+- Optimized text extraction with single-pass traversal
diff --git a/docs/app/docs-infra/functions/transform-markdown-blockquote-callouts/page.mdx b/docs/app/docs-infra/functions/transform-markdown-blockquote-callouts/page.mdx
new file mode 100644
index 000000000..92eaf309a
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-markdown-blockquote-callouts/page.mdx
@@ -0,0 +1,120 @@
+# Transform Markdown Blockquote Callouts
+
+The `transformMarkdownBlockquoteCallouts` plugin is a Remark plugin that enables GitHub-style callout blocks in markdown. It transforms blockquotes with special markers (like `> [!NOTE]`) into HTML blockquotes with a `data-callout-type` attribute, making it easy to style and render callouts in your documentation.
+
+## Features
+
+- **GitHub-style callouts**: Supports `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, and `[!CAUTION]` markers
+- **HTML data attributes**: Adds `data-callout-type` to blockquotes for easy styling
+- **Removes callout marker**: Cleans up the markdown so the marker does not appear in the rendered output
+- **Works with multi-paragraph and nested content**
+- **Compatible with Next.js, MDX, and unified pipelines**
+
+## Supported Callout Types
+
+| Marker         | Attribute Value |
+| -------------- | --------------- |
+| `[!NOTE]`      | `note`          |
+| `[!TIP]`       | `tip`           |
+| `[!IMPORTANT]` | `important`     |
+| `[!WARNING]`   | `warning`       |
+| `[!CAUTION]`   | `caution`       |
+
+### Default Colors
+
+| Callout Type | Color  |
+| ------------ | ------ |
+| `note`       | Blue   |
+| `tip`        | Green  |
+| `important`  | Purple |
+| `warning`    | Orange |
+| `caution`    | Red    |
+
+> [!NOTE]
+> These are the default colors used by GitHub. Colors may vary in your implementation, but try to maintain a similar visual hierarchy.
+
+## Example
+
+### How to Write a Callout in Markdown
+
+```markdown
+> [!TIP]
+> This is a tip callout. You can use any of the supported callout types:
+>
+> - [!NOTE]
+> - [!TIP]
+> - [!IMPORTANT]
+> - [!WARNING]
+> - [!CAUTION]
+>
+> The callout marker must be the first text in the blockquote.
+```
+
+### Live Callout Examples
+
+> [!NOTE]
+> This is a note callout. It uses the `[!NOTE]` marker and renders with a special style.
+
+> [!TIP]
+> This is a tip callout. Use tips for helpful suggestions or shortcuts.
+
+> [!IMPORTANT]
+> This is an important callout. Use for critical information.
+
+> [!WARNING]
+> This is a warning callout. Use for potential problems or risks.
+
+> [!CAUTION]
+> This is a caution callout. Use for things users should be careful about.
+
+You can also have multiple paragraphs:
+
+> [!NOTE]
+> This callout has multiple paragraphs.
+>
+> The second paragraph is also included in the callout.
+
+## Usage
+
+Add the plugin to your unified/remark pipeline:
+
+```ts
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import { transformMarkdownBlockquoteCallouts } from '@mui/internal-docs-infra/pipeline/transformMarkdownBlockquoteCallouts';
+
+const processor = unified()
+  .use(remarkParse)
+  .use(transformMarkdownBlockquoteCallouts)
+  .use(remarkRehype)
+  .use(rehypeStringify);
+
+const markdown = `
+> [!TIP]
+> This is a tip!
+`;
+
+const html = await processor.process(markdown);
+console.log(html.toString());
+```
+
+## Integration
+
+This plugin is included by default in the docs-infra markdown pipeline. You can also use it in any unified/remark-based project.
+
+- **Next.js/MDX**: Add to your remarkPlugins array
+- **Custom pipelines**: Use as shown above
+
+## Best Practices
+
+1. **Use only supported callout types**: Only the five types above will be recognized and styled
+2. **Start callouts at the beginning of a blockquote**: The marker must be the first text in the first paragraph
+3. **Use for notes, tips, warnings, and important info**: Reserve callouts for content that needs to stand out
+4. **Style callouts in your CSS**: Target `[data-callout-type]` attributes for custom styles
+
+## Related
+
+- [GitHub Callouts Syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) — GitHub's official callout syntax
+- [remark](https://github.com/remarkjs/remark) — Markdown processor
diff --git a/docs/app/docs-infra/functions/transform-markdown-code/page.mdx b/docs/app/docs-infra/functions/transform-markdown-code/page.mdx
new file mode 100644
index 000000000..69fbf94a1
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-markdown-code/page.mdx
@@ -0,0 +1,473 @@
+# transformMarkdownCode
+
+A remark plugin that transforms markdown code blocks into HTML structures with enhanced metadata support. This plugin handles both individual code blocks with options and multi-variant code examples. It's the **first stage** in a processing pipeline, typically followed by [`transformHtmlCode`](/functions/transformHtmlCode) for final rendering.
+
+## Overview
+
+Use this plugin to enhance markdown code blocks with custom data attributes for highlighting, transformations, and other features. It also supports creating multi-variant code examples to show the same code in different languages, package managers, or configurations.
+
+## Key Features
+
+- **Individual code blocks**: Transform single code blocks with options (e.g., `fileName=test.ts`, `highlight=2-3`)
+- **Multiple variant formats**: Support for `variant=name` and `variant-group=name` syntax
+- **Automatic grouping**: Adjacent code blocks with variants are combined into single examples
+- **Language detection**: Preserves syntax highlighting with `class="language-*"` attributes
+- **Label support**: Extract labels from text between code blocks
+- **Clean HTML output**: Generates semantic HTML structure for further processing
+
+## Installation & Usage
+
+```typescript
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import { transformMarkdownCode } from '@mui/internal-docs-infra/transformMarkdownCode';
+
+const processor = unified().use(remarkParse).use(transformMarkdownCode);
+```
+
+### With Next.js and MDX
+
+```javascript
+// next.config.js
+const withMDX = require('@next/mdx')({
+  options: {
+    remarkPlugins: [transformMarkdownCode],
+    rehypePlugins: [transformHtmlCode], // For final processing
+  },
+});
+
+module.exports = withMDX({
+  // your Next.js config
+});
+```
+
+## Syntax Examples
+
+### Individual Code Blocks with Options
+
+The simplest usage - transform single code blocks by adding options directly:
+
+**Basic Example:**
+
+````markdown
+```ts fileName=greeting.ts
+const greeting: string = 'Hello, world!';
+console.log(greeting);
+```
+````
+
+**HTML Output:**
+
+```html
+<pre><code class="language-ts" data-file-name="greeting.ts">const greeting: string = "Hello, world!";
+console.log(greeting);</code></pre>
+```
+
+**Multiple Options:**
+
+````markdown
+```javascript fileName=test.js transform
+function test() {
+  console.log('line 2');
+  console.log('line 3');
+}
+```
+````
+
+**HTML Output:**
+
+```html
+<pre><code class="language-javascript" data-file-name="test.js" data-transform="true">function test() {
+console.log('line 2');
+console.log('line 3');
+}</code></pre>
+```
+
+Individual code blocks with options are processed immediately and don't require grouping with other blocks.
+
+### Basic Variants (variant=name)
+
+Show the same task across different package managers. This style is ideal when the variant names are self-evident from the code content and don't need explicit labeling:
+
+**Markdown Input:**
+
+````markdown
+```bash variant=npm
+npm install package
+```
+
+```bash variant=pnpm
+pnpm install package
+```
+
+```bash variant=yarn
+yarn add package
+```
+````
+
+**HTML Output:**
+
+```html
+<pre>
+  <code class="language-bash" data-variant="npm">npm install package</code>
+  <code class="language-bash" data-variant="pnpm">pnpm install package</code>  
+  <code class="language-bash" data-variant="yarn">yarn add package</code>
+</pre>
+```
+
+### Labeled Variants (variant-group=name)
+
+Add descriptive labels for each variant when the differences aren't obvious from the code alone. This is particularly useful for implementation approaches, configuration strategies, or conceptual differences:
+
+**Markdown Input:**
+
+````markdown
+Production Environment
+
+```javascript variant-group=deployment
+const config = {
+  apiUrl: process.env.PROD_API_URL,
+  cache: { ttl: 3600 },
+  logging: { level: 'error' },
+};
+```
+
+Development Environment
+
+```javascript variant-group=deployment
+const config = {
+  apiUrl: 'http://localhost:3000',
+  cache: { ttl: 0 },
+  logging: { level: 'debug' },
+};
+```
+
+Testing Environment
+
+```javascript variant-group=deployment
+const config = {
+  apiUrl: 'http://test-api.example.com',
+  cache: { ttl: 300 },
+  logging: { level: 'warn' },
+};
+```
+````
+
+**HTML Output:**
+
+```html
+<pre>
+  <code class="language-javascript" data-variant="Production Environment">const config = {
+  apiUrl: process.env.PROD_API_URL,
+  cache: { ttl: 3600 },
+  logging: { level: 'error' }
+};</code>
+  <code class="language-javascript" data-variant="Development Environment">const config = {
+  apiUrl: 'http://localhost:3000',
+  cache: { ttl: 0 },
+  logging: { level: 'debug' }
+};</code>
+  <code class="language-javascript" data-variant="Testing Environment">const config = {
+  apiUrl: 'http://test-api.example.com',
+  cache: { ttl: 300 },
+  logging: { level: 'warn' }
+};</code>
+</pre>
+```
+
+### Different Languages
+
+Show examples across multiple programming languages:
+
+**Markdown Input:**
+
+````markdown
+```javascript variant=client
+fetch('/api/data').then((res) => res.json());
+```
+
+```python variant=server
+import requests
+response = requests.get('/api/data')
+```
+
+```go variant=cli
+resp, err := http.Get("/api/data")
+```
+````
+
+**HTML Output:**
+
+```html
+<pre>
+  <code class="language-javascript" data-variant="client">fetch('/api/data').then(res => res.json())</code>
+  <code class="language-python" data-variant="server">import requests
+response = requests.get('/api/data')</code>
+  <code class="language-go" data-variant="cli">resp, err := http.Get("/api/data")</code>
+</pre>
+```
+
+### Custom Properties
+
+Add extra metadata using additional properties:
+
+**Markdown Input:**
+
+````markdown
+```bash variant=npm filename=install.sh
+npm install package
+```
+
+```bash variant=pnpm filename=install.sh
+pnpm install package
+```
+````
+
+**HTML Output:**
+
+```html
+<pre>
+  <code class="language-bash" data-variant="npm" data-filename="install.sh">npm install package</code>
+  <code class="language-bash" data-variant="pnpm" data-filename="install.sh">pnpm install package</code>
+</pre>
+```
+
+## Plugin Behavior
+
+### Individual Code Block Processing
+
+Code blocks with options (but no `variant` or `variant-group`) are processed immediately:
+
+- **Single transformation**: Creates a `<pre><code>` element with data attributes
+- **No grouping required**: Works with standalone code blocks
+- **Option handling**: Converts options to HTML data attributes (e.g., `fileName=test.ts` → `data-file-name="test.ts"`)
+- **Language preservation**: Maintains syntax highlighting classes
+
+### Grouping Rules
+
+- **Adjacent blocks**: Code blocks must be consecutive (blank lines allowed)
+- **Minimum size**: Groups require at least 2 code blocks
+- **Same format**: All blocks must use either `variant=` or `variant-group=`
+- **Single blocks**: Code blocks with variants that don't form groups remain unchanged
+
+### Label Extraction (variant-group only)
+
+For `variant-group` format, paragraphs between code blocks become variant names:
+
+````markdown
+Client-side
+
+```js variant-group=implementation
+fetch('/api/data');
+```
+
+Server-side
+
+```js variant-group=implementation
+const data = await db.query();
+```
+````
+
+Creates variants named "Client-side" and "Server-side".
+
+### Language Support
+
+All markdown code block languages are supported:
+
+- `js`, `javascript`, `ts`, `typescript`
+- `python`, `go`, `rust`, `java`, `c`, `cpp`
+- `bash`, `shell`, `zsh`, `fish`
+- `html`, `css`, `json`, `yaml`, `xml`
+- And any other language identifier
+
+## Integration with transformHtmlCode
+
+This plugin works seamlessly with [`transformHtmlCode`](../transform-html-code/page.mdx):
+
+1. **transformMarkdownCode** converts markdown to HTML
+2. **transformHtmlCode** processes HTML for rendering components
+
+### Complete Pipeline Example
+
+**Step 1 - Markdown:**
+
+````markdown
+npm
+
+```bash variant-group=install
+npm install package
+```
+
+pnpm
+
+```bash variant-group=install
+pnpm install package
+```
+````
+
+**Step 2 - After transformMarkdownCode:**
+
+```html
+<pre>
+  <code class="language-bash" data-variant="npm">npm install package</code>
+  <code class="language-bash" data-variant="pnpm">pnpm install package</code>
+</pre>
+```
+
+**Step 3 - After transformHtmlCode:**
+
+```html
+<pre data-precompute='{"npm":{"fileName":"index.sh","source":"npm install package"...}}'>
+  Error: expected pre tag to be handled by CodeHighlighter
+</pre>
+```
+
+## Common Use Cases
+
+### Individual Code Enhancement
+
+Add metadata to single code blocks for transformations, highlighting, or special processing.
+
+### Package Manager Examples
+
+Show installation instructions for different package managers.
+
+### Framework Comparisons
+
+Display the same functionality in React, Vue, Angular, etc.
+
+### Configuration Files
+
+Show different formats (JSON, YAML, TOML) for the same configuration.
+
+### API Examples
+
+Demonstrate requests in different programming languages or tools (curl, fetch, axios).
+
+## Configuration
+
+This plugin works out-of-the-box with no configuration required. It automatically:
+
+- Detects options in code block metadata for individual blocks
+- Detects variant syntax in code block metadata for grouping
+- Groups adjacent code blocks with variants
+- Extracts labels from paragraphs (variant-group format)
+- Preserves all code block languages and properties
+- Generates clean, semantic HTML output
+
+## Troubleshooting
+
+### Individual Code Blocks Not Processing
+
+**Problem**: Code blocks with options aren't getting transformed.
+
+**Solutions**:
+
+- Ensure options are in the code block metadata: ` ```js transform` not ` ```js`
+- Check that options don't include `variant` or `variant-group` (those trigger grouping behavior)
+- Verify the code block has a language specified
+
+### Code Blocks Not Grouping
+
+**Problem**: Adjacent code blocks with variants aren't combining into a single `<pre>` element.
+
+**Solutions**:
+
+- Ensure all blocks use the same format (`variant=` or `variant-group=`)
+- Check that blocks are truly adjacent (only blank lines allowed between)
+- Verify you have at least 2 code blocks with variant metadata
+
+### Labels Not Working
+
+**Problem**: Using `variant-group` but variant names aren't extracted from paragraphs.
+
+**Solutions**:
+
+- Ensure paragraphs are directly between code blocks
+- Use simple text paragraphs (no complex markdown)
+- Check that all code blocks use `variant-group=samename`
+
+### Missing Language Classes
+
+**Problem**: Generated HTML doesn't have `class="language-*"` attributes.
+
+**Solutions**:
+
+- Ensure code blocks specify a language: ` ```javascript ` not just ` ``` `
+- Check that the language comes before the variant metadata
+- Verify your markdown processor supports language specification
+
+## Technical Details
+
+### HTML Structure
+
+Generated HTML follows this pattern:
+
+```html
+<pre>
+  <code class="language-{lang}" data-variant="{name}" data-{prop}="{value}">
+    {escaped code content}
+  </code>
+  <!-- additional code elements -->
+</pre>
+```
+
+### Data Attributes
+
+- `data-variant`: The variant name (from `variant=` or extracted label)
+- `data-*`: Any additional properties from code block metadata
+- `class="language-*"`: Preserved for syntax highlighting compatibility
+
+### Performance
+
+- Single-pass processing of the markdown AST
+- Efficient adjacent node grouping algorithm
+- Minimal memory overhead for typical document sizes
+
+## Implementation Details
+
+### AST Transformation
+
+The plugin uses `unist-util-visit` to traverse the markdown AST and identify code blocks with metadata. It then:
+
+1. **Parses metadata**: Extracts options and variant information from code block metadata
+2. **Determines processing type**: Individual blocks vs. variant groups
+3. **Groups adjacent blocks**: Collects consecutive code blocks with variants that belong together
+4. **Generates MDX JSX**: Creates proper `mdxJsxFlowElement` nodes with `pre` and `code` elements
+5. **Sets attributes**: Adds `data-variant`, `className`, and custom data attributes
+6. **Replaces nodes**: Substitutes the original code blocks with the generated MDX JSX elements
+
+### Language Detection
+
+The plugin handles language information in two ways:
+
+- **With explicit language**: `````javascript variant=npm` - language is `javascript`, meta is `variant=npm`
+- **Without explicit language**: `````variant=npm` - meta information is in the language field
+
+### Metadata Parsing
+
+The `parseMeta` function splits metadata strings by spaces and parses key=value pairs:
+
+- `transform` - Boolean flag that becomes `data-transform="true"`
+- `highlight=2-3` - Becomes `data-highlight="2-3"`
+- `variant=name` - Sets the variant for grouping
+- `variant-group=name` - Sets the variant group for label-based grouping
+- `filename=package.json` - Becomes `data-filename="package.json"`
+- Any other properties become data attributes
+
+## Error Handling
+
+The plugin is designed to be robust and graceful:
+
+- Invalid metadata is ignored
+- Individual code blocks with options are processed immediately
+- Single code blocks with variants are left unchanged
+- Non-adjacent code blocks are not grouped
+- Generates proper MDX JSX elements that integrate seamlessly
+
+## Performance Considerations
+
+- Uses `Set` data structures for efficient duplicate tracking
+- Processes nodes in a single AST traversal
+- Minimal memory overhead for metadata parsing
+- Parallel-friendly (no global state dependencies)
diff --git a/docs/app/docs-infra/functions/transform-markdown-demo-links/page.mdx b/docs/app/docs-infra/functions/transform-markdown-demo-links/page.mdx
new file mode 100644
index 000000000..6b243b941
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-markdown-demo-links/page.mdx
@@ -0,0 +1,237 @@
+# transformMarkdownDemoLinks
+
+A remark plugin that automatically cleans up "[See Demo]" links and horizontal rules that follow Demo components in markdown documentation. This plugin identifies Demo components (without `.Title`) and removes associated navigation elements to create cleaner documentation.
+
+## Overview
+
+Use this plugin to automatically clean up demo-related markdown patterns in your documentation. It removes redundant "[See Demo]" links that point to demo pages and optional horizontal rules that follow Demo components, streamlining the reading experience by eliminating unnecessary navigation clutter.
+
+## Key Features
+
+- **Demo component detection**: Identifies `<Demo` components without `.Title` props
+- **Link removal**: Removes "[See Demo]" links that follow Demo components
+- **Rule cleanup**: Removes horizontal rules (`---`) that follow Demo components
+- **Multiple formats**: Supports standalone, multiline, and mixed-content Demo components
+- **Smart detection**: Only removes elements that directly follow Demo components
+- **Safe processing**: Preserves all other markdown content and structure
+
+## Installation & Usage
+
+```typescript
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import { transformMarkdownDemoLinks } from '@mui/internal-docs-infra/transformMarkdownDemoLinks';
+
+const processor = unified().use(remarkParse).use(transformMarkdownDemoLinks);
+```
+
+### With docs-infra
+
+This plugin is automatically included when using `withDocsInfra()` from `@mui/internal-docs-infra`. See the [CodeHighlighter documentation](../../components/code-highlighter/page.mdx#link-to-demo) for examples of Demo components in action.
+
+## Syntax Examples
+
+### Basic Demo Component Cleanup
+
+The most common usage - removes "[See Demo]" links and horizontal rules that follow Demo components:
+
+**Before:**
+
+```markdown
+<Demo src="ButtonDemo" />
+
+[See Demo](/material-ui/react-button/)
+
+---
+
+More content here...
+```
+
+**After:**
+
+```markdown
+<Demo src="ButtonDemo" />
+
+More content here...
+```
+
+### Demo Component with Properties
+
+**Before:**
+
+```markdown
+<Demo 
+  src="advanced/ButtonDemo" 
+  variant="playground"
+  height={400}
+/>
+
+[See Demo](/material-ui/react-button/playground/)
+
+---
+
+Next section content...
+```
+
+**After:**
+
+```markdown
+<Demo 
+  src="advanced/ButtonDemo" 
+  variant="playground"
+  height={400}
+/>
+
+Next section content...
+```
+
+### Horizontal Rule Only Cleanup
+
+Removes horizontal rules even when there's no "[See Demo]" link:
+
+**Before:**
+
+```markdown
+<Demo src="SimpleDemo" />
+
+---
+
+Continue reading...
+```
+
+**After:**
+
+```markdown
+<Demo src="SimpleDemo" />
+
+Continue reading...
+```
+
+## Demo Component Detection
+
+The plugin detects Demo components in various formats:
+
+**Standalone HTML:**
+
+```markdown
+<Demo src="ButtonDemo" />
+```
+
+**Opening/Closing Tags:**
+
+```markdown
+<Demo src="ButtonDemo">
+  Content here
+</Demo>
+```
+
+**Multiline with Properties:**
+
+```markdown
+<Demo 
+  src="advanced/ButtonDemo" 
+  variant="playground"
+  height={400}
+/>
+```
+
+### Demo.Title Exclusion
+
+Demo components **with** `.Title` are **not** processed:
+
+**Preserved (not cleaned up):**
+
+```markdown
+<Demo.Title>Button Examples</Demo.Title>
+
+[See Demo](/material-ui/react-button/)
+
+---
+```
+
+This pattern remains unchanged because `Demo.Title` components serve a different purpose and their associated links should be preserved.
+
+## Plugin Behavior
+
+### Processing Rules
+
+1. **Demo detection**: Scans for HTML elements containing "Demo" components
+2. **Sequential processing**: Checks the next elements after each Demo component
+3. **Link identification**: Looks for paragraphs containing "[See Demo]" links
+4. **Rule removal**: Removes horizontal rules that follow Demo components
+5. **Safe removal**: Only removes elements that directly follow Demo components
+
+### Element Matching
+
+**"[See Demo]" Links:**
+
+- Must be in a paragraph element
+- Must contain text that starts with "[See Demo]"
+- Must be the immediate next element after a Demo component
+
+**Horizontal Rules:**
+
+- Standard markdown horizontal rules (`---`)
+- Must immediately follow a Demo component or "[See Demo]" link
+
+### Content Preservation
+
+The plugin preserves:
+
+- All non-Demo HTML components
+- Demo components with `.Title`
+- "[See Demo]" links not following Demo components
+- Horizontal rules not following Demo components
+- All other markdown content and structure
+
+## Common Use Cases
+
+### Documentation Cleanup
+
+Remove redundant navigation elements from documentation that already contains interactive demos.
+
+### Migration from External Demos
+
+Clean up documentation when migrating from external demo pages to embedded demos.
+
+### Streamlined Reading Experience
+
+Eliminate navigation clutter to create a more focused reading experience.
+
+## Configuration
+
+This plugin works out-of-the-box with no configuration required. It automatically detects Demo components and cleans up associated navigation elements.
+
+For more information about Demo components and how they work with the CodeHighlighter system, see the [CodeHighlighter documentation](/components/code-highlighter).
+
+## Troubleshooting
+
+### Links Not Being Removed
+
+**Problem**: "[See Demo]" links remain in the output.
+
+**Solutions**:
+
+- Ensure the link immediately follows a Demo component
+- Verify the link text starts with "[See Demo]"
+- Check that the Demo component doesn't have `.Title`
+
+### Demo Components Not Detected
+
+**Problem**: The plugin doesn't recognize Demo components.
+
+**Solutions**:
+
+- Verify the HTML element contains "Demo" in the tag name
+- Check that it's not `Demo.Title` (which is excluded)
+- Ensure proper HTML syntax in the markdown
+
+### Unexpected Content Removal
+
+**Problem**: Content is being removed that shouldn't be.
+
+**Solutions**:
+
+- Verify that removed content immediately follows a Demo component
+- Check for "[See Demo]" text in unexpected places
+- Ensure proper markdown structure
diff --git a/docs/app/docs-infra/functions/transform-markdown-relative-paths/page.mdx b/docs/app/docs-infra/functions/transform-markdown-relative-paths/page.mdx
new file mode 100644
index 000000000..e60989b67
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-markdown-relative-paths/page.mdx
@@ -0,0 +1,264 @@
+# Transform Markdown Relative Paths
+
+The `transformMarkdownRelativePaths` plugin is a Remark plugin that automatically transforms relative markdown links to work seamlessly in both development environments (VSCode, GitHub) and production builds. It strips page file extensions and converts relative paths to absolute URLs.
+
+## Features
+
+- **Page extension stripping** - Removes `/page.tsx`, `/page.jsx`, `/page.js`, `/page.mdx`, `/page.md` from URLs
+- **Relative path resolution** - Converts `./` and `../` paths to absolute URLs based on current file location
+- **Native markdown compatibility** - Works with standard markdown linking syntax
+- **Automatic integration** - Included by default when using the Next.js plugin
+
+## How It Works
+
+The plugin processes markdown links in two phases:
+
+1. **Strip page extensions** - Removes page file extensions from all URLs
+2. **Resolve relative paths** - Converts relative paths to absolute paths based on the current file's directory structure
+
+### URL Transformations
+
+| Original Link                 | Current File            | Transformed Link        |
+| ----------------------------- | ----------------------- | ----------------------- |
+| `./getting-started/page.mdx`  | `/docs/page.mdx`        | `/docs/getting-started` |
+| `../api-reference/page.tsx`   | `/docs/guides/page.mdx` | `/docs/api-reference`   |
+| `/components/page.tsx`        | Any file                | `/components`           |
+| `../hooks/page.mdx#use-state` | `/docs/page.mdx`        | `/hooks#use-state`      |
+
+## Best Practices for Linking
+
+### Use Relative Links with page.mdx
+
+Always link to `page.mdx` files using relative paths for the best compatibility:
+
+1. **Use Relative Links for Internal Navigation**
+   - Link to sibling pages with `./sibling-page/page.mdx`
+   - Link to parent directory with `../page.mdx`
+   - Link to child directories with `./child/page.mdx`
+
+2. **Maintain GitHub Compatibility**
+   - All links work in GitHub's file browser
+   - VSCode navigation follows links correctly
+   - No broken links in raw markdown view
+
+3. **Keep Links Simple and Readable**
+   - Use clear, descriptive file names
+   - Organize content in logical directory structures
+   - Avoid deeply nested paths when possible
+
+4. **Avoid Links in Headers**
+   - Don't use markdown links within header text (h1-h6)
+   - Links in headers can interfere with anchor generation
+   - Use separate paragraphs below headers for navigation links
+
+5. **Use Function/Class Names as Link Text**
+   - When linking to functions or classes, use their actual names as the link text
+   - Example: [`validateInput`](../validate-input/page.mdx) not [Input Validator](../validate-input/page.mdx)
+   - This makes it clear what API you're referencing and improves searchability
+
+````markdown
+### Basic Example
+
+```markdown
+<!-- In /docs/getting-started/page.mdx -->
+
+# Getting Started
+
+Welcome to our documentation! Check out the [API Reference](../api-reference/page.mdx)
+or explore our [Components](../components/page.mdx).
+
+For more detailed guides, see:
+
+- [Installation Guide](./installation/page.mdx)
+- [Configuration](./configuration/page.mdx)
+- [Troubleshooting](./troubleshooting/page.mdx)
+```
+````
+
+### Advanced Example with Fragments
+
+```markdown
+<!-- In /docs/guides/page.mdx -->
+
+# User Guides
+
+## Quick Start
+
+Start with our [Getting Started](../getting-started/page.mdx) guide.
+
+## Advanced Topics
+
+Learn about:
+
+- [Custom Hooks](../hooks/page.mdx#custom-hooks)
+- [State Management](../state/page.mdx#management)
+- [Performance Tips](../performance/page.mdx#optimization)
+```
+
+### Directory Structure Examples
+
+Given this directory structure:
+
+```
+docs/app/
+├── components/
+│   ├── page.mdx
+│   ├── button/
+│   │   └── page.mdx
+│   └── input/
+│       └── page.mdx
+└── guides/
+    └── getting-started/
+        └── page.mdx
+```
+
+From `/components/input/page.mdx`:
+
+```markdown
+<!-- Link to sibling component -->
+
+[Button](../button/page.mdx)
+
+<!-- Link to parent components index -->
+
+[Components Overview](../page.mdx)
+
+<!-- Link to guides -->
+
+[Getting Started](../../guides/getting-started/page.mdx)
+```
+
+### Why This Approach Works
+
+1. **GitHub Compatibility** - Links work when browsing the repository on GitHub
+2. **VSCode Navigation** - Click-to-navigate works in your editor
+3. **Build-time Optimization** - Plugin transforms links for production
+4. **SEO Friendly** - Clean URLs without file extensions in production
+
+## Integration
+
+### Automatic with Next.js Plugin
+
+The plugin is automatically included when using the docs-infra Next.js plugin:
+
+```javascript
+// next.config.js
+const { withDocsInfra } = require('@mui/internal-docs-infra/next');
+
+module.exports = withDocsInfra({
+  // Your Next.js config
+});
+```
+
+### Manual Integration
+
+You can also use the plugin directly with Remark:
+
+```javascript
+import { remark } from 'remark';
+import { transformMarkdownRelativePaths } from '@mui/internal-docs-infra/pipeline/transformMarkdownRelativePaths';
+
+const processor = remark().use(transformMarkdownRelativePaths);
+
+const result = await processor.process(markdownContent);
+```
+
+## Advanced Usage
+
+### With Query Parameters and Fragments
+
+The plugin preserves query parameters and URL fragments:
+
+```markdown
+<!-- Input -->
+
+[API Reference](./button/page.mdx?section=props#api-table)
+
+<!-- Output (from /components/page.mdx) -->
+
+/components/button?section=props#api-table
+```
+
+### Nested Directory Navigation
+
+The plugin correctly handles deeply nested directory structures:
+
+```markdown
+<!-- From /components/forms/inputs/text-field/page.mdx -->
+
+<!-- Up two levels to components -->
+
+[Components](../../page.mdx)
+
+<!-- To sibling form component -->
+
+[Select](../select/page.mdx)
+
+<!-- To different top-level section -->
+
+[Guides](../../../guides/page.mdx)
+```
+
+## Configuration
+
+The plugin works out of the box without configuration. It automatically:
+
+- Detects the current file's location
+- Resolves relative paths based on the `/app/` directory structure
+- Preserves absolute paths and external URLs unchanged
+- Maintains query parameters and URL fragments
+
+## Examples
+
+### Component Cross-References
+
+```markdown
+<!-- In a component documentation file -->
+
+This component works with [`FormProvider`](../form-provider/page.mdx)
+and [`useValidation`](../use-validation/page.mdx) hook.
+
+For advanced usage, see the [Integration Guide](../../guides/integration/page.mdx).
+```
+
+### Function Documentation Links
+
+```markdown
+<!-- In a function documentation file -->
+
+This function is used by [`validateForm`](../validate-form/page.mdx)
+and [`submitForm`](../submit-form/page.mdx).
+
+See the [Component examples](../../components/page.mdx) for usage.
+```
+
+### Index Page Navigation
+
+```markdown
+<!-- In an index/overview page -->
+
+## Available Components
+
+- [`Button`](./button/page.mdx) - Interactive button component
+- [`Input`](./input/page.mdx) - Text input with validation
+- [`Form`](./form/page.mdx) - Form container with state management
+
+## Related Utilities
+
+- [`validateInput`](../utils/validate-input/page.mdx) - Input validation
+- [`formatData`](../utils/format-data/page.mdx) - Data formatting helper
+```
+
+## Benefits
+
+- **Developer Experience** - Natural markdown linking that works everywhere
+- **Maintainability** - Links remain valid as files move within the `/app/` structure
+- **Performance** - Clean URLs in production builds
+- **Accessibility** - Standard markdown link behavior for screen readers
+- **Version Control** - Easy to review link changes in diffs
+
+## Related
+
+- **Next.js Integration** - Automatic inclusion in Next.js builds
+- **Remark Pipeline** - Part of the markdown processing pipeline
+- **Markdown Standards** - Compatible with standard markdown linking syntax
diff --git a/docs/app/docs-infra/functions/transform-typescript-to-javascript/page.mdx b/docs/app/docs-infra/functions/transform-typescript-to-javascript/page.mdx
new file mode 100644
index 000000000..e19533132
--- /dev/null
+++ b/docs/app/docs-infra/functions/transform-typescript-to-javascript/page.mdx
@@ -0,0 +1,133 @@
+# transformTypescriptToJavascript
+
+The `transformTypescriptToJavascript` utility transforms TypeScript/TSX code into JavaScript/JSX using Babel, preserving formatting and automatically generating JavaScript variants for documentation and demos.
+
+## Features
+
+- Removes TypeScript types and decorators while preserving React JSX
+- Handles both `.ts` → `.js` and `.tsx` → `.jsx` transformations
+- Preserves blank lines and code formatting using smart newline replacement
+- Automatically formats output with Prettier (configurable)
+- Removes TypeScript-specific comments that reference removed constructs
+- Supports TSX with React components
+
+## Usage
+
+```ts
+import { transformTypescriptToJavascript } from '@mui/internal-docs-infra/pipeline/transformTypescriptToJavascript';
+
+// Transform TypeScript to JavaScript
+const result = await transformTypescriptToJavascript(
+  'const x: number = 1;\ninterface Props { name: string; }',
+  'example.ts',
+);
+
+// Returns:
+// {
+//   js: {
+//     source: 'const x = 1;\n',
+//     fileName: 'example.js'
+//   }
+// }
+```
+
+## Transformer Configuration
+
+The utility is also available as a source transformer for automatic processing:
+
+```ts
+import { TypescriptToJavascriptTransformer } from '@mui/internal-docs-infra/pipeline/transformTypescriptToJavascript';
+
+// Transformer configuration
+// {
+//   extensions: ['ts', 'tsx'],
+//   transformer: transformTypescriptToJavascript
+// }
+```
+
+## Advanced Configuration
+
+The underlying `removeTypes` function supports Prettier configuration:
+
+```ts
+import { removeTypes } from '@mui/internal-docs-infra/pipeline/transformTypescriptToJavascript/removeTypes';
+
+// With default Prettier formatting
+const formatted = await removeTypes(code, 'file.ts', true);
+
+// With custom Prettier options
+const customFormatted = await removeTypes(code, 'file.ts', {
+  singleQuote: false,
+  tabWidth: 4,
+});
+
+// Skip Prettier formatting entirely
+const unformatted = await removeTypes(code, 'file.ts', false);
+```
+
+## How It Works
+
+1. **Preserve Formatting**: Replaces multiple newlines with markers to preserve blank lines
+2. **Remove Comments**: Identifies and removes comments associated with TypeScript-specific constructs
+3. **Babel Transform**: Uses Babel with TypeScript plugin to strip types and decorators
+4. **Restore Formatting**: Replaces newline markers back to preserve original spacing
+5. **Prettier Format**: Applies consistent code formatting (unless disabled)
+
+## Supported Features
+
+### TypeScript Constructs Removed
+
+- Type annotations (`: string`, `: number`, etc.)
+- Interface declarations
+- Type aliases
+- Import type statements
+- Declare statements
+- Decorators (with legacy support)
+
+### Preserved Features
+
+- All JavaScript functionality
+- React JSX (in `.tsx` files)
+- Comments (except those tied to removed TS constructs)
+- Original code structure and formatting
+
+## File Extension Mapping
+
+- `*.ts` files → `*.js` files
+- `*.tsx` files → `*.jsx` files
+
+## Example Transformations
+
+```ts
+// Input (TypeScript)
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+  return <button onClick={onClick}>{children}</button>;
+};
+
+// Output (JavaScript)
+const Button = ({ onClick, children }) => {
+  return <button onClick={onClick}>{children}</button>;
+};
+```
+
+## When to Use
+
+- When implementing automatic TypeScript → JavaScript code generation
+- When building documentation that shows both TS and JS versions
+- When creating demos that need to support both TypeScript and JavaScript users
+- As part of source transformers in [`CodeHighlighter`](../../components/code-highlighter/page.mdx)
+
+## Related
+
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Uses this transformer for variant generation
+- [Babel TypeScript Plugin](https://babeljs.io/docs/en/babel-plugin-transform-typescript) - Underlying transformation engine
+- [`SourceTransformers`](../source-transformers/page.mdx) - Framework for code transformations
+
+## Implementation Notes
+
+This implementation is based on [`ember-cli/babel-remove-types`](https://github.com/ember-cli/babel-remove-types) but converted to use Babel standalone with added TSX support for React components.
diff --git a/docs/app/docs-infra/functions/with-docs-infra/page.mdx b/docs/app/docs-infra/functions/with-docs-infra/page.mdx
new file mode 100644
index 000000000..86853cf34
--- /dev/null
+++ b/docs/app/docs-infra/functions/with-docs-infra/page.mdx
@@ -0,0 +1,230 @@
+# withDocsInfra
+
+The `withDocsInfra` function is a Next.js configuration plugin that sets up webpack loaders, Turbopack rules, and page extensions required for MUI docs infrastructure. It automatically configures code highlighting loaders for demo files and provides sensible defaults for documentation sites.
+
+## Features
+
+- Configures webpack and Turbopack loaders for demo files (`index.ts` and `client.ts`)
+- Sets up page extensions to support `.md`, `.mdx`, `.ts`, `.tsx`, `.js`, `.jsx` files
+- Enables export output mode by default for static site generation
+- Provides extensible patterns for custom demo file structures
+- Includes companion `getDocsInfraMdxOptions` for MDX plugin configuration
+
+## Basic Usage
+
+```js
+// next.config.mjs
+import { withDocsInfra } from '@mui/internal-docs-infra/withDocsInfra';
+
+const nextConfig = {
+  // Your existing Next.js config
+};
+
+export default withDocsInfra()(nextConfig);
+```
+
+## Advanced Configuration
+
+```js
+// next.config.mjs
+import { withDocsInfra, getDocsInfraMdxOptions } from '@mui/internal-docs-infra/withDocsInfra';
+import createMDX from '@next/mdx';
+
+const withMDX = createMDX(getDocsInfraMdxOptions());
+
+const nextConfig = withDocsInfra({
+  // Add support for additional file extensions
+  additionalPageExtensions: ['vue', 'svelte'],
+
+  // Disable export output if using server features
+  enableExportOutput: false,
+
+  // Add custom demo patterns beyond the defaults
+  additionalDemoPatterns: {
+    index: ['./app/**/demos/*/demo-*/index.ts'],
+    client: ['./app/**/demos/*/demo-*/client.ts'],
+  },
+
+  // Add custom Turbopack rules
+  additionalTurbopackRules: {
+    './custom/**/*.ts': {
+      loaders: ['custom-loader'],
+    },
+  },
+})({
+  // Your existing Next.js config
+});
+
+export default withMDX(nextConfig);
+```
+
+## Default Configurations
+
+### Page Extensions
+
+By default, `withDocsInfra` enables these page extensions:
+
+- `js`, `jsx` - JavaScript files
+- `md`, `mdx` - Markdown files
+- `ts`, `tsx` - TypeScript files
+
+### Demo File Patterns
+
+The plugin automatically configures loaders for these patterns:
+
+**Turbopack Rules:**
+
+```js
+{
+  './app/**/demos/*/index.ts': {
+    loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter']
+  },
+  './app/**/demos/*/client.ts': {
+    loaders: ['@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighterClient']
+  }
+}
+```
+
+**Webpack Rules:**
+
+```js
+{
+  test: /\/demos\/[^\/]+\/index\.ts$/,
+  use: [
+    defaultLoaders.babel,
+    '@mui/internal-docs-infra/pipeline/loadPrecomputedCodeHighlighter'
+  ]
+}
+```
+
+## MDX Integration
+
+Use `getDocsInfraMdxOptions` to configure MDX with docs-infra plugins:
+
+```js
+import { getDocsInfraMdxOptions } from '@mui/internal-docs-infra/withDocsInfra';
+import createMDX from '@next/mdx';
+
+// Default docs-infra MDX plugins
+const withMDX = createMDX(getDocsInfraMdxOptions());
+
+// With additional plugins
+const withMDX = createMDX(
+  getDocsInfraMdxOptions({
+    additionalRemarkPlugins: [['remark-emoji']],
+    additionalRehypePlugins: [['rehype-highlight']],
+  }),
+);
+
+// With custom plugin overrides
+const withMDX = createMDX(
+  getDocsInfraMdxOptions({
+    remarkPlugins: [['remark-gfm'], ['custom-plugin']],
+    rehypePlugins: [['custom-rehype-plugin']],
+  }),
+);
+```
+
+## Default MDX Plugins
+
+### Remark Plugins (Markdown processing)
+
+- `remark-gfm` - GitHub Flavored Markdown support
+- [`transformMarkdownRelativePaths`](../transform-markdown-relative-paths/page.mdx) - Convert relative paths for docs
+- [`transformMarkdownBlockquoteCallouts`](../transform-markdown-blockquote-callouts/page.mdx) - Convert blockquotes to callouts
+- [`transformMarkdownCode`](../transform-markdown-code/page.mdx) - Process code blocks
+
+### Rehype Plugins (HTML processing)
+
+- [`transformHtmlCode`](../transform-html-code/page.mdx) - Transform HTML code elements
+
+## Configuration Options
+
+### WithDocsInfraOptions
+
+| Option                     | Type       | Default                        | Description                                    |
+| -------------------------- | ---------- | ------------------------------ | ---------------------------------------------- |
+| `additionalPageExtensions` | `string[]` | `[]`                           | Additional file extensions to treat as pages   |
+| `enableExportOutput`       | `boolean`  | `true`                         | Enable Next.js export output mode              |
+| `demoPathPattern`          | `string`   | `'./app/**/demos/*/index.ts'`  | Pattern for demo index files                   |
+| `clientDemoPathPattern`    | `string`   | `'./app/**/demos/*/client.ts'` | Pattern for demo client files                  |
+| `additionalDemoPatterns`   | `object`   | `{}`                           | Additional demo patterns for custom structures |
+| `additionalTurbopackRules` | `object`   | `{}`                           | Custom Turbopack loader rules                  |
+
+### DocsInfraMdxOptions
+
+| Option                    | Type    | Description                                |
+| ------------------------- | ------- | ------------------------------------------ |
+| `remarkPlugins`           | `Array` | Override default remark plugins completely |
+| `rehypePlugins`           | `Array` | Override default rehype plugins completely |
+| `additionalRemarkPlugins` | `Array` | Add plugins to default remark plugins      |
+| `additionalRehypePlugins` | `Array` | Add plugins to default rehype plugins      |
+
+## Example: Custom Demo Structure
+
+If your demos follow a different pattern (e.g., `demo-variant/index.ts`):
+
+```js
+const nextConfig = withDocsInfra({
+  additionalDemoPatterns: {
+    index: ['./app/**/demos/*/demo-*/index.ts'],
+    client: ['./app/**/demos/*/demo-*/client.ts'],
+  },
+})({});
+```
+
+This will configure loaders for paths like:
+
+- `./app/components/demos/Button/demo-variant/index.ts`
+- `./app/components/demos/Button/demo-basic/client.ts`
+
+## How It Works
+
+1. **Page Extensions**: Configures Next.js to recognize additional file types as pages
+2. **Export Output**: Enables static export mode for documentation sites
+3. **Turbopack Rules**: Sets up fast refresh and bundling for demo files in development
+4. **Webpack Rules**: Configures production bundling with appropriate loaders
+5. **Pattern Conversion**: Converts glob patterns to webpack regex for file matching
+
+## Integration Example
+
+Complete Next.js configuration for a docs site:
+
+```js
+// next.config.mjs
+import { withDocsInfra, getDocsInfraMdxOptions } from '@mui/internal-docs-infra/withDocsInfra';
+import createMDX from '@next/mdx';
+
+const withMDX = createMDX(
+  getDocsInfraMdxOptions({
+    additionalRemarkPlugins: [['remark-emoji']],
+  }),
+);
+
+const nextConfig = withDocsInfra({
+  additionalDemoPatterns: {
+    index: ['./app/**/demos/*/demo-*/index.ts'],
+    client: ['./app/**/demos/*/demo-*/client.ts'],
+  },
+})({
+  // Your app-specific config
+  experimental: {
+    appDir: true,
+  },
+});
+
+export default withMDX(nextConfig);
+```
+
+## When to Use
+
+- **Required** for any Next.js app using MUI docs-infra components
+- When building documentation sites with live demos
+- When you need automatic code highlighting for demo files
+- When using MDX with docs-infra markdown transformations
+
+## Related
+
+- [`loadPrecomputedCodeHighlighter`](../load-precomputed-code-highlighter/page.mdx) - Loader for demo index files
+- [`loadPrecomputedCodeHighlighterClient`](../load-precomputed-code-highlighter-client/page.mdx) - Loader for demo client files
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Component that renders highlighted demos
diff --git a/docs/app/docs-infra/hooks/page.mdx b/docs/app/docs-infra/hooks/page.mdx
new file mode 100644
index 000000000..3c528d8ea
--- /dev/null
+++ b/docs/app/docs-infra/hooks/page.mdx
@@ -0,0 +1,12 @@
+# Handler Hooks
+
+- [`useCode`](./use-code/page.mdx): A hook for rendering code blocks using the props given from [`CodeHighlighter`](../components/code-highlighter/page.mdx) component.
+- [`useDemo`](./use-demo/page.mdx): A hook for rendering demos using the props given from [`CodeHighlighter`](../components/code-highlighter/page.mdx) component.
+- [`useErrors`](./use-errors/page.mdx): A hook for managing and displaying error states in documentation components.
+
+# Helper Hooks
+
+- [`useCopier`](./use-copier/page.mdx): A hook for copying text to the clipboard.
+- [`useUrlHashState`](./use-url-hash-state/page.mdx): A hook for synchronizing component state with URL hash fragments for deep linking.
+- [`useLocalStorageState`](./use-local-storage-state/page.mdx): A hook for persisting state in localStorage with SSR support.
+- [`usePreference`](./use-preference/page.mdx): A hook for managing user preferences with localStorage persistence and SSR support.
diff --git a/docs/app/docs-infra/hooks/use-code/page.mdx b/docs/app/docs-infra/hooks/use-code/page.mdx
new file mode 100644
index 000000000..c913197e9
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-code/page.mdx
@@ -0,0 +1,771 @@
+# useCode Hook
+
+The `useCode` hook provides programmatic access to code display, editing, and transformation functionality within `CodeHighlighter` components. It's designed for scenarios where you need fine-grained control over code behavior or want to build custom code interfaces that focus purely on code management, without component rendering.
+
+The hook implements the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) to work seamlessly across server and client boundaries, automatically merging initial props with enhanced context values.
+
+## Overview
+
+The `useCode` hook orchestrates multiple specialized sub-hooks to provide a complete code management solution. It automatically integrates with `CodeHighlighterContext` when available, making it perfect for custom code interfaces that need to interact with the broader code highlighting system.
+
+Key features include:
+
+- **URL-aware file navigation** with automatic hash management
+- **Automatic name and slug generation** from URLs when not provided
+- **Multi-file code management** with seamless file switching
+- **Transform support** for code modifications (e.g., JS ↔ TS conversion)
+- **Clipboard integration** with copy functionality
+- **Source editing capabilities** for interactive code editing
+
+## Architecture
+
+The hook is built using a modular architecture with six specialized sub-hooks:
+
+- **useVariantSelection**: Manages code variant selection and related data
+- **useTransformManagement**: Handles code transforms and their application
+- **useFileNavigation**: Manages file selection within code variants
+- **useUIState**: Controls UI state like expansion
+- **useCopyFunctionality**: Handles clipboard operations
+- **useSourceEditing**: Manages source code editing capabilities
+
+## Basic Usage
+
+```tsx
+import { useCode } from '@mui/internal-docs-infra';
+import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+
+function CodeContent(props: ContentProps<{}>) {
+  const code = useCode(props, {
+    defaultOpen: true,
+    initialVariant: 'TypeScript',
+  });
+
+  return (
+    <div>
+      <h3>{code.userProps.name}</h3>
+      <div>
+        Current: {code.selectedVariant}
+        <select value={code.selectedVariant} onChange={(e) => code.selectVariant(e.target.value)}>
+          {code.variants.map((variant) => (
+            <option key={variant} value={variant}>
+              {variant}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* File navigation with URL hash support */}
+      {code.files.length > 1 && (
+        <div>
+          {code.files.map((file) => (
+            <button
+              key={file.name}
+              onClick={() => code.selectFileName(file.name)}
+              className={code.selectedFileName === file.name ? 'active' : ''}
+            >
+              {file.name}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {code.selectedFile}
+
+      <button onClick={code.copy}>Copy Code</button>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Parameters
+
+#### `contentProps: ContentProps<T>`
+
+The content properties from your `CodeHighlighter` component - typically passed directly from props.
+
+#### `opts?: UseCodeOpts`
+
+Optional configuration object for customizing hook behavior.
+
+```tsx
+interface UseCodeOpts {
+  defaultOpen?: boolean; // Whether to start expanded
+  copy?: any; // Copy functionality options
+  githubUrlPrefix?: string; // GitHub URL prefix for links
+  codeSandboxUrlPrefix?: string; // CodeSandbox URL prefix
+  stackBlitzPrefix?: string; // StackBlitz URL prefix
+  initialVariant?: string; // Initially selected variant
+  initialTransform?: string; // Initially selected transform
+  fileHashMode?: 'remove-hash' | 'remove-filename'; // Controls hash removal on user interaction
+  saveHashVariantToLocalStorage?: 'on-load' | 'on-interaction' | 'never'; // When to persist hash variant
+}
+```
+
+### Return Value
+
+The hook returns a `code` object with the following properties:
+
+#### Variant Management
+
+- **`variants: string[]`** - Array of available variant keys
+- **`selectedVariant: string`** - Currently selected variant key
+- **`selectVariant: React.Dispatch<React.SetStateAction<string>>`** - Function to change variant
+
+#### File Navigation
+
+- **`files: Array<{ name: string; slug?: string; component: React.ReactNode }>`** - Available files in current variant with optional URL slugs
+- **`selectedFile: React.ReactNode`** - Currently selected file component
+- **`selectedFileName: string | undefined`** - Name of currently selected file
+- **`selectFileName: (fileName: string) => void`** - Function to select a file (automatically updates URL hash)
+  - **Progressive Enhancement**: Attach to `<a>` tags with `href={"#" + file.slug}` for no-JS support
+  - The function will call `e.preventDefault()` after hydration
+  - Use CSS `:target` and `:has()` selectors to show/hide tabs before JS loads
+
+#### UI State
+
+- **`expanded: boolean`** - Whether the code view is expanded
+- **`expand: () => void`** - Function to expand the code view
+- **`setExpanded: React.Dispatch<React.SetStateAction<boolean>>`** - Function to set expansion state
+
+#### Copy Functionality
+
+- **`copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>`** - Function to copy code to clipboard
+
+#### Transform Management
+
+- **`availableTransforms: string[]`** - Array of available transform keys
+- **`selectedTransform: string | null | undefined`** - Currently selected transform
+- **`selectTransform: (transformName: string | null) => void`** - Function to select a transform
+
+#### Source Editing
+
+- **`setSource?: (source: string) => void`** - Function to update source code (when available)
+
+#### User Properties
+
+- **`userProps: UserProps<T>`** - Generated user properties including name, slug, and custom props
+
+## Advanced Usage
+
+### URL Management and File Navigation
+
+The `useCode` hook automatically manages URL hashes to reflect the currently selected file. This provides deep-linking capabilities and preserves navigation state across page reloads.
+
+```tsx
+function CodeViewer(props) {
+  const code = useCode(props, {
+    initialVariant: 'TypeScript',
+  });
+
+  // File selection automatically updates URL hash without polluting browser history
+  // URLs follow pattern: #mainSlug:fileName or #mainSlug:variant:fileName
+
+  return (
+    <div>
+      {code.files.map((file) => (
+        <button
+          key={file.name}
+          onClick={() => code.selectFileName(file.name)}
+          className={code.selectedFileName === file.name ? 'active' : ''}
+        >
+          {file.name}
+        </button>
+      ))}
+
+      {/* File slug can be used for sharing or bookmarking */}
+      <span>
+        Current file URL: #{code.files.find((f) => f.name === code.selectedFileName)?.slug}
+      </span>
+
+      {code.selectedFile}
+    </div>
+  );
+}
+```
+
+### Controlling URL Hash Behavior
+
+The hook provides fine-grained control over URL hash management through two complementary options:
+
+#### fileHashMode
+
+Controls what happens to the URL hash when users interact with file tabs or switch variants.
+
+**Options:**
+
+- **`'remove-hash'` (default)**: Complete hash removal on interaction
+  - Reads URL hash on mount to select the initial file/variant
+  - Completely removes the hash when user clicks a file tab
+  - Removes the hash when user manually switches variants (e.g., via dropdown)
+  - **Use case**: Demos that support deep linking but clean up URLs after user engagement
+
+- **`'remove-filename'`**: Keep variant in hash on interaction
+  - Reads URL hash on mount to select the initial file/variant
+  - Simplifies hash to just variant when user clicks a file tab (e.g., `#demo:variant:file.tsx` → `#demo:variant`)
+  - For "Default" variant, simplifies to just the demo slug (e.g., `#demo:file.tsx` → `#demo`)
+  - Preserves variant selection in URL even after user interaction
+  - **Use case**: Demos where variant selection should remain visible in URL
+
+#### saveHashVariantToLocalStorage
+
+Controls when a hash-specified variant gets saved to localStorage for future visits.
+
+**Options:**
+
+- **`'on-load'`**: Save immediately when page loads with hash
+  - Hash variant is saved to localStorage as soon as the page loads
+  - Future visits will default to this variant even without the hash
+  - **Use case**: Persistent variant preference - once a user visits a specific variant, they keep seeing it
+
+- **`'on-interaction'` (default)**: Save only when user interacts
+  - Hash variant is NOT saved to localStorage on initial load
+  - Only saved when user explicitly clicks a file tab
+  - Allows hash navigation without affecting stored preferences
+  - **Use case**: Shareable links shouldn't override user's personal variant preference
+
+- **`'never'`**: Never save hash variant to localStorage
+  - Hash-specified variants are never persisted
+  - Each visit starts fresh with initialVariant or first variant
+  - **Use case**: Stateless demos where variant selection shouldn't be remembered
+
+#### Examples
+
+**Default behavior - Remove hash on interaction:**
+
+```tsx
+function StandardCodeViewer(props) {
+  const code = useCode(props, {
+    fileHashMode: 'remove-hash', // Can be omitted as it's the default
+    saveHashVariantToLocalStorage: 'on-interaction', // Can be omitted as it's the default
+  });
+
+  // User visits #demo:variant:file.tsx - that file is selected
+  // User clicks another file tab - hash is removed completely
+  // Variant is saved to localStorage (will be default for future visits)
+}
+```
+
+**Keep variant in URL after interaction:**
+
+```tsx
+function VariantAwareCodeViewer(props) {
+  const code = useCode(props, {
+    fileHashMode: 'remove-filename',
+  });
+
+  // User visits #demo:typescript:file.tsx - that file in TypeScript variant is selected
+  // User clicks another file tab - hash becomes #demo:typescript
+  // Variant remains visible in URL for easy sharing
+  // Variant is saved to localStorage (will be default for future visits)
+}
+```
+
+**Hash navigation without affecting preferences:**
+
+```tsx
+function ShareableCodeViewer(props) {
+  const code = useCode(props, {
+    fileHashMode: 'remove-hash',
+    saveHashVariantToLocalStorage: 'never',
+  });
+
+  // User visits #demo:variant:file.tsx - that file is selected
+  // User clicks another file tab - hash is removed
+  // Variant is NOT saved - next visit uses their preferred variant from localStorage
+  // Perfect for shareable links that don't override personal preferences
+}
+```
+
+**Persistent variant preference from first visit:**
+
+```tsx
+function StickyVariantCodeViewer(props) {
+  const code = useCode(props, {
+    fileHashMode: 'remove-filename',
+    saveHashVariantToLocalStorage: 'on-load',
+  });
+
+  // User visits #demo:tailwind:file.tsx - Tailwind variant is immediately saved
+  // Future visits default to Tailwind variant even without hash
+  // Hash is simplified to #demo:tailwind when user clicks tabs
+  // Perfect for documentation where first variant choice should stick
+}
+```
+
+### Automatic Name and Slug Generation
+
+When `name` or `slug` properties are not provided, the hook automatically generates them from the `url` property (or context URL). This is particularly useful when working with file-based demos or dynamic content.
+
+```tsx
+// Component with explicit name and slug
+<CodeHighlighter
+  name="Custom Button"
+  slug="custom-button"
+  Content={MyCodeContent}
+>
+  {/* code */}
+</CodeHighlighter>
+
+// Component with automatic generation from URL
+<CodeHighlighter
+  url="file:///app/components/demos/advanced-table/index.ts"
+  Content={MyCodeContent}
+>
+  {/*
+    Automatically generates:
+    - name: "Advanced Table"
+    - slug: "advanced-table"
+  */}
+</CodeHighlighter>
+
+function MyCodeContent(props) {
+  const code = useCode(props);
+
+  // Access generated user properties
+  console.log(code.userProps.name); // "Advanced Table"
+  console.log(code.userProps.slug); // "advanced-table"
+
+  return <div>{/* render code */}</div>;
+}
+```
+
+### Accessing Transform Functionality
+
+```tsx
+function TransformSelector(props) {
+  const code = useCode(props, {
+    initialTransform: 'typescript',
+  });
+
+  return (
+    <div>
+      {code.availableTransforms.length > 0 && (
+        <select
+          value={code.selectedTransform || ''}
+          onChange={(e) => code.selectTransform(e.target.value || null)}
+        >
+          <option value="">No Transform</option>
+          {code.availableTransforms.map((transform) => (
+            <option key={transform} value={transform}>
+              {transform}
+            </option>
+          ))}
+        </select>
+      )}
+      {code.selectedFile}
+    </div>
+  );
+}
+```
+
+### Context Integration
+
+The hook automatically integrates with `CodeHighlighterContext` when used as a Content component:
+
+```tsx
+// Simple wrapper component using CodeHighlighter directly
+export function Code({ children, fileName }: { children: string; fileName?: string }) {
+  return (
+    <CodeHighlighter
+      fileName={fileName}
+      Content={CodeContent} // Your custom content component using useCode
+      sourceParser={createParseSource()}
+    >
+      {children}
+    </CodeHighlighter>
+  );
+}
+
+// Your custom content component using useCode
+function CodeContent(props: ContentProps<{}>) {
+  // Automatically receives code from CodeHighlighter context
+  const code = useCode(props);
+
+  return (
+    <div>
+      {code.selectedFile}
+      <button onClick={code.copy}>Copy</button>
+    </div>
+  );
+}
+
+// Usage - simple and direct
+<Code fileName="example.ts">
+  {`function hello() {
+  console.log('Hello, world!');
+}`}
+</Code>;
+```
+
+## File Navigation
+
+When your code has multiple files, you should provide navigation between them. The recommended approach is to use conditional display - only show tabs when multiple files exist, otherwise show just the filename:
+
+> [!NOTE]
+> If you're creating demos that combine component previews with multi-file code examples, consider using [`useDemo`](../use-demo/page.mdx) instead, which handles both component rendering and file navigation.
+
+> [!TIP]
+> **Progressive Enhancement**: Use `<a>` tags with `href` attributes for file tabs to enable navigation before JavaScript loads. The `selectFileName` function will prevent default navigation after hydration, while CSS `:target` and `:has()` selectors can show/hide content based on the URL hash.
+>
+> If a user clicks a tab before JavaScript loads, the browser navigates to the hash URL. When the page hydrates, the hook reads this hash and updates the React state accordingly - **no clicks are lost** during the transition from CSS-only to JavaScript-controlled navigation.
+
+```tsx
+function CodeWithTabs(props) {
+  const code = useCode(props, { preClassName: styles.codeBlock });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        {code.files.length > 1 ? (
+          <div className={styles.tabContainer}>
+            {code.files.map((file) => (
+              <a
+                key={file.name}
+                href={`#${file.slug}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  code.selectFileName(file.name);
+                }}
+                className={`${styles.tab} ${
+                  code.selectedFileName === file.name ? styles.active : ''
+                }`}
+              >
+                {file.name}
+              </a>
+            ))}
+          </div>
+        ) : (
+          <span className={styles.fileName}>{code.selectedFileName}</span>
+        )}
+      </div>
+
+      <div className={styles.codeContent}>
+        {code.files.map((file) => (
+          <div
+            key={file.name}
+            id={file.slug}
+            className={`${styles.codeFile} ${
+              code.selectedFileName === file.name ? styles.selected : ''
+            }`}
+          >
+            {file.component}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+**CSS for Progressive Enhancement:**
+
+```css
+/* Hide all files by default */
+.codeFile {
+  display: none;
+}
+
+/* Show first file when no hash target exists */
+.codeContent:not(:has(.codeFile:target)) .codeFile:first-of-type {
+  display: block;
+}
+
+/* Show targeted file when hash exists */
+.codeFile:target {
+  display: block;
+}
+
+/* After JS loads, let React control visibility */
+.container:has(.tab.active) .codeFile {
+  display: none; /* Disable CSS-based visibility when JS is active */
+}
+
+.container:has(.tab.active) .codeFile.selected {
+  display: block; /* React-controlled selection */
+}
+```
+
+This pattern ensures a clean user experience by avoiding unnecessary tab UI when only one file exists.
+
+## URL Hash Patterns
+
+The hook generates URL hashes for file navigation following these patterns:
+
+### Default Variant
+
+When the variant name is "Default", it's omitted from the hash:
+
+```
+#mainSlug:fileName
+# Examples:
+#button-demo:button.tsx
+#data-table:index.ts
+#advanced-form:styles.css
+```
+
+### Non-Default Variants
+
+All other variants include the variant name in the hash:
+
+```
+#mainSlug:variantName:fileName
+# Examples:
+#button-demo:tailwind:button.tsx
+#data-table:typescript:index.ts
+#advanced-form:styled-components:styles.css
+```
+
+### Variant-Only Hashes
+
+Variants (except "Default") can also be referenced without a filename:
+
+```
+#mainSlug:variantName
+# Examples:
+#button-demo:tailwind
+#data-table:typescript
+#advanced-form:styled-components
+```
+
+These variant-only hashes select the main file of that variant.
+
+### File Naming Conventions
+
+- File names are converted to kebab-case while preserving extensions
+- Complex names like `ButtonWithTooltip.tsx` become `button-with-tooltip.tsx`
+- Special characters are replaced with dashes
+- Multiple consecutive dashes are collapsed to single dashes
+
+### URL Management Behavior
+
+**Initial Load:**
+
+- Hash is read to determine initial file and variant selection
+- Priority: URL hash > localStorage > `initialVariant` > first variant
+
+**User Interactions:**
+
+- **File Tab Clicks**: Hash behavior controlled by `fileHashMode` option
+  - `'remove-hash'`: Removes entire hash
+  - `'remove-filename'`: Keeps variant in hash (e.g., `#demo:variant`)
+- **Variant Changes** (e.g., dropdown): Hash behavior controlled by `fileHashMode` option
+  - `'remove-hash'`: Removes entire hash
+  - `'remove-filename'`: Updates hash to reflect new variant
+
+**localStorage Persistence:**
+
+- Controlled by `saveHashVariantToLocalStorage` option
+- `'on-load'`: Hash variant saved immediately when page loads
+- `'on-interaction'`: Hash variant saved only when user clicks a file tab
+- `'never'`: Hash variant never saved to localStorage
+
+**Auto-Expansion:**
+
+- Code demos automatically expand when a relevant hash is present
+- Ensures hash-linked content is visible to users
+
+## Sub-hooks Architecture
+
+The `useCode` hook is composed of several specialized sub-hooks that can be used independently:
+
+### useVariantSelection
+
+Manages variant selection logic and provides variant-related data. Implements a priority system for variant selection:
+
+1. **URL hash**: Takes precedence when present
+2. **localStorage**: Used when no hash is present
+3. **initialVariant**: Fallback when no stored preference
+4. **First variant**: Final fallback
+
+The hook parses variants from URL hashes and optionally persists them to localStorage based on the `saveHashVariantToLocalStorage` configuration.
+
+### useTransformManagement
+
+Handles code transforms, including delta validation and transform application.
+
+### useFileNavigation
+
+Manages file selection and navigation within code variants. Features:
+
+- URL hash management for deep-linking
+- Automatic slug generation for each file
+- Hash removal behavior controlled by `fileHashMode`
+- Cross-variant file navigation
+- Detection of user-initiated vs. hash-driven variant changes
+
+The hook generates slugs for all files across all variants, with special handling for the "Default" variant (which omits the variant name from the hash).
+
+### useUIState
+
+Controls UI-related state like expansion management. Automatically expands code demos when a relevant URL hash is present, ensuring hash-linked content is immediately visible to users.
+
+### useCopyFunctionality
+
+Handles clipboard operations and copy state management.
+
+### useSourceEditing
+
+Manages source code editing capabilities when available.
+
+## Best Practices
+
+### 1. Leverage Automatic URL Generation
+
+```tsx
+// Recommended: Let the hook generate name/slug from URL
+<CodeHighlighter
+  url="file:///components/demos/advanced-search/index.ts"
+  Content={CodeContent}
+>
+  {/* Automatically gets name: "Advanced Search", slug: "advanced-search" */}
+</CodeHighlighter>
+
+// Override only when needed
+<CodeHighlighter
+  url="file:///components/demos/search/index.ts"
+  name="Custom Search Component" // Override auto-generated name
+  Content={CodeContent}
+>
+  {/* Uses custom name, but auto-generated slug: "search" */}
+</CodeHighlighter>
+```
+
+### 2. Handle Deep-Linking and URL States
+
+```tsx
+function CodeViewer(props) {
+  const code = useCode(props, {
+    initialVariant: 'TypeScript', // Fallback if no URL hash
+  });
+
+  // URL hash automatically handled - no manual intervention needed
+  // Users can bookmark specific files and return to them
+
+  return (
+    <div>
+      {code.files.map((file) => (
+        <button
+          key={file.name}
+          onClick={() => code.selectFileName(file.name)}
+          data-slug={file.slug} // Available for analytics or debugging
+        >
+          {file.name}
+        </button>
+      ))}
+      {code.selectedFile}
+    </div>
+  );
+}
+```
+
+### 3. Focus on Code Management
+
+```tsx
+// Recommended: Use for code-specific functionality
+function CodeSelector(props) {
+  const code = useCode(props);
+
+  return (
+    <div>
+      <VariantSelector
+        variants={code.variants}
+        selected={code.selectedVariant}
+        onSelect={code.selectVariant}
+      />
+      {code.selectedFile}
+    </div>
+  );
+}
+```
+
+### 4. Handle Loading States
+
+```tsx
+function SafeCodeInterface(props) {
+  const code = useCode(props);
+
+  if (!code.selectedFile) {
+    return <div>Loading code...</div>;
+  }
+
+  return <div>{code.selectedFile}</div>;
+}
+```
+
+### 5. Leverage Options for Initial State
+
+```tsx
+const code = useCode(props, {
+  defaultOpen: true, // Start expanded
+  initialVariant: 'TypeScript', // Pre-select variant
+  initialTransform: 'js', // Pre-apply transform
+});
+```
+
+## Performance Considerations
+
+- The hook uses extensive memoization to prevent unnecessary re-renders
+- Transform computations are cached and only recalculated when necessary
+- File navigation state is optimized for quick switching between files
+- Copy functionality includes debouncing to prevent excessive clipboard operations
+
+## Error Handling
+
+The hook includes built-in error handling for:
+
+- Invalid code structures
+- Missing transforms
+- File navigation errors
+- Copy operation failures
+
+Errors are logged to the console and the hook gracefully degrades functionality when errors occur.
+
+## Related
+
+- **[useDemo](../use-demo/page.mdx)**: For managing component rendering alongside code display - use this when you need both code and component functionality
+- **[CodeHighlighter](../../components/code-highlighter/page.mdx)**: The main component this hook is designed to work with
+
+## Troubleshooting
+
+### Transforms Not Available
+
+Transforms are only shown when they have meaningful changes. Empty transforms are automatically filtered out.
+
+### Context Not Working
+
+Ensure your component is used within a `CodeHighlighter` component that provides the necessary context.
+
+### URL Hash Not Working
+
+- Ensure your component is running in a browser environment (not SSR)
+- Check that file names in your code match the expected slug patterns
+- Verify that the URL hash matches the generated file slugs exactly
+- Use browser dev tools to inspect `code.files[].slug` values for debugging
+
+### Name/Slug Not Generated
+
+- Ensure a valid `url` property is provided to `CodeHighlighter` or available in context
+- Check that the URL follows a recognizable pattern (file paths or simple strings)
+- If URL parsing fails, provide explicit `name` and `slug` properties as fallbacks
+
+### File Navigation Issues
+
+- Ensure file names are unique within each variant
+- Check that `extraFiles` and main files don't have conflicting names
+- Verify transforms don't create duplicate file names
+
+### Hash Behavior Not Working as Expected
+
+- **Hash not being removed on interaction**: Verify `fileHashMode` is set to `'remove-hash'` (default) or `'remove-filename'`
+- **Hash removed when you want to keep variant**: Use `fileHashMode: 'remove-filename'` to preserve variant in hash
+- **Initial file not selected**: Check that the hash format matches the generated slugs:
+  - Default variant: `mainSlug:fileName`
+  - Other variants: `mainSlug:variant:fileName` or `mainSlug:variant`
+- **Variant not persisting**: Check `saveHashVariantToLocalStorage` setting:
+  - `'on-load'`: Saves immediately when page loads with hash
+  - `'on-interaction'`: Saves only when user clicks a tab (default)
+  - `'never'`: Never saves hash variants
+- **Hash variant overriding localStorage**: This is expected - hash has highest priority. Use `saveHashVariantToLocalStorage: 'never'` to prevent hash variants from being saved
+- **Code not expanding with hash**: Ensure `useUIState` is receiving the `mainSlug` parameter for auto-expansion
diff --git a/docs/app/docs-infra/hooks/use-copier/page.mdx b/docs/app/docs-infra/hooks/use-copier/page.mdx
new file mode 100644
index 000000000..cb23b7629
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-copier/page.mdx
@@ -0,0 +1,219 @@
+# useCopier
+
+The `useCopier` hook provides robust clipboard copy functionality with success state management, error handling, and customizable callbacks. It's designed for code blocks, buttons, and interactive elements that need copy-to-clipboard functionality.
+
+## Features
+
+- **Flexible content source** - Accepts static strings or dynamic functions
+- **Success state tracking** - Provides `recentlySuccessful` state for UI feedback
+- **Configurable timeout** - Customizable reset timer for success state
+- **Error handling** - Built-in error handling with optional callback
+- **Event integration** - Supports additional onClick handlers
+- **Memory safe** - Automatic cleanup of timeouts
+
+## API
+
+```typescript
+const { copy, recentlySuccessful } = useCopier(contents, options);
+```
+
+### Parameters
+
+| Parameter  | Type                                    | Description                                    |
+| ---------- | --------------------------------------- | ---------------------------------------------- |
+| `contents` | `string \| (() => string \| undefined)` | Static text or function returning text to copy |
+| `options`  | `UseCopierOpts`                         | Optional configuration object                  |
+
+### Options
+
+| Option     | Type                                                   | Default | Description                          |
+| ---------- | ------------------------------------------------------ | ------- | ------------------------------------ |
+| `onCopied` | `() => void`                                           | -       | Callback fired after successful copy |
+| `onError`  | `(error: unknown) => void`                             | -       | Callback fired when copy fails       |
+| `onClick`  | `(event: React.MouseEvent<HTMLButtonElement>) => void` | -       | Additional click handler             |
+| `timeout`  | `number`                                               | `2000`  | Duration (ms) to show success state  |
+
+### Returns
+
+| Property             | Type                                                   | Description                          |
+| -------------------- | ------------------------------------------------------ | ------------------------------------ |
+| `copy`               | `(event: React.MouseEvent<HTMLButtonElement>) => void` | Function to trigger copy operation   |
+| `recentlySuccessful` | `boolean`                                              | Whether copy was recently successful |
+
+## Usage Examples
+
+### Basic Copy Button
+
+```tsx
+import { useCopier } from '@mui/internal-docs-infra/useCopier';
+
+function CopyButton({ text }: { text: string }) {
+  const { copy, recentlySuccessful } = useCopier(text);
+
+  return <button onClick={copy}>{recentlySuccessful ? 'Copied!' : 'Copy'}</button>;
+}
+```
+
+### Dynamic Content
+
+```tsx
+import { useCopier } from '@mui/internal-docs-infra/useCopier';
+
+function CodeBlockCopy({ getCode }: { getCode: () => string }) {
+  const { copy, recentlySuccessful } = useCopier(getCode);
+
+  return (
+    <button onClick={copy} disabled={recentlySuccessful}>
+      {recentlySuccessful ? '✓ Copied' : 'Copy Code'}
+    </button>
+  );
+}
+```
+
+### With Error Handling
+
+```tsx
+import { useCopier } from '@mui/internal-docs-infra/useCopier';
+
+function CopyWithFeedback({ content }: { content: string }) {
+  const [error, setError] = React.useState<string | null>(null);
+
+  const { copy, recentlySuccessful } = useCopier(content, {
+    onCopied: () => setError(null),
+    onError: (err) => setError('Failed to copy to clipboard'),
+    timeout: 3000,
+  });
+
+  return (
+    <div>
+      <button onClick={copy}>{recentlySuccessful ? 'Copied!' : 'Copy'}</button>
+      {error && <span style={{ color: 'red' }}>{error}</span>}
+    </div>
+  );
+}
+```
+
+### With Custom Analytics
+
+```tsx
+import { useCopier } from '@mui/internal-docs-infra/useCopier';
+
+function AnalyticsCopyButton({ text, label }: { text: string; label: string }) {
+  const { copy, recentlySuccessful } = useCopier(text, {
+    onCopied: () => {
+      // Track successful copy events
+      analytics.track('Code Copied', { label });
+    },
+    onError: (error) => {
+      // Track copy failures
+      analytics.track('Copy Failed', { label, error: String(error) });
+    },
+    onClick: (event) => {
+      // Track all copy attempts
+      analytics.track('Copy Attempted', { label });
+    },
+  });
+
+  return (
+    <button onClick={copy} className={recentlySuccessful ? 'success' : ''}>
+      {recentlySuccessful ? 'Copied!' : `Copy ${label}`}
+    </button>
+  );
+}
+```
+
+### Integration with Code Highlighter
+
+```tsx
+import { useCopier } from '@mui/internal-docs-infra/useCopier';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+function CodeBlockWithCopy({ code, language }: { code: string; language: string }) {
+  const { copy, recentlySuccessful } = useCopier(() => {
+    // Get the current code, potentially from a transformed state
+    return getCurrentCode();
+  });
+
+  return (
+    <div className="code-block">
+      <div className="code-header">
+        <span>{language}</span>
+        <button onClick={copy} className="copy-button">
+          {recentlySuccessful ? <>✓ Copied</> : <>📋 Copy</>}
+        </button>
+      </div>
+      <CodeHighlighter code={code} language={language} />
+    </div>
+  );
+}
+```
+
+## How It Works
+
+1. **Content Resolution**: When `copy` is called, resolves content from string or function
+2. **Clipboard API**: Uses the `clipboard-copy` library for cross-browser compatibility
+3. **Success State**: Sets `recentlySuccessful` to `true` after successful copy
+4. **Timeout Management**: Automatically resets success state after configured timeout
+5. **Cleanup**: Clears timeouts to prevent memory leaks
+
+## State Management
+
+The hook manages internal state for copy feedback:
+
+- **Initial state**: `recentlySuccessful` is `false`
+- **On copy attempt**: State resets to `false` and clears any existing timeout
+- **On success**: State becomes `true` and starts timeout countdown
+- **After timeout**: State resets to `false`
+- **On error**: State remains `false` but error callback is fired
+
+## Error Handling
+
+Copy operations can fail for various reasons:
+
+- **Security restrictions**: Some browsers require user interaction
+- **Permission denied**: Clipboard access may be blocked
+- **Empty content**: No content to copy (function returns undefined)
+
+The hook provides the `onError` callback to handle these cases gracefully.
+
+## TypeScript Support
+
+The hook is fully typed with proper TypeScript definitions:
+
+```typescript
+export type UseCopierOpts = {
+  onCopied?: () => void;
+  onError?: (error: unknown) => void;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  timeout?: number;
+};
+
+export function useCopier(
+  contents: (() => string | undefined) | string,
+  opts?: UseCopierOpts,
+): {
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  recentlySuccessful: boolean;
+};
+```
+
+## When to Use
+
+- **Code blocks** - Copy source code, commands, or configurations
+- **Documentation** - Copy API endpoints, package names, or examples
+- **Interactive demos** - Copy generated output or current state
+- **Forms** - Copy generated URLs, tokens, or formatted data
+- **Any UI element** - That benefits from copy-to-clipboard functionality
+
+## Browser Support
+
+Uses the `clipboard-copy` library which provides:
+
+- Modern `navigator.clipboard.writeText()` API when available
+- Fallback to `document.execCommand('copy')` for older browsers
+- Works in both secure (HTTPS) and insecure contexts
+
+## Related
+
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Often used together for code copy functionality
+- [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) - Underlying clipboard library
diff --git a/docs/app/docs-infra/hooks/use-demo/page.mdx b/docs/app/docs-infra/hooks/use-demo/page.mdx
new file mode 100644
index 000000000..f76667e5c
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-demo/page.mdx
@@ -0,0 +1,634 @@
+# useDemo Hook
+
+The `useDemo` hook extends `useCode` functionality to provide a complete demo rendering solution that combines component previews with code display. It's specifically designed for creating interactive demonstrations where users can see both working React components and their source code.
+
+Like `useCode`, it implements the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) for seamless server-client compatibility.
+
+## Overview
+
+Built on top of the `useCode` hook, `useDemo` adds demo-specific functionality like name and slug management while inheriting all code management capabilities. This makes it the go-to choice for creating rich interactive demos within the `CodeHighlighter` ecosystem.
+
+**Inheritance**: Since `useDemo` extends `useCode`, it automatically includes all URL management and file navigation features, including URL hash routing for deep-linking to specific files.
+
+## Key Features
+
+- **Complete code management** via `useCode` integration with URL hash routing
+- **Component rendering** alongside code display
+- **Demo identification** with automatic name and slug generation from URLs
+- **Variant switching** for different implementation approaches
+- **Transform support** for language conversions (TypeScript to JavaScript)
+- **File navigation** with deep-linking support for multi-file demos
+
+## Basic Usage
+
+```tsx
+import { useDemo } from '@mui/internal-docs-infra';
+
+export function DemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  return (
+    <div className={styles.container} ref={demo.ref}>
+      {/* Component Preview Section */}
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      {/* Code Section */}
+      <div className={styles.codeSection}>
+        <div className={styles.code}>{demo.selectedFile}</div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Advanced Usage
+
+### Full Interactive Demo Interface
+
+```tsx
+export function DemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  const hasJsTransform = demo.availableTransforms.includes('js');
+  const isJsSelected = demo.selectedTransform === 'js';
+
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      demo.selectTransform(checked ? 'js' : null);
+    },
+    [demo],
+  );
+
+  const tabs = React.useMemo(
+    () => demo.files.map(({ name }) => ({ id: name, name })),
+    [demo.files],
+  );
+
+  const variants = React.useMemo(
+    () =>
+      demo.variants.map((variant) => ({
+        value: variant,
+        label: variantNames[variant] || variant,
+      })),
+    [demo.variants],
+  );
+
+  return (
+    <div className={styles.container}>
+      {/* Demo Preview */}
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      {/* Code Section */}
+      <div className={styles.codeSection}>
+        <div className={styles.header}>
+          <div className={styles.headerContainer}>
+            {/* File Tabs */}
+            <div className={styles.tabContainer}>
+              {demo.files.length > 1 ? (
+                <Tabs
+                  tabs={tabs}
+                  selectedTabId={demo.selectedFileName}
+                  onTabSelect={demo.selectFileName}
+                />
+              ) : (
+                <span className={styles.fileName}>{demo.selectedFileName}</span>
+              )}
+            </div>
+
+            {/* Actions */}
+            <div className={styles.headerActions}>
+              <CopyButton copy={demo.copy} copyDisabled={demo.copyDisabled} />
+
+              {/* Variant Selector */}
+              {demo.variants.length > 1 && (
+                <Select
+                  items={variants}
+                  value={demo.selectedVariant}
+                  onValueChange={demo.selectVariant}
+                />
+              )}
+
+              {/* Transform Toggle */}
+              {hasJsTransform && (
+                <div className={styles.switchContainer}>
+                  <LabeledSwitch
+                    checked={isJsSelected}
+                    onCheckedChange={toggleJs}
+                    labels={labels}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Code Display */}
+        <div className={styles.code}>{demo.selectedFile}</div>
+      </div>
+    </div>
+  );
+}
+```
+
+### Editable Demo (Live Editing)
+
+```tsx
+export function DemoLiveContent(props) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+  const demo = useDemo(props, { preClassName: styles.codeBlock, preRef });
+
+  const hasJsTransform = demo.availableTransforms.includes('js');
+  const isJsSelected = demo.selectedTransform === 'js';
+
+  const labels = { false: 'TS', true: 'JS' };
+  const toggleJs = React.useCallback(
+    (checked: boolean) => {
+      demo.selectTransform(checked ? 'js' : null);
+    },
+    [demo],
+  );
+
+  const tabs = React.useMemo(
+    () => demo.files.map(({ name }) => ({ id: name, name })),
+    [demo.files],
+  );
+
+  const variants = React.useMemo(
+    () =>
+      demo.variants.map((variant) => ({
+        value: variant,
+        label: variantNames[variant] || variant,
+      })),
+    [demo.variants],
+  );
+
+  // Set up editable functionality
+  const onChange = React.useCallback((text: string) => {
+    demo.setSource?.(text);
+  }, []);
+  useEditable(preRef, onChange, {
+    indentation: 2,
+    disabled: !demo.setSource,
+  });
+
+  return (
+    <div className={styles.container}>
+      {/* Live Demo Preview */}
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      {/* Editable Code Section */}
+      <div className={styles.codeSection}>
+        <div className={styles.header}>
+          <div className={styles.headerContainer}>
+            <div className={styles.tabContainer}>
+              {demo.files.length > 1 ? (
+                <Tabs
+                  tabs={tabs}
+                  selectedTabId={demo.selectedFileName}
+                  onTabSelect={demo.selectFileName}
+                />
+              ) : (
+                <span className={styles.fileName}>{demo.selectedFileName}</span>
+              )}
+            </div>
+            <div className={styles.headerActions}>
+              {demo.variants.length > 1 && (
+                <Select
+                  items={variants}
+                  value={demo.selectedVariant}
+                  onValueChange={demo.selectVariant}
+                />
+              )}
+              {hasJsTransform && (
+                <div className={styles.switchContainer}>
+                  <LabeledSwitch
+                    checked={isJsSelected}
+                    onCheckedChange={toggleJs}
+                    labels={labels}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Editable Code Block */}
+        <div className={styles.code}>{demo.selectedFile}</div>
+      </div>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Parameters
+
+#### `contentProps: ContentProps<T>`
+
+The content properties passed from your parent component - these should always be passed directly to `useDemo()` without accessing them directly:
+
+```tsx
+export function DemoContent(props: ContentProps<{}>) {
+  const demo = useDemo(props); // Pass props directly to useDemo
+
+  // Never access props.name, props.code, etc. directly
+  // Use demo.name, demo.selectedFile, etc. instead
+}
+```
+
+#### `opts?: UseDemoOpts`
+
+Optional configuration object:
+
+```tsx
+interface UseDemoOpts {
+  defaultOpen?: boolean; // Whether to start expanded
+  copy?: UseCopierOpts; // Copy functionality options
+  githubUrlPrefix?: string; // GitHub URL prefix for links
+  codeSandboxUrlPrefix?: string; // CodeSandbox URL prefix
+  stackBlitzPrefix?: string; // StackBlitz URL prefix
+  initialVariant?: string; // Initially selected variant
+  initialTransform?: string; // Initially selected transform
+  fileHashMode?: 'remove-hash' | 'remove-filename'; // Controls hash removal on user interaction
+  saveHashVariantToLocalStorage?: 'on-load' | 'on-interaction' | 'never'; // When to persist hash variant
+}
+```
+
+### Return Value
+
+The hook returns all `useCode` properties plus demo-specific additions:
+
+#### Demo Properties
+
+- **`component: React.ReactNode`** - The React component for the current variant (for live preview)
+- **`ref: React.RefObject<HTMLDivElement | null>`** - Ref for the demo container element
+- **`resetFocus: () => void`** - Function to reset focus to the demo container
+- **`name: string | undefined`** - Display name for the demo (auto-generated from URL if not provided)
+- **`slug: string | undefined`** - URL-friendly identifier (auto-generated from URL if not provided)
+
+#### Inherited from useCode
+
+All properties from `useCode` are available with exact types:
+
+- **`variants: string[]`**, **`selectedVariant: string`**, **`selectVariant: React.Dispatch<React.SetStateAction<string>>`**
+- **`files: Array<{ name: string; slug?: string; component: React.ReactNode }>`** - Files with URL hash slugs for deep-linking
+- **`selectedFile: React.ReactNode`**, **`selectedFileName: string | undefined`**, **`selectFileName: (fileName: string) => void`** - File selection with automatic URL hash updates
+- **`expanded: boolean`**, **`expand: () => void`**, **`setExpanded: React.Dispatch<React.SetStateAction<boolean>>`**
+- **`copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>`**
+- **`availableTransforms: string[]`**, **`selectedTransform: string | null | undefined`**, **`selectTransform: (transformName: string | null) => void`**
+- **`setSource?: (source: string) => void`** (when editing is available)
+- **`userProps: UserProps<T>`** - Generated user properties including name, slug, and custom props
+
+See [useCode documentation](../use-code/page.mdx) for detailed information about inherited functionality.
+
+## URL Management and Deep-Linking
+
+Since `useDemo` extends `useCode`, it automatically inherits all URL hash management capabilities. This enables powerful deep-linking features for demos with multiple files:
+
+### Automatic URL Hash Generation
+
+```tsx
+// Demo with URL-based name/slug generation
+const ButtonDemo = createDemo({
+  url: 'file:///components/demos/interactive-button/index.ts',
+  code: buttonCode,
+  components: { Default: ButtonComponent },
+  Content: DemoContent,
+});
+
+// Automatically generates:
+// - name: "Interactive Button"
+// - slug: "interactive-button"
+// - File URLs: #interactive-button:button.tsx, #interactive-button:styles.css
+```
+
+### Deep-Linking to Specific Files
+
+Users can bookmark and share links to specific files within your demos:
+
+```
+# Links to main file in default variant
+https://yoursite.com/demos/button#interactive-button:button.tsx
+
+# Links to specific file in TypeScript variant
+https://yoursite.com/demos/button#interactive-button:typescript:button.tsx
+
+# Links to styling file
+https://yoursite.com/demos/button#interactive-button:styles.css
+```
+
+### URL Management Behavior
+
+**Initial Load:**
+
+- Hash is read to determine initial file and variant selection
+- Priority: URL hash > localStorage > `initialVariant` > first variant
+- Demos automatically expand when a relevant hash is present
+
+**User Interactions:**
+
+- **File Tab Clicks**: Hash behavior controlled by `fileHashMode` option (default: `'remove-hash'`)
+  - `'remove-hash'`: Removes entire hash on click
+  - `'remove-filename'`: Keeps variant in hash, removes filename
+- **Variant Changes**: Hash behavior controlled by `fileHashMode` option
+  - `'remove-hash'`: Removes entire hash on variant switch
+  - `'remove-filename'`: Updates hash to reflect new variant
+
+**localStorage Persistence:**
+
+- Controlled by `saveHashVariantToLocalStorage` option (default: `'on-interaction'`)
+- `'on-load'`: Hash variant saved immediately when page loads
+- `'on-interaction'`: Hash variant saved only when user clicks a file tab
+- `'never'`: Hash variant never saved to localStorage
+
+**Component Integration:**
+
+- Works seamlessly with demo component rendering
+- File selection synchronized with URL hash
+- Variant switching coordinated with hash updates
+
+For detailed information about URL hash patterns and configuration, see the [useCode URL Management](../use-code/page.mdx#controlling-url-hash-behavior) section.
+
+## Integration Patterns
+
+### Standard Usage Pattern
+
+The most common pattern is to use `useDemo` in a content component that receives props from the demo factory:
+
+```tsx
+// In your demo's Content component
+export function DemoContent(props: ContentProps<{}>) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock }); // Always pass props directly
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      <div className={styles.codeSection}>{demo.selectedFile}</div>
+    </div>
+  );
+}
+```
+
+### Demo Factory Integration
+
+This content component is used with the demo factory pattern, not as a direct child of `CodeHighlighter`:
+
+```tsx
+// [✓] Correct - Demo factory usage
+const ButtonDemo = createDemo({
+  name: 'Button Demo',
+  code: buttonCode,
+  components: { Default: ButtonComponent },
+  Content: DemoContent,
+});
+
+// [x] Incorrect - Never use DemoContent as a direct child
+<CodeHighlighter>
+  <DemoContent /> {/* This won't work */}
+</CodeHighlighter>;
+```
+
+## Best Practices
+
+### 1. Always Pass Props Directly
+
+```tsx
+export function DemoContent(props: ContentProps<{}>) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock }); // [✓] Pass props directly
+
+  // [x] Never access props.name, props.code, etc.
+  // [✓] Use demo.name, demo.selectedFile, etc.
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+      <div className={styles.codeSection}>{demo.selectedFile}</div>
+    </div>
+  );
+}
+```
+
+### 2. Conditional UI Elements
+
+```tsx
+export function DemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  return (
+    <div className={styles.container}>
+      {demo.component}
+
+      {/* Only show file tabs if multiple files */}
+      {demo.files.length > 1 ? (
+        <Tabs
+          tabs={demo.files.map((f) => ({ id: f.name, name: f.name }))}
+          selectedTabId={demo.selectedFileName}
+          onTabSelect={demo.selectFileName}
+        />
+      ) : (
+        <span>{demo.selectedFileName}</span>
+      )}
+
+      {demo.selectedFile}
+    </div>
+  );
+}
+```
+
+### 3. Simple Transform Toggle
+
+```tsx
+export function DemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  const hasTransforms = demo.availableTransforms.length > 0;
+  const isJsSelected = demo.selectedTransform === 'js';
+
+  return (
+    <div className={styles.container}>
+      {demo.component}
+
+      {hasTransforms && (
+        <button onClick={() => demo.selectTransform(isJsSelected ? null : 'js')}>
+          {isJsSelected ? 'Show TS' : 'Show JS'}
+        </button>
+      )}
+
+      {demo.selectedFile}
+    </div>
+  );
+}
+```
+
+### 4. Leverage URL-Based Demo Properties
+
+```tsx
+// Recommended: Let useDemo generate name/slug from URL
+const ButtonDemo = createDemo({
+  url: 'file:///components/demos/advanced-button/index.ts',
+  code: buttonCode,
+  components: { Default: ButtonComponent },
+  Content: DemoContent,
+});
+
+function DemoContent(props) {
+  const demo = useDemo(props);
+
+  return (
+    <div>
+      <h2>{demo.name}</h2> {/* "Advanced Button" */}
+      <div data-demo-slug={demo.slug}>
+        {' '}
+        {/* "advanced-button" */}
+        {demo.component}
+      </div>
+      {/* File navigation with automatic URL hash management */}
+      {demo.files.map((file) => (
+        <button
+          key={file.name}
+          onClick={() => demo.selectFileName(file.name)}
+          data-file-slug={file.slug} // For analytics/debugging
+        >
+          {file.name}
+        </button>
+      ))}
+      {demo.selectedFile}
+    </div>
+  );
+}
+```
+
+## Common Patterns
+
+### Simple Demo Display
+
+The most basic pattern for showing a component with its code:
+
+```tsx
+export function DemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+      <div className={styles.codeSection}>{demo.selectedFile}</div>
+    </div>
+  );
+}
+```
+
+### Demo with File Navigation
+
+When you have multiple files to show (includes automatic URL hash management):
+
+```tsx
+export function MultiFileDemoContent(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      <div className={styles.codeSection}>
+        {demo.files.length > 1 && (
+          <div className={styles.fileNav}>
+            {/* File selection automatically updates URL hash for deep-linking */}
+            {demo.files.map((file) => (
+              <button
+                key={file.name}
+                onClick={() => demo.selectFileName(file.name)} // Updates URL hash
+                className={demo.selectedFileName === file.name ? styles.active : ''}
+                title={`View ${file.name} (URL: #${file.slug})`}
+              >
+                {file.name}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {demo.selectedFile}
+      </div>
+    </div>
+  );
+}
+```
+
+### Demo with Language Toggle
+
+For demos that support TypeScript/JavaScript switching:
+
+```tsx
+export function DemoWithLanguageToggle(props) {
+  const demo = useDemo(props, { preClassName: styles.codeBlock });
+
+  const canToggleJs = demo.availableTransforms.includes('js');
+  const showingJs = demo.selectedTransform === 'js';
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.demoSection}>{demo.component}</div>
+
+      <div className={styles.codeSection}>
+        {canToggleJs && (
+          <div className={styles.languageToggle}>
+            <button onClick={() => demo.selectTransform(showingJs ? null : 'js')}>
+              {showingJs ? 'TypeScript' : 'JavaScript'}
+            </button>
+          </div>
+        )}
+
+        {demo.selectedFile}
+      </div>
+    </div>
+  );
+}
+```
+
+## Performance Considerations
+
+- **Component memoization**: Components are automatically memoized by the demo factory
+- **Code lazy loading**: Inherited from `useCode` - syntax highlighting can be deferred
+- **Transform caching**: Transform results are cached for quick switching
+- **File switching**: File navigation is optimized for instant switching
+
+## Error Handling
+
+`useDemo` inherits error handling from `useCode` and adds demo-specific safeguards:
+
+- **Missing components**: Gracefully handles when components aren't available for a variant
+- **Invalid names/slugs**: Provides fallback values for missing identification
+- **Component render errors**: Use React Error Boundaries to catch component-specific issues
+
+## Troubleshooting
+
+### Component Not Rendering
+
+- Verify the component is passed in the `components` prop
+- Check that the variant name matches between `code` and `components`
+- Ensure the component doesn't have render-blocking errors
+
+### Code Not Showing
+
+- See [useCode troubleshooting](../use-code/page.mdx#troubleshooting) for code-related issues
+- Verify `contentProps` contains the expected code structure
+
+### Name/Slug Not Generated
+
+- Ensure a valid `url` property is provided in demo creation or available in context
+- Provide explicit `name` or `slug` properties as fallbacks if URL parsing fails
+- Check that the URL follows a recognizable pattern for automatic generation
+
+### URL Hash Issues
+
+- **Deep-linking not working**: See [useCode URL troubleshooting](../use-code/page.mdx#url-hash-not-working) for detailed debugging steps
+- **File navigation not updating URL**: Ensure component is running in browser environment (not SSR)
+- **Hash conflicts**: Check that demo slugs are unique across your application
+
+## Related
+
+- **[useCode](../use-code/page.mdx)**: The underlying hook for code management (see [useCode documentation](../use-code/page.mdx))
+- **[CodeHighlighter](../../components/code-highlighter/page.mdx)**: The main component that provides context for demos
+- **[abstractCreateDemo](../../functions/abstract-create-demo/page.mdx)**: Factory function for creating precomputed demos
diff --git a/docs/app/docs-infra/hooks/use-errors/page.mdx b/docs/app/docs-infra/hooks/use-errors/page.mdx
new file mode 100644
index 000000000..3266d9480
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-errors/page.mdx
@@ -0,0 +1,426 @@
+# useErrors
+
+The `useErrors` hook provides access to error state in an isomorphic error handling system. It implements the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) to work seamlessly across server and client boundaries, making it ideal for code highlighting and interactive demos that need robust error handling.
+
+## Features
+
+- **Props Context Layering** - Implements the isomorphic pattern for React Server Components
+- **Context integration** - Accesses errors from `CodeErrorsContext`
+- **Graceful fallbacks** - Handles cases where context is unavailable
+- **Runtime error updates** - Errors can be updated dynamically via context
+- **Simple API** - Automatically merges props and context
+
+## API
+
+```typescript
+const { errors } = useErrors(props?);
+```
+
+### Parameters
+
+| Parameter | Type                   | Description                                                    |
+| --------- | ---------------------- | -------------------------------------------------------------- |
+| `props`   | `{ errors?: Error[] }` | Optional props containing fallback errors (typically from SSR) |
+
+### Returns
+
+| Property | Type                   | Description                                                         |
+| -------- | ---------------------- | ------------------------------------------------------------------- |
+| `errors` | `Error[] \| undefined` | Array of current errors (context errors take precedence over props) |
+
+## Usage Examples
+
+### Basic Error Display
+
+```tsx
+import { useErrors } from '@mui/internal-docs-infra/useErrors';
+
+function DemoErrorHandler({ errors: propErrors }: { errors?: Error[] }) {
+  const { errors } = useErrors({ errors: propErrors });
+
+  if (!errors || errors.length === 0) {
+    return null; // No errors to display
+  }
+
+  return (
+    <div className="error-container">
+      <h4>Errors occurred:</h4>
+      {errors.map((error, index) => (
+        <div key={index} className="error-message">
+          {error.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Isomorphic Error Handler
+
+```tsx
+import { useErrors } from '@mui/internal-docs-infra/useErrors';
+
+interface ErrorHandlerProps {
+  errors?: Error[]; // Props-based errors for SSR
+}
+
+function CodeErrorHandler({ errors }: ErrorHandlerProps) {
+  const { errors: resolvedErrors } = useErrors({ errors });
+
+  if (!resolvedErrors || resolvedErrors.length === 0) {
+    return <div>An error occurred, but details were not provided.</div>;
+  }
+
+  return (
+    <div className="code-error-handler">
+      <span>Error occurred when highlighting code: </span>
+      {resolvedErrors.map((error, index) => (
+        <div key={index} className="error-detail">
+          {error.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+### Conditional Rendering Based on Errors
+
+```tsx
+import { useErrors } from '@mui/internal-docs-infra/useErrors';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+function SafeCodeDemo({
+  code,
+  language,
+  errors: propErrors,
+}: {
+  code: string;
+  language: string;
+  errors?: Error[];
+}) {
+  const { errors } = useErrors({ errors: propErrors });
+
+  return (
+    <div className="code-demo">
+      {errors && errors.length > 0 ? (
+        <div className="error-fallback">
+          <p>Failed to render code demo:</p>
+          <ul>
+            {errors.map((error, index) => (
+              <li key={index}>{error.message}</li>
+            ))}
+          </ul>
+          <details>
+            <summary>Raw Code</summary>
+            <pre>{code}</pre>
+          </details>
+        </div>
+      ) : (
+        <CodeHighlighter code={code} language={language} />
+      )}
+    </div>
+  );
+}
+```
+
+### Custom Error Formatting
+
+```tsx
+import { useErrors } from '@mui/internal-docs-infra/useErrors';
+
+function FormattedErrorDisplay({ errors: propErrors }: { errors?: Error[] }) {
+  const { errors } = useErrors({ errors: propErrors });
+
+  if (!errors || errors.length === 0) {
+    return null;
+  }
+
+  const formatError = (error: Error) => {
+    // Extract useful information from error
+    const { message, name, stack } = error;
+
+    return {
+      title: name || 'Error',
+      description: message || 'An unknown error occurred',
+      details: stack?.split('\n').slice(0, 3).join('\n'), // First 3 lines of stack
+    };
+  };
+
+  return (
+    <div className="error-display">
+      {errors.map((error, index) => {
+        const formatted = formatError(error);
+        return (
+          <div key={index} className="error-item">
+            <h5>{formatted.title}</h5>
+            <p>{formatted.description}</p>
+            {formatted.details && (
+              <details>
+                <summary>Stack trace</summary>
+                <pre>{formatted.details}</pre>
+              </details>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+```
+
+## How It Works
+
+### Props Context Layering Pattern
+
+This hook implements the [Props Context Layering pattern](../../patterns/props-context-layering/page.mdx) for React Server Components:
+
+1. **Components render before crossing client boundary**: Error handler components must render on the server before client-side props are available
+2. **Props used first, context layers on top**: Initial server-side errors come via props, client-side updates come via context
+3. **Custom hook merges props and context**: `useErrors({ errors })` automatically handles the precedence logic
+4. **Seamless server/client transition**: Users get consistent error handling regardless of where errors occur
+
+### Isomorphic Design
+
+The hook works across server-side and client-side environments:
+
+1. **Server-side rendering**: Errors are passed as props to components during SSR
+2. **Client-side updates**: Errors are provided via `CodeErrorsContext` when processing occurs
+3. **Automatic precedence**: Context errors override props errors, ensuring latest state is shown
+
+### The Problem This Solves
+
+In isomorphic applications with code highlighting and live demos, errors can occur at different layers:
+
+1. **Server-side errors**: Occur during initial server rendering (e.g., syntax parsing failures)
+2. **Client-side errors**: Occur during client-side post-processing (e.g., live demo execution, dynamic transformations)
+
+**Without `useErrors()`:** If error handlers only accept props, client-side errors appear as generic errors with no useful information.
+
+**With `useErrors()`:** Both server and client errors are handled uniformly, providing detailed error information regardless of where the error occurred.
+
+### Architectural Pattern
+
+This follows the Props Context Layering pattern for isomorphic components:
+
+```tsx
+// ❌ Props-only approach - breaks on client-side updates
+function BadErrorHandler({ errors }: { errors?: Error[] }) {
+  // Only sees server-side errors passed as props
+  // Client-side errors are lost or appear generic
+  return errors ? <ErrorDisplay errors={errors} /> : null;
+}
+
+// ✅ Props Context Layering - works server and client
+function GoodErrorHandler({ errors }: { errors?: Error[] }) {
+  const { errors: resolvedErrors } = useErrors({ errors });
+
+  // Hook implements: contextErrors || props.errors
+  // Server: uses props.errors (context undefined)
+  // Client: uses context.errors (takes precedence)
+  return resolvedErrors ? <ErrorDisplay errors={resolvedErrors} /> : null;
+}
+
+// 🎯 Server Component - no client code needed
+function ServerOnlyErrorHandler({ errors }: { errors?: Error[] }) {
+  // When no client-side processing is needed, can stay server component
+  return errors ? <ErrorDisplay errors={errors} /> : null;
+}
+```
+
+### Implementation Pattern
+
+```tsx
+'use client';
+
+import { useContext } from 'react';
+import { CodeErrorsContext } from './ErrorsContext';
+
+const useErrors = (props?: { errors?: Error[] }) => {
+  const contextErrors = useContext(CodeErrorsContext);
+  // Context takes precedence over props
+  return { errors: contextErrors?.errors || props?.errors };
+};
+
+const ErrorHandler = (props: { errors?: Error[] }) => {
+  const { errors } = useErrors(props);
+  return <ErrorDisplay errors={errors} />;
+};
+```
+
+### Multi-Layer Error Flow
+
+1. **Component renders on server**: May encounter parsing/highlighting errors → passed as props
+2. **Component hydrates on client**: Server errors available via props
+3. **Client-side processing occurs**: New errors → updated in context via `CodeErrorsContext.Provider`
+4. **`useErrors({ errors })` provides latest state**: Context errors override props automatically, ensuring users see the most relevant error
+
+This pattern ensures that users get detailed error information regardless of whether the error occurred during:
+
+- Initial server-side code parsing
+- Client-side syntax highlighting
+- Live demo compilation
+- Dynamic code transformation
+- Runtime execution
+
+The hook handles the precedence logic internally, so error handler components simply pass their props and get back the most relevant errors.
+
+### Why This Pattern Is Essential
+
+The Props Context Layering pattern solves critical React Server Component challenges:
+
+1. **Server Component Constraints**: Components must render before crossing client boundaries
+2. **Early Rendering**: Error handlers render before client-side processing provides updated errors
+3. **Async Component Isolation**: Heavy error processing can be client-side only when needed
+4. **Seamless Updates**: Context layers client updates over server-rendered props
+
+Without this pattern, you'd need separate components for:
+
+- Server-side rendering errors
+- Client-side hydration errors
+- Runtime processing errors
+- Live demo execution errors
+
+Instead, `useErrors({ errors })` provides a unified interface that automatically handles:
+
+- **Server rendering**: Uses props.errors when context is unavailable
+- **Client updates**: Context errors override props when processing occurs
+- **Error boundaries**: Consistent error display regardless of error source
+- **Bundle optimization**: Heavy error processing stays client-side only
+
+This ensures consistent error reporting and user experience while respecting React Server Component boundaries.
+
+### Context Integration
+
+The hook connects to the `CodeErrorsContext` which is provided by components like `CodeHighlighterClient`:
+
+```tsx
+import { CodeErrorsContext } from '@mui/internal-docs-infra/useErrors/ErrorsContext';
+
+function ErrorProvider({ children, errors }: { children: React.ReactNode; errors?: Error[] }) {
+  const errorsContextValue = React.useMemo(() => ({ errors }), [errors]);
+
+  return (
+    <CodeErrorsContext.Provider value={errorsContextValue}>{children}</CodeErrorsContext.Provider>
+  );
+}
+```
+
+### Error Flow
+
+1. **Initial render**: Errors may be undefined or passed as props
+2. **Error occurrence**: Context is updated with new errors
+3. **Hook response**: `useErrors()` returns the latest error state
+4. **Component update**: UI updates to reflect current error state
+
+## Integration with CodeHighlighter
+
+The hook is commonly used with code highlighting components:
+
+```tsx
+import { useErrors } from '@mui/internal-docs-infra/useErrors';
+import { CodeHighlighterClient } from '@mui/internal-docs-infra/CodeHighlighter';
+
+function CodeDemo() {
+  return (
+    <CodeHighlighterClient
+    /* ... props ... */
+    >
+      <CodeDemoContent />
+    </CodeHighlighterClient>
+  );
+}
+
+function CodeDemoContent() {
+  const { errors } = useErrors();
+
+  // Component has access to errors from CodeHighlighterClient context
+  return errors ? <ErrorDisplay /> : <LiveDemo />;
+}
+```
+
+## Error Context Type
+
+```typescript
+export interface CodeErrorsContext {
+  errors?: Error[];
+}
+
+export function useErrors(props?: { errors?: Error[] }): { errors?: Error[] } {
+  const context = useErrorsContext();
+
+  // Context errors take precedence over prop errors
+  const errors = context?.errors || props?.errors;
+
+  return { errors };
+}
+```
+
+## Best Practices
+
+### 1. Always Check for Errors
+
+```tsx
+const { errors } = useErrors({ errors: propErrors });
+
+// Always check if errors exist and have length
+if (!errors || errors.length === 0) {
+  return <SuccessComponent />;
+}
+
+return <ErrorComponent errors={errors} />;
+```
+
+### 2. Provide Meaningful Fallbacks
+
+```tsx
+const { errors } = useErrors({ errors: propErrors });
+
+if (errors && errors.length > 0) {
+  return (
+    <div>
+      <p>Something went wrong. Here's the raw content:</p>
+      <pre>{rawContent}</pre>
+    </div>
+  );
+}
+```
+
+### 3. Use in Error Boundaries
+
+```tsx
+class CodeErrorBoundary extends React.Component {
+  state = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <CodeErrorsContext.Provider value={{ errors: [this.state.error] }}>
+          <ErrorFallback />
+        </CodeErrorsContext.Provider>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+```
+
+## When to Use
+
+- **Code highlighting components** - Display errors when syntax highlighting fails
+- **Interactive demos** - Show errors from code execution
+- **Dynamic content rendering** - Handle errors in real-time content updates
+- **Isomorphic applications** - Need error handling that works server and client-side
+- **Error boundaries** - Provide context for error display components
+
+## Related
+
+- [**Props Context Layering**](../../patterns/props-context-layering/page.mdx) - The architectural pattern this hook implements
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Uses this hook for error display
+- [`CodeErrorHandler`](../../components/code-error-handler/page.mdx) - Built-in error handler component
+- [`CodeErrorsContext`](../../contexts/code-errors-context/page.mdx) - The underlying context
diff --git a/docs/app/docs-infra/hooks/use-local-storage-state/page.mdx b/docs/app/docs-infra/hooks/use-local-storage-state/page.mdx
new file mode 100644
index 000000000..5ebfd76f5
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-local-storage-state/page.mdx
@@ -0,0 +1,297 @@
+# useLocalStorageState
+
+The `useLocalStorageState` hook provides persistent state management using localStorage with cross-tab synchronization, server-side rendering support, and a useState-like API. It's designed for user preferences, demo state, and any data that should persist across browser sessions.
+
+## Features
+
+- **localStorage persistence** - Automatically saves and loads state from localStorage
+- **Cross-tab synchronization** - State updates sync across browser tabs and windows
+- **SSR-safe** - Works with server-side rendering and hydration
+- **useState-compatible API** - Drop-in replacement for useState with persistence
+- **Function updates** - Supports functional state updates like `setState(prev => prev + 1)`
+- **Null key support** - Disables persistence when key is null (useful for conditional persistence)
+- **Initializer functions** - Lazy initialization support
+- **Error handling** - Gracefully handles localStorage unavailability
+
+## API
+
+```typescript
+const [value, setValue] = useLocalStorageState(key, initializer);
+```
+
+### Parameters
+
+| Parameter     | Type                                       | Description                                        |
+| ------------- | ------------------------------------------ | -------------------------------------------------- |
+| `key`         | `string \| null`                           | localStorage key. If null, persistence is disabled |
+| `initializer` | `string \| null \| (() => string \| null)` | Initial value or function returning initial value  |
+
+### Returns
+
+| Property   | Type                                                   | Description                                      |
+| ---------- | ------------------------------------------------------ | ------------------------------------------------ |
+| `value`    | `string \| null`                                       | Current value from localStorage or initial value |
+| `setValue` | `React.Dispatch<React.SetStateAction<string \| null>>` | Function to update the value                     |
+
+## Usage Examples
+
+### Basic Persistence
+
+```tsx
+import useLocalStorageState from '@mui/internal-docs-infra/useLocalStorageState';
+
+function ThemeToggle() {
+  const [theme, setTheme] = useLocalStorageState('theme', () => 'light');
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  return <button onClick={toggleTheme}>Current theme: {theme} (Click to toggle)</button>;
+}
+```
+
+### Function Updates
+
+```tsx
+import useLocalStorageState from '@mui/internal-docs-infra/useLocalStorageState';
+
+function Counter() {
+  const [count, setCount] = useLocalStorageState('counter', () => '0');
+
+  const increment = () => {
+    setCount((prev) => String(Number(prev || '0') + 1));
+  };
+
+  const decrement = () => {
+    setCount((prev) => String(Number(prev || '0') - 1));
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+    </div>
+  );
+}
+```
+
+### Conditional Persistence
+
+```tsx
+import useLocalStorageState from '@mui/internal-docs-infra/useLocalStorageState';
+
+function UserSettings({ enablePersistence }: { enablePersistence: boolean }) {
+  // When enablePersistence is false, key is null and state isn't persisted
+  const [settings, setSettings] = useLocalStorageState(
+    enablePersistence ? 'user-settings' : null,
+    () => 'default-settings',
+  );
+
+  return (
+    <div>
+      <p>Settings: {settings}</p>
+      <p>Persistence: {enablePersistence ? 'enabled' : 'disabled'}</p>
+      <button onClick={() => setSettings('custom-settings')}>Update Settings</button>
+    </div>
+  );
+}
+```
+
+### Demo Code Editor
+
+```tsx
+import useLocalStorageState from '@mui/internal-docs-infra/useLocalStorageState';
+
+function CodeEditor({ demoId }: { demoId: string }) {
+  const [code, setCode] = useLocalStorageState(
+    `demo-code-${demoId}`,
+    () => `// Default code for ${demoId}\nconsole.log('Hello World');`,
+  );
+
+  return (
+    <div>
+      <textarea
+        value={code || ''}
+        onChange={(e) => setCode(e.target.value)}
+        placeholder="Enter your code here..."
+        rows={10}
+        cols={50}
+      />
+      <div>
+        <button onClick={() => setCode(null)}>Reset to Default</button>
+        <button onClick={() => setCode('')}>Clear</button>
+      </div>
+    </div>
+  );
+}
+```
+
+### User Preferences Panel
+
+```tsx
+import useLocalStorageState from '@mui/internal-docs-infra/useLocalStorageState';
+
+function PreferencesPanel() {
+  const [language, setLanguage] = useLocalStorageState('ui-language', () => 'en');
+  const [fontSize, setFontSize] = useLocalStorageState('font-size', () => 'medium');
+  const [autoSave, setAutoSave] = useLocalStorageState('auto-save', () => 'true');
+
+  return (
+    <div>
+      <h3>User Preferences</h3>
+
+      <label>
+        Language:
+        <select value={language || 'en'} onChange={(e) => setLanguage(e.target.value)}>
+          <option value="en">English</option>
+          <option value="es">Spanish</option>
+          <option value="fr">French</option>
+        </select>
+      </label>
+
+      <label>
+        Font Size:
+        <select value={fontSize || 'medium'} onChange={(e) => setFontSize(e.target.value)}>
+          <option value="small">Small</option>
+          <option value="medium">Medium</option>
+          <option value="large">Large</option>
+        </select>
+      </label>
+
+      <label>
+        <input
+          type="checkbox"
+          checked={autoSave === 'true'}
+          onChange={(e) => setAutoSave(e.target.checked ? 'true' : 'false')}
+        />
+        Auto-save
+      </label>
+    </div>
+  );
+}
+```
+
+## How It Works
+
+### Server-Side Rendering
+
+The hook handles SSR by:
+
+1. **Server**: Returns `[null, () => {}]` - no localStorage access
+2. **Client hydration**: Uses `useSyncExternalStore` with server snapshot returning `null`
+3. **Post-hydration**: Switches to actual localStorage values
+
+This prevents hydration mismatches while providing immediate localStorage access after hydration.
+
+### Cross-Tab Synchronization
+
+```typescript
+// Internal event system for same-tab updates
+const currentTabChangeListeners = new Map<string, Set<() => void>>();
+
+// Listens to both:
+// 1. `storage` events (for other tabs)
+// 2. Custom events (for current tab)
+function subscribe(area: Storage, key: string | null, callback: () => void) {
+  const storageHandler = (event: StorageEvent) => {
+    if (event.storageArea === area && event.key === key) {
+      callback(); // Other tabs changed this key
+    }
+  };
+  window.addEventListener('storage', storageHandler);
+  onCurrentTabStorageChange(key, callback); // Same tab changes
+  // ...
+}
+```
+
+### Value Management
+
+**Setting Values:**
+
+```typescript
+// Supports both direct values and function updates
+setValue('new-value');
+setValue((prev) => `${prev}-updated`);
+
+// null removes the item and falls back to initial value
+setValue(null);
+```
+
+**Storage Operations:**
+
+- `setValue(value)` → `localStorage.setItem(key, value)`
+- `setValue(null)` → `localStorage.removeItem(key)` + fallback to initial
+- Error handling for storage quota/permissions issues
+
+### Null Key Behavior
+
+When `key` is `null`:
+
+- No localStorage operations occur
+- Hook behaves like regular `useState`
+- Useful for conditional persistence
+
+```tsx
+const [value, setValue] = useLocalStorageState(shouldPersist ? 'my-key' : null, () => 'default');
+```
+
+## Error Handling
+
+The hook gracefully handles:
+
+- **localStorage unavailable** (private browsing, disabled)
+- **Storage quota exceeded**
+- **Permission errors**
+- **Invalid JSON** (though this hook only handles strings)
+
+All errors are caught and ignored, falling back to non-persistent behavior.
+
+## TypeScript Support
+
+```typescript
+// Hook signature
+function useLocalStorageState(
+  key: string | null,
+  initializer?: string | null | (() => string | null),
+): [string | null, React.Dispatch<React.SetStateAction<string | null>>];
+
+// Example usage
+const [value, setValue] = useLocalStorageState('key', () => 'initial');
+//    ^string | null    ^React.Dispatch<React.SetStateAction<string | null>>
+```
+
+## Performance Considerations
+
+- **useSyncExternalStore**: Uses React 18's external store API for optimal performance
+- **Event-driven updates**: Only re-renders when localStorage actually changes
+- **Lazy initialization**: Initializer functions called only once
+- **Memory efficient**: Automatic cleanup of event listeners
+
+## Browser Support
+
+- **Modern browsers**: Full functionality with localStorage and storage events
+- **Legacy browsers**: Falls back to non-persistent useState behavior
+- **SSR environments**: Safe server-side rendering with hydration support
+
+## When to Use
+
+- **User preferences** - Theme, language, UI settings
+- **Demo state** - Code editor content, configuration
+- **Form data** - Draft content, auto-save functionality
+- **UI state** - Sidebar collapsed, tabs selected
+- **Cache** - Non-critical data that can be lost
+- **Cross-tab sync** - When state should sync across browser tabs
+
+## Limitations
+
+- **String values only** - Use JSON.stringify/parse for objects
+- **Storage quota** - localStorage has size limits (~5-10MB)
+- **Same-origin only** - Can't share data across different domains
+- **Client-side only** - No server-side persistence
+
+## Related
+
+- [`usePreference`](../use-preference/page.mdx) - Higher-level preference management
+- [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) - Underlying browser API
diff --git a/docs/app/docs-infra/hooks/use-preference/page.mdx b/docs/app/docs-infra/hooks/use-preference/page.mdx
new file mode 100644
index 000000000..e698c1a89
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-preference/page.mdx
@@ -0,0 +1,370 @@
+# usePreference
+
+The `usePreference` hook provides specialized preference management for code demo variants and transformations. It builds on `useLocalStorageState` with intelligent storage key generation, prefix support, and automatic optimization for single-option scenarios.
+
+## Features
+
+- **Specialized for demos** - Designed for variant and transform preferences
+- **Intelligent storage** - Only persists when there are multiple options to choose from
+- **Automatic key generation** - Creates storage keys from variant/transform names
+- **Prefix support** - Configurable prefixes via PreferencesProvider
+- **localStorage persistence** - Built on useLocalStorageState for cross-tab sync
+- **Smart optimization** - Skips storage for single-option scenarios
+
+## API
+
+```typescript
+const [preference, setPreference] = usePreference(type, name, initializer);
+```
+
+### Parameters
+
+| Parameter     | Type                                       | Description                                             |
+| ------------- | ------------------------------------------ | ------------------------------------------------------- |
+| `type`        | `'variant' \| 'transform'`                 | Type of preference (affects storage prefix)             |
+| `name`        | `string \| string[]`                       | Variant/transform name(s). Array gets sorted and joined |
+| `initializer` | `string \| null \| (() => string \| null)` | Initial value or function                               |
+
+### Returns
+
+| Property        | Type                                                   | Description                   |
+| --------------- | ------------------------------------------------------ | ----------------------------- |
+| `preference`    | `string \| null`                                       | Current preference value      |
+| `setPreference` | `React.Dispatch<React.SetStateAction<string \| null>>` | Function to update preference |
+
+## Usage Examples
+
+### Variant Preferences
+
+```tsx
+import { usePreference } from '@mui/internal-docs-infra/usePreference';
+
+function ButtonVariantSelector() {
+  // For multiple variants - will persist to localStorage
+  const [variant, setVariant] = usePreference(
+    'variant',
+    ['contained', 'outlined', 'text'], // Multiple options
+    () => 'contained',
+  );
+
+  return (
+    <div>
+      <p>Current variant: {variant}</p>
+      {['contained', 'outlined', 'text'].map((option) => (
+        <button
+          key={option}
+          onClick={() => setVariant(option)}
+          style={{
+            fontWeight: variant === option ? 'bold' : 'normal',
+          }}
+        >
+          {option}
+        </button>
+      ))}
+    </div>
+  );
+}
+```
+
+### Transform Preferences
+
+```tsx
+import { usePreference } from '@mui/internal-docs-infra/usePreference';
+
+function CodeLanguageSelector() {
+  const [language, setLanguage] = usePreference(
+    'transform',
+    ['typescript', 'javascript'], // Multiple languages available
+    () => 'typescript',
+  );
+
+  return (
+    <div>
+      <label>
+        <input
+          type="radio"
+          checked={language === 'typescript'}
+          onChange={() => setLanguage('typescript')}
+        />
+        TypeScript
+      </label>
+      <label>
+        <input
+          type="radio"
+          checked={language === 'javascript'}
+          onChange={() => setLanguage('javascript')}
+        />
+        JavaScript
+      </label>
+    </div>
+  );
+}
+```
+
+### Single Option (No Persistence)
+
+```tsx
+import { usePreference } from '@mui/internal-docs-infra/usePreference';
+
+function SingleVariantDemo() {
+  // Only one variant - no localStorage persistence (key will be null)
+  const [variant, setVariant] = usePreference(
+    'variant',
+    ['contained'], // Single option
+    () => 'contained',
+  );
+
+  // This behaves like useState since there's no choice to remember
+  return <p>Only variant available: {variant}</p>;
+}
+```
+
+### With Custom Prefix
+
+```tsx
+import { usePreference, PreferencesProvider } from '@mui/internal-docs-infra/usePreference';
+
+function CustomPrefixDemo() {
+  return (
+    <PreferencesProvider value={{ prefix: 'my-app' }}>
+      <ComponentWithPreferences />
+    </PreferencesProvider>
+  );
+}
+
+function ComponentWithPreferences() {
+  // Storage key will be: "my-app_variant:contained:outlined:text"
+  const [variant, setVariant] = usePreference(
+    'variant',
+    ['contained', 'outlined', 'text'],
+    () => 'contained',
+  );
+
+  return (
+    <select value={variant || 'contained'} onChange={(e) => setVariant(e.target.value)}>
+      <option value="contained">Contained</option>
+      <option value="outlined">Outlined</option>
+      <option value="text">Text</option>
+    </select>
+  );
+}
+```
+
+### Demo Configuration Panel
+
+```tsx
+import { usePreference } from '@mui/internal-docs-infra/usePreference';
+
+function DemoConfigPanel() {
+  const [size, setSize] = usePreference('variant', ['small', 'medium', 'large'], () => 'medium');
+
+  const [color, setColor] = usePreference(
+    'variant',
+    ['primary', 'secondary', 'error'],
+    () => 'primary',
+  );
+
+  const [format, setFormat] = usePreference(
+    'transform',
+    ['typescript', 'javascript'],
+    () => 'typescript',
+  );
+
+  return (
+    <div className="demo-config">
+      <h4>Demo Configuration</h4>
+
+      <label>
+        Size:
+        <select value={size || 'medium'} onChange={(e) => setSize(e.target.value)}>
+          <option value="small">Small</option>
+          <option value="medium">Medium</option>
+          <option value="large">Large</option>
+        </select>
+      </label>
+
+      <label>
+        Color:
+        <select value={color || 'primary'} onChange={(e) => setColor(e.target.value)}>
+          <option value="primary">Primary</option>
+          <option value="secondary">Secondary</option>
+          <option value="error">Error</option>
+        </select>
+      </label>
+
+      <label>
+        Code Format:
+        <select value={format || 'typescript'} onChange={(e) => setFormat(e.target.value)}>
+          <option value="typescript">TypeScript</option>
+          <option value="javascript">JavaScript</option>
+        </select>
+      </label>
+    </div>
+  );
+}
+```
+
+## How It Works
+
+### Storage Key Generation
+
+The hook generates localStorage keys based on the type and name parameters:
+
+```typescript
+// For variant preferences
+// Single string name
+usePreference('variant', 'contained');
+// → Storage key: "_docs_variant_pref:contained"
+
+// Array of names (sorted and joined)
+usePreference('variant', ['outlined', 'contained', 'text']);
+// → Storage key: "_docs_variant_pref:contained:outlined:text"
+
+// For transform preferences
+usePreference('transform', ['typescript', 'javascript']);
+// → Storage key: "_docs_transform_pref:javascript:typescript"
+```
+
+### Intelligent Optimization
+
+```typescript
+const key = React.useMemo(() => {
+  if (!Array.isArray(name)) {
+    return name; // Single string always persists
+  }
+
+  if (name.length <= 1) {
+    return null; // Single option - no need to persist choice
+  }
+
+  return [...name].sort().join(':'); // Multiple options - create stable key
+}, [name]);
+```
+
+### Prefix System
+
+```typescript
+// Default prefixes
+const defaultPrefixes = {
+  variant: '_docs_variant_pref',
+  transform: '_docs_transform_pref',
+};
+
+// With custom prefix from context
+// usePreference('variant', ['a', 'b']) with prefix "my-app"
+// → Storage key: "my-app_variant:a:b"
+```
+
+### Context Integration
+
+```tsx
+export interface PreferencesContext {
+  prefix?: string;
+}
+
+// Usage
+<PreferencesProvider value={{ prefix: 'my-docs-site' }}>
+  <App />
+</PreferencesProvider>;
+```
+
+## Storage Key Examples
+
+| Type                | Name                    | Generated Key                      |
+| ------------------- | ----------------------- | ---------------------------------- |
+| `variant`           | `'contained'`           | `_docs_variant_pref:contained`     |
+| `variant`           | `['text', 'outlined']`  | `_docs_variant_pref:outlined:text` |
+| `variant`           | `['single']`            | `null` (no persistence)            |
+| `transform`         | `['ts', 'js']`          | `_docs_transform_pref:js:ts`       |
+| With prefix `'app'` | `variant`, `['a', 'b']` | `app_variant:a:b`                  |
+
+## Integration with CodeHighlighter
+
+```tsx
+import { usePreference } from '@mui/internal-docs-infra/usePreference';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+
+function CodeDemo({ availableVariants, availableTransforms }) {
+  const [selectedVariant, setSelectedVariant] = usePreference(
+    'variant',
+    availableVariants,
+    () => availableVariants[0],
+  );
+
+  const [selectedTransform, setSelectedTransform] = usePreference(
+    'transform',
+    availableTransforms,
+    () => availableTransforms[0],
+  );
+
+  return (
+    <div>
+      {/* Variant selector only shows if multiple variants */}
+      {availableVariants.length > 1 && (
+        <VariantSelector
+          variants={availableVariants}
+          selected={selectedVariant}
+          onChange={setSelectedVariant}
+        />
+      )}
+
+      {/* Transform selector only shows if multiple transforms */}
+      {availableTransforms.length > 1 && (
+        <TransformSelector
+          transforms={availableTransforms}
+          selected={selectedTransform}
+          onChange={setSelectedTransform}
+        />
+      )}
+
+      <CodeHighlighter
+        variant={selectedVariant}
+        transform={selectedTransform}
+        // ... other props
+      />
+    </div>
+  );
+}
+```
+
+## Performance Optimizations
+
+1. **Memoized key generation** - Storage key only recalculated when name changes
+2. **Conditional persistence** - Single options skip localStorage entirely
+3. **Stable array keys** - Sorted arrays ensure consistent storage keys
+4. **Built on useLocalStorageState** - Inherits cross-tab sync and SSR safety
+
+## When to Use
+
+- **Demo variant selection** - When users can choose between component variants
+- **Code transform preferences** - TypeScript/JavaScript, different syntax styles
+- **Multi-option scenarios** - Any case where users choose from multiple options
+- **Persistent UI state** - Remember user choices across sessions
+
+## When NOT to Use
+
+- **Single options** - Hook automatically optimizes this case
+- **Non-demo preferences** - Use `useLocalStorageState` directly for general preferences
+- **Complex objects** - This hook is designed for string preferences
+
+## TypeScript Support
+
+```typescript
+// Hook signature
+function usePreference(
+  type: 'variant' | 'transform',
+  name: string | string[],
+  initializer?: string | null | (() => string | null),
+): [string | null, React.Dispatch<React.SetStateAction<string | null>>];
+
+// Context types
+interface PreferencesContext {
+  prefix?: string;
+}
+```
+
+## Related
+
+- [`useLocalStorageState`](../use-local-storage-state/page.mdx) - Underlying persistence mechanism
+- [`PreferencesProvider`](../../components/preferences-provider/page.mdx) - Context provider for custom prefixes
+- [`CodeHighlighter`](../../components/code-highlighter/page.mdx) - Common use case for variant preferences
diff --git a/docs/app/docs-infra/hooks/use-url-hash-state/page.mdx b/docs/app/docs-infra/hooks/use-url-hash-state/page.mdx
new file mode 100644
index 000000000..2f7c3b472
--- /dev/null
+++ b/docs/app/docs-infra/hooks/use-url-hash-state/page.mdx
@@ -0,0 +1,290 @@
+# useUrlHashState
+
+The `useUrlHashState` hook provides a simple way to synchronize component state with the URL hash fragment, enabling deep linking, state persistence, and browser navigation support in documentation and demo pages.
+
+## Features
+
+- **URL Synchronization**: Automatically syncs state with the URL hash fragment
+- **Deep Linking**: Enables direct links to specific application states
+- **Browser Navigation**: Supports back/forward navigation with history API
+- **SSR Safe**: Handles server-side rendering gracefully
+- **Simple API**: Returns `[hash, setHash]` tuple similar to `useState`
+
+## API
+
+```tsx
+const [hash, setHash] = useUrlHashState();
+```
+
+### Returns
+
+A tuple containing:
+
+| Index | Type                                                 | Description                                 |
+| ----- | ---------------------------------------------------- | ------------------------------------------- |
+| `0`   | `string \| null`                                     | Current hash value (without the '#' prefix) |
+| `1`   | `(value: string \| null, replace?: boolean) => void` | Function to update hash and URL             |
+
+### setHash Parameters
+
+| Parameter | Type             | Default | Description                                                 |
+| --------- | ---------------- | ------- | ----------------------------------------------------------- |
+| `value`   | `string \| null` | -       | New hash value to set, or `null` to clear the hash          |
+| `replace` | `boolean`        | `true`  | Whether to use `replaceState` (true) or `pushState` (false) |
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { useUrlHashState } from '@mui/internal-docs-infra/useUrlHashState';
+
+function TabNavigation() {
+  const [hash, setHash] = useUrlHashState();
+
+  return (
+    <nav>
+      <button onClick={() => setHash('overview')} className={hash === 'overview' ? 'active' : ''}>
+        Overview
+      </button>
+      <button onClick={() => setHash('details')} className={hash === 'details' ? 'active' : ''}>
+        Details
+      </button>
+      <button onClick={() => setHash(null)}>Clear Hash</button>
+    </nav>
+  );
+}
+```
+
+### History Management
+
+```tsx
+function NavigationExample() {
+  const [hash, setHash] = useUrlHashState();
+
+  const goToSection = (section: string, addToHistory = false) => {
+    // Use replace=false to add entry to browser history
+    // Use replace=true (default) to replace current entry
+    setHash(section, !addToHistory);
+  };
+
+  return (
+    <div>
+      <button onClick={() => goToSection('intro', true)}>Go to Intro (new history entry)</button>
+      <button onClick={() => goToSection('content')}>Go to Content (replace current)</button>
+    </div>
+  );
+}
+```
+
+### Responding to Hash Changes
+
+```tsx
+function SectionNavigator() {
+  const [hash, setHash] = useUrlHashState();
+
+  // React to hash changes (including browser back/forward)
+  React.useEffect(() => {
+    if (hash) {
+      const element = document.getElementById(hash);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+      }
+    }
+  }, [hash]);
+
+  return (
+    <div>
+      <p>Current section: {hash || 'none'}</p>
+      <button onClick={() => setHash('section1')}>Go to Section 1</button>
+      <button onClick={() => setHash('section2')}>Go to Section 2</button>
+    </div>
+  );
+}
+```
+
+## Implementation Details
+
+The hook uses the following strategy:
+
+1. **Initial Reading**: On mount, reads the current hash from `window.location.hash`
+2. **State Management**: Uses `useSyncExternalStore` to synchronize with URL changes
+3. **URL Updates**: Uses `history.replaceState()` or `history.pushState()` to update URL
+4. **Change Detection**: Listens to `hashchange` events for browser navigation
+5. **SSR Handling**: Returns `null` and skips URL operations on the server
+6. **Hash Parsing**: Automatically removes the '#' prefix from hash values
+
+## Common Patterns
+
+### Documentation Sections
+
+```tsx
+function DocumentationPage() {
+  const [hash, setHash] = useUrlHashState();
+
+  const sections = ['introduction', 'api', 'examples', 'troubleshooting'];
+  const activeSection = hash || 'introduction';
+
+  return (
+    <div>
+      <nav>
+        {sections.map((section) => (
+          <button
+            key={section}
+            onClick={() => setHash(section)}
+            className={activeSection === section ? 'active' : ''}
+          >
+            {section}
+          </button>
+        ))}
+      </nav>
+      <main>
+        {activeSection === 'introduction' && <IntroductionContent />}
+        {activeSection === 'api' && <ApiContent />}
+        {activeSection === 'examples' && <ExamplesContent />}
+        {activeSection === 'troubleshooting' && <TroubleshootingContent />}
+      </main>
+    </div>
+  );
+}
+```
+
+### Demo State Persistence
+
+```tsx
+function DemoPage() {
+  const [hash, setHash] = useUrlHashState();
+
+  // Parse hash as JSON for complex state
+  const demoState = React.useMemo(() => {
+    if (!hash) return { variant: 'default', size: 'medium' };
+    try {
+      return JSON.parse(decodeURIComponent(hash));
+    } catch {
+      return { variant: 'default', size: 'medium' };
+    }
+  }, [hash]);
+
+  const updateDemoState = (updates: Partial<typeof demoState>) => {
+    const newState = { ...demoState, ...updates };
+    setHash(encodeURIComponent(JSON.stringify(newState)));
+  };
+
+  return (
+    <div>
+      <Demo config={demoState} />
+      <Controls state={demoState} onChange={updateDemoState} />
+    </div>
+  );
+}
+```
+
+### Modal Deep Linking
+
+```tsx
+function ModalExample() {
+  const [hash, setHash] = useUrlHashState();
+  const isModalOpen = hash === 'modal';
+
+  const openModal = () => setHash('modal');
+  const closeModal = () => setHash(null);
+
+  return (
+    <div>
+      <button onClick={openModal}>Open Modal</button>
+      {isModalOpen && (
+        <Modal onClose={closeModal}>
+          <p>Modal content - shareable URL!</p>
+        </Modal>
+      )}
+    </div>
+  );
+}
+```
+
+## When to Use
+
+- **Deep Linking**: Enable direct links to specific states or sections
+- **State Persistence**: Preserve application state across page reloads
+- **Browser Navigation**: Support back/forward navigation for state changes
+- **Shareable URLs**: Create URLs that capture current application state
+- **Documentation Navigation**: Navigate between sections with persistent URLs
+- **Demo Configuration**: Persist demo settings in URL for sharing
+
+## Fragment Structure and Delimiters
+
+This hook works with any hash format, but for consistency across MUI documentation, consider using the [fragment delimiter convention](../../conventions/fragment-delimeters/page.mdx). This convention uses `:` to express hierarchy in URL fragments:
+
+```tsx
+function HierarchicalNavigation() {
+  const [hash, setHash] = useUrlHashState();
+
+  // Parse hierarchical fragments like "api:props" or "demos:button:outlined"
+  const segments = hash?.split(':') || [];
+  const [section, subsection, variant] = segments;
+
+  return (
+    <div>
+      {/* Primary navigation */}
+      <nav>
+        <button onClick={() => setHash('api')} className={section === 'api' ? 'active' : ''}>
+          API
+        </button>
+        <button onClick={() => setHash('demos')} className={section === 'demos' ? 'active' : ''}>
+          Demos
+        </button>
+      </nav>
+
+      {/* Secondary navigation within API section */}
+      {section === 'api' && (
+        <nav>
+          <button
+            onClick={() => setHash('api:props')}
+            className={subsection === 'props' ? 'active' : ''}
+          >
+            Props
+          </button>
+          <button
+            onClick={() => setHash('api:methods')}
+            className={subsection === 'methods' ? 'active' : ''}
+          >
+            Methods
+          </button>
+        </nav>
+      )}
+
+      {/* Demo variants */}
+      {section === 'demos' && subsection === 'button' && (
+        <nav>
+          <button
+            onClick={() => setHash('demos:button:outlined')}
+            className={variant === 'outlined' ? 'active' : ''}
+          >
+            Outlined
+          </button>
+          <button
+            onClick={() => setHash('demos:button:contained')}
+            className={variant === 'contained' ? 'active' : ''}
+          >
+            Contained
+          </button>
+        </nav>
+      )}
+    </div>
+  );
+}
+```
+
+Benefits of using structured fragments:
+
+- **Consistent navigation**: Follows established patterns across MUI docs
+- **Deep linking**: Users can link directly to specific sections and variants
+- **History behavior**: Back button navigates between major sections, not every variant change
+- **Accessibility**: Screen readers can better understand content structure
+
+## When Not to Use
+
+- **Sensitive Data**: Don't store sensitive information in URL hashes
+- **Large State Objects**: Avoid storing complex state that makes URLs unwieldy
+- **Frequently Changing State**: Don't sync rapidly changing state that would spam browser history
+- **Private State**: Use for state that's appropriate to be visible in URLs
diff --git a/docs/app/docs-infra/layout.tsx b/docs/app/docs-infra/layout.tsx
new file mode 100644
index 000000000..332d5b025
--- /dev/null
+++ b/docs/app/docs-infra/layout.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import styles from '../layout.module.css';
+
+export const metadata: Metadata = {
+  title: 'MUI Docs Infra Documentation',
+  description: 'How to use the MUI Docs-Infra package',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <Link href="/docs-infra">MUI Docs Infra</Link>
+      </div>
+      <div className={styles.container}>{children}</div>
+    </div>
+  );
+}
diff --git a/docs/app/docs-infra/page.mdx b/docs/app/docs-infra/page.mdx
new file mode 100644
index 000000000..f016e113c
--- /dev/null
+++ b/docs/app/docs-infra/page.mdx
@@ -0,0 +1,72 @@
+# Docs Infra
+
+This is the documentation for the MUI Internal Docs Infra package. It provides components and utilities for building documentation sites.
+
+You can install this package using:
+
+```bash variant=pnpm
+pnpm install @mui/internal-docs-infra
+```
+
+```bash variant=yarn
+yarn add @mui/internal-docs-infra
+```
+
+```bash variant=npm
+npm install @mui/internal-docs-infra
+```
+
+# Components
+
+These usually do not add additional HTML elements to the page, but rather provide functionality to wrap developer provided components.
+
+Some fundamental components are:
+
+- [`CodeHighlighter`](./components/code-highlighter/page.mdx): A component for displaying and rendering code snippets with syntax highlighting.
+
+See the full list of components in the [Components section](./components/page.mdx).
+
+# Hooks
+
+These are React hooks that provide client-side functionality for building documentation sites.
+
+Some fundamental hooks are:
+
+- [`useCode`](./hooks/use-code/page.mdx): A hook for rendering code blocks
+- [`useDemo`](./hooks/use-demo/page.mdx): A hook for rendering demos
+
+See the full list of hooks in the [Hooks section](./hooks/page.mdx).
+
+# Functions
+
+These are utility functions that provide functionality outside of React components.
+
+Some fundamental functions are:
+
+- [`abstractCreateDemo`](./functions/abstract-create-demo/page.mdx) - Factory utilities for creating structured demos that work with CodeHighlighter
+- [`loadPrecomputedCodeHighlighter`](./functions/load-precomputed-code-highlighter/page.mdx) - Webpack loader for build-time demo optimization
+- [`transformMarkdownCode`](./functions/transform-markdown-code/page.mdx) - Remark plugin for transforming markdown code blocks with variants into HTML structures
+- [`transformMarkdownRelativePaths`](./transform-markdown-relative-paths/page.mdx) - Remark plugin for transforming relative markdown links to absolute paths
+
+See the full list of functions in the [Functions section](./functions/page.mdx).
+
+# Patterns
+
+These are architectural patterns and best practices for building documentation infrastructure.
+
+Some key patterns are:
+
+- [`Built Factories`](./patterns/built-factories/page.mdx): A pattern for creating factory functions that use `import.meta.url` as a starting point for operations.
+- [`Props Context Layering`](./patterns/props-context-layering/page.mdx): A pattern for creating isomorphic components with React Server Components using context layering.
+
+See the full list of patterns in the [Patterns section](./patterns/page.mdx).
+
+# Contributing
+
+If you want to contribute to the MUI Docs Infra project, please read the [Contributing guide](./contributing/page.mdx).
+
+# License & Use
+
+This project is licensed under the [MIT License](https://github.com/mui/mui-public/blob/master/LICENSE).
+
+This is an internal project, and is not intended for public use. No support or stability guarantees are provided. Use at your own risk.
diff --git a/docs/app/docs-infra/patterns/built-factories/page.mdx b/docs/app/docs-infra/patterns/built-factories/page.mdx
new file mode 100644
index 000000000..9a4ba1f12
--- /dev/null
+++ b/docs/app/docs-infra/patterns/built-factories/page.mdx
@@ -0,0 +1,250 @@
+# Built Factories Pattern
+
+At its core, a factory only needs a URL. In TypeScript we can rely on `import.meta.url` as the starting point for any operation.
+
+```ts
+// src/objects/object.ts
+import { createObject } from '../createObject';
+
+export const object = createObject(import.meta.url);
+```
+
+We treat `file:///src/objects/object.ts` as the factory's input.
+By using the module URL, we can lean on filesystem-based routing.
+
+Because we defined `createObject`, we control how it works.
+We know that object names follow the pattern `file:///src/objects/(?<object>[^/]+)\.ts`.
+From any layer (build time, server runtime, or client render), we can derive the object name `object`.
+
+We can perform any async task to produce the `object` instance: read the filesystem, query a database, or call an external API.
+
+But the index file for this object stays the same. This lets you change `createObject` without affecting potentially hundreds of index files.
+
+The index file can be copy-pasted many times; only customized factories differ.
+
+## Build
+
+During build time, a loader can access `import.meta.url` and know which object is being created. It can then inject the object into an options parameter:
+
+```ts
+// src/objects/object.ts
+import { createObject } from '../createObject';
+
+export const object = createObject(import.meta.url, { precompute: {} });
+```
+
+The loader returns this after creating the object instance. `createObject` can then skip async work and return the precomputed object.
+
+This is powerful for filesystem‑derived objects, because loaders can declare dependent files. When those change, the cache is busted.
+
+So if you had a store at `data/objects/object.json`, you could read it during build. If it changes, the object is re-created.
+
+This especially helps when objects are expensive to create.
+
+Not all objects need build-time creation. Some can't be precomputed. The index file shouldn't need to change if you later decide to create objects during a client render.
+
+## Options
+
+Factories can take options to augment behavior. For example, you might override the derived name:
+
+```ts
+// src/objects/object.ts
+import { createObject } from '../createObject';
+
+export const object = createObject(import.meta.url, { name: 'CustomObjectName' });
+```
+
+They can also accept flags:
+
+```ts
+export const object = createObject(import.meta.url, { isVisible: true });
+```
+
+Or functions:
+
+```ts
+export const object = createObject(import.meta.url, { getName: () => 'CustomObjectName' });
+```
+
+Or additional data:
+
+```ts
+export const object = createObject(import.meta.url, { data: { key: 'value' } });
+```
+
+Anything useful for creating the object can go in options.
+
+## Imported Sources
+
+Sometimes the object is created using an importable source.
+
+A simple example: a code snippet from an external module:
+
+```ts
+// src/externalModule.ts
+// This is an external function
+export const externalFunction = () => {
+  // Some implementation
+};
+```
+
+```ts
+// src/objects/object.ts
+import { createSnippet } from '../createSnippet';
+import { externalFunction } from '../externalModule';
+
+export const snippet = createSnippet(import.meta.url, externalFunction);
+```
+
+At build time the snippet could be injected:
+
+```ts
+// src/objects/object.ts
+import { createSnippet } from '../createSnippet'
+import { externalFunction } from '../externalModule'
+
+export const snippet = createSnippet(import.meta.url, externalFunction, precompute: `// This is an external function
+export const externalFunction = () => {
+  // Some implementation
+}
+`)
+```
+
+Then `createSnippet` has both the executable function and its source text.
+
+Sometimes objects have variations users can choose from, each imported as a source.
+
+```ts
+// src/objects/object.ts
+import { createSnippet } from '../createSnippet';
+import { externalFunctionA } from '../externalModuleA';
+import { externalFunctionB } from '../externalModuleB';
+
+export const snippet = createSnippet(import.meta.url, {
+  A: externalFunctionA,
+  B: externalFunctionB,
+});
+```
+
+which could be precomputed as:
+
+```ts
+// src/objects/object.ts
+import { createSnippet } from '../createSnippet';
+import { externalFunctionA } from '../externalModuleA';
+import { externalFunctionB } from '../externalModuleB';
+
+export const snippet = createSnippet(
+  import.meta.url,
+  { A: externalFunctionA, B: externalFunctionB },
+  {
+    precompute: {
+      A: `// This is an external function A
+export const externalFunctionA = () => {
+  // Some implementation
+}
+`,
+      B: `// This is an external function B
+export const externalFunctionB = () => {
+  // Some implementation
+}
+`,
+    },
+  },
+);
+```
+
+You can also add options when using imported sources:
+
+```ts
+export const snippet = createSnippet(
+  import.meta.url,
+  { A: externalFunctionA, B: externalFunctionB },
+  { stripComments: true },
+);
+```
+
+If the snippet isn't generated at build time, we still have enough info to load the code on the server or client.
+
+## Strong Typing
+
+Next.js has challenges defining TypeScript types for exports in `page.tsx` files.
+
+This pattern avoids them because it mandates a factory function that supplies types.
+
+## Centralized Configuration
+
+The actual `createObject` factory centralizes shared behavior across all objects created with it.
+
+For example:
+
+```ts
+// src/createObject.ts
+const DEBUG = true;
+
+export const createObject = (url: string, options: any) => {
+  const { object, headers } = fetch(url.replace('file:///', 'http://example.com/'));
+  if (DEBUG) {
+    return { object, headers };
+  }
+
+  return { object };
+};
+```
+
+Changing the config inside `createObject` affects all objects created with it.
+
+This is instrumental in a library that provides abstract factories:
+
+```ts
+// src/createObject.ts
+import abstractCreateObject from 'lib/abstractCreateObject';
+
+export const createObject = abstractCreateObject({
+  debug: true,
+});
+```
+
+You can migrate between an abstract factory maintained elsewhere and a custom implementation without moving the config.
+
+You can also pass one factory's result into another; each can be cached by its own dependency graph.
+
+## Aligned with Next.js App Router
+
+```
+/app/component/page.tsx <-- 'component' page
+/app/component/layout.tsx <-- 'component' layout
+/app/component/object.ts <-- 'component' object (using createObject factory)
+/app/component/snippets/simple/index.ts <-- 'component' snippet 'simple' (using createSnippet factory)
+/app/component/snippets/simple/page.tsx <-- 'component' snippet 'simple' page using ./index
+```
+
+Names come from the filesystem instead of being hardcoded twice in factory params.
+
+This pattern can extend Next.js filesystem-based routing.
+
+## Essential Implementation Notes
+
+Keep the mental model simple:
+
+**Call shape:** `createX(import.meta.url, variants?, options?)`. The URL is the identity. Variants are optional. Options are optional.
+
+**Variants:** A single component becomes the `Default` variant. An object literal lists named variants (`{ TypeScript, JavaScript }`). That's all most cases need.
+
+**One per file:** Use exactly one factory call per file. Loaders enforce this for deterministic transforms.
+
+**Precompute:** Build tooling can replace `precompute: true` (or an existing object) with generated data (`precompute: { ... }`). Server precompute injects variant code metadata; client precompute injects only an externals map. Runtime code doesn't change—only the factory implementation or loader evolves.
+
+**Options:** Pass metadata (`name`, `slug`, flags). Unknown keys are fine; they flow through. Use `skipPrecompute: true` to leave the call untouched.
+
+**Server vs Client:** A server factory (no `'use client'`) declares variants and can precompute heavy code metadata. A separate client factory file (with `'use client'`) has no variants—tooling looks at the sibling server file to know them—and only injects the externals it truly needs.
+
+**Composition:** You can expose a lightweight client wrapper as a variant inside the server factory to strictly control what reaches the client bundle.
+
+**Benefit:** Precomputation removes runtime syntax highlighting + dependency resolution cost, shrinking client work.
+
+These basics are enough to adopt the pattern. For implementation details, see the related function docs above.
+
+### Server / Client Boundary Constraint
+
+A single factory call runs entirely on either the server or the client—never both. If you need specific imports or data to ship to the client bundle you must define a _separate_ client factory file (with `'use client'`). The server factory can reference that client factory (e.g. as a variant or option), but it cannot implicitly “bridge” code across the boundary. This explicit duplication (one factory per boundary) guarantees predictable bundle contents.
diff --git a/docs/app/docs-infra/patterns/page.mdx b/docs/app/docs-infra/patterns/page.mdx
new file mode 100644
index 000000000..0c142846e
--- /dev/null
+++ b/docs/app/docs-infra/patterns/page.mdx
@@ -0,0 +1,4 @@
+# Patterns
+
+- [`Built Factories`](./built-factories/page.mdx): A pattern for creating factory functions that use `import.meta.url` as a starting point for operations.
+- [`Props Context Layering`](./props-context-layering/page.mdx): A pattern for creating isomorphic components with React Server Components using context layering.
diff --git a/docs/app/docs-infra/patterns/props-context-layering/page.mdx b/docs/app/docs-infra/patterns/props-context-layering/page.mdx
new file mode 100644
index 000000000..a7db196da
--- /dev/null
+++ b/docs/app/docs-infra/patterns/props-context-layering/page.mdx
@@ -0,0 +1,301 @@
+# Props Context Layering
+
+**Purpose**: Enable isomorphic components to work seamlessly with React Server Components while maintaining a single, ergonomic API.
+
+**Core Strategy**: Render early with initial props, then progressively enhance via context when additional data/functions become available on the client.
+
+This pattern solves a fundamental challenge: components need to render before the server-client boundary is crossed, but the complete data they need might only be available after client-side processing.
+
+## Server-Client Boundary Constraints
+
+A key driver for this pattern is React Server Components' serialization limitations:
+
+**Cannot pass across server-client boundary:**
+
+- Functions (event handlers, utilities, transformers)
+- Class instances (complex objects, parsed data structures)
+- Non-serializable values (Date objects, Map/Set, symbols)
+
+**Can pass across server-client boundary:**
+
+- Primitive values (strings, numbers, booleans)
+- Plain objects and arrays
+- **React Nodes** (pre-rendered JSX elements)
+
+**Example of the constraint:**
+
+```tsx
+// This won't work - functions can't serialize
+<ClientComponent
+  onSubmit={(data) => console.log(data)}
+  parser={parseComplexData}
+/>
+
+// This works - React Nodes can serialize
+<ClientComponent>
+  <PreRenderedButton onClick={...} />
+  <ParsedDataDisplay data={processedData} />
+</ClientComponent>
+```
+
+**Why Props Context Layering helps:**
+
+- **Props**: Carry serializable data and pre-rendered React Nodes from server
+- **Context**: Provide functions and complex objects on the client side
+- **Result**: Same API works in both environments without serialization issues
+
+---
+
+## 1. Early rendering with fallback values
+
+Components must render on the server before crossing the client boundary. When users pass components as props to server components, those child components are immediately rendered—often before all ideal props are available.
+
+**The challenge**: You need to display something useful immediately while waiting for enhanced data.
+
+**The solution**: Accept whatever props are available initially, then seamlessly upgrade via context without changing the component's API.
+
+**Implementation pattern**: Create a custom hook that merges props (immediate) with context (enhanced) values.
+
+## 2. Conditional async operations
+
+**The problem**: The same component may run in either server or client environments. Async server components will throw errors when executed on the client.
+
+**The solution**: Guard async operations behind conditions: only execute them when the data is actually needed and the environment supports it.
+
+**When to defer async work**:
+
+- Props already contain the required data → skip async fetching
+- Heavy functions are missing → assume they'll be provided later via context
+- `forceClient` flag is set → defer to `useEffect` instead of server async
+
+**Example scenarios**:
+
+```tsx
+// IsomorphicData decides whether to fetch on the server or defer to the client.
+// 1. If data already provided -> render immediately.
+// 2. If data missing & we can run async on the server (not forceClient) -> render an async loader.
+// 3. Otherwise -> return a client component that will load data after hydration.
+
+// Synchronous decision component (never async itself)
+function IsomorphicData({ data, url, forceClient = false }) {
+  if (data) return <DataComponent data={data} />; // Already have data
+  if (!forceClient && url) return <ServerDataLoader url={url} />; // Let server do async
+  return <ClientDataLoader initialData={data} url={url} />; // Defer to client
+}
+
+// Async server-capable loader (can be an RSC async component)
+async function ServerDataLoader({ url }) {
+  const res = await fetch(url);
+  const fetched = await res.json();
+  return <DataComponent data={fetched} />;
+}
+
+// Client-only loader (separate module/file marked with 'use client')
+// File: ClientDataLoader.tsx
+// 'use client';
+import React, { useEffect, useState } from 'react';
+
+function ClientDataLoader({ initialData, url }) {
+  const [loaded, setLoaded] = useState(initialData);
+
+  useEffect(() => {
+    if (!loaded && url) {
+      fetch(url)
+        .then((r) => r.json())
+        .then(setLoaded)
+        .catch(() => {}); // swallow / handle errors as desired
+    }
+  }, [loaded, url]);
+
+  return <DataComponent data={loaded} />;
+}
+
+// Usage - the same props API; behavior chosen automatically
+<IsomorphicData data={maybePrefetched} url="/api/fallback" forceClient={isClientOnlyContext} />;
+```
+
+Heavy functions can be provided either as props (server-side) or context (client-side). When using the [Built Factories pattern](../built-factories/page.mdx), expensive operations can even run at build time with caching.
+
+## 3. Props-first, context-enhanced hooks
+
+**The pattern**: Create hooks that accept props and automatically layer context updates on top. This hides the complexity from consumers while enabling progressive enhancement.
+
+**Real-world example** from this codebase:
+
+```ts
+// useErrors hook - implements Props → Context Layering
+function useErrors(props?: { errors?: Error[] }) {
+  const context = useErrorsContext();
+
+  // Context errors override props errors (latest wins)
+  const errors = context?.errors || props?.errors;
+
+  return { errors };
+}
+
+// Usage in components
+function ErrorHandler({ errors }: { errors?: Error[] }) {
+  const { errors: effectiveErrors } = useErrors({ errors });
+
+  if (!effectiveErrors?.length) return null;
+  return <ErrorDisplay errors={effectiveErrors} />;
+}
+```
+
+**Another example** - the `useCode` hook:
+
+```ts
+function useCode(contentProps, opts) {
+  const context = useCodeHighlighterContextOptional();
+
+  // Context code overrides contentProps code when available
+  const effectiveCode = context?.code || contentProps.code || {};
+
+  // Context URL overrides contentProps URL
+  const effectiveUrl = context?.url || contentProps.url;
+
+  // ... rest of implementation
+}
+```
+
+**Benefits**:
+
+- **Server components** can pass data via props normally
+- **Client components** get enhanced data via context automatically
+- **Same API** works in both environments
+- **No mental overhead** for consumers—they just pass props
+
+**Component flexibility**: The same component can perform their async task as either a server or client component:
+
+```ts
+// Server component version (no client code needed)
+function ObjectHandler({ object }: { object: any }) {
+  return <SomeComponent object={object} />;
+}
+
+// Client component version (with context enhancement)
+'use client';
+function ObjectHandler({ object }: { object: any }) {
+  const { object: effectiveObject } = useObject({ object });
+  return <SomeComponent object={effectiveObject} />;
+}
+```
+
+Both preserve the same API shape and timing semantics.
+
+## 4. Lazy-load heavy functions
+
+**The goal**: Avoid shipping expensive functions to the client unless actually needed.
+
+**The strategy**:
+
+- Heavy functions are **imported conditionally**—if not imported, they're not bundled
+- Provide them via props (server-side) or context (client-side) only when needed
+- Keep the core component logic lightweight
+
+**Example**:
+
+```tsx
+// Three deployment modes for heavy functions (parsers, transformers, etc.)
+
+// 1. SERVER RENDERING: Import and pass directly as props (never reaches client bundle).
+// File: ServerPage.tsx (React Server Component)
+import 'server-only';
+
+import { expensiveParser, complexTransformer } from './heavyUtils';
+
+export function ServerRenderedFeature({ source }) {
+  return <DataFeature source={source} parser={expensiveParser} transform={complexTransformer} />;
+}
+
+// 2. CLIENT RENDERING: Provide lazily through a Provider that only loads after hydration.
+// File: HeavyFunctionsProvider.tsx
+('use client');
+import React, { useCallback, useState, useEffect } from 'react';
+
+const HeavyFunctionsContext = React.createContext(null);
+export function useHeavyFunctions() {
+  return React.useContext(HeavyFunctionsContext);
+}
+
+export function HeavyFunctionsProvider({ children, preload = false }) {
+  const [fns, setFns] = useState(null);
+
+  const ensureLoaded = useCallback(async () => {
+    if (!fns) {
+      const mod = await import('./heavyUtils'); // code-split boundary
+      setFns({ parser: mod.expensiveParser, transform: mod.complexTransformer });
+    }
+  }, [fns]);
+
+  // Optional eager load (e.g., user interacted or heuristic)
+  useEffect(() => {
+    if (preload) ensureLoaded();
+  }, [preload, ensureLoaded]);
+
+  return (
+    <HeavyFunctionsContext.Provider value={{ ...fns, ensureLoaded }}>
+      {children}
+    </HeavyFunctionsContext.Provider>
+  );
+}
+
+// Usage inside a client component
+function ClientFeature({ source }) {
+  const heavy = useHeavyFunctions();
+  // Trigger load only if user expands advanced panel, etc.
+  const onDemand = () => heavy?.ensureLoaded();
+  const parsed = heavy?.parser ? heavy.parser(source) : null; // fallback UI until ready
+  return <DataFeature source={source} parsed={parsed} onExpand={onDemand} />;
+}
+
+// 3. BUILD-TIME RENDERING (no runtime import):
+// In a build script or static generation step you run heavy logic once and serialize results.
+// File: build/generate-data.ts (executed at build time, not bundled for runtime)
+import { expensiveParser, complexTransformer } from '../src/heavyUtils';
+import fs from 'node:fs';
+const raw = fs.readFileSync('content.txt', 'utf8');
+const parsed = complexTransformer(expensiveParser(raw));
+fs.writeFileSync('dist/precomputed.json', JSON.stringify(parsed));
+
+// File: PrecomputedFeature.tsx (RSC or client) - ONLY loads JSON, not heavy functions.
+import precomputed from '../../dist/precomputed.json';
+export function PrecomputedFeature() {
+  return <DataFeature parsed={precomputed} />; // heavy functions never shipped
+}
+```
+
+**Tip - Works with Built Factories**: This build-time path composes directly with the [Built Factories pattern](../built-factories/page.mdx). Instead of hand‑writing a separate script you can let a factory call (`createX(import.meta.url, variants?, options?)`) produce and cache the heavy result via a `precompute` injection. Tooling (loader / build step) replaces the original call with one that includes `precompute: { ... }`, so runtime code:
+
+- Keeps the one-line factory contract (identity = `import.meta.url`)
+- Ships only the precomputed data object (no parser / transformer code)
+- Lets a server factory precompute rich metadata while a sibling client factory only receives the minimal externals map
+- Still supports progressive enhancement: props carry precomputed output early, context can re-load heavy functions later (client provider with dynamic `import()`) for live editing or re-parsing
+- Avoids dynamic `import()` entirely when live mutation isn't needed; add it back only in the client enhancement path
+
+If requirements change (need variants, extra metadata, live editing), you update the shared factory implementation—call sites and component APIs stay stable, and Props Context layering continues to deliver the upgraded client experience without breaking server renders.
+
+**Outcome**: Minimal initial bundle, rich functionality loads on-demand.
+
+---
+
+## Implementation Checklist
+
+When implementing Props → Context Layering:
+
+- **Create a merging hook** that accepts props and checks context
+- **Context values override props** (latest data wins)
+- **Handle undefined context gracefully** (server/client compatibility)
+- **Guard async operations** behind conditions
+- **Heavy functions via dynamic imports** + context providers
+- **Same component API** works in server and client environments
+- **Progressive enhancement** without breaking changes
+
+## Real-World Usage
+
+This pattern is used throughout the docs-infra system:
+
+- **[`useErrors`](../../hooks/use-errors/page.mdx)**: Server-side syntax errors → client-side runtime errors
+- **[`useCode`](../../hooks/use-code/page.mdx)**: Static code props → dynamic context code
+- **[`useDemo`](../../hooks/use-demo/page.mdx)**: Build-time demos → interactive client demos
+- **[`CodeHighlighter`](../../components/code-highlighter/page.mdx)**: Server highlighting → client enhancement
diff --git a/docs/app/layout.module.css b/docs/app/layout.module.css
new file mode 100644
index 000000000..0b3593047
--- /dev/null
+++ b/docs/app/layout.module.css
@@ -0,0 +1,105 @@
+.body {
+  font-family: var(--font-geist-sans);
+  margin: 0;
+  margin-bottom: 20px;
+  background: color(display-p3 0.995 0.988 0.996);
+  background: #fefcfe;
+}
+
+.container {
+  max-width: 792px;
+  margin: 0 auto;
+  padding: 0 20px 12px 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  background-color: color(display-p3 0.983 0.971 0.993);
+  background-color: #fbf7fe;
+  border-bottom: 1px solid color(display-p3 0.86 0.774 0.942);
+  border-bottom: 1px solid #e0c4f4;
+}
+
+.header a {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: color(display-p3 0.234 0.132 0.363);
+  color: #402060;
+  text-decoration: none;
+}
+
+.body code {
+  font-family: var(--font-geist-mono);
+  font-size: 14px;
+  background: color(display-p3 0.995 0.971 0.974);
+  background: #fff7f8;
+}
+
+.body code {
+  color: color(display-p3 0.728 0.211 0.311);
+  color: #ca244d;
+  text-decoration-color: color(display-p3 0.728 0.211 0.311);
+  text-decoration-color: #ca244d;
+}
+
+.body a:has(code) {
+  text-decoration-color: color(display-p3 0.728 0.211 0.311);
+  text-decoration-color: #ca244d;
+}
+
+.body a:visited code {
+  background: color(display-p3 0.966 0.983 0.964);
+  background: #f5fbf5;
+  color: color(display-p3 0.263 0.488 0.261);
+  color: #2a7e3b;
+}
+
+.body a:visited:has(code) {
+  text-decoration-color: color(display-p3 0.263 0.488 0.261);
+  text-decoration-color: #2a7e3b;
+}
+
+.body a {
+  color: color(display-p3 0.15 0.44 0.84);
+  color: #0d74ce;
+}
+
+.body a:visited {
+  color: color(display-p3 0.473 0.281 0.687);
+  color: #8145b5;
+}
+
+.body {
+  color: color(display-p3 0.128 0.122 0.147);
+  color: #211f26;
+}
+
+.body h1,
+.body h2,
+.body h3,
+.body h4,
+.body h5,
+.body h6 {
+  color: color(display-p3 0.473 0.281 0.687);
+  color: #8145b5;
+}
+
+.body h1 > a,
+.body h2 > a,
+.body h3 > a,
+.body h4 > a,
+.body h5 > a,
+.body h6 > a {
+  color: color(display-p3 0.473 0.281 0.687);
+  color: #8145b5;
+  text-decoration-color: color(display-p3 0.473 0.281 0.687);
+  text-decoration-color: #8145b5;
+}
+
+.body pre > code {
+  color: initial;
+  background: initial;
+}
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
new file mode 100644
index 000000000..fec2e5c06
--- /dev/null
+++ b/docs/app/layout.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import styles from './layout.module.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'MUI Infra Documentation',
+  description: 'How to use the MUI Infra packages',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} ${styles.body}`}>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/docs/components/Blockquote/Blockquote.module.css b/docs/components/Blockquote/Blockquote.module.css
new file mode 100644
index 000000000..b8f5537d7
--- /dev/null
+++ b/docs/components/Blockquote/Blockquote.module.css
@@ -0,0 +1,67 @@
+.root {
+  color: #211f26;
+  border-left: 4px solid #d0cdd7;
+  padding: 8px 16px;
+  margin: 0 0 16px 0;
+}
+
+.root p {
+  margin: 0;
+}
+
+.root .title {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.title > svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: -2px;
+}
+
+.root[data-callout-type='note'] {
+  border-left-color: color(display-p3 0.247 0.556 0.969);
+  border-left-color: #0090ff;
+}
+.root[data-callout-type='note'] .title {
+  color: color(display-p3 0.15 0.44 0.84);
+  color: #0d74ce;
+}
+
+.root[data-callout-type='tip'] {
+  border-left-color: color(display-p3 0.38 0.647 0.378);
+  border-left-color: #46a758;
+}
+.root[data-callout-type='tip'] .title {
+  color: color(display-p3 0.263 0.488 0.261);
+  color: #2a7e3b;
+}
+
+.root[data-callout-type='important'] {
+  border-left-color: color(display-p3 0.523 0.318 0.751);
+  border-left-color: #8e4ec6;
+}
+.root[data-callout-type='important'] .title {
+  color: color(display-p3 0.473 0.281 0.687);
+  color: #8145b5;
+}
+
+.root[data-callout-type='warning'] {
+  border-left-color: color(display-p3 1 0.92 0.22);
+  border-left-color: #ffe629;
+}
+.root[data-callout-type='warning'] .title {
+  color: color(display-p3 0.6 0.44 0);
+  color: #9e6c00;
+}
+
+.root[data-callout-type='caution'] {
+  border-left-color: color(display-p3 0.831 0.345 0.231);
+  border-left-color: #e54d2e;
+}
+.root[data-callout-type='caution'] .title {
+  color: color(display-p3 0.755 0.259 0.152);
+  color: #d13415;
+}
diff --git a/docs/components/Blockquote/Blockquote.tsx b/docs/components/Blockquote/Blockquote.tsx
new file mode 100644
index 000000000..830eb0215
--- /dev/null
+++ b/docs/components/Blockquote/Blockquote.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import styles from './Blockquote.module.css';
+
+type BlockquoteProps = {
+  children: React.ReactNode;
+  [key: string]: unknown; // Allow additional props
+};
+
+const svg: Record<string, React.ReactNode> = {
+  note: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM6.93 3.75c.13-.27.42-.75 1.07-.75s.94.48 1.07.75c.22.45.35 1.15.35 2.25s-.13 1.8-.35 2.25c-.13.27-.42.75-1.07.75s-.94-.48-1.07-.75C6.71 7.8 6.58 7.1 6.58 6s.13-1.8.35-2.25ZM8 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  tip: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12.25a.25.25 0 0 1 .25-.25h4a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-4a.25.25 0 0 1-.25-.25v-.5ZM6 15.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-3.5a.25.25 0 0 1-.25-.25v-.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  important: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.5 1.5 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25V1.75Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75ZM8 3.5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 8 3.5ZM8 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  warning: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575L6.457 1.047ZM8 5a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 8 5Zm1 5.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  caution: (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53L4.47.22Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5H5.31ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+};
+
+export default function Blockquote(props: BlockquoteProps) {
+  const { children, ...otherProps } = props;
+
+  let calloutType =
+    typeof props['data-callout-type'] === 'string' ? props['data-callout-type'] : undefined;
+  const icon = calloutType && svg[calloutType];
+
+  if (calloutType) {
+    calloutType = `${calloutType.charAt(0).toUpperCase()}${calloutType.slice(1)}`;
+  }
+
+  return (
+    <blockquote {...otherProps} className={styles.root}>
+      {calloutType && (
+        <p className={styles.title}>
+          {icon}
+          {calloutType}
+        </p>
+      )}
+      {children}
+    </blockquote>
+  );
+}
diff --git a/docs/components/Blockquote/index.ts b/docs/components/Blockquote/index.ts
new file mode 100644
index 000000000..f5825f9d8
--- /dev/null
+++ b/docs/components/Blockquote/index.ts
@@ -0,0 +1 @@
+export { default as Blockquote } from './Blockquote';
diff --git a/docs/components/Checkbox/index.module.css b/docs/components/Checkbox/index.module.css
new file mode 100644
index 000000000..784751c84
--- /dev/null
+++ b/docs/components/Checkbox/index.module.css
@@ -0,0 +1,61 @@
+.checkbox {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.checkbox input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.checkbox .checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #eee;
+  border-radius: 4px;
+  border: 2px solid #ddd;
+  transition: all 0.2s ease;
+}
+
+.checkbox input:checked + .checkmark {
+  background-color: #9a5cd0;
+  border-color: #9a5cd0;
+}
+
+.checkbox .checkmark:after {
+  content: '';
+  position: absolute;
+  display: none;
+}
+
+.checkbox input:checked + .checkmark:after {
+  display: block;
+}
+
+.checkbox .checkmark:after {
+  left: 7px;
+  top: 3px;
+  width: 4px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/docs/components/Checkbox/index.tsx b/docs/components/Checkbox/index.tsx
new file mode 100644
index 000000000..722154fb4
--- /dev/null
+++ b/docs/components/Checkbox/index.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import styles from './index.module.css';
+
+type CheckboxProps = {
+  defaultChecked: boolean;
+  name?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+// This component mainly serves as a mock for a Checkbox component used in demos.
+
+export function Checkbox({ defaultChecked, name = 'checkbox', className, style }: CheckboxProps) {
+  const [checked, setChecked] = React.useState(defaultChecked);
+  const onChange = React.useCallback(() => {
+    setChecked((prev) => !prev);
+  }, []);
+
+  return (
+    <label className={styles.checkbox} htmlFor={`${name}-input`}>
+      <input
+        id={`${name}-input`}
+        type="checkbox"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+        style={style}
+      />
+      <span className={[styles.checkmark, className].join(' ')}></span>
+      <span className={styles['sr-only']}>Checkbox</span>
+    </label>
+  );
+}
diff --git a/docs/components/Code/index.ts b/docs/components/Code/index.ts
new file mode 100644
index 000000000..41abdcbb0
--- /dev/null
+++ b/docs/components/Code/index.ts
@@ -0,0 +1,2 @@
+// dog-food the demo content
+export * from '../../app/docs-infra/components/code-highlighter/demos/Code';
diff --git a/docs/components/CodeContent/index.ts b/docs/components/CodeContent/index.ts
new file mode 100644
index 000000000..bb68605f9
--- /dev/null
+++ b/docs/components/CodeContent/index.ts
@@ -0,0 +1,2 @@
+// dog-food the demo content
+export * from '../../app/docs-infra/components/code-highlighter/demos/CodeContent';
diff --git a/docs/components/CopyButton/CopyButton.module.css b/docs/components/CopyButton/CopyButton.module.css
new file mode 100644
index 000000000..14c50de17
--- /dev/null
+++ b/docs/components/CopyButton/CopyButton.module.css
@@ -0,0 +1,25 @@
+.copyButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: 12px;
+  color: #0400119c;
+  transition: background-color 0.2s ease;
+}
+
+.copyButton:hover:not(:disabled) {
+  background-color: #30004010;
+}
+
+.copyButton:active:not(:disabled) {
+  background-color: #20003820;
+}
+
+.copyButton:disabled {
+  cursor: default;
+  color: #4caf50;
+}
diff --git a/docs/components/CopyButton/CopyButton.tsx b/docs/components/CopyButton/CopyButton.tsx
new file mode 100644
index 000000000..5514a2738
--- /dev/null
+++ b/docs/components/CopyButton/CopyButton.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styles from './CopyButton.module.css';
+
+type CopyButtonProps = {
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
+  copyDisabled?: boolean;
+};
+
+export function CopyButton({ copy, copyDisabled }: CopyButtonProps) {
+  return (
+    <button
+      className={styles.copyButton}
+      onClick={copy}
+      disabled={copyDisabled}
+      type="button"
+      aria-label={copyDisabled ? 'Copied' : 'Copy code'}
+    >
+      {copyDisabled ? (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="currentColor" />
+        </svg>
+      ) : (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/docs/components/CopyButton/index.ts b/docs/components/CopyButton/index.ts
new file mode 100644
index 000000000..367e65cb2
--- /dev/null
+++ b/docs/components/CopyButton/index.ts
@@ -0,0 +1 @@
+export * from './CopyButton';
diff --git a/docs/components/DemoContent/index.ts b/docs/components/DemoContent/index.ts
new file mode 100644
index 000000000..d775afea9
--- /dev/null
+++ b/docs/components/DemoContent/index.ts
@@ -0,0 +1,2 @@
+// dog-food the demo content
+export * from '../../app/docs-infra/components/code-highlighter/demos/DemoContent';
diff --git a/docs/components/FileConventions/FileConventions.tsx b/docs/components/FileConventions/FileConventions.tsx
new file mode 100644
index 000000000..f78ac039a
--- /dev/null
+++ b/docs/components/FileConventions/FileConventions.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { getFileConventions } from '@mui/internal-docs-infra/pipeline/getFileConventions';
+import Link from 'next/link';
+
+export async function FileConventions() {
+  const conventions = await getFileConventions();
+
+  return (
+    <ul>
+      {conventions.map((convention, i) => (
+        <li key={i}>
+          <code>{convention.rule}</code> -{' '}
+          <Link href={`/functions/${convention.loader}`}>{convention.loader}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/docs/components/FileConventions/index.ts b/docs/components/FileConventions/index.ts
new file mode 100644
index 000000000..00b819f8c
--- /dev/null
+++ b/docs/components/FileConventions/index.ts
@@ -0,0 +1 @@
+export * from './FileConventions';
diff --git a/docs/components/LabeledSwitch/LabeledSwitch.module.css b/docs/components/LabeledSwitch/LabeledSwitch.module.css
new file mode 100644
index 000000000..f5c2bb047
--- /dev/null
+++ b/docs/components/LabeledSwitch/LabeledSwitch.module.css
@@ -0,0 +1,67 @@
+.root {
+  display: flex;
+  width: 88px;
+  height: 28px;
+}
+
+.indicator {
+  position: absolute;
+  height: 28px;
+  width: 44px;
+  background-color: color(display-p3 0.57 0.373 0.791);
+  background-color: #9a5cd0;
+  z-index: -100;
+  border-radius: 12px 0 0 12px;
+  transition: all 0.2s ease;
+}
+
+.indicator.checked {
+  transform: translateX(45px);
+  border-radius: 0 12px 12px 0;
+}
+
+.segment {
+  flex: 1;
+  padding: 0;
+  font-size: 1rem;
+  line-height: 1;
+  border: 1px solid #10003332;
+  border: 1px solid color(display-p3 0.067 0.008 0.184 / 0.197);
+  background-color: transparent;
+  color: #0400119c;
+  color: color(display-p3 0.016 0 0.059 / 0.612);
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
+}
+
+.segment + .segment {
+  margin-left: -1px;
+  border-left: none;
+}
+
+.segment:nth-child(2) {
+  border-radius: 12px 0 0 12px;
+}
+.segment:nth-child(2).active {
+  border-radius: 12px 0 0 12px;
+}
+.segment:last-child {
+  border-radius: 0 12px 12px 0;
+}
+
+.segment.active {
+  background-color: transparent;
+  border-color: color(display-p3 0.57 0.373 0.791);
+  border-color: #9a5cd0;
+  color: #fff;
+}
+
+.segment:hover {
+  background-color: #30004010;
+  background-color: color(display-p3 0.129 0.008 0.255 / 0.063);
+  border-color: #30004010;
+  border-color: color(display-p3 0.129 0.008 0.255 / 0.063);
+}
diff --git a/docs/components/LabeledSwitch/LabeledSwitch.tsx b/docs/components/LabeledSwitch/LabeledSwitch.tsx
new file mode 100644
index 000000000..b5e6a47ec
--- /dev/null
+++ b/docs/components/LabeledSwitch/LabeledSwitch.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Toggle } from '@base-ui-components/react/toggle';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import styles from './LabeledSwitch.module.css';
+
+/**
+ * A two-option switch with labels.
+ * @param checked the currently selected value
+ * @param onCheckedChange called when the value changes
+ * @param labels to show for each option, e.g. { false: 'TS', true: 'JS' }
+ * @param defaultChecked the initial value when the component mounts
+ */
+export function LabeledSwitch({
+  checked,
+  onCheckedChange,
+  labels,
+  defaultChecked,
+}: {
+  checked: boolean | undefined;
+  onCheckedChange: (checked: boolean) => void;
+  labels: { false: string; true: string };
+  defaultChecked?: boolean;
+}) {
+  const handleChange = React.useCallback(
+    (value: string[]) => {
+      if (value.length === 0) {
+        return;
+      }
+
+      if (value.length === 1) {
+        const newChecked = value[0] === 'true';
+        onCheckedChange(newChecked);
+      } else {
+        const newChecked = !checked;
+        onCheckedChange(newChecked);
+      }
+    },
+    [checked, onCheckedChange],
+  );
+
+  return (
+    <ToggleGroup
+      value={
+        checked !== undefined ? [checked ? 'true' : 'false'] : [defaultChecked ? 'true' : 'false']
+      }
+      onValueChange={handleChange}
+      className={styles.root}
+    >
+      <span className={`${styles.indicator} ${checked ? styles.checked : ''}`} />
+      <Toggle
+        aria-label={labels.false}
+        className={`${styles.segment} ${!checked ? styles.active : ''}`}
+        value="false"
+      >
+        {labels.false}
+      </Toggle>
+      <Toggle
+        aria-label={labels.true}
+        value="true"
+        className={`${styles.segment} ${checked ? styles.active : ''}`}
+      >
+        {labels.true}
+      </Toggle>
+    </ToggleGroup>
+  );
+}
diff --git a/docs/components/LabeledSwitch/index.ts b/docs/components/LabeledSwitch/index.ts
new file mode 100644
index 000000000..b4442fc70
--- /dev/null
+++ b/docs/components/LabeledSwitch/index.ts
@@ -0,0 +1 @@
+export * from './LabeledSwitch';
diff --git a/docs/components/Pre/Pre.module.css b/docs/components/Pre/Pre.module.css
new file mode 100644
index 000000000..2c4c6dfc9
--- /dev/null
+++ b/docs/components/Pre/Pre.module.css
@@ -0,0 +1,13 @@
+.root {
+  font-family: var(--font-geist-mono);
+  font-size: 13px;
+  border: 1px solid #d0cdd7;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.root pre {
+  overflow-x: auto;
+  padding: 8px;
+  margin: 0;
+}
diff --git a/docs/components/Pre/Pre.tsx b/docs/components/Pre/Pre.tsx
new file mode 100644
index 000000000..b8fecf583
--- /dev/null
+++ b/docs/components/Pre/Pre.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter';
+import type { CodeHighlighterProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
+import { CodeContent } from '../CodeContent';
+
+type PreProps = {
+  'data-precompute'?: string;
+};
+
+export function Pre(props: PreProps) {
+  if (!props['data-precompute']) {
+    return (
+      <div>
+        Expected precompute data to be provided. Ensure that transformHtmlCode rehype plugin is
+        used.
+      </div>
+    );
+  }
+
+  const precompute = JSON.parse(
+    props['data-precompute'],
+  ) as CodeHighlighterProps<object>['precompute'];
+
+  return <CodeHighlighter url="file://index.js" precompute={precompute} Content={CodeContent} />;
+}
diff --git a/docs/components/Pre/index.ts b/docs/components/Pre/index.ts
new file mode 100644
index 000000000..876a84b3e
--- /dev/null
+++ b/docs/components/Pre/index.ts
@@ -0,0 +1 @@
+export * from './Pre';
diff --git a/docs/components/Select/Select.module.css b/docs/components/Select/Select.module.css
new file mode 100644
index 000000000..a16920154
--- /dev/null
+++ b/docs/components/Select/Select.module.css
@@ -0,0 +1,217 @@
+.Select {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 1.75rem;
+  padding-left: 12px;
+  padding-right: 10px;
+  margin: 0;
+  outline: 0;
+  border: 1px solid #d0cdd7;
+  border-radius: 12px;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #65636d;
+  cursor: default;
+  user-select: none;
+  min-width: 140px;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: #f2eff3;
+    }
+  }
+
+  &:active {
+    background-color: #f2eff3;
+  }
+
+  &[data-popup-open] {
+    background-color: #f2eff3;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color(display-p3 0.523 0.318 0.751);
+    outline: 2px solid #8e4ec6;
+    outline-offset: -1px;
+  }
+}
+
+.Select[aria-disabled='true'] {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+.SelectIcon {
+  display: flex;
+}
+
+.Popup {
+  box-sizing: border-box;
+  padding-block: 0.25rem;
+  border-radius: 0.375rem;
+  background-color: canvas;
+  color: #65636d;
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 150ms,
+    opacity 150ms;
+  overflow-y: auto;
+  max-height: var(--available-height);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  &[data-side='none'] {
+    transition: none;
+    transform: none;
+    opacity: 1;
+  }
+
+  @media (prefers-color-scheme: light) {
+    outline: 1px solid #d0cdd7;
+    box-shadow:
+      0 10px 15px -3px #d0cdd7,
+      0 4px 6px -4px #d0cdd7;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    outline: 1px solid var(--color-gray-300);
+    outline-offset: -1px;
+  }
+}
+
+.Arrow {
+  display: flex;
+
+  &[data-side='top'] {
+    bottom: -8px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -8px;
+    rotate: 0deg;
+  }
+
+  &[data-side='left'] {
+    right: -13px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -13px;
+    rotate: -90deg;
+  }
+}
+
+.ArrowFill {
+  fill: canvas;
+}
+
+.ArrowOuterStroke {
+  @media (prefers-color-scheme: light) {
+    fill: #d0cdd7;
+  }
+}
+
+.ArrowInnerStroke {
+  @media (prefers-color-scheme: dark) {
+    fill: #d0cdd7;
+  }
+}
+
+.Item {
+  box-sizing: border-box;
+  outline: 0;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  padding-block: 0.5rem;
+  padding-left: 0.625rem;
+  padding-right: 1rem;
+  min-width: var(--anchor-width);
+  display: grid;
+  gap: 0.5rem;
+  align-items: center;
+  grid-template-columns: 0.75rem 1fr;
+  cursor: default;
+  user-select: none;
+  scroll-margin-block: 1rem;
+
+  [data-side='none'] & {
+    font-size: 1rem;
+    padding-right: 3rem;
+    min-width: calc(var(--anchor-width) + 1rem);
+  }
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+  }
+
+  &[data-highlighted]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    border-radius: 12px;
+    background-color: #f2eff3;
+  }
+}
+
+.ItemIndicator {
+  grid-column-start: 1;
+}
+
+.ItemIndicatorIcon {
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.ItemText {
+  grid-column-start: 2;
+}
+
+.ScrollArrow {
+  width: 100%;
+  background: canvas;
+  z-index: 1;
+  text-align: center;
+  cursor: default;
+  border-radius: 0.375rem;
+  height: 1rem;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+  }
+
+  &[data-direction='up'] {
+    &::before {
+      top: -100%;
+    }
+  }
+
+  &[data-direction='down'] {
+    bottom: 0;
+
+    &::before {
+      bottom: -100%;
+    }
+  }
+}
diff --git a/docs/components/Select/Select.tsx b/docs/components/Select/Select.tsx
new file mode 100644
index 000000000..9927b4b84
--- /dev/null
+++ b/docs/components/Select/Select.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Select as SelectParts } from '@base-ui-components/react/select';
+import styles from './Select.module.css';
+
+export interface Props {
+  items: { label: string; value: string }[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+}
+
+export function Select({ items, value, onValueChange, disabled }: Props) {
+  return (
+    <SelectParts.Root items={items} value={value} onValueChange={onValueChange} disabled={disabled}>
+      <SelectParts.Trigger className={styles.Select}>
+        <SelectParts.Value />
+        <SelectParts.Icon className={styles.SelectIcon}>
+          <ChevronUpDownIcon />
+        </SelectParts.Icon>
+      </SelectParts.Trigger>
+      <SelectParts.Portal>
+        <SelectParts.Positioner className={styles.Positioner} sideOffset={8}>
+          <SelectParts.ScrollUpArrow className={styles.ScrollArrow} />
+          <SelectParts.Popup className={styles.Popup}>
+            {items.map(({ label, value: itemValue }) => (
+              <SelectParts.Item key={label} value={itemValue} className={styles.Item}>
+                <SelectParts.ItemIndicator className={styles.ItemIndicator}>
+                  <CheckIcon className={styles.ItemIndicatorIcon} />
+                </SelectParts.ItemIndicator>
+                <SelectParts.ItemText className={styles.ItemText}>{label}</SelectParts.ItemText>
+              </SelectParts.Item>
+            ))}
+          </SelectParts.Popup>
+          <SelectParts.ScrollDownArrow className={styles.ScrollArrow} />
+        </SelectParts.Positioner>
+      </SelectParts.Portal>
+    </SelectParts.Root>
+  );
+}
+
+function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      {...props}
+    >
+      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
+      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+    </svg>
+  );
+}
+
+function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
+      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    </svg>
+  );
+}
diff --git a/docs/components/Select/index.ts b/docs/components/Select/index.ts
new file mode 100644
index 000000000..7868ecbae
--- /dev/null
+++ b/docs/components/Select/index.ts
@@ -0,0 +1 @@
+export * from './Select';
diff --git a/docs/components/Tabs/Tabs.module.css b/docs/components/Tabs/Tabs.module.css
new file mode 100644
index 000000000..f0241d28d
--- /dev/null
+++ b/docs/components/Tabs/Tabs.module.css
@@ -0,0 +1,113 @@
+.tabsRoot {
+  display: flex;
+}
+
+.tabsList {
+  display: flex;
+  gap: 0px;
+  overflow-x: auto;
+  max-width: 100%;
+  padding-top: 14px;
+}
+
+.name {
+  display: flex;
+  align-items: center;
+  height: 48px;
+}
+
+.name:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.name span {
+  color: #65636d;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-family: var(--font-geist-mono);
+}
+
+.tab {
+  padding: 10px 8px 8px 8px;
+  border: 1px solid #d0cdd7;
+  border-bottom: none;
+  background-color: transparent;
+  color: #65636d;
+  cursor: pointer;
+  font-size: 12px;
+  font-family: var(--font-geist-mono);
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+  margin-left: 0;
+  margin-right: 0;
+  white-space: nowrap;
+}
+
+.tab:hover:not(.tabSelected) {
+  background-color: #30004010;
+}
+
+.tab:active:not(.tabSelected) {
+  background-color: #20003820;
+}
+
+.tab[aria-disabled='true'] {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+.tabSelected {
+  border-radius: 12px 12px 0 0;
+  background-color: color(display-p3 0.523 0.318 0.751);
+  background-color: #8e4ec6;
+  border-color: color(display-p3 0.523 0.318 0.751);
+  border-color: #8e4ec6;
+  color: #ffffff;
+  z-index: 2;
+}
+
+.tabSelected:active {
+  border-radius: 16px 16px 0 0;
+}
+
+.tabFirst {
+  border-radius: 12px 0 0 0;
+}
+
+.tabLast {
+  border-radius: 0 12px 0 0;
+}
+
+.tabMiddle {
+  border-radius: 0;
+}
+
+.tabNextSelected {
+  padding: 10px 20px 8px 8px;
+  margin-right: -12px;
+}
+
+.tabPrevSelected {
+  padding: 10px 8px 8px 20px;
+  margin-left: -12px;
+}
+
+.tabNoBorderRight {
+  border-right: 1px solid transparent;
+}
+
+.tabNoBorderRight:not(.tabNextSelected) {
+  margin-right: -1px;
+}
+
+.tabWithBorderRight {
+  border-right: 1px solid #d0cdd7;
+}
+
+.tabSelected.tabWithBorderRight {
+  border-right: 1px solid #8e4ec6;
+  border-color: color(display-p3 0.523 0.318 0.751);
+  border-color: #8e4ec6;
+}
diff --git a/docs/components/Tabs/Tabs.tsx b/docs/components/Tabs/Tabs.tsx
new file mode 100644
index 000000000..a6f5dadf9
--- /dev/null
+++ b/docs/components/Tabs/Tabs.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Tabs as TabsParts } from '@base-ui-components/react/tabs';
+import styles from './Tabs.module.css';
+
+export interface Tab {
+  name: string;
+  id: string;
+}
+
+export interface TabsProps {
+  tabs: Tab[];
+  selectedTabId?: string;
+  onTabSelect: (tabId: string) => void;
+  disabled?: boolean;
+}
+
+export function Tabs({ tabs, selectedTabId, onTabSelect, disabled }: TabsProps) {
+  const clickName = React.useCallback(() => {
+    onTabSelect(tabs[0].id);
+  }, [onTabSelect, tabs]);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onTabSelect(tabs[0].id);
+      }
+    },
+    [onTabSelect, tabs],
+  );
+
+  if (tabs.length <= 1) {
+    return tabs.length === 1 ? (
+      <div
+        className={styles.name}
+        onClick={clickName}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+      >
+        <span>{tabs[0].name}</span>
+      </div>
+    ) : null;
+  }
+
+  return (
+    <TabsParts.Root
+      className={styles.tabsRoot}
+      value={selectedTabId || tabs[0]?.id}
+      onValueChange={onTabSelect}
+      aria-disabled={disabled}
+    >
+      <TabsParts.List className={styles.tabsList}>
+        {tabs.map((tab, index) => {
+          const isSelected = selectedTabId ? tab.id === selectedTabId : index === 0;
+          const isFirst = index === 0;
+          const isLast = index === tabs.length - 1;
+          const nextTabSelected = index < tabs.length - 1 && tabs[index + 1].id === selectedTabId;
+          const prevTabSelected = index > 0 && tabs[index - 1].id === selectedTabId;
+
+          const tabClasses = [
+            styles.tab,
+            isSelected && styles.tabSelected,
+            !isSelected && isFirst && styles.tabFirst,
+            !isSelected && isLast && styles.tabLast,
+            !isSelected && !isFirst && !isLast && styles.tabMiddle,
+            nextTabSelected && styles.tabNextSelected,
+            prevTabSelected && styles.tabPrevSelected,
+            isLast || isSelected ? styles.tabWithBorderRight : styles.tabNoBorderRight,
+          ]
+            .filter(Boolean)
+            .join(' ');
+
+          return (
+            <TabsParts.Tab key={index} className={tabClasses} disabled={disabled} value={tab.id}>
+              {tab.name}
+            </TabsParts.Tab>
+          );
+        })}
+      </TabsParts.List>
+    </TabsParts.Root>
+  );
+}
diff --git a/docs/components/Tabs/index.ts b/docs/components/Tabs/index.ts
new file mode 100644
index 000000000..d87151ff6
--- /dev/null
+++ b/docs/components/Tabs/index.ts
@@ -0,0 +1 @@
+export { Tabs, type Tab, type TabsProps } from './Tabs';
diff --git a/docs/components/index.ts b/docs/components/index.ts
new file mode 100644
index 000000000..d87151ff6
--- /dev/null
+++ b/docs/components/index.ts
@@ -0,0 +1 @@
+export { Tabs, type Tab, type TabsProps } from './Tabs';
diff --git a/docs/functions/createDemo/index.ts b/docs/functions/createDemo/index.ts
new file mode 100644
index 000000000..988a50dea
--- /dev/null
+++ b/docs/functions/createDemo/index.ts
@@ -0,0 +1,2 @@
+// dog-food the demo content
+export * from '../../app/docs-infra/components/code-highlighter/demos/createDemo';
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
new file mode 100644
index 000000000..677af8091
--- /dev/null
+++ b/docs/mdx-components.tsx
@@ -0,0 +1,11 @@
+import type { MDXComponents } from 'mdx/types';
+import Blockquote from './components/Blockquote/Blockquote';
+import { Pre } from './components/Pre';
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    blockquote: Blockquote,
+    pre: Pre,
+  };
+}
diff --git a/docs/next.config.mjs b/docs/next.config.mjs
new file mode 100644
index 000000000..4cc6bdd82
--- /dev/null
+++ b/docs/next.config.mjs
@@ -0,0 +1,33 @@
+import createMDX from '@next/mdx';
+import { withDocsInfra, getDocsInfraMdxOptions } from '@mui/internal-docs-infra/withDocsInfra';
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+// Create MDX with docs-infra configuration
+const withMDX = createMDX({
+  options: getDocsInfraMdxOptions({
+    additionalRemarkPlugins: [],
+    additionalRehypePlugins: [],
+  }),
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your custom configuration here
+  // The withDocsInfra plugin will add the necessary docs infrastructure setup
+};
+
+export default withBundleAnalyzer(
+  withDocsInfra({
+    // Add demo-* patterns specific to this docs site
+    additionalDemoPatterns: {
+      // Note: The demo-* pattern below is specific to our internal docs structure
+      // where we create "demos of demos". This is not a typical use case.
+      index: ['./app/**/demos/*/demo-*/index.ts'],
+      client: ['./app/**/demos/*/demo-*/client.ts'],
+    },
+  })(withMDX(nextConfig)),
+);
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 000000000..776bf047f
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@mui/internal-infra-docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "build-exp": "next build --turbopack",
+    "start": "serve ./out"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.1",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@mui/internal-docs-infra": "workspace:^",
+    "@next/mdx": "^15.3.4",
+    "@types/mdx": "^2.0.13",
+    "next": "v15.5.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-runner": "^1.0.5",
+    "remark-gfm": "^4.0.1",
+    "server-only": "^0.0.1",
+    "use-editable": "^2.3.3",
+    "vscode-oniguruma": "^2.0.1"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^15.5.2",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@wooorm/starry-night": "^3.8.0",
+    "serve": "^14.2.5",
+    "typescript": "^5"
+  }
+}
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
new file mode 100644
index 000000000..6b1070751
--- /dev/null
+++ b/docs/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fa63843b8..b947239c9 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -2,6 +2,7 @@ import { defineConfig } from 'eslint/config';
 import {
   createBaseConfig,
   createTestConfig,
+  createDocsConfig,
   EXTENSION_TEST_FILE,
   EXTENSION_TS,
 } from '@mui/internal-code-infra/eslint';
@@ -42,6 +43,20 @@ export default /** @type {import('eslint').Linter.Config[]} */ (
       ],
       extends: createTestConfig(),
     },
+    {
+      files: ['docs/**/*'],
+      extends: createDocsConfig(),
+      settings: {
+        'import/resolver': {
+          typescript: {
+            project: ['docs/tsconfig.json'],
+          },
+        },
+      },
+      rules: {
+        '@next/next/no-img-element': 'off',
+      },
+    },
     {
       files: [`apps/**/*${EXTENSION_TS}`],
       rules: {
diff --git a/package.json b/package.json
index 890f1a334..7716d4b0f 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,9 @@
     "size:snapshot": "pnpm -F ./test/bundle-size check",
     "size:why": "pnpm size:snapshot --analyze",
     "clean": "pnpm -r exec rm -rf build",
-    "docs:build": "pnpm -F \"./packages/docs-infra\" run build",
-    "docs:test": "pnpm -F \"./packages/docs-infra\" run test"
+    "docs:dev": "pnpm -F \"./docs\" run dev",
+    "docs:build": "pnpm -F \"./docs\" run build",
+    "docs:start": "pnpm -F \"./docs\" run start"
   },
   "pnpm": {
     "packageExtensions": {
diff --git a/packages/code-infra/README.md b/packages/code-infra/README.md
index c5d4bdd80..252bfb954 100644
--- a/packages/code-infra/README.md
+++ b/packages/code-infra/README.md
@@ -2,6 +2,14 @@
 
 Scripts and configs to be used across MUI repos.
 
+## Documentation
+
+This is stored in the `docs` top-level directory.
+
+[Read in Markdown](../../docs/app/code-infra/page.mdx)
+
+[Read in Browser](https://infra.mui.com/code-infra)
+
 ## Publishing packages
 
 1. Go to the publish action -
diff --git a/packages/code-infra/src/eslint/docsConfig.mjs b/packages/code-infra/src/eslint/docsConfig.mjs
index 6144cc16d..bc933b3fb 100644
--- a/packages/code-infra/src/eslint/docsConfig.mjs
+++ b/packages/code-infra/src/eslint/docsConfig.mjs
@@ -11,6 +11,7 @@ export function createDocsConfig() {
         rootDir: 'docs',
       },
     },
+    files: ['**/*.js', '**/*.mjs', '**/*.jsx', '**/*.ts', '**/*.tsx'],
     rules: {
       'compat/compat': 'off',
       'jsx-a11y/anchor-is-valid': 'off',
diff --git a/packages/docs-infra/README.md b/packages/docs-infra/README.md
index 66c3188f1..455f7700a 100644
--- a/packages/docs-infra/README.md
+++ b/packages/docs-infra/README.md
@@ -4,6 +4,7 @@ This package hosts the tools that help create the documentation.
 
 ## Documentation
 
-This is stored in the `docs` directory.
+This is stored in the `docs` top-level directory.
 
-[Read More](../../docs/app/docs-infra/page.mdx)
+[Read in Markdown](../../docs/app/docs-infra/page.mdx)
+[Read in Browser](https://infra.mui.com/docs-infra)
diff --git a/packages/docs-infra/package.json b/packages/docs-infra/package.json
index f08c50b3a..ec7464609 100644
--- a/packages/docs-infra/package.json
+++ b/packages/docs-infra/package.json
@@ -22,6 +22,10 @@
     "./usePreference": "./src/usePreference/index.ts",
     "./useUrlHashState": "./src/useUrlHashState/index.ts",
     "./withDocsInfra": "./src/withDocsInfra/index.ts",
+    "./pipeline/getFileConventions": "./src/pipeline/getFileConventions/index.ts",
+    "./pipeline/transformMarkdownBlockquoteCallouts": "./src/pipeline/transformMarkdownBlockquoteCallouts/index.ts",
+    "./pipeline/transformMarkdownDemoLinks": "./src/pipeline/transformMarkdownDemoLinks/index.ts",
+    "./pipeline/transformMarkdownRelativePaths": "./src/pipeline/transformMarkdownRelativePaths/index.ts",
     "./pipeline/hastUtils": "./src/pipeline/hastUtils/index.ts",
     "./pipeline/loadCodeVariant": "./src/pipeline/loadCodeVariant/index.ts",
     "./pipeline/loaderUtils": "./src/pipeline/loaderUtils/index.ts",
@@ -56,7 +60,7 @@
     "release": "pnpm build && pnpm publish --no-git-checks",
     "test": "pnpm -w test --project @mui/internal-docs-infra",
     "test:watch": "pnpm -w test:watch --project @mui/internal-docs-infra",
-    "test:coverage": "pnpm -w test --project @mui/internal-docs-infra --coverage --coverage.include=packages/docs-infra --coverage.exclude=packages/docs-infra/build --coverage.exclude=packages/docs-infra/scripts",
+    "test:coverage": "pnpm -w test --project @mui/internal-docs-infra --coverage --coverage.include=packages/docs-infra --coverage.exclude=packages/docs-infra/docs --coverage.exclude=packages/docs-infra/build --coverage.exclude=packages/docs-infra/scripts",
     "typescript": "tsc -p tsconfig.json"
   },
   "dependencies": {
diff --git a/packages/docs-infra/src/pipeline/getFileConventions/fileConventions.ts b/packages/docs-infra/src/pipeline/getFileConventions/fileConventions.ts
new file mode 100644
index 000000000..9bdcb6c68
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/getFileConventions/fileConventions.ts
@@ -0,0 +1,3 @@
+export const fileConventions = [
+  { rule: './app/**/demos/*/index.ts', loader: 'loadPrecomputedCodeHighlighter' },
+];
diff --git a/packages/docs-infra/src/pipeline/getFileConventions/getFileConventions.ts b/packages/docs-infra/src/pipeline/getFileConventions/getFileConventions.ts
new file mode 100644
index 000000000..3c6a98831
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/getFileConventions/getFileConventions.ts
@@ -0,0 +1,5 @@
+import { fileConventions } from './fileConventions';
+
+export async function getFileConventions() {
+  return fileConventions; // TODO: Parse the next.config.js file to get convention overrides.
+}
diff --git a/packages/docs-infra/src/pipeline/getFileConventions/index.ts b/packages/docs-infra/src/pipeline/getFileConventions/index.ts
new file mode 100644
index 000000000..3bef9febc
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/getFileConventions/index.ts
@@ -0,0 +1 @@
+export * from './getFileConventions';
diff --git a/packages/docs-infra/src/pipeline/loadCodeVariant/calculateMainFilePath.ts b/packages/docs-infra/src/pipeline/loadCodeVariant/calculateMainFilePath.ts
index 477fdd220..4e121b2e3 100644
--- a/packages/docs-infra/src/pipeline/loadCodeVariant/calculateMainFilePath.ts
+++ b/packages/docs-infra/src/pipeline/loadCodeVariant/calculateMainFilePath.ts
@@ -1,4 +1,4 @@
-import { createSyntheticDirectories, buildPath } from './pathUtils.js';
+import { createSyntheticDirectories, buildPath } from './pathUtils';
 
 export function calculateMainFilePath(
   url: string,
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/index.ts b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/index.ts
new file mode 100644
index 000000000..4c42b26c6
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/index.ts
@@ -0,0 +1,5 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownBlockquoteCallouts } from './transformMarkdownBlockquoteCallouts';
+
+export default transformMarkdownBlockquoteCallouts;
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/integration.test.ts b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/integration.test.ts
new file mode 100644
index 000000000..41d80fa0a
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/integration.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import { transformMarkdownBlockquoteCallouts } from './transformMarkdownBlockquoteCallouts';
+
+describe('remarkBlockquoteCallouts integration', () => {
+  it('should work in a complete pipeline like Next.js MDX', async () => {
+    const processor = unified()
+      .use(remarkParse)
+      .use(transformMarkdownBlockquoteCallouts)
+      .use(remarkRehype)
+      .use(rehypeStringify);
+
+    const markdown = `
+# Test Document
+
+> [!NOTE]
+> This is a note callout with **bold text**.
+
+> [!TIP]
+> This is a tip with a [link](https://example.com).
+
+> Regular blockquote without callouts.
+
+> [!WARNING]
+> Multi-line warning
+> 
+> With multiple paragraphs.
+`;
+
+    const result = await processor.process(markdown);
+    const html = result.toString();
+
+    // Check that callouts are processed correctly
+    expect(html).toContain('<blockquote data-callout-type="note">');
+    expect(html).toContain('<blockquote data-callout-type="tip">');
+    expect(html).toContain('<blockquote data-callout-type="warning">');
+
+    // Check that regular blockquote doesn't have data attribute
+    expect(html).toContain('<blockquote>\n<p>Regular blockquote');
+
+    // Check that callout markers are removed
+    expect(html).not.toContain('[!NOTE]');
+    expect(html).not.toContain('[!TIP]');
+    expect(html).not.toContain('[!WARNING]');
+
+    // Check that markdown content is still processed
+    expect(html).toContain('<strong>bold text</strong>');
+    expect(html).toContain('<a href="https://example.com">link</a>');
+
+    // Check that the HTML structure is correct
+    expect(html).toContain('<h1>Test Document</h1>');
+  });
+});
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.test.ts b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.test.ts
new file mode 100644
index 000000000..a562c9a1f
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.test.ts
@@ -0,0 +1,161 @@
+import { describe, it, expect } from 'vitest';
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import type { Blockquote } from 'mdast';
+import { transformMarkdownBlockquoteCallouts } from './transformMarkdownBlockquoteCallouts';
+
+describe('transformMarkdownBlockquoteCallouts', () => {
+  const createProcessor = () => {
+    return unified()
+      .use(remarkParse)
+      .use(transformMarkdownBlockquoteCallouts)
+      .use(remarkRehype)
+      .use(rehypeStringify);
+  };
+
+  const processMarkdown = async (markdown: string) => {
+    const processor = createProcessor();
+    const result = await processor.process(markdown);
+    return result.toString();
+  };
+
+  const getAstFromMarkdown = async (markdown: string) => {
+    const processor = unified().use(remarkParse).use(transformMarkdownBlockquoteCallouts);
+    const tree = await processor.run(processor.parse(markdown));
+    return tree as any;
+  };
+
+  it('should add data-callout-type attribute for NOTE callout', async () => {
+    const markdown = '> [!NOTE]\n> This is a note.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('<p>This is a note.</p>');
+    expect(html).not.toContain('[!NOTE]');
+  });
+
+  it('should add data-callout-type attribute for TIP callout', async () => {
+    const markdown = '> [!TIP]\n> This is a tip.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="tip"');
+    expect(html).toContain('<p>This is a tip.</p>');
+    expect(html).not.toContain('[!TIP]');
+  });
+
+  it('should add data-callout-type attribute for IMPORTANT callout', async () => {
+    const markdown = '> [!IMPORTANT]\n> This is important.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="important"');
+    expect(html).toContain('<p>This is important.</p>');
+    expect(html).not.toContain('[!IMPORTANT]');
+  });
+
+  it('should add data-callout-type attribute for WARNING callout', async () => {
+    const markdown = '> [!WARNING]\n> This is a warning.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="warning"');
+    expect(html).toContain('<p>This is a warning.</p>');
+    expect(html).not.toContain('[!WARNING]');
+  });
+
+  it('should add data-callout-type attribute for CAUTION callout', async () => {
+    const markdown = '> [!CAUTION]\n> This is a caution.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="caution"');
+    expect(html).toContain('<p>This is a caution.</p>');
+    expect(html).not.toContain('[!CAUTION]');
+  });
+
+  it('should handle callouts with extra whitespace', async () => {
+    const markdown = '> [!NOTE]   This is a note with extra spaces.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('<p>This is a note with extra spaces.</p>');
+    expect(html).not.toContain('[!NOTE]');
+  });
+
+  it('should handle callouts on same line as text', async () => {
+    const markdown = '> [!NOTE] This is a note on the same line.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('<p>This is a note on the same line.</p>');
+    expect(html).not.toContain('[!NOTE]');
+  });
+
+  it('should not modify blockquotes without callout markers', async () => {
+    const markdown = '> This is a regular blockquote.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).not.toContain('data-callout-type');
+    expect(html).toContain('<p>This is a regular blockquote.</p>');
+  });
+
+  it('should not modify blockquotes with invalid callout types', async () => {
+    const markdown = '> [!INVALID] This is an invalid callout.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).not.toContain('data-callout-type');
+    expect(html).toContain('<p>[!INVALID] This is an invalid callout.</p>');
+  });
+
+  it('should handle blockquotes with multiple paragraphs', async () => {
+    const markdown = '> [!NOTE] This is a note.\n>\n> This is another paragraph.';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('<p>This is a note.</p>');
+    expect(html).toContain('<p>This is another paragraph.</p>');
+    expect(html).not.toContain('[!NOTE]');
+  });
+
+  it('should handle empty blockquotes', async () => {
+    const markdown = '>';
+    const html = await processMarkdown(markdown);
+
+    expect(html).not.toContain('data-callout-type');
+  });
+
+  it('should handle callouts that make the text node empty', async () => {
+    const markdown = '> [!NOTE]';
+    const tree = await getAstFromMarkdown(markdown);
+
+    const blockquote = tree.children[0] as Blockquote;
+    expect((blockquote.data as any)?.hProperties?.['data-callout-type']).toBe('note');
+
+    // The paragraph should still exist but be empty
+    expect(blockquote.children).toHaveLength(1);
+    expect(blockquote.children[0].type).toBe('paragraph');
+    expect((blockquote.children[0] as any).children).toHaveLength(0);
+  });
+
+  it('should preserve other blockquote content when processing callouts', async () => {
+    const markdown =
+      '> [!NOTE] Important note\n>\n> Additional content\n>\n> - List item\n> - Another item';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('<p>Important note</p>');
+    expect(html).toContain('<p>Additional content</p>');
+    expect(html).toContain('<li>List item</li>');
+    expect(html).toContain('<li>Another item</li>');
+    expect(html).not.toContain('[!NOTE]');
+  });
+
+  it('should work with nested blockquotes', async () => {
+    const markdown = '> [!NOTE] Outer note\n>\n> > [!TIP] Inner tip';
+    const html = await processMarkdown(markdown);
+
+    expect(html).toContain('data-callout-type="note"');
+    expect(html).toContain('data-callout-type="tip"');
+    expect(html).toContain('<p>Outer note</p>');
+    expect(html).toContain('<p>Inner tip</p>');
+  });
+});
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.ts b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.ts
new file mode 100644
index 000000000..ab4980c49
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.ts
@@ -0,0 +1,64 @@
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Blockquote, Text } from 'mdast';
+
+/**
+ * Remark plugin that extracts GitHub-style callouts from blockquotes and injects them into data attributes.
+ *
+ * Transforms blockquotes like:
+ * > [!NOTE]
+ * > This is a note.
+ *
+ * Into blockquotes with a custom data attribute that will be preserved when converted to HTML:
+ * <blockquote data-callout-type="note">
+ *   <p>This is a note.</p>
+ * </blockquote>
+ *
+ * Supported callout types: NOTE, TIP, IMPORTANT, WARNING, CAUTION
+ */
+export const transformMarkdownBlockquoteCallouts: Plugin = () => {
+  return (tree) => {
+    visit(tree, 'blockquote', (node: Blockquote) => {
+      // Find the first paragraph in the blockquote
+      const firstChild = node.children[0];
+      if (!firstChild || firstChild.type !== 'paragraph') {
+        return;
+      }
+
+      // Find the first text node in the paragraph
+      const firstTextNode = firstChild.children[0];
+      if (!firstTextNode || firstTextNode.type !== 'text') {
+        return;
+      }
+
+      const textNode = firstTextNode as Text;
+      const calloutPattern = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/;
+      const match = textNode.value.match(calloutPattern);
+
+      if (match) {
+        const calloutType = match[1].toLowerCase();
+
+        // Remove the callout marker from the text
+        const newText = textNode.value.replace(calloutPattern, '');
+
+        if (newText.trim() === '') {
+          // Remove the text node if it becomes empty
+          firstChild.children.shift();
+        } else {
+          // Update the text content
+          textNode.value = newText;
+        }
+
+        // Add the data attribute to the blockquote
+        // This creates a custom property that will be preserved when converting to HTML
+        if (!node.data) {
+          node.data = {};
+        }
+        if (!(node.data as any).hProperties) {
+          (node.data as any).hProperties = {};
+        }
+        (node.data as any).hProperties['data-callout-type'] = calloutType;
+      }
+    });
+  };
+};
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownCode/transformMarkdownCode.test.ts b/packages/docs-infra/src/pipeline/transformMarkdownCode/transformMarkdownCode.test.ts
index b7cc5aca0..373ac7b12 100644
--- a/packages/docs-infra/src/pipeline/transformMarkdownCode/transformMarkdownCode.test.ts
+++ b/packages/docs-infra/src/pipeline/transformMarkdownCode/transformMarkdownCode.test.ts
@@ -3,7 +3,7 @@ import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
 import rehypeStringify from 'rehype-stringify';
 import { describe, it, expect } from 'vitest';
-import transformMarkdownCodeVariants from './index.js';
+import transformMarkdownCodeVariants from '.';
 
 // Processor for testing AST structure
 const astProcessor = unified().use(remarkParse).use(transformMarkdownCodeVariants);
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/index.ts b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/index.ts
new file mode 100644
index 000000000..ffa3e53b3
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/index.ts
@@ -0,0 +1,5 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownDemoLinks } from './transformMarkdownDemoLinks';
+
+export default transformMarkdownDemoLinks;
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.test.ts b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.test.ts
new file mode 100644
index 000000000..eebab5fc8
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.test.ts
@@ -0,0 +1,653 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+import { describe, it, expect } from 'vitest';
+import transformMarkdownDemoLinks from '.';
+
+// Processor for testing AST structure
+const astProcessor = unified().use(remarkParse).use(transformMarkdownDemoLinks);
+
+// End-to-end processor for testing final HTML output
+const e2eProcessor = unified()
+  .use(remarkParse)
+  .use(transformMarkdownDemoLinks)
+  .use(remarkRehype, { allowDangerousHtml: true })
+  .use(rehypeStringify, { allowDangerousHtml: true });
+
+describe('transformMarkdownDemoLinks', () => {
+  describe('AST Structure Tests', () => {
+    it('should remove "[See Demo]" link and horizontal rule after Demo component', () => {
+      const markdown = `
+<DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 2 children: the demo paragraph and the heading
+      expect(ast.children).toHaveLength(2);
+
+      // First child should be the demo html node
+      const demoHtml = ast.children[0];
+      expect(demoHtml.type).toBe('html');
+      expect(demoHtml.value).toBe('<DemoCodeHighlighter />');
+
+      // Second child should be the heading (the link and separator should be removed)
+      const heading = ast.children[1];
+      expect(heading.type).toBe('heading');
+      expect(heading.children[0].value).toBe('Next Section');
+    });
+
+    it('should handle multiple Demo patterns in the same document', () => {
+      const markdown = `
+<DemoFirst />
+
+[See Demo](./demos/first/)
+
+---
+
+Some content in between.
+
+<DemoSecond />
+
+[See Demo](./demos/second/)
+
+---
+
+Final content.
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 3 children: demo1, content paragraph, demo2, final content
+      expect(ast.children).toHaveLength(4);
+
+      // Check first demo
+      const firstDemo = ast.children[0];
+      expect(firstDemo.type).toBe('html');
+      expect(firstDemo.value).toBe('<DemoFirst />');
+
+      // Check content paragraph
+      const contentPara = ast.children[1];
+      expect(contentPara.type).toBe('paragraph');
+      expect(contentPara.children[0].value).toBe('Some content in between.');
+
+      // Check second demo
+      const secondDemo = ast.children[2];
+      expect(secondDemo.type).toBe('html');
+      expect(secondDemo.value).toBe('<DemoSecond />');
+
+      // Check final content
+      const finalContent = ast.children[3];
+      expect(finalContent.type).toBe('paragraph');
+      expect(finalContent.children[0].value).toBe('Final content.');
+    });
+
+    it('should NOT remove pattern when Demo is just the .Title', () => {
+      const markdown = `
+<DemoCodeHighlighter.Title />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 4 children: demo, link, separator, heading (nothing removed)
+      expect(ast.children).toHaveLength(4);
+
+      // Check that all original elements are preserved
+      expect(ast.children[0].type).toBe('paragraph'); // Demo
+      expect(ast.children[1].type).toBe('paragraph'); // Link
+      expect(ast.children[2].type).toBe('thematicBreak'); // Separator
+      expect(ast.children[3].type).toBe('heading'); // Heading
+    });
+
+    it('should remove "[See Demo]" link even when there is no horizontal rule', () => {
+      const markdown = `
+<DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 2 children: demo and heading (link removed even without separator)
+      expect(ast.children).toHaveLength(2);
+
+      expect(ast.children[0].type).toBe('html'); // Demo
+      expect(ast.children[1].type).toBe('heading'); // Heading
+    });
+
+    it('should remove both "[See Demo]" link and horizontal rule when both are present', () => {
+      const markdown = `
+<DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 2 children: demo and heading (both link and separator removed)
+      expect(ast.children).toHaveLength(2);
+
+      expect(ast.children[0].type).toBe('html'); // Demo
+      expect(ast.children[1].type).toBe('heading'); // Heading
+    });
+
+    it('should NOT remove pattern when there is no "[See Demo]" link', () => {
+      const markdown = `
+<DemoCodeHighlighter />
+
+[Different Link](./demos/code/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 3 children: demo, link, heading (HR removed even without "See Demo" link)
+      expect(ast.children).toHaveLength(3);
+
+      expect(ast.children[0].type).toBe('html'); // Demo
+      expect(ast.children[1].type).toBe('paragraph'); // Link (preserved)
+      expect(ast.children[2].type).toBe('heading'); // Heading
+    });
+
+    it('should handle Demo components mixed with other content', () => {
+      const markdown = `
+Some text before <DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should process Demo even when mixed with other content - remove See Demo link and HR
+      expect(ast.children).toHaveLength(2);
+
+      expect(ast.children[0].type).toBe('paragraph'); // Text with Demo (preserved)
+      expect(ast.children[1].type).toBe('heading'); // Heading
+    });
+
+    it('should handle Demo components with props', () => {
+      const markdown = `
+<DemoWithProps variant="primary" className="test" />
+
+[See Demo](./demos/with-props/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 2 children: demo and heading (link and separator removed)
+      expect(ast.children).toHaveLength(2);
+
+      const demoHtml = ast.children[0];
+      expect(demoHtml.type).toBe('html');
+      expect(demoHtml.value).toBe('<DemoWithProps variant="primary" className="test" />');
+    });
+
+    it('should handle self-closing and non-self-closing Demo components', () => {
+      const markdown = `
+<DemoSelfClosing />
+
+[See Demo](./demos/self-closing/)
+
+---
+
+<DemoWithChildren>Content</DemoWithChildren>
+
+[See Demo](./demos/with-children/)
+
+---
+
+Final content.
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 3 children: demo1, demo2, final content
+      expect(ast.children).toHaveLength(3);
+
+      // Check first demo (self-closing)
+      const firstDemo = ast.children[0];
+      expect(firstDemo.type).toBe('html');
+      expect(firstDemo.value).toBe('<DemoSelfClosing />');
+
+      // Check second demo (with children) - this stays as a paragraph structure
+      const secondDemo = ast.children[1];
+      expect(secondDemo.type).toBe('paragraph');
+      expect(secondDemo.children).toHaveLength(3); // opening tag, content, closing tag
+      expect(secondDemo.children[0].type).toBe('html');
+      expect(secondDemo.children[0].value).toBe('<DemoWithChildren>');
+      expect(secondDemo.children[1].type).toBe('text');
+      expect(secondDemo.children[1].value).toBe('Content');
+      expect(secondDemo.children[2].type).toBe('html');
+      expect(secondDemo.children[2].value).toBe('</DemoWithChildren>');
+    });
+
+    it('should handle empty Demo components', () => {
+      const markdown = `
+<Demo />
+
+[See Demo](./demos/empty/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 2 children: demo and heading
+      expect(ast.children).toHaveLength(2);
+
+      const demoHtml = ast.children[0];
+      expect(demoHtml.type).toBe('html');
+      expect(demoHtml.value).toBe('<Demo />');
+    });
+
+    it('should NOT process non-Demo HTML elements', () => {
+      const markdown = `
+<div>Some content</div>
+
+[See Demo](./demos/div/)
+
+---
+
+## Next Section
+`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have 4 children (nothing removed because it's not a Demo component)
+      expect(ast.children).toHaveLength(4);
+
+      expect(ast.children[0].type).toBe('html'); // div
+      expect(ast.children[1].type).toBe('paragraph'); // Link
+      expect(ast.children[2].type).toBe('thematicBreak'); // Separator
+      expect(ast.children[3].type).toBe('heading'); // Heading
+    });
+  });
+
+  describe('End-to-End HTML Output Tests', () => {
+    it('should produce clean HTML output with Demo component only', () => {
+      const markdown = `<DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Demo component is preserved as raw HTML, but links and HR are removed
+      expect(result).toEqual('<DemoCodeHighlighter />\n<h2>Next Section</h2>');
+    });
+
+    it('should handle multiple Demo patterns correctly in HTML output', () => {
+      const markdown = `<DemoFirst />
+
+[See Demo](./demos/first/)
+
+---
+
+Some content between demos.
+
+<DemoSecond />
+
+[See Demo](./demos/second/)
+
+---
+
+Final content.`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Demo components preserved as raw HTML, links and HR removed
+      expect(result).toEqual(
+        '<DemoFirst />\n<p>Some content between demos.</p>\n<DemoSecond />\n<p>Final content.</p>',
+      );
+    });
+
+    it('should preserve Demo components with .Title in HTML output', () => {
+      const markdown = `<DemoCodeHighlighter.Title />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // All elements should be preserved since Demo.Title should NOT be processed
+      expect(result).toEqual(
+        '<p>&#x3C;DemoCodeHighlighter.Title /></p>\n<p><a href="./demos/code/">See Demo</a></p>\n<hr>\n<h2>Next Section</h2>',
+      );
+    });
+
+    it('should handle Demo components with complex props in HTML output', () => {
+      const markdown = `<DemoAdvanced 
+  variant="complex"
+  data={{"key": "value"}}
+  onEvent={() => console.log('test')}
+/>
+
+[See Demo](./demos/advanced/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Complex JSX syntax in multiline Demo components sometimes gets escaped by remark-rehype
+      // When this happens, the plugin doesn't process it (since it's text, not HTML), so everything is preserved
+      expect(result).toEqual(
+        '<p>&#x3C;DemoAdvanced\nvariant="complex"\ndata={{"key": "value"}}\nonEvent={() => console.log(\'test\')}\n/></p>\n<p><a href="./demos/advanced/">See Demo</a></p>\n<hr>\n<h2>Next Section</h2>',
+      );
+    });
+
+    it('should preserve other links that are not "See Demo"', () => {
+      const markdown = `<DemoCodeHighlighter />
+
+[Different Link](./demos/code/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Link should be preserved since it's not "See Demo", but HR is now removed after Demo components
+      // With allowDangerousHtml, Demo component appears as raw HTML even when not processed
+      expect(result).toEqual(
+        '<DemoCodeHighlighter />\n<p><a href="./demos/code/">Different Link</a></p>\n<h2>Next Section</h2>',
+      );
+    });
+
+    it('should remove "[See Demo]" link even without horizontal rule in HTML output', () => {
+      const markdown = `<DemoCodeHighlighter />
+
+[See Demo](./demos/code/)
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Demo component preserved, See Demo link removed (no HR to remove)
+      expect(result).toEqual('<DemoCodeHighlighter />\n<h2>Next Section</h2>');
+    });
+
+    it('should handle mixed content with demos and regular content', () => {
+      const markdown = `# Documentation
+
+Some introduction text.
+
+<DemoBasic />
+
+[See Demo](./demos/basic/)
+
+---
+
+## Features
+
+More documentation content.
+
+<DemoAdvanced />
+
+[See Demo](./demos/advanced/)
+
+---
+
+## Conclusion
+
+Final thoughts.`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Demo components preserved as raw HTML, See Demo links and HR removed
+      expect(result).toEqual(
+        '<h1>Documentation</h1>\n<p>Some introduction text.</p>\n<DemoBasic />\n<h2>Features</h2>\n<p>More documentation content.</p>\n<DemoAdvanced />\n<h2>Conclusion</h2>\n<p>Final thoughts.</p>',
+      );
+    });
+
+    it('should handle edge case with empty See Demo link', () => {
+      const markdown = `<DemoTest />
+
+[See Demo]()
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Should still process even if the link is empty
+      expect(result).toEqual('<DemoTest />\n<h2>Next Section</h2>');
+    });
+
+    it('should handle Demo components nested in other HTML', () => {
+      const markdown = `<div><DemoNested /></div>
+
+[See Demo](./demos/nested/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // The nested Demo SHOULD be processed since it's in a valid HTML node that contains <Demo
+      // The plugin removes the See Demo link and HR when it finds the Demo pattern
+      expect(result).toEqual('<div><DemoNested /></div>\n<h2>Next Section</h2>');
+    });
+
+    it('should handle Demo components with line breaks', () => {
+      const markdown = `<DemoMultiline
+  prop1="value1"
+  prop2="value2"
+/>
+
+[See Demo](./demos/multiline/)
+
+---
+
+## Next Section`;
+
+      const result = e2eProcessor.processSync(markdown).toString();
+
+      // Multiline Demo component remains in paragraph tags, but See Demo link and HR are removed
+      expect(result).toMatch(/<p><DemoMultiline[\s\S]*?\/><\/p>\n<h2>Next Section<\/h2>/);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle document with only Demo pattern', () => {
+      const markdown = `<DemoOnly />
+
+[See Demo](./demos/only/)
+
+---`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should have only 1 child: the demo html node
+      expect(ast.children).toHaveLength(1);
+      expect(ast.children[0].type).toBe('html');
+      expect(ast.children[0].value).toBe('<DemoOnly />');
+    });
+
+    it('should handle malformed Demo tags gracefully', () => {
+      const markdown = `<Demo incomplete
+
+[See Demo](./demos/malformed/)
+
+---
+
+## Next Section`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should NOT process malformed HTML that isn't recognized as proper HTML by markdown parser
+      // The malformed tag is treated as text, not HTML, so plugin should ignore it
+      expect(ast.children).toHaveLength(4); // paragraph with malformed text, See Demo paragraph, HR, heading
+      expect(ast.children[0].type).toBe('paragraph'); // Contains the malformed text
+      expect(ast.children[1].type).toBe('paragraph'); // Contains the See Demo link (not removed)
+      expect(ast.children[2].type).toBe('thematicBreak'); // HR (not removed)
+      expect(ast.children[3].type).toBe('heading');
+    });
+
+    it('should handle case sensitivity correctly', () => {
+      const markdown = `<demo />
+
+[See Demo](./demos/case/)
+
+---
+
+## Next Section`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should NOT process because it's lowercase 'demo', not 'Demo'
+      expect(ast.children).toHaveLength(4);
+    });
+
+    it('should handle Demo.Title vs DemoTitle correctly', () => {
+      const markdown1 = `<Demo.Title />
+
+[See Demo](./demos/dot-title/)
+
+---`;
+
+      const markdown2 = `<DemoTitle />
+
+[See Demo](./demos/title/)
+
+---`;
+
+      const ast1 = astProcessor.runSync(astProcessor.parse(markdown1)) as any;
+      const ast2 = astProcessor.runSync(astProcessor.parse(markdown2)) as any;
+
+      // First should NOT be processed (contains .Title)
+      expect(ast1.children).toHaveLength(3);
+
+      // Second SHOULD be processed (DemoTitle, not Demo.Title)
+      expect(ast2.children).toHaveLength(1);
+      expect(ast2.children[0].type).toBe('html');
+      expect(ast2.children[0].value).toBe('<DemoTitle />');
+    });
+
+    it('should handle multiple horizontal rules correctly', () => {
+      const markdown = `<DemoTest />
+
+[See Demo](./demos/test/)
+
+---
+
+---
+
+## Next Section`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Should process the first pattern (Demo + See Demo link + first HR) and preserve the second HR
+      expect(ast.children).toHaveLength(3);
+      expect(ast.children[0].type).toBe('html'); // Demo
+      expect(ast.children[1].type).toBe('thematicBreak'); // Second HR (preserved)
+      expect(ast.children[2].type).toBe('heading'); // Heading
+    });
+
+    it('should successfully process imported Demo components', () => {
+      // This simulates how imported MDX components appear in markdown
+      const markdown = `import { DemoCodeHighlighterCode } from './demos/code';
+
+<DemoCodeHighlighterCode />
+
+[See Demo](./demos/code/)
+
+---
+
+## Next Section`;
+
+      const ast = astProcessor.runSync(astProcessor.parse(markdown)) as any;
+
+      // Plugin should work! It removes the "[See Demo]" link and HR
+      expect(ast.children).toHaveLength(3);
+
+      expect(ast.children[0].type).toBe('paragraph'); // import statement
+      expect(ast.children[1].type).toBe('html'); // <DemoCodeHighlighterCode /> becomes html node
+      expect(ast.children[1].value).toBe('<DemoCodeHighlighterCode />');
+      expect(ast.children[2].type).toBe('heading'); // heading remains
+    });
+
+    it('should handle MDX JSX flow elements (simulated)', () => {
+      // This simulates an MDX JSX flow element directly in the AST
+      const mockAst = {
+        type: 'root',
+        children: [
+          {
+            type: 'mdxJsxFlowElement',
+            name: 'DemoCodeHighlighter',
+            attributes: [],
+            children: [],
+          },
+          {
+            type: 'paragraph',
+            children: [
+              {
+                type: 'link',
+                url: './demos/code/',
+                children: [{ type: 'text', value: 'See Demo' }],
+              },
+            ],
+          },
+          {
+            type: 'thematicBreak',
+          },
+          {
+            type: 'heading',
+            depth: 2,
+            children: [{ type: 'text', value: 'Next Section' }],
+          },
+        ],
+      };
+
+      // Create processor with our plugin and apply it
+      const processor = unified().use(transformMarkdownDemoLinks);
+      const result = processor.runSync(mockAst as any) as any;
+
+      // Should remove the link and HR, leaving just the Demo and heading
+      expect(result.children).toHaveLength(2);
+      expect(result.children[0].type).toBe('mdxJsxFlowElement');
+      expect(result.children[1].type).toBe('heading');
+    });
+  });
+});
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.ts b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.ts
new file mode 100644
index 000000000..2f016ea59
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownDemoLinks/transformMarkdownDemoLinks.ts
@@ -0,0 +1,136 @@
+import type { Plugin } from 'unified';
+import type { Parent, PhrasingContent, Html, Paragraph } from 'mdast';
+
+// MDX JSX types
+interface MdxJsxFlowElement {
+  type: 'mdxJsxFlowElement';
+  name: string | null;
+  attributes: Array<any>;
+  children: Array<any>;
+}
+
+/**
+ * Remark plugin that cleans up demo patterns in markdown.
+ *
+ * Looks for patterns where a Demo component is followed by a "[See Demo]" link
+ * and optionally a horizontal rule (---). When found, removes the link and
+ * any following horizontal rule.
+ *
+ * This is useful for markdown that will be converted to HTML where the link
+ * and separator are distracting on the page.
+ *
+ * Pattern it matches:
+ * ```
+ * <DemoSomething />
+ *
+ * [See Demo](./demos/base/)
+ *
+ * ---  (optional)
+ * ```
+ *
+ * Gets transformed to:
+ * ```
+ * <DemoSomething />
+ * ```
+ */
+export const transformMarkdownDemoLinks: Plugin = () => {
+  return (tree) => {
+    const parent = tree as Parent;
+    const children = parent.children;
+
+    for (let i = 0; i < children.length - 1; i += 1) {
+      const current = children[i];
+      const next = children[i + 1];
+      const separator = children[i + 2]; // May not exist
+
+      let hasDemo = false;
+
+      // Check if current node is an HTML element containing a Demo component without .Title
+      if (current?.type === 'html') {
+        const htmlNode = current as Html;
+        hasDemo = htmlNode.value.includes('<Demo') && !htmlNode.value.includes('.Title');
+      } else if (current?.type === 'mdxJsxFlowElement') {
+        // Check if current node is an MDX JSX element (for imported Demo components)
+        const mdxNode = current as MdxJsxFlowElement;
+        if (mdxNode.name && mdxNode.name.includes('Demo') && !mdxNode.name.includes('.Title')) {
+          hasDemo = true;
+        }
+      } else if (current?.type === 'paragraph') {
+        // Check if paragraph contains only a single HTML node with a Demo component
+        const paragraphNode = current as Paragraph;
+        if (paragraphNode.children.length === 1 && paragraphNode.children[0].type === 'html') {
+          const htmlNode = paragraphNode.children[0] as Html;
+          hasDemo = htmlNode.value.includes('<Demo') && !htmlNode.value.includes('.Title');
+        } else if (
+          paragraphNode.children.length >= 2 &&
+          paragraphNode.children[0].type === 'html' &&
+          paragraphNode.children[paragraphNode.children.length - 1].type === 'html'
+        ) {
+          // Check if this looks like a Demo component with opening and closing tags
+          const openingTag = paragraphNode.children[0] as Html;
+          const closingTag = paragraphNode.children[paragraphNode.children.length - 1] as Html;
+
+          if (
+            openingTag.value.includes('<Demo') &&
+            !openingTag.value.includes('.Title') &&
+            closingTag.value.includes('</Demo')
+          ) {
+            hasDemo = true;
+          }
+        } else {
+          // Check if paragraph contains any HTML nodes with Demo components (mixed content)
+          hasDemo = paragraphNode.children.some((child) => {
+            return (
+              child.type === 'html' &&
+              child.value.includes('<Demo') &&
+              !child.value.includes('.Title')
+            );
+          });
+        }
+      }
+
+      if (!hasDemo) {
+        continue;
+      }
+
+      let removedSomething = false;
+
+      // Check if next node is a paragraph containing a "See Demo" link
+      if (next?.type === 'paragraph') {
+        const hasSeeDemo = next.children.some((child: PhrasingContent) => {
+          return (
+            child.type === 'link' &&
+            child.children.some(
+              (linkChild) => linkChild.type === 'text' && linkChild.value === 'See Demo',
+            )
+          );
+        });
+
+        // Check if there's also a thematic break (---) after the paragraph
+        const hasThematicBreak = separator?.type === 'thematicBreak';
+
+        if (hasSeeDemo) {
+          // Remove the "See Demo" paragraph and any following thematic break
+          if (hasThematicBreak) {
+            // Remove both the "See Demo" paragraph and the thematic break
+            children.splice(i + 1, 2);
+            removedSomething = true;
+          } else {
+            // Remove only the "See Demo" paragraph
+            children.splice(i + 1, 1);
+            removedSomething = true;
+          }
+        } else if (hasThematicBreak) {
+          // No "See Demo" link, but there's a thematic break after the paragraph - remove just the HR
+          children.splice(i + 2, 1);
+          removedSomething = true;
+        }
+      }
+
+      // If we removed something, adjust the loop index to prevent skipping
+      if (removedSomething) {
+        i -= 1;
+      }
+    }
+  };
+};
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/index.ts b/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/index.ts
new file mode 100644
index 000000000..45a9967c2
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/index.ts
@@ -0,0 +1,5 @@
+// This is the export format expected by a remark plugin.
+
+import { transformMarkdownRelativePaths } from './transformMarkdownRelativePaths';
+
+export default transformMarkdownRelativePaths;
diff --git a/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.ts b/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.ts
new file mode 100644
index 000000000..0ff97452a
--- /dev/null
+++ b/packages/docs-infra/src/pipeline/transformMarkdownRelativePaths/transformMarkdownRelativePaths.ts
@@ -0,0 +1,41 @@
+// webpack does not like node: imports
+// eslint-disable-next-line n/prefer-node-protocol
+import path from 'path';
+
+import { visit } from 'unist-util-visit';
+import type { Plugin } from 'unified';
+import type { Link } from 'mdast';
+
+/**
+ * Remark plugin that strips page file extensions from URLs.
+ * Removes /page.tsx, /page.jsx, /page.js, /page.mdx, /page.md from both absolute and relative URLs.
+ * For relative URLs (both ./ and ../), converts them to absolute paths based on the current file's location.
+ *
+ * Examples:
+ * - /components/page.tsx -> /components
+ * - ./code-highlighter/page.mdx -> /components/code-highlighter (when processed from /components/page.mdx)
+ * - ../code-highlighter/page.tsx -> /code-highlighter (when processed from /components/button/page.mdx)
+ * This allows URLs to resolve when reading in VSCode and Github
+ */
+export const transformMarkdownRelativePaths: Plugin = () => {
+  return (tree, file) => {
+    visit(tree, 'link', (node: Link) => {
+      if (node.url) {
+        node.url = node.url.replace(/\/page\.(tsx|jsx|js|mdx|md)$/g, '');
+        node.url = node.url.replace(/\/page\.(tsx|jsx|js|mdx|md)(\?[^#]*)?(#.*)?$/g, '$2$3');
+
+        if ((node.url.startsWith('./') || node.url.startsWith('../')) && file.path) {
+          const currentDir = path.dirname(file.path);
+          const appIndex = currentDir.indexOf('/app/');
+          const baseDir = appIndex !== -1 ? currentDir.substring(appIndex + 4) : '/';
+
+          // Resolve the relative path from the current directory
+          const resolvedPath = path.resolve('/', baseDir, node.url);
+          node.url = resolvedPath;
+        }
+
+        node.url = node.url.replace(/\/$/, '');
+      }
+    });
+  };
+};
diff --git a/packages/docs-infra/src/useCode/Pre.tsx b/packages/docs-infra/src/useCode/Pre.tsx
index 9e3ca00d6..78d0e26ae 100644
--- a/packages/docs-infra/src/useCode/Pre.tsx
+++ b/packages/docs-infra/src/useCode/Pre.tsx
@@ -144,6 +144,10 @@ export function Pre({
   const frames = React.useMemo(() => {
     return hast?.children.map((child, index) => {
       if (child.type !== 'element') {
+        if (child.type === 'text') {
+          return <React.Fragment key={index}>{child.value}</React.Fragment>;
+        }
+
         return null;
       }
 
@@ -171,7 +175,7 @@ export function Pre({
 
   return (
     <pre ref={bindIntersectionObserver} className={className}>
-      {typeof children === 'string' ? children : frames}
+      <code>{typeof children === 'string' ? children : frames}</code>
     </pre>
   );
 }
diff --git a/packages/docs-infra/src/useErrors/useErrors.ts b/packages/docs-infra/src/useErrors/useErrors.ts
index c79015fb7..2b21bead7 100644
--- a/packages/docs-infra/src/useErrors/useErrors.ts
+++ b/packages/docs-infra/src/useErrors/useErrors.ts
@@ -4,8 +4,12 @@ type Errors = {
   errors?: Error[];
 };
 
-export function useErrors(): Errors {
+export function useErrors(props?: Errors): Errors {
   const context = useErrorsContext();
 
-  return { errors: context?.errors };
+  // Context errors take precedence over prop errors
+  // This ensures client-side errors override server-side errors
+  const errors = context?.errors || props?.errors;
+
+  return { errors };
 }
diff --git a/packages/docs-infra/src/withDocsInfra/withDocsInfra.test.ts b/packages/docs-infra/src/withDocsInfra/withDocsInfra.test.ts
index 16e1a5d68..0b5dcfd7d 100644
--- a/packages/docs-infra/src/withDocsInfra/withDocsInfra.test.ts
+++ b/packages/docs-infra/src/withDocsInfra/withDocsInfra.test.ts
@@ -673,7 +673,10 @@ describe('getDocsInfraMdxOptions', () => {
 
     expect(result.remarkPlugins).toEqual([
       ['remark-gfm'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownRelativePaths'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownBlockquoteCallouts'],
       ['@mui/internal-docs-infra/pipeline/transformMarkdownCode'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownDemoLinks'],
     ]);
 
     expect(result.rehypePlugins).toEqual([
@@ -689,7 +692,10 @@ describe('getDocsInfraMdxOptions', () => {
 
     expect(result.remarkPlugins).toEqual([
       ['remark-gfm'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownRelativePaths'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownBlockquoteCallouts'],
       ['@mui/internal-docs-infra/pipeline/transformMarkdownCode'],
+      ['@mui/internal-docs-infra/pipeline/transformMarkdownDemoLinks'],
       ['remark-emoji'],
     ]);
 
diff --git a/packages/docs-infra/src/withDocsInfra/withDocsInfra.ts b/packages/docs-infra/src/withDocsInfra/withDocsInfra.ts
index 8eb097993..0eea86bb0 100644
--- a/packages/docs-infra/src/withDocsInfra/withDocsInfra.ts
+++ b/packages/docs-infra/src/withDocsInfra/withDocsInfra.ts
@@ -87,7 +87,10 @@ export function getDocsInfraMdxOptions(
 ): DocsInfraMdxOptions {
   const defaultRemarkPlugins: Array<string | [string, ...any[]]> = [
     ['remark-gfm'],
+    ['@mui/internal-docs-infra/pipeline/transformMarkdownRelativePaths'],
+    ['@mui/internal-docs-infra/pipeline/transformMarkdownBlockquoteCallouts'],
     ['@mui/internal-docs-infra/pipeline/transformMarkdownCode'],
+    ['@mui/internal-docs-infra/pipeline/transformMarkdownDemoLinks'],
   ];
 
   const defaultRehypePlugins: Array<string | [string, ...any[]]> = [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 39a7220cd..7b724af9a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -221,6 +221,73 @@ importers:
         specifier: ^1.15.5
         version: 1.15.5
 
+  docs:
+    dependencies:
+      '@base-ui-components/react':
+        specifier: 1.0.0-beta.1
+        version: 1.0.0-beta.1(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@mdx-js/loader':
+        specifier: ^3.1.0
+        version: 3.1.1(webpack@5.102.1(jiti@2.6.1))
+      '@mdx-js/react':
+        specifier: ^3.1.0
+        version: 3.1.1(@types/react@19.2.2)(react@19.2.0)
+      '@mui/internal-docs-infra':
+        specifier: workspace:^
+        version: link:../packages/docs-infra/build
+      '@next/mdx':
+        specifier: ^15.3.4
+        version: 15.5.6(@mdx-js/loader@3.1.1(webpack@5.102.1(jiti@2.6.1)))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@19.2.0))
+      '@types/mdx':
+        specifier: ^2.0.13
+        version: 2.0.13
+      next:
+        specifier: v15.5.2
+        version: 15.5.2(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.0
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.0(react@19.2.0)
+      react-runner:
+        specifier: ^1.0.5
+        version: 1.0.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
+      use-editable:
+        specifier: ^2.3.3
+        version: 2.3.3(react@19.2.0)
+      vscode-oniguruma:
+        specifier: ^2.0.1
+        version: 2.0.1
+    devDependencies:
+      '@next/bundle-analyzer':
+        specifier: ^15.5.2
+        version: 15.5.6
+      '@types/node':
+        specifier: ^20
+        version: 20.19.24
+      '@types/react':
+        specifier: ^19
+        version: 19.2.2
+      '@types/react-dom':
+        specifier: ^19
+        version: 19.2.2(@types/react@19.2.2)
+      '@wooorm/starry-night':
+        specifier: ^3.8.0
+        version: 3.8.0
+      serve:
+        specifier: ^14.2.5
+        version: 14.2.5
+      typescript:
+        specifier: ^5
+        version: 5.9.3
+
   packages/babel-plugin-display-name:
     dependencies:
       '@babel/helper-module-imports':
@@ -1511,6 +1578,17 @@ packages:
     resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
+  '@base-ui-components/react@1.0.0-beta.1':
+    resolution: {integrity: sha512-7zmGiz4/+HKnv99lWftItoSMqnj2PdSvt2krh0/GP+Rj0xK0NMnFI/gIVvP7CB2G+k0JPUrRWXjXa3y08oiakg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17 || ^18 || ^19
+      react: ^17 || ^18 || ^19
+      react-dom: ^17 || ^18 || ^19
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@base-ui-components/react@1.0.0-beta.4':
     resolution: {integrity: sha512-sPYKj26gbFHD2ZsrMYqQshXnMuomBodzPn+d0dDxWieTj232XCQ9QGt9fU9l5SDGC9hi8s24lDlg9FXPSI7T8A==}
     engines: {node: '>=14.0.0'}
@@ -1623,6 +1701,10 @@ packages:
     resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==}
     engines: {node: '>=18'}
 
+  '@discoveryjs/json-ext@0.5.7':
+    resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
+    engines: {node: '>=10.0.0'}
+
   '@dmsnell/diff-match-patch@1.1.0':
     resolution: {integrity: sha512-yejLPmM5pjsGvxS9gXablUSbInW7H976c/FJ4iQxWIm7/38xBySRemTPDe34lhg1gVLbJntX0+sH0jYfU+PN9A==}
 
@@ -2819,6 +2901,23 @@ packages:
   '@mdn/browser-compat-data@5.7.6':
     resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==}
 
+  '@mdx-js/loader@3.1.1':
+    resolution: {integrity: sha512-0TTacJyZ9mDmY+VefuthVshaNIyCGZHJG2fMnGaDttCt8HmjUF7SizlHJpaCDoGnN635nK1wpzfpx/Xx5S4WnQ==}
+    peerDependencies:
+      webpack: '>=5'
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
+  '@mdx-js/mdx@3.1.1':
+    resolution: {integrity: sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ==}
+
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
   '@mui/base@5.0.0-beta.69':
     resolution: {integrity: sha512-r2YyGUXpZxj8rLAlbjp1x2BnMERTZ/dMqd9cClKj2OJ7ALAuiv/9X5E9eHfRc9o/dGRuLSMq/WTjREktJVjxVA==}
     engines: {node: '>=14.0.0'}
@@ -3669,54 +3768,119 @@ packages:
     engines: {node: '>=18.14.0'}
     hasBin: true
 
+  '@next/bundle-analyzer@15.5.6':
+    resolution: {integrity: sha512-IHeyk2s9/fVDAGDLNbBkCSG8XBabhuMajiaJggjsg4GyFIswh78DzLo5Nl5th8QTs3U/teYeczvfeV9w1Tx3qA==}
+
+  '@next/env@15.5.2':
+    resolution: {integrity: sha512-Qe06ew4zt12LeO6N7j8/nULSOe3fMXE4dM6xgpBQNvdzyK1sv5y4oAP3bq4LamrvGCZtmRYnW8URFCeX5nFgGg==}
+
   '@next/env@15.5.6':
     resolution: {integrity: sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q==}
 
   '@next/eslint-plugin-next@15.5.6':
     resolution: {integrity: sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ==}
 
+  '@next/mdx@15.5.6':
+    resolution: {integrity: sha512-lyzXcnZWPjYxbkz/5tv1bRlCOjKYX1lFg3LIuoIf9ERTOUBDzkCvUnWjtRsmFRxKv1/6uwpLVQvrJDd54gVDBw==}
+    peerDependencies:
+      '@mdx-js/loader': '>=0.15.0'
+      '@mdx-js/react': '>=0.15.0'
+    peerDependenciesMeta:
+      '@mdx-js/loader':
+        optional: true
+      '@mdx-js/react':
+        optional: true
+
+  '@next/swc-darwin-arm64@15.5.2':
+    resolution: {integrity: sha512-8bGt577BXGSd4iqFygmzIfTYizHb0LGWqH+qgIF/2EDxS5JsSdERJKA8WgwDyNBZgTIIA4D8qUtoQHmxIIquoQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@next/swc-darwin-arm64@15.5.6':
     resolution: {integrity: sha512-ES3nRz7N+L5Umz4KoGfZ4XX6gwHplwPhioVRc25+QNsDa7RtUF/z8wJcbuQ2Tffm5RZwuN2A063eapoJ1u4nPg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
+  '@next/swc-darwin-x64@15.5.2':
+    resolution: {integrity: sha512-2DjnmR6JHK4X+dgTXt5/sOCu/7yPtqpYt8s8hLkHFK3MGkka2snTv3yRMdHvuRtJVkPwCGsvBSwmoQCHatauFQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
   '@next/swc-darwin-x64@15.5.6':
     resolution: {integrity: sha512-JIGcytAyk9LQp2/nuVZPAtj8uaJ/zZhsKOASTjxDug0SPU9LAM3wy6nPU735M1OqacR4U20LHVF5v5Wnl9ptTA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
+  '@next/swc-linux-arm64-gnu@15.5.2':
+    resolution: {integrity: sha512-3j7SWDBS2Wov/L9q0mFJtEvQ5miIqfO4l7d2m9Mo06ddsgUK8gWfHGgbjdFlCp2Ek7MmMQZSxpGFqcC8zGh2AA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-arm64-gnu@15.5.6':
     resolution: {integrity: sha512-qvz4SVKQ0P3/Im9zcS2RmfFL/UCQnsJKJwQSkissbngnB/12c6bZTCB0gHTexz1s6d/mD0+egPKXAIRFVS7hQg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-arm64-musl@15.5.2':
+    resolution: {integrity: sha512-s6N8k8dF9YGc5T01UPQ08yxsK6fUow5gG1/axWc1HVVBYQBgOjca4oUZF7s4p+kwhkB1bDSGR8QznWrFZ/Rt5g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
   '@next/swc-linux-arm64-musl@15.5.6':
     resolution: {integrity: sha512-FsbGVw3SJz1hZlvnWD+T6GFgV9/NYDeLTNQB2MXoPN5u9VA9OEDy6fJEfePfsUKAhJufFbZLgp0cPxMuV6SV0w==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
+  '@next/swc-linux-x64-gnu@15.5.2':
+    resolution: {integrity: sha512-o1RV/KOODQh6dM6ZRJGZbc+MOAHww33Vbs5JC9Mp1gDk8cpEO+cYC/l7rweiEalkSm5/1WGa4zY7xrNwObN4+Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-linux-x64-gnu@15.5.6':
     resolution: {integrity: sha512-3QnHGFWlnvAgyxFxt2Ny8PTpXtQD7kVEeaFat5oPAHHI192WKYB+VIKZijtHLGdBBvc16tiAkPTDmQNOQ0dyrA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-linux-x64-musl@15.5.2':
+    resolution: {integrity: sha512-/VUnh7w8RElYZ0IV83nUcP/J4KJ6LLYliiBIri3p3aW2giF+PAVgZb6mk8jbQSB3WlTai8gEmCAr7kptFa1H6g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
   '@next/swc-linux-x64-musl@15.5.6':
     resolution: {integrity: sha512-OsGX148sL+TqMK9YFaPFPoIaJKbFJJxFzkXZljIgA9hjMjdruKht6xDCEv1HLtlLNfkx3c5w2GLKhj7veBQizQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
+  '@next/swc-win32-arm64-msvc@15.5.2':
+    resolution: {integrity: sha512-sMPyTvRcNKXseNQ/7qRfVRLa0VhR0esmQ29DD6pqvG71+JdVnESJaHPA8t7bc67KD5spP3+DOCNLhqlEI2ZgQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@next/swc-win32-arm64-msvc@15.5.6':
     resolution: {integrity: sha512-ONOMrqWxdzXDJNh2n60H6gGyKed42Ieu6UTVPZteXpuKbLZTH4G4eBMsr5qWgOBA+s7F+uB4OJbZnrkEDnZ5Fg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
+  '@next/swc-win32-x64-msvc@15.5.2':
+    resolution: {integrity: sha512-W5VvyZHnxG/2ukhZF/9Ikdra5fdNftxI6ybeVKYvBPDtyx7x4jPPSNduUkfH5fo3zG0JQ0bPxgy41af2JX5D4Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
   '@next/swc-win32-x64-msvc@15.5.6':
     resolution: {integrity: sha512-pxK4VIjFRx1MY92UycLOOw7dTdvccWsNETQ0kDHkBlcFH1GrTLUjSiHU1ohrznnux6TqRHgv5oflhfIWZwVROQ==}
     engines: {node: '>= 10'}
@@ -4238,6 +4402,9 @@ packages:
     resolution: {integrity: sha512-bWLDlHsBlgKY/05wDN/V3ETcn5G2SV/SiA2ZmNvKGGlmVX4G5li7GRDhHcgYvHJHyJ8TUStqg2xtHmCs0UbAbg==}
     engines: {node: '>=18'}
 
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
@@ -5695,6 +5862,9 @@ packages:
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
   '@types/micromatch@4.0.10':
     resolution: {integrity: sha512-5jOhFDElqr4DKTrTEbnW8DZ4Hz5LRUEmyrGpCMrD/NphYv3nUnaF08xmSLx1rGGnyEs/kFnhiw6dCgcDqMr5PQ==}
 
@@ -6324,6 +6494,9 @@ packages:
     resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
     engines: {node: '>=14'}
 
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -6465,6 +6638,10 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
   async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
@@ -6957,6 +7134,9 @@ packages:
     resolution: {integrity: sha512-rtpaCbr164TPPh+zFdkWpCyZuKkjpAzODfaZCf/SVJZzJN+4bHQb/LP3Jzq5/+84um3XXY8r548XiWKSborwVw==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -7017,10 +7197,18 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
   commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
     engines: {node: '>= 6'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
   commander@9.5.0:
     resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
     engines: {node: ^12.20.0 || >=14}
@@ -7378,6 +7566,9 @@ packages:
     resolution: {integrity: sha512-Sr4SdOZ4vw6eQDvPYNxHogvrxmCIld/VenC5JbNrFwMiwd7lY/Z18ZFfo+EWNG4DD9nFlAujWAo/wGuOPHmy5A==}
     engines: {node: '>=12'}
 
+  debounce@1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -7804,6 +7995,12 @@ packages:
     resolution: {integrity: sha512-aiQ/QyJBVJbabtsSediM1S4qI+P3p8F5J5YR5o/bH003BCnnclzxK9pi5Qd2Hg01ktAtZCaQBdejHrkOBGwf5Q==}
     engines: {node: '>=0.4.0'}
 
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -8024,9 +8221,24 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
+
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
+
   estree-util-is-identifier-name@3.0.0:
     resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
+
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
+
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -8738,6 +8950,9 @@ packages:
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
+  hast-util-to-estree@3.1.3:
+    resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
+
   hast-util-to-html@9.0.5:
     resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
 
@@ -9845,6 +10060,13 @@ packages:
     resolution: {integrity: sha512-K6K2NgKnTXimT3779/4KxSvobxOtMmx1LBZ3NwRxT/MDIR3Br/fQ4Q+WCX5QxjyUR8zg5+RV9Tbf2c5pAWTD2A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   markdown-to-jsx@7.7.4:
     resolution: {integrity: sha512-1bSfXyBKi+EYS3YY+e0Csuxf8oZ3decdfhOav/Z7Wrk89tjudyL5FOmwZQUoy0/qVXGUl+6Q3s2SWtpDEWITfQ==}
     engines: {node: '>= 10'}
@@ -9864,15 +10086,39 @@ packages:
   maxstache@1.0.7:
     resolution: {integrity: sha512-53ZBxHrZM+W//5AcRVewiLpDunHnucfdzZUGz54Fnvo4tE+J3p8EL66kBrs2UhBXvYKTWckWYYWBqJqoTcenqg==}
 
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
   mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
   mdast-util-mdx-expression@2.0.1:
     resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
   mdast-util-mdx-jsx@3.2.0:
     resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
 
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+
   mdast-util-mdxjs-esm@2.0.1:
     resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
 
@@ -9937,12 +10183,51 @@ packages:
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+
+  micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+
   micromark-factory-destination@2.0.1:
     resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
   micromark-factory-label@2.0.1:
     resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
+  micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+
   micromark-factory-space@2.0.1:
     resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
@@ -9973,6 +10258,9 @@ packages:
   micromark-util-encode@2.0.1:
     resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
+  micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+
   micromark-util-html-tag-name@2.0.1:
     resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
@@ -10182,6 +10470,10 @@ packages:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -10218,6 +10510,9 @@ packages:
     resolution: {integrity: sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==}
     engines: {node: '>= 0.6'}
 
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
   named-placeholders@1.1.3:
     resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
     engines: {node: '>=12.0.0'}
@@ -10272,6 +10567,27 @@ packages:
   netlify-redirector@0.5.0:
     resolution: {integrity: sha512-4zdzIP+6muqPCuE8avnrgDJ6KW/2+UpHTRcTbMXCIRxiRmyrX+IZ4WSJGZdHPWF3WmQpXpy603XxecZ9iygN7w==}
 
+  next@15.5.2:
+    resolution: {integrity: sha512-H8Otr7abj1glFhbGnvUt3gz++0AF1+QoCXEBmd/6aKbfdFwrn0LpA836Ed5+00va/7HQSDD+mOoVhn3tNy3e/Q==}
+    engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.51.1
+      babel-plugin-react-compiler: '*'
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+      sass:
+        optional: true
+
   next@15.5.6:
     resolution: {integrity: sha512-zTxsnI3LQo3c9HSdSf91O1jMNsEzIXDShXd4wVdg9y5shwLqBXi4ZtUUJyB86KGVSJLZx0PFONvO54aheGX8QQ==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -10555,6 +10871,10 @@ packages:
   openapi-typescript-helpers@0.0.15:
     resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
 
+  opener@1.5.2:
+    resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
+    hasBin: true
+
   oppa@0.4.0:
     resolution: {integrity: sha512-DFvM3+F+rB/igo3FRnkDWitjZgBH9qZAn68IacYHsqbZBKwuTA+LdD4zSJiQtgQpWq7M08we5FlGAVHz0yW7PQ==}
     engines: {node: '>=10'}
@@ -10932,6 +11252,10 @@ packages:
     resolution: {integrity: sha512-8OEwKp5juEvb/MjpIc4hjqfgCNysrS94RIOMXYvpYCdm/jglrKEiAYmiumbmGhCvs+IcInsphYDFwqrjr7398w==}
     hasBin: true
 
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
   piscina@4.8.0:
     resolution: {integrity: sha512-EZJb+ZxDrQf3dihsUL7p42pjNyrNIFJCrRHPMgxu/svsj+P3xS3fuEWp7k2+rfsavfl1N0G29b1HGs7J0m8rZA==}
 
@@ -11329,6 +11653,12 @@ packages:
       react-dom:
         optional: true
 
+  react-runner@1.0.5:
+    resolution: {integrity: sha512-eCIybRpssp6ffjqXqId024esO9UP2lV838Lvm3fC7VgMQ/dQHhR0jJwOY2IPrYD3AaM/bcvMikmASIRZqNUHsw==}
+    peerDependencies:
+      react: ^16.0.0 || ^17 || ^18
+      react-dom: ^16.0.0 || ^17 || ^18
+
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -11425,6 +11755,20 @@ packages:
     resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
     engines: {node: '>= 12.13.0'}
 
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
   recursive-readdir@2.2.3:
     resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
     engines: {node: '>=6.0.0'}
@@ -11481,6 +11825,9 @@ packages:
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
@@ -11488,12 +11835,21 @@ packages:
     resolution: {integrity: sha512-dLN0+SBPutC6bVFCH2+1o2VrHrvAj/PX6MzTemeaEKlCL10JKPMRlqszkitLQnHVgm90QQ94wxoBJRgfIEkstg==}
     engines: {node: ^20.18.0 || ^22.12.0 || >=23.3.0}
 
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
   remark-rehype@11.1.2:
     resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
 
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   remove-trailing-separator@1.1.0:
     resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==}
 
@@ -11741,6 +12097,9 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -11819,6 +12178,10 @@ packages:
     resolution: {integrity: sha512-Gw/FgHtrLM9WP8P5lLcSGh9OQcrTruWCELAiS48ik1QbL0cH+dfjomiRTUE9zzz+D1N6rOLkwXUvVmXZAsNE0Q==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -12145,6 +12508,11 @@ packages:
   stylis@4.2.0:
     resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
 
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   superjson@2.0.0:
     resolution: {integrity: sha512-W3n+NJ7TFjaLle8ihIIvsr/bbuKpnxeatsyjmhy7iSkom+/cshaHziCQAWXrHGWJVQSQFDOuES6C3nSEvcbrQg==}
     engines: {node: '>=16'}
@@ -12256,6 +12624,13 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
   thread-stream@3.1.0:
     resolution: {integrity: sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==}
 
@@ -12326,6 +12701,10 @@ packages:
   tomlify-j0.4@3.0.0:
     resolution: {integrity: sha512-2Ulkc8T7mXJ2l0W476YC/A209PR38Nw8PuaCNtk9uI3t1zzFdGQeWYGQvmj2PZkVvRC/Yoi4xQKMRnWc/N29tQ==}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   tough-cookie@6.0.0:
     resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
     engines: {node: '>=16'}
@@ -12381,6 +12760,9 @@ packages:
     peerDependencies:
       typescript: '>=4.0.0'
 
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -12593,6 +12975,9 @@ packages:
   unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+
   unist-util-position@5.0.0:
     resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
@@ -12749,6 +13134,11 @@ packages:
       '@types/react':
         optional: true
 
+  use-editable@2.3.3:
+    resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -12970,6 +13360,11 @@ packages:
     resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==}
     engines: {node: '>=20'}
 
+  webpack-bundle-analyzer@4.10.1:
+    resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
+    engines: {node: '>= 10.13.0'}
+    hasBin: true
+
   webpack-sources@3.3.3:
     resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
     engines: {node: '>=10.13.0'}
@@ -13109,6 +13504,18 @@ packages:
     resolution: {integrity: sha512-v2UQ+50TNf2rNHJ8NyWttfm/EJUBWMJcx6ZTYZr6Qp52uuegWw/lBkCtCbnYZEmPRNL61m+u67dAmGxo+HTULA==}
     engines: {node: '>=8'}
 
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   ws@8.18.1:
     resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==}
     engines: {node: '>=10.0.0'}
@@ -14694,6 +15101,19 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@base-ui-components/react@1.0.0-beta.1(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@floating-ui/utils': 0.2.10
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      reselect: 5.1.1
+      tabbable: 6.3.0
+      use-sync-external-store: 1.6.0(react@19.2.0)
+    optionalDependencies:
+      '@types/react': 19.2.2
+
   '@base-ui-components/react@1.0.0-beta.4(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -14814,6 +15234,8 @@ snapshots:
       gonzales-pe: 4.3.0
       node-source-walk: 7.0.1
 
+  '@discoveryjs/json-ext@0.5.7': {}
+
   '@dmsnell/diff-match-patch@1.1.0': {}
 
   '@dual-bundle/import-meta-resolve@4.2.1': {}
@@ -15819,6 +16241,51 @@ snapshots:
 
   '@mdn/browser-compat-data@5.7.6': {}
 
+  '@mdx-js/loader@3.1.1(webpack@5.102.1(jiti@2.6.1))':
+    dependencies:
+      '@mdx-js/mdx': 3.1.1
+      source-map: 0.7.6
+    optionalDependencies:
+      webpack: 5.102.1(jiti@2.6.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/mdx@3.1.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdx': 2.0.13
+      acorn: 8.15.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
+      estree-walker: 3.0.3
+      hast-util-to-jsx-runtime: 2.3.6
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.1(acorn@8.15.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      source-map: 0.7.6
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mdx-js/react@3.1.1(@types/react@19.2.2)(react@19.2.0)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 19.2.2
+      react: 19.2.0
+
   '@mui/base@5.0.0-beta.69(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -16974,33 +17441,73 @@ snapshots:
       - rollup
       - supports-color
 
+  '@next/bundle-analyzer@15.5.6':
+    dependencies:
+      webpack-bundle-analyzer: 4.10.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@next/env@15.5.2': {}
+
   '@next/env@15.5.6': {}
 
   '@next/eslint-plugin-next@15.5.6':
     dependencies:
       fast-glob: 3.3.1
 
+  '@next/mdx@15.5.6(@mdx-js/loader@3.1.1(webpack@5.102.1(jiti@2.6.1)))(@mdx-js/react@3.1.1(@types/react@19.2.2)(react@19.2.0))':
+    dependencies:
+      source-map: 0.7.6
+    optionalDependencies:
+      '@mdx-js/loader': 3.1.1(webpack@5.102.1(jiti@2.6.1))
+      '@mdx-js/react': 3.1.1(@types/react@19.2.2)(react@19.2.0)
+
+  '@next/swc-darwin-arm64@15.5.2':
+    optional: true
+
   '@next/swc-darwin-arm64@15.5.6':
     optional: true
 
+  '@next/swc-darwin-x64@15.5.2':
+    optional: true
+
   '@next/swc-darwin-x64@15.5.6':
     optional: true
 
+  '@next/swc-linux-arm64-gnu@15.5.2':
+    optional: true
+
   '@next/swc-linux-arm64-gnu@15.5.6':
     optional: true
 
-  '@next/swc-linux-arm64-musl@15.5.6':
+  '@next/swc-linux-arm64-musl@15.5.2':
     optional: true
 
-  '@next/swc-linux-x64-gnu@15.5.6':
+  '@next/swc-linux-arm64-musl@15.5.6':
     optional: true
 
-  '@next/swc-linux-x64-musl@15.5.6':
+  '@next/swc-linux-x64-gnu@15.5.2':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@15.5.6':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.5.2':
+    optional: true
+
+  '@next/swc-linux-x64-musl@15.5.6':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@15.5.2':
     optional: true
 
   '@next/swc-win32-arm64-msvc@15.5.6':
     optional: true
 
+  '@next/swc-win32-x64-msvc@15.5.2':
+    optional: true
+
   '@next/swc-win32-x64-msvc@15.5.6':
     optional: true
 
@@ -17587,6 +18094,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@polka/url@1.0.0-next.29': {}
+
   '@popperjs/core@2.11.8': {}
 
   '@protobufjs/aspromise@1.1.2': {}
@@ -19404,6 +19913,8 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/mdx@2.0.13': {}
+
   '@types/micromatch@4.0.10':
     dependencies:
       '@types/braces': 3.0.5
@@ -20230,6 +20741,8 @@ snapshots:
 
   ansis@4.2.0: {}
 
+  any-promise@1.3.0: {}
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -20434,6 +20947,8 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
+  astring@1.9.0: {}
+
   async-function@1.0.0: {}
 
   async-sema@3.1.1: {}
@@ -20950,6 +21465,8 @@ snapshots:
 
   cmd-shim@7.0.0: {}
 
+  collapse-white-space@2.1.0: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -20996,8 +21513,12 @@ snapshots:
 
   commander@2.20.3: {}
 
+  commander@4.1.1: {}
+
   commander@6.2.1: {}
 
+  commander@7.2.0: {}
+
   commander@9.5.0: {}
 
   comment-json@4.3.0:
@@ -21404,6 +21925,8 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
+  debounce@1.2.1: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
@@ -21877,6 +22400,20 @@ snapshots:
       string.prototype.trimleft: 2.1.3
       string.prototype.trimright: 2.1.3
 
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.15.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -22276,8 +22813,35 @@ snapshots:
 
   estraverse@5.3.0: {}
 
+  estree-util-attach-comments@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  estree-util-build-jsx@3.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
+
   estree-util-is-identifier-name@3.0.0: {}
 
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.6
+
+  estree-util-visit@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -23188,6 +23752,27 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  hast-util-to-estree@3.1.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.19
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
   hast-util-to-html@9.0.5:
     dependencies:
       '@types/hast': 3.0.4
@@ -24473,6 +25058,10 @@ snapshots:
 
   map-obj@5.0.2: {}
 
+  markdown-extensions@2.0.0: {}
+
+  markdown-table@3.0.4: {}
+
   markdown-to-jsx@7.7.4(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -24490,6 +25079,13 @@ snapshots:
 
   maxstache@1.0.7: {}
 
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
+
   mdast-util-from-markdown@2.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -24507,6 +25103,63 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -24535,6 +25188,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  mdast-util-mdx@3.0.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
   mdast-util-mdxjs-esm@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
@@ -24640,6 +25303,115 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-expression@3.0.1:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdx-jsx@3.0.2:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
+  micromark-extension-mdx-md@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-mdxjs-esm@3.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
+  micromark-extension-mdxjs@3.0.0:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-destination@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
@@ -24653,6 +25425,18 @@ snapshots:
       micromark-util-symbol: 2.0.1
       micromark-util-types: 2.0.2
 
+  micromark-factory-mdx-expression@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
+
   micromark-factory-space@2.0.1:
     dependencies:
       micromark-util-character: 2.1.1
@@ -24705,6 +25489,16 @@ snapshots:
 
   micromark-util-encode@2.0.1: {}
 
+  micromark-util-events-to-acorn@2.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
+
   micromark-util-html-tag-name@2.0.1: {}
 
   micromark-util-normalize-identifier@2.0.1:
@@ -24911,6 +25705,8 @@ snapshots:
 
   mri@1.2.0: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
@@ -24969,6 +25765,12 @@ snapshots:
       safe-buffer: 5.1.2
       sqlstring: 2.3.1
 
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
   named-placeholders@1.1.3:
     dependencies:
       lru-cache: 7.18.3
@@ -25131,6 +25933,30 @@ snapshots:
 
   netlify-redirector@0.5.0: {}
 
+  next@15.5.2(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      '@next/env': 15.5.2
+      '@swc/helpers': 0.5.15
+      caniuse-lite: 1.0.30001753
+      postcss: 8.4.31
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      styled-jsx: 5.1.6(@babel/core@7.28.5)(babel-plugin-macros@3.1.0)(react@19.2.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 15.5.2
+      '@next/swc-darwin-x64': 15.5.2
+      '@next/swc-linux-arm64-gnu': 15.5.2
+      '@next/swc-linux-arm64-musl': 15.5.2
+      '@next/swc-linux-x64-gnu': 15.5.2
+      '@next/swc-linux-x64-musl': 15.5.2
+      '@next/swc-win32-arm64-msvc': 15.5.2
+      '@next/swc-win32-x64-msvc': 15.5.2
+      '@opentelemetry/api': 1.9.0
+      sharp: 0.34.4
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
   next@15.5.6(@babel/core@7.28.5)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       '@next/env': 15.5.6
@@ -25508,6 +26334,8 @@ snapshots:
 
   openapi-typescript-helpers@0.0.15: {}
 
+  opener@1.5.2: {}
+
   oppa@0.4.0:
     dependencies:
       chalk: 4.1.2
@@ -25894,6 +26722,8 @@ snapshots:
       sonic-boom: 4.2.0
       thread-stream: 3.1.0
 
+  pirates@4.0.7: {}
+
   piscina@4.8.0:
     optionalDependencies:
       '@napi-rs/nice': 1.1.1
@@ -26376,6 +27206,12 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.0(react@19.2.0)
 
+  react-runner@1.0.5(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+      sucrase: 3.35.0
+
   react-style-singleton@2.2.3(@types/react@19.2.2)(react@19.2.0):
     dependencies:
       get-nonce: 1.0.1
@@ -26503,6 +27339,35 @@ snapshots:
 
   real-require@0.2.0: {}
 
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.1(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   recursive-readdir@2.2.3:
     dependencies:
       minimatch: 3.1.2
@@ -26585,6 +27450,14 @@ snapshots:
       hast-util-from-html: 2.0.3
       unified: 11.0.5
 
+  rehype-recma@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.3
+    transitivePeerDependencies:
+      - supports-color
+
   rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -26598,6 +27471,24 @@ snapshots:
       core-js: 3.46.0
       exit-hook: 4.0.0
 
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-mdx@3.1.1:
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4
@@ -26615,6 +27506,12 @@ snapshots:
       unified: 11.0.5
       vfile: 6.0.3
 
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   remove-trailing-separator@1.1.0: {}
 
   require-directory@2.1.1: {}
@@ -26886,6 +27783,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  server-only@0.0.1: {}
+
   set-blocking@2.0.0: {}
 
   set-cookie-parser@2.7.2: {}
@@ -27013,6 +27912,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   slash@2.0.0: {}
@@ -27397,6 +28302,16 @@ snapshots:
 
   stylis@4.2.0: {}
 
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
   superjson@2.0.0:
     dependencies:
       copy-anything: 3.0.5
@@ -27517,6 +28432,14 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
   thread-stream@3.1.0:
     dependencies:
       real-require: 0.2.0
@@ -27584,6 +28507,8 @@ snapshots:
 
   tomlify-j0.4@3.0.0: {}
 
+  totalist@3.0.1: {}
+
   tough-cookie@6.0.0:
     dependencies:
       tldts: 7.0.17
@@ -27625,6 +28550,8 @@ snapshots:
       picomatch: 4.0.3
       typescript: 5.9.3
 
+  ts-interface-checker@0.1.13: {}
+
   ts-node@10.9.2(@types/node@22.19.0)(typescript@5.9.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -27843,6 +28770,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  unist-util-position-from-estree@2.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-position@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -27989,6 +28920,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.2
 
+  use-editable@2.3.3(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   use-sidecar@1.1.3(@types/react@19.2.2)(react@19.2.0):
     dependencies:
       detect-node-es: 1.1.0
@@ -28155,6 +29090,25 @@ snapshots:
 
   webidl-conversions@8.0.0: {}
 
+  webpack-bundle-analyzer@4.10.1:
+    dependencies:
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.15.0
+      acorn-walk: 8.3.4
+      commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
+      gzip-size: 6.0.0
+      html-escaper: 2.0.2
+      is-plain-object: 5.0.0
+      opener: 1.5.2
+      picocolors: 1.1.1
+      sirv: 2.0.4
+      ws: 7.5.10
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   webpack-sources@3.3.3: {}
 
   webpack@5.102.1(jiti@2.6.1):
@@ -28369,6 +29323,8 @@ snapshots:
       type-fest: 0.4.1
       write-json-file: 3.2.0
 
+  ws@7.5.10: {}
+
   ws@8.18.1: {}
 
   ws@8.18.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d7baa4c3b..773bfc338 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -2,6 +2,7 @@ packages:
   - 'packages/*'
   - 'apps/*'
   - 'test/*'
+  - 'docs'
 overrides:
   # This is a workaround for the issue when the same type refers to @types/eslint for one instance
   # and to eslint for another instance, causing a conflict.
diff --git a/tsconfig.json b/tsconfig.json
index a247660fe..a78fbb3e1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
     { "path": "packages/docs-infra" },
     { "path": "packages/netlify-cache" },
     { "path": "tsconfig.node.json" },
-    { "path": "scripts" }
+    { "path": "scripts" },
+    { "path": "docs" }
   ],
   "files": []
 }