[docs-infra] Add data-autogenerated-from to Pages Index

docs/app/docs-infra/commands/page.mdx

@@ -12,7 +12,7 @@
 
 The `validate` command ensures that committed files match the expected output. It processes all `page.mdx` files to verify parent indexes are up-to-date, and all `types.ts` files to ensure generated `types.md` documentation is current.
 
-<details>
+<details data-autogenerated-from="./validate">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/components/page.mdx

@@ -16,7 +16,7 @@
 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.
 
-<details>
+<details data-autogenerated-from="./code-highlighter">
 
 <summary>Outline</summary>
 
@@ -71,7 +71,7 @@ It supports both static code blocks and interactive demos with component preview
 
 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.
 
-<details>
+<details data-autogenerated-from="./code-provider">
 
 <summary>Outline</summary>
 
@@ -99,7 +99,7 @@ The `CodeProvider` component provides client-side functions for fetching source
 
 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.
 
-<details>
+<details data-autogenerated-from="./code-controller-context">
 
 <summary>Outline</summary>
 
@@ -134,7 +134,7 @@ The `CodeControllerContext` provides a React context for managing controlled cod
 
 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`](../../factories/abstract-create-demo-client/page.mdx) to make precomputed externals available to child components.
 
-<details>
+<details data-autogenerated-from="./code-externals-context">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/conventions/page.mdx

@@ -16,7 +16,7 @@
 Every documentation file should be useful as a static markdown document
 before any React components or interactivity are added.
 
-<details>
+<details data-autogenerated-from="./markdown-first">
 
 <summary>Outline</summary>
 
@@ -39,7 +39,7 @@ All useful content should be represented in the HTML without JavaScript.
 This ensures crawlers, screen readers, and users on slow connections
 can access documentation content immediately.
 
-<details>
+<details data-autogenerated-from="./semantic-html">
 
 <summary>Outline</summary>
 
@@ -58,7 +58,7 @@ can access documentation content immediately.
 A consistent file structure makes it easy to find what you need.
 The patterns below apply across the repository.
 
-<details>
+<details data-autogenerated-from="./file-navigation">
 
 <summary>Outline</summary>
 
@@ -89,7 +89,7 @@ The patterns below apply across the repository.
 
 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. `section:subsection`.
 
-<details>
+<details data-autogenerated-from="./fragment-delimiters">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/factories/page.mdx

@@ -16,7 +16,7 @@
 
 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.
 
-<details>
+<details data-autogenerated-from="./abstract-create-demo">
 
 <summary>Outline</summary>
 
@@ -44,7 +44,7 @@ The `abstractCreateDemo` function helps you create structured demo factories tha
 
 The `createSitemap` factory function defines sitemap data for documentation sites. It works with the webpack loader for build-time precomputation in Next.js builds.
 
-<details>
+<details data-autogenerated-from="./create-sitemap">
 
 <summary>Outline</summary>
 
@@ -72,7 +72,7 @@ The `createSitemap` factory function defines sitemap data for documentation site
 
 The `abstractCreateTypes` function helps you create structured type documentation factories that work seamlessly with the [`loadPrecomputedTypes`](../../pipeline/load-precomputed-types/page.mdx) loader. It provides a standardized way to create type documentation components that display TypeScript type information extracted at build time.
 
-<details>
+<details data-autogenerated-from="./abstract-create-types">
 
 <summary>Outline</summary>
 
@@ -119,7 +119,7 @@ The `abstractCreateTypes` function helps you create structured type documentatio
 
 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.
 
-<details>
+<details data-autogenerated-from="./abstract-create-demo-client">
 
 <summary>Outline</summary>
 
@@ -150,7 +150,7 @@ The `abstractCreateDemoClient` function helps you create client-side demo provid
 
 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.
 
-<details>
+<details data-autogenerated-from="./create-demo-data">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/hooks/page.mdx

@@ -21,7 +21,7 @@
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-code">
 
 <summary>Outline</summary>
 
@@ -92,7 +92,7 @@ The `useCode` hook provides programmatic access to code display, editing, and tr
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-demo">
 
 <summary>Outline</summary>
 
@@ -169,7 +169,7 @@ The `useDemo` hook extends `useCode` functionality to provide a complete demo re
 
 The `useSearch` hook provides a powerful client-side search engine using [Orama](https://github.com/oramasearch/orama) for documentation sites. It handles index creation, search queries, and result formatting with built-in support for stemming, grouping, faceting, and customizable result types.
 
-<details>
+<details data-autogenerated-from="./use-search">
 
 <summary>Outline</summary>
 
@@ -209,7 +209,7 @@ The `useSearch` hook provides a powerful client-side search engine using [Orama]
 
 Access processed type information within a `TypesTable` component using the [Props Context Layering](../../patterns/props-context-layering/page.mdx) pattern.
 
-<details>
+<details data-autogenerated-from="./use-types">
 
 <summary>Outline</summary>
 
@@ -236,7 +236,7 @@ Access processed type information within a `TypesTable` component using the [Pro
 
 Look up individual type data by name from the nearest `TypesDataProvider`.
 
-<details>
+<details data-autogenerated-from="./use-type">
 
 <summary>Outline</summary>
 
@@ -276,7 +276,7 @@ Look up individual type data by name from the nearest `TypesDataProvider`.
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-preference">
 
 <summary>Outline</summary>
 
@@ -310,7 +310,7 @@ The `usePreference` hook provides specialized preference management for code dem
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-url-hash-state">
 
 <summary>Outline</summary>
 
@@ -340,7 +340,7 @@ The `useUrlHashState` hook provides a simple way to synchronize component state
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-local-storage-state">
 
 <summary>Outline</summary>
 
@@ -376,7 +376,7 @@ The `useLocalStorageState` hook provides persistent state management using local
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-copier">
 
 <summary>Outline</summary>
 
@@ -406,7 +406,7 @@ The `useCopier` hook provides robust clipboard copy functionality with success s
 
 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.
 
-<details>
+<details data-autogenerated-from="./use-errors">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/hooks/use-types/demos/page.mdx

@@ -17,7 +17,7 @@
 
 No description available
 
-<details>
+<details data-autogenerated-from="./basic">
 
 <summary>Outline</summary>
 
@@ -33,7 +33,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./hook">
 
 <summary>Outline</summary>
 
@@ -48,7 +48,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./data-attr">
 
 <summary>Outline</summary>
 
@@ -65,7 +65,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./blocks">
 
 <summary>Outline</summary>
 
@@ -83,7 +83,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./blocks-data-attr">
 
 <summary>Outline</summary>
 
@@ -104,7 +104,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./blocks-inherited">
 
 <summary>Outline</summary>
 
@@ -123,7 +123,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./function">
 
 <summary>Outline</summary>
 
@@ -139,7 +139,7 @@ No description available
 
 No description available
 
-<details>
+<details data-autogenerated-from="./class">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/overview/page.mdx

@@ -13,7 +13,7 @@
 
 This page explains the overall architecture of `@mui/internal-docs-infra`, including data flows, key design decisions, and how the various pieces fit together.
 
-<details>
+<details data-autogenerated-from="./architecture">
 
 <summary>Outline</summary>
 
@@ -43,7 +43,7 @@ This page explains the overall architecture of `@mui/internal-docs-infra`, inclu
 
 This guide covers how to set up your development environment and contribute to `@mui/internal-docs-infra`.
 
-<details>
+<details data-autogenerated-from="./contributing">
 
 <summary>Outline</summary>
 

docs/app/docs-infra/patterns/page.mdx

@@ -14,7 +14,7 @@
 
 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.
 
-<details>
+<details data-autogenerated-from="./built-factories">
 
 <summary>Outline</summary>
 
@@ -36,7 +36,7 @@ At its core, a factory only needs a URL. In TypeScript we can rely on `import.me
 
 **Purpose**: Enable isomorphic components to work seamlessly with React Server Components while maintaining a single, ergonomic API.
 
-<details>
+<details data-autogenerated-from="./props-context-layering">
 
 <summary>Outline</summary>
 
@@ -57,7 +57,7 @@ At its core, a factory only needs a URL. In TypeScript we can rely on `import.me
 
 HAST is the core data structure used throughout this package for syntax highlighting and markdown processing. Understanding HAST helps you work effectively with the docs infra.
 
-<details>
+<details data-autogenerated-from="./hast">
 
 <summary>Outline</summary>