@semiont/react-ui 0.2.35-build.96 → 0.2.35-build.97

package/dist/index.mjs

@@ -17353,402 +17353,154 @@ function saveSelectedShapeForSelectorType(selectorType, shape) {
   }
 }
 
-// ../../node_modules/unist-util-is/lib/index.js
-var convert = (
-  // Note: overloads in JSDoc can’t yet use different `@template`s.
-  /**
-   * @type {(
-   *   (<Condition extends string>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition}) &
-   *   (<Condition extends Props>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Condition) &
-   *   (<Condition extends TestFunction>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Predicate<Condition, Node>) &
-   *   ((test?: null | undefined) => (node?: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node) &
-   *   ((test?: Test) => Check)
-   * )}
-   */
-  /**
-   * @param {Test} [test]
-   * @returns {Check}
-   */
-  (function(test) {
-    if (test === null || test === void 0) {
-      return ok;
-    }
-    if (typeof test === "function") {
-      return castFactory(test);
-    }
-    if (typeof test === "object") {
-      return Array.isArray(test) ? anyFactory(test) : (
-        // Cast because `ReadonlyArray` goes into the above but `isArray`
-        // narrows to `Array`.
-        propertiesFactory(
-          /** @type {Props} */
-          test
-        )
-      );
-    }
-    if (typeof test === "string") {
-      return typeFactory(test);
-    }
-    throw new Error("Expected function, string, or object as test");
-  })
-);
-function anyFactory(tests) {
-  const checks2 = [];
-  let index2 = -1;
-  while (++index2 < tests.length) {
-    checks2[index2] = convert(tests[index2]);
+// src/lib/annotation-overlay.ts
+import { getTextPositionSelector, getTargetSelector, getExactText, getBodySource as getBodySource2 } from "@semiont/api-client";
+function buildSourceToRenderedMap(markdownSource, container) {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let renderedText = "";
+  while (walker.nextNode()) {
+    renderedText += walker.currentNode.textContent ?? "";
   }
-  return castFactory(any);
-  function any(...parameters) {
-    let index3 = -1;
-    while (++index3 < checks2.length) {
-      if (checks2[index3].apply(this, parameters)) return true;
-    }
-    return false;
-  }
-}
-function propertiesFactory(check) {
-  const checkAsRecord = (
-    /** @type {Record<string, unknown>} */
-    check
-  );
-  return castFactory(all2);
-  function all2(node2) {
-    const nodeAsRecord = (
-      /** @type {Record<string, unknown>} */
-      /** @type {unknown} */
-      node2
-    );
-    let key;
-    for (key in check) {
-      if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
+  const map3 = /* @__PURE__ */ new Map();
+  let renderedPos = 0;
+  let sourcePos = 0;
+  while (sourcePos < markdownSource.length && renderedPos < renderedText.length) {
+    if (markdownSource[sourcePos] === renderedText[renderedPos]) {
+      map3.set(sourcePos, renderedPos);
+      renderedPos++;
+      sourcePos++;
+    } else {
+      sourcePos++;
     }
-    return true;
   }
-}
-function typeFactory(check) {
-  return castFactory(type);
-  function type(node2) {
-    return node2 && node2.type === check;
-  }
-}
-function castFactory(testFunction) {
-  return check;
-  function check(value, index2, parent) {
-    return Boolean(
-      looksLikeANode(value) && testFunction.call(
-        this,
-        value,
-        typeof index2 === "number" ? index2 : void 0,
-        parent || void 0
-      )
-    );
+  while (sourcePos < markdownSource.length) {
+    map3.set(sourcePos, renderedPos);
+    sourcePos++;
   }
+  return map3;
 }
-function ok() {
-  return true;
-}
-function looksLikeANode(value) {
-  return value !== null && typeof value === "object" && "type" in value;
-}
-
-// ../../node_modules/unist-util-visit-parents/lib/color.node.js
-function color(d8) {
-  return "\x1B[33m" + d8 + "\x1B[39m";
-}
-
-// ../../node_modules/unist-util-visit-parents/lib/index.js
-var empty = [];
-var CONTINUE = true;
-var EXIT = false;
-var SKIP = "skip";
-function visitParents(tree, test, visitor, reverse) {
-  let check;
-  if (typeof test === "function" && typeof visitor !== "function") {
-    reverse = visitor;
-    visitor = test;
-  } else {
-    check = test;
-  }
-  const is2 = convert(check);
-  const step = reverse ? -1 : 1;
-  factory(tree, void 0, [])();
-  function factory(node2, index2, parents) {
-    const value = (
-      /** @type {Record<string, unknown>} */
-      node2 && typeof node2 === "object" ? node2 : {}
-    );
-    if (typeof value.type === "string") {
-      const name3 = (
-        // `hast`
-        typeof value.tagName === "string" ? value.tagName : (
-          // `xast`
-          typeof value.name === "string" ? value.name : void 0
-        )
-      );
-      Object.defineProperty(visit2, "name", {
-        value: "node (" + color(node2.type + (name3 ? "<" + name3 + ">" : "")) + ")"
-      });
-    }
-    return visit2;
-    function visit2() {
-      let result = empty;
-      let subresult;
-      let offset;
-      let grandparents;
-      if (!test || is2(node2, index2, parents[parents.length - 1] || void 0)) {
-        result = toResult(visitor(node2, parents));
-        if (result[0] === EXIT) {
-          return result;
-        }
-      }
-      if ("children" in node2 && node2.children) {
-        const nodeAsParent = (
-          /** @type {UnistParent} */
-          node2
-        );
-        if (nodeAsParent.children && result[0] !== SKIP) {
-          offset = (reverse ? nodeAsParent.children.length : -1) + step;
-          grandparents = parents.concat(nodeAsParent);
-          while (offset > -1 && offset < nodeAsParent.children.length) {
-            const child = nodeAsParent.children[offset];
-            subresult = factory(child, offset, grandparents)();
-            if (subresult[0] === EXIT) {
-              return subresult;
-            }
-            offset = typeof subresult[1] === "number" ? subresult[1] : offset + step;
-          }
-        }
-      }
-      return result;
+function buildTextNodeIndex(container) {
+  const entries = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let offset = 0;
+  while (walker.nextNode()) {
+    const node2 = walker.currentNode;
+    const length = node2.textContent?.length ?? 0;
+    entries.push({ node: node2, start: offset, end: offset + length });
+    offset += length;
+  }
+  return entries;
+}
+function findTextNode(entries, renderedOffset) {
+  let lo = 0;
+  let hi = entries.length - 1;
+  while (lo <= hi) {
+    const mid = lo + hi >>> 1;
+    const entry = entries[mid];
+    if (renderedOffset < entry.start) {
+      hi = mid - 1;
+    } else if (renderedOffset >= entry.end) {
+      lo = mid + 1;
+    } else {
+      return { node: entry.node, localOffset: renderedOffset - entry.start };
     }
   }
+  return null;
 }
-function toResult(value) {
-  if (Array.isArray(value)) {
-    return value;
-  }
-  if (typeof value === "number") {
-    return [CONTINUE, value];
-  }
-  return value === null || value === void 0 ? empty : [value];
-}
-
-// ../../node_modules/unist-util-visit/lib/index.js
-function visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
-  let reverse;
-  let test;
-  let visitor;
-  if (typeof testOrVisitor === "function" && typeof visitorOrReverse !== "function") {
-    test = void 0;
-    visitor = testOrVisitor;
-    reverse = visitorOrReverse;
-  } else {
-    test = testOrVisitor;
-    visitor = visitorOrReverse;
-    reverse = maybeReverse;
-  }
-  visitParents(tree, test, overload, reverse);
-  function overload(node2, parents) {
-    const parent = parents[parents.length - 1];
-    const index2 = parent ? parent.children.indexOf(node2) : void 0;
-    return visitor(node2, index2, parent);
-  }
-}
-
-// src/lib/rehype-render-annotations.ts
-function buildAnnotationSpan(annotation, children) {
-  let className;
-  const annotationType = annotation.type;
-  if (annotation.type === "highlight") {
-    className = "annotation-highlight";
-  } else if (annotation.type === "assessment") {
-    className = "annotation-assessment";
-  } else if (annotation.type === "comment") {
-    className = "annotation-comment";
-  } else if (annotation.type === "tag") {
-    className = "annotation-tag";
-  } else if (annotation.type === "reference") {
-    className = "annotation-reference";
-  } else {
-    className = "annotation-reference";
-  }
-  return {
-    type: "element",
-    tagName: "span",
-    properties: {
-      className,
-      "data-annotation-id": annotation.id,
-      "data-annotation-type": annotationType
-    },
-    children
-  };
-}
-function rehypeRenderAnnotations() {
-  return (tree, file) => {
-    const originalSource = String(file);
-    visit(tree, "element", (element2) => {
-      const annotationsJson = element2.properties?.["data-annotations"];
-      if (!annotationsJson || typeof annotationsJson !== "string") {
-        return;
-      }
-      const annotations = JSON.parse(annotationsJson);
-      wrapCrossElementAnnotations(element2, annotations);
-      applyWithinTextNodeAnnotations(element2, annotations, originalSource);
-      delete element2.properties["data-annotations"];
-    });
-  };
-}
-function wrapCrossElementAnnotations(element2, annotations) {
-  const spans = analyzeChildSpans(element2, annotations);
-  if (spans.length === 0) return;
-  const sortedSpans = spans.sort((a15, b8) => {
-    const aLength = a15.endChildIndex - a15.startChildIndex;
-    const bLength = b8.endChildIndex - b8.startChildIndex;
-    return bLength - aLength;
-  });
-  for (const span of sortedSpans) {
-    wrapChildRange(element2, span);
+function resolveAnnotationRanges(annotations, offsetMap, textNodeIndex) {
+  const ranges = /* @__PURE__ */ new Map();
+  for (const ann of annotations) {
+    const renderedStart = offsetMap.get(ann.offset);
+    const renderedEnd = offsetMap.get(ann.offset + ann.length - 1);
+    if (renderedStart === void 0 || renderedEnd === void 0) continue;
+    const startInfo = findTextNode(textNodeIndex, renderedStart);
+    const endInfo = findTextNode(textNodeIndex, renderedEnd + 1);
+    if (!startInfo || !endInfo) continue;
+    const range = document.createRange();
+    range.setStart(startInfo.node, startInfo.localOffset);
+    range.setEnd(endInfo.node, endInfo.localOffset);
+    ranges.set(ann.id, { range, annotation: ann });
   }
+  return ranges;
 }
-function analyzeChildSpans(element2, annotations) {
-  const spans = [];
-  for (const ann of annotations) {
-    const annStart = ann.offset;
-    const annEnd = ann.offset + ann.length;
-    let startChildIndex = -1;
-    let endChildIndex = -1;
-    for (let i12 = 0; i12 < element2.children.length; i12++) {
-      const child = element2.children[i12];
-      const childRange = getNodeOffsetRange(child);
-      if (!childRange) continue;
-      const [childStart, childEnd] = childRange;
-      if (annStart < childEnd && annEnd > childStart) {
-        if (startChildIndex === -1) {
-          startChildIndex = i12;
-        }
-        endChildIndex = i12 + 1;
+function applyHighlights(ranges) {
+  for (const [id2, { range, annotation }] of ranges) {
+    const className = `annotation-${annotation.type}`;
+    if (range.startContainer === range.endContainer) {
+      const span = document.createElement("span");
+      span.className = className;
+      span.dataset.annotationId = id2;
+      span.dataset.annotationType = annotation.type;
+      try {
+        range.surroundContents(span);
+      } catch {
+        wrapRangeTextNodes(range, id2, annotation);
       }
+      continue;
     }
-    if (startChildIndex !== -1 && endChildIndex - startChildIndex > 1) {
-      spans.push({ annotation: ann, startChildIndex, endChildIndex });
-    }
-  }
-  return spans;
-}
-function getNodeOffsetRange(node2) {
-  if (!node2) return null;
-  if ("position" in node2 && node2.position?.start.offset !== void 0 && node2.position?.end.offset !== void 0) {
-    return [node2.position.start.offset, node2.position.end.offset];
+    wrapRangeTextNodes(range, id2, annotation);
   }
-  return null;
 }
-function wrapChildRange(element2, span) {
-  const { annotation, startChildIndex, endChildIndex } = span;
-  const childrenToWrap = element2.children.slice(startChildIndex, endChildIndex);
-  const wrapper = buildAnnotationSpan(annotation, childrenToWrap);
-  element2.children.splice(startChildIndex, endChildIndex - startChildIndex, wrapper);
-}
-function applyWithinTextNodeAnnotations(element2, annotations, originalSource) {
-  visit(element2, "text", (textNode, index2, parent) => {
-    if (index2 === void 0 || !parent || parent.type !== "element") {
-      return SKIP;
-    }
-    if (parent.properties?.["data-annotation-id"]) {
-      return SKIP;
-    }
-    const position3 = textNode.position || parent.position;
-    if (!position3) return SKIP;
-    const textStart = position3.start.offset;
-    const textEnd = position3.end.offset;
-    if (textStart === void 0 || textEnd === void 0) return SKIP;
-    const textContent = textNode.value;
-    const applicable = annotations.filter((ann) => {
-      const annStart = ann.offset;
-      const annEnd = ann.offset + ann.length;
-      return annStart < textEnd && annEnd > textStart;
-    });
-    if (applicable.length === 0) return SKIP;
-    const sourceTextInNode = originalSource.substring(textStart, textEnd);
-    const sourceToRendered = buildPositionMap(sourceTextInNode, textContent, textStart);
-    const segments = [];
-    let lastPos = 0;
-    for (const ann of applicable.sort((a15, b8) => a15.offset - b8.offset)) {
-      let relStart = sourceToRendered.get(ann.offset);
-      let relEnd = sourceToRendered.get(ann.offset + ann.length - 1);
-      if (relStart === void 0 || relEnd === void 0) continue;
-      relEnd = relEnd + 1;
-      relStart = Math.max(0, Math.min(relStart, textContent.length));
-      relEnd = Math.max(0, Math.min(relEnd, textContent.length));
-      if (relStart >= relEnd || relStart < lastPos) continue;
-      if (relStart > lastPos) {
-        segments.push({ type: "text", value: textContent.substring(lastPos, relStart) });
-      }
-      const annotationSpan = buildAnnotationSpan(ann, [
-        { type: "text", value: textContent.substring(relStart, relEnd) }
-      ]);
-      segments.push(annotationSpan);
-      lastPos = relEnd;
-    }
-    if (lastPos < textContent.length) {
-      segments.push({ type: "text", value: textContent.substring(lastPos) });
-    }
-    if (segments.length === 0) {
-      return SKIP;
-    } else if (segments.length === 1 && segments[0]) {
-      parent.children[index2] = segments[0];
-    } else {
-      parent.children[index2] = {
-        type: "element",
-        tagName: "span",
-        properties: {},
-        children: segments
-      };
+function wrapRangeTextNodes(range, id2, annotation) {
+  const className = `annotation-${annotation.type}`;
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_TEXT
+  );
+  const textNodes = [];
+  while (walker.nextNode()) {
+    const node2 = walker.currentNode;
+    if (range.intersectsNode(node2)) {
+      textNodes.push(node2);
+    }
+  }
+  for (const textNode of textNodes) {
+    const nodeRange = document.createRange();
+    nodeRange.selectNodeContents(textNode);
+    if (textNode === range.startContainer) {
+      nodeRange.setStart(textNode, range.startOffset);
+    }
+    if (textNode === range.endContainer) {
+      nodeRange.setEnd(textNode, range.endOffset);
+    }
+    const span = document.createElement("span");
+    span.className = className;
+    span.dataset.annotationId = id2;
+    span.dataset.annotationType = annotation.type;
+    try {
+      nodeRange.surroundContents(span);
+    } catch {
     }
-    return SKIP;
-  });
+  }
 }
-function buildPositionMap(sourceText, renderedText, baseOffset) {
-  const map3 = /* @__PURE__ */ new Map();
-  let renderedPos = 0;
-  let sourcePos = 0;
-  while (sourcePos < sourceText.length && renderedPos < renderedText.length) {
-    if (sourceText[sourcePos] === renderedText[renderedPos]) {
-      map3.set(baseOffset + sourcePos, renderedPos);
-      renderedPos++;
-      sourcePos++;
-    } else {
-      sourcePos++;
+function clearHighlights(container) {
+  const spans = container.querySelectorAll("[data-annotation-id]");
+  for (const span of spans) {
+    const parent = span.parentNode;
+    if (!parent) continue;
+    while (span.firstChild) {
+      parent.insertBefore(span.firstChild, span);
     }
+    parent.removeChild(span);
+    parent.normalize();
   }
-  while (sourcePos < sourceText.length) {
-    map3.set(baseOffset + sourcePos, renderedPos);
-    sourcePos++;
-  }
-  return map3;
 }
-
-// src/lib/remark-annotations.ts
-function remarkAnnotations(options) {
-  const { annotations } = options;
-  return (tree, _file) => {
-    visit(tree, (node2) => {
-      if (!node2.position) return;
-      const nodeStart = node2.position.start.offset;
-      const nodeEnd = node2.position.end.offset;
-      if (nodeStart === void 0 || nodeEnd === void 0) return;
-      const overlapping = annotations.filter((ann) => {
-        const annStart = ann.offset;
-        const annEnd = ann.offset + ann.length;
-        return annStart < nodeEnd && annEnd > nodeStart;
-      });
-      if (overlapping.length > 0) {
-        if (!node2.data) node2.data = {};
-        if (!node2.data.hProperties) node2.data.hProperties = {};
-        node2.data.hProperties["data-annotations"] = JSON.stringify(overlapping);
-      }
-    });
-  };
+function toOverlayAnnotations(annotations) {
+  return annotations.map((ann) => {
+    const targetSelector = getTargetSelector(ann.target);
+    const posSelector = getTextPositionSelector(targetSelector);
+    const start2 = posSelector?.start ?? 0;
+    const end = posSelector?.end ?? 0;
+    const type = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(ann))?.internalType || "highlight";
+    return {
+      id: ann.id,
+      exact: getExactText(targetSelector),
+      offset: start2,
+      length: end - start2,
+      type,
+      source: getBodySource2(ann.body)
+    };
+  });
 }
 
 // src/lib/resource-utils.ts
@@ -26432,7 +26184,7 @@ function scrollAnnotationIntoView(annotationId, rootElement, options = {}) {
 }
 
 // src/components/CodeMirrorRenderer.tsx
-import { isHighlight as isHighlight2, isReference as isReference2, isResolvedReference as isResolvedReference2, isComment as isComment2, isAssessment, isTag as isTag3, getBodySource as getBodySource2 } from "@semiont/api-client";
+import { isHighlight as isHighlight2, isReference as isReference2, isResolvedReference as isResolvedReference2, isComment as isComment2, isAssessment, isTag as isTag3, getBodySource as getBodySource3 } from "@semiont/api-client";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var updateAnnotationsEffect = StateEffect.define();
 var updateWidgetsEffect = StateEffect.define();
@@ -26533,7 +26285,7 @@ function buildWidgetDecorations(_content, segments, generatingReferenceId, event
     if (!segment.annotation) continue;
     const annotation = segment.annotation;
     if (isReference2(annotation)) {
-      const bodySource = getBodySource2(annotation.body);
+      const bodySource = getBodySource3(annotation.body);
       const targetName = bodySource ? getTargetDocumentName?.(bodySource) : void 0;
       const isGenerating = generatingReferenceId ? annotation.id === generatingReferenceId : false;
       const widget = new ReferenceResolutionWidget(
@@ -30370,7 +30122,7 @@ function ProposeEntitiesModal({
 // src/components/resource/AnnotateView.tsx
 import { useRef as useRef12, useEffect as useEffect18, useCallback as useCallback13, lazy, Suspense } from "react";
 import { resourceUri as toResourceUri } from "@semiont/core";
-import { getTextPositionSelector, getTextQuoteSelector, getTargetSelector, getMimeCategory, isPdfMimeType as isPdfMimeType2, extractContext, findTextWithContext } from "@semiont/api-client";
+import { getTextPositionSelector as getTextPositionSelector2, getTextQuoteSelector, getTargetSelector as getTargetSelector2, getMimeCategory, isPdfMimeType as isPdfMimeType2, extractContext, findTextWithContext } from "@semiont/api-client";
 import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var PdfAnnotationCanvas = lazy(() => import("./PdfAnnotationCanvas.client-HNYRKFDS.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
 function segmentTextWithAnnotations(content4, annotations) {
@@ -30378,8 +30130,8 @@ function segmentTextWithAnnotations(content4, annotations) {
     return [{ exact: "", start: 0, end: 0 }];
   }
   const normalizedAnnotations = annotations.map((ann) => {
-    const targetSelector = getTargetSelector(ann.target);
-    const posSelector = getTextPositionSelector(targetSelector);
+    const targetSelector = getTargetSelector2(ann.target);
+    const posSelector = getTextPositionSelector2(targetSelector);
     const quoteSelector = targetSelector ? getTextQuoteSelector(targetSelector) : null;
     let position4;
     if (quoteSelector) {
@@ -30681,7 +30433,7 @@ import { useRef as useRef13, useCallback as useCallback14, useEffect as useEffec
 import { getAnnotationUriFromEvent } from "@semiont/core";
 
 // src/components/resource/event-formatting.ts
-import { getExactText, getTargetSelector as getTargetSelector2 } from "@semiont/api-client";
+import { getExactText as getExactText2, getTargetSelector as getTargetSelector3 } from "@semiont/api-client";
 function formatEventType(type, t12, payload) {
   switch (type) {
     case "resource.created":
@@ -30792,8 +30544,8 @@ function getEventDisplayContent(event, annotations, allEvents) {
       );
       if (annotation?.target) {
         try {
-          const targetSelector = getTargetSelector2(annotation.target);
-          const exact = getExactText(targetSelector);
+          const targetSelector = getTargetSelector3(annotation.target);
+          const exact = getExactText2(targetSelector);
           if (exact) {
             return { exact: truncateText(exact), isQuoted: true, isTag: false };
           }
@@ -30810,7 +30562,7 @@ function getEventDisplayContent(event, annotations, allEvents) {
         try {
           const target = addedEvent.event.payload.annotation.target;
           if (typeof target !== "string" && target.selector) {
-            const exact = getExactText(target.selector);
+            const exact = getExactText2(target.selector);
             if (exact) {
               return { exact: truncateText(exact), isQuoted: true, isTag: false };
             }
@@ -30824,7 +30576,7 @@ function getEventDisplayContent(event, annotations, allEvents) {
       try {
         const target = eventData.payload.annotation.target;
         if (typeof target !== "string" && target.selector) {
-          const exact = getExactText(target.selector);
+          const exact = getExactText2(target.selector);
           if (exact) {
             return { exact: truncateText(exact), isQuoted: true, isTag: false };
           }
@@ -30844,8 +30596,8 @@ function getEventDisplayContent(event, annotations, allEvents) {
         );
         if (annotation?.target) {
           try {
-            const targetSelector = getTargetSelector2(annotation.target);
-            const exact = getExactText(targetSelector);
+            const targetSelector = getTargetSelector3(annotation.target);
+            const exact = getExactText2(targetSelector);
             if (exact) {
               return { exact: truncateText(exact), isQuoted: true, isTag: false };
             }
@@ -31098,10 +30850,10 @@ function AnnotationHistory({ rUri, hoveredAnnotationId, onEventHover, onEventCli
 }
 
 // src/components/resource/BrowseView.tsx
-import { useEffect as useEffect22, useRef as useRef15, useCallback as useCallback15, lazy as lazy2, Suspense as Suspense2 } from "react";
+import { useEffect as useEffect22, useRef as useRef15, useCallback as useCallback15, useMemo as useMemo4, memo, lazy as lazy2, Suspense as Suspense2 } from "react";
 
 // ../../node_modules/devlop/lib/default.js
-function ok2() {
+function ok() {
 }
 function unreachable() {
 }
@@ -31128,9 +30880,9 @@ function name2(name3, options) {
 // ../../node_modules/hast-util-whitespace/lib/index.js
 var re2 = /[ \t\n\f\r]/g;
 function whitespace(thing) {
-  return typeof thing === "object" ? thing.type === "text" ? empty2(thing.value) : false : empty2(thing);
+  return typeof thing === "object" ? thing.type === "text" ? empty(thing.value) : false : empty(thing);
 }
-function empty2(value) {
+function empty(value) {
   return value.replace(re2, "") === "";
 }
 
@@ -32668,7 +32420,7 @@ function mdxExpression(state, node2) {
   if (node2.data && node2.data.estree && state.evaluater) {
     const program = node2.data.estree;
     const expression = program.body[0];
-    ok2(expression.type === "ExpressionStatement");
+    ok(expression.type === "ExpressionStatement");
     return (
       /** @type {Child | undefined} */
       state.evaluater.evaluateExpression(expression.expression)
@@ -32783,11 +32535,11 @@ function createJsxElementProps(state, node2) {
       if (attribute.data && attribute.data.estree && state.evaluater) {
         const program = attribute.data.estree;
         const expression = program.body[0];
-        ok2(expression.type === "ExpressionStatement");
+        ok(expression.type === "ExpressionStatement");
         const objectExpression = expression.expression;
-        ok2(objectExpression.type === "ObjectExpression");
+        ok(objectExpression.type === "ObjectExpression");
         const property = objectExpression.properties[0];
-        ok2(property.type === "SpreadElement");
+        ok(property.type === "SpreadElement");
         Object.assign(
           props,
           state.evaluater.evaluateExpression(property.argument)
@@ -32802,7 +32554,7 @@ function createJsxElementProps(state, node2) {
         if (attribute.value.data && attribute.value.data.estree && state.evaluater) {
           const program = attribute.value.data.estree;
           const expression = program.body[0];
-          ok2(expression.type === "ExpressionStatement");
+          ok(expression.type === "ExpressionStatement");
           value = state.evaluater.evaluateExpression(expression.expression);
         } else {
           crashEstree(state, node2.position);
@@ -32896,7 +32648,7 @@ function findComponentFromName(state, name3, allowExpression) {
         optional: false
       } : prop;
     }
-    ok2(node2, "always a result");
+    ok(node2, "always a result");
     result = node2;
   } else {
     result = name2(name3) && !/^[a-z]/.test(name3) ? { type: "Identifier", name: name3 } : { type: "Literal", value: name3 };
@@ -40799,6 +40551,209 @@ function footer(state) {
   };
 }
 
+// ../../node_modules/unist-util-is/lib/index.js
+var convert = (
+  // Note: overloads in JSDoc can’t yet use different `@template`s.
+  /**
+   * @type {(
+   *   (<Condition extends string>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & {type: Condition}) &
+   *   (<Condition extends Props>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Condition) &
+   *   (<Condition extends TestFunction>(test: Condition) => (node: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node & Predicate<Condition, Node>) &
+   *   ((test?: null | undefined) => (node?: unknown, index?: number | null | undefined, parent?: Parent | null | undefined, context?: unknown) => node is Node) &
+   *   ((test?: Test) => Check)
+   * )}
+   */
+  /**
+   * @param {Test} [test]
+   * @returns {Check}
+   */
+  (function(test) {
+    if (test === null || test === void 0) {
+      return ok2;
+    }
+    if (typeof test === "function") {
+      return castFactory(test);
+    }
+    if (typeof test === "object") {
+      return Array.isArray(test) ? anyFactory(test) : (
+        // Cast because `ReadonlyArray` goes into the above but `isArray`
+        // narrows to `Array`.
+        propertiesFactory(
+          /** @type {Props} */
+          test
+        )
+      );
+    }
+    if (typeof test === "string") {
+      return typeFactory(test);
+    }
+    throw new Error("Expected function, string, or object as test");
+  })
+);
+function anyFactory(tests) {
+  const checks2 = [];
+  let index2 = -1;
+  while (++index2 < tests.length) {
+    checks2[index2] = convert(tests[index2]);
+  }
+  return castFactory(any);
+  function any(...parameters) {
+    let index3 = -1;
+    while (++index3 < checks2.length) {
+      if (checks2[index3].apply(this, parameters)) return true;
+    }
+    return false;
+  }
+}
+function propertiesFactory(check) {
+  const checkAsRecord = (
+    /** @type {Record<string, unknown>} */
+    check
+  );
+  return castFactory(all2);
+  function all2(node2) {
+    const nodeAsRecord = (
+      /** @type {Record<string, unknown>} */
+      /** @type {unknown} */
+      node2
+    );
+    let key;
+    for (key in check) {
+      if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
+    }
+    return true;
+  }
+}
+function typeFactory(check) {
+  return castFactory(type);
+  function type(node2) {
+    return node2 && node2.type === check;
+  }
+}
+function castFactory(testFunction) {
+  return check;
+  function check(value, index2, parent) {
+    return Boolean(
+      looksLikeANode(value) && testFunction.call(
+        this,
+        value,
+        typeof index2 === "number" ? index2 : void 0,
+        parent || void 0
+      )
+    );
+  }
+}
+function ok2() {
+  return true;
+}
+function looksLikeANode(value) {
+  return value !== null && typeof value === "object" && "type" in value;
+}
+
+// ../../node_modules/unist-util-visit-parents/lib/color.node.js
+function color(d8) {
+  return "\x1B[33m" + d8 + "\x1B[39m";
+}
+
+// ../../node_modules/unist-util-visit-parents/lib/index.js
+var empty2 = [];
+var CONTINUE = true;
+var EXIT = false;
+var SKIP = "skip";
+function visitParents(tree, test, visitor, reverse) {
+  let check;
+  if (typeof test === "function" && typeof visitor !== "function") {
+    reverse = visitor;
+    visitor = test;
+  } else {
+    check = test;
+  }
+  const is2 = convert(check);
+  const step = reverse ? -1 : 1;
+  factory(tree, void 0, [])();
+  function factory(node2, index2, parents) {
+    const value = (
+      /** @type {Record<string, unknown>} */
+      node2 && typeof node2 === "object" ? node2 : {}
+    );
+    if (typeof value.type === "string") {
+      const name3 = (
+        // `hast`
+        typeof value.tagName === "string" ? value.tagName : (
+          // `xast`
+          typeof value.name === "string" ? value.name : void 0
+        )
+      );
+      Object.defineProperty(visit2, "name", {
+        value: "node (" + color(node2.type + (name3 ? "<" + name3 + ">" : "")) + ")"
+      });
+    }
+    return visit2;
+    function visit2() {
+      let result = empty2;
+      let subresult;
+      let offset;
+      let grandparents;
+      if (!test || is2(node2, index2, parents[parents.length - 1] || void 0)) {
+        result = toResult(visitor(node2, parents));
+        if (result[0] === EXIT) {
+          return result;
+        }
+      }
+      if ("children" in node2 && node2.children) {
+        const nodeAsParent = (
+          /** @type {UnistParent} */
+          node2
+        );
+        if (nodeAsParent.children && result[0] !== SKIP) {
+          offset = (reverse ? nodeAsParent.children.length : -1) + step;
+          grandparents = parents.concat(nodeAsParent);
+          while (offset > -1 && offset < nodeAsParent.children.length) {
+            const child = nodeAsParent.children[offset];
+            subresult = factory(child, offset, grandparents)();
+            if (subresult[0] === EXIT) {
+              return subresult;
+            }
+            offset = typeof subresult[1] === "number" ? subresult[1] : offset + step;
+          }
+        }
+      }
+      return result;
+    }
+  }
+}
+function toResult(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === "number") {
+    return [CONTINUE, value];
+  }
+  return value === null || value === void 0 ? empty2 : [value];
+}
+
+// ../../node_modules/unist-util-visit/lib/index.js
+function visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+  let reverse;
+  let test;
+  let visitor;
+  if (typeof testOrVisitor === "function" && typeof visitorOrReverse !== "function") {
+    test = void 0;
+    visitor = testOrVisitor;
+    reverse = visitorOrReverse;
+  } else {
+    test = testOrVisitor;
+    visitor = visitorOrReverse;
+    reverse = maybeReverse;
+  }
+  visitParents(tree, test, overload, reverse);
+  function overload(node2, parents) {
+    const parent = parents[parents.length - 1];
+    const index2 = parent ? parent.children.indexOf(node2) : void 0;
+    return visitor(node2, index2, parent);
+  }
+}
+
 // ../../node_modules/mdast-util-to-hast/lib/state.js
 var own4 = {}.hasOwnProperty;
 var emptyOptions3 = {};
@@ -40948,7 +40903,7 @@ function toHast(tree, options) {
   const foot = footer(state);
   const result = Array.isArray(node2) ? { type: "root", children: node2 } : node2 || { type: "root", children: [] };
   if (foot) {
-    ok2("children" in result);
+    ok("children" in result);
     result.children.push({ type: "text", value: "\n" }, foot);
   }
   return result;
@@ -41841,7 +41796,7 @@ var Processor = class _Processor extends CallableInstance {
         } else if (resolve) {
           resolve(file2);
         } else {
-          ok2(done, "`done` is defined if `resolve` is not");
+          ok(done, "`done` is defined if `resolve` is not");
           done(void 0, file2);
         }
       }
@@ -41886,7 +41841,7 @@ var Processor = class _Processor extends CallableInstance {
     assertCompiler("processSync", this.compiler || this.Compiler);
     this.process(file, realDone);
     assertDone("processSync", "process", complete);
-    ok2(result, "we either bailed on an error or have a tree");
+    ok(result, "we either bailed on an error or have a tree");
     return result;
     function realDone(error, file2) {
       complete = true;
@@ -41942,7 +41897,7 @@ var Processor = class _Processor extends CallableInstance {
     }
     return done ? executor(void 0, done) : new Promise(executor);
     function executor(resolve, reject) {
-      ok2(
+      ok(
         typeof file !== "function",
         "`file` can\u2019t be a `done` anymore, we checked"
       );
@@ -41958,7 +41913,7 @@ var Processor = class _Processor extends CallableInstance {
         } else if (resolve) {
           resolve(resultingTree);
         } else {
-          ok2(done, "`done` is defined if `resolve` is not");
+          ok(done, "`done` is defined if `resolve` is not");
           done(void 0, resultingTree, file2);
         }
       }
@@ -41986,7 +41941,7 @@ var Processor = class _Processor extends CallableInstance {
     let result;
     this.run(tree, file, realDone);
     assertDone("runSync", "run", complete);
-    ok2(result, "we either bailed on an error or have a tree");
+    ok(result, "we either bailed on an error or have a tree");
     return result;
     function realDone(error, tree2) {
       bail(error);
@@ -42547,7 +42502,7 @@ function exitLiteralAutolinkHttp(token) {
 function exitLiteralAutolinkWww(token) {
   this.config.exit.data.call(this, token);
   const node2 = this.stack[this.stack.length - 1];
-  ok2(node2.type === "link");
+  ok(node2.type === "link");
   node2.url = "http://" + this.sliceSerialize(token);
 }
 function exitLiteralAutolinkEmail(token) {
@@ -42658,7 +42613,7 @@ function enterFootnoteDefinition(token) {
 function exitFootnoteCallString(token) {
   const label = this.resume();
   const node2 = this.stack[this.stack.length - 1];
-  ok2(node2.type === "footnoteReference");
+  ok(node2.type === "footnoteReference");
   node2.identifier = normalizeIdentifier(
     this.sliceSerialize(token)
   ).toLowerCase();
@@ -42670,7 +42625,7 @@ function exitFootnoteCall(token) {
 function exitFootnoteDefinitionLabelString(token) {
   const label = this.resume();
   const node2 = this.stack[this.stack.length - 1];
-  ok2(node2.type === "footnoteDefinition");
+  ok(node2.type === "footnoteDefinition");
   node2.identifier = normalizeIdentifier(
     this.sliceSerialize(token)
   ).toLowerCase();
@@ -43877,7 +43832,7 @@ function gfmTableFromMarkdown() {
 }
 function enterTable(token) {
   const align = token._align;
-  ok2(align, "expected `_align` on table");
+  ok(align, "expected `_align` on table");
   this.enter(
     {
       type: "table",
@@ -43909,7 +43864,7 @@ function exitCodeText(token) {
     value = value.replace(/\\([\\|])/g, replace2);
   }
   const node2 = this.stack[this.stack.length - 1];
-  ok2(node2.type === "inlineCode");
+  ok(node2.type === "inlineCode");
   node2.value = value;
   this.exit(token);
 }
@@ -44028,14 +43983,14 @@ function gfmTaskListItemToMarkdown() {
 }
 function exitCheck(token) {
   const node2 = this.stack[this.stack.length - 2];
-  ok2(node2.type === "listItem");
+  ok(node2.type === "listItem");
   node2.checked = token.type === "taskListCheckValueChecked";
 }
 function exitParagraphWithTaskListItem(token) {
   const parent = this.stack[this.stack.length - 2];
   if (parent && parent.type === "listItem" && typeof parent.checked === "boolean") {
     const node2 = this.stack[this.stack.length - 1];
-    ok2(node2.type === "paragraph");
+    ok(node2.type === "paragraph");
     const head = node2.children[0];
     if (head && head.type === "text") {
       const siblings = parent.children;
@@ -45412,7 +45367,7 @@ function remarkGfm(options) {
 
 // src/components/resource/BrowseView.tsx
 import { resourceUri as toResourceUri2 } from "@semiont/core";
-import { getExactText as getExactText2, getTextPositionSelector as getTextPositionSelector2, getTargetSelector as getTargetSelector3, getBodySource as getBodySource3, getMimeCategory as getMimeCategory2, isPdfMimeType as isPdfMimeType3 } from "@semiont/api-client";
+import { getMimeCategory as getMimeCategory2, isPdfMimeType as isPdfMimeType3 } from "@semiont/api-client";
 
 // src/components/viewers/ImageViewer.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -45433,26 +45388,18 @@ function ImageViewer({ resourceUri: resourceUri2, alt = "Resource image" }) {
 // src/components/resource/BrowseView.tsx
 import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var PdfAnnotationCanvas2 = lazy2(() => import("./PdfAnnotationCanvas.client-HNYRKFDS.mjs").then((mod) => ({ default: mod.PdfAnnotationCanvas })));
-function prepareAnnotations(annotations) {
-  return annotations.map((ann) => {
-    const targetSelector = getTargetSelector3(ann.target);
-    const posSelector = getTextPositionSelector2(targetSelector);
-    const start2 = posSelector?.start ?? 0;
-    const end = posSelector?.end ?? 0;
-    const type = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(ann))?.internalType || "highlight";
-    return {
-      id: ann.id,
-      exact: getExactText2(targetSelector),
-      offset: start2,
-      // remark plugin expects 'offset'
-      length: end - start2,
-      // remark plugin expects 'length', not 'end'
-      type,
-      source: getBodySource3(ann.body)
-    };
-  });
-}
-function BrowseView({
+var MemoizedMarkdown = memo(function MemoizedMarkdown2({
+  content: content4
+}) {
+  return /* @__PURE__ */ jsx27(
+    Markdown,
+    {
+      remarkPlugins: [remarkGfm],
+      children: content4
+    }
+  );
+});
+var BrowseView = memo(function BrowseView2({
   content: content4,
   mimeType,
   resourceUri: resourceUri2,
@@ -45466,8 +45413,27 @@ function BrowseView({
   const containerRef = useRef15(null);
   const category = getMimeCategory2(mimeType);
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
-  const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
-  const preparedAnnotations = prepareAnnotations(allAnnotations);
+  const allAnnotations = useMemo4(
+    () => [...highlights, ...references, ...assessments, ...comments, ...tags3],
+    [highlights, references, assessments, comments, tags3]
+  );
+  const overlayAnnotations = useMemo4(
+    () => toOverlayAnnotations(allAnnotations),
+    [allAnnotations]
+  );
+  const offsetMapRef = useRef15(null);
+  useEffect22(() => {
+    if (!containerRef.current) return;
+    offsetMapRef.current = buildSourceToRenderedMap(content4, containerRef.current);
+  }, [content4]);
+  useEffect22(() => {
+    if (!containerRef.current || !offsetMapRef.current || overlayAnnotations.length === 0) return;
+    const container = containerRef.current;
+    const textNodeIndex = buildTextNodeIndex(container);
+    const ranges = resolveAnnotationRanges(overlayAnnotations, offsetMapRef.current, textNodeIndex);
+    applyHighlights(ranges);
+    return () => clearHighlights(container);
+  }, [overlayAnnotations]);
   useEffect22(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
@@ -45546,19 +45512,7 @@ function BrowseView({
             annotators: ANNOTATORS
           }
         ),
-        /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx27(
-          Markdown,
-          {
-            remarkPlugins: [
-              remarkGfm,
-              [remarkAnnotations, { annotations: preparedAnnotations }]
-            ],
-            rehypePlugins: [
-              rehypeRenderAnnotations
-            ],
-            children: content4
-          }
-        ) })
+        /* @__PURE__ */ jsx27("div", { ref: containerRef, className: "semiont-browse-view__content", children: /* @__PURE__ */ jsx27(MemoizedMarkdown, { content: content4 }) })
       ] });
     case "image":
       if (isPdfMimeType3(mimeType)) {
@@ -45623,10 +45577,10 @@ function BrowseView({
         )
       ] }) });
   }
-}
+});
 
 // src/components/resource/ResourceViewer.tsx
-import { useState as useState17, useEffect as useEffect23, useCallback as useCallback16, useRef as useRef16 } from "react";
+import { useState as useState17, useEffect as useEffect23, useCallback as useCallback16, useRef as useRef16, useMemo as useMemo5 } from "react";
 import { resourceUri } from "@semiont/core";
 import { getExactText as getExactText3, getTargetSelector as getTargetSelector4, isHighlight as isHighlight4, isAssessment as isAssessment3, isReference as isReference4, isComment as isComment4, isTag as isTag5, getBodySource as getBodySource4 } from "@semiont/api-client";
 import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -45829,7 +45783,10 @@ function ResourceViewer({
     // Annotation clicks
     "attend:click": handleAnnotationClickEvent
   });
-  const annotationsCollection = { highlights, references, assessments, comments, tags: tags3 };
+  const annotationsCollection = useMemo5(
+    () => ({ highlights, references, assessments, comments, tags: tags3 }),
+    [highlights, references, assessments, comments, tags3]
+  );
   const uiState = {
     selectedMotivation,
     selectedClick,
@@ -46019,7 +45976,7 @@ var AssessmentEntry = forwardRef(
 );
 
 // src/components/resource/panels/AssessmentPanel.tsx
-import { useState as useState19, useEffect as useEffect25, useRef as useRef17, useCallback as useCallback18, useMemo as useMemo4 } from "react";
+import { useState as useState19, useEffect as useEffect25, useRef as useRef17, useCallback as useCallback18, useMemo as useMemo6 } from "react";
 import { getTextPositionSelector as getTextPositionSelector3, getTargetSelector as getTargetSelector5 } from "@semiont/api-client";
 
 // src/components/resource/panels/AssistSection.tsx
@@ -46269,7 +46226,7 @@ function AssessmentPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState19(null);
   const containerRef = useRef17(null);
   const entryRefs = useRef17(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo4(() => {
+  const sortedAnnotations = useMemo6(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector3(getTargetSelector5(a15.target));
       const bSelector = getTextPositionSelector3(getTargetSelector5(b8.target));
@@ -46630,7 +46587,7 @@ var CommentEntry = forwardRef2(
 );
 
 // src/components/resource/panels/CommentsPanel.tsx
-import { useState as useState21, useEffect as useEffect27, useRef as useRef19, useCallback as useCallback19, useMemo as useMemo5 } from "react";
+import { useState as useState21, useEffect as useEffect27, useRef as useRef19, useCallback as useCallback19, useMemo as useMemo7 } from "react";
 import { getTextPositionSelector as getTextPositionSelector4, getTargetSelector as getTargetSelector6 } from "@semiont/api-client";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 function getSelectorDisplayText2(selector) {
@@ -46662,7 +46619,7 @@ function CommentsPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState21(null);
   const containerRef = useRef19(null);
   const entryRefs = useRef19(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo5(() => {
+  const sortedAnnotations = useMemo7(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector4(getTargetSelector6(a15.target));
       const bSelector = getTextPositionSelector4(getTargetSelector6(b8.target));
@@ -46873,7 +46830,7 @@ var HighlightEntry = forwardRef3(
 );
 
 // src/components/resource/panels/HighlightPanel.tsx
-import { useEffect as useEffect28, useState as useState22, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect28, useState as useState22, useRef as useRef20, useCallback as useCallback20, useMemo as useMemo8 } from "react";
 import { getTextPositionSelector as getTextPositionSelector5, getTargetSelector as getTargetSelector7 } from "@semiont/api-client";
 import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
 function HighlightPanel({
@@ -46891,7 +46848,7 @@ function HighlightPanel({
   const [focusedAnnotationId, setFocusedAnnotationId] = useState22(null);
   const containerRef = useRef20(null);
   const entryRefs = useRef20(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo6(() => {
+  const sortedAnnotations = useMemo8(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector5(getTargetSelector7(a15.target));
       const bSelector = getTextPositionSelector5(getTargetSelector7(b8.target));
@@ -47217,7 +47174,7 @@ var ReferenceEntry = forwardRef4(
 );
 
 // src/components/resource/panels/ReferencesPanel.tsx
-import { useState as useState23, useRef as useRef22, useEffect as useEffect30, useCallback as useCallback21, useMemo as useMemo7 } from "react";
+import { useState as useState23, useRef as useRef22, useEffect as useEffect30, useCallback as useCallback21, useMemo as useMemo9 } from "react";
 import { getTextPositionSelector as getTextPositionSelector6, getTargetSelector as getTargetSelector9 } from "@semiont/api-client";
 import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
 function getSelectorDisplayText3(selector) {
@@ -47267,7 +47224,7 @@ function ReferencesPanel({
     localStorage.setItem("assist-section-expanded-reference", String(isAssistExpanded));
   }, [isAssistExpanded]);
   const entryRefs = useRef22(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo7(() => {
+  const sortedAnnotations = useMemo9(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector6(getTargetSelector9(a15.target));
       const bSelector = getTextPositionSelector6(getTargetSelector9(b8.target));
@@ -47775,7 +47732,7 @@ var TagEntry = forwardRef5(
 );
 
 // src/components/resource/panels/TaggingPanel.tsx
-import { useState as useState24, useEffect as useEffect31, useRef as useRef23, useCallback as useCallback22, useMemo as useMemo8 } from "react";
+import { useState as useState24, useEffect as useEffect31, useRef as useRef23, useCallback as useCallback22, useMemo as useMemo10 } from "react";
 import { getTextPositionSelector as getTextPositionSelector7, getTargetSelector as getTargetSelector10 } from "@semiont/api-client";
 import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
 function getSelectorDisplayText4(selector) {
@@ -47824,7 +47781,7 @@ function TaggingPanel({
     "attend:click": handleAnnotationClick
   });
   const entryRefs = useRef23(/* @__PURE__ */ new Map());
-  const sortedAnnotations = useMemo8(() => {
+  const sortedAnnotations = useMemo10(() => {
     return [...annotations].sort((a15, b8) => {
       const aSelector = getTextPositionSelector7(getTargetSelector10(a15.target));
       const bSelector = getTextPositionSelector7(getTargetSelector10(b8.target));
@@ -48593,16 +48550,16 @@ function SimpleNavigation({
 import { useCallback as useCallback29, useState as useState31, useRef as useRef30, useEffect as useEffect39 } from "react";
 
 // ../../node_modules/@dnd-kit/core/dist/core.esm.js
-import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect36, useState as useState29, useCallback as useCallback26, useMemo as useMemo10, useRef as useRef27, memo, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
+import React20, { createContext as createContext7, useContext as useContext7, useEffect as useEffect36, useState as useState29, useCallback as useCallback26, useMemo as useMemo12, useRef as useRef27, memo as memo2, useReducer, cloneElement, forwardRef as forwardRef6 } from "react";
 import { createPortal, unstable_batchedUpdates } from "react-dom";
 
 // ../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js
-import { useMemo as useMemo9, useLayoutEffect, useEffect as useEffect35, useRef as useRef26, useCallback as useCallback24 } from "react";
+import { useMemo as useMemo11, useLayoutEffect, useEffect as useEffect35, useRef as useRef26, useCallback as useCallback24 } from "react";
 function useCombinedRefs() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
-  return useMemo9(
+  return useMemo11(
     () => (node2) => {
       refs.forEach((ref) => ref(node2));
     },
@@ -48705,7 +48662,7 @@ function useLatestValue(value, dependencies) {
 }
 function useLazyMemo(callback, dependencies) {
   const valueRef = useRef26();
-  return useMemo9(
+  return useMemo11(
     () => {
       const newValue = callback(valueRef.current);
       valueRef.current = newValue;
@@ -48739,7 +48696,7 @@ function usePrevious(value) {
 }
 var ids = {};
 function useUniqueId(prefix, value) {
-  return useMemo9(() => {
+  return useMemo11(() => {
     if (value) {
       return value;
     }
@@ -49011,7 +48968,7 @@ function Accessibility(_ref) {
   useEffect36(() => {
     setMounted(true);
   }, []);
-  useDndMonitor(useMemo10(() => ({
+  useDndMonitor(useMemo12(() => ({
     onDragStart(_ref2) {
       let {
         active
@@ -49089,7 +49046,7 @@ var Action;
 function noop() {
 }
 function useSensor(sensor, options) {
-  return useMemo10(
+  return useMemo12(
     () => ({
       sensor,
       options: options != null ? options : {}
@@ -49102,7 +49059,7 @@ function useSensors() {
   for (var _len = arguments.length, sensors = new Array(_len), _key = 0; _key < _len; _key++) {
     sensors[_key] = arguments[_key];
   }
-  return useMemo10(
+  return useMemo12(
     () => [...sensors].filter((sensor) => sensor != null),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [...sensors]
@@ -50352,7 +50309,7 @@ function useAutoScroller(_ref) {
     x: 0,
     y: 0
   });
-  const rect = useMemo10(() => {
+  const rect = useMemo12(() => {
     switch (activator) {
       case AutoScrollActivator.Pointer:
         return pointerCoordinates ? {
@@ -50375,7 +50332,7 @@ function useAutoScroller(_ref) {
     const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
-  const sortedScrollableAncestors = useMemo10(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
+  const sortedScrollableAncestors = useMemo12(() => order2 === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order2, scrollableAncestors]);
   useEffect36(
     () => {
       if (!enabled || !scrollableAncestors.length || !rect) {
@@ -50489,7 +50446,7 @@ function useCachedNode(draggableNodes, id2) {
   }, [node2, id2]);
 }
 function useCombineActivators(sensors, getSyntheticHandler) {
-  return useMemo10(() => sensors.reduce((accumulator, sensor) => {
+  return useMemo12(() => sensors.reduce((accumulator, sensor) => {
     const {
       sensor: Sensor
     } = sensor;
@@ -50637,7 +50594,7 @@ function useMutationObserver(_ref) {
     disabled
   } = _ref;
   const handleMutations = useEvent(callback);
-  const mutationObserver = useMemo10(() => {
+  const mutationObserver = useMemo12(() => {
     if (disabled || typeof window === "undefined" || typeof window.MutationObserver === "undefined") {
       return void 0;
     }
@@ -50657,7 +50614,7 @@ function useResizeObserver(_ref) {
     disabled
   } = _ref;
   const handleResize = useEvent(callback);
-  const resizeObserver = useMemo10(
+  const resizeObserver = useMemo12(
     () => {
       if (disabled || typeof window === "undefined" || typeof window.ResizeObserver === "undefined") {
         return void 0;
@@ -50799,7 +50756,7 @@ function useScrollOffsets(elements) {
       });
     }
   }, [handleScroll, elements]);
-  return useMemo10(() => {
+  return useMemo12(() => {
     if (elements.length) {
       return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
     }
@@ -50858,7 +50815,7 @@ function useSensorSetup(sensors) {
   );
 }
 function useSyntheticListeners(listeners, id2) {
-  return useMemo10(() => {
+  return useMemo12(() => {
     return listeners.reduce((acc, _ref) => {
       let {
         eventName,
@@ -50872,7 +50829,7 @@ function useSyntheticListeners(listeners, id2) {
   }, [listeners, id2]);
 }
 function useWindowRect(element2) {
-  return useMemo10(() => element2 ? getWindowClientRect(element2) : null, [element2]);
+  return useMemo12(() => element2 ? getWindowClientRect(element2) : null, [element2]);
 }
 var defaultValue$2 = [];
 function useRects(elements, measure) {
@@ -50944,7 +50901,7 @@ function useDragOverlayMeasuring(_ref) {
     setRect(node2 ? measure(node2) : null);
   }, [measure, resizeObserver]);
   const [nodeRef, setRef] = useNodeRef(handleNodeChange);
-  return useMemo10(() => ({
+  return useMemo12(() => ({
     nodeRef,
     rect,
     setRef
@@ -51221,7 +51178,7 @@ function applyModifiers(modifiers2, _ref) {
   }, transform) : transform;
 }
 function useMeasuringConfiguration(config) {
-  return useMemo10(
+  return useMemo12(
     () => ({
       draggable: {
         ...defaultMeasuringConfiguration.draggable,
@@ -51299,7 +51256,7 @@ var Status;
   Status2[Status2["Initializing"] = 1] = "Initializing";
   Status2[Status2["Initialized"] = 2] = "Initialized";
 })(Status || (Status = {}));
-var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
+var DndContext = /* @__PURE__ */ memo2(function DndContext2(_ref) {
   var _sensorContext$curren, _dragOverlay$nodeRef$, _dragOverlay$rect, _over$rect;
   let {
     id: id2,
@@ -51332,7 +51289,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     initial: null,
     translated: null
   });
-  const active = useMemo10(() => {
+  const active = useMemo12(() => {
     var _node$data;
     return activeId != null ? {
       id: activeId,
@@ -51346,7 +51303,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   const [activatorEvent, setActivatorEvent] = useState29(null);
   const latestProps = useLatestValue(props, Object.values(props));
   const draggableDescribedById = useUniqueId("DndDescribedBy", id2);
-  const enabledDroppableContainers = useMemo10(() => droppableContainers.getEnabled(), [droppableContainers]);
+  const enabledDroppableContainers = useMemo12(() => droppableContainers.getEnabled(), [droppableContainers]);
   const measuringConfiguration = useMeasuringConfiguration(measuring);
   const {
     droppableRects,
@@ -51358,7 +51315,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     config: measuringConfiguration.droppable
   });
   const activeNode = useCachedNode(draggableNodes, activeId);
-  const activationCoordinates = useMemo10(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
+  const activationCoordinates = useMemo12(() => activatorEvent ? getEventCoordinates(activatorEvent) : null, [activatorEvent]);
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
@@ -51729,7 +51686,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     scrollableAncestors,
     scrollableAncestorRects
   });
-  const publicContext = useMemo10(() => {
+  const publicContext = useMemo12(() => {
     const context = {
       active,
       activeNode,
@@ -51751,7 +51708,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     };
     return context;
   }, [active, activeNode, activeNodeRect, activatorEvent, collisions, containerNodeRect, dragOverlay, draggableNodes, droppableContainers, droppableRects, over, measureDroppableContainers, scrollableAncestors, scrollableAncestorRects, measuringConfiguration, measuringScheduled, windowRect2]);
-  const internalContext = useMemo10(() => {
+  const internalContext = useMemo12(() => {
     const context = {
       activatorEvent,
       activators,
@@ -51846,7 +51803,7 @@ function useDraggable(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [draggableNodes, id2]
   );
-  const memoizedAttributes = useMemo10(() => ({
+  const memoizedAttributes = useMemo12(() => ({
     role,
     tabIndex,
     "aria-disabled": disabled,
@@ -51991,7 +51948,7 @@ function useDroppable(_ref) {
 }
 
 // ../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js
-import React21, { useMemo as useMemo11, useRef as useRef28, useEffect as useEffect37, useState as useState30, useContext as useContext8 } from "react";
+import React21, { useMemo as useMemo13, useRef as useRef28, useEffect as useEffect37, useState as useState30, useContext as useContext8 } from "react";
 function arrayMove(array, from, to) {
   const newArray = array.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -52145,7 +52102,7 @@ function SortableContext(_ref) {
   } = useDndContext();
   const containerId = useUniqueId(ID_PREFIX2, id2);
   const useDragOverlay = Boolean(dragOverlay.rect !== null);
-  const items = useMemo11(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
+  const items = useMemo13(() => userDefinedItems.map((item) => typeof item === "object" && "id" in item ? item.id : item), [userDefinedItems]);
   const isDragging = active != null;
   const activeIndex = active ? items.indexOf(active.id) : -1;
   const overIndex = over ? items.indexOf(over.id) : -1;
@@ -52161,7 +52118,7 @@ function SortableContext(_ref) {
   useEffect37(() => {
     previousItemsRef.current = items;
   }, [items]);
-  const contextValue = useMemo11(
+  const contextValue = useMemo13(
     () => ({
       activeIndex,
       containerId,
@@ -52288,7 +52245,7 @@ function useSortable(_ref) {
   } = useContext8(Context2);
   const disabled = normalizeLocalDisabled(localDisabled, globalDisabled);
   const index2 = items.indexOf(id2);
-  const data2 = useMemo11(() => ({
+  const data2 = useMemo13(() => ({
     sortable: {
       containerId,
       index: index2,
@@ -52296,7 +52253,7 @@ function useSortable(_ref) {
     },
     ...customData
   }), [containerId, customData, index2, items]);
-  const itemsAfterCurrentSortable = useMemo11(() => items.slice(items.indexOf(id2)), [items, id2]);
+  const itemsAfterCurrentSortable = useMemo13(() => items.slice(items.indexOf(id2)), [items, id2]);
   const {
     rect,
     node: node2,
@@ -56400,7 +56357,7 @@ function ResourceDiscoveryPage({
 }
 
 // src/features/resource-viewer/components/ResourceViewerPage.tsx
-import { useState as useState45, useEffect as useEffect49, useCallback as useCallback36, useMemo as useMemo12 } from "react";
+import { useState as useState45, useEffect as useEffect49, useCallback as useCallback36, useMemo as useMemo14 } from "react";
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { resourceAnnotationUri as resourceAnnotationUri3 } from "@semiont/core";
 import { getLanguage, getPrimaryRepresentation, getPrimaryMediaType as getPrimaryMediaType2 } from "@semiont/api-client";
@@ -57035,7 +56992,7 @@ function ResourceViewerPage({
   const entityTypesAPI = useEntityTypes();
   const { content: content4, loading: contentLoading } = useResourceContent(rUri, resource);
   const { data: annotationsData } = resources.annotations.useQuery(rUri);
-  const annotations = useMemo12(
+  const annotations = useMemo14(
     () => annotationsData?.annotations || [],
     [annotationsData?.annotations]
   );
@@ -57165,8 +57122,8 @@ function ResourceViewerPage({
   }, [updateMutation, rUri, refetchDocument, showError]);
   const handleResourceClone = useCallback36(async () => {
     try {
-      const result2 = await generateCloneTokenMutation.mutateAsync(rUri);
-      const token = result2.token;
+      const result = await generateCloneTokenMutation.mutateAsync(rUri);
+      const token = result.token;
       eventBus.get("navigation:router-push").next({ path: `/know/compose?mode=clone&token=${token}`, reason: "clone" });
     } catch (err) {
       console.error("Failed to generate clone token:", err);
@@ -57251,23 +57208,25 @@ function ResourceViewerPage({
     }
     return false;
   });
-  const result = {
-    highlights: [],
-    references: [],
-    assessments: [],
-    comments: [],
-    tags: []
-  };
-  for (const ann of annotations) {
-    const annotator = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(ann));
-    if (annotator) {
-      const key = annotator.internalType + "s";
-      if (result[key]) {
-        result[key].push(ann);
+  const groups = useMemo14(() => {
+    const result = {
+      highlights: [],
+      references: [],
+      assessments: [],
+      comments: [],
+      tags: []
+    };
+    for (const ann of annotations) {
+      const annotator = Object.values(ANNOTATORS).find((a15) => a15.matchesAnnotation(ann));
+      if (annotator) {
+        const key = annotator.internalType + "s";
+        if (result[key]) {
+          result[key].push(ann);
+        }
       }
     }
-  }
-  const groups = result;
+    return result;
+  }, [annotations]);
   const resourceWithContent = { ...resource, content: content4 };
   const handleEventHover = useCallback36((annotationId) => {
     if (annotationId) {
@@ -57539,7 +57498,11 @@ export {
   UnifiedHeader,
   UserMenuSkeleton,
   WelcomePage,
+  applyHighlights,
+  buildSourceToRenderedMap,
+  buildTextNodeIndex,
   buttonStyles,
+  clearHighlights,
   createHoverHandlers,
   cssVariables,
   dispatch401Error,
@@ -57562,12 +57525,12 @@ export {
   jsonLightHighlightStyle,
   jsonLightTheme,
   onAuthEvent,
-  rehypeRenderAnnotations,
-  remarkAnnotations,
   resetEventBusForTesting,
+  resolveAnnotationRanges,
   sanitizeImageURL,
   saveSelectedShapeForSelectorType,
   supportsDetection,
+  toOverlayAnnotations,
   tokens,
   useAdmin,
   useAnnotationFlow,