Pull upstream 202604

CLAUDE.md

@@ -149,7 +149,7 @@ Code blocks support language-specific highlighting via Shiki. Common languages:
 The documentation site uses a sophisticated MDX processing pipeline:
 
 1. **Build Time**: MDX files in `/src/app/` are processed through Next.js's MDX loader
-2. **Plugins Chain**: 
+2. **Plugins Chain**:
    - Remark plugins handle Markdown transformations
    - Rehype plugins process HTML (adding external link icons, etc.)
    - Recma plugins handle JavaScript/JSX transformations
@@ -238,4 +238,3 @@ Update this note at each end of the task with the following format:
 ```
 
 - **IMPORTANT**: Do not forget to update the note at the end of each task!!!
-

eslint.config.mjs

@@ -0,0 +1,25 @@
+import nextCoreWebVitals from 'eslint-config-next/core-web-vitals'
+
+const config = [
+  ...nextCoreWebVitals,
+  {
+    ignores: ['.next/**', 'node_modules/**', 'public/**']
+  },
+  {
+    rules: {
+      // Disabled to preserve patterns inherited from the upstream Tailwind UI
+      // Protocol template:
+      //   - setMounted(true) / setModifierKey(...) in useEffect for SSR/CSR
+      //     hydration gates (ThemeToggle, Search)
+      //   - inputElement: inputRef.current passed during render to autocomplete
+      //     getFormProps (Search)
+      // Both are upstream's chosen patterns; refactoring would diverge from the
+      // template without functional benefit. Revisit if upstream itself migrates
+      // these to useSyncExternalStore / ref-as-prop.
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/refs': 'off'
+    }
+  }
+]
+
+export default config

mdx-components.tsx

@@ -0,0 +1,10 @@
+import { type MDXComponents } from 'mdx/types'
+
+import * as mdxComponents from '@/components/mdx'
+
+export function useMDXComponents(components: MDXComponents) {
+  return {
+    ...components,
+    ...mdxComponents
+  }
+}

next.config.mjs

@@ -1,26 +1,29 @@
 import nextMDX from '@next/mdx'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import { recmaPlugins } from './src/mdx/recma.mjs'
 import { rehypePlugins } from './src/mdx/rehype.mjs'
 import { remarkPlugins } from './src/mdx/remark.mjs'
 import withSearch from './src/mdx/search.mjs'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
 const withMDX = nextMDX({
   options: {
     remarkPlugins,
     rehypePlugins,
-    recmaPlugins,
-  },
+    recmaPlugins
+  }
 })
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
-  experimental: {
-    outputFileTracingIncludes: {
-      '/**/*': ['./src/app/**/*.mdx'],
-    },
-  },
+  outputFileTracingRoot: __dirname,
+  outputFileTracingIncludes: {
+    '/**/*': ['./src/app/**/*.mdx']
+  }
 }
 
 export default withSearch(withMDX(nextConfig))