flux-md 0.16.2 → 0.18.0

package/dist/renderers/CodeBlock.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    html: string;
+    open: boolean;
+}
+declare function CodeBlockImpl({ html, open }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlock: import("react").MemoExoticComponent<typeof CodeBlockImpl>;
+export {};

package/dist/renderers/CodeBlock.js

@@ -0,0 +1,75 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { highlight } from "../hi.js";
+import { extractLang } from "../block-props.js";
+function decodeText(html) {
+  const m = html.match(/<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
+  if (!m) return "";
+  return m[1].replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
+}
+function CodeBlockImpl({ html, open }) {
+  const lang = extractLang(html) || "text";
+  const text = useMemo(() => open ? "" : decodeText(html), [html, open]);
+  const highlighted = useMemo(() => {
+    if (!text) return null;
+    return highlight(text, lang);
+  }, [text, lang]);
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (open) setCopied(false);
+  }, [open, html]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const onCopy = useCallback(() => {
+    const write = typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText ? navigator.clipboard.writeText.bind(navigator.clipboard) : null;
+    if (!write || !text) return;
+    write(text).then(
+      () => {
+        setCopied(true);
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 1500);
+      },
+      // Permission denied / blocked: stay silent, leave button usable.
+      () => {
+      }
+    );
+  }, [text]);
+  return /* @__PURE__ */ jsxs("div", { className: "flux-code-block" + (open ? " flux-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flux-code-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "flux-code-lang", children: lang }),
+      open ? /* @__PURE__ */ jsx("span", { className: "flux-code-streaming-pill", children: "streaming" }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "flux-code-copy",
+          onClick: onCopy,
+          "aria-label": copied ? "Copied" : "Copy code",
+          "aria-live": "polite",
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }),
+            /* @__PURE__ */ jsx("span", { children: "Copied" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M5 15V5a2 2 0 0 1 2-2h10" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flux-code-body", children: highlighted ? (
+      // tabIndex=0 + role/label so keyboard users can scroll long code and
+      // screen readers announce the region with its language.
+      /* @__PURE__ */ jsx("pre", { tabIndex: 0, role: "region", "aria-label": `${lang} code`, children: /* @__PURE__ */ jsx("code", { dangerouslySetInnerHTML: { __html: highlighted } }) })
+    ) : /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "region", "aria-label": `${lang} code`, dangerouslySetInnerHTML: { __html: html } }) })
+  ] });
+}
+const CodeBlock = memo(CodeBlockImpl);
+export {
+  CodeBlock
+};

package/dist/renderers/Math.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Default math block — emits the LaTeX inside a `<div class="math
+ * math-display">` (or `<span class="math math-inline">` for inline). flux-md
+ * stays zero-dep, so it does not ship KaTeX/MathJax: bring your own typesetter
+ * (run it over the rendered `.math` nodes once a block closes), or override
+ * this slot via `components.MathBlock` to render the LaTeX yourself.
+ */
+interface Props {
+    html: string;
+    open: boolean;
+}
+declare function MathImpl({ html, open }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const MathBlock: import("react").MemoExoticComponent<typeof MathImpl>;
+export {};

package/dist/renderers/Math.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+function MathImpl({ html, open }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flux-math-block" + (open ? " flux-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flux-math-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "flux-math-lang", children: "math" }),
+      open && /* @__PURE__ */ jsx("span", { className: "flux-code-streaming-pill", children: "streaming" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flux-math-body", dangerouslySetInnerHTML: { __html: html } })
+  ] });
+}
+const MathBlock = memo(MathImpl);
+export {
+  MathBlock
+};

package/dist/renderers/Mermaid.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Default mermaid block — renders the diagram source verbatim in a code-like
+ * container. flux-md stays zero-dep and does not ship the Mermaid runtime:
+ * override this slot via `components.Mermaid` to render to SVG with your own
+ * Mermaid build (typically `mermaid.run` over the closed-block source text).
+ */
+interface Props {
+    html: string;
+    open: boolean;
+}
+declare function MermaidImpl({ html, open }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const Mermaid: import("react").MemoExoticComponent<typeof MermaidImpl>;
+export {};

package/dist/renderers/Mermaid.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+function MermaidImpl({ html, open }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flux-mermaid-block" + (open ? " flux-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flux-mermaid-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "flux-mermaid-lang", children: "mermaid" }),
+      open && /* @__PURE__ */ jsx("span", { className: "flux-code-streaming-pill", children: "streaming" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flux-mermaid-body", dangerouslySetInnerHTML: { __html: html } })
+  ] });
+}
+const Mermaid = memo(MermaidImpl);
+export {
+  Mermaid
+};

package/dist/server-react.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import type { Components, ParserConfig } from "./types.js";
+interface FluxMarkdownStaticProps {
+    /** The complete markdown to render (server/static use is for finished content). */
+    content: string;
+    /** Parser config (same shape as the streaming client's). */
+    config?: ParserConfig;
+    /** Tag-level / block-kind / component-tag overrides (see {@link Components}). */
+    components?: Components;
+    /** Appended to the root's `className` (the `flux-md` class is always present). */
+    className?: string;
+    /** Set on the root element. */
+    id?: string;
+    /** Set on the root element (e.g. `"article"`). */
+    role?: string;
+    /** Make the root a live region (parity with `<FluxMarkdown>` if you hydrate). */
+    "aria-live"?: "off" | "polite" | "assertive";
+    /** Live-region atomicity; pair with `aria-live`. */
+    "aria-atomic"?: boolean;
+}
+/**
+ * Synchronous, worker-free React rendering of finished markdown — a React Server
+ * Component, or any one-shot SSR / static render. Emits the `flux-md` root +
+ * per-block structure with the same `components` overrides (inline/block
+ * component tags dispatch here too). Requires `initFlux` (or `initFluxSync`)
+ * from `flux-md/server` to have run. Uses no hooks (RSC-safe). A **render-once**
+ * component: for live streaming, client-side code highlighting, or Mermaid use
+ * the client `<FluxMarkdown>` instead (and if you SSR-then-hydrate, render the
+ * *same* component on both sides).
+ */
+export declare function FluxMarkdownStatic({ content, config, components, className, id, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }: FluxMarkdownStaticProps): ReactNode;
+export {};

package/dist/server-react.js

@@ -0,0 +1,48 @@
+import { createElement } from "react";
+import { htmlToReact } from "./html-to-react.js";
+import { blockKindProps } from "./react.js";
+import { parseToBlocks } from "./server.js";
+function renderStaticBlock(block, components) {
+  const kind = block.kind.type;
+  if (components) {
+    if (kind === "Component") {
+      const tag = block.kind.data?.tag;
+      const override = tag && components[tag] || components.Component;
+      if (override) return createElement(override, { key: block.id, ...blockKindProps(block, components) });
+    }
+    const blockOverride = components[kind];
+    if (blockOverride) return createElement(blockOverride, { key: block.id, ...blockKindProps(block, components) });
+  }
+  const className = "flux-block flux-block-" + kind.toLowerCase() + (block.open ? " flux-open" : "") + (block.speculative ? " flux-speculative" : "");
+  if (components) {
+    return createElement("div", { key: block.id, className }, htmlToReact(block.html, components));
+  }
+  return createElement("div", { key: block.id, className, dangerouslySetInnerHTML: { __html: block.html } });
+}
+function FluxMarkdownStatic({
+  content,
+  config,
+  components,
+  className,
+  id,
+  role,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic
+}) {
+  const blocks = parseToBlocks(content, { config });
+  const comps = components && Object.keys(components).length > 0 ? components : void 0;
+  return createElement(
+    "div",
+    {
+      className: className ? `flux-md ${className}` : "flux-md",
+      id,
+      role,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic
+    },
+    blocks.map((b) => renderStaticBlock(b, comps))
+  );
+}
+export {
+  FluxMarkdownStatic
+};

package/dist/server.d.ts

@@ -0,0 +1,31 @@
+import type { Block, ParserConfig } from "./types.js";
+/** Has the sync WASM core been initialized in this process? */
+export declare function isFluxReady(): boolean;
+/** Initialize the sync core from compiled WASM bytes (or a `WebAssembly.Module`).
+ *  Idempotent. Use on runtimes without a filesystem (edge) or to control exactly
+ *  when init happens; otherwise {@link initFlux} auto-loads the co-located WASM. */
+export declare function initFluxSync(wasm: BufferSource | WebAssembly.Module): void;
+/** Initialize the sync core once. In Node it reads the package's co-located
+ *  `.wasm` off disk (Node's `fetch` can't load `file://`); on the web it fetches
+ *  the bundler-resolved asset URL. Pass `{ wasm }` to supply bytes yourself
+ *  (edge runtimes). Safe to call repeatedly / concurrently. */
+export declare function initFlux(opts?: {
+    wasm?: BufferSource | WebAssembly.Module;
+}): Promise<void>;
+/**
+ * Parse a complete markdown string to its block array synchronously (committed +
+ * any trailing block, in document order). Requires {@link initFlux} to have run.
+ */
+export declare function parseToBlocks(markdown: string, opts?: {
+    config?: ParserConfig;
+}): Block[];
+/**
+ * Render a complete markdown string to an HTML string synchronously — no worker,
+ * no React. The concatenated per-block HTML (XSS-safe with `unsafeHtml` off).
+ * For component dispatch / a `<FluxMarkdown>`-matching React tree, use
+ * `FluxMarkdownStatic` from `flux-md/server/react` with your framework's server
+ * renderer instead.
+ */
+export declare function renderToString(markdown: string, opts?: {
+    config?: ParserConfig;
+}): string;

package/dist/server.js

@@ -0,0 +1,81 @@
+import initWasmAsync, { FluxParser, initSync } from "./wasm/flux_md_core.js";
+let ready = false;
+function isFluxReady() {
+  return ready;
+}
+function initFluxSync(wasm) {
+  if (ready) return;
+  initSync({ module: wasm });
+  ready = true;
+}
+let initPromise = null;
+function initFlux(opts) {
+  if (ready) return Promise.resolve();
+  if (opts?.wasm) {
+    initFluxSync(opts.wasm);
+    return Promise.resolve();
+  }
+  if (!initPromise) {
+    initPromise = (async () => {
+      const wasmUrl = new URL("./wasm/flux_md_core_bg.wasm", import.meta.url);
+      if (wasmUrl.protocol === "file:") {
+        const { readFile } = await import("node:fs/promises");
+        initFluxSync(await readFile(wasmUrl));
+      } else {
+        await initWasmAsync({ module_or_path: wasmUrl });
+        ready = true;
+      }
+    })().catch((err) => {
+      initPromise = null;
+      throw err;
+    });
+  }
+  return initPromise;
+}
+function makeParser(config) {
+  const p = new FluxParser();
+  p.setGfmAutolinks(config?.gfmAutolinks ?? true);
+  p.setGfmAlerts(config?.gfmAlerts ?? true);
+  p.setGfmFootnotes(config?.gfmFootnotes ?? false);
+  p.setGfmMath(config?.gfmMath ?? false);
+  p.setDirAuto(config?.dirAuto ?? false);
+  p.setA11y(config?.a11y ?? false);
+  p.setUnsafeHtml(config?.unsafeHtml ?? false);
+  p.setComponentTags(config?.componentTags ?? []);
+  p.setInlineComponentTags(config?.inlineComponentTags ?? []);
+  p.setHtmlSanitize(
+    config?.htmlAllowlist !== void 0 || config?.dropHtmlTags !== void 0,
+    config?.htmlAllowlist ?? [],
+    config?.dropHtmlTags ?? []
+  );
+  p.setBlockData(config?.blockData ?? false);
+  return p;
+}
+function requireReady() {
+  if (!ready) {
+    throw new Error(
+      "flux-md/server: WASM not initialized. Call `await initFlux()` (or `initFluxSync(bytes)`) once before rendering."
+    );
+  }
+}
+function parseToBlocks(markdown, opts) {
+  requireReady();
+  const p = makeParser(opts?.config);
+  try {
+    p.append(markdown);
+    p.finalize();
+    return JSON.parse(p.allBlocks());
+  } finally {
+    p.free();
+  }
+}
+function renderToString(markdown, opts) {
+  return parseToBlocks(markdown, opts).map((b) => b.html).join("");
+}
+export {
+  initFlux,
+  initFluxSync,
+  isFluxReady,
+  parseToBlocks,
+  renderToString
+};

package/{src/solid.tsx → dist/solid.d.ts}

@@ -1,8 +1,7 @@
-import { createEffect, createSignal, onCleanup, onMount, type Accessor, type JSX } from "solid-js";
-import { FluxClient } from "./client";
-import type { ParserConfig } from "./types-core";
-import { mountFluxMarkdown, tailOpenBlockId, type MountHandle, type MountOptions } from "./dom";
-
+import { type Accessor, type JSX } from "solid-js";
+import { FluxClient } from "./client.js";
+import type { ParserConfig } from "./types-core.js";
+import { type MountHandle, type MountOptions } from "./dom.js";
 /**
  * Solid binding for the framework-neutral DOM renderer ({@link mountFluxMarkdown}).
  *
@@ -15,39 +14,18 @@ import { mountFluxMarkdown, tailOpenBlockId, type MountHandle, type MountOptions
  * Ownership: unmount calls `handle.destroy()` (unsubscribe + remove the renderer
  * root) and never `client.destroy()`. The caller owns the worker/stream.
  */
-
 export interface FluxMarkdownProps extends MountOptions {
-  client: FluxClient;
-  class?: string;
-  style?: JSX.CSSProperties | string;
+    client: FluxClient;
+    class?: string;
+    style?: JSX.CSSProperties | string;
 }
-
 /**
  * Mount the DOM renderer and register its teardown — the testable core, free of
  * JSX so it runs under any toolchain. `getProps` is read once (snapshot), the
  * handle is returned so callers/tests can observe `destroy`, and the teardown is
  * handed to `registerCleanup` (Solid's `onCleanup` at the call site).
  */
-export function mountSolid(
-  getProps: () => FluxMarkdownProps,
-  container: HTMLElement,
-  registerCleanup: (fn: () => void) => void,
-): MountHandle {
-  const p = getProps();
-  // Explicit field copy (not rest-spread): keeps `client`/`class`/`style` out of
-  // MountOptions and threads `batch`/`highlightCode` straight through.
-  const handle = mountFluxMarkdown(p.client, container, {
-    components: p.components,
-    sanitize: p.sanitize,
-    virtualize: p.virtualize,
-    stickToBottom: p.stickToBottom,
-    highlightCode: p.highlightCode,
-    batch: p.batch,
-  });
-  registerCleanup(() => handle.destroy());
-  return handle;
-}
-
+export declare function mountSolid(getProps: () => FluxMarkdownProps, container: HTMLElement, registerCleanup: (fn: () => void) => void): MountHandle;
 /**
  * A fine-grained accessor for the streaming **tail** block id — the one block
  * that may still re-render — driven by Solid's own reactivity. Subscribes to the
@@ -61,28 +39,14 @@ export function mountSolid(
  * under any toolchain; the public {@link createTailBlockId} wires Solid's
  * `onCleanup`.
  */
-export function setupTailBlockId(
-  client: FluxClient,
-  registerCleanup: (fn: () => void) => void,
-): Accessor<number | null> {
-  const [tail, setTail] = createSignal<number | null>(tailOpenBlockId(client.getSnapshot()));
-  // setTail no-ops when the value is unchanged (Solid's default equality), so
-  // pure tail-html growth that keeps the same open id never re-fires downstream.
-  const unsubscribe = client.subscribe(() => setTail(tailOpenBlockId(client.getSnapshot())));
-  registerCleanup(unsubscribe);
-  return tail;
-}
-
+export declare function setupTailBlockId(client: FluxClient, registerCleanup: (fn: () => void) => void): Accessor<number | null>;
 /**
  * Own a fine-grained tail-block-id accessor for `client`, wired to Solid's
  * `onCleanup`. Pair it with `<FluxMarkdown client={client} />`: the component
  * draws the document, this accessor narrows any extra reactive work you key off
  * the live tail (e.g. a "streaming…" affordance) to just the open block.
  */
-export function createTailBlockId(client: FluxClient): Accessor<number | null> {
-  return setupTailBlockId(client, onCleanup);
-}
-
+export declare function createTailBlockId(client: FluxClient): Accessor<number | null>;
 /**
  * The container `<div>` the DOM renderer mounts into. We do not set
  * `class="flux-md"`: the renderer appends its own `.flux-md` root inside it.
@@ -94,22 +58,7 @@ export function createTailBlockId(client: FluxClient): Accessor<number | null> {
  * bun. A real DOM node is a valid Solid `JSX.Element`; under a Solid build this
  * is equivalent to `<div ref={container} class={props.class} style={props.style} />`.
  */
-export function FluxMarkdown(props: FluxMarkdownProps): JSX.Element {
-  // SSR: this renderer is client-only and imperative (creates/owns its own DOM
-  // node, no hydration expected). Solid runs component bodies on the server, so
-  // guard the document access; the browser path is byte-identical (document is
-  // always defined there). onMount never fires on the server anyway.
-  if (typeof document === "undefined") return undefined as unknown as JSX.Element;
-  const container = document.createElement("div");
-  if (props.class) container.className = props.class;
-  if (typeof props.style === "string") container.setAttribute("style", props.style);
-  else if (props.style)
-    for (const [k, v] of Object.entries(props.style)) container.style.setProperty(k, String(v));
-  // Snapshot props once on mount; the renderer drives itself from here on.
-  onMount(() => mountSolid(() => props, container, onCleanup));
-  return container;
-}
-
+export declare function FluxMarkdown(props: FluxMarkdownProps): JSX.Element;
 /**
  * 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
@@ -122,33 +71,10 @@ export function FluxMarkdown(props: FluxMarkdownProps): JSX.Element {
  * 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;
-}
-
+export declare function setupFluxMarkdownString(getContent: () => string, getOptions: (() => {
+    config?: ParserConfig;
+    streaming?: boolean;
+}) | undefined, registerEffect: (fn: () => void) => void, registerCleanup: (fn: () => void) => void): FluxClient;
 /**
  * Own a {@link FluxClient} driven by a CONTROLLED full string — the Solid
  * analogue of React's `useFluxMarkdownString`, for UIs that hold a streaming
@@ -172,9 +98,7 @@ export function setupFluxMarkdownString(
  * `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);
-}
+export declare function createFluxMarkdownString(getContent: () => string, getOptions?: () => {
+    config?: ParserConfig;
+    streaming?: boolean;
+}): FluxClient;

package/dist/solid.js

@@ -0,0 +1,54 @@
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { FluxClient } from "./client.js";
+import { mountFluxMarkdown, tailOpenBlockId } from "./dom.js";
+function mountSolid(getProps, container, registerCleanup) {
+  const p = getProps();
+  const handle = mountFluxMarkdown(p.client, container, {
+    components: p.components,
+    sanitize: p.sanitize,
+    virtualize: p.virtualize,
+    stickToBottom: p.stickToBottom,
+    highlightCode: p.highlightCode,
+    batch: p.batch
+  });
+  registerCleanup(() => handle.destroy());
+  return handle;
+}
+function setupTailBlockId(client, registerCleanup) {
+  const [tail, setTail] = createSignal(tailOpenBlockId(client.getSnapshot()));
+  const unsubscribe = client.subscribe(() => setTail(tailOpenBlockId(client.getSnapshot())));
+  registerCleanup(unsubscribe);
+  return tail;
+}
+function createTailBlockId(client) {
+  return setupTailBlockId(client, onCleanup);
+}
+function FluxMarkdown(props) {
+  if (typeof document === "undefined") return void 0;
+  const container = document.createElement("div");
+  if (props.class) container.className = props.class;
+  if (typeof props.style === "string") container.setAttribute("style", props.style);
+  else if (props.style)
+    for (const [k, v] of Object.entries(props.style)) container.style.setProperty(k, String(v));
+  onMount(() => mountSolid(() => props, container, onCleanup));
+  return container;
+}
+function setupFluxMarkdownString(getContent, getOptions, registerEffect, registerCleanup) {
+  const client = new FluxClient({ config: getOptions?.()?.config });
+  registerEffect(() => {
+    client.setContent(getContent(), { done: getOptions?.()?.streaming === false });
+  });
+  registerCleanup(() => client.destroy());
+  return client;
+}
+function createFluxMarkdownString(getContent, getOptions) {
+  return setupFluxMarkdownString(getContent, getOptions, createEffect, onCleanup);
+}
+export {
+  FluxMarkdown,
+  createFluxMarkdownString,
+  createTailBlockId,
+  mountSolid,
+  setupFluxMarkdownString,
+  setupTailBlockId
+};

package/dist/svelte.d.ts

@@ -0,0 +1,80 @@
+import type { ActionReturn } from "svelte/action";
+import { type Readable } from "svelte/store";
+import { FluxClient } from "./client.js";
+import type { ParserConfig } from "./types-core.js";
+import { type DomComponents } from "./dom.js";
+/**
+ * Svelte action that mounts a streaming {@link FluxClient} into the host node.
+ * Plain `.ts` — no `.svelte` compile step — so `use:` works unchanged in
+ * Svelte 4 and 5. The action owns only lifecycle: it mounts on creation and
+ * tears the mount down on destroy. The caller keeps ownership of the client
+ * (the worker/stream); the action never calls `client.destroy()`.
+ *
+ * ```svelte
+ * <div use:fluxMarkdown={{ client, stickToBottom: true }} />
+ * ```
+ */
+export interface FluxMarkdownParams {
+    client: FluxClient;
+    components?: DomComponents;
+    sanitize?: (h: string) => string;
+    virtualize?: boolean;
+    stickToBottom?: boolean;
+}
+export declare function fluxMarkdown(node: HTMLElement, params: FluxMarkdownParams): ActionReturn<FluxMarkdownParams>;
+/**
+ * A fine-grained Svelte `Readable` store of the streaming **tail** block id — the
+ * one block that may still re-render — driven by the client's own subscribe loop.
+ * The store sets a new value only when the tail id changes, so a `$tail`
+ * subscription or `derived(tail, …)` re-evaluates *only* for the tail, never for
+ * the committed body. Subscribing renders nothing: {@link fluxMarkdown} draws the
+ * document; this mirrors `MountHandle.openBlockId` through Svelte's primitive for
+ * any extra tail-scoped work. The client subscription is owned by the store and
+ * torn down when the last subscriber leaves (Svelte's `readable` stop fn).
+ *
+ * ```svelte
+ * const tail = tailBlockId(client); // $tail is the open block id, or null
+ * ```
+ */
+export declare function tailBlockId(client: FluxClient): Readable<number | null>;
+/**
+ * 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;
+}
+export declare function fluxMarkdownString(node: HTMLElement, params: FluxMarkdownStringParams): ActionReturn<FluxMarkdownStringParams>;