@readme/markdown 12.2.0 → 13.0.0

package/dist/main.js

@@ -11908,7 +11908,9 @@ const CreateHeading = (depth) => {
 ;// ./components/Image/index.tsx
 
 const Image = (Props) => {
-    const { align = '', alt = '', border = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
+    const { align = '', alt = '', border: borderProp = false, caption, className = '', height = 'auto', src, title = '', width = 'auto', lazy = true, children, } = Props;
+    // Normalize border: MDXish passes {false} as the string "false", not a boolean
+    const border = borderProp === true || borderProp === 'true';
     const [lightbox, setLightbox] = external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState(false);
     if (className === 'emoji') {
         return external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.createElement("img", { alt: alt, height: height, loading: lazy ? 'lazy' : 'eager', src: src, title: title, width: width });
@@ -14345,7 +14347,7 @@ function htmlExtension(all, extension) {
 
 ;// ./node_modules/micromark-util-character/index.js
 /**
- * @typedef {import('micromark-util-types').Code} Code
+ * @import {Code} from 'micromark-util-types'
  */
 
 /**
@@ -14571,7 +14573,9 @@ const unicodeWhitespace = regexCheck(/\s/);
  * Create a code check from a regex.
  *
  * @param {RegExp} regex
+ *   Expression.
  * @returns {(code: Code) => boolean}
+ *   Check.
  */
 function regexCheck(regex) {
   return check;
@@ -70517,7 +70521,7 @@ const toAttributes = (object, keys = []) => {
         if (keys.length > 0 && !keys.includes(name))
             return;
         let value;
-        if (typeof v === 'undefined' || v === null || v === '') {
+        if (typeof v === 'undefined' || v === null || v === '' || v === false) {
             return;
         }
         else if (typeof v === 'string') {
@@ -91665,6 +91669,10 @@ ${reformatHTML(html)}
 const plain_plain = (node) => node.value;
 /* harmony default export */ const compile_plain = (plain_plain);
 
+;// ./processor/compile/variable.ts
+const variable = (node) => `{user.${node.data?.hProperties?.name || ''}}`;
+/* harmony default export */ const compile_variable = (variable);
+
 ;// ./processor/compile/index.ts
 
 
@@ -91674,7 +91682,8 @@ const plain_plain = (node) => node.value;
 
 
 
-function compilers() {
+
+function compilers(mdxish = false) {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
     const handlers = {
@@ -91685,6 +91694,7 @@ function compilers() {
         [NodeTypes.glossary]: compile_compatibility,
         [NodeTypes.htmlBlock]: html_block,
         [NodeTypes.reusableContent]: compile_compatibility,
+        ...(mdxish && { [NodeTypes.variable]: compile_variable }),
         embed: compile_compatibility,
         escape: compile_compatibility,
         figure: compile_compatibility,
@@ -91695,6 +91705,9 @@ function compilers() {
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });
 }
+function mdxishCompilers() {
+    return compilers.call(this, true);
+}
 /* harmony default export */ const processor_compile = (compilers);
 
 ;// ./processor/transform/escape-pipes-in-tables.ts
@@ -93405,13 +93418,17 @@ const htmlBlockHandler = (_state, node) => {
 const embedHandler = (state, node) => {
     // Assert to get the minimum properties we need
     const { data } = node;
+    // Magic block embeds (hName === 'embed-block') render as Embed component
+    // which doesn't use children - it renders based on props only
+    const isMagicBlockEmbed = data?.hName === NodeTypes.embedBlock;
     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',
+        tagName: isMagicBlockEmbed ? 'Embed' : 'embed',
         properties: data?.hProperties,
-        children: state.all(node),
+        // Don't include children for magic block embeds - Embed component renders based on props
+        children: isMagicBlockEmbed ? [] : state.all(node),
     };
 };
 const mdxComponentHandlers = {
@@ -93424,7 +93441,102 @@ const mdxComponentHandlers = {
     [NodeTypes.htmlBlock]: htmlBlockHandler,
 };
 
+;// ./lib/utils/mdxish/protect-code-blocks.ts
+/**
+ * Replaces code blocks and inline code with placeholders to protect them from preprocessing.
+ *
+ * @param content - The markdown content to process
+ * @returns Object containing protected content and arrays of original code blocks
+ * @example
+ * ```typescript
+ * const input = 'Text with `inline code` and ```fenced block```';
+ * protectCodeBlocks(input)
+ * // Returns: {
+ * //   protectedCode: {
+ * //     codeBlocks: ['```fenced block```'],
+ * //     inlineCode: ['`inline code`']
+ * //   },
+ * //   protectedContent: 'Text with ___INLINE_CODE_0___ and ___CODE_BLOCK_0___'
+ * // }
+ * ```
+ */
+function protectCodeBlocks(content) {
+    const codeBlocks = [];
+    const inlineCode = [];
+    let protectedContent = '';
+    let remaining = content;
+    let codeBlockStart = remaining.indexOf('```');
+    while (codeBlockStart !== -1) {
+        protectedContent += remaining.slice(0, codeBlockStart);
+        remaining = remaining.slice(codeBlockStart);
+        const codeBlockEnd = remaining.indexOf('```', 3);
+        if (codeBlockEnd === -1) {
+            break;
+        }
+        const match = remaining.slice(0, codeBlockEnd + 3);
+        const index = codeBlocks.length;
+        codeBlocks.push(match);
+        protectedContent += `___CODE_BLOCK_${index}___`;
+        remaining = remaining.slice(codeBlockEnd + 3);
+        codeBlockStart = remaining.indexOf('```');
+    }
+    protectedContent += remaining;
+    protectedContent = protectedContent.replace(/`([^`\n]+)`/g, match => {
+        const index = inlineCode.length;
+        inlineCode.push(match);
+        return `___INLINE_CODE_${index}___`;
+    });
+    return { protectedCode: { codeBlocks, inlineCode }, protectedContent };
+}
+/**
+ * Restores inline code by replacing placeholders with original content.
+ *
+ * @param content - Content with inline code placeholders
+ * @param protectedCode - The protected code arrays
+ * @returns Content with inline code restored
+ */
+function restoreInlineCode(content, protectedCode) {
+    return content.replace(/___INLINE_CODE_(\d+)___/g, (_m, idx) => {
+        return protectedCode.inlineCode[parseInt(idx, 10)];
+    });
+}
+/**
+ * Restores fenced code blocks by replacing placeholders with original content.
+ *
+ * @param content - Content with code block placeholders
+ * @param protectedCode - The protected code arrays
+ * @returns Content with code blocks restored
+ */
+function restoreFencedCodeBlocks(content, protectedCode) {
+    return content.replace(/___CODE_BLOCK_(\d+)___/g, (_m, idx) => {
+        return protectedCode.codeBlocks[parseInt(idx, 10)];
+    });
+}
+/**
+ * Restores all code blocks and inline code by replacing placeholders with original content.
+ *
+ * @param content - Content with code placeholders
+ * @param protectedCode - The protected code arrays
+ * @returns Content with all code blocks and inline code restored
+ * @example
+ * ```typescript
+ * const content = 'Text with ___INLINE_CODE_0___ and ___CODE_BLOCK_0___';
+ * const protectedCode = {
+ *   codeBlocks: ['```js\ncode\n```'],
+ *   inlineCode: ['`inline`']
+ * };
+ * restoreCodeBlocks(content, protectedCode)
+ * // Returns: 'Text with `inline` and ```js\ncode\n```'
+ * ```
+ */
+function restoreCodeBlocks(content, protectedCode) {
+    let restored = restoreFencedCodeBlocks(content, protectedCode);
+    restored = restoreInlineCode(restored, protectedCode);
+    return restored;
+}
+
 ;// ./processor/transform/mdxish/preprocess-jsx-expressions.ts
+
 // Base64 encode (Node.js + browser compatible)
 function base64Encode(str) {
     if (typeof Buffer !== 'undefined') {
@@ -93491,52 +93603,6 @@ function protectHTMLBlockContent(content) {
         return `${openTag}${HTML_BLOCK_CONTENT_START}${encoded}${HTML_BLOCK_CONTENT_END}${closeTag}`;
     });
 }
-/**
- * Replaces code blocks and inline code with placeholders to protect them from JSX processing.
- *
- * @param content
- * @returns Object containing protected content and arrays of original code blocks
- * @example
- * ```typescript
- * const input = 'Text with `inline code` and ```fenced block```';
- * protectCodeBlocks(input)
- * // Returns: {
- * //   protectedCode: {
- * //     codeBlocks: ['```fenced block```'],
- * //     inlineCode: ['`inline code`']
- * //   },
- * //   protectedContent: 'Text with ___INLINE_CODE_0___ and ___CODE_BLOCK_0___'
- * // }
- * ```
- */
-function protectCodeBlocks(content) {
-    const codeBlocks = [];
-    const inlineCode = [];
-    let protectedContent = '';
-    let remaining = content;
-    let codeBlockStart = remaining.indexOf('```');
-    while (codeBlockStart !== -1) {
-        protectedContent += remaining.slice(0, codeBlockStart);
-        remaining = remaining.slice(codeBlockStart);
-        const codeBlockEnd = remaining.indexOf('```', 3);
-        if (codeBlockEnd === -1) {
-            break;
-        }
-        const match = remaining.slice(0, codeBlockEnd + 3);
-        const index = codeBlocks.length;
-        codeBlocks.push(match);
-        protectedContent += `___CODE_BLOCK_${index}___`;
-        remaining = remaining.slice(codeBlockEnd + 3);
-        codeBlockStart = remaining.indexOf('```');
-    }
-    protectedContent += remaining;
-    protectedContent = protectedContent.replace(/`[^`]+`/g, match => {
-        const index = inlineCode.length;
-        inlineCode.push(match);
-        return `___INLINE_CODE_${index}___`;
-    });
-    return { protectedCode: { codeBlocks, inlineCode }, protectedContent };
-}
 /**
  * Removes JSX-style comments (e.g., { /* comment *\/ }) from content.
  *
@@ -93579,16 +93645,6 @@ 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)];
-    });
-}
 /**
  * Escapes unbalanced braces in content to prevent MDX expression parsing errors.
  * Handles: already-escaped braces, string literals inside expressions, nested balanced braces.
@@ -93719,28 +93775,6 @@ function evaluateAttributeExpressions(content, context, protectedCode) {
     result += content.slice(lastEnd);
     return result;
 }
-/**
- * Restores code blocks and inline code by replacing placeholders with original content.
- *
- * @param content
- * @param protectedCode
- * @returns Content with all code blocks and inline code restored
- * @example
- * ```typescript
- * const content = 'Text with ___INLINE_CODE_0___ and ___CODE_BLOCK_0___';
- * const protectedCode = {
- *   codeBlocks: ['```js\ncode\n```'],
- *   inlineCode: ['`inline`']
- * };
- * restoreCodeBlocks(content, protectedCode)
- * // Returns: 'Text with `inline` and ```js\ncode\n```'
- * ```
- */
-function restoreProtectedCodes(content, protectedCode) {
-    let restored = restoreCodeBlocks(content, protectedCode);
-    restored = restoreInlineCode(restored, protectedCode);
-    return restored;
-}
 /**
  * Preprocesses JSX-like expressions in markdown before parsing.
  * Inline expressions are handled separately; attribute expressions are processed here.
@@ -93763,7 +93797,7 @@ function preprocessJSXExpressions(content, context = {}) {
     // Step 4: Escape unbalanced braces to prevent MDX expression parsing errors
     processed = escapeUnbalancedBraces(processed);
     // Step 5: Restore protected code blocks
-    processed = restoreProtectedCodes(processed, protectedCode);
+    processed = restoreCodeBlocks(processed, protectedCode);
     return processed;
 }
 
@@ -93818,6 +93852,459 @@ const evaluateExpressions = ({ context = {} } = {}) => tree => {
 };
 /* harmony default export */ const evaluate_expressions = (evaluateExpressions);
 
+;// ./processor/transform/mdxish/magic-blocks/placeholder.ts
+const EMPTY_IMAGE_PLACEHOLDER = {
+    type: 'image',
+    url: '',
+    alt: '',
+    title: '',
+    data: { hProperties: {} },
+};
+const EMPTY_EMBED_PLACEHOLDER = {
+    type: 'embed',
+    children: [{ type: 'link', url: '', title: '', children: [{ type: 'text', value: '' }] }],
+    data: { hName: 'embed-block', hProperties: { url: '', href: '', title: '' } },
+};
+const EMPTY_RECIPE_PLACEHOLDER = {
+    type: 'mdxJsxFlowElement',
+    name: 'Recipe',
+    attributes: [],
+    children: [],
+};
+const EMPTY_CALLOUT_PLACEHOLDER = {
+    type: 'mdxJsxFlowElement',
+    name: 'Callout',
+    attributes: [
+        { type: 'mdxJsxAttribute', name: 'icon', value: '📘' },
+        { type: 'mdxJsxAttribute', name: 'theme', value: 'info' },
+        { type: 'mdxJsxAttribute', name: 'type', value: 'info' },
+        { type: 'mdxJsxAttribute', name: 'empty', value: 'true' },
+    ],
+    children: [{ type: 'heading', depth: 3, children: [{ type: 'text', value: '' }] }],
+};
+const EMPTY_TABLE_PLACEHOLDER = {
+    type: 'table',
+    align: ['left', 'left'],
+    children: [
+        { type: 'tableRow', children: [{ type: 'tableCell', children: [{ type: 'text', value: '' }] }] },
+        { type: 'tableRow', children: [{ type: 'tableCell', children: [{ type: 'text', value: '' }] }] },
+    ],
+};
+const EMPTY_CODE_PLACEHOLDER = {
+    type: 'code',
+    value: '',
+    lang: null,
+    meta: null,
+};
+
+;// ./processor/transform/mdxish/magic-blocks/magic-block-transformer.ts
+
+
+
+
+
+
+/**
+ * Wraps a node in a "pinned" container if sidebar: true is set.
+ */
+const wrapPinnedBlocks = (node, data) => {
+    if (!data.sidebar)
+        return node;
+    return {
+        children: [node],
+        data: { hName: 'rdme-pin', hProperties: { className: 'pin' } },
+        type: 'rdme-pin',
+    };
+};
+/**
+ * Named size presets for image widths.
+ */
+const imgSizeValues = {
+    full: '100%',
+    original: 'auto',
+};
+/**
+ * Proxy that resolves image sizing values.
+ */
+const imgWidthBySize = new Proxy(imgSizeValues, {
+    get: (widths, size) => (size?.match(/^\d+$/) ? `${size}%` : size in widths ? widths[size] : size),
+});
+const textToInline = (text) => [{ type: 'text', value: text }];
+const textToBlock = (text) => [{ children: textToInline(text), type: 'paragraph' }];
+const contentParser = unified().use(remarkParse).use(remarkGfm);
+const parseTableCell = (text) => {
+    if (!text.trim())
+        return [{ type: 'text', value: '' }];
+    const tree = contentParser.runSync(contentParser.parse(text));
+    if (tree.children.length > 1) {
+        return tree.children;
+    }
+    return tree.children.flatMap(n => n.type === 'paragraph' && 'children' in n ? n.children : [n]);
+};
+const parseBlock = (text) => {
+    if (!text.trim())
+        return [{ type: 'paragraph', children: [{ type: 'text', value: '' }] }];
+    const tree = contentParser.runSync(contentParser.parse(text));
+    return tree.children;
+};
+/**
+ * Transform a magicBlock node into final MDAST nodes.
+ */
+function transformMagicBlock(blockType, data, rawValue, options = {}) {
+    const { compatibilityMode = false, safeMode = false } = options;
+    // Handle empty data by returning placeholder nodes for known block types
+    // This allows the editor to show appropriate placeholder UI instead of nothing
+    if (Object.keys(data).length < 1) {
+        switch (blockType) {
+            case 'image':
+                return [EMPTY_IMAGE_PLACEHOLDER];
+            case 'embed':
+                return [EMPTY_EMBED_PLACEHOLDER];
+            case 'code':
+                return [EMPTY_CODE_PLACEHOLDER];
+            case 'callout':
+                return [EMPTY_CALLOUT_PLACEHOLDER];
+            case 'parameters':
+            case 'table':
+                return [EMPTY_TABLE_PLACEHOLDER];
+            case 'recipe':
+            case 'tutorial-tile':
+                return [EMPTY_RECIPE_PLACEHOLDER];
+            default:
+                return [{ type: 'paragraph', children: [{ type: 'text', value: rawValue }] }];
+        }
+    }
+    switch (blockType) {
+        case 'code': {
+            const codeJson = data;
+            if (!codeJson.codes || !Array.isArray(codeJson.codes)) {
+                return [wrapPinnedBlocks(EMPTY_CODE_PLACEHOLDER, data)];
+            }
+            const children = codeJson.codes.map(obj => ({
+                className: 'tab-panel',
+                data: { hName: 'code', hProperties: { lang: obj.language, meta: obj.name || null } },
+                lang: obj.language,
+                meta: obj.name || null,
+                type: 'code',
+                value: obj.code.trim(),
+            }));
+            // 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 || children[0].lang))
+                    return [wrapPinnedBlocks(children[0], data)];
+            }
+            // 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' }, data)];
+        }
+        case 'api-header': {
+            const headerJson = data;
+            const depth = headerJson.level || (compatibilityMode ? 1 : 2);
+            return [
+                wrapPinnedBlocks({
+                    children: 'title' in headerJson ? textToInline(headerJson.title || '') : [],
+                    depth,
+                    type: 'heading',
+                }, data),
+            ];
+        }
+        case 'image': {
+            const imageJson = data;
+            if (!imageJson.images || !Array.isArray(imageJson.images)) {
+                return [wrapPinnedBlocks(EMPTY_IMAGE_PLACEHOLDER, data)];
+            }
+            const imgData = imageJson.images.find(i => i.image);
+            if (!imgData?.image) {
+                return [wrapPinnedBlocks(EMPTY_IMAGE_PLACEHOLDER, data)];
+            }
+            const [url, title, alt] = imgData.image;
+            const block = {
+                alt: alt || imgData.caption || '',
+                data: {
+                    hProperties: {
+                        ...(imgData.align && { align: imgData.align }),
+                        ...(imgData.border && { border: imgData.border.toString() }),
+                        ...(imgData.sizing && { width: imgWidthBySize[imgData.sizing] }),
+                    },
+                },
+                title,
+                type: 'image',
+                url,
+            };
+            const img = imgData.caption
+                ? {
+                    children: [
+                        block,
+                        { children: parseBlock(imgData.caption), data: { hName: 'figcaption' }, type: 'figcaption' },
+                    ],
+                    data: { hName: 'figure' },
+                    type: 'figure',
+                    url,
+                }
+                : block;
+            return [wrapPinnedBlocks(img, data)];
+        }
+        case 'callout': {
+            const calloutJson = data;
+            const types = {
+                danger: ['❗️', 'error'],
+                info: ['📘', 'info'],
+                success: ['👍', 'okay'],
+                warning: ['🚧', 'warn'],
+            };
+            const resolvedType = typeof calloutJson.type === 'string' && calloutJson.type in types
+                ? types[calloutJson.type]
+                : [calloutJson.icon || '👍', typeof calloutJson.type === 'string' ? calloutJson.type : 'default'];
+            const [icon, theme] = Array.isArray(resolvedType) ? resolvedType : ['👍', 'default'];
+            if (!(calloutJson.title || calloutJson.body))
+                return [];
+            const hasTitle = !!calloutJson.title?.trim();
+            const hasBody = !!calloutJson.body?.trim();
+            const empty = !hasTitle;
+            const children = [];
+            if (hasTitle) {
+                const titleBlocks = parseBlock(calloutJson.title || '');
+                if (titleBlocks.length > 0 && titleBlocks[0].type === 'paragraph') {
+                    const firstTitle = titleBlocks[0];
+                    const heading = {
+                        type: 'heading',
+                        depth: 3,
+                        children: (firstTitle.children || []),
+                    };
+                    children.push(heading);
+                    children.push(...titleBlocks.slice(1));
+                }
+                else {
+                    children.push(...titleBlocks);
+                }
+            }
+            else {
+                // Add empty heading placeholder so body goes to children.slice(1)
+                // The Callout component expects children[0] to be the heading
+                children.push({
+                    type: 'heading',
+                    depth: 3,
+                    children: [{ type: 'text', value: '' }],
+                });
+            }
+            if (hasBody) {
+                const bodyBlocks = parseBlock(calloutJson.body || '');
+                children.push(...bodyBlocks);
+            }
+            const calloutElement = {
+                type: 'mdxJsxFlowElement',
+                name: 'Callout',
+                attributes: toAttributes({ icon, theme: theme || 'default', type: theme || 'default', empty }, [
+                    'icon',
+                    'theme',
+                    'type',
+                    'empty',
+                ]),
+                children: children,
+            };
+            return [wrapPinnedBlocks(calloutElement, data)];
+        }
+        case 'parameters': {
+            const paramsJson = data;
+            const { cols, data: tableData, rows } = paramsJson;
+            if (!tableData || !Object.keys(tableData).length)
+                return [];
+            if (typeof cols !== 'number' || typeof rows !== 'number' || cols < 1 || rows < 0)
+                return [];
+            const sparseData = Object.entries(tableData).reduce((mapped, [key, v]) => {
+                const [row, col] = key.split('-');
+                const rowIndex = row === 'h' ? 0 : parseInt(row, 10) + 1;
+                const colIndex = parseInt(col, 10);
+                if (!mapped[rowIndex])
+                    mapped[rowIndex] = [];
+                mapped[rowIndex][colIndex] = v;
+                return mapped;
+            }, []);
+            const tokenizeCell = compatibilityMode ? textToBlock : parseTableCell;
+            const tableChildren = Array.from({ length: rows + 1 }, (_, y) => ({
+                children: Array.from({ length: cols }, (__, x) => ({
+                    children: sparseData[y]?.[x] ? tokenizeCell(sparseData[y][x]) : [{ type: 'text', value: '' }],
+                    type: y === 0 ? 'tableHead' : 'tableCell',
+                })),
+                type: 'tableRow',
+            }));
+            return [
+                wrapPinnedBlocks({ align: paramsJson.align ?? new Array(cols).fill('left'), children: tableChildren, type: 'table' }, data),
+            ];
+        }
+        case 'embed': {
+            const embedJson = data;
+            if (!embedJson.url) {
+                return [wrapPinnedBlocks(EMPTY_EMBED_PLACEHOLDER, data)];
+            }
+            const { html, title, url } = embedJson;
+            try {
+                embedJson.provider = new URL(url).hostname
+                    .split(/(?:www)?\./)
+                    .filter(i => i)
+                    .join('.');
+            }
+            catch {
+                embedJson.provider = url;
+            }
+            return [
+                wrapPinnedBlocks({
+                    children: [
+                        { children: [{ type: 'text', value: title || '' }], title: embedJson.provider, type: 'link', url },
+                    ],
+                    data: { hName: 'embed-block', hProperties: { ...embedJson, href: url, html, title, url } },
+                    type: 'embed',
+                }, data),
+            ];
+        }
+        case 'html': {
+            const htmlJson = data;
+            if (typeof htmlJson.html !== 'string')
+                return [];
+            return [
+                wrapPinnedBlocks({
+                    data: {
+                        hName: 'html-block',
+                        hProperties: { html: htmlJson.html, runScripts: compatibilityMode, safeMode },
+                    },
+                    type: 'html-block',
+                }, data),
+            ];
+        }
+        case 'recipe':
+        case 'tutorial-tile': {
+            const recipeJson = data;
+            if (!recipeJson.slug || !recipeJson.title)
+                return [];
+            const recipeNode = {
+                type: 'mdxJsxFlowElement',
+                name: 'Recipe',
+                attributes: toAttributes(recipeJson, ['slug', 'title']),
+                children: [],
+                position: undefined,
+            };
+            return [recipeNode];
+        }
+        default: {
+            const text = data.text || data.html || '';
+            return [
+                wrapPinnedBlocks({ children: textToBlock(text), data: { hName: blockType || 'div', hProperties: data, ...data }, type: 'div' }, data),
+            ];
+        }
+    }
+}
+/**
+ * Check if a child node is a flow element that needs unwrapping.
+ */
+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 transforms magicBlock nodes into final MDAST nodes.
+ */
+const magicBlockTransformer = (options = {}) => tree => {
+    const replacements = [];
+    visit(tree, 'magicBlock', (node, index, parent) => {
+        if (!parent || index === undefined)
+            return undefined;
+        const children = transformMagicBlock(node.blockType, node.data, node.value, options);
+        if (!children.length) {
+            // Remove the node if transformation returns nothing
+            parent.children.splice(index, 1);
+            return [SKIP, index];
+        }
+        // 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);
+                }
+                else {
+                    inlineNodes.push(child);
+                }
+            });
+            const before = parent.children.slice(0, index);
+            const after = parent.children.slice(index + 1);
+            replacements.push({
+                parent,
+                blockNodes,
+                inlineNodes,
+                before,
+                after,
+            });
+        }
+        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 magic_block_transformer = (magicBlockTransformer);
+
 ;// ./processor/transform/mdxish/mdxish-html-blocks.ts
 
 
@@ -94153,444 +94640,220 @@ const mdxishHtmlBlocks = () => tree => {
 };
 /* harmony default export */ const mdxish_html_blocks = (mdxishHtmlBlocks);
 
-;// ./processor/transform/mdxish/mdxish-magic-blocks.ts
+;// ./processor/transform/mdxish/mdxish-jsx-to-mdast.ts
 
 
 
-
-
-/**
- * Matches legacy magic block syntax: [block:TYPE]...JSON...[/block]
- * Group 1: block type (e.g., "image", "code", "callout")
- * Group 2: JSON content between the tags
- * Taken from the v6 branch
- */
-const RGXP = /^\s*\[block:([^\]]*)\]([^]+?)\[\/block\]/;
-/**
- * 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.
- */
-const wrapPinnedBlocks = (node, json) => {
-    if (!json.sidebar)
-        return node;
+const transformImage = (jsx) => {
+    const attrs = getAttrs(jsx);
+    const { align, alt = '', border, caption, className, height, lazy, src = '', title = '', width } = attrs;
+    const hProperties = {
+        alt,
+        src,
+        title,
+        ...(align && { align }),
+        ...(border !== undefined && { border: String(border) }),
+        ...(caption && { caption }),
+        ...(className && { className }),
+        ...(height !== undefined && { height: String(height) }),
+        ...(lazy !== undefined && { lazy }),
+        ...(width !== undefined && { width: String(width) }),
+    };
     return {
-        children: [node],
-        data: { hName: 'rdme-pin', hProperties: { className: 'pin' } },
-        type: 'rdme-pin',
+        type: NodeTypes.imageBlock,
+        align,
+        alt,
+        border: border !== undefined ? String(border) : undefined,
+        caption,
+        className,
+        height: height !== undefined ? String(height) : undefined,
+        lazy,
+        src,
+        title,
+        width: width !== undefined ? String(width) : undefined,
+        data: {
+            hName: 'img',
+            hProperties,
+        },
+        position: jsx.position,
     };
 };
-/**
- * Named size presets for image widths.
- */
-const imgSizeValues = {
-    full: '100%',
-    original: 'auto',
-};
-/**
- * Proxy that resolves image sizing values:
- * - "full" → "100%", "original" → "auto" (from imgSizeValues)
- * - Pure numbers like "50" → "50%" (percentage)
- * - Anything else passes through as-is (e.g., "200px")
- */
-const imgWidthBySize = new Proxy(imgSizeValues, {
-    get: (widths, size) => (size?.match(/^\d+$/) ? `${size}%` : size in widths ? widths[size] : size),
-});
-// Simple text to inline nodes (just returns text node - no markdown parsing)
-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 parseTableCell = (text) => {
-    if (!text.trim())
-        return [{ type: 'text', value: '' }];
-    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;
-    }
-    return tree.children.flatMap(n => 
-    // 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;
+const transformCallout = (jsx) => {
+    const attrs = getAttrs(jsx);
+    const { empty = false, icon = '', theme = '' } = attrs;
+    return {
+        type: NodeTypes.callout,
+        children: jsx.children,
+        data: {
+            hName: 'Callout',
+            hProperties: {
+                empty,
+                icon,
+                theme,
+            },
+        },
+        position: jsx.position,
+    };
 };
-/**
- * Parse a magic block string and return MDAST nodes.
- *
- * @param raw - The raw magic block string including [block:TYPE] and [/block] tags
- * @param options - Parsing options for compatibility and error handling
- * @returns Array of MDAST nodes representing the parsed block
- */
-function parseMagicBlock(raw, options = {}) {
-    const { alwaysThrow = false, compatibilityMode = false, safeMode = false } = options;
-    const matchResult = RGXP.exec(raw);
-    if (!matchResult)
-        return [];
-    const [, rawType, jsonStr] = matchResult;
-    const type = rawType?.trim();
-    if (!type)
-        return [];
-    let json;
-    try {
-        json = JSON.parse(jsonStr);
-    }
-    catch (err) {
-        // eslint-disable-next-line no-console
-        console.error('Invalid Magic Block JSON:', err);
-        if (alwaysThrow)
-            throw new Error('Invalid Magic Block JSON');
-        return [];
-    }
-    if (Object.keys(json).length < 1)
-        return [];
-    // Each case handles a different magic block type and returns appropriate MDAST nodes
-    switch (type) {
-        // Code blocks: single code block or tabbed code blocks (multiple languages)
-        case 'code': {
-            const codeJson = json;
-            const children = codeJson.codes.map(obj => ({
-                className: 'tab-panel',
-                data: { hName: 'code', hProperties: { lang: obj.language, meta: obj.name || null } },
-                lang: obj.language,
-                meta: obj.name || null, // Tab name shown in the UI
-                type: 'code',
-                value: obj.code.trim(),
-            }));
-            // 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 || children[0].lang))
-                    return [wrapPinnedBlocks(children[0], 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': {
-            const headerJson = json;
-            // In compatibility mode, default to h1; otherwise h2
-            const depth = headerJson.level || (compatibilityMode ? 1 : 2);
-            return [
-                wrapPinnedBlocks({
-                    children: 'title' in headerJson ? textToInline(headerJson.title || '') : [],
-                    depth,
-                    type: 'heading',
-                }, json),
-            ];
-        }
-        // Image block: renders as <img> or <figure> with caption
-        case 'image': {
-            const imageJson = json;
-            const imgData = imageJson.images.find(i => i.image);
-            if (!imgData?.image)
-                return [];
-            // Image array format: [url, title?, alt?]
-            const [url, title, alt] = imgData.image;
-            const block = {
-                alt: alt || imgData.caption || '',
-                data: {
-                    hProperties: {
-                        ...(imgData.align && { align: imgData.align }),
-                        ...(imgData.border && { border: imgData.border.toString() }),
-                        ...(imgData.sizing && { width: imgWidthBySize[imgData.sizing] }),
-                    },
-                },
+const transformEmbed = (jsx) => {
+    const attrs = getAttrs(jsx);
+    const { favicon, html, iframe, image, providerName, providerUrl, title = '', url = '' } = attrs;
+    return {
+        type: NodeTypes.embedBlock,
+        title,
+        url,
+        data: {
+            hName: 'embed',
+            hProperties: {
                 title,
-                type: 'image',
                 url,
-            };
-            // Wrap in <figure> if caption is present
-            const img = imgData.caption
-                ? {
-                    children: [
-                        block,
-                        { children: textToBlock(imgData.caption), data: { hName: 'figcaption' }, type: 'figcaption' },
-                    ],
-                    data: { hName: 'figure' },
-                    type: 'figure',
-                    url,
-                }
-                : block;
-            return [wrapPinnedBlocks(img, json)];
-        }
-        // Callout: info/warning/error boxes with icon and theme
-        case 'callout': {
-            const calloutJson = json;
-            // Preset callout types map to [icon, theme] tuples
-            const types = {
-                danger: ['❗️', 'error'],
-                info: ['📘', 'info'],
-                success: ['👍', 'okay'],
-                warning: ['🚧', 'warn'],
-            };
-            // Resolve type to [icon, theme] - use preset if available, otherwise custom
-            const resolvedType = typeof calloutJson.type === 'string' && calloutJson.type in types
-                ? types[calloutJson.type]
-                : [calloutJson.icon || '👍', typeof calloutJson.type === 'string' ? calloutJson.type : 'default'];
-            const [icon, theme] = Array.isArray(resolvedType) ? resolvedType : ['👍', 'default'];
-            if (!(calloutJson.title || calloutJson.body))
-                return [];
-            // 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];
-                const heading = {
-                    type: 'heading',
-                    depth: 3,
-                    children: (firstTitle.children || []),
-                };
-                children.push(heading);
-                children.push(...titleBlocks.slice(1), ...bodyBlocks);
-            }
-            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', empty }, [
-                    'icon',
-                    'theme',
-                    'type',
-                    'empty',
-                ]),
-                children: children,
-            };
-            return [wrapPinnedBlocks(calloutElement, json)];
-        }
-        // Parameters: renders as a table (used for API parameters, etc.)
-        case 'parameters': {
-            const paramsJson = json;
-            const { cols, data, rows } = paramsJson;
-            if (!Object.keys(data).length)
-                return [];
-            /**
-             * Convert sparse key-value data to 2D array.
-             * Keys are formatted as "ROW-COL" where ROW is "h" for header or a number.
-             * Example: { "h-0": "Name", "h-1": "Type", "0-0": "id", "0-1": "string" }
-             * Becomes: [["Name", "Type"], ["id", "string"]]
-             */
-            const sparseData = Object.entries(data).reduce((mapped, [key, v]) => {
-                const [row, col] = key.split('-');
-                // Header row ("h") becomes index 0, data rows are offset by 1
-                const rowIndex = row === 'h' ? 0 : parseInt(row, 10) + 1;
-                const colIndex = parseInt(col, 10);
-                if (!mapped[rowIndex])
-                    mapped[rowIndex] = [];
-                mapped[rowIndex][colIndex] = v;
-                return mapped;
-            }, []);
-            // In compatibility mode, wrap cell content in paragraphs; otherwise inline text
-            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: '' }],
-                    type: y === 0 ? 'tableHead' : 'tableCell',
-                })),
-                type: 'tableRow',
-            }));
-            return [
-                wrapPinnedBlocks({ align: paramsJson.align ?? new Array(cols).fill('left'), children, type: 'table' }, json),
-            ];
-        }
-        // Embed: external content (YouTube, etc.) with provider detection
-        case 'embed': {
-            const embedJson = json;
-            const { html, title, url } = embedJson;
-            // Extract provider name from URL hostname (e.g., "youtube.com" → "youtube.com")
-            try {
-                embedJson.provider = new URL(url).hostname
-                    .split(/(?:www)?\./)
-                    .filter(i => i)
-                    .join('.');
-            }
-            catch {
-                embedJson.provider = url;
-            }
-            return [
-                wrapPinnedBlocks({
-                    children: [
-                        { children: [{ type: 'text', value: title || '' }], title: embedJson.provider, type: 'link', url },
-                    ],
-                    data: { hName: 'embed-block', hProperties: { ...embedJson, href: url, html, title, url } },
-                    type: 'embed',
-                }, json),
-            ];
-        }
-        // HTML block: raw HTML content (scripts enabled only in compatibility mode)
-        case 'html': {
-            const htmlJson = json;
-            return [
-                wrapPinnedBlocks({
-                    data: {
-                        hName: 'html-block',
-                        hProperties: { html: htmlJson.html, runScripts: compatibilityMode, safeMode },
-                    },
-                    type: 'html-block',
-                }, json),
-            ];
-        }
-        // Recipe/TutorialTile: renders as Recipe component
-        case 'recipe':
-        case 'tutorial-tile': {
-            const recipeJson = json;
-            if (!recipeJson.slug || !recipeJson.title)
-                return [];
-            // Create mdxJsxFlowElement directly for mdxish flow
-            // Note: Don't wrap in pinned blocks for mdxish - rehypeMdxishComponents handles component resolution
-            // The node structure matches what mdxishComponentBlocks creates for JSX tags
-            const recipeNode = {
-                type: 'mdxJsxFlowElement',
-                name: 'Recipe',
-                attributes: toAttributes(recipeJson, ['slug', 'title']),
-                children: [],
-                // Position is optional but helps with debugging
-                position: undefined,
-            };
-            return [recipeNode];
-        }
-        // Unknown block types: render as generic div with JSON properties
-        default: {
-            const text = json.text || json.html || '';
-            return [
-                wrapPinnedBlocks({ children: textToBlock(text), data: { hName: type || 'div', hProperties: json, ...json }, type: 'div' }, json),
-            ];
-        }
-    }
-}
+                ...(favicon && { favicon }),
+                ...(html && { html }),
+                ...(iframe !== undefined && { iframe }),
+                ...(image && { image }),
+                ...(providerName && { providerName }),
+                ...(providerUrl && { providerUrl }),
+            },
+        },
+        position: jsx.position,
+    };
+};
+const transformRecipe = (jsx) => {
+    const attrs = getAttrs(jsx);
+    const { backgroundColor = '', emoji = '', id = '', link = '', slug = '', title = '' } = attrs;
+    return {
+        type: NodeTypes.recipe,
+        backgroundColor,
+        emoji,
+        id,
+        link,
+        slug,
+        title,
+        position: jsx.position,
+    };
+};
 /**
- * Block-level node types that cannot be nested inside paragraphs.
- */
-const blockTypes = [
-    'heading',
-    'code',
-    'code-tabs',
-    'paragraph',
-    'blockquote',
-    'list',
-    'table',
-    'thematicBreak',
-    'html',
-    'yaml',
-    'toml',
-    'rdme-pin',
-    'rdme-callout',
-    'html-block',
-    'embed',
-    'figure',
-    'mdxJsxFlowElement',
-];
+ * Transform a magic block image node into an ImageBlock.
+ * Magic block images have structure: { type: 'image', url, title, alt, data.hProperties }
+ */
+const transformMagicBlockImage = (node) => {
+    const { alt = '', data, position, title = '', url = '' } = node;
+    const hProps = data?.hProperties || {};
+    const { align, border, width } = hProps;
+    const hProperties = {
+        alt,
+        src: url,
+        title,
+        ...(align && { align }),
+        ...(border && { border }),
+        ...(width && { width }),
+    };
+    return {
+        type: NodeTypes.imageBlock,
+        align,
+        alt,
+        border,
+        src: url,
+        title,
+        width,
+        data: {
+            hName: 'img',
+            hProperties,
+        },
+        position,
+    };
+};
 /**
- * Check if a node is a block-level node (cannot be inside a paragraph)
+ * Transform a magic block embed node into an EmbedBlock.
+ * Magic block embeds have structure: { type: 'embed', children, data.hProperties }
  */
-const isBlockNode = (node) => blockTypes.includes(node.type);
+const transformMagicBlockEmbed = (node) => {
+    const { data, position } = node;
+    const hProps = data?.hProperties || {};
+    const { favicon, html, image, providerName, providerUrl, title = '', url = '' } = hProps;
+    return {
+        type: NodeTypes.embedBlock,
+        title,
+        url,
+        data: {
+            hName: 'embed',
+            hProperties: {
+                title,
+                url,
+                ...(favicon && { favicon }),
+                ...(html && { html }),
+                ...(image && { image }),
+                ...(providerName && { providerName }),
+                ...(providerUrl && { providerUrl }),
+            },
+        },
+        position,
+    };
+};
+const COMPONENT_MAP = {
+    Callout: transformCallout,
+    Embed: transformEmbed,
+    Image: transformImage,
+    Recipe: transformRecipe,
+};
 /**
- * Unified plugin that restores magic blocks from placeholder tokens.
+ * Transform mdxJsxFlowElement nodes and magic block nodes into proper MDAST node types.
  *
- * During preprocessing, extractMagicBlocks replaces [block:TYPE]...[/block]
- * with inline code tokens like `__MAGIC_BLOCK_0__`. This plugin finds those
- * tokens in the parsed MDAST and replaces them with the parsed block content.
+ * This transformer runs after mdxishComponentBlocks and converts:
+ * - JSX component elements (Image, Callout, Embed, Recipe) into their corresponding MDAST types
+ * - Magic block image nodes (type: 'image') into image-block
+ * - Magic block embed nodes (type: 'embed') into embed-block
+ * - Figure nodes containing images (from magic blocks with captions) - transforms the inner image
+ *
+ * This is controlled by the `newEditorTypes` flag to maintain backwards compatibility.
  */
-const magicBlockRestorer = ({ blocks }) => tree => {
-    if (!blocks.length)
-        return;
-    // Map: key → original raw magic block content
-    const magicBlockKeys = new Map(blocks.map(({ key, raw }) => [key, raw]));
-    // 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;
-        const raw = magicBlockKeys.get(node.value);
-        if (!raw)
-            return undefined;
-        const children = parseMagicBlock(raw);
-        if (!children.length)
-            return undefined;
-        // 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);
-                }
-                else {
-                    inlineNodes.push(child);
-                }
-            });
-            const before = parent.children.slice(0, index);
-            const after = parent.children.slice(index + 1);
-            replacements.push({
-                parent,
-                blockNodes,
-                inlineNodes,
-                before,
-                after,
-            });
-        }
-        else {
-            // Normal case: just replace the inlineCode with the children
-            parent.children.splice(index, 1, ...children);
-        }
-        return undefined;
+const mdxishJsxToMdast = () => tree => {
+    // Transform JSX components (Image, Callout, Embed, Recipe)
+    visit(tree, 'mdxJsxFlowElement', (node, index, parent) => {
+        if (!parent || index === undefined || !node.name)
+            return;
+        const transformer = COMPONENT_MAP[node.name];
+        if (!transformer)
+            return;
+        const newNode = transformer(node);
+        // Replace the JSX node with the MDAST node
+        parent.children[index] = newNode;
     });
-    // 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);
+    // Transform magic block images (type: 'image') to image-block
+    // Note: Standard markdown images are wrapped in paragraphs and handled by imageTransformer
+    // Magic block images are direct children of root, so we handle them here
+    visit(tree, 'image', (node, index, parent) => {
+        if (!parent || index === undefined)
+            return SKIP;
+        // Skip images inside paragraphs (those are standard markdown images handled by imageTransformer)
+        if (parent.type === 'paragraph')
+            return SKIP;
+        const newNode = transformMagicBlockImage(node);
+        parent.children[index] = newNode;
+        return SKIP;
+    });
+    // Transform magic block embeds (type: 'embed') to embed-block
+    visit(tree, 'embed', (node, index, parent) => {
+        if (!parent || index === undefined)
+            return SKIP;
+        const newNode = transformMagicBlockEmbed(node);
+        parent.children[index] = newNode;
+        return SKIP;
+    });
+    // Transform images inside figure nodes (magic blocks with captions)
+    const isFigure = (node) => node.type === 'figure';
+    visit(tree, isFigure, node => {
+        // Find and transform the image child
+        node.children = node.children.map(child => {
+            if (child.type === 'image') {
+                return transformMagicBlockImage(child);
             }
-        }
-    }
+            return child;
+        });
+    });
+    return tree;
 };
-/* harmony default export */ const mdxish_magic_blocks = (magicBlockRestorer);
+/* harmony default export */ const mdxish_jsx_to_mdast = (mdxishJsxToMdast);
 
 ;// ./processor/transform/mdxish/mdxish-mermaid.ts
 
@@ -94632,25 +94895,50 @@ const componentTagPattern = /<(\/?[A-Z][A-Za-z0-9_]*)([^>]*?)(\/?)>/g;
 
 ;// ./processor/transform/mdxish/mdxish-snake-case-components.ts
 
+
 /**
  * Replaces snake_case component names with valid HTML placeholders.
  * Required because remark-parse rejects tags with underscores.
  * Example: `<Snake_case />` → `<MDXishSnakeCase0 />`
+ *
+ * Code blocks and inline code are protected and will not be transformed.
+ *
+ * @param content - The markdown content to process
+ * @param options - Options including knownComponents to filter by
  */
-function processSnakeCaseComponent(content) {
+function processSnakeCaseComponent(content, options = {}) {
+    const { knownComponents } = options;
     // Early exit if no potential snake_case components
     if (!/[A-Z][A-Za-z0-9]*_[A-Za-z0-9_]*/.test(content)) {
         return { content, mapping: {} };
     }
+    // Step 1: Extract code blocks to protect them from transformation
+    const { protectedCode, protectedContent } = protectCodeBlocks(content);
+    // Find the highest existing placeholder number to avoid collisions
+    // e.g., if content has <MDXishSnakeCase0 />, start counter from 1
+    const placeholderPattern = /MDXishSnakeCase(\d+)/g;
+    let startCounter = 0;
+    let placeholderMatch;
+    while ((placeholderMatch = placeholderPattern.exec(content)) !== null) {
+        const num = parseInt(placeholderMatch[1], 10);
+        if (num >= startCounter) {
+            startCounter = num + 1;
+        }
+    }
     const mapping = {};
     const reverseMap = new Map();
-    let counter = 0;
-    const processedContent = content.replace(componentTagPattern, (match, tagName, attrs, selfClosing) => {
+    let counter = startCounter;
+    // Step 2: Transform snake_case components in non-code content
+    const processedContent = protectedContent.replace(componentTagPattern, (match, tagName, attrs, selfClosing) => {
         if (!tagName.includes('_')) {
             return match;
         }
         const isClosing = tagName.startsWith('/');
         const cleanTagName = isClosing ? tagName.slice(1) : tagName;
+        // Only transform if it's a known component (or if no filter is provided)
+        if (knownComponents && !knownComponents.has(cleanTagName)) {
+            return match;
+        }
         let placeholder = reverseMap.get(cleanTagName);
         if (!placeholder) {
             // eslint-disable-next-line no-plusplus
@@ -94661,8 +94949,10 @@ function processSnakeCaseComponent(content) {
         const processedTagName = isClosing ? `/${placeholder}` : placeholder;
         return `<${processedTagName}${attrs}${selfClosing}>`;
     });
+    // Step 3: Restore code blocks (untouched)
+    const finalContent = restoreCodeBlocks(processedContent, protectedCode);
     return {
-        content: processedContent,
+        content: finalContent,
         mapping,
     };
 }
@@ -95044,57 +95334,1172 @@ const variablesTextTransformer = () => tree => {
 };
 /* harmony default export */ const variables_text = (variablesTextTransformer);
 
-;// ./lib/utils/extractMagicBlocks.ts
+;// ./lib/mdast-util/magic-block/index.ts
+const contextMap = new WeakMap();
 /**
- * The content matching in this regex captures everything between `[block:TYPE]`
- * and `[/block]`, including new lines. Negative lookahead for the closing
- * `[/block]` tag is required to prevent greedy matching to ensure it stops at
- * the first closing tag it encounters preventing vulnerability to polynomial
- * backtracking issues.
+ * Find the magicBlock token in the token ancestry.
  */
-const MAGIC_BLOCK_REGEX = /\[block:[^\]]{1,100}\](?:(?!\[block:)(?!\[\/block\])[\s\S])*\[\/block\]/g;
+function findMagicBlockToken() {
+    // Walk up the token stack to find the magicBlock token
+    const events = this.tokenStack;
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+        const token = events[i][0];
+        if (token.type === 'magicBlock') {
+            return token;
+        }
+    }
+    return undefined;
+}
 /**
- * Extract legacy magic block syntax from a markdown string.
- * Returns the modified markdown and an array of extracted blocks.
+ * Enter handler: Create a new magicBlock node.
  */
-function extractMagicBlocks(markdown) {
-    const blocks = [];
-    let index = 0;
-    const replaced = markdown.replace(MAGIC_BLOCK_REGEX, match => {
-        /**
-         * Key is the unique identifier for the magic block
-         */
-        const key = `__MAGIC_BLOCK_${index}__`;
-        /**
-         * Token is a wrapper around the `key` to serialize & influence how the
-         * magic block is parsed in the remark pipeline.
-         * - Use backticks so it becomes a code span, preventing `remarkParse` from
-         *   parsing special characters in the token as markdown syntax
-         * - Prepend a newline to ensure it is parsed as a block level node
-         * - Append a newline to ensure it is separated from following content
-         */
-        const token = `\n\`${key}\`\n`;
-        blocks.push({ key, raw: match, token });
-        index += 1;
-        return token;
-    });
-    return { replaced, blocks };
+function enterMagicBlock(token) {
+    // Initialize context for this magic block
+    contextMap.set(token, { blockType: '', dataChunks: [] });
+    this.enter({
+        type: 'magicBlock',
+        blockType: '',
+        data: {},
+        value: '',
+    }, token);
+}
+/**
+ * Exit handler for block type: Extract the block type from the token.
+ */
+function exitMagicBlockType(token) {
+    const blockToken = findMagicBlockToken.call(this);
+    if (!blockToken)
+        return;
+    const context = contextMap.get(blockToken);
+    if (context) {
+        context.blockType = this.sliceSerialize(token);
+    }
+}
+/**
+ * Exit handler for block data: Accumulate JSON content chunks.
+ */
+function exitMagicBlockData(token) {
+    const blockToken = findMagicBlockToken.call(this);
+    if (!blockToken)
+        return;
+    const context = contextMap.get(blockToken);
+    if (context) {
+        context.dataChunks.push(this.sliceSerialize(token));
+    }
+}
+/**
+ * Exit handler for line endings: Preserve newlines in multiline blocks.
+ */
+function exitMagicBlockLineEnding(token) {
+    const blockToken = findMagicBlockToken.call(this);
+    if (!blockToken)
+        return;
+    const context = contextMap.get(blockToken);
+    if (context) {
+        context.dataChunks.push(this.sliceSerialize(token));
+    }
+}
+/**
+ * Exit handler for end marker: If this is a failed end marker check (not the final marker),
+ * add its content to the data chunks so we don't lose characters like '['.
+ */
+function exitMagicBlockMarkerEnd(token) {
+    const blockToken = findMagicBlockToken.call(this);
+    if (!blockToken)
+        return;
+    // Get the content of the marker
+    const markerContent = this.sliceSerialize(token);
+    // If this marker doesn't end with ']', it's a failed check and content belongs to data
+    // The successful end marker would be "[/block]"
+    if (!markerContent.endsWith(']') || markerContent !== '[/block]') {
+        const context = contextMap.get(blockToken);
+        if (context) {
+            context.dataChunks.push(markerContent);
+        }
+    }
+}
+/**
+ * Exit handler: Finalize the magicBlock node with parsed JSON data.
+ */
+function exitMagicBlock(token) {
+    const context = contextMap.get(token);
+    const node = this.stack[this.stack.length - 1];
+    if (context) {
+        const rawJson = context.dataChunks.join('');
+        node.blockType = context.blockType;
+        node.value = `[block:${context.blockType}]${rawJson}[/block]`;
+        // Parse JSON data
+        try {
+            node.data = JSON.parse(rawJson.trim());
+        }
+        catch {
+            // Invalid JSON - store empty object but keep the raw value
+            node.data = {};
+        }
+        // Clean up context
+        contextMap.delete(token);
+    }
+    this.exit(token);
+}
+/**
+ * Handler to serialize magicBlock nodes back to markdown.
+ */
+const handleMagicBlock = (node) => {
+    const magicNode = node;
+    // If we have the original raw value, use it
+    if (magicNode.value) {
+        return magicNode.value;
+    }
+    // Otherwise reconstruct from parsed data
+    const json = JSON.stringify(magicNode.data, null, 2);
+    return `[block:${magicNode.blockType}]\n${json}\n[/block]`;
+};
+/**
+ * Create an extension for `mdast-util-from-markdown` to enable magic blocks.
+ *
+ * Converts micromark magic block tokens into `magicBlock` MDAST nodes.
+ *
+ * @returns Extension for `mdast-util-from-markdown`
+ */
+function magicBlockFromMarkdown() {
+    return {
+        enter: {
+            magicBlock: enterMagicBlock,
+        },
+        exit: {
+            magicBlockType: exitMagicBlockType,
+            magicBlockData: exitMagicBlockData,
+            magicBlockLineEnding: exitMagicBlockLineEnding,
+            magicBlockMarkerEnd: exitMagicBlockMarkerEnd,
+            magicBlock: exitMagicBlock,
+        },
+    };
+}
+/**
+ * Create an extension for `mdast-util-to-markdown` to serialize magic blocks.
+ *
+ * Converts `magicBlock` MDAST nodes back to `[block:TYPE]JSON[/block]` syntax.
+ *
+ * @returns Extension for `mdast-util-to-markdown`
+ */
+function magicBlockToMarkdown() {
+    return {
+        handlers: {
+            magicBlock: handleMagicBlock,
+        },
+    };
+}
+
+;// ./node_modules/micromark-util-symbol/lib/codes.js
+/**
+ * Character codes.
+ *
+ * This module is compiled away!
+ *
+ * micromark works based on character codes.
+ * This module contains constants for the ASCII block and the replacement
+ * character.
+ * A couple of them are handled in a special way, such as the line endings
+ * (CR, LF, and CR+LF, commonly known as end-of-line: EOLs), the tab (horizontal
+ * tab) and its expansion based on what column it’s at (virtual space),
+ * and the end-of-file (eof) character.
+ * As values are preprocessed before handling them, the actual characters LF,
+ * CR, HT, and NUL (which is present as the replacement character), are
+ * guaranteed to not exist.
+ *
+ * Unicode basic latin block.
+ */
+const codes = /** @type {const} */ ({
+  carriageReturn: -5,
+  lineFeed: -4,
+  carriageReturnLineFeed: -3,
+  horizontalTab: -2,
+  virtualSpace: -1,
+  eof: null,
+  nul: 0,
+  soh: 1,
+  stx: 2,
+  etx: 3,
+  eot: 4,
+  enq: 5,
+  ack: 6,
+  bel: 7,
+  bs: 8,
+  ht: 9, // `\t`
+  lf: 10, // `\n`
+  vt: 11, // `\v`
+  ff: 12, // `\f`
+  cr: 13, // `\r`
+  so: 14,
+  si: 15,
+  dle: 16,
+  dc1: 17,
+  dc2: 18,
+  dc3: 19,
+  dc4: 20,
+  nak: 21,
+  syn: 22,
+  etb: 23,
+  can: 24,
+  em: 25,
+  sub: 26,
+  esc: 27,
+  fs: 28,
+  gs: 29,
+  rs: 30,
+  us: 31,
+  space: 32,
+  exclamationMark: 33, // `!`
+  quotationMark: 34, // `"`
+  numberSign: 35, // `#`
+  dollarSign: 36, // `$`
+  percentSign: 37, // `%`
+  ampersand: 38, // `&`
+  apostrophe: 39, // `'`
+  leftParenthesis: 40, // `(`
+  rightParenthesis: 41, // `)`
+  asterisk: 42, // `*`
+  plusSign: 43, // `+`
+  comma: 44, // `,`
+  dash: 45, // `-`
+  dot: 46, // `.`
+  slash: 47, // `/`
+  digit0: 48, // `0`
+  digit1: 49, // `1`
+  digit2: 50, // `2`
+  digit3: 51, // `3`
+  digit4: 52, // `4`
+  digit5: 53, // `5`
+  digit6: 54, // `6`
+  digit7: 55, // `7`
+  digit8: 56, // `8`
+  digit9: 57, // `9`
+  colon: 58, // `:`
+  semicolon: 59, // `;`
+  lessThan: 60, // `<`
+  equalsTo: 61, // `=`
+  greaterThan: 62, // `>`
+  questionMark: 63, // `?`
+  atSign: 64, // `@`
+  uppercaseA: 65, // `A`
+  uppercaseB: 66, // `B`
+  uppercaseC: 67, // `C`
+  uppercaseD: 68, // `D`
+  uppercaseE: 69, // `E`
+  uppercaseF: 70, // `F`
+  uppercaseG: 71, // `G`
+  uppercaseH: 72, // `H`
+  uppercaseI: 73, // `I`
+  uppercaseJ: 74, // `J`
+  uppercaseK: 75, // `K`
+  uppercaseL: 76, // `L`
+  uppercaseM: 77, // `M`
+  uppercaseN: 78, // `N`
+  uppercaseO: 79, // `O`
+  uppercaseP: 80, // `P`
+  uppercaseQ: 81, // `Q`
+  uppercaseR: 82, // `R`
+  uppercaseS: 83, // `S`
+  uppercaseT: 84, // `T`
+  uppercaseU: 85, // `U`
+  uppercaseV: 86, // `V`
+  uppercaseW: 87, // `W`
+  uppercaseX: 88, // `X`
+  uppercaseY: 89, // `Y`
+  uppercaseZ: 90, // `Z`
+  leftSquareBracket: 91, // `[`
+  backslash: 92, // `\`
+  rightSquareBracket: 93, // `]`
+  caret: 94, // `^`
+  underscore: 95, // `_`
+  graveAccent: 96, // `` ` ``
+  lowercaseA: 97, // `a`
+  lowercaseB: 98, // `b`
+  lowercaseC: 99, // `c`
+  lowercaseD: 100, // `d`
+  lowercaseE: 101, // `e`
+  lowercaseF: 102, // `f`
+  lowercaseG: 103, // `g`
+  lowercaseH: 104, // `h`
+  lowercaseI: 105, // `i`
+  lowercaseJ: 106, // `j`
+  lowercaseK: 107, // `k`
+  lowercaseL: 108, // `l`
+  lowercaseM: 109, // `m`
+  lowercaseN: 110, // `n`
+  lowercaseO: 111, // `o`
+  lowercaseP: 112, // `p`
+  lowercaseQ: 113, // `q`
+  lowercaseR: 114, // `r`
+  lowercaseS: 115, // `s`
+  lowercaseT: 116, // `t`
+  lowercaseU: 117, // `u`
+  lowercaseV: 118, // `v`
+  lowercaseW: 119, // `w`
+  lowercaseX: 120, // `x`
+  lowercaseY: 121, // `y`
+  lowercaseZ: 122, // `z`
+  leftCurlyBrace: 123, // `{`
+  verticalBar: 124, // `|`
+  rightCurlyBrace: 125, // `}`
+  tilde: 126, // `~`
+  del: 127,
+  // Unicode Specials block.
+  byteOrderMarker: 65_279,
+  // Unicode Specials block.
+  replacementCharacter: 65_533 // `�`
+})
+
+;// ./lib/micromark/magic-block/syntax.ts
+
+
+/**
+ * Known magic block types that the tokenizer will recognize.
+ * Unknown types will not be tokenized as magic blocks.
+ */
+const KNOWN_BLOCK_TYPES = new Set([
+    'code',
+    'api-header',
+    'image',
+    'callout',
+    'parameters',
+    'table',
+    'embed',
+    'html',
+    'recipe',
+    'tutorial-tile',
+]);
+/**
+ * Check if a character is valid for a magic block type identifier.
+ * Types can contain alphanumeric characters and hyphens (e.g., "api-header", "tutorial-tile")
+ */
+function isTypeChar(code) {
+    return asciiAlphanumeric(code) || code === codes.dash;
+}
+/**
+ * Creates the opening marker state machine: [block:
+ * Returns the first state function to start parsing.
+ */
+function createOpeningMarkerParser(effects, nok, onComplete) {
+    const expectB = (code) => {
+        if (code !== codes.lowercaseB)
+            return nok(code);
+        effects.consume(code);
+        return expectL;
+    };
+    const expectL = (code) => {
+        if (code !== codes.lowercaseL)
+            return nok(code);
+        effects.consume(code);
+        return expectO;
+    };
+    const expectO = (code) => {
+        if (code !== codes.lowercaseO)
+            return nok(code);
+        effects.consume(code);
+        return expectC;
+    };
+    const expectC = (code) => {
+        if (code !== codes.lowercaseC)
+            return nok(code);
+        effects.consume(code);
+        return expectK;
+    };
+    const expectK = (code) => {
+        if (code !== codes.lowercaseK)
+            return nok(code);
+        effects.consume(code);
+        return expectColon;
+    };
+    const expectColon = (code) => {
+        if (code !== codes.colon)
+            return nok(code);
+        effects.consume(code);
+        effects.exit('magicBlockMarkerStart');
+        effects.enter('magicBlockType');
+        return onComplete;
+    };
+    return expectB;
+}
+/**
+ * Creates the type capture state machine.
+ * Captures type characters until ] and validates against known types.
+ */
+function createTypeCaptureParser(effects, nok, onComplete, blockTypeRef) {
+    const captureTypeFirst = (code) => {
+        // Reject empty type name [block:]
+        if (code === codes.rightSquareBracket) {
+            return nok(code);
+        }
+        if (isTypeChar(code)) {
+            blockTypeRef.value += String.fromCharCode(code);
+            effects.consume(code);
+            return captureType;
+        }
+        return nok(code);
+    };
+    const captureType = (code) => {
+        if (code === codes.rightSquareBracket) {
+            if (!KNOWN_BLOCK_TYPES.has(blockTypeRef.value)) {
+                return nok(code);
+            }
+            effects.exit('magicBlockType');
+            effects.enter('magicBlockMarkerTypeEnd');
+            effects.consume(code);
+            effects.exit('magicBlockMarkerTypeEnd');
+            return onComplete;
+        }
+        if (isTypeChar(code)) {
+            blockTypeRef.value += String.fromCharCode(code);
+            effects.consume(code);
+            return captureType;
+        }
+        return nok(code);
+    };
+    return { first: captureTypeFirst, remaining: captureType };
+}
+/**
+ * Creates the closing marker state machine: /block]
+ * Handles partial matches by calling onMismatch to fall back to data capture.
+ */
+function createClosingMarkerParser(effects, onSuccess, onMismatch, onEof, jsonState) {
+    const handleMismatch = (code) => {
+        if (jsonState && code === codes.quotationMark) {
+            jsonState.inString = true;
+        }
+        return onMismatch(code);
+    };
+    const expectSlash = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.slash)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectB;
+    };
+    const expectB = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.lowercaseB)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectL;
+    };
+    const expectL = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.lowercaseL)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectO;
+    };
+    const expectO = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.lowercaseO)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectC;
+    };
+    const expectC = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.lowercaseC)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectK;
+    };
+    const expectK = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.lowercaseK)
+            return handleMismatch(code);
+        effects.consume(code);
+        return expectBracket;
+    };
+    const expectBracket = (code) => {
+        if (code === null)
+            return onEof(code);
+        if (code !== codes.rightSquareBracket)
+            return handleMismatch(code);
+        effects.consume(code);
+        return onSuccess;
+    };
+    return { expectSlash };
 }
 /**
- * Restore extracted magic blocks back into a markdown string.
+ * Partial construct for checking non-lazy continuation.
+ * This is used by the flow tokenizer to check if we can continue
+ * parsing on the next line.
+ */
+const syntax_nonLazyContinuation = {
+    partial: true,
+    tokenize: syntax_tokenizeNonLazyContinuation,
+};
+/**
+ * Tokenizer for non-lazy continuation checking.
+ * Returns ok if the next line is non-lazy (can continue), nok if lazy.
+ */
+function syntax_tokenizeNonLazyContinuation(effects, ok, nok) {
+    const lineStart = (code) => {
+        // `this` here refers to the micromark parser
+        // since we are just passing functions as references and not actually calling them
+        // micromarks's internal parser will call this automatically with appropriate arguments
+        return this.parser.lazy[this.now().line] ? nok(code) : ok(code);
+    };
+    const start = (code) => {
+        if (code === null) {
+            return nok(code);
+        }
+        if (!markdownLineEnding(code)) {
+            return nok(code);
+        }
+        effects.enter('magicBlockLineEnding');
+        effects.consume(code);
+        effects.exit('magicBlockLineEnding');
+        return lineStart;
+    };
+    return start;
+}
+/**
+ * Create a micromark extension for magic block syntax.
+ *
+ * This extension handles both single-line and multiline magic blocks:
+ * - Flow construct (concrete): Handles block-level multiline magic blocks at document level
+ * - Text construct: Handles inline magic blocks in lists, paragraphs, etc.
+ *
+ * The flow construct is marked as "concrete" which prevents it from being
+ * interrupted by container markers (like `>` for blockquotes or `-` for lists).
  */
-function restoreMagicBlocks(replaced, blocks) {
-    // If a magic block is at the start or end of the document, the extraction
-    // token's newlines will have been trimmed during processing. We need to
-    // account for that here to ensure the token is found and replaced correctly.
-    // These extra newlines will be removed again when the final string is trimmed.
-    const content = `\n${replaced}\n`;
-    const restoredContent = blocks.reduce((acc, { token, raw }) => {
-        // Ensure each magic block is separated by newlines when restored.
-        return acc.split(token).join(`\n${raw}\n`);
-    }, content);
-    return restoredContent.trim();
+function magicBlock() {
+    return {
+        // Flow construct - handles block-level magic blocks at document root
+        // Marked as concrete to prevent interruption by containers
+        flow: {
+            [codes.leftSquareBracket]: {
+                name: 'magicBlock',
+                concrete: true,
+                tokenize: tokenizeMagicBlockFlow,
+            },
+        },
+        // Text construct - handles magic blocks in inline contexts (lists, paragraphs)
+        text: {
+            [codes.leftSquareBracket]: {
+                name: 'magicBlock',
+                tokenize: tokenizeMagicBlockText,
+            },
+        },
+    };
+}
+/**
+ * Flow tokenizer for block-level magic blocks (multiline).
+ * Uses the continuation checking pattern from code fences.
+ */
+function tokenizeMagicBlockFlow(effects, ok, nok) {
+    // State for tracking JSON content
+    const jsonState = { escapeNext: false, inString: false };
+    const blockTypeRef = { value: '' };
+    let seenOpenBrace = false;
+    // Create shared parsers for opening marker and type capture
+    const typeParser = createTypeCaptureParser(effects, nok, beforeData, blockTypeRef);
+    const openingMarkerParser = createOpeningMarkerParser(effects, nok, typeParser.first);
+    return start;
+    function start(code) {
+        if (code !== codes.leftSquareBracket)
+            return nok(code);
+        effects.enter('magicBlock');
+        effects.enter('magicBlockMarkerStart');
+        effects.consume(code);
+        return openingMarkerParser;
+    }
+    /**
+     * State before data content - handles line endings or starts data capture.
+     */
+    function beforeData(code) {
+        // EOF - magic block must be closed
+        if (code === null) {
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        // Line ending before any data - check continuation
+        if (markdownLineEnding(code)) {
+            return effects.check(syntax_nonLazyContinuation, continuationOkBeforeData, after)(code);
+        }
+        // Check for closing marker directly (without entering data)
+        // This handles cases like [block:type]\n{}\n\n[/block] where there are
+        // newlines after the data object
+        if (code === codes.leftSquareBracket) {
+            effects.enter('magicBlockMarkerEnd');
+            effects.consume(code);
+            return expectSlashFromContinuation;
+        }
+        // If we've already seen the opening brace, just continue capturing data
+        if (seenOpenBrace) {
+            effects.enter('magicBlockData');
+            return captureData(code);
+        }
+        // Skip whitespace (spaces/tabs) before the data - stay in beforeData
+        // Don't enter magicBlockData token yet until we confirm there's a '{'
+        if (code === codes.space || code === codes.horizontalTab) {
+            return beforeDataWhitespace(code);
+        }
+        // Data must start with '{' for valid JSON
+        if (code !== codes.leftCurlyBrace) {
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        // We have '{' - enter data token and start capturing
+        seenOpenBrace = true;
+        effects.enter('magicBlockData');
+        return captureData(code);
+    }
+    /**
+     * Consume whitespace before the data without creating a token.
+     * Uses a temporary token to satisfy micromark's requirement.
+     */
+    function beforeDataWhitespace(code) {
+        if (code === null) {
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            return effects.check(syntax_nonLazyContinuation, continuationOkBeforeData, after)(code);
+        }
+        if (code === codes.space || code === codes.horizontalTab) {
+            // We need to consume this but can't without a token - use magicBlockData
+            // and track that we haven't seen '{' yet
+            effects.enter('magicBlockData');
+            effects.consume(code);
+            return beforeDataWhitespaceContinue;
+        }
+        if (code === codes.leftCurlyBrace) {
+            seenOpenBrace = true;
+            effects.enter('magicBlockData');
+            return captureData(code);
+        }
+        effects.exit('magicBlock');
+        return nok(code);
+    }
+    /**
+     * Continue consuming whitespace or validate the opening brace.
+     */
+    function beforeDataWhitespaceContinue(code) {
+        if (code === null) {
+            effects.exit('magicBlockData');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockData');
+            return effects.check(syntax_nonLazyContinuation, continuationOk, after)(code);
+        }
+        if (code === codes.space || code === codes.horizontalTab) {
+            effects.consume(code);
+            return beforeDataWhitespaceContinue;
+        }
+        if (code === codes.leftCurlyBrace) {
+            seenOpenBrace = true;
+            return captureData(code);
+        }
+        effects.exit('magicBlockData');
+        effects.exit('magicBlock');
+        return nok(code);
+    }
+    /**
+     * Continuation OK before we've entered data token.
+     */
+    function continuationOkBeforeData(code) {
+        effects.enter('magicBlockLineEnding');
+        effects.consume(code);
+        effects.exit('magicBlockLineEnding');
+        return beforeData; // Stay in beforeData state - don't enter magicBlockData yet
+    }
+    function captureData(code) {
+        // EOF - magic block must be closed
+        if (code === null) {
+            effects.exit('magicBlockData');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        // At line ending, check if we can continue on the next line
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockData');
+            return effects.check(syntax_nonLazyContinuation, continuationOk, after)(code);
+        }
+        if (jsonState.escapeNext) {
+            jsonState.escapeNext = false;
+            effects.consume(code);
+            return captureData;
+        }
+        if (jsonState.inString) {
+            if (code === codes.backslash) {
+                jsonState.escapeNext = true;
+                effects.consume(code);
+                return captureData;
+            }
+            if (code === codes.quotationMark) {
+                jsonState.inString = false;
+            }
+            effects.consume(code);
+            return captureData;
+        }
+        if (code === codes.quotationMark) {
+            jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        if (code === codes.leftSquareBracket) {
+            effects.exit('magicBlockData');
+            effects.enter('magicBlockMarkerEnd');
+            effects.consume(code);
+            return expectSlash;
+        }
+        effects.consume(code);
+        return captureData;
+    }
+    /**
+     * Called when non-lazy continuation check passes - we can continue parsing.
+     */
+    function continuationOk(code) {
+        // Consume the line ending
+        effects.enter('magicBlockLineEnding');
+        effects.consume(code);
+        effects.exit('magicBlockLineEnding');
+        return continuationStart;
+    }
+    /**
+     * Start of continuation line - check for more line endings, closing marker, or start capturing data.
+     */
+    function continuationStart(code) {
+        // Handle consecutive line endings
+        if (code === null) {
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            return effects.check(syntax_nonLazyContinuation, continuationOkBeforeData, after)(code);
+        }
+        // Check if this is the start of the closing marker [/block]
+        // If so, handle it directly without entering magicBlockData
+        if (code === codes.leftSquareBracket) {
+            effects.enter('magicBlockMarkerEnd');
+            effects.consume(code);
+            return expectSlashFromContinuation;
+        }
+        effects.enter('magicBlockData');
+        return captureData(code);
+    }
+    /**
+     * Check for closing marker slash when coming from continuation.
+     * If not a closing marker, create an empty data token and continue.
+     */
+    function expectSlashFromContinuation(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockMarkerEnd');
+            return effects.check(syntax_nonLazyContinuation, continuationOkBeforeData, after)(code);
+        }
+        if (code === codes.slash) {
+            effects.consume(code);
+            return expectClosingB;
+        }
+        // Not a closing marker - this is data content
+        // Exit marker and enter data
+        effects.exit('magicBlockMarkerEnd');
+        effects.enter('magicBlockData');
+        // The [ was consumed by the marker, so we need to conceptually "have it" in our data
+        // But since we already consumed it into the marker, we need a different approach
+        // Re-classify: consume this character as data and continue
+        if (code === codes.quotationMark)
+            jsonState.inString = true;
+        effects.consume(code);
+        return captureData;
+    }
+    function expectSlash(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        // At line ending during marker parsing
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockMarkerEnd');
+            return effects.check(syntax_nonLazyContinuation, continuationOk, after)(code);
+        }
+        if (code !== codes.slash) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingB;
+    }
+    function expectClosingB(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.lowercaseB) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingL;
+    }
+    function expectClosingL(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.lowercaseL) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingO;
+    }
+    function expectClosingO(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.lowercaseO) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingC;
+    }
+    function expectClosingC(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.lowercaseC) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingK;
+    }
+    function expectClosingK(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.lowercaseK) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        return expectClosingBracket;
+    }
+    function expectClosingBracket(code) {
+        if (code === null) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.exit('magicBlock');
+            return nok(code);
+        }
+        if (code !== codes.rightSquareBracket) {
+            effects.exit('magicBlockMarkerEnd');
+            effects.enter('magicBlockData');
+            if (code === codes.quotationMark)
+                jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        effects.consume(code);
+        effects.exit('magicBlockMarkerEnd');
+        // Check for trailing whitespace on the same line
+        return consumeTrailing;
+    }
+    /**
+     * Consume trailing whitespace (spaces/tabs) on the same line after [/block].
+     * For concrete flow constructs, we must end at eol/eof or fail.
+     * Trailing whitespace is consumed; other content causes nok (text tokenizer handles it).
+     */
+    function consumeTrailing(code) {
+        // End of file - done
+        if (code === null) {
+            effects.exit('magicBlock');
+            return ok(code);
+        }
+        // Line ending - done
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlock');
+            return ok(code);
+        }
+        // Space or tab - consume as trailing whitespace
+        if (code === codes.space || code === codes.horizontalTab) {
+            effects.enter('magicBlockTrailing');
+            effects.consume(code);
+            return consumeTrailingContinue;
+        }
+        // Any other character - fail flow tokenizer, let text tokenizer handle it
+        effects.exit('magicBlock');
+        return nok(code);
+    }
+    /**
+     * Continue consuming trailing whitespace.
+     */
+    function consumeTrailingContinue(code) {
+        // End of file - done
+        if (code === null) {
+            effects.exit('magicBlockTrailing');
+            effects.exit('magicBlock');
+            return ok(code);
+        }
+        // Line ending - done
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockTrailing');
+            effects.exit('magicBlock');
+            return ok(code);
+        }
+        // More space or tab - keep consuming
+        if (code === codes.space || code === codes.horizontalTab) {
+            effects.consume(code);
+            return consumeTrailingContinue;
+        }
+        // Non-whitespace after whitespace - fail flow tokenizer
+        effects.exit('magicBlockTrailing');
+        effects.exit('magicBlock');
+        return nok(code);
+    }
+    /**
+     * Called when we can't continue (lazy line or EOF) - exit the construct.
+     */
+    function after(code) {
+        effects.exit('magicBlock');
+        return nok(code);
+    }
+}
+/**
+ * Text tokenizer for single-line magic blocks only.
+ * Used in inline contexts like list items and paragraphs.
+ * Multiline blocks are handled by the flow tokenizer.
+ */
+function tokenizeMagicBlockText(effects, ok, nok) {
+    // State for tracking JSON content
+    const jsonState = { escapeNext: false, inString: false };
+    const blockTypeRef = { value: '' };
+    let seenOpenBrace = false;
+    // Create shared parsers for opening marker and type capture
+    const typeParser = createTypeCaptureParser(effects, nok, beforeData, blockTypeRef);
+    const openingMarkerParser = createOpeningMarkerParser(effects, nok, typeParser.first);
+    // Success handler for closing marker - exits tokens and returns ok
+    const closingSuccess = (code) => {
+        effects.exit('magicBlockMarkerEnd');
+        effects.exit('magicBlock');
+        return ok(code);
+    };
+    // Mismatch handler - falls back to data capture
+    const closingMismatch = (code) => {
+        effects.exit('magicBlockMarkerEnd');
+        effects.enter('magicBlockData');
+        if (code === codes.quotationMark)
+            jsonState.inString = true;
+        effects.consume(code);
+        return captureData;
+    };
+    // EOF handler
+    const closingEof = (_code) => nok(_code);
+    // Create closing marker parsers
+    const closingFromBeforeData = createClosingMarkerParser(effects, closingSuccess, closingMismatch, closingEof, jsonState);
+    const closingFromData = createClosingMarkerParser(effects, closingSuccess, closingMismatch, closingEof, jsonState);
+    return start;
+    function start(code) {
+        if (code !== codes.leftSquareBracket)
+            return nok(code);
+        effects.enter('magicBlock');
+        effects.enter('magicBlockMarkerStart');
+        effects.consume(code);
+        return openingMarkerParser;
+    }
+    /**
+     * State before data content - handles line endings before entering data token.
+     * Whitespace before '{' is allowed.
+     */
+    function beforeData(code) {
+        // Fail on EOF - magic block must be closed
+        if (code === null) {
+            return nok(code);
+        }
+        // Handle line endings before any data - consume them without entering data token
+        if (markdownLineEnding(code)) {
+            effects.enter('magicBlockLineEnding');
+            effects.consume(code);
+            effects.exit('magicBlockLineEnding');
+            return beforeData;
+        }
+        // Check for closing marker directly (without entering data)
+        if (code === codes.leftSquareBracket) {
+            effects.enter('magicBlockMarkerEnd');
+            effects.consume(code);
+            return closingFromBeforeData.expectSlash;
+        }
+        // If we've already seen the opening brace, just continue capturing data
+        if (seenOpenBrace) {
+            effects.enter('magicBlockData');
+            return captureData(code);
+        }
+        // Skip whitespace (spaces/tabs) before the data
+        if (code === codes.space || code === codes.horizontalTab) {
+            return beforeDataWhitespace(code);
+        }
+        // Data must start with '{' for valid JSON
+        if (code !== codes.leftCurlyBrace) {
+            return nok(code);
+        }
+        // We have '{' - enter data token and start capturing
+        seenOpenBrace = true;
+        effects.enter('magicBlockData');
+        return captureData(code);
+    }
+    /**
+     * Consume whitespace before the data.
+     */
+    function beforeDataWhitespace(code) {
+        if (code === null) {
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            effects.enter('magicBlockLineEnding');
+            effects.consume(code);
+            effects.exit('magicBlockLineEnding');
+            return beforeData;
+        }
+        if (code === codes.space || code === codes.horizontalTab) {
+            effects.enter('magicBlockData');
+            effects.consume(code);
+            return beforeDataWhitespaceContinue;
+        }
+        if (code === codes.leftCurlyBrace) {
+            seenOpenBrace = true;
+            effects.enter('magicBlockData');
+            return captureData(code);
+        }
+        return nok(code);
+    }
+    /**
+     * Continue consuming whitespace or validate the opening brace.
+     */
+    function beforeDataWhitespaceContinue(code) {
+        if (code === null) {
+            effects.exit('magicBlockData');
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockData');
+            effects.enter('magicBlockLineEnding');
+            effects.consume(code);
+            effects.exit('magicBlockLineEnding');
+            return beforeData;
+        }
+        if (code === codes.space || code === codes.horizontalTab) {
+            effects.consume(code);
+            return beforeDataWhitespaceContinue;
+        }
+        if (code === codes.leftCurlyBrace) {
+            seenOpenBrace = true;
+            return captureData(code);
+        }
+        effects.exit('magicBlockData');
+        return nok(code);
+    }
+    function captureData(code) {
+        // Fail on EOF - magic block must be closed
+        if (code === null) {
+            effects.exit('magicBlockData');
+            return nok(code);
+        }
+        // Handle multiline magic blocks within text/paragraphs
+        // Exit data, consume line ending with proper token, then re-enter data
+        if (markdownLineEnding(code)) {
+            effects.exit('magicBlockData');
+            effects.enter('magicBlockLineEnding');
+            effects.consume(code);
+            effects.exit('magicBlockLineEnding');
+            return beforeData; // Go back to beforeData to handle potential empty lines
+        }
+        if (jsonState.escapeNext) {
+            jsonState.escapeNext = false;
+            effects.consume(code);
+            return captureData;
+        }
+        if (jsonState.inString) {
+            if (code === codes.backslash) {
+                jsonState.escapeNext = true;
+                effects.consume(code);
+                return captureData;
+            }
+            if (code === codes.quotationMark) {
+                jsonState.inString = false;
+            }
+            effects.consume(code);
+            return captureData;
+        }
+        if (code === codes.quotationMark) {
+            jsonState.inString = true;
+            effects.consume(code);
+            return captureData;
+        }
+        if (code === codes.leftSquareBracket) {
+            effects.exit('magicBlockData');
+            effects.enter('magicBlockMarkerEnd');
+            effects.consume(code);
+            return closingFromData.expectSlash;
+        }
+        effects.consume(code);
+        return captureData;
+    }
 }
+/* harmony default export */ const syntax = ((/* unused pure expression or super */ null && (magicBlock)));
+
+;// ./lib/micromark/magic-block/index.ts
+/**
+ * Micromark extension for magic block syntax.
+ *
+ * Usage:
+ * ```ts
+ * import { magicBlock } from './lib/micromark/magic-block';
+ *
+ * const processor = unified()
+ *   .data('micromarkExtensions', [magicBlock()])
+ * ```
+ */
+
 
 ;// ./lib/utils/mdxish/mdxish-load-components.ts
 
@@ -95161,44 +96566,52 @@ function loadComponents() {
 
 
 
+
+
 
 
 
 const defaultTransformers = [callouts, code_tabs, gemoji_, transform_embeds];
 function mdxishAstProcessor(mdContent, opts = {}) {
-    const { components: userComponents = {}, jsxContext = {}, useTailwind } = opts;
+    const { components: userComponents = {}, jsxContext = {}, newEditorTypes = false, useTailwind } = opts;
     const components = {
         ...loadComponents(),
         ...userComponents,
     };
+    // Build set of known component names for snake_case filtering
+    const knownComponents = new Set(Object.keys(components));
     // Preprocessing pipeline: Transform content to be parser-ready
-    // Step 1: Extract legacy magic blocks
-    const { replaced: contentAfterMagicBlocks, blocks } = extractMagicBlocks(mdContent);
-    // Step 2: Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
-    const contentAfterTableNormalization = normalizeTableSeparator(contentAfterMagicBlocks);
-    // Step 3: Evaluate JSX expressions in attributes
+    // Step 1: Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
+    const contentAfterTableNormalization = normalizeTableSeparator(mdContent);
+    // Step 2: Evaluate JSX expressions in attributes
     const contentAfterJSXEvaluation = preprocessJSXExpressions(contentAfterTableNormalization, jsxContext);
-    // Step 4: Replace snake_case component names with parser-safe placeholders
-    // (e.g., <Snake_case /> → <MDXishSnakeCase0 /> which will be restored after parsing)
-    const { content: parserReadyContent, mapping: snakeCaseMapping } = processSnakeCaseComponent(contentAfterJSXEvaluation);
+    // Step 3: Replace snake_case component names with parser-safe placeholders
+    const { content: parserReadyContent, mapping: snakeCaseMapping } = processSnakeCaseComponent(contentAfterJSXEvaluation, { knownComponents });
     // Create string map for tailwind transformer
     const tempComponentsMap = Object.entries(components).reduce((acc, [key, value]) => {
         acc[key] = String(value);
         return acc;
     }, {});
+    // Get mdxExpression extension and remove its flow construct to prevent
+    // `{...}` from interrupting paragraphs (which breaks multiline magic blocks)
+    const mdxExprExt = mdxExpression({ allowEmpty: true });
+    const mdxExprTextOnly = {
+        text: mdxExprExt.text,
+    };
     const processor = unified()
-        .data('micromarkExtensions', [mdxExpression({ allowEmpty: true })]) // Parse inline JSX expressions as AST nodes for later evaluation
-        .data('fromMarkdownExtensions', [mdxExpressionFromMarkdown()])
+        .data('micromarkExtensions', [magicBlock(), mdxExprTextOnly])
+        .data('fromMarkdownExtensions', [magicBlockFromMarkdown(), mdxExpressionFromMarkdown()])
         .use(remarkParse)
         .use(remarkFrontmatter)
         .use(normalize_malformed_md_syntax)
-        .use(mdxish_magic_blocks, { blocks })
+        .use(magic_block_transformer)
         .use(transform_images, { isMdxish: true })
         .use(defaultTransformers)
         .use(mdxish_component_blocks)
         .use(restore_snake_case_component_name, { mapping: snakeCaseMapping })
         .use(mdxish_tables)
         .use(mdxish_html_blocks)
+        .use(newEditorTypes ? mdxish_jsx_to_mdast : undefined) // Convert JSX elements to MDAST types
         .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 })
@@ -95217,10 +96630,14 @@ function mdxishAstProcessor(mdContent, opts = {}) {
  * Converts an Mdast to a Markdown string.
  */
 function mdxishMdastToMd(mdast) {
-    const md = unified().use(remarkGfm).use(processor_compile).use(remarkStringify, {
+    const md = unified()
+        .use(remarkGfm)
+        .use(mdxishCompilers)
+        .use(remarkStringify, {
         bullet: '-',
         emphasis: '_',
-    }).stringify(mdast);
+    })
+        .stringify(mdast);
     return md;
 }
 /**
@@ -95716,11 +97133,14 @@ const tags = (doc) => {
 
 
 
+
 const mdxishTags_tags = (doc) => {
-    const { replaced: sanitizedDoc } = extractMagicBlocks(doc);
     const set = new Set();
-    const processor = remark().use(mdxish_component_blocks);
-    const tree = processor.parse(sanitizedDoc);
+    const processor = remark()
+        .data('micromarkExtensions', [magicBlock()])
+        .data('fromMarkdownExtensions', [magicBlockFromMarkdown()])
+        .use(mdxish_component_blocks);
+    const tree = processor.parse(doc);
     visit(processor.runSync(tree), isMDXElement, (node) => {
         if (node.name?.match(/^[A-Z]/)) {
             set.add(node.name);
@@ -95741,12 +97161,15 @@ const mdxishTags_tags = (doc) => {
 
 
 
+
 /**
  * Removes Markdown and MDX comments.
  */
 async function stripComments(doc, { mdx, mdxish } = {}) {
-    const { replaced, blocks } = extractMagicBlocks(doc);
-    const processor = unified();
+    const processor = unified()
+        .data('micromarkExtensions', [magicBlock()])
+        .data('fromMarkdownExtensions', [magicBlockFromMarkdown()])
+        .data('toMarkdownExtensions', [magicBlockToMarkdown()]);
     // we still require these two extensions because:
     // 1. we can rely on remarkMdx to parse MDXish
     // 2. we need to parse JSX comments into mdxTextExpression nodes so that the transformers can pick them up
@@ -95788,10 +97211,8 @@ async function stripComments(doc, { mdx, mdxish } = {}) {
                 },
             ],
         });
-    const file = await processor.process(replaced);
-    const stringified = String(file).trim();
-    const restored = restoreMagicBlocks(stringified, blocks);
-    return restored;
+    const file = await processor.process(doc);
+    return String(file).trim();
 }
 /* harmony default export */ const lib_stripComments = (stripComments);