@mui/internal-docs-infra 0.3.1-canary.2 → 0.3.1-canary.4

package/esm/useCode/useFileNavigation.js

@@ -1,19 +1,34 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { decompressSync, strFromU8 } from 'fflate';
 import { decode } from 'uint8-to-base64';
 import { useUrlHashState } from "../useUrlHashState/index.js";
 import { countLines } from "../pipeline/parseSource/addLineGutters.js";
+import { getLanguageFromExtension } from "../pipeline/loaderUtils/getLanguageFromExtension.js";
 import { Pre } from "./Pre.js";
 
+/**
+ * Gets the language from a filename by extracting its extension.
+ * @param fileName - The filename (e.g., 'index.tsx', 'styles.css')
+ * @returns The language name or undefined
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function getLanguageFromFileName(fileName) {
+  if (!fileName) {
+    return undefined;
+  }
+  const lastDotIndex = fileName.lastIndexOf('.');
+  if (lastDotIndex === -1) {
+    return undefined;
+  }
+  const extension = fileName.substring(lastDotIndex);
+  return getLanguageFromExtension(extension);
+}
+
 /**
  * Converts a string to kebab-case
  * @param str - The string to convert
  * @returns kebab-case string
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 export function toKebabCase(str) {
   return str
   // Insert a dash before any uppercase letter that follows a lowercase letter or digit
@@ -31,8 +46,8 @@ export function isHashRelevantToDemo(urlHash, mainSlug) {
   if (!urlHash || !mainSlug) {
     return false;
   }
-  var kebabSlug = toKebabCase(mainSlug);
-  return urlHash.startsWith("".concat(kebabSlug, ":"));
+  const kebabSlug = toKebabCase(mainSlug);
+  return urlHash.startsWith(`${kebabSlug}:`);
 }
 
 /**
@@ -45,17 +60,17 @@ export function isHashRelevantToDemo(urlHash, mainSlug) {
  */
 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;
-  var extension = lastDotIndex !== -1 ? fileName.substring(lastDotIndex) : '';
+  const lastDotIndex = fileName.lastIndexOf('.');
+  const baseName = lastDotIndex !== -1 ? fileName.substring(0, lastDotIndex) : fileName;
+  const extension = lastDotIndex !== -1 ? fileName.substring(lastDotIndex) : '';
 
   // Convert to kebab-case
-  var kebabMainSlug = toKebabCase(mainSlug);
-  var kebabBaseName = toKebabCase(baseName);
-  var kebabVariantName = toKebabCase(variantName);
+  const kebabMainSlug = toKebabCase(mainSlug);
+  const kebabBaseName = toKebabCase(baseName);
+  const kebabVariantName = toKebabCase(variantName);
 
   // Reconstruct filename with kebab-case base name but preserved extension
-  var kebabFileName = "".concat(kebabBaseName).concat(extension);
+  const kebabFileName = `${kebabBaseName}${extension}`;
 
   // Handle empty main slug case
   if (!kebabMainSlug) {
@@ -65,95 +80,79 @@ function generateFileSlug(mainSlug, fileName, variantName) {
   // 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 `${kebabMainSlug}:${kebabFileName}`;
   }
-  return "".concat(kebabMainSlug, ":").concat(kebabVariantName, ":").concat(kebabFileName);
+  return `${kebabMainSlug}:${kebabVariantName}:${kebabFileName}`;
 }
 /**
  * Hook for managing file selection and navigation within a code variant
  */
-export function useFileNavigation(_ref) {
-  var selectedVariant = _ref.selectedVariant,
-    transformedFiles = _ref.transformedFiles,
-    _ref$mainSlug = _ref.mainSlug,
-    mainSlug = _ref$mainSlug === void 0 ? '' : _ref$mainSlug,
-    _ref$selectedVariantK = _ref.selectedVariantKey,
-    selectedVariantKey = _ref$selectedVariantK === void 0 ? '' : _ref$selectedVariantK,
-    _ref$variantKeys = _ref.variantKeys,
-    variantKeys = _ref$variantKeys === void 0 ? [] : _ref$variantKeys,
-    shouldHighlight = _ref.shouldHighlight,
-    preClassName = _ref.preClassName,
-    preRef = _ref.preRef,
-    effectiveCode = _ref.effectiveCode,
-    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;
+export function useFileNavigation({
+  selectedVariant,
+  transformedFiles,
+  mainSlug = '',
+  selectedVariantKey = '',
+  variantKeys = [],
+  shouldHighlight,
+  preClassName,
+  preRef,
+  effectiveCode,
+  selectVariant,
+  fileHashMode = 'remove-hash',
+  saveHashVariantToLocalStorage = 'on-interaction',
+  saveVariantToLocalStorage,
+  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];
+  const [selectedFileNameInternal, setSelectedFileNameInternal] = React.useState(selectedVariant?.fileName);
 
   // Use the simplified URL hash hook
-  var _useUrlHashState = useUrlHashState(),
-    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 2),
-    hash = _useUrlHashState2[0],
-    setHash = _useUrlHashState2[1];
+  const [hash, setHash] = useUrlHashState();
 
   // Track if we're waiting for a variant switch to complete, and which file to select after
-  var pendingFileSelection = React.useRef(null);
-  var justCompletedPendingSelection = React.useRef(false);
+  const pendingFileSelection = React.useRef(null);
+  const 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);
+  const prevVariantKeyRef = React.useRef(selectedVariantKey);
+  const [prevVariantKeyState, setPrevVariantKeyState] = React.useState(selectedVariantKey);
+  const 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;
+  const [prevHashVariant, setPrevHashVariant] = React.useState(hashVariant || null);
+  const isHashDrivenVariantChange = hashVariant === selectedVariantKey && prevVariantKeyState !== selectedVariantKey;
 
   // Update prevHashVariant when hashVariant changes
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (hashVariant !== prevHashVariant) {
       setPrevHashVariant(hashVariant || null);
     }
   }, [hashVariant, prevHashVariant]);
 
   // Update prevVariantKeyState when variant changes
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (selectedVariantKey !== prevVariantKeyState) {
       setPrevVariantKeyState(selectedVariantKey);
     }
   }, [selectedVariantKey, prevVariantKeyState]);
 
   // Helper function to check URL hash and switch to matching file
-  var checkUrlHashAndSelectFile = React.useCallback(function () {
+  const checkUrlHashAndSelectFile = React.useCallback(() => {
     if (!hash) {
       return;
     }
 
     // Try to find matching file - check current variant first
-    var matchingFileName;
-    var matchingVariantKey;
+    let matchingFileName;
+    let matchingVariantKey;
 
     // Step 1: Check current variant (if we have one)
     if (selectedVariant) {
       // Check main file
       if (selectedVariant.fileName) {
-        var mainFileSlug = generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey);
+        const mainFileSlug = generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey);
         if (hash === mainFileSlug) {
           matchingFileName = selectedVariant.fileName;
           matchingVariantKey = selectedVariantKey;
@@ -162,9 +161,8 @@ export function useFileNavigation(_ref) {
 
       // Check extra files
       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);
+        for (const fileName of Object.keys(selectedVariant.extraFiles)) {
+          const fileSlug = generateFileSlug(mainSlug, fileName, selectedVariantKey);
           if (hash === fileSlug) {
             matchingFileName = fileName;
             matchingVariantKey = selectedVariantKey;
@@ -175,32 +173,20 @@ export function useFileNavigation(_ref) {
 
       // Check transformed files
       if (!matchingFileName && transformedFiles) {
-        var _iterator = _createForOfIteratorHelper(transformedFiles.files),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var file = _step.value;
-            var _fileSlug = generateFileSlug(mainSlug, file.originalName, selectedVariantKey);
-            if (hash === _fileSlug) {
-              matchingFileName = file.originalName;
-              matchingVariantKey = selectedVariantKey;
-              break;
-            }
+        for (const file of transformedFiles.files) {
+          const fileSlug = generateFileSlug(mainSlug, file.originalName, selectedVariantKey);
+          if (hash === fileSlug) {
+            matchingFileName = file.originalName;
+            matchingVariantKey = selectedVariantKey;
+            break;
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
       }
     }
 
     // Step 2: If no match and we can switch variants, search other variants
     if (!matchingFileName && effectiveCode && selectVariant) {
-      for (var _i2 = 0, _Object$entries = Object.entries(effectiveCode); _i2 < _Object$entries.length; _i2++) {
-        var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
-          variantKey = _Object$entries$_i[0],
-          variant = _Object$entries$_i[1];
+      for (const [variantKey, variant] of Object.entries(effectiveCode)) {
         // Skip current variant (already checked) and invalid variants
         if (variantKey === selectedVariantKey || !variant || typeof variant === 'string') {
           continue;
@@ -208,8 +194,8 @@ export function useFileNavigation(_ref) {
 
         // Check main file
         if (variant.fileName) {
-          var _mainFileSlug = generateFileSlug(mainSlug, variant.fileName, variantKey);
-          if (hash === _mainFileSlug) {
+          const mainFileSlug = generateFileSlug(mainSlug, variant.fileName, variantKey);
+          if (hash === mainFileSlug) {
             matchingFileName = variant.fileName;
             matchingVariantKey = variantKey;
             break;
@@ -218,11 +204,10 @@ export function useFileNavigation(_ref) {
 
         // Check extra files
         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);
-            if (hash === _fileSlug2) {
-              matchingFileName = _fileName;
+          for (const fileName of Object.keys(variant.extraFiles)) {
+            const fileSlug = generateFileSlug(mainSlug, fileName, variantKey);
+            if (hash === fileSlug) {
+              matchingFileName = fileName;
               matchingVariantKey = variantKey;
               break;
             }
@@ -250,14 +235,14 @@ export function useFileNavigation(_ref) {
   }, [hash, selectedVariant, selectedVariantKey, mainSlug, transformedFiles, effectiveCode, selectVariant]);
 
   // Run hash check when URL hash changes to select the matching file
-  React.useEffect(function () {
+  React.useEffect(() => {
     checkUrlHashAndSelectFile();
   }, [checkUrlHashAndSelectFile]);
 
   // When variant switches with a pending file selection, complete the file selection
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (pendingFileSelection.current && selectedVariant) {
-      var fileToSelect = pendingFileSelection.current;
+      const fileToSelect = pendingFileSelection.current;
       pendingFileSelection.current = null;
       justCompletedPendingSelection.current = true;
       setSelectedFileNameInternal(fileToSelect);
@@ -267,7 +252,7 @@ export function useFileNavigation(_ref) {
   }, [selectedVariantKey, selectedVariant]);
 
   // Reset selectedFileName when variant changes
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Skip reset if we have a pending file selection from hash navigation
     // OR if we just completed a pending file selection
     if (pendingFileSelection.current || justCompletedPendingSelection.current) {
@@ -275,7 +260,7 @@ export function useFileNavigation(_ref) {
     }
     if (selectedVariant && selectedFileNameInternal !== selectedVariant.fileName) {
       // Only reset if current selectedFileName doesn't exist in the new variant
-      var hasFile = selectedVariant.fileName === selectedFileNameInternal || selectedFileNameInternal && selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal];
+      const hasFile = selectedVariant.fileName === selectedFileNameInternal || selectedFileNameInternal && selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal];
       if (!hasFile) {
         setSelectedFileNameInternal(selectedVariant.fileName);
       }
@@ -283,7 +268,7 @@ export function useFileNavigation(_ref) {
   }, [selectedVariant, selectedFileNameInternal]);
 
   // Update hash when variant changes (user-initiated variant switch)
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Skip on initial mount - let hash-driven navigation handle it
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -312,12 +297,12 @@ export function useFileNavigation(_ref) {
     // 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);
+      const kebabMainSlug = toKebabCase(mainSlug);
       if (selectedVariantKey === 'Default') {
         setHash(kebabMainSlug);
       } else {
-        var kebabVariantName = toKebabCase(selectedVariantKey);
-        setHash("".concat(kebabMainSlug, ":").concat(kebabVariantName));
+        const kebabVariantName = toKebabCase(selectedVariantKey);
+        setHash(`${kebabMainSlug}:${kebabVariantName}`);
       }
     } else {
       // Remove entire hash
@@ -327,71 +312,63 @@ export function useFileNavigation(_ref) {
   }, [selectedVariantKey, hash, mainSlug, fileHashMode, setHash, isHashDrivenVariantChange]);
 
   // Compute the displayed filename (transformed if applicable)
-  var selectedFileName = React.useMemo(function () {
+  const selectedFileName = React.useMemo(() => {
     if (!selectedVariant) {
       return undefined;
     }
 
     // If selectedFileNameInternal is undefined, we're selecting the main file
-    var effectiveFileName = selectedFileNameInternal || selectedVariant.fileName;
+    const effectiveFileName = selectedFileNameInternal || selectedVariant.fileName;
     if (!effectiveFileName) {
       return undefined;
     }
 
     // If we have transformed files, return the transformed name
     if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === effectiveFileName;
-      });
+      const file = transformedFiles.files.find(f => f.originalName === effectiveFileName);
       return file ? file.name : effectiveFileName;
     }
 
     // Otherwise, return the original filename
     return effectiveFileName;
   }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
-  var selectedFile = React.useMemo(function () {
+  const selectedFile = React.useMemo(() => {
     if (!selectedVariant) {
       return null;
     }
 
     // If we have transformed files, use them
     if (transformedFiles) {
-      var effectiveFileName = selectedFileNameInternal || selectedVariant.fileName;
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === effectiveFileName;
-      });
+      const effectiveFileName = selectedFileNameInternal || selectedVariant.fileName;
+      const file = transformedFiles.files.find(f => f.originalName === effectiveFileName);
       return file ? file.source : null;
     }
 
     // Otherwise, use the original untransformed files
     if (selectedFileNameInternal === selectedVariant.fileName || !selectedFileNameInternal) {
-      var _selectedVariant$sour;
-      return (_selectedVariant$sour = selectedVariant.source) != null ? _selectedVariant$sour : null;
+      return selectedVariant.source ?? null;
     }
 
     // Look in extraFiles
     if (selectedFileNameInternal && selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
-      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
+      const extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
       if (typeof extraFile === 'string') {
         return extraFile;
       }
-      if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
-        var _extraFile$source;
-        return (_extraFile$source = extraFile.source) != null ? _extraFile$source : null;
+      if (extraFile && typeof extraFile === 'object' && 'source' in extraFile) {
+        return extraFile.source ?? null;
       }
     }
     return null;
   }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
-  var selectedFileComponent = React.useMemo(function () {
+  const selectedFileComponent = React.useMemo(() => {
     if (!selectedVariant) {
       return null;
     }
 
     // If we have transformed files, use them
     if (transformedFiles) {
-      var file = transformedFiles.files.find(function (f) {
-        return f.originalName === selectedFileNameInternal;
-      });
+      const file = transformedFiles.files.find(f => f.originalName === selectedFileNameInternal);
       return file ? file.component : null;
     }
 
@@ -402,6 +379,7 @@ export function useFileNavigation(_ref) {
       }
       return /*#__PURE__*/_jsx(Pre, {
         className: preClassName,
+        language: selectedVariant.language,
         ref: preRef,
         shouldHighlight: shouldHighlight,
         children: selectedVariant.source
@@ -410,11 +388,11 @@ export function useFileNavigation(_ref) {
 
     // Look in extraFiles
     if (selectedFileNameInternal && selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
-      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
-      var source;
+      const extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
+      let source;
       if (typeof extraFile === 'string') {
         source = extraFile;
-      } else if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
+      } else if (extraFile && typeof extraFile === 'object' && 'source' in extraFile) {
         source = extraFile.source;
       } else {
         return null;
@@ -424,6 +402,7 @@ export function useFileNavigation(_ref) {
       }
       return /*#__PURE__*/_jsx(Pre, {
         className: preClassName,
+        language: getLanguageFromFileName(selectedFileNameInternal),
         ref: preRef,
         shouldHighlight: shouldHighlight,
         children: source
@@ -431,7 +410,7 @@ export function useFileNavigation(_ref) {
     }
     return null;
   }, [selectedVariant, selectedFileNameInternal, transformedFiles, shouldHighlight, preClassName, preRef]);
-  var selectedFileLines = React.useMemo(function () {
+  const selectedFileLines = React.useMemo(() => {
     if (selectedFile == null) {
       return 0;
     }
@@ -442,8 +421,8 @@ export function useFileNavigation(_ref) {
     }
 
     // If it's a hast object, count the children length
-    if (selectedFile && _typeof(selectedFile) === 'object') {
-      var hastSelectedFile;
+    if (selectedFile && typeof selectedFile === 'object') {
+      let hastSelectedFile;
       if ('hastJson' in selectedFile) {
         hastSelectedFile = JSON.parse(selectedFile.hastJson);
       } else if ('hastGzip' in selectedFile) {
@@ -452,10 +431,10 @@ export function useFileNavigation(_ref) {
         hastSelectedFile = selectedFile;
       }
       if (hastSelectedFile.data && 'totalLines' in hastSelectedFile.data) {
-        var totalLines = hastSelectedFile.data.totalLines;
+        const totalLines = hastSelectedFile.data.totalLines;
         // Check if totalLines is a valid number (not null, undefined, or NaN)
         if (totalLines != null && !Number.isNaN(Number(totalLines))) {
-          var numLines = Number(totalLines);
+          const numLines = Number(totalLines);
           if (numLines >= 0) {
             return numLines;
           }
@@ -471,24 +450,22 @@ export function useFileNavigation(_ref) {
   }, [selectedFile]);
 
   // Convert files for the return interface
-  var files = React.useMemo(function () {
+  const files = React.useMemo(() => {
     if (!selectedVariant) {
       return [];
     }
 
     // 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),
-          component: f.component
-        };
-      });
+      return transformedFiles.files.map(f => ({
+        name: f.name,
+        slug: generateFileSlug(mainSlug, f.originalName, selectedVariantKey),
+        component: f.component
+      }));
     }
 
     // Otherwise, create files from original untransformed data
-    var result = [];
+    const result = [];
 
     // Only add main file if it has a fileName
     if (selectedVariant.fileName && selectedVariant.source) {
@@ -497,6 +474,7 @@ export function useFileNavigation(_ref) {
         slug: generateFileSlug(mainSlug, selectedVariant.fileName, selectedVariantKey),
         component: /*#__PURE__*/_jsx(Pre, {
           className: preClassName,
+          language: selectedVariant.language,
           ref: preRef,
           shouldHighlight: shouldHighlight,
           children: selectedVariant.source
@@ -504,15 +482,14 @@ export function useFileNavigation(_ref) {
       });
     }
     if (selectedVariant.extraFiles) {
-      Object.entries(selectedVariant.extraFiles).forEach(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          fileName = _ref3[0],
-          fileData = _ref3[1];
-        var source;
+      Object.entries(selectedVariant.extraFiles).forEach(([fileName, fileData]) => {
+        let source;
+        let language;
         if (typeof fileData === 'string') {
           source = fileData;
-        } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
+        } else if (fileData && typeof fileData === 'object' && 'source' in fileData) {
           source = fileData.source;
+          language = fileData.language;
         } else {
           return; // Skip invalid entries
         }
@@ -524,6 +501,7 @@ export function useFileNavigation(_ref) {
           slug: generateFileSlug(mainSlug, fileName, selectedVariantKey),
           component: /*#__PURE__*/_jsx(Pre, {
             className: preClassName,
+            language: language ?? getLanguageFromFileName(fileName),
             ref: preRef,
             shouldHighlight: shouldHighlight,
             children: source
@@ -535,25 +513,21 @@ export function useFileNavigation(_ref) {
   }, [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) {
+  const selectFileName = React.useCallback(fileName => {
     if (!selectedVariant) {
       return;
     }
-    var targetFileName = fileName;
+    let targetFileName = fileName;
 
     // 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;
-      });
+      const fileByTransformedName = transformedFiles.files.find(f => f.name === fileName);
       if (fileByTransformedName) {
         targetFileName = fileByTransformedName.originalName;
       } else {
         // Check if the fileName is already an original name
-        var fileByOriginalName = transformedFiles.files.find(function (f) {
-          return f.originalName === fileName;
-        });
+        const fileByOriginalName = transformedFiles.files.find(f => f.originalName === fileName);
         if (fileByOriginalName) {
           targetFileName = fileName;
         }
@@ -568,12 +542,12 @@ export function useFileNavigation(_ref) {
       }
       if (fileHashMode === 'remove-filename') {
         // Keep variant in hash: mainSlug or mainSlug:variant (for non-Default variants)
-        var kebabMainSlug = toKebabCase(mainSlug);
+        const kebabMainSlug = toKebabCase(mainSlug);
         if (selectedVariantKey === 'Default') {
           setHash(kebabMainSlug);
         } else {
-          var kebabVariantName = toKebabCase(selectedVariantKey);
-          setHash("".concat(kebabMainSlug, ":").concat(kebabVariantName));
+          const kebabVariantName = toKebabCase(selectedVariantKey);
+          setHash(`${kebabMainSlug}:${kebabVariantName}`);
         }
       } else {
         // Remove entire hash
@@ -584,75 +558,63 @@ export function useFileNavigation(_ref) {
   }, [selectedVariant, transformedFiles, mainSlug, selectedVariantKey, fileHashMode, hash, setHash, saveHashVariantToLocalStorage, saveVariantToLocalStorage]);
 
   // Memoized array of all file slugs for all variants
-  var allFilesSlugs = React.useMemo(function () {
-    var result = [];
+  const allFilesSlugs = React.useMemo(() => {
+    const result = [];
     if (!effectiveCode || !variantKeys.length) {
       return result;
     }
 
     // Iterate through all variants
-    var _iterator2 = _createForOfIteratorHelper(variantKeys),
-      _step2;
-    try {
-      var _loop = function _loop() {
-        var variantKey = _step2.value;
-        var variant = effectiveCode[variantKey];
-
-        // Skip invalid variants
-        if (!variant || typeof variant === 'string') {
-          return 1; // continue
-        }
+    for (const variantKey of variantKeys) {
+      const variant = effectiveCode[variantKey];
 
-        // 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
-          });
-        }
+      // Skip invalid variants
+      if (!variant || typeof variant === 'string') {
+        continue;
+      }
 
-        // Add main file if it exists
-        if (variant.fileName) {
+      // 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') {
+        const kebabMainSlug = toKebabCase(mainSlug);
+        const kebabVariantName = toKebabCase(variantKey);
+        const variantOnlySlug = `${kebabMainSlug}:${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),
+          variantName: variantKey
+        });
+      }
+
+      // Add extra files
+      if (variant.extraFiles) {
+        Object.keys(variant.extraFiles).forEach(fileName => {
           result.push({
-            fileName: variant.fileName,
-            slug: generateFileSlug(mainSlug, variant.fileName, variantKey),
+            fileName,
+            slug: generateFileSlug(mainSlug, fileName, variantKey),
             variantName: variantKey
           });
-        }
-
-        // Add extra files
-        if (variant.extraFiles) {
-          Object.keys(variant.extraFiles).forEach(function (fileName) {
-            result.push({
-              fileName: fileName,
-              slug: generateFileSlug(mainSlug, fileName, variantKey),
-              variantName: variantKey
-            });
-          });
-        }
-      };
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        if (_loop()) continue;
+        });
       }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
     }
     return result;
   }, [effectiveCode, variantKeys, mainSlug]);
   return {
-    selectedFileName: selectedFileName,
-    selectedFile: selectedFile,
-    selectedFileComponent: selectedFileComponent,
-    selectedFileLines: selectedFileLines,
-    files: files,
-    allFilesSlugs: allFilesSlugs,
-    selectFileName: selectFileName
+    selectedFileName,
+    selectedFile,
+    selectedFileComponent,
+    selectedFileLines,
+    files,
+    allFilesSlugs,
+    selectFileName
   };
 }