@linloir/limr 1.0.0 → 1.0.1

package/dist/{chunk-3ILUZKDB.js → chunk-SUAAUGAX.js}

@@ -2,16 +2,24 @@ import {
   annotationReferenceRange,
   createDocument,
   defaultHighlight,
-  intersects,
   mapText,
-  rangeOf,
   resolveAnnotationAnchors,
-  safeUrl,
   sameRange,
-  selectionFromRange,
+  selectionFromRange
+} from "./chunk-BG5QUQFR.js";
+import {
+  atomicSelectionText,
+  leavesIn,
+  measurementRange,
+  textRange
+} from "./chunk-BVHHOVMT.js";
+import {
+  intersects,
+  rangeOf,
+  safeUrl,
   textContent,
   walk
-} from "./chunk-TTISGBST.js";
+} from "./chunk-FJZCQY2S.js";
 import {
   ResourceCache
 } from "./chunk-6N6TFHEN.js";
@@ -94,6 +102,7 @@ var english = {
   highlightWavy: "Wavy",
   hideHighlight: "Hide highlight",
   showHighlight: "Show highlight",
+  inlineHighlightHint: "Markdown inline highlight, editing unavailable",
   deleteAnnotations: "Delete",
   deleteAnnotationsHint: "Deletes {count} annotations on this text and any highlight."
 };
@@ -135,6 +144,7 @@ var chinese = {
   highlightWavy: "\u6CE2\u6D6A\u7EBF",
   hideHighlight: "\u9690\u85CF\u9AD8\u4EAE",
   showHighlight: "\u663E\u793A\u9AD8\u4EAE",
+  inlineHighlightHint: "Markdown \u5185\u5D4C\u9AD8\u4EAE\uFF0C\u4E0D\u652F\u6301\u7F16\u8F91",
   deleteAnnotations: "\u5220\u9664",
   deleteAnnotationsHint: "\u5C06\u5220\u9664\u8FD9\u6BB5\u6587\u5B57\u5173\u8054\u7684 {count} \u4E2A\u6CE8\u91CA\u53CA\u9AD8\u4EAE\u3002"
 };
@@ -175,6 +185,7 @@ var ReaderRuntime = class {
   bindings = /* @__PURE__ */ new WeakMap();
   textBinders = /* @__PURE__ */ new WeakMap();
   components = {};
+  rendererOverrides = /* @__PURE__ */ new Map();
   annotationTypes = /* @__PURE__ */ new Map();
   resolvedTypes = /* @__PURE__ */ new WeakMap();
   locale = english;
@@ -278,6 +289,13 @@ var ReaderRuntime = class {
   installConfiguration(config) {
     this.locale = { ...english, ...config.locale };
     this.components = Object.assign({}, ...(config.extensions ?? []).map((ext) => ext.components), config.components);
+    this.rendererOverrides = /* @__PURE__ */ new Map();
+    const rules = [
+      ...(config.extensions ?? []).flatMap((ext) => ext.rendererOverrides ?? []),
+      ...Object.entries(config.components ?? {}).map(([type, component]) => ({ type, component })),
+      ...config.rendererOverrides ?? []
+    ];
+    for (const rule of rules) this.rendererOverrides.set(rule.type, [...this.rendererOverrides.get(rule.type) ?? [], rule]);
     const annotationTypes = [...(config.extensions ?? []).flatMap((ext) => [...ext.annotationTypes ?? []]), ...config.annotationTypes ?? []];
     this.annotationTypes = new Map(annotationTypes.map((type) => {
       if (typeof type.label === "string") return [type.type, type];
@@ -352,13 +370,13 @@ var ReaderRuntime = class {
     if ([...versions.keys()].some((id) => !annotations.has(id))) this.resourceVersions.set(new Map([...versions].filter(([id]) => annotations.has(id))));
     const occurrences = [...doc.occurrences];
     const allHighlights = [];
-    for (const annotation of config.annotations ?? this.localAnnotations) {
+    for (const annotation of annotations.values()) {
       resolveAnnotationAnchors(annotation, doc).forEach((anchor, index) => {
         if (annotation.type === "highlight") {
           const id = index ? `${annotation.id}:${index}` : annotation.id;
           const value = { ...annotation.data, id, annotationId: annotation.id, range: anchor.range };
           const old = previous.highlights.get(id);
-          allHighlights.push(old && !old.occurrenceId && sameRange(old.range, value.range) && old.color === value.color && old.style === value.style && old.hidden === value.hidden ? old : value);
+          allHighlights.push(old && !old.occurrenceId && sameRange(old.range, value.range) && old.color === value.color && old.style === value.style && old.hidden === value.hidden && old.readOnly === value.readOnly ? old : value);
         } else occurrences.push({ ...anchor, id: anchor.id ?? `${doc.id}-${annotation.id}-${index}`, annotationIds: [annotation.id] });
       });
     }
@@ -539,7 +557,7 @@ var emptyList = EMPTY;
 import { gfm as syntax } from "micromark-extension-gfm";
 import { gfmFromMarkdown } from "mdast-util-gfm";
 function gfm() {
-  return { name: "gfm", micromark: [syntax()], mdast: gfmFromMarkdown(), scope: "local" };
+  return { name: "gfm", directives: ["gfm"], micromark: [syntax()], mdast: gfmFromMarkdown(), scope: "local", components: { gfm: ({ children }) => children } };
 }
 
 // src/extensions/math.tsx
@@ -548,10 +566,10 @@ import { math as syntax2 } from "micromark-extension-math";
 import { mathFromMarkdown } from "mdast-util-math";
 
 // src/components/CopyButton.tsx
-import { useEffect as useEffect9, useRef as useRef12, useState as useState9 } from "react";
+import { useEffect as useEffect10, useRef as useRef15, useState as useState10 } from "react";
 
 // src/react/context.tsx
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext3, useEffect as useEffect8, useId, useLayoutEffect, useMemo as useMemo4, useRef as useRef11, useState as useState8, useSyncExternalStore } from "react";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect9, useId, useLayoutEffect, useMemo as useMemo5, useRef as useRef14, useState as useState9, useSyncExternalStore } from "react";
 
 // src/extensions/code.tsx
 import { useEffect, useRef, useState } from "react";
@@ -563,6 +581,16 @@ function literalValue(node) {
 function mapLiteral(source, node) {
   const range = rangeOf(node), raw = source.slice(range.start, range.end), value = literalValue(node);
   const starts = [], ends = [];
+  if (node.valueRange) {
+    const payload = node.valueRange;
+    for (let at = payload.start; at < payload.end && starts.length < value.length; at++) {
+      const size = source[at] === "\r" && source[at + 1] === "\n" ? 2 : 1;
+      starts.push(at);
+      ends.push(at + size);
+      at += size - 1;
+    }
+    return { starts, ends, exact: starts.length === value.length };
+  }
   if (node.type === "inlineCode") {
     const fence = /^`+/.exec(raw)?.[0].length ?? 0;
     let from = fence, until = raw.length - fence;
@@ -602,6 +630,24 @@ function mapLiteral(source, node) {
   return { starts, ends, exact };
 }
 
+// src/extensions/literal-directive.ts
+function literalDirective(root, source, name, aliases3 = [name]) {
+  walk(root, (node) => {
+    if (node.type !== "component" || !aliases3.includes(node.name ?? "") || !node.position) return;
+    const start = node.position.start.offset, end = node.position.end.offset;
+    const raw = source.slice(start, end);
+    const header = /^[^\r\n]*(?:\r\n|\r|\n)/.exec(raw);
+    const closing = /(?:\r\n|\r|\n)[ \t]*:{2,}[ \t]*$/.exec(raw);
+    const from = start + (header?.[0].length ?? raw.length);
+    const until = closing ? start + closing.index : end;
+    node.type = name;
+    node.value = source.slice(from, until).replace(/\r\n?/g, "\n").replace(node.incomplete ? /\n$/ : /$^/, "");
+    node.valueRange = { start: from, end: until };
+    if (name === "code") node.lang = String(node.attributes?.lang ?? node.attributes?.language ?? "text");
+    node.children = void 0;
+  });
+}
+
 // src/extensions/code.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var cache = new ResourceCache(96);
@@ -631,9 +677,10 @@ function codeHighlight(options = {}) {
       return () => observer.disconnect();
     }, [visible, runtime]);
     useEffect(() => {
-      if (!visible || code.length > (options.maxLength ?? 1e5)) return;
+      if (!visible || pending || code.length > (options.maxLength ?? 1e5)) return;
       let disposed = false;
       let release;
+      let waiting;
       const timer = setTimeout(() => {
         if (normalized === "text" || options.languages && !options.languages.includes(normalized)) return;
         const request = cache.acquire(JSON.stringify([code, normalized, options.lightTheme, options.darkTheme]), async () => {
@@ -655,14 +702,31 @@ function codeHighlight(options = {}) {
         });
         release = request.release;
         request.promise.then((tokens2) => {
-          if (!disposed) setResult({ code, tokens: tokens2 });
+          const apply = () => {
+            if (disposed) return;
+            const selection = ref.current?.ownerDocument.getSelection();
+            if (selection && !selection.isCollapsed && selection.rangeCount && ref.current && selection.getRangeAt(0).intersectsNode(ref.current)) {
+              if (!waiting) {
+                waiting = apply;
+                document.addEventListener("selectionchange", waiting);
+              }
+              return;
+            }
+            if (waiting) {
+              document.removeEventListener("selectionchange", waiting);
+              waiting = void 0;
+            }
+            setResult({ code, tokens: tokens2 });
+          };
+          apply();
         }).catch(() => {
         });
-      }, pending ? 180 : 0);
+      }, 0);
       return () => {
         disposed = true;
         clearTimeout(timer);
         release?.();
+        if (waiting) document.removeEventListener("selectionchange", waiting);
       };
     }, [code, normalized, pending, visible]);
     const tokens = result?.code === code ? result.tokens : void 0;
@@ -674,29 +738,29 @@ function codeHighlight(options = {}) {
       /* @__PURE__ */ jsx("pre", { className: tokens?.length ? "shiki" : void 0, children: /* @__PURE__ */ jsx("code", { children: renderValue(tokens) }) })
     ] });
   }
-  return { name: "code-highlight", scope: "local", components: { code: CodeNode } };
+  return { name: "code-highlight", directives: ["code", "code-highlight"], literal: true, scope: "local", components: { code: CodeNode }, transform: (root, context) => literalDirective(root, context.source, "code", ["code", "code-highlight"]) };
 }
 
 // src/extensions/annotations.tsx
-import { useMemo as useMemo2, useRef as useRef6 } from "react";
+import { useMemo as useMemo2, useRef as useRef8 } from "react";
 import { fromMarkdown } from "mdast-util-from-markdown";
 
 // src/react/Markdown.tsx
-import { useContext, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useContext, useEffect as useEffect5, useRef as useRef6 } from "react";
 
 // src/react/render.tsx
-import { cloneElement, Component, createElement, Fragment, isValidElement, memo, useCallback, useMemo, useRef as useRef2 } from "react";
+import { cloneElement, Component as Component2, createElement, Fragment, isValidElement, memo, useCallback as useCallback2, useMemo, useRef as useRef4 } from "react";
 
 // src/react/text-binding.ts
 var atomic = /* @__PURE__ */ new Set(["inlineCode", "code", "math", "inlineMath", "image", "imageReference", "html"]);
 var hidden = /* @__PURE__ */ new Set(["definition", "footnoteDefinition", "annotationDefinition", "footnoteReference"]);
 var ordinary = /* @__PURE__ */ new Set(["text", "paragraph", "heading", "strong", "emphasis", "delete", "blockquote", "list", "listItem", "link", "linkReference", "table", "tableRow", "tableCell", "thematicBreak", "break", "annotationReference"]);
-function compactTextNodes(node, components) {
+function compactTextNodes(node, components, overrides) {
   const texts = [];
   let supported = true;
   const visit = (node2) => {
     if (node2.selection === "atomic" || atomic.has(node2.type) || hidden.has(node2.type)) return;
-    if (!ordinary.has(node2.type) || components[node2.type]) {
+    if (!ordinary.has(node2.type) || components[node2.type] || overrides?.has(node2.type)) {
       supported = false;
       return;
     }
@@ -778,8 +842,182 @@ function bindCompactText(element, nodes, runtime) {
   return clear;
 }
 
+// src/react/stream-text.tsx
+import { useCallback, useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/react/stream-effect.tsx
+import { useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var defaultStreamEffect = {
+  keyframes: [{ opacity: 0 }, { opacity: 1 }],
+  timing: { duration: 420, easing: "cubic-bezier(.16,1,.3,1)" }
+};
+function streamEffect(runtime) {
+  const config = runtime.configuration.get();
+  if (config.streamEffect !== void 0) return config.streamEffect;
+  let effect = defaultStreamEffect;
+  for (const extension of config.extensions ?? []) if (extension.streaming?.effect !== void 0) effect = extension.streaming.effect;
+  return effect;
+}
+function animateStream(element, effect) {
+  if (effect === false || !element.animate || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+  return element.animate(effect.keyframes ?? defaultStreamEffect.keyframes, { ...defaultStreamEffect.timing, ...effect.timing });
+}
+function useStreamEntrance(ref, enabled, state = true, contents = false) {
+  const runtime = useRuntime();
+  useIsomorphicLayoutEffect(() => {
+    const host = ref.current;
+    const target = contents ? host?.firstElementChild : host;
+    if (!enabled || !target) return;
+    const effect = streamEffect(runtime);
+    const classes = effect && effect.className?.split(/\s+/).filter(Boolean);
+    if (classes) target.classList.add(...classes);
+    target.dataset.limrEntrance = "";
+    const animation = animateStream(target, effect);
+    return () => {
+      animation?.cancel();
+      if (classes) target.classList.remove(...classes);
+    };
+  }, [runtime, enabled, state]);
+}
+function StreamEntrance({ children, state }) {
+  const ref = useRef2(null);
+  useStreamEntrance(ref, true, state, true);
+  return /* @__PURE__ */ jsx2("div", { ref, className: "limr-stream-block", children });
+}
+
+// src/react/stream-text.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function StreamText({ value, animateInitial = true }) {
+  const runtime = useRuntime();
+  const initial = useRef3(value), previous = useRef3(value);
+  const element = useRef3(null);
+  const animations = useRef3(/* @__PURE__ */ new Set());
+  const waiting = useRef3(false);
+  const mounted = useRef3(false);
+  const compact = useCallback(() => {
+    const host = element.current;
+    if (!host) return;
+    const selection = host.ownerDocument.getSelection();
+    if (selection && !selection.isCollapsed && selection.rangeCount && selection.getRangeAt(0).intersectsNode(host)) {
+      if (!waiting.current) {
+        host.ownerDocument.addEventListener("selectionchange", compact);
+        waiting.current = true;
+      }
+      return;
+    }
+    if (waiting.current) {
+      host.ownerDocument.removeEventListener("selectionchange", compact);
+      waiting.current = false;
+    }
+    for (const span of host.querySelectorAll("[data-limr-increment-done]")) span.replaceWith(...span.childNodes);
+    host.normalize();
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const host = element.current;
+    if (!host) return;
+    const effect = streamEffect(runtime);
+    const animate = (element2) => {
+      const animation = animateStream(element2, effect);
+      if (!animation) return;
+      animations.current.add(animation);
+      void animation.finished.then(() => {
+        animations.current.delete(animation);
+        if (element2.hasAttribute("data-limr-increment")) element2.dataset.limrIncrementDone = "";
+        compact();
+      }, () => animations.current.delete(animation));
+    };
+    if (!mounted.current) {
+      mounted.current = true;
+      if (animateInitial && value && runtime.document.getSnapshot().streaming) animate(host);
+    }
+    if (value === previous.current) return;
+    let from = previous.current.length;
+    if (!value.startsWith(previous.current)) {
+      for (const animation of animations.current) animation.cancel();
+      animations.current.clear();
+      for (const span of host.querySelectorAll("[data-limr-increment]")) span.dataset.limrIncrementDone = "";
+      from = 0;
+      while (from < Math.min(previous.current.length, value.length) && previous.current[from] === value[from]) from++;
+      const walker = host.ownerDocument.createTreeWalker(host, NodeFilter.SHOW_TEXT);
+      const texts = [];
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) texts.push(node);
+      let at = 0;
+      for (const text of texts) {
+        const size = text.length;
+        if (at >= from) text.remove();
+        else if (at + size > from) text.deleteData(from - at, size);
+        at += size;
+      }
+      for (const span of host.querySelectorAll("[data-limr-increment]")) if (!span.textContent) span.remove();
+    }
+    const addition = value.slice(from);
+    if (addition) {
+      if (effect === false || !host.animate || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        const tail = host.lastChild;
+        if (tail?.nodeType === Node.TEXT_NODE) tail.appendData(addition);
+        else host.append(host.ownerDocument.createTextNode(addition));
+      } else {
+        const span = host.ownerDocument.createElement("span");
+        span.dataset.limrIncrement = "";
+        span.className = `limr-stream-increment ${effect.className ?? ""}`;
+        span.textContent = addition;
+        host.append(span);
+        animate(span);
+      }
+    }
+    previous.current = value;
+  }, [value, runtime]);
+  useEffect2(() => {
+    const document2 = element.current?.ownerDocument;
+    return () => {
+      document2?.removeEventListener("selectionchange", compact);
+      for (const animation of animations.current) animation.cancel();
+      animations.current.clear();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx3("span", { ref: element, "data-limr-stream-text": "", children: initial.current });
+}
+
+// src/react/knuth-plass-boundary.tsx
+import { Component } from "react";
+var implementation;
+var KnuthPlassBoundary = class extends Component {
+  release;
+  version = 0;
+  start() {
+    const version = ++this.version;
+    if (!this.props.enabled || this.props.pending) return;
+    implementation ??= import("./knuth-plass-layout-CHQCWKB5.js");
+    void implementation.then((module) => {
+      if (version !== this.version) return;
+      const root = this.props.element();
+      if (root) this.release = module.typeset(root, this.props.runtime, this.props.options);
+    });
+  }
+  componentDidMount() {
+    this.start();
+  }
+  getSnapshotBeforeUpdate() {
+    this.version++;
+    this.release?.();
+    this.release = void 0;
+    return null;
+  }
+  componentDidUpdate() {
+    this.start();
+  }
+  componentWillUnmount() {
+    this.version++;
+    this.release?.();
+  }
+  render() {
+    return this.props.children;
+  }
+};
+
 // src/react/render.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var blockAttributes = (block) => block ? { "data-limr-block": block.id, "data-source-start": block.range.start, "data-source-end": block.range.end, "data-pending": block.pending || void 0 } : {};
 function AnnotationMarker({ occurrence }) {
   const runtime = useRuntime();
@@ -787,10 +1025,10 @@ function AnnotationMarker({ occurrence }) {
   const active = useStoreSelector(runtime.interaction, (state) => state.active === occurrence.id);
   const hovered = useStoreSelector(runtime.interaction, (state) => state.hovered === occurrence.id);
   const definition2 = useStoreSelector(runtime.configuration, () => runtime.annotationTypes.get(annotation?.type ?? "citation"));
-  const Icon = definition2?.icon;
+  const Icon2 = definition2?.icon;
   const Custom = definition2?.Marker;
-  const icon = typeof Icon === "function" || Icon && typeof Icon === "object" && !isValidElement(Icon) && "$$typeof" in Icon ? createElement(Icon) : Icon;
-  return /* @__PURE__ */ jsx2("span", { className: "limr-mark-wrap", "data-limr-ignore": "true", "data-limr-marker": occurrence.id, "data-source-start": occurrence.range.start, "data-source-end": occurrence.range.end, children: /* @__PURE__ */ jsxs2(
+  const icon = typeof Icon2 === "function" || Icon2 && typeof Icon2 === "object" && !isValidElement(Icon2) && "$$typeof" in Icon2 ? createElement(Icon2) : Icon2;
+  return /* @__PURE__ */ jsx4("span", { className: "limr-mark-wrap", "data-limr-ignore": "true", "data-limr-marker": occurrence.id, "data-source-start": occurrence.range.start, "data-source-end": occurrence.range.end, children: /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -820,8 +1058,8 @@ function AnnotationMarker({ occurrence }) {
         if (hovering) runtime.hover(occurrence.id);
       },
       children: [
-        /* @__PURE__ */ jsx2("span", { className: "limr-mark-icon", children: Custom && annotation ? /* @__PURE__ */ jsx2(Custom, { annotation, active }) : icon ?? "\u2022" }),
-        occurrence.annotationIds.length > 1 && /* @__PURE__ */ jsx2("span", { className: "limr-mark-count", children: occurrence.annotationIds.length })
+        /* @__PURE__ */ jsx4("span", { className: "limr-mark-icon", children: Custom && annotation ? /* @__PURE__ */ jsx4(Custom, { annotation, active }) : icon ?? "\u2022" }),
+        occurrence.annotationIds.length > 1 && /* @__PURE__ */ jsx4("span", { className: "limr-mark-count", children: occurrence.annotationIds.length })
       ]
     }
   ) });
@@ -835,7 +1073,7 @@ function Text({ node, context, mapping: literalMapping, marks: literalMarks, sty
     let mapping2;
     const raw = source.slice(range.start, range.end);
     return () => {
-      if (literalMapping) return literalMapping;
+      if (literalMapping) return typeof literalMapping === "function" ? literalMapping() : literalMapping;
       if (!mapping2) {
         const relative = mapText(raw, value, { start: 0, end: raw.length }, { escapes: node.verbatimEscapes !== true });
         mapping2 = { starts: relative.starts.map((offset) => offset + range.start), ends: relative.ends.map((offset) => offset + range.start), exact: relative.exact };
@@ -847,7 +1085,7 @@ function Text({ node, context, mapping: literalMapping, marks: literalMarks, sty
   const highlights = context.highlights.filter((highlight) => intersects(highlight.range, range));
   if (!marks.length && !highlights.length) {
     const direct = !literalMapping && source.slice(range.start, range.end) === value;
-    return /* @__PURE__ */ jsx2("span", { style, className, "data-limr-text": "", "data-source-start": range.start, "data-source-end": range.end, ref: (element) => {
+    return /* @__PURE__ */ jsx4("span", { style, className, "data-limr-text": "", "data-source-start": range.start, "data-source-end": range.end, ref: (element) => {
       if (element) runtime.bindings.set(element, {
         range,
         atomic: false,
@@ -856,7 +1094,7 @@ function Text({ node, context, mapping: literalMapping, marks: literalMarks, sty
         },
         resolve: (offset, edge) => direct ? Math.max(range.start, Math.min(range.end, range.start + offset)) : edge === "start" ? mapped().starts[offset] ?? range.end : mapped().ends[offset - 1] ?? range.start
       });
-    }, children: value });
+    }, children: context.live ? /* @__PURE__ */ jsx4(StreamText, { value, animateInitial: range.end > context.revealFrom }) : value });
   }
   const mapping = mapped();
   const markerAt = /* @__PURE__ */ new Map();
@@ -874,12 +1112,12 @@ function Text({ node, context, mapping: literalMapping, marks: literalMarks, sty
     boundaries.add(end < 0 ? value.length : end);
   }
   const points = [...boundaries].sort((a, b) => a - b);
-  return /* @__PURE__ */ jsx2(Fragment2, { children: points.slice(1).map((end, index) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: points.slice(1).map((end, index) => {
     const start = points[index];
     const segmentRange = { start: mapping.starts[start] ?? range.start, end: mapping.ends[end - 1] ?? range.end };
     const styles = highlights.filter((highlight) => intersects(highlight.range, segmentRange));
-    let text = value.slice(start, end);
-    for (const highlight of styles) text = /* @__PURE__ */ jsx2("mark", { "data-limr-highlight": highlight.id, "data-hidden": highlight.hidden || void 0, className: `limr-highlight limr-highlight-${highlight.style ?? "background"}`, style: { "--limr-highlight": highlight.color ?? "#f3ce7380" }, children: text }, highlight.id);
+    let text = context.live ? /* @__PURE__ */ jsx4(StreamText, { value: value.slice(start, end), animateInitial: segmentRange.end > context.revealFrom }) : value.slice(start, end);
+    for (const highlight of styles) text = /* @__PURE__ */ jsx4("mark", { "data-limr-highlight": highlight.id, "data-hidden": highlight.hidden || void 0, className: `limr-highlight limr-highlight-${highlight.style ?? "background"}`, style: { "--limr-highlight": highlight.color ?? "#f3ce7380" }, children: text }, highlight.id);
     return /* @__PURE__ */ jsxs2("span", { style, className, ref: (element) => {
       if (element) runtime.bindings.set(element, { range: segmentRange, atomic: false, exact: mapping.exact, resolve: (offset, edge) => {
         const at = Math.max(start, Math.min(end, start + offset));
@@ -887,22 +1125,27 @@ function Text({ node, context, mapping: literalMapping, marks: literalMarks, sty
       } });
     }, "data-limr-text": "", "data-source-start": segmentRange.start, "data-source-end": segmentRange.end, children: [
       text,
-      markerAt.get(end)?.map((occurrence) => /* @__PURE__ */ jsx2(AnnotationMarker, { occurrence }, occurrence.id))
+      markerAt.get(end)?.map((occurrence) => /* @__PURE__ */ jsx4(AnnotationMarker, { occurrence }, occurrence.id))
     ] }, start);
   }) });
 }
 function LiteralValue({ node, context, tokens }) {
   const source = context.runtime.document.getSnapshot().source;
-  const mapping = useMemo(() => mapLiteral(source, node), [node]);
+  const mapped = useMemo(() => {
+    let value2;
+    return () => value2 ??= mapLiteral(source, node);
+  }, [node]);
   const value = literalValue(node);
   const marks = context.marks.get(node) ?? emptyList;
+  if (!tokens?.length) return /* @__PURE__ */ jsx4(Text, { node: { ...node, type: "text", value }, context, mapping: mapped, marks }, 0);
+  const mapping = mapped();
   const segments = tokens?.length ? tokens : [{ content: value, offset: 0 }];
-  return /* @__PURE__ */ jsx2(Fragment2, { children: segments.map((token, index) => {
+  return /* @__PURE__ */ jsx4(Fragment2, { children: segments.map((token, index) => {
     const start = token.offset, end = start + token.content.length;
-    const mapped = { starts: mapping.starts.slice(start, end), ends: mapping.ends.slice(start, end), exact: mapping.exact };
-    const range = { start: mapped.starts[0] ?? rangeOf(node).start, end: mapped.ends.at(-1) ?? rangeOf(node).end };
+    const mapped2 = { starts: mapping.starts.slice(start, end), ends: mapping.ends.slice(start, end), exact: mapping.exact };
+    const range = { start: mapped2.starts[0] ?? rangeOf(node).start, end: mapped2.ends.at(-1) ?? rangeOf(node).end };
     const leaf = { type: "text", value: token.content, position: { start: { offset: range.start, line: 0, column: 0 }, end: { offset: range.end, line: 0, column: 0 } } };
-    return /* @__PURE__ */ jsx2(Text, { className: token.style ? "limr-code-token" : void 0, style: token.style, node: leaf, context, mapping: mapped, marks: marks.filter((mark) => mark.range.end > range.start && mark.range.end <= range.end) }, index);
+    return /* @__PURE__ */ jsx4(Text, { className: token.style ? "limr-code-token" : void 0, style: token.style, node: leaf, context, mapping: mapped2, marks: marks.filter((mark) => mark.range.end > range.start && mark.range.end <= range.end) }, index);
   }) });
 }
 function Atomic({ node, context, children, inline, blockElement }) {
@@ -913,7 +1156,7 @@ function Atomic({ node, context, children, inline, blockElement }) {
   const image = ["image", "imageReference"].includes(node.type) || node.type === "component" && node.name === "img";
   const corner = image || !inline;
   const marks = [...context.marks.get(node) ?? [], ...corner ? context.afterMarks.get(node) ?? [] : []];
-  const markers = marks.map((occurrence) => /* @__PURE__ */ jsx2(AnnotationMarker, { occurrence }, occurrence.id));
+  const markers = marks.map((occurrence) => /* @__PURE__ */ jsx4(AnnotationMarker, { occurrence }, occurrence.id));
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsxs2(
       Tag,
@@ -932,7 +1175,7 @@ function Atomic({ node, context, children, inline, blockElement }) {
         },
         children: [
           children,
-          corner && !!marks.length && /* @__PURE__ */ jsx2("span", { className: "limr-corner-marks", "data-limr-ignore": "true", children: markers })
+          corner && !!marks.length && /* @__PURE__ */ jsx4("span", { className: "limr-corner-marks", "data-limr-ignore": "true", children: markers })
         ]
       }
     ),
@@ -958,16 +1201,16 @@ function HeadingNode({ node, children, runtime, blockElement }) {
 }
 function Reference({ node, children, image }) {
   const definition2 = useDocumentSelector((doc) => doc.definitions.get(String(node.identifier)));
-  if (!definition2) return /* @__PURE__ */ jsx2(Fragment2, { children: children || String(node.alt ?? node.label ?? "") });
-  return image ? /* @__PURE__ */ jsx2("img", { src: safeUrl(definition2.url, true), alt: String(node.alt ?? ""), title: definition2.title ? String(definition2.title) : void 0, loading: "lazy", decoding: "async" }) : /* @__PURE__ */ jsx2("a", { href: safeUrl(definition2.url), title: definition2.title ? String(definition2.title) : void 0, children });
+  if (!definition2) return /* @__PURE__ */ jsx4(Fragment2, { children: children || String(node.alt ?? node.label ?? "") });
+  return image ? /* @__PURE__ */ jsx4("img", { src: safeUrl(definition2.url, true), alt: String(node.alt ?? ""), title: definition2.title ? String(definition2.title) : void 0, loading: "lazy", decoding: "async" }) : /* @__PURE__ */ jsx4("a", { href: safeUrl(definition2.url), title: definition2.title ? String(definition2.title) : void 0, children });
 }
 function FootnoteReference({ node }) {
   const runtime = useRuntime();
   const identifier2 = String(node.identifier);
   const number = useDocumentSelector((doc) => doc.footnoteOrder.indexOf(identifier2) + 1);
-  return /* @__PURE__ */ jsx2("sup", { "data-limr-ignore": "true", children: /* @__PURE__ */ jsx2("a", { href: `#${runtime.document.id}-fn-${encodeURIComponent(identifier2)}`, id: `${runtime.document.id}-fnref-${rangeOf(node).start}`, "aria-label": `Footnote ${number}`, children: number }) });
+  return /* @__PURE__ */ jsx4("sup", { "data-limr-ignore": "true", children: /* @__PURE__ */ jsx4("a", { href: `#${runtime.document.id}-fn-${encodeURIComponent(identifier2)}`, id: `${runtime.document.id}-fnref-${rangeOf(node).start}`, "aria-label": `Footnote ${number}`, children: number }) });
 }
-var ExtensionBoundary = class extends Component {
+var ExtensionBoundary = class extends Component2 {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -978,7 +1221,7 @@ var ExtensionBoundary = class extends Component {
     if (this.state.failed && previous.fallback !== this.props.fallback) this.setState({ failed: false });
   }
   render() {
-    return this.state.failed ? /* @__PURE__ */ jsx2("pre", { className: "limr-extension-error", children: this.props.fallback }) : this.props.children;
+    return this.state.failed ? /* @__PURE__ */ jsx4("pre", { className: "limr-extension-error", children: this.props.fallback }) : this.props.children;
   }
 };
 function containsBlock(node) {
@@ -986,20 +1229,26 @@ function containsBlock(node) {
 }
 function renderNode(node, context, index = 0, trailing) {
   const { runtime } = context;
-  if (node.type === "text" && context.compact) return node.value ?? "";
+  if (node.type === "text" && context.compact) return context.live ? /* @__PURE__ */ jsx4(StreamText, { value: node.value ?? "", animateInitial: rangeOf(node).end > context.revealFrom }, `text-${node.position?.start.offset ?? index}`) : node.value ?? "";
+  if (node.type === "streamPending") return null;
   const blockElement = node === context.block.node ? context.blockElement : void 0;
   const key = `${node.type}-${node.position?.start.offset ?? index}-${index}`;
-  const childContext = node.type === "list" ? { ...context, tightList: !node.spread } : context;
+  let childContext = node.type === "list" ? { ...context, tightList: !node.spread } : context;
+  if (runtime.rendererOverrides.size) childContext = { ...childContext, ancestors: [...context.ancestors ?? [], node] };
   const renderChildren = (nodes, options) => {
     let last = -1;
     nodes.forEach((child, i) => {
       if (!["definition", "footnoteDefinition", "annotationDefinition"].includes(child.type)) last = i;
     });
-    if (last < 0 && options?.trailing) return [/* @__PURE__ */ jsx2(Fragment, { children: options.trailing }, "trailing")];
+    if (last < 0 && options?.trailing) return [/* @__PURE__ */ jsx4(Fragment, { children: options.trailing }, "trailing")];
     return nodes.map((child, i) => renderNode(child, childContext, i, i === last ? options?.trailing : void 0));
   };
   const children = node.type === "table" ? [] : node.type === "listItem" && context.tightList ? (node.children ?? []).flatMap((child, index2) => child.type === "paragraph" ? renderChildren(child.children ?? []) : renderNode(child, context, index2)) : renderChildren(node.children ?? []);
-  const Renderer = runtime.components[node.type === "component" ? node.name ?? "" : node.type];
+  const componentName = node.type === "component" ? node.name ?? "" : node.type;
+  const rules = runtime.rendererOverrides.get(componentName);
+  const override = rules?.slice().reverse().find((rule) => !rule.when || rule.when(node, { pending: context.block.pending, incomplete: !!node.incomplete, ancestors: context.ancestors ?? [] }));
+  const owner = node.incomplete && !override ? runtime.configuration.get().extensions?.slice().reverse().find((extension) => extension.components?.[componentName]) : void 0;
+  const Renderer = override?.component ?? (node.incomplete && owner?.streaming?.Loading || runtime.components[componentName]);
   let element;
   if (Renderer) {
     const range = rangeOf(node);
@@ -1007,14 +1256,14 @@ function renderNode(node, context, index = 0, trailing) {
       const attribute = node.attributeNodes?.[name];
       if (!attribute) return String(node.attributes?.[name] ?? "");
       const range2 = rangeOf(attribute);
-      return /* @__PURE__ */ jsx2(Text, { node: attribute, context, marks: context.occurrences.filter((item) => item.range.end > range2.start && item.range.end <= range2.end) });
+      return /* @__PURE__ */ jsx4(Text, { node: attribute, context, marks: context.occurrences.filter((item) => item.range.end > range2.start && item.range.end <= range2.end) });
     };
-    element = /* @__PURE__ */ jsx2(ExtensionBoundary, { fallback: runtime.document.getSnapshot().source.slice(range.start, range.end), children: /* @__PURE__ */ jsx2(Renderer, { node, children, pending: context.block.pending, source: runtime.document.getSnapshot().source.slice(range.start, range.end), renderChildren, renderValue: (tokens) => /* @__PURE__ */ jsx2(LiteralValue, { node, context, tokens }), renderAttribute }) }, key);
+    element = /* @__PURE__ */ jsx4(ExtensionBoundary, { fallback: runtime.document.getSnapshot().source.slice(range.start, range.end), children: /* @__PURE__ */ jsx4(Renderer, { node, children, pending: context.block.pending, incomplete: !!node.incomplete, source: runtime.document.getSnapshot().source.slice(range.start, range.end), renderChildren, renderValue: (tokens) => /* @__PURE__ */ jsx4(LiteralValue, { node, context, tokens }), renderAttribute }) }, key);
   } else {
     switch (node.type) {
       case "text":
         return /* @__PURE__ */ jsxs2(Fragment, { children: [
-          context.compact ? node.value ?? "" : /* @__PURE__ */ jsx2(Text, { node, context }),
+          context.compact ? node.value ?? "" : /* @__PURE__ */ jsx4(Text, { node, context }),
           trailing
         ] }, key);
       case "paragraph":
@@ -1033,62 +1282,62 @@ function renderNode(node, context, index = 0, trailing) {
           trailing
         ] }, key);
       case "strong":
-        element = /* @__PURE__ */ jsx2("strong", { children });
+        element = /* @__PURE__ */ jsx4("strong", { children });
         break;
       case "emphasis":
-        element = /* @__PURE__ */ jsx2("em", { children });
+        element = /* @__PURE__ */ jsx4("em", { children });
         break;
       case "delete":
-        element = /* @__PURE__ */ jsx2("del", { children });
+        element = /* @__PURE__ */ jsx4("del", { children });
         break;
       case "inlineCode":
-        element = /* @__PURE__ */ jsx2("code", { className: "limr-inline-code", "data-limr-inline-syntax": "", "data-source-start": rangeOf(node).start, "data-source-end": rangeOf(node).end, children: /* @__PURE__ */ jsx2(LiteralValue, { node, context }) });
+        element = /* @__PURE__ */ jsx4("code", { className: "limr-inline-code", "data-limr-inline-syntax": "", "data-source-start": rangeOf(node).start, "data-source-end": rangeOf(node).end, children: /* @__PURE__ */ jsx4(LiteralValue, { node, context }) });
         break;
       case "code":
-        element = /* @__PURE__ */ jsx2("pre", { children: /* @__PURE__ */ jsx2("code", { children: /* @__PURE__ */ jsx2(LiteralValue, { node, context }) }) });
+        element = /* @__PURE__ */ jsx4("pre", { children: /* @__PURE__ */ jsx4("code", { children: /* @__PURE__ */ jsx4(LiteralValue, { node, context }) }) });
         break;
       case "math":
       case "inlineMath":
-        element = /* @__PURE__ */ jsx2("code", { children: node.value });
+        element = /* @__PURE__ */ jsx4("code", { children: node.value });
         break;
       case "blockquote":
         element = /* @__PURE__ */ jsxs2("blockquote", { className: "limr-note", children: [
-          /* @__PURE__ */ jsx2("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.note }),
-          /* @__PURE__ */ jsx2("div", { className: "limr-block-content", children })
+          /* @__PURE__ */ jsx4("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.note }),
+          /* @__PURE__ */ jsx4("div", { className: "limr-block-content", children })
         ] });
         break;
       case "list":
-        element = node.ordered ? /* @__PURE__ */ jsx2("ol", { start: Number(node.start ?? 1), children }) : /* @__PURE__ */ jsx2("ul", { children });
+        element = node.ordered ? /* @__PURE__ */ jsx4("ol", { start: Number(node.start ?? 1), children }) : /* @__PURE__ */ jsx4("ul", { children });
         break;
       case "listItem":
         element = /* @__PURE__ */ jsxs2("li", { className: typeof node.checked === "boolean" ? "limr-task-item" : void 0, children: [
-          typeof node.checked === "boolean" && /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: node.checked, disabled: true, "aria-label": "Task" }),
+          typeof node.checked === "boolean" && /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: node.checked, disabled: true, "aria-label": "Task" }),
           children
         ] });
         break;
       case "link":
-        element = /* @__PURE__ */ jsx2("a", { href: safeUrl(node.url), title: node.title ? String(node.title) : void 0, children });
+        element = /* @__PURE__ */ jsx4("a", { href: safeUrl(node.url), title: node.title ? String(node.title) : void 0, children });
         break;
       case "image":
-        element = /* @__PURE__ */ jsx2("img", { src: safeUrl(node.url, true), alt: String(node.alt ?? ""), title: node.title ? String(node.title) : void 0, loading: "lazy", decoding: "async" });
+        element = /* @__PURE__ */ jsx4("img", { src: safeUrl(node.url, true), alt: String(node.alt ?? ""), title: node.title ? String(node.title) : void 0, loading: "lazy", decoding: "async" });
         break;
       case "linkReference":
-        element = /* @__PURE__ */ jsx2(Reference, { node, image: false, children });
+        element = /* @__PURE__ */ jsx4(Reference, { node, image: false, children });
         break;
       case "imageReference":
-        element = /* @__PURE__ */ jsx2(Reference, { node, image: true, children });
+        element = /* @__PURE__ */ jsx4(Reference, { node, image: true, children });
         break;
       case "thematicBreak":
-        element = /* @__PURE__ */ jsx2("hr", {});
+        element = /* @__PURE__ */ jsx4("hr", {});
         break;
       case "break":
-        element = /* @__PURE__ */ jsx2("br", {});
+        element = /* @__PURE__ */ jsx4("br", { "data-limr-break": "", "data-source-start": rangeOf(node).start, "data-source-end": rangeOf(node).end });
         break;
       case "table": {
         const rows = node.children ?? [], alignment = node.align;
-        element = /* @__PURE__ */ jsx2("div", { className: "limr-table-scroll", children: /* @__PURE__ */ jsxs2("table", { children: [
-          /* @__PURE__ */ jsx2("thead", { children: rows.slice(0, 1).map((row, i) => /* @__PURE__ */ jsx2("tr", { children: row.children?.map((cell, j) => /* @__PURE__ */ jsx2("th", { style: { textAlign: alignment?.[j] }, children: renderChildren(cell.children ?? []) }, j)) }, i)) }),
-          /* @__PURE__ */ jsx2("tbody", { children: rows.slice(1).map((row, i) => /* @__PURE__ */ jsx2("tr", { children: row.children?.map((cell, j) => /* @__PURE__ */ jsx2("td", { style: { textAlign: alignment?.[j] }, children: renderChildren(cell.children ?? []) }, j)) }, i)) })
+        element = /* @__PURE__ */ jsx4("div", { className: "limr-table-scroll", children: /* @__PURE__ */ jsxs2("table", { children: [
+          /* @__PURE__ */ jsx4("thead", { children: rows.slice(0, 1).map((row, i) => /* @__PURE__ */ jsx4("tr", { children: row.children?.map((cell, j) => /* @__PURE__ */ jsx4("th", { style: { textAlign: alignment?.[j] }, children: renderChildren(cell.children ?? []) }, j)) }, i)) }),
+          /* @__PURE__ */ jsx4("tbody", { children: rows.slice(1).map((row, i) => /* @__PURE__ */ jsx4("tr", { children: row.children?.map((cell, j) => /* @__PURE__ */ jsx4("td", { style: { textAlign: alignment?.[j] }, children: renderChildren(cell.children ?? []) }, j)) }, i)) })
         ] }) });
         break;
       }
@@ -1098,19 +1347,19 @@ function renderNode(node, context, index = 0, trailing) {
         return null;
       case "footnoteReference":
         return /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(FootnoteReference, { node }),
+          /* @__PURE__ */ jsx4(FootnoteReference, { node }),
           trailing
         ] }, key);
       case "annotationReference": {
         const Tag = node.inline ? "span" : "div";
         element = /* @__PURE__ */ jsxs2(Tag, { children: [
           children,
-          /* @__PURE__ */ jsx2(AnnotationMarker, { occurrence: { id: `${runtime.document.id}-ref-${rangeOf(node).start}`, range: rangeOf(node), annotationIds: node.annotationIds, embedded: true } })
+          /* @__PURE__ */ jsx4(AnnotationMarker, { occurrence: { id: `${runtime.document.id}-ref-${rangeOf(node).start}`, range: rangeOf(node), annotationIds: node.annotationIds, embedded: true } })
         ] });
         break;
       }
       case "html":
-        element = /* @__PURE__ */ jsx2("span", { className: "limr-literal", children: node.value });
+        element = /* @__PURE__ */ jsx4("span", { className: "limr-literal", children: node.value });
         break;
       case "component":
         element = children;
@@ -1122,27 +1371,40 @@ function renderNode(node, context, index = 0, trailing) {
   const atomic2 = node.selection === "atomic" || ["math", "inlineMath", "image", "imageReference", "html"].includes(node.type);
   const corner = atomic2 && (!node.inline && !["inlineCode", "inlineMath", "html"].includes(node.type) || ["image", "imageReference"].includes(node.type) || node.name === "img");
   const after = corner ? void 0 : context.afterMarks.get(node);
-  const withMarkers = (element2) => after?.length || trailing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-    element2,
-    after?.map((occurrence) => /* @__PURE__ */ jsx2(AnnotationMarker, { occurrence }, occurrence.id)),
-    trailing
-  ] }, key) : element2;
-  if (atomic2) return withMarkers(/* @__PURE__ */ jsx2(Atomic, { node, context, blockElement, inline: node.inline || ["inlineCode", "inlineMath", "image", "imageReference", "html"].includes(node.type), children: element }, key));
+  const withMarkers = (element2) => {
+    const result = after?.length || trailing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      element2,
+      after?.map((occurrence) => /* @__PURE__ */ jsx4(AnnotationMarker, { occurrence }, occurrence.id)),
+      trailing
+    ] }, key) : element2;
+    return context.live && !node.inline && (node.type === "component" || ["code", "math", "mermaid", "callout", "blockquote", "table"].includes(node.type)) ? /* @__PURE__ */ jsx4(StreamEntrance, { state: node.type === "component" ? !!node.incomplete : true, children: result }, key) : result;
+  };
+  if (atomic2) return withMarkers(/* @__PURE__ */ jsx4(Atomic, { node, context, blockElement, inline: node.inline || ["inlineCode", "inlineMath", "image", "imageReference", "html"].includes(node.type), children: element }, key));
   if (blockElement) {
     const attributes = { ...blockAttributes(blockElement), ref: blockElement.ref };
-    return withMarkers(isValidElement(element) && typeof element.type === "string" ? cloneElement(element, { ...attributes, key }) : /* @__PURE__ */ jsx2("div", { ...attributes, children: element }, key));
+    return withMarkers(isValidElement(element) && typeof element.type === "string" ? cloneElement(element, { ...attributes, key }) : /* @__PURE__ */ jsx4("div", { ...attributes, children: element }, key));
   }
-  return withMarkers(isValidElement(element) ? cloneElement(element, { key }) : /* @__PURE__ */ jsx2(Fragment, { children: element }, key));
+  return withMarkers(isValidElement(element) ? cloneElement(element, { key }) : /* @__PURE__ */ jsx4(Fragment, { children: element }, key));
 }
-var BlockView = memo(function BlockView2({ block, runtime, components, extensions, decorations, footnoteId }) {
-  const element = useRef2(null);
-  const clearBindings = useRef2(void 0);
+var BlockView = memo(function BlockView2({ block, runtime, components, extensions, rendererOverrides, decorations, footnoteId }) {
+  const streamed = useRef4(runtime.document.getSnapshot().streaming);
+  if (block.pending) streamed.current = true;
+  const revealed = useRef4(block.range.start);
+  const revealFrom = revealed.current;
+  useIsomorphicLayoutEffect(() => {
+    revealed.current = Math.max(revealed.current, block.range.end);
+  }, [block.range.end]);
+  const element = useRef4(null);
+  const getElement = useCallback2(() => element.current, []);
+  const typography = useStoreSelector(runtime.configuration, (config) => config.typography);
+  const knuthPlass = useStoreSelector(runtime.configuration, (config) => config.knuthPlass);
+  const clearBindings = useRef4(void 0);
   const { occurrences } = decorations;
   const highlights = useMemo(() => decorations.highlights.filter((highlight) => !highlight.occurrenceId), [decorations.highlights]);
   const root = useMemo(() => footnoteId ? { ...block.node, type: "listItem" } : block.node, [block, footnoteId]);
-  const texts = useMemo(() => compactTextNodes(root, runtime.components), [root, runtime, components, extensions]);
-  const compact = !!texts && !occurrences.length && !highlights.length;
-  const observe = useCallback((next) => {
+  const texts = useMemo(() => compactTextNodes(root, runtime.components, runtime.rendererOverrides), [root, runtime, components, extensions, rendererOverrides]);
+  const compact = typography !== "knuth-plass" && !!texts && !occurrences.length && !highlights.length;
+  const observe = useCallback2((next) => {
     clearBindings.current?.();
     clearBindings.current = void 0;
     if (element.current) runtime.textBinders.delete(element.current);
@@ -1186,148 +1448,32 @@ var BlockView = memo(function BlockView2({ block, runtime, components, extension
     return { marks: map, afterMarks: after };
   }, [block, occurrences]);
   if (!footnoteId && ["definition", "footnoteDefinition", "annotationDefinition"].includes(block.node.type)) return null;
-  const context = { runtime, block, marks, afterMarks, highlights, occurrences, compact, blockElement: { id: block.id, range: block.range, pending: block.pending, ref: observe } };
-  if (footnoteId) return /* @__PURE__ */ jsx2("li", { id: `${runtime.document.id}-fn-${encodeURIComponent(footnoteId)}`, ...blockAttributes(context.blockElement), ref: observe, children: block.node.children?.map((child, index) => renderNode(child, { ...context, blockElement: void 0 }, index)) });
-  return renderNode(block.node, context);
+  const context = { runtime, block, marks, afterMarks, highlights, occurrences, compact, live: streamed.current, revealFrom, blockElement: { id: block.id, range: block.range, pending: block.pending, ref: observe } };
+  const content = footnoteId ? /* @__PURE__ */ jsx4("li", { id: `${runtime.document.id}-fn-${encodeURIComponent(footnoteId)}`, ...blockAttributes(context.blockElement), ref: observe, children: block.node.children?.map((child, index) => renderNode(child, { ...context, blockElement: void 0 }, index)) }) : renderNode(block.node, context);
+  return /* @__PURE__ */ jsx4(KnuthPlassBoundary, { element: getElement, runtime, enabled: typography === "knuth-plass", pending: block.pending, options: knuthPlass, children: content });
 });
 function Footnotes() {
   const runtime = useRuntime();
   const doc = useDocumentSelector((snapshot) => snapshot);
   const components = useStoreSelector(runtime.configuration, (config) => config.components);
   const extensions = useStoreSelector(runtime.configuration, (config) => config.extensions);
+  const rendererOverrides = useStoreSelector(runtime.configuration, (config) => config.rendererOverrides);
   const decorations = useStoreSelector(runtime.decorations, (state) => state.byBlock);
   const blocks = useMemo(() => new Map(doc.blocks.filter((block) => block.node.type === "footnoteDefinition").map((block) => [String(block.node.identifier), block])), [doc.blocks]);
   if (!doc.footnoteOrder.length) return null;
   return /* @__PURE__ */ jsxs2("section", { className: "limr-footnotes", "aria-label": runtime.locale.footnotes, children: [
-    /* @__PURE__ */ jsx2("hr", {}),
-    /* @__PURE__ */ jsx2("ol", { children: doc.footnoteOrder.map((id) => {
+    /* @__PURE__ */ jsx4("hr", {}),
+    /* @__PURE__ */ jsx4("ol", { children: doc.footnoteOrder.map((id) => {
       const node = doc.footnotes.get(id);
       if (!node) return null;
       const block = blocks.get(id) ?? { id: `${doc.id}-fn-${id}`, range: rangeOf(node), node, pending: false };
-      return /* @__PURE__ */ jsx2(BlockView, { block, runtime, components, extensions, footnoteId: id, decorations: decorations.get(block.id) ?? emptyDecorations }, id);
+      return /* @__PURE__ */ jsx4(BlockView, { block, runtime, components, extensions, rendererOverrides, footnoteId: id, decorations: decorations.get(block.id) ?? emptyDecorations }, id);
     }) })
   ] });
 }
 
 // src/react/selection.ts
-import { useEffect as useEffect2 } from "react";
-
-// src/react/source-geometry.ts
-function flowOf(element, container) {
-  const known = element.closest("pre,p,figcaption,li,th,td,h1,h2,h3,h4,h5,h6,.limr-choice-text,.limr-definition-title,.limr-question-title,.limr-block-content");
-  return known && container.contains(known) ? known : element.closest("[data-limr-block]") ?? container;
-}
-function leavesIn(block, runtime) {
-  runtime.prepareTextBindings(block);
-  const result = [];
-  const visit = (node, inherited) => {
-    if (node instanceof HTMLElement) {
-      if (node !== block && node.hasAttribute("data-limr-document") || node.hasAttribute("inert")) return;
-      const marker = node.dataset.limrMarker;
-      const atomic2 = node.dataset.limrAtomic;
-      if (marker || atomic2) {
-        const image = node.dataset.limrMedia === "image";
-        result.push({ node, kind: marker ? "marker" : image ? "image" : atomic2 === "block" ? "block" : "inline", range: { start: Number(node.dataset.sourceStart), end: Number(node.dataset.sourceEnd) }, flow: image ? node : flowOf(node, runtime.content), offset: 0 });
-        return;
-      }
-      if (node.hasAttribute("data-limr-ignore")) return;
-      const binding = runtime.bindings.get(node);
-      if (binding) inherited = { binding, offset: 0 };
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-      const binding = runtime.bindings.get(node) ?? inherited?.binding;
-      const offset = runtime.bindings.has(node) ? 0 : inherited?.offset ?? 0;
-      const length = node.textContent?.length ?? 0;
-      if (binding?.resolve && length) result.push({ node, kind: "text", range: { start: binding.resolve(offset, "start"), end: binding.resolve(offset + length, "end") }, flow: flowOf(node.parentElement, runtime.content), binding, offset });
-      if (inherited) inherited.offset += length;
-      return;
-    }
-    node.childNodes.forEach((child) => visit(child, inherited));
-  };
-  visit(block);
-  return result;
-}
-function textRange(leaf, source, viewport) {
-  const node = leaf.node, length = node.length;
-  const resolve = leaf.binding.resolve;
-  let lo = 0, hi = length;
-  while (lo < hi) {
-    const mid = lo + hi >>> 1;
-    if (resolve(leaf.offset + mid + 1, "end") <= source.start) lo = mid + 1;
-    else hi = mid;
-  }
-  let start = lo;
-  lo = start;
-  hi = length;
-  while (lo < hi) {
-    const mid = lo + hi >>> 1;
-    if (resolve(leaf.offset + mid, "start") < source.end) lo = mid + 1;
-    else hi = mid;
-  }
-  if (start === lo) return null;
-  let end = lo;
-  const range = document.createRange();
-  if (viewport && end - start > 1024) {
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    const box = range.getBoundingClientRect();
-    if (box.height > viewport.bottom - viewport.top + 80) {
-      lo = start;
-      hi = end;
-      while (lo < hi) {
-        const mid = lo + hi >>> 1;
-        range.setStart(node, mid);
-        range.setEnd(node, mid + 1);
-        if (range.getBoundingClientRect().bottom < viewport.top) lo = mid + 1;
-        else hi = mid;
-      }
-      start = lo;
-      hi = end;
-      while (lo < hi) {
-        const mid = lo + hi >>> 1;
-        range.setStart(node, mid);
-        range.setEnd(node, mid + 1);
-        if (range.getBoundingClientRect().top <= viewport.bottom) lo = mid + 1;
-        else hi = mid;
-      }
-      end = lo;
-    }
-  }
-  if (start === end) return null;
-  range.setStart(node, start);
-  range.setEnd(node, end);
-  return range;
-}
-function sourceRangeStartRect(runtime, source) {
-  for (const block of runtime.document.getSnapshot().blocks) {
-    if (!intersects(block.range, source)) continue;
-    const element = runtime.blocks.get(block.id);
-    if (!element) continue;
-    for (const leaf of leavesIn(element, runtime)) {
-      if (leaf.kind === "marker" || !intersects(leaf.range, source)) continue;
-      if (leaf.kind === "text") {
-        const range = textRange(leaf, source);
-        if (!range) continue;
-        const node = leaf.node, end = range.endOffset;
-        for (let start = range.startOffset; start < end; ) {
-          const next = Math.min(end, start + (node.data.codePointAt(start) > 65535 ? 2 : 1));
-          range.setStart(node, start);
-          range.setEnd(node, next);
-          const rect = range.getBoundingClientRect();
-          if (rect.width && rect.height) return rect;
-          start = next;
-        }
-      } else {
-        const node = leaf.node;
-        const rect = (node.querySelector(leaf.kind === "image" ? "img" : "[data-limr-selection-surface]") ?? node).getBoundingClientRect();
-        if (rect.width && rect.height) return rect;
-      }
-    }
-  }
-  return null;
-}
-
-// src/react/selection.ts
+import { useEffect as useEffect3 } from "react";
 function visualSelection(runtime, native, options) {
   if (![...runtime.content.querySelectorAll('[data-limr-selection-order="visual"]')].some((element) => native.intersectsNode(element))) return;
   const blocks = [...runtime.blocks.values()].filter((block) => native.intersectsNode(block));
@@ -1374,7 +1520,7 @@ function visualSelection(runtime, native, options) {
   return { ...selections[0], raw: combine("raw"), syntax: combine("syntax"), blocks: combine("blocks") };
 }
 function useSelectionTracking(runtime, enabled) {
-  useEffect2(() => {
+  useEffect3(() => {
     const container = runtime.content;
     if (!container || !enabled) return;
     let frame = 0, dragging = false;
@@ -1382,6 +1528,10 @@ function useSelectionTracking(runtime, enabled) {
     function resolve(node, offset, edge) {
       let element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
       if (!element || element.closest("[data-limr-document]") !== container || element.closest("[data-limr-ignore]")) return null;
+      let atom = element.closest("[data-limr-atomic]");
+      for (let outer = atom?.parentElement?.closest("[data-limr-atomic]"); outer && container?.contains(outer); outer = atom.parentElement?.closest("[data-limr-atomic]")) atom = outer;
+      const atomicBinding = atom && runtime.bindings.get(atom);
+      if (atomicBinding?.atomic) return { offset: edge === "start" ? atomicBinding.range.start : atomicBinding.range.end, atomic: true, exact: true };
       runtime.prepareTextBindings(element);
       const native = node.nodeType === Node.TEXT_NODE ? runtime.bindings.get(node) : void 0;
       if (native?.resolve) return { offset: native.resolve(offset, edge), atomic: false, exact: native.exact !== false };
@@ -1389,7 +1539,7 @@ function useSelectionTracking(runtime, enabled) {
         const binding = runtime.bindings.get(element);
         if (binding) {
           if (binding.atomic) return { offset: edge === "start" ? binding.range.start : binding.range.end, atomic: true, exact: true };
-          const range = document.createRange();
+          const range = measurementRange(element.ownerDocument);
           range.setStart(element, 0);
           try {
             range.setEnd(node, offset);
@@ -1450,12 +1600,20 @@ function useSelectionTracking(runtime, enabled) {
       previous = { startNode: range.startContainer, start: range.startOffset, endNode: range.endContainer, end: range.endOffset, revision, settled: !dragging };
       runtime.selectionRange = range.cloneRange();
       runtime.highlightReference = null;
+      const text = selection.toString();
       const options = {
-        text: selection.toString(),
+        // An image/diagram can prohibit internal text selection while its
+        // complete source block remains selectable and copyable.
+        text: text || (start.atomic && end.atomic ? runtime.document.getSnapshot().source.slice(start.offset, end.offset) : ""),
         settled: !dragging,
         quality: !start.exact || !end.exact ? "unmapped" : start.atomic || end.atomic ? "atomic" : "exact"
       };
-      runtime.updateInteraction({ activeHighlight: null, selection: visualSelection(runtime, range, options) ?? selectionFromRange(runtime.document.getSnapshot(), { start: start.offset, end: end.offset }, options) });
+      let captured = visualSelection(runtime, range, options) ?? selectionFromRange(runtime.document.getSnapshot(), { start: start.offset, end: end.offset }, options);
+      if (!dragging) {
+        const atomicText = atomicSelectionText(runtime, captured.raw.ranges);
+        if (atomicText !== void 0) captured = { ...captured, text: atomicText, quality: "atomic" };
+      }
+      runtime.updateInteraction({ activeHighlight: null, selection: captured });
     }
     const schedule = () => {
       if (!frame) frame = requestAnimationFrame(process);
@@ -1467,11 +1625,34 @@ function useSelectionTracking(runtime, enabled) {
       dragging = false;
       schedule();
     };
+    const atomicCopyText = (event) => {
+      const native = window.getSelection(), captured = runtime.interaction.get().selection;
+      if (event.defaultPrevented || !native?.anchorNode || native.isCollapsed || !container.contains(native.anchorNode) || captured?.quality !== "atomic") return null;
+      if (event.target instanceof Element && event.target.closest("input,textarea,[contenteditable],[data-limr-selection-ui]")) return null;
+      return captured.settled ? captured.text : atomicSelectionText(runtime, captured.raw.ranges) ?? captured.text;
+    };
+    const copy = (event) => {
+      const text = atomicCopyText(event);
+      if (!text || !event.clipboardData) return;
+      event.clipboardData.setData("text/plain", text);
+      event.preventDefault();
+    };
+    const copyKey = (event) => {
+      if (event.key.toLowerCase() !== "c" || !(event.ctrlKey || event.metaKey) || event.altKey || !navigator.clipboard?.writeText) return;
+      if (window.getSelection()?.toString()) return;
+      const text = atomicCopyText(event);
+      if (!text) return;
+      event.preventDefault();
+      void navigator.clipboard.writeText(text).catch(() => {
+      });
+    };
     document.addEventListener("selectionchange", schedule);
     container.addEventListener("pointerdown", down);
     document.addEventListener("pointerup", up);
     document.addEventListener("pointercancel", up);
     document.addEventListener("keyup", schedule);
+    document.addEventListener("copy", copy);
+    document.addEventListener("keydown", copyKey);
     if (window.getSelection()?.isCollapsed === false) schedule();
     return () => {
       cancelAnimationFrame(frame);
@@ -1480,13 +1661,15 @@ function useSelectionTracking(runtime, enabled) {
       document.removeEventListener("pointerup", up);
       document.removeEventListener("pointercancel", up);
       document.removeEventListener("keyup", schedule);
+      document.removeEventListener("copy", copy);
+      document.removeEventListener("keydown", copyKey);
     };
   }, [runtime, enabled]);
 }
 
 // src/react/selection-paint.tsx
-import { useEffect as useEffect3, useRef as useRef3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function rectangles(leaves, source, viewport, measure) {
   const raw = [];
   const geometry = (leaf, rect, reference) => {
@@ -1509,7 +1692,7 @@ function rectangles(leaves, source, viewport, measure) {
   };
   const edgeRect = (leaf, edge) => {
     const node = leaf.node;
-    const range = document.createRange();
+    const range = measurementRange(node.ownerDocument);
     const offset = edge === "first" ? 0 : Math.max(0, node.length - 1);
     range.setStart(node, offset);
     range.setEnd(node, Math.min(node.length, offset + 1));
@@ -1527,7 +1710,7 @@ function rectangles(leaves, source, viewport, measure) {
     const boxAt = (index) => {
       const leaf = leaves[index];
       if (leaf.kind !== "text") return leaf.node.getBoundingClientRect();
-      const range = document.createRange();
+      const range = measurementRange(leaf.node.ownerDocument);
       range.selectNodeContents(leaf.node);
       return range.getBoundingClientRect();
     };
@@ -1557,6 +1740,13 @@ function rectangles(leaves, source, viewport, measure) {
       raw.push({ ...item, marker: leaf.node.dataset.limrMarker });
     } else if (intersects(leaf.range, source)) {
       if (leaf.kind === "text") {
+        const glue = leaf.node.parentElement?.closest(".limr-kp-glue");
+        if (glue) {
+          const rect = glue.getBoundingClientRect();
+          const reference = referenceFor(index, rect);
+          if (rect.width && reference && rect.bottom >= viewport.top && rect.top <= viewport.bottom) raw.push(geometry(leaf, rect, reference));
+          continue;
+        }
         const range = textRange(leaf, source, viewport);
         const shell = leaf.node.parentElement?.closest("[data-limr-inline-syntax]");
         const edges = shell ? Array.from(shell.getClientRects()) : [];
@@ -1605,15 +1795,42 @@ function rectangles(leaves, source, viewport, measure) {
     const gap = right.left - left.left - left.width;
     if (left.flow === right.flow && Math.abs(left.top - right.top) < 0.5 && gap > 0.1 && gap < left.height * 0.6) bridges.push({ left: left.left + left.width, top: left.top, width: gap, height: left.height, flow: left.flow });
   }
-  return [...aligned, ...bridges];
+  const result = [], rows = /* @__PURE__ */ new Map();
+  for (const rect of [...aligned, ...bridges]) {
+    if (!rect.flow.hasAttribute("data-limr-kp") || rect.atomic || rect.marker) {
+      result.push(rect);
+      continue;
+    }
+    let flow = rows.get(rect.flow);
+    if (!flow) {
+      flow = /* @__PURE__ */ new Map();
+      rows.set(rect.flow, flow);
+    }
+    const row = flow.get(rect.top) ?? [];
+    row.push(rect);
+    flow.set(rect.top, row);
+  }
+  for (const flow of rows.values()) for (const row of flow.values()) {
+    row.sort((a, b) => a.left - b.left);
+    let previous;
+    for (const rect of row) {
+      if (previous && rect.left <= previous.left + previous.width + 0.1 && Math.abs(rect.height - previous.height) < 0.1) previous.width = Math.max(previous.width, rect.left + rect.width - previous.left);
+      else {
+        previous = { ...rect };
+        result.push(previous);
+      }
+    }
+  }
+  return result;
 }
 function SelectionPaint({ runtime, interactive = true }) {
-  const layer = useRef3(null);
-  useEffect3(() => {
+  const layer = useRef5(null);
+  useEffect4(() => {
     const container = runtime.content, paint = layer.current;
     if (!container || !paint) return;
     let frame = 0, translating = false;
     let leavesCache = /* @__PURE__ */ new WeakMap();
+    let geometryCache = /* @__PURE__ */ new WeakMap();
     let metrics = /* @__PURE__ */ new WeakMap();
     const fontMetrics = /* @__PURE__ */ new Map();
     let blocks;
@@ -1751,17 +1968,31 @@ function SelectionPaint({ runtime, interactive = true }) {
       };
       for (let index = lo; index < blocks.length; index++) {
         const block = blocks[index];
-        if (block.element.getBoundingClientRect().top > viewport.bottom + 32) break;
+        const blockBox = block.element.getBoundingClientRect();
+        if (blockBox.top > viewport.bottom + 32) break;
         const tasks = [...decorations.get(block.id)?.highlights ?? []];
         for (const range of selections) if (intersects(range, block.range)) tasks.push({ id: "selection", range, selection: true });
         if (!tasks.length) continue;
         let leaves = leavesCache.get(block.element);
-        if (!leaves) {
-          leaves = leavesIn(block.element, runtime);
-          leavesCache.set(block.element, leaves);
+        let cached = geometryCache.get(block.element);
+        if (cached?.width !== blockBox.width || cached.height !== blockBox.height) cached = void 0;
+        if (!cached && blockBox.height < (viewport.bottom - viewport.top) * 3) {
+          cached = { width: blockBox.width, height: blockBox.height, tasks: /* @__PURE__ */ new Map() };
+          geometryCache.set(block.element, cached);
         }
         for (const task of tasks) {
-          const rects = rectangles(leaves, task.range, { ...viewport, top: viewport.top - 32, bottom: viewport.bottom + 32 }, measure);
+          const saved = cached?.tasks.get(task.id);
+          if (task.occurrenceId && !referenceActive(task.occurrenceId) && !saved) continue;
+          if (!leaves) {
+            leaves = leavesIn(block.element, runtime);
+            leavesCache.set(block.element, leaves);
+          }
+          let local = saved && sameRange(saved.source, task.range) ? saved.rects : void 0;
+          if (!local && cached) {
+            local = rectangles(leaves, task.range, { ...viewport, top: -Infinity, bottom: Infinity }, measure).map((rect) => ({ ...rect, left: rect.left - blockBox.left, top: rect.top - blockBox.top }));
+            cached.tasks.set(task.id, { source: task.range, rects: local });
+          }
+          const rects = local ? local.map((rect) => ({ ...rect, left: rect.left + blockBox.left, top: rect.top + blockBox.top })) : rectangles(leaves, task.range, { ...viewport, top: viewport.top - 32, bottom: viewport.bottom + 32 }, measure);
           for (const rect of rects) {
             const clip = clipFor(rect.flow);
             const left = Math.max(rect.left, clip.left), top = Math.max(rect.top, clip.top);
@@ -1771,13 +2002,14 @@ function SelectionPaint({ runtime, interactive = true }) {
           }
         }
       }
-      paint.style.top = `${viewport.top - origin.top + scrollTop}px`;
-      paint.style.height = `${Math.max(0, viewport.bottom - viewport.top)}px`;
       const hostGeometry = /* @__PURE__ */ new Map();
       for (const { rect, task } of output) if (!task.selection && !hostGeometry.has(rect.flow)) {
         const host = rect.flow, box = host.getBoundingClientRect();
-        hostGeometry.set(host, { box, top: Math.max(viewport.top, box.top) - box.top - host.clientTop + host.scrollTop, positioned: getComputedStyle(host).position !== "static" });
+        const x = host.scrollLeft - host.clientLeft, y = host.scrollTop - host.clientTop;
+        hostGeometry.set(host, { box, x, y, top: Math.max(viewport.top, box.top) - box.top + y, positioned: getComputedStyle(host).position !== "static" });
       }
+      paint.style.top = `${viewport.top - origin.top + scrollTop}px`;
+      paint.style.height = `${Math.max(0, viewport.bottom - viewport.top)}px`;
       const counts = /* @__PURE__ */ new Map();
       const nextHits = [];
       output.forEach(({ rect, task }) => {
@@ -1798,8 +2030,8 @@ function SelectionPaint({ runtime, interactive = true }) {
           layer2.style.top = `${geometry.top}px`;
           layer2.style.height = `${Math.max(0, Math.min(viewport.bottom, geometry.box.bottom) - Math.max(viewport.top, geometry.box.top))}px`;
           target = layer2;
-          left += origin.left - geometry.box.left - host.clientLeft + host.scrollLeft;
-          top += viewport.top - geometry.box.top - host.clientTop + host.scrollTop - geometry.top;
+          left += origin.left - geometry.box.left + geometry.x;
+          top += viewport.top - geometry.box.top + geometry.y - geometry.top;
           nextHits.push({ id: task.id, rect: { left: rect.left + origin.left - scrollLeft, top: rect.top + viewport.top, width: rect.width, height: rect.height } });
         }
         const index = counts.get(target) ?? 0;
@@ -1828,8 +2060,11 @@ function SelectionPaint({ runtime, interactive = true }) {
         }
         if (!item.parentNode) target.append(item);
       });
-      for (const layer2 of [paint, ...highlightLayers.values()]) while (layer2.children.length > (counts.get(layer2) ?? 0)) layer2.lastChild.remove();
       for (const [host, layer2] of highlightLayers) if (!counts.has(layer2)) removeLayer(host, layer2);
+      for (const layer2 of [paint, ...highlightLayers.values()]) {
+        const count = counts.get(layer2) ?? 0;
+        if (layer2.children.length > count) layer2.replaceChildren(...Array.from(layer2.children).slice(0, count));
+      }
       hits = nextHits;
       const active = runtime.interaction.get().activeHighlight;
       if (active && !hits.some((hit) => hit.id === active)) runtime.clearSelection();
@@ -1857,10 +2092,12 @@ function SelectionPaint({ runtime, interactive = true }) {
     };
     const fontsChanged = () => {
       fontMetrics.clear();
+      geometryCache = /* @__PURE__ */ new WeakMap();
       invalidate();
     };
     const unsubscribers = [runtime.interaction.subscribe(() => {
       const state = runtime.interaction.get(), selection = state.selection;
+      const referenceChanged = state.active !== lastAnnotation || state.hovered !== lastHoveredAnnotation;
       if (state.hoveredHighlight !== lastHovered || state.activeHighlight !== lastActive || state.active !== lastAnnotation || state.hovered !== lastHoveredAnnotation) {
         lastHovered = state.hoveredHighlight;
         lastActive = state.activeHighlight;
@@ -1868,6 +2105,7 @@ function SelectionPaint({ runtime, interactive = true }) {
         lastHoveredAnnotation = state.hovered;
         feedback();
       }
+      if (referenceChanged) schedule();
       if (selection === lastSelection) return;
       lastSelection = selection;
       render();
@@ -1876,8 +2114,12 @@ function SelectionPaint({ runtime, interactive = true }) {
       if (decorations === lastDecorations) return;
       lastDecorations = decorations;
       leavesCache = /* @__PURE__ */ new WeakMap();
+      geometryCache = /* @__PURE__ */ new WeakMap();
       schedule();
-    }), runtime.layout.subscribe(invalidate), runtime.documentOffset.subscribe(schedule), runtime.configuration.subscribe(invalidate)];
+    }), runtime.layout.subscribe(invalidate), runtime.documentOffset.subscribe(schedule), runtime.configuration.subscribe(() => {
+      geometryCache = /* @__PURE__ */ new WeakMap();
+      invalidate();
+    })];
     const observer = new MutationObserver((records) => {
       let changed = false;
       for (const record of records) {
@@ -1885,8 +2127,13 @@ function SelectionPaint({ runtime, interactive = true }) {
         if (!target || target === paint || paint.contains(target) || target.closest(".limr-highlight-layer")) continue;
         if (record.type === "childList" && [...record.addedNodes, ...record.removedNodes].every((node) => node instanceof Element && node.classList.contains("limr-highlight-layer"))) continue;
         const block = target.closest("[data-limr-block]");
-        if (block) leavesCache.delete(block);
-        else blocks = void 0;
+        if (block) {
+          leavesCache.delete(block);
+          geometryCache.delete(block);
+        } else {
+          blocks = void 0;
+          geometryCache = /* @__PURE__ */ new WeakMap();
+        }
         changed = true;
       }
       if (changed) {
@@ -1895,7 +2142,12 @@ function SelectionPaint({ runtime, interactive = true }) {
       }
     });
     observer.observe(container, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["class", "style", "inert", "open", "data-limr-theme", "data-limr-justify"] });
-    const scroll = () => {
+    const scroll = (event) => {
+      const target = event.target;
+      if (target instanceof Element) {
+        const block = target.closest("[data-limr-block]");
+        if (block) geometryCache.delete(block);
+      }
       runtime.hoverHighlight(null);
       schedule();
     };
@@ -1986,15 +2238,15 @@ function SelectionPaint({ runtime, interactive = true }) {
       clear();
     };
   }, [runtime, interactive]);
-  return /* @__PURE__ */ jsx3("div", { ref: layer, className: "limr-paint-layer", "data-limr-ignore": "true", "aria-hidden": "true" });
+  return /* @__PURE__ */ jsx5("div", { ref: layer, className: "limr-paint-layer", "data-limr-ignore": "true", "aria-hidden": "true" });
 }
 
 // src/react/Markdown.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function Markdown({ className, style, interactive = true, followOutput = false, justify, ...props }) {
   const parent = useContext(RuntimeContext);
-  if (props.source !== void 0 || !parent) return /* @__PURE__ */ jsx4(DocumentProvider, { ...props, justify, children: /* @__PURE__ */ jsx4(MarkdownBody, { className, style, interactive, followOutput }) });
-  return /* @__PURE__ */ jsx4(MarkdownBody, { className, style, interactive, followOutput, justify });
+  if (props.source !== void 0 || !parent) return /* @__PURE__ */ jsx6(DocumentProvider, { ...props, justify, children: /* @__PURE__ */ jsx6(MarkdownBody, { className, style, interactive, followOutput }) });
+  return /* @__PURE__ */ jsx6(MarkdownBody, { className, style, interactive, followOutput, justify });
 }
 function MarkdownBody({ className, style, interactive, followOutput, justify }) {
   const runtime = useRuntime();
@@ -2002,17 +2254,20 @@ function MarkdownBody({ className, style, interactive, followOutput, justify })
   const appearance = useAppearance();
   const theme = useStoreSelector(runtime.configuration, (config) => config.theme ?? "light");
   const configuredJustify = useStoreSelector(runtime.configuration, (config) => config.justify ?? false);
+  const typography = useStoreSelector(runtime.configuration, (config) => config.typography ?? "standard");
+  const justified = justify ?? (typography === "justify" || configuredJustify);
   const scrollRoot = useStoreSelector(runtime.configuration, (config) => config.scrollRoot);
   const offset = useStoreSelector(runtime.documentOffset, (value) => value);
   const components = useStoreSelector(runtime.configuration, (config) => config.components);
   const extensions = useStoreSelector(runtime.configuration, (config) => config.extensions);
+  const rendererOverrides = useStoreSelector(runtime.configuration, (config) => config.rendererOverrides);
   const decorations = useStoreSelector(runtime.decorations, (state) => state.byBlock);
-  const ref = useRef4(null);
-  const pinned = useRef4(true);
+  const ref = useRef6(null);
+  const pinned = useRef6(true);
   useIsomorphicLayoutEffect(() => ref.current ? runtime.mountContent(ref.current) : void 0, [runtime, scrollRoot]);
-  useIsomorphicLayoutEffect(() => runtime.requestLayout(), [runtime, justify, configuredJustify]);
+  useIsomorphicLayoutEffect(() => runtime.requestLayout(), [runtime, justify, configuredJustify, typography]);
   useSelectionTracking(runtime, interactive);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!followOutput) return;
     const root = scrollRoot ?? window;
     const onScroll = () => {
@@ -2028,23 +2283,23 @@ function MarkdownBody({ className, style, interactive, followOutput, justify })
     const frame = requestAnimationFrame(() => runtime.scrollTo(scrollRoot?.scrollHeight ?? window.document.documentElement.scrollHeight, "instant"));
     return () => cancelAnimationFrame(frame);
   }, [document2, runtime, followOutput, scrollRoot]);
-  return /* @__PURE__ */ jsxs3("article", { ref, className: `limr-prose ${className ?? ""}`, style: { ...style, translate: offset ? `0 ${offset}px` : style?.translate }, "data-limr-theme": theme, "data-limr-appearance": appearance, "data-limr-document": document2.id, "data-limr-justify": justify ?? configuredJustify, children: [
-    document2.blocks.map((block) => /* @__PURE__ */ jsx4(BlockView, { block, runtime, components, extensions, decorations: decorations.get(block.id) ?? emptyDecorations }, block.id)),
-    /* @__PURE__ */ jsx4(Footnotes, {}),
-    /* @__PURE__ */ jsx4(SelectionPaint, { runtime, interactive })
+  return /* @__PURE__ */ jsxs3("article", { ref, className: `limr-prose ${className ?? ""}`, style: { ...style, translate: offset ? `0 ${offset}px` : style?.translate }, "data-limr-theme": theme, "data-limr-appearance": appearance, "data-limr-document": document2.id, "data-limr-justify": justified, "data-limr-typography": typography, children: [
+    document2.blocks.map((block) => /* @__PURE__ */ jsx6(BlockView, { block, runtime, components, extensions, rendererOverrides, decorations: decorations.get(block.id) ?? emptyDecorations }, block.id)),
+    /* @__PURE__ */ jsx6(Footnotes, {}),
+    /* @__PURE__ */ jsx6(SelectionPaint, { runtime, interactive })
   ] });
 }
 
 // src/components/OverlayScrollArea.tsx
-import { useRef as useRef5 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useRef as useRef7 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function OverlayScrollArea({ children, active, resetKey, label }) {
-  const area = useRef5(null);
-  const content = useRef5(null);
-  const thumb = useRef5(null);
-  const track = useRef5(null);
-  const drag = useRef5(null);
-  const show = useRef5(() => {
+  const area = useRef7(null);
+  const content = useRef7(null);
+  const thumb = useRef7(null);
+  const track = useRef7(null);
+  const drag = useRef7(null);
+  const show = useRef7(() => {
   });
   useIsomorphicLayoutEffect(() => {
     const element = area.current, wrapper = element.parentElement;
@@ -2117,73 +2372,73 @@ function OverlayScrollArea({ children, active, resetKey, label }) {
     show.current();
   };
   return /* @__PURE__ */ jsxs4("div", { className: "limr-overlay-scroll", children: [
-    /* @__PURE__ */ jsx5("div", { ref: area, className: "limr-overlay-content", "data-limr-card-body": "", tabIndex: 0, role: "region", "aria-label": label, children: /* @__PURE__ */ jsx5("div", { ref: content, className: "limr-overlay-scroll-inner", children }) }),
-    /* @__PURE__ */ jsx5("div", { ref: track, className: "limr-overlay-scrollbar", "aria-hidden": "true", onPointerDown: startDrag, onPointerMove: move, onPointerUp: end, onPointerCancel: end, onLostPointerCapture: end, children: /* @__PURE__ */ jsx5("div", { ref: thumb, className: "limr-overlay-scroll-thumb" }) })
+    /* @__PURE__ */ jsx7("div", { ref: area, className: "limr-overlay-content", "data-limr-card-body": "", tabIndex: 0, role: "region", "aria-label": label, children: /* @__PURE__ */ jsx7("div", { ref: content, className: "limr-overlay-scroll-inner", children }) }),
+    /* @__PURE__ */ jsx7("div", { ref: track, className: "limr-overlay-scrollbar", "aria-hidden": "true", onPointerDown: startDrag, onPointerMove: move, onPointerUp: end, onPointerCancel: end, onLostPointerCapture: end, children: /* @__PURE__ */ jsx7("div", { ref: thumb, className: "limr-overlay-scroll-thumb" }) })
   ] });
 }
 
 // src/components/AnnotationCard.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function AnnotationCard({ title, bodyLabel, occurrence, expanded, pinned, canExpand, expand, collapse, close, children }) {
   const locale = useLocale();
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsxs5("div", { className: "limr-overlay-header", children: [
-      /* @__PURE__ */ jsx6("span", { children: title }),
+      /* @__PURE__ */ jsx8("span", { children: title }),
       /* @__PURE__ */ jsxs5("div", { className: "limr-overlay-controls", children: [
-        expanded ? /* @__PURE__ */ jsx6("button", { type: "button", onClick: collapse, children: /* @__PURE__ */ jsx6("span", { className: "limr-underline", children: locale.collapse }) }) : canExpand && /* @__PURE__ */ jsx6("button", { type: "button", onClick: expand, children: /* @__PURE__ */ jsx6("span", { className: "limr-underline", children: locale.expand }) }),
-        pinned && /* @__PURE__ */ jsx6("button", { type: "button", className: "limr-overlay-close", onClick: close, "aria-label": locale.close, children: "\xD7" })
+        expanded ? /* @__PURE__ */ jsx8("button", { type: "button", onClick: collapse, children: /* @__PURE__ */ jsx8("span", { className: "limr-underline", children: locale.collapse }) }) : canExpand && /* @__PURE__ */ jsx8("button", { type: "button", onClick: expand, children: /* @__PURE__ */ jsx8("span", { className: "limr-underline", children: locale.expand }) }),
+        pinned && /* @__PURE__ */ jsx8("button", { type: "button", className: "limr-overlay-close", onClick: close, "aria-label": locale.close, children: "\xD7" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx6(OverlayScrollArea, { active: true, resetKey: occurrence.id, label: bodyLabel ?? (typeof title === "string" ? title : locale.annotations), children })
+    /* @__PURE__ */ jsx8(OverlayScrollArea, { active: true, resetKey: occurrence.id, label: bodyLabel ?? (typeof title === "string" ? title : locale.annotations), children })
   ] });
 }
 
 // src/extensions/annotations.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var CitationParagraph = ({ children }) => /* @__PURE__ */ jsx7("p", { children: /* @__PURE__ */ jsx7("span", { className: "limr-underline", children }) });
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var CitationParagraph = ({ children }) => /* @__PURE__ */ jsx9("p", { children: /* @__PURE__ */ jsx9("span", { className: "limr-underline", children }) });
 function CitationIcon() {
-  return /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx7("path", { d: "M2.5 4.2h4.3v4.3c0 2.1-1.2 3.3-3.5 3.8l-.5-1.4c1.4-.4 2-1 2-2H2.5V4.2Zm6.7 0h4.3v4.3c0 2.1-1.2 3.3-3.5 3.8l-.5-1.4c1.4-.4 2-1 2-2H9.2V4.2Z" }) });
+  return /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx9("path", { d: "M2.5 4.2h4.3v4.3c0 2.1-1.2 3.3-3.5 3.8l-.5-1.4c1.4-.4 2-1 2-2H2.5V4.2Zm6.7 0h4.3v4.3c0 2.1-1.2 3.3-3.5 3.8l-.5-1.4c1.4-.4 2-1 2-2H9.2V4.2Z" }) });
 }
 function AnnotationMarkdown({ source, className, ...props }) {
   const runtime = useRuntime();
   const config = useStoreSelector(runtime.configuration, (config2) => config2);
-  return /* @__PURE__ */ jsx7(Markdown, { source, extensions: config.extensions, parameters: config.parameters, components: config.components, annotationTypes: config.annotationTypes, theme: config.theme, appearance: config.appearance, locale: config.locale, interactive: false, ...props, className: `limr-annotation-markdown ${className ?? ""}` });
+  return /* @__PURE__ */ jsx9(Markdown, { source, extensions: config.extensions, parameters: config.parameters, components: config.components, annotationTypes: config.annotationTypes, theme: config.theme, appearance: config.appearance, locale: config.locale, interactive: false, ...props, className: `limr-annotation-markdown ${className ?? ""}` });
 }
 function citation(options = {}) {
-  function Preview({ annotations }) {
+  function Preview2({ annotations }) {
     const summary = useMemo2(() => annotations.filter((annotation) => annotation.type === (options.type ?? "citation")).map((annotation) => {
       const data = annotation.data;
       const source = data?.summary?.trim() || data?.description?.trim();
       if (source) return fromMarkdown(source).children?.map(textContent).join(" ").replace(/\s+/g, " ").trim();
       return safeUrl(data?.url) || data?.title;
     }).filter(Boolean).join(" \xB7 "), [annotations]);
-    return summary ? /* @__PURE__ */ jsx7("span", { title: summary, children: summary }) : null;
+    return summary ? /* @__PURE__ */ jsx9("span", { title: summary, children: summary }) : null;
   }
-  function Card(props) {
+  function Card2(props) {
     const locale = useLocale();
-    return /* @__PURE__ */ jsx7(AnnotationCard, { ...props, title: locale.citation ?? locale.annotations });
+    return /* @__PURE__ */ jsx9(AnnotationCard, { ...props, title: locale.citation ?? locale.annotations });
   }
-  function Content({ data }) {
+  function Content3({ data }) {
     const runtime = useRuntime();
     const configured = useStoreSelector(runtime.configuration, () => runtime.components);
     const components = useMemo2(() => ({ ...configured, paragraph: configured.paragraph ?? CitationParagraph }), [configured]);
-    const link = useRef6(null);
+    const link = useRef8(null);
     const url = safeUrl(data?.url);
     return /* @__PURE__ */ jsxs6("div", { className: "limr-citation-content", "data-linked": !!url || void 0, onClick: (event) => {
       if (url && !event.defaultPrevented && !event.target.closest('a,button,input,textarea,select,summary,[role="button"],[contenteditable="true"],[data-limr-card-interactive]') && window.getSelection()?.isCollapsed !== false) link.current?.click();
     }, children: [
-      /* @__PURE__ */ jsx7("a", { ref: link, className: "limr-citation-title", href: url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx7("span", { className: "limr-underline", children: data?.title ?? data?.url ?? "Citation" }) }),
-      (data?.description || data?.summary) && /* @__PURE__ */ jsx7(AnnotationMarkdown, { source: data.description || data.summary, components })
+      /* @__PURE__ */ jsx9("a", { ref: link, className: "limr-citation-title", href: url, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx9("span", { className: "limr-underline", children: data?.title ?? data?.url ?? "Citation" }) }),
+      (data?.description || data?.summary) && /* @__PURE__ */ jsx9(AnnotationMarkdown, { source: data.description || data.summary, components })
     ] });
   }
   return {
     name: "citation",
     tags: ["citation", "ref"],
     scope: "local",
-    annotationTypes: [{ type: "citation", label: (locale) => locale.citation ?? "Citation", icon: CitationIcon, color: "#6366f1", highlight: "hover", Content, ...options, sidebar: { Preview, collapseOnContentClick: false, ...options.sidebar }, overlay: { Card, expand: false, ...options.overlay } }],
+    annotationTypes: [{ type: "citation", label: (locale) => locale.citation ?? "Citation", icon: CitationIcon, color: "#6366f1", highlight: "hover", Content: Content3, ...options, sidebar: { Preview: Preview2, collapseOnContentClick: false, ...options.sidebar }, overlay: { Card: Card2, expand: false, ...options.overlay } }],
     transform(root) {
       walk(root, (node) => {
-        if (node.type !== "component") return;
+        if (node.type !== "component" || node.incomplete) return;
         if (node.name === "citation") {
           const attributes = node.attributes ?? {};
           const id = String(attributes["cite-id"] ?? attributes.id ?? "");
@@ -2207,13 +2462,13 @@ function citation(options = {}) {
 }
 
 // src/extensions/translations.tsx
-import { useRef as useRef8, useState as useState3 } from "react";
+import { useRef as useRef10, useState as useState3 } from "react";
 
 // src/components/InlineMarker.tsx
 import { forwardRef } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var InlineMarker = forwardRef(function InlineMarker2({ label, color, children, className = "", style, ...props }, ref) {
-  return /* @__PURE__ */ jsx8("span", { className: "limr-mark-wrap", "data-limr-ignore": "true", children: /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("span", { className: "limr-mark-wrap", "data-limr-ignore": "true", children: /* @__PURE__ */ jsx10(
     "button",
     {
       ...props,
@@ -2223,18 +2478,18 @@ var InlineMarker = forwardRef(function InlineMarker2({ label, color, children, c
       title: props.title ?? label,
       className: `limr-mark limr-action-mark ${className}`,
       style: { "--limr-mark-color": color, ...style },
-      children: /* @__PURE__ */ jsx8("span", { className: "limr-mark-icon", children })
+      children: /* @__PURE__ */ jsx10("span", { className: "limr-mark-icon", children })
     }
   ) });
 });
 
 // src/components/Collapse.tsx
-import { useRef as useRef7, useState as useState2 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useRef as useRef9, useState as useState2 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Collapse({ open, children, className = "", keepMounted = false }) {
   const [mounted, setMounted] = useState2(open);
   const [visible, setVisible] = useState2(open);
-  const panel = useRef7(null);
+  const panel = useRef9(null);
   useIsomorphicLayoutEffect(() => {
     if (keepMounted) return;
     if (open) {
@@ -2250,24 +2505,24 @@ function Collapse({ open, children, className = "", keepMounted = false }) {
     const timer = setTimeout(() => setMounted(false), 420);
     return () => clearTimeout(timer);
   }, [open, keepMounted, mounted]);
-  return /* @__PURE__ */ jsx9("div", { ref: (element) => {
+  return /* @__PURE__ */ jsx11("div", { ref: (element) => {
     panel.current = element;
     element?.toggleAttribute("inert", !open);
-  }, className: `limr-collapse ${className}`, "data-open": (keepMounted ? open : visible) || void 0, "aria-hidden": !open, children: /* @__PURE__ */ jsx9("div", { className: "limr-collapse-inner", children: mounted || keepMounted ? children : null }) });
+  }, className: `limr-collapse ${className}`, "data-open": (keepMounted ? open : visible) || void 0, "aria-hidden": !open, children: /* @__PURE__ */ jsx11("div", { className: "limr-collapse-inner", children: mounted || keepMounted ? children : null }) });
 }
 
 // src/extensions/translations.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var modes = ["origin", "translation", "both"];
 var names = { origin: "\u539F\u6587", translation: "\u8BD1\u6587", both: "\u5BF9\u7167" };
 function TranslationIcon({ mode }) {
-  return /* @__PURE__ */ jsx10("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: mode === "both" ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx10("rect", { x: "2.5", y: "4", width: "8", height: "16", rx: "2.5" }),
-    /* @__PURE__ */ jsx10("rect", { x: "13.5", y: "4", width: "8", height: "16", rx: "2.5" }),
-    /* @__PURE__ */ jsx10("path", { d: "M5 9h3M5 12h3M16 9h3M16 12h3" })
+  return /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: mode === "both" ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("rect", { x: "2.5", y: "4", width: "8", height: "16", rx: "2.5" }),
+    /* @__PURE__ */ jsx12("rect", { x: "13.5", y: "4", width: "8", height: "16", rx: "2.5" }),
+    /* @__PURE__ */ jsx12("path", { d: "M5 9h3M5 12h3M16 9h3M16 12h3" })
   ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx10("rect", { x: "4.5", y: "3", width: "15", height: "18", rx: "3" }),
-    mode === "origin" ? /* @__PURE__ */ jsx10("path", { d: "M8.5 8h7M8.5 12h7M8.5 16h4" }) : /* @__PURE__ */ jsx10("path", { d: "M8 8.5h8M12 6.5v2M14.5 8.5c-.5 4-3 6.5-6.5 8M9.5 11c1.2 2.5 3.2 4.2 6.5 5.5" })
+    /* @__PURE__ */ jsx12("rect", { x: "4.5", y: "3", width: "15", height: "18", rx: "3" }),
+    mode === "origin" ? /* @__PURE__ */ jsx12("path", { d: "M8.5 8h7M8.5 12h7M8.5 16h4" }) : /* @__PURE__ */ jsx12("path", { d: "M8 8.5h8M12 6.5v2M14.5 8.5c-.5 4-3 6.5-6.5 8M9.5 11c1.2 2.5 3.2 4.2 6.5 5.5" })
   ] }) });
 }
 function modeOf(value, fallback) {
@@ -2291,8 +2546,8 @@ function translations(options = {}) {
     const requested = modeOf(globalMode ?? localMode ?? node.attributes?.default, options.defaultMode ?? "origin");
     const mode = !origin ? "translation" : !translation ? "origin" : requested;
     const next = modes[(modes.indexOf(mode) + 1) % modes.length];
-    const marker = useRef8(null);
-    const restoreFocus = useRef8(false);
+    const marker = useRef10(null);
+    const restoreFocus = useRef10(false);
     const locked = globalMode !== void 0 && !onGlobalChange;
     useIsomorphicLayoutEffect(() => {
       if (restoreFocus.current) {
@@ -2300,8 +2555,8 @@ function translations(options = {}) {
         restoreFocus.current = false;
       }
     }, [mode]);
-    if (!origin && !translation) return /* @__PURE__ */ jsx10(Fragment4, { children });
-    const toggle = origin && translation ? /* @__PURE__ */ jsx10(
+    if (!origin && !translation) return /* @__PURE__ */ jsx12(Fragment4, { children });
+    const toggle = origin && translation ? /* @__PURE__ */ jsx12(
       InlineMarker,
       {
         ref: marker,
@@ -2315,12 +2570,12 @@ function translations(options = {}) {
           if (globalMode !== void 0) onGlobalChange?.(next);
           else setLocalMode(next);
         },
-        children: /* @__PURE__ */ jsx10(TranslationIcon, { mode })
+        children: /* @__PURE__ */ jsx12(TranslationIcon, { mode })
       }
     ) : void 0;
     return /* @__PURE__ */ jsxs7("div", { className: "limr-translations", "data-mode": mode, children: [
-      translation && /* @__PURE__ */ jsx10(Collapse, { open: mode !== "origin", keepMounted: true, className: "limr-translation-panel", children: /* @__PURE__ */ jsx10("div", { className: "limr-translation-text", "data-language": "translation", children: renderChildren(translation.children ?? [], { trailing: mode === "translation" ? toggle : void 0 }) }) }),
-      origin && /* @__PURE__ */ jsx10(Collapse, { open: mode !== "translation", keepMounted: true, className: "limr-translation-panel", children: /* @__PURE__ */ jsx10("div", { className: "limr-translation-text", "data-language": "origin", children: renderChildren(origin.children ?? [], { trailing: mode !== "translation" ? toggle : void 0 }) }) })
+      translation && /* @__PURE__ */ jsx12(Collapse, { open: mode !== "origin", keepMounted: true, className: "limr-translation-panel", children: /* @__PURE__ */ jsx12("div", { className: "limr-translation-text", "data-language": "translation", children: renderChildren(translation.children ?? [], { trailing: mode === "translation" ? toggle : void 0 }) }) }),
+      origin && /* @__PURE__ */ jsx12(Collapse, { open: mode !== "translation", keepMounted: true, className: "limr-translation-panel", children: /* @__PURE__ */ jsx12("div", { className: "limr-translation-text", "data-language": "origin", children: renderChildren(origin.children ?? [], { trailing: mode !== "translation" ? toggle : void 0 }) }) })
     ] });
   }
   return {
@@ -2330,16 +2585,338 @@ function translations(options = {}) {
     display: "block",
     scope: "local",
     parameters: { translationMode: void 0, onTranslationModeChange: void 0 },
-    components: { translations: Translations, origin: ({ children }) => /* @__PURE__ */ jsx10(Fragment4, { children }), translation: ({ children }) => /* @__PURE__ */ jsx10(Fragment4, { children }) }
+    components: { translations: Translations, origin: ({ children }) => /* @__PURE__ */ jsx12(Fragment4, { children }), translation: ({ children }) => /* @__PURE__ */ jsx12(Fragment4, { children }) }
   };
 }
 
-// src/extensions/blocks.tsx
-import { useState as useState7 } from "react";
+// src/extensions/mermaid.tsx
+import { useEffect as useEffect6, useRef as useRef11, useState as useState4 } from "react";
+
+// src/components/LoadingRing.tsx
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function LoadingRing() {
+  const locale = useLocale();
+  return /* @__PURE__ */ jsx13("span", { className: "limr-loading", role: "status", "aria-label": locale.loading, "data-limr-ignore": "true", children: /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 32 32", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13("circle", { className: "limr-loading-track", cx: "16", cy: "16", r: "12" }),
+    /* @__PURE__ */ jsx13("g", { className: "limr-loading-orbit", children: /* @__PURE__ */ jsx13("circle", { className: "limr-loading-arc", cx: "16", cy: "16", r: "12", pathLength: "100" }) })
+  ] }) });
+}
+function BlockLoading() {
+  return /* @__PURE__ */ jsx13("div", { className: "limr-block-loading", children: /* @__PURE__ */ jsx13(LoadingRing, {}) });
+}
+
+// src/components/ToolIcon.tsx
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function ToolIcon({ name, ...props }) {
+  return /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsxs9("g", { transform: name === "highlight" ? "translate(0 -1.25)" : name === "comment" ? "translate(0 -.5)" : void 0, children: [
+    (name === "eye" || name === "eye-off") && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M3 12s3.3-6 9-6 9 6 9 6-3.3 6-9 6-9-6-9-6Z" }),
+      /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "2.7" }),
+      name === "eye-off" && /* @__PURE__ */ jsx14("path", { d: "m4 4 16 16" })
+    ] }),
+    name === "question" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "8.5" }),
+      /* @__PURE__ */ jsx14("path", { d: "M9.4 9a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2-2.6 3.7M12 17h.01" })
+    ] }),
+    name === "highlight" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "m8 15 7.6-9a2 2 0 0 1 2.8-.2l.8.7a2 2 0 0 1 .2 2.8L12 18l-4-3Z" }),
+      /* @__PURE__ */ jsx14("path", { d: "m8 15-2 3 3 1 3-1M4 21h10M14 8l4 3.5" })
+    ] }),
+    name === "edit" && /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsx14("path", { d: "m14.5 5.5 4 4M4.5 19.5l4.5-1 11-11a2.1 2.1 0 0 0 0-3 2.1 2.1 0 0 0-3 0l-11 11-1.5 4Z" }) }),
+    name === "close" && /* @__PURE__ */ jsx14("path", { d: "m6 6 12 12M18 6 6 18" }),
+    name === "copy" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("rect", { x: "8.5", y: "8", width: "10.5", height: "12", rx: "3" }),
+      /* @__PURE__ */ jsx14("path", { d: "M15.5 8V6.8A2.8 2.8 0 0 0 12.7 4H7A3 3 0 0 0 4 7v6a3 3 0 0 0 3 3h1.5" })
+    ] }),
+    (name === "zoom-in" || name === "zoom-out") && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("circle", { cx: "10.5", cy: "10.5", r: "6.5" }),
+      /* @__PURE__ */ jsx14("path", { d: "m15.4 15.4 4.6 4.6M7.5 10.5h6" }),
+      name === "zoom-in" && /* @__PURE__ */ jsx14("path", { d: "M10.5 7.5v6" })
+    ] }),
+    name === "source" && /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsx14("path", { d: "m7 7-4 5 4 5m10-10 4 5-4 5m-4-13-2 16" }) }),
+    name === "image" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("rect", { x: "3.5", y: "4.5", width: "17", height: "15", rx: "3.5" }),
+      /* @__PURE__ */ jsx14("circle", { cx: "15.5", cy: "9", r: "1.5" }),
+      /* @__PURE__ */ jsx14("path", { d: "m4 16 4.4-4.4a1.5 1.5 0 0 1 2.2 0L17 19m-3-3 1.4-1.4a1.5 1.5 0 0 1 2.2 0L20 17" })
+    ] }),
+    ["background", "underline", "dotted", "wavy"].includes(name) && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      name === "background" && /* @__PURE__ */ jsx14("rect", { x: "3", y: "3", width: "18", height: "18", rx: "5", fill: "currentColor", fillOpacity: ".13", stroke: "none" }),
+      /* @__PURE__ */ jsx14("path", { d: "m8 15 3-8a1.05 1.05 0 0 1 2 0l3 8M9.2 12h5.6" }),
+      name === "background" && /* @__PURE__ */ jsx14("path", { d: "M7 19h10", strokeWidth: "2.5" }),
+      name === "underline" && /* @__PURE__ */ jsx14("path", { d: "M5 20h14" }),
+      name === "dotted" && /* @__PURE__ */ jsx14("path", { d: "M5 20h14", strokeDasharray: ".1 3.4", strokeWidth: "2.4" }),
+      name === "wavy" && /* @__PURE__ */ jsx14("path", { d: "M4 20c1.3-2 2.7-2 4 0s2.7 2 4 0 2.7-2 4 0 2.7 2 4 0" })
+    ] }),
+    name === "chevron" && /* @__PURE__ */ jsx14("path", { d: "m8 10 4 4 4-4" }),
+    name === "check" && /* @__PURE__ */ jsx14("path", { d: "m5.5 12 4.2 4.2 8.8-9" }),
+    name === "trash" && /* @__PURE__ */ jsx14(Fragment5, { children: /* @__PURE__ */ jsx14("path", { d: "M4.5 7h15M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M7 7l.7 12a2 2 0 0 0 2 2h4.6a2 2 0 0 0 2-2L17 7M10 11v6M14 11v6" }) }),
+    name === "note" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M14 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9l-6-6Z" }),
+      /* @__PURE__ */ jsx14("path", { d: "M14 3v4a2 2 0 0 0 2 2h4M8 13h8M8 17h5" })
+    ] }),
+    name === "comment" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M8 19 4 21V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H8Z" }),
+      /* @__PURE__ */ jsx14("path", { d: "M8 9h8M8 13h5" })
+    ] }),
+    name === "footnote" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "M5 7h9M5 11h12M5 15h8M5 20h14M18 4h2v5" }),
+      /* @__PURE__ */ jsx14("path", { d: "M17.5 9h4" })
+    ] }),
+    name === "sparkles" && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+      /* @__PURE__ */ jsx14("path", { d: "m10.5 4 1.8 4.8 4.7 1.7-4.7 1.8-1.8 4.7-1.7-4.7L4 10.5l4.8-1.7L10.5 4Z" }),
+      /* @__PURE__ */ jsx14("path", { d: "m19 15 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15ZM19 3v4M17 5h4" })
+    ] })
+  ] }) });
+}
+
+// src/extensions/mermaid.tsx
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var nextId = 0;
+var queue = Promise.resolve();
+var cache2 = new ResourceCache(32);
+async function diagram(id, code, dark, font, signal) {
+  let result = "";
+  const work = queue.then(async () => {
+    if (signal.aborted) throw signal.reason;
+    const { default: mermaid2 } = await import("mermaid");
+    await document.fonts.ready;
+    if (signal.aborted) throw signal.reason;
+    mermaid2.initialize({
+      startOnLoad: false,
+      securityLevel: "strict",
+      suppressErrorRendering: true,
+      fontFamily: font,
+      theme: "base",
+      themeVariables: dark ? { background: "#242321", primaryColor: "#383531", primaryTextColor: "#e2ded7", primaryBorderColor: "#7b746a", lineColor: "#a29a8e", secondaryColor: "#302e2a", tertiaryColor: "#302e2a" } : { background: "#f9f8f6", primaryColor: "#eeebe6", primaryTextColor: "#49443e", primaryBorderColor: "#b5aca0", lineColor: "#91877a", secondaryColor: "#f5f3ef", tertiaryColor: "#f5f3ef" }
+    });
+    const host = document.createElement("div");
+    host.style.cssText = "position:fixed;left:-100000px;top:0;visibility:hidden;pointer-events:none";
+    host.style.fontFamily = font;
+    document.body.append(host);
+    try {
+      result = (await mermaid2.render(id, code, host)).svg;
+    } finally {
+      host.remove();
+    }
+  });
+  queue = work.catch(() => {
+  });
+  await work;
+  return result;
+}
+function MermaidNode({ node, incomplete }) {
+  const locale = useLocale(), theme = useTheme(), runtime = useRuntime();
+  const zh = locale.language?.startsWith("zh");
+  const [id] = useState4(() => `limr-mermaid-${++nextId}`);
+  const [systemDark, setSystemDark] = useState4(false);
+  const [result, setResult] = useState4();
+  const [sourceView, setSourceView] = useState4(false), [scale, setScale] = useState4(1), [attempt, setAttempt] = useState4(0);
+  const ref = useRef11(null), content = useRef11(null);
+  const drag = useRef11(null);
+  const suppressClick = useRef11(false);
+  const code = node.value ?? "";
+  const dark = theme === "dark" || theme === "auto" && systemDark;
+  const key = JSON.stringify([id, code, dark, attempt]);
+  const current = result?.key === key ? result : void 0;
+  useEffect6(() => {
+    if (theme !== "auto") return;
+    const media = matchMedia("(prefers-color-scheme: dark)");
+    const update = () => setSystemDark(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, [theme]);
+  useEffect6(() => {
+    if (incomplete) return;
+    let disposed = false;
+    const font = ref.current ? getComputedStyle(ref.current).fontFamily : "sans-serif";
+    const request = cache2.acquire(`${key}:${font}`, (signal) => diagram(id, code, dark, font, signal));
+    request.promise.then((svg) => {
+      if (!disposed) setResult({ key, svg });
+    }, () => {
+      if (!disposed) setResult({ key, error: true });
+    });
+    return () => {
+      disposed = true;
+      request.release();
+    };
+  }, [key, incomplete]);
+  useStreamEntrance(content, !!current?.svg, current?.svg);
+  const loading2 = incomplete || !current;
+  const source = sourceView || current?.error;
+  useEffect6(() => {
+    const viewport = content.current;
+    if (!viewport || source) return;
+    const wheel = (event) => {
+      if (!event.shiftKey || event.ctrlKey || event.metaKey || !event.deltaY || viewport.scrollWidth <= viewport.clientWidth) return;
+      const unit = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? viewport.clientWidth : 1;
+      viewport.scrollLeft += (event.deltaX || event.deltaY) * unit;
+      event.preventDefault();
+    };
+    viewport.addEventListener("wheel", wheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", wheel);
+  }, [loading2, source]);
+  const select = () => {
+    const canvas = content.current?.firstElementChild;
+    if (!canvas) return;
+    const range = document.createRange();
+    range.selectNodeContents(canvas);
+    const selection = canvas.ownerDocument.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  };
+  const label = sourceView ? zh ? "\u663E\u793A\u56FE\u50CF" : "Show diagram" : zh ? "\u663E\u793A\u6E90\u4EE3\u7801" : "Show source";
+  return /* @__PURE__ */ jsxs10("div", { className: "limr-math-block limr-mermaid-block", ref, "data-mermaid-state": loading2 ? "loading" : current?.error ? "error" : "ready", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "limr-math-display limr-mermaid-display", children: [
+      loading2 && /* @__PURE__ */ jsx15("div", { className: "limr-mermaid-loading", children: /* @__PURE__ */ jsx15(LoadingRing, {}) }),
+      !loading2 && /* @__PURE__ */ jsxs10(Fragment6, { children: [
+        current?.error && /* @__PURE__ */ jsxs10("div", { className: "limr-mermaid-error", "data-limr-ignore": "true", role: "status", children: [
+          zh ? "\u56FE\u8868\u6682\u65F6\u65E0\u6CD5\u7ED8\u5236" : "Unable to render diagram",
+          " ",
+          /* @__PURE__ */ jsx15("button", { type: "button", onClick: () => setAttempt((value) => value + 1), children: locale.retry })
+        ] }),
+        /* @__PURE__ */ jsx15("pre", { className: "limr-mermaid-source", hidden: !source, children: /* @__PURE__ */ jsx15("code", { children: code }) }),
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: "limr-mermaid-viewport",
+            hidden: !!source,
+            ref: content,
+            tabIndex: 0,
+            role: "region",
+            "aria-label": zh ? "\u56FE\u8868\u89C6\u53E3" : "Diagram viewport",
+            "aria-description": zh ? "\u62D6\u52A8\u5E73\u79FB\uFF1B\u65B9\u5411\u952E\u6216\u6EDA\u8F6E\u79FB\u52A8\uFF0CShift \u52A0\u6EDA\u8F6E\u6A2A\u5411\u79FB\u52A8\uFF1B\u5355\u51FB\u6216\u6309 Enter \u6574\u5757\u9009\u62E9\u3002" : "Drag to pan; use arrow keys or the wheel to scroll, Shift+wheel to scroll horizontally; click or press Enter to select the block.",
+            onDragStart: (event) => event.preventDefault(),
+            onPointerDown: (event) => {
+              suppressClick.current = false;
+              if (event.button !== 0 || event.pointerType === "touch") return;
+              const viewport = event.currentTarget;
+              const bounds = viewport.getBoundingClientRect();
+              if (event.clientX >= bounds.left + viewport.clientLeft + viewport.clientWidth || event.clientY >= bounds.top + viewport.clientTop + viewport.clientHeight) return;
+              event.preventDefault();
+              viewport.focus({ preventScroll: true });
+              drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, left: viewport.scrollLeft, top: viewport.scrollTop, moved: false };
+              viewport.setPointerCapture(event.pointerId);
+            },
+            onPointerMove: (event) => {
+              const gesture = drag.current;
+              if (!gesture || gesture.id !== event.pointerId) return;
+              const x = event.clientX - gesture.x, y = event.clientY - gesture.y;
+              if (!gesture.moved && Math.hypot(x, y) <= 4) return;
+              if (!gesture.moved) {
+                gesture.moved = true;
+                runtime.clearSelection();
+                event.currentTarget.dataset.dragging = "true";
+              }
+              event.currentTarget.scrollTo(gesture.left - x, gesture.top - y);
+            },
+            onPointerUp: (event) => {
+              if (drag.current?.id !== event.pointerId) return;
+              suppressClick.current = drag.current.moved;
+              drag.current = null;
+              delete event.currentTarget.dataset.dragging;
+              if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+            },
+            onLostPointerCapture: (event) => {
+              drag.current = null;
+              delete event.currentTarget.dataset.dragging;
+            },
+            onClick: (event) => {
+              if (!event.defaultPrevented && !suppressClick.current && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey) select();
+            },
+            onKeyDown: (event) => {
+              if (event.altKey || event.ctrlKey || event.metaKey) return;
+              const viewport = event.currentTarget;
+              const moves = { ArrowLeft: [-48, 0], ArrowRight: [48, 0], ArrowUp: [0, -48], ArrowDown: [0, 48], PageUp: [0, -viewport.clientHeight * 0.9], PageDown: [0, viewport.clientHeight * 0.9] };
+              if (moves[event.key]) viewport.scrollBy(...moves[event.key]);
+              else if (event.key === "Home") viewport.scrollTo(0, 0);
+              else if (event.key === "End") viewport.scrollTo(viewport.scrollWidth, viewport.scrollHeight);
+              else if (event.key === "Enter") select();
+              else return;
+              event.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx15("div", { className: "limr-mermaid-canvas", style: { width: `${scale * 100}%` }, role: "img", "aria-label": zh ? "Mermaid \u56FE\u8868" : "Mermaid diagram", dangerouslySetInnerHTML: { __html: current?.svg ?? "" } })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "limr-block-tools", "data-limr-ignore": "true", role: "group", "aria-label": zh ? "\u56FE\u8868\u5DE5\u5177" : "Diagram tools", children: [
+      /* @__PURE__ */ jsx15(CopyButton, { value: code, label: zh ? "\u590D\u5236 Mermaid \u6E90\u4EE3\u7801" : "Copy Mermaid source" }),
+      /* @__PURE__ */ jsx15("button", { type: "button", disabled: loading2 || !!source || scale >= 3, title: zh ? "\u653E\u5927" : "Zoom in", "aria-label": zh ? "\u653E\u5927" : "Zoom in", onClick: () => setScale((value) => Math.min(3, +(value + 0.25).toFixed(2))), children: /* @__PURE__ */ jsx15(ToolIcon, { name: "zoom-in" }) }),
+      /* @__PURE__ */ jsx15("button", { type: "button", disabled: loading2 || !!source || scale <= 0.5, title: zh ? "\u7F29\u5C0F" : "Zoom out", "aria-label": zh ? "\u7F29\u5C0F" : "Zoom out", onClick: () => setScale((value) => Math.max(0.5, +(value - 0.25).toFixed(2))), children: /* @__PURE__ */ jsx15(ToolIcon, { name: "zoom-out" }) }),
+      /* @__PURE__ */ jsx15("button", { type: "button", disabled: loading2 || current?.error, title: label, "aria-label": label, "aria-pressed": sourceView, onClick: () => setSourceView((value) => !value), children: /* @__PURE__ */ jsx15(ToolIcon, { name: sourceView ? "image" : "source" }) })
+    ] })
+  ] });
+}
+function mermaid() {
+  return {
+    name: "mermaid",
+    directives: ["mermaid"],
+    literal: true,
+    scope: "local",
+    components: { mermaid: MermaidNode },
+    transform(root, context) {
+      literalDirective(root, context.source, "mermaid");
+      walk(root, (node) => {
+        if (node.type === "code" && String(node.lang).toLowerCase() === "mermaid") node.type = "mermaid";
+        if (node.type === "mermaid") node.selection = "atomic";
+      });
+    }
+  };
+}
+
+// src/extensions/callout.tsx
+import { useState as useState5 } from "react";
+
+// src/extensions/inline-source.ts
+function point(source, offset, base) {
+  const between = source.slice(base.offset, offset), breaks = [...between.matchAll(/\r\n|\r|\n/g)], last = breaks.at(-1);
+  return { offset, line: base.line + breaks.length, column: last ? between.length - last.index - last[0].length + 1 : base.column + between.length };
+}
+function sliceInline(node, from, until, source) {
+  if (!node.position) return;
+  const range = rangeOf(node);
+  if (range.end <= from || range.start >= until) return;
+  if (range.start >= from && range.end <= until) return node;
+  let start = Math.max(range.start, from), end = Math.min(range.end, until);
+  const result = { ...node };
+  if (node.type === "text") {
+    const value = (node.value ?? "").replace(/\r\n?/g, "\n"), mapped = mapText(source, value, range);
+    const first = mapped.ends.findIndex((offset) => offset > start);
+    let last = mapped.starts.findIndex((offset) => offset >= end);
+    if (first < 0) return;
+    if (last < 0) last = mapped.starts.length;
+    if (last <= first) return;
+    result.value = value.slice(first, last);
+    start = mapped.starts[first];
+    end = mapped.ends[last - 1];
+  }
+  if (node.children) result.children = sliceChildren(node.children, start, end, source);
+  result.position = { start: point(source, start, node.position.start), end: point(source, end, node.position.start) };
+  return result;
+}
+function sliceChildren(children, from, until, source) {
+  return children.flatMap((child) => {
+    const value = sliceInline(child, from, until, source);
+    return value ? [value] : [];
+  });
+}
+function textTokens(children, expression, source) {
+  return children.flatMap((node) => {
+    if (node.type !== "text" || !node.value || !node.position) return [];
+    const matches = [...node.value.matchAll(expression)];
+    if (!matches.length) return [];
+    const map = mapText(source, node.value, rangeOf(node));
+    return matches.flatMap((match) => {
+      const start = map.starts[match.index], end = map.ends[match.index + match[0].length - 1];
+      return source.slice(start, end) === match[0] ? [{ start, end }] : [];
+    });
+  });
+}
 
 // src/extensions/define.ts
-function defineBlock({ name, component, tags = [name], directives = [name], selection = "content" }) {
-  return { name, tags, directives, selection, display: "block", scope: "local", components: Object.fromEntries([.../* @__PURE__ */ new Set([...tags, ...directives])].map((tag) => [tag, component])) };
+function defineBlock({ name, component, tags = [name], directives = [name], selection = "content", streaming }) {
+  return { name, tags, directives, selection, streaming, display: "block", scope: "local", components: Object.fromEntries([.../* @__PURE__ */ new Set([...tags, ...directives])].map((tag) => [tag, component])) };
 }
 function defineAnnotation(type) {
   return { name: `annotation:${type.type}`, annotationTypes: [type], scope: "local" };
@@ -2348,43 +2925,293 @@ function defineExtension(extension) {
   return extension;
 }
 
+// src/extensions/callout.tsx
+import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var types = {
+  note: { color: "#6488b5", icon: "edit" },
+  abstract: { color: "#4b9ba0", icon: "note" },
+  info: { color: "#6488b5", icon: "note" },
+  todo: { color: "#6488b5", icon: "check" },
+  tip: { color: "#4b9b8d", icon: "sparkles" },
+  success: { color: "#659664", icon: "check" },
+  question: { color: "#b38b4e", icon: "question" },
+  warning: { color: "#bc8850", icon: "question" },
+  failure: { color: "#be6967", icon: "close" },
+  danger: { color: "#be6967", icon: "close" },
+  bug: { color: "#be6967", icon: "note" },
+  example: { color: "#9580b4", icon: "note" },
+  quote: { color: "#928b80", icon: "comment" }
+};
+var aliases2 = { summary: "abstract", tldr: "abstract", hint: "tip", important: "tip", check: "success", done: "success", help: "question", faq: "question", caution: "warning", attention: "warning", fail: "failure", missing: "failure", error: "danger", cite: "quote" };
+function calloutType(value) {
+  const name = value.toLowerCase();
+  return aliases2[name] ?? (Object.hasOwn(types, name) ? name : "note");
+}
+function Callout({ node, renderChildren, renderAttribute }) {
+  const zh = useLocale().language?.startsWith("zh");
+  const name = String(node.attributes?.type ?? "note").toLowerCase(), type = calloutType(name), style = types[type];
+  const title = node.children?.find((child) => child.type === "calloutTitle");
+  const body = node.children?.filter((child) => child.type !== "calloutTitle") ?? [];
+  const fold = node.attributes?.fold;
+  const [expanded, setExpanded] = useState5(fold !== "-" && fold !== "closed");
+  const content = /* @__PURE__ */ jsx16("div", { className: "limr-block-content", children: renderChildren(body) });
+  const label = /* @__PURE__ */ jsxs11(Fragment7, { children: [
+    /* @__PURE__ */ jsx16(ToolIcon, { name: style.icon, "data-limr-ignore": "true" }),
+    /* @__PURE__ */ jsx16("span", { children: title ? renderChildren(title.children ?? []) : node.attributes?.title ? renderAttribute("title") : /* @__PURE__ */ jsx16("span", { "data-limr-ignore": "true", children: name.charAt(0).toUpperCase() + name.slice(1) }) })
+  ] });
+  return /* @__PURE__ */ jsxs11("aside", { className: "limr-note limr-callout", "data-callout": name, "data-callout-type": type, style: { "--limr-callout-color": style.color }, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "limr-card-label limr-callout-title", children: [
+      label,
+      fold && /* @__PURE__ */ jsx16("button", { type: "button", className: "limr-callout-toggle", "aria-label": expanded ? zh ? "\u6536\u8D77\u63D0\u793A\u5757" : "Collapse callout" : zh ? "\u5C55\u5F00\u63D0\u793A\u5757" : "Expand callout", "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), "data-limr-ignore": "true", children: /* @__PURE__ */ jsx16(ToolIcon, { name: "chevron" }) })
+    ] }),
+    fold ? /* @__PURE__ */ jsx16(Collapse, { open: expanded, keepMounted: true, children: content }) : content
+  ] });
+}
+function callout(options = {}) {
+  return {
+    ...defineBlock({ name: "callout", component: options.component ?? Callout, streaming: options.component ? void 0 : { Loading: BlockLoading } }),
+    transform(root, context) {
+      walk(root, (node) => {
+        if (node.type !== "blockquote") return;
+        const first = node.children?.[0];
+        if (first?.type !== "paragraph" || !first.position) return;
+        const from = first.position.start.offset, end = first.position.end.offset;
+        const raw = context.source.slice(from, end);
+        const header = /^\[!([\w-]+)\]([+-])?[ \t]*/.exec(raw);
+        if (!header) {
+          if (context.streaming && /^\[![\w-]*$/.test(raw)) {
+            node.type = "callout";
+            node.incomplete = true;
+            node.children = [];
+          }
+          return;
+        }
+        node.type = "callout";
+        node.attributes = { type: header[1].toLowerCase(), ...header[2] ? { fold: header[2] } : {} };
+        const newline = /\r\n|\r|\n/.exec(raw), titleEnd = newline ? from + newline.index : end;
+        const bodyStart = newline ? titleEnd + newline[0].length : end;
+        const title = sliceInline(first, from + header[0].length, titleEnd, context.source);
+        const body = sliceInline(first, bodyStart, end, context.source);
+        node.children = [...title?.children?.length ? [{ ...title, type: "calloutTitle" }] : [], ...body?.children?.length ? [body] : [], ...node.children.slice(1)];
+      });
+    }
+  };
+}
+
+// src/extensions/inline-highlights.tsx
+import { Fragment as Fragment8, jsx as jsx17 } from "react/jsx-runtime";
+var Content = ({ children }) => /* @__PURE__ */ jsx17(Fragment8, { children });
+function inlineHighlights(options = {}) {
+  const decorate = (node, range) => {
+    node.type = "embeddedHighlight";
+    node.highlightRange = range;
+    node.annotation = {
+      id: `inline-highlight:${rangeOf(node).start}`,
+      type: "highlight",
+      range,
+      data: { color: options.color ?? "var(--limr-inline-highlight, #6B9BD2)", style: "background", readOnly: true }
+    };
+  };
+  return {
+    name: "inline-highlights",
+    tags: ["highlight"],
+    scope: "local",
+    components: { embeddedHighlight: options.component ?? Content },
+    transform(root, { source, streaming }) {
+      const visit = (node) => {
+        if (!node.children || ["code", "inlineCode", "math", "inlineMath", "html", "footnoteDefinition", "annotationDefinition"].includes(node.type)) return;
+        node.children.forEach(visit);
+        if (node.type === "component" && node.name === "highlight") {
+          const first = node.children[0], last = node.children.at(-1);
+          if (first && last) decorate(node, { start: rangeOf(first).start, end: rangeOf(last).end });
+          return;
+        }
+        const tokens = textTokens(node.children, /(?<!=)==(?!=)/g, source);
+        if (!node.position) return;
+        if (!tokens.length) {
+          const last = node.children.at(-1), end = rangeOf(node).end;
+          if (streaming && end === source.length && last?.type === "text" && source.endsWith("=") && source[end - 2] !== "\\") node.children = sliceChildren(node.children, rangeOf(node).start, end - 1, source);
+          return;
+        }
+        const children = [];
+        let from = rangeOf(node).start;
+        for (let index = 0; index < tokens.length; index += 2) {
+          const open = tokens[index], close = tokens[index + 1];
+          if (!close && (!streaming || rangeOf(node).end < source.trimEnd().length)) break;
+          let end = close?.start ?? rangeOf(node).end;
+          if (!close && source[end - 1] === "=" && source[end - 2] !== "=" && source[end - 2] !== "\\") end--;
+          const body = sliceChildren(node.children, open.end, end, source);
+          if (!body.length && close) continue;
+          children.push(...sliceChildren(node.children, from, open.start, source));
+          const highlight = {
+            type: "embeddedHighlight",
+            inline: true,
+            children: body,
+            incomplete: close ? void 0 : true,
+            position: { start: point(source, open.start, node.position.start), end: point(source, close?.end ?? rangeOf(node).end, node.position.start) }
+          };
+          if (body.length) decorate(highlight, { start: open.end, end });
+          children.push(highlight);
+          from = close?.end ?? rangeOf(node).end;
+        }
+        children.push(...sliceChildren(node.children, from, rangeOf(node).end, source));
+        node.children = children;
+      };
+      visit(root);
+    }
+  };
+}
+
+// src/extensions/footnotes.tsx
+import { useMemo as useMemo3 } from "react";
+import { fromMarkdown as fromMarkdown2 } from "mdast-util-from-markdown";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var idFor = (identifier2) => `footnote:${String(identifier2).trim().replace(/\s+/g, " ").toLowerCase()}`;
+function Icon() {
+  return /* @__PURE__ */ jsx18(ToolIcon, { name: "comment" });
+}
+function Content2({ data }) {
+  return /* @__PURE__ */ jsx18(AnnotationMarkdown, { source: data?.body ?? "" });
+}
+function Card(props) {
+  return /* @__PURE__ */ jsx18(AnnotationCard, { ...props, title: useLocale().footnotes });
+}
+function Preview({ data }) {
+  const summary = useMemo3(() => textContent(fromMarkdown2(data?.body ?? "")).replace(/\s+/g, " ").trim(), [data?.body]);
+  return summary ? /* @__PURE__ */ jsx18("span", { title: summary, children: summary }) : null;
+}
+function footnotes(options = {}) {
+  const type = options.type ?? "footnote";
+  const definition2 = (id, body) => ({ id, type, data: { body } });
+  return {
+    name: "footnotes",
+    tags: ["footnote", "footnote-ref"],
+    scope: "local",
+    annotationTypes: [{
+      type,
+      label: (locale) => locale.footnotes,
+      icon: Icon,
+      color: "#6B9BD2",
+      highlight: "hover",
+      Content: Content2,
+      ...options,
+      sidebar: { Preview, collapseOnContentClick: false, ...options.sidebar },
+      overlay: { Card, expand: false, ...options.overlay }
+    }],
+    transform(root, { source, streaming }) {
+      const visit = (node) => {
+        if (node.type === "footnoteDefinition") {
+          const range = rangeOf(node), raw = source.slice(range.start, range.end);
+          const body = raw.replace(/^\[\^[^\]]+\]:[ \t]*/, "").replace(/(\r\n|\r|\n)(?: {4}|\t)/g, "$1");
+          node.annotation = definition2(idFor(node.identifier), body);
+          return;
+        }
+        if (node.type === "footnoteReference") {
+          node.type = "annotationReference";
+          node.inline = true;
+          node.annotationIds = [idFor(node.identifier)];
+          return;
+        }
+        if (node.type === "component" && ["footnote", "footnote-ref"].includes(node.name ?? "")) {
+          if (node.incomplete) {
+            node.children = [];
+            return;
+          }
+          const id = idFor(node.attributes?.id ?? "");
+          if (node.name === "footnote") {
+            const first = node.children?.[0], last = node.children?.at(-1);
+            node.type = "annotationDefinition";
+            node.annotation = definition2(id, first && last ? source.slice(rangeOf(first).start, rangeOf(last).end) : String(node.attributes?.body ?? ""));
+            return;
+          }
+          node.type = "annotationReference";
+          node.annotationIds = [id];
+          return;
+        }
+        if (!node.children || ["code", "inlineCode", "math", "inlineMath", "html", "annotationDefinition"].includes(node.type)) return;
+        node.children.forEach(visit);
+        const opens = textTokens(node.children, /\^\[/g, source);
+        if (opens.length && node.position) {
+          const children = [], range = rangeOf(node);
+          let from = range.start;
+          for (const open of opens) {
+            if (open.start < from) continue;
+            let depth = 1, at = open.end;
+            const protectedNodes = node.children.filter((child) => child.type !== "text").map(rangeOf);
+            for (; at < range.end && depth; at++) {
+              const protectedNode = protectedNodes.find((child) => child.start <= at && child.end > at);
+              if (protectedNode) {
+                at = protectedNode.end - 1;
+                continue;
+              }
+              if (source[at] === "\\") {
+                at++;
+                continue;
+              }
+              if (source[at] === "[") depth++;
+              else if (source[at] === "]") depth--;
+            }
+            if (depth) {
+              if (streaming && range.end >= source.trimEnd().length) {
+                children.push(...sliceChildren(node.children, from, open.start, source));
+                from = range.end;
+                break;
+              }
+              continue;
+            }
+            const id = `inline-footnote:${open.start}`;
+            children.push(...sliceChildren(node.children, from, open.start, source), {
+              type: "annotationReference",
+              inline: true,
+              annotationIds: [id],
+              annotation: definition2(id, source.slice(open.end, at - 1)),
+              position: { start: point(source, open.start, node.position.start), end: point(source, at, node.position.start) }
+            });
+            from = at;
+          }
+          children.push(...sliceChildren(node.children, from, range.end, source));
+          node.children = children;
+        }
+        node.children.forEach((child, index) => {
+          const previous = node.children[index - 1];
+          if (child.type === "annotationReference" && previous?.type === "embeddedHighlight" && rangeOf(previous).end === rangeOf(child).start) child.referenceRange = previous.highlightRange;
+        });
+      };
+      visit(root);
+    }
+  };
+}
+
+// src/extensions/blocks.tsx
+import { useState as useState8 } from "react";
+
 // src/components/Disclosure.tsx
-import { useEffect as useEffect5, useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 function Disclosure({ title, open, onChange, children }) {
-  const [present, setPresent] = useState4(open);
-  useEffect5(() => {
-    if (open) {
-      setPresent(true);
-      return;
-    }
-    const timer = setTimeout(() => setPresent(false), 420);
-    return () => clearTimeout(timer);
-  }, [open]);
-  return /* @__PURE__ */ jsxs8("details", { className: "limr-disclosure", open: present || open, "data-expanded": open || void 0, children: [
-    /* @__PURE__ */ jsxs8("summary", { "aria-expanded": open, onClick: (event) => {
+  return /* @__PURE__ */ jsxs12("details", { className: "limr-disclosure", open: true, "data-expanded": open || void 0, children: [
+    /* @__PURE__ */ jsxs12("summary", { "aria-expanded": open, onClick: (event) => {
       event.preventDefault();
       onChange(!open);
     }, "data-limr-ignore": "true", children: [
-      /* @__PURE__ */ jsx11("span", { className: "limr-underline", children: title }),
-      /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx11("path", { d: "m6 8 4 4 4-4" }) })
+      /* @__PURE__ */ jsx19("span", { className: "limr-underline", children: title }),
+      /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: "m6 8 4 4 4-4" }) })
     ] }),
-    /* @__PURE__ */ jsx11(Collapse, { open, keepMounted: true, children: /* @__PURE__ */ jsx11("div", { className: "limr-question-detail", children }) })
+    /* @__PURE__ */ jsx19(Collapse, { open, keepMounted: true, children: /* @__PURE__ */ jsx19("div", { className: "limr-question-detail", children }) })
   ] });
 }
 
 // src/components/DiamondCheck.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function DiamondCheck({ checked }) {
-  return /* @__PURE__ */ jsxs9("svg", { className: "limr-choice-diamond", width: "14", height: "14", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", "data-limr-ignore": "true", "data-checked": checked || void 0, children: [
-    /* @__PURE__ */ jsx12("path", { className: "limr-diamond-outline", d: "M9 1.5L16.5 9L9 16.5L1.5 9Z", fill: "none" }),
-    /* @__PURE__ */ jsx12("path", { className: "limr-diamond-fill", d: "M9 5L13 9L9 13L5 9Z", fill: "currentColor" })
+  return /* @__PURE__ */ jsxs13("svg", { className: "limr-choice-diamond", width: "14", height: "14", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", "data-limr-ignore": "true", "data-checked": checked || void 0, children: [
+    /* @__PURE__ */ jsx20("path", { className: "limr-diamond-outline", d: "M9 1.5L16.5 9L9 16.5L1.5 9Z", fill: "none" }),
+    /* @__PURE__ */ jsx20("path", { className: "limr-diamond-fill", d: "M9 5L13 9L9 13L5 9Z", fill: "currentColor" })
   ] });
 }
 
 // src/extensions/video.tsx
-import { useEffect as useEffect6, useRef as useRef9, useState as useState5 } from "react";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef12, useState as useState6 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function resolveVideo(source, provider = "auto") {
   const safe = safeUrl(source);
   if (!safe) return;
@@ -2432,21 +3259,21 @@ function video(options = {}) {
   function Video({ node, source: markdown, renderAttribute }) {
     const runtime = useRuntime();
     const scrollRoot = useStoreSelector(runtime.configuration, (config) => config.scrollRoot);
-    const element = useRef9(null);
-    const [visible, setVisible] = useState5(false);
-    const [playing, setPlaying] = useState5(false);
-    const [failed, setFailed] = useState5(false);
+    const element = useRef12(null);
+    const [visible, setVisible] = useState6(false);
+    const [playing, setPlaying] = useState6(false);
+    const [failed, setFailed] = useState6(false);
     const provider = String(node.attributes?.provider ?? "auto");
     const source = String(node.attributes?.url ?? node.attributes?.src ?? "");
     const requested = node.attributes?.loading ?? options.loading ?? "visible";
     const loading2 = requested === "click" || requested === "eager" ? requested : "visible";
     const resolved = options.resolveUrl?.(provider, source);
     const media = resolved && safeUrl(resolved) ? { url: safeUrl(resolved), native: provider === "native" } : resolveVideo(source, provider);
-    useEffect6(() => {
+    useEffect7(() => {
       setFailed(false);
       setPlaying(false);
     }, [source, provider]);
-    useEffect6(() => {
+    useEffect7(() => {
       if (visible || loading2 !== "visible" || !element.current) return;
       if (typeof IntersectionObserver === "undefined") {
         setVisible(true);
@@ -2464,20 +3291,20 @@ function video(options = {}) {
     const enabled = loading2 === "eager" || loading2 === "visible" && visible || playing;
     const title = String(node.attributes?.title ?? `${provider === "auto" ? "Video" : provider} video`);
     const original = safeUrl(source);
-    return /* @__PURE__ */ jsxs10("div", { ref: element, className: "limr-video", "data-limr-selection-surface": "", "data-loading": loading2, children: [
-      /* @__PURE__ */ jsx13("div", { className: "limr-video-frame", children: !media || failed ? /* @__PURE__ */ jsxs10("div", { className: "limr-video-error", children: [
-        /* @__PURE__ */ jsx13("span", { children: runtime.locale.unavailable }),
-        original && /* @__PURE__ */ jsx13("a", { href: original, target: "_blank", rel: "noopener noreferrer", children: source })
-      ] }) : enabled ? media.native ? /* @__PURE__ */ jsx13("video", { controls: true, playsInline: true, preload: "metadata", src: media.url, "aria-label": title, onError: () => setFailed(true) }) : /* @__PURE__ */ jsx13("iframe", { src: media.url, title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx13("button", { type: "button", className: "limr-video-play", onClick: () => setPlaying(true), "aria-label": runtime.locale.play, children: /* @__PURE__ */ jsx13("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "m8 5 11 7-11 7Z", fill: "currentColor" }) }) }) }),
-      node.attributes?.title && /* @__PURE__ */ jsx13("div", { className: "limr-video-title", children: renderAttribute("title") }),
-      /* @__PURE__ */ jsx13(CopyButton, { className: "limr-video-copy", variant: "glass", value: markdown })
+    return /* @__PURE__ */ jsxs14("div", { ref: element, className: "limr-video", "data-limr-selection-surface": "", "data-loading": loading2, children: [
+      /* @__PURE__ */ jsx21("div", { className: "limr-video-frame", children: !media || failed ? /* @__PURE__ */ jsxs14("div", { className: "limr-video-error", children: [
+        /* @__PURE__ */ jsx21("span", { children: runtime.locale.unavailable }),
+        original && /* @__PURE__ */ jsx21("a", { href: original, target: "_blank", rel: "noopener noreferrer", children: source })
+      ] }) : enabled ? media.native ? /* @__PURE__ */ jsx21("video", { controls: true, playsInline: true, preload: "metadata", src: media.url, "aria-label": title, onError: () => setFailed(true) }) : /* @__PURE__ */ jsx21("iframe", { src: media.url, title, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx21("button", { type: "button", className: "limr-video-play", onClick: () => setPlaying(true), "aria-label": runtime.locale.play, children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "m8 5 11 7-11 7Z", fill: "currentColor" }) }) }) }),
+      node.attributes?.title && /* @__PURE__ */ jsx21("div", { className: "limr-video-title", children: renderAttribute("title") }),
+      /* @__PURE__ */ jsx21(CopyButton, { className: "limr-video-copy", variant: "glass", value: markdown })
     ] });
   }
-  return defineBlock({ name: "video", tags: ["video", "md-video"], component: options.component ?? Video, selection: "atomic" });
+  return defineBlock({ name: "video", streaming: options.component ? void 0 : { Loading: BlockLoading }, tags: ["video", "md-video"], component: options.component ?? Video, selection: "atomic" });
 }
 
 // src/extensions/figures.tsx
-import { createContext, useContext as useContext2, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef10, useState as useState6 } from "react";
+import { createContext, useContext as useContext2, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef13, useState as useState7 } from "react";
 
 // src/extensions/figure-layout.ts
 var defaultFigureLimits = { minWidth: 220, maxWidth: 560, minHeight: 120, maxHeight: 480 };
@@ -2519,7 +3346,7 @@ function figureLimits(attributes = {}, defaults2 = defaultFigureLimits) {
 }
 
 // src/extensions/figures.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var FigureContext = createContext(defaultFigureLimits);
 var captionNode = (node) => node.name === "figcaption" || node.name === "caption";
 var flatten = (nodes) => nodes.flatMap((node) => node.type === "paragraph" && node.children?.some((child) => child.name === "figure" || captionNode(child)) ? node.children : [node]);
@@ -2536,14 +3363,14 @@ function figures(options = {}) {
     const panels = nodes.filter((child) => child.name === "figure");
     const captions = nodes.filter(captionNode);
     const body = nodes.filter((child) => !captionNode(child));
-    const limits = useMemo3(() => figureLimits(node.attributes, defaults2), [node.attributes]);
-    const grid = useRef10(null);
-    const [columns, setColumns] = useState6(1);
+    const limits = useMemo4(() => figureLimits(node.attributes, defaults2), [node.attributes]);
+    const grid = useRef13(null);
+    const [columns, setColumns] = useState7(1);
     const gap = Math.min(100, dimension(node.attributes?.gap, options.gap ?? 16));
     const rows = dimension(node.attributes?.rows, options.rows ?? 0);
     const requested = dimension(node.attributes?.columns ?? node.attributes?.cols, options.columns ?? 0) || (rows > 0 ? Math.ceil(panels.length / rows) : void 0);
     const responsive = String(node.attributes?.responsive ?? options.responsive ?? true) !== "false";
-    useEffect7(() => {
+    useEffect8(() => {
       const element = grid.current;
       if (!element) return;
       const measure = () => {
@@ -2566,22 +3393,22 @@ function figures(options = {}) {
         element.removeEventListener("error", measure, true);
       };
     }, [node, limits, gap, requested, responsive]);
-    return /* @__PURE__ */ jsxs11("figure", { id: identifier(node), className: "limr-figures", "data-limr-selection-order": "visual", "data-columns": columns, "data-responsive": responsive, children: [
-      /* @__PURE__ */ jsx14(CopyButton, { value: source, label: locale.copyFigures, variant: "glass", className: "limr-figures-copy" }),
-      /* @__PURE__ */ jsx14(FigureContext.Provider, { value: limits, children: /* @__PURE__ */ jsx14("div", { ref: grid, className: "limr-figures-grid", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gridTemplateRows: rows ? `repeat(${Math.max(1, Math.min(24, Math.floor(rows)))}, auto auto)` : void 0, gap }, children: renderChildren(body) }) }),
-      captions.length ? renderChildren(captions) : node.attributes?.caption ? /* @__PURE__ */ jsx14("figcaption", { children: renderAttribute("caption") }) : null
+    return /* @__PURE__ */ jsxs15("figure", { id: identifier(node), className: "limr-figures", "data-limr-selection-order": "visual", "data-columns": columns, "data-responsive": responsive, children: [
+      /* @__PURE__ */ jsx22(CopyButton, { value: source, label: locale.copyFigures, variant: "glass", className: "limr-figures-copy" }),
+      /* @__PURE__ */ jsx22(FigureContext.Provider, { value: limits, children: /* @__PURE__ */ jsx22("div", { ref: grid, className: "limr-figures-grid", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gridTemplateRows: rows ? `repeat(${Math.max(1, Math.min(24, Math.floor(rows)))}, auto auto)` : void 0, gap }, children: renderChildren(body) }) }),
+      captions.length ? renderChildren(captions) : node.attributes?.caption ? /* @__PURE__ */ jsx22("figcaption", { children: renderAttribute("caption") }) : null
     ] });
   }
   function Figure({ node, renderChildren, renderAttribute }) {
     const locale = useLocale();
     const inherited = useContext2(FigureContext);
     const limits = figureLimits(node.attributes, inherited === defaultFigureLimits ? defaults2 : inherited);
-    const media = useRef10(null);
-    const [ratio, setRatio] = useState6(ratioOf(node.attributes?.width, node.attributes?.height));
+    const media = useRef13(null);
+    const [ratio, setRatio] = useState7(ratioOf(node.attributes?.width, node.attributes?.height));
     const nodes = flatten(node.children ?? []);
     const captions = nodes.filter(captionNode);
     const body = nodes.filter((child) => !captionNode(child));
-    useEffect7(() => {
+    useEffect8(() => {
       const element = media.current;
       if (!element) return;
       const measure = () => {
@@ -2593,23 +3420,24 @@ function figures(options = {}) {
       return () => element.removeEventListener("load", measure, true);
     }, [node]);
     const maximum = figureWidths({ ratio, limits }).maximum;
-    return /* @__PURE__ */ jsxs11("figure", { id: identifier(node), className: "limr-figure", "data-limr-selection-order": "visual", style: {
+    return /* @__PURE__ */ jsxs15("figure", { id: identifier(node), className: "limr-figure", "data-limr-selection-order": "visual", style: {
       "--limr-figure-width": Number.isFinite(maximum) ? `${maximum}px` : "100%",
       "--limr-figure-min-height": `${Math.min(limits.minHeight, limits.maxHeight)}px`,
       "--limr-figure-max-height": Number.isFinite(limits.maxHeight) ? `${limits.maxHeight}px` : "none"
     }, children: [
-      /* @__PURE__ */ jsx14("div", { ref: media, className: "limr-figure-media", children: renderChildren(body) }),
-      /* @__PURE__ */ jsx14(CopyButton, { onCopy: async () => {
+      /* @__PURE__ */ jsx22("div", { ref: media, className: "limr-figure-media", children: renderChildren(body) }),
+      /* @__PURE__ */ jsx22(CopyButton, { onCopy: async () => {
         const url = media.current?.querySelector("img")?.getAttribute("src");
         if (!url) throw new Error("Image URL unavailable");
         await navigator.clipboard.writeText(url);
       }, label: locale.copyImage, variant: "glass", className: "limr-figure-copy" }),
-      captions.length ? renderChildren(captions) : node.attributes?.caption ? /* @__PURE__ */ jsx14("figcaption", { children: renderAttribute("caption") }) : null
+      captions.length ? renderChildren(captions) : node.attributes?.caption ? /* @__PURE__ */ jsx22("figcaption", { children: renderAttribute("caption") }) : null
     ] });
   }
-  const Caption = ({ children }) => /* @__PURE__ */ jsx14("figcaption", { children });
+  const Caption = ({ children }) => /* @__PURE__ */ jsx22("figcaption", { children });
   return {
     name: "figures",
+    streaming: { Loading: BlockLoading },
     tags: ["figures", "figure", "figcaption", "caption", "img"],
     directives: ["figures", "figure", "figcaption"],
     scope: "local",
@@ -2619,7 +3447,7 @@ function figures(options = {}) {
       figure: Figure,
       figcaption: Caption,
       caption: Caption,
-      img: ({ node }) => /* @__PURE__ */ jsx14("img", { src: safeUrl(node.attributes?.src, true), alt: String(node.attributes?.alt ?? ""), loading: "lazy", decoding: "async" })
+      img: ({ node }) => /* @__PURE__ */ jsx22("img", { src: safeUrl(node.attributes?.src, true), alt: String(node.attributes?.alt ?? ""), loading: "lazy", decoding: "async" })
     },
     transform(root) {
       const visit = (node) => {
@@ -2639,7 +3467,7 @@ function figures(options = {}) {
 }
 
 // src/extensions/blocks.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function parts(node, name) {
   const result = [];
   walk(node, (child) => {
@@ -2647,25 +3475,25 @@ function parts(node, name) {
   });
   return result;
 }
-var PassThrough = ({ children }) => /* @__PURE__ */ jsx15(Fragment5, { children });
+var PassThrough = ({ children }) => /* @__PURE__ */ jsx23(Fragment9, { children });
 function definition(options = {}) {
   function Definition({ node, children, renderChildren, renderAttribute }) {
     const runtime = useRuntime();
     const title = parts(node, "title")[0];
     const content = parts(node, "content")[0];
-    return /* @__PURE__ */ jsxs12("aside", { className: "limr-definition", children: [
-      /* @__PURE__ */ jsx15("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.definition }),
-      (title || node.attributes?.title) && /* @__PURE__ */ jsx15("div", { className: "limr-definition-title", children: title ? renderChildren(title.children ?? []) : renderAttribute("title") }),
-      /* @__PURE__ */ jsx15("div", { className: "limr-block-content", children: content ? renderChildren(content.children ?? []) : children })
+    return /* @__PURE__ */ jsxs16("aside", { className: "limr-definition", children: [
+      /* @__PURE__ */ jsx23("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.definition }),
+      (title || node.attributes?.title) && /* @__PURE__ */ jsx23("div", { className: "limr-definition-title", children: title ? renderChildren(title.children ?? []) : renderAttribute("title") }),
+      /* @__PURE__ */ jsx23("div", { className: "limr-block-content", children: content ? renderChildren(content.children ?? []) : children })
     ] });
   }
-  return { ...defineBlock({ name: "definition", component: options.component ?? Definition }), tags: ["definition", "title", "content"], components: { definition: options.component ?? Definition, title: PassThrough, content: PassThrough } };
+  return { ...defineBlock({ name: "definition", streaming: options.component ? void 0 : { Loading: BlockLoading }, component: options.component ?? Definition }), tags: ["definition", "title", "content"], components: { definition: options.component ?? Definition, title: PassThrough, content: PassThrough } };
 }
 function question(options = {}) {
   function Question({ node, children, renderChildren, renderAttribute }) {
     const runtime = useRuntime();
-    const [showHint, setHint] = useState7(false), [showAnswer, setAnswer] = useState7(false);
-    const [selected, setSelected] = useState7([]), [checked, setChecked] = useState7(false);
+    const [showHint, setHint] = useState8(false), [showAnswer, setAnswer] = useState8(false);
+    const [selected, setSelected] = useState8([]), [checked, setChecked] = useState8(false);
     const content = parts(node, "question-content")[0];
     const hint = parts(node, "question-hint")[0];
     const answer = parts(node, "question-answer")[0];
@@ -2679,22 +3507,22 @@ function question(options = {}) {
     } catch {
     }
     const success = correct.length === selected.length && correct.every((index) => selected.includes(index));
-    return /* @__PURE__ */ jsxs12("section", { className: "limr-question", children: [
-      /* @__PURE__ */ jsx15("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.question }),
-      node.attributes?.title && /* @__PURE__ */ jsx15("div", { className: "limr-question-title", children: renderAttribute("title") }),
-      /* @__PURE__ */ jsx15("div", { className: "limr-block-content", children: content ? renderChildren(content.children ?? []) : !selections.length && !hint && !answer ? children : null }),
-      selections.length > 0 && /* @__PURE__ */ jsxs12("fieldset", { className: "limr-question-options", children: [
-        /* @__PURE__ */ jsx15("legend", { className: "limr-sr-only", children: String(node.attributes?.title ?? runtime.locale.question) }),
-        selections.map((selection, index) => /* @__PURE__ */ jsxs12("label", { "data-selected": selected.includes(index) || void 0, "data-result": checked ? correct.includes(index) ? "correct" : selected.includes(index) ? "incorrect" : void 0 : void 0, children: [
-          /* @__PURE__ */ jsx15("input", { type: multi ? "checkbox" : "radio", name: `${runtime.document.id}-question-${rangeOf(node).start}`, checked: selected.includes(index), disabled: checked, onChange: () => {
+    return /* @__PURE__ */ jsxs16("section", { className: "limr-question", children: [
+      /* @__PURE__ */ jsx23("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.question }),
+      node.attributes?.title && /* @__PURE__ */ jsx23("div", { className: "limr-question-title", children: renderAttribute("title") }),
+      /* @__PURE__ */ jsx23("div", { className: "limr-block-content", children: content ? renderChildren(content.children ?? []) : !selections.length && !hint && !answer ? children : null }),
+      selections.length > 0 && /* @__PURE__ */ jsxs16("fieldset", { className: "limr-question-options", children: [
+        /* @__PURE__ */ jsx23("legend", { className: "limr-sr-only", children: String(node.attributes?.title ?? runtime.locale.question) }),
+        selections.map((selection, index) => /* @__PURE__ */ jsxs16("label", { "data-selected": selected.includes(index) || void 0, "data-result": checked ? correct.includes(index) ? "correct" : selected.includes(index) ? "incorrect" : void 0 : void 0, children: [
+          /* @__PURE__ */ jsx23("input", { type: multi ? "checkbox" : "radio", name: `${runtime.document.id}-question-${rangeOf(node).start}`, checked: selected.includes(index), disabled: checked, onChange: () => {
             setSelected(multi ? selected.includes(index) ? selected.filter((item) => item !== index) : [...selected, index] : [index]);
           } }),
-          /* @__PURE__ */ jsx15(DiamondCheck, { checked: selected.includes(index) || checked && correct.includes(index) }),
-          /* @__PURE__ */ jsx15("span", { className: "limr-choice-text", children: renderChildren(selection.children ?? []) })
+          /* @__PURE__ */ jsx23(DiamondCheck, { checked: selected.includes(index) || checked && correct.includes(index) }),
+          /* @__PURE__ */ jsx23("span", { className: "limr-choice-text", children: renderChildren(selection.children ?? []) })
         ] }, index))
       ] }),
-      selections.length > 0 && correct.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "limr-question-actions", "data-limr-ignore": "true", children: [
-        /* @__PURE__ */ jsx15("button", { type: "button", "data-checked": checked || void 0, disabled: !checked && !selected.length, onClick: () => {
+      selections.length > 0 && correct.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "limr-question-actions", "data-limr-ignore": "true", children: [
+        /* @__PURE__ */ jsx23("button", { type: "button", "data-checked": checked || void 0, disabled: !checked && !selected.length, onClick: () => {
           if (checked) {
             setChecked(false);
             setSelected([]);
@@ -2703,53 +3531,53 @@ function question(options = {}) {
             setChecked(true);
             setAnswer(true);
           }
-        }, children: /* @__PURE__ */ jsx15("span", { className: "limr-button-label", children: checked ? runtime.locale.retry : runtime.locale.submit }, checked ? "retry" : "submit") }),
-        /* @__PURE__ */ jsx15(Collapse, { open: checked, children: /* @__PURE__ */ jsx15("span", { role: "status", className: `limr-question-result ${success ? "limr-success" : "limr-error"}`, children: success ? runtime.locale.correct : runtime.locale.incorrect }) })
+        }, children: /* @__PURE__ */ jsx23("span", { className: "limr-button-label", children: checked ? runtime.locale.retry : runtime.locale.submit }, checked ? "retry" : "submit") }),
+        /* @__PURE__ */ jsx23(Collapse, { open: checked, children: /* @__PURE__ */ jsx23("span", { role: "status", className: `limr-question-result ${success ? "limr-success" : "limr-error"}`, children: success ? runtime.locale.correct : runtime.locale.incorrect }) })
       ] }),
-      hint && /* @__PURE__ */ jsx15(Disclosure, { title: runtime.locale.hint, open: showHint, onChange: setHint, children: renderChildren(hint.children ?? []) }),
-      answer && /* @__PURE__ */ jsx15(Disclosure, { title: runtime.locale.answer, open: showAnswer, onChange: setAnswer, children: renderChildren(answer.children ?? []) })
+      hint && /* @__PURE__ */ jsx23(Disclosure, { title: runtime.locale.hint, open: showHint, onChange: setHint, children: renderChildren(hint.children ?? []) }),
+      answer && /* @__PURE__ */ jsx23(Disclosure, { title: runtime.locale.answer, open: showAnswer, onChange: setAnswer, children: renderChildren(answer.children ?? []) })
     ] });
   }
   const names2 = ["question-content", "question-hint", "question-answer", "question-sel-grp", "question-sel"];
-  return { ...defineBlock({ name: "question", component: options.component ?? Question }), tags: ["question", ...names2], components: { question: options.component ?? Question, ...Object.fromEntries(names2.map((name) => [name, PassThrough])) } };
+  return { ...defineBlock({ name: "question", streaming: options.component ? void 0 : { Loading: BlockLoading }, component: options.component ?? Question }), tags: ["question", ...names2], components: { question: options.component ?? Question, ...Object.fromEntries(names2.map((name) => [name, PassThrough])) } };
 }
 function extras(options = {}) {
-  const Extra = ({ node, children, renderAttribute }) => /* @__PURE__ */ jsxs12("div", { className: "limr-extra", children: [
-    /* @__PURE__ */ jsxs12("a", { className: "limr-extra-link", href: safeUrl(node.attributes?.url), target: "_blank", rel: "noreferrer", children: [
-      /* @__PURE__ */ jsx15("span", { className: "limr-underline", children: renderAttribute(node.attributes?.title ? "title" : "url") }),
-      node.attributes?.desc && /* @__PURE__ */ jsx15("p", { children: /* @__PURE__ */ jsx15("span", { className: "limr-underline", children: renderAttribute("desc") }) })
+  const Extra = ({ node, children, renderAttribute }) => /* @__PURE__ */ jsxs16("div", { className: "limr-extra", children: [
+    /* @__PURE__ */ jsxs16("a", { className: "limr-extra-link", href: safeUrl(node.attributes?.url), target: "_blank", rel: "noreferrer", children: [
+      /* @__PURE__ */ jsx23("span", { className: "limr-underline", children: renderAttribute(node.attributes?.title ? "title" : "url") }),
+      node.attributes?.desc && /* @__PURE__ */ jsx23("p", { children: /* @__PURE__ */ jsx23("span", { className: "limr-underline", children: renderAttribute("desc") }) })
     ] }),
     children
   ] });
   const Extras = ({ children }) => {
     const runtime = useRuntime();
-    return /* @__PURE__ */ jsxs12("aside", { className: "limr-extras", children: [
-      /* @__PURE__ */ jsx15("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.extra }),
+    return /* @__PURE__ */ jsxs16("aside", { className: "limr-extras", children: [
+      /* @__PURE__ */ jsx23("div", { className: "limr-card-label", "data-limr-ignore": "true", children: runtime.locale.extra }),
       children
     ] });
   };
-  return { ...defineBlock({ name: "extras", component: options.component ?? Extras }), tags: ["extras", "extra"], components: { extras: options.component ?? Extras, extra: Extra } };
+  return { ...defineBlock({ name: "extras", streaming: options.component ? void 0 : { Loading: BlockLoading }, component: options.component ?? Extras }), tags: ["extras", "extra"], components: { extras: options.component ?? Extras, extra: Extra } };
 }
 
 // src/extensions/standard.ts
 function standard() {
-  return [gfm(), math(), codeHighlight(), definition(), question(), extras(), video(), figures(), citation(), translations()];
+  return [gfm(), math(), codeHighlight(), mermaid(), callout(), definition(), question(), extras(), video(), figures(), citation(), translations(), inlineHighlights(), footnotes()];
 }
 
 // src/react/context.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var defaults;
 var RuntimeContext = createContext2(null);
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect8;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect9;
 function DocumentProvider({ children, source = "", streaming = false, documentId, ...options }) {
   const generatedId = useId();
-  const extensions = useMemo4(() => {
+  const extensions = useMemo5(() => {
     const base = options.extensions ?? (defaults ??= standard());
     return options.plugins?.length ? [...base, ...options.plugins] : base;
   }, [options.extensions, options.plugins]);
   const config = { ...options, extensions };
-  const [runtime] = useState8(() => new ReaderRuntime(documentId ?? `limr-${generatedId.replace(/[^a-z\d_-]/gi, "")}`, source, streaming, config));
-  const previous = useRef11({ source, streaming, config });
+  const [runtime] = useState9(() => new ReaderRuntime(documentId ?? `limr-${generatedId.replace(/[^a-z\d_-]/gi, "")}`, source, streaming, config));
+  const previous = useRef14({ source, streaming, config });
   useIsomorphicLayoutEffect(() => {
     const old = previous.current;
     const changed = Object.keys({ ...old.config, ...config }).some((key) => old.config[key] !== config[key]);
@@ -2757,11 +3585,11 @@ function DocumentProvider({ children, source = "", streaming = false, documentId
     if (old.source !== source || old.streaming !== streaming) runtime.document.update(source, { streaming });
     previous.current = { source, streaming, config };
   });
-  useEffect8(() => {
+  useEffect9(() => {
     runtime.start();
     return () => runtime.dispose();
   }, [runtime]);
-  return /* @__PURE__ */ jsx16(RuntimeContext.Provider, { value: runtime, children });
+  return /* @__PURE__ */ jsx24(RuntimeContext.Provider, { value: runtime, children });
 }
 function useRuntime() {
   const runtime = useContext3(RuntimeContext);
@@ -2780,14 +3608,14 @@ function useRendererParameter(name) {
   });
 }
 function useStoreSelector(store, select) {
-  const selectRef = useRef11(select);
+  const selectRef = useRef14(select);
   selectRef.current = select;
-  const cache2 = useRef11(void 0);
-  const get = useCallback2(() => {
+  const cache3 = useRef14(void 0);
+  const get = useCallback3(() => {
     const state = store.get();
-    if (cache2.current && cache2.current.state === state && cache2.current.select === selectRef.current) return cache2.current.value;
+    if (cache3.current && cache3.current.state === state && cache3.current.select === selectRef.current) return cache3.current.value;
     const value = selectRef.current(state);
-    cache2.current = { state, select: selectRef.current, value };
+    cache3.current = { state, select: selectRef.current, value };
     return value;
   }, [store]);
   return useSyncExternalStore(store.subscribe, get, get);
@@ -2798,7 +3626,7 @@ function useDocument() {
 }
 function useDocumentSelector(select) {
   const runtime = useRuntime();
-  const store = useMemo4(() => ({ subscribe: runtime.document.subscribe, get: runtime.document.getSnapshot }), [runtime]);
+  const store = useMemo5(() => ({ subscribe: runtime.document.subscribe, get: runtime.document.getSnapshot }), [runtime]);
   return useStoreSelector(store, select);
 }
 function useSelection() {
@@ -2820,7 +3648,7 @@ function useAnnotation(id) {
 }
 function useAnnotations() {
   const state = useStoreSelector(useRuntime().decorations, (state2) => state2);
-  return useMemo4(() => ({ annotations: state.annotations, occurrences: state.occurrences }), [state.annotations, state.occurrences]);
+  return useMemo5(() => ({ annotations: state.annotations, occurrences: state.occurrences }), [state.annotations, state.occurrences]);
 }
 function useAnnotationState() {
   const runtime = useRuntime();
@@ -2837,7 +3665,7 @@ function useAnchor(id) {
 }
 function useLiMR() {
   const runtime = useRuntime();
-  return useMemo4(() => ({
+  return useMemo5(() => ({
     ...runtime.commands,
     document: runtime.document,
     get signal() {
@@ -2851,14 +3679,14 @@ function useLiMR() {
 }
 
 // src/components/CopyButton.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
 function CopyButton({ value = "", onCopy, label, variant = "plain", className = "" }) {
   const locale = useLocale();
-  const [status, setStatus] = useState9("idle");
-  const timer = useRef12(void 0);
-  const mounted = useRef12(true);
+  const [status, setStatus] = useState10("idle");
+  const timer = useRef15(void 0);
+  const mounted = useRef15(true);
   const title = status === "copied" ? locale.copied : status === "error" ? locale.copyFailed : label ?? locale.copy;
-  useEffect9(() => {
+  useEffect10(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -2878,7 +3706,7 @@ function CopyButton({ value = "", onCopy, label, variant = "plain", className =
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setStatus("idle"), 2200);
   };
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs17(
     "button",
     {
       type: "button",
@@ -2890,21 +3718,21 @@ function CopyButton({ value = "", onCopy, label, variant = "plain", className =
       title,
       onClick: copy,
       children: [
-        /* @__PURE__ */ jsxs13("svg", { className: "limr-copy-glyph", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxs13("g", { className: "limr-copy-sheets", children: [
-            /* @__PURE__ */ jsx17("rect", { x: "8.5", y: "8", width: "10.5", height: "12", rx: "3" }),
-            /* @__PURE__ */ jsx17("path", { d: "M15.5 8V6.8A2.8 2.8 0 0 0 12.7 4H7A3 3 0 0 0 4 7v6a3 3 0 0 0 3 3h1.5" })
+        /* @__PURE__ */ jsxs17("svg", { className: "limr-copy-glyph", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs17("g", { className: "limr-copy-sheets", children: [
+            /* @__PURE__ */ jsx25("rect", { x: "8.5", y: "8", width: "10.5", height: "12", rx: "3" }),
+            /* @__PURE__ */ jsx25("path", { d: "M15.5 8V6.8A2.8 2.8 0 0 0 12.7 4H7A3 3 0 0 0 4 7v6a3 3 0 0 0 3 3h1.5" })
           ] }),
-          /* @__PURE__ */ jsx17("path", { className: "limr-copy-check", d: "m5.5 12 4.2 4.2 8.8-9", pathLength: "1" })
+          /* @__PURE__ */ jsx25("path", { className: "limr-copy-check", d: "m5.5 12 4.2 4.2 8.8-9", pathLength: "1" })
         ] }),
-        /* @__PURE__ */ jsx17("span", { className: status === "error" ? "limr-copy-error" : "limr-sr-only", role: "status", children: status === "copied" ? locale.copied : status === "error" ? locale.copyFailed : "" })
+        /* @__PURE__ */ jsx25("span", { className: status === "error" ? "limr-copy-error" : "limr-sr-only", role: "status", children: status === "copied" ? locale.copied : status === "error" ? locale.copyFailed : "" })
       ]
     }
   );
 }
 
 // src/extensions/math.tsx
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var loaded;
 var loading;
 var load = () => loading ??= import("./math-renderer-L6DOH4RX.js").then((module) => {
@@ -2918,74 +3746,21 @@ async function preloadMath() {
 function math(options = {}) {
   function MathNode({ node }) {
     const display = node.type === "math";
-    const fallback = /* @__PURE__ */ jsx18("code", { className: "limr-math-source", children: node.value });
+    const fallback = /* @__PURE__ */ jsx26("code", { className: "limr-math-source", children: node.value });
     const Renderer = loaded ?? MathContent;
-    const content = /* @__PURE__ */ jsx18(Suspense, { fallback, children: /* @__PURE__ */ jsx18(Renderer, { value: node.value ?? "", display, options }) });
-    return display ? /* @__PURE__ */ jsxs14("div", { className: "limr-math-block", children: [
+    const content = /* @__PURE__ */ jsx26(Suspense, { fallback, children: /* @__PURE__ */ jsx26(Renderer, { value: node.value ?? "", display, options }) });
+    return display ? /* @__PURE__ */ jsxs18("div", { className: "limr-math-block", children: [
       content,
-      /* @__PURE__ */ jsx18(CopyButton, { className: "limr-math-copy", variant: "glass", label: "Copy LaTeX", value: `$$
+      /* @__PURE__ */ jsx26(CopyButton, { className: "limr-math-copy", variant: "glass", label: "Copy LaTeX", value: `$$
 ${node.value ?? ""}
 $$` })
     ] }) : content;
   }
-  return { name: "math", micromark: [syntax2()], mdast: [mathFromMarkdown()], scope: "local", components: { math: MathNode, inlineMath: MathNode } };
-}
-
-// src/components/ToolIcon.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-function ToolIcon({ name, ...props }) {
-  return /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsxs15("g", { transform: name === "highlight" ? "translate(0 -1.25)" : name === "comment" ? "translate(0 -.5)" : void 0, children: [
-    (name === "eye" || name === "eye-off") && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "M3 12s3.3-6 9-6 9 6 9 6-3.3 6-9 6-9-6-9-6Z" }),
-      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "2.7" }),
-      name === "eye-off" && /* @__PURE__ */ jsx19("path", { d: "m4 4 16 16" })
-    ] }),
-    name === "question" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "8.5" }),
-      /* @__PURE__ */ jsx19("path", { d: "M9.4 9a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2-2.6 3.7M12 17h.01" })
-    ] }),
-    name === "highlight" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "m8 15 7.6-9a2 2 0 0 1 2.8-.2l.8.7a2 2 0 0 1 .2 2.8L12 18l-4-3Z" }),
-      /* @__PURE__ */ jsx19("path", { d: "m8 15-2 3 3 1 3-1M4 21h10M14 8l4 3.5" })
-    ] }),
-    name === "edit" && /* @__PURE__ */ jsx19(Fragment6, { children: /* @__PURE__ */ jsx19("path", { d: "m14.5 5.5 4 4M4.5 19.5l4.5-1 11-11a2.1 2.1 0 0 0 0-3 2.1 2.1 0 0 0-3 0l-11 11-1.5 4Z" }) }),
-    name === "close" && /* @__PURE__ */ jsx19("path", { d: "m6 6 12 12M18 6 6 18" }),
-    name === "copy" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("rect", { x: "8.5", y: "8", width: "10.5", height: "12", rx: "3" }),
-      /* @__PURE__ */ jsx19("path", { d: "M15.5 8V6.8A2.8 2.8 0 0 0 12.7 4H7A3 3 0 0 0 4 7v6a3 3 0 0 0 3 3h1.5" })
-    ] }),
-    ["background", "underline", "dotted", "wavy"].includes(name) && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      name === "background" && /* @__PURE__ */ jsx19("rect", { x: "3", y: "3", width: "18", height: "18", rx: "5", fill: "currentColor", fillOpacity: ".13", stroke: "none" }),
-      /* @__PURE__ */ jsx19("path", { d: "m8 15 3-8a1.05 1.05 0 0 1 2 0l3 8M9.2 12h5.6" }),
-      name === "background" && /* @__PURE__ */ jsx19("path", { d: "M7 19h10", strokeWidth: "2.5" }),
-      name === "underline" && /* @__PURE__ */ jsx19("path", { d: "M5 20h14" }),
-      name === "dotted" && /* @__PURE__ */ jsx19("path", { d: "M5 20h14", strokeDasharray: ".1 3.4", strokeWidth: "2.4" }),
-      name === "wavy" && /* @__PURE__ */ jsx19("path", { d: "M4 20c1.3-2 2.7-2 4 0s2.7 2 4 0 2.7-2 4 0 2.7 2 4 0" })
-    ] }),
-    name === "chevron" && /* @__PURE__ */ jsx19("path", { d: "m8 10 4 4 4-4" }),
-    name === "check" && /* @__PURE__ */ jsx19("path", { d: "m5.5 12 4.2 4.2 8.8-9" }),
-    name === "trash" && /* @__PURE__ */ jsx19(Fragment6, { children: /* @__PURE__ */ jsx19("path", { d: "M4.5 7h15M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M7 7l.7 12a2 2 0 0 0 2 2h4.6a2 2 0 0 0 2-2L17 7M10 11v6M14 11v6" }) }),
-    name === "note" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "M14 3H7a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9l-6-6Z" }),
-      /* @__PURE__ */ jsx19("path", { d: "M14 3v4a2 2 0 0 0 2 2h4M8 13h8M8 17h5" })
-    ] }),
-    name === "comment" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "M8 19 4 21V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H8Z" }),
-      /* @__PURE__ */ jsx19("path", { d: "M8 9h8M8 13h5" })
-    ] }),
-    name === "footnote" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "M5 7h9M5 11h12M5 15h8M5 20h14M18 4h2v5" }),
-      /* @__PURE__ */ jsx19("path", { d: "M17.5 9h4" })
-    ] }),
-    name === "sparkles" && /* @__PURE__ */ jsxs15(Fragment6, { children: [
-      /* @__PURE__ */ jsx19("path", { d: "m10.5 4 1.8 4.8 4.7 1.7-4.7 1.8-1.8 4.7-1.7-4.7L4 10.5l4.8-1.7L10.5 4Z" }),
-      /* @__PURE__ */ jsx19("path", { d: "m19 15 .8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15ZM19 3v4M17 5h4" })
-    ] })
-  ] }) });
+  return { name: "math", directives: ["math"], literal: true, micromark: [syntax2()], mdast: [mathFromMarkdown()], scope: "local", components: { math: MathNode, inlineMath: MathNode }, transform: (root, context) => literalDirective(root, context.source, "math") };
 }
 
 // src/extensions/selection-actions.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 var highlightColors = [
   { color: "#E57373", label: "Rose", labelZh: "\u73AB\u7470" },
   { color: "#F2C744", label: "Gold", labelZh: "\u6696\u9EC4" },
@@ -2999,9 +3774,9 @@ function copyText(options = {}) {
   return {
     id: `copy-${options.format ?? "text"}`,
     label: options.label ?? ((context) => context.locale.copy),
-    icon: /* @__PURE__ */ jsx20(ToolIcon, { name: "copy" }),
+    icon: /* @__PURE__ */ jsx27(ToolIcon, { name: "copy" }),
     successLabel: (context) => context.locale.copied,
-    successIcon: /* @__PURE__ */ jsx20(ToolIcon, { name: "check" }),
+    successIcon: /* @__PURE__ */ jsx27(ToolIcon, { name: "check" }),
     run: async ({ selection }) => {
       const format = options.format ?? "text";
       await navigator.clipboard.writeText(format === "text" ? selection.text : selection[format].sourceText);
@@ -3023,17 +3798,17 @@ function HighlightSettings({ context, options }) {
     context.setHighlightAppearance(appearance);
     if (highlight) void context.run((current) => current.updateAnnotation(highlight.id, { data: appearance }));
   };
-  return /* @__PURE__ */ jsxs16("div", { className: "limr-highlight-settings", children: [
-    /* @__PURE__ */ jsxs16("fieldset", { disabled: context.busy, children: [
-      /* @__PURE__ */ jsx20("legend", { children: locale.highlightStyle }),
-      /* @__PURE__ */ jsx20("div", { className: "limr-highlight-styles", children: styles.map(([value, label]) => /* @__PURE__ */ jsxs16("button", { type: "button", "aria-pressed": style === value, onClick: () => change(color, value), children: [
-        /* @__PURE__ */ jsx20(ToolIcon, { name: value }),
-        /* @__PURE__ */ jsx20("span", { className: "limr-highlight-style-label", children: /* @__PURE__ */ jsx20("span", { className: "limr-underline", children: label }) })
+  return /* @__PURE__ */ jsxs19("div", { className: "limr-highlight-settings", children: [
+    /* @__PURE__ */ jsxs19("fieldset", { disabled: context.busy, children: [
+      /* @__PURE__ */ jsx27("legend", { children: locale.highlightStyle }),
+      /* @__PURE__ */ jsx27("div", { className: "limr-highlight-styles", children: styles.map(([value, label]) => /* @__PURE__ */ jsxs19("button", { type: "button", "aria-pressed": style === value, onClick: () => change(color, value), children: [
+        /* @__PURE__ */ jsx27(ToolIcon, { name: value }),
+        /* @__PURE__ */ jsx27("span", { className: "limr-highlight-style-label", children: /* @__PURE__ */ jsx27("span", { className: "limr-underline", children: label }) })
       ] }, value)) })
     ] }),
-    /* @__PURE__ */ jsxs16("fieldset", { disabled: context.busy, children: [
-      /* @__PURE__ */ jsx20("legend", { children: locale.highlightColor }),
-      /* @__PURE__ */ jsx20("div", { className: "limr-highlight-colors", children: (options.colors ?? highlightColors).map((item) => /* @__PURE__ */ jsx20("button", { type: "button", className: "limr-color-swatch", "aria-label": locale.highlight === "\u9AD8\u4EAE" ? item.labelZh ?? item.label : item.label, title: locale.highlight === "\u9AD8\u4EAE" ? item.labelZh ?? item.label : item.label, "aria-pressed": color.toLowerCase() === item.color.toLowerCase(), style: { "--swatch": item.color }, onClick: () => change(item.color, style), children: /* @__PURE__ */ jsx20(ToolIcon, { name: "check" }) }, item.color)) })
+    /* @__PURE__ */ jsxs19("fieldset", { disabled: context.busy, children: [
+      /* @__PURE__ */ jsx27("legend", { children: locale.highlightColor }),
+      /* @__PURE__ */ jsx27("div", { className: "limr-highlight-colors", children: (options.colors ?? highlightColors).map((item) => /* @__PURE__ */ jsx27("button", { type: "button", className: "limr-color-swatch", "aria-label": locale.highlight === "\u9AD8\u4EAE" ? item.labelZh ?? item.label : item.label, title: locale.highlight === "\u9AD8\u4EAE" ? item.labelZh ?? item.label : item.label, "aria-pressed": color.toLowerCase() === item.color.toLowerCase(), style: { "--swatch": item.color }, onClick: () => change(item.color, style), children: /* @__PURE__ */ jsx27(ToolIcon, { name: "check" }) }, item.color)) })
     ] })
   ] });
 }
@@ -3041,17 +3816,17 @@ function highlightPalette(options = {}) {
   return {
     id: "highlight-palette",
     label: (context) => context.locale.editHighlight,
-    icon: /* @__PURE__ */ jsx20(ToolIcon, { name: "background" }),
+    icon: /* @__PURE__ */ jsx27(ToolIcon, { name: "background" }),
     placement: "start",
-    render: (context) => /* @__PURE__ */ jsx20("button", { type: "button", className: "limr-toolbar-swatch", "aria-label": context.locale.editHighlight, "aria-expanded": context.expanded, disabled: context.busy, onClick: () => context.expanded ? context.collapse() : context.expand(), style: { "--swatch": context.highlightAppearance.color ?? defaultHighlight.color } }),
-    renderExpanded: (context) => /* @__PURE__ */ jsx20(HighlightSettings, { context, options })
+    render: (context) => /* @__PURE__ */ jsx27("button", { type: "button", className: "limr-toolbar-swatch", "aria-label": context.locale.editHighlight, "aria-expanded": context.expanded, disabled: context.busy, onClick: () => context.expanded ? context.collapse() : context.expand(), style: { "--swatch": context.highlightAppearance.color ?? defaultHighlight.color } }),
+    renderExpanded: (context) => /* @__PURE__ */ jsx27(HighlightSettings, { context, options })
   };
 }
 function highlightSelection() {
   return {
     id: "highlight",
     label: (context) => !context.highlight ? context.locale.addHighlight : context.highlight.data?.hidden ? context.locale.showHighlight : context.locale.hideHighlight,
-    icon: (context) => /* @__PURE__ */ jsx20(ToolIcon, { name: !context.highlight ? "highlight" : context.highlight.data?.hidden ? "eye" : "eye-off" }),
+    icon: (context) => /* @__PURE__ */ jsx27(ToolIcon, { name: !context.highlight ? "highlight" : context.highlight.data?.hidden ? "eye" : "eye-off" }),
     visible: (context) => !context.highlight || context.annotations.some((annotation) => annotation.type !== "highlight"),
     run: (context) => {
       if (context.highlight) context.updateAnnotation(context.highlight.id, { data: { ...context.highlight.data, hidden: !context.highlight.data?.hidden } });
@@ -3066,7 +3841,7 @@ function deleteAnnotations() {
   return {
     id: "delete-annotations",
     label: (context) => context.locale.deleteAnnotations,
-    icon: /* @__PURE__ */ jsx20(ToolIcon, { name: "trash" }),
+    icon: /* @__PURE__ */ jsx27(ToolIcon, { name: "trash" }),
     placement: "end",
     tone: "danger",
     visible: (context) => context.annotations.length > 0,
@@ -3086,7 +3861,6 @@ export {
   preloadMath,
   math,
   codeHighlight,
-  sourceRangeStartRect,
   Markdown,
   OverlayScrollArea,
   AnnotationCard,
@@ -3095,9 +3869,15 @@ export {
   InlineMarker,
   Collapse,
   translations,
+  ToolIcon,
+  mermaid,
   defineBlock,
   defineAnnotation,
   defineExtension,
+  calloutType,
+  callout,
+  inlineHighlights,
+  footnotes,
   video,
   figures,
   definition,
@@ -3120,11 +3900,10 @@ export {
   useAnnotationState,
   useAnchor,
   useLiMR,
-  ToolIcon,
   highlightColors,
   copyText,
   highlightPalette,
   highlightSelection,
   deleteAnnotations
 };
-//# sourceMappingURL=chunk-3ILUZKDB.js.map
+//# sourceMappingURL=chunk-SUAAUGAX.js.map