@stream-mdx/react 0.4.0 → 0.5.0

package/dist/mdx-client.cjs

@@ -72,7 +72,7 @@ var MDXClient = class {
     if (block.type !== "mdx") {
       throw new Error("Block is not MDX type");
     }
-    const cacheKey = block.id;
+    const cacheKey = `${block.id}\0${block.payload.raw ?? ""}`;
     const cachedPromise = this.cache.get(cacheKey);
     if (cachedPromise) {
       return cachedPromise;

package/dist/mdx-client.mjs

@@ -34,7 +34,7 @@ var MDXClient = class {
     if (block.type !== "mdx") {
       throw new Error("Block is not MDX type");
     }
-    const cacheKey = block.id;
+    const cacheKey = `${block.id}\0${block.payload.raw ?? ""}`;
     const cachedPromise = this.cache.get(cacheKey);
     if (cachedPromise) {
       return cachedPromise;

package/dist/mdx-coordinator.cjs

@@ -71,7 +71,7 @@ var MDXClient = class {
     if (block.type !== "mdx") {
       throw new Error("Block is not MDX type");
     }
-    const cacheKey = block.id;
+    const cacheKey = `${block.id}\0${block.payload.raw ?? ""}`;
     const cachedPromise = this.cache.get(cacheKey);
     if (cachedPromise) {
       return cachedPromise;
@@ -399,13 +399,14 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
   const mode = options?.mode ?? "server";
   const [compiledMap, setCompiledMap] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
   const blockSignatureRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const failedSignatureRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const applyCompiledRef = (0, import_react2.useCallback)(
     (block, compiledId) => {
       if (mode === "worker") {
         return;
       }
       if (options?.workerClient) {
-        options.workerClient.setMdxCompiled(block.id, compiledId);
+        options.workerClient.setMdxCompiled(block.id, compiledId, block.payload.raw ?? "");
         return;
       }
       const store = options?.store;
@@ -416,6 +417,9 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
       const index = currentBlocks.findIndex((candidate) => candidate.id === block.id);
       if (index === -1) return;
       const current = currentBlocks[index];
+      if ((current.payload.raw ?? "") !== (block.payload.raw ?? "")) {
+        return;
+      }
       if (current.payload.compiledMdxRef?.id === compiledId) {
         return;
       }
@@ -445,7 +449,13 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
     if (mode === "worker") {
       return;
     }
-    const targets = blocks.filter((b) => b.type === "mdx" && b.isFinalized && !b.payload.compiledMdxRef && !compiledMap.has(b.id));
+    const targets = blocks.filter((b) => {
+      if (b.type !== "mdx" || !b.isFinalized || b.payload.compiledMdxRef || compiledMap.has(b.id)) {
+        return false;
+      }
+      const raw = b.payload.raw ?? "";
+      return failedSignatureRef.current.get(b.id) !== raw;
+    });
     if (targets.length === 0) return;
     let cancelled = false;
     (async () => {
@@ -464,22 +474,29 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
             next.set(block.id, compiled.id);
             return next;
           });
+          failedSignatureRef.current.delete(block.id);
           applyCompiledRef(block, compiled.id);
         } catch (e) {
           console.warn("MDX compile failed for block", block.id, e);
+          failedSignatureRef.current.set(block.id, block.payload.raw ?? "");
           if (options?.workerClient) {
-            options.workerClient.setMdxError(block.id, e instanceof Error ? e.message : String(e));
+            options.workerClient.setMdxError(block.id, e instanceof Error ? e.message : String(e), block.payload.raw ?? "");
           } else if (options?.store) {
+            const currentBlocks = options.store.getBlocks();
+            const current = currentBlocks.find((candidate) => candidate.id === block.id);
+            if (!current || (current.payload.raw ?? "") !== (block.payload.raw ?? "")) {
+              continue;
+            }
             options.store.applyPatches([
               {
                 op: "setProps",
                 at: { blockId: block.id, nodeId: block.id },
                 props: {
                   block: {
-                    ...block,
+                    ...current,
                     payload: {
-                      ...block.payload,
-                      meta: { ...block.payload.meta ?? {}, mdxStatus: "error", mdxError: e instanceof Error ? e.message : String(e) }
+                      ...current.payload,
+                      meta: { ...current.payload.meta ?? {}, mdxStatus: "error", mdxError: e instanceof Error ? e.message : String(e) }
                     }
                   }
                 }
@@ -512,6 +529,7 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
         const currentSignature = candidate.payload.raw ?? "";
         if (previousSignature !== void 0 && previousSignature !== currentSignature) {
           next.delete(blockId);
+          failedSignatureRef.current.delete(blockId);
           mutated = true;
         }
       }
@@ -521,6 +539,9 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
     for (const block of blocks) {
       if (block.type === "mdx") {
         signatureMap.set(block.id, block.payload.raw ?? "");
+        if (!block.isFinalized || block.payload.compiledMdxRef) {
+          failedSignatureRef.current.delete(block.id);
+        }
       }
     }
     blockSignatureRef.current = signatureMap;

package/dist/mdx-coordinator.d.cts

@@ -8,8 +8,8 @@ import { RendererStore } from './renderer/store.cjs';
  * - Returns a derived blocks array with `compiledMdxRef` populated
  */
 interface MdxWorkerClientLike {
-    setMdxCompiled(blockId: string, compiledId: string): void;
-    setMdxError(blockId: string, message: string): void;
+    setMdxCompiled(blockId: string, compiledId: string, rawSignature: string): void;
+    setMdxError(blockId: string, message: string, rawSignature: string): void;
 }
 interface MdxCoordinatorOptions {
     workerClient?: MdxWorkerClientLike;

package/dist/mdx-coordinator.d.ts

@@ -8,8 +8,8 @@ import { RendererStore } from './renderer/store.js';
  * - Returns a derived blocks array with `compiledMdxRef` populated
  */
 interface MdxWorkerClientLike {
-    setMdxCompiled(blockId: string, compiledId: string): void;
-    setMdxError(blockId: string, message: string): void;
+    setMdxCompiled(blockId: string, compiledId: string, rawSignature: string): void;
+    setMdxError(blockId: string, message: string, rawSignature: string): void;
 }
 interface MdxCoordinatorOptions {
     workerClient?: MdxWorkerClientLike;

package/dist/mdx-coordinator.mjs

@@ -38,7 +38,7 @@ var MDXClient = class {
     if (block.type !== "mdx") {
       throw new Error("Block is not MDX type");
     }
-    const cacheKey = block.id;
+    const cacheKey = `${block.id}\0${block.payload.raw ?? ""}`;
     const cachedPromise = this.cache.get(cacheKey);
     if (cachedPromise) {
       return cachedPromise;
@@ -366,13 +366,14 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
   const mode = options?.mode ?? "server";
   const [compiledMap, setCompiledMap] = useState(/* @__PURE__ */ new Map());
   const blockSignatureRef = useRef(/* @__PURE__ */ new Map());
+  const failedSignatureRef = useRef(/* @__PURE__ */ new Map());
   const applyCompiledRef = useCallback(
     (block, compiledId) => {
       if (mode === "worker") {
         return;
       }
       if (options?.workerClient) {
-        options.workerClient.setMdxCompiled(block.id, compiledId);
+        options.workerClient.setMdxCompiled(block.id, compiledId, block.payload.raw ?? "");
         return;
       }
       const store = options?.store;
@@ -383,6 +384,9 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
       const index = currentBlocks.findIndex((candidate) => candidate.id === block.id);
       if (index === -1) return;
       const current = currentBlocks[index];
+      if ((current.payload.raw ?? "") !== (block.payload.raw ?? "")) {
+        return;
+      }
       if (current.payload.compiledMdxRef?.id === compiledId) {
         return;
       }
@@ -412,7 +416,13 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
     if (mode === "worker") {
       return;
     }
-    const targets = blocks.filter((b) => b.type === "mdx" && b.isFinalized && !b.payload.compiledMdxRef && !compiledMap.has(b.id));
+    const targets = blocks.filter((b) => {
+      if (b.type !== "mdx" || !b.isFinalized || b.payload.compiledMdxRef || compiledMap.has(b.id)) {
+        return false;
+      }
+      const raw = b.payload.raw ?? "";
+      return failedSignatureRef.current.get(b.id) !== raw;
+    });
     if (targets.length === 0) return;
     let cancelled = false;
     (async () => {
@@ -431,22 +441,29 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
             next.set(block.id, compiled.id);
             return next;
           });
+          failedSignatureRef.current.delete(block.id);
           applyCompiledRef(block, compiled.id);
         } catch (e) {
           console.warn("MDX compile failed for block", block.id, e);
+          failedSignatureRef.current.set(block.id, block.payload.raw ?? "");
           if (options?.workerClient) {
-            options.workerClient.setMdxError(block.id, e instanceof Error ? e.message : String(e));
+            options.workerClient.setMdxError(block.id, e instanceof Error ? e.message : String(e), block.payload.raw ?? "");
           } else if (options?.store) {
+            const currentBlocks = options.store.getBlocks();
+            const current = currentBlocks.find((candidate) => candidate.id === block.id);
+            if (!current || (current.payload.raw ?? "") !== (block.payload.raw ?? "")) {
+              continue;
+            }
             options.store.applyPatches([
               {
                 op: "setProps",
                 at: { blockId: block.id, nodeId: block.id },
                 props: {
                   block: {
-                    ...block,
+                    ...current,
                     payload: {
-                      ...block.payload,
-                      meta: { ...block.payload.meta ?? {}, mdxStatus: "error", mdxError: e instanceof Error ? e.message : String(e) }
+                      ...current.payload,
+                      meta: { ...current.payload.meta ?? {}, mdxStatus: "error", mdxError: e instanceof Error ? e.message : String(e) }
                     }
                   }
                 }
@@ -479,6 +496,7 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
         const currentSignature = candidate.payload.raw ?? "";
         if (previousSignature !== void 0 && previousSignature !== currentSignature) {
           next.delete(blockId);
+          failedSignatureRef.current.delete(blockId);
           mutated = true;
         }
       }
@@ -488,6 +506,9 @@ function useMdxCoordinator(blocks, compileEndpoint, options) {
     for (const block of blocks) {
       if (block.type === "mdx") {
         signatureMap.set(block.id, block.payload.raw ?? "");
+        if (!block.isFinalized || block.payload.compiledMdxRef) {
+          failedSignatureRef.current.delete(block.id);
+        }
       }
     }
     blockSignatureRef.current = signatureMap;

package/dist/renderer/node-views.cjs

@@ -521,7 +521,11 @@ var defaultInlineComponents = {
     const n = number ?? "?";
     const href = number ? `#fn:${n}` : void 0;
     const id = number ? `fnref:${n}` : void 0;
-    return import_react3.default.createElement("sup", { className: "footnote-ref" }, import_react3.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, style: { color: "var(--foreground)", textDecoration: "underline" } }, String(n))
+    );
   }
 };
 function renderParagraphMixedSegments(segments, inlineComponents, inlineHtmlRenderers) {
@@ -729,6 +733,7 @@ var DeferredRenderContext = import_react6.default.createContext(null);
 
 // src/renderer/store.ts
 var import_core3 = require("@stream-mdx/core");
+var import_patch_batching = require("@stream-mdx/core/perf/patch-batching");
 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));
@@ -1207,8 +1212,10 @@ var ListBlockView = import_react8.default.memo(
         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;
+    const { listStyle, markerDigits } = import_react8.default.useMemo(() => {
+      if (!ordered || listItemIds.length === 0) {
+        return { listStyle: void 0, markerDigits: 1 };
+      }
       let maxDigits = 1;
       listItemIds.forEach((childId, index) => {
         const childNode = store.getNode(childId);
@@ -1220,9 +1227,14 @@ var ListBlockView = import_react8.default.memo(
         const digits = digitMatch ? digitMatch.length : text.length;
         if (digits > maxDigits) maxDigits = digits;
       });
-      const baseIndent = depth === 0 ? "2.5rem" : depth === 1 ? "2rem" : "1.5rem";
+      const baseIndent = depth === 0 ? "2rem" : depth === 1 ? "1.75rem" : "1.5rem";
+      const extraDigits = Math.max(0, maxDigits - 1);
       return {
-        ["--list-indent"]: `calc(${baseIndent} + ${maxDigits}ch)`
+        markerDigits: maxDigits,
+        listStyle: {
+          ["--list-indent"]: extraDigits > 0 ? `calc(${baseIndent} + ${extraDigits}ch)` : baseIndent,
+          ["--list-marker-digits"]: String(maxDigits)
+        }
       };
     }, [ordered, listItemIds, store, depth]);
     if (listItemIds.length === 0) return null;
@@ -1231,6 +1243,7 @@ var ListBlockView = import_react8.default.memo(
       {
         className: `markdown-list ${ordered ? "ordered" : "unordered"}`,
         "data-list-depth": depth,
+        "data-marker-digits": ordered ? markerDigits : void 0,
         "data-list-id": listDebugEnabled ? blockId : void 0,
         style: listStyle,
         children: listItemIds.map((childId, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1412,6 +1425,7 @@ var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) =>
     deferredConfig ? { ...deferredConfig, enabled: true } : { enabled: false }
   );
   if (!node || !node.block) return null;
+  const blockIsFinalized = node.block.isFinalized;
   const nodeVersion = node.version;
   const lines = import_react8.default.useMemo(() => {
     const seenIds = /* @__PURE__ */ new Set();
@@ -1442,13 +1456,25 @@ var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) =>
   const lang = typeof node.props?.lang === "string" ? node.props?.lang : node.block.payload.meta?.lang;
   const preAttrs = node.props?.preAttrs ?? void 0;
   const codeAttrs = node.props?.codeAttrs ?? void 0;
+  const blockMeta = node.block.payload.meta ?? void 0;
+  const lazyEnabled = Boolean(blockMeta?.lazyTokenization);
+  const lazyTokenizedUntil = typeof blockMeta?.lazyTokenizedUntil === "number" ? blockMeta.lazyTokenizedUntil : 0;
+  const lazyHighlightedLines = Array.isArray(blockMeta?.highlightedLines) ? blockMeta.highlightedLines.length : 0;
+  const lazyTokenLines = Array.isArray(blockMeta?.tokenLines) ? blockMeta.tokenLines.length : 0;
+  const lazySourceTextLineCount = import_react8.default.useMemo(() => {
+    const raw = typeof node.block?.payload.raw === "string" ? node.block.payload.raw : "";
+    const metaCode = typeof blockMeta?.code === "string" ? blockMeta.code : null;
+    const sourceText = resolveCodeSourceText(raw, metaCode);
+    if (sourceText.length === 0) return 0;
+    return sourceText.split("\n").length;
+  }, [blockMeta, node.block?.payload.raw]);
+  const totalLazyLineCount = Math.max(lines.length, lazyHighlightedLines, lazyTokenLines, lazySourceTextLineCount);
   const virtualizationConfig = DEFAULT_VIRTUALIZED_CODE_CONFIG;
   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 canVirtualize = node.block.isFinalized && !lazyEnabled;
+  const shouldVirtualize = canVirtualize && !virtualizationDisabled && virtualizationConfig.enabled && lines.length >= virtualizationConfig.virtualizeThreshold;
   const virtualization = useVirtualizedCode(lines, shouldVirtualize ? virtualizationConfig : { ...virtualizationConfig, enabled: false });
   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);
@@ -1529,29 +1555,111 @@ var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) =>
     virtualization.window.startIndex,
     virtualization.window.endIndex
   ]);
-  const highlightedHtml = import_react8.default.useMemo(() => {
-    if (!shouldVirtualize && node.block?.payload.highlightedHtml) {
-      return node.block.payload.highlightedHtml;
+  import_react8.default.useEffect(() => {
+    if (shouldVirtualize || !blockIsFinalized || !lazyEnabled || !highlightRequester) return;
+    if (totalLazyLineCount <= 0 || lazyTokenizedUntil >= totalLazyLineCount) return;
+    const nextRange = {
+      visibleStart: 0,
+      visibleEnd: totalLazyLineCount,
+      prefetchStart: 0,
+      prefetchEnd: totalLazyLineCount,
+      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);
+    }
+    const requestFullHighlight = () => {
+      highlightRequester({
+        blockId,
+        startLine: 0,
+        endLine: totalLazyLineCount,
+        priority: "visible",
+        reason: "finalize-full"
+      });
+      rafRef.current = null;
+    };
+    if (typeof requestAnimationFrame === "function") {
+      rafRef.current = requestAnimationFrame(requestFullHighlight);
+    } else {
+      requestFullHighlight();
     }
+  }, [blockId, blockIsFinalized, highlightRequester, lazyEnabled, lazyTokenizedUntil, shouldVirtualize, totalLazyLineCount]);
+  const highlightedHtml = import_react8.default.useMemo(() => {
+    const blockHtml = node.block?.payload.highlightedHtml ?? "";
+    const raw = typeof node.block?.payload.raw === "string" ? node.block.payload.raw : "";
+    const metaCode = typeof node.block?.payload.meta?.code === "string" ? (node.block?.payload.meta).code : null;
+    const sourceText = resolveCodeSourceText(raw, metaCode);
+    const sourceEndsWithNewline = sourceText.endsWith("\n");
+    const sourceLines = sourceText.length > 0 ? sourceText.split("\n") : [];
+    const rawFallbackLines = buildCodeFallbackLines(raw);
+    const deterministicWrapperAttrs = (0, import_core4.getDefaultCodeWrapperAttributes)(lang);
+    const composedPreAttrs = deterministicWrapperAttrs.preAttrs;
+    const composedCodeAttrs = deterministicWrapperAttrs.codeAttrs;
+    const shouldAppendTerminalNewline = (renderedLines) => {
+      if (!sourceEndsWithNewline || renderedLines.length === 0 || lines.length === 0) {
+        return false;
+      }
+      const lastRendered = renderedLines[renderedLines.length - 1];
+      const lastKnown = lines[lines.length - 1];
+      if (!lastRendered || !lastKnown || lastRendered.index !== lastKnown.index || lastRendered.text === "") {
+        return false;
+      }
+      const expectedRenderedLineCount = Math.max(0, sourceLines.length - 1);
+      const expectedLastRenderedLine = sourceLines.length >= 2 ? sourceLines[sourceLines.length - 2] ?? "" : "";
+      return renderedLines.length === expectedRenderedLineCount && lastRendered.text === expectedLastRenderedLine;
+    };
     if (lines.length > 0) {
       const hasLineHtml = lines.some((line) => typeof line.html === "string" && line.html.length > 0);
-      if (!hasLineHtml && node.block?.payload.highlightedHtml) {
-        return node.block.payload.highlightedHtml;
+      if (!hasLineHtml && blockHtml) {
+        return blockHtml;
       }
       if (shouldVirtualize) {
-        return composeHighlightedHtml(virtualization.window.visibleLines, preAttrs, codeAttrs);
+        return composeHighlightedHtml(
+          virtualization.window.visibleLines,
+          composedPreAttrs,
+          composedCodeAttrs,
+          shouldAppendTerminalNewline(virtualization.window.visibleLines)
+        );
       }
-      return composeHighlightedHtml(lines, preAttrs, codeAttrs);
+      return composeHighlightedHtml(lines, composedPreAttrs, composedCodeAttrs, shouldAppendTerminalNewline(lines));
+    }
+    if (!shouldVirtualize && blockHtml) {
+      const hasHighlightedLines = blockHtml.includes('class="line"');
+      if (!hasHighlightedLines && rawFallbackLines.length > 0) {
+        return composeHighlightedHtml(
+          rawFallbackLines,
+          composedPreAttrs,
+          composedCodeAttrs,
+          sourceEndsWithNewline && rawFallbackLines[rawFallbackLines.length - 1]?.text !== ""
+        );
+      }
+      return blockHtml;
     }
-    const blockHtml = node.block?.payload.highlightedHtml ?? "";
     if (blockHtml?.trim().match(/^```[\w-]*\s*$/)) {
-      const raw = node.block?.payload.raw ?? "";
-      if (raw.trim().length > 0) {
-        return composeHighlightedHtml([{ index: 0, text: raw, html: null, id: "temp" }], preAttrs, codeAttrs);
+      if (rawFallbackLines.length > 0) {
+        return composeHighlightedHtml(
+          rawFallbackLines,
+          composedPreAttrs,
+          composedCodeAttrs,
+          sourceEndsWithNewline && rawFallbackLines[rawFallbackLines.length - 1]?.text !== ""
+        );
       }
     }
+    if (!blockHtml && rawFallbackLines.length > 0) {
+      return composeHighlightedHtml(
+        rawFallbackLines,
+        composedPreAttrs,
+        composedCodeAttrs,
+        sourceEndsWithNewline && rawFallbackLines[rawFallbackLines.length - 1]?.text !== ""
+      );
+    }
     return blockHtml;
-  }, [shouldVirtualize, node.block?.payload.highlightedHtml, lines, preAttrs, codeAttrs, virtualization.window.visibleLines, node.block?.payload.raw]);
+  }, [blockIsFinalized, shouldVirtualize, node.block?.payload.highlightedHtml, node.block?.payload.meta, lines, lang, virtualization.window.visibleLines, node.block?.payload.raw]);
   const rendered = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     CodeComponent,
     {
@@ -1563,13 +1671,19 @@ var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) =>
       codeAttrs
     }
   );
+  const effectiveLineCount = import_react8.default.useMemo(() => {
+    if (lines.length > 0) {
+      return lines.length;
+    }
+    return 1;
+  }, [lines.length]);
   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-total-lines": String(effectiveLineCount),
+    "data-code-mounted-lines": String(shouldVirtualize ? virtualization.window.mountedLines : effectiveLineCount),
     "data-code-window-size": String(virtualization.config.windowSize)
   };
   const codeView = shouldVirtualize ? (() => {
@@ -1615,21 +1729,152 @@ var CodeBlockView = import_react8.default.memo(({ store, blockId, registry }) =>
   return codeView;
 });
 CodeBlockView.displayName = "CodeBlockView";
-function composeHighlightedHtml(lines, preAttrs, codeAttrs) {
+function composeHighlightedHtml(lines, preAttrs, codeAttrs, appendTerminalNewline = false) {
   const lineMarkup = lines.map((line) => {
-    const content = line.html ?? escapeHtml(line.text);
+    const content = line.html ?? renderTokenLineHtml(line.tokens) ?? escapeHtml(line.text);
     const dataLine = Number.isFinite(line.index) ? ` data-line="${line.index + 1}"` : "";
     return `<span class="line"${dataLine}>${content}</span>`;
   }).join("\n");
   const preAttr = attrsToString(preAttrs);
   const codeAttr = attrsToString(codeAttrs);
-  return `<pre${preAttr}><code${codeAttr}>${lineMarkup}
-</code></pre>`;
+  return `<pre${preAttr}><code${codeAttr}>${lineMarkup}${appendTerminalNewline ? "\n" : ""}</code></pre>`;
+}
+var TOKEN_FONT_STYLE_ITALIC = 1;
+var TOKEN_FONT_STYLE_BOLD = 2;
+var TOKEN_FONT_STYLE_UNDERLINE = 4;
+var TOKEN_FONT_STYLE_STRIKETHROUGH = 8;
+function renderTokenLineHtml(tokens) {
+  if (!tokens || !Array.isArray(tokens.spans)) {
+    return null;
+  }
+  return mergeRenderableTokenSpans(tokens.spans).map((span) => renderTokenSpanHtml(span)).join("");
+}
+function renderTokenSpanHtml(span) {
+  const dark = span.v?.dark;
+  const light = span.v?.light;
+  const single = span.s;
+  const styles = [];
+  if (dark?.fg) {
+    styles.push(`--shiki-dark:${dark.fg}`);
+  }
+  if (light?.fg) {
+    styles.push(`--shiki-light:${light.fg}`);
+  }
+  if (!light?.fg && !dark?.fg && single?.fg) {
+    styles.push(`color:${single.fg}`);
+  }
+  const fontStyle = light?.fs ?? dark?.fs ?? single?.fs;
+  if (typeof fontStyle === "number" && fontStyle > 0) {
+    if (fontStyle & TOKEN_FONT_STYLE_ITALIC) {
+      styles.push("font-style: italic");
+    }
+    if (fontStyle & TOKEN_FONT_STYLE_BOLD) {
+      styles.push("font-weight: bold");
+    }
+    const decorations = [];
+    if (fontStyle & TOKEN_FONT_STYLE_UNDERLINE) {
+      decorations.push("underline");
+    }
+    if (fontStyle & TOKEN_FONT_STYLE_STRIKETHROUGH) {
+      decorations.push("line-through");
+    }
+    if (decorations.length > 0) {
+      styles.push(`text-decoration: ${decorations.join(" ")}`);
+    }
+  }
+  const content = escapeHtml(span.t ?? "");
+  if (styles.length === 0) {
+    return content;
+  }
+  return `<span style="${styles.join(";")}">${content}</span>`;
+}
+function mergeRenderableTokenSpans(spans) {
+  if (spans.length <= 1) {
+    return spans.slice();
+  }
+  const merged = [];
+  let pendingWhitespace = "";
+  for (const span of spans) {
+    const text = typeof span.t === "string" ? span.t : "";
+    if (/^[\t ]+$/.test(text)) {
+      pendingWhitespace += text;
+      continue;
+    }
+    const nextSpan = pendingWhitespace ? { ...span, t: `${pendingWhitespace}${text}` } : span;
+    pendingWhitespace = "";
+    const previous = merged[merged.length - 1];
+    if (previous && sameTokenSpanStyle(previous, nextSpan)) {
+      previous.t += nextSpan.t;
+    } else {
+      merged.push({ ...nextSpan });
+    }
+  }
+  if (pendingWhitespace) {
+    const previous = merged[merged.length - 1];
+    if (previous) {
+      previous.t += pendingWhitespace;
+    } else {
+      merged.push({ t: pendingWhitespace });
+    }
+  }
+  return merged;
+}
+function sameTokenSpanStyle(a, b) {
+  const variantKeys = /* @__PURE__ */ new Set([
+    ...Object.keys(a.v ?? {}),
+    ...Object.keys(b.v ?? {})
+  ]);
+  for (const key of variantKeys) {
+    const aStyle = a.v?.[key];
+    const bStyle = b.v?.[key];
+    if ((aStyle?.fg ?? null) !== (bStyle?.fg ?? null)) return false;
+    if ((aStyle?.bg ?? null) !== (bStyle?.bg ?? null)) return false;
+    if ((aStyle?.fs ?? null) !== (bStyle?.fs ?? null)) return false;
+  }
+  if ((a.s?.fg ?? null) !== (b.s?.fg ?? null)) return false;
+  if ((a.s?.bg ?? null) !== (b.s?.bg ?? null)) return false;
+  if ((a.s?.fs ?? null) !== (b.s?.fs ?? null)) return false;
+  return true;
+}
+function resolveCodeSourceText(raw, metaCode) {
+  if (metaCode !== null) {
+    return metaCode.replace(/\r\n?/g, "\n");
+  }
+  if (!raw) return "";
+  const normalized = raw.replace(/\r\n?/g, "\n");
+  const fenced = (0, import_core4.stripCodeFence)(normalized);
+  return fenced.hadFence ? fenced.code : normalized;
 }
 function attrsToString(attrs) {
   if (!attrs) return "";
   return Object.entries(attrs).map(([key, value]) => ` ${key}="${escapeAttribute(value)}"`).join("");
 }
+function buildCodeFallbackLines(raw) {
+  const normalized = normalizeCodeFallbackRaw(raw);
+  if (normalized.length === 0) {
+    if (/^\s*```[^\n]*\n?\s*$/.test(raw)) {
+      return [{ id: "temp-0", index: 0, text: "", html: null }];
+    }
+    return [];
+  }
+  return normalized.split("\n").map((line, index) => ({
+    id: `temp-${index}`,
+    index,
+    text: line,
+    html: null
+  }));
+}
+function normalizeCodeFallbackRaw(raw) {
+  if (!raw) return "";
+  const normalized = raw.replace(/\r\n?/g, "\n");
+  const fenced = (0, import_core4.stripCodeFence)(normalized);
+  if (!fenced.hadFence) {
+    return normalized.replace(/\n+$/, "");
+  }
+  let code = fenced.code;
+  code = code.replace(/\n+$/, "");
+  return code;
+}
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }

package/dist/renderer/node-views.d.cts

@@ -1,6 +1,8 @@
 import React from 'react';
-import { C as ComponentRegistry } from '../index-D2MYusAM.cjs';
+import { C as ComponentRegistry } from '../index-EaeouYp2.cjs';
 import { RendererStore } from './store.cjs';
+import '../components/bottom-stick-scroll-area.cjs';
+import 'react/jsx-runtime';
 import '@stream-mdx/core';
 
 declare const BlockNodeRenderer: React.FC<{

package/dist/renderer/node-views.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import { C as ComponentRegistry } from '../index-D2MYusAM.js';
+import { C as ComponentRegistry } from '../index-BVhp_pcF.js';
 import { RendererStore } from './store.js';
+import '../components/bottom-stick-scroll-area.js';
+import 'react/jsx-runtime';
 import '@stream-mdx/core';
 
 declare const BlockNodeRenderer: React.FC<{