@readme/markdown 11.15.0 → 12.0.0

package/dist/main.js

@@ -52943,12 +52943,40 @@ const plain = (node, opts = {}) => {
 };
 /* harmony default export */ const lib_plain = (plain);
 
+;// ./processor/transform/extract-text.ts
+/**
+ * Extracts text content from a single AST node recursively.
+ * Works with both MDAST and HAST-like node structures.
+ *
+ * Placed this outside of the utils.ts file to avoid circular dependencies.
+ *
+ * @param node - The node to extract text from (can be MDAST Node or HAST-like structure)
+ * @returns The concatenated text content
+ */
+const extractText = (node) => {
+    if (node.type === 'text' && typeof node.value === 'string') {
+        return node.value;
+    }
+    if (node.children && Array.isArray(node.children)) {
+        return node.children
+            .map(child => {
+            if (child && typeof child === 'object' && 'type' in child) {
+                return extractText(child);
+            }
+            return '';
+        })
+            .join('');
+    }
+    return '';
+};
+
 ;// ./processor/transform/callouts.ts
 
 
 
 
 
+
 const callouts_regex = `^(${emoji_regex().source}|⚠)(\\s+|$)`;
 const findFirst = (node) => {
     if ('children' in node)
@@ -52969,42 +52997,76 @@ const wrapHeading = (node) => {
         },
     };
 };
+/**
+ * Checks if a blockquote matches the expected callout structure:
+ * blockquote > paragraph > text node
+ */
+const isCalloutStructure = (node) => {
+    const firstChild = node.children?.[0];
+    if (!firstChild || firstChild.type !== 'paragraph')
+        return false;
+    if (!('children' in firstChild))
+        return false;
+    const firstTextChild = firstChild.children?.[0];
+    return firstTextChild?.type === 'text';
+};
+const processBlockquote = (node, index, parent) => {
+    if (!isCalloutStructure(node)) {
+        // Only stringify empty blockquotes (no extractable text content)
+        // Preserve blockquotes with actual content (e.g., headings, lists, etc.)
+        const content = extractText(node);
+        const isEmpty = !content || content.trim() === '';
+        if (isEmpty && index !== undefined && parent) {
+            const textNode = {
+                type: 'text',
+                value: '>',
+            };
+            const paragraphNode = {
+                type: 'paragraph',
+                children: [textNode],
+                position: node.position,
+            };
+            parent.children.splice(index, 1, paragraphNode);
+        }
+        return;
+    }
+    // isCalloutStructure ensures node.children[0] is a Paragraph with children
+    const firstParagraph = node.children[0];
+    const startText = lib_plain(firstParagraph).toString();
+    const [match, icon] = startText.match(callouts_regex) || [];
+    if (icon && match) {
+        const heading = startText.slice(match.length);
+        const empty = !heading.length && firstParagraph.children.length === 1;
+        const theme = themes[icon] || 'default';
+        const firstChild = findFirst(node.children[0]);
+        if (firstChild && 'value' in firstChild && typeof firstChild.value === 'string') {
+            firstChild.value = firstChild.value.slice(match.length);
+        }
+        if (heading) {
+            node.children[0] = wrapHeading(node);
+            // @note: We add to the offset/column the length of the unicode
+            // character that was stripped off, so that the start position of the
+            // heading/text matches where it actually starts.
+            node.children[0].position.start.offset += match.length;
+            node.children[0].position.start.column += match.length;
+        }
+        Object.assign(node, {
+            type: NodeTypes.callout,
+            data: {
+                hName: 'Callout',
+                hProperties: {
+                    icon,
+                    ...(empty && { empty }),
+                    theme,
+                },
+            },
+        });
+    }
+};
 const calloutTransformer = () => {
     return (tree) => {
-        visit(tree, 'blockquote', (node) => {
-            if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text'))
-                return;
-            // @ts-expect-error -- @todo: update plain to accept mdast
-            const startText = lib_plain(node.children[0]).toString();
-            const [match, icon] = startText.match(callouts_regex) || [];
-            if (icon && match) {
-                const heading = startText.slice(match.length);
-                const empty = !heading.length && node.children[0].children.length === 1;
-                const theme = themes[icon] || 'default';
-                const firstChild = findFirst(node.children[0]);
-                if (firstChild && 'value' in firstChild && typeof firstChild.value === 'string') {
-                    firstChild.value = firstChild.value.slice(match.length);
-                }
-                if (heading) {
-                    node.children[0] = wrapHeading(node);
-                    // @note: We add to the offset/column the length of the unicode
-                    // character that was stripped off, so that the start position of the
-                    // heading/text matches where it actually starts.
-                    node.children[0].position.start.offset += match.length;
-                    node.children[0].position.start.column += match.length;
-                }
-                Object.assign(node, {
-                    type: NodeTypes.callout,
-                    data: {
-                        hName: 'Callout',
-                        hProperties: {
-                            icon,
-                            ...(empty && { empty }),
-                            theme,
-                        },
-                    },
-                });
-            }
+        visit(tree, 'blockquote', (node, index, parent) => {
+            processBlockquote(node, index, parent);
         });
     };
 };
@@ -70670,6 +70732,17 @@ const parseTag = (value) => {
         contentAfterTag,
     };
 };
+/**
+ * Parse substring content of a node and update the parent's children to include the new nodes.
+ */
+const parseSibling = (stack, parent, index, sibling) => {
+    const siblingNodes = parseMdChildren(sibling);
+    // The new sibling nodes might contain new components to be processed
+    if (siblingNodes.length > 0) {
+        parent.children.splice(index + 1, 0, ...siblingNodes);
+        stack.push(parent);
+    }
+};
 /**
  * Create an MdxJsxFlowElement node from component data.
  */
@@ -70812,11 +70885,12 @@ const mdxishComponentBlocks = () => tree => {
         if ('children' in node && Array.isArray(node.children)) {
             stack.push(node);
         }
-        // Only visit HTML nodes with an actual html tag
+        // Only visit HTML nodes with an actual html tag,
+        // which means a potential unparsed MDX component
         const value = node.value;
         if (node.type !== 'html' || typeof value !== 'string')
             return;
-        const parsed = parseTag(value);
+        const parsed = parseTag(value.trim());
         if (!parsed)
             return;
         const { tag, attributes, selfClosing, contentAfterTag = '' } = parsed;
@@ -70833,11 +70907,19 @@ const mdxishComponentBlocks = () => tree => {
                 startPosition: node.position,
             });
             substituteNodeWithMdxNode(parent, index, componentNode);
+            // Check and parse if there's relevant content after the current closing tag
+            const remainingContent = contentAfterTag.trim();
+            if (remainingContent) {
+                parseSibling(stack, parent, index, remainingContent);
+            }
             return;
         }
         // Case 2: Self-contained block (closing tag in content)
         if (contentAfterTag.includes(closingTagStr)) {
-            const componentInnerContent = contentAfterTag.substring(0, contentAfterTag.lastIndexOf(closingTagStr)).trim();
+            // Find the first closing tag
+            const closingTagIndex = contentAfterTag.indexOf(closingTagStr);
+            const componentInnerContent = contentAfterTag.substring(0, closingTagIndex).trim();
+            const contentAfterClose = contentAfterTag.substring(closingTagIndex + closingTagStr.length).trim();
             const componentNode = createComponentNode({
                 tag,
                 attributes,
@@ -70845,6 +70927,14 @@ const mdxishComponentBlocks = () => tree => {
                 startPosition: node.position,
             });
             substituteNodeWithMdxNode(parent, index, componentNode);
+            // After the closing tag, there might be more content to be processed
+            if (contentAfterClose) {
+                parseSibling(stack, parent, index, contentAfterClose);
+            }
+            else if (componentNode.children.length > 0) {
+                // The content inside the component block might contain new components to be processed
+                stack.push(componentNode);
+            }
             return;
         }
         // Case 3: Multi-sibling component (closing tag in a following sibling)
@@ -70870,8 +70960,13 @@ const mdxishComponentBlocks = () => tree => {
         });
         // Remove all nodes from opening tag to closing tag (inclusive) and replace with component node
         parent.children.splice(index, closingIndex - index + 1, componentNode);
+        // Since we might be merging sibling nodes together and combining content,
+        // there might be new components to process
+        if (componentNode.children.length > 0) {
+            stack.push(componentNode);
+        }
     };
-    // Travel the tree depth-first
+    // Process the nodes with the components depth-first to maintain the correct order of the nodes
     while (stack.length) {
         const parent = stack.pop();
         if (parent?.children) {
@@ -70892,6 +70987,7 @@ const mdxishComponentBlocks = () => tree => {
 
 
 
+
 const isTableCell = (node) => isMDXElement(node) && ['th', 'td'].includes(node.name);
 const tableTypes = {
     tr: 'tableRow',
@@ -70916,18 +71012,13 @@ const isTextOnly = (children) => {
     });
 };
 /**
- * Extract text content from children nodes
+ * Convenience wrapper that extracts text content from an array of children nodes.
  */
-const extractText = (children) => {
+const extractTextFromChildren = (children) => {
     return children
         .map(child => {
         if (child && typeof child === 'object' && 'type' in child) {
-            if (child.type === 'text' && 'value' in child && typeof child.value === 'string') {
-                return child.value;
-            }
-            if (child.type === 'mdxJsxTextElement' && 'children' in child && Array.isArray(child.children)) {
-                return extractText(child.children);
-            }
+            return extractText(child);
         }
         return '';
     })
@@ -70958,7 +71049,7 @@ const processTableNode = (node, index, parent) => {
             let parsedChildren = cellChildren;
             // If cell contains only text nodes, try to re-parse as markdown
             if (isTextOnly(cellChildren)) {
-                const textContent = extractText(cellChildren);
+                const textContent = extractTextFromChildren(cellChildren);
                 if (textContent.trim()) {
                     try {
                         const parsed = parseMarkdown(textContent);
@@ -86373,7 +86464,7 @@ const CUSTOM_PROP_BOUNDARIES = [
 /**
  * Tags that should be passed through and handled at runtime (not by the mdxish plugin)
  */
-const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable']);
+const RUNTIME_COMPONENT_TAGS = new Set(['Variable', 'variable', 'rdme-pin']);
 /**
  * Standard HTML tags that should never be treated as custom components.
  * Uses the html-tags package, converted to a Set<string> for efficient lookups.
@@ -93004,6 +93095,33 @@ const INLINE_COMPONENT_TAGS = new Set(['anchor', 'glossary']);
 function isElementContentNode(node) {
     return node.type === 'element' || node.type === 'text' || node.type === 'comment';
 }
+/**
+ * Components are assumed to be block-level, so whitespace between them can be removed
+ * We want to remove them because it can be treated as actual children of the component
+ * when it doesn't need to.
+ *
+ * It can be a problem because it can be passed as args to the components, like the ones
+ * defined in /components, which can break the type assumptions of the components and cause
+ * type errors, accessing properties that don't exist.
+ */
+function areAllChildrenComponents(children) {
+    return children.every(child => {
+        // Whitespace-only text nodes don't affect the check
+        if (child.type === 'text' && !child.value.trim())
+            return true;
+        // Text with actual content means we have mixed content
+        if (child.type === 'text')
+            return false;
+        // Comments don't affect the check
+        if (child.type === 'comment')
+            return true;
+        // Standard HTML tags are not considered components
+        if (child.type === 'element' && 'tagName' in child) {
+            return !STANDARD_HTML_TAGS.has(child.tagName.toLowerCase());
+        }
+        return false;
+    });
+}
 /** Check if nodes represent a single paragraph with only text (no markdown formatting) */
 function isSingleParagraphTextNode(nodes) {
     return (nodes.length === 1 &&
@@ -93048,6 +93166,7 @@ function isActualHtmlTag(tagName, originalExcerpt) {
 function parseTextChildren(node, processMarkdown) {
     if (!node.children?.length)
         return;
+    // First pass: Recursively process text children as they may contain stringified markdown / mdx content
     node.children = node.children.flatMap(child => {
         if (child.type !== 'text' || !child.value.trim())
             return [child];
@@ -93059,6 +93178,15 @@ function parseTextChildren(node, processMarkdown) {
         }
         return children;
     });
+    // Post-processing: remove whitespace-only text nodes if all siblings are components
+    // This prevents whitespace between component children from being counted as extra children
+    if (areAllChildrenComponents(node.children)) {
+        node.children = node.children.filter(child => {
+            if (child.type === 'text' && !child.value.trim())
+                return false;
+            return true;
+        });
+    }
 }
 /** Convert node properties from kebab-case/lowercase to camelCase */
 function normalizeProperties(node) {
@@ -93121,6 +93249,15 @@ const mdxExpressionHandler = (_state, node) => ({
     type: 'text',
     value: node.value || '',
 });
+// Since we serialize component / html tag attributes
+function decodeHtmlEntities(value) {
+    return value
+        .replace(/&quot;/g, '"')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&#10;/g, '\n')
+        .replace(/&amp;/g, '&');
+}
 // Convert MDX JSX elements to HAST elements, preserving attributes and children
 const mdxJsxElementHandler = (state, node) => {
     const { attributes = [], name } = node;
@@ -93132,7 +93269,7 @@ const mdxJsxElementHandler = (state, node) => {
             properties[attribute.name] = true;
         }
         else if (typeof attribute.value === 'string') {
-            properties[attribute.name] = attribute.value;
+            properties[attribute.name] = decodeHtmlEntities(attribute.value);
         }
         else {
             properties[attribute.name] = attribute.value.value;
@@ -93194,6 +93331,17 @@ function base64Decode(str) {
     }
     return decodeURIComponent(escape(atob(str)));
 }
+function escapeHtmlAttribute(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\n/g, '&#10;');
+}
+// Marker prefix for JSON-serialized complex values (arrays/objects)
+// Using a prefix that won't conflict with regular string values
+const JSON_VALUE_MARKER = '__MDXISH_JSON__';
 // Markers for protected HTMLBlock content (HTML comments avoid markdown parsing issues)
 const HTML_BLOCK_CONTENT_START = '<!--RDMX_HTMLBLOCK:';
 const HTML_BLOCK_CONTENT_END = ':RDMX_HTMLBLOCK-->';
@@ -93323,6 +93471,16 @@ function extractBalancedBraces(content, start) {
         return null;
     return { content: content.slice(start, pos - 1), end: pos };
 }
+function restoreInlineCode(content, protectedCode) {
+    return content.replace(/___INLINE_CODE_(\d+)___/g, (_m, idx) => {
+        return protectedCode.inlineCode[parseInt(idx, 10)];
+    });
+}
+function restoreCodeBlocks(content, protectedCode) {
+    return content.replace(/___CODE_BLOCK_(\d+)___/g, (_m, idx) => {
+        return protectedCode.codeBlocks[parseInt(idx, 10)];
+    });
+}
 /**
  * Converts JSX attribute expressions (attribute={expression}) to HTML attributes (attribute="value").
  * Handles style objects (camelCase → kebab-case), className → class, and JSON stringifies objects.
@@ -93338,7 +93496,7 @@ function extractBalancedBraces(content, start) {
  * // Returns: '<a href="https://example.com">Link</a>'
  * ```
  */
-function evaluateAttributeExpressions(content, context) {
+function evaluateAttributeExpressions(content, context, protectedCode) {
     const attrStartRegex = /(\w+)=\{/g;
     let result = '';
     let lastEnd = 0;
@@ -93348,7 +93506,14 @@ function evaluateAttributeExpressions(content, context) {
         const braceStart = match.index + match[0].length;
         const extracted = extractBalancedBraces(content, braceStart);
         if (extracted) {
-            const expression = extracted.content;
+            // The expression might contain template literals in MDX component tag props
+            // E.g. <Component greeting={`Hello World!`} />
+            // that is marked as inline code. So we need to restore the inline codes
+            // in the expression to evaluate it
+            let expression = extracted.content;
+            if (protectedCode) {
+                expression = restoreInlineCode(expression, protectedCode);
+            }
             const fullMatchEnd = extracted.end;
             result += content.slice(lastEnd, match.index);
             try {
@@ -93364,14 +93529,20 @@ function evaluateAttributeExpressions(content, context) {
                         result += `style="${cssString}"`;
                     }
                     else {
-                        result += `${attributeName}='${JSON.stringify(evalResult)}'`;
+                        // These are arrays / objects attribute values
+                        // Mark JSON-serialized values with a prefix so they can be parsed back correctly
+                        const jsonValue = escapeHtmlAttribute(JSON_VALUE_MARKER + JSON.stringify(evalResult));
+                        // Use double quotes so that multi-paragraph values are not split into multiple attributes by the processors
+                        result += `${attributeName}="${jsonValue}"`;
                     }
                 }
                 else if (attributeName === 'className') {
-                    result += `class="${evalResult}"`;
+                    // Escape special characters so that it doesn't break and split the attribute value to nodes
+                    // This will be restored later in the pipeline
+                    result += `class="${escapeHtmlAttribute(String(evalResult))}"`;
                 }
                 else {
-                    result += `${attributeName}="${evalResult}"`;
+                    result += `${attributeName}="${escapeHtmlAttribute(String(evalResult))}"`;
                 }
             }
             catch (_error) {
@@ -93402,13 +93573,9 @@ function evaluateAttributeExpressions(content, context) {
  * // Returns: 'Text with `inline` and ```js\ncode\n```'
  * ```
  */
-function restoreCodeBlocks(content, protectedCode) {
-    let restored = content.replace(/___CODE_BLOCK_(\d+)___/g, (_match, index) => {
-        return protectedCode.codeBlocks[parseInt(index, 10)];
-    });
-    restored = restored.replace(/___INLINE_CODE_(\d+)___/g, (_match, index) => {
-        return protectedCode.inlineCode[parseInt(index, 10)];
-    });
+function restoreProtectedCodes(content, protectedCode) {
+    let restored = restoreCodeBlocks(content, protectedCode);
+    restored = restoreInlineCode(restored, protectedCode);
     return restored;
 }
 /**
@@ -93429,9 +93596,9 @@ function preprocessJSXExpressions(content, context = {}) {
     // Step 3: Evaluate attribute expressions (JSX attribute syntax: href={baseUrl})
     // For inline expressions, we use a library to parse the expression & evaluate it later
     // For attribute expressions, it was difficult to use a library to parse them, so do it manually
-    processed = evaluateAttributeExpressions(processed, context);
+    processed = evaluateAttributeExpressions(processed, context, protectedCode);
     // Step 4: Restore protected code blocks
-    processed = restoreCodeBlocks(processed, protectedCode);
+    processed = restoreProtectedCodes(processed, protectedCode);
     return processed;
 }
 
@@ -93843,7 +94010,7 @@ const wrapPinnedBlocks = (node, json) => {
         return node;
     return {
         children: [node],
-        data: { className: 'pin', hName: 'rdme-pin' },
+        data: { hName: 'rdme-pin', hProperties: { className: 'pin' } },
         type: 'rdme-pin',
     };
 };
@@ -93931,15 +94098,16 @@ function parseMagicBlock(raw, options = {}) {
                 type: 'code',
                 value: obj.code.trim(),
             }));
-            // Single code block without a tab name renders as a plain code block
+            // Single code block without a tab name (meta or language) renders as a plain code block
+            // Otherwise, we want to render it as a code tabs block
             if (children.length === 1) {
                 if (!children[0].value)
                     return [];
-                if (children[0].meta)
+                if (!(children[0].meta || children[0].lang))
                     return [wrapPinnedBlocks(children[0], json)];
             }
-            // Multiple code blocks render as tabbed code blocks
-            return [wrapPinnedBlocks({ children, className: 'tabs', data: { hName: 'code-tabs' }, type: 'code-tabs' }, json)];
+            // Multiple code blocks or a single code block with a tab name (meta or language) renders as a code tabs block
+            return [wrapPinnedBlocks({ children, className: 'tabs', data: { hName: 'CodeTabs' }, type: 'code-tabs' }, json)];
         }
         // API header: renders as a heading element (h1-h6)
         case 'api-header': {
@@ -94140,11 +94308,31 @@ function parseMagicBlock(raw, options = {}) {
     }
 }
 /**
- * Check if a child node is a flow element that needs unwrapping (mdxJsxFlowElement, etc.)
+ * Block-level node types that cannot be nested inside paragraphs.
  */
-const needsUnwrapping = (child) => {
-    return child.type === 'mdxJsxFlowElement';
-};
+const blockTypes = [
+    'heading',
+    'code',
+    'code-tabs',
+    'paragraph',
+    'blockquote',
+    'list',
+    'table',
+    'thematicBreak',
+    'html',
+    'yaml',
+    'toml',
+    'rdme-pin',
+    'rdme-callout',
+    'html-block',
+    'embed',
+    'figure',
+    'mdxJsxFlowElement',
+];
+/**
+ * Check if a node is a block-level node (cannot be inside a paragraph)
+ */
+const isBlockNode = (node) => blockTypes.includes(node.type);
 /**
  * Unified plugin that restores magic blocks from placeholder tokens.
  *
@@ -94157,8 +94345,9 @@ const magicBlockRestorer = ({ blocks }) => tree => {
         return;
     // Map: key → original raw magic block content
     const magicBlockKeys = new Map(blocks.map(({ key, raw }) => [key, raw]));
-    // Find inlineCode nodes that match our placeholder tokens
-    const modifications = [];
+    // Collect replacements to apply (we need to visit in reverse to maintain indices)
+    const replacements = [];
+    // First pass: collect all replacements
     visit(tree, 'inlineCode', (node, index, parent) => {
         if (!parent || index == null)
             return undefined;
@@ -94168,31 +94357,73 @@ const magicBlockRestorer = ({ blocks }) => tree => {
         const children = parseMagicBlock(raw);
         if (!children.length)
             return undefined;
-        if (children[0] && needsUnwrapping(children[0]) && parent.type === 'paragraph') {
-            // Find paragraph's parent and unwrap
-            let paragraphParent;
-            visit(tree, 'paragraph', (p, pIndex, pParent) => {
-                if (p === parent && pParent && 'children' in pParent) {
-                    paragraphParent = pParent;
-                    return false;
+        // If parent is a paragraph and we're inserting block nodes (which must not be in paragraphs), lift them out
+        if (parent.type === 'paragraph' && children.some(child => isBlockNode(child))) {
+            const blockNodes = [];
+            const inlineNodes = [];
+            // Separate block and inline nodes
+            children.forEach(child => {
+                if (isBlockNode(child)) {
+                    blockNodes.push(child);
                 }
-                return undefined;
-            });
-            if (paragraphParent) {
-                const paragraphIndex = paragraphParent.children.indexOf(parent);
-                if (paragraphIndex !== -1) {
-                    modifications.push({ children, index: paragraphIndex, parent: paragraphParent });
+                else {
+                    inlineNodes.push(child);
                 }
-            }
-            return SKIP;
+            });
+            const before = parent.children.slice(0, index);
+            const after = parent.children.slice(index + 1);
+            replacements.push({
+                parent,
+                blockNodes,
+                inlineNodes,
+                before,
+                after,
+            });
         }
-        parent.children.splice(index, 1, ...children);
-        return [SKIP, index + children.length];
-    });
-    // Apply modifications in reverse order to avoid index shifting
-    modifications.reverse().forEach(({ children, index, parent }) => {
-        parent.children.splice(index, 1, ...children);
+        else {
+            // Normal case: just replace the inlineCode with the children
+            parent.children.splice(index, 1, ...children);
+        }
+        return undefined;
     });
+    // Second pass: apply replacements that require lifting block nodes out of paragraphs
+    // Process in reverse order to maintain correct indices
+    for (let i = replacements.length - 1; i >= 0; i -= 1) {
+        const { after, before, blockNodes, inlineNodes, parent } = replacements[i];
+        // Find the paragraph's position in the root
+        const rootChildren = tree.children;
+        const paraIndex = rootChildren.findIndex(child => child === parent);
+        if (paraIndex === -1) {
+            // Paragraph not found in root - fall back to normal replacement
+            // This shouldn't happen normally, but handle it gracefully
+            // Reconstruct the original index from before.length
+            const originalIndex = before.length;
+            parent.children.splice(originalIndex, 1, ...blockNodes, ...inlineNodes);
+            // eslint-disable-next-line no-continue
+            continue;
+        }
+        // Update or remove the paragraph
+        if (inlineNodes.length > 0) {
+            // Keep paragraph with inline nodes
+            parent.children = [...before, ...inlineNodes, ...after];
+            // Insert block nodes after the paragraph
+            if (blockNodes.length > 0) {
+                rootChildren.splice(paraIndex + 1, 0, ...blockNodes);
+            }
+        }
+        else if (before.length === 0 && after.length === 0) {
+            // Remove empty paragraph and replace with block nodes
+            rootChildren.splice(paraIndex, 1, ...blockNodes);
+        }
+        else {
+            // Keep paragraph with remaining content
+            parent.children = [...before, ...after];
+            // Insert block nodes after the paragraph
+            if (blockNodes.length > 0) {
+                rootChildren.splice(paraIndex + 1, 0, ...blockNodes);
+            }
+        }
+    }
 };
 /* harmony default export */ const mdxish_magic_blocks = (magicBlockRestorer);
 
@@ -95046,6 +95277,40 @@ const makeUseMDXComponents = (more = {}) => {
 
 
 
+
+/**
+ * Parse JSON-marked string values in props back to their original types.
+ * This handles arrays and objects that were serialized during JSX preprocessing.
+ */
+function parseJsonProps(props) {
+    if (!props)
+        return props;
+    const parsed = {};
+    Object.entries(props).forEach(([key, value]) => {
+        if (typeof value === 'string' && value.startsWith(JSON_VALUE_MARKER)) {
+            try {
+                parsed[key] = JSON.parse(value.slice(JSON_VALUE_MARKER.length));
+            }
+            catch {
+                // If parsing fails, use the value without the marker
+                parsed[key] = value.slice(JSON_VALUE_MARKER.length);
+            }
+        }
+        else {
+            parsed[key] = value;
+        }
+    });
+    return parsed;
+}
+/**
+ * Custom createElement wrapper that parses JSON-marked string props.
+ * This is needed because rehype-react converts HAST to React, but complex
+ * types (arrays/objects) get serialized to strings during markdown parsing.
+ */
+function createElementWithJsonProps(type, props, ...children) {
+    const parsedProps = parseJsonProps(props);
+    return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement(type, parsedProps, ...children);
+}
 /** Flatten CustomComponents into a component map for rehype-react */
 function exportComponentsForRehype(components) {
     const exported = Object.entries(components).reduce((memo, [tag, mod]) => {
@@ -95077,7 +95342,7 @@ function exportComponentsForRehype(components) {
 function createRehypeReactProcessor(components) {
     // @ts-expect-error - rehype-react types are incompatible with React.Fragment return type
     return unified().use((rehype_react_default()), {
-        createElement: (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).createElement,
+        createElement: createElementWithJsonProps,
         Fragment: (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default()).Fragment,
         components,
     });