@mui/internal-docs-infra 0.2.3-canary.0 → 0.2.3-canary.10

package/esm/pipeline/loaderUtils/processRelativeImports.js

@@ -36,8 +36,13 @@ function processFlatMode(importResult, resolvedPathsMap) {
     var file = _fileMapping[_i];
     var fileName = file.segments[file.segments.length - 1];
     var isIndexFile = fileName.startsWith('index.');
+    var isUnderscoreIndexFile = fileName.startsWith('_index.');
     var candidateName = void 0;
-    if (isIndexFile) {
+    if (isUnderscoreIndexFile) {
+      // Files starting with "_index." should be treated as direct index imports
+      // e.g., "../../dir/_index.module.css" -> "index.module.css"
+      candidateName = "index".concat(file.extension);
+    } else if (isIndexFile) {
       // Check if the original import was a direct index file (e.g., "./index.ext")
       var originalImportParts = file.originalImportPath.split('/');
       var isDirectIndexImport = originalImportParts.length === 2 && originalImportParts[0] === '.' && originalImportParts[1].startsWith('index.');
@@ -131,9 +136,13 @@ function processFlatMode(importResult, resolvedPathsMap) {
                   var _file = _step.value;
                   var _fileName = _file.segments[_file.segments.length - 1];
                   var _isIndexFile = _fileName.startsWith('index.');
+                  var _isUnderscoreIndexFile = _fileName.startsWith('_index.');
                   var distinguishingSegment = _file.segments[_distinguishingIndex];
                   var finalName = void 0;
-                  if (_isIndexFile) {
+                  if (_isUnderscoreIndexFile) {
+                    // Files starting with "_index." should always use "index" as the base name
+                    finalName = "".concat(distinguishingSegment, "/index").concat(_file.extension);
+                  } else if (_isIndexFile) {
                     // Check if this was a direct index import
                     var _originalImportParts = _file.originalImportPath.split('/');
                     var _isDirectIndexImport = _originalImportParts.length === 2 && _originalImportParts[0] === '.' && _originalImportParts[1].startsWith('index.');
@@ -202,9 +211,13 @@ function processFlatMode(importResult, resolvedPathsMap) {
           var _file2 = _step3.value;
           var _fileName2 = _file2.segments[_file2.segments.length - 1];
           var _isIndexFile2 = _fileName2.startsWith('index.');
+          var _isUnderscoreIndexFile2 = _fileName2.startsWith('_index.');
           var _distinguishingSegment = _file2.segments[distinguishingIndex];
           var _finalName = void 0;
-          if (_isIndexFile2) {
+          if (_isUnderscoreIndexFile2) {
+            // Files starting with "_index." should always use "index" as the base name
+            _finalName = "".concat(_distinguishingSegment, "/index").concat(_file2.extension);
+          } else if (_isIndexFile2) {
             // Check if this was a direct index import
             var _originalImportParts2 = _file2.originalImportPath.split('/');
             var _isDirectIndexImport2 = _originalImportParts2.length === 2 && _originalImportParts2[0] === '.' && _originalImportParts2[1].startsWith('index.');

package/esm/useCode/Pre.js

@@ -9,6 +9,35 @@ import { decompressSync, strFromU8 } from 'fflate';
 import { decode } from 'uint8-to-base64';
 import { hastToJsx } from "../pipeline/hastUtils/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+var hastChildrenCache = new WeakMap();
+var textChildrenCache = new WeakMap();
+function renderCode(hastChildren, renderHast, text) {
+  if (renderHast) {
+    var jsx = hastChildrenCache.get(hastChildren);
+    if (!jsx) {
+      jsx = hastToJsx({
+        type: 'root',
+        children: hastChildren
+      });
+      hastChildrenCache.set(hastChildren, jsx);
+    }
+    return jsx;
+  }
+  if (text !== undefined) {
+    return text;
+  }
+  var txt = textChildrenCache.get(hastChildren);
+  if (!txt) {
+    txt = toText({
+      type: 'root',
+      children: hastChildren
+    }, {
+      whitespace: 'pre'
+    });
+    textChildrenCache.set(hastChildren, txt);
+  }
+  return txt;
+}
 export function Pre(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -96,49 +125,6 @@ export function Pre(_ref) {
       observer.current.observe(node);
     }
   }, []);
-  var hastChildrenCache = React.useMemo(function () {
-    return hast == null ? void 0 : hast.children.map(function () {
-      return null;
-    });
-  }, [hast]);
-  var textChildrenCache = React.useMemo(function () {
-    return hast == null ? void 0 : hast.children.map(function () {
-      return null;
-    });
-  }, [hast]);
-  var renderCode = React.useCallback(function (index, hastChildren, renderHast, text) {
-    if (renderHast) {
-      var _cached = hastChildrenCache == null ? void 0 : hastChildrenCache[index];
-      if (_cached) {
-        return _cached;
-      }
-      var jsx = hastToJsx({
-        type: 'root',
-        children: hastChildren
-      });
-      if (hastChildrenCache) {
-        hastChildrenCache[index] = jsx;
-      }
-      return jsx;
-    }
-    if (text !== undefined) {
-      return text;
-    }
-    var cached = textChildrenCache == null ? void 0 : textChildrenCache[index];
-    if (cached) {
-      return cached;
-    }
-    var txt = toText({
-      type: 'root',
-      children: hastChildren
-    }, {
-      whitespace: 'pre'
-    });
-    if (textChildrenCache) {
-      textChildrenCache[index] = txt;
-    }
-    return txt;
-  }, [hastChildrenCache, textChildrenCache]);
   var frames = React.useMemo(function () {
     return hast == null ? void 0 : hast.children.map(function (child, index) {
       if (child.type !== 'element') {
@@ -151,7 +137,7 @@ export function Pre(_ref) {
           className: "frame",
           "data-frame": index,
           ref: observeFrame,
-          children: renderCode(index, child.children, shouldHighlight && isVisible, (_child$properties = child.properties) != null && _child$properties.dataAsString ? String((_child$properties2 = child.properties) == null ? void 0 : _child$properties2.dataAsString) : undefined)
+          children: renderCode(child.children, shouldHighlight && isVisible, (_child$properties = child.properties) != null && _child$properties.dataAsString ? String((_child$properties2 = child.properties) == null ? void 0 : _child$properties2.dataAsString) : undefined)
         }, index);
       }
       return /*#__PURE__*/_jsx(React.Fragment, {
@@ -160,7 +146,7 @@ export function Pre(_ref) {
         })
       }, index);
     });
-  }, [hast, renderCode, observeFrame, shouldHighlight, visibleFrames]);
+  }, [hast, observeFrame, shouldHighlight, visibleFrames]);
   return /*#__PURE__*/_jsx("pre", {
     ref: bindIntersectionObserver,
     className: className,

package/esm/useCode/useCode.d.ts

@@ -9,6 +9,19 @@ export type UseCodeOpts = {
   githubUrlPrefix?: string;
   initialVariant?: string;
   initialTransform?: string;
+  /**
+   * Controls hash removal behavior when user interacts with file tabs:
+   * - 'remove-hash': Remove entire hash (default)
+   * - 'remove-filename': Remove only filename, keep variant in hash
+   */
+  fileHashMode?: 'remove-hash' | 'remove-filename';
+  /**
+   * Controls when to save hash variant to localStorage:
+   * - 'on-load': Save immediately when page loads with hash
+   * - 'on-interaction': Save only when user clicks a tab (default)
+   * - 'never': Never save hash variant to localStorage
+   */
+  saveHashVariantToLocalStorage?: 'on-load' | 'on-interaction' | 'never';
 };
 type UserProps<T extends {} = {}> = T & {
   name?: string;

package/esm/useCode/useCode.js

@@ -18,7 +18,11 @@ export function useCode(contentProps, opts) {
     initialVariant = _ref.initialVariant,
     initialTransform = _ref.initialTransform,
     preClassName = _ref.preClassName,
-    preRef = _ref.preRef;
+    preRef = _ref.preRef,
+    _ref$fileHashMode = _ref.fileHashMode,
+    fileHashMode = _ref$fileHashMode === void 0 ? 'remove-hash' : _ref$fileHashMode,
+    _ref$saveHashVariantT = _ref.saveHashVariantToLocalStorage,
+    saveHashVariantToLocalStorage = _ref$saveHashVariantT === void 0 ? 'on-interaction' : _ref$saveHashVariantT;
 
   // Safely try to get context values - will be undefined if not in context
   var context = useCodeHighlighterContextOptional();
@@ -58,9 +62,10 @@ export function useCode(contentProps, opts) {
     });
   }, [contentProps, context == null ? void 0 : context.url]);
 
-  // Sub-hook: UI State Management
+  // Sub-hook: UI State Management (needs slug to check for relevant hash)
   var uiState = useUIState({
-    defaultOpen: defaultOpen
+    defaultOpen: defaultOpen,
+    mainSlug: userProps.slug
   });
 
   // Sub-hook: Variant Selection
@@ -68,7 +73,8 @@ export function useCode(contentProps, opts) {
     effectiveCode: effectiveCode,
     initialVariant: initialVariant,
     variantType: contentProps.variantType,
-    mainSlug: userProps.slug
+    mainSlug: userProps.slug,
+    saveHashVariantToLocalStorage: saveHashVariantToLocalStorage
   });
 
   // Sub-hook: Transform Management
@@ -89,11 +95,14 @@ export function useCode(contentProps, opts) {
     selectedVariantKey: variantSelection.selectedVariantKey,
     selectVariant: variantSelection.selectVariantProgrammatic,
     variantKeys: variantSelection.variantKeys,
-    initialVariant: initialVariant,
     shouldHighlight: shouldHighlight,
     preClassName: preClassName,
     preRef: preRef,
-    effectiveCode: effectiveCode
+    effectiveCode: effectiveCode,
+    fileHashMode: fileHashMode,
+    saveHashVariantToLocalStorage: saveHashVariantToLocalStorage,
+    saveVariantToLocalStorage: variantSelection.saveVariantToLocalStorage,
+    hashVariant: variantSelection.hashVariant
   });
 
   // Sub-hook: Copy Functionality

package/esm/useCode/useFileNavigation.d.ts

@@ -22,11 +22,14 @@ interface UseFileNavigationProps {
   selectedVariantKey?: string;
   variantKeys?: string[];
   shouldHighlight: boolean;
-  initialVariant?: string;
   preClassName?: string;
   preRef?: React.Ref<HTMLPreElement>;
   effectiveCode?: Code;
   selectVariant?: React.Dispatch<React.SetStateAction<string>>;
+  fileHashMode?: 'remove-hash' | 'remove-filename';
+  saveHashVariantToLocalStorage?: 'on-load' | 'on-interaction' | 'never';
+  saveVariantToLocalStorage?: (variant: string) => void;
+  hashVariant?: string | null;
 }
 export interface UseFileNavigationResult {
   selectedFileName: string | undefined;
@@ -54,11 +57,14 @@ export declare function useFileNavigation({
   mainSlug,
   selectedVariantKey,
   variantKeys,
-  initialVariant,
   shouldHighlight,
   preClassName,
   preRef,
   effectiveCode,
-  selectVariant
+  selectVariant,
+  fileHashMode,
+  saveHashVariantToLocalStorage,
+  saveVariantToLocalStorage,
+  hashVariant
 }: UseFileNavigationProps): UseFileNavigationResult;
 export {};

package/esm/useCode/useFileNavigation.js

@@ -37,13 +37,13 @@ export function isHashRelevantToDemo(urlHash, mainSlug) {
 
 /**
  * Generates a file slug based on main slug, file name, and variant name
+ * All variants except "Default" include the variant name in the hash
  * @param mainSlug - The main component/demo slug
  * @param fileName - The file name
  * @param variantName - The variant name
- * @param isInitialVariant - Whether this is the initial/default variant
  * @returns Generated file slug
  */
-function generateFileSlug(mainSlug, fileName, variantName, isInitialVariant) {
+function generateFileSlug(mainSlug, fileName, variantName) {
   // Extract base name from filename (strip extension)
   var lastDotIndex = fileName.lastIndexOf('.');
   var baseName = lastDotIndex !== -1 ? fileName.substring(0, lastDotIndex) : fileName;
@@ -62,8 +62,9 @@ function generateFileSlug(mainSlug, fileName, variantName, isInitialVariant) {
     return kebabFileName;
   }
 
-  // Format: mainSlug:fileName.ext (for initial variant) or mainSlug:variantName:fileName.ext
-  if (isInitialVariant) {
+  // Format: mainSlug:fileName.ext (for Default variant) or mainSlug:variantName:fileName.ext
+  // "Default" variant is treated specially and doesn't include variant name in hash
+  if (variantName === 'Default') {
     return "".concat(kebabMainSlug, ":").concat(kebabFileName);
   }
   return "".concat(kebabMainSlug, ":").concat(kebabVariantName, ":").concat(kebabFileName);
@@ -80,29 +81,23 @@ export function useFileNavigation(_ref) {
     selectedVariantKey = _ref$selectedVariantK === void 0 ? '' : _ref$selectedVariantK,
     _ref$variantKeys = _ref.variantKeys,
     variantKeys = _ref$variantKeys === void 0 ? [] : _ref$variantKeys,
-    initialVariant = _ref.initialVariant,
     shouldHighlight = _ref.shouldHighlight,
     preClassName = _ref.preClassName,
     preRef = _ref.preRef,
     effectiveCode = _ref.effectiveCode,
-    selectVariant = _ref.selectVariant;
+    selectVariant = _ref.selectVariant,
+    _ref$fileHashMode = _ref.fileHashMode,
+    fileHashMode = _ref$fileHashMode === void 0 ? 'remove-hash' : _ref$fileHashMode,
+    _ref$saveHashVariantT = _ref.saveHashVariantToLocalStorage,
+    saveHashVariantToLocalStorage = _ref$saveHashVariantT === void 0 ? 'on-interaction' : _ref$saveHashVariantT,
+    saveVariantToLocalStorage = _ref.saveVariantToLocalStorage,
+    hashVariant = _ref.hashVariant;
   // Keep selectedFileName as untransformed filename for internal tracking
   var _React$useState = React.useState(selectedVariant == null ? void 0 : selectedVariant.fileName),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectedFileNameInternal = _React$useState2[0],
     setSelectedFileNameInternal = _React$useState2[1];
 
-  // Track user interaction locally
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hasUserInteraction = _React$useState4[0],
-    setHasUserInteraction = _React$useState4[1];
-
-  // Helper to mark user interaction
-  var markUserInteraction = React.useCallback(function () {
-    setHasUserInteraction(true);
-  }, []);
-
   // Use the simplified URL hash hook
   var _useUrlHashState = useUrlHashState(),
     _useUrlHashState2 = _slicedToArray(_useUrlHashState, 2),
@@ -113,6 +108,37 @@ export function useFileNavigation(_ref) {
   var pendingFileSelection = React.useRef(null);
   var justCompletedPendingSelection = React.useRef(false);
 
+  // Track the previous variant key to detect user-initiated changes
+  var prevVariantKeyRef = React.useRef(selectedVariantKey);
+  var _React$useState3 = React.useState(selectedVariantKey),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    prevVariantKeyState = _React$useState4[0],
+    setPrevVariantKeyState = _React$useState4[1];
+  var isInitialMount = React.useRef(true);
+
+  // Detect if the current variant change was driven by a hash change
+  // A variant change is hash-driven if the hash has a variant that matches where we're going
+  // AND we weren't already on that variant (i.e., the hash is what triggered the change)
+  var _React$useState5 = React.useState(hashVariant || null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    prevHashVariant = _React$useState6[0],
+    setPrevHashVariant = _React$useState6[1];
+  var isHashDrivenVariantChange = hashVariant === selectedVariantKey && prevVariantKeyState !== selectedVariantKey;
+
+  // Update prevHashVariant when hashVariant changes
+  React.useEffect(function () {
+    if (hashVariant !== prevHashVariant) {
+      setPrevHashVariant(hashVariant || null);
+    }
+  }, [hashVariant, prevHashVariant]);
+
+  // Update prevVariantKeyState when variant changes
+  React.useEffect(function () {
+    if (selectedVariantKey !== prevVariantKeyState) {
+      setPrevVariantKeyState(selectedVariantKey);
+    }
+  }, [selectedVariantKey, prevVariantKeyState]);
+
   // Helper function to check URL hash and switch to matching file
   var checkUrlHashAndSelectFile = React.useCallback(function () {
     if (!hash) {
@@ -125,11 +151,9 @@ export function useFileNavigation(_ref) {
 
     // Step 1: Check current variant (if we have one)
     if (selectedVariant) {
-      var isInitialVariant = initialVariant ? selectedVariantKey === initialVariant : variantKeys.length === 0 || selectedVariantKey === variantKeys[0];
-
       // Check main file
       if (selectedVariant.fileName) {
-        var mainFileSlug = generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey, isInitialVariant);
+        var mainFileSlug = generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey);
         if (hash === mainFileSlug) {
           matchingFileName = selectedVariant.fileName;
           matchingVariantKey = selectedVariantKey;
@@ -140,7 +164,7 @@ export function useFileNavigation(_ref) {
       if (!matchingFileName && selectedVariant.extraFiles) {
         for (var _i = 0, _Object$keys = Object.keys(selectedVariant.extraFiles); _i < _Object$keys.length; _i++) {
           var fileName = _Object$keys[_i];
-          var fileSlug = generateFileSlug(mainSlug, fileName, selectedVariantKey, isInitialVariant);
+          var fileSlug = generateFileSlug(mainSlug, fileName, selectedVariantKey);
           if (hash === fileSlug) {
             matchingFileName = fileName;
             matchingVariantKey = selectedVariantKey;
@@ -156,7 +180,7 @@ export function useFileNavigation(_ref) {
         try {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var file = _step.value;
-            var _fileSlug = generateFileSlug(mainSlug, file.originalName, selectedVariantKey, isInitialVariant);
+            var _fileSlug = generateFileSlug(mainSlug, file.originalName, selectedVariantKey);
             if (hash === _fileSlug) {
               matchingFileName = file.originalName;
               matchingVariantKey = selectedVariantKey;
@@ -181,11 +205,10 @@ export function useFileNavigation(_ref) {
         if (variantKey === selectedVariantKey || !variant || typeof variant === 'string') {
           continue;
         }
-        var _isInitialVariant = initialVariant ? variantKey === initialVariant : variantKeys.length === 0 || variantKey === variantKeys[0];
 
         // Check main file
         if (variant.fileName) {
-          var _mainFileSlug = generateFileSlug(mainSlug, variant.fileName, variantKey, _isInitialVariant);
+          var _mainFileSlug = generateFileSlug(mainSlug, variant.fileName, variantKey);
           if (hash === _mainFileSlug) {
             matchingFileName = variant.fileName;
             matchingVariantKey = variantKey;
@@ -197,7 +220,7 @@ export function useFileNavigation(_ref) {
         if (!matchingFileName && variant.extraFiles) {
           for (var _i3 = 0, _Object$keys2 = Object.keys(variant.extraFiles); _i3 < _Object$keys2.length; _i3++) {
             var _fileName = _Object$keys2[_i3];
-            var _fileSlug2 = generateFileSlug(mainSlug, _fileName, variantKey, _isInitialVariant);
+            var _fileSlug2 = generateFileSlug(mainSlug, _fileName, variantKey);
             if (hash === _fileSlug2) {
               matchingFileName = _fileName;
               matchingVariantKey = variantKey;
@@ -223,16 +246,13 @@ export function useFileNavigation(_ref) {
       // Set the file if we're in the correct variant
       pendingFileSelection.current = null;
       setSelectedFileNameInternal(matchingFileName);
-      markUserInteraction();
     }
-  }, [hash, selectedVariant, selectedVariantKey, variantKeys, initialVariant, mainSlug, transformedFiles, effectiveCode, selectVariant, markUserInteraction]);
+  }, [hash, selectedVariant, selectedVariantKey, mainSlug, transformedFiles, effectiveCode, selectVariant]);
 
   // Run hash check when URL hash changes to select the matching file
-  // Only depends on hash to avoid re-running when the callback recreates due to variant state changes
   React.useEffect(function () {
     checkUrlHashAndSelectFile();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hash]);
+  }, [checkUrlHashAndSelectFile]);
 
   // When variant switches with a pending file selection, complete the file selection
   React.useEffect(function () {
@@ -241,11 +261,10 @@ export function useFileNavigation(_ref) {
       pendingFileSelection.current = null;
       justCompletedPendingSelection.current = true;
       setSelectedFileNameInternal(fileToSelect);
-      markUserInteraction();
     } else {
       justCompletedPendingSelection.current = false;
     }
-  }, [selectedVariantKey, selectedVariant, markUserInteraction]);
+  }, [selectedVariantKey, selectedVariant]);
 
   // Reset selectedFileName when variant changes
   React.useEffect(function () {
@@ -263,38 +282,49 @@ export function useFileNavigation(_ref) {
     }
   }, [selectedVariant, selectedFileNameInternal]);
 
-  // Update URL when variant changes (to reflect new slug for current file)
+  // Update hash when variant changes (user-initiated variant switch)
   React.useEffect(function () {
-    if (!selectedVariant || typeof window === 'undefined' || !selectedFileNameInternal || !hasUserInteraction) {
+    // Skip on initial mount - let hash-driven navigation handle it
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevVariantKeyRef.current = selectedVariantKey;
       return;
     }
 
-    // Determine if this is the initial variant
-    var isInitialVariant = initialVariant ? selectedVariantKey === initialVariant : variantKeys.length === 0 || selectedVariantKey === variantKeys[0];
+    // Only update hash if there's already a relevant hash present
+    if (typeof window === 'undefined' || !isHashRelevantToDemo(hash, mainSlug)) {
+      prevVariantKeyRef.current = selectedVariantKey;
+      return;
+    }
 
-    // Generate the new slug for the currently selected file
-    var fileSlug = '';
-    if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === selectedFileNameInternal;
-      });
-      if (file) {
-        fileSlug = generateFileSlug(mainSlug, file.originalName, selectedVariantKey, isInitialVariant);
-      }
-    } else {
-      fileSlug = generateFileSlug(mainSlug, selectedFileNameInternal, selectedVariantKey, isInitialVariant);
+    // Skip if variant hasn't actually changed
+    if (prevVariantKeyRef.current === selectedVariantKey) {
+      return;
     }
 
-    // Only update the URL hash if it's different from current hash
-    if (fileSlug && hash !== fileSlug) {
-      // Only update if current hash is for the same demo (starts with mainSlug)
-      // Don't set hash if there's no existing hash - variant changes shouldn't add hashes
-      if (isHashRelevantToDemo(hash, mainSlug)) {
-        setHash(fileSlug);
+    // Skip if this is a hash-driven variant change (hash is driving the variant selection)
+    if (pendingFileSelection.current || justCompletedPendingSelection.current || isHashDrivenVariantChange) {
+      prevVariantKeyRef.current = selectedVariantKey;
+      return;
+    }
+
+    // User switched variants, update hash based on fileHashMode
+    // Note: localStorage is already saved by setSelectedVariantKeyAsUser
+    if (fileHashMode === 'remove-filename') {
+      // Keep variant in hash: mainSlug or mainSlug:variant (for non-Default variants)
+      var kebabMainSlug = toKebabCase(mainSlug);
+      if (selectedVariantKey === 'Default') {
+        setHash(kebabMainSlug);
+      } else {
+        var kebabVariantName = toKebabCase(selectedVariantKey);
+        setHash("".concat(kebabMainSlug, ":").concat(kebabVariantName));
       }
-      // Otherwise, don't update - either no hash exists or hash is for a different demo
+    } else {
+      // Remove entire hash
+      setHash(null);
     }
-  }, [selectedVariant, selectedFileNameInternal, transformedFiles, mainSlug, selectedVariantKey, variantKeys, initialVariant, hasUserInteraction, setHash, hash]);
+    prevVariantKeyRef.current = selectedVariantKey;
+  }, [selectedVariantKey, hash, mainSlug, fileHashMode, setHash, isHashDrivenVariantChange]);
 
   // Compute the displayed filename (transformed if applicable)
   var selectedFileName = React.useMemo(function () {
@@ -446,15 +476,12 @@ export function useFileNavigation(_ref) {
       return [];
     }
 
-    // Determine if this is the initial variant
-    var isInitialVariant = initialVariant ? selectedVariantKey === initialVariant : variantKeys.length === 0 || selectedVariantKey === variantKeys[0];
-
     // If we have transformed files, use them
     if (transformedFiles) {
       return transformedFiles.files.map(function (f) {
         return {
           name: f.name,
-          slug: generateFileSlug(mainSlug, f.originalName, selectedVariantKey, isInitialVariant),
+          slug: generateFileSlug(mainSlug, f.originalName, selectedVariantKey),
           component: f.component
         };
       });
@@ -467,7 +494,7 @@ export function useFileNavigation(_ref) {
     if (selectedVariant.fileName && selectedVariant.source) {
       result.push({
         name: selectedVariant.fileName,
-        slug: generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey, isInitialVariant),
+        slug: generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey),
         component: /*#__PURE__*/_jsx(Pre, {
           className: preClassName,
           ref: preRef,
@@ -494,7 +521,7 @@ export function useFileNavigation(_ref) {
         }
         result.push({
           name: fileName,
-          slug: generateFileSlug(mainSlug, fileName, selectedVariantKey, isInitialVariant),
+          slug: generateFileSlug(mainSlug, fileName, selectedVariantKey),
           component: /*#__PURE__*/_jsx(Pre, {
             className: preClassName,
             ref: preRef,
@@ -505,7 +532,7 @@ export function useFileNavigation(_ref) {
       });
     }
     return result;
-  }, [selectedVariant, transformedFiles, mainSlug, selectedVariantKey, variantKeys, initialVariant, shouldHighlight, preClassName, preRef]);
+  }, [selectedVariant, transformedFiles, mainSlug, selectedVariantKey, shouldHighlight, preClassName, preRef]);
 
   // Create a wrapper for selectFileName that handles transformed filenames and URL updates
   var selectFileName = React.useCallback(function (fileName) {
@@ -513,10 +540,6 @@ export function useFileNavigation(_ref) {
       return;
     }
     var targetFileName = fileName;
-    var fileSlug = '';
-
-    // Determine if this is the initial variant
-    var isInitialVariant = initialVariant ? selectedVariantKey === initialVariant : variantKeys.length === 0 || selectedVariantKey === variantKeys[0];
 
     // If we have transformed files, we need to reverse-lookup the original filename
     if (transformedFiles) {
@@ -526,7 +549,6 @@ export function useFileNavigation(_ref) {
       });
       if (fileByTransformedName) {
         targetFileName = fileByTransformedName.originalName;
-        fileSlug = generateFileSlug(mainSlug, fileByTransformedName.originalName, selectedVariantKey, isInitialVariant);
       } else {
         // Check if the fileName is already an original name
         var fileByOriginalName = transformedFiles.files.find(function (f) {
@@ -534,21 +556,32 @@ export function useFileNavigation(_ref) {
         });
         if (fileByOriginalName) {
           targetFileName = fileName;
-          fileSlug = generateFileSlug(mainSlug, fileName, selectedVariantKey, isInitialVariant);
         }
       }
-    } else {
-      // No transformed files, generate slug directly
-      fileSlug = generateFileSlug(mainSlug, fileName, selectedVariantKey, isInitialVariant);
     }
 
-    // Update the URL hash without adding to history (replaceState)
-    if (typeof window !== 'undefined' && fileSlug && hash !== fileSlug) {
-      setHash(fileSlug); // Use the new URL hash hook
+    // Handle hash removal based on fileHashMode
+    if (typeof window !== 'undefined' && isHashRelevantToDemo(hash, mainSlug)) {
+      // Save variant to localStorage if on-interaction mode (clicking a tab counts as interaction)
+      if (saveVariantToLocalStorage && saveHashVariantToLocalStorage === 'on-interaction') {
+        saveVariantToLocalStorage(selectedVariantKey);
+      }
+      if (fileHashMode === 'remove-filename') {
+        // Keep variant in hash: mainSlug or mainSlug:variant (for non-Default variants)
+        var kebabMainSlug = toKebabCase(mainSlug);
+        if (selectedVariantKey === 'Default') {
+          setHash(kebabMainSlug);
+        } else {
+          var kebabVariantName = toKebabCase(selectedVariantKey);
+          setHash("".concat(kebabMainSlug, ":").concat(kebabVariantName));
+        }
+      } else {
+        // Remove entire hash
+        setHash(null);
+      }
     }
-    markUserInteraction(); // Mark that user has made an explicit selection
     setSelectedFileNameInternal(targetFileName);
-  }, [selectedVariant, transformedFiles, mainSlug, selectedVariantKey, variantKeys, initialVariant, setHash, markUserInteraction, hash]);
+  }, [selectedVariant, transformedFiles, mainSlug, selectedVariantKey, fileHashMode, hash, setHash, saveHashVariantToLocalStorage, saveVariantToLocalStorage]);
 
   // Memoized array of all file slugs for all variants
   var allFilesSlugs = React.useMemo(function () {
@@ -570,14 +603,24 @@ export function useFileNavigation(_ref) {
           return 1; // continue
         }
 
-        // Determine if this is the initial variant
-        var isInitialVariant = initialVariant ? variantKey === initialVariant : variantKeys.length === 0 || variantKey === variantKeys[0];
+        // Add variant-only slug (points to main file of the variant)
+        // Skip for Default variant since it doesn't have variant name in hash
+        if (variant.fileName && variantKey !== 'Default') {
+          var kebabMainSlug = toKebabCase(mainSlug);
+          var kebabVariantName = toKebabCase(variantKey);
+          var variantOnlySlug = "".concat(kebabMainSlug, ":").concat(kebabVariantName);
+          result.push({
+            fileName: variant.fileName,
+            slug: variantOnlySlug,
+            variantName: variantKey
+          });
+        }
 
         // Add main file if it exists
         if (variant.fileName) {
           result.push({
             fileName: variant.fileName,
-            slug: generateFileSlug(mainSlug, variant.fileName, variantKey, isInitialVariant),
+            slug: generateFileSlug(mainSlug, variant.fileName, variantKey),
             variantName: variantKey
           });
         }
@@ -587,7 +630,7 @@ export function useFileNavigation(_ref) {
           Object.keys(variant.extraFiles).forEach(function (fileName) {
             result.push({
               fileName: fileName,
-              slug: generateFileSlug(mainSlug, fileName, variantKey, isInitialVariant),
+              slug: generateFileSlug(mainSlug, fileName, variantKey),
               variantName: variantKey
             });
           });
@@ -602,7 +645,7 @@ export function useFileNavigation(_ref) {
       _iterator2.f();
     }
     return result;
-  }, [effectiveCode, variantKeys, initialVariant, mainSlug]);
+  }, [effectiveCode, variantKeys, mainSlug]);
   return {
     selectedFileName: selectedFileName,
     selectedFile: selectedFile,

package/esm/useCode/useUIState.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface UseUIStateProps {
   defaultOpen?: boolean;
+  mainSlug?: string;
 }
 export interface UseUIStateResult {
   expanded: boolean;
@@ -9,8 +10,10 @@ export interface UseUIStateResult {
 }
 /**
  * Hook for managing UI state like expansion and focus
+ * Auto-expands if there's a relevant hash for this demo
  */
 export declare function useUIState({
-  defaultOpen
+  defaultOpen,
+  mainSlug
 }: UseUIStateProps): UseUIStateResult;
 export {};

package/esm/useCode/useUIState.js

@@ -1,18 +1,33 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import { useUrlHashState } from "../useUrlHashState/index.js";
+import { isHashRelevantToDemo } from "./useFileNavigation.js";
 /**
  * Hook for managing UI state like expansion and focus
+ * Auto-expands if there's a relevant hash for this demo
  */
 export function useUIState(_ref) {
   var _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen;
-  var _React$useState = React.useState(defaultOpen),
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    mainSlug = _ref.mainSlug;
+  var _useUrlHashState = useUrlHashState(),
+    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 1),
+    hash = _useUrlHashState2[0];
+  var hasRelevantHash = isHashRelevantToDemo(hash, mainSlug);
+  var _React$useState = React.useState(defaultOpen || hasRelevantHash),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     expanded = _React$useState2[0],
     setExpanded = _React$useState2[1];
   var expand = React.useCallback(function () {
     return setExpanded(true);
   }, []);
+
+  // Auto-expand if hash becomes relevant
+  React.useEffect(function () {
+    if (hasRelevantHash && !expanded) {
+      setExpanded(true);
+    }
+  }, [hasRelevantHash, expanded]);
   return {
     expanded: expanded,
     expand: expand,

package/esm/useCode/useVariantSelection.d.ts

@@ -5,6 +5,7 @@ interface UseVariantSelectionProps {
   initialVariant?: string;
   variantType?: string;
   mainSlug?: string;
+  saveHashVariantToLocalStorage?: 'on-load' | 'on-interaction' | 'never';
 }
 export interface UseVariantSelectionResult {
   variantKeys: string[];
@@ -12,15 +13,19 @@ export interface UseVariantSelectionResult {
   selectedVariant: VariantCode | null;
   selectVariant: React.Dispatch<React.SetStateAction<string>>;
   selectVariantProgrammatic: React.Dispatch<React.SetStateAction<string>>;
+  saveVariantToLocalStorage: (variant: string) => void;
+  hashVariant: string | null;
 }
 /**
  * Hook for managing variant selection and providing variant-related data
- * Uses React state as source of truth, with localStorage for persistence
+ * Priority: URL hash > localStorage > initialVariant > first variant
+ * When hash has a variant, it overrides localStorage and is saved to localStorage
  */
 export declare function useVariantSelection({
   effectiveCode,
   initialVariant,
   variantType,
-  mainSlug
+  mainSlug,
+  saveHashVariantToLocalStorage
 }: UseVariantSelectionProps): UseVariantSelectionResult;
 export {};

package/esm/useCode/useVariantSelection.js

@@ -3,16 +3,69 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { usePreference } from "../usePreference/index.js";
 import { useUrlHashState } from "../useUrlHashState/index.js";
-import { isHashRelevantToDemo } from "./useFileNavigation.js";
+import { isHashRelevantToDemo, toKebabCase } from "./useFileNavigation.js";
+
+/**
+ * Parses the variant name from a URL hash
+ * Hash formats:
+ * - slug:file.tsx -> "Default"
+ * - slug:variant:file.tsx -> "variant"
+ * - slug:variant -> "variant"
+ * @param urlHash - The URL hash (without '#')
+ * @param mainSlug - The main slug for the demo (optional, used to determine if hash is relevant for file selection)
+ * @param variantKeys - Available variant keys
+ * @returns The variant name or null if not found/parseable
+ */
+function parseVariantFromHash(urlHash, mainSlug, variantKeys) {
+  if (!urlHash) {
+    return null;
+  }
+  var parts = urlHash.split(':');
+
+  // If there are 3 parts (slug:variant:file), the variant is in the middle
+  if (parts.length === 3) {
+    var variantPart = parts[1];
+    // Find matching variant key (case-insensitive kebab match)
+    var matchingVariant = variantKeys.find(function (key) {
+      return toKebabCase(key) === variantPart.toLowerCase();
+    });
+    return matchingVariant || null;
+  }
+
+  // If there are 2 parts, could be slug:variant or slug:file
+  if (parts.length === 2) {
+    var secondPart = parts[1];
+    // Try to match as a variant first
+    var _matchingVariant = variantKeys.find(function (key) {
+      return toKebabCase(key) === secondPart.toLowerCase();
+    });
+    if (_matchingVariant) {
+      return _matchingVariant;
+    }
+    // If no matching variant and it looks like a filename, assume Default
+    if (secondPart.includes('.')) {
+      return 'Default';
+    }
+  }
+
+  // Just the slug with no other parts, assume Default
+  if (parts.length === 1) {
+    return 'Default';
+  }
+  return null;
+}
 /**
  * Hook for managing variant selection and providing variant-related data
- * Uses React state as source of truth, with localStorage for persistence
+ * Priority: URL hash > localStorage > initialVariant > first variant
+ * When hash has a variant, it overrides localStorage and is saved to localStorage
  */
 export function useVariantSelection(_ref) {
   var effectiveCode = _ref.effectiveCode,
     initialVariant = _ref.initialVariant,
     variantType = _ref.variantType,
-    mainSlug = _ref.mainSlug;
+    mainSlug = _ref.mainSlug,
+    _ref$saveHashVariantT = _ref.saveHashVariantToLocalStorage,
+    saveHashVariantToLocalStorage = _ref$saveHashVariantT === void 0 ? 'on-interaction' : _ref$saveHashVariantT;
   // Get variant keys from effective code
   var variantKeys = React.useMemo(function () {
     return Object.keys(effectiveCode).filter(function (key) {
@@ -21,14 +74,14 @@ export function useVariantSelection(_ref) {
     });
   }, [effectiveCode]);
 
-  // Check if there's a URL hash present that's relevant to this demo
-  // Only override localStorage if hash starts with this demo's slug
+  // Get URL hash and parse variant from it
   var _useUrlHashState = useUrlHashState(),
-    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 1),
-    urlHash = _useUrlHashState2[0];
-  var hasRelevantUrlHash = React.useMemo(function () {
-    return isHashRelevantToDemo(urlHash, mainSlug);
-  }, [urlHash, mainSlug]);
+    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 2),
+    urlHash = _useUrlHashState2[0],
+    setUrlHash = _useUrlHashState2[1];
+  var hashVariant = React.useMemo(function () {
+    return parseVariantFromHash(urlHash, mainSlug, variantKeys);
+  }, [urlHash, mainSlug, variantKeys]);
 
   // Use localStorage hook for variant persistence
   var _usePreference = usePreference('variant', variantType || variantKeys, function () {
@@ -38,73 +91,103 @@ export function useVariantSelection(_ref) {
     storedValue = _usePreference2[0],
     setStoredValue = _usePreference2[1];
 
-  // Initialize state - will be updated by effect if localStorage should be used
+  // Track if the last change was user-initiated (to prevent hash from overriding)
+  var isUserInitiatedChange = React.useRef(false);
+  // Track previous hash variant to detect hash changes
+  var prevHashVariant = React.useRef(hashVariant);
+  // Track previous storedValue to detect localStorage changes
+  var prevStoredValue = React.useRef(storedValue);
+
+  // Determine initial variant: hash > localStorage > initialVariant > first variant
   var _React$useState = React.useState(function () {
-      // Use initial variant if provided and valid
+      // Priority 1: Hash variant
+      if (hashVariant && variantKeys.includes(hashVariant)) {
+        return hashVariant;
+      }
+      // Priority 2: localStorage
+      if (storedValue && variantKeys.includes(storedValue)) {
+        return storedValue;
+      }
+      // Priority 3: initialVariant prop
       if (initialVariant && variantKeys.includes(initialVariant)) {
         return initialVariant;
       }
-
-      // Final fallback: use first available variant
+      // Priority 4: First available variant
       return variantKeys[0] || '';
     }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     selectedVariantKey = _React$useState2[0],
     setSelectedVariantKeyState = _React$useState2[1];
 
-  // On mount, check if we should restore from localStorage
-  // This needs to be in an effect because we need to check hasRelevantUrlHash which depends on urlHash
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hasInitialized = _React$useState4[0],
-    setHasInitialized = _React$useState4[1];
+  // Track selected variant key in a ref for use in effect without causing re-runs
+  var selectedVariantKeyRef = React.useRef(selectedVariantKey);
   React.useEffect(function () {
-    if (hasInitialized) {
-      return;
-    }
-    setHasInitialized(true);
+    selectedVariantKeyRef.current = selectedVariantKey;
+  });
 
-    // If there's a relevant URL hash, don't use localStorage - hash takes priority
-    if (hasRelevantUrlHash) {
+  // When hash changes and has a variant, override current selection
+  // When hash is removed, fall back to localStorage
+  React.useEffect(function () {
+    // Skip if this was a user-initiated change
+    if (isUserInitiatedChange.current) {
+      // Only reset the flag once the hash has actually been cleared
+      if (hashVariant === null && urlHash === null) {
+        isUserInitiatedChange.current = false;
+      }
+      prevHashVariant.current = hashVariant;
       return;
     }
 
-    // If we have a stored value, use it (localStorage takes priority over initialVariant)
-    if (storedValue && variantKeys.includes(storedValue)) {
-      setSelectedVariantKeyState(storedValue);
-    }
-  }, [hasInitialized, hasRelevantUrlHash, storedValue, variantKeys]);
-
-  // Sync with localStorage changes (but don't override programmatic changes or when hash is present)
-  // Only sync when storedValue changes, not when selectedVariantKey changes
-  var prevStoredValue = React.useRef(storedValue);
-  React.useEffect(function () {
-    // Don't sync from localStorage when a relevant URL hash is present - hash takes absolute priority
-    if (hasRelevantUrlHash) {
+    // Only apply hash if it actually changed (not just a re-render with same hash)
+    var hashChanged = prevHashVariant.current !== hashVariant;
+    var storedValueChanged = prevStoredValue.current !== storedValue;
+    prevHashVariant.current = hashVariant;
+    prevStoredValue.current = storedValue;
+    if (!hashChanged && !storedValueChanged) {
       return;
     }
-    if (storedValue !== prevStoredValue.current) {
-      prevStoredValue.current = storedValue;
-      if (storedValue && variantKeys.includes(storedValue) && storedValue !== selectedVariantKey) {
-        setSelectedVariantKeyState(storedValue);
+    if (hashVariant && variantKeys.includes(hashVariant) && hashVariant !== selectedVariantKeyRef.current) {
+      // Hash has a variant - use it
+      setSelectedVariantKeyState(hashVariant);
+      // Save hash variant to localStorage based on configuration
+      if (saveHashVariantToLocalStorage === 'on-load' && hashVariant !== storedValue) {
+        setStoredValue(hashVariant);
       }
+    } else if (!hashVariant && !urlHash &&
+    // Only fall back to localStorage when hash is truly empty
+    storedValue && variantKeys.includes(storedValue) && storedValue !== selectedVariantKeyRef.current) {
+      // Hash is empty but localStorage has a variant - use it
+      setSelectedVariantKeyState(storedValue);
     }
-  }, [storedValue, variantKeys, selectedVariantKey, hasRelevantUrlHash]);
+  }, [hashVariant, urlHash, variantKeys,
+  // Note: selectedVariantKey is intentionally NOT in dependencies
+  // to avoid effect running when user manually changes variant
+  storedValue, setStoredValue, saveHashVariantToLocalStorage]);
+
+  // Programmatic setter: doesn't save to localStorage (used for hash-driven changes)
   var setSelectedVariantKeyProgrammatic = React.useCallback(function (value) {
     var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
     if (variantKeys.includes(resolvedValue)) {
-      // Only update React state, not localStorage
-      // This prevents conflicts with hash-driven navigation
       setSelectedVariantKeyState(resolvedValue);
     }
   }, [selectedVariantKey, variantKeys]);
+
+  // User setter: saves to localStorage (used for user-initiated changes like dropdown)
   var setSelectedVariantKeyAsUser = React.useCallback(function (value) {
     var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
     if (variantKeys.includes(resolvedValue)) {
+      // Mark as user-initiated to prevent hash effect from overriding
+      isUserInitiatedChange.current = true;
+      // Clear hash if it exists and is relevant to this demo
+      if (urlHash && mainSlug && isHashRelevantToDemo(urlHash, mainSlug)) {
+        setUrlHash(null);
+        // Update prevHashVariant to reflect that hash is now null
+        prevHashVariant.current = null;
+      }
       setSelectedVariantKeyState(resolvedValue);
       setStoredValue(resolvedValue);
     }
-  }, [setStoredValue, selectedVariantKey, variantKeys]);
+  }, [setStoredValue, selectedVariantKey, variantKeys, urlHash, mainSlug, setUrlHash]);
   var selectedVariant = React.useMemo(function () {
     var variant = effectiveCode[selectedVariantKey];
     if (variant && _typeof(variant) === 'object' && 'source' in variant) {
@@ -116,16 +199,23 @@ export function useVariantSelection(_ref) {
   // Safety check: if selectedVariant doesn't exist, fall back to first variant
   React.useEffect(function () {
     if (!selectedVariant && variantKeys.length > 0) {
-      // Don't mark this as a user selection - it's just a fallback
-      // Use programmatic setter to avoid localStorage save
       setSelectedVariantKeyProgrammatic(variantKeys[0]);
     }
   }, [selectedVariant, variantKeys, setSelectedVariantKeyProgrammatic]);
+
+  // Function to save variant to localStorage (used for on-interaction mode)
+  var saveVariantToLocalStorage = React.useCallback(function (variant) {
+    if (saveHashVariantToLocalStorage === 'on-interaction' && variant !== storedValue) {
+      setStoredValue(variant);
+    }
+  }, [saveHashVariantToLocalStorage, storedValue, setStoredValue]);
   return {
     variantKeys: variantKeys,
     selectedVariantKey: selectedVariantKey,
     selectedVariant: selectedVariant,
     selectVariant: setSelectedVariantKeyAsUser,
-    selectVariantProgrammatic: setSelectedVariantKeyProgrammatic
+    selectVariantProgrammatic: setSelectedVariantKeyProgrammatic,
+    saveVariantToLocalStorage: saveVariantToLocalStorage,
+    hashVariant: hashVariant
   };
 }

package/esm/withDocsInfra/index.d.ts

@@ -1 +1,2 @@
-export * from "./withDocsInfra.js";
+export * from "./withDocsInfra.js";
+export * from "./withDeploymentConfig.js";

package/esm/withDocsInfra/index.js

@@ -1 +1,2 @@
-export * from "./withDocsInfra.js";
+export * from "./withDocsInfra.js";
+export * from "./withDeploymentConfig.js";

package/esm/withDocsInfra/withDeploymentConfig.d.ts

@@ -0,0 +1,2 @@
+import type { NextConfig } from 'next';
+export declare function withDeploymentConfig<T extends NextConfig>(nextConfig: T): T;

package/esm/withDocsInfra/withDeploymentConfig.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * See the docs of the Netlify environment variables:
+ * https://docs.netlify.com/configure-builds/environment-variables/#build-metadata.
+ *
+ * A few comments:
+ * - process.env.CONTEXT === 'production' means that the branch in Netlify was configured as production.
+ *   For example, the `master` branch of the Core team is considered a `production` build on Netlify based
+ *   on https://app.netlify.com/sites/material-ui/settings/deploys#branches.
+ * - Each team has different site https://app.netlify.com/teams/mui/sites.
+ *   The following logic must be compatible with all of them.
+ */
+var DEPLOY_ENV = 'development';
+
+// Same as process.env.PULL_REQUEST_ID
+if (process.env.CONTEXT === 'deploy-preview') {
+  DEPLOY_ENV = 'pull-request';
+}
+if (process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') {
+  DEPLOY_ENV = 'production';
+}
+
+// The 'master' and 'next' branches are NEVER a production environment. We use these branches for staging.
+if ((process.env.CONTEXT === 'production' || process.env.CONTEXT === 'branch-deploy') && (process.env.HEAD === 'master' || process.env.HEAD === 'next')) {
+  DEPLOY_ENV = 'staging';
+}
+/**
+ * ====================================================================================
+ */
+
+process.env.DEPLOY_ENV = DEPLOY_ENV;
+export function withDeploymentConfig(nextConfig) {
+  return _extends(_extends({
+    trailingSlash: true,
+    reactStrictMode: true
+  }, nextConfig), {}, {
+    env: _extends(_extends({
+      // production | staging | pull-request | development
+      DEPLOY_ENV: DEPLOY_ENV
+    }, nextConfig.env), {}, {
+      // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
+      // reference ID (also known as "SHA" or "hash") of the commit we're building.
+      COMMIT_REF: process.env.COMMIT_REF,
+      // ID of the PR and the Deploy Preview it generated (for example, 1211)
+      PULL_REQUEST_ID: process.env.REVIEW_ID,
+      // This can be set manually in the .env to see the ads in dev mode.
+      ENABLE_AD_IN_DEV_MODE: process.env.ENABLE_AD_IN_DEV_MODE,
+      // URL representing the unique URL for an individual deploy, e.g.
+      // https://5b243e66dd6a547b4fee73ae--petsof.netlify.app
+      SITE_DEPLOY_URL: process.env.DEPLOY_URL,
+      // Name of the site, its Netlify subdomain; for example, material-ui-docs
+      SITE_NAME: process.env.SITE_NAME,
+      // For template images
+      TEMPLATE_IMAGE_URL: ''
+    }),
+    experimental: _extends(_extends({
+      scrollRestoration: true,
+      workerThreads: false
+    }, process.env.CI ? {
+      cpus: 2
+    } : {}), nextConfig.experimental),
+    eslint: _extends({
+      ignoreDuringBuilds: true
+    }, nextConfig.eslint),
+    typescript: _extends({
+      // Motivated by https://github.com/vercel/next.js/issues/7687
+      ignoreBuildErrors: true
+    }, nextConfig.typescript)
+  });
+}

package/esm/withDocsInfra/withDocsInfra.d.ts

@@ -1,18 +1,5 @@
-import type { Configuration as WebpackConfig, RuleSetRule } from 'webpack';
-export interface NextConfig {
-  pageExtensions?: string[];
-  output?: 'export' | 'standalone' | undefined;
-  turbopack?: {
-    rules?: Record<string, {
-      loaders: {
-        loader: string;
-        options: Record<string, unknown>;
-      }[] | string[];
-    }>;
-  };
-  webpack?: (config: WebpackConfig, options: WebpackOptions) => WebpackConfig;
-  [key: string]: any;
-}
+import type { NextConfig } from 'next';
+import type { RuleSetRule } from 'webpack';
 export interface WebpackOptions {
   buildId: string;
   dev: boolean;

package/esm/withDocsInfra/withDocsInfra.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-// Define minimal NextConfig type to avoid importing from 'next'
-
 // Define webpack options interface based on Next.js webpack function signature
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.2.3-canary.0",
+  "version": "0.2.3-canary.10",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "keywords": [
@@ -22,7 +22,7 @@
   "homepage": "https://github.com/mui/mui-public/tree/master/packages/docs-infra",
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@babel/standalone": "^7.28.4",
+    "@babel/standalone": "^7.28.5",
     "@wooorm/starry-night": "^3.8.0",
     "clipboard-copy": "^4.0.1",
     "fflate": "^0.8.2",
@@ -32,7 +32,7 @@
     "kebab-case": "^2.0.2",
     "lz-string": "^1.5.0",
     "path-module": "^0.1.2",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "uint8-to-base64": "^0.2.1",
     "unist-util-visit": "^5.0.0",
     "vscode-oniguruma": "^2.0.1"
@@ -45,6 +45,9 @@
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "next": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -53,7 +56,6 @@
   "engines": {
     "node": ">=22.12.0"
   },
-  "gitSha": "ac83e0cbcf905f4d7a2023de4c7dc600105f86e8",
   "type": "commonjs",
   "exports": {
     "./package.json": "./package.json",
@@ -226,5 +228,6 @@
       }
     },
     "./esm": null
-  }
+  },
+  "gitSha": "0b104084ce1db11d486ce994342b00321073cd64"
 }