@linloir/limr 0.1.0 → 1.0.1

package/dist/{chunk-ETHLPBKQ.js → chunk-GU2RPESF.js}

@@ -9,7 +9,6 @@ import {
   highlightPalette,
   highlightSelection,
   scrollWithMotion,
-  sourceRangeStartRect,
   useAppearance,
   useDocument,
   useDocumentSelector,
@@ -19,20 +18,26 @@ import {
   useSelection,
   useStoreSelector,
   useTheme
-} from "./chunk-65V5OZ4G.js";
+} from "./chunk-SUAAUGAX.js";
 import {
+  annotationReferenceRange,
   defaultHighlight,
-  intersects,
   mapText,
-  rangeOf,
   resolveAnnotationAnchors,
   sameRange,
-  selectionFromRange,
-  textContent
-} from "./chunk-7JF5HHVF.js";
+  selectionFromRange
+} from "./chunk-BG5QUQFR.js";
+import {
+  atomicSelectionText,
+  sourceRangeStartRect
+} from "./chunk-BVHHOVMT.js";
+import {
+  intersects,
+  rangeOf
+} from "./chunk-FJZCQY2S.js";
 
 // src/components/Reader.tsx
-import { useEffect as useEffect7, useId as useId2, useRef as useRef5, useState as useState5 } from "react";
+import { useEffect as useEffect7, useId as useId2, useRef as useRef6, useState as useState6 } from "react";
 
 // src/components/TableOfContents.tsx
 import { useEffect as useEffect2, useRef } from "react";
@@ -43,7 +48,8 @@ function useOverflowFade(ref, runtime, contentSelector, beforeMeasure) {
   useEffect(() => {
     const host = ref.current;
     if (!host) return;
-    let frame = 0, transitions = 0;
+    let frame = 0;
+    const transitions = /* @__PURE__ */ new Map();
     const measure = () => {
       frame = 0;
       beforeMeasure?.();
@@ -68,8 +74,12 @@ function useOverflowFade(ref, runtime, contentSelector, beforeMeasure) {
       };
       set("--limr-fade-start", top - box.top);
       set("--limr-fade-end", bottom - box.top);
-      if (transitions && host.getAnimations({ subtree: true }).some((animation) => animation.playState === "running")) schedule();
-      else transitions = 0;
+      const now = performance.now();
+      for (const [target, properties] of transitions) {
+        for (const [property, end2] of properties) if (end2 <= now || !host.contains(target)) properties.delete(property);
+        if (!properties.size) transitions.delete(target);
+      }
+      if (transitions.size) schedule();
     };
     const schedule = () => {
       if (!frame) frame = requestAnimationFrame(measure);
@@ -78,12 +88,23 @@ function useOverflowFade(ref, runtime, contentSelector, beforeMeasure) {
       cancelAnimationFrame(frame);
       measure();
     };
-    const start = () => {
-      transitions++;
+    const start = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element) || !/^(top|bottom|left|right|height|max-height|min-height|width|max-width|transform|translate|grid-template-rows|padding.*|margin.*)$/.test(event.propertyName)) return;
+      const css = getComputedStyle(target), properties = css.transitionProperty.split(",").map((value) => value.trim());
+      const index = Math.max(0, properties.indexOf(event.propertyName));
+      const milliseconds = (value) => {
+        const list = value.split(",");
+        const item = list[index % list.length].trim();
+        return parseFloat(item) * (item.endsWith("ms") ? 1 : 1e3);
+      };
+      const pending = transitions.get(target) ?? /* @__PURE__ */ new Map();
+      pending.set(event.propertyName, performance.now() + milliseconds(css.transitionDuration) + milliseconds(css.transitionDelay) + 34);
+      transitions.set(target, pending);
       schedule();
     };
-    const end = () => {
-      transitions = Math.max(0, transitions - 1);
+    const end = (event) => {
+      if (event.target instanceof Element) transitions.get(event.target)?.delete(event.propertyName);
       schedule();
     };
     host.addEventListener("transitionrun", start);
@@ -95,7 +116,10 @@ function useOverflowFade(ref, runtime, contentSelector, beforeMeasure) {
       if (records.some((record) => {
         const element = record.target instanceof Element ? record.target : record.target.parentElement;
         return element && element !== host && !element.closest(".limr-highlight-layer,.limr-paint-layer");
-      })) refresh();
+      })) {
+        if (beforeMeasure) refresh();
+        else schedule();
+      }
     });
     mutation.observe(host, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["style", "class"] });
     const unsubscribe = [runtime.layout.subscribe(schedule), runtime.viewport.subscribe(refresh), runtime.documentOffset.subscribe(schedule), runtime.configuration.subscribe(schedule)];
@@ -187,7 +211,7 @@ function TableOfContents({ title, maxDepth = 6, followActive = true, topInset =
 }
 
 // src/components/AnnotationSidebar.tsx
-import { useCallback, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
+import { memo, useCallback, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";
 
 // src/components/AnnotationContent.tsx
@@ -236,39 +260,29 @@ function AnnotationGroup({ occurrence, presentation, expanded = true, enabled =
 
 // src/components/annotation-reference.ts
 function annotationReferenceText(document2, occurrence) {
-  const blocks = document2.blocks.filter((block) => intersects(block.range, occurrence.range));
+  const referenceRange = annotationReferenceRange(document2, occurrence);
+  const blocks = document2.blocks.filter((block) => intersects(block.range, referenceRange));
   let reference = "";
-  if (occurrence.embedded) {
-    let context;
-    const visit = (node) => {
-      if (!intersects(rangeOf(node), occurrence.range)) return;
-      if (["paragraph", "heading", "listItem"].includes(node.type)) context = node;
-      node.children?.forEach(visit);
-    };
-    blocks.forEach((block) => visit(block.node));
-    reference = context ? textContent(context) : "";
-  } else {
-    const visit = (node) => {
-      const range = rangeOf(node);
-      if (!intersects(range, occurrence.range) || ["annotationReference", "footnoteReference", "annotationDefinition", "definition"].includes(node.type)) return;
-      if (node.value !== void 0) {
-        const mapping = mapText(document2.source, node.value, range);
-        reference += node.value.split("").filter((_, index) => mapping.ends[index] > occurrence.range.start && mapping.starts[index] < occurrence.range.end).join("");
-      } else if (node.type === "image") reference += String(node.alt ?? "");
-      else node.children?.forEach(visit);
-    };
-    blocks.forEach((block, index) => {
-      if (index) reference += " ";
-      visit(block.node);
-    });
-    reference ||= occurrence.quote ?? document2.source.slice(occurrence.range.start, occurrence.range.end);
-  }
+  const visit = (node) => {
+    const range = rangeOf(node);
+    if (!intersects(range, referenceRange) || ["annotationReference", "footnoteReference", "annotationDefinition", "definition"].includes(node.type)) return;
+    if (node.value !== void 0) {
+      const mapping = mapText(document2.source, node.value, range);
+      reference += node.value.split("").filter((_, index) => mapping.ends[index] > referenceRange.start && mapping.starts[index] < referenceRange.end).join("");
+    } else if (node.type === "image") reference += String(node.alt ?? "");
+    else node.children?.forEach(visit);
+  };
+  blocks.forEach((block, index) => {
+    if (index) reference += " ";
+    visit(block.node);
+  });
+  if (!occurrence.embedded) reference ||= occurrence.quote ?? document2.source.slice(referenceRange.start, referenceRange.end);
   return reference.replace(/\s+/g, " ").trim();
 }
 
 // src/components/AnnotationSidebar.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var alignSidebar = (items, { activeId, gap, height }) => {
+var alignSidebar = (items, { activeId, gap, height, prioritizeActive }) => {
   const positions = items.map((item) => item.anchorTop);
   const activeIndex = items.findIndex((item) => item.id === activeId);
   const pivot = activeIndex < 0 ? 0 : activeIndex;
@@ -277,11 +291,25 @@ var alignSidebar = (items, { activeId, gap, height }) => {
   for (let i = pivot - 1; i >= 0; i--) positions[i] = Math.min(items[i].anchorTop, positions[i + 1] - items[i].height - gap);
   for (let i = pivot + 1; i < items.length; i++) positions[i] = Math.max(items[i].anchorTop, positions[i - 1] + items[i - 1].height + gap);
   if (height !== void 0 && items.reduce((sum, item) => sum + item.height, gap * (items.length - 1)) <= height) {
-    for (let i = items.length - 1; i >= 0; i--) positions[i] = Math.min(positions[i], (i === items.length - 1 ? height : positions[i + 1] - gap) - items[i].height);
-    for (let i = 0; i < items.length; i++) positions[i] = Math.max(positions[i], i === 0 ? 0 : positions[i - 1] + items[i - 1].height + gap);
+    const start = prioritizeActive && activeIndex >= 0 ? pivot + 1 : 0;
+    for (let i = items.length - 1; i >= start; i--) positions[i] = Math.min(positions[i], (i === items.length - 1 ? height : positions[i + 1] - gap) - items[i].height);
+    if (start || activeIndex < 0 || positions[0] >= 0) for (let i = start; i < items.length; i++) positions[i] = Math.max(positions[i], i === 0 ? 0 : positions[i - 1] + items[i - 1].height + gap);
   }
   return new Map(items.map((item, index) => [item.id, positions[index]]));
 };
+var SidebarCardBody = memo(function SidebarCardBody2({ occurrence, annotation, annotations, reference, active, title, toggleLabel, Preview, activate }) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    reference && /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-reference", title: reference, children: /* @__PURE__ */ jsx3("p", { className: "limr-sidebar-excerpt", children: reference }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "limr-sidebar-card-body", children: [
+      /* @__PURE__ */ jsxs3("button", { type: "button", className: "limr-sidebar-card-heading", onClick: () => activate(occurrence.id), "aria-expanded": active, children: [
+        title,
+        /* @__PURE__ */ jsx3("span", { className: "limr-sidebar-toggle", children: /* @__PURE__ */ jsx3("span", { className: "limr-button-label limr-underline", children: toggleLabel }, String(active)) })
+      ] }),
+      Preview && annotation && /* @__PURE__ */ jsx3(Collapse, { open: !active, keepMounted: true, className: "limr-sidebar-preview-panel", children: /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-preview", children: /* @__PURE__ */ jsx3(Preview, { annotation, data: annotation.data, occurrence, annotations, referenceText: reference }) }) }),
+      /* @__PURE__ */ jsx3(Collapse, { open: active, className: "limr-sidebar-expansion", children: /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-card-content", children: /* @__PURE__ */ jsx3(AnnotationGroup, { occurrence, presentation: "sidebar", enabled: active }) }) })
+    ] })
+  ] });
+});
 function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSidebar, renderCard, className, style }) {
   const runtime = useRuntime();
   const document2 = useDocument();
@@ -298,12 +326,16 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
   const rail = useRef2(null);
   const cards = useRef2(/* @__PURE__ */ new Map());
   const [sizes, setSizes] = useState2(/* @__PURE__ */ new Map());
+  const [minimumSizes, setMinimumSizes] = useState2(/* @__PURE__ */ new Map());
   const [anchorTops, setAnchorTops] = useState2(/* @__PURE__ */ new Map());
   const [railHeight, setRailHeight] = useState2(0);
-  const measured = useRef2({ sizes: /* @__PURE__ */ new Map(), height: 0 });
+  const measured = useRef2({ sizes: /* @__PURE__ */ new Map(), minimum: /* @__PURE__ */ new Map(), height: 0 });
   const resizeFrame = useRef2(0);
   const [viewportTop, setViewportTop] = useState2(0);
+  const [viewportHeight, setViewportHeight] = useState2(0);
   const [cardLock, setCardLock] = useState2(null);
+  const lastFocus = useRef2(null);
+  const [release, setRelease] = useState2(null);
   const occurrences = useMemo(() => {
     const values = [...decorations.occurrences].sort((a, b) => a.range.start - b.range.start || a.range.end - b.range.end || a.id.localeCompare(b.id));
     if (sync === "none") {
@@ -318,13 +350,20 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
   })])), [decorations, occurrences]);
   const measure = useCallback((beforePaint = false) => {
     const next = /* @__PURE__ */ new Map();
-    cards.current.forEach((element2, id) => next.set(id, element2.getBoundingClientRect().height));
+    const minimum = /* @__PURE__ */ new Map();
+    cards.current.forEach((element2, id) => {
+      const height2 = element2.getBoundingClientRect().height;
+      next.set(id, height2);
+      const panels = [...element2.querySelectorAll(":scope > .limr-sidebar-card-body > .limr-collapse")];
+      minimum.set(id, height2 - panels.reduce((sum, panel) => sum + panel.getBoundingClientRect().height, 0));
+    });
     const height = rail.current?.getBoundingClientRect().height ?? 0;
     const old = measured.current;
-    if (old.height === height && old.sizes.size === next.size && [...next].every(([id, size2]) => size2 === old.sizes.get(id))) return;
-    measured.current = { sizes: next, height };
+    if (old.height === height && old.sizes.size === next.size && [...next].every(([id, size2]) => size2 === old.sizes.get(id) && Math.abs(minimum.get(id) - (old.minimum.get(id) ?? 0)) < 0.5)) return;
+    measured.current = { sizes: next, minimum, height };
     const update = () => {
       setSizes(next);
+      setMinimumSizes(minimum);
       setRailHeight(height);
     };
     if (!beforePaint) {
@@ -357,13 +396,19 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
     for (const occurrence of occurrences) {
       const marker = runtime.anchors.get(occurrence.id);
       if (!marker || marker.closest("[inert]")) continue;
-      const rect = !occurrence.embedded && sourceRangeStartRect(runtime, occurrence.range);
+      const rect = sourceRangeStartRect(runtime, decorations.referenceRanges.get(occurrence.id) ?? occurrence.range);
       values.set(occurrence.id, (rect || marker.getBoundingClientRect()).top - top - displacement2);
     }
     setAnchorTops((old) => old.size === values.size && [...values].every(([id, value]) => Math.abs(value - (old.get(id) ?? -Infinity)) < 0.5) ? old : values);
-  }, [runtime, occurrences, layout, sync]);
+  }, [runtime, decorations.referenceRanges, occurrences, layout, sync]);
   useIsomorphicLayoutEffect(() => {
-    if (sync === "document" && rail.current) setViewportTop(Math.max(0, runtime.getViewportTop() - rail.current.getBoundingClientRect().top + (runtime.configuration.get().scrollOffset ?? 24)));
+    if (sync !== "document" || !rail.current) return;
+    const root = runtime.configuration.get().scrollRoot;
+    const bounds = rail.current.getBoundingClientRect();
+    const top = Math.max(bounds.top, runtime.getViewportTop() + (root?.clientTop ?? 0), window.visualViewport?.offsetTop ?? 0);
+    const bottom = Math.min(bounds.bottom, root ? runtime.getViewportTop() + root.clientTop + root.clientHeight : Infinity, (window.visualViewport?.offsetTop ?? 0) + (window.visualViewport?.height ?? innerHeight));
+    setViewportTop(Math.max(0, top - bounds.top + (runtime.configuration.get().scrollOffset ?? 24)));
+    setViewportHeight(Math.max(0, bottom - top));
   }, [runtime, layout, viewport, sync]);
   useEffect4(() => {
     const dismiss = (event) => {
@@ -395,35 +440,79 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
   if (sync !== "none") items.sort((a, b) => (anchorTops.get(a.id) ?? 0) - (anchorTops.get(b.id) ?? 0));
   const readingId = items.find((item) => (anchorTops.get(item.id) ?? 0) >= viewportTop)?.id ?? items.at(-1)?.id ?? null;
   const alignmentId = hovered ?? active ?? readingId;
+  const focusedId = hovered ?? active;
   const source = hovered ? hoverSource : active ? activeSource : null;
   const locked = source === "sidebar" && cardLock?.id === alignmentId ? cardLock : null;
+  const lockedTop = locked?.top;
+  useIsomorphicLayoutEffect(() => {
+    const previous = lastFocus.current;
+    lastFocus.current = focusedId ? { id: focusedId, top: lockedTop } : null;
+    if (focusedId || sync !== "document" || !rail.current || matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setRelease(null);
+      return;
+    }
+    if (!previous) return;
+    const style2 = getComputedStyle(rail.current), value = style2.getPropertyValue("--limr-motion-slow").trim();
+    const milliseconds = parseFloat(value) * (value.endsWith("ms") ? 1 : 1e3);
+    const duration = Number.isFinite(milliseconds) ? Math.max(0, milliseconds) : 460;
+    if (!duration) {
+      setRelease(null);
+      return;
+    }
+    const motion = rail.current.animate([{}, {}], { duration, easing: style2.getPropertyValue("--limr-ease").trim() || "ease-out" });
+    setRelease({ ...previous, progress: 0 });
+    let frame = 0;
+    const step = () => {
+      if (motion.playState === "finished") {
+        setRelease(null);
+        return;
+      }
+      setRelease({ ...previous, progress: motion.effect?.getComputedTiming().progress ?? 0 });
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => {
+      cancelAnimationFrame(frame);
+      motion.cancel();
+    };
+  }, [focusedId, lockedTop, sync]);
   const sidebarItems = items.map((item) => ({ id: item.id, anchorTop: anchorTops.get(item.id) ?? 0, height: sizes.get(item.id) ?? 80 }));
-  const positionContext = { activeId: alignmentId, gap, height: sync === "document" && railHeight > 0 ? railHeight : void 0 };
-  const positions = positioner(locked ? sidebarItems.map((item) => item.id === locked.id ? { ...item, anchorTop: locked.top } : item) : sidebarItems, positionContext);
+  const positionContext = { activeId: alignmentId, gap, height: sync === "document" && railHeight > 0 ? railHeight : void 0, prioritizeActive: !!(hovered || active) };
+  const positions = new Map(positioner(locked ? sidebarItems.map((item) => item.id === locked.id ? { ...item, anchorTop: locked.top } : item) : sidebarItems, positionContext));
+  const releasing = !focusedId && release;
+  if (releasing) {
+    const origin = positioner(sidebarItems.map((item) => item.id === releasing.id && releasing.top !== void 0 ? { ...item, anchorTop: releasing.top } : item), { ...positionContext, activeId: releasing.id, prioritizeActive: true });
+    for (const [id, top] of positions) positions.set(id, top + ((origin.get(id) ?? top) - top) * (1 - releasing.progress));
+  }
   const lockedAnchor = locked ? anchorTops.get(locked.id) ?? locked.top : 0;
-  const anchorFits = lockedAnchor >= 0 && lockedAnchor + (sizes.get(locked?.id ?? "") ?? 80) <= railHeight;
-  const lockFits = locked && (positions.get(locked.id) ?? locked.top) >= locked.top - 0.5;
-  const displacement = sync === "document" && locked && anchorFits && lockFits ? (positions.get(locked.id) ?? locked.top) - lockedAnchor : 0;
+  const displacement = sync === "document" && locked ? (positions.get(locked.id) ?? locked.top) - lockedAnchor : 0;
   useIsomorphicLayoutEffect(() => {
     if (sync === "document") runtime.documentOffset.set(displacement);
   }, [runtime, displacement, sync]);
-  const lockCard = (id) => {
+  const lockCard = useCallback((id) => {
     if (locked?.id === id) return;
     const card = cards.current.get(id);
     if (card && rail.current) {
       const origin = rail.current.getBoundingClientRect().top;
       const top = card.getBoundingClientRect().top - origin;
-      const anchorTop = anchorTops.get(id) ?? top;
-      const boundedTop = positioner(sidebarItems, { ...positionContext, activeId: id }).get(id) ?? anchorTop;
-      setCardLock({ id, top: boundedTop < anchorTop - 0.5 ? anchorTop : top });
+      setCardLock({ id, top });
     }
-  };
-  return /* @__PURE__ */ jsx3("aside", { ref: rail, "aria-label": locale.annotations, className: `limr-sidebar ${className ?? ""}`, "data-sync": sync, "data-limr-theme": theme, "data-limr-appearance": appearance, style, children: items.map((occurrence) => {
+  }, [locked?.id]);
+  const activateCard = useCallback((id) => {
+    const state = runtime.interaction.get();
+    const hovering = state.hovered === id || cards.current.get(id)?.matches(":hover");
+    lockCard(id);
+    runtime.activate(state.active === id ? null : id, "sidebar");
+    if (hovering) runtime.hover(id, "sidebar");
+  }, [runtime, lockCard]);
+  return /* @__PURE__ */ jsx3("aside", { ref: rail, "aria-label": locale.annotations, className: `limr-sidebar ${className ?? ""}`, "data-sync": sync, "data-releasing": releasing ? "" : void 0, "data-limr-theme": theme, "data-limr-appearance": appearance, style, children: items.map((occurrence) => {
     const annotation = decorations.annotations.get(occurrence.annotationIds[0]);
     const definition = runtime.annotationTypes.get(annotation?.type ?? "citation");
     const isActive = active === occurrence.id;
     const palette = definition?.sidebar;
     const Preview = palette?.Preview;
+    const available = source === "marker" && alignmentId === occurrence.id && !isActive ? Math.max(minimumSizes.get(occurrence.id) ?? 80, railHeight - (anchorTops.get(occurrence.id) ?? 0)) : railHeight;
+    const cardHeight = isActive ? Math.min(available, Math.max(minimumSizes.get(occurrence.id) ?? 80, viewportHeight || railHeight)) : available;
     const cardStyle = {
       "--limr-annotation-color": palette?.color ?? definition?.color,
       "--limr-annotation-border": palette?.borderColor,
@@ -436,16 +525,11 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
         position: "absolute",
         top: positions.get(occurrence.id) ?? 0,
         insetInline: 0,
-        "--limr-sidebar-card-height": `${railHeight}px`
+        "--limr-sidebar-card-height": `${cardHeight}px`
       } : { marginBlockEnd: gap }
     };
     const collapseOnContentClick = occurrence.annotationIds.every((id) => runtime.annotationTypes.get(decorations.annotations.get(id)?.type ?? "")?.sidebar?.collapseOnContentClick);
-    const activate = () => {
-      const hovering = runtime.interaction.get().hovered === occurrence.id || cards.current.get(occurrence.id)?.matches(":hover");
-      lockCard(occurrence.id);
-      runtime.activate(isActive ? null : occurrence.id, "sidebar");
-      if (hovering) runtime.hover(occurrence.id, "sidebar");
-    };
+    const activate = () => activateCard(occurrence.id);
     return /* @__PURE__ */ jsx3(
       "div",
       {
@@ -475,17 +559,7 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
         onClick: (event) => {
           if ((!isActive || collapseOnContentClick) && !renderCard && !event.defaultPrevented && !event.target.closest('button,a,input,select,textarea,summary,[role="button"],[role="link"],[contenteditable="true"],[data-limr-card-interactive]') && window.getSelection()?.isCollapsed !== false) activate();
         },
-        children: renderCard ? renderCard({ occurrence, active: isActive, activate }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-          references.get(occurrence.id) && /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-reference", title: references.get(occurrence.id), children: /* @__PURE__ */ jsx3("p", { className: "limr-sidebar-excerpt", children: references.get(occurrence.id) }) }),
-          /* @__PURE__ */ jsxs3("div", { className: "limr-sidebar-card-body", children: [
-            /* @__PURE__ */ jsxs3("button", { type: "button", className: "limr-sidebar-card-heading", onClick: activate, "aria-expanded": isActive, children: [
-              definition?.label ?? annotation?.type ?? "Reference",
-              /* @__PURE__ */ jsx3("span", { className: "limr-sidebar-toggle", children: /* @__PURE__ */ jsx3("span", { className: "limr-button-label limr-underline", children: isActive ? locale.collapse : locale.expand }, String(isActive)) })
-            ] }),
-            Preview && annotation && /* @__PURE__ */ jsx3(Collapse, { open: !isActive, keepMounted: true, className: "limr-sidebar-preview-panel", children: /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-preview", children: /* @__PURE__ */ jsx3(Preview, { annotation, data: annotation.data, occurrence, annotations: annotationGroups.get(occurrence.id), referenceText: references.get(occurrence.id) ?? "" }) }) }),
-            /* @__PURE__ */ jsx3(Collapse, { open: isActive, className: "limr-sidebar-expansion", children: /* @__PURE__ */ jsx3("div", { className: "limr-sidebar-card-content", children: /* @__PURE__ */ jsx3(AnnotationGroup, { occurrence, presentation: "sidebar", enabled: isActive }) }) })
-          ] })
-        ] })
+        children: renderCard ? renderCard({ occurrence, active: isActive, activate }) : /* @__PURE__ */ jsx3(SidebarCardBody, { occurrence, annotation, annotations: annotationGroups.get(occurrence.id), reference: references.get(occurrence.id) ?? "", active: isActive, title: definition?.label ?? annotation?.type ?? "Reference", toggleLabel: isActive ? locale.collapse : locale.expand, Preview, activate: activateCard })
       },
       occurrence.id
     );
@@ -804,9 +878,33 @@ function AnnotationOverlay({ disabled = false, portalRoot, previewWidth = 340, m
 }
 
 // src/components/SelectionToolbar.tsx
-import { useEffect as useEffect6, useId, useMemo as useMemo2, useRef as useRef4, useState as useState4 } from "react";
+import { useEffect as useEffect6, useId, useMemo as useMemo2, useRef as useRef5, useState as useState5 } from "react";
 import { autoUpdate as autoUpdate2, FloatingPortal as FloatingPortal2, offset as offset2, shift as shift2, useFloating as useFloating2 } from "@floating-ui/react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// src/components/ToolFaces.tsx
+import { useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ToolFaces({ state, children }) {
+  const ref = useRef4(null);
+  const [width, setWidth] = useState4();
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const faces = [...element.querySelectorAll(".limr-tool-face")];
+    const measure = () => {
+      const face = faces.find((face2) => face2.hasAttribute("data-visible"));
+      if (face) setWidth(face.offsetWidth);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    faces.forEach((face) => observer.observe(face));
+    return () => observer.disconnect();
+  }, [state]);
+  return /* @__PURE__ */ jsx5("span", { className: "limr-tool-faces", ref, style: { width }, children });
+}
+
+// src/components/SelectionToolbar.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaults = [highlightPalette(), highlightSelection(), copyText(), deleteAnnotations()];
 function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className = "", style, render }) {
   const runtime = useRuntime();
@@ -825,15 +923,15 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
     const order = (action) => action.placement === "start" ? -1 : action.placement === "end" ? 1 : 0;
     return [...map.values()].sort((a, b) => order(a) - order(b));
   }, [config.extensions, actions]);
-  const [busy, setBusy] = useState4(null);
-  const busyRef = useRef4(false);
-  const [error, setError] = useState4(null);
-  const [expanded, setExpanded] = useState4(null);
-  const [success, setSuccess] = useState4(null);
-  const [deleteHintOpen, setDeleteHintOpen] = useState4(false);
-  const [preferredHighlight, setPreferredHighlight] = useState4(defaultHighlight);
-  const closeTimer = useRef4(void 0);
-  const successTimer = useRef4(void 0);
+  const [busy, setBusy] = useState5(null);
+  const busyRef = useRef5(false);
+  const [error, setError] = useState5(null);
+  const [expanded, setExpanded] = useState5(null);
+  const [success, setSuccess] = useState5(null);
+  const [deleteHintOpen, setDeleteHintOpen] = useState5(false);
+  const [preferredHighlight, setPreferredHighlight] = useState5(defaultHighlight);
+  const closeTimer = useRef5(void 0);
+  const successTimer = useRef5(void 0);
   const panelId = useId();
   const documentSnapshot = runtime.document.getSnapshot();
   const effectiveSelection = useMemo2(() => {
@@ -841,9 +939,15 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
     if (interaction.editing && active?.annotationIds.includes(interaction.editing)) return null;
     const range = paint?.range ?? (hiddenActive ? active?.range : void 0);
     return range ? selectionFromRange(documentSnapshot, range, {
-      text: paint ? runtime.highlightReference?.text ?? annotationReferenceText(documentSnapshot, { id: paint.id, annotationIds: [], range }) : annotationReferenceText(documentSnapshot, active)
+      text: atomicSelectionText(runtime, [range]) ?? (paint ? runtime.highlightReference?.text ?? annotationReferenceText(documentSnapshot, { id: paint.id, annotationIds: [], range }) : annotationReferenceText(documentSnapshot, active))
     }) : null;
   }, [documentSnapshot, paint, active, selection, interaction.editing, hiddenActive]);
+  const blockReference = useMemo2(() => {
+    const ranges = effectiveSelection?.raw.ranges;
+    if (ranges?.length !== 1) return null;
+    const { start, end } = ranges[0];
+    return runtime.content?.querySelector(`[data-limr-atomic="block"][data-source-start="${start}"][data-source-end="${end}"]`) ?? null;
+  }, [runtime, effectiveSelection]);
   const annotations = useMemo2(() => effectiveSelection ? [...decorations.annotations.values()].filter((annotation) => resolveAnnotationAnchors(annotation, documentSnapshot).some((anchor) => [...effectiveSelection.raw.ranges, ...effectiveSelection.syntax.ranges].some((range) => sameRange(anchor.range, range)))) : [], [decorations, effectiveSelection, documentSnapshot]);
   const highlight = paint ? decorations.annotations.get(paint.annotationId) : annotations.find((annotation) => annotation.type === "highlight");
   const highlightAppearance = highlight?.data ?? preferredHighlight;
@@ -858,7 +962,8 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
     signal: runtime.signal,
     clearSelection: () => runtime.clearSelection()
   } : null;
-  const available = context ? combined.filter((action) => action.visible?.(context) ?? true) : [];
+  const readOnly = highlight?.data?.readOnly === true;
+  const available = context ? readOnly ? [defaults[2]] : combined.filter((action) => action.visible?.(context) ?? true) : [];
   const expandedAction = available.find((action) => action.id === expanded && action.renderExpanded);
   const hasPanels = available.some((action) => action.renderExpanded);
   const open = !!context && effectiveSelection.settled && available.length > 0;
@@ -866,16 +971,16 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
     open,
     strategy: "fixed",
     placement: "bottom",
-    middleware: [offset2(10), { name: "toolbarSpace", options: { hasPanels, maxPanelHeight }, fn({ rects, placement: placement2, elements }) {
+    middleware: [offset2(10), { name: "toolbarSpace", options: { hasPanels, maxPanelHeight, blockReference }, fn({ rects, placement: placement2, elements }) {
       const viewport = window.visualViewport;
       const root = runtime.configuration.get().scrollRoot?.getBoundingClientRect();
       const top = Math.max(viewport?.offsetTop ?? 0, root?.top ?? 0);
       const bottom = Math.min((viewport?.offsetTop ?? 0) + (viewport?.height ?? window.innerHeight), root?.bottom ?? Infinity);
       const above = Math.max(0, rects.reference.y - top - 20), below = Math.max(0, bottom - rects.reference.y - rects.reference.height - 20);
-      const row = (elements.floating.querySelector(".limr-toolbar-actions")?.getBoundingClientRect().height ?? 34) + (elements.floating.querySelector(".limr-toolbar-delete-hint")?.getBoundingClientRect().height ?? 0);
+      const row = (elements.floating.querySelector(".limr-toolbar-actions")?.getBoundingClientRect().height ?? 34) + (elements.floating.querySelector(".limr-toolbar-delete-hint,.limr-toolbar-readonly-hint")?.getBoundingClientRect().height ?? 0);
       const limit = Math.max(0, parseFloat(getComputedStyle(elements.floating).getPropertyValue("--limr-toolbar-panel-max-height")) || maxPanelHeight);
       const needed = row + (hasPanels ? limit : 0) + 24;
-      const next = below >= needed || below >= above ? "bottom" : "top";
+      const next = blockReference || below >= needed || below >= above ? "bottom" : "top";
       const room = next === "bottom" ? below : above;
       elements.floating.style.setProperty("--limr-toolbar-panel-height", `${Math.max(0, Math.min(limit, room - row - 24))}px`);
       elements.floating.style.setProperty("--limr-toolbar-available-height", `${room}px`);
@@ -884,9 +989,9 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
     whileElementsMounted: autoUpdate2
   });
   useEffect6(() => {
-    const reference = selection ? runtime.selectionRange : paint ? runtime.highlightReference : active ? runtime.anchors.get(active.id) : null;
-    if (reference) refs.setPositionReference({ getBoundingClientRect: () => reference.getBoundingClientRect(), getClientRects: () => reference.getClientRects(), contextElement: runtime.content ?? void 0 });
-  }, [runtime, refs, selection, paint, active]);
+    const reference = blockReference ?? (selection ? runtime.selectionRange : paint ? runtime.highlightReference : active ? runtime.anchors.get(active.id) : null);
+    if (reference) refs.setPositionReference({ getBoundingClientRect: () => reference.getBoundingClientRect(), getClientRects: () => reference.getClientRects(), contextElement: blockReference ?? runtime.content ?? void 0 });
+  }, [runtime, refs, blockReference, selection, paint, active]);
   const selectionKey = effectiveSelection?.raw.ranges.map((range) => `${range.start}-${range.end}`).join(",") ?? "";
   useEffect6(() => {
     setError(null);
@@ -969,7 +1074,7 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
   };
   const annotationCount = annotations.filter((annotation) => annotation.type !== "highlight").length;
   const hint = available.some((action) => action.id === "delete-annotations") && annotationCount > 1 ? context.locale.deleteAnnotationsHint.replace("{count}", String(annotationCount)) : null;
-  return /* @__PURE__ */ jsx5(FloatingPortal2, { root: portalRoot, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(FloatingPortal2, { root: portalRoot, children: /* @__PURE__ */ jsx6(
     "div",
     {
       ref: refs.setFloating,
@@ -982,6 +1087,7 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
       "data-limr-appearance": appearance,
       "data-placement": placement,
       "data-highlight": highlight?.id,
+      "data-readonly": readOnly || void 0,
       "data-expanded": expandedAction?.id,
       onMouseDown: (event) => {
         if (!(event.target instanceof Element) || !event.target.closest("input,textarea,select,[contenteditable]")) event.preventDefault();
@@ -1013,7 +1119,7 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
         event.preventDefault();
       },
       children: /* @__PURE__ */ jsxs5("div", { className: "limr-toolbar-surface", "data-ready": isPositioned || void 0, children: [
-        /* @__PURE__ */ jsx5("div", { className: "limr-toolbar-actions", children: render ? render({ context, actions: available, run }) : available.map((action, index) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("div", { className: "limr-toolbar-actions", children: render && !readOnly ? render({ context, actions: available, run }) : available.map((action, index) => /* @__PURE__ */ jsx6(
           "div",
           {
             className: "limr-toolbar-item",
@@ -1034,7 +1140,7 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
                 setError(cause instanceof Error ? cause.message : String(cause));
               }
             },
-            children: action.render ? action.render(actionContext(action)) : /* @__PURE__ */ jsxs5(
+            children: action.render ? action.render(actionContext(action)) : /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "limr-toolbar-action",
@@ -1058,33 +1164,34 @@ function SelectionToolbar({ actions, portalRoot, maxPanelHeight = 260, className
                 onBlur: (event) => {
                   if (action.id === "delete-annotations" && !event.currentTarget.matches(":hover")) setDeleteHintOpen(false);
                 },
-                children: [
+                children: /* @__PURE__ */ jsxs5(ToolFaces, { state: label(action), children: [
                   /* @__PURE__ */ jsxs5("span", { className: "limr-tool-face", "data-visible": success !== action.id || void 0, "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx5("span", { className: "limr-tool-icon", children: typeof action.icon === "function" ? action.icon(context) : action.icon }, typeof action.label === "function" ? action.label(context) : action.label),
-                    /* @__PURE__ */ jsx5("span", { className: "limr-tool-label limr-underline", children: typeof action.label === "function" ? action.label(context) : action.label })
+                    /* @__PURE__ */ jsx6("span", { className: "limr-tool-icon", children: typeof action.icon === "function" ? action.icon(context) : action.icon }, typeof action.label === "function" ? action.label(context) : action.label),
+                    /* @__PURE__ */ jsx6("span", { className: "limr-tool-label limr-underline", children: typeof action.label === "function" ? action.label(context) : action.label })
                   ] }),
                   action.successLabel && /* @__PURE__ */ jsxs5("span", { className: "limr-tool-face", "data-visible": success === action.id || void 0, "aria-hidden": "true", children: [
-                    /* @__PURE__ */ jsx5("span", { className: "limr-tool-icon", children: action.successIcon ?? (typeof action.icon === "function" ? action.icon(context) : action.icon) }),
-                    /* @__PURE__ */ jsx5("span", { className: "limr-tool-label limr-underline", children: typeof action.successLabel === "function" ? action.successLabel(context) : action.successLabel })
+                    /* @__PURE__ */ jsx6("span", { className: "limr-tool-icon", children: action.successIcon ?? (typeof action.icon === "function" ? action.icon(context) : action.icon) }),
+                    /* @__PURE__ */ jsx6("span", { className: "limr-tool-label limr-underline", children: typeof action.successLabel === "function" ? action.successLabel(context) : action.successLabel })
                   ] })
-                ]
+                ] })
               }
             )
           },
           action.id
         )) }),
-        expandedAction && /* @__PURE__ */ jsx5("div", { id: panelId, className: "limr-toolbar-panel", role: "group", "aria-label": label(expandedAction), children: /* @__PURE__ */ jsx5(OverlayScrollArea, { active: true, label: label(expandedAction), children: expandedAction.renderExpanded(actionContext(expandedAction)) }) }, expandedAction.id),
-        hint && /* @__PURE__ */ jsx5(Collapse, { open: deleteHintOpen, keepMounted: true, className: "limr-toolbar-delete-warning", children: /* @__PURE__ */ jsx5("p", { id: `${panelId}-delete`, className: "limr-toolbar-delete-hint", children: hint }) }),
-        error && /* @__PURE__ */ jsx5("span", { role: "alert", className: "limr-action-error", children: error })
+        readOnly && /* @__PURE__ */ jsx6("p", { className: "limr-toolbar-readonly-hint", children: context.locale.inlineHighlightHint ?? "Markdown inline highlight, editing unavailable" }),
+        expandedAction && /* @__PURE__ */ jsx6("div", { id: panelId, className: "limr-toolbar-panel", role: "group", "aria-label": label(expandedAction), children: /* @__PURE__ */ jsx6(OverlayScrollArea, { active: true, label: label(expandedAction), children: expandedAction.renderExpanded(actionContext(expandedAction)) }) }, expandedAction.id),
+        hint && /* @__PURE__ */ jsx6(Collapse, { open: deleteHintOpen, keepMounted: true, className: "limr-toolbar-delete-warning", children: /* @__PURE__ */ jsx6("p", { id: `${panelId}-delete`, className: "limr-toolbar-delete-hint", children: hint }) }),
+        error && /* @__PURE__ */ jsx6("span", { role: "alert", className: "limr-action-error", children: error })
       ] }, selectionKey)
     }
   ) });
 }
 
 // src/components/Reader.tsx
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Reader({ actions, toc = true, sidebar = true, followOutput = false, sidebarBreakpoint = 1120, fillHeight = true, className, style, ...provider }) {
-  return /* @__PURE__ */ jsx6(DocumentProvider, { ...provider, children: /* @__PURE__ */ jsx6(ReaderLayout, { actions, toc, sidebar, followOutput, sidebarBreakpoint, fillHeight, className, style }) });
+  return /* @__PURE__ */ jsx7(DocumentProvider, { ...provider, children: /* @__PURE__ */ jsx7(ReaderLayout, { actions, toc, sidebar, followOutput, sidebarBreakpoint, fillHeight, className, style }) });
 }
 function ReaderLayout({ actions, toc, sidebar, followOutput, sidebarBreakpoint, fillHeight, className, style }) {
   const runtime = useRuntime();
@@ -1092,12 +1199,12 @@ function ReaderLayout({ actions, toc, sidebar, followOutput, sidebarBreakpoint,
   const layout = useStoreSelector(runtime.layout, (value) => value);
   const appearance = useAppearance();
   const theme = useTheme();
-  const ref = useRef5(null);
-  const tocRail = useRef5(null);
-  const content = useRef5(null);
+  const ref = useRef6(null);
+  const tocRail = useRef6(null);
+  const content = useRef6(null);
   useOverflowFade(content, runtime, ":scope > .limr-prose");
-  const [width, setWidth] = useState5(0);
-  const [availableHeight, setAvailableHeight] = useState5(0);
+  const [width, setWidth] = useState6(0);
+  const [availableHeight, setAvailableHeight] = useState6(0);
   useIsomorphicLayoutEffect(() => {
     if (!fillHeight || !ref.current) return;
     const origin = ref.current.getBoundingClientRect().top - runtime.getViewportTop() - (scrollRoot?.clientTop ?? 0) + runtime.getScrollTop();
@@ -1158,25 +1265,25 @@ function ReaderLayout({ actions, toc, sidebar, followOutput, sidebarBreakpoint,
   const sidebarVisible = !!sidebar && width >= sidebarBreakpoint;
   return /* @__PURE__ */ jsxs6("div", { ref, className: `limr-reader ${className ?? ""}`, style: { "--limr-reader-available-height": fillHeight ? `${availableHeight}px` : void 0, ...style }, "data-fill-height": fillHeight || void 0, "data-sidebar": sidebarVisible || void 0, "data-toc": toc && width >= 800 || void 0, "data-limr-theme": theme, "data-limr-appearance": appearance, children: [
     toc && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx6("div", { ref: tocRail, className: "limr-reader-toc", children: /* @__PURE__ */ jsx6(TableOfContents, {}) }),
-      /* @__PURE__ */ jsx6(MobileContents, {})
+      /* @__PURE__ */ jsx7("div", { ref: tocRail, className: "limr-reader-toc", children: /* @__PURE__ */ jsx7(TableOfContents, {}) }),
+      /* @__PURE__ */ jsx7(MobileContents, {})
     ] }),
-    /* @__PURE__ */ jsx6("main", { ref: content, className: "limr-reader-content", children: /* @__PURE__ */ jsx6(Markdown, { followOutput }) }),
-    sidebarVisible && /* @__PURE__ */ jsx6(AnnotationSidebar, {}),
-    /* @__PURE__ */ jsx6(AnnotationOverlay, { disabled: sidebarVisible }),
-    /* @__PURE__ */ jsx6(SelectionToolbar, { actions })
+    /* @__PURE__ */ jsx7("main", { ref: content, className: "limr-reader-content", children: /* @__PURE__ */ jsx7(Markdown, { followOutput }) }),
+    sidebarVisible && /* @__PURE__ */ jsx7(AnnotationSidebar, {}),
+    /* @__PURE__ */ jsx7(AnnotationOverlay, { disabled: sidebarVisible }),
+    /* @__PURE__ */ jsx7(SelectionToolbar, { actions })
   ] });
 }
 function MobileContents() {
   const locale = useLocale();
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const id = useId2();
   return /* @__PURE__ */ jsxs6("div", { className: "limr-reader-mobile-toc", children: [
     /* @__PURE__ */ jsxs6("button", { type: "button", className: "limr-mobile-toc-toggle", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), children: [
-      /* @__PURE__ */ jsx6("span", { children: locale.contents }),
-      /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: "m6 8 4 4 4-4" }) })
+      /* @__PURE__ */ jsx7("span", { children: locale.contents }),
+      /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("path", { d: "m6 8 4 4 4-4" }) })
     ] }),
-    /* @__PURE__ */ jsx6("div", { id, children: /* @__PURE__ */ jsx6(Collapse, { open, keepMounted: true, children: /* @__PURE__ */ jsx6(TableOfContents, {}) }) })
+    /* @__PURE__ */ jsx7("div", { id, children: /* @__PURE__ */ jsx7(Collapse, { open, keepMounted: true, children: /* @__PURE__ */ jsx7(TableOfContents, {}) }) })
   ] });
 }
 
@@ -1190,4 +1297,4 @@ export {
   SelectionToolbar,
   Reader
 };
-//# sourceMappingURL=chunk-ETHLPBKQ.js.map
+//# sourceMappingURL=chunk-GU2RPESF.js.map