flux-md 0.16.2 → 0.18.0

package/dist/dom.d.ts

@@ -0,0 +1,110 @@
+import type { FluxClient } from "./client.js";
+import type { Block, BlockComponentProps, RenderMetricsHook } from "./types-core.js";
+/**
+ * Framework-neutral DOM renderer for a {@link FluxClient}. Mounts the streaming
+ * document into a container and keeps it in sync via direct DOM mutation,
+ * mirroring the JSX renderer's block model: each block is keyed by its stable
+ * parser-assigned id, and a committed block's node is reused untouched on every
+ * later patch (the parity analogue of the JSX renderer's block memo). Only the
+ * streaming tail is rebuilt.
+ *
+ * This is the foundation the Web Component / Vue / Svelte / Solid bindings
+ * build on; it imports only neutral modules and carries no framework dependency.
+ *
+ * ## Custom components
+ *
+ * Pass `components` to override a whole block kind (or a component tag). Keys
+ * are capitalized block-kind names (`CodeBlock`, `Table`, `Mermaid`…) or, for
+ * `Component` blocks, the tag name (e.g. `Thinking`) with `Component` as the
+ * generic fallback. A component receives {@link BlockComponentProps} and returns
+ * an `HTMLElement` or an HTML string. There is no tag-level override path (no
+ * `table`/`a`/`code` keys) — that requires an HTML→tree pass the DOM renderer
+ * doesn't carry.
+ */
+export interface MountHandle {
+    destroy(): void;
+    refresh(): void;
+    /**
+     * The id of the streaming **tail** block — the one block that may re-render on
+     * the next patch (a committed block's node is frozen, so its id never appears
+     * here). Returns `null` when no block is open (idle / fully committed).
+     *
+     * Purely derived from the live snapshot; reading it renders nothing and mutates
+     * nothing. It exists so a fine-grained framework binding (Solid `createMemo`,
+     * Vue `computed`, Svelte `derived`) can narrow a reactive cell to *just the tail*
+     * for its own scheduling/diagnostics — the DOM is already updated by the
+     * renderer's own subscribe loop, so this never changes what is drawn.
+     */
+    openBlockId(): number | null;
+}
+export type DomBlockComponent = (props: BlockComponentProps) => HTMLElement | string;
+/** Override map: capitalized block-kind / component-tag keys only. */
+export type DomComponents = Record<string, DomBlockComponent>;
+export interface MountOptions {
+    components?: DomComponents;
+    /**
+     * Optional HTML sanitizer applied to every generic block's HTML before it is
+     * injected via `innerHTML` — **including the streaming (open/speculative)
+     * tail**. The built-in code/math/mermaid renderers operate on already-escaped
+     * content and are not run through it (same as the JSX renderer). When omitted,
+     * rendering is byte-identical and zero-cost.
+     */
+    sanitize?: (html: string) => string;
+    /**
+     * Skip layout/paint for off-screen *closed* blocks via CSS
+     * `content-visibility: auto` (for very long documents). Off by default.
+     */
+    virtualize?: boolean;
+    /**
+     * Keep a bottom snap target so the view follows the streaming tail. CSS-only:
+     * emits a sentinel with `scroll-snap-align: end`; you add
+     * `scroll-snap-type: y proximity` to your scroll container. Off by default.
+     */
+    stickToBottom?: boolean;
+    /** Use the built-in code highlighter. Default true; suppressed when a
+     *  `components.CodeBlock` override is supplied. */
+    highlightCode?: boolean;
+    /** Coalesce patches into one DOM write per animation frame. Default true. */
+    batch?: boolean;
+    /**
+     * Opt-in (default false). When a generic open/streaming block grows, morph its
+     * existing DOM subtree **in place** toward the new HTML instead of rebuilding
+     * the whole node with `innerHTML`. The browser then only repaints/relayouts
+     * the parts that changed, and focus/text-selection inside the streaming tail
+     * survive a token append. The default path (full rebuild) is byte-identical
+     * and unchanged; this only affects generic blocks rendered via the `innerHTML`
+     * fast path (not code/math/mermaid/component overrides). The morphed subtree is
+     * equivalent to the rebuilt one. */
+    morphOpenBlocks?: 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"` coalesces rapid updates (does not read every token). Off by default.
+     */
+    ariaLive?: "off" | "polite" | "assertive";
+    /** Live-region atomicity; pair with `ariaLive`. Off by default. */
+    ariaAtomic?: boolean;
+    /**
+     * Optional render-churn probe. Fires once per ACTUAL node build/rebuild of a
+     * block — never for a committed block whose node is reused untouched on a
+     * tail-only patch. The callback gets the block id and a {@link RenderMetrics}
+     * sample (per-block `renderCount`/rebuild count, `speculativeToggleCount`,
+     * `lastRenderMs`, `kind`). Zero overhead when omitted, and advances
+     * `client.getMetrics().rebuildCount`.
+     */
+    onRenderMetrics?: RenderMetricsHook;
+}
+export declare function mountFluxMarkdown(client: FluxClient, container: HTMLElement, options?: MountOptions): MountHandle;
+/**
+ * Derive the streaming tail's block id from an ordered snapshot: the id of the
+ * last block when it is open, else `null`. The open block is always the tail by
+ * construction (the parser only keeps the final block speculative/open), so this
+ * is an O(1) read of the last element — no scan. Shared so the framework
+ * adapters expose the same "what may re-render next" signal as the DOM handle.
+ */
+export declare function tailOpenBlockId(snapshot: readonly Block[]): number | null;

package/dist/dom.js

@@ -0,0 +1,576 @@
+import { highlight } from "./hi.js";
+import { morph } from "./morph.js";
+import { blockProps, extractLang } from "./block-props.js";
+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 mountFluxMarkdown(client, container, options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("mountFluxMarkdown is browser-only; call it after the DOM exists.");
+  }
+  const components = options.components && Object.keys(options.components).length > 0 ? options.components : void 0;
+  const { sanitize, virtualize, stickToBottom, onRenderMetrics } = options;
+  const hasPerf = typeof performance !== "undefined";
+  const highlightCode = options.highlightCode !== false && !components?.CodeBlock;
+  const batch = options.batch !== false && typeof requestAnimationFrame === "function";
+  const morphOpenBlocks = options.morphOpenBlocks === true;
+  const root = document.createElement("div");
+  root.className = options.className ? `flux-md ${options.className}` : "flux-md";
+  if (options.id) root.id = options.id;
+  if (options.role) root.setAttribute("role", options.role);
+  if (options.ariaLive) root.setAttribute("aria-live", options.ariaLive);
+  if (options.ariaAtomic !== void 0) root.setAttribute("aria-atomic", String(options.ariaAtomic));
+  container.appendChild(root);
+  let anchor = null;
+  if (stickToBottom) {
+    anchor = document.createElement("div");
+    anchor.className = "flux-bottom-anchor";
+    anchor.setAttribute("aria-hidden", "true");
+    anchor.style.scrollSnapAlign = "end";
+    root.appendChild(anchor);
+  }
+  const mounted = /* @__PURE__ */ new Map();
+  let order = [];
+  let dead = false;
+  let frame = 0;
+  let lastRenderGeneric = false;
+  function sync() {
+    if (dead) return;
+    const snapshot = client.getSnapshot();
+    const nextOrder = new Array(snapshot.length);
+    const seen = /* @__PURE__ */ new Set();
+    for (let i = 0; i < snapshot.length; i++) {
+      const b = snapshot[i];
+      nextOrder[i] = b.id;
+      seen.add(b.id);
+      const existing = mounted.get(b.id);
+      if (!existing) {
+        const t02 = onRenderMetrics && hasPerf ? performance.now() : 0;
+        const mb = {
+          id: b.id,
+          node: void 0,
+          html: b.html,
+          open: b.open,
+          speculative: b.speculative,
+          kind: b.kind.type,
+          renderCount: 0,
+          toggleCount: 0,
+          generic: false
+        };
+        mb.node = renderBlock(b, mb);
+        mb.generic = lastRenderGeneric;
+        mounted.set(b.id, mb);
+        if (onRenderMetrics) noteRender(mb, b, t02);
+        continue;
+      }
+      if (existing.html === b.html && existing.open === b.open && existing.speculative === b.speculative) {
+        continue;
+      }
+      const t0 = onRenderMetrics && hasPerf ? performance.now() : 0;
+      if (existing.table && b.open && b.kind.type === "Table") {
+        const data = tableData(b);
+        if (data) {
+          syncTbody(existing.table, data);
+          if (onRenderMetrics) noteRender(existing, b, t0);
+          if (existing.speculative !== b.speculative) {
+            existing.node.classList.toggle("flux-speculative", b.speculative);
+          }
+          existing.html = b.html;
+          existing.open = b.open;
+          existing.speculative = b.speculative;
+          continue;
+        }
+      }
+      if (morphOpenBlocks && b.open && existing.open && existing.generic && existing.kind === b.kind.type && usesGenericPath(b)) {
+        morph(existing.node, sanitize ? sanitize(b.html) : b.html);
+        if (onRenderMetrics) noteRender(existing, b, t0);
+        existing.html = b.html;
+        existing.speculative = b.speculative;
+        existing.node.className = genericClassName(b);
+        existing.generic = !sanitize;
+        continue;
+      }
+      if (!sanitize && existing.generic && existing.kind === b.kind.type && existing.open === b.open && existing.speculative === b.speculative && b.html.length > existing.html.length && b.html.startsWith(existing.html) && isDepth0Boundary(existing.html, b.html)) {
+        existing.node.insertAdjacentHTML("beforeend", b.html.slice(existing.html.length));
+        if (onRenderMetrics) noteRender(existing, b, t0);
+        existing.html = b.html;
+        continue;
+      }
+      existing.table = void 0;
+      const node = renderBlock(b, existing);
+      existing.node.replaceWith(node);
+      existing.node = node;
+      if (onRenderMetrics) noteRender(existing, b, t0);
+      existing.html = b.html;
+      existing.open = b.open;
+      existing.speculative = b.speculative;
+      existing.kind = b.kind.type;
+      existing.generic = lastRenderGeneric;
+    }
+    if (mounted.size > seen.size) {
+      for (const [id, mb] of mounted) {
+        if (!seen.has(id)) {
+          mb.node.remove();
+          mounted.delete(id);
+        }
+      }
+    }
+    order = nextOrder;
+    reconcileChildren();
+  }
+  function noteRender(mb, b, t0) {
+    mb.renderCount++;
+    if (mb.speculative !== b.speculative) mb.toggleCount++;
+    client.__noteRebuild();
+    onRenderMetrics(b.id, {
+      renderCount: mb.renderCount,
+      speculativeToggleCount: mb.toggleCount,
+      lastRenderMs: hasPerf ? performance.now() - t0 : 0,
+      kind: b.kind.type
+    });
+  }
+  function reconcileChildren() {
+    let cursor = root.firstChild;
+    for (let i = 0; i < order.length; i++) {
+      const mb = mounted.get(order[i]);
+      if (!mb) continue;
+      const want = mb.node;
+      if (cursor === want) {
+        cursor = want.nextSibling;
+        continue;
+      }
+      root.insertBefore(want, cursor);
+    }
+  }
+  function renderBlock(b, mb) {
+    const content = renderBlockContent(b, mb);
+    if (virtualize && !b.open && !b.speculative) {
+      const px = INTRINSIC_PX[b.kind.type] ?? 120;
+      content.style.contentVisibility = "auto";
+      content.style.containIntrinsicSize = `auto ${px}px`;
+    }
+    return content;
+  }
+  function renderBlockContent(b, mb) {
+    const kind = b.kind.type;
+    lastRenderGeneric = false;
+    if (components) {
+      if (kind === "Component") {
+        const tag = b.kind.data?.tag;
+        const override = tag && components[tag] || components.Component;
+        if (override) return wrapOverrideResult(override(blockProps(b)));
+      }
+      const blockOverride = components[kind];
+      if (blockOverride) return wrapOverrideResult(blockOverride(blockProps(b)));
+    }
+    switch (kind) {
+      case "CodeBlock":
+        if (highlightCode) return renderCodeBlock(b);
+        break;
+      // fall through to the generic path
+      case "MathBlock":
+        return renderMathBlock(b);
+      case "Mermaid":
+        return renderMermaid(b);
+    }
+    if (kind === "Table" && b.open) {
+      const data = tableData(b);
+      if (data) return buildKeyedTable(b, data, mb);
+    }
+    if (b.open && kind === "List") {
+      const keyed = renderKeyedList(b);
+      if (keyed) return keyed;
+    }
+    const node = document.createElement("div");
+    node.className = genericClassName(b);
+    if (b.open && !sanitize && (kind === "Blockquote" || kind === "Alert")) {
+      const wrapper = renderKeyedContainer(b);
+      if (wrapper) {
+        node.appendChild(wrapper);
+        return node;
+      }
+    }
+    node.innerHTML = sanitize ? sanitize(b.html) : b.html;
+    lastRenderGeneric = !sanitize;
+    return node;
+  }
+  function renderKeyedList(b) {
+    const ld = b.kind.data;
+    const items = ld?.items;
+    if (!Array.isArray(items) || items.length === 0) return null;
+    const node = document.createElement("div");
+    node.className = "flux-block flux-block-list" + (b.open ? " flux-open" : "") + (b.speculative ? " flux-speculative" : "");
+    const list = document.createElement(ld?.ordered ? "ol" : "ul");
+    if (ld?.ordered && ld.start !== void 0 && ld.start !== 1) {
+      list.setAttribute("start", String(ld.start));
+    }
+    for (const it of items) {
+      const li = document.createElement("li");
+      li.innerHTML = sanitize ? sanitize(it.html) : it.html;
+      list.appendChild(li);
+    }
+    node.appendChild(list);
+    return node;
+  }
+  function renderKeyedContainer(b) {
+    const nested = b.kind.data?.nested;
+    if (!Array.isArray(nested)) return null;
+    const tagName = b.kind.type === "Alert" ? "div" : "blockquote";
+    const wrapper = document.createElement(tagName);
+    applyOpenTagAttrs(wrapper, b.html);
+    if (b.kind.type === "Alert") {
+      const title = alertTitleHtml(b.html);
+      if (title) {
+        const t = document.createElement("div");
+        t.innerHTML = title;
+        const titleNode = t.firstElementChild;
+        if (titleNode) wrapper.appendChild(titleNode);
+      }
+    }
+    for (let i = 0; i < nested.length; i++) {
+      const child = document.createElement("div");
+      child.innerHTML = nested[i].html;
+      const inner = child.firstElementChild;
+      wrapper.appendChild(inner ?? child);
+    }
+    return wrapper;
+  }
+  function buildKeyedTable(b, data, mb) {
+    const node = document.createElement("div");
+    node.className = "flux-block flux-block-table flux-open" + (b.speculative ? " flux-speculative" : "");
+    const table = document.createElement("table");
+    if (b.html.startsWith('<table dir="auto"')) table.setAttribute("dir", "auto");
+    const scope = b.html.includes('<th scope="col"');
+    const thead = document.createElement("thead");
+    const htr = document.createElement("tr");
+    for (let j = 0; j < data.headers.length; j++) {
+      htr.appendChild(makeCell("th", data.headers[j].html, data.aligns[j] ?? null, scope));
+    }
+    thead.appendChild(htr);
+    table.appendChild(thead);
+    const km = { table, tbody: null, scope, committed: 0, lastRow: null };
+    mb.table = km;
+    node.appendChild(table);
+    syncTbody(km, data);
+    return node;
+  }
+  function syncTbody(km, data) {
+    const n = data.rows.length;
+    if (n === 0) {
+      if (km.tbody) {
+        km.tbody.remove();
+        km.tbody = null;
+      }
+      km.committed = 0;
+      km.lastRow = null;
+      return;
+    }
+    if (!km.tbody) {
+      km.tbody = document.createElement("tbody");
+      km.table.appendChild(km.tbody);
+    }
+    const tbody = km.tbody;
+    if (km.lastRow) {
+      km.lastRow.remove();
+      km.lastRow = null;
+    }
+    for (let i = km.committed; i < n - 1; i++) {
+      tbody.appendChild(makeRow(data.rows[i], data.aligns));
+    }
+    km.committed = n - 1;
+    const last = makeRow(data.rows[n - 1], data.aligns);
+    tbody.appendChild(last);
+    km.lastRow = last;
+  }
+  function makeRow(cells, aligns) {
+    const tr = document.createElement("tr");
+    for (let j = 0; j < cells.length; j++) {
+      tr.appendChild(makeCell("td", cells[j].html, aligns[j] ?? null, false));
+    }
+    return tr;
+  }
+  function makeCell(tag, html, align, scope) {
+    const cell = document.createElement(tag);
+    if (tag === "th" && scope) cell.setAttribute("scope", "col");
+    if (align) cell.style.textAlign = align;
+    cell.innerHTML = sanitize ? sanitize(html) : html;
+    return cell;
+  }
+  function genericClassName(b) {
+    return "flux-block flux-block-" + b.kind.type.toLowerCase() + (b.open ? " flux-open" : "") + (b.speculative ? " flux-speculative" : "");
+  }
+  function usesGenericPath(b) {
+    const kind = b.kind.type;
+    if (components) {
+      if (kind === "Component") {
+        const tag = b.kind.data?.tag;
+        if (tag && components[tag] || components.Component) return false;
+      }
+      if (components[kind]) return false;
+    }
+    if (kind === "CodeBlock") return !highlightCode;
+    if (kind === "MathBlock" || kind === "Mermaid") return false;
+    return true;
+  }
+  function wrapOverrideResult(result) {
+    if (typeof result === "string") {
+      const node = document.createElement("div");
+      node.innerHTML = result;
+      return node;
+    }
+    return result;
+  }
+  function renderCodeBlock(b) {
+    const lang = extractLang(b.html) || "text";
+    const text = b.open ? "" : decodeCodeText(b.html);
+    const highlighted = text ? highlight(text, lang) : null;
+    const block = document.createElement("div");
+    block.className = "flux-code-block" + (b.open ? " flux-streaming" : "");
+    const header = document.createElement("div");
+    header.className = "flux-code-header";
+    const langSpan = document.createElement("span");
+    langSpan.className = "flux-code-lang";
+    langSpan.textContent = lang;
+    header.appendChild(langSpan);
+    if (b.open) {
+      const pill = document.createElement("span");
+      pill.className = "flux-code-streaming-pill";
+      pill.textContent = "streaming";
+      header.appendChild(pill);
+    } else {
+      header.appendChild(makeCopyButton(text));
+    }
+    block.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "flux-code-body";
+    if (highlighted) {
+      const pre = document.createElement("pre");
+      pre.tabIndex = 0;
+      pre.setAttribute("role", "region");
+      pre.setAttribute("aria-label", `${lang} code`);
+      const code = document.createElement("code");
+      code.innerHTML = highlighted;
+      pre.appendChild(code);
+      body.appendChild(pre);
+    } else {
+      const div = document.createElement("div");
+      div.tabIndex = 0;
+      div.setAttribute("role", "region");
+      div.setAttribute("aria-label", `${lang} code`);
+      div.innerHTML = b.html;
+      body.appendChild(div);
+    }
+    block.appendChild(body);
+    return block;
+  }
+  function renderMathBlock(b) {
+    const block = document.createElement("div");
+    block.className = "flux-math-block" + (b.open ? " flux-streaming" : "");
+    const header = document.createElement("div");
+    header.className = "flux-math-header";
+    const lang = document.createElement("span");
+    lang.className = "flux-math-lang";
+    lang.textContent = "math";
+    header.appendChild(lang);
+    if (b.open) header.appendChild(streamingPill());
+    block.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "flux-math-body";
+    body.innerHTML = b.html;
+    block.appendChild(body);
+    return block;
+  }
+  function renderMermaid(b) {
+    const block = document.createElement("div");
+    block.className = "flux-mermaid-block" + (b.open ? " flux-streaming" : "");
+    const header = document.createElement("div");
+    header.className = "flux-mermaid-header";
+    const lang = document.createElement("span");
+    lang.className = "flux-mermaid-lang";
+    lang.textContent = "mermaid";
+    header.appendChild(lang);
+    if (b.open) header.appendChild(streamingPill());
+    block.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "flux-mermaid-body";
+    body.innerHTML = b.html;
+    block.appendChild(body);
+    return block;
+  }
+  function streamingPill() {
+    const pill = document.createElement("span");
+    pill.className = "flux-code-streaming-pill";
+    pill.textContent = "streaming";
+    return pill;
+  }
+  const COPY_ICON = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg><span>Copy</span>';
+  const COPIED_ICON = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg><span>Copied</span>';
+  function makeCopyButton(text) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "flux-code-copy";
+    btn.setAttribute("aria-label", "Copy code");
+    btn.setAttribute("aria-live", "polite");
+    btn.innerHTML = COPY_ICON;
+    let timer = null;
+    btn.addEventListener("click", () => {
+      const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+      if (!clip || !clip.writeText || !text) return;
+      clip.writeText(text).then(
+        () => {
+          btn.setAttribute("aria-label", "Copied");
+          btn.innerHTML = COPIED_ICON;
+          if (timer !== null) clearTimeout(timer);
+          timer = setTimeout(() => {
+            btn.setAttribute("aria-label", "Copy code");
+            btn.innerHTML = COPY_ICON;
+          }, 1500);
+        },
+        // Permission denied / blocked: stay silent, leave button usable.
+        () => {
+        }
+      );
+    });
+    return btn;
+  }
+  const unsubscribe = client.subscribe(() => {
+    if (dead) return;
+    if (batch) {
+      if (frame === 0) frame = requestAnimationFrame(flush);
+    } else {
+      sync();
+    }
+  });
+  function flush() {
+    frame = 0;
+    sync();
+  }
+  sync();
+  return {
+    destroy() {
+      if (dead) return;
+      dead = true;
+      if (frame !== 0) {
+        cancelAnimationFrame(frame);
+        frame = 0;
+      }
+      unsubscribe();
+      root.remove();
+    },
+    refresh() {
+      if (dead) return;
+      sync();
+    },
+    openBlockId() {
+      return tailOpenBlockId(client.getSnapshot());
+    }
+  };
+}
+function tableData(b) {
+  if (b.kind.type !== "Table") return void 0;
+  const data = b.kind.data;
+  if (!data || !Array.isArray(data.rows) || !Array.isArray(data.aligns) || !Array.isArray(data.headers)) {
+    return void 0;
+  }
+  return data;
+}
+const VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function isDepth0Boundary(prefix, full) {
+  const c0 = full.charCodeAt(prefix.length);
+  if (c0 !== 60) return false;
+  const c1 = full.charCodeAt(prefix.length + 1);
+  const isLetter = c1 >= 65 && c1 <= 90 || c1 >= 97 && c1 <= 122;
+  if (!isLetter) return false;
+  let depth = 0;
+  let i = 0;
+  const n = prefix.length;
+  while (i < n) {
+    const lt = prefix.indexOf("<", i);
+    if (lt === -1) break;
+    i = lt + 1;
+    if (i >= n) return false;
+    const ch = prefix.charCodeAt(i);
+    if (ch === 33 || ch === 63) return false;
+    let closing = false;
+    if (ch === 47) {
+      closing = true;
+      i++;
+    }
+    const nameStart = i;
+    while (i < n) {
+      const t = prefix.charCodeAt(i);
+      const nameChar = t >= 65 && t <= 90 || t >= 97 && t <= 122 || t >= 48 && t <= 57 || t === 45;
+      if (!nameChar) break;
+      i++;
+    }
+    if (i === nameStart) return false;
+    const name = prefix.slice(nameStart, i).toLowerCase();
+    const gt = prefix.indexOf(">", i);
+    if (gt === -1) return false;
+    const selfClosing = prefix.charCodeAt(gt - 1) === 47;
+    i = gt + 1;
+    if (closing) {
+      depth--;
+      if (depth < 0) return false;
+    } else if (!selfClosing && !VOID_ELEMENTS.has(name)) {
+      depth++;
+    }
+  }
+  return depth === 0;
+}
+function tailOpenBlockId(snapshot) {
+  const tail = snapshot.length > 0 ? snapshot[snapshot.length - 1] : void 0;
+  return tail && tail.open ? tail.id : null;
+}
+function decodeCodeText(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, "&");
+}
+const CONTAINER_ATTR_RE = /([a-zA-Z][a-zA-Z0-9-]*)="([^"]*)"/g;
+function applyOpenTagAttrs(el, html) {
+  const gt = html.indexOf(">");
+  const open = gt < 0 ? html : html.slice(0, gt);
+  let m;
+  CONTAINER_ATTR_RE.lastIndex = 0;
+  while (m = CONTAINER_ATTR_RE.exec(open)) {
+    const name = m[1].toLowerCase();
+    if (name === "class" || name === "dir" || name === "role" || name.startsWith("data-")) {
+      el.setAttribute(name, m[2]);
+    }
+  }
+}
+function alertTitleHtml(html) {
+  const m = html.match(/<p class="markdown-alert-title"[^>]*>[\s\S]*?<\/p>/);
+  return m ? m[0] : "";
+}
+export {
+  mountFluxMarkdown,
+  tailOpenBlockId
+};