flux-md 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -4,6 +4,58 @@ Notable changes to flux-md. Format based on
 [Keep a Changelog](https://keepachangelog.com/); this project aims to follow
 [Semantic Versioning](https://semver.org/).
 
+## 0.13.0 — 2026-06-04
+
+### Added
+
+- **`FluxClient.setContent(content, { done })` + controlled-string helpers for
+  every binding** — a first-class bridge for UIs that hold a streaming message as
+  a single growing/controlled string prop (rather than a stream). setContent diffs
+  against the last value: a **prefix-extension** appends only the delta (committed
+  blocks stay put); any **divergence** (e.g. a finished message swapped for a
+  re-processed final string) resets and reparses. No hand-rolled diff, no
+  readiness gate. Pass `{ done: true }` / `streaming: false` to finalize. The
+  framework-neutral `setContent` is wrapped by an idiomatic, client-owning helper
+  per framework — React `useFluxMarkdownString`, Vue `useFluxMarkdownString`
+  (composable), Solid `createFluxMarkdownString`, Svelte `fluxMarkdownString`
+  (action) — each SSR-safe (feeds only in the client-only lifecycle hook). Vanilla
+  / `<flux-markdown>` use a caller-owned client + `setContent` directly.
+- **`FluxPool.warm()`** — eagerly initialize one worker (`getDefaultPool().warm()`
+  on app load) so the one-time WASM init is off the first-token critical path; the
+  warm worker is the one the first stream attaches to, so the work isn't wasted.
+- **Custom-component & `sanitize` overrides now apply to the OPEN (streaming)
+  block**, not just settled ones — a design-system renderer (Tailwind classes on
+  `p`/`ul`/`li`, inline `<a>`/`<code>` overrides) stays styled mid-stream instead
+  of only after a block commits. This also closes a gap where a supplied
+  `sanitize` previously bypassed component-rendered blocks; it now runs on every
+  block. The no-`components` path is unchanged (byte-identical `innerHTML`).
+
+### Fixed
+
+- **Worker no longer drops the first chunk(s) under a slow WASM load.** The
+  worker buffered appends but did not gate parser creation on WASM readiness, so
+  an append that arrived before `init()` resolved would call `new FluxParser()`
+  against an uninitialized module — throwing `fluxparser_new of undefined` and
+  silently losing that chunk. Appends now accumulate (and `finalize` defers)
+  until init completes, then drain in order. Surfaced on a fresh Next.js /
+  Turbopack production load, where the worker+WASM fetch is slow enough to lose
+  the race; the fix is bundler-agnostic. The worker's message/readiness state
+  machine was extracted to `worker-core.ts` (dependency-injected, like
+  `FluxPool`'s worker factory) and now has a unit test (`worker-core.test.ts`)
+  covering the gate — buffer-until-ready, drain order, finalize/reset before
+  ready — so the regression can't silently return.
+- **React 19 / Next.js type compatibility.** The shipped source used the global
+  `JSX.Element`, which React 19's `@types/react` removed — a consumer's
+  `next build` type-checks flux-md's source (it ships as `.tsx`) and failed with
+  *"Cannot find namespace 'JSX'"*. Now uses `ReactElement`, which type-checks
+  under `@types/react` 18 **and** 19.
+
+### Docs
+
+- **Next.js (App Router) is now documented and verified** (Turbopack + webpack,
+  Next.js 16, `next dev` and `next build`): add flux-md to `transpilePackages`
+  and use it from a `"use client"` component. See the README's Next.js callout.
+
 ## 0.12.0 — 2026-05-30
 
 ### Added

package/README.md

@@ -16,9 +16,9 @@ flux-md ships as **source** (TypeScript + the compiled WASM). The worker and
 WASM asset are referenced with the **web-standard `new URL(asset,
 import.meta.url)`** pattern, so any bundler with asset-module support resolves
 them: **Vite** (the reference setup), **webpack 5**, **Rollup** (with asset
-modules), and **Parcel**. Next.js (webpack/turbopack) should work but is
-untested — file an issue if it doesn't. It is **browser-only** (it constructs
-Web Workers); it does not run under SSR/RSC. The framework packages — `react`,
+modules), **Parcel**, and **Next.js** (App Router — Turbopack *and* webpack;
+**verified on Next.js 16**, see the [Next.js callout](#nextjs) below). It is
+**browser-only** (it constructs Web Workers); it does not run under SSR/RSC. The framework packages — `react`,
 `vue`, `svelte`, `solid-js` — are all **optional** peer dependencies; you only
 need the one whose binding you import. The core (`flux-md`, `flux-md/client`,
 `flux-md/dom`, `flux-md/element`) needs none.
@@ -37,6 +37,54 @@ need the one whose binding you import. The core (`flux-md`, `flux-md/client`,
 >
 > No other bundler needs this — it's specific to Vite's optimizer.
 
+<a id="nextjs"></a>
+
+> **Next.js (App Router) — two requirements.** Verified on **Next.js 16** with
+> **Turbopack** (the default for both `next dev` and `next build`). The same two
+> requirements apply under webpack. Because flux-md ships TypeScript source:
+>
+> 1. **Transpile the package.** Next does not compile `node_modules` TypeScript
+>    by default — without this, Turbopack errors with *"Unknown module type"* on
+>    `react.tsx`. Add flux-md to `transpilePackages`:
+>
+>    ```ts
+>    // next.config.ts
+>    import type { NextConfig } from "next";
+>    const nextConfig: NextConfig = { transpilePackages: ["flux-md"] };
+>    export default nextConfig;
+>    ```
+>
+> 2. **Use it from a Client Component.** `<FluxMarkdown>` uses React hooks (and
+>    spawns a Web Worker on mount), so it must carry `"use client"` — it can't be
+>    a Server Component. (It is still SSR-safe: on the server it renders an empty
+>    shell and only starts streaming after hydration, so there's no SSR crash —
+>    the constraint is hooks, not the worker.)
+>
+>    ```tsx
+>    "use client";
+>    import { FluxMarkdown } from "flux-md/react";
+>
+>    export default function Answer({ stream }: { stream: AsyncIterable<string> }) {
+>      return <FluxMarkdown stream={stream} />;
+>    }
+>    ```
+>
+>    **Create the `stream` in Client Component code, not in a Server Component.**
+>    A `Response` / `ReadableStream` / `AsyncIterable` isn't serializable, so it
+>    can't be passed as a prop from a Server Component (e.g. `page.tsx`) — that
+>    throws *"Only plain objects can be passed to Client Components."* Pass a
+>    serializable prop (a URL, the chat messages) from the server and open the
+>    stream on the client — e.g. `stream={await fetch("/api/chat")}` from a client
+>    effect, or the `useFluxStream` hook (see [Quick start](#quick-start)).
+>
+> That's it — Turbopack bundles the worker and emits the `.wasm` to
+> `_next/static/media` itself, so no extra asset/loader config is needed (and the
+> Vite `optimizeDeps` workaround above does **not** apply). Both `next dev` and
+> `next build && next start` are verified to spawn the worker, load the WASM, and
+> stream markdown. _Dev tip:_ open the app on `localhost` — Next dev blocks
+> cross-origin dev resources (HMR, chunks) from other hosts (e.g. `127.0.0.1`)
+> unless you add them to `allowedDevOrigins` in `next.config`.
+
 ## Quick start
 
 ```ts
@@ -79,6 +127,38 @@ export function ChatMessage({ stream }: { stream: AsyncIterable<string> }) {
 }
 ```
 
+### Already holding a growing string? — `useFluxMarkdownString`
+
+Many apps keep the streaming message as a **single growing string prop** (it
+re-renders with the full text-so-far each token), not as a stream. Feed that
+string straight in — `useFluxMarkdownString` diffs it for you and forwards only
+the delta, so you don't hand-roll an append/reset bridge:
+
+```tsx
+import { FluxMarkdown, useFluxMarkdownString } from "flux-md/react";
+
+export function ChatMessage({ text, streaming }: { text: string; streaming: boolean }) {
+  const client = useFluxMarkdownString(text, { streaming });
+  return <FluxMarkdown client={client} />;
+}
+```
+
+It handles the two shapes a controlled string takes: a **prefix-extension** (the
+common token-by-token growth) appends only the new suffix; a **divergence** (e.g.
+the finished text swapped for a re-processed final string — bolded numbers,
+wrapped tickers) resets and reparses. Pass `streaming: false` once the content is
+final so the last block commits (a finished code fence then highlights). The
+framework-neutral primitive is **`client.setContent(fullString, { done })`** —
+use it from any binding.
+
+> **Transforming streamed content?** If the enrichment runs **live per token**
+> (e.g. bold every number as it arrives), do it at **render time** via
+> [`components`](#custom-components--overrides) — keep the markdown source
+> append-only so parsing stays incremental. Re-transforming the *whole* string
+> each token (so earlier bytes change) forces `setContent` to reparse every tick
+> (O(n²)); that's what render-time overrides avoid. `setContent`'s reset path is
+> for the **once**-at-the-end reprocess swap, not per-token rewrites.
+
 <details>
 <summary>Full manual control (caller-owned client)</summary>
 
@@ -150,6 +230,12 @@ handle.destroy();
 client.destroy();
 ```
 
+**Already holding a growing string?** There's no framework reactivity to wrap,
+so just call **`client.setContent(fullString, { done })`** instead of the
+`append` loop — it diffs internally (prefix → delta; divergence → reparse) and
+finalizes on `done`. That's the same primitive the React/Vue/Svelte/Solid
+controlled-string helpers wrap; in vanilla you call it directly.
+
 `mountFluxMarkdown(client, container, options?)` returns `{ destroy(), refresh() }`.
 Options: `components`, `sanitize`, `virtualize`, `stickToBottom`, `highlightCode`
 (default true), `batch` (default true — one DOM write per `requestAnimationFrame`).
@@ -208,6 +294,13 @@ defineFluxMarkdown(); // once at bootstrap
 export class Answer { url = "/api/post.md"; }
 ```
 
+**Controlled growing string?** Assign a caller-owned client and drive it with
+`setContent` — `el.client = myClient; myClient.setContent(fullString, { done })`
+— the element subscribes and renders, you own the diffing. (The self-owned
+`markdown` attribute is **one-shot** — it re-parses the whole document on each
+change, so don't point it at a per-token-growing string; use a client +
+`setContent` for that.)
+
 ### Vue 3 — `flux-md/vue`
 
 ```vue
@@ -230,6 +323,20 @@ Props: `client` (required), `components`, `sanitize`, `virtualize`,
 `stickToBottom`. There's also a `useFluxMarkdown` composable returning a
 `container` ref if you'd rather mount into your own element.
 
+**Already holding a growing string?** `useFluxMarkdownString` owns a client and
+diffs the string for you (the Vue analogue of the React hook — see
+[Controlled strings](#already-holding-a-growing-string--usefluxmarkdownstring)):
+
+```vue
+<script setup lang="ts">
+import { FluxMarkdown, useFluxMarkdownString } from "flux-md/vue";
+const props = defineProps<{ text: string; streaming: boolean }>();
+// Pass getters so the composable tracks the live values; it owns + destroys the client.
+const client = useFluxMarkdownString(() => props.text, () => ({ streaming: props.streaming }));
+</script>
+<template><FluxMarkdown :client="client" /></template>
+```
+
 ### Svelte (4 & 5) — `flux-md/svelte`
 
 A Svelte action — works in both v4 and v5, no `.svelte` build step:
@@ -248,6 +355,20 @@ A Svelte action — works in both v4 and v5, no `.svelte` build step:
 <div use:fluxMarkdown={{ client, stickToBottom: true }} />
 ```
 
+**Growing string?** The `fluxMarkdownString` action owns a client and diffs the
+string — `use:fluxMarkdownString={{ content, streaming }}` (it destroys its
+client on `destroy`, so no manual cleanup):
+
+```svelte
+<script lang="ts">
+  import { fluxMarkdownString } from "flux-md/svelte";
+  export let content: string;     // the growing message
+  export let streaming: boolean;  // false once complete → finalizes
+</script>
+
+<div use:fluxMarkdownString={{ content, streaming, stickToBottom: true }} />
+```
+
 ### Solid — `flux-md/solid`
 
 ```tsx
@@ -262,6 +383,19 @@ onCleanup(() => client.destroy());
 <FluxMarkdown client={client} stickToBottom />;
 ```
 
+**Growing string?** `createFluxMarkdownString` owns a client and diffs the string
+(the Solid analogue of the React hook), driving `setContent` from a
+`createEffect` and destroying the client on cleanup:
+
+```tsx
+import { FluxMarkdown, createFluxMarkdownString } from "flux-md/solid";
+
+function Message(props: { text: string; streaming: boolean }) {
+  const client = createFluxMarkdownString(() => props.text, () => ({ streaming: props.streaming }));
+  return <FluxMarkdown client={client} />;
+}
+```
+
 The Solid binding's mount/teardown logic is tested, but its JSX component shell
 has so far only been exercised through a real Solid (`vite-plugin-solid`) build
 in development, not in CI — treat it as the newest of the bindings and file an
@@ -324,6 +458,10 @@ class FluxClient {
     opts?: { signal?: AbortSignal },                // abort to supersede (no finalize)
   ): Promise<void>;
   finalize(): void;                                 // mark stream complete
+  setContent(                                       // drive from a controlled full string
+    full: string,                                   // diffs vs last: prefix → append delta; else reset+reparse
+    opts?: { done?: boolean },                      // done:true → finalize
+  ): void;
   reset(): void;                                    // wipe and reuse
   destroy(): void;                                  // free this stream's parser
   whenReady(): Promise<void>;                       // resolves once WASM loaded; rejects on init failure
@@ -502,11 +640,15 @@ Rules worth knowing:
   channel](#structured-block-data-setblockdata)** (`blockData: true`) and read
   `block.kind.data` (and the typed `props.table` / `heading` / `code` / `math` /
   `list` fields) directly — no HTML re-parsing.
-- **Open (streaming) blocks render via `innerHTML`** — their HTML is still
-  partial, so a tag-level override takes effect the moment the block commits.
+- **Overrides apply to the OPEN (streaming) block too**, not just settled ones —
+  so a design-system renderer (Tailwind classes on `p`/`ul`/`li`, inline
+  `<a>`/`<code>` overrides) stays styled mid-stream. The tail's HTML is always
+  well-formed (the parser speculatively closes it). If a `sanitize` is supplied
+  it runs first, on every block.
 - **No `components` prop ⇒ the original fast path** (`innerHTML`, byte-identical
-  output). The HTML→React conversion only runs for closed blocks when you
-  actually supply overrides, and is memoized per `(block id, html)`.
+  output). The HTML→React conversion runs only when you actually supply
+  overrides, and is memoized per `(block id, html)` so committed blocks don't
+  re-parse as the stream grows.
 - For **code blocks** the built-in highlighter is the default; it is bypassed
   (so your override wins) when you pass `components.CodeBlock`, `components.pre`,
   or `components.code`.
@@ -736,6 +878,16 @@ teardown? Construct your own `new FluxPool(factory, cap)` and pass it to
 **per-page singleton** — don't rely on it in SSR/RSC. For isolation between
 independent feature areas, give each its own `new FluxPool()`.
 
+**Warm the pool to hide WASM init.** The one-time WASM load happens on the first
+worker-bound op, which lands on the first-token critical path. Call
+`getDefaultPool().warm()` on app load / route entry to start it early — the warm
+worker is the one the first stream attaches to, so the init isn't wasted:
+
+```ts
+import { getDefaultPool } from "flux-md";
+useEffect(() => { getDefaultPool().warm(); }, []); // (or your framework's mount hook)
+```
+
 ### Long documents — `virtualize`
 
 For very long documents (hundreds+ of blocks), pass `virtualize` to apply CSS

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flux-md",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Zero-dep streaming markdown for the browser. Rust→WASM core, Web Worker per stream, incremental parse with speculative closure.",
   "type": "module",
   "sideEffects": ["./src/worker.ts", "./src/styles.css"],

package/src/client.ts

@@ -151,6 +151,21 @@ export class FluxPool {
     return new Promise((resolve, reject) => pw.readyWaiters.push({ resolve, reject }));
   }
 
+  /**
+   * Eagerly spin up one worker so WASM init starts BEFORE the first stream —
+   * taking the one-time init off the first-token critical path (e.g. call
+   * `getDefaultPool().warm()` on app load / route entry). Reuses a live worker
+   * if one exists; the warm worker is the one the first stream attaches to (it
+   * has spare capacity), so the work is not wasted. Resolves when that worker has
+   * finished initializing WASM; rejects if init fails fatally. Browser-only (it
+   * constructs a `Worker`).
+   */
+  warm(): Promise<void> {
+    const live = this.workers.filter((w) => !w.failed);
+    const pw = live[0] ?? this.create();
+    return this.whenWorkerReady(pw);
+  }
+
   /** Terminate every worker (test teardown / full shutdown). */
   disposeAll(): void {
     for (const pw of this.workers) {
@@ -286,6 +301,11 @@ export class FluxClient {
   private onError?: (err: { message: string; fatal?: boolean }) => void;
   private onBlock?: (block: Block) => void;
   private attached = true;
+  // Diff baseline for setContent(): the full string fed in so far, and whether
+  // it has been finalized. Cleared by reset()/reattach() (the worker drops the
+  // parser there, so the baseline is stale and the document must be re-fed).
+  private lastContent = "";
+  private contentDone = false;
 
   // Perf
   private appendedBytes = 0;
@@ -446,6 +466,53 @@ export class FluxClient {
     }
   }
 
+  /**
+   * Drive the parser from a CONTROLLED full string instead of manual appends.
+   * Pass the whole document-so-far each time; setContent diffs it against the
+   * last value and does the minimal work:
+   *   - **prefix-extension** (the streaming-growth case) → append only the new
+   *     suffix, so committed blocks stay put and only the active tail re-parses;
+   *   - **any other change** (e.g. a finished stream swapped for a re-processed
+   *     final string) → `reset()` + reparse the whole new string.
+   *
+   * This is the first-class bridge for UIs that hold a streaming message as a
+   * single growing string prop (the common React shape) — no hand-rolled diff,
+   * no readiness gate (appends before WASM is ready are buffered). Pass
+   * `{ done: true }` once the content is final to `finalize()` (idempotent within
+   * a generation; a content change *after* done reopens the stream via a fresh
+   * reparse, since a finalized parser is terminal and can't be appended to).
+   * Drive a given client with `setContent` *or* manual `append()`/`finalize()`,
+   * not both — they share the internal diff baseline.
+   *
+   * v1 note: the non-prefix path is a full reparse, not a partial rewind —
+   * committed blocks are frozen, so there is no truncate-to-offset. For the
+   * common case (append-growth + one end-of-stream swap) that is optimal. A
+   * transform that rewrites *earlier* bytes on every update is an anti-pattern
+   * here (it forces a reparse each tick); do that enrichment at render time via
+   * `components` instead, keeping the source append-only.
+   */
+  setContent(content: string, opts?: { done?: boolean }) {
+    if (content !== this.lastContent) {
+      // Fast path appends the delta into the EXISTING parser — but a parser that
+      // was already finalized ({ done: true }) is terminal: the core drops any
+      // further append. So gate the fast path on !contentDone; reopening a
+      // finalized stream (or any divergence) falls through to reset()+reparse,
+      // which frees the dead parser and rebuilds a fresh one.
+      if (!this.contentDone && content.startsWith(this.lastContent)) {
+        this.append(content.slice(this.lastContent.length));
+      } else {
+        this.reset(); // diverged, or reopening a finalized stream — rebuild
+        this.append(content);
+      }
+      this.lastContent = content;
+      this.contentDone = false;
+    }
+    if (opts?.done && !this.contentDone) {
+      this.finalize();
+      this.contentDone = true;
+    }
+  }
+
   reset() {
     this.store = emptyBlockStore();
     this.appendedBytes = 0;
@@ -455,6 +522,8 @@ export class FluxClient {
     this.firstAppendMs = 0;
     this.retainedBytes = 0;
     this.wasmMemoryBytes = 0;
+    this.lastContent = ""; // setContent baseline: the worker drops the parser here
+    this.contentDone = false;
     // Same streamId + worker — the worker frees and lazily recreates the parser.
     const pw = this.ensureAcquired();
     this.pool.send(pw, { type: "reset", streamId: this.streamId });
@@ -481,6 +550,11 @@ export class FluxClient {
    */
   reattach() {
     if (this.attached) return;
+    // The prior destroy()→dispose dropped this stream's parser, so setContent's
+    // diff baseline is stale — clear it so the next setContent re-feeds the whole
+    // document (StrictMode dev double-mount on the SAME instance).
+    this.lastContent = "";
+    this.contentDone = false;
     if (!this.pw) {
       // Never acquired (e.g. constructed during SSR, first real mount on client).
       // No prior pool slot to re-register; just mark attached. The next

package/src/index.ts

@@ -16,7 +16,7 @@
  *     client.finalize();
  */
 export { FluxClient, FluxPool, getDefaultPool } from "./client";
-export { FluxMarkdown } from "./react";
+export { FluxMarkdown, useFluxStream, useFluxMarkdownString } from "./react";
 export { highlight, supportedLangs } from "./hi";
 export { htmlToReact, parseTrustedHtml } from "./html-to-react";
 export type {

package/src/react.tsx

@@ -7,6 +7,7 @@ import {
   useState,
   useSyncExternalStore,
   type CSSProperties,
+  type ReactElement,
 } from "react";
 import type { Block, BlockComponentProps, Components, HeadingData, TableData } from "./types";
 import { FluxClient } from "./client";
@@ -209,6 +210,52 @@ export function useFluxStream(
   return client;
 }
 
+/**
+ * Own a {@link FluxClient} driven by a CONTROLLED full string — the bridge for
+ * UIs that hold a streaming message as a single growing string prop (the common
+ * React shape) rather than as a stream. Pass the whole document-so-far on each
+ * render and {@link FluxClient.setContent} diffs it: a prefix-extension appends
+ * only the delta; any divergence (e.g. the finished text swapped for a
+ * re-processed final string) resets and reparses. Returns the owned client —
+ * pass it to `<FluxMarkdown client={…} />` (and read `outline()` etc.).
+ *
+ * Pass `streaming: false` once the content is final to finalize the stream and
+ * commit its last block (only then does a finished code fence highlight + show
+ * its copy button). If `streaming` is omitted or `true` the stream is left OPEN
+ * — right for a still-growing string, but a *complete static* string rendered as
+ * `useFluxMarkdownString(md)` keeps its last block in the streaming state until
+ * you pass `{ streaming: false }`. (Inferring "done" from an absent flag is
+ * deliberately avoided: it would re-finalize on every token for callers that
+ * grow the string without the flag — an O(n²) reparse trap.) The client is
+ * created once and destroyed on unmount; StrictMode's dev double-mount is handled
+ * (reattach re-feeds the document). For a true stream source
+ * (`Response` / `ReadableStream` / SSE generator) use {@link useFluxStream}
+ * instead — it avoids buffering the whole document as a string.
+ */
+export function useFluxMarkdownString(
+  content: string,
+  options?: { config?: ParserConfig; streaming?: boolean },
+): FluxClient {
+  const [client] = useState(() => new FluxClient({ config: options?.config }));
+
+  // Own the client's pool attachment (StrictMode dev double-mount destroys on the
+  // simulated unmount then remounts the SAME instance; reattach re-registers and
+  // clears setContent's diff baseline so the document is re-fed). Destroy on the
+  // real unmount.
+  useEffect(() => {
+    client.reattach();
+    return () => client.destroy();
+  }, [client]);
+
+  // Reconcile the parser to the controlled string. setContent diffs internally,
+  // so this stays correct whether `content` grows by a token or is swapped wholesale.
+  useEffect(() => {
+    client.setContent(content, { done: options?.streaming === false });
+  }, [client, content, options?.streaming]);
+
+  return client;
+}
+
 // Stream mode: own a client via the hook, then render the normal client path.
 function FluxMarkdownFromStream(props: FluxMarkdownProps) {
   const client = useFluxStream(props.stream, {
@@ -336,7 +383,10 @@ function componentInnerHtml(html: string, tag: string): string {
 
 /** Convert a closed block's HTML to a React tree, memoized on html+components. */
 function SafeHtml({ html, components }: { html: string; components: Components }) {
-  return useMemo(() => htmlToReact(html, components), [html, components]) as JSX.Element;
+  // `ReactElement` (not the global `JSX.Element`) so the source type-checks under
+  // both @types/react 18 and 19 — React 19 removed the global `JSX` namespace,
+  // and a consumer's `next build` type-checks this shipped source.
+  return useMemo(() => htmlToReact(html, components), [html, components]) as ReactElement;
 }
 
 // Per-kind off-screen size estimate for `contain-intrinsic-size` — keeps the
@@ -419,12 +469,20 @@ function renderBlockContent({
     (block.open ? " flux-open" : "") +
     (block.speculative ? " flux-speculative" : "");
 
-  // Tag-level overrides only apply to a settled block (open/speculative blocks
-  // have partial HTML we must not feed to the parser).
-  if (components && !block.open && !block.speculative) {
+  // Tag-level / inline overrides apply to OPEN and speculative blocks too, not
+  // just settled ones: the streaming tail's HTML is always well-formed (the
+  // parser speculatively closes it), so a design-system renderer (Tailwind
+  // classes on p/ul/li, inline <a>/<code> overrides) stays styled mid-stream
+  // instead of only after a block commits. A supplied `sanitize` runs FIRST
+  // (same as the innerHTML path below), so overrides compose with sanitization on
+  // every block — closing the gap where a component-rendered block previously
+  // bypassed the user sanitizer. The no-`components` fast path is untouched
+  // (byte-identical innerHTML).
+  if (components) {
+    const safe = sanitize ? sanitize(block.html) : block.html;
     return (
       <div className={className}>
-        <SafeHtml html={block.html} components={components} />
+        <SafeHtml html={safe} components={components} />
       </div>
     );
   }

package/src/solid.tsx

@@ -1,5 +1,6 @@
-import { onCleanup, onMount, type JSX } from "solid-js";
-import type { FluxClient } from "./client";
+import { createEffect, onCleanup, onMount, type JSX } from "solid-js";
+import { FluxClient } from "./client";
+import type { ParserConfig } from "./types-core";
 import { mountFluxMarkdown, type MountHandle, type MountOptions } from "./dom";
 
 /**
@@ -73,3 +74,72 @@ export function FluxMarkdown(props: FluxMarkdownProps): JSX.Element {
   onMount(() => mountSolid(() => props, container, onCleanup));
   return container;
 }
+
+/**
+ * Wire a controlled string to a freshly-constructed {@link FluxClient}, free of
+ * Solid's reactive runtime so it runs (and is tested) under any toolchain. The
+ * registrars are injected: the public {@link createFluxMarkdownString} passes
+ * Solid's real `createEffect` / `onCleanup`; tests pass hand-rolled stand-ins
+ * (mirroring how {@link mountSolid} takes `registerCleanup`).
+ *
+ * Ownership DIFFERS from {@link mountSolid}: this constructs the client and so
+ * `registerCleanup`s `client.destroy()` — it OWNS the worker/stream. `config` is
+ * read ONCE here (the constructor treats it as immutable); `getContent()` and
+ * `streaming` are read INSIDE the effect so the effect tracks them reactively.
+ */
+export function setupFluxMarkdownString(
+  getContent: () => string,
+  getOptions: (() => { config?: ParserConfig; streaming?: boolean }) | undefined,
+  registerEffect: (fn: () => void) => void,
+  registerCleanup: (fn: () => void) => void,
+): FluxClient {
+  // One client per helper instance. Constructor is worker-free → SSR-safe; the
+  // worker is spawned lazily by the first setContent → append, which only runs
+  // inside the effect below. config is read once and is immutable thereafter.
+  const client = new FluxClient({ config: getOptions?.()?.config });
+
+  // Reconcile the parser to the controlled string. setContent diffs internally,
+  // so this is correct whether `content` grows by a token or is swapped wholesale.
+  // `streaming === false` (never `!streaming`) → only an explicit false finalizes;
+  // an absent/true flag leaves the stream open (inferring "done" from an absent
+  // flag would re-finalize on every token — an O(n²) reparse trap).
+  registerEffect(() => {
+    client.setContent(getContent(), { done: getOptions?.()?.streaming === false });
+  });
+
+  // This helper OWNS the client (unlike the client-based bindings above), so it
+  // destroys it on cleanup — freeing its pool slot.
+  registerCleanup(() => client.destroy());
+
+  return client;
+}
+
+/**
+ * Own a {@link FluxClient} driven by a CONTROLLED full string — the Solid
+ * analogue of React's `useFluxMarkdownString`, for UIs that hold a streaming
+ * message as a single growing string (a signal/memo) rather than as a stream.
+ * Pass an accessor for the whole document-so-far; on every change
+ * {@link FluxClient.setContent} diffs it and does the minimal work (a
+ * prefix-extension appends only the delta; any divergence resets and reparses).
+ *
+ * Pass `streaming: false` (via `getOptions`) once the content is final to
+ * finalize the stream and commit its last block (only then does a finished code
+ * fence highlight + show its copy button). If `streaming` is omitted or `true`
+ * the stream is left OPEN. `config` is read once at construction and is
+ * immutable, so it is not a change trigger.
+ *
+ * **Returns the owned client** — pass it to `<FluxMarkdown client={client} />`
+ * (and read `outline()` / `getMetrics()` off it). The client is constructed in
+ * the body (constructor is worker-free → SSR-safe) and destroyed on cleanup.
+ *
+ * SSR-safety: `setContent` is what spawns a Worker (via `append`), so it runs
+ * ONLY inside a `createEffect` — Solid does not run user effects during
+ * `renderToString`, so nothing touches a Worker on the server render path (the
+ * body only constructs the worker-free client).
+ */
+export function createFluxMarkdownString(
+  getContent: () => string,
+  getOptions?: () => { config?: ParserConfig; streaming?: boolean },
+): FluxClient {
+  return setupFluxMarkdownString(getContent, getOptions, createEffect, onCleanup);
+}

package/src/svelte.ts

@@ -1,5 +1,6 @@
 import type { ActionReturn } from "svelte/action";
-import type { FluxClient } from "./client";
+import { FluxClient } from "./client";
+import type { ParserConfig } from "./types-core";
 import { mountFluxMarkdown, type DomComponents, type MountOptions } from "./dom";
 
 /**
@@ -53,3 +54,101 @@ export function fluxMarkdown(
     },
   };
 }
+
+/**
+ * Controlled-string sibling of {@link fluxMarkdown}: instead of taking a
+ * caller-owned client, this action OWNS a single {@link FluxClient} (constructed
+ * from `config`) and drives it from a CONTROLLED full string — the bridge for
+ * Svelte UIs that hold a streaming message as one growing `content` prop rather
+ * than feeding the client by hand. Each update passes the whole document-so-far
+ * and {@link FluxClient.setContent} diffs it: a prefix-extension appends only the
+ * delta; any divergence resets and reparses.
+ *
+ * ```svelte
+ * <div use:fluxMarkdownString={{ content, streaming: !done }} />
+ * ```
+ *
+ * Pass `streaming: false` once the content is final to finalize the stream and
+ * commit its last block (only then does a finished code fence highlight + show
+ * its copy button). When `streaming` is omitted or `true` the stream is left
+ * OPEN — right for a still-growing string, but a *complete static* string keeps
+ * its last block in the streaming state until you pass `{ streaming: false }`.
+ * (Inferring "done" from an absent flag is deliberately avoided — it would
+ * re-finalize on every token and trip an O(n²) reparse.)
+ *
+ * SSR-safe by construction: a Svelte action runs ONLY in the browser, and the
+ * `FluxClient` constructor is worker-free — the first worker is spawned lazily by
+ * `setContent`, which only runs here (never during a server render).
+ *
+ * Lifecycle differs from {@link fluxMarkdown}: this action constructs the client
+ * once (a later `config` change is ignored, like a created-once instance) and
+ * `destroy()`s it on teardown — it OWNS the client. The mount-option reconcile
+ * (`components`/`sanitize`/`virtualize`/`stickToBottom`) matches `fluxMarkdown`,
+ * but the remount reuses the SAME client so its `setContent` diff baseline
+ * survives.
+ */
+export interface FluxMarkdownStringParams extends Omit<FluxMarkdownParams, "client"> {
+  /** The full document-so-far. Diffed against the prior value on every update. */
+  content: string;
+  /** Leave the stream open while true/omitted; `false` finalizes (commits the tail). */
+  streaming?: boolean;
+  /** Per-stream parser flags. Applied once at construction; later changes are ignored. */
+  config?: ParserConfig;
+}
+
+/** Strip the action-only inputs (`content`/`streaming`/`config`), leaving the
+ *  fields {@link mountFluxMarkdown} reads — so they never leak into the mount. */
+function mountOptionsOf(p: FluxMarkdownStringParams): Omit<FluxMarkdownParams, "client"> {
+  const { content: _c, streaming: _s, config: _cfg, ...rest } = p;
+  void _c;
+  void _s;
+  void _cfg;
+  return rest;
+}
+
+export function fluxMarkdownString(
+  node: HTMLElement,
+  params: FluxMarkdownStringParams,
+): ActionReturn<FluxMarkdownStringParams> {
+  // This action OWNS the client — construct it once from `config` (a later
+  // `config` change is ignored, mirroring the created-once React hook). The
+  // content/streaming diff baseline lives INSIDE the client (setContent), so we
+  // keep no outer copy; only the mount-option fields are tracked for the remount
+  // comparison.
+  let options = mountOptionsOf(params);
+  const client = new FluxClient({ config: params.config });
+  let handle = mountFluxMarkdown(client, node, options as MountOptions);
+  // First worker-bound op: spawns the lazy Worker — browser-only, never SSR.
+  client.setContent(params.content, { done: params.streaming === false });
+
+  return {
+    update(next: FluxMarkdownStringParams) {
+      // Content/streaming are the primary changing inputs, so reconcile them on
+      // EVERY update — setContent self-no-ops when the string is unchanged, so
+      // this is cheap. (Unlike fluxMarkdown, we cannot early-return: that would
+      // swallow content updates.)
+      client.setContent(next.content, { done: next.streaming === false });
+
+      // Then reconcile mount options exactly like fluxMarkdown: remount only when
+      // a field the renderer reads actually changed identity, and reuse the SAME
+      // client so its setContent diff baseline (lastContent) survives the remount.
+      if (
+        next.components === options.components &&
+        next.sanitize === options.sanitize &&
+        next.virtualize === options.virtualize &&
+        next.stickToBottom === options.stickToBottom
+      ) {
+        return;
+      }
+      handle.destroy();
+      options = mountOptionsOf(next);
+      handle = mountFluxMarkdown(client, node, options as MountOptions);
+    },
+    destroy() {
+      // This action OWNS the client (unlike fluxMarkdown) — tear down the mount
+      // AND destroy the client so its pool slot is freed.
+      handle.destroy();
+      client.destroy();
+    },
+  };
+}

package/src/vue.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h, onMounted, onUnmounted, ref, watch } from "vue";
 import type { PropType, Ref } from "vue";
-import type { FluxClient } from "./client";
+import { FluxClient } from "./client";
+import type { ParserConfig } from "./types-core";
 import { mountFluxMarkdown, type DomComponents, type MountHandle, type MountOptions } from "./dom";
 
 /**
@@ -98,3 +99,59 @@ export const FluxMarkdown = defineComponent({
     return () => h("div", { ref: container });
   },
 });
+
+/**
+ * Own a {@link FluxClient} driven by a CONTROLLED full string — the Vue analogue
+ * of React's `useFluxMarkdownString`, for UIs that hold a streaming message as a
+ * single growing string (a `ref`/computed) rather than as a stream. Pass a getter
+ * for the whole document-so-far; on every change {@link FluxClient.setContent}
+ * diffs it and does the minimal work (prefix-extension appends only the delta;
+ * any divergence resets and reparses).
+ *
+ * Pass `streaming: false` (via `getOptions`) once the content is final to
+ * finalize the stream and commit its last block. If `streaming` is omitted or
+ * `true` the stream is left OPEN — inferring "done" from an absent flag is
+ * deliberately avoided (it would re-finalize on every token for callers that
+ * grow the string without the flag — an O(n²) reparse trap). `config` is read
+ * once at construction and is immutable thereafter, so it is not a change
+ * trigger.
+ *
+ * **Returns the owned client** — a deliberate divergence from {@link useFluxMarkdown}
+ * (which returns `{ container }`). Mirroring React's hook, this composes with the
+ * component as `<FluxMarkdown :client="client" />` (and lets you read
+ * `outline()` / `getMetrics()` off it). The client is created in the composable
+ * body (constructor is worker-free → SSR-safe) and destroyed on unmount.
+ *
+ * SSR-safety: `setContent` is what spawns a Worker (via `append`), so it is
+ * called ONLY in `onMounted` and a NON-immediate `watch` — never during the
+ * server render path (`setup` constructs the client but neither lifecycle hook
+ * nor the non-immediate watch fires on the server).
+ */
+export function useFluxMarkdownString(
+  getContent: () => string,
+  getOptions?: () => { config?: ParserConfig; streaming?: boolean },
+): FluxClient {
+  // One client per composable instance. Constructor is worker-free, so this is
+  // safe to run in setup() during SSR; config is read once and is immutable.
+  const client = new FluxClient({ config: getOptions?.()?.config });
+
+  // Reconcile the parser to the controlled string. setContent diffs internally,
+  // so this is correct whether `content` grows by a token or is swapped wholesale.
+  // `streaming === false` (never `!streaming`) → only an explicit false finalizes;
+  // an absent/true flag leaves the stream open.
+  const apply = (): void => {
+    client.setContent(getContent(), { done: getOptions?.()?.streaming === false });
+  };
+
+  // Initial feed + every change. NOT { immediate: true }: an immediate watch runs
+  // in setup() — i.e. during SSR — and would spawn a Worker on the server. The
+  // initial feed is onMounted (client-only); the watch covers later changes.
+  onMounted(apply);
+  watch([getContent, () => getOptions?.()?.streaming], apply);
+
+  // This composable OWNS the client (unlike useFluxMarkdown, which takes one), so
+  // it destroys it here. Vue auto-stops the watcher on unmount.
+  onUnmounted(() => client.destroy());
+
+  return client;
+}

package/src/wasm/package.json

@@ -2,7 +2,7 @@
   "name": "flux-md-core",
   "type": "module",
   "description": "Incremental, streaming-aware markdown parser with speculative closure",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "files": [
     "flux_md_core_bg.wasm",

package/src/worker-core.ts

@@ -0,0 +1,174 @@
+import type { FromWorker, ParserConfig, Patch, ToWorker } from "./types-core";
+
+/** The slice of `FluxParser` the worker drives — narrowed to an interface so the
+ *  message/readiness state machine is unit-testable with a fake parser, no WASM.
+ *  (Same testability move as {@link FluxPool} taking an injected worker factory.) */
+export interface ParserLike {
+  append(chunk: string): Patch;
+  finalize(): Patch;
+  free(): void;
+  retainedBytes(): number;
+}
+
+/** Dependencies injected into {@link WorkerCore}, isolating it from the worker
+ *  globals (`self`, `queueMicrotask`) and the WASM module so it can be tested. */
+export interface WorkerCoreDeps {
+  /** Create + configure a parser for a stream (prod: `new FluxParser()` + setX). */
+  makeParser(config: ParserConfig | undefined): ParserLike;
+  /** Post a message to the main thread (prod: `self.postMessage`). */
+  post(msg: FromWorker): void;
+  /** Current WASM heap size in bytes, reported on each patch (0 if unknown). */
+  memBytes(): number;
+  /** Defer a flush to a future microtask (prod: `queueMicrotask`). */
+  schedule(fn: () => void): void;
+}
+
+/**
+ * The worker's message reducer + WASM-readiness gate, extracted from the worker
+ * shell so its trickiest invariant is testable without a real Worker or WASM.
+ *
+ * **The invariant:** WASM `init()` is async, and the client does NOT wait for
+ * readiness before appending — so chunks can arrive first. A parser must never
+ * be constructed before init resolves (`new FluxParser()` against an
+ * uninitialized module throws `fluxparser_new of undefined` and silently drops
+ * that chunk). So while `ready` is false, appends only accumulate in `pending`
+ * (scheduleFlush is a no-op) and `finalize` is deferred; {@link markReady}
+ * drains both — appends first (creating each parser + applying buffered text),
+ * then any deferred finalize — once init has completed.
+ */
+export class WorkerCore {
+  // One parser per stream id; WASM is loaded once and shared by all of them.
+  private parsers = new Map<number, ParserLike>();
+  private config = new Map<number, ParserConfig>();
+  private pending = new Map<number, string>();
+  private totalAppended = new Map<number, number>();
+  private finalizePending = new Set<number>();
+  private flushScheduled = false;
+  private ready = false;
+
+  constructor(private deps: WorkerCoreDeps) {}
+
+  /** Handle one message from the main thread (append/finalize/reset/dispose). */
+  handle(msg: ToWorker): void {
+    const id = msg.streamId;
+    // Stash any per-stream config carried on the first message (FIFO guarantees
+    // it arrives before the parser is created in flush/finalize).
+    if ((msg.type === "append" || msg.type === "finalize") && msg.config) {
+      this.config.set(id, msg.config);
+    }
+    switch (msg.type) {
+      case "append":
+        this.pending.set(id, (this.pending.get(id) ?? "") + msg.chunk);
+        this.scheduleFlush();
+        break;
+      case "finalize":
+        // Before WASM is ready, defer: markReady() finalizes it after init (the
+        // buffered input is drained first). Otherwise finalize now.
+        if (!this.ready) this.finalizePending.add(id);
+        else this.doFinalize(id);
+        break;
+      case "reset":
+        // Free and recreate lazily on the next append — same stream id, **same
+        // config** (kept). The client resets its local state synchronously.
+        this.parsers.get(id)?.free();
+        this.parsers.delete(id);
+        this.pending.delete(id);
+        this.finalizePending.delete(id); // a reset cancels a not-yet-run early finalize
+        this.totalAppended.delete(id);
+        break;
+      case "dispose":
+        this.dispose(id);
+        break;
+    }
+  }
+
+  /** Called once WASM init resolves: open the gate and drain what was buffered. */
+  markReady(): void {
+    this.ready = true;
+    this.deps.post({ type: "ready" });
+    // Order matters: flush appends first (creating each parser + applying
+    // buffered text), then finalize any stream that already requested it.
+    if (this.pending.size > 0) this.flush();
+    if (this.finalizePending.size > 0) {
+      for (const id of this.finalizePending) this.doFinalize(id);
+      this.finalizePending.clear();
+    }
+  }
+
+  private getOrCreate(streamId: number): ParserLike {
+    let p = this.parsers.get(streamId);
+    if (!p) {
+      p = this.deps.makeParser(this.config.get(streamId));
+      this.parsers.set(streamId, p);
+    }
+    return p;
+  }
+
+  private dispose(streamId: number): void {
+    this.parsers.get(streamId)?.free();
+    this.parsers.delete(streamId);
+    this.config.delete(streamId);
+    this.pending.delete(streamId);
+    this.finalizePending.delete(streamId);
+    this.totalAppended.delete(streamId);
+  }
+
+  private emitPatch(streamId: number, patch: Patch, parser: ParserLike, parseMicros: number): void {
+    this.deps.post({
+      type: "patch",
+      streamId,
+      patch,
+      appendedBytes: this.totalAppended.get(streamId) ?? 0,
+      parseMicros,
+      retainedBytes: parser.retainedBytes(),
+      wasmMemoryBytes: this.deps.memBytes(),
+    });
+  }
+
+  private scheduleFlush(): void {
+    if (this.flushScheduled || !this.ready) return; // before ready, input just accumulates in `pending`
+    this.flushScheduled = true;
+    this.deps.schedule(() => this.flush());
+  }
+
+  private flush(): void {
+    this.flushScheduled = false;
+    if (!this.ready || this.pending.size === 0) return; // buffer stays put until WASM is ready
+    // Process every stream with buffered input this microtask.
+    for (const [streamId, chunk] of this.pending) {
+      this.pending.delete(streamId);
+      if (chunk.length === 0) continue;
+      const t0 = performance.now();
+      try {
+        // getOrCreate (→ makeParser) is inside the try: with `ready` gating it
+        // can't hit the init race, but any other construction failure becomes a
+        // posted error rather than an uncaught exception that kills the worker.
+        const parser = this.getOrCreate(streamId);
+        const patch = parser.append(chunk) as Patch;
+        const dt = (performance.now() - t0) * 1000;
+        this.totalAppended.set(streamId, (this.totalAppended.get(streamId) ?? 0) + chunk.length);
+        this.emitPatch(streamId, patch, parser, dt);
+      } catch (e: unknown) {
+        this.deps.post({ type: "error", streamId, message: e instanceof Error ? e.message : String(e) });
+      }
+    }
+  }
+
+  // Drain a stream's buffered input (if any), then finalize its parser. Shared by
+  // the `finalize` message path and markReady()'s post-ready drain.
+  private doFinalize(streamId: number): void {
+    const buffered = this.pending.get(streamId);
+    this.pending.delete(streamId);
+    try {
+      const parser = this.getOrCreate(streamId);
+      if (buffered && buffered.length > 0) {
+        parser.append(buffered);
+        this.totalAppended.set(streamId, (this.totalAppended.get(streamId) ?? 0) + buffered.length);
+      }
+      const patch = parser.finalize() as Patch;
+      this.emitPatch(streamId, patch, parser, 0);
+    } catch (e: unknown) {
+      this.deps.post({ type: "error", streamId, message: e instanceof Error ? e.message : String(e) });
+    }
+  }
+}

package/src/worker.ts

@@ -1,52 +1,27 @@
 /// <reference lib="webworker" />
 import init, { FluxParser } from "./wasm/flux_md_core.js";
-import type { FromWorker, ParserConfig, Patch, ToWorker } from "./types";
+import type { ParserConfig } from "./types";
+import { WorkerCore, type ParserLike } from "./worker-core";
 
 // Resolve the WASM asset with the *web-standard* `new URL(asset,
 // import.meta.url)` pattern (not Vite's `?url` suffix), so the package works in
-// any bundler with asset-module support — Vite, webpack 5, Rollup, Parcel.
-// wasm-bindgen's init() fetches a URL instance directly.
+// any bundler with asset-module support — Vite, webpack 5, Rollup, Parcel, and
+// Next.js (Turbopack/webpack). wasm-bindgen's init() fetches a URL instance.
 const wasmUrl = new URL("./wasm/flux_md_core_bg.wasm", import.meta.url);
 
-// One worker multiplexes many streams: a parser per stream id (the worker
-// pool). WASM is loaded once for the whole worker, shared by every parser.
-const parsers = new Map<number, FluxParser>();
-const config = new Map<number, ParserConfig>();
-const pending = new Map<number, string>();
-const totalAppended = new Map<number, number>();
-let flushScheduled = false;
-let wasmExports: any = null;
-
 const ctx: DedicatedWorkerGlobalScope = self as unknown as DedicatedWorkerGlobalScope;
 
-function post(msg: FromWorker) {
-  ctx.postMessage(msg);
-}
-
-async function setup() {
-  // init() returns the wasm-bindgen instance; capture its `.memory` export so
-  // we can report WASM-side memory usage on every patch. No parser yet — they
-  // are created per stream, on demand.
-  try {
-    wasmExports = await init({ module_or_path: wasmUrl });
-    post({ type: "ready" });
-  } catch (e: unknown) {
-    // WASM failed to load/instantiate: this worker can never parse anything.
-    // Report it so the pool rejects whenReady() (rather than hanging forever)
-    // and clients' onError fires. streamId is irrelevant for a worker-level
-    // failure — the pool routes a fatal error to every stream it hosts.
-    post({ type: "error", streamId: -1, message: e instanceof Error ? e.message : String(e), fatal: true });
-  }
-}
+// Captured from init() so we can report WASM-side memory usage on each patch.
+let wasmExports: { memory?: { buffer?: ArrayBufferLike } } | null = null;
 
-function getOrCreate(streamId: number): FluxParser {
-  let p = parsers.get(streamId);
-  if (!p) {
-    p = new FluxParser();
-    // Per-stream config (sent on the stream's first message); omitted fields
-    // fall back to the library defaults — autolinks + alerts on (LLM output is
-    // full of bare URLs and `> [!NOTE]` blocks), raw HTML escaped, footnotes off.
-    const c = config.get(streamId);
+// The message/readiness state machine lives in WorkerCore (testable without
+// WASM); this shell injects the WASM-specific dependencies.
+const core = new WorkerCore({
+  // Create + configure a parser for a stream. Omitted config fields fall back to
+  // the library defaults — autolinks + alerts on (LLM output is full of bare
+  // URLs and `> [!NOTE]` blocks), raw HTML escaped, footnotes/math off.
+  makeParser(c: ParserConfig | undefined): ParserLike {
+    const p = new FluxParser();
     p.setGfmAutolinks(c?.gfmAutolinks ?? true);
     p.setGfmAlerts(c?.gfmAlerts ?? true);
     p.setGfmFootnotes(c?.gfmFootnotes ?? false);
@@ -56,107 +31,35 @@ function getOrCreate(streamId: number): FluxParser {
     p.setUnsafeHtml(c?.unsafeHtml ?? false);
     p.setComponentTags(c?.componentTags ?? []);
     p.setBlockData(c?.blockData ?? false);
-    parsers.set(streamId, p);
-  }
-  return p;
-}
-
-function dispose(streamId: number) {
-  parsers.get(streamId)?.free();
-  parsers.delete(streamId);
-  config.delete(streamId);
-  pending.delete(streamId);
-  totalAppended.delete(streamId);
-}
-
-function wasmMemBytes(): number {
-  try {
-    return (wasmExports?.memory?.buffer?.byteLength as number) ?? 0;
-  } catch {
-    return 0;
-  }
-}
-
-function emitPatch(streamId: number, patch: Patch, parser: FluxParser, parseMicros: number) {
-  post({
-    type: "patch",
-    streamId,
-    patch,
-    appendedBytes: totalAppended.get(streamId) ?? 0,
-    parseMicros,
-    retainedBytes: parser.retainedBytes(),
-    wasmMemoryBytes: wasmMemBytes(),
-  });
-}
-
-function flush() {
-  flushScheduled = false;
-  if (pending.size === 0) return;
-  // Process every stream with buffered input this microtask.
-  for (const [streamId, chunk] of pending) {
-    pending.delete(streamId);
-    if (chunk.length === 0) continue;
-    const parser = getOrCreate(streamId);
-    const t0 = performance.now();
+    return p;
+  },
+  post: (msg) => ctx.postMessage(msg),
+  memBytes: () => {
     try {
-      const patch = parser.append(chunk) as Patch;
-      const dt = (performance.now() - t0) * 1000;
-      totalAppended.set(streamId, (totalAppended.get(streamId) ?? 0) + chunk.length);
-      emitPatch(streamId, patch, parser, dt);
-    } catch (e: unknown) {
-      post({ type: "error", streamId, message: e instanceof Error ? e.message : String(e) });
+      return (wasmExports?.memory?.buffer?.byteLength as number) ?? 0;
+    } catch {
+      return 0;
     }
-  }
-}
+  },
+  schedule: (fn) => queueMicrotask(fn),
+});
 
-function scheduleFlush() {
-  if (flushScheduled) return;
-  flushScheduled = true;
-  queueMicrotask(flush);
-}
+ctx.addEventListener("message", (ev: MessageEvent) => core.handle(ev.data));
 
-ctx.addEventListener("message", (ev: MessageEvent<ToWorker>) => {
-  const msg = ev.data;
-  const id = msg.streamId;
-  // Stash any per-stream config carried on the first message (FIFO guarantees
-  // it arrives before the parser is created in flush/finalize).
-  if ((msg.type === "append" || msg.type === "finalize") && msg.config) {
-    config.set(id, msg.config);
-  }
-  switch (msg.type) {
-    case "append":
-      pending.set(id, (pending.get(id) ?? "") + msg.chunk);
-      scheduleFlush();
-      break;
-    case "finalize": {
-      // Drain any buffered input for this stream, then finalize.
-      const buffered = pending.get(id);
-      pending.delete(id);
-      const parser = getOrCreate(id);
-      try {
-        if (buffered && buffered.length > 0) {
-          parser.append(buffered);
-          totalAppended.set(id, (totalAppended.get(id) ?? 0) + buffered.length);
-        }
-        const patch = parser.finalize() as Patch;
-        emitPatch(id, patch, parser, 0);
-      } catch (e: unknown) {
-        post({ type: "error", streamId: id, message: e instanceof Error ? e.message : String(e) });
-      }
-      break;
-    }
-    case "reset":
-      // Free and recreate lazily on the next append — same stream id, **same
-      // config** (kept). The client resets its local state synchronously.
-      parsers.get(id)?.free();
-      parsers.delete(id);
-      pending.delete(id);
-      totalAppended.delete(id);
-      break;
-    case "dispose":
-      dispose(id);
-      break;
+async function setup() {
+  // init() returns the wasm-bindgen instance; capture its `.memory` export for
+  // the per-patch memory metric. No parser yet — they are created per stream,
+  // on demand, only after markReady() opens the gate.
+  try {
+    wasmExports = await init({ module_or_path: wasmUrl });
+    core.markReady();
+  } catch (e: unknown) {
+    // WASM failed to load/instantiate: this worker can never parse anything.
+    // Report it so the pool rejects whenReady() (rather than hanging forever)
+    // and clients' onError fires. streamId is irrelevant for a worker-level
+    // failure — the pool routes a fatal error to every stream it hosts.
+    ctx.postMessage({ type: "error", streamId: -1, message: e instanceof Error ? e.message : String(e), fatal: true });
   }
-});
+}
 
 setup();