@mui/internal-docs-infra 0.3.1-canary.3 → 0.3.1-canary.5

package/esm/CodeHighlighter/CodeHighlighterClient.js

@@ -1,11 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
-import _regenerator from "@babel/runtime/helpers/esm/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import * as React from 'react';
 import { useCodeContext } from "../CodeProvider/CodeContext.js";
 import { CodeHighlighterContext } from "./CodeHighlighterContext.js";
@@ -17,33 +11,34 @@ import { codeToFallbackProps } from "./codeToFallbackProps.js";
 import { mergeCodeMetadata } from "../pipeline/loadCodeVariant/mergeCodeMetadata.js";
 import * as Errors from "./errors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-var DEBUG = false; // Set to true for debugging purposes
-
-function useInitialData(_ref) {
-  var variants = _ref.variants,
-    variantName = _ref.variantName,
-    code = _ref.code,
-    setCode = _ref.setCode,
-    fileName = _ref.fileName,
-    url = _ref.url,
-    highlightAfter = _ref.highlightAfter,
-    fallbackUsesExtraFiles = _ref.fallbackUsesExtraFiles,
-    fallbackUsesAllVariants = _ref.fallbackUsesAllVariants,
-    isControlled = _ref.isControlled,
-    globalsCode = _ref.globalsCode,
-    setProcessedGlobalsCode = _ref.setProcessedGlobalsCode;
-  var _useCodeContext = useCodeContext(),
-    sourceParser = _useCodeContext.sourceParser,
-    loadCodeMeta = _useCodeContext.loadCodeMeta,
-    loadVariantMeta = _useCodeContext.loadVariantMeta,
-    loadSource = _useCodeContext.loadSource,
-    loadCodeFallback = _useCodeContext.loadCodeFallback;
-  var _React$useMemo = React.useMemo(function () {
-      return maybeCodeInitialData(variants, variantName, code, fileName, highlightAfter === 'init', fallbackUsesExtraFiles, fallbackUsesAllVariants);
-    }, [variants, variantName, code, fileName, highlightAfter, fallbackUsesExtraFiles, fallbackUsesAllVariants]),
-    initialData = _React$useMemo.initialData,
-    reason = _React$useMemo.reason;
-  var needsFallback = !initialData && !isControlled;
+const DEBUG = false; // Set to true for debugging purposes
+
+function useInitialData({
+  variants,
+  variantName,
+  code,
+  setCode,
+  fileName,
+  url,
+  highlightAfter,
+  fallbackUsesExtraFiles,
+  fallbackUsesAllVariants,
+  isControlled,
+  globalsCode,
+  setProcessedGlobalsCode
+}) {
+  const {
+    sourceParser,
+    loadCodeMeta,
+    loadVariantMeta,
+    loadSource,
+    loadCodeFallback
+  } = useCodeContext();
+  const {
+    initialData,
+    reason
+  } = React.useMemo(() => maybeCodeInitialData(variants, variantName, code, fileName, highlightAfter === 'init', fallbackUsesExtraFiles, fallbackUsesAllVariants), [variants, variantName, code, fileName, highlightAfter, fallbackUsesExtraFiles, fallbackUsesAllVariants]);
+  const needsFallback = !initialData && !isControlled;
   if (needsFallback) {
     if (!url) {
       // URL is required for loading fallback data
@@ -56,76 +51,65 @@ function useInitialData(_ref) {
 
   // TODO: fallbackInitialRenderOnly option? this would mean we can't fetch fallback data on the client side
   // Load initial data if not provided
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!needsFallback || !url || !loadCodeFallback) {
       return;
     }
 
     // TODO: abort controller
 
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var loaded;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.n) {
-          case 0:
-            if (DEBUG) {
-              // eslint-disable-next-line no-console
-              console.log('Loading initial data for CodeHighlighterClient: ', reason);
-            }
-            _context.n = 1;
-            return loadCodeFallback(url, variantName, code, {
-              shouldHighlight: highlightAfter === 'init',
-              fallbackUsesExtraFiles: fallbackUsesExtraFiles,
-              fallbackUsesAllVariants: fallbackUsesAllVariants,
-              sourceParser: sourceParser,
-              loadSource: loadSource,
-              loadVariantMeta: loadVariantMeta,
-              loadCodeMeta: loadCodeMeta,
-              initialFilename: fileName,
-              variants: variants,
-              globalsCode: globalsCode // Let loadCodeFallback handle processing
-            })["catch"](function (error) {
-              return {
-                error: error
-              };
-            });
-          case 1:
-            loaded = _context.v;
-            if ('error' in loaded) {
-              console.error(new Errors.ErrorCodeHighlighterClientLoadFallbackFailure(loaded.error));
-            } else {
-              setCode(loaded.code);
-              // Store processed globalsCode from loadCodeFallback result
-              if (loaded.processedGlobalsCode) {
-                setProcessedGlobalsCode(loaded.processedGlobalsCode);
-              }
-            }
-          case 2:
-            return _context.a(2);
+    (async () => {
+      if (DEBUG) {
+        // eslint-disable-next-line no-console
+        console.log('Loading initial data for CodeHighlighterClient: ', reason);
+      }
+      const loaded = await loadCodeFallback(url, variantName, code, {
+        shouldHighlight: highlightAfter === 'init',
+        fallbackUsesExtraFiles,
+        fallbackUsesAllVariants,
+        sourceParser,
+        loadSource,
+        loadVariantMeta,
+        loadCodeMeta,
+        initialFilename: fileName,
+        variants,
+        globalsCode // Let loadCodeFallback handle processing
+      }).catch(error => ({
+        error
+      }));
+      if ('error' in loaded) {
+        console.error(new Errors.ErrorCodeHighlighterClientLoadFallbackFailure(loaded.error));
+      } else {
+        setCode(loaded.code);
+        // Store processed globalsCode from loadCodeFallback result
+        if (loaded.processedGlobalsCode) {
+          setProcessedGlobalsCode(loaded.processedGlobalsCode);
         }
-      }, _callee);
-    }))();
+      }
+    })();
   }, [initialData, reason, needsFallback, variantName, code, setCode, highlightAfter, url, sourceParser, loadSource, loadVariantMeta, loadCodeMeta, fallbackUsesExtraFiles, fallbackUsesAllVariants, fileName, variants, globalsCode, setProcessedGlobalsCode, loadCodeFallback]);
 }
-function useAllVariants(_ref3) {
-  var readyForContent = _ref3.readyForContent,
-    variants = _ref3.variants,
-    isControlled = _ref3.isControlled,
-    url = _ref3.url,
-    code = _ref3.code,
-    setCode = _ref3.setCode,
-    processedGlobalsCode = _ref3.processedGlobalsCode,
-    globalsCode = _ref3.globalsCode,
-    setProcessedGlobalsCode = _ref3.setProcessedGlobalsCode;
-  var _useCodeContext2 = useCodeContext(),
-    loadCodeMeta = _useCodeContext2.loadCodeMeta,
-    loadVariantMeta = _useCodeContext2.loadVariantMeta,
-    loadSource = _useCodeContext2.loadSource,
-    loadCodeVariant = _useCodeContext2.loadCodeVariant;
-  var needsData = !readyForContent && !isControlled;
+function useAllVariants({
+  readyForContent,
+  variants,
+  isControlled,
+  url,
+  code,
+  setCode,
+  processedGlobalsCode,
+  globalsCode,
+  setProcessedGlobalsCode
+}) {
+  const {
+    loadCodeMeta,
+    loadVariantMeta,
+    loadSource,
+    loadCodeVariant
+  } = useCodeContext();
+  const needsData = !readyForContent && !isControlled;
 
   // validation
-  React.useMemo(function () {
+  React.useMemo(() => {
     if (needsData) {
       if (!url) {
         throw new Errors.ErrorCodeHighlighterClientMissingUrlForVariants();
@@ -136,23 +120,19 @@ function useAllVariants(_ref3) {
       if (!code && !loadCodeMeta) {
         throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForNoCode(url);
       }
-      if (globalsCode && globalsCode.length > 0 && globalsCode.some(function (item) {
-        return typeof item === 'string';
-      }) && !loadCodeMeta) {
+      if (globalsCode && globalsCode.length > 0 && globalsCode.some(item => typeof item === 'string') && !loadCodeMeta) {
         throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForGlobals();
       }
       if (!code && !loadSource) {
         throw new Errors.ErrorCodeHighlighterClientMissingLoadSourceForNoCode();
       }
-      if (code && Object.keys(code).some(function (variantName) {
-        var variant = code[variantName];
+      if (code && Object.keys(code).some(variantName => {
+        const variant = code[variantName];
         if (!variant || typeof variant === 'string' || !variant.source) {
           return true;
         }
-        var extraFiles = variant.extraFiles;
-        if (extraFiles && Object.keys(extraFiles).some(function (fileName) {
-          return !extraFiles[fileName] || typeof extraFiles[fileName] === 'string' || !extraFiles[fileName].source;
-        })) {
+        const extraFiles = variant.extraFiles;
+        if (extraFiles && Object.keys(extraFiles).some(fileName => !extraFiles[fileName] || typeof extraFiles[fileName] === 'string' || !extraFiles[fileName].source)) {
           return true;
         }
         return false;
@@ -161,200 +141,134 @@ function useAllVariants(_ref3) {
       }
     }
   }, [code, globalsCode, loadCodeMeta, loadCodeVariant, loadSource, needsData, url]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!needsData || !url || !loadCodeVariant) {
       return;
     }
 
     // TODO: abort controller
 
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var loadedCode, globalsCodeObjects, result, resultCode, errors, _iterator, _step, item, _t;
-      return _regenerator().w(function (_context3) {
-        while (1) switch (_context3.p = _context3.n) {
-          case 0:
-            _context3.p = 0;
-            loadedCode = code;
-            if (loadedCode) {
-              _context3.n = 3;
-              break;
-            }
-            if (loadCodeMeta) {
-              _context3.n = 1;
-              break;
-            }
+    (async () => {
+      try {
+        let loadedCode = code;
+        if (!loadedCode) {
+          if (!loadCodeMeta) {
             throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMeta();
-          case 1:
-            _context3.n = 2;
-            return loadCodeMeta(url);
-          case 2:
-            loadedCode = _context3.v;
-          case 3:
-            // Use the already-processed globalsCode from state, or process it if not available
-            globalsCodeObjects = [];
-            if (!processedGlobalsCode) {
-              _context3.n = 4;
-              break;
-            }
-            // Use the already-processed globalsCode from state
-            globalsCodeObjects = processedGlobalsCode;
-            _context3.n = 6;
-            break;
-          case 4:
-            if (!(globalsCode && globalsCode.length > 0)) {
-              _context3.n = 6;
-              break;
-            }
-            _context3.n = 5;
-            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
-              var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(item) {
-                return _regenerator().w(function (_context2) {
-                  while (1) switch (_context2.n) {
-                    case 0:
-                      if (!(typeof item === 'string')) {
-                        _context2.n = 2;
-                        break;
-                      }
-                      if (loadCodeMeta) {
-                        _context2.n = 1;
-                        break;
-                      }
-                      throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMeta();
-                    case 1:
-                      return _context2.a(2, loadCodeMeta(item));
-                    case 2:
-                      return _context2.a(2, item);
-                  }
-                }, _callee2);
-              }));
-              return function (_x) {
-                return _ref5.apply(this, arguments);
-              };
-            }()));
-          case 5:
-            globalsCodeObjects = _context3.v;
-            // Store processed globalsCode in state for future use
-            setProcessedGlobalsCode(globalsCodeObjects);
-          case 6:
-            _context3.n = 7;
-            return Promise.all(variants.map(function (name) {
-              // Resolve globalsCode for this specific variant
-              var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
-                // Only include if this variant exists in the globalsCode
-                return codeObj[name];
-              }).filter(function (item) {
-                return Boolean(item);
-              });
-              return loadCodeVariant(url, name, loadedCode[name], {
-                disableParsing: true,
-                disableTransforms: true,
-                loadSource: loadSource,
-                loadVariantMeta: loadVariantMeta,
-                globalsCode: globalsForVariant
-              }).then(function (variant) {
-                return {
-                  name: name,
-                  variant: variant
-                };
-              })["catch"](function (error) {
-                return {
-                  error: error
-                };
-              });
-            }));
-          case 7:
-            result = _context3.v;
-            resultCode = {};
-            errors = [];
-            _iterator = _createForOfIteratorHelper(result);
-            try {
-              for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                item = _step.value;
-                if ('error' in item) {
-                  errors.push(item.error);
-                } else {
-                  resultCode[item.name] = item.variant.code;
-                }
+          }
+          loadedCode = await loadCodeMeta(url);
+        }
+
+        // Use the already-processed globalsCode from state, or process it if not available
+        let globalsCodeObjects = [];
+        if (processedGlobalsCode) {
+          // Use the already-processed globalsCode from state
+          globalsCodeObjects = processedGlobalsCode;
+        } else if (globalsCode && globalsCode.length > 0) {
+          // Process globalsCode: load any string URLs into Code objects
+          globalsCodeObjects = await Promise.all(globalsCode.map(async item => {
+            if (typeof item === 'string') {
+              // Load Code object from URL string
+              if (!loadCodeMeta) {
+                throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMeta();
               }
-            } catch (err) {
-              _iterator.e(err);
-            } finally {
-              _iterator.f();
-            }
-            if (errors.length > 0) {
-              console.error(new Errors.ErrorCodeHighlighterClientLoadVariantsFailure(url, errors));
-            } else {
-              setCode(resultCode);
+              return loadCodeMeta(item);
             }
-            _context3.n = 9;
-            break;
-          case 8:
-            _context3.p = 8;
-            _t = _context3.v;
-            console.error(new Errors.ErrorCodeHighlighterClientLoadAllVariantsFailure(url, _t));
-          case 9:
-            return _context3.a(2);
+            // Already a Code object
+            return item;
+          }));
+          // Store processed globalsCode in state for future use
+          setProcessedGlobalsCode(globalsCodeObjects);
         }
-      }, _callee3, null, [[0, 8]]);
-    }))();
+
+        // Load variant data without parsing or transforming
+        const result = await Promise.all(variants.map(name => {
+          // Resolve globalsCode for this specific variant
+          const globalsForVariant = globalsCodeObjects.map(codeObj => {
+            // Only include if this variant exists in the globalsCode
+            return codeObj[name];
+          }).filter(item => Boolean(item));
+          return loadCodeVariant(url, name, loadedCode[name], {
+            disableParsing: true,
+            disableTransforms: true,
+            loadSource,
+            loadVariantMeta,
+            globalsCode: globalsForVariant
+          }).then(variant => ({
+            name,
+            variant
+          })).catch(error => ({
+            error
+          }));
+        }));
+        const resultCode = {};
+        const errors = [];
+        for (const item of result) {
+          if ('error' in item) {
+            errors.push(item.error);
+          } else {
+            resultCode[item.name] = item.variant.code;
+          }
+        }
+        if (errors.length > 0) {
+          console.error(new Errors.ErrorCodeHighlighterClientLoadVariantsFailure(url, errors));
+        } else {
+          setCode(resultCode);
+        }
+      } catch (error) {
+        console.error(new Errors.ErrorCodeHighlighterClientLoadAllVariantsFailure(url, error));
+      }
+    })();
   }, [needsData, variants, url, code, setCode, loadSource, loadVariantMeta, loadCodeMeta, processedGlobalsCode, globalsCode, setProcessedGlobalsCode, loadCodeVariant]);
   return {
-    readyForContent: readyForContent
+    readyForContent
   };
 }
 function yieldToMain() {
-  var _scheduler;
-  if ((_scheduler = globalThis.scheduler) != null && _scheduler["yield"]) {
-    return globalThis.scheduler["yield"]();
+  if (globalThis.scheduler?.yield) {
+    return globalThis.scheduler.yield();
   }
 
   // Fall back to yielding with setTimeout.
-  return new Promise(function (resolve) {
+  return new Promise(resolve => {
     setTimeout(resolve, 0);
   });
 }
-function useCodeParsing(_ref6) {
-  var code = _ref6.code,
-    readyForContent = _ref6.readyForContent,
-    highlightAfter = _ref6.highlightAfter,
-    isHydrated = _ref6.isHydrated,
-    forceClient = _ref6.forceClient,
-    url = _ref6.url;
-  var _useCodeContext3 = useCodeContext(),
-    parseSource = _useCodeContext3.parseSource,
-    parseCode = _useCodeContext3.parseCode;
-  var _React$useState = React.useState(highlightAfter === 'init' || highlightAfter === 'hydration' && isHydrated),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isHighlightAllowed = _React$useState2[0],
-    setIsHighlightAllowed = _React$useState2[1];
-  React.useEffect(function () {
+function useCodeParsing({
+  code,
+  readyForContent,
+  highlightAfter,
+  isHydrated,
+  forceClient,
+  url
+}) {
+  const {
+    parseSource,
+    parseCode
+  } = useCodeContext();
+  const [isHighlightAllowed, setIsHighlightAllowed] = React.useState(highlightAfter === 'init' || highlightAfter === 'hydration' && isHydrated);
+  React.useEffect(() => {
     if (highlightAfter === 'idle') {
-      var _window$requestIdleCa, _window$cancelIdleCal;
-      var requestIdleCallback = (_window$requestIdleCa = window.requestIdleCallback) != null ? _window$requestIdleCa : setTimeout;
-      var cancelIdleCallback = (_window$cancelIdleCal = window.cancelIdleCallback) != null ? _window$cancelIdleCal : clearTimeout;
-      var idleRequest = requestIdleCallback(function () {
+      const requestIdleCallback = window.requestIdleCallback ?? setTimeout;
+      const cancelIdleCallback = window.cancelIdleCallback ?? clearTimeout;
+      const idleRequest = requestIdleCallback(() => {
         setIsHighlightAllowed(true);
       });
-      return function () {
-        return cancelIdleCallback(idleRequest);
-      };
+      return () => cancelIdleCallback(idleRequest);
     }
     return undefined;
   }, [highlightAfter]);
 
   // Update highlight allowed state when hydration completes
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (highlightAfter === 'hydration' && isHydrated) {
       // we should ensure that each code highlighter is enhanced as a separate task
       // this should run from top to bottom
-      yieldToMain().then(function () {
-        return setIsHighlightAllowed(true);
-      });
+      yieldToMain().then(() => setIsHighlightAllowed(true));
     }
   }, [highlightAfter, isHydrated]);
 
   // Determine if we should highlight based on the highlightAfter setting
-  var shouldHighlight = React.useMemo(function () {
+  const shouldHighlight = React.useMemo(() => {
     if (!readyForContent) {
       return false;
     }
@@ -362,7 +276,7 @@ function useCodeParsing(_ref6) {
   }, [readyForContent, isHighlightAllowed]);
 
   // Parse the internal code state when ready and timing conditions are met
-  var parsedCode = React.useMemo(function () {
+  const parsedCode = React.useMemo(() => {
     if (!code || !shouldHighlight || hasAllVariants(Object.keys(code), code, true)) {
       return undefined;
     }
@@ -384,26 +298,25 @@ function useCodeParsing(_ref6) {
     }
     return parseCode(code, parseSource);
   }, [code, shouldHighlight, parseSource, parseCode, forceClient, url]);
-  var deferHighlight = !shouldHighlight;
+  const deferHighlight = !shouldHighlight;
   return {
-    parsedCode: parsedCode,
-    deferHighlight: deferHighlight
+    parsedCode,
+    deferHighlight
   };
 }
-function useCodeTransforms(_ref7) {
-  var parsedCode = _ref7.parsedCode,
-    variantName = _ref7.variantName;
-  var _useCodeContext4 = useCodeContext(),
-    sourceParser = _useCodeContext4.sourceParser,
-    getAvailableTransforms = _useCodeContext4.getAvailableTransforms,
-    computeHastDeltas = _useCodeContext4.computeHastDeltas;
-  var _React$useState3 = React.useState(undefined),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    transformedCode = _React$useState4[0],
-    setTransformedCode = _React$useState4[1];
+function useCodeTransforms({
+  parsedCode,
+  variantName
+}) {
+  const {
+    sourceParser,
+    getAvailableTransforms,
+    computeHastDeltas
+  } = useCodeContext();
+  const [transformedCode, setTransformedCode] = React.useState(undefined);
 
   // Get available transforms from the current variant (separate memo for efficiency)
-  var availableTransforms = React.useMemo(function () {
+  const availableTransforms = React.useMemo(() => {
     if (!getAvailableTransforms) {
       return [];
     }
@@ -411,56 +324,41 @@ function useCodeTransforms(_ref7) {
   }, [parsedCode, variantName, getAvailableTransforms]);
 
   // Effect to compute transformations for all variants
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!parsedCode || !sourceParser || !computeHastDeltas) {
       setTransformedCode(parsedCode);
       return;
     }
 
     // Process transformations for all variants
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-      var parseSource, enhanced, _t2;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.p = _context4.n) {
-          case 0:
-            _context4.p = 0;
-            _context4.n = 1;
-            return sourceParser;
-          case 1:
-            parseSource = _context4.v;
-            _context4.n = 2;
-            return computeHastDeltas(parsedCode, parseSource);
-          case 2:
-            enhanced = _context4.v;
-            setTransformedCode(enhanced);
-            _context4.n = 4;
-            break;
-          case 3:
-            _context4.p = 3;
-            _t2 = _context4.v;
-            console.error(new Errors.ErrorCodeHighlighterClientTransformProcessingFailure(_t2));
-            setTransformedCode(parsedCode);
-          case 4:
-            return _context4.a(2);
-        }
-      }, _callee4, null, [[0, 3]]);
-    }))();
+    (async () => {
+      try {
+        const parseSource = await sourceParser;
+        const enhanced = await computeHastDeltas(parsedCode, parseSource);
+        setTransformedCode(enhanced);
+      } catch (error) {
+        console.error(new Errors.ErrorCodeHighlighterClientTransformProcessingFailure(error));
+        setTransformedCode(parsedCode);
+      }
+    })();
   }, [parsedCode, sourceParser, computeHastDeltas]);
   return {
-    transformedCode: transformedCode,
-    availableTransforms: availableTransforms
+    transformedCode,
+    availableTransforms
   };
 }
-function useControlledCodeParsing(_ref9) {
-  var code = _ref9.code,
-    forceClient = _ref9.forceClient,
-    url = _ref9.url;
-  var _useCodeContext5 = useCodeContext(),
-    parseSource = _useCodeContext5.parseSource,
-    parseControlledCode = _useCodeContext5.parseControlledCode;
+function useControlledCodeParsing({
+  code,
+  forceClient,
+  url
+}) {
+  const {
+    parseSource,
+    parseControlledCode
+  } = useCodeContext();
 
   // Parse the controlled code separately (no need to check readyForContent)
-  var parsedControlledCode = React.useMemo(function () {
+  const parsedControlledCode = React.useMemo(() => {
     if (!code) {
       return undefined;
     }
@@ -485,38 +383,36 @@ function useControlledCodeParsing(_ref9) {
     return parseControlledCode(code, parseSource);
   }, [code, parseSource, parseControlledCode, forceClient, url]);
   return {
-    parsedControlledCode: parsedControlledCode
+    parsedControlledCode
   };
 }
-function useGlobalsCodeMerging(_ref0) {
-  var url = _ref0.url,
-    code = _ref0.code,
-    globalsCode = _ref0.globalsCode,
-    processedGlobalsCode = _ref0.processedGlobalsCode,
-    setProcessedGlobalsCode = _ref0.setProcessedGlobalsCode,
-    readyForContent = _ref0.readyForContent,
-    variants = _ref0.variants;
-  var _useCodeContext6 = useCodeContext(),
-    loadCodeMeta = _useCodeContext6.loadCodeMeta,
-    loadSource = _useCodeContext6.loadSource,
-    loadVariantMeta = _useCodeContext6.loadVariantMeta,
-    loadCodeVariant = _useCodeContext6.loadCodeVariant;
+function useGlobalsCodeMerging({
+  url,
+  code,
+  globalsCode,
+  processedGlobalsCode,
+  setProcessedGlobalsCode,
+  readyForContent,
+  variants
+}) {
+  const {
+    loadCodeMeta,
+    loadSource,
+    loadVariantMeta,
+    loadCodeVariant
+  } = useCodeContext();
 
   // Set processedGlobalsCode if we have ready Code objects but haven't stored them yet
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!globalsCode || processedGlobalsCode) {
       return; // No globals or already processed
     }
 
     // Check if all items are already Code objects (precomputed)
-    if (globalsCode.every(function (item) {
-      return _typeof(item) === 'object';
-    })) {
-      var codeObjects = globalsCode;
+    if (globalsCode.every(item => typeof item === 'object')) {
+      const codeObjects = globalsCode;
       // Check if all Code objects have all their own variants
-      var allReady = codeObjects.every(function (codeObj) {
-        return hasAllVariants(Object.keys(codeObj), codeObj);
-      });
+      const allReady = codeObjects.every(codeObj => hasAllVariants(Object.keys(codeObj), codeObj));
       if (allReady) {
         setProcessedGlobalsCode(codeObjects);
         return;
@@ -529,149 +425,79 @@ function useGlobalsCodeMerging(_ref0) {
     }
 
     // Need to load string URLs or load missing variants
-    _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
-      var basicCodeObjects, fullyLoadedCodeObjects, _t6;
-      return _regenerator().w(function (_context8) {
-        while (1) switch (_context8.p = _context8.n) {
-          case 0:
-            _context8.p = 0;
-            _context8.n = 1;
-            return Promise.all(globalsCode.map(/*#__PURE__*/function () {
-              var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(item) {
-                var _t3, _t4;
-                return _regenerator().w(function (_context5) {
-                  while (1) switch (_context5.n) {
-                    case 0:
-                      if (!(typeof item === 'string')) {
-                        _context5.n = 3;
-                        break;
-                      }
-                      if (loadCodeMeta) {
-                        _context5.n = 1;
-                        break;
-                      }
-                      throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForStringUrls();
-                    case 1:
-                      _context5.n = 2;
-                      return loadCodeMeta(item);
-                    case 2:
-                      _t3 = _context5.v;
-                      _t4 = item;
-                      return _context5.a(2, {
-                        codeObj: _t3,
-                        originalUrl: _t4
-                      });
-                    case 3:
-                      return _context5.a(2, {
-                        codeObj: item,
-                        originalUrl: undefined
-                      });
-                  }
-                }, _callee5);
-              }));
-              return function (_x2) {
-                return _ref10.apply(this, arguments);
-              };
-            }()));
-          case 1:
-            basicCodeObjects = _context8.v;
-            _context8.n = 2;
-            return Promise.all(basicCodeObjects.map(/*#__PURE__*/function () {
-              var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(_ref11) {
-                var codeObj, originalUrl, loadedVariants;
-                return _regenerator().w(function (_context7) {
-                  while (1) switch (_context7.n) {
-                    case 0:
-                      codeObj = _ref11.codeObj, originalUrl = _ref11.originalUrl;
-                      if (!hasAllVariants(variants, codeObj)) {
-                        _context7.n = 1;
-                        break;
-                      }
-                      return _context7.a(2, codeObj);
-                    case 1:
-                      // Need to load missing variants
-                      loadedVariants = _extends({}, codeObj);
-                      _context7.n = 2;
-                      return Promise.all(variants.map(/*#__PURE__*/function () {
-                        var _ref13 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(variantName) {
-                          var result, _t5;
-                          return _regenerator().w(function (_context6) {
-                            while (1) switch (_context6.p = _context6.n) {
-                              case 0:
-                                if (!(codeObj[variantName] && _typeof(codeObj[variantName]) === 'object')) {
-                                  _context6.n = 1;
-                                  break;
-                                }
-                                return _context6.a(2);
-                              case 1:
-                                _context6.p = 1;
-                                _context6.n = 2;
-                                return loadCodeVariant(originalUrl || '',
-                                // Use the original URL if available
-                                variantName, codeObj[variantName],
-                                // May be undefined or string
-                                {
-                                  disableParsing: true,
-                                  disableTransforms: true,
-                                  loadSource: loadSource,
-                                  loadVariantMeta: loadVariantMeta
-                                });
-                              case 2:
-                                result = _context6.v;
-                                loadedVariants[variantName] = result.code;
-                                _context6.n = 4;
-                                break;
-                              case 3:
-                                _context6.p = 3;
-                                _t5 = _context6.v;
-                                console.error(new Errors.ErrorCodeHighlighterClientLoadVariantFailureForGlobals(variantName, originalUrl, _t5));
-                                // Keep the original variant data (may be undefined)
-                              case 4:
-                                return _context6.a(2);
-                            }
-                          }, _callee6, null, [[1, 3]]);
-                        }));
-                        return function (_x4) {
-                          return _ref13.apply(this, arguments);
-                        };
-                      }()));
-                    case 2:
-                      return _context7.a(2, loadedVariants);
-                  }
-                }, _callee7);
-              }));
-              return function (_x3) {
-                return _ref12.apply(this, arguments);
-              };
-            }()));
-          case 2:
-            fullyLoadedCodeObjects = _context8.v;
-            setProcessedGlobalsCode(fullyLoadedCodeObjects);
-            _context8.n = 4;
-            break;
-          case 3:
-            _context8.p = 3;
-            _t6 = _context8.v;
-            console.error(new Errors.ErrorCodeHighlighterClientLoadGlobalsCodeFailure(url || 'No URL', _t6));
-          case 4:
-            return _context8.a(2);
-        }
-      }, _callee8, null, [[0, 3]]);
-    }))();
+    (async () => {
+      try {
+        // First, load any string URLs into Code objects
+        const basicCodeObjects = await Promise.all(globalsCode.map(async item => {
+          if (typeof item === 'string') {
+            if (!loadCodeMeta) {
+              throw new Errors.ErrorCodeHighlighterClientMissingLoadCodeMetaForStringUrls();
+            }
+            return {
+              codeObj: await loadCodeMeta(item),
+              originalUrl: item
+            };
+          }
+          return {
+            codeObj: item,
+            originalUrl: undefined
+          };
+        }));
+
+        // Now check if we need to load variants for any of the Code objects
+        const fullyLoadedCodeObjects = await Promise.all(basicCodeObjects.map(async ({
+          codeObj,
+          originalUrl
+        }) => {
+          // Check if this Code object has all required variants
+          if (hasAllVariants(variants, codeObj)) {
+            return codeObj; // Already has all variants
+          }
+
+          // Need to load missing variants
+          const loadedVariants = {
+            ...codeObj
+          };
+          await Promise.all(variants.map(async variantName => {
+            if (codeObj[variantName] && typeof codeObj[variantName] === 'object') {
+              return; // Variant already loaded
+            }
+
+            // Need to load this variant
+            try {
+              const result = await loadCodeVariant(originalUrl || '',
+              // Use the original URL if available
+              variantName, codeObj[variantName],
+              // May be undefined or string
+              {
+                disableParsing: true,
+                disableTransforms: true,
+                loadSource,
+                loadVariantMeta
+              });
+              loadedVariants[variantName] = result.code;
+            } catch (error) {
+              console.error(new Errors.ErrorCodeHighlighterClientLoadVariantFailureForGlobals(variantName, originalUrl, error));
+              // Keep the original variant data (may be undefined)
+            }
+          }));
+          return loadedVariants;
+        }));
+        setProcessedGlobalsCode(fullyLoadedCodeObjects);
+      } catch (error) {
+        console.error(new Errors.ErrorCodeHighlighterClientLoadGlobalsCodeFailure(url || 'No URL', error));
+      }
+    })();
   }, [url, globalsCode, processedGlobalsCode, setProcessedGlobalsCode, loadCodeMeta, loadSource, loadVariantMeta, variants, loadCodeVariant]);
 
   // Determine globalsCodeObjects to use (prefer processed, fallback to direct if ready)
-  var globalsCodeObjects = React.useMemo(function () {
+  const globalsCodeObjects = React.useMemo(() => {
     if (processedGlobalsCode) {
       return processedGlobalsCode;
     }
-    if (globalsCode && globalsCode.every(function (item) {
-      return _typeof(item) === 'object';
-    })) {
-      var codeObjects = globalsCode;
-      var allGlobalsReady = codeObjects.every(function (codeObj) {
-        return hasAllVariants(Object.keys(codeObj), codeObj);
-      });
+    if (globalsCode && globalsCode.every(item => typeof item === 'object')) {
+      const codeObjects = globalsCode;
+      const allGlobalsReady = codeObjects.every(codeObj => hasAllVariants(Object.keys(codeObj), codeObj));
       if (allGlobalsReady) {
         return codeObjects;
       }
@@ -680,7 +506,7 @@ function useGlobalsCodeMerging(_ref0) {
   }, [processedGlobalsCode, globalsCode]);
 
   // Merge globalsCode with code when ready
-  return React.useMemo(function () {
+  return React.useMemo(() => {
     // If no globalsCode or code not ready, return as-is
     if (!globalsCode || !code || !readyForContent) {
       return code;
@@ -692,37 +518,34 @@ function useGlobalsCodeMerging(_ref0) {
     }
 
     // For precomputed code, do simple synchronous merging of extraFiles
-    var mergedCode = _extends({}, code);
-    var hasChanges = false;
-    variants.forEach(function (variant) {
-      var variantData = code[variant];
+    const mergedCode = {
+      ...code
+    };
+    let hasChanges = false;
+    variants.forEach(variant => {
+      const variantData = code[variant];
       if (!variantData || typeof variantData === 'string') {
         return;
       }
 
       // Get globalsCode for this variant (only exact matches, no fallback)
-      var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
-        return codeObj[variant];
-      }).filter(function (item) {
-        return Boolean(item) && _typeof(item) === 'object';
-      });
+      const globalsForVariant = globalsCodeObjects.map(codeObj => codeObj[variant]).filter(item => Boolean(item) && typeof item === 'object');
       if (globalsForVariant.length > 0) {
         // Use mergeCodeMetadata for sophisticated globals merging with proper positioning
-        var currentVariant = variantData;
-        globalsForVariant.forEach(function (globalVariant) {
+        let currentVariant = variantData;
+        globalsForVariant.forEach(globalVariant => {
           if (globalVariant.extraFiles) {
             // Convert globals extraFiles to metadata format for mergeCodeMetadata
-            var globalsMetadata = {};
-            for (var _i = 0, _Object$entries = Object.entries(globalVariant.extraFiles); _i < _Object$entries.length; _i++) {
-              var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-                key = _Object$entries$_i[0],
-                value = _Object$entries$_i[1];
+            const globalsMetadata = {};
+            for (const [key, value] of Object.entries(globalVariant.extraFiles)) {
               if (typeof value === 'string') {
                 globalsMetadata[key] = {
                   source: value
                 };
               } else {
-                globalsMetadata[key] = _extends({}, value);
+                globalsMetadata[key] = {
+                  ...value
+                };
               }
             }
 
@@ -743,53 +566,51 @@ function useGlobalsCodeMerging(_ref0) {
     return hasChanges ? mergedCode : code;
   }, [code, globalsCode, globalsCodeObjects, readyForContent, variants]);
 }
-function usePropsCodeGlobalsMerging(_ref14) {
-  var code = _ref14.code,
-    globalsCode = _ref14.globalsCode,
-    processedGlobalsCode = _ref14.processedGlobalsCode,
-    variants = _ref14.variants;
+function usePropsCodeGlobalsMerging({
+  code,
+  globalsCode,
+  processedGlobalsCode,
+  variants
+}) {
   // For props.code, always do synchronous merging if possible
   // We don't want to cache this in state since props.code can change frequently
-  return React.useMemo(function () {
+  return React.useMemo(() => {
     if (!code || !globalsCode || !processedGlobalsCode) {
       return code; // No merge needed or not ready
     }
 
     // Use processedGlobalsCode for synchronous merging
-    var globalsCodeObjects = processedGlobalsCode;
+    const globalsCodeObjects = processedGlobalsCode;
 
     // For props.code (controlled), do simple synchronous merging
-    var mergedCode = _extends({}, code);
-    var hasChanges = false;
-    variants.forEach(function (variant) {
-      var variantData = code[variant];
+    const mergedCode = {
+      ...code
+    };
+    let hasChanges = false;
+    variants.forEach(variant => {
+      const variantData = code[variant];
       if (!variantData || typeof variantData === 'string') {
         return;
       }
 
       // Get globalsCode for this variant (only exact matches, no fallback)
-      var globalsForVariant = globalsCodeObjects.map(function (codeObj) {
-        return codeObj[variant];
-      }).filter(function (item) {
-        return Boolean(item) && _typeof(item) === 'object';
-      });
+      const globalsForVariant = globalsCodeObjects.map(codeObj => codeObj[variant]).filter(item => Boolean(item) && typeof item === 'object');
       if (globalsForVariant.length > 0) {
         // Use mergeCodeMetadata for sophisticated globals merging with proper positioning
-        var currentVariant = variantData;
-        globalsForVariant.forEach(function (globalVariant) {
+        let currentVariant = variantData;
+        globalsForVariant.forEach(globalVariant => {
           if (globalVariant.extraFiles) {
             // Convert globals extraFiles to metadata format for mergeCodeMetadata
-            var globalsMetadata = {};
-            for (var _i2 = 0, _Object$entries2 = Object.entries(globalVariant.extraFiles); _i2 < _Object$entries2.length; _i2++) {
-              var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-                key = _Object$entries2$_i[0],
-                value = _Object$entries2$_i[1];
+            const globalsMetadata = {};
+            for (const [key, value] of Object.entries(globalVariant.extraFiles)) {
               if (typeof value === 'string') {
                 globalsMetadata[key] = {
                   source: value
                 };
               } else {
-                globalsMetadata[key] = _extends({}, value);
+                globalsMetadata[key] = {
+                  ...value
+                };
               }
             }
 
@@ -811,17 +632,13 @@ function usePropsCodeGlobalsMerging(_ref14) {
   }, [code, globalsCode, processedGlobalsCode, variants]);
 }
 export function CodeHighlighterClient(props) {
-  var _controlled$selection, _controlled$selection2;
-  var controlled = useControlledCode();
-  var isControlled = Boolean(props.code || (controlled == null ? void 0 : controlled.code));
-  var _React$useState5 = React.useState(_typeof(props.precompute) === 'object' ? props.precompute : undefined),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    code = _React$useState6[0],
-    setCode = _React$useState6[1];
+  const controlled = useControlledCode();
+  const isControlled = Boolean(props.code || controlled?.code);
+  const [code, setCode] = React.useState(typeof props.precompute === 'object' ? props.precompute : undefined);
 
   // Sync code state with precompute prop changes (for hot-reload)
-  React.useEffect(function () {
-    if (_typeof(props.precompute) === 'object') {
+  React.useEffect(() => {
+    if (typeof props.precompute === 'object') {
       setCode(props.precompute);
     } else if (props.precompute === undefined) {
       // Only reset to undefined if precompute is explicitly undefined
@@ -830,94 +647,72 @@ export function CodeHighlighterClient(props) {
   }, [props.precompute]);
 
   // State to store processed globalsCode to avoid duplicate loading
-  var _React$useState7 = React.useState(undefined),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    processedGlobalsCode = _React$useState8[0],
-    setProcessedGlobalsCode = _React$useState8[1];
-  var activeCode = (controlled == null ? void 0 : controlled.code) || props.code || code;
-  var variants = React.useMemo(function () {
-    return props.variants || Object.keys(props.components || activeCode || {});
-  }, [props.variants, props.components, activeCode]);
+  const [processedGlobalsCode, setProcessedGlobalsCode] = React.useState(undefined);
+  const activeCode = controlled?.code || props.code || code;
+  const variants = React.useMemo(() => props.variants || Object.keys(props.components || activeCode || {}), [props.variants, props.components, activeCode]);
 
   // TODO: if using props.variant, then the variant is controlled and we can't use our own state
   // does props.variant make any sense instead of controlledSelection?.variant?
-  var _React$useState9 = React.useState({
-      variant: props.initialVariant || props.defaultVariant || variants[0]
-    }),
-    _React$useState0 = _slicedToArray(_React$useState9, 2),
-    selection = _React$useState0[0],
-    setSelection = _React$useState0[1];
-  var variantName = (controlled == null || (_controlled$selection = controlled.selection) == null ? void 0 : _controlled$selection.variant) || props.variant || selection.variant;
-  var initialFilename;
-  if (_typeof(activeCode == null ? void 0 : activeCode[variantName]) === 'object') {
-    var variant = activeCode[variantName];
-    initialFilename = variant != null && variant.filesOrder ? variant.filesOrder[0] : variant == null ? void 0 : variant.fileName;
+  const [selection, setSelection] = React.useState({
+    variant: props.initialVariant || props.defaultVariant || variants[0]
+  });
+  const variantName = controlled?.selection?.variant || props.variant || selection.variant;
+  let initialFilename;
+  if (typeof activeCode?.[variantName] === 'object') {
+    const variant = activeCode[variantName];
+    initialFilename = variant?.filesOrder ? variant.filesOrder[0] : variant?.fileName;
   }
-  var fileName = (controlled == null || (_controlled$selection2 = controlled.selection) == null ? void 0 : _controlled$selection2.fileName) || props.fileName || initialFilename;
-  var url = props.url,
-    highlightAfter = props.highlightAfter,
-    enhanceAfter = props.enhanceAfter,
-    fallbackUsesExtraFiles = props.fallbackUsesExtraFiles,
-    fallbackUsesAllVariants = props.fallbackUsesAllVariants;
+  const fileName = controlled?.selection?.fileName || props.fileName || initialFilename;
+  const {
+    url,
+    highlightAfter,
+    enhanceAfter,
+    fallbackUsesExtraFiles,
+    fallbackUsesAllVariants
+  } = props;
   useInitialData({
-    variants: variants,
-    variantName: variantName,
-    code: code,
-    setCode: setCode,
-    fileName: fileName,
-    url: url,
-    highlightAfter: highlightAfter,
-    fallbackUsesExtraFiles: fallbackUsesExtraFiles,
-    fallbackUsesAllVariants: fallbackUsesAllVariants,
-    isControlled: isControlled,
+    variants,
+    variantName,
+    code,
+    setCode,
+    fileName,
+    url,
+    highlightAfter,
+    fallbackUsesExtraFiles,
+    fallbackUsesAllVariants,
+    isControlled,
     globalsCode: props.globalsCode,
-    setProcessedGlobalsCode: setProcessedGlobalsCode
+    setProcessedGlobalsCode
   });
 
   // Use useSyncExternalStore to detect hydration
-  var subscribe = React.useCallback(function () {
-    return function () {};
-  }, []);
-  var getSnapshot = React.useCallback(function () {
-    return true;
-  }, []);
-  var getServerSnapshot = React.useCallback(function () {
-    return false;
-  }, []);
-  var useIsHydrated = function useIsHydrated() {
-    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  };
-  var isHydrated = useIsHydrated();
-  var _React$useState1 = React.useState(enhanceAfter === 'init' || enhanceAfter === 'hydration' && isHydrated),
-    _React$useState10 = _slicedToArray(_React$useState1, 2),
-    isEnhanceAllowed = _React$useState10[0],
-    setIsEnhanceAllowed = _React$useState10[1];
-  React.useEffect(function () {
+  const subscribe = React.useCallback(() => () => {}, []);
+  const getSnapshot = React.useCallback(() => true, []);
+  const getServerSnapshot = React.useCallback(() => false, []);
+  const useIsHydrated = () => React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const isHydrated = useIsHydrated();
+  const [isEnhanceAllowed, setIsEnhanceAllowed] = React.useState(enhanceAfter === 'init' || enhanceAfter === 'hydration' && isHydrated);
+  React.useEffect(() => {
     if (enhanceAfter === 'idle') {
-      var _window$requestIdleCa2, _window$cancelIdleCal2;
-      var requestIdleCallback = (_window$requestIdleCa2 = window.requestIdleCallback) != null ? _window$requestIdleCa2 : setTimeout;
-      var cancelIdleCallback = (_window$cancelIdleCal2 = window.cancelIdleCallback) != null ? _window$cancelIdleCal2 : clearTimeout;
-      var idleRequest = requestIdleCallback(function () {
+      const requestIdleCallback = window.requestIdleCallback ?? setTimeout;
+      const cancelIdleCallback = window.cancelIdleCallback ?? clearTimeout;
+      const idleRequest = requestIdleCallback(() => {
         setIsEnhanceAllowed(true);
       });
-      return function () {
-        return cancelIdleCallback(idleRequest);
-      };
+      return () => cancelIdleCallback(idleRequest);
     }
     return undefined;
   }, [enhanceAfter]);
 
   // Update enhance allowed state when hydration completes
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (enhanceAfter === 'hydration' && isHydrated) {
       // we should ensure that each code highlighter is enhanced as a separate task
       // this should run from top to bottom
-      yieldToMain().then(function () {
-        return setIsEnhanceAllowed(true);
-      });
+      yieldToMain().then(() => setIsEnhanceAllowed(true));
     }
   }, [enhanceAfter, isHydrated]);
-  var readyForContent = React.useMemo(function () {
+  const readyForContent = React.useMemo(() => {
     if (!code) {
       return false;
     }
@@ -925,102 +720,101 @@ export function CodeHighlighterClient(props) {
   }, [code, variants]);
 
   // Separate check for activeCode to determine when to show fallback
-  var activeCodeReady = React.useMemo(function () {
+  const activeCodeReady = React.useMemo(() => {
     if (!activeCode || !isEnhanceAllowed) {
       return false;
     }
 
     // Controlled code is always ready since it comes from editing already-ready code
-    if (controlled != null && controlled.code) {
+    if (controlled?.code) {
       return true;
     }
 
     // For regular code, use the existing hasAllVariants function
-    var regularCode = props.code || code;
+    const regularCode = props.code || code;
     return regularCode ? hasAllVariants(variants, regularCode) : false;
-  }, [activeCode, isEnhanceAllowed, controlled == null ? void 0 : controlled.code, variants, props.code, code]);
+  }, [activeCode, isEnhanceAllowed, controlled?.code, variants, props.code, code]);
   useAllVariants({
-    readyForContent: readyForContent,
-    variants: variants,
-    isControlled: isControlled,
-    url: url,
-    code: code,
-    setCode: setCode,
-    processedGlobalsCode: processedGlobalsCode,
+    readyForContent,
+    variants,
+    isControlled,
+    url,
+    code,
+    setCode,
+    processedGlobalsCode,
     globalsCode: props.globalsCode,
-    setProcessedGlobalsCode: setProcessedGlobalsCode
+    setProcessedGlobalsCode
   });
 
   // Merge globalsCode with internal state code (fetched data) - this should be stable once ready
-  var stateCodeWithGlobals = useGlobalsCodeMerging({
-    url: url,
-    code: code,
+  const stateCodeWithGlobals = useGlobalsCodeMerging({
+    url,
+    code,
     // Only use internal state, not props.code
     globalsCode: props.globalsCode,
-    processedGlobalsCode: processedGlobalsCode,
-    setProcessedGlobalsCode: setProcessedGlobalsCode,
-    readyForContent: readyForContent,
-    variants: variants
+    processedGlobalsCode,
+    setProcessedGlobalsCode,
+    readyForContent,
+    variants
   });
 
   // For props.code (controlled), always re-merge when it changes (don't cache in state)
-  var propsCodeWithGlobals = usePropsCodeGlobalsMerging({
+  const propsCodeWithGlobals = usePropsCodeGlobalsMerging({
     code: props.code,
     globalsCode: props.globalsCode,
-    processedGlobalsCode: processedGlobalsCode,
-    variants: variants
+    processedGlobalsCode,
+    variants
   });
 
   // Use props.code result if available, otherwise use state code result
-  var codeWithGlobals = propsCodeWithGlobals || stateCodeWithGlobals;
-  var _useCodeParsing = useCodeParsing({
-      code: codeWithGlobals,
-      readyForContent: readyForContent || Boolean(props.code),
-      highlightAfter: highlightAfter,
-      isHydrated: isHydrated,
-      forceClient: props.forceClient,
-      url: props.url
-    }),
-    parsedCode = _useCodeParsing.parsedCode,
-    deferHighlight = _useCodeParsing.deferHighlight;
-  var _useCodeTransforms = useCodeTransforms({
-      parsedCode: parsedCode,
-      variantName: variantName
-    }),
-    transformedCode = _useCodeTransforms.transformedCode,
-    availableTransforms = _useCodeTransforms.availableTransforms;
-  var _useControlledCodePar = useControlledCodeParsing({
-      code: controlled == null ? void 0 : controlled.code,
-      forceClient: props.forceClient,
-      url: props.url
-    }),
-    parsedControlledCode = _useControlledCodePar.parsedControlledCode;
+  const codeWithGlobals = propsCodeWithGlobals || stateCodeWithGlobals;
+  const {
+    parsedCode,
+    deferHighlight
+  } = useCodeParsing({
+    code: codeWithGlobals,
+    readyForContent: readyForContent || Boolean(props.code),
+    highlightAfter,
+    isHydrated,
+    forceClient: props.forceClient,
+    url: props.url
+  });
+  const {
+    transformedCode,
+    availableTransforms
+  } = useCodeTransforms({
+    parsedCode,
+    variantName
+  });
+  const {
+    parsedControlledCode
+  } = useControlledCodeParsing({
+    code: controlled?.code,
+    forceClient: props.forceClient,
+    url: props.url
+  });
 
   // Determine the final overlaid code (controlled takes precedence)
-  var overlaidCode = parsedControlledCode || transformedCode || codeWithGlobals;
+  const overlaidCode = parsedControlledCode || transformedCode || codeWithGlobals;
 
   // For fallback context, use the processed code or fall back to non-controlled code
-  var codeForFallback = overlaidCode || (controlled != null && controlled.code ? undefined : props.code || code);
-  var fallbackContext = React.useMemo(function () {
-    return codeToFallbackProps(variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants);
-  }, [variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants]);
-  var context = React.useMemo(function () {
-    return {
-      code: overlaidCode,
-      // Use processed/transformed code
-      setCode: controlled == null ? void 0 : controlled.setCode,
-      selection: (controlled == null ? void 0 : controlled.selection) || selection,
-      setSelection: (controlled == null ? void 0 : controlled.setSelection) || setSelection,
-      components: (controlled == null ? void 0 : controlled.components) || props.components,
-      availableTransforms: isControlled ? [] : availableTransforms,
-      url: props.url,
-      deferHighlight: deferHighlight
-    };
-  }, [overlaidCode, controlled == null ? void 0 : controlled.setCode, selection, controlled == null ? void 0 : controlled.selection, controlled == null ? void 0 : controlled.setSelection, controlled == null ? void 0 : controlled.components, props.components, isControlled, availableTransforms, props.url, deferHighlight]);
+  const codeForFallback = overlaidCode || (controlled?.code ? undefined : props.code || code);
+  const fallbackContext = React.useMemo(() => codeToFallbackProps(variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants), [variantName, codeForFallback, fileName, props.fallbackUsesExtraFiles, props.fallbackUsesAllVariants]);
+  const context = React.useMemo(() => ({
+    code: overlaidCode,
+    // Use processed/transformed code
+    setCode: controlled?.setCode,
+    selection: controlled?.selection || selection,
+    setSelection: controlled?.setSelection || setSelection,
+    components: controlled?.components || props.components,
+    availableTransforms: isControlled ? [] : availableTransforms,
+    url: props.url,
+    deferHighlight
+  }), [overlaidCode, controlled?.setCode, selection, controlled?.selection, controlled?.setSelection, controlled?.components, props.components, isControlled, availableTransforms, props.url, deferHighlight]);
   if (!props.variants && !props.components && !activeCode) {
     throw new Errors.ErrorCodeHighlighterClientMissingData();
   }
-  var fallback = props.fallback;
+  const fallback = props.fallback;
   if (fallback && !props.skipFallback && !activeCodeReady) {
     return /*#__PURE__*/_jsx(CodeHighlighterFallbackContext.Provider, {
       value: fallbackContext,