fix: correct timing of prevContentLength for animate plugin

The previous implementation called resetPrevContentLength() in Block's
function body, but Markdown (which calls processor.runSync synchronously)
renders as a child component — AFTER Block's function body returns. This
meant the animate plugin always saw prevContentLength=0 on every render.

Fix:
- Remove manual resetPrevContentLength() from Block's render body
- Add self-reset inside rehypeAnimate after each run, so sibling blocks
  start clean (depth-first rendering ensures Markdown1 runs before Block2)
- Read getLastRenderCharCount() at the TOP of Block's render body: since
  React renders depth-first, this value is from the PREVIOUS Markdown run
  (exactly the prevContentLength needed for the current render)
- Remove stale useLayoutEffect approach (not needed with depth-first timing)

Author: sleitor

packages/streamdown/index.tsx

@@ -227,14 +227,16 @@ export const Block = memo(
     animatePlugin: animatePluginProp,
     ...props
   }: BlockProps) => {
-    // Track previous content length to prevent re-animation of already-visible content.
-    // When a block's content grows during streaming, only new characters get animated.
+    // Track the HAST character count from the PREVIOUS render pass.
+    // React renders depth-first: this Block's function body runs, returns JSX, then
+    // the child Markdown component runs (processor.runSync synchronously processes
+    // content through rehype). On the current render, getLastRenderCharCount() still
+    // holds the value from the PREVIOUS Markdown run — exactly what we need as
+    // prevContentLength for this render. After Markdown runs, the plugin stores the
+    // new count and self-resets prevContentLength so sibling blocks start clean.
     const prevContentLengthRef = useRef(0);
-
-    // Set prevContentLength on the animate plugin before the synchronous rehype render.
-    // This is safe because React renders synchronously — the rehype pipeline will read
-    // this value during the same synchronous render pass.
     if (animatePluginProp) {
+      prevContentLengthRef.current = animatePluginProp.getLastRenderCharCount();
       animatePluginProp.setPrevContentLength(prevContentLengthRef.current);
     }
 
@@ -245,24 +247,11 @@ export const Block = memo(
         ? normalizeHtmlIndentation(content)
         : content;
 
-    const result = (
+    return (
       <BlockIncompleteContext.Provider value={isIncomplete}>
         <Markdown {...props}>{normalizedContent}</Markdown>
       </BlockIncompleteContext.Provider>
     );
-
-    // Update prev content length after this render using the HAST character count
-    // (not raw markdown length) to match the units used by charCounter in the animate plugin.
-    prevContentLengthRef.current = animatePluginProp
-      ? animatePluginProp.getLastRenderCharCount()
-      : 0;
-
-    // Reset so other blocks don't inherit this block's prevContentLength
-    if (animatePluginProp) {
-      animatePluginProp.resetPrevContentLength();
-    }
-
-    return result;
   },
   (prevProps, nextProps) => {
     // Deep comparison for better memoization

packages/streamdown/lib/animate.ts

@@ -189,6 +189,11 @@ export function createAnimatePlugin(options?: AnimateOptions): AnimatePlugin {
       processTextNode(node, ancestors, config, charCounter)
     );
     config.lastRenderCharCount = charCounter.count;
+    // Self-reset after each run so sibling blocks don't inherit this block's
+    // prevContentLength. With React's depth-first rendering, this executes after
+    // the current block's Markdown renders but before the next sibling block's
+    // Markdown renders — so each block gets exactly its own prevContentLength.
+    config.prevContentLength = 0;
   };
 
   return {