@readme/markdown 15.3.0 → 15.5.0

package/dist/render-fixture.node.js

@@ -19045,7 +19045,7 @@ module.exports = function () {
 
 /***/ },
 
-/***/ 345
+/***/ 8691
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -86684,18 +86684,77 @@ const gemojiTransformer = () => (tree) => {
 };
 /* harmony default export */ const gemoji_ = (gemojiTransformer);
 
+;// ./hooks/useRestartAnimatedImages/index.tsx
+
+/**
+ * GIF is the one extension that implies animation. `.webp` and `.png` (the extension an APNG
+ * ships under) are overwhelmingly static, so matching them would reload far more images than
+ * it rewinds; telling those apart needs the bytes, not the URL.
+ */
+const ANIMATED_IMAGE_SRC = /\.gif(\?|#|$)/i;
+const restartAnimatedImages = (root) => {
+    root?.querySelectorAll('img').forEach(img => {
+        if (!ANIMATED_IMAGE_SRC.test(img.src))
+            return;
+        const { src } = img;
+        // There's no seek API for animated images; reassigning `src` is the only reset
+        img.src = '';
+        img.src = src;
+    });
+};
+const useRestartAfterFirstPaint = (revealKey, restart) => {
+    const isFirstRender = (0,external_react_.useRef)(true);
+    const latestRestart = (0,external_react_.useRef)(restart);
+    latestRestart.current = restart;
+    (0,external_react_.useEffect)(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        latestRestart.current();
+    }, [revealKey]);
+};
+/**
+ * Restarts GIF playback inside the panel that just became active.
+ *
+ * Tabs keep every panel mounted, so an <img> is never re-created and a GIF is
+ * shown mid-loop (or frozen on its last frame) when its tab is re-selected.
+ *
+ * @returns a ref to attach to each panel element, indexed by tab.
+ */
+function useRestartAnimatedImages(activeIndex) {
+    const panelRefs = (0,external_react_.useRef)([]);
+    useRestartAfterFirstPaint(activeIndex, () => restartAnimatedImages(panelRefs.current[activeIndex]));
+    return panelRefs;
+}
+/**
+ * Restarts GIF playback inside an element that has just been revealed after being hidden —
+ * a collapsed <details>, whose images have been animating out of sight since page load.
+ */
+function useRestartAnimatedImagesOnReveal(isRevealed) {
+    const contentRef = (0,external_react_.useRef)(null);
+    useRestartAfterFirstPaint(isRevealed, () => {
+        // Rewinding content the reader just hid would be wasted work
+        if (isRevealed)
+            restartAnimatedImages(contentRef.current);
+    });
+    return contentRef;
+}
+
 ;// ./components/Accordion/index.tsx
 
 
 
+
 const Accordion = ({ children, icon, iconColor, title }) => {
     const [isOpen, setIsOpen] = (0,external_react_.useState)(false);
+    const contentRef = useRestartAnimatedImagesOnReveal(isOpen);
     return (external_react_default().createElement("details", { className: "Accordion", onToggle: () => setIsOpen(!isOpen) },
         external_react_default().createElement("summary", { className: "Accordion-title" },
             external_react_default().createElement("i", { className: `Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-regular fa-chevron-right` }),
             icon && external_react_default().createElement(components_Icon, { className: "Accordion-icon", icon: icon, iconColor: iconColor }),
             title),
-        external_react_default().createElement("div", { className: "Accordion-content" }, children)));
+        external_react_default().createElement("div", { ref: contentRef, className: "Accordion-content" }, children)));
 };
 /* harmony default export */ const components_Accordion = (Accordion);
 
@@ -92513,11 +92572,13 @@ function TableOfContents({ children }) {
 
 
 
+
 const Tab = ({ children }) => {
     return external_react_default().createElement("div", { className: "TabContent" }, children);
 };
 const Tabs = ({ children }) => {
     const [activeTab, setActiveTab] = (0,external_react_.useState)(0);
+    const panelRefs = useRestartAnimatedImages(activeTab);
     // React passes `children` as a single element when there's only one child, so normalize.
     const tabs = external_react_default().Children.toArray(children);
     return (external_react_default().createElement("div", { className: "TabGroup" },
@@ -92525,7 +92586,9 @@ const Tabs = ({ children }) => {
             external_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_react_default().createElement("button", { key: tab.key, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
                 tab.props.icon && (external_react_default().createElement(components_Icon, { className: "TabGroup-icon", icon: tab.props.icon, iconColor: tab.props.iconColor })),
                 tab.props.title))))),
-        external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, hidden: index !== activeTab }, tab))))));
+        external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, ref: el => {
+                panelRefs.current[index] = el;
+            }, hidden: index !== activeTab }, tab))))));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
 
@@ -92693,7 +92756,7 @@ async function loadStylesheet(id, base) {
 async function loadModule() {
     throw new Error('The browser build does not support plugins or config files.');
 }
-async function createCompiler({ darkModeDataAttribute }) {
+async function createCompiler({ darkModeDataAttribute, darkModeRootSelector, }) {
     let css = `
 @layer theme, base, components, utilities;
 
@@ -92701,9 +92764,12 @@ async function createCompiler({ darkModeDataAttribute }) {
 @import "tailwindcss/utilities.css" layer(utilities);
 `;
     if (darkModeDataAttribute) {
+        // Anchors `dark:` to `darkModeRootSelector`'s own attribute instead of any ancestor's,
+        // when supplied — see the `darkModeRootSelector` param doc below for why there's no default.
+        const root = darkModeRootSelector || '';
         css += `
 
-@custom-variant dark (&:where([${darkModeDataAttribute}=dark], [${darkModeDataAttribute}=dark] *));`;
+@custom-variant dark (&:where(${root}[${darkModeDataAttribute}=dark], ${root}[${darkModeDataAttribute}=dark] *));`;
     }
     return Hu(css, {
         base: '/',
@@ -92711,8 +92777,8 @@ async function createCompiler({ darkModeDataAttribute }) {
         loadModule,
     });
 }
-async function tailwindCompiler(classes, { prefix, darkModeDataAttribute }) {
-    const compiler = await createCompiler({ darkModeDataAttribute });
+async function tailwindCompiler(classes, { prefix, darkModeDataAttribute, darkModeRootSelector, }) {
+    const compiler = await createCompiler({ darkModeDataAttribute, darkModeRootSelector });
     const css = compiler.build(Array.from(classes));
     return lib_postcss([postcss_prefix_selector_default()({ prefix })]).process(css, { from: undefined });
 }
@@ -92727,7 +92793,7 @@ const traverse = (node, callback) => {
         traverse(child, callback);
     });
 };
-const TailwindStyle = ({ children, darkModeDataAttribute }) => {
+const TailwindStyle = ({ children, darkModeDataAttribute, darkModeRootSelector }) => {
     const [stylesheet, setStylesheet] = (0,external_react_.useState)('');
     const classesSet = (0,external_react_.useRef)(new Set());
     const ref = (0,external_react_.useRef)(null);
@@ -92751,6 +92817,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             const sheet = await tailwindCompiler(classes, {
                 prefix: `.${tailwindPrefix}`,
                 darkModeDataAttribute,
+                darkModeRootSelector,
             });
             /* @note: don't insert an empty stylesheet */
             if (sheet.css.match(/^@layer utilities;/m))
@@ -92758,7 +92825,7 @@ const TailwindStyle = ({ children, darkModeDataAttribute }) => {
             setStylesheet(sheet.css);
         };
         run();
-    }, [classes, darkModeDataAttribute]);
+    }, [classes, darkModeDataAttribute, darkModeRootSelector]);
     /*
      * @note: execute once on load
      */
@@ -96515,6 +96582,10 @@ function syntax_createTokenize(mode) {
                 effects.consume(code);
                 return inBraceExpr;
             }
+            // A raw `<` can't sit in an opening tag (quotes/braces are handled above);
+            // bailing bounds each attempt to the next `<` instead of rescanning the line.
+            if (code === codes.lessThan)
+                return nok(code);
             effects.consume(code);
             return afterOpenTagName;
         }
@@ -121549,7 +121620,7 @@ const listMarkerRegex = /^(?:[*+-]|\d+[.)])(?:([\r\n]| {1,3})|$)/;
  * with their checkbox intact (for example, `- [ ]`) instead of dropping it
  * We can add more adjustments if needed
  */
-const compile_list_item_listItem = (node, parent, state, info) => {
+const compile_list_item_listItem = ((node, parent, state, info) => {
     const head = node.children[0];
     const isCheckbox = typeof node.checked === 'boolean' && head && head.type === 'paragraph';
     if (!isCheckbox) {
@@ -121573,15 +121644,47 @@ const compile_list_item_listItem = (node, parent, state, info) => {
         return `${marker}${actualSeparator}${checkbox}`;
     });
     return value;
-};
+});
 /* harmony default export */ const list_item = (compile_list_item_listItem);
 
 ;// ./processor/compile/plain.ts
 const plain_plain = (node) => node.value;
 /* harmony default export */ const compile_plain = (plain_plain);
 
+;// ./processor/compile/table-cell-block-markers.ts
+const CELL_START_BLOCK_MARKER = /^(?:[-+](?=\s|$)|#{1,6}(?=\s|$)|>)/;
+const BR_HTML = /^\s*<br\s*\/?>\s*$/i;
+const isLineBreak = (node) => {
+    if (node.type === 'break')
+        return true;
+    if (node.type === 'html')
+        return BR_HTML.test(node.value);
+    return node.type === 'mdxJsxTextElement' && 'name' in node && node.name?.toLowerCase() === 'br';
+};
+const followsLineBreak = (node, parent) => {
+    const siblings = (parent?.children ?? []);
+    const previous = siblings[siblings.indexOf(node) - 1];
+    return !!previous && isLineBreak(previous);
+};
+/**
+ * Re-escapes a leading block marker (`-`, `+`, `#`, `>`) at the start of a table cell, or
+ * after a `<br />` within one.
+ *
+ * A cell is serialized mid-line, so the `atBreak` patterns that escape these characters
+ * never fire and an author's `| \- one |` round trips to `| - one |` (RM-17203). Cells are
+ * serialized as `containerPhrasing(cell, { before: '|' })`, so `|` marks the cell start.
+ */
+const escapeCellStartBlockMarker = (serialized, node, parent, state, info) => {
+    if (serialized.startsWith('\\') || !CELL_START_BLOCK_MARKER.test(serialized))
+        return serialized;
+    if (!state.stack.includes('tableCell') || !(info.before === '|' || followsLineBreak(node, parent)))
+        return serialized;
+    return `\\${serialized}`;
+};
+
 ;// ./processor/compile/text.ts
 
+
 // A `_` flanked by word characters can never open or close emphasis under
 // CommonMark's flanking rules, so the escape mdast-util-to-markdown adds to
 // intraword underscores is unnecessary and only produces noisy `\_` diffs.
@@ -121589,9 +121692,10 @@ const plain_plain = (node) => node.value;
 const INTRAWORD_UNDERSCORE_ESCAPE = /(?<=[\p{L}\p{N}_])\\_(?=[\p{L}\p{N}_]|\\_)/gu;
 const compile_text_text = (node, parent, state, info) => {
     const serialized = handle.text(node, parent, state, info);
-    return serialized.replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
+    return escapeCellStartBlockMarker(serialized, node, parent, state, info);
 };
-/* harmony default export */ const compile_text = (compile_text_text);
+const mdxishText = (node, parent, state, info) => compile_text_text(node, parent, state, info).replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
+/* harmony default export */ const compile_text = (mdxishText);
 
 ;// ./processor/compile/index.ts
 
@@ -121623,6 +121727,7 @@ function compilers(mdxish = false) {
         html: compile_compatibility,
         i: compile_compatibility,
         plain: compile_plain,
+        text: compile_text_text,
         yaml: compile_compatibility,
         // needed only for mdxish
         ...(mdxish && { list: compile_list }),
@@ -122280,13 +122385,14 @@ function restoreCodeBlocks(content, protectedCode) {
  *
  * The attribute portion skips over quoted strings (`"..."` and `'...'`) so that
  * a `/>` inside an attribute value (e.g. `title="use /> here"`) does not cause
- * a premature match.
+ * a premature match, and stops at an unquoted `<` so a stray `<x` in prose
+ * doesn't scan to the end of the document (quadratic).
  *
  * Only matches lowercase tag names to avoid interfering with PascalCase
  * JSX custom components (e.g. `<MyComponent />`), which are handled
  * separately by components/mdx-blocks.
  */
-const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[^>"']*(?:"[^"]*"|'[^']*'))*[^>"']*)?)?\s*\/>/g;
+const SELF_CLOSING_TAG_RE = /<([a-z][a-z0-9-]*)((?:\s+(?:[^<>"']*(?:"[^"]*"|'[^']*'))*[^<>"']*)?)?\s*\/>/g;
 /**
  * String-level preprocessor that converts self-closing non-void HTML tags
  * into explicitly closed tags.
@@ -122951,8 +123057,9 @@ function terminateHtmlFlowBlocks(content) {
 
 
 
-// Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
-const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
+// Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. One name
+// char suffices for existence — `[\w-]+` backtracked quadratically over huge attributes.
+const NESTED_ATTR_EXPRESSION_RE = /[\w-]\s*=\s*\{/;
 // Name shape mirrors `componentTagPattern`; the lookbehind skips the inner tag
 // of a legacy `<<VARIABLE>>`.
 const NESTED_COMPONENT_TAG_RE = /(?<!<)<([A-Z][A-Za-z0-9_]*)[\s/>]/g;
@@ -123251,150 +123358,6 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
 };
 /* harmony default export */ const mdx_blocks = (mdxishMdxComponentBlocks);
 
-;// ./processor/transform/mdxish/components/self-closing-blocks.ts
-
-
-/**
- * Tags to process as self-closing blocks.
- * These components use simple string attributes (no JSX expressions like `data={[...]}`).
- * Components with JSX expression attributes should NOT be added here as parseAttributes
- * cannot handle them correctly.
- */
-const SELF_CLOSING_BLOCK_TAGS = new Set(['Embed', 'Recipe']);
-// Regex to match self-closing PascalCase tags (handles multi-line)
-const selfClosingTagPattern = /^<([A-Z][A-Za-z0-9_]*)([\s\S]*?)\/>$/;
-/**
- * Try to convert a paragraph node containing a self-closing JSX component into an mdxJsxFlowElement.
- * Returns the new node if conversion succeeded, or null if the node doesn't match.
- */
-const tryConvertToMdxNode = (node) => {
-    if (node.children.length !== 1)
-        return null;
-    const child = node.children[0];
-    if (child.type !== 'html')
-        return null;
-    const value = child.value?.trim();
-    if (!value)
-        return null;
-    const match = value.match(selfClosingTagPattern);
-    if (!match)
-        return null;
-    const [, tag, attrString] = match;
-    if (!SELF_CLOSING_BLOCK_TAGS.has(tag))
-        return null;
-    return {
-        type: 'mdxJsxFlowElement',
-        name: tag,
-        attributes: parseAttributes(attrString),
-        children: [],
-        position: node.position,
-    };
-};
-/**
- * Transform paragraph-wrapped self-closing JSX components into mdxJsxFlowElement nodes.
- *
- * CommonMark wraps multi-line JSX in paragraphs when the opening tag isn't complete
- * on one line. This plugin detects these structures and unwraps them for components
- * in the SELF_CLOSING_BLOCK_TAGS allowlist.
- *
- * Input structure:
- * ```
- * paragraph > html: "<Embed\n  typeOfEmbed=\"youtube\"\n/>"
- * ```
- *
- * Output structure:
- * ```
- * mdxJsxFlowElement: { name: "Embed", attributes: [...], children: [] }
- * ```
- */
-const mdxishSelfClosingBlocks = () => tree => {
-    visit(tree, 'paragraph', (node, index, parent) => {
-        if (index === undefined || !parent)
-            return;
-        const mdxNode = tryConvertToMdxNode(node);
-        if (mdxNode) {
-            parent.children.splice(index, 1, mdxNode);
-        }
-    });
-};
-/* harmony default export */ const self_closing_blocks = (mdxishSelfClosingBlocks);
-
-;// ./processor/transform/mdxish/components/snake-case-components.ts
-
-
-/**
- * Replaces snake_case component names with valid HTML placeholders.
- * Required because remark-parse rejects tags with underscores.
- * Example: `<Snake_case />` → `<MDXishSnakeCase0 />`
- *
- * Code blocks and inline code are protected and will not be transformed.
- *
- * @param content - The markdown content to process
- * @param options - Options including knownComponents to filter by
- */
-function processSnakeCaseComponent(content, options = {}) {
-    const { knownComponents } = options;
-    // Early exit if no potential snake_case components
-    if (!/[A-Z][A-Za-z0-9]*_[A-Za-z0-9_]*/.test(content)) {
-        return { content, mapping: {} };
-    }
-    // Step 1: Extract code blocks to protect them from transformation
-    const { protectedCode, protectedContent } = protectCodeBlocks(content);
-    // Find the highest existing placeholder number to avoid collisions
-    // e.g., if content has <MDXishSnakeCase0 />, start counter from 1
-    const placeholderPattern = /MDXishSnakeCase(\d+)/g;
-    let startCounter = 0;
-    let placeholderMatch;
-    while ((placeholderMatch = placeholderPattern.exec(content)) !== null) {
-        const num = parseInt(placeholderMatch[1], 10);
-        if (num >= startCounter) {
-            startCounter = num + 1;
-        }
-    }
-    const mapping = {};
-    const reverseMap = new Map();
-    let counter = startCounter;
-    // Step 2: Transform snake_case components in non-code content
-    const processedContent = protectedContent.replace(componentTagPattern, (match, tagName, attrs, selfClosing) => {
-        if (!tagName.includes('_')) {
-            return match;
-        }
-        const isClosing = tagName.startsWith('/');
-        const cleanTagName = isClosing ? tagName.slice(1) : tagName;
-        // Only transform if it's a known component (or if no filter is provided)
-        if (knownComponents && !knownComponents.has(cleanTagName)) {
-            return match;
-        }
-        let placeholder = reverseMap.get(cleanTagName);
-        if (!placeholder) {
-            // eslint-disable-next-line no-plusplus
-            placeholder = `MDXishSnakeCase${counter++}`;
-            mapping[placeholder] = cleanTagName;
-            reverseMap.set(cleanTagName, placeholder);
-        }
-        const processedTagName = isClosing ? `/${placeholder}` : placeholder;
-        return `<${processedTagName}${attrs}${selfClosing}>`;
-    });
-    // Step 3: Restore code blocks (untouched)
-    const finalContent = restoreCodeBlocks(processedContent, protectedCode);
-    return {
-        content: finalContent,
-        mapping,
-    };
-}
-/**
- * Restores placeholder name to original snake_case name.
- * Uses case-insensitive matching since HTML parsers normalize to lowercase.
- */
-function restoreSnakeCase(placeholderName, mapping) {
-    if (mapping[placeholderName]) {
-        return mapping[placeholderName];
-    }
-    const lowerName = placeholderName.toLowerCase();
-    const matchingKey = Object.keys(mapping).find(key => key.toLowerCase() === lowerName);
-    return matchingKey ? mapping[matchingKey] : placeholderName;
-}
-
 ;// ./processor/transform/mdxish/resolve-esm-imports.ts
 
 // We provide React as a default module so that components can use hooks
@@ -123579,6 +123542,54 @@ const containsJsxNode = (value) => {
         return true;
     return Object.values(value).some(containsJsxNode);
 };
+/** Read the component name off a JSX element name node (`Foo`, `Foo.Bar`, `foo:Bar`). */
+const jsxElementName = (name) => {
+    if (name === null || typeof name !== 'object')
+        return undefined;
+    const node = name;
+    if (node.type === 'JSXIdentifier')
+        return typeof node.name === 'string' ? node.name : undefined;
+    // `<Foo.Bar/>` and `<foo:Bar/>` resolve through their leftmost part.
+    if (node.type === 'JSXMemberExpression')
+        return jsxElementName(node.object);
+    if (node.type === 'JSXNamespacedName')
+        return jsxElementName(node.namespace);
+    return undefined;
+};
+/**
+ * Collect the capitalized names an expression uses as JSX tags. Parsed rather than pattern
+ * matched: `{count < Max ? <Foo/> : <Bar/>}` puts a capitalized name straight after a `<` without
+ * it being a tag, and only the parser can tell the two apart. Unparseable input yields nothing —
+ * evaluation is about to throw on it anyway.
+ */
+const jsxComponentNames = (expression) => {
+    let program;
+    try {
+        program = parseExpression(expression);
+    }
+    catch {
+        return [];
+    }
+    const names = new Set();
+    const walk = (value) => {
+        if (Array.isArray(value)) {
+            value.forEach(walk);
+            return;
+        }
+        if (value === null || typeof value !== 'object')
+            return;
+        const node = value;
+        if (node.type === 'JSXOpeningElement') {
+            const name = jsxElementName(node.name);
+            // Lowercase tags compile to a string type, never a variable reference.
+            if (name && /^[A-Z]/.test(name))
+                names.add(name);
+        }
+        Object.values(node).forEach(walk);
+    };
+    walk(program);
+    return Array.from(names);
+};
 /** Convert a program's JSX into `React.createElement` calls and evaluate it. `scope` must provide `React`. */
 const evalJsxProgram = (program, scope) => {
     buildJsx(program, { runtime: 'classic', pragma: 'React.createElement', pragmaFrag: 'React.Fragment' });
@@ -123765,6 +123776,28 @@ function reactElementToHast(node) {
 
 
 
+
+
+
+
+/**
+ * Bind the components a given expression actually uses as tags. Scoped per expression on purpose:
+ * binding the whole hash would shadow same-named globals (a `math` component would break
+ * `{Math.max(1, 2)}`) and pad `evaluate`'s `new Function` parameter list. Resolution defers to
+ * `getComponentName` so an expression and a plain tag always reach the same component.
+ */
+const componentScope = (expression, components) => {
+    const scope = {};
+    jsxComponentNames(expression).forEach(name => {
+        // `getComponentName` normalizes the tag, never the key, so it can't match `<MyBlock/>` to a
+        // `my_block` entry; compare the key's PascalCase form for that direction.
+        const tagName = getComponentName(name, components) ?? Object.keys(components).find(k => toPascalCase(k) === name);
+        if (!tagName)
+            return;
+        scope[name] = (props) => external_react_default().createElement(tagName, props);
+    });
+    return scope;
+};
 /**
  * We divide the result of an expression into two categories:
  * 1. Renderable values: HTML, JSX, e.g. .map() returning JSX
@@ -123775,6 +123808,17 @@ const isRenderable = (value) => {
         return true;
     return Array.isArray(value) && value.some(isRenderable);
 };
+/**
+ * Whether an expression evaluated to block-level content. Components count as block-level
+ * unless they're on the inline list, matching the assumption the rest of the component
+ * pipeline makes.
+ */
+const isBlockResult = (children) => children.some(child => {
+    if (child.type !== 'element' && child.type !== 'mdx-jsx')
+        return false;
+    const { tagName } = child;
+    return !STANDARD_HTML_TAGS.has(tagName.toLowerCase()) && !INLINE_COMPONENT_TAGS.has(tagName);
+});
 /** Turn a non-renderable evaluation result into a text node. */
 const createTextNode = (result, position) => {
     if (result === null || result === undefined)
@@ -123786,13 +123830,22 @@ const createTextNode = (result, position) => {
 /**
  * AST transformer to evaluate MDX expressions.
  * Replaces mdxFlowExpression and mdxTextExpression nodes with their evaluated values.
- * Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that
- * reference identifiers can resolve if those identifiers were introduced by an
- * earlier `export const/function` (collected onto `file.data.mdxishScope`).
- * Anything else falls through to the error branch and is kept as literal `{...}` text.
- */
-const evaluateExpressions = () => (tree, file) => {
-    const scope = { ...(file.data.mdxishScope), React: (external_react_default()) };
+ * Self-contained expressions resolve directly (e.g. `{1+1}`); expressions that reference
+ * identifiers can resolve if those identifiers are a custom component, the `user` variables
+ * object, or were introduced by an earlier `export const/function` (collected onto
+ * `file.data.mdxishScope`). Anything else falls through to the error branch and is kept as
+ * literal `{...}` text.
+ */
+const evaluateExpressions = ({ components, variables } = {}) => (tree, file) => {
+    const baseScope = {
+        // `User` matches the fallback the MDX path binds in `run.tsx`. Only when variables were
+        // supplied: the proxy never throws, so an unconditional bind would resolve `user.*` on
+        // surfaces that render without them instead of leaving literal text.
+        ...(variables ? { user: user(variables) } : {}),
+        // In-document exports win, matching `renderMdxish`.
+        ...file.data.mdxishScope,
+        React: (external_react_default()),
+    };
     visit(tree, ['mdxFlowExpression', 'mdxTextExpression'], (node, index, parent) => {
         if (!parent || index === null || index === undefined)
             return;
@@ -123802,6 +123855,7 @@ const evaluateExpressions = () => (tree, file) => {
         if (!expression)
             return;
         try {
+            const scope = { ...componentScope(expression, components ?? {}), ...baseScope };
             const result = evalExpression(expression, scope);
             if (isRenderable(result)) {
                 // Stash hast built straight from the React tree; `mdxExpressionHandler` emits it and it 
@@ -123822,6 +123876,22 @@ const evaluateExpressions = () => (tree, file) => {
             parent.children.splice(index, 1, { type: 'text', value: `{${processed}}`, position });
         }
     });
+    // A text expression is parsed inside a paragraph, but its result can be block content: a
+    // `<Tabs>` renders a `<div>`, and a browser closes the `<p>` before it, so the DOM it builds
+    // no longer matches what was rendered and hydration fails. Lift the expression out when
+    // that's all the paragraph holds.
+    visit(tree, 'paragraph', (node, index, parent) => {
+        if (!parent || index === null || index === undefined)
+            return;
+        const meaningful = node.children.filter(child => !(child.type === 'text' && !child.value.trim()));
+        const [only] = meaningful;
+        if (meaningful.length !== 1 || only.type !== 'mdxTextExpression')
+            return;
+        const hChildren = only.data?.hChildren;
+        if (!hChildren || !isBlockResult(hChildren))
+            return;
+        parent.children.splice(index, 1, only);
+    });
     return tree;
 };
 /* harmony default export */ const evaluate_expressions = (evaluateExpressions);
@@ -127049,45 +127119,6 @@ const resolveDeferredAttributeExpressionProps = () => (tree, file) => {
 };
 /* harmony default export */ const resolve_deferred_attribute_expression_props = (resolveDeferredAttributeExpressionProps);
 
-;// ./processor/transform/mdxish/restore-snake-case-component-name.ts
-
-
-/**
- * Restores snake_case component names from placeholders after parsing.
- * Runs after mdxishComponentBlocks converts HTML nodes to mdxJsxFlowElement.
- */
-const restoreSnakeCaseComponentNames = (options) => {
-    const { mapping } = options;
-    return tree => {
-        if (!mapping || Object.keys(mapping).length === 0) {
-            return tree;
-        }
-        visit(tree, 'mdxJsxFlowElement', (node) => {
-            if (node.name) {
-                node.name = restoreSnakeCase(node.name, mapping);
-            }
-        });
-        // Pre-compile regex patterns for better performance
-        const regexPatterns = Object.entries(mapping).map(([placeholder, original]) => ({
-            regex: new RegExp(`(<\\/?)(${placeholder})(\\s|\\/?>)`, 'gi'),
-            original,
-        }));
-        visit(tree, 'html', (node) => {
-            if (node.value) {
-                let newValue = node.value;
-                regexPatterns.forEach(({ regex, original }) => {
-                    newValue = newValue.replace(regex, `$1${original}$3`);
-                });
-                if (newValue !== node.value) {
-                    node.value = newValue;
-                }
-            }
-        });
-        return tree;
-    };
-};
-/* harmony default export */ const restore_snake_case_component_name = (restoreSnakeCaseComponentNames);
-
 ;// ./processor/transform/mdxish/retain-boolean-attributes.ts
 
 // Private Use Area character (U+E000) which is extremely unlikely to appear in real content.
@@ -127610,9 +127641,6 @@ function loadComponents() {
 
 
 
-
-
-
 
 
 
@@ -127634,10 +127662,8 @@ const defaultTransformers = [
  * 5. Terminate HTML flow blocks so subsequent content isn't swallowed
  * 6. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
  * 7. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
- * 8. Replace snake_case component names with parser-safe placeholders
  */
-function preprocessContent(content, opts) {
-    const { knownComponents } = opts;
+function preprocessContent(content) {
     // Runs first so `jsxTable` sees a literal `</table>` (and the HTML-line
     // classification in `terminateHtmlFlowBlocks` is accurate)
     let result = normalizeClosingTagWhitespace(content);
@@ -127650,7 +127676,7 @@ function preprocessContent(content, opts) {
     result = terminateHtmlFlowBlocks(result);
     result = closeSelfClosingHtmlTags(result);
     result = normalizeCompactHeadings(result);
-    return processSnakeCaseComponent(result, { knownComponents });
+    return result;
 }
 function mdxishAstProcessor(mdContent, opts = {}) {
     const { components: userComponents = {}, hardBreaks: enableHardBreaks = true, newEditorTypes = false, safeMode = false, useTailwind, } = opts;
@@ -127658,9 +127684,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         ...loadComponents(),
         ...userComponents,
     };
-    // Build set of known component names for snake_case filtering
-    const knownComponents = new Set(Object.keys(components));
-    const { content: parserReadyContent, mapping: snakeCaseMapping } = preprocessContent(mdContent, { knownComponents });
+    const parserReadyContent = preprocessContent(mdContent);
     // Create string map for tailwind transformer
     const tempComponentsMap = Object.entries(components).reduce((acc, [key, value]) => {
         acc[key] = String(value);
@@ -127673,10 +127697,8 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         .use(remarkParse)
         .use(remarkFrontmatter)
         .use(normalize_malformed_md_syntax)
-        .use(self_closing_blocks)
         .use(mdx_blocks, { safeMode })
         .use(inline_html, { safeMode })
-        .use(restore_snake_case_component_name, { mapping: snakeCaseMapping })
         .use(mdxish_tables)
         .use(mdxish_html_blocks) // Convert every <HTMLBlock> shape → html-block
         // The next few transformers must appear after mdxishMdxComponentBlocks
@@ -127752,7 +127774,7 @@ function mdxish(mdContent, opts = {}) {
     processor
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
         .use(enableHardBreaks ? hard_breaks : undefined) // Must precede evaluateExpressions to avoid splitting the \n in an evaluated template literal into a <br> node
-        .use(safeMode ? undefined : evaluate_expressions) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
+        .use(safeMode ? undefined : evaluate_expressions, { components, variables }) // Evaluate self-contained MDX expressions (e.g. `{1+1}`)
         .use(safeMode ? undefined : evaluate_style_block_expressions) // Evaluate `<style>{`...`}</style>` template literals into plain CSS
         .use(variables_code, { variables }) // Resolve <<...>> and {user.*} inside code and inline code nodes
         .use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
@@ -128843,7 +128865,7 @@ module.exports = /*#__PURE__*/JSON.parse('{"*":["about","acceptCharset","accessK
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module used 'module' so it can't be inlined
-/******/ 	let __webpack_exports__ = __webpack_require__(345);
+/******/ 	let __webpack_exports__ = __webpack_require__(8691);
 /******/ 	module.exports = __webpack_exports__;
 /******/ 	
 /******/ })()