@readme/markdown 14.10.3 → 14.11.1

package/dist/render-fixture.node.js

@@ -95894,6 +95894,18 @@ const tableTags = new Set([
     'th',
     'td',
 ]);
+/**
+ * Replaces every paragraph node with its inline children. Used where paragraphs
+ * are parser artifacts (remarkMdx wrapping inline JSX), not real content.
+ */
+const unwrapParagraphNodes = (children) => {
+    return children.flatMap(child => {
+        if (child.type === 'paragraph' && 'children' in child && Array.isArray(child.children)) {
+            return child.children;
+        }
+        return [child];
+    });
+};
 /**
  * If the cell has exactly one paragraph child, unwrap it so its inline children sit
  * directly under the cell (matches GFM table cell shape and avoids stray `<p>` wrappers).
@@ -95905,12 +95917,7 @@ const unwrapSoleParagraph = (children) => {
     const paragraphCount = children.filter(c => c.type === 'paragraph').length;
     if (paragraphCount !== 1)
         return children;
-    return children.flatMap(child => {
-        if (child.type === 'paragraph' && 'children' in child && Array.isArray(child.children)) {
-            return child.children;
-        }
-        return [child];
-    });
+    return unwrapParagraphNodes(children);
 };
 /**
  * Splice each text into `html` at its offset. Inserts at the same offset
@@ -96260,6 +96267,23 @@ const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable', 'html-block', 'r
  * Uses the html-tags package, converted to a Set<string> for efficient lookups.
  */
 const STANDARD_HTML_TAGS = new Set(html_tags_namespaceObject);
+/**
+ * Table structural tags. Blank lines inside these carry deliberate meaning for
+ * `mdxishTables` (e.g. splitting cell content into paragraphs, or deciding
+ * whether a table stays plain HTML vs a JSX `<Table>`), so transforms that
+ * neutralize or claim across blank lines must leave them alone.
+ */
+const HTML_TABLE_STRUCTURE_TAGS = new Set([
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'tr',
+    'td',
+    'th',
+    'caption',
+    'colgroup',
+]);
 /**
  * HTML void elements — elements that have no closing tag and no children.
  *
@@ -96571,18 +96595,17 @@ const processTableNode = (node, index, parent, documentPosition) => {
         // same line as content becomes mdxJsxTextElement inside a paragraph).
         // Unwrap these so <td>/<th> sit directly under <tr>, and strip
         // whitespace-only text nodes to avoid rendering empty <p>/<br>.
-        const cleanChildren = (children) => children
-            .flatMap(child => {
-            if (child.type === 'paragraph' && 'children' in child && Array.isArray(child.children)) {
-                return child.children;
-            }
-            return [child];
-        })
-            .filter(child => !(child.type === 'text' && 'value' in child && typeof child.value === 'string' && !child.value.trim()));
+        const removeWhitespaceOnlyTextNodes = (children) => children.filter(child => !(child.type === 'text' && 'value' in child && typeof child.value === 'string' && !child.value.trim()));
         lib_visit(node, utils_isMDXElement, (el) => {
-            if ('children' in el && Array.isArray(el.children)) {
-                el.children = cleanChildren(el.children);
-            }
+            if (!('children' in el) || !Array.isArray(el.children))
+                return;
+            // Filtering transformers
+            // A cell only unwraps a sole paragraph: multiple paragraphs are real
+            // blank-line-separated content that must stay separated
+            const unwrapped = isTableCell(el)
+                ? unwrapSoleParagraph(el.children)
+                : unwrapParagraphNodes(el.children);
+            el.children = removeWhitespaceOnlyTextNodes(unwrapped);
         });
         parent.children[index] = {
             ...node,
@@ -119552,15 +119575,26 @@ const types_types = /** @type {const} */ ({
 
 
 
+
 // Raw tags (type-1: pre/script/style/textarea) and block tags (type-6: div,
 // section, …) always start a block, so they stay flow even with trailing
 // content. Other lowercase tags (i, span, …) follow the type-7 rule and only
 // stay flow when nothing trails the close tag.
 const htmlFlowTagNames = new Set([...htmlRawNames, ...htmlBlockNames]);
+// Lowercase type-6 block tags claimable in flow even without a `{…}` attribute, so
+// blank lines between nested JSX siblings don't fragment the block. Excludes table
+// tags (mdxishTables owns their blank lines) and voids (never close).
+const plainBlockClaimTagNames = new Set([...htmlBlockNames].filter(tag => !HTML_TABLE_STRUCTURE_TAGS.has(tag) && !HTML_VOID_ELEMENTS.has(tag)));
 const syntax_nonLazyContinuationStart = {
     tokenize: syntax_tokenizeNonLazyContinuationStart,
     partial: true,
 };
+// Lookahead for `plainClaimLineStart`: is this line markup-only, or a paragraph
+// that merely starts with a tag? Run via `effects.check` so it never consumes.
+const markupOnlyContinuation = {
+    tokenize: tokenizeMarkupOnlyContinuation,
+    partial: true,
+};
 function resolveToMdxComponent(events) {
     let index = events.length;
     while (index > 0) {
@@ -119615,6 +119649,10 @@ function createTokenize(mode) {
         // (INLINE_COMPONENT_TAGS — Anchor, Glossary), also brace-gated.
         let isLowercaseTag = false;
         let sawBraceAttr = false;
+        // A plain lowercase block tag claimed without a `{…}` attribute, gated by
+        // `plainClaimLineStart`: after a blank line it may only continue on a tag line.
+        let isPlainBlockClaim = false;
+        let pendingBlankLine = false;
         // Code span tracking
         let codeSpanOpenSize = 0;
         let codeSpanCloseSize = 0;
@@ -119848,8 +119886,13 @@ function createTokenize(mode) {
             }
             // End of opening tag
             if (code === codes.greaterThan) {
-                if (requiresBraceAttr && !sawBraceAttr)
-                    return nok(code);
+                if (requiresBraceAttr && !sawBraceAttr) {
+                    // Plain lowercase block tags stay claimable in flow, gated per line by
+                    // `plainClaimLineStart`; everything else falls through to CommonMark.
+                    if (!isFlow || !plainBlockClaimTagNames.has(tagName))
+                        return nok(code);
+                    isPlainBlockClaim = true;
+                }
                 effects.consume(code);
                 onOpenerLine = isFlow;
                 return body;
@@ -119999,6 +120042,7 @@ function createTokenize(mode) {
             if (atLineStart && codeSpanOpenSize >= 3) {
                 fenceChar = codes.graveAccent;
                 fenceLength = codeSpanOpenSize;
+                atLineStart = false;
                 return inFencedCode(code);
             }
             return inCodeSpan(code);
@@ -120146,8 +120190,14 @@ function createTokenize(mode) {
                 effects.consume(code);
                 return nestedOpenTagName;
             }
-            // Only increment depth for same-name tags that are followed by valid tag-end chars
-            if (closingTagName === tagName && (code === codes.greaterThan || code === codes.slash || code === codes.space || code === codes.horizontalTab)) {
+            // Same-name opener followed by a tag-end char bumps depth. A line ending
+            // counts too: Prettier puts a newline right after the name (`<div\n …\n>`).
+            if (closingTagName === tagName &&
+                (code === codes.greaterThan ||
+                    code === codes.slash ||
+                    code === codes.space ||
+                    code === codes.horizontalTab ||
+                    markdownLineEnding(code))) {
                 depth += 1;
             }
             atLineStart = false;
@@ -120236,6 +120286,10 @@ function createTokenize(mode) {
         }
         function bodyContinuationBefore(code) {
             if (code === null || markdownLineEnding(code)) {
+                // Empty line: outside any `{…}` expression this is CommonMark's html-block
+                // terminator, so a plain block claim must pass the guard below to continue.
+                if (isPlainBlockClaim && braceDepth === 0)
+                    pendingBlankLine = true;
                 return bodyContinuationStart(code);
             }
             effects.enter('mdxComponentData');
@@ -120247,19 +120301,52 @@ function createTokenize(mode) {
                     return inBodyBraceString(code);
                 return inBodyBraceExpr(code);
             }
-            // Detect tilde fences at line start
-            if (atLineStart && code === codes.tilde) {
+            if (isPlainBlockClaim)
+                return plainClaimLineStart(code);
+            return bodyLineStart(code);
+        }
+        // Dispatch a non-blank continuation line: fenced code at line start, else body.
+        function bodyLineStart(code) {
+            if (atLineStart && code === codes.tilde)
                 return bodyAfterLineStart(code);
-            }
-            // Detect backtick fences at line start
             if (atLineStart && code === codes.graveAccent) {
                 codeSpanOpenSize = 0;
-                atLineStart = false;
+                // Leave `atLineStart` set — `countOpenTicks` needs it to tell a fence from an
+                // inline code span once the run of backticks is fully counted; it's cleared once
+                // that fence-vs-span decision has actually been made.
                 return countOpenTicks(code);
             }
             atLineStart = false;
             return body(code);
         }
+        // Line-start gate for plain block claims. After a blank line the block may only
+        // continue on a tag line (`<…`); any markdown island (`**bold**`, `[block:…]`, a
+        // fence) refuses so CommonMark html-flow reparses it exactly as it does today.
+        function plainClaimLineStart(code) {
+            // Leading whitespace only → treat as a blank line, matching CommonMark.
+            if (code === codes.space || code === codes.horizontalTab) {
+                effects.consume(code);
+                return plainClaimLineStart;
+            }
+            if (code === null || markdownLineEnding(code)) {
+                pendingBlankLine = true;
+                effects.exit('mdxComponentData');
+                return bodyContinuationStart(code);
+            }
+            // Across a blank line the block only continues onto a markup-only line; a
+            // paragraph that merely starts with a tag must fall back so its markdown
+            // parses and rehype-raw re-nests it into the wrapper.
+            if (pendingBlankLine) {
+                if (code !== codes.lessThan)
+                    return nok(code);
+                return effects.check(markupOnlyContinuation, plainClaimContinue, nok)(code);
+            }
+            return bodyLineStart(code);
+        }
+        function plainClaimContinue(code) {
+            pendingBlankLine = false;
+            return bodyLineStart(code);
+        }
         // ── Shared lazy continuation failure ───────────────────────────────────
         function continuationAfter(code) {
             if (code === null) {
@@ -120290,6 +120377,46 @@ function syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
         return ok(code);
     }
 }
+// A markup-only line opens with a tag (`<x`/`</x`) and ends (ignoring trailing
+// spaces) at a `>`. That distinguishes a structural continuation like
+// `<span>b</span></div>` from a paragraph like `<b>Note:</b> read *this*`.
+function tokenizeMarkupOnlyContinuation(effects, ok, nok) {
+    let lastNonSpace = null;
+    return start;
+    function start(code) {
+        // Caller guarantees we are at `<` at the (already de-indented) line start.
+        effects.enter(types_types.data);
+        effects.consume(code);
+        return afterLessThan;
+    }
+    function afterLessThan(code) {
+        if (code === codes.slash) {
+            effects.consume(code);
+            return afterSlash;
+        }
+        return afterSlash(code);
+    }
+    // The `<` (or `</`) must introduce a real tag, not a stray `<` in prose.
+    function afterSlash(code) {
+        if (asciiAlpha(code)) {
+            lastNonSpace = code;
+            effects.consume(code);
+            return scanToLineEnd;
+        }
+        effects.exit(types_types.data);
+        return nok(code);
+    }
+    function scanToLineEnd(code) {
+        if (code === null || markdownLineEnding(code)) {
+            effects.exit(types_types.data);
+            return lastNonSpace === codes.greaterThan ? ok(code) : nok(code);
+        }
+        if (!markdownSpace(code))
+            lastNonSpace = code;
+        effects.consume(code);
+        return scanToLineEnd;
+    }
+}
 /**
  * Micromark extension that tokenizes MDX-like components.
  *
@@ -120536,6 +120663,8 @@ const mdxishInlineMdxComponents = () => tree => {
 
 
 
+/** Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
+const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
 /**
  * Reduce leading whitespace on all lines just enough to prevent
  * remark from treating indented content as code blocks (4+ spaces).
@@ -120695,10 +120824,16 @@ const mdx_blocks_mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
         // inline, which is how ReadMe's custom components are modeled).
         if (!isPascal && parent.type === 'paragraph')
             return;
-        // Lowercase HTML tags are only eligible when the tokenizer claimed them
-        // for JSX-expression attributes. Plain HTML should stay as html nodes so
+        // Lowercase HTML tags are eligible when they (or a descendant tag in their
+        // content, e.g. a `.map()` body returning JSX with `key={i}`) carry a
+        // JSX-expression attribute. Without this, a wrapper `<div>` with only plain
+        // attributes (or none) swallows its whole nested block — including any
+        // `style={{...}}`/`.map()` JSX inside it — as literal HTML text, which
+        // rehype-raw's parse5 pass then garbles (it has no notion of JS expressions).
+        // Plain HTML with no expressions anywhere stays as an html node so
         // rehype-raw handles it as normal.
-        if (!isPascal && !hasExpressionAttr(attributes))
+        const hasNestedExpressionAttr = !selfClosing && NESTED_ATTR_EXPRESSION_RE.test(contentAfterTag);
+        if (!isPascal && !hasExpressionAttr(attributes) && !hasNestedExpressionAttr)
             return;
         const closingTagStr = `</${tag}>`;
         // Case 1: Self-closing tag
@@ -120921,12 +121056,60 @@ function restoreSnakeCase(placeholderName, mapping) {
     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
+// and it's a common use case. Add other common libraries here.
+const defaultModuleRegistry = { react: (external_react_default()) };
+const isRecord = (value) => typeof value === 'object' && value !== null;
+// Get the value of a named export from a module
+const getModuleExport = (module, importedName) => isRecord(module) && importedName in module ? module[importedName] : undefined;
+/**
+ * Turn `import` declarations into a flat map of binding → value.
+ *
+ * A "binding" is a mapping of a local name to the value of it in the module exports
+ * Example: `import { useState } from 'react'` yields `{ useState: React.useState }`.
+ *
+ * Unsupported specifiers are skipped with a warning rather than throwing, so a
+ * single unknown import can't break the rest of the document.
+ */
+const collectImportValues = (importDeclarations, registry = defaultModuleRegistry) => {
+    const importValues = {};
+    importDeclarations.forEach(declaration => {
+        const libraryName = declaration.source.value;
+        if (typeof libraryName !== 'string')
+            return;
+        if (!(libraryName in registry)) {
+            // eslint-disable-next-line no-console
+            console.warn(`[WARNING] Cannot resolve import "${libraryName}"; it is not a supported library.`);
+            return;
+        }
+        const module = registry[libraryName];
+        declaration.specifiers.forEach(spec => {
+            // Default (`import React`) and namespace (`import * as React`) both bind
+            // the whole module under the local name.
+            if (spec.type === 'ImportDefaultSpecifier' || spec.type === 'ImportNamespaceSpecifier') {
+                importValues[spec.local.name] = module;
+            }
+            else if (spec.type === 'ImportSpecifier') {
+                // Named imports (e.g. `import { useState } from 'react'`, useState is the import name)
+                const importName = spec.imported.type === 'Identifier' ? spec.imported.name : spec.imported.value;
+                if (typeof importName === 'string') {
+                    importValues[spec.local.name] = getModuleExport(module, importName);
+                }
+            }
+        });
+    });
+    return importValues;
+};
+
 ;// ./processor/transform/mdxish/evaluate-exports.ts
 
 
 
 
 
+
 /**
  * Recursively extract all identifier names introduced by a binding pattern.
  * Handles destructuring (`{ a, b }`, `[x, y]`), rest elements (`...rest`),
@@ -120974,6 +121157,7 @@ const collectExportNames = (declaration) => {
 const evaluateExports = () => (tree, file) => {
     const programBody = [];
     const exportNames = [];
+    const importDeclarations = [];
     const nodesToRemove = [];
     lib_visit(tree, isMDXEsm, (node, index, parent) => {
         if (parent && typeof index === 'number') {
@@ -120987,6 +121171,10 @@ const evaluateExports = () => (tree, file) => {
         // handled the same as a named export — the inner declaration carries the
         // binding name
         estreeBody.forEach(statement => {
+            if (statement.type === 'ImportDeclaration') {
+                importDeclarations.push(statement);
+                return;
+            }
             let declaration = null;
             if (statement.type === 'ExportNamedDeclaration' && statement.declaration) {
                 declaration = statement.declaration;
@@ -121014,9 +121202,11 @@ const evaluateExports = () => (tree, file) => {
         const program = { type: 'Program', sourceType: 'module', body: programBody };
         buildJsx(program, { runtime: 'classic', pragma: 'React.createElement', pragmaFrag: 'React.Fragment' });
         const { value: source } = toJs(program);
+        // Make sure import values are available in the scope
+        const importValues = collectImportValues(importDeclarations);
         // Evaluate and build on the expression source
         // Use react to compile JSX codes
-        const evaluatedExports = evaluate(`(() => { ${source}\nreturn { ${exportNames.join(', ')} }; })()`, { React: (external_react_default()) });
+        const evaluatedExports = evaluate(`(() => { ${source}\nreturn { ${exportNames.join(', ')} }; })()`, { React: (external_react_default()), ...importValues });
         Object.assign(scope, evaluatedExports);
     }
     catch (error) {
@@ -121080,15 +121270,17 @@ const evalExpression = (expression, scope) => {
 
 
 
+/** True for an array containing at least one React element, e.g. the result of `.map()` returning JSX. */
+const isRenderableElementArray = (value) => Array.isArray(value) && value.some((external_react_default()).isValidElement);
 /** Given the type of the expression result, create the corresponding mdast node. */
 const createEvaluatedNode = (result, position) => {
     if (result === null || result === undefined) {
         return { type: 'text', value: '', position };
     }
-    else if (external_react_default().isValidElement(result)) {
-        // Convert react elements to its HTML representation
-        // This must come before the object check as this is a subset of it
-        return { type: 'html', value: (0,server_node/* renderToStaticMarkup */.qV)(result), position };
+    else if (external_react_default().isValidElement(result) || isRenderableElementArray(result)) {
+        // Convert react elements (or arrays of them, e.g. `.map()` returning JSX) to their HTML
+        // representation. This must come before the object check as both are a subset of it.
+        return { type: 'html', value: (0,server_node/* renderToStaticMarkup */.qV)(external_react_default().createElement((external_react_default()).Fragment, null, result)), position };
     }
     else if (typeof result === 'object') {
         return { type: 'text', value: JSON.stringify(result), position };
@@ -121128,6 +121320,47 @@ const evaluateExpressions = () => (tree, file) => {
 };
 /* harmony default export */ const evaluate_expressions = (evaluateExpressions);
 
+;// ./processor/transform/mdxish/evaluate-style-block-expressions.ts
+
+
+
+// Matches a standalone `<style ...>{ <expr> }</style>` block — the JSX shape MDX evaluates
+// (typically a template-literal-wrapped CSS string) but which mdxish otherwise leaves as
+// literal, invalid-CSS text (see CX-3646).
+const STYLE_EXPRESSION_RE = /^(<style\b[^>]*>)\s*\{([\s\S]*)\}\s*(<\/style>)$/i;
+/**
+ * Evaluate the JSX expression wrapping a `<style>` tag's contents (typically a template
+ * literal, e.g. `<style>{\`.foo { color: red; }\`}</style>`) so the tag ends up holding plain
+ * CSS text instead of the literal `{`...`}` wrapper — which the browser treats as invalid CSS
+ * and drops the entire stylesheet for.
+ *
+ * `<style>` is one of CommonMark's "raw text" HTML elements (along with script/pre/textarea):
+ * its contents are captured verbatim as a single `html` mdast node with no inner tokenization,
+ * so this expression never reaches the mdxFlowExpression tokenizer or `evaluateExpressions` —
+ * it has to be matched and evaluated directly against the raw node's string value.
+ *
+ * Must run after `evaluateExports` (needs `file.data.mdxishScope`) and before `remarkRehype`
+ * turns `html` mdast nodes into raw hast strings. Skipped in safeMode.
+ */
+const evaluateStyleBlockExpressions = () => (tree, file) => {
+    const scope = { ...file.data.mdxishScope, React: (external_react_default()) };
+    lib_visit(tree, 'html', (node) => {
+        const match = node.value.trim().match(STYLE_EXPRESSION_RE);
+        if (!match)
+            return;
+        const [, openTag, expression, closeTag] = match;
+        try {
+            const css = evalExpression(expression, scope);
+            node.value = `${openTag}${String(css)}${closeTag}`;
+        }
+        catch {
+            // Evaluation failed — leave the node untouched so it round-trips as literal text.
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const evaluate_style_block_expressions = (evaluateStyleBlockExpressions);
+
 ;// ./processor/transform/mdxish/heading-slugs.ts
 
 
@@ -124388,219 +124621,100 @@ const normalizeMdxJsxNodes = () => tree => {
  */
 const JSX_COMMENT_REGEX = /\{\/\*[^*]*(?:\*(?!\/)[^*]*)*\*\/\}/g;
 
-;// ./processor/transform/mdxish/preprocess-jsx-expressions.ts
-
+;// ./processor/transform/mdxish/remove-jsx-comments.ts
 
 /**
  * Removes JSX-style comments (e.g., { /* comment *\/ }) from content.
  *
- * @param content
- * @returns Content with JSX comments removed
- * @example
+ * `@param` content
+ * `@returns` Content with JSX comments removed
+ * `@example`
  * ```typescript
- * removeJSXComments('Text { /* comment *\/ } more text')
- * // Returns: 'Text  more text'
+ * removeJSXComments('Text {/* comment *\/} more text') // => 'Text  more text'
  * ```
  */
 function removeJSXComments(content) {
     return content.replace(JSX_COMMENT_REGEX, '');
 }
-const HTML_ELEM_PLACEHOLDER_PREFIX = '___MDXISH_HTML_ELEM_';
-const HTML_ELEM_PLACEHOLDER = new RegExp(`${HTML_ELEM_PLACEHOLDER_PREFIX}(\\d+)___`, 'g');
-// Matches an HTML element that starts at a line boundary and ends at a line boundary.
-// Allows optional leading indentation and lazily matches until the same closing tag.
-const BLOCK_HTML_RE = /(?<=^|\n)[ \t]*<([a-z][a-zA-Z0-9]*)(?:\s[^>]*)?>[\s\S]*?<\/\1>[ \t]*(?=\n|$)/g;
-/**
- * Hides line-anchored HTML elements from the brace-escaping pass so we don't leak `\{`
- * into rendered output (rehypeRaw renders the `\` literally, e.g. `<div>{foo</div>`).
- *
- * One carve-out: if an interior line at column 0 has bare text containing `{`, mdxish
- * parses that line as a paragraph and the mdxExpression step would throw without an
- * escape — so we leave that case to the brace balancer.
- */
-function protectHTMLElements(content) {
-    const htmlElements = [];
-    const protectedContent = content.replace(BLOCK_HTML_RE, match => {
-        // Look at the lines between the open and close tags. If any of them starts
-        // at column 0 with bare text (not whitespace, not another tag) and contains
-        // `{`, mdxish will parse that line as a paragraph and the brace as an MDX
-        // expression, which would throw an error. So we let the brace balancer escape it.
-        // Otherwise, we need to extract the sequence to protect it from the brace escaping.
-        const interior = match.split('\n').slice(1, -1);
-        const hazard = interior.some(line => line.length > 0 && line[0] !== ' ' && line[0] !== '\t' && line[0] !== '<' && line.includes('{'));
-        if (hazard)
-            return match;
-        htmlElements.push(match);
-        return `${HTML_ELEM_PLACEHOLDER_PREFIX}${htmlElements.length - 1}___`;
-    });
-    return { htmlElements, protectedContent };
-}
-function restoreHTMLElements(content, htmlElements) {
-    if (htmlElements.length === 0)
-        return content;
-    return content.replace(HTML_ELEM_PLACEHOLDER, (_m, idx) => htmlElements[parseInt(idx, 10)]);
-}
-const ESM_DECLARATION_START = /^(?:export|import)\b/;
+
+;// ./processor/transform/mdxish/style-object-to-css.ts
+
 /**
- * Whether a line begins a top-level `export`/`import` declaration. Its braces
- * are valid JS owned by the mdxjsEsm tokenizer (which tolerates blank lines),
- * so escaping them would corrupt the source and break acorn parsing.
+ * CSS properties React treats as unitless — a bare number stays as-is instead of
+ * getting `px` appended. Mirrors React DOM's `isUnitlessNumber` whitelist.
+ * @see https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/shared/CSSProperty.js
  */
-function startsEsmDeclaration(chars, lineStart) {
-    return ESM_DECLARATION_START.test(chars.slice(lineStart, lineStart + 7).join(''));
-}
-function isBlankLine(chars, lineStart) {
-    for (let i = lineStart; i < chars.length; i += 1) {
-        if (chars[i] === '\n')
-            return true;
-        if (chars[i] !== ' ' && chars[i] !== '\t')
-            return false;
-    }
-    return true;
-}
+const UNITLESS_CSS_PROPERTIES = new Set([
+    'animationIterationCount',
+    'aspectRatio',
+    'borderImageOutset',
+    'borderImageSlice',
+    'borderImageWidth',
+    'boxFlex',
+    'boxFlexGroup',
+    'boxOrdinalGroup',
+    'columnCount',
+    'columns',
+    'flex',
+    'flexGrow',
+    'flexPositive',
+    'flexShrink',
+    'flexNegative',
+    'flexOrder',
+    'gridArea',
+    'gridRow',
+    'gridRowEnd',
+    'gridRowSpan',
+    'gridRowStart',
+    'gridColumn',
+    'gridColumnEnd',
+    'gridColumnSpan',
+    'gridColumnStart',
+    'fontWeight',
+    'lineClamp',
+    'lineHeight',
+    'opacity',
+    'order',
+    'orphans',
+    'tabSize',
+    'widows',
+    'zIndex',
+    'zoom',
+    'fillOpacity',
+    'floodOpacity',
+    'stopOpacity',
+    'strokeDasharray',
+    'strokeDashoffset',
+    'strokeMiterlimit',
+    'strokeOpacity',
+    'strokeWidth',
+]);
+/** Convert a camelCase (or CSS custom property) key into its kebab-case CSS name. */
+const cssPropertyName = (key) => (key.startsWith('--') ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`));
+/** React appends `px` to non-zero numeric values, except unitless and custom properties. */
+const cssPropertyValue = (key, value) => typeof value === 'number' && value !== 0 && !key.startsWith('--') && !UNITLESS_CSS_PROPERTIES.has(key)
+    ? `${value}px`
+    : `${value}`;
 /**
- * Escapes unbalanced and paragraph-spanning braces so MDX doesn't trip on them.
+ * True for a value that should be serialized as a style object rather than passed through
+ * as an already-CSS string. React elements are excluded since they're valid objects too.
  */
-function escapeProblematicBraces(content) {
-    const { htmlElements, protectedContent } = protectHTMLElements(content);
-    let strDelim = null;
-    let strEscaped = false;
-    // Track position of last newline (outside strings) to detect blank lines
-    // -2 means no recent newline
-    let lastNewlinePos = -2;
-    // Character state machine trackers
-    const toEscape = new Set();
-    // Convert to array of Unicode code points so that emojis and multi-byte characters are correctly tracked
-    const chars = Array.from(protectedContent);
-    const openStack = [];
-    // Whether the current top-level statement is an `export`/`import` declaration.
-    let insideEsmDeclaration = false;
-    for (let i = 0; i < chars.length; i += 1) {
-        const ch = chars[i];
-        // At a top-level (brace depth 0) line start, decide whether we're inside an
-        // ESM declaration. The flag persists across the declaration's own lines.
-        if (openStack.length === 0 && (i === 0 || chars[i - 1] === '\n')) {
-            if (startsEsmDeclaration(chars, i))
-                insideEsmDeclaration = true;
-            else if (isBlankLine(chars, i))
-                insideEsmDeclaration = false;
-        }
-        // Track string delimiters inside expressions to ignore braces within them
-        if (openStack.length > 0) {
-            if (strDelim) {
-                if (strEscaped)
-                    strEscaped = false;
-                else if (ch === '\\')
-                    strEscaped = true;
-                else if (ch === strDelim)
-                    strDelim = null;
-                // eslint-disable-next-line no-continue
-                continue;
-            }
-            if (ch === '"' || ch === "'" || ch === '`') {
-                strDelim = ch;
-                // eslint-disable-next-line no-continue
-                continue;
-            }
-            if (ch === '\n') {
-                if (lastNewlinePos >= 0) {
-                    const between = chars.slice(lastNewlinePos + 1, i).join('');
-                    if (/^[ \t]*$/.test(between)) {
-                        openStack.forEach(entry => { entry.hasBlankLine = true; });
-                    }
-                }
-                lastNewlinePos = i;
-            }
-        }
-        // Skip already-escaped braces (odd run of preceding backslashes).
-        if (ch === '{' || ch === '}') {
-            let bs = 0;
-            for (let j = i - 1; j >= 0 && chars[j] === '\\'; j -= 1)
-                bs += 1;
-            if (bs % 2 === 1) {
-                // eslint-disable-next-line no-continue
-                continue;
-            }
-        }
-        if (ch === '{') {
-            // `=` (after whitespace) before `{` ⇒ JSX attribute expression. The
-            // mdxComponent tokenizer captures the whole component, so blank lines
-            // inside attribute values are harmless. Nested `{` inherits the flag.
-            let isAttrExpr = false;
-            for (let j = i - 1; j >= 0; j -= 1) {
-                const pc = chars[j];
-                if (pc === '=') {
-                    isAttrExpr = true;
-                    break;
-                }
-                if (pc !== ' ' && pc !== '\t')
-                    break;
-            }
-            // Nested `{ ... }` inside an attribute value (e.g. `data={[{ ... }]}` or
-            // `data={{ a: { b: 1 } }}`) must inherit the same exemption; only the
-            // outer `{` is directly after `=`.
-            if (!isAttrExpr && openStack.length > 0 && openStack[openStack.length - 1].isAttrExpr) {
-                isAttrExpr = true;
-            }
-            openStack.push({ pos: i, hasBlankLine: false, isAttrExpr, isEsmDeclaration: insideEsmDeclaration });
-            lastNewlinePos = -2;
-        }
-        else if (ch === '}') {
-            if (openStack.length > 0) {
-                const entry = openStack.pop();
-                // The declaration's braces are closed; later top-level braces are not ESM.
-                if (openStack.length === 0)
-                    insideEsmDeclaration = false;
-                // Pure `{/* ... */}` comments are handled downstream by the jsxComment
-                // tokenizer — escaping their braces would prevent it from running.
-                const isPureJsxComment = chars[entry.pos + 1] === '/' &&
-                    chars[entry.pos + 2] === '*' &&
-                    chars[i - 1] === '/' &&
-                    chars[i - 2] === '*';
-                if (entry.hasBlankLine && !isPureJsxComment && !entry.isAttrExpr && !entry.isEsmDeclaration) {
-                    toEscape.add(entry.pos);
-                    toEscape.add(i);
-                }
-            }
-            else {
-                toEscape.add(i);
-            }
-        }
-        else if (ch === ';' && openStack.length === 0) {
-            // A top-level `;` ends the current statement, ESM or otherwise.
-            insideEsmDeclaration = false;
-        }
-    }
-    // Anything still open is unbalanced.
-    openStack.forEach(entry => {
-        if (!entry.isEsmDeclaration)
-            toEscape.add(entry.pos);
-    });
-    // Reconstruct the content with the escaped braces.
-    const escapedContent = toEscape.size === 0 ? protectedContent : chars.map((ch, i) => (toEscape.has(i) ? `\\${ch}` : ch)).join('');
-    return restoreHTMLElements(escapedContent, htmlElements);
-}
+const style_object_to_css_isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value) && !external_react_default().isValidElement(value);
 /**
- * Preprocesses JSX-like markdown content before parsing.
- *
- * JSX attribute expressions (`href={baseUrl}`) are no longer rewritten here —
- * they flow through the tokenizer as `mdxJsxAttributeValueExpression` nodes
- * and are evaluated at the hast handler step.
- *
- * @param content
- * @returns Preprocessed content ready for markdown parsing
+ * Serialize a React-style inline style object (`{ color: "red", fontSize: 12 }`) into a
+ * CSS declaration string (`color:red;font-size:12px`), the shape hast/HTML expects for a
+ * `style` attribute. Empty (`undefined`/`null`/`''`) entries are dropped.
  */
-function preprocessJSXExpressions(content) {
-    const { protectedCode, protectedContent } = protectCodeBlocks(content);
-    let processed = escapeProblematicBraces(protectedContent);
-    processed = restoreCodeBlocks(processed, protectedCode);
-    return processed;
-}
+const styleObjectToCssText = (style) => Object.entries(style)
+    .filter(([, value]) => value !== undefined && value !== null && value !== '')
+    .map(([key, value]) => `${cssPropertyName(key)}:${cssPropertyValue(key, value)}`)
+    .join(';');
 
 ;// ./processor/transform/mdxish/resolve-deferred-attribute-expression-props.ts
 
 
 
+
 /**
  * Resolve attribute expressions that `mdxJsxElementHandler` deferred.
  *
@@ -124622,7 +124736,10 @@ const resolveDeferredAttributeExpressionProps = () => (tree, file) => {
         const properties = node.properties;
         Object.entries(deferredExpressions).forEach(([name, source]) => {
             try {
-                properties[name] = evalExpression(source, scope);
+                const result = evalExpression(source, scope);
+                // hast/HTML `style` is a plain CSS string; a `style={{...}}` expression evaluates to
+                // a JS object, which must be serialized or it renders as the literal "[object Object]".
+                properties[name] = name === 'style' && style_object_to_css_isPlainObject(result) ? styleObjectToCssText(result) : result;
             }
             catch {
                 // Evaluation failed — fall back to the raw expression source so the attribute
@@ -124942,13 +125059,13 @@ function normalizeTableSeparator(content) {
 ;// ./processor/transform/mdxish/terminate-html-flow-blocks.ts
 
 
+
 const STANDALONE_HTML_LINE_REGEX = /^(<[a-z][^<>]*>|<\/[a-z][^<>]*>)+\s*$/;
 const HTML_LINE_WITH_CONTENT_REGEX = /^<[a-z][^<>]*>.*<\/[a-z][^<>]*>(?:[^<]*)$/;
-const terminate_html_flow_blocks_TABLE_STRUCTURE_TAGS = ['table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th', 'caption', 'colgroup'];
 // Tags whose contents must be preserved as is, inserting a blank line after the
 // opener corrupts the payload.
 // htmlRawNames here refer to <pre>, <textarea>, <script>, <style>
-const RAW_CONTENT_TAGS = [...htmlRawNames, ...terminate_html_flow_blocks_TABLE_STRUCTURE_TAGS];
+const RAW_CONTENT_TAGS = [...htmlRawNames, ...HTML_TABLE_STRUCTURE_TAGS];
 // The `(?=[\s/>])` lookahead avoids false matches on lookalike names like `<script-foo>`.
 const RAW_CONTENT_TAG_MATCHERS = RAW_CONTENT_TAGS.map(tag => ({
     open: new RegExp(`<${tag}(?=[\\s/>])[^>]*?(?<!/)>`, 'gi'),
@@ -125570,6 +125687,85 @@ function syntax_jsxTable() {
 ;// ./lib/micromark/jsx-table/index.ts
 
 
+;// ./lib/micromark/mdx-expression-lenient/syntax.ts
+
+
+/**
+ * Lenient MDX text-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
+ * upstream `mdxExpressionFromMarkdown()` builds the node.
+ *
+ * Reimplements the official micromark mdxExpression, but an unbalanced brace that
+ * reaches end of input returns `nok` instead of throwing: micromark rolls back
+ * 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);
+        }
+        if (markdownLineEnding(code)) {
+            effects.enter('lineEnding');
+            effects.consume(code);
+            effects.exit('lineEnding');
+            return before;
+        }
+        if (code === codes.rightCurlyBrace && depth === 0) {
+            return close(code);
+        }
+        effects.enter('mdxTextExpressionChunk');
+        return inside(code);
+    }
+    function inside(code) {
+        if (code === codes.eof || markdownLineEnding(code)) {
+            effects.exit('mdxTextExpressionChunk');
+            return before(code);
+        }
+        if (code === codes.rightCurlyBrace && depth === 0) {
+            effects.exit('mdxTextExpressionChunk');
+            return close(code);
+        }
+        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 mdxExpressionLenient() {
+    return {
+        text: {
+            [codes.leftCurlyBrace]: {
+                name: 'mdxTextExpression',
+                tokenize: tokenizeTextExpression,
+            },
+        },
+    };
+}
+
 ;// ./lib/utils/mdxish/mdxish-load-components.ts
 
 
@@ -125667,6 +125863,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -125682,7 +125879,7 @@ const defaultTransformers = [
  * 1. Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
  * 2. Terminate HTML flow blocks so subsequent content isn't swallowed
  * 3. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
- * 4. Escape problematic braces so MDX expression parsing doesn't choke
+ * 4. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
  * 5. Replace snake_case component names with parser-safe placeholders
  */
 function preprocessContent(content, opts) {
@@ -125691,7 +125888,6 @@ function preprocessContent(content, opts) {
     result = terminateHtmlFlowBlocks(result);
     result = closeSelfClosingHtmlTags(result);
     result = normalizeCompactHeadings(result);
-    result = preprocessJSXExpressions(result);
     return processSnakeCaseComponent(result, { knownComponents });
 }
 function mdxishAstProcessor(mdContent, opts = {}) {
@@ -125708,12 +125904,8 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         acc[key] = String(value);
         return acc;
     }, {});
-    // Get mdxExpression extension and remove its flow construct to prevent
-    // `{...}` from interrupting paragraphs (which breaks multiline magic blocks)
-    const mdxExprExt = syntax_mdxExpression({ allowEmpty: true });
-    const mdxExprTextOnly = {
-        text: mdxExprExt.text,
-    };
+    // Parser extension for MDX expressions {}
+    const mdxExprTextOnly = mdxExpressionLenient();
     const micromarkExts = [
         syntax_jsxTable(),
         syntax_magicBlock(),
@@ -125822,6 +126014,7 @@ function mdxish_mdxish(mdContent, opts = {}) {
         .use(safeMode ? undefined : evaluate_exports) // Evaluate `export const/function` and stash scope on file.data.mdxishScope
         .use(remarkBreaks) // 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_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(lib_remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
         .use(preserveBooleanProperties) // RehypeRaw converts boolean properties to empty strings