@readme/markdown 13.8.1 → 13.8.3

package/dist/main.js

@@ -12090,6 +12090,21 @@ function buildLinkMap(nav) {
 const VISIBLE_RATIO = 0.4;
 /** Tolerance for subpixel rounding when checking if scrolled to the bottom. */
 const SCROLL_BOTTOM_TOLERANCE = 1;
+/**
+ * Walk up the DOM to find the nearest scrollable ancestor.
+ * Falls back to `window` when the page itself scrolls.
+ */
+function getScrollParent(el) {
+    let parent = el.parentElement;
+    while (parent) {
+        const { overflow, overflowY } = getComputedStyle(parent);
+        if (/(auto|scroll)/.test(overflow + overflowY) && parent.scrollHeight > parent.clientHeight) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return window;
+}
 /**
  * Watches headings in the viewport and toggles `active` on the
  * corresponding TOC links so the reader always knows where they are.
@@ -12118,7 +12133,13 @@ function useScrollHighlight(navRef) {
         let activeId = null;
         let clickLocked = false;
         const visible = new Set();
-        const isAtBottom = () => window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+        const scrollParent = getScrollParent(headings[0]);
+        const isAtBottom = () => {
+            if (scrollParent instanceof Window) {
+                return window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+            }
+            return scrollParent.scrollTop + scrollParent.clientHeight >= scrollParent.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+        };
         const activate = (id) => {
             if (id === activeId)
                 return;
@@ -12158,38 +12179,54 @@ function useScrollHighlight(navRef) {
             });
             updateActive();
         }, { rootMargin: `0px 0px -${(1 - VISIBLE_RATIO) * 100}% 0px`, threshold: 0 });
-        // Also check on scroll so bottom-of-page detection works even when
+        // Check on scroll so bottom-of-page detection works even when
         // no headings are crossing the intersection boundary.
+        const scrollTarget = scrollParent instanceof Window ? window : scrollParent;
         const onScroll = () => { updateActive(); };
         // Click a ToC link → immediately activate it, suppress the observer
         // until the smooth scroll finishes, then hand control back.
         const onClick = (e) => {
-            const anchor = e.target.closest?.('a[href^="#"]');
-            if (!anchor)
+            if (!(e.target instanceof Element))
+                return;
+            const anchor = e.target.closest('a[href^="#"]');
+            if (!(anchor instanceof HTMLAnchorElement))
                 return;
-            const id = decodeURIComponent(anchor.getAttribute('href').slice(1));
+            const id = decodeURIComponent(anchor.hash.slice(1));
             if (!linkMap.has(id))
                 return;
-            e.preventDefault();
+            if (window.location.hash !== anchor.hash) {
+                window.location.hash = anchor.hash;
+            }
             activate(id);
             clickLocked = true;
-            const unlock = () => { clickLocked = false; };
-            window.addEventListener('scrollend', unlock, { once: true });
-            document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+            let unlockTimer = null;
+            const unlock = () => {
+                clickLocked = false;
+                scrollTarget.removeEventListener('scrollend', unlock);
+                window.removeEventListener('hashchange', unlock);
+                if (unlockTimer !== null) {
+                    window.clearTimeout(unlockTimer);
+                    unlockTimer = null;
+                }
+            };
+            scrollTarget.addEventListener('scrollend', unlock, { once: true });
+            window.addEventListener('hashchange', unlock, { once: true });
+            // Fallback in case scrollend and hashchange don't fire
+            unlockTimer = window.setTimeout(unlock, 500);
         };
         headings.forEach(el => { observer.observe(el); });
-        window.addEventListener('scroll', onScroll, { passive: true });
+        scrollTarget.addEventListener('scroll', onScroll, { passive: true });
         nav.addEventListener('click', onClick);
-        // Set initial active state for the first heading visible in the viewport
+        // Set initial active state for the first heading visible in the viewport,
+        // falling back to the first heading if none is in the observation zone yet.
         const initialHeading = headings.find(el => {
             const rect = el.getBoundingClientRect();
             return rect.top >= 0 && rect.top < window.innerHeight * VISIBLE_RATIO;
-        });
-        if (initialHeading)
-            activate(initialHeading.id);
+        }) || headings[0];
+        activate(initialHeading.id);
         return () => {
             observer.disconnect();
-            window.removeEventListener('scroll', onScroll);
+            scrollTarget.removeEventListener('scroll', onScroll);
             nav.removeEventListener('click', onClick);
         };
     }, [navRef, linkCount]);
@@ -96434,10 +96471,10 @@ const parseTableCell = (text) => {
             node.value = escapeInvalidTags(node.value);
         }
     });
-    if (tree.children.length > 1) {
-        return tree.children;
-    }
-    return tree.children.flatMap(n => n.type === 'paragraph' && 'children' in n ? n.children : [n]);
+    const result = tree.children.length > 1
+        ? tree.children
+        : tree.children.flatMap(n => n.type === 'paragraph' && 'children' in n ? n.children : [n]);
+    return result;
 };
 const parseBlock = (text) => {
     if (!text.trim())
@@ -96649,7 +96686,9 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 mapped[rowIndex][colIndex] = v;
                 return mapped;
             }, []);
-            const tokenizeCell = compatibilityMode ? textToBlock : parseTableCell;
+            const tokenizeCell = compatibilityMode
+                ? textToBlock
+                : parseTableCell;
             const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
                     children: sparseData[y]?.[x] ? tokenizeCell(preprocessBody(sparseData[y][x])) : [{ type: 'text', value: '' }],
@@ -98342,6 +98381,7 @@ function restoreSnakeCase(placeholderName, mapping) {
 ;// ./processor/transform/mdxish/mdxish-tables-to-jsx.ts
 
 
+
 const SELF_CLOSING_JSX_REGEX = /^\s*<[A-Z][^>]*\/>\s*$/;
 const mdxish_tables_to_jsx_alignToStyle = (align) => {
     if (!align || align === 'left')
@@ -98371,22 +98411,27 @@ const mdxishTablesToJsx = () => tree => {
         visit(table, mdxish_tables_to_jsx_isTableCell, (cell) => {
             if (hasFlowContent || cell.children.length === 0)
                 return;
-            const content = cell.children.length === 1 && cell.children[0].type === 'paragraph'
-                ? cell.children[0].children[0]
-                : cell.children[0];
-            if (!content)
-                return;
             visit(cell, 'break', (_, breakIndex, breakParent) => {
                 breakParent.children.splice(breakIndex, 1, { type: 'text', value: '\n' });
             });
-            if (!(phrasing(content) || content.type === 'plain') && content.type !== 'escape') {
-                // Plain HTML (e.g. <div>Hello</div>) is skipped here — it stays in GFM cells fine.
-                // But self-closing JSX components (e.g. <Image src="..." caption="..." />) serialize
-                // with newlines that break GFM cells, so they must trigger JSX <Table> serialization.
-                const isPlainHtml = content.type === 'html' && !SELF_CLOSING_JSX_REGEX.test(content.value);
-                if (!isPlainHtml) {
-                    hasFlowContent = true;
+            // Check if any child is "flow" content (block-level) that requires JSX <Table>
+            // serialization instead of GFM. `phrasing()` from mdast-util-phrasing returns
+            // true for inline node types (text, emphasis, strong, link, etc.) which are
+            // safe to keep in GFM cells.
+            const hasFlowChild = cell.children.some(child => {
+                if (child.type === 'paragraph' || child.type === 'plain' || child.type === 'escape')
+                    return false;
+                if (child.type === NodeTypes.variable)
+                    return false;
+                if (phrasing(child))
+                    return false;
+                if (child.type === 'html') {
+                    return SELF_CLOSING_JSX_REGEX.test(child.value);
                 }
+                return true;
+            });
+            if (hasFlowChild) {
+                hasFlowContent = true;
             }
             if (!hasFlowContent) {
                 visit(cell, mdxish_tables_to_jsx_isLiteral, (node) => {
@@ -98763,25 +98808,31 @@ function makeVariableNode(varName, rawValue) {
 }
 /**
  * A remark plugin that parses {user.<field>} patterns from text nodes and
- * mdxTextExpression nodes, creating Variable nodes for runtime resolution.
+ * mdx expression nodes, creating Variable nodes for runtime resolution.
  *
- * Handles both:
+ * Handles:
  * - `text` nodes: when safeMode is true or after expression evaluation
  * - `mdxTextExpression` nodes: when mdxExpression has parsed {user.*} before evaluation
+ * - `mdxFlowExpression` nodes: when {user.*} appears on its own line (e.g. inside JSX table cells)
  *
  * Supports any user field: name, email, email_verified, exp, iat, etc.
  */
+function visitExpressionNode(node, index, parent) {
+    if (index === undefined || !parent)
+        return;
+    const wrapped = `{${(node.value ?? '').trim()}}`;
+    const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
+    if (matches.length !== 1)
+        return;
+    const varName = matches[0][1] || matches[0][2];
+    parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
+}
 const variablesTextTransformer = () => tree => {
-    // Handle mdxTextExpression nodes (e.g. {user.name} parsed by mdxExpression)
     visit(tree, 'mdxTextExpression', (node, index, parent) => {
-        if (index === undefined || !parent)
-            return;
-        const wrapped = `{${(node.value ?? '').trim()}}`; // Wrap the expression value in {} to match the USER_VAR_REGEX pattern
-        const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
-        if (matches.length !== 1)
-            return;
-        const varName = matches[0][1] || matches[0][2];
-        parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
     });
     visit(tree, 'text', (node, index, parent) => {
         if (index === undefined || !parent)

package/dist/main.node.js

@@ -19670,14 +19670,14 @@ function getWindowScrollBarX(element) {
 }
 ;// ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js
 
-function getComputedStyle(element) {
+function getComputedStyle_getComputedStyle(element) {
   return getWindow(element).getComputedStyle(element);
 }
 ;// ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js
 
 function isScrollParent(element) {
   // Firefox wants us to check `-x` and `-y` variations as well
-  var _getComputedStyle = getComputedStyle(element),
+  var _getComputedStyle = getComputedStyle_getComputedStyle(element),
       overflow = _getComputedStyle.overflow,
       overflowX = _getComputedStyle.overflowX,
       overflowY = _getComputedStyle.overflowY;
@@ -19849,7 +19849,7 @@ function isTableElement(element) {
 
 function getTrueOffsetParent(element) {
   if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-  getComputedStyle(element).position === 'fixed') {
+  getComputedStyle_getComputedStyle(element).position === 'fixed') {
     return null;
   }
 
@@ -19864,7 +19864,7 @@ function getContainingBlock(element) {
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
-    var elementCss = getComputedStyle(element);
+    var elementCss = getComputedStyle_getComputedStyle(element);
 
     if (elementCss.position === 'fixed') {
       return null;
@@ -19878,7 +19878,7 @@ function getContainingBlock(element) {
   }
 
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
-    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    var css = getComputedStyle_getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
 
@@ -19898,11 +19898,11 @@ function getOffsetParent(element) {
   var window = getWindow(element);
   var offsetParent = getTrueOffsetParent(element);
 
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle_getComputedStyle(offsetParent).position === 'static') {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
 
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle_getComputedStyle(offsetParent).position === 'static')) {
     return window;
   }
 
@@ -20447,7 +20447,7 @@ function mapToStyles(_ref2) {
     if (offsetParent === getWindow(popper)) {
       offsetParent = getDocumentElement(popper);
 
-      if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
+      if (getComputedStyle_getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
         heightProp = 'scrollHeight';
         widthProp = 'scrollWidth';
       }
@@ -20759,7 +20759,7 @@ function getDocumentRect(element) {
   var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
   var y = -winScroll.scrollTop;
 
-  if (getComputedStyle(body || html).direction === 'rtl') {
+  if (getComputedStyle_getComputedStyle(body || html).direction === 'rtl') {
     x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
 
@@ -20841,7 +20841,7 @@ function getClientRectFromMixedType(element, clippingParent, strategy) {
 
 function getClippingParents(element) {
   var clippingParents = listScrollParents(getParentNode(element));
-  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle_getComputedStyle(element).position) >= 0;
   var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
 
   if (!isElement(clipperElement)) {
@@ -24686,6 +24686,21 @@ function buildLinkMap(nav) {
 const VISIBLE_RATIO = 0.4;
 /** Tolerance for subpixel rounding when checking if scrolled to the bottom. */
 const SCROLL_BOTTOM_TOLERANCE = 1;
+/**
+ * Walk up the DOM to find the nearest scrollable ancestor.
+ * Falls back to `window` when the page itself scrolls.
+ */
+function TableOfContents_getScrollParent(el) {
+    let parent = el.parentElement;
+    while (parent) {
+        const { overflow, overflowY } = getComputedStyle(parent);
+        if (/(auto|scroll)/.test(overflow + overflowY) && parent.scrollHeight > parent.clientHeight) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return window;
+}
 /**
  * Watches headings in the viewport and toggles `active` on the
  * corresponding TOC links so the reader always knows where they are.
@@ -24714,7 +24729,13 @@ function useScrollHighlight(navRef) {
         let activeId = null;
         let clickLocked = false;
         const visible = new Set();
-        const isAtBottom = () => window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+        const scrollParent = TableOfContents_getScrollParent(headings[0]);
+        const isAtBottom = () => {
+            if (scrollParent instanceof Window) {
+                return window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+            }
+            return scrollParent.scrollTop + scrollParent.clientHeight >= scrollParent.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
+        };
         const activate = (id) => {
             if (id === activeId)
                 return;
@@ -24754,38 +24775,54 @@ function useScrollHighlight(navRef) {
             });
             updateActive();
         }, { rootMargin: `0px 0px -${(1 - VISIBLE_RATIO) * 100}% 0px`, threshold: 0 });
-        // Also check on scroll so bottom-of-page detection works even when
+        // Check on scroll so bottom-of-page detection works even when
         // no headings are crossing the intersection boundary.
+        const scrollTarget = scrollParent instanceof Window ? window : scrollParent;
         const onScroll = () => { updateActive(); };
         // Click a ToC link → immediately activate it, suppress the observer
         // until the smooth scroll finishes, then hand control back.
         const onClick = (e) => {
-            const anchor = e.target.closest?.('a[href^="#"]');
-            if (!anchor)
+            if (!(e.target instanceof Element))
                 return;
-            const id = decodeURIComponent(anchor.getAttribute('href').slice(1));
+            const anchor = e.target.closest('a[href^="#"]');
+            if (!(anchor instanceof HTMLAnchorElement))
+                return;
+            const id = decodeURIComponent(anchor.hash.slice(1));
             if (!linkMap.has(id))
                 return;
-            e.preventDefault();
+            if (window.location.hash !== anchor.hash) {
+                window.location.hash = anchor.hash;
+            }
             activate(id);
             clickLocked = true;
-            const unlock = () => { clickLocked = false; };
-            window.addEventListener('scrollend', unlock, { once: true });
-            document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
+            let unlockTimer = null;
+            const unlock = () => {
+                clickLocked = false;
+                scrollTarget.removeEventListener('scrollend', unlock);
+                window.removeEventListener('hashchange', unlock);
+                if (unlockTimer !== null) {
+                    window.clearTimeout(unlockTimer);
+                    unlockTimer = null;
+                }
+            };
+            scrollTarget.addEventListener('scrollend', unlock, { once: true });
+            window.addEventListener('hashchange', unlock, { once: true });
+            // Fallback in case scrollend and hashchange don't fire
+            unlockTimer = window.setTimeout(unlock, 500);
         };
         headings.forEach(el => { observer.observe(el); });
-        window.addEventListener('scroll', onScroll, { passive: true });
+        scrollTarget.addEventListener('scroll', onScroll, { passive: true });
         nav.addEventListener('click', onClick);
-        // Set initial active state for the first heading visible in the viewport
+        // Set initial active state for the first heading visible in the viewport,
+        // falling back to the first heading if none is in the observation zone yet.
         const initialHeading = headings.find(el => {
             const rect = el.getBoundingClientRect();
             return rect.top >= 0 && rect.top < window.innerHeight * VISIBLE_RATIO;
-        });
-        if (initialHeading)
-            activate(initialHeading.id);
+        }) || headings[0];
+        activate(initialHeading.id);
         return () => {
             observer.disconnect();
-            window.removeEventListener('scroll', onScroll);
+            scrollTarget.removeEventListener('scroll', onScroll);
             nav.removeEventListener('click', onClick);
         };
     }, [navRef, linkCount]);
@@ -116628,10 +116665,10 @@ const parseTableCell = (text) => {
             node.value = escapeInvalidTags(node.value);
         }
     });
-    if (tree.children.length > 1) {
-        return tree.children;
-    }
-    return tree.children.flatMap(n => n.type === 'paragraph' && 'children' in n ? n.children : [n]);
+    const result = tree.children.length > 1
+        ? tree.children
+        : tree.children.flatMap(n => n.type === 'paragraph' && 'children' in n ? n.children : [n]);
+    return result;
 };
 const parseBlock = (text) => {
     if (!text.trim())
@@ -116843,7 +116880,9 @@ function transformMagicBlock(blockType, data, rawValue, options = {}) {
                 mapped[rowIndex][colIndex] = v;
                 return mapped;
             }, []);
-            const tokenizeCell = compatibilityMode ? textToBlock : parseTableCell;
+            const tokenizeCell = compatibilityMode
+                ? textToBlock
+                : parseTableCell;
             const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
                     children: sparseData[y]?.[x] ? tokenizeCell(preprocessBody(sparseData[y][x])) : [{ type: 'text', value: '' }],
@@ -118536,6 +118575,7 @@ function restoreSnakeCase(placeholderName, mapping) {
 ;// ./processor/transform/mdxish/mdxish-tables-to-jsx.ts
 
 
+
 const SELF_CLOSING_JSX_REGEX = /^\s*<[A-Z][^>]*\/>\s*$/;
 const mdxish_tables_to_jsx_alignToStyle = (align) => {
     if (!align || align === 'left')
@@ -118565,22 +118605,27 @@ const mdxishTablesToJsx = () => tree => {
         visit(table, mdxish_tables_to_jsx_isTableCell, (cell) => {
             if (hasFlowContent || cell.children.length === 0)
                 return;
-            const content = cell.children.length === 1 && cell.children[0].type === 'paragraph'
-                ? cell.children[0].children[0]
-                : cell.children[0];
-            if (!content)
-                return;
             visit(cell, 'break', (_, breakIndex, breakParent) => {
                 breakParent.children.splice(breakIndex, 1, { type: 'text', value: '\n' });
             });
-            if (!(phrasing(content) || content.type === 'plain') && content.type !== 'escape') {
-                // Plain HTML (e.g. <div>Hello</div>) is skipped here — it stays in GFM cells fine.
-                // But self-closing JSX components (e.g. <Image src="..." caption="..." />) serialize
-                // with newlines that break GFM cells, so they must trigger JSX <Table> serialization.
-                const isPlainHtml = content.type === 'html' && !SELF_CLOSING_JSX_REGEX.test(content.value);
-                if (!isPlainHtml) {
-                    hasFlowContent = true;
+            // Check if any child is "flow" content (block-level) that requires JSX <Table>
+            // serialization instead of GFM. `phrasing()` from mdast-util-phrasing returns
+            // true for inline node types (text, emphasis, strong, link, etc.) which are
+            // safe to keep in GFM cells.
+            const hasFlowChild = cell.children.some(child => {
+                if (child.type === 'paragraph' || child.type === 'plain' || child.type === 'escape')
+                    return false;
+                if (child.type === NodeTypes.variable)
+                    return false;
+                if (phrasing(child))
+                    return false;
+                if (child.type === 'html') {
+                    return SELF_CLOSING_JSX_REGEX.test(child.value);
                 }
+                return true;
+            });
+            if (hasFlowChild) {
+                hasFlowContent = true;
             }
             if (!hasFlowContent) {
                 visit(cell, mdxish_tables_to_jsx_isLiteral, (node) => {
@@ -118957,25 +119002,31 @@ function makeVariableNode(varName, rawValue) {
 }
 /**
  * A remark plugin that parses {user.<field>} patterns from text nodes and
- * mdxTextExpression nodes, creating Variable nodes for runtime resolution.
+ * mdx expression nodes, creating Variable nodes for runtime resolution.
  *
- * Handles both:
+ * Handles:
  * - `text` nodes: when safeMode is true or after expression evaluation
  * - `mdxTextExpression` nodes: when mdxExpression has parsed {user.*} before evaluation
+ * - `mdxFlowExpression` nodes: when {user.*} appears on its own line (e.g. inside JSX table cells)
  *
  * Supports any user field: name, email, email_verified, exp, iat, etc.
  */
+function visitExpressionNode(node, index, parent) {
+    if (index === undefined || !parent)
+        return;
+    const wrapped = `{${(node.value ?? '').trim()}}`;
+    const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
+    if (matches.length !== 1)
+        return;
+    const varName = matches[0][1] || matches[0][2];
+    parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
+}
 const variablesTextTransformer = () => tree => {
-    // Handle mdxTextExpression nodes (e.g. {user.name} parsed by mdxExpression)
     visit(tree, 'mdxTextExpression', (node, index, parent) => {
-        if (index === undefined || !parent)
-            return;
-        const wrapped = `{${(node.value ?? '').trim()}}`; // Wrap the expression value in {} to match the USER_VAR_REGEX pattern
-        const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
-        if (matches.length !== 1)
-            return;
-        const varName = matches[0][1] || matches[0][2];
-        parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
     });
     visit(tree, 'text', (node, index, parent) => {
         if (index === undefined || !parent)