flux-md 0.16.2 → 0.18.0

package/dist/react.d.ts

@@ -0,0 +1,204 @@
+import type { Block, BlockComponentProps, Components } from "./types.js";
+import { FluxClient } from "./client.js";
+import type { ParserConfig, RenderMetricsHook } from "./types-core.js";
+/**
+ * Render a streaming markdown document from a FluxClient. Each block is its
+ * own memoized React node keyed by its stable parser-assigned ID, so React
+ * only reconciles the blocks whose HTML actually changed since the last
+ * patch. Heavy renderers (Shiki, KaTeX, Mermaid) defer work until a block
+ * is closed.
+ *
+ * ## Custom components
+ *
+ * Pass `components` to override rendering (see {@link Components}):
+ *
+ * ```tsx
+ * <FluxMarkdown
+ *   client={client}
+ *   components={{
+ *     table: (p) => <table className="my-table" {...p} />, // tag-level
+ *     a: (p) => <a target="_blank" rel="noreferrer" {...p} />,
+ *     CodeBlock: (p) => <MyCodeBlock {...p} />,             // block-kind
+ *   }}
+ * />
+ * ```
+ *
+ * Rules:
+ *   - **Tag-level** keys (`table`, `a`, `code`, `h1`…) replace that element
+ *     wherever it appears inside a block. Applied by converting the block's
+ *     trusted HTML to a React tree.
+ *   - **Block-kind** keys ({@link BlockKindTag}: `CodeBlock`, `Mermaid`,
+ *     `Table`…) replace the whole block; the component gets
+ *     {@link BlockComponentProps}.
+ *   - **Open / speculative** blocks always render via `innerHTML` (their HTML
+ *     is partial); a tag-level override takes effect once the block commits.
+ *   - With no `components` prop the renderer takes the original fast
+ *     `innerHTML` path — output is byte-identical to before.
+ *   - **Memoize `components`** (or hoist it) if you define it inside a
+ *     component — a fresh object identity each render busts the block memo and
+ *     forces every block to re-parse on every patch.
+ *   - For code blocks the built-in highlighter is the default; it is bypassed
+ *     (so your override wins) when you provide `components.CodeBlock`,
+ *     `components.pre`, or `components.code`.
+ */
+interface FluxMarkdownProps {
+    /**
+     * A caller-owned client (you drive `append`/`finalize` and own its lifecycle —
+     * the component never destroys it). Mutually exclusive with `stream`; if both
+     * are given, `client` wins (a dev warning fires).
+     */
+    client?: FluxClient;
+    /**
+     * A stream to render directly — the 1-line common case. Pass a `Response`, a
+     * `ReadableStream<Uint8Array>`, or an `AsyncIterable<string>` (e.g. SSE
+     * deltas) and the component owns an internal client, pipes the stream, and
+     * destroys it on unmount. A new `stream` identity supersedes the old.
+     */
+    stream?: AsyncIterable<string> | ReadableStream<Uint8Array> | Response;
+    /** Parser config for the internally-created client (stream mode only). */
+    streamConfig?: ParserConfig;
+    /** Called if piping the `stream` rejects (the source errored). Not the worker error channel. */
+    onStreamError?: (err: Error) => void;
+    components?: Components;
+    /**
+     * Skip layout/paint for off-screen blocks via CSS `content-visibility: auto`
+     * — for very long documents (hundreds+ of blocks). Off by default. Applies
+     * only to *closed* blocks (the streaming tail always renders fully). Keeps
+     * nodes in the DOM; it cuts rendering cost, not node count.
+     */
+    virtualize?: boolean;
+    /**
+     * Render a bottom snap target so the view follows the streaming tail. This is
+     * CSS-only: it emits a sentinel with `scroll-snap-align: end`; **you** add
+     * `scroll-snap-type: y proximity` to your scroll container. The view then
+     * follows the bottom as content streams in and releases when the user scrolls
+     * up (and re-locks when they scroll back near the bottom). Off by default.
+     */
+    stickToBottom?: boolean;
+    /**
+     * Optional HTML sanitizer applied to every block's HTML before it is injected
+     * via `innerHTML` — **including the streaming (open/speculative) tail**, the
+     * path that raw `innerHTML` would otherwise expose. Pass a real sanitizer
+     * (e.g. DOMPurify's `sanitize`) when rendering untrusted / LLM HTML with
+     * `unsafeHtml` on. flux-md stays zero-dep — you bring the sanitizer. The
+     * built-in code/math renderers operate on already-escaped content and are not
+     * run through it. When omitted, rendering is byte-identical and zero-cost.
+     *
+     * **Memoize / hoist this** (same trap as `components`): a fresh closure each
+     * render busts the per-block memo, so every block re-sanitizes and re-parses
+     * on every patch instead of only the streaming tail.
+     */
+    sanitize?: (html: string) => string;
+    /**
+     * Opt-in: when an OPEN (streaming) block re-renders each patch, reuse the
+     * React nodes of its top-level children whose HTML is unchanged and re-parse
+     * only the new trailing content, instead of re-parsing the block's whole HTML
+     * every tick. Only takes effect when `components` (or `sanitize`) routes a
+     * block through the parser; the no-`components` fast path (`innerHTML`) is
+     * untouched. Off by default and byte-identical to default rendering — enable
+     * it for documents with a long, slowly-growing streamed block under a custom
+     * `components` map. Closed blocks are already wholesale memo-skipped, so this
+     * applies only to the streaming tail.
+     */
+    childMemo?: boolean;
+    /** 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"`, `"log"`). */
+    role?: string;
+    /**
+     * Make the root a live region so screen readers announce streamed content.
+     * `"polite"` (recommended) coalesces rapid updates and announces when the
+     * reader is idle — it does **not** read every token. Off by default.
+     */
+    "aria-live"?: "off" | "polite" | "assertive";
+    /** Live-region atomicity; pair with `aria-live`. Off by default. */
+    "aria-atomic"?: boolean;
+    /**
+     * Optional render-churn probe. Fires once per ACTUAL render of a block —
+     * never for a committed block that memo-skips on a tail-only patch. The
+     * callback gets the block id and a {@link RenderMetrics} sample (per-block
+     * `renderCount`, `speculativeToggleCount`, `lastRenderMs`, `kind`). Zero
+     * overhead when omitted. **Memoize / hoist this** (same trap as `components`):
+     * a fresh closure each render busts the per-block memo, forcing every block to
+     * re-render on every patch.
+     */
+    onRenderMetrics?: RenderMetricsHook;
+    /**
+     * **Opt-in, off by default.** Render the block list through React's
+     * `useDeferredValue`, so a burst of patches can yield to higher-priority
+     * updates and the streaming tail commits at a lower priority. When a deferred
+     * render is in flight the root carries an extra `flux-deferred` class (style it
+     * however you like). This is a *no-op on a single patch*, has no effect during
+     * SSR (`useDeferredValue` is a client-only concern), and **does not change
+     * output** — only commit timing. Leaving it unset is recommended; rAF
+     * coalescing (the DOM adapter's batched path) is the preferred way to absorb
+     * high-frequency patches. Provided for callers who specifically want React's
+     * concurrent deferral of the visible tail.
+     */
+    deferTail?: boolean;
+}
+/**
+ * Own a {@link FluxClient} for the lifetime of a component and drive it from a
+ * `stream` (a `Response`, `ReadableStream<Uint8Array>`, or
+ * `AsyncIterable<string>`). Returns the client (read `outline()` / `getMetrics()`
+ * off it, or pass it to `<FluxMarkdown client={…} />`). The client is created
+ * once and destroyed on unmount; a new `stream` identity supersedes the old
+ * (the prior pipe is aborted, the parser is reset, the new stream is piped).
+ *
+ * Caveat (matches the manual `useEffect` form): a single-use stream — a
+ * `Response`/`ReadableStream`, or an async generator — can only be consumed
+ * once, so React **StrictMode**'s dev-only double-mount may truncate it in
+ * development. Production mounts once and is unaffected. If you need dev-exact
+ * streaming, drive a caller-owned client manually.
+ */
+export declare function useFluxStream(stream: AsyncIterable<string> | ReadableStream<Uint8Array> | Response | null | undefined, options?: {
+    config?: ParserConfig;
+    onError?: (err: Error) => void;
+}): FluxClient;
+/**
+ * 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 declare function useFluxMarkdownString(content: string, options?: {
+    config?: ParserConfig;
+    streaming?: boolean;
+}): FluxClient;
+declare function FluxMarkdownImpl(props: FluxMarkdownProps): import("react/jsx-runtime").JSX.Element;
+export declare const FluxMarkdown: import("react").MemoExoticComponent<typeof FluxMarkdownImpl>;
+export declare function blockKindProps(block: Block, components?: Components): BlockComponentProps;
+export declare function blocksEqual(prev: {
+    block: Block;
+    components?: Components;
+    virtualize?: boolean;
+    sanitize?: (html: string) => string;
+    childMemo?: boolean;
+    onRenderMetrics?: RenderMetricsHook;
+}, next: {
+    block: Block;
+    components?: Components;
+    virtualize?: boolean;
+    sanitize?: (html: string) => string;
+    childMemo?: boolean;
+    onRenderMetrics?: RenderMetricsHook;
+}): boolean;
+export {};

package/dist/react.js

@@ -0,0 +1,490 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createElement,
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useDeferredValue
+} from "react";
+import { FluxClient } from "./client.js";
+import { CodeBlock } from "./renderers/CodeBlock.js";
+import { MathBlock } from "./renderers/Math.js";
+import { Mermaid } from "./renderers/Mermaid.js";
+import { htmlToReact } from "./html-to-react.js";
+function FluxMarkdownFromClient({
+  client,
+  components,
+  virtualize,
+  stickToBottom,
+  sanitize,
+  childMemo,
+  className,
+  id,
+  role,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  onRenderMetrics,
+  deferTail
+}) {
+  const blocks = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot);
+  const deferred = useDeferredValue(blocks);
+  const rendered = deferTail ? deferred : blocks;
+  const isDeferring = deferTail ? rendered !== blocks : false;
+  const comps = useMemo(
+    () => components && Object.keys(components).length > 0 ? components : void 0,
+    [components]
+  );
+  const onMetrics = useMemo(
+    () => onRenderMetrics ? (id2, m) => {
+      client.__noteRender();
+      onRenderMetrics(id2, m);
+    } : void 0,
+    [client, onRenderMetrics]
+  );
+  const rootClass = isDeferring ? className ? `flux-md flux-deferred ${className}` : "flux-md flux-deferred" : className ? `flux-md ${className}` : "flux-md";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: rootClass,
+      id,
+      role,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic,
+      children: [
+        rendered.map((b) => /* @__PURE__ */ jsx(
+          BlockView,
+          {
+            block: b,
+            components: comps,
+            virtualize,
+            sanitize,
+            childMemo,
+            onRenderMetrics: onMetrics
+          },
+          b.id
+        )),
+        stickToBottom && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { scrollSnapAlign: "end" }, className: "flux-bottom-anchor" })
+      ]
+    }
+  );
+}
+function useFluxStream(stream, options) {
+  const [client] = useState(() => new FluxClient({ config: options?.config, coalesce: true }));
+  const onErrorRef = useRef(options?.onError);
+  onErrorRef.current = options?.onError;
+  const prevStream = useRef(void 0);
+  useEffect(() => {
+    client.reattach();
+    return () => client.destroy();
+  }, [client]);
+  useEffect(() => {
+    if (stream == null) return;
+    const ac = new AbortController();
+    if (prevStream.current !== void 0 && prevStream.current !== stream) {
+      client.reset();
+    }
+    prevStream.current = stream;
+    client.pipeFrom(stream, { signal: ac.signal }).catch((e) => {
+      if (!ac.signal.aborted) {
+        onErrorRef.current?.(e instanceof Error ? e : new Error(String(e)));
+      }
+    });
+    return () => ac.abort();
+  }, [stream, client]);
+  return client;
+}
+function useFluxMarkdownString(content, options) {
+  const [client] = useState(() => new FluxClient({ config: options?.config, coalesce: true }));
+  useEffect(() => {
+    client.reattach();
+    return () => client.destroy();
+  }, [client]);
+  const streaming = options?.streaming;
+  useEffect(() => {
+    client.setContent(content, { done: streaming === false });
+  }, [client, content, streaming]);
+  return client;
+}
+function FluxMarkdownFromStream(props) {
+  const client = useFluxStream(props.stream, {
+    config: props.streamConfig,
+    onError: props.onStreamError
+  });
+  return /* @__PURE__ */ jsx(FluxMarkdownFromClient, { ...props, client });
+}
+function FluxMarkdownImpl(props) {
+  if (props.stream != null && props.client == null) {
+    return /* @__PURE__ */ jsx(FluxMarkdownFromStream, { ...props });
+  }
+  if (props.client == null) {
+    throw new Error("<FluxMarkdown>: pass either a `client` or a `stream` prop.");
+  }
+  return /* @__PURE__ */ jsx(FluxMarkdownFromClient, { ...props });
+}
+const FluxMarkdown = memo(FluxMarkdownImpl);
+function decodeEntities(s) {
+  return s.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
+}
+function decodeCodeText(html) {
+  const m = html.match(/<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
+  return m ? decodeEntities(m[1]) : "";
+}
+function decodeMathText(html) {
+  const d = html.match(/<div class="math math-display">([\s\S]*?)<\/div>/);
+  if (d) return decodeEntities(d[1]);
+  return decodeCodeText(html);
+}
+function blockKindProps(block, components) {
+  const props = {
+    block,
+    html: block.html,
+    open: block.open,
+    speculative: block.speculative
+  };
+  const data = block.kind.data;
+  if (block.kind.type === "CodeBlock") {
+    props.text = data?.code ?? decodeCodeText(block.html);
+    props.language = data?.lang ?? "";
+    if (typeof data?.code === "string") {
+      props.code = { lang: data.lang ?? null, code: data.code };
+    }
+  } else if (block.kind.type === "MathBlock") {
+    props.text = data?.latex ?? decodeMathText(block.html);
+    if (typeof data?.latex === "string") {
+      props.math = { latex: data.latex };
+    }
+  } else if (block.kind.type === "List") {
+    if (data && typeof data.start === "number") {
+      props.list = { ordered: !!data.ordered, start: data.start, items: data.items };
+    }
+  } else if (block.kind.type === "Component") {
+    props.tag = data?.tag ?? "";
+    props.attrs = reactAttrs(data?.attrs ?? []);
+    props.html = componentInnerHtml(block.html, props.tag);
+    props.children = htmlToReact(props.html, components ?? {});
+  } else if (block.kind.type === "Table") {
+    props.table = block.kind.data;
+  } else if (block.kind.type === "Heading") {
+    if (typeof block.kind.data === "object" && block.kind.data !== null) {
+      props.heading = block.kind.data;
+    }
+  } else if (block.kind.type === "Blockquote" || block.kind.type === "Alert") {
+    const cd = block.kind.data;
+    if (cd && Array.isArray(cd.nested)) {
+      props.container = { nested: cd.nested };
+    }
+  }
+  return props;
+}
+const REACT_ATTR_NAME = Object.assign(/* @__PURE__ */ Object.create(null), {
+  class: "className",
+  for: "htmlFor"
+});
+const ATTR_DENY = /* @__PURE__ */ new Set([
+  "dangerouslysetinnerhtml",
+  "ref",
+  "key",
+  "defaultvalue",
+  "defaultchecked",
+  "suppresshydrationwarning",
+  "suppresscontenteditablewarning"
+]);
+const SAFE_ATTR_NAME = /^[a-z][a-z0-9-]*$/i;
+function reactAttrs(pairs) {
+  const out = {};
+  for (const [k, v] of pairs) {
+    const lower = k.toLowerCase();
+    if (lower.startsWith("on")) continue;
+    if (ATTR_DENY.has(lower)) continue;
+    if (!(lower in REACT_ATTR_NAME) && !SAFE_ATTR_NAME.test(k)) continue;
+    out[REACT_ATTR_NAME[lower] ?? k] = v;
+  }
+  return out;
+}
+function componentInnerHtml(html, tag) {
+  const gt = html.indexOf(">");
+  if (gt < 0) return "";
+  let inner = html.slice(gt + 1);
+  const close = `</${tag}>`;
+  if (inner.endsWith(close)) inner = inner.slice(0, -close.length);
+  return inner.replace(/^\n/, "").replace(/\n$/, "");
+}
+const CHILD_MEMO_CAP = 4096;
+function SafeHtml({
+  html,
+  components,
+  childMemo
+}) {
+  const memoRef = useRef(null);
+  const compRef = useRef(null);
+  return useMemo(() => {
+    if (!childMemo) {
+      memoRef.current = null;
+      return htmlToReact(html, components);
+    }
+    if (memoRef.current === null || compRef.current !== components) {
+      memoRef.current = /* @__PURE__ */ new Map();
+      compRef.current = components;
+    }
+    const map = memoRef.current;
+    if (map.size > CHILD_MEMO_CAP) map.clear();
+    return htmlToReact(html, components, map);
+  }, [html, components, childMemo]);
+}
+function KeyedListItemImpl({
+  html,
+  components,
+  sanitize
+}) {
+  const safe = sanitize ? sanitize(html) : html;
+  if (components) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SafeHtml, { html: safe, components }) });
+  }
+  return /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: safe } });
+}
+const KeyedListItem = memo(KeyedListItemImpl);
+function KeyedList({
+  className,
+  ordered,
+  start,
+  items,
+  components,
+  sanitize
+}) {
+  const children = items.map((it, i) => /* @__PURE__ */ jsx(KeyedListItem, { html: it.html, components, sanitize }, i));
+  const inner = ordered ? createElement("ol", start !== void 0 && start !== 1 ? { start } : null, children) : createElement("ul", null, children);
+  return /* @__PURE__ */ jsx("div", { className, children: inner });
+}
+function KeyedContainer({
+  block,
+  nested,
+  components
+}) {
+  const tagName = block.kind.type === "Alert" ? "div" : "blockquote";
+  const attrs = useMemo(() => parseOpenTagAttrs(block.html), [block.html]);
+  const children = [];
+  if (block.kind.type === "Alert") {
+    const title = alertTitleHtml(block.html);
+    if (title) {
+      children.push(/* @__PURE__ */ jsx(SafeHtml, { html: title, components }, "title"));
+    }
+  }
+  for (let i = 0; i < nested.length; i++) {
+    children.push(/* @__PURE__ */ jsx(SafeHtml, { html: nested[i].html, components }, i));
+  }
+  return createElement(tagName, attrs, children);
+}
+const CONTAINER_ATTR_RE = /([a-zA-Z][a-zA-Z0-9-]*)="([^"]*)"/g;
+function parseOpenTagAttrs(html) {
+  const gt = html.indexOf(">");
+  const open = gt < 0 ? html : html.slice(0, gt);
+  const out = {};
+  let m;
+  CONTAINER_ATTR_RE.lastIndex = 0;
+  while (m = CONTAINER_ATTR_RE.exec(open)) {
+    const name = m[1].toLowerCase();
+    if (name === "class") out.className = m[2];
+    else if (name === "dir" || name === "role" || name.startsWith("data-")) out[name] = m[2];
+  }
+  return out;
+}
+function alertTitleHtml(html) {
+  const m = html.match(/<p class="markdown-alert-title"[^>]*>.*?<\/p>/s);
+  return m ? m[0] : "";
+}
+const NO_COMPONENTS = Object.freeze(/* @__PURE__ */ Object.create(null));
+const TableCellView = memo(function TableCellView2({
+  tag,
+  html,
+  align,
+  scope,
+  components,
+  sanitize
+}) {
+  const tree = useMemo(
+    () => htmlToReact(sanitize ? sanitize(html) : html, components),
+    [html, components, sanitize]
+  );
+  return createElement(
+    tag,
+    {
+      scope: tag === "th" && scope ? "col" : void 0,
+      style: align ? { textAlign: align } : void 0
+    },
+    tree
+  );
+});
+function KeyedTable({
+  data,
+  html,
+  components,
+  sanitize
+}) {
+  const comps = components ?? NO_COMPONENTS;
+  const headerPrefix = useMemo(() => {
+    const i = html.indexOf("</thead>");
+    return i === -1 ? html : html.slice(0, i);
+  }, [html]);
+  const dir = useMemo(
+    () => headerPrefix.startsWith('<table dir="auto"') ? "auto" : void 0,
+    [headerPrefix]
+  );
+  const scope = useMemo(() => headerPrefix.includes('<th scope="col"'), [headerPrefix]);
+  const aligns = data.aligns;
+  return /* @__PURE__ */ jsxs("table", { dir, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: data.headers.map((c, j) => /* @__PURE__ */ jsx(
+      TableCellView,
+      {
+        tag: "th",
+        html: c.html,
+        align: aligns[j] ?? null,
+        scope,
+        components: comps,
+        sanitize
+      },
+      j
+    )) }) }),
+    data.rows.length > 0 && /* @__PURE__ */ jsx("tbody", { children: data.rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((c, j) => /* @__PURE__ */ jsx(
+      TableCellView,
+      {
+        tag: "td",
+        html: c.html,
+        align: aligns[j] ?? null,
+        scope,
+        components: comps,
+        sanitize
+      },
+      j
+    )) }, i)) })
+  ] });
+}
+const INTRINSIC_PX = {
+  Paragraph: 80,
+  Heading: 44,
+  CodeBlock: 300,
+  MathBlock: 140,
+  Mermaid: 220,
+  List: 120,
+  Blockquote: 100,
+  Alert: 120,
+  Table: 200,
+  Rule: 24,
+  Html: 80,
+  Component: 120
+};
+function BlockViewImpl(props) {
+  const { block, virtualize, onRenderMetrics } = props;
+  const metricsRef = useRef(
+    onRenderMetrics ? { renderCount: 0, toggle: 0, speculative: block.speculative } : null
+  );
+  const hasPerf = typeof performance !== "undefined";
+  const t0 = onRenderMetrics && hasPerf ? performance.now() : 0;
+  const content = renderBlockContent(props);
+  if (onRenderMetrics) {
+    const m = metricsRef.current ??= { renderCount: 0, toggle: 0, speculative: block.speculative };
+    m.renderCount++;
+    if (m.speculative !== block.speculative) {
+      m.toggle++;
+      m.speculative = block.speculative;
+    }
+    onRenderMetrics(block.id, {
+      renderCount: m.renderCount,
+      speculativeToggleCount: m.toggle,
+      lastRenderMs: hasPerf ? performance.now() - t0 : 0,
+      kind: block.kind.type
+    });
+  }
+  if (virtualize && !block.open && !block.speculative) {
+    const px = INTRINSIC_PX[block.kind.type] ?? 120;
+    return /* @__PURE__ */ jsx("div", { style: { contentVisibility: "auto", containIntrinsicSize: `auto ${px}px` }, children: content });
+  }
+  return content;
+}
+function renderBlockContent({
+  block,
+  components,
+  sanitize,
+  childMemo
+}) {
+  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, blockKindProps(block, components));
+      }
+    }
+    const blockOverride = components[kind];
+    if (blockOverride) {
+      return createElement(blockOverride, blockKindProps(block, components));
+    }
+  }
+  switch (kind) {
+    case "CodeBlock": {
+      const wantsCodeOverride = !!components && (!!components.pre || !!components.code);
+      if (!wantsCodeOverride) return /* @__PURE__ */ jsx(CodeBlock, { html: block.html, open: block.open });
+      break;
+    }
+    case "MathBlock":
+      return /* @__PURE__ */ jsx(MathBlock, { html: block.html, open: block.open });
+    case "Mermaid":
+      return /* @__PURE__ */ jsx(Mermaid, { html: block.html, open: block.open });
+  }
+  const className = "flux-block flux-block-" + kind.toLowerCase() + (block.open ? " flux-open" : "") + (block.speculative ? " flux-speculative" : "");
+  if (kind === "Table" && block.open) {
+    const data = block.kind.data;
+    if (data && Array.isArray(data.rows)) {
+      return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(KeyedTable, { data, html: block.html, components, sanitize }) });
+    }
+  }
+  if (block.open && kind === "List") {
+    const ld = block.kind.data;
+    const items = ld?.items;
+    const tagOverride = !!components && (!!components.ul || !!components.ol || !!components.li);
+    if (Array.isArray(items) && items.length > 0 && !tagOverride) {
+      return /* @__PURE__ */ jsx(
+        KeyedList,
+        {
+          className,
+          ordered: !!ld?.ordered,
+          start: ld?.start,
+          items,
+          components,
+          sanitize
+        }
+      );
+    }
+  }
+  if (components) {
+    if (block.open && !sanitize && (kind === "Blockquote" || kind === "Alert")) {
+      const nested = block.kind.data?.nested;
+      if (Array.isArray(nested)) {
+        return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(KeyedContainer, { block, nested, components }) });
+      }
+    }
+    const safe = sanitize ? sanitize(block.html) : block.html;
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(SafeHtml, { html: safe, components, childMemo: childMemo && block.open }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: sanitize ? sanitize(block.html) : block.html }
+    }
+  );
+}
+function blocksEqual(prev, next) {
+  return prev.block.id === next.block.id && prev.block.html === next.block.html && prev.block.open === next.block.open && prev.block.speculative === next.block.speculative && prev.components === next.components && prev.virtualize === next.virtualize && prev.sanitize === next.sanitize && prev.childMemo === next.childMemo && prev.onRenderMetrics === next.onRenderMetrics;
+}
+const BlockView = memo(BlockViewImpl, blocksEqual);
+export {
+  FluxMarkdown,
+  blockKindProps,
+  blocksEqual,
+  useFluxMarkdownString,
+  useFluxStream
+};