@semiont/react-ui 0.2.34 → 0.2.35-build.101

package/dist/index.mjs

@@ -17131,11 +17131,10 @@ var jsonLightHighlightStyle = HighlightStyle.define([
 // src/lib/codemirror-widgets.ts
 import { isResolvedReference, getBodySource } from "@semiont/api-client";
 var ReferenceResolutionWidget = class extends WidgetType {
-  constructor(annotation, targetDocumentName, eventBus, isGenerating) {
+  constructor(annotation, targetDocumentName, isGenerating) {
     super();
     this.annotation = annotation;
     this.targetDocumentName = targetDocumentName;
-    this.eventBus = eventBus;
     this.isGenerating = isGenerating;
   }
   eq(other) {
@@ -17152,10 +17151,17 @@ var ReferenceResolutionWidget = class extends WidgetType {
       margin-left: 4px;
       position: relative;
     `;
+    const isResolved = isResolvedReference(this.annotation);
+    const bodySource = getBodySource(this.annotation.body);
+    container.dataset.widgetAnnotationId = this.annotation.id;
+    container.dataset.widgetMotivation = this.annotation.motivation;
+    container.dataset.widgetResolved = isResolved ? "true" : "false";
+    if (bodySource) container.dataset.widgetBodySource = bodySource;
+    if (this.targetDocumentName) container.dataset.widgetTargetName = this.targetDocumentName;
+    if (this.isGenerating) container.dataset.widgetGenerating = "true";
     const indicator = document.createElement("button");
     indicator.className = "reference-indicator";
     indicator.type = "button";
-    const isResolved = isResolvedReference(this.annotation);
     if (isResolved) {
       indicator.innerHTML = '<span aria-hidden="true">\u{1F517}</span>';
       indicator.setAttribute("aria-label", this.targetDocumentName ? `Reference link to ${this.targetDocumentName}` : "Reference link to document");
@@ -17171,13 +17177,6 @@ var ReferenceResolutionWidget = class extends WidgetType {
         margin: 0;
         vertical-align: baseline;
       `;
-      indicator.style.cssText += `
-        &:focus {
-          outline: 2px solid #3b82f6;
-          outline-offset: 2px;
-          opacity: 1;
-        }
-      `;
     } else if (this.isGenerating) {
       indicator.innerHTML = `
         <span style="position: relative; display: inline-flex; align-items: center; justify-content: center;" aria-hidden="true">
@@ -17226,82 +17225,40 @@ var ReferenceResolutionWidget = class extends WidgetType {
         margin: 0;
         vertical-align: baseline;
       `;
-      indicator.style.cssText += `
-        &:focus {
-          outline: 2px solid #3b82f6;
-          outline-offset: 2px;
-          opacity: 1;
-        }
-      `;
-    }
-    if (!this.isGenerating) {
-      indicator.addEventListener("mouseenter", () => {
-        indicator.style.opacity = "1";
-        if (isResolved && this.targetDocumentName && this.targetDocumentName.trim() !== "") {
-          this.showPreview(container, this.targetDocumentName);
-        }
-      });
-      indicator.addEventListener("mouseleave", () => {
-        indicator.style.opacity = "0.6";
-        if (isResolved) {
-          this.hidePreview(container);
-        }
-      });
-      const bodySource = getBodySource(this.annotation.body);
-      if (isResolved && bodySource && this.eventBus) {
-        const eventBus = this.eventBus;
-        indicator.addEventListener("click", (e6) => {
-          e6.preventDefault();
-          e6.stopPropagation();
-          eventBus.get("navigation:reference-navigate").next({ documentId: bodySource });
-        });
-      } else if (!isResolved && this.eventBus) {
-        const eventBus = this.eventBus;
-        const annotation = this.annotation;
-        indicator.addEventListener("click", (e6) => {
-          e6.preventDefault();
-          e6.stopPropagation();
-          eventBus.get("attend:click").next({ annotationId: annotation.id, motivation: annotation.motivation });
-        });
-      }
     }
     container.appendChild(indicator);
     return container;
   }
-  showPreview(container, documentName) {
-    if (!documentName || documentName.trim() === "") {
-      return;
-    }
-    const tooltip = document.createElement("div");
-    tooltip.className = "reference-tooltip";
-    tooltip.textContent = `\u2192 ${documentName}`;
-    tooltip.style.cssText = `
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-4px);
-      padding: 4px 8px;
-      background: rgba(0, 0, 0, 0.8);
-      color: white;
-      border-radius: 4px;
-      font-size: 11px;
-      white-space: nowrap;
-      pointer-events: none;
-      z-index: 1000;
-      animation: fadeIn 0.2s ease;
-    `;
-    container.appendChild(tooltip);
-  }
-  hidePreview(container) {
-    const tooltip = container.querySelector(".reference-tooltip");
-    if (tooltip) {
-      tooltip.remove();
-    }
-  }
   ignoreEvent(event) {
     return event.type === "click";
   }
 };
+function showWidgetPreview(container, documentName) {
+  if (!documentName || documentName.trim() === "") return;
+  const tooltip = document.createElement("div");
+  tooltip.className = "reference-tooltip";
+  tooltip.textContent = `\u2192 ${documentName}`;
+  tooltip.style.cssText = `
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px);
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    border-radius: 4px;
+    font-size: 11px;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1000;
+    animation: fadeIn 0.2s ease;
+  `;
+  container.appendChild(tooltip);
+}
+function hideWidgetPreview(container) {
+  const tooltip = container.querySelector(".reference-tooltip");
+  if (tooltip) tooltip.remove();
+}
 
 // src/lib/media-shapes.ts
 import { isPdfMimeType } from "@semiont/api-client";
@@ -17353,402 +17310,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 });
-    }
+    wrapRangeTextNodes(range, id2, annotation);
   }
-  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];
-  }
-  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 +26141,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();
@@ -26447,8 +26156,14 @@ function convertSegmentPositions(segments, content4) {
     }
   }
   const convertPosition = (pos) => {
-    const crlfsBefore = crlfPositions.filter((crlfPos) => crlfPos < pos).length;
-    return pos - crlfsBefore;
+    let lo = 0;
+    let hi = crlfPositions.length;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (crlfPositions[mid] < pos) lo = mid + 1;
+      else hi = mid;
+    }
+    return pos - lo;
   };
   return segments.map((seg) => ({
     ...seg,
@@ -26526,20 +26241,19 @@ function createAnnotationDecorationsField() {
     provide: (field) => EditorView.decorations.from(field)
   });
 }
-function buildWidgetDecorations(_content, segments, generatingReferenceId, eventBus, getTargetDocumentName) {
+function buildWidgetDecorations(_content, segments, generatingReferenceId, getTargetDocumentName) {
   const builder = new RangeSetBuilder();
   const allAnnotatedSegments = segments.filter((s11) => s11.annotation).sort((a15, b8) => a15.end - b8.end);
   for (const segment of allAnnotatedSegments) {
     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(
         annotation,
         targetName,
-        eventBus,
         isGenerating
       );
       builder.add(
@@ -26563,7 +26277,6 @@ var widgetDecorationsField = StateField.define({
           effect.value.content,
           effect.value.segments,
           effect.value.generatingReferenceId,
-          effect.value.eventBus,
           effect.value.getTargetDocumentName
         );
       }
@@ -26579,7 +26292,6 @@ function CodeMirrorRenderer({
   editable: editable2 = false,
   newAnnotationIds,
   hoveredAnnotationId,
-  hoveredCommentId,
   scrollToAnnotationId,
   sourceView = false,
   showLineNumbers = false,
@@ -26594,10 +26306,16 @@ function CodeMirrorRenderer({
   const contentRef = useRef7(content4);
   const convertedSegments = convertSegmentPositions(segments, content4);
   const segmentsRef = useRef7(convertedSegments);
+  const segmentsByIdRef = useRef7(/* @__PURE__ */ new Map());
   const lineNumbersCompartment = useRef7(new Compartment());
   const eventBusRef = useRef7(eventBus);
   const getTargetDocumentNameRef = useRef7(getTargetDocumentName);
   segmentsRef.current = segments;
+  const segmentsById = /* @__PURE__ */ new Map();
+  for (const s11 of segments) {
+    if (s11.annotation) segmentsById.set(s11.annotation.id, s11);
+  }
+  segmentsByIdRef.current = segmentsById;
   eventBusRef.current = eventBus;
   getTargetDocumentNameRef.current = getTargetDocumentName;
   useEffect10(() => {
@@ -26627,7 +26345,7 @@ function CodeMirrorRenderer({
             const annotationElement = target.closest("[data-annotation-id]");
             const annotationId = annotationElement?.getAttribute("data-annotation-id");
             if (annotationId && eventBusRef.current) {
-              const segment = segmentsRef.current.find((s11) => s11.annotation?.id === annotationId);
+              const segment = segmentsByIdRef.current.get(annotationId);
               if (segment?.annotation) {
                 event.preventDefault();
                 eventBusRef.current.get("attend:click").next({
@@ -26705,11 +26423,54 @@ function CodeMirrorRenderer({
       const annotationElement = target.closest("[data-annotation-id]");
       if (annotationElement) handleMouseLeave();
     };
+    const handleWidgetClick = (e6) => {
+      const target = e6.target;
+      const widget = target.closest(".reference-preview-widget");
+      if (!widget || widget.dataset.widgetGenerating === "true") return;
+      e6.preventDefault();
+      e6.stopPropagation();
+      const annotationId = widget.dataset.widgetAnnotationId;
+      const bodySource = widget.dataset.widgetBodySource;
+      const isResolved = widget.dataset.widgetResolved === "true";
+      if (!annotationId || !eventBusRef.current) return;
+      if (isResolved && bodySource) {
+        eventBusRef.current.get("navigation:reference-navigate").next({ documentId: bodySource });
+      } else {
+        const motivation = widget.dataset.widgetMotivation || "linking";
+        eventBusRef.current.get("attend:click").next({ annotationId, motivation });
+      }
+    };
+    const handleWidgetMouseEnter = (e6) => {
+      const target = e6.target;
+      const widget = target.closest(".reference-preview-widget");
+      if (!widget || widget.dataset.widgetGenerating === "true") return;
+      const indicator = widget.querySelector(".reference-indicator");
+      if (indicator) indicator.style.opacity = "1";
+      if (widget.dataset.widgetResolved === "true" && widget.dataset.widgetTargetName) {
+        showWidgetPreview(widget, widget.dataset.widgetTargetName);
+      }
+    };
+    const handleWidgetMouseLeave = (e6) => {
+      const target = e6.target;
+      const widget = target.closest(".reference-preview-widget");
+      if (!widget) return;
+      const indicator = widget.querySelector(".reference-indicator");
+      if (indicator) indicator.style.opacity = "0.6";
+      if (widget.dataset.widgetResolved === "true") {
+        hideWidgetPreview(widget);
+      }
+    };
     container.addEventListener("mouseover", handleMouseOver);
     container.addEventListener("mouseout", handleMouseOut);
+    container.addEventListener("click", handleWidgetClick);
+    container.addEventListener("mouseenter", handleWidgetMouseEnter, true);
+    container.addEventListener("mouseleave", handleWidgetMouseLeave, true);
     return () => {
       container.removeEventListener("mouseover", handleMouseOver);
       container.removeEventListener("mouseout", handleMouseOut);
+      container.removeEventListener("click", handleWidgetClick);
+      container.removeEventListener("mouseenter", handleWidgetMouseEnter, true);
+      container.removeEventListener("mouseleave", handleWidgetMouseLeave, true);
       cleanupHover();
       view.destroy();
       viewRef.current = null;
@@ -26750,7 +26511,6 @@ function CodeMirrorRenderer({
         content: content4,
         segments: convertedSegments,
         generatingReferenceId,
-        eventBus: eventBusRef.current,
         getTargetDocumentName: getTargetDocumentNameRef.current
       })
     });
@@ -26783,34 +26543,6 @@ function CodeMirrorRenderer({
       element2.classList.remove("annotation-pulse");
     };
   }, [hoveredAnnotationId]);
-  useEffect10(() => {
-    if (!viewRef.current || !hoveredCommentId) return void 0;
-    const view = viewRef.current;
-    const element2 = view.contentDOM.querySelector(
-      `[data-annotation-id="${CSS.escape(hoveredCommentId)}"]`
-    );
-    if (!element2) return void 0;
-    const scrollContainer = element2.closest(".semiont-annotate-view__content") || element2.closest(".semiont-document-viewer__scrollable-body");
-    if (scrollContainer) {
-      const elementRect = element2.getBoundingClientRect();
-      const containerRect = scrollContainer.getBoundingClientRect();
-      const isVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
-      if (!isVisible) {
-        const elementTop = element2.offsetTop;
-        const containerHeight = scrollContainer.clientHeight;
-        const elementHeight = element2.offsetHeight;
-        const scrollTo = elementTop - containerHeight / 2 + elementHeight / 2;
-        scrollContainer.scrollTo({ top: scrollTo, behavior: "smooth" });
-      }
-    }
-    const timeoutId = setTimeout(() => {
-      element2.classList.add("annotation-pulse");
-    }, 100);
-    return () => {
-      clearTimeout(timeoutId);
-      element2.classList.remove("annotation-pulse");
-    };
-  }, [hoveredCommentId]);
   useEffect10(() => {
     if (!viewRef.current || !scrollToAnnotationId) return;
     scrollAnnotationIntoView(scrollToAnnotationId, viewRef.current.contentDOM);
@@ -30370,16 +30102,17 @@ 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, buildContentCache } 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) {
   if (!content4) {
     return [{ exact: "", start: 0, end: 0 }];
   }
+  const cache2 = buildContentCache(content4);
   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) {
@@ -30388,8 +30121,8 @@ function segmentTextWithAnnotations(content4, annotations) {
         quoteSelector.exact,
         quoteSelector.prefix,
         quoteSelector.suffix,
-        posSelector?.start
-        // Position hint for fuzzy matching
+        posSelector?.start,
+        cache2
       );
     }
     const start2 = position4?.start ?? posSelector?.start ?? 0;
@@ -30452,7 +30185,7 @@ function AnnotateView({
   const { highlights, references, assessments, comments, tags: tags3 } = annotations;
   const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags3];
   const segments = segmentTextWithAnnotations(content4, allAnnotations);
-  const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, hoveredCommentId, scrollToAnnotationId } = uiState;
+  const { selectedMotivation, selectedClick, selectedShape, hoveredAnnotationId, scrollToAnnotationId } = uiState;
   const onUIStateChangeRef = useRef12(onUIStateChange);
   onUIStateChangeRef.current = onUIStateChange;
   const handleToolbarSelectionChanged = useCallback13(({ motivation }) => {
@@ -30585,7 +30318,6 @@ function AnnotateView({
             editable: false,
             newAnnotationIds,
             ...hoveredAnnotationId !== void 0 && { hoveredAnnotationId },
-            ...hoveredCommentId !== void 0 && { hoveredCommentId },
             ...scrollToAnnotationId !== void 0 && { scrollToAnnotationId },
             sourceView: true,
             showLineNumbers,
@@ -30620,7 +30352,7 @@ function AnnotateView({
               drawingMode: selectedMotivation ? selectedShape : null,
               selectedMotivation,
               eventBus,
-              hoveredAnnotationId: hoveredCommentId || hoveredAnnotationId || null,
+              hoveredAnnotationId: hoveredAnnotationId || null,
               hoverDelayMs
             }
           ) }) })
@@ -30647,7 +30379,7 @@ function AnnotateView({
             drawingMode: selectedMotivation ? selectedShape : null,
             selectedMotivation,
             eventBus,
-            hoveredAnnotationId: hoveredCommentId || hoveredAnnotationId || null,
+            hoveredAnnotationId: hoveredAnnotationId || null,
             hoverDelayMs
           }
         ) })
@@ -30681,7 +30413,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 +30524,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 +30542,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 +30556,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 +30576,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 +30830,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 +30860,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 +32400,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 +32515,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 +32534,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 +32628,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 +40531,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 +40883,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 +41776,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 +41821,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 +41877,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 +41893,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 +41921,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 +42482,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 +42593,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 +42605,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 +43812,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 +43844,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 +43963,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 +45347,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 +45368,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 +45393,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 +45492,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 +45557,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";
@@ -45741,7 +45675,6 @@ function ResourceViewer({
   const [jsonLdAnnotation, setJsonLdAnnotation] = useState17(null);
   const [deleteConfirmation, setDeleteConfirmation] = useState17(null);
   const hoveredAnnotationId = hoveredAnnotationIdProp ?? null;
-  const [hoveredCommentId, _setHoveredCommentId] = useState17(null);
   const [scrollToAnnotationId, setScrollToAnnotationId] = useState17(null);
   const [_focusedAnnotationId, setFocusedAnnotationId] = useState17(null);
   const focusAnnotation = useCallback16((annotationId) => {
@@ -45829,7 +45762,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,
@@ -45869,7 +45805,6 @@ function ResourceViewer({
         mimeType,
         resourceUri: resource["@id"],
         annotations: annotationsCollection,
-        hoveredCommentId,
         selectedClick,
         hoverDelayMs,
         annotateMode
@@ -46019,7 +45954,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 +46204,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 +46565,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 +46597,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 +46808,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 +46826,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 +47152,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 +47202,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 +47710,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 +47759,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 +48528,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 +48640,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 +48674,7 @@ function usePrevious(value) {
 }
 var ids = {};
 function useUniqueId(prefix, value) {
-  return useMemo9(() => {
+  return useMemo11(() => {
     if (value) {
       return value;
     }
@@ -49011,7 +48946,7 @@ function Accessibility(_ref) {
   useEffect36(() => {
     setMounted(true);
   }, []);
-  useDndMonitor(useMemo10(() => ({
+  useDndMonitor(useMemo12(() => ({
     onDragStart(_ref2) {
       let {
         active
@@ -49089,7 +49024,7 @@ var Action;
 function noop() {
 }
 function useSensor(sensor, options) {
-  return useMemo10(
+  return useMemo12(
     () => ({
       sensor,
       options: options != null ? options : {}
@@ -49102,7 +49037,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 +50287,7 @@ function useAutoScroller(_ref) {
     x: 0,
     y: 0
   });
-  const rect = useMemo10(() => {
+  const rect = useMemo12(() => {
     switch (activator) {
       case AutoScrollActivator.Pointer:
         return pointerCoordinates ? {
@@ -50375,7 +50310,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 +50424,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 +50572,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 +50592,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 +50734,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 +50793,7 @@ function useSensorSetup(sensors) {
   );
 }
 function useSyntheticListeners(listeners, id2) {
-  return useMemo10(() => {
+  return useMemo12(() => {
     return listeners.reduce((acc, _ref) => {
       let {
         eventName,
@@ -50872,7 +50807,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 +50879,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 +51156,7 @@ function applyModifiers(modifiers2, _ref) {
   }, transform) : transform;
 }
 function useMeasuringConfiguration(config) {
-  return useMemo10(
+  return useMemo12(
     () => ({
       draggable: {
         ...defaultMeasuringConfiguration.draggable,
@@ -51299,7 +51234,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 +51267,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 +51281,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 +51293,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 +51664,7 @@ var DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     scrollableAncestors,
     scrollableAncestorRects
   });
-  const publicContext = useMemo10(() => {
+  const publicContext = useMemo12(() => {
     const context = {
       active,
       activeNode,
@@ -51751,7 +51686,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 +51781,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 +51926,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 +52080,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 +52096,7 @@ function SortableContext(_ref) {
   useEffect37(() => {
     previousItemsRef.current = items;
   }, [items]);
-  const contextValue = useMemo11(
+  const contextValue = useMemo13(
     () => ({
       activeIndex,
       containerId,
@@ -52288,7 +52223,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 +52231,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,
@@ -54693,6 +54628,68 @@ function UserCircleIcon({
 var ForwardRef17 = /* @__PURE__ */ React44.forwardRef(UserCircleIcon);
 var UserCircleIcon_default = ForwardRef17;
 
+// src/hooks/usePanelNavigation.ts
+import { useState as useState36, useCallback as useCallback31, useEffect as useEffect43 } from "react";
+var COMMON_PANELS = ["user", "settings"];
+var RESOURCE_PANELS = ["history", "info", "annotations", "collaboration", "jsonld"];
+var tabGenerationCounter = 0;
+function usePanelNavigation() {
+  const [activePanel, setActivePanel] = useState36(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("activeToolbarPanel");
+      return saved || null;
+    }
+    return null;
+  });
+  const [scrollToAnnotationId, setScrollToAnnotationId] = useState36(null);
+  const [panelInitialTab, setPanelInitialTab] = useState36(null);
+  useEffect43(() => {
+    if (typeof window === "undefined") return;
+    if (activePanel) {
+      localStorage.setItem("activeToolbarPanel", activePanel);
+    } else {
+      localStorage.removeItem("activeToolbarPanel");
+    }
+  }, [activePanel]);
+  const handleScrollCompleted = useCallback31(() => {
+    setScrollToAnnotationId(null);
+  }, []);
+  const handlePanelToggle = useCallback31(({ panel }) => {
+    setActivePanel((current) => current === panel ? null : panel);
+  }, []);
+  const handlePanelOpen = useCallback31(({ panel, scrollToAnnotationId: scrollTarget, motivation }) => {
+    if (scrollTarget) {
+      setScrollToAnnotationId(scrollTarget);
+    }
+    if (motivation) {
+      const motivationToTab = {
+        "linking": "reference",
+        "commenting": "comment",
+        "tagging": "tag",
+        "highlighting": "highlight",
+        "assessing": "assessment"
+      };
+      const tab2 = motivationToTab[motivation] || "highlight";
+      setPanelInitialTab({ tab: tab2, generation: ++tabGenerationCounter });
+    }
+    setActivePanel(panel);
+  }, []);
+  const handlePanelClose = useCallback31(() => {
+    setActivePanel(null);
+  }, []);
+  useEventSubscriptions({
+    "attend:panel-toggle": handlePanelToggle,
+    "attend:panel-open": handlePanelOpen,
+    "attend:panel-close": handlePanelClose
+  });
+  return {
+    activePanel,
+    scrollToAnnotationId,
+    panelInitialTab,
+    onScrollCompleted: handleScrollCompleted
+  };
+}
+
 // src/features/admin-devops/components/AdminDevOpsPage.tsx
 import { jsx as jsx66, jsxs as jsxs54 } from "react/jsx-runtime";
 function AdminDevOpsPage({
@@ -54705,7 +54702,7 @@ function AdminDevOpsPage({
   ToolbarPanels,
   Toolbar: Toolbar2
 }) {
-  return /* @__PURE__ */ jsxs54("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs54("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs54("div", { className: "semiont-page__content", children: [
       /* @__PURE__ */ jsxs54("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx66("h1", { className: "semiont-page__title", children: t12.title }),
@@ -54778,7 +54775,7 @@ function AdminSecurityPage({
   ToolbarPanels,
   Toolbar: Toolbar2
 }) {
-  return /* @__PURE__ */ jsxs55("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs55("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsx67("div", { className: "semiont-page__content", children: /* @__PURE__ */ jsxs55("div", { className: "semiont-page__sections", children: [
       /* @__PURE__ */ jsxs55("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx67("h1", { className: "semiont-page__title", children: t12.title }),
@@ -54861,7 +54858,7 @@ function AdminSecurityPage({
 }
 
 // src/features/admin-users/components/AdminUsersPage.tsx
-import { useState as useState36 } from "react";
+import { useState as useState37 } from "react";
 import { Fragment as Fragment15, jsx as jsx68, jsxs as jsxs56 } from "react/jsx-runtime";
 function UserTableRow({
   user,
@@ -54943,9 +54940,9 @@ function AdminUsersPage({
   Toolbar: Toolbar2,
   buttonStyles: buttonStyles2
 }) {
-  const [searchTerm, setSearchTerm] = useState36("");
-  const [selectedRole, setSelectedRole] = useState36("all");
-  const [selectedStatus, setSelectedStatus] = useState36("all");
+  const [searchTerm, setSearchTerm] = useState37("");
+  const [selectedRole, setSelectedRole] = useState37("all");
+  const [selectedStatus, setSelectedStatus] = useState37("all");
   const filteredUsers = users.filter((user) => {
     const matchesSearch = (user.name || "").toLowerCase().includes(searchTerm.toLowerCase()) || user.email.toLowerCase().includes(searchTerm.toLowerCase());
     const userRole = user.isAdmin ? "admin" : "user";
@@ -54954,7 +54951,7 @@ function AdminUsersPage({
     const matchesStatus = selectedStatus === "all" || userStatus === selectedStatus;
     return matchesSearch && matchesRole && matchesStatus;
   });
-  return /* @__PURE__ */ jsxs56("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs56("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsx68("div", { className: "semiont-page__content", children: /* @__PURE__ */ jsxs56("div", { className: "semiont-page__sections", children: [
       /* @__PURE__ */ jsxs56("div", { className: "semiont-page__header-with-action", children: [
         /* @__PURE__ */ jsxs56("div", { children: [
@@ -55260,7 +55257,7 @@ function SignInForm({
 }
 
 // src/features/auth/components/SignUpForm.tsx
-import { useState as useState37 } from "react";
+import { useState as useState38 } from "react";
 import { jsx as jsx70, jsxs as jsxs58 } from "react/jsx-runtime";
 function GoogleIcon2() {
   return /* @__PURE__ */ jsxs58("svg", { className: "semiont-icon semiont-icon--small semiont-icon--inline", viewBox: "0 0 24 24", children: [
@@ -55295,7 +55292,7 @@ function GoogleIcon2() {
   ] });
 }
 function SignUpForm({ onSignUp, Link, translations: t12 }) {
-  const [isLoading, setIsLoading] = useState37(false);
+  const [isLoading, setIsLoading] = useState38(false);
   const handleSignUp = async () => {
     setIsLoading(true);
     try {
@@ -55520,7 +55517,7 @@ function EntityTagsPage({
       onAddTag();
     }
   };
-  return /* @__PURE__ */ jsxs61("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs61("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs61("div", { className: "semiont-page__content", children: [
       /* @__PURE__ */ jsxs61("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx73("h1", { className: "semiont-page__title", children: t12.pageTitle }),
@@ -55608,7 +55605,7 @@ function RecentDocumentsPage({
   if (isLoading) {
     return /* @__PURE__ */ jsx74("div", { className: "semiont-page__loading", children: /* @__PURE__ */ jsx74("p", { className: "semiont-page__loading-text", children: t12.loading }) });
   }
-  return /* @__PURE__ */ jsxs62("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs62("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs62("div", { className: "semiont-page__content", children: [
       /* @__PURE__ */ jsxs62("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx74("h1", { className: "semiont-page__title", children: t12.pageTitle }),
@@ -55674,7 +55671,7 @@ function TagSchemasPage({
   if (isLoading) {
     return /* @__PURE__ */ jsx75("div", { className: "semiont-page__loading", children: /* @__PURE__ */ jsx75("p", { className: "semiont-page__loading-text", children: t12.loading }) });
   }
-  return /* @__PURE__ */ jsxs63("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs63("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs63("div", { className: "semiont-page__content", children: [
       /* @__PURE__ */ jsxs63("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx75("h1", { className: "semiont-page__title", children: t12.pageTitle }),
@@ -55752,7 +55749,7 @@ function TagSchemasPage({
 }
 
 // src/features/resource-compose/components/ResourceComposePage.tsx
-import { useState as useState38, useEffect as useEffect43 } from "react";
+import { useState as useState39, useEffect as useEffect44 } from "react";
 import { isImageMimeType, isPdfMimeType as isPdfMimeType4, LOCALES as LOCALES2 } from "@semiont/api-client";
 import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
 function ResourceComposePage({
@@ -55772,19 +55769,19 @@ function ResourceComposePage({
   Toolbar: Toolbar2
 }) {
   const { announceFormSubmitting, announceFormSuccess, announceFormError } = useFormAnnouncements();
-  const [newResourceName, setNewResourceName] = useState38("");
-  const [newResourceContent, setNewResourceContent] = useState38("");
-  const [selectedEntityTypes, setSelectedEntityTypes] = useState38([]);
-  const [isCreating, setIsCreating] = useState38(false);
-  const [inputMethod, setInputMethod] = useState38("write");
-  const [uploadedFile, setUploadedFile] = useState38(null);
-  const [fileMimeType, setFileMimeType] = useState38("text/markdown");
-  const [filePreviewUrl, setFilePreviewUrl] = useState38(null);
-  const [selectedFormat, setSelectedFormat] = useState38("text/markdown");
-  const [selectedLanguage, setSelectedLanguage] = useState38(initialLocale);
-  const [selectedCharset, setSelectedCharset] = useState38("");
-  const [archiveOriginal, setArchiveOriginal] = useState38(true);
-  useEffect43(() => {
+  const [newResourceName, setNewResourceName] = useState39("");
+  const [newResourceContent, setNewResourceContent] = useState39("");
+  const [selectedEntityTypes, setSelectedEntityTypes] = useState39([]);
+  const [isCreating, setIsCreating] = useState39(false);
+  const [inputMethod, setInputMethod] = useState39("write");
+  const [uploadedFile, setUploadedFile] = useState39(null);
+  const [fileMimeType, setFileMimeType] = useState39("text/markdown");
+  const [filePreviewUrl, setFilePreviewUrl] = useState39(null);
+  const [selectedFormat, setSelectedFormat] = useState39("text/markdown");
+  const [selectedLanguage, setSelectedLanguage] = useState39(initialLocale);
+  const [selectedCharset, setSelectedCharset] = useState39("");
+  const [archiveOriginal, setArchiveOriginal] = useState39(true);
+  useEffect44(() => {
     if (mode === "clone" && cloneData) {
       setNewResourceName(cloneData.sourceResource.name);
       setNewResourceContent(cloneData.sourceContent);
@@ -55817,7 +55814,7 @@ function ResourceComposePage({
       reader.readAsText(file);
     }
   };
-  useEffect43(() => {
+  useEffect44(() => {
     return () => {
       if (filePreviewUrl) {
         URL.revokeObjectURL(filePreviewUrl);
@@ -55865,7 +55862,7 @@ function ResourceComposePage({
   };
   const isClone = mode === "clone";
   const isReferenceCompletion = mode === "reference";
-  return /* @__PURE__ */ jsxs64("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs64("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs64("div", { className: "semiont-page__content semiont-page__compose", children: [
       /* @__PURE__ */ jsxs64("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx76("h1", { className: "semiont-page__title", children: isClone ? t12.titleEditClone : isReferenceCompletion ? t12.titleCompleteReference : t12.title }),
@@ -56166,7 +56163,7 @@ function ResourceComposePage({
 }
 
 // src/features/resource-discovery/components/ResourceDiscoveryPage.tsx
-import { useState as useState39, useCallback as useCallback31, useRef as useRef31 } from "react";
+import { useState as useState40, useCallback as useCallback32, useRef as useRef31 } from "react";
 import { getResourceId as getResourceId2 } from "@semiont/api-client";
 
 // src/features/resource-discovery/components/ResourceCard.tsx
@@ -56239,8 +56236,8 @@ function ResourceDiscoveryPage({
   translations: t12,
   ToolbarPanels
 }) {
-  const [searchQuery2, setSearchQuery] = useState39("");
-  const [selectedEntityType, setSelectedEntityType] = useState39("");
+  const [searchQuery2, setSearchQuery] = useState40("");
+  const [selectedEntityType, setSelectedEntityType] = useState40("");
   const hasSearchQuery = searchQuery2.trim() !== "";
   const hasSearchResults = searchDocuments.length > 0;
   const baseDocuments = hasSearchResults ? searchDocuments : recentDocuments;
@@ -56259,23 +56256,23 @@ function ResourceDiscoveryPage({
   );
   const onNavigateToResourceRef = useRef31(onNavigateToResource);
   onNavigateToResourceRef.current = onNavigateToResource;
-  const handleEntityTypeFilter = useCallback31((entityType3) => {
+  const handleEntityTypeFilter = useCallback32((entityType3) => {
     setSelectedEntityType(entityType3);
   }, []);
-  const openResource = useCallback31((resource) => {
+  const openResource = useCallback32((resource) => {
     const resourceId = getResourceId2(resource);
     if (resourceId) {
       onNavigateToResourceRef.current(resourceId);
     }
   }, []);
-  const handleSearchSubmit = useCallback31((e6) => {
+  const handleSearchSubmit = useCallback32((e6) => {
     e6.preventDefault();
   }, []);
   if (isLoadingRecent) {
     return /* @__PURE__ */ jsx78("div", { className: "semiont-page__loading", children: /* @__PURE__ */ jsx78("p", { className: "semiont-page__loading-text", children: t12.loadingKnowledgeBase }) });
   }
   const showNoResultsWarning = hasSearchQuery && !hasSearchResults && !isSearching;
-  return /* @__PURE__ */ jsxs66("div", { className: `semiont-page${activePanel ? " semiont-page--panel-open" : ""}`, children: [
+  return /* @__PURE__ */ jsxs66("div", { className: `semiont-page${activePanel && COMMON_PANELS.includes(activePanel) ? " semiont-page--panel-open" : ""}`, children: [
     /* @__PURE__ */ jsxs66("div", { className: "semiont-page__content", children: [
       /* @__PURE__ */ jsxs66("div", { className: "semiont-page__header", children: [
         /* @__PURE__ */ jsx78("h1", { className: "semiont-page__title", children: t12.title }),
@@ -56400,14 +56397,14 @@ 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";
 import { uriToAnnotationId as uriToAnnotationId2 } from "@semiont/core";
 
 // src/hooks/useResolutionFlow.ts
-import { useCallback as useCallback32, useEffect as useEffect44, useRef as useRef32, useState as useState40 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect45, useRef as useRef32, useState as useState41 } from "react";
 import { resourceAnnotationUri, accessToken as accessToken3 } from "@semiont/core";
 import { uriToAnnotationIdOrPassthrough } from "@semiont/core";
 function toAccessToken2(token) {
@@ -56418,24 +56415,24 @@ function useResolutionFlow(rUri) {
   const client = useApiClient();
   const token = useAuthToken();
   const { showError } = useToast();
-  const [searchModalOpen, setSearchModalOpen] = useState40(false);
-  const [pendingReferenceId, setPendingReferenceId] = useState40(null);
-  const onCloseSearchModal = useCallback32(() => {
+  const [searchModalOpen, setSearchModalOpen] = useState41(false);
+  const [pendingReferenceId, setPendingReferenceId] = useState41(null);
+  const onCloseSearchModal = useCallback33(() => {
     setSearchModalOpen(false);
   }, []);
   const rUriRef = useRef32(rUri);
-  useEffect44(() => {
+  useEffect45(() => {
     rUriRef.current = rUri;
   });
   const clientRef = useRef32(client);
-  useEffect44(() => {
+  useEffect45(() => {
     clientRef.current = client;
   });
   const tokenRef = useRef32(token);
-  useEffect44(() => {
+  useEffect45(() => {
     tokenRef.current = token;
   });
-  useEffect44(() => {
+  useEffect45(() => {
     const handleAnnotationUpdateBody = async (event) => {
       try {
         const annotationIdSegment = uriToAnnotationIdOrPassthrough(event.annotationUri);
@@ -56463,7 +56460,7 @@ function useResolutionFlow(rUri) {
       subscription2.unsubscribe();
     };
   }, [eventBus]);
-  useEffect44(() => {
+  useEffect45(() => {
     const handleResolutionSearchRequested = (event) => {
       setPendingReferenceId(event.referenceId);
       setSearchModalOpen(true);
@@ -56478,7 +56475,7 @@ function useResolutionFlow(rUri) {
 }
 
 // src/hooks/useAnnotationFlow.ts
-import { useState as useState41, useRef as useRef33, useEffect as useEffect45, useCallback as useCallback33 } from "react";
+import { useState as useState42, useRef as useRef33, useEffect as useEffect46, useCallback as useCallback34 } from "react";
 import { resourceAnnotationUri as resourceAnnotationUri2, accessToken as accessToken4, entityType as entityType2 } from "@semiont/core";
 import { uriToAnnotationIdOrPassthrough as uriToAnnotationIdOrPassthrough2 } from "@semiont/core";
 function toAccessToken3(token) {
@@ -56492,17 +56489,17 @@ function useAnnotationFlow(rUri) {
   const clientRef = useRef33(client);
   const rUriRef = useRef33(rUri);
   const tokenRef = useRef33(token);
-  useEffect45(() => {
+  useEffect46(() => {
     clientRef.current = client;
   });
-  useEffect45(() => {
+  useEffect46(() => {
     rUriRef.current = rUri;
   });
-  useEffect45(() => {
+  useEffect46(() => {
     tokenRef.current = token;
   });
-  const [pendingAnnotation, setPendingAnnotation] = useState41(null);
-  const handleAnnotationRequested = useCallback33((pending) => {
+  const [pendingAnnotation, setPendingAnnotation] = useState42(null);
+  const handleAnnotationRequested = useCallback34((pending) => {
     const MOTIVATION_TO_TAB = {
       highlighting: "annotations",
       commenting: "annotations",
@@ -56521,7 +56518,7 @@ function useAnnotationFlow(rUri) {
     eventBus.get("attend:panel-open").next({ panel: MOTIVATION_TO_TAB[pending.motivation] || "annotations" });
     setPendingAnnotation(pending);
   }, []);
-  const selectionToSelector = useCallback33((selection2) => {
+  const selectionToSelector = useCallback34((selection2) => {
     if (selection2.svgSelector) {
       return {
         type: "SvgSelector",
@@ -56553,29 +56550,29 @@ function useAnnotationFlow(rUri) {
       ...selection2.suffix && { suffix: selection2.suffix }
     };
   }, []);
-  const handleCommentRequested = useCallback33((selection2) => {
+  const handleCommentRequested = useCallback34((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "commenting" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleTagRequested = useCallback33((selection2) => {
+  const handleTagRequested = useCallback34((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "tagging" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAssessmentRequested = useCallback33((selection2) => {
+  const handleAssessmentRequested = useCallback34((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "assessing" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleReferenceRequested = useCallback33((selection2) => {
+  const handleReferenceRequested = useCallback34((selection2) => {
     handleAnnotationRequested({ selector: selectionToSelector(selection2), motivation: "linking" });
   }, [handleAnnotationRequested, selectionToSelector]);
-  const handleAnnotationCancelPending = useCallback33(() => {
+  const handleAnnotationCancelPending = useCallback34(() => {
     setPendingAnnotation(null);
   }, []);
-  const [assistingMotivation, setAssistingMotivation] = useState41(null);
-  const [progress, setProgress] = useState41(null);
+  const [assistingMotivation, setAssistingMotivation] = useState42(null);
+  const [progress, setProgress] = useState42(null);
   const assistStreamRef = useRef33(null);
   const progressDismissTimeoutRef = useRef33(null);
-  const handleAnnotationProgress = useCallback33((chunk) => {
+  const handleAnnotationProgress = useCallback34((chunk) => {
     setProgress(chunk);
   }, []);
-  const handleAnnotationComplete = useCallback33((event) => {
+  const handleAnnotationComplete = useCallback34((event) => {
     setAssistingMotivation((prev) => {
       if (!event.motivation || event.motivation !== prev) return prev;
       return null;
@@ -56589,7 +56586,7 @@ function useAnnotationFlow(rUri) {
       progressDismissTimeoutRef.current = null;
     }, 5e3);
   }, [showSuccess]);
-  const handleAnnotationFailed = useCallback33((event) => {
+  const handleAnnotationFailed = useCallback34((event) => {
     if (progressDismissTimeoutRef.current) {
       clearTimeout(progressDismissTimeoutRef.current);
       progressDismissTimeoutRef.current = null;
@@ -56599,14 +56596,14 @@ function useAnnotationFlow(rUri) {
     const errorMessage = event.payload.error || "Annotation failed";
     showError(errorMessage);
   }, [showError]);
-  const handleProgressDismiss = useCallback33(() => {
+  const handleProgressDismiss = useCallback34(() => {
     if (progressDismissTimeoutRef.current) {
       clearTimeout(progressDismissTimeoutRef.current);
       progressDismissTimeoutRef.current = null;
     }
     setProgress(null);
   }, []);
-  useEffect45(() => {
+  useEffect46(() => {
     const handleAnnotationCreate = async (event) => {
       const currentClient = clientRef.current;
       const currentRUri = rUriRef.current;
@@ -56736,7 +56733,7 @@ function useAnnotationFlow(rUri) {
     "annotate:create-failed": ({ error }) => showError(`Failed to create annotation: ${error.message}`),
     "annotate:delete-failed": ({ error }) => showError(`Failed to delete annotation: ${error.message}`)
   });
-  useEffect45(() => {
+  useEffect46(() => {
     return () => {
       if (progressDismissTimeoutRef.current) {
         clearTimeout(progressDismissTimeoutRef.current);
@@ -56751,66 +56748,6 @@ function useAnnotationFlow(rUri) {
   };
 }
 
-// src/hooks/usePanelNavigation.ts
-import { useState as useState42, useCallback as useCallback34, useEffect as useEffect46 } from "react";
-var tabGenerationCounter = 0;
-function usePanelNavigation() {
-  const [activePanel, setActivePanel] = useState42(() => {
-    if (typeof window !== "undefined") {
-      const saved = localStorage.getItem("activeToolbarPanel");
-      return saved || null;
-    }
-    return null;
-  });
-  const [scrollToAnnotationId, setScrollToAnnotationId] = useState42(null);
-  const [panelInitialTab, setPanelInitialTab] = useState42(null);
-  useEffect46(() => {
-    if (typeof window === "undefined") return;
-    if (activePanel) {
-      localStorage.setItem("activeToolbarPanel", activePanel);
-    } else {
-      localStorage.removeItem("activeToolbarPanel");
-    }
-  }, [activePanel]);
-  const handleScrollCompleted = useCallback34(() => {
-    setScrollToAnnotationId(null);
-  }, []);
-  const handlePanelToggle = useCallback34(({ panel }) => {
-    setActivePanel((current) => current === panel ? null : panel);
-  }, []);
-  const handlePanelOpen = useCallback34(({ panel, scrollToAnnotationId: scrollTarget, motivation }) => {
-    if (scrollTarget) {
-      setScrollToAnnotationId(scrollTarget);
-    }
-    if (motivation) {
-      const motivationToTab = {
-        "linking": "reference",
-        "commenting": "comment",
-        "tagging": "tag",
-        "highlighting": "highlight",
-        "assessing": "assessment"
-      };
-      const tab2 = motivationToTab[motivation] || "highlight";
-      setPanelInitialTab({ tab: tab2, generation: ++tabGenerationCounter });
-    }
-    setActivePanel(panel);
-  }, []);
-  const handlePanelClose = useCallback34(() => {
-    setActivePanel(null);
-  }, []);
-  useEventSubscriptions({
-    "attend:panel-toggle": handlePanelToggle,
-    "attend:panel-open": handlePanelOpen,
-    "attend:panel-close": handlePanelClose
-  });
-  return {
-    activePanel,
-    scrollToAnnotationId,
-    panelInitialTab,
-    onScrollCompleted: handleScrollCompleted
-  };
-}
-
 // src/hooks/useGenerationFlow.ts
 import { useState as useState43, useCallback as useCallback35, useEffect as useEffect47, useRef as useRef34 } from "react";
 import { annotationUri, accessToken as accessToken5 } from "@semiont/core";
@@ -57035,7 +56972,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 +57102,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 +57188,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) {
@@ -57461,6 +57400,7 @@ export {
   BrowseView,
   Button,
   ButtonGroup,
+  COMMON_PANELS,
   CacheProvider,
   CodeMirrorRenderer,
   CollaborationPanel,
@@ -57494,6 +57434,7 @@ export {
   PopupHeader,
   ProposeEntitiesModal,
   QUERY_KEYS,
+  RESOURCE_PANELS,
   RecentDocumentsPage,
   ReferenceEntry,
   ReferenceResolutionWidget,
@@ -57539,7 +57480,11 @@ export {
   UnifiedHeader,
   UserMenuSkeleton,
   WelcomePage,
+  applyHighlights,
+  buildSourceToRenderedMap,
+  buildTextNodeIndex,
   buttonStyles,
+  clearHighlights,
   createHoverHandlers,
   cssVariables,
   dispatch401Error,
@@ -57557,17 +57502,19 @@ export {
   getSchemaCategory as getTagCategory,
   getTagSchema,
   getTagSchemasByDomain,
+  hideWidgetPreview,
   isShapeSupported,
   isValidCategory,
   jsonLightHighlightStyle,
   jsonLightTheme,
   onAuthEvent,
-  rehypeRenderAnnotations,
-  remarkAnnotations,
   resetEventBusForTesting,
+  resolveAnnotationRanges,
   sanitizeImageURL,
   saveSelectedShapeForSelectorType,
+  showWidgetPreview,
   supportsDetection,
+  toOverlayAnnotations,
   tokens,
   useAdmin,
   useAnnotationFlow,