brookmd 0.22.0

package/dist/react.js

@@ -0,0 +1,539 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createElement,
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  useDeferredValue
+} from "react";
+import { BrookClient } 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";
+const NO_DEFER_BLOCKS = [];
+const warnedUnstable = /* @__PURE__ */ new Set();
+function useUnstablePropWarning(name, value) {
+  const ref = useRef(value);
+  if (ref.current !== value) {
+    const prevDefined = ref.current !== void 0 && ref.current !== null;
+    const nextDefined = value !== void 0 && value !== null;
+    ref.current = value;
+    const env = globalThis.process?.env;
+    if (prevDefined && nextDefined && !warnedUnstable.has(name) && (!env || env.NODE_ENV !== "production")) {
+      warnedUnstable.add(name);
+      console.warn(
+        `<BrookMarkdown>: the \`${name}\` prop changed identity between renders. Hoist it to module scope or wrap it in useMemo \u2014 a fresh identity each render busts the per-block memo and re-parses every block on every patch.`
+      );
+    }
+  }
+}
+function __resetUnstableWarnings() {
+  warnedUnstable.clear();
+}
+function BrookMarkdownFromClient({
+  client,
+  components,
+  virtualize,
+  stickToBottom,
+  sanitize,
+  childMemo,
+  className,
+  id,
+  role,
+  "aria-live": ariaLive,
+  "aria-atomic": ariaAtomic,
+  onRenderMetrics,
+  deferTail,
+  decorators,
+  urlTransform
+}) {
+  const blocks = useSyncExternalStore(client.subscribe, client.getSnapshot, client.getSnapshot);
+  useUnstablePropWarning("decorators", decorators);
+  useUnstablePropWarning("urlTransform", urlTransform);
+  const deferred = useDeferredValue(deferTail ? blocks : NO_DEFER_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 ? `brook-md brook-deferred ${className}` : "brook-md brook-deferred" : className ? `brook-md ${className}` : "brook-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,
+            decorators,
+            urlTransform
+          },
+          b.id
+        )),
+        stickToBottom && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { scrollSnapAlign: "end" }, className: "brook-bottom-anchor" })
+      ]
+    }
+  );
+}
+function useBrookStream(stream, options) {
+  const [client] = useState(() => new BrookClient({ 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 useBrookMarkdownString(content, options) {
+  const [client] = useState(() => new BrookClient({ 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 BrookMarkdownFromStream(props) {
+  const client = useBrookStream(props.stream, {
+    config: props.streamConfig,
+    onError: props.onStreamError
+  });
+  return /* @__PURE__ */ jsx(BrookMarkdownFromClient, { ...props, client });
+}
+function BrookMarkdownImpl(props) {
+  if (props.stream != null && props.client == null) {
+    return /* @__PURE__ */ jsx(BrookMarkdownFromStream, { ...props });
+  }
+  if (props.client == null) {
+    throw new Error("<BrookMarkdown>: pass either a `client` or a `stream` prop.");
+  }
+  return /* @__PURE__ */ jsx(BrookMarkdownFromClient, { ...props });
+}
+const BrookMarkdown = memo(BrookMarkdownImpl);
+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,
+  decorators,
+  urlTransform
+}) {
+  const memoRef = useRef(null);
+  const compRef = useRef(null);
+  const decoRef = useRef(void 0);
+  const urlRef = useRef(void 0);
+  return useMemo(() => {
+    const opts = { decorators, urlTransform };
+    if (!childMemo) {
+      memoRef.current = null;
+      return htmlToReact(html, components, void 0, opts);
+    }
+    if (memoRef.current === null || compRef.current !== components || decoRef.current !== decorators || urlRef.current !== urlTransform) {
+      memoRef.current = /* @__PURE__ */ new Map();
+      compRef.current = components;
+      decoRef.current = decorators;
+      urlRef.current = urlTransform;
+    }
+    const map = memoRef.current;
+    if (map.size > CHILD_MEMO_CAP) map.clear();
+    return htmlToReact(html, components, map, opts);
+  }, [html, components, childMemo, decorators, urlTransform]);
+}
+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,
+  decorators,
+  urlTransform
+}) {
+  const kind = block.kind.type;
+  const hasInlineTransforms = !!decorators || !!urlTransform;
+  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 = "brook-block brook-block-" + kind.toLowerCase() + (block.open ? " brook-open" : "") + (block.speculative ? " brook-speculative" : "");
+  if (kind === "Table" && block.open && !hasInlineTransforms) {
+    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" && !hasInlineTransforms) {
+    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 || hasInlineTransforms) {
+    if (components && !hasInlineTransforms && 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: components ?? NO_COMPONENTS,
+        childMemo: childMemo && block.open,
+        decorators,
+        urlTransform
+      }
+    ) });
+  }
+  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 && // Identity compare: an unstable decorators/urlTransform (fresh each render)
+  // busts the memo so every committed block re-decorates — the O(n²) footgun
+  // the dev warning calls out. A hoisted/memoized value keeps the memo holding.
+  prev.decorators === next.decorators && prev.urlTransform === next.urlTransform;
+}
+const BlockView = memo(BlockViewImpl, blocksEqual);
+export {
+  BrookMarkdown,
+  __resetUnstableWarnings,
+  blockKindProps,
+  blocksEqual,
+  useBrookMarkdownString,
+  useBrookStream
+};

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: "brook-code-block" + (open ? " brook-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "brook-code-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "brook-code-lang", children: lang }),
+      open ? /* @__PURE__ */ jsx("span", { className: "brook-code-streaming-pill", children: "streaming" }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "brook-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: "brook-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). brookmd
+ * 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: "brook-math-block" + (open ? " brook-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "brook-math-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "brook-math-lang", children: "math" }),
+      open && /* @__PURE__ */ jsx("span", { className: "brook-code-streaming-pill", children: "streaming" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "brook-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. brookmd 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: "brook-mermaid-block" + (open ? " brook-streaming" : ""), children: [
+    /* @__PURE__ */ jsxs("div", { className: "brook-mermaid-header", children: [
+      /* @__PURE__ */ jsx("span", { className: "brook-mermaid-lang", children: "mermaid" }),
+      open && /* @__PURE__ */ jsx("span", { className: "brook-code-streaming-pill", children: "streaming" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "brook-mermaid-body", dangerouslySetInnerHTML: { __html: html } })
+  ] });
+}
+const Mermaid = memo(MermaidImpl);
+export {
+  Mermaid
+};