@readme/markdown 14.11.3 → 14.11.4

package/dist/render-fixture.node.js

@@ -68490,6 +68490,21 @@ function evaluate(source, scope = {}) {
     // eslint-disable-next-line no-new-func
     return new Function(...names, `return (${source})`)(...values);
 }
+/**
+ * Advance a `Point` by the `consumed` substring that follows it, returning the
+ * point at the consumed string's end. Lets split-out sub-nodes carry accurate
+ * document positions so downstream offset shifting stays correct.
+ */
+const pointAfter = (start, consumed) => {
+    const newlineIndex = consumed.lastIndexOf('\n');
+    const newlineCount = newlineIndex === -1 ? 0 : consumed.split('\n').length - 1;
+    return {
+        line: start.line + newlineCount,
+        // Same line → advance the base column; a later line → column is the run since its newline.
+        column: newlineCount === 0 ? start.column + consumed.length : consumed.length - newlineIndex,
+        offset: (start.offset ?? 0) + consumed.length,
+    };
+};
 /**
  * Formats the hProperties of a node as a string, so they can be compiled back into JSX/MDX.
  * This currently sets all the values to a string since we process/compile the MDX on the fly
@@ -92168,10 +92183,10 @@ const Tabs = ({ children }) => {
     const tabs = external_react_default().Children.toArray(children);
     return (external_react_default().createElement("div", { className: "TabGroup" },
         external_react_default().createElement("header", null,
-            external_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_react_default().createElement("button", { key: tab.props.title, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
+            external_react_default().createElement("nav", { className: "TabGroup-nav" }, tabs.map((tab, index) => (external_react_default().createElement("button", { key: tab.key, className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, onClick: () => setActiveTab(index) },
                 tab.props.icon && (external_react_default().createElement(components_Icon, { className: "TabGroup-icon", icon: tab.props.icon, iconColor: tab.props.iconColor })),
                 tab.props.title))))),
-        external_react_default().createElement("section", null, tabs[activeTab])));
+        external_react_default().createElement("section", null, tabs.map((tab, index) => (external_react_default().createElement("div", { key: tab.key, hidden: index !== activeTab }, tab))))));
 };
 /* harmony default export */ const components_Tabs = (Tabs);
 
@@ -95970,6 +95985,108 @@ const applyInserts = (html, inserts) => {
     return { value: out + html.slice(cursor), inserts: sorted };
 };
 
+;// ./processor/transform/mdxish/tables/escape-crossing-emphasis.ts
+
+
+
+// Maximal run of a single emphasis delimiter (`_`, `*`, `**`, `***`, …).
+const EMPHASIS_RUN_RE = /([*_])\1*/g;
+// String bounds (undefined) count as whitespace, not punctuation, per the
+// CommonMark flanking definition.
+const escape_crossing_emphasis_isWhitespace = (ch) => ch === undefined || unicodeWhitespace(ch.charCodeAt(0));
+const isPunctuation = (ch) => ch !== undefined && unicodePunctuation(ch.charCodeAt(0));
+/**
+ * Whether a delimiter run can open and/or close emphasis, per CommonMark's
+ * left/right-flanking rules. The extra `_` conditions forbid intraword
+ * emphasis, which keeps `snake_case` from being treated as a delimiter.
+ */
+const analyzeFlanking = (source, char, start, end) => {
+    const before = source[start - 1];
+    const after = source[end];
+    const leftFlanking = !escape_crossing_emphasis_isWhitespace(after) && (!isPunctuation(after) || escape_crossing_emphasis_isWhitespace(before) || isPunctuation(before));
+    const rightFlanking = !escape_crossing_emphasis_isWhitespace(before) && (!isPunctuation(before) || escape_crossing_emphasis_isWhitespace(after) || isPunctuation(after));
+    if (char === '_') {
+        return {
+            canOpen: leftFlanking && (!rightFlanking || isPunctuation(before)),
+            canClose: rightFlanking && (!leftFlanking || isPunctuation(after)),
+        };
+    }
+    return { canOpen: leftFlanking, canClose: rightFlanking };
+};
+/**
+ * Collect HTML tag boundaries (via htmlparser2) and emphasis delimiter runs
+ * (via regex over the masked source, so code spans and escaped `<` are skipped)
+ * into one list ordered by position. At a shared offset a tag opener sorts
+ * before a closer, so a self-closing tag brackets rather than swallows a run.
+ */
+const collectEvents = (html) => {
+    const masked = maskNonTagRegions(html);
+    const events = [];
+    walkTags(html, {
+        onOpen: ({ start }) => events.push({ kind: 'tagOpen', offset: start }),
+        onClose: ({ start }) => events.push({ kind: 'tagClose', offset: start }),
+    });
+    EMPHASIS_RUN_RE.lastIndex = 0;
+    let match;
+    while ((match = EMPHASIS_RUN_RE.exec(masked)) !== null) {
+        const [run, char] = match;
+        const start = match.index;
+        // eslint-disable-next-line no-continue
+        if (html[start - 1] === '\\')
+            continue; // already escaped
+        events.push({ kind: 'emphasis', offset: start, char, length: run.length, flanking: analyzeFlanking(html, char, start, start + run.length) });
+    }
+    return events.sort((a, b) => a.offset - b.offset || (a.kind === 'tagClose' ? 1 : 0) - (b.kind === 'tagClose' ? 1 : 0));
+};
+/**
+ * mdxjs rejects a table when a markdown emphasis run opens at one HTML
+ * tag-nesting depth and closes at another — e.g. `_<ul><li>text_</li></ul>`,
+ * where the `_` opens outside the list but closes inside a `<li>`. It throws
+ * "Expected a closing tag for `<li>` before the end of `emphasis`" and the
+ * whole `<Table>` fails to parse.
+ *
+ * We walk tags and emphasis together, tracking tag depth and a stack of open
+ * emphasis. A delimiter only closes an opener at the same depth; any emphasis
+ * still open when its enclosing tag closes (or at end of input), and any closer
+ * with no same-depth opener, is escaped so mdxjs treats it as literal text.
+ * Scoped to the malformed-retry path.
+ */
+const escapeCrossingEmphasis = (html) => {
+    const open = [];
+    const orphans = [];
+    let depth = 0;
+    collectEvents(html).forEach(event => {
+        if (event.kind === 'tagOpen') {
+            depth += 1;
+            return;
+        }
+        if (event.kind === 'tagClose') {
+            depth -= 1;
+            // Emphasis opened deeper than the surviving depth was inside the tag that
+            // just closed, so it crosses the boundary.
+            while (open.length > 0 && open[open.length - 1].depth > depth) {
+                const crossed = open.pop();
+                if (crossed)
+                    orphans.push(crossed);
+            }
+            return;
+        }
+        const top = open[open.length - 1];
+        if (event.flanking.canClose && top?.char === event.char && top.depth === depth) {
+            open.pop();
+        }
+        else if (event.flanking.canOpen) {
+            open.push({ char: event.char, depth, offset: event.offset, length: event.length });
+        }
+        else if (event.flanking.canClose) {
+            orphans.push({ offset: event.offset, length: event.length });
+        }
+    });
+    orphans.push(...open); // anything still open never closed
+    const inserts = orphans.flatMap(({ offset, length }) => Array.from({ length }, (_unused, i) => ({ offset: offset + i, text: '\\' })));
+    return applyInserts(html, inserts);
+};
+
 ;// ./processor/transform/mdxish/tables/escape-stray-less-than.ts
 
 
@@ -96122,6 +96239,21 @@ const buildOffsetMapper = (inserts) => {
         return repaired - shift;
     };
 };
+/**
+ * Compose the per-repair offset mappers into one that maps an offset in the
+ * fully-repaired string back to the original. `layers` are in application
+ * order; each maps its own output space to its input space, so we apply them
+ * last-repair-first to peel every edit back to the original coordinates.
+ */
+const composeOffsetMapper = (layers) => {
+    const mappers = layers.map(buildOffsetMapper);
+    return (repaired) => {
+        let offset = repaired;
+        for (let i = mappers.length - 1; i >= 0; i -= 1)
+            offset = mappers[i](offset);
+        return offset;
+    };
+};
 /**
  * Map an offset in `source` to its 1-based `{ line, column }`. `lineStarts`
  * is the precomputed array of offsets where each line begins.
@@ -96149,14 +96281,11 @@ const computeLineStarts = (source) => {
 };
 /**
  * Walk `tree`, translating every node's position from the repaired source's
- * coordinate space back to the original source. Offsets are remapped via the
- * insert list; line/column are recomputed from the original source so they
- * remain accurate even if repairs introduced newlines.
+ * coordinate space back to the original source via `mapOffset`. Line/column
+ * are recomputed from the original source so they remain accurate even if
+ * repairs introduced newlines.
  */
-const remapPositionsToOriginal = (tree, originalSource, inserts) => {
-    if (inserts.length === 0)
-        return;
-    const mapOffset = buildOffsetMapper(inserts);
+const remapWithMapper = (tree, originalSource, mapOffset) => {
     const lineStarts = computeLineStarts(originalSource);
     lib_visit(tree, child => {
         if (child.position?.start) {
@@ -96175,6 +96304,15 @@ const remapPositionsToOriginal = (tree, originalSource, inserts) => {
         }
     });
 };
+/**
+ * Remap positions produced after a chain of repairs (each applied to the prior
+ * one's output) back to the original source coordinates.
+ */
+const remapPositionsThroughLayers = (tree, originalSource, layers) => {
+    if (layers.length === 0)
+        return;
+    remapWithMapper(tree, originalSource, composeOffsetMapper(layers));
+};
 
 ;// ./processor/transform/mdxish/tables/repair-expression-escapes.ts
 
@@ -96474,6 +96612,83 @@ const repairUnclosedTags = (html) => {
     return applyInserts(html, inserts);
 };
 
+;// ./processor/transform/mdxish/tables/split-nested-tables.ts
+
+
+const TOP_LEVEL_TABLE_TAG_RE = /^<(?:table|Table)(?=[\s/>])/;
+/**
+ * Find every balanced, depth-matched `<table>…</table>` range in an html string.
+ * Uses `walkTags` so `<table>`s inside code spans / fenced blocks (masked away)
+ * are never matched.
+ *
+ * Note: An implicitly-closed table (no `</table>`, so htmlparser2 synthesizes the
+ * close at a later tag) is skipped: splitting there would swallow whatever
+ * followed the table into the fragment and drop it, so we leave such a node
+ * whole for downstream raw-HTML handling instead.
+ */
+const findTableRanges = (html) => {
+    const ranges = [];
+    let depth = 0;
+    let start = 0;
+    walkTags(html, {
+        onOpen: ({ name, start: openStart, isStrayCloser }) => {
+            if (name.toLowerCase() !== 'table' || isStrayCloser)
+                return;
+            if (depth === 0)
+                start = openStart;
+            depth += 1;
+        },
+        onClose: ({ name, end, implicit }) => {
+            if (implicit || name.toLowerCase() !== 'table' || depth === 0)
+                return;
+            depth -= 1;
+            if (depth === 0)
+                ranges.push({ start, end });
+        },
+    });
+    return ranges;
+};
+/**
+ * Given an HTML node that might contain table sequences inside it, split
+ * the node based on the table boundaries so they become a top level node.
+ *
+ * The surrounding raw HTML (the wrapper's open/close tags) would be re-nested
+ * around the parsed tables by rehype-raw.
+ *
+ * Returns null when there is no wrapped table to extract.
+ */
+const splitHtmlWithNestedTables = (node) => {
+    const { value } = node;
+    // This is a top-level table, so we don't need to split it
+    if (TOP_LEVEL_TABLE_TAG_RE.test(value))
+        return null;
+    // No table text anywhere in the value → skip the htmlparser2 walk entirely.
+    if (!/<\/?table/i.test(value))
+        return null;
+    const ranges = findTableRanges(value);
+    if (ranges.length === 0)
+        return null;
+    const base = node.position?.start;
+    const sliceToHtml = (from, to) => ({
+        type: 'html',
+        value: value.slice(from, to),
+        ...(base && {
+            position: { start: pointAfter(base, value.slice(0, from)), end: pointAfter(base, value.slice(0, to)) },
+        }),
+    });
+    const parts = [];
+    let cursor = 0;
+    ranges.forEach(({ start, end }) => {
+        if (start > cursor)
+            parts.push(sliceToHtml(cursor, start));
+        parts.push(sliceToHtml(start, end)); // starts with `<table` → picked up by the main pass
+        cursor = end;
+    });
+    if (cursor < value.length)
+        parts.push(sliceToHtml(cursor, value.length));
+    return parts;
+};
+
 ;// ./processor/transform/mdxish/tables/mdxish-tables.ts
 
 
@@ -96495,6 +96710,8 @@ const repairUnclosedTags = (html) => {
 
 
 
+
+
 
 
 
@@ -96524,6 +96741,21 @@ const buildTableNodeProcessor = (withMdx) => lib_unified()
     .use(lib_remarkGfm);
 const tableNodeProcessor = buildTableNodeProcessor(true);
 const fallbackTableNodeProcessor = buildTableNodeProcessor(false);
+// Targeted repairs for tables mdxjs rejects, tried cumulatively (each runs on
+// the prior's output) since one table can carry independent per-cell defects.
+// Each was added after seeing real customer content fail to parse:
+//  - repairUnclosedTags:      unclosed/orphan HTML tags
+//  - normalizeTagSpacing:     a line mixing text and an opening tag
+//  - repairExpressionEscapes: backslash escapes inside a `{…}` expression
+//  - escapeStrayLessThan:     a `<` that doesn't begin a valid tag (`word <`)
+//  - escapeCrossingEmphasis:  emphasis opening/closing at different tag depths
+const tableRepairs = [
+    repairUnclosedTags,
+    normalizeTagSpacing,
+    repairExpressionEscapes,
+    escapeStrayLessThan,
+    escapeCrossingEmphasis,
+];
 /**
  * Parse the HTML node that contains the full table substring
  * into the table parts (headers, rows, cells).
@@ -96539,10 +96771,10 @@ const parseTableNode = (processor, node, repair) => {
         return undefined;
     }
     // If `node.value` was repaired before parsing, first remap positions back to
-    // the original (unrepaired) coordinates via the insert list — otherwise the
+    // the original (unrepaired) coordinates via the insert layers — otherwise the
     // shift would land on synthetic characters and be inaccurate
     if (repair) {
-        remapPositionsToOriginal(parsed, repair.originalSource, repair.inserts);
+        remapPositionsThroughLayers(parsed, repair.originalSource, repair.layers);
     }
     // The subparser produces positions relative to `node.value`; shift them by
     // the outer node's offset/line so consumers can slice the full source.
@@ -96639,9 +96871,7 @@ const processTableNode = (node, index, parent, documentPosition) => {
     lib_visit(node, utils_isMDXElement, (child) => {
         if (child.name === 'thead')
             hasThead = true;
-        if (tableTags.has(child.name) &&
-            Array.isArray(child.attributes) &&
-            child.attributes.length > 0) {
+        if (tableTags.has(child.name) && Array.isArray(child.attributes) && child.attributes.length > 0) {
             hasStructuralAttributes = true;
         }
     });
@@ -96752,6 +96982,26 @@ const processTableNode = (node, index, parent, documentPosition) => {
     };
     parent.children[index] = mdNode;
 };
+/**
+ * Apply `tableRepairs` cumulatively, re-parsing after every change and stopping
+ * once the accumulated result parses. Each layer's inserts are relative to the
+ * string that repair received, so they stay ordered for position remapping.
+ */
+const repairAndReparse = (node) => {
+    let repairedValue = node.value;
+    const layers = [];
+    let parsed;
+    tableRepairs.some(repair => {
+        const { value, inserts } = repair(repairedValue);
+        if (value === repairedValue)
+            return false;
+        repairedValue = value;
+        layers.push(inserts);
+        parsed = parseTableNode(tableNodeProcessor, { ...node, value: repairedValue }, { layers, originalSource: node.value });
+        return Boolean(parsed);
+    });
+    return parsed;
+};
 /**
  * Converts JSX Table elements to markdown table nodes and re-parses markdown in cells.
  *
@@ -96764,42 +97014,30 @@ const processTableNode = (node, index, parent, documentPosition) => {
  * is kept as a JSX <Table> element so that remarkRehype can properly handle the flow content.
  */
 const mdxish_tables_mdxishTables = () => tree => {
+    // Pre-pass: lift `<table>`s wrapped in a raw HTML block out into their own
+    // html nodes so the main pass below treats them like top-level tables.
+    lib_visit(tree, 'html', (_node, index, parent) => {
+        const node = _node;
+        if (typeof index !== 'number' || !parent || !('children' in parent))
+            return;
+        const parts = splitHtmlWithNestedTables(node);
+        if (!parts)
+            return;
+        // The inserted parts can't re-trigger a split (table parts start with
+        // `<table`; the wrapper slices hold no table), so plain in-place splicing
+        // visits each once without looping.
+        parent.children.splice(index, 1, ...parts);
+    });
     lib_visit(tree, 'html', (_node, index, parent) => {
         const node = _node;
         if (typeof index !== 'number' || !parent || !('children' in parent))
             return;
         if (!node.value.startsWith('<Table') && !node.value.startsWith('<table'))
             return;
-        // Main logic to transform table node to its parts
         // Because the processor uses remarkMdx, it is stricter in what it accepts
-        // and only accepts valid MDX syntax. in the table node.
-        // To get around that, we have some fallback logics after trying to repair the table content.
-        let parsed = parseTableNode(tableNodeProcessor, node);
-        if (!parsed) {
-            // Try a sequence of targeted repairs and re-parse
-            // after each, stopping at the first that yields a parseable tree:
-            //  - repairUnclosedTags:       unclosed/orphan HTML tags
-            //  - normalizeTagSpacing:      a line mixing text and an opening tag
-            //                              (e.g. `text <div> \n <div> text`)
-            //  - repairExpressionEscapes:  backslash escapes inside a `{…}` expression
-            //  - escapeStrayLessThan:      a `<` that doesn't begin a valid tag
-            //                              (e.g. `word <`, `a <1>`)
-            // These repairs are created after seeing real customer content that has failed to parse
-            const repairs = [
-                repairUnclosedTags,
-                normalizeTagSpacing,
-                repairExpressionEscapes,
-                escapeStrayLessThan,
-            ];
-            // Stops at the first repair that yields a parseable tree
-            repairs.some(repair => {
-                const { value, inserts } = repair(node.value);
-                if (value !== node.value) {
-                    parsed = parseTableNode(tableNodeProcessor, { ...node, value }, { inserts, originalSource: node.value });
-                }
-                return Boolean(parsed);
-            });
-        }
+        // and only accepts valid MDX syntax in the table node. To get around that,
+        // fall back to the cumulative repairs when the first parse fails.
+        const parsed = parseTableNode(tableNodeProcessor, node) ?? repairAndReparse(node);
         if (parsed) {
             // If the table is parsed successfully, we can now process it further
             // to build on the markdown / JSX table
@@ -117668,11 +117906,10 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
 ;// ./processor/plugin/mdxish-handlers.ts
 
 
-// Convert MDX expressions to text nodes (evaluation happens earlier in pipeline)
-const mdxExpressionHandler = (_state, node) => ({
-    type: 'text',
-    value: node.value || '',
-});
+// If hChildren is populated, it means the node holds a renderable value (e.g. React)
+// See evaluate-expressions.ts for more details
+// Otherwise, it's a simple value and we fall back to text
+const mdxExpressionHandler = (_state, node) => node.data?.hChildren ?? { type: 'text', value: node.value || '' };
 // Convert MDX JSX elements to a custom mdx-jsx hast node that bypasses rehypeRaw's
 // HTML serialization round-trip; downstream normalization rewrites it to `element`.
 const mdxJsxElementHandler = (state, node) => {
@@ -120739,6 +120976,7 @@ const mdxishInlineMdxComponents = () => tree => {
 
 
 
+
 /** Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
 const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
 /**
@@ -120782,18 +121020,6 @@ const parseSibling = (stack, parent, index, sibling, safeMode) => {
         stack.push(parent);
     }
 };
-/**
- * Advance a point by the substring of source consumed from it.
- */
-const pointAfter = (start, consumed) => {
-    const newlineIndex = consumed.lastIndexOf('\n');
-    const newlineCount = newlineIndex === -1 ? 0 : consumed.split('\n').length - 1;
-    return {
-        line: start.line + newlineCount,
-        column: newlineCount === 0 ? start.column + consumed.length : consumed.length - newlineIndex,
-        offset: start.offset + consumed.length,
-    };
-};
 /**
  * Build a position ending at `consumedLength` into the html node's value, so the
  * component doesn't claim trailing content the tokenizer swallowed into one node.
@@ -121341,26 +121567,183 @@ const evalExpression = (expression, scope) => {
     return evalJsxProgram(program, scope);
 };
 
-;// ./processor/transform/mdxish/evaluate-expressions.ts
+;// ./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_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/react-element-to-hast.ts
 
 
-/** 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 };
+
+// React props that never map to an HTML/hast attribute.
+const RESERVED_PROPS = new Set(['children', 'key', 'ref']);
+/**
+ * Translate React props into hast `properties`: reserved and function props (event handlers)
+ * are dropped (known gap), `style` objects flatten to CSS text. Names stay as authored (`className`); the
+ * hast → HTML boundary maps them to `class`/`for` downstream.
+ */
+function propsToHastProperties(props) {
+    const properties = {};
+    Object.entries(props).forEach(([key, value]) => {
+        if (RESERVED_PROPS.has(key) || typeof value === 'function' || value === undefined)
+            return;
+        properties[key] = key === 'style' && style_object_to_css_isPlainObject(value) ? styleObjectToCssText(value) : value;
+    });
+    // Values are resolved React props, wider than hast's HTML-attribute `PropertyValue` union.
+    return properties;
+}
+/**
+ * Render an element with React's own renderer as a last resort, wrapped as a hast `raw` node —
+ * the same node type markdown's literal HTML blocks produce, so it re-enters rehypeRaw's
+ * parse5 pass normally. Used for element types this converter can't resolve on its own (wrapped
+ * component types, or a function component that throws when called outside React, e.g. one
+ * using hooks). It's not immune to the invalid-HTML-nesting this module otherwise avoids, but
+ * that's a fair trade against silently dropping the content.
+ */
+function renderFallbackHtml(element) {
+    try {
+        const rawNode = { type: 'raw', value: (0,server_node/* renderToStaticMarkup */.qV)(element) };
+        return [rawNode];
     }
-    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 };
+    catch {
+        return [];
     }
-    else if (typeof result === 'object') {
-        return { type: 'text', value: JSON.stringify(result), position };
+}
+/**
+ * Convert a React element tree into hast. Emitting `mdx-jsx` nodes (rehypeRaw passthrough, later normalized to `element`)
+ * preserves nesting that is valid JSX but not valid HTML, which parse5 would otherwise
+ * restructure — e.g. an `<a>` wrapping another `<a>`.
+ * Recursively converts the tree into an array of hast nodes, dealing with arrays and null/undefined/boolean values.
+ */
+function reactElementToHast(node) {
+    if (Array.isArray(node))
+        return node.flatMap(reactElementToHast);
+    if (node === null || node === undefined || typeof node === 'boolean')
+        return [];
+    if (typeof node === 'string' || typeof node === 'number') {
+        const textNode = { type: 'text', value: String(node) };
+        return [textNode];
+    }
+    if (!external_react_default().isValidElement(node))
+        return [];
+    const { type, props } = node;
+    // Fragments contribute their children with no wrapper element.
+    if (type === (external_react_default()).Fragment)
+        return reactElementToHast(props.children);
+    // Resolve function components to their rendered output so the tree is plain intrinsic
+    // elements. If invoking it directly throws (e.g. it uses hooks, which need React's own
+    // render context), fall back to React's renderer for just this subtree.
+    if (typeof type === 'function') {
+        try {
+            return reactElementToHast(type(props));
+        }
+        catch {
+            return renderFallbackHtml(node);
+        }
     }
+    // Non-intrinsic, non-callable element types — `React.memo`, `React.forwardRef`,
+    // `Context.Provider`/`Consumer`, `React.lazy` — have no `type` we can resolve ourselves.
+    if (typeof type !== 'string')
+        return renderFallbackHtml(node);
+    const mdxJsxNode = {
+        type: 'mdx-jsx',
+        tagName: type,
+        properties: propsToHastProperties(props),
+        children: reactElementToHast(props.children),
+    };
+    return [mdxJsxNode];
+}
+
+;// ./processor/transform/mdxish/evaluate-expressions.ts
+
+
+
+
+/**
+ * We divide the result of an expression into two categories:
+ * 1. Renderable values: HTML, JSX, e.g. .map() returning JSX
+ * 2. Non-renderable values: a string, number, or object, regular JS values
+ */
+const isRenderable = (value) => {
+    if (external_react_default().isValidElement(value))
+        return true;
+    return Array.isArray(value) && value.some(isRenderable);
+};
+/** Turn a non-renderable evaluation result into a text node. */
+const createTextNode = (result, position) => {
+    if (result === null || result === undefined)
+        return { type: 'text', value: '', position };
+    if (typeof result === 'object')
+        return { type: 'text', value: JSON.stringify(result), position };
     return { type: 'text', value: String(result), position };
 };
 /**
@@ -121376,13 +121759,23 @@ const evaluateExpressions = () => (tree, file) => {
     lib_visit(tree, ['mdxFlowExpression', 'mdxTextExpression'], (node, index, parent) => {
         if (!parent || index === null || index === undefined)
             return;
-        const { value, position } = node;
+        const expressionNode = node;
+        const { value, position } = expressionNode;
         const expression = value?.trim();
         if (!expression)
             return;
         try {
             const result = evalExpression(expression, scope);
-            parent.children.splice(index, 1, createEvaluatedNode(result, position));
+            if (isRenderable(result)) {
+                // Stash hast built straight from the React tree; `mdxExpressionHandler` emits it and it 
+                // 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) };
+            }
+            else {
+                parent.children.splice(index, 1, createTextNode(result, position));
+            }
         }
         catch (_error) {
             // Evaluation failed — fall back to literal `{...}` text. The expression
@@ -124713,79 +125106,6 @@ 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_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