@linloir/limr 1.0.0 → 1.0.1

package/dist/{chunk-N77VD2YR.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-3ILUZKDB.js";
+} from "./chunk-SUAAUGAX.js";
 import {
   annotationReferenceRange,
   defaultHighlight,
-  intersects,
   mapText,
-  rangeOf,
   resolveAnnotationAnchors,
   sameRange,
   selectionFromRange
-} from "./chunk-TTISGBST.js";
+} 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
@@ -273,6 +297,19 @@ var alignSidebar = (items, { activeId, gap, height, prioritizeActive }) => {
   }
   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();
@@ -452,7 +489,7 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
   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) {
@@ -460,7 +497,14 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
       const top = card.getBoundingClientRect().top - origin;
       setCardLock({ id, top });
     }
-  };
+  }, [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");
@@ -485,12 +529,7 @@ function AnnotationSidebar({ sync = "document", gap = 14, positioner = alignSide
       } : { 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",
       {
@@ -520,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
     );
@@ -849,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();
@@ -870,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(() => {
@@ -886,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;
@@ -903,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;
@@ -911,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`);
@@ -929,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);
@@ -1014,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,
@@ -1027,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();
@@ -1058,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",
@@ -1079,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",
@@ -1103,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();
@@ -1137,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();
@@ -1203,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, {}) }) })
   ] });
 }
 
@@ -1235,4 +1297,4 @@ export {
   SelectionToolbar,
   Reader
 };
-//# sourceMappingURL=chunk-N77VD2YR.js.map
+//# sourceMappingURL=chunk-GU2RPESF.js.map