@astryxdesign/core 0.6.1 → 0.6.2-canary.023c3e4

package/dist/Markdown/Markdown.js

@@ -4,11 +4,11 @@
 
 /**
  * @file Markdown.tsx
- * @input Markdown string, parser AST types
- * @output Exports Markdown component and MarkdownProps
+ * @input Markdown string, canonical AST, optional plugins and custom renderers
+ * @output Exports Markdown component, MarkdownProps, and renderer contracts
  * @position Core implementation; renders markdown as Astryx components
  */
-import { useMemo, useRef } from 'react';
+import { Component, Suspense, useMemo, useRef } from 'react';
 import { Fragment } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
@@ -31,7 +31,11 @@ import { computeBoundaries, computeSegments } from "./streaming.js";
 import { useTheme } from "../theme/useTheme.js";
 import { Citation } from "../Citation/Citation.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { parseInline, parseMarkdown, parseMarkdownIncremental, createIncrementalState, trimStreamingArtifacts, inlineText, slugify, uniqueSlug } from "./parser.js";
+import { parseInlineAst, parseMarkdownAst, parseMarkdownAstIncremental, createIncrementalState, trimStreamingArtifacts, slugify, uniqueSlug } from "./parser.js";
+import { getMarkdownAstLegacyCodeLanguage, markdownAstText } from "./ast.js";
+import { applyMarkdownTransforms, getMarkdownExtensionRenderer, markdownExtensionText, prepareMarkdownPlugins, reportMarkdownPluginFailure } from "./plugins/protocol.js";
+import { getMarkdownFenceProposal } from "./plugins/semanticFence.js";
+import { sanitizeMarkdownUrl } from "./url.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -42,7 +46,7 @@ import { useTranslator } from "../i18n/index.js";
 /**
  * A plugin that transforms text patterns into custom React elements
  * inside Markdown. Applied to parsed text nodes only — code blocks,
- * inline code, and other non-prose contexts are unaffected.
+ * inline code, math, and other non-prose contexts are unaffected.
  *
  * Follows Lexical's TextMatchTransformer architecture:
  * - `pattern` for initial regex matching
@@ -331,17 +335,20 @@ function countInlineTextLength(nodes) {
   for (const node of nodes) {
     switch (node.type) {
       case 'text':
-        len += node.content.length;
+        len += node.value.length;
         break;
-      case 'code':
-        len += node.content.length;
+      case 'inlineCode':
+        len += node.value.length;
+        break;
+      case 'inlineMath':
+        len += node.value.length;
         break;
       case 'image':
         len += node.alt.length;
         break;
-      case 'bold':
-      case 'italic':
-      case 'strikethrough':
+      case 'strong':
+      case 'emphasis':
+      case 'delete':
       case 'link':
         len += countInlineTextLength(node.children);
         break;
@@ -351,6 +358,9 @@ function countInlineTextLength(nodes) {
       case 'citation':
         len += 1;
         break;
+      case 'extension':
+        len += node.source?.length ?? 0;
+        break;
     }
   }
   return len;
@@ -367,28 +377,31 @@ function countBlockTextLength(nodes) {
       case 'paragraph':
         len += countInlineTextLength(node.children);
         break;
-      case 'codeblock':
-        len += node.content.length;
+      case 'code':
+        len += node.value.length;
+        break;
+      case 'math':
+        len += node.value.length;
         break;
       case 'blockquote':
         len += countBlockTextLength(node.children);
         break;
       case 'list':
-        for (const item of node.items) {
+        for (const item of node.children) {
           len += countBlockTextLength(item.children);
         }
         break;
       case 'table':
-        for (const h of node.headers) {
-          len += countInlineTextLength(h.children);
-        }
-        for (const row of node.rows) {
-          for (const cell of row) {
+        for (const row of node.children) {
+          for (const cell of row.children) {
             len += countInlineTextLength(cell.children);
           }
         }
         break;
-      case 'hr':
+      case 'extension':
+        len += node.source?.length ?? 0;
+        break;
+      case 'thematicBreak':
         break;
       case 'image':
         len += node.alt.length;
@@ -407,26 +420,6 @@ const headingStyles = {
 };
 
 // ---------------------------------------------------------------------------
-// URL sanitization — block dangerous protocols
-// ---------------------------------------------------------------------------
-
-const DANGEROUS_URL_PATTERN = /^(javascript|data|vbscript):/i;
-function sanitizeUrl(url) {
-  // Strip control characters before testing, the same normalization the
-  // parser's isSafeUrl applies — the anchored pattern must see the URL the
-  // way a browser will. Return the normalized value so the stripped
-  // characters don't ride along into an attribute or component override.
-  // eslint-disable-next-line no-control-regex -- control chars are the bypass
-  const normalized = url.replace(/[\x00-\x1f\x7f]/g, '').trim();
-  if (normalized.length === 0) {
-    return null;
-  }
-  if (DANGEROUS_URL_PATTERN.test(normalized)) {
-    return null;
-  }
-  return normalized;
-}
-
 // ---------------------------------------------------------------------------
 // Inline plugin matching
 // ---------------------------------------------------------------------------
@@ -518,6 +511,42 @@ function applyInlinePlugins(text, plugins) {
   }
   return segments;
 }
+class MarkdownPluginBoundary extends Component {
+  state = {
+    failed: false,
+    resetKey: this.props.resetKey,
+    resetRenderer: this.props.resetRenderer
+  };
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.resetKey && props.resetRenderer === state.resetRenderer ? null : {
+      failed: false,
+      resetKey: props.resetKey,
+      resetRenderer: props.resetRenderer
+    };
+  }
+  componentDidCatch(error) {
+    reportMarkdownPluginFailure(this.props.pluginName, 'render', error);
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+function useStableMarkdownSyntaxEntries(plugins) {
+  const identity = plugins?.syntaxIdentity ?? '';
+  const syntaxEntriesRef = useRef(undefined);
+  if (syntaxEntriesRef.current == null || syntaxEntriesRef.current.identity !== identity) {
+    syntaxEntriesRef.current = {
+      identity,
+      entries: plugins == null || identity === '' ? undefined : plugins.syntaxEntries
+    };
+  }
+  return syntaxEntriesRef.current.entries;
+}
 
 // ---------------------------------------------------------------------------
 // Inline renderer
@@ -565,12 +594,12 @@ function getCitationNumber(ctx, sourceId) {
   }
   return num;
 }
-function renderInline(node, index, onLinkClick, cursor, citationCtx, linkComponent = 'a', inlinePlugins, components) {
+function renderInline(node, index, onLinkClick, cursor, citationCtx, linkComponent = 'a', inlinePlugins, components, preparedPlugins) {
   switch (node.type) {
     case 'text':
       {
         if (inlinePlugins && inlinePlugins.length > 0) {
-          const segments = applyInlinePlugins(node.content, inlinePlugins);
+          const segments = applyInlinePlugins(node.value, inlinePlugins);
           // If no plugin matched, fall through to the normal path
           // O(1) guard: applyInlinePlugins returns a single text segment when
           // nothing matched — skip the plugin path entirely in that case.
@@ -593,52 +622,64 @@ function renderInline(node, index, onLinkClick, cursor, citationCtx, linkCompone
             }, index);
           }
         }
-        return wrapTextWithFade(node.content, cursor, index);
+        return wrapTextWithFade(node.value, cursor, index);
       }
-    case 'bold':
+    case 'strong':
       return /*#__PURE__*/_jsx("strong", {
         ...{
           className: "x2mo6ok"
         },
-        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
       }, index);
-    case 'italic':
+    case 'emphasis':
       return /*#__PURE__*/_jsx("em", {
-        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
       }, index);
-    case 'strikethrough':
+    case 'delete':
       return /*#__PURE__*/_jsx("del", {
         ...{
           className: "xv1l7n4"
         },
-        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+        children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
       }, index);
-    case 'code':
+    case 'inlineCode':
       {
         // Track code content length for cursor but don't split inside code
-        cursor.offset += node.content.length;
+        cursor.offset += node.value.length;
         const InlineCodeComp = components?.inlineCode;
         const codeEl = InlineCodeComp ? /*#__PURE__*/_jsx(InlineCodeComp, {
-          children: node.content
+          children: node.value
         }, index) : /*#__PURE__*/_jsx(Code, {
-          children: node.content
+          children: node.value
         }, index);
         return codeEl;
       }
+    case 'inlineMath':
+      {
+        const MathComp = components?.math;
+        if (MathComp == null) {
+          return wrapTextWithFade(`$${node.value}$`, cursor, index);
+        }
+        cursor.offset += node.value.length;
+        return /*#__PURE__*/_jsx(MathComp, {
+          value: node.value,
+          display: "inline"
+        }, index);
+      }
     case 'link':
       {
-        const safeHref = sanitizeUrl(node.href);
+        const safeHref = sanitizeMarkdownUrl(node.url);
         if (safeHref == null) {
           // Unsafe URL — render as plain text
           return /*#__PURE__*/_jsx("span", {
-            children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+            children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
           }, index);
         }
         const LinkComp = components?.link;
         if (LinkComp) {
           return /*#__PURE__*/_jsx(LinkComp, {
             href: safeHref,
-            children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+            children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
           }, index);
         }
         const isExternal = safeHref.startsWith('https://') || safeHref.startsWith('http://');
@@ -662,12 +703,12 @@ function renderInline(node, index, onLinkClick, cursor, citationCtx, linkCompone
           ...{
             className: "xjse4m1 x1bvjpef"
           },
-          children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+          children: node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
         }, index);
       }
     case 'image':
       {
-        const safeSrc = sanitizeUrl(node.src);
+        const safeSrc = sanitizeMarkdownUrl(node.url);
         if (safeSrc == null) {
           return /*#__PURE__*/_jsxs("span", {
             children: ["[", node.alt, "]"]
@@ -688,6 +729,33 @@ function renderInline(node, index, onLinkClick, cursor, citationCtx, linkCompone
           }
         }, index);
       }
+    case 'extension':
+      {
+        const renderer = getMarkdownExtensionRenderer(preparedPlugins, node);
+        const fallback = wrapTextWithFade(node.source ?? markdownExtensionText(preparedPlugins, node), cursor, index);
+        if (renderer == null) {
+          return fallback;
+        }
+        let rendered;
+        try {
+          rendered = renderer.render({
+            node
+          });
+        } catch (error) {
+          reportMarkdownPluginFailure(node.plugin, 'render', error);
+          return fallback;
+        }
+        return /*#__PURE__*/_jsx(MarkdownPluginBoundary, {
+          pluginName: node.plugin,
+          resetKey: node,
+          resetRenderer: renderer.render,
+          fallback: fallback,
+          children: /*#__PURE__*/_jsx(Suspense, {
+            fallback: fallback,
+            children: rendered
+          })
+        }, index);
+      }
     case 'break':
       cursor.offset += 1;
       return /*#__PURE__*/_jsx("br", {}, index);
@@ -728,10 +796,11 @@ function getElementSpacing(node, density) {
   const compact = density === 'compact';
   switch (node.type) {
     case 'heading':
-      return node.level <= 3 ? compact ? styles.spacingHeadingMajorCompact : styles.spacingHeadingMajorDefault : compact ? styles.spacingHeadingMinorCompact : styles.spacingHeadingMinorDefault;
+      return node.depth <= 3 ? compact ? styles.spacingHeadingMajorCompact : styles.spacingHeadingMajorDefault : compact ? styles.spacingHeadingMinorCompact : styles.spacingHeadingMinorDefault;
     case 'paragraph':
       return compact ? styles.spacingParagraphCompact : styles.spacingParagraphDefault;
-    case 'codeblock':
+    case 'code':
+    case 'math':
       return compact ? styles.spacingCodeblockCompact : styles.spacingCodeblockDefault;
     case 'blockquote':
       return compact ? styles.spacingBlockquoteCompact : styles.spacingBlockquoteDefault;
@@ -739,7 +808,9 @@ function getElementSpacing(node, density) {
       return compact ? styles.spacingListCompact : styles.spacingListDefault;
     case 'table':
       return compact ? styles.spacingTableCompact : styles.spacingTableDefault;
-    case 'hr':
+    case 'extension':
+      return compact ? styles.spacingParagraphCompact : styles.spacingParagraphDefault;
+    case 'thematicBreak':
       return compact ? styles.spacingHrCompact : styles.spacingHrDefault;
     case 'image':
       return compact ? styles.spacingImageCompact : styles.spacingImageDefault;
@@ -755,11 +826,16 @@ function getElementSpacing(node, density) {
  * Buckets: ≤6 chars → 60px, 7–15 → 80px, >15 → 120px.
  */
 function computeTableColumnMinWidths(node) {
-  return node.headers.map((h, colIdx) => {
-    let maxLen = countInlineTextLength(h.children);
-    for (const row of node.rows) {
-      if (row[colIdx]) {
-        const len = countInlineTextLength(row[colIdx].children);
+  const [header, ...rows] = node.children;
+  if (header == null) {
+    return [];
+  }
+  return header.children.map((cell, colIdx) => {
+    let maxLen = countInlineTextLength(cell.children);
+    for (const row of rows) {
+      const rowCell = row.children[colIdx];
+      if (rowCell != null) {
+        const len = countInlineTextLength(rowCell.children);
         if (len > maxLen) {
           maxLen = len;
         }
@@ -768,7 +844,7 @@ function computeTableColumnMinWidths(node) {
     return maxLen <= 6 ? 60 : maxLen <= 15 ? 80 : 120;
   });
 }
-function renderBlock(node, index, blockCount, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent = 'a', inlinePlugins, components, t, headingIdMap) {
+function renderBlock(node, index, blockCount, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent = 'a', inlinePlugins, components, preparedPlugins, t, headingIdMap) {
   const blockAlignMargin = BLOCK_ALIGN_MARGIN[contentAlign];
   const blockAlignStyle = blockAlignMargin != null ? dynamicStyles.blockAlign(blockAlignMargin) : null;
   const spacing = getElementSpacing(node, density);
@@ -777,8 +853,8 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
   switch (node.type) {
     case 'heading':
       {
-        const level = Math.min(node.level + headingLevelStart - 1, 6);
-        const headingChildren = node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components));
+        const level = Math.min(node.depth + headingLevelStart - 1, 6);
+        const headingChildren = node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins));
         // Only top-level headings get an id: the map is built from the same
         // traversal parseOutlineFromMarkdown uses (which skips headings nested
         // in blockquotes / list items), so rendered ids and outline ids stay
@@ -804,7 +880,7 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
       }
     case 'paragraph':
       {
-        const paraChildren = node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components));
+        const paraChildren = node.children.map((c, i) => renderInline(c, i, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins));
         const ParagraphComp = components?.paragraph;
         if (ParagraphComp) {
           return /*#__PURE__*/_jsx(ParagraphComp, {
@@ -828,34 +904,79 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
           children: paraChildren
         }, index);
       }
-    case 'codeblock':
+    case 'code':
       {
         // Track codeblock content in cursor for accurate character counting
-        cursor.offset += node.content.length;
+        cursor.offset += node.value.length;
+        const language = getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
         const CodeBlockComp = components?.code;
         if (CodeBlockComp) {
           return /*#__PURE__*/_jsx(CodeBlockComp, {
-            code: node.content,
-            language: node.language
+            code: node.value,
+            language: language
           }, index);
         }
-        return /*#__PURE__*/_jsx("div", {
+        const fallback = /*#__PURE__*/_jsx("div", {
           ...mergeProps(themeProps('markdown-codeblock', {
             density
           }), stylex.props(spacing, styles.codeBlockWrapper, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd)),
           children: /*#__PURE__*/_jsx(CodeBlock, {
-            code: node.content,
-            language: node.language,
+            code: node.value,
+            language: language,
             isCollapsible: true,
             xstyle: [contentWidthValue != null ? dynamicStyles.blockWidth(contentWidthValue) : undefined, blockAlignStyle]
           })
         }, index);
+        const proposal = getMarkdownFenceProposal(node);
+        if (proposal == null) {
+          return fallback;
+        }
+        const renderer = getMarkdownExtensionRenderer(preparedPlugins, proposal.node);
+        if (renderer == null) {
+          return fallback;
+        }
+        try {
+          const rendered = renderer.render({
+            node: proposal.node
+          });
+          if (rendered == null || typeof rendered === 'boolean') {
+            return fallback;
+          }
+          return /*#__PURE__*/_jsx(MarkdownPluginBoundary, {
+            pluginName: proposal.node.plugin,
+            resetKey: proposal.node,
+            resetRenderer: renderer.render,
+            fallback: fallback,
+            children: /*#__PURE__*/_jsx(Suspense, {
+              fallback: fallback,
+              children: rendered
+            })
+          }, index);
+        } catch (error) {
+          reportMarkdownPluginFailure(proposal.node.plugin, 'render', error);
+          return fallback;
+        }
+      }
+    case 'math':
+      {
+        cursor.offset += node.value.length;
+        const MathComp = components?.math;
+        if (MathComp == null) {
+          return /*#__PURE__*/_jsx("div", {
+            role: "paragraph",
+            children: `$$${node.value}$$`
+          }, index);
+        }
+        return /*#__PURE__*/_jsx(MathComp, {
+          value: node.value,
+          display: "block"
+        }, index);
       }
     case 'blockquote':
       {
         const BlockquoteComp = components?.blockquote;
         if (BlockquoteComp) {
-          const bqC = node.children.map((c, i) => renderBlock(c, i, node.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, t));
+          const bqC = node.children.map((c, i) => renderBlock(c, i, node.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, preparedPlugins, t));
           return /*#__PURE__*/_jsx(BlockquoteComp, {
             children: bqC
           }, index);
@@ -865,16 +986,16 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
             density
           }),
           xstyle: [spacing, contentWidthValue != null ? dynamicStyles.proseWidth(contentWidthValue) : undefined, contentAlign !== 'start' ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign]) : undefined, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd],
-          children: node.children.map((c, i) => renderBlock(c, i, node.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, t))
+          children: node.children.map((c, i) => renderBlock(c, i, node.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, preparedPlugins, t))
         }, index);
       }
     case 'list':
       {
         // Detect task lists: all items have a checked state
-        const isTaskList = node.items.length > 0 && node.items.every(item => item.checked != null);
+        const isTaskList = node.children.length > 0 && node.children.every(item => item.checked != null);
         if (isTaskList) {
           // Extract labels from task items — render as rich inline content
-          const checkedValues = node.items.map((item, i) => ({
+          const checkedValues = node.children.map((item, i) => ({
             item,
             key: `task-${i}`
           })).filter(({
@@ -893,13 +1014,13 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
               xstyle: styles.blockIndent,
               isReadOnly: true,
               density: "compact",
-              children: node.items.map((item, i) => {
+              children: node.children.map((item, i) => {
                 const firstChild = item.children[0];
                 const isInline = item.children.length === 1 && firstChild?.type === 'paragraph';
                 const label = isInline ? /*#__PURE__*/_jsx(_Fragment, {
-                  children: firstChild.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+                  children: firstChild.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
                 }) : /*#__PURE__*/_jsx(_Fragment, {
-                  children: item.children.map((c, j) => renderBlock(c, j, item.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, t))
+                  children: item.children.map((c, j) => renderBlock(c, j, item.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, preparedPlugins, t))
                 });
                 return /*#__PURE__*/_jsx(CheckboxListItem
                 // eslint-disable-next-line @eslint-react/no-array-index-key -- markdown task items are rendered from positional AST nodes
@@ -920,7 +1041,7 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
             density: "compact",
             start: node.ordered ? node.start : undefined,
             xstyle: styles.blockIndent,
-            children: node.items.map((item, i) => {
+            children: node.children.map((item, i) => {
               const firstChild = item.children[0];
               const isInline = item.children.length === 1 && firstChild?.type === 'paragraph';
 
@@ -928,9 +1049,9 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
               // whole item as a block instead of fading individual text spans.
 
               const label = isInline ? /*#__PURE__*/_jsx(_Fragment, {
-                children: firstChild.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+                children: firstChild.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
               }) : /*#__PURE__*/_jsx(_Fragment, {
-                children: item.children.map((c, j) => renderBlock(c, j, item.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, t))
+                children: item.children.map((c, j) => renderBlock(c, j, item.children.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidthValue, contentAlign, linkComponent, inlinePlugins, components, preparedPlugins, t))
               });
               return /*#__PURE__*/_jsx(ListItem
               // eslint-disable-next-line @eslint-react/no-array-index-key -- markdown list items are rendered from positional AST nodes
@@ -944,6 +1065,7 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
     case 'table':
       {
         const colMinWidths = computeTableColumnMinWidths(node);
+        const [header, ...rows] = node.children;
         return /*#__PURE__*/_jsx("div", {
           // Keyboard-focusable so keyboard users can scroll a horizontally
           // overflowing GFM table. Uses role="group" (not "region") so
@@ -960,20 +1082,20 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
             textOverflow: "wrap",
             children: [/*#__PURE__*/_jsx(TableHeader, {
               children: /*#__PURE__*/_jsx(TableRow, {
-                children: node.headers.map((h, i) => /*#__PURE__*/_jsx(TableHeaderCell
+                children: header?.children.map((h, i) => /*#__PURE__*/_jsx(TableHeaderCell
                 // eslint-disable-next-line @eslint-react/no-array-index-key -- markdown table columns are positional by definition
                 , {
-                  xstyle: [dynamicStyles.cellMinWidth(`${colMinWidths[i]}px`), node.alignments[i] === 'center' && cellAlignStyles.center, node.alignments[i] === 'right' && cellAlignStyles.end],
-                  children: h.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+                  xstyle: [dynamicStyles.cellMinWidth(`${colMinWidths[i]}px`), node.align[i] === 'center' && cellAlignStyles.center, node.align[i] === 'right' && cellAlignStyles.end],
+                  children: h.children.map((c, j) => renderInline(c, j, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
                 }, i))
               })
             }), /*#__PURE__*/_jsx(TableBody, {
-              children: node.rows.map((row, i) => {
-                const cells = row.map((cell, j) => /*#__PURE__*/_jsx(TableCell
+              children: rows.map((row, i) => {
+                const cells = row.children.map((cell, j) => /*#__PURE__*/_jsx(TableCell
                 // eslint-disable-next-line @eslint-react/no-array-index-key -- markdown table cells are positional by row and column
                 , {
-                  xstyle: [node.alignments[j] === 'center' && cellAlignStyles.center, node.alignments[j] === 'right' && cellAlignStyles.end],
-                  children: cell.children.map((c, k) => renderInline(c, k, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components))
+                  xstyle: [node.align[j] === 'center' && cellAlignStyles.center, node.align[j] === 'right' && cellAlignStyles.end],
+                  children: cell.children.map((c, k) => renderInline(c, k, onLinkClick, cursor, citationCtx, linkComponent, inlinePlugins, components, preparedPlugins))
                 }, j));
                 return /*#__PURE__*/_jsx(TableRow
                 // eslint-disable-next-line @eslint-react/no-array-index-key -- markdown table rows are rendered from positional AST nodes
@@ -985,7 +1107,37 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
           })
         }, index);
       }
-    case 'hr':
+    case 'extension':
+      {
+        const renderer = getMarkdownExtensionRenderer(preparedPlugins, node);
+        const fallbackText = node.source ?? markdownExtensionText(preparedPlugins, node);
+        const fallback = wrapTextWithFade(fallbackText, cursor, index);
+        let content = fallback;
+        if (renderer != null) {
+          try {
+            const rendered = renderer.render({
+              node
+            });
+            content = /*#__PURE__*/_jsx(MarkdownPluginBoundary, {
+              pluginName: node.plugin,
+              resetKey: node,
+              resetRenderer: renderer.render,
+              fallback: fallback,
+              children: /*#__PURE__*/_jsx(Suspense, {
+                fallback: fallback,
+                children: rendered
+              })
+            });
+          } catch (error) {
+            reportMarkdownPluginFailure(node.plugin, 'render', error);
+          }
+        }
+        return /*#__PURE__*/_jsx("div", {
+          ...stylex.props(spacing, contentWidthValue != null ? dynamicStyles.proseWidth(contentWidthValue) : null, contentAlign !== 'start' ? dynamicStyles.proseAlign(ALIGN_MARGIN[contentAlign]) : null, isFirst && styles.noMarginBlockStart, isLast && styles.noMarginBlockEnd),
+          children: content
+        }, index);
+      }
+    case 'thematicBreak':
       {
         const HrComp = components?.hr;
         if (HrComp) {
@@ -999,7 +1151,7 @@ function renderBlock(node, index, blockCount, density, headingLevelStart, onLink
       }
     case 'image':
       {
-        const safeSrc = sanitizeUrl(node.src);
+        const safeSrc = sanitizeMarkdownUrl(node.url);
         if (safeSrc == null) {
           return /*#__PURE__*/_jsxs("div", {
             ...mergeProps(themeProps('markdown-image', {
@@ -1059,6 +1211,7 @@ export function Markdown({
   contentWidth = 680,
   contentAlign = 'start',
   components,
+  plugins,
   inlinePlugins,
   autolink,
   xstyle,
@@ -1071,23 +1224,45 @@ export function Markdown({
   const LinkComponent = useLinkComponent();
   // Derive the set of source IDs for the parser (stable across renders when sources don't change)
   const sourceIds = useMemo(() => sources ? new Set(Object.keys(sources)) : undefined, [sources]);
-  const parseOptions = useMemo(() => ({
+  const preparedPlugins = useMemo(() => {
+    if (plugins == null) {
+      return undefined;
+    }
+    try {
+      return prepareMarkdownPlugins(plugins);
+    } catch (error) {
+      reportMarkdownPluginFailure('configuration', 'transform', error);
+      return undefined;
+    }
+  }, [plugins]);
+  const syntaxPlugins = useStableMarkdownSyntaxEntries(preparedPlugins);
+  const hasMathRenderer = components?.math != null;
+  const legacyParseOptions = useMemo(() => ({
     sourceIds,
-    autolink
-  }), [sourceIds, autolink]);
+    autolink,
+    plugins: syntaxPlugins
+  }), [sourceIds, autolink, syntaxPlugins]);
+  const mathParseOptions = useMemo(() => ({
+    sourceIds,
+    autolink,
+    math: true,
+    plugins: syntaxPlugins
+  }), [sourceIds, autolink, syntaxPlugins]);
 
   // Smooth bursty streamed chunks into a steady character-by-character reveal.
   // When not streaming, the hook returns children unchanged (no-op).
   const smoothedText = useStreamingText(children, isStreaming);
   const incrementalStateRef = useRef(createIncrementalState());
-  // Reset incremental cache when the autolink option toggles — cached
-  // settled blocks were parsed with the previous setting.
+  // Reset incremental cache when parser-affecting component options toggle —
+  // cached settled blocks were parsed with the previous setting.
   const prevAutolinkRef = useRef(autolink);
-  if (prevAutolinkRef.current !== autolink) {
+  const prevMathRef = useRef(hasMathRenderer);
+  if (prevAutolinkRef.current !== autolink || prevMathRef.current !== hasMathRenderer) {
     incrementalStateRef.current = createIncrementalState();
     prevAutolinkRef.current = autolink;
+    prevMathRef.current = hasMathRenderer;
   }
-  const blocks = useMemo(() => {
+  const parsedBlocks = useMemo(() => {
     if (display === 'inline') {
       return [];
     }
@@ -1096,11 +1271,17 @@ export function Markdown({
         incrementalStateRef.current = createIncrementalState();
         return [];
       }
-      const input = trimStreamingArtifacts(smoothedText);
-      return parseMarkdownIncremental(input, incrementalStateRef.current, parseOptions);
+      const options = hasMathRenderer ? mathParseOptions : legacyParseOptions;
+      const input = trimStreamingArtifacts(smoothedText, options);
+      return (hasMathRenderer ? parseMarkdownAstIncremental(input, incrementalStateRef.current, mathParseOptions) : parseMarkdownAstIncremental(input, incrementalStateRef.current, legacyParseOptions)).children;
     }
-    return parseMarkdown(children, parseOptions);
-  }, [display, smoothedText, children, isStreaming, parseOptions]);
+    return (hasMathRenderer ? parseMarkdownAst(children, mathParseOptions) : parseMarkdownAst(children, legacyParseOptions)).children;
+  }, [display, smoothedText, children, isStreaming, hasMathRenderer, mathParseOptions, legacyParseOptions]);
+  const transformSource = isStreaming ? trimStreamingArtifacts(smoothedText, hasMathRenderer ? mathParseOptions : legacyParseOptions) : children;
+  const blocks = useMemo(() => applyMarkdownTransforms({
+    type: 'root',
+    children: parsedBlocks
+  }, preparedPlugins, transformSource, !isStreaming, 'block').children, [parsedBlocks, preparedPlugins, transformSource, isStreaming]);
 
   // Assign each top-level heading the slug that parseOutlineFromMarkdown
   // would derive for it, so Outline hash links built from the same source
@@ -1116,19 +1297,35 @@ export function Markdown({
     const counts = new Map();
     for (const block of blocks) {
       if (block.type === 'heading') {
-        const label = inlineText(block.children).trim();
+        const label = markdownAstText(block.children, node => markdownExtensionText(preparedPlugins, node)).trim();
         map.set(block, uniqueSlug(slugify(label), counts));
       }
     }
     return map;
-  }, [display, blocks]);
+  }, [display, blocks, preparedPlugins]);
+  const parsedInlineNodes = useMemo(() => {
+    if (display !== 'inline') {
+      return [];
+    }
+    const options = hasMathRenderer ? mathParseOptions : legacyParseOptions;
+    const input = isStreaming ? trimStreamingArtifacts(smoothedText, options) : children;
+    return hasMathRenderer ? parseInlineAst(input, mathParseOptions) : parseInlineAst(input, legacyParseOptions);
+  }, [display, smoothedText, children, isStreaming, hasMathRenderer, mathParseOptions, legacyParseOptions]);
+  const inlineTransformSource = isStreaming ? trimStreamingArtifacts(smoothedText, hasMathRenderer ? mathParseOptions : legacyParseOptions) : children;
   const inlineNodes = useMemo(() => {
     if (display !== 'inline') {
       return [];
     }
-    const input = isStreaming ? trimStreamingArtifacts(smoothedText) : children;
-    return parseInline(input, parseOptions);
-  }, [display, smoothedText, children, isStreaming, parseOptions]);
+    const transformed = applyMarkdownTransforms({
+      type: 'root',
+      children: [{
+        type: 'paragraph',
+        children: parsedInlineNodes
+      }]
+    }, preparedPlugins, inlineTransformSource, !isStreaming, 'inline');
+    const paragraph = transformed.children[0];
+    return paragraph?.type === 'paragraph' ? [...paragraph.children] : parsedInlineNodes;
+  }, [display, parsedInlineNodes, preparedPlugins, inlineTransformSource, isStreaming]);
 
   // Track recent boundaries for stacked fade-in animation.
   // The number of spans needed = ceil(animationDuration / tickInterval).
@@ -1180,7 +1377,7 @@ export function Markdown({
       ...mergeProps(themeProps('markdown', {
         density
       }), stylex.props(styles.root, styles.inlineRoot, xstyle), className, style),
-      children: inlineNodes.map((node, i) => renderInline(node, i, onLinkClick, cursor, citationCtx, LinkComponent, inlinePlugins, components))
+      children: inlineNodes.map((node, i) => renderInline(node, i, onLinkClick, cursor, citationCtx, LinkComponent, inlinePlugins, components, preparedPlugins))
     });
 
     // Store current inline nodes for next render's boundary calculation.
@@ -1199,7 +1396,7 @@ export function Markdown({
     ...mergeProps(themeProps('markdown', {
       density
     }), stylex.props(styles.root, xstyle), className, style),
-    children: blocks.map((block, i) => renderBlock(block, i, blocks.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidth ? typeof contentWidth === 'number' ? `${contentWidth}px` : contentWidth : null, contentAlign, LinkComponent, inlinePlugins, components, t, headingIdMap))
+    children: blocks.map((block, i) => renderBlock(block, i, blocks.length, density, headingLevelStart, onLinkClick, cursor, citationCtx, contentWidth ? typeof contentWidth === 'number' ? `${contentWidth}px` : contentWidth : null, contentAlign, LinkComponent, inlinePlugins, components, preparedPlugins, t, headingIdMap))
   });
 
   // Store current blocks for next render's boundary calculation.