@stream-mdx/react 0.1.1 → 0.2.0

package/dist/renderer/node-views.mjs

@@ -2,10 +2,68 @@
 
 // src/renderer/node-views.tsx
 import { stripCodeFence } from "@stream-mdx/core";
-import React3 from "react";
+import React5 from "react";
 
 // src/components/index.ts
 import { createTrustedHTML, sanitizeHTML } from "@stream-mdx/core";
+
+// 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(
+      (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
 import { removeHeadingMarkers } from "@stream-mdx/core";
 import React2 from "react";
 
@@ -279,6 +337,29 @@ var INLINE_ELEMENTS = /* @__PURE__ */ new Set([
 ]);
 
 // src/components/index.ts
+var MdxRuntimeBoundary = class extends React2.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}`;
@@ -602,8 +683,72 @@ function useRendererChildren(store, id) {
   return snapshot.children;
 }
 
+// src/renderer/code-highlight-context.tsx
+import React3 from "react";
+var CodeHighlightRequestContext = React3.createContext(null);
+function useCodeHighlightRequester() {
+  return React3.useContext(CodeHighlightRequestContext);
+}
+
+// src/renderer/deferred-render-context.tsx
+import React4 from "react";
+var DeferredRenderContext = React4.createContext(null);
+
+// src/renderer/store.ts
+import {
+  cloneBlock,
+  createBlockSnapshot,
+  extractCodeWrapperAttributes,
+  getDefaultCodeWrapperAttributes,
+  sanitizeCodeHTML,
+  sanitizeHTML as sanitizeHTML2,
+  PATCH_ROOT_ID
+} from "@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
-import { useCallback, useEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 var DEFAULT_VIRTUALIZED_CODE_CONFIG = {
   enabled: true,
   windowSize: 100,
@@ -619,6 +764,8 @@ function calculateCodeWindow(lines, scrollTop, containerHeight, lineHeight, conf
     return {
       startIndex: 0,
       endIndex: totalLines,
+      visibleStart: 0,
+      visibleEnd: totalLines,
       visibleLines: lines,
       totalLines,
       mountedLines: totalLines
@@ -626,11 +773,15 @@ 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
@@ -638,10 +789,10 @@ function calculateCodeWindow(lines, scrollTop, containerHeight, lineHeight, conf
 }
 function useVirtualizedCode(lines, config = DEFAULT_VIRTUALIZED_CODE_CONFIG) {
   const containerRef = useRef(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
+  const [scrollTop, setScrollTop] = useState2(0);
+  const [containerHeight, setContainerHeight] = useState2(0);
   const lineHeightRef = useRef(20);
-  useEffect(() => {
+  useEffect2(() => {
     if (!containerRef.current || lines.length === 0) return;
     const timeoutId = setTimeout(() => {
       if (!containerRef.current) return;
@@ -660,7 +811,7 @@ function useVirtualizedCode(lines, config = DEFAULT_VIRTUALIZED_CODE_CONFIG) {
     setScrollTop(target.scrollTop);
     setContainerHeight(target.clientHeight);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -714,7 +865,7 @@ var BlockNodeRenderer = ({ store, blockId, registry }) => {
       return registry.renderBlock(block);
   }
 };
-var ParagraphBlockView = React3.memo(({ store, blockId, registry }) => {
+var ParagraphBlockView = React5.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const block = node?.block;
   const childIds = useRendererChildren(store, blockId);
@@ -734,7 +885,7 @@ var ParagraphBlockView = React3.memo(({ store, blockId, registry }) => {
       const structured = renderParagraphMixedSegments(segments2, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
       if (structured.length === 1) {
         const [single] = structured;
-        return React3.isValidElement(single) ? single : single;
+        return React5.isValidElement(single) ? single : single;
       }
       return structured;
     }
@@ -752,7 +903,7 @@ var ParagraphBlockView = React3.memo(({ store, blockId, registry }) => {
         const structured = renderParagraphMixedSegments(derivedSegments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
         if (structured.length === 1) {
           const [single] = structured;
-          return React3.isValidElement(single) ? single : single;
+          return React5.isValidElement(single) ? single : single;
         }
         return structured;
       }
@@ -771,7 +922,7 @@ var ParagraphBlockView = React3.memo(({ store, blockId, registry }) => {
     const structured = renderParagraphMixedSegments(segments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
     if (structured.length === 1) {
       const [single] = structured;
-      return React3.isValidElement(single) ? single : single;
+      return React5.isValidElement(single) ? single : single;
     }
     return structured;
   }
@@ -788,31 +939,31 @@ var ParagraphBlockView = React3.memo(({ store, blockId, registry }) => {
     const structured = renderParagraphMixedSegments(derivedSegments, inlineComponents, DEFAULT_INLINE_HTML_RENDERERS);
     if (structured.length === 1) {
       const [single] = structured;
-      return React3.isValidElement(single) ? single : single;
+      return React5.isValidElement(single) ? single : single;
     }
     return structured;
   }
   const ParagraphComponent = registry.getBlockComponent("paragraph");
-  const baseElement = React3.createElement(ParagraphComponent, {
+  const baseElement = React5.createElement(ParagraphComponent, {
     inlines: block.payload.inline ?? [],
     raw: block.payload.raw,
     meta: block.payload.meta
   });
   if (childIds.length > 0) {
     const renderedChildren = childIds.map((childId) => /* @__PURE__ */ jsx(MixedSegmentView, { store, nodeId: childId, inlineComponents }, childId));
-    if (React3.isValidElement(baseElement)) {
+    if (React5.isValidElement(baseElement)) {
       const { children: _ignored, className = "markdown-paragraph", inlines: _inlines, raw: _raw, meta: _meta, ...rest } = baseElement.props ?? {};
-      return React3.createElement("p", { ...rest, className }, renderedChildren);
+      return React5.createElement("p", { ...rest, className }, renderedChildren);
     }
     return /* @__PURE__ */ jsx("p", { className: "markdown-paragraph", children: renderedChildren });
   }
-  if (React3.isValidElement(baseElement)) {
+  if (React5.isValidElement(baseElement)) {
     return baseElement;
   }
   return /* @__PURE__ */ jsx("p", { className: "markdown-paragraph", children: renderInlineNodes(block.payload.inline ?? [], inlineComponents) });
 });
 ParagraphBlockView.displayName = "ParagraphBlockView";
-var BlockquoteBlockView = React3.memo(({ store, blockId, registry }) => {
+var BlockquoteBlockView = React5.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const block = node?.block;
   const childIds = useRendererChildren(store, blockId);
@@ -858,7 +1009,7 @@ var BlockquoteBlockView = React3.memo(({ store, blockId, registry }) => {
             elements.push(htmlNode);
           } else {
             elements.push(
-              React3.createElement("span", {
+              React5.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 */
@@ -876,10 +1027,10 @@ var BlockquoteBlockView = React3.memo(({ store, blockId, registry }) => {
         default: {
           const inline = renderInlineContent(segment.inline, `blockquote-text-inline-${block.id}-${segmentIndex}-`);
           if (inline) {
-            elements.push(/* @__PURE__ */ jsx(React3.Fragment, { children: inline }, `blockquote-inline-${block.id}-${segmentIndex}`));
+            elements.push(/* @__PURE__ */ jsx(React5.Fragment, { children: inline }, `blockquote-inline-${block.id}-${segmentIndex}`));
           } else {
             elements.push(
-              /* @__PURE__ */ jsx(React3.Fragment, { children: renderTextWithBreaks(segment.value, `blockquote-text-${block.id}-${segmentIndex}-`) }, `blockquote-text-${block.id}-${segmentIndex}`)
+              /* @__PURE__ */ jsx(React5.Fragment, { children: renderTextWithBreaks(segment.value, `blockquote-text-${block.id}-${segmentIndex}-`) }, `blockquote-text-${block.id}-${segmentIndex}`)
             );
           }
           break;
@@ -918,7 +1069,7 @@ var BlockquoteBlockView = React3.memo(({ store, blockId, registry }) => {
     return null;
   })();
   const BlockquoteComponent = registry.getBlockComponent("blockquote");
-  const baseElement = React3.createElement(
+  const baseElement = React5.createElement(
     BlockquoteComponent,
     {
       inlines: block.payload.inline ?? [],
@@ -926,13 +1077,13 @@ var BlockquoteBlockView = React3.memo(({ store, blockId, registry }) => {
     },
     renderedContent
   );
-  if (React3.isValidElement(baseElement)) {
+  if (React5.isValidElement(baseElement)) {
     return baseElement;
   }
   return /* @__PURE__ */ jsx("blockquote", { className: "markdown-blockquote", children: renderedContent });
 });
 BlockquoteBlockView.displayName = "BlockquoteBlockView";
-var MixedSegmentView = React3.memo(({ store, nodeId, inlineComponents }) => {
+var MixedSegmentView = React5.memo(({ store, nodeId, inlineComponents }) => {
   const node = useRendererNode(store, nodeId);
   if (!node) return null;
   switch (node.type) {
@@ -960,7 +1111,7 @@ var MixedSegmentView = React3.memo(({ store, nodeId, inlineComponents }) => {
         return rendered;
       }
       if (!html) return null;
-      return React3.createElement("span", {
+      return React5.createElement("span", {
         className: "markdown-inline-html",
         /* biome-ignore lint/security/noDangerouslySetInnerHtml: html is sanitized upstream before reaching the renderer */
         dangerouslySetInnerHTML: { __html: html }
@@ -985,19 +1136,19 @@ var MixedSegmentView = React3.memo(({ store, nodeId, inlineComponents }) => {
   }
 });
 MixedSegmentView.displayName = "MixedSegmentView";
-var HtmlBlockView = React3.memo(({ store, blockId, registry }) => {
+var HtmlBlockView = React5.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 = React3.memo(({ store, blockId, registry }) => {
+var MdxBlockView = React5.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 = React3.memo(
+var ListBlockView = React5.memo(
   ({ store, blockId, registry, depth = 0 }) => {
     const node = useRendererNode(store, blockId);
     const block = node?.block;
@@ -1005,10 +1156,36 @@ var ListBlockView = React3.memo(
     const inlineComponents = registry.getInlineComponents();
     const ordered = Boolean(node?.props?.ordered ?? block?.payload.meta?.ordered);
     const Tag = ordered ? "ol" : "ul";
-    const listStyle = React3.useMemo(() => {
-      if (!ordered || childIds.length === 0) return void 0;
+    const listDebugEnabled = isListPatchDebugEnabled();
+    const listItemIds = React5.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]);
+    React5.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 = React5.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;
@@ -1022,24 +1199,34 @@ var ListBlockView = React3.memo(
       return {
         ["--list-indent"]: `calc(${baseIndent} + ${maxDigits}ch)`
       };
-    }, [ordered, childIds, store, depth]);
-    return /* @__PURE__ */ jsx(Tag, { className: `markdown-list ${ordered ? "ordered" : "unordered"}`, "data-list-depth": depth, style: listStyle, children: childIds.map((childId, index) => /* @__PURE__ */ jsx(
-      ListItemView,
+    }, [ordered, listItemIds, store, depth]);
+    if (listItemIds.length === 0) return null;
+    return /* @__PURE__ */ 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__ */ jsx(
+          ListItemView,
+          {
+            store,
+            nodeId: childId,
+            inlineComponents,
+            registry,
+            ordered,
+            index,
+            depth
+          },
+          childId
+        ))
+      }
+    );
   }
 );
 ListBlockView.displayName = "ListBlockView";
-var ListItemView = React3.memo(({ store, nodeId, inlineComponents, registry, ordered, index, depth }) => {
+var ListItemView = React5.memo(({ store, nodeId, inlineComponents, registry, ordered, index, depth }) => {
   const node = useRendererNode(store, nodeId);
   const childIds = useRendererChildren(store, nodeId);
   const inline = node?.props?.inline ?? [];
@@ -1052,7 +1239,9 @@ var ListItemView = React3.memo(({ store, nodeId, inlineComponents, registry, ord
   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] = React3.useMemo(() => {
+  const listDebugEnabled = isListPatchDebugEnabled();
+  const inlineLength = inline.length;
+  const [segmentChildIds, contentChildIds] = React5.useMemo(() => {
     const segments = [];
     const structural = [];
     for (const childId of childIds) {
@@ -1066,16 +1255,16 @@ var ListItemView = React3.memo(({ store, nodeId, inlineComponents, registry, ord
     }
     return [segments, structural];
   }, [childIds, store]);
-  const segmentElements = React3.useMemo(() => {
+  const segmentElements = React5.useMemo(() => {
     return segmentChildIds.map((childId) => /* @__PURE__ */ jsx(MixedSegmentView, { store, nodeId: childId, inlineComponents }, childId));
   }, [segmentChildIds, store, inlineComponents]);
-  const primaryContent = React3.useMemo(() => {
+  const primaryContent = React5.useMemo(() => {
     if (segmentChildIds.length > 0) {
       return segmentElements;
     }
     return renderInlineNodes(inline, inlineComponents);
   }, [segmentChildIds, segmentElements, inline, inlineComponents]);
-  const trailingChildren = React3.useMemo(() => {
+  const trailingChildren = React5.useMemo(() => {
     return contentChildIds.map((childId) => {
       const childNode = store.getNode(childId);
       if (!childNode) return null;
@@ -1093,22 +1282,67 @@ var ListItemView = React3.memo(({ store, nodeId, inlineComponents, registry, ord
   }, [contentChildIds, store, inlineComponents, registry, depth]);
   const filteredChildren = trailingChildren.filter((child) => Boolean(child));
   const hasChildren = filteredChildren.length > 0;
-  return /* @__PURE__ */ jsxs("li", { className: `markdown-list-item${isTask ? " markdown-list-item-task" : ""}`, "data-counter-text": counterText, "data-list-depth": depth, children: [
-    isTask ? /* @__PURE__ */ jsxs("div", { className: "markdown-task", children: [
-      /* @__PURE__ */ jsx("input", { type: "checkbox", className: "markdown-task-checkbox", checked: isChecked, readOnly: true, disabled: true, tabIndex: -1, "aria-checked": isChecked }),
-      /* @__PURE__ */ jsx("span", { className: "markdown-task-content", children: primaryContent })
-    ] }) : primaryContent,
-    hasChildren ? /* @__PURE__ */ jsx("div", { className: "markdown-list-item-children", children: filteredChildren }) : null
-  ] });
+  React5.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__ */ 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__ */ jsxs("div", { className: "markdown-task", children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", className: "markdown-task-checkbox", checked: isChecked, readOnly: true, disabled: true, tabIndex: -1, "aria-checked": isChecked }),
+          /* @__PURE__ */ jsx("span", { className: "markdown-task-content", children: primaryContent })
+        ] }) : primaryContent,
+        hasChildren ? /* @__PURE__ */ jsx("div", { className: "markdown-list-item-children", children: filteredChildren }) : null
+      ]
+    }
+  );
 });
 ListItemView.displayName = "ListItemView";
-var TableBlockView = React3.memo(({ store, blockId, registry }) => {
+var TableBlockView = React5.memo(({ store, blockId, registry }) => {
   const tableElements = registry.getTableElements();
   const childIds = useRendererChildren(store, blockId);
   return /* @__PURE__ */ jsx(tableElements.Table, { className: "markdown-table w-full caption-bottom text-base", children: childIds.map((sectionId) => /* @__PURE__ */ jsx(TableSectionView, { store, nodeId: sectionId, registry }, sectionId)) });
 });
 TableBlockView.displayName = "TableBlockView";
-var TableSectionView = React3.memo(({ store, nodeId, registry }) => {
+var TableSectionView = React5.memo(({ store, nodeId, registry }) => {
   const node = useRendererNode(store, nodeId);
   if (!node) return null;
   const tableElements = registry.getTableElements();
@@ -1123,13 +1357,13 @@ var TableSectionView = React3.memo(({ store, nodeId, registry }) => {
   return null;
 });
 TableSectionView.displayName = "TableSectionView";
-var TableRowView = React3.memo(({ store, nodeId, registry }) => {
+var TableRowView = React5.memo(({ store, nodeId, registry }) => {
   const tableElements = registry.getTableElements();
   const cellIds = useRendererChildren(store, nodeId);
   return /* @__PURE__ */ jsx(tableElements.Tr, { children: cellIds.map((cellId) => /* @__PURE__ */ jsx(TableCellView, { store, nodeId: cellId, registry }, cellId)) });
 });
 TableRowView.displayName = "TableRowView";
-var TableCellView = React3.memo(({ store, nodeId, registry }) => {
+var TableCellView = React5.memo(({ store, nodeId, registry }) => {
   const node = useRendererNode(store, nodeId);
   const inlineComponents = registry.getInlineComponents();
   const tableElements = registry.getTableElements();
@@ -1142,13 +1376,19 @@ var TableCellView = React3.memo(({ store, nodeId, registry }) => {
   return /* @__PURE__ */ jsx(Tag, { ...alignProps, children: content });
 });
 TableCellView.displayName = "TableCellView";
-var CodeBlockView = React3.memo(({ store, blockId, registry }) => {
+var CodeBlockView = React5.memo(({ store, blockId, registry }) => {
   const node = useRendererNode(store, blockId);
   const childIds = useRendererChildren(store, blockId);
   const CodeComponent = registry.getBlockComponent("code");
+  const deferredConfig = React5.useContext(DeferredRenderContext);
+  const deferredRef = React5.useRef(null);
+  const shouldRenderDeferred = useDeferredRender(
+    deferredRef,
+    deferredConfig ? { ...deferredConfig, enabled: true } : { enabled: false }
+  );
   if (!node || !node.block) return null;
   const nodeVersion = node.version;
-  const lines = React3.useMemo(() => {
+  const lines = React5.useMemo(() => {
     const seenIds = /* @__PURE__ */ new Set();
     const seenIndices = /* @__PURE__ */ new Set();
     const deduped = [];
@@ -1158,6 +1398,7 @@ var CodeBlockView = React3.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,
@@ -1168,7 +1409,7 @@ var CodeBlockView = React3.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;
@@ -1177,9 +1418,93 @@ var CodeBlockView = React3.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 = React3.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 = React5.useRef(null);
+  const rafRef = React5.useRef(null);
+  const idleRef = React5.useRef(null);
+  React5.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 = React5.useMemo(() => {
     if (!shouldVirtualize && node.block?.payload.highlightedHtml) {
       return node.block.payload.highlightedHtml;
     }
@@ -1210,11 +1535,19 @@ var CodeBlockView = React3.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__ */ jsx("pre", { className: codeFrameClass, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("pre", { className: codeFrameClass, ...codeMetricsAttrs, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref: containerRef,
@@ -1228,14 +1561,22 @@ var CodeBlockView = React3.memo(({ store, blockId, registry }) => {
         ]
       }
     ) });
-  })() : /* @__PURE__ */ jsx("pre", { className: codeFrameClass, children: rendered });
+  })() : /* @__PURE__ */ 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 = stripCodeFence(raw);
     const code = fenced.hadFence ? fenced.code : raw;
-    return React3.createElement(MermaidComponent, {
+    if (deferredConfig) {
+      return /* @__PURE__ */ jsx("div", { ref: deferredRef, children: shouldRenderDeferred ? React5.createElement(MermaidComponent, {
+        code,
+        renderCode: codeView,
+        meta: node.block.payload.meta,
+        isFinalized: node.block.isFinalized
+      }) : codeView });
+    }
+    return React5.createElement(MermaidComponent, {
       code,
       renderCode: codeView,
       meta: node.block.payload.meta,