@stream-mdx/react 0.1.1 → 0.3.0

package/dist/renderer/node-views.cjs

@@ -34,16 +34,74 @@ __export(node_views_exports, {
   BlockNodeRenderer: () => BlockNodeRenderer
 });
 module.exports = __toCommonJS(node_views_exports);
-var import_core3 = require("@stream-mdx/core");
-var import_react5 = __toESM(require("react"), 1);
+var import_core4 = require("@stream-mdx/core");
+var import_react8 = __toESM(require("react"), 1);
 
 // src/components/index.ts
 var import_core = require("@stream-mdx/core");
+
+// src/renderer/use-deferred-render.ts
+var import_react = require("react");
+function useDeferredRender(ref, options) {
+  const enabled = options?.enabled ?? true;
+  const [shouldRender, setShouldRender] = (0, import_react.useState)(!enabled);
+  (0, import_react.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(
+      (entries) => {
+        for (const entry of entries) {
+          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
 var import_core2 = require("@stream-mdx/core");
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // src/utils/inline-html.ts
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var BACKTICK_CONTENT = /^`([\s\S]+)`$/;
 var DEFAULT_INLINE_HTML_RENDERERS = {
   kbd: (descriptor, ctx) => {
@@ -55,7 +113,7 @@ var DEFAULT_INLINE_HTML_RENDERERS = {
       if (ctx.key !== void 0 && ctx.key !== null) {
         props.key = ctx.key;
       }
-      return import_react.default.createElement("kbd", props, import_react.default.createElement("code", { className: "inline-code" }, codeText));
+      return import_react2.default.createElement("kbd", props, import_react2.default.createElement("code", { className: "inline-code" }, codeText));
     }
     return ctx.defaultRender();
   }
@@ -73,9 +131,9 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
         return null;
       }
       if (options.key !== void 0 && options.key !== null) {
-        return import_react.default.createElement(import_react.default.Fragment, { key: options.key }, descriptor.text);
+        return import_react2.default.createElement(import_react2.default.Fragment, { key: options.key }, descriptor.text);
       }
-      return import_react.default.createElement(import_react.default.Fragment, {}, descriptor.text);
+      return import_react2.default.createElement(import_react2.default.Fragment, {}, descriptor.text);
     }
     if (isInlineTag) {
       const parsedElement = renderSanitizedHtmlTree(descriptor.sanitized, options.key);
@@ -90,15 +148,15 @@ function renderInlineHtmlSegment(raw, sanitized, options = {}) {
     if (options.key !== void 0 && options.key !== null) {
       props.key = options.key;
     }
-    return import_react.default.createElement("span", props);
+    return import_react2.default.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 && import_react.default.isValidElement(rendered) && rendered.key === null) {
-        return import_react.default.cloneElement(rendered, { key: options.key });
+      if (options.key !== void 0 && options.key !== null && import_react2.default.isValidElement(rendered) && rendered.key === null) {
+        return import_react2.default.cloneElement(rendered, { key: options.key });
       }
       return rendered;
     }
@@ -210,21 +268,21 @@ function renderSanitizedHtmlTree(html, key) {
     }
     if (children.length === 1) {
       const [child] = children;
-      if (import_react.default.isValidElement(child)) {
+      if (import_react2.default.isValidElement(child)) {
         if (key !== void 0 && key !== null) {
-          return import_react.default.cloneElement(child, { key });
+          return import_react2.default.cloneElement(child, { key });
         }
         return child;
       }
       if (typeof child === "string" || typeof child === "number") {
         if (key !== void 0 && key !== null) {
-          return import_react.default.createElement(import_react.default.Fragment, { key }, child);
+          return import_react2.default.createElement(import_react2.default.Fragment, { key }, child);
         }
-        return import_react.default.createElement(import_react.default.Fragment, {}, child);
+        return import_react2.default.createElement(import_react2.default.Fragment, {}, child);
       }
-      return import_react.default.createElement(import_react.default.Fragment, { key }, child);
+      return import_react2.default.createElement(import_react2.default.Fragment, { key }, child);
     }
-    return import_react.default.createElement(import_react.default.Fragment, { key }, ...children);
+    return import_react2.default.createElement(import_react2.default.Fragment, { key }, ...children);
   } catch {
     return null;
   }
@@ -249,9 +307,9 @@ function convertDomNode(node, key) {
     }
   });
   if (children.length === 0) {
-    return import_react.default.createElement(tagName, props);
+    return import_react2.default.createElement(tagName, props);
   }
-  return import_react.default.createElement(tagName, props, ...children);
+  return import_react2.default.createElement(tagName, props, ...children);
 }
 function getElementAttributes(element) {
   const attrs = {};
@@ -312,6 +370,29 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 ]);
 
 // src/components/index.ts
+var MdxRuntimeBoundary = class extends import_react3.default.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}`;
@@ -319,31 +400,31 @@ function renderInlineNodes(nodes, components) {
       case "text": {
         const textComponent = components.text;
         if (textComponent && textComponent !== defaultInlineComponents.text) {
-          return import_react2.default.createElement(textComponent, { key, text: node.text });
+          return import_react3.default.createElement(textComponent, { key, text: node.text });
         }
-        return import_react2.default.createElement(import_react2.default.Fragment, { key, children: node.text });
+        return import_react3.default.createElement(import_react3.default.Fragment, { key, children: node.text });
       }
       case "strong":
-        return import_react2.default.createElement(components.strong, {
+        return import_react3.default.createElement(components.strong, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "em":
-        return import_react2.default.createElement(components.em, {
+        return import_react3.default.createElement(components.em, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       case "strike": {
-        const StrikeComponent = components.strike ?? ((props) => import_react2.default.createElement("del", {}, props.children));
-        return import_react2.default.createElement(StrikeComponent, {
+        const StrikeComponent = components.strike ?? ((props) => import_react3.default.createElement("del", {}, props.children));
+        return import_react3.default.createElement(StrikeComponent, {
           key,
           children: renderInlineNodes(node.children, components)
         });
       }
       case "code":
-        return import_react2.default.createElement(components.code, { key, text: node.text });
+        return import_react3.default.createElement(components.code, { key, text: node.text });
       case "link":
-        return import_react2.default.createElement(
+        return import_react3.default.createElement(
           components.link,
           {
             key,
@@ -353,18 +434,18 @@ function renderInlineNodes(nodes, components) {
           }
         );
       case "image":
-        return import_react2.default.createElement(components.image, {
+        return import_react3.default.createElement(components.image, {
           key,
           src: node.src,
           alt: node.alt,
           title: node.title
         });
       case "br":
-        return import_react2.default.createElement(import_react2.default.Fragment, { key }, import_react2.default.createElement(components.br, {}));
+        return import_react3.default.createElement(import_react3.default.Fragment, { key }, import_react3.default.createElement(components.br, {}));
       default: {
         const component = components[node.kind];
         if (component) {
-          return import_react2.default.createElement(component, { key, ...node });
+          return import_react3.default.createElement(component, { key, ...node });
         }
         return null;
       }
@@ -372,18 +453,18 @@ function renderInlineNodes(nodes, components) {
   });
 }
 var defaultInlineComponents = {
-  text: ({ text }) => import_react2.default.createElement(import_react2.default.Fragment, {}, text),
-  strong: ({ children }) => import_react2.default.createElement("strong", {}, children),
-  em: ({ children }) => import_react2.default.createElement("em", {}, children),
-  strike: ({ children }) => import_react2.default.createElement("del", {}, children),
-  code: ({ text }) => import_react2.default.createElement(
+  text: ({ text }) => import_react3.default.createElement(import_react3.default.Fragment, {}, text),
+  strong: ({ children }) => import_react3.default.createElement("strong", {}, children),
+  em: ({ children }) => import_react3.default.createElement("em", {}, children),
+  strike: ({ children }) => import_react3.default.createElement("del", {}, children),
+  code: ({ text }) => import_react3.default.createElement(
     "code",
     {
       className: "inline-code"
     },
     text
   ),
-  link: ({ href, title, children }) => import_react2.default.createElement(
+  link: ({ href, title, children }) => import_react3.default.createElement(
     "a",
     {
       href,
@@ -394,15 +475,15 @@ var defaultInlineComponents = {
     },
     children
   ),
-  image: ({ src, alt, title }) => import_react2.default.createElement("img", {
+  image: ({ src, alt, title }) => import_react3.default.createElement("img", {
     src,
     alt,
     title,
     className: "markdown-image"
   }),
-  br: () => import_react2.default.createElement("br"),
+  br: () => import_react3.default.createElement("br"),
   // Custom extensible components
-  mention: ({ handle }) => import_react2.default.createElement(
+  mention: ({ handle }) => import_react3.default.createElement(
     "span",
     {
       className: "mention",
@@ -410,7 +491,7 @@ var defaultInlineComponents = {
     },
     `@${handle}`
   ),
-  citation: ({ id }) => import_react2.default.createElement(
+  citation: ({ id }) => import_react3.default.createElement(
     "span",
     {
       className: "citation",
@@ -418,7 +499,7 @@ var defaultInlineComponents = {
     },
     `[${id}]`
   ),
-  "math-inline": ({ tex }) => import_react2.default.createElement(
+  "math-inline": ({ tex }) => import_react3.default.createElement(
     "span",
     {
       className: "math-inline",
@@ -426,21 +507,21 @@ var defaultInlineComponents = {
     },
     `$${tex}$`
   ),
-  "math-display": ({ tex }) => import_react2.default.createElement(
+  "math-display": ({ tex }) => import_react3.default.createElement(
     "div",
     {
       className: "math-display markdown-math-display",
       "data-tex": tex,
       style: { overflowX: "auto" }
     },
-    import_react2.default.createElement("span", { className: "math-display-content" }, `$$${tex}$$`)
+    import_react3.default.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 import_react2.default.createElement("sup", { className: "footnote-ref" }, import_react2.default.createElement("a", { href, id, "data-label": label }, String(n)));
+    return import_react3.default.createElement("sup", { className: "footnote-ref" }, import_react3.default.createElement("a", { href, id, "data-label": label }, String(n)));
   }
 };
 function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRenderers) {
@@ -451,12 +532,12 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     nodes.forEach((node, idx) => {
       if (node === null || node === void 0) return;
       const key = `${baseKey}-${idx}`;
-      if (import_react2.default.isValidElement(node)) {
-        target.push(node.key === key ? node : import_react2.default.cloneElement(node, { key }));
+      if (import_react3.default.isValidElement(node)) {
+        target.push(node.key === key ? node : import_react3.default.cloneElement(node, { key }));
       } else if (typeof node === "string" || typeof node === "number") {
-        target.push(import_react2.default.createElement(import_react2.default.Fragment, { key }, node));
+        target.push(import_react3.default.createElement(import_react3.default.Fragment, { key }, node));
       } else {
-        target.push(import_react2.default.createElement(import_react2.default.Fragment, { key }, node));
+        target.push(import_react3.default.createElement(import_react3.default.Fragment, { key }, node));
       }
     });
   };
@@ -472,7 +553,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
     }
     const key = `paragraph-inline-group-${inlineGroupIndex++}`;
     result.push(
-      import_react2.default.createElement(
+      import_react3.default.createElement(
         "p",
         {
           key,
@@ -490,7 +571,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const inlineNodes = Array.isArray(segment.inline) ? segment.inline : [];
         if (inlineNodes.length === 0) {
           if (segment.value) {
-            inlineBuffer.push(import_react2.default.createElement(import_react2.default.Fragment, { key }, segment.value));
+            inlineBuffer.push(import_react3.default.createElement(import_react3.default.Fragment, { key }, segment.value));
           }
           break;
         }
@@ -518,14 +599,14 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
         const status = segment.status ?? "pending";
         let element;
         if (status === "compiled") {
-          element = import_react2.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
+          element = import_react3.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": "compiled" });
         } else if (status === "error") {
           const message = segment.value || "MDX error";
-          element = import_react2.default.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
+          element = import_react3.default.createElement("span", { className: "markdown-mdx-inline text-destructive", "data-mdx-status": "error" }, message);
         } else {
-          element = import_react2.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
+          element = import_react3.default.createElement("span", { className: "markdown-mdx-inline", "data-mdx-status": status }, segment.value);
         }
-        inlineBuffer.push(import_react2.default.createElement(import_react2.default.Fragment, { key }, element));
+        inlineBuffer.push(import_react3.default.createElement(import_react3.default.Fragment, { key }, element));
         break;
       }
       case "html": {
@@ -541,7 +622,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
             result.push(element);
           } else if (html) {
             result.push(
-              import_react2.default.createElement("div", {
+              import_react3.default.createElement("div", {
                 key,
                 className: "markdown-inline-html-block",
                 dangerouslySetInnerHTML: { __html: html }
@@ -560,7 +641,7 @@ function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRend
   flushInline();
   if (result.length === 0) {
     return [
-      import_react2.default.createElement(
+      import_react3.default.createElement(
         "p",
         {
           key: "paragraph-inline-group-0",
@@ -619,24 +700,80 @@ var BLOCK_LEVEL_TAGS = /* @__PURE__ */ new Set([
 ]);
 
 // src/renderer/hooks.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useRendererNode(store, id) {
-  const selector = (0, import_react3.useMemo)(() => {
+  const selector = (0, import_react4.useMemo)(() => {
     return () => store.getNodeWithVersion(id);
   }, [store, id]);
-  const snapshot = (0, import_react3.useSyncExternalStore)(store.subscribe, selector, selector);
+  const snapshot = (0, import_react4.useSyncExternalStore)(store.subscribe, selector, selector);
   return snapshot.node;
 }
 function useRendererChildren(store, id) {
-  const selector = (0, import_react3.useMemo)(() => {
+  const selector = (0, import_react4.useMemo)(() => {
     return () => store.getChildrenWithVersion(id);
   }, [store, id]);
-  const snapshot = (0, import_react3.useSyncExternalStore)(store.subscribe, selector, selector);
+  const snapshot = (0, import_react4.useSyncExternalStore)(store.subscribe, selector, selector);
   return snapshot.children;
 }
 
+// src/renderer/code-highlight-context.tsx
+var import_react5 = __toESM(require("react"), 1);
+var CodeHighlightRequestContext = import_react5.default.createContext(null);
+function useCodeHighlightRequester() {
+  return import_react5.default.useContext(CodeHighlightRequestContext);
+}
+
+// src/renderer/deferred-render-context.tsx
+var import_react6 = __toESM(require("react"), 1);
+var DeferredRenderContext = import_react6.default.createContext(null);
+
+// src/renderer/store.ts
+var import_core3 = require("@stream-mdx/core");
+var NODE_SNAPSHOT_CACHE_LIMIT = 5e4;
+var CHILDREN_SNAPSHOT_CACHE_LIMIT = 5e4;
+var NODE_SNAPSHOT_CACHE_BUFFER = Math.max(200, Math.floor(NODE_SNAPSHOT_CACHE_LIMIT * 0.1));
+var CHILDREN_SNAPSHOT_CACHE_BUFFER = Math.max(200, Math.floor(CHILDREN_SNAPSHOT_CACHE_LIMIT * 0.1));
+var EMPTY_CHILDREN = Object.freeze([]);
+var EMPTY_NODE_SNAPSHOT = Object.freeze({ version: -1, node: void 0 });
+var EMPTY_CHILDREN_SNAPSHOT = Object.freeze({
+  version: -1,
+  children: EMPTY_CHILDREN
+});
+function isListPatchDebugEnabled() {
+  if (typeof globalThis !== "undefined") {
+    const flag = globalThis.__STREAMING_LIST_DEBUG__;
+    if (flag === true) return true;
+  }
+  if (typeof process !== "undefined" && process.env.NEXT_PUBLIC_STREAMING_LIST_DEBUG === "true") {
+    return true;
+  }
+  return false;
+}
+var CODE_BLOCK_DEBUG_ENABLED = (() => {
+  try {
+    if (typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_STREAMING_DEBUG_CODELINES === "1") {
+      return true;
+    }
+    if (typeof globalThis !== "undefined") {
+      const debug = globalThis?.__STREAMING_DEBUG__;
+      if (debug?.codeLines) {
+        return true;
+      }
+    }
+  } catch {
+  }
+  return false;
+})() || false;
+var CODE_BLOCK_VALIDATION_ENABLED = typeof process !== "undefined" && process.env ? process.env.NODE_ENV !== "production" : true;
+var getPerfNow = (() => {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return () => performance.now();
+  }
+  return () => Date.now();
+})();
+
 // src/renderer/virtualized-code.tsx
-var import_react4 = require("react");
+var import_react7 = require("react");
 var DEFAULT_VIRTUALIZED_CODE_CONFIG = {
   enabled: true,
   windowSize: 100,
@@ -652,6 +789,8 @@ function calculateCodeWindow(lines, scrollTop, containerHeight, lineHeight, conf
     return {
       startIndex: 0,
       endIndex: totalLines,
+      visibleStart: 0,
+      visibleEnd: totalLines,
       visibleLines: lines,
       totalLines,
       mountedLines: totalLines
@@ -659,22 +798,26 @@ function calculateCodeWindow(lines, scrollTop, containerHeight, lineHeight, conf
   }
   const firstVisibleLine = Math.floor(scrollTop / lineHeight);
   const lastVisibleLine = Math.ceil((scrollTop + containerHeight) / lineHeight);
-  const startIndex = Math.max(0, firstVisibleLine - config.bufferSize);
-  const endIndex = Math.min(totalLines, lastVisibleLine + config.bufferSize);
+  const visibleStart = Math.max(0, firstVisibleLine);
+  const visibleEnd = Math.min(totalLines, Math.max(visibleStart, lastVisibleLine));
+  const startIndex = Math.max(0, visibleStart - config.bufferSize);
+  const endIndex = Math.min(totalLines, visibleEnd + config.bufferSize);
   return {
     startIndex,
     endIndex,
+    visibleStart,
+    visibleEnd,
     visibleLines: lines.slice(startIndex, endIndex),
     totalLines,
     mountedLines: endIndex - startIndex
   };
 }
 function useVirtualizedCode(lines, config = DEFAULT_VIRTUALIZED_CODE_CONFIG) {
-  const containerRef = (0, import_react4.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react4.useState)(0);
-  const [containerHeight, setContainerHeight] = (0, import_react4.useState)(0);
-  const lineHeightRef = (0, import_react4.useRef)(20);
-  (0, import_react4.useEffect)(() => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react7.useState)(0);
+  const [containerHeight, setContainerHeight] = (0, import_react7.useState)(0);
+  const lineHeightRef = (0, import_react7.useRef)(20);
+  (0, import_react7.useEffect)(() => {
     if (!containerRef.current || lines.length === 0) return;
     const timeoutId = setTimeout(() => {
       if (!containerRef.current) return;
@@ -688,12 +831,12 @@ function useVirtualizedCode(lines, config = DEFAULT_VIRTUALIZED_CODE_CONFIG) {
     }, 0);
     return () => clearTimeout(timeoutId);
   }, [lines.length]);
-  const handleScroll = (0, import_react4.useCallback)((e) => {
+  const handleScroll = (0, import_react7.useCallback)((e) => {
     const target = e.currentTarget;
     setScrollTop(target.scrollTop);
     setContainerHeight(target.clientHeight);
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -703,10 +846,10 @@ function useVirtualizedCode(lines, config = DEFAULT_VIRTUALIZED_CODE_CONFIG) {
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  const window2 = (0, import_react4.useMemo)(() => {
+  const window2 = (0, import_react7.useMemo)(() => {
     return calculateCodeWindow(lines, scrollTop, containerHeight, lineHeightRef.current, config);
   }, [lines, scrollTop, containerHeight, config]);
-  const scrollToLine = (0, import_react4.useCallback)((lineIndex) => {
+  const scrollToLine = (0, import_react7.useCallback)((lineIndex) => {
     if (!containerRef.current) return;
     const targetScrollTop = lineIndex * lineHeightRef.current;
     containerRef.current.scrollTop = targetScrollTop;
@@ -747,7 +890,7 @@ var BlockNodeRenderer = ({ store, blockId, registry }) => {
       return registry.renderBlock(block);
   }
 };
-var ParagraphBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var ParagraphBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const block = node?.block;
   const childIds = useRendererChildren(store, blockId);
@@ -767,7 +910,7 @@ var ParagraphBlockView = import_react5.default.memo(({ store, blockId, registry
       const structured = renderParagraphMixedSegments(segments2, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
       if (structured.length === 1) {
         const [single] = structured;
-        return import_react5.default.isValidElement(single) ? single : single;
+        return import_react8.default.isValidElement(single) ? single : single;
       }
       return structured;
     }
@@ -785,7 +928,7 @@ var ParagraphBlockView = import_react5.default.memo(({ store, blockId, registry
         const structured = renderParagraphMixedSegments(derivedSegments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
         if (structured.length === 1) {
           const [single] = structured;
-          return import_react5.default.isValidElement(single) ? single : single;
+          return import_react8.default.isValidElement(single) ? single : single;
         }
         return structured;
       }
@@ -804,7 +947,7 @@ var ParagraphBlockView = import_react5.default.memo(({ store, blockId, registry
     const structured = renderParagraphMixedSegments(segments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
     if (structured.length === 1) {
       const [single] = structured;
-      return import_react5.default.isValidElement(single) ? single : single;
+      return import_react8.default.isValidElement(single) ? single : single;
     }
     return structured;
   }
@@ -821,31 +964,31 @@ var ParagraphBlockView = import_react5.default.memo(({ store, blockId, registry
     const structured = renderParagraphMixedSegments(derivedSegments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
     if (structured.length === 1) {
       const [single] = structured;
-      return import_react5.default.isValidElement(single) ? single : single;
+      return import_react8.default.isValidElement(single) ? single : single;
     }
     return structured;
   }
   const ParagraphComponent = registry.getBlockComponent("paragraph");
-  const baseElement = import_react5.default.createElement(ParagraphComponent, {
+  const baseElement = import_react8.default.createElement(ParagraphComponent, {
     inlines: block.payload.inline ?? [],
     raw: block.payload.raw,
     meta: block.payload.meta
   });
   if (childIds.length > 0) {
     const renderedChildren = childIds.map((childId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MixedSegmentView, { store, nodeId: childId, inlineComponents }, childId));
-    if (import_react5.default.isValidElement(baseElement)) {
+    if (import_react8.default.isValidElement(baseElement)) {
       const { children: _ignored, className = "markdown-paragraph", inlines: _inlines, raw: _raw, meta: _meta, ...rest } = baseElement.props ?? {};
-      return import_react5.default.createElement("p", { ...rest, className }, renderedChildren);
+      return import_react8.default.createElement("p", { ...rest, className }, renderedChildren);
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "markdown-paragraph", children: renderedChildren });
   }
-  if (import_react5.default.isValidElement(baseElement)) {
+  if (import_react8.default.isValidElement(baseElement)) {
     return baseElement;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "markdown-paragraph", children: renderInlineNodes(block.payload.inline ?? [], inlineComponents) });
 });
 ParagraphBlockView.displayName = "ParagraphBlockView";
-var BlockquoteBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var BlockquoteBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const block = node?.block;
   const childIds = useRendererChildren(store, blockId);
@@ -891,7 +1034,7 @@ var BlockquoteBlockView = import_react5.default.memo(({ store, blockId, registry
             elements.push(htmlNode);
           } else {
             elements.push(
-              import_react5.default.createElement("span", {
+              import_react8.default.createElement("span", {
                 key: `blockquote-html-${block.id}-${segmentIndex}`,
                 className: "markdown-inline-html",
                 /* biome-ignore lint/security/noDangerouslySetInnerHtml: segment content is sanitized by the worker before streaming */
@@ -909,10 +1052,10 @@ var BlockquoteBlockView = import_react5.default.memo(({ store, blockId, registry
         default: {
           const inline = renderInlineContent(segment.inline, `blockquote-text-inline-${block.id}-${segmentIndex}-`);
           if (inline) {
-            elements.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.default.Fragment, { children: inline }, `blockquote-inline-${block.id}-${segmentIndex}`));
+            elements.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react8.default.Fragment, { children: inline }, `blockquote-inline-${block.id}-${segmentIndex}`));
           } else {
             elements.push(
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react5.default.Fragment, { children: renderTextWithBreaks(segment.value, `blockquote-text-${block.id}-${segmentIndex}-`) }, `blockquote-text-${block.id}-${segmentIndex}`)
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react8.default.Fragment, { children: renderTextWithBreaks(segment.value, `blockquote-text-${block.id}-${segmentIndex}-`) }, `blockquote-text-${block.id}-${segmentIndex}`)
             );
           }
           break;
@@ -951,7 +1094,7 @@ var BlockquoteBlockView = import_react5.default.memo(({ store, blockId, registry
     return null;
   })();
   const BlockquoteComponent = registry.getBlockComponent("blockquote");
-  const baseElement = import_react5.default.createElement(
+  const baseElement = import_react8.default.createElement(
     BlockquoteComponent,
     {
       inlines: block.payload.inline ?? [],
@@ -959,13 +1102,13 @@ var BlockquoteBlockView = import_react5.default.memo(({ store, blockId, registry
     },
     renderedContent
   );
-  if (import_react5.default.isValidElement(baseElement)) {
+  if (import_react8.default.isValidElement(baseElement)) {
     return baseElement;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { className: "markdown-blockquote", children: renderedContent });
 });
 BlockquoteBlockView.displayName = "BlockquoteBlockView";
-var MixedSegmentView = import_react5.default.memo(({ store, nodeId, inlineComponents }) => {
+var MixedSegmentView = import_react8.default.memo(({ store, nodeId, inlineComponents }) => {
   const node = useRendererNode(store, nodeId);
   if (!node) return null;
   switch (node.type) {
@@ -993,7 +1136,7 @@ var MixedSegmentView = import_react5.default.memo(({ store, nodeId, inlineCompon
         return rendered;
       }
       if (!html) return null;
-      return import_react5.default.createElement("span", {
+      return import_react8.default.createElement("span", {
         className: "markdown-inline-html",
         /* biome-ignore lint/security/noDangerouslySetInnerHtml: html is sanitized upstream before reaching the renderer */
         dangerouslySetInnerHTML: { __html: html }
@@ -1018,19 +1161,19 @@ var MixedSegmentView = import_react5.default.memo(({ store, nodeId, inlineCompon
   }
 });
 MixedSegmentView.displayName = "MixedSegmentView";
-var HtmlBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var HtmlBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   if (!node || !node.block) return null;
   return registry.renderBlock(node.block);
 });
 HtmlBlockView.displayName = "HtmlBlockView";
-var MdxBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var MdxBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   if (!node || !node.block) return null;
   return registry.renderBlock(node.block);
 });
 MdxBlockView.displayName = "MdxBlockView";
-var ListBlockView = import_react5.default.memo(
+var ListBlockView = import_react8.default.memo(
   ({ store, blockId, registry, depth = 0 }) => {
     const node = useRendererNode(store, blockId);
     const block = node?.block;
@@ -1038,10 +1181,36 @@ var ListBlockView = import_react5.default.memo(
     const inlineComponents = registry.getInlineComponents();
     const ordered = Boolean(node?.props?.ordered ?? block?.payload.meta?.ordered);
     const Tag = ordered ? "ol" : "ul";
-    const listStyle = import_react5.default.useMemo(() => {
-      if (!ordered || childIds.length === 0) return void 0;
+    const listDebugEnabled = isListPatchDebugEnabled();
+    const listItemIds = import_react8.default.useMemo(() => {
+      const ids = [];
+      for (const childId of childIds) {
+        const childNode = store.getNode(childId);
+        if (childNode?.type === "list-item") {
+          ids.push(childId);
+        }
+      }
+      return ids;
+    }, [childIds, store]);
+    import_react8.default.useEffect(() => {
+      if (!listDebugEnabled) return;
+      const childTypes = childIds.map((childId) => store.getNode(childId)?.type ?? "missing");
+      console.info("[stream-mdx:list-render]", {
+        listId: blockId,
+        depth,
+        ordered,
+        childIds,
+        childTypes,
+        listItemIds,
+        listItems: listItemIds.length,
+        totalChildren: childIds.length,
+        isFinalized: block?.isFinalized ?? false
+      });
+    }, [listDebugEnabled, blockId, depth, ordered, childIds, listItemIds, store, block?.isFinalized]);
+    const listStyle = import_react8.default.useMemo(() => {
+      if (!ordered || listItemIds.length === 0) return void 0;
       let maxDigits = 1;
-      childIds.forEach((childId, index) => {
+      listItemIds.forEach((childId, index) => {
         const childNode = store.getNode(childId);
         const raw = typeof childNode?.block?.payload?.raw === "string" ? childNode.block.payload.raw : void 0;
         const markerMatch = raw ? raw.match(/^([^\s]+)\s+/) : null;
@@ -1055,24 +1224,34 @@ var ListBlockView = import_react5.default.memo(
       return {
         ["--list-indent"]: `calc(${baseIndent} + ${maxDigits}ch)`
       };
-    }, [ordered, childIds, store, depth]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { className: `markdown-list ${ordered ? "ordered" : "unordered"}`, "data-list-depth": depth, style: listStyle, children: childIds.map((childId, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ListItemView,
+    }, [ordered, listItemIds, store, depth]);
+    if (listItemIds.length === 0) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Tag,
       {
-        store,
-        nodeId: childId,
-        inlineComponents,
-        registry,
-        ordered,
-        index,
-        depth
-      },
-      childId
-    )) });
+        className: `markdown-list ${ordered ? "ordered" : "unordered"}`,
+        "data-list-depth": depth,
+        "data-list-id": listDebugEnabled ? blockId : void 0,
+        style: listStyle,
+        children: listItemIds.map((childId, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ListItemView,
+          {
+            store,
+            nodeId: childId,
+            inlineComponents,
+            registry,
+            ordered,
+            index,
+            depth
+          },
+          childId
+        ))
+      }
+    );
   }
 );
 ListBlockView.displayName = "ListBlockView";
-var ListItemView = import_react5.default.memo(({ store, nodeId, inlineComponents, registry, ordered, index, depth }) => {
+var ListItemView = import_react8.default.memo(({ store, nodeId, inlineComponents, registry, ordered, index, depth }) => {
   const node = useRendererNode(store, nodeId);
   const childIds = useRendererChildren(store, nodeId);
   const inline = node?.props?.inline ?? [];
@@ -1085,7 +1264,9 @@ var ListItemView = import_react5.default.memo(({ store, nodeId, inlineComponents
   const inferredIndex = typeof node?.props?.index === "number" ? Number(node?.props?.index) : index;
   const isOrdered = Boolean(node?.props?.ordered ?? ordered);
   const counterText = !isTask ? isOrdered ? marker ? marker : `${inferredIndex + 1}.` : "\u2022" : void 0;
-  const [segmentChildIds, contentChildIds] = import_react5.default.useMemo(() => {
+  const listDebugEnabled = isListPatchDebugEnabled();
+  const inlineLength = inline.length;
+  const [segmentChildIds, contentChildIds] = import_react8.default.useMemo(() => {
     const segments = [];
     const structural = [];
     for (const childId of childIds) {
@@ -1099,16 +1280,16 @@ var ListItemView = import_react5.default.memo(({ store, nodeId, inlineComponents
     }
     return [segments, structural];
   }, [childIds, store]);
-  const segmentElements = import_react5.default.useMemo(() => {
+  const segmentElements = import_react8.default.useMemo(() => {
     return segmentChildIds.map((childId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MixedSegmentView, { store, nodeId: childId, inlineComponents }, childId));
   }, [segmentChildIds, store, inlineComponents]);
-  const primaryContent = import_react5.default.useMemo(() => {
+  const primaryContent = import_react8.default.useMemo(() => {
     if (segmentChildIds.length > 0) {
       return segmentElements;
     }
     return renderInlineNodes(inline, inlineComponents);
   }, [segmentChildIds, segmentElements, inline, inlineComponents]);
-  const trailingChildren = import_react5.default.useMemo(() => {
+  const trailingChildren = import_react8.default.useMemo(() => {
     return contentChildIds.map((childId) => {
       const childNode = store.getNode(childId);
       if (!childNode) return null;
@@ -1126,22 +1307,67 @@ var ListItemView = import_react5.default.memo(({ store, nodeId, inlineComponents
   }, [contentChildIds, store, inlineComponents, registry, depth]);
   const filteredChildren = trailingChildren.filter((child) => Boolean(child));
   const hasChildren = filteredChildren.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: `markdown-list-item${isTask ? " markdown-list-item-task" : ""}`, "data-counter-text": counterText, "data-list-depth": depth, children: [
-    isTask ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "markdown-task", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", className: "markdown-task-checkbox", checked: isChecked, readOnly: true, disabled: true, tabIndex: -1, "aria-checked": isChecked }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "markdown-task-content", children: primaryContent })
-    ] }) : primaryContent,
-    hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "markdown-list-item-children", children: filteredChildren }) : null
-  ] });
+  import_react8.default.useEffect(() => {
+    if (!listDebugEnabled) return;
+    const childTypes = childIds.map((childId) => store.getNode(childId)?.type ?? "missing");
+    console.info("[stream-mdx:list-item-render]", {
+      itemId: nodeId,
+      depth,
+      ordered: isOrdered,
+      inferredIndex,
+      marker,
+      isTask,
+      isChecked,
+      childIds,
+      childTypes,
+      segmentChildIds,
+      contentChildIds,
+      inlineLength,
+      hasChildren,
+      isFinalized: block?.isFinalized ?? false
+    });
+  }, [
+    listDebugEnabled,
+    nodeId,
+    depth,
+    isOrdered,
+    inferredIndex,
+    marker,
+    isTask,
+    isChecked,
+    childIds,
+    segmentChildIds,
+    contentChildIds,
+    inlineLength,
+    hasChildren,
+    store,
+    block?.isFinalized
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "li",
+    {
+      className: `markdown-list-item${isTask ? " markdown-list-item-task" : ""}`,
+      "data-counter-text": counterText,
+      "data-list-depth": depth,
+      "data-list-item-id": listDebugEnabled ? nodeId : void 0,
+      children: [
+        isTask ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "markdown-task", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", className: "markdown-task-checkbox", checked: isChecked, readOnly: true, disabled: true, tabIndex: -1, "aria-checked": isChecked }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "markdown-task-content", children: primaryContent })
+        ] }) : primaryContent,
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "markdown-list-item-children", children: filteredChildren }) : null
+      ]
+    }
+  );
 });
 ListItemView.displayName = "ListItemView";
-var TableBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var TableBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const tableElements = registry.getTableElements();
   const childIds = useRendererChildren(store, blockId);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tableElements.Table, { className: "markdown-table w-full caption-bottom text-base", children: childIds.map((sectionId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableSectionView, { store, nodeId: sectionId, registry }, sectionId)) });
 });
 TableBlockView.displayName = "TableBlockView";
-var TableSectionView = import_react5.default.memo(({ store, nodeId, registry }) => {
+var TableSectionView = import_react8.default.memo(({ store, nodeId, registry }) => {
   const node = useRendererNode(store, nodeId);
   if (!node) return null;
   const tableElements = registry.getTableElements();
@@ -1156,13 +1382,13 @@ var TableSectionView = import_react5.default.memo(({ store, nodeId, registry })
   return null;
 });
 TableSectionView.displayName = "TableSectionView";
-var TableRowView = import_react5.default.memo(({ store, nodeId, registry }) => {
+var TableRowView = import_react8.default.memo(({ store, nodeId, registry }) => {
   const tableElements = registry.getTableElements();
   const cellIds = useRendererChildren(store, nodeId);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tableElements.Tr, { children: cellIds.map((cellId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCellView, { store, nodeId: cellId, registry }, cellId)) });
 });
 TableRowView.displayName = "TableRowView";
-var TableCellView = import_react5.default.memo(({ store, nodeId, registry }) => {
+var TableCellView = import_react8.default.memo(({ store, nodeId, registry }) => {
   const node = useRendererNode(store, nodeId);
   const inlineComponents = registry.getInlineComponents();
   const tableElements = registry.getTableElements();
@@ -1175,13 +1401,19 @@ var TableCellView = import_react5.default.memo(({ store, nodeId, registry }) =>
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ...alignProps, children: content });
 });
 TableCellView.displayName = "TableCellView";
-var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) => {
+var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const childIds = useRendererChildren(store, blockId);
   const CodeComponent = registry.getBlockComponent("code");
+  const deferredConfig = import_react8.default.useContext(DeferredRenderContext);
+  const deferredRef = import_react8.default.useRef(null);
+  const shouldRenderDeferred = useDeferredRender(
+    deferredRef,
+    deferredConfig ? { ...deferredConfig, enabled: true } : { enabled: false }
+  );
   if (!node || !node.block) return null;
   const nodeVersion = node.version;
-  const lines = import_react5.default.useMemo(() => {
+  const lines = import_react8.default.useMemo(() => {
     const seenIds = /* @__PURE__ */ new Set();
     const seenIndices = /* @__PURE__ */ new Set();
     const deduped = [];
@@ -1191,6 +1423,7 @@ var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) =>
       const index = typeof child.props?.index === "number" ? child.props?.index : deduped.length;
       const text = typeof child.props?.text === "string" ? child.props?.text : "";
       const html = typeof child.props?.html === "string" ? child.props?.html : null;
+      const tokens = Object.prototype.hasOwnProperty.call(child.props ?? {}, "tokens") ? child.props?.tokens : void 0;
       if (seenIds.has(child.id) || seenIndices.has(index)) {
         console.warn("[renderer-view] duplicate code line detected", {
           blockId,
@@ -1201,7 +1434,7 @@ var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) =>
       }
       seenIds.add(child.id);
       seenIndices.add(index);
-      deduped.push({ id: child.id, index, text, html });
+      deduped.push({ id: child.id, index, text, html, tokens });
     }
     deduped.sort((a, b) => a.index - b.index);
     return deduped;
@@ -1210,9 +1443,93 @@ var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) =>
   const preAttrs = node.props?.preAttrs ?? void 0;
   const codeAttrs = node.props?.codeAttrs ?? void 0;
   const virtualizationConfig = DEFAULT_VIRTUALIZED_CODE_CONFIG;
-  const shouldVirtualize = virtualizationConfig.enabled && lines.length >= virtualizationConfig.virtualizeThreshold;
+  const virtualizationDisabled = typeof process !== "undefined" && typeof process.env === "object" && process.env.STREAM_MDX_DISABLE_VIRTUALIZED_CODE === "true";
+  const shouldVirtualize = !virtualizationDisabled && virtualizationConfig.enabled && lines.length >= virtualizationConfig.virtualizeThreshold;
   const virtualization = useVirtualizedCode(lines, shouldVirtualize ? virtualizationConfig : { ...virtualizationConfig, enabled: false });
-  const highlightedHtml = import_react5.default.useMemo(() => {
+  const highlightRequester = useCodeHighlightRequester();
+  const lazyEnabled = Boolean(node.block.payload.meta?.lazyTokenization);
+  const lazyTokenizedUntil = typeof node.block.payload.meta?.lazyTokenizedUntil === "number" ? node.block.payload.meta.lazyTokenizedUntil : 0;
+  const lastRangeRef = import_react8.default.useRef(null);
+  const rafRef = import_react8.default.useRef(null);
+  const idleRef = import_react8.default.useRef(null);
+  import_react8.default.useEffect(() => {
+    if (!shouldVirtualize || !lazyEnabled || !highlightRequester) return;
+    const { visibleStart, visibleEnd, startIndex, endIndex } = virtualization.window;
+    if (endIndex <= lazyTokenizedUntil) return;
+    const nextRange = {
+      visibleStart,
+      visibleEnd,
+      prefetchStart: startIndex,
+      prefetchEnd: endIndex,
+      tokenizedUntil: lazyTokenizedUntil
+    };
+    const last = lastRangeRef.current;
+    if (last && last.visibleStart === nextRange.visibleStart && last.visibleEnd === nextRange.visibleEnd && last.prefetchStart === nextRange.prefetchStart && last.prefetchEnd === nextRange.prefetchEnd && last.tokenizedUntil === nextRange.tokenizedUntil) {
+      return;
+    }
+    lastRangeRef.current = nextRange;
+    if (rafRef.current !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(rafRef.current);
+    }
+    if (typeof requestAnimationFrame === "function") {
+      rafRef.current = requestAnimationFrame(() => {
+        highlightRequester({
+          blockId,
+          startLine: visibleStart,
+          endLine: visibleEnd,
+          priority: "visible",
+          reason: "scroll"
+        });
+        rafRef.current = null;
+      });
+    } else {
+      highlightRequester({
+        blockId,
+        startLine: visibleStart,
+        endLine: visibleEnd,
+        priority: "visible",
+        reason: "scroll"
+      });
+    }
+    const prefetchNeeded = startIndex < visibleStart || endIndex > visibleEnd;
+    if (prefetchNeeded) {
+      const idleCallback = globalThis.requestIdleCallback;
+      const cancelIdle = globalThis.cancelIdleCallback;
+      if (idleRef.current !== null) {
+        if (typeof cancelIdle === "function") {
+          cancelIdle(idleRef.current);
+        } else if (typeof clearTimeout === "function") {
+          clearTimeout(idleRef.current);
+        }
+      }
+      const schedule = () => {
+        highlightRequester({
+          blockId,
+          startLine: startIndex,
+          endLine: endIndex,
+          priority: "prefetch",
+          reason: "buffer"
+        });
+        idleRef.current = null;
+      };
+      if (typeof idleCallback === "function") {
+        idleRef.current = idleCallback(() => schedule());
+      } else if (typeof setTimeout === "function") {
+        idleRef.current = setTimeout(schedule, 80);
+      }
+    }
+  }, [
+    blockId,
+    highlightRequester,
+    lazyEnabled,
+    lazyTokenizedUntil,
+    shouldVirtualize,
+    virtualization.window.visibleStart,
+    virtualization.window.visibleEnd,
+    virtualization.window.startIndex,
+    virtualization.window.endIndex
+  ]);
+  const highlightedHtml = import_react8.default.useMemo(() => {
     if (!shouldVirtualize && node.block?.payload.highlightedHtml) {
       return node.block.payload.highlightedHtml;
     }
@@ -1243,11 +1560,19 @@ var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) =>
     }
   );
   const codeFrameClass = "not-prose flex flex-col rounded-lg border border-input pt-1 font-mono text-sm";
+  const codeMetricsAttrs = {
+    "data-code-block": "true",
+    "data-block-id": blockId,
+    "data-code-virtualized": shouldVirtualize ? "true" : "false",
+    "data-code-total-lines": String(lines.length),
+    "data-code-mounted-lines": String(shouldVirtualize ? virtualization.window.mountedLines : lines.length),
+    "data-code-window-size": String(virtualization.config.windowSize)
+  };
   const codeView = shouldVirtualize ? (() => {
     const { containerRef, window: window2, handleScroll, lineHeight } = virtualization;
     const spacerTop = window2.startIndex * lineHeight;
     const spacerBottom = (window2.totalLines - window2.endIndex) * lineHeight;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: codeFrameClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: codeFrameClass, ...codeMetricsAttrs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -1261,14 +1586,22 @@ var CodeBlockView = import_react5.default.memo(({ store, blockId, registry }) =>
         ]
       }
     ) });
-  })() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: codeFrameClass, children: rendered });
+  })() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: codeFrameClass, ...codeMetricsAttrs, children: rendered });
   const blockComponentMap = registry.getBlockComponentMap();
   const MermaidComponent = Object.prototype.hasOwnProperty.call(blockComponentMap, "mermaid") ? blockComponentMap.mermaid : null;
   if ((lang ?? "").toLowerCase() === "mermaid" && MermaidComponent) {
     const raw = typeof node.block.payload.raw === "string" ? node.block.payload.raw : "";
-    const fenced = (0, import_core3.stripCodeFence)(raw);
+    const fenced = (0, import_core4.stripCodeFence)(raw);
     const code = fenced.hadFence ? fenced.code : raw;
-    return import_react5.default.createElement(MermaidComponent, {
+    if (deferredConfig) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: deferredRef, children: shouldRenderDeferred ? import_react8.default.createElement(MermaidComponent, {
+        code,
+        renderCode: codeView,
+        meta: node.block.payload.meta,
+        isFinalized: node.block.isFinalized
+      }) : codeView });
+    }
+    return import_react8.default.createElement(MermaidComponent, {
       code,
       renderCode: codeView,
       meta: node.block.payload.meta,