@readme/markdown 15.5.1 → 15.6.0

package/dist/main.js

@@ -11423,7 +11423,7 @@ module.exports = function () {
 
 /***/ },
 
-/***/ 912
+/***/ 7070
 (module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -13106,6 +13106,8 @@ var parseOptions = function parseOptions() {
  * Pattern to match component tags (PascalCase or snake_case)
  */
 const componentTagPattern = /<(\/?[A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>/g;
+/** A bare component name, the same shape `componentTagPattern` accepts inside `<…>`. */
+const componentNamePattern = /^[A-Z][A-Za-z0-9_]*$/;
 /**
  * MDAST flow (block-level) content types that cannot be represented
  * inside GFM table cells. Used to decide whether a table should be
@@ -76740,6 +76742,14 @@ function syntax_createTokenize(mode) {
         }
         // ── Tag detection inside body ──────────────────────────────────────────
         function bodyLessThan(code) {
+            // A second `<` means legacy variable syntax (`<<var>>`), not a tag: the name that
+            // follows belongs to the variable. Counting it as a nested opener would leave the
+            // body unbalanced and lose the claim on this block.
+            if (code === codes.lessThan) {
+                effects.consume(code);
+                atLineStart = false;
+                return bodyAngleRun;
+            }
             if (code === codes.slash) {
                 if (onOpenerLine)
                     openerLineCloses += 1;
@@ -76764,6 +76774,14 @@ function syntax_createTokenize(mode) {
             atLineStart = false;
             return body(code);
         }
+        function bodyAngleRun(code) {
+            if (code === codes.lessThan) {
+                effects.consume(code);
+                return bodyAngleRun;
+            }
+            atLineStart = false;
+            return body(code);
+        }
         // ── Nested opening tag ─────────────────────────────────────────────────
         function nestedOpenTagName(code) {
             if (code !== null &&
@@ -76984,11 +77002,61 @@ function mdxComponent() {
 ;// ./lib/micromark/mdx-expression-lenient/syntax.ts
 
 
+
 /**
- * Lenient MDX text-expression tokenizer (agnostic / no acorn).
+ * The flow constructs allowed to end a multiline run, per parser. Everything but `<`: a
+ * `<Component>` on its own line is the very shape the flow construct exists to keep together.
+ */
+const interrupters = new WeakMap();
+const flowInterrupters = (flow) => {
+    let record = interrupters.get(flow);
+    if (!record) {
+        record = Object.fromEntries(Object.entries(flow).filter(([code]) => Number(code) !== codes.lessThan));
+        interrupters.set(flow, record);
+    }
+    return record;
+};
+/**
+ * Lookahead run at every line ending of a flow run, mirroring the paragraph continuation check
+ * in `micromark-core-commonmark/lib/content.js`: `ok` when the next line continues the run,
+ * `nok` when it would start a fenced code block, heading, or thematic break — which the run
+ * must then leave alone rather than swallow. A blank line (including whitespace-only) ends the
+ * run too, unless `blankContinues`: see `nestedLineContinues`.
+ */
+function tokenizeLineContinues(blankContinues) {
+    return function tokenize(effects, ok, nok) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        return start;
+        function start(code) {
+            effects.enter(types.lineEnding);
+            effects.consume(code);
+            effects.exit(types.lineEnding);
+            return factorySpace(effects, prefixed, types.linePrefix);
+        }
+        // The paragraph rule also exempts lines indented 4+ columns (indented code can't interrupt);
+        // mdxish disables indented code, so an indented line may still start a block here.
+        function prefixed(code) {
+            if (code === codes.eof)
+                return nok(code);
+            if (markdownLineEnding(code))
+                return blankContinues ? ok(code) : nok(code);
+            return effects.interrupt(flowInterrupters(self.parser.constructs.flow), nok, ok)(code);
+        }
+    };
+}
+const lineContinues = { tokenize: tokenizeLineContinues(false), partial: true };
+/**
+ * Inside an open `{`, `(` or `[` a blank line is JavaScript formatting (between statements in a
+ * callback, inside a JSX branch), so it may not end the run. At depth zero it's far more likely
+ * a prose paragraph break after a stray `{`, and ending the run there keeps the paragraphs apart.
+ */
+const nestedLineContinues = { tokenize: tokenizeLineContinues(true), partial: true };
+/**
+ * Lenient MDX expression tokenizer (agnostic / no acorn).
  *
  * Matches a balanced `{ ... }` run — tracking nested braces and spanning soft
- * line breaks — and emits the standard `mdxTextExpression*` tokens so the
+ * line breaks — and emits the standard `mdx*Expression*` tokens so the
  * upstream `mdxExpressionFromMarkdown()` builds the node.
  *
  * Reimplements the official micromark mdxExpression, but an unbalanced brace that
@@ -76996,70 +77064,115 @@ function mdxComponent() {
  * and the `{` renders as literal text, making the pipeline forgiving of stray
  * braces that upstream would hard-error on.
  */
-function tokenizeTextExpression(effects, ok, nok) {
-    let depth = 0;
-    return start;
-    function start(code) {
-        if (code !== codes.leftCurlyBrace)
-            return nok(code);
-        effects.enter('mdxTextExpression');
-        effects.enter('mdxTextExpressionMarker');
-        effects.consume(code);
-        effects.exit('mdxTextExpressionMarker');
-        return before;
-    }
-    function before(code) {
-        if (code === codes.eof) {
-            effects.exit('mdxTextExpression');
-            return nok(code);
+function tokenizeExpression(variant) {
+    const isFlow = variant === 'mdxFlowExpression';
+    return function tokenize(effects, ok, nok) {
+        // Read eagerly: micromark calls `tokenize` with a fresh context per attempt, so this is the
+        // value for this attempt, and the state functions below don't receive `this` at all.
+        const { interrupt } = this;
+        let depth = 0;
+        let nesting = 0;
+        let multiline = false;
+        return start;
+        function start(code) {
+            if (code !== codes.leftCurlyBrace)
+                return nok(code);
+            // Never end a paragraph. A `{` continuing the line above is prose or a magic-block body
+            // (`[block:callout]` puts one on the next line), not a block of its own.
+            if (isFlow && interrupt)
+                return nok(code);
+            effects.enter(variant);
+            effects.enter(`${variant}Marker`);
+            effects.consume(code);
+            effects.exit(`${variant}Marker`);
+            return before;
         }
-        if (markdownLineEnding(code)) {
-            effects.enter('lineEnding');
+        function before(code) {
+            if (code === codes.eof)
+                return end(code);
+            if (markdownLineEnding(code)) {
+                // A text run lives in a paragraph micromark has already bounded. A flow run bounds
+                // itself: a blank line or an interrupting block ends it, so a stray `{` can't claim
+                // the rest of the document, and `{\n\n}` stays two literal paragraphs.
+                if (!isFlow)
+                    return lineEnding(code);
+                return effects.check(depth > 0 || nesting > 0 ? nestedLineContinues : lineContinues, lineEnding, end)(code);
+            }
+            if (code === codes.rightCurlyBrace && depth === 0)
+                return close(code);
+            effects.enter(`${variant}Chunk`);
+            return inside(code);
+        }
+        function lineEnding(code) {
+            multiline = true;
+            effects.enter(types.lineEnding);
             effects.consume(code);
-            effects.exit('lineEnding');
+            effects.exit(types.lineEnding);
             return before;
         }
-        if (code === codes.rightCurlyBrace && depth === 0) {
-            return close(code);
+        function end(code) {
+            effects.exit(variant);
+            return nok(code);
         }
-        effects.enter('mdxTextExpressionChunk');
-        return inside(code);
-    }
-    function inside(code) {
-        if (code === codes.eof || markdownLineEnding(code)) {
-            effects.exit('mdxTextExpressionChunk');
-            return before(code);
+        function inside(code) {
+            if (code === codes.eof || markdownLineEnding(code)) {
+                effects.exit(`${variant}Chunk`);
+                return before(code);
+            }
+            if (code === codes.rightCurlyBrace && depth === 0) {
+                effects.exit(`${variant}Chunk`);
+                return close(code);
+            }
+            if (code === codes.leftCurlyBrace)
+                depth += 1;
+            else if (code === codes.rightCurlyBrace)
+                depth -= 1;
+            else if (code === codes.leftParenthesis || code === codes.leftSquareBracket)
+                nesting += 1;
+            else if (code === codes.rightParenthesis || code === codes.rightSquareBracket)
+                nesting -= 1;
+            effects.consume(code);
+            return inside;
         }
-        if (code === codes.rightCurlyBrace && depth === 0) {
-            effects.exit('mdxTextExpressionChunk');
-            return close(code);
+        function close(code) {
+            effects.enter(`${variant}Marker`);
+            effects.consume(code);
+            effects.exit(`${variant}Marker`);
+            effects.exit(variant);
+            if (!isFlow)
+                return ok;
+            // A run that closes on the line it opened stays a text expression inside its paragraph:
+            // claiming it as flow would strip the `<p>` every standalone `{expr}` line renders with.
+            return multiline ? after : nok;
         }
-        if (code === codes.leftCurlyBrace)
-            depth += 1;
-        else if (code === codes.rightCurlyBrace)
-            depth -= 1;
-        effects.consume(code);
-        return inside;
-    }
-    function close(code) {
-        effects.enter('mdxTextExpressionMarker');
-        effects.consume(code);
-        effects.exit('mdxTextExpressionMarker');
-        effects.exit('mdxTextExpression');
-        return ok;
-    }
+        function after(code) {
+            return markdownSpace(code) ? factorySpace(effects, lineEnd, types.whitespace)(code) : lineEnd(code);
+        }
+        function lineEnd(code) {
+            return code === codes.eof || markdownLineEnding(code) ? ok(code) : nok(code);
+        }
+    };
 }
 function mdxExpressionLenient() {
     return {
+        flow: {
+            [codes.leftCurlyBrace]: {
+                name: 'mdxFlowExpression',
+                tokenize: tokenizeExpression('mdxFlowExpression'),
+            },
+        },
         text: {
             [codes.leftCurlyBrace]: {
                 name: 'mdxTextExpression',
-                tokenize: tokenizeTextExpression,
+                tokenize: tokenizeExpression('mdxTextExpression'),
             },
         },
     };
 }
 
+;// ./lib/micromark/mdx-expression-lenient/index.ts
+
+
 ;// ./lib/micromark/mdxish-extensions.ts
 
 
@@ -104136,6 +104249,111 @@ const parseTag = (value, opts = {}) => {
     };
 };
 
+;// ./processor/transform/mdxish/variables-text.ts
+
+
+/**
+ * Matches {user.<field>} patterns:
+ * - {user.name}
+ * - {user.email}
+ * - {user['field']}
+ * - {user["field"]}
+ *
+ * Captures the field name in group 1 (dot notation) or group 2 (bracket notation)
+ */
+const USER_VAR_REGEX = /\{user\.(\w+)\}|\{user\[['"](\w+)['"]\]\}/g;
+/**
+ * The lone `{user.<field>}` reference an expression node holds, or `null` when the node isn't an
+ * expression or holds anything else (`{1 + 1}`, a CSS-looking body, two references in one brace).
+ * Exported so promotion gates can tell a variable reference apart from an expression that must
+ * stay literal.
+ */
+function soleUserVariableExpression(node) {
+    if (node.type !== 'mdxFlowExpression' && node.type !== 'mdxTextExpression')
+        return null;
+    const { value } = node;
+    const wrapped = `{${(value ?? '').trim()}}`;
+    const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
+    if (matches.length !== 1 || matches[0][0] !== wrapped)
+        return null;
+    return { name: matches[0][1] || matches[0][2], wrapped };
+}
+function makeVariableNode(varName, rawValue) {
+    return {
+        type: NodeTypes.variable,
+        data: {
+            hName: 'Variable',
+            hProperties: { name: varName },
+        },
+        value: rawValue,
+    };
+}
+/**
+ * A remark plugin that parses {user.<field>} patterns from text nodes and
+ * mdx expression nodes, creating Variable nodes for runtime resolution.
+ *
+ * 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 match = soleUserVariableExpression(node);
+    if (!match)
+        return;
+    parent.children.splice(index, 1, makeVariableNode(match.name, match.wrapped));
+}
+const variablesTextTransformer = () => tree => {
+    visit(tree, 'mdxTextExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'text', (node, index, parent) => {
+        if (index === undefined || !parent)
+            return;
+        // Skip if inside inline code
+        if (parent.type === 'inlineCode')
+            return;
+        const text = node.value;
+        if (typeof text !== 'string' || !text.trim())
+            return;
+        if (!text.includes('{user.') && !text.includes('{user['))
+            return;
+        const matches = [...text.matchAll(USER_VAR_REGEX)];
+        if (matches.length === 0)
+            return;
+        const parts = [];
+        let lastIndex = 0;
+        matches.forEach(match => {
+            const matchIndex = match.index ?? 0;
+            // Add text before the match
+            if (matchIndex > lastIndex) {
+                parts.push({ type: 'text', value: text.slice(lastIndex, matchIndex) });
+            }
+            // Extract variable name from either capture group (dot or bracket notation)
+            const varName = match[1] || match[2];
+            parts.push(makeVariableNode(varName, match[0]));
+            lastIndex = matchIndex + match[0].length;
+        });
+        // Add remaining text after last match
+        if (lastIndex < text.length) {
+            parts.push({ type: 'text', value: text.slice(lastIndex) });
+        }
+        // Replace node with parts
+        if (parts.length > 1 || (parts.length === 1 && parts[0].type !== 'text')) {
+            parent.children.splice(index, 1, ...parts);
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const variables_text = (variablesTextTransformer);
+
 ;// ./processor/transform/mdxish/components/utils.ts
 
 
@@ -104213,19 +104431,15 @@ const NON_PROMOTABLE_PLAIN_TAGS = new Set([...htmlRawNames, ...tableTags, 'table
 const NESTED_TABLE_RE = /<table[\s>]/i;
 const isMarkdownPromotableHtmlTag = (tag) => !NON_PROMOTABLE_PLAIN_TAGS.has(tag);
 // Expression nodes count as plain so `<div>{1+1}</div>` keeps its current
-// literal-brace behavior; variables/glossary already resolve inside raw html.
-const PLAIN_CONTENT_TYPES = new Set([
-    'paragraph',
-    'text',
-    'html',
-    'mdxTextExpression',
-    'mdxFlowExpression',
-    NodeTypes.variable,
-    NodeTypes.glossary,
-]);
+// literal-brace behavior — authors put CSS-shaped braces in these bodies, and only
+// a reference that names a real variable may resolve.
+const PLAIN_CONTENT_TYPES = new Set(['paragraph', 'text', 'html', 'mdxTextExpression', 'mdxFlowExpression']);
 // Promoting plain HTML is only worth bypassing rehype-raw's parse5 pass when
-// the body parses into an actual markdown construct.
+// the body parses into an actual markdown construct. Variables and glossary terms
+// count: parse5 renders `<<var>>` as a stray `<` plus a `<var>` tag, so a body that
+// holds nothing else still has to be promoted to resolve.
 const containsMarkdownConstruct = (nodes) => nodes.some(node => !PLAIN_CONTENT_TYPES.has(node.type) ||
+    soleUserVariableExpression(node) !== null ||
     ('children' in node && Array.isArray(node.children) && containsMarkdownConstruct(node.children)));
 /**
  * Index of the `</tag>` that balances the already-consumed opening tag (the
@@ -104991,6 +105205,7 @@ const evaluateExports = () => (tree, file) => {
 
 
 
+
 const parseExpression = (expression) => jsxAcornParser.parse(expression, { ecmaVersion: 'latest', sourceType: 'module' });
 /**
  * Recursively report whether an estree value contains any JSX element or fragment node.
@@ -105007,22 +105222,16 @@ 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;
+    if (node.type !== 'JSXIdentifier' || typeof node.name !== 'string')
+        return undefined;
+    return componentNamePattern.test(node.name) ? node.name : undefined;
 };
 /**
- * Collect the capitalized names an expression uses as JSX tags. Parsed rather than pattern
+ * Collect the component 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.
@@ -105046,8 +105255,7 @@ const jsxComponentNames = (expression) => {
         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))
+            if (name)
                 names.add(name);
         }
         Object.values(node).forEach(walk);
@@ -105206,7 +105414,8 @@ function renderFallbackHtml(element) {
         const rawNode = { type: 'raw', value: __WEBPACK_CJS_EXPORT_renderToStaticMarkup__(element) };
         return [rawNode];
     }
-    catch {
+    catch (error) {
+        console.warn('[mdxish] Could not render expression result:', error);
         return [];
     }
 }
@@ -105264,6 +105473,7 @@ 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
@@ -105292,17 +105502,28 @@ const isRenderable = (value) => {
         return true;
     return Array.isArray(value) && value.some(isRenderable);
 };
+const isPhrasingTag = (tagName) => lib_phrasing({ type: 'element', tagName, properties: {}, children: [] });
 /**
- * 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.
+ * Whether an expression evaluated to block-level content. A capitalized tag is a component,
+ * block-level unless it's on the inline list (so a `Table` component isn't mistaken for an inline
+ * `<table>`); a lowercase tag is HTML, block-level unless it's phrasing content. A `raw` node is
+ * HTML from `renderFallbackHtml`, so it's parsed and judged by the same rule.
  */
 const isBlockResult = (children) => children.some(child => {
+    if (child.type === 'raw')
+        return isBlockResult(fromHtml(child.value, { fragment: true }).children);
     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);
+    return /^[A-Z]/.test(tagName) ? !INLINE_COMPONENT_TAGS.has(tagName) : !isPhrasingTag(tagName);
 });
+const JSX_ELEMENT_TYPES = new Set(['mdxJsxFlowElement', 'mdxJsxTextElement']);
+const wrapInParagraph = (child) => ({
+    type: 'paragraph',
+    children: [child],
+    position: child.position,
+});
+const placeText = (text, needsBlock) => (needsBlock ? wrapInParagraph(text) : text);
 /** Turn a non-renderable evaluation result into a text node. */
 const createTextNode = (result, position) => {
     if (result === null || result === undefined)
@@ -105338,6 +105559,7 @@ const evaluateExpressions = ({ components, variables } = {}) => (tree, file) =>
         const expression = value?.trim();
         if (!expression)
             return;
+        const needsBlock = expressionNode.type === 'mdxFlowExpression' && !JSX_ELEMENT_TYPES.has(parent.type);
         try {
             const scope = { ...componentScope(expression, components ?? {}), ...baseScope };
             const result = evalExpression(expression, scope);
@@ -105346,10 +105568,17 @@ const evaluateExpressions = ({ components, variables } = {}) => (tree, file) =>
                 // passes through rehypeRaw/parse5 step later in the pipeline. This ensures that the 
                 // expression result is not parsed by parse5 and fragmenting the nesting that is valid JSX 
                 // but invalid HTML — e.g. an `<a>` wrapping `<a>`.
-                expressionNode.data = { ...expressionNode.data, hChildren: reactElementToHast(result) };
+                const hChildren = reactElementToHast(result);
+                expressionNode.data = { ...expressionNode.data, hChildren };
+                // An inline result in a block slot renders inside a `<p>`, as its one-line form does.
+                // Retyping it as a text expression makes it legal paragraph content.
+                if (needsBlock && !isBlockResult(hChildren)) {
+                    const inline = { ...expressionNode, type: 'mdxTextExpression' };
+                    parent.children.splice(index, 1, wrapInParagraph(inline));
+                }
             }
             else {
-                parent.children.splice(index, 1, createTextNode(result, position));
+                parent.children.splice(index, 1, placeText(createTextNode(result, position), needsBlock));
             }
         }
         catch (_error) {
@@ -105357,7 +105586,8 @@ const evaluateExpressions = ({ components, variables } = {}) => (tree, file) =>
             // parser treats contents as code, so backslash escapes aren't applied;
             // restore them here so e.g. `{\!}` round-trips to `{!}`.
             const processed = expression.replace(/\\([!-/:-@[-`{-~])/g, '$1');
-            parent.children.splice(index, 1, { type: 'text', value: `{${processed}}`, position });
+            const literal = { type: 'text', value: `{${processed}}`, position };
+            parent.children.splice(index, 1, placeText(literal, needsBlock));
         }
     });
     // A text expression is parsed inside a paragraph, but its result can be block content: a
@@ -105458,6 +105688,106 @@ const generateSlugForHeadings = () => (tree) => {
 };
 /* harmony default export */ const heading_slugs = (generateSlugForHeadings);
 
+;// ./processor/transform/mdxish/images-to-jsx.ts
+
+
+
+
+
+const IMAGE_ATTRS = ['align', 'alt', 'border', 'caption', 'className', 'height', 'lazy', 'src', 'title', 'width'];
+/** The three attributes markdown's `![alt](src "title")` can carry. Anything else forces JSX. */
+const PLAIN_IMAGE_ATTRS = ['alt', 'src', 'title'];
+const EMOJI_COLONS = /^:(.*):$/;
+const hasExtra = (attributes) => attributes.some(attr => !PLAIN_IMAGE_ATTRS.includes(attr.name));
+const toImageJsx = (attributes, children = []) => ({
+    type: 'mdxJsxFlowElement',
+    name: 'Image',
+    attributes,
+    children,
+});
+/**
+ * An `image` is phrasing content, but the nodes it replaces here (`image-block`, and a plain
+ * `[block:image]`) sit where flow content belongs. `mdast-util-to-markdown` picks a block separator
+ * from the two node types around it and has no rule for phrasing-next-to-flow, so it emits none and
+ * glues the image to whatever follows (`![a](src)# Heading`), which then cascades through the rest
+ * of the document. Wrapping restores a block for it to join against.
+ */
+const placeImage = (parent, index, image) => {
+    const wrapped = { type: 'paragraph', children: [image] };
+    parent.children[index] = INLINE_ONLY_PARENT_TYPES.has(parent.type) ? image : wrapped;
+};
+/**
+ * Serializes the three image shapes a parsed document carries. An image that picked up readme
+ * attributes has no markdown spelling left and goes out as `<Image>`, a plain one stays
+ * `![alt](src)`.
+ *
+ * Order matters: `figure` unwraps into the `image` its caption belongs to, so it runs first.
+ */
+const imagesToJsx = () => tree => {
+    visit(tree, NodeTypes.figure, (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        const [image, caption] = node.children;
+        const { align, className, width } = image.data.hProperties;
+        parent.children[index] = toImageJsx(toAttributes({ ...image, align, width, ...(className === 'border' && { border: true }), src: image.src || image.url }, IMAGE_ATTRS), 
+        // The caption stays a child rather than a pre-serialized `caption` attribute, so readme nodes
+        // inside it (emoji, variables, glossary) reach their own handlers instead of the bare
+        // `toMarkdown` in `compatibility.figureToImageBlock`, which throws on them.
+        caption.children);
+    });
+    visit(tree, 'image', (n, index, parent) => {
+        const node = n;
+        if (!parent || index === undefined)
+            return undefined;
+        const hProperties = node.data?.hProperties;
+        // A `:joy:`-style shortcode round-trips as a gemoji rather than the image it parsed into.
+        if (hProperties?.className === 'emoji' && node.title) {
+            const emoji = {
+                type: NodeTypes.emoji,
+                name: node.title.replace(EMOJI_COLONS, '$1'),
+                value: node.title,
+            };
+            parent.children[index] = emoji;
+            return undefined;
+        }
+        if (hProperties) {
+            const attributes = toAttributes({ ...node, ...hProperties, src: node.url }, IMAGE_ATTRS);
+            if (hasExtra(attributes)) {
+                parent.children[index] = toImageJsx(attributes);
+                return undefined;
+            }
+        }
+        // An attribute-less `[block:image]` parses straight to an `image` in a flow slot, so it needs
+        // the same wrap. Editor images always arrive inside a paragraph and are left alone.
+        if (INLINE_ONLY_PARENT_TYPES.has(parent.type))
+            return undefined;
+        placeImage(parent, index, node);
+        // Step over the paragraph just created, or the visitor walks back into the same image.
+        return [(/* inlined export .SKIP */"skip"), index + 1];
+    });
+    visit(tree, NodeTypes.imageBlock, (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        // An image-block keeps its caption as children, so it has to be re-serialized back into the
+        // `caption` attribute before the node is replaced.
+        const captionChildren = node.children ?? [];
+        const caption = captionChildren.length ? toMarkdown({ type: 'root', children: captionChildren }).trim() : '';
+        const attributes = toAttributes({ ...node, ...node.data.hProperties, ...(caption && { caption }) }, IMAGE_ATTRS);
+        if (hasExtra(attributes)) {
+            parent.children[index] = toImageJsx(attributes);
+            return;
+        }
+        placeImage(parent, index, {
+            type: 'image',
+            url: node.src,
+            ...(node.title && { title: node.title }),
+            ...(node.alt && { alt: node.alt }),
+        });
+    });
+    return tree;
+};
+/* harmony default export */ const images_to_jsx = (imagesToJsx);
+
 // EXTERNAL MODULE: external "@readme/variable"
 var variable_ = __webpack_require__(8167);
 var variable_default = /*#__PURE__*/__webpack_require__.n(variable_);
@@ -107494,6 +107824,24 @@ function normalizeTableSeparator(content) {
 }
 /* harmony default export */ const normalize_table_separator = ((/* unused pure expression or super */ null && (normalizeTableSeparator)));
 
+;// ./processor/transform/mdxish/unwrap-pins.ts
+
+/**
+ * A `sidebar: true` magic block (e.g. `[block:code]`) parses into an `rdme-pin` wrapper via
+ * `wrapPinnedBlocks`, and remark-stringify throws on any node type without a handler. The mdxish
+ * dialect has no spelling for a pin, so the wrapper serializes as its content instead — the same
+ * (lossy) unwrap `readmeToMdx` has always done, trading the `sidebar` flag for not crashing.
+ */
+const unwrapPins = () => tree => {
+    visit(tree, 'rdme-pin', (node, index, parent) => {
+        if (!parent || index === undefined)
+            return;
+        parent.children.splice(index, 1, ...node.children);
+    });
+    return tree;
+};
+/* harmony default export */ const unwrap_pins = (unwrapPins);
+
 ;// ./processor/transform/mdxish/variables-code.ts
 
 
@@ -107560,97 +107908,6 @@ const variablesCodeResolver = ({ variables } = {}) => tree => {
 };
 /* harmony default export */ const variables_code = (variablesCodeResolver);
 
-;// ./processor/transform/mdxish/variables-text.ts
-
-
-/**
- * Matches {user.<field>} patterns:
- * - {user.name}
- * - {user.email}
- * - {user['field']}
- * - {user["field"]}
- *
- * Captures the field name in group 1 (dot notation) or group 2 (bracket notation)
- */
-const USER_VAR_REGEX = /\{user\.(\w+)\}|\{user\[['"](\w+)['"]\]\}/g;
-function makeVariableNode(varName, rawValue) {
-    return {
-        type: NodeTypes.variable,
-        data: {
-            hName: 'Variable',
-            hProperties: { name: varName },
-        },
-        value: rawValue,
-    };
-}
-/**
- * A remark plugin that parses {user.<field>} patterns from text nodes and
- * mdx expression nodes, creating Variable nodes for runtime resolution.
- *
- * 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 => {
-    visit(tree, 'mdxTextExpression', (node, index, parent) => {
-        visitExpressionNode(node, index, parent);
-    });
-    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
-        visitExpressionNode(node, index, parent);
-    });
-    visit(tree, 'text', (node, index, parent) => {
-        if (index === undefined || !parent)
-            return;
-        // Skip if inside inline code
-        if (parent.type === 'inlineCode')
-            return;
-        const text = node.value;
-        if (typeof text !== 'string' || !text.trim())
-            return;
-        if (!text.includes('{user.') && !text.includes('{user['))
-            return;
-        const matches = [...text.matchAll(USER_VAR_REGEX)];
-        if (matches.length === 0)
-            return;
-        const parts = [];
-        let lastIndex = 0;
-        matches.forEach(match => {
-            const matchIndex = match.index ?? 0;
-            // Add text before the match
-            if (matchIndex > lastIndex) {
-                parts.push({ type: 'text', value: text.slice(lastIndex, matchIndex) });
-            }
-            // Extract variable name from either capture group (dot or bracket notation)
-            const varName = match[1] || match[2];
-            parts.push(makeVariableNode(varName, match[0]));
-            lastIndex = matchIndex + match[0].length;
-        });
-        // Add remaining text after last match
-        if (lastIndex < text.length) {
-            parts.push({ type: 'text', value: text.slice(lastIndex) });
-        }
-        // Replace node with parts
-        if (parts.length > 1 || (parts.length === 1 && parts[0].type !== 'text')) {
-            parent.children.splice(index, 1, ...parts);
-        }
-    });
-    return tree;
-};
-/* harmony default export */ const variables_text = (variablesTextTransformer);
-
 ;// ./lib/utils/mdxish/mdxish-load-components.ts
 
 
@@ -107731,6 +107988,10 @@ function loadComponents() {
 
 
 
+
+
+
+
 
 
 
@@ -107814,35 +108075,43 @@ function mdxishAstProcessor(mdContent, opts = {}) {
     };
 }
 /**
- * Registers the mdx-jsx serialization extension so remark-stringify
- * can convert JSX nodes (e.g. `<Table>`) to markdown.
+ * Registers serialization for the node types remark-stringify can't write on its own:
+ * JSX elements (e.g. `<Table>`), MDX expressions, and ESM exports.
  */
-function mdxJsxStringify() {
+function mdxStringifyExtensions() {
     const data = this.data();
     const extensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
-    extensions.push({ extensions: [mdxJsxToMarkdown()] });
+    extensions.push({ extensions: [mdxJsxToMarkdown(), mdxExpressionToMarkdown(), mdxjsEsmToMarkdown()] });
 }
+const stringifyOptions = {
+    bullet: (/* inlined export .DEFAULT_BULLET */"-"),
+    emphasis: '_',
+    // Escape literal braces in text so they don't parse as (often
+    // unterminated) MDX expressions on the next round trip.
+    unsafe: [
+        { character: '{', inConstruct: 'phrasing' },
+        { character: '}', inConstruct: 'phrasing' },
+    ],
+};
 /**
  * Serializes an Mdast back into a markdown string.
  */
 function mdxishMdastToMd(mdast) {
     const processor = unified()
         .use(remarkGfm)
+        // Readme nodes with no markdown spelling go out as JSX, the same tags mdxish re-parses.
         .use(callout_to_jsx)
         .use(mdxish_tables_to_jsx)
         .use(anchor_to_jsx)
+        // The rest only a PARSER tree carries.
+        // A `sidebar: true` block parses into an `rdme-pin` wrapper the dialect can't spell.
+        .use(unwrap_pins)
+        // Figures, image blocks, and images that picked up readme attributes while parsing.
+        .use(images_to_jsx)
+        // Handlers for the readme nodes that stay themselves (variables, emoji, html-blocks, lists).
         .use(mdxishCompilers)
-        .use(mdxJsxStringify)
-        .use(remarkStringify, {
-        bullet: (/* inlined export .DEFAULT_BULLET */"-"),
-        emphasis: '_',
-        // Escape literal braces in text so they don't parse as (often
-        // unterminated) MDX expressions on the next round trip.
-        unsafe: [
-            { character: '{', inConstruct: 'phrasing' },
-            { character: '}', inConstruct: 'phrasing' },
-        ],
-    });
+        .use(mdxStringifyExtensions)
+        .use(remarkStringify, stringifyOptions);
     return processor.stringify(processor.runSync(mdast));
 }
 /**
@@ -108852,7 +109121,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__(912);
+/******/ 	let __webpack_exports__ = __webpack_require__(7070);
 /******/ 	
 /******/ 	return __webpack_exports__;
 /******/ })()