@stream-mdx/react 0.1.0 → 0.2.0

package/dist/components/index.mjs

@@ -70,6 +70,8 @@ var init_mdx_client = __esm({
       constructor(compileEndpoint = "/api/mdx-compile-v2") {
         this.cache = /* @__PURE__ */ new Map();
         this.inlineModules = /* @__PURE__ */ new Map();
+        this.compiledCache = /* @__PURE__ */ new Map();
+        this.compiledInflight = /* @__PURE__ */ new Map();
         this.compileEndpoint = compileEndpoint;
       }
       /**
@@ -94,34 +96,53 @@ var init_mdx_client = __esm({
           throw error;
         }
       }
-      /**
-       * Get compiled MDX by reference
-       */
-      async getCompiled(ref) {
+      async getCompiledInternal(ref) {
         const inline = this.inlineModules.get(ref.id);
         if (inline) {
-          return {
-            ...inline,
-            dependencies: Array.isArray(inline.dependencies) ? [...inline.dependencies] : []
-          };
+          return this.cloneCompiled(inline);
         }
-        const response = await fetch(`${this.compileEndpoint}?id=${ref.id}`);
-        if (!response.ok) {
-          throw new Error(`Failed to get compiled MDX: ${response.statusText}`);
+        const cached = this.compiledCache.get(ref.id);
+        if (cached) {
+          return this.cloneCompiled(cached);
         }
-        const data = await response.json();
-        return {
-          id: data.id,
-          code: data.code,
-          dependencies: data.dependencies || [],
-          timestamp: data.timestamp
-        };
+        const inflight = this.compiledInflight.get(ref.id);
+        if (inflight) {
+          const resolved = await inflight;
+          return this.cloneCompiled(resolved);
+        }
+        const fetchPromise = this.fetchCompiled(ref);
+        this.compiledInflight.set(ref.id, fetchPromise);
+        try {
+          const data = await fetchPromise;
+          this.compiledCache.set(ref.id, data);
+          return this.cloneCompiled(data);
+        } finally {
+          this.compiledInflight.delete(ref.id);
+        }
+      }
+      async getCompiled(ref, options) {
+        if (options?.signal) {
+          const inline = this.inlineModules.get(ref.id);
+          if (inline) {
+            return this.cloneCompiled(inline);
+          }
+          const cached = this.compiledCache.get(ref.id);
+          if (cached) {
+            return this.cloneCompiled(cached);
+          }
+          const data = await this.fetchCompiled(ref, options);
+          this.compiledCache.set(ref.id, data);
+          return this.cloneCompiled(data);
+        }
+        return this.getCompiledInternal(ref);
       }
       /**
        * Clear compilation cache
        */
       clearCache() {
         this.cache.clear();
+        this.compiledCache.clear();
+        this.compiledInflight.clear();
       }
       registerInlineModule(compiled) {
         this.inlineModules.set(compiled.id, {
@@ -158,6 +179,27 @@ var init_mdx_client = __esm({
           cached: data.cached || false
         };
       }
+      async fetchCompiled(ref, options) {
+        const response = await fetch(`${this.compileEndpoint}?id=${ref.id}`, {
+          signal: options?.signal
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to get compiled MDX: ${response.statusText}`);
+        }
+        const data = await response.json();
+        return {
+          id: data.id,
+          code: data.code,
+          dependencies: data.dependencies || [],
+          timestamp: data.timestamp
+        };
+      }
+      cloneCompiled(compiled) {
+        return {
+          ...compiled,
+          dependencies: Array.isArray(compiled.dependencies) ? [...compiled.dependencies] : []
+        };
+      }
     };
     MDXComponentFactory = class {
       constructor(mdxClient) {
@@ -344,11 +386,118 @@ var init_mdx_client = __esm({
 
 // src/components/index.ts
 import { createTrustedHTML, sanitizeHTML } from "@stream-mdx/core";
+
+// src/mdx-hydration-metrics.ts
+var entries = /* @__PURE__ */ new Map();
+var lastHydrationMs = null;
+function now() {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
+  }
+  return Date.now();
+}
+function markMdxHydrationStart(id) {
+  if (!id) return;
+  const entry = entries.get(id) ?? { status: "compiled" };
+  if (entry.startedAt === void 0) {
+    entry.startedAt = now();
+  }
+  entry.status = "compiled";
+  entries.set(id, entry);
+}
+function markMdxHydrated(id) {
+  if (!id) return;
+  const entry = entries.get(id) ?? { status: "hydrated" };
+  if (entry.startedAt === void 0) {
+    entry.startedAt = now();
+  }
+  entry.hydratedAt = now();
+  entry.status = "hydrated";
+  entries.set(id, entry);
+  lastHydrationMs = entry.startedAt ? entry.hydratedAt - entry.startedAt : null;
+}
+function markMdxHydrationError(id) {
+  if (!id) return;
+  const entry = entries.get(id) ?? { status: "error" };
+  entry.status = "error";
+  entries.set(id, entry);
+}
+
+// src/mdx-hydration-context.ts
+import React from "react";
+var MdxHydrationContext = React.createContext({ controller: null });
+
+// src/mdx-runtime.ts
+var mdxRuntimePromise = null;
+function loadMdxRuntime() {
+  if (!mdxRuntimePromise) {
+    mdxRuntimePromise = Promise.resolve().then(() => (init_mdx_client(), mdx_client_exports));
+  }
+  return mdxRuntimePromise;
+}
+
+// src/renderer/use-deferred-render.ts
+import { useEffect, useState } from "react";
+function useDeferredRender(ref, options) {
+  const enabled = options?.enabled ?? true;
+  const [shouldRender, setShouldRender] = useState(!enabled);
+  useEffect(() => {
+    if (!enabled) {
+      setShouldRender(true);
+      return;
+    }
+    const target = ref.current;
+    if (!target) {
+      return;
+    }
+    let cancelled = false;
+    let idleId = null;
+    let timerId = null;
+    const scheduleRender = () => {
+      if (cancelled) return;
+      setShouldRender(true);
+    };
+    const runWithIdle = () => {
+      if (typeof globalThis.requestIdleCallback === "function") {
+        idleId = globalThis.requestIdleCallback(scheduleRender, { timeout: options?.idleTimeoutMs ?? 200 });
+      } else {
+        timerId = window.setTimeout(scheduleRender, options?.idleTimeoutMs ?? 200);
+      }
+    };
+    const observer = new IntersectionObserver(
+      (entries2) => {
+        for (const entry of entries2) {
+          if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            observer.disconnect();
+            const debounceMs = options?.debounceMs ?? 80;
+            timerId = window.setTimeout(runWithIdle, debounceMs);
+            return;
+          }
+        }
+      },
+      { rootMargin: options?.rootMargin ?? "200px 0px" }
+    );
+    observer.observe(target);
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+      if (idleId !== null && typeof globalThis.cancelIdleCallback === "function") {
+        globalThis.cancelIdleCallback(idleId);
+      }
+      if (timerId !== null) {
+        window.clearTimeout(timerId);
+      }
+    };
+  }, [enabled, options?.debounceMs, options?.idleTimeoutMs, options?.rootMargin, ref]);
+  return shouldRender;
+}
+
+// src/components/index.ts
 import { removeHeadingMarkers } from "@stream-mdx/core";
-import React3 from "react";
+import React4 from "react";
 
 // src/utils/inline-html.ts
-import React from "react";
+import React3 from "react";
 var BACKTICK_CONTENT = /^`([\s\S]+)`$/;
 var DEFAULT_INLINE_HTML_RENDERERS = {
   kbd: (descriptor, ctx) => {
@@ -360,7 +509,7 @@ var DEFAULT_INLINE_HTML_RENDERERS = {
       if (ctx.key !== void 0 && ctx.key !== null) {
         props.key = ctx.key;
       }
-      return React.createElement("kbd", props, React.createElement("code", { className: "inline-code" }, codeText));
+      return React3.createElement("kbd", props, React3.createElement("code", { className: "inline-code" }, codeText));
     }
     return ctx.defaultRender();
   }
@@ -378,9 +527,9 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
         return null;
       }
       if (options.key !== void 0 && options.key !== null) {
-        return React.createElement(React.Fragment, { key: options.key }, descriptor.text);
+        return React3.createElement(React3.Fragment, { key: options.key }, descriptor.text);
       }
-      return React.createElement(React.Fragment, {}, descriptor.text);
+      return React3.createElement(React3.Fragment, {}, descriptor.text);
     }
     if (isInlineTag) {
       const parsedElement = renderSanitizedHtmlTree(descriptor.sanitized, options.key);
@@ -395,15 +544,15 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
     if (options.key !== void 0 && options.key !== null) {
       props.key = options.key;
     }
-    return React.createElement("span", props);
+    return React3.createElement("span", props);
   };
   const allRenderers = options.renderers ? { ...DEFAULT_INLINE_HTML_RENDERERS, ...options.renderers } : DEFAULT_INLINE_HTML_RENDERERS;
   const renderer = allRenderers[descriptor.tagName];
   if (renderer) {
     const rendered = renderer(descriptor, { key: options.key, defaultRender });
     if (rendered) {
-      if (options.key !== void 0 && options.key !== null && React.isValidElement(rendered) && rendered.key === null) {
-        return React.cloneElement(rendered, { key: options.key });
+      if (options.key !== void 0 && options.key !== null && React3.isValidElement(rendered) && rendered.key === null) {
+        return React3.cloneElement(rendered, { key: options.key });
       }
       return rendered;
     }
@@ -515,21 +664,21 @@ function renderSanitizedHtmlTree(html, key) {
     }
     if (children.length === 1) {
       const [child] = children;
-      if (React.isValidElement(child)) {
+      if (React3.isValidElement(child)) {
         if (key !== void 0 && key !== null) {
-          return React.cloneElement(child, { key });
+          return React3.cloneElement(child, { key });
         }
         return child;
       }
       if (typeof child === "string" || typeof child === "number") {
         if (key !== void 0 && key !== null) {
-          return React.createElement(React.Fragment, { key }, child);
+          return React3.createElement(React3.Fragment, { key }, child);
         }
-        return React.createElement(React.Fragment, {}, child);
+        return React3.createElement(React3.Fragment, {}, child);
       }
-      return React.createElement(React.Fragment, { key }, child);
+      return React3.createElement(React3.Fragment, { key }, child);
     }
-    return React.createElement(React.Fragment, { key }, ...children);
+    return React3.createElement(React3.Fragment, { key }, ...children);
   } catch {
     return null;
   }
@@ -554,9 +703,9 @@ function convertDomNode(node, key) {
     }
   });
   if (children.length === 0) {
-    return React.createElement(tagName, props);
+    return React3.createElement(tagName, props);
   }
-  return React.createElement(tagName, props, ...children);
+  return React3.createElement(tagName, props, ...children);
 }
 function getElementAttributes(element) {
   const attrs = {};
@@ -616,7 +765,97 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
   "mtd"
 ]);
 
+// src/components/link-safety-modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DefaultLinkSafetyModal = ({ url, isOpen, isChecking, onClose, onConfirm, onCopy }) => {
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "stream-mdx-link-modal-backdrop",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Link safety confirmation",
+      style: {
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "rgba(0, 0, 0, 0.4)",
+        zIndex: 9999,
+        padding: "24px"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "stream-mdx-link-modal",
+          style: {
+            width: "min(520px, 100%)",
+            borderRadius: 12,
+            background: "var(--background, #fff)",
+            color: "var(--foreground, #111)",
+            border: "1px solid var(--border, rgba(0, 0, 0, 0.1))",
+            boxShadow: "0 20px 60px rgba(0, 0, 0, 0.25)",
+            padding: 20
+          },
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 8 }, children: "Open external link?" }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 13, opacity: 0.8, wordBreak: "break-all", marginBottom: 16 }, children: url }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onCopy, disabled: isChecking, style: buttonStyle, children: "Copy link" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onConfirm, disabled: isChecking, style: primaryButtonStyle, children: "Open link" }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, style: buttonStyle, children: "Cancel" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+var buttonStyle = {
+  borderRadius: 8,
+  border: "1px solid var(--border, rgba(0, 0, 0, 0.1))",
+  padding: "6px 12px",
+  background: "var(--background, #fff)",
+  color: "inherit",
+  fontSize: 13
+};
+var primaryButtonStyle = {
+  ...buttonStyle,
+  background: "var(--foreground, #111)",
+  color: "var(--background, #fff)",
+  borderColor: "var(--foreground, #111)"
+};
+
 // src/components/index.ts
+var MdxRuntimeBoundary = class extends React4.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.resetKey !== this.props.resetKey && this.state.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+};
 function renderInlineNodes(nodes, components) {
   return nodes.map((node, index) => {
     const key = `${node.kind}-${index}`;
@@ -624,31 +863,31 @@ function renderInlineNodes(nodes, components) {
       case "text": {
         const textComponent = components.text;
         if (textComponent && textComponent !== defaultInlineComponents.text) {
-          return React3.createElement(textComponent, { key, text: node.text });
+          return React4.createElement(textComponent, { key, text: node.text });
         }
-        return React3.createElement(React3.Fragment, { key, children: node.text });
+        return React4.createElement(React4.Fragment, { key, children: node.text });
       }
       case "strong":
-        return React3.createElement(components.strong, {
+        return React4.createElement(components.strong, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "em":
-        return React3.createElement(components.em, {
+        return React4.createElement(components.em, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "strike": {
-        const StrikeComponent = components.strike ?? ((props) => React3.createElement("del", {}, props.children));
-        return React3.createElement(StrikeComponent, {
+        const StrikeComponent = components.strike ?? ((props) => React4.createElement("del", {}, props.children));
+        return React4.createElement(StrikeComponent, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       }
       case "code":
-        return React3.createElement(components.code, { key, text: node.text });
+        return React4.createElement(components.code, { key, text: node.text });
       case "link":
-        return React3.createElement(
+        return React4.createElement(
           components.link,
           {
             key,
@@ -658,18 +897,18 @@ function renderInlineNodes(nodes, components) {
           }
         );
       case "image":
-        return React3.createElement(components.image, {
+        return React4.createElement(components.image, {
           key,
           src: node.src,
           alt: node.alt,
           title: node.title
         });
       case "br":
-        return React3.createElement(React3.Fragment, { key }, React3.createElement(components.br, {}));
+        return React4.createElement(React4.Fragment, { key }, React4.createElement(components.br, {}));
       default: {
         const component = components[node.kind];
         if (component) {
-          return React3.createElement(component, { key, ...node });
+          return React4.createElement(component, { key, ...node });
         }
         return null;
       }
@@ -677,18 +916,18 @@ function renderInlineNodes(nodes, components) {
   });
 }
 var defaultInlineComponents = {
-  text: ({ text }) => React3.createElement(React3.Fragment, {}, text),
-  strong: ({ children }) => React3.createElement("strong", {}, children),
-  em: ({ children }) => React3.createElement("em", {}, children),
-  strike: ({ children }) => React3.createElement("del", {}, children),
-  code: ({ text }) => React3.createElement(
+  text: ({ text }) => React4.createElement(React4.Fragment, {}, text),
+  strong: ({ children }) => React4.createElement("strong", {}, children),
+  em: ({ children }) => React4.createElement("em", {}, children),
+  strike: ({ children }) => React4.createElement("del", {}, children),
+  code: ({ text }) => React4.createElement(
     "code",
     {
       className: "inline-code"
     },
     text
   ),
-  link: ({ href, title, children }) => React3.createElement(
+  link: ({ href, title, children }) => React4.createElement(
     "a",
     {
       href,
@@ -699,15 +938,15 @@ var defaultInlineComponents = {
     },
     children
   ),
-  image: ({ src, alt, title }) => React3.createElement("img", {
+  image: ({ src, alt, title }) => React4.createElement("img", {
     src,
     alt,
     title,
     className: "markdown-image"
   }),
-  br: () => React3.createElement("br"),
+  br: () => React4.createElement("br"),
   // Custom extensible components
-  mention: ({ handle }) => React3.createElement(
+  mention: ({ handle }) => React4.createElement(
     "span",
     {
       className: "mention",
@@ -715,7 +954,7 @@ var defaultInlineComponents = {
     },
     `@${handle}`
   ),
-  citation: ({ id }) => React3.createElement(
+  citation: ({ id }) => React4.createElement(
     "span",
     {
       className: "citation",
@@ -723,7 +962,7 @@ var defaultInlineComponents = {
     },
     `[${id}]`
   ),
-  "math-inline": ({ tex }) => React3.createElement(
+  "math-inline": ({ tex }) => React4.createElement(
     "span",
     {
       className: "math-inline",
@@ -731,27 +970,27 @@ var defaultInlineComponents = {
     },
     `$${tex}$`
   ),
-  "math-display": ({ tex }) => React3.createElement(
+  "math-display": ({ tex }) => React4.createElement(
     "div",
     {
       className: "math-display markdown-math-display",
       "data-tex": tex,
       style: { overflowX: "auto" }
     },
-    React3.createElement("span", { className: "math-display-content" }, `$$${tex}$$`)
+    React4.createElement("span", { className: "math-display-content" }, `$$${tex}$$`)
   ),
   // Footnote inline reference (superscript anchor)
   "footnote-ref": ({ label, number }) => {
     const n = number ?? "?";
     const href = number ? `#fn:${n}` : void 0;
     const id = number ? `fnref:${n}` : void 0;
-    return React3.createElement("sup", { className: "footnote-ref" }, React3.createElement("a", { href, id, "data-label": label }, String(n)));
+    return React4.createElement("sup", { className: "footnote-ref" }, React4.createElement("a", { href, id, "data-label": label }, String(n)));
   }
 };
 var defaultBlockComponents = {
   paragraph: ({ inlines, raw, meta, children }) => {
     if (children !== void 0) {
-      return React3.createElement(
+      return React4.createElement(
         "p",
         {
           className: "markdown-paragraph"
@@ -765,7 +1004,7 @@ var defaultBlockComponents = {
       if (structured.length === 1) {
         return structured[0];
       }
-      return React3.createElement(React3.Fragment, {}, ...structured);
+      return React4.createElement(React4.Fragment, {}, ...structured);
     }
     const filteredInlines = inlines && raw && inlines.length > 0 ? inlines.filter((node) => !(node.kind === "text" && node.text === raw)) : inlines ?? [];
     const effectiveInlines = filteredInlines.length > 0 ? filteredInlines : raw ? [
@@ -774,7 +1013,7 @@ var defaultBlockComponents = {
         text: raw
       }
     ] : [];
-    return React3.createElement(
+    return React4.createElement(
       "p",
       {
         className: "markdown-paragraph"
@@ -786,7 +1025,7 @@ var defaultBlockComponents = {
     const tag = `h${level}`;
     const onlyPlainText = Array.isArray(inlines) && inlines.length > 0 && inlines.every((node) => node.kind === "text");
     const children = onlyPlainText ? inlines.map((node) => node.kind === "text" ? node.text : "").join("") : renderInlineNodes(inlines, defaultInlineComponents);
-    return React3.createElement(
+    return React4.createElement(
       tag,
       {
         className: `markdown-heading markdown-h${level}`,
@@ -798,7 +1037,7 @@ var defaultBlockComponents = {
   code: ({ html, meta, lines, lang, preAttrs, codeAttrs }) => {
     const language = typeof lang === "string" ? lang : typeof meta?.lang === "string" ? String(meta.lang) : "text";
     if (html) {
-      return React3.createElement("div", {
+      return React4.createElement("div", {
         className: `markdown-code-block language-${language || "text"}`,
         /* biome-ignore lint/security/noDangerouslySetInnerHtml: highlighted HTML is generated by our sanitizer */
         dangerouslySetInnerHTML: { __html: html }
@@ -808,20 +1047,20 @@ var defaultBlockComponents = {
     if (lines && lines.length > 0) {
       const preAttributes = attrsToProps(preAttrs);
       const codeAttributes = attrsToProps(codeAttrs);
-      return React3.createElement(
+      return React4.createElement(
         "pre",
         {
           ...preAttributes,
           className: preAttributes.className ? `${preAttributes.className} markdown-code-block language-${language || "text"}` : `markdown-code-block language-${language || "text"}`
         },
-        React3.createElement(
+        React4.createElement(
           "code",
           {
             ...codeAttributes,
             className: codeAttributes.className ? `${codeAttributes.className} language-${language || "text"}` : `language-${language || "text"}`
           },
           lines.map(
-            (line) => React3.createElement("span", {
+            (line) => React4.createElement("span", {
               key: line.id,
               className: "line",
               /* biome-ignore lint/security/noDangerouslySetInnerHtml: line HTML is sanitized server-side */
@@ -831,34 +1070,44 @@ var defaultBlockComponents = {
         )
       );
     }
-    return React3.createElement("pre", {
+    return React4.createElement("pre", {
       className: `markdown-code-block language-${language || "text"}`,
       children: code
     });
   },
-  blockquote: ({ inlines, renderedContent }) => React3.createElement(
+  blockquote: ({ inlines, renderedContent }) => React4.createElement(
     "blockquote",
     {
       className: "markdown-blockquote"
     },
     renderedContent ?? renderInlineNodes(inlines, defaultInlineComponents)
   ),
+  hr: (props) => React4.createElement("hr", props),
   list: ({ ordered, items }) => {
+    if (items.length === 0) {
+      return null;
+    }
     const tag = ordered ? "ol" : "ul";
+    const listStyle = ordered ? {
+      ["--list-indent"]: `calc(2.5rem + ${String(items.length).length}ch)`
+    } : void 0;
     const listItems = items.map(
-      (item, index) => React3.createElement(
+      (item, index) => React4.createElement(
         "li",
         {
           key: index,
-          className: "markdown-list-item"
+          className: "markdown-list-item",
+          "data-counter-text": ordered ? `${index + 1}.` : void 0,
+          "data-list-depth": 0
         },
         renderInlineNodes(item, defaultInlineComponents)
       )
     );
-    return React3.createElement(
+    return React4.createElement(
       tag,
       {
-        className: `markdown-list ${ordered ? "ordered" : "unordered"}`
+        className: `markdown-list ${ordered ? "ordered" : "unordered"}`,
+        style: listStyle
       },
       listItems
     );
@@ -868,29 +1117,62 @@ var defaultBlockComponents = {
     const htmlString = sanitizeHTML(raw);
     if (typeof window !== "undefined" && elements) {
       const content = mapHtmlToReact(htmlString, elements);
-      return React3.createElement("div", { className: "markdown-html" }, content);
+      return React4.createElement("div", { className: "markdown-html" }, content);
     }
-    return React3.createElement("div", {
+    return React4.createElement("div", {
       className: "markdown-html",
       /* biome-ignore lint/security/noDangerouslySetInnerHtml: htmlString is sanitized before injection */
       dangerouslySetInnerHTML: { __html: htmlString }
     });
   },
-  mdx: ({ compiledRef, compiledModule, status, errorMessage }) => {
-    const [Comp, setComp] = React3.useState(null);
-    const [internalError, setInternalError] = React3.useState(null);
+  mdx: ({ compiledRef, compiledModule, status, errorMessage, raw }) => {
+    const [Comp, setComp] = React4.useState(null);
+    const [internalError, setInternalError] = React4.useState(null);
+    const [renderError, setRenderError] = React4.useState(null);
+    const [retryKey, setRetryKey] = React4.useState(0);
+    const hydrationContext = React4.useContext(MdxHydrationContext);
+    const hydrationController = hydrationContext?.controller ?? null;
+    const hydrationOptions = hydrationContext?.options;
+    const containerRef = React4.useRef(null);
+    const deferHydration = hydrationOptions?.strategy === "visible";
+    const shouldHydrate = useDeferredRender(
+      containerRef,
+      deferHydration ? {
+        enabled: true,
+        rootMargin: hydrationOptions?.rootMargin,
+        idleTimeoutMs: hydrationOptions?.idleTimeoutMs,
+        debounceMs: hydrationOptions?.debounceMs
+      } : { enabled: false }
+    );
     const resolvedId = compiledModule?.id ?? (compiledRef?.id && compiledRef.id !== "pending" ? compiledRef.id : void 0);
+    const handleRetry = React4.useCallback(() => {
+      setInternalError(null);
+      setRenderError(null);
+      setComp(null);
+      setRetryKey((prev) => prev + 1);
+    }, []);
+    const handleRuntimeError = React4.useCallback(
+      (error) => {
+        const message2 = error instanceof Error ? error.message : String(error);
+        setRenderError(message2);
+        markMdxHydrationError(resolvedId ?? compiledRef?.id);
+      },
+      [resolvedId, compiledRef?.id]
+    );
     const effectiveStatus = status ? status : resolvedId ? "compiled" : "pending";
-    const failureMessage = errorMessage ?? internalError ?? null;
+    const failureMessage = errorMessage ?? internalError ?? renderError ?? null;
     const moduleDependencies = compiledModule?.dependencies;
-    React3.useEffect(() => {
+    React4.useEffect(() => {
+      if (!shouldHydrate) {
+        return;
+      }
       if (status === "error") {
-        setComp(null);
-        setInternalError(null);
+        markMdxHydrationError(resolvedId ?? compiledRef?.id);
         return;
       }
       let cancelled = false;
       async function ensure() {
+        let permit = null;
         try {
           if (status === "error" || !resolvedId || resolvedId === "pending") {
             if (!cancelled) {
@@ -899,7 +1181,17 @@ var defaultBlockComponents = {
             }
             return;
           }
-          const { getMDXComponentFactory: getMDXComponentFactory2, registerInlineMdxModule: registerInlineMdxModule2 } = await Promise.resolve().then(() => (init_mdx_client(), mdx_client_exports));
+          if (hydrationController) {
+            permit = await hydrationController.acquire();
+            if (cancelled) {
+              permit.release();
+              return;
+            }
+          }
+          setInternalError(null);
+          setRenderError(null);
+          markMdxHydrationStart(resolvedId);
+          const { getMDXComponentFactory: getMDXComponentFactory2, registerInlineMdxModule: registerInlineMdxModule2 } = await loadMdxRuntime();
           if (compiledModule?.code) {
             registerInlineMdxModule2({
               id: compiledModule.id,
@@ -912,41 +1204,82 @@ var defaultBlockComponents = {
           if (!cancelled) {
             setComp(() => C);
             setInternalError(null);
+            markMdxHydrated(resolvedId);
           }
         } catch (error) {
           if (!cancelled) {
-            const message = error instanceof Error ? error.message : String(error);
-            setComp(null);
-            setInternalError(message);
+            const message2 = error instanceof Error ? error.message : String(error);
+            setInternalError(message2);
+            markMdxHydrationError(resolvedId);
           }
+        } finally {
+          permit?.release();
         }
       }
       ensure();
       return () => {
         cancelled = true;
       };
-    }, [compiledModule?.id, compiledModule?.code, moduleDependencies, resolvedId, status]);
+    }, [compiledModule?.id, compiledModule?.code, moduleDependencies, resolvedId, status, shouldHydrate, retryKey]);
     const compileMode = compiledModule?.source === "worker" || compiledRef?.id?.startsWith("worker:") ? "worker" : "server";
-    if (effectiveStatus === "error" || failureMessage) {
-      const message = failureMessage ?? (compileMode === "worker" ? "MDX compilation failed in client mode. Try switching back to server rendering or restarting the stream." : "MDX compilation failed. Try restarting the stream.");
-      return React3.createElement(
+    const pendingId = resolvedId && resolvedId !== "pending" ? resolvedId : compiledRef?.id ?? "pending";
+    const waitingForVisibility = deferHydration && !shouldHydrate && Boolean(resolvedId);
+    const pendingLabel = waitingForVisibility ? "MDX ready (hydrate on view)\u2026" : compileMode === "worker" ? "Compiling MDX (client)\u2026" : "Compiling MDX (server)\u2026";
+    const message = failureMessage ?? (compileMode === "worker" ? "MDX compilation failed in client mode. Try switching back to server rendering or restarting the stream." : "MDX compilation failed. Try restarting the stream.");
+    const rawFallback = typeof raw === "string" && raw.trim().length > 0 ? React4.createElement("pre", { className: "markdown-mdx-fallback" }, raw) : null;
+    const allowRetry = Boolean(internalError || renderError);
+    const retryButton = allowRetry ? React4.createElement(
+      "button",
+      {
+        type: "button",
+        className: "markdown-mdx-retry",
+        onClick: handleRetry
+      },
+      "Retry hydration"
+    ) : null;
+    const errorPanel = React4.createElement(
+      "div",
+      { className: "markdown-mdx-error" },
+      React4.createElement(React4.Fragment, null, React4.createElement("strong", null, "MDX failed"), React4.createElement("div", null, message))
+    );
+    if (Comp && !failureMessage) {
+      return React4.createElement(
+        "div",
+        {
+          className: "markdown-mdx",
+          ref: containerRef,
+          "data-mdx-ref": resolvedId ?? compiledRef?.id ?? "compiled",
+          "data-mdx-status": failureMessage ? "error" : "compiled",
+          "data-mdx-mode": compileMode
+        },
+        React4.createElement(
+          MdxRuntimeBoundary,
+          { resetKey: retryKey, onError: handleRuntimeError },
+          React4.createElement(Comp, {})
+        )
+      );
+    }
+    if (failureMessage) {
+      return React4.createElement(
         "div",
         {
-          className: "markdown-mdx error",
-          "data-mdx-ref": resolvedId ?? compiledRef?.id ?? "error",
+          className: "markdown-mdx",
+          ref: containerRef,
+          "data-mdx-ref": pendingId,
           "data-mdx-status": "error",
           "data-mdx-mode": compileMode
         },
-        React3.createElement(React3.Fragment, null, React3.createElement("strong", null, "MDX failed"), React3.createElement("div", null, message))
+        errorPanel,
+        rawFallback,
+        retryButton
       );
     }
     if (!Comp) {
-      const pendingId = resolvedId && resolvedId !== "pending" ? resolvedId : compiledRef?.id ?? "pending";
-      const pendingLabel = compileMode === "worker" ? "Compiling MDX (client)\u2026" : "Compiling MDX (server)\u2026";
-      return React3.createElement(
+      return React4.createElement(
         "div",
         {
           className: "markdown-mdx",
+          ref: containerRef,
           "data-mdx-ref": pendingId,
           "data-mdx-status": "pending",
           "data-mdx-mode": compileMode
@@ -954,41 +1287,31 @@ var defaultBlockComponents = {
         pendingLabel
       );
     }
-    return React3.createElement(
-      "div",
-      {
-        className: "markdown-mdx",
-        "data-mdx-ref": resolvedId ?? compiledRef?.id ?? "compiled",
-        "data-mdx-status": "compiled",
-        "data-mdx-mode": compileMode
-      },
-      React3.createElement(Comp, {})
-    );
   },
   // Footnotes block rendered at page end
   footnotes: ({ items }) => {
-    if (!items || items.length === 0) return React3.createElement(React3.Fragment, null);
+    if (!items || items.length === 0) return React4.createElement(React4.Fragment, null);
     const listItems = items.map(
-      (item) => React3.createElement(
+      (item) => React4.createElement(
         "li",
         { key: item.number, id: `fn:${item.number}` },
         renderInlineNodes(item.inlines, defaultInlineComponents),
         " ",
-        React3.createElement("a", { href: `#fnref:${item.number}`, className: "footnote-backref", "aria-label": "Back to content" }, "\u21A9")
+        React4.createElement("a", { href: `#fnref:${item.number}`, className: "footnote-backref", "aria-label": "Back to content" }, "\u21A9")
       )
     );
-    return React3.createElement("section", { className: "footnotes" }, React3.createElement("hr", {}), React3.createElement("ol", {}, listItems));
+    return React4.createElement("section", { className: "footnotes" }, React4.createElement("hr", {}), React4.createElement("ol", {}, listItems));
   },
   // Footnote definition placeholders (render nothing)
-  "footnote-def": () => React3.createElement(React3.Fragment, null),
+  "footnote-def": () => React4.createElement(React4.Fragment, null),
   // Callouts block
   callout: ({ kind, inlines = [] }) => {
     const tone = (kind || "NOTE").toUpperCase();
     const title = tone.charAt(0) + tone.slice(1).toLowerCase();
-    return React3.createElement(
+    return React4.createElement(
       "div",
       { className: `markdown-callout markdown-callout-${tone.toLowerCase()} border rounded p-3 my-3` },
-      React3.createElement("div", { className: "font-semibold mb-1" }, title),
+      React4.createElement("div", { className: "font-semibold mb-1" }, title),
       inlines.length > 0 ? renderInlineNodes(inlines, defaultInlineComponents) : null
     );
   },
@@ -1003,7 +1326,7 @@ var defaultBlockComponents = {
     const renderCells = (cells, tag, rowIdx) => cells.map((cell, i) => {
       const columnAlign = align?.[i] ?? void 0;
       const cellStyle = columnAlign ? { textAlign: columnAlign } : void 0;
-      return React3.createElement(
+      return React4.createElement(
         tag === "th" ? El.Th : El.Td,
         {
           key: `${rowIdx}-${i}`,
@@ -1014,14 +1337,14 @@ var defaultBlockComponents = {
         renderInlineNodes(cell, defaultInlineComponents)
       );
     });
-    return React3.createElement(
+    return React4.createElement(
       El.Table,
       { className: "markdown-table" },
-      header && header.length > 0 ? React3.createElement(El.Thead, {}, React3.createElement(El.Tr, {}, renderCells(header, "th", -1))) : null,
-      React3.createElement(
+      header && header.length > 0 ? React4.createElement(El.Thead, {}, React4.createElement(El.Tr, {}, renderCells(header, "th", -1))) : null,
+      React4.createElement(
         El.Tbody,
         {},
-        rows.map((row, r) => React3.createElement(El.Tr, { key: r }, renderCells(row, "td", r)))
+        rows.map((row, r) => React4.createElement(El.Tr, { key: r }, renderCells(row, "td", r)))
       )
     );
   }
@@ -1090,7 +1413,7 @@ var ComponentRegistry = class {
   renderBlock(block) {
     const Component = this.getBlockComponent(block.type);
     const props = this.getBlockProps(block);
-    return React3.createElement(Component, {
+    return React4.createElement(Component, {
       key: block.id,
       ...props
     });
@@ -1125,6 +1448,14 @@ var ComponentRegistry = class {
         return {
           inlines: block.payload.inline || []
         };
+      case "hr": {
+        const range = block.payload.range;
+        return {
+          className: "markdown-hr",
+          "data-start": typeof range?.from === "number" ? range.from : void 0,
+          "data-end": typeof range?.to === "number" ? range.to : void 0
+        };
+      }
       case "code":
         return {
           html: block.payload.highlightedHtml,
@@ -1157,7 +1488,8 @@ var ComponentRegistry = class {
             compiledRef: compiledRef ?? { id: "pending" },
             compiledModule,
             status,
-            errorMessage
+            errorMessage,
+            raw: typeof block.payload.raw === "string" ? block.payload.raw : void 0
           };
         })();
       case "table": {
@@ -1208,42 +1540,42 @@ var ComponentRegistry = class {
 function getDefaultHtmlElements() {
   return {
     // Text semantics
-    p: (props) => React3.createElement("p", props),
-    strong: (props) => React3.createElement("strong", props),
-    em: (props) => React3.createElement("em", props),
-    code: (props) => React3.createElement("code", props),
-    pre: (props) => React3.createElement("pre", props),
-    span: (props) => React3.createElement("span", props),
-    br: (props) => React3.createElement("br", props),
-    hr: (props) => React3.createElement("hr", props),
+    p: (props) => React4.createElement("p", props),
+    strong: (props) => React4.createElement("strong", props),
+    em: (props) => React4.createElement("em", props),
+    code: (props) => React4.createElement("code", props),
+    pre: (props) => React4.createElement("pre", props),
+    span: (props) => React4.createElement("span", props),
+    br: (props) => React4.createElement("br", props),
+    hr: (props) => React4.createElement("hr", props),
     // Lists
-    ul: (props) => React3.createElement("ul", props),
-    ol: (props) => React3.createElement("ol", props),
-    li: (props) => React3.createElement("li", props),
+    ul: (props) => React4.createElement("ul", props),
+    ol: (props) => React4.createElement("ol", props),
+    li: (props) => React4.createElement("li", props),
     // Links & media
-    a: (props) => React3.createElement("a", props),
-    img: (props) => React3.createElement("img", props),
+    a: (props) => React4.createElement("a", props),
+    img: (props) => React4.createElement("img", props),
     // Blockquotes
-    blockquote: (props) => React3.createElement("blockquote", props),
+    blockquote: (props) => React4.createElement("blockquote", props),
     // Tables
-    table: (props) => React3.createElement("table", props),
-    thead: (props) => React3.createElement("thead", props),
-    tbody: (props) => React3.createElement("tbody", props),
-    tr: (props) => React3.createElement("tr", props),
-    th: (props) => React3.createElement("th", props),
-    td: (props) => React3.createElement("td", props),
+    table: (props) => React4.createElement("table", props),
+    thead: (props) => React4.createElement("thead", props),
+    tbody: (props) => React4.createElement("tbody", props),
+    tr: (props) => React4.createElement("tr", props),
+    th: (props) => React4.createElement("th", props),
+    td: (props) => React4.createElement("td", props),
     // Generic
-    div: (props) => React3.createElement("div", props)
+    div: (props) => React4.createElement("div", props)
   };
 }
 function getDefaultTableElements(overrides) {
   const base = {
-    Table: (props) => React3.createElement("table", props),
-    Thead: (props) => React3.createElement("thead", props),
-    Tbody: (props) => React3.createElement("tbody", props),
-    Tr: (props) => React3.createElement("tr", props),
-    Th: (props) => React3.createElement("th", props),
-    Td: (props) => React3.createElement("td", props)
+    Table: (props) => React4.createElement("table", props),
+    Thead: (props) => React4.createElement("thead", props),
+    Tbody: (props) => React4.createElement("tbody", props),
+    Tr: (props) => React4.createElement("tr", props),
+    Th: (props) => React4.createElement("th", props),
+    Td: (props) => React4.createElement("td", props)
   };
   return { ...base, ...overrides || {} };
 }
@@ -1257,12 +1589,12 @@ function mapHtmlToReact(html, elements) {
       children.push(element);
     }
   });
-  return React3.createElement(React3.Fragment, {}, ...children);
+  return React4.createElement(React4.Fragment, {}, ...children);
 }
 function toReact(node, elements, key) {
   if (node.nodeType === Node.TEXT_NODE) {
     const text = node.textContent ?? "";
-    return React3.createElement(React3.Fragment, { key }, text);
+    return React4.createElement(React4.Fragment, { key }, text);
   }
   if (node.nodeType !== Node.ELEMENT_NODE) {
     return null;
@@ -1284,9 +1616,9 @@ function toReact(node, elements, key) {
   const component = elements[tag];
   const elementChildren = children.length > 0 ? children : void 0;
   if (component) {
-    return React3.createElement(component, { ...props, key }, elementChildren);
+    return React4.createElement(component, { ...props, key }, elementChildren);
   }
-  return React3.createElement(tag, { ...props, key }, elementChildren);
+  return React4.createElement(tag, { ...props, key }, elementChildren);
 }
 function attrsToProps(attrs) {
   if (!attrs) return {};
@@ -1331,12 +1663,12 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     nodes.forEach((node, idx) => {
       if (node === null || node === void 0) return;
       const key = `${baseKey}-${idx}`;
-      if (React3.isValidElement(node)) {
-        target.push(node.key === key ? node : React3.cloneElement(node, { key }));
+      if (React4.isValidElement(node)) {
+        target.push(node.key === key ? node : React4.cloneElement(node, { key }));
       } else if (typeof node === "string" || typeof node === "number") {
-        target.push(React3.createElement(React3.Fragment, { key }, node));
+        target.push(React4.createElement(React4.Fragment, { key }, node));
       } else {
-        target.push(React3.createElement(React3.Fragment, { key }, node));
+        target.push(React4.createElement(React4.Fragment, { key }, node));
       }
     });
   };
@@ -1352,7 +1684,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     }
     const key = `paragraph-inline-group-${inlineGroupIndex++}`;
     result.push(
-      React3.createElement(
+      React4.createElement(
         "p",
         {
           key,
@@ -1370,7 +1702,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const inlineNodes = Array.isArray(segment.inline) ? segment.inline : [];
         if (inlineNodes.length === 0) {
           if (segment.value) {
-            inlineBuffer.push(React3.createElement(React3.Fragment, { key }, segment.value));
+            inlineBuffer.push(React4.createElement(React4.Fragment, { key }, segment.value));
           }
           break;
         }
@@ -1398,14 +1730,14 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const status = segment.status ?? "pending";
         let element;
         if (status === "compiled") {
-          element = React3.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
+          element = React4.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
         } else if (status === "error") {
           const message = segment.value || "MDX error";
-          element = React3.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
+          element = React4.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
         } else {
-          element = React3.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
+          element = React4.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
         }
-        inlineBuffer.push(React3.createElement(React3.Fragment, { key }, element));
+        inlineBuffer.push(React4.createElement(React4.Fragment, { key }, element));
         break;
       }
       case "html": {
@@ -1421,7 +1753,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
             result.push(element);
           } else if (html) {
             result.push(
-              React3.createElement("div", {
+              React4.createElement("div", {
                 key,
                 className: "markdown-inline-html-block",
                 dangerouslySetInnerHTML: { __html: html }
@@ -1440,7 +1772,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
   flushInline();
   if (result.length === 0) {
     return [
-      React3.createElement(
+      React4.createElement(
         "p",
         {
           key: "paragraph-inline-group-0",
@@ -1499,6 +1831,7 @@ var BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
 ]);
 export {
   ComponentRegistry,
+  DefaultLinkSafetyModal,
   defaultBlockComponents,
   defaultInlineComponents,
   mapHtmlToReact,