@mui/internal-docs-infra 0.1.1-alpha.2 → 0.1.1-alpha.3

package/CodeHighlighter/loadVariant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadVariant.d.ts","sourceRoot":"","sources":["../../../src/CodeHighlighter/loadVariant.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAIX,WAAW,EACX,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAC;AA4ajB;;;;;GAKG;AACH,wBAAsB,WAAW,CAC/B,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,EACzC,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,EACnC,UAAU,CAAC,EAAE,UAAU,EACvB,eAAe,CAAC,EAAE,eAAe,EACjC,kBAAkB,CAAC,EAAE,kBAAkB,EACvC,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAiHxD"}
+{"version":3,"file":"loadVariant.d.ts","sourceRoot":"","sources":["../../../src/CodeHighlighter/loadVariant.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,WAAW,EAIX,WAAW,EACX,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,eAAe,EAChB,MAAM,SAAS,CAAC;AA6ajB;;;;;GAKG;AACH,wBAAsB,WAAW,CAC/B,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,EACzC,YAAY,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,EACnC,UAAU,CAAC,EAAE,UAAU,EACvB,eAAe,CAAC,EAAE,eAAe,EACjC,kBAAkB,CAAC,EAAE,kBAAkB,EACvC,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAiHxD"}

package/CodeHighlighter/loadVariant.js

@@ -1,9 +1,9 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { transformSource } from "./transformSource.js";
 import { transformParsedSource } from "./transformParsedSource.js";
 import { getFileNameFromUrl } from "../loaderUtils/index.js";
@@ -12,82 +12,90 @@ function isProduction() {
   return typeof process !== 'undefined' && process.env.NODE_ENV === 'production';
 }
 
-// Helper function to resolve relative paths using URL API
-function resolveRelativePath(basePath, relativePath) {
-  if (!relativePath.startsWith('.')) {
-    return relativePath;
-  }
-  try {
-    // Use URL constructor to properly resolve relative paths
-    var resolved = new URL(relativePath, basePath);
-    return resolved.href;
-  } catch (error) {
-    // Fallback to manual resolution if URL constructor fails
-    var baseSegments = basePath.split('/');
-    var relativeSegments = relativePath.split('/');
-
-    // Remove the filename from base path
-    baseSegments.pop();
-    var _iterator = _createForOfIteratorHelper(relativeSegments),
-      _step;
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var segment = _step.value;
-        if (segment === '..') {
-          baseSegments.pop();
-        } else if (segment !== '.') {
-          baseSegments.push(segment);
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return baseSegments.join('/');
+// Helper function to convert a nested key based on the directory of the source file key
+function convertKeyBasedOnDirectory(nestedKey, sourceFileKey) {
+  // If it's an absolute path (starts with / or contains ://), keep as-is
+  if (nestedKey.startsWith('/') || nestedKey.includes('://')) {
+    return nestedKey;
   }
-}
 
-// Helper function to convert a relative path from one base to another base
-function convertRelativePathBetweenBases(relativePath, fromBaseUrl, toBaseUrl) {
-  if (!relativePath.startsWith('.')) {
-    return relativePath; // Not a relative path, keep as-is
+  // Treat bare filenames as relative to current directory (same as ./filename)
+  var processedNestedKey = nestedKey;
+  if (!nestedKey.startsWith('.')) {
+    processedNestedKey = "./".concat(nestedKey);
   }
-  try {
-    // Use URL constructor to resolve the relative path to absolute
-    var absoluteUrl = new URL(relativePath, fromBaseUrl);
 
-    // Now we need to make this absolute URL relative to toBaseUrl
-    // We'll try to construct a relative path that, when resolved against toBaseUrl, gives us absoluteUrl
+  // Manual path resolution: resolve processedNestedKey relative to the directory of sourceFileKey
+  // Both paths are relative to the entry directory (which is always './') - ignore file:// URLs completely
 
-    // Get the directory of the target base
-    var toBaseDir = new URL('.', toBaseUrl);
+  // Get the directory of the source file key (not URL)
+  var sourceDir = sourceFileKey.includes('/') ? sourceFileKey.substring(0, sourceFileKey.lastIndexOf('/')) : '.';
 
-    // If both files are in the same directory, just return the filename
-    var absoluteDir = new URL('.', absoluteUrl);
-    if (absoluteDir.href === toBaseDir.href) {
-      return absoluteUrl.pathname.split('/').pop() || '.';
+  // Parse both paths into components
+  var parsePathComponents = function parsePathComponents(path) {
+    if (path === '.' || path === '') {
+      return [];
     }
+    return path.split('/').filter(function (part) {
+      return part !== '';
+    });
+  };
+  var sourceDirComponents = parsePathComponents(sourceDir);
+  var nestedComponents = parsePathComponents(processedNestedKey);
 
-    // For different directories, we need to calculate the relative path manually
-    // since there's no URL constructor method for absolute → relative conversion
-    var toBaseParts = toBaseDir.pathname.split('/').filter(Boolean);
-    var absoluteParts = absoluteUrl.pathname.split('/').filter(Boolean);
+  // Start from the source directory and apply the nested path
+  var resultComponents = _toConsumableArray(sourceDirComponents);
 
-    // Find common prefix
-    var commonLength = 0;
-    while (commonLength < toBaseParts.length && commonLength < absoluteParts.length && toBaseParts[commonLength] === absoluteParts[commonLength]) {
-      commonLength += 1;
+  // Apply each component of the nested path
+  var _iterator = _createForOfIteratorHelper(nestedComponents),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      if (component === '..') {
+        if (resultComponents.length > 0 && resultComponents[resultComponents.length - 1] !== '..') {
+          // Normal case: pop a regular directory component
+          resultComponents.pop();
+        } else {
+          // Either resultComponents is empty OR the last component is already '..'
+          // In both cases, we need to go up one more level
+          resultComponents.push('..');
+        }
+      } else if (component === '.') {
+        // Current directory, skip
+        continue;
+      } else {
+        resultComponents.push(component);
+      }
     }
 
-    // Build relative path: '../' for remaining toBase parts, then absolute parts
-    var upLevels = toBaseParts.length - commonLength;
-    var relativeParts = Array(upLevels).fill('..').concat(absoluteParts.slice(commonLength));
-    return relativeParts.length > 0 ? relativeParts.join('/') : '.';
-  } catch (error) {
-    return relativePath; // Fallback to original path
+    // Build the final result
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (resultComponents.length === 0) {
+    return '';
+  }
+  var result = resultComponents.join('/');
+  return result;
+}
+
+/**
+ * Normalize a relative path key by removing unnecessary ./ prefix
+ */
+function normalizePathKey(key) {
+  if (key.startsWith('./')) {
+    return key.substring(2);
   }
+  return key;
 }
+
+/**
+ * Loads and processes extra files recursively with support for relative paths
+ * and circular dependency detection. Uses Promise.all for parallel loading.
+ */
 function loadSingleFile(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8, _x9) {
   return _loadSingleFile.apply(this, arguments);
 }
@@ -281,7 +289,7 @@ function _loadSingleFile() {
             break;
           }
           _context.next = 71;
-          return transformSource(finalSource, fileName, sourceTransformers);
+          return transformSource(finalSource, normalizePathKey(fileName), sourceTransformers);
         case 71:
           finalTransforms = _context.sent;
         case 72:
@@ -307,7 +315,7 @@ function _loadSingleFile() {
             break;
           }
           _context.next = 84;
-          return transformParsedSource(sourceString, finalSource, fileName, finalTransforms, parseSource);
+          return transformParsedSource(sourceString, finalSource, normalizePathKey(fileName), finalTransforms, parseSource);
         case 84:
           finalTransforms = _context.sent;
         case 85:
@@ -366,13 +374,14 @@ function _loadExtraFiles() {
       _step4$value,
       nestedExtraFiles,
       nestedFilesUsed,
-      sourceFileUrl,
+      sourceFileKey,
       _i3,
       _Object$entries2,
       _Object$entries2$_i,
       nestedKey,
       nestedValue,
       convertedKey,
+      normalizedConvertedKey,
       _args4 = arguments;
     return _regeneratorRuntime().wrap(function _callee3$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
@@ -401,8 +410,8 @@ function _loadExtraFiles() {
                       _context2.next = 9;
                       break;
                     }
-                    // fileData is a URL/path
-                    fileUrl = fileData.startsWith('.') ? resolveRelativePath(baseUrl, fileData) : fileData;
+                    // fileData is a URL/path - use it directly, don't modify it
+                    fileUrl = fileData;
 
                     // Check for circular dependencies
                     if (!loadedFiles.has(fileUrl)) {
@@ -463,12 +472,13 @@ function _loadExtraFiles() {
           _iterator3 = _createForOfIteratorHelper(extraFileResults);
           _context4.prev = 14;
           _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop() {
-            var _step3$value, fileName, result, filesUsed, _sourceFileUrl, fileData;
+            var _step3$value, fileName, result, filesUsed, normalizedFileName, sourceFileUrl, fileData;
             return _regeneratorRuntime().wrap(function _loop$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
                   _step3$value = _step3.value, fileName = _step3$value.fileName, result = _step3$value.result, filesUsed = _step3$value.filesUsed;
-                  processedExtraFiles[fileName] = {
+                  normalizedFileName = normalizePathKey(fileName);
+                  processedExtraFiles[normalizedFileName] = {
                     source: result.source,
                     transforms: result.transforms
                   };
@@ -476,14 +486,14 @@ function _loadExtraFiles() {
                   // Add files used from this file load
                   allFilesUsed.push.apply(allFilesUsed, _toConsumableArray(filesUsed));
 
-                  // Collect promises for nested extra files with their source URL
+                  // Collect promises for nested extra files with their source key
                   if (result.extraFiles) {
-                    _sourceFileUrl = baseUrl;
+                    sourceFileUrl = baseUrl;
                     fileData = extraFiles[fileName];
                     if (typeof fileData === 'string') {
-                      _sourceFileUrl = fileData.startsWith('.') ? resolveRelativePath(baseUrl, fileData) : fileData;
+                      sourceFileUrl = fileData; // Use the URL directly, don't modify it
                     }
-                    nestedExtraFilesPromises.push(loadExtraFiles(variantName, result.extraFiles, _sourceFileUrl,
+                    nestedExtraFilesPromises.push(loadExtraFiles(variantName, result.extraFiles, sourceFileUrl,
                     // Use the source file's URL as base for its extra files
                     entryUrl,
                     // Keep the entry URL for final conversion
@@ -494,11 +504,11 @@ function _loadExtraFiles() {
                       return {
                         files: nestedResult.extraFiles,
                         allFilesUsed: nestedResult.allFilesUsed,
-                        sourceFileUrl: _sourceFileUrl
+                        sourceFileKey: normalizedFileName // Pass the normalized key
                       };
                     }));
                   }
-                case 4:
+                case 5:
                 case "end":
                   return _context3.stop();
               }
@@ -537,14 +547,15 @@ function _loadExtraFiles() {
           _iterator4 = _createForOfIteratorHelper(nestedExtraFilesResults);
           try {
             for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              _step4$value = _step4.value, nestedExtraFiles = _step4$value.files, nestedFilesUsed = _step4$value.allFilesUsed, sourceFileUrl = _step4$value.sourceFileUrl;
+              _step4$value = _step4.value, nestedExtraFiles = _step4$value.files, nestedFilesUsed = _step4$value.allFilesUsed, sourceFileKey = _step4$value.sourceFileKey;
               // Add nested files used
               allFilesUsed.push.apply(allFilesUsed, _toConsumableArray(nestedFilesUsed));
               for (_i3 = 0, _Object$entries2 = Object.entries(nestedExtraFiles); _i3 < _Object$entries2.length; _i3++) {
                 _Object$entries2$_i = _slicedToArray(_Object$entries2[_i3], 2), nestedKey = _Object$entries2$_i[0], nestedValue = _Object$entries2$_i[1];
-                // Convert the key to be relative from entry file instead of from the source file
-                convertedKey = convertRelativePathBetweenBases(nestedKey, sourceFileUrl, entryUrl);
-                processedExtraFiles[convertedKey] = nestedValue;
+                // Convert the key based on the directory structure of the source key
+                convertedKey = convertKeyBasedOnDirectory(nestedKey, sourceFileKey);
+                normalizedConvertedKey = normalizePathKey(convertedKey);
+                processedExtraFiles[normalizedConvertedKey] = nestedValue;
               }
             }
           } catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.1.1-alpha.2",
+  "version": "0.1.1-alpha.3",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "type": "module",

package/useCode/useCode.d.ts

@@ -22,7 +22,7 @@ export interface UseCodeResult {
   }>;
   selectedFile: React.ReactNode;
   selectedFileName: string;
-  selectFileName: React.Dispatch<React.SetStateAction<string>>;
+  selectFileName: (fileName: string) => void;
   expanded: boolean;
   expand: () => void;
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>;

package/useCode/useCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCode.d.ts","sourceRoot":"","sources":["../../../src/useCode/useCode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAa,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKxD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7C,eAAe,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAMD,wBAAgB,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CA0XrF"}
+{"version":3,"file":"useCode.d.ts","sourceRoot":"","sources":["../../../src/useCode/useCode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAa,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKxD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7C,eAAe,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAMD,wBAAgB,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CAyarF"}

package/useCode/useCode.js

@@ -161,10 +161,10 @@ export function useCode(contentProps, opts) {
         // Handle different extraFile structures
         if (typeof fileData === 'string') {
           source = fileData;
-          transforms = variantTransforms;
+          transforms = undefined; // Don't inherit variant transforms for simple string files
         } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
           source = fileData.source;
-          transforms = fileData.transforms || variantTransforms;
+          transforms = fileData.transforms; // Only use explicit transforms for this file
         } else {
           return; // Skip invalid entries
         }
@@ -183,13 +183,31 @@ export function useCode(contentProps, opts) {
             console.error("Transform failed for ".concat(fileName, ":"), error);
           }
         }
-        filenameMap[fileName] = transformedName;
-        files.push({
-          name: transformedName,
-          originalName: fileName,
-          source: transformedSource,
-          component: toComponent(transformedSource)
+
+        // Only update filenameMap and add to files if this doesn't conflict with existing files
+        // If a file already exists with the target name, skip this transformation to preserve original files
+        var existingFile = files.find(function (f) {
+          return f.name === transformedName;
         });
+        if (!existingFile) {
+          filenameMap[fileName] = transformedName;
+          files.push({
+            name: transformedName,
+            originalName: fileName,
+            source: transformedSource,
+            component: toComponent(transformedSource)
+          });
+        } else {
+          // If there's a conflict, keep the original file untransformed
+          console.warn("Transform conflict: ".concat(fileName, " would transform to ").concat(transformedName, " but that name is already taken. Keeping original file untransformed."));
+          filenameMap[fileName] = fileName;
+          files.push({
+            name: fileName,
+            originalName: fileName,
+            source: source,
+            component: toComponent(source)
+          });
+        }
       });
     }
     return {
@@ -365,6 +383,37 @@ export function useCode(contentProps, opts) {
     }
   }, [availableTransforms]);
 
+  // Create a wrapper for selectFileName that handles transformed filenames
+  var selectFileName = React.useCallback(function (fileName) {
+    if (!selectedVariant) {
+      return;
+    }
+
+    // If we have transformed files, we need to reverse-lookup the original filename
+    if (transformedFiles) {
+      // Check if the fileName is a transformed name - if so, find the original
+      var fileByTransformedName = transformedFiles.files.find(function (f) {
+        return f.name === fileName;
+      });
+      if (fileByTransformedName) {
+        setSelectedFileNameInternal(fileByTransformedName.originalName);
+        return;
+      }
+
+      // Check if the fileName is already an original name
+      var fileByOriginalName = transformedFiles.files.find(function (f) {
+        return f.originalName === fileName;
+      });
+      if (fileByOriginalName) {
+        setSelectedFileNameInternal(fileName);
+        return;
+      }
+    }
+
+    // If no transformed files or fileName not found, set directly (fallback for untransformed mode)
+    setSelectedFileNameInternal(fileName);
+  }, [selectedVariant, transformedFiles]);
+
   // Get the effective components object - context overrides contentProps
   // Components are kept separate from variant data to maintain clean separation of concerns
   var effectiveComponents = React.useMemo(function () {
@@ -379,7 +428,7 @@ export function useCode(contentProps, opts) {
     files: files,
     selectedFile: selectedFileComponent,
     selectedFileName: selectedFileName,
-    selectFileName: setSelectedFileNameInternal,
+    selectFileName: selectFileName,
     expanded: expanded,
     expand: expand,
     setExpanded: setExpanded,

package/useDemo/index.d.ts

@@ -25,7 +25,7 @@ export declare function useDemo(contentProps: ContentProps, opts?: UseDemoOpts):
   }>;
   selectedFile: React.ReactNode;
   selectedFileName: string;
-  selectFileName: React.Dispatch<React.SetStateAction<string>>;
+  selectFileName: (fileName: string) => void;
   expanded: boolean;
   expand: () => void;
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>;