brookmd 0.22.0

package/dist/server-react.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import type { Components, ParserConfig } from "./types.js";
+interface BrookMarkdownStaticProps {
+    /** 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 `brook-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 `<BrookMarkdown>` 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 `brook-md` root +
+ * per-block structure with the same `components` overrides (inline/block
+ * component tags dispatch here too). Requires `initBrook` (or `initBrookSync`)
+ * from `brookmd/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 `<BrookMarkdown>` instead (and if you SSR-then-hydrate, render the
+ * *same* component on both sides).
+ */
+export declare function BrookMarkdownStatic({ content, config, components, className, id, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic, }: BrookMarkdownStaticProps): 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 = "brook-block brook-block-" + kind.toLowerCase() + (block.open ? " brook-open" : "") + (block.speculative ? " brook-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 BrookMarkdownStatic({
+  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 ? `brook-md ${className}` : "brook-md",
+      id,
+      role,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic
+    },
+    blocks.map((b) => renderStaticBlock(b, comps))
+  );
+}
+export {
+  BrookMarkdownStatic
+};

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 isBrookReady(): 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 initBrook} auto-loads the co-located WASM. */
+export declare function initBrookSync(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 initBrook(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 initBrook} 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 `<BrookMarkdown>`-matching React tree, use
+ * `BrookMarkdownStatic` from `brookmd/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,82 @@
+import initWasmAsync, { BrookParser, initSync } from "./wasm/brook_md_core.js";
+let ready = false;
+function isBrookReady() {
+  return ready;
+}
+function initBrookSync(wasm) {
+  if (ready) return;
+  initSync({ module: wasm });
+  ready = true;
+}
+let initPromise = null;
+function initBrook(opts) {
+  if (ready) return Promise.resolve();
+  if (opts?.wasm) {
+    initBrookSync(opts.wasm);
+    return Promise.resolve();
+  }
+  if (!initPromise) {
+    initPromise = (async () => {
+      const wasmUrl = new URL("./wasm/brook_md_core_bg.wasm", import.meta.url);
+      if (wasmUrl.protocol === "file:") {
+        const { readFile } = await import("node:fs/promises");
+        initBrookSync(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 BrookParser();
+  p.setGfmAutolinks(config?.gfmAutolinks ?? true);
+  p.setGfmAlerts(config?.gfmAlerts ?? true);
+  p.setGfmTagfilter(config?.gfmTagfilter ?? false);
+  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(
+      "brookmd/server: WASM not initialized. Call `await initBrook()` (or `initBrookSync(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 {
+  initBrook,
+  initBrookSync,
+  isBrookReady,
+  parseToBlocks,
+  renderToString
+};

package/dist/solid.d.ts

@@ -0,0 +1,104 @@
+import { type Accessor, type JSX } from "solid-js";
+import { BrookClient } 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 mountBrookMarkdown}).
+ *
+ * Deliberately thin lifecycle glue: it mounts the renderer once on `onMount` and
+ * tears it down on `onCleanup`. There is **no** `createEffect` — the DOM renderer
+ * owns its own `client.subscribe` loop and patches the container directly, so
+ * re-running mount on signal changes would thrash (double-subscribe, rebuild the
+ * tree). Props are read once as a non-reactive snapshot at mount time.
+ *
+ * Ownership: unmount calls `handle.destroy()` (unsubscribe + remove the renderer
+ * root) and never `client.destroy()`. The caller owns the worker/stream.
+ */
+export interface BrookMarkdownProps extends MountOptions {
+    client: BrookClient;
+    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 declare function mountSolid(getProps: () => BrookMarkdownProps, 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
+ * client once and updates a `createSignal` only when the tail id changes, so a
+ * downstream `createMemo`/effect that reads it re-evaluates *only* for the tail,
+ * never for the committed body. Reading it renders nothing: the DOM is owned by
+ * {@link mountBrookMarkdown}; this is a scheduling/diagnostic signal that mirrors
+ * {@link MountHandle.openBlockId} through Solid's primitive.
+ *
+ * Registrars are injected (like {@link mountSolid}) so the testable core runs
+ * under any toolchain; the public {@link createTailBlockId} wires Solid's
+ * `onCleanup`.
+ */
+export declare function setupTailBlockId(client: BrookClient, 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 `<BrookMarkdown 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 declare function createTailBlockId(client: BrookClient): Accessor<number | null>;
+/**
+ * The container `<div>` the DOM renderer mounts into. We do not set
+ * `class="brook-md"`: the renderer appends its own `.brook-md` root inside it.
+ *
+ * Authored imperatively rather than with a JSX literal: a JSX literal makes
+ * bun's transform inject an automatic-runtime import (`jsxDEV` from
+ * `solid-js/jsx-dev-runtime`) that Solid does not provide (Solid compiles JSX
+ * via dom-expressions, not a runtime), which breaks importing this module under
+ * 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 declare function BrookMarkdown(props: BrookMarkdownProps): JSX.Element;
+/**
+ * Wire a controlled string to a freshly-constructed {@link BrookClient}, free of
+ * Solid's reactive runtime so it runs (and is tested) under any toolchain. The
+ * registrars are injected: the public {@link createBrookMarkdownString} 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 declare function setupBrookMarkdownString(getContent: () => string, getOptions: (() => {
+    config?: ParserConfig;
+    streaming?: boolean;
+}) | undefined, registerEffect: (fn: () => void) => void, registerCleanup: (fn: () => void) => void): BrookClient;
+/**
+ * Own a {@link BrookClient} driven by a CONTROLLED full string — the Solid
+ * analogue of React's `useBrookMarkdownString`, 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 BrookClient.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 `<BrookMarkdown 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 declare function createBrookMarkdownString(getContent: () => string, getOptions?: () => {
+    config?: ParserConfig;
+    streaming?: boolean;
+}): BrookClient;

package/dist/solid.js

@@ -0,0 +1,54 @@
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { BrookClient } from "./client.js";
+import { mountBrookMarkdown, tailOpenBlockId } from "./dom.js";
+function mountSolid(getProps, container, registerCleanup) {
+  const p = getProps();
+  const handle = mountBrookMarkdown(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 BrookMarkdown(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 setupBrookMarkdownString(getContent, getOptions, registerEffect, registerCleanup) {
+  const client = new BrookClient({ config: getOptions?.()?.config });
+  registerEffect(() => {
+    client.setContent(getContent(), { done: getOptions?.()?.streaming === false });
+  });
+  registerCleanup(() => client.destroy());
+  return client;
+}
+function createBrookMarkdownString(getContent, getOptions) {
+  return setupBrookMarkdownString(getContent, getOptions, createEffect, onCleanup);
+}
+export {
+  BrookMarkdown,
+  createBrookMarkdownString,
+  createTailBlockId,
+  mountSolid,
+  setupBrookMarkdownString,
+  setupTailBlockId
+};

package/dist/styles.css

@@ -0,0 +1,188 @@
+/*
+ * brookmd — optional default theme.
+ *
+ *   import "brookmd/styles.css";
+ *
+ * Opt-in: import it for good-looking output out of the box (including the
+ * built-in syntax highlighter's colors); skip it to bring your own CSS — the
+ * rendered HTML is identical either way. Everything is scoped to `.brook-md`
+ * (the renderer's root) and driven by CSS custom properties, so you re-theme by
+ * overriding a few `--brook-*` vars rather than rewriting selectors.
+ *
+ * Light by default; dark automatically via `prefers-color-scheme`. Force a mode
+ * with `<div class="brook-md brook-dark">` or `brook-light`.
+ */
+
+.brook-md {
+  /* surfaces + text (light) */
+  --brook-fg: #1f2328;
+  --brook-fg-muted: #59636e;
+  --brook-fg-faint: #818b98;
+  --brook-border: #d1d9e0;
+  --brook-bg-code: #f6f8fa;
+  --brook-bg-inline: rgba(129, 139, 152, 0.16);
+  --brook-bg-quote: rgba(129, 139, 152, 0.08);
+  --brook-accent: #0969da;
+  /* syntax tokens (light) */
+  --brook-t-kw: #cf222e;
+  --brook-t-str: #0a3069;
+  --brook-t-num: #0550ae;
+  --brook-t-com: #59636e;
+  --brook-t-fn: #6639ba;
+  --brook-t-ty: #953800;
+  --brook-t-mac: #1f6feb;
+  --brook-t-attr: #116329;
+  --brook-t-tag: #116329;
+  --brook-t-var: #953800;
+  --brook-t-pun: var(--brook-fg);
+  /* sizing */
+  --brook-radius: 6px;
+  --brook-gap: 16px;
+
+  color: var(--brook-fg);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.6;
+  font-size: 1rem;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+
+/* Dark — automatic, and as an explicit `.brook-dark` escape hatch. */
+@media (prefers-color-scheme: dark) {
+  .brook-md:not(.brook-light) {
+    --brook-fg: #e6edf3;
+    --brook-fg-muted: #9198a1;
+    --brook-fg-faint: #6e7681;
+    --brook-border: #3d444d;
+    --brook-bg-code: #151b23;
+    --brook-bg-inline: rgba(101, 108, 118, 0.2);
+    --brook-bg-quote: rgba(101, 108, 118, 0.1);
+    --brook-accent: #4493f8;
+    --brook-t-kw: #ff7b72;
+    --brook-t-str: #a5d6ff;
+    --brook-t-num: #79c0ff;
+    --brook-t-com: #8b949e;
+    --brook-t-fn: #d2a8ff;
+    --brook-t-ty: #ffa657;
+    --brook-t-mac: #79c0ff;
+    --brook-t-attr: #7ee787;
+    --brook-t-tag: #7ee787;
+    --brook-t-var: #ffa657;
+  }
+}
+.brook-md.brook-dark {
+  --brook-fg: #e6edf3;
+  --brook-fg-muted: #9198a1;
+  --brook-fg-faint: #6e7681;
+  --brook-border: #3d444d;
+  --brook-bg-code: #151b23;
+  --brook-bg-inline: rgba(101, 108, 118, 0.2);
+  --brook-bg-quote: rgba(101, 108, 118, 0.1);
+  --brook-accent: #4493f8;
+  --brook-t-kw: #ff7b72;
+  --brook-t-str: #a5d6ff;
+  --brook-t-num: #79c0ff;
+  --brook-t-com: #8b949e;
+  --brook-t-fn: #d2a8ff;
+  --brook-t-ty: #ffa657;
+  --brook-t-mac: #79c0ff;
+  --brook-t-attr: #7ee787;
+  --brook-t-tag: #7ee787;
+  --brook-t-var: #ffa657;
+}
+
+/* ---- block rhythm ---------------------------------------------------------- */
+.brook-md > * { margin: 0 0 var(--brook-gap) 0; }
+.brook-md > *:last-child { margin-bottom: 0; }
+
+/* ---- headings -------------------------------------------------------------- */
+.brook-md h1, .brook-md h2, .brook-md h3,
+.brook-md h4, .brook-md h5, .brook-md h6 {
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 24px 0 var(--brook-gap);
+}
+.brook-md h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--brook-border); }
+.brook-md h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--brook-border); }
+.brook-md h3 { font-size: 1.25em; }
+.brook-md h4 { font-size: 1em; }
+.brook-md h5 { font-size: 0.875em; }
+.brook-md h6 { font-size: 0.85em; color: var(--brook-fg-muted); }
+.brook-md > h1:first-child, .brook-md > h2:first-child, .brook-md > h3:first-child { margin-top: 0; }
+
+/* ---- inline ---------------------------------------------------------------- */
+.brook-md a { color: var(--brook-accent); text-decoration: none; }
+.brook-md a:hover { text-decoration: underline; }
+/* A streaming link whose URL hasn't finished arriving renders as an inert
+   `<a data-brook-pending>` with no href — the UA gives an href-less anchor no
+   link styling, so restate the settled resting style here (identical color and
+   decoration, so completion changes nothing visually). Cursor stays default:
+   not clickable yet. */
+.brook-md a[data-brook-pending] { color: var(--brook-accent); text-decoration: none; cursor: default; }
+.brook-md strong { font-weight: 600; }
+.brook-md em { font-style: italic; }
+.brook-md del { color: var(--brook-fg-muted); }
+.brook-md img { max-width: 100%; height: auto; }
+
+/* ---- lists ----------------------------------------------------------------- */
+.brook-md ul, .brook-md ol { padding-left: 2em; }
+.brook-md li { margin: 0.25em 0; }
+.brook-md li > ul, .brook-md li > ol { margin: 0.25em 0; }
+.brook-md li::marker { color: var(--brook-fg-faint); }
+.brook-md input[type="checkbox"] { margin: 0 0.4em 0 0; }
+
+/* ---- blockquote + alerts --------------------------------------------------- */
+.brook-md blockquote {
+  margin: 0 0 var(--brook-gap);
+  padding: 0.4em 1em;
+  color: var(--brook-fg-muted);
+  border-left: 0.25em solid var(--brook-border);
+  background: var(--brook-bg-quote);
+}
+.brook-md blockquote > :last-child { margin-bottom: 0; }
+
+/* ---- tables ---------------------------------------------------------------- */
+.brook-md table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
+.brook-md th, .brook-md td { padding: 6px 13px; border: 1px solid var(--brook-border); }
+.brook-md th { font-weight: 600; background: var(--brook-bg-code); }
+.brook-md tr:nth-child(2n) td { background: var(--brook-bg-quote); }
+
+/* ---- code ------------------------------------------------------------------ */
+.brook-md code, .brook-md pre {
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 0.9em;
+}
+.brook-md :not(pre) > code {
+  padding: 0.2em 0.4em;
+  border-radius: var(--brook-radius);
+  background: var(--brook-bg-inline);
+}
+.brook-md pre {
+  padding: 14px 16px;
+  overflow-x: auto;
+  border-radius: var(--brook-radius);
+  background: var(--brook-bg-code);
+  line-height: 1.5;
+}
+.brook-md pre code { padding: 0; background: none; border: 0; }
+
+/* ---- rule ------------------------------------------------------------------ */
+.brook-md hr { height: 1px; border: 0; background: var(--brook-border); margin: 24px 0; }
+
+/* ---- syntax highlighter (the built-in `highlight()` token spans) ----------- */
+.brook-md .t-kw   { color: var(--brook-t-kw); }
+.brook-md .t-str,
+.brook-md .t-rx   { color: var(--brook-t-str); }
+.brook-md .t-num,
+.brook-md .t-lt   { color: var(--brook-t-num); }
+.brook-md .t-com  { color: var(--brook-t-com); font-style: italic; }
+.brook-md .t-fn   { color: var(--brook-t-fn); }
+.brook-md .t-ty   { color: var(--brook-t-ty); }
+.brook-md .t-mac,
+.brook-md .t-dec  { color: var(--brook-t-mac); }
+.brook-md .t-attr,
+.brook-md .t-sel  { color: var(--brook-t-attr); }
+.brook-md .t-tag  { color: var(--brook-t-tag); }
+.brook-md .t-var  { color: var(--brook-t-var); }
+.brook-md .t-pun  { color: var(--brook-t-pun); }
+.brook-md .t-txt  { color: inherit; }

package/dist/svelte.d.ts

@@ -0,0 +1,80 @@
+import type { ActionReturn } from "svelte/action";
+import { type Readable } from "svelte/store";
+import { BrookClient } from "./client.js";
+import type { ParserConfig } from "./types-core.js";
+import { type DomComponents } from "./dom.js";
+/**
+ * Svelte action that mounts a streaming {@link BrookClient} 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:brookMarkdown={{ client, stickToBottom: true }} />
+ * ```
+ */
+export interface BrookMarkdownParams {
+    client: BrookClient;
+    components?: DomComponents;
+    sanitize?: (h: string) => string;
+    virtualize?: boolean;
+    stickToBottom?: boolean;
+}
+export declare function brookMarkdown(node: HTMLElement, params: BrookMarkdownParams): ActionReturn<BrookMarkdownParams>;
+/**
+ * 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 brookMarkdown} 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: BrookClient): Readable<number | null>;
+/**
+ * Controlled-string sibling of {@link brookMarkdown}: instead of taking a
+ * caller-owned client, this action OWNS a single {@link BrookClient} (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 BrookClient.setContent} diffs it: a prefix-extension appends only the
+ * delta; any divergence resets and reparses.
+ *
+ * ```svelte
+ * <div use:brookMarkdownString={{ 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
+ * `BrookClient` 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 brookMarkdown}: 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 `brookMarkdown`,
+ * but the remount reuses the SAME client so its `setContent` diff baseline
+ * survives.
+ */
+export interface BrookMarkdownStringParams extends Omit<BrookMarkdownParams, "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 brookMarkdownString(node: HTMLElement, params: BrookMarkdownStringParams): ActionReturn<BrookMarkdownStringParams>;

package/dist/svelte.js

@@ -0,0 +1,59 @@
+import { readable } from "svelte/store";
+import { BrookClient } from "./client.js";
+import { mountBrookMarkdown, tailOpenBlockId } from "./dom.js";
+function brookMarkdown(node, params) {
+  let { client, ...options } = params;
+  let handle = mountBrookMarkdown(client, node, options);
+  return {
+    update(next) {
+      if (next.client === client && next.components === options.components && next.sanitize === options.sanitize && next.virtualize === options.virtualize && next.stickToBottom === options.stickToBottom) {
+        return;
+      }
+      handle.destroy();
+      ({ client, ...options } = next);
+      handle = mountBrookMarkdown(client, node, options);
+    },
+    destroy() {
+      handle.destroy();
+    }
+  };
+}
+function tailBlockId(client) {
+  return readable(tailOpenBlockId(client.getSnapshot()), (set) => {
+    const unsubscribe = client.subscribe(() => set(tailOpenBlockId(client.getSnapshot())));
+    return unsubscribe;
+  });
+}
+function mountOptionsOf(p) {
+  const { content: _c, streaming: _s, config: _cfg, ...rest } = p;
+  void _c;
+  void _s;
+  void _cfg;
+  return rest;
+}
+function brookMarkdownString(node, params) {
+  let options = mountOptionsOf(params);
+  const client = new BrookClient({ config: params.config });
+  let handle = mountBrookMarkdown(client, node, options);
+  client.setContent(params.content, { done: params.streaming === false });
+  return {
+    update(next) {
+      client.setContent(next.content, { done: next.streaming === false });
+      if (next.components === options.components && next.sanitize === options.sanitize && next.virtualize === options.virtualize && next.stickToBottom === options.stickToBottom) {
+        return;
+      }
+      handle.destroy();
+      options = mountOptionsOf(next);
+      handle = mountBrookMarkdown(client, node, options);
+    },
+    destroy() {
+      handle.destroy();
+      client.destroy();
+    }
+  };
+}
+export {
+  brookMarkdown,
+  brookMarkdownString,
+  tailBlockId
+};