@readme/markdown 11.12.0 → 11.13.0

package/dist/main.js

@@ -11366,6 +11366,8 @@ __webpack_require__.d(__webpack_exports__, {
   mdastV6: () => (/* reexport */ lib_mdastV6),
   mdx: () => (/* reexport */ lib_mdx),
   mdxish: () => (/* reexport */ lib_mdxish),
+  mdxishAstProcessor: () => (/* reexport */ mdxishAstProcessor),
+  mdxishMdastToMd: () => (/* reexport */ mdxishMdastToMd),
   mdxishTags: () => (/* reexport */ mdxishTags),
   migrate: () => (/* reexport */ lib_migrate),
   mix: () => (/* reexport */ lib_mix),
@@ -11513,9 +11515,17 @@ function docLink(href) {
 function Anchor(props) {
     const { children, href = '', target = '', title = '', ...attrs } = props;
     const baseUrl = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(BaseUrl);
+    // Unwrap any nested anchor elements that GFM's autolinker may have created.
+    // This prevents invalid nested <a> tags when the Anchor's text content looks like a URL.
+    const unwrappedChildren = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().Children.map(children, child => {
+        if (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().isValidElement(child) && child.type === 'a') {
+            return child.props.children;
+        }
+        return child;
+    });
     return (
     // eslint-disable-next-line react/jsx-props-no-spreading
-    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, children));
+    external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("a", { ...attrs, href: getHref(href, baseUrl), target: target, title: title, ...docLink(href) }, unwrappedChildren));
 }
 /* harmony default export */ const components_Anchor = (Anchor);
 
@@ -11653,7 +11663,8 @@ const Code = (props) => {
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
     const copyButtons = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(CodeOpts) || props.copyButtons;
     const isHydrated = useHydrated();
-    const language = isHydrated ? canonicalLanguage(lang) : '';
+    const language = canonicalLanguage(lang);
+    const isMermaid = language === 'mermaid';
     const codeRef = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createRef)();
     const codeOpts = {
         inline: !lang,
@@ -11664,7 +11675,7 @@ const Code = (props) => {
     const highlightedCode = syntaxHighlighter && typeof syntaxHighlighter === 'function' && code && isHydrated
         ? syntaxHighlighter(code, language, codeOpts, { mdx: true })
         : code;
-    if (language === 'mermaid') {
+    if (isHydrated && isMermaid) {
         return code;
     }
     return (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,
@@ -11680,15 +11691,28 @@ var dist_utils_default = /*#__PURE__*/__webpack_require__.n(dist_utils);
 
 
 
+
 let mermaid;
 const { uppercase } = (dist_utils_default());
 const CodeTabs = (props) => {
     const { children } = props;
     const theme = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useContext)(Theme);
-    const hasMermaid = !Array.isArray(children) && children.props?.children.props.lang === 'mermaid';
-    // render Mermaid diagram
+    const isHydrated = useHydrated();
+    // Handle both array (from rehype-react in rendering mdxish) and single element (MDX/JSX runtime) cases
+    // The children here is the individual code block objects
+    const childrenArray = Array.isArray(children) ? children : [children];
+    // The structure varies depending on rendering context:
+    // - When rendered via rehype-react: pre.props.children is an array where the first element is the Code component
+    // - When rendered via MDX/JSX runtime: pre.props.children is directly the Code component
+    const getCodeComponent = (pre) => {
+        return Array.isArray(pre?.props?.children) ? pre.props.children[0] : pre?.props?.children;
+    };
+    const containAtLeastOneMermaid = childrenArray.some(pre => getCodeComponent(pre)?.props?.lang === 'mermaid');
+    // Render Mermaid diagram
     (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useEffect)(() => {
-        if (typeof window !== 'undefined' && hasMermaid) {
+        // Ensure we only render mermaids when frontend is hydrated to avoid hydration errors
+        // because mermaid mutates the DOM before react hydrates
+        if (typeof window !== 'undefined' && containAtLeastOneMermaid && isHydrated) {
             Promise.resolve(/* import() */).then(__webpack_require__.t.bind(__webpack_require__, 1387, 23)).then(module => {
                 mermaid = module.default;
                 mermaid.initialize({
@@ -11700,7 +11724,7 @@ const CodeTabs = (props) => {
                 });
             });
         }
-    }, [hasMermaid, theme]);
+    }, [containAtLeastOneMermaid, theme, isHydrated]);
     function handleClick({ target }, index) {
         const $wrap = target.parentElement.parentElement;
         const $open = [].slice.call($wrap.querySelectorAll('.CodeTabs_active'));
@@ -11710,19 +11734,22 @@ const CodeTabs = (props) => {
         codeblocks[index].classList.add('CodeTabs_active');
         target.classList.add('CodeTabs_active');
     }
-    // render single Mermaid diagram
-    if (hasMermaid) {
-        const value = children.props.children.props.value;
-        return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
+    // We want to render single mermaid diagrams without the code tabs UI
+    if (childrenArray.length === 1) {
+        const codeComponent = getCodeComponent(childrenArray[0]);
+        if (codeComponent?.props?.lang === 'mermaid') {
+            const value = codeComponent?.props?.value;
+            return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("pre", { className: "mermaid-render mermaid_single" }, value);
+        }
     }
     return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: `CodeTabs CodeTabs_initial theme-${theme}` },
-        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CodeTabs-toolbar" }, (Array.isArray(children) ? children : [children]).map((pre, i) => {
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "CodeTabs-toolbar" }, childrenArray.map((pre, i) => {
             // the first or only child should be our Code component
-            const codeComponent = Array.isArray(pre.props?.children)
+            const tabCodeComponent = Array.isArray(pre.props?.children)
                 ? pre.props.children[0]
                 : pre.props?.children;
-            const lang = codeComponent?.props?.lang;
-            const meta = codeComponent?.props?.meta;
+            const lang = tabCodeComponent?.props?.lang;
+            const meta = tabCodeComponent?.props?.meta;
             /* istanbul ignore next */
             return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { key: i, onClick: e => handleClick(e, i), type: "button", value: lang }, meta || `${!lang ? 'Text' : uppercase(lang)}`));
         })),
@@ -70584,77 +70611,197 @@ const mdxToHast = () => tree => {
 ;// ./processor/transform/mdxish/mdxish-component-blocks.ts
 
 
-const tagPattern = /^<([A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>([\s\S]*)?$/;
-const attributePattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+const pascalCaseTagPattern = /^<([A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>([\s\S]*)?$/;
+const tagAttributePattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'>]+))?/g;
+/**
+ * Maximum number of siblings to scan forward when looking for a closing tag
+ * to avoid scanning too far and degrading performance
+ */
+const MAX_LOOKAHEAD = 30;
+/**
+ * Tags that have dedicated transformers and should NOT be handled by this plugin.
+ * These components have special parsing requirements that the generic component
+ * block transformer cannot handle correctly.
+ */
+const EXCLUDED_TAGS = new Set(['HTMLBlock', 'Table']);
 const inlineMdProcessor = unified().use(remarkParse);
 const isClosingTag = (value, tag) => value.trim() === `</${tag}>`;
-// Remove matching closing tag from paragraph children; returns updated paragraph and removal status
-const stripClosingFromParagraph = (node, tag) => {
-    if (!Array.isArray(node.children))
-        return { paragraph: node, found: false };
-    const children = [...node.children];
-    const closingIndex = children.findIndex(child => child.type === 'html' && isClosingTag(child.value || '', tag));
-    if (closingIndex === -1)
-        return { paragraph: node, found: false };
-    children.splice(closingIndex, 1);
-    return {
-        paragraph: { ...node, children },
-        found: true,
-    };
-};
-// Replace two child nodes (opening HTML tag + paragraph) with a single replacement node
-const replaceChild = (parent, index, replacement) => {
-    parent.children.splice(index, 2, replacement);
-};
-// Parse markdown inside a component's inline content into mdast children.
+/**
+ * Parse markdown content into mdast children nodes.
+ */
 const parseMdChildren = (value) => {
     const parsed = inlineMdProcessor.parse(value);
     return parsed.children || [];
 };
-// Convert raw attribute string into mdxJsxAttribute entries (strings only; no expressions).
-// Handles both key-value attributes (theme="info") and boolean attributes (empty).
+/**
+ * Convert raw attribute string into mdxJsxAttribute entries.
+ * Handles both key-value attributes (theme="info") and boolean attributes (empty).
+ */
 const parseAttributes = (raw) => {
     const attributes = [];
     const attrString = raw.trim();
     if (!attrString)
         return attributes;
-    // Reset regex lastIndex since it's a global regex that maintains state
-    attributePattern.lastIndex = 0;
-    let match = attributePattern.exec(attrString);
+    tagAttributePattern.lastIndex = 0;
+    let match = tagAttributePattern.exec(attrString);
     while (match !== null) {
         const [, attrName, attrValue] = match;
-        // Boolean attribute (no value) -> set to null
-        // Attribute with value -> clean and set string value
-        // Note: Attribute value types can't directly be numbers & booleans. String, nulls, undefined are supported.
         const value = attrValue ? attrValue.replace(/^['"]|['"]$/g, '') : null;
-        attributes.push({
-            type: 'mdxJsxAttribute',
-            name: attrName,
-            value,
-        });
-        match = attributePattern.exec(attrString);
+        attributes.push({ type: 'mdxJsxAttribute', name: attrName, value });
+        match = tagAttributePattern.exec(attrString);
     }
     return attributes;
 };
-// Parse a single HTML-ish tag string into tag name, attributes, self-closing flag, and inline content.
+/**
+ * Parse an HTML tag string into structured data.
+ */
 const parseTag = (value) => {
-    const match = value.match(tagPattern);
+    const match = value.match(pascalCaseTagPattern);
     if (!match)
         return null;
-    const [, tag, attrString = '', selfClosing = '', content = ''] = match;
-    const attributes = parseAttributes(attrString);
+    const [, tag, attrString = '', selfClosing = '', contentAfterTag = ''] = match;
     return {
         tag,
-        attributes,
+        attributes: parseAttributes(attrString),
         selfClosing: !!selfClosing,
-        content,
+        contentAfterTag,
     };
 };
-// Transform PascalCase HTML blocks into mdxJsxFlowElement nodes.
-// Remark parses unknown tags as raw HTML; we rewrite them so MDX/rehype treats them as components.
+/**
+ * Create an MdxJsxFlowElement node from component data.
+ */
+const createComponentNode = ({ tag, attributes, children, startPosition, endPosition }) => ({
+    type: 'mdxJsxFlowElement',
+    name: tag,
+    attributes,
+    children,
+    position: {
+        start: startPosition?.start,
+        end: endPosition?.end ?? startPosition?.end,
+    },
+});
+/**
+ * Remove a closing tag from a paragraph's children and return the updated paragraph.
+ */
+const stripClosingTagFromParagraph = (node, tag) => {
+    if (!Array.isArray(node.children))
+        return { paragraph: node, found: false };
+    const children = [...node.children];
+    const closingIndex = children.findIndex(child => child.type === 'html' && isClosingTag(child.value || '', tag));
+    if (closingIndex === -1)
+        return { paragraph: node, found: false };
+    children.splice(closingIndex, 1);
+    return { paragraph: { ...node, children }, found: true };
+};
+/**
+ * Scan forward through siblings to find a closing tag.
+ * Handles:
+ * - Exact match HTML siblings (e.g., `</Tag>`)
+ * - HTML siblings with embedded closing tag (e.g., `...\n</Tag>`)
+ * - Paragraph siblings containing the closing tag as a child
+ *
+ * Returns null if not found within MAX_LOOKAHEAD siblings
+ */
+const scanForClosingTag = (parent, startIndex, tag) => {
+    const closingTagStr = `</${tag}>`;
+    const maxIndex = Math.min(startIndex + MAX_LOOKAHEAD, parent.children.length);
+    let i = startIndex + 1;
+    for (; i < maxIndex; i += 1) {
+        const sibling = parent.children[i];
+        // Check HTML siblings
+        if (sibling.type === 'html') {
+            const siblingValue = sibling.value || '';
+            // Exact match (standalone closing tag)
+            if (isClosingTag(siblingValue, tag)) {
+                return { closingIndex: i, extraClosingChildren: [] };
+            }
+            // Embedded closing tag (closing tag at end of HTML block content)
+            if (siblingValue.includes(closingTagStr)) {
+                const contentBeforeClose = siblingValue.substring(0, siblingValue.lastIndexOf(closingTagStr)).trim();
+                const extraChildren = contentBeforeClose
+                    ? parseMdChildren(contentBeforeClose)
+                    : [];
+                return { closingIndex: i, extraClosingChildren: extraChildren };
+            }
+        }
+        // Check paragraph siblings
+        if (sibling.type === 'paragraph') {
+            const { paragraph, found } = stripClosingTagFromParagraph(sibling, tag);
+            if (found) {
+                return { closingIndex: i, extraClosingChildren: [], strippedParagraph: paragraph };
+            }
+        }
+    }
+    if (i < parent.children.length) {
+        // eslint-disable-next-line no-console
+        console.warn(`Closing tag </${tag}> not found within ${MAX_LOOKAHEAD} siblings, stopping scan`);
+    }
+    return null;
+};
+const substituteNodeWithMdxNode = (parent, index, mdxNode) => {
+    parent.children.splice(index, 1, mdxNode);
+};
+/**
+ * Transform PascalCase HTML nodes into mdxJsxFlowElement nodes.
+ *
+ * Remark parses unknown/custom component tags as raw HTML nodes.
+ * These are the custom readme MDX syntax for components.
+ * This transformer identifies these patterns and converts them to proper MDX JSX elements so they
+ * can be accurately recognized and rendered later with their component definition code.
+ * Though for some tags, we need to handle them specially
+ *
+ * ## Supported HTML Structures
+ *
+ * ### 1. Self-closing tags
+ * ```
+ * <Component />
+ * ```
+ * Parsed as: `html: "<Component />"`
+ *
+ * ### 2. Self-contained blocks (entire component in single HTML node)
+ * ```
+ * <Button>Click me</Button>
+ * ```
+ * ```
+ * <Component>
+ *   <h2>Title</h2>
+ *   <p>Content</p>
+ * </Component>
+ * ```
+ * Parsed as: `html: "<Component>\n  <h2>Title</h2>\n  <p>Content</p>\n</Component>"`
+ * The opening tag, content, and closing tag are all captured in one HTML node.
+ *
+ * ### 3. Multi-sibling components (closing tag in a following sibling)
+ * Handles various structures where the closing tag is in a later sibling, such as:
+ *
+ * #### 3a. Block components (closing tag in sibling paragraph)
+ * ```
+ * <Callout>
+ * Some **markdown** content
+ * </Callout>
+ * ```
+ *
+ * #### 3b. Multi-paragraph components (closing tag several siblings away)
+ * ```
+ * <Callout>
+ *
+ * First paragraph
+ *
+ * Second paragraph
+ * </Callout>
+ * ```
+ *
+ * #### 3c. Nested components split by blank lines (closing tag embedded in HTML sibling)
+ * ```
+ * <Outer>
+ *   <Inner>content</Inner>
+ *
+ *   <Inner>content</Inner>
+ * </Outer>
+ * ```
+ */
 const mdxishComponentBlocks = () => tree => {
     const stack = [tree];
-    // Process children depth-first, rewriting opening/closing component HTML pairs
     const processChildNode = (parent, index) => {
         const node = parent.children[index];
         if (!node)
@@ -70662,46 +70809,66 @@ const mdxishComponentBlocks = () => tree => {
         if ('children' in node && Array.isArray(node.children)) {
             stack.push(node);
         }
+        // Only visit HTML nodes with an actual html tag
         const value = node.value;
         if (node.type !== 'html' || typeof value !== 'string')
             return;
         const parsed = parseTag(value);
         if (!parsed)
             return;
-        const { tag, attributes, selfClosing, content = '' } = parsed;
-        const extraChildren = content ? parseMdChildren(content.trimStart()) : [];
+        const { tag, attributes, selfClosing, contentAfterTag = '' } = parsed;
+        // Skip tags that have dedicated transformers
+        if (EXCLUDED_TAGS.has(tag))
+            return;
+        const closingTagStr = `</${tag}>`;
+        // Case 1: Self-closing tag
         if (selfClosing) {
-            const componentNode = {
-                type: 'mdxJsxFlowElement',
-                name: tag,
+            const componentNode = createComponentNode({
+                tag,
                 attributes,
                 children: [],
-                position: node.position,
-            };
-            parent.children.splice(index, 1, componentNode);
+                startPosition: node.position,
+            });
+            substituteNodeWithMdxNode(parent, index, componentNode);
             return;
         }
-        const next = parent.children[index + 1];
-        if (!next || next.type !== 'paragraph')
+        // Case 2: Self-contained block (closing tag in content)
+        if (contentAfterTag.includes(closingTagStr)) {
+            const componentInnerContent = contentAfterTag.substring(0, contentAfterTag.lastIndexOf(closingTagStr)).trim();
+            const componentNode = createComponentNode({
+                tag,
+                attributes,
+                children: componentInnerContent ? parseMdChildren(componentInnerContent) : [],
+                startPosition: node.position,
+            });
+            substituteNodeWithMdxNode(parent, index, componentNode);
             return;
-        const { paragraph, found } = stripClosingFromParagraph(next, tag);
-        if (!found)
+        }
+        // Case 3: Multi-sibling component (closing tag in a following sibling)
+        // Scans forward through siblings to find closing tag in HTML or paragraph nodes
+        const scanResult = scanForClosingTag(parent, index, tag);
+        if (!scanResult)
             return;
-        const componentNode = {
-            type: 'mdxJsxFlowElement',
-            name: tag,
+        const { closingIndex, extraClosingChildren, strippedParagraph } = scanResult;
+        const extraChildren = contentAfterTag ? parseMdChildren(contentAfterTag.trimStart()) : [];
+        // Collect all intermediate siblings between opening tag and closing tag
+        const intermediateChildren = parent.children.slice(index + 1, closingIndex);
+        // For paragraph siblings, include the paragraph's children (with closing tag stripped)
+        // For HTML siblings, include any content parsed from before the closing tag
+        const closingChildren = strippedParagraph
+            ? strippedParagraph.children
+            : extraClosingChildren;
+        const componentNode = createComponentNode({
+            tag,
             attributes,
-            children: [
-                ...extraChildren,
-                ...paragraph.children,
-            ],
-            position: {
-                start: node.position?.start,
-                end: next.position?.end,
-            },
-        };
-        replaceChild(parent, index, componentNode);
+            children: [...extraChildren, ...intermediateChildren, ...closingChildren],
+            startPosition: node.position,
+            endPosition: parent.children[closingIndex]?.position,
+        });
+        // Remove all nodes from opening tag to closing tag (inclusive) and replace with component node
+        parent.children.splice(index, closingIndex - index + 1, componentNode);
     };
+    // Travel the tree depth-first
     while (stack.length) {
         const parent = stack.pop();
         if (parent?.children) {
@@ -71074,10 +71241,20 @@ const coerceJsxToMd = ({ components = {}, html = false } = {}) => (node, index,
             hProperties.url = hProperties.href;
             delete hProperties.href;
         }
+        // Unwrap any autolinked children to prevent nested links.
+        // GFM's autolink feature can convert URL-like text inside Anchor children
+        // into link nodes, which would create invalid nested links when Anchor
+        // is converted back to a link node.
+        const children = node.children.flatMap(child => {
+            if (child.type === 'link') {
+                return child.children;
+            }
+            return child;
+        });
         // @ts-expect-error we don't have a mechanism to enforce the URL attribute type right now
         const mdNode = {
             ...hProperties,
-            children: node.children,
+            children,
             type: types[node.name],
             position: node.position,
         };
@@ -86366,16 +86543,17 @@ const tocHastToMdx = (toc, components) => {
 
 
 
-const { codeTabsTransformer: compile_codeTabsTransformer, ...transforms } = defaultTransforms;
 const sanitizeSchema = cjs_default()(defaultSchema, {
     protocols: ['doc', 'ref', 'blog', 'changelog', 'page'],
 });
 const compile_compile = (text, { components = {}, missingComponents, copyButtons, useTailwind, ...opts } = {}) => {
+    // Destructure at runtime to avoid circular dependency issues
+    const { codeTabsTransformer, ...transforms } = defaultTransforms;
     const remarkPlugins = [
         remarkFrontmatter,
         remarkGfm,
         ...Object.values(transforms),
-        [compile_codeTabsTransformer, { copyButtons }],
+        [codeTabsTransformer, { copyButtons }],
         [
             handle_missing_components,
             { components, missingComponents: ['ignore', 'throw'].includes(missingComponents) ? missingComponents : 'ignore' },
@@ -92845,8 +93023,11 @@ function smartCamelCase(str) {
     }
     // Sort by length (longest first) to prevent shorter matches (e.g., "column" in "columns")
     const sortedBoundaries = [...allBoundaries].sort((a, b) => b.length - a.length);
+    // Use case-sensitive matching ('g' not 'gi') so that once a letter is
+    // capitalized by a longer boundary, shorter boundaries won't re-match it.
+    // This prevents issues like 'iconcolor' becoming 'iconColOr' instead of 'iconColor'.
     return sortedBoundaries.reduce((res, word) => {
-        const regex = new RegExp(`(${word})([a-z])`, 'gi');
+        const regex = new RegExp(`(${word})([a-z])`, 'g');
         return res.replace(regex, (_, prefix, nextChar) => prefix.toLowerCase() + nextChar.toUpperCase());
     }, str);
 }
@@ -92972,7 +93153,21 @@ const htmlBlockHandler = (_state, node) => {
         children: [],
     };
 };
+// Convert embed magic blocks to Embed components
+const embedHandler = (state, node) => {
+    // Assert to get the minimum properties we need
+    const { data } = node;
+    return {
+        type: 'element',
+        // To differentiate between regular embeds and magic block embeds,
+        // magic block embeds have a certain hName
+        tagName: data?.hName === NodeTypes.embedBlock ? 'Embed' : 'embed',
+        properties: data?.hProperties,
+        children: state.all(node),
+    };
+};
 const mdxComponentHandlers = {
+    embed: embedHandler,
     mdxFlowExpression: mdxExpressionHandler,
     mdxJsxFlowElement: mdxJsxElementHandler,
     mdxJsxTextElement: mdxJsxElementHandler,
@@ -93636,8 +93831,6 @@ const mdxishHtmlBlocks = () => tree => {
  * Taken from the v6 branch
  */
 const RGXP = /^\s*\[block:([^\]]*)\]([^]+?)\[\/block\]/;
-/** Parses markdown in table cells */
-const cellParser = unified().use(remarkParse).use(remarkGfm);
 /**
  * Wraps a node in a "pinned" container if sidebar: true is set in the JSON.
  * Pinned blocks are displayed in a sidebar/floating position in the UI.
@@ -93671,11 +93864,13 @@ const imgWidthBySize = new Proxy(imgSizeValues, {
 const textToInline = (text) => [{ type: 'text', value: text }];
 // Simple text to block nodes (wraps in paragraph)
 const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph' }];
+/** Parses markdown and html to markdown nodes */
+const contentParser = unified().use(remarkParse).use(remarkGfm);
 // Table cells may contain html or markdown content, so we need to parse it accordingly instead of keeping it as raw text
-const parseInline = (text) => {
+const parseTableCell = (text) => {
     if (!text.trim())
         return [{ type: 'text', value: '' }];
-    const tree = cellParser.runSync(cellParser.parse(text));
+    const tree = contentParser.runSync(contentParser.parse(text));
     // If there are multiple block-level nodes, keep them as-is to preserve the document structure and spacing
     if (tree.children.length > 1) {
         return tree.children;
@@ -93684,6 +93879,13 @@ const parseInline = (text) => {
     // This unwraps the extra p node that might appear & wrapping the content
     n.type === 'paragraph' && 'children' in n ? n.children : [n]);
 };
+// Parse markdown/HTML into block-level nodes (preserves paragraphs, headings, lists, etc.)
+const parseBlock = (text) => {
+    if (!text.trim())
+        return [{ type: 'paragraph', children: [{ type: 'text', value: '' }] }];
+    const tree = contentParser.runSync(contentParser.parse(text));
+    return tree.children;
+};
 /**
  * Parse a magic block string and return MDAST nodes.
  *
@@ -93762,7 +93964,7 @@ function parseMagicBlock(raw, options = {}) {
                 data: {
                     hProperties: {
                         ...(imgData.align && { align: imgData.align }),
-                        className: imgData.border ? 'border' : '',
+                        ...(imgData.border && { border: imgData.border.toString() }),
                         ...(imgData.sizing && { width: imgWidthBySize[imgData.sizing] }),
                     },
                 },
@@ -93801,8 +94003,9 @@ function parseMagicBlock(raw, options = {}) {
             const [icon, theme] = Array.isArray(resolvedType) ? resolvedType : ['👍', 'default'];
             if (!(calloutJson.title || calloutJson.body))
                 return [];
-            const titleBlocks = textToBlock(calloutJson.title || '');
-            const bodyBlocks = textToBlock(calloutJson.body || '');
+            // Parses html & markdown content
+            const titleBlocks = parseBlock(calloutJson.title || '');
+            const bodyBlocks = parseBlock(calloutJson.body || '');
             const children = [];
             if (titleBlocks.length > 0 && titleBlocks[0].type === 'paragraph') {
                 const firstTitle = titleBlocks[0];
@@ -93817,14 +94020,17 @@ function parseMagicBlock(raw, options = {}) {
             else {
                 children.push(...titleBlocks, ...bodyBlocks);
             }
+            // If there is no title or title is empty
+            const empty = !titleBlocks.length || !titleBlocks[0].children[0]?.value;
             // Create mdxJsxFlowElement directly for mdxish
             const calloutElement = {
                 type: 'mdxJsxFlowElement',
                 name: 'Callout',
-                attributes: toAttributes({ icon, theme: theme || 'default', type: theme || 'default' }, [
+                attributes: toAttributes({ icon, theme: theme || 'default', type: theme || 'default', empty }, [
                     'icon',
                     'theme',
                     'type',
+                    'empty',
                 ]),
                 children: children,
             };
@@ -93853,7 +94059,7 @@ function parseMagicBlock(raw, options = {}) {
                 return mapped;
             }, []);
             // In compatibility mode, wrap cell content in paragraphs; otherwise inline text
-            const tokenizeCell = compatibilityMode ? textToBlock : parseInline;
+            const tokenizeCell = compatibilityMode ? textToBlock : parseTableCell;
             const children = Array.from({ length: rows + 1 }, (_, y) => ({
                 children: Array.from({ length: cols }, (__, x) => ({
                     children: sparseData[y]?.[x] ? tokenizeCell(sparseData[y][x]) : [{ type: 'text', value: '' }],
@@ -93882,9 +94088,9 @@ function parseMagicBlock(raw, options = {}) {
             return [
                 wrapPinnedBlocks({
                     children: [
-                        { children: [{ type: 'text', value: title || null }], title: embedJson.provider, type: 'link', url },
+                        { children: [{ type: 'text', value: title || '' }], title: embedJson.provider, type: 'link', url },
                     ],
-                    data: { hName: 'rdme-embed', hProperties: { ...embedJson, href: url, html, title, url } },
+                    data: { hName: 'embed-block', hProperties: { ...embedJson, href: url, html, title, url } },
                     type: 'embed',
                 }, json),
             ];
@@ -93987,6 +94193,38 @@ const magicBlockRestorer = ({ blocks }) => tree => {
 };
 /* harmony default export */ const mdxish_magic_blocks = (magicBlockRestorer);
 
+;// ./processor/transform/mdxish/mdxish-mermaid.ts
+
+/**
+ * Rehype plugin for mdxish pipeline to add mermaid-render className to mermaid code blocks.
+ * The mermaid-render class is used to identify the mermaid diagrams elements for the
+ * mermaid library to transform. See components/CodeTabs/index.tsx for context
+ */
+const mdxishMermaidTransformer = () => (tree) => {
+    visit(tree, 'element', (node) => {
+        if (node.tagName !== 'pre' || node.children.length !== 1)
+            return;
+        const [child] = node.children;
+        if (child.type === 'element' &&
+            child.tagName === 'code' &&
+            child.properties?.lang === 'mermaid') {
+            // Combine existing className with the new mermaid-render class
+            const existingClassName = node.properties?.className;
+            const classNameArray = Array.isArray(existingClassName)
+                ? existingClassName.filter(c => typeof c === 'string' || typeof c === 'number')
+                : existingClassName && (typeof existingClassName === 'string' || typeof existingClassName === 'number')
+                    ? [existingClassName]
+                    : [];
+            node.properties = {
+                ...node.properties,
+                className: ['mermaid-render', ...classNameArray],
+            };
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const mdxish_mermaid = (mdxishMermaidTransformer);
+
 ;// ./lib/constants.ts
 /**
  * Pattern to match component tags (PascalCase or snake_case)
@@ -94214,6 +94452,45 @@ const restoreSnakeCaseComponentNames = (options) => {
 };
 /* harmony default export */ const restore_snake_case_component_name = (restoreSnakeCaseComponentNames);
 
+;// ./processor/transform/mdxish/retain-boolean-attributes.ts
+
+// Private Use Area character (U+E000) which is extremely unlikely to appear in real content.
+const TEMP_TRUE_BOOLEAN_VALUE = 'readme-this-is-a-temporary-boolean-attribute-\uE000';
+const TEMP_FALSE_BOOLEAN_VALUE = 'readme-this-is-a-temporary-boolean-attribute-\uE001';
+/**
+ * Preserves boolean properties when passed to rehypeRaw because
+ * rehypeRaw converts boolean properties in nodes to strings (e.g. true -> ""),
+ * which can change the truthiness of the property. Hence we need to preserve the boolean properties.
+ */
+const preserveBooleanProperties = () => tree => {
+    visit(tree, 'element', (node) => {
+        if (!node.properties)
+            return;
+        Object.entries(node.properties).forEach(([key, value]) => {
+            if (typeof value === 'boolean') {
+                node.properties[key] = value ? TEMP_TRUE_BOOLEAN_VALUE : TEMP_FALSE_BOOLEAN_VALUE;
+            }
+        });
+    });
+    return tree;
+};
+const restoreBooleanProperties = () => tree => {
+    visit(tree, 'element', (node) => {
+        if (!node.properties)
+            return;
+        Object.entries(node.properties).forEach(([key, value]) => {
+            if (value === TEMP_TRUE_BOOLEAN_VALUE) {
+                node.properties[key] = true;
+            }
+            else if (value === TEMP_FALSE_BOOLEAN_VALUE) {
+                node.properties[key] = false;
+            }
+        });
+    });
+    return tree;
+};
+
+
 ;// ./processor/transform/mdxish/variables-text.ts
 
 
@@ -94241,6 +94518,8 @@ const variablesTextTransformer = () => tree => {
         if (parent.type === 'inlineCode')
             return;
         const text = node.value;
+        if (typeof text !== 'string' || !text.trim())
+            return;
         if (!text.includes('{user.') && !text.includes('{user['))
             return;
         const matches = [...text.matchAll(USER_VAR_REGEX)];
@@ -94390,19 +94669,17 @@ function loadComponents() {
 
 
 
+
+
+
+
 
 
 
 
 
 const defaultTransformers = [callouts, code_tabs, gemoji_, transform_embeds];
-/**
- * Process markdown content with MDX syntax support.
- * Detects and renders custom component tags from the components hash.
- *
- * @see {@link https://github.com/readmeio/rmdx/blob/main/docs/mdxish-flow.md}
- */
-function mdxish(mdContent, opts = {}) {
+function mdxishAstProcessor(mdContent, opts = {}) {
     const { components: userComponents = {}, jsxContext = {}, useTailwind } = opts;
     const components = {
         ...loadComponents(),
@@ -94437,9 +94714,46 @@ function mdxish(mdContent, opts = {}) {
         .use(evaluate_expressions, { context: jsxContext }) // Evaluate MDX expressions using jsxContext
         .use(variables_text) // Parse {user.*} patterns from text (can't rely on remarkMdx)
         .use(useTailwind ? transform_tailwind : undefined, { components: tempComponentsMap })
-        .use(remarkGfm)
+        .use(remarkGfm);
+    return {
+        processor,
+        /**
+         * @todo we need to return this transformed content for now
+         * but ultimately need to properly tokenize our special markdown syntax
+         * into hast nodes instead of relying on transformed content
+         */
+        parserReadyContent,
+    };
+}
+/**
+ * Converts an Mdast to a Markdown string.
+ */
+function mdxishMdastToMd(mdast) {
+    const md = unified().use(remarkGfm).use(processor_compile).use(remarkStringify, {
+        bullet: '-',
+        emphasis: '_',
+    }).stringify(mdast);
+    return md;
+}
+/**
+ * Processes markdown content with MDX syntax support and returns a HAST.
+ * Detects and renders custom component tags from the components hash.
+ *
+ * @see {@link https://github.com/readmeio/rmdx/blob/main/docs/mdxish-flow.md}
+ */
+function mdxish(mdContent, opts = {}) {
+    const { components: userComponents = {} } = opts;
+    const components = {
+        ...loadComponents(),
+        ...userComponents,
+    };
+    const { processor, parserReadyContent } = mdxishAstProcessor(mdContent, opts);
+    processor
         .use(remarkRehype, { allowDangerousHtml: true, handlers: mdxComponentHandlers })
+        .use(preserveBooleanProperties) // RehypeRaw converts boolean properties to empty strings
         .use(rehypeRaw, { passThrough: ['html-block'] })
+        .use(restoreBooleanProperties)
+        .use(mdxish_mermaid) // Add mermaid-render className to pre wrappers
         .use(rehypeSlug)
         .use(rehypeMdxishComponents, {
         components,