@recogito/text-annotator 4.0.0-beta → 4.0.1-beta

package/dist/text-annotator.es.js

@@ -1,19 +1,17 @@
-import { createNanoEvents as at } from "nanoevents";
-import { UserSelectAction as Et, serializeW3CBodies as bt, parseW3CBodies as Ct, parseW3CUser as At, createStore as Tt, createSelectionState as Rt, createHoverState as vt, createViewportState as wt, Origin as F, createAnonymousGuest as xt, createUndoStack as Lt, createLifecycleObserver as Nt, createBaseAnnotator as Ot } from "@annotorious/core";
-import { Origin as He, UserSelectAction as Pe, createBody as Ue } from "@annotorious/core";
-import { UAParser as kt } from "ua-parser-js";
-import { OSName as Mt } from "ua-parser-js/enums";
-import { colord as et } from "colord";
 import { v4 as lt } from "uuid";
-import Bt from "rbush";
-import It from "debounce";
+import { parseW3CBodies as Ct, serializeW3CBodies as At, parseW3CUser as Tt, UserSelectAction as Rt, createStore as vt, createSelectionState as wt, createHoverState as xt, createViewportState as Lt, Origin as F, createAnonymousGuest as Nt, createUndoStack as Ot, createLifecycleObserver as kt, createBaseAnnotator as Mt } from "@annotorious/core";
+import { Origin as Be, UserSelectAction as Ie, createBody as _e } from "@annotorious/core";
+import { createNanoEvents as dt } from "nanoevents";
+import { colord as et } from "colord";
+import { dequal as Bt } from "dequal/lite";
+import It from "rbush";
+import _t from "debounce";
 import q from "hotkeys-js";
-import { poll as _t } from "poll";
-import { dequal as Dt } from "dequal/lite";
-const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`, G = (t, e) => t.contains(e) ? !!(e instanceof HTMLElement ? e.closest($) : e.parentElement?.closest($)) : !0, Pt = (t, e) => {
+import { poll as Dt } from "poll";
+const ut = typeof navigator < "u" && navigator.platform.startsWith("Mac"), ft = "not-annotatable", Y = `.${ft}`, $ = (t, e) => t.contains(e) ? !!(e instanceof HTMLElement ? e.closest(Y) : e.parentElement?.closest(Y)) : !0, gt = (t, e) => {
   const o = e.commonAncestorContainer;
-  return !G(t, o);
-}, ft = /^\s*$/, Ut = (t) => ft.test(t.toString()), Oe = (t) => ft.test(t.textContent || ""), Kt = (t) => {
+  return !$(t, o);
+}, mt = /^\s*$/, Ht = (t) => mt.test(t.toString()), we = (t) => mt.test(t.textContent || ""), Pt = (t) => {
   if (t.length === 0) return [];
   if (t.length === 1) return [t[0]];
   t.sort((s, n) => {
@@ -22,22 +20,22 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
   });
   const [e, ...o] = t, i = o.reduce((s, n) => s.current.compareBoundaryPoints(Range.START_TO_END, n) >= 0 ? (s.current.compareBoundaryPoints(Range.END_TO_END, n) < 0 && s.current.setEnd(n.endContainer, n.endOffset), s) : (s.merged.push(s.current), s.current = n.cloneRange(), s), { merged: [], current: e.cloneRange() });
   return [...i.merged, i.current];
-}, Ft = (t) => {
-  !t.hasAttribute("tabindex") && t.tabIndex < 0 && t.setAttribute("tabindex", "-1"), t.classList.add("no-focus-outline");
-}, $t = function* (t) {
+}, Ut = (t) => {
+  (!t.hasAttribute("tabindex") || t.tabIndex < -1) && t.setAttribute("tabindex", "-1"), t.classList.add("no-focus-outline");
+}, Kt = function* (t) {
   const e = document.createNodeIterator(
     t.commonAncestorContainer,
     NodeFilter.SHOW_ELEMENT,
-    (i) => i instanceof HTMLElement && i.classList.contains(ut) && !i.parentElement.closest($) && t.intersectsNode(i) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+    (i) => i instanceof HTMLElement && i.classList.contains(ft) && !i.parentElement.closest(Y) && t.intersectsNode(i) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
   );
   let o;
   for (; o = e.nextNode(); )
     o instanceof HTMLElement && (yield o);
-}, Yt = (t, e) => {
-  if (!Pt(t, e)) return [];
+}, Ft = (t, e) => {
+  if (!gt(t, e)) return [];
   const o = [];
   let i = null;
-  for (const s of $t(e)) {
+  for (const s of Kt(e)) {
     let n;
     i ? (n = document.createRange(), n.setStartAfter(i), n.setEndBefore(s)) : (n = e.cloneRange(), n.setEndBefore(s)), n.collapsed || o.push(n), i = s;
   }
@@ -48,208 +46,86 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
   return o.length > 0 ? o : [e];
 }, nt = (t) => {
   const e = t.cloneContents();
-  return e.querySelectorAll($).forEach((o) => o.remove()), e;
-}, Wt = (t, e) => {
+  return e.querySelectorAll(Y).forEach((o) => o.remove()), e;
+}, $t = (t, e) => {
   const o = t.cloneRange();
   return e.contains(o.startContainer) || o.setStart(e, 0), e.contains(o.endContainer) || o.setEnd(e, e.childNodes.length), o;
-}, Xt = (t) => t.addEventListener("click", (e) => {
-  // Allow clicks within not-annotatable elements
-  !e.target.closest($) && !e.target.closest("a") && e.preventDefault();
-}), Z = (t) => ({
-  ...t,
-  type: t.type,
-  x: t.x,
-  y: t.y,
-  clientX: t.clientX,
-  clientY: t.clientY,
-  offsetX: t.offsetX,
-  offsetY: t.offsetY,
-  screenX: t.screenX,
-  screenY: t.screenY,
-  isPrimary: t.isPrimary,
-  altKey: t.altKey,
-  ctrlKey: t.ctrlKey,
-  metaKey: t.metaKey,
-  shiftKey: t.shiftKey,
-  button: t.button,
-  buttons: t.buttons,
-  currentTarget: t.currentTarget,
-  target: t.target,
-  defaultPrevented: t.defaultPrevented,
-  detail: t.detail,
-  eventPhase: t.eventPhase,
-  pointerId: t.pointerId,
-  pointerType: t.pointerType,
-  timeStamp: t.timeStamp
-}), j = (t) => ({
-  ...t,
-  type: t.type,
-  key: t.key,
-  code: t.code,
-  location: t.location,
-  repeat: t.repeat,
-  altKey: t.altKey,
-  ctrlKey: t.ctrlKey,
-  metaKey: t.metaKey,
-  shiftKey: t.shiftKey,
-  currentTarget: t.currentTarget,
-  target: t.target,
-  defaultPrevented: t.defaultPrevented,
-  detail: t.detail,
-  timeStamp: t.timeStamp
-}), J = (t, e = 10) => {
-  let o;
-  return ((...i) => {
-    clearTimeout(o), o = setTimeout(() => t.apply(void 0, i), e);
-  });
-}, gt = (t, e, o, i) => {
-  const { store: s, selection: n, hover: r } = o, c = at();
-  let d;
-  const f = /* @__PURE__ */ new Map();
-  let p;
-  const C = qt(i), h = (y) => {
-    const { x: b, y: O } = e.getBoundingClientRect(), B = s.getAt(y.clientX - b, y.clientY - O, !1, p);
-    B && o.selection.evalSelectAction(B) !== Et.NONE ? r.current !== B.id && (e.classList.add("hovered"), r.set(B.id)) : r.current && (e.classList.remove("hovered"), r.set(null));
-  };
-  e.addEventListener("pointermove", h);
-  const T = J((y = !1) => requestAnimationFrame(() => {
-    const b = zt(e), { minX: O, minY: B, maxX: X, maxY: V } = b, K = p ? s.getIntersecting(O, B, X, V).filter(({ annotation: S }) => p(S)) : s.getIntersecting(O, B, X, V), st = n.selected.map(({ id: S }) => S), g = K.map(({ annotation: S, rects: M }) => {
-      const U = st.includes(S.id), I = S.id === r.current;
-      return {
-        annotation: S,
-        rects: M,
-        state: { selected: U, hovered: I }
-      };
-    });
-    t.redraw(g, b, d, f, y), setTimeout(() => {
-      C(K.map(({ annotation: S }) => S)), c.emit("onRedraw");
-    }, 1);
-  }), 10), u = (y, b) => {
-    b ? y ? f.set(b, y) : f.delete(b) : d = y, T(!0);
-  }, L = (y) => {
-    p = y, T(!1);
-  }, x = (y, b) => c.on(y, b), v = () => {
-    T();
-  };
-  s.observe(v);
-  const m = n.subscribe(() => {
-    T();
-  }), E = r.subscribe(() => {
-    T();
-  }), w = () => {
-    T(!0);
-  };
-  document.addEventListener("scroll", w, { capture: !0, passive: !0 });
-  const a = J(() => {
-    s.recalculatePositions(), T();
-  }, 10);
-  window.addEventListener("resize", a);
-  const l = new ResizeObserver(a);
-  l.observe(e);
-  const A = { attributes: !0, childList: !0, subtree: !0 }, R = new MutationObserver(J((y) => {
-    y.every((O) => O.target === e || e.contains(O.target)) || T(!0);
-  }, 150));
-  return R.observe(document.body, A), {
-    destroy: () => {
-      e.removeEventListener("pointermove", h), t.destroy(), s.unobserve(v), m(), E(), document.removeEventListener("scroll", w), window.removeEventListener("resize", a), l.disconnect(), R.disconnect();
-    },
-    on: x,
-    redraw: T,
-    setStyle: u,
-    setFilter: L,
-    setVisible: t.setVisible.bind(t)
-  };
-}, P = {
-  fill: "rgb(0, 128, 255)",
-  fillOpacity: 0.18
-}, ot = {
-  fill: "rgb(0, 128, 255)",
-  fillOpacity: 0.45
-}, Vt = (t) => t?.fillOpacity !== void 0 ? et(t?.fill || P.fill).alpha(t.fillOpacity).toHex() : t?.fill ? t.fill : et(P.fill).alpha(P.fillOpacity).toHex(), mt = (t, e, o) => e ? typeof e == "function" ? e(t.annotation, t.state, o) || (t.state?.selected ? ot : P) : e : t.state?.selected ? ot : P, zt = (t) => {
-  const { top: e, left: o } = t.getBoundingClientRect(), { innerWidth: i, innerHeight: s } = window, n = -o, r = -e, c = i - o, d = s - e;
-  return { top: e, left: o, minX: n, minY: r, maxX: c, maxY: d };
-}, qt = (t) => {
-  let e = /* @__PURE__ */ new Set();
-  return (i) => {
-    const s = i.map((n) => n.id);
-    (e.size !== s.length || s.some((n) => !e.has(n))) && t.set(s), e = new Set(s);
-  };
-}, jt = (t, e, o = 10, i) => {
+}, rt = new Intl.Segmenter(void 0, { granularity: "grapheme" }), Yt = (t, e, o = 10, i) => {
   const s = i ? t.startContainer.parentElement.closest(i) : e, n = document.createRange();
   n.setStart(s, 0), n.setEnd(t.startContainer, t.startOffset);
-  const r = nt(n).textContent, c = document.createRange();
-  c.setStart(t.endContainer, t.endOffset), s === document.body ? c.setEnd(s, s.childNodes.length) : c.setEndAfter(s);
-  const d = nt(c).textContent;
+  const r = nt(n).textContent, a = document.createRange();
+  a.setStart(t.endContainer, t.endOffset), s === document.body ? a.setEnd(s, s.childNodes.length) : a.setEndAfter(s);
+  const d = nt(a).textContent, g = [...rt.segment(r)], m = [...rt.segment(d)];
   return {
-    prefix: r.substring(r.length - o),
-    suffix: d.substring(0, o)
+    prefix: g.slice(-o).map((b) => b.segment).join(""),
+    suffix: m.slice(0, o).map((b) => b.segment).join("")
   };
-}, Gt = (t, e, o) => {
+}, Wt = (t, e, o) => {
   const i = document.createRange(), s = o ? t.startContainer.parentElement.closest(o) : e;
   i.setStart(s, 0), i.setEnd(t.startContainer, t.startOffset);
-  const n = nt(i).textContent, r = t.toString(), c = n.length || 0, d = c + r.length;
-  return o ? { quote: r, start: c, end: d, range: t, offsetReference: s } : { quote: r, start: c, end: d, range: t };
+  const n = nt(i).textContent, r = t.toString(), a = n.length || 0, d = a + r.length;
+  return o ? { quote: r, start: a, end: d, range: t, offsetReference: s } : { quote: r, start: a, end: d, range: t };
 }, D = (t) => t.every((e) => e.range instanceof Range && !e.range.collapsed), pt = (t, e) => {
   const { start: o, end: i } = t, s = t.offsetReference || e, n = document.createNodeIterator(
     e,
     NodeFilter.SHOW_TEXT,
-    (p) => p.parentElement?.closest($) ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT
+    (m) => m.parentElement?.closest(Y) ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT
   );
   let r = 0;
-  const c = document.createRange();
+  const a = document.createRange();
   let d = n.nextNode();
   d === null && console.error("Could not revive annotation target. Content missing.");
-  let f = !s;
+  let g = !s;
   for (; d !== null; ) {
-    if (f ||= typeof s?.contains == "function" ? s.contains(d) : !1, f) {
-      const p = d.textContent?.length || 0;
-      if (r + p > o) {
-        c.setStart(d, o - r);
+    if (g ||= typeof s?.contains == "function" ? s.contains(d) : !1, g) {
+      const m = d.textContent?.length || 0;
+      if (r + m > o) {
+        a.setStart(d, o - r);
         break;
       }
-      r += p;
+      r += m;
     }
     d = n.nextNode();
   }
   for (; d !== null; ) {
-    const p = d.textContent?.length || 0;
-    if (r + p >= i) {
-      c.setEnd(d, i - r);
+    const m = d.textContent?.length || 0;
+    if (r + m >= i) {
+      a.setEnd(d, i - r);
       break;
     }
-    r += p, d = n.nextNode();
+    r += m, d = n.nextNode();
   }
   return {
     ...t,
-    range: c
+    range: a
   };
 }, Q = (t, e) => D(t.selector) ? t : {
   ...t,
   selector: t.selector.map((o) => o.range instanceof Range && !o.range.collapsed ? o : pt(o, e))
-}, tt = (t, e) => D(t.target.selector) ? t : { ...t, target: Q(t.target, e) }, ht = (t) => {
+}, Z = (t, e) => D(t.target.selector) ? t : { ...t, target: Q(t.target, e) }, ht = (t) => {
   if (!t)
     return document.scrollingElement;
   const { overflowY: e } = window.getComputedStyle(t);
   return e !== "visible" && e !== "hidden" && t.scrollHeight > t.clientHeight ? t : ht(t.parentElement);
-}, rt = (t, e, o) => {
-  const i = o.getBoundingClientRect(), s = o.clientHeight, n = o.clientWidth, r = e.selector[0].range.getBoundingClientRect(), { width: c, height: d } = t.getAnnotationBounds(e.annotation), f = r.top - i.top, p = r.left - i.left, C = o.parentElement ? o.scrollTop : 0, h = o.parentElement ? o.scrollLeft : 0, T = f + C - (s - d) / 2, u = p + h - (n - c) / 2;
+}, it = (t, e, o) => {
+  const i = o.getBoundingClientRect(), s = o.clientHeight, n = o.clientWidth, r = e.selector[0].range.getBoundingClientRect(), { width: a, height: d } = t.getAnnotationBounds(e.annotation), g = r.top - i.top, m = r.left - i.left, b = o.parentElement ? o.scrollTop : 0, h = o.parentElement ? o.scrollLeft : 0, T = g + b - (s - d) / 2, u = m + h - (n - a) / 2;
   o.scroll({ top: T, left: u, behavior: "smooth" });
-}, Qt = (t, e) => (o, i) => {
+}, Xt = (t, e) => (o, i) => {
   const s = typeof o == "string" ? o : o.id, n = i ? typeof i == "string" ? document.getElementById(i) : i : ht(t);
   if (!n)
     return console.warn(`The scroll parent is missing for the annotation: ${s}`, { container: t }), !1;
   const r = e.getAnnotation(s);
   if (!r)
     return console.warn(`The annotation is missing in the store: ${s}`), !1;
-  const { range: c } = r.target.selector[0];
-  if (c && !c.collapsed)
-    return rt(e, r.target, n), !0;
-  const d = Q(r.target, t), { range: f } = d.selector[0];
-  return f && !f.collapsed ? (rt(e, d, n), !0) : !1;
-}, ke = (t, e) => ({
-  parse: (o) => te(o),
-  serialize: (o) => ee(o, t, e)
-}), Zt = (t) => t.quote !== void 0 && t.start !== void 0 && t.end !== void 0, Jt = (t) => {
+  const { range: a } = r.target.selector[0];
+  if (a && !a.collapsed)
+    return it(e, r.target, n), !0;
+  const d = Q(r.target, t), { range: g } = d.selector[0];
+  return g && !g.collapsed ? (it(e, d, n), !0) : !1;
+}, xe = (t, e) => ({
+  parse: (o) => jt(o),
+  serialize: (o) => qt(o, t, e)
+}), Vt = (t) => t.quote !== void 0 && t.start !== void 0 && t.end !== void 0, zt = (t) => {
   const {
     id: e,
     creator: o,
@@ -259,8 +135,8 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
   } = t, r = Array.isArray(n) ? n : [n];
   if (r.length === 0)
     return { error: Error(`No targets found for annotation: ${t.id}`) };
-  const c = {
-    creator: At(o),
+  const a = {
+    creator: Tt(o),
     created: i ? new Date(i) : void 0,
     updated: s ? new Date(s) : void 0,
     annotation: e,
@@ -269,66 +145,66 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
     styleClass: "styleClass" in r[0] ? r[0].styleClass : void 0
   };
   for (const d of r) {
-    const p = (Array.isArray(d.selector) ? d.selector : [d.selector]).reduce((C, h) => {
+    const m = (Array.isArray(d.selector) ? d.selector : [d.selector]).reduce((b, h) => {
       switch (h.type) {
         case "TextQuoteSelector":
-          C.quote = h.exact;
+          b.quote = h.exact;
           break;
         case "TextPositionSelector":
-          C.start = h.start, C.end = h.end;
+          b.start = h.start, b.end = h.end;
           break;
       }
-      return C;
+      return b;
     }, {});
-    if (Zt(p))
-      c.selector.push(
+    if (Vt(m))
+      a.selector.push(
         {
-          ...p,
+          ...m,
           id: d.id,
           // @ts-expect-error: `scope` is not part of the core `TextSelector` type
           scope: d.scope
         }
       );
     else {
-      const C = [
-        p.start ? void 0 : "TextPositionSelector",
-        p.quote ? void 0 : "TextQuoteSelector"
+      const b = [
+        m.start ? void 0 : "TextPositionSelector",
+        m.quote ? void 0 : "TextQuoteSelector"
       ].filter(Boolean);
-      return { error: Error(`Missing selector types: ${C.join(" and ")} for annotation: ${t.id}`) };
+      return { error: Error(`Missing selector types: ${b.join(" and ")} for annotation: ${t.id}`) };
     }
   }
-  return { parsed: c };
-}, te = (t) => {
+  return { parsed: a };
+}, jt = (t) => {
   const e = t.id || lt(), {
     creator: o,
     created: i,
     modified: s,
     body: n,
     ...r
-  } = t, c = Ct(n, e), d = Jt(t);
+  } = t, a = Ct(n, e), d = zt(t);
   return "error" in d ? { error: d.error } : {
     parsed: {
       ...r,
       id: e,
-      bodies: c,
+      bodies: a,
       target: d.parsed
     }
   };
-}, ee = (t, e, o) => {
+}, qt = (t, e, o) => {
   const { bodies: i, target: s, ...n } = t, {
     selector: r,
-    creator: c,
+    creator: a,
     created: d,
-    updated: f,
-    ...p
-  } = s, C = r.map((h) => {
-    const { id: T, quote: u, start: L, end: x, range: v } = h, m = {
+    updated: g,
+    ...m
+  } = s, b = r.map((h) => {
+    const { id: T, quote: u, start: L, end: x, range: v } = h, p = {
       type: "TextQuoteSelector",
       exact: u
     };
     if (o) {
-      const { prefix: w, suffix: a } = jt(v, o);
-      m.prefix = w, m.suffix = a;
+      const { prefix: w, suffix: c } = Yt(v, o);
+      p.prefix = w, p.suffix = c;
     }
     const E = {
       type: "TextPositionSelector",
@@ -336,12 +212,12 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
       end: x
     };
     return {
-      ...p,
+      ...m,
       id: T,
       // @ts-expect-error: `scope` is not part of the core `TextSelector` type
       scope: "scope" in h ? h.scope : void 0,
       source: e,
-      selector: [m, E]
+      selector: [p, E]
     };
   });
   return {
@@ -349,16 +225,129 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
     "@context": "http://www.w3.org/ns/anno.jsonld",
     id: t.id,
     type: "Annotation",
-    body: bt(t.bodies),
-    creator: c,
+    body: At(t.bodies),
+    creator: a,
     created: d?.toISOString(),
-    modified: f?.toISOString(),
-    target: C
+    modified: g?.toISOString(),
+    target: b
   };
-}, ne = (t, e) => {
-  const o = (n, r) => n.x <= r.x + r.width && n.x + n.width >= r.x && n.y <= r.y + r.height && n.y + n.height >= r.y, i = (n) => n.rects.reduce((r, c) => r + c.width, 0), s = e.filter(({ rects: n }) => n.some((r) => o(t, r)));
+}, Gt = (t) => t.addEventListener("click", (e) => {
+  // Allow clicks within not-annotatable elements
+  !e.target.closest(Y) && !e.target.closest("a") && e.preventDefault();
+}), J = (t) => ({
+  ...t,
+  type: t.type,
+  x: t.x,
+  y: t.y,
+  clientX: t.clientX,
+  clientY: t.clientY,
+  offsetX: t.offsetX,
+  offsetY: t.offsetY,
+  screenX: t.screenX,
+  screenY: t.screenY,
+  isPrimary: t.isPrimary,
+  altKey: t.altKey,
+  ctrlKey: t.ctrlKey,
+  metaKey: t.metaKey,
+  shiftKey: t.shiftKey,
+  button: t.button,
+  buttons: t.buttons,
+  currentTarget: t.currentTarget,
+  target: t.target,
+  defaultPrevented: t.defaultPrevented,
+  detail: t.detail,
+  eventPhase: t.eventPhase,
+  pointerId: t.pointerId,
+  pointerType: t.pointerType,
+  timeStamp: t.timeStamp
+}), G = (t) => ({
+  ...t,
+  type: t.type,
+  key: t.key,
+  code: t.code,
+  location: t.location,
+  repeat: t.repeat,
+  altKey: t.altKey,
+  ctrlKey: t.ctrlKey,
+  metaKey: t.metaKey,
+  shiftKey: t.shiftKey,
+  currentTarget: t.currentTarget,
+  target: t.target,
+  defaultPrevented: t.defaultPrevented,
+  detail: t.detail,
+  timeStamp: t.timeStamp
+}), tt = (t, e = 10) => {
+  let o;
+  return ((...i) => {
+    clearTimeout(o), o = setTimeout(() => t.apply(void 0, i), e);
+  });
+}, yt = (t, e, o, i) => {
+  const { store: s, selection: n, hover: r } = o, a = dt();
+  let d;
+  const g = /* @__PURE__ */ new Map();
+  let m;
+  const b = ae(i), h = (y) => {
+    const { x: C, y: O } = e.getBoundingClientRect(), B = s.getAt(y.clientX - C, y.clientY - O, !1, m);
+    B && o.selection.evalSelectAction(B) !== Rt.NONE ? r.current !== B.id && (e.classList.add("hovered"), r.set(B.id)) : r.current && (e.classList.remove("hovered"), r.set(null));
+  };
+  e.addEventListener("pointermove", h);
+  const T = tt((y = !1) => requestAnimationFrame(() => {
+    const C = ie(e), { minX: O, minY: B, maxX: V, maxY: z } = C, K = m ? s.getIntersecting(O, B, V, z).filter(({ annotation: S }) => m(S)) : s.getIntersecting(O, B, V, z), st = n.selected.map(({ id: S }) => S), f = K.map(({ annotation: S, rects: M }) => {
+      const U = st.includes(S.id), I = S.id === r.current;
+      return {
+        annotation: S,
+        rects: M,
+        state: { selected: U, hovered: I }
+      };
+    });
+    t.redraw(f, C, d, g, y), setTimeout(() => {
+      b(K.map(({ annotation: S }) => S)), a.emit("onRedraw");
+    }, 1);
+  }), 10), u = (y, C) => {
+    C ? y ? g.set(C, y) : g.delete(C) : d = y, T(!0);
+  }, L = (y) => {
+    m = y, T(!1);
+  }, x = (y, C) => a.on(y, C), v = () => {
+    T();
+  };
+  s.observe(v);
+  const p = n.subscribe(() => {
+    T();
+  }), E = r.subscribe(() => {
+    T();
+  }), w = () => {
+    T(!0);
+  };
+  document.addEventListener("scroll", w, { capture: !0, passive: !0 });
+  const c = tt(() => {
+    s.recalculatePositions(), T();
+  }, 10);
+  window.addEventListener("resize", c);
+  const l = new ResizeObserver(c);
+  l.observe(e);
+  const A = { attributes: !0, childList: !0, subtree: !0 }, R = new MutationObserver(tt((y) => {
+    y.every((O) => O.target === e || e.contains(O.target)) || T(!0);
+  }, 150));
+  return R.observe(document.body, A), {
+    destroy: () => {
+      e.removeEventListener("pointermove", h), t.destroy(), s.unobserve(v), p(), E(), document.removeEventListener("scroll", w), window.removeEventListener("resize", c), l.disconnect(), R.disconnect();
+    },
+    on: x,
+    redraw: T,
+    setStyle: u,
+    setFilter: L,
+    setVisible: t.setVisible.bind(t)
+  };
+}, P = {
+  fill: "rgb(0, 128, 255)",
+  fillOpacity: 0.18
+}, ot = {
+  fill: "rgb(0, 128, 255)",
+  fillOpacity: 0.45
+}, Qt = (t) => t?.fillOpacity !== void 0 ? et(t?.fill || P.fill).alpha(t.fillOpacity).toHex() : t?.fill ? t.fill : et(P.fill).alpha(P.fillOpacity).toHex(), St = (t, e, o) => e ? typeof e == "function" ? e(t.annotation, t.state, o) || (t.state?.selected ? ot : P) : e : t.state?.selected ? ot : P, Zt = (t, e) => {
+  const o = (n, r) => n.x <= r.x + r.width && n.x + n.width >= r.x && n.y <= r.y + r.height && n.y + n.height >= r.y, i = (n) => n.rects.reduce((r, a) => r + a.width, 0), s = e.filter(({ rects: n }) => n.some((r) => o(t, r)));
   return s.sort((n, r) => i(r) - i(n)), s.findIndex((n) => n.rects.includes(t));
-}, oe = (t) => {
+}, Jt = (t) => {
   const e = [], o = document.createNodeIterator(
     t.commonAncestorContainer,
     NodeFilter.SHOW_TEXT
@@ -373,28 +362,28 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
     if (r.selectNode(s), t.startContainer.nodeType === Node.TEXT_NODE)
       r.setStart(s, t.startOffset);
     else {
-      const f = t.startContainer.childNodes[t.startOffset];
-      f ? r.setStartBefore(f) : r.setStartAfter(t.startContainer);
+      const g = t.startContainer.childNodes[t.startOffset];
+      g ? r.setStartBefore(g) : r.setStartAfter(t.startContainer);
     }
-    const c = document.createRange();
-    if (c.selectNode(n), t.endContainer.nodeType === Node.TEXT_NODE)
-      c.setEnd(n, t.endOffset);
+    const a = document.createRange();
+    if (a.selectNode(n), t.endContainer.nodeType === Node.TEXT_NODE)
+      a.setEnd(n, t.endOffset);
     else {
-      const f = t.endContainer.childNodes[t.endOffset];
-      f ? c.setEndBefore(f) : c.setEndAfter(t.endContainer);
+      const g = t.endContainer.childNodes[t.endOffset];
+      g ? a.setEndBefore(g) : a.setEndAfter(t.endContainer);
     }
-    const d = (f) => {
-      const p = document.createRange();
-      return p.selectNode(f), Array.from(p.getClientRects());
+    const d = (g) => {
+      const m = document.createRange();
+      return m.selectNode(g), Array.from(m.getClientRects());
     };
     return [
       ...Array.from(r.getClientRects()),
       ...e.slice(1, -1).flatMap(d),
-      ...Array.from(c.getClientRects())
+      ...Array.from(a.getClientRects())
     ];
   }
-}, se = (t, e, o, i) => {
-  const s = (c) => Math.round(c * 10) / 10, n = {
+}, te = (t, e, o, i) => {
+  const s = (a) => Math.round(a * 10) / 10, n = {
     top: s(t.top),
     bottom: s(t.bottom),
     left: s(t.left),
@@ -417,200 +406,235 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
       return "block-contains";
   } else if (n.top >= r.top && n.bottom <= r.bottom && n.left >= r.left && n.right <= r.right)
     return "block-is-contained";
-}, re = (t, e) => {
+}, ee = (t, e) => {
   const o = Math.min(t.left, e.left), i = Math.max(t.right, e.right), s = Math.min(t.top, e.top), n = Math.max(t.bottom, e.bottom);
   return new DOMRect(o, s, i - o, n - s);
-}, ie = (t, e = 0.5, o = 0.5) => t.reduce((i, s) => {
+}, ne = (t, e = 0.5, o = 0.5) => t.reduce((i, s) => {
   if (s.width === 0 || s.height === 0)
     return i;
   let n = [...i], r = !1;
-  for (const c of i) {
-    const d = se(s, c, e, o);
+  for (const a of i) {
+    const d = te(s, a, e, o);
     if (d === "inline-adjacent") {
-      n = n.map((f) => f === c ? re(s, c) : f), r = !0;
+      n = n.map((g) => g === a ? ee(s, a) : g), r = !0;
       break;
     } else if (d === "inline-contains") {
-      n = n.map((f) => f === c ? s : f), r = !0;
+      n = n.map((g) => g === a ? s : g), r = !0;
       break;
     } else if (d === "inline-is-contained") {
       r = !0;
       break;
     } else if (d === "block-contains" || d === "block-is-contained") {
-      s.width < c.width && (n = n.map((f) => f === c ? s : f)), s.width === c.width && s.height < c.width && (n = n.map((f) => f === c ? s : f)), r = !0;
+      s.width < a.width && (n = n.map((g) => g === a ? s : g)), s.width === a.width && s.height < a.width && (n = n.map((g) => g === a ? s : g)), r = !0;
       break;
     }
   }
   return r ? n : [...n, s];
-}, []), Me = (t) => ({
+}, []), Le = (t) => ({
   length: t.length,
   item: (e) => t[e],
   [Symbol.iterator]: function* () {
     for (let e = 0; e < this.length; e++)
       yield this.item(e);
   }
-}), ce = (t, e) => {
+}), oe = (t, e) => {
   const { left: o, top: i, right: s, bottom: n } = t;
   return new DOMRect(o - e.left, i - e.top, s - o, n - i);
-}, Be = (t, e) => {
+}, Ne = (t, e) => {
   const { left: o, top: i, right: s, bottom: n } = t;
   return new DOMRect(o + e.left, i + e.top, s - o, n - i);
-}, ae = (t, e, o, i) => {
-  const s = new Bt(), n = /* @__PURE__ */ new Map(), r = at(), c = (a, l) => {
-    const A = a.selector.flatMap((N) => {
+}, se = (t) => {
+  t.classList.add("r6o-annotatable");
+  const e = document.createElement("div");
+  e.className = "r6o-span-highlight-layer", t.appendChild(e);
+  let o = [];
+  return {
+    destroy: () => {
+      e.remove();
+    },
+    redraw: (r, a, d, g, m) => {
+      if (!(!Bt(o, r) || m)) return;
+      e.innerHTML = "", [...r].sort((u, L) => {
+        const { annotation: { target: { created: x } } } = u, { annotation: { target: { created: v } } } = L;
+        return x && v ? x.getTime() - v.getTime() : 0;
+      }).forEach((u) => {
+        const L = g.get(u.annotation.id) || d;
+        u.rects.map((x) => {
+          const v = Zt(x, r), p = St(u, L, v), E = document.createElement("span");
+          E.className = "r6o-annotation", E.dataset.annotation = u.annotation.id, E.style.left = `${x.x}px`, E.style.top = `${x.y}px`, E.style.width = `${x.width}px`, E.style.height = `${x.height}px`, E.style.backgroundColor = Qt(p), p.underlineStyle && (E.style.borderStyle = p.underlineStyle), p.underlineColor && (E.style.borderColor = p.underlineColor), p.underlineThickness && (E.style.borderBottomWidth = `${p.underlineThickness}px`), p.underlineOffset && (E.style.paddingBottom = `${p.underlineOffset}px`), e.appendChild(E);
+        });
+      }), o = r;
+    },
+    setVisible: (r) => {
+      r ? e.classList.remove("hidden") : e.classList.add("hidden");
+    }
+  };
+}, re = (t, e, o) => yt(se(t), t, e, o), ie = (t) => {
+  const { top: e, left: o } = t.getBoundingClientRect(), { innerWidth: i, innerHeight: s } = window, n = -o, r = -e, a = i - o, d = s - e;
+  return { top: e, left: o, minX: n, minY: r, maxX: a, maxY: d };
+}, ae = (t) => {
+  let e = /* @__PURE__ */ new Set();
+  return (i) => {
+    const s = i.map((n) => n.id);
+    (e.size !== s.length || s.some((n) => !e.has(n))) && t.set(s), e = new Set(s);
+  };
+}, ce = (t, e, o, i) => {
+  const s = new It(), n = /* @__PURE__ */ new Map(), r = dt(), a = (c, l) => {
+    const A = c.selector.flatMap((N) => {
       const y = D([N]) ? N.range : pt(N, e).range;
-      return oe(y);
-    }), R = ie(A, o, i).map((N) => ce(N, l));
+      return Jt(y);
+    }), R = ne(A, o, i).map((N) => oe(N, l));
     return R.map((N) => {
-      const { x: y, y: b, width: O, height: B } = N;
+      const { x: y, y: C, width: O, height: B } = N;
       return {
         minX: y,
-        minY: b,
+        minY: C,
         maxX: y + O,
-        maxY: b + B,
+        maxY: C + B,
         annotation: {
-          id: a.annotation,
+          id: c.annotation,
           rects: R
         }
       };
     });
-  }, d = () => [...n.values()], f = () => {
+  }, d = () => [...n.values()], g = () => {
     s.clear(), n.clear();
-  }, p = (a) => {
-    const l = c(a, e.getBoundingClientRect());
-    l.length !== 0 && (l.forEach((A) => s.insert(A)), n.set(a.annotation, l));
-  }, C = (a) => {
-    const l = n.get(a.annotation);
-    l && (l.forEach((A) => s.remove(A)), n.delete(a.annotation));
-  }, h = (a) => {
-    C(a), p(a);
-  }, T = (a, l = !0) => {
-    l && f();
-    const A = e.getBoundingClientRect(), R = a.map((y) => ({ target: y, rects: c(y, A) }));
-    R.forEach(({ target: y, rects: b }) => {
-      b.length > 0 && n.set(y.annotation, b);
+  }, m = (c) => {
+    const l = a(c, e.getBoundingClientRect());
+    l.length !== 0 && (l.forEach((A) => s.insert(A)), n.set(c.annotation, l));
+  }, b = (c) => {
+    const l = n.get(c.annotation);
+    l && (l.forEach((A) => s.remove(A)), n.delete(c.annotation));
+  }, h = (c) => {
+    b(c), m(c);
+  }, T = (c, l = !0) => {
+    l && g();
+    const A = e.getBoundingClientRect(), R = c.map((y) => ({ target: y, rects: a(y, A) }));
+    R.forEach(({ target: y, rects: C }) => {
+      C.length > 0 && n.set(y.annotation, C);
     });
     const N = R.flatMap(({ rects: y }) => y);
     s.load(N);
-  }, u = (a, l, A = !1) => {
+  }, u = (c, l, A = !1) => {
     const R = s.search({
-      minX: a,
+      minX: c,
       minY: l,
-      maxX: a,
+      maxX: c,
       maxY: l
-    }), N = (y) => y.annotation.rects.reduce((b, O) => b + O.width * O.height, 0);
-    return R.length > 0 ? (R.sort((y, b) => N(y) - N(b)), A ? R.map((y) => y.annotation.id) : [R[0].annotation.id]) : [];
-  }, L = (a) => {
-    const l = x(a);
+    }), N = (y) => y.annotation.rects.reduce((C, O) => C + O.width * O.height, 0);
+    return R.length > 0 ? (R.sort((y, C) => N(y) - N(C)), A ? R.map((y) => y.annotation.id) : [R[0].annotation.id]) : [];
+  }, L = (c) => {
+    const l = x(c);
     if (l.length === 0)
       return;
     let A = l[0].left, R = l[0].top, N = l[0].right, y = l[0].bottom;
-    for (let b = 1; b < l.length; b++) {
-      const O = l[b];
+    for (let C = 1; C < l.length; C++) {
+      const O = l[C];
       A = Math.min(A, O.left), R = Math.min(R, O.top), N = Math.max(N, O.right), y = Math.max(y, O.bottom);
     }
     return new DOMRect(A, R, N - A, y - R);
-  }, x = (a) => {
-    const l = n.get(a);
+  }, x = (c) => {
+    const l = n.get(c);
     return l ? l[0].annotation.rects : [];
   };
   return {
     all: d,
-    clear: f,
+    clear: g,
     getAt: u,
     getAnnotationBounds: L,
     getAnnotationRects: x,
-    getIntersecting: (a, l, A, R) => {
-      const N = s.search({ minX: a, minY: l, maxX: A, maxY: R }), y = new Set(N.map((b) => b.annotation.id));
-      return Array.from(y).map((b) => ({
-        annotation: t.getAnnotation(b),
-        rects: x(b)
-      })).filter((b) => !!b.annotation);
+    getIntersecting: (c, l, A, R) => {
+      const N = s.search({ minX: c, minY: l, maxX: A, maxY: R }), y = new Set(N.map((C) => C.annotation.id));
+      return Array.from(y).map((C) => ({
+        annotation: t.getAnnotation(C),
+        rects: x(C)
+      })).filter((C) => !!C.annotation);
     },
-    insert: p,
+    insert: m,
     recalculate: () => {
-      T(t.all().map((a) => a.target), !0), r.emit("recalculate");
+      T(t.all().map((c) => c.target), !0), r.emit("recalculate");
     },
-    remove: C,
+    remove: b,
     set: T,
     size: () => s.all().length,
     update: h,
-    on: (a, l) => r.on(a, l)
+    on: (c, l) => r.on(c, l)
   };
 }, le = (t, e) => {
-  const o = Tt(), i = ae(o, t, e.mergeHighlights?.horizontalTolerance, e.mergeHighlights?.verticalTolerance), s = Rt(o, e.userSelectAction, e.adapter), n = vt(o), r = wt(), c = (m, E = F.LOCAL) => {
-    const w = tt(m, t), a = D(w.target.selector);
-    return a && o.addAnnotation(w, E), a;
-  }, d = (m, E = !0, w = F.LOCAL) => {
-    const a = m.map((A) => tt(A, t)), l = a.filter((A) => !D(A.target.selector));
-    return o.bulkAddAnnotations(a, E, w), l;
-  }, f = (m, E = F.LOCAL) => {
-    const w = m.map((l) => tt(l, t)), a = w.filter((l) => !D(l.target.selector));
+  const o = vt(), i = ce(o, t, e.mergeHighlights?.horizontalTolerance, e.mergeHighlights?.verticalTolerance), s = wt(o, e.userSelectAction, e.adapter), n = xt(o), r = Lt(), a = (p, E = F.LOCAL) => {
+    const w = Z(p, t), c = D(w.target.selector);
+    return c && o.addAnnotation(w, E), c;
+  }, d = (p, E = !0, w = F.LOCAL) => {
+    const c = p.map((A) => Z(A, t)), l = c.filter((A) => !D(A.target.selector));
+    return o.bulkAddAnnotations(c, E, w), l;
+  }, g = (p, E = F.LOCAL) => {
+    const w = p.map((l) => Z(l, t)), c = w.filter((l) => !D(l.target.selector));
     return w.forEach((l) => {
       o.getAnnotation(l.id) ? o.updateAnnotation(l, E) : o.addAnnotation(l, E);
-    }), a;
-  }, p = (m, E = F.LOCAL) => {
-    const w = Q(m, t);
+    }), c;
+  }, m = (p, E = F.LOCAL) => {
+    const w = Q(p, t);
     o.updateTarget(w, E);
-  }, C = (m, E = F.LOCAL) => {
-    const w = m.map((a) => Q(a, t));
+  }, b = (p, E = F.LOCAL) => {
+    const w = p.map((c) => Q(c, t));
     o.bulkUpdateTargets(w, E);
   };
-  function h(m, E, w, a) {
-    const l = w || !!a, A = i.getAt(m, E, l).map((N) => o.getAnnotation(N)), R = a ? A.filter(a) : A;
+  function h(p, E, w, c) {
+    const l = w || !!c, A = i.getAt(p, E, l).map((N) => o.getAnnotation(N)), R = c ? A.filter(c) : A;
     if (R.length !== 0)
       return w ? R : R[0];
   }
-  const T = (m) => i.getAnnotationRects(m).length > 0 ? i.getAnnotationBounds(m) : void 0, u = (m, E, w, a) => i.getIntersecting(m, E, w, a), L = (m) => i.getAnnotationRects(m), x = () => i.recalculate(), v = (m) => i.on("recalculate", m);
-  return o.observe(({ changes: m }) => {
-    const E = (m.deleted || []).filter((l) => D(l.target.selector)), w = (m.created || []).filter((l) => D(l.target.selector)), a = (m.updated || []).filter((l) => D(l.newValue.target.selector));
-    E?.length > 0 && E.forEach((l) => i.remove(l.target)), w.length > 0 && i.set(w.map((l) => l.target), !1), a?.length > 0 && a.forEach(({ newValue: l }) => i.update(l.target));
+  const T = (p) => i.getAnnotationRects(p).length > 0 ? i.getAnnotationBounds(p) : void 0, u = (p, E, w, c) => i.getIntersecting(p, E, w, c), L = (p) => i.getAnnotationRects(p), x = () => i.recalculate(), v = (p) => i.on("recalculate", p);
+  return o.observe(({ changes: p }) => {
+    const E = (p.deleted || []).filter((l) => D(l.target.selector)), w = (p.created || []).filter((l) => D(l.target.selector)), c = (p.updated || []).filter((l) => D(l.newValue.target.selector));
+    E?.length > 0 && E.forEach((l) => i.remove(l.target)), w.length > 0 && i.set(w.map((l) => l.target), !1), c?.length > 0 && c.forEach(({ newValue: l }) => i.update(l.target));
   }), {
     store: {
       ...o,
-      addAnnotation: c,
+      addAnnotation: a,
       bulkAddAnnotations: d,
-      bulkUpdateTargets: C,
-      bulkUpsertAnnotations: f,
+      bulkUpdateTargets: b,
+      bulkUpsertAnnotations: g,
       getAnnotationBounds: T,
       getAnnotationRects: L,
       getIntersecting: u,
       getAt: h,
       recalculatePositions: x,
       onRecalculatePositions: v,
-      updateTarget: p
+      updateTarget: m
     },
     selection: s,
     hover: n,
     viewport: r
   };
-}, it = 300, yt = ["up", "down", "left", "right"], St = dt ? "⌘+a" : "ctrl+a", de = [
-  ...yt.map((t) => `shift+${t}`),
-  St
+}, at = 300, Et = ["up", "down", "left", "right"], bt = ut ? "⌘+a" : "ctrl+a", de = [
+  ...Et.map((t) => `shift+${t}`),
+  bt
 ], ue = (t, e, o, i) => {
   const { store: s, selection: n } = e;
   let r;
   const {
-    annotatingEnabled: c,
+    annotatingEnabled: a,
     offsetReferenceSelector: d,
-    selectionMode: f,
-    dismissOnNotAnnotatable: p = "NEVER"
+    selectionMode: g,
+    dismissOnNotAnnotatable: m = "NEVER"
   } = i;
-  let C, h = c, T = "CREATE_NEW", u, L, x, v;
-  const m = (g) => {
-    h = g, R.clear(), g || (L = void 0, u = void 0, x = void 0, v = void 0);
-  }, E = (g) => T = g || "CREATE_NEW", w = (g) => C = g, a = (g) => r = g, l = (g) => {
+  let b, h = a, T = "CREATE_NEW", u, L, x, v;
+  const p = (f) => {
+    h = f, R.clear(), f || (L = void 0, u = void 0, x = void 0, v = void 0);
+  }, E = (f) => T = f || "CREATE_NEW", w = (f) => b = f, c = (f) => r = f, l = (f) => {
     if (T === "ADD_TO_CURRENT")
       return !0;
     if (i.allowModifierSelect) {
-      const S = g;
-      return dt ? S.metaKey : S.ctrlKey;
+      const S = f;
+      return ut ? S.metaKey : S.ctrlKey;
     } else
       return !1;
   }, A = () => {
     if (!h || x === !1) return;
-    const { selected: g } = n;
-    if ((l(v) || T === "REPLACE_CURRENT") && g.length === 1 && g[0].editable) {
-      const M = s.getAnnotation(g[0].id);
+    const { selected: f } = n;
+    if ((l(v) || T === "REPLACE_CURRENT") && f.length === 1 && f[0].editable) {
+      const M = s.getAnnotation(f[0].id);
       if (M?.target) {
         L = M.target, u = {
           annotation: M.id,
@@ -629,147 +653,123 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
       created: /* @__PURE__ */ new Date(),
       creator: r
     };
-  }, R = It((g) => {
+  }, R = _t((f) => {
     if (!h) return;
     const S = document.getSelection();
     if (!S?.anchorNode) return;
     const M = Array.from(Array(S.rangeCount).keys()).map((k) => S.getRangeAt(k));
-    if (!M.some((k) => k.intersectsNode(t))) {
+    if (M.every((k) => !gt(t, k))) {
       u = void 0;
       return;
     }
-    const U = g.timeStamp - (v?.timeStamp || g.timeStamp);
-    if (v?.type === "pointerdown" && (U < 1e3 && !u || S.isCollapsed && U < it) && A(), u || A(), S.isCollapsed) {
+    const U = f.timeStamp - (v?.timeStamp || f.timeStamp);
+    if (v?.type === "pointerdown" && (U < 1e3 && !u || S.isCollapsed && U < at) && A(), !u && (A(), !u))
+      return;
+    if (S.isCollapsed) {
       s.getAnnotation(u.annotation) && !(l(v) || T === "REPLACE_CURRENT") && (n.clear(), s.deleteAnnotation(u.annotation));
       return;
     }
-    const I = M.map((k) => Wt(k, t));
-    if (I.every((k) => Ut(k))) return;
-    const _ = I.flatMap((k) => Yt(t, k.cloneRange()));
-    if (!(_.length > 0 && !u || _.length !== u.selector.length || _.some((k, Y) => k.toString() !== u.selector[Y]?.quote))) return;
-    const z = l(v) && L ? Kt([
+    const I = M.map((k) => $t(k, t));
+    if (I.every((k) => Ht(k))) return;
+    const _ = I.flatMap((k) => Ft(t, k.cloneRange()));
+    if (!(_.length > 0 && !u || _.length !== u.selector.length || _.some((k, W) => k.toString() !== u.selector[W]?.quote))) return;
+    const j = l(v) && L ? Pt([
       ...L.selector.map((k) => k.range),
       ..._
     ]) : _;
     u = {
       ...u,
-      selector: z.map((k) => Gt(k, t, d)),
+      selector: j.map((k) => Wt(k, t, d)),
       updated: /* @__PURE__ */ new Date()
     }, !(l(v) || T === "REPLACE_CURRENT") && (s.getAnnotation(u.annotation) ? s.updateTarget(u, F.LOCAL) : n.clear());
-  }, 10), N = (g) => {
-    v = Z(g), x = v.button === 0;
-  }, y = async (g) => {
+  }, 10), N = (f) => {
+    v = J(f), x = v.button === 0;
+  }, y = async (f) => {
     if (!x) return;
-    const S = Z(g), M = () => {
+    const S = J(f), M = () => {
       const { x: I, y: _ } = t.getBoundingClientRect();
-      if (G(t, S.target)) {
-        (typeof p == "function" ? p(S, t) : p === "ALWAYS") && n.clear();
+      if ($(t, S.target)) {
+        (typeof m == "function" ? m(S, t) : m === "ALWAYS") && n.clear();
         return;
       }
       const H = S.target instanceof Node && t.contains(S.target) && s.getAt(
         S.clientX - I,
         S.clientY - _,
-        f === "all",
-        C
+        g === "all",
+        b
       );
       if (H) {
-        const { selected: z } = n, k = new Set(z.map((W) => W.id)), Y = Array.isArray(H) ? H.map((W) => W.id) : [H.id];
-        (k.size !== Y.length || !Y.every((W) => k.has(W))) && (o.emit("clickAnnotation", H), n.userSelect(Y, S));
+        const { selected: j } = n, k = new Set(j.map((X) => X.id)), W = Array.isArray(H) ? H.map((X) => X.id) : [H.id];
+        (k.size !== W.length || !W.every((X) => k.has(X))) && (o.emit("clickAnnotation", H), n.userSelect(W, S));
       } else
         n.clear();
     };
-    if (S.timeStamp - v.timeStamp < it) {
-      await b();
-      const I = document.getSelection(), _ = G(t, v.target), H = G(t, S.target);
+    if (S.timeStamp - v.timeStamp < at) {
+      await C();
+      const I = document.getSelection(), _ = $(t, v.target), H = $(t, S.target);
       if (I?.isCollapsed || _ && H) {
         u = void 0, M();
         return;
       }
     }
     u && u.selector.length > 0 && (K(), n.userSelect(u.annotation, S));
-  }, b = async () => {
-    const g = document.getSelection();
-    let S = !1, M = g?.isCollapsed;
+  }, C = async () => {
+    const f = document.getSelection();
+    let S = !1, M = f?.isCollapsed;
     const U = () => M || S, I = 1;
-    return setTimeout(() => S = !0, 50), _t(() => M = g?.isCollapsed, I, U);
-  }, O = (g) => {
-    document.getSelection()?.isCollapsed || ((!u || u.selector.length === 0) && R(g), u && (K(), n.userSelect(u.annotation, Z(g))));
-  }, B = (g) => {
-    h && g.key === "Shift" && u && (document.getSelection().isCollapsed || (K(), n.userSelect(u.annotation, j(g))));
-  }, X = (g) => {
+    return setTimeout(() => S = !0, 50), Dt(() => M = f?.isCollapsed, I, U);
+  }, O = (f) => {
+    document.getSelection()?.isCollapsed || ((!u || u.selector.length === 0) && R(f), u && (K(), n.userSelect(u.annotation, J(f))));
+  }, B = (f) => {
+    h && (f.repeat || f.target instanceof Node && $(t, f.target) && f.target !== document.body || f.key === "Shift" && u && (document.getSelection().isCollapsed || (K(), n.userSelect(u.annotation, G(f)))));
+  }, V = (f) => {
     const S = () => setTimeout(() => {
       u?.selector.length > 0 && (n.clear(), s.addAnnotation({
         id: u.annotation,
         bodies: [],
         target: u
-      }), n.userSelect(u.annotation, j(g))), document.removeEventListener("selectionchange", S);
+      }), n.userSelect(u.annotation, G(f))), document.removeEventListener("selectionchange", S);
     }, 100);
     document.addEventListener("selectionchange", S), A();
   };
-  q(de.join(","), { element: t, keydown: !0, keyup: !1 }, (g) => {
-    g.repeat || (v = j(g));
-  }), q(St, { keydown: !0, keyup: !1 }, (g) => {
-    v = j(g), X(g);
+  q(de.join(","), { element: t, keydown: !0, keyup: !1 }, (f) => {
+    f.repeat || (v = G(f));
+  }), q(bt, { keydown: !0, keyup: !1 }, (f) => {
+    v = G(f), V(f);
   });
-  const V = (g) => {
-    g.repeat || g.target !== t && g.target !== document.body || (u = void 0, n.clear());
+  const z = (f) => {
+    f.repeat || f.target instanceof Node && $(t, f.target) && f.target !== document.body || (u = void 0, n.clear());
   };
-  q(yt.join(","), { keydown: !0, keyup: !1 }, V);
+  q(Et.join(","), { keydown: !0, keyup: !1 }, z);
   const K = () => {
-    const g = s.getAnnotation(u.annotation);
-    if (!g)
+    const f = s.getAnnotation(u.annotation);
+    if (!f)
       s.addAnnotation({
         id: u.annotation,
         bodies: [],
         target: u
       });
     else {
-      const { target: { updated: S } } = g, { updated: M } = u;
+      const { target: { updated: S } } = f, { updated: M } = u;
       (!S || !M || S < M) && s.updateTarget(u);
     }
   };
-  return document.addEventListener("pointerdown", N), document.addEventListener("pointerup", y), document.addEventListener("contextmenu", O), t.addEventListener("keyup", B), t.addEventListener("selectstart", A), document.addEventListener("selectionchange", R), {
+  return document.addEventListener("pointerdown", N), document.addEventListener("pointerup", y), document.addEventListener("contextmenu", O), document.addEventListener("keyup", B), t.addEventListener("selectstart", A), document.addEventListener("selectionchange", R), {
     destroy: () => {
-      u = void 0, L = void 0, x = void 0, v = void 0, R.clear(), document.removeEventListener("pointerdown", N), document.removeEventListener("pointerup", y), document.removeEventListener("contextmenu", O), t.removeEventListener("keyup", B), t.removeEventListener("selectstart", A), document.removeEventListener("selectionchange", R), q.unbind();
+      u = void 0, L = void 0, x = void 0, v = void 0, R.clear(), document.removeEventListener("pointerdown", N), document.removeEventListener("pointerup", y), document.removeEventListener("contextmenu", O), document.removeEventListener("keyup", B), t.removeEventListener("selectstart", A), document.removeEventListener("selectionchange", R), q.unbind();
     },
     setFilter: w,
-    setUser: a,
-    setAnnotatingEnabled: m,
+    setUser: c,
+    setAnnotatingEnabled: p,
     setAnnotatingMode: E
   };
-}, fe = (t) => {
-  t.classList.add("r6o-annotatable");
-  const e = document.createElement("div");
-  e.className = "r6o-span-highlight-layer", t.insertBefore(e, t.firstChild);
-  let o = [];
-  return {
-    destroy: () => {
-      e.remove();
-    },
-    redraw: (r, c, d, f, p) => {
-      if (!(!Dt(o, r) || p)) return;
-      e.innerHTML = "", [...r].sort((u, L) => {
-        const { annotation: { target: { created: x } } } = u, { annotation: { target: { created: v } } } = L;
-        return x && v ? x.getTime() - v.getTime() : 0;
-      }).forEach((u) => {
-        const L = f.get(u.annotation.id) || d;
-        u.rects.map((x) => {
-          const v = ne(x, r), m = mt(u, L, v), E = document.createElement("span");
-          E.className = "r6o-annotation", E.dataset.annotation = u.annotation.id, E.style.left = `${x.x}px`, E.style.top = `${x.y}px`, E.style.width = `${x.width}px`, E.style.height = `${x.height}px`, E.style.backgroundColor = Vt(m), m.underlineStyle && (E.style.borderStyle = m.underlineStyle), m.underlineColor && (E.style.borderColor = m.underlineColor), m.underlineThickness && (E.style.borderBottomWidth = `${m.underlineThickness}px`), m.underlineOffset && (E.style.paddingBottom = `${m.underlineOffset}px`), e.appendChild(E);
-        });
-      }), o = r;
-    },
-    setVisible: (r) => {
-      r ? e.classList.remove("hidden") : e.classList.add("hidden");
-    }
-  };
-}, ge = (t, e, o) => gt(fe(t), t, e, o), me = (t) => [
+}, fe = (t) => [
   `background-color:${et(t?.fill || P.fill).alpha(t?.fillOpacity === void 0 ? P.fillOpacity : t.fillOpacity).toHex()}`,
   t?.underlineThickness ? "text-decoration:underline" : void 0,
   t?.underlineColor ? `text-decoration-color:${t.underlineColor}` : void 0,
   t?.underlineOffset ? `text-underline-offset:${t.underlineOffset}px` : void 0,
   t?.underlineThickness ? `text-decoration-thickness:${t.underlineThickness}px` : void 0
-].filter(Boolean).join(";"), pe = () => {
+].filter(Boolean).join(";"), ge = () => {
   const t = document.createElement("style");
   document.getElementsByTagName("head")[0].appendChild(t);
   let e = /* @__PURE__ */ new Set();
@@ -780,119 +780,120 @@ const Ht = kt(), dt = Ht.os.is(Mt.MACOS), ut = "not-annotatable", $ = `.${ut}`,
     setVisible: (n) => {
       console.log("setVisible not implemented on CSS Custom Highlights renderer");
     },
-    redraw: (n, r, c, d, f) => {
-      const p = new Set(n.map((h) => h.annotation.id));
-      Array.from(e).filter((h) => !p.has(h));
-      const C = n.map((h) => {
-        c ? typeof c == "function" && c(h.annotation, h.state) : h.state?.selected;
-        const T = mt(h, c);
-        return `::highlight(_${h.annotation.id}) { ${me(T)} }`;
+    redraw: (n, r, a, d, g) => {
+      const m = new Set(n.map((h) => h.annotation.id));
+      Array.from(e).filter((h) => !m.has(h));
+      const b = n.map((h) => {
+        a ? typeof a == "function" && a(h.annotation, h.state) : h.state?.selected;
+        const T = St(h, a);
+        return `::highlight(_${h.annotation.id}) { ${fe(T)} }`;
       });
-      t.innerHTML = C.join(`
+      t.innerHTML = b.join(`
 `), CSS.highlights.clear(), n.forEach(({ annotation: h }) => {
         const T = h.target.selector.map((L) => L.range), u = new Highlight(...T);
         CSS.highlights.set(`_${h.id}`, u);
-      }), e = p;
+      }), e = m;
     }
   };
-}, he = (t, e, o) => gt(pe(), t, e, o), ye = (t, e) => ({
+}, me = (t, e, o) => yt(ge(), t, e, o), pe = (t, e) => ({
   ...t,
   annotatingEnabled: t.annotatingEnabled ?? e.annotatingEnabled,
   user: t.user || e.user
-}), ct = "SPANS", Ie = (t, e = {}) => {
-  Xt(t), Ft(t);
-  const o = ye(e, {
+}), ct = "SPANS", Oe = (t, e = {}) => {
+  Gt(t), Ut(t);
+  const o = pe(e, {
     annotatingEnabled: !0,
-    user: xt()
-  }), i = le(t, o), { selection: s, viewport: n } = i, r = i.store, c = Lt(r), d = Nt(i, c, o.adapter);
-  let f = o.user;
-  const p = typeof o.renderer != "function" ? o.renderer === "CSS_HIGHLIGHTS" ? CSS.highlights ? "CSS_HIGHLIGHTS" : ct : o.renderer || ct : null, C = p === null ? o.renderer(t, i, n) : p === "SPANS" ? ge(t, i, n) : p === "CSS_HIGHLIGHTS" ? he(t, i, n) : void 0;
-  if (!C)
+    user: Nt()
+  }), i = le(t, o), { selection: s, viewport: n } = i, r = i.store, a = Ot(r), d = kt(i, a, o.adapter);
+  let g = o.user;
+  const m = typeof o.renderer != "function" ? o.renderer === "CSS_HIGHLIGHTS" ? CSS.highlights ? "CSS_HIGHLIGHTS" : ct : o.renderer || ct : null, b = m === null ? o.renderer(t, i, n) : m === "SPANS" ? re(t, i, n) : m === "CSS_HIGHLIGHTS" ? me(t, i, n) : void 0;
+  if (!b)
     throw `Unknown renderer implementation: ${o.renderer}`;
-  console.debug(p ? `Using ${p} renderer` : "Using custom renderer implementation"), o.style && C.setStyle(o.style);
+  console.debug(m ? `Using ${m} renderer` : "Using custom renderer implementation"), o.style && b.setStyle(o.style);
   const h = ue(t, i, d, o);
-  h.setUser(f);
-  const T = Ot(i, c, o.adapter), u = () => f, L = (a) => {
+  h.setUser(g);
+  const T = Mt(i, a, o.adapter), u = () => g, L = (c) => {
     h.setAnnotatingEnabled(
-      a === void 0 ? !0 : a
+      c === void 0 ? !0 : c
     );
-  }, x = (a) => {
-    h.setAnnotatingMode(a);
-  }, v = (a) => {
-    C.setFilter(a), h.setFilter(a);
-  }, m = (a) => {
-    f = a, h.setUser(a);
-  }, E = (a) => {
-    a ? s.setSelected(a) : s.clear();
+  }, x = (c) => {
+    h.setAnnotatingMode(c);
+  }, v = (c) => {
+    b.setFilter(c), h.setFilter(c);
+  }, p = (c) => {
+    g = c, h.setUser(c);
+  }, E = (c) => {
+    c ? s.setSelected(c) : s.clear();
   };
   return {
     ...T,
     destroy: () => {
-      C.destroy(), h.destroy(), c.destroy();
+      b.destroy(), h.destroy(), a.destroy();
     },
     element: t,
     getUser: u,
-    renderer: C,
+    renderer: b,
     setAnnotatingEnabled: L,
     setAnnotatingMode: x,
     setFilter: v,
-    setStyle: C.setStyle.bind(C),
-    setUser: m,
+    setStyle: b.setStyle.bind(b),
+    setUser: p,
     setSelected: E,
-    setVisible: C.setVisible.bind(C),
+    setVisible: b.setVisible.bind(b),
     on: d.on,
     off: d.off,
-    scrollIntoView: Qt(t, r),
+    scrollIntoView: Xt(t, r),
     state: i
   };
 };
 export {
   ot as DEFAULT_SELECTED_STYLE,
   P as DEFAULT_STYLE,
-  ut as NOT_ANNOTATABLE_CLASS,
-  $ as NOT_ANNOTATABLE_SELECTOR,
-  He as Origin,
-  Pe as UserSelectAction,
-  ke as W3CTextFormat,
-  Xt as cancelSingleClickEvents,
-  j as cloneKeyboardEvent,
-  Z as clonePointerEvent,
-  mt as computeStyle,
-  ne as computeZIndex,
-  Ue as createBody,
-  gt as createRenderer,
+  ft as NOT_ANNOTATABLE_CLASS,
+  Y as NOT_ANNOTATABLE_SELECTOR,
+  Be as Origin,
+  Ie as UserSelectAction,
+  xe as W3CTextFormat,
+  Gt as cancelSingleClickEvents,
+  G as cloneKeyboardEvent,
+  J as clonePointerEvent,
+  St as computeStyle,
+  Zt as computeZIndex,
+  _e as createBody,
+  yt as createRenderer,
   ue as createSelectionHandler,
-  Ie as createTextAnnotator,
+  re as createSpansRenderer,
+  Oe as createTextAnnotator,
   le as createTextAnnotatorState,
-  J as debounce,
-  ye as fillDefaults,
-  Vt as getBackgroundColor,
-  oe as getHighlightClientRects,
-  jt as getQuoteContext,
+  tt as debounce,
+  pe as fillDefaults,
+  Qt as getBackgroundColor,
+  Jt as getHighlightClientRects,
+  Yt as getQuoteContext,
   nt as getRangeAnnotatableContents,
-  zt as getViewportBounds,
-  dt as isMac,
-  Oe as isNodeWhitespaceOrEmpty,
-  G as isNotAnnotatable,
-  Pt as isRangeAnnotatable,
-  Ut as isRangeWhitespaceOrEmpty,
+  ie as getViewportBounds,
+  ut as isMac,
+  we as isNodeWhitespaceOrEmpty,
+  $ as isNotAnnotatable,
+  gt as isRangeAnnotatable,
+  Ht as isRangeWhitespaceOrEmpty,
   D as isRevived,
-  ie as mergeClientRects,
-  Kt as mergeRanges,
-  te as parseW3CTextAnnotation,
-  Ft as programmaticallyFocusable,
-  Gt as rangeToSelector,
-  tt as reviveAnnotation,
+  ne as mergeClientRects,
+  Pt as mergeRanges,
+  jt as parseW3CTextAnnotation,
+  Ut as programmaticallyFocusable,
+  Wt as rangeToSelector,
+  Z as reviveAnnotation,
   pt as reviveSelector,
   Q as reviveTarget,
-  Qt as scrollIntoView,
-  ee as serializeW3CTextAnnotation,
-  Yt as splitAnnotatableRanges,
-  Me as toDomRectList,
-  ce as toParentBounds,
-  Be as toViewportBounds,
-  qt as trackViewport,
-  Wt as trimRangeToContainer,
-  ft as whitespaceOrEmptyRegex
+  Xt as scrollIntoView,
+  qt as serializeW3CTextAnnotation,
+  Ft as splitAnnotatableRanges,
+  Le as toDomRectList,
+  oe as toParentBounds,
+  Ne as toViewportBounds,
+  ae as trackViewport,
+  $t as trimRangeToContainer,
+  mt as whitespaceOrEmptyRegex
 };
 //# sourceMappingURL=text-annotator.es.js.map