@readme/markdown 14.11.4 → 14.12.0

package/dist/main.node.js

@@ -24839,17 +24839,12 @@ const extractScripts = (html = '') => {
     return [cleaned, () => scripts.map(js => window.eval(js))];
 };
 const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeModeRaw = false }) => {
-    // Determine HTML source: MDXish uses html prop (from HAST), MDX uses children
-    let html = '';
-    if (htmlProp !== undefined) {
-        html = htmlProp;
-    }
-    else {
-        if (typeof children !== 'string') {
-            throw new TypeError('HTMLBlock: children must be a string');
-        }
-        html = children;
-    }
+    // Determine HTML source: MDXish uses html prop (from HAST), MDX uses children.
+    // A non-string child (no html prop) can't be injected as raw HTML — see the
+    // fail-soft fallback below.
+    const htmlSource = htmlProp !== undefined ? htmlProp : children;
+    const nonStringChildren = typeof htmlSource !== 'string';
+    const html = nonStringChildren ? '' : htmlSource;
     // eslint-disable-next-line no-param-reassign
     runScripts = typeof runScripts !== 'boolean' ? runScripts === 'true' : runScripts;
     // In MDX mode, safeMode is passed in as a boolean from JSX parsing
@@ -24860,6 +24855,11 @@ const HTMLBlock = ({ children = '', html: htmlProp, runScripts, safeMode: safeMo
         if (typeof window !== 'undefined' && typeof runScripts === 'boolean' && runScripts)
             exec();
     }, [runScripts, exec]);
+    if (nonStringChildren) {
+        // Fail soft: a non-string child (e.g. JSX that wasn't serialized back to a
+        // raw string) should never throw, so render the child nodes directly
+        return external_react_default().createElement("div", { className: "rdmd-html" }, children);
+    }
     if (safeMode) {
         return (external_react_default().createElement("pre", { className: "html-unsafe" },
             external_react_default().createElement("code", null, html)));
@@ -96670,6 +96670,9 @@ const TOP_LEVEL_TABLE_TAG_RE = /^<(?:table|Table)(?=[\s/>])/;
  * Uses `walkTags` so `<table>`s inside code spans / fenced blocks (masked away)
  * are never matched.
  *
+ * `<table>`s inside an `<HTMLBlock>` body are also ignored: that body is opaque
+ * raw HTML, so lifting a table out of it would corrupt the block.
+ *
  * Note: An implicitly-closed table (no `</table>`, so htmlparser2 synthesizes the
  * close at a later tag) is skipped: splitting there would swallow whatever
  * followed the table into the fragment and drop it, so we leave such a node
@@ -96677,21 +96680,35 @@ const TOP_LEVEL_TABLE_TAG_RE = /^<(?:table|Table)(?=[\s/>])/;
  */
 const findTableRanges = (html) => {
     const ranges = [];
-    let depth = 0;
+    let tableDepth = 0;
+    let htmlBlockDepth = 0;
     let start = 0;
     walkTags(html, {
-        onOpen: ({ name, start: openStart, isStrayCloser }) => {
-            if (name.toLowerCase() !== 'table' || isStrayCloser)
+        onOpen: ({ name, start: openStart, isSelfClosing, isStrayCloser }) => {
+            if (isStrayCloser)
                 return;
-            if (depth === 0)
+            // `<HTMLBlock/>` has no body to protect; only a real open enters one.
+            if (name === 'HTMLBlock') {
+                if (!isSelfClosing)
+                    htmlBlockDepth += 1;
+                return;
+            }
+            if (htmlBlockDepth > 0 || name.toLowerCase() !== 'table')
+                return;
+            if (tableDepth === 0)
                 start = openStart;
-            depth += 1;
+            tableDepth += 1;
         },
         onClose: ({ name, end, implicit }) => {
-            if (implicit || name.toLowerCase() !== 'table' || depth === 0)
+            if (name === 'HTMLBlock') {
+                if (!implicit && htmlBlockDepth > 0)
+                    htmlBlockDepth -= 1;
                 return;
-            depth -= 1;
-            if (depth === 0)
+            }
+            if (implicit || htmlBlockDepth > 0 || name.toLowerCase() !== 'table' || tableDepth === 0)
+                return;
+            tableDepth -= 1;
+            if (tableDepth === 0)
                 ranges.push({ start, end });
         },
     });
@@ -96711,7 +96728,9 @@ const splitHtmlWithNestedTables = (node) => {
     // This is a top-level table, so we don't need to split it
     if (TOP_LEVEL_TABLE_TAG_RE.test(value))
         return null;
-    // No table text anywhere in the value → skip the htmlparser2 walk entirely.
+    // No table text anywhere → skip the htmlparser2 walk entirely. (A `<table>` that
+    // only appears inside an `<HTMLBlock>` body still yields no ranges below, so it's
+    // left whole for `mdxishHtmlBlocks` to convert to an html-block next.)
     if (!/<\/?table/i.test(value))
         return null;
     const ranges = findTableRanges(value);
@@ -117546,6 +117565,19 @@ const compile_list_item_listItem = (node, parent, state, info) => {
 const plain_plain = (node) => node.value;
 /* harmony default export */ const compile_plain = (plain_plain);
 
+;// ./processor/compile/text.ts
+
+// A `_` flanked by word characters can never open or close emphasis under
+// CommonMark's flanking rules, so the escape mdast-util-to-markdown adds to
+// intraword underscores is unnecessary and only produces noisy `\_` diffs.
+// Uses Unicode letter/number classes so non-ASCII words (e.g. `é_pay`) match.
+const INTRAWORD_UNDERSCORE_ESCAPE = /(?<=[\p{L}\p{N}_])\\_(?=[\p{L}\p{N}_]|\\_)/gu;
+const compile_text_text = (node, parent, state, info) => {
+    const serialized = handle.text(node, parent, state, info);
+    return serialized.replace(INTRAWORD_UNDERSCORE_ESCAPE, '_');
+};
+/* harmony default export */ const compile_text = (compile_text_text);
+
 ;// ./processor/compile/index.ts
 
 
@@ -117558,11 +117590,11 @@ const plain_plain = (node) => node.value;
 
 
 
+
 function compilers(mdxish = false) {
     const data = this.data();
     const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
     const handlers = {
-        ...(mdxish && { [NodeTypes.anchor]: compile_anchor }),
         [NodeTypes.callout]: compile_callout,
         [NodeTypes.codeTabs]: compile_code_tabs,
         [NodeTypes.embedBlock]: compile_embed,
@@ -117570,15 +117602,18 @@ function compilers(mdxish = false) {
         [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,
         html: compile_compatibility,
         i: compile_compatibility,
-        ...(mdxish && { listItem: list_item }),
         plain: compile_plain,
         yaml: compile_compatibility,
+        // needed only for mdxish
+        ...(mdxish && { [NodeTypes.anchor]: compile_anchor }),
+        ...(mdxish && { listItem: list_item }),
+        ...(mdxish && { text: compile_text }),
+        ...(mdxish && { [NodeTypes.variable]: compile_variable }),
     };
     toMarkdownExtensions.push({ extensions: [{ handlers }] });
 }
@@ -119857,6 +119892,55 @@ function emptyTaskListItemFromMarkdown() {
     };
 }
 
+;// ./lib/mdast-util/jsx-table/index.ts
+const jsx_table_contextMap = new WeakMap();
+function findJsxTableToken() {
+    const events = this.tokenStack;
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+        if (events[i][0].type === 'jsxTable')
+            return events[i][0];
+    }
+    return undefined;
+}
+function enterJsxTable(token) {
+    jsx_table_contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
+    this.enter({ type: 'html', value: '' }, token);
+}
+function exitJsxTableData(token) {
+    const tableToken = findJsxTableToken.call(this);
+    if (!tableToken)
+        return;
+    const ctx = jsx_table_contextMap.get(tableToken);
+    if (ctx) {
+        const gap = token.start.line - ctx.lastEndLine;
+        if (ctx.chunks.length > 0 && gap > 0) {
+            ctx.chunks.push('\n'.repeat(gap));
+        }
+        ctx.chunks.push(this.sliceSerialize(token));
+        ctx.lastEndLine = token.end.line;
+    }
+}
+function exitJsxTable(token) {
+    const ctx = jsx_table_contextMap.get(token);
+    const node = this.stack[this.stack.length - 1];
+    if (ctx) {
+        node.value = ctx.chunks.join('');
+        jsx_table_contextMap.delete(token);
+    }
+    this.exit(token);
+}
+function jsxTableFromMarkdown() {
+    return {
+        enter: {
+            jsxTable: enterJsxTable,
+        },
+        exit: {
+            jsxTableData: exitJsxTableData,
+            jsxTable: exitJsxTable,
+        },
+    };
+}
+
 ;// ./lib/mdast-util/magic-block/index.ts
 const magic_block_contextMap = new WeakMap();
 /**
@@ -120046,867 +120130,16 @@ function mdxComponentFromMarkdown() {
     };
 }
 
-;// ./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 };
-}
-/**
- * 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;
-}
+;// ./node_modules/micromark-util-symbol/lib/types.js
 /**
- * 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.
+ * This module is compiled away!
  *
- * The flow construct is marked as "concrete" which prevents it from being
- * interrupted by container markers (like `>` for blockquotes or `-` for lists).
- */
-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()])
- * ```
- */
-
-
-;// ./node_modules/micromark-util-symbol/lib/types.js
-/**
- * This module is compiled away!
- *
- * Here is the list of all types of tokens exposed by micromark, with a short
- * explanation of what they include and where they are found.
- * In picking names, generally, the rule is to be as explicit as possible
- * instead of reusing names.
- * For example, there is a `definitionDestination` and a `resourceDestination`,
- * instead of one shared name.
+ * Here is the list of all types of tokens exposed by micromark, with a short
+ * explanation of what they include and where they are found.
+ * In picking names, generally, the rule is to be as explicit as possible
+ * instead of reusing names.
+ * For example, there is a `definitionDestination` and a `resourceDestination`,
+ * instead of one shared name.
  */
 
 // Note: when changing the next record, you must also change `TokenTypeMap`
@@ -121352,36 +120585,18 @@ const types_types = /** @type {const} */ ({
   chunkString: 'chunkString'
 })
 
-;// ./lib/micromark/mdx-component/syntax.ts
-
-
-
+;// ./lib/micromark/jsx-table/syntax.ts
 
 
-// Raw tags (type-1: pre/script/style/textarea) and block tags (type-6: div,
-// section, …) always start a block, so they stay flow even with trailing
-// content. Other lowercase tags (i, span, …) follow the type-7 rule and only
-// stay flow when nothing trails the close tag.
-const htmlFlowTagNames = new Set([...htmlRawNames, ...htmlBlockNames]);
-// Lowercase type-6 block tags claimable in flow even without a `{…}` attribute, so
-// blank lines between nested JSX siblings don't fragment the block. Excludes table
-// tags (mdxishTables owns their blank lines) and voids (never close).
-const plainBlockClaimTagNames = new Set([...htmlBlockNames].filter(tag => !HTML_TABLE_STRUCTURE_TAGS.has(tag) && !HTML_VOID_ELEMENTS.has(tag)));
 const syntax_nonLazyContinuationStart = {
     tokenize: syntax_tokenizeNonLazyContinuationStart,
     partial: true,
 };
-// Lookahead for `plainClaimLineStart`: is this line markup-only, or a paragraph
-// that merely starts with a tag? Run via `effects.check` so it never consumes.
-const markupOnlyContinuation = {
-    tokenize: tokenizeMarkupOnlyContinuation,
-    partial: true,
-};
-function resolveToMdxComponent(events) {
+function resolveToJsxTable(events) {
     let index = events.length;
     while (index > 0) {
         index -= 1;
-        if (events[index][0] === 'enter' && events[index][1].type === 'mdxComponent') {
+        if (events[index][0] === 'enter' && events[index][1].type === 'jsxTable') {
             break;
         }
     }
@@ -121392,61 +120607,1167 @@ function resolveToMdxComponent(events) {
     }
     return events;
 }
-const mdxComponentFlowConstruct = {
-    name: 'mdxComponent',
-    tokenize: createTokenize('flow'),
-    resolveTo: resolveToMdxComponent,
+const jsxTableConstruct = {
+    name: 'jsxTable',
+    tokenize: tokenizeJsxTable,
+    resolveTo: resolveToJsxTable,
     concrete: true,
 };
-const mdxComponentTextConstruct = {
-    name: 'mdxComponentText',
-    tokenize: createTokenize('text'),
-};
-/**
- * Factory for both flow (block) and text (inline) variants.
- *
- * **Flow** — the original behavior: claims PascalCase components (always) and
- * lowercase HTML tags that carry at least one `{…}` attribute expression.
- * Multi-line, concrete, `afterClose` consumes the rest of the line.
- *
- * **Text** — runs inside paragraphs / inline context. Claims lowercase tags and
- * inline PascalCase components (`INLINE_COMPONENT_TAGS` — Anchor, Glossary), both
- * gated on at least one `{…}` brace attribute. All other PascalCase stays
- * flow-only, matching how ReadMe's custom components are authored. Aborts on line
- * endings (inline constructs don't span lines) and exits immediately after
- * `</tag>` so the paragraph's inline parser picks up the trailing text.
- */
-function createTokenize(mode) {
-    const isFlow = mode === 'flow';
-    return function tokenize(effects, ok, nok) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const self = this;
-        let tagName = '';
-        let depth = 0;
-        let closingTagName = '';
-        // For lowercase tags we only want to claim the block if it uses JSX
-        // attribute expression syntax (`attr={...}`). Plain HTML should fall
-        // through to CommonMark html-flow. Flow mode claims any PascalCase block
-        // component; text mode claims only inline PascalCase components
-        // (INLINE_COMPONENT_TAGS — Anchor, Glossary), also brace-gated.
-        let isLowercaseTag = false;
-        let sawBraceAttr = false;
-        // A plain lowercase block tag claimed without a `{…}` attribute, gated by
-        // `plainClaimLineStart`: after a blank line it may only continue on a tag line.
-        let isPlainBlockClaim = false;
-        let pendingBlankLine = false;
-        // Code span tracking
-        let codeSpanOpenSize = 0;
-        let codeSpanCloseSize = 0;
-        // Fenced code block tracking
-        let fenceChar = null;
-        let fenceLength = 0;
-        let fenceCloseLength = 0;
-        let atLineStart = false;
-        // True once this construct consumes any line ending; lets `afterClose`
-        // treat only single-line lowercase tags as inline candidates.
-        let sawLineEnding = false;
-        // Bail when the opener line has unmatched tag-like tokens in its body.
+function tokenizeJsxTable(effects, ok, nok) {
+    let codeSpanOpenSize = 0;
+    let codeSpanCloseSize = 0;
+    let depth = 1;
+    const ABLE_SUFFIX = [codes.lowercaseA, codes.lowercaseB, codes.lowercaseL, codes.lowercaseE];
+    /** Build a state chain that matches a sequence of character codes. */
+    function matchChars(chars, onMatch, onFail) {
+        if (chars.length === 0)
+            return onMatch;
+        return ((code) => {
+            if (code === chars[0]) {
+                effects.consume(code);
+                return matchChars(chars.slice(1), onMatch, onFail);
+            }
+            return onFail(code);
+        });
+    }
+    return start;
+    function start(code) {
+        if (code !== codes.lessThan)
+            return nok(code);
+        effects.enter('jsxTable');
+        effects.enter('jsxTableData');
+        effects.consume(code);
+        return afterLessThan;
+    }
+    function afterLessThan(code) {
+        if (code === codes.uppercaseT || code === codes.lowercaseT) {
+            effects.consume(code);
+            return matchChars(ABLE_SUFFIX, afterTagName, nok);
+        }
+        return nok(code);
+    }
+    function afterTagName(code) {
+        if (code === codes.greaterThan || code === codes.slash || code === codes.space || code === codes.horizontalTab) {
+            effects.consume(code);
+            return body;
+        }
+        return nok(code);
+    }
+    function body(code) {
+        // Reject unclosed <Table> so it falls back to normal HTML block parsing
+        // instead of swallowing all subsequent content to EOF
+        if (code === null) {
+            return nok(code);
+        }
+        if (markdownLineEnding(code)) {
+            effects.exit('jsxTableData');
+            return continuationStart(code);
+        }
+        if (code === codes.backslash) {
+            effects.consume(code);
+            return escapedChar;
+        }
+        if (code === codes.lessThan) {
+            effects.consume(code);
+            return closeSlash;
+        }
+        // Skip over backtick code spans so `</Table>` in inline code isn't
+        // treated as the closing tag
+        if (code === codes.graveAccent) {
+            codeSpanOpenSize = 0;
+            return countOpenTicks(code);
+        }
+        effects.consume(code);
+        return body;
+    }
+    function countOpenTicks(code) {
+        if (code === codes.graveAccent) {
+            codeSpanOpenSize += 1;
+            effects.consume(code);
+            return countOpenTicks;
+        }
+        return inCodeSpan(code);
+    }
+    function inCodeSpan(code) {
+        if (code === null || markdownLineEnding(code))
+            return body(code);
+        if (code === codes.graveAccent) {
+            codeSpanCloseSize = 0;
+            return countCloseTicks(code);
+        }
+        effects.consume(code);
+        return inCodeSpan;
+    }
+    function countCloseTicks(code) {
+        if (code === codes.graveAccent) {
+            codeSpanCloseSize += 1;
+            effects.consume(code);
+            return countCloseTicks;
+        }
+        return codeSpanCloseSize === codeSpanOpenSize ? body(code) : inCodeSpan(code);
+    }
+    function escapedChar(code) {
+        if (code === null || markdownLineEnding(code)) {
+            return body(code);
+        }
+        effects.consume(code);
+        return body;
+    }
+    function closeSlash(code) {
+        if (code === codes.slash) {
+            effects.consume(code);
+            return closeTagFirstChar;
+        }
+        if (code === codes.uppercaseT || code === codes.lowercaseT) {
+            effects.consume(code);
+            return matchChars(ABLE_SUFFIX, openAfterTagName, body);
+        }
+        return body(code);
+    }
+    function closeTagFirstChar(code) {
+        if (code === codes.uppercaseT || code === codes.lowercaseT) {
+            effects.consume(code);
+            return matchChars(ABLE_SUFFIX, closeGt, body);
+        }
+        return body(code);
+    }
+    function openAfterTagName(code) {
+        if (code === codes.greaterThan || code === codes.slash || code === codes.space || code === codes.horizontalTab) {
+            depth += 1;
+            effects.consume(code);
+            return body;
+        }
+        return body(code);
+    }
+    function closeGt(code) {
+        if (code === codes.greaterThan) {
+            depth -= 1;
+            effects.consume(code);
+            if (depth === 0) {
+                return afterClose;
+            }
+            return body;
+        }
+        return body(code);
+    }
+    function afterClose(code) {
+        if (code === null || markdownLineEnding(code)) {
+            effects.exit('jsxTableData');
+            effects.exit('jsxTable');
+            return ok(code);
+        }
+        effects.consume(code);
+        return afterClose;
+    }
+    // Line ending handling — follows the htmlFlow pattern
+    function continuationStart(code) {
+        return effects.check(syntax_nonLazyContinuationStart, continuationStartNonLazy, continuationAfter)(code);
+    }
+    function continuationStartNonLazy(code) {
+        effects.enter(types_types.lineEnding);
+        effects.consume(code);
+        effects.exit(types_types.lineEnding);
+        return continuationBefore;
+    }
+    function continuationBefore(code) {
+        if (code === null || markdownLineEnding(code)) {
+            return continuationStart(code);
+        }
+        effects.enter('jsxTableData');
+        return body(code);
+    }
+    function continuationAfter(code) {
+        // At EOF without </Table>, reject so content isn't swallowed
+        if (code === null) {
+            return nok(code);
+        }
+        effects.exit('jsxTable');
+        return ok(code);
+    }
+}
+function syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    return start;
+    function start(code) {
+        if (markdownLineEnding(code)) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return after;
+        }
+        return nok(code);
+    }
+    function after(code) {
+        if (self.parser.lazy[self.now().line]) {
+            return nok(code);
+        }
+        return ok(code);
+    }
+}
+/**
+ * Micromark extension that tokenizes `<Table>...</Table>` and `<table>...</table>`
+ * as a single flow block.
+ *
+ * Prevents CommonMark HTML block type 6 from fragmenting table blocks at blank lines.
+ */
+function jsxTable() {
+    return {
+        flow: {
+            [codes.lessThan]: [jsxTableConstruct],
+        },
+    };
+}
+
+;// ./lib/micromark/jsx-table/index.ts
+
+
+;// ./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 };
+}
+/**
+ * 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 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/micromark/mdx-component/syntax.ts
+
+
+
+
+
+// Raw tags (type-1: pre/script/style/textarea) and block tags (type-6: div,
+// section, …) always start a block, so they stay flow even with trailing
+// content. Other lowercase tags (i, span, …) follow the type-7 rule and only
+// stay flow when nothing trails the close tag.
+const htmlFlowTagNames = new Set([...htmlRawNames, ...htmlBlockNames]);
+// Lowercase type-6 block tags claimable in flow even without a `{…}` attribute, so
+// blank lines between nested JSX siblings don't fragment the block. Excludes table
+// tags (mdxishTables owns their blank lines) and voids (never close).
+const plainBlockClaimTagNames = new Set([...htmlBlockNames].filter(tag => !HTML_TABLE_STRUCTURE_TAGS.has(tag) && !HTML_VOID_ELEMENTS.has(tag)));
+const mdx_component_syntax_nonLazyContinuationStart = {
+    tokenize: mdx_component_syntax_tokenizeNonLazyContinuationStart,
+    partial: true,
+};
+// Lookahead for `plainClaimLineStart`: is this line markup-only, or a paragraph
+// that merely starts with a tag? Run via `effects.check` so it never consumes.
+const markupOnlyContinuation = {
+    tokenize: tokenizeMarkupOnlyContinuation,
+    partial: true,
+};
+function resolveToMdxComponent(events) {
+    let index = events.length;
+    while (index > 0) {
+        index -= 1;
+        if (events[index][0] === 'enter' && events[index][1].type === 'mdxComponent') {
+            break;
+        }
+    }
+    if (index > 1 && events[index - 2][1].type === types_types.linePrefix) {
+        events[index][1].start = events[index - 2][1].start;
+        events[index + 1][1].start = events[index - 2][1].start;
+        events.splice(index - 2, 2);
+    }
+    return events;
+}
+const mdxComponentFlowConstruct = {
+    name: 'mdxComponent',
+    tokenize: createTokenize('flow'),
+    resolveTo: resolveToMdxComponent,
+    concrete: true,
+};
+const mdxComponentTextConstruct = {
+    name: 'mdxComponentText',
+    tokenize: createTokenize('text'),
+};
+/**
+ * Factory for both flow (block) and text (inline) variants.
+ *
+ * **Flow** — the original behavior: claims PascalCase components (always) and
+ * lowercase HTML tags that carry at least one `{…}` attribute expression.
+ * Multi-line, concrete, `afterClose` consumes the rest of the line.
+ *
+ * **Text** — runs inside paragraphs / inline context. Claims lowercase tags and
+ * inline PascalCase components (`INLINE_COMPONENT_TAGS` — Anchor, Glossary), both
+ * gated on at least one `{…}` brace attribute. All other PascalCase stays
+ * flow-only, matching how ReadMe's custom components are authored. Aborts on line
+ * endings (inline constructs don't span lines) and exits immediately after
+ * `</tag>` so the paragraph's inline parser picks up the trailing text.
+ */
+function createTokenize(mode) {
+    const isFlow = mode === 'flow';
+    return function tokenize(effects, ok, nok) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        let tagName = '';
+        let depth = 0;
+        let closingTagName = '';
+        // For lowercase tags we only want to claim the block if it uses JSX
+        // attribute expression syntax (`attr={...}`). Plain HTML should fall
+        // through to CommonMark html-flow. Flow mode claims any PascalCase block
+        // component; text mode claims only inline PascalCase components
+        // (INLINE_COMPONENT_TAGS — Anchor, Glossary), also brace-gated.
+        let isLowercaseTag = false;
+        let sawBraceAttr = false;
+        // A plain lowercase block tag claimed without a `{…}` attribute, gated by
+        // `plainClaimLineStart`: after a blank line it may only continue on a tag line.
+        let isPlainBlockClaim = false;
+        let pendingBlankLine = false;
+        // Code span tracking
+        let codeSpanOpenSize = 0;
+        let codeSpanCloseSize = 0;
+        // Fenced code block tracking
+        let fenceChar = null;
+        let fenceLength = 0;
+        let fenceCloseLength = 0;
+        let atLineStart = false;
+        // True once this construct consumes any line ending; lets `afterClose`
+        // treat only single-line lowercase tags as inline candidates.
+        let sawLineEnding = false;
+        // Bail when the opener line has unmatched tag-like tokens in its body.
         // `<Foo>_<Bar>.csv` leaves opens > closes; matched shapes like
         // `<Callout>x <strong>y</strong>` balance to 0. Without this,
         // `concrete: true` causes orphan openers to eat sibling blockquotes.
@@ -121734,7 +122055,7 @@ function createTokenize(mode) {
         }
         // Continuation for multi-line opening tags
         function openTagContinuationStart(code) {
-            return effects.check(syntax_nonLazyContinuationStart, openTagContinuationNonLazy, continuationAfter)(code);
+            return effects.check(mdx_component_syntax_nonLazyContinuationStart, openTagContinuationNonLazy, continuationAfter)(code);
         }
         function openTagContinuationNonLazy(code) {
             sawLineEnding = true;
@@ -121859,7 +122180,7 @@ function createTokenize(mode) {
             return inFencedCode;
         }
         function fencedCodeContinuationStart(code) {
-            return effects.check(syntax_nonLazyContinuationStart, fencedCodeContinuationNonLazy, continuationAfter)(code);
+            return effects.check(mdx_component_syntax_nonLazyContinuationStart, fencedCodeContinuationNonLazy, continuationAfter)(code);
         }
         function fencedCodeContinuationNonLazy(code) {
             sawLineEnding = true;
@@ -121874,6 +122195,16 @@ function createTokenize(mode) {
             }
             effects.enter('mdxComponentData');
             fenceCloseLength = 0;
+            return fencedCodeMaybeClose(code);
+        }
+        // Skip leading indentation before the closing-fence check: an indented fence
+        // (the norm in a component body) closes on an equally-indented line, else the
+        // closer is never matched and scanning runs to EOF (CX-3704).
+        function fencedCodeMaybeClose(code) {
+            if (markdownSpace(code)) {
+                effects.consume(code);
+                return fencedCodeMaybeClose;
+            }
             // Check for closing fence
             if (code === fenceChar) {
                 fenceCloseLength = 1;
@@ -122057,7 +122388,7 @@ function createTokenize(mode) {
         }
         // ── Body continuation (line endings) ───────────────────────────────────
         function bodyContinuationStart(code) {
-            return effects.check(syntax_nonLazyContinuationStart, bodyContinuationNonLazy, continuationAfter)(code);
+            return effects.check(mdx_component_syntax_nonLazyContinuationStart, bodyContinuationNonLazy, continuationAfter)(code);
         }
         function bodyContinuationNonLazy(code) {
             sawLineEnding = true;
@@ -122089,6 +122420,13 @@ function createTokenize(mode) {
         }
         // Dispatch a non-blank continuation line: fenced code at line start, else body.
         function bodyLineStart(code) {
+            // Skip leading indentation while staying "at line start" so an indented
+            // fence is still recognized. Otherwise the first space clears `atLineStart`
+            // and its content — including any unbalanced `{` — stays live text (CX-3704).
+            if (atLineStart && markdownSpace(code)) {
+                effects.consume(code);
+                return bodyLineStart;
+            }
             if (atLineStart && code === codes.tilde)
                 return bodyAfterLineStart(code);
             if (atLineStart && code === codes.graveAccent) {
@@ -122139,7 +122477,7 @@ function createTokenize(mode) {
         }
     };
 }
-function syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
+function mdx_component_syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const self = this;
     return start;
@@ -122247,9 +122585,20 @@ function mdxComponent() {
 
 
 
+
+
+
+
+
+
 const buildInlineMdProcessor = (safeMode) => {
-    const micromarkExts = [mdxComponent(), syntax_gemoji(), legacyVariable(), magicBlock()];
+    // `jsxTable` must be present so a `<Table>`/`<table>` nested in a component
+    // body (e.g. a `<Callout>`) is captured as one html node. Without it, blank
+    // lines between rows let CommonMark HTML block type 6 fragment the table and
+    // its rows spill out as text / indented code blocks (CX-3705).
+    const micromarkExts = [jsxTable(), mdxComponent(), syntax_gemoji(), legacyVariable(), magicBlock()];
     const fromMarkdownExts = [
+        jsxTableFromMarkdown(),
         mdxComponentFromMarkdown(),
         gemojiFromMarkdown(),
         legacyVariableFromMarkdown(),
@@ -122309,6 +122658,65 @@ const toMdxJsxTextElement = (name, attributes, children, position) => ({
     children,
     ...(position ? { position } : {}),
 });
+// Raw-body tags (pre/script/style/textarea) must stay byte-exact; table
+// structure (`table` + `tableTags`) is owned by `mdxishTables` and figures by
+// `mdxishJsxToMdast`, both of which run later on raw html nodes.
+const NON_PROMOTABLE_PLAIN_TAGS = new Set([...htmlRawNames, ...tableTags, 'table', 'figure', 'figcaption']);
+const NESTED_TABLE_RE = /<table[\s>]/i;
+const isMarkdownPromotableHtmlTag = (tag) => !NON_PROMOTABLE_PLAIN_TAGS.has(tag);
+// Expression nodes count as plain so `<div>{1+1}</div>` keeps its current
+// literal-brace behavior; variables/glossary already resolve inside raw html.
+const PLAIN_CONTENT_TYPES = new Set([
+    'paragraph',
+    'text',
+    'html',
+    'mdxTextExpression',
+    'mdxFlowExpression',
+    NodeTypes.variable,
+    NodeTypes.glossary,
+]);
+// Promoting plain HTML is only worth bypassing rehype-raw's parse5 pass when
+// the body parses into an actual markdown construct.
+const containsMarkdownConstruct = (nodes) => nodes.some(node => !PLAIN_CONTENT_TYPES.has(node.type) ||
+    ('children' in node && Array.isArray(node.children) && containsMarkdownConstruct(node.children)));
+/**
+ * Index of the `</tag>` that balances the already-consumed opening tag (the
+ * caller starts us one level deep). `lastIndexOf` mis-slices sibling same-tag
+ * pairs like `<div>**a**</div><div>**b**</div>`, so we depth-match instead —
+ * delegating to `walkTags` (htmlparser2) so quoted attributes (`title="</div>"`),
+ * code spans, and legacy `<<VARIABLE>>` are handled for free. Returns -1 when
+ * the wrapper is left open.
+ */
+function findBalancedClosingTagIndex(content, tag) {
+    const target = tag.toLowerCase();
+    const canonicalCloserLength = tag.length + 3; // `</tag>`
+    // The caller already stripped the opening tag, so re-attach one: htmlparser2
+    // drops an unmatched closer, and we want it balanced. Offsets shift by the
+    // prefix length.
+    const prefix = `<${tag}>`;
+    let depth = 0;
+    let closeIndex = -1;
+    walkTags(prefix + content, {
+        onOpen: ({ name, isSelfClosing, isStrayCloser }) => {
+            if (closeIndex >= 0 || isSelfClosing || isStrayCloser)
+                return;
+            if (name.toLowerCase() === target)
+                depth += 1;
+        },
+        onClose: ({ name, start, end, implicit }) => {
+            if (closeIndex >= 0 || implicit || name.toLowerCase() !== target)
+                return;
+            // Only canonical `</tag>` closers — the caller slices by that length, so a
+            // whitespaced `</tag >` would misalign; leaving it unmatched keeps it raw.
+            if (end - start !== canonicalCloserLength)
+                return;
+            depth -= 1;
+            if (depth === 0)
+                closeIndex = start - prefix.length;
+        },
+    });
+    return closeIndex;
+}
 
 ;// ./processor/transform/mdxish/components/inline-html.ts
 
@@ -122440,70 +122848,168 @@ const mdxishInlineMdxComponents = () => tree => {
 };
 /* harmony default export */ const inline_mdx_blocks = (mdxishInlineMdxComponents);
 
+;// ./processor/transform/mdxish/terminate-html-flow-blocks.ts
+
+
+
+const STANDALONE_HTML_LINE_REGEX = /^(<[a-z][^<>]*>|<\/[a-z][^<>]*>)+\s*$/;
+const HTML_LINE_WITH_CONTENT_REGEX = /^<[a-z][^<>]*>.*<\/[a-z][^<>]*>(?:[^<]*)$/;
+// A line that is exactly one lowercase opening (or self-closing) tag — the shape
+// that opens a CommonMark type-6/7 HTML block and swallows the lines below it.
+const SINGLE_OPENING_TAG_REGEX = /^<[a-z][^<>]*>$/;
+// Tags whose contents must be preserved as is, inserting a blank line after the
+// opener corrupts the payload.
+// htmlRawNames here refer to <pre>, <textarea>, <script>, <style>
+const RAW_CONTENT_TAGS = [...htmlRawNames, ...HTML_TABLE_STRUCTURE_TAGS];
+// The `(?=[\s/>])` lookahead avoids false matches on lookalike names like `<script-foo>`.
+const RAW_CONTENT_TAG_MATCHERS = RAW_CONTENT_TAGS.map(tag => ({
+    open: new RegExp(`<${tag}(?=[\\s/>])[^>]*?(?<!/)>`, 'gi'),
+    close: new RegExp(`</${tag}(?=[\\s>])[^>]*>`, 'gi'),
+}));
+function isLineHtml(line) {
+    return STANDALONE_HTML_LINE_REGEX.test(line) || HTML_LINE_WITH_CONTENT_REGEX.test(line);
+}
+// Per-tag {opens, closes} counts of RAW_CONTENT_TAGS on one line — feeds both the
+// per-line net-open check and the cumulative still-open depth tracking.
+function countRawContentTags(line) {
+    return RAW_CONTENT_TAG_MATCHERS.map(({ open, close }) => ({
+        opens: (line.match(open) ?? []).length,
+        closes: (line.match(close) ?? []).length,
+    }));
+}
+// Indentation width in columns, counting a tab as 4 per CommonMark.
+function indentWidth(line) {
+    const leading = line.match(/^[ \t]*/)?.[0] ?? '';
+    return leading.replace(/\t/g, '    ').length;
+}
+/**
+ * Decides whether a blank line belongs between `line` and `next` so the HTML
+ * flow block opened on `line` terminates and `next` parses as markdown.
+ */
+function shouldTerminateBetween(line, next, { insideRawContent, lineLeavesRawOpen }) {
+    if (next.trim().length === 0)
+        return false;
+    const currentIndent = indentWidth(line);
+    const nextIndent = indentWidth(next);
+    // 4+ columns is CommonMark indented-code territory: an inserted blank line
+    // would turn the next line into a code block instead of freeing it (#1344).
+    if (currentIndent > 3 || nextIndent > 3)
+        return false;
+    const currentTrimmed = line.trim();
+    const nextTrimmed = next.trim();
+    if (!isLineHtml(currentTrimmed) || isLineHtml(nextTrimmed) || lineLeavesRawOpen) {
+        return false;
+    }
+    // Column-0 pairs keep the original (pre-relaxation) rule, deliberately ignoring
+    // `insideRawContent`: one unclosed <pre>/<table> typo would otherwise suppress
+    // termination for the whole rest of the document.
+    if (currentIndent === 0 && nextIndent === 0)
+        return true;
+    // Indented shapes (either line at 1–3 columns) are stricter: only a lone opening
+    // tag followed by markdown. A next line opening a tag or expression must stay
+    // glued for the mdxComponent tokenizer; raw-content payloads stay byte-exact.
+    return (!insideRawContent &&
+        SINGLE_OPENING_TAG_REGEX.test(currentTrimmed) &&
+        !nextTrimmed.startsWith('<') &&
+        !nextTrimmed.startsWith('{'));
+}
+/**
+ * CommonMark HTML blocks (types 6/7) end only at a blank line, so markdown on the
+ * next line is swallowed as HTML (`## heading` after `<div>` renders as literal text).
+ * Inserts the missing blank line; the gating rules live in `shouldTerminateBetween`.
+ *
+ * @link https://spec.commonmark.org/0.29/#html-blocks
+ */
+function terminateHtmlFlowBlocks(content) {
+    const { protectedContent, protectedCode } = protectCodeBlocks(content);
+    const lines = protectedContent.split('\n');
+    const result = [];
+    // Per-tag count of still-open raw-content elements at the current boundary.
+    const rawContentDepths = RAW_CONTENT_TAG_MATCHERS.map(() => 0);
+    for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        result.push(line);
+        const tagCounts = countRawContentTags(line);
+        tagCounts.forEach(({ opens, closes }, tagIndex) => {
+            rawContentDepths[tagIndex] = Math.max(0, rawContentDepths[tagIndex] + opens - closes);
+        });
+        const next = lines[i + 1];
+        const rawContentFacts = {
+            insideRawContent: rawContentDepths.some(depth => depth > 0),
+            lineLeavesRawOpen: tagCounts.some(({ opens, closes }) => opens > closes),
+        };
+        if (next !== undefined && shouldTerminateBetween(line, next, rawContentFacts)) {
+            result.push('');
+        }
+    }
+    return restoreCodeBlocks(result.join('\n'), protectedCode);
+}
+
 ;// ./processor/transform/mdxish/components/mdx-blocks.ts
 
 
 
 
 
-/** Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
+
+
+// Matches a JSX attribute expression (e.g. `key={i}`) anywhere in a string. */
 const NESTED_ATTR_EXPRESSION_RE = /[\w-]+\s*=\s*\{/;
-/**
- * Reduce leading whitespace on all lines just enough to prevent
- * remark from treating indented content as code blocks (4+ spaces).
- * Preserves relative indentation so whitespace text nodes are
- * maintained in the HAST output.
+// Name shape mirrors `componentTagPattern`; the lookbehind skips the inner tag
+// of a legacy `<<VARIABLE>>`.
+const NESTED_COMPONENT_TAG_RE = /(?<!<)<([A-Z][A-Za-z0-9_]*)[\s/>]/g;
+// Excludes tags with dedicated transformers (`Table`, `HTMLBlock`, inline
+// components), which expect their wrapper to stay raw.
+const hasNestedGenericComponentTag = (content) => [...content.matchAll(NESTED_COMPONENT_TAG_RE)].some(match => !GENERIC_MDX_COMPONENT_EXCLUDED_TAGS.has(match[1]));
+/**
+ * Strip the shared leading indentation from a component body so readability indentation
+ * isn't parsed as indented code (4+ spaces), e.g. `  <p>` / `   text` -> `<p>` / ` text`.
+ * Relative indentation is kept, so content genuinely 4+ columns deeper stays code. We
+ * only strip when a line actually reaches 4 columns; otherwise the body is left as-is so
+ * its leading whitespace survives as text nodes (mixed component + HTML content needs it).
  */
 function safeDeindent(text) {
     const lines = text.split('\n');
     const nonEmptyLines = lines.filter(line => line.trim().length > 0);
     if (nonEmptyLines.length === 0)
         return text;
-    const minIndent = Math.min(...nonEmptyLines.map(line => {
-        const match = line.match(/^(\s*)/);
-        return match ? match[1].length : 0;
-    }));
-    // Only strip enough indent to keep all lines below the 4-space code threshold
-    const stripAmount = Math.max(0, minIndent - 3);
+    // Indent counts characters (tab = 1), unlike indentWidth's CommonMark columns
+    // (tab = 4) in terminate-html-flow-blocks.
+    const indents = nonEmptyLines.map(line => line.match(/^(\s*)/)?.[1].length ?? 0);
+    const minIndent = Math.min(...indents);
+    const maxIndent = Math.max(...indents);
+    const stripAmount = maxIndent > 3 ? minIndent : 0;
     if (stripAmount === 0)
         return text;
     return lines.map(line => line.slice(stripAmount)).join('\n');
 }
 /**
- * Parse markdown content into mdast children nodes.
- * Dedents the content first to prevent indented component content
- * (from nested components) from being treated as code blocks.
+ * Parse component-body markdown into mdast children. Dedenting shifts columns and
+ * stales the top-level `terminateHtmlFlowBlocks` decisions, so that one preprocessor
+ * re-runs here; other column-anchored fixups (compact headings, tables) do not.
  */
 const parseMdChildren = (value, safeMode) => {
-    const parsed = getInlineMdProcessor({ safeMode }).parse(safeDeindent(value).trim());
+    const parsed = getInlineMdProcessor({ safeMode }).parse(terminateHtmlFlowBlocks(safeDeindent(value).trim()));
     return parsed.children || [];
 };
-/**
- * Parse substring content of a node and update the parent's children to include the new nodes.
- */
+// Parses trailing content into sibling nodes and re-queues the parent so any
+// components among them get processed.
 const parseSibling = (stack, parent, index, sibling, safeMode) => {
     const siblingNodes = parseMdChildren(sibling, safeMode);
-    // The new sibling nodes might contain new components to be processed
     if (siblingNodes.length > 0) {
         parent.children.splice(index + 1, 0, ...siblingNodes);
         stack.push(parent);
     }
 };
-/**
- * Build a position ending at `consumedLength` into the html node's value, so the
- * component doesn't claim trailing content the tokenizer swallowed into one node.
- */
+// Ends the position at `consumedLength` so the component doesn't claim trailing
+// content the tokenizer swallowed into the same html node.
 const positionEndingAtConsumed = (nodePosition, value, consumedLength) => {
     if (!nodePosition?.start)
         return nodePosition;
     return { start: nodePosition.start, end: pointAfter(nodePosition.start, value.slice(0, consumedLength)) };
 };
-/**
- * Build a position ending right after the last occurrence of `closingTag` within
- * this node's span in the original source. Used in the trailing-content path so
- * the offset is computed against the real source bytes (including blockquote/list
- * prefixes that were stripped from the html node's value).
- */
+// Like `positionEndingAtConsumed`, but measures against the original source so
+// blockquote/list prefixes stripped from the html node's value are counted.
 const positionEndingAtClosingTagInSource = (nodePosition, closingTag, source) => {
     if (!nodePosition?.start || !nodePosition.end)
         return nodePosition;
@@ -122514,9 +123020,6 @@ const positionEndingAtClosingTagInSource = (nodePosition, closingTag, source) =>
     const consumed = nodeSource.slice(0, closingTagOffset + closingTag.length);
     return { start: nodePosition.start, end: pointAfter(nodePosition.start, consumed) };
 };
-/**
- * Create an MdxJsxFlowElement node from component data.
- */
 const createComponentNode = ({ tag, attributes, children, startPosition, endPosition }) => ({
     type: 'mdxJsxFlowElement',
     name: tag,
@@ -122538,6 +123041,10 @@ const substituteNodeWithMdxNode = (parent, index, mdxNode) => {
  * This transformer identifies these patterns and converts them to proper MDX JSX elements so they
  * can be accurately recognized and rendered later with their component definition code.
  *
+ * Note: The main goal is to promote PascalCase tags to MDX elements, but we want to promote
+ * normal HTML to MDX elements in some cases so they get the full custom parsing behavior.
+ * E.g. tags with JSX expressions, nested components, etc.
+ *
  * The mdx-component micromark tokenizer ensures that multi-line components are captured
  * as single HTML nodes, so this transformer only needs to handle two cases:
  *
@@ -122569,8 +123076,7 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
         if ('children' in node && Array.isArray(node.children)) {
             stack.push(node);
         }
-        // Only visit HTML nodes with an actual html tag,
-        // which means a potential unparsed MDX component
+        // Only html nodes can be an unparsed MDX component.
         const value = node.value;
         if (node.type !== 'html' || typeof value !== 'string')
             return;
@@ -122579,32 +123085,34 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
         if (!parsed)
             return;
         const { tag, attributes, selfClosing, contentAfterTag = '' } = parsed;
-        // Offset of `trimmed` within the (possibly whitespace-padded) html node value,
-        // so consumed-length math maps back onto the node's real source offsets.
+        // Offsets so consumed-length math maps back onto the node's real source.
         const leadingWhitespace = value.length - value.trimStart().length;
-        // Index right after the opening tag's `>` within `trimmed`.
         const openingTagEnd = trimmed.length - contentAfterTag.length;
-        // Skip tags that have dedicated transformers
         if (GENERIC_MDX_COMPONENT_EXCLUDED_TAGS.has(tag))
-            return;
+            return; // owned by dedicated transformers
         const isPascal = isPascalCase(tag);
-        // Lowercase inline tags (inside a paragraph) with `{…}` attributes are
-        // promoted to `mdxJsxTextElement` by mdxishInlineComponentBlocks. Skip
-        // them here so they stay as html for that pass; PascalCase components
-        // keep going through this transformer (they stay flow-level even when
-        // inline, which is how ReadMe's custom components are modeled).
+        // ==== SPECIAL CASES TO PROMOTE NORMAL HTML TO MDX ELEMENTS ====
+        // Lowercase inline tags with `{…}` attributes belong to
+        // mdxishInlineComponentBlocks; leave them as html for that pass. PascalCase
+        // components stay flow-level even when inline (ReadMe's component model).
         if (!isPascal && parent.type === 'paragraph')
             return;
-        // Lowercase HTML tags are eligible when they (or a descendant tag in their
-        // content, e.g. a `.map()` body returning JSX with `key={i}`) carry a
-        // JSX-expression attribute. Without this, a wrapper `<div>` with only plain
-        // attributes (or none) swallows its whole nested block — including any
-        // `style={{...}}`/`.map()` JSX inside it — as literal HTML text, which
-        // rehype-raw's parse5 pass then garbles (it has no notion of JS expressions).
-        // Plain HTML with no expressions anywhere stays as an html node so
-        // rehype-raw handles it as normal.
-        const hasNestedExpressionAttr = !selfClosing && NESTED_ATTR_EXPRESSION_RE.test(contentAfterTag);
-        if (!isPascal && !hasExpressionAttr(attributes) && !hasNestedExpressionAttr)
+        // A lowercase wrapper is only promoted when it (or a descendant) carries a
+        // JSX expression or nests a component; otherwise it would swallow that inner
+        // JSX/component as literal text that rehype-raw's parse5 pass can't handle.
+        // Table-structural wrappers are excluded from both — `mdxishTables` re-parses
+        // those, so a `{…}` in a cell (e.g. `<code>--depth={n}</code>`) must not
+        // accidentally promote the table to an MDX element prematurely.
+        const isTableStructuralTag = tag === 'table' || tableTags.has(tag);
+        const hasNestedExpressionAttr = !selfClosing && !isTableStructuralTag && NESTED_ATTR_EXPRESSION_RE.test(contentAfterTag);
+        const hasNestedComponentTag = !selfClosing && !isTableStructuralTag && hasNestedGenericComponentTag(contentAfterTag);
+        // Promotion: By default commonmark doesn't parse markdown in single line HTML tags (e.g. <div>**bold**</div>)
+        // To support that, we try to promote them to MDX elements so the markdown gets parsed
+        const isPlainLowercaseHtml = !isPascal && !hasExpressionAttr(attributes) && !hasNestedExpressionAttr && !hasNestedComponentTag;
+        const plainClosingTagIndex = isPlainLowercaseHtml && !selfClosing && isMarkdownPromotableHtmlTag(tag) && !NESTED_TABLE_RE.test(contentAfterTag)
+            ? findBalancedClosingTagIndex(contentAfterTag, tag)
+            : -1;
+        if (isPlainLowercaseHtml && plainClosingTagIndex < 0)
             return;
         const closingTagStr = `</${tag}>`;
         // Case 1: Self-closing tag
@@ -122618,7 +123126,6 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
                 endPosition: positionEndingAtConsumed(node.position, value, leadingWhitespace + openingTagEnd),
             });
             substituteNodeWithMdxNode(parent, index, componentNode);
-            // Check and parse if there's relevant content after the current closing tag
             const remainingContent = contentAfterTag.trim();
             if (remainingContent) {
                 parseSibling(stack, parent, index, remainingContent, safeMode);
@@ -122626,18 +123133,27 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
             return;
         }
         // Case 2: Self-contained block (closing tag in content)
-        if (contentAfterTag.includes(closingTagStr)) {
-            // Find the first closing tag
-            const closingTagIndex = contentAfterTag.lastIndexOf(closingTagStr);
-            // Pass raw (untrimmed) content so dedent in parseMdChildren can
-            // normalize indentation before trimming
+        const closingTagIndex = isPlainLowercaseHtml ? plainClosingTagIndex : contentAfterTag.lastIndexOf(closingTagStr);
+        if (closingTagIndex >= 0) {
+            // Untrimmed so parseMdChildren can dedent before trimming.
             const componentInnerContent = contentAfterTag.substring(0, closingTagIndex);
             const contentAfterClose = contentAfterTag.substring(closingTagIndex + closingTagStr.length).trim();
-            let parsedChildren = componentInnerContent.trim()
-                ? parseMdChildren(componentInnerContent, safeMode)
-                : [];
-            // Lowercase HTML tags are usually inline (e.g. <a>, <span>). Remark wraps
-            // bare text in a paragraph; unwrap when there's exactly one paragraph so
+            let parsedChildren = [];
+            if (componentInnerContent.trim()) {
+                try {
+                    parsedChildren = parseMdChildren(componentInnerContent, safeMode);
+                }
+                catch (error) {
+                    // Plain HTML bodies can hold anything (e.g. stray braces the strict
+                    // expression parser rejects) — keep the node raw instead of throwing.
+                    if (isPlainLowercaseHtml)
+                        return;
+                    throw error;
+                }
+            }
+            if (isPlainLowercaseHtml && !containsMarkdownConstruct(parsedChildren))
+                return;
+            // Lowercase tags are usually inline; unwrap a sole paragraph so their
             // phrasing content isn't spuriously block-wrapped.
             if (!isPascal && parsedChildren.length === 1 && parsedChildren[0].type === 'paragraph') {
                 parsedChildren = parsedChildren[0].children;
@@ -122647,12 +123163,9 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
                 attributes,
                 children: parsedChildren,
                 startPosition: node.position,
-                // When trailing content follows the closing tag, compute the end position precisely
-                // within the html node's value so the component doesn't claim that content.
-                // Prefer source-based positioning when the original source is available: the html
-                // node's value has '> '/space prefixes stripped for blockquotes/list items, so
-                // positionEndingAtConsumed would undercount source offsets. When the entire node
-                // is consumed, use the original node position directly.
+                // With trailing content, end precisely at the closing tag. Prefer source
+                // offsets when available (the node's value strips blockquote/list
+                // prefixes); otherwise fall back to the whole node position.
                 endPosition: contentAfterClose
                     ? source
                         ? positionEndingAtClosingTagInSource(node.position, closingTagStr, source)
@@ -122660,17 +123173,16 @@ const mdxishMdxComponentBlocks = (opts = {}) => (tree, file) => {
                     : node.position,
             });
             substituteNodeWithMdxNode(parent, index, componentNode);
-            // After the closing tag, there might be more content to be processed
+            // Re-queue whichever side may hold further components.
             if (contentAfterClose) {
                 parseSibling(stack, parent, index, contentAfterClose, safeMode);
             }
             else if (componentNode.children.length > 0) {
-                // The content inside the component block might contain new components to be processed
                 stack.push(componentNode);
             }
         }
     };
-    // Process the nodes with the components depth-first to maintain the correct order of the nodes
+    // Depth-first so nodes keep their source order.
     while (stack.length) {
         const parent = stack.pop();
         if (parent?.children) {
@@ -124205,9 +124717,6 @@ const magicBlockTransformer = (options = {}) => tree => {
 // single-line `<div>…</div>`). CommonMark slurps the whole div as one `html`
 // node, so the tokenizer never sees the HTMLBlock — we recover it here.
 const RAW_HTML_BLOCK_RE = /<HTMLBlock\b([^>]*)>\s*\{\s*`((?:[^`\\]|\\.)*)`\s*\}\s*<\/HTMLBlock>/g;
-// Opening `<HTMLBlock …>` as its own `html` node — produced inside a paragraph
-// when an HTMLBlock appears inline alongside text.
-const HTML_BLOCK_OPEN_RE = /^<HTMLBlock\b([^>]*)>$/;
 /**
  * Builds the canonical `html-block` MDAST node the renderer expects.
  */
@@ -124288,13 +124797,14 @@ const splitRawHtmlBlocks = (node) => {
 /**
  * Converts every `<HTMLBlock>` shape that survives parsing into the canonical
  * `html-block` MDAST node, reading the body from the tokenizer's template-literal
- * expression. Three shapes occur:
+ * expression. Two shapes occur:
  *
- *   1. JSX element (`mdxJsxFlowElement`/`mdxJsxTextElement`) — multiline/block
- *      context and table cells (after their remarkMdx re-parse).
- *   2. Raw `html` blob (`splitRawHtmlBlocks`) — single-line top-level, or nested
- *      in raw HTML like an inline `<div>`.
- *   3. Inline-in-paragraph — split into `html` + expression + `html` siblings.
+ *   1. JSX element (`mdxJsxFlowElement`/`mdxJsxTextElement`) — table cells, after
+ *      their remarkMdx re-parse (that re-parse runs without the htmlBlockComponent
+ *      tokenizer, so `<HTMLBlock>` arrives as JSX rather than an opaque `html` node).
+ *   2. Raw `html` blob (`splitRawHtmlBlocks`) — the htmlBlockComponent tokenizer's
+ *      opaque output (top-level and inline), or an `<HTMLBlock>` embedded in a
+ *      larger raw-HTML node like an inline `<div>` that the tokenizer never saw.
  *
  * Runs *after* `mdxishTables` so table cells are re-parsed first;
  * `mdxishTables` recognizes the still-JSX `<HTMLBlock>` element when deciding to
@@ -124319,36 +124829,6 @@ const mdxishHtmlBlocks = () => tree => {
         if (replacement)
             parent.children.splice(index, 1, ...replacement);
     });
-    // Shape 3: inline within a paragraph — `<HTMLBlock>` open/close arrive as
-    // separate `html` siblings with the template-literal expression between them.
-    visit(tree, 'paragraph', (paragraph) => {
-        // An html-block is block content, so it isn't a valid PhrasingContent child;
-        // widen to RootContent (which HTMLBlock belongs to) for the in-place splice.
-        const children = paragraph.children;
-        for (let i = 0; i < children.length; i += 1) {
-            const open = children[i];
-            const openMatch = open.type === 'html' ? open.value.match(HTML_BLOCK_OPEN_RE) : null;
-            if (!openMatch)
-                continue; // eslint-disable-line no-continue
-            const closeIdx = children.findIndex((child, j) => j > i && child.type === 'html' && child.value === '</HTMLBlock>');
-            if (closeIdx === -1)
-                continue; // eslint-disable-line no-continue
-            const body = children
-                .slice(i + 1, closeIdx)
-                .map(child => {
-                if (child.type === 'mdxTextExpression' || child.type === 'mdxFlowExpression') {
-                    return extractTemplateLiteral(child.value);
-                }
-                // Preserve raw text from any other phrasing sibling (e.g. stray
-                // whitespace or content the tokenizer didn't claim) so it isn't
-                // silently dropped from the html payload.
-                return 'value' in child && typeof child.value === 'string' ? child.value : '';
-            })
-                .join('');
-            const openingTagIndent = (open.position?.start.column ?? 1) - 1;
-            children.splice(i, closeIdx - i + 1, htmlBlockFromRaw(openMatch[1], body, open.position, openingTagIndent));
-        }
-    });
 };
 /* harmony default export */ const mdxish_html_blocks = (mdxishHtmlBlocks);
 
@@ -125048,6 +125528,29 @@ const mdxishMermaidTransformer = () => (tree) => {
 };
 /* harmony default export */ const mdxish_mermaid = (mdxishMermaidTransformer);
 
+;// ./processor/transform/mdxish/normalize-closing-tag-whitespace.ts
+
+
+// Spaces/tabs only — newlines would let prose `<` / `>` across lines look like one tag.
+const SPACED_CLOSING_TAG_RE = /<\/[ \t]*([a-zA-Z][a-zA-Z0-9-]*)[ \t]*>/g;
+/**
+ * Canonicalize spaced closing tags (`</ td >` → `</td>`) for known HTML names.
+ *
+ * In HTML, `</` + whitespace is a bogus comment, so `</ table >` never closes the
+ * table (jsxTable misses it → empty table + pre; CX-3706). Only standard HTML tags;
+ * custom components, prose (`a </ b`), and code blocks are left alone.
+ *
+ * @example
+ * normalizeClosingTagWhitespace('</ td >')   // '</td>'
+ * normalizeClosingTagWhitespace('</table >') // '</table>'
+ * normalizeClosingTagWhitespace('a </ b >')  // unchanged
+ */
+function normalizeClosingTagWhitespace(content) {
+    const { protectedContent, protectedCode } = protectCodeBlocks(content);
+    const result = protectedContent.replace(SPACED_CLOSING_TAG_RE, (match, tagName) => STANDARD_HTML_TAGS.has(tagName.toLowerCase()) ? `</${tagName}>` : match);
+    return restoreCodeBlocks(result, protectedCode);
+}
+
 ;// ./processor/transform/mdxish/normalize-compact-headings.ts
 
 /**
@@ -125503,278 +126006,488 @@ function normalizeTableSeparator(content) {
 }
 /* harmony default export */ const normalize_table_separator = ((/* unused pure expression or super */ null && (normalizeTableSeparator)));
 
-;// ./processor/transform/mdxish/terminate-html-flow-blocks.ts
-
+;// ./processor/transform/mdxish/variables-code.ts
 
 
-const STANDALONE_HTML_LINE_REGEX = /^(<[a-z][^<>]*>|<\/[a-z][^<>]*>)+\s*$/;
-const HTML_LINE_WITH_CONTENT_REGEX = /^<[a-z][^<>]*>.*<\/[a-z][^<>]*>(?:[^<]*)$/;
-// Tags whose contents must be preserved as is, inserting a blank line after the
-// opener corrupts the payload.
-// htmlRawNames here refer to <pre>, <textarea>, <script>, <style>
-const RAW_CONTENT_TAGS = [...htmlRawNames, ...HTML_TABLE_STRUCTURE_TAGS];
-// The `(?=[\s/>])` lookahead avoids false matches on lookalike names like `<script-foo>`.
-const RAW_CONTENT_TAG_MATCHERS = RAW_CONTENT_TAGS.map(tag => ({
-    open: new RegExp(`<${tag}(?=[\\s/>])[^>]*?(?<!/)>`, 'gi'),
-    close: new RegExp(`</${tag}(?=[\\s>])[^>]*>`, 'gi'),
-}));
-function isLineHtml(line) {
-    return STANDALONE_HTML_LINE_REGEX.test(line) || HTML_LINE_WITH_CONTENT_REGEX.test(line);
+// Single combined regex so that resolved values from one pattern are never re-scanned by the other.
+const COMBINED_VARIABLE_REGEX = new RegExp(`${variable_dist.VARIABLE_REGEXP}|${variable_dist.MDX_VARIABLE_REGEXP}`, 'giu');
+// Flatten variables into a single object for easy lookup
+function variables_code_flattenVariables(variables) {
+    if (!variables)
+        return {};
+    return {
+        ...Object.fromEntries((variables.defaults || []).map(d => [d.name, d.default])),
+        ...variables.user,
+    };
 }
-// True if any RAW_CONTENT_TAGS opener on this line is not closed on the same line.
-function hasUnclosedRawContentOpener(line) {
-    return RAW_CONTENT_TAG_MATCHERS.some(({ open, close }) => {
-        const opens = (line.match(open) ?? []).length;
-        const closes = (line.match(close) ?? []).length;
-        return opens > closes;
+function resolveCodeVariables(value, resolvedVariables) {
+    return value.replace(COMBINED_VARIABLE_REGEX, (match, legacyName, mdxEscapePrefix, mdxVarName, mdxEscapeSuffix) => {
+        // Legacy variable: <<...>>
+        if (legacyName !== undefined) {
+            if (match.startsWith('\\<<') || match.endsWith('\\>>'))
+                return match;
+            const name = legacyName.trim();
+            if (name.startsWith('glossary:'))
+                return name.toUpperCase();
+            return name in resolvedVariables ? resolvedVariables[name] : name.toUpperCase();
+        }
+        // MDX variable: {user.*}
+        if (mdxEscapePrefix || mdxEscapeSuffix)
+            return match;
+        if (mdxVarName in resolvedVariables)
+            return resolvedVariables[mdxVarName];
+        const fullPath = match.slice(1, -1);
+        return fullPath.toUpperCase();
     });
 }
 /**
- * Preprocessor to terminate HTML flow blocks.
+ * A remark mdast plugin that resolves legacy variables <<...>> and MDX variables {user.*} inside code and inline code nodes
+ * to their values. Uses regexes from the readme variable to search for variables in the code string.
  *
- * In CommonMark, HTML blocks (types 6 and 7) only terminate on a blank line.
- * Without one, any content on the next line is consumed as part of the HTML block
- * and never parsed as its own construct. For example, a `[block:callout]` immediately
- * following `<div><p></p></div>` gets swallowed into the HTML flow token.
+ * This is needed because variables in code blocks and inline cannot be tokenized, and also we need to maintain the code string
+ * in the code nodes. This enables engine side variable resolution in codes which improves UX
+ */
+const variablesCodeResolver = ({ variables } = {}) => tree => {
+    const resolvedVariables = variables_code_flattenVariables(variables);
+    visit(tree, 'inlineCode', (node) => {
+        if (!node.value)
+            return;
+        node.value = resolveCodeVariables(node.value, resolvedVariables);
+    });
+    visit(tree, 'code', (node) => {
+        if (!node.value)
+            return;
+        if (node.lang === 'mermaid')
+            return;
+        const nextValue = resolveCodeVariables(node.value, resolvedVariables);
+        node.value = nextValue;
+        // Keep code-tabs/readme-components hProperties in sync with node.value
+        // because renderers read `value` from hProperties.
+        if (node.data?.hProperties && typeof node.data.hProperties === 'object') {
+            node.data.hProperties.value = nextValue;
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const variables_code = (variablesCodeResolver);
+
+;// ./processor/transform/mdxish/variables-text.ts
+
+
+/**
+ * Matches {user.<field>} patterns:
+ * - {user.name}
+ * - {user.email}
+ * - {user['field']}
+ * - {user["field"]}
  *
- * @link https://spec.commonmark.org/0.29/#html-blocks
+ * Captures the field name in group 1 (dot notation) or group 2 (bracket notation)
+ */
+const USER_VAR_REGEX = /\{user\.(\w+)\}|\{user\[['"](\w+)['"]\]\}/g;
+function makeVariableNode(varName, rawValue) {
+    return {
+        type: NodeTypes.variable,
+        data: {
+            hName: 'Variable',
+            hProperties: { name: varName },
+        },
+        value: rawValue,
+    };
+}
+/**
+ * A remark plugin that parses {user.<field>} patterns from text nodes and
+ * mdx expression nodes, creating Variable nodes for runtime resolution.
  *
- * This preprocessor inserts a blank line after standalone HTML lines when the next
- * line is non-blank and not an HTML construct, ensuring micromark's HTML flow
- * tokenizer terminates and subsequent content is parsed independently.
+ * Handles:
+ * - `text` nodes: when safeMode is true or after expression evaluation
+ * - `mdxTextExpression` nodes: when mdxExpression has parsed {user.*} before evaluation
+ * - `mdxFlowExpression` nodes: when {user.*} appears on its own line (e.g. inside JSX table cells)
  *
- * Conditions:
- * 1. Only non-indented lines with lowercase tag names are considered. Uppercase tags
- *    (e.g. `<Table>`, `<MyComponent>`) are JSX custom components and don't trigger
- *    CommonMark HTML blocks.
- * 2. Lines inside protected blocks (e.g. fenced code) are left untouched.
- * 3. Lines with an unclosed RAW_CONTENT_TAGS opener are exempted.
+ * Supports any user field: name, email, email_verified, exp, iat, etc.
  */
-function terminateHtmlFlowBlocks(content) {
-    const { protectedContent, protectedCode } = protectCodeBlocks(content);
-    const lines = protectedContent.split('\n');
-    const result = [];
-    for (let i = 0; i < lines.length; i += 1) {
-        result.push(lines[i]);
-        // Skip blank & indented lines
-        if (i >= lines.length - 1 || lines[i + 1].trim().length === 0 || lines[i + 1].startsWith(' ') || lines[i + 1].startsWith('\t')) {
-            // eslint-disable-next-line no-continue
-            continue;
+function visitExpressionNode(node, index, parent) {
+    if (index === undefined || !parent)
+        return;
+    const wrapped = `{${(node.value ?? '').trim()}}`;
+    const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
+    if (matches.length !== 1)
+        return;
+    const varName = matches[0][1] || matches[0][2];
+    parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
+}
+const variablesTextTransformer = () => tree => {
+    visit(tree, 'mdxTextExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
+        visitExpressionNode(node, index, parent);
+    });
+    visit(tree, 'text', (node, index, parent) => {
+        if (index === undefined || !parent)
+            return;
+        // Skip if inside inline code
+        if (parent.type === 'inlineCode')
+            return;
+        const text = node.value;
+        if (typeof text !== 'string' || !text.trim())
+            return;
+        if (!text.includes('{user.') && !text.includes('{user['))
+            return;
+        const matches = [...text.matchAll(USER_VAR_REGEX)];
+        if (matches.length === 0)
+            return;
+        const parts = [];
+        let lastIndex = 0;
+        matches.forEach(match => {
+            const matchIndex = match.index ?? 0;
+            // Add text before the match
+            if (matchIndex > lastIndex) {
+                parts.push({ type: 'text', value: text.slice(lastIndex, matchIndex) });
+            }
+            // Extract variable name from either capture group (dot or bracket notation)
+            const varName = match[1] || match[2];
+            parts.push(makeVariableNode(varName, match[0]));
+            lastIndex = matchIndex + match[0].length;
+        });
+        // Add remaining text after last match
+        if (lastIndex < text.length) {
+            parts.push({ type: 'text', value: text.slice(lastIndex) });
         }
-        const isCurrentLineHtml = isLineHtml(lines[i]);
-        const isNextLineHtml = isLineHtml(lines[i + 1]);
-        if (isCurrentLineHtml && !isNextLineHtml && !hasUnclosedRawContentOpener(lines[i])) {
-            result.push('');
+        // Replace node with parts
+        if (parts.length > 1 || (parts.length === 1 && parts[0].type !== 'text')) {
+            parent.children.splice(index, 1, ...parts);
+        }
+    });
+    return tree;
+};
+/* harmony default export */ const variables_text = (variablesTextTransformer);
+
+;// ./lib/mdast-util/html-block-component/index.ts
+const html_block_component_contextMap = new WeakMap();
+function findHtmlBlockComponentToken() {
+    const events = this.tokenStack;
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+        if (events[i][0].type === 'htmlBlockComponent')
+            return events[i][0];
+    }
+    return undefined;
+}
+function enterHtmlBlockComponent(token) {
+    html_block_component_contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
+    this.enter({ type: 'html', value: '' }, token);
+}
+function exitHtmlBlockComponentData(token) {
+    const componentToken = findHtmlBlockComponentToken.call(this);
+    if (!componentToken)
+        return;
+    const ctx = html_block_component_contextMap.get(componentToken);
+    if (ctx) {
+        const gap = token.start.line - ctx.lastEndLine;
+        if (ctx.chunks.length > 0 && gap > 0) {
+            ctx.chunks.push('\n'.repeat(gap));
+        }
+        ctx.chunks.push(this.sliceSerialize(token));
+        ctx.lastEndLine = token.end.line;
+    }
+}
+function exitHtmlBlockComponent(token) {
+    const ctx = html_block_component_contextMap.get(token);
+    const node = this.stack[this.stack.length - 1];
+    if (ctx) {
+        node.value = ctx.chunks.join('');
+        html_block_component_contextMap.delete(token);
+    }
+    this.exit(token);
+}
+function htmlBlockComponentFromMarkdown() {
+    return {
+        enter: {
+            htmlBlockComponent: enterHtmlBlockComponent,
+        },
+        exit: {
+            htmlBlockComponentData: exitHtmlBlockComponentData,
+            htmlBlockComponent: exitHtmlBlockComponent,
+        },
+    };
+}
+
+;// ./lib/micromark/html-block-component/syntax.ts
+
+
+const TAG_SUFFIX = [
+    codes.uppercaseT,
+    codes.uppercaseM,
+    codes.uppercaseL,
+    codes.uppercaseB,
+    codes.lowercaseL,
+    codes.lowercaseO,
+    codes.lowercaseC,
+    codes.lowercaseK,
+];
+// ---------------------------------------------------------------------------
+// Shared tokenizer factory
+// ---------------------------------------------------------------------------
+/**
+ * Creates a tokenize function for `<HTMLBlock>...</HTMLBlock>`.
+ *
+ * - **flow** (block-level): supports multiline content via line continuations,
+ *   consumes trailing whitespace after the closing tag.
+ * - **text** (inline): single-line only, exits immediately after the closing tag.
+ */
+function syntax_createTokenize(mode) {
+    return function tokenize(effects, ok, nok) {
+        let depth = 1;
+        function matchChars(chars, onMatch, onFail) {
+            if (chars.length === 0)
+                return onMatch;
+            const next = (code) => {
+                if (code === chars[0]) {
+                    effects.consume(code);
+                    return matchChars(chars.slice(1), onMatch, onFail);
+                }
+                return onFail(code);
+            };
+            return next;
+        }
+        function matchTagName(onMatch, onFail) {
+            const next = (code) => {
+                if (code === codes.uppercaseH) {
+                    effects.consume(code);
+                    return matchChars(TAG_SUFFIX, onMatch, onFail);
+                }
+                return onFail(code);
+            };
+            return next;
+        }
+        return start;
+        function start(code) {
+            if (code !== codes.lessThan)
+                return nok(code);
+            effects.enter('htmlBlockComponent');
+            effects.enter('htmlBlockComponentData');
+            effects.consume(code);
+            return matchTagName(afterTagName, nok);
+        }
+        function afterTagName(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return body;
+            }
+            if (code === codes.space || code === codes.horizontalTab) {
+                effects.consume(code);
+                return inAttributes;
+            }
+            if (mode === 'flow' && markdownLineEnding(code)) {
+                effects.exit('htmlBlockComponentData');
+                return attributeContinuationStart(code);
+            }
+            if (code === codes.slash) {
+                effects.consume(code);
+                return selfClose;
+            }
+            return nok(code);
+        }
+        function inAttributes(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return body;
+            }
+            if (code === null) {
+                return nok(code);
+            }
+            if (markdownLineEnding(code)) {
+                if (mode === 'text')
+                    return nok(code);
+                effects.exit('htmlBlockComponentData');
+                return attributeContinuationStart(code);
+            }
+            effects.consume(code);
+            return inAttributes;
+        }
+        function attributeContinuationStart(code) {
+            return effects.check(html_block_component_syntax_nonLazyContinuationStart, attributeContinuationNonLazy, continuationAfter)(code);
+        }
+        function attributeContinuationNonLazy(code) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return attributeContinuationBefore;
+        }
+        function attributeContinuationBefore(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return attributeContinuationStart(code);
+            }
+            effects.enter('htmlBlockComponentData');
+            return inAttributes(code);
+        }
+        function selfClose(code) {
+            if (code === codes.greaterThan) {
+                effects.consume(code);
+                return mode === 'flow' ? afterClose : done(code);
+            }
+            return nok(code);
+        }
+        function body(code) {
+            if (code === null)
+                return nok(code);
+            if (markdownLineEnding(code)) {
+                if (mode === 'text') {
+                    // Text constructs operate on paragraph content which spans lines
+                    effects.consume(code);
+                    return body;
+                }
+                effects.exit('htmlBlockComponentData');
+                return continuationStart(code);
+            }
+            if (code === codes.lessThan) {
+                effects.consume(code);
+                return closeSlash;
+            }
+            effects.consume(code);
+            return body;
+        }
+        function closeSlash(code) {
+            if (code === codes.slash) {
+                effects.consume(code);
+                return matchTagName(closeGt, body);
+            }
+            return matchTagName(openAfterTagName, body)(code);
+        }
+        function openAfterTagName(code) {
+            if (code === codes.greaterThan || code === codes.space || code === codes.horizontalTab) {
+                depth += 1;
+                effects.consume(code);
+                return body;
+            }
+            return body(code);
+        }
+        function closeGt(code) {
+            if (code === codes.greaterThan) {
+                depth -= 1;
+                effects.consume(code);
+                if (depth === 0) {
+                    return mode === 'flow' ? afterClose : done(code);
+                }
+                return body;
+            }
+            return body(code);
+        }
+        // -- flow-only states ---------------------------------------------------
+        function afterClose(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return done(code);
+            }
+            if (code === codes.space || code === codes.horizontalTab) {
+                effects.consume(code);
+                return afterClose;
+            }
+            // Reject so the block re-parses as a paragraph, deferring to the
+            // text tokenizer which preserves trailing content in the same line.
+            return nok(code);
         }
-    }
-    return restoreCodeBlocks(result.join('\n'), protectedCode);
-}
-
-;// ./processor/transform/mdxish/variables-code.ts
-
-
-// Single combined regex so that resolved values from one pattern are never re-scanned by the other.
-const COMBINED_VARIABLE_REGEX = new RegExp(`${variable_dist.VARIABLE_REGEXP}|${variable_dist.MDX_VARIABLE_REGEXP}`, 'giu');
-// Flatten variables into a single object for easy lookup
-function variables_code_flattenVariables(variables) {
-    if (!variables)
-        return {};
-    return {
-        ...Object.fromEntries((variables.defaults || []).map(d => [d.name, d.default])),
-        ...variables.user,
-    };
-}
-function resolveCodeVariables(value, resolvedVariables) {
-    return value.replace(COMBINED_VARIABLE_REGEX, (match, legacyName, mdxEscapePrefix, mdxVarName, mdxEscapeSuffix) => {
-        // Legacy variable: <<...>>
-        if (legacyName !== undefined) {
-            if (match.startsWith('\\<<') || match.endsWith('\\>>'))
-                return match;
-            const name = legacyName.trim();
-            if (name.startsWith('glossary:'))
-                return name.toUpperCase();
-            return name in resolvedVariables ? resolvedVariables[name] : name.toUpperCase();
+        // -- flow-only: line continuation ---------------------------------------
+        function continuationStart(code) {
+            return effects.check(html_block_component_syntax_nonLazyContinuationStart, continuationStartNonLazy, continuationAfter)(code);
         }
-        // MDX variable: {user.*}
-        if (mdxEscapePrefix || mdxEscapeSuffix)
-            return match;
-        if (mdxVarName in resolvedVariables)
-            return resolvedVariables[mdxVarName];
-        const fullPath = match.slice(1, -1);
-        return fullPath.toUpperCase();
-    });
-}
-/**
- * A remark mdast plugin that resolves legacy variables <<...>> and MDX variables {user.*} inside code and inline code nodes
- * to their values. Uses regexes from the readme variable to search for variables in the code string.
- *
- * This is needed because variables in code blocks and inline cannot be tokenized, and also we need to maintain the code string
- * in the code nodes. This enables engine side variable resolution in codes which improves UX
- */
-const variablesCodeResolver = ({ variables } = {}) => tree => {
-    const resolvedVariables = variables_code_flattenVariables(variables);
-    visit(tree, 'inlineCode', (node) => {
-        if (!node.value)
-            return;
-        node.value = resolveCodeVariables(node.value, resolvedVariables);
-    });
-    visit(tree, 'code', (node) => {
-        if (!node.value)
-            return;
-        if (node.lang === 'mermaid')
-            return;
-        const nextValue = resolveCodeVariables(node.value, resolvedVariables);
-        node.value = nextValue;
-        // Keep code-tabs/readme-components hProperties in sync with node.value
-        // because renderers read `value` from hProperties.
-        if (node.data?.hProperties && typeof node.data.hProperties === 'object') {
-            node.data.hProperties.value = nextValue;
+        function continuationStartNonLazy(code) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return continuationBefore;
         }
-    });
-    return tree;
-};
-/* harmony default export */ const variables_code = (variablesCodeResolver);
-
-;// ./processor/transform/mdxish/variables-text.ts
-
-
-/**
- * Matches {user.<field>} patterns:
- * - {user.name}
- * - {user.email}
- * - {user['field']}
- * - {user["field"]}
- *
- * Captures the field name in group 1 (dot notation) or group 2 (bracket notation)
- */
-const USER_VAR_REGEX = /\{user\.(\w+)\}|\{user\[['"](\w+)['"]\]\}/g;
-function makeVariableNode(varName, rawValue) {
-    return {
-        type: NodeTypes.variable,
-        data: {
-            hName: 'Variable',
-            hProperties: { name: varName },
-        },
-        value: rawValue,
-    };
-}
-/**
- * A remark plugin that parses {user.<field>} patterns from text nodes and
- * mdx expression nodes, creating Variable nodes for runtime resolution.
- *
- * Handles:
- * - `text` nodes: when safeMode is true or after expression evaluation
- * - `mdxTextExpression` nodes: when mdxExpression has parsed {user.*} before evaluation
- * - `mdxFlowExpression` nodes: when {user.*} appears on its own line (e.g. inside JSX table cells)
- *
- * Supports any user field: name, email, email_verified, exp, iat, etc.
- */
-function visitExpressionNode(node, index, parent) {
-    if (index === undefined || !parent)
-        return;
-    const wrapped = `{${(node.value ?? '').trim()}}`;
-    const matches = [...wrapped.matchAll(USER_VAR_REGEX)];
-    if (matches.length !== 1)
-        return;
-    const varName = matches[0][1] || matches[0][2];
-    parent.children.splice(index, 1, makeVariableNode(varName, wrapped));
-}
-const variablesTextTransformer = () => tree => {
-    visit(tree, 'mdxTextExpression', (node, index, parent) => {
-        visitExpressionNode(node, index, parent);
-    });
-    visit(tree, 'mdxFlowExpression', (node, index, parent) => {
-        visitExpressionNode(node, index, parent);
-    });
-    visit(tree, 'text', (node, index, parent) => {
-        if (index === undefined || !parent)
-            return;
-        // Skip if inside inline code
-        if (parent.type === 'inlineCode')
-            return;
-        const text = node.value;
-        if (typeof text !== 'string' || !text.trim())
-            return;
-        if (!text.includes('{user.') && !text.includes('{user['))
-            return;
-        const matches = [...text.matchAll(USER_VAR_REGEX)];
-        if (matches.length === 0)
-            return;
-        const parts = [];
-        let lastIndex = 0;
-        matches.forEach(match => {
-            const matchIndex = match.index ?? 0;
-            // Add text before the match
-            if (matchIndex > lastIndex) {
-                parts.push({ type: 'text', value: text.slice(lastIndex, matchIndex) });
+        function continuationBefore(code) {
+            if (code === null || markdownLineEnding(code)) {
+                return continuationStart(code);
             }
-            // Extract variable name from either capture group (dot or bracket notation)
-            const varName = match[1] || match[2];
-            parts.push(makeVariableNode(varName, match[0]));
-            lastIndex = matchIndex + match[0].length;
-        });
-        // Add remaining text after last match
-        if (lastIndex < text.length) {
-            parts.push({ type: 'text', value: text.slice(lastIndex) });
+            effects.enter('htmlBlockComponentData');
+            return body(code);
         }
-        // Replace node with parts
-        if (parts.length > 1 || (parts.length === 1 && parts[0].type !== 'text')) {
-            parent.children.splice(index, 1, ...parts);
+        function continuationAfter(code) {
+            if (code === null)
+                return nok(code);
+            effects.exit('htmlBlockComponent');
+            return ok(code);
         }
-    });
-    return tree;
+        // -- shared exit --------------------------------------------------------
+        function done(_code) {
+            effects.exit('htmlBlockComponentData');
+            effects.exit('htmlBlockComponent');
+            return ok(_code);
+        }
+    };
+}
+// ---------------------------------------------------------------------------
+// Flow construct (block-level)
+// ---------------------------------------------------------------------------
+const html_block_component_syntax_nonLazyContinuationStart = {
+    tokenize: html_block_component_syntax_tokenizeNonLazyContinuationStart,
+    partial: true,
 };
-/* harmony default export */ const variables_text = (variablesTextTransformer);
-
-;// ./lib/mdast-util/jsx-table/index.ts
-const jsx_table_contextMap = new WeakMap();
-function findJsxTableToken() {
-    const events = this.tokenStack;
-    for (let i = events.length - 1; i >= 0; i -= 1) {
-        if (events[i][0].type === 'jsxTable')
-            return events[i][0];
+function resolveToHtmlBlockComponent(events) {
+    let index = events.length;
+    while (index > 0) {
+        index -= 1;
+        if (events[index][0] === 'enter' && events[index][1].type === 'htmlBlockComponent') {
+            break;
+        }
     }
-    return undefined;
-}
-function enterJsxTable(token) {
-    jsx_table_contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
-    this.enter({ type: 'html', value: '' }, token);
+    if (index > 1 && events[index - 2][1].type === types_types.linePrefix) {
+        events[index][1].start = events[index - 2][1].start;
+        events[index + 1][1].start = events[index - 2][1].start;
+        events.splice(index - 2, 2);
+    }
+    return events;
 }
-function exitJsxTableData(token) {
-    const tableToken = findJsxTableToken.call(this);
-    if (!tableToken)
-        return;
-    const ctx = jsx_table_contextMap.get(tableToken);
-    if (ctx) {
-        const gap = token.start.line - ctx.lastEndLine;
-        if (ctx.chunks.length > 0 && gap > 0) {
-            ctx.chunks.push('\n'.repeat(gap));
+const htmlBlockComponentFlowConstruct = {
+    name: 'htmlBlockComponent',
+    tokenize: syntax_createTokenize('flow'),
+    resolveTo: resolveToHtmlBlockComponent,
+    concrete: true,
+};
+function html_block_component_syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    return start;
+    function start(code) {
+        if (markdownLineEnding(code)) {
+            effects.enter(types_types.lineEnding);
+            effects.consume(code);
+            effects.exit(types_types.lineEnding);
+            return after;
         }
-        ctx.chunks.push(this.sliceSerialize(token));
-        ctx.lastEndLine = token.end.line;
+        return nok(code);
     }
-}
-function exitJsxTable(token) {
-    const ctx = jsx_table_contextMap.get(token);
-    const node = this.stack[this.stack.length - 1];
-    if (ctx) {
-        node.value = ctx.chunks.join('');
-        jsx_table_contextMap.delete(token);
+    function after(code) {
+        if (self.parser.lazy[self.now().line]) {
+            return nok(code);
+        }
+        return ok(code);
     }
-    this.exit(token);
 }
-function jsxTableFromMarkdown() {
+// ---------------------------------------------------------------------------
+// Text construct (inline)
+// ---------------------------------------------------------------------------
+const htmlBlockComponentTextConstruct = {
+    name: 'htmlBlockComponent',
+    tokenize: syntax_createTokenize('text'),
+};
+// ---------------------------------------------------------------------------
+// Extension
+// ---------------------------------------------------------------------------
+function htmlBlockComponent() {
     return {
-        enter: {
-            jsxTable: enterJsxTable,
+        flow: {
+            [codes.lessThan]: [htmlBlockComponentFlowConstruct],
         },
-        exit: {
-            jsxTableData: exitJsxTableData,
-            jsxTable: exitJsxTable,
+        text: {
+            [codes.lessThan]: [htmlBlockComponentTextConstruct],
         },
     };
 }
 
+;// ./lib/micromark/html-block-component/index.ts
+
+
 ;// ./lib/micromark/jsx-comment/syntax.ts
 
 
@@ -125897,243 +126610,6 @@ function jsxComment() {
     };
 }
 
-;// ./lib/micromark/jsx-table/syntax.ts
-
-
-const jsx_table_syntax_nonLazyContinuationStart = {
-    tokenize: jsx_table_syntax_tokenizeNonLazyContinuationStart,
-    partial: true,
-};
-function resolveToJsxTable(events) {
-    let index = events.length;
-    while (index > 0) {
-        index -= 1;
-        if (events[index][0] === 'enter' && events[index][1].type === 'jsxTable') {
-            break;
-        }
-    }
-    if (index > 1 && events[index - 2][1].type === types_types.linePrefix) {
-        events[index][1].start = events[index - 2][1].start;
-        events[index + 1][1].start = events[index - 2][1].start;
-        events.splice(index - 2, 2);
-    }
-    return events;
-}
-const jsxTableConstruct = {
-    name: 'jsxTable',
-    tokenize: tokenizeJsxTable,
-    resolveTo: resolveToJsxTable,
-    concrete: true,
-};
-function tokenizeJsxTable(effects, ok, nok) {
-    let codeSpanOpenSize = 0;
-    let codeSpanCloseSize = 0;
-    let depth = 1;
-    const ABLE_SUFFIX = [codes.lowercaseA, codes.lowercaseB, codes.lowercaseL, codes.lowercaseE];
-    /** Build a state chain that matches a sequence of character codes. */
-    function matchChars(chars, onMatch, onFail) {
-        if (chars.length === 0)
-            return onMatch;
-        return ((code) => {
-            if (code === chars[0]) {
-                effects.consume(code);
-                return matchChars(chars.slice(1), onMatch, onFail);
-            }
-            return onFail(code);
-        });
-    }
-    return start;
-    function start(code) {
-        if (code !== codes.lessThan)
-            return nok(code);
-        effects.enter('jsxTable');
-        effects.enter('jsxTableData');
-        effects.consume(code);
-        return afterLessThan;
-    }
-    function afterLessThan(code) {
-        if (code === codes.uppercaseT || code === codes.lowercaseT) {
-            effects.consume(code);
-            return matchChars(ABLE_SUFFIX, afterTagName, nok);
-        }
-        return nok(code);
-    }
-    function afterTagName(code) {
-        if (code === codes.greaterThan || code === codes.slash || code === codes.space || code === codes.horizontalTab) {
-            effects.consume(code);
-            return body;
-        }
-        return nok(code);
-    }
-    function body(code) {
-        // Reject unclosed <Table> so it falls back to normal HTML block parsing
-        // instead of swallowing all subsequent content to EOF
-        if (code === null) {
-            return nok(code);
-        }
-        if (markdownLineEnding(code)) {
-            effects.exit('jsxTableData');
-            return continuationStart(code);
-        }
-        if (code === codes.backslash) {
-            effects.consume(code);
-            return escapedChar;
-        }
-        if (code === codes.lessThan) {
-            effects.consume(code);
-            return closeSlash;
-        }
-        // Skip over backtick code spans so `</Table>` in inline code isn't
-        // treated as the closing tag
-        if (code === codes.graveAccent) {
-            codeSpanOpenSize = 0;
-            return countOpenTicks(code);
-        }
-        effects.consume(code);
-        return body;
-    }
-    function countOpenTicks(code) {
-        if (code === codes.graveAccent) {
-            codeSpanOpenSize += 1;
-            effects.consume(code);
-            return countOpenTicks;
-        }
-        return inCodeSpan(code);
-    }
-    function inCodeSpan(code) {
-        if (code === null || markdownLineEnding(code))
-            return body(code);
-        if (code === codes.graveAccent) {
-            codeSpanCloseSize = 0;
-            return countCloseTicks(code);
-        }
-        effects.consume(code);
-        return inCodeSpan;
-    }
-    function countCloseTicks(code) {
-        if (code === codes.graveAccent) {
-            codeSpanCloseSize += 1;
-            effects.consume(code);
-            return countCloseTicks;
-        }
-        return codeSpanCloseSize === codeSpanOpenSize ? body(code) : inCodeSpan(code);
-    }
-    function escapedChar(code) {
-        if (code === null || markdownLineEnding(code)) {
-            return body(code);
-        }
-        effects.consume(code);
-        return body;
-    }
-    function closeSlash(code) {
-        if (code === codes.slash) {
-            effects.consume(code);
-            return closeTagFirstChar;
-        }
-        if (code === codes.uppercaseT || code === codes.lowercaseT) {
-            effects.consume(code);
-            return matchChars(ABLE_SUFFIX, openAfterTagName, body);
-        }
-        return body(code);
-    }
-    function closeTagFirstChar(code) {
-        if (code === codes.uppercaseT || code === codes.lowercaseT) {
-            effects.consume(code);
-            return matchChars(ABLE_SUFFIX, closeGt, body);
-        }
-        return body(code);
-    }
-    function openAfterTagName(code) {
-        if (code === codes.greaterThan || code === codes.slash || code === codes.space || code === codes.horizontalTab) {
-            depth += 1;
-            effects.consume(code);
-            return body;
-        }
-        return body(code);
-    }
-    function closeGt(code) {
-        if (code === codes.greaterThan) {
-            depth -= 1;
-            effects.consume(code);
-            if (depth === 0) {
-                return afterClose;
-            }
-            return body;
-        }
-        return body(code);
-    }
-    function afterClose(code) {
-        if (code === null || markdownLineEnding(code)) {
-            effects.exit('jsxTableData');
-            effects.exit('jsxTable');
-            return ok(code);
-        }
-        effects.consume(code);
-        return afterClose;
-    }
-    // Line ending handling — follows the htmlFlow pattern
-    function continuationStart(code) {
-        return effects.check(jsx_table_syntax_nonLazyContinuationStart, continuationStartNonLazy, continuationAfter)(code);
-    }
-    function continuationStartNonLazy(code) {
-        effects.enter(types_types.lineEnding);
-        effects.consume(code);
-        effects.exit(types_types.lineEnding);
-        return continuationBefore;
-    }
-    function continuationBefore(code) {
-        if (code === null || markdownLineEnding(code)) {
-            return continuationStart(code);
-        }
-        effects.enter('jsxTableData');
-        return body(code);
-    }
-    function continuationAfter(code) {
-        // At EOF without </Table>, reject so content isn't swallowed
-        if (code === null) {
-            return nok(code);
-        }
-        effects.exit('jsxTable');
-        return ok(code);
-    }
-}
-function jsx_table_syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    return start;
-    function start(code) {
-        if (markdownLineEnding(code)) {
-            effects.enter(types_types.lineEnding);
-            effects.consume(code);
-            effects.exit(types_types.lineEnding);
-            return after;
-        }
-        return nok(code);
-    }
-    function after(code) {
-        if (self.parser.lazy[self.now().line]) {
-            return nok(code);
-        }
-        return ok(code);
-    }
-}
-/**
- * Micromark extension that tokenizes `<Table>...</Table>` and `<table>...</table>`
- * as a single flow block.
- *
- * Prevents CommonMark HTML block type 6 from fragmenting table blocks at blank lines.
- */
-function jsxTable() {
-    return {
-        flow: {
-            [codes.lessThan]: [jsxTableConstruct],
-        },
-    };
-}
-
-;// ./lib/micromark/jsx-table/index.ts
-
-
 ;// ./lib/micromark/mdx-expression-lenient/syntax.ts
 
 
@@ -126309,6 +126785,9 @@ function loadComponents() {
 
 
 
+
+
+
 
 
 
@@ -126323,15 +126802,19 @@ const defaultTransformers = [
  * CommonMark/remark limitations and reach parity with legacy (rdmd) rendering.
  *
  * Runs a series of string-level transformations before micromark/remark parsing:
- * 1. Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
- * 2. Terminate HTML flow blocks so subsequent content isn't swallowed
- * 3. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
- * 4. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
- * 5. Replace snake_case component names with parser-safe placeholders
+ * 1. Canonicalize closing tags with stray whitespace (e.g., `</ td >` → `</td>`)
+ * 2. Normalize malformed table separator syntax (e.g., `|: ---` → `| :---`)
+ * 3. Terminate HTML flow blocks so subsequent content isn't swallowed
+ * 4. Close invalid "self-closing" HTML tags (e.g., `<i />` → `<i></i>`)
+ * 5. Normalize compact ATX headings (e.g., `#Heading` → `# Heading`)
+ * 6. Replace snake_case component names with parser-safe placeholders
  */
 function preprocessContent(content, opts) {
     const { knownComponents } = opts;
-    let result = normalizeTableSeparator(content);
+    // Runs first so `jsxTable` sees a literal `</table>` (and the HTML-line
+    // classification in `terminateHtmlFlowBlocks` is accurate)
+    let result = normalizeClosingTagWhitespace(content);
+    result = normalizeTableSeparator(result);
     result = terminateHtmlFlowBlocks(result);
     result = closeSelfClosingHtmlTags(result);
     result = normalizeCompactHeadings(result);
@@ -126360,6 +126843,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         syntax_gemoji(),
         legacyVariable(),
         looseHtmlEntity(),
+        htmlBlockComponent(),
     ];
     const fromMarkdownExts = [
         jsxTableFromMarkdown(),
@@ -126369,6 +126853,7 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         legacyVariableFromMarkdown(),
         emptyTaskListItemFromMarkdown(),
         looseHtmlEntityFromMarkdown(),
+        htmlBlockComponentFromMarkdown(),
     ];
     if (!safeMode) {
         // Insert mdx expression (text-only, no flow) after gemoji at index 3
@@ -126382,6 +126867,10 @@ function mdxishAstProcessor(mdContent, opts = {}) {
         // JSX comment tokenizer must come before magicBlock so it claims `{/* ... */}` first
         micromarkExts.unshift(jsxComment());
     }
+    // Claim `<HTMLBlock>` as one opaque token so broad tokenizers can't fragment its body
+    // We put this last as micromark tries the last-registered extension first, so push (not unshift) to win the `<` race.
+    // micromarkExts.push(htmlBlockComponent());
+    // fromMarkdownExts.push(htmlBlockComponentFromMarkdown());
     const processor = unified()
         .data('micromarkExtensions', micromarkExts)
         .data('fromMarkdownExtensions', fromMarkdownExts)
@@ -126437,6 +126926,12 @@ function mdxishMdastToMd(mdast) {
         .use(remarkStringify, {
         bullet: '-',
         emphasis: '_',
+        // Escape literal braces in text so they don't parse as (often
+        // unterminated) MDX expressions on the next round trip.
+        unsafe: [
+            { character: '{', inConstruct: 'phrasing' },
+            { character: '}', inConstruct: 'phrasing' },
+        ],
     });
     return processor.stringify(processor.runSync(mdast));
 }
@@ -126975,332 +127470,6 @@ const mdxishTags_tags = (doc) => {
 };
 /* harmony default export */ const mdxishTags = (mdxishTags_tags);
 
-;// ./lib/mdast-util/html-block-component/index.ts
-const html_block_component_contextMap = new WeakMap();
-function findHtmlBlockComponentToken() {
-    const events = this.tokenStack;
-    for (let i = events.length - 1; i >= 0; i -= 1) {
-        if (events[i][0].type === 'htmlBlockComponent')
-            return events[i][0];
-    }
-    return undefined;
-}
-function enterHtmlBlockComponent(token) {
-    html_block_component_contextMap.set(token, { chunks: [], lastEndLine: token.start.line });
-    this.enter({ type: 'html', value: '' }, token);
-}
-function exitHtmlBlockComponentData(token) {
-    const componentToken = findHtmlBlockComponentToken.call(this);
-    if (!componentToken)
-        return;
-    const ctx = html_block_component_contextMap.get(componentToken);
-    if (ctx) {
-        const gap = token.start.line - ctx.lastEndLine;
-        if (ctx.chunks.length > 0 && gap > 0) {
-            ctx.chunks.push('\n'.repeat(gap));
-        }
-        ctx.chunks.push(this.sliceSerialize(token));
-        ctx.lastEndLine = token.end.line;
-    }
-}
-function exitHtmlBlockComponent(token) {
-    const ctx = html_block_component_contextMap.get(token);
-    const node = this.stack[this.stack.length - 1];
-    if (ctx) {
-        node.value = ctx.chunks.join('');
-        html_block_component_contextMap.delete(token);
-    }
-    this.exit(token);
-}
-function htmlBlockComponentFromMarkdown() {
-    return {
-        enter: {
-            htmlBlockComponent: enterHtmlBlockComponent,
-        },
-        exit: {
-            htmlBlockComponentData: exitHtmlBlockComponentData,
-            htmlBlockComponent: exitHtmlBlockComponent,
-        },
-    };
-}
-
-;// ./lib/micromark/html-block-component/syntax.ts
-
-
-const TAG_SUFFIX = [
-    codes.uppercaseT,
-    codes.uppercaseM,
-    codes.uppercaseL,
-    codes.uppercaseB,
-    codes.lowercaseL,
-    codes.lowercaseO,
-    codes.lowercaseC,
-    codes.lowercaseK,
-];
-// ---------------------------------------------------------------------------
-// Shared tokenizer factory
-// ---------------------------------------------------------------------------
-/**
- * Creates a tokenize function for `<HTMLBlock>...</HTMLBlock>`.
- *
- * - **flow** (block-level): supports multiline content via line continuations,
- *   consumes trailing whitespace after the closing tag.
- * - **text** (inline): single-line only, exits immediately after the closing tag.
- */
-function syntax_createTokenize(mode) {
-    return function tokenize(effects, ok, nok) {
-        let depth = 1;
-        function matchChars(chars, onMatch, onFail) {
-            if (chars.length === 0)
-                return onMatch;
-            const next = (code) => {
-                if (code === chars[0]) {
-                    effects.consume(code);
-                    return matchChars(chars.slice(1), onMatch, onFail);
-                }
-                return onFail(code);
-            };
-            return next;
-        }
-        function matchTagName(onMatch, onFail) {
-            const next = (code) => {
-                if (code === codes.uppercaseH) {
-                    effects.consume(code);
-                    return matchChars(TAG_SUFFIX, onMatch, onFail);
-                }
-                return onFail(code);
-            };
-            return next;
-        }
-        return start;
-        function start(code) {
-            if (code !== codes.lessThan)
-                return nok(code);
-            effects.enter('htmlBlockComponent');
-            effects.enter('htmlBlockComponentData');
-            effects.consume(code);
-            return matchTagName(afterTagName, nok);
-        }
-        function afterTagName(code) {
-            if (code === codes.greaterThan) {
-                effects.consume(code);
-                return body;
-            }
-            if (code === codes.space || code === codes.horizontalTab) {
-                effects.consume(code);
-                return inAttributes;
-            }
-            if (mode === 'flow' && markdownLineEnding(code)) {
-                effects.exit('htmlBlockComponentData');
-                return attributeContinuationStart(code);
-            }
-            if (code === codes.slash) {
-                effects.consume(code);
-                return selfClose;
-            }
-            return nok(code);
-        }
-        function inAttributes(code) {
-            if (code === codes.greaterThan) {
-                effects.consume(code);
-                return body;
-            }
-            if (code === null) {
-                return nok(code);
-            }
-            if (markdownLineEnding(code)) {
-                if (mode === 'text')
-                    return nok(code);
-                effects.exit('htmlBlockComponentData');
-                return attributeContinuationStart(code);
-            }
-            effects.consume(code);
-            return inAttributes;
-        }
-        function attributeContinuationStart(code) {
-            return effects.check(html_block_component_syntax_nonLazyContinuationStart, attributeContinuationNonLazy, continuationAfter)(code);
-        }
-        function attributeContinuationNonLazy(code) {
-            effects.enter(types_types.lineEnding);
-            effects.consume(code);
-            effects.exit(types_types.lineEnding);
-            return attributeContinuationBefore;
-        }
-        function attributeContinuationBefore(code) {
-            if (code === null || markdownLineEnding(code)) {
-                return attributeContinuationStart(code);
-            }
-            effects.enter('htmlBlockComponentData');
-            return inAttributes(code);
-        }
-        function selfClose(code) {
-            if (code === codes.greaterThan) {
-                effects.consume(code);
-                return mode === 'flow' ? afterClose : done(code);
-            }
-            return nok(code);
-        }
-        function body(code) {
-            if (code === null)
-                return nok(code);
-            if (markdownLineEnding(code)) {
-                if (mode === 'text') {
-                    // Text constructs operate on paragraph content which spans lines
-                    effects.consume(code);
-                    return body;
-                }
-                effects.exit('htmlBlockComponentData');
-                return continuationStart(code);
-            }
-            if (code === codes.lessThan) {
-                effects.consume(code);
-                return closeSlash;
-            }
-            effects.consume(code);
-            return body;
-        }
-        function closeSlash(code) {
-            if (code === codes.slash) {
-                effects.consume(code);
-                return matchTagName(closeGt, body);
-            }
-            return matchTagName(openAfterTagName, body)(code);
-        }
-        function openAfterTagName(code) {
-            if (code === codes.greaterThan || code === codes.space || code === codes.horizontalTab) {
-                depth += 1;
-                effects.consume(code);
-                return body;
-            }
-            return body(code);
-        }
-        function closeGt(code) {
-            if (code === codes.greaterThan) {
-                depth -= 1;
-                effects.consume(code);
-                if (depth === 0) {
-                    return mode === 'flow' ? afterClose : done(code);
-                }
-                return body;
-            }
-            return body(code);
-        }
-        // -- flow-only states ---------------------------------------------------
-        function afterClose(code) {
-            if (code === null || markdownLineEnding(code)) {
-                return done(code);
-            }
-            if (code === codes.space || code === codes.horizontalTab) {
-                effects.consume(code);
-                return afterClose;
-            }
-            // Reject so the block re-parses as a paragraph, deferring to the
-            // text tokenizer which preserves trailing content in the same line.
-            return nok(code);
-        }
-        // -- flow-only: line continuation ---------------------------------------
-        function continuationStart(code) {
-            return effects.check(html_block_component_syntax_nonLazyContinuationStart, continuationStartNonLazy, continuationAfter)(code);
-        }
-        function continuationStartNonLazy(code) {
-            effects.enter(types_types.lineEnding);
-            effects.consume(code);
-            effects.exit(types_types.lineEnding);
-            return continuationBefore;
-        }
-        function continuationBefore(code) {
-            if (code === null || markdownLineEnding(code)) {
-                return continuationStart(code);
-            }
-            effects.enter('htmlBlockComponentData');
-            return body(code);
-        }
-        function continuationAfter(code) {
-            if (code === null)
-                return nok(code);
-            effects.exit('htmlBlockComponent');
-            return ok(code);
-        }
-        // -- shared exit --------------------------------------------------------
-        function done(_code) {
-            effects.exit('htmlBlockComponentData');
-            effects.exit('htmlBlockComponent');
-            return ok(_code);
-        }
-    };
-}
-// ---------------------------------------------------------------------------
-// Flow construct (block-level)
-// ---------------------------------------------------------------------------
-const html_block_component_syntax_nonLazyContinuationStart = {
-    tokenize: html_block_component_syntax_tokenizeNonLazyContinuationStart,
-    partial: true,
-};
-function resolveToHtmlBlockComponent(events) {
-    let index = events.length;
-    while (index > 0) {
-        index -= 1;
-        if (events[index][0] === 'enter' && events[index][1].type === 'htmlBlockComponent') {
-            break;
-        }
-    }
-    if (index > 1 && events[index - 2][1].type === types_types.linePrefix) {
-        events[index][1].start = events[index - 2][1].start;
-        events[index + 1][1].start = events[index - 2][1].start;
-        events.splice(index - 2, 2);
-    }
-    return events;
-}
-const htmlBlockComponentFlowConstruct = {
-    name: 'htmlBlockComponent',
-    tokenize: syntax_createTokenize('flow'),
-    resolveTo: resolveToHtmlBlockComponent,
-    concrete: true,
-};
-function html_block_component_syntax_tokenizeNonLazyContinuationStart(effects, ok, nok) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this;
-    return start;
-    function start(code) {
-        if (markdownLineEnding(code)) {
-            effects.enter(types_types.lineEnding);
-            effects.consume(code);
-            effects.exit(types_types.lineEnding);
-            return after;
-        }
-        return nok(code);
-    }
-    function after(code) {
-        if (self.parser.lazy[self.now().line]) {
-            return nok(code);
-        }
-        return ok(code);
-    }
-}
-// ---------------------------------------------------------------------------
-// Text construct (inline)
-// ---------------------------------------------------------------------------
-const htmlBlockComponentTextConstruct = {
-    name: 'htmlBlockComponent',
-    tokenize: syntax_createTokenize('text'),
-};
-// ---------------------------------------------------------------------------
-// Extension
-// ---------------------------------------------------------------------------
-function htmlBlockComponent() {
-    return {
-        flow: {
-            [codes.lessThan]: [htmlBlockComponentFlowConstruct],
-        },
-        text: {
-            [codes.lessThan]: [htmlBlockComponentTextConstruct],
-        },
-    };
-}
-
-;// ./lib/micromark/html-block-component/index.ts
-
-
 ;// ./lib/utils/extractMagicBlocks.ts
 /**
  * The content matching in this regex captures everything between `[block:TYPE]`