@readme/markdown 14.11.0 → 14.11.2

package/components/TableOfContents/index.tsx

@@ -83,6 +83,34 @@ function useScrollHighlight(navRef: React.RefObject<HTMLElement | null>) {
         && scrollParent.scrollTop + scrollParent.clientHeight >= scrollParent.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
     };
 
+    /**
+     * Keeps the active link visible within the TOC's own scroll container —
+     * the same result as `scrollIntoView({ block: 'nearest' })`, but scoped to
+     * a single scroller. `scrollIntoView` adjusts *every* scrollable ancestor,
+     * and starting a scroll on the page's content scroller cancels any
+     * in-flight smooth scroll there — e.g. the hub's scroll-to-top reset when
+     * navigating between pages (CX-3667).
+     */
+    const scrollTOCLinkIntoView = (link: HTMLAnchorElement) => {
+      const tocScroller = getScrollParent(link);
+      // Without a TOC-local scroll area, the link's nearest scrollable
+      // ancestor is the window (`getScrollParent`'s fallback) or the scroller
+      // holding the page content — never auto-scroll those just to reveal a
+      // TOC link.
+      if (!(tocScroller instanceof HTMLElement) || tocScroller.contains(headings[0])) return;
+
+      const scrollerRect = tocScroller.getBoundingClientRect();
+      const linkRect = link.getBoundingClientRect();
+      if (linkRect.top < scrollerRect.top) {
+        tocScroller.scrollTo?.({ top: tocScroller.scrollTop + (linkRect.top - scrollerRect.top), behavior: 'smooth' });
+      } else if (linkRect.bottom > scrollerRect.bottom) {
+        tocScroller.scrollTo?.({
+          top: tocScroller.scrollTop + (linkRect.bottom - scrollerRect.bottom),
+          behavior: 'smooth',
+        });
+      }
+    };
+
     const activate = (id: string | null) => {
       if (id === activeId) return;
       if (activeId) linkMap.get(activeId)?.forEach(a => a.classList.remove('active'));
@@ -100,7 +128,7 @@ function useScrollHighlight(navRef: React.RefObject<HTMLElement | null>) {
           nav.style.setProperty('--ToC-border-active-height', `${linkRect.height}px`);
           nav.style.setProperty('--ToC-border-active-top', `${linkRect.top - navRect.top}px`);
 
-          link.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
+          scrollTOCLinkIntoView(link);
         }
       }
     };

package/dist/main.js

@@ -12484,6 +12484,34 @@ function useScrollHighlight(navRef) {
             return scrollParent.scrollHeight > scrollParent.clientHeight
                 && scrollParent.scrollTop + scrollParent.clientHeight >= scrollParent.scrollHeight - SCROLL_BOTTOM_TOLERANCE;
         };
+        /**
+         * Keeps the active link visible within the TOC's own scroll container —
+         * the same result as `scrollIntoView({ block: 'nearest' })`, but scoped to
+         * a single scroller. `scrollIntoView` adjusts *every* scrollable ancestor,
+         * and starting a scroll on the page's content scroller cancels any
+         * in-flight smooth scroll there — e.g. the hub's scroll-to-top reset when
+         * navigating between pages (CX-3667).
+         */
+        const scrollTOCLinkIntoView = (link) => {
+            const tocScroller = getScrollParent(link);
+            // Without a TOC-local scroll area, the link's nearest scrollable
+            // ancestor is the window (`getScrollParent`'s fallback) or the scroller
+            // holding the page content — never auto-scroll those just to reveal a
+            // TOC link.
+            if (!(tocScroller instanceof HTMLElement) || tocScroller.contains(headings[0]))
+                return;
+            const scrollerRect = tocScroller.getBoundingClientRect();
+            const linkRect = link.getBoundingClientRect();
+            if (linkRect.top < scrollerRect.top) {
+                tocScroller.scrollTo?.({ top: tocScroller.scrollTop + (linkRect.top - scrollerRect.top), behavior: 'smooth' });
+            }
+            else if (linkRect.bottom > scrollerRect.bottom) {
+                tocScroller.scrollTo?.({
+                    top: tocScroller.scrollTop + (linkRect.bottom - scrollerRect.bottom),
+                    behavior: 'smooth',
+                });
+            }
+        };
         const activate = (id) => {
             if (id === activeId)
                 return;
@@ -12500,7 +12528,7 @@ function useScrollHighlight(navRef) {
                     const linkRect = link.getBoundingClientRect();
                     nav.style.setProperty('--ToC-border-active-height', `${linkRect.height}px`);
                     nav.style.setProperty('--ToC-border-active-top', `${linkRect.top - navRect.top}px`);
-                    link.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
+                    scrollTOCLinkIntoView(link);
                 }
             }
         };
@@ -75719,6 +75747,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).
@@ -75730,12 +75770,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
@@ -76085,6 +76120,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.
  *
@@ -76396,18 +76448,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()));
         visit(node, 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,
@@ -100797,15 +100848,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) {
@@ -100860,6 +100922,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;
@@ -101093,8 +101159,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;
@@ -101244,6 +101315,7 @@ function createTokenize(mode) {
             if (atLineStart && codeSpanOpenSize >= 3) {
                 fenceChar = codes.graveAccent;
                 fenceLength = codeSpanOpenSize;
+                atLineStart = false;
                 return inFencedCode(code);
             }
             return inCodeSpan(code);
@@ -101391,8 +101463,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;
@@ -101481,6 +101559,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');
@@ -101492,19 +101574,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) {
@@ -101535,6 +101650,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.
  *
@@ -101781,6 +101936,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).
@@ -101940,10 +102097,16 @@ const 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
@@ -102382,15 +102545,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_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_browser/* renderToStaticMarkup */.qV)(result), position };
+    else if (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_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_browser/* renderToStaticMarkup */.qV)(external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement((external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment, null, result)), position };
     }
     else if (typeof result === 'object') {
         return { type: 'text', value: JSON.stringify(result), position };
@@ -102430,6 +102595,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_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()) };
+    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
 
 
@@ -104286,10 +104492,84 @@ function removeJSXComments(content) {
     return content.replace(JSX_COMMENT_REGEX, '');
 }
 
+;// ./processor/transform/mdxish/style-object-to-css.ts
+
+/**
+ * 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
+ */
+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}`;
+/**
+ * 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.
+ */
+const style_object_to_css_isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value) && !external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(value);
+/**
+ * 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.
+ */
+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.
  *
@@ -104311,7 +104591,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
@@ -104631,13 +104914,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'),
@@ -105435,6 +105718,7 @@ function loadComponents() {
 
 
 
+
 
 
 const defaultTransformers = [
@@ -105585,6 +105869,7 @@ function 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(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
         .use(preserveBooleanProperties) // RehypeRaw converts boolean properties to empty strings